@heliux-org/ui-style 1.0.22

package/src/Themes/_basic-theme.scss

@@ -0,0 +1,26 @@
+// BASIC THEME: This partial loads BASIC THEME scope related Custom properties
+// - Properties are Theme Specific and goes under a Theme Specific Class based Selectors.
+// - We also use the ":root" selector, so Basic theme can cascade to other themes.
+//   - This way when a custom property is not defined in another theme, its definition i inherited from the ":root"
+
+@import "basic/basic-theme-settings";
+@import "basic/basic-theme-legacy-settings";
+@import "basic/content-colors";
+
+:root,
+.light-app-theme,
+.default-app-theme {
+  @include generate-custom-properties($theme-basic-settings);
+  @include define-theme-content-colors();
+
+  /*
+
+  LEGACY VALUES
+
+  These values are not within Vibe's UI definitions and are on a deprecation path.
+  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.
+
+  */
+
+  @include generate-custom-properties($theme-basic-legacy-settings);
+}

package/src/Themes/_black-theme.scss

@@ -0,0 +1,23 @@
+// BLACK THEME: This partial loads BLACK THEME scope related Custom properties
+//   TODO: Black Theme experience Guidelines should be shortly described here
+// - Properties are Theme Specific and goes under a Theme Specific Class based Selectors.
+
+@import "black/black-theme-settings";
+@import "black/black-theme-legacy-settings";
+@import "black/black-theme-content-colors";
+
+.black-app-theme {
+  @include generate-custom-properties($theme-black-settings);
+  @include define-black-theme-content-colors();
+
+  /*
+
+  LEGACY VALUES
+
+  These values are not within Vibe's UI definitions and are on a deprecation path.
+  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.
+
+  */
+
+  @include generate-custom-properties($theme-black-legacy-settings);
+}

package/src/Themes/_dark-theme.scss

@@ -0,0 +1,23 @@
+// DARK THEME: This partial loads DARK THEME scope related Custom properties
+// - TODO: Dark Theme experience Guidelines should be shortly described here
+// - Properties are Theme Specific and goes under a Theme Specific Class based Selectors.
+
+@import "dark/dark-theme-settings";
+@import "dark/dark-theme-legacy-settings";
+@import "dark/dark-theme-content-colors";
+
+.dark-app-theme {
+  @include generate-custom-properties($theme-dark-settings);
+  @include define-dark-theme-content-colors();
+
+  /*
+
+  LEGACY VALUES
+
+  These values are not within Vibe's UI definitions and are on a deprecation path.
+  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.
+
+  */
+
+  @include generate-custom-properties($theme-dark-legacy-settings);
+}

package/src/Themes/_hacker-theme.scss

@@ -0,0 +1,23 @@
+// DARK THEME: This partial loads DARK THEME scope related Custom properties
+// - TODO: Dark Theme experience Guidelines should be shortly described here
+// - Properties are Theme Specific and goes under a Theme Specific Class based Selectors.
+
+@import "hacker/hacker-theme-settings";
+@import "hacker/hacker-theme-legacy-settings";
+@import "hacker/hacker-theme-content-colors";
+
+.hacker-app-theme {
+  @include generate-custom-properties($theme-hacker-settings);
+  @include define-hacker-theme-content-colors();
+
+  /*
+
+  LEGACY VALUES
+
+  These values are not within Vibe's UI definitions and are on a deprecation path.
+  Please stop using them and make efforts to replace theme with their Vibe corresponding keys.
+
+  */
+
+  @include generate-custom-properties($theme-hacker-legacy-settings);
+}

package/src/Themes/basic/_basic-theme-legacy-settings.scss

@@ -0,0 +1,4 @@
+// BASIC THEME SETTINGS: This partial Defines a Unified settings map for the BASIC THEME Scope.
+// - Map collect function is used in order to merge multiple maps.
+
+$theme-basic-legacy-settings: map-collect($theme-basic-legacy-palette, $theme-basic-legacy-keys);

package/src/Themes/basic/_basic-theme-settings.scss

