@techsio/ui-kit 0.54.0 → 0.54.1

package/dist/src/molecules/combobox.d.ts

@@ -2,7 +2,7 @@
  * Combobox — @techsio/ui-kit molecule.
  *
  * @component Combobox
- * @componentVersion v1.3.0
+ * @componentVersion v1.3.1
  * @skill combobox-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/molecules/date-picker.d.ts

@@ -2,7 +2,7 @@
  * DatePicker — @techsio/ui-kit molecule.
  *
  * @component DatePicker
- * @componentVersion v1.1.1
+ * @componentVersion v1.1.2
  * @skill date-picker-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  */

package/dist/src/molecules/file-upload.d.ts

@@ -2,7 +2,7 @@
  * FileUpload — @techsio/ui-kit molecule.
  *
  * @component FileUpload
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill file-upload-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/molecules/phone-input.d.ts

@@ -2,7 +2,7 @@
  * PhoneInput — @techsio/ui-kit molecule.
  *
  * @component PhoneInput
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill phone-input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/molecules/popover.d.ts

@@ -2,7 +2,7 @@
  * Popover — @techsio/ui-kit molecule.
  *
  * @component Popover
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill popover-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/molecules/radio-card.d.ts

@@ -2,7 +2,7 @@
  * RadioCard — @techsio/ui-kit molecule.
  *
  * @component RadioCard
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill radio-card-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/molecules/tour.d.ts

@@ -2,7 +2,7 @@
  * Tour — @techsio/ui-kit molecule.
  *
  * @component Tour
- * @componentVersion v1.0.2
+ * @componentVersion v1.0.3
  * @skill tour-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  */

package/dist/src/organisms/gallery.d.ts

@@ -2,7 +2,7 @@
  * Gallery — @techsio/ui-kit organism.
  *
  * @component Gallery
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill gallery-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/organisms/table.d.ts

@@ -2,7 +2,7 @@
  * Table — @techsio/ui-kit organism.
  *
  * @component Table
- * @componentVersion v1.2.0
+ * @componentVersion v1.2.1
  * @skill table-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/templates/accordion.d.ts

@@ -2,7 +2,7 @@
  * Accordion — @techsio/ui-kit template.
  *
  * @component Accordion
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill accordion-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/templates/gallery.d.ts

@@ -2,7 +2,7 @@
  * Gallery — @techsio/ui-kit template.
  *
  * @component Gallery
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill gallery-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/templates/numeric-input.d.ts

@@ -2,7 +2,7 @@
  * NumericInput — @techsio/ui-kit template.
  *
  * @component NumericInput
- * @componentVersion v1.1.0
+ * @componentVersion v1.1.1
  * @skill numeric-input-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/templates/popover.d.ts

@@ -2,7 +2,7 @@
  * Popover — @techsio/ui-kit template.
  *
  * @component Popover
- * @componentVersion v1.0.0
+ * @componentVersion v1.0.1
  * @skill popover-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/src/templates/select.d.ts

@@ -2,7 +2,7 @@
  * Select — @techsio/ui-kit template.
  *
  * @component Select
- * @componentVersion v1.1.0
+ * @componentVersion v1.1.1
  * @skill select-usage
  * @changelog libs/ui/stories/changelog/changelog.stories.tsx
  *

