@l3-lib/ui-style/dist/index.css

L3vels UI CSS

/*  stylelint-disable scss/at-if-no-null */
/*  stylelint-enable scss/at-if-no-null */
:root {
  --motion-productive-short: 70ms;
  --motion-productive-medium: 100ms;
  --motion-productive-long: 150ms;
  --motion-expressive-short: 250ms;
  --motion-expressive-long: 400ms;
  --motion-timing-enter: cubic-bezier(0, 0, 0.35, 1);
  --motion-timing-exit: cubic-bezier(0.4, 0, 1, 1);
  --motion-timing-transition: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-timing-emphasize: cubic-bezier(0, 0, 0.2, 1.4);
  --expand-animation-timing: var(--motion-timing-enter);
  --spacing-xs: 4px;
  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --border-width: 1px;
  --border-style: solid;
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-big: 16px;
  --disabled-component-opacity: 0.38;
  --font-family: Circular, sans-serif;
  --font-family-normal: Circular-normal, sans-serif;
  --font-smoothing-webkit: antialiased;
  --font-smoothing-moz: grayscale;
  --font-weight-very-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 500;
  --font-size-10: 14px;
  --font-size-20: 14px;
  --font-size-30: 16px;
  --font-size-40: 18px;
  --font-size-50: 24px;
  --font-size-60: 30px;
  --font-line-height-10: 18px;
  --font-line-height-20: 24px;
  --font-line-height-30: 24px;
  --font-line-height-40: 24px;
  --font-line-height-50: 32px;
  --font-line-height-60: 42px;
  --font-size-h1: var(--font-size-60);
  --font-size-h2: var(--font-size-50);
  --font-size-h3: var(--font-size-50);
  --font-size-h4: var(--font-size-40);
  --font-size-h5: var(--font-size-30);
  --font-size-general-label: var(--font-size-20);
  --font-size-paragraph: var(--font-size-30);
  --font-size-subtext: var(--font-size-10);
  --font-line-height-h1: var(--font-line-height-60);
  --font-line-height-h2: var(--font-line-height-50);
  --font-line-height-h3: var(--font-line-height-50);
  --font-line-height-h4: var(--font-line-height-40);
  --font-line-height-h5: var(--font-line-height-30);
  --font-line-height-general-label: var(--font-line-height-20);
  --font-line-height-paragraph: var(--font-line-height-30);
  --font-line-height-subtext: var(--font-line-height-10);
  --font-h1: var(--font-weight-bold) var(--font-size-h1)/var(--font-line-height-h1) var(--title-font-family);
  --font-h2: var(--font-weight-bold) var(--font-size-h2)/var(--font-line-height-h2) var(--title-font-family);
  --font-h3: var(--font-weight-light) var(--font-size-h3)/var(--font-line-height-h3) var(--title-font-family);
  --font-h4: var(--font-weight-bold) var(--font-size-h4)/var(--font-line-height-h4) var(--title-font-family);
  --font-h5: var(--font-weight-bold) var(--font-size-h5)/var(--font-line-height-h5) var(--font-family);
  --font-general-label: var(--font-weight-normal) var(--font-size-general-label)/var(--font-line-height-general-label) var(--font-family);
  --font-paragraph: var(--font-weight-normal) var(--font-size-paragraph)/var(--font-line-height-paragraph) var(--font-family);
  --font-subtext: var(--font-weight-normal) var(--font-size-subtext)/var(--font-line-height-subtext) var(--font-family);
}

