@heliux-org/ui-style 1.0.98 → 1.0.99

package/src/_themes.scss

@@ -3,3 +3,4 @@
 @import "Themes/dark-theme";
 @import "Themes/black-theme";
 @import "Themes/hacker-theme";
+@import "Themes/flare-theme";

package/src/config/maps/_config-flare-theme-maps.scss

@@ -0,0 +1,5 @@
+// CONFIG: HACKER THEME Maps
+// This partial loads Theme Flare's config maps
+@import "themes/flare/palette/legacy/flare-theme-legacy-palette";
+@import "themes/flare/keys/flare-theme-keys";
+@import "themes/flare/keys/legacy/flare-theme-legacy-keys";

package/src/config/maps/themes/flare/keys/_flare-theme-keys.scss

@@ -0,0 +1,118 @@
+// flare THEME KEYS
+
+// flare THEME COLOR KEYS MAP: flare theme's keys color map.
+// - Map include semantic color keys scope tokens.
+// - Map is collected into the $theme-flare-settings map and is interpolated into custom properties.
+
+$theme-flare-keys: (
+  primary-color: $theme-flare-primary-color,
+  primary-hover-color: $theme-flare-primary-hover-color,
+  surface-selected: $theme-flare-surface-selected,
+  primary-selected-hover-color: $theme-flare-primary-selected-hover-color,
+  primary-highlighted-color: $theme-flare-primary-highlighted-color,
+  text-primary: $theme-flare-text-primary,
+  text-secondary: $theme-flare-text-secondary,
+  text-tertiary: $theme-flare-text-tertiary,
+  text-warning: $theme-flare-text-warning,
+  text-alert: $theme-flare-text-alert,
+  text-success: $theme-flare-text-success,
+  text-color-on-inverted: $theme-flare-text-color-on-inverted,
+  placeholder-color: $theme-flare-placeholder-color,
+  icon-primary: $theme-flare-icon-primary,
+  text-link: $theme-flare-text-link,
+  fixed-light-color: $theme-flare-fixed-light-color,
+  fixed-dark-color: $theme-flare-fixed-dark-color,
+  surface-level-050: $theme-flare-surface-level-050,
+  surface-level-100: $theme-flare-surface-level-100,
+  surface-level-100-hover: $theme-flare-surface-level-100-hover,
+  surface-level-200: $theme-flare-surface-level-200,
+  surface-level-300: $theme-flare-surface-level-300,
+  surface-level-400: $theme-flare-surface-level-400,
+  surface-gradient-bg: $theme-flare-surface-gradient-bg,
+  surface-inverse: $theme-flare-surface-inverse,
+  surface-success: $theme-flare-surface-success,
+  surface-alert: $theme-flare-surface-alert,
+  surface-warning: $theme-flare-surface-warning,
+  surface-overlay: $theme-flare-surface-overlay,
+  disabled-text-color: $theme-flare-disabled-text-color,
+  disabled-background-color: $theme-flare-disabled-background-color,
+  positive-color: $theme-flare-positive-color,
+  positive-color-hover: $theme-flare-positive-color-hover,
+  positive-color-selected: $theme-flare-positive-color-selected,
+  positive-color-selected-hover: $theme-flare-positive-color-selected-hover,
+  positive-color-background: $theme-flare-positive-color-background,
+  negative-color: $theme-flare-negative-color,
+  negative-color-hover: $theme-flare-negative-color-hover,
+  negative-color-selected: $theme-flare-negative-color-selected,
+  negative-color-selected-hover: $theme-flare-negative-color-selected-hover,
+  negative-color-background: $theme-flare-negative-color-background,
+  divider-primary: $theme-flare-divider-primary,
+  divider-secondary: $theme-flare-divider-secondary,
+  divider-tertiary: $theme-flare-divider-tertiary,
+  divider-overlay: $theme-flare-divider-overlay,
+  divider-halo: $theme-flare-divider-halo,
+  divider-selected: $theme-flare-divider-selected,
+  warning-color: $theme-flare-warning-color,
+  warning-color-hover: $theme-flare-warning-color-hover,
+  warning-color-selected: $theme-flare-warning-color-selected,
+  warning-color-selected-hover: $theme-flare-warning-color-selected-hover,
+  warning-color-background: $theme-flare-warning-color-background,
+  brand-color: $theme-flare-primary-color,
+  brand-hover-color: $theme-flare-primary-hover-color,
+  brand-selected-color: $theme-flare-surface-selected,
+  brand-selected-hover-color: $theme-flare-primary-selected-hover-color,
+
+  text-content-default: $theme-flare-text-content-default,
+  text-green-dark: $theme-flare-text-green-dark,
+  text-green-med: $theme-flare-text-green-med,
+  text-green-light: $theme-flare-text-green-light,
+  text-yellow-dark: $theme-flare-text-yellow-dark,
+  text-yellow-med: $theme-flare-text-yellow-med,
+  text-yellow-light: $theme-flare-text-yellow-light,
+  text-red-dark: $theme-flare-text-red-dark,
+  text-red-med: $theme-flare-text-red-med,
+  text-red-light: $theme-flare-text-red-light,
+  text-solar-flare-dark: $theme-flare-text-solar-flare-dark,
+  text-solar-flare-med: $theme-flare-text-solar-flare-med,
+  text-solar-flare-light: $theme-flare-text-solar-flare-light,
+  text-purple-dark: $theme-flare-text-purple-dark,
+  text-purple-med: $theme-flare-text-purple-med,
+  text-purple-light: $theme-flare-text-purple-light,
+  text-pink-dark: $theme-flare-text-pink-dark,
+  text-pink-med: $theme-flare-text-pink-med,
+  text-pink-light: $theme-flare-text-pink-light,
+  text-steel-dark: $theme-flare-text-steel-dark,
+  text-steel-med: $theme-flare-text-steel-med,
+  text-steel-light: $theme-flare-text-steel-light,
+  text-teal-dark: $theme-flare-text-teal-dark,
+  text-teal-med: $theme-flare-text-teal-med,
+  text-teal-light: $theme-flare-text-teal-light,
+  text-lime-dark: $theme-flare-text-lime-dark,
+  text-lime-med: $theme-flare-text-lime-med,
+  text-lime-light: $theme-flare-text-lime-light,
+  text-orange-dark: $theme-flare-text-orange-dark,
+  text-orange-med: $theme-flare-text-orange-med,
+  text-orange-light: $theme-flare-text-orange-light,
+  text-gray-dark: $theme-flare-text-gray-dark,
+  text-gray-med: $theme-flare-text-gray-med,
+  text-gray-light: $theme-flare-text-gray-light,
+  text-obsidian-dark: $theme-flare-text-obsidian-dark,
+  text-obsidian-med: $theme-flare-text-obsidian-med,
+  text-obsidian-light: $theme-flare-text-obsidian-light,
+  text-sand-dark: $theme-flare-text-sand-dark,
+  text-sand-med: $theme-flare-text-sand-med,
+  text-sand-light: $theme-flare-text-sand-light,
+
+);
+
+// DARK THEME SHADOW MAP: dark theme's shadow color map.
+// - Map include shadow scope tokens.
+// - Map is collected into the $theme-flare-settings map and is interpolated into custom properties.
+
+$theme-flare-shadow-keys: (
+  box-shadow-xs: $theme-flare-box-shadow-xs,
+  box-shadow-small: $theme-flare-box-shadow-small,
+  box-shadow-medium: $theme-flare-box-shadow-medium,
+  box-shadow-large: $theme-flare-box-shadow-large,
+  shadow-color: $theme-flare-shadow-color
+);

