@eunomia/elements 1.0.0-beta.5 → 1.0.0-beta.7

package/dist/utils/listbox-options.utils.js

@@ -48,7 +48,45 @@ export function renderHighlightedLabel(label, query) {
     if (index === -1) {
         return label;
     }
-    return html `${label.slice(0, index)}<mark
-      >${label.slice(index, index + query.length)}</mark
-    >${label.slice(index + query.length)}`;
+    return html `${label.slice(0, index)}<mark>${label.slice(index, index + query.length)}</mark>${label.slice(index + query.length)}`;
+}
+/**
+ * Renders a listbox's option rows, wrapping each run of options sharing an
+ * `optgroup` in a `role="group"` row named by that group's label, so
+ * assistive technology announces which group an option belongs to.
+ * Options outside any group are rendered as they are.
+ *
+ * @param options the options to render, in display order.
+ * @param renderOption renders one option row, given its index in `options`.
+ * @returns the rendered rows.
+ */
+export function renderListboxRows(options, renderOption) {
+    const rows = [];
+    let groupCount = 0;
+    let index = 0;
+    while (index < options.length) {
+        const { group } = options[index];
+        const start = index;
+        while (index < options.length && options[index].group === group) {
+            index += 1;
+        }
+        const run = options
+            .slice(start, index)
+            .map((option, offset) => renderOption(option, start + offset));
+        if (!group) {
+            rows.push(...run);
+            continue;
+        }
+        const labelId = `listbox-group-${groupCount}`;
+        groupCount += 1;
+        rows.push(html `
+      <li class="option-group" role="group" aria-labelledby=${labelId}>
+        <div id=${labelId} class="group-label">${group}</div>
+        <ul class="group-options" role="presentation">
+          ${run}
+        </ul>
+      </li>
+    `);
+    }
+    return rows;
 }

package/dist/utils/media.styles.d.ts

@@ -0,0 +1,19 @@
+import { CSSResult } from "lit";
+import { EunomiaBreakpoint } from "../breakpoints.js";
+/**
+ * {@link mediaBelow} as a value a Lit `css` template accepts, for a
+ * component's own `@media` or `@container` rule :
+ * `@media ${cssBelow("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition.
+ */
+export declare function cssBelow(breakpoint: EunomiaBreakpoint): CSSResult;
+/**
+ * {@link mediaFrom} as a value a Lit `css` template accepts :
+ * `@media ${cssFrom("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition.
+ */
+export declare function cssFrom(breakpoint: EunomiaBreakpoint): CSSResult;

package/dist/utils/media.styles.js

@@ -0,0 +1,23 @@
+import { unsafeCSS } from "lit";
+import { mediaBelow, mediaFrom } from "../breakpoints.js";
+/**
+ * {@link mediaBelow} as a value a Lit `css` template accepts, for a
+ * component's own `@media` or `@container` rule :
+ * `@media ${cssBelow("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range stops under.
+ * @returns the media condition.
+ */
+export function cssBelow(breakpoint) {
+    return unsafeCSS(mediaBelow(breakpoint));
+}
+/**
+ * {@link mediaFrom} as a value a Lit `css` template accepts :
+ * `@media ${cssFrom("tablet")} { … }`.
+ *
+ * @param breakpoint the breakpoint the range starts at.
+ * @returns the media condition.
+ */
+export function cssFrom(breakpoint) {
+    return unsafeCSS(mediaFrom(breakpoint));
+}

