@heliux-org/ui-style 1.0.22

package/src/config/tokens/themes/basic/palette/_palette.scss

@@ -0,0 +1,210 @@
+//  BASIC THEME TOKENS: BASE COLORS
+// - This partial defines Basic Theme's base color tokens
+// FIGMA REFERENCE: COLOR PRIMITIVES
+
+// Colors
+// - Brand
+$color-basic_blue: #0073ea;
+$color-dark_blue: #0060b9;
+$color-highlight_blue: #cce5ff;
+$color-sky_blue: #aed4fc;
+
+// - Semantics
+$color-basic_green: #00854d;
+$color-dark_green: #007038;
+$color-pastel_green: #bbdbc9;
+$color-olive_green: #b5cec0;
+
+$color-basic_red: #d83a52;
+$color-blood_red: #b63546;
+$color-pastel_red: #f4c3cb;
+$color-pinky_red: #ecb7bf;
+
+$color-purple-med: #a25ddc; // content color duplication
+$color-bazooka: #f65f7c;
+
+$color-yellow-dark: #ffcb00; // warning colors
+$color-desert: #eaaa15;
+$color-summer_sun: #fceba1;
+$color-yellow_sand: #f2d973;
+
+// Natural
+$color-snow_white: #ffffff;
+
+// Natural / Gray
+$color-ui_grey: #dcdfec;
+$color-wolf_gray: #c3c6d4;
+$color-mud_black: #323338;
+$color-teal-lightstone_gray: #f6f7fb;
+// - Muted
+$color-ui_grey-muted: #ecedf5;
+
+// Text
+$color-asphalt: #676879;
+$color-link_color: #1f76c2;
+
+// Surface
+$color-surface: #292f4c;
+
+// Semantics old aliases,
+// - Success, used as positive key alias
+$color-success: $color-basic_green;
+$color-success-hover: $color-dark_green;
+$color-success-highlight: $color-pastel_green;
+
+// - Error, used as negative key alias
+$color-error: $color-basic_red;
+$color-error-hover: $color-blood_red;
+$color-error-highlight: $color-pastel_red;
+
+$color-alice_blue: #f0f7ff;
+
+
+// MONOCHROME
+$color-white: #FFFFFF;
+$color-black: #000000;
+
+// PRIMARY COLORS
+$colors-sand-100: #F3F1E9;
+$colors-sand-200: #E6E4D4;
+$colors-sand-300: #D3D0B2;
+$colors-sand-400: #BFBB8E;
+$colors-sand-500: #9E9A61;
+$colors-sand-600: #858251;
+$colors-sand-700: #6C6A42;
+$colors-sand-800: #525232;
+$colors-sand-900: #393923;
+$colors-sand-950: #1F2013;
+
+$colors-obsidian-100: #EFEFF0;
+$colors-obsidian-200: #DCDCE2;
+$colors-obsidian-300: #C9C9D2;
+$colors-obsidian-400: #A8A8B6;
+$colors-obsidian-500: #9292A5;
+$colors-obsidian-600: #7B7B8E;
+$colors-obsidian-700: #686779;
+$colors-obsidian-800: #494857;
+$colors-obsidian-900: #2D2D3A;
+$colors-obsidian-950: #19191E;
+
+$colors-solar-flare-100: #ffdfe3;
+$colors-solar-flare-200: #ffadb7;
+$colors-solar-flare-300: #ff697b;
+$colors-solar-flare-400: #ff3a52;
+$colors-solar-flare-500: #ff0020;
+$colors-solar-flare-600: #de001c;
+$colors-solar-flare-700: #bb0018;
+$colors-solar-flare-800: #8b0012;
+$colors-solar-flare-900: #60000c;
+$colors-solar-flare-950: #3c0008;
+
+// SECONDARY COLORS
+$colors-gray-100: #f8f8f8;
+$colors-gray-200: #e9e9e9;
+$colors-gray-300: #d1d1d1;
+$colors-gray-400: #b5b5b5;
+$colors-gray-500: #8e8e8e;
+$colors-gray-600: #757575;
+$colors-gray-700: #5c5c5c;
+$colors-gray-800: #3a3a3a;
+$colors-gray-900: #212121;
+$colors-gray-950: #111111;
+
+$colors-yellow-100: #fffbf2;
+$colors-yellow-200: #ffedca;
+$colors-yellow-300: #ffd993;
+$colors-yellow-400: #ffc769;
+$colors-yellow-500: #ffb444;
+$colors-yellow-600: #cf9330;
+$colors-yellow-700: #9e721f;
+$colors-yellow-800: #6e5011;
+$colors-yellow-900: #3d2d07;
+$colors-yellow-950: #281d04;
+
+$colors-orange-100: #FCF6F3;
+$colors-orange-200: #FEDBC9;
+$colors-orange-300: #F8B897;
+$colors-orange-400: #F29261;
+$colors-orange-500: #E17037;
+$colors-orange-600: #C9571D;
+$colors-orange-700: #A34110;
+$colors-orange-800: #80320A;
+$colors-orange-900: #572004;
+$colors-orange-950: #351302;
+
+$colors-lime-100: #f2fced;
+$colors-lime-200: #cff1ba;
+$colors-lime-300: #ace48a;
+$colors-lime-400: #8ad35d;
+$colors-lime-500: #68bf33;
+$colors-lime-600: #54a324;
+$colors-lime-700: #418518;
+$colors-lime-800: #2f650e;
+$colors-lime-900: #1d4207;
+$colors-lime-950: #132e02;
+
+$colors-green-100: #f0f7f5;
+$colors-green-200: #b4d8cc;
+$colors-green-300: #78b6a3;
+$colors-green-400: #3e9178;
+$colors-green-500: #076b4d;
+$colors-green-600: #025b40;
+$colors-green-700: #004932;
+$colors-green-800: #003524;
+$colors-green-900: #001f14;
+$colors-green-950: #00170f;
+
+$colors-teal-100: #eff8fb;
+$colors-teal-200: #c2e5ed;
+$colors-teal-300: #97cfdc;
+$colors-teal-400: #6eb8c9;
+$colors-teal-500: #48a0b4;
+$colors-teal-600: #378799;
+$colors-teal-700: #286c7c;
+$colors-teal-800: #1b515d;
+$colors-teal-900: #0f343d;
+$colors-teal-950: #061f25;
+
+$colors-steel-100: #f2f5f8;
+$colors-steel-200: #c1cfdd;
+$colors-steel-300: #91a9c0;
+$colors-steel-400: #6383a1;
+$colors-steel-500: #375d81;
+$colors-steel-600: #2b4d6e;
+$colors-steel-700: #1f3d59;
+$colors-steel-800: #152d44;
+$colors-steel-900: #0d1d2d;
+$colors-steel-950: #07121e;
+
+$colors-pink-100: #fbeefc;
+$colors-pink-200: #efbff0;
+$colors-pink-300: #e093e1;
+$colors-pink-400: #ce69d0;
+$colors-pink-500: #ba42bc;
+$colors-pink-600: #9e31a0;
+$colors-pink-700: #812382;
+$colors-pink-800: #611762;
+$colors-pink-900: #3f0d40;
+$colors-pink-950: #250526;
+
+$colors-red-100: #f9ebeb;
+$colors-red-200: #e4b0b0;
+$colors-red-300: #cc7775;
+$colors-red-400: #b1423c;
+$colors-red-500: #930f08;
+$colors-red-600: #810701;
+$colors-red-700: #6d0200;
+$colors-red-800: #560000;
+$colors-red-900: #3d0000;
+$colors-red-950: #260000;
+
+$colors-purple-100: #f3ebf9;
+$colors-purple-200: #ab7cd0;
+$colors-purple-300: #ab7cd0;
+$colors-purple-400: #8749b8;
+$colors-purple-500: #62199c;
+$colors-purple-600: #531088;
+$colors-purple-700: #41086e;
+$colors-purple-800: #300353;
+$colors-purple-900: #1e0037;
+$colors-purple-950: #130023;