package/src/config/maps/themes/flare/keys/legacy/_flare-theme-legacy-keys.scss

@@ -0,0 +1,33 @@
+// flare THEME LEGACY KEYS MAP: This partial defines the flare 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-flare-legacy-keys: (
+  primary-on-secondary-color: $theme-flare-primary-on-secondary-color,
+  primary-hover-on-secondary-color: $theme-flare-primary-hover-on-secondary-color,
+  surface-selected-rgb: $theme-flare-surface-selected-rgb,
+  primary-selected-on-secondary-color: $theme-flare-primary-selected-on-secondary-color,
+  primary-text-on-secondary-color: $theme-flare-primary-text-on-secondary-color,
+  surface-level-100-rgb: $theme-flare-surface-level-100-rgb,
+  primary-background-hover-on-secondary-color: $theme-flare-primary-background-hover-on-secondary-color,
+  surface-level-200-rgb: $theme-flare-surface-level-200-rgb,
+  text-tertiary: $theme-flare-text-tertiary,
+  link-on-secondary-color: $theme-flare-link-on-secondary-color,
+  modal-background-color: $theme-flare-modal-background-color,
+  dark-background-color: $theme-flare-dark-background-color,
+  dark-background-on-secondary-color: $theme-flare-dark-background-on-secondary-color,
+  dialog-background-color: $theme-flare-dialog-background-color,
+  label-background-color: $theme-flare-label-background-color,
+  label-background-on-secondary-color: $theme-flare-label-background-on-secondary-color,
+  icon-on-secondary-color: $theme-flare-icon-on-secondary-color,
+  placeholder-color-with-opacity: $theme-flare-placeholder-color-with-opacity,
+  placeholder-on-secondary-color: $theme-flare-placeholder-on-secondary-color,
+  ui-border-on-secondary-color: $theme-flare-ui-border-on-secondary-color,
+  layout-border-on-secondary-color: $theme-flare-layout-border-on-secondary-color,
+  disabled-background-on-secondary-color: $theme-flare-disabled-background-on-secondary-color,
+  disabled-text-on-secondary-color: $theme-flare-disabled-text-on-secondary-color,
+  box-shadow-mediun: $box-shadow-mediun
+);

