@cube-dev/ui-kit 0.196.0 → 0.198.0

package/docs/tasty/tasty-static.md

@@ -8,30 +8,38 @@ Choose `tastyStatic` specifically when styles must be generated during the build
 
 ## When to Use
 
-- **Static site generation (SSG)** — Pre-render all styles at build time
-- **No-JavaScript websites** — CSS works without any JS runtime
-- **Performance-critical pages** — CSS extracted before the application renders
-- **Landing pages** — Minimal bundle size with pre-generated CSS
+- **CSS that must exist before anything renders** — static sites, landing pages, and HTML served from a CDN get one stylesheet generated at build time
+- **No React at runtime** — `tastyStatic` returns class names, so plain DOM code or any templating that sets `class` can use them; the [Programmatic API](#programmatic-api) covers frameworks Babel does not process
+- **Class-name objects instead of components** — extend them with `tastyStatic(base, styles)` and pass them wherever a `className` goes
+- **Self-contained packages** — [inject mode](#inject-mode) embeds the CSS in the JavaScript, so consumers have no stylesheet to wire up
+
+If the styles depend on props, keep `tasty()`: rendered only on the server, it also ships no styling runtime (see [Server-Side Rendering](ssr.md)).
 
 ## Requirements
 
 Build-time extraction is part of the main `@tenphi/tasty` package but requires additional peer dependencies depending on your setup:
 
-| Dependency                   | Version | Required for                                                               |
-| ---------------------------- | ------- | -------------------------------------------------------------------------- |
-| `@babel/core`                | >= 7.24 | Babel plugin (`@tenphi/tasty/babel-plugin`)                                |
-| `@babel/helper-plugin-utils` | >= 7.24 | Babel plugin                                                               |
-| `@babel/types`               | >= 7.24 | Babel plugin                                                               |
-| `jiti`                       | >= 2.6  | Next.js wrapper (`@tenphi/tasty/zero/next`) when using `configFile` option |
+| Dependency                   | Version                | Required for                                         |
+| ---------------------------- | ---------------------- | ---------------------------------------------------- |
+| `@babel/core`                | 7.24+ or 8             | Babel plugin (`@tenphi/tasty/babel-plugin`)          |
+| `@babel/helper-plugin-utils` | 7.24+ or 8             | Babel plugin                                         |
+| `@babel/types`               | 7.24+ or 8             | Babel plugin                                         |
+| `jiti`                       | >= 2.6                 | `configFile` only (Babel plugin and Next.js wrapper) |
+| `babel-loader`               | any (10+ with Babel 8) | Next.js wrapper (`@tenphi/tasty/zero/next`)          |
+
+Install the three Babel packages from the same major. Babel 8 itself needs Node 22.18+ or 24.11+, and `babel-loader` accepts it from version 10.
 
-All of these are declared as optional peer dependencies of `@tenphi/tasty`. Install only what your setup requires:
+The Babel packages and `jiti` are optional peer dependencies of `@tenphi/tasty`; `babel-loader` is resolved from your project. `jiti` is loaded only to read a `configFile`, so a setup that passes `config` directly does not need it; without it, `configFile` fails with an error that says to install it. Install what your setup requires:
 
 ```bash
-# For any Babel-based setup (Vite, custom Babel config, etc.)
+# Any Babel-based setup (Vite, custom Babel config, etc.)
 pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types
 
-# For Next.js with TypeScript config file
-pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types jiti
+# Next.js
+pnpm add -D @babel/core @babel/helper-plugin-utils @babel/types babel-loader
+
+# Either, with configFile
+pnpm add -D jiti
 ```
 
 ---
@@ -52,13 +60,15 @@ const button = tastyStatic({
   radius: '1r',
 });
 
-// Use in JSX - works via toString() coercion
-<button className={button}>Click me</button>
+// Use in JSX
+<button className={button.className}>Click me</button>;
 
-// Or access className explicitly
-<button className={button.className}>Click me</button>
+// toString() returns the class name, for template strings and plain JS
+element.className = `${button} is-active`;
 ```
 
+In TSX, pass `button.className`: React types `className` as `string`, so passing the `StaticStyle` object fails type-checking even though it works at runtime.
+
 ---
 
 ## API Reference
@@ -105,6 +115,8 @@ tastyStatic('body', {
 });
 ```
 
+The selector can be a list (`'.uni-checkbox, uni-checkbox'`): every item gets the states and sub-elements. Local `@keyframes` and `@starting` states work as in `tastyStatic(styles)`.
+
 ---
 
 ## StaticStyle Object
@@ -166,7 +178,7 @@ module.exports = {
 | -------------------------- | ------------------------------------------------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | `output`                   | `string`                                         | `'tasty.css'` | Path for generated CSS file                                                                                                                                                                      |
 | `mode`                     | `'file' \| 'inject'`                             | `'file'`      | `'file'` writes CSS to disk; `'inject'` embeds CSS inline in JS (see [Inject Mode](#inject-mode))                                                                                                |
-| `configFile`               | `string`                                         | —             | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack.                                             |
+| `configFile`               | `string`                                         | —             | Absolute path to a TS/JS module that default-exports a `TastyZeroConfig` object. JSON-serializable alternative to `config` — required for Turbopack. Loaded with the optional `jiti` peer.       |
 | `config`                   | `TastyZeroConfig \| () => TastyZeroConfig`       | `{}`          | Inline config object or factory function. Takes precedence over `configFile`.                                                                                                                    |
 | `configDeps`               | `string[]`                                       | `[]`          | Absolute file paths that affect config (for cache invalidation)                                                                                                                                  |
 | `injectImport`             | `boolean`                                        | `true`        | Replace `@tenphi/tasty/static` imports with an import of the generated CSS file. Set to `false` to manage CSS imports manually.                                                                  |
@@ -178,7 +190,8 @@ module.exports = {
 | `config.keyframes`         | `Record<string, KeyframesSteps>`                 | —             | Global `@keyframes` definitions available to all `tastyStatic` calls                                                                                                                             |
 | `config.fontFaces`         | `Record<string, FontFaceInput>`                  | —             | Global `@font-face` definitions                                                                                                                                                                  |
 | `config.counterStyles`     | `Record<string, CounterStyleDescriptors>`        | —             | Global `@counter-style` definitions                                                                                                                                                              |
-| `config.units`             | `Record<string, string \| UnitHandler>`          | —             | Custom units for the style parser (merged with built-ins). E.g. `{ em: 'em', vw: 'vw' }`                                                                                                         |
+| `config.properties`        | `Record<string, PropertyDefinition>`             | —             | Global `@property` definitions, written with Tasty's [default properties](dsl.md#default-properties)                                                                                             |
+| `config.units`             | `Record<string, string \| UnitHandler>`          | —             | Custom units for the style parser (merged with built-ins). E.g. `{ u: 'var(--u)' }` makes `2u` compile to `calc(2 * var(--u))`. Native CSS units need no entry                                   |
 | `config.functions`         | `Record<string, FunctionDefinition \| Function>` | —             | Custom functions (merged). Bare keys → parse functions; `$$name` keys → declarative CSS `@function` definitions                                                                                  |
 | `config.polyfills`         | `{ functions?: boolean }`                        | `{}`          | Opt-in polyfills. `functions: true` inlines `@function` calls into plain CSS at build time                                                                                                       |
 | `config.plugins`           | `TastyPlugin[]`                                  | —             | Plugins that extend tasty with custom functions, units, states, and handlers                                                                                                                     |
@@ -242,7 +255,7 @@ const card = tastyStatic({
   color: '#text',
 });
 
-<div className={card}>Styled card</div>;
+<div className={card.className}>Styled card</div>;
 ```
 
 ---
@@ -279,12 +292,12 @@ export default withTastyZero({
 
 Starting with Next.js 16, Turbopack is the default bundler. `withTastyZero` supports it out of the box by injecting `turbopack.rules` with `babel-loader` and JSON-serializable options.
 
-The `configFile` option is key for Turbopack — it passes a file path (JSON-serializable) instead of a function, and the Babel plugin loads the config internally via jiti.
+The `configFile` option is key for Turbopack — it passes a file path (JSON-serializable) instead of a function, and the Babel plugin loads the config internally via `jiti`, which must be installed.
 
-**Requirements**: `babel-loader` must be installed in your project:
+**Requirements**: `babel-loader` must be installed in your project (see [Requirements](#requirements)):
 
 ```bash
-pnpm add babel-loader
+pnpm add -D babel-loader
 ```
 
 ### CSS Injection
@@ -299,34 +312,107 @@ public/tasty.css
 
 ---
 
+## Programmatic API
+
+`@tenphi/tasty/zero` turns styles into CSS in Node without Babel or React — for build scripts, or CSS shipped to other frameworks:
+
+```ts
+import {
+  configure,
+  extractStylesForSelector,
+  extractStylesWithChunks,
+} from '@tenphi/tasty/zero';
+
+configure({
+  units: { u: 'var(--unit)' },
+  states: { '@dark': '@root(schema=dark)' },
+});
+
+extractStylesForSelector('.card', { padding: '2u', fill: '#surface' }).css;
+// → '.card { padding: calc(2 * var(--unit)); background-color: … }'
+
+extractStylesWithChunks({ display: 'flex', gap: '1u' });
+// → [{ className: 'ts…', css: '.ts….ts… { … }' }]
+```
+
+`configure()` takes the same options as the Babel plugin's `config` (see [Plugin Options](#plugin-options)) and replaces the previous configuration on each call; `resetConfig()` returns to the defaults. Options that shape the extracted rules apply — `states`, `units`, parse `functions`, `handlers`, `replaceTokens`, `recipes`, `plugins`, `namePrefix`. Definitions that become at-rules or global CSS of their own are not emitted with the rules: `tokens`, `globalStyles`, `fontFaces`, `counterStyles`, `properties` and `$$` `@function` definitions. Render tokens and global styles with `extractStylesForSelector(':root', tokens)` and `extractStylesForSelector(selector, styles)`.
+
+`extractConfigProperties()` returns the `@property` rules the Babel plugin writes at the top of its output: Tasty's [default set](dsl.md#default-properties) (`#border`, `#outline`, `$gap`, `$radius`, `$transition`, …) overlaid with the configured `properties`, or with the `properties` map you pass it. Emit them once per stylesheet. Style handlers read several of these tokens with no fallback of their own (`border: true` reads `#border`, `transition` reads `$transition`), so without them those declarations resolve to nothing.
+
+The configuration is process-wide and shared with the Babel plugin and the runtime `configure()` from `@tenphi/tasty`. The extractors re-apply their own configuration when the Babel plugin replaced it, but not after a runtime `configure()` — don't mix the runtime and build-time configuration in one process.
+
+`extractStylesForSelector()` output starts with the `@keyframes` its rules animate — local `@keyframes` and configured `keyframes` — under hashed names the `animation` declarations are rewritten to. `extractStylesWithChunks()` returns class rules only.
+
+`mergeStyles()` merges style objects with the rules `tasty(Base, { styles })` extends by — state maps with and without a `''` key, `null`, `false`, `'@inherit'` and sub-elements (see [Extending vs. Replacing State Maps](dsl.md#extending-vs-replacing-state-maps)) — so a build script can layer overrides onto source styles before extracting them, without React:
+
+```ts
+import { extractStylesForSelector, mergeStyles } from '@tenphi/tasty/zero';
+
+const styles = mergeStyles(checkboxStyles, {
+  Indicator: { radius: '0.5r' },
+});
+
+extractStylesForSelector('.checkbox', styles).css;
+```
+
+To write the results to a file the way the Babel plugin does, use `createCSSWriter()`. It deduplicates blocks by key and prepends the generated-file header:
+
+```ts
+import {
+  createCSSWriter,
+  extractConfigProperties,
+  extractStylesWithChunks,
+} from '@tenphi/tasty/zero';
+
+const writer = createCSSWriter('dist/tasty.css', { devMode: true });
+
+for (const prop of extractConfigProperties()) {
+  writer.add(`@property:${prop.name}`, prop.css);
+}
+
+for (const chunk of extractStylesWithChunks({ display: 'flex', gap: '1u' })) {
+  writer.add(chunk.className, chunk.css, 'src/card.ts'); // source is a devMode comment
+}
+
+writer.write(); // also: has(key), getCSS(), clear(), getOutputPath()
+```
+
+---
+
 ## Vite Integration
 
+`@vitejs/plugin-react` 6 no longer runs Babel; add it with `@rolldown/plugin-babel` (`pnpm add -D @rolldown/plugin-babel`):
+
 ```typescript
 // vite.config.ts
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import babel from '@rolldown/plugin-babel';
 
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: [
-          [
-            '@tenphi/tasty/babel-plugin',
-            {
-              output: 'public/tasty.css',
-              config: {
-                states: { '@mobile': '@media(w < 768px)' },
-              },
+    react(),
+    babel({
+      plugins: [
+        [
+          '@tenphi/tasty/babel-plugin',
+          {
+            output: 'src/tasty.css',
+            config: {
+              states: { '@mobile': '@media(w < 768px)' },
             },
-          ],
+          },
         ],
-      },
+      ],
     }),
   ],
 });
 ```
 
+With `@vitejs/plugin-react` 5 or older, pass the same `plugins` array to `react({ babel: { plugins } })` instead.
+
+Keep `output` outside `public/`: the plugin replaces each `@tenphi/tasty/static` import with an import of the generated file, and Vite does not let JavaScript import files from `public/`. Vite then bundles the CSS like any other stylesheet.
+
 ---
 
 ## Build Transformation
@@ -344,44 +430,67 @@ const button = tastyStatic({
 
 tastyStatic('.heading', { preset: 'h1' });
 
-export const Button = () => <button className={button}>Click</button>;
+export const Button = () => <button className={button.className}>Click</button>;
 ```
 
 ### After (Production Build)
 
 ```tsx
+import './tasty.css';
+
 const button = {
-  className: 'ts3f2a1b ts8c4d2e',
+  className: 'ts3f783b ts070801',
   styles: { padding: '2x 4x', fill: '#purple', color: '#white' },
   toString() {
     return this.className;
   },
 };
 
-export const Button = () => <button className={button}>Click</button>;
+export const Button = () => <button className={button.className}>Click</button>;
 ```
 
+The `@tenphi/tasty/static` import becomes an import of the generated file (relative to the source file), and the selector-mode call is removed.
+
 ### Generated CSS (tasty.css)
 
 ```css
 /* Generated by @tenphi/tasty/zero - DO NOT EDIT */
 
-.ts3f2a1b.ts3f2a1b {
-  padding: 16px 32px;
+@property --tasty-second-fill-color {
+  syntax: '<color>';
+  inherits: false;
+  initial-value: transparent;
 }
 
-.ts8c4d2e.ts8c4d2e {
-  background: #9370db;
-  color: #fff;
+@property --current-color {
+  syntax: '<color>';
+  inherits: true;
+  initial-value: currentcolor;
 }
 
-.heading.heading {
-  font-size: 2.5rem;
-  font-weight: 700;
-  line-height: 1.2;
+/* …the rest of Tasty's default @property rules (--white-color, --border-color, --gap, --transition, …), then config.properties */
+
+.ts3f783b.ts3f783b {
+  color: var(--white-color);
+  --current-color: var(--white-color);
+}
+
+.ts3f783b.ts3f783b {
+  background-color: var(--purple-color);
+}
+
+.ts070801.ts070801 {
+  padding: 16px 32px;
+}
+
+.heading {
+  font-size: var(--h1-font-size, var(--default-font-size));
+  /* …line-height, letter-spacing, font-weight, and the rest of the h1 preset */
 }
 ```
 
+The file starts with Tasty's [default `@property` rules](dsl.md#default-properties) and your `config.properties`, written once. Styles are split into chunks (here appearance and spacing), each with its own class. Color tokens compile to custom properties: `#purple` becomes `var(--purple-color)`. Define it in `config.tokens` and the plugin writes it to `:root` at the top of the same file. Units are literal (`2x` is `16px`). Selector-mode rules use the selector as written, without the doubled specificity of class rules.
+
 ---
 
 ## Inject Mode
@@ -452,22 +561,29 @@ tastyStatic('.heading', { preset: 'h1' });
 ```tsx
 import { injectCSS as _$i } from '@tenphi/tasty/static/inject';
 
+_$i(
+  '@property',
+  '@property --tasty-second-fill-color { … }\n@property --current-color { … }\n…',
+);
+
 const button =
   (_$i(
-    'ts3f2a1b ts8c4d2e',
-    '.ts3f2a1b.ts3f2a1b{padding:16px 32px}\n.ts8c4d2e.ts8c4d2e{background:#9370db}',
+    'tsa903d6 ts070801',
+    '.tsa903d6.tsa903d6 { background-color: var(--purple-color); }\n.ts070801.ts070801 { padding: 16px 32px; }',
   ),
   {
-    className: 'ts3f2a1b ts8c4d2e',
+    className: 'tsa903d6 ts070801',
     styles: { padding: '2x 4x', fill: '#purple' },
     toString() {
       return this.className;
     },
   });
 
-_$i('.heading', '.heading{font-size:2.5rem;font-weight:700;line-height:1.2}');
+_$i('.heading', '.heading { font-size: var(--h1-font-size, …); … }');
 ```
 
+Each file that calls `tastyStatic()` starts by injecting Tasty's default `@property` rules and your `config.properties` under the `@property` id. `injectCSS()` skips an id it has already injected, so the page gets them once.
+
 ### Dev Mode / HMR
 
 Class names are content-hashed (`ts` + MD5). When styles change, a new hash produces a new `_$i` call that injects fresh CSS. The injector deduplicates by id, so unchanged styles are skipped. Old CSS stays in the DOM but is harmless since no elements reference those class names.
@@ -525,7 +641,7 @@ const card = tastyStatic({
 
 ## Extending Style Types (TypeScript)
 
-If you add custom style properties, use module augmentation so `tastyStatic` recognizes them too. See [Extending Style Types](configuration.md#extending-style-types-typescript) in the configuration docs.
+If you add custom style properties, use module augmentation so `tastyStatic` recognizes them too. See [TypeScript](configuration.md#typescript) in the configuration docs.
 
 ---
 
@@ -547,10 +663,12 @@ const card = tastyStatic({
 });
 
 <div
-  className={card}
-  style={{
-    '--card-bg': isActive ? 'var(--purple-color)' : 'var(--white-color)',
-  }}
+  className={card.className}
+  style={
+    {
+      '--card-bg': isActive ? 'var(--purple-color)' : 'var(--white-color)',
+    } as React.CSSProperties
+  }
 />;
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.196.0",
+  "version": "0.198.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {
@@ -59,7 +59,7 @@
     "@tabler/icons-react": "^3.31.0",
     "@tanstack/react-virtual": "^3.13.12",
     "@tenphi/glaze": "2.0.0",
-    "@tenphi/tasty": "3.9.9",
+    "@tenphi/tasty": "3.12.0",
     "clipboard-copy": "^4.0.1",
     "clsx": "^1.1.1",
     "diff": "^8.0.3",
@@ -90,30 +90,31 @@
     "@commitlint/cli": "^17.4.4",
     "@commitlint/config-conventional": "^17.4.4",
     "@guidepup/virtual-screen-reader": "^0.33.0",
-    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "@size-limit/file": "^8.2.4",
     "@size-limit/webpack": "^8.2.4",
     "@size-limit/webpack-why": "^8.2.4",
     "@statoscope/cli": "^5.20.1",
     "@storybook/addon-docs": "^10.3.6",
     "@storybook/react-vite": "^10.3.6",
-    "@tenphi/eslint-plugin-tasty": "^1.7.0",
+    "@tenphi/eslint-plugin-tasty": "^1.8.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/babel__core": "^7.20.5",
     "@types/babel__helper-plugin-utils": "^7.10.3",
+    "@types/chai": "^5.2.3",
     "@types/node": "^24.0.0",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@types/use-sync-external-store": "1.7.0",
     "@typescript-eslint/parser": "^8.69.0",
     "@uiw/react-codemirror": "^4.25.4",
-    "@vitejs/plugin-react": "^6.0.0",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@vitest/browser": "^5.0.5",
+    "@vitest/browser-playwright": "^5.0.5",
+    "@vitest/coverage-v8": "^5.0.5",
     "babel-plugin-react-compiler": "1.0.0",
     "best-effort-json-parser": "^1.2.1",
     "bytes": "^3.1.2",
@@ -131,7 +132,7 @@
     "npm-run-all": "^4.1.5",
     "oxlint": "^1.72.0",
     "playwright": "^1.62.1",
-    "prettier": "^3.2.5",
+    "prettier": "^3.9.10",
     "react": "19.3.0",
     "react-dom": "19.3.0",
     "react-router": "^6.22.3",
@@ -141,10 +142,11 @@
     "size-limit": "^8.2.6",
     "storybook": "^10.3.6",
     "storybook-dark-mode": "^5.0.0",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.23.1",
     "typescript": "^5.6.3",
-    "vite": "^8.0.0",
-    "vitest": "^4.1.10"
+    "typescript-native": "npm:typescript@7.0.2",
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
   },
   "browserslist": [
     "last 2 Chrome versions",
@@ -169,14 +171,14 @@
     "test:form-store": "vitest run --config vitest.form-store.config.ts",
     "test:form-react": "vitest run --config vitest.form-react.config.ts",
     "test:browser": "vitest run --config vitest.browser.config.ts",
-    "test:types": "tsc -p tsconfig.typecheck.json",
-    "test:types:consumer": "tsc -p tsconfig.consumer.json && node scripts/check-declaration-bindings.mjs",
+    "test:types": "node node_modules/typescript-native/bin/tsc -p tsconfig.typecheck.json",
+    "test:types:consumer": "node node_modules/typescript-native/bin/tsc -p tsconfig.consumer.json && node scripts/check-declaration-bindings.mjs",
     "probe": "node scripts/probe.mjs",
     "probe:browser": "PROBE_TIER=browser node scripts/probe.mjs",
     "test-cover": "vitest run --coverage",
     "test-watch": "vitest",
-    "prettier": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" \"**/*.{md,mdx}\"",
-    "prettier:fix": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" \"**/*.{md,mdx}\"",
+    "prettier": "prettier --experimental-cli --check \"src/**/*.{js,jsx,ts,tsx}\" \"**/*.{md,mdx}\"",
+    "prettier:fix": "prettier --experimental-cli --write \"src/**/*.{js,jsx,ts,tsx}\" \"**/*.{md,mdx}\"",
     "oxlint": "oxlint src",
     "oxlint:fix": "oxlint --fix src",
     "lint": "npm-run-all -p oxlint prettier",

package/tasty.config.ts

@@ -123,6 +123,8 @@ export default {
     '#danger-desaturated',
     '#danger-surface',
     '#danger-surface-text',
+    '#danger-alert-surface',
+    '#danger-alert-border',
     '#danger-accent-surface',
     '#danger-accent-surface-2',
     '#danger-accent-surface-3',
@@ -145,6 +147,8 @@ export default {
     '#success-desaturated',
     '#success-surface',
     '#success-surface-text',
+    '#success-alert-surface',
+    '#success-alert-border',
     '#success-accent-surface',
     '#success-accent-surface-2',
     '#success-accent-surface-3',
@@ -167,6 +171,8 @@ export default {
     '#warning-desaturated',
     '#warning-surface',
     '#warning-surface-text',
+    '#warning-alert-surface',
+    '#warning-alert-border',
     '#warning-accent-surface',
     '#warning-accent-surface-2',
     '#warning-accent-surface-3',
@@ -189,6 +195,8 @@ export default {
     '#note-desaturated',
     '#note-surface',
     '#note-surface-text',
+    '#note-alert-surface',
+    '#note-alert-border',
     '#note-accent-surface',
     '#note-accent-surface-2',
     '#note-accent-surface-3',

package/dist/i18n/useI18n.d.ts

@@ -1,2 +0,0 @@
-
-import "react-i18next";