unholy-design-tokens 1.0.0

package/build/css/font/font.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --font-scale-0: clamp(0.875rem, 0.6304347826086957rem + 1.0869565217391304vw, 1.5rem);
+  --font-scale-1: clamp(0.984375rem, 0.6652173913043479rem + 1.418478260869565vw, 1.7999999999999998rem);
+  --font-scale-2: clamp(1.107421875rem, 0.6955434782608696rem + 1.8305706521739133vw, 2.16rem);
+  --font-scale-3: clamp(1.245849609375rem, 0.7190951086956524rem + 2.341131114130434vw, 2.5919999999999996rem);
+  --font-scale-4: clamp(1.401580810546875rem, 0.7329124320652175rem + 2.9718594599184778vw, 3.1104rem);
+  --font-scale-5: clamp(1.5767784118652344rem, 0.7332430078125004rem + 3.749046240234373vw, 3.732479999999999rem);
+  --font-scale-6: clamp(1.7738757133483887rem, 0.7153582098760192rem + 4.704522237654976vw, 4.478975999999999rem);
+  --font-min-font: 14;
+  --font-max-font: 24;
+  --font-min-viewport: 360;
+  --font-max-viewport: 1280;
+  --font-scale-min: 1.125;
+  --font-scale-max: 1.2;
+  --font-steps: 0,1,2,3,4,5,6;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+}

package/build/css/space.css

@@ -0,0 +1,20 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --space-fluid-min: 1rem;
+  --space-fluid-max: 1.5rem;
+  --space-fluid-min-viewport: 360px;
+  --space-fluid-max-viewport: 1280px;
+  --space-unit-default: 1rem;
+  --space-unit-fluid: clamp(var(--space-fluid-min), calc(var(--space-fluid-min) + (var(--space-fluid-max) - var(--space-fluid-min)) * ((100vw - var(--space-fluid-min-viewport)) / (var(--space-fluid-max-viewport) - var(--space-fluid-min-viewport)))), var(--space-fluid-max));
+  --space-multiplier-unit: 1rem;
+  --space-multiplier-xxs: 0.25;
+  --space-multiplier-xs: 0.5;
+  --space-multiplier-sm: 0.75;
+  --space-multiplier-md: 1;
+  --space-multiplier-lg: 2;
+  --space-multiplier-xl: 3.25;
+  --space-multiplier-xxl: 5.25;
+}

package/build/css/text/text.css

@@ -0,0 +1,48 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --color-text-primary: #010101;
+  --color-text-secondary: #131109;
+  --color-text-muted: #4e4731;
+  --color-text-subtle: #72694b;
+  --color-text-link: #450f11;
+  --color-text-link-hover: #1c0304;
+  --color-text-info: #450f11;
+  --color-text-warning: #1e1908;
+  --color-text-success: #101110;
+  --color-text-danger-lightness: var(--color-danger-lightness, 0);
+  --color-text-danger-chroma: var(--color-danger-chroma, 0);
+  --color-text-danger-hue: var(--color-danger-hue, 0);
+  --color-text-danger-opacity: var(--color-danger-opacity, 1);
+  --color-text-danger: oklch(var(--color-text-danger-lightness) var(--color-text-danger-chroma) var(--color-text-danger-hue) / var(--color-text-danger-opacity));
+  --color-text-hue: var(--color-primary-hue) * var(--primary, 1) + var(--color-secondary-hue) * var(--secondary, 0) + var(--color-danger-hue) * var(--danger, 0);
+  --color-text-lightness: var(--color-primary-lightness) * var(--primary, 1) + var(--color-secondary-lightness) * var(--secondary, 0) + var(--color-danger-lightness) * var(--danger, 0);
+  --color-text-opacity: var(--color-primary-opacity);
+  --text-body-size: var(--font-scale-0);
+  --text-body-line-height: 1.5;
+  --text-body-weight: var(--font-weight-regular);
+  --text-caption-size: var(--font-scale--2);
+  --text-caption-line-height: 1.4;
+  --text-caption-weight: var(--font-weight-regular);
+  --text-small-size: var(--font-scale--1);
+  --text-small-line-height: 1.4;
+  --text-small-weight: var(--font-weight-regular);
+  --component-text-lightness: calc(var(--color-text-lightness) + var(--variant-text-lightness) + var(--state-text-lightness));
+  --component-text-chroma: calc(var(--color-text-chroma) + var(--variant-text-chroma) + var(--state-text-chroma));
+  --component-text-hue: calc(var(--color-text-hue));
+  --component-text-opacity: calc(var(--color-text-opacity) + var(--variant-text-opacity) + var(--state-text-opacity));
+  --variant-text-bg-lightness: 0;
+  --variant-text-bg-chroma: 0;
+  --variant-text-bg-hue: 0;
+  --variant-text-bg-opacity: 0;
+  --variant-text-border-lightness: 0;
+  --variant-text-border-chroma: 0;
+  --variant-text-border-hue: 0;
+  --variant-text-border-opacity: 0;
+  --variant-text-text-lightness: 0;
+  --variant-text-text-chroma: 0;
+  --variant-text-text-hue: 0;
+  --variant-text-text-opacity: 1;
+}

