aeico-components 0.1.6 → 0.1.7

package/src/styles/variables.css

@@ -6,165 +6,160 @@
   --ae-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
     "Liberation Mono", "Courier New", monospace;
   font-family: var(--ae-font-sans-serif);
-  --blue:   #0e639c;
-  --green:  #28a745;
-  --red:    #dc3545;
-  --yellow: #ffc107;
-  --cyan:   #17a2b8;
-  --gray:   #6e6e6e;
-  --slate:  #64748b;
-  --dark:   #343a40;
-  --light:  #f8f9fa;
+  --ae-blue:   #0e639c;
+  --ae-green:  #28a745;
+  --ae-red:    #dc3545;
+  --ae-yellow: #ffc107;
+  --ae-cyan:   #17a2b8;
+  --ae-gray:   #6e6e6e;
+  --ae-slate:  #64748b;
+  --ae-dark:   #343a40;
+  --ae-light:  #f8f9fa;
 }
 
 :root,
 :host {
   /* Blue */
-  --blue-100: color-mix(in srgb, var(--blue) 20%, white);
-  --blue-200: color-mix(in srgb, var(--blue) 40%, white);
-  --blue-300: color-mix(in srgb, var(--blue) 60%, white);
-  --blue-400: color-mix(in srgb, var(--blue) 80%, white);
-  --blue-500: var(--blue);
-  --blue-600: color-mix(in srgb, var(--blue) 80%, black);
-  --blue-700: color-mix(in srgb, var(--blue) 60%, black);
-  --blue-800: color-mix(in srgb, var(--blue) 40%, black);
-  --blue-900: color-mix(in srgb, var(--blue) 20%, black);
+  --ae-blue-100: color-mix(in srgb, var(--ae-blue) 20%, white);
+  --ae-blue-200: color-mix(in srgb, var(--ae-blue) 40%, white);
+  --ae-blue-300: color-mix(in srgb, var(--ae-blue) 60%, white);
+  --ae-blue-400: color-mix(in srgb, var(--ae-blue) 80%, white);
+  --ae-blue-500: var(--ae-blue);
+  --ae-blue-600: color-mix(in srgb, var(--ae-blue) 80%, black);
+  --ae-blue-700: color-mix(in srgb, var(--ae-blue) 60%, black);
+  --ae-blue-800: color-mix(in srgb, var(--ae-blue) 40%, black);
+  --ae-blue-900: color-mix(in srgb, var(--ae-blue) 20%, black);
 
   /* Green */
-  --green-100: color-mix(in srgb, var(--green) 20%, white);
-  --green-200: color-mix(in srgb, var(--green) 40%, white);
-  --green-300: color-mix(in srgb, var(--green) 60%, white);
-  --green-400: color-mix(in srgb, var(--green) 80%, white);
-  --green-500: var(--green);
-  --green-600: color-mix(in srgb, var(--green) 80%, black);
-  --green-700: color-mix(in srgb, var(--green) 60%, black);
-  --green-800: color-mix(in srgb, var(--green) 40%, black);
-  --green-900: color-mix(in srgb, var(--green) 20%, black);
+  --ae-green-100: color-mix(in srgb, var(--ae-green) 20%, white);
+  --ae-green-200: color-mix(in srgb, var(--ae-green) 40%, white);
+  --ae-green-300: color-mix(in srgb, var(--ae-green) 60%, white);
+  --ae-green-400: color-mix(in srgb, var(--ae-green) 80%, white);
+  --ae-green-500: var(--ae-green);
+  --ae-green-600: color-mix(in srgb, var(--ae-green) 80%, black);
+  --ae-green-700: color-mix(in srgb, var(--ae-green) 60%, black);
+  --ae-green-800: color-mix(in srgb, var(--ae-green) 40%, black);
+  --ae-green-900: color-mix(in srgb, var(--ae-green) 20%, black);
 
   /* Red */
-  --red-100: color-mix(in srgb, var(--red) 20%, white);
-  --red-200: color-mix(in srgb, var(--red) 40%, white);
-  --red-300: color-mix(in srgb, var(--red) 60%, white);
-  --red-400: color-mix(in srgb, var(--red) 80%, white);
-  --red-500: var(--red);
-  --red-600: color-mix(in srgb, var(--red) 80%, black);
-  --red-700: color-mix(in srgb, var(--red) 60%, black);
-  --red-800: color-mix(in srgb, var(--red) 40%, black);
-  --red-900: color-mix(in srgb, var(--red) 20%, black);
+  --ae-red-100: color-mix(in srgb, var(--ae-red) 20%, white);
+  --ae-red-200: color-mix(in srgb, var(--ae-red) 40%, white);
+  --ae-red-300: color-mix(in srgb, var(--ae-red) 60%, white);
+  --ae-red-400: color-mix(in srgb, var(--ae-red) 80%, white);
+  --ae-red-500: var(--ae-red);
+  --ae-red-600: color-mix(in srgb, var(--ae-red) 80%, black);
+  --ae-red-700: color-mix(in srgb, var(--ae-red) 60%, black);
+  --ae-red-800: color-mix(in srgb, var(--ae-red) 40%, black);
+  --ae-red-900: color-mix(in srgb, var(--ae-red) 20%, black);
 
   /* Yellow */
-  --yellow-100: color-mix(in srgb, var(--yellow) 20%, white);
-  --yellow-200: color-mix(in srgb, var(--yellow) 40%, white);
-  --yellow-300: color-mix(in srgb, var(--yellow) 60%, white);
-  --yellow-400: color-mix(in srgb, var(--yellow) 80%, white);
-  --yellow-500: var(--yellow);
-  --yellow-600: color-mix(in srgb, var(--yellow) 80%, black);
-  --yellow-700: color-mix(in srgb, var(--yellow) 60%, black);
-  --yellow-800: color-mix(in srgb, var(--yellow) 40%, black);
-  --yellow-900: color-mix(in srgb, var(--yellow) 20%, black);
+  --ae-yellow-100: color-mix(in srgb, var(--ae-yellow) 20%, white);
+  --ae-yellow-200: color-mix(in srgb, var(--ae-yellow) 40%, white);
+  --ae-yellow-300: color-mix(in srgb, var(--ae-yellow) 60%, white);
+  --ae-yellow-400: color-mix(in srgb, var(--ae-yellow) 80%, white);
+  --ae-yellow-500: var(--ae-yellow);
+  --ae-yellow-600: color-mix(in srgb, var(--ae-yellow) 80%, black);
+  --ae-yellow-700: color-mix(in srgb, var(--ae-yellow) 60%, black);
+  --ae-yellow-800: color-mix(in srgb, var(--ae-yellow) 40%, black);
+  --ae-yellow-900: color-mix(in srgb, var(--ae-yellow) 20%, black);
 
   /* Cyan */
-  --cyan-100: color-mix(in srgb, var(--cyan) 20%, white);
-  --cyan-200: color-mix(in srgb, var(--cyan) 40%, white);
-  --cyan-300: color-mix(in srgb, var(--cyan) 60%, white);
-  --cyan-400: color-mix(in srgb, var(--cyan) 80%, white);
-  --cyan-500: var(--cyan);
-  --cyan-600: color-mix(in srgb, var(--cyan) 80%, black);
-  --cyan-700: color-mix(in srgb, var(--cyan) 60%, black);
-  --cyan-800: color-mix(in srgb, var(--cyan) 40%, black);
-  --cyan-900: color-mix(in srgb, var(--cyan) 20%, black);
+  --ae-cyan-100: color-mix(in srgb, var(--ae-cyan) 20%, white);
+  --ae-cyan-200: color-mix(in srgb, var(--ae-cyan) 40%, white);
+  --ae-cyan-300: color-mix(in srgb, var(--ae-cyan) 60%, white);
+  --ae-cyan-400: color-mix(in srgb, var(--ae-cyan) 80%, white);
+  --ae-cyan-500: var(--ae-cyan);
+  --ae-cyan-600: color-mix(in srgb, var(--ae-cyan) 80%, black);
+  --ae-cyan-700: color-mix(in srgb, var(--ae-cyan) 60%, black);
+  --ae-cyan-800: color-mix(in srgb, var(--ae-cyan) 40%, black);
+  --ae-cyan-900: color-mix(in srgb, var(--ae-cyan) 20%, black);
 
   /* Gray  (neutral — base #6e6e6e) */
-  --gray-100: color-mix(in srgb, var(--gray) 20%, white);
-  --gray-200: color-mix(in srgb, var(--gray) 40%, white);
-  --gray-300: color-mix(in srgb, var(--gray) 60%, white);
-  --gray-400: color-mix(in srgb, var(--gray) 80%, white);
-  --gray-500: var(--gray);
-  --gray-600: color-mix(in srgb, var(--gray) 80%, black);
-  --gray-700: color-mix(in srgb, var(--gray) 60%, black);
-  --gray-800: color-mix(in srgb, var(--gray) 40%, black);
-  --gray-900: color-mix(in srgb, var(--gray) 20%, black);
+  --ae-gray-100: color-mix(in srgb, var(--ae-gray) 20%, white);
+  --ae-gray-200: color-mix(in srgb, var(--ae-gray) 40%, white);
+  --ae-gray-300: color-mix(in srgb, var(--ae-gray) 60%, white);
+  --ae-gray-400: color-mix(in srgb, var(--ae-gray) 80%, white);
+  --ae-gray-500: var(--ae-gray);
+  --ae-gray-600: color-mix(in srgb, var(--ae-gray) 80%, black);
+  --ae-gray-700: color-mix(in srgb, var(--ae-gray) 60%, black);
+  --ae-gray-800: color-mix(in srgb, var(--ae-gray) 40%, black);
+  --ae-gray-900: color-mix(in srgb, var(--ae-gray) 20%, black);
 
   /* Slate  (blue-gray — base #64748b, used for 'secondary') */
-  --slate-100: color-mix(in srgb, var(--slate) 20%, white);
-  --slate-200: color-mix(in srgb, var(--slate) 40%, white);
-  --slate-300: color-mix(in srgb, var(--slate) 60%, white);
-  --slate-400: color-mix(in srgb, var(--slate) 80%, white);
-  --slate-500: var(--slate);
-  --slate-600: color-mix(in srgb, var(--slate) 80%, black);
-  --slate-700: color-mix(in srgb, var(--slate) 60%, black);
-  --slate-800: color-mix(in srgb, var(--slate) 40%, black);
-  --slate-900: color-mix(in srgb, var(--slate) 20%, black);
+  --ae-slate-100: color-mix(in srgb, var(--ae-slate) 20%, white);
+  --ae-slate-200: color-mix(in srgb, var(--ae-slate) 40%, white);
+  --ae-slate-300: color-mix(in srgb, var(--ae-slate) 60%, white);
+  --ae-slate-400: color-mix(in srgb, var(--ae-slate) 80%, white);
+  --ae-slate-500: var(--ae-slate);
+  --ae-slate-600: color-mix(in srgb, var(--ae-slate) 80%, black);
+  --ae-slate-700: color-mix(in srgb, var(--ae-slate) 60%, black);
+  --ae-slate-800: color-mix(in srgb, var(--ae-slate) 40%, black);
+  --ae-slate-900: color-mix(in srgb, var(--ae-slate) 20%, black);
 
   /* Dark  (base #343a40) */
-  --dark-100: color-mix(in srgb, var(--dark) 20%, white);
-  --dark-200: color-mix(in srgb, var(--dark) 40%, white);
-  --dark-300: color-mix(in srgb, var(--dark) 60%, white);
-  --dark-400: color-mix(in srgb, var(--dark) 80%, white);
-  --dark-500: var(--dark);
-  --dark-600: color-mix(in srgb, var(--dark) 80%, black);
-  --dark-700: color-mix(in srgb, var(--dark) 60%, black);
-  --dark-800: color-mix(in srgb, var(--dark) 40%, black);
-  --dark-900: color-mix(in srgb, var(--dark) 20%, black);
+  --ae-dark-100: color-mix(in srgb, var(--ae-dark) 20%, white);
+  --ae-dark-200: color-mix(in srgb, var(--ae-dark) 40%, white);
+  --ae-dark-300: color-mix(in srgb, var(--ae-dark) 60%, white);
+  --ae-dark-400: color-mix(in srgb, var(--ae-dark) 80%, white);
+  --ae-dark-500: var(--ae-dark);
+  --ae-dark-600: color-mix(in srgb, var(--ae-dark) 80%, black);
+  --ae-dark-700: color-mix(in srgb, var(--ae-dark) 60%, black);
+  --ae-dark-800: color-mix(in srgb, var(--ae-dark) 40%, black);
+  --ae-dark-900: color-mix(in srgb, var(--ae-dark) 20%, black);
 
   /* Light  (base #f8f9fa) */
-  --light-100: color-mix(in srgb, var(--light) 20%, white);
-  --light-200: color-mix(in srgb, var(--light) 40%, white);
-  --light-300: color-mix(in srgb, var(--light) 60%, white);
-  --light-400: color-mix(in srgb, var(--light) 80%, white);
-  --light-500: var(--light);
-  --light-600: color-mix(in srgb, var(--light) 80%, black);
-  --light-700: color-mix(in srgb, var(--light) 60%, black);
-  --light-800: color-mix(in srgb, var(--light) 40%, black);
-  --light-900: color-mix(in srgb, var(--light) 20%, black);
+  --ae-light-100: color-mix(in srgb, var(--ae-light) 20%, white);
+  --ae-light-200: color-mix(in srgb, var(--ae-light) 40%, white);
+  --ae-light-300: color-mix(in srgb, var(--ae-light) 60%, white);
+  --ae-light-400: color-mix(in srgb, var(--ae-light) 80%, white);
+  --ae-light-500: var(--ae-light);
+  --ae-light-600: color-mix(in srgb, var(--ae-light) 80%, black);
+  --ae-light-700: color-mix(in srgb, var(--ae-light) 60%, black);
+  --ae-light-800: color-mix(in srgb, var(--ae-light) 40%, black);
+  --ae-light-900: color-mix(in srgb, var(--ae-light) 20%, black);
 }
 
 :root,
 :host {
   /* Hover / active mix (light default — overridden in § 6 dark) */
-  --color-mix-hover:  black 10%;
-  --color-mix-active: black 20%;
+  --ae-color-mix-hover:  black 10%;
+  --ae-color-mix-active: black 20%;
 
   /* Primary (Blue) */
-  --color-primary:          var(--blue-500);
-  --color-primary-hover:    color-mix(in srgb, var(--color-primary), var(--color-mix-hover));
-  --color-primary-active:   color-mix(in srgb, var(--color-primary), var(--color-mix-active));
-  --color-primary-disabled: color-mix(in srgb, var(--blue) 50%, var(--gray-500));
+  --ae-color-primary:          var(--ae-blue-500);
+  --ae-color-primary-hover:    color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-hover));
+  --ae-color-primary-active:   color-mix(in srgb, var(--ae-color-primary), var(--ae-color-mix-active));
+  --ae-color-primary-disabled: color-mix(in srgb, var(--ae-blue) 50%, var(--ae-gray-500));
 
   /* Success (Green) */