package/dist/utils/motion.utils.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A step of the shared `--eun-duration-*` scale declared by every theme
+ * stylesheet (`xs` 100ms, `s` 150ms, `m` 200ms, `l` 250ms, `xl` 300ms).
+ */
+export type MotionDuration = "xs" | "s" | "m" | "l" | "xl";
+/**
+ * A step of the shared `--eun-easing-*` tokens declared by every theme
+ * stylesheet (`default` is `ease`, `out` is `ease-out`).
+ */
+export type MotionEasing = "default" | "out";
+/**
+ * Converts a CSS time (`200ms`, `0.2s`) into milliseconds.
+ *
+ * @param raw the CSS time, as read off `getPropertyValue`.
+ * @returns the duration in ms, or `undefined` when `raw` is empty, not a
+ * number, or negative.
+ */
+export declare function cssTimeToMs(raw: string): number | undefined;
+/**
+ * The duration, in ms, of an animation driven from JS (Web Animations API,
+ * timers) : the component's own custom property when set, otherwise the
+ * shared `--eun-duration-<step>` token, otherwise `fallbackMs` when no
+ * theme stylesheet is loaded.
+ *
+ * @param el the element to read both custom properties off.
+ * @param property the component's own custom property, e.g.
+ * `--field-listbox-transition-duration`.
+ * @param step the `--eun-duration-*` step the component defaults to.
+ * @param fallbackMs the value used when neither property resolves.
+ */
+export declare function resolveDurationMs(el: Element, property: string, step: MotionDuration, fallbackMs: number): number;
+/**
+ * The timing function of an animation driven from JS : the shared
+ * `--eun-easing-<step>` token, or its plain CSS keyword when no theme
+ * stylesheet is loaded.
+ *
+ * @param el the element to read the token off.
+ * @param step the `--eun-easing-*` step to read, `default` if omitted.
+ */
+export declare function resolveEasing(el: Element, step?: MotionEasing): string;

package/dist/utils/motion.utils.js

@@ -0,0 +1,51 @@
+const EASING_FALLBACKS = {
+    default: "ease",
+    out: "ease-out",
+};
+/**
+ * Converts a CSS time (`200ms`, `0.2s`) into milliseconds.
+ *
+ * @param raw the CSS time, as read off `getPropertyValue`.
+ * @returns the duration in ms, or `undefined` when `raw` is empty, not a
+ * number, or negative.
+ */
+export function cssTimeToMs(raw) {
+    const value = raw.trim();
+    if (!value) {
+        return undefined;
+    }
+    const parsed = value.endsWith("ms")
+        ? Number.parseFloat(value)
+        : Number.parseFloat(value) * 1000;
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : undefined;
+}
+/**
+ * The duration, in ms, of an animation driven from JS (Web Animations API,
+ * timers) : the component's own custom property when set, otherwise the
+ * shared `--eun-duration-<step>` token, otherwise `fallbackMs` when no
+ * theme stylesheet is loaded.
+ *
+ * @param el the element to read both custom properties off.
+ * @param property the component's own custom property, e.g.
+ * `--field-listbox-transition-duration`.
+ * @param step the `--eun-duration-*` step the component defaults to.
+ * @param fallbackMs the value used when neither property resolves.
+ */
+export function resolveDurationMs(el, property, step, fallbackMs) {
+    const style = getComputedStyle(el);
+    return (cssTimeToMs(style.getPropertyValue(property)) ??
+        cssTimeToMs(style.getPropertyValue(`--eun-duration-${step}`)) ??
+        fallbackMs);
+}
+/**
+ * The timing function of an animation driven from JS : the shared
+ * `--eun-easing-<step>` token, or its plain CSS keyword when no theme
+ * stylesheet is loaded.
+ *
+ * @param el the element to read the token off.
+ * @param step the `--eun-easing-*` step to read, `default` if omitted.
+ */
+export function resolveEasing(el, step = "default") {
+    return (getComputedStyle(el).getPropertyValue(`--eun-easing-${step}`).trim() ||
+        EASING_FALLBACKS[step]);
+}

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

@@ -48,7 +48,7 @@ export declare function buildTints(primaryHex: EunomiaHexColor, isDark: boolean)
  * custom brand from two hex seed colors by composing `buildPalette` and
  * `buildTints` above, then writing every result straight onto
  * `document.documentElement`, both 11-step shade scales, their `on-*`