package/src/config/tokens/themes/basic/palette/legacy/_legacy-pallete.scss

@@ -0,0 +1,102 @@
+//  BASIC THEME TOKENS: LEGACY COLORS
+// - This partial defines Basic Theme's legacy color tokens
+// - Legacy colors are colors that are not part of the theme's keys
+// - Legacy colors are currently presented as custom properties
+// - Due to separation between Registration and Semantic candidates sort order between group is important
+//   - Some Semantic candidates are aliases or Registration colors (as it should be)
+// - We define a token as a registration key when it has an alias name that indicates a certain role.
+// - This way we eliminate duplication for hard coded value declaration.
+
+// Registrations
+// #1c1f3b is used twice without distinct connection or registration link
+// - by order: color-timeline_blue, $color-board_views_blue,
+// - currently we leave it hardcoded and do not link them to each other.
+
+// Registration Candidates
+// - Color based naming but without an alias assignment.
+// - Sort by color similarity
+$color-dark_marble: #f1f1f1;
+$color-marble: #f7f7f7;
+$color-gainsboro: #e1e1e1; // identical to $color-content-explosive-selected
+$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; // TODO:removed when content scope is merged. manual duplication of color-green-dark.
+$color-amethyst: $color-purple-med;
+$color-dark-purple: #784bd1;
+
+// Semantic candidates
+// - Role based naming convention but they are not aliases
+// - Sorted by name similarity and context, A-Z,
+// - when we have similar names such as $color-blue_links : $color-blue-link with the same value,
+//   we use the first one as an alias value and the other ones as aliases.
+//   -  We use custom properties as the values assignment.
+
+$color-blue_links: #0086c0;
+$color-blue-links-alias: $color-blue_links;
+$color-public: $color-live_blue;
+$color-private: $color-bazooka;
+$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-alias: $color-green_shadow;
+$color-red_shadow: #e2445c;
+$color-red-shadow-alias: $color-red_shadow;
+$color-like_red: #fb275d;
+$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-scrollbar_gray: #b2b2b2;
+$color-timeline_grid_blue: #454662;
+$color-timeline_blue: #1c1f3b;
+
+// Base Layer non UI Vibe values
+$color-snow_white-rgb: extract-rgb($color-snow_white);
+$color-snow_white-with-opacity: rgba($color-snow_white, 0.4);
+$color-wolf_gray-with-opacity: rgba($color-wolf_gray, 0.1);
+$color-asphalt-with-opacity: rgba($color-asphalt, 0.1);
+$color-highlight_blue-rgb: extract-rgb($color-highlight_blue);

