fix stylesheet refs

pull/385/head
Cory LaViska 2021-03-18 09:06:36 -04:00
rodzic 334a7ca832
commit c351e56aa7
3 zmienionych plików z 5 dodań i 5 usunięć

Wyświetl plik

@ -155,7 +155,7 @@ You can control the size of tooltip arrows by overriding the `--sl-tooltip-arrow
</div>
```
To override it globally, set it in a root block in your stylesheet after `shoelace.css` is loaded.
To override it globally, set it in a root block in your stylesheet after the Shoelace stylesheet is loaded.
```css
:root {

Wyświetl plik

@ -8,7 +8,7 @@ Shoelace makes use of several design tokens to provide a consistent appearance a
Design tokens offer a high-level way to customize the library with minimal effort. There are no component-specific variables, however, as design tokens are intended to be generic and highly reusable. To customize an individual component, refer to the section entitled [Component parts](#component-parts).
Design tokens are CSS custom properties ("CSS variables") that are defined in the `:root` block of `shoelace.css`. This stylesheet is imported when you install Shoelace, so design tokens are available on your page at that point. Because design tokens are global, they're always prefixed with `--sl` to avoid collisions with other libraries.
Design tokens are CSS custom properties ("CSS variables") that are defined in the `:root` block of `themes/base.css`. This stylesheet is imported when you install Shoelace, so design tokens are available on your page at that point. Because design tokens are global, they're always prefixed with `--sl` to avoid collisions with other libraries.
To customize a design token, simply override it in your stylesheet using a `:root` block.
@ -28,9 +28,9 @@ To customize a design token, simply override it in your stylesheet using a `:roo
}
```
Many design tokens are described further along in this documentation. For a complete list, refer to `shoelace.scss` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/styles/shoelace.scss).
Many design tokens are described further along in this documentation. For a complete list, refer to `themes/base.scss` in the project's [source code](https://github.com/shoelace-style/shoelace/blob/current/src/styles/shoelace.scss).
!> **Never modify variables directly in `shoelace.css`** because your changes will be overwritten when you upgrade the library. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
!> **Never modify variables directly in `themes/base.css`** because your changes will be overwritten when you upgrade the library. Even if you don't plan on upgrading, it's always better to override design tokens in your own stylesheet for better maintainability.
## Component Parts

Wyświetl plik

@ -2,7 +2,7 @@
Shoelace ships with a dark theme that complements the default light theme. You can even take things a step further by designing your own custom theme.
The default theme is included as part of `shoelace.css` and should always be loaded first, even if you want to use another theme exclusively. The default theme contains important base tokens and utilities that many components rely on.
The default theme is included as part of `themse/base.css` and should always be loaded first, even if you want to use another theme exclusively. The default theme contains important base tokens and utilities that many components rely on.
## Dark Mode