@adukiorg/anza 0.4.1 → 0.4.3

package/src/tokens/primitives/colors.css

@@ -1,71 +1,16 @@
 /**
  * tokens/primitives/colors.css
  *
- * Perceptually uniform color scales using OKLCH.
- * Converted from hex values provided in the design system.
+ * Base raw color decisions.
  */
 
 :root {
-  /* Gray scale — 11-step perceptual scale */
-  --gray-0:   oklch(100% 0 0);
-  --gray-50:  oklch(98% 0.002 264);
-  --gray-100: oklch(95% 0.004 264);
-  --gray-200: oklch(90% 0.006 264);
-  --gray-300: oklch(80% 0.008 264);
-  --gray-400: oklch(65% 0.01 264);
-  --gray-500: oklch(50% 0.012 264);
-  --gray-600: oklch(38% 0.014 264);
-  --gray-700: oklch(28% 0.016 264);
-  --gray-800: oklch(18% 0.018 264);
-  --gray-900: oklch(10% 0.02 264);
-  --gray-950: oklch(5% 0.022 264);
-
-  /* Brand green palette — based on #07a45f, #09d379 */
-  --brand-50:  oklch(96% 0.08 155);
-  --brand-100: oklch(90% 0.12 155);
-  --brand-200: oklch(82% 0.16 155);
-  --brand-300: oklch(72% 0.18 155);
-  --brand-400: oklch(62% 0.20 155);
-  --brand-500: oklch(55% 0.22 155);
-  --brand-600: oklch(48% 0.20 155);
-  --brand-700: oklch(40% 0.18 155);
-  --brand-800: oklch(32% 0.16 155);
-  --brand-900: oklch(24% 0.14 155);
-  --brand-950: oklch(15% 0.12 155);
-
-  /* Success palette — based on #10b981 */
-  --success-50:  oklch(96% 0.08 155);
-  --success-100: oklch(88% 0.12 155);
-  --success-200: oklch(78% 0.16 155);
-  --success-300: oklch(68% 0.18 155);
-  --success-400: oklch(58% 0.20 155);
-  --success-500: oklch(52% 0.22 155);
-  --success-600: oklch(45% 0.20 155);
-
-  /* Error palette — based on #ec4b19 */
-  --error-50:  oklch(96% 0.06 35);
-  --error-100: oklch(90% 0.10 35);
-  --error-200: oklch(80% 0.14 35);
-  --error-300: oklch(70% 0.18 35);
-  --error-400: oklch(60% 0.22 35);
-  --error-500: oklch(54% 0.24 35);
-  --error-600: oklch(47% 0.22 35);
-
-  /* Warn palette — based on #fa6436 */
-  --warn-50:  oklch(96% 0.08 45);
-  --warn-100: oklch(90% 0.12 45);
-  --warn-200: oklch(80% 0.16 45);
-  --warn-300: oklch(70% 0.20 45);
-  --warn-400: oklch(60% 0.24 45);
-  --warn-500: oklch(54% 0.26 45);
-  --warn-600: oklch(47% 0.24 45);
-
-  /* Info palette */
-  --info-50:  oklch(96% 0.06 240);
-  --info-100: oklch(90% 0.10 240);
-  --info-200: oklch(80% 0.14 240);
-  --info-300: oklch(70% 0.18 240);
-  --info-400: oklch(60% 0.22 240);
-  --info-500: oklch(54% 0.24 240);
-  --info-600: oklch(47% 0.22 240);
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --gray-100: oklch(95% 0 0);
+  --gray-200: oklch(90% 0 0);
+  --gray-800: oklch(20% 0 0);
+  --gray-900: oklch(10% 0 0);
+  --brand: oklch(62% 0.17 145); /* Base brand accent */
 }
+

package/src/tokens/primitives/motion.css

@@ -1,26 +1,14 @@
 /**
  * tokens/primitives/motion.css
  *
- * Durations and easing curves for transitions and animations.
+ * Essential motion parameters.
  */
 
 :root {
-  /* Durations */
-  --duration-fast:    100ms;
-  --duration-normal:  200ms;
-  --duration-slow:    300ms;
-
-  /* Easing curves */
-  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
-  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
-  --ease-in-out:    cubic-bezier(0.4, 0, 0.6, 1);
-  --ease-linear:    linear;
+  --duration-fast: 120ms;
+  --duration-normal: 240ms;
+  --ease-in: cubic-bezier(0.4, 0, 1, 1);
+  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --duration-fast:    0ms;
-    --duration-normal:  0ms;
-    --duration-slow:    0ms;
-  }
-}