@@ -0,0 +1,4 @@
+// BASIC THEME SETTINGS: This partial Defines a Unified settings map for the BASIC THEME Scope.
+// - Map collect function is used in order to merge multiple maps.
+
+$theme-basic-settings: map-collect($theme-basic-palette, $theme-basic-keys, $theme-basic-shadow-keys);

package/src/Themes/basic/_content-colors.scss

@@ -0,0 +1,239 @@
+@mixin define-theme-content-colors() {
+// Green
+--color-green-dark: var(--color-green-300);
+--color-green-dark-hover: var(--color-green-600);
+--color-green-dark-selected: var(--color-green-400);
+
+// Green
+--color-green-med: var(--color-green-200);
+--color-green-med-hover: var(--color-green-300);
+--color-green-med-selected: var(--color-green-300);
+--color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
+
+// Green
+--color-green-light: var(--color-green-100);
+--color-green-light-hover: var(--color-green-400);
+--color-green-light-selected: var(--color-green-200);
+
+// Yellow
+--color-yellow-dark: var(--color-yellow-300);
+--color-yellow-dark-hover: var(--color-yellow-600);
+--color-yellow-dark-selected: var(--color-yellow-400);
+--color-yellow-dark-rgb: 255, 213, 51;
+
+// Yellow
+--color-yellow-med: var(--color-yellow-200);
+--color-yellow-med-hover: var(--color-yellow-300);
+--color-yellow-med-selected: var(--color-yellow-300);
+
+// Yellow
+--color-yellow-light: var(--color-yellow-100);
+--color-yellow-light-hover: var(--color-yellow-400);
+--color-yellow-light-selected: var(--color-yellow-200);
+
+// Red
+--color-red-dark: var(--color-red-300);
+--color-red-dark-hover: var(--color-red-600);
+--color-red-dark-selected: var(--color-red-400);
+
+// Red
+--color-red-med: var(--color-red-200);
+--color-red-med-hover: var(--color-red-300);
+--color-red-med-selected: var(--color-red-300);
+--color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
+
+// Red
+--color-red-light: var(--color-red-100);
+--color-red-light-hover: var(--color-red-400);
+--color-red-light-selected: var(--color-red-200);
+
+// Solar Flare
+--color-solar-flare-dark: var(--color-solar-flare-300);
+--color-solar-flare-dark-hover: var(--color-solar-flare-600);
+--color-solar-flare-dark-selected: var(--color-solar-flare-400);
+
+// Solar Flare
+--color-solar-flare-med: var(--color-solar-flare-200);
+--color-solar-flare-med-hover: var(--color-solar-flare-300);
+--color-solar-flare-med-selected: var(--color-solar-flare-300);
+
+// Solar Flare
+--color-solar-flare-light: var(--color-solar-flare-100);
+--color-solar-flare-light-hover: var(--color-solar-flare-400);
+--color-solar-flare-light-selected: var(--color-solar-flare-200);
+
+// Purple
+--color-purple-dark: var(--color-purple-300);
+--color-purple-dark-hover: var(--color-purple-600);
+--color-purple-dark-selected: var(--color-purple-400);
+
+// Purple
+--color-purple-med: var(--color-purple-200);
+--color-purple-med-hover: var(--color-purple-300);
+--color-purple-med-selected: var(--color-purple-300);
+
+// Purple
+--color-purple-light: var(--color-purple-100);
+--color-purple-light-hover: var(--color-purple-400);
+--color-purple-light-selected: var(--color-purple-200);
+
+// Pink
+--color-pink-dark: var(--color-pink-300);
+--color-pink-dark-hover: var(--color-pink-600);
+--color-pink-dark-selected: var(--color-pink-400);
+
+// Pink
+--color-pink-med: var(--color-pink-200);
+--color-pink-med-hover: var(--color-pink-300);
+--color-pink-med-selected: var(--color-pink-300);
+
+// Pink
+--color-pink-light: var(--color-pink-100);
+--color-pink-light-hover: var(--color-pink-400);
+--color-pink-light-selected: var(--color-pink-200);
+
+// Steel
+--color-steel-dark: var(--color-steel-300);
+--color-steel-dark-hover: var(--color-steel-600);
+--color-steel-dark-selected: var(--color-steel-400);
+
+// Steel
+--color-steel-med: var(--color-steel-200);
+--color-steel-med-hover: var(--color-steel-300);
+--color-steel-med-selected: var(--color-steel-300);
+
+// Steel
+--color-steel-light: var(--color-steel-100);
+--color-steel-light-hover: var(--color-steel-400);
+--color-steel-light-selected: var(--color-steel-200);
+
+// Teal
+--color-teal-dark: var(--color-teal-300);
+--color-teal-dark-hover: var(--color-teal-600);
+--color-teal-dark-selected: var(--color-teal-400);
+
+// Teal
+--color-teal-med: var(--color-teal-200);
+--color-teal-med-hover: var(--color-teal-300);
+--color-teal-med-selected: var(--color-teal-300);
+
+// Teal
+--color-teal-light: var(--color-teal-100);
+--color-teal-light-hover: var(--color-teal-400);
+--color-teal-light-selected: var(--color-teal-200);
+
+// Lime
+--color-lime-dark: var(--color-lime-300);
+--color-lime-dark-hover: var(--color-lime-600);
+--color-lime-dark-selected: var(--color-lime-400);
+
+// Lime
+--color-lime-med: var(--color-lime-200);
+--color-lime-med-hover: var(--color-lime-300);
+--color-lime-med-selected: var(--color-lime-300);
+
+// Lime
+--color-lime-light: var(--color-lime-100);
+--color-lime-light-hover: var(--color-lime-400);
+--color-lime-light-selected: var(--color-lime-200);
+
+// Blackish
+--color-orange-dark: var(--color-orange-300);
+--color-orange-dark-hover: var(--color-orange-600);
+--color-orange-dark-selected: var(--color-orange-400);
+
+// Brown
+--color-orange-med: var(--color-orange-200);
+--color-orange-med-hover: var(--color-orange-300);
+--color-orange-med-selected: var(--color-orange-300);
+
+// Orchid
+--color-orange-light: var(--color-orange-100);
+--color-orange-light-hover: var(--color-orange-400);
+--color-orange-light-selected: var(--color-orange-200);
+
+// Gray
+--color-gray-dark: var(--color-gray-300);
+--color-gray-dark-hover: var(--color-gray-600);
+--color-gray-dark-selected: var(--color-gray-400);
+
+// Gray
+--color-gray-med: var(--color-gray-200);
+--color-gray-med-hover: var(--color-gray-300);
+--color-gray-med-selected: var(--color-gray-300);
+
+// Gray
+--color-gray-light: var(--color-gray-100);
+--color-gray-light-hover: var(--color-gray-400);
+--color-gray-light-selected: var(--color-gray-200);
+
+// obsidian
+--color-obsidian-dark: var(--color-obsidian-300);
+--color-obsidian-dark-hover: var(--color-obsidian-600);
+--color-obsidian-dark-selected: var(--color-obsidian-400);
+
+// obsidian
+--color-obsidian-med: var(--color-obsidian-200);
+--color-obsidian-med-hover: var(--color-obsidian-300);
+--color-obsidian-med-selected: var(--color-obsidian-300);
+
+// obsidian
+--color-obsidian-light: var(--color-obsidian-100);
+--color-obsidian-light-hover: var(--color-obsidian-400);
+--color-obsidian-light-selected: var(--color-obsidian-200);
+
+// sand
+--color-sand-dark: var(--color-sand-300);
+--color-sand-dark-hover: var(--color-sand-600);
+--color-sand-dark-selected: var(--color-sand-400);
+
+// sand
+--color-sand-med: var(--color-sand-200);
+--color-sand-med-hover: var(--color-sand-300);
+--color-sand-med-selected: var(--color-sand-300);
+
+// sand
+--color-sand-light: var(--color-sand-100);
+--color-sand-light-hover: var(--color-sand-400);
+--color-sand-light-selected: var(--color-sand-200);
+
+// Sky
+--color-sky: var(--color-steel-700);
+--color-sky-hover: var(--color-red-900);
+--color-sky-selected: var(--color-red-600);
+
+// Coffee
+--color-coffee: var(--color-red-700);
+--color-coffee-hover: var(--color-red-800);
+--color-coffee-selected: var(--color-red-600);
+
+// Royal
+--color-royal: var(--color-teal-600);
+--color-royal-hover: var(--color-red-800);
+--color-royal-selected: var(--color-red-600);
+
+// Teal
+--color-teal: var(--color-red-700);
+--color-teal-hover: var(--color-red-800);
+--color-teal-selected: var(--color-red-600);
+
+// Lavender
+--color-lavender: var(--color-red-700);
+--color-lavender-hover: var(--color-red-800);
+--color-lavender-selected: var(--color-red-600);
+
+// Steel
+--color-steel: var(--color-red-600);
+--color-steel-hover: var(--color-red-800);
+--color-steel-selected: var(--color-red-600);
+
+// Lilac
+--color-lilac: var(--color-red-700);
+--color-lilac-hover: var(--color-red-800);
+--color-lilac-selected: var(--color-red-600);
+
+// Pecan
+--color-pecan: var(--color-red-700);
+--color-pecan-hover: var(--color-red-800);
+--color-pecan-selected: var(--color-red-600);
+}