package/src/config/maps/themes/flare/palette/legacy/_flare-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-flare-legacy-palette: (
+  color-success: $theme-flare-success,
+  color-error: $theme-flare-error
+);

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

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

package/src/config/tokens/themes/flare/keys/_flare-theme-keys.scss

@@ -0,0 +1,128 @@
+//  flare 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-flare token or var(--token) depending on connection logic and value type.
+@use "sass:color";
+
+// SHADOWS
+$theme-flare-shadow-color: $color-black;
+
+$theme-flare-box-shadow-xs: $shadow-size-xs $theme-flare-shadow-color;
+$theme-flare-box-shadow-small: $shadow-size-small $theme-flare-shadow-color;
+$theme-flare-box-shadow-medium: $shadow-size-medium $theme-flare-shadow-color;
+$theme-flare-box-shadow-large: $shadow-size-large $theme-flare-shadow-color;
+
+
+
+// Fixed colors - Mostly Monochrome Values
+$theme-flare-fixed-light-color: $color-white;
+$theme-flare-fixed-dark-color: $color-black;
+
+// SURFACES COLORS
+$theme-flare-surface-level-050: $colors-gray-900;
+$theme-flare-surface-level-100: $colors-red-950;
+$theme-flare-surface-level-100-hover: rgba($colors-gray-950, 0.3);
+$theme-flare-surface-level-200: $color-black;
+$theme-flare-surface-level-300: $color-black;
+$theme-flare-surface-level-400: $color-black; //todo: fix, grey and allgrey should not be the same
+$theme-flare-surface-gradient-bg: $colors-gradient-solar;
+$theme-flare-surface-selected: $colors-steel-800;
+$theme-flare-surface-inverse: $color-white; // todo: fix, value from basic theme
+$theme-flare-surface-success: $colors-green-700;
+$theme-flare-surface-alert: $colors-red-700;
+$theme-flare-surface-warning: $colors-yellow-700;
+$theme-flare-surface-overlay: rgba($colors-gray-950, $opacity-30);
+
+// BRAND COLORS
+$theme-flare-primary-color: $colors-lime-600;
+$theme-flare-primary-hover-color: #{color.adjust($color-pink-plastic, $lightness: -6%)};
+$theme-flare-primary-selected-hover-color: $color-deep_blue;
+$theme-flare-primary-highlighted-color: $color-downriver;
+
+// TEXT COLORS
+$theme-flare-text-primary: $color-white;
+$theme-flare-text-secondary: $colors-gray-400; // todo: fix, value from basic legacy palette
+$theme-flare-text-tertiary: $colors-gray-700; // todo: fix, value from basic legacy palette
+$theme-flare-text-warning: $colors-yellow-400;
+$theme-flare-text-alert: $colors-red-200;
+$theme-flare-text-success: $colors-green-200;
+$theme-flare-text-color-on-inverted: $color-mud_black; // todo: fix, value from basic theme
+$theme-flare-placeholder-color: $color-wolf_gray; // todo: fix, value from basic theme
+$theme-flare-icon-primary: $color-wolf_gray; // todo: fix, value from basic theme
+$theme-flare-text-link: $colors-lime-300;
+
+
+// TEXT CONTENT COLORS
+$theme-flare-text-content-default: $colors-steel-100;
+$theme-flare-text-green-dark: $colors-green-600;
+$theme-flare-text-green-med: $colors-green-100;
+$theme-flare-text-green-light: $colors-green-100;
+$theme-flare-text-yellow-dark: $colors-yellow-600;
+$theme-flare-text-yellow-med: $colors-yellow-100;
+$theme-flare-text-yellow-light: $colors-yellow-100;
+$theme-flare-text-red-dark: $colors-red-600;
+$theme-flare-text-red-med: $colors-red-100;
+$theme-flare-text-red-light: $colors-red-100;
+$theme-flare-text-solar-flare-dark: $colors-solar-flare-600;
+$theme-flare-text-solar-flare-med: $colors-solar-flare-100;
+$theme-flare-text-solar-flare-light: $colors-solar-flare-100;
+$theme-flare-text-purple-dark: $colors-purple-600;
+$theme-flare-text-purple-med: $colors-purple-100;
+$theme-flare-text-purple-light: $colors-purple-100;
+$theme-flare-text-pink-dark: $colors-pink-600;
+$theme-flare-text-pink-med: $colors-pink-100;
+$theme-flare-text-pink-light: $colors-pink-100;
+$theme-flare-text-steel-dark: $colors-steel-600;
+$theme-flare-text-steel-med: $colors-steel-100;
+$theme-flare-text-steel-light: $colors-steel-100;
+$theme-flare-text-teal-dark: $colors-teal-600;
+$theme-flare-text-teal-med: $colors-teal-100;
+$theme-flare-text-teal-light: $colors-teal-100;
+$theme-flare-text-lime-dark: $colors-lime-600;
+$theme-flare-text-lime-med: $colors-lime-100;
+$theme-flare-text-lime-light: $colors-lime-100;
+$theme-flare-text-orange-dark: $colors-orange-600;
+$theme-flare-text-orange-med: $colors-orange-100;
+$theme-flare-text-orange-light: $colors-orange-100;
+$theme-flare-text-gray-dark: $colors-gray-600;
+$theme-flare-text-gray-med: $colors-gray-100;
+$theme-flare-text-gray-light: $colors-gray-100;
+$theme-flare-text-obsidian-dark: $colors-obsidian-600;
+$theme-flare-text-obsidian-med: $colors-obsidian-100;
+$theme-flare-text-obsidian-light: $colors-obsidian-100;
+$theme-flare-text-sand-dark: $colors-sand-600;
+$theme-flare-text-sand-med: $colors-sand-100;
+$theme-flare-text-sand-light: $colors-sand-100;
+
+
+// System Semantics (state, status)
+$theme-flare-disabled-text-color: $theme-black-disabled-text-color;
+$theme-flare-disabled-background-color: $color-dust-muted;
+$theme-flare-positive-color: $colors-green-700;
+$theme-flare-positive-color-hover: $colors-green-600;
+$theme-flare-positive-color-selected: $colors-green-600;
+$theme-flare-positive-color-selected-hover: $colors-green-500;
+$theme-flare-positive-color-background: $colors-green-700;
+$theme-flare-negative-color: $colors-red-700;
+$theme-flare-negative-color-hover: $colors-red-600;
+$theme-flare-negative-color-selected: $colors-red-600;
+$theme-flare-negative-color-selected-hover: $colors-red-500;
+$theme-flare-negative-color-background: $colors-red-700;
+$theme-flare-warning-color: $colors-yellow-700;
+$theme-flare-warning-color-hover: $colors-yellow-600;
+$theme-flare-warning-color-selected: $colors-yellow-600;
+$theme-flare-warning-color-selected-hover: $colors-yellow-500;
+$theme-flare-warning-color-background: $colors-yellow-700;
+
+// DIVIDER COLORS
+$theme-flare-divider-primary: $colors-gray-700;
+$theme-flare-divider-secondary: $colors-gray-600;
+$theme-flare-divider-tertiary: $colors-gray-300;
+$theme-flare-divider-overlay: rgba($colors-gray-100, $shadow-xs-opacity); 
+$theme-flare-divider-halo: $colors-lime-600; 
+$theme-flare-divider-selected: $colors-lime-400; 

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

