From 9349fdeb45b7a1c5d6b196e2f2a7176284ad42d6 Mon Sep 17 00:00:00 2001 From: lil buda Date: Tue, 28 Jul 2026 20:28:06 +0200 Subject: [PATCH 1/3] feat(theme): refine built-in color palettes, add subtle surface boundaries. --- .../aeris-ui/accordion/aeris-accordion.scss | 18 ++- .../auto-complete/aeris-auto-complete.scss | 12 +- .../aeris-ui/breadcrumb/aeris-breadcrumb.scss | 7 +- projects/aeris-ui/button/aeris-button.scss | 2 +- projects/aeris-ui/card/aeris-card.scss | 8 +- .../aeris-ui/carousel/aeris-carousel.scss | 5 +- .../cascade-select/aeris-cascade-select.scss | 12 +- projects/aeris-ui/chart/aeris-chart.scss | 3 +- .../aeris-ui/checkbox/aeris-checkbox.scss | 2 +- .../color-picker/aeris-color-picker.scss | 21 +-- .../color-picker/aeris-color-picker.ts | 4 +- projects/aeris-ui/compare/aeris-compare.scss | 2 +- .../confirm-popup/aeris-confirm-popup.scss | 6 +- .../context-menu/aeris-context-menu.scss | 17 +- .../date-picker/aeris-date-picker.scss | 13 +- projects/aeris-ui/dialog/aeris-dialog.scss | 9 +- projects/aeris-ui/divider/aeris-divider.scss | 2 +- projects/aeris-ui/drawer/aeris-drawer.scss | 9 +- projects/aeris-ui/editor/aeris-editor.scss | 2 +- .../file-upload/aeris-file-upload.scss | 20 ++- .../aeris-ui/galleria/aeris-galleria.scss | 11 +- .../aeris-ui/icon-field/aeris-icon-field.scss | 2 +- projects/aeris-ui/inplace/aeris-inplace.scss | 6 +- .../input-group/aeris-input-group.scss | 8 +- .../aeris-ui/input-mask/aeris-input-mask.scss | 2 +- .../input-number/aeris-input-number.scss | 4 +- .../aeris-ui/input-otp/aeris-input-otp.scss | 2 +- .../aeris-ui/mega-menu/aeris-mega-menu.scss | 17 +- projects/aeris-ui/menu/aeris-menu.scss | 24 ++- projects/aeris-ui/menubar/aeris-menubar.scss | 14 +- .../meter-group/aeris-meter-group.scss | 5 +- .../multi-select/aeris-multi-select.scss | 12 +- .../aeris-ui/order-list/aeris-order-list.scss | 8 +- .../aeris-organization-chart.scss | 23 ++- .../aeris-ui/paginator/aeris-paginator.scss | 3 +- projects/aeris-ui/panel/aeris-panel.scss | 15 +- .../aeris-ui/password/aeris-password.scss | 6 +- .../aeris-ui/pick-list/aeris-pick-list.scss | 17 +- projects/aeris-ui/popover/aeris-popover.scss | 3 +- .../progress-bar/aeris-progress-bar.scss | 4 +- .../aeris-progress-spinner.scss | 2 +- .../radio-button/aeris-radio-button.scss | 4 +- .../scroll-panel/aeris-scroll-panel.scss | 3 +- projects/aeris-ui/select/aeris-select.scss | 12 +- projects/aeris-ui/slider/aeris-slider.scss | 2 +- .../aeris-ui/splitter/aeris-splitter.scss | 8 +- .../lib/testing/aeris-color-stability.spec.ts | 36 ++--- .../src/lib/testing/aeris-contrast.spec.ts | 11 +- .../lib/testing/aeris-theme.service.spec.ts | 2 +- .../aeris-ui/src/styles/_fallback-colors.scss | 6 +- projects/aeris-ui/src/styles/_tokens.scss | 10 +- projects/aeris-ui/src/styles/aeris.css | 28 ++-- projects/aeris-ui/src/styles/controls.css | 4 +- projects/aeris-ui/stepper/aeris-stepper.scss | 11 +- projects/aeris-ui/table/aeris-table.scss | 20 +-- projects/aeris-ui/tabs/aeris-tabs.scss | 12 +- .../aeris-ui/theme-builder/aeris-contrast.ts | 23 +-- .../theme-builder/aeris-foundation.ts | 24 ++- .../aeris-ui/theme-builder/aeris-theme.ts | 35 ++-- .../tiered-menu/aeris-tiered-menu.scss | 6 +- .../aeris-ui/timeline/aeris-timeline.scss | 4 +- projects/aeris-ui/toast/aeris-toast.scss | 2 +- projects/aeris-ui/toolbar/aeris-toolbar.scss | 7 +- .../tree-select/aeris-tree-select.scss | 16 +- .../aeris-ui/tree-table/aeris-tree-table.scss | 22 +-- projects/aeris-ui/tree/aeris-tree.scss | 5 +- projects/docs/public/ai/22/aeris-docs.json | 93 ++++++----- .../public/ai/22/components/breadcrumb.md | 2 +- .../docs/public/ai/22/components/chart.md | 2 +- .../public/ai/22/components/color-picker.md | 46 +++--- .../docs/public/ai/22/components/compare.md | 2 +- .../public/ai/22/components/confirm-popup.md | 2 +- .../public/ai/22/components/context-menu.md | 4 +- .../public/ai/22/components/file-upload.md | 2 +- .../docs/public/ai/22/components/galleria.md | 4 +- .../docs/public/ai/22/components/mega-menu.md | 2 +- projects/docs/public/ai/22/components/menu.md | 2 +- .../docs/public/ai/22/components/menubar.md | 2 +- .../docs/public/ai/22/components/panel.md | 4 +- .../docs/public/ai/22/components/popover.md | 2 +- .../public/ai/22/components/scroll-panel.md | 2 +- .../docs/public/ai/22/components/select.md | 4 +- .../docs/public/ai/22/components/splitter.md | 2 +- .../public/ai/22/components/tiered-menu.md | 2 +- .../docs/public/ai/22/components/toolbar.md | 2 +- projects/docs/public/llms-full.txt | 151 +++++++++--------- projects/docs/src/app/app.scss | 4 +- projects/docs/src/app/data/docs-palettes.ts | 6 +- .../app/features/design-lab/design-lab.scss | 4 +- .../components/button/button/button.page.html | 2 +- .../button/speed-dial/speed-dial.page.html | 2 +- .../split-button/split-button.page.html | 2 +- .../organization-chart.page.scss | 6 +- .../data/paginator/paginator.page.html | 2 +- .../components/data/table/table.page.html | 2 +- .../data/timeline/timeline.page.html | 2 +- .../data/tree-table/tree-table.page.html | 3 +- .../auto-complete/auto-complete.page.html | 2 +- .../cascade-select/cascade-select.page.html | 2 +- .../form/checkbox/checkbox.page.html | 4 +- .../form/color-picker/color-picker.page.html | 54 +++---- .../form/color-picker/color-picker.page.ts | 42 ++--- .../form/date-picker/date-picker.page.html | 2 +- .../form/icon-field/icon-field.page.html | 2 +- .../form/input-group/input-group.page.html | 2 +- .../form/input-mask/input-mask.page.html | 2 +- .../form/input-number/input-number.page.html | 2 +- .../form/input-otp/input-otp.page.html | 4 +- .../form/input-text/input-text.page.html | 2 +- .../form/input-text/input-text.page.ts | 2 +- .../form/multi-select/multi-select.page.html | 2 +- .../form/password/password.page.html | 2 +- .../form/radio-button/radio-button.page.html | 2 +- .../components/form/select/select.page.html | 2 +- .../components/form/select/select.page.scss | 4 +- .../components/form/select/select.page.ts | 4 +- .../components/form/shared/form-docs.scss | 2 +- .../components/form/slider/slider.page.html | 2 +- .../form/textarea/textarea.page.html | 2 +- .../media/carousel/carousel.page.ts | 2 +- .../media/galleria/galleria.page.ts | 4 +- .../components/misc/badge/badge.page.html | 2 +- .../overlay/dialog/dialog.page.scss | 2 +- .../components/overlay/dialog/dialog.page.ts | 2 +- .../overlay/drawer/drawer.page.scss | 2 +- .../components/overlay/drawer/drawer.page.ts | 2 +- .../panel/stepper/stepper.page.html | 2 +- .../class-names/class-names.page.scss | 2 +- .../utilities/class-names/class-names.page.ts | 2 +- .../docs/src/app/pages/guides/guide-data.ts | 65 ++++---- projects/docs/src/app/pages/home.page.scss | 2 +- projects/docs/src/app/pages/support.page.scss | 2 +- .../app/shared/generated-example-styles.ts | 4 +- projects/docs/src/styles.scss | 1 - 134 files changed, 739 insertions(+), 543 deletions(-) diff --git a/projects/aeris-ui/accordion/aeris-accordion.scss b/projects/aeris-ui/accordion/aeris-accordion.scss index 734e8d9..3fc5727 100644 --- a/projects/aeris-ui/accordion/aeris-accordion.scss +++ b/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; } diff --git a/projects/aeris-ui/auto-complete/aeris-auto-complete.scss b/projects/aeris-ui/auto-complete/aeris-auto-complete.scss index 893ec6a..211d59d 100644 --- a/projects/aeris-ui/auto-complete/aeris-auto-complete.scss +++ b/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; } diff --git a/projects/aeris-ui/breadcrumb/aeris-breadcrumb.scss b/projects/aeris-ui/breadcrumb/aeris-breadcrumb.scss index 99c3f89..262e378 100644 --- a/projects/aeris-ui/breadcrumb/aeris-breadcrumb.scss +++ b/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; } diff --git a/projects/aeris-ui/button/aeris-button.scss b/projects/aeris-ui/button/aeris-button.scss index 5530534..6fc07cb 100644 --- a/projects/aeris-ui/button/aeris-button.scss +++ b/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); } diff --git a/projects/aeris-ui/card/aeris-card.scss b/projects/aeris-ui/card/aeris-card.scss index 9c52465..b37209d 100644 --- a/projects/aeris-ui/card/aeris-card.scss +++ b/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) diff --git a/projects/aeris-ui/carousel/aeris-carousel.scss b/projects/aeris-ui/carousel/aeris-carousel.scss index 99786f2..6fcec38 100644 --- a/projects/aeris-ui/carousel/aeris-carousel.scss +++ b/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; } diff --git a/projects/aeris-ui/cascade-select/aeris-cascade-select.scss b/projects/aeris-ui/cascade-select/aeris-cascade-select.scss index 1b102f6..1edee60 100644 --- a/projects/aeris-ui/cascade-select/aeris-cascade-select.scss +++ b/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; } diff --git a/projects/aeris-ui/chart/aeris-chart.scss b/projects/aeris-ui/chart/aeris-chart.scss index d74d278..40a5afe 100644 --- a/projects/aeris-ui/chart/aeris-chart.scss +++ b/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)); } diff --git a/projects/aeris-ui/checkbox/aeris-checkbox.scss b/projects/aeris-ui/checkbox/aeris-checkbox.scss index 7d2e361..153f56a 100644 --- a/projects/aeris-ui/checkbox/aeris-checkbox.scss +++ b/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}); diff --git a/projects/aeris-ui/color-picker/aeris-color-picker.scss b/projects/aeris-ui/color-picker/aeris-color-picker.scss index 013be18..941a3de 100644 --- a/projects/aeris-ui/color-picker/aeris-color-picker.scss +++ b/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; } diff --git a/projects/aeris-ui/color-picker/aeris-color-picker.ts b/projects/aeris-ui/color-picker/aeris-color-picker.ts index 677199e..676d9e3 100644 --- a/projects/aeris-ui/color-picker/aeris-color-picker.ts +++ b/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('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(''); } diff --git a/projects/aeris-ui/compare/aeris-compare.scss b/projects/aeris-ui/compare/aeris-compare.scss index ff700dc..cd4c122 100644 --- a/projects/aeris-ui/compare/aeris-compare.scss +++ b/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)); diff --git a/projects/aeris-ui/confirm-popup/aeris-confirm-popup.scss b/projects/aeris-ui/confirm-popup/aeris-confirm-popup.scss index 27f996b..97799e4 100644 --- a/projects/aeris-ui/confirm-popup/aeris-confirm-popup.scss +++ b/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)); diff --git a/projects/aeris-ui/context-menu/aeris-context-menu.scss b/projects/aeris-ui/context-menu/aeris-context-menu.scss index 6e8b778..ec2aaba 100644 --- a/projects/aeris-ui/context-menu/aeris-context-menu.scss +++ b/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,7 +185,10 @@ 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 { @@ -189,7 +196,11 @@ aeris-context-menu { 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)); diff --git a/projects/aeris-ui/date-picker/aeris-date-picker.scss b/projects/aeris-ui/date-picker/aeris-date-picker.scss index 2de1261..48043d6 100644 --- a/projects/aeris-ui/date-picker/aeris-date-picker.scss +++ b/projects/aeris-ui/date-picker/aeris-date-picker.scss @@ -56,7 +56,7 @@ align-items: center; padding: 0 3rem 0 var(--aeris-date-picker-padding); border: 1px solid - var(--aeris-date-picker-border, var(--aeris-border-strong, #c7c9c0)); + var(--aeris-date-picker-border, var(--aeris-border, #deddd7)); border-radius: var( --aeris-date-picker-radius, var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem)) @@ -241,7 +241,10 @@ max-width: calc(100vw - 2rem); padding: 0.75rem; border: 1px solid - var(--aeris-date-picker-panel-border, var(--aeris-border, #deddd7)); + var( + --aeris-date-picker-panel-border, + var(--aeris-border) + ); border-radius: var( --aeris-date-picker-panel-radius, var(--aeris-radius-md, 0.6875rem) @@ -254,7 +257,7 @@ --aeris-date-picker-panel-shadow, 0 1rem 2.5rem rgb(31 35 27 / 16%) ); - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; scrollbar-width: thin; } @@ -271,7 +274,7 @@ .aeris-date-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; } @@ -580,7 +583,7 @@ width: 100%; min-height: 2.25rem; padding: 0 0.5rem; - border: 1px solid var(--aeris-date-picker-border, var(--aeris-border-strong, #c7c9c0)); + border: 1px solid var(--aeris-date-picker-border, var(--aeris-border, #deddd7)); border-radius: var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem)); background: var(--aeris-date-picker-background, var(--aeris-surface, #fff)); color: var(--aeris-text, #222222); diff --git a/projects/aeris-ui/dialog/aeris-dialog.scss b/projects/aeris-ui/dialog/aeris-dialog.scss index e1a9ea3..7dfe60f 100644 --- a/projects/aeris-ui/dialog/aeris-dialog.scss +++ b/projects/aeris-ui/dialog/aeris-dialog.scss @@ -78,7 +78,8 @@ max-height: min(var(--aeris-dialog-max-height, calc(100dvh - 2.5rem)), 100%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; - border: 1px solid var(--aeris-dialog-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-dialog-border, var(--aeris-border)); border-radius: var(--aeris-dialog-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-dialog-background, var(--aeris-surface, #fff)); color: inherit; @@ -139,7 +140,8 @@ } .aeris-dialog__header { - border-bottom: 1px solid var(--aeris-dialog-border, var(--aeris-border, #deddd7)); + border-bottom: 1px solid + var(--aeris-dialog-border, var(--aeris-border)); } .aeris-dialog__header[data-draggable] { @@ -151,7 +153,8 @@ .aeris-dialog__footer { justify-content: flex-end; - border-top: 1px solid var(--aeris-dialog-border, var(--aeris-border, #deddd7)); + border-top: 1px solid + var(--aeris-dialog-border, var(--aeris-border)); } .aeris-dialog__title { diff --git a/projects/aeris-ui/divider/aeris-divider.scss b/projects/aeris-ui/divider/aeris-divider.scss index 423f397..896b538 100644 --- a/projects/aeris-ui/divider/aeris-divider.scss +++ b/projects/aeris-ui/divider/aeris-divider.scss @@ -66,7 +66,7 @@ } .aeris-divider__line { - border-color: var(--aeris-divider-border, var(--aeris-border, #deddd7)); + border-color: var(--aeris-divider-border, var(--aeris-border)); } :host([data-orientation='horizontal']) .aeris-divider__line { diff --git a/projects/aeris-ui/drawer/aeris-drawer.scss b/projects/aeris-ui/drawer/aeris-drawer.scss index 6a1ceb2..ff93de0 100644 --- a/projects/aeris-ui/drawer/aeris-drawer.scss +++ b/projects/aeris-ui/drawer/aeris-drawer.scss @@ -65,7 +65,8 @@ max-height: var(--aeris-drawer-max-height, 100dvh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; - border: 1px solid var(--aeris-drawer-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-drawer-border, var(--aeris-border)); background: var(--aeris-drawer-background, var(--aeris-surface, #fff)); color: inherit; box-shadow: var(--aeris-drawer-shadow, 0 1.25rem 3.25rem rgb(31 35 27 / 22%)); @@ -219,12 +220,14 @@ } .aeris-drawer__header { - border-bottom: 1px solid var(--aeris-drawer-border, var(--aeris-border, #deddd7)); + border-bottom: 1px solid + var(--aeris-drawer-border, var(--aeris-border)); } .aeris-drawer__footer { justify-content: flex-end; - border-top: 1px solid var(--aeris-drawer-border, var(--aeris-border, #deddd7)); + border-top: 1px solid + var(--aeris-drawer-border, var(--aeris-border)); } .aeris-drawer__title { diff --git a/projects/aeris-ui/editor/aeris-editor.scss b/projects/aeris-ui/editor/aeris-editor.scss index 9fca81e..f06aff6 100644 --- a/projects/aeris-ui/editor/aeris-editor.scss +++ b/projects/aeris-ui/editor/aeris-editor.scss @@ -249,7 +249,7 @@ inset-inline-start: 0; width: 1rem; height: 1rem; - border: 1px solid var(--aeris-border-strong, var(--aeris-border)); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-xs, 0.25rem); background: var(--aeris-surface); content: ''; diff --git a/projects/aeris-ui/file-upload/aeris-file-upload.scss b/projects/aeris-ui/file-upload/aeris-file-upload.scss index cd252bb..53627fb 100644 --- a/projects/aeris-ui/file-upload/aeris-file-upload.scss +++ b/projects/aeris-ui/file-upload/aeris-file-upload.scss @@ -17,7 +17,11 @@ .aeris-file-upload__surface, .aeris-file-upload__basic { - border: 1px solid var(--aeris-file-upload-border, var(--aeris-border, #d9ddcf)); + border: 1px solid + var( + --aeris-file-upload-border, + var(--aeris-border) + ); border-radius: var(--aeris-file-upload-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-file-upload-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-file-upload-shadow, 0 1px 2px rgb(20 24 18 / 5%)); @@ -38,7 +42,11 @@ justify-content: space-between; gap: 0.75rem; padding: var(--aeris-file-upload-toolbar-padding, 0.875rem); - border-bottom: 1px solid var(--aeris-file-upload-border, var(--aeris-border, #d9ddcf)); + border-bottom: 1px solid + var( + --aeris-file-upload-border, + var(--aeris-border) + ); } .aeris-file-upload__actions { @@ -121,7 +129,7 @@ gap: 0.45rem; margin: 0.875rem; padding: 1.5rem; - border: 1px dashed var(--aeris-file-upload-dropzone-border, var(--aeris-border-strong, var(--aeris-border, #d9ddcf))); + border: 1px dashed var(--aeris-file-upload-dropzone-border, var(--aeris-border, #d9ddcf)); border-radius: var(--aeris-file-upload-dropzone-radius, var(--aeris-radius-lg, 0.875rem)); background: linear-gradient( @@ -181,7 +189,11 @@ gap: 0.75rem; min-width: 0; padding: 0.75rem; - border: 1px solid var(--aeris-file-upload-file-border, var(--aeris-border, #d9ddcf)); + border: 1px solid + var( + --aeris-file-upload-file-border, + var(--aeris-border) + ); border-radius: var(--aeris-file-upload-file-radius, var(--aeris-radius-md, 0.625rem)); background: var(--aeris-file-upload-file-background, var(--aeris-surface, #fff)); } diff --git a/projects/aeris-ui/galleria/aeris-galleria.scss b/projects/aeris-ui/galleria/aeris-galleria.scss index 6afa533..776ca8c 100644 --- a/projects/aeris-ui/galleria/aeris-galleria.scss +++ b/projects/aeris-ui/galleria/aeris-galleria.scss @@ -221,7 +221,8 @@ place-items: center; padding: 0; overflow: hidden; - border: 1px solid var(--aeris-galleria-grid-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-galleria-grid-border, var(--aeris-border)); border-radius: var(--aeris-galleria-grid-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-galleria-stage-background, #11130f); color: #fff; @@ -580,7 +581,8 @@ aspect-ratio: var(--aeris-galleria-thumbnail-aspect-ratio, 16 / 10); place-items: center; padding: var(--aeris-galleria-thumbnail-padding, 0.2rem); - border: 1px solid var(--aeris-galleria-thumbnail-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-galleria-thumbnail-border, var(--aeris-border)); border-radius: var(--aeris-galleria-thumbnail-radius, var(--aeris-radius-md, 0.625rem)); background: var(--aeris-galleria-thumbnail-background, var(--aeris-surface, #fff)); color: var(--aeris-galleria-color, var(--aeris-text, #222222)); @@ -706,7 +708,7 @@ padding: 0; border: 0; border-radius: 999px; - background: var(--aeris-galleria-indicator-background, var(--aeris-border-strong, #c7c9c0)); + background: var(--aeris-galleria-indicator-background, var(--aeris-border, #deddd7)); cursor: pointer; transition: inline-size 180ms ease, @@ -742,7 +744,8 @@ min-block-size: var(--aeris-galleria-empty-min-height, 15rem); place-items: center; padding: 2rem; - border: 1px dashed var(--aeris-galleria-border, var(--aeris-border, #deddd7)); + border: 1px dashed + var(--aeris-galleria-border, var(--aeris-border)); border-radius: var(--aeris-galleria-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-galleria-empty-background, var(--aeris-surface-2, #f6f6f2)); color: var(--aeris-galleria-muted-color, var(--aeris-text-muted, #6d7067)); diff --git a/projects/aeris-ui/icon-field/aeris-icon-field.scss b/projects/aeris-ui/icon-field/aeris-icon-field.scss index 506c7f5..777895c 100644 --- a/projects/aeris-ui/icon-field/aeris-icon-field.scss +++ b/projects/aeris-ui/icon-field/aeris-icon-field.scss @@ -87,7 +87,7 @@ svg.aeris-icon-field__icon > svg { .aeris-icon-field input:not([type='checkbox']):not([type='radio']):not(.aeris-input-text), .aeris-icon-field select, .aeris-icon-field textarea:not(.aeris-textarea) { - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: var(--aeris-radius-sm, 0.4375rem); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); diff --git a/projects/aeris-ui/inplace/aeris-inplace.scss b/projects/aeris-ui/inplace/aeris-inplace.scss index 65b1b9d..fcaaec4 100644 --- a/projects/aeris-ui/inplace/aeris-inplace.scss +++ b/projects/aeris-ui/inplace/aeris-inplace.scss @@ -64,7 +64,11 @@ position: relative; min-inline-size: 0; max-inline-size: 100%; - border: 1px solid var(--aeris-inplace-content-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-inplace-content-border, + var(--aeris-border) + ); border-radius: var(--aeris-inplace-radius, var(--aeris-radius-control, 0.4375rem)); background: var(--aeris-inplace-content-background, var(--aeris-surface, #fff)); box-shadow: var( diff --git a/projects/aeris-ui/input-group/aeris-input-group.scss b/projects/aeris-ui/input-group/aeris-input-group.scss index 9920969..63cfdf3 100644 --- a/projects/aeris-ui/input-group/aeris-input-group.scss +++ b/projects/aeris-ui/input-group/aeris-input-group.scss @@ -67,7 +67,7 @@ flex: 0 0 auto; min-height: var(--aeris-input-group-height); padding-inline: var(--aeris-input-group-addon-padding); - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); background: var(--aeris-surface, #fff); color: var(--aeris-text-muted, var(--aeris-text-2)); font-size: var(--aeris-input-group-font-size); @@ -166,7 +166,7 @@ svg.aeris-input-group__addon { .aeris-input-group > input:not([type='checkbox']):not([type='radio']):not(.aeris-input-text), .aeris-input-group > select, .aeris-input-group > textarea:not(.aeris-textarea) { - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); font: inherit; @@ -204,7 +204,7 @@ svg.aeris-input-group__addon { .aeris-input-group > a { z-index: 2; flex: 0 0 auto; - border-color: var(--aeris-border-strong, #c7c9c0); + border-color: var(--aeris-border, #deddd7); border-radius: 0; } @@ -212,7 +212,7 @@ svg.aeris-input-group__addon { .aeris-input-group__stack > .aeris-button.aeris-button--secondary, .aeris-input-group > button.aeris-button--secondary, .aeris-input-group__stack > button.aeris-button--secondary { - border-color: var(--aeris-border-strong, #c7c9c0); + border-color: var(--aeris-border, #deddd7); } .aeris-input-group .aeris-button:hover:not(:disabled), diff --git a/projects/aeris-ui/input-mask/aeris-input-mask.scss b/projects/aeris-ui/input-mask/aeris-input-mask.scss index 78651c0..783a8ff 100644 --- a/projects/aeris-ui/input-mask/aeris-input-mask.scss +++ b/projects/aeris-ui/input-mask/aeris-input-mask.scss @@ -22,7 +22,7 @@ max-width: 100%; min-height: var(--_height); padding: 0 0.75rem; - 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.4375rem)); outline: 0; background: var(--aeris-surface, #fff); diff --git a/projects/aeris-ui/input-number/aeris-input-number.scss b/projects/aeris-ui/input-number/aeris-input-number.scss index 81b8783..77609fc 100644 --- a/projects/aeris-ui/input-number/aeris-input-number.scss +++ b/projects/aeris-ui/input-number/aeris-input-number.scss @@ -37,7 +37,7 @@ flex: 1 1 auto; gap: 0.375rem; padding-inline: 0.75rem; - 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.4375rem)); background: var(--aeris-surface, #fff); transition: border-color 150ms, background-color 150ms, box-shadow 150ms; @@ -161,7 +161,7 @@ place-items: center; flex: 0 0 auto; padding: 0; - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); background: var(--aeris-surface-2, #f2f0ec); color: var(--aeris-text, #222222); cursor: pointer; diff --git a/projects/aeris-ui/input-otp/aeris-input-otp.scss b/projects/aeris-ui/input-otp/aeris-input-otp.scss index 847feda..8e894d0 100644 --- a/projects/aeris-ui/input-otp/aeris-input-otp.scss +++ b/projects/aeris-ui/input-otp/aeris-input-otp.scss @@ -28,7 +28,7 @@ height: var(--_slot-size); min-width: 0; padding: 0; - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: var(--aeris-radius-sm, 0.4375rem); outline: 0; background: var(--aeris-surface, #fff); diff --git a/projects/aeris-ui/mega-menu/aeris-mega-menu.scss b/projects/aeris-ui/mega-menu/aeris-mega-menu.scss index 04050b4..d05cc8b 100644 --- a/projects/aeris-ui/mega-menu/aeris-mega-menu.scss +++ b/projects/aeris-ui/mega-menu/aeris-mega-menu.scss @@ -15,7 +15,8 @@ gap: var(--aeris-mega-menu-gap, calc(var(--aeris-density-gap, 0.5rem) * 0.5)); margin: 0; padding: var(--aeris-mega-menu-padding, 0.35rem); - border: 1px solid var(--aeris-mega-menu-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-mega-menu-border, var(--aeris-border)); border-radius: var(--aeris-mega-menu-radius, var(--aeris-radius-lg, 1rem)); background: var(--aeris-mega-menu-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-mega-menu-shadow, 0 1rem 2.5rem rgba(0, 0, 0, 0.08)); @@ -159,7 +160,11 @@ inset-inline-start: 0; width: min(var(--aeris-mega-menu-panel-width, 44rem), calc(100vw - 2rem)); padding: var(--aeris-mega-menu-panel-padding, calc(var(--aeris-item-padding-x, 0.75rem) * 1.35)); - border: 1px solid var(--aeris-mega-menu-panel-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-mega-menu-panel-border, + var(--aeris-border) + ); border-radius: var(--aeris-mega-menu-panel-radius, var(--aeris-radius-lg, 1rem)); background: var(--aeris-mega-menu-panel-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-mega-menu-panel-shadow, 0 1.25rem 3rem rgba(0, 0, 0, 0.16)); @@ -218,13 +223,17 @@ .aeris-mega-menu__panel-list .aeris-mega-menu__panel-list { margin-block-start: 0.25rem; padding-inline-start: 0.75rem; - border-inline-start: 1px solid var(--aeris-mega-menu-border, var(--aeris-border, #deddd7)); + border-inline-start: 1px solid + var(--aeris-mega-menu-border, var(--aeris-border)); } .aeris-mega-menu__separator { block-size: 1px; margin: 0.35rem 0.5rem; - background: var(--aeris-mega-menu-border, var(--aeris-border, #deddd7)); + background: var( + --aeris-mega-menu-border, + var(--aeris-border) + ); } :host([data-size='sm']) { diff --git a/projects/aeris-ui/menu/aeris-menu.scss b/projects/aeris-ui/menu/aeris-menu.scss index 11a1c50..9648aac 100644 --- a/projects/aeris-ui/menu/aeris-menu.scss +++ b/projects/aeris-ui/menu/aeris-menu.scss @@ -22,10 +22,11 @@ aeris-menu, max-inline-size: var(--aeris-menu-max-width, min(24rem, 100%)); max-block-size: var(--aeris-menu-max-height, none); overflow: auto; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; scrollbar-width: thin; padding: var(--aeris-menu-padding, 0.375rem); - border: var(--aeris-menu-border-width, 1px) solid var(--aeris-menu-border, var(--aeris-border, #deddd7)); + border: var(--aeris-menu-border-width, 1px) solid + var(--aeris-menu-border, var(--aeris-border)); border-radius: var(--aeris-menu-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-menu-background, var(--aeris-surface, #fff)); color: var(--aeris-menu-color, var(--aeris-text, #222222)); @@ -45,7 +46,7 @@ aeris-menu, .aeris-menu__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; } @@ -233,7 +234,10 @@ aeris-menu, calc(var(--aeris-menu-density-gap) * 0.5) calc(var(--aeris-menu-density-gap) * 0.75) ); - background: var(--aeris-menu-separator-color, var(--aeris-border, #deddd7)); + background: var( + --aeris-menu-separator-color, + var(--aeris-border) + ); } .aeris-menu__group { @@ -246,11 +250,19 @@ aeris-menu, } .aeris-menu__slot--start { - border-block-end: 1px solid var(--aeris-menu-separator-color, var(--aeris-border, #deddd7)); + border-block-end: 1px solid + var( + --aeris-menu-separator-color, + var(--aeris-border) + ); } .aeris-menu__slot--end { - border-block-start: 1px solid var(--aeris-menu-separator-color, var(--aeris-border, #deddd7)); + border-block-start: 1px solid + var( + --aeris-menu-separator-color, + var(--aeris-border) + ); } .aeris-menu__panel[data-size='sm'] { diff --git a/projects/aeris-ui/menubar/aeris-menubar.scss b/projects/aeris-ui/menubar/aeris-menubar.scss index 09ddb80..bf39f9e 100644 --- a/projects/aeris-ui/menubar/aeris-menubar.scss +++ b/projects/aeris-ui/menubar/aeris-menubar.scss @@ -17,7 +17,8 @@ gap: var(--aeris-menubar-gap, calc(var(--aeris-density-gap, 0.5rem) * 0.65)); min-inline-size: 0; padding: var(--aeris-menubar-padding, 0.35rem); - border: 1px solid var(--aeris-menubar-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-menubar-border, var(--aeris-border)); border-radius: var(--aeris-menubar-radius, var(--aeris-radius-lg, 1rem)); background: var(--aeris-menubar-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-menubar-shadow, 0 1rem 2.5rem rgba(0, 0, 0, 0.08)); @@ -187,7 +188,11 @@ min-inline-size: var(--aeris-menubar-submenu-width, 15rem); max-inline-size: min(var(--aeris-menubar-submenu-max-width, 22rem), calc(100vw - 2rem)); padding: var(--aeris-menubar-submenu-padding, 0.35rem); - border: 1px solid var(--aeris-menubar-submenu-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-menubar-submenu-border, + var(--aeris-border) + ); border-radius: var(--aeris-menubar-submenu-radius, var(--aeris-radius-lg, 1rem)); background: var(--aeris-menubar-submenu-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-menubar-submenu-shadow, 0 1.25rem 3rem rgba(0, 0, 0, 0.16)); @@ -206,7 +211,10 @@ .aeris-menubar__separator { block-size: 1px; margin: 0.35rem 0.5rem; - background: var(--aeris-menubar-border, var(--aeris-border, #deddd7)); + background: var( + --aeris-menubar-border, + var(--aeris-border) + ); } .aeris-menubar__toggle { diff --git a/projects/aeris-ui/meter-group/aeris-meter-group.scss b/projects/aeris-ui/meter-group/aeris-meter-group.scss index 399571d..16b340b 100644 --- a/projects/aeris-ui/meter-group/aeris-meter-group.scss +++ b/projects/aeris-ui/meter-group/aeris-meter-group.scss @@ -46,7 +46,8 @@ block-size: var(--_aeris-meter-group-track-size); display: flex; overflow: hidden; - border: 1px solid var(--aeris-meter-group-track-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-meter-group-track-border, var(--aeris-border)); border-radius: var(--aeris-meter-group-radius, var(--aeris-radius-control, 0.4375rem)); background: var(--aeris-meter-group-track-background, var(--aeris-surface-2, #f2f0ec)); box-shadow: var(--aeris-meter-group-track-shadow, inset 0 0 0 1px rgb(0 0 0 / 2%)); @@ -85,7 +86,7 @@ .aeris-meter-group__segment[data-tone='secondary'], .aeris-meter-group__marker[data-tone='secondary'] { - background-color: var(--aeris-surface-3, var(--aeris-border-strong, #c7c9c0)); + background-color: var(--aeris-surface-3, var(--aeris-border, #deddd7)); } .aeris-meter-group__segment[data-tone='success'], diff --git a/projects/aeris-ui/multi-select/aeris-multi-select.scss b/projects/aeris-ui/multi-select/aeris-multi-select.scss index cd63e86..43a874f 100644 --- a/projects/aeris-ui/multi-select/aeris-multi-select.scss +++ b/projects/aeris-ui/multi-select/aeris-multi-select.scss @@ -3,7 +3,7 @@ :host{--_aeris-chevron-mask:var(--aeris-icon-chevron,url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20d=%27M7%209.5%2012%2014.5%2017%209.5%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272.4%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E"));display:inline-block;min-width:14rem;max-width:100%;font:inherit;color:var(--aeris-text,#222222)} :host([data-fluid]){width:100%}.aeris-multi-select{--_height:var(--aeris-control-height,2.625rem);--_font:.875rem;--_gap:var(--aeris-density-gap,.5rem);--_padding-x:var(--aeris-control-padding-x,.75rem);position:relative;width:100%} .aeris-multi-select[data-size=xs]{--_height:1.875rem;--_font:.75rem}.aeris-multi-select[data-size=sm]{--_height:2.25rem;--_font:.8125rem}.aeris-multi-select[data-size=lg]{--_height:3rem;--_font:.9375rem} -.aeris-multi-select__control{position:relative}.aeris-multi-select__trigger{width:100%;min-height:var(--_height);display:flex;align-items:center;padding:calc(var(--aeris-item-padding-y,.5rem) * .6) 3rem calc(var(--aeris-item-padding-y,.5rem) * .6) var(--_padding-x);border:1px solid var(--aeris-border-strong,#c7c9c0);border-radius:var(--aeris-radius-control,var(--aeris-radius-sm,.4375rem));background:var(--aeris-surface,#fff);color:inherit;font:inherit;font-size:var(--_font);text-align:left;cursor:pointer} +.aeris-multi-select__control{position:relative}.aeris-multi-select__trigger{width:100%;min-height:var(--_height);display:flex;align-items:center;padding:calc(var(--aeris-item-padding-y,.5rem) * .6) 3rem calc(var(--aeris-item-padding-y,.5rem) * .6) var(--_padding-x);border:1px solid var(--aeris-border,#deddd7);border-radius:var(--aeris-radius-control,var(--aeris-radius-sm,.4375rem));background:var(--aeris-surface,#fff);color:inherit;font:inherit;font-size:var(--_font);text-align:left;cursor:pointer} .aeris-multi-select__control:has(.aeris-multi-select__clear) .aeris-multi-select__trigger{padding-right:4.5rem}.aeris-multi-select[data-appearance=filled] .aeris-multi-select__trigger{border-color:transparent;background:var(--aeris-surface-2,#f2f0ec)} .aeris-multi-select__trigger:hover,.aeris-multi-select[data-open] .aeris-multi-select__trigger{border-color:var(--aeris-focus,#{aeris-fallbacks.$focus})}.aeris-multi-select__trigger:focus-visible{outline:0;border-color:var(--aeris-focus,#{aeris-fallbacks.$focus});box-shadow:0 0 0 3px color-mix(in srgb,var(--aeris-focus,#{aeris-fallbacks.$focus}) 22%,transparent)} .aeris-multi-select[data-invalid] .aeris-multi-select__trigger{border-color:var(--aeris-danger,#c81e2a)}.aeris-multi-select[data-disabled]{opacity:var(--aeris-disabled-opacity,.5)} @@ -12,14 +12,14 @@ .aeris-multi-select__chip-remove{width:1rem;height:1rem;display:grid;place-items:center;padding:0;border:0;border-radius:var(--aeris-radius-sm,.4375rem);background:transparent;color:inherit;cursor:pointer}.aeris-multi-select__chip-remove:hover{background:var(--aeris-surface-2,#f2f0ec)}.aeris-multi-select__chip-remove span,.aeris-multi-select__clear span,.aeris-multi-select__filter-clear span{width:var(--aeris-icon-size,1rem);height:var(--aeris-icon-size,1rem);background:currentColor;-webkit-mask:var(--aeris-icon-close) center/100% 100% no-repeat;mask:var(--aeris-icon-close) center/100% 100% no-repeat} .aeris-multi-select__clear{position:absolute;z-index:2;top:50%;right:2.1rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;padding:0;border:0;border-radius:var(--aeris-radius-sm,.4375rem);background:transparent;color:var(--aeris-text-2,#555555);transform:translateY(-50%);cursor:pointer}.aeris-multi-select__clear:hover{background:var(--aeris-surface-2,#f2f0ec)} .aeris-multi-select__chevron{position:absolute;top:50%;right:var(--_padding-x);width:1rem;height:1rem;color:var(--aeris-text-2,#555555);transform:translateY(-50%);pointer-events:none}.aeris-multi-select__chevron:before{position:absolute;top:50%;left:50%;width:1rem;height:1rem;background:currentColor;content:"";transform:translate(-50%,-50%);-webkit-mask:var(--_aeris-chevron-mask) center/100% 100% no-repeat;mask:var(--_aeris-chevron-mask) center/100% 100% no-repeat}.aeris-multi-select[data-open] .aeris-multi-select__chevron:before{transform:translate(-50%,-50%) rotate(180deg)} -.aeris-multi-select__dismiss{position:fixed;z-index:89;inset:0;width:100vw;height:100vh;height:100dvh;padding:0;border:0;background:transparent}.aeris-multi-select__panel{position:absolute;z-index:90;top:calc(100% + .4375rem);right:0;left:0;min-width:100%;max-width:calc(100vw - 2rem);padding:calc(var(--_gap) * .75);border:1px solid var(--aeris-border,#deddd7);border-radius:var(--aeris-radius-md,.6875rem);background:var(--aeris-surface,#fff);box-shadow:0 1rem 2.5rem rgb(31 35 27/16%)} -.aeris-multi-select__header,.aeris-multi-select__footer{padding:var(--aeris-item-padding-x,.75rem);border-color:var(--aeris-border,#deddd7);font-size:.8125rem}.aeris-multi-select__header{border-bottom:1px solid}.aeris-multi-select__footer{border-top:1px solid} +.aeris-multi-select__dismiss{position:fixed;z-index:89;inset:0;width:100vw;height:100vh;height:100dvh;padding:0;border:0;background:transparent}.aeris-multi-select__panel{position:absolute;z-index:90;top:calc(100% + .4375rem);right:0;left:0;min-width:100%;max-width:calc(100vw - 2rem);padding:calc(var(--_gap) * .75);border:1px solid var(--aeris-border);border-radius:var(--aeris-radius-md,.6875rem);background:var(--aeris-surface,#fff);box-shadow:0 1rem 2.5rem rgb(31 35 27/16%)} +.aeris-multi-select__header,.aeris-multi-select__footer{padding:var(--aeris-item-padding-x,.75rem);border-color:var(--aeris-border);font-size:.8125rem}.aeris-multi-select__header{border-bottom:1px solid}.aeris-multi-select__footer{border-top:1px solid} .aeris-multi-select__select-all{width:100%;min-height:var(--aeris-item-height,2.5rem);display:flex;align-items:center;gap:var(--_gap);padding:var(--aeris-item-padding-y,.5rem) var(--aeris-item-padding-x,.75rem);border:0;border-radius:var(--aeris-radius-sm,.4375rem);background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}.aeris-multi-select__select-all:hover{background:var(--aeris-interactive-hover,var(--aeris-surface-2,#f2f0ec))}.aeris-multi-select__select-all small{margin-left:auto;color:var(--aeris-text-2,#555555)} -.aeris-multi-select__filter-wrap{position:relative;min-height:max(2rem,calc(var(--_height) - .25rem));display:flex;align-items:center;gap:var(--_gap);margin:calc(var(--_gap) * .5) 0;padding:0 2.5rem 0 var(--aeris-item-padding-x,.75rem);border:1px solid var(--aeris-border-strong,#c7c9c0);border-radius:.5rem}.aeris-multi-select__filter-wrap:focus-within{border-color:var(--aeris-focus,#{aeris-fallbacks.$focus});box-shadow:0 0 0 2px color-mix(in srgb,var(--aeris-focus,#{aeris-fallbacks.$focus}) 18%,transparent)} +.aeris-multi-select__filter-wrap{position:relative;min-height:max(2rem,calc(var(--_height) - .25rem));display:flex;align-items:center;gap:var(--_gap);margin:calc(var(--_gap) * .5) 0;padding:0 2.5rem 0 var(--aeris-item-padding-x,.75rem);border:1px solid var(--aeris-border,#deddd7);border-radius:.5rem}.aeris-multi-select__filter-wrap:focus-within{border-color:var(--aeris-focus,#{aeris-fallbacks.$focus});box-shadow:0 0 0 2px color-mix(in srgb,var(--aeris-focus,#{aeris-fallbacks.$focus}) 18%,transparent)} .aeris-multi-select__search-mark{width:var(--aeris-icon-size,1rem);height:var(--aeris-icon-size,1rem);flex:0 0 auto;background:var(--aeris-text-2,#555555);-webkit-mask:var(--aeris-icon-search) center/100% 100% no-repeat;mask:var(--aeris-icon-search) center/100% 100% no-repeat} .aeris-multi-select__filter{min-width:0;width:100%;min-height:max(1.75rem,calc(var(--_height) - .375rem));padding:0;border:0;outline:0;background:transparent;color:inherit;font:inherit}.aeris-multi-select__filter-clear{position:absolute;top:50%;right:.5rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;padding:0;border:0;background:transparent;color:var(--aeris-text-2,#555555);transform:translateY(-50%)} .aeris-multi-select__list{max-height:var(--aeris-multi-select-panel-max-height,18rem);overflow:auto;overscroll-behavior:contain}.aeris-multi-select__group{padding:var(--aeris-item-padding-y,.5rem) var(--aeris-item-padding-x,.75rem) calc(var(--aeris-item-padding-y,.5rem) * .6);color:var(--aeris-text-2,#555555);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em} .aeris-multi-select__option{min-height:var(--aeris-item-height,2.5rem);display:flex;align-items:center;gap:var(--_gap);padding:var(--aeris-item-padding-y,.5rem) var(--aeris-item-padding-x,.75rem);border-radius:var(--aeris-radius-sm,.4375rem);color:var(--aeris-text-2,#555555);font-size:.8125rem;cursor:pointer}.aeris-multi-select__option[data-active]{background:var(--aeris-interactive-hover,var(--aeris-surface-2,#f2f0ec));color:var(--aeris-text,#222222)}.aeris-multi-select__option[data-selected]{color:var(--aeris-text,#222222);font-weight:650}.aeris-multi-select__option[data-disabled]{opacity:.45;cursor:not-allowed} -.aeris-multi-select__checkbox{width:1rem;height:1rem;display:grid;place-items:center;flex:0 0 auto;border:1.5px solid var(--aeris-border-strong,#c7c9c0);border-radius:var(--aeris-checkbox-radius,.3125rem);background:var(--aeris-surface,#fff);color:var(--aeris-on-primary,#{aeris-fallbacks.$on-primary})}.aeris-multi-select__checkbox[data-checked],.aeris-multi-select__checkbox[data-mixed]{border-color:var(--aeris-primary,#{aeris-fallbacks.$primary});background:var(--aeris-primary,#{aeris-fallbacks.$primary})}.aeris-multi-select__checkbox span{position:relative;top:-.05rem;width:52%;height:30%;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) scale(.7);opacity:0}.aeris-multi-select__checkbox[data-checked] span{opacity:1;transform:rotate(-45deg) scale(1)}.aeris-multi-select__checkbox[data-mixed] span{top:0;width:56%;height:2px;border:0;border-radius:999px;background:currentColor;transform:none;opacity:1} -.aeris-multi-select__option-content{min-width:0;display:grid;gap:calc(var(--_gap) * .2)}.aeris-multi-select__option-content small{color:var(--aeris-text-2,#555555);font-size:.75rem;font-weight:400}.aeris-multi-select__message,.aeris-multi-select__limit{padding:calc(var(--aeris-item-padding-y,.5rem) * 1.5) var(--aeris-item-padding-x,.75rem);color:var(--aeris-text-2,#555555);font-size:.8125rem}.aeris-multi-select__limit{border-top:1px solid var(--aeris-border,#deddd7)} +.aeris-multi-select__checkbox{width:1rem;height:1rem;display:grid;place-items:center;flex:0 0 auto;border:1.5px solid var(--aeris-border,#deddd7);border-radius:var(--aeris-checkbox-radius,.3125rem);background:var(--aeris-surface,#fff);color:var(--aeris-on-primary,#{aeris-fallbacks.$on-primary})}.aeris-multi-select__checkbox[data-checked],.aeris-multi-select__checkbox[data-mixed]{border-color:var(--aeris-primary,#{aeris-fallbacks.$primary});background:var(--aeris-primary,#{aeris-fallbacks.$primary})}.aeris-multi-select__checkbox span{position:relative;top:-.05rem;width:52%;height:30%;border-inline-start:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg) scale(.7);opacity:0}.aeris-multi-select__checkbox[data-checked] span{opacity:1;transform:rotate(-45deg) scale(1)}.aeris-multi-select__checkbox[data-mixed] span{top:0;width:56%;height:2px;border:0;border-radius:999px;background:currentColor;transform:none;opacity:1} +.aeris-multi-select__option-content{min-width:0;display:grid;gap:calc(var(--_gap) * .2)}.aeris-multi-select__option-content small{color:var(--aeris-text-2,#555555);font-size:.75rem;font-weight:400}.aeris-multi-select__message,.aeris-multi-select__limit{padding:calc(var(--aeris-item-padding-y,.5rem) * 1.5) var(--aeris-item-padding-x,.75rem);color:var(--aeris-text-2,#555555);font-size:.8125rem}.aeris-multi-select__limit{border-top:1px solid var(--aeris-border)} .aeris-multi-select__spinner{width:1rem;height:1rem;display:inline-block;margin-right:.4rem;border:2px solid var(--aeris-border,#deddd7);border-top-color:var(--aeris-primary,#{aeris-fallbacks.$primary});border-radius:50%;animation:aeris-ms-spin .7s linear infinite}@keyframes aeris-ms-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.aeris-multi-select__spinner{animation:none}}@media(max-width:32rem){:host{min-width:0}.aeris-multi-select__panel{right:auto;width:min(22rem,calc(100vw - 2rem))}} diff --git a/projects/aeris-ui/order-list/aeris-order-list.scss b/projects/aeris-ui/order-list/aeris-order-list.scss index c90a5ad..aaa3117 100644 --- a/projects/aeris-ui/order-list/aeris-order-list.scss +++ b/projects/aeris-ui/order-list/aeris-order-list.scss @@ -12,7 +12,7 @@ width: max-content; min-width: min(100%, 22rem); - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-lg, 0.875rem); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); @@ -28,7 +28,7 @@ --aeris-order-list-header-padding, calc(var(--aeris-item-padding-y, 0.5rem) * 1.4) var(--aeris-item-padding-x, 0.75rem) ); - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); background: var(--aeris-surface-2, #f2f0ec); color: var(--aeris-text, #222222); font-size: 0.875rem; @@ -45,7 +45,7 @@ align-content: center; gap: calc(var(--aeris-order-list-density-gap) * 0.75); padding: var(--aeris-order-list-controls-padding, var(--aeris-item-padding-x, 0.75rem)); - border-right: 1px solid var(--aeris-border, #deddd7); + border-right: 1px solid var(--aeris-border); background: color-mix(in srgb, var(--aeris-surface-2, #f2f0ec) 54%, transparent); } @@ -183,6 +183,6 @@ grid-template-columns: repeat(4, auto); justify-content: start; border-right: 0; - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); } } diff --git a/projects/aeris-ui/organization-chart/aeris-organization-chart.scss b/projects/aeris-ui/organization-chart/aeris-organization-chart.scss index bc2ad99..a88b093 100644 --- a/projects/aeris-ui/organization-chart/aeris-organization-chart.scss +++ b/projects/aeris-ui/organization-chart/aeris-organization-chart.scss @@ -69,7 +69,11 @@ display: grid; gap: 0.25rem; padding: var(--aeris-organization-chart-node-padding, 0.625rem 0.75rem); - border: 1px solid var(--aeris-organization-chart-node-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-organization-chart-node-border, + var(--aeris-border) + ); border-radius: var(--aeris-organization-chart-node-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-organization-chart-node-background, var(--aeris-surface, #fff)); color: var(--aeris-organization-chart-node-color, var(--aeris-text, #222222)); @@ -170,7 +174,10 @@ left: 50%; width: 1px; height: calc(var(--aeris-organization-chart-level-gap, 2rem) / 2); - background: var(--aeris-organization-chart-connector, var(--aeris-border, #deddd7)); + background: var( + --aeris-organization-chart-connector, + var(--aeris-border) + ); content: ''; } @@ -179,7 +186,10 @@ position: absolute; top: calc(var(--aeris-organization-chart-level-gap, 2rem) / 2); height: 1px; - background: var(--aeris-organization-chart-connector, var(--aeris-border, #deddd7)); + background: var( + --aeris-organization-chart-connector, + var(--aeris-border) + ); content: ''; } @@ -209,7 +219,10 @@ left: 50%; width: 1px; height: calc(var(--aeris-organization-chart-level-gap, 2rem) / 2); - background: var(--aeris-organization-chart-connector, var(--aeris-border, #deddd7)); + background: var( + --aeris-organization-chart-connector, + var(--aeris-border) + ); content: ''; } @@ -217,7 +230,7 @@ min-height: 10rem; display: grid; place-items: center; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-lg, 0.875rem); background: var(--aeris-surface, #fff); color: var(--aeris-text-muted, #6d7068); diff --git a/projects/aeris-ui/paginator/aeris-paginator.scss b/projects/aeris-ui/paginator/aeris-paginator.scss index bf6cde8..6890c41 100644 --- a/projects/aeris-ui/paginator/aeris-paginator.scss +++ b/projects/aeris-ui/paginator/aeris-paginator.scss @@ -43,6 +43,7 @@ select { button { min-width: max(2rem, calc(var(--aeris-control-height, 2.625rem) - 0.5rem)); padding: 0 calc(var(--aeris-control-padding-x, 0.75rem) * 0.75); + border-color: var(--aeris-border); font-weight: 700; cursor: pointer; transition: @@ -188,7 +189,7 @@ button:focus-visible, right: 0; min-width: 5.75rem; padding: calc(var(--aeris-density-gap, 0.5rem) * 0.7); - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-md, 0.6875rem); background: var(--aeris-surface, #fff); box-shadow: 0 1rem 2.5rem rgb(31 35 27 / 16%); diff --git a/projects/aeris-ui/panel/aeris-panel.scss b/projects/aeris-ui/panel/aeris-panel.scss index 9050fdd..05f9bc4 100644 --- a/projects/aeris-ui/panel/aeris-panel.scss +++ b/projects/aeris-ui/panel/aeris-panel.scss @@ -12,7 +12,8 @@ aeris-panel { --_header-padding-inline: var(--aeris-panel-header-padding-inline, 1.125rem); overflow: hidden; - border: 1px solid var(--aeris-panel-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-panel-border, var(--aeris-border)); border-radius: var(--aeris-panel-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-panel-background, var(--aeris-surface, #fff)); color: var(--aeris-panel-color, var(--aeris-text, #222222)); @@ -60,7 +61,11 @@ aeris-panel { gap: var(--aeris-panel-header-gap, 0.75rem); min-inline-size: 0; padding: var(--_header-padding-block) var(--_header-padding-inline); - border-block-end: 1px solid var(--aeris-panel-header-border, var(--aeris-border, #deddd7)); + border-block-end: 1px solid + var( + --aeris-panel-header-border, + var(--aeris-border) + ); background: var(--aeris-panel-header-background, color-mix(in srgb, var(--aeris-surface-2, #f2f0ec) 58%, transparent)); } @@ -199,7 +204,11 @@ aeris-panel { flex-wrap: wrap; gap: var(--aeris-panel-footer-gap, 0.625rem); padding: var(--aeris-panel-footer-padding-block, 0.875rem) var(--_padding-inline); - border-block-start: 1px solid var(--aeris-panel-footer-border, var(--aeris-border, #deddd7)); + border-block-start: 1px solid + var( + --aeris-panel-footer-border, + var(--aeris-border) + ); background: var(--aeris-panel-footer-background, transparent); } diff --git a/projects/aeris-ui/password/aeris-password.scss b/projects/aeris-ui/password/aeris-password.scss index fd75d27..3ed004b 100644 --- a/projects/aeris-ui/password/aeris-password.scss +++ b/projects/aeris-ui/password/aeris-password.scss @@ -45,7 +45,7 @@ width: 100%; height: var(--_height); padding: 0.5rem 5rem 0.5rem 0.75rem; - 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.4375rem)); outline: 0; background: var(--aeris-surface, #fff); @@ -154,7 +154,7 @@ gap: 0.75rem; min-width: min(19rem, calc(100vw - 2rem)); padding: 0.875rem; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-md, 0.6875rem); background: var(--aeris-surface, #fff); box-shadow: 0 1rem 2.5rem rgb(31 35 27 / 16%); @@ -226,7 +226,7 @@ width: 0.875rem; height: 0.875rem; flex: 0 0 auto; - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: 50%; } diff --git a/projects/aeris-ui/pick-list/aeris-pick-list.scss b/projects/aeris-ui/pick-list/aeris-pick-list.scss index 109c97f..6ff29e0 100644 --- a/projects/aeris-ui/pick-list/aeris-pick-list.scss +++ b/projects/aeris-ui/pick-list/aeris-pick-list.scss @@ -23,7 +23,8 @@ min-width: 0; display: flex; flex-direction: column; - border: 1px solid var(--aeris-pick-list-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-pick-list-border, var(--aeris-border)); border-radius: var(--aeris-pick-list-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-pick-list-background, var(--aeris-surface, #fff)); overflow: hidden; @@ -39,7 +40,7 @@ --aeris-pick-list-header-padding, var(--aeris-item-padding-y, 0.5rem) var(--aeris-item-padding-x, 0.75rem) ); - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); background: var(--aeris-surface-2, #f2f0ec); } @@ -64,7 +65,7 @@ position: relative; display: block; padding: var(--aeris-item-padding-y, 0.5rem); - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); } .aeris-pick-list__filter input { @@ -72,7 +73,7 @@ height: var(--aeris-pick-list-filter-height, var(--aeris-control-height, 2.625rem)); padding: 0 var(--aeris-control-padding-x, 0.75rem) 0 calc(var(--aeris-control-padding-x, 0.75rem) + 1.375rem); - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: var(--aeris-radius-sm, 0.5rem); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); @@ -216,13 +217,13 @@ .aeris-pick-list__reorder-controls { align-self: stretch; padding: var(--aeris-pick-list-controls-padding, var(--aeris-item-padding-y, 0.5rem)); - border-right: 1px solid var(--aeris-border, #deddd7); + border-right: 1px solid var(--aeris-border); background: color-mix(in srgb, var(--aeris-surface-2, #f2f0ec) 54%, transparent); } .aeris-pick-list__pane-body[data-side='target'] .aeris-pick-list__reorder-controls { border-right: 0; - border-left: 1px solid var(--aeris-border, #deddd7); + border-left: 1px solid var(--aeris-border); } .aeris-pick-list__transfer-controls { @@ -237,7 +238,7 @@ display: grid; place-items: center; padding: 0; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm, 0.5rem); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); @@ -323,7 +324,7 @@ justify-content: start; border-right: 0; border-left: 0; - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); } } diff --git a/projects/aeris-ui/popover/aeris-popover.scss b/projects/aeris-ui/popover/aeris-popover.scss index 88f61bd..3a97850 100644 --- a/projects/aeris-ui/popover/aeris-popover.scss +++ b/projects/aeris-ui/popover/aeris-popover.scss @@ -19,7 +19,8 @@ max-width: var(--aeris-popover-max-width, calc(100vw - 1rem)); display: grid; gap: 0; - border: 1px solid var(--aeris-popover-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-popover-border, var(--aeris-border)); border-radius: var(--aeris-popover-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-popover-background, var(--aeris-surface, #fff)); color: var(--aeris-popover-color, var(--aeris-text, #222222)); diff --git a/projects/aeris-ui/progress-bar/aeris-progress-bar.scss b/projects/aeris-ui/progress-bar/aeris-progress-bar.scss index 1abb332..d4a8def 100644 --- a/projects/aeris-ui/progress-bar/aeris-progress-bar.scss +++ b/projects/aeris-ui/progress-bar/aeris-progress-bar.scss @@ -20,7 +20,7 @@ } :host([data-severity='secondary']) { - --_accent: var(--aeris-surface-3, var(--aeris-border-strong, #c7c9c0)); + --_accent: var(--aeris-surface-3, var(--aeris-border, #deddd7)); --_on-accent: var(--aeris-text, #222222); } @@ -150,7 +150,7 @@ .aeris-progress-bar__step-marker { inline-size: var(--aeris-progress-bar-step-marker-size, 0.75rem); block-size: var(--aeris-progress-bar-step-marker-size, 0.75rem); - border: 2px solid var(--aeris-progress-bar-step-border, var(--aeris-border-strong, #c7c9c0)); + border: 2px solid var(--aeris-progress-bar-step-border, var(--aeris-border, #deddd7)); border-radius: 999px; background: var(--aeris-progress-bar-step-background, var(--aeris-surface, #fff)); box-shadow: 0 0 0 2px var(--aeris-progress-bar-step-ring, var(--aeris-surface, #fff)); diff --git a/projects/aeris-ui/progress-spinner/aeris-progress-spinner.scss b/projects/aeris-ui/progress-spinner/aeris-progress-spinner.scss index 4eb9c51..59df0ea 100644 --- a/projects/aeris-ui/progress-spinner/aeris-progress-spinner.scss +++ b/projects/aeris-ui/progress-spinner/aeris-progress-spinner.scss @@ -30,7 +30,7 @@ } :host([data-tone='secondary']) { - --_aeris-progress-spinner-color: var(--aeris-surface-3, var(--aeris-border-strong, #c7c9c0)); + --_aeris-progress-spinner-color: var(--aeris-surface-3, var(--aeris-border, #deddd7)); } :host([data-tone='success']) { diff --git a/projects/aeris-ui/radio-button/aeris-radio-button.scss b/projects/aeris-ui/radio-button/aeris-radio-button.scss index ed65573..acebd7d 100644 --- a/projects/aeris-ui/radio-button/aeris-radio-button.scss +++ b/projects/aeris-ui/radio-button/aeris-radio-button.scss @@ -79,7 +79,7 @@ height: var(--aeris-radio-size); box-sizing: border-box; border: 1.5px solid - var(--aeris-radio-border, var(--aeris-border-strong, #aeb2a8)); + var(--aeris-radio-border, var(--aeris-border, #deddd7)); border-radius: 50%; background: var(--aeris-radio-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-radio-shadow, none); @@ -150,7 +150,7 @@ .aeris-radio[data-disabled='true']:hover .aeris-radio__control { border-color: var( --aeris-radio-border, - var(--aeris-border-strong, #aeb2a8) + var(--aeris-border, #deddd7) ); } diff --git a/projects/aeris-ui/scroll-panel/aeris-scroll-panel.scss b/projects/aeris-ui/scroll-panel/aeris-scroll-panel.scss index 3571acc..922369b 100644 --- a/projects/aeris-ui/scroll-panel/aeris-scroll-panel.scss +++ b/projects/aeris-ui/scroll-panel/aeris-scroll-panel.scss @@ -13,7 +13,8 @@ position: relative; min-inline-size: 0; overflow: hidden; - border: var(--aeris-scroll-panel-border-width, 1px) solid var(--aeris-scroll-panel-border, var(--aeris-border, #deddd7)); + border: var(--aeris-scroll-panel-border-width, 1px) solid + var(--aeris-scroll-panel-border, var(--aeris-border)); border-radius: var(--aeris-scroll-panel-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-scroll-panel-background, var(--aeris-surface, #fff)); color: var(--aeris-scroll-panel-color, var(--aeris-text, #222222)); diff --git a/projects/aeris-ui/select/aeris-select.scss b/projects/aeris-ui/select/aeris-select.scss index 0fff776..cd6f60b 100644 --- a/projects/aeris-ui/select/aeris-select.scss +++ b/projects/aeris-ui/select/aeris-select.scss @@ -70,7 +70,7 @@ gap: calc(var(--aeris-select-density-gap) + 0.25rem); padding: 0 2.75rem 0 var(--aeris-select-padding); border: 1px solid - var(--aeris-select-border, var(--aeris-border-strong, #c7c9c0)); + var(--aeris-select-border, var(--aeris-border, #deddd7)); border-radius: var( --aeris-select-radius, var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem)) @@ -251,7 +251,11 @@ min-width: 100%; max-width: calc(100vw - 2rem); padding: calc(var(--aeris-select-density-gap) * 0.75); - border: 1px solid var(--aeris-select-panel-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-select-panel-border, + var(--aeris-border) + ); border-radius: var(--aeris-select-panel-radius, var(--aeris-radius-md, 0.6875rem)); background: var(--aeris-select-panel-background, var(--aeris-surface, #fff)); box-shadow: var( @@ -268,7 +272,7 @@ gap: var(--aeris-select-density-gap); margin-bottom: calc(var(--aeris-select-density-gap) * 0.5); padding: 0 var(--aeris-select-option-padding-x); - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: calc(var(--aeris-select-panel-radius, 0.6875rem) - 0.1875rem); background: var(--aeris-select-background, var(--aeris-surface, #fff)); } @@ -371,7 +375,7 @@ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; } .aeris-select__virtual-content { diff --git a/projects/aeris-ui/slider/aeris-slider.scss b/projects/aeris-ui/slider/aeris-slider.scss index da3d355..68749d3 100644 --- a/projects/aeris-ui/slider/aeris-slider.scss +++ b/projects/aeris-ui/slider/aeris-slider.scss @@ -228,7 +228,7 @@ width: 0.25rem; height: 0.25rem; border-radius: 50%; - background: var(--aeris-slider-tick, var(--aeris-border-strong, #c7c9c0)); + background: var(--aeris-slider-tick, var(--aeris-border, #deddd7)); transform: translate(-50%, -50%); } diff --git a/projects/aeris-ui/splitter/aeris-splitter.scss b/projects/aeris-ui/splitter/aeris-splitter.scss index 9eb2405..228d3fc 100644 --- a/projects/aeris-ui/splitter/aeris-splitter.scss +++ b/projects/aeris-ui/splitter/aeris-splitter.scss @@ -19,7 +19,8 @@ block-size: 100%; min-inline-size: 0; min-block-size: 0; - border: var(--aeris-splitter-border-width, 1px) solid var(--aeris-splitter-border, var(--aeris-border, #deddd7)); + border: var(--aeris-splitter-border-width, 1px) solid + var(--aeris-splitter-border, var(--aeris-border)); border-radius: var(--aeris-splitter-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-splitter-background, var(--aeris-surface, #fff)); color: var(--aeris-splitter-color, var(--aeris-text, #222222)); @@ -107,7 +108,10 @@ display: none; margin: auto; border-radius: 999px; - background: var(--aeris-splitter-divider-color, color-mix(in srgb, var(--aeris-border, #deddd7) 86%, transparent)); + background: var( + --aeris-splitter-divider-color, + var(--aeris-border, color-mix(in srgb, var(--aeris-border, #deddd7) 86%, transparent)) + ); content: ''; } diff --git a/projects/aeris-ui/src/lib/testing/aeris-color-stability.spec.ts b/projects/aeris-ui/src/lib/testing/aeris-color-stability.spec.ts index 7f6b103..b600866 100644 --- a/projects/aeris-ui/src/lib/testing/aeris-color-stability.spec.ts +++ b/projects/aeris-ui/src/lib/testing/aeris-color-stability.spec.ts @@ -17,27 +17,27 @@ interface ColorStabilityFixture { const COLOR_STABILITY_FIXTURES: Readonly> = { earth: { input: AERIS_THEME_PRESETS.earth, - light: 'e2dacffcf1c50845', - dark: '64317dd914e751f1', - tokenCount: 99, + light: 'cf76d8b1679cac49', + dark: 'e15b95020408fc7d', + tokenCount: 99, }, coastal: { input: AERIS_THEME_PRESETS.coastal, - light: 'a23e4d2863f0c302', - dark: '777bf42ed13fe0a2', - tokenCount: 99, + light: '7c635afef3087c0b', + dark: 'ed1c0168a791edc7', + tokenCount: 99, }, orchid: { input: AERIS_THEME_PRESETS.orchid, - light: '1e814f7cab7d0dc7', - dark: 'e0e4e2c89747ea03', - tokenCount: 99, + light: 'b15d6fd0508d72aa', + dark: 'cfa23ee739c5693d', + tokenCount: 99, }, monochrome: { input: AERIS_THEME_PRESETS.monochrome, - light: '713c6a1c71c17ba7', - dark: '201472cca3b3a642', - tokenCount: 99, + light: 'fddbb1091ffebc75', + dark: '1d03f9ab6c11bf2c', + tokenCount: 99, }, customOcean: { input: { @@ -49,9 +49,9 @@ const COLOR_STABILITY_FIXTURES: Readonly> contrast: '#173a4a', }, }, - light: 'b5fd89406372a2e0', - dark: '36ea54e6c9d722bb', - tokenCount: 99, + light: '2d12d685313b5ff2', + dark: '9029f0c9d42a7b05', + tokenCount: 99, }, customWarm: { input: { @@ -63,9 +63,9 @@ const COLOR_STABILITY_FIXTURES: Readonly> contrast: '#34221d', }, }, - light: '5e274a0907a499fe', - dark: '6c3cf926290f9a76', - tokenCount: 99, + light: '468c26584772ea4f', + dark: '45e2ce0a23cad4aa', + tokenCount: 99, }, }; diff --git a/projects/aeris-ui/src/lib/testing/aeris-contrast.spec.ts b/projects/aeris-ui/src/lib/testing/aeris-contrast.spec.ts index ef6e366..49336c9 100644 --- a/projects/aeris-ui/src/lib/testing/aeris-contrast.spec.ts +++ b/projects/aeris-ui/src/lib/testing/aeris-contrast.spec.ts @@ -13,7 +13,7 @@ describe('Aeris theme contrast audit', () => { const report = auditAerisThemeContrast(AERIS_DEFAULT_THEME, 'light'); expect(report.mode).toBe('light'); - expect(report.total).toBe(53); + expect(report.total).toBe(52); expect(report.checks.some((check) => check.category === 'text')).toBe(true); expect(report.checks.some((check) => check.category === 'interaction')).toBe(true); expect(report.checks.some((check) => check.category === 'focus')).toBe(true); @@ -171,6 +171,15 @@ describe('Aeris theme contrast audit', () => { expect(isAchromaticHex(foundation.text)).toBe(true); expect(isAchromaticHex(foundation.text2)).toBe(true); expect(isAchromaticHex(foundation.text3)).toBe(true); + const borderRatio = aerisContrastRatio(foundation.border, foundation.surface); + const strongBorderRatio = aerisContrastRatio( + foundation.borderStrong, + foundation.surface, + ); + if (borderRatio === null || strongBorderRatio === null) { + throw new Error('Resolved foundation border colors must be measurable.'); + } + expect(borderRatio).toBeLessThan(strongBorderRatio); } } }); diff --git a/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts b/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts index f2e536f..030905e 100644 --- a/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts +++ b/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts @@ -279,7 +279,7 @@ describe('AerisThemeService', () => { await TestBed.tick(); expect(service.theme().palette.primary).toBe('#31536a'); expect(service.theme().palette.sage).toBe('#31536a'); - expect(service.theme().palette.surface).toBe('#fefae0'); + expect(service.theme().palette.surface).toBe('#f6f3e8'); expect(listeners.size).toBe(1); service.updateTheme({ diff --git a/projects/aeris-ui/src/styles/_fallback-colors.scss b/projects/aeris-ui/src/styles/_fallback-colors.scss index 29e5a81..d512d4c 100644 --- a/projects/aeris-ui/src/styles/_fallback-colors.scss +++ b/projects/aeris-ui/src/styles/_fallback-colors.scss @@ -2,9 +2,9 @@ @use 'tokens'; $primary: map.get(tokens.$aeris-default-palette, 'primary'); -$primary-hover: #5d6837; -$primary-active: #5c6736; +$primary-hover: #5c6b35; +$primary-active: #5b6a34; $primary-text: $primary; $secondary: map.get(tokens.$aeris-default-palette, 'secondary'); -$focus: #3b452a; +$focus: #3b4729; $on-primary: #ffffff; diff --git a/projects/aeris-ui/src/styles/_tokens.scss b/projects/aeris-ui/src/styles/_tokens.scss index bf33694..bd10ecc 100644 --- a/projects/aeris-ui/src/styles/_tokens.scss +++ b/projects/aeris-ui/src/styles/_tokens.scss @@ -1,9 +1,9 @@ $aeris-default-palette: ( - 'surface': #fefae0, - 'primary': #606c38, - 'secondary': #bc6c25, - 'accent': #dda15e, - 'contrast': #283618, + 'surface': #f6f3e8, + 'primary': #5f6f36, + 'secondary': #b75e26, + 'accent': #d79a32, + 'contrast': #28351a, ); @mixin aeris-palette($palette) { diff --git a/projects/aeris-ui/src/styles/aeris.css b/projects/aeris-ui/src/styles/aeris.css index 17dfd36..ecfd18c 100644 --- a/projects/aeris-ui/src/styles/aeris.css +++ b/projects/aeris-ui/src/styles/aeris.css @@ -118,11 +118,11 @@ } :root { - --aeris-palette-surface: #fefae0; - --aeris-palette-primary: #606c38; - --aeris-palette-secondary: #bc6c25; - --aeris-palette-accent: #dda15e; - --aeris-palette-contrast: #283618; + --aeris-palette-surface: #f6f3e8; + --aeris-palette-primary: #5f6f36; + --aeris-palette-secondary: #b75e26; + --aeris-palette-accent: #d79a32; + --aeris-palette-contrast: #28351a; --aeris-palette-mist: var(--aeris-palette-surface); --aeris-palette-sage: var(--aeris-palette-primary); --aeris-palette-cloud: var(--aeris-palette-secondary); @@ -140,11 +140,11 @@ --aeris-on-primary-soft: var(--aeris-primary-text); --aeris-primary-contrast: var(--aeris-on-primary); --aeris-secondary: var(--aeris-palette-secondary); - --aeris-secondary-hover: #bf7231; - --aeris-secondary-active: #c07334; + --aeris-secondary-hover: #b05b26; + --aeris-secondary-active: #ae5a26; --aeris-secondary-text: color-mix(in srgb, var(--aeris-secondary) 55%, #111411); --aeris-secondary-soft: color-mix(in srgb, var(--aeris-secondary) 14%, var(--aeris-surface)); - --aeris-on-secondary: #111411; + --aeris-on-secondary: #ffffff; --aeris-on-secondary-hover: var(--aeris-on-secondary); --aeris-on-secondary-active: var(--aeris-on-secondary); --aeris-on-secondary-soft: var(--aeris-secondary-text); @@ -215,7 +215,11 @@ --aeris-text-2: #555555; --aeris-text-3: #707070; --aeris-text-muted: var(--aeris-text-2); - --aeris-border: color-mix(in oklch, #5f625d 58%, var(--aeris-palette-secondary)); + --aeris-border: color-mix( + in srgb, + var(--aeris-surface) 88%, + color-mix(in oklch, #5f625d 58%, var(--aeris-palette-secondary)) + ); --aeris-border-strong: color-mix(in oklch, #444842 70%, var(--aeris-palette-secondary)); --aeris-backdrop-blur: 0.25rem; --aeris-glass-blur: 0.25rem; @@ -311,7 +315,11 @@ --aeris-text-2: #c5c5c5; --aeris-text-3: #9d9d9d; --aeris-text-muted: var(--aeris-text-2); - --aeris-border: color-mix(in oklch, #70746d 65%, var(--aeris-palette-secondary)); + --aeris-border: color-mix( + in srgb, + var(--aeris-surface) 84%, + color-mix(in oklch, #70746d 65%, var(--aeris-palette-secondary)) + ); --aeris-border-strong: color-mix(in oklch, #8d9289 70%, var(--aeris-palette-secondary)); --aeris-focus: color-mix(in oklch, #ffffff 44%, var(--aeris-palette-primary)); --aeris-shadow-xs: 0 1px 2px rgb(0 0 0 / 24%); diff --git a/projects/aeris-ui/src/styles/controls.css b/projects/aeris-ui/src/styles/controls.css index 3dd4512..3f97307 100644 --- a/projects/aeris-ui/src/styles/controls.css +++ b/projects/aeris-ui/src/styles/controls.css @@ -1,6 +1,6 @@ .aeris-input-text, .aeris-textarea { - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); background: var(--aeris-surface, #fff); color: var(--aeris-text, #222222); font: inherit; @@ -55,7 +55,7 @@ .aeris-input-text:hover:not(:disabled):not([readonly]), .aeris-textarea:hover:not(:disabled):not([readonly]) { - border-color: var(--aeris-primary, #606c38); + border-color: var(--aeris-primary, #5f6f36); } .aeris-input-text:focus, diff --git a/projects/aeris-ui/stepper/aeris-stepper.scss b/projects/aeris-ui/stepper/aeris-stepper.scss index 617272d..874840d 100644 --- a/projects/aeris-ui/stepper/aeris-stepper.scss +++ b/projects/aeris-ui/stepper/aeris-stepper.scss @@ -83,7 +83,7 @@ height: var(--_aeris-stepper-trigger-size); display: inline-grid; place-items: center; - border: 1px solid var(--aeris-stepper-indicator-border, var(--aeris-border-strong, #c7c9c0)); + border: 1px solid var(--aeris-stepper-indicator-border, var(--aeris-border, #deddd7)); border-radius: 999px; background: var(--aeris-stepper-indicator-background, var(--aeris-surface, #fff)); color: var(--aeris-stepper-muted-color, var(--aeris-text-2, #555555)); @@ -172,7 +172,8 @@ :host([data-variant='contained']) .aeris-stepper__list { padding: var(--aeris-stepper-list-padding, 0.375rem); - border: 1px solid var(--aeris-stepper-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-stepper-border, var(--aeris-border)); border-radius: calc(var(--aeris-stepper-radius, var(--aeris-radius-md, 0.6875rem)) + 0.375rem); background: var(--aeris-stepper-list-background, var(--aeris-surface, #fff)); } @@ -181,7 +182,11 @@ min-width: 0; margin-top: var(--aeris-stepper-panel-gap, 1.25rem); padding: var(--aeris-stepper-panel-padding, 1.125rem); - border: 1px solid var(--aeris-stepper-panel-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-stepper-panel-border, + var(--aeris-border) + ); border-radius: var(--aeris-stepper-panel-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-stepper-panel-background, var(--aeris-surface, #fff)); color: var(--aeris-stepper-panel-color, var(--aeris-text-2, #555555)); diff --git a/projects/aeris-ui/table/aeris-table.scss b/projects/aeris-ui/table/aeris-table.scss index d04d337..eeed10b 100644 --- a/projects/aeris-ui/table/aeris-table.scss +++ b/projects/aeris-ui/table/aeris-table.scss @@ -66,7 +66,7 @@ .aeris-table__frame { min-width: 0; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-table-radius, var(--aeris-radius-md, 0.75rem)); background: var(--aeris-surface, #fff); overflow: hidden; @@ -76,7 +76,7 @@ min-width: 0; overflow: auto; overscroll-behavior: contain; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; scrollbar-width: thin; } @@ -106,7 +106,7 @@ .aeris-table__viewport::-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; } @@ -137,7 +137,7 @@ td { box-sizing: border-box; padding: var(--aeris-table-cell-padding-y) var(--aeris-table-cell-padding-x); border: 0; - border-block-end: 1px solid var(--aeris-border, #deddd7); + border-block-end: 1px solid var(--aeris-border); text-align: left; vertical-align: middle; } @@ -315,7 +315,7 @@ td[data-editable]:focus-within::after { .aeris-table[data-gridlines] th, .aeris-table[data-gridlines] td { - border-inline-end: 1px solid var(--aeris-border, #deddd7); + border-inline-end: 1px solid var(--aeris-border); } .aeris-table[data-gridlines] th:last-child, @@ -448,7 +448,7 @@ td[data-editable]:focus-within::after { width: 1.125rem; height: 1.125rem; margin: 0; - border: 1.5px solid var(--aeris-border-strong, #aeb2a8); + border: 1.5px solid var(--aeris-border, #deddd7); background: var(--aeris-surface, #fff); cursor: pointer; vertical-align: middle; @@ -479,7 +479,7 @@ td[data-editable]:focus-within::after { height: var(--aeris-table-action-size); display: inline-grid; place-items: center; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm, 0.4375rem); background: var(--aeris-surface, #fff); color: var(--aeris-text-2, #555555); @@ -577,7 +577,7 @@ tr[data-selected] td { .aeris-table[data-responsive='stack'] tbody tr:not(.aeris-table__expansion-row) { display: grid; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-table-radius, var(--aeris-radius-md, 0.75rem)); background: var(--aeris-surface, #fff); overflow: hidden; @@ -589,7 +589,7 @@ tr[data-selected] td { align-items: center; gap: calc(var(--aeris-table-density-gap) + 0.25rem); min-height: var(--aeris-table-stack-row-height); - border-block-end: 1px solid var(--aeris-border, #deddd7); + border-block-end: 1px solid var(--aeris-border); background: transparent; text-align: left; } @@ -608,7 +608,7 @@ tr[data-selected] td { .aeris-table[data-responsive='stack'] .aeris-table__expansion-row { display: block; margin-top: calc(-1 * (var(--aeris-table-density-gap) + 0.25rem)); - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-block-start: 0; border-radius: 0 0 var(--aeris-table-radius, var(--aeris-radius-md, 0.75rem)) var(--aeris-table-radius, var(--aeris-radius-md, 0.75rem)); diff --git a/projects/aeris-ui/tabs/aeris-tabs.scss b/projects/aeris-ui/tabs/aeris-tabs.scss index 12fe70a..e021966 100644 --- a/projects/aeris-ui/tabs/aeris-tabs.scss +++ b/projects/aeris-ui/tabs/aeris-tabs.scss @@ -36,7 +36,8 @@ display: flex; flex: 1 1 auto; gap: 0.25rem; - border-bottom: 1px solid var(--aeris-tabs-border, var(--aeris-border, #deddd7)); + border-bottom: 1px solid + var(--aeris-tabs-border, var(--aeris-border)); overflow: visible; scrollbar-width: none; } @@ -148,7 +149,8 @@ place-items: center; padding: 0; border: 0; - border-bottom: 1px solid var(--aeris-tabs-border, var(--aeris-border, #deddd7)); + border-bottom: 1px solid + var(--aeris-tabs-border, var(--aeris-border)); background: var(--aeris-surface, #fff); color: var(--aeris-text-2, #555555); cursor: pointer; @@ -202,7 +204,8 @@ :host([data-orientation='vertical']) .aeris-tabs__list { flex-direction: column; - border-right: 1px solid var(--aeris-tabs-border, var(--aeris-border, #deddd7)); + border-right: 1px solid + var(--aeris-tabs-border, var(--aeris-border)); border-bottom: 0; } @@ -227,7 +230,8 @@ :host([data-orientation='vertical']) .aeris-tabs__list { flex-direction: row; border-right: 0; - border-bottom: 1px solid var(--aeris-tabs-border, var(--aeris-border, #deddd7)); + border-bottom: 1px solid + var(--aeris-tabs-border, var(--aeris-border)); overflow-x: auto; } } diff --git a/projects/aeris-ui/theme-builder/aeris-contrast.ts b/projects/aeris-ui/theme-builder/aeris-contrast.ts index fe619f3..b347723 100644 --- a/projects/aeris-ui/theme-builder/aeris-contrast.ts +++ b/projects/aeris-ui/theme-builder/aeris-contrast.ts @@ -168,38 +168,27 @@ export function auditAerisThemeContrast( requiredRatio: 3, guidance: 'Strengthen the focus color against the page background.', }), - createCheck({ - id: 'border-surface', - label: 'Standard border on surface', - description: 'Default structural boundary against a primary surface.', - category: 'boundary', - kind: 'non-text', - foreground: scheme.border, - background: scheme.surface, - requiredRatio: 3, - guidance: 'Use the stronger border token when the boundary identifies a control.', - }), createCheck({ id: 'border-strong-surface', - label: 'Control border on surface', - description: 'Strong border used to identify interactive controls.', + label: 'Emphasized boundary on surface', + description: 'Optional strong boundary against a primary surface.', category: 'boundary', kind: 'non-text', foreground: scheme.borderStrong, background: scheme.surface, requiredRatio: 3, - guidance: 'Increase the strong border contrast against the primary surface.', + guidance: 'Increase the emphasized boundary contrast against the primary surface.', }), createCheck({ id: 'border-strong-raised', - label: 'Control border on raised surface', - description: 'Strong border used on the secondary surface layer.', + label: 'Emphasized boundary on raised surface', + description: 'Optional strong boundary used on the secondary surface layer.', category: 'boundary', kind: 'non-text', foreground: scheme.borderStrong, background: scheme.surface2, requiredRatio: 3, - guidance: 'Increase the strong border contrast against the raised surface.', + guidance: 'Increase the emphasized boundary contrast against the raised surface.', }), ...TONE_NAMES.map((name) => createCheck({ diff --git a/projects/aeris-ui/theme-builder/aeris-foundation.ts b/projects/aeris-ui/theme-builder/aeris-foundation.ts index 6df8f0e..ca6535d 100644 --- a/projects/aeris-ui/theme-builder/aeris-foundation.ts +++ b/projects/aeris-ui/theme-builder/aeris-foundation.ts @@ -33,9 +33,17 @@ export function resolveAerisFoundation( if (mode === 'light') { const surface2 = scheme.surface2 ?? mixAerisColor('#f7f6f2', surfaceSeed, 0.24); + const surface = scheme.surface ?? '#ffffff'; + const border = + scheme.border ?? + mixAerisColor( + surface, + mixAerisColor('#5f625d', borderSeed, 0.42), + 0.12, + ); return { page: scheme.page ?? mixAerisColor('#faf9f7', surfaceSeed, 0.18), - surface: scheme.surface ?? '#ffffff', + surface, surface2, surface3: scheme.surface3 ?? mixAerisColor('#f1f0eb', surfaceSeed, 0.42), interactiveHover: @@ -43,16 +51,24 @@ export function resolveAerisFoundation( text: scheme.text ?? LIGHT_TEXT, text2: scheme.text2 ?? LIGHT_TEXT_SECONDARY, text3: scheme.text3 ?? LIGHT_TEXT_TERTIARY, - border: scheme.border ?? mixAerisColor('#5f625d', borderSeed, 0.42), + border, borderStrong: scheme.borderStrong ?? mixAerisColor('#444842', borderSeed, 0.3), focus: scheme.focus ?? mixAerisColor('#1d2119', theme.palette.primary, 0.5), }; } const surface2 = scheme.surface2 ?? mixAerisColor('#171b22', surfaceSeed, 0.008); + const surface = scheme.surface ?? mixAerisColor('#101318', surfaceSeed, 0.006); + const border = + scheme.border ?? + mixAerisColor( + surface, + mixAerisColor('#70746d', borderSeed, 0.35), + 0.16, + ); return { page: scheme.page ?? mixAerisColor('#090b0f', surfaceSeed, 0.004), - surface: scheme.surface ?? mixAerisColor('#101318', surfaceSeed, 0.006), + surface, surface2, surface3: scheme.surface3 ?? mixAerisColor('#202632', surfaceSeed, 0.01), interactiveHover: @@ -60,7 +76,7 @@ export function resolveAerisFoundation( text: scheme.text ?? DARK_TEXT, text2: scheme.text2 ?? DARK_TEXT_SECONDARY, text3: scheme.text3 ?? DARK_TEXT_TERTIARY, - border: scheme.border ?? mixAerisColor('#70746d', borderSeed, 0.35), + border, borderStrong: scheme.borderStrong ?? mixAerisColor('#8d9289', borderSeed, 0.3), focus: scheme.focus ?? mixAerisColor('#ffffff', theme.palette.primary, 0.56), }; diff --git a/projects/aeris-ui/theme-builder/aeris-theme.ts b/projects/aeris-ui/theme-builder/aeris-theme.ts index 574ffb1..bb6fa34 100644 --- a/projects/aeris-ui/theme-builder/aeris-theme.ts +++ b/projects/aeris-ui/theme-builder/aeris-theme.ts @@ -73,6 +73,7 @@ export interface AerisThemeScheme { readonly text?: string; readonly text2?: string; readonly text3?: string; + /** Low-emphasis neutral boundary used throughout Aeris components. */ readonly border?: string; readonly borderStrong?: string; readonly focus?: string; @@ -311,29 +312,29 @@ const AERIS_MONOCHROME_DARK_STATUS_TONES = { export const AERIS_THEME_PRESETS = { earth: { palette: { - surface: '#fefae0', - primary: '#606c38', - secondary: '#bc6c25', - accent: '#dda15e', - contrast: '#283618', + surface: '#f6f3e8', + primary: '#5f6f36', + secondary: '#b75e26', + accent: '#d79a32', + contrast: '#28351a', }, }, coastal: { palette: { - surface: '#dfe8ee', - primary: '#7196b4', - secondary: '#6d9992', - accent: '#d8ad70', - contrast: '#31536a', + surface: '#eef3f5', + primary: '#357a9e', + secondary: '#347b73', + accent: '#d46f58', + contrast: '#163e54', }, }, orchid: { palette: { - surface: '#e9e1ec', - primary: '#9579b2', - secondary: '#b68194', - accent: '#d1a570', - contrast: '#5c4b6b', + surface: '#f3eef5', + primary: '#7654ad', + secondary: '#a94f79', + accent: '#d59a36', + contrast: '#3a2949', }, }, monochrome: { @@ -354,7 +355,7 @@ export const AERIS_THEME_PRESETS = { text: '#111111', text2: '#242424', text3: '#454545', - border: '#767676', + border: '#efefef', borderStrong: '#111111', focus: '#111111', shadowXs: '0 1px 2px rgb(0 0 0 / 10%)', @@ -376,7 +377,7 @@ export const AERIS_THEME_PRESETS = { text: '#f8f8f8', text2: '#ededed', text3: '#d0d0d0', - border: '#a3a3a3', + border: '#242424', borderStrong: '#ffffff', focus: '#ffffff', shadowXs: '0 1px 2px rgb(0 0 0 / 48%)', diff --git a/projects/aeris-ui/tiered-menu/aeris-tiered-menu.scss b/projects/aeris-ui/tiered-menu/aeris-tiered-menu.scss index 40d2a8e..b3e1871 100644 --- a/projects/aeris-ui/tiered-menu/aeris-tiered-menu.scss +++ b/projects/aeris-ui/tiered-menu/aeris-tiered-menu.scss @@ -22,7 +22,8 @@ aeris-tiered-menu, inline-size: var(--aeris-tiered-menu-width, 14rem); max-inline-size: var(--aeris-tiered-menu-max-width, min(22rem, 100%)); padding: var(--aeris-tiered-menu-padding, 0.375rem); - border: var(--aeris-tiered-menu-border-width, 1px) solid var(--aeris-tiered-menu-border, var(--aeris-border, #deddd7)); + border: var(--aeris-tiered-menu-border-width, 1px) solid + var(--aeris-tiered-menu-border, var(--aeris-border)); border-radius: var(--aeris-tiered-menu-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-tiered-menu-background, var(--aeris-surface, #fff)); color: var(--aeris-tiered-menu-color, var(--aeris-text, #222222)); @@ -187,7 +188,8 @@ aeris-tiered-menu, inset-block-start: calc(-1 * var(--aeris-tiered-menu-padding, 0.375rem)); min-inline-size: var(--aeris-tiered-menu-submenu-width, 14rem); padding: var(--aeris-tiered-menu-padding, 0.375rem); - border: var(--aeris-tiered-menu-border-width, 1px) solid var(--aeris-tiered-menu-border, var(--aeris-border, #deddd7)); + border: var(--aeris-tiered-menu-border-width, 1px) solid + var(--aeris-tiered-menu-border, var(--aeris-border)); border-radius: var(--aeris-tiered-menu-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-tiered-menu-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-tiered-menu-shadow, 0 1rem 2.75rem rgba(0, 0, 0, 0.14)); diff --git a/projects/aeris-ui/timeline/aeris-timeline.scss b/projects/aeris-ui/timeline/aeris-timeline.scss index 1c1362a..af31284 100644 --- a/projects/aeris-ui/timeline/aeris-timeline.scss +++ b/projects/aeris-ui/timeline/aeris-timeline.scss @@ -60,7 +60,7 @@ flex: 0 0 var(--aeris-timeline-marker-size, 1rem); display: grid; place-items: center; - border: 2px solid var(--aeris-timeline-marker-color, var(--aeris-border-strong, #c7c9c0)); + border: 2px solid var(--aeris-timeline-marker-color, var(--aeris-border, #deddd7)); border-radius: 50%; background: var(--aeris-surface, #fff); color: var(--aeris-timeline-marker-color, var(--aeris-text-muted, #6d7068)); @@ -232,7 +232,7 @@ display: grid; place-items: center; padding: 1.5rem; - border: 1px dashed var(--aeris-border, #deddd7); + border: 1px dashed var(--aeris-border); border-radius: var(--aeris-radius-lg, 0.875rem); color: var(--aeris-text-muted, #6d7068); font-size: 0.8125rem; diff --git a/projects/aeris-ui/toast/aeris-toast.scss b/projects/aeris-ui/toast/aeris-toast.scss index 659eb3b..b00fd45 100644 --- a/projects/aeris-ui/toast/aeris-toast.scss +++ b/projects/aeris-ui/toast/aeris-toast.scss @@ -214,7 +214,7 @@ width: 100%; height: 100%; min-width: 0; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-left: 0.25rem solid var(--_accent); border-radius: var(--aeris-radius-md, 0.75rem); background: diff --git a/projects/aeris-ui/toolbar/aeris-toolbar.scss b/projects/aeris-ui/toolbar/aeris-toolbar.scss index 7b89c05..2bc7d90 100644 --- a/projects/aeris-ui/toolbar/aeris-toolbar.scss +++ b/projects/aeris-ui/toolbar/aeris-toolbar.scss @@ -9,7 +9,8 @@ aeris-toolbar { --_gap: var(--aeris-toolbar-gap, 0.75rem); --_section-gap: var(--aeris-toolbar-section-gap, 0.5rem); - border: var(--aeris-toolbar-border-width, 1px) solid var(--aeris-toolbar-border, var(--aeris-border, #deddd7)); + border: var(--aeris-toolbar-border-width, 1px) solid + var(--aeris-toolbar-border, var(--aeris-border)); border-radius: var(--aeris-toolbar-radius, var(--aeris-radius-lg, 1.125rem)); background: var(--aeris-toolbar-background, var(--aeris-surface, #fff)); color: var(--aeris-toolbar-color, var(--aeris-text, #222222)); @@ -73,7 +74,7 @@ aeris-toolbar { .aeris-toolbar[data-wrap='false'] .aeris-toolbar__content { flex-wrap: nowrap; overflow-x: auto; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; scrollbar-width: thin; } @@ -90,7 +91,7 @@ aeris-toolbar { .aeris-toolbar[data-wrap='false'] .aeris-toolbar__content::-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; } diff --git a/projects/aeris-ui/tree-select/aeris-tree-select.scss b/projects/aeris-ui/tree-select/aeris-tree-select.scss index 0795fbb..7416229 100644 --- a/projects/aeris-ui/tree-select/aeris-tree-select.scss +++ b/projects/aeris-ui/tree-select/aeris-tree-select.scss @@ -59,7 +59,7 @@ display: flex; align-items: center; padding: 0 2.75rem 0 var(--aeris-tree-select-padding); - border: 1px solid var(--aeris-tree-select-border, var(--aeris-border-strong, #c7c9c0)); + border: 1px solid var(--aeris-tree-select-border, var(--aeris-border, #deddd7)); border-radius: var( --aeris-tree-select-radius, var(--aeris-radius-control, var(--aeris-radius-sm, 0.4375rem)) @@ -207,7 +207,11 @@ min-width: 100%; max-width: calc(100vw - 2rem); padding: calc(var(--aeris-tree-select-density-gap) * 0.75); - border: 1px solid var(--aeris-tree-select-panel-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-tree-select-panel-border, + var(--aeris-border) + ); border-radius: var(--aeris-tree-select-panel-radius, var(--aeris-radius-md, 0.6875rem)); background: var(--aeris-tree-select-panel-background, var(--aeris-surface, #fff)); box-shadow: var(--aeris-tree-select-panel-shadow, 0 1rem 2.5rem rgb(31 35 27 / 16%)); @@ -221,7 +225,7 @@ } .aeris-tree-select__header { - border-bottom: 1px solid var(--aeris-border, #deddd7); + border-bottom: 1px solid var(--aeris-border); margin-bottom: calc(var(--aeris-tree-select-density-gap) * 0.5); } @@ -238,7 +242,7 @@ gap: var(--aeris-tree-select-density-gap); margin-bottom: calc(var(--aeris-tree-select-density-gap) * 0.5); padding: 0 var(--aeris-item-padding-x, 0.75rem); - border: 1px solid var(--aeris-border-strong, #c7c9c0); + border: 1px solid var(--aeris-border, #deddd7); border-radius: calc(var(--aeris-tree-select-panel-radius, 0.6875rem) - 0.1875rem); background: var(--aeris-tree-select-background, var(--aeris-surface, #fff)); } @@ -301,7 +305,7 @@ overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; } .aeris-tree-select__node { @@ -397,7 +401,7 @@ display: grid; place-items: center; flex: 0 0 auto; - 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}); diff --git a/projects/aeris-ui/tree-table/aeris-tree-table.scss b/projects/aeris-ui/tree-table/aeris-tree-table.scss index 60da396..5b48bfc 100644 --- a/projects/aeris-ui/tree-table/aeris-tree-table.scss +++ b/projects/aeris-ui/tree-table/aeris-tree-table.scss @@ -87,7 +87,11 @@ .aeris-tree-table__frame { min-width: 0; - border: 1px solid var(--aeris-tree-table-border, var(--aeris-border, #deddd7)); + border: 1px solid + var( + --aeris-tree-table-border, + var(--aeris-border) + ); border-radius: var(--aeris-tree-table-radius, var(--aeris-radius-md, 0.75rem)); background: var(--aeris-tree-table-background, var(--aeris-surface, #fff)); overflow: hidden; @@ -97,7 +101,7 @@ min-width: 0; overflow: auto; overscroll-behavior: contain; - scrollbar-color: var(--aeris-border-strong, #c7c9c0) transparent; + scrollbar-color: var(--aeris-border, #deddd7) transparent; scrollbar-width: thin; } @@ -127,7 +131,7 @@ .aeris-tree-table__viewport::-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; } @@ -158,7 +162,7 @@ td { box-sizing: border-box; padding: var(--aeris-tree-table-cell-padding, 0.9rem 1rem); border: 0; - border-block-end: 1px solid var(--aeris-border, #deddd7); + border-block-end: 1px solid var(--aeris-border); text-align: left; vertical-align: middle; } @@ -260,7 +264,7 @@ tbody tr[data-disabled='true'] { .aeris-tree-table[data-gridlines='true'] th, .aeris-tree-table[data-gridlines='true'] td { - border-inline-end: 1px solid var(--aeris-border, #deddd7); + border-inline-end: 1px solid var(--aeris-border); } .aeris-tree-table[data-gridlines='true'] th:last-child, @@ -305,7 +309,7 @@ th[data-frozen='true'], td[data-frozen='true'] { position: sticky; z-index: 3; - box-shadow: 1px 0 var(--aeris-border, #deddd7); + box-shadow: 1px 0 var(--aeris-border); } th[data-frozen='true'] { @@ -511,7 +515,7 @@ th:has(> .aeris-tree-table__resize:focus-visible) { } .aeris-tree-table__toggle[aria-expanded] { - border-color: var(--aeris-border, #deddd7); + border-color: var(--aeris-border); background: var(--aeris-surface, #fff); } @@ -618,7 +622,7 @@ th:has(> .aeris-tree-table__resize:focus-visible) { .aeris-tree-table[data-responsive='stack'] tbody tr { display: grid; - border: 1px solid var(--aeris-border, #deddd7); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-tree-table-radius, var(--aeris-radius-md, 0.75rem)); background: var(--aeris-surface, #fff); overflow: hidden; @@ -630,7 +634,7 @@ th:has(> .aeris-tree-table__resize:focus-visible) { align-items: center; gap: calc(var(--aeris-tree-table-density-gap) + 0.25rem); min-height: var(--aeris-tree-table-stack-row-height); - border-block-end: 1px solid var(--aeris-border, #deddd7); + border-block-end: 1px solid var(--aeris-border); background: transparent; text-align: left; box-shadow: none; diff --git a/projects/aeris-ui/tree/aeris-tree.scss b/projects/aeris-ui/tree/aeris-tree.scss index b58adc9..c943b50 100644 --- a/projects/aeris-ui/tree/aeris-tree.scss +++ b/projects/aeris-ui/tree/aeris-tree.scss @@ -22,7 +22,8 @@ min-width: var(--aeris-tree-min-width, 16rem); max-width: 100%; padding: var(--aeris-tree-padding, var(--aeris-density-gap, 0.5rem)); - border: 1px solid var(--aeris-tree-border, var(--aeris-border, #deddd7)); + border: 1px solid + var(--aeris-tree-border, var(--aeris-border)); border-radius: var(--aeris-tree-radius, var(--aeris-radius-lg, 0.875rem)); background: var(--aeris-tree-background, var(--aeris-surface, #fff)); color: var(--aeris-tree-color, var(--aeris-text, #222222)); @@ -266,7 +267,7 @@ display: grid; flex: 0 0 auto; place-items: center; - border: 1.5px solid var(--aeris-border-strong, #b7b8b2); + border: 1.5px solid var(--aeris-border, #deddd7); border-radius: var(--aeris-radius-sm, 0.4375rem); background: var(--aeris-surface, #fff); } diff --git a/projects/docs/public/ai/22/aeris-docs.json b/projects/docs/public/ai/22/aeris-docs.json index 0921dac..a84e16a 100644 --- a/projects/docs/public/ai/22/aeris-docs.json +++ b/projects/docs/public/ai/22/aeris-docs.json @@ -237,12 +237,12 @@ { "label": "Terminal", "language": "Shell", - "code": "ng add @aeris-ui/core@22.0.0-alpha.2 --project=web --surface=\"#dfe8ee\" --primary=\"#7196b4\" --secondary=\"#6d9992\" --accent=\"#d8ad70\" --contrast=\"#31536a\" --density=compact --corners=soft --schemes=both --default-mode=system --strategy=build-time --direction=ltr --skip-prompts" + "code": "ng add @aeris-ui/core@22.0.0-alpha.2 --project=web --surface=\"#eef3f5\" --primary=\"#357a9e\" --secondary=\"#347b73\" --accent=\"#d46f58\" --contrast=\"#163e54\" --density=compact --corners=soft --schemes=both --default-mode=system --strategy=build-time --direction=ltr --skip-prompts" }, { "label": "aeris.setup.json", "language": "JSON", - "code": "{\n \"$schema\": \"./node_modules/@aeris-ui/core/setup-config.schema.json\",\n \"theme\": {\n \"seeds\": {\n \"surface\": \"#dfe8ee\",\n \"primary\": \"#7196b4\",\n \"secondary\": \"#6d9992\",\n \"accent\": \"#d8ad70\",\n \"contrast\": \"#31536a\"\n }\n }\n}" + "code": "{\n \"$schema\": \"./node_modules/@aeris-ui/core/setup-config.schema.json\",\n \"theme\": {\n \"seeds\": {\n \"surface\": \"#eef3f5\",\n \"primary\": \"#357a9e\",\n \"secondary\": \"#347b73\",\n \"accent\": \"#d46f58\",\n \"contrast\": \"#163e54\"\n }\n }\n}" } ], "note": "Density and corner choices intentionally stay limited to the built-in presets during installation. Add a custom named scale manually after setup when a product needs one." @@ -328,17 +328,17 @@ { "id": "earth", "name": "Aeris Earth", - "description": "Deep olive, warm copper, and sunlit cornsilk." + "description": "Grounded olive, burnished copper, and warm amber on soft ivory." }, { "id": "coastal", "name": "Coastal Glass", - "description": "Clear blues, sea glass, and sun-warmed gold." + "description": "Clear ocean blue, balanced teal, and a restrained coral accent." }, { "id": "orchid", "name": "Orchid Dusk", - "description": "Soft violet, muted rose, and evening plum." + "description": "Confident violet, rich berry, and warm gold on pale lavender." }, { "id": "monochrome", @@ -535,7 +535,7 @@ { "label": "src/app/app.config.ts", "language": "TypeScript", - "code": "import { ApplicationConfig } from '@angular/core';\nimport { provideAeris } from '@aeris-ui/core/theming';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideAeris({\n mode: 'system',\n themeModeStorageKey: 'my-app-color-mode',\n theme: {\n palette: {\n surface: '#fefae0',\n primary: '#606c38',\n secondary: '#bc6c25',\n accent: '#dda15e',\n contrast: '#283618',\n },\n density: 'medium',\n radius: 'rounded',\n direction: 'ltr',\n },\n }),\n ],\n};" + "code": "import { ApplicationConfig } from '@angular/core';\nimport { provideAeris } from '@aeris-ui/core/theming';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideAeris({\n mode: 'system',\n themeModeStorageKey: 'my-app-color-mode',\n theme: {\n palette: {\n surface: '#f6f3e8',\n primary: '#5f6f36',\n secondary: '#b75e26',\n accent: '#d79a32',\n contrast: '#28351a',\n },\n density: 'medium',\n radius: 'rounded',\n direction: 'ltr',\n },\n }),\n ],\n};" } ] }, @@ -795,8 +795,8 @@ "CSS color" ], [ - "border, borderStrong, focus", - "Boundaries and focus indication", + "borderSubtle, border, borderStrong, focus", + "Surface separation, structural boundaries, control boundaries, and focus indication", "CSS color" ], [ @@ -867,7 +867,7 @@ { "label": "TS", "language": "TypeScript", - "code": "import { ApplicationConfig } from '@angular/core';\nimport { provideAeris } from '@aeris-ui/core/theming';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideAeris({\n theme: {\n palette: {\n surface: '#dfe8ee',\n primary: '#7196b4',\n secondary: '#6d9992',\n accent: '#d8ad70',\n contrast: '#31536a',\n },\n dark: {\n page: '#090b0f',\n surface: '#101318',\n surface2: '#171b22',\n },\n },\n }),\n ],\n};" + "code": "import { ApplicationConfig } from '@angular/core';\nimport { provideAeris } from '@aeris-ui/core/theming';\n\nexport const appConfig: ApplicationConfig = {\n providers: [\n provideAeris({\n theme: {\n palette: {\n surface: '#eef3f5',\n primary: '#357a9e',\n secondary: '#347b73',\n accent: '#d46f58',\n contrast: '#163e54',\n },\n dark: {\n page: '#090b0f',\n surface: '#101318',\n surface2: '#171b22',\n },\n },\n }),\n ],\n};" } ], "note": "Aeris derives independent hover, active, readable text, and foreground colors for every semantic tone. Explicit tone values remain available for intentional brand or contrast exceptions.", @@ -929,6 +929,11 @@ "--aeris-text, --aeris-text-2, --aeris-text-3", "Default headings, body copy, supporting text, labels, and placeholders" ], + [ + "Quiet surface separation", + "--aeris-border-subtle", + "Optional low-emphasis edges around non-interactive cards, panels, and overlay shells" + ], [ "Colored text on neutral surfaces", "--aeris-primary-text, --aeris-secondary-text, and semantic *-text tokens", @@ -956,7 +961,7 @@ { "label": "TS", "language": "TypeScript", - "code": "import type { AerisThemeOverride } from '@aeris-ui/core/theming';\n\nexport const productTheme: AerisThemeOverride = {\n palette: {\n surface: '#dfe8ee',\n primary: '#7196b4',\n secondary: '#6d9992',\n accent: '#d8ad70',\n contrast: '#31536a',\n },\n light: {\n tones: {\n warning: {\n base: '#a66516',\n hover: '#87500d',\n onBase: '#ffffff',\n onHover: '#ffffff',\n },\n },\n },\n dark: {\n tones: {\n warning: {\n base: '#e8bd68',\n onBase: '#251804',\n },\n },\n },\n};" + "code": "import type { AerisThemeOverride } from '@aeris-ui/core/theming';\n\nexport const productTheme: AerisThemeOverride = {\n palette: {\n surface: '#eef3f5',\n primary: '#357a9e',\n secondary: '#347b73',\n accent: '#d46f58',\n contrast: '#163e54',\n },\n light: {\n tones: {\n warning: {\n base: '#a66516',\n hover: '#87500d',\n onBase: '#ffffff',\n onHover: '#ffffff',\n },\n },\n },\n dark: {\n tones: {\n warning: {\n base: '#e8bd68',\n onBase: '#251804',\n },\n },\n },\n};" } ], "note": "Automatic color analysis supports opaque hex, rgb, and hsl values. When a tone uses a CSS variable or another unresolved color expression, provide its boundary, onBase, onHover, onActive, text, and onSoft values explicitly.", @@ -1115,7 +1120,7 @@ { "label": "aeris.theme.json", "language": "JSON", - "code": "{\n \"$schema\": \"./node_modules/@aeris-ui/core/theme-config.schema.json\",\n \"derivationVersion\": 1,\n \"preset\": \"coastal\",\n \"output\": \"src/styles/aeris-theme.css\",\n \"theme\": {\n \"density\": \"compact\",\n \"radius\": \"soft\",\n \"palette\": {\n \"primary\": \"#527da1\",\n \"accent\": \"#d8ad70\"\n }\n }\n}" + "code": "{\n \"$schema\": \"./node_modules/@aeris-ui/core/theme-config.schema.json\",\n \"derivationVersion\": 1,\n \"preset\": \"coastal\",\n \"output\": \"src/styles/aeris-theme.css\",\n \"theme\": {\n \"density\": \"compact\",\n \"radius\": \"soft\",\n \"palette\": {\n \"primary\": \"#527da1\",\n \"accent\": \"#d46f58\"\n }\n }\n}" }, { "label": "Terminal and package.json", @@ -1458,7 +1463,7 @@ { "label": "TS", "language": "TypeScript", - "code": "import type { AerisThemeOverride } from '@aeris-ui/core/theming';\n\nexport const productTheme: AerisThemeOverride = {\n palette: {\n surface: '#fefae0',\n primary: '#606c38',\n secondary: '#bc6c25',\n accent: '#dda15e',\n contrast: '#283618',\n },\n density: 'medium',\n radius: 'rounded',\n};" + "code": "import type { AerisThemeOverride } from '@aeris-ui/core/theming';\n\nexport const productTheme: AerisThemeOverride = {\n palette: {\n surface: '#f6f3e8',\n primary: '#5f6f36',\n secondary: '#b75e26',\n accent: '#d79a32',\n contrast: '#28351a',\n },\n density: 'medium',\n radius: 'rounded',\n};" } ] }, @@ -4164,7 +4169,7 @@ { "name": "value", "type": "string (model)", - "defaultValue": "'#606c38'", + "defaultValue": "'#5f6f36'", "description": "Current color value with two-way binding and Forms support." }, { @@ -4590,7 +4595,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-basic-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n Choose the primary color for your interface.\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerBasicBasicDemo {\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-basic-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n Choose the primary color for your interface.\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerBasicBasicDemo {\n}\n" } ] }, @@ -4602,7 +4607,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-signal-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n Selected: {{ brandColor() }}\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerSignalSignalValueDemo {\n protected readonly brandColor = signal('#606c38');\n}\n" + "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-signal-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n Selected: {{ brandColor() }}\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerSignalSignalValueDemo {\n protected readonly brandColor = signal('#5f6f36');\n}\n" } ] }, @@ -4614,7 +4619,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker, type AerisColorFormat } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-formats-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n \n {{ selectedFormat().toUpperCase() }} · {{ formatColor() }}\n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerFormatsSelectableFormatsDemo {\n protected readonly formatColor = signal('#606c38');\n protected readonly selectedFormat = signal('hex');\n}\n" + "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker, type AerisColorFormat } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-formats-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n \n {{ selectedFormat().toUpperCase() }} · {{ formatColor() }}\n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerFormatsSelectableFormatsDemo {\n protected readonly formatColor = signal('#5f6f36');\n protected readonly selectedFormat = signal('hex');\n}\n" } ] }, @@ -4638,7 +4643,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-presets-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerPresetsPresetsDemo {\n protected readonly presets: readonly string[] = [\n '#fefae0',\n '#606c38',\n '#bc6c25',\n '#dda15e',\n '#283618',\n ];\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-presets-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerPresetsPresetsDemo {\n protected readonly presets: readonly string[] = [\n '#f6f3e8',\n '#5f6f36',\n '#b75e26',\n '#d79a32',\n '#28351a',\n ];\n}\n" } ] }, @@ -4655,7 +4660,7 @@ { "language": "HTML", "label": "HTML", - "code": "
\n
\n \n \n
\n
\n \n \n
\n
" + "code": "
\n
\n \n \n
\n
\n \n \n
\n
" }, { "language": "CSS", @@ -4672,7 +4677,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-sizes-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerSizesSizesDemo {\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-sizes-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerSizesSizesDemo {\n}\n" } ] }, @@ -4684,7 +4689,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-appearances-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerAppearancesAppearancesDemo {\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-appearances-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerAppearancesAppearancesDemo {\n}\n" } ] }, @@ -4696,7 +4701,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-clear-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerClearClearButtonDemo {\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-clear-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerClearClearButtonDemo {\n}\n" } ] }, @@ -4708,7 +4713,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-states-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerStatesDisabledAndReadOnlyDemo {\n}\n" + "code": "import { Component } from '@angular/core';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-states-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n
\n `,\n styles: `\n .field-grid {\n width: 100%;\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 1.25rem;\n }\n \n @media (max-width: 42rem) {\n .field-grid {\n grid-template-columns: 1fr;\n }\n }\n `\n})\nexport class ColorPickerStatesDisabledAndReadOnlyDemo {\n}\n" } ] }, @@ -4742,7 +4747,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-forms-demo',\n imports: [AerisColorPicker, FormsModule, ReactiveFormsModule],\n templateUrl: './color-picker-forms.demo.html',\n styleUrl: './color-picker-forms.demo.scss'\n})\nexport class ColorPickerFormsReactiveAndTemplateDrivenFormsDemo {\n protected readonly reactiveColor =\n new FormControl('#bc6c25');\n\n protected templateColor = '#283618';\n}\n" + "code": "import { Component } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { AerisColorPicker } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-forms-demo',\n imports: [AerisColorPicker, FormsModule, ReactiveFormsModule],\n templateUrl: './color-picker-forms.demo.html',\n styleUrl: './color-picker-forms.demo.scss'\n})\nexport class ColorPickerFormsReactiveAndTemplateDrivenFormsDemo {\n protected readonly reactiveColor =\n new FormControl('#b75e26');\n\n protected templateColor = '#28351a';\n}\n" }, { "language": "HTML", @@ -4764,7 +4769,7 @@ { "language": "TypeScript", "label": "TS", - "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker, type AerisColorPickerChangeEvent } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-events-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n {{ lastChange() }}\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerEventsEventsDemo {\n protected readonly lastChange = signal('No color change yet');\n\n protected recordChange(event: AerisColorPickerChangeEvent): void {\n this.lastChange.set(`Selected ${event.value}`);\n }\n}\n" + "code": "import { Component, signal } from '@angular/core';\nimport { AerisColorPicker, type AerisColorPickerChangeEvent } from '@aeris-ui/core/color-picker';\n\n@Component({\n selector: 'app-color-picker-events-demo',\n imports: [AerisColorPicker],\n template: `\n
\n \n \n {{ lastChange() }}\n
\n `,\n styles: `\n .field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n }\n \n .field > label,\n .field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n }\n \n .field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n }\n \n .field small.error {\n color: var(--aeris-danger);\n }\n `\n})\nexport class ColorPickerEventsEventsDemo {\n protected readonly lastChange = signal('No color change yet');\n\n protected recordChange(event: AerisColorPickerChangeEvent): void {\n this.lastChange.set(`Selected ${event.value}`);\n }\n}\n" } ] } @@ -11860,7 +11865,7 @@ { "language": "CSS", "label": "CSS", - "code": ".field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n}\n\n.field > label,\n.field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n}\n\n.field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n}\n\n.field small.error {\n color: var(--aeris-danger);\n}\n\n.team-mark {\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 50%;\n background: var(--primary);\n}\n\n.team-mark[data-team='platform'] {\n background: #bc6c25;\n}\n\n.team-mark[data-team='a11y'] {\n background: #283618;\n}\n\n.selected-team,\n.team-option {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}" + "code": ".field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n}\n\n.field > label,\n.field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n}\n\n.field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n}\n\n.field small.error {\n color: var(--aeris-danger);\n}\n\n.team-mark {\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 50%;\n background: var(--primary);\n}\n\n.team-mark[data-team='platform'] {\n background: #b75e26;\n}\n\n.team-mark[data-team='a11y'] {\n background: #28351a;\n}\n\n.selected-team,\n.team-option {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n}" } ] }, @@ -20953,7 +20958,7 @@ { "name": "--aeris-panel-border", "type": "CSS custom property", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Outer border." }, { @@ -20977,7 +20982,7 @@ { "name": "--aeris-panel-header-border", "type": "CSS custom property", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Header separator." }, { @@ -21398,7 +21403,7 @@ { "name": "--aeris-scroll-panel-border", "type": "CSS custom property", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Viewport border." }, { @@ -21896,7 +21901,7 @@ { "name": "--aeris-splitter-border", "type": "CSS custom property", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Root border color." }, { @@ -23393,7 +23398,7 @@ { "name": "--aeris-toolbar-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Toolbar border color." }, { @@ -25155,7 +25160,7 @@ { "name": "--aeris-confirm-popup-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border)", + "defaultValue": "var(--aeris-border-subtle)", "description": "Popup border." }, { @@ -27453,7 +27458,7 @@ { "name": "--aeris-popover-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border)", + "defaultValue": "var(--aeris-border-subtle)", "description": "Popover border." }, { @@ -28379,7 +28384,7 @@ { "name": "--aeris-file-upload-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border)", + "defaultValue": "var(--aeris-border-subtle)", "description": "Surface and file borders." }, { @@ -28744,7 +28749,7 @@ { "name": "--aeris-breadcrumb-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Breadcrumb border color." }, { @@ -29230,7 +29235,7 @@ { "name": "--aeris-context-menu-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Panel border color." }, { @@ -29296,7 +29301,7 @@ { "name": "--aeris-context-menu-separator-color", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Separator color." }, { @@ -29613,7 +29618,7 @@ { "name": "--aeris-mega-menu-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Root and nested separator border color." }, { @@ -30029,7 +30034,7 @@ { "name": "--aeris-menu-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Panel border." }, { @@ -30461,7 +30466,7 @@ { "name": "--aeris-menubar-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Root and separator border color." }, { @@ -30913,7 +30918,7 @@ { "name": "--aeris-tiered-menu-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Panel border color." }, { @@ -31295,7 +31300,7 @@ { "name": "--aeris-chart-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Container border color." }, { @@ -32970,7 +32975,7 @@ { "name": "--aeris-compare-border", "type": "", - "defaultValue": "var(--aeris-border)", + "defaultValue": "var(--aeris-border-subtle)", "description": "Surface border color." }, { @@ -33940,7 +33945,7 @@ { "name": "--aeris-galleria-border", "type": "color", - "defaultValue": "Aeris border", + "defaultValue": "--aeris-border-subtle", "description": "Stage and empty-state border." }, { @@ -33994,7 +33999,7 @@ { "name": "--aeris-galleria-grid-border", "type": "color", - "defaultValue": "--aeris-border", + "defaultValue": "--aeris-border-subtle", "description": "Grid tile border." }, { diff --git a/projects/docs/public/ai/22/components/breadcrumb.md b/projects/docs/public/ai/22/components/breadcrumb.md index 276387d..3d57701 100644 --- a/projects/docs/public/ai/22/components/breadcrumb.md +++ b/projects/docs/public/ai/22/components/breadcrumb.md @@ -125,7 +125,7 @@ interface AerisBreadcrumbEllipsisTemplateContext { | `--aeris-breadcrumb-color` | `color` | `--aeris-text` | Default breadcrumb text color. | | `--aeris-breadcrumb-muted-color` | `color` | `--aeris-text-2` | Non-current item color. | | `--aeris-breadcrumb-current-color` | `color` | `--aeris-text` | Current item color. | -| `--aeris-breadcrumb-border` | `color` | `--aeris-border` | Breadcrumb border color. | +| `--aeris-breadcrumb-border` | `color` | `--aeris-border-subtle` | Breadcrumb border color. | | `--aeris-breadcrumb-border-width` | `length` | `1px` | Breadcrumb border width. | | `--aeris-breadcrumb-radius` | `length` | `--aeris-radius-lg` | Breadcrumb corner radius. | | `--aeris-breadcrumb-shadow` | `shadow` | `none` | Breadcrumb shadow. | diff --git a/projects/docs/public/ai/22/components/chart.md b/projects/docs/public/ai/22/components/chart.md index 7e56412..acfff2f 100644 --- a/projects/docs/public/ai/22/components/chart.md +++ b/projects/docs/public/ai/22/components/chart.md @@ -132,7 +132,7 @@ interface AerisChartErrorEvent { | --- | --- | --- | --- | | `--aeris-chart-min-height` | `length` | `12rem` | Minimum chart container height. | | `--aeris-chart-padding` | `length` | `1rem` | Space between the rendered chart and its container border. | -| `--aeris-chart-border` | `color` | `--aeris-border` | Container border color. | +| `--aeris-chart-border` | `color` | `--aeris-border-subtle` | Container border color. | | `--aeris-chart-radius` | `length` | `--aeris-radius-lg` | Container corner radius. | | `--aeris-chart-background` | `color` | `--aeris-surface` | Container background. | | `--aeris-chart-color` | `color` | `--aeris-text` | Base text color used by the chart surface. | diff --git a/projects/docs/public/ai/22/components/color-picker.md b/projects/docs/public/ai/22/components/color-picker.md index a5bdf14..e288c04 100644 --- a/projects/docs/public/ai/22/components/color-picker.md +++ b/projects/docs/public/ai/22/components/color-picker.md @@ -29,7 +29,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; | Name | Type | Default | Description | | --- | --- | --- | --- | -| `value` | `string (model)` | `'#606c38'` | Current color value with two-way binding and Forms support. | +| `value` | `string (model)` | `'#5f6f36'` | Current color value with two-way binding and Forms support. | | `format` | `AerisColorFormat (model)` | `'hex'` | Active output format. Users can change it from the panel when format selection is enabled. | | `inputId` | `string` | `generated` | ID assigned to the visible color-picker trigger for label association. | | `name` | `string` | `''` | Native form field name submitted through a hidden input. | @@ -148,7 +148,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; Choose the primary color for your interface. @@ -234,7 +234,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; ` }) export class ColorPickerSignalSignalValueDemo { - protected readonly brandColor = signal('#606c38'); + protected readonly brandColor = signal('#5f6f36'); } ``` @@ -293,7 +293,7 @@ import { AerisColorPicker, type AerisColorFormat } from '@aeris-ui/core/color-pi ` }) export class ColorPickerFormatsSelectableFormatsDemo { - protected readonly formatColor = signal('#606c38'); + protected readonly formatColor = signal('#5f6f36'); protected readonly selectedFormat = signal('hex'); } ``` @@ -410,11 +410,11 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; }) export class ColorPickerPresetsPresetsDemo { protected readonly presets: readonly string[] = [ - '#fefae0', - '#606c38', - '#bc6c25', - '#dda15e', - '#283618', + '#f6f3e8', + '#5f6f36', + '#b75e26', + '#d79a32', + '#28351a', ]; } ``` @@ -447,7 +447,7 @@ export class ColorPickerSwatchOnlySwatchOnlyDemo { Swatch with input @@ -522,10 +522,10 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - - - + + + +
`, styles: ` @@ -562,8 +562,8 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - + +
`, styles: ` @@ -601,7 +601,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; template: `
- +
`, styles: ` @@ -651,8 +651,8 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - + +
`, styles: ` @@ -777,9 +777,9 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; }) export class ColorPickerFormsReactiveAndTemplateDrivenFormsDemo { protected readonly reactiveColor = - new FormControl('#bc6c25'); + new FormControl('#b75e26'); - protected templateColor = '#283618'; + protected templateColor = '#28351a'; } ``` @@ -865,7 +865,7 @@ import { AerisColorPicker, type AerisColorPickerChangeEvent } from '@aeris-ui/co {{ lastChange() }} diff --git a/projects/docs/public/ai/22/components/compare.md b/projects/docs/public/ai/22/components/compare.md index 6fbceb7..c7a0134 100644 --- a/projects/docs/public/ai/22/components/compare.md +++ b/projects/docs/public/ai/22/components/compare.md @@ -116,7 +116,7 @@ export interface AerisCompareInputEvent { | `--aeris-compare-min-height` | `<length>` | `12rem` | Minimum comparison height. | | `--aeris-compare-mobile-min-height` | `<length>` | `10rem` | Minimum height below 32rem. | | `--aeris-compare-border-width` | `<length>` | `1px` | Surface border width. | -| `--aeris-compare-border` | `<color>` | `var(--aeris-border)` | Surface border color. | +| `--aeris-compare-border` | `<color>` | `var(--aeris-border-subtle)` | Surface border color. | | `--aeris-compare-radius` | `<length>` | `var(--aeris-radius-lg)` | Surface corner radius. | | `--aeris-compare-background` | `<color>` | `var(--aeris-surface-2)` | Surface background. | | `--aeris-compare-color` | `<color>` | `var(--aeris-text)` | Fallback content color. | diff --git a/projects/docs/public/ai/22/components/confirm-popup.md b/projects/docs/public/ai/22/components/confirm-popup.md index f2fead9..73904ab 100644 --- a/projects/docs/public/ai/22/components/confirm-popup.md +++ b/projects/docs/public/ai/22/components/confirm-popup.md @@ -242,7 +242,7 @@ interface AerisConfirmPopupTemplateContext { | `--aeris-confirm-popup-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popup width. | | `--aeris-confirm-popup-padding` | `CSS custom property` | `1rem` | Internal spacing. | | `--aeris-confirm-popup-background` | `CSS custom property` | `var(--aeris-surface)` | Popup surface. | -| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border)` | Popup border. | +| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popup border. | | `--aeris-confirm-popup-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popup radius. | | `--aeris-confirm-popup-shadow` | `CSS custom property` | `component shadow` | Popup elevation. | | `--aeris-confirm-popup-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | diff --git a/projects/docs/public/ai/22/components/context-menu.md b/projects/docs/public/ai/22/components/context-menu.md index c9afff3..e56abaf 100644 --- a/projects/docs/public/ai/22/components/context-menu.md +++ b/projects/docs/public/ai/22/components/context-menu.md @@ -139,7 +139,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-max-width` | `length` | `min(22rem, calc(100vw - 1rem))` | Panel max width. | | `--aeris-context-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root menu max height. | | `--aeris-context-menu-padding` | `length` | `0.375rem` | Panel padding. | -| `--aeris-context-menu-border` | `color` | `--aeris-border` | Panel border color. | +| `--aeris-context-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | | `--aeris-context-menu-radius` | `length` | `--aeris-radius-lg` | Panel radius. | | `--aeris-context-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-context-menu-color` | `color` | `--aeris-text` | Panel text color. | @@ -150,7 +150,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-item-hover-background` | `color` | `primary mix` | Hover and active item background. | | `--aeris-context-menu-icon-size` | `length` | `1.125rem` | Default icon box size. | | `--aeris-context-menu-disabled-opacity` | `number` | `0.52` | Disabled item opacity. | -| `--aeris-context-menu-separator-color` | `color` | `--aeris-border` | Separator color. | +| `--aeris-context-menu-separator-color` | `color` | `--aeris-border-subtle` | Separator color. | | `--aeris-context-menu-submenu-width` | `length` | `14rem` | Submenu width. | ## Examples diff --git a/projects/docs/public/ai/22/components/file-upload.md b/projects/docs/public/ai/22/components/file-upload.md index d495ff6..d160bfd 100644 --- a/projects/docs/public/ai/22/components/file-upload.md +++ b/projects/docs/public/ai/22/components/file-upload.md @@ -157,7 +157,7 @@ interface AerisFileUploadEvent { | `--aeris-file-upload-background` | `CSS custom property` | `var(--aeris-surface)` | Uploader surface. | | `--aeris-file-upload-text` | `CSS custom property` | `var(--aeris-text)` | Primary text. | | `--aeris-file-upload-muted-text` | `CSS custom property` | `var(--aeris-text-3)` | Secondary text. | -| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border)` | Surface and file borders. | +| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Surface and file borders. | | `--aeris-file-upload-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Surface radius. | | `--aeris-file-upload-shadow` | `CSS custom property` | `component shadow` | Surface elevation. | | `--aeris-file-upload-toolbar-padding` | `CSS custom property` | `0.875rem` | Toolbar padding. | diff --git a/projects/docs/public/ai/22/components/galleria.md b/projects/docs/public/ai/22/components/galleria.md index 2ee292e..5864309 100644 --- a/projects/docs/public/ai/22/components/galleria.md +++ b/projects/docs/public/ai/22/components/galleria.md @@ -206,7 +206,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-gap` | `length` | `density gap × 1.5` | Space between stage, indicators, and thumbnails. | | `--aeris-galleria-radius` | `length` | `--aeris-radius-lg` | Stage and empty-state corner radius. | | `--aeris-galleria-stage-background` | `color` | `#11130f` | Media stage background. | -| `--aeris-galleria-border` | `color` | `Aeris border` | Stage and empty-state border. | +| `--aeris-galleria-border` | `color` | `--aeris-border-subtle` | Stage and empty-state border. | | `--aeris-galleria-shadow` | `shadow` | `soft elevation` | Inline stage shadow. | | `--aeris-galleria-transition-duration` | `time` | `420ms` | Item transition duration. | | `--aeris-galleria-transition-easing` | `timing function` | `spring-like curve` | Item transition easing. | @@ -215,7 +215,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-toolbar-radius` | `length` | `--aeris-radius-control` | Toolbar corner radius. | | `--aeris-galleria-grid-gap` | `length` | `--aeris-density-gap-lg` | Space between responsive grid tiles. | | `--aeris-galleria-grid-radius` | `length` | `--aeris-radius-lg` | Grid tile corner radius. | -| `--aeris-galleria-grid-border` | `color` | `--aeris-border` | Grid tile border. | +| `--aeris-galleria-grid-border` | `color` | `--aeris-border-subtle` | Grid tile border. | | `--aeris-galleria-thumbnail-gap` | `length` | `--aeris-density-gap` | Gap between thumbnail controls and items. | | `--aeris-galleria-thumbnail-radius` | `length` | `--aeris-radius-md` | Thumbnail corner radius. | | `--aeris-galleria-thumbnail-width` | `length` | `5.75rem` | Compact horizontal thumbnail width. | diff --git a/projects/docs/public/ai/22/components/mega-menu.md b/projects/docs/public/ai/22/components/mega-menu.md index 465bca2..9ad0880 100644 --- a/projects/docs/public/ai/22/components/mega-menu.md +++ b/projects/docs/public/ai/22/components/mega-menu.md @@ -112,7 +112,7 @@ interface AerisMegaMenuItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-mega-menu-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-mega-menu-border` | `color` | `--aeris-border` | Root and nested separator border color. | +| `--aeris-mega-menu-border` | `color` | `--aeris-border-subtle` | Root and nested separator border color. | | `--aeris-mega-menu-panel-background` | `color` | `--aeris-surface` | Mega panel background. | | `--aeris-mega-menu-panel-width` | `length` | `44rem` | Maximum panel width before viewport clamping. | | `--aeris-mega-menu-item-hover-background` | `color` | `primary mix` | Hover and open trigger surface. | diff --git a/projects/docs/public/ai/22/components/menu.md b/projects/docs/public/ai/22/components/menu.md index e282ea4..45dc95e 100644 --- a/projects/docs/public/ai/22/components/menu.md +++ b/projects/docs/public/ai/22/components/menu.md @@ -134,7 +134,7 @@ interface AerisMenuVisibilityEvent { | `--aeris-menu-width` | `length` | `16rem` | Panel width. | | `--aeris-menu-max-height` | `length` | `none / viewport in popup` | Maximum scrollable panel height. | | `--aeris-menu-background` | `color` | `--aeris-surface` | Panel background. | -| `--aeris-menu-border` | `color` | `--aeris-border` | Panel border. | +| `--aeris-menu-border` | `color` | `--aeris-border-subtle` | Panel border. | | `--aeris-menu-radius` | `length` | `--aeris-radius-lg` | Panel corner radius. | | `--aeris-menu-shadow` | `shadow` | `overlay shadow` | Panel elevation. | | `--aeris-menu-item-min-height` | `length` | `--aeris-item-height` | Minimum item height. | diff --git a/projects/docs/public/ai/22/components/menubar.md b/projects/docs/public/ai/22/components/menubar.md index 64dc07b..b05464a 100644 --- a/projects/docs/public/ai/22/components/menubar.md +++ b/projects/docs/public/ai/22/components/menubar.md @@ -113,7 +113,7 @@ interface AerisMenubarItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-menubar-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-menubar-border` | `color` | `--aeris-border` | Root and separator border color. | +| `--aeris-menubar-border` | `color` | `--aeris-border-subtle` | Root and separator border color. | | `--aeris-menubar-radius` | `length` | `--aeris-radius-lg` | Root surface corner radius. | | `--aeris-menubar-item-radius` | `length` | `--aeris-radius-control` | Hover and focus item corner radius. | | `--aeris-menubar-item-height` | `length` | `--aeris-item-height` | Minimum item height. | diff --git a/projects/docs/public/ai/22/components/panel.md b/projects/docs/public/ai/22/components/panel.md index 6d36e1b..3ea9741 100644 --- a/projects/docs/public/ai/22/components/panel.md +++ b/projects/docs/public/ai/22/components/panel.md @@ -111,11 +111,11 @@ interface AerisPanelToggleIconContext extends AerisPanelHeaderContext {} | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-panel-background` | `CSS custom property` | `--aeris-surface` | Panel surface. | -| `--aeris-panel-border` | `CSS custom property` | `--aeris-border` | Outer border. | +| `--aeris-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Outer border. | | `--aeris-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Outer corner radius. | | `--aeris-panel-shadow` | `CSS custom property` | `none` | Default elevation. | | `--aeris-panel-header-background` | `CSS custom property` | `surface mix` | Header surface. | -| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border` | Header separator. | +| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border-subtle` | Header separator. | | `--aeris-panel-title-color` | `CSS custom property` | `--aeris-text` | Header title color. | | `--aeris-panel-content-color` | `CSS custom property` | `--aeris-text-2` | Body text color. | | `--aeris-panel-icon-size` | `CSS custom property` | `1.25rem` | Default toggle icon box. | diff --git a/projects/docs/public/ai/22/components/popover.md b/projects/docs/public/ai/22/components/popover.md index 64455c6..12e97e1 100644 --- a/projects/docs/public/ai/22/components/popover.md +++ b/projects/docs/public/ai/22/components/popover.md @@ -118,7 +118,7 @@ interface AerisPopoverTemplateContext { | `--aeris-popover-width` | `CSS custom property` | `min(22rem, calc(100vw - 1rem))` | Popover width. | | `--aeris-popover-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popover width. | | `--aeris-popover-background` | `CSS custom property` | `var(--aeris-surface)` | Popover surface. | -| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border)` | Popover border. | +| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popover border. | | `--aeris-popover-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popover radius. | | `--aeris-popover-shadow` | `CSS custom property` | `component shadow` | Popover elevation. | | `--aeris-popover-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | diff --git a/projects/docs/public/ai/22/components/scroll-panel.md b/projects/docs/public/ai/22/components/scroll-panel.md index 37c6e1b..dc58e77 100644 --- a/projects/docs/public/ai/22/components/scroll-panel.md +++ b/projects/docs/public/ai/22/components/scroll-panel.md @@ -103,7 +103,7 @@ interface AerisScrollPanelEvent { | --- | --- | --- | --- | | `--aeris-scroll-panel-background` | `CSS custom property` | `--aeris-surface` | Viewport surface. | | `--aeris-scroll-panel-color` | `CSS custom property` | `--aeris-text` | Viewport text color inheritance. | -| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border` | Viewport border. | +| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Viewport border. | | `--aeris-scroll-panel-border-width` | `CSS custom property` | `1px` | Viewport border thickness. | | `--aeris-scroll-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Viewport corner radius. | | `--aeris-scroll-panel-padding` | `CSS custom property` | `1rem` | Content padding. | diff --git a/projects/docs/public/ai/22/components/select.md b/projects/docs/public/ai/22/components/select.md index 2f3ba80..5a47fcb 100644 --- a/projects/docs/public/ai/22/components/select.md +++ b/projects/docs/public/ai/22/components/select.md @@ -774,11 +774,11 @@ export class SelectTemplatesOptionAndSelectedValueTemplatesDemo { } .team-mark[data-team='platform'] { - background: #bc6c25; + background: #b75e26; } .team-mark[data-team='a11y'] { - background: #283618; + background: #28351a; } .selected-team, diff --git a/projects/docs/public/ai/22/components/splitter.md b/projects/docs/public/ai/22/components/splitter.md index d03bda2..4290b71 100644 --- a/projects/docs/public/ai/22/components/splitter.md +++ b/projects/docs/public/ai/22/components/splitter.md @@ -111,7 +111,7 @@ interface AerisSplitterResizeEvent { | --- | --- | --- | --- | | `--aeris-splitter-background` | `CSS custom property` | `--aeris-surface` | Root surface. | | `--aeris-splitter-color` | `CSS custom property` | `--aeris-text` | Root text color. | -| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border` | Root border color. | +| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border-subtle` | Root border color. | | `--aeris-splitter-border-width` | `CSS custom property` | `1px` | Root border thickness. | | `--aeris-splitter-radius` | `CSS custom property` | `--aeris-radius-lg` | Root corner radius. | | `--aeris-splitter-shadow` | `CSS custom property` | `none` | Root elevation. | diff --git a/projects/docs/public/ai/22/components/tiered-menu.md b/projects/docs/public/ai/22/components/tiered-menu.md index e8ebad1..359bd53 100644 --- a/projects/docs/public/ai/22/components/tiered-menu.md +++ b/projects/docs/public/ai/22/components/tiered-menu.md @@ -136,7 +136,7 @@ interface AerisTieredMenuItemTemplateContext { | `--aeris-tiered-menu-max-width` | `length` | `min(22rem, 100%)` | Root panel maximum width. | | `--aeris-tiered-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root list maximum height. | | `--aeris-tiered-menu-padding` | `length` | `0.375rem` | Panel and submenu padding. | -| `--aeris-tiered-menu-border` | `color` | `--aeris-border` | Panel border color. | +| `--aeris-tiered-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | | `--aeris-tiered-menu-radius` | `length` | `--aeris-radius-lg` | Panel and submenu radius. | | `--aeris-tiered-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-tiered-menu-shadow` | `shadow` | `overlay shadow` | Panel and submenu elevation. | diff --git a/projects/docs/public/ai/22/components/toolbar.md b/projects/docs/public/ai/22/components/toolbar.md index a06cc03..b03fdba 100644 --- a/projects/docs/public/ai/22/components/toolbar.md +++ b/projects/docs/public/ai/22/components/toolbar.md @@ -76,7 +76,7 @@ type AerisToolbarAlign = 'start' | 'center' | 'end' | 'stretch'; | --- | --- | --- | --- | | `--aeris-toolbar-background` | `color` | `--aeris-surface` | Toolbar surface color. | | `--aeris-toolbar-color` | `color` | `--aeris-text` | Toolbar text color. | -| `--aeris-toolbar-border` | `color` | `--aeris-border` | Toolbar border color. | +| `--aeris-toolbar-border` | `color` | `--aeris-border-subtle` | Toolbar border color. | | `--aeris-toolbar-border-width` | `length` | `1px` | Toolbar border width. | | `--aeris-toolbar-radius` | `length` | `--aeris-radius-lg` | Toolbar corner radius. | | `--aeris-toolbar-shadow` | `shadow` | `none` | Toolbar shadow. | diff --git a/projects/docs/public/llms-full.txt b/projects/docs/public/llms-full.txt index 189a3ff..4eaf01d 100644 --- a/projects/docs/public/llms-full.txt +++ b/projects/docs/public/llms-full.txt @@ -178,7 +178,7 @@ Select Custom in the wizard to enter surface, primary, secondary, accent, and co ##### Terminal ```bash -ng add @aeris-ui/core@22.0.0-alpha.2 --project=web --surface="#dfe8ee" --primary="#7196b4" --secondary="#6d9992" --accent="#d8ad70" --contrast="#31536a" --density=compact --corners=soft --schemes=both --default-mode=system --strategy=build-time --direction=ltr --skip-prompts +ng add @aeris-ui/core@22.0.0-alpha.2 --project=web --surface="#eef3f5" --primary="#357a9e" --secondary="#347b73" --accent="#d46f58" --contrast="#163e54" --density=compact --corners=soft --schemes=both --default-mode=system --strategy=build-time --direction=ltr --skip-prompts ``` ##### aeris.setup.json @@ -188,11 +188,11 @@ ng add @aeris-ui/core@22.0.0-alpha.2 --project=web --surface="#dfe8ee" --primary "$schema": "./node_modules/@aeris-ui/core/setup-config.schema.json", "theme": { "seeds": { - "surface": "#dfe8ee", - "primary": "#7196b4", - "secondary": "#6d9992", - "accent": "#d8ad70", - "contrast": "#31536a" + "surface": "#eef3f5", + "primary": "#357a9e", + "secondary": "#347b73", + "accent": "#d46f58", + "contrast": "#163e54" } } } @@ -314,9 +314,9 @@ export const appConfig: ApplicationConfig = { }; ``` -- **Aeris Earth:** Deep olive, warm copper, and sunlit cornsilk. -- **Coastal Glass:** Clear blues, sea glass, and sun-warmed gold. -- **Orchid Dusk:** Soft violet, muted rose, and evening plum. +- **Aeris Earth:** Grounded olive, burnished copper, and warm amber on soft ivory. +- **Coastal Glass:** Clear ocean blue, balanced teal, and a restrained coral accent. +- **Orchid Dusk:** Confident violet, rich berry, and warm gold on pale lavender. - **Aeris Monochrome:** Black-and-white interface colors with distinct neutral action tiers and restrained status accents. - [Create a custom theme](https://aeris-ui.dev/guides/theming) @@ -401,11 +401,11 @@ export const appConfig: ApplicationConfig = { themeModeStorageKey: 'my-app-color-mode', theme: { palette: { - surface: '#fefae0', - primary: '#606c38', - secondary: '#bc6c25', - accent: '#dda15e', - contrast: '#283618', + surface: '#f6f3e8', + primary: '#5f6f36', + secondary: '#b75e26', + accent: '#d79a32', + contrast: '#28351a', }, density: 'medium', radius: 'rounded', @@ -652,7 +652,7 @@ Start with the broadest decision and customize more narrowly only when the appli | page, surface, surface2, surface3 | Mode-specific surface hierarchy | CSS color | | interactiveHover | Shared neutral hover treatment for interactive items | CSS color | | text, text2, text3 | Neutral content hierarchy | CSS color | -| border, borderStrong, focus | Boundaries and focus indication | CSS color | +| borderSubtle, border, borderStrong, focus | Surface separation, structural boundaries, control boundaries, and focus indication | CSS color | | accent | Mode-specific decorative accent | CSS color | | shadowXs, shadowSm | Mode-specific elevation | CSS shadow | @@ -718,11 +718,11 @@ export const appConfig: ApplicationConfig = { provideAeris({ theme: { palette: { - surface: '#dfe8ee', - primary: '#7196b4', - secondary: '#6d9992', - accent: '#d8ad70', - contrast: '#31536a', + surface: '#eef3f5', + primary: '#357a9e', + secondary: '#347b73', + accent: '#d46f58', + contrast: '#163e54', }, dark: { page: '#090b0f', @@ -746,6 +746,7 @@ Use a semantic text token when color communicates a deliberate role. These text | Purpose | Tokens | Use | | --- | --- | --- | | Ordinary content | --aeris-text, --aeris-text-2, --aeris-text-3 | Default headings, body copy, supporting text, labels, and placeholders | +| Quiet surface separation | --aeris-border-subtle | Optional low-emphasis edges around non-interactive cards, panels, and overlay shells | | Colored text on neutral surfaces | --aeris-primary-text, --aeris-secondary-text, and semantic *-text tokens | Links, statuses, or emphasis where color is intentional and meaningful | | Content on solid semantic colors | --aeris-on-primary, --aeris-on-success, and other on-* tokens | Text and icons placed on the corresponding filled background | @@ -802,11 +803,11 @@ import type { AerisThemeOverride } from '@aeris-ui/core/theming'; export const productTheme: AerisThemeOverride = { palette: { - surface: '#dfe8ee', - primary: '#7196b4', - secondary: '#6d9992', - accent: '#d8ad70', - contrast: '#31536a', + surface: '#eef3f5', + primary: '#357a9e', + secondary: '#347b73', + accent: '#d46f58', + contrast: '#163e54', }, light: { tones: { @@ -936,7 +937,7 @@ Create one JSON configuration, generate the CSS before the application build, an "radius": "soft", "palette": { "primary": "#527da1", - "accent": "#d8ad70" + "accent": "#d46f58" } } } @@ -1217,11 +1218,11 @@ import type { AerisThemeOverride } from '@aeris-ui/core/theming'; export const productTheme: AerisThemeOverride = { palette: { - surface: '#fefae0', - primary: '#606c38', - secondary: '#bc6c25', - accent: '#dda15e', - contrast: '#283618', + surface: '#f6f3e8', + primary: '#5f6f36', + secondary: '#b75e26', + accent: '#d79a32', + contrast: '#28351a', }, density: 'medium', radius: 'rounded', @@ -4524,7 +4525,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; | Name | Type | Default | Description | | --- | --- | --- | --- | -| `value` | `string (model)` | `'#606c38'` | Current color value with two-way binding and Forms support. | +| `value` | `string (model)` | `'#5f6f36'` | Current color value with two-way binding and Forms support. | | `format` | `AerisColorFormat (model)` | `'hex'` | Active output format. Users can change it from the panel when format selection is enabled. | | `inputId` | `string` | `generated` | ID assigned to the visible color-picker trigger for label association. | | `name` | `string` | `''` | Native form field name submitted through a hidden input. | @@ -4643,7 +4644,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; Choose the primary color for your interface. @@ -4729,7 +4730,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; ` }) export class ColorPickerSignalSignalValueDemo { - protected readonly brandColor = signal('#606c38'); + protected readonly brandColor = signal('#5f6f36'); } ``` @@ -4788,7 +4789,7 @@ import { AerisColorPicker, type AerisColorFormat } from '@aeris-ui/core/color-pi ` }) export class ColorPickerFormatsSelectableFormatsDemo { - protected readonly formatColor = signal('#606c38'); + protected readonly formatColor = signal('#5f6f36'); protected readonly selectedFormat = signal('hex'); } ``` @@ -4905,11 +4906,11 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; }) export class ColorPickerPresetsPresetsDemo { protected readonly presets: readonly string[] = [ - '#fefae0', - '#606c38', - '#bc6c25', - '#dda15e', - '#283618', + '#f6f3e8', + '#5f6f36', + '#b75e26', + '#d79a32', + '#28351a', ]; } ``` @@ -4942,7 +4943,7 @@ export class ColorPickerSwatchOnlySwatchOnlyDemo { Swatch with input @@ -5017,10 +5018,10 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - - - + + + +
`, styles: ` @@ -5057,8 +5058,8 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - + +
`, styles: ` @@ -5096,7 +5097,7 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; template: `
- +
`, styles: ` @@ -5146,8 +5147,8 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; imports: [AerisColorPicker], template: `
- - + +
`, styles: ` @@ -5272,9 +5273,9 @@ import { AerisColorPicker } from '@aeris-ui/core/color-picker'; }) export class ColorPickerFormsReactiveAndTemplateDrivenFormsDemo { protected readonly reactiveColor = - new FormControl('#bc6c25'); + new FormControl('#b75e26'); - protected templateColor = '#283618'; + protected templateColor = '#28351a'; } ``` @@ -5360,7 +5361,7 @@ import { AerisColorPicker, type AerisColorPickerChangeEvent } from '@aeris-ui/co {{ lastChange() }} @@ -18255,11 +18256,11 @@ export class SelectTemplatesOptionAndSelectedValueTemplatesDemo { } .team-mark[data-team='platform'] { - background: #bc6c25; + background: #b75e26; } .team-mark[data-team='a11y'] { - background: #283618; + background: #28351a; } .selected-team, @@ -32681,11 +32682,11 @@ interface AerisPanelToggleIconContext extends AerisPanelHeaderContext {} | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-panel-background` | `CSS custom property` | `--aeris-surface` | Panel surface. | -| `--aeris-panel-border` | `CSS custom property` | `--aeris-border` | Outer border. | +| `--aeris-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Outer border. | | `--aeris-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Outer corner radius. | | `--aeris-panel-shadow` | `CSS custom property` | `none` | Default elevation. | | `--aeris-panel-header-background` | `CSS custom property` | `surface mix` | Header surface. | -| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border` | Header separator. | +| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border-subtle` | Header separator. | | `--aeris-panel-title-color` | `CSS custom property` | `--aeris-text` | Header title color. | | `--aeris-panel-content-color` | `CSS custom property` | `--aeris-text-2` | Body text color. | | `--aeris-panel-icon-size` | `CSS custom property` | `1.25rem` | Default toggle icon box. | @@ -33258,7 +33259,7 @@ interface AerisScrollPanelEvent { | --- | --- | --- | --- | | `--aeris-scroll-panel-background` | `CSS custom property` | `--aeris-surface` | Viewport surface. | | `--aeris-scroll-panel-color` | `CSS custom property` | `--aeris-text` | Viewport text color inheritance. | -| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border` | Viewport border. | +| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Viewport border. | | `--aeris-scroll-panel-border-width` | `CSS custom property` | `1px` | Viewport border thickness. | | `--aeris-scroll-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Viewport corner radius. | | `--aeris-scroll-panel-padding` | `CSS custom property` | `1rem` | Content padding. | @@ -34047,7 +34048,7 @@ interface AerisSplitterResizeEvent { | --- | --- | --- | --- | | `--aeris-splitter-background` | `CSS custom property` | `--aeris-surface` | Root surface. | | `--aeris-splitter-color` | `CSS custom property` | `--aeris-text` | Root text color. | -| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border` | Root border color. | +| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border-subtle` | Root border color. | | `--aeris-splitter-border-width` | `CSS custom property` | `1px` | Root border thickness. | | `--aeris-splitter-radius` | `CSS custom property` | `--aeris-radius-lg` | Root corner radius. | | `--aeris-splitter-shadow` | `CSS custom property` | `none` | Root elevation. | @@ -36206,7 +36207,7 @@ type AerisToolbarAlign = 'start' | 'center' | 'end' | 'stretch'; | --- | --- | --- | --- | | `--aeris-toolbar-background` | `color` | `--aeris-surface` | Toolbar surface color. | | `--aeris-toolbar-color` | `color` | `--aeris-text` | Toolbar text color. | -| `--aeris-toolbar-border` | `color` | `--aeris-border` | Toolbar border color. | +| `--aeris-toolbar-border` | `color` | `--aeris-border-subtle` | Toolbar border color. | | `--aeris-toolbar-border-width` | `length` | `1px` | Toolbar border width. | | `--aeris-toolbar-radius` | `length` | `--aeris-radius-lg` | Toolbar corner radius. | | `--aeris-toolbar-shadow` | `shadow` | `none` | Toolbar shadow. | @@ -37681,7 +37682,7 @@ interface AerisConfirmPopupTemplateContext { | `--aeris-confirm-popup-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popup width. | | `--aeris-confirm-popup-padding` | `CSS custom property` | `1rem` | Internal spacing. | | `--aeris-confirm-popup-background` | `CSS custom property` | `var(--aeris-surface)` | Popup surface. | -| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border)` | Popup border. | +| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popup border. | | `--aeris-confirm-popup-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popup radius. | | `--aeris-confirm-popup-shadow` | `CSS custom property` | `component shadow` | Popup elevation. | | `--aeris-confirm-popup-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | @@ -41175,7 +41176,7 @@ interface AerisPopoverTemplateContext { | `--aeris-popover-width` | `CSS custom property` | `min(22rem, calc(100vw - 1rem))` | Popover width. | | `--aeris-popover-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popover width. | | `--aeris-popover-background` | `CSS custom property` | `var(--aeris-surface)` | Popover surface. | -| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border)` | Popover border. | +| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popover border. | | `--aeris-popover-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popover radius. | | `--aeris-popover-shadow` | `CSS custom property` | `component shadow` | Popover elevation. | | `--aeris-popover-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | @@ -42484,7 +42485,7 @@ interface AerisFileUploadEvent { | `--aeris-file-upload-background` | `CSS custom property` | `var(--aeris-surface)` | Uploader surface. | | `--aeris-file-upload-text` | `CSS custom property` | `var(--aeris-text)` | Primary text. | | `--aeris-file-upload-muted-text` | `CSS custom property` | `var(--aeris-text-3)` | Secondary text. | -| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border)` | Surface and file borders. | +| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Surface and file borders. | | `--aeris-file-upload-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Surface radius. | | `--aeris-file-upload-shadow` | `CSS custom property` | `component shadow` | Surface elevation. | | `--aeris-file-upload-toolbar-padding` | `CSS custom property` | `0.875rem` | Toolbar padding. | @@ -42961,7 +42962,7 @@ interface AerisBreadcrumbEllipsisTemplateContext { | `--aeris-breadcrumb-color` | `color` | `--aeris-text` | Default breadcrumb text color. | | `--aeris-breadcrumb-muted-color` | `color` | `--aeris-text-2` | Non-current item color. | | `--aeris-breadcrumb-current-color` | `color` | `--aeris-text` | Current item color. | -| `--aeris-breadcrumb-border` | `color` | `--aeris-border` | Breadcrumb border color. | +| `--aeris-breadcrumb-border` | `color` | `--aeris-border-subtle` | Breadcrumb border color. | | `--aeris-breadcrumb-border-width` | `length` | `1px` | Breadcrumb border width. | | `--aeris-breadcrumb-radius` | `length` | `--aeris-radius-lg` | Breadcrumb corner radius. | | `--aeris-breadcrumb-shadow` | `shadow` | `none` | Breadcrumb shadow. | @@ -43480,7 +43481,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-max-width` | `length` | `min(22rem, calc(100vw - 1rem))` | Panel max width. | | `--aeris-context-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root menu max height. | | `--aeris-context-menu-padding` | `length` | `0.375rem` | Panel padding. | -| `--aeris-context-menu-border` | `color` | `--aeris-border` | Panel border color. | +| `--aeris-context-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | | `--aeris-context-menu-radius` | `length` | `--aeris-radius-lg` | Panel radius. | | `--aeris-context-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-context-menu-color` | `color` | `--aeris-text` | Panel text color. | @@ -43491,7 +43492,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-item-hover-background` | `color` | `primary mix` | Hover and active item background. | | `--aeris-context-menu-icon-size` | `length` | `1.125rem` | Default icon box size. | | `--aeris-context-menu-disabled-opacity` | `number` | `0.52` | Disabled item opacity. | -| `--aeris-context-menu-separator-color` | `color` | `--aeris-border` | Separator color. | +| `--aeris-context-menu-separator-color` | `color` | `--aeris-border-subtle` | Separator color. | | `--aeris-context-menu-submenu-width` | `length` | `14rem` | Submenu width. | #### Examples @@ -44017,7 +44018,7 @@ interface AerisMegaMenuItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-mega-menu-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-mega-menu-border` | `color` | `--aeris-border` | Root and nested separator border color. | +| `--aeris-mega-menu-border` | `color` | `--aeris-border-subtle` | Root and nested separator border color. | | `--aeris-mega-menu-panel-background` | `color` | `--aeris-surface` | Mega panel background. | | `--aeris-mega-menu-panel-width` | `length` | `44rem` | Maximum panel width before viewport clamping. | | `--aeris-mega-menu-item-hover-background` | `color` | `primary mix` | Hover and open trigger surface. | @@ -44384,7 +44385,7 @@ interface AerisMenuVisibilityEvent { | `--aeris-menu-width` | `length` | `16rem` | Panel width. | | `--aeris-menu-max-height` | `length` | `none / viewport in popup` | Maximum scrollable panel height. | | `--aeris-menu-background` | `color` | `--aeris-surface` | Panel background. | -| `--aeris-menu-border` | `color` | `--aeris-border` | Panel border. | +| `--aeris-menu-border` | `color` | `--aeris-border-subtle` | Panel border. | | `--aeris-menu-radius` | `length` | `--aeris-radius-lg` | Panel corner radius. | | `--aeris-menu-shadow` | `shadow` | `overlay shadow` | Panel elevation. | | `--aeris-menu-item-min-height` | `length` | `--aeris-item-height` | Minimum item height. | @@ -45424,7 +45425,7 @@ interface AerisMenubarItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-menubar-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-menubar-border` | `color` | `--aeris-border` | Root and separator border color. | +| `--aeris-menubar-border` | `color` | `--aeris-border-subtle` | Root and separator border color. | | `--aeris-menubar-radius` | `length` | `--aeris-radius-lg` | Root surface corner radius. | | `--aeris-menubar-item-radius` | `length` | `--aeris-radius-control` | Hover and focus item corner radius. | | `--aeris-menubar-item-height` | `length` | `--aeris-item-height` | Minimum item height. | @@ -46452,7 +46453,7 @@ interface AerisTieredMenuItemTemplateContext { | `--aeris-tiered-menu-max-width` | `length` | `min(22rem, 100%)` | Root panel maximum width. | | `--aeris-tiered-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root list maximum height. | | `--aeris-tiered-menu-padding` | `length` | `0.375rem` | Panel and submenu padding. | -| `--aeris-tiered-menu-border` | `color` | `--aeris-border` | Panel border color. | +| `--aeris-tiered-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | | `--aeris-tiered-menu-radius` | `length` | `--aeris-radius-lg` | Panel and submenu radius. | | `--aeris-tiered-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-tiered-menu-shadow` | `shadow` | `overlay shadow` | Panel and submenu elevation. | @@ -47306,7 +47307,7 @@ interface AerisChartErrorEvent { | --- | --- | --- | --- | | `--aeris-chart-min-height` | `length` | `12rem` | Minimum chart container height. | | `--aeris-chart-padding` | `length` | `1rem` | Space between the rendered chart and its container border. | -| `--aeris-chart-border` | `color` | `--aeris-border` | Container border color. | +| `--aeris-chart-border` | `color` | `--aeris-border-subtle` | Container border color. | | `--aeris-chart-radius` | `length` | `--aeris-radius-lg` | Container corner radius. | | `--aeris-chart-background` | `color` | `--aeris-surface` | Container background. | | `--aeris-chart-color` | `color` | `--aeris-text` | Base text color used by the chart surface. | @@ -49906,7 +49907,7 @@ export interface AerisCompareInputEvent { | `--aeris-compare-min-height` | `<length>` | `12rem` | Minimum comparison height. | | `--aeris-compare-mobile-min-height` | `<length>` | `10rem` | Minimum height below 32rem. | | `--aeris-compare-border-width` | `<length>` | `1px` | Surface border width. | -| `--aeris-compare-border` | `<color>` | `var(--aeris-border)` | Surface border color. | +| `--aeris-compare-border` | `<color>` | `var(--aeris-border-subtle)` | Surface border color. | | `--aeris-compare-radius` | `<length>` | `var(--aeris-radius-lg)` | Surface corner radius. | | `--aeris-compare-background` | `<color>` | `var(--aeris-surface-2)` | Surface background. | | `--aeris-compare-color` | `<color>` | `var(--aeris-text)` | Fallback content color. | @@ -50735,7 +50736,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-gap` | `length` | `density gap × 1.5` | Space between stage, indicators, and thumbnails. | | `--aeris-galleria-radius` | `length` | `--aeris-radius-lg` | Stage and empty-state corner radius. | | `--aeris-galleria-stage-background` | `color` | `#11130f` | Media stage background. | -| `--aeris-galleria-border` | `color` | `Aeris border` | Stage and empty-state border. | +| `--aeris-galleria-border` | `color` | `--aeris-border-subtle` | Stage and empty-state border. | | `--aeris-galleria-shadow` | `shadow` | `soft elevation` | Inline stage shadow. | | `--aeris-galleria-transition-duration` | `time` | `420ms` | Item transition duration. | | `--aeris-galleria-transition-easing` | `timing function` | `spring-like curve` | Item transition easing. | @@ -50744,7 +50745,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-toolbar-radius` | `length` | `--aeris-radius-control` | Toolbar corner radius. | | `--aeris-galleria-grid-gap` | `length` | `--aeris-density-gap-lg` | Space between responsive grid tiles. | | `--aeris-galleria-grid-radius` | `length` | `--aeris-radius-lg` | Grid tile corner radius. | -| `--aeris-galleria-grid-border` | `color` | `--aeris-border` | Grid tile border. | +| `--aeris-galleria-grid-border` | `color` | `--aeris-border-subtle` | Grid tile border. | | `--aeris-galleria-thumbnail-gap` | `length` | `--aeris-density-gap` | Gap between thumbnail controls and items. | | `--aeris-galleria-thumbnail-radius` | `length` | `--aeris-radius-md` | Thumbnail corner radius. | | `--aeris-galleria-thumbnail-width` | `length` | `5.75rem` | Compact horizontal thumbnail width. | diff --git a/projects/docs/src/app/app.scss b/projects/docs/src/app/app.scss index 7d520ce..cbad5a7 100644 --- a/projects/docs/src/app/app.scss +++ b/projects/docs/src/app/app.scss @@ -194,7 +194,7 @@ height: 14px; display: grid; grid-template-columns: repeat(5, 1fr); - border: 1px solid color-mix(in srgb, var(--border-strong) 72%, transparent); + border: 1px solid color-mix(in srgb, var(--border) 72%, transparent); border-radius: 5px; overflow: hidden; } @@ -241,7 +241,7 @@ cursor: pointer; } .docs-choice-grid > button:hover { - border-color: var(--border-strong); + border-color: var(--border); background: var(--surface-2); } .docs-choice-grid > button.active { diff --git a/projects/docs/src/app/data/docs-palettes.ts b/projects/docs/src/app/data/docs-palettes.ts index df10c27..be24991 100644 --- a/projects/docs/src/app/data/docs-palettes.ts +++ b/projects/docs/src/app/data/docs-palettes.ts @@ -30,7 +30,7 @@ export const DOCS_PALETTES: readonly DocsPalette[] = [ id: 'earth', name: 'Aeris Earth', shortName: 'Earth', - description: 'Deep olive, warm copper, and sunlit cornsilk.', + description: 'Grounded olive, burnished copper, and warm amber on soft ivory.', theme: AERIS_THEME_PRESETS.earth, palette: AERIS_THEME_PRESETS.earth.palette, swatches: paletteSwatches(AERIS_THEME_PRESETS.earth.palette), @@ -39,7 +39,7 @@ export const DOCS_PALETTES: readonly DocsPalette[] = [ id: 'coastal', name: 'Coastal Glass', shortName: 'Coastal', - description: 'Clear blues, sea glass, and sun-warmed gold.', + description: 'Clear ocean blue, balanced teal, and a restrained coral accent.', theme: AERIS_THEME_PRESETS.coastal, palette: AERIS_THEME_PRESETS.coastal.palette, swatches: paletteSwatches(AERIS_THEME_PRESETS.coastal.palette), @@ -48,7 +48,7 @@ export const DOCS_PALETTES: readonly DocsPalette[] = [ id: 'orchid', name: 'Orchid Dusk', shortName: 'Orchid', - description: 'Soft violet, muted rose, and evening plum.', + description: 'Confident violet, rich berry, and warm gold on pale lavender.', theme: AERIS_THEME_PRESETS.orchid, palette: AERIS_THEME_PRESETS.orchid.palette, swatches: paletteSwatches(AERIS_THEME_PRESETS.orchid.palette), diff --git a/projects/docs/src/app/features/design-lab/design-lab.scss b/projects/docs/src/app/features/design-lab/design-lab.scss index 9c95cca..d31350d 100644 --- a/projects/docs/src/app/features/design-lab/design-lab.scss +++ b/projects/docs/src/app/features/design-lab/design-lab.scss @@ -143,7 +143,7 @@ } .design-lab__presets button:hover { - border-color: var(--border-strong); + border-color: var(--border); background: var(--surface-2); } @@ -498,7 +498,7 @@ height: 1.5rem; flex: 0 0 auto; display: block; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: 50%; } diff --git a/projects/docs/src/app/pages/components/button/button/button.page.html b/projects/docs/src/app/pages/components/button/button/button.page.html index 26c1251..8a91983 100644 --- a/projects/docs/src/app/pages/components/button/button/button.page.html +++ b/projects/docs/src/app/pages/components/button/button/button.page.html @@ -384,7 +384,7 @@

Design tokens

--aeris-primaryPrimary button background.#606c38 + >Primary button background.#5f6f36
--aeris-primary-boundaryDesign tokens
--aeris-primaryTrigger background.#606c38 + >#5f6f36
--aeris-focusDesign tokens
--aeris-primaryPrimary segments and selected menu feedback.#606c38 + >#5f6f36
--aeris-focusDesign tokens
--aeris-primaryCurrent page and selected row option.#606c38 + >#5f6f36
--aeris-focusDesign tokens
--aeris-primarySelected and hovered row accents.#606c38 + >#5f6f36
--aeris-focusVisible focus rings.Design tokens
--aeris-timeline-marker-colorDefault marker color; overridden per event by markerColor.--aeris-border-strong + >--aeris-border
--aeris-timeline-connector-colorDesign tokens
--aeris-tree-table-borderViewport border color.--aeris-border + >Viewport border color.--aeris-border
--aeris-tree-table-radiusDesign tokens
--aeris-auto-complete-border--aeris-border-strong#c7c9c0--aeris-border#c7c9c0Input border color.
diff --git a/projects/docs/src/app/pages/components/form/cascade-select/cascade-select.page.html b/projects/docs/src/app/pages/components/form/cascade-select/cascade-select.page.html index e9dbd77..73b8503 100644 --- a/projects/docs/src/app/pages/components/form/cascade-select/cascade-select.page.html +++ b/projects/docs/src/app/pages/components/form/cascade-select/cascade-select.page.html @@ -484,7 +484,7 @@

Design tokens

--aeris-cascade-select-border--aeris-border-strong#c7c9c0--aeris-border#c7c9c0Trigger border color.
diff --git a/projects/docs/src/app/pages/components/form/checkbox/checkbox.page.html b/projects/docs/src/app/pages/components/form/checkbox/checkbox.page.html index d1de560..c512696 100644 --- a/projects/docs/src/app/pages/components/form/checkbox/checkbox.page.html +++ b/projects/docs/src/app/pages/components/form/checkbox/checkbox.page.html @@ -415,14 +415,14 @@

Design tokens

--aeris-primarySelected and mixed control background.#606c38 + >#5f6f36
--aeris-on-primarySelected icon color.#17200f
- --aeris-border-strongUnchecked border.--aeris-borderUnchecked border.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.html b/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.html index 46213a8..ac32cc3 100644 --- a/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.html +++ b/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.html @@ -34,7 +34,7 @@

Features showcase

Choose the primary color for your interface.
@@ -43,7 +43,7 @@

Features showcase

<aeris-color-picker inputId="color-basic" ariaDescribedby="color-basic-help" - value="#606c38" + value="#5f6f36" /> <small id="color-basic-help">Choose the primary color for your interface.</small> </div> @@ -162,7 +162,7 @@

Features showcase

Features showcase
@@ -182,7 +182,7 @@

Features showcase

<label for="color-swatch-only">Compact color</label> <aeris-color-picker inputId="color-swatch-only" - value="#606c38" + value="#5f6f36" [showValue]="false" [showInput]="false" ariaLabel="Compact color" @@ -192,7 +192,7 @@

Features showcase

<label for="color-swatch-with-input">Swatch with input</label> <aeris-color-picker inputId="color-swatch-with-input" - value="#dda15e" + value="#d79a32" [showValue]="false" /> </div> @@ -205,16 +205,16 @@

Features showcase

description="Four sizes align ColorPicker with the Aeris form density scale." >
- - - - + + + + 
<div class="field-grid">
-  <aeris-color-picker size="xs" value="#fefae0" />
-  <aeris-color-picker size="sm" value="#606c38" />
-  <aeris-color-picker size="md" value="#bc6c25" />
-  <aeris-color-picker size="lg" value="#dda15e" />
+  <aeris-color-picker size="xs" value="#f6f3e8" />
+  <aeris-color-picker size="sm" value="#5f6f36" />
+  <aeris-color-picker size="md" value="#b75e26" />
+  <aeris-color-picker size="lg" value="#d79a32" />
 </div>
@@ -224,12 +224,12 @@

Features showcase

description="Use outline for clear field boundaries or filled for a quieter surface." >
- - + + 
<div class="field-grid">
-  <aeris-color-picker appearance="outline" value="#606c38" />
-  <aeris-color-picker appearance="filled" value="#606c38" />
+  <aeris-color-picker appearance="outline" value="#5f6f36" />
+  <aeris-color-picker appearance="filled" value="#5f6f36" />
 </div>
@@ -240,11 +240,11 @@

Features showcase

>
- + 
<div class="field">
   <label for="color-clear">Optional accent</label>
-  <aeris-color-picker inputId="color-clear" value="#283618" clearable />
+  <aeris-color-picker inputId="color-clear" value="#28351a" clearable />
 </div>
@@ -254,12 +254,12 @@

Features showcase

description="Disabled controls block interaction and form submission; read-only controls keep the value visible without editing." >
- - + + 
<div class="field-grid">
-  <aeris-color-picker value="#606c38" disabled />
-  <aeris-color-picker value="#dda15e" readonly />
+  <aeris-color-picker value="#5f6f36" disabled />
+  <aeris-color-picker value="#d79a32" readonly />
 </div>
@@ -359,7 +359,7 @@

Features showcase

{{ lastChange() }} @@ -368,7 +368,7 @@

Features showcase

<label for="color-events">Event color</label> <aeris-color-picker inputId="color-events" - value="#bc6c25" + value="#b75e26" (changed)="recordChange($event)" /> <small aria-live="polite">{{ lastChange() }}</small> @@ -473,7 +473,7 @@

Design tokens

>#f2f0ec
- --aeris-border-strong--aeris-borderDefault field and swatch borders.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.ts b/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.ts index 731b3a2..686623b 100644 --- a/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.ts +++ b/projects/docs/src/app/pages/components/form/color-picker/color-picker.page.ts @@ -40,25 +40,25 @@ interface ApiRow { styleUrl: './color-picker.page.scss', }) export class ColorPickerPage { - protected readonly brandColor = signal('#606c38'); - protected readonly accentColor = signal('#dda15e'); - protected readonly formatColor = signal('#606c38'); + protected readonly brandColor = signal('#5f6f36'); + protected readonly accentColor = signal('#d79a32'); + protected readonly formatColor = signal('#5f6f36'); protected readonly selectedFormat = signal('hex'); protected readonly invalidColor = signal(''); protected readonly touched = signal(false); protected readonly lastChange = signal('No color change yet'); - protected readonly reactiveColor = new FormControl('#bc6c25'); - protected templateColor = '#283618'; + protected readonly reactiveColor = new FormControl('#b75e26'); + protected templateColor = '#28351a'; protected readonly invalid = computed( () => this.touched() && this.invalidColor().trim().length === 0, ); protected readonly presets: readonly string[] = [ - '#fefae0', - '#606c38', - '#bc6c25', - '#dda15e', - '#283618', + '#f6f3e8', + '#5f6f36', + '#b75e26', + '#d79a32', + '#28351a', ]; protected readonly featureLinks: readonly PageTocLink[] = [ @@ -85,17 +85,17 @@ export class ColorPickerPage { protected readonly importCode = `import { AerisColorPicker } from '@aeris-ui/core/color-picker';`; - protected readonly signalCode = `protected readonly brandColor = signal('#606c38');`; + protected readonly signalCode = `protected readonly brandColor = signal('#5f6f36');`; - protected readonly formatCode = `protected readonly formatColor = signal('#606c38'); + protected readonly formatCode = `protected readonly formatColor = signal('#5f6f36'); protected readonly selectedFormat = signal('hex');`; protected readonly presetsCode = `protected readonly presets: readonly string[] = [ - '#fefae0', - '#606c38', - '#bc6c25', - '#dda15e', - '#283618', + '#f6f3e8', + '#5f6f36', + '#b75e26', + '#d79a32', + '#28351a', ];`; protected readonly validationCode = `protected readonly invalidColor = signal(''); @@ -104,10 +104,10 @@ protected readonly invalid = computed( () => this.touched() && this.invalidColor().trim().length === 0, );`; - protected readonly formsCode = `protected readonly reactiveColor = - new FormControl('#bc6c25'); +protected readonly formsCode = `protected readonly reactiveColor = + new FormControl('#b75e26'); -protected templateColor = '#283618';`; +protected templateColor = '#28351a';`; protected readonly eventsCode = `protected readonly lastChange = signal('No color change yet'); @@ -129,7 +129,7 @@ interface AerisColorPickerChangeEvent { { name: 'value', type: 'string (model)', - defaultValue: "'#606c38'", + defaultValue: "'#5f6f36'", description: 'Current color value with two-way binding and Forms support.', }, { diff --git a/projects/docs/src/app/pages/components/form/date-picker/date-picker.page.html b/projects/docs/src/app/pages/components/form/date-picker/date-picker.page.html index ec8b5a3..ec17b11 100644 --- a/projects/docs/src/app/pages/components/form/date-picker/date-picker.page.html +++ b/projects/docs/src/app/pages/components/form/date-picker/date-picker.page.html @@ -564,7 +564,7 @@

Design tokens

--aeris-date-picker-borderTrigger border.--aeris-border-strong + >Trigger border.--aeris-border
--aeris-date-picker-filled-backgroundDesign tokens >Aeris theme
- --aeris-border-strongField border.--aeris-borderField border.Aeris theme
diff --git a/projects/docs/src/app/pages/components/form/input-group/input-group.page.html b/projects/docs/src/app/pages/components/form/input-group/input-group.page.html index 717f463..3d93b25 100644 --- a/projects/docs/src/app/pages/components/form/input-group/input-group.page.html +++ b/projects/docs/src/app/pages/components/form/input-group/input-group.page.html @@ -710,7 +710,7 @@

Design tokens

>Aeris theme
- --aeris-border-strong--aeris-borderShared group borders.Aeris theme
diff --git a/projects/docs/src/app/pages/components/form/input-mask/input-mask.page.html b/projects/docs/src/app/pages/components/form/input-mask/input-mask.page.html index a60c5e0..8bd88f7 100644 --- a/projects/docs/src/app/pages/components/form/input-mask/input-mask.page.html +++ b/projects/docs/src/app/pages/components/form/input-mask/input-mask.page.html @@ -705,7 +705,7 @@

Design tokens

>#f2f0ec
- --aeris-border-strong--aeris-borderDefault field border.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/form/input-number/input-number.page.html b/projects/docs/src/app/pages/components/form/input-number/input-number.page.html index d940de3..34266ec 100644 --- a/projects/docs/src/app/pages/components/form/input-number/input-number.page.html +++ b/projects/docs/src/app/pages/components/form/input-number/input-number.page.html @@ -753,7 +753,7 @@

Design tokens

>#f2f0ec
- --aeris-border-strong--aeris-borderField and button border.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/form/input-otp/input-otp.page.html b/projects/docs/src/app/pages/components/form/input-otp/input-otp.page.html index 8dbb76e..2fcfea9 100644 --- a/projects/docs/src/app/pages/components/form/input-otp/input-otp.page.html +++ b/projects/docs/src/app/pages/components/form/input-otp/input-otp.page.html @@ -533,12 +533,12 @@

Design tokens

>Aeris theme
- --aeris-border-strong--aeris-borderDefault slot border.#c7c9c0
--aeris-primaryHover border and caret color.#606c38 + >Hover border and caret color.#5f6f36
--aeris-focusDesign tokens >#f2f0ec
- --aeris-border-strong--aeris-borderDefault input border.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/form/input-text/input-text.page.ts b/projects/docs/src/app/pages/components/form/input-text/input-text.page.ts index 3ecd30e..7e8b862 100644 --- a/projects/docs/src/app/pages/components/form/input-text/input-text.page.ts +++ b/projects/docs/src/app/pages/components/form/input-text/input-text.page.ts @@ -93,7 +93,7 @@ protected readonly emailInvalid = computed( protected readonly affixCssCode = `.input-affix { display: flex; align-items: center; - border: 1px solid var(--aeris-border-strong); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); } diff --git a/projects/docs/src/app/pages/components/form/multi-select/multi-select.page.html b/projects/docs/src/app/pages/components/form/multi-select/multi-select.page.html index f4ef834..f1c4836 100644 --- a/projects/docs/src/app/pages/components/form/multi-select/multi-select.page.html +++ b/projects/docs/src/app/pages/components/form/multi-select/multi-select.page.html @@ -747,7 +747,7 @@

Design tokens

>#f2f0ec
- --aeris-border / --aeris-border-strong--aeris-border / --aeris-borderPanel and control borders.Aeris theme
diff --git a/projects/docs/src/app/pages/components/form/password/password.page.html b/projects/docs/src/app/pages/components/form/password/password.page.html index d7eae71..f0bafc2 100644 --- a/projects/docs/src/app/pages/components/form/password/password.page.html +++ b/projects/docs/src/app/pages/components/form/password/password.page.html @@ -667,7 +667,7 @@

Design tokens

>Aeris theme
- --aeris-border / --aeris-border-strong--aeris-border / --aeris-borderPanel and field borders.Aeris theme
diff --git a/projects/docs/src/app/pages/components/form/radio-button/radio-button.page.html b/projects/docs/src/app/pages/components/form/radio-button/radio-button.page.html index 9bf129e..6622476 100644 --- a/projects/docs/src/app/pages/components/form/radio-button/radio-button.page.html +++ b/projects/docs/src/app/pages/components/form/radio-button/radio-button.page.html @@ -531,7 +531,7 @@

Design tokens

--aeris-radio-borderUnselected border.--aeris-border-strong + >--aeris-border
--aeris-radio-backgroundDesign tokens
--aeris-select-borderOutlined trigger border.--aeris-border-strong + >--aeris-border
--aeris-select-backgroundDesign tokens
--aeris-slider-tickInactive tick color.--aeris-border-strong + >--aeris-border
--aeris-slider-active-tickDesign tokens >#f2f0ec
- --aeris-border-strongDefault border.--aeris-borderDefault border.#c7c9c0
diff --git a/projects/docs/src/app/pages/components/media/carousel/carousel.page.ts b/projects/docs/src/app/pages/components/media/carousel/carousel.page.ts index 2853666..c863889 100644 --- a/projects/docs/src/app/pages/components/media/carousel/carousel.page.ts +++ b/projects/docs/src/app/pages/components/media/carousel/carousel.page.ts @@ -58,7 +58,7 @@ export class CarouselPage { protected readonly outputs: readonly ApiRow[] = [{ name: 'pageChanged', type: 'AerisCarouselPageEvent', defaultValue: '-', description: 'Emitted for user, autoplay, and API page changes.' }]; protected readonly templates: readonly ApiRow[] = [{ name: 'aerisCarouselItem', type: 'AerisCarouselItemContext', defaultValue: 'Text item', description: 'Renders each item.' }, { name: 'aerisCarouselHeader', type: 'none', defaultValue: '-', description: 'Renders content above the track.' }, { name: 'aerisCarouselFooter', type: 'none', defaultValue: '-', description: 'Renders content below indicators.' }]; protected readonly methods: readonly ApiRow[] = [{ name: 'next(reason?)', type: 'void', defaultValue: '-', description: 'Moves forward one page.' }, { name: 'previous(reason?)', type: 'void', defaultValue: '-', description: 'Moves backward one page.' }, { name: 'goToPage(page, reason?)', type: 'void', defaultValue: '-', description: 'Moves to a valid page.' }, { name: 'startAutoplay()', type: 'void', defaultValue: '-', description: 'Allows the configured autoplay timer to run.' }, { name: 'stopAutoplay()', type: 'void', defaultValue: '-', description: 'Pauses autoplay.' }]; - protected readonly tokens: readonly ApiRow[] = [{ name: '--aeris-carousel-gap', type: 'length', defaultValue: 'density gap × 1.5', description: 'Space between carousel regions.' }, { name: '--aeris-carousel-radius', type: 'length', defaultValue: '--aeris-radius-lg', description: 'Viewport corners.' }, { name: '--aeris-carousel-item-gap', type: 'length', defaultValue: '--aeris-density-gap', description: 'Space between items.' }, { name: '--aeris-carousel-transition-duration', type: 'time', defaultValue: '260ms', description: 'Track transition duration.' }, { name: '--aeris-carousel-navigator-background', type: 'color', defaultValue: '--aeris-surface', description: 'Navigator button background.' }, { name: '--aeris-carousel-indicator-background', type: 'color', defaultValue: '--aeris-border-strong', description: 'Inactive indicator color.' }, { name: '--aeris-carousel-active-indicator-background', type: 'color', defaultValue: '--aeris-primary', description: 'Active indicator color.' }]; + protected readonly tokens: readonly ApiRow[] = [{ name: '--aeris-carousel-gap', type: 'length', defaultValue: 'density gap × 1.5', description: 'Space between carousel regions.' }, { name: '--aeris-carousel-radius', type: 'length', defaultValue: '--aeris-radius-lg', description: 'Viewport corners.' }, { name: '--aeris-carousel-item-gap', type: 'length', defaultValue: '--aeris-density-gap', description: 'Space between items.' }, { name: '--aeris-carousel-transition-duration', type: 'time', defaultValue: '260ms', description: 'Track transition duration.' }, { name: '--aeris-carousel-navigator-background', type: 'color', defaultValue: '--aeris-surface', description: 'Navigator button background.' }, { name: '--aeris-carousel-indicator-background', type: 'color', defaultValue: '--aeris-border', description: 'Inactive indicator color.' }, { name: '--aeris-carousel-active-indicator-background', type: 'color', defaultValue: '--aeris-primary', description: 'Active indicator color.' }]; protected readonly interfacesCode = `type AerisCarouselOrientation = 'horizontal' | 'vertical';\ntype AerisCarouselChangeReason = 'next' | 'previous' | 'indicator' | 'keyboard' | 'swipe' | 'autoplay' | 'api';\n\ninterface AerisCarouselResponsiveOption {\n readonly breakpoint: string;\n readonly numVisible?: number;\n readonly numScroll?: number;\n}\n\ninterface AerisCarouselItemContext {\n readonly $implicit: T;\n readonly item: T;\n readonly index: number;\n readonly visible: boolean;\n}\n\ninterface AerisCarouselPageEvent {\n readonly page: number;\n readonly first: number;\n readonly last: number;\n readonly reason: AerisCarouselChangeReason;\n}`; protected showFirst(): void { diff --git a/projects/docs/src/app/pages/components/media/galleria/galleria.page.ts b/projects/docs/src/app/pages/components/media/galleria/galleria.page.ts index 1bbc6fa..fac0315 100644 --- a/projects/docs/src/app/pages/components/media/galleria/galleria.page.ts +++ b/projects/docs/src/app/pages/components/media/galleria/galleria.page.ts @@ -860,7 +860,7 @@ protected handleIndexChange(event: AerisGalleriaIndexChangeEventDesign tokens
--aeris-primaryPrimary badge accent.#606c38 + >#5f6f36
--aeris-successSuccess badge accent.Design tokens
--aeris-stepper-indicator-borderInactive indicator border.--aeris-border-strong + >--aeris-border
--aeris-stepper-indicator-background> = { "date-picker-inline": ".wide-calendar-demo,\n.inline-calendar-demo {\n width: 100%;\n}\n\n.wide-calendar-demo aeris-date-picker,\n.inline-calendar-demo aeris-date-picker {\n max-width: 100%;\n}", "date-picker-multiple-months": ".wide-calendar-demo,\n.inline-calendar-demo {\n width: 100%;\n}\n\n.wide-calendar-demo aeris-date-picker,\n.inline-calendar-demo aeris-date-picker {\n max-width: 100%;\n}", "date-picker-validation": ".validation-message {\n min-height: 1.25rem;\n}", - "dialog-controlled": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", + "dialog-controlled": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", "dialog-templates": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-title-stack {\n display: grid;\n gap: 0.15rem;\n}\n\n.dialog-title-stack small {\n color: var(--aeris-text-3);\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.dialog-close-icon {\n position: relative;\n width: var(--aeris-icon-size, 1rem);\n height: var(--aeris-icon-size, 1rem);\n display: inline-block;\n}\n\n.dialog-close-icon::before,\n.dialog-close-icon::after {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n border-radius: 999px;\n background: currentColor;\n content: \"\";\n}\n\n.dialog-close-icon::before {\n transform: rotate(45deg);\n}\n\n.dialog-close-icon::after {\n transform: rotate(-45deg);\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", - "drawer-controlled": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}", + "drawer-controlled": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}", "drawer-fullscreen": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-stack {\n gap: 0.875rem;\n}\n\n.drawer-card {\n padding: 0.875rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-md);\n background: var(--aeris-surface-2);\n}\n\n.drawer-card p {\n margin: 0.25rem 0 0;\n}", "drawer-long-content": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-stack {\n gap: 0.875rem;\n}\n\n.drawer-card {\n padding: 0.875rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-md);\n background: var(--aeris-surface-2);\n}\n\n.drawer-card p {\n margin: 0.25rem 0 0;\n}", "drawer-templates": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-title-stack {\n display: grid;\n gap: 0.15rem;\n}\n\n.drawer-title-stack small {\n color: var(--aeris-text-3);\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.drawer-close-icon {\n position: relative;\n width: var(--aeris-icon-size, 1rem);\n height: var(--aeris-icon-size, 1rem);\n display: inline-block;\n}\n\n.drawer-close-icon::before,\n.drawer-close-icon::after {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n border-radius: 999px;\n background: currentColor;\n content: \"\";\n}\n\n.drawer-close-icon::before {\n transform: rotate(45deg);\n}\n\n.drawer-close-icon::after {\n transform: rotate(-45deg);\n}", diff --git a/projects/docs/src/styles.scss b/projects/docs/src/styles.scss index b1fa40e..725e20b 100644 --- a/projects/docs/src/styles.scss +++ b/projects/docs/src/styles.scss @@ -23,7 +23,6 @@ --text-2: var(--aeris-text-2); --text-3: var(--aeris-text-3); --border: var(--aeris-border); - --border-strong: var(--aeris-border-strong); --focus: var(--aeris-focus); --shadow-sm: var(--aeris-shadow-sm); --shadow-md: 0 12px 32px rgb(31 35 27 / 0.09); From e4944c8efc431f49841a97474fd85e9840e66661 Mon Sep 17 00:00:00 2001 From: lil buda Date: Tue, 28 Jul 2026 20:37:05 +0200 Subject: [PATCH 2/3] fix(mcp): regenerated MCP docs. --- projects/docs/public/ai/22/aeris-docs.json | 78 +++++++++--------- .../public/ai/22/components/breadcrumb.md | 2 +- .../docs/public/ai/22/components/carousel.md | 2 +- .../docs/public/ai/22/components/chart.md | 2 +- .../docs/public/ai/22/components/checkbox.md | 2 +- .../public/ai/22/components/class-names.md | 2 +- .../public/ai/22/components/color-picker.md | 2 +- .../docs/public/ai/22/components/compare.md | 2 +- .../public/ai/22/components/confirm-popup.md | 2 +- .../public/ai/22/components/context-menu.md | 4 +- .../docs/public/ai/22/components/dialog.md | 4 +- .../docs/public/ai/22/components/drawer.md | 4 +- .../public/ai/22/components/file-upload.md | 2 +- .../docs/public/ai/22/components/galleria.md | 6 +- .../public/ai/22/components/icon-field.md | 2 +- .../public/ai/22/components/input-group.md | 2 +- .../public/ai/22/components/input-mask.md | 2 +- .../public/ai/22/components/input-number.md | 2 +- .../docs/public/ai/22/components/input-otp.md | 2 +- .../public/ai/22/components/input-text.md | 4 +- .../docs/public/ai/22/components/mega-menu.md | 2 +- projects/docs/public/ai/22/components/menu.md | 2 +- .../docs/public/ai/22/components/menubar.md | 2 +- .../public/ai/22/components/multi-select.md | 2 +- .../docs/public/ai/22/components/panel.md | 4 +- .../docs/public/ai/22/components/password.md | 2 +- .../docs/public/ai/22/components/popover.md | 2 +- .../public/ai/22/components/scroll-panel.md | 2 +- .../docs/public/ai/22/components/splitter.md | 2 +- .../docs/public/ai/22/components/textarea.md | 2 +- .../public/ai/22/components/tiered-menu.md | 2 +- .../docs/public/ai/22/components/toolbar.md | 2 +- projects/docs/public/llms-full.txt | 80 +++++++++---------- 33 files changed, 117 insertions(+), 117 deletions(-) diff --git a/projects/docs/public/ai/22/aeris-docs.json b/projects/docs/public/ai/22/aeris-docs.json index a84e16a..23f6e9f 100644 --- a/projects/docs/public/ai/22/aeris-docs.json +++ b/projects/docs/public/ai/22/aeris-docs.json @@ -795,8 +795,8 @@ "CSS color" ], [ - "borderSubtle, border, borderStrong, focus", - "Surface separation, structural boundaries, control boundaries, and focus indication", + "border, borderStrong, focus", + "Quiet default boundaries, optional emphasized boundaries, and focus indication", "CSS color" ], [ @@ -931,7 +931,7 @@ ], [ "Quiet surface separation", - "--aeris-border-subtle", + "--aeris-border", "Optional low-emphasis edges around non-interactive cards, panels, and overlay shells" ], [ @@ -3954,7 +3954,7 @@ "description": "Selected icon color." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Unchecked border." @@ -4508,7 +4508,7 @@ "description": "Filled surface and clear hover." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Default field and swatch borders." @@ -6279,7 +6279,7 @@ "description": "Outlined and filled field surfaces." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Field border." @@ -6620,7 +6620,7 @@ "description": "Control and addon surfaces." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Shared group borders." @@ -7164,7 +7164,7 @@ "description": "Filled and read-only background." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Default field border." @@ -7731,7 +7731,7 @@ "description": "Filled field and button background." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Field and button border." @@ -8259,7 +8259,7 @@ "description": "Outlined, filled, disabled, and read-only surfaces." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Default slot border." @@ -8728,7 +8728,7 @@ "description": "Filled and read-only background." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Default input border." @@ -8889,7 +8889,7 @@ { "language": "CSS", "label": "CSS", - "code": ".field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n}\n\n.field > label,\n.field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n}\n\n.field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n}\n\n.field small.error {\n color: var(--aeris-danger);\n}\n\n.input-affix {\n display: flex;\n align-items: center;\n border: 1px solid var(--aeris-border-strong);\n border-radius: var(--aeris-radius-sm);\n}\n\n.input-affix:focus-within {\n border-color: var(--aeris-focus);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--aeris-focus) 18%, transparent);\n}\n\n.input-affix input {\n width: 100%;\n border: 0;\n background: transparent;\n box-shadow: none;\n}" + "code": ".field {\n min-width: 0;\n display: grid;\n align-content: start;\n grid-auto-rows: max-content;\n gap: 0.45rem;\n}\n\n.field > label,\n.field > span:first-child {\n color: var(--aeris-text);\n font-size: 0.875rem;\n font-weight: 600;\n line-height: 1.4;\n}\n\n.field small {\n color: var(--aeris-text-2);\n font-size: 0.8125rem;\n line-height: 1.5;\n}\n\n.field small.error {\n color: var(--aeris-danger);\n}\n\n.input-affix {\n display: flex;\n align-items: center;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-sm);\n}\n\n.input-affix:focus-within {\n border-color: var(--aeris-focus);\n box-shadow: 0 0 0 3px\n color-mix(in srgb, var(--aeris-focus) 18%, transparent);\n}\n\n.input-affix input {\n width: 100%;\n border: 0;\n background: transparent;\n box-shadow: none;\n}" } ] }, @@ -9659,7 +9659,7 @@ "description": "Filled and interactive backgrounds." }, { - "name": "--aeris-border / --aeris-border-strong", + "name": "--aeris-border / --aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Panel and control borders." @@ -10210,7 +10210,7 @@ "description": "Field, panel, filled, and action surfaces." }, { - "name": "--aeris-border / --aeris-border-strong", + "name": "--aeris-border / --aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Panel and field borders." @@ -12962,7 +12962,7 @@ "description": "Filled and read-only background." }, { - "name": "--aeris-border-strong", + "name": "--aeris-border", "type": "CSS custom property", "defaultValue": "", "description": "Default border." @@ -20958,7 +20958,7 @@ { "name": "--aeris-panel-border", "type": "CSS custom property", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Outer border." }, { @@ -20982,7 +20982,7 @@ { "name": "--aeris-panel-header-border", "type": "CSS custom property", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Header separator." }, { @@ -21403,7 +21403,7 @@ { "name": "--aeris-scroll-panel-border", "type": "CSS custom property", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Viewport border." }, { @@ -21901,7 +21901,7 @@ { "name": "--aeris-splitter-border", "type": "CSS custom property", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Root border color." }, { @@ -23398,7 +23398,7 @@ { "name": "--aeris-toolbar-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Toolbar border color." }, { @@ -25160,7 +25160,7 @@ { "name": "--aeris-confirm-popup-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border-subtle)", + "defaultValue": "var(--aeris-border)", "description": "Popup border." }, { @@ -25859,7 +25859,7 @@ { "language": "CSS", "label": "CSS", - "code": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.dialog-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" + "code": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.dialog-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" } ] }, @@ -26513,7 +26513,7 @@ { "language": "CSS", "label": "CSS", - "code": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border-strong);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" + "code": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" } ] }, @@ -27458,7 +27458,7 @@ { "name": "--aeris-popover-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border-subtle)", + "defaultValue": "var(--aeris-border)", "description": "Popover border." }, { @@ -28384,7 +28384,7 @@ { "name": "--aeris-file-upload-border", "type": "CSS custom property", - "defaultValue": "var(--aeris-border-subtle)", + "defaultValue": "var(--aeris-border)", "description": "Surface and file borders." }, { @@ -28749,7 +28749,7 @@ { "name": "--aeris-breadcrumb-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Breadcrumb border color." }, { @@ -29235,7 +29235,7 @@ { "name": "--aeris-context-menu-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Panel border color." }, { @@ -29301,7 +29301,7 @@ { "name": "--aeris-context-menu-separator-color", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Separator color." }, { @@ -29618,7 +29618,7 @@ { "name": "--aeris-mega-menu-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Root and nested separator border color." }, { @@ -30034,7 +30034,7 @@ { "name": "--aeris-menu-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Panel border." }, { @@ -30466,7 +30466,7 @@ { "name": "--aeris-menubar-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Root and separator border color." }, { @@ -30918,7 +30918,7 @@ { "name": "--aeris-tiered-menu-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Panel border color." }, { @@ -31300,7 +31300,7 @@ { "name": "--aeris-chart-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Container border color." }, { @@ -32544,7 +32544,7 @@ { "name": "--aeris-carousel-indicator-background", "type": "color", - "defaultValue": "--aeris-border-strong", + "defaultValue": "--aeris-border", "description": "Inactive indicator color." }, { @@ -32975,7 +32975,7 @@ { "name": "--aeris-compare-border", "type": "", - "defaultValue": "var(--aeris-border-subtle)", + "defaultValue": "var(--aeris-border)", "description": "Surface border color." }, { @@ -33945,7 +33945,7 @@ { "name": "--aeris-galleria-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Stage and empty-state border." }, { @@ -33999,7 +33999,7 @@ { "name": "--aeris-galleria-grid-border", "type": "color", - "defaultValue": "--aeris-border-subtle", + "defaultValue": "--aeris-border", "description": "Grid tile border." }, { @@ -34041,7 +34041,7 @@ { "name": "--aeris-galleria-indicator-background", "type": "color", - "defaultValue": "--aeris-border-strong", + "defaultValue": "--aeris-border", "description": "Inactive indicator color." }, { @@ -37569,7 +37569,7 @@ { "language": "CSS", "label": "CSS", - "code": ".class-names-demo {\n display: grid;\n gap: 1rem;\n}\n\n.class-names-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.625rem;\n}\n\n.state-card {\n padding: 1.25rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-lg);\n background: var(--aeris-surface);\n transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;\n}\n\n.state-card--selected {\n border-color: var(--aeris-primary);\n background: var(--aeris-primary-soft);\n}\n\n.state-card--busy {\n opacity: 0.55;\n}\n\n.state-card--emphasized {\n box-shadow: inset 0 0 0 1px var(--aeris-border-strong);\n}" + "code": ".class-names-demo {\n display: grid;\n gap: 1rem;\n}\n\n.class-names-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.625rem;\n}\n\n.state-card {\n padding: 1.25rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-lg);\n background: var(--aeris-surface);\n transition: border-color 160ms ease, background 160ms ease, opacity 160ms ease;\n}\n\n.state-card--selected {\n border-color: var(--aeris-primary);\n background: var(--aeris-primary-soft);\n}\n\n.state-card--busy {\n opacity: 0.55;\n}\n\n.state-card--emphasized {\n box-shadow: inset 0 0 0 1px var(--aeris-border);\n}" } ] }, diff --git a/projects/docs/public/ai/22/components/breadcrumb.md b/projects/docs/public/ai/22/components/breadcrumb.md index 3d57701..276387d 100644 --- a/projects/docs/public/ai/22/components/breadcrumb.md +++ b/projects/docs/public/ai/22/components/breadcrumb.md @@ -125,7 +125,7 @@ interface AerisBreadcrumbEllipsisTemplateContext { | `--aeris-breadcrumb-color` | `color` | `--aeris-text` | Default breadcrumb text color. | | `--aeris-breadcrumb-muted-color` | `color` | `--aeris-text-2` | Non-current item color. | | `--aeris-breadcrumb-current-color` | `color` | `--aeris-text` | Current item color. | -| `--aeris-breadcrumb-border` | `color` | `--aeris-border-subtle` | Breadcrumb border color. | +| `--aeris-breadcrumb-border` | `color` | `--aeris-border` | Breadcrumb border color. | | `--aeris-breadcrumb-border-width` | `length` | `1px` | Breadcrumb border width. | | `--aeris-breadcrumb-radius` | `length` | `--aeris-radius-lg` | Breadcrumb corner radius. | | `--aeris-breadcrumb-shadow` | `shadow` | `none` | Breadcrumb shadow. | diff --git a/projects/docs/public/ai/22/components/carousel.md b/projects/docs/public/ai/22/components/carousel.md index 6697af3..d51542c 100644 --- a/projects/docs/public/ai/22/components/carousel.md +++ b/projects/docs/public/ai/22/components/carousel.md @@ -113,7 +113,7 @@ interface AerisCarouselPageEvent { | `--aeris-carousel-item-gap` | `length` | `--aeris-density-gap` | Space between items. | | `--aeris-carousel-transition-duration` | `time` | `260ms` | Track transition duration. | | `--aeris-carousel-navigator-background` | `color` | `--aeris-surface` | Navigator button background. | -| `--aeris-carousel-indicator-background` | `color` | `--aeris-border-strong` | Inactive indicator color. | +| `--aeris-carousel-indicator-background` | `color` | `--aeris-border` | Inactive indicator color. | | `--aeris-carousel-active-indicator-background` | `color` | `--aeris-primary` | Active indicator color. | ## Examples diff --git a/projects/docs/public/ai/22/components/chart.md b/projects/docs/public/ai/22/components/chart.md index acfff2f..7e56412 100644 --- a/projects/docs/public/ai/22/components/chart.md +++ b/projects/docs/public/ai/22/components/chart.md @@ -132,7 +132,7 @@ interface AerisChartErrorEvent { | --- | --- | --- | --- | | `--aeris-chart-min-height` | `length` | `12rem` | Minimum chart container height. | | `--aeris-chart-padding` | `length` | `1rem` | Space between the rendered chart and its container border. | -| `--aeris-chart-border` | `color` | `--aeris-border-subtle` | Container border color. | +| `--aeris-chart-border` | `color` | `--aeris-border` | Container border color. | | `--aeris-chart-radius` | `length` | `--aeris-radius-lg` | Container corner radius. | | `--aeris-chart-background` | `color` | `--aeris-surface` | Container background. | | `--aeris-chart-color` | `color` | `--aeris-text` | Base text color used by the chart surface. | diff --git a/projects/docs/public/ai/22/components/checkbox.md b/projects/docs/public/ai/22/components/checkbox.md index a120ea7..a71c2f6 100644 --- a/projects/docs/public/ai/22/components/checkbox.md +++ b/projects/docs/public/ai/22/components/checkbox.md @@ -87,7 +87,7 @@ interface AerisCheckboxChangeEvent { | --- | --- | --- | --- | | `--aeris-primary` | `CSS custom property` | — | Selected and mixed control background. | | `--aeris-on-primary` | `CSS custom property` | — | Selected icon color. | -| `--aeris-border-strong` | `CSS custom property` | — | Unchecked border. | +| `--aeris-border` | `CSS custom property` | — | Unchecked border. | | `--aeris-surface` | `CSS custom property` | — | Unchecked background. | | `--aeris-radius-sm` | `CSS custom property` | — | Control corner radius foundation. | | `--aeris-focus` | `CSS custom property` | — | Visible keyboard focus ring. | diff --git a/projects/docs/public/ai/22/components/class-names.md b/projects/docs/public/ai/22/components/class-names.md index 8888fef..f374d47 100644 --- a/projects/docs/public/ai/22/components/class-names.md +++ b/projects/docs/public/ai/22/components/class-names.md @@ -246,7 +246,7 @@ export class ClassNamesConditionalConditionalMapDemo { } .state-card--emphasized { - box-shadow: inset 0 0 0 1px var(--aeris-border-strong); + box-shadow: inset 0 0 0 1px var(--aeris-border); } ``` diff --git a/projects/docs/public/ai/22/components/color-picker.md b/projects/docs/public/ai/22/components/color-picker.md index e288c04..ce1b679 100644 --- a/projects/docs/public/ai/22/components/color-picker.md +++ b/projects/docs/public/ai/22/components/color-picker.md @@ -113,7 +113,7 @@ interface AerisColorPickerChangeEvent { | --- | --- | --- | --- | | `--aeris-surface` | `CSS custom property` | — | Control, panel, and active format backgrounds. | | `--aeris-surface-2` | `CSS custom property` | — | Filled surface and clear hover. | -| `--aeris-border-strong` | `CSS custom property` | — | Default field and swatch borders. | +| `--aeris-border` | `CSS custom property` | — | Default field and swatch borders. | | `--aeris-focus` | `CSS custom property` | — | Keyboard focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border. | | `--aeris-text / --aeris-text-2` | `CSS custom property` | — | Value and secondary text. | diff --git a/projects/docs/public/ai/22/components/compare.md b/projects/docs/public/ai/22/components/compare.md index c7a0134..6fbceb7 100644 --- a/projects/docs/public/ai/22/components/compare.md +++ b/projects/docs/public/ai/22/components/compare.md @@ -116,7 +116,7 @@ export interface AerisCompareInputEvent { | `--aeris-compare-min-height` | `<length>` | `12rem` | Minimum comparison height. | | `--aeris-compare-mobile-min-height` | `<length>` | `10rem` | Minimum height below 32rem. | | `--aeris-compare-border-width` | `<length>` | `1px` | Surface border width. | -| `--aeris-compare-border` | `<color>` | `var(--aeris-border-subtle)` | Surface border color. | +| `--aeris-compare-border` | `<color>` | `var(--aeris-border)` | Surface border color. | | `--aeris-compare-radius` | `<length>` | `var(--aeris-radius-lg)` | Surface corner radius. | | `--aeris-compare-background` | `<color>` | `var(--aeris-surface-2)` | Surface background. | | `--aeris-compare-color` | `<color>` | `var(--aeris-text)` | Fallback content color. | diff --git a/projects/docs/public/ai/22/components/confirm-popup.md b/projects/docs/public/ai/22/components/confirm-popup.md index 73904ab..f2fead9 100644 --- a/projects/docs/public/ai/22/components/confirm-popup.md +++ b/projects/docs/public/ai/22/components/confirm-popup.md @@ -242,7 +242,7 @@ interface AerisConfirmPopupTemplateContext { | `--aeris-confirm-popup-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popup width. | | `--aeris-confirm-popup-padding` | `CSS custom property` | `1rem` | Internal spacing. | | `--aeris-confirm-popup-background` | `CSS custom property` | `var(--aeris-surface)` | Popup surface. | -| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popup border. | +| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border)` | Popup border. | | `--aeris-confirm-popup-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popup radius. | | `--aeris-confirm-popup-shadow` | `CSS custom property` | `component shadow` | Popup elevation. | | `--aeris-confirm-popup-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | diff --git a/projects/docs/public/ai/22/components/context-menu.md b/projects/docs/public/ai/22/components/context-menu.md index e56abaf..c9afff3 100644 --- a/projects/docs/public/ai/22/components/context-menu.md +++ b/projects/docs/public/ai/22/components/context-menu.md @@ -139,7 +139,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-max-width` | `length` | `min(22rem, calc(100vw - 1rem))` | Panel max width. | | `--aeris-context-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root menu max height. | | `--aeris-context-menu-padding` | `length` | `0.375rem` | Panel padding. | -| `--aeris-context-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | +| `--aeris-context-menu-border` | `color` | `--aeris-border` | Panel border color. | | `--aeris-context-menu-radius` | `length` | `--aeris-radius-lg` | Panel radius. | | `--aeris-context-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-context-menu-color` | `color` | `--aeris-text` | Panel text color. | @@ -150,7 +150,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-item-hover-background` | `color` | `primary mix` | Hover and active item background. | | `--aeris-context-menu-icon-size` | `length` | `1.125rem` | Default icon box size. | | `--aeris-context-menu-disabled-opacity` | `number` | `0.52` | Disabled item opacity. | -| `--aeris-context-menu-separator-color` | `color` | `--aeris-border-subtle` | Separator color. | +| `--aeris-context-menu-separator-color` | `color` | `--aeris-border` | Separator color. | | `--aeris-context-menu-submenu-width` | `length` | `14rem` | Submenu width. | ## Examples diff --git a/projects/docs/public/ai/22/components/dialog.md b/projects/docs/public/ai/22/components/dialog.md index efad354..9f5af74 100644 --- a/projects/docs/public/ai/22/components/dialog.md +++ b/projects/docs/public/ai/22/components/dialog.md @@ -284,7 +284,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); @@ -325,7 +325,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--surface); color: var(--text); diff --git a/projects/docs/public/ai/22/components/drawer.md b/projects/docs/public/ai/22/components/drawer.md index 38e5b93..964441d 100644 --- a/projects/docs/public/ai/22/components/drawer.md +++ b/projects/docs/public/ai/22/components/drawer.md @@ -275,7 +275,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); @@ -308,7 +308,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--surface); color: var(--text); diff --git a/projects/docs/public/ai/22/components/file-upload.md b/projects/docs/public/ai/22/components/file-upload.md index d160bfd..d495ff6 100644 --- a/projects/docs/public/ai/22/components/file-upload.md +++ b/projects/docs/public/ai/22/components/file-upload.md @@ -157,7 +157,7 @@ interface AerisFileUploadEvent { | `--aeris-file-upload-background` | `CSS custom property` | `var(--aeris-surface)` | Uploader surface. | | `--aeris-file-upload-text` | `CSS custom property` | `var(--aeris-text)` | Primary text. | | `--aeris-file-upload-muted-text` | `CSS custom property` | `var(--aeris-text-3)` | Secondary text. | -| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Surface and file borders. | +| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border)` | Surface and file borders. | | `--aeris-file-upload-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Surface radius. | | `--aeris-file-upload-shadow` | `CSS custom property` | `component shadow` | Surface elevation. | | `--aeris-file-upload-toolbar-padding` | `CSS custom property` | `0.875rem` | Toolbar padding. | diff --git a/projects/docs/public/ai/22/components/galleria.md b/projects/docs/public/ai/22/components/galleria.md index 5864309..e6de7e3 100644 --- a/projects/docs/public/ai/22/components/galleria.md +++ b/projects/docs/public/ai/22/components/galleria.md @@ -206,7 +206,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-gap` | `length` | `density gap × 1.5` | Space between stage, indicators, and thumbnails. | | `--aeris-galleria-radius` | `length` | `--aeris-radius-lg` | Stage and empty-state corner radius. | | `--aeris-galleria-stage-background` | `color` | `#11130f` | Media stage background. | -| `--aeris-galleria-border` | `color` | `--aeris-border-subtle` | Stage and empty-state border. | +| `--aeris-galleria-border` | `color` | `--aeris-border` | Stage and empty-state border. | | `--aeris-galleria-shadow` | `shadow` | `soft elevation` | Inline stage shadow. | | `--aeris-galleria-transition-duration` | `time` | `420ms` | Item transition duration. | | `--aeris-galleria-transition-easing` | `timing function` | `spring-like curve` | Item transition easing. | @@ -215,14 +215,14 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-toolbar-radius` | `length` | `--aeris-radius-control` | Toolbar corner radius. | | `--aeris-galleria-grid-gap` | `length` | `--aeris-density-gap-lg` | Space between responsive grid tiles. | | `--aeris-galleria-grid-radius` | `length` | `--aeris-radius-lg` | Grid tile corner radius. | -| `--aeris-galleria-grid-border` | `color` | `--aeris-border-subtle` | Grid tile border. | +| `--aeris-galleria-grid-border` | `color` | `--aeris-border` | Grid tile border. | | `--aeris-galleria-thumbnail-gap` | `length` | `--aeris-density-gap` | Gap between thumbnail controls and items. | | `--aeris-galleria-thumbnail-radius` | `length` | `--aeris-radius-md` | Thumbnail corner radius. | | `--aeris-galleria-thumbnail-width` | `length` | `5.75rem` | Compact horizontal thumbnail width. | | `--aeris-galleria-thumbnail-height` | `length` | `4.5rem` | Compact vertical thumbnail height. | | `--aeris-galleria-thumbnail-aspect-ratio` | `ratio` | `16 / 10` | Thumbnail aspect ratio. | | `--aeris-galleria-active-thumbnail-border` | `color` | `--aeris-primary` | Selected thumbnail border. | -| `--aeris-galleria-indicator-background` | `color` | `--aeris-border-strong` | Inactive indicator color. | +| `--aeris-galleria-indicator-background` | `color` | `--aeris-border` | Inactive indicator color. | | `--aeris-galleria-active-indicator-background` | `color` | `--aeris-primary` | Selected indicator color. | | `--aeris-galleria-backdrop` | `color` | `near-black translucent` | Fullscreen backdrop. | | `--aeris-galleria-backdrop-blur` | `length` | `--aeris-backdrop-blur` | Fullscreen backdrop blur radius. | diff --git a/projects/docs/public/ai/22/components/icon-field.md b/projects/docs/public/ai/22/components/icon-field.md index 97d2b10..fe83cf1 100644 --- a/projects/docs/public/ai/22/components/icon-field.md +++ b/projects/docs/public/ai/22/components/icon-field.md @@ -63,7 +63,7 @@ type AerisIconFieldDensity = 'comfortable' | 'compact'; | `--aeris-control-height` | `CSS custom property` | — | Medium field height. | | `--aeris-control-height-xs/sm/lg` | `CSS custom property` | — | Field heights for alternate sizes. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Outlined and filled field surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Field border. | +| `--aeris-border` | `CSS custom property` | — | Field border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-text / --aeris-text-muted` | `CSS custom property` | — | Control text, placeholder, and icon color. | | `--aeris-danger` | `CSS custom property` | — | Invalid border color. | diff --git a/projects/docs/public/ai/22/components/input-group.md b/projects/docs/public/ai/22/components/input-group.md index 926cd40..5908cbd 100644 --- a/projects/docs/public/ai/22/components/input-group.md +++ b/projects/docs/public/ai/22/components/input-group.md @@ -63,7 +63,7 @@ type AerisInputGroupMode = 'attached' | 'embedded'; | `--aeris-control-height` | `CSS custom property` | — | Medium group height. | | `--aeris-radius-sm` | `CSS custom property` | — | Outer group corner radius. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Control and addon surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Shared group borders. | +| `--aeris-border` | `CSS custom property` | — | Shared group borders. | | `--aeris-focus` | `CSS custom property` | — | Projected control focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid group border. | | `--aeris-text / --aeris-text-muted` | `CSS custom property` | — | Control and addon text. | diff --git a/projects/docs/public/ai/22/components/input-mask.md b/projects/docs/public/ai/22/components/input-mask.md index f62e741..ebb3174 100644 --- a/projects/docs/public/ai/22/components/input-mask.md +++ b/projects/docs/public/ai/22/components/input-mask.md @@ -104,7 +104,7 @@ type AerisInputMaskAppearance = 'outline' | 'filled'; | `--aeris-radius-sm` | `CSS custom property` | — | Field and clear-button radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined field background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default field border. | +| `--aeris-border` | `CSS custom property` | — | Default field border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | diff --git a/projects/docs/public/ai/22/components/input-number.md b/projects/docs/public/ai/22/components/input-number.md index 8fe4087..aa24edc 100644 --- a/projects/docs/public/ai/22/components/input-number.md +++ b/projects/docs/public/ai/22/components/input-number.md @@ -110,7 +110,7 @@ type AerisInputNumberCurrencyDisplay = | `--aeris-radius-sm` | `CSS custom property` | — | Field and connected button radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined field background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled field and button background. | -| `--aeris-border-strong` | `CSS custom property` | — | Field and button border. | +| `--aeris-border` | `CSS custom property` | — | Field and button border. | | `--aeris-focus` | `CSS custom property` | — | Visible keyboard focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | diff --git a/projects/docs/public/ai/22/components/input-otp.md b/projects/docs/public/ai/22/components/input-otp.md index ef0d947..8507e45 100644 --- a/projects/docs/public/ai/22/components/input-otp.md +++ b/projects/docs/public/ai/22/components/input-otp.md @@ -94,7 +94,7 @@ interface AerisInputOtpCompleteEvent { | `--aeris-control-height` | `CSS custom property` | — | Medium slot width and height. | | `--aeris-radius-sm` | `CSS custom property` | — | Slot corner radius. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Outlined, filled, disabled, and read-only surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Default slot border. | +| `--aeris-border` | `CSS custom property` | — | Default slot border. | | `--aeris-primary` | `CSS custom property` | — | Hover border and caret color. | | `--aeris-focus` | `CSS custom property` | — | Focused slot border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid slot border and focus ring. | diff --git a/projects/docs/public/ai/22/components/input-text.md b/projects/docs/public/ai/22/components/input-text.md index 623dce5..54f57b0 100644 --- a/projects/docs/public/ai/22/components/input-text.md +++ b/projects/docs/public/ai/22/components/input-text.md @@ -86,7 +86,7 @@ type AerisControlSize = AerisInputTextSize; | `--aeris-radius-sm` | `CSS custom property` | — | Input corner radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined input background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default input border. | +| `--aeris-border` | `CSS custom property` | — | Default input border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | @@ -709,7 +709,7 @@ export class InputAffixesIconsAndAffixesDemo { .input-affix { display: flex; align-items: center; - border: 1px solid var(--aeris-border-strong); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); } diff --git a/projects/docs/public/ai/22/components/mega-menu.md b/projects/docs/public/ai/22/components/mega-menu.md index 9ad0880..465bca2 100644 --- a/projects/docs/public/ai/22/components/mega-menu.md +++ b/projects/docs/public/ai/22/components/mega-menu.md @@ -112,7 +112,7 @@ interface AerisMegaMenuItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-mega-menu-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-mega-menu-border` | `color` | `--aeris-border-subtle` | Root and nested separator border color. | +| `--aeris-mega-menu-border` | `color` | `--aeris-border` | Root and nested separator border color. | | `--aeris-mega-menu-panel-background` | `color` | `--aeris-surface` | Mega panel background. | | `--aeris-mega-menu-panel-width` | `length` | `44rem` | Maximum panel width before viewport clamping. | | `--aeris-mega-menu-item-hover-background` | `color` | `primary mix` | Hover and open trigger surface. | diff --git a/projects/docs/public/ai/22/components/menu.md b/projects/docs/public/ai/22/components/menu.md index 45dc95e..e282ea4 100644 --- a/projects/docs/public/ai/22/components/menu.md +++ b/projects/docs/public/ai/22/components/menu.md @@ -134,7 +134,7 @@ interface AerisMenuVisibilityEvent { | `--aeris-menu-width` | `length` | `16rem` | Panel width. | | `--aeris-menu-max-height` | `length` | `none / viewport in popup` | Maximum scrollable panel height. | | `--aeris-menu-background` | `color` | `--aeris-surface` | Panel background. | -| `--aeris-menu-border` | `color` | `--aeris-border-subtle` | Panel border. | +| `--aeris-menu-border` | `color` | `--aeris-border` | Panel border. | | `--aeris-menu-radius` | `length` | `--aeris-radius-lg` | Panel corner radius. | | `--aeris-menu-shadow` | `shadow` | `overlay shadow` | Panel elevation. | | `--aeris-menu-item-min-height` | `length` | `--aeris-item-height` | Minimum item height. | diff --git a/projects/docs/public/ai/22/components/menubar.md b/projects/docs/public/ai/22/components/menubar.md index b05464a..64dc07b 100644 --- a/projects/docs/public/ai/22/components/menubar.md +++ b/projects/docs/public/ai/22/components/menubar.md @@ -113,7 +113,7 @@ interface AerisMenubarItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-menubar-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-menubar-border` | `color` | `--aeris-border-subtle` | Root and separator border color. | +| `--aeris-menubar-border` | `color` | `--aeris-border` | Root and separator border color. | | `--aeris-menubar-radius` | `length` | `--aeris-radius-lg` | Root surface corner radius. | | `--aeris-menubar-item-radius` | `length` | `--aeris-radius-control` | Hover and focus item corner radius. | | `--aeris-menubar-item-height` | `length` | `--aeris-item-height` | Minimum item height. | diff --git a/projects/docs/public/ai/22/components/multi-select.md b/projects/docs/public/ai/22/components/multi-select.md index 7465a7a..31f85b8 100644 --- a/projects/docs/public/ai/22/components/multi-select.md +++ b/projects/docs/public/ai/22/components/multi-select.md @@ -148,7 +148,7 @@ interface AerisMultiSelectLazyLoadEvent { | `--aeris-multi-select-panel-max-height` | `CSS custom property` | — | Scrollable option-list height. | | `--aeris-surface` | `CSS custom property` | — | Control, chip checkbox, and panel surfaces. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and interactive backgrounds. | -| `--aeris-border / --aeris-border-strong` | `CSS custom property` | — | Panel and control borders. | +| `--aeris-border / --aeris-border` | `CSS custom property` | — | Panel and control borders. | | `--aeris-primary / --aeris-text` | `CSS custom property` | — | Selection controls and selected option text. | | `--aeris-focus` | `CSS custom property` | — | Visible focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border. | diff --git a/projects/docs/public/ai/22/components/panel.md b/projects/docs/public/ai/22/components/panel.md index 3ea9741..6d36e1b 100644 --- a/projects/docs/public/ai/22/components/panel.md +++ b/projects/docs/public/ai/22/components/panel.md @@ -111,11 +111,11 @@ interface AerisPanelToggleIconContext extends AerisPanelHeaderContext {} | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-panel-background` | `CSS custom property` | `--aeris-surface` | Panel surface. | -| `--aeris-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Outer border. | +| `--aeris-panel-border` | `CSS custom property` | `--aeris-border` | Outer border. | | `--aeris-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Outer corner radius. | | `--aeris-panel-shadow` | `CSS custom property` | `none` | Default elevation. | | `--aeris-panel-header-background` | `CSS custom property` | `surface mix` | Header surface. | -| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border-subtle` | Header separator. | +| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border` | Header separator. | | `--aeris-panel-title-color` | `CSS custom property` | `--aeris-text` | Header title color. | | `--aeris-panel-content-color` | `CSS custom property` | `--aeris-text-2` | Body text color. | | `--aeris-panel-icon-size` | `CSS custom property` | `1.25rem` | Default toggle icon box. | diff --git a/projects/docs/public/ai/22/components/password.md b/projects/docs/public/ai/22/components/password.md index a04dba3..0a2b10e 100644 --- a/projects/docs/public/ai/22/components/password.md +++ b/projects/docs/public/ai/22/components/password.md @@ -117,7 +117,7 @@ type AerisPasswordStrengthEvaluator = ( | `--aeris-control-height` | `CSS custom property` | — | Medium control height. | | `--aeris-radius-sm / --aeris-radius-md` | `CSS custom property` | — | Field and feedback corner radii. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Field, panel, filled, and action surfaces. | -| `--aeris-border / --aeris-border-strong` | `CSS custom property` | — | Panel and field borders. | +| `--aeris-border / --aeris-border` | `CSS custom property` | — | Panel and field borders. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger / --aeris-warning / --aeris-success` | `CSS custom property` | — | Invalid and strength meter states. | diff --git a/projects/docs/public/ai/22/components/popover.md b/projects/docs/public/ai/22/components/popover.md index 12e97e1..64455c6 100644 --- a/projects/docs/public/ai/22/components/popover.md +++ b/projects/docs/public/ai/22/components/popover.md @@ -118,7 +118,7 @@ interface AerisPopoverTemplateContext { | `--aeris-popover-width` | `CSS custom property` | `min(22rem, calc(100vw - 1rem))` | Popover width. | | `--aeris-popover-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popover width. | | `--aeris-popover-background` | `CSS custom property` | `var(--aeris-surface)` | Popover surface. | -| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popover border. | +| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border)` | Popover border. | | `--aeris-popover-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popover radius. | | `--aeris-popover-shadow` | `CSS custom property` | `component shadow` | Popover elevation. | | `--aeris-popover-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | diff --git a/projects/docs/public/ai/22/components/scroll-panel.md b/projects/docs/public/ai/22/components/scroll-panel.md index dc58e77..37c6e1b 100644 --- a/projects/docs/public/ai/22/components/scroll-panel.md +++ b/projects/docs/public/ai/22/components/scroll-panel.md @@ -103,7 +103,7 @@ interface AerisScrollPanelEvent { | --- | --- | --- | --- | | `--aeris-scroll-panel-background` | `CSS custom property` | `--aeris-surface` | Viewport surface. | | `--aeris-scroll-panel-color` | `CSS custom property` | `--aeris-text` | Viewport text color inheritance. | -| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Viewport border. | +| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border` | Viewport border. | | `--aeris-scroll-panel-border-width` | `CSS custom property` | `1px` | Viewport border thickness. | | `--aeris-scroll-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Viewport corner radius. | | `--aeris-scroll-panel-padding` | `CSS custom property` | `1rem` | Content padding. | diff --git a/projects/docs/public/ai/22/components/splitter.md b/projects/docs/public/ai/22/components/splitter.md index 4290b71..d03bda2 100644 --- a/projects/docs/public/ai/22/components/splitter.md +++ b/projects/docs/public/ai/22/components/splitter.md @@ -111,7 +111,7 @@ interface AerisSplitterResizeEvent { | --- | --- | --- | --- | | `--aeris-splitter-background` | `CSS custom property` | `--aeris-surface` | Root surface. | | `--aeris-splitter-color` | `CSS custom property` | `--aeris-text` | Root text color. | -| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border-subtle` | Root border color. | +| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border` | Root border color. | | `--aeris-splitter-border-width` | `CSS custom property` | `1px` | Root border thickness. | | `--aeris-splitter-radius` | `CSS custom property` | `--aeris-radius-lg` | Root corner radius. | | `--aeris-splitter-shadow` | `CSS custom property` | `none` | Root elevation. | diff --git a/projects/docs/public/ai/22/components/textarea.md b/projects/docs/public/ai/22/components/textarea.md index d390ef9..995c3bc 100644 --- a/projects/docs/public/ai/22/components/textarea.md +++ b/projects/docs/public/ai/22/components/textarea.md @@ -126,7 +126,7 @@ type AerisTextareaResize = | `--aeris-radius-sm` | `CSS custom property` | — | Corner radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default border. | +| `--aeris-border` | `CSS custom property` | — | Default border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and ring. | | `--aeris-text` | `CSS custom property` | — | Entered text. | diff --git a/projects/docs/public/ai/22/components/tiered-menu.md b/projects/docs/public/ai/22/components/tiered-menu.md index 359bd53..e8ebad1 100644 --- a/projects/docs/public/ai/22/components/tiered-menu.md +++ b/projects/docs/public/ai/22/components/tiered-menu.md @@ -136,7 +136,7 @@ interface AerisTieredMenuItemTemplateContext { | `--aeris-tiered-menu-max-width` | `length` | `min(22rem, 100%)` | Root panel maximum width. | | `--aeris-tiered-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root list maximum height. | | `--aeris-tiered-menu-padding` | `length` | `0.375rem` | Panel and submenu padding. | -| `--aeris-tiered-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | +| `--aeris-tiered-menu-border` | `color` | `--aeris-border` | Panel border color. | | `--aeris-tiered-menu-radius` | `length` | `--aeris-radius-lg` | Panel and submenu radius. | | `--aeris-tiered-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-tiered-menu-shadow` | `shadow` | `overlay shadow` | Panel and submenu elevation. | diff --git a/projects/docs/public/ai/22/components/toolbar.md b/projects/docs/public/ai/22/components/toolbar.md index b03fdba..a06cc03 100644 --- a/projects/docs/public/ai/22/components/toolbar.md +++ b/projects/docs/public/ai/22/components/toolbar.md @@ -76,7 +76,7 @@ type AerisToolbarAlign = 'start' | 'center' | 'end' | 'stretch'; | --- | --- | --- | --- | | `--aeris-toolbar-background` | `color` | `--aeris-surface` | Toolbar surface color. | | `--aeris-toolbar-color` | `color` | `--aeris-text` | Toolbar text color. | -| `--aeris-toolbar-border` | `color` | `--aeris-border-subtle` | Toolbar border color. | +| `--aeris-toolbar-border` | `color` | `--aeris-border` | Toolbar border color. | | `--aeris-toolbar-border-width` | `length` | `1px` | Toolbar border width. | | `--aeris-toolbar-radius` | `length` | `--aeris-radius-lg` | Toolbar corner radius. | | `--aeris-toolbar-shadow` | `shadow` | `none` | Toolbar shadow. | diff --git a/projects/docs/public/llms-full.txt b/projects/docs/public/llms-full.txt index 4eaf01d..f9f93c6 100644 --- a/projects/docs/public/llms-full.txt +++ b/projects/docs/public/llms-full.txt @@ -652,7 +652,7 @@ Start with the broadest decision and customize more narrowly only when the appli | page, surface, surface2, surface3 | Mode-specific surface hierarchy | CSS color | | interactiveHover | Shared neutral hover treatment for interactive items | CSS color | | text, text2, text3 | Neutral content hierarchy | CSS color | -| borderSubtle, border, borderStrong, focus | Surface separation, structural boundaries, control boundaries, and focus indication | CSS color | +| border, borderStrong, focus | Quiet default boundaries, optional emphasized boundaries, and focus indication | CSS color | | accent | Mode-specific decorative accent | CSS color | | shadowXs, shadowSm | Mode-specific elevation | CSS shadow | @@ -746,7 +746,7 @@ Use a semantic text token when color communicates a deliberate role. These text | Purpose | Tokens | Use | | --- | --- | --- | | Ordinary content | --aeris-text, --aeris-text-2, --aeris-text-3 | Default headings, body copy, supporting text, labels, and placeholders | -| Quiet surface separation | --aeris-border-subtle | Optional low-emphasis edges around non-interactive cards, panels, and overlay shells | +| Quiet surface separation | --aeris-border | Optional low-emphasis edges around non-interactive cards, panels, and overlay shells | | Colored text on neutral surfaces | --aeris-primary-text, --aeris-secondary-text, and semantic *-text tokens | Links, statuses, or emphasis where color is intentional and meaningful | | Content on solid semantic colors | --aeris-on-primary, --aeris-on-success, and other on-* tokens | Text and icons placed on the corresponding filled background | @@ -3962,7 +3962,7 @@ interface AerisCheckboxChangeEvent { | --- | --- | --- | --- | | `--aeris-primary` | `CSS custom property` | — | Selected and mixed control background. | | `--aeris-on-primary` | `CSS custom property` | — | Selected icon color. | -| `--aeris-border-strong` | `CSS custom property` | — | Unchecked border. | +| `--aeris-border` | `CSS custom property` | — | Unchecked border. | | `--aeris-surface` | `CSS custom property` | — | Unchecked background. | | `--aeris-radius-sm` | `CSS custom property` | — | Control corner radius foundation. | | `--aeris-focus` | `CSS custom property` | — | Visible keyboard focus ring. | @@ -4609,7 +4609,7 @@ interface AerisColorPickerChangeEvent { | --- | --- | --- | --- | | `--aeris-surface` | `CSS custom property` | — | Control, panel, and active format backgrounds. | | `--aeris-surface-2` | `CSS custom property` | — | Filled surface and clear hover. | -| `--aeris-border-strong` | `CSS custom property` | — | Default field and swatch borders. | +| `--aeris-border` | `CSS custom property` | — | Default field and swatch borders. | | `--aeris-focus` | `CSS custom property` | — | Keyboard focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border. | | `--aeris-text / --aeris-text-2` | `CSS custom property` | — | Value and secondary text. | @@ -7393,7 +7393,7 @@ type AerisIconFieldDensity = 'comfortable' | 'compact'; | `--aeris-control-height` | `CSS custom property` | — | Medium field height. | | `--aeris-control-height-xs/sm/lg` | `CSS custom property` | — | Field heights for alternate sizes. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Outlined and filled field surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Field border. | +| `--aeris-border` | `CSS custom property` | — | Field border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-text / --aeris-text-muted` | `CSS custom property` | — | Control text, placeholder, and icon color. | | `--aeris-danger` | `CSS custom property` | — | Invalid border color. | @@ -8251,7 +8251,7 @@ type AerisInputGroupMode = 'attached' | 'embedded'; | `--aeris-control-height` | `CSS custom property` | — | Medium group height. | | `--aeris-radius-sm` | `CSS custom property` | — | Outer group corner radius. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Control and addon surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Shared group borders. | +| `--aeris-border` | `CSS custom property` | — | Shared group borders. | | `--aeris-focus` | `CSS custom property` | — | Projected control focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid group border. | | `--aeris-text / --aeris-text-muted` | `CSS custom property` | — | Control and addon text. | @@ -9326,7 +9326,7 @@ type AerisInputMaskAppearance = 'outline' | 'filled'; | `--aeris-radius-sm` | `CSS custom property` | — | Field and clear-button radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined field background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default field border. | +| `--aeris-border` | `CSS custom property` | — | Default field border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | @@ -10340,7 +10340,7 @@ type AerisInputNumberCurrencyDisplay = | `--aeris-radius-sm` | `CSS custom property` | — | Field and connected button radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined field background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled field and button background. | -| `--aeris-border-strong` | `CSS custom property` | — | Field and button border. | +| `--aeris-border` | `CSS custom property` | — | Field and button border. | | `--aeris-focus` | `CSS custom property` | — | Visible keyboard focus ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | @@ -11500,7 +11500,7 @@ interface AerisInputOtpCompleteEvent { | `--aeris-control-height` | `CSS custom property` | — | Medium slot width and height. | | `--aeris-radius-sm` | `CSS custom property` | — | Slot corner radius. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Outlined, filled, disabled, and read-only surfaces. | -| `--aeris-border-strong` | `CSS custom property` | — | Default slot border. | +| `--aeris-border` | `CSS custom property` | — | Default slot border. | | `--aeris-primary` | `CSS custom property` | — | Hover border and caret color. | | `--aeris-focus` | `CSS custom property` | — | Focused slot border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid slot border and focus ring. | @@ -12412,7 +12412,7 @@ type AerisControlSize = AerisInputTextSize; | `--aeris-radius-sm` | `CSS custom property` | — | Input corner radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined input background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default input border. | +| `--aeris-border` | `CSS custom property` | — | Default input border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and focus ring. | @@ -13035,7 +13035,7 @@ export class InputAffixesIconsAndAffixesDemo { .input-affix { display: flex; align-items: center; - border: 1px solid var(--aeris-border-strong); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); } @@ -14061,7 +14061,7 @@ interface AerisMultiSelectLazyLoadEvent { | `--aeris-multi-select-panel-max-height` | `CSS custom property` | — | Scrollable option-list height. | | `--aeris-surface` | `CSS custom property` | — | Control, chip checkbox, and panel surfaces. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and interactive backgrounds. | -| `--aeris-border / --aeris-border-strong` | `CSS custom property` | — | Panel and control borders. | +| `--aeris-border / --aeris-border` | `CSS custom property` | — | Panel and control borders. | | `--aeris-primary / --aeris-text` | `CSS custom property` | — | Selection controls and selected option text. | | `--aeris-focus` | `CSS custom property` | — | Visible focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border. | @@ -15123,7 +15123,7 @@ type AerisPasswordStrengthEvaluator = ( | `--aeris-control-height` | `CSS custom property` | — | Medium control height. | | `--aeris-radius-sm / --aeris-radius-md` | `CSS custom property` | — | Field and feedback corner radii. | | `--aeris-surface / --aeris-surface-2` | `CSS custom property` | — | Field, panel, filled, and action surfaces. | -| `--aeris-border / --aeris-border-strong` | `CSS custom property` | — | Panel and field borders. | +| `--aeris-border / --aeris-border` | `CSS custom property` | — | Panel and field borders. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger / --aeris-warning / --aeris-success` | `CSS custom property` | — | Invalid and strength meter states. | @@ -19901,7 +19901,7 @@ type AerisTextareaResize = | `--aeris-radius-sm` | `CSS custom property` | — | Corner radius. | | `--aeris-surface` | `CSS custom property` | — | Outlined background. | | `--aeris-surface-2` | `CSS custom property` | — | Filled and read-only background. | -| `--aeris-border-strong` | `CSS custom property` | — | Default border. | +| `--aeris-border` | `CSS custom property` | — | Default border. | | `--aeris-focus` | `CSS custom property` | — | Focus border and ring. | | `--aeris-danger` | `CSS custom property` | — | Invalid border and ring. | | `--aeris-text` | `CSS custom property` | — | Entered text. | @@ -32682,11 +32682,11 @@ interface AerisPanelToggleIconContext extends AerisPanelHeaderContext {} | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-panel-background` | `CSS custom property` | `--aeris-surface` | Panel surface. | -| `--aeris-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Outer border. | +| `--aeris-panel-border` | `CSS custom property` | `--aeris-border` | Outer border. | | `--aeris-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Outer corner radius. | | `--aeris-panel-shadow` | `CSS custom property` | `none` | Default elevation. | | `--aeris-panel-header-background` | `CSS custom property` | `surface mix` | Header surface. | -| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border-subtle` | Header separator. | +| `--aeris-panel-header-border` | `CSS custom property` | `--aeris-border` | Header separator. | | `--aeris-panel-title-color` | `CSS custom property` | `--aeris-text` | Header title color. | | `--aeris-panel-content-color` | `CSS custom property` | `--aeris-text-2` | Body text color. | | `--aeris-panel-icon-size` | `CSS custom property` | `1.25rem` | Default toggle icon box. | @@ -33259,7 +33259,7 @@ interface AerisScrollPanelEvent { | --- | --- | --- | --- | | `--aeris-scroll-panel-background` | `CSS custom property` | `--aeris-surface` | Viewport surface. | | `--aeris-scroll-panel-color` | `CSS custom property` | `--aeris-text` | Viewport text color inheritance. | -| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border-subtle` | Viewport border. | +| `--aeris-scroll-panel-border` | `CSS custom property` | `--aeris-border` | Viewport border. | | `--aeris-scroll-panel-border-width` | `CSS custom property` | `1px` | Viewport border thickness. | | `--aeris-scroll-panel-radius` | `CSS custom property` | `--aeris-radius-lg` | Viewport corner radius. | | `--aeris-scroll-panel-padding` | `CSS custom property` | `1rem` | Content padding. | @@ -34048,7 +34048,7 @@ interface AerisSplitterResizeEvent { | --- | --- | --- | --- | | `--aeris-splitter-background` | `CSS custom property` | `--aeris-surface` | Root surface. | | `--aeris-splitter-color` | `CSS custom property` | `--aeris-text` | Root text color. | -| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border-subtle` | Root border color. | +| `--aeris-splitter-border` | `CSS custom property` | `--aeris-border` | Root border color. | | `--aeris-splitter-border-width` | `CSS custom property` | `1px` | Root border thickness. | | `--aeris-splitter-radius` | `CSS custom property` | `--aeris-radius-lg` | Root corner radius. | | `--aeris-splitter-shadow` | `CSS custom property` | `none` | Root elevation. | @@ -36207,7 +36207,7 @@ type AerisToolbarAlign = 'start' | 'center' | 'end' | 'stretch'; | --- | --- | --- | --- | | `--aeris-toolbar-background` | `color` | `--aeris-surface` | Toolbar surface color. | | `--aeris-toolbar-color` | `color` | `--aeris-text` | Toolbar text color. | -| `--aeris-toolbar-border` | `color` | `--aeris-border-subtle` | Toolbar border color. | +| `--aeris-toolbar-border` | `color` | `--aeris-border` | Toolbar border color. | | `--aeris-toolbar-border-width` | `length` | `1px` | Toolbar border width. | | `--aeris-toolbar-radius` | `length` | `--aeris-radius-lg` | Toolbar corner radius. | | `--aeris-toolbar-shadow` | `shadow` | `none` | Toolbar shadow. | @@ -37682,7 +37682,7 @@ interface AerisConfirmPopupTemplateContext { | `--aeris-confirm-popup-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popup width. | | `--aeris-confirm-popup-padding` | `CSS custom property` | `1rem` | Internal spacing. | | `--aeris-confirm-popup-background` | `CSS custom property` | `var(--aeris-surface)` | Popup surface. | -| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popup border. | +| `--aeris-confirm-popup-border` | `CSS custom property` | `var(--aeris-border)` | Popup border. | | `--aeris-confirm-popup-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popup radius. | | `--aeris-confirm-popup-shadow` | `CSS custom property` | `component shadow` | Popup elevation. | | `--aeris-confirm-popup-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | @@ -38571,7 +38571,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); @@ -38612,7 +38612,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--surface); color: var(--text); @@ -39620,7 +39620,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); @@ -39653,7 +39653,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border-strong); + border: 1px solid var(--border); border-radius: var(--aeris-radius-sm); background: var(--surface); color: var(--text); @@ -41176,7 +41176,7 @@ interface AerisPopoverTemplateContext { | `--aeris-popover-width` | `CSS custom property` | `min(22rem, calc(100vw - 1rem))` | Popover width. | | `--aeris-popover-max-width` | `CSS custom property` | `calc(100vw - 1rem)` | Maximum popover width. | | `--aeris-popover-background` | `CSS custom property` | `var(--aeris-surface)` | Popover surface. | -| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Popover border. | +| `--aeris-popover-border` | `CSS custom property` | `var(--aeris-border)` | Popover border. | | `--aeris-popover-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Popover radius. | | `--aeris-popover-shadow` | `CSS custom property` | `component shadow` | Popover elevation. | | `--aeris-popover-focus` | `CSS custom property` | `var(--aeris-focus)` | Focus ring color. | @@ -42485,7 +42485,7 @@ interface AerisFileUploadEvent { | `--aeris-file-upload-background` | `CSS custom property` | `var(--aeris-surface)` | Uploader surface. | | `--aeris-file-upload-text` | `CSS custom property` | `var(--aeris-text)` | Primary text. | | `--aeris-file-upload-muted-text` | `CSS custom property` | `var(--aeris-text-3)` | Secondary text. | -| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border-subtle)` | Surface and file borders. | +| `--aeris-file-upload-border` | `CSS custom property` | `var(--aeris-border)` | Surface and file borders. | | `--aeris-file-upload-radius` | `CSS custom property` | `var(--aeris-radius-lg)` | Surface radius. | | `--aeris-file-upload-shadow` | `CSS custom property` | `component shadow` | Surface elevation. | | `--aeris-file-upload-toolbar-padding` | `CSS custom property` | `0.875rem` | Toolbar padding. | @@ -42962,7 +42962,7 @@ interface AerisBreadcrumbEllipsisTemplateContext { | `--aeris-breadcrumb-color` | `color` | `--aeris-text` | Default breadcrumb text color. | | `--aeris-breadcrumb-muted-color` | `color` | `--aeris-text-2` | Non-current item color. | | `--aeris-breadcrumb-current-color` | `color` | `--aeris-text` | Current item color. | -| `--aeris-breadcrumb-border` | `color` | `--aeris-border-subtle` | Breadcrumb border color. | +| `--aeris-breadcrumb-border` | `color` | `--aeris-border` | Breadcrumb border color. | | `--aeris-breadcrumb-border-width` | `length` | `1px` | Breadcrumb border width. | | `--aeris-breadcrumb-radius` | `length` | `--aeris-radius-lg` | Breadcrumb corner radius. | | `--aeris-breadcrumb-shadow` | `shadow` | `none` | Breadcrumb shadow. | @@ -43481,7 +43481,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-max-width` | `length` | `min(22rem, calc(100vw - 1rem))` | Panel max width. | | `--aeris-context-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root menu max height. | | `--aeris-context-menu-padding` | `length` | `0.375rem` | Panel padding. | -| `--aeris-context-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | +| `--aeris-context-menu-border` | `color` | `--aeris-border` | Panel border color. | | `--aeris-context-menu-radius` | `length` | `--aeris-radius-lg` | Panel radius. | | `--aeris-context-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-context-menu-color` | `color` | `--aeris-text` | Panel text color. | @@ -43492,7 +43492,7 @@ interface AerisContextMenuItemTemplateContext { | `--aeris-context-menu-item-hover-background` | `color` | `primary mix` | Hover and active item background. | | `--aeris-context-menu-icon-size` | `length` | `1.125rem` | Default icon box size. | | `--aeris-context-menu-disabled-opacity` | `number` | `0.52` | Disabled item opacity. | -| `--aeris-context-menu-separator-color` | `color` | `--aeris-border-subtle` | Separator color. | +| `--aeris-context-menu-separator-color` | `color` | `--aeris-border` | Separator color. | | `--aeris-context-menu-submenu-width` | `length` | `14rem` | Submenu width. | #### Examples @@ -44018,7 +44018,7 @@ interface AerisMegaMenuItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-mega-menu-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-mega-menu-border` | `color` | `--aeris-border-subtle` | Root and nested separator border color. | +| `--aeris-mega-menu-border` | `color` | `--aeris-border` | Root and nested separator border color. | | `--aeris-mega-menu-panel-background` | `color` | `--aeris-surface` | Mega panel background. | | `--aeris-mega-menu-panel-width` | `length` | `44rem` | Maximum panel width before viewport clamping. | | `--aeris-mega-menu-item-hover-background` | `color` | `primary mix` | Hover and open trigger surface. | @@ -44385,7 +44385,7 @@ interface AerisMenuVisibilityEvent { | `--aeris-menu-width` | `length` | `16rem` | Panel width. | | `--aeris-menu-max-height` | `length` | `none / viewport in popup` | Maximum scrollable panel height. | | `--aeris-menu-background` | `color` | `--aeris-surface` | Panel background. | -| `--aeris-menu-border` | `color` | `--aeris-border-subtle` | Panel border. | +| `--aeris-menu-border` | `color` | `--aeris-border` | Panel border. | | `--aeris-menu-radius` | `length` | `--aeris-radius-lg` | Panel corner radius. | | `--aeris-menu-shadow` | `shadow` | `overlay shadow` | Panel elevation. | | `--aeris-menu-item-min-height` | `length` | `--aeris-item-height` | Minimum item height. | @@ -45425,7 +45425,7 @@ interface AerisMenubarItemEvent { | Token | Type | Default | Description | | --- | --- | --- | --- | | `--aeris-menubar-background` | `color` | `--aeris-surface` | Root surface background. | -| `--aeris-menubar-border` | `color` | `--aeris-border-subtle` | Root and separator border color. | +| `--aeris-menubar-border` | `color` | `--aeris-border` | Root and separator border color. | | `--aeris-menubar-radius` | `length` | `--aeris-radius-lg` | Root surface corner radius. | | `--aeris-menubar-item-radius` | `length` | `--aeris-radius-control` | Hover and focus item corner radius. | | `--aeris-menubar-item-height` | `length` | `--aeris-item-height` | Minimum item height. | @@ -46453,7 +46453,7 @@ interface AerisTieredMenuItemTemplateContext { | `--aeris-tiered-menu-max-width` | `length` | `min(22rem, 100%)` | Root panel maximum width. | | `--aeris-tiered-menu-max-height` | `length` | `min(26rem, calc(100vh - 1rem))` | Root list maximum height. | | `--aeris-tiered-menu-padding` | `length` | `0.375rem` | Panel and submenu padding. | -| `--aeris-tiered-menu-border` | `color` | `--aeris-border-subtle` | Panel border color. | +| `--aeris-tiered-menu-border` | `color` | `--aeris-border` | Panel border color. | | `--aeris-tiered-menu-radius` | `length` | `--aeris-radius-lg` | Panel and submenu radius. | | `--aeris-tiered-menu-background` | `color` | `--aeris-surface` | Panel background. | | `--aeris-tiered-menu-shadow` | `shadow` | `overlay shadow` | Panel and submenu elevation. | @@ -47307,7 +47307,7 @@ interface AerisChartErrorEvent { | --- | --- | --- | --- | | `--aeris-chart-min-height` | `length` | `12rem` | Minimum chart container height. | | `--aeris-chart-padding` | `length` | `1rem` | Space between the rendered chart and its container border. | -| `--aeris-chart-border` | `color` | `--aeris-border-subtle` | Container border color. | +| `--aeris-chart-border` | `color` | `--aeris-border` | Container border color. | | `--aeris-chart-radius` | `length` | `--aeris-radius-lg` | Container corner radius. | | `--aeris-chart-background` | `color` | `--aeris-surface` | Container background. | | `--aeris-chart-color` | `color` | `--aeris-text` | Base text color used by the chart surface. | @@ -49241,7 +49241,7 @@ interface AerisCarouselPageEvent { | `--aeris-carousel-item-gap` | `length` | `--aeris-density-gap` | Space between items. | | `--aeris-carousel-transition-duration` | `time` | `260ms` | Track transition duration. | | `--aeris-carousel-navigator-background` | `color` | `--aeris-surface` | Navigator button background. | -| `--aeris-carousel-indicator-background` | `color` | `--aeris-border-strong` | Inactive indicator color. | +| `--aeris-carousel-indicator-background` | `color` | `--aeris-border` | Inactive indicator color. | | `--aeris-carousel-active-indicator-background` | `color` | `--aeris-primary` | Active indicator color. | #### Examples @@ -49907,7 +49907,7 @@ export interface AerisCompareInputEvent { | `--aeris-compare-min-height` | `<length>` | `12rem` | Minimum comparison height. | | `--aeris-compare-mobile-min-height` | `<length>` | `10rem` | Minimum height below 32rem. | | `--aeris-compare-border-width` | `<length>` | `1px` | Surface border width. | -| `--aeris-compare-border` | `<color>` | `var(--aeris-border-subtle)` | Surface border color. | +| `--aeris-compare-border` | `<color>` | `var(--aeris-border)` | Surface border color. | | `--aeris-compare-radius` | `<length>` | `var(--aeris-radius-lg)` | Surface corner radius. | | `--aeris-compare-background` | `<color>` | `var(--aeris-surface-2)` | Surface background. | | `--aeris-compare-color` | `<color>` | `var(--aeris-text)` | Fallback content color. | @@ -50736,7 +50736,7 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-gap` | `length` | `density gap × 1.5` | Space between stage, indicators, and thumbnails. | | `--aeris-galleria-radius` | `length` | `--aeris-radius-lg` | Stage and empty-state corner radius. | | `--aeris-galleria-stage-background` | `color` | `#11130f` | Media stage background. | -| `--aeris-galleria-border` | `color` | `--aeris-border-subtle` | Stage and empty-state border. | +| `--aeris-galleria-border` | `color` | `--aeris-border` | Stage and empty-state border. | | `--aeris-galleria-shadow` | `shadow` | `soft elevation` | Inline stage shadow. | | `--aeris-galleria-transition-duration` | `time` | `420ms` | Item transition duration. | | `--aeris-galleria-transition-easing` | `timing function` | `spring-like curve` | Item transition easing. | @@ -50745,14 +50745,14 @@ interface AerisGalleriaDownloadEvent { | `--aeris-galleria-toolbar-radius` | `length` | `--aeris-radius-control` | Toolbar corner radius. | | `--aeris-galleria-grid-gap` | `length` | `--aeris-density-gap-lg` | Space between responsive grid tiles. | | `--aeris-galleria-grid-radius` | `length` | `--aeris-radius-lg` | Grid tile corner radius. | -| `--aeris-galleria-grid-border` | `color` | `--aeris-border-subtle` | Grid tile border. | +| `--aeris-galleria-grid-border` | `color` | `--aeris-border` | Grid tile border. | | `--aeris-galleria-thumbnail-gap` | `length` | `--aeris-density-gap` | Gap between thumbnail controls and items. | | `--aeris-galleria-thumbnail-radius` | `length` | `--aeris-radius-md` | Thumbnail corner radius. | | `--aeris-galleria-thumbnail-width` | `length` | `5.75rem` | Compact horizontal thumbnail width. | | `--aeris-galleria-thumbnail-height` | `length` | `4.5rem` | Compact vertical thumbnail height. | | `--aeris-galleria-thumbnail-aspect-ratio` | `ratio` | `16 / 10` | Thumbnail aspect ratio. | | `--aeris-galleria-active-thumbnail-border` | `color` | `--aeris-primary` | Selected thumbnail border. | -| `--aeris-galleria-indicator-background` | `color` | `--aeris-border-strong` | Inactive indicator color. | +| `--aeris-galleria-indicator-background` | `color` | `--aeris-border` | Inactive indicator color. | | `--aeris-galleria-active-indicator-background` | `color` | `--aeris-primary` | Selected indicator color. | | `--aeris-galleria-backdrop` | `color` | `near-black translucent` | Fullscreen backdrop. | | `--aeris-galleria-backdrop-blur` | `length` | `--aeris-backdrop-blur` | Fullscreen backdrop blur radius. | @@ -57035,7 +57035,7 @@ export class ClassNamesConditionalConditionalMapDemo { } .state-card--emphasized { - box-shadow: inset 0 0 0 1px var(--aeris-border-strong); + box-shadow: inset 0 0 0 1px var(--aeris-border); } ``` From 53ac55020d65ac550f90bdda62945e6a86e3bd1e Mon Sep 17 00:00:00 2001 From: lil buda Date: Tue, 28 Jul 2026 20:43:04 +0200 Subject: [PATCH 3/3] fix(theme): synchronize subtle border verification --- projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts | 4 ++-- projects/docs/public/ai/22/aeris-docs.json | 4 ++-- projects/docs/public/ai/22/components/dialog.md | 2 +- projects/docs/public/ai/22/components/drawer.md | 2 +- projects/docs/public/llms-full.txt | 4 ++-- projects/docs/src/app/shared/generated-example-styles.ts | 4 ++-- 6 files changed, 10 insertions(+), 10 deletions(-) diff --git a/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts b/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts index 030905e..cab0e36 100644 --- a/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts +++ b/projects/aeris-ui/src/lib/testing/aeris-theme.service.spec.ts @@ -171,7 +171,7 @@ describe('AerisThemeService', () => { expect(root.style.getPropertyValue('--aeris-info')).toBe('#2f6178'); expect(root.style.getPropertyValue('--aeris-warning')).toBe('#c38600'); expect(root.style.getPropertyValue('--aeris-danger')).toBe('#c81e2a'); - expect(root.style.getPropertyValue('--aeris-border')).toBe('#767676'); + expect(root.style.getPropertyValue('--aeris-border')).toBe('#efefef'); service.setMode('dark'); await TestBed.tick(); @@ -189,7 +189,7 @@ describe('AerisThemeService', () => { expect(root.style.getPropertyValue('--aeris-info')).toBe('#9ecbe0'); expect(root.style.getPropertyValue('--aeris-warning')).toBe('#facc15'); expect(root.style.getPropertyValue('--aeris-danger')).toBe('#ff5c68'); - expect(root.style.getPropertyValue('--aeris-border')).toBe('#a3a3a3'); + expect(root.style.getPropertyValue('--aeris-border')).toBe('#242424'); service.setTheme(AERIS_THEME_PRESETS.earth); service.setMode('light'); diff --git a/projects/docs/public/ai/22/aeris-docs.json b/projects/docs/public/ai/22/aeris-docs.json index 23f6e9f..8d80f5c 100644 --- a/projects/docs/public/ai/22/aeris-docs.json +++ b/projects/docs/public/ai/22/aeris-docs.json @@ -25859,7 +25859,7 @@ { "language": "CSS", "label": "CSS", - "code": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.dialog-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" + "code": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.dialog-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" } ] }, @@ -26513,7 +26513,7 @@ { "language": "CSS", "label": "CSS", - "code": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" + "code": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--surface);\n color: var(--text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n.drawer-controls {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--text-3);\n font-size: 0.8125rem;\n}" } ] }, diff --git a/projects/docs/public/ai/22/components/dialog.md b/projects/docs/public/ai/22/components/dialog.md index 9f5af74..2ef7329 100644 --- a/projects/docs/public/ai/22/components/dialog.md +++ b/projects/docs/public/ai/22/components/dialog.md @@ -284,7 +284,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); diff --git a/projects/docs/public/ai/22/components/drawer.md b/projects/docs/public/ai/22/components/drawer.md index 964441d..834f145 100644 --- a/projects/docs/public/ai/22/components/drawer.md +++ b/projects/docs/public/ai/22/components/drawer.md @@ -275,7 +275,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); diff --git a/projects/docs/public/llms-full.txt b/projects/docs/public/llms-full.txt index f9f93c6..1a42546 100644 --- a/projects/docs/public/llms-full.txt +++ b/projects/docs/public/llms-full.txt @@ -38571,7 +38571,7 @@ Shared component planning and release notes. .dialog-form input, .dialog-form textarea { width: 100%; - border: 1px solid var(--border); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); @@ -39620,7 +39620,7 @@ Shared component planning and release notes. .drawer-form input, .drawer-form textarea { width: 100%; - border: 1px solid var(--border); + border: 1px solid var(--aeris-border); border-radius: var(--aeris-radius-sm); background: var(--aeris-surface); color: var(--aeris-text); diff --git a/projects/docs/src/app/shared/generated-example-styles.ts b/projects/docs/src/app/shared/generated-example-styles.ts index 0598467..0d8e343 100644 --- a/projects/docs/src/app/shared/generated-example-styles.ts +++ b/projects/docs/src/app/shared/generated-example-styles.ts @@ -30,9 +30,9 @@ export const DOC_EXAMPLE_STYLES: Readonly> = { "date-picker-inline": ".wide-calendar-demo,\n.inline-calendar-demo {\n width: 100%;\n}\n\n.wide-calendar-demo aeris-date-picker,\n.inline-calendar-demo aeris-date-picker {\n max-width: 100%;\n}", "date-picker-multiple-months": ".wide-calendar-demo,\n.inline-calendar-demo {\n width: 100%;\n}\n\n.wide-calendar-demo aeris-date-picker,\n.inline-calendar-demo aeris-date-picker {\n max-width: 100%;\n}", "date-picker-validation": ".validation-message {\n min-height: 1.25rem;\n}", - "dialog-controlled": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", + "dialog-controlled": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.dialog-form {\n display: grid;\n gap: 0.75rem;\n}\n\n.dialog-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.dialog-form input,\n.dialog-form textarea {\n width: 100%;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.dialog-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.dialog-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", "dialog-templates": ".dialog-actions {\n display: flex;\n justify-content: flex-end;\n gap: 0.5rem;\n}\n\n.dialog-title-stack {\n display: grid;\n gap: 0.15rem;\n}\n\n.dialog-title-stack small {\n color: var(--aeris-text-3);\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.dialog-close-icon {\n position: relative;\n width: var(--aeris-icon-size, 1rem);\n height: var(--aeris-icon-size, 1rem);\n display: inline-block;\n}\n\n.dialog-close-icon::before,\n.dialog-close-icon::after {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n border-radius: 999px;\n background: currentColor;\n content: \"\";\n}\n\n.dialog-close-icon::before {\n transform: rotate(45deg);\n}\n\n.dialog-close-icon::after {\n transform: rotate(-45deg);\n}\n\n@media (max-width: 42rem) {\n .dialog-controls,\n .dialog-actions {\n align-items: stretch;\n flex-direction: column;\n }\n}", - "drawer-controlled": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}", + "drawer-controlled": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-status {\n margin-top: 0.875rem;\n color: var(--aeris-text-3);\n font-size: 0.8125rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-form label {\n display: grid;\n gap: 0.35rem;\n color: var(--aeris-text);\n font-weight: 700;\n}\n\n.drawer-form input,\n.drawer-form textarea {\n width: 100%;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-sm);\n background: var(--aeris-surface);\n color: var(--aeris-text);\n font: inherit;\n}\n\n.drawer-form input {\n min-height: 2.375rem;\n padding: 0 0.75rem;\n}\n\n.drawer-form textarea {\n min-height: 5rem;\n padding: 0.625rem 0.75rem;\n resize: vertical;\n}", "drawer-fullscreen": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-stack {\n gap: 0.875rem;\n}\n\n.drawer-card {\n padding: 0.875rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-md);\n background: var(--aeris-surface-2);\n}\n\n.drawer-card p {\n margin: 0.25rem 0 0;\n}", "drawer-long-content": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-form,\n.drawer-stack {\n display: grid;\n gap: 0.75rem;\n}\n\n.drawer-stack {\n gap: 0.875rem;\n}\n\n.drawer-card {\n padding: 0.875rem;\n border: 1px solid var(--aeris-border);\n border-radius: var(--aeris-radius-md);\n background: var(--aeris-surface-2);\n}\n\n.drawer-card p {\n margin: 0.25rem 0 0;\n}", "drawer-templates": ".drawer-controls,\n.drawer-actions {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n}\n\n.drawer-actions {\n justify-content: flex-end;\n}\n\n.drawer-title-stack {\n display: grid;\n gap: 0.15rem;\n}\n\n.drawer-title-stack small {\n color: var(--aeris-text-3);\n font-size: 0.75rem;\n font-weight: 600;\n}\n\n.drawer-close-icon {\n position: relative;\n width: var(--aeris-icon-size, 1rem);\n height: var(--aeris-icon-size, 1rem);\n display: inline-block;\n}\n\n.drawer-close-icon::before,\n.drawer-close-icon::after {\n position: absolute;\n top: 50%;\n left: 0;\n width: 100%;\n height: 1.5px;\n border-radius: 999px;\n background: currentColor;\n content: \"\";\n}\n\n.drawer-close-icon::before {\n transform: rotate(45deg);\n}\n\n.drawer-close-icon::after {\n transform: rotate(-45deg);\n}",