package/build/css/themes/private-theme.css

@@ -0,0 +1,228 @@
+/**
+ * Internal default theme variables
+ * Using CSS pseudo-private custom properties
+ * https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/
+ */
+:root {
+/* ------------------------------------------------------------ */
+/*                            Border                            */
+/* ------------------------------------------------------------ */
+  --_border-width-base: var(--border-width-base, 2px);
+  --_border-width-scale: var(--border-width-scale, 1.25);
+  --_border-width-default: var(--border-width-default, var(--border-width-base));
+  --_border-width-xsmall: var(--border-width-xsmall, calc(var(--border-width-base) / 2 * var(--border-width-scale)));
+  --_border-width-small: var(--border-width-small, calc(var(--border-width-base) * var(--border-width-scale)));
+  --_border-width-medium: var(--border-width-medium, var(--border-width-base));
+  --_border-width-large: var(--border-width-large, calc(var(--border-width-base) * 2 * var(--border-width-scale)));
+  --_border-style-solid: var(--border-style-solid, solid);
+  --_border-style-dashed: var(--border-style-dashed, dashed);
+  --_border-style-dotted: var(--border-style-dotted, dotted);
+  --_border-style-double: var(--border-style-double, double);
+  --_border-style-none: var(--border-style-none, none);
+  --_border-style-default: var(--border-style-default, var(--border-style-solid));
+  --_border-radius-1: var(--border-radius-1, 1px);
+  --_border-radius-2: var(--border-radius-2, 2px);
+  --_border-radius-4: var(--border-radius-4, 4px);
+  --_border-radius-base: var(--border-radius-base, 0);
+  --_border-radius-0-5: var(--border-radius-0-5, 0.5px);
+  --_border-radius-scale: var(--border-radius-scale, 1.5);
+
+/* ------------------------------------------------------------ */
+/*                          Breakpoint                          */
+/* ------------------------------------------------------------ */
+  --_breakpoint-xs: var(--breakpoint-xs, 640px);
+  --_breakpoint-sm: var(--breakpoint-sm, 768px);
+  --_breakpoint-md: var(--breakpoint-md, 1024px);
+  --_breakpoint-lg: var(--breakpoint-lg, 1280px);
+  --_breakpoint-xl: var(--breakpoint-xl, 1820px);
+  --_breakpoint-xxl: var(--breakpoint-xxl, 2520px);
+
+/* ------------------------------------------------------------ */
+/*                             Font                             */
+/* ------------------------------------------------------------ */
+  --_font-scale-0: var(--font-scale-0, clamp(0.875rem, 0.6304347826086957rem + 1.0869565217391304vw, 1.5rem));
+  --_font-scale-1: var(--font-scale-1, clamp(0.984375rem, 0.6652173913043479rem + 1.418478260869565vw, 1.7999999999999998rem));
+  --_font-scale-2: var(--font-scale-2, clamp(1.107421875rem, 0.6955434782608696rem + 1.8305706521739133vw, 2.16rem));
+  --_font-scale-3: var(--font-scale-3, clamp(1.245849609375rem, 0.7190951086956524rem + 2.341131114130434vw, 2.5919999999999996rem));
+  --_font-scale-4: var(--font-scale-4, clamp(1.401580810546875rem, 0.7329124320652175rem + 2.9718594599184778vw, 3.1104rem));
+  --_font-scale-5: var(--font-scale-5, clamp(1.5767784118652344rem, 0.7332430078125004rem + 3.749046240234373vw, 3.732479999999999rem));
+  --_font-scale-6: var(--font-scale-6, clamp(1.7738757133483887rem, 0.7153582098760192rem + 4.704522237654976vw, 4.478975999999999rem));
+  --_font-min-font: var(--font-min-font, 14);
+  --_font-max-font: var(--font-max-font, 24);
+  --_font-min-viewport: var(--font-min-viewport, 360);
+  --_font-max-viewport: var(--font-max-viewport, 1280);
+  --_font-scale-min: var(--font-scale-min, 1.125);
+  --_font-scale-max: var(--font-scale-max, 1.2);
+  --_font-steps: var(--font-steps, 0,1,2,3,4,5,6);
+  --_font-weight-light: var(--font-weight-light, 300);
+  --_font-weight-normal: var(--font-weight-normal, 400);
+  --_font-weight-medium: var(--font-weight-medium, 500);
+  --_font-weight-bold: var(--font-weight-bold, 700);
+
+/* ------------------------------------------------------------ */
+/*                            Shadow                            */
+/* ------------------------------------------------------------ */
+  --_shadow-base: var(--shadow-base, 1);
+  --_shadow-scale: var(--shadow-scale, 1.5);
+  --_shadow-xs: var(--shadow-xs, calc(var(--shadow-base) / 3 * var(--shadow-scale)));
+  --_shadow-sm: var(--shadow-sm, calc(var(--shadow-base) / 2 * var(--shadow-scale)));
+  --_shadow-md: var(--shadow-md, calc(var(--shadow-base) * var(--shadow-scale)));
+  --_shadow-lg: var(--shadow-lg, calc(var(--shadow-base) * 2 * var(--shadow-scale)));
+  --_shadow-xl: var(--shadow-xl, calc(var(--shadow-base) * 4 * var(--shadow-scale)));
+
+/* ------------------------------------------------------------ */
+/*                            Space                            */
+/* ------------------------------------------------------------ */
+  --_space-fluid-min: var(--space-fluid-min, 1rem);
+  --_space-fluid-max: var(--space-fluid-max, 1.5rem);
+  --_space-fluid-min-viewport: var(--space-fluid-min-viewport, 360px);
+  --_space-fluid-max-viewport: var(--space-fluid-max-viewport, 1280px);
+  --_space-unit-default: var(--space-unit-default, 1rem);
+  --_space-unit-fluid: var(--space-unit-fluid, clamp(var(--space-fluid-min), calc(var(--space-fluid-min) + (var(--space-fluid-max) - var(--space-fluid-min)) * ((100vw - var(--space-fluid-min-viewport)) / (var(--space-fluid-max-viewport) - var(--space-fluid-min-viewport)))), var(--space-fluid-max)));
+  --_space-multiplier-unit: var(--space-multiplier-unit, 1rem);
+  --_space-multiplier-xxs: var(--space-multiplier-xxs, 0.25);
+  --_space-multiplier-xs: var(--space-multiplier-xs, 0.5);
+  --_space-multiplier-sm: var(--space-multiplier-sm, 0.75);
+  --_space-multiplier-md: var(--space-multiplier-md, 1);
+  --_space-multiplier-lg: var(--space-multiplier-lg, 2);
+  --_space-multiplier-xl: var(--space-multiplier-xl, 3.25);
+  --_space-multiplier-xxl: var(--space-multiplier-xxl, 5.25);
+
+/* ------------------------------------------------------------ */
+/*                            Layout                            */
+/* ------------------------------------------------------------ */
+  --_layout-break-at: var(--layout-break-at, var(--_breakpoint-md));
+  --_layout-gutter-sm: var(--layout-gutter-sm, var(--_spacing-sm));
+  --_layout-gutter-md: var(--layout-gutter-md, var(--_spacing-md));
+  --_layout-gutter-lg: var(--layout-gutter-lg, var(--_spacing-lg));
+  --_layout-gutter-xl: var(--layout-gutter-xl, var(--_spacing-xl));
+  --_layout-direction: var(--layout-direction, column);
+  --_layout-align-start: var(--layout-align-start, flex-start);
+  --_layout-align-center: var(--layout-align-center, center);
+  --_layout-align-end: var(--layout-align-end, flex-end);
+  --_layout-justify-start: var(--layout-justify-start, flex-start);
+  --_layout-justify-center: var(--layout-justify-center, center);
+  --_layout-justify-end: var(--layout-justify-end, flex-end);
+  --_layout-justify-between: var(--layout-justify-between, space-between);
+  --_layout-gap-xs: var(--layout-gap-xs, var(--_spacing-xs));
+  --_layout-gap-sm: var(--layout-gap-sm, var(--_spacing-sm));
+  --_layout-gap-md: var(--layout-gap-md, var(--_spacing-md));
+  --_layout-gap-lg: var(--layout-gap-lg, var(--_spacing-lg));
+  --_layout-gap-xl: var(--layout-gap-xl, var(--_spacing-xl));
+  --_layout-overlay-z-index: var(--layout-overlay-z-index, 1000);
+  --_layout-overlay-opacity: var(--layout-overlay-opacity, 0);
+  --_layout-overlay-blur: var(--layout-overlay-blur, 8px);
+  --_layout-space-unit: var(--layout-space-unit, var(--_space-unit-fluid));
+  --_layout-depth-base: var(--layout-depth-base, 6px);
+  --_layout-mobile-padding: var(--layout-mobile-padding, var(--_spacing-md));
+
+/* ------------------------------------------------------------ */
+/*                            Radius                            */
+/* ------------------------------------------------------------ */
+  --_radius-light: var(--radius-light, calc(var(--border-radius-base) / var(--border-radius-scale)));
+  --_radius-medium: var(--radius-medium, calc(var(--border-radius-base) * var(--border-radius-scale)));
+  --_radius-heavy: var(--radius-heavy, calc(var(--border-radius-base) * 2 * var(--border-radius-scale)));
+
+/* ------------------------------------------------------------ */
+/*                           Spacing                           */
+/* ------------------------------------------------------------ */
+  --_spacing-xxs: var(--spacing-xxs, calc(var(--_layout-space-unit) * var(--_space-multiplier-xxs)));
+  --_spacing-xs: var(--spacing-xs, calc(var(--_layout-space-unit) * var(--_space-multiplier-xs)));
+  --_spacing-sm: var(--spacing-sm, calc(var(--_layout-space-unit) * var(--_space-multiplier-sm)));
+  --_spacing-md: var(--spacing-md, calc(var(--_layout-space-unit) * var(--_space-multiplier-md)));
+  --_spacing-lg: var(--spacing-lg, calc(var(--_layout-space-unit) * var(--_space-multiplier-lg)));
+  --_spacing-xl: var(--spacing-xl, calc(var(--_layout-space-unit) * var(--_space-multiplier-xl)));
+  --_spacing-xxl: var(--spacing-xxl, calc(var(--_layout-space-unit) * var(--_space-multiplier-xxl)));
+
+/* ------------------------------------------------------------ */
+/*                             Text                             */
+/* ------------------------------------------------------------ */
+  --_text-body-size: var(--text-body-size, var(--font-scale-0));
+  --_text-body-line-height: var(--text-body-line-height, 1.5);
+  --_text-body-weight: var(--text-body-weight, var(--font-weight-regular));
+  --_text-caption-size: var(--text-caption-size, var(--font-scale--2));
+  --_text-caption-line-height: var(--text-caption-line-height, 1.4);
+  --_text-caption-weight: var(--text-caption-weight, var(--font-weight-regular));
+  --_text-small-size: var(--text-small-size, var(--font-scale--1));
+  --_text-small-line-height: var(--text-small-line-height, 1.4);
+  --_text-small-weight: var(--text-small-weight, var(--font-weight-regular));
+
+/* ------------------------------------------------------------ */
+/*                           Heading                           */
+/* ------------------------------------------------------------ */
+  --_heading-h1-size: var(--heading-h1-size, var(--font-scale-4));
+  --_heading-h1-line-height: var(--heading-h1-line-height, 1.1);
+  --_heading-h1-weight: var(--heading-h1-weight, var(--font-weight-bold));
+  --_heading-h2-size: var(--heading-h2-size, var(--font-scale-3));
+  --_heading-h2-line-height: var(--heading-h2-line-height, 1.15);
+  --_heading-h2-weight: var(--heading-h2-weight, var(--font-weight-bold));
+
+/* ------------------------------------------------------------ */
+/*                          Component                          */
+/* ------------------------------------------------------------ */
+  --_component-bg-lightness: var(--component-bg-lightness, calc(var(--color-bg-lightness) + var(--variant-bg-lightness) + var(--state-bg-lightness)));
+  --_component-bg-chroma: var(--component-bg-chroma, calc(var(--color-bg-chroma) + var(--variant-bg-chroma) + var(--state-bg-chroma)));
+  --_component-bg-hue: var(--component-bg-hue, calc(var(--color-bg-hue)));
+  --_component-bg-opacity: var(--component-bg-opacity, calc(var(--color-bg-opacity) + var(--variant-bg-opacity) + var(--state-bg-opacity)));
+  --_component-border-lightness: var(--component-border-lightness, calc(var(--color-border-lightness) + var(--variant-border-lightness) + var(--state-border-lightness)));
+  --_component-border-chroma: var(--component-border-chroma, calc(var(--color-border-chroma) + var(--variant-border-chroma) + var(--state-border-chroma)));
+  --_component-border-hue: var(--component-border-hue, calc(var(--color-border-hue)));
+  --_component-border-opacity: var(--component-border-opacity, calc(var(--color-border-opacity) + var(--variant-border-opacity) + var(--state-border-opacity)));
+  --_component-text-lightness: var(--component-text-lightness, calc(var(--color-text-lightness) + var(--variant-text-lightness) + var(--state-text-lightness)));
+  --_component-text-chroma: var(--component-text-chroma, calc(var(--color-text-chroma) + var(--variant-text-chroma) + var(--state-text-chroma)));
+  --_component-text-hue: var(--component-text-hue, calc(var(--color-text-hue)));
+  --_component-text-opacity: var(--component-text-opacity, calc(var(--color-text-opacity) + var(--variant-text-opacity) + var(--state-text-opacity)));
+  --_component-opacity-bg: var(--component-opacity-bg, var(--component-bg-opacity));
+  --_component-opacity-border: var(--component-opacity-border, var(--component-border-opacity));
+  --_component-opacity-text: var(--component-opacity-text, var(--component-text-opacity));
+
+/* ------------------------------------------------------------ */
+/*                       Highlighted-text                       */
+/* ------------------------------------------------------------ */
+  --_highlighted-text-gap-min: var(--highlighted-text-gap-min, var(--_spacing-xxs));
+  --_highlighted-text-gap-max: var(--highlighted-text-gap-max, var(--_spacing-lg));
+  --_highlighted-text-gap-scaler: var(--highlighted-text-gap-scaler, 1.4svw);
+  --_highlighted-text-gap-left: var(--highlighted-text-gap-left, clamp(var(--_highlighted-text-gap-min), var(--_highlighted-text-gap-scaler), var(--_highlighted-text-gap-max)));
+
+/* ------------------------------------------------------------ */
+/*                             Cube                             */
+/* ------------------------------------------------------------ */
+
+  /* -------------------- */
+  /*        Global        */
+  /* -------------------- */
+  --_gutter: var(--gutter, var(--layout-gutter-sm));
+  --_on: var(--on, initial);
+  --_off: var(--off, );
+
+  /* -------------------- */
+  /*     Composition     */
+  /* -------------------- */
+  --_flow-space: var(--flow-space, var(--gutter));
+  --_stack-gap: var(--stack-gap, var(--gutter));
+  --_stack-align: var(--stack-align, start);
+  --_stack-direction: var(--stack-direction, var(--layout-direction));
+  --_cluster-gap: var(--cluster-gap, var(--gutter));
+  --_cluster-align: var(--cluster-align, center);
+  --_center-max-width: var(--center-max-width, 72ch);
+  --_center-padding-inline: var(--center-padding-inline, var(--gutter));
+  --_switcher-modifier: var(--switcher-modifier, var(--layout-break-at));
+  --_switcher-gap: var(--switcher-gap, var(--gutter));
+
+  /* -------------------- */
+  /*        Block        */
+  /* -------------------- */
+  --_card-bg: var(--card-bg, var(--_color-bg-neutral));
+  --_card-border: var(--card-border, var(--_color-border-subtle));
+  --_card-radius: var(--card-radius, var(--_border-radius-medium));
+  --_card-padding: var(--card-padding, var(--_spacing-md));
+  --_button-padding-x: var(--button-padding-x, var(--_spacing-sm));
+  --_button-padding-y: var(--button-padding-y, var(--_spacing-xs));
+  --_button-radius: var(--button-radius, var(--_border-radius-medium));
+  --_button-text: var(--button-text, var(--_color-text-primary));
+  --_button-bg: var(--button-bg, var(--_color-bg-primary));
+  --_button-bg-hover: var(--button-bg-hover, var(--_color-bg-primary-hover));
+  --_checkbox-bg: var(--checkbox-bg, var(--_color-bg-primary));
+  --_checkbox-padding: var(--checkbox-padding, var(--_spacing-xs));
+
+}

