@heliux-org/ui-style 1.0.22

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

@@ -0,0 +1,72 @@
+// DARK THEME KEYS
+
+// DARK THEME COLOR KEYS MAP: dark theme's keys color map.
+// - Map include semantic color keys scope tokens.
+// - Map is collected into the $theme-dark-settings map and is interpolated into custom properties.
+
+$theme-dark-keys: (
+  primary-color: $theme-dark-primary-color,
+  primary-on-secondary-color: $theme-dark-primary-on-secondary-color,
+  primary-hover-color: $theme-dark-primary-hover-color,
+  surface-selected: $theme-dark-surface-selected,
+  primary-selected-hover-color: $theme-dark-primary-selected-hover-color,
+  primary-highlighted-color: $theme-dark-primary-highlighted-color,
+  text-primary: $theme-dark-text-primary,
+  text-secondary: $theme-dark-text-secondary,
+  text-tertiary: $theme-dark-text-tertiary,
+  text-color-on-primary: $theme-dark-text-color-on-primary,
+  text-color-on-inverted: $theme-dark-text-color-on-inverted,
+  placeholder-color: $theme-dark-placeholder-color,
+  icon-primary: $theme-dark-icon-primary,
+  link-color: $theme-dark-link-color,
+  fixed-light-color: $theme-dark-fixed-light-color,
+  fixed-dark-color: $theme-dark-fixed-dark-color,
+  surface-primary: $theme-dark-surface-primary,
+  surface-primary-hover: $theme-dark-surface-primary-hover,
+  surface-secondary: $theme-dark-surface-secondary,
+  surface-tertiary: $theme-dark-surface-tertiary,
+  surface-quaternary: $theme-dark-surface-quaternary,
+  surface-inverse: $theme-dark-surface-inverse,
+  surface-success: $theme-dark-surface-success,
+  surface-alert: $theme-dark-surface-alert,
+  surface-warning: $theme-dark-surface-warning,
+  disabled-text-color: $theme-dark-disabled-text-color,
+  disabled-background-color: $theme-dark-disabled-background-color,
+  positive-color: $theme-dark-positive-color,
+  positive-color-hover: $theme-dark-positive-color-hover,
+  positive-color-selected: $theme-dark-positive-color-selected,
+  positive-color-selected-hover: $theme-dark-positive-color-selected-hover,
+  positive-color-background: $theme-dark-positive-color-background,
+  negative-color: $theme-dark-negative-color,
+  negative-color-hover: $theme-dark-negative-color-hover,
+  negative-color-selected: $theme-dark-negative-color-selected,
+  negative-color-selected-hover: $theme-dark-negative-color-selected-hover,
+  negative-color-background: $theme-dark-negative-color-background,
+  divider-primary: $theme-dark-divider-primary,
+  divider-secondary: $theme-dark-divider-secondary,
+  divider-overlay: $theme-dark-divider-overlay,
+  divider-halo: $theme-dark-divider-halo,
+  divider-selected: $theme-dark-divider-selected,
+  warning-color: $theme-dark-warning-color,
+  warning-color-hover: $theme-dark-warning-color-hover,
+  warning-color-selected: $theme-dark-warning-color-selected,
+  warning-color-selected-hover: $theme-dark-warning-color-selected-hover,
+  warning-color-background: $theme-dark-warning-color-background,
+  brand-color: $theme-dark-primary-color,
+  brand-hover-color: $theme-dark-primary-hover-color,
+  brand-selected-color: $theme-dark-surface-selected,
+  brand-selected-hover-color: $theme-dark-primary-selected-hover-color,
+  text-color-on-brand: $theme-dark-text-color-on-primary
+);
+
+// DARK THEME SHADOW MAP: dark theme's shadow color map.
+// - Map include shadow scope tokens.
+// - Map is collected into the $theme-dark-settings map and is interpolated into custom properties.
+
+$theme-dark-shadow-keys: (
+  box-shadow-xs: $theme-dark-box-shadow-xs,
+  box-shadow-small: $theme-dark-box-shadow-small,
+  box-shadow-medium: $theme-dark-box-shadow-medium,
+  box-shadow-large: $theme-dark-box-shadow-large,
+  shadow-color: $theme-dark-shadow-color
+);

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

