feat(theme): refine built-in color palettes, add subtle surface boundaries.

projects/aeris-ui/accordion/aeris-accordion.scss

@@ -41,7 +41,11 @@
 
 .aeris-accordion__item {
   min-width: 0;
-  border-bottom: 1px solid var(--aeris-accordion-border, var(--aeris-border, #deddd7));
+  border-bottom: 1px solid
+    var(
+      --aeris-accordion-border,
+      var(--aeris-border)
+    );
   background: var(--aeris-accordion-background, var(--aeris-surface, #fff));
 }
 
@@ -150,7 +154,11 @@
 }
 
 :host([data-variant='outlined']) {
-  border: 1px solid var(--aeris-accordion-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(
+      --aeris-accordion-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-accordion-radius, var(--aeris-radius-lg, 1.125rem));
   background: var(--aeris-accordion-background, var(--aeris-surface, #fff));
   overflow: hidden;
@@ -172,7 +180,11 @@
 }
 
 :host([data-variant='separated']) .aeris-accordion__item {
-  border: 1px solid var(--aeris-accordion-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(
+      --aeris-accordion-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-accordion-radius, var(--aeris-radius-lg, 1.125rem));
   overflow: hidden;
 }

projects/aeris-ui/auto-complete/aeris-auto-complete.scss

@@ -53,7 +53,7 @@
   width: 100%;
   min-height: var(--aeris-auto-complete-height);
   padding: 0 var(--aeris-auto-complete-padding);
-  border: 1px solid var(--aeris-auto-complete-border, var(--aeris-border-strong, #c7c9c0));
+  border: 1px solid var(--aeris-auto-complete-border, var(--aeris-border, #deddd7));
   border-radius: var(
     --aeris-auto-complete-radius,
     var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem))
@@ -218,10 +218,14 @@
   min-width: 100%;
   max-width: calc(100vw - 2rem);
   overflow: auto;
-  scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent;
+  scrollbar-color: var(--aeris-border, #deddd7) transparent;
   scrollbar-width: thin;
   padding: calc(var(--aeris-auto-complete-density-gap) * 0.75);
-  border: 1px solid var(--aeris-auto-complete-panel-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(
+      --aeris-auto-complete-panel-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-auto-complete-panel-radius, var(--aeris-radius-md, 0.6875rem));
   background: var(--aeris-auto-complete-panel-background, var(--aeris-surface, #fff));
   box-shadow: var(--aeris-auto-complete-panel-shadow, 0 1rem 2.5rem rgb(31 35 27 / 16%));
@@ -240,7 +244,7 @@
 .aeris-auto-complete__panel::-webkit-scrollbar-thumb {
   border: 3px solid transparent;
   border-radius: var(--aeris-radius-pill, 999px);
-  background: var(--aeris-border-strong, #c7c9c0);
+  background: var(--aeris-border, #deddd7);
   background-clip: content-box;
 }
 

projects/aeris-ui/breadcrumb/aeris-breadcrumb.scss

@@ -6,7 +6,8 @@ aeris-breadcrumb {
 }
 
 .aeris-breadcrumb {
-  border: var(--aeris-breadcrumb-border-width, 1px) solid var(--aeris-breadcrumb-border, var(--aeris-border, #deddd7));
+  border: var(--aeris-breadcrumb-border-width, 1px) solid
+    var(--aeris-breadcrumb-border, var(--aeris-border));
   border-radius: var(--aeris-breadcrumb-radius, var(--aeris-radius-lg, 1.125rem));
   background: var(--aeris-breadcrumb-background, var(--aeris-surface, #fff));
   color: var(--aeris-breadcrumb-color, var(--aeris-text, #222222));
@@ -53,7 +54,7 @@ aeris-breadcrumb {
 .aeris-breadcrumb[data-wrap='false'] .aeris-breadcrumb__list {
   flex-wrap: nowrap;
   overflow-x: auto;
-  scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent;
+  scrollbar-color: var(--aeris-border, #deddd7) transparent;
   scrollbar-width: thin;
 }
 
@@ -70,7 +71,7 @@ aeris-breadcrumb {
 .aeris-breadcrumb[data-wrap='false'] .aeris-breadcrumb__list::-webkit-scrollbar-thumb {
   border: 3px solid transparent;
   border-radius: var(--aeris-radius-pill, 999px);
-  background: var(--aeris-border-strong, #c7c9c0);
+  background: var(--aeris-border, #deddd7);
   background-clip: content-box;
 }
 

projects/aeris-ui/button/aeris-button.scss

@@ -89,7 +89,7 @@
   }
 
   :host(.aeris-button--secondary:hover:not(:disabled)) {
-    border-color: var(--aeris-border-strong, #c7c9c0);
+    border-color: var(--aeris-border, #deddd7);
     background: var(--aeris-surface-2, #f2f0ec);
   }
 

projects/aeris-ui/card/aeris-card.scss

@@ -10,7 +10,8 @@ aeris-card {
   height: 100%;
   min-width: 0;
   overflow: visible;
-  border: 1px solid var(--aeris-card-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(--aeris-card-border, var(--aeris-border));
   border-radius: var(--_aeris-card-radius);
   background: var(--aeris-card-background, var(--aeris-surface, #fff));
   color: var(--aeris-card-color, var(--aeris-text, #222222));
@@ -35,7 +36,10 @@ aeris-card {
 }
 
 .aeris-card[data-hoverable='true']:hover {
-  border-color: var(--aeris-card-hover-border, var(--aeris-border-strong, #c7c9c0));
+  border-color: var(
+    --aeris-card-hover-border,
+    color-mix(in srgb, var(--aeris-border, #deddd7) 58%, transparent)
+  );
   box-shadow: var(
     --aeris-card-hover-shadow,
     0 1rem 2.5rem color-mix(in srgb, var(--aeris-text, #222222) 12%, transparent)

projects/aeris-ui/carousel/aeris-carousel.scss

@@ -125,7 +125,8 @@
   min-block-size: var(--aeris-carousel-default-item-min-height, 10rem);
   place-items: center;
   padding: 1rem;
-  border: 1px solid var(--aeris-carousel-item-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(--aeris-carousel-item-border, var(--aeris-border));
   border-radius: var(--aeris-carousel-item-radius, var(--aeris-radius-lg, 0.875rem));
   background: var(--aeris-carousel-item-background, var(--aeris-surface, #fff));
   text-align: center;
@@ -205,7 +206,7 @@
   padding: 0;
   border: 0;
   border-radius: var(--aeris-carousel-indicator-radius, 999px);
-  background: var(--aeris-carousel-indicator-background, var(--aeris-border-strong, #c7c9c0));
+  background: var(--aeris-carousel-indicator-background, var(--aeris-border, #deddd7));
   cursor: pointer;
   transition: inline-size 160ms ease, background 160ms ease;
 }

projects/aeris-ui/cascade-select/aeris-cascade-select.scss

@@ -56,7 +56,7 @@
   align-items: center;
   gap: calc(var(--aeris-cascade-select-density-gap) + 0.25rem);
   padding: 0 2.75rem 0 var(--aeris-cascade-select-padding);
-  border: 1px solid var(--aeris-cascade-select-border, var(--aeris-border-strong, #c7c9c0));
+  border: 1px solid var(--aeris-cascade-select-border, var(--aeris-border, #deddd7));
   border-radius: var(
     --aeris-cascade-select-radius,
     var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem))
@@ -219,10 +219,14 @@
   max-width: calc(100vw - 2rem);
   display: flex;
   overflow: auto;
-  scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent;
+  scrollbar-color: var(--aeris-border, #deddd7) transparent;
   scrollbar-width: thin;
   padding: calc(var(--aeris-cascade-select-density-gap) * 0.75);
-  border: 1px solid var(--aeris-cascade-select-panel-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(
+      --aeris-cascade-select-panel-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-cascade-select-panel-radius, var(--aeris-radius-md, 0.6875rem));
   background: var(--aeris-cascade-select-panel-background, var(--aeris-surface, #fff));
   box-shadow: var(--aeris-cascade-select-panel-shadow, 0 1rem 2.5rem rgb(31 35 27 / 16%));
@@ -241,7 +245,7 @@
 .aeris-cascade-select__panel::-webkit-scrollbar-thumb {
   border: 3px solid transparent;
   border-radius: var(--aeris-radius-pill, 999px);
-  background: var(--aeris-border-strong, #c7c9c0);
+  background: var(--aeris-border, #deddd7);
   background-clip: content-box;
 }
 

projects/aeris-ui/chart/aeris-chart.scss

@@ -14,7 +14,8 @@
   min-inline-size: 0;
   padding: var(--aeris-chart-padding, 1rem);
   overflow: hidden;
-  border: 1px solid var(--aeris-chart-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(--aeris-chart-border, var(--aeris-border));
   border-radius: var(--aeris-chart-radius, var(--aeris-radius-lg, 0.875rem));
   background: var(--aeris-chart-background, var(--aeris-surface, #fff));
 }

projects/aeris-ui/checkbox/aeris-checkbox.scss

@@ -48,7 +48,7 @@
   place-items: center;
   flex: 0 0 auto;
   margin-top: 0.0625rem;
-  border: 1.5px solid var(--aeris-border-strong, #c7c9c0);
+  border: 1.5px solid var(--aeris-border, #deddd7);
   border-radius: var(--aeris-checkbox-radius, 0.3125rem);
   background: var(--aeris-surface, #fff);
   color: var(--aeris-on-primary, #{aeris-fallbacks.$on-primary});

projects/aeris-ui/color-picker/aeris-color-picker.scss

@@ -24,7 +24,10 @@
   --aeris-color-picker-font-size: 0.9375rem;
   --aeris-color-picker-panel-width: 20rem;
   --aeris-color-picker-panel-background: var(--aeris-surface, #fff);
-  --aeris-color-picker-panel-border: var(--aeris-border, #deddd7);
+  --aeris-color-picker-panel-border: var(
+    --aeris-border,
+    var(--aeris-border, #deddd7)
+  );
   --aeris-color-picker-panel-radius: min(var(--aeris-radius-lg, 0.875rem), 1rem);
   --aeris-color-picker-panel-shadow: 0 1.25rem 3.5rem rgb(31 35 27 / 22%);
   --aeris-color-picker-panel-padding: calc(var(--aeris-density-gap, 0.5rem) + 0.375rem);
@@ -71,7 +74,7 @@
 .aeris-color-picker__trigger,
 .aeris-color-picker__text {
   min-height: var(--aeris-color-picker-height);
-  border: 1px solid var(--aeris-border-strong, #c7c9c0);
+  border: 1px solid var(--aeris-border, #deddd7);
   border-radius: var(--aeris-radius-control, var(--aeris-radius-sm, 0.5rem));
   background: var(--aeris-surface, #fff);
   color: inherit;
@@ -106,7 +109,7 @@
   flex: 0 0 auto;
   border: 0;
   border-radius: min(var(--aeris-radius-sm, 0.5rem), 0.35rem);
-  box-shadow: 0 0 0 1px var(--aeris-border-strong, #c7c9c0);
+  box-shadow: 0 0 0 1px var(--aeris-border, #deddd7);
 }
 
 .aeris-color-picker__value {
@@ -232,7 +235,7 @@
   box-shadow: var(--aeris-color-picker-panel-shadow);
   overflow: auto;
   overscroll-behavior: contain;
-  scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent;
+  scrollbar-color: var(--aeris-border, #deddd7) transparent;
   scrollbar-width: thin;
   visibility: hidden;
 }
@@ -250,7 +253,7 @@
 .aeris-color-picker__panel::-webkit-scrollbar-thumb {
   border: 3px solid transparent;
   border-radius: var(--aeris-radius-pill, 999px);
-  background: var(--aeris-border-strong, #c7c9c0);
+  background: var(--aeris-border, #deddd7);
   background-clip: content-box;
 }
 
@@ -279,7 +282,7 @@
   height: 2.25rem;
   border: 0;
   border-radius: var(--aeris-radius-control, var(--aeris-radius-sm, 0.5rem));
-  box-shadow: 0 0 0 1px var(--aeris-border-strong, #c7c9c0);
+  box-shadow: 0 0 0 1px var(--aeris-border, #deddd7);
 }
 
 .aeris-color-picker__panel-header > span:nth-child(2) {
@@ -308,7 +311,7 @@
 .aeris-color-picker__plane {
   position: relative;
   height: 11rem;
-  border: 1px solid color-mix(in srgb, var(--aeris-border-strong, #c7c9c0) 72%, #000);
+  border: 1px solid color-mix(in srgb, var(--aeris-border, #deddd7) 72%, #000);
   border-radius: calc(var(--aeris-color-picker-panel-radius) - 0.25rem);
   background:
     linear-gradient(to top, #000, transparent),
@@ -442,7 +445,7 @@
   width: 100%;
   min-height: 2.25rem;
   padding: 0 0.625rem;
-  border: 1px solid var(--aeris-border-strong, #c7c9c0);
+  border: 1px solid var(--aeris-border, #deddd7);
   border-radius: var(--aeris-radius-control, var(--aeris-radius-sm, 0.5rem));
   background: var(--aeris-surface, #fff);
   color: var(--aeris-text, #222222);
@@ -467,7 +470,7 @@
   padding: 0;
   border: 0;
   border-radius: min(var(--aeris-radius-sm, 0.5rem), 0.45rem);
-  box-shadow: 0 0 0 1px var(--aeris-border-strong, #c7c9c0);
+  box-shadow: 0 0 0 1px var(--aeris-border, #deddd7);
   cursor: pointer;
 }
 

projects/aeris-ui/color-picker/aeris-color-picker.ts

@@ -332,7 +332,7 @@ export class AerisColorPicker implements ControlValueAccessor {
   private onTouched: () => void = () => undefined;
 
   readonly panelId = `${this.generatedId}-panel`;
-  readonly value = model('#606c38');
+  readonly value = model('#5f6f36');
   readonly format = model<AerisColorFormat>('hex');
   readonly inputId = input('');
   readonly name = input('');
@@ -505,7 +505,7 @@ export class AerisColorPicker implements ControlValueAccessor {
 
   reset(): void {
     if (this.effectiveDisabled() || this.readonly()) return;
-    this.setFromHex('#606c38');
+    this.setFromHex('#5f6f36');
     this.textDraft.set('');
   }
 

projects/aeris-ui/compare/aeris-compare.scss

@@ -20,7 +20,7 @@
   min-block-size: var(--aeris-compare-min-height, 12rem);
   overflow: hidden;
   border: var(--aeris-compare-border-width, 1px) solid
-    var(--aeris-compare-border, var(--aeris-border, #deddd7));
+    var(--aeris-compare-border, var(--aeris-border));
   border-radius: var(--aeris-compare-radius, var(--aeris-radius-lg, 0.875rem));
   background: var(--aeris-compare-background, var(--aeris-surface-2, #f2f0ec));
   color: var(--aeris-compare-color, var(--aeris-text, #222222));

projects/aeris-ui/confirm-popup/aeris-confirm-popup.scss

@@ -21,7 +21,11 @@
   display: grid;
   gap: 0.875rem;
   padding: var(--aeris-confirm-popup-padding, 1rem);
-  border: 1px solid var(--aeris-confirm-popup-border, var(--aeris-border, #deddd7));
+  border: 1px solid
+    var(
+      --aeris-confirm-popup-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-confirm-popup-radius, var(--aeris-radius-lg, 0.875rem));
   background: var(--aeris-confirm-popup-background, var(--aeris-surface, #fff));
   color: var(--aeris-confirm-popup-color, var(--aeris-text, #222222));

projects/aeris-ui/context-menu/aeris-context-menu.scss

@@ -23,7 +23,11 @@ aeris-context-menu {
   min-inline-size: var(--aeris-context-menu-width, 14rem);
   max-inline-size: var(--aeris-context-menu-max-width, min(22rem, calc(100vw - 1rem)));
   padding: var(--aeris-context-menu-padding, 0.375rem);
-  border: var(--aeris-context-menu-border-width, 1px) solid var(--aeris-context-menu-border, var(--aeris-border, #deddd7));
+  border: var(--aeris-context-menu-border-width, 1px) solid
+    var(
+      --aeris-context-menu-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-context-menu-radius, var(--aeris-radius-lg, 1.125rem));
   background: var(--aeris-context-menu-background, var(--aeris-surface, #fff));
   color: var(--aeris-context-menu-color, var(--aeris-text, #222222));
@@ -181,15 +185,22 @@ aeris-context-menu {
     calc(var(--aeris-context-menu-density-gap) * 0.5)
       calc(var(--aeris-context-menu-density-gap) * 0.75)
   );
-  background: var(--aeris-context-menu-separator-color, var(--aeris-border, #deddd7));
+  background: var(
+    --aeris-context-menu-separator-color,
+    var(--aeris-border)
+  );
 }
 
 .aeris-context-menu__submenu {
   position: absolute;
   inset-block-start: calc(-1 * var(--aeris-context-menu-padding, 0.375rem));
   min-inline-size: var(--aeris-context-menu-submenu-width, 14rem);
   padding: var(--aeris-context-menu-padding, 0.375rem);
-  border: var(--aeris-context-menu-border-width, 1px) solid var(--aeris-context-menu-border, var(--aeris-border, #deddd7));
+  border: var(--aeris-context-menu-border-width, 1px) solid
+    var(
+      --aeris-context-menu-border,
+      var(--aeris-border)
+    );
   border-radius: var(--aeris-context-menu-radius, var(--aeris-radius-lg, 1.125rem));
   background: var(--aeris-context-menu-background, var(--aeris-surface, #fff));
   box-shadow: var(--aeris-context-menu-shadow, 0 1.25rem 3.5rem rgba(0, 0, 0, 0.18));