package/build/css/themes/public-theme.css

@@ -0,0 +1,228 @@
+/**
+ * Theme Overrides
+ * List of CSS variables that can be used to override the default theme
+ * Simply uncomment the variables you want to use
+ */
+:root {
+/* ------------------------------------------------------------ */
+/*                            Border                            */
+/* ------------------------------------------------------------ */
+  --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;
+
+/* ------------------------------------------------------------ */
+/*                          Breakpoint                          */
+/* ------------------------------------------------------------ */
+  --breakpoint-xs: 640px;
+  --breakpoint-sm: 768px;
+  --breakpoint-md: 1024px;
+  --breakpoint-lg: 1280px;
+  --breakpoint-xl: 1820px;
+  --breakpoint-xxl: 2520px;
+
+/* ------------------------------------------------------------ */
+/*                             Font                             */
+/* ------------------------------------------------------------ */
+  --font-scale-0: clamp(0.875rem, 0.6304347826086957rem + 1.0869565217391304vw, 1.5rem);
+  --font-scale-1: clamp(0.984375rem, 0.6652173913043479rem + 1.418478260869565vw, 1.7999999999999998rem);
+  --font-scale-2: clamp(1.107421875rem, 0.6955434782608696rem + 1.8305706521739133vw, 2.16rem);
+  --font-scale-3: clamp(1.245849609375rem, 0.7190951086956524rem + 2.341131114130434vw, 2.5919999999999996rem);
+  --font-scale-4: clamp(1.401580810546875rem, 0.7329124320652175rem + 2.9718594599184778vw, 3.1104rem);
+  --font-scale-5: clamp(1.5767784118652344rem, 0.7332430078125004rem + 3.749046240234373vw, 3.732479999999999rem);
+  --font-scale-6: clamp(1.7738757133483887rem, 0.7153582098760192rem + 4.704522237654976vw, 4.478975999999999rem);
+  --font-min-font: 14;
+  --font-max-font: 24;
+  --font-min-viewport: 360;
+  --font-max-viewport: 1280;
+  --font-scale-min: 1.125;
+  --font-scale-max: 1.2;
+  --font-steps: 0,1,2,3,4,5,6;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+/* ------------------------------------------------------------ */
+/*                            Shadow                            */
+/* ------------------------------------------------------------ */
+  --shadow-base: 1;
+  --shadow-scale: 1.5;
+  --shadow-xs: calc(var(--shadow-base) / 3 * var(--shadow-scale));
+  --shadow-sm: calc(var(--shadow-base) / 2 * var(--shadow-scale));
+  --shadow-md: calc(var(--shadow-base) * var(--shadow-scale));
+  --shadow-lg: calc(var(--shadow-base) * 2 * var(--shadow-scale));
+  --shadow-xl: calc(var(--shadow-base) * 4 * var(--shadow-scale));
+
+/* ------------------------------------------------------------ */
+/*                            Space                            */
+/* ------------------------------------------------------------ */
+  --space-fluid-min: 1rem;
+  --space-fluid-max: 1.5rem;
+  --space-fluid-min-viewport: 360px;
+  --space-fluid-max-viewport: 1280px;
+  --space-unit-default: 1rem;
+  --space-unit-fluid: clamp(var(--space-fluid-min), calc(var(--space-fluid-min) + (var(--space-fluid-max) - var(--space-fluid-min)) * ((100vw - var(--space-fluid-min-viewport)) / (var(--space-fluid-max-viewport) - var(--space-fluid-min-viewport)))), var(--space-fluid-max));
+  --space-multiplier-unit: 1rem;
+  --space-multiplier-xxs: 0.25;
+  --space-multiplier-xs: 0.5;
+  --space-multiplier-sm: 0.75;
+  --space-multiplier-md: 1;
+  --space-multiplier-lg: 2;
+  --space-multiplier-xl: 3.25;
+  --space-multiplier-xxl: 5.25;
+
+/* ------------------------------------------------------------ */
+/*                            Layout                            */
+/* ------------------------------------------------------------ */
+  --layout-break-at: var(--breakpoint-md);
+  --layout-gutter-sm: var(--spacing-sm);
+  --layout-gutter-md: var(--spacing-md);
+  --layout-gutter-lg: var(--spacing-lg);
+  --layout-gutter-xl: var(--spacing-xl);
+  --layout-direction: column;
+  --layout-align-start: flex-start;
+  --layout-align-center: center;
+  --layout-align-end: flex-end;
+  --layout-justify-start: flex-start;
+  --layout-justify-center: center;
+  --layout-justify-end: flex-end;
+  --layout-justify-between: space-between;
+  --layout-gap-xs: var(--spacing-xs);
+  --layout-gap-sm: var(--spacing-sm);
+  --layout-gap-md: var(--spacing-md);
+  --layout-gap-lg: var(--spacing-lg);
+  --layout-gap-xl: var(--spacing-xl);
+  --layout-overlay-z-index: 1000;
+  --layout-overlay-opacity: 0;
+  --layout-overlay-blur: 8px;
+  --layout-space-unit: var(--space-unit-fluid);
+  --layout-depth-base: 6px;
+  --layout-mobile-padding: var(--spacing-md);
+
+/* ------------------------------------------------------------ */
+/*                            Radius                            */
+/* ------------------------------------------------------------ */
+  --radius-light: calc(var(--border-radius-base) / var(--border-radius-scale));
+  --radius-medium: calc(var(--border-radius-base) * var(--border-radius-scale));
+  --radius-heavy: calc(var(--border-radius-base) * 2 * var(--border-radius-scale));
+
+/* ------------------------------------------------------------ */
+/*                           Spacing                           */
+/* ------------------------------------------------------------ */
+  --spacing-xxs: calc(var(--_layout-space-unit) * var(--_space-multiplier-xxs));
+  --spacing-xs: calc(var(--_layout-space-unit) * var(--_space-multiplier-xs));
+  --spacing-sm: calc(var(--_layout-space-unit) * var(--_space-multiplier-sm));
+  --spacing-md: calc(var(--_layout-space-unit) * var(--_space-multiplier-md));
+  --spacing-lg: calc(var(--_layout-space-unit) * var(--_space-multiplier-lg));
+  --spacing-xl: calc(var(--_layout-space-unit) * var(--_space-multiplier-xl));
+  --spacing-xxl: calc(var(--_layout-space-unit) * var(--_space-multiplier-xxl));
+
+/* ------------------------------------------------------------ */
+/*                             Text                             */
+/* ------------------------------------------------------------ */
+  --text-body-size: var(--font-scale-0);
+  --text-body-line-height: 1.5;
+  --text-body-weight: var(--font-weight-regular);
+  --text-caption-size: var(--font-scale--2);
+  --text-caption-line-height: 1.4;
+  --text-caption-weight: var(--font-weight-regular);
+  --text-small-size: var(--font-scale--1);
+  --text-small-line-height: 1.4;
+  --text-small-weight: var(--font-weight-regular);
+
+/* ------------------------------------------------------------ */
+/*                           Heading                           */
+/* ------------------------------------------------------------ */
+  --heading-h1-size: var(--font-scale-4);
+  --heading-h1-line-height: 1.1;
+  --heading-h1-weight: var(--font-weight-bold);
+  --heading-h2-size: var(--font-scale-3);
+  --heading-h2-line-height: 1.15;
+  --heading-h2-weight: var(--font-weight-bold);
+
+/* ------------------------------------------------------------ */
+/*                          Component                          */
+/* ------------------------------------------------------------ */
+  --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));
+  --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));
+  --component-text-lightness: calc(var(--color-text-lightness) + var(--variant-text-lightness) + var(--state-text-lightness));
+  --component-text-chroma: calc(var(--color-text-chroma) + var(--variant-text-chroma) + var(--state-text-chroma));
+  --component-text-hue: calc(var(--color-text-hue));
+  --component-text-opacity: calc(var(--color-text-opacity) + var(--variant-text-opacity) + var(--state-text-opacity));
+  --component-opacity-bg: var(--component-bg-opacity);
+  --component-opacity-border: var(--component-border-opacity);
+  --component-opacity-text: var(--component-text-opacity);
+
+/* ------------------------------------------------------------ */
+/*                       Highlighted-text                       */
+/* ------------------------------------------------------------ */
+  --highlighted-text-gap-min: var(--_spacing-xxs);
+  --highlighted-text-gap-max: var(--_spacing-lg);
+  --highlighted-text-gap-scaler: 1.4svw;
+  --highlighted-text-gap-left: clamp(var(--_highlighted-text-gap-min), var(--_highlighted-text-gap-scaler), var(--_highlighted-text-gap-max));
+
+/* ------------------------------------------------------------ */
+/*                             Cube                             */
+/* ------------------------------------------------------------ */
+
+  /* -------------------- */
+  /*        Global        */
+  /* -------------------- */
+  --gutter: var(--layout-gutter-sm);
+  --on: initial;
+  --off: ;
+
+  /* -------------------- */
+  /*     Composition     */
+  /* -------------------- */
+  --flow-space: var(--gutter);
+  --stack-gap: var(--gutter);
+  --stack-align: start;
+  --stack-direction: var(--layout-direction);
+  --cluster-gap: var(--gutter);
+  --cluster-align: center;
+  --center-max-width: 72ch;
+  --center-padding-inline: var(--gutter);
+  --switcher-modifier: var(--layout-break-at);
+  --switcher-gap: var(--gutter);
+
+  /* -------------------- */
+  /*        Block        */
+  /* -------------------- */
+  --card-bg: var(--_color-bg-neutral);
+  --card-border: var(--_color-border-subtle);
+  --card-radius: var(--_border-radius-medium);
+  --card-padding: var(--_spacing-md);
+  --button-padding-x: var(--_spacing-sm);
+  --button-padding-y: var(--_spacing-xs);
+  --button-radius: var(--_border-radius-medium);
+  --button-text: var(--_color-text-primary);
+  --button-bg: var(--_color-bg-primary);
+  --button-bg-hover: var(--_color-bg-primary-hover);
+  --checkbox-bg: var(--_color-bg-primary);
+  --checkbox-padding: var(--_spacing-xs);
+
+}

