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

package/dist/utils/theme-generator.utils.js

@@ -5,11 +5,12 @@
  * theme" widget run; see Theming > Custom theme for how it works and why
  * each step is shaped the way it is.
  *
- * Only `buildPalette`, `buildTints`, and `initializeTheme` (plus the
- * types their signatures need) are exported from `index.ts`. Everything
+ * Only `buildPalette`, `buildTints`, `initializeTheme`, and
+ * `buildThemeCss` (plus the types their signatures need) are exported
+ * from `index.ts`. Everything
  * else below, the raw color math, the shade/tint step definitions, is
  * kept file-private on purpose: none of it is meant to be reached on its
- * own, it exists to be composed by those three, and every extra export
+ * own, it exists to be composed by those four, and every extra export
  * is a promise to a consumer that constrains how this file can change
  * later. If a real need for one of these on its own ever comes up, it's
  * a one-line change to export it.
@@ -201,15 +202,42 @@ export function buildTints(primaryHex, isDark) {
         contentPressedTint: mix(LIGHT_TINT_BASE.contentPressed, primary500, TINT_RATIO),
     };
 }
-function applyBrand(type, seed, isDark) {
-    const root = document.documentElement.style;
-    for (const shade of buildPalette(seed, isDark)) {
-        root.setProperty(`--eun-color-${type}-${shade.name}`, shade.value);
-        root.setProperty(`--eun-color-on-${type}-${shade.name}`, shade.on);
+/**
+ * Every custom property a custom brand sets for one mode, as ordered
+ * `[property, value]` pairs: both 11-step shade scales, their `on-*`
+ * text colors, the transparent hover/active tokens, the surface color,
+ * the `-tint` neutrals, and `--eun-font-family` when one is passed.
+ * Shared by `initializeTheme` and `buildThemeCss` so the inline and the
+ * stylesheet output can never drift apart.
+ */
+function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily) {
+    const tokens = [];
+    for (const [type, seed] of [
+        ["primary", primary],
+        ["secondary", secondary],
+    ]) {
+        for (const shade of buildPalette(seed, isDark)) {
+            tokens.push([`--eun-color-${type}-${shade.name}`, shade.value]);
+            tokens.push([`--eun-color-on-${type}-${shade.name}`, shade.on]);
+        }
+        for (const token of TRANSPARENT_TOKENS) {
+            tokens.push([
+                `--eun-color-${type}-${token.name}`,
+                toRgba(seed, token.alpha),
+            ]);
+        }
     }
-    for (const token of TRANSPARENT_TOKENS) {
-        root.setProperty(`--eun-color-${type}-${token.name}`, toRgba(seed, token.alpha));
+    tokens.push(["--eun-surface-color", surfaceColor]);
+    if (fontFamily) {
+        tokens.push(["--eun-font-family", fontFamily]);
     }
+    const tints = buildTints(primary, isDark);
+    tokens.push(["--eun-surface-tint", tints.surfaceTint]);
+    tokens.push(["--eun-border-tint", tints.borderTint]);
+    tokens.push(["--eun-divider-tint", tints.dividerTint]);
+    tokens.push(["--eun-content-hover-tint", tints.contentHoverTint]);
+    tokens.push(["--eun-content-pressed-tint", tints.contentPressedTint]);
+    return tokens;
 }
 /**
  * The one non-pure export in this file: generates and applies a full
@@ -231,19 +259,36 @@ function applyBrand(type, seed, isDark) {
  *
  * Client-side only: call it once the DOM exists (after mount, not during
  * an SSR render), since it writes directly to `document.documentElement`.
+ * Because it only runs after the page has painted, the base theme shows
+ * for a frame first; `buildThemeCss` below avoids that flash.
  */
 export function initializeTheme(primary, secondary, isDark = false, surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, fontFamily) {
-    applyBrand("primary", primary, isDark);
-    applyBrand("secondary", secondary, isDark);
     const root = document.documentElement.style;
-    root.setProperty("--eun-surface-color", isDark ? darkSurfaceColor : surfaceColor);
-    if (fontFamily) {
-        root.setProperty("--eun-font-family", fontFamily);
+    const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+    for (const [property, value] of tokens) {
+        root.setProperty(property, value);
     }
-    const tints = buildTints(primary, isDark);
-    root.setProperty("--eun-surface-tint", tints.surfaceTint);
-    root.setProperty("--eun-border-tint", tints.borderTint);
-    root.setProperty("--eun-divider-tint", tints.dividerTint);
-    root.setProperty("--eun-content-hover-tint", tints.contentHoverTint);
-    root.setProperty("--eun-content-pressed-tint", tints.contentPressedTint);
+}
+/**
+ * The pure, stylesheet counterpart of `initializeTheme`: the same tokens,
+ * for both light and dark mode, returned as a CSS string instead of being
+ * written onto the DOM. Render it in a `<style>` in the document `<head>`
+ * (during SSR, or at build time) and the custom brand is there on first
+ * paint, with no flash of the base theme while the app hydrates.
+ *
+ * The rules are prefixed with `:root` so they outrank the prebuilt
+ * `[data-brand][data-theme]` rules whatever the stylesheet order, and
+ * switching mode is just a `data-theme` change, no regeneration needed.
+ */
+export function buildThemeCss(primary, secondary, options = {}) {
+    const { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, fontFamily, brand = "custom", } = options;
+    const rule = (selector, isDark) => {
+        const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+        const body = tokens
+            .map(([property, value]) => `  ${property}: ${value};`)
+            .join("\n");
+        return `${selector} {\n${body}\n}`;
+    };
+    const selector = `:root[data-brand="${brand}"]`;
+    return `${rule(selector, false)}\n${rule(`${selector}[data-theme="dark"]`, true)}\n`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "description": "Eunomia — a framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -293,6 +293,10 @@
       "types": "./dist/components/content/tooltip/tooltip.d.ts",
       "default": "./dist/components/content/tooltip/tooltip.js"
     },
+    "./rich-text.js": {
+      "types": "./dist/utils/rich-text.utils.d.ts",
+      "default": "./dist/utils/rich-text.utils.js"
+    },
     "./jsx": {
       "types": "./dist/jsx.d.ts",
       "default": "./dist/jsx.js"
@@ -311,6 +315,7 @@
     "licenses"
   ],
   "sideEffects": [
+    "./dist/index.js",
     "./dist/components/**/*.js",
     "./dist/features/**/*.js"
   ],

package/styles/themes/eunomia-theme.scss

@@ -9,6 +9,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/styles/themes/mixins/eunomia-neutrals.mixin.scss

@@ -0,0 +1,71 @@
+@mixin eunomia-neutrals {
+  --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;
+}
+
+@mixin eunomia-dark-neutrals {
+  --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);
+}

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-eunomia-dark-theme-colors {
   $primary-500: #6c92ff;
   $secondary-500: #edbd6f;
@@ -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: #2a3243;
   --eun-divider-tint: #667090;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-eunomia-theme-colors {
   $primary-500: #3d6fff;
   $secondary-500: #edbd6f;
@@ -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: #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;
+  @include eunomia-neutrals();
 
   --eun-surface-tint: #f5f8ff;
   --eun-divider-tint: #d6dae8;

package/styles/themes/prebuilt-themes/eunomia/eunomia.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/styles/themes/prebuilt-themes/fire/eunomia-fire-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-fire-dark-theme-colors {
   $primary-500: #e94235;
   $secondary-500: #df781e;
@@ -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: #2f2e39;
   --eun-divider-tint: #6c6c86;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-fire-theme-colors {
   $primary-500: #d8291c;
   $secondary-500: #f2790f;
@@ -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: #fdf4f4;
   --eun-divider-tint: #ded7dd;

package/styles/themes/prebuilt-themes/fire/eunomia-fire.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/styles/themes/prebuilt-themes/forest/eunomia-forest-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-forest-dark-theme-colors {
   $primary-500: #8cddb7;
   $secondary-500: #c49e7b;
@@ -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: #2b363f;
   --eun-divider-tint: #68748c;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-forest-theme-colors {
   $primary-500: #1b7a4d;
   $secondary-500: #8b5e34;
@@ -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: #f4f8f6;
   --eun-divider-tint: #d4dbdf;

package/styles/themes/prebuilt-themes/forest/eunomia-forest.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/styles/themes/prebuilt-themes/gold/eunomia-gold-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-gold-dark-theme-colors {
   $primary-500: #ccab42;
   $secondary-500: #a7c9e7;
@@ -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: #2e3339;
   --eun-divider-tint: #6b7186;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-gold-theme-colors {
   $primary-500: #c9a227;
   $secondary-500: #123a5e;
@@ -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: #fcfaf4;
   --eun-divider-tint: #dddddd;

package/styles/themes/prebuilt-themes/gold/eunomia-gold.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/styles/themes/prebuilt-themes/ocean/eunomia-ocean-dark.mixin.scss

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-ocean-dark-theme-colors {
   $primary-500: #7dd1ea;
   $secondary-500: #46c6ba;
@@ -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: #2a3542;
   --eun-divider-tint: #67738f;

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

@@ -1,3 +1,5 @@
+@use "./../../mixins/eunomia-neutrals.mixin.scss" as *;
+
 @mixin eunomia-ocean-theme-colors {
   $primary-500: #0b6e8c;
   $secondary-500: #2ec4b6;
@@ -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: #f3f8f9;
   --eun-divider-tint: #d3dae2;

package/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/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/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/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();