package/src/config/tokens/themes/black/keys/_black-theme-keys.scss

@@ -0,0 +1,79 @@
+//  BLACK THEME  TOKENS: SEMANTIC KEYS COLORS
+// - This partial defines Black Theme's Semantic Keys color tokens
+
+// - Theme keys should hold registration values (colors, content colors, other keys)
+//   - In some case there are unique hex values assignments
+//   - They should be transformed into Registration colors.
+//     - We add some annotation to their scope when found.
+// - When several key has the same value and have a connection
+// - We either use $theme-dark token or var(--token) depending on connection logic and value type.
+
+// SHADOWS
+$theme-black-box-shadow-color: $color-black;
+
+$theme-black-box-shadow-xs: $shadow-size-xs $theme-black-box-shadow-color;
+$theme-black-box-shadow-small: $shadow-size-small $theme-black-box-shadow-color;
+$theme-black-box-shadow-medium: $shadow-size-medium $theme-black-box-shadow-color;
+$theme-black-box-shadow-large: $shadow-size-large $theme-black-box-shadow-color;
+
+
+// Fixed colors - Mostly Monochrome Values
+$theme-black-fixed-light-color: $color-white;
+$theme-black-fixed-dark-color: $color-black;
+
+// SURFACES COLORS
+$theme-black-surface-primary: $colors-gray-900;
+$theme-black-surface-primary-hover: rgba($colors-gray-900, 0.3);
+$theme-black-surface-secondary: $colors-gray-800;
+$theme-black-surface-tertiary: $colors-gray-700;
+$theme-black-surface-quaternary: $colors-gray-600;
+$theme-black-surface-selected: $colors-steel-900;
+$theme-black-surface-inverse: $color-white;
+$theme-black-surface-success: $colors-green-800;
+$theme-black-surface-alert: $colors-red-800;
+$theme-black-surface-warning: $colors-yellow-800;
+
+// BRAND
+$theme-black-primary-color: $primary-color;
+$theme-black-primary-hover-color: $primary-hover-color;
+$theme-black-primary-selected-hover-color: $color-deep_blue;
+$theme-black-primary-highlighted-color: $color-downriver;
+
+// TEXT COLORS
+$theme-black-text-primary: $color-white;
+$theme-black-text-secondary: $colors-gray-400;
+$theme-black-text-tertiary: $colors-gray-700;
+$theme-black-text-color-on-primary: $text-color-on-primary;
+$theme-black-text-color-on-inverted: $color-vanta;
+$theme-black-placeholder-color: $color-mouse;
+$theme-black-icon-primary: $color-mouse;
+$theme-black-link-color: $colors-steel-300;
+
+
+// System Semantics (state, status)
+$theme-black-disabled-text-color: rgba($theme-black-text-primary, var(--disabled-component-opacity));
+$theme-black-disabled-background-color: $color-dust-muted;
+
+$theme-black-positive-color: $colors-green-700;
+$theme-black-positive-color-hover: $colors-green-600;
+$theme-black-positive-color-selected: $colors-green-600;
+$theme-black-positive-color-selected-hover: $colors-green-500;
+$theme-black-positive-color-background: $colors-green-700;
+$theme-black-negative-color: $colors-red-700;
+$theme-black-negative-color-hover: $colors-red-600;
+$theme-black-negative-color-selected: $colors-red-600;
+$theme-black-negative-color-selected-hover: $colors-red-500;
+$theme-black-negative-color-background: $colors-red-700;
+$theme-black-warning-color: $colors-yellow-700;
+$theme-black-warning-color-hover: $colors-yellow-600;
+$theme-black-warning-color-selected: $colors-yellow-600;
+$theme-black-warning-color-selected-hover: $colors-yellow-500;
+$theme-black-warning-color-background: $colors-yellow-700;
+
+// DIVIDER COLORS
+$theme-black-divider-primary: $colors-gray-700;
+$theme-black-divider-secondary: $colors-gray-600;
+$theme-black-divider-overlay: rgba($colors-gray-200, $shadow-xs-opacity); 
+$theme-black-divider-halo: $colors-steel-600; 
+$theme-black-divider-selected: $colors-steel-300; 
+