@@ -0,0 +1,33 @@
+// DARK THEME LEGACY KEYS MAP: This partial defines the dark theme's legacy keys color map.
+// - Map include legacy keys scope tokens.
+// - Its main Purpose is to separate legacy tokens to registration tokens and key tokens.
+// - This map is for Key Tokens.
+//   - Legacy Key tokens are aliases of registration tokens or content color tokens with a semantic meaning.
+// - Map is collected into the $theme-dark-settings map and is interpolated into custom properties.
+
+$theme-dark-legacy-keys: (
+  primary-on-secondary-color: $theme-dark-primary-on-secondary-color,
+  primary-hover-on-secondary-color: $theme-dark-primary-hover-on-secondary-color,
+  surface-selected-rgb: $theme-dark-surface-selected-rgb,
+  primary-selected-on-secondary-color: $theme-dark-primary-selected-on-secondary-color,
+  primary-text-on-secondary-color: $theme-dark-primary-text-on-secondary-color,
+  surface-primary-rgb: $theme-dark-surface-primary-rgb,
+  primary-background-hover-on-secondary-color: $theme-dark-primary-background-hover-on-secondary-color,
+  surface-secondary-rgb: $theme-dark-surface-secondary-rgb,
+  text-tertiary: $theme-dark-text-tertiary,
+  link-on-secondary-color: $theme-dark-link-on-secondary-color,
+  modal-background-color: $theme-dark-modal-background-color,
+  dark-background-color: $theme-dark-dark-background-color,
+  dark-background-on-secondary-color: $theme-dark-dark-background-on-secondary-color,
+  dialog-background-color: $theme-dark-dialog-background-color,
+  label-background-color: $theme-dark-label-background-color,
+  label-background-on-secondary-color: $theme-dark-label-background-on-secondary-color,
+  icon-on-secondary-color: $theme-dark-icon-on-secondary-color,
+  placeholder-color-with-opacity: $theme-dark-placeholder-color-with-opacity,
+  placeholder-on-secondary-color: $theme-dark-placeholder-on-secondary-color,
+  ui-border-on-secondary-color: $theme-dark-ui-border-on-secondary-color,
+  layout-border-on-secondary-color: $theme-dark-layout-border-on-secondary-color,
+  disabled-background-on-secondary-color: $theme-dark-disabled-background-on-secondary-color,
+  disabled-text-on-secondary-color: $theme-dark-disabled-text-on-secondary-color,
+  box-shadow-mediun: $box-shadow-mediun
+);

package/src/config/maps/themes/hacker/keys/_hacker-theme-keys.scss

