@adukiorg/anza 0.4.1 → 0.4.2

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,32 @@
 /**
  * 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.
  */
 
 :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-old(root) {
+  animation: 90ms ease-in both fade-out;
+}
 ::view-transition-new(root) {
-  background: var(--transition-bg);
+  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 +34,9 @@
     --transition-duration: 0ms;
     --transition-easing: linear;
   }
+  ::view-transition-old(root),
+  ::view-transition-new(root) {
+    animation: none !important;
+  }
 }
+