aeico-components 0.1.6 → 0.1.8

package/src/styles/color.css

@@ -1,117 +1,117 @@
 :host {
-  --color-solid:           var(--color-gray);
-  --color-solid-hover:     color-mix(in srgb, var(--color-solid), var(--color-mix-hover));
-  --color-solid-active:    color-mix(in srgb, var(--color-solid), var(--color-mix-active));
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-gray);
-  --color-border-hover:    color-mix(in srgb, var(--color-border), var(--color-mix-hover));
-  --color-accent:          var(--color-text-muted);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--border-subtle);
-  --color-subtle-hover:    var(--border-default);
-  --color-bg-subtle:       var(--border-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--border-default);
+  --ae-color-solid:           var(--ae-color-gray);
+  --ae-color-solid-hover:     color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-hover));
+  --ae-color-solid-active:    color-mix(in srgb, var(--ae-color-solid), var(--ae-color-mix-active));
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-gray);
+  --ae-color-border-hover:    color-mix(in srgb, var(--ae-color-border), var(--ae-color-mix-hover));
+  --ae-color-accent:          var(--ae-color-text-muted);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-border-subtle);
+  --ae-color-subtle-hover:    var(--ae-border-default);
+  --ae-color-bg-subtle:       var(--ae-border-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-border-default);
 }
 
 :host([color="primary"]) {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-primary);
