@ponchia/ui 0.2.2 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ponchia/ui",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "type": "module",
   "description": "Shared Bronto UI framework — Nothing-inspired monochrome CSS theme, dot-matrix motifs, admin shell.",
   "license": "MIT",
@@ -23,64 +23,94 @@
     "fonts",
     "tokens",
     "classes",
-    "behaviors"
+    "behaviors",
+    "shiki"
   ],
   "style": "./dist/bronto.css",
   "scripts": {
     "lint": "stylelint \"css/**/*.css\"",
     "lint:fix": "stylelint \"css/**/*.css\" --fix",
+    "format": "prettier --write .",
+    "check:format": "prettier --check .",
     "tokens:build": "node scripts/gen-tokens-json.mjs",
     "dtcg:build": "node scripts/gen-dtcg.mjs",
+    "dts:build": "node scripts/gen-dts.mjs",
+    "reference:build": "node scripts/gen-reference.mjs",
+    "vscode:build": "node scripts/gen-vscode-data.mjs",
     "dist:build": "node scripts/build-dist.mjs",
     "check:exports": "node scripts/check-exports.mjs",
     "check:tokens": "node scripts/check-tokens.mjs",
     "check:classes": "node scripts/check-classes.mjs",
+    "check:dts": "node scripts/check-dts.mjs",
+    "check:types": "tsc -p tsconfig.json",
     "check:dtcg": "node scripts/check-dtcg.mjs",
+    "check:shiki": "node scripts/check-shiki.mjs",
     "check:dist": "node scripts/check-dist.mjs",
     "check:pack": "node scripts/check-pack.mjs",
-    "check": "npm run lint && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dtcg && npm run check:dist && npm run check:pack",
+    "check:release": "node scripts/check-release.mjs",
+    "check:reference": "node scripts/check-reference.mjs",
+    "check:vscode": "node scripts/check-vscode-data.mjs",
+    "check": "npm run lint && npm run check:format && npm run check:exports && npm run check:tokens && npm run check:classes && npm run check:dts && npm run check:types && npm run check:dtcg && npm run check:shiki && npm run check:dist && npm run check:pack && npm run check:release && npm run check:reference && npm run check:vscode",
     "test": "node --test \"test/*.test.mjs\"",
-    "prepack": "npm run tokens:build && npm run dtcg:build && npm run dist:build"
+    "prepack": "npm run tokens:build && npm run dtcg:build && npm run dts:build && npm run reference:build && npm run vscode:build && npm run dist:build",
+    "prepublishOnly": "npm run check && npm test"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.11.3",
     "@playwright/test": "^1.60.0",
-    "jsdom": "^25.0.1",
-    "stylelint": "^16.10.0",
-    "stylelint-config-standard": "^36.0.1",
-    "stylelint-use-logical": "^2.1.3"
+    "jsdom": "^29.1.1",
+    "prettier": "^3.8.3",
+    "stylelint": "^17.11.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-use-logical": "^2.1.3",
+    "typescript": "^6.0.3"
   },
   "exports": {
-    ".": "./dist/bronto.css",
+    ".": {
+      "style": "./dist/bronto.css",
+      "default": "./dist/bronto.css"
+    },
     "./dist/bronto.css": "./dist/bronto.css",
-    "./dist/bronto-core.css": "./dist/bronto-core.css",
-    "./css": "./css/index.css",
-    "./css/index.css": "./css/index.css",
+    "./css": "./css/core.css",
     "./css/core.css": "./css/core.css",
-    "./css/tokens.css": "./css/tokens.css",
-    "./css/fonts.css": "./css/fonts.css",
-    "./css/base.css": "./css/base.css",
-    "./css/motion.css": "./css/motion.css",
-    "./css/dots.css": "./css/dots.css",
-    "./css/layout.css": "./css/layout.css",
-    "./css/navigation.css": "./css/navigation.css",
-    "./css/typography.css": "./css/typography.css",
-    "./css/content.css": "./css/content.css",
-    "./css/primitives.css": "./css/primitives.css",
-    "./css/forms.css": "./css/forms.css",
-    "./css/feedback.css": "./css/feedback.css",
-    "./css/overlay.css": "./css/overlay.css",
-    "./css/disclosure.css": "./css/disclosure.css",
-    "./css/table.css": "./css/table.css",
-    "./css/cards.css": "./css/cards.css",
-    "./css/app.css": "./css/app.css",
-    "./css/responsive.css": "./css/responsive.css",
+    "./css/tokens.css": "./dist/css/tokens.css",
+    "./css/fonts.css": "./dist/css/fonts.css",
+    "./css/base.css": "./dist/css/base.css",
+    "./css/motion.css": "./dist/css/motion.css",
+    "./css/dots.css": "./dist/css/dots.css",
+    "./css/navigation.css": "./dist/css/navigation.css",
+    "./css/site.css": "./dist/css/site.css",
+    "./css/content.css": "./dist/css/content.css",
+    "./css/primitives.css": "./dist/css/primitives.css",
+    "./css/forms.css": "./dist/css/forms.css",
+    "./css/feedback.css": "./dist/css/feedback.css",
+    "./css/overlay.css": "./dist/css/overlay.css",
+    "./css/disclosure.css": "./dist/css/disclosure.css",
+    "./css/table.css": "./dist/css/table.css",
+    "./css/app.css": "./dist/css/app.css",
+    "./css/unlayered/tokens.css": "./css/tokens.css",
+    "./css/unlayered/fonts.css": "./css/fonts.css",
+    "./css/unlayered/base.css": "./css/base.css",
+    "./css/unlayered/motion.css": "./css/motion.css",
+    "./css/unlayered/dots.css": "./css/dots.css",
+    "./css/unlayered/navigation.css": "./css/navigation.css",
+    "./css/unlayered/site.css": "./css/site.css",
+    "./css/unlayered/content.css": "./css/content.css",
+    "./css/unlayered/primitives.css": "./css/primitives.css",
+    "./css/unlayered/forms.css": "./css/forms.css",
+    "./css/unlayered/feedback.css": "./css/feedback.css",
+    "./css/unlayered/overlay.css": "./css/overlay.css",
+    "./css/unlayered/disclosure.css": "./css/disclosure.css",
+    "./css/unlayered/table.css": "./css/table.css",
+    "./css/unlayered/app.css": "./css/app.css",
     "./tokens": {
       "types": "./tokens/index.d.ts",
       "default": "./tokens/index.js"
     },
+    "./vscode.css-custom-data.json": "./classes/vscode.css-custom-data.json",
     "./tokens.json": "./tokens/index.json",
     "./tokens.dtcg.json": "./tokens/tokens.dtcg.json",
+    "./shiki/nothing.json": "./shiki/nothing.json",
     "./classes": {
       "types": "./classes/index.d.ts",
       "default": "./classes/index.js"

package/shiki/nothing.json

@@ -0,0 +1,83 @@
+{
+  "name": "nothing",
+  "type": "dark",
+  "colors": {
+    "editor.background": "#0c0c0c",
+    "editor.foreground": "#f2f2f2",
+    "editorLineNumber.foreground": "#444444",
+    "editorLineNumber.activeForeground": "#858585",
+    "editor.selectionBackground": "#ff3b4126",
+    "editorCursor.foreground": "#ff3b41",
+    "editorWhitespace.foreground": "#2a2a2a"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment"],
+      "settings": { "foreground": "#858585", "fontStyle": "italic" }
+    },
+    {
+      "scope": ["string", "string.quoted", "string.template"],
+      "settings": { "foreground": "#c4c4c4" }
+    },
+    {
+      "scope": ["constant.numeric", "constant.language", "constant.character"],
+      "settings": { "foreground": "#c4c4c4" }
+    },
+    {
+      "scope": [
+        "keyword",
+        "keyword.control",
+        "keyword.operator",
+        "storage",
+        "storage.type",
+        "storage.modifier"
+      ],
+      "settings": { "foreground": "#ff3b41" }
+    },
+    {
+      "scope": ["entity.name.function", "support.function", "meta.function-call"],
+      "settings": { "foreground": "#f2f2f2" }
+    },
+    {
+      "scope": ["entity.name.type", "support.type", "support.class", "entity.other.inherited-class"],
+      "settings": { "foreground": "#c4c4c4" }
+    },
+    {
+      "scope": ["variable", "variable.other", "meta.definition.variable"],
+      "settings": { "foreground": "#f2f2f2" }
+    },
+    {
+      "scope": ["entity.name.tag", "support.constant"],
+      "settings": { "foreground": "#ff3b41" }
+    },
+    {
+      "scope": ["entity.other.attribute-name"],
+      "settings": { "foreground": "#c4c4c4" }
+    },
+    {
+      "scope": [
+        "punctuation",
+        "meta.brace",
+        "punctuation.separator",
+        "punctuation.terminator"
+      ],
+      "settings": { "foreground": "#858585" }
+    },
+    {
+      "scope": ["invalid", "invalid.illegal"],
+      "settings": { "foreground": "#ff4d54" }
+    },
+    {
+      "scope": ["markup.heading", "markup.bold"],
+      "settings": { "foreground": "#ff3b41", "fontStyle": "bold" }
+    },
+    {
+      "scope": ["markup.italic"],
+      "settings": { "fontStyle": "italic" }
+    },
+    {
+      "scope": ["markup.inline.raw", "markup.fenced_code"],
+      "settings": { "foreground": "#c4c4c4" }
+    }
+  ]
+}

package/tokens/index.d.ts

@@ -1,21 +1,29 @@
-/** @ponchia/ui — design token data types. */
+/** @ponchia/ui — GENERATED from tokens/index.js by scripts/gen-dts.mjs.
+ *  Do not edit by hand; run `npm run dts:build`. Drift-checked in CI. */
 
 export type ThemeName = 'light' | 'dark';
 
-/** Exact mirror of the :root blocks in css/tokens.css. */
+export type GlobalTokenName = '--radius-xl' | '--radius-lg' | '--radius-md' | '--radius-sm' | '--radius-pill' | '--space-2xs' | '--space-xs' | '--space-sm' | '--space-md' | '--space-lg' | '--space-xl' | '--space-2xl' | '--mono' | '--sans' | '--display' | '--dot-font' | '--text-2xs' | '--text-xs' | '--text-sm' | '--text-base' | '--text-lg' | '--text-xl' | '--tracking-wide' | '--tracking-wider' | '--ease-standard' | '--ease-spring' | '--ease-out' | '--duration-fast' | '--duration-base' | '--duration-slow' | '--dot-size' | '--dot-gap' | '--z-base' | '--z-raised' | '--z-sticky' | '--z-overlay' | '--z-popover' | '--z-toast' | '--accent-1' | '--accent-2' | '--accent-3' | '--accent-4' | '--accent-5' | '--accent-6' | '--surface-1' | '--surface-2' | '--surface-3' | '--surface-4' | '--surface-5' | '--surface-6' | '--bronto-color-bg' | '--bronto-color-surface' | '--bronto-color-surface-raised' | '--bronto-color-border' | '--bronto-color-border-strong' | '--bronto-color-text' | '--bronto-color-text-muted' | '--bronto-color-action' | '--bronto-color-on-action' | '--bronto-color-focus' | '--bronto-color-success' | '--bronto-color-warning' | '--bronto-color-danger' | '--surface' | '--surface-raised' | '--surface-muted' | '--border' | '--border-strong';
+export type LightTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+export type DarkTokenName = '--bg' | '--bg-elevated' | '--bg-accent' | '--panel' | '--panel-strong' | '--panel-soft' | '--line' | '--line-strong' | '--text' | '--text-soft' | '--text-dim' | '--accent' | '--accent-strong' | '--accent-text' | '--accent-soft' | '--success' | '--success-soft' | '--warning' | '--warning-soft' | '--orange' | '--orange-soft' | '--danger' | '--danger-soft' | '--code-bg' | '--button-text' | '--field-dot' | '--field-dot-hot' | '--field-dot-accent' | '--focus-ring' | '--shadow' | '--shadow-raised';
+
+/** Exact mirror of the :root blocks in css/tokens.css (literal keys). */
 export declare const cssVars: {
-  global: Record<`--${string}`, string>;
-  light: Record<`--${string}`, string>;
-  dark: Record<`--${string}`, string>;
+  global: Record<GlobalTokenName, string>;
+  light: Record<LightTokenName, string>;
+  dark: Record<DarkTokenName, string>;
 };
 
-/** Ergonomic view derived from {@link cssVars} (custom-property `--` prefix stripped). */
+export type ScaleKey = 'radius-xl' | 'radius-lg' | 'radius-md' | 'radius-sm' | 'radius-pill' | 'space-2xs' | 'space-xs' | 'space-sm' | 'space-md' | 'space-lg' | 'space-xl' | 'space-2xl' | 'mono' | 'sans' | 'display' | 'dot-font' | 'text-2xs' | 'text-xs' | 'text-sm' | 'text-base' | 'text-lg' | 'text-xl' | 'tracking-wide' | 'tracking-wider' | 'ease-standard' | 'ease-spring' | 'ease-out' | 'duration-fast' | 'duration-base' | 'duration-slow' | 'dot-size' | 'dot-gap' | 'z-base' | 'z-raised' | 'z-sticky' | 'z-overlay' | 'z-popover' | 'z-toast' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4' | 'accent-5' | 'accent-6' | 'surface-1' | 'surface-2' | 'surface-3' | 'surface-4' | 'surface-5' | 'surface-6' | 'bronto-color-bg' | 'bronto-color-surface' | 'bronto-color-surface-raised' | 'bronto-color-border' | 'bronto-color-border-strong' | 'bronto-color-text' | 'bronto-color-text-muted' | 'bronto-color-action' | 'bronto-color-on-action' | 'bronto-color-focus' | 'bronto-color-success' | 'bronto-color-warning' | 'bronto-color-danger' | 'surface' | 'surface-raised' | 'surface-muted' | 'border' | 'border-strong';
+export type ColorKey = 'bg' | 'bg-elevated' | 'bg-accent' | 'panel' | 'panel-strong' | 'panel-soft' | 'line' | 'line-strong' | 'text' | 'text-soft' | 'text-dim' | 'accent' | 'accent-strong' | 'accent-text' | 'accent-soft' | 'success' | 'success-soft' | 'warning' | 'warning-soft' | 'orange' | 'orange-soft' | 'danger' | 'danger-soft' | 'code-bg' | 'button-text' | 'field-dot' | 'field-dot-hot' | 'field-dot-accent' | 'focus-ring' | 'shadow' | 'shadow-raised';
+
+/** Ergonomic view derived from {@link cssVars} (`--` prefix stripped). */
 export declare const tokens: {
-  scale: Record<string, string>;
-  color: { light: Record<string, string>; dark: Record<string, string> };
+  scale: Record<ScaleKey, string>;
+  color: { light: Record<ColorKey, string>; dark: Record<ColorKey, string> };
 };
 
-/** Resolve the palette for a theme. Unknown values fall back to light. */
-export declare function themeColor(theme?: string): Record<string, string>;
+/** Resolve the palette for a theme. Unknown/omitted falls back to light. */
+export declare function themeColor(theme?: ThemeName): Record<ColorKey, string>;
 
 export default tokens;

package/tokens/index.js

@@ -50,6 +50,37 @@ export const cssVars = {
     '--duration-slow': '360ms',
     '--dot-size': '2px',
     '--dot-gap': '14px',
+    '--z-base': '0',
+    '--z-raised': '10',
+    '--z-sticky': '20',
+    '--z-overlay': '30',
+    '--z-popover': '50',
+    '--z-toast': '60',
+    '--accent-1': 'color-mix(in srgb, var(--accent) 8%, var(--bg))',
+    '--accent-2': 'color-mix(in srgb, var(--accent) 16%, var(--bg))',
+    '--accent-3': 'color-mix(in srgb, var(--accent) 32%, var(--bg))',
+    '--accent-4': 'color-mix(in srgb, var(--accent) 60%, var(--bg))',
+    '--accent-5': 'var(--accent)',
+    '--accent-6': 'var(--accent-strong)',
+    '--surface-1': 'var(--bg)',
+    '--surface-2': 'var(--bg-elevated)',
+    '--surface-3': 'var(--panel)',
+    '--surface-4': 'var(--panel-soft)',
+    '--surface-5': 'var(--line)',
+    '--surface-6': 'var(--line-strong)',
+    '--bronto-color-bg': 'var(--bg)',
+    '--bronto-color-surface': 'var(--panel)',
+    '--bronto-color-surface-raised': 'var(--panel-strong)',
+    '--bronto-color-border': 'var(--line)',
+    '--bronto-color-border-strong': 'var(--line-strong)',
+    '--bronto-color-text': 'var(--text)',
+    '--bronto-color-text-muted': 'var(--text-dim)',
+    '--bronto-color-action': 'var(--accent)',
+    '--bronto-color-on-action': 'var(--button-text)',
+    '--bronto-color-focus': 'var(--focus-ring)',
+    '--bronto-color-success': 'var(--success)',
+    '--bronto-color-warning': 'var(--warning)',
+    '--bronto-color-danger': 'var(--danger)',
     '--surface': 'var(--panel)',
     '--surface-raised': 'var(--panel-strong)',
     '--surface-muted': 'var(--panel-soft)',
@@ -71,21 +102,22 @@ export const cssVars = {
     '--text-dim': '#686863',
     '--accent': '#d71921',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 83%, #000)',
+    '--accent-text': 'var(--accent-strong)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 10%, transparent)',
     '--success': '#2f7d4f',
-    '--success-soft': 'rgba(47, 125, 79, 0.12)',
+    '--success-soft': 'rgb(47, 125, 79, 0.12)',
     '--warning': '#806414',
-    '--warning-soft': 'rgba(128, 100, 20, 0.13)',
+    '--warning-soft': 'rgb(128, 100, 20, 0.13)',
     '--orange': '#a85f32',
-    '--orange-soft': 'rgba(168, 95, 50, 0.13)',
+    '--orange-soft': 'rgb(168, 95, 50, 0.13)',
     '--danger': '#c01622',
-    '--danger-soft': 'rgba(192, 22, 34, 0.1)',
-    '--code-bg': 'rgba(10, 10, 10, 0.05)',
+    '--danger-soft': 'rgb(192, 22, 34, 0.1)',
+    '--code-bg': 'rgb(10, 10, 10, 0.05)',
     '--button-text': '#ffffff',
-    '--field-dot': 'rgba(10, 10, 10, 0.16)',
-    '--field-dot-hot': 'rgba(10, 10, 10, 0.4)',
+    '--field-dot': 'rgb(10, 10, 10, 0.16)',
+    '--field-dot-hot': 'rgb(10, 10, 10, 0.4)',
     '--field-dot-accent': 'color-mix(in srgb, var(--accent) 78%, transparent)',
-    '--focus-ring': 'color-mix(in srgb, var(--accent) 50%, transparent)',
+    '--focus-ring': 'var(--accent)',
     '--shadow': 'none',
     '--shadow-raised': '0 0 0 1px var(--line-strong)',
   },
@@ -104,21 +136,22 @@ export const cssVars = {
     '--text-dim': '#858585',
     '--accent': '#ff3b41',
     '--accent-strong': 'color-mix(in srgb, var(--accent) 84%, #fff)',
+    '--accent-text': 'var(--accent-strong)',
     '--accent-soft': 'color-mix(in srgb, var(--accent) 14%, transparent)',
     '--success': '#4ec27e',
-    '--success-soft': 'rgba(78, 194, 126, 0.14)',
+    '--success-soft': 'rgb(78, 194, 126, 0.14)',
     '--warning': '#d8bd72',
-    '--warning-soft': 'rgba(216, 189, 114, 0.14)',
+    '--warning-soft': 'rgb(216, 189, 114, 0.14)',
     '--orange': '#d08c5b',
-    '--orange-soft': 'rgba(208, 140, 91, 0.15)',
+    '--orange-soft': 'rgb(208, 140, 91, 0.15)',
     '--danger': '#ff4d54',
-    '--danger-soft': 'rgba(255, 77, 84, 0.15)',
-    '--code-bg': 'rgba(255, 255, 255, 0.05)',
+    '--danger-soft': 'rgb(255, 77, 84, 0.15)',
+    '--code-bg': 'rgb(255, 255, 255, 0.05)',
     '--button-text': '#000000',
-    '--field-dot': 'rgba(242, 242, 242, 0.14)',
-    '--field-dot-hot': 'rgba(242, 242, 242, 0.36)',
+    '--field-dot': 'rgb(242, 242, 242, 0.14)',
+    '--field-dot-hot': 'rgb(242, 242, 242, 0.36)',
     '--field-dot-accent': 'color-mix(in srgb, var(--accent) 82%, transparent)',
-    '--focus-ring': 'color-mix(in srgb, var(--accent) 55%, transparent)',
+    '--focus-ring': 'var(--accent)',
     '--shadow': 'none',
     '--shadow-raised': '0 0 0 1px var(--line-strong)',
   },

package/tokens/index.json

@@ -33,6 +33,37 @@
       "--duration-slow": "360ms",
       "--dot-size": "2px",
       "--dot-gap": "14px",
+      "--z-base": "0",
+      "--z-raised": "10",
+      "--z-sticky": "20",
+      "--z-overlay": "30",
+      "--z-popover": "50",
+      "--z-toast": "60",
+      "--accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
+      "--accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
+      "--accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
+      "--accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
+      "--accent-5": "var(--accent)",
+      "--accent-6": "var(--accent-strong)",
+      "--surface-1": "var(--bg)",
+      "--surface-2": "var(--bg-elevated)",
+      "--surface-3": "var(--panel)",
+      "--surface-4": "var(--panel-soft)",
+      "--surface-5": "var(--line)",
+      "--surface-6": "var(--line-strong)",
+      "--bronto-color-bg": "var(--bg)",
+      "--bronto-color-surface": "var(--panel)",
+      "--bronto-color-surface-raised": "var(--panel-strong)",
+      "--bronto-color-border": "var(--line)",
+      "--bronto-color-border-strong": "var(--line-strong)",
+      "--bronto-color-text": "var(--text)",
+      "--bronto-color-text-muted": "var(--text-dim)",
+      "--bronto-color-action": "var(--accent)",
+      "--bronto-color-on-action": "var(--button-text)",
+      "--bronto-color-focus": "var(--focus-ring)",
+      "--bronto-color-success": "var(--success)",
+      "--bronto-color-warning": "var(--warning)",
+      "--bronto-color-danger": "var(--danger)",
       "--surface": "var(--panel)",
       "--surface-raised": "var(--panel-strong)",
       "--surface-muted": "var(--panel-soft)",
@@ -53,21 +84,22 @@
       "--text-dim": "#686863",
       "--accent": "#d71921",
       "--accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
+      "--accent-text": "var(--accent-strong)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
       "--success": "#2f7d4f",
-      "--success-soft": "rgba(47, 125, 79, 0.12)",
+      "--success-soft": "rgb(47, 125, 79, 0.12)",
       "--warning": "#806414",
-      "--warning-soft": "rgba(128, 100, 20, 0.13)",
+      "--warning-soft": "rgb(128, 100, 20, 0.13)",
       "--orange": "#a85f32",
-      "--orange-soft": "rgba(168, 95, 50, 0.13)",
+      "--orange-soft": "rgb(168, 95, 50, 0.13)",
       "--danger": "#c01622",
-      "--danger-soft": "rgba(192, 22, 34, 0.1)",
-      "--code-bg": "rgba(10, 10, 10, 0.05)",
+      "--danger-soft": "rgb(192, 22, 34, 0.1)",
+      "--code-bg": "rgb(10, 10, 10, 0.05)",
       "--button-text": "#ffffff",
-      "--field-dot": "rgba(10, 10, 10, 0.16)",
-      "--field-dot-hot": "rgba(10, 10, 10, 0.4)",
+      "--field-dot": "rgb(10, 10, 10, 0.16)",
+      "--field-dot-hot": "rgb(10, 10, 10, 0.4)",
       "--field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
-      "--focus-ring": "color-mix(in srgb, var(--accent) 50%, transparent)",
+      "--focus-ring": "var(--accent)",
       "--shadow": "none",
       "--shadow-raised": "0 0 0 1px var(--line-strong)"
     },
@@ -85,21 +117,22 @@
       "--text-dim": "#858585",
       "--accent": "#ff3b41",
       "--accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
+      "--accent-text": "var(--accent-strong)",
       "--accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
       "--success": "#4ec27e",
-      "--success-soft": "rgba(78, 194, 126, 0.14)",
+      "--success-soft": "rgb(78, 194, 126, 0.14)",
       "--warning": "#d8bd72",
-      "--warning-soft": "rgba(216, 189, 114, 0.14)",
+      "--warning-soft": "rgb(216, 189, 114, 0.14)",
       "--orange": "#d08c5b",
-      "--orange-soft": "rgba(208, 140, 91, 0.15)",
+      "--orange-soft": "rgb(208, 140, 91, 0.15)",
       "--danger": "#ff4d54",
-      "--danger-soft": "rgba(255, 77, 84, 0.15)",
-      "--code-bg": "rgba(255, 255, 255, 0.05)",
+      "--danger-soft": "rgb(255, 77, 84, 0.15)",
+      "--code-bg": "rgb(255, 255, 255, 0.05)",
       "--button-text": "#000000",
-      "--field-dot": "rgba(242, 242, 242, 0.14)",
-      "--field-dot-hot": "rgba(242, 242, 242, 0.36)",
+      "--field-dot": "rgb(242, 242, 242, 0.14)",
+      "--field-dot-hot": "rgb(242, 242, 242, 0.36)",
       "--field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
-      "--focus-ring": "color-mix(in srgb, var(--accent) 55%, transparent)",
+      "--focus-ring": "var(--accent)",
       "--shadow": "none",
       "--shadow-raised": "0 0 0 1px var(--line-strong)"
     }