package/src/config/tokens/themes/black/keys/legacy/_black-theme-legacy-keys.scss

@@ -0,0 +1,50 @@
+//  BLACK THEME TOKENS: LEGACY KEYS
+// - This partial defines Black Theme's legacy keys tokens
+// - Legacy keys are colors that are not part of the theme's keys
+// - Legacy keys are currently presented as custom properties
+// - Due to separation between Registration and Semantic candidates sort order between group is important
+//   - Some Semantic candidates are aliases or Registration colors (as it should be)
+// - Legacy keys might be in use within themes.
+// - Per now they cannot be deprecated.
+// - We define a token as a legacy key when:
+//   - It has a legacy registration color as value.(value duplication)
+//   - It has name that indicates a certain role
+//   - It is abstract and not tied to a specific use. (such as some legacy tokens)
+//   - Some other token is using them and it makes a sense (connection is clear)
+// - This way we eliminate duplication for hard coded value declaration.
+
+// # Not in Vibe UI definitions
+$theme-black-primary-on-secondary-color: $color-basic_blue;
+$theme-black-primary-hover-on-secondary-color: $color-dark_blue;
+$theme-black-surface-selected-rgb: extract-rgb($color-ocean_blue);
+$theme-black-primary-selected-on-secondary-color: $color-ocean_blue;
+$theme-black-primary-text-on-secondary-color: $color-smog;
+
+$theme-black-surface-primary-rgb: extract-rgb($color-vanta);
+$theme-black-primary-background-hover-on-secondary-color: $color-dust;
+$theme-black-surface-secondary-rgb: extract-rgb($color-night);
+
+$theme-black-link-on-secondary-color: $color-arctic_blue;
+
+$theme-black-modal-background-color: $color-midnight;
+$theme-black-dark-background-color: $color-night;
+$theme-black-dark-background-on-secondary-color: $color-silver;
+$theme-black-dialog-background-color: $color-night;
+
+$theme-black-label-background-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+$theme-black-label-background-on-secondary-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+
+$theme-black-icon-on-secondary-color: $color-mouse;
+$theme-black-placeholder-color-with-opacity: rgba($color-mouse, 0.1);
+$theme-black-placeholder-on-secondary-color: $color-mouse;
+
+// States
+$theme-black-disabled-text-on-secondary-color: $theme-black-disabled-text-color;
+$theme-black-disabled-background-on-secondary-color: $theme-black-disabled-background-color;
+
+// borders
+$theme-black-ui-border-on-secondary-color: $color-smoke;
+$theme-black-layout-border-on-secondary-color: $color-dust;
+
+// legacy shadow
+$theme-black-box-shadow-mediun: var(--box-shadow-medium);