-  --color-accent:          var(--color-text-link);
-  --color-accent-hover:    var(--color-text-link-hover);
-  --color-subtle:          var(--color-primary-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--blue) r g b / 0.15);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-accent:          var(--ae-color-text-link);
+  --ae-color-accent-hover:    var(--ae-color-text-link-hover);
+  --ae-color-subtle:          var(--ae-color-primary-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-blue) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 :host([color="secondary"]) {
-  --color-solid:           var(--color-secondary);
-  --color-on-solid:        white;
-  --color-border:          var(--color-secondary-hover);
-  --color-accent:          var(--color-secondary-text-emphasis);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          rgb(from var(--slate) r g b / 0.06);
-  --color-subtle-hover:    rgb(from var(--slate) r g b / 0.12);
-  --color-bg-subtle:       var(--color-secondary-bg-subtle);
-  --color-text-subtle:     var(--color-secondary-text-emphasis);
-  --color-border-subtle:   var(--color-secondary-border-subtle);
+  --ae-color-solid:           var(--ae-color-secondary);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-secondary-hover);
+  --ae-color-accent:          var(--ae-color-secondary-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          rgb(from var(--ae-slate) r g b / 0.06);
+  --ae-color-subtle-hover:    rgb(from var(--ae-slate) r g b / 0.12);
+  --ae-color-bg-subtle:       var(--ae-color-secondary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-secondary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-secondary-border-subtle);
 }
 
 :host([color="success"]) {
-  --color-solid:           var(--color-success);
-  --color-on-solid:        white;
-  --color-border:          var(--color-success);
-  --color-accent:          var(--color-success-text-emphasis);
-  --color-accent-hover:    var(--color-success-hover);
-  --color-subtle:          var(--color-success-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--green) r g b / 0.15);
-  --color-bg-subtle:       var(--color-success-bg-subtle);
-  --color-text-subtle:     var(--color-success-text-emphasis);
-  --color-border-subtle:   var(--color-success-border-subtle);
+  --ae-color-solid:           var(--ae-color-success);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-success);
+  --ae-color-accent:          var(--ae-color-success-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-success-hover);
+  --ae-color-subtle:          var(--ae-color-success-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-green) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-success-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-success-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-success-border-subtle);
 }
 
 :host([color="danger"]) {
-  --color-solid:           var(--color-danger);
-  --color-on-solid:        white;
-  --color-border:          var(--color-danger);
-  --color-accent:          var(--color-danger-text-emphasis);
-  --color-accent-hover:    var(--color-danger-hover);
-  --color-subtle:          var(--color-danger-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--red) r g b / 0.15);
-  --color-bg-subtle:       var(--color-danger-bg-subtle);
-  --color-text-subtle:     var(--color-danger-text-emphasis);
-  --color-border-subtle:   var(--color-danger-border-subtle);
+  --ae-color-solid:           var(--ae-color-danger);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-danger);
+  --ae-color-accent:          var(--ae-color-danger-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-danger-hover);
+  --ae-color-subtle:          var(--ae-color-danger-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-red) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-danger-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-danger-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-danger-border-subtle);
 }
 
 :host([color="warning"]) {
-  --color-solid:           var(--color-warning);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--color-warning);
-  --color-accent:          var(--color-warning-text-emphasis);
-  --color-accent-hover:    var(--color-warning-hover);
-  --color-subtle:          var(--color-warning-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--yellow) r g b / 0.15);
-  --color-bg-subtle:       var(--color-warning-bg-subtle);
-  --color-text-subtle:     var(--color-warning-text-emphasis);
-  --color-border-subtle:   var(--color-warning-border-subtle);
+  --ae-color-solid:           var(--ae-color-warning);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-color-warning);
+  --ae-color-accent:          var(--ae-color-warning-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-warning-hover);
+  --ae-color-subtle:          var(--ae-color-warning-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-yellow) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-warning-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-warning-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-warning-border-subtle);
 }
 
 :host([color="info"]) {
-  --color-solid:           var(--color-info);
-  --color-on-solid:        white;
-  --color-border:          var(--color-info);
-  --color-accent:          var(--color-info-text-emphasis);
-  --color-accent-hover:    var(--color-info-hover);
-  --color-subtle:          var(--color-info-bg-subtle);
-  --color-subtle-hover:    rgb(from var(--cyan) r g b / 0.15);
-  --color-bg-subtle:       var(--color-info-bg-subtle);
-  --color-text-subtle:     var(--color-info-text-emphasis);
-  --color-border-subtle:   var(--color-info-border-subtle);
+  --ae-color-solid:           var(--ae-color-info);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-color-info);
+  --ae-color-accent:          var(--ae-color-info-text-emphasis);
+  --ae-color-accent-hover:    var(--ae-color-info-hover);
+  --ae-color-subtle:          var(--ae-color-info-bg-subtle);
+  --ae-color-subtle-hover:    rgb(from var(--ae-cyan) r g b / 0.15);
+  --ae-color-bg-subtle:       var(--ae-color-info-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-info-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-info-border-subtle);
 }
 
 :host([color="light"]) {
-  --color-solid:           var(--light);
-  --color-on-solid:        var(--gray-900);
-  --color-border:          var(--border-hover);
-  --color-subtle:          var(--color-light-bg-subtle);
-  --color-subtle-hover:    var(--color-light-border-subtle);
-  --color-bg-subtle:       var(--color-light-bg-subtle);
-  --color-text-subtle:     var(--color-text-muted);
-  --color-border-subtle:   var(--color-light-border-subtle);
+  --ae-color-solid:           var(--ae-light);
+  --ae-color-on-solid:        var(--ae-gray-900);
+  --ae-color-border:          var(--ae-border-hover);
+  --ae-color-subtle:          var(--ae-color-light-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-light-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-light-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-muted);
+  --ae-color-border-subtle:   var(--ae-color-light-border-subtle);
 }
 
 :host([color="dark"]) {
-  --color-solid:           var(--dark-500);
-  --color-on-solid:        white;
-  --color-border:          var(--dark-500);
-  --color-accent:          var(--color-text-main);
-  --color-accent-hover:    var(--color-text-main);
-  --color-subtle:          var(--color-dark-bg-subtle);
-  --color-subtle-hover:    var(--color-dark-border-subtle);
-  --color-bg-subtle:       var(--color-dark-bg-subtle);
-  --color-text-subtle:     var(--color-text-main);
-  --color-border-subtle:   var(--color-dark-border-subtle);
+  --ae-color-solid:           var(--ae-dark-500);
+  --ae-color-on-solid:        white;
+  --ae-color-border:          var(--ae-dark-500);
+  --ae-color-accent:          var(--ae-color-text-main);
+  --ae-color-accent-hover:    var(--ae-color-text-main);
+  --ae-color-subtle:          var(--ae-color-dark-bg-subtle);
+  --ae-color-subtle-hover:    var(--ae-color-dark-border-subtle);
+  --ae-color-bg-subtle:       var(--ae-color-dark-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-text-main);
+  --ae-color-border-subtle:   var(--ae-color-dark-border-subtle);
 }

package/src/styles/components/action-button.css

