feat: aura accent color for button, side-nav, radio-button and checkbox (#10249)

jouni · web-flow · commit f6571da69373 · 2025-09-29T14:55:56.000+03:00
diff --git a/dev/aura.html b/dev/aura.html
@@ -298,7 +298,7 @@
           <vaadin-side-nav-item path="">
             <vaadin-icon src="./assets/lucide-icons/chart-column-big.svg" slot="prefix"></vaadin-icon>
             Dashboard
-            <span theme="badge accent" slot="suffix" aria-label="(2 new items)">2</span>
+            <span theme="badge" slot="suffix" aria-label="(2 new items)">2</span>
           </vaadin-side-nav-item>
 
           <vaadin-side-nav-item>
@@ -354,7 +354,7 @@
             <h1>Dashboard</h1>
           </header>
           <vaadin-scroller theme="overflow-indicators">
-            <vaadin-side-nav theme="contrast">
+            <vaadin-side-nav theme="filled">
               <vaadin-side-nav-item path="#components">
                 <vaadin-icon src="./assets/lucide-icons/home.svg" slot="prefix"></vaadin-icon>
                 <span>Components</span>
diff --git a/packages/aura/src/color.css b/packages/aura/src/color.css
@@ -8,10 +8,9 @@
     oklch(from var(--aura-background-light) 0.1 calc(c / 2 + c * (1 - c)) h),
     oklch(from var(--aura-background-dark) 1 c h)
   );
-  --vaadin-text-color: light-dark(
-    color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent),
-    color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent)
-  );
+  --aura-text-light: color-mix(in srgb, var(--_color-base) calc(90% + 5% * var(--aura-contrast)), transparent);
+  --aura-text-dark: color-mix(in srgb, #fff calc(90% + 5% * var(--aura-contrast)), transparent);
+  --vaadin-text-color: light-dark(var(--aura-text-light), var(--aura-text-dark));
   --vaadin-text-color-secondary: light-dark(
     color-mix(in srgb, var(--_color-base) calc(55% + 10% * var(--aura-contrast)), transparent),
     color-mix(in srgb, var(--_color-base) calc(57% + 10% * var(--aura-contrast)), transparent)
@@ -57,26 +56,8 @@
     var(--_bg-accent),
     radial-gradient(circle at 25% 0% in xyz, var(--aura-background) 33%, var(--_bg-alt)) var(--aura-background);
 
-  --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
   --vaadin-focus-ring-color: var(--aura-accent-color);
   accent-color: var(--aura-accent-color);
-  /* Workaround Safari 17 limitation and compute these separately for light and dark */
-  --aura-accent-contrast: light-dark(
-    oklch(from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0),
-    oklch(from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0)
-  );
-
-  --aura-accent-text-light: color-mix(
-    in srgb,
-    var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
-  );
-  --aura-accent-text-dark: color-mix(
-    in srgb,
-    var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-text-color)
-  );
-  --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
 
   /* TODO probably broken for Safari 17 */
   --vaadin-user-color: var(--aura-accent-color);
@@ -99,6 +80,36 @@
   background-attachment: fixed;
 }
 
+:where(:root, :host),
+vaadin-button,
+vaadin-menu-bar-button,
+vaadin-drawer-toggle,
+vaadin-checkbox::part(checkbox),
+vaadin-radio-button::part(radio),
+vaadin-side-nav-item::part(content) {
+  --aura-accent-contrast-light: oklch(
+    from var(--aura-accent-light) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
+  );
+  --aura-accent-contrast-dark: oklch(
+    from var(--aura-accent-dark) clamp(0, (0.62 - l) * 1000, 1) 0 0 / clamp(0.8, (0.62 - l) * 1000, 1)
+  );
+
+  --aura-accent-text-light: color-mix(
+    in srgb,
+    var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+  --aura-accent-text-dark: color-mix(
+    in srgb,
+    var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
+
+  --aura-accent-color: light-dark(var(--aura-accent-light), var(--aura-accent-dark));
+  --aura-accent-contrast: light-dark(var(--aura-accent-contrast-light), var(--aura-accent-contrast-dark));
+  --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
+}
+
 @supports (color: hsl(0 0 0)) {
   :where(:root, :host) {
     --_safari-17-deg: 1;
diff --git a/packages/aura/src/components/button.css b/packages/aura/src/components/button.css
@@ -1,11 +1,19 @@
 :where(:root, :host) {
-  --vaadin-button-border-color: var(--vaadin-border-color);
   --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle) {
   transition: scale 180ms;
   position: relative;
+  --_accent: light-dark(
+    oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
+    oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
+  );
+  --_accent-border: light-dark(
+    oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast))),
+    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.1 + c / 2) + 0.1 * var(--aura-contrast)))
+  );
+  --_background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='tertiary'])) {
@@ -15,15 +23,13 @@
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([theme~='primary'], [theme~='tertiary']) {
-  background: var(--vaadin-button-background, var(--aura-surface) padding-box);
+  background: var(--vaadin-button-background, var(--_background));
+  --vaadin-button-border-color: var(--_accent-border);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='primary'])) {
   outline-offset: calc(var(--vaadin-button-border-width, 1px) * -1);
-}
-
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
-  outline-offset: 2px;
+  --vaadin-button-text-color: var(--aura-accent-text);
 }
 
 /*
@@ -49,13 +55,15 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
   padding-inline-end: max(var(--vaadin-padding-s), round(var(--vaadin-radius-m) / 1.75, 1px));
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] {
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where([theme~='primary']) {
+  outline-offset: 2px;
   --vaadin-button-font-weight: var(--aura-font-weight-semibold);
-  --vaadin-button-text-color: light-dark(var(--vaadin-background-color), var(--aura-background-dark));
+  --vaadin-button-text-color: var(--aura-accent-contrast);
+  --vaadin-button-background: var(--aura-accent-color);
 }
 
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary'] {
-  --vaadin-button-text-color: var(--vaadin-text-color-secondary);
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary']::part(label) {
+  color: color-mix(in srgb, currentColor 50%, transparent);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
@@ -73,13 +81,13 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
 
 @supports (color: hsl(0 0 0)) {
   :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {
-    background-color: oklch(from currentColor calc(l + 0.4 - c) c h);
+    background-color: oklch(from currentColor calc(l + 0.4 - c) c h / calc(1 - l / 2));
   }
 }
 
 @media (any-hover: hover) {
   :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):hover:not([disabled], [active])::before {
-    opacity: 0.05;
+    opacity: 0.03;
   }
 
   /* prettier-ignore */
