asma-ui-core 3.78.3 → 3.78.5

package/dist/components/custom/pathfinder-card/PathfinderCard.js

@@ -1,19 +1,18 @@
-import { cn as b } from "../../../helpers/cn.js";
-import { ChevronDownIcon as F } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
-import { ChevronUpIcon as O } from "../../icons/chevron-up-icon/ChevronUpIcon.js";
+import { cn as C } from "../../../helpers/cn.js";
+import { ChevronDownIcon as j } from "../../icons/chevron-down-icon/ChevronDownIcon.js";
+import { ChevronUpIcon as z } from "../../icons/chevron-up-icon/ChevronUpIcon.js";
 import h from "./Pathfinder.module.js";
-import { useCallback as I, useEffect as M, useLayoutEffect as j, useMemo as y, useRef as R, useState as x, useSyncExternalStore as P } from "react";
-import { Fragment as D, jsx as e, jsxs as k } from "react/jsx-runtime";
-var _ = typeof window < "u" ? j : M;
+import { useCallback as R, useEffect as M, useLayoutEffect as O, useMemo as y, useRef as k, useState as x, useSyncExternalStore as P } from "react";
+import { Fragment as D, jsx as e, jsxs as I } from "react/jsx-runtime";
+var _ = typeof window < "u" ? O : M;
 function q() {
-  const [i, n] = x(null), d = I((t) => {
+  const [i, n] = x(null), d = R((t) => {
     n(t);
-  }, []), s = I(() => i ? Math.floor(i.getBoundingClientRect().width) : 0, [i]);
+  }, []), s = R(() => i ? Math.floor(i.getBoundingClientRect().width) : 0, [i]);
   return {
     ref: d,
-    width: P(I((t) => {
+    width: P(R((t) => {
       if (!i || typeof ResizeObserver > "u") return () => {
-        console.log("Node is missing or ResizeObserver is undefined");
       };
       let a = 0;
       const o = new ResizeObserver(() => {
@@ -32,15 +31,15 @@ function A(i) {
   });
 }
 function K(i) {
-  const { items: n, leadSlot: d, actionSlot: s } = i, t = R({}), a = R(null), o = R(null), [l, v] = x({
+  const { items: n, leadSlot: d, actionSlot: s } = i, t = k({}), a = k(null), o = k(null), [l, v] = x({
     itemWidths: {},
     leadWidth: 0,
     actionWidth: 0
-  }), f = R(l);
+  }), f = k(l);
   M(() => {
     f.current = l;
   }, [l]);
-  const p = I((r) => (m) => {
+  const p = R((r) => (m) => {
     t.current[r] = m;
   }, []);
   return _(() => {
@@ -76,7 +75,7 @@ function U(i) {
   }
   return a;
 }
-function C({ item: i, compact: n }) {
+function b({ item: i, compact: n }) {
   return /* @__PURE__ */ e(D, { children: i.render({ compact: n }) });
 }
 function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot: t, className: a, leadReservePx: o = 140, actionReservePx: l = 44 }) {
@@ -86,10 +85,10 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
     actionSlot: t
   }), w = y(() => {
     if (n) return r;
-    const c = 24, L = 24, z = s ? Math.max(o, m.leadWidth + 12) : 0, B = t ? Math.max(l, m.actionWidth) : 0;
+    const c = 24, L = 24, B = s ? Math.max(o, m.leadWidth + 12) : 0, F = t ? Math.max(l, m.actionWidth) : 0;
     return U({
       items: r,
-      availableWidth: Math.max(0, f - c - L - z - B - 24),
+      availableWidth: Math.max(0, f - c - L - B - F - 24),
       gapPx: 12,
       itemWidths: m.itemWidths
     });
@@ -103,9 +102,9 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
     l,
     m
   ]), N = p && w.length < Math.min(2, r.length), E = N ? r.slice(0, 2) : w;
-  return /* @__PURE__ */ k("div", {
+  return /* @__PURE__ */ I("div", {
     ref: v,
-    className: b(h.root, p ? "overflow-hidden" : "overflow-visible", a),
+    className: C(h.root, p ? "overflow-hidden" : "overflow-visible", a),
     "aria-expanded": n,
     role: "button",
     tabIndex: 0,
@@ -114,27 +113,27 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
       (c.key === "Enter" || c.key === " ") && (c.preventDefault(), d());
     },
     children: [
-      /* @__PURE__ */ k("div", {
-        className: b(h.shell, p ? h.shellCompact : h.shellExpanded),
+      /* @__PURE__ */ I("div", {
+        className: C(h.shell, p ? h.shellCompact : h.shellExpanded),
         children: [s ? /* @__PURE__ */ e("div", {
           className: "shrink-0",
           children: s
         }) : null, /* @__PURE__ */ e("div", {
           className: h.content,
           children: p ? /* @__PURE__ */ e("div", {
-            className: b(h.compactItems, N && h.compactItemsStacked),
+            className: C(h.compactItems, N && h.compactItemsStacked),
             children: E.map((c) => /* @__PURE__ */ e("div", {
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(C, {
+              children: /* @__PURE__ */ e(b, {
                 item: c,
                 compact: p
               })
             }, c.id))
-          }) : /* @__PURE__ */ k("div", {
+          }) : /* @__PURE__ */ I("div", {
             className: h.expandedItems,
             children: [r.map((c) => /* @__PURE__ */ e("div", {
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(C, {
+              children: /* @__PURE__ */ e(b, {
                 item: c,
                 compact: p
               })
@@ -150,12 +149,12 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
       }),
       /* @__PURE__ */ e("div", {
         className: h.chevron,
-        children: n ? /* @__PURE__ */ e(O, { className: "size-6" }) : /* @__PURE__ */ e(F, { className: "size-6" })
+        children: n ? /* @__PURE__ */ e(z, { className: "size-6" }) : /* @__PURE__ */ e(j, { className: "size-6" })
       }),
       /* @__PURE__ */ e("div", {
         "aria-hidden": !0,
         className: h.measureLayer,
-        children: /* @__PURE__ */ k("div", {
+        children: /* @__PURE__ */ I("div", {
           className: h.measureRow,
           children: [
             s ? /* @__PURE__ */ e("div", {
@@ -168,7 +167,7 @@ function Y({ items: i, expanded: n, onToggleExpanded: d, leadSlot: s, actionSlot
             r.map((c) => /* @__PURE__ */ e("div", {
               ref: g(c.id),
               className: "shrink-0 whitespace-nowrap",
-              children: /* @__PURE__ */ e(C, {
+              children: /* @__PURE__ */ e(b, {
                 item: c,
                 compact: !0
               })

package/dist/src/a11y/contrast/contrastPairs.d.ts

@@ -0,0 +1,110 @@
+/**
+ * The colour pairs this library actually puts on screen, as a data table.
+ *
+ * Every row cites the component file that pairs the two tokens, so a reviewer can check the claim
+ * without trusting the table. Tokens are cited by NAME, never by line number — `src/styles/**` is
+ * ASMA-8133's area and its line numbers move.
+ *
+ * Rows with a `finding` are measured failures against master. They are quarantined, not fixed:
+ * changing a token value is a visual (potentially breaking) change to a brand theme and needs
+ * design sign-off, so each one is written up in `docs/a11y-contrast.md` and escalated instead.
+ *
+ * @see docs/a11y-contrast.md — findings register, exemption rationale, measured ratios
+ * @see docs/a11y-allowlist.md — the axe (SC 1.4.3 only) story baseline this cross-references
+ */
+/**
+ * The surface the library composites onto when a token is `transparent`, and the surface an
+ * unparented control is assumed to sit on. The library ships no page-background token; every
+ * component that sets its own opaque surface (input, tooltip, chip) uses white or a delta tint.
+ */
+export declare const APP_SURFACE = "#ffffff";
+export declare const REQUIREMENT_RATIO: {
+    /** SC 1.4.3, body text below 18.66px bold / 24px regular. */
+    readonly text: 4.5;
+    /** SC 1.4.3, large text at or above that size. */
+    readonly largeText: 3;
+    /** SC 1.4.11, UI component boundaries, state indicators and focus rings. */
+    readonly nonText: 3;
+};
+export type ContrastRequirement = keyof typeof REQUIREMENT_RATIO;
+export interface ContrastPair {
+    /** Stable id. Quarantined rows use it to join to `docs/a11y-contrast.md`. */
+    readonly id: string;
+    /** Custom-property name, or a literal colour for a hard-coded component value. */
+    readonly foreground: string;
+    readonly background: string;
+    readonly requirement: ContrastRequirement;
+    /** Repo-relative path of the component that pairs these two. */
+    readonly usedBy: string;
+    /** Findings id in docs/a11y-contrast.md. Present means "measured failing, quarantined". */
+    readonly finding?: string;
+}
+/**
+ * Hand-curated pairs. The button token family is generated instead — see `buildButtonPairs`.
+ */
+export declare const COMPONENT_PAIRS: readonly ContrastPair[];
+/**
+ * `StyledButton.module.scss` builds every button from a single mixin over
+ * `--colors-button-{type}-{color}-{state}-{text|bg|border}-color`, so the button pairs are
+ * generated from the token names rather than transcribed. A new variant or state added to the
+ * token files is contrast-checked the moment it lands, with no edit here.
+ */
+export declare const BUTTON_TYPES: readonly ["contained", "outlined", "text", "textGray", "textWhite"];
+export declare const BUTTON_COLORS: readonly ["common", "error"];
+/**
+ * `disabled` is deliberately absent. SC 1.4.3 exempts "text ... that is part of an inactive user
+ * interface component", and 1.4.11 exempts inactive components in the same words. See the
+ * exemptions section of docs/a11y-contrast.md.
+ */
+export declare const BUTTON_STATES: readonly ["base", "hover", "active", "focused"];
+export type ButtonType = (typeof BUTTON_TYPES)[number];
+export type ButtonState = (typeof BUTTON_STATES)[number];
+export interface ButtonTokenNames {
+    readonly text: string;
+    readonly background: string;
+    readonly border: string;
+}
+export declare const buttonTokenNames: (type: ButtonType, color: (typeof BUTTON_COLORS)[number], state: ButtonState) => ButtonTokenNames;
+/**
+ * Types whose boundary is a designed, always-present edge. `text` / `textGray` are borderless by
+ * design — the label carries the affordance and is held to 4.5:1, which is what SC 1.4.11's
+ * "visual information required to identify user interface components" asks for. `textWhite` is
+ * excluded from contrast assertions entirely: it is white-on-transparent, meant to be placed on a
+ * consumer-supplied dark surface this package never sees. Documented in docs/a11y-contrast.md.
+ */
+export declare const BUTTON_TYPES_WITH_BOUNDARY: readonly ButtonType[];
+export declare const BUTTON_TYPES_WITHOUT_KNOWN_SURFACE: readonly ButtonType[];
+/**
+ * Button pairs that fail against master, keyed `{type}/{color}/{state}/{aspect}`.
+ *
+ * `text-on-tinted-hover` (F-12): outlined/text/textGray put gama-500 on a gama-50 or gama-100 tint
+ * at hover and active, which drops the label under 4.5:1 in every theme.
+ * `boundary-focus` (F-07): the focus border is gama-400 everywhere, which is under 3:1 on white in
+ * default and fretex.
+ * `boundary-outlined-hover` (F-13): outlined's hover/active border is gama-300, under 3:1 in all
+ * three themes.
+ * `outlined/error/focused/text` (F-16): white label on a beta-100 tint, 1.27:1 in every theme.
+ * The error/focused boundary rows (F-15): the border points at `--colors-beta-400`, which no theme
+ * defines, so `default` and `greenish` render no focus border at all; `fretex` overrides it to
+ * gama-400 and lands at 2.24:1, which is F-07's root cause again.
+ */
+export declare const BUTTON_FINDINGS: Readonly<Record<string, string>>;
+/**
+ * Regression floors for the quarantined pairs: the ratio each one measures on master, per theme.
+ *
+ * A quarantined pair is asserted against its floor rather than against the WCAG threshold, so the
+ * suite still detects *decay* on an already-failing pair while staying green if ASMA-8133 or a
+ * design fix legitimately *improves* the number. This is a characterization test — the floor is a
+ * record of the status quo, not a standard. The real target stays in docs/a11y-contrast.md against
+ * the finding id, and lifting a quarantine means deleting the pair's `finding` key so the live SC
+ * assertion takes over.
+ *
+ * `null` means the pair has no computed value at all — see F-15, where the `var()` chain is
+ * dangling so the browser drops the declaration outright. A floor is meaningless there, so those
+ * stay skipped.
+ *
+ * Values are produced by `contrastRatio`, which already truncates to two decimals, so the floor and
+ * the measurement are byte-identical and the comparison needs no epsilon. Regenerate after
+ * ASMA-8133 lands.
+ */
+export declare const REGRESSION_FLOORS: Readonly<Record<string, Readonly<Record<string, number | null>>>>;

package/dist/src/a11y/contrast/themeContrast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/a11y/contrast/themeTokens.d.ts

@@ -0,0 +1,36 @@
+/** The theme every other theme layers on top of; selected by `:root`, not by a `data-theme` value. */
+export declare const DEFAULT_THEME = "default";
+export type ThemeName = string;
+/**
+ * Every theme the stylesheets define, discovered rather than listed, so adding a fourth theme file
+ * automatically brings it into the contrast matrix instead of silently going unchecked.
+ */
+export declare const discoverThemeNames: () => ThemeName[];
+export declare class TokenResolutionError extends Error {
+}
+/**
+ * Follows a `var()` chain to a literal. `var(--a, fallback)` uses the fallback only when `--a` is
+ * undefined, matching CSS. A cycle or a missing terminal value throws rather than resolving to
+ * something plausible — a contrast suite that silently treats an unresolvable token as black would
+ * report passes it has not earned.
+ */
+export declare const resolveDeclaration: (declarations: ReadonlyMap<string, string>, value: string, seen?: ReadonlySet<string>) => string;
+export interface UnresolvableToken {
+    readonly property: string;
+    readonly reason: string;
+}
+export interface ThemeResolution {
+    readonly resolved: Map<string, string>;
+    /**
+     * Properties whose `var()` chain never reaches a literal. At runtime the browser treats these
+     * as invalid at computed-value time, so the declaration is dropped entirely and the element
+     * falls back to the inherited or initial value — i.e. the styling the token file *says* it
+     * applies is silently not applied. Worth a test of its own.
+     */
+    readonly unresolvable: UnresolvableToken[];
+}
+export declare const resolveTheme: (theme: ThemeName) => ThemeResolution;
+/** Every custom property that applies to `theme`, resolved to a literal value. */
+export declare const resolveThemeTokens: (theme: ThemeName) => Map<string, string>;
+/** `resolveThemeTokens` for every discovered theme, keyed by theme name. */
+export declare const resolveAllThemes: () => Map<ThemeName, Map<string, string>>;

package/dist/src/a11y/contrast/themeTokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/a11y/contrast/wcagContrast.d.ts

@@ -0,0 +1,32 @@
+/**
+ * WCAG 2.2 contrast maths, kept dependency-free and side-effect-free so it can be exercised from a
+ * plain node-environment vitest run (the `unit` project in vite.config.ts) with no DOM.
+ *
+ * Only the colour notations the theme CSS actually uses are supported — `#rgb` / `#rgba` /
+ * `#rrggbb` / `#rrggbbaa`, `rgb()` / `rgba()` (comma or space separated), and the `white` / `black`
+ * / `transparent` keywords. Anything else returns `null` rather than guessing, so an unparsed value
+ * surfaces as a loud failure instead of a silently-skipped assertion.
+ *
+ * @see https://www.w3.org/TR/WCAG22/#dfn-relative-luminance
+ * @see https://www.w3.org/TR/WCAG22/#dfn-contrast-ratio
+ */
+export interface Rgba {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    /** 0–1. */
+    readonly a: number;
+}
+export declare const parseCssColor: (value: string) => Rgba | null;
+/** Source-over compositing. `backdrop` must be opaque; the result always is. */
+export declare const compositeOver: (source: Rgba, backdrop: Rgba) => Rgba;
+export declare const relativeLuminance: ({ r, g, b }: Rgba) => number;
+/**
+ * Contrast ratio of two opaque colours, truncated to two decimals.
+ *
+ * Truncated rather than rounded, for two reasons. It is conservative at the threshold — rounding
+ * would report a true 4.4951:1 as "4.5" and let a failing pair through — and it is what axe-core
+ * reports, so a ratio quoted in docs/a11y-contrast.md is digit-for-digit the same number as the
+ * one in the axe baseline in docs/a11y-allowlist.md.
+ */
+export declare const contrastRatio: (first: Rgba, second: Rgba) => number;

package/dist/src/a11y/contrast/wcagContrast.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/tokens.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -3,7 +3,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "version": "3.78.3",
+    "version": "3.78.5",
     "type": "module",
     "sideEffects": [
         "**/*.css",

package/src/styles/color-variables/defaultTokens.css

@@ -6,6 +6,17 @@
     --colors-alpha-600: var(--colors-blue-600);
     --colors-alpha-700: var(--colors-blue-700);
     --colors-beta-100: var(--colors-red-100);
+    /* Focus-indicator shade for the three error-button *-focused-border-color rules.
+       Chosen by measurement on the rendered baseline, not by ramp position:
+         2.4.7  Focus Visible   (AA)  PASS - a ring renders where contained/outlined/text
+                                             previously painted none.
+         1.4.11 Non-text Contrast(AA) PASS - contained 8.37:1 against white on both sides
+                                             (a 1px white inset separates it from the fill,
+                                             itself 4.96:1); outlined and text 8.37:1 vs
+                                             page and 6.56:1 vs fill.
+         2.4.13 Focus Appearance(AAA) not claimed, outside this library's AA scope.
+       See docs/a11y-contrast.md (F-15) for the derivation and per-theme numbers. */
+    --colors-beta-400: var(--colors-red-700);
     --colors-beta-500: var(--colors-red-500);
     --colors-beta-600: var(--colors-red-600);
     --colors-beta-700: var(--colors-red-700);

package/src/styles/color-variables/fretexTokens.css

@@ -178,8 +178,8 @@
     --colors-button-textWhite-common-disabled-bg-color: transparent;
     --colors-button-textWhite-common-disabled-border-color: transparent;
 
-    --colors-colors-btn-bg-mini-action: var(--colors-zinc-100);
-    --colors-colors-btn-bg-mini-action-hover: var(--colors-gama-700);
+    --colors-btn-bg-mini-action: var(--colors-zinc-100);
+    --colors-btn-bg-mini-action-hover: var(--colors-gama-700);
     --colors-link-text-hover: var(--colors-red-700);
     --colors-link-text-standart: var(--colors-gray-500);
     --colors-link-text-active: var(--colors-red-700);
@@ -188,7 +188,7 @@
     --colors-app-directory-button-select-recipient-bg: var(--colors-slate-500);
     --colors-btn-task-status-bg: var(--colors-green-100);
     --colors-chat-ticket-message-bg: var(--colors-alpha-500);
-    --colors-colors-topbar-text: #ffffff;
+    --colors-topbar-text: #ffffff;
 
     --colors-menu-text-active: var(--colors-beta-700);
 }

package/src/styles/color-variables/jadeTokens.css

@@ -1,5 +1,16 @@
 [data-theme='greenish'] {
     --colors-beta-100: var(--colors-red-100);
+    /* Focus-indicator shade for the three error-button *-focused-border-color rules.
+       Chosen by measurement on the rendered baseline, not by ramp position:
+         2.4.7  Focus Visible   (AA)  PASS - a ring renders where contained/outlined/text
+                                             previously painted none.
+         1.4.11 Non-text Contrast(AA) PASS - contained 8.37:1 against white on both sides
+                                             (a 1px white inset separates it from the fill,
+                                             itself 4.96:1); outlined and text 8.37:1 vs
+                                             page and 6.56:1 vs fill.
+         2.4.13 Focus Appearance(AAA) not claimed, outside this library's AA scope.
+       See docs/a11y-contrast.md (F-15) for the derivation and per-theme numbers. */
+    --colors-beta-400: var(--colors-red-700);
     --colors-beta-500: var(--colors-red-500);
     --colors-beta-600: var(--colors-red-600);
     --colors-beta-700: var(--colors-red-700);

package/src/styles/components-colors/inputVariables.css

@@ -1,3 +1,12 @@
+/*
+ * Declared on :root as well as the theme blocks: a host page that renders without any
+ * data-theme attribute must still get valid --colors-input-* / --input-* values (otherwise every
+ * var() below is invalid-at-computed-value-time and StyledTextarea falls back to inherited or
+ * initial colors). All three themes share these values today, so listing :root alongside them is
+ * exact -- the theme selectors stay in place, and because they come later in the selector list
+ * they continue to win on equal specificity once a theme starts overriding a token.
+ */
+:root,
 [data-theme='default'],
 [data-theme='fretex'],
 [data-theme='greenish'] {
@@ -65,7 +74,7 @@
     --colors-input-notEditable-focus-bg-color: var(--colors-delta-50);
     --colors-input-notEditable-disabled-bg-color: var(--colors-delta-50);
     --colors-input-notEditable-text-color: var(--colors-delta-800);
-    --colors-input-active-hover-text-color: var(--colors-delta-800);
+    --colors-input-notEditable-hover-text-color: var(--colors-delta-800);
     --colors-input-notEditable-active-text-color: var(--colors-delta-800);
     --colors-input-notEditable-focus-text-color: var(--colors-delta-800);
     --colors-input-notEditable-disabled-text-color: var(--colors-delta-300);
@@ -95,10 +104,10 @@
     --colors-input-readOnly-focus-bg-color: transparent;
     --colors-input-readOnly-disabled-bg-color: transparent;
     --colors-input-readOnly-text-color: var(--colors-delta-800);
-    --colors-input-active-hover-text-color: var(--colors-delta-800);
+    --colors-input-readOnly-hover-text-color: var(--colors-delta-800);
     --colors-input-readOnly-active-text-color: var(--colors-delta-800);
     --colors-input-readOnly-focus-text-color: var(--colors-delta-800);
-    --colors-input-readOnly-active-text-color: var(--colors-delta-300);
+    --colors-input-readOnly-disabled-text-color: var(--colors-delta-300);
     --input-readOnly-cursor: text;
     --input-readOnly-hover-cursor: text;
     --input-readOnly-active-cursor: text;

package/tw-configs/twConfigs.json

@@ -37,7 +37,7 @@
         "delta-700": "var(--colors-delta-700)",
         "delta-800": "var(--colors-delta-800)",
         "delta-900": "var(--colors-delta-900)",
-        "delta-9000": "var(--colors-gray-9000)",
+        "delta-9000": "var(--colors-delta-9000)",
         "sigma-700": "var(--colors-sigma-700)",
         "theta-100": "var(--colors-theta-100)",
         "theta-200": "var(--colors-theta-200)",
@@ -83,11 +83,11 @@
         "btn-bg-mini-action-hover": "var(--colors-btn-bg-mini-action-hover)",
         "chat-ticket-message-bg": "var(--colors-chat-ticket-message-bg)",
         "colors-topbar-text": "var(--colors-topbar-text)",
-        "custom-grey-01": "hsl(var(--color-cardea--grey-01) / <alpha-value>)",
-        "custom-grey-02": "hsl(var(--color-cardea--grey-02) / <alpha-value>)",
-        "custom-grey-03": "hsl(var(--color-cardea--grey-03) / <alpha-value>)",
-        "custom-grey-04": "hsl(var(--color-cardea--grey-04) / <alpha-value>)",
-        "custom-grey-06": "hsl(var(--color-cardea--grey-06) / <alpha-value>)"
+        "custom-grey-01": "hsl(var(--colors-cardea--grey-01) / <alpha-value>)",
+        "custom-grey-02": "hsl(var(--colors-cardea--grey-02) / <alpha-value>)",
+        "custom-grey-03": "hsl(var(--colors-cardea--grey-03) / <alpha-value>)",
+        "custom-grey-04": "hsl(var(--colors-cardea--grey-04) / <alpha-value>)",
+        "custom-grey-06": "hsl(var(--colors-cardea--grey-06) / <alpha-value>)"
     },
     "boxShadow": {
         "ash": "-1px 8px 18px -20px black",