package/dist/stories/changelog/changelog.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA4StD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}
+{"version":3,"file":"changelog.stories.d.ts","sourceRoot":"","sources":["../../../stories/changelog/changelog.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AA0XtD,iBAAS,SAAS,4CAUjB;AAED,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAKhC,CAAA;AAED,eAAe,IAAI,CAAA;AAEnB,eAAO,MAAM,UAAU,EAAE,QAAQ,CAAC,OAAO,SAAS,CAAM,CAAA"}

package/dist/stories/templates/akros-product-card.stories.d.ts

@@ -0,0 +1,96 @@
+import type { StoryObj } from "@storybook/react";
+import { type ReactNode } from "react";
+import { type AvailabilityStatusProps } from "../../src/molecules/availability-status.js";
+import { type PriceBlockProps } from "../../src/molecules/price-block.js";
+import "./akros-product-card.css";
+type AkrosCardExampleProps = {
+    name: string;
+    description: string;
+    price: PriceBlockProps;
+    availability: AvailabilityStatusProps;
+    badgeLabel?: string;
+    imageAvailable: boolean;
+    action: "add" | "pending" | "disabled" | "detail" | "variants";
+    actionContent?: ReactNode;
+    onAddToCart: (quantity?: string) => void;
+};
+declare function AkrosCardExample({ name, description, price, availability, badgeLabel, imageAvailable, action, actionContent, onAddToCart, }: AkrosCardExampleProps): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: typeof AkrosCardExample;
+    tags: string[];
+    globals: {
+        brand: string;
+        mode: string;
+    };
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        name: {
+            control: "text";
+        };
+        description: {
+            control: "text";
+        };
+        price: {
+            control: "object";
+            description: string;
+        };
+        availability: {
+            control: "object";
+            description: string;
+        };
+        badgeLabel: {
+            control: "text";
+        };
+        imageAvailable: {
+            control: "boolean";
+        };
+        action: {
+            control: "select";
+            options: string[];
+        };
+        onAddToCart: {
+            control: false;
+        };
+        actionContent: {
+            control: false;
+            table: {
+                disable: true;
+            };
+        };
+    };
+    args: {
+        name: string;
+        description: string;
+        price: {
+            state: "known";
+            amountLabel: string;
+            taxLabel: string;
+            unitLabel: string;
+        };
+        availability: {
+            status: "available";
+            label: string;
+        };
+        imageAvailable: true;
+        action: "add";
+        onAddToCart: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<AkrosCardExampleProps>;
+export declare const Playground: Story;
+export declare const States: Story;
+export declare const PriceStates: Story;
+export declare const AvailabilityStates: Story;
+export declare const LongContent: Story;
+export declare const ResponsiveCatalog: Story;
+export declare const WithQuantityField: Story;
+//# sourceMappingURL=akros-product-card.stories.d.ts.map

package/dist/stories/templates/akros-product-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"akros-product-card.stories.d.ts","sourceRoot":"","sources":["../../../stories/templates/akros-product-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,KAAK,SAAS,EAAY,MAAM,OAAO,CAAA;AAQhD,OAAO,EAEN,KAAK,uBAAuB,EAC5B,MAAM,yCAAyC,CAAA;AAChD,OAAO,EAEN,KAAK,eAAe,EACpB,MAAM,iCAAiC,CAAA;AAGxC,OAAO,0BAA0B,CAAA;AAMjC,KAAK,qBAAqB,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,eAAe,CAAA;IACtB,YAAY,EAAE,uBAAuB,CAAA;IACrC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,OAAO,CAAA;IACvB,MAAM,EAAE,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC9D,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB,WAAW,EAAE,CAAC,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACxC,CAAA;AAED,iBAAS,gBAAgB,CAAC,EACzB,IAAI,EACJ,WAAW,EACX,KAAK,EACL,YAAY,EACZ,UAAU,EACV,cAAc,EACd,MAAM,EACN,aAAa,EACb,WAAW,GACX,EAAE,qBAAqB,2CA6FvB;AAED,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiD+B,CAAA;AAEzC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,qBAAqB,CAAC,CAAA;AAE5C,eAAO,MAAM,UAAU,EAAE,KAMxB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAiEpB,CAAA;AAoDD,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAA;AAsDD,eAAO,MAAM,kBAAkB,EAAE,KAoBhC,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAsBzB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KA6B/B,CAAA;AAqDD,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techsio/ui-kit",
-  "version": "0.54.0",
+  "version": "0.54.1",
   "license": "MIT",
   "type": "module",
   "repository": {

package/src/tokens/_base.css

@@ -5,9 +5,9 @@
   --radius-lg: 12px;
   --radius-full: 9999px;
 
-  --color-shadow-1: light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 1));
-  --color-shadow-2: light-dark(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 1));
-  --color-shadow-3: light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 1));
+  --color-shadow-1: light-dark(oklch(0% 0 none / 0.16), oklch(0% 0 none));
+  --color-shadow-2: light-dark(oklch(0% 0 none / 0.06), oklch(0% 0 none));
+  --color-shadow-3: light-dark(oklch(0% 0 none / 0.1), oklch(0% 0 none));
 
   --offset-shadow-1: 0px 1px 3px 0px;
   --offset-shadow-2: 0px 5px 6px 0px;
@@ -17,9 +17,16 @@
     var(--offset-shadow-1) var(--color-shadow-1), var(--offset-shadow-2)
     var(--color-shadow-2), var(--offset-shadow-3) var(--color-shadow-3);
 
+  /* Motion — strong ease-out for UI feedback, ease-in-out for on-screen
+   * movement. Never ease-in: it delays the response the user is waiting for. */
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --default-transition-timing-function: var(--ease-out);
+
   /* Shadows */
-  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
-  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
-  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px oklch(0% 0 none / 0.05);
+  --shadow-md: 0 4px 6px oklch(0% 0 none / 0.1);
+  --shadow-lg: 0 10px 15px oklch(0% 0 none / 0.1);
+  --shadow-xl:
+    0 20px 25px oklch(0% 0 none / 0.15), 0 10px 10px oklch(0% 0 none / 0.04);
 }

