refactor: allow Aura badges to inherit the accent color from the container (#11282)

Author: jouni

dev/aura/colors.html

@@ -22,6 +22,8 @@
       import '@vaadin/button';
       import '@vaadin/checkbox';
       import '@vaadin/checkbox-group';
+      import '@vaadin/icon';
+      import '@vaadin/icons';
       import '@vaadin/side-nav';
       import '@vaadin/tabs';
 
@@ -67,9 +69,12 @@
           accentColors.forEach((color, i) => {
             section.querySelectorAll(`:scope > :nth-child(${i + 1}) vaadin-badge`).forEach((badge) => {
               badge.classList.toggle('aura-accent-' + color.toLowerCase(), e.target.checked);
-              badge.textContent = e.target.checked ? color : 'Accent';
+              badge.lastChild.textContent = e.target.checked ? color : 'Accent';
             });
           });
+          section.querySelectorAll(`:scope > :nth-child(${accentColors.length + 1}) vaadin-badge`).forEach((badge) => {
+            badge.classList.toggle('aura-accent-color', e.target.checked);
+          });
         });
       });
     </script>
@@ -246,19 +251,28 @@ <h3 class="heading">Accent Colors</h3>
     <section class="section generate-variations">
       <vaadin-button>
         Button
-        <vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
+        <vaadin-badge slot="suffix">
+          <vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
+          Accent
+        </vaadin-badge>
       </vaadin-button>
     </section>
 
     <section class="section generate-variations">
       <vaadin-tabs>
         <vaadin-tab>
           Tab
-          <vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
+          <vaadin-badge>
+            <vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
+            Accent
+          </vaadin-badge>
         </vaadin-tab>
         <vaadin-tab>
           Tab
-          <vaadin-badge class="aura-accent-color">Accent</vaadin-badge>
+          <vaadin-badge>
+            <vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
+            Accent
+          </vaadin-badge>
         </vaadin-tab>
       </vaadin-tabs>
     </section>
@@ -267,11 +281,17 @@ <h3 class="heading">Accent Colors</h3>
       <vaadin-side-nav>
         <vaadin-side-nav-item path="">
           Nav Item
-          <vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
+          <vaadin-badge slot="suffix">
+            <vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
+            Accent
+          </vaadin-badge>
         </vaadin-side-nav-item>
         <vaadin-side-nav-item path="foo">
           Nav Item
-          <vaadin-badge class="aura-accent-color" slot="suffix">Accent</vaadin-badge>
+          <vaadin-badge slot="suffix">
+            <vaadin-icon icon="vaadin:check" slot="icon"></vaadin-icon>
+            Accent
+          </vaadin-badge>
         </vaadin-side-nav-item>
       </vaadin-side-nav>
     </section>

packages/aura/src/color.css

@@ -249,34 +249,3 @@ vaadin-upload-file,
   --aura-accent-color-dark: var(--aura-blue);
   --aura-accent-color: light-dark(var(--aura-accent-color-light), var(--aura-accent-color-dark));
 }
-
-/* Restore accent color for child elements like badges */
-:where(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle) > *,
-:where(vaadin-tab) > *,
-:where(vaadin-side-nav-item) > * {
-  --aura-accent-color-light: var(--aura-accent-color-light-initial);
-  --aura-accent-color-dark: var(--aura-accent-color-dark-initial);
-  --aura-accent-color: light-dark(var(--aura-accent-color-light-initial), var(--aura-accent-color-dark-initial));
-}
-
-/* Badges and other content that uses contrast color inside filled variants */
-:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
-vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
-vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
-:is(
-    vaadin-combo-box-item,
-    vaadin-context-menu-item,
-    vaadin-item,
-    vaadin-menu-bar-item,
-    vaadin-multi-select-combo-box-item,
-    vaadin-select-item[role]
-  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover
-  > * {
-  --vaadin-icon-color: currentColor;
-  --vaadin-text-color: currentColor;
-  --vaadin-text-color-secondary: color-mix(in srgb, currentColor 70%, transparent);
-  --vaadin-text-color-disabled: color-mix(in srgb, currentColor 50%, transparent);
-  --aura-accent-text-color: currentColor;
-  --aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
-  --aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);
-}

packages/aura/src/components/badge.css

@@ -11,33 +11,48 @@ vaadin-badge:is([theme~='filled'], [theme~='dot']) {
   color: var(--aura-accent-contrast-color);
 }
 
-/* Special case for filled badges within filled variants */
-/* TODO is there a way to solve this without explicitly listing the special cases? */
-:is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'],
-vaadin-tabs[theme~='filled'] > vaadin-tab[selected],
-vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current],
+/* Inside filled component variants, increase the opacity of default badge variants so that they retain their color */
+:is(vaadin-button, vaadin-upload-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[theme~='primary'] > *,
+vaadin-tabs[theme~='filled'] > vaadin-tab[selected] > :not([slot='tooltip']),
+vaadin-side-nav[theme~='filled'] > vaadin-side-nav-item[current] > :not([slot='children']):not([slot='tooltip']),
 :is(
     vaadin-combo-box-item,
     vaadin-context-menu-item,
     vaadin-item,
     vaadin-menu-bar-item,
     vaadin-multi-select-combo-box-item,
     vaadin-select-item[role]
-  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover {
-  > vaadin-badge[theme~='filled']:not(
-      .aura-accent-red,
-      .aura-accent-orange,
-      .aura-accent-yellow,
-      .aura-accent-green,
-      .aura-accent-blue,
-      .aura-accent-purple,
-      [theme~='info'],
-      [theme~='success'],
-      [theme~='warning'],
-      [theme~='error']
-    ) {
-    border-color: transparent;
-    background: var(--aura-accent-contrast-color);
-    color: var(--aura-accent-color);
+  )[theme~='filled']:not([disabled], [aria-disabled='true']):hover
+  > vaadin-badge {
+  --vaadin-icon-color: currentColor;
+  --aura-surface-opacity: 1;
+  --aura-surface-level: 3;
+
+  /* Badges that are not explicitly colored (i.e. default/inherited accent color and neutral accent color) inherit their color from the parent container */
+  &:not(
+    .aura-accent-color,
+    .aura-accent-red,
+    .aura-accent-orange,
+    .aura-accent-yellow,
+    .aura-accent-green,
+    .aura-accent-blue,
+    .aura-accent-purple,
+    [theme~='info'],
+    [theme~='success'],
+    [theme~='warning'],
+    [theme~='error']
+  ) {
+    --aura-surface-opacity: 0.5;
+    --aura-surface-level: 1;
+    --aura-accent-text-color: currentColor;
+    --aura-accent-border-color: color-mix(in srgb, currentColor 30%, transparent);
+    --aura-accent-surface: color-mix(in srgb, currentColor 10%, transparent);
+
+    /* Invert the colors of filled, non-explicitly colored badges */
+    &[theme~='filled'] {
+      background: var(--aura-accent-contrast-color);
+      color: var(--aura-accent-color);
+      border-color: transparent;
+    }
   }
 }