@@ -13,25 +13,25 @@
 }
 
 .clear-btn:not(.action-btn) {
-  border-radius: var(--clear-btn-border-radius);
-  background: var(--clear-btn-bg);
-  color: var(--clear-btn-color);
-  transition: var(--clear-btn-transition);
+  border-radius: var(--ae-clear-btn-border-radius);
+  background: var(--ae-clear-btn-bg);
+  color: var(--ae-clear-btn-color);
+  transition: var(--ae-clear-btn-transition);
 }
 
 .reset-btn:not(.action-btn) {
-  border-radius: var(--reset-btn-border-radius);
-  background: var(--reset-btn-bg);
-  color: var(--reset-btn-color);
-  transition: var(--reset-btn-transition);
+  border-radius: var(--ae-reset-btn-border-radius);
+  background: var(--ae-reset-btn-bg);
+  color: var(--ae-reset-btn-color);
+  transition: var(--ae-reset-btn-transition);
 }
 
 .clear-btn:not(.action-btn):hover {
-  background: var(--clear-btn-bg-hover);
-  color: var(--clear-btn-color-hover);
+  background: var(--ae-clear-btn-bg-hover);
+  color: var(--ae-clear-btn-color-hover);
 }
 
 .reset-btn:not(.action-btn):hover {
-  background: var(--reset-btn-bg-hover);
-  color: var(--reset-btn-color-hover);
+  background: var(--ae-reset-btn-bg-hover);
+  color: var(--ae-reset-btn-color-hover);
 }

package/src/styles/components/alert.css

@@ -2,57 +2,51 @@
   position: relative;
   padding: 12px 16px;
   margin-bottom: 12px;
-  border-radius: 4px;
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
   font-size: 12px;
   line-height: 1.6;
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border: 1px solid var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border: 1px solid var(--ae-color-solid);
 }
 
 .alert:last-child {
   margin-bottom: 0;
 }
 
-:host {
-  --color-solid:           var(--color-primary);
-  --color-on-solid:        var(--color-text-main);
-  --color-border:          var(--color-primary);
-  --color-bg-subtle:       var(--color-primary-bg-subtle);
-  --color-text-subtle:     var(--color-primary-text-emphasis);
-  --color-border-subtle:   var(--color-primary-border-subtle);
-
-  --alert-solid-bg:     var(--color-solid);
-  --alert-solid-color:  var(--color-on-solid);
-  --alert-border:       var(--color-border);
-  --alert-subtle-bg:    var(--color-bg-subtle);
-  --alert-subtle-color: var(--color-text-subtle);
-  --alert-subtle-border:var(--color-border-subtle);
+/* default color (no [color] attribute) — primary */
+:host(:not([color])) {
+  --ae-color-solid:           var(--ae-color-primary);
+  --ae-color-on-solid:        var(--ae-color-text-main);
+  --ae-color-border:          var(--ae-color-primary);
+  --ae-color-bg-subtle:       var(--ae-color-primary-bg-subtle);
+  --ae-color-text-subtle:     var(--ae-color-primary-text-emphasis);
+  --ae-color-border-subtle:   var(--ae-color-primary-border-subtle);
 }
 
 
 :host([variant="faint"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-subtle-border);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border-subtle);
 }
 
 :host([variant="subtle"]) .alert {
-  background-color: var(--alert-subtle-bg);
-  color:            var(--alert-subtle-color);
+  background-color: var(--ae-color-bg-subtle);
+  color:            var(--ae-color-text-subtle);
   border-color:     transparent;
 }
 
 :host([variant="filled"]) .alert {
-  background-color: var(--alert-solid-bg);
-  color:            var(--alert-solid-color);
-  border-color:     var(--alert-solid-bg);
+  background-color: var(--ae-color-solid);
+  color:            var(--ae-color-on-solid);
+  border-color:     var(--ae-color-solid);
 }
 
 :host([variant="outlined"]) .alert {
   background-color: transparent;
-  color:            var(--alert-subtle-color);
-  border-color:     var(--alert-border);
+  color:            var(--ae-color-text-subtle);
+  border-color:     var(--ae-color-border);
 }
 
 :host([dismissible]) .alert {

package/src/styles/components/badge.css

@@ -1,13 +1,6 @@
 :host {
   display: inline-flex;
   align-items: center;
-  --badge-solid-bg:       var(--color-solid);
-  --badge-solid-color:    var(--color-on-solid);
-  --badge-border:         var(--color-border);
-  --badge-accent:         var(--color-accent);
-  --badge-subtle-bg:      var(--color-bg-subtle);
-  --badge-subtle-color:   var(--color-text-subtle);
-  --badge-subtle-border:  var(--color-border-subtle);
 }
 
 .badge {
@@ -21,10 +14,10 @@
   line-height: 1.2;
   font-size: 1em;
   padding: 0.15em 0.6em;
-  border-radius: 4px;
-  border: 1px solid var(--badge-solid-bg);
-  background: var(--badge-solid-bg);
-  color: var(--badge-solid-color);
+  border-radius: var(--ae-border-radius, var(--ae-radius-sm));
+  border: 1px solid var(--ae-color-solid);
+  background: var(--ae-color-solid);
+  color: var(--ae-color-on-solid);
 }
 
 /* Default (no [variant]) = filled */
@@ -33,32 +26,32 @@
 
 :host([variant="outlined"]) .badge {
   background:   transparent;
-  border-color: var(--badge-border);
-  color:        var(--badge-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="faint"]) .badge {
-  background:   var(--badge-subtle-bg);
-  border-color: var(--badge-subtle-border);
-  color:        var(--badge-subtle-color);
+  background:   var(--ae-color-bg-subtle);
+  border-color: var(--ae-color-border-subtle);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="subtle"]) .badge {
-  background:   var(--badge-subtle-bg);
+  background:   var(--ae-color-bg-subtle);
   border-color: transparent;
-  color:        var(--badge-subtle-color);
+  color:        var(--ae-color-text-subtle);
 }
 
 :host([variant="text"]) .badge {
   background:   transparent;
   border-color: transparent;
-  color:        var(--badge-accent);
+  color:        var(--ae-color-accent);
   padding-left:  0;
   padding-right: 0;
 }
 
 :host([pill]) .badge {
-  border-radius: 999px;
+  border-radius: var(--ae-radius-pill);
 }
 
 /* Icon slots */

