/* 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-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. */ --color-success: #50fa7b; --color-error: #ff5555; --primary-on-secondary-color: #fe78c6; --primary-hover-on-secondary-color: #fe5ab9; --surface-selected-rgb: 159, 64, 119; --primary-selected-on-secondary-color: #9f4077; --primary-text-on-secondary-color: #d5d8df; --surface-primary-rgb: 40, 42, 54; --primary-background-hover-on-secondary-color: #4b4e69; --surface-secondary-rgb: 48, 50, 78; --text-tertiary: #5c5c5c; --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(255, 255, 255, var(--disabled-component-opacity)); --box-shadow-mediun: 0px 6px 20px rgba(233, 233, 233, 0.2); } /*# sourceMappingURL=index.css.map */