@loidolt/theme-tokens 0.6.0 → 0.8.0

package/dist/presets/soft.css

@@ -0,0 +1,156 @@
+/* Soft preset — Rounded corners, sentence-case labels, cool neutrals and a blue accent.
+   Generated by definePreset(). Do not edit directly. */
+[data-preset='soft'] {
+  --loidolt-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --loidolt-font-utility: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --loidolt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --loidolt-font-size-xs: 0.75rem;
+  --loidolt-font-size-sm: 0.75rem;
+  --loidolt-font-size-base: 0.875rem;
+  --loidolt-font-size-md: 1rem;
+  --loidolt-font-size-lg: 1.25rem;
+  --loidolt-font-size-xl: 1.75rem;
+  --loidolt-font-size-display: 2.5rem;
+  --loidolt-font-tracking-utility: 0.1em;
+  --loidolt-font-tracking-wide: 0.13em;
+  --loidolt-font-line-height-tight: 1.15;
+  --loidolt-font-line-height-normal: 1.45;
+  --loidolt-font-line-height-relaxed: 1.65;
+  --loidolt-space-0: 0;
+  --loidolt-space-1: 0.25rem;
+  --loidolt-space-2: 0.5rem;
+  --loidolt-space-3: 0.75rem;
+  --loidolt-space-4: 1rem;
+  --loidolt-space-5: 1.25rem;
+  --loidolt-space-6: 1.5rem;
+  --loidolt-space-8: 2rem;
+  --loidolt-space-10: 2.5rem;
+  --loidolt-space-12: 3rem;
+  --loidolt-space-16: 4rem;
+  --loidolt-size-control-sm: 2rem;
+  --loidolt-size-control: 2.375rem;
+  --loidolt-size-control-lg: 2.75rem;
+  --loidolt-size-topbar: 3.875rem;
+  --loidolt-size-contextbar: 2.5625rem;
+  --loidolt-size-sidebar: 17rem;
+  --loidolt-size-inspector: 18rem;
+  --loidolt-size-content: 75rem;
+  --loidolt-border-width: 1px;
+  --loidolt-border-radius: 6px;
+  --loidolt-border-radius-pill: 999px;
+  --loidolt-shadow-popover: 0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent);
+  --loidolt-shadow-modal: 0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent);
+  --loidolt-shadow-artwork: 0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent);
+  --loidolt-motion-fast: 100ms;
+  --loidolt-motion-normal: 150ms;
+  --loidolt-motion-slow: 220ms;
+  --loidolt-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --loidolt-radius-control: 6px;
+  --loidolt-radius-inner: 4px;
+  --loidolt-radius-surface: 8px;
+  --loidolt-radius-overlay: 10px;
+  --loidolt-stroke-focus: 2px;
+  --loidolt-stroke-indicator: 2px;
+  --loidolt-stroke-accent: 3px;
+  --loidolt-pad-control-x: 0.9775rem;
+  --loidolt-pad-control-x-sm: 0.7475rem;
+  --loidolt-pad-control-x-lg: 1.38rem;
+  --loidolt-pad-control-y: 0.575rem;
+  --loidolt-pad-control-y-sm: 0.437rem;
+  --loidolt-pad-field: 0.5175rem 0.1725rem;
+  --loidolt-pad-item: 0.7475rem 0.6325rem;
+  --loidolt-pad-cell: 0.805rem 0.92rem;
+  --loidolt-pad-callout: 0.92rem 1.15rem;
+  --loidolt-pad-surface: 1.15rem;
+  --loidolt-pad-overlay: 1.15rem 1.4375rem;
+  --loidolt-pad-popover: 0.5175rem;
+  --loidolt-pad-bar-x: 1.5525rem;
+  --loidolt-pad-pane: 1.4375rem;
+  --loidolt-pad-page: 1.725rem;
+  --loidolt-gap-field: 0.4025rem;
+  --loidolt-gap-actions: 0.575rem;
+  --loidolt-label-transform: none;
+  --loidolt-label-tracking: 0em;
+  --loidolt-label-tracking-wide: 0.02em;
+  --loidolt-label-weight: 500;
+  --loidolt-control-transform: none;
+  --loidolt-control-tracking: 0em;
+  --loidolt-control-weight: 500;
+  --loidolt-heading-weight: 600;
+  --loidolt-strong-weight: 600;
+}
+[data-preset='soft']:not([data-theme='dark'], [data-theme='dark'] *) {
+  --loidolt-background: #f4f6f8;
+  --loidolt-surface: #ffffff;
+  --loidolt-surface-alt: #f8fafc;
+  --loidolt-surface-sunken: #e9edf2;
+  --loidolt-surface-paper: #ffffff;
+  --loidolt-surface-inverse: #1c2430;
+  --loidolt-surface-input: #ffffff;
+  --loidolt-text: #1c2430;
+  --loidolt-text-muted: #556070;
+  --loidolt-text-inverse: #f4f6f8;
+  --loidolt-text-accent: #1d4ed8;
+  --loidolt-border: #d5dbe3;
+  --loidolt-border-soft: #e4e8ee;
+  --loidolt-border-strong: #8792a2;
+  --loidolt-border-control: #7b8696;
+  --loidolt-border-sunken: #d5dbe3;
+  --loidolt-accent: #2563eb;
+  --loidolt-accent-hover: #1d4ed8;
+  --loidolt-on-accent: #ffffff;
+  --loidolt-danger: #c62828;
+  --loidolt-danger-hover: #a51d1d;
+  --loidolt-on-danger: #ffffff;
+  --loidolt-text-danger: #b42318;
+  --loidolt-success: #1f7a4d;
+  --loidolt-on-success: #ffffff;
+  --loidolt-text-success: #1a6a42;
+  --loidolt-warning: #a15c07;
+  --loidolt-on-warning: #ffffff;
+  --loidolt-text-warning: #8a4b06;
+  --loidolt-info: #0e6b8c;
+  --loidolt-on-info: #ffffff;
+  --loidolt-text-info: #0b5c78;
+  --loidolt-focus-ring: #2563eb;
+  --loidolt-shadow-color: #1c2430;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent);
+  --loidolt-chart-1: var(--loidolt-color-series-1);
+  --loidolt-chart-2: var(--loidolt-color-series-2);
+  --loidolt-chart-3: var(--loidolt-color-series-3);
+  --loidolt-chart-4: var(--loidolt-color-series-4);
+  --loidolt-chart-5: var(--loidolt-color-series-5);
+  --loidolt-chart-6: var(--loidolt-color-series-6);
+  --loidolt-chart-7: var(--loidolt-color-series-7);
+  --loidolt-chart-8: var(--loidolt-color-series-8);
+  --loidolt-chart-sequential-1: var(--loidolt-color-sequential-1);
+  --loidolt-chart-sequential-2: var(--loidolt-color-sequential-2);
+  --loidolt-chart-sequential-3: var(--loidolt-color-sequential-3);
+  --loidolt-chart-sequential-4: var(--loidolt-color-sequential-4);
+  --loidolt-chart-sequential-5: var(--loidolt-color-sequential-5);
+  --loidolt-chart-diverging-1: var(--loidolt-color-diverging-1);
+  --loidolt-chart-diverging-2: var(--loidolt-color-diverging-2);
+  --loidolt-chart-diverging-3: var(--loidolt-color-diverging-3);
+  --loidolt-chart-diverging-4: var(--loidolt-color-diverging-4);
+  --loidolt-chart-diverging-5: var(--loidolt-color-diverging-5);
+  --loidolt-chart-diverging-6: var(--loidolt-color-diverging-6);
+  --loidolt-chart-diverging-7: var(--loidolt-color-diverging-7);
+  --loidolt-chart-positive: var(--loidolt-color-success);
+  --loidolt-chart-negative: var(--loidolt-color-error);
+  --loidolt-map-land: var(--loidolt-color-paper);
+  --loidolt-map-water: var(--loidolt-color-map-water);
+  --loidolt-map-park: var(--loidolt-color-map-park);
+  --loidolt-map-road: var(--loidolt-color-map-road);
+  --loidolt-map-road-major: var(--loidolt-color-map-road-major);
+  --loidolt-map-building: var(--loidolt-color-map-building);
+  --loidolt-map-boundary: var(--loidolt-color-line-strong);
+  --loidolt-map-label: var(--loidolt-color-deep);
+  --loidolt-map-label-halo: var(--loidolt-color-panel);
+  --loidolt-syntax-keyword: var(--loidolt-color-syntax-keyword);
+  --loidolt-syntax-string: var(--loidolt-color-syntax-string);
+  --loidolt-syntax-comment: var(--loidolt-color-syntax-comment);
+  --loidolt-syntax-constant: var(--loidolt-color-syntax-constant);
+  --loidolt-syntax-function: var(--loidolt-color-syntax-function);
+  --loidolt-syntax-parameter: var(--loidolt-color-syntax-parameter);
+  --loidolt-syntax-punctuation: var(--loidolt-color-syntax-punctuation);
+}