package/src/config/tokens/themes/black/palette/_black-theme-palette.scss

@@ -0,0 +1,19 @@
+//  BLACK THEME TOKENS: BASE COLORS
+// - This partial defines Black Theme's base color tokens
+
+// Natural / Gray
+$color-smoke: #8d8d8d;
+$color-dust: #636363;
+$color-night: #2c2c2c;
+$color-vanta: #111111;
+// - Muted
+$color-dust-muted: #3a3a3a;
+
+// Text
+$color-smog: #eeeeee;
+$color-mouse: #aaaaaa;
+
+// Surface
+$color-charcoal: #212121;
+
+$color-downriver: #0b2858;

package/src/config/tokens/themes/dark/keys/_dark-theme-keys.scss

@@ -0,0 +1,82 @@
+//  DARK THEME  TOKENS: SEMANTIC KEYS COLORS
+// - This partial defines Basic Theme's Semantic Keys color tokens
+
+// - Theme keys should hold registration values (colors, content colors, other keys)
+//   - In some case there are unique hex values assignments
+//   - They should be transformed into Registration colors.
+//     - We add some annotation to their scope when found.
+// - When several key has the same value and have a connection
+// - We either use $theme-dark token or var(--token) depending on connection logic and value type.
+
+// SHADOWS
+$theme-dark-shadow-color: $colors-steel-950; // todo: fix, not part of Vibe colors
+$theme-dark-shadow-opacity: 0.5;
+
+$theme-dark-box-shadow-xs: $shadow-size-xs rgba($theme-dark-shadow-color, $theme-dark-shadow-opacity);
+$theme-dark-box-shadow-small: $shadow-size-small rgba($theme-dark-shadow-color, $theme-dark-shadow-opacity);
+$theme-dark-box-shadow-medium: $shadow-size-medium rgba($theme-dark-shadow-color, $theme-dark-shadow-opacity);
+$theme-dark-box-shadow-large: $shadow-size-large rgba($theme-dark-shadow-color, $theme-dark-shadow-opacity);
+
+
+
+// Fixed colors - Mostly Monochrome Values
+$theme-dark-fixed-light-color: $color-white;
+$theme-dark-fixed-dark-color: $color-black;
+
+// SURFACES COLORS
+$theme-dark-surface-primary: $colors-steel-900;
+$theme-dark-surface-primary-hover: rgba($colors-steel-900, 0.3);
+$theme-dark-surface-secondary: $colors-steel-800;
+$theme-dark-surface-tertiary: $colors-steel-700;
+$theme-dark-surface-quaternary: $colors-steel-600;
+$theme-dark-surface-selected: $colors-steel-900;
+$theme-dark-surface-inverse: $colors-steel-100; // todo: fix, value from basic theme
+$theme-dark-surface-success: $colors-green-800;
+$theme-dark-surface-alert: $colors-red-800;
+$theme-dark-surface-warning: $colors-yellow-800;
+
+// BRAND COLORS
+$theme-dark-primary-color: $primary-color;
+$theme-dark-primary-hover-color: $primary-hover-color;
+$theme-dark-primary-selected-hover-color: $color-deep_blue;
+$theme-dark-primary-highlighted-color: $color-tyrian_blue;
+
+// TEXT COLORS
+$theme-dark-text-primary: $color-white;
+$theme-dark-text-secondary: $colors-gray-400; // todo: fix, value from basic legacy palette
+$theme-dark-text-tertiary: $colors-gray-700; // todo: fix, value from basic legacy palette
+$theme-dark-text-color-on-primary: $text-color-on-primary; // todo: fix, value from basic theme
+$theme-dark-text-color-on-inverted: $color-mud_black; // todo: fix, value from basic theme
+$theme-dark-placeholder-color: $color-wolf_gray; // todo: fix, value from basic theme
+$theme-dark-icon-primary: $color-wolf_gray; // todo: fix, value from basic theme
+$theme-dark-link-color: $colors-steel-300;
+
+
+// System Semantics (state, status)
+$theme-dark-disabled-text-color: rgba($theme-dark-text-primary, var(--disabled-component-opacity));
+$theme-dark-disabled-background-color: $color-silver_muted;
+
+$theme-dark-positive-color: $colors-green-700;
+$theme-dark-positive-color-hover: $colors-green-600;
+$theme-dark-positive-color-selected: $colors-green-600;
+$theme-dark-positive-color-selected-hover: $colors-green-500;
+$theme-dark-positive-color-background: $colors-green-700;
+$theme-dark-negative-color: $colors-red-700;
+$theme-dark-negative-color-hover: $colors-red-600;
+$theme-dark-negative-color-selected: $colors-red-600;
+$theme-dark-negative-color-selected-hover: $colors-red-500;
+$theme-dark-negative-color-background: $colors-red-700;
+$theme-dark-warning-color: $colors-yellow-700;
+$theme-dark-warning-color-hover: $colors-yellow-600;
+$theme-dark-warning-color-selected: $colors-yellow-600;
+$theme-dark-warning-color-selected-hover: $colors-yellow-500;
+$theme-dark-warning-color-background: $colors-yellow-700;
+
+// DIVIDER COLORS
+$theme-dark-divider-primary: $colors-steel-700;
+$theme-dark-divider-secondary: $colors-steel-600;
+$theme-dark-divider-overlay: rgba($colors-steel-200, $shadow-xs-opacity); 
+$theme-dark-divider-halo: $colors-steel-600; 
+$theme-dark-divider-selected: $colors-steel-300; 
+
+