@@ -0,0 +1,69 @@
+// HACKER THEME KEYS
+
+// HACKER THEME COLOR KEYS MAP: hacker theme's keys color map.
+// - Map include semantic color keys scope tokens.
+// - Map is collected into the $theme-hacker-settings map and is interpolated into custom properties.
+
+$theme-hacker-keys: (
+  primary-color: $theme-hacker-primary-color,
+  primary-hover-color: $theme-hacker-primary-hover-color,
+  surface-selected: $theme-hacker-surface-selected,
+  primary-selected-hover-color: $theme-hacker-primary-selected-hover-color,
+  primary-highlighted-color: $theme-hacker-primary-highlighted-color,
+  text-primary: $theme-hacker-text-primary,
+  text-secondary: $theme-hacker-text-secondary,
+  text-tertiary: $theme-hacker-text-tertiary,
+  text-color-on-inverted: $theme-hacker-text-color-on-inverted,
+  placeholder-color: $theme-hacker-placeholder-color,
+  icon-primary: $theme-hacker-icon-primary,
+  link-color: $theme-hacker-link-color,
+  fixed-light-color: $theme-hacker-fixed-light-color,
+  fixed-dark-color: $theme-hacker-fixed-dark-color,
+  surface-primary: $theme-hacker-surface-primary,
+  surface-primary-hover: $theme-hacker-surface-primary-hover,
+  surface-secondary: $theme-hacker-surface-secondary,
+  surface-tertiary: $theme-hacker-surface-tertiary,
+  surface-quaternary: $theme-hacker-surface-quaternary,
+  surface-inverse: $theme-hacker-surface-inverse,
+  surface-success: $theme-hacker-surface-success,
+  surface-alert: $theme-hacker-surface-alert,
+  surface-warning: $theme-hacker-surface-warning,
+  disabled-text-color: $theme-hacker-disabled-text-color,
+  disabled-background-color: $theme-hacker-disabled-background-color,
+  positive-color: $theme-hacker-positive-color,
+  positive-color-hover: $theme-hacker-positive-color-hover,
+  positive-color-selected: $theme-hacker-positive-color-selected,
+  positive-color-selected-hover: $theme-hacker-positive-color-selected-hover,
+  positive-color-background: $theme-hacker-positive-color-background,
+  negative-color: $theme-hacker-negative-color,
+  negative-color-hover: $theme-hacker-negative-color-hover,
+  negative-color-selected: $theme-hacker-negative-color-selected,
+  negative-color-selected-hover: $theme-hacker-negative-color-selected-hover,
+  negative-color-background: $theme-hacker-negative-color-background,
+  divider-primary: $theme-hacker-divider-primary,
+  divider-secondary: $theme-hacker-divider-secondary,
+  divider-overlay: $theme-hacker-divider-overlay,
+  divider-halo: $theme-hacker-divider-halo,
+  divider-selected: $theme-hacker-divider-selected,
+  warning-color: $theme-hacker-warning-color,
+  warning-color-hover: $theme-hacker-warning-color-hover,
+  warning-color-selected: $theme-hacker-warning-color-selected,
+  warning-color-selected-hover: $theme-hacker-warning-color-selected-hover,
+  warning-color-background: $theme-hacker-warning-color-background,
+  brand-color: $theme-hacker-primary-color,
+  brand-hover-color: $theme-hacker-primary-hover-color,
+  brand-selected-color: $theme-hacker-surface-selected,
+  brand-selected-hover-color: $theme-hacker-primary-selected-hover-color
+);
+
+// DARK THEME SHADOW MAP: dark theme's shadow color map.
+// - Map include shadow scope tokens.
+// - Map is collected into the $theme-hacker-settings map and is interpolated into custom properties.
+
+$theme-hacker-shadow-keys: (
+  box-shadow-xs: $theme-hacker-box-shadow-xs,
+  box-shadow-small: $theme-hacker-box-shadow-small,
+  box-shadow-medium: $theme-hacker-box-shadow-medium,
+  box-shadow-large: $theme-hacker-box-shadow-large,
+  shadow-color: $theme-hacker-shadow-color
+);

package/src/config/maps/themes/hacker/keys/legacy/_hacker-theme-legacy-keys.scss

