@kiva/kv-tokens 3.7.6 → 4.0.0-next.0

package/README.md

@@ -2,7 +2,8 @@
 
 The package contains
 
--   A JSON file specifying the design definitions of Kiva's style guide.
+-   Design token definitions authored as [W3C DTCG](https://design-tokens.github.io/community-group/format/) JSON.
+-   A [Style Dictionary](https://styledictionary.com) build that emits JS, CSS, and SCSS artifacts from those tokens.
 -   A custom Tailwind configuration set to Kiva's style guide that can be used as a preset for your Tailwind project.
 
 ## Install
@@ -17,6 +18,12 @@ import designTokens from '@kiva/kv-tokens';
 const primaryTextColor = designTokens.colors.theme.DEFAULT.text.primary;
 ```
 
+You can also import the generated tokens module directly (flat named exports plus the nested default):
+
+```js
+import tokens, { colorBrandDefault } from '@kiva/kv-tokens/tokens';
+```
+
 ## Using the Tailwind Preset
 
 ```js
@@ -47,6 +54,46 @@ Our Tailwind config has some differences to the standard install. Notably
     See our [Storybook](https://main--608b4cf87f686c00213841b1.chromatic.com/?path=/docs/base-styling-primitives--primitives) for possible names.
 -   Our spacing scale is based on 8px rather Tailwind's default 4px.
 
+## Package Exports
+
+| Subpath                        | Resolves to                 | Use for                                   |
+| ------------------------------ | --------------------------- | ----------------------------------------- |
+| `@kiva/kv-tokens`              | `index.js`                  | Default: tokens object + theme/tailwind helpers |
+| `@kiva/kv-tokens/tokens`       | `dist/js/tokens.js`         | Generated JS tokens (flat + nested)       |
+| `@kiva/kv-tokens/tailwind`     | `configs/tailwind.config.js`| Tailwind preset                           |
+| `@kiva/kv-tokens/css`          | `dist/css/tokens.css`       | Themed CSS custom properties              |
+| `@kiva/kv-tokens/scss`         | `dist/scss/tokens.scss`     | SCSS `$variable` map                      |
+
+## Editing Tokens
+
+Tokens live under [`tokens/`](tokens/) as DTCG JSON:
+
+-   [`tokens/core/`](tokens/core/) — primitive values (colors, sizes, typography, z-index, opacity).
+-   [`tokens/semantic/themes/`](tokens/semantic/themes/) — themed semantic tokens referencing primitives.
+
+To update a token, edit the relevant JSON file and run:
+
+```sh
+npm run build
+```
+
+This invokes Style Dictionary (via [`build/style-dictionary.config.js`](build/style-dictionary.config.js)) to regenerate the `dist/js/`, `dist/css/`, and `dist/scss/` artifacts, then runs [`build/build.js`](build/build.js) to copy fonts and emit the heading-underline SVG sprite.
+
+### How the Build Works
+
+Custom Style Dictionary formats and transforms live in [`build/formats/`](build/formats/) and [`build/transforms/`](build/transforms/):
+
+-   `kiva/js-tokens` — emits both flat named exports (`colorBrandDefault`) and a nested default export that matches the runtime shape used by `kivaColors.js`, `kivaTypography.js`, and `tailwind.config.js`.
+-   `kiva/css-themes` — emits a `:root` block for the default theme plus `[data-theme="..."]` blocks for each variant. Colors become RGB triples (`R, G, B`) so consumers can compose opacity with `rgb(var(--text-primary) / 50%)`.
+-   `kiva/dimension-to-number` — unwraps DTCG `{ value, unit }` dimension objects back to raw numbers for JS consumers.
+
+## Migrating from v3.x
+
+-   **The legacy `tw-exported-vars.scss` artifact (at `dist/kvui/tw-exported-vars.scss`) is no longer generated.** Import SCSS variables from `@kiva/kv-tokens/scss` instead.
+-   **SCSS variable names have changed** to Style Dictionary's kebab-case convention. For example, `$colors-brand-default` is now `$color-brand-default`. Full paths are generated from the token tree.
+-   **The hand-authored `primitives.js` has been removed.** The default export of `@kiva/kv-tokens` still resolves to the same nested shape (e.g. `designTokens.colors.theme.DEFAULT.text.primary`), so existing JS/Vue imports continue to work unchanged.
+-   **Token edits now flow through `tokens/*.json`.** If you previously patched `primitives.js` directly, move those values into the appropriate JSON file under `tokens/core/` or `tokens/semantic/themes/`.
+
 ## Contribution Guidelines
 
 The Kiva UI project is bound by a [Code of Conduct](https://github.com/kiva/ui/blob/master/code_of_conduct.md).

package/build/build.js

@@ -0,0 +1,23 @@
+import fs from 'node:fs';
+import { generateExternalSVG } from '../configs/kivaHeadingUnderline.js';
+
+// Note: dir is relative to the root of the kv-tokens package
+const dir = '../../dist/kvui';
+
+// Create dist folder
+if (!fs.existsSync(dir)) {
+	fs.mkdirSync(dir, { recursive: true });
+}
+
+// Copy fonts to dist folder
+const fontsDir = './assets/fonts';
+const fontFiles = fs.readdirSync(fontsDir).filter((file) => file.endsWith('.woff2'));
+fontFiles.forEach((file) => {
+	const srcPath = `${fontsDir}/${file}`;
+	const destPath = `${dir}/${file}`;
+	fs.copyFileSync(srcPath, destPath);
+});
+
+// Generate Heading Underline SVG
+const svg = generateExternalSVG();
+fs.writeFileSync(`${dir}/heading-underline.svg`, svg);

package/build/formats/css-themes.js

@@ -0,0 +1,60 @@
+// Emit a CSS file with :root (DEFAULT theme) plus [data-theme="..."] blocks
+// for every other theme found under theme tokens.
+
+const hexToRGB = (hex) => {
+	const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+	const replacedHex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
+	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(replacedHex);
+	return `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}`;
+};
+
+const CATEGORY_TO_PREFIX = {
+	text: 'text',
+	background: 'bg',
+	border: 'border',
+	'heading-underline': 'heading-underline',
+};
+
+const blockFor = (themeTokens) => {
+	const lines = [];
+	Object.keys(themeTokens).forEach((category) => {
+		const prefix = CATEGORY_TO_PREFIX[category] ?? category;
+		const props = themeTokens[category];
+		Object.keys(props).forEach((prop) => {
+			const tokenLeaf = props[prop];
+			const raw = tokenLeaf.$value ?? tokenLeaf.value;
+			const name = `--${prefix}-${prop}`;
+			if (category === 'heading-underline') {
+				lines.push(`\t${name}: url('/kvui/heading-underline.svg${raw}');`);
+			} else {
+				lines.push(`\t${name}: ${hexToRGB(raw)};`);
+			}
+		});
+	});
+	return lines.join('\n');
+};
+
+const cssThemesFormat = {
+	name: 'kiva/css-themes',
+	format: ({ dictionary }) => {
+		const themes = dictionary.tokens.theme ?? {};
+		const out = ['/* Do not edit directly. Generated by Style Dictionary. */', ''];
+		const defaultTheme = themes.DEFAULT;
+		if (defaultTheme) {
+			out.push(':root {');
+			out.push(blockFor(defaultTheme));
+			out.push('}');
+			out.push('');
+		}
+		Object.keys(themes).forEach((name) => {
+			if (name === 'DEFAULT') return;
+			out.push(`[data-theme="${name}"] {`);
+			out.push(blockFor(themes[name]));
+			out.push('}');
+			out.push('');
+		});
+		return out.join('\n');
+	},
+};
+
+export default cssThemesFormat;

package/build/formats/js-tokens.js

@@ -0,0 +1,91 @@
+// Style Dictionary v4 custom format.
+// Emits:
+//   1. Flat named exports: `export const colorBrandDefault = '#2AA967';`
+//   2. A nested default export matching the legacy primitives.js shape.
+
+const DTCG_TO_LEGACY_KEY = {
+	color: 'colors',
+	'font-family': 'fonts',
+	'font-weight': 'fontWeights',
+	'font-size': 'fontSizes',
+	'semantic-font-size': 'semanticFontSizes',
+	'line-height': 'lineHeights',
+	'line-height-absolute': 'lineHeightsAbsolute',
+	'letter-spacing': 'letterSpacings',
+	'border-width': 'borderWidths',
+	breakpoint: 'breakpoints',
+	radius: 'radii',
+	'z-index': 'zIndices',
+	space: 'space',
+	opacity: 'opacity',
+	theme: 'theme',
+};
+
+const restoreKey = (key) => {
+	if (/^n\d+_\d+$/.test(key)) return `-${key.slice(1).replace('_', '.')}`;
+	if (/^n\d+$/.test(key)) return `-${key.slice(1)}`;
+	if (/^\d+_\d+$/.test(key)) return key.replace('_', '.');
+	return key;
+};
+
+// camelCase that preserves underscores as digit separators so `space.1_5`
+// and `space.15` don't collide. Dashes split into word boundaries.
+const camelCase = (parts) => parts
+	.flatMap((p) => String(p).split('-').filter(Boolean))
+	.map((w, i) => {
+		const lower = w.toLowerCase();
+		if (i === 0) return lower;
+		return lower.charAt(0).toUpperCase() + lower.slice(1);
+	})
+	.join('');
+
+const isLeaf = (node) => node && typeof node === 'object' && '$value' in node;
+
+const buildNested = (tokens) => {
+	const out = {};
+	const walk = (node, path) => {
+		if (isLeaf(node)) {
+			const legacyPath = path.map((seg, i) => (i === 0 ? (DTCG_TO_LEGACY_KEY[seg] || seg) : restoreKey(seg)));
+			const finalPath = legacyPath[0] === 'theme' ? ['colors', ...legacyPath] : legacyPath;
+			let cursor = out;
+			for (let i = 0; i < finalPath.length - 1; i += 1) {
+				cursor[finalPath[i]] = cursor[finalPath[i]] ?? {};
+				cursor = cursor[finalPath[i]];
+			}
+			cursor[finalPath[finalPath.length - 1]] = node.$value;
+			return;
+		}
+		if (node && typeof node === 'object') {
+			Object.keys(node).forEach((k) => walk(node[k], [...path, k]));
+		}
+	};
+	walk(tokens, []);
+	out.colors = out.colors ?? {};
+	out.shadows = out.shadows ?? {};
+	return out;
+};
+
+const jsTokensFormat = {
+	name: 'kiva/js-tokens',
+	format: ({ dictionary }) => {
+		const flatLines = dictionary.allTokens.map((t) => {
+			const name = camelCase(t.path);
+			const v = t.$value;
+			const value = typeof v === 'number' ? v : JSON.stringify(v);
+			return `export const ${name} = ${value};`;
+		});
+		const nested = buildNested(dictionary.tokens);
+		return [
+			'// Do not edit directly. Generated by Style Dictionary.',
+			'',
+			...flatLines,
+			'',
+			`const tokens = ${JSON.stringify(nested, null, '\t')};`,
+			'',
+			'export default tokens;',
+			'',
+		].join('\n');
+	},
+};
+
+export default jsTokensFormat;

package/build/style-dictionary.config.js

@@ -0,0 +1,45 @@
+import StyleDictionary from 'style-dictionary';
+import jsTokensFormat from './formats/js-tokens.js';
+import cssThemesFormat from './formats/css-themes.js';
+import dimensionToNumberTransform from './transforms/dimension-to-number.js';
+
+StyleDictionary.registerFormat(jsTokensFormat);
+StyleDictionary.registerFormat(cssThemesFormat);
+StyleDictionary.registerTransform(dimensionToNumberTransform);
+
+export default {
+	source: ['tokens/**/*.json'],
+	platforms: {
+		js: {
+			transforms: ['attribute/cti', 'name/kebab', 'kiva/dimension-to-number'],
+			buildPath: 'dist/js/',
+			files: [
+				{
+					destination: 'tokens.js',
+					format: 'kiva/js-tokens',
+				},
+			],
+		},
+		css: {
+			transforms: ['attribute/cti', 'name/kebab'],
+			buildPath: 'dist/css/',
+			files: [
+				{
+					destination: 'tokens.css',
+					format: 'kiva/css-themes',
+				},
+			],
+		},
+		scss: {
+			transforms: ['attribute/cti', 'name/kebab', 'kiva/dimension-to-number'],
+			buildPath: 'dist/scss/',
+			files: [
+				{
+					destination: 'tokens.scss',
+					format: 'scss/variables',
+					options: { outputReferences: false },
+				},
+			],
+		},
+	},
+};

package/build/transforms/dimension-to-number.js

@@ -0,0 +1,17 @@
+// Transform: dimension objects -> raw numeric value.
+// DTCG encodes dimensions as { value: 16, unit: 'px' }; legacy primitives.js
+// stored them as raw numbers. Strip the unit for JS output.
+
+const dimensionToNumberTransform = {
+	name: 'kiva/dimension-to-number',
+	type: 'value',
+	transitive: true,
+	filter: (token) => token.$type === 'dimension' || token.type === 'dimension',
+	transform: (token) => {
+		const v = token.$value ?? token.value;
+		if (v && typeof v === 'object' && 'value' in v) return v.value;
+		return v;
+	},
+};
+
+export default dimensionToNumberTransform;

package/configs/kivaColors.js

@@ -1,5 +1,5 @@
 import { hexToRGB } from './util.js';
-import designTokens from '../primitives.js';
+import designTokens from '../dist/js/tokens.js';
 
 const {
 	DEFAULT: defaultThemeTokens,

package/configs/kivaHeadingUnderline.js

@@ -1,4 +1,4 @@
-import designTokens from '../primitives.js';
+import designTokens from '../dist/js/tokens.js';
 import { base64 } from './util.js';
 import underlinePath from './underlinePath.js';
 

package/configs/kivaTypography.js

@@ -1,5 +1,5 @@
 import { rem, em } from './util.js';
-import designTokens from '../primitives.js';
+import designTokens from '../dist/js/tokens.js';
 
 const {
 	fonts,

package/configs/tailwind.config.js

@@ -7,7 +7,7 @@ import {
 	webFonts,
 } from './kivaTypography.js';
 import { defaultTheme, buildColorChoices } from './kivaColors.js';
-import designTokens from '../primitives.js';
+import designTokens from '../dist/js/tokens.js';
 import { rem } from './util.js';
 
 const {

package/configs/util.js

@@ -19,18 +19,3 @@ export const base64 = (str) => {
 	if (typeof window === 'undefined') return Buffer.from(str).toString('base64');
 	return window.btoa(str);
 };
-
-export const flattenJSON = (obj, parentKey = '') => {
-	const flattened = {};
-
-	Object.keys(obj).forEach((key) => {
-		const newKey = parentKey ? `${parentKey}-${key}` : key;
-		if (typeof obj[key] === 'object') {
-			Object.assign(flattened, flattenJSON(obj[key], newKey));
-		} else {
-			flattened[newKey] = obj[key];
-		}
-	});
-
-	return flattened;
-};

package/dist/css/tokens.css

@@ -0,0 +1,266 @@
+/* Do not edit directly. Generated by Style Dictionary. */
+
+:root {
+	--text-primary: 34, 56, 41;
+	--text-primary-inverse: 237, 244, 241;
+	--text-secondary: 117, 117, 117;
+	--text-tertiary: 158, 158, 158;
+	--text-action: 39, 106, 67;
+	--text-action-highlight: 34, 56, 41;
+	--text-caution: 89, 50, 7;
+	--text-caution-highlight: 153, 98, 16;
+	--text-danger: 92, 42, 34;
+	--text-danger-highlight: 162, 69, 54;
+	--bg-primary: 255, 255, 255;
+	--bg-primary-inverse: 34, 56, 41;
+	--bg-secondary: 237, 244, 241;
+	--bg-tertiary: 196, 196, 196;
+	--bg-action: 39, 106, 67;
+	--bg-action-highlight: 34, 56, 41;
+	--bg-caution: 248, 205, 105;
+	--bg-caution-highlight: 248, 242, 230;
+	--bg-danger: 224, 152, 141;
+	--bg-danger-highlight: 249, 240, 239;
+	--border-primary: 80, 80, 80;
+	--border-primary-inverse: 255, 255, 255;
+	--border-secondary: 117, 117, 117;
+	--border-tertiary: 196, 196, 196;
+	--border-action: 39, 106, 67;
+	--border-action-highlight: 34, 56, 41;
+	--border-caution: 248, 205, 105;
+	--border-caution-highlight: 248, 242, 230;
+	--border-danger: 224, 152, 141;
+	--border-danger-highlight: 249, 240, 239;
+	--heading-underline-primary: url('/kvui/heading-underline.svg#2AA967');
+}
+
+[data-theme="dark-green"] {
+	--text-primary: 245, 245, 245;
+	--text-primary-inverse: 33, 33, 33;
+	--text-secondary: 158, 158, 158;
+	--text-tertiary: 158, 158, 158;
+	--text-action: 43, 124, 95;
+	--text-action-highlight: 39, 112, 86;
+	--text-danger: 228, 42, 42;
+	--text-danger-highlight: 206, 38, 38;
+	--bg-primary: 42, 169, 103;
+	--bg-primary-inverse: 245, 245, 245;
+	--bg-secondary: 34, 135, 82;
+	--bg-tertiary: 224, 224, 224;
+	--bg-action: 43, 124, 95;
+	--bg-action-highlight: 39, 112, 86;
+	--bg-danger: 228, 42, 42;
+	--bg-danger-highlight: 206, 38, 38;
+	--bg-caution: 230, 203, 85;
+	--bg-caution-highlight: 217, 188, 59;
+	--border-primary: 33, 33, 33;
+	--border-action: 43, 124, 95;
+	--border-action-highlight: 39, 112, 86;
+	--border-danger: 228, 42, 42;
+	--border-danger-highlight: 206, 38, 38;
+}
+
+[data-theme="dark-mint"] {
+	--text-primary: 255, 255, 255;
+	--text-primary-inverse: 245, 245, 245;
+	--text-action: 149, 212, 179;
+	--text-action-highlight: 39, 112, 86;
+	--text-danger: 228, 42, 42;
+	--text-danger-highlight: 206, 38, 38;
+	--bg-primary: 69, 69, 69;
+	--bg-primary-inverse: 0, 0, 0;
+	--bg-secondary: 245, 245, 245;
+	--bg-tertiary: 224, 224, 224;
+	--bg-action: 43, 124, 95;
+	--bg-action-highlight: 39, 112, 86;
+	--bg-danger: 228, 42, 42;
+	--bg-danger-highlight: 206, 38, 38;
+	--bg-caution: 230, 203, 85;
+	--bg-caution-highlight: 217, 188, 59;
+	--border-primary: 33, 33, 33;
+	--border-action: 43, 124, 95;
+	--border-action-highlight: 39, 112, 86;
+	--border-danger: 228, 42, 42;
+	--border-danger-highlight: 206, 38, 38;
+}
+
+[data-theme="dark-stone"] {
+	--text-primary: 245, 245, 245;
+	--text-primary-inverse: 33, 33, 33;
+	--text-secondary: 158, 158, 158;
+	--text-tertiary: 117, 117, 117;
+	--text-action: 74, 182, 126;
+	--text-action-highlight: 106, 195, 149;
+	--text-danger: 228, 42, 42;
+	--text-danger-highlight: 206, 38, 38;
+	--bg-primary: 0, 0, 0;
+	--bg-primary-inverse: 245, 245, 245;
+	--bg-secondary: 46, 39, 30;
+	--bg-tertiary: 69, 69, 69;
+	--bg-action: 74, 182, 126;
+	--bg-action-highlight: 106, 195, 149;
+	--bg-danger: 228, 42, 42;
+	--bg-danger-highlight: 206, 38, 38;
+	--bg-caution: 230, 203, 85;
+	--bg-caution-highlight: 217, 188, 59;
+	--border-primary: 245, 245, 245;
+	--border-primary-inverse: 33, 33, 33;
+	--border-secondary: 158, 158, 158;
+	--border-tertiary: 117, 117, 117;
+	--border-action: 74, 182, 126;
+	--border-action-highlight: 106, 195, 149;
+	--border-danger: 228, 42, 42;
+	--border-danger-highlight: 206, 38, 38;
+}
+
+[data-theme="dark"] {
+	--text-primary: 245, 245, 245;
+	--text-primary-inverse: 33, 33, 33;
+	--text-secondary: 158, 158, 158;
+	--text-tertiary: 117, 117, 117;
+	--text-action: 74, 182, 126;
+	--text-action-highlight: 106, 195, 149;
+	--text-danger: 228, 42, 42;
+	--text-danger-highlight: 206, 38, 38;
+	--bg-primary: 0, 0, 0;
+	--bg-primary-inverse: 245, 245, 245;
+	--bg-secondary: 33, 33, 33;
+	--bg-tertiary: 69, 69, 69;
+	--bg-action: 74, 182, 126;
+	--bg-action-highlight: 106, 195, 149;
+	--bg-danger: 228, 42, 42;
+	--bg-danger-highlight: 206, 38, 38;
+	--bg-caution: 230, 203, 85;
+	--bg-caution-highlight: 217, 188, 59;
+	--border-primary: 245, 245, 245;
+	--border-primary-inverse: 33, 33, 33;
+	--border-secondary: 158, 158, 158;
+	--border-tertiary: 117, 117, 117;
+	--border-action: 74, 182, 126;
+	--border-action-highlight: 106, 195, 149;
+	--border-danger: 228, 42, 42;
+	--border-danger-highlight: 206, 38, 38;
+}
+
+[data-theme="green-dark"] {
+	--text-primary: 237, 244, 241;
+	--text-primary-inverse: 34, 56, 41;
+	--text-secondary: 196, 196, 196;
+	--text-tertiary: 224, 224, 224;
+	--text-action: 120, 199, 159;
+	--text-action-highlight: 237, 244, 241;
+	--bg-primary: 34, 56, 41;
+	--bg-primary-inverse: 255, 255, 255;
+	--bg-secondary: 39, 106, 67;
+	--bg-tertiary: 196, 196, 196;
+	--bg-action: 120, 199, 159;
+	--bg-action-highlight: 237, 244, 241;
+	--bg-caution-highlight: 248, 242, 230;
+	--bg-danger-highlight: 249, 240, 239;
+	--border-primary: 237, 244, 241;
+	--border-primary-inverse: 34, 56, 41;
+	--border-secondary: 39, 106, 67;
+	--border-action: 120, 199, 159;
+	--border-action-highlight: 237, 244, 241;
+	--border-caution-highlight: 248, 242, 230;
+	--border-danger-highlight: 249, 240, 239;
+}
+
+[data-theme="green-light"] {
+	--bg-primary: 237, 244, 241;
+	--bg-secondary: 255, 255, 255;
+}
+
+[data-theme="marigold-light"] {
+	--text-primary: 89, 50, 7;
+	--text-primary-inverse: 248, 242, 230;
+	--text-action: 153, 98, 16;
+	--text-action-highlight: 89, 50, 7;
+	--bg-primary: 248, 242, 230;
+	--bg-primary-inverse: 89, 50, 7;
+	--bg-secondary: 255, 255, 255;
+	--bg-tertiary: 196, 196, 196;
+	--bg-action: 153, 98, 16;
+	--bg-action-highlight: 89, 50, 7;
+	--bg-caution-highlight: 248, 242, 230;
+	--bg-danger-highlight: 249, 240, 239;
+	--border-primary: 153, 98, 16;
+	--border-primary-inverse: 248, 242, 230;
+	--border-secondary: 248, 205, 105;
+	--border-tertiary: 255, 255, 255;
+	--border-action: 153, 98, 16;
+	--border-action-highlight: 89, 50, 7;
+	--border-caution-highlight: 248, 242, 230;
+	--border-danger-highlight: 249, 240, 239;
+	--heading-underline-primary: url('/kvui/heading-underline.svg#F8CD69');
+}
+
+[data-theme="mint"] {
+	--text-primary: 33, 33, 33;
+	--text-primary-inverse: 245, 245, 245;
+	--text-secondary: 34, 135, 82;
+	--text-tertiary: 40, 160, 98;
+	--text-action: 43, 124, 95;
+	--text-action-highlight: 39, 112, 86;
+	--text-danger: 228, 42, 42;
+	--text-danger-highlight: 206, 38, 38;
+	--bg-primary: 149, 212, 179;
+	--bg-primary-inverse: 0, 0, 0;
+	--bg-secondary: 245, 245, 245;
+	--bg-tertiary: 224, 224, 224;
+	--bg-action: 43, 124, 95;
+	--bg-action-highlight: 39, 112, 86;
+	--bg-danger: 228, 42, 42;
+	--bg-danger-highlight: 206, 38, 38;
+	--bg-caution: 230, 203, 85;
+	--bg-caution-highlight: 217, 188, 59;
+	--border-primary: 33, 33, 33;
+	--border-tertiary: 74, 182, 126;
+	--border-action: 43, 124, 95;
+	--border-action-highlight: 39, 112, 86;
+	--border-danger: 228, 42, 42;
+	--border-danger-highlight: 206, 38, 38;
+}
+
+[data-theme="stone-dark"] {
+	--text-primary: 243, 241, 239;
+	--text-primary-inverse: 46, 39, 30;
+	--text-secondary: 196, 196, 196;
+	--text-tertiary: 224, 224, 224;
+	--text-action: 223, 208, 188;
+	--text-action-highlight: 243, 241, 239;
+	--bg-primary: 46, 39, 30;
+	--bg-primary-inverse: 243, 241, 239;
+	--bg-secondary: 99, 85, 68;
+	--bg-action: 223, 208, 188;
+	--bg-action-highlight: 243, 241, 239;
+	--bg-caution-highlight: 248, 242, 230;
+	--bg-danger-highlight: 249, 240, 239;
+	--border-primary: 243, 241, 239;
+	--border-primary-inverse: 46, 39, 30;
+	--border-secondary: 99, 85, 68;
+	--border-action: 223, 208, 188;
+	--border-action-highlight: 243, 241, 239;
+	--border-caution-highlight: 248, 242, 230;
+	--border-danger-highlight: 249, 240, 239;
+	--heading-underline-primary: url('/kvui/heading-underline.svg#AA9E8D');
+}
+
+[data-theme="stone-light"] {
+	--text-primary: 46, 39, 30;
+	--text-primary-inverse: 243, 241, 239;
+	--text-action: 99, 85, 68;
+	--text-action-highlight: 46, 39, 30;
+	--bg-primary: 243, 241, 239;
+	--bg-primary-inverse: 46, 39, 30;
+	--bg-secondary: 255, 255, 255;
+	--bg-action: 99, 85, 68;
+	--bg-action-highlight: 46, 39, 30;
+	--border-primary: 99, 85, 68;
+	--border-primary-inverse: 243, 241, 239;
+	--border-secondary: 170, 158, 141;
+	--border-tertiary: 255, 255, 255;
+	--border-action: 99, 85, 68;
+	--border-action-highlight: 46, 39, 30;
+	--heading-underline-primary: url('/kvui/heading-underline.svg#AA9E8D');
+}