diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 8c1dc3e9..eceb47ee 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -6,6 +6,11 @@ Components with the Experimental badge _During the beta period, these restrictions may be relaxed in the event of a mission-critical bug._ 🐛 +## Next + +- Adjusted elevation tokens to use neutral in light mode and black in dark mode +- Removed elevation from `sl-color-picker` when rendered inline + ## 2.0.0-beta.48 This release improves theming by offering both light and dark themes that can be used autonomously. It also improves contrast in most components, adds a variety of new color primitives, and changes the way color tokens are consumed. diff --git a/src/themes/dark.styles.ts b/src/themes/dark.styles.ts index be4c0953..3cec7d12 100644 --- a/src/themes/dark.styles.ts +++ b/src/themes/dark.styles.ts @@ -383,11 +383,11 @@ export default css` * Elevation tokens */ - --sl-shadow-x-small: 0 1px 0 rgb(0 0 0 / 5%); - --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 9%); - --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 9%); - --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 9%); - --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 9%); + --sl-shadow-x-small: 0 1px 0 rgb(0 0 0 / 12%); + --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 18%); + --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 18%); + --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 18%); + --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 18%); /* * Spacing tokens diff --git a/src/themes/light.styles.ts b/src/themes/light.styles.ts index 0e60dbb5..5a0ebccb 100644 --- a/src/themes/light.styles.ts +++ b/src/themes/light.styles.ts @@ -383,11 +383,11 @@ export default css` * Elevation tokens */ - --sl-shadow-x-small: 0 1px 0 rgb(0 0 0 / 5%); - --sl-shadow-small: 0 1px 2px rgb(0 0 0 / 9%); - --sl-shadow-medium: 0 2px 4px rgb(0 0 0 / 9%); - --sl-shadow-large: 0 2px 8px rgb(0 0 0 / 9%); - --sl-shadow-x-large: 0 4px 16px rgb(0 0 0 / 9%); + --sl-shadow-x-small: 0 1px 0 rgb(var(--sl-color-neutral-500) / 10%); + --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%); + --sl-shadow-x-large: 0 4px 16px rgb(var(--sl-color-neutral-500) / 12%); /* * Spacing tokens