package/src/tokens/primitives/spacing.css

@@ -1,19 +1,14 @@
 /**
  * tokens/primitives/spacing.css
  *
- * Fixed spacing scale using rem units based on a 4px increment system.
+ * Minimal numeric spacing scale.
  */
 
 :root {
-  --space-px:  1px;
-  --space-0:   0px;
-  --space-xs:  0.25rem;   /* 4px */
-  --space-sm:  0.5rem;    /* 8px */
-  --space-md:  1rem;      /* 16px */
-  --space-lg:  1.5rem;    /* 24px */
-  --space-xl:  2rem;      /* 32px */
-  --space-2xl: 3rem;      /* 48px */
-  --space-3xl: 4rem;      /* 64px */
-  --space-4xl: 6rem;      /* 96px */
-  --space-5xl: 8rem;      /* 128px */
+  --space-0: 0px;
+  --space-px: 1px;
+  --space-2: 0.5rem;   /* 8px */
+  --space-3: 0.75rem;  /* 12px */
+  --space-4: 1rem;     /* 16px */
 }
+

package/src/tokens/primitives/typography.css

@@ -1,49 +1,19 @@
 /**
  * tokens/primitives/typography.css
  *
- * Typography scales, weights, line-heights, letter-spacings, and font stacks.
- * Google Fonts: Inter, JetBrains Mono, IBM Plex Sans
+ * Essential typography settings.
  */
 
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..900;1,100..900&display=swap");
-
 :root {
-  /* Modular type scale (1.25 ratio) */
-  --text-xs:   0.75rem;   /* 12px */
-  --text-sm:   0.875rem;  /* 14px */
-  --text-md:   1rem;      /* 16px */
-  --text-lg:   1.25rem;   /* 20px */
-  --text-xl:   1.5rem;    /* 24px */
-  --text-2xl:  1.875rem;  /* 30px */
-  --text-3xl:  2.25rem;   /* 36px */
-  --text-4xl:  3rem;      /* 48px */
-  --text-5xl:  3.75rem;   /* 60px */
-
-  /* Font weights */
-  --font-light:    300;
-  --font-normal:   400;
-  --font-medium:   500;
-  --font-semibold: 600;
-  --font-bold:     700;
-
-  /* Line heights */
-  --leading-tight:   1.25;
-  --leading-snug:    1.375;
-  --leading-normal:  1.5;
-  --leading-relaxed: 1.625;
-  --leading-loose:   2;
-
-  /* Letter spacing */
-  --tracking-tight:  -0.025em;
-  --tracking-normal:  0;
-  --tracking-wide:    0.025em;
-  --tracking-wider:   0.05em;
-  --tracking-widest:  0.1em;
-
-  /* Font families */
-  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
-  --font-serif: 'IBM Plex Sans', serif;
-  --font-mono:  'JetBrains Mono', monospace;
+  --font-sans: system-ui, -apple-system, sans-serif;
+  --font-size-base: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-2xl: 1.875rem;
+  --font-size-3xl: 2.25rem;
+  --font-weight-regular: 400;
+  --font-weight-semibold: 600;
+  --line-height-normal: 1.5;
+  --line-height-tight: 1.25;
 }
+

package/src/tokens/registered/colors.css

@@ -1,21 +1,13 @@
 /**
  * tokens/registered/colors.css
  *
- * Houdini @property registrations for animatable semantic color tokens.
- * This permits smooth, GPU-accelerated theme transition morphs.
- * Source: doc 26 §5
+ * Houdini @property registrations for animatable core semantic color tokens.
  */
 
 @property --color-surface-page {
   syntax: '<color>';
   inherits: true;
-  initial-value: oklch(97% 0 0);
-}
-
-@property --color-surface-card {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(100% 0 0);
+  initial-value: oklch(98% 0 0);
 }
 
 @property --color-surface-elevated {
@@ -24,12 +16,6 @@
   initial-value: oklch(100% 0 0);
 }
 