package/build/css/variant/variant.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --variant-contained-bg-lightness: 0;
+  --variant-contained-bg-chroma: 0;
+  --variant-contained-bg-hue: 0;
+  --variant-contained-bg-opacity: 1;
+  --variant-contained-border-lightness: 0;
+  --variant-contained-border-chroma: 0;
+  --variant-contained-border-hue: 0;
+  --variant-contained-border-opacity: 1;
+  --variant-contained-text-lightness: 0;
+  --variant-contained-text-chroma: 0;
+  --variant-contained-text-hue: 0;
+  --variant-contained-text-opacity: 1;
+  --variant-outlined-bg-lightness: 0;
+  --variant-outlined-bg-chroma: 0;
+  --variant-outlined-bg-hue: 0;
+  --variant-outlined-bg-opacity: 0;
+  --variant-outlined-border-lightness: 0;
+  --variant-outlined-border-chroma: 0;
+  --variant-outlined-border-hue: 0;
+  --variant-outlined-border-opacity: 1;
+  --variant-outlined-text-lightness: 0;
+  --variant-outlined-text-chroma: 0;
+  --variant-outlined-text-hue: 0;
+  --variant-outlined-text-opacity: 1;
+  --variant-text-bg-lightness: 0;
+  --variant-text-bg-chroma: 0;
+  --variant-text-bg-hue: 0;
+  --variant-text-bg-opacity: 0;
+  --variant-text-border-lightness: 0;
+  --variant-text-border-chroma: 0;
+  --variant-text-border-hue: 0;
+  --variant-text-border-opacity: 0;
+  --variant-text-text-lightness: 0;
+  --variant-text-text-chroma: 0;
+  --variant-text-text-hue: 0;
+  --variant-text-text-opacity: 1;
+}