mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

adjust elevation tokens

pull/512/head
Cory LaViska 2021-08-20 17:23:59 -04:00
rodzic 51dbc1a1ee
commit 76e1d4b403
3 zmienionych plików z 15 dodań i 10 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

5
docs/resources/changelog.md
Wyświetl plik

@ -6,6 +6,11 @@ Components with the <sl-badge type="warning" pill>Experimental</sl-badge> 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.

10
src/themes/dark.styles.ts
Wyświetl plik

@ -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

10
src/themes/light.styles.ts
Wyświetl plik

@ -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