-@property --color-surface-inverse {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(10% 0 0);
-}
-
 @property --color-content-primary {
   syntax: '<color>';
   inherits: true;
@@ -39,95 +25,18 @@
 @property --color-content-secondary {
   syntax: '<color>';
   inherits: true;
-  initial-value: oklch(38% 0 0);
-}
-
-@property --color-content-disabled {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(64% 0 0);
-}
-
-@property --color-content-inverse {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(97% 0 0);
-}
-
-@property --color-content-link {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(55% 0.22 250);
+  initial-value: oklch(30% 0 0);
 }
 
 @property --color-interactive {
   syntax: '<color>';
   inherits: true;
-  initial-value: oklch(55% 0.22 250);
-}
-
-@property --color-interactive-hover {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(46% 0.20 250);
-}
-
-@property --color-interactive-active {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(38% 0.18 250);
-}
-
-@property --color-interactive-focus {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(55% 0.22 250);
-}
-
-@property --color-interactive-disabled {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(88% 0 0);
-}
-
-@property --color-feedback-success {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(63% 0.19 145);
-}
-
-@property --color-feedback-warning {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(75% 0.18 65);
-}
-
-@property --color-feedback-error {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(58% 0.22 25);
-}
-
-@property --color-feedback-info {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(60% 0.18 230);
+  initial-value: oklch(62% 0.17 145);
 }
 
 @property --color-border-default {
   syntax: '<color>';
   inherits: true;
-  initial-value: oklch(88% 0 0);
+  initial-value: oklch(90% 0 0);
 }
 
-@property --color-border-strong {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(64% 0 0);
-}
-
-@property --color-border-focus {
-  syntax: '<color>';
-  inherits: true;
-  initial-value: oklch(55% 0.22 250);
-}

package/src/tokens/registered/dimensions.css

@@ -1,31 +1,18 @@
 /**
  * tokens/registered/dimensions.css
  *
- * Houdini @property registrations for animatable dimension/spacing tokens.
- * This permits smooth, type-checked transitions on spacing and layout.
- * Source: doc 26 §5
+ * Houdini @property registrations for animatable transition tokens.
  */
 
-@property --space-4 {
-  syntax: '<length>';
-  inherits: true;
-  initial-value: 16px;
-}
-
-@property --radius-md {
-  syntax: '<length>';
+@property --transition-duration {
+  syntax: '<time>';
   inherits: true;
-  initial-value: 6px;
+  initial-value: 240ms;
 }
 
-@property --font-size-base {
+@property --transition-offset {
   syntax: '<length>';
   inherits: true;
-  initial-value: 16px;
+  initial-value: 30px;
 }
 
-@property --duration-normal {
-  syntax: '<time>';
-  inherits: true;
-  initial-value: 200ms;
-}

package/src/tokens/semantic/contrast.css

@@ -2,50 +2,22 @@
  * tokens/semantic/contrast.css
  *
  * WCAG AAA compliant high-contrast semantic token overrides.
- * Enhances readability for visually impaired users.
- * Source: doc 26 §3, library2.md §Phase 1-B
  */
 
 [data-theme="high-contrast"] {
-  /* Surfaces */
-  --color-surface-page:      var(--color-neutral-0);
-  --color-surface-card:      var(--color-neutral-0);
-  --color-surface-elevated:  var(--color-neutral-0);
-  --color-surface-inverse:   var(--color-neutral-1000);
+  --color-surface-page:      var(--color-white);
+  --color-surface-elevated:  var(--color-white);
+  --color-content-primary:   var(--color-black);
+  --color-content-secondary: var(--color-black);
+  --color-interactive:       var(--color-black);
+  --color-border-default:    var(--color-black);
 
-  /* Content */
-  --color-content-primary:   var(--color-neutral-1000);
-  --color-content-secondary: var(--color-neutral-900);
-  --color-content-disabled:  var(--color-neutral-700);
-  --color-content-inverse:   var(--color-neutral-0);
-  --color-content-link:      var(--color-brand-900);
-
-  /* Interactive Elements */
-  --color-interactive:          var(--color-brand-900);
-  --color-interactive-hover:    var(--color-neutral-1000);
-  --color-interactive-active:   var(--color-neutral-1000);
-  --color-interactive-disabled: var(--color-neutral-600);
-
-  /* Borders */
-  --color-border-default:  var(--color-neutral-1000);
-  --color-border-strong:   var(--color-neutral-1000);
-  --color-border-focus:    var(--color-brand-900);
-
-  /* Automatic theme morph — same timing as light theme */
   transition:
     --color-surface-page 220ms var(--ease-out),
-    --color-surface-card 220ms var(--ease-out),
     --color-surface-elevated 220ms var(--ease-out),
-    --color-surface-inverse 220ms var(--ease-out),
     --color-content-primary 180ms var(--ease-out),
     --color-content-secondary 180ms var(--ease-out),
-    --color-content-disabled 180ms var(--ease-out),
-    --color-content-inverse 180ms var(--ease-out),
-    --color-content-link 180ms var(--ease-out),
     --color-interactive 180ms var(--ease-out),
-    --color-interactive-hover 180ms var(--ease-out),
-    --color-interactive-active 180ms var(--ease-out),
-    --color-border-default 180ms var(--ease-out),
-    --color-border-strong 180ms var(--ease-out),
-    --color-border-focus 180ms var(--ease-out);
+    --color-border-default 180ms var(--ease-out);
 }
+

package/src/tokens/semantic/dark.css

@@ -5,57 +5,22 @@
  */
 
 [data-theme="dark"] {
-  /* Surfaces */
-  --background:            var(--gray-950);
-  --background-elevated:   var(--gray-900);
-  --background-inverse:    var(--gray-50);
-
-  /* Content (Text & Icons) */
-  --foreground:           var(--gray-50);
-  --foreground-muted:     var(--gray-400);
-  --foreground-disabled:   var(--gray-600);
-  --foreground-inverse:    var(--gray-900);
-  --foreground-link:       var(--brand-300);
-
-  /* Interactive Elements */
-  --primary:               var(--brand-400);
-  --primary-hover:         var(--brand-300);
-  --primary-active:        var(--brand-200);
-  --primary-focus:         var(--brand-400);
-  --primary-disabled:      var(--gray-700);
-  --primary-foreground:    var(--gray-0);
-
-  /* Borders */
-  --border:                var(--gray-800);
-  --border-strong:         var(--gray-600);
-  --border-focus:          var(--brand-400);
+  --color-surface-page:     var(--gray-900);
+  --color-surface-elevated: var(--gray-800);
+  --color-content-primary:  var(--color-white);
+  --color-content-secondary:var(--gray-100);
+  --color-interactive:      var(--brand);
+  --color-border-default:   var(--gray-800);
 }
 
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
-    /* Surfaces */
-    --background:            var(--gray-950);
-    --background-elevated:   var(--gray-900);
-    --background-inverse:    var(--gray-50);
-
-    /* Content (Text & Icons) */
-    --foreground:           var(--gray-50);
-    --foreground-muted:     var(--gray-400);
-    --foreground-disabled:   var(--gray-600);
-    --foreground-inverse:    var(--gray-900);
-    --foreground-link:       var(--brand-300);
-
-    /* Interactive Elements */
-    --primary:               var(--brand-400);
-    --primary-hover:         var(--brand-300);
-    --primary-active:        var(--brand-200);
-    --primary-focus:         var(--brand-400);
-    --primary-disabled:      var(--gray-700);
-    --primary-foreground:    var(--gray-0);
-
-    /* Borders */
-    --border:                var(--gray-800);
-    --border-strong:         var(--gray-600);
-    --border-focus:          var(--brand-400);
+    --color-surface-page:     var(--gray-900);
+    --color-surface-elevated: var(--gray-800);
+    --color-content-primary:  var(--color-white);
+    --color-content-secondary:var(--gray-100);
+    --color-interactive:      var(--brand);
+    --color-border-default:   var(--gray-800);
   }
 }
+

package/src/tokens/semantic/light.css

@@ -5,53 +5,21 @@
  */
 
 :root {
-  /* Surfaces */
-  --background:            var(--gray-50);
-  --background-elevated:   var(--gray-0);
-  --background-inverse:    var(--gray-900);
-
-  /* Content (Text & Icons) */
-  --foreground:           var(--gray-900);
-  --foreground-muted:     var(--gray-600);
-  --foreground-disabled:   var(--gray-400);
-  --foreground-inverse:    var(--gray-50);
-  --foreground-link:       var(--brand-600);
-
-  /* Interactive Elements */
-  --primary:               var(--brand-500);
-  --primary-hover:         var(--brand-600);
-  --primary-active:        var(--brand-700);
-  --primary-focus:         var(--brand-500);
-  --primary-disabled:      var(--gray-300);
-  --primary-foreground:    var(--gray-0);
-
-  /* Feedback Semantics */
-  --success:               var(--success-500);
-  --warn:                  var(--warn-500);
-  --error:                 var(--error-500);
-  --info:                  var(--info-500);
-
-  /* Borders */
-  --border:                var(--gray-200);
-  --border-strong:         var(--gray-400);
-  --border-focus:          var(--brand-500);
+  --color-surface-page:     var(--color-white);
+  --color-surface-elevated: var(--color-white);
+  --color-content-primary:  var(--gray-900);
+  --color-content-secondary:var(--gray-800);
+  --color-interactive:      var(--brand);
+  --color-border-default:   var(--gray-200);
 
   /* Automatic theme morph configuration */
   transition:
-    --background 220ms var(--ease-out),
-    --background-elevated 220ms var(--ease-out),
-    --background-inverse 220ms var(--ease-out),
-    --foreground 180ms var(--ease-out),
-    --foreground-muted 180ms var(--ease-out),
-    --foreground-disabled 180ms var(--ease-out),
-    --foreground-inverse 180ms var(--ease-out),
-    --foreground-link 180ms var(--ease-out),
-    --primary 180ms var(--ease-out),
-    --primary-hover 180ms var(--ease-out),
-    --primary-active 180ms var(--ease-out),
-    --border 180ms var(--ease-out),
-    --border-strong 180ms var(--ease-out),
-    --border-focus 180ms var(--ease-out);
+    --color-surface-page 220ms var(--ease-out),
+    --color-surface-elevated 220ms var(--ease-out),
+    --color-content-primary 180ms var(--ease-out),
+    --color-content-secondary 180ms var(--ease-out),
+    --color-interactive 180ms var(--ease-out),
+    --color-border-default 180ms var(--ease-out);
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -59,3 +27,4 @@
     transition: none !important;
   }
 }