-  --color-success:          var(--green-500);
-  --color-success-hover:    color-mix(in srgb, var(--color-success), var(--color-mix-hover));
-  --color-success-active:   color-mix(in srgb, var(--color-success), var(--color-mix-active));
-  --color-success-disabled: color-mix(in srgb, var(--green) 50%, var(--gray-500));
+  --ae-color-success:          var(--ae-green-500);
+  --ae-color-success-hover:    color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-hover));
+  --ae-color-success-active:   color-mix(in srgb, var(--ae-color-success), var(--ae-color-mix-active));
+  --ae-color-success-disabled: color-mix(in srgb, var(--ae-green) 50%, var(--ae-gray-500));
 
   /* Danger (Red) */
-  --color-danger:           var(--red-500);
-  --color-danger-hover:     color-mix(in srgb, var(--color-danger), var(--color-mix-hover));
-  --color-danger-active:    color-mix(in srgb, var(--color-danger), var(--color-mix-active));
-  --color-danger-disabled:  color-mix(in srgb, var(--red) 50%, var(--gray-500));
+  --ae-color-danger:           var(--ae-red-500);
+  --ae-color-danger-hover:     color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-hover));
+  --ae-color-danger-active:    color-mix(in srgb, var(--ae-color-danger), var(--ae-color-mix-active));
+  --ae-color-danger-disabled:  color-mix(in srgb, var(--ae-red) 50%, var(--ae-gray-500));
 
   /* Warning (Yellow) */