@@ -111,3 +119,20 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
     border-inline-start-color: transparent;
   }
 }
+
+/* Color variants */
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):where(:not([theme~='accent'])) {
+  --aura-accent-light: var(--aura-text-light);
+  --aura-accent-dark: var(--aura-text-dark);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):is([theme~='danger'], [theme~='error']) {
+  --aura-accent-light: var(--aura-red);
+  --aura-accent-dark: var(--aura-red);
+}
+
+:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='success'] {
+  --aura-accent-light: var(--aura-green);
+  --aura-accent-dark: var(--aura-green);
+}
diff --git a/packages/aura/src/components/checkbox-radio.css b/packages/aura/src/components/checkbox-radio.css
@@ -30,15 +30,15 @@ vaadin-radio-button:not([checked])::part(radio) {
 }
 
 vaadin-checkbox:is([checked], [indeterminate]):not([readonly], [disabled])::part(checkbox) {
-  /* TODO add/use selection color */
   --vaadin-checkbox-background: var(--aura-accent-color);
   --vaadin-checkbox-color: var(--aura-accent-contrast);
+  --vaadin-checkbox-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-radio-button[checked]:not([readonly], [disabled])::part(radio) {
-  /* TODO add/use selection color */
   --vaadin-radio-button-background: var(--aura-accent-color);
   --vaadin-radio-button-color: var(--aura-accent-contrast);
+  --vaadin-radio-button-border-color: var(--vaadin-border-color-secondary);
 }
 
 vaadin-checkbox:not([readonly], [disabled])::part(checkbox)::before,
diff --git a/packages/aura/src/components/grid.css b/packages/aura/src/components/grid.css
@@ -1,25 +1,25 @@
 :where(:root, :host) {
-  /* TODO should likely be just a color prop, not a background-image */
-  --vaadin-grid-row-selected-background: linear-gradient(
-    var(--vaadin-background-container),
-    var(--vaadin-background-container)
-  );
+  --vaadin-grid-row-selected-background-color: color-mix(in srgb, var(--aura-accent-color) 10%, transparent);
+  --vaadin-grid-background: linear-gradient(var(--aura-surface), var(--aura-surface)) var(--aura-background) padding-box;
 }
 
 vaadin-grid[theme~='no-border']::part(first-column-cell) {
-  /* TODO can't use --vaadin-grid-cell-padding, it only works on the host */
-  /* quite difficult to override the cell padding when it’s on the slotted vaadin-grid-cell-content element */
-  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs) var(--vaadin-padding-l);
+  --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-s) var(--vaadin-padding-xs)
+    var(--vaadin-padding-l);
 }
 
 vaadin-grid[theme~='no-border']::part(last-column-cell) {
-  --_cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs) var(--vaadin-padding-s);
+  --vaadin-grid-cell-padding: var(--vaadin-padding-xs) var(--vaadin-padding-l) var(--vaadin-padding-xs)
+    var(--vaadin-padding-s);
+}
+
+vaadin-grid::part(empty-state) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 /* TODO custom part name: how should we indicate an active row? Should we have a built-in part name? */
 vaadin-grid::part(active-nav-item) {
-  /* TODO should likely be just a color prop, not a background-image */
-  /* TODO need a custom prop in grid base styles that can be used to just highlight a row, which works together with row stripes, selection color, etc. */
-  --vaadin-grid-cell-background: linear-gradient(var(--vaadin-background-container), var(--vaadin-background-container))
-    var(--vaadin-background-color);
+  --vaadin-grid-row-highlight-background-color: var(--vaadin-background-container);
 }