package/dist/presets/soft.root-dark-auto.css

@@ -0,0 +1,157 @@
+/* Soft preset — Rounded corners, sentence-case labels, cool neutrals and a blue accent.
+   Generated by definePreset(). Do not edit directly. */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --loidolt-background: #11151b;
+  --loidolt-surface: #181d25;
+  --loidolt-surface-alt: #1e2430;
+  --loidolt-surface-sunken: #0c0f13;
+  --loidolt-surface-paper: #ffffff;
+  --loidolt-surface-inverse: #e6eaf0;
+  --loidolt-surface-input: #1e2430;
+  --loidolt-text: #e6eaf0;
+  --loidolt-text-muted: #9aa5b4;
+  --loidolt-text-inverse: #11151b;
+  --loidolt-text-accent: #8ab4ff;
+  --loidolt-border: #2d3542;
+  --loidolt-border-soft: #232a35;
+  --loidolt-border-strong: #5b6677;
+  --loidolt-border-control: #6f7a8b;
+  --loidolt-border-sunken: #1f2630;
+  --loidolt-accent: #6aa1ff;
+  --loidolt-accent-hover: #8ab4ff;
+  --loidolt-on-accent: #0c1220;
+  --loidolt-danger: #f07167;
+  --loidolt-danger-hover: #f4928a;
+  --loidolt-on-danger: #11151b;
+  --loidolt-text-danger: #f59a92;
+  --loidolt-success: #5cc08a;
+  --loidolt-on-success: #11151b;
+  --loidolt-text-success: #74cf9c;
+  --loidolt-warning: #e0a24a;
+  --loidolt-on-warning: #11151b;
+  --loidolt-text-warning: #e8b468;
+  --loidolt-info: #5bb5d6;
+  --loidolt-on-info: #11151b;
+  --loidolt-text-info: #7cc6e2;
+  --loidolt-focus-ring: #8ab4ff;
+  --loidolt-shadow-color: #000000;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+  --loidolt-chart-1: #e0672f;
+  --loidolt-chart-2: #6ea5bd;
+  --loidolt-chart-3: #93b287;
+  --loidolt-chart-4: #d9ab63;
+  --loidolt-chart-5: #c49ac0;
+  --loidolt-chart-6: #b8ad96;
+  --loidolt-chart-7: #6fb8a6;
+  --loidolt-chart-8: #c79a78;
+  --loidolt-chart-sequential-1: #3a2a1d;
+  --loidolt-chart-sequential-2: #6b4225;
+  --loidolt-chart-sequential-3: #a4602f;
+  --loidolt-chart-sequential-4: #d98a4d;
+  --loidolt-chart-sequential-5: #f2bd8a;
+  --loidolt-chart-diverging-1: #85b6ca;
+  --loidolt-chart-diverging-2: #5a8ea3;
+  --loidolt-chart-diverging-3: #35596a;
+  --loidolt-chart-diverging-4: #3a3d34;
+  --loidolt-chart-diverging-5: #7a4428;
+  --loidolt-chart-diverging-6: #bf6a3a;
+  --loidolt-chart-diverging-7: #f0895c;
+  --loidolt-chart-positive: #93b287;
+  --loidolt-chart-negative: #e88b81;
+  --loidolt-map-land: #161814;
+  --loidolt-map-water: #1d2b31;
+  --loidolt-map-park: #1f271c;
+  --loidolt-map-road: #2b2e26;
+  --loidolt-map-road-major: #3a3d34;
+  --loidolt-map-building: #24271f;
+  --loidolt-map-boundary: #787c6b;
+  --loidolt-map-label: #ebe7dc;
+  --loidolt-map-label-halo: #161814;
+  --loidolt-syntax-keyword: #a9441d;
+  --loidolt-syntax-string: #3f5139;
+  --loidolt-syntax-comment: #5f5b50;
+  --loidolt-syntax-constant: #7c4d17;
+  --loidolt-syntax-function: #265162;
+  --loidolt-syntax-parameter: #7a4a78;
+  --loidolt-syntax-punctuation: #474a42;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:root:not([data-theme='light']) {
+    color-scheme: dark;
+    --loidolt-background: #11151b;
+    --loidolt-surface: #181d25;
+    --loidolt-surface-alt: #1e2430;
+    --loidolt-surface-sunken: #0c0f13;
+    --loidolt-surface-paper: #ffffff;
+    --loidolt-surface-inverse: #e6eaf0;
+    --loidolt-surface-input: #1e2430;
+    --loidolt-text: #e6eaf0;
+    --loidolt-text-muted: #9aa5b4;
+    --loidolt-text-inverse: #11151b;
+    --loidolt-text-accent: #8ab4ff;
+    --loidolt-border: #2d3542;
+    --loidolt-border-soft: #232a35;
+    --loidolt-border-strong: #5b6677;
+    --loidolt-border-control: #6f7a8b;
+    --loidolt-border-sunken: #1f2630;
+    --loidolt-accent: #6aa1ff;
+    --loidolt-accent-hover: #8ab4ff;
+    --loidolt-on-accent: #0c1220;
+    --loidolt-danger: #f07167;
+    --loidolt-danger-hover: #f4928a;
+    --loidolt-on-danger: #11151b;
+    --loidolt-text-danger: #f59a92;
+    --loidolt-success: #5cc08a;
+    --loidolt-on-success: #11151b;
+    --loidolt-text-success: #74cf9c;
+    --loidolt-warning: #e0a24a;
+    --loidolt-on-warning: #11151b;
+    --loidolt-text-warning: #e8b468;
+    --loidolt-info: #5bb5d6;
+    --loidolt-on-info: #11151b;
+    --loidolt-text-info: #7cc6e2;
+    --loidolt-focus-ring: #8ab4ff;
+    --loidolt-shadow-color: #000000;
+    --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+    --loidolt-chart-1: #e0672f;
+    --loidolt-chart-2: #6ea5bd;
+    --loidolt-chart-3: #93b287;
+    --loidolt-chart-4: #d9ab63;
+    --loidolt-chart-5: #c49ac0;
+    --loidolt-chart-6: #b8ad96;
+    --loidolt-chart-7: #6fb8a6;
+    --loidolt-chart-8: #c79a78;
+    --loidolt-chart-sequential-1: #3a2a1d;
+    --loidolt-chart-sequential-2: #6b4225;
+    --loidolt-chart-sequential-3: #a4602f;
+    --loidolt-chart-sequential-4: #d98a4d;
+    --loidolt-chart-sequential-5: #f2bd8a;
+    --loidolt-chart-diverging-1: #85b6ca;
+    --loidolt-chart-diverging-2: #5a8ea3;
+    --loidolt-chart-diverging-3: #35596a;
+    --loidolt-chart-diverging-4: #3a3d34;
+    --loidolt-chart-diverging-5: #7a4428;
+    --loidolt-chart-diverging-6: #bf6a3a;
+    --loidolt-chart-diverging-7: #f0895c;
+    --loidolt-chart-positive: #93b287;
+    --loidolt-chart-negative: #e88b81;
+    --loidolt-map-land: #161814;
+    --loidolt-map-water: #1d2b31;
+    --loidolt-map-park: #1f271c;
+    --loidolt-map-road: #2b2e26;
+    --loidolt-map-road-major: #3a3d34;
+    --loidolt-map-building: #24271f;
+    --loidolt-map-boundary: #787c6b;
+    --loidolt-map-label: #ebe7dc;
+    --loidolt-map-label-halo: #161814;
+    --loidolt-syntax-keyword: #a9441d;
+    --loidolt-syntax-string: #3f5139;
+    --loidolt-syntax-comment: #5f5b50;
+    --loidolt-syntax-constant: #7c4d17;
+    --loidolt-syntax-function: #265162;
+    --loidolt-syntax-parameter: #7a4a78;
+    --loidolt-syntax-punctuation: #474a42;
+  }
+}