+

package/src/tokens/semantic/transitions.css

@@ -1,27 +1,36 @@
 /**
  * tokens/semantic/transitions.css
  *
- * View Transition pseudo-element theming.
- * Connects the browser's CSS View Transitions API to the semantic token system.
+ * View Transition pseudo-element mapping and layout swap animations.
+ *
+ * Docks use element-scoped view transitions via this.startViewTransition().
+ * The transitioned element gets viewTransitionName='dock-swap'.
+ * Never target (root) — that animates the stable chrome (sidebar, header).
  */
 
 :root {
-  /* Backdrop behind old and new page snapshots during a transition */
-  --transition-bg: var(--color-surface-page);
-
-  /* Timing tokens used by JS when calling startViewTransition */
   --transition-duration: var(--duration-normal);
   --transition-easing: var(--ease-out);
-
-  /* Directional modifiers — pushed pages feel different from popped pages */
-  --transition-push: var(--ease-out);
-  --transition-pop: var(--ease-in);
+  --transition-push: cubic-bezier(0.1, 0.9, 0.2, 1);
+  --transition-pop: cubic-bezier(0.9, 0.1, 1, 0.2);
   --transition-replace: var(--ease-in-out);
+  --transition-offset: 30px;
+  --transition-bg: var(--color-surface-page);
 }
 
-::view-transition-old(root),
-::view-transition-new(root) {
-  background: var(--transition-bg);
+::view-transition-old(dock-swap) {
+  animation: 90ms ease-in both fade-out;
+}
+::view-transition-new(dock-swap) {
+  animation: var(--transition-duration) var(--transition-easing) both slide-in;
+}
+
+@keyframes fade-out {
+  to { opacity: 0; }
+}
+@keyframes slide-in {
+  from { transform: translateY(var(--transition-offset)); }
+  to { transform: translateY(0); }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -29,4 +38,8 @@
     --transition-duration: 0ms;
     --transition-easing: linear;
   }
+  ::view-transition-old(dock-swap),
+  ::view-transition-new(dock-swap) {
+    animation: none !important;
+  }
 }