package/src/tokens/_reset.css

@@ -0,0 +1,66 @@
+/*
+ * Element defaults and interaction variants shared by every component.
+ * Based on the good-css.com reset, adopted rule by rule.
+ */
+
+/*
+ * Tailwind's built-in hover: only checks (hover: hover). Hybrid and touch
+ * devices still report it, so a tapped control keeps its hover colour until
+ * the next tap elsewhere. Requiring a fine pointer limits hover to mice and
+ * trackpads.
+ */
+@custom-variant hover {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @slot;
+    }
+  }
+}
+
+@layer base {
+  :root {
+    /* Lets height/width transition to and from `auto` (accordions, disclosures). */
+    interpolate-size: allow-keywords;
+    /* Reserve the scrollbar track so locking scroll for a dialog does not shift
+     * the page. Zag's scroll lock detects this and skips its padding fallback. */
+    scrollbar-gutter: stable;
+    /* Avoid single-word last lines in body copy. */
+    text-wrap: pretty;
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
+    /* Components draw their own :active state. */
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    text-wrap: balance;
+  }
+
+  /* Removes the double-tap-to-zoom delay on controls. */
+  :where(
+      a,
+      button,
+      label,
+      select,
+      summary,
+      [role="button"],
+      [role="option"],
+      [role="tab"],
+      input:is([type="checkbox"], [type="radio"])
+    ) {
+    touch-action: manipulation;
+  }
+}
+
+/*
+ * iOS Safari zooms the page into any focused field whose text is under 16px.
+ * The fluid --text-sm step drops below that on phones, so small fields floor
+ * at 16px. Unlayered so it wins over the Figma @theme values.
+ */
+:root {
+  --text-input-sm: max(16px, var(--text-sm));
+  --text-textarea-sm: max(16px, var(--text-sm));
+  --text-numeric-input-sm: max(16px, var(--text-sm));
+  --text-combobox-sm: max(16px, var(--text-sm));
+  --text-phone-input-sm: max(16px, var(--text-sm));
+}

package/src/tokens/_semantic.css

@@ -5,86 +5,76 @@
  * - --alpha(var(--color) / 50%): Adjusts transparency of a color. Tailwind's v4 utility
  *   that compiles to color-mix() for better browser support.
  */
+
+/*
+ * Theme-direction switch: 1 on light surfaces, -1 on dark ones. Every
+ * lightness offset below is written once and flips with it, so a dark
+ * surface lightens on hover where a light one darkens.
+ */
 :root {
-  --state-hover: -0.08;
-  --state-active: -0.12;
+  --theme-sign: 1;
   --state-disabled-chroma: 0.01;
   --state-light-variant: 0.1; /* Always make colors lighter for -light variant */
   --state-light-chroma: 0.6; /* Reduce saturation for softer, pastel colors */
-  --state-secondary-text: 0.15;
   --state-border: 15%;
-  --state-placeholder: 0.25;
   --max-lightness: 0.97;
   --opacity-disabled: 60%;
   --opacity-placeholder: 60%;
   --opacity-text-secondary: 70%;
   --opacity-disabled-placeholder: 30%;
   --fill-increment: 5%;
-  --surface-increment: 0.05;
-  --state-fg-lightness: 0.42; /* Accent color lightness for text - WCAG AAA on light bg */
+}
+
+/*
+ * Custom properties resolve where they are declared, so the derived offsets
+ * are re-declared on every element that can change --theme-sign.
+ */
+:where(:root, .light, .always-light, .dark, .always-dark, .reverse) {
+  --state-hover: calc(-0.08 * var(--theme-sign));
+  --state-active: calc(-0.12 * var(--theme-sign));
+  --state-secondary-text: calc(0.15 * var(--theme-sign));
+  --state-placeholder: calc(0.25 * var(--theme-sign));
+  --surface-increment: calc(0.05 * var(--theme-sign));
+  /* Accent text lightness: 0.42 on light (WCAG AAA), 0.85 on dark. */
+  --state-fg-lightness: calc(0.635 - 0.215 * var(--theme-sign));
+}
+
+/* Explicit Light class(es) — re-asserts light inside a nested .dark/.always-dark subtree */
+:is(.light, .always-light) {
+  --theme-sign: 1;
 }
 
 /* Explicit Dark class(es) */
 :is(.dark, .always-dark) {
-  --state-hover: 0.08;
-  --state-active: 0.12;
-  --state-secondary-text: -0.15;
-  --state-placeholder: -0.25;
-  --surface-increment: -0.05;
-  --state-fg-lightness: 0.85;
+  --theme-sign: -1;
 }
 
 /* System Dark preference (when no explicit class forces light) */
 @media (prefers-color-scheme: dark) {
   :root:not(.light):not(.always-light) {
-    --state-hover: 0.08;
-    --state-active: 0.12;
-    --state-secondary-text: -0.15;
-    --state-placeholder: -0.25;
-    --surface-increment: -0.05;
-    --state-fg-lightness: 0.85;
+    --theme-sign: -1;
   }
 }
 