package/dist/presets/soft.root-dark.css

@@ -0,0 +1,78 @@
+/* Soft preset — Rounded corners, sentence-case labels, cool neutrals and a blue accent.
+   Generated by definePreset(). Do not edit directly. */
+:root[data-theme='dark'] {
+  color-scheme: dark;
+  --loidolt-background: #11151b;
+  --loidolt-surface: #181d25;
+  --loidolt-surface-alt: #1e2430;
+  --loidolt-surface-sunken: #0c0f13;
+  --loidolt-surface-paper: #ffffff;
+  --loidolt-surface-inverse: #e6eaf0;
+  --loidolt-surface-input: #1e2430;
+  --loidolt-text: #e6eaf0;
+  --loidolt-text-muted: #9aa5b4;
+  --loidolt-text-inverse: #11151b;
+  --loidolt-text-accent: #8ab4ff;
+  --loidolt-border: #2d3542;
+  --loidolt-border-soft: #232a35;
+  --loidolt-border-strong: #5b6677;
+  --loidolt-border-control: #6f7a8b;
+  --loidolt-border-sunken: #1f2630;
+  --loidolt-accent: #6aa1ff;
+  --loidolt-accent-hover: #8ab4ff;
+  --loidolt-on-accent: #0c1220;
+  --loidolt-danger: #f07167;
+  --loidolt-danger-hover: #f4928a;
+  --loidolt-on-danger: #11151b;
+  --loidolt-text-danger: #f59a92;
+  --loidolt-success: #5cc08a;
+  --loidolt-on-success: #11151b;
+  --loidolt-text-success: #74cf9c;
+  --loidolt-warning: #e0a24a;
+  --loidolt-on-warning: #11151b;
+  --loidolt-text-warning: #e8b468;
+  --loidolt-info: #5bb5d6;
+  --loidolt-on-info: #11151b;
+  --loidolt-text-info: #7cc6e2;
+  --loidolt-focus-ring: #8ab4ff;
+  --loidolt-shadow-color: #000000;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+  --loidolt-chart-1: #e0672f;
+  --loidolt-chart-2: #6ea5bd;
+  --loidolt-chart-3: #93b287;
+  --loidolt-chart-4: #d9ab63;
+  --loidolt-chart-5: #c49ac0;
+  --loidolt-chart-6: #b8ad96;
+  --loidolt-chart-7: #6fb8a6;
+  --loidolt-chart-8: #c79a78;
+  --loidolt-chart-sequential-1: #3a2a1d;
+  --loidolt-chart-sequential-2: #6b4225;
+  --loidolt-chart-sequential-3: #a4602f;
+  --loidolt-chart-sequential-4: #d98a4d;
+  --loidolt-chart-sequential-5: #f2bd8a;
+  --loidolt-chart-diverging-1: #85b6ca;
+  --loidolt-chart-diverging-2: #5a8ea3;
+  --loidolt-chart-diverging-3: #35596a;
+  --loidolt-chart-diverging-4: #3a3d34;
+  --loidolt-chart-diverging-5: #7a4428;
+  --loidolt-chart-diverging-6: #bf6a3a;
+  --loidolt-chart-diverging-7: #f0895c;
+  --loidolt-chart-positive: #93b287;
+  --loidolt-chart-negative: #e88b81;
+  --loidolt-map-land: #161814;
+  --loidolt-map-water: #1d2b31;
+  --loidolt-map-park: #1f271c;
+  --loidolt-map-road: #2b2e26;
+  --loidolt-map-road-major: #3a3d34;
+  --loidolt-map-building: #24271f;
+  --loidolt-map-boundary: #787c6b;
+  --loidolt-map-label: #ebe7dc;
+  --loidolt-map-label-halo: #161814;
+  --loidolt-syntax-keyword: #a9441d;
+  --loidolt-syntax-string: #3f5139;
+  --loidolt-syntax-comment: #5f5b50;
+  --loidolt-syntax-constant: #7c4d17;
+  --loidolt-syntax-function: #265162;
+  --loidolt-syntax-parameter: #7a4a78;
+  --loidolt-syntax-punctuation: #474a42;
+}