@@ -0,0 +1,33 @@
+// HACKER THEME LEGACY KEYS MAP: This partial defines the hacker theme's legacy keys color map.
+// - Map include legacy keys scope tokens.
+// - Its main Purpose is to separate legacy tokens to registration tokens and key tokens.
+// - This map is for Key Tokens.
+//   - Legacy Key tokens are aliases of registration tokens or content color tokens with a semantic meaning.
+// - Map is collected into the $theme-dark-settings map and is interpolated into custom properties.
+
+$theme-hacker-legacy-keys: (
+  primary-on-secondary-color: $theme-hacker-primary-on-secondary-color,
+  primary-hover-on-secondary-color: $theme-hacker-primary-hover-on-secondary-color,
+  surface-selected-rgb: $theme-hacker-surface-selected-rgb,
+  primary-selected-on-secondary-color: $theme-hacker-primary-selected-on-secondary-color,
+  primary-text-on-secondary-color: $theme-hacker-primary-text-on-secondary-color,
+  surface-primary-rgb: $theme-hacker-surface-primary-rgb,
+  primary-background-hover-on-secondary-color: $theme-hacker-primary-background-hover-on-secondary-color,
+  surface-secondary-rgb: $theme-hacker-surface-secondary-rgb,
+  text-tertiary: $theme-hacker-text-tertiary,
+  link-on-secondary-color: $theme-hacker-link-on-secondary-color,
+  modal-background-color: $theme-hacker-modal-background-color,
+  dark-background-color: $theme-hacker-dark-background-color,
+  dark-background-on-secondary-color: $theme-hacker-dark-background-on-secondary-color,
+  dialog-background-color: $theme-hacker-dialog-background-color,
+  label-background-color: $theme-hacker-label-background-color,
+  label-background-on-secondary-color: $theme-hacker-label-background-on-secondary-color,
+  icon-on-secondary-color: $theme-hacker-icon-on-secondary-color,
+  placeholder-color-with-opacity: $theme-hacker-placeholder-color-with-opacity,
+  placeholder-on-secondary-color: $theme-hacker-placeholder-on-secondary-color,
+  ui-border-on-secondary-color: $theme-hacker-ui-border-on-secondary-color,
+  layout-border-on-secondary-color: $theme-hacker-layout-border-on-secondary-color,
+  disabled-background-on-secondary-color: $theme-hacker-disabled-background-on-secondary-color,
+  disabled-text-on-secondary-color: $theme-hacker-disabled-text-on-secondary-color,
+  box-shadow-mediun: $box-shadow-mediun
+);

package/src/config/maps/themes/hacker/palette/legacy/_hacker-theme-legacy-palette.scss

@@ -0,0 +1,7 @@
+// BASIC THEME LEGACY COLOR MAP: This partial defines the basic theme's legacy color map.
+// - Map include legacy color scope tokens.
+
+$theme-hacker-legacy-palette: (
+  color-success: $theme-hacker-success,
+  color-error: $theme-hacker-error
+);

package/src/config/tokens/_config-basic-theme-tokens.scss

@@ -0,0 +1,7 @@
+// CONFIG: BASIC THEME TOKENS
+// This partial loads basic theme's config tokens
+
+@import "themes/basic/palette/palette";
+@import "themes/basic/palette/legacy/legacy-pallete";
+@import "themes/basic/keys/keys";
+@import "themes/basic/keys/legacy/legacy-keys";

package/src/config/tokens/_config-black-theme-tokens.scss

@@ -0,0 +1,6 @@
+// CONFIG: BLACK THEME TOKENS
+// This partial loads black theme's config tokens
+
+@import "themes/black/palette/black-theme-palette";
+@import "themes/black/keys/black-theme-keys";
+@import "themes/black/keys/legacy/black-theme-legacy-keys";

package/src/config/tokens/_config-core-tokens.scss

@@ -0,0 +1,16 @@
+// CONFIG: CORE TOKENS
+// This partial loads Core config tokens
+// - loading order is important
+// -- please verify token dependency when adding.
+// -- we put tokens without dependencies first.
+
+@import "core/core-motion";
+@import "core/core-border";
+@import "core/core-opacity";
+@import "core/core-spacing";
+@import "core/core-radius";
+@import "core/core-shadows";
+@import "core/core-common";
+@import "core/core-typography";
+@import "core/core-fonts-deprecated";
+@import "core/core-typography-deprecated";

package/src/config/tokens/_config-dark-theme-tokens.scss

@@ -0,0 +1,6 @@
+// CONFIG: DARK THEME TOKENS
+// This partial loads dark theme's config tokens
+
+@import "themes/dark/palette/dark-theme-palette";
+@import "themes/dark/keys/dark-theme-keys";
+@import "themes/dark/keys/legacy/dark-theme-legacy-keys";

package/src/config/tokens/_config-hacker-theme-tokens.scss

@@ -0,0 +1,7 @@
+// CONFIG: HACKER THEME TOKENS
+// This partial loads hacker theme's config tokens
+
+@import "themes/hacker/palette/hacker-theme-palette";
+@import "themes/hacker/palette/legacy/hacker-theme-legacy-palette";
+@import "themes/hacker/keys/hacker-theme-keys";
+@import "themes/hacker/keys/legacy/hacker-theme-legacy-keys";