-/* Reverse if parents has .always-light/dark and we want to make reverse style to parent */
+/* Reverse flips whatever its parent theme is. */
 :is(.light, .always-light) .reverse {
-  --state-hover: 0.08;
-  --state-active: 0.12;
-  --state-secondary-text: -0.15;
-  --state-placeholder: -0.25;
-  --surface-increment: -0.05;
-  --state-fg-lightness: 0.85;
+  --theme-sign: -1;
 }
 
 :is(.dark, .always-dark) .reverse {
-  --state-hover: -0.08;
-  --state-active: -0.12;
-  --state-secondary-text: 0.15;
-  --state-placeholder: 0.25;
-  --surface-increment: 0.05;
-  --state-fg-lightness: 0.42;
+  --theme-sign: 1;
 }
 
 /* Reverse on System Light/Dark preference (when no explicit theme class is present) */
 @media (prefers-color-scheme: light) {
   .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
-    --state-hover: 0.08;
-    --state-active: 0.12;
-    --state-secondary-text: -0.15;
-    --state-placeholder: -0.25;
-    --surface-increment: -0.05;
-    --state-fg-lightness: 0.85;
+    --theme-sign: -1;
   }
 }
 
 @media (prefers-color-scheme: dark) {
   .reverse:not(.dark):not(.always-dark):not(.light):not(.always-light) {
-    --state-hover: -0.08;
-    --state-active: -0.12;
-    --state-secondary-text: 0.15;
-    --state-placeholder: 0.25;
-    --surface-increment: 0.05;
-    --state-fg-lightness: 0.42;
+    --theme-sign: 1;
   }
 }
 

package/src/tokens/_tokens-base.css

@@ -26,6 +26,9 @@
  * (e.g. neo) emit tokens here; base is the default @theme above. */
 @import "./figma/brand-overrides.css";
 
+/* Element defaults, the hover variant and the mobile input-size floor. */
+@import "./_reset.css";
+
 /* Base styles */
 :root {
   color-scheme: light dark;

package/src/tokens/components/_popup-surface.css

@@ -79,8 +79,9 @@
   z-index: calc(var(--z-popup) + var(--layer-index, 0));
 
   /* The panel takes DOM focus for keyboard navigation, but that focus is
-   * never the thing the user should see — the highlighted option is. */
-  outline: none;
+   * never the thing the user should see — the highlighted option is.
+   * Transparent rather than none, so forced-colors mode still draws it. */
+  outline: 2px solid transparent;
 
   /* Scale from the trigger, whichever side the panel flipped to. */
   transform-origin: var(--transform-origin);
@@ -159,5 +160,14 @@
 
   /* Highlight is the focus affordance; a second ring on top of it reads as
    * two selected rows. */
-  outline: none;
+  outline-style: none;
+
+  /* Forced-colors mode drops the highlight background, so the active option
+   * would be invisible. Draw it as an outline instead. */
+  @media (forced-colors: active) {
+    &[data-highlighted] {
+      outline: 2px solid Highlight;
+      outline-offset: -2px;
+    }
+  }
 }

package/src/tokens/components/atoms/_badge.css

@@ -11,5 +11,5 @@
  */
 
 @theme static {
-  --color-badge-border: oklch(0 0 0 / 0);
+  --color-badge-border: oklch(0 0 none / 0);
 }

package/src/tokens/components/molecules/_drawer.css

@@ -163,7 +163,7 @@
         var(--duration-drawer-backdrop-exit) *
         var(--drawer-swipe-strength, 1)
       )