:root,
.light-app-theme,
.default-app-theme {
  --color-highlight_blue: #cce5ff;
  --color-basic_blue: #0073ea;
  --color-dark_blue: #0060b9;
  --color-bazooka: #f65f7c;
  --color-snow_white: #ffffff;
  --color-riverstone_gray: #f6f7fb;
  --color-ui_grey: #dcdfec;
  --color-wolf_gray: #c3c6d4;
  --color-asphalt: #676879;
  --color-mud_black: #323338;
  --color-black: #000000;
  --color-success: #258750;
  --color-success-hover: #007038;
  --color-success-highlight: #bbdbc9;
  --color-error: #d83a52;
  --color-error-hover: #b63546;
  --color-error-highlight: #f4c3cb;
  --color-link_color: #1f76c2;
  --color-surface: #292f4c;
  --primary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #cce5ff;
  --primary-selected-hover-color: #aed4fc;
  --primary-text-color: #323338;
  --text-color-on-primary: #ffffff;
  --text-color-on-inverted: #ffffff;
  --secondary-text-color: #676879;
  --placeholder-color: #676879;
  --icon-color: #676879;
  --link-color: #1f76c2;
  --primary-background-color: #ffffff;
  --primary-background-hover-color: #dcdfec;
  --secondary-background-color: #ffffff;
  --grey-background-color: #f6f7fb;
  --allgrey-background-color: #f6f7fb;
  --inverted-color-background: #323338;
  --disabled-background-color: #ecedf5;
  --disabled-text-color: rgba(50, 51, 56, var(--disabled-component-opacity));
  --positive-color: #258750;
  --positive-color-hover: #007038;
  --positive-color-selected: #bbdbc9;
  --positive-color-selected-hover: #b5cec0;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #f4c3cb;
  --negative-color-selected-hover: #ecb7bf;
  --private-color: #f65f7c;
  --shareable-color: #a25ddc;
  --ui-border-color: #c3c6d4;
  --layout-border-color: #d0d4e4;
  --box-shadow-xs: 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --box-shadow-small: 0px 4px 8px rgba(0, 0, 0, 0.2);
  --box-shadow-medium: 0px 6px 20px rgba(0, 0, 0, 0.2);
  --box-shadow-large: 0px 15px 50px rgba(0, 0, 0, 0.3);
  --color-primitive-purple-50: #F6E8FD;
  --color-primitive-purple-100: #EDD2FC;
  --color-primitive-purple-200: #E4BCFB;
  --color-primitive-purple-300: #DCA6FA;
  --color-primitive-purple-400: #CA7AF7;
  --color-primitive-purple-500: #B94EF5;
  --color-primitive-purple-600: #A822F3;
  --color-primitive-purple-700: #D14485;
  --color-primitive-pink-50: #FCEAFC;
  --color-primitive-pink-100: #F9D6FA;
  --color-primitive-pink-200: #F3ADF5;
  --color-primitive-pink-300: #EE84F0;
  --color-primitive-pink-400: #EB6FED;
  --color-primitive-pink-500: #E546E8;
  --color-primitive-pink-600: #E332E6;
  --color-primitive-pink-700: #D14485;
  --color-primitive-red-50: #FCEAEC;
  --color-primitive-red-100: #F9D6DA;
  --color-primitive-red-200: #F3ADB5;
  --color-primitive-red-300: #F098A3;
  --color-primitive-red-400: #EA6F7E;
  --color-primitive-red-500: #E4465A;
  --color-primitive-red-600: #E23248;
  --color-primitive-red-700: #A6353D;
  --color-primitive-orange-50: #FDF5EB;
  --color-primitive-orange-100: #F9E1C3;
  --color-primitive-orange-200: #F3C388;
  --color-primitive-orange-300: #E5A552;
  --color-primitive-orange-400: #EEA03C;
  --color-primitive-orange-500: #EB9B3A;
  --color-primitive-orange-600: #E87929;
  --color-primitive-orange-700: #E85C29;
  --color-primitive-yellow-50: #FEFEDC;
  --color-primitive-yellow-100: #FEFECB;
  --color-primitive-yellow-200: #FEFEBA;
  --color-primitive-yellow-300: #FDFEA9;
  --color-primitive-yellow-400: #FDFE75;
  --color-primitive-yellow-500: #FDFE53;
  --color-primitive-yellow-600: #EEFB53;
  --color-primitive-yellow-700: #CEFB53;
  --color-primitive-green-50: #F1FEED;
  --color-primitive-green-100: #E4FDDB;
  --color-primitive-green-200: #D7FDC9;
  --color-primitive-green-300: #C9FCB7;
  --color-primitive-green-400: #AFFB93;
  --color-primitive-green-500: #94FA6E;
  --color-primitive-green-600: #7AF94B;
  --color-primitive-green-700: #61C72C;
  --color-primitive-light-green-50: #F1FEF5;
  --color-primitive-light-green-100: #E3FEEC;
  --color-primitive-light-green-200: #C7FDD9;
  --color-primitive-light-green-300: #ABFCC6;
  --color-primitive-light-green-400: #81FAAA;
  --color-primitive-light-green-500: #74FAA1;
  --color-primitive-light-green-600: #73F96D;
  --color-primitive-light-green-700: #1BFF67;
  --color-primitive-mint-50: #F1FEF5;
  --color-primitive-mint-100: #E3FEEC;
  --color-primitive-mint-200: #C7FDD9;
  --color-primitive-mint-300: #ABFCC6;
  --color-primitive-mint-400: #81FAAA;
  --color-primitive-mint-500: #74FAA1;
  --color-primitive-mint-600: #54FA8C;
  --color-primitive-mint-700: #3EE877;
  --color-primitive-teal-50: #EDF7FB;
  --color-primitive-teal-100: #DCEFF7;
  --color-primitive-teal-200: #CAE7F3;
  --color-primitive-teal-300: #A7D8ED;
  --color-primitive-teal-400: #84C8E3;
  --color-primitive-teal-500: #72C9DF;
  --color-primitive-teal-600: #50B1D7;
  --color-primitive-teal-700: #408DAC;
  --color-primitive-aquamarinel-50: #ECFCFD;
  --color-primitive-aquamarinel-100: #C2D3FF;
  --color-primitive-aquamarinel-200: #8DAAF5;
  --color-primitive-aquamarinel-300: #5880E9;
  --color-primitive-aquamarinel-400: #3044CF;
  --color-primitive-aquamarinel-500: #364CE6;
  --color-primitive-aquamarinel-600: #48ECF0;
  --color-primitive-aquamarinel-700: #69ADB0;
  --color-primitive-blue-50: #D6EBFF;
  --color-primitive-blue-100: #9FD2FF;
  --color-primitive-blue-200: #74BDFF;
  --color-primitive-blue-300: #4CA6F8;
  --color-primitive-blue-400: #2961F2;
  --color-primitive-blue-500: #2152F3;
  --color-primitive-blue-600: #0406EE;
  --color-primitive-blue-00: #151E5B;
  --color-primitive-white: #FFFFFF;
  --color-primitive-gray-50: #F8FAFF;
  --color-primitive-gray-100: #F1F6FE;
  --color-primitive-gray-200: #DDE9FD;
  --color-primitive-gray-300: #CFE0FC;
  --color-primitive-gray-400: #BBD4FB;
  --color-primitive-gray-500: #A8BEE2;
  --color-primitive-gray-600: #8294AF;
  --color-primitive-gray-700: #5D6A7D;
  --color-primitive-gray-800: #383F4B;
  --color-primitive-gray-900: #131519;
  --color-primitive-black: #000000;
  --color-gradient-blue: linear-gradient(180deg, #4CA6F8 0%, #2152F3 100%);
  --color-gradient-red: linear-gradient(180deg, #D14485 0%, #E23248 100%);
  --color-gradient-light-green: linear-gradient(180deg, #74FAA1 0%, #73F96D 100%);
  --color-gradient-dark-blue: linear-gradient(180deg, #2961F2 0%, #0406EE 100%);
  --color-gradient-yellow: linear-gradient(180deg, #FDFE53 0%, #EB9B3A 100%);
  --color-gradient-teal: linear-gradient(180deg, #73FAFD 0%, #50B1D7 100%);
  --color-gradient-green: linear-gradient(180deg, #CEFB53 0%, #7AF94B 100%);
  --color-gradient-orange: linear-gradient(180deg, #EEA03C 0%, #E85C29 100%);
  --color-gradient-pink: linear-gradient(180deg, #E332E6 0%, #A822F3 100%);
  --color-transparent-black-09: rgba(0, 0, 0, 0.9);
  --color-transparent-black-08: rgba(0, 0, 0, 0.8);
  --color-transparent-black-07: rgba(0, 0, 0, 0.7);
  --color-transparent-black-06: rgba(0, 0, 0, 0.6);
  --color-transparent-black-05: rgba(0, 0, 0, 0.5);
  --color-transparent-black-04: rgba(0, 0, 0, 0.4);
  --color-transparent-black-03: rgba(0, 0, 0, 0.3);
  --color-transparent-black-02: rgba(0, 0, 0, 0.2);
  --color-transparent-black-01: rgba(0, 0, 0, 0.1);
  --color-transparent-white-09: rgba(255, 255, 255, 0.9);
  --color-transparent-white-08: rgba(255, 255, 255, 0.8);
  --color-transparent-white-07: rgba(255, 255, 255, 0.7);
  --color-transparent-white-06: rgba(255, 255, 255, 0.6);
  --color-transparent-white-05: rgba(255, 255, 255, 0.5);
  --color-transparent-white-04: rgba(255, 255, 255, 0.4);
  --color-transparent-white-03: rgba(255, 255, 255, 0.3);
  --color-transparent-white-02: rgba(255, 255, 255, 0.2);
  --color-transparent-white-01: rgba(255, 255, 255, 0.1);
  --color-background-primary-a: var(--color-primitive-black);
  --color-background-primary-b: var(--color-primitive-white);
  --color-background-accent: var(--color-gradient-teal);
  --color-background-negative: var(--color-gradient-red);
  --color-background-warning: var(--color-gradient-yellow);
  --color-background-positive: var(--color-gradient-green);
  --color-core-background-primary: var(--color-primitive-black);
  --color-core-background-secondary: var(--color-primitive-white);
  --color-core-background-tertiary: var(--color-transparent-white-02);
  --color-content-primary: var(--color-primitive-white);
  --color-content-secondary: var(--color-primitive-black);
  --color-content-tertiary: var(--color-transparent-white-06);
  --color-content-quaternary: var(--color-transparent-white-02);
  --color-border-primary: var(--color-primitive-white);
  --color-border-secondary: var(--color-transparent-white-08);
  --color-border-tertiary: var(--color-transparent-black-07);
  --color-border-selected-a: var(--color-primitive-black);
  --color-border-selected-b: var(--color-gradient-teal);
  --color-background-core-disabled: var(--color-transparent-white-02);
  --color-background-core-overlay-dak: var(--color-transparent-black-02);
  --color-background-core-overlay-light: var(--color-transparent-white-01);
  --color-background-core-accent: var(--color-gradient-teal);
  --color-background-core-negative: var(--color-gradient-red);
  --color-background-core-warning: var(--color-gradient-yellow);
  --color-background-core-positive: var(--color-gradient-green);
  --color-content-disabled: var(--color-transparent-white-04);
  --color-content-on-color: var(--color-primitive-white);
  --color-content-on-color-inverse: var(--color-primitive-black);
  --color-content-on-color-inverse-secondary: var(--color-transparent-black-06);
  --color-content-accent: var(--color-gradient-teal);
  --color-content-negative: var(--color-gradient-red);
  --color-content-warning: var(--color-gradient-yellow);
  --color-content-positive: var(--color-gradient-green);
  --color-border-disabled: var(--color-transparent-white-04);
  --color-border-accent: var(--color-gradient-teal);
  --color-border-negative: var(--color-gradient-red);
  --color-border-warning: var(--color-gradient-yellow);
  --color-border-positive: var(--color-gradient-green);
  --color-background-primary: radial-gradient(52.7% 52.7% at 50% 50%, #3e4ea9 0%, #111b52 100%);
  --color-background-secondary: #dfdfff;
  /*

  LEGACY VALUES

  These values are not within Vibe's UI definitions and are on a deprecation path.
  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.

  */
  --color-dark_marble: #f1f1f1;
  --color-marble: #f7f7f7;
  --color-gainsboro: #e1e1e1;
  --color-extra_light_gray: #edeef0;
  --color-glitter: #d9f0ff;
  --color-ultra_light_gray: #ebebeb;
  --color-very_light_gray: #a1a1a1;
  --color-jaco_gray: #9699a6;
  --color-storm_gray: #6b6d77;
  --color-trolley-grey: #808080;
  --color-basic_light_blue: #c7e6fa;
  --color-light_blue: #61caf7;
  --color-turquoise: #66ccff;
  --color-aqua: #00d1d1;
  --color-live_blue: #009aff;
  --color-jeans: #597bfc;
  --color-burned_eggplant: #181d37;
  --color-light-pink: #ff5ac4;
  --color-dark-pink: #ff158a;
  --color-dark_red: #bb3354;
  --color-yellow: #ffcb00;
  --color-mustered: #cab641;
  --color-orange: #fdab3d;
  --color-lime-green: #9cd326;
  --color-jade: #03c875;
  --color-green-haze: #00a359;
  --color-grass-green: #037f4c;
  --color-amethyst: #a25ddc;
  --color-dark-purple: #784bd1;
  --color-blue_links: #0086c0;
  --color-blue-links: #0086c0;
  --color-private: #f65f7c;
  --color-public: #009aff;
  --color-board_views_grey: #6e6f8f;
  --color-board_views_grey_hover: #b2b3d0;
  --color-board_views_blue: #1c1f3b;
  --color-board_views_blue_secondary: #363a52;
  --color-border_light_gray: #f5f6f8;
  --color-brand-blue: #00a9ff;
  --color-brand-charcoal: #2b2c5c;
  --color-brand-gold: #ffcc00;
  --color-brand-green: #11dd80;
  --color-brand-iris: #595ad4;
  --color-brand-light-blue: #00cff4;
  --color-brand-malachite: #00cd6f;
  --color-brand-purple: #a358d0;
  --color-brand-red: #f74875;
  --color-deadline_upcoming_indication: #5d6387;
  --color-default_group_color: #579bfc;
  --color-form_btn_hover: #0083d9;
  --color-form_purple: #575c96;
  --color-highlight: #dff0ff;
  --color-green_shadow: #00c875;
  --color-green-shadow: #00c875;
  --color-red_shadow: #e2445c;
  --color-red-shadow: #e2445c;
  --color-pulse_bg: #f0f0f0;
  --color-pulse_text_color: #333333;
  --color-placholder_gray: #d8d8d8;
  --color-placeholder_light_gray: #efefef;
  --color-excel-green: #207245;
  --color-media-blue: #2ea2e9;
  --color-pdf-red: #bb0706;
  --color-ppt-orange: #d64e2a;
  --color-word-blue: #2a5699;
  --color-zip-orange: #e4901c;
  --color-like_red: #fb275d;
  --color-scrollbar_gray: #b2b2b2;
  --color-timeline_grid_blue: #454662;
  --color-timeline_blue: #1c1f3b;
  --color-highlight_blue-rgb: 204, 229, 255;
  --color-snow_white-with-opacity: rgba(255, 255, 255, 0.4);
  --color-wolf_gray-with-opacity: rgba(195, 198, 212, 0.1);
  --color-asphalt-with-opacity: rgba(103, 104, 121, 0.1);
  --primary-on-secondary-color: #0073ea;
  --primary-hover-on-secondary-color: #0060b9;
  --primary-selected-color-rgb: 204, 229, 255;
  --primary-selected-on-secondary-color: #cce5ff;
  --primary-text-on-secondary-color: #323338;
  --text-color-on-primary-with-opacity: rgba(255, 255, 255, 0.4);
  --secondary-text-on-secondary-color: #676879;
  --placeholder-color-with-opacity: rgba(103, 104, 121, 0.1);
  --placeholder-on-secondary-color: #676879;
  --icon-on-secondary-color: #676879;
  --link-on-secondary-color: #1f76c2;
  --label-background-color: #cce5ff;
  --label-background-on-secondary-color: #cce5ff;
  --primary-background-color-rgb: 255, 255, 255;
  --primary-background-hover-on-secondary-color: #dcdfec;
  --modal-background-color: #ffffff;
  --secondary-background-color-rgb: 255, 255, 255;
  --disabled-background-on-secondary-color: #ecedf5;
  --disabled-text-on-secondary-color: rgba(50, 51, 56, var(--disabled-component-opacity));
  --ui-border-on-secondary-color: #c3c6d4;
  --layout-border-on-secondary-color: #d0d4e4;
  --dark-background-color: #f6f7fb;
  --dark-background-on-secondary-color: #f6f7fb;
  --dialog-background-color: #ffffff;
  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.dark-app-theme {
  --primary-color: #0073ea;
  --primary-on-secondary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #133774;
  --primary-selected-hover-color: #0d2e65;
  --primary-text-color: #d5d8df;
  --text-color-on-primary: #ffffff;
  --text-color-on-inverted: #323338;
  --secondary-text-color: #9699a6;
  --placeholder-color: #c3c6d4;
  --icon-color: #c3c6d4;
  --link-color: #69a7ef;
  --primary-background-color: #181b34;
  --primary-background-hover-color: #4b4e69;
  --secondary-background-color: #30324e;
  --grey-background-color: #181b34;
  --allgrey-background-color: #30324e;
  --inverted-color-background: #ffffff;
  --disabled-text-color: rgba(213, 216, 223, var(--disabled-component-opacity));
  --disabled-background-color: #3c3f59;
  --positive-color: #258750;
  --positive-color-hover: #007038;
  --positive-color-selected: #26503e;
  --positive-color-selected-hover: #194733;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --private-color: #f65f7c;
  --shareable-color: #a25ddc;
  --ui-border-color: #797e93;
  --layout-border-color: #4b4e69;
  --box-shadow-xs: 0px 4px 6px -4px rgba(9, 11, 25, 0.5);
  --box-shadow-small: 0px 4px 8px rgba(9, 11, 25, 0.5);
  --box-shadow-medium: 0px 6px 20px rgba(9, 11, 25, 0.5);
  --box-shadow-large: 0px 15px 50px rgba(9, 11, 25, 0.5);
  --color-grass_green: #359970;
  --color-grass_green-hover: #116846;
  --color-grass_green-selected: #0f4f43;
  --color-done-green: #33d391;
  --color-done-green-hover: #0f9b63;
  --color-done-green-selected: #0e7358;
  --color-done-green-selected-with-opacity: rgba(14, 115, 88, 0.6);
  --color-bright-green: #b0dc51;
  --color-bright-green-hover: #7ca32b;
  --color-bright-green-selected: #5c7930;
  --color-saladish: #d5c567;
  --color-saladish-hover: #9d8f3e;
  --color-saladish-selected: #736a3e;
  --color-egg_yolk: #ffd533;
  --color-egg_yolk-hover: #c29e11;
  --color-egg_yolk-selected: #8d751e;
  --color-egg_yolk-rgb: 255, 213, 51;
  --color-working_orange: #fdbc64;
  --color-working_orange-hover: #c0873c;
  --color-working_orange-selected: #8c653c;
  --color-dark-orange: #ff7b4d;
  --color-dark-orange-hover: #c25531;
  --color-dark-orange-selected: #8d4134;
  --color-peach: #ffbdbd;
  --color-peach-hover: #c2888a;
  --color-peach-selected: #8d6674;
  --color-sunset: #ff9191;
  --color-sunset-hover: #c26163;
  --color-sunset-selected: #8d4a58;
  --color-sunset-selected-with-opacity: rgba(141, 74, 88, 0.6);
  --color-stuck-red: #e8697d;
  --color-stuck-red-hover: #ad3f51;
  --color-stuck-red-selected: #7f314b;
  --color-dark-red: #c95c76;
  --color-dark-red-hover: #92334c;
  --color-dark-red-selected: #6b2947;
  --color-sofia_pink: #ff44a1;
  --color-sofia_pink-hover: #c21e71;
  --color-sofia_pink-selected: #8d1a62;
  --color-lipstick: #ff7bd0;
  --color-lipstick-hover: #c24e9a;
  --color-lipstick-selected: #8d3c7f;
  --color-bubble: #fbb4f4;
  --color-bubble-hover: #be80ba;
  --color-bubble-selected: #8b6096;
  --color-purple: #b57de3;
  --color-purple-hover: #8050ab;
  --color-purple-selected: #5f3e8b;
  --color-dark_purple: #936fda;
  --color-dark_purple-hover: #6344a3;
  --color-dark_purple-selected: #4a3586;
  --color-berry: #6645a9;
  --color-berry-hover: #673971;
  --color-berry-selected: #4d2d62;
  --color-dark_indigo: #401694;
  --color-dark_indigo-hover: #3c1f78;
  --color-dark_indigo-selected: #2e1b67;
  --color-indigo: #777ae5;
  --color-indigo-hover: #4b4ead;
  --color-indigo-selected: #383c8d;
  --color-navy: #4e73a7;
  --color-navy-hover: #274776;
  --color-navy-selected: #1f3866;
  --color-bright-blue: #79affd;
  --color-bright-blue-hover: #4c7cc1;
  --color-bright-blue-selected: #395d9b;
  --color-dark-blue: #339ecd;
  --color-dark-blue-hover: #0f6d97;
  --color-dark-blue-selected: #0e527e;
  --color-aquamarine: #71d6d1;
  --color-aquamarine-hover: #469e9b;
  --color-aquamarine-selected: #357580;
  --color-chili-blue: #85d6ff;
  --color-chili-blue-hover: #569ec3;
  --color-chili-blue-selected: #41759d;
  --color-river: #86b4ca;
  --color-river-hover: #588095;
  --color-river-selected: #42607c;
  --color-winter: #aebdca;
  --color-winter-hover: #7b8895;
  --color-winter-selected: #5b667c;
  --color-explosive: #d0d0d0;
  --color-explosive-hover: #98999a;
  --color-explosive-selected: #70717f;
  --color-american_gray: #999999;
  --color-american_gray-hover: #69696a;
  --color-american_gray-selected: #4e505e;
  --color-blackish: #5c5c5c;
  --color-blackish-hover: #222222;
  --color-blackish-selected: #272937;
  --color-brown: #99756c;
  --color-brown-hover: #684943;
  --color-brown-selected: #4d3941;
  --color-orchid: #e190c0;
  --color-orchid-hover: #b4739a;
  --color-orchid-selected: #b4739a;
  --color-tan: #bdab95;
  --color-tan-hover: #978977;
  --color-tan-selected: #716863;
  --color-sky: #b4e9f8;
  --color-sky-hover: #90bac6;
  --color-sky-selected: #6c8a9a;
  --color-coffee: #ca9a8b;
  --color-coffee-hover: #a27b6f;
  --color-coffee-selected: #795e5d;
  --color-royal: #5591ea;
  --color-royal-hover: #4474bb;
  --color-royal-selected: #375993;
  --color-teal: #457b82;
  --color-teal-hover: #376268;
  --color-teal-selected: #2e4d58;
  --color-lavender: #cab9fa;
  --color-lavender-hover: #a294c8;
  --color-lavender-selected: #85597b;
  --color-steel: #bacbed;
  --color-steel-hover: #95a2be;
  --color-steel-selected: #707a95;
  --color-lilac: #b1adc7;
  --color-lilac-hover: #8e8a9f;
  --color-lilac-selected: #6b697f;
  --color-pecan: #786565;
  --color-pecan-hover: #605151;
  --color-pecan-selected: #4a4148;
  --content-background-color: #30324e;
  /*

  LEGACY VALUES

  These values are not within Vibe's UI definitions and are on a deprecation path.
  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.

  */
  --primary-on-secondary-color: #0073ea;
  --primary-hover-on-secondary-color: #0060b9;
  --primary-selected-color-rgb: 19, 55, 116;
  --primary-selected-on-secondary-color: #133774;
  --primary-text-on-secondary-color: #d5d8df;
  --primary-background-color-rgb: 24, 27, 52;
  --primary-background-hover-on-secondary-color: #4b4e69;
  --secondary-background-color-rgb: 48, 50, 78;
  --secondary-text-on-secondary-color: #9699a6;
  --link-on-secondary-color: #69a7ef;
  --modal-background-color: #181b34;
  --dark-background-color: #393b53;
  --dark-background-on-secondary-color: #4b4e69;
  --dialog-background-color: #30324e;
  --label-background-color: #404b69;
  --label-background-on-secondary-color: #404b69;
  --icon-on-secondary-color: #c3c6d4;
  --placeholder-color-with-opacity: rgba(195, 198, 212, 0.1);
  --placeholder-on-secondary-color: #c3c6d4;
  --ui-border-on-secondary-color: #797e93;
  --layout-border-on-secondary-color: #4b4e69;
  --disabled-background-on-secondary-color: #3c3f59;
  --disabled-text-on-secondary-color: rgba(213, 216, 223, var(--disabled-component-opacity));
  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.black-app-theme {
  --primary-color: #0073ea;
  --primary-on-secondary-color: #0073ea;
  --primary-hover-color: #0060b9;
  --primary-selected-color: #133774;
  --primary-selected-hover-color: #0d2e65;
  --primary-text-color: #eeeeee;
  --text-color-on-primary: #ffffff;
  --text-color-on-inverted: #111111;
  --secondary-text-color: #aaaaaa;
  --placeholder-color: #aaaaaa;
  --icon-color: #aaaaaa;
  --link-color: #69a7ef;
  --primary-background-color: #111111;
  --primary-background-hover-color: #636363;
  --secondary-background-color: #2c2c2c;
  --grey-background-color: #111111;
  --allgrey-background-color: #2c2c2c;
  --inverted-color-background: #eeeeee;
  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --disabled-background-color: #3a3a3a;
  --positive-color: #258750;
  --positive-color-hover: #007038;
  --positive-color-selected: #26503e;
  --positive-color-selected-hover: #194733;
  --negative-color: #d83a52;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --private-color: #f65f7c;
  --shareable-color: #a25ddc;
  --ui-border-color: #8d8d8d;
  --layout-border-color: #636363;
  --box-shadow-xs: 0px 4px 6px -4px #000000;
  --box-shadow-small: 0px 4px 8px #000000;
  --box-shadow-medium: 0px 6px 20px #000000;
  --box-shadow-large: 0px 15px 50px #000000;
  --color-grass_green: #359970;
  --color-grass_green-hover: #116846;
  --color-grass_green-selected: #0a482e;
  --color-done-green: #33d391;
  --color-done-green-hover: #0f9b63;
  --color-done-green-selected: #096c43;
  --color-done-green-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-bright-green: #b0dc51;
  --color-bright-green-hover: #7ca32b;
  --color-bright-green-selected: #56721b;
  --color-saladish: #d5c567;
  --color-saladish-hover: #9d8f3e;
  --color-saladish-selected: #6d6329;
  --color-egg_yolk: #ffd533;
  --color-egg_yolk-hover: #c29e11;
  --color-egg_yolk-selected: #886e09;
  --color-egg_yolk-rgb: 255, 213, 51;
  --color-working_orange: #fdbc64;
  --color-working_orange-hover: #c0873c;
  --color-working_orange-selected: #875e27;
  --color-dark-orange: #ff7b4d;
  --color-dark-orange-hover: #c25531;
  --color-dark-orange-selected: #883a1f;
  --color-peach: #ffbdbd;
  --color-peach-hover: #c2888a;
  --color-peach-selected: #885f5f;
  --color-sunset: #ff9191;
  --color-sunset-hover: #c26163;
  --color-sunset-selected: #884343;
  --color-sunset-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-stuck-red: #e8697d;
  --color-stuck-red-hover: #ad3f51;
  --color-stuck-red-selected: #792a36;
  --color-dark-red: #c95c76;
  --color-dark-red-hover: #92334c;
  --color-dark-red-selected: #662232;
  --color-sofia_pink: #ff44a1;
  --color-sofia_pink-hover: #c21e71;
  --color-sofia_pink-selected: #88134d;
  --color-lipstick: #ff7bd0;
  --color-lipstick-hover: #c24e9a;
  --color-lipstick-selected: #88356a;
  --color-bubble: #fbb4f4;
  --color-bubble-hover: #be80ba;
  --color-bubble-selected: #855981;
  --color-purple: #b57de3;
  --color-purple-hover: #8050ab;
  --color-purple-selected: #593776;
  --color-dark_purple: #936fda;
  --color-dark_purple-hover: #6344a3;
  --color-dark_purple-selected: #442e71;
  --color-berry: #9862a1;
  --color-berry-hover: #673971;
  --color-berry-selected: #47264d;
  --color-dark_indigo: #6645a9;
  --color-dark_indigo-hover: #3c1f78;
  --color-dark_indigo-selected: #291452;
  --color-indigo: #777ae5;
  --color-indigo-hover: #4b4ead;
  --color-indigo-selected: #333578;
  --color-navy: #4e73a7;
  --color-navy-hover: #274776;
  --color-navy-selected: #193151;
  --color-bright-blue: #79affd;
  --color-bright-blue-hover: #4c7cc1;
  --color-bright-blue-selected: #345686;
  --color-dark-blue: #339ecd;
  --color-dark-blue-hover: #0f6d97;
  --color-dark-blue-selected: #094b69;
  --color-aquamarine: #71d6d1;
  --color-aquamarine-hover: #469e9b;
  --color-aquamarine-selected: #2f6e6b;
  --color-chili-blue: #85d6ff;
  --color-chili-blue-hover: #569ec3;
  --color-chili-blue-selected: #3b6e88;
  --color-river: #86b4ca;
  --color-river-hover: #588095;
  --color-river-selected: #3c5967;
  --color-winter: #aebdca;
  --color-winter-hover: #7b8895;
  --color-winter-selected: #555f67;
  --color-explosive: #d0d0d0;
  --color-explosive-hover: #98999a;
  --color-explosive-selected: #6a6a6a;
  --color-american_gray: #999999;
  --color-american_gray-hover: #69696a;
  --color-american_gray-selected: #494949;
  --color-blackish: #5c5c5c;
  --color-blackish-hover: #222222;
  --color-blackish-selected: #111111;
  --color-brown: #99756c;
  --color-brown-hover: #684943;
  --color-brown-selected: #48322c;
  --color-orchid: #e190c0;
  --color-orchid-hover: #b4739a;
  --color-orchid-selected: #7e516c;
  --color-tan: #bdab95;
  --color-tan-hover: #978977;
  --color-tan-selected: #6a6053;
  --color-sky: #b4e9f8;
  --color-sky-hover: #90bac6;
  --color-sky-selected: #65828b;
  --color-coffee: #ca9a8b;
  --color-coffee-hover: #a27b6f;
  --color-coffee-selected: #71564e;
  --color-royal: #5591ea;
  --color-royal-hover: #4474bb;
  --color-royal-selected: #305183;
  --color-teal: #457b82;
  --color-teal-hover: #376268;
  --color-teal-selected: #274549;
  --color-lavender: #cab9fa;
  --color-lavender-hover: #a294c8;
  --color-lavender-selected: #71688c;
  --color-steel: #bacbed;
  --color-steel-hover: #95a2be;
  --color-steel-selected: #687185;
  --color-lilac: #687185;
  --color-lilac-hover: #8e8a9f;
  --color-lilac-selected: #63616f;
  --color-pecan: #786565;
  --color-pecan-hover: #605151;
  --color-pecan-selected: #433939;
  --content-background-color: radial-gradient(52.7% 52.7% at 50% 50%, #3e4ea9 0%, #111b52 100%);
  /*

  LEGACY VALUES

  These values are not within Vibe's UI definitions and are on a deprecation path.
  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.

  */
  --primary-on-secondary-color: #0073ea;
  --primary-hover-on-secondary-color: #0060b9;
  --primary-selected-color-rgb: 19, 55, 116;
  --primary-selected-on-secondary-color: #133774;
  --primary-text-on-secondary-color: #eeeeee;
  --primary-background-color-rgb: 17, 17, 17;
  --primary-background-hover-on-secondary-color: #636363;
  --secondary-background-color-rgb: 44, 44, 44;
  --secondary-text-on-secondary-color: #9699a6;
  --link-on-secondary-color: #69a7ef;
  --modal-background-color: #181b34;
  --dark-background-color: #2c2c2c;
  --dark-background-on-secondary-color: #4b4e69;
  --dialog-background-color: #2c2c2c;
  --label-background-color: #404b69;
  --label-background-on-secondary-color: #404b69;
  --icon-on-secondary-color: #aaaaaa;
  --placeholder-color-with-opacity: rgba(170, 170, 170, 0.1);
  --placeholder-on-secondary-color: #aaaaaa;
  --ui-border-on-secondary-color: #8d8d8d;
  --layout-border-on-secondary-color: #636363;
  --disabled-background-on-secondary-color: #3a3a3a;
  --disabled-text-on-secondary-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

.hacker_theme-app-theme {
  --primary-color: #fe78c6;
  --primary-hover-color: #fe5ab9;
  --primary-selected-color: #9f4077;
  --primary-selected-hover-color: #0d2e65;
  --primary-text-color: #d5d8df;
  --text-color-on-inverted: #323338;
  --secondary-text-color: #9699a6;
  --placeholder-color: #c3c6d4;
  --icon-color: #c3c6d4;
  --link-color: #bd93f9;
  --primary-background-color: #282a36;
  --primary-background-hover-color: #4b4e69;
  --secondary-background-color: #30324e;
  --grey-background-color: #282a36;
  --allgrey-background-color: #282a36;
  --inverted-color-background: #ffffff;
  --disabled-text-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --disabled-background-color: #3a3a3a;
  --positive-color: #50fa7b;
  --positive-color-hover: #007038;
  --positive-color-selected: #26503e;
  --positive-color-selected-hover: #194733;
  --negative-color: #ff5555;
  --negative-color-hover: #b63546;
  --negative-color-selected: #642830;
  --negative-color-selected-hover: #5a2027;
  --private-color: #f65f7c;
  --shareable-color: #a25ddc;
  --ui-border-color: #797e93;
  --layout-border-color: #414458;
  --box-shadow-xs: 0px 4px 6px -4px #000000;
  --box-shadow-small: 0px 4px 8px #000000;
  --box-shadow-medium: 0px 6px 20px #000000;
  --box-shadow-large: 0px 15px 50px #000000;
  --color-grass_green: #359970;
  --color-grass_green-hover: #116846;
  --color-grass_green-selected: #0a482e;
  --color-done-green: #33d391;
  --color-done-green-hover: #0f9b63;
  --color-done-green-selected: #096c43;
  --color-done-green-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-bright-green: #b0dc51;
  --color-bright-green-hover: #7ca32b;
  --color-bright-green-selected: #56721b;
  --color-saladish: #d5c567;
  --color-saladish-hover: #9d8f3e;
  --color-saladish-selected: #6d6329;
  --color-egg_yolk: #ffd533;
  --color-egg_yolk-hover: #c29e11;
  --color-egg_yolk-selected: #886e09;
  --color-egg_yolk-rgb: 255, 213, 51;
  --color-working_orange: #fdbc64;
  --color-working_orange-hover: #c0873c;
  --color-working_orange-selected: #875e27;
  --color-dark-orange: #ff7b4d;
  --color-dark-orange-hover: #c25531;
  --color-dark-orange-selected: #883a1f;
  --color-peach: #ffbdbd;
  --color-peach-hover: #c2888a;
  --color-peach-selected: #885f5f;
  --color-sunset: #ff9191;
  --color-sunset-hover: #c26163;
  --color-sunset-selected: #884343;
  --color-sunset-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-stuck-red: #e8697d;
  --color-stuck-red-hover: #ad3f51;
  --color-stuck-red-selected: #792a36;
  --color-dark-red: #c95c76;
  --color-dark-red-hover: #92334c;
  --color-dark-red-selected: #662232;
  --color-sofia_pink: #ff44a1;
  --color-sofia_pink-hover: #c21e71;
  --color-sofia_pink-selected: #88134d;
  --color-lipstick: #ff7bd0;
  --color-lipstick-hover: #c24e9a;
  --color-lipstick-selected: #88356a;
  --color-bubble: #fbb4f4;
  --color-bubble-hover: #be80ba;
  --color-bubble-selected: #855981;
  --color-purple: #b57de3;
  --color-purple-hover: #8050ab;
  --color-purple-selected: #593776;
  --color-dark_purple: #936fda;
  --color-dark_purple-hover: #6344a3;
  --color-dark_purple-selected: #442e71;
  --color-berry: #9862a1;
  --color-berry-hover: #673971;
  --color-berry-selected: #47264d;
  --color-dark_indigo: #6645a9;
  --color-dark_indigo-hover: #3c1f78;
  --color-dark_indigo-selected: #291452;
  --color-indigo: #777ae5;
  --color-indigo-hover: #4b4ead;
  --color-indigo-selected: #333578;
  --color-navy: #4e73a7;
  --color-navy-hover: #274776;
  --color-navy-selected: #193151;
  --color-bright-blue: #79affd;
  --color-bright-blue-hover: #4c7cc1;
  --color-bright-blue-selected: #345686;
  --color-dark-blue: #339ecd;
  --color-dark-blue-hover: #0f6d97;
  --color-dark-blue-selected: #094b69;
  --color-aquamarine: #71d6d1;
  --color-aquamarine-hover: #469e9b;
  --color-aquamarine-selected: #2f6e6b;
  --color-chili-blue: #85d6ff;
  --color-chili-blue-hover: #569ec3;
  --color-chili-blue-selected: #3b6e88;
  --color-river: #86b4ca;
  --color-river-hover: #588095;
  --color-river-selected: #3c5967;
  --color-winter: #aebdca;
  --color-winter-hover: #7b8895;
  --color-winter-selected: #555f67;
  --color-explosive: #d0d0d0;
  --color-explosive-hover: #98999a;
  --color-explosive-selected: #6a6a6a;
  --color-american_gray: #999999;
  --color-american_gray-hover: #69696a;
  --color-american_gray-selected: #494949;
  --color-blackish: #5c5c5c;
  --color-blackish-hover: #222222;
  --color-blackish-selected: #111111;
  --color-brown: #99756c;
  --color-brown-hover: #684943;
  --color-brown-selected: #48322c;
  --color-orchid: #e190c0;
  --color-orchid-hover: #b4739a;
  --color-orchid-selected: #7e516c;
  --color-tan: #bdab95;
  --color-tan-hover: #978977;
  --color-tan-selected: #6a6053;
  --color-sky: #b4e9f8;
  --color-sky-hover: #90bac6;
  --color-sky-selected: #65828b;
  --color-coffee: #ca9a8b;
  --color-coffee-hover: #a27b6f;
  --color-coffee-selected: #71564e;
  --color-royal: #5591ea;
  --color-royal-hover: #4474bb;
  --color-royal-selected: #305183;
  --color-teal: #457b82;
  --color-teal-hover: #376268;
  --color-teal-selected: #274549;
  --color-lavender: #cab9fa;
  --color-lavender-hover: #a294c8;
  --color-lavender-selected: #71688c;
  --color-steel: #bacbed;
  --color-steel-hover: #95a2be;
  --color-steel-selected: #687185;
  --color-lilac: #687185;
  --color-lilac-hover: #8e8a9f;
  --color-lilac-selected: #63616f;
  --color-pecan: #786565;
  --color-pecan-hover: #605151;
  --color-pecan-selected: #433939;
  --content-background-color: #30324e;
  /*

  LEGACY VALUES

  These values are not within Vibe's UI definitions and are on a deprecation path.
  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.

  */
  --color-success: #50fa7b;
  --color-error: #ff5555;
  --primary-on-secondary-color: #fe78c6;
  --primary-hover-on-secondary-color: #fe5ab9;
  --primary-selected-color-rgb: 159, 64, 119;
  --primary-selected-on-secondary-color: #9f4077;
  --primary-text-on-secondary-color: #d5d8df;
  --primary-background-color-rgb: 40, 42, 54;
  --primary-background-hover-on-secondary-color: #4b4e69;
  --secondary-background-color-rgb: 48, 50, 78;
  --secondary-text-on-secondary-color: #9699a6;
  --link-on-secondary-color: #bd93f9;
  --modal-background-color: #282a36;
  --dark-background-color: #303241;
  --dark-background-on-secondary-color: #595959;
  --dialog-background-color: #30324e;
  --label-background-color: #404b69;
  --label-background-on-secondary-color: #404b69;
  --icon-on-secondary-color: #c3c6d4;
  --placeholder-color-with-opacity: rgba(195, 198, 212, 0.1);
  --placeholder-on-secondary-color: #c3c6d4;
  --ui-border-on-secondary-color: #797e93;
  --layout-border-on-secondary-color: #414458;
  --disabled-background-on-secondary-color: #3a3a3a;
  --disabled-text-on-secondary-color: rgba(238, 238, 238, var(--disabled-component-opacity));
  --box-shadow-mediun: 0px 6px 20px rgba(0, 0, 0, 0.2);
}

/*# sourceMappingURL=index.css.map */