@eunomia/elements 1.0.0-beta.1

package/styles/themes/mixins/eunomia-a11y-color.mixin.scss

@@ -0,0 +1,66 @@
+@use "sass:color";
+@use "sass:math";
+
+// WCAG 2.1 relative luminance / contrast ratio, computed at build time so
+// dark-mode anchor colors (brand -500, state -100) can be generated instead
+// of hand-picked. See Theming > Light & dark via transparency.
+
+@function eunomia-srgb-linear($channel) {
+  @if $channel <= 0.03928 {
+    @return math.div($channel, 12.92);
+  }
+  @return math.pow(math.div($channel + 0.055, 1.055), 2.4);
+}
+
+@function eunomia-relative-luminance($color) {
+  $r: eunomia-srgb-linear(math.div(color.channel($color, "red"), 255));
+  $g: eunomia-srgb-linear(math.div(color.channel($color, "green"), 255));
+  $b: eunomia-srgb-linear(math.div(color.channel($color, "blue"), 255));
+
+  @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+}
+
+@function eunomia-contrast-ratio($color-a, $color-b) {
+  $luminance-a: eunomia-relative-luminance($color-a);
+  $luminance-b: eunomia-relative-luminance($color-b);
+  $lighter: math.max($luminance-a, $luminance-b);
+  $darker: math.min($luminance-a, $luminance-b);
+
+  @return math.div($lighter + 0.05, $darker + 0.05);
+}
+
+@function eunomia-on-color($color, $dark: #000000de, $light: #ffffff) {
+  @if eunomia-contrast-ratio($color, #000000) >=
+    eunomia-contrast-ratio($color, #ffffff)
+  {
+    @return $dark;
+  }
+  @return $light;
+}
+
+@function eunomia-dark-accessible(
+  $color,
+  $surface: #262d39,
+  $min-contrast: 4.5,
+  $max-lightness: 82%,
+  $step: 1.5%
+) {
+  $result: $color;
+  $guard: 0;
+
+  @while eunomia-contrast-ratio($result, $surface) < $min-contrast and $guard < 60
+  {
+    $result: color.adjust($result, $lightness: $step, $space: hsl);
+    $guard: $guard + 1;
+
+    @if color.channel($result, "lightness", $space: hsl) >= $max-lightness {
+      $guard: 60;
+    }
+  }
+
+  $r: math.round(color.channel($result, "red"));
+  $g: math.round(color.channel($result, "green"));
+  $b: math.round(color.channel($result, "blue"));
+
+  @return rgb($r, $g, $b);
+}

package/styles/themes/mixins/eunomia-scales.mixin.scss

@@ -0,0 +1,170 @@
+@mixin eunomia-colors-scales {
+  @include eunomia-red-scales;
+  @include eunomia-purple-scales;
+  @include eunomia-yellow-scales;
+  @include eunomia-blue-scales;
+  @include eunomia-green-scales;
+  @include eunomia-pink-scales;
+}
+
+@mixin eunomia-dark-colors-scales {
+  @include eunomia-dark-red-scales;
+  @include eunomia-dark-purple-scales;
+  @include eunomia-dark-yellow-scales;
+  @include eunomia-dark-blue-scales;
+  @include eunomia-dark-green-scales;
+  @include eunomia-dark-pink-scales;
+}
+
+// Grey scales
+@mixin eunomia-grey-scales {
+  --eun-color-grey-0: #ffffff;
+  --eun-color-grey-100: #f7f8fa;
+  --eun-color-grey-200: #ecedf0;
+  --eun-color-grey-300: #dee0e7;
+  --eun-color-grey-400: #c1c9d6;
+  --eun-color-grey-500: #8d93aa;
+  --eun-color-grey-600: #666e8a;
+  --eun-color-grey-700: #484e61;
+  --eun-color-grey-800: #071621;
+  --eun-color-grey-900: #000000;
+}
+
+@mixin eunomia-dark-grey-scales {
+  --eun-color-grey-0: #16171c;
+  --eun-color-grey-100: #2b3748;
+  --eun-color-grey-200: #353c48;
+  --eun-color-grey-300: #666e8a;
+  --eun-color-grey-400: #8d93aa;
+  --eun-color-grey-500: #5f6876;
+  --eun-color-grey-600: #c1c1c1;
+  --eun-color-grey-700: #ecedf0;
+  --eun-color-grey-800: #f7f8fa;
+  --eun-color-grey-900: #ffffff;
+}
+
+// Red scales
+@mixin eunomia-red-scales {
+  --eun-color-red-100: #fef4f5;
+  --eun-color-red-200: #fbd1d5;
+  --eun-color-red-300: #f8a4ac;
+  --eun-color-red-400: #f47682;
+  --eun-color-red-500: #f14959;
+  --eun-color-red-600: #ed1b2f;
+  --eun-color-red-700: #a11b29;
+}
+
+@mixin eunomia-dark-red-scales {
+  --eun-color-red-100: #410b11;
+  --eun-color-red-200: #420b10;
+  --eun-color-red-300: #550d14;
+  --eun-color-red-400: #80141f;
+  --eun-color-red-500: #a91b28;
+  --eun-color-red-600: #d42233;
+  --eun-color-red-700: #da6874;
+}
+
+// Purple scales
+@mixin eunomia-purple-scales {
+  --eun-color-purple-100: #f2f2fe;
+  --eun-color-purple-200: #dfcff6;
+  --eun-color-purple-300: #bea0ed;
+  --eun-color-purple-400: #9e70e4;
+  --eun-color-purple-500: #9562e3;
+  --eun-color-purple-600: #991bed;
+  --eun-color-purple-700: #691ba1;
+}
+
+@mixin eunomia-dark-purple-scales {
+  --eun-color-purple-100: #0a0a42;
+  --eun-color-purple-200: #22103c;
+  --eun-color-purple-300: #311859;
+  --eun-color-purple-400: #4b2486;
+  --eun-color-purple-500: #512693;
+  --eun-color-purple-600: #8d22d4;
+  --eun-color-purple-700: #aa68da;
+}
+
+// Yellow scales
+@mixin eunomia-yellow-scales {
+  --eun-color-yellow-100: #fefef4;
+  --eun-color-yellow-200: #f3fbd1;
+  --eun-color-yellow-300: #edf8a4;
+  --eun-color-yellow-400: #f4f482;
+  --eun-color-yellow-500: #f0f050;
+  --eun-color-yellow-600: #e0e000;
+  --eun-color-yellow-700: #a19f1b;
+}
+
+@mixin eunomia-dark-yellow-scales {
+  --eun-color-yellow-100: #41410b;
+  --eun-color-yellow-200: #37420b;
+  --eun-color-yellow-300: #4b550d;
+  --eun-color-yellow-400: #747414;
+  --eun-color-yellow-500: #a3a31b;
+  --eun-color-yellow-600: #eeee30;
+  --eun-color-yellow-700: #dad868;
+}
+
+// Blue scales
+@mixin eunomia-blue-scales {
+  --eun-color-blue-100: #f3f9fb;
+  --eun-color-blue-200: #ceeaee;
+  --eun-color-blue-300: #9ddadc;
+  --eun-color-blue-400: #6cc6cb;
+  --eun-color-blue-500: #3bb3b9;
+  --eun-color-blue-600: #0aa5a8;
+  --eun-color-blue-700: #1b94a1;
+}
+
+@mixin eunomia-dark-blue-scales {
+  --eun-color-blue-100: #162e37;
+  --eun-color-blue-200: #163236;
+  --eun-color-blue-300: #285c5d;
+  --eun-color-blue-400: #3b888c;
+  --eun-color-blue-500: #4fb5bb;
+  --eun-color-blue-600: #62e7e9;
+  --eun-color-blue-700: #68cfda;
+}
+
+// Green scales
+@mixin eunomia-green-scales {
+  --eun-color-green-100: #f4fef6;
+  --eun-color-green-200: #d1fbd7;
+  --eun-color-green-300: #a4f8b2;
+  --eun-color-green-400: #82f48a;
+  --eun-color-green-500: #49f15f;
+  --eun-color-green-600: #1bed22;
+  --eun-color-green-700: #1ba11d;
+}
+
+@mixin eunomia-dark-green-scales {
+  --eun-color-green-100: #0b4116;
+  --eun-color-green-200: #0b4213;
+  --eun-color-green-300: #0d5519;
+  --eun-color-green-400: #14741a;
+  --eun-color-green-500: #1ba92d;
+  --eun-color-green-600: #22d428;
+  --eun-color-green-700: #68da6a;
+}
+
+// Pink scales
+@mixin eunomia-pink-scales {
+  --eun-color-pink-100: #fef4fd;
+  --eun-color-pink-200: #fbd1fa;
+  --eun-color-pink-300: #f3a4f8;
+  --eun-color-pink-400: #d982f4;
+  --eun-color-pink-500: #d05df3;
+  --eun-color-pink-600: #c300ff;
+  --eun-color-pink-700: #a11b9f;
+}
+
+@mixin eunomia-dark-pink-scales {
+  --eun-color-pink-100: #410b3c;
+  --eun-color-pink-200: #420b40;
+  --eun-color-pink-300: #500d55;
+  --eun-color-pink-400: #5e1474;
+  --eun-color-pink-500: #791797;
+  --eun-color-pink-600: #b913ec;
+  --eun-color-pink-700: #da68d8;
+}

package/styles/themes/mixins/eunomia-states.mixin.scss

@@ -0,0 +1,51 @@
+@use "./eunomia-a11y-color.mixin.scss" as *;
+
+@mixin eunomia-all-states {
+  @include eunomia-success();
+  @include eunomia-warning();
+  @include eunomia-critical();
+  @include eunomia-info();
+}
+
+@mixin eunomia-all-dark-states {
+  --eun-color-success-100: #{eunomia-dark-accessible(#1a9948)};
+  --eun-color-warning-100: #{eunomia-dark-accessible(#c85207)};
+  --eun-color-critical-100: #{eunomia-dark-accessible(#aa0014)};
+  --eun-color-info-100: #{eunomia-dark-accessible(#097faf)};
+}
+
+@mixin eunomia-success {
+  $base: #1a9948;
+
+  --eun-color-success-100: #{$base};
+  --eun-color-success-90: #{rgba($base, 0.32)};
+  --eun-color-success-50: #{rgba($base, 0.16)};
+  --eun-color-success-30: #{rgba($base, 0.06)};
+}
+
+@mixin eunomia-warning {
+  $base: #c85207;
+
+  --eun-color-warning-100: #{$base};
+  --eun-color-warning-90: #{rgba($base, 0.32)};
+  --eun-color-warning-50: #{rgba($base, 0.16)};
+  --eun-color-warning-30: #{rgba($base, 0.06)};
+}
+
+@mixin eunomia-critical {
+  $base: #aa0014;
+
+  --eun-color-critical-100: #{$base};
+  --eun-color-critical-90: #{rgba($base, 0.32)};
+  --eun-color-critical-50: #{rgba($base, 0.16)};
+  --eun-color-critical-30: #{rgba($base, 0.06)};
+}
+
+@mixin eunomia-info {
+  $base: #097faf;
+
+  --eun-color-info-100: #{$base};
+  --eun-color-info-90: #{rgba($base, 0.32)};
+  --eun-color-info-50: #{rgba($base, 0.16)};
+  --eun-color-info-30: #{rgba($base, 0.06)};
+}

package/styles/themes/prebuilt-themes/eunomia/eunomia-dark.mixin.scss

@@ -0,0 +1,80 @@
+@mixin eunomia-eunomia-dark-theme-colors {
+  $primary-500: #6c92ff;
+  $secondary-500: #edbd6f;
+
+  --eun-color-primary-50: #384c85;
+  --eun-color-on-primary-50: #ffffff;
+  --eun-color-primary-100: #445ca1;
+  --eun-color-on-primary-100: #ffffff;
+  --eun-color-primary-200: #506cbd;
+  --eun-color-on-primary-200: #ffffff;
+  --eun-color-primary-300: #5f80e0;
+  --eun-color-on-primary-300: #000000de;
+  --eun-color-primary-400: #6689f0;
+  --eun-color-on-primary-400: #000000de;
+  --eun-color-primary-500: #{$primary-500};
+  --eun-color-on-primary-500: #000000de;
+  --eun-color-primary-600: #7599ff;
+  --eun-color-on-primary-600: #000000de;
+  --eun-color-primary-700: #7e9fff;
+  --eun-color-on-primary-700: #000000de;
+  --eun-color-primary-800: #92aeff;
+  --eun-color-on-primary-800: #000000de;
+  --eun-color-primary-900: #a2baff;
+  --eun-color-on-primary-900: #000000de;
+  --eun-color-primary-950: #b3c6ff;
+  --eun-color-on-primary-950: #000000de;
+  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+
+  --eun-color-secondary-50: #7b623a;
+  --eun-color-on-secondary-50: #ffffff;
+  --eun-color-secondary-100: #957746;
+  --eun-color-on-secondary-100: #ffffff;
+  --eun-color-secondary-200: #af8c52;
+  --eun-color-on-secondary-200: #000000de;
+  --eun-color-secondary-300: #d1a662;
+  --eun-color-on-secondary-300: #000000de;
+  --eun-color-secondary-400: #dfb268;
+  --eun-color-on-secondary-400: #000000de;
+  --eun-color-secondary-500: #{$secondary-500};
+  --eun-color-on-secondary-500: #000000de;
+  --eun-color-secondary-600: #eec178;
+  --eun-color-on-secondary-600: #000000de;
+  --eun-color-secondary-700: #efc580;
+  --eun-color-on-secondary-700: #000000de;
+  --eun-color-secondary-800: #f2ce94;
+  --eun-color-on-secondary-800: #000000de;
+  --eun-color-secondary-900: #f4d5a4;
+  --eun-color-on-secondary-900: #000000de;
+  --eun-color-secondary-950: #f6ddb4;
+  --eun-color-on-secondary-950: #000000de;
+  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+
+  --eun-content-hover: rgba(255, 255, 255, 0.08);
+  --eun-content-pressed: rgba(255, 255, 255, 0.14);
+  --eun-divider-color: var(--eun-color-grey-300);
+  --eun-border-color: var(--eun-color-grey-300);
+  --eun-surface-color: var(--eun-color-grey-0);
+  --eun-disabled-color: var(--eun-color-grey-200);
+  --eun-readonly-color: var(--eun-color-grey-600);
+  --eun-text-color: var(--eun-color-grey-800);
+  --eun-text-secondary: var(--eun-color-grey-700);
+  --eun-placeholder-color: var(--eun-color-grey-400);
+  --eun-text-disabled-color: var(--eun-color-grey-500);
+  --eun-text-readonly-color: var(--eun-color-grey-400);
+  --eun-disabled-content: var(--eun-color-grey-400);
+
+  --eun-surface-tint: #2a3243;
+  --eun-divider-tint: #667090;
+  --eun-border-tint: #667090;
+  --eun-content-hover-tint: rgba(248, 250, 255, 0.08);
+  --eun-content-pressed-tint: rgba(248, 250, 255, 0.14);
+}

package/styles/themes/prebuilt-themes/eunomia/eunomia.mixin.scss

@@ -0,0 +1,80 @@
+@mixin eunomia-eunomia-theme-colors {
+  $primary-500: #3d6fff;
+  $secondary-500: #edbd6f;
+
+  --eun-color-primary-50: #9ab4ff;
+  --eun-color-on-primary-50: #000000de;
+  --eun-color-primary-100: #85a4ff;
+  --eun-color-on-primary-100: #000000de;
+  --eun-color-primary-200: #6f94ff;
+  --eun-color-on-primary-200: #000000de;
+  --eun-color-primary-300: #5480ff;
+  --eun-color-on-primary-300: #000000de;
+  --eun-color-primary-400: #4978ff;
+  --eun-color-on-primary-400: #ffffff;
+  --eun-color-primary-500: #{$primary-500};
+  --eun-color-on-primary-500: #ffffff;
+  --eun-color-primary-600: #3968f0;
+  --eun-color-on-primary-600: #ffffff;
+  --eun-color-primary-700: #3662e0;
+  --eun-color-on-primary-700: #ffffff;
+  --eun-color-primary-800: #2d52bd;
+  --eun-color-on-primary-800: #ffffff;
+  --eun-color-primary-900: #2646a1;
+  --eun-color-on-primary-900: #ffffff;
+  --eun-color-primary-950: #203a85;
+  --eun-color-on-primary-950: #ffffff;
+  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+
+  --eun-color-secondary-50: #f6ddb4;
+  --eun-color-on-secondary-50: #000000de;
+  --eun-color-secondary-100: #f4d5a4;
+  --eun-color-on-secondary-100: #000000de;
+  --eun-color-secondary-200: #f2ce94;
+  --eun-color-on-secondary-200: #000000de;
+  --eun-color-secondary-300: #efc580;
+  --eun-color-on-secondary-300: #000000de;
+  --eun-color-secondary-400: #eec178;
+  --eun-color-on-secondary-400: #000000de;
+  --eun-color-secondary-500: #{$secondary-500};
+  --eun-color-on-secondary-500: #000000de;
+  --eun-color-secondary-600: #dfb268;
+  --eun-color-on-secondary-600: #000000de;
+  --eun-color-secondary-700: #d1a662;
+  --eun-color-on-secondary-700: #000000de;
+  --eun-color-secondary-800: #af8c52;
+  --eun-color-on-secondary-800: #000000de;
+  --eun-color-secondary-900: #957746;
+  --eun-color-on-secondary-900: #ffffff;
+  --eun-color-secondary-950: #7b623a;
+  --eun-color-on-secondary-950: #ffffff;
+  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+
+  --eun-content-hover: #9696961a;
+  --eun-content-pressed: #e4e6e8;
+  --eun-divider-color: #dee0e7;
+  --eun-border-color: #dee0e7;
+  --eun-surface-color: #ffffff;
+  --eun-disabled-color: #ecedf0;
+  --eun-readonly-color: #666e8a;
+  --eun-text-color: #071621;
+  --eun-text-secondary: #484e61;
+  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
+  --eun-text-disabled-color: #8d93aa;
+  --eun-text-readonly-color: #c1c9d6;
+  --eun-disabled-content: #c1c9d6;
+
+  --eun-surface-tint: #f5f8ff;
+  --eun-divider-tint: #d6dae8;
+  --eun-border-tint: #d6dae8;
+  --eun-content-hover-tint: #e4e9f1;
+  --eun-content-pressed-tint: #dce0e9;
+}

package/styles/themes/prebuilt-themes/eunomia/eunomia.theme.scss

@@ -0,0 +1,49 @@
+@use "./eunomia.mixin.scss" as *;
+@use "./eunomia-dark.mixin.scss" as *;
+@use "./../../mixins/eunomia-scales.mixin.scss" as *;
+@use "./../../mixins/eunomia-states.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-font.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-spaces.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-height.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-breakpoints.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-radius.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-border.mixin.scss" as *;
+@use "./../../../tools/mixins/settings/eunomia-shadows.mixin.scss" as *;
+@use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+
+@mixin default-settings {
+  @include eunomia-font-family();
+  @include eunomia-font-sizes();
+  @include eunomia-font-weight();
+  @include eunomia-spaces();
+  @include eunomia-border-radius();
+  @include eunomia-border-width();
+  @include eunomia-shadows();
+  @include eunomia-height();
+  @include eunomia-breakpoints();
+  @include eunomia-grid-layouts();
+}
+
+@mixin eunomia-eunomia-theme() {
+  @include eunomia-eunomia-theme-colors();
+  @include default-settings();
+  @include eunomia-colors-scales();
+  @include eunomia-grey-scales();
+  @include eunomia-all-states();
+}
+
+@mixin eunomia-eunomia-dark-theme() {
+  @include eunomia-eunomia-dark-theme-colors();
+  @include default-settings();
+  @include eunomia-dark-colors-scales();
+  @include eunomia-dark-grey-scales();
+  @include eunomia-all-dark-states();
+}
+
+.eunomia-eunomia-theme {
+  @include eunomia-eunomia-theme-colors();
+}
+
+.eunomia-eunomia-theme--dark {
+  @include eunomia-eunomia-dark-theme-colors();
+}

package/styles/themes/prebuilt-themes/fire/eunomia-fire-dark.mixin.scss

@@ -0,0 +1,80 @@
+@mixin eunomia-fire-dark-theme-colors {
+  $primary-500: #e94235;
+  $secondary-500: #df781e;
+
+  --eun-color-primary-50: #6f211b;
+  --eun-color-on-primary-50: #ffffff;
+  --eun-color-primary-100: #862922;
+  --eun-color-on-primary-100: #ffffff;
+  --eun-color-primary-200: #9e3027;
+  --eun-color-on-primary-200: #ffffff;
+  --eun-color-primary-300: #bc392e;
+  --eun-color-on-primary-300: #ffffff;
+  --eun-color-primary-400: #c83c32;
+  --eun-color-on-primary-400: #ffffff;
+  --eun-color-primary-500: #{$primary-500};
+  --eun-color-on-primary-500: #000000de;
+  --eun-color-primary-600: #d84c41;
+  --eun-color-on-primary-600: #000000de;
+  --eun-color-primary-700: #da574d;
+  --eun-color-on-primary-700: #000000de;
+  --eun-color-primary-800: #e07169;
+  --eun-color-on-primary-800: #000000de;
+  --eun-color-primary-900: #e48780;
+  --eun-color-on-primary-900: #000000de;
+  --eun-color-primary-950: #e99b96;
+  --eun-color-on-primary-950: #000000de;
+  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+
+  --eun-color-secondary-50: #743f10;
+  --eun-color-on-secondary-50: #ffffff;
+  --eun-color-secondary-100: #8c4c13;
+  --eun-color-on-secondary-100: #ffffff;
+  --eun-color-secondary-200: #a55a17;
+  --eun-color-on-secondary-200: #ffffff;
+  --eun-color-secondary-300: #c4691a;
+  --eun-color-on-secondary-300: #000000de;
+  --eun-color-secondary-400: #d2711c;
+  --eun-color-on-secondary-400: #000000de;
+  --eun-color-secondary-500: #{$secondary-500};
+  --eun-color-on-secondary-500: #000000de;
+  --eun-color-secondary-600: #e1812c;
+  --eun-color-on-secondary-600: #000000de;
+  --eun-color-secondary-700: #e38839;
+  --eun-color-on-secondary-700: #000000de;
+  --eun-color-secondary-800: #e79c59;
+  --eun-color-on-secondary-800: #000000de;
+  --eun-color-secondary-900: #ebab72;
+  --eun-color-on-secondary-900: #000000de;
+  --eun-color-secondary-950: #eeb98a;
+  --eun-color-on-secondary-950: #000000de;
+  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+
+  --eun-content-hover: rgba(255, 255, 255, 0.08);
+  --eun-content-pressed: rgba(255, 255, 255, 0.14);
+  --eun-divider-color: var(--eun-color-grey-300);
+  --eun-border-color: var(--eun-color-grey-300);
+  --eun-surface-color: var(--eun-color-grey-0);
+  --eun-disabled-color: var(--eun-color-grey-200);
+  --eun-readonly-color: var(--eun-color-grey-600);
+  --eun-text-color: var(--eun-color-grey-800);
+  --eun-text-secondary: var(--eun-color-grey-700);
+  --eun-placeholder-color: var(--eun-color-grey-400);
+  --eun-text-disabled-color: var(--eun-color-grey-500);
+  --eun-text-readonly-color: var(--eun-color-grey-400);
+  --eun-disabled-content: var(--eun-color-grey-400);
+
+  --eun-surface-tint: #2f2e39;
+  --eun-divider-tint: #6c6c86;
+  --eun-border-tint: #6c6c86;
+  --eun-content-hover-tint: rgba(253, 245, 245, 0.08);
+  --eun-content-pressed-tint: rgba(253, 245, 245, 0.14);
+}

package/styles/themes/prebuilt-themes/fire/eunomia-fire.mixin.scss

@@ -0,0 +1,80 @@
+@mixin eunomia-fire-theme-colors {
+  $primary-500: #d8291c;
+  $secondary-500: #f2790f;
+
+  --eun-color-primary-50: #eb9089;
+  --eun-color-on-primary-50: #000000de;
+  --eun-color-primary-100: #e67870;
+  --eun-color-on-primary-100: #000000de;
+  --eun-color-primary-200: #e26157;
+  --eun-color-on-primary-200: #000000de;
+  --eun-color-primary-300: #dd4337;
+  --eun-color-on-primary-300: #000000de;
+  --eun-color-primary-400: #da362a;
+  --eun-color-on-primary-400: #ffffff;
+  --eun-color-primary-500: #{$primary-500};
+  --eun-color-on-primary-500: #ffffff;
+  --eun-color-primary-600: #cb271a;
+  --eun-color-on-primary-600: #ffffff;
+  --eun-color-primary-700: #be2419;
+  --eun-color-on-primary-700: #ffffff;
+  --eun-color-primary-800: #a01e15;
+  --eun-color-on-primary-800: #ffffff;
+  --eun-color-primary-900: #881a12;
+  --eun-color-on-primary-900: #ffffff;
+  --eun-color-primary-950: #70150f;
+  --eun-color-on-primary-950: #ffffff;
+  --eun-color-primary-bg-hover: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-bg-active: #{rgba($primary-500, 0.08)};
+  --eun-color-primary-transparent: #{rgba($primary-500, 0.2)};
+  --eun-color-primary-transparent-hover: #{rgba($primary-500, 0.3)};
+  --eun-color-primary-transparent-active: #{rgba($primary-500, 0.4)};
+
+  --eun-color-secondary-50: #f8b982;
+  --eun-color-on-secondary-50: #000000de;
+  --eun-color-secondary-100: #f7ab68;
+  --eun-color-on-secondary-100: #000000de;
+  --eun-color-secondary-200: #f59c4d;
+  --eun-color-on-secondary-200: #000000de;
+  --eun-color-secondary-300: #f4892c;
+  --eun-color-on-secondary-300: #000000de;
+  --eun-color-secondary-400: #f3811d;
+  --eun-color-on-secondary-400: #000000de;
+  --eun-color-secondary-500: #{$secondary-500};
+  --eun-color-on-secondary-500: #000000de;
+  --eun-color-secondary-600: #e3720e;
+  --eun-color-on-secondary-600: #000000de;
+  --eun-color-secondary-700: #d56a0d;
+  --eun-color-on-secondary-700: #000000de;
+  --eun-color-secondary-800: #b35a0b;
+  --eun-color-on-secondary-800: #ffffff;
+  --eun-color-secondary-900: #984c09;
+  --eun-color-on-secondary-900: #ffffff;
+  --eun-color-secondary-950: #7e3f08;
+  --eun-color-on-secondary-950: #ffffff;
+  --eun-color-secondary-bg-hover: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-bg-active: #{rgba($secondary-500, 0.08)};
+  --eun-color-secondary-transparent: #{rgba($secondary-500, 0.2)};
+  --eun-color-secondary-transparent-hover: #{rgba($secondary-500, 0.3)};
+  --eun-color-secondary-transparent-active: #{rgba($secondary-500, 0.4)};
+
+  --eun-content-hover: #edeff0;
+  --eun-content-pressed: #e4e6e8;
+  --eun-divider-color: #dee0e7;
+  --eun-border-color: #dee0e7;
+  --eun-surface-color: #ffffff;
+  --eun-disabled-color: #ecedf0;
+  --eun-readonly-color: #666e8a;
+  --eun-text-color: #071621;
+  --eun-text-secondary: #484e61;
+  --eun-placeholder-color: var(--eun-color-grey-400, #c1c9d6);
+  --eun-text-disabled-color: #8d93aa;
+  --eun-text-readonly-color: #c1c9d6;
+  --eun-disabled-content: #c1c9d6;
+
+  --eun-surface-tint: #fdf4f4;
+  --eun-divider-tint: #ded7dd;
+  --eun-border-tint: #ded7dd;
+  --eun-content-hover-tint: #ece5e5;
+  --eun-content-pressed-tint: #e3ddde;
+}