refactor: rename base styles custom CSS properties for colors (#10189)

Author: web-padawan

dev/app-layout.html

@@ -20,7 +20,7 @@
       div[slot~='navbar'] {
         font-size: 1.125rem;
         margin: 0;
-        color: var(--vaadin-color);
+        color: var(--vaadin-text-color);
         font-weight: 600;
       }
 

dev/aura.html

@@ -244,7 +244,7 @@
         place-self: stretch;
         margin: var(--vaadin-gap-m) 0;
         border: 0;
-        background: var(--vaadin-border-color-subtle);
+        background: var(--vaadin-border-color-secondary);
         min-height: 1px;
         max-height: 1px;
       }
@@ -402,7 +402,7 @@ <h1>Components</h1>
                 align-items: center;
                 justify-content: center;
                 border-radius: var(--vaadin-radius-m);
-                border: 1px solid var(--vaadin-border-color-subtle);
+                border: 1px solid var(--vaadin-border-color-secondary);
                 gap: var(--vaadin-gap-s);
                 padding: var(--vaadin-padding-l);
                 box-sizing: border-box;
@@ -477,7 +477,6 @@ <h1>Components</h1>
                 </div>
 
                 <div class="aura-surface component wide tall">
-
                   <div class="badges">
                     <span theme="badge">Default</span>
                     <span theme="badge accent">Accent</span>

dev/aura/aura-abstract-control.js

@@ -15,7 +15,7 @@ export class AuraControl extends HTMLElement {
       }
 
       label {
-        color: var(--vaadin-color);
+        color: var(--vaadin-text-color);
         font-weight: var(--aura-font-weight-medium);
       }
 

dev/aura/aura-scheme-control.js

@@ -45,7 +45,7 @@ class AuraSchemeControl extends AuraControl {
           cursor: pointer;
           user-select: none;
           display: inline-block;
-          border-right: 1px solid var(--vaadin-border-color-subtle);
+          border-right: 1px solid var(--vaadin-border-color-secondary);
         }
 
         .segmented label:last-of-type {
@@ -55,7 +55,7 @@ class AuraSchemeControl extends AuraControl {
         /* Selected state */
         .segmented input:checked + label {
           background: var(--vaadin-background-container);
-          color: var(--vaadin-color);
+          color: var(--vaadin-text-color);
           background-clip: padding-box;
           font-weight: 600;
         }

dev/aura/aura-view.css

@@ -26,7 +26,7 @@
   font-size: var(--aura-font-size-l);
   font-weight: var(--aura-font-weight-semibold);
   line-height: var(--aura-line-height-m);
-  color: var(--vaadin-color);
+  color: var(--vaadin-text-color);
   flex: 1;
 
   &:first-child {

dev/aura/badge.css

@@ -12,9 +12,13 @@
   padding: 0 0.5em;
   border-radius: var(--vaadin-radius-l);
   min-width: calc(1lh - 1em - 2px);
-  --color: var(--vaadin-color);
+  --color: var(--vaadin-text-color);
   --text-opacity: 70%;
-  color: color-mix(in xyz, var(--color) calc(var(--text-opacity) - 15% * var(--aura-contrast)), var(--vaadin-color));
+  color: color-mix(
+    in xyz,
+    var(--color) calc(var(--text-opacity) - 15% * var(--aura-contrast)),
+    var(--vaadin-text-color)
+  );
   --vaadin-icon-size: 0.75lh;
 }
 

packages/aura/src/color.css

@@ -8,15 +8,19 @@
     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-color: light-dark(
+  --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)
   );
-  --vaadin-color-subtle: light-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)
   );
-  --vaadin-color-disabled: color-mix(in srgb, var(--_color-base) calc(30% + 10% * var(--aura-contrast)), transparent);
+  --vaadin-text-color-disabled: color-mix(
+    in srgb,
+    var(--_color-base) calc(30% + 10% * var(--aura-contrast)),
+    transparent
+  );
 
   --_border-color-base: light-dark(
     oklch(from var(--aura-background-light) 0.1 c h),
@@ -27,7 +31,7 @@
     var(--_border-color-base) calc(14% + 6% * var(--aura-contrast)),
     transparent
   );
-  --vaadin-border-color-subtle: light-dark(
+  --vaadin-border-color-secondary: light-dark(
     color-mix(in srgb, var(--_border-color-base) max(5%, 5% + 3% * var(--aura-contrast)), transparent),
     color-mix(in srgb, var(--_border-color-base) max(6%, 5% + 5% * var(--aura-contrast)), transparent)
   );
@@ -62,12 +66,12 @@
   --aura-accent-text-light: color-mix(
     in srgb,
     var(--aura-accent-light) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-color)
+    var(--vaadin-text-color)
   );
   --aura-accent-text-dark: color-mix(
     in srgb,
     var(--aura-accent-dark) calc(70% - 15% * var(--aura-contrast)),
-    var(--vaadin-color)
+    var(--vaadin-text-color)
   );
   --aura-accent-text: light-dark(var(--aura-accent-text-light), var(--aura-accent-text-dark));
 
@@ -86,7 +90,7 @@
     transparent
   );
 
-  color: var(--vaadin-color);
+  color: var(--vaadin-text-color);
   background: var(--aura-app-background);
   background-size: 100vw 100vh;
   background-attachment: fixed;
@@ -99,5 +103,5 @@
 }
 
 :where(h1, h2, h3, h4, h5, h6) {
-  color: var(--vaadin-color);
+  color: var(--vaadin-text-color);
 }

packages/aura/src/components/app-layout.css

@@ -76,14 +76,14 @@ vaadin-app-layout > vaadin-scroller:nth-last-child(1 of [slot='drawer']) {
 
 vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   color-scheme: var(--aura-content-color-scheme);
-  color: var(--vaadin-color);
+  color: var(--vaadin-text-color);
   background: linear-gradient(var(--aura-surface), var(--aura-surface)), var(--aura-app-background);
   background-clip: padding-box;
   background-origin: border-box;
   min-height: 100%;
   box-sizing: border-box;
   border-radius: var(--_app-layout-radius);
-  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-subtle);
+  border: var(--_aura-mdl-border) solid var(--vaadin-border-color-secondary);
   border-block-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
   border-inline-end-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
 }
@@ -100,7 +100,7 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 
   &:is([drawer][has-detail]) {
-    border-color: light-dark(var(--vaadin-border-color), var(--vaadin-border-color-subtle));
+    border-color: light-dark(var(--vaadin-border-color), var(--vaadin-border-color-secondary));
   }
 }
 

packages/aura/src/components/avatar.css

@@ -1,5 +1,5 @@
 :where(:root, :host) {
-  --vaadin-avatar-border-color: var(--vaadin-border-color-subtle);
+  --vaadin-avatar-border-color: var(--vaadin-border-color-secondary);
   --vaadin-avatar-background: var(--vaadin-background-container);
   --vaadin-avatar-font-weight: var(--aura-font-weight-medium);
   --vaadin-avatar-font-size: var(--aura-font-size-m);

packages/aura/src/components/button.css

@@ -55,7 +55,7 @@ vaadin-menu-bar-button[aria-haspopup='true'] {
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle)[disabled][theme~='primary'] {
-  --vaadin-button-text-color: var(--vaadin-color-subtle);
+  --vaadin-button-text-color: var(--vaadin-text-color-secondary);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle):not([disabled])::before {