-  --color-warning:          var(--yellow-500);
-  --color-warning-hover:    color-mix(in srgb, var(--color-warning), var(--color-mix-hover));
-  --color-warning-active:   color-mix(in srgb, var(--color-warning), var(--color-mix-active));
-  --color-warning-disabled: color-mix(in srgb, var(--yellow) 50%, var(--gray-500));
+  --ae-color-warning:          var(--ae-yellow-500);
+  --ae-color-warning-hover:    color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-hover));
+  --ae-color-warning-active:   color-mix(in srgb, var(--ae-color-warning), var(--ae-color-mix-active));
+  --ae-color-warning-disabled: color-mix(in srgb, var(--ae-yellow) 50%, var(--ae-gray-500));
 
   /* Info (Cyan) */
-  --color-info:             var(--cyan-500);
-  --color-info-hover:       color-mix(in srgb, var(--color-info), var(--color-mix-hover));
-  --color-info-active:      color-mix(in srgb, var(--color-info), var(--color-mix-active));
-  --color-info-disabled:    color-mix(in srgb, var(--cyan) 50%, var(--gray-500));
+  --ae-color-info:             var(--ae-cyan-500);
+  --ae-color-info-hover:       color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-hover));
+  --ae-color-info-active:      color-mix(in srgb, var(--ae-color-info), var(--ae-color-mix-active));
+  --ae-color-info-disabled:    color-mix(in srgb, var(--ae-cyan) 50%, var(--ae-gray-500));
 
   /* Secondary (Slate) — base differs per theme, overridden in § 6 dark */