@@ -0,0 +1,53 @@
+//  flare THEME TOKENS: LEGACY KEYS
+// - This partial defines flare 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
+
+@use "sass:color";
+
+$theme-flare-primary-on-secondary-color: $color-pink-plastic;
+$theme-flare-primary-hover-on-secondary-color: #{color.adjust($color-pink-plastic, $lightness: -6%)};
+$theme-flare-surface-selected-rgb: extract-rgb($color-viola-vivid);
+$theme-flare-primary-selected-on-secondary-color: $color-viola-vivid;
+$theme-flare-primary-text-on-secondary-color: $color-snow;
+
+$theme-flare-surface-level-100-rgb: extract-rgb($color-night-sky);
+$theme-flare-primary-background-hover-on-secondary-color: $color-silver;
+$theme-flare-surface-level-200-rgb: extract-rgb($color-graphite);
+
+$theme-flare-link-on-secondary-color: $color-liliac;
+
+$theme-flare-modal-background-color: $color-night-sky;
+$theme-flare-dark-background-color: $color-parisian-night;
+$theme-flare-dark-background-on-secondary-color: $color-shadow-mountain;
+$theme-flare-dialog-background-color: $color-graphite;
+
+$theme-flare-label-background-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+$theme-flare-label-background-on-secondary-color: $color-buster_blue; // todo: fix, not part of Vibe colors
+
+$theme-flare-icon-on-secondary-color: $color-wolf_gray;
+$theme-flare-placeholder-color-with-opacity: $color-wolf_gray-with-opacity;
+$theme-flare-placeholder-on-secondary-color: $color-wolf_gray;
+
+// States
+$theme-flare-disabled-text-on-secondary-color: $theme-flare-disabled-text-color;
+$theme-flare-disabled-background-on-secondary-color: $theme-flare-disabled-background-color;
+
+// borders
+$theme-flare-ui-border-on-secondary-color: $color-fog;
+$theme-flare-layout-border-on-secondary-color: $color-blue-manhattan;
+
+// legacy shadow
+$theme-flare-box-shadow-mediun: var(--box-shadow-medium);