package/src/config/tokens/themes/dark/keys/legacy/_dark-theme-legacy-keys.scss

@@ -0,0 +1,49 @@
+//  DARK THEME TOKENS: LEGACY KEYS
+// - This partial defines Dark Theme's legacy keys tokens
+// - Legacy keys are colors that are not part of the theme's keys
+// - Legacy keys are currently presented as custom properties
+// - Due to separation between Registration and Semantic candidates sort order between group is important
+//   - Some Semantic candidates are aliases or Registration colors (as it should be)
+// - Legacy keys might be in use within themes.
+// - Per now they cannot be deprecated.
+// - We define a token as a legacy key when:
+//   - It has a legacy registration color as value.(value duplication)
+//   - It has name that indicates a certain role
+//   - It is abstract and not tied to a specific use. (such as some legacy tokens)
+//   - Some other token is using them and it makes a sense (connection is clear)
+// - This way we eliminate duplication for hard coded value declaration.
+
+// # Not in Vibe UI definitions
+$theme-dark-primary-on-secondary-color: $color-basic_blue;
+$theme-dark-primary-hover-on-secondary-color: $color-dark_blue;
+$theme-dark-surface-selected-rgb: extract-rgb($color-ocean_blue);
+$theme-dark-primary-selected-on-secondary-color: $color-ocean_blue;
+$theme-dark-primary-text-on-secondary-color: $color-snow;
+
+$theme-dark-surface-primary-rgb: extract-rgb($color-midnight);
+$theme-dark-primary-background-hover-on-secondary-color: $color-silver;
+$theme-dark-surface-secondary-rgb: extract-rgb($color-graphite);
+
+$theme-dark-link-on-secondary-color: $color-arctic_blue;
+
+$theme-dark-modal-background-color: $color-midnight;
+$theme-dark-dark-background-color: $color-carbon_blue; // todo: fix, not part of Vibe colors
+$theme-dark-dark-background-on-secondary-color: $color-silver;
+$theme-dark-dialog-background-color: $color-graphite;
+
+$theme-dark-label-background-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+$theme-dark-label-background-on-secondary-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+
+$theme-dark-icon-on-secondary-color: $color-wolf_gray; // todo: fix, theme basic natural color
+$theme-dark-placeholder-color-with-opacity: $color-wolf_gray-with-opacity; // todo: fix, theme basic natural color
+$theme-dark-placeholder-on-secondary-color: $color-wolf_gray; // todo: fix, theme basic natural color
+
+// States
+$theme-dark-ui-border-on-secondary-color: $color-fog;
+$theme-dark-layout-border-on-secondary-color: $color-silver;
+
+$theme-dark-disabled-text-on-secondary-color: $theme-dark-disabled-text-color;
+$theme-dark-disabled-background-on-secondary-color: $theme-dark-disabled-background-color;
+
+// legacy shadow
+$theme-dark-box-shadow-mediun: var(--box-shadow-medium);

