heliux-ui-style/dist/index.css

Heliux UI CSS Foundations

/*  stylelint-disable scss/at-if-no-null */
/*  stylelint-enable scss/at-if-no-null */
:root {
  --motion-productive-short: 70ms;
  --motion-productive-medium: 250ms;
  --motion-productive-long: 400ms;
  --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, 4);
  --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: 2px;
  --border-radius-medium: 6px;
  --border-radius-big: 16px;
  --disabled-component-opacity: 0.38;
  --effect-divider-halo: 0 0 0 3px var(--divider-halo);
  --font-family: Inter, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;
  --title-font-family: Inter, Roboto, Noto Sans Hebrew, Noto Kufi Arabic, Noto Sans JP, sans-serif;
  --h1-font-family: var(--title-font-family);
  --font-smoothing-webkit: antialiased;
  --font-smoothing-moz: grayscale;
  --font-weight-very-light: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-bold: 600;
  --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-h6: 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-h6: 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-h6: var(--font-weight-bold) var(--font-size-h6)/var(--font-line-height-h6) 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);
  --font-h1-bold: 800 52px/60px var(--title-font-family);
  --font-h1-normal: 500 52px/60px var(--title-font-family);
  --font-h1-light: 300 52px/60px var(--title-font-family);
  --font-h2-bold: 800 44px/64px var(--title-font-family);
  --font-h2-normal: 500 44px/64px var(--title-font-family);
  --font-h2-light: 300 44px/64px var(--title-font-family);
  --font-h3-bold: 800 32px/44px var(--title-font-family);
  --font-h3-normal: 500 32px/44px var(--title-font-family);
  --font-h3-light: 300 32px/44px var(--title-font-family);
  --font-h4-bold: 800 22px/34px var(--title-font-family);
  --font-h4-normal: 500 22px/34px var(--title-font-family);
  --font-h4-light: 300 22px/34px var(--title-font-family);
  --font-h5-bold: 700 18px/24px var(--title-font-family);
  --font-h5-normal: 500 18px/24px var(--title-font-family);
  --font-h5-light: 300 18px/24px var(--title-font-family);
  --font-h6-bold: 700 14px/18px var(--title-font-family);
  --font-h6-normal: 500 14px/18px var(--title-font-family);
  --font-h6-light: 300 14px/18px var(--title-font-family);
  --font-text1-bold: 700 14px/24px var(--font-family);
  --font-text1-medium: 600 14px/24px var(--font-family);
  --font-text1-normal: 400 14px/24px var(--font-family);
  --font-text2-bold: 700 12px/18px var(--font-family);
  --font-text2-medium: 600 12px/18px var(--font-family);
  --font-text2-normal: 400 12px/18px var(--font-family);
  --letter-spacing-h1-bold: -0.5px;
  --letter-spacing-h1-normal: -0.5px;
  --letter-spacing-h1-light: -0.5px;
  --letter-spacing-h2-bold: -0.1px;
  --letter-spacing-h2-normal: -0.1px;
  --letter-spacing-h2-light: -0.1px;
  --letter-spacing-h3-bold: -0.1px;
  --letter-spacing-h3-normal: -0.1px;
  --letter-spacing-h3-light: -0.1px;
  --letter-spacing-h4-bold: -0.1px;
  --letter-spacing-h4-normal: -0.1px;
  --letter-spacing-h4-light: -0.1px;
  --letter-spacing-h5-bold: -0.1px;
  --letter-spacing-h5-normal: -0.1px;
  --letter-spacing-h5-light: -0.1px;
  --letter-spacing-h6-bold: -0.1px;
  --letter-spacing-h6-normal: -0.1px;
  --letter-spacing-h6-light: -0.1px;
}