package/src/styles/components/breadcrumb-item.css

@@ -13,7 +13,7 @@
 .sep {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
   padding: 0 0.35em;
   user-select: none;
   pointer-events: none;
@@ -30,30 +30,30 @@
 .label {
   display: inline-flex;
   align-items: center;
-  color: var(--color-text-muted);
+  color: var(--ae-color-text-muted);
 }
 
 /* Current page — last item */
 :host([aria-current="page"]) .label {
-  color: var(--color-text-main);
+  color: var(--ae-color-text-main);
   font-weight: 500;
   cursor: default;
 }
 
 /* Link items */
 .label a {
-  color: var(--color-accent, var(--color-text-link));
+  color: var(--ae-color-accent, var(--ae-color-text-link));
   text-decoration: none;
   outline: none;
 }
 
 .label a:hover {
-  color: var(--color-accent-hover, var(--color-text-link-hover));
+  color: var(--ae-color-accent-hover, var(--ae-color-text-link-hover));
   text-decoration: underline;
 }
 
 .label a:focus-visible {
-  outline: 2px solid var(--color-accent, var(--focus-ring-color));
+  outline: 2px solid var(--ae-color-accent, var(--ae-focus-ring-color));
   outline-offset: 2px;
-  border-radius: 2px;
+  border-radius: var(--ae-radius-xs);
 }

package/src/styles/components/button-group.css

@@ -15,6 +15,8 @@
 
 :host([compact]) {
   gap: 0;
+  /* Reset --ae-border-radius so individual --_btn-r-* corners take effect */
+  --ae-border-radius: initial;
 }
 
 /* Raise hovered/focused button so its border shows above neighbours */

package/src/styles/components/button.css

@@ -1,16 +1,5 @@
 :host {
   display: inline-block;
-  --btn-solid-bg:          var(--color-solid);
-  --btn-solid-bg-hover:    var(--color-solid-hover);
-  --btn-solid-bg-active:   var(--color-solid-active);
-  --btn-solid-color:       var(--color-on-solid);
-  --btn-solid-color-hover: var(--color-on-solid-hover);
-  --btn-border:            var(--color-border);
-  --btn-border-hover:      var(--color-border-hover);
-  --btn-accent:            var(--color-accent);
-  --btn-accent-hover:      var(--color-accent-hover);
-  --btn-subtle-bg:         var(--color-subtle);
-  --btn-subtle-bg-hover:   var(--color-subtle-hover);
 }
 
 button {
@@ -31,100 +20,100 @@ button {
   padding: 0.429em 1.071em;
   font-size: 1em;
   line-height: 1.5;
-  border-radius: var(--_btn-r-tl, 4px) var(--_btn-r-tr, 4px) var(--_btn-r-br, 4px) var(--_btn-r-bl, 4px);
+  border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-sm)) var(--_btn-r-tr, var(--ae-radius-sm)) var(--_btn-r-br, var(--ae-radius-sm)) var(--_btn-r-bl, var(--ae-radius-sm)));
   min-width: 4.571em;
   height: 2.286em;
   width: 100%;
 