package/dist/presets/soft.root.css

@@ -0,0 +1,156 @@
+/* Soft preset — Rounded corners, sentence-case labels, cool neutrals and a blue accent.
+   Generated by definePreset(). Do not edit directly. */
+:root {
+  --loidolt-font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --loidolt-font-utility: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --loidolt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --loidolt-font-size-xs: 0.75rem;
+  --loidolt-font-size-sm: 0.75rem;
+  --loidolt-font-size-base: 0.875rem;
+  --loidolt-font-size-md: 1rem;
+  --loidolt-font-size-lg: 1.25rem;
+  --loidolt-font-size-xl: 1.75rem;
+  --loidolt-font-size-display: 2.5rem;
+  --loidolt-font-tracking-utility: 0.1em;
+  --loidolt-font-tracking-wide: 0.13em;
+  --loidolt-font-line-height-tight: 1.15;
+  --loidolt-font-line-height-normal: 1.45;
+  --loidolt-font-line-height-relaxed: 1.65;
+  --loidolt-space-0: 0;
+  --loidolt-space-1: 0.25rem;
+  --loidolt-space-2: 0.5rem;
+  --loidolt-space-3: 0.75rem;
+  --loidolt-space-4: 1rem;
+  --loidolt-space-5: 1.25rem;
+  --loidolt-space-6: 1.5rem;
+  --loidolt-space-8: 2rem;
+  --loidolt-space-10: 2.5rem;
+  --loidolt-space-12: 3rem;
+  --loidolt-space-16: 4rem;
+  --loidolt-size-control-sm: 2rem;
+  --loidolt-size-control: 2.375rem;
+  --loidolt-size-control-lg: 2.75rem;
+  --loidolt-size-topbar: 3.875rem;
+  --loidolt-size-contextbar: 2.5625rem;
+  --loidolt-size-sidebar: 17rem;
+  --loidolt-size-inspector: 18rem;
+  --loidolt-size-content: 75rem;
+  --loidolt-border-width: 1px;
+  --loidolt-border-radius: 6px;
+  --loidolt-border-radius-pill: 999px;
+  --loidolt-shadow-popover: 0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent);
+  --loidolt-shadow-modal: 0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent);
+  --loidolt-shadow-artwork: 0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent);
+  --loidolt-motion-fast: 100ms;
+  --loidolt-motion-normal: 150ms;
+  --loidolt-motion-slow: 220ms;
+  --loidolt-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --loidolt-radius-control: 6px;
+  --loidolt-radius-inner: 4px;
+  --loidolt-radius-surface: 8px;
+  --loidolt-radius-overlay: 10px;
+  --loidolt-stroke-focus: 2px;
+  --loidolt-stroke-indicator: 2px;
+  --loidolt-stroke-accent: 3px;
+  --loidolt-pad-control-x: 0.9775rem;
+  --loidolt-pad-control-x-sm: 0.7475rem;
+  --loidolt-pad-control-x-lg: 1.38rem;
+  --loidolt-pad-control-y: 0.575rem;
+  --loidolt-pad-control-y-sm: 0.437rem;
+  --loidolt-pad-field: 0.5175rem 0.1725rem;
+  --loidolt-pad-item: 0.7475rem 0.6325rem;
+  --loidolt-pad-cell: 0.805rem 0.92rem;
+  --loidolt-pad-callout: 0.92rem 1.15rem;
+  --loidolt-pad-surface: 1.15rem;
+  --loidolt-pad-overlay: 1.15rem 1.4375rem;
+  --loidolt-pad-popover: 0.5175rem;
+  --loidolt-pad-bar-x: 1.5525rem;
+  --loidolt-pad-pane: 1.4375rem;
+  --loidolt-pad-page: 1.725rem;
+  --loidolt-gap-field: 0.4025rem;
+  --loidolt-gap-actions: 0.575rem;
+  --loidolt-label-transform: none;
+  --loidolt-label-tracking: 0em;
+  --loidolt-label-tracking-wide: 0.02em;
+  --loidolt-label-weight: 500;
+  --loidolt-control-transform: none;
+  --loidolt-control-tracking: 0em;
+  --loidolt-control-weight: 500;
+  --loidolt-heading-weight: 600;
+  --loidolt-strong-weight: 600;
+}
+:root:not([data-theme='dark']) {
+  --loidolt-background: #f4f6f8;
+  --loidolt-surface: #ffffff;
+  --loidolt-surface-alt: #f8fafc;
+  --loidolt-surface-sunken: #e9edf2;
+  --loidolt-surface-paper: #ffffff;
+  --loidolt-surface-inverse: #1c2430;
+  --loidolt-surface-input: #ffffff;
+  --loidolt-text: #1c2430;
+  --loidolt-text-muted: #556070;
+  --loidolt-text-inverse: #f4f6f8;
+  --loidolt-text-accent: #1d4ed8;
+  --loidolt-border: #d5dbe3;
+  --loidolt-border-soft: #e4e8ee;
+  --loidolt-border-strong: #8792a2;
+  --loidolt-border-control: #7b8696;
+  --loidolt-border-sunken: #d5dbe3;
+  --loidolt-accent: #2563eb;
+  --loidolt-accent-hover: #1d4ed8;
+  --loidolt-on-accent: #ffffff;
+  --loidolt-danger: #c62828;
+  --loidolt-danger-hover: #a51d1d;
+  --loidolt-on-danger: #ffffff;
+  --loidolt-text-danger: #b42318;
+  --loidolt-success: #1f7a4d;
+  --loidolt-on-success: #ffffff;
+  --loidolt-text-success: #1a6a42;
+  --loidolt-warning: #a15c07;
+  --loidolt-on-warning: #ffffff;
+  --loidolt-text-warning: #8a4b06;
+  --loidolt-info: #0e6b8c;
+  --loidolt-on-info: #ffffff;
+  --loidolt-text-info: #0b5c78;
+  --loidolt-focus-ring: #2563eb;
+  --loidolt-shadow-color: #1c2430;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent);
+  --loidolt-chart-1: var(--loidolt-color-series-1);
+  --loidolt-chart-2: var(--loidolt-color-series-2);
+  --loidolt-chart-3: var(--loidolt-color-series-3);
+  --loidolt-chart-4: var(--loidolt-color-series-4);
+  --loidolt-chart-5: var(--loidolt-color-series-5);
+  --loidolt-chart-6: var(--loidolt-color-series-6);
+  --loidolt-chart-7: var(--loidolt-color-series-7);
+  --loidolt-chart-8: var(--loidolt-color-series-8);
+  --loidolt-chart-sequential-1: var(--loidolt-color-sequential-1);
+  --loidolt-chart-sequential-2: var(--loidolt-color-sequential-2);
+  --loidolt-chart-sequential-3: var(--loidolt-color-sequential-3);
+  --loidolt-chart-sequential-4: var(--loidolt-color-sequential-4);
+  --loidolt-chart-sequential-5: var(--loidolt-color-sequential-5);
+  --loidolt-chart-diverging-1: var(--loidolt-color-diverging-1);
+  --loidolt-chart-diverging-2: var(--loidolt-color-diverging-2);
+  --loidolt-chart-diverging-3: var(--loidolt-color-diverging-3);
+  --loidolt-chart-diverging-4: var(--loidolt-color-diverging-4);
+  --loidolt-chart-diverging-5: var(--loidolt-color-diverging-5);
+  --loidolt-chart-diverging-6: var(--loidolt-color-diverging-6);
+  --loidolt-chart-diverging-7: var(--loidolt-color-diverging-7);
+  --loidolt-chart-positive: var(--loidolt-color-success);
+  --loidolt-chart-negative: var(--loidolt-color-error);
+  --loidolt-map-land: var(--loidolt-color-paper);
+  --loidolt-map-water: var(--loidolt-color-map-water);
+  --loidolt-map-park: var(--loidolt-color-map-park);
+  --loidolt-map-road: var(--loidolt-color-map-road);
+  --loidolt-map-road-major: var(--loidolt-color-map-road-major);
+  --loidolt-map-building: var(--loidolt-color-map-building);
+  --loidolt-map-boundary: var(--loidolt-color-line-strong);
+  --loidolt-map-label: var(--loidolt-color-deep);
+  --loidolt-map-label-halo: var(--loidolt-color-panel);
+  --loidolt-syntax-keyword: var(--loidolt-color-syntax-keyword);
+  --loidolt-syntax-string: var(--loidolt-color-syntax-string);
+  --loidolt-syntax-comment: var(--loidolt-color-syntax-comment);
+  --loidolt-syntax-constant: var(--loidolt-color-syntax-constant);
+  --loidolt-syntax-function: var(--loidolt-color-syntax-function);
+  --loidolt-syntax-parameter: var(--loidolt-color-syntax-parameter);
+  --loidolt-syntax-punctuation: var(--loidolt-color-syntax-punctuation);
+}

