unholy-design-tokens 1.0.0

package/WHY_THIS_EXISTS.md

@@ -0,0 +1,74 @@
+# 🎯 Why this exists
+
+Design tokens are often explained in abstract, design-heavy language that makes them hard to adopt for engineers
+
+## _What are design tokens_?
+
+Here are some definitions from popular design systems:
+
+<details>
+<summary>Expand all definitions</summary>
+
+[Material Design](https://m3.material.io/foundations/design-tokens/overview):
+
+> Design tokens are small, reusable design decisions that make up a design system's visual style. Tokens replace static values with self-explanatory names.
+
+[Atlassian](https://atlassian.design/foundations/tokens/design-tokens)
+
+> Design tokens are name and value pairings that represent small, repeatable design decisions. A token can be a color, font style, unit of white space, or even a motion animation designed for a specific need.
+
+[Pajamas Design System](https://design.gitlab.com/product-foundations/design-tokens/)
+
+> Design tokens are a methodology to pair design decisions with options from the design system. Design tokens abstract out variables like color, typography, and spacing for consistent and meaningful user interface (UI) design across tools and platforms. The following is a basic example of a design token, where design.token.name is the name, and #abcdef is the value.
+
+[Spectrum](https://spectrum.adobe.com/page/design-tokens/)
+
+> Design tokens are design decisions, translated into data. They act as a “source of truth” to help ensure that product experiences feel unified and cohesive.
+
+The [Specs](https://www.designtokens.org/tr/2025.10/#abstract)
+
+> Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale.
+
+The [Specs Glossary](https://www.designtokens.org/glossary/#design-token)
+
+> The single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages.
+
+</details>
+
+## There's a lot of confusion around different terminology and practical implementation.
+
+The best example is `semantic tokens`. _What are semantic tokens_?
+
+The most common explanation is:
+
+> Semantic tokens are design tokens that are named according to their meaning and purpose within the design system, rather than their specific visual attributes.
+
+Sometimes it includes "context" or not.
+
+They are different answers which cause mismatches in understanding:
+
+### From a designer's perspective, semantic tokens are often colors with meaning (e.g., "error", "warning"). Some teams use:
+
+```css
+--color-primary-700: var(--color-blue-700);
+--color-error: var(--color-red-600);
+```
+
+### From a developer's perspective, semantic tokens are colors that adapt based on context (e.g "background", "text"). Some teams use:
+
+```css
+--color-bg-primary-hover: var(--color-blue-700);
+--color-text-error: var(--color-red-600);
+```
+
+Some article project the future _semantic_ ([Figma - The future of design systems is semantic](https://www.figma.com/blog/the-future-of-design-systems-is-semantic/#closing-the-gap-between-design-and-code)) without mentoning the word `semantic`after.
+
+---
+
+1. Primitives = raw hues (never touched)
+2. Brand palette = brand colors (rarely changed)
+3. Semantic roles = meaning (design language) ← you use this
+4. Components = actual bg/fg/border config ← you use this
+
+// emoji arrow
+:arrow_right: This project is a playground to try to simplify the concept of design tokens and provide a practical framework for implementing and customize them using Style Dictionary.

package/bin/build-tokens.ts

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+import { program } from 'commander'
+import fs from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import { buildStyleDictionary } from '../scripts/build-style-dictionary'
+
+program
+  .name('build-tokens')
+  .description('Build and copy tokens to the destination folder.')
+  .argument('[dir]', 'target directory', './build/')
+  .option('-f, --force', 'overwrite existing files')
+  .action(async (dir, options) => {
+    const targetDir = path.resolve(process.cwd(), dir)
+
+    // 1) temp dir
+    const tmpDir = await fs.mkdtemp(path.join(os.tmpdir(), 'tokens-'))
+
+    // 2) build Style Dictionary into temp
+    await buildStyleDictionary(tmpDir)
+
+    // 3) copy result to target
+    await fs.mkdir(targetDir, { recursive: true })
+    await fs.cp(tmpDir, targetDir, {
+      recursive: true,
+      force: options.force ?? true,
+    })
+
+    // 4) cleanup
+    await fs.rm(tmpDir, { recursive: true, force: true })
+  })
+
+program.parse()

package/build/css/bg/bg.css

@@ -0,0 +1,60 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-bg-page: #edda9f;
+  --color-bg-subtle: #edda9f;
+  --color-bg-elevated: #ffffff;
+  --color-bg-inset: #c2b382;
+  --color-bg-primary: #65572a;
+  --color-bg-primary-hover: oklch(from #65572a lightness(+7%));
+  --color-bg-primary-active: #1e1908;
+  --color-bg-primary-subtle: #fbefd2;
+  --color-bg-accent: #b4363b;
+  --color-bg-accent-hover: #7a2225;
+  --color-bg-accent-subtle: #fbeeee;
+  --color-bg-neutral: #494b49;
+  --color-bg-neutral-strong: #010101;
+  --color-bg-info: #ac9f70;
+  --color-bg-warning: #fbefd2;
+  --color-bg-success: #dce0dc;
+  --color-bg-secondary-lightness: var(--color-secondary-lightness, 0);
+  --color-bg-secondary-chroma: var(--color-secondary-chroma, 0);
+  --color-bg-secondary-hue: var(--color-secondary-hue, 0);
+  --color-bg-secondary-opacity: var(--color-secondary-opacity, 0);
+  --color-bg-secondary: oklch(var(--color-bg-secondary-lightness) var(--color-bg-secondary-chroma) var(--color-bg-secondary-hue) / var(--color-bg-secondary-opacity));
+  --color-bg-danger-lightness: var(--color-danger-lightness, 0);
+  --color-bg-danger-chroma: var(--color-danger-chroma, 0);
+  --color-bg-danger-hue: var(--color-danger-hue, 0);
+  --color-bg-danger-opacity: var(--color-danger-opacity, 1);
+  --color-bg-danger: oklch(var(--color-bg-danger-lightness) var(--color-bg-danger-chroma) var(--color-bg-danger-hue) / var(--color-bg-danger-opacity));
+  --color-bg-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
+  --color-bg-h: var(--theme-color-bg-hue);
+  --color-bg-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
+  --color-bg-l: var(--theme-color-bg-lightness);
+  --color-bg-opacity: var(--color-primary-opacity);
+  --color-bg-o: var(--theme-color-bg-opacity);
+  --bg-primary: #65572a;
+  --bg-primary-hover: #403718;
+  --bg-primary-active: #1e1908;
+  --bg-primary-focus: #fbefd2;
+  --bg-primary-disable: #fbefd2;
+  --bg-accent: #b4363b;
+  --bg-accent-hover: #7a2225;
+  --bg-accent-active: #450f11;
+  --bg-accent-focus: #fbeeee;
+  --bg-accent-disable: #fbeeee;
+  --bg-neutral: #494b49;
+  --bg-neutral-hover: #2a2b2a;
+  --bg-neutral-active: #101110;
+  --bg-neutral-focus: #dce0dc;
+  --bg-neutral-disable: #dce0dc;
+  --bg-info: #fbeeee;
+  --bg-warning: #fbefd2;
+  --bg-success: #dce0dc;
+  --component-bg-lightness: calc(var(--color-bg-lightness) + var(--variant-bg-lightness) + var(--state-bg-lightness));
+  --component-bg-chroma: calc(var(--color-bg-chroma) + var(--variant-bg-chroma) + var(--state-bg-chroma));
+  --component-bg-hue: calc(var(--color-bg-hue));
+  --component-bg-opacity: calc(var(--color-bg-opacity) + var(--variant-bg-opacity) + var(--state-bg-opacity));
+}

package/build/css/border/border.css

@@ -0,0 +1,51 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --border-width-base: 2px;
+  --border-width-scale: 1.25;
+  --border-width-default: var(--border-width-base);
+  --border-width-xsmall: calc(var(--border-width-base) / 2 * var(--border-width-scale));
+  --border-width-small: calc(var(--border-width-base) * var(--border-width-scale));
+  --border-width-medium: var(--border-width-base);
+  --border-width-large: calc(var(--border-width-base) * 2 * var(--border-width-scale));
+  --border-style-solid: solid;
+  --border-style-dashed: dashed;
+  --border-style-dotted: dotted;
+  --border-style-double: double;
+  --border-style-none: none;
+  --border-style-default: var(--border-style-solid);
+  --border-radius-1: 1px;
+  --border-radius-2: 2px;
+  --border-radius-4: 4px;
+  --border-radius-base: 0;
+  --border-radius-0-5: 0.5px;
+  --border-radius-scale: 1.5;
+  --color-border-subtle: #c2b382;
+  --color-border-default: #998d65;
+  --color-border-strong: #72694b;
+  --color-border-primary: #65572a;
+  --color-border-focus: #b4363b;
+  --color-border-info: #f3cbcc;
+  --color-border-warning: #e3c567;
+  --color-border-success: #b5b8b5;
+  --color-border-neutral: #8f928f;
+  --color-border-secondary-lightness: var(--color-secondary-lightness, 0);
+  --color-border-secondary-chroma: var(--color-secondary-chroma, 0);
+  --color-border-secondary-hue: var(--color-secondary-hue, 0);
+  --color-border-secondary-opacity: var(--color-secondary-opacity, 1);
+  --color-border-secondary: oklch(var(--color-border-secondary-lightness) var(--color-border-secondary-chroma) var(--color-border-secondary-hue) / var(--color-border-secondary-opacity));
+  --color-border-danger-lightness: var(--color-danger-lightness, 0);
+  --color-border-danger-chroma: var(--color-danger-chroma, 0);
+  --color-border-danger-hue: var(--color-danger-hue, 0);
+  --color-border-danger-opacity: var(--color-danger-opacity, 1);
+  --color-border-danger: oklch(var(--color-border-danger-lightness) var(--color-border-danger-chroma) var(--color-border-danger-hue) / var(--color-border-danger-opacity));
+  --color-border-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
+  --color-border-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
+  --color-border-opacity: var(--color-primary-opacity);
+  --component-border-lightness: calc(var(--color-border-lightness) + var(--variant-border-lightness) + var(--state-border-lightness));
+  --component-border-chroma: calc(var(--color-border-chroma) + var(--variant-border-chroma) + var(--state-border-chroma));
+  --component-border-hue: calc(var(--color-border-hue));
+  --component-border-opacity: calc(var(--color-border-opacity) + var(--variant-border-opacity) + var(--state-border-opacity));
+}

package/build/css/colors.css

@@ -0,0 +1,204 @@
+/* Collection name: Color Color-pool */
+/* Mode: Light */
+:root {
+
+/* ------------------------------------------------------------ */
+/*                          Color-pool                          */
+/* ------------------------------------------------------------ */
+--color-pool-straw-gold-100: #fbefd2;
+--color-pool-straw-gold-200: #e3c567;
+--color-pool-straw-gold-300: #b79f52;
+--color-pool-straw-gold-400: #8d7a3d;
+--color-pool-straw-gold-500: #65572a;
+--color-pool-straw-gold-600: #403718;
+--color-pool-straw-gold-700: #1e1908;
+--color-pool-straw-gold-800: #0a0600;
+--color-pool-straw-gold-900: #030200;
+--color-pool-straw-gold-base: #e3c567;
+--color-pool-graphite-100: #dce0dc;
+--color-pool-graphite-200: #b5b8b5;
+--color-pool-graphite-300: #8f928f;
+--color-pool-graphite-400: #6b6d6b;
+--color-pool-graphite-500: #494b49;
+--color-pool-graphite-600: #2a2b2a;
+--color-pool-graphite-700: #101110;
+--color-pool-graphite-800: #050505;
+--color-pool-graphite-900: #010101;
+--color-pool-graphite-base: #2a2b2a;
+--color-pool-intense-cherry-100: #fbeeee;
+--color-pool-intense-cherry-200: #f3cbcc;
+--color-pool-intense-cherry-300: #ea9799;
+--color-pool-intense-cherry-400: #e4595d;
+--color-pool-intense-cherry-500: #b4363b;
+--color-pool-intense-cherry-600: #7a2225;
+--color-pool-intense-cherry-700: #450f11;
+--color-pool-intense-cherry-800: #1c0304;
+--color-pool-intense-cherry-900: #060001;
+--color-pool-intense-cherry-base: #b4363b;
+--color-pool-vanilla-custard-100: #edda9f;
+--color-pool-vanilla-custard-200: #c2b382;
+--color-pool-vanilla-custard-300: #998d65;
+--color-pool-vanilla-custard-400: #72694b;
+--color-pool-vanilla-custard-500: #4e4731;
+--color-pool-vanilla-custard-600: #2c271a;
+--color-pool-vanilla-custard-700: #131109;
+--color-pool-vanilla-custard-800: #040302;
+--color-pool-vanilla-custard-900: #010101;
+--color-pool-vanilla-custard-base: #edda9f;
+--color-pool-vanilla-cream-100: #f7eed3;
+--color-pool-vanilla-cream-200: #d6c68c;
+--color-pool-vanilla-cream-300: #ac9f70;
+--color-pool-vanilla-cream-400: #857a55;
+--color-pool-vanilla-cream-500: #5f573b;
+--color-pool-vanilla-cream-600: #3b3624;
+--color-pool-vanilla-cream-700: #1b180e;
+--color-pool-vanilla-cream-800: #060503;
+--color-pool-vanilla-cream-900: #010101;
+--color-pool-vanilla-cream-base: #f7eed3;
+
+/* ------------------------------------------------------------ */
+/*                          Primitive                          */
+/* ------------------------------------------------------------ */
+--color-yellow-100: var(--color-pool-straw-gold-100);
+--color-yellow-200: var(--color-pool-straw-gold-200);
+--color-yellow-300: var(--color-pool-straw-gold-300);
+--color-yellow-400: var(--color-pool-straw-gold-400);
+--color-yellow-500: var(--color-pool-straw-gold-500);
+--color-yellow-600: var(--color-pool-straw-gold-600);
+--color-yellow-700: var(--color-pool-straw-gold-700);
+--color-yellow-800: var(--color-pool-straw-gold-800);
+--color-yellow-900: var(--color-pool-straw-gold-900);
+--color-yellow-base: var(--color-pool-straw-gold-base);
+--color-graphite-100: var(--color-pool-graphite-100);
+--color-graphite-200: var(--color-pool-graphite-200);
+--color-graphite-300: var(--color-pool-graphite-300);
+--color-graphite-400: var(--color-pool-graphite-400);
+--color-graphite-500: var(--color-pool-graphite-500);
+--color-graphite-600: var(--color-pool-graphite-600);
+--color-graphite-700: var(--color-pool-graphite-700);
+--color-graphite-800: var(--color-pool-graphite-800);
+--color-graphite-900: var(--color-pool-graphite-900);
+--color-graphite-base: var(--color-pool-graphite-base);
+--color-intense-cherry-100: var(--color-pool-intense-cherry-100);
+--color-intense-cherry-200: var(--color-pool-intense-cherry-200);
+--color-intense-cherry-300: var(--color-pool-intense-cherry-300);
+--color-intense-cherry-400: var(--color-pool-intense-cherry-400);
+--color-intense-cherry-500: var(--color-pool-intense-cherry-500);
+--color-intense-cherry-600: var(--color-pool-intense-cherry-600);
+--color-intense-cherry-700: var(--color-pool-intense-cherry-700);
+--color-intense-cherry-800: var(--color-pool-intense-cherry-800);
+--color-intense-cherry-900: var(--color-pool-intense-cherry-900);
+--color-intense-cherry-base: var(--color-pool-intense-cherry-base);
+--color-vanilla-custard-100: var(--color-pool-vanilla-custard-100);
+--color-vanilla-custard-200: var(--color-pool-vanilla-custard-200);
+--color-vanilla-custard-300: var(--color-pool-vanilla-custard-300);
+--color-vanilla-custard-400: var(--color-pool-vanilla-custard-400);
+--color-vanilla-custard-500: var(--color-pool-vanilla-custard-500);
+--color-vanilla-custard-600: var(--color-pool-vanilla-custard-600);
+--color-vanilla-custard-700: var(--color-pool-vanilla-custard-700);
+--color-vanilla-custard-800: var(--color-pool-vanilla-custard-800);
+--color-vanilla-custard-900: var(--color-pool-vanilla-custard-900);
+--color-vanilla-custard-base: var(--color-pool-vanilla-custard-base);
+--color-vanilla-cream-100: var(--color-pool-vanilla-cream-100);
+--color-vanilla-cream-200: var(--color-pool-vanilla-cream-200);
+--color-vanilla-cream-300: var(--color-pool-vanilla-cream-300);
+--color-vanilla-cream-400: var(--color-pool-vanilla-cream-400);
+--color-vanilla-cream-500: var(--color-pool-vanilla-cream-500);
+--color-vanilla-cream-600: var(--color-pool-vanilla-cream-600);
+--color-vanilla-cream-700: var(--color-pool-vanilla-cream-700);
+--color-vanilla-cream-800: var(--color-pool-vanilla-cream-800);
+--color-vanilla-cream-900: var(--color-pool-vanilla-cream-900);
+--color-vanilla-cream-base: var(--color-pool-vanilla-cream-base);
+
+/* ------------------------------------------------------------ */
+/*                           Semantic                           */
+/* ------------------------------------------------------------ */
+--color-primary-100: var(--color-yellow-100);
+--color-primary-200: var(--color-yellow-200);
+--color-primary-300: var(--color-yellow-300);
+--color-primary-400: var(--color-yellow-400);
+--color-primary-500: var(--color-yellow-500);
+--color-primary-600: var(--color-yellow-600);
+--color-primary-700: var(--color-yellow-700);
+--color-primary-800: var(--color-yellow-800);
+--color-primary-900: var(--color-yellow-900);
+--color-primary-base: var(--color-yellow-base);
+--color-secondary-100: var(--color-vanilla-custard-100);
+--color-secondary-200: var(--color-vanilla-custard-200);
+--color-secondary-300: var(--color-vanilla-custard-300);
+--color-secondary-400: var(--color-vanilla-custard-400);
+--color-secondary-500: var(--color-vanilla-custard-500);
+--color-secondary-600: var(--color-vanilla-custard-600);
+--color-secondary-700: var(--color-vanilla-custard-700);
+--color-secondary-800: var(--color-vanilla-custard-800);
+--color-secondary-900: var(--color-vanilla-custard-900);
+--color-secondary-base: var(--color-vanilla-custard-base);
+--color-accent-100: var(--color-intense-cherry-100);
+--color-accent-200: var(--color-intense-cherry-200);
+--color-accent-300: var(--color-intense-cherry-300);
+--color-accent-400: var(--color-intense-cherry-400);
+--color-accent-500: var(--color-intense-cherry-500);
+--color-accent-600: var(--color-intense-cherry-600);
+--color-accent-700: var(--color-intense-cherry-700);
+--color-accent-800: var(--color-intense-cherry-800);
+--color-accent-900: var(--color-intense-cherry-900);
+--color-accent-base: var(--color-intense-cherry-base);
+--color-neutral-100: var(--color-graphite-100);
+--color-neutral-200: var(--color-graphite-200);
+--color-neutral-300: var(--color-graphite-300);
+--color-neutral-400: var(--color-graphite-400);
+--color-neutral-500: var(--color-graphite-500);
+--color-neutral-600: var(--color-graphite-600);
+--color-neutral-700: var(--color-graphite-700);
+--color-neutral-800: var(--color-graphite-800);
+--color-neutral-900: var(--color-graphite-900);
+--color-neutral-base: var(--color-graphite-base);
+--color-info-100: var(--color-vanilla-cream-300);
+--color-info-200: var(--color-vanilla-cream-500);
+--color-info-300: var(--color-vanilla-cream-700);
+--color-info-400: var(--color-vanilla-cream-900);
+--color-info-500: var(--color-vanilla-cream-base);
+--color-info-600: var(--color-vanilla-cream-100);
+--color-info-700: var(--color-vanilla-cream-200);
+--color-info-800: var(--color-vanilla-cream-400);
+--color-info-900: var(--color-vanilla-cream-600);
+
+/* ------------------------------------------------------------ */
+/*                            Intent                            */
+/* ------------------------------------------------------------ */
+--color-bg-page: var(--color-secondary-base);
+--color-bg-subtle: var(--color-secondary-100);
+--color-bg-elevated: #ffffff;
+--color-bg-inset: var(--color-secondary-200);
+--color-bg-primary: var(--color-primary-500);
+--color-bg-primary-hover: oklch(from var(--color-primary-500) lightness(+7%));
+--color-bg-primary-active: var(--color-primary-700);
+--color-bg-primary-subtle: var(--color-primary-100);
+--color-bg-accent: var(--color-accent-500);
+--color-bg-accent-hover: var(--color-accent-600);
+--color-bg-accent-subtle: var(--color-accent-100);
+--color-bg-neutral: var(--color-neutral-500);
+--color-bg-neutral-strong: var(--color-neutral-900);
+--color-bg-info: var(--color-info-100);
+--color-bg-warning: var(--color-primary-100);
+--color-bg-success: var(--color-neutral-100);
+--color-text-primary: var(--color-secondary-900);
+--color-text-secondary: var(--color-secondary-700);
+--color-text-muted: var(--color-secondary-500);
+--color-text-subtle: var(--color-secondary-400);
+--color-text-link: var(--color-accent-700);
+--color-text-link-hover: var(--color-accent-800);
+--color-text-info: var(--color-accent-700);
+--color-text-warning: var(--color-primary-700);
+--color-text-success: var(--color-neutral-700);
+--color-border-subtle: var(--color-secondary-200);
+--color-border-default: var(--color-secondary-300);
+--color-border-strong: var(--color-secondary-400);
+--color-border-primary: var(--color-primary-500);
+--color-border-focus: var(--color-accent-500);
+--color-border-info: var(--color-accent-200);
+--color-border-warning: var(--color-primary-200);
+--color-border-success: var(--color-neutral-200);
+--color-border-neutral: var(--color-neutral-300);
+--color-feedback-error: var(--color-accent-base);
+}

package/build/css/conditional.css

@@ -0,0 +1,8 @@
+:root {
+  --not-primary: calc(var(--secondary) + var(--danger));
+  --not-secondary: calc(var(--primary) + var(--danger));
+  --not-danger: calc(var(--primary) + var(--secondary));
+  --light: 80;
+  --threshold: 10;
+  --switch: calc((var(--light) - var(--threshold)) * 100%);
+}

package/build/css/cube/cube.block.css

@@ -0,0 +1,18 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --cube-block-card-bg: var(--_color-bg-neutral);
+  --cube-block-card-border: var(--_color-border-subtle);
+  --cube-block-card-radius: var(--_border-radius-medium);
+  --cube-block-card-padding: var(--_spacing-md);
+  --cube-block-button-padding-x: var(--_spacing-sm);
+  --cube-block-button-padding-y: var(--_spacing-xs);
+  --cube-block-button-radius: var(--_border-radius-medium);
+  --cube-block-button-text: var(--_color-text-primary);
+  --cube-block-button-bg: var(--_color-bg-primary);
+  --cube-block-button-bg-hover: var(--_color-bg-primary-hover);
+  --cube-block-checkbox-bg: var(--_color-bg-primary);
+  --cube-block-checkbox-padding: var(--_spacing-xs);
+}

package/build/css/cube/cube.composition.css

@@ -0,0 +1,16 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --cube-composition-flow-space: var(--gutter);
+  --cube-composition-stack-gap: var(--gutter);
+  --cube-composition-stack-align: start;
+  --cube-composition-stack-direction: var(--layout-direction);
+  --cube-composition-cluster-gap: var(--gutter);
+  --cube-composition-cluster-align: center;
+  --cube-composition-center-max-width: 72ch;
+  --cube-composition-center-padding-inline: var(--gutter);
+  --cube-composition-switcher-modifier: var(--layout-break-at);
+  --cube-composition-switcher-gap: var(--gutter);
+}

package/build/css/cube/cube.utility.css

@@ -0,0 +1,185 @@
+
+/* ------------------------------------------------------------ */
+/*                            Margin                            */
+/* ------------------------------------------------------------ */
+.margin-t-0 { margin-block-start: 0 } 
+.margin-t-xs { margin-block-start: var(--spacing-xs) } 
+.margin-t-sm { margin-block-start: var(--spacing-sm) } 
+.margin-t-md { margin-block-end: var(--spacing-md) } 
+.margin-t-lg { margin-block-end: var(--spacing-lg) } 
+.margin-t-xl { margin-block-start: var(--spacing-xl) } 
+.margin-b-0 { margin-block-end: 0 } 
+.margin-b-xs { margin-block-end: var(--spacing-xs) } 
+.margin-b-sm { margin-block-end: var(--spacing-sm) } 
+.margin-b-md { margin-block-end: var(--spacing-md) } 
+.margin-b-lg { margin-block-end: var(--spacing-lg) } 
+.margin-b-xl { margin-block-end: var(--spacing-xl) } 
+.margin-auto { margin: auto } 
+
+/* ------------------------------------------------------------ */
+/*                           Position                           */
+/* ------------------------------------------------------------ */
+.position-relative { position: relative } 
+.position-absolute { position: absolute } 
+.position-fixed { position: fixed } 
+.position-top-0 { top: 0 } 
+.position-right-0 { right: 0 } 
+.position-bottom-0 { bottom: 0 } 
+.position-left-0 { left: 0 } 
+
+/* ------------------------------------------------------------ */
+/*                           Display                           */
+/* ------------------------------------------------------------ */
+.none { display: none } 
+.block { display: block } 
+.inline-block { display: inline-block } 
+.grid { display: grid } 
+.flex { display: flex } 
+.sticky { position: sticky } 
+
+/* ------------------------------------------------------------ */
+/*                            Align                            */
+/* ------------------------------------------------------------ */
+.align-start { --layout-align: flex-start } 
+.align-end { --layout-align: flex-end } 
+.align-center { --layout-align: center } 
+
+/* ------------------------------------------------------------ */
+/*                           Justify                           */
+/* ------------------------------------------------------------ */
+.justify-start { --layout-justify: flex-start } 
+.justify-end { --layout-justify: flex-end } 
+.justify-center { --layout-justify: center } 
+.justify-between { --layout-justify: space-between } 
+
+/* ------------------------------------------------------------ */
+/*                             Flex                             */
+/* ------------------------------------------------------------ */
+.flex-column { --layout-direction: column } 
+.flex-row { --layout-direction: row } 
+.flex-wrap { flex-wrap: wrap } 
+
+/* ------------------------------------------------------------ */
+/*                             Gap                             */
+/* ------------------------------------------------------------ */
+.gap-xs { gap: var(--spacing-xs) } 
+.gap-sm { gap: var(--spacing-sm) } 
+.gap-md { gap: var(--spacing-md) } 
+.gap-lg { gap: var(--spacing-lg) } 
+.gap-xl { gap: var(--spacing-xl) } 
+
+/* ------------------------------------------------------------ */
+/*                           Padding                           */
+/* ------------------------------------------------------------ */
+.padding-xs { padding: var(--spacing-xs) } 
+.padding-sm { padding: var(--spacing-sm) } 
+.padding-md { padding: var(--spacing-md) } 
+.padding-lg { padding: var(--spacing-lg) } 
+.padding-xl { padding: var(--spacing-xl) } 
+.padding-x-0 { padding-inline: 0 } 
+.padding-x-xs { padding-inline: var(--spacing-xs) } 
+.padding-x-sm { padding-inline: var(--spacing-sm) } 
+.padding-x-md { padding-inline: var(--spacing-md) } 
+.padding-x-lg { padding-inline: var(--spacing-lg) } 
+.padding-x-xl { padding-inline: var(--spacing-xl) } 
+.padding-y-0 { padding-block: 0 } 
+.padding-y-xs { padding-block: var(--spacing-xs) } 
+.padding-y-sm { padding-block: var(--spacing-sm) } 
+.padding-y-md { padding-block: var(--spacing-md) } 
+.padding-y-lg { padding-block: var(--spacing-lg) } 
+.padding-y-xl { padding-block: var(--spacing-xl) } 
+.padding-auto { padding: 0 } 
+.padding-top-0 { padding-top: 0 } 
+.padding-top-xs { padding-top: var(--spacing-xs) } 
+.padding-top-sm { padding-top: var(--spacing-sm) } 
+.padding-top-md { padding-top: var(--spacing-md) } 
+.padding-top-lg { padding-top: var(--spacing-lg) } 
+.padding-top-xl { padding-top: var(--spacing-xl) } 
+.padding-bottom-0 { padding-bottom: 0 } 
+
+/* ------------------------------------------------------------ */
+/*                             Text                             */
+/* ------------------------------------------------------------ */
+.text-center { text-align: center } 
+.text-dim { opacity: 0.7 } 
+
+/* ------------------------------------------------------------ */
+/*                            Border                            */
+/* ------------------------------------------------------------ */
+.border-solid { border-style: solid } 
+.border-dashed { border-style: dashed } 
+.border-dotted { border-style: dotted } 
+.border-none { border-style: none } 
+.border-primary { border-color: var(--color-border-primary) } 
+.border-secondary { border-color: var(--color-border-secondary) } 
+.border-accent { border-color: var(--color-border-accent) } 
+.border-neutral { border-color: var(--color-border-neutral) } 
+.border-info { border-color: var(--color-border-info) } 
+.border-success { border-color: var(--color-border-success) } 
+.border-top { border-top-width: var(--border-width-default) } 
+.border-bottom { border-bottom-width: var(--border-width-default) } 
+.border-left { border-left-width: var(--border-width-default) } 
+.border-right { border-right-width: var(--border-width-default) } 
+.border-all { border-width: var(--border-width-default) } 
+.border-theme-10 { border: var(--border-width-10) solid var(--theme-color) } 
+.border-theme-25 { border: var(--border-width-25) solid var(--theme-color) } 
+.border-theme-50 { border: var(--border-width-50) solid var(--theme-color) } 
+.border-theme-75 { border: var(--border-width-75) solid var(--theme-color) } 
+.border-theme-100 { border: var(--border-width-100) solid var(--theme-color) } 
+.border-theme-light { border: var(--border-width-small) solid var(--theme-color) } 
+.border-theme-medium { border: var(--border-width-medium) solid var(--theme-color) } 
+.border-theme-large { border: var(--border-width-large) solid var(--theme-color) } 
+.border-width-xsmall { border-width: var(--border-width-xsmall) } 
+.border-width-small { border-width: var(--border-width-small) } 
+.border-width-medium { border-width: var(--border-width-medium) } 
+.border-width-large { border-width: var(--border-width-large) } 
+
+/* ------------------------------------------------------------ */
+/*                            Radius                            */
+/* ------------------------------------------------------------ */
+.radius-light { border-radius: var(--radius-light) } 
+.radius-medium { border-radius: var(--radius-medium) } 
+.radius-heavy { border-radius: var(--radius-heavy) } 
+
+/* ------------------------------------------------------------ */
+/*                            Height                            */
+/* ------------------------------------------------------------ */
+.height-auto { height: auto } 
+.height-full { height: 100% } 
+.height-half { height: 50% } 
+.height-quarter { height: 25% } 
+.height-screen { height: 100svh } 
+
+/* ------------------------------------------------------------ */
+/*                            Width                            */
+/* ------------------------------------------------------------ */
+.width-auto { width: auto } 
+.width-full { width: 100% } 
+.width-half { width: 50% } 
+.width-quarter { width: 25% } 
+.width-screen { width: 100svw } 
+
+/* ------------------------------------------------------------ */
+/*                           Overflow                           */
+/* ------------------------------------------------------------ */
+.overflow-auto { overflow: auto } 
+.overflow-hidden { overflow: hidden } 
+.overflow-scroll { overflow: scroll } 
+.overflow-visible { overflow: visible } 
+.overflow-x-hidden { overflow-x: hidden } 
+.overflow-y-hidden { overflow-y: hidden } 
+
+/* ------------------------------------------------------------ */
+/*                              Bg                              */
+/* ------------------------------------------------------------ */
+.bg-primary { background-color: var(--color-bg-primary) } 
+.bg-secondary { background-color: var(--color-bg-secondary) } 
+.bg-accent { background-color: var(--color-bg-accent) } 
+.bg-accent-subtle { background-color: var(--color-bg-accent-subtle) } 
+.bg-neutral { background-color: var(--color-bg-neutral) } 
+.bg-page { background-color: var(--color-bg-page) } 
+.bg-subtle { background-color: var(--color-bg-subtle) } 
+.bg-elevated { background-color: var(--color-bg-elevated) } 
+.bg-inset { background-color: var(--color-bg-inset) } 
+.bg-info { background-color: var(--color-bg-info) } 
+.bg-success { background-color: var(--color-bg-success) }