refactor: use shadow presets instead of hard-coded values (#10700)

Author: jouni

packages/aura/src/components/button.css

@@ -1,6 +1,6 @@
 :where(:root),
 :where(:host) {
-  --vaadin-button-shadow: 0 1px 4px -1px hsla(0, 0%, 0%, 0.07);
+  --vaadin-button-shadow: var(--aura-shadow-xs);
 }
 
 :is(vaadin-button, vaadin-menu-bar-button, vaadin-drawer-toggle, vaadin-crud-edit) {
@@ -59,7 +59,7 @@ vaadin-menu-bar-button[aria-haspopup='true']:not([slot='overflow']) {
   --vaadin-button-text-color: var(--aura-accent-contrast-color);
   --vaadin-button-background: var(--aura-accent-color);
   --vaadin-button-border-color: var(--vaadin-border-color-secondary);
-  --vaadin-button-shadow: 0 2px 3px -1px hsla(0, 0%, 0%, 0.24);
+  --vaadin-button-shadow: var(--aura-shadow-s);
 }
 
 /* prettier-ignore */

packages/aura/src/components/card.css

@@ -35,11 +35,7 @@ vaadin-card[theme~='elevated'] {
   --aura-surface-opacity: 0.7;
   --aura-surface-level: 3;
   background: var(--aura-surface-color) padding-box;
-  --_shadow-color: light-dark(
-    oklch(from var(--aura-background-color-light) calc(l - l * 0.8) calc(c / 10) h / 0.1),
-    oklch(from var(--aura-background-color-dark) calc(l - l * 0.8) calc(c / 10) h / 0.2)
-  );
-  --vaadin-card-shadow: 0 1px 4px -1px var(--_shadow-color);
+  box-shadow: var(--vaadin-card-shadow, var(--aura-shadow-s));
 }
 
 vaadin-card[theme~='stretch-media']:not([theme~='cover-media']) [slot='media']:is(img, video, svg, vaadin-icon) {

packages/aura/src/components/input-container.css

@@ -16,7 +16,7 @@ vaadin-input-container {
 
 :not([readonly], [disabled])::part(input-field),
 vaadin-message-input:not([readonly], [disabled]) {
-  box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
+  box-shadow: var(--aura-shadow-xs);
 }
 
 [readonly]::part(input-field) {

packages/aura/src/components/rich-text-editor.css

@@ -14,7 +14,7 @@ vaadin-rich-text-editor {
   --vaadin-rich-text-editor-background: var(--aura-surface-color) padding-box;
   --aura-surface-level: 4;
   --aura-surface-opacity: 0.7 !important;
-  box-shadow: 0 2px 1px -1px hsla(0, 0%, 0%, 0.04);
+  box-shadow: var(--aura-shadow-xs);
 
   &:not(:focus-within) {
     --vaadin-rich-text-editor-toolbar-button-text-color: var(--vaadin-text-color-disabled);

packages/aura/src/components/tabs.css

@@ -49,13 +49,13 @@ vaadin-tabs[overflow~='end'] {
 
 vaadin-tabs::part(back-button),
 vaadin-tabs::part(forward-button) {
-  background: var(--aura-surface-color-solid) padding-box;
-  border: 1px solid var(--vaadin-border-color);
+  background: var(--aura-background-color) padding-box;
+  border: 1px solid var(--vaadin-border-color-secondary);
   border-radius: var(--vaadin-radius-m);
   padding: var(--vaadin-padding-xs);
   height: auto;
   align-self: center;
-  box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
+  box-shadow: var(--aura-shadow-s);
   transition: opacity 120ms;
 }
 
@@ -84,7 +84,8 @@ vaadin-tab[selected] {
   --aura-surface-opacity: 0.7;
   --vaadin-tab-background: var(--aura-accent-surface);
   --vaadin-tab-text-color: var(--aura-accent-text-color);
-  box-shadow: 0 1px 4px -1px var(--aura-shadow-color);
+  box-shadow: var(--aura-shadow-s);
+  border-color: hsl(0deg, 100%, 100%, 0.05);
 }
 
 /* Filled variant */