@eunomia/elements 1.0.0-beta.3 → 1.0.0-beta.4

package/dist/cdn/styles/themes/prebuilt-themes/ocean/eunomia-ocean.theme.css

@@ -1 +1 @@
-@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-ocean-theme{--eun-color-primary-50: #80b4c3;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #65a4b7;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #4a94aa;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #287f9a;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #1a7793;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #0b6e8c;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #0a6784;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #0a617b;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #085168;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #074558;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #063949;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(11, 110, 140, 0.08);--eun-color-primary-bg-active: rgba(11, 110, 140, 0.08);--eun-color-primary-transparent: rgba(11, 110, 140, 0.2);--eun-color-primary-transparent-hover: rgba(11, 110, 140, 0.3);--eun-color-primary-transparent-active: rgba(11, 110, 140, 0.4);--eun-color-secondary-50: #92e0d9;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #7bdad1;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #64d3c9;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #47cbbf;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #3bc8ba;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #2ec4b6;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #2bb8ab;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #28aca0;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #229187;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #1d7b73;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #18665f;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(46, 196, 182, 0.08);--eun-color-secondary-bg-active: rgba(46, 196, 182, 0.08);--eun-color-secondary-transparent: rgba(46, 196, 182, 0.2);--eun-color-secondary-transparent-hover: rgba(46, 196, 182, 0.3);--eun-color-secondary-transparent-active: rgba(46, 196, 182, 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: #f3f8f9;--eun-divider-tint: #d3dae2;--eun-border-tint: #d3dae2;--eun-content-hover-tint: #e2e9eb;--eun-content-pressed-tint: #d9e0e3}.eunomia-ocean-theme--dark{--eun-color-primary-50: #416d7a;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #4e8494;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #5c9bae;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #6eb8ce;--eun-color-on-primary-300: #000000de;--eun-color-primary-400: #75c4dc;--eun-color-on-primary-400: #000000de;--eun-color-primary-500: #7dd1ea;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #84d3ec;--eun-color-on-primary-600: #000000de;--eun-color-primary-700: #8cd6ed;--eun-color-on-primary-700: #000000de;--eun-color-primary-800: #9edcf0;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #ade2f2;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #bbe6f4;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(125, 209, 234, 0.08);--eun-color-primary-bg-active: rgba(125, 209, 234, 0.08);--eun-color-primary-transparent: rgba(125, 209, 234, 0.2);--eun-color-primary-transparent-hover: rgba(125, 209, 234, 0.3);--eun-color-primary-transparent-active: rgba(125, 209, 234, 0.4);--eun-color-secondary-50: #256761;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #2c7d75;--eun-color-on-secondary-100: #ffffff;--eun-color-secondary-200: #34938a;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #3eaea4;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #42b9ae;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #46c6ba;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #52c9be;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #5dcdc3;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #76d5cc;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #8bdbd4;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #9fe1db;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(70, 198, 186, 0.08);--eun-color-secondary-bg-active: rgba(70, 198, 186, 0.08);--eun-color-secondary-transparent: rgba(70, 198, 186, 0.2);--eun-color-secondary-transparent-hover: rgba(70, 198, 186, 0.3);--eun-color-secondary-transparent-active: rgba(70, 198, 186, 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: #2a3542;--eun-divider-tint: #67738f;--eun-border-tint: #67738f;--eun-content-hover-tint: rgba(248, 253, 254, 0.08);--eun-content-pressed-tint: rgba(248, 253, 254, 0.14)}
+@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-ocean-theme{--eun-color-primary-50: #80b4c3;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #65a4b7;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #4a94aa;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #287f9a;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #1a7793;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #0b6e8c;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #0a6784;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #0a617b;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #085168;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #074558;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #063949;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(11, 110, 140, 0.08);--eun-color-primary-bg-active: rgba(11, 110, 140, 0.08);--eun-color-primary-transparent: rgba(11, 110, 140, 0.2);--eun-color-primary-transparent-hover: rgba(11, 110, 140, 0.3);--eun-color-primary-transparent-active: rgba(11, 110, 140, 0.4);--eun-color-secondary-50: #92e0d9;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #7bdad1;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #64d3c9;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #47cbbf;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #3bc8ba;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #2ec4b6;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #2bb8ab;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #28aca0;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #229187;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #1d7b73;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #18665f;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(46, 196, 182, 0.08);--eun-color-secondary-bg-active: rgba(46, 196, 182, 0.08);--eun-color-secondary-transparent: rgba(46, 196, 182, 0.2);--eun-color-secondary-transparent-hover: rgba(46, 196, 182, 0.3);--eun-color-secondary-transparent-active: rgba(46, 196, 182, 0.4);--eun-content-hover: #9696961a;--eun-content-pressed: #e4e6e8;--eun-divider-color: #dee0e7;--eun-border-color: #dee0e7;--eun-surface-color: #ffffff;--eun-surface-sunken: color-mix( in srgb, var(--eun-text-color) 5%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 9%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--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: #f3f8f9;--eun-divider-tint: #d3dae2;--eun-border-tint: #d3dae2;--eun-content-hover-tint: #e2e9eb;--eun-content-pressed-tint: #d9e0e3}.eunomia-ocean-theme--dark{--eun-color-primary-50: #416d7a;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #4e8494;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #5c9bae;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #6eb8ce;--eun-color-on-primary-300: #000000de;--eun-color-primary-400: #75c4dc;--eun-color-on-primary-400: #000000de;--eun-color-primary-500: #7dd1ea;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #84d3ec;--eun-color-on-primary-600: #000000de;--eun-color-primary-700: #8cd6ed;--eun-color-on-primary-700: #000000de;--eun-color-primary-800: #9edcf0;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #ade2f2;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #bbe6f4;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(125, 209, 234, 0.08);--eun-color-primary-bg-active: rgba(125, 209, 234, 0.08);--eun-color-primary-transparent: rgba(125, 209, 234, 0.2);--eun-color-primary-transparent-hover: rgba(125, 209, 234, 0.3);--eun-color-primary-transparent-active: rgba(125, 209, 234, 0.4);--eun-color-secondary-50: #256761;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #2c7d75;--eun-color-on-secondary-100: #ffffff;--eun-color-secondary-200: #34938a;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #3eaea4;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #42b9ae;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #46c6ba;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #52c9be;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #5dcdc3;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #76d5cc;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #8bdbd4;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #9fe1db;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(70, 198, 186, 0.08);--eun-color-secondary-bg-active: rgba(70, 198, 186, 0.08);--eun-color-secondary-transparent: rgba(70, 198, 186, 0.2);--eun-color-secondary-transparent-hover: rgba(70, 198, 186, 0.3);--eun-color-secondary-transparent-active: rgba(70, 198, 186, 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-surface-sunken: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--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: #2a3542;--eun-divider-tint: #67738f;--eun-border-tint: #67738f;--eun-content-hover-tint: rgba(248, 253, 254, 0.08);--eun-content-pressed-tint: rgba(248, 253, 254, 0.14)}

package/dist/cdn/styles/themes/prebuilt-themes/ocean/eunomia-ocean.theme.scss

@@ -9,6 +9,7 @@
 @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/settings/eunomia-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

package/dist/cdn/styles/themes/prebuilt-themes/salmon/eunomia-salmon-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-salmon-dark-theme-colors {
   $primary-500: #ef9c7c;
   $secondary-500: #3ba1dd;
@@ -58,19 +60,7 @@
   --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);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a2d37;
   --eun-divider-tint: #676b84;

package/dist/cdn/styles/themes/prebuilt-themes/salmon/eunomia-salmon.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-salmon-theme-colors {
   $primary-500: #ef9c7c;
   $secondary-500: #148cd2;
@@ -58,19 +60,7 @@
   --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;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #fefaf8;
   --eun-divider-tint: #dfdde2;

package/dist/cdn/styles/themes/prebuilt-themes/salmon/eunomia-salmon.theme.css

@@ -1 +1 @@
-@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-salmon-theme{--eun-color-primary-50: #f7ccbb;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #f5c1ac;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #f3b69e;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #f1a88c;--eun-color-on-primary-300: #000000de;--eun-color-primary-400: #f0a284;--eun-color-on-primary-400: #000000de;--eun-color-primary-500: #ef9c7c;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #e19375;--eun-color-on-primary-600: #000000de;--eun-color-primary-700: #d2896d;--eun-color-on-primary-700: #000000de;--eun-color-primary-800: #b1735c;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #97624e;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #7c5140;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(239, 156, 124, 0.08);--eun-color-primary-bg-active: rgba(239, 156, 124, 0.08);--eun-color-primary-transparent: rgba(239, 156, 124, 0.2);--eun-color-primary-transparent-hover: rgba(239, 156, 124, 0.3);--eun-color-primary-transparent-active: rgba(239, 156, 124, 0.4);--eun-color-secondary-50: #85c3e8;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #6bb7e3;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #51aade;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #309ad7;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #2293d5;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #148cd2;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #1384c5;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #127bb9;--eun-color-on-secondary-700: #ffffff;--eun-color-secondary-800: #0f689b;--eun-color-on-secondary-800: #ffffff;--eun-color-secondary-900: #0d5884;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #0a496d;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(20, 140, 210, 0.08);--eun-color-secondary-bg-active: rgba(20, 140, 210, 0.08);--eun-color-secondary-transparent: rgba(20, 140, 210, 0.2);--eun-color-secondary-transparent-hover: rgba(20, 140, 210, 0.3);--eun-color-secondary-transparent-active: rgba(20, 140, 210, 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: #fefaf8;--eun-divider-tint: #dfdde2;--eun-border-tint: #dfdde2;--eun-content-hover-tint: #edebea;--eun-content-pressed-tint: #e5e2e3}.eunomia-salmon-theme--dark{--eun-color-primary-50: #401b0d;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #4e210f;--eun-color-on-primary-100: #ffffff;--eun-color-primary-200: #5b2712;--eun-color-on-primary-200: #ffffff;--eun-color-primary-300: #6b2d16;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #733117;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #ef9c7c;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #824026;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #8a4c35;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #9d6854;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #ac7e6d;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #ba9688;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(239, 156, 124, 0.08);--eun-color-primary-bg-active: rgba(239, 156, 124, 0.08);--eun-color-primary-transparent: rgba(239, 156, 124, 0.2);--eun-color-primary-transparent-hover: rgba(239, 156, 124, 0.3);--eun-color-primary-transparent-active: rgba(239, 156, 124, 0.4);--eun-color-secondary-50: #1e5373;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #25668b;--eun-color-on-secondary-100: #ffffff;--eun-color-secondary-200: #2c77a3;--eun-color-on-secondary-200: #ffffff;--eun-color-secondary-300: #358fc2;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #3797d0;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #3ba1dd;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #47a7df;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #53ace0;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #6fbae6;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #84c4e9;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #99cfee;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(59, 161, 221, 0.08);--eun-color-secondary-bg-active: rgba(59, 161, 221, 0.08);--eun-color-secondary-transparent: rgba(59, 161, 221, 0.2);--eun-color-secondary-transparent-hover: rgba(59, 161, 221, 0.3);--eun-color-secondary-transparent-active: rgba(59, 161, 221, 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: #2a2d37;--eun-divider-tint: #676b84;--eun-border-tint: #676b84;--eun-content-hover-tint: rgba(248, 245, 244, 0.08);--eun-content-pressed-tint: rgba(248, 245, 244, 0.14)}
+@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-salmon-theme{--eun-color-primary-50: #f7ccbb;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #f5c1ac;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #f3b69e;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #f1a88c;--eun-color-on-primary-300: #000000de;--eun-color-primary-400: #f0a284;--eun-color-on-primary-400: #000000de;--eun-color-primary-500: #ef9c7c;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #e19375;--eun-color-on-primary-600: #000000de;--eun-color-primary-700: #d2896d;--eun-color-on-primary-700: #000000de;--eun-color-primary-800: #b1735c;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #97624e;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #7c5140;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(239, 156, 124, 0.08);--eun-color-primary-bg-active: rgba(239, 156, 124, 0.08);--eun-color-primary-transparent: rgba(239, 156, 124, 0.2);--eun-color-primary-transparent-hover: rgba(239, 156, 124, 0.3);--eun-color-primary-transparent-active: rgba(239, 156, 124, 0.4);--eun-color-secondary-50: #85c3e8;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #6bb7e3;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #51aade;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #309ad7;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #2293d5;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #148cd2;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #1384c5;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #127bb9;--eun-color-on-secondary-700: #ffffff;--eun-color-secondary-800: #0f689b;--eun-color-on-secondary-800: #ffffff;--eun-color-secondary-900: #0d5884;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #0a496d;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(20, 140, 210, 0.08);--eun-color-secondary-bg-active: rgba(20, 140, 210, 0.08);--eun-color-secondary-transparent: rgba(20, 140, 210, 0.2);--eun-color-secondary-transparent-hover: rgba(20, 140, 210, 0.3);--eun-color-secondary-transparent-active: rgba(20, 140, 210, 0.4);--eun-content-hover: #9696961a;--eun-content-pressed: #e4e6e8;--eun-divider-color: #dee0e7;--eun-border-color: #dee0e7;--eun-surface-color: #ffffff;--eun-surface-sunken: color-mix( in srgb, var(--eun-text-color) 5%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 9%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--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: #fefaf8;--eun-divider-tint: #dfdde2;--eun-border-tint: #dfdde2;--eun-content-hover-tint: #edebea;--eun-content-pressed-tint: #e5e2e3}.eunomia-salmon-theme--dark{--eun-color-primary-50: #401b0d;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #4e210f;--eun-color-on-primary-100: #ffffff;--eun-color-primary-200: #5b2712;--eun-color-on-primary-200: #ffffff;--eun-color-primary-300: #6b2d16;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #733117;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #ef9c7c;--eun-color-on-primary-500: #000000de;--eun-color-primary-600: #824026;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #8a4c35;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #9d6854;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #ac7e6d;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #ba9688;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(239, 156, 124, 0.08);--eun-color-primary-bg-active: rgba(239, 156, 124, 0.08);--eun-color-primary-transparent: rgba(239, 156, 124, 0.2);--eun-color-primary-transparent-hover: rgba(239, 156, 124, 0.3);--eun-color-primary-transparent-active: rgba(239, 156, 124, 0.4);--eun-color-secondary-50: #1e5373;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #25668b;--eun-color-on-secondary-100: #ffffff;--eun-color-secondary-200: #2c77a3;--eun-color-on-secondary-200: #ffffff;--eun-color-secondary-300: #358fc2;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #3797d0;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #3ba1dd;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #47a7df;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #53ace0;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #6fbae6;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #84c4e9;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #99cfee;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(59, 161, 221, 0.08);--eun-color-secondary-bg-active: rgba(59, 161, 221, 0.08);--eun-color-secondary-transparent: rgba(59, 161, 221, 0.2);--eun-color-secondary-transparent-hover: rgba(59, 161, 221, 0.3);--eun-color-secondary-transparent-active: rgba(59, 161, 221, 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-surface-sunken: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--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: #2a2d37;--eun-divider-tint: #676b84;--eun-border-tint: #676b84;--eun-content-hover-tint: rgba(248, 245, 244, 0.08);--eun-content-pressed-tint: rgba(248, 245, 244, 0.14)}

package/dist/cdn/styles/themes/prebuilt-themes/salmon/eunomia-salmon.theme.scss

@@ -9,6 +9,7 @@
 @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/settings/eunomia-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

package/dist/cdn/styles/themes/prebuilt-themes/violet/eunomia-violet-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-dark-theme-colors {
   $primary-500: #8b5bd5;
   $secondary-500: #65e6e5;
@@ -58,19 +60,7 @@
   --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);
+  @include eunomia-dark-neutrals();
 
   --eun-surface-tint: #2a2d40;
   --eun-divider-tint: #666b8d;

package/dist/cdn/styles/themes/prebuilt-themes/violet/eunomia-violet.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-violet-theme-colors {
   $primary-500: #6d28d9;
   $secondary-500: #0ea5a4;
@@ -58,19 +60,7 @@
   --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;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f8f4fd;
   --eun-divider-tint: #d8d7e6;

package/dist/cdn/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.css

@@ -1 +1 @@
-@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-violet-theme{--eun-color-primary-50: #b38feb;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #a378e7;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #9360e3;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #7f42de;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #7635db;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #6d28d9;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #6626cc;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #6023bf;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #511ea1;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #451989;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #391571;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(109, 40, 217, 0.08);--eun-color-primary-bg-active: rgba(109, 40, 217, 0.08);--eun-color-primary-transparent: rgba(109, 40, 217, 0.2);--eun-color-primary-transparent-hover: rgba(109, 40, 217, 0.3);--eun-color-primary-transparent-active: rgba(109, 40, 217, 0.4);--eun-color-secondary-50: #82d0d0;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #67c6c6;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #4dbcbc;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #2bb0af;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #1caaa9;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #0ea5a4;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #0d9b9a;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #0c9190;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #0a7a79;--eun-color-on-secondary-800: #ffffff;--eun-color-secondary-900: #096867;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #075655;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(14, 165, 164, 0.08);--eun-color-secondary-bg-active: rgba(14, 165, 164, 0.08);--eun-color-secondary-transparent: rgba(14, 165, 164, 0.2);--eun-color-secondary-transparent-hover: rgba(14, 165, 164, 0.3);--eun-color-secondary-transparent-active: rgba(14, 165, 164, 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: #f8f4fd;--eun-divider-tint: #d8d7e6;--eun-border-tint: #d8d7e6;--eun-content-hover-tint: #e7e5ef;--eun-content-pressed-tint: #dedce7}.eunomia-violet-theme--dark{--eun-color-primary-50: #3a1b69;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #45207f;--eun-color-on-primary-100: #ffffff;--eun-color-primary-200: #512695;--eun-color-on-primary-200: #ffffff;--eun-color-primary-300: #612db1;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #6830be;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #8b5bd5;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #763fcd;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #804cd0;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #9368d7;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #a47ede;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #b495e3;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(139, 91, 213, 0.08);--eun-color-primary-bg-active: rgba(139, 91, 213, 0.08);--eun-color-primary-transparent: rgba(139, 91, 213, 0.2);--eun-color-primary-transparent-hover: rgba(139, 91, 213, 0.3);--eun-color-primary-transparent-active: rgba(139, 91, 213, 0.4);--eun-color-secondary-50: #357777;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #409191;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #4baaaa;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #59cac9;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #60d8d8;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #65e6e5;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #6fe7e7;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #78e9e8;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #8dedec;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #9eefee;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #aff2f1;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(101, 230, 229, 0.08);--eun-color-secondary-bg-active: rgba(101, 230, 229, 0.08);--eun-color-secondary-transparent: rgba(101, 230, 229, 0.2);--eun-color-secondary-transparent-hover: rgba(101, 230, 229, 0.3);--eun-color-secondary-transparent-active: rgba(101, 230, 229, 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: #2a2d40;--eun-divider-tint: #666b8d;--eun-border-tint: #666b8d;--eun-content-hover-tint: rgba(248, 245, 252, 0.08);--eun-content-pressed-tint: rgba(248, 245, 252, 0.14)}
+@font-face{font-family:"Mulish";font-style:normal;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Mulish";font-style:italic;font-weight:200 1000;font-display:swap;src:url("../../../fonts/mulish/mulish-latin-variable-italic.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.eunomia-violet-theme{--eun-color-primary-50: #b38feb;--eun-color-on-primary-50: #000000de;--eun-color-primary-100: #a378e7;--eun-color-on-primary-100: #000000de;--eun-color-primary-200: #9360e3;--eun-color-on-primary-200: #000000de;--eun-color-primary-300: #7f42de;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #7635db;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #6d28d9;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #6626cc;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #6023bf;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #511ea1;--eun-color-on-primary-800: #ffffff;--eun-color-primary-900: #451989;--eun-color-on-primary-900: #ffffff;--eun-color-primary-950: #391571;--eun-color-on-primary-950: #ffffff;--eun-color-primary-bg-hover: rgba(109, 40, 217, 0.08);--eun-color-primary-bg-active: rgba(109, 40, 217, 0.08);--eun-color-primary-transparent: rgba(109, 40, 217, 0.2);--eun-color-primary-transparent-hover: rgba(109, 40, 217, 0.3);--eun-color-primary-transparent-active: rgba(109, 40, 217, 0.4);--eun-color-secondary-50: #82d0d0;--eun-color-on-secondary-50: #000000de;--eun-color-secondary-100: #67c6c6;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #4dbcbc;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #2bb0af;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #1caaa9;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #0ea5a4;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #0d9b9a;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #0c9190;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #0a7a79;--eun-color-on-secondary-800: #ffffff;--eun-color-secondary-900: #096867;--eun-color-on-secondary-900: #ffffff;--eun-color-secondary-950: #075655;--eun-color-on-secondary-950: #ffffff;--eun-color-secondary-bg-hover: rgba(14, 165, 164, 0.08);--eun-color-secondary-bg-active: rgba(14, 165, 164, 0.08);--eun-color-secondary-transparent: rgba(14, 165, 164, 0.2);--eun-color-secondary-transparent-hover: rgba(14, 165, 164, 0.3);--eun-color-secondary-transparent-active: rgba(14, 165, 164, 0.4);--eun-content-hover: #9696961a;--eun-content-pressed: #e4e6e8;--eun-divider-color: #dee0e7;--eun-border-color: #dee0e7;--eun-surface-color: #ffffff;--eun-surface-sunken: color-mix( in srgb, var(--eun-text-color) 5%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 9%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--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: #f8f4fd;--eun-divider-tint: #d8d7e6;--eun-border-tint: #d8d7e6;--eun-content-hover-tint: #e7e5ef;--eun-content-pressed-tint: #dedce7}.eunomia-violet-theme--dark{--eun-color-primary-50: #3a1b69;--eun-color-on-primary-50: #ffffff;--eun-color-primary-100: #45207f;--eun-color-on-primary-100: #ffffff;--eun-color-primary-200: #512695;--eun-color-on-primary-200: #ffffff;--eun-color-primary-300: #612db1;--eun-color-on-primary-300: #ffffff;--eun-color-primary-400: #6830be;--eun-color-on-primary-400: #ffffff;--eun-color-primary-500: #8b5bd5;--eun-color-on-primary-500: #ffffff;--eun-color-primary-600: #763fcd;--eun-color-on-primary-600: #ffffff;--eun-color-primary-700: #804cd0;--eun-color-on-primary-700: #ffffff;--eun-color-primary-800: #9368d7;--eun-color-on-primary-800: #000000de;--eun-color-primary-900: #a47ede;--eun-color-on-primary-900: #000000de;--eun-color-primary-950: #b495e3;--eun-color-on-primary-950: #000000de;--eun-color-primary-bg-hover: rgba(139, 91, 213, 0.08);--eun-color-primary-bg-active: rgba(139, 91, 213, 0.08);--eun-color-primary-transparent: rgba(139, 91, 213, 0.2);--eun-color-primary-transparent-hover: rgba(139, 91, 213, 0.3);--eun-color-primary-transparent-active: rgba(139, 91, 213, 0.4);--eun-color-secondary-50: #357777;--eun-color-on-secondary-50: #ffffff;--eun-color-secondary-100: #409191;--eun-color-on-secondary-100: #000000de;--eun-color-secondary-200: #4baaaa;--eun-color-on-secondary-200: #000000de;--eun-color-secondary-300: #59cac9;--eun-color-on-secondary-300: #000000de;--eun-color-secondary-400: #60d8d8;--eun-color-on-secondary-400: #000000de;--eun-color-secondary-500: #65e6e5;--eun-color-on-secondary-500: #000000de;--eun-color-secondary-600: #6fe7e7;--eun-color-on-secondary-600: #000000de;--eun-color-secondary-700: #78e9e8;--eun-color-on-secondary-700: #000000de;--eun-color-secondary-800: #8dedec;--eun-color-on-secondary-800: #000000de;--eun-color-secondary-900: #9eefee;--eun-color-on-secondary-900: #000000de;--eun-color-secondary-950: #aff2f1;--eun-color-on-secondary-950: #000000de;--eun-color-secondary-bg-hover: rgba(101, 230, 229, 0.08);--eun-color-secondary-bg-active: rgba(101, 230, 229, 0.08);--eun-color-secondary-transparent: rgba(101, 230, 229, 0.2);--eun-color-secondary-transparent-hover: rgba(101, 230, 229, 0.3);--eun-color-secondary-transparent-active: rgba(101, 230, 229, 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-surface-sunken: color-mix( in srgb, var(--eun-text-color) 8%, transparent );--eun-surface-sunken-hover: color-mix( in srgb, var(--eun-text-color) 12%, transparent );--eun-surface-sunken-pressed: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--eun-surface-sunken-strong: color-mix( in srgb, var(--eun-text-color) 16%, transparent );--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: #2a2d40;--eun-divider-tint: #666b8d;--eun-border-tint: #666b8d;--eun-content-hover-tint: rgba(248, 245, 252, 0.08);--eun-content-pressed-tint: rgba(248, 245, 252, 0.14)}

package/dist/cdn/styles/themes/prebuilt-themes/violet/eunomia-violet.theme.scss

@@ -9,6 +9,7 @@
 @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/settings/eunomia-alpha.mixin.scss" as *;
 @use "./../../../tools/mixins/layout/eunomia-grid.mixin.scss" as *;
 
 @mixin default-settings {
@@ -19,6 +20,7 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
   @include eunomia-grid-layouts();

package/dist/cdn/styles/tools/indexes/eunomia-tools.index.scss

@@ -1,3 +1,4 @@
+@forward './../mixins/settings/eunomia-alpha.mixin.scss';
 @forward './../mixins/settings/eunomia-border.mixin.scss';
 @forward './../mixins/settings/eunomia-breakpoints.mixin.scss';
 @forward './../mixins/settings/eunomia-font.mixin.scss';

package/dist/cdn/styles/tools/mixins/settings/eunomia-alpha.mixin.scss

@@ -0,0 +1,39 @@
+// Translucent surface/text primitives, derived from the active theme's
+// `--eun-surface-color` and `--eun-text-color`. Included next to each theme's
+// color mixin, so they follow light/dark and brand switches automatically.
+@mixin eunomia-alpha {
+  --eun-surface-transparent-25: color-mix(
+    in srgb,
+    var(--eun-surface-color) 25%,
+    transparent
+  );
+  --eun-surface-transparent-50: color-mix(
+    in srgb,
+    var(--eun-surface-color) 50%,
+    transparent
+  );
+  --eun-surface-transparent-75: color-mix(
+    in srgb,
+    var(--eun-surface-color) 75%,
+    transparent
+  );
+
+  --eun-text-transparent-25: color-mix(
+    in srgb,
+    var(--eun-text-color) 25%,
+    transparent
+  );
+  --eun-text-transparent-50: color-mix(
+    in srgb,
+    var(--eun-text-color) 50%,
+    transparent
+  );
+  --eun-text-transparent-75: color-mix(
+    in srgb,
+    var(--eun-text-color) 75%,
+    transparent
+  );
+
+  // Fixed (theme-independent) muted text, legible on a dark surface
+  --eun-text-on-dark-secondary: rgba(255, 255, 255, 0.7);
+}

package/dist/cdn/styles/tools/mixins/settings/eunomia-border.mixin.scss

@@ -1,5 +1,5 @@
 @mixin eunomia-border-width {
-  --eun-borderWidth-s: 1px;
-  --eun-borderWidth-m: 1.5px;
-  --eun-borderWidth-l: 2px;
+  --eun-border-width-s: 1px;
+  --eun-border-width-m: 1.5px;
+  --eun-border-width-l: 2px;
 }

package/dist/cdn/styles/tools/mixins/settings/eunomia-font.mixin.scss

@@ -34,19 +34,19 @@
 }
 
 @mixin eunomia-font-sizes {
-  --eun-fontSize-xxs: 0.4rem;
-  --eun-fontSize-xs: 0.6rem;
-  --eun-fontSize-s: 0.82rem;
-  --eun-fontSize-m: 1rem;
-  --eun-fontSize-l: 1.3rem;
-  --eun-fontSize-xl: 1.6rem;
-  --eun-fontSize-xxl: 2rem;
-  --eun-fontSize-xxxl: 3.4rem;
-  --eun-fontSize-xxxxl: 5rem;
+  --eun-font-size-xxs: 0.4rem;
+  --eun-font-size-xs: 0.6rem;
+  --eun-font-size-s: 0.82rem;
+  --eun-font-size-m: 1rem;
+  --eun-font-size-l: 1.3rem;
+  --eun-font-size-xl: 1.6rem;
+  --eun-font-size-xxl: 2rem;
+  --eun-font-size-xxxl: 3.4rem;
+  --eun-font-size-xxxxl: 5rem;
 }
 
 @mixin eunomia-font-weight {
-  --eun-fontWeight-s: 300;
-  --eun-fontWeight-m: 500;
-  --eun-fontWeight-l: 700;
+  --eun-font-weight-s: 300;
+  --eun-font-weight-m: 500;
+  --eun-font-weight-l: 700;
 }

package/dist/cdn/styles/tools/mixins/settings/eunomia-radius.mixin.scss

@@ -1,6 +1,6 @@
 @mixin eunomia-border-radius {
-  --eun-borderRadius-s: 5px;
-  --eun-borderRadius-m: 10px;
-  --eun-borderRadius-l: 20px;
-  --eun-borderRadius-xl: 999px;
+  --eun-border-radius-s: 5px;
+  --eun-border-radius-m: 10px;
+  --eun-border-radius-l: 20px;
+  --eun-border-radius-xl: 999px;
 }

package/dist/components/action/button/button.d.ts

@@ -16,6 +16,8 @@ declare const EunomiaButton_base: import("../../../utils/constructor.type.js").C
  * @slot [end] - An icon or other content shown at the end of the button. Ignored when href and target are set to open in a new tab, since an external link indicator takes its place
  * @prop {'button' | 'submit' | 'reset'} [type='button'] - The button's native type. Ignored when href is set
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning' | 'light' | 'medium' | 'dark'} [variant='primary'] - The color theme applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon, shown at the start of the button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this button leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button

package/dist/components/action/button/button.js

@@ -26,6 +26,8 @@ export const EunomiaButtonTagName = "eun-button";
  * @slot [end] - An icon or other content shown at the end of the button. Ignored when href and target are set to open in a new tab, since an external link indicator takes its place
  * @prop {'button' | 'submit' | 'reset'} [type='button'] - The button's native type. Ignored when href is set
  * @prop {'primary' | 'secondary' | 'critical' | 'success' | 'warning' | 'light' | 'medium' | 'dark'} [variant='primary'] - The color theme applied to the button. light/medium/dark are neutral grey tones with no semantic meaning, matching eun-tag's color scale, for a de-emphasized action next to a semantically-colored one
+ * @prop {boolean} [fixedColor=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
+ * @attr {boolean} [fixed-color=false] - Keeps a light or dark button white or black in every theme. Without it, they follow the grey scale, which flips with the active theme. Has no effect on the other variants
  * @prop {import('../../content/icon/icon.type.js').EunomiaIconName} icon - An optional leading icon, shown at the start of the button. Ignored once something is slotted into start, and overridden by the default icon from severity when both are set
  * @prop {'info' | 'success' | 'warning' | 'critical' | 'neutral'} severity - The severity of the action this button leads to. When set, it supplies a default leading icon unless icon is also set or something is slotted into start. It has no effect on color, which is still controlled by variant
  * @prop {'xs' | 's' | 'm' | 'l' | 'xl'} [size='m'] - The size of the button