-  --color-secondary:        var(--slate-500);
-  --color-secondary-hover:  color-mix(in srgb, var(--color-secondary), var(--color-mix-hover));
-  --color-secondary-active: color-mix(in srgb, var(--color-secondary), var(--color-mix-active));
-  --color-secondary-text:   var(--slate-700);
-
-  /* On-solid — text color on filled (saturated) backgrounds.
-     Fixed white: blue/green/red/cyan buttons always have white text.
-     Does NOT follow --color-text-main. */
-  --color-on-solid: white;
+  --ae-color-secondary:        var(--ae-slate-500);
+  --ae-color-secondary-hover:  color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-hover));
+  --ae-color-secondary-active: color-mix(in srgb, var(--ae-color-secondary), var(--ae-color-mix-active));
+  --ae-color-secondary-text:   var(--ae-slate-700);
 }
 
 
@@ -177,101 +172,130 @@
   color-scheme: light;
 
   /* Gray UI aliases — lighter palette steps for elements on white background */
-  --color-gray-dark:     var(--gray-400);
-  --color-gray:          var(--gray-300);
-  --color-gray-light:    var(--gray-200);
-  --color-gray-lighter:  var(--gray-100);
-  --color-gray-lightest: color-mix(in srgb, var(--gray) 10%, white);
+  --ae-color-gray-dark:     var(--ae-gray-400);
+  --ae-color-gray:          var(--ae-gray-300);
+  --ae-color-gray-light:    var(--ae-gray-200);
+  --ae-color-gray-lighter:  var(--ae-gray-100);
+  --ae-color-gray-lightest: color-mix(in srgb, var(--ae-gray) 10%, white);
 
   /* Text */
