@adukiorg/anza 0.2.9 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/bin/anza/anza-linux-arm64 +0 -0
  3. package/bin/anza/anza-linux-x64 +0 -0
  4. package/bin/anza/anza-macos-arm64 +0 -0
  5. package/bin/anza/anza-macos-x64 +0 -0
  6. package/bin/anza/anza-windows-x64.exe +0 -0
  7. package/bin/anza/index.js +0 -0
  8. package/bin/create/index.js +0 -0
  9. package/bin/create/run.js +5 -3
  10. package/package.json +1 -1
  11. package/src/core/api/index.js +26 -1
  12. package/src/core/router/boot.js +10 -2
  13. package/src/core/ui/define/container.js +1 -1
  14. package/src/core/ui/define/element.js +9 -2
  15. package/src/core/ui/define/orchestrator.js +8 -1
  16. package/src/core/ui/defs/dock.js +2 -2
  17. package/src/elements/forms/input/index.js +1 -2
  18. package/src/styles/base.css +15 -0
  19. package/src/tokens/primitives/colors.css +62 -45
  20. package/src/tokens/primitives/motion.css +0 -8
  21. package/src/tokens/primitives/spacing.css +9 -17
  22. package/src/tokens/primitives/typography.css +32 -29
  23. package/src/tokens/registered/dimensions.css +3 -3
  24. package/src/tokens/semantic/components.css +74 -76
  25. package/src/tokens/semantic/dark.css +34 -34
  26. package/src/tokens/semantic/light.css +35 -38