@@ -138,6 +171,37 @@
       "duration-slow": "360ms",
       "dot-size": "2px",
       "dot-gap": "14px",
+      "z-base": "0",
+      "z-raised": "10",
+      "z-sticky": "20",
+      "z-overlay": "30",
+      "z-popover": "50",
+      "z-toast": "60",
+      "accent-1": "color-mix(in srgb, var(--accent) 8%, var(--bg))",
+      "accent-2": "color-mix(in srgb, var(--accent) 16%, var(--bg))",
+      "accent-3": "color-mix(in srgb, var(--accent) 32%, var(--bg))",
+      "accent-4": "color-mix(in srgb, var(--accent) 60%, var(--bg))",
+      "accent-5": "var(--accent)",
+      "accent-6": "var(--accent-strong)",
+      "surface-1": "var(--bg)",
+      "surface-2": "var(--bg-elevated)",
+      "surface-3": "var(--panel)",
+      "surface-4": "var(--panel-soft)",
+      "surface-5": "var(--line)",
+      "surface-6": "var(--line-strong)",
+      "bronto-color-bg": "var(--bg)",
+      "bronto-color-surface": "var(--panel)",
+      "bronto-color-surface-raised": "var(--panel-strong)",
+      "bronto-color-border": "var(--line)",
+      "bronto-color-border-strong": "var(--line-strong)",
+      "bronto-color-text": "var(--text)",
+      "bronto-color-text-muted": "var(--text-dim)",
+      "bronto-color-action": "var(--accent)",
+      "bronto-color-on-action": "var(--button-text)",
+      "bronto-color-focus": "var(--focus-ring)",
+      "bronto-color-success": "var(--success)",
+      "bronto-color-warning": "var(--warning)",
+      "bronto-color-danger": "var(--danger)",
       "surface": "var(--panel)",
       "surface-raised": "var(--panel-strong)",
       "surface-muted": "var(--panel-soft)",