-  --color-text-main:       var(--dark-700);
-  --color-text-muted:      var(--gray-600);
-  --color-text-disabled:   var(--gray-300);
-  --color-text-link:       var(--blue-500);
-  --color-text-link-hover: var(--blue-700);
+  --ae-color-text-main:       var(--ae-dark-700);
+  --ae-color-text-muted:      var(--ae-gray-600);
+  --ae-color-text-disabled:   var(--ae-gray-300);
+  --ae-color-text-link:       var(--ae-blue-500);
+  --ae-color-text-link-hover: var(--ae-blue-700);
 
   /* Surfaces */
-  --surface-sunken:  var(--light-500);
-  --surface-base:    white;
-  --surface-raised:  var(--light-500);
-  --surface-overlay: white;
-  --color-overlay:   rgba(0, 0, 0, 0.4);
+  --ae-surface-sunken:  var(--ae-light-500);
+  --ae-surface-base:    white;
+  --ae-surface-raised:  var(--ae-light-500);
+  --ae-surface-overlay: white;
+  --ae-color-overlay:   rgba(0, 0, 0, 0.4);
 
   /* Borders */
-  --border-subtle:   rgba(0, 0, 0, 0.08);
-  --border-default:  rgba(0, 0, 0, 0.15);
-  --border-hover:    rgba(0, 0, 0, 0.25);
-  --border-focus:    var(--color-primary);
-  --border-disabled: rgba(0, 0, 0, 0.06);
+  --ae-border-subtle:   rgba(0, 0, 0, 0.08);
+  --ae-border-default:  rgba(0, 0, 0, 0.15);
+  --ae-border-hover:    rgba(0, 0, 0, 0.25);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(0, 0, 0, 0.06);
 
   /* Focus ring */
-  --focus-ring:    rgb(from var(--blue) r g b / 0.30);
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.15);
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.15);
 
   /* Subtle intent tokens — light context */
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.08);
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.40);
-  --color-primary-text-emphasis:   var(--blue-700);
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.08);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.40);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-700);
 
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.08);
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.40);
-  --color-success-text-emphasis:   var(--green-700);
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.08);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.40);
+  --ae-color-success-text-emphasis:   var(--ae-green-700);
 
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.08);
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.40);
-  --color-danger-text-emphasis:    var(--red-700);
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.08);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.40);
+  --ae-color-danger-text-emphasis:    var(--ae-red-700);
 
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.08);
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.40);
-  --color-warning-text-emphasis:   var(--yellow-700);
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.08);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.40);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-700);
 
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.08);
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.40);
-  --color-info-text-emphasis:      var(--cyan-700);
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.08);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.40);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-700);
 
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.08);
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.40);
-  --color-secondary-text-emphasis: var(--slate-700);
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.08);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.40);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-700);
 
-  --color-light-bg-subtle:         var(--gray-100);   /* opaque on white: ~#e2e2e2 */
-  --color-light-border-subtle:     var(--gray-200);   /* opaque on white: ~#c4c4c4 */
+  --ae-color-light-bg-subtle:         var(--ae-gray-100);   /* opaque on white: ~#e2e2e2 */
+  --ae-color-light-border-subtle:     var(--ae-gray-200);   /* opaque on white: ~#c4c4c4 */
 
-  --color-dark-bg-subtle:          var(--dark-100);   /* opaque on white: ~#d6d8d9 */
-  --color-dark-border-subtle:      var(--dark-300);   /* opaque on white: ~#85898c */
+  --ae-color-dark-bg-subtle:          var(--ae-dark-100);   /* opaque on white: ~#d6d8d9 */
+  --ae-color-dark-border-subtle:      var(--ae-dark-300);   /* opaque on white: ~#85898c */
 
   /* Component tokens — light defaults */
