adjust default button elevation

docs/resources/changelog.md

@@ -9,6 +9,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added missing `--sl-focus-ring-*` tokens to dark theme
+- Added a subtle elevation to default buttons to make them more easily identifiable
+- Improved the `--sl-shadow-x-small` elevation
 - Improved visibility of elevations and overlays in dark theme
 - Reduced the size of `<sl-color-picker>` slightly to better accommodate mobile devices
 - Removed `<sl-icon>` dependency from `<sl-color-picker>` and improve copy animation

src/components/button/button.styles.ts

@@ -73,6 +73,7 @@ export default css`
     background-color: rgb(var(--sl-color-neutral-0));
     border-color: rgb(var(--sl-color-neutral-300));
     color: rgb(var(--sl-color-neutral-700));
+    box-shadow: var(--sl-shadow-x-small);
   }
 
   .button.button--default:hover:not(.button--disabled) {

src/themes/dark.styles.ts

@@ -383,7 +383,7 @@ export default css`
      * Elevation tokens
      */
 
-    --sl-shadow-x-small: 0 1px 0 rgb(0 0 0 / 18%);
+    --sl-shadow-x-small: 0 1px 2px rgb(0 0 0 / 18%);
     --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 24%);
     --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 24%);
     --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 24%);

src/themes/light.styles.ts

@@ -383,7 +383,7 @@ export default css`
      * Elevation tokens
      */
 
-    --sl-shadow-x-small: 0 1px 0 rgb(var(--sl-color-neutral-500) / 10%);
+    --sl-shadow-x-small: 0 1px 2px rgb(var(--sl-color-neutral-500) / 6%);
     --sl-shadow-small: 0 1px 2px rgb(var(--sl-color-neutral-500) / 12%);
     --sl-shadow-medium: 0 2px 4px rgb(var(--sl-color-neutral-500) / 12%);
     --sl-shadow-large: 0 2px 8px rgb(var(--sl-color-neutral-500) / 12%);