package/dist/tokens.css

@@ -18,6 +18,38 @@
   --loidolt-color-success: #3f5139;
   --loidolt-color-warning: #7c4d17;
   --loidolt-color-info: #265162;
+  --loidolt-color-series-1: #c65224;
+  --loidolt-color-series-2: #2f6f8a;
+  --loidolt-color-series-3: #5b7a3a;
+  --loidolt-color-series-4: #9a6a12;
+  --loidolt-color-series-5: #7a4a78;
+  --loidolt-color-series-6: #4d5a6a;
+  --loidolt-color-series-7: #2f7d6d;
+  --loidolt-color-series-8: #8a5a3c;
+  --loidolt-color-sequential-1: #ecd3b8;
+  --loidolt-color-sequential-2: #dea67a;
+  --loidolt-color-sequential-3: #c97a45;
+  --loidolt-color-sequential-4: #a4521f;
+  --loidolt-color-sequential-5: #6e3314;
+  --loidolt-color-diverging-1: #265162;
+  --loidolt-color-diverging-2: #4f8196;
+  --loidolt-color-diverging-3: #9cbac3;
+  --loidolt-color-diverging-4: #ddd7c9;
+  --loidolt-color-diverging-5: #e0a986;
+  --loidolt-color-diverging-6: #c96f3d;
+  --loidolt-color-diverging-7: #9b3a17;
+  --loidolt-color-syntax-keyword: #f0895c;
+  --loidolt-color-syntax-string: #a3c197;
+  --loidolt-color-syntax-comment: #b5ae9c;
+  --loidolt-color-syntax-constant: #e2b56c;
+  --loidolt-color-syntax-function: #8fc0d4;
+  --loidolt-color-syntax-parameter: #d3a8cf;
+  --loidolt-color-syntax-punctuation: #d8d2c4;
+  --loidolt-color-map-water: #b9cdd3;
+  --loidolt-color-map-park: #d3d8bd;
+  --loidolt-color-map-road: #f5f2e9;
+  --loidolt-color-map-road-major: #ffffff;
+  --loidolt-color-map-building: #d8d3c7;
   --loidolt-font-display: "Jost", "Avenir Next", sans-serif;
   --loidolt-font-utility: "Archivo", "Helvetica Neue", sans-serif;
   --loidolt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