package/src/Themes/black/_black-theme-content-colors.scss

@@ -0,0 +1,240 @@
+@mixin define-black-theme-content-colors() {
+  // Green
+  --color-green-dark: var(--color-green-900);
+  --color-green-dark-hover: var(--color-green-900);
+  --color-green-dark-selected: var(--color-green-700);
+
+  // Green
+  --color-green-med: var(--color-green-700);
+  --color-green-med-hover: var(--color-green-800);
+  --color-green-med-selected: var(--color-green-600);
+  --color-green-med-selected-with-opacity: rgba(9, 108, 67, 0.6);
+
+  // Green
+  --color-green-light: var(--color-green-600);
+  --color-green-light-hover: var(--color-green-700);
+  --color-green-light-selected: var(--color-green-600);
+
+  // Yellow
+  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark-hover: var(--color-yellow-900);
+  --color-yellow-dark-selected: var(--color-yellow-700);
+  --color-yellow-dark-rgb: 255, 213, 51;
+
+  // Yellow
+  --color-yellow-med: var(--color-yellow-700);
+  --color-yellow-med-hover: var(--color-yellow-800);
+  --color-yellow-med-selected: var(--color-yellow-600);
+
+  // Yellow
+  --color-yellow-light: var(--color-yellow-600);
+  --color-yellow-light-hover: var(--color-yellow-700);
+  --color-yellow-light-selected: var(--color-yellow-600);
+
+  // Red
+  --color-red-dark: var(--color-red-900);
+  --color-red-dark-hover: var(--color-red-900);
+  --color-red-dark-selected: var(--color-red-700);
+
+  // Red
+  --color-red-med: var(--color-red-700);
+  --color-red-med-hover: var(--color-red-800);
+  --color-red-med-selected: var(--color-red-600);
+  --color-red-med-selected-with-opacity: rgba(136, 67, 67, 0.6);
+
+  // Red
+  --color-red-light: var(--color-red-600);
+  --color-red-light-hover: var(--color-red-700);
+  --color-red-light-selected: var(--color-red-600);
+
+  // Solar Flare
+  --color-solar-flare-dark: var(--color-solar-flare-900);
+  --color-solar-flare-dark-hover: var(--color-solar-flare-900);
+  --color-solar-flare-dark-selected: var(--color-solar-flare-700);
+
+  // Solar Flare
+  --color-solar-flare-med: var(--color-solar-flare-700);
+  --color-solar-flare-med-hover: var(--color-solar-flare-800);
+  --color-solar-flare-med-selected: var(--color-solar-flare-600);
+
+  // Solar Flare
+  --color-solar-flare-light: var(--color-solar-flare-600);
+  --color-solar-flare-light-hover: var(--color-solar-flare-700);
+  --color-solar-flare-light-selected: var(--color-solar-flare-600);
+
+  // Purple
+  --color-purple-dark: var(--color-purple-900);
+  --color-purple-dark-hover: var(--color-purple-900);
+  --color-purple-dark-selected: var(--color-purple-700);
+
+  // Purple
+  --color-purple-med: var(--color-purple-700);
+  --color-purple-med-hover: var(--color-purple-800);
+  --color-purple-med-selected: var(--color-purple-600);
+
+  // Purple
+  --color-purple-light: var(--color-purple-600);
+  --color-purple-light-hover: var(--color-purple-700);
+  --color-purple-light-selected: var(--color-purple-600);
+
+  // Pink
+  --color-pink-dark: var(--color-pink-900);
+  --color-pink-dark-hover: var(--color-pink-900);
+  --color-pink-dark-selected: var(--color-pink-700);
+
+  // Pink
+  --color-pink-med: var(--color-pink-700);
+  --color-pink-med-hover: var(--color-pink-800);
+  --color-pink-med-selected: var(--color-pink-600);
+
+  // Pink
+  --color-pink-light: var(--color-pink-600);
+  --color-pink-light-hover: var(--color-pink-700);
+  --color-pink-light-selected: var(--color-pink-600);
+
+  // Steel
+  --color-steel-dark: var(--color-steel-900);
+  --color-steel-dark-hover: var(--color-steel-900);
+  --color-steel-dark-selected: var(--color-steel-700);
+
+  // Steel
+  --color-steel-med: var(--color-steel-700);
+  --color-steel-med-hover: var(--color-steel-800);
+  --color-steel-med-selected: var(--color-steel-600);
+
+  // Steel
+  --color-steel-light: var(--color-steel-600);
+  --color-steel-light-hover: var(--color-steel-700);
+  --color-steel-light-selected: var(--color-steel-600);
+
+  // Aquamarine
+  --color-teal-dark: var(--color-teal-900);
+  --color-teal-dark-hover: var(--color-teal-900);
+  --color-teal-dark-selected: var(--color-teal-700);
+
+  // Chili Blue
+  --color-teal-med: var(--color-teal-700);
+  --color-teal-med-hover: var(--color-teal-800);
+  --color-teal-med-selected: var(--color-teal-600);
+
+  // River
+  --color-teal-light: var(--color-teal-600);
+  --color-teal-light-hover: var(--color-teal-700);
+  --color-teal-light-selected: var(--color-teal-600);
+
+  // Lime
+  --color-lime-dark: var(--color-lime-900);
+  --color-lime-dark-hover: var(--color-lime-900);
+  --color-lime-dark-selected: var(--color-lime-700);
+
+  // Lime
+  --color-lime-med: var(--color-lime-700);
+  --color-lime-med-hover: var(--color-lime-800);
+  --color-lime-med-selected: var(--color-lime-600);
+
+  // Lime
+  --color-lime-light: var(--color-lime-600);
+  --color-lime-light-hover: var(--color-lime-700);
+  --color-lime-light-selected: var(--color-lime-600);
+
+  // Blackish
+  --color-orange-dark: var(--color-orange-900);
+  --color-orange-dark-hover: var(--color-orange-900);
+  --color-orange-dark-selected: var(--color-orange-700);
+
+  // Brown
+  --color-orange-med: var(--color-orange-700);
+  --color-orange-med-hover: var(--color-orange-800);
+  --color-orange-med-selected: var(--color-orange-600);
+
+  // Orchid
+  --color-orange-light: var(--color-orange-600);
+  --color-orange-light-hover: var(--color-orange-700);
+  --color-orange-light-selected: var(--color-orange-600);
+
+  // Gray
+  --color-gray-dark: var(--color-gray-900);
+  --color-gray-dark-hover: var(--color-gray-900);
+  --color-gray-dark-selected: var(--color-gray-700);
+
+  // Gray
+  --color-gray-med: var(--color-gray-700);
+  --color-gray-med-hover: var(--color-gray-800);
+  --color-gray-med-selected: var(--color-gray-600);
+
+  // Gray
+  --color-gray-light: var(--color-gray-600);
+  --color-gray-light-hover: var(--color-gray-700);
+  --color-gray-light-selected: var(--color-gray-600);
+
+  // obsidian
+  --color-obsidian-dark: var(--color-obsidian-900);
+  --color-obsidian-dark-hover: var(--color-obsidian-900);
+  --color-obsidian-dark-selected: var(--color-obsidian-700);
+
+  // obsidian
+  --color-obsidian-med: var(--color-obsidian-700);
+  --color-obsidian-med-hover: var(--color-obsidian-800);
+  --color-obsidian-med-selected: var(--color-obsidian-600);
+
+  // obsidian
+  --color-obsidian-light: var(--color-obsidian-600);
+  --color-obsidian-light-hover: var(--color-obsidian-700);
+  --color-obsidian-light-selected: var(--color-obsidian-600);
+
+  // Sand
+  --color-sand-dark: var(--color-sand-900);
+  --color-sand-dark-hover: var(--color-sand-900);
+  --color-sand-dark-selected: var(--color-sand-700);
+
+  // Sand
+  --color-sand-med: var(--color-sand-700);
+  --color-sand-med-hover: var(--color-sand-800);
+  --color-sand-med-selected: var(--color-sand-600);
+
+  // Sand
+  --color-sand-light: var(--color-sand-600);
+  --color-sand-light-hover: var(--color-sand-700);
+  --color-sand-light-selected: var(--color-sand-600);
+
+
+  // obsidian
+  --color-sky: var(--color-steel-700);
+  --color-sky-hover: var(--color-red-900);
+  --color-sky-selected: var(--color-red-600);
+
+  // Coffee
+  --color-coffee: var(--color-red-700);
+  --color-coffee-hover: var(--color-red-800);
+  --color-coffee-selected: var(--color-red-600);
+
+  // Royal
+  --color-royal: var(--color-teal-600);
+  --color-royal-hover: var(--color-red-800);
+  --color-royal-selected: var(--color-red-600);
+
+  // Teal
+  --color-teal: var(--color-red-700);
+  --color-teal-hover: var(--color-red-800);
+  --color-teal-selected: var(--color-red-600);
+
+  // Lavender
+  --color-lavender: var(--color-red-700);
+  --color-lavender-hover: var(--color-red-800);
+  --color-lavender-selected: var(--color-red-600);
+
+  // Steel
+  --color-steel: var(--color-red-600);
+  --color-steel-hover: var(--color-red-800);
+  --color-steel-selected: var(--color-red-600);
+
+  // Lilac
+  --color-lilac: var(--color-red-700);
+  --color-lilac-hover: var(--color-red-800);
+  --color-lilac-selected: var(--color-red-600);
+
+  // Pecan
+  --color-pecan: var(--color-red-700);
+  --color-pecan-hover: var(--color-red-800);
+  --color-pecan-selected: var(--color-red-600);
+}

package/src/Themes/black/_black-theme-legacy-settings.scss

@@ -0,0 +1,4 @@
+// BLACK THEME SETTINGS: This partial Defines a Unified settings map for the BLACK THEME Scope.
+// - Map collect function is used in order to merge multiple maps.
+
+$theme-black-legacy-settings: map-collect($theme-black-legacy-keys);

package/src/Themes/black/_black-theme-settings.scss

@@ -0,0 +1,4 @@
+// BLACK THEME SETTINGS: This partial Defines a Unified settings map for the BLACK THEME Scope.
+// - Map collect function is used in order to merge multiple maps.
+
+$theme-black-settings: map-collect($theme-black-keys, $theme-black-shadow-keys);