@heliux-org/ui-style 1.0.22

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

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

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

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

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

@@ -0,0 +1,25 @@
+//  HACKER 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/hacker/palette/legacy/_hacker-theme-legacy-palette.scss

@@ -0,0 +1,9 @@
+//  HACKER THEME TOKENS: LEGACY COLORS
+// - This partial defines Hacker 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-hacker-error: $color-red-fluorescent;
+$theme-hacker-success: $color-green-grotesque;

package/src/core/_core-settings.scss

@@ -0,0 +1,20 @@
+// CORE : SETTINGS
+// This partial Defines a Unified settings map for the Core Scope.
+// - Map collect function is used in order to merge multiple maps from Core config .
+
+$core-settings-map: map-collect(
+  $core-motion-map,
+  $core-spacing-map,
+  $core-border-map,
+  $core-border-radius-map,
+  $core-common-map,
+  $core-fonts-map,
+  $core-font-weight-map,
+  $core-font-size-scale-map,
+  $core-font-line-height-scale-map,
+  $core-typography-font-sizes-map,
+  $core-typography-line-height-sizes-map,
+  $core-typography-fonts-map-deprecated,
+  $core-typography-fonts-map,
+  $core-typography-letter-spacing-map
+);