package/src/config/tokens/core/_core-border.scss

@@ -0,0 +1,5 @@
+// CORE TOKENS: BORDER
+// This partial Defines Global border tokens
+
+$border-width: 1px;
+$border-style: solid;

package/src/config/tokens/core/_core-common.scss

@@ -0,0 +1,7 @@
+// CORE TOKENS: COMMON
+// This partial defines Common global tokens
+// - common tokens defines misc global tokens
+
+// Common Opacity aliases
+$disabled-component-opacity: $opacity-38;
+$effect-divider-halo: 0 0 0 3px var(--divider-halo);

package/src/config/tokens/core/_core-fonts-deprecated.scss

@@ -0,0 +1,37 @@
+// CORE TOKENS: FONTS
+// This partial Defines Global fonts tokens
+
+// REGISTRATION TOKENS
+// - Font sizes (numeric units)
+$font-reg-size-14: 14px;
+$font-reg-size-16: 16px;
+$font-reg-size-18: 18px;
+$font-reg-size-24: 24px;
+$font-reg-size-30: 30px;
+
+// - Line heights (numeric units)
+$font-reg-line-height-18: 18px;
+$font-reg-line-height-24: 24px;
+$font-reg-line-height-32: 32px;
+$font-reg-line-height-42: 42px;
+
+// GLOBAL FONT TOKENS
+$font-size-base: $font-reg-size-16;
+
+// - Font weights
+$font-weight-very-light: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 600;
+
+// - Font family
+$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
+$font-smoothing-webkit: antialiased;
+$font-smoothing-moz: grayscale;
+
+// h1 letter spacing -0.1px
+// h2 letter spacing -0.2px

package/src/config/tokens/core/_core-motion.scss

@@ -0,0 +1,35 @@
+// # CORE TOKENS: MOTION
+// This partial defines global motion tokens
+
+// ## Registration: not exposed externally
+$motion-duration-70ms: 70ms;
+$motion-duration-100ms: 100ms;
+$motion-duration-150ms: 150ms;
+$motion-duration-250ms: 250ms;
+$motion-duration-400ms: 400ms;
+
+$motion-easing-in: cubic-bezier(0, 0, 0.35, 1);
+$motion-easing-out: cubic-bezier(0.4, 0, 1, 4);
+$motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+$motion-easing-in-elastic: cubic-bezier(0, 0, 0.2, 1.4);
+
+// ## BASE:  properties API tokens
+// - Productive: small UI, small affect transitions
+$motion-productive-short: $motion-duration-70ms;
+$motion-productive-medium: $motion-duration-250ms;
+$motion-productive-long: $motion-duration-400ms;
+
+// - Expressive, Layout UI, Larger affect, elements with content, feedback.
+// -- Duration
+$motion-expressive-short: $motion-duration-250ms;
+$motion-expressive-long: $motion-duration-400ms;
+
+// -- Timing
+$motion-timing-enter: $motion-easing-in;
+$motion-timing-exit: $motion-easing-out;
+$motion-timing-transition: $motion-easing-in-out;
+$motion-timing-emphasize: $motion-easing-in-elastic;
+
+// ###  Common, Global: Aliases for Base API, in more specific use casing.
+// - This is the layer we would like to emphasize although base layer can also be used when a case is not specified.
+$expand-animation-timing: var(--motion-timing-enter);

package/src/config/tokens/core/_core-opacity.scss

@@ -0,0 +1,14 @@
+// CORE TOKENS: OPACITY
+// This partial defines global opacity tokens
+// - Opacity tokens defines allowed values as part of our efforts to limit hard coded values.
+//   - Currently they are derived from existing values.
+
+$opacity-0: 0;
+$opacity-10: 0.1;
+$opacity-20: 0.2;
+$opacity-30: 0.3;
+$opacity-38: 0.38;
+$opacity-40: 0.4;
+$opacity-50: 0.5;
+$opacity-60: 0.6;
+$opacity-100: 1;

package/src/config/tokens/core/_core-radius.scss