package/src/config/tokens/themes/dark/palette/_dark-theme-palette.scss

@@ -0,0 +1,47 @@
+//  DARK THEME TOKENS: BASE COLORS
+// - This partial defines Dark Theme's base color tokens
+// -- Please notice Dark theme is also using basic theme colors as dependency.
+// --- Only New theme related colors are defined here.
+
+// Colors
+// - Brand
+$color-ocean_blue: #133774;
+$color-deep_blue: #0d2e65;
+
+// - Semantics
+$color-forest_green: #025231;
+$color-darker_green: #194733;
+
+$color-maroon_red: #642830;
+$color-amber_red: #5a2027;
+
+$color-brass: #503e02; // Warning colors
+$color-aztec_gold: #402f00;
+
+// Natural / Gray
+$color-midnight: #181b34;
+$color-graphite: #30324e;
+$color-silver: #4b4e69;
+$color-fog: #797e93;
+$color-snow: #d5d8df;
+// - Muted
+$color-silver_muted: #3c3f59;
+$color-wolf_gray-muted: rgba($color-wolf_gray, 0.75);
+
+// Text
+$color-spacegrey: #9699a5;
+$color-arctic_blue: #69a7ef;
+
+// Shadow
+$color-rift: #090b19;
+
+// temp alias
+// - todo: fix, not part of Vibe colors, used for:
+// -- var(--label-background-color)
+// -- var(--label-background-on-secondary-color)
+$color-buster_blue: #404b69;
+// - todo: fix, not part of Vibe colors, used for:
+// -- var(--dark-background-color)
+$color-carbon_blue: #393b53;
+
+$color-tyrian_blue: #0d2753;