-      ease-in both;
+      var(--ease-in-out) both;
   }
 
   &[data-swiping] {
@@ -200,25 +200,25 @@
   &[data-state="closed"][data-swipe-direction="left"] {
     animation: drawer-exit-left
       calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
-      ease-in both;
+      var(--ease-in-out) both;
   }
 
   &[data-state="closed"][data-swipe-direction="right"] {
     animation: drawer-exit-right
       calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
-      ease-in both;
+      var(--ease-in-out) both;
   }
 
   &[data-state="closed"][data-swipe-direction="up"] {
     animation: drawer-exit-up
       calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
-      ease-in both;
+      var(--ease-in-out) both;
   }
 
   &[data-state="closed"][data-swipe-direction="down"] {
     animation: drawer-exit-down
       calc(var(--duration-drawer-exit) * var(--drawer-swipe-strength, 1))
-      ease-in both;
+      var(--ease-in-out) both;
   }
 
   @starting-style {

package/src/tokens/components/molecules/_vertical-navigation.css

@@ -126,7 +126,7 @@
     flex-shrink: 0;
   }
 
-  @media (hover: hover) {
+  @media (hover: hover) and (pointer: fine) {
     &:hover:not(:has(> [data-part="link"][data-current])):has(
         > [data-part="link"]:not([data-disabled]),
         > [data-part="branch-trigger"]:not(:disabled)

package/src/tokens/components/organisms/_data-table.css

@@ -55,7 +55,7 @@
  *
  * `background: inherit` gives the second without the first: every row-level
  * tint in this system is an alpha overlay meant to composite over a surface
- * (`--color-table-row-striped-secondary` is literally `oklch(0 0 0 / 0)`), so
+ * (`--color-table-row-striped-secondary` is literally `oklch(0 0 none / 0)`), so
  * inheriting it yields a see-through cell.
  *
  * Compositing solves both at once — the same trick `OPAQUE_HEADER_BG` uses for

package/src/tokens/figma/brand-overrides.css

@@ -138,9 +138,9 @@
   --color-fg-status-warning: var(--color-warning-500);
   --color-fill-active: var(--color-black-15);
   --color-fill-base: var(--color-black-5);
-  --color-fill-borderless-active: oklch(0 0 0 / 0);
-  --color-fill-borderless-base: oklch(0 0 0 / 0);
-  --color-fill-borderless-hover: oklch(0 0 0 / 0);
+  --color-fill-borderless-active: oklch(0 0 none / 0);
+  --color-fill-borderless-base: oklch(0 0 none / 0);
+  --color-fill-borderless-hover: oklch(0 0 none / 0);
   --color-fill-highlight: var(--color-neutral-300);
   --color-fill-hover: var(--color-primary-200);
   --color-fill-overlay: var(--color-neutral-200);
@@ -167,7 +167,7 @@
   --color-secondary-800: oklch(0.381 0.06 182.018);
   --color-secondary-900: oklch(0.327 0.051 180.942);
   --color-success: var(--color-success-500);
-  --default-ring-color: oklch(0 0 0);
+  --default-ring-color: oklch(0 0 none);
 }
 
 [data-theme="akros"] {
@@ -220,8 +220,8 @@
   --color-bg-transparent: var(--color-transparent);
   --color-bg-warning-active: var(--color-warning-700);
   --color-bg-warning-hover: var(--color-warning-600);
-  --color-black-15: oklch(0 0 0 / 0.15);
-  --color-black-5: oklch(0 0 0 / 0.05);
+  --color-black-15: oklch(0 0 none / 0.15);
+  --color-black-5: oklch(0 0 none / 0.05);
   --color-blue-500: var(--color-tertiary-600);
   --color-border-danger-focus: var(--color-danger-500);
   --color-border-danger-hover: var(--color-danger-600);
@@ -275,15 +275,15 @@
   --color-gray-950: var(--color-black);
   --color-link: var(--color-black);
   --color-neutral-100: oklch(0.964 0.002 247.84);
-  --color-neutral-200: oklch(0.937 0 0);
-  --color-neutral-300: oklch(0.848 0 0);
-  --color-neutral-400: oklch(0.683 0 0);
-  --color-neutral-50: oklch(0.982 0 0);
-  --color-neutral-500: oklch(0.51 0 0);
-  --color-neutral-600: oklch(0.446 0 0);
-  --color-neutral-700: oklch(0.321 0 0);
-  --color-neutral-800: oklch(0.252 0 0);
-  --color-neutral-900: oklch(0.178 0 0);
+  --color-neutral-200: oklch(0.937 0 none);
+  --color-neutral-300: oklch(0.848 0 none);
+  --color-neutral-400: oklch(0.683 0 none);
+  --color-neutral-50: oklch(0.982 0 none);
+  --color-neutral-500: oklch(0.51 0 none);
+  --color-neutral-600: oklch(0.446 0 none);
+  --color-neutral-700: oklch(0.321 0 none);
+  --color-neutral-800: oklch(0.252 0 none);
+  --color-neutral-900: oklch(0.178 0 none);
   --color-neutral-950: var(--color-black);
   --color-primary: var(--color-primary-500);
   --color-primary-100: oklch(0.957 0.055 90.321);