- * text colors, the transparent hover/active tokens, and the `-tint`
+ * text colors, the `alpha-*` tokens, and the `-tint`
  * neutrals. Everything else (grey scale, spacing, radius, shadows,
  * semantic state colors) still comes from whichever base theme class or
  * `data-theme` is already applied; this deliberately doesn't touch those.
@@ -70,6 +70,11 @@ export declare function initializeTheme(primary: EunomiaHexColor, secondary: Eun
 export interface EunomiaThemeCssOptions {
     surfaceColor?: EunomiaHexColor;
     darkSurfaceColor?: EunomiaHexColor;
+    darkSecondaryColor?: EunomiaHexColor;
+    inverseSurfaceColor?: EunomiaHexColor;
+    darkInverseSurfaceColor?: EunomiaHexColor;
+    textColor?: EunomiaHexColor;
+    darkTextColor?: EunomiaHexColor;
     fontFamily?: string;
     brand?: string;
 }

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

@@ -159,12 +159,12 @@ export function buildPalette(baseHex, isDark) {
         };
     });
 }
-const TRANSPARENT_TOKENS = [
-    { name: "bg-hover", alpha: 0.08 },
-    { name: "bg-active", alpha: 0.08 },
-    { name: "transparent", alpha: 0.2 },
-    { name: "transparent-hover", alpha: 0.3 },
-    { name: "transparent-active", alpha: 0.4 },
+const ALPHA_TOKENS = [
+    { name: "alpha-5", alpha: 0.05 },
+    { name: "alpha-10", alpha: 0.1 },
+    { name: "alpha-20", alpha: 0.2 },
+    { name: "alpha-30", alpha: 0.3 },
+    { name: "alpha-40", alpha: 0.4 },
 ];
 /**
  * 5% of the effective `primary-500` (already dark-accessible-adjusted in
@@ -204,25 +204,44 @@ export function buildTints(primaryHex, isDark) {
         contentPressedTint: mix(LIGHT_TINT_BASE.contentPressed, primary500, TINT_RATIO),
     };
 }
+/**
+ * The muted `--eun-text-secondary` for a custom text color: `text` mixed
+ * 30% toward `surface`, backed off in 5% steps until it still clears WCAG
+ * AA against that surface.
+ */
+function secondaryText(text, surface) {
+    let percent = 30;
+    let result = mix(text, surface, percent / 100);
+    while (contrastRatio(result, surface) < MIN_CONTRAST && percent > 0) {
+        percent -= 5;
+        result = mix(text, surface, percent / 100);
+    }
+    return result;
+}
 /**
  * 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.
+ * text colors, the `alpha-*` tokens, the surface color,
+ * the `-tint` neutrals, and `--eun-font-family`, the inverse surface and
+ * the text colors when they are passed. Shared by `initializeTheme` and `buildThemeCss`
+ * so the inline and the stylesheet output can never drift apart.
  */
-function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily) {
+function buildThemeTokens(primary, secondary, isDark, options) {
+    const { surfaceColor, fontFamily, darkSecondaryColor, inverseSurfaceColor, textColor, } = options;
     const tokens = [];
-    for (const [type, seed] of [
-        ["primary", primary],
-        ["secondary", secondary],
+    for (const [type, seed, checkDark] of [
+        ["primary", primary, isDark],
+        [
+            "secondary",
+            darkSecondaryColor ?? secondary,
+            isDark && !darkSecondaryColor,
+        ],
     ]) {
-        for (const shade of buildPalette(seed, isDark)) {
+        for (const shade of buildPalette(seed, checkDark)) {
             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) {
+        for (const token of ALPHA_TOKENS) {
             tokens.push([
                 `--eun-color-${type}-${token.name}`,
                 toRgba(seed, token.alpha),
@@ -230,6 +249,12 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
         }
     }
     tokens.push(["--eun-surface-color", surfaceColor]);
+    if (inverseSurfaceColor) {
+        tokens.push(["--eun-surface-inverse", inverseSurfaceColor], ["--eun-text-on-inverse", pickOnColor(inverseSurfaceColor)]);
+    }
+    if (textColor) {
+        tokens.push(["--eun-text-color", textColor], ["--eun-text-secondary", secondaryText(textColor, surfaceColor)]);
+    }
     if (fontFamily) {
         tokens.push(["--eun-font-family", fontFamily]);
     }
@@ -246,7 +271,7 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
  * custom brand from two hex seed colors by composing `buildPalette` and
  * `buildTints` above, then writing every result straight onto
  * `document.documentElement`, both 11-step shade scales, their `on-*`
- * text colors, the transparent hover/active tokens, and the `-tint`
+ * text colors, the `alpha-*` tokens, and the `-tint`
  * neutrals. Everything else (grey scale, spacing, radius, shadows,
  * semantic state colors) still comes from whichever base theme class or
  * `data-theme` is already applied; this deliberately doesn't touch those.
@@ -266,7 +291,10 @@ function buildThemeTokens(primary, secondary, isDark, surfaceColor, fontFamily)
  */
 export function initializeTheme(primary, secondary, isDark = false, surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, fontFamily) {
     const root = document.documentElement.style;
-    const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+    const tokens = buildThemeTokens(primary, secondary, isDark, {
+        surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
+        fontFamily,
+    });
     for (const [property, value] of tokens) {
         root.setProperty(property, value);
     }
@@ -283,9 +311,20 @@ export function initializeTheme(primary, secondary, isDark = false, surfaceColor
  * 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 { surfaceColor = "#ffffff", darkSurfaceColor = DARK_SURFACE, darkSecondaryColor, inverseSurfaceColor, darkInverseSurfaceColor = inverseSurfaceColor, textColor, darkTextColor, fontFamily, brand = "custom", } = options;
     const rule = (selector, isDark) => {
-        const tokens = buildThemeTokens(primary, secondary, isDark, isDark ? darkSurfaceColor : surfaceColor, fontFamily);
+        const tokens = buildThemeTokens(primary, secondary, isDark, {
+            surfaceColor: isDark ? darkSurfaceColor : surfaceColor,
+            fontFamily,
+            darkSecondaryColor: isDark ? darkSecondaryColor : undefined,
+            inverseSurfaceColor: isDark
+                ? darkInverseSurfaceColor
+                : inverseSurfaceColor,
+            textColor: isDark ? darkTextColor : textColor,
+        });
+        if (isDark && textColor && !darkTextColor) {
+            tokens.push(["--eun-text-color", "var(--eun-color-grey-800)"], ["--eun-text-secondary", "var(--eun-color-grey-700)"]);
+        }
         const body = tokens
             .map(([property, value]) => `  ${property}: ${value};`)
             .join("\n");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eunomia/elements",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.7",
   "description": "Eunomia the framework-agnostic web component design system",
   "type": "module",
   "homepage": "https://eunomia-ds.vercel.app",
@@ -25,10 +25,6 @@
       "types": "./dist/components/content/badge/badge.d.ts",
       "default": "./dist/components/content/badge/badge.js"
     },
-    "./breadcrumb-item.js": {
-      "types": "./dist/components/navigation/breadcrumb/breadcrumb-item.d.ts",
-      "default": "./dist/components/navigation/breadcrumb/breadcrumb-item.js"
-    },
     "./breadcrumb.js": {
       "types": "./dist/components/navigation/breadcrumb/breadcrumb.d.ts",
       "default": "./dist/components/navigation/breadcrumb/breadcrumb.js"
@@ -81,6 +77,10 @@
       "types": "./dist/components/form/date-picker/date-picker.d.ts",
       "default": "./dist/components/form/date-picker/date-picker.js"
     },
+    "./description-list.js": {
+      "types": "./dist/components/content/description-list/description-list.d.ts",
+      "default": "./dist/components/content/description-list/description-list.js"
+    },
     "./divider.js": {
       "types": "./dist/components/layout/divider/divider.d.ts",
       "default": "./dist/components/layout/divider/divider.js"
@@ -169,6 +169,10 @@
       "types": "./dist/components/form/radio/radio.d.ts",
       "default": "./dist/components/form/radio/radio.js"
     },
+    "./rating.js": {
+      "types": "./dist/components/form/rating/rating.d.ts",
+      "default": "./dist/components/form/rating/rating.js"
+    },
     "./scheduler-event-editor.js": {
       "types": "./dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.d.ts",
       "default": "./dist/features/scheduler/scheduler-event-editor/scheduler-event-editor.js"
@@ -233,26 +237,6 @@
       "types": "./dist/features/table/table-action-bar/table-action-bar.d.ts",
       "default": "./dist/features/table/table-action-bar/table-action-bar.js"
     },
-    "./table-cell.js": {
-      "types": "./dist/features/table/table-cell/table-cell.d.ts",
-      "default": "./dist/features/table/table-cell/table-cell.js"
-    },
-    "./table-column.js": {
-      "types": "./dist/features/table/table-column/table-column.d.ts",
-      "default": "./dist/features/table/table-column/table-column.js"
-    },
-    "./table-header.js": {
-      "types": "./dist/features/table/table-header/table-header.d.ts",
-      "default": "./dist/features/table/table-header/table-header.js"
-    },
-    "./table-item.js": {
-      "types": "./dist/features/table/table-item/table-item.d.ts",
-      "default": "./dist/features/table/table-item/table-item.js"
-    },
-    "./table-skeleton-row.js": {
-      "types": "./dist/features/table/table-skeleton-row/table-skeleton-row.d.ts",
-      "default": "./dist/features/table/table-skeleton-row/table-skeleton-row.js"
-    },
     "./table.js": {
       "types": "./dist/features/table/table/table.d.ts",
       "default": "./dist/features/table/table/table.js"
@@ -301,19 +285,42 @@
       "types": "./dist/utils/theme-generator.utils.d.ts",
       "default": "./dist/utils/theme-generator.utils.js"
     },
+    "./breakpoints.js": {
+      "types": "./dist/breakpoints.d.ts",
+      "default": "./dist/breakpoints.js"
+    },
     "./jsx": {
       "types": "./dist/jsx.d.ts",
       "default": "./dist/jsx.js"
     },
     "./styles/*": "./styles/*",
     "./cdn/*": "./dist/cdn/*",
+    "./alert-ssr.css": "./dist/ssr/alert-ssr.css",
     "./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",
+    "./badge-ssr.css": "./dist/ssr/badge-ssr.css",
+    "./breadcrumb-ssr.css": "./dist/ssr/breadcrumb-ssr.css",
+    "./button-ssr.css": "./dist/ssr/button-ssr.css",
+    "./card-ssr.css": "./dist/ssr/card-ssr.css",
+    "./carousel-ssr.css": "./dist/ssr/carousel-ssr.css",
+    "./checkbox-ssr.css": "./dist/ssr/checkbox-ssr.css",
+    "./chip-ssr.css": "./dist/ssr/chip-ssr.css",
+    "./collapse-ssr.css": "./dist/ssr/collapse-ssr.css",
+    "./description-list-ssr.css": "./dist/ssr/description-list-ssr.css",
+    "./field-ssr.css": "./dist/ssr/field-ssr.css",
+    "./icon-ssr.css": "./dist/ssr/icon-ssr.css",
+    "./image-carousel-ssr.css": "./dist/ssr/image-carousel-ssr.css",
     "./links-ssr.css": "./dist/ssr/links-ssr.css",
+    "./overlay-ssr.css": "./dist/ssr/overlay-ssr.css",
+    "./pagination-ssr.css": "./dist/ssr/pagination-ssr.css",
+    "./rating-ssr.css": "./dist/ssr/rating-ssr.css",
     "./rich-text.css": "./dist/ssr/rich-text.css",
-    "./native-table.css": "./dist/features/table/native-table.css"
+    "./sidebar-ssr.css": "./dist/ssr/sidebar-ssr.css",
+    "./skeleton-ssr.css": "./dist/ssr/skeleton-ssr.css",
+    "./table-ssr.css": "./dist/ssr/table-ssr.css",
+    "./tabs-ssr.css": "./dist/ssr/tabs-ssr.css",
+    "./tag-ssr.css": "./dist/ssr/tag-ssr.css",
+    "./toggle-group-ssr.css": "./dist/ssr/toggle-group-ssr.css",
+    "./toolbar-ssr.css": "./dist/ssr/toolbar-ssr.css"
   },
   "files": [
     "dist",
@@ -326,12 +333,13 @@
     "./dist/features/**/*.js"
   ],
   "scripts": {
-    "build": "tsc --noEmit",
+    "build": "tsc --noEmit -p tsconfig.build.json",
     "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",
+    "lint": "eslint . --config ../eslint.config.js && node scripts/breakpoints.mjs --check",
+    "breakpoints": "node scripts/breakpoints.mjs",
     "test": "web-test-runner --config ../web-test-runner.config.mjs",
     "test:coverage": "web-test-runner --config ../web-test-runner.config.mjs --coverage"
   },

package/styles/breakpoints.scss

@@ -0,0 +1,8 @@
+// Short entry point for the breakpoints : the `eunomia-below-*` and
+// `eunomia-from-*` mixins, and the `$map-device-width` scale they read.
+//
+//   @use "@eunomia/elements/styles/breakpoints" as *;
+//
+// Emits no CSS, so it can be used in every stylesheet that needs it.
+@forward "./tools/mixins/media-queries/eunomia-media-queries.mixin.scss";
+@forward "./tools/variables/eunomia.breakpoints.scss";

package/styles/eunomia-grid.scss

@@ -0,0 +1,6 @@
+// Grid utility classes, emitted once at the top level. Every theme entry
+// file uses this module, and Sass outputs a module's CSS only once per
+// compilation, so loading several themes never duplicates the classes.
+@use "./tools/mixins/layout/eunomia-grid.mixin.scss" as *;
+
+@include eunomia-grid-layouts();

package/styles/themes/eunomia-theme.scss

@@ -1,5 +1,6 @@
-@use './../tools/indexes/eunomia-tools.index.scss' as *;
-@use './mixins/eunomia-scales.mixin.scss' as *;
+@use "./../tools/indexes/eunomia-tools.index.scss" as *;
+@use "./mixins/eunomia-scales.mixin.scss" as *;
+@use "./../eunomia-grid.scss";
 
 @mixin default-settings {
   @include eunomia-font-family();
@@ -9,10 +10,10 @@
   @include eunomia-border-radius();
   @include eunomia-border-width();
   @include eunomia-shadows();
+  @include eunomia-motion();
   @include eunomia-alpha();
   @include eunomia-height();
   @include eunomia-breakpoints();
-  @include eunomia-grid-layouts();
 }
 
 .eunomia-theme {

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

@@ -48,7 +48,10 @@
   $result: $color;
   $guard: 0;
 
-  @while eunomia-contrast-ratio($result, $surface) < $min-contrast and $guard < 60
+  @while eunomia-contrast-ratio($result, $surface) <
+    $min-contrast and
+    $guard <
+    60
   {
     $result: color.adjust($result, $lightness: $step, $space: hsl);
     $guard: $guard + 1;
@@ -64,3 +67,33 @@
 
   @return rgb($r, $g, $b);
 }
+
+@function eunomia-light-accessible(
+  $color,
+  $surface: #ffffff,
+  $min-contrast: 4.5,
+  $min-lightness: 10%,
+  $step: 1.5%
+) {
+  $result: $color;
+  $guard: 0;
+
+  @while eunomia-contrast-ratio($result, $surface) <
+    $min-contrast and
+    $guard <
+    60
+  {
+    $result: color.adjust($result, $lightness: -$step, $space: hsl);
+    $guard: $guard + 1;
+
+    @if color.channel($result, "lightness", $space: hsl) <= $min-lightness {
+      $guard: 60;
+    }
+  }
+
+  $r: math.round(color.channel($result, "red"));
+  $g: math.round(color.channel($result, "green"));
+  $b: math.round(color.channel($result, "blue"));
+
+  @return rgb($r, $g, $b);
+}

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

@@ -32,6 +32,8 @@
   --eun-text-disabled-color: #8d93aa;
   --eun-text-readonly-color: #c1c9d6;
   --eun-disabled-content: #c1c9d6;
+  --eun-surface-inverse: #0b1620;
+  --eun-text-on-inverse: #f5f7fa;
 }
 
 @mixin eunomia-dark-neutrals {
@@ -68,4 +70,6 @@
   --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-inverse: #0b1620;
+  --eun-text-on-inverse: #f5f7fa;
 }

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

@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "./eunomia-a11y-color.mixin.scss" as *;
 
 @mixin eunomia-all-states {
@@ -12,40 +13,63 @@
   --eun-color-warning-100: #{eunomia-dark-accessible(#c85207)};
   --eun-color-critical-100: #{eunomia-dark-accessible(#aa0014)};
   --eun-color-info-100: #{eunomia-dark-accessible(#097faf)};
+  --eun-color-success-text: var(--eun-color-success-100);
+  --eun-color-warning-text: var(--eun-color-warning-100);
+  --eun-color-critical-text: var(--eun-color-critical-100);
+  --eun-color-info-text: var(--eun-color-info-100);
+}
+
+@function -eunomia-state-text($base) {
+  @return eunomia-light-accessible(
+    $base,
+    $surface: color.mix($base, #ffffff, 5%)
+  );
 }
 
 @mixin eunomia-success {
   $base: #1a9948;
 
   --eun-color-success-100: #{$base};
-  --eun-color-success-90: #{rgba($base, 0.32)};
-  --eun-color-success-50: #{rgba($base, 0.16)};
-  --eun-color-success-30: #{rgba($base, 0.06)};
+  --eun-color-success-text: #{-eunomia-state-text($base)};
+  --eun-color-success-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-success-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-success-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-success-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-success-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-warning {
   $base: #c85207;
 
   --eun-color-warning-100: #{$base};
-  --eun-color-warning-90: #{rgba($base, 0.32)};
-  --eun-color-warning-50: #{rgba($base, 0.16)};
-  --eun-color-warning-30: #{rgba($base, 0.06)};
+  --eun-color-warning-text: #{-eunomia-state-text($base)};
+  --eun-color-warning-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-warning-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-warning-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-warning-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-warning-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-critical {
   $base: #aa0014;
 
   --eun-color-critical-100: #{$base};
-  --eun-color-critical-90: #{rgba($base, 0.32)};
-  --eun-color-critical-50: #{rgba($base, 0.16)};
-  --eun-color-critical-30: #{rgba($base, 0.06)};
+  --eun-color-critical-text: #{-eunomia-state-text($base)};
+  --eun-color-critical-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-critical-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-critical-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-critical-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-critical-alpha-40: #{rgba($base, 0.4)};
 }
 
 @mixin eunomia-info {
   $base: #097faf;
 
   --eun-color-info-100: #{$base};
-  --eun-color-info-90: #{rgba($base, 0.32)};
-  --eun-color-info-50: #{rgba($base, 0.16)};
-  --eun-color-info-30: #{rgba($base, 0.06)};
+  --eun-color-info-text: #{-eunomia-state-text($base)};
+  --eun-color-info-alpha-5: #{rgba($base, 0.05)};
+  --eun-color-info-alpha-10: #{rgba($base, 0.1)};
+  --eun-color-info-alpha-20: #{rgba($base, 0.2)};
+  --eun-color-info-alpha-30: #{rgba($base, 0.3)};
+  --eun-color-info-alpha-40: #{rgba($base, 0.4)};
 }