@@ -0,0 +1,6 @@
+// CORE TOKENS: BORDER RADIUS
+// This partial defines global border radius tokens
+
+$border-radius-small: 2px;
+$border-radius-medium: 6px;
+$border-radius-big: 16px;

package/src/config/tokens/core/_core-shadows.scss

@@ -0,0 +1,7 @@
+// CORE TOKENS: SHADOWS
+// This partial defines global shadow related tokens
+
+$shadow-size-xs: 0px 4px 6px -4px;
+$shadow-size-small: 0px 4px 8px;
+$shadow-size-medium: 0px 6px 20px;
+$shadow-size-large: 0px 15px 50px;

package/src/config/tokens/core/_core-spacing.scss

@@ -0,0 +1,10 @@
+// CORE TOKENS: SPACING
+// This partial defines global spacing Tokens
+
+$spacing-xs: 4px;
+$spacing-small: 8px;
+$spacing-medium: 16px;
+$spacing-large: 24px;
+$spacing-xl: 32px;
+$spacing-xxl: 48px;
+$spacing-xxxl: 64px;

package/src/config/tokens/core/_core-typography-deprecated.scss

@@ -0,0 +1,55 @@
+// CORE TOKENS: TYPOGRAPHY
+// This partial Defines Global Typography tokens
+
+// FONTS SCALES
+// - Font Size scale
+$font-size-10: $font-reg-size-14;
+$font-size-20: $font-reg-size-14;
+$font-size-30: $font-size-base;
+$font-size-40: $font-reg-size-18;
+$font-size-50: $font-reg-size-24;
+$font-size-60: $font-reg-size-30;
+
+// - LINE HEIGHT SCALE
+$font-line-height-10: $font-reg-line-height-18;
+$font-line-height-20: $font-reg-line-height-24;
+$font-line-height-30: $font-reg-line-height-24;
+$font-line-height-40: $font-reg-line-height-24;
+$font-line-height-50: $font-reg-line-height-32;
+$font-line-height-60: $font-reg-line-height-42;
+
+// TYPOGRAPHY TOKENS
+// - Font sizes (meaningful units)
+$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);
+
+// - Line heights (meaningful units)
+$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 definition shorthands per semantics atom definitions
+$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);

package/src/config/tokens/core/_core-typography.scss

@@ -0,0 +1,55 @@
+// CORE TOKENS: TYPOGRAPHY
+// This partial Defines Global Typography tokens
+
+// Font family
+$font-family-english-heading: "Inter";
+$font-family-english-text: "Inter";
+$font-family-other-languages: "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", sans-serif;
+$text-font-family: $font-family-english-text, $font-family-other-languages;
+$title-font-family: $font-family-english-heading, $font-family-other-languages;
+
+// Font definition shorthands per semantics atom definitions
+$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 definition per semantics atom definitions
+$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;

package/src/config/tokens/themes/basic/keys/_keys.scss