: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-teal-lightstone_gray: #f6f7fb;
  --color-ui_grey: #dcdfec;
  --color-wolf_gray: #c3c6d4;
  --color-asphalt: #676879;
  --color-mud_black: #323338;
  --color-success: #00854d;
  --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;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-sand-100: #F3F1E9;
  --color-sand-200: #E6E4D4;
  --color-sand-300: #D3D0B2;
  --color-sand-400: #BFBB8E;
  --color-sand-500: #9E9A61;
  --color-sand-600: #858251;
  --color-sand-700: #6C6A42;
  --color-sand-800: #525232;
  --color-sand-900: #393923;
  --color-sand-950: #1F2013;
  --color-obsidian-100: #EFEFF0;
  --color-obsidian-200: #DCDCE2;
  --color-obsidian-300: #C9C9D2;
  --color-obsidian-400: #A8A8B6;
  --color-obsidian-500: #9292A5;
  --color-obsidian-600: #7B7B8E;
  --color-obsidian-700: #686779;
  --color-obsidian-800: #494857;
  --color-obsidian-900: #2D2D3A;
  --color-obsidian-950: #19191E;
  --color-solar-flare-100: #ffdfe3;
  --color-solar-flare-200: #ffadb7;
  --color-solar-flare-300: #ff697b;
  --color-solar-flare-400: #ff3a52;
  --color-solar-flare-500: #ff0020;
  --color-solar-flare-600: #de001c;
  --color-solar-flare-700: #bb0018;
  --color-solar-flare-800: #8b0012;
  --color-solar-flare-900: #60000c;
  --color-solar-flare-950: #3c0008;
  --color-gray-100: #f8f8f8;
  --color-gray-200: #e9e9e9;
  --color-gray-300: #d1d1d1;
  --color-gray-400: #b5b5b5;
  --color-gray-500: #8e8e8e;
  --color-gray-600: #757575;
  --color-gray-700: #5c5c5c;
  --color-gray-800: #3a3a3a;
  --color-gray-900: #212121;
  --color-gray-950: #111111;
  --color-yellow-100: #fffbf2;
  --color-yellow-200: #ffedca;
  --color-yellow-300: #ffd993;
  --color-yellow-400: #ffc769;
  --color-yellow-500: #ffb444;
  --color-yellow-600: #cf9330;
  --color-yellow-700: #9e721f;
  --color-yellow-800: #6e5011;
  --color-yellow-900: #3d2d07;
  --color-yellow-950: #281d04;
  --color-orange-100: #FCF6F3;
  --color-orange-200: #FEDBC9;
  --color-orange-300: #F8B897;
  --color-orange-400: #F29261;
  --color-orange-500: #E17037;
  --color-orange-600: #C9571D;
  --color-orange-700: #A34110;
  --color-orange-800: #80320A;
  --color-orange-900: #572004;
  --color-orange-950: #351302;
  --color-lime-100: #f2fced;
  --color-lime-200: #cff1ba;
  --color-lime-300: #ace48a;
  --color-lime-400: #8ad35d;
  --color-lime-500: #68bf33;
  --color-lime-600: #54a324;
  --color-lime-700: #418518;
  --color-lime-800: #2f650e;
  --color-lime-900: #1d4207;
  --color-lime-950: #132e02;
  --color-green-100: #f0f7f5;
  --color-green-200: #b4d8cc;
  --color-green-300: #78b6a3;
  --color-green-400: #3e9178;
  --color-green-500: #076b4d;
  --color-green-600: #025b40;
  --color-green-700: #004932;
  --color-green-800: #003524;
  --color-green-900: #001f14;
  --color-green-950: #00170f;
  --color-teal-100: #eff8fb;
  --color-teal-200: #c2e5ed;
  --color-teal-300: #97cfdc;
  --color-teal-400: #6eb8c9;
  --color-teal-500: #48a0b4;
  --color-teal-600: #378799;
  --color-teal-700: #286c7c;
  --color-teal-800: #1b515d;
  --color-teal-900: #0f343d;
  --color-teal-950: #061f25;
  --color-steel-100: #f2f5f8;
  --color-steel-200: #c1cfdd;
  --color-steel-300: #91a9c0;
  --color-steel-400: #6383a1;
  --color-steel-500: #375d81;
  --color-steel-600: #2b4d6e;
  --color-steel-700: #1f3d59;
  --color-steel-800: #152d44;
  --color-steel-900: #0d1d2d;
  --color-steel-950: #07121e;
  --color-pink-100: #fbeefc;
  --color-pink-200: #efbff0;
  --color-pink-300: #e093e1;
  --color-pink-400: #ce69d0;
  --color-pink-500: #ba42bc;
  --color-pink-600: #9e31a0;
  --color-pink-700: #812382;
  --color-pink-800: #611762;
  --color-pink-900: #3f0d40;
  --color-pink-950: #250526;
  --color-red-100: #f9ebeb;
  --color-red-200: #e4b0b0;
  --color-red-300: #cc7775;
  --color-red-400: #b1423c;
  --color-red-500: #930f08;
  --color-red-600: #810701;
  --color-red-700: #6d0200;
  --color-red-800: #560000;
  --color-red-900: #3d0000;
  --color-red-950: #260000;
  --color-purple-100: #f3ebf9;
  --color-purple-200: #ab7cd0;
  --color-purple-300: #ab7cd0;
  --color-purple-400: #8749b8;
  --color-purple-500: #62199c;
  --color-purple-600: #531088;
  --color-purple-700: #41086e;
  --color-purple-800: #300353;
  --color-purple-900: #1e0037;
  --color-purple-950: #130023;
  --primary-color: #375d81;
  --primary-hover-color: #152d44;
  --surface-selected: #f2f5f8;
  --primary-selected-hover-color: #07121e;
  --primary-highlighted-color: #c1cfdd;
  --text-primary: #212121;
  --text-secondary: #8e8e8e;
  --text-tertiary: #d1d1d1;
  --text-color-on-primary: #FFFFFF;
  --text-color-on-inverted: #FFFFFF;
  --placeholder-color: #8e8e8e;
  --icon-primary: #212121;
  --link-color: #375d81;
  --fixed-light-color: #FFFFFF;
  --fixed-dark-color: #000000;
  --surface-primary: #FFFFFF;
  --surface-primary-hover: #f8f8f8;
  --surface-secondary: #f8f8f8;
  --surface-tertiary: #e9e9e9;
  --surface-quaternary: #d1d1d1;
  --surface-inverse: #000000;
  --surface-success: #f0f7f5;
  --surface-alert: #f9ebeb;
  --surface-warning: #fffbf2;
  --disabled-background-color: #ecedf5;
  --disabled-text-color: rgba(33, 33, 33, var(--disabled-component-opacity));
  --positive-color: #3e9178;
  --positive-color-hover: #025b40;
  --positive-color-selected: #025b40;
  --positive-color-selected-hover: #004932;
  --positive-color-background: #b4d8cc;
  --negative-color: #b1423c;
  --negative-color-hover: #810701;
  --negative-color-selected: #810701;
  --negative-color-selected-hover: #6d0200;
  --negative-color-background: #e4b0b0;
  --divider-primary: #e9e9e9;
  --divider-secondary: #d1d1d1;
  --divider-overlay: rgba(233, 233, 233, 0.1);
  --divider-halo: #c1cfdd;
  --divider-selected: #375d81;
  --warning-color: #ffc769;
  --warning-color-hover: #cf9330;
  --warning-color-selected: #cf9330;
  --warning-color-selected-hover: #9e721f;
  --warning-color-background: #ffedca;
  --brand-color: #375d81;
  --brand-hover-color: #152d44;
  --brand-selected-color: #f2f5f8;
  --brand-selected-hover-color: #07121e;
  --text-color-on-brand: #FFFFFF;
  --box-shadow-xs: 0px 4px 6px -4px rgba(233, 233, 233, 0.1);
  --box-shadow-small: 0px 4px 8px rgba(233, 233, 233, 0.2);
  --box-shadow-medium: 0px 6px 20px rgba(233, 233, 233, 0.2);
  --box-shadow-large: 0px 15px 50px rgba(233, 233, 233, 0.3);
  --shadow-color: #e9e9e9;
  --color-green-dark: var(--color-green-300);
  --color-green-dark-hover: var(--color-green-600);
  --color-green-dark-selected: var(--color-green-400);
  --color-green-med: var(--color-green-200);
  --color-green-med-hover: var(--color-green-300);
  --color-green-med-selected: var(--color-green-300);
  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-green-light: var(--color-green-100);
  --color-green-light-hover: var(--color-green-400);
  --color-green-light-selected: var(--color-green-200);
  --color-yellow-dark: var(--color-yellow-300);
  --color-yellow-dark-hover: var(--color-yellow-600);
  --color-yellow-dark-selected: var(--color-yellow-400);
  --color-yellow-dark-rgb: 255, 213, 51;
  --color-yellow-med: var(--color-yellow-200);
  --color-yellow-med-hover: var(--color-yellow-300);
  --color-yellow-med-selected: var(--color-yellow-300);
  --color-yellow-light: var(--color-yellow-100);
  --color-yellow-light-hover: var(--color-yellow-400);
  --color-yellow-light-selected: var(--color-yellow-200);
  --color-red-dark: var(--color-red-300);
  --color-red-dark-hover: var(--color-red-600);
  --color-red-dark-selected: var(--color-red-400);
  --color-red-med: var(--color-red-200);
  --color-red-med-hover: var(--color-red-300);
  --color-red-med-selected: var(--color-red-300);
  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-red-light: var(--color-red-100);
  --color-red-light-hover: var(--color-red-400);
  --color-red-light-selected: var(--color-red-200);
  --color-solar-flare-dark: var(--color-solar-flare-300);
  --color-solar-flare-dark-hover: var(--color-solar-flare-600);
  --color-solar-flare-dark-selected: var(--color-solar-flare-400);
  --color-solar-flare-med: var(--color-solar-flare-200);
  --color-solar-flare-med-hover: var(--color-solar-flare-300);
  --color-solar-flare-med-selected: var(--color-solar-flare-300);
  --color-solar-flare-light: var(--color-solar-flare-100);
  --color-solar-flare-light-hover: var(--color-solar-flare-400);
  --color-solar-flare-light-selected: var(--color-solar-flare-200);
  --color-purple-dark: var(--color-purple-300);
  --color-purple-dark-hover: var(--color-purple-600);
  --color-purple-dark-selected: var(--color-purple-400);
  --color-purple-med: var(--color-purple-200);
  --color-purple-med-hover: var(--color-purple-300);
  --color-purple-med-selected: var(--color-purple-300);
  --color-purple-light: var(--color-purple-100);
  --color-purple-light-hover: var(--color-purple-400);
  --color-purple-light-selected: var(--color-purple-200);
  --color-pink-dark: var(--color-pink-300);
  --color-pink-dark-hover: var(--color-pink-600);
  --color-pink-dark-selected: var(--color-pink-400);
  --color-pink-med: var(--color-pink-200);
  --color-pink-med-hover: var(--color-pink-300);
  --color-pink-med-selected: var(--color-pink-300);
  --color-pink-light: var(--color-pink-100);
  --color-pink-light-hover: var(--color-pink-400);
  --color-pink-light-selected: var(--color-pink-200);
  --color-steel-dark: var(--color-steel-300);
  --color-steel-dark-hover: var(--color-steel-600);
  --color-steel-dark-selected: var(--color-steel-400);
  --color-steel-med: var(--color-steel-200);
  --color-steel-med-hover: var(--color-steel-300);
  --color-steel-med-selected: var(--color-steel-300);
  --color-steel-light: var(--color-steel-100);
  --color-steel-light-hover: var(--color-steel-400);
  --color-steel-light-selected: var(--color-steel-200);
  --color-teal-dark: var(--color-teal-300);
  --color-teal-dark-hover: var(--color-teal-600);
  --color-teal-dark-selected: var(--color-teal-400);
  --color-teal-med: var(--color-teal-200);
  --color-teal-med-hover: var(--color-teal-300);
  --color-teal-med-selected: var(--color-teal-300);
  --color-teal-light: var(--color-teal-100);
  --color-teal-light-hover: var(--color-teal-400);
  --color-teal-light-selected: var(--color-teal-200);
  --color-lime-dark: var(--color-lime-300);
  --color-lime-dark-hover: var(--color-lime-600);
  --color-lime-dark-selected: var(--color-lime-400);
  --color-lime-med: var(--color-lime-200);
  --color-lime-med-hover: var(--color-lime-300);
  --color-lime-med-selected: var(--color-lime-300);
  --color-lime-light: var(--color-lime-100);
  --color-lime-light-hover: var(--color-lime-400);
  --color-lime-light-selected: var(--color-lime-200);
  --color-orange-dark: var(--color-orange-300);
  --color-orange-dark-hover: var(--color-orange-600);
  --color-orange-dark-selected: var(--color-orange-400);
  --color-orange-med: var(--color-orange-200);
  --color-orange-med-hover: var(--color-orange-300);
  --color-orange-med-selected: var(--color-orange-300);
  --color-orange-light: var(--color-orange-100);
  --color-orange-light-hover: var(--color-orange-400);
  --color-orange-light-selected: var(--color-orange-200);
  --color-gray-dark: var(--color-gray-300);
  --color-gray-dark-hover: var(--color-gray-600);
  --color-gray-dark-selected: var(--color-gray-400);
  --color-gray-med: var(--color-gray-200);
  --color-gray-med-hover: var(--color-gray-300);
  --color-gray-med-selected: var(--color-gray-300);
  --color-gray-light: var(--color-gray-100);
  --color-gray-light-hover: var(--color-gray-400);
  --color-gray-light-selected: var(--color-gray-200);
  --color-obsidian-dark: var(--color-obsidian-300);
  --color-obsidian-dark-hover: var(--color-obsidian-600);
  --color-obsidian-dark-selected: var(--color-obsidian-400);
  --color-obsidian-med: var(--color-obsidian-200);
  --color-obsidian-med-hover: var(--color-obsidian-300);
  --color-obsidian-med-selected: var(--color-obsidian-300);
  --color-obsidian-light: var(--color-obsidian-100);
  --color-obsidian-light-hover: var(--color-obsidian-400);
  --color-obsidian-light-selected: var(--color-obsidian-200);
  --color-sand-dark: var(--color-sand-300);
  --color-sand-dark-hover: var(--color-sand-600);
  --color-sand-dark-selected: var(--color-sand-400);
  --color-sand-med: var(--color-sand-200);
  --color-sand-med-hover: var(--color-sand-300);
  --color-sand-med-selected: var(--color-sand-300);
  --color-sand-light: var(--color-sand-100);
  --color-sand-light-hover: var(--color-sand-400);
  --color-sand-light-selected: var(--color-sand-200);
  --color-sky: var(--color-steel-700);
  --color-sky-hover: var(--color-red-900);
  --color-sky-selected: var(--color-red-600);
  --color-coffee: var(--color-red-700);
  --color-coffee-hover: var(--color-red-800);
  --color-coffee-selected: var(--color-red-600);
  --color-royal: var(--color-teal-600);
  --color-royal-hover: var(--color-red-800);
  --color-royal-selected: var(--color-red-600);
  --color-teal: var(--color-red-700);
  --color-teal-hover: var(--color-red-800);
  --color-teal-selected: var(--color-red-600);
  --color-lavender: var(--color-red-700);
  --color-lavender-hover: var(--color-red-800);
  --color-lavender-selected: var(--color-red-600);
  --color-steel: var(--color-red-600);
  --color-steel-hover: var(--color-red-800);
  --color-steel-selected: var(--color-red-600);
  --color-lilac: var(--color-red-700);
  --color-lilac-hover: var(--color-red-800);
  --color-lilac-selected: var(--color-red-600);
  --color-pecan: var(--color-red-700);
  --color-pecan-hover: var(--color-red-800);
  --color-pecan-selected: var(--color-red-600);
  /*

  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;
  --surface-selected-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);
  --text-tertiary: #d1d1d1;
  --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;
  --surface-primary-rgb: 255, 255, 255;
  --primary-background-hover-on-secondary-color: #dcdfec;
  --modal-background-color: #ffffff;
  --surface-secondary-rgb: 255, 255, 255;
  --disabled-background-on-secondary-color: #ecedf5;
  --disabled-text-on-secondary-color: rgba(33, 33, 33, var(--disabled-component-opacity));
  --ui-border-on-secondary-color: #c3c6d4;
  --layout-border-on-secondary-color: #d1d1d1;
  --dark-background-color: #f6f7fb;
  --dark-background-on-secondary-color: #f6f7fb;
  --dialog-background-color: #ffffff;
  --box-shadow-mediun: 0px 6px 20px rgba(233, 233, 233, 0.2);
}

.dark-app-theme {
  --primary-color: #375d81;
  --primary-on-secondary-color: #0073ea;
  --primary-hover-color: #152d44;
  --surface-selected: #0d1d2d;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0d2753;
  --text-primary: #FFFFFF;
  --text-secondary: #b5b5b5;
  --text-tertiary: #5c5c5c;
  --text-color-on-primary: #FFFFFF;
  --text-color-on-inverted: #323338;
  --placeholder-color: #c3c6d4;
  --icon-primary: #c3c6d4;
  --link-color: #91a9c0;
  --fixed-light-color: #FFFFFF;
  --fixed-dark-color: #000000;
  --surface-primary: #0d1d2d;
  --surface-primary-hover: rgba(13, 29, 45, 0.3);
  --surface-secondary: #152d44;
  --surface-tertiary: #1f3d59;
  --surface-quaternary: #2b4d6e;
  --surface-inverse: #f2f5f8;
  --surface-success: #003524;
  --surface-alert: #560000;
  --surface-warning: #6e5011;
  --disabled-text-color: rgba(255, 255, 255, var(--disabled-component-opacity));
  --disabled-background-color: #3c3f59;
  --positive-color: #004932;
  --positive-color-hover: #025b40;
  --positive-color-selected: #025b40;
  --positive-color-selected-hover: #076b4d;
  --positive-color-background: #004932;
  --negative-color: #6d0200;
  --negative-color-hover: #810701;
  --negative-color-selected: #810701;
  --negative-color-selected-hover: #930f08;
  --negative-color-background: #6d0200;
  --divider-primary: #1f3d59;
  --divider-secondary: #2b4d6e;
  --divider-overlay: rgba(7, 18, 30, 0.1);
  --divider-halo: #2b4d6e;
  --divider-selected: #91a9c0;
  --warning-color: #9e721f;
  --warning-color-hover: #cf9330;
  --warning-color-selected: #cf9330;
  --warning-color-selected-hover: #ffb444;
  --warning-color-background: #9e721f;
  --brand-color: #375d81;
  --brand-hover-color: #152d44;
  --brand-selected-color: #0d1d2d;
  --brand-selected-hover-color: #0d2e65;
  --text-color-on-brand: #FFFFFF;
  --box-shadow-xs: 0px 4px 6px -4px rgba(7, 18, 30, 0.5);
  --box-shadow-small: 0px 4px 8px rgba(7, 18, 30, 0.5);
  --box-shadow-medium: 0px 6px 20px rgba(7, 18, 30, 0.5);
  --box-shadow-large: 0px 15px 50px rgba(7, 18, 30, 0.5);
  --shadow-color: #07121e;
  --color-green-dark: var(--color-green-900);
  --color-green-dark-hover: var(--color-green-900);
  --color-green-dark-selected: var(--color-green-700);
  --color-green-med: var(--color-green-700);
  --color-green-med-hover: var(--color-green-800);
  --color-green-med-selected: var(--color-green-600);
  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-green-light: var(--color-green-600);
  --color-green-light-hover: var(--color-green-700);
  --color-green-light-selected: var(--color-green-600);
  --color-yellow-dark: var(--color-yellow-900);
  --color-yellow-dark-hover: var(--color-yellow-900);
  --color-yellow-dark-selected: var(--color-yellow-700);
  --color-yellow-dark-rgb: 255, 213, 51;
  --color-yellow-med: var(--color-yellow-700);
  --color-yellow-med-hover: var(--color-yellow-800);
  --color-yellow-med-selected: var(--color-yellow-600);
  --color-yellow-light: var(--color-yellow-600);
  --color-yellow-light-hover: var(--color-yellow-700);
  --color-yellow-light-selected: var(--color-yellow-600);
  --color-red-dark: var(--color-red-900);
  --color-red-dark-hover: var(--color-red-900);
  --color-red-dark-selected: var(--color-red-700);
  --color-red-med: var(--color-red-700);
  --color-red-med-hover: var(--color-red-800);
  --color-red-med-selected: var(--color-red-600);
  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-red-light: var(--color-red-600);
  --color-red-light-hover: var(--color-red-700);
  --color-red-light-selected: var(--color-red-600);
  --color-solar-flare-dark: var(--color-solar-flare-900);
  --color-solar-flare-dark-hover: var(--color-solar-flare-900);
  --color-solar-flare-dark-selected: var(--color-solar-flare-700);
  --color-solar-flare-med: var(--color-solar-flare-700);
  --color-solar-flare-med-hover: var(--color-solar-flare-800);
  --color-solar-flare-med-selected: var(--color-solar-flare-600);
  --color-solar-flare-light: var(--color-solar-flare-600);
  --color-solar-flare-light-hover: var(--color-solar-flare-700);
  --color-solar-flare-light-selected: var(--color-solar-flare-600);
  --color-purple-dark: var(--color-purple-900);
  --color-purple-dark-hover: var(--color-purple-900);
  --color-purple-dark-selected: var(--color-purple-700);
  --color-purple-med: var(--color-purple-700);
  --color-purple-med-hover: var(--color-purple-800);
  --color-purple-med-selected: var(--color-purple-600);
  --color-purple-light: var(--color-purple-600);
  --color-purple-light-hover: var(--color-purple-700);
  --color-purple-light-selected: var(--color-purple-600);
  --color-pink-dark: var(--color-pink-900);
  --color-pink-dark-hover: var(--color-pink-900);
  --color-pink-dark-selected: var(--color-pink-700);
  --color-pink-med: var(--color-pink-700);
  --color-pink-med-hover: var(--color-pink-800);
  --color-pink-med-selected: var(--color-pink-600);
  --color-pink-light: var(--color-pink-600);
  --color-pink-light-hover: var(--color-pink-700);
  --color-pink-light-selected: var(--color-pink-600);
  --color-steel-dark: var(--color-steel-900);
  --color-steel-dark-hover: var(--color-steel-900);
  --color-steel-dark-selected: var(--color-steel-700);
  --color-steel-med: var(--color-steel-700);
  --color-steel-med-hover: var(--color-steel-800);
  --color-steel-med-selected: var(--color-steel-600);
  --color-steel-light: var(--color-steel-600);
  --color-steel-light-hover: var(--color-steel-700);
  --color-steel-light-selected: var(--color-steel-600);
  --color-teal-dark: var(--color-teal-900);
  --color-teal-dark-hover: var(--color-teal-900);
  --color-teal-dark-selected: var(--color-teal-700);
  --color-teal-med: var(--color-teal-700);
  --color-teal-med-hover: var(--color-teal-800);
  --color-teal-med-selected: var(--color-teal-600);
  --color-teal-light: var(--color-teal-600);
  --color-teal-light-hover: var(--color-teal-700);
  --color-teal-light-selected: var(--color-teal-600);
  --color-lime-dark: var(--color-lime-900);
  --color-lime-dark-hover: var(--color-lime-900);
  --color-lime-dark-selected: var(--color-lime-700);
  --color-lime-med: var(--color-lime-700);
  --color-lime-med-hover: var(--color-lime-800);
  --color-lime-med-selected: var(--color-lime-600);
  --color-lime-light: var(--color-lime-600);
  --color-lime-light-hover: var(--color-lime-700);
  --color-lime-light-selected: var(--color-lime-600);
  --color-orange-dark: var(--color-orange-900);
  --color-orange-dark-hover: var(--color-orange-900);
  --color-orange-dark-selected: var(--color-orange-700);
  --color-orange-med: var(--color-orange-700);
  --color-orange-med-hover: var(--color-orange-800);
  --color-orange-med-selected: var(--color-orange-600);
  --color-orange-light: var(--color-orange-600);
  --color-orange-light-hover: var(--color-orange-700);
  --color-orange-light-selected: var(--color-orange-600);
  --color-gray-dark: var(--color-gray-900);
  --color-gray-dark-hover: var(--color-gray-900);
  --color-gray-dark-selected: var(--color-gray-700);
  --color-gray-med: var(--color-gray-700);
  --color-gray-med-hover: var(--color-gray-800);
  --color-gray-med-selected: var(--color-gray-600);
  --color-gray-light: var(--color-gray-600);
  --color-gray-light-hover: var(--color-gray-700);
  --color-gray-light-selected: var(--color-gray-600);
  --color-obsidian-dark: var(--color-obsidian-900);
  --color-obsidian-dark-hover: var(--color-obsidian-900);
  --color-obsidian-dark-selected: var(--color-obsidian-700);
  --color-obsidian-med: var(--color-obsidian-700);
  --color-obsidian-med-hover: var(--color-obsidian-800);
  --color-obsidian-med-selected: var(--color-obsidian-600);
  --color-obsidian-light: var(--color-obsidian-600);
  --color-obsidian-light-hover: var(--color-obsidian-700);
  --color-obsidian-light-selected: var(--color-obsidian-600);
  --color-sand-dark: var(--color-sand-900);
  --color-sand-dark-hover: var(--color-sand-900);
  --color-sand-dark-selected: var(--color-sand-700);
  --color-sand-med: var(--color-sand-700);
  --color-sand-med-hover: var(--color-sand-800);
  --color-sand-med-selected: var(--color-sand-600);
  --color-sand-light: var(--color-sand-600);
  --color-sand-light-hover: var(--color-sand-700);
  --color-sand-light-selected: var(--color-sand-600);
  --color-sky: var(--color-steel-700);
  --color-sky-hover: var(--color-red-900);
  --color-sky-selected: var(--color-red-600);
  --color-coffee: var(--color-red-700);
  --color-coffee-hover: var(--color-red-800);
  --color-coffee-selected: var(--color-red-600);
  --color-royal: var(--color-teal-600);
  --color-royal-hover: var(--color-red-800);
  --color-royal-selected: var(--color-red-600);
  --color-teal: var(--color-red-700);
  --color-teal-hover: var(--color-red-800);
  --color-teal-selected: var(--color-red-600);
  --color-lavender: var(--color-red-700);
  --color-lavender-hover: var(--color-red-800);
  --color-lavender-selected: var(--color-red-600);
  --color-steel: var(--color-red-600);
  --color-steel-hover: var(--color-red-800);
  --color-steel-selected: var(--color-red-600);
  --color-lilac: var(--color-red-700);
  --color-lilac-hover: var(--color-red-800);
  --color-lilac-selected: var(--color-red-600);
  --color-pecan: var(--color-red-700);
  --color-pecan-hover: var(--color-red-800);
  --color-pecan-selected: var(--color-red-600);
  /*

  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;
  --surface-selected-rgb: 19, 55, 116;
  --primary-selected-on-secondary-color: #133774;
  --primary-text-on-secondary-color: #d5d8df;
  --surface-primary-rgb: 24, 27, 52;
  --primary-background-hover-on-secondary-color: #4b4e69;
  --surface-secondary-rgb: 48, 50, 78;
  --text-tertiary: #5c5c5c;
  --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(255, 255, 255, var(--disabled-component-opacity));
  --box-shadow-mediun: 0px 6px 20px rgba(233, 233, 233, 0.2);
}

.black-app-theme {
  --primary-color: #375d81;
  --primary-on-secondary-color: #0073ea;
  --primary-hover-color: #152d44;
  --surface-selected: #0d1d2d;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0b2858;
  --text-primary: #FFFFFF;
  --text-secondary: #b5b5b5;
  --text-tertiary: #5c5c5c;
  --text-color-on-primary: #FFFFFF;
  --text-color-on-inverted: #111111;
  --placeholder-color: #aaaaaa;
  --icon-primary: #aaaaaa;
  --link-color: #91a9c0;
  --fixed-light-color: #FFFFFF;
  --fixed-dark-color: #000000;
  --surface-primary: #212121;
  --surface-primary-hover: rgba(33, 33, 33, 0.3);
  --surface-secondary: #3a3a3a;
  --surface-tertiary: #5c5c5c;
  --surface-quaternary: #757575;
  --surface-inverse: #FFFFFF;
  --surface-success: #003524;
  --surface-alert: #560000;
  --surface-warning: #6e5011;
  --disabled-text-color: rgba(255, 255, 255, var(--disabled-component-opacity));
  --disabled-background-color: #3a3a3a;
  --positive-color: #004932;
  --positive-color-hover: #025b40;
  --positive-color-selected: #025b40;
  --positive-color-selected-hover: #076b4d;
  --positive-color-background: #004932;
  --negative-color: #6d0200;
  --negative-color-hover: #810701;
  --negative-color-selected: #810701;
  --negative-color-selected-hover: #930f08;
  --negative-color-background: #6d0200;
  --divider-primary: #5c5c5c;
  --divider-secondary: #757575;
  --divider-overlay: rgba(0, 0, 0, 0.1);
  --divider-halo: #2b4d6e;
  --divider-selected: #91a9c0;
  --warning-color: #9e721f;
  --warning-color-hover: #cf9330;
  --warning-color-selected: #cf9330;
  --warning-color-selected-hover: #ffb444;
  --warning-color-background: #9e721f;
  --brand-color: #375d81;
  --brand-hover-color: #152d44;
  --brand-selected-color: #0d1d2d;
  --brand-selected-hover-color: #0d2e65;
  --text-color-on-brand: #FFFFFF;
  --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;
  --shadow-color: #000000;
  --color-green-dark: var(--color-green-900);
  --color-green-dark-hover: var(--color-green-900);
  --color-green-dark-selected: var(--color-green-700);
  --color-green-med: var(--color-green-700);
  --color-green-med-hover: var(--color-green-800);
  --color-green-med-selected: var(--color-green-600);
  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-green-light: var(--color-green-600);
  --color-green-light-hover: var(--color-green-700);
  --color-green-light-selected: var(--color-green-600);
  --color-yellow-dark: var(--color-yellow-900);
  --color-yellow-dark-hover: var(--color-yellow-900);
  --color-yellow-dark-selected: var(--color-yellow-700);
  --color-yellow-dark-rgb: 255, 213, 51;
  --color-yellow-med: var(--color-yellow-700);
  --color-yellow-med-hover: var(--color-yellow-800);
  --color-yellow-med-selected: var(--color-yellow-600);
  --color-yellow-light: var(--color-yellow-600);
  --color-yellow-light-hover: var(--color-yellow-700);
  --color-yellow-light-selected: var(--color-yellow-600);
  --color-red-dark: var(--color-red-900);
  --color-red-dark-hover: var(--color-red-900);
  --color-red-dark-selected: var(--color-red-700);
  --color-red-med: var(--color-red-700);
  --color-red-med-hover: var(--color-red-800);
  --color-red-med-selected: var(--color-red-600);
  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-red-light: var(--color-red-600);
  --color-red-light-hover: var(--color-red-700);
  --color-red-light-selected: var(--color-red-600);
  --color-solar-flare-dark: var(--color-solar-flare-900);
  --color-solar-flare-dark-hover: var(--color-solar-flare-900);
  --color-solar-flare-dark-selected: var(--color-solar-flare-700);
  --color-solar-flare-med: var(--color-solar-flare-700);
  --color-solar-flare-med-hover: var(--color-solar-flare-800);
  --color-solar-flare-med-selected: var(--color-solar-flare-600);
  --color-solar-flare-light: var(--color-solar-flare-600);
  --color-solar-flare-light-hover: var(--color-solar-flare-700);
  --color-solar-flare-light-selected: var(--color-solar-flare-600);
  --color-purple-dark: var(--color-purple-900);
  --color-purple-dark-hover: var(--color-purple-900);
  --color-purple-dark-selected: var(--color-purple-700);
  --color-purple-med: var(--color-purple-700);
  --color-purple-med-hover: var(--color-purple-800);
  --color-purple-med-selected: var(--color-purple-600);
  --color-purple-light: var(--color-purple-600);
  --color-purple-light-hover: var(--color-purple-700);
  --color-purple-light-selected: var(--color-purple-600);
  --color-pink-dark: var(--color-pink-900);
  --color-pink-dark-hover: var(--color-pink-900);
  --color-pink-dark-selected: var(--color-pink-700);
  --color-pink-med: var(--color-pink-700);
  --color-pink-med-hover: var(--color-pink-800);
  --color-pink-med-selected: var(--color-pink-600);
  --color-pink-light: var(--color-pink-600);
  --color-pink-light-hover: var(--color-pink-700);
  --color-pink-light-selected: var(--color-pink-600);
  --color-steel-dark: var(--color-steel-900);
  --color-steel-dark-hover: var(--color-steel-900);
  --color-steel-dark-selected: var(--color-steel-700);
  --color-steel-med: var(--color-steel-700);
  --color-steel-med-hover: var(--color-steel-800);
  --color-steel-med-selected: var(--color-steel-600);
  --color-steel-light: var(--color-steel-600);
  --color-steel-light-hover: var(--color-steel-700);
  --color-steel-light-selected: var(--color-steel-600);
  --color-teal-dark: var(--color-teal-900);
  --color-teal-dark-hover: var(--color-teal-900);
  --color-teal-dark-selected: var(--color-teal-700);
  --color-teal-med: var(--color-teal-700);
  --color-teal-med-hover: var(--color-teal-800);
  --color-teal-med-selected: var(--color-teal-600);
  --color-teal-light: var(--color-teal-600);
  --color-teal-light-hover: var(--color-teal-700);
  --color-teal-light-selected: var(--color-teal-600);
  --color-lime-dark: var(--color-lime-900);
  --color-lime-dark-hover: var(--color-lime-900);
  --color-lime-dark-selected: var(--color-lime-700);
  --color-lime-med: var(--color-lime-700);
  --color-lime-med-hover: var(--color-lime-800);
  --color-lime-med-selected: var(--color-lime-600);
  --color-lime-light: var(--color-lime-600);
  --color-lime-light-hover: var(--color-lime-700);
  --color-lime-light-selected: var(--color-lime-600);
  --color-orange-dark: var(--color-orange-900);
  --color-orange-dark-hover: var(--color-orange-900);
  --color-orange-dark-selected: var(--color-orange-700);
  --color-orange-med: var(--color-orange-700);
  --color-orange-med-hover: var(--color-orange-800);
  --color-orange-med-selected: var(--color-orange-600);
  --color-orange-light: var(--color-orange-600);
  --color-orange-light-hover: var(--color-orange-700);
  --color-orange-light-selected: var(--color-orange-600);
  --color-gray-dark: var(--color-gray-900);
  --color-gray-dark-hover: var(--color-gray-900);
  --color-gray-dark-selected: var(--color-gray-700);
  --color-gray-med: var(--color-gray-700);
  --color-gray-med-hover: var(--color-gray-800);
  --color-gray-med-selected: var(--color-gray-600);
  --color-gray-light: var(--color-gray-600);
  --color-gray-light-hover: var(--color-gray-700);
  --color-gray-light-selected: var(--color-gray-600);
  --color-obsidian-dark: var(--color-obsidian-900);
  --color-obsidian-dark-hover: var(--color-obsidian-900);
  --color-obsidian-dark-selected: var(--color-obsidian-700);
  --color-obsidian-med: var(--color-obsidian-700);
  --color-obsidian-med-hover: var(--color-obsidian-800);
  --color-obsidian-med-selected: var(--color-obsidian-600);
  --color-obsidian-light: var(--color-obsidian-600);
  --color-obsidian-light-hover: var(--color-obsidian-700);
  --color-obsidian-light-selected: var(--color-obsidian-600);
  --color-sand-dark: var(--color-sand-900);
  --color-sand-dark-hover: var(--color-sand-900);
  --color-sand-dark-selected: var(--color-sand-700);
  --color-sand-med: var(--color-sand-700);
  --color-sand-med-hover: var(--color-sand-800);
  --color-sand-med-selected: var(--color-sand-600);
  --color-sand-light: var(--color-sand-600);
  --color-sand-light-hover: var(--color-sand-700);
  --color-sand-light-selected: var(--color-sand-600);
  --color-sky: var(--color-steel-700);
  --color-sky-hover: var(--color-red-900);
  --color-sky-selected: var(--color-red-600);
  --color-coffee: var(--color-red-700);
  --color-coffee-hover: var(--color-red-800);
  --color-coffee-selected: var(--color-red-600);
  --color-royal: var(--color-teal-600);
  --color-royal-hover: var(--color-red-800);
  --color-royal-selected: var(--color-red-600);
  --color-teal: var(--color-red-700);
  --color-teal-hover: var(--color-red-800);
  --color-teal-selected: var(--color-red-600);
  --color-lavender: var(--color-red-700);
  --color-lavender-hover: var(--color-red-800);
  --color-lavender-selected: var(--color-red-600);
  --color-steel: var(--color-red-600);
  --color-steel-hover: var(--color-red-800);
  --color-steel-selected: var(--color-red-600);
  --color-lilac: var(--color-red-700);
  --color-lilac-hover: var(--color-red-800);
  --color-lilac-selected: var(--color-red-600);
  --color-pecan: var(--color-red-700);
  --color-pecan-hover: var(--color-red-800);
  --color-pecan-selected: var(--color-red-600);
  /*

  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;
  --surface-selected-rgb: 19, 55, 116;
  --primary-selected-on-secondary-color: #133774;
  --primary-text-on-secondary-color: #eeeeee;
  --surface-primary-rgb: 17, 17, 17;
  --primary-background-hover-on-secondary-color: #636363;
  --surface-secondary-rgb: 44, 44, 44;
  --text-tertiary: #5c5c5c;
  --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(255, 255, 255, var(--disabled-component-opacity));
  --box-shadow-mediun: 0px 6px 20px rgba(233, 233, 233, 0.2);
}

.hacker-app-theme {
  --primary-color: #54a324;
  --primary-hover-color: #fe5ab9;
  --surface-selected: #0d1d2d;
  --primary-selected-hover-color: #0d2e65;
  --primary-highlighted-color: #0b2858;
  --text-primary: #FFFFFF;
  --text-secondary: #b5b5b5;
  --text-tertiary: #5c5c5c;
  --text-color-on-inverted: #323338;
  --placeholder-color: #c3c6d4;
  --icon-primary: #c3c6d4;
  --link-color: #ace48a;
  --fixed-light-color: #FFFFFF;
  --fixed-dark-color: #000000;
  --surface-primary: #111111;
  --surface-primary-hover: rgba(17, 17, 17, 0.3);
  --surface-secondary: #000000;
  --surface-tertiary: #000000;
  --surface-quaternary: #000000;
  --surface-inverse: #FFFFFF;
  --surface-success: #003524;
  --surface-alert: #560000;
  --surface-warning: #6e5011;
  --disabled-text-color: rgba(255, 255, 255, var(--disabled-component-opacity));
  --disabled-background-color: #3a3a3a;
  --positive-color: #004932;
  --positive-color-hover: #025b40;
  --positive-color-selected: #025b40;
  --positive-color-selected-hover: #076b4d;
  --positive-color-background: #004932;
  --negative-color: #6d0200;
  --negative-color-hover: #810701;
  --negative-color-selected: #810701;
  --negative-color-selected-hover: #930f08;
  --negative-color-background: #6d0200;
  --divider-primary: #5c5c5c;
  --divider-secondary: #757575;
  --divider-overlay: rgba(0, 0, 0, 0.1);
  --divider-halo: #54a324;
  --divider-selected: #8ad35d;
  --warning-color: #9e721f;
  --warning-color-hover: #cf9330;
  --warning-color-selected: #cf9330;
  --warning-color-selected-hover: #ffb444;
  --warning-color-background: #9e721f;
  --brand-color: #54a324;
  --brand-hover-color: #fe5ab9;
  --brand-selected-color: #0d1d2d;
  --brand-selected-hover-color: #0d2e65;
  --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;
  --shadow-color: #000000;
  --color-green-dark: var(--color-green-900);
  --color-green-dark-hover: var(--color-green-900);
  --color-green-dark-selected: var(--color-green-700);
  --color-green-med: var(--color-green-700);
  --color-green-med-hover: var(--color-green-800);
  --color-green-med-selected: var(--color-green-600);
  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
  --color-green-light: var(--color-green-600);
  --color-green-light-hover: var(--color-green-700);
  --color-green-light-selected: var(--color-green-600);
  --color-yellow-dark: var(--color-yellow-900);
  --color-yellow-dark-hover: var(--color-yellow-900);
  --color-yellow-dark-selected: var(--color-yellow-700);
  --color-yellow-dark-rgb: 255, 213, 51;
  --color-yellow-med: var(--color-yellow-700);
  --color-yellow-med-hover: var(--color-yellow-800);
  --color-yellow-med-selected: var(--color-yellow-600);
  --color-yellow-light: var(--color-yellow-600);
  --color-yellow-light-hover: var(--color-yellow-700);
  --color-yellow-light-selected: var(--color-yellow-600);
  --color-red-dark: var(--color-red-900);
  --color-red-dark-hover: var(--color-red-900);
  --color-red-dark-selected: var(--color-red-700);
  --color-red-med: var(--color-red-700);
  --color-red-med-hover: var(--color-red-800);
  --color-red-med-selected: var(--color-red-600);
  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
  --color-red-light: var(--color-red-600);
  --color-red-light-hover: var(--color-red-700);
  --color-red-light-selected: var(--color-red-600);
  --color-solar-flare-dark: var(--color-solar-flare-900);
  --color-solar-flare-dark-hover: var(--color-solar-flare-900);
  --color-solar-flare-dark-selected: var(--color-solar-flare-700);
  --color-solar-flare-med: var(--color-solar-flare-700);
  --color-solar-flare-med-hover: var(--color-solar-flare-800);
  --color-solar-flare-med-selected: var(--color-solar-flare-600);
  --color-solar-flare-light: var(--color-solar-flare-600);
  --color-solar-flare-light-hover: var(--color-solar-flare-700);
  --color-solar-flare-light-selected: var(--color-solar-flare-600);
  --color-purple-dark: var(--color-purple-900);
  --color-purple-dark-hover: var(--color-purple-900);
  --color-purple-dark-selected: var(--color-purple-700);
  --color-purple-med: var(--color-purple-700);
  --color-purple-med-hover: var(--color-purple-800);
  --color-purple-med-selected: var(--color-purple-600);
  --color-purple-light: var(--color-purple-600);
  --color-purple-light-hover: var(--color-purple-700);
  --color-purple-light-selected: var(--color-purple-600);
  --color-pink-dark: var(--color-pink-900);
  --color-pink-dark-hover: var(--color-pink-900);
  --color-pink-dark-selected: var(--color-pink-700);
  --color-pink-med: var(--color-pink-700);
  --color-pink-med-hover: var(--color-pink-800);
  --color-pink-med-selected: var(--color-pink-600);
  --color-pink-light: var(--color-pink-600);
  --color-pink-light-hover: var(--color-pink-700);
  --color-pink-light-selected: var(--color-pink-600);
  --color-steel-dark: var(--color-steel-900);
  --color-steel-dark-hover: var(--color-steel-900);
  --color-steel-dark-selected: var(--color-steel-