-  --action-btn-bg:          var(--gray-200);
-  --action-btn-bg-hover:    var(--color-primary);
-  --action-btn-color:       var(--gray-600);
-  --action-btn-color-hover: white;
-
-  --clear-btn-bg-hover:     var(--color-danger);
-  --clear-btn-color-hover:  white;
-
-  --reset-btn-border-radius: 2px;
-  --reset-btn-bg:            var(--action-btn-bg);
-  --reset-btn-bg-hover:      var(--action-btn-bg-hover);
-  --reset-btn-color:         var(--action-btn-color);
-  --reset-btn-color-hover:   var(--action-btn-color-hover);
-  --reset-btn-transition:    all 0.12s;
-
-  --clear-btn-border-radius: 2px;
-  --clear-btn-bg:            var(--action-btn-bg);
-  --clear-btn-color:         var(--action-btn-color);
-  --clear-btn-transition:    all 0.12s;
+  --ae-action-btn-bg:          var(--ae-gray-200);
+  --ae-action-btn-bg-hover:    var(--ae-color-primary);
+  --ae-action-btn-color:       var(--ae-gray-600);
+  --ae-action-btn-color-hover: white;
+
+  --ae-clear-btn-bg-hover:     var(--ae-color-danger);
+  --ae-clear-btn-color-hover:  white;
+
+  --ae-reset-btn-border-radius: var(--ae-radius-xs);
+  --ae-reset-btn-bg:            var(--ae-action-btn-bg);
+  --ae-reset-btn-bg-hover:      var(--ae-action-btn-bg-hover);
+  --ae-reset-btn-color:         var(--ae-action-btn-color);
+  --ae-reset-btn-color-hover:   var(--ae-action-btn-color-hover);
+  --ae-reset-btn-transition:    all 0.12s;
+
+  --ae-clear-btn-border-radius: var(--ae-radius-xs);
+  --ae-clear-btn-bg:            var(--ae-action-btn-bg);
+  --ae-clear-btn-color:         var(--ae-action-btn-color);
+  --ae-clear-btn-transition:    all 0.12s;
 }
 
 :root,
 :host {
-  --size-scale: 1;
-  --size-base:  calc(1rem * var(--size-scale));                    /* 16px */
-  --size-xl:    round(calc(var(--size-l) * 1.125), 1px);           /* 23px */
-  --size-l:     round(calc(var(--size-m) * 1.125 * 1.125), 1px);   /* 20px */
-  --size-m:     var(--size-base);                                  /* 16px */
-  --size-s:     round(calc(var(--size-m) / 1.125), 1px);           /* 14px */
-  --size-xs:    round(calc(var(--size-s) / 1.125), 1px);           /* 12px */
-  --size-2xs:   round(calc(var(--size-xs) / 1.125), 1px);          /* 11px */
-  --size-3xs:   round(calc(var(--size-2xs) / 1.125), 1px);         /* 10px */
+  --ae-size-scale: 1;
+  --ae-size-base:  calc(1rem * var(--ae-size-scale));                    /* 16px */
+  --ae-size-xl:    round(calc(var(--ae-size-l) * 1.125), 1px);           /* 23px */
+  --ae-size-l:     round(calc(var(--ae-size-m) * 1.125 * 1.125), 1px);   /* 20px */
+  --ae-size-m:     var(--ae-size-base);                                  /* 16px */
+  --ae-size-s:     round(calc(var(--ae-size-m) / 1.125), 1px);           /* 14px */
+  --ae-size-xs:    round(calc(var(--ae-size-s) / 1.125), 1px);           /* 12px */
+  --ae-size-2xs:   round(calc(var(--ae-size-xs) / 1.125), 1px);          /* 11px */
+  --ae-size-3xs:   round(calc(var(--ae-size-2xs) / 1.125), 1px);         /* 10px */
+}
+
+/* Border-radius tokens — shared across all components */
+:root,
+:host {
+  /**
+   * Unified border-radius hook for all components.
+   *
+   * Not set by default — each component falls back to its own --ae-radius-*
+   * token (e.g. button → sm, card → lg, input → xs).
+   *
+   * Usage:
+   *   :root { --ae-border-radius: 0; }       // global: all components square
+   *   :root { --ae-border-radius: 999px; }   // global: all components pill
+   *   ae-button { --ae-border-radius: 50%; } // scoped: only buttons circular
+   *   .sidebar { --ae-border-radius: 8px; }  // scoped: everything inside .sidebar
+   *
+   * To restore a component to its own default:
+   *   ae-card { --ae-border-radius: initial; }
+   */
+
+  --ae-radius-square:  0;
+  --ae-radius-xs:      2px;
+  --ae-radius-sm:      4px;
+  --ae-radius-md:      6px;
+  --ae-radius-lg:      8px;
+  --ae-radius-xl:      12px;
+  --ae-radius-pill:    999px;
+  --ae-radius-circle:  50%;
 }
 
 /* Layout tokens — defined on :root so all light DOM elements can use them */