package/src/config/tokens/themes/flare/palette/_flare-theme-palette.scss

@@ -0,0 +1,25 @@
+//  flare 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-pink-plastic: #fe78c6;
+$color-viola-vivid: #9f4077;
+$color-liliac: #bd93f9;
+$color-deep_blue: #0d2e65;
+
+// - Semantics
+$color-red-fluorescent: #ff5555;
+$color-amber_red: #5a2027;
+
+$color-green-grotesque: #50fa7b;
+$color-green-blackboard: #26503e;
+$color-darker_green: #194733;
+
+// Natural / Gray
+$color-night-sky: #282a36;
+$color-blue-manhattan: #414458;
+$color-parisian-night: #303241;
+$color-shadow-mountain: #595959;

package/src/config/tokens/themes/flare/palette/legacy/_flare-theme-legacy-palette.scss

@@ -0,0 +1,9 @@
+//  flare THEME TOKENS: LEGACY COLORS
+// - This partial defines flare Theme's legacy color tokens
+// - Legacy colors are colors that are not part of the theme's keys
+
+// success and error are redundant aliases the should not be used.
+// we use positive and negative keys instead.
+
+$theme-flare-error: $color-red-fluorescent;
+$theme-flare-success: $color-green-grotesque;

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

@@ -25,8 +25,8 @@ $theme-hacker-fixed-dark-color: $color-black;
 
 // SURFACES COLORS
 $theme-hacker-surface-level-050: $colors-gray-900;