@@ -0,0 +1,87 @@
+//  BASIC THEME  TOKENS: SEMANTIC KEYS COLORS
+// - This partial defines Basic Theme's Semantic Keys color tokens
+// FIGMA REFERENCE: COLOR KEYS
+
+// - 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 replaced them with nearest registration or key colors.
+// - When several key has the same value and have a connection
+// - We either use $token or var(--token) depending on connection logic and value type.
+
+// SHADOWS
+$shadow-color:  $colors-gray-200;
+
+$shadow-xs-opacity: $opacity-10;
+$shadow-small-opacity: $opacity-20;
+$shadow-medium-opacity: $shadow-small-opacity;
+$shadow-large-opacity: $opacity-30;
+
+$box-shadow-xs: $shadow-size-xs rgba($shadow-color, $shadow-xs-opacity);
+$box-shadow-small: $shadow-size-small rgba($shadow-color, $shadow-small-opacity);
+$box-shadow-medium: $shadow-size-medium rgba($shadow-color, $shadow-medium-opacity);
+$box-shadow-large: $shadow-size-large rgba($shadow-color, $shadow-large-opacity);
+
+
+
+// Fixed colors - Mostly Monochrome Values
+$fixed-light-color: $color-white;
+$fixed-dark-color: $color-black;
+
+// SURFACES COLORS
+$surface-primary: $color-white;
+$surface-primary-hover: $colors-gray-100;
+$surface-secondary: $colors-gray-100;
+$surface-tertiary: $colors-gray-200;
+$surface-quaternary: $colors-gray-300;
+$surface-selected: $colors-steel-100;
+$surface-inverse: $color-black;
+$surface-success: $colors-green-100;
+$surface-alert: $colors-red-100;
+$surface-warning: $colors-yellow-100;
+
+
+// BRAND COLORS
+$primary-color: $colors-steel-500;
+$primary-hover-color: $colors-steel-800;
+$primary-selected-hover-color: $colors-steel-950;
+$primary-highlighted-color: $colors-steel-200;
+
+
+// TEXT COLORS
+$text-primary: $colors-gray-900;
+$text-secondary: $colors-gray-500;
+$text-tertiary: $colors-gray-300;
+$text-color-on-primary: $color-white;
+$text-color-on-inverted: $color-white;
+$placeholder-color: $colors-gray-500;
+$icon-primary: $colors-gray-900;
+$link-color: $colors-steel-500;
+
+
+// System Semantics (state, status)
+$disabled-text-color: rgba($text-primary, var(--disabled-component-opacity));
+$disabled-background-color: $color-ui_grey-muted;
+$positive-color: $colors-green-400;
+$positive-color-hover: $colors-green-600;
+$positive-color-selected: $colors-green-600;
+$positive-color-selected-hover: $colors-green-700;
+$positive-color-background: $colors-green-200;
+$negative-color: $colors-red-400;
+$negative-color-hover: $colors-red-600;
+$negative-color-selected: $colors-red-600;
+$negative-color-selected-hover: $colors-red-700;
+$negative-color-background: $colors-red-200;
+$warning-color: $colors-yellow-400;
+$warning-color-hover: $colors-yellow-600;
+$warning-color-selected: $colors-yellow-600;
+$warning-color-selected-hover: $colors-yellow-700;
+$warning-color-background: $colors-yellow-200;
+
+// DIVIDER COLORS
+$divider-primary: $colors-gray-200;
+$divider-secondary: $colors-gray-300; 
+$divider-overlay: rgba($shadow-color, $shadow-xs-opacity); 
+$divider-halo: $colors-steel-200; 
+$divider-selected: $colors-steel-500; 
+

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

@@ -0,0 +1,51 @@
+//  BASIC THEME TOKENS: LEGACY KEYS
+// - This partial defines Basic 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
+$primary-on-secondary-color: $color-basic_blue;
+$primary-hover-on-secondary-color: $color-dark_blue;
+$surface-selected-rgb: $color-highlight_blue-rgb;
+$primary-selected-on-secondary-color: $color-highlight_blue;
+$primary-text-on-secondary-color: $color-mud_black;
+$text-color-on-primary-with-opacity: $color-snow_white-with-opacity;
+
+$surface-primary-rgb: $color-snow_white-rgb;
+$primary-background-hover-on-secondary-color: $color-ui_grey;
+$surface-secondary-rgb: $color-snow_white-rgb;
+
+$link-on-secondary-color: $color-link_color;
+
+$modal-background-color: $color-snow_white;
+$dark-background-color: $color-teal-lightstone_gray;
+$dark-background-on-secondary-color: $color-teal-lightstone_gray;
+$dialog-background-color: $color-snow_white;
+
+$label-background-color: $color-highlight_blue;
+$label-background-on-secondary-color: $color-highlight_blue;
+
+$icon-on-secondary-color: $color-asphalt;
+$placeholder-color-with-opacity: $color-asphalt-with-opacity;
+$placeholder-on-secondary-color: $color-asphalt;
+
+// States
+$disabled-background-on-secondary-color: $disabled-background-color;
+$disabled-text-on-secondary-color: $disabled-text-color;
+
+// borders
+$ui-border-on-secondary-color: $color-wolf_gray;
+$layout-border-on-secondary-color: $divider-secondary;
+
+// legacy shadow
+$box-shadow-mediun: $box-shadow-medium;