@@ -288,81 +312,81 @@
   color-scheme: dark;
 
   /* Hover / active — slightly gentler on dark backgrounds */
-  --color-mix-hover:  black 8%;
-  --color-mix-active: black 16%;
+  --ae-color-mix-hover:  black 8%;
+  --ae-color-mix-active: black 16%;
 
   /* Gray UI aliases — darker palette steps for elements on dark background */
-  --color-gray-dark:     var(--gray-800);
-  --color-gray:          var(--gray-700);
-  --color-gray-light:    var(--gray-600);
-  --color-gray-lighter:  var(--gray-500);
-  --color-gray-lightest: var(--gray-400);
+  --ae-color-gray-dark:     var(--ae-gray-800);
+  --ae-color-gray:          var(--ae-gray-700);
+  --ae-color-gray-light:    var(--ae-gray-600);
+  --ae-color-gray-lighter:  var(--ae-gray-500);
+  --ae-color-gray-lightest: var(--ae-gray-400);
 
   /* Secondary — deeper base on dark background */
-  --color-secondary:      var(--slate-700);
-  --color-secondary-text: var(--slate-300);
+  --ae-color-secondary:      var(--ae-slate-700);
+  --ae-color-secondary-text: var(--ae-slate-300);
 
   /* Text */
-  --color-text-main:       white;
-  --color-text-muted:      var(--gray-200);
-  --color-text-disabled:   var(--gray-500);
-  --color-text-link:       var(--blue-300);
-  --color-text-link-hover: var(--blue-200);
+  --ae-color-text-main:       white;
+  --ae-color-text-muted:      var(--ae-gray-200);
+  --ae-color-text-disabled:   var(--ae-gray-500);
+  --ae-color-text-link:       var(--ae-blue-300);
+  --ae-color-text-link-hover: var(--ae-blue-200);
 
   /* Surfaces */
-  --surface-sunken:  var(--gray-900);
-  --surface-base:    color-mix(in srgb, var(--gray) 27%, black);
-  --surface-raised:  color-mix(in srgb, var(--gray) 34%, black);
-  --surface-overlay: color-mix(in srgb, var(--gray) 38%, black);
-  --color-overlay:   rgba(0, 0, 0, 0.6);
+  --ae-surface-sunken:  var(--ae-gray-900);
+  --ae-surface-base:    color-mix(in srgb, var(--ae-gray) 27%, black);
+  --ae-surface-raised:  color-mix(in srgb, var(--ae-gray) 34%, black);
+  --ae-surface-overlay: color-mix(in srgb, var(--ae-gray) 38%, black);
+  --ae-color-overlay:   rgba(0, 0, 0, 0.6);
 
   /* Borders */
-  --border-subtle:   rgba(255, 255, 255, 0.08);
-  --border-default:  rgba(255, 255, 255, 0.12);
-  --border-hover:    rgba(255, 255, 255, 0.20);
-  --border-focus:    var(--color-primary);
-  --border-disabled: rgba(255, 255, 255, 0.06);
+  --ae-border-subtle:   rgba(255, 255, 255, 0.08);
+  --ae-border-default:  rgba(255, 255, 255, 0.12);
+  --ae-border-hover:    rgba(255, 255, 255, 0.20);
+  --ae-border-focus:    var(--ae-color-primary);
+  --ae-border-disabled: rgba(255, 255, 255, 0.06);
 
   /* Focus ring */
-  --focus-ring:    rgb(from var(--blue) r g b / 0.25);
-  --focus-ring-sm: rgb(from var(--blue) r g b / 0.10);
+  --ae-focus-ring:    rgb(from var(--ae-blue) r g b / 0.25);
+  --ae-focus-ring-sm: rgb(from var(--ae-blue) r g b / 0.10);
 
   /* Subtle intent tokens — dark context (more alpha, lighter text-emphasis) */
-  --color-primary-bg-subtle:       rgb(from var(--blue) r g b / 0.10);
-  --color-primary-border-subtle:   rgb(from var(--blue) r g b / 0.30);
-  --color-primary-text-emphasis:   var(--blue-300);
+  --ae-color-primary-bg-subtle:       rgb(from var(--ae-blue) r g b / 0.10);
+  --ae-color-primary-border-subtle:   rgb(from var(--ae-blue) r g b / 0.30);
+  --ae-color-primary-text-emphasis:   var(--ae-blue-300);
 