-  background:   var(--btn-solid-bg);
-  border: 1px solid var(--btn-solid-bg);
-  color:        var(--btn-solid-color);
+  background:   var(--ae-color-solid);
+  border: 1px solid var(--ae-color-solid);
+  color:        var(--ae-color-on-solid);
 }
 
 button:focus  { outline: none; }
 button:active { transform: translateY(1px); }
 
 button:hover:not(:disabled) {
-  background:   var(--btn-solid-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  background:   var(--ae-color-solid-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
 }
 
-button:active:not(:disabled) { background: var(--btn-solid-bg-active); }
+button:active:not(:disabled) { background: var(--ae-color-solid-active); }
 
 button:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-:host([size="xs"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
-:host([size="sm"]) button { border-radius: var(--_btn-r-tl, 3px) var(--_btn-r-tr, 3px) var(--_btn-r-br, 3px) var(--_btn-r-bl, 3px); }
+:host([size="xs"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
+:host([size="sm"]) button { border-radius: var(--ae-border-radius, var(--_btn-r-tl, var(--ae-radius-xs)) var(--_btn-r-tr, var(--ae-radius-xs)) var(--_btn-r-br, var(--ae-radius-xs)) var(--_btn-r-bl, var(--ae-radius-xs))); }
 
 /* --- Variants --- */
 
 :host([variant="outlined"]) button {
   background:   transparent;
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="outlined"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
 }
 
 :host([variant="outlined"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="subtle"]) button {
-  background:   var(--btn-subtle-bg);
+  background:   var(--ae-color-subtle);
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="subtle"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle-hover);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="subtle"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="faint"]) button {
-  background:   var(--btn-subtle-bg);
-  border-color: var(--btn-border);
-  color:        var(--btn-accent);
+  background:   var(--ae-color-subtle);
+  border-color: var(--ae-color-border);
+  color:        var(--ae-color-accent);
 }
 
 :host([variant="faint"]) button:hover:not(:disabled) {
-  background:   var(--btn-subtle-bg-hover);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-accent-hover);
+  background:   var(--ae-color-subtle-hover);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-accent-hover);
 }
 
 :host([variant="faint"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 :host([variant="text"]) button {
   background:   transparent;
   border-color: transparent;
-  color:        var(--btn-accent);
+  color:        var(--ae-color-accent);
   min-width:     auto;
   padding-left:  4px;
   padding-right: 4px;
 }
 
 :host([variant="text"]) button:hover:not(:disabled) {
-  background: var(--btn-subtle-bg);
-  color:      var(--btn-accent-hover);
+  background: var(--ae-color-subtle);
+  color:      var(--ae-color-accent-hover);
 }
 
 :host([variant="text"]) button:active:not(:disabled) {
-  background: var(--btn-subtle-bg-hover);
+  background: var(--ae-color-subtle-hover);
 }
 
 /* Icon-only: single ae-icon child → square compact layout */
@@ -133,7 +122,7 @@ button:disabled {
 }
 
 :host([icon-only]:not([size])) {
-  font-size: var(--size-m);
+  font-size: var(--ae-size-m);
 }
 
 :host([icon-only]) button {
@@ -149,9 +138,9 @@ button:disabled {
 }
 
 :host([active]) button {
-  background:   var(--btn-solid-bg-active);
-  border-color: var(--btn-border-hover);
-  color:        var(--btn-solid-color-hover, var(--btn-solid-color));
+  background:   var(--ae-color-solid-active);
+  border-color: var(--ae-color-border-hover);
+  color:        var(--ae-color-on-solid-hover, var(--ae-color-on-solid));
 }
 
 .btn-icon {
@@ -162,7 +151,7 @@ button:disabled {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: 4px;
+  border-radius: var(--ae-radius-sm);
 }
 
 .btn-icon.btn-lg {
@@ -171,7 +160,7 @@ button:disabled {
 }
 
 .btn-circle {
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
 }
 
 :host([block]) {
@@ -191,7 +180,7 @@ button.btn-loading::before {
   height: 1em;
   border: 2px solid currentColor;
   border-top-color: transparent;
-  border-radius: 50%;
+  border-radius: var(--ae-radius-circle);
   animation: btn-spin 0.6s linear infinite;
   color: currentColor;
   opacity: 0.8;