diff --git a/packages/aura/src/components/side-nav.css b/packages/aura/src/components/side-nav.css
@@ -15,7 +15,6 @@ vaadin-side-nav-item::part(content) {
     color 120ms,
     border-color 120ms,
     background-color 120ms;
-  background-clip: padding-box;
   --aura-surface-level: 3;
 }
 
@@ -24,67 +23,43 @@ vaadin-side-nav-item:not([disabled])::part(content):hover {
 }
 
 vaadin-side-nav-item[current]::part(content) {
-  --vaadin-side-nav-item-background: var(--aura-surface);
-  --vaadin-side-nav-item-border-color: var(--vaadin-border-color-secondary);
+  --_accent: light-dark(
+    oklch(from var(--aura-accent-light) calc(l + 0.2) c h / min(0.3, c / 2)),
+    oklch(from var(--aura-accent-dark) calc(l - 0.2) c h / min(0.3, c / 2))
+  );
+  --_accent-border: light-dark(
+    oklch(from var(--aura-accent-light) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast))),
+    oklch(from var(--aura-accent-dark) l calc(c / 2) h / calc(min(0.15, 0.05 + c / 2) + 0.1 * var(--aura-contrast)))
+  );
+  --vaadin-side-nav-item-background: linear-gradient(var(--_accent), var(--_accent)) var(--aura-surface) padding-box;
+  --vaadin-side-nav-item-color: var(--aura-accent-text);
+  --vaadin-side-nav-item-border-color: var(--_accent-border);
 }
 
-/* Contrast variant */
+/* Filled variant */
 
-vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current]::part(content) {
-  color-scheme: var(--_side-nav-current-item-color-scheme, dark);
-  background: var(--aura-surface-solid);
-  border-color: transparent;
+vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current]::part(content) {
+  --vaadin-side-nav-item-background: var(--aura-accent-color) border-box;
+  --vaadin-side-nav-item-color: var(--aura-accent-contrast);
   outline-offset: 2px;
 }
 
-vaadin-side-nav[theme~='contrast'] vaadin-side-nav-item[current] > :not([slot='children']) {
-  --aura-red: var(--vaadin-text-color);
-  --aura-red-text: var(--vaadin-text-color);
-  --aura-orange: var(--vaadin-text-color);
-  --aura-orange-text: var(--vaadin-text-color);
-  --aura-yellow: var(--vaadin-text-color);
-  --aura-yellow-text: var(--vaadin-text-color);
-  --aura-green: var(--vaadin-text-color);
-  --aura-green-text: var(--vaadin-text-color);
-  --aura-blue: var(--vaadin-text-color);
-  --aura-blue-text: var(--vaadin-text-color);
-  --aura-purple: var(--vaadin-text-color);
-  --aura-purple-text: var(--vaadin-text-color);
-}
-
-@container style(--aura-color-scheme: dark) {
-  [slot='drawer'] {
-    --_side-nav-current-item-color-scheme: light;
-  }
-}
-
-@container style(--aura-content-color-scheme: dark) {
-  vaadin-app-layout > :not([slot]) {
-    --_side-nav-current-item-color-scheme: light;
-  }
-}
-
-@container style(--aura-content-color-scheme: light) {
-  vaadin-app-layout > :not([slot]) {
-    --_side-nav-current-item-color-scheme: dark;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  @container style(--aura-content-color-scheme: light dark) {
-    vaadin-app-layout > :not([slot]) {
-      --_side-nav-current-item-color-scheme: light;
-    }
-  }
-
-  @container style(--aura-color-scheme: light dark) {
-    [slot='drawer'] {
-      --_side-nav-current-item-color-scheme: light;
-    }
-  }
-}
-
-/* TODO bug in component/base styles: hide label part if no label is provided */
-vaadin-side-nav:not(:has([slot='label']))::part(label) {
-  display: none;
+/* Badges and other content that uses the palette inside a filled nav item */
+vaadin-side-nav[theme~='filled'] vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']) {
+  --vaadin-text-color: var(--vaadin-side-nav-item-color);
+  --vaadin-text-color-secondary: var(--vaadin-side-nav-item-color);
+  --aura-accent-color: var(--vaadin-side-nav-item-color);
+  --aura-accent-text: var(--vaadin-side-nav-item-color);
+  --aura-red: var(--vaadin-side-nav-item-color);
+  --aura-red-text: var(--vaadin-side-nav-item-color);
+  --aura-orange: var(--vaadin-side-nav-item-color);
+  --aura-orange-text: var(--vaadin-side-nav-item-color);
+  --aura-yellow: var(--vaadin-side-nav-item-color);
+  --aura-yellow-text: var(--vaadin-side-nav-item-color);
+  --aura-green: var(--vaadin-side-nav-item-color);
+  --aura-green-text: var(--vaadin-side-nav-item-color);
+  --aura-blue: var(--vaadin-side-nav-item-color);
+  --aura-blue-text: var(--vaadin-side-nav-item-color);
+  --aura-purple: var(--vaadin-side-nav-item-color);
+  --aura-purple-text: var(--vaadin-side-nav-item-color);
 }