-$theme-hacker-surface-level-100: $colors-gray-950;
-$theme-hacker-surface-level-100-hover: rgba($colors-gray-950, 0.3);
+$theme-hacker-surface-level-100: $colors-green-900;
+$theme-hacker-surface-level-100-hover: rgba($colors-green-900, 0.3);
 $theme-hacker-surface-level-200: $color-black;
 $theme-hacker-surface-level-300: $color-black;
 $theme-hacker-surface-level-400: $color-black; //todo: fix, grey and allgrey should not be the same

package/src/files/colors.json

@@ -708,5 +708,214 @@
     "color-warning-hover": "#EAAA15",
     "color-warning-select": "#503e02",
     "color-warning-select-hover": "#402f00"
+  },
+  "flare-app-theme": {
+    "primary-color": "#fe78c6",
+    "primary-on-secondary-color": "#fe78c6",
+    "primary-hover-color": "#fe5ab9",
+    "primary-hover-on-secondary-color": "#fe5ab9",
+    "surface-selected": "#9f4077",
+    "surface-selected-rgb": "#9f4077",
+    "primary-selected-hover-color": "#0d2e65",
+    "primary-highlighted-color": "#0b2858",
+    "primary-selected-on-secondary-color": "#9f4077",
+    "text-primary": "#d5d8df",
+    "primary-text-on-secondary-color": "#d5d8df",
+    "fixed-light-color": "#ffffff",
+    "fixed-dark-color": "#323338",
+    "surface-level-050": "#ffffff",
+    "surface-level-100": "#282a36",
+    "surface-level-100-rgb": "#282a36",
+    "surface-level-100-hover": "#4b4e69",
+    "primary-background-hover-on-secondary-color": "#4b4e69",
+    "surface-level-300": "#282a36",
+    "surface-level-400": "#282a36",
+    "surface-gradient-bg": "#f6f7fb",
+    "surface-inverse": "#ffffff",
+    "surface-success": "#359970",
+    "surface-warning": "#ffd533",
+    "surface-overlay": "#ffd533",
+    "surface-alert": "#d83a52",
+    "text-color-on-inverted": "#323338",
+    "modal-background-color": "#282a36",
+    "color-error": "#ff5555",
+    "color-success": "#50fa7b",
+    "positive-color": "#00854d",
+    "positive-color-hover": "#007038",
+    "positive-color-selected": "#26503e",
+    "positive-color-selected-hover": "#194733",
+    "negative-color": "#d83a52",
+    "negative-color-hover": "#b63546",
+    "negative-color-selected": "#642830",
+    "negative-color-selected-hover": "#5a2027",
+    "divider-primary": "#797e93",
+    "ui-border-on-secondary-color": "#797e93",
+    "divider-secondary": "#414458",
+    "layout-border-on-secondary-color": "#414458",
+    "placeholder-color": "#c3c6d4",
+    "placeholder-on-secondary-color": "#c3c6d4",
+    "icon-primary": "#c3c6d4",
+    "icon-on-secondary-color": "#c3c6d4",
+    "disabled-background-color": "#3a3a3a",
+    "disabled-background-on-secondary-color": "#3a3a3a",
+    "dark-background-color": "#303241",
+    "dark-background-on-secondary-color": "#595959",
+    "surface-level-200": "#30324e",
+    "surface-level-200-rgb": "#30324e",
+    "dialog-background-color": "#30324e",
+    "label-background-color": "#404b69",
+    "label-background-on-secondary-color": "#404b69",
+    "text-secondary": "#9699a6",
+    "text-tertiary": "#9699a6",
+    "text-link": "#bd93f9",
+    "link-on-secondary-color": "#bd93f9",
+    "color-green-dark": "#359970",
+    "color-green-dark-hover": "#116846",
+    "color-green-dark-selected": "#0a482e",
+    "color-green-med": "#33d391",
+    "color-green-med-hover": "#0f9b63",
+    "color-green-med-selected": "#096c43",
+    "color-green-light": "#b0dc51",
+    "color-green-light-hover": "#7ca32b",
+    "color-green-light-selected": "#56721b",
+    "color-saladish": "#d5c567",
+    "color-saladish-hover": "#9d8f3e",
+    "color-saladish-selected": "#6d6329",
+    "color-yellow-dark": "#ffd533",
+    "color-yellow-dark-hover": "#c29e11",
+    "color-yellow-dark-selected": "#886e09",
+    "color-yellow-med": "#fdbc64",
+    "color-yellow-med-hover": "#c0873c",
+    "color-yellow-med-selected": "#875e27",
+    "color-yellow-light": "#ff7b4d",
+    "color-yellow-light-hover": "#c25531",
+    "color-yellow-light-selected": "#883a1f",
+    "color-red-dark": "#ffbdbd",
+    "color-red-dark-hover": "#c2888a",
+    "color-red-dark-selected": "#885f5f",
+    "color-red-med": "#ff9191",
+    "color-red-med-hover": "#c26163",
+    "color-red-med-selected": "#884343",
+    "color-red-light": "#e8697d",
+    "color-red-light-hover": "#ad3f51",
+    "color-red-light-selected": "#792a36",
+    "color-sand-dark": "#4e73a7",
+    "color-sand-dark-hover": "#274776",
+    "color-sand-dark-selected": "#193151",
+    "color-sand-med": "#79affd",
+    "color-sand-med-hover": "#4c7cc1",
+    "color-sand-med-selected": "#345686",
+    "color-sand-light": "#339ecd",
+    "color-sand-light-hover": "#0f6d97",
+    "color-sand-light-selected": "#094b69",
+    "color-obsidian-dark": "#4e73a7",
+    "color-obsidian-dark-hover": "#274776",
+    "color-obsidian-dark-selected": "#193151",
+    "color-obsidian-med": "#79affd",
+    "color-obsidian-med-hover": "#4c7cc1",
+    "color-obsidian-med-selected": "#345686",
+    "color-obsidian-light": "#339ecd",
+    "color-obsidian-light-hover": "#0f6d97",
+    "color-obsidian-light-selected": "#094b69",
+    "color-solarflare-dark": "#c95c76",
+    "color-solarflare-dark-hover": "#92334c",
+    "color-solarflare-dark-selected": "#662232",
+    "color-solarflare-med": "#ff44a1",
+    "color-solarflare-med-hover": "#c21e71",
+    "color-solarflare-med-selected": "#88134d",
+    "color-solarflare-light": "#ff7bd0",
+    "color-solarflare-light-hover": "#c24e9a",
+    "color-solarflare-light-selected": "#88356a",
+    "color-purple-dark": "#fbb4f4",
+    "color-purple-dark-hover": "#be80ba",
+    "color-purple-dark-selected": "#855981",
+    "color-purple-med": "#b57de3",
+    "color-purple-med-hover": "#8050ab",
+    "color-purple-med-selected": "#593776",
+    "color-purple-light": "#936fda",
+    "color-purple-light-hover": "#6344a3",
+    "color-purple-light-selected": "#442e71",
+    "color-pink-dark": "#9862a1",
+    "color-pink-dark-hover": "#673971",
+    "color-pink-dark-selected": "#47264d",
+    "color-pink-med": "#6645a9",
+    "color-pink-med-hover": "#3c1f78",
+    "color-pink-med-selected": "#291452",
+    "color-pink-light": "#777ae5",
+    "color-pink-light-hover": "#4b4ead",
+    "color-pink-light-selected": "#333578",
+    "color-steel-dark": "#4e73a7",
+    "color-steel-dark-hover": "#274776",
+    "color-steel-dark-selected": "#193151",
+    "color-steel-med": "#79affd",
+    "color-steel-med-hover": "#4c7cc1",
+    "color-steel-med-selected": "#345686",
+    "color-steel-light": "#339ecd",
+    "color-steel-light-hover": "#0f6d97",
+    "color-steel-light-selected": "#094b69",
+    "color-teal-dark": "#71d6d1",
+    "color-teal-dark-hover": "#469e9b",
+    "color-teal-dark-selected": "#2f6e6b",
+    "color-teal-med": "#85d6ff",
+    "color-teal-med-hover": "#569ec3",
+    "color-teal-med-selected": "#3b6e88",
+    "color-teal-light": "#86b4ca",
+    "color-teal-light-hover": "#588095",
+    "color-teal-light-selected": "#3c5967",
+    "color-lime-dark": "#aebdca",
+    "color-lime-dark-hover": "#7b8895",
+    "color-lime-dark-selected": "#555f67",
+    "color-lime-med": "#d0d0d0",
+    "color-lime-med-hover": "#98999a",
+    "color-lime-med-selected": "#6a6a6a",
+    "color-lime-light": "#999999",
+    "color-lime-light-hover": "#69696a",
+    "color-lime-light-selected": "#494949",
+    "color-orange-dark": "#5c5c5c",
+    "color-orange-dark-hover": "#684943",
+    "color-orange-dark-selected": "#48322c",
+    "color-orange-med": "#99756c",
+    "color-orange-med-hover": "#684943",
+    "color-orange-med-selected": "#48322c",
+    "color-orange-light": "#e190c0",
+    "color-orange-light-hover": "#b4739a",
+    "color-orange-light-selected": "#7e516c",
+    "color-gray-dark": "#5c5c5c",
+    "color-gray-dark-hover": "#684943",
+    "color-gray-dark-selected": "#48322c",
+    "color-gray-med": "#99756c",
+    "color-gray-med-hover": "#684943",
+    "color-gray-med-selected": "#48322c",
+    "color-gray-light": "#e190c0",
+    "color-gray-light-hover": "#b4739a",
+    "color-gray-light-selected": "#7e516c",
+    "color-sky": "#b4e9f8",
+    "color-sky-hover": "#90bac6",
+    "color-sky-selected": "#65828b",
+    "color-coffee": "#ca9a8b",
+    "color-coffee-hover": "#a27b6f",
+    "color-coffee-selected": "#71564e",
+    "color-royal": "#5591ea",
+    "color-royal-hover": "#4474bb",
+    "color-royal-selected": "#305183",
+    "color-teal": "#457b82",
+    "color-teal-hover": "#376268",
+    "color-teal-selected": "#274549",
+    "color-lavender": "#cab9fa",
+    "color-lavender-hover": "#a294c8",
+    "color-lavender-selected": "#71688c",
+    "color-steel": "#bacbed",
+    "color-steel-hover": "#95a2be",
+    "color-steel-selected": "#687185",
+    "color-lilac": "#687185",
+    "color-lilac-hover": "#8e8a9f",
+    "color-lilac-selected": "#63616f",
+    "color-pecan": "#786565",
+    "color-pecan-hover": "#605151",
+    "color-pecan-selected": "#433939",
+    "color-warning": "#FFCB00",
+    "color-warning-hover": "#EAAA15",
+    "color-warning-select": "#503e02",
+    "color-warning-select-hover": "#402f00"
   }
 }