@@ -111,4 +143,75 @@
   --loidolt-focus-ring: var(--loidolt-color-orange);
   --loidolt-shadow-color: var(--loidolt-color-deep);
   --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent);
+  --loidolt-chart-1: var(--loidolt-color-series-1);
+  --loidolt-chart-2: var(--loidolt-color-series-2);
+  --loidolt-chart-3: var(--loidolt-color-series-3);
+  --loidolt-chart-4: var(--loidolt-color-series-4);
+  --loidolt-chart-5: var(--loidolt-color-series-5);
+  --loidolt-chart-6: var(--loidolt-color-series-6);
+  --loidolt-chart-7: var(--loidolt-color-series-7);
+  --loidolt-chart-8: var(--loidolt-color-series-8);
+  --loidolt-chart-sequential-1: var(--loidolt-color-sequential-1);
+  --loidolt-chart-sequential-2: var(--loidolt-color-sequential-2);
+  --loidolt-chart-sequential-3: var(--loidolt-color-sequential-3);
+  --loidolt-chart-sequential-4: var(--loidolt-color-sequential-4);
+  --loidolt-chart-sequential-5: var(--loidolt-color-sequential-5);
+  --loidolt-chart-diverging-1: var(--loidolt-color-diverging-1);
+  --loidolt-chart-diverging-2: var(--loidolt-color-diverging-2);
+  --loidolt-chart-diverging-3: var(--loidolt-color-diverging-3);
+  --loidolt-chart-diverging-4: var(--loidolt-color-diverging-4);
+  --loidolt-chart-diverging-5: var(--loidolt-color-diverging-5);
+  --loidolt-chart-diverging-6: var(--loidolt-color-diverging-6);
+  --loidolt-chart-diverging-7: var(--loidolt-color-diverging-7);
+  --loidolt-chart-positive: var(--loidolt-color-success);
+  --loidolt-chart-negative: var(--loidolt-color-error);
+  --loidolt-map-land: var(--loidolt-color-paper);
+  --loidolt-map-water: var(--loidolt-color-map-water);
+  --loidolt-map-park: var(--loidolt-color-map-park);
+  --loidolt-map-road: var(--loidolt-color-map-road);
+  --loidolt-map-road-major: var(--loidolt-color-map-road-major);
+  --loidolt-map-building: var(--loidolt-color-map-building);
+  --loidolt-map-boundary: var(--loidolt-color-line-strong);
+  --loidolt-map-label: var(--loidolt-color-deep);
+  --loidolt-map-label-halo: var(--loidolt-color-panel);
+  --loidolt-syntax-keyword: var(--loidolt-color-syntax-keyword);
+  --loidolt-syntax-string: var(--loidolt-color-syntax-string);
+  --loidolt-syntax-comment: var(--loidolt-color-syntax-comment);
+  --loidolt-syntax-constant: var(--loidolt-color-syntax-constant);
+  --loidolt-syntax-function: var(--loidolt-color-syntax-function);
+  --loidolt-syntax-parameter: var(--loidolt-color-syntax-parameter);
+  --loidolt-syntax-punctuation: var(--loidolt-color-syntax-punctuation);
+  --loidolt-radius-control: var(--loidolt-border-radius);
+  --loidolt-radius-inner: 0px;
+  --loidolt-radius-surface: var(--loidolt-border-radius);
+  --loidolt-radius-overlay: var(--loidolt-border-radius);
+  --loidolt-stroke-focus: 2px;
+  --loidolt-stroke-indicator: 2px;
+  --loidolt-stroke-accent: 3px;
+  --loidolt-pad-control-x: 0.85rem;
+  --loidolt-pad-control-x-sm: 0.65rem;
+  --loidolt-pad-control-x-lg: 1.2rem;
+  --loidolt-pad-control-y: 0.5rem;
+  --loidolt-pad-control-y-sm: 0.38rem;
+  --loidolt-pad-field: 0.45rem 0.15rem;
+  --loidolt-pad-item: 0.65rem 0.55rem;
+  --loidolt-pad-cell: 0.7rem 0.8rem;
+  --loidolt-pad-callout: 0.8rem 1rem;
+  --loidolt-pad-surface: var(--loidolt-space-4);
+  --loidolt-pad-overlay: 1rem 1.25rem;
+  --loidolt-pad-popover: 0.45rem;
+  --loidolt-pad-bar-x: 1.35rem;
+  --loidolt-pad-pane: 1.25rem;
+  --loidolt-pad-page: var(--loidolt-space-6);
+  --loidolt-gap-field: 0.35rem;
+  --loidolt-gap-actions: var(--loidolt-space-2);
+  --loidolt-label-transform: uppercase;
+  --loidolt-label-tracking: var(--loidolt-font-tracking-utility);
+  --loidolt-label-tracking-wide: var(--loidolt-font-tracking-wide);
+  --loidolt-label-weight: 400;
+  --loidolt-control-transform: uppercase;
+  --loidolt-control-tracking: 0.08em;
+  --loidolt-control-weight: 400;
+  --loidolt-heading-weight: 500;
+  --loidolt-strong-weight: 600;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loidolt/theme-tokens",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Typed design tokens for Loidolt applications",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,7 @@
     "./css": "./dist/tokens.css",
     "./css/dark": "./dist/dark.css",
     "./css/dark-auto": "./dist/dark-auto.css",
+    "./css/presets/*": "./dist/presets/*.css",
     "./package.json": "./package.json"
   },
   "files": [