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

package/dist/utils/rich-text.utils.d.ts

@@ -146,6 +146,39 @@ export declare function renderInline(nodes: InlineNode[]): TemplateResult;
  * @returns the formatted template.
  */
 export declare function formatRichText(text: string): TemplateResult;
+/**
+ * Strips every Markdown-lite marker from a value and returns what a reader
+ * actually sees, as a plain string : the `[align:...]` directive, `**`,
+ * `{color=name}`, link URLs and so on are removed (a link keeps its label),
+ * and one newline is kept between lines. Needs no DOM, so it runs anywhere,
+ * including on the server, unlike {@link formatRichText}.
+ *
+ * Always consistent with {@link getPlainTextLength} :
+ * `toPlainText(text).length === getPlainTextLength(text)`. Handy for
+ * structured data (JSON-LD), meta descriptions, search indexes or
+ * notifications.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the plain text.
+ */
+export declare function toPlainText(text: string): string;
+/**
+ * Converts a Markdown-lite string into an HTML string, with the same markup
+ * as {@link formatRichText} (`<p>`, `<ul>`, `<strong>`, ...). Needs no DOM
+ * and no Lit, so it fits server rendering (a Next.js Server Component, an
+ * email, an RSS feed) where {@link formatRichText}'s template can't be used.
+ *
+ * Every piece of text and every attribute is escaped, and a link whose URL
+ * uses anything other than a relative path, a fragment, `http`, `https`,
+ * `mailto` or `tel` (such as `javascript:`) is rendered as its plain label,
+ * so the result is safe to inject with `innerHTML` or React's
+ * `dangerouslySetInnerHTML`. The `[align:...]` directive is stripped, read
+ * it with {@link splitAlign} if you need it.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the HTML string.
+ */
+export declare function toHtml(text: string): string;
 /**
  * Populates a contenteditable root with the given Markdown-lite value,
  * replacing its entire content — used both for the `formatting` toolbar's

package/dist/utils/rich-text.utils.js

@@ -126,15 +126,6 @@ export function parseInlineNodes(text) {
                 continue;
             }
         }
-        // `***text***` : bold and italic together produce adjacent `**`+`*`
-        // delimiters at both ends (from nesting `<strong><em>`/`</em></strong>`),
-        // which the plain `**` check below can't tell apart from "close bold,
-        // then a stray, unmatched italic `*`" — it greedily consumes the first
-        // two of the three as bold's own closer, leaving the third orphaned
-        // with no closer of its own within the once-was-italic content, and
-        // the italic wrapping is silently lost on reparse. Handling the
-        // three-character run as one atomic unit first — same convention real
-        // Markdown uses for `***bold italic***` — avoids that ambiguity.
         if (text.startsWith("***", i)) {
             const closeIndex = text.indexOf("***", i + 3);
             if (closeIndex !== -1) {
@@ -266,6 +257,39 @@ function renderInlineNode(node) {
             return html `<a href=${node.href}>${renderInline(node.children)}</a>`;
     }
 }
+/**
+ * Splits a Markdown-lite body (without its `[align:...]` directive) into
+ * blocks : consecutive `- ` lines become one list, other non-empty lines
+ * become paragraphs, and empty lines are dropped. Shared by every output
+ * format ({@link formatRichText}, {@link toHtml}, {@link toPlainText}) so
+ * they can never disagree on what counts as a paragraph or a list.
+ *
+ * @param body the Markdown-lite body.
+ * @returns the blocks, in order.
+ */
+function splitBlocks(body) {
+    const blocks = [];
+    let list = [];
+    const flushList = () => {
+        if (list.length) {
+            blocks.push({ type: "list", items: list });
+            list = [];
+        }
+    };
+    body.split("\n").forEach((line) => {
+        const trimmed = line.trim();
+        if (trimmed.startsWith("- ")) {
+            list.push(trimmed.slice(2));
+            return;
+        }
+        flushList();
+        if (trimmed) {
+            blocks.push({ type: "paragraph", text: trimmed });
+        }
+    });
+    flushList();
+    return blocks;
+}
 /**
  * Converts a multi-line Markdown-lite string into a Lit template — see
  * {@link parseInlineNodes} for the supported inline syntax.
@@ -284,30 +308,115 @@ function renderInlineNode(node) {
  */
 export function formatRichText(text) {
     const { body } = splitAlign(text);
-    const blocks = [];
-    let listBuffer = [];
-    const flushList = () => {
-        if (!listBuffer.length) {
-            return;
-        }
-        blocks.push(html `<ul>
-        ${listBuffer.map((item) => html `<li>${renderInline(parseInlineNodes(item))}</li>`)}
-      </ul>`);
-        listBuffer = [];
-    };
-    body.split("\n").forEach((line) => {
-        const trimmed = line.trim();
-        if (trimmed.startsWith("- ")) {
-            listBuffer.push(trimmed.slice(2));
-            return;
+    return html `${splitBlocks(body).map((block) => block.type === "list"
+        ? html `<ul>
+          ${block.items.map((item) => html `<li>${renderInline(parseInlineNodes(item))}</li>`)}
+        </ul>`
+        : html `<p>${renderInline(parseInlineNodes(block.text))}</p>`)}`;
+}
+function inlineToPlainText(nodes) {
+    return nodes
+        .map((node) => node.type === "text" ? node.value : inlineToPlainText(node.children))
+        .join("");
+}
+/**
+ * Strips every Markdown-lite marker from a value and returns what a reader
+ * actually sees, as a plain string : the `[align:...]` directive, `**`,
+ * `{color=name}`, link URLs and so on are removed (a link keeps its label),
+ * and one newline is kept between lines. Needs no DOM, so it runs anywhere,
+ * including on the server, unlike {@link formatRichText}.
+ *
+ * Always consistent with {@link getPlainTextLength} :
+ * `toPlainText(text).length === getPlainTextLength(text)`. Handy for
+ * structured data (JSON-LD), meta descriptions, search indexes or
+ * notifications.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the plain text.
+ */
+export function toPlainText(text) {
+    const { body } = splitAlign(text);
+    const lines = body.length ? body.split("\n") : [""];
+    return lines
+        .map((line) => inlineToPlainText(parseInlineNodes(line)))
+        .join("\n");
+}
+const HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;",
+};
+function escapeHtml(value) {
+    return value.replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
+}
+const SAFE_URL_SCHEMES = new Set(["http:", "https:", "mailto:", "tel:"]);
+/**
+ * Whether a link destination is safe to put in an `href` : relative URLs,
+ * fragments and the `http`, `https`, `mailto` and `tel` schemes. Anything
+ * else (`javascript:`, `data:`, ...) is refused.
+ *
+ * @param href the raw destination.
+ * @returns `true` when it can be emitted as an `href`.
+ */
+function isSafeHref(href) {
+    const normalized = href.replace(/[\u0000-\u0020]/g, "");
+    const scheme = /^([a-z][a-z0-9+.-]*:)/i.exec(normalized);
+    return !scheme || SAFE_URL_SCHEMES.has(scheme[1].toLowerCase());
+}
+function inlineToHtml(nodes) {
+    return nodes.map(inlineNodeToHtml).join("");
+}
+function inlineNodeToHtml(node) {
+    switch (node.type) {
+        case "text":
+            return escapeHtml(node.value);
+        case "bold":
+            return `<strong>${inlineToHtml(node.children)}</strong>`;
+        case "italic":
+            return `<em>${inlineToHtml(node.children)}</em>`;
+        case "underline":
+            return `<u>${inlineToHtml(node.children)}</u>`;
+        case "color": {
+            const color = findRichTextColor(node.color);
+            return `<span data-color="${escapeHtml(node.color)}" style="color: ${color?.text ?? "inherit"}">${inlineToHtml(node.children)}</span>`;
         }
-        flushList();
-        if (trimmed) {
-            blocks.push(html `<p>${renderInline(parseInlineNodes(trimmed))}</p>`);
+        case "highlight": {
+            const color = findRichTextColor(node.color);
+            return `<span data-highlight="${escapeHtml(node.color)}" style="background-color: ${color?.highlight ?? "transparent"}">${inlineToHtml(node.children)}</span>`;
         }
-    });
-    flushList();
-    return html `${blocks}`;
+        case "link":
+            return isSafeHref(node.href)
+                ? `<a href="${escapeHtml(node.href)}">${inlineToHtml(node.children)}</a>`
+                : inlineToHtml(node.children);
+    }
+}
+/**
+ * Converts a Markdown-lite string into an HTML string, with the same markup
+ * as {@link formatRichText} (`<p>`, `<ul>`, `<strong>`, ...). Needs no DOM
+ * and no Lit, so it fits server rendering (a Next.js Server Component, an
+ * email, an RSS feed) where {@link formatRichText}'s template can't be used.
+ *
+ * Every piece of text and every attribute is escaped, and a link whose URL
+ * uses anything other than a relative path, a fragment, `http`, `https`,
+ * `mailto` or `tel` (such as `javascript:`) is rendered as its plain label,
+ * so the result is safe to inject with `innerHTML` or React's
+ * `dangerouslySetInnerHTML`. The `[align:...]` directive is stripped, read
+ * it with {@link splitAlign} if you need it.
+ *
+ * @param text the raw Markdown-lite string.
+ * @returns the HTML string.
+ */
+export function toHtml(text) {
+    const { body } = splitAlign(text);
+    return splitBlocks(body)
+        .map((block) => block.type === "list"
+        ? `<ul>${block.items
+            .map((item) => `<li>${inlineToHtml(parseInlineNodes(item))}</li>`)
+            .join("")}</ul>`
+        : `<p>${inlineToHtml(parseInlineNodes(block.text))}</p>`)
+        .join("");
 }
 /**
  * Builds one `<p>` per line of `body`, each with its inline Markdown-lite
@@ -351,13 +460,6 @@ function buildParagraphs(body) {
     render(html `${lines.map((line) => html `<p>${renderInline(parseInlineNodes(line))}</p>`)}`, scratch);
     stripComments(scratch);
     const paragraphs = Array.from(scratch.children);
-    // A genuinely empty <p> (an empty line, most commonly the sole paragraph
-    // of an otherwise-empty field) has no content a browser can anchor a
-    // caret inside — clicking into it then often places the caret at the
-    // *root* level instead, right before the <p>, so anything typed lands
-    // there as a stray text node the block-based serializer never sees
-    // (value silently stays empty forever). A <br> gives every empty
-    // paragraph a real caret position of its own.
     paragraphs.forEach((paragraph) => {
         if (!paragraph.hasChildNodes()) {
             paragraph.appendChild(document.createElement("br"));
@@ -394,20 +496,9 @@ const INLINE_TAG_MARKERS = {
 };
 function serializeInlineNode(node) {
     if (node.nodeType === Node.TEXT_NODE) {
-        // U+200B (zero-width space) : the textarea's own toolbar uses it as an
-        // invisible caret anchor for a "pending" mark toggled with nothing
-        // selected (see textarea.ts's `PENDING_CARET_TEXT`) ; a real character
-        // a browser can place a caret next to inside an otherwise-empty inline
-        // element, but never meant to be real content, so it never survives
-        // into `value`.
         return (node.textContent ?? "").replace(/\u200B/g, "");
     }
     if (node.nodeName === "BR") {
-        // The editor only ever inserts a `<br>` as an empty paragraph's sole
-        // child (so it stays focusable/visible) — never as a mid-paragraph soft
-        // break — so it always serializes to nothing, not a newline (block
-        // boundaries already produce one `\n` per paragraph in
-        // `serializeEditableRoot`).
         return "";
     }
     if (!(node instanceof HTMLElement)) {

package/dist/utils/theme-generator.utils.d.ts

@@ -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.
@@ -60,6 +61,26 @@ export declare function buildTints(primaryHex: EunomiaHexColor, isDark: boolean)
  *
  * 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 declare function initializeTheme(primary: EunomiaHexColor, secondary: EunomiaHexColor, isDark?: boolean, surfaceColor?: EunomiaHexColor, darkSurfaceColor?: EunomiaHexColor, fontFamily?: string): void;
+export interface EunomiaThemeCssOptions {
+    surfaceColor?: EunomiaHexColor;
+    darkSurfaceColor?: EunomiaHexColor;
+    fontFamily?: string;
+    brand?: string;
+}
+/**
+ * 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 declare function buildThemeCss(primary: EunomiaHexColor, secondary: EunomiaHexColor, options?: EunomiaThemeCssOptions): string;
 export {};

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.2",
+  "version": "1.0.0-beta.4",
   "description": "Eunomia — a framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -293,12 +293,21 @@
       "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"
     },
     "./styles/*": "./styles/*",
-    "./cdn/*": "./dist/cdn/*"
+    "./cdn/*": "./dist/cdn/*",
+    "./animate-ssr.css": "./dist/ssr/animate-ssr.css",
+    "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css",
+    "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
+    "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
+    "./native-table.css": "./dist/features/table/native-table.css"
   },
   "files": [
     "dist",
@@ -306,12 +315,14 @@
     "licenses"
   ],
   "sideEffects": [
+    "./dist/index.js",
     "./dist/components/**/*.js",
     "./dist/features/**/*.js"
   ],
   "scripts": {
     "build": "tsc --noEmit",
-    "build:dist": "rm -rf dist && tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs",
+    "build:dist": "node scripts/build-dist.mjs",
+    "build:dist:watch": "tsc -p tsconfig.build.json && node scripts/copy-assets.mjs && node scripts/generate-exports.mjs && tsc -p tsconfig.build.json --watch",
     "build:cdn": "node scripts/build-cdn.mjs",
     "prepublishOnly": "npm run build:dist && npm run build:cdn",
     "lint": "eslint . --config ../eslint.config.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;