@@ -159,21 +223,22 @@
         "text-dim": "#686863",
         "accent": "#d71921",
         "accent-strong": "color-mix(in srgb, var(--accent) 83%, #000)",
+        "accent-text": "var(--accent-strong)",
         "accent-soft": "color-mix(in srgb, var(--accent) 10%, transparent)",
         "success": "#2f7d4f",
-        "success-soft": "rgba(47, 125, 79, 0.12)",
+        "success-soft": "rgb(47, 125, 79, 0.12)",
         "warning": "#806414",
-        "warning-soft": "rgba(128, 100, 20, 0.13)",
+        "warning-soft": "rgb(128, 100, 20, 0.13)",
         "orange": "#a85f32",
-        "orange-soft": "rgba(168, 95, 50, 0.13)",
+        "orange-soft": "rgb(168, 95, 50, 0.13)",
         "danger": "#c01622",
-        "danger-soft": "rgba(192, 22, 34, 0.1)",
-        "code-bg": "rgba(10, 10, 10, 0.05)",
+        "danger-soft": "rgb(192, 22, 34, 0.1)",
+        "code-bg": "rgb(10, 10, 10, 0.05)",
         "button-text": "#ffffff",
-        "field-dot": "rgba(10, 10, 10, 0.16)",
-        "field-dot-hot": "rgba(10, 10, 10, 0.4)",
+        "field-dot": "rgb(10, 10, 10, 0.16)",
+        "field-dot-hot": "rgb(10, 10, 10, 0.4)",
         "field-dot-accent": "color-mix(in srgb, var(--accent) 78%, transparent)",