-  --color-success-bg-subtle:       rgb(from var(--green) r g b / 0.10);
-  --color-success-border-subtle:   rgb(from var(--green) r g b / 0.30);
-  --color-success-text-emphasis:   var(--green-300);
+  --ae-color-success-bg-subtle:       rgb(from var(--ae-green) r g b / 0.10);
+  --ae-color-success-border-subtle:   rgb(from var(--ae-green) r g b / 0.30);
+  --ae-color-success-text-emphasis:   var(--ae-green-300);
 
-  --color-danger-bg-subtle:        rgb(from var(--red) r g b / 0.10);
-  --color-danger-border-subtle:    rgb(from var(--red) r g b / 0.30);
-  --color-danger-text-emphasis:    var(--red-300);
+  --ae-color-danger-bg-subtle:        rgb(from var(--ae-red) r g b / 0.10);
+  --ae-color-danger-border-subtle:    rgb(from var(--ae-red) r g b / 0.30);
+  --ae-color-danger-text-emphasis:    var(--ae-red-300);
 
-  --color-warning-bg-subtle:       rgb(from var(--yellow) r g b / 0.10);
-  --color-warning-border-subtle:   rgb(from var(--yellow) r g b / 0.30);
-  --color-warning-text-emphasis:   var(--yellow-300);
+  --ae-color-warning-bg-subtle:       rgb(from var(--ae-yellow) r g b / 0.10);
+  --ae-color-warning-border-subtle:   rgb(from var(--ae-yellow) r g b / 0.30);
+  --ae-color-warning-text-emphasis:   var(--ae-yellow-300);
 
-  --color-info-bg-subtle:          rgb(from var(--cyan) r g b / 0.10);
-  --color-info-border-subtle:      rgb(from var(--cyan) r g b / 0.30);
-  --color-info-text-emphasis:      var(--cyan-300);
+  --ae-color-info-bg-subtle:          rgb(from var(--ae-cyan) r g b / 0.10);
+  --ae-color-info-border-subtle:      rgb(from var(--ae-cyan) r g b / 0.30);
+  --ae-color-info-text-emphasis:      var(--ae-cyan-300);
 
-  --color-secondary-bg-subtle:     rgb(from var(--slate) r g b / 0.10);
-  --color-secondary-border-subtle: rgb(from var(--slate) r g b / 0.30);
-  --color-secondary-text-emphasis: var(--slate-300);
+  --ae-color-secondary-bg-subtle:     rgb(from var(--ae-slate) r g b / 0.10);
+  --ae-color-secondary-border-subtle: rgb(from var(--ae-slate) r g b / 0.30);
+  --ae-color-secondary-text-emphasis: var(--ae-slate-300);
 
-  --color-light-bg-subtle:         rgb(from var(--light) r g b / 0.20);
-  --color-light-border-subtle:     rgb(from var(--light) r g b / 0.25);
+  --ae-color-light-bg-subtle:         rgb(from var(--ae-light) r g b / 0.20);
+  --ae-color-light-border-subtle:     rgb(from var(--ae-light) r g b / 0.25);
 
-  --color-dark-bg-subtle:          rgb(from var(--dark) r g b / 0.30);
-  --color-dark-border-subtle:      rgb(from var(--dark) r g b / 0.50);
+  --ae-color-dark-bg-subtle:          rgb(from var(--ae-dark) r g b / 0.30);
+  --ae-color-dark-border-subtle:      rgb(from var(--ae-dark) r g b / 0.50);
 
   /* Component tokens — dark overrides */
-  --action-btn-bg:          var(--color-gray);
-  --action-btn-bg-hover:    color-mix(in srgb, var(--blue) 25%, var(--gray-800));
-  --action-btn-color:       var(--gray-400);
-  --action-btn-color-hover: var(--cyan-300);
-  --clear-btn-bg-hover:     color-mix(in srgb, var(--red) 25%, var(--gray-800));
-  --clear-btn-color-hover:  var(--red-300);
+  --ae-action-btn-bg:          var(--ae-color-gray);
+  --ae-action-btn-bg-hover:    color-mix(in srgb, var(--ae-blue) 25%, var(--ae-gray-800));
+  --ae-action-btn-color:       var(--ae-gray-400);
+  --ae-action-btn-color-hover: var(--ae-cyan-300);
+  --ae-clear-btn-bg-hover:     color-mix(in srgb, var(--ae-red) 25%, var(--ae-gray-800));
+  --ae-clear-btn-color-hover:  var(--ae-red-300);
 }

package/src/tabs/defines.ts

@@ -1 +1,2 @@
 export type TabActiveIndex = number;
+export type TabVariant = 'subtle' | 'faint' | 'filled' | 'outlined' | 'text';