package/CHANGELOG.md CHANGED
@@ -17,6 +17,14 @@ Versioning follows [Semantic Versioning](https://semver.org/).
17
17
 
18
18
  ---
19
19
 
20
+ ## [0.3.0] — 2026-06-13
21
+
22
+ ### Fixed
23
+
24
+ - Sync `tools/Cargo.toml` version with npm package version (0.2.1 → 0.3.0)
25
+
26
+ ---
27
+
20
28
  ## [0.2.8] — 2026-06-09
21
29
 
22
30
  ### Fixed
package/bin/anza/anza-linux-arm64 CHANGED
Binary file
package/bin/anza/anza-linux-x64 CHANGED
Binary file
package/bin/anza/anza-macos-arm64 CHANGED
Binary file
package/bin/anza/anza-macos-x64 CHANGED
Binary file
package/bin/anza/anza-windows-x64.exe CHANGED
Binary file
package/bin/anza/index.js CHANGED
File without changes
package/bin/create/index.js CHANGED
File without changes
package/bin/create/run.js CHANGED
@@ -36,7 +36,9 @@ const HTML = (name) => `<!DOCTYPE html>
36
36
 
37
37
  <script type="module" src="/dist/app.js"></script>
38
38
  </head>
39
- <body></body>
39
+ <body>
40
+ <dock-main id="main"></dock-main>
41
+ </body>
40
42
  </html>
41
43
  `;
42
44
 
@@ -48,10 +50,10 @@ import { dock } from '@adukiorg/anza/ui';
48
50
  import '@adukiorg/anza/theme';
49
51
 
50
52
  // Service Worker
51
- navigator.serviceWorker.register('/dist/sw.js');
53
+ navigator.serviceWorker.register('/dist/sw.js', { type: 'module' });
52
54
 
53
55
  // Layout shell
54
- dock('main', { parent: 'body' });
56
+ dock('main');
55
57
 
56
58
  // Pages
57
59
  import './pages/index.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adukiorg/anza",
3
- "version": "0.2.9",
3
+ "version": "0.3.0",
4
4
  "description": "Anza web platform library — reactive state, networking, offline, animations, custom elements. Zero build step. Pure browser ESM.",
5
5
  "author": "fescii",
6
6
  "license": "MIT",
package/src/core/api/index.js CHANGED
@@ -18,6 +18,24 @@ import { prefixes } from './prefixes/index.js';
18
18
  import { events } from './events/index.js';
19
19
  import { cache as apiCache } from './caches/index.js';
20
20
 
21
+ let cache = null;
22
+
23
+ export function sync() {
24
+ if (typeof document === 'undefined') return;
25
+ const el = document.getElementById('anza-state');
26
+ if (el) {
27
+ try {
28
+ cache = JSON.parse(el.textContent);
29
+ } catch (_) {
30
+ cache = null;
31
+ }
32
+ } else {
33
+ cache = null;
34
+ }
35
+ }
36
+
37
+ sync();
38
+
21
39
  // Register global telemetry inbound interceptor to emit requests status/errors events
22
40
  pipeline.inbound((responseOrError) => {
23
41
  const requestId = responseOrError?.requestId;
@@ -58,6 +76,11 @@ pipeline.inbound((responseOrError) => {
58
76
  */
59
77
  async function request(url, method, body, opts = {}) {
60
78
  const resolvedUrl = prefixes.resolve(url);
79
+
80
+ if (method === 'GET' && cache && resolvedUrl in cache) {
81
+ return JSON.parse(JSON.stringify(cache[resolvedUrl]));
82
+ }
83
+
61
84
  const headers = new Headers(opts.headers || {});
62
85
 
63
86
  // Auto-serialize JSON bodies
@@ -133,6 +156,8 @@ async function request(url, method, body, opts = {}) {
133
156
 
134
157
  export const api = {
135
158
  get: (url, opts) => request(url, 'GET', null, opts),
159
+ state: () => cache ? JSON.parse(JSON.stringify(cache.__route || {})) : null,
160
+ sync,
136
161
  post: (url, body, opts) => request(url, 'POST', body, opts),
137
162
  put: (url, body, opts) => request(url, 'PUT', body, opts),
138
163
  patch: (url, body, opts) => request(url, 'PATCH', body, opts),
@@ -153,6 +178,6 @@ export const api = {
153
178
  emit: (event, detail) => events.emit(event, detail)
154
179
  };
155
180
 
156
- export { pipeline, PlatformError, execute, retry, createNDJSONTransform, stream, upload, prefixes, events, apiCache as cache };
181
+ export { pipeline, PlatformError, execute, retry, createNDJSONTransform, stream, upload, prefixes, events, apiCache as cache, sync };
157
182
 
158
183
 
package/src/core/router/boot.js CHANGED
@@ -45,6 +45,7 @@ export function gate(promise) {
45
45
  * there is no body fallback.
46
46
  */
47
47
  function anchor() {
48
+ console.log('[Boot] anchor() started.');
48
49
  const el = document.getElementById('main');
49
50
  if (!el) {
50
51
  throw new Error(
@@ -63,10 +64,12 @@ function anchor() {
63
64
  * @param {() => any | Promise<any>} emitFn - runs the initial match + emit.
64
65
  */
65
66
  export function boot(emitFn) {
67
+ console.log('[Boot] boot() called. booted =', booted);
66
68
  if (booted) return;
67
69
  trigger = emitFn;
68
70
 
69
71
  const launch = async () => {
72
+ console.log('[Boot] launch() started. booted =', booted, 'gates count =', gates.size);
70
73
  if (booted) return;
71
74
 
72
75
  anchor(); // 1. wire main#main into the graph — must be first
@@ -74,19 +77,24 @@ export function boot(emitFn) {
74
77
  // Snapshot current gates; settle them all (failures are non-fatal — a
75
78
  // single element that fails to define must not wedge the whole router).
76
79
  const pending = Array.from(gates);
80
+ console.log('[Boot] pending gates:', pending);
77
81
  if (pending.length) {
78
82
  await Promise.allSettled(pending);
79
83
  }
84
+ console.log('[Boot] all gates settled!');
80
85
  booted = true;
81
86
  const fn = trigger;
82
87
  trigger = null;
83
- if (fn) await fn(); // 3. first match + emit
88
+ if (fn) {
89
+ console.log('[Boot] executing initial match trigger...');
90
+ await fn(); // 3. first match + emit
91
+ }
84
92
  };
85
93
 
86
94
  if (typeof document !== 'undefined' && document.readyState === 'loading') {
87
95
  document.addEventListener('DOMContentLoaded', () => { launch(); }, { once: true });
88
96
  } else {
89
- launch();
97
+ setTimeout(launch, 0);
90
98
  }
91
99
  }
92
100
 
package/src/core/ui/define/container.js CHANGED
@@ -56,7 +56,7 @@ export function container(tag, spec, base = import.meta.url) {
56
56
  // Strategy 1: Element-scoped transition (Chrome 147+, concurrent-safe)
57
57
  if (typeof this.startViewTransition === 'function') {
58
58
  try {
59
- const vt = this.startViewTransition({ callback: doSwap });
59
+ const vt = this.startViewTransition(doSwap);
60
60
  await vt.ready;
61
61
  } catch (err) {
62
62
  if (err?.name !== 'AbortError') console.warn('[UI Container] Scoped VT aborted:', err);
package/src/core/ui/define/element.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { BaseElement } from '../base.js';
2
- import { scheduleFrame } from '../schedule.js';
2
+ import { scheduleFrame, yieldTask } from '../schedule.js';
3
3
  import { router } from '../../router/index.js';
4
4
  import { specRegistry, internalsMap, initializedMap, pendingUpdatesMap, updateScheduledMap } from './state.js';
5
5
  import { preloadResources } from './utils.js';
@@ -84,7 +84,7 @@ export function element(tag, spec, base) {
84
84
  }
85
85
  }
86
86
  };
87
- window.addEventListener('native:hmr:css', hmrHandler);
87
+ window.addEventListener('anza:hmr:css', hmrHandler);
88
88
  }
89
89
  }
90
90
 
@@ -138,6 +138,13 @@ export function element(tag, spec, base) {
138
138
  return;
139
139
  }
140
140
 
141
+ if (typeof document !== 'undefined' && document.readyState === 'loading') {
142
+ await yieldTask();
143
+ if (!this.ctrl || this.ctrl.signal.aborted || !this.isConnected) {
144
+ return;
145
+ }
146
+ }
147
+
141
148
  if (templateNode && this.shadowRoot.childNodes.length === 0) {
142
149
  this.shadowRoot.appendChild(templateNode.cloneNode(true));
143
150
  }
package/src/core/ui/define/orchestrator.js CHANGED
@@ -11,6 +11,7 @@ export function initOrchestrator() {
11
11
  if (typeof window !== 'undefined') {
12
12
  dispose?.();
13
13
  dispose = router.on('found', async ({ tag, params, query, hash, chain, direction }) => {
14
+ console.log('[Orchestrator] FOUND event received for tag:', tag);
14
15
  // Resolve the top-level layout element in the chain
15
16
  const topTag = chain && chain.length > 0 ? chain[0].tag : tag;
16
17
  const topParams = chain && chain.length > 0 ? chain[0].params : params;
@@ -21,16 +22,22 @@ export function initOrchestrator() {
21
22
  }
22
23
 
23
24
  const spec = specRegistry.get(topTag.toLowerCase());
25
+ console.log('[Orchestrator] Resolved spec for tag', topTag, ':', spec);
24
26
  // Resolve the render target: the last container in the `via` chain, or
25
27
  // the legacy single `container`. Without either there is nothing to mount.
26
28
  const target = (Array.isArray(spec?.via) && spec.via.length)
27
29
  ? spec.via[spec.via.length - 1]
28
30
  : spec?.container;
29
- if (!spec || !target) return;
31
+ console.log('[Orchestrator] Target container name:', target);
32
+ if (!spec || !target) {
33
+ console.warn('[Orchestrator] Early return: missing spec or target');
34
+ return;
35
+ }
30
36
 
31
37
  // Use Advanced Container Registry lookup instead of blind DOM query.
32
38
  // The interceptor's cascade has already ensured the chain is mounted.
33
39
  const containerEl = router.getContainer(target);
40
+ console.log('[Orchestrator] containerEl found in registry:', containerEl);
34
41
  if (!containerEl) {
35
42
  console.warn(`Target container "${target}" not found in DOM for element <${topTag}>`);
36
43
  return;
package/src/core/ui/defs/dock.js CHANGED
@@ -28,7 +28,7 @@ const CONTAIN = ':host { contain: layout; display: block; }';
28
28
  */
29
29
  export function dock(name, config = {}, base) {
30
30
  const tag = config.tag ?? `dock-${name}`;
31
- const parent = config.parent ?? 'body';
31
+ const parent = config.parent ?? 'main';
32
32
 
33
33
  const spec = translate(config);
34
34
 
@@ -106,7 +106,7 @@ async function swap(el, options = {}) {
106
106
 
107
107
  if (typeof this.startViewTransition === 'function') {
108
108
  try {
109
- this._tx = this.startViewTransition({ callback: go });
109
+ this._tx = this.startViewTransition(go);
110
110
  await this._tx.finished;
111
111
  } catch (err) {
112
112
  if (err?.name !== 'AbortError') console.warn('[Native UI] dock scoped VT aborted:', err);
package/src/elements/forms/input/index.js CHANGED
@@ -67,7 +67,7 @@ ui.element('ui-input', {
67
67
  const input = tags.one('input');
68
68
  input.disabled = disabled;
69
69
  }
70
- };
70
+ }, import.meta.url);
71
71
 
72
72
  function syncAttributes(el, tags) {
73
73
  const input = tags.one('input');
@@ -100,4 +100,3 @@ function validate(el, internals, input) {
100
100
  internals.setValidity({});
101
101
  }
102
102
  }
103
- }, import.meta.url);
package/src/styles/base.css CHANGED
@@ -63,4 +63,19 @@
63
63
  outline: 2px solid var(--color-border-focus);
64
64
  outline-offset: 2px;
65
65
  }
66
+
67
+ /* Prevent layout shift of un-upgraded custom elements */
68
+ :not(:defined) {
69
+ display: block;
70
+ opacity: 0;
71
+ }
72
+
73
+ /* Full-page containers reserve viewport height */
74
+ [id="main"]:not(:defined),
75
+ main:not(:defined),
76
+ body > :not(:defined),
77
+ [class*="page"]:not(:defined),
78
+ [class*="dock"]:not(:defined) {
79
+ min-height: 100vh;
80
+ }
66
81
  }
package/src/tokens/primitives/colors.css CHANGED
@@ -1,54 +1,71 @@
1
1
  /**
2
2
  * tokens/primitives/colors.css
3
3
  *
4
- * Perceptually uniform brand, neutral, and status color scales using OKLCH.
5
- * Equal numerical differences correspond to equal visual differences.
6
- * Source: doc 26 §3
4
+ * Perceptually uniform color scales using OKLCH.
5
+ * Converted from hex values provided in the design system.
7
6
  */
8
7
 
9
8
  :root {
10
- /* Brand palette — 12-step perceptual scale in OKLCH */
11
- --color-brand-50: oklch(97% 0.05 250);
12
- --color-brand-100: oklch(92% 0.08 250);
13
- --color-brand-200: oklch(85% 0.12 250);
14
- --color-brand-300: oklch(76% 0.16 250);
15
- --color-brand-400: oklch(66% 0.20 250);
16
- --color-brand-500: oklch(55% 0.22 250);
17
- --color-brand-600: oklch(46% 0.20 250);
18
- --color-brand-700: oklch(38% 0.18 250);
19
- --color-brand-800: oklch(30% 0.14 250);
20
- --color-brand-900: oklch(22% 0.10 250);
21
- --color-brand-950: oklch(14% 0.06 250);
9
+ /* Gray scale — 11-step perceptual scale */
10
+ --gray-0: oklch(100% 0 0);
11
+ --gray-50: oklch(98% 0.002 264);
12
+ --gray-100: oklch(95% 0.004 264);
13
+ --gray-200: oklch(90% 0.006 264);
14
+ --gray-300: oklch(80% 0.008 264);
15
+ --gray-400: oklch(65% 0.01 264);
16
+ --gray-500: oklch(50% 0.012 264);
17
+ --gray-600: oklch(38% 0.014 264);
18
+ --gray-700: oklch(28% 0.016 264);
19
+ --gray-800: oklch(18% 0.018 264);
20
+ --gray-900: oklch(10% 0.02 264);
21
+ --gray-950: oklch(5% 0.022 264);
22
22
 
23
- /* Neutral palette */
24
- --color-neutral-0: oklch(100% 0 0);
25
- --color-neutral-50: oklch(97% 0 0);
26
- --color-neutral-100: oklch(94% 0 0);
27
- --color-neutral-200: oklch(88% 0 0);
28
- --color-neutral-300: oklch(78% 0 0);
29
- --color-neutral-400: oklch(64% 0 0);
30
- --color-neutral-500: oklch(50% 0 0);
31
- --color-neutral-600: oklch(38% 0 0);
32
- --color-neutral-700: oklch(27% 0 0);
33
- --color-neutral-800: oklch(18% 0 0);
34
- --color-neutral-900: oklch(10% 0 0);
35
- --color-neutral-950: oklch(6% 0 0);
36
- --color-neutral-1000: oklch(0% 0 0);
23
+ /* Brand green palette — based on #07a45f, #09d379 */
24
+ --brand-50: oklch(96% 0.08 155);
25
+ --brand-100: oklch(90% 0.12 155);
26
+ --brand-200: oklch(82% 0.16 155);
27
+ --brand-300: oklch(72% 0.18 155);
28
+ --brand-400: oklch(62% 0.20 155);
29
+ --brand-500: oklch(55% 0.22 155);
30
+ --brand-600: oklch(48% 0.20 155);
31
+ --brand-700: oklch(40% 0.18 155);
32
+ --brand-800: oklch(32% 0.16 155);
33
+ --brand-900: oklch(24% 0.14 155);
34
+ --brand-950: oklch(15% 0.12 155);
37
35
 
38
- /* Status palette */
39
- --color-success-50: oklch(97% 0.02 145);
40
- --color-success-500: oklch(63% 0.19 145);
41
- --color-success-600: oklch(53% 0.17 145);
42
-
43
- --color-warning-50: oklch(98% 0.02 65);
44
- --color-warning-500: oklch(75% 0.18 65);
45
- --color-warning-600: oklch(67% 0.16 65);
46
-
47
- --color-error-50: oklch(96% 0.02 25);
48
- --color-error-500: oklch(58% 0.22 25);
49
- --color-error-600: oklch(48% 0.20 25);
50
-
51
- --color-info-50: oklch(97% 0.02 230);
52
- --color-info-500: oklch(60% 0.18 230);
53
- --color-info-600: oklch(50% 0.16 230);
36
+ /* Success palette — based on #10b981 */
37
+ --success-50: oklch(96% 0.08 155);
38
+ --success-100: oklch(88% 0.12 155);
39
+ --success-200: oklch(78% 0.16 155);
40
+ --success-300: oklch(68% 0.18 155);
41
+ --success-400: oklch(58% 0.20 155);
42
+ --success-500: oklch(52% 0.22 155);
43
+ --success-600: oklch(45% 0.20 155);
44
+
45
+ /* Error palette — based on #ec4b19 */
46
+ --error-50: oklch(96% 0.06 35);
47
+ --error-100: oklch(90% 0.10 35);
48
+ --error-200: oklch(80% 0.14 35);
49
+ --error-300: oklch(70% 0.18 35);
50
+ --error-400: oklch(60% 0.22 35);
51
+ --error-500: oklch(54% 0.24 35);
52
+ --error-600: oklch(47% 0.22 35);
53
+
54
+ /* Warn palette — based on #fa6436 */
55
+ --warn-50: oklch(96% 0.08 45);
56
+ --warn-100: oklch(90% 0.12 45);
57
+ --warn-200: oklch(80% 0.16 45);
58
+ --warn-300: oklch(70% 0.20 45);
59
+ --warn-400: oklch(60% 0.24 45);
60
+ --warn-500: oklch(54% 0.26 45);
61
+ --warn-600: oklch(47% 0.24 45);
62
+
63
+ /* Info palette */
64
+ --info-50: oklch(96% 0.06 240);
65
+ --info-100: oklch(90% 0.10 240);
66
+ --info-200: oklch(80% 0.14 240);
67
+ --info-300: oklch(70% 0.18 240);
68
+ --info-400: oklch(60% 0.22 240);
69
+ --info-500: oklch(54% 0.24 240);
70
+ --info-600: oklch(47% 0.22 240);
54
71
  }
package/src/tokens/primitives/motion.css CHANGED
@@ -2,33 +2,25 @@
2
2
  * tokens/primitives/motion.css
3
3
  *
4
4
  * Durations and easing curves for transitions and animations.
5
- * Features central global prefers-reduced-motion token-layer overrides.
6
- * Source: doc 26 §4
7
5
  */
8
6
 
9
7
  :root {
10
8
  /* Durations */
11
- --duration-instant: 50ms;
12
9
  --duration-fast: 100ms;
13
10
  --duration-normal: 200ms;
14
11
  --duration-slow: 300ms;
15
- --duration-slower: 500ms;
16
12
 
17
13
  /* Easing curves */
18
- --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
19
14
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
20
15
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
21
16
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
22
- --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
23
17
  --ease-linear: linear;
24
18
  }
25
19
 
26
20
  @media (prefers-reduced-motion: reduce) {
27
21
  :root {
28
- --duration-instant: 0ms;
29
22
  --duration-fast: 0ms;
30
23
  --duration-normal: 0ms;
31
24
  --duration-slow: 0ms;
32
- --duration-slower: 0ms;
33
25
  }
34
26
  }
package/src/tokens/primitives/spacing.css CHANGED
@@ -2,26 +2,18 @@
2
2
  * tokens/primitives/spacing.css
3
3
  *
4
4
  * Fixed spacing scale using rem units based on a 4px increment system.
5
- * Source: doc 26 §4
6
5
  */
7
6
 
8
7
  :root {
9
8
  --space-px: 1px;
10
9
  --space-0: 0px;
11
- --space-0-5: 0.125rem; /* 2px */
12
- --space-1: 0.25rem; /* 4px */
13
- --space-1-5: 0.375rem; /* 6px */
14
- --space-2: 0.5rem; /* 8px */
15
- --space-2-5: 0.625rem; /* 10px */
16
- --space-3: 0.75rem; /* 12px */
17
- --space-4: 1rem; /* 16px */
18
- --space-5: 1.25rem; /* 20px */
19
- --space-6: 1.5rem; /* 24px */
20
- --space-8: 2rem; /* 32px */
21
- --space-10: 2.5rem; /* 40px */
22
- --space-12: 3rem; /* 48px */
23
- --space-16: 4rem; /* 64px */
24
- --space-20: 5rem; /* 80px */
25
- --space-24: 6rem; /* 96px */
26
- --space-32: 8rem; /* 128px */
10
+ --space-xs: 0.25rem; /* 4px */
11
+ --space-sm: 0.5rem; /* 8px */
12
+ --space-md: 1rem; /* 16px */
13
+ --space-lg: 1.5rem; /* 24px */
14
+ --space-xl: 2rem; /* 32px */
15
+ --space-2xl: 3rem; /* 48px */
16
+ --space-3xl: 4rem; /* 64px */
17
+ --space-4xl: 6rem; /* 96px */
18
+ --space-5xl: 8rem; /* 128px */
27
19
  }
package/src/tokens/primitives/typography.css CHANGED
@@ -2,45 +2,48 @@
2
2
  * tokens/primitives/typography.css
3
3
  *
4
4
  * Typography scales, weights, line-heights, letter-spacings, and font stacks.
5
- * Source: doc 26 §4
5
+ * Google Fonts: Inter, JetBrains Mono, IBM Plex Sans
6
6
  */
7
7
 
8
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
9
+ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
10
+ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..900;1,100..900&display=swap");
11
+
8
12
  :root {
9
13
  /* Modular type scale (1.25 ratio) */
10
- --font-size-xs: 0.75rem; /* 12px */
11
- --font-size-sm: 0.875rem; /* 14px */
12
- --font-size-base: 1rem; /* 16px */
13
- --font-size-md: 1.125rem; /* 18px */
14
- --font-size-lg: 1.25rem; /* 20px */
15
- --font-size-xl: 1.5rem; /* 24px */
16
- --font-size-2xl: 1.875rem; /* 30px */
17
- --font-size-3xl: 2.25rem; /* 36px */
18
- --font-size-4xl: 3rem; /* 48px */
19
- --font-size-5xl: 3.75rem; /* 60px */
14
+ --text-xs: 0.75rem; /* 12px */
15
+ --text-sm: 0.875rem; /* 14px */
16
+ --text-md: 1rem; /* 16px */
17
+ --text-lg: 1.25rem; /* 20px */
18
+ --text-xl: 1.5rem; /* 24px */
19
+ --text-2xl: 1.875rem; /* 30px */
20
+ --text-3xl: 2.25rem; /* 36px */
21
+ --text-4xl: 3rem; /* 48px */
22
+ --text-5xl: 3.75rem; /* 60px */
20
23
 
21
24
  /* Font weights */
22
- --font-weight-light: 300;
23
- --font-weight-regular: 400;
24
- --font-weight-medium: 500;
25
- --font-weight-semibold: 600;
26
- --font-weight-bold: 700;
25
+ --font-light: 300;
26
+ --font-normal: 400;
27
+ --font-medium: 500;
28
+ --font-semibold: 600;
29
+ --font-bold: 700;
27
30
 
28
31
  /* Line heights */
29
- --line-height-tight: 1.25;
30
- --line-height-snug: 1.375;
31
- --line-height-normal: 1.5;
32
- --line-height-relaxed: 1.625;
33
- --line-height-loose: 2;
32
+ --leading-tight: 1.25;
33
+ --leading-snug: 1.375;
34
+ --leading-normal: 1.5;
35
+ --leading-relaxed: 1.625;
36
+ --leading-loose: 2;
34
37
 
35
38
  /* Letter spacing */
36
- --letter-spacing-tight: -0.025em;
37
- --letter-spacing-normal: 0;
38
- --letter-spacing-wide: 0.025em;
39
- --letter-spacing-wider: 0.05em;
40
- --letter-spacing-widest: 0.1em;
39
+ --tracking-tight: -0.025em;
40
+ --tracking-normal: 0;
41
+ --tracking-wide: 0.025em;
42
+ --tracking-wider: 0.05em;
43
+ --tracking-widest: 0.1em;
41
44
 
42
45
  /* Font families */
43
- --font-family-sans: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;
44
- --font-family-serif: 'Georgia', 'Times New Roman', serif;
45
- --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
46
+ --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
47
+ --font-serif: 'IBM Plex Sans', serif;
48
+ --font-mono: 'JetBrains Mono', monospace;
46
49
  }
package/src/tokens/registered/dimensions.css CHANGED
@@ -9,19 +9,19 @@
9
9
  @property --space-4 {
10
10
  syntax: '<length>';
11
11
  inherits: true;
12
- initial-value: 1rem;
12
+ initial-value: 16px;
13
13
  }
14
14
 
15
15
  @property --radius-md {
16
16
  syntax: '<length>';
17
17
  inherits: true;
18
- initial-value: 0.375rem;
18
+ initial-value: 6px;
19
19
  }
20
20
 
21
21
  @property --font-size-base {
22
22
  syntax: '<length>';
23
23
  inherits: true;
24
- initial-value: 1rem;
24
+ initial-value: 16px;
25
25
  }
26
26
 
27
27
  @property --duration-normal {
package/src/tokens/semantic/components.css CHANGED
@@ -2,124 +2,122 @@
2
2
  * tokens/semantic/components.css
3
3
  *
4
4
  * Semantic component-level design tokens.
5
- * Consolidates recurring component-specific tokens from individual elements
6
- * into a shared semantic layer for consistency across the design system.
7
5
  */
8
6
 
9
7
  :root {
10
8
  /* Form Controls */
11
- --input-bg: var(--color-surface-page);
12
- --input-border: var(--color-border-default);
13
- --input-border-focus: var(--color-border-focus);
9
+ --input-bg: var(--background);
10
+ --input-border: var(--border);
11
+ --input-border-focus: var(--border-focus);
14
12
  --input-radius: var(--radius-md);
15
- --input-font-size: var(--font-size-base);
16
- --input-padding-y: var(--space-2);
17
- --input-padding-x: var(--space-3);
18
- --input-text-color: var(--color-content-primary);
19
-
20
- --textarea-bg: var(--color-surface-page);
21
- --textarea-border: var(--color-border-default);
22
- --textarea-border-focus: var(--color-border-focus);
13
+ --input-font-size: var(--text-md);
14
+ --input-padding-y: var(--space-sm);
15
+ --input-padding-x: var(--space-md);
16
+ --input-text-color: var(--foreground);
17
+
18
+ --textarea-bg: var(--background);
19
+ --textarea-border: var(--border);
20
+ --textarea-border-focus: var(--border-focus);
23
21
  --textarea-radius: var(--radius-md);
24
- --textarea-font-size: var(--font-size-base);
25
- --textarea-padding-y: var(--space-2);
26
- --textarea-padding-x: var(--space-3);
27
- --textarea-text-color: var(--color-content-primary);
28
-
29
- --check-bg: var(--color-surface-page);
30
- --check-bg-checked: var(--color-interactive);
31
- --check-border: var(--color-border-default);
32
- --check-border-focus: var(--color-border-focus);
22
+ --textarea-font-size: var(--text-md);
23
+ --textarea-padding-y: var(--space-sm);
24
+ --textarea-padding-x: var(--space-md);
25
+ --textarea-text-color: var(--foreground);
26
+
27
+ --check-bg: var(--background);
28
+ --check-bg-checked: var(--primary);
29
+ --check-border: var(--border);
30
+ --check-border-focus: var(--border-focus);
33
31
  --check-radius: var(--radius-sm);
34
- --check-size: var(--space-5);
35
- --check-color: var(--color-content-inverse);
32
+ --check-size: var(--space-lg);
33
+ --check-color: var(--primary-foreground);
36
34
 
37
- --radio-bg: var(--color-surface-page);
38
- --radio-bg-checked: var(--color-interactive);
39
- --radio-border: var(--color-border-default);
40
- --radio-border-focus: var(--color-border-focus);
35
+ --radio-bg: var(--background);
36
+ --radio-bg-checked: var(--primary);
37
+ --radio-border: var(--border);
38
+ --radio-border-focus: var(--border-focus);
41
39
  --radio-radius: var(--radius-full);
42
- --radio-size: var(--space-5);
43
- --radio-color: var(--color-content-inverse);
44
-
45
- --switch-bg: var(--color-border-strong);
46
- --switch-bg-on: var(--color-interactive);
47
- --switch-thumb-color: var(--color-content-inverse);
48
- --switch-width: var(--space-10);
49
- --switch-height: var(--space-6);
50
- --switch-thumb-size: calc(var(--switch-height) - var(--space-1));
51
-
52
- --select-bg: var(--color-surface-page);
53
- --select-border: var(--color-border-default);
54
- --select-border-focus: var(--color-border-focus);
40
+ --radio-size: var(--space-lg);
41
+ --radio-color: var(--primary-foreground);
42
+
43
+ --switch-bg: var(--border-strong);
44
+ --switch-bg-on: var(--primary);
45
+ --switch-thumb-color: var(--primary-foreground);
46
+ --switch-width: var(--space-xl);
47
+ --switch-height: var(--space-lg);
48
+ --switch-thumb-size: calc(var(--switch-height) - var(--space-xs));
49
+
50
+ --select-bg: var(--background);
51
+ --select-border: var(--border);
52
+ --select-border-focus: var(--border-focus);
55
53
  --select-radius: var(--radius-md);
56
- --select-font-size: var(--font-size-base);
57
- --select-padding-y: var(--space-2);
58
- --select-padding-x: var(--space-3);
59
- --select-text-color: var(--color-content-primary);
60
-
61
- --upload-bg: var(--color-surface-page);
62
- --upload-border: var(--color-border-default);
63
- --upload-border-focus: var(--color-border-focus);
54
+ --select-font-size: var(--text-md);
55
+ --select-padding-y: var(--space-sm);
56
+ --select-padding-x: var(--space-md);
57
+ --select-text-color: var(--foreground);
58
+
59
+ --upload-bg: var(--background);
60
+ --upload-border: var(--border);
61
+ --upload-border-focus: var(--border-focus);
64
62
  --upload-radius: var(--radius-lg);
65
- --upload-padding: var(--space-8);
66
- --upload-color: var(--color-content-secondary);
63
+ --upload-padding: var(--space-xl);
64
+ --upload-color: var(--foreground-muted);
67
65
 
68
66
  /* Feedback */
69
67
  --alert-radius: var(--radius-md);
70
- --alert-bg: var(--color-surface-elevated);
71
- --alert-color: var(--color-content-primary);
72
- --alert-border: var(--color-border-default);
68
+ --alert-bg: var(--background-elevated);
69
+ --alert-color: var(--foreground);
70
+ --alert-border: var(--border);
73
71
 
74
- --skeleton-bg: var(--color-interactive-disabled);
72
+ --skeleton-bg: var(--foreground-disabled);
75
73
  --skeleton-radius: var(--radius-md);
76
74
  --skeleton-width: 100%;
77
- --skeleton-height: var(--space-4);
75
+ --skeleton-height: var(--space-md);
78
76
 
79
77
  /* Data Display */
80
78
  --card-radius: var(--radius-lg);
81
79
 
82
- --stat-label: var(--font-size-xs);
83
- --stat-value: var(--font-size-3xl);
80
+ --stat-label: var(--text-xs);
81
+ --stat-value: var(--text-3xl);
84
82
 
85
83
  /* Navigation */
86
- --link-color: var(--color-content-link);
87
- --link-color-hover: var(--color-interactive-hover);
88
- --link-color-active: var(--color-interactive-active);
84
+ --link-color: var(--foreground-link);
85
+ --link-color-hover: var(--primary-hover);
86
+ --link-color-active: var(--primary-active);
89
87
 
90
88
  /* Layout */
91
- --stack-gap: var(--space-4);
89
+ --stack-gap: var(--space-md);
92
90
 
93
- --grid-gap: var(--space-4);
91
+ --grid-gap: var(--space-md);
94
92
  --grid-cols: repeat(auto-fit, minmax(250px, 1fr));
95
93
 
96
- --surface-bg: var(--color-surface-page);
94
+ --surface-bg: var(--background);
97
95
  --surface-border: transparent;
98
96
  --surface-shadow: none;
99
97
  --surface-radius: var(--radius-none);
100
98
 
101
99
  /* Overlay */
102
100
  --dialog-radius: var(--radius-lg);
103
- --dialog-shadow: var(--shadow-2xl);
101
+ --dialog-shadow: var(--shadow-xl);
104
102
 
105
- --popover-bg: var(--color-surface-elevated);
106
- --popover-border: var(--color-border-default);
107
- --popover-shadow: var(--shadow-xl);
103
+ --popover-bg: var(--background-elevated);
104
+ --popover-border: var(--border);
105
+ --popover-shadow: var(--shadow-lg);
108
106
  --popover-radius: var(--radius-md);
109
107
 
110
- --tooltip-bg: var(--color-surface-inverse);
111
- --tooltip-color: var(--color-content-inverse);
108
+ --tooltip-bg: var(--background-inverse);
109
+ --tooltip-color: var(--foreground-inverse);
112
110
  --tooltip-radius: var(--radius-sm);
113
111
 
114
- --menu-bg: var(--color-surface-elevated);
115
- --menu-border: var(--color-border-default);
112
+ --menu-bg: var(--background-elevated);
113
+ --menu-border: var(--border);
116
114
  --menu-shadow: var(--shadow-lg);
117
115
  --menu-radius: var(--radius-md);
118
116
 
119
- --drawer-shadow: var(--shadow-2xl);
120
- --drawer-width: min(calc(var(--space-32) * 3), 85vw);
117
+ --drawer-shadow: var(--shadow-xl);
118
+ --drawer-width: min(calc(var(--space-5xl) * 3), 85vw);
121
119
 
122
120
  --sheet-radius: var(--radius-lg);
123
- --sheet-shadow: var(--shadow-2xl);
124
- --sheet-max-width: min(calc(var(--space-32) * 6), 100vw);
121
+ --sheet-shadow: var(--shadow-xl);
122
+ --sheet-max-width: min(calc(var(--space-5xl) * 6), 100vw);
125
123
  }
package/src/tokens/semantic/dark.css CHANGED
@@ -2,60 +2,60 @@
2
2
  * tokens/semantic/dark.css
3
3
  *
4
4
  * Semantic design token overrides for the Dark theme.
5
- * Integrates with data-theme attribute and OS media preference (guarded to respect user selection).
6
- * Source: doc 26 §3
7
5
  */
8
6
 
9
7
  [data-theme="dark"] {
10
8
  /* Surfaces */
11
- --color-surface-page: var(--color-neutral-950);
12
- --color-surface-card: var(--color-neutral-900);
13
- --color-surface-elevated: var(--color-neutral-800);
14
- --color-surface-inverse: var(--color-neutral-50);
9
+ --background: var(--gray-950);
10
+ --background-elevated: var(--gray-900);
11
+ --background-inverse: var(--gray-50);
15
12
 
16
13
  /* Content (Text & Icons) */
17
- --color-content-primary: var(--color-neutral-5);
18
- --color-content-secondary: var(--color-neutral-400);
19
- --color-content-disabled: var(--color-neutral-600);
20
- --color-content-inverse: var(--color-neutral-900);
21
- --color-content-link: var(--color-brand-300);
14
+ --foreground: var(--gray-50);
15
+ --foreground-muted: var(--gray-400);
16
+ --foreground-disabled: var(--gray-600);
17
+ --foreground-inverse: var(--gray-900);
18
+ --foreground-link: var(--brand-300);
22
19
 
23
20
  /* Interactive Elements */
24
- --color-interactive: var(--color-brand-400);
25
- --color-interactive-hover: var(--color-brand-300);
26
- --color-interactive-active: var(--color-brand-200);
27
- --color-interactive-disabled: var(--color-neutral-700);
21
+ --primary: var(--brand-400);
22
+ --primary-hover: var(--brand-300);
23
+ --primary-active: var(--brand-200);
24
+ --primary-focus: var(--brand-400);
25
+ --primary-disabled: var(--gray-700);
26
+ --primary-foreground: var(--gray-0);
28
27
 
29
28
  /* Borders */
30
- --color-border-default: var(--color-neutral-800);
31
- --color-border-strong: var(--color-neutral-600);
32
- --color-border-focus: var(--color-brand-400);
29
+ --border: var(--gray-800);
30
+ --border-strong: var(--gray-600);
31
+ --border-focus: var(--brand-400);
33
32
  }
34
33
 
35
34
  @media (prefers-color-scheme: dark) {
36
35
  :root:not([data-theme="light"]) {
37
36
  /* Surfaces */
38
- --color-surface-page: var(--color-neutral-950);
39
- --color-surface-card: var(--color-neutral-900);
40
- --color-surface-elevated: var(--color-neutral-800);
41
- --color-surface-inverse: var(--color-neutral-50);
37
+ --background: var(--gray-950);
38
+ --background-elevated: var(--gray-900);
39
+ --background-inverse: var(--gray-50);
42
40
 
43
41
  /* Content (Text & Icons) */
44
- --color-content-primary: var(--color-neutral-5);
45
- --color-content-secondary: var(--color-neutral-400);
46
- --color-content-disabled: var(--color-neutral-600);
47
- --color-content-inverse: var(--color-neutral-900);
48
- --color-content-link: var(--color-brand-300);
42
+ --foreground: var(--gray-50);
43
+ --foreground-muted: var(--gray-400);
44
+ --foreground-disabled: var(--gray-600);
45
+ --foreground-inverse: var(--gray-900);
46
+ --foreground-link: var(--brand-300);
49
47
 
50
48
  /* Interactive Elements */
51
- --color-interactive: var(--color-brand-400);
52
- --color-interactive-hover: var(--color-brand-300);
53
- --color-interactive-active: var(--color-brand-200);
54
- --color-interactive-disabled: var(--color-neutral-700);
49
+ --primary: var(--brand-400);
50
+ --primary-hover: var(--brand-300);
51
+ --primary-active: var(--brand-200);
52
+ --primary-focus: var(--brand-400);
53
+ --primary-disabled: var(--gray-700);
54
+ --primary-foreground: var(--gray-0);
55
55
 
56
56
  /* Borders */
57
- --color-border-default: var(--color-neutral-800);
58
- --color-border-strong: var(--color-neutral-600);
59
- --color-border-focus: var(--color-brand-400);
57
+ --border: var(--gray-800);
58
+ --border-strong: var(--gray-600);
59
+ --border-focus: var(--brand-400);
60
60
  }
61
61
  }
package/src/tokens/semantic/light.css CHANGED
@@ -2,59 +2,56 @@
2
2
  * tokens/semantic/light.css
3
3
  *
4
4
  * Semantic design token assignments for the default Light theme.
5
- * Standardizes semantic mapping to primitives and sets up GPU-accelerated theme transition rules on :root.
6
- * Source: doc 26 §3, §6
7
5
  */
8
6
 
9
7
  :root {
10
8
  /* Surfaces */
11
- --color-surface-page: var(--color-neutral-50);
12
- --color-surface-card: var(--color-neutral-0);
13
- --color-surface-elevated: var(--color-neutral-0);
14
- --color-surface-inverse: var(--color-neutral-900);
9
+ --background: var(--gray-50);
10
+ --background-elevated: var(--gray-0);
11
+ --background-inverse: var(--gray-900);
15
12
 
16
13
  /* Content (Text & Icons) */
17
- --color-content-primary: var(--color-neutral-900);
18
- --color-content-secondary: var(--color-neutral-600);
19
- --color-content-disabled: var(--color-neutral-400);
20
- --color-content-inverse: var(--color-neutral-50);
21
- --color-content-link: var(--color-brand-600);
14
+ --foreground: var(--gray-900);
15
+ --foreground-muted: var(--gray-600);
16
+ --foreground-disabled: var(--gray-400);
17
+ --foreground-inverse: var(--gray-50);
18
+ --foreground-link: var(--brand-600);
22
19
 
23
20
  /* Interactive Elements */
24
- --color-interactive: var(--color-brand-500);
25
- --color-interactive-hover: var(--color-brand-600);
26
- --color-interactive-active: var(--color-brand-700);
27
- --color-interactive-focus: var(--color-brand-500);
28
- --color-interactive-disabled: var(--color-neutral-300);
21
+ --primary: var(--brand-500);
22
+ --primary-hover: var(--brand-600);
23
+ --primary-active: var(--brand-700);
24
+ --primary-focus: var(--brand-500);
25
+ --primary-disabled: var(--gray-300);
26
+ --primary-foreground: var(--gray-0);
29
27
 
30
28
  /* Feedback Semantics */
31
- --color-feedback-success: var(--color-success-500);
32
- --color-feedback-warning: var(--color-warning-500);
33
- --color-feedback-error: var(--color-error-500);
34
- --color-feedback-info: var(--color-info-500);
29
+ --success: var(--success-500);
30
+ --warn: var(--warn-500);
31
+ --error: var(--error-500);
32
+ --info: var(--info-500);
35
33
 
36
34
  /* Borders */
37
- --color-border-default: var(--color-neutral-200);
38
- --color-border-strong: var(--color-neutral-400);
39
- --color-border-focus: var(--color-brand-500);
35
+ --border: var(--gray-200);
36
+ --border-strong: var(--gray-400);
37
+ --border-focus: var(--brand-500);
40
38
 
41
39
  /* Automatic theme morph configuration */
42
40
  transition:
43
- --color-surface-page 220ms var(--ease-out),
44
- --color-surface-card 220ms var(--ease-out),
45
- --color-surface-elevated 220ms var(--ease-out),
46
- --color-surface-inverse 220ms var(--ease-out),
47
- --color-content-primary 180ms var(--ease-out),
48
- --color-content-secondary 180ms var(--ease-out),
49
- --color-content-disabled 180ms var(--ease-out),
50
- --color-content-inverse 180ms var(--ease-out),
51
- --color-content-link 180ms var(--ease-out),
52
- --color-interactive 180ms var(--ease-out),
53
- --color-interactive-hover 180ms var(--ease-out),
54
- --color-interactive-active 180ms var(--ease-out),
55
- --color-border-default 180ms var(--ease-out),
56
- --color-border-strong 180ms var(--ease-out),
57
- --color-border-focus 180ms var(--ease-out);
41
+ --background 220ms var(--ease-out),
42
+ --background-elevated 220ms var(--ease-out),
43
+ --background-inverse 220ms var(--ease-out),
44
+ --foreground 180ms var(--ease-out),
45
+ --foreground-muted 180ms var(--ease-out),
46
+ --foreground-disabled 180ms var(--ease-out),
47
+ --foreground-inverse 180ms var(--ease-out),
48
+ --foreground-link 180ms var(--ease-out),
49
+ --primary 180ms var(--ease-out),
50
+ --primary-hover 180ms var(--ease-out),
51
+ --primary-active 180ms var(--ease-out),
52
+ --border 180ms var(--ease-out),
53
+ --border-strong 180ms var(--ease-out),
54
+ --border-focus 180ms var(--ease-out);
58
55
  }
59
56
 
60
57
  @media (prefers-reduced-motion: reduce) {