-        "focus-ring": "color-mix(in srgb, var(--accent) 50%, transparent)",
+        "focus-ring": "var(--accent)",
         "shadow": "none",
         "shadow-raised": "0 0 0 1px var(--line-strong)"
       },
@@ -191,21 +256,22 @@
         "text-dim": "#858585",
         "accent": "#ff3b41",
         "accent-strong": "color-mix(in srgb, var(--accent) 84%, #fff)",
+        "accent-text": "var(--accent-strong)",
         "accent-soft": "color-mix(in srgb, var(--accent) 14%, transparent)",
         "success": "#4ec27e",
-        "success-soft": "rgba(78, 194, 126, 0.14)",
+        "success-soft": "rgb(78, 194, 126, 0.14)",
         "warning": "#d8bd72",
-        "warning-soft": "rgba(216, 189, 114, 0.14)",
+        "warning-soft": "rgb(216, 189, 114, 0.14)",
         "orange": "#d08c5b",
-        "orange-soft": "rgba(208, 140, 91, 0.15)",
+        "orange-soft": "rgb(208, 140, 91, 0.15)",
         "danger": "#ff4d54",
-        "danger-soft": "rgba(255, 77, 84, 0.15)",
-        "code-bg": "rgba(255, 255, 255, 0.05)",
+        "danger-soft": "rgb(255, 77, 84, 0.15)",
+        "code-bg": "rgb(255, 255, 255, 0.05)",
         "button-text": "#000000",
-        "field-dot": "rgba(242, 242, 242, 0.14)",
-        "field-dot-hot": "rgba(242, 242, 242, 0.36)",
+        "field-dot": "rgb(242, 242, 242, 0.14)",
+        "field-dot-hot": "rgb(242, 242, 242, 0.36)",
         "field-dot-accent": "color-mix(in srgb, var(--accent) 82%, transparent)",
-        "focus-ring": "color-mix(in srgb, var(--accent) 55%, transparent)",
+        "focus-ring": "var(--accent)",
         "shadow": "none",
         "shadow-raised": "0 0 0 1px var(--line-strong)"
       }