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

fix --sl-color-neutral-0|1000

pull/513/head
Cory LaViska 2021-08-25 17:48:37 -04:00
rodzic f3281d3985
commit 0829af77c0
19 zmienionych plików z 72 dodań i 71 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

6
docs/assets/plugins/code-block/code-block.css
Wyświetl plik

@ -11,7 +11,7 @@
border-bottom: none;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
min-width: 20rem;
max-width: 100%;
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
@ -40,7 +40,7 @@
width: 1.75rem;
font-size: 20px;
color: rgb(var(--sl-color-neutral-600));
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-left: solid 1px rgb(var(--sl-color-neutral-200));
border-top-right-radius: 3px;
cursor: ew-resize;
@ -92,7 +92,7 @@
min-width: 2.5rem;
border: none;
border-radius: 0;
background: rgb(var(--sl-color-neutral-1000));
background: rgb(var(--sl-color-neutral-0));
font: inherit;
font-size: 0.7rem;
font-weight: 500;

16
docs/assets/styles/docs.css
Wyświetl plik

@ -13,7 +13,7 @@ body {
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
letter-spacing: var(--sl-letter-spacing-normal);
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
color: rgb(var(--sl-color-neutral-800));
line-height: var(--sl-line-height-normal);
}
@ -32,7 +32,7 @@ strong {
/* Sidebar */
.sidebar {
background: rgb(var(--sl-color-neutral-1000));
background: rgb(var(--sl-color-neutral-0));
border-right: solid 1px rgb(var(--sl-color-neutral-200));
}
@ -109,11 +109,11 @@ strong {
}
.sidebar .clear-button svg circle {
fill: rgb(var(--sl-color-neutral-400));
fill: rgb(var(--sl-color-neutral-500));
}
.sidebar .clear-button svg path {
stroke: rgb(var(--sl-color-neutral-1000));
stroke: rgb(var(--sl-color-neutral-0));
}
.sidebar .clear-button:focus {
@ -150,7 +150,7 @@ strong {
width: 2rem;
height: 2rem;
border-radius: var(--sl-border-radius-medium);
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
padding: 0.5rem;
}
@ -285,7 +285,7 @@ strong {
}
.anchor span {
color: rgb(var(--sl-color-neutral-0));
color: rgb(var(--sl-color-neutral-1000));
}
.markdown-section blockquote {
@ -529,7 +529,7 @@ strong {
.markdown-section p.warn:before {
content: '!';
border-radius: 100%;
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
font-size: 14px;
font-weight: bold;
left: -12px;
@ -687,7 +687,7 @@ body[data-page^='tokens/'] .table-wrapper td:first-child code {
}
.color-palette__swatch--border {
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-0) / 10%);
box-shadow: inset 0 0 0 1px rgb(var(--sl-color-neutral-1000) / 10%);
}
@media screen and (max-width: 1200px) {

2
docs/components/avatar.md
Wyświetl plik

@ -78,7 +78,7 @@ You can group avatars with a few lines of CSS.
}
.avatar-group sl-avatar::part(base) {
border: solid 2px rgb(var(--sl-color-neutral-1000));
border: solid 2px rgb(var(--sl-color-neutral-0));
}
</style>
```

2
docs/getting-started/customizing.md
Wyświetl plik

@ -46,7 +46,7 @@ Here's an example that modifies buttons with the `tomato-button` class.
<style>
.tomato-button::part(base) {
background: rgb(var(--sl-color-neutral-1000));
background: rgb(var(--sl-color-neutral-0));
border: solid 1px tomato;
}

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

@ -8,6 +8,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
- 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
- Added `--swatch-size` custom property to `sl-color-picker`
- Added `date` to `sl-input` as a supported `type`
- Adjusted elevation tokens to use neutral in light mode and black in dark mode

4
docs/tokens/color.md
Wyświetl plik

@ -129,8 +129,8 @@ Theme tokens give you a semantic way to reference colors in your app. The primar
Black & White<br>
<code>--sl-color-neutral-<em>{n}</em></code>
</div>
<div class="color-palette__example"><div class="color-palette__swatch" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
<div class="color-palette__example"><div class="color-palette__swatch color-palette__swatch--border" style="background-color: rgb(var(--sl-color-neutral-0));"></div>0</div>
<div class="color-palette__example"><div class="color-palette__swatch " style="background-color: rgb(var(--sl-color-neutral-1000));"></div>1000</div>
</div>
?> Looking for an easy way to customize your theme? [Try the color token generator!](https://codepen.io/claviska/full/QWveRgL)

2
src/components/alert/alert.styles.ts
Wyświetl plik

@ -15,7 +15,7 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border: solid 1px rgb(var(--sl-color-neutral-200));
border-top-width: 3px;
border-radius: var(--sl-border-radius-medium);

2
src/components/avatar/avatar.styles.ts
Wyświetl plik

@ -21,7 +21,7 @@ export default css`
font-family: var(--sl-font-sans);
font-size: calc(var(--size) * 0.5);
font-weight: var(--sl-font-weight-normal);
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
overflow: hidden;
user-select: none;
vertical-align: middle;

10
src/components/badge/badge.styles.ts
Wyświetl plik

@ -26,27 +26,27 @@ export default css`
/* Type modifiers */
.badge--primary {
background-color: rgb(var(--sl-color-primary-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.badge--success {
background-color: rgb(var(--sl-color-success-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.badge--neutral {
background-color: rgb(var(--sl-color-neutral-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.badge--warning {
background-color: rgb(var(--sl-color-warning-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.badge--danger {
background-color: rgb(var(--sl-color-danger-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/* Pill modifier */

44
src/components/button/button.styles.ts
Wyświetl plik

@ -69,7 +69,7 @@ export default css`
/* Default */
.button.button--default {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-neutral-300));
color: rgb(var(--sl-color-neutral-700));
}
@ -97,129 +97,129 @@ export default css`
.button.button--primary {
background-color: rgb(var(--sl-color-primary-600));
border-color: rgb(var(--sl-color-primary-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--primary:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-500));
border-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--primary:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-500));
border-color: rgb(var(--sl-color-primary-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
}
.button.button--primary:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-primary-600));
border-color: rgb(var(--sl-color-primary-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/* Success */
.button.button--success {
background-color: rgb(var(--sl-color-success-600));
border-color: rgb(var(--sl-color-success-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--success:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-500));
border-color: rgb(var(--sl-color-success-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--success:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-600));
border-color: rgb(var(--sl-color-success-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-success-500) / var(--sl-focus-ring-alpha));
}
.button.button--success:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-success-600));
border-color: rgb(var(--sl-color-success-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/* Neutral */
.button.button--neutral {
background-color: rgb(var(--sl-color-neutral-600));
border-color: rgb(var(--sl-color-neutral-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--neutral:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-500));
border-color: rgb(var(--sl-color-neutral-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--neutral:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-500));
border-color: rgb(var(--sl-color-neutral-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-neutral-500) / var(--sl-focus-ring-alpha));
}
.button.button--neutral:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-neutral-600));
border-color: rgb(var(--sl-color-neutral-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/* Warning */
.button.button--warning {
background-color: rgb(var(--sl-color-warning-600));
border-color: rgb(var(--sl-color-warning-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--warning:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-500));
border-color: rgb(var(--sl-color-warning-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--warning:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-500));
border-color: rgb(var(--sl-color-warning-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-warning-500) / var(--sl-focus-ring-alpha));
}
.button.button--warning:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-warning-600));
border-color: rgb(var(--sl-color-warning-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/* Danger */
.button.button--danger {
background-color: rgb(var(--sl-color-danger-600));
border-color: rgb(var(--sl-color-danger-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--danger:hover:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-500));
border-color: rgb(var(--sl-color-danger-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.button.button--danger:focus:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-500));
border-color: rgb(var(--sl-color-danger-500));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
}
.button.button--danger:active:not(.button--disabled) {
background-color: rgb(var(--sl-color-danger-600));
border-color: rgb(var(--sl-color-danger-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
/*
@ -482,7 +482,7 @@ export default css`
top: 0;
left: 0;
bottom: 0;
border-left: solid 1px rgb(var(--sl-color-neutral-1000) / 20%);
border-left: solid 1px rgb(var(--sl-color-neutral-0) / 20%);
}
/* Bump focused buttons up so their focus ring isn't clipped */

2
src/components/card/card.styles.ts
Wyświetl plik

@ -16,7 +16,7 @@ export default css`
.card {
display: flex;
flex-direction: column;
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
box-shadow: var(--sl-shadow-x-small);
border: solid var(--border-width) var(--border-color);
border-radius: var(--border-radius);

2
src/components/checkbox/checkbox.styles.ts
Wyświetl plik

@ -30,7 +30,7 @@ export default css`
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
border-radius: 2px;
background-color: rgb(var(--sl-input-background-color));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
}

4
src/components/image-comparer/image-comparer.styles.ts
Wyświetl plik

@ -48,7 +48,7 @@ export default css`
top: 0;
width: var(--divider-width);
height: 100%;
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
transform: translateX(calc(var(--divider-width) / -2));
cursor: ew-resize;
}
@ -61,7 +61,7 @@ export default css`
top: calc(50% - (var(--handle-size) / 2));
width: var(--handle-size);
height: var(--handle-size);
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-radius: var(--sl-border-radius-circle);
font-size: calc(var(--handle-size) * 0.5);
color: rgb(var(--sl-color-neutral-500));

2
src/components/menu-item/menu-item.styles.ts
Wyświetl plik

@ -64,7 +64,7 @@ export default css`
:host(.sl-focus-visible:focus:not([aria-disabled='true'])) .menu-item {
outline: none;
background-color: rgb(var(--sl-color-primary-600));
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
}
.menu-item .menu-item__check {

2
src/components/progress-bar/progress-bar.styles.ts
Wyświetl plik

@ -8,7 +8,7 @@ export default css`
--height: 16px;
--track-color: rgb(var(--sl-color-neutral-500) / 20%);
--indicator-color: rgb(var(--sl-color-primary-600));
--label-color: rgb(var(--sl-color-neutral-1000));
--label-color: rgb(var(--sl-color-neutral-0));
display: block;
}

2
src/components/radio/radio.styles.ts
Wyświetl plik

@ -69,7 +69,7 @@ export default css`
/* Checked */
.radio--checked .radio__control {
color: rgb(var(--sl-color-neutral-1000));
color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-primary-600));
background-color: rgb(var(--sl-color-primary-600));
}

12
src/components/switch/switch.styles.ts
Wyświetl plik

@ -40,7 +40,7 @@ export default css`
.switch__control .switch__thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-radius: 50%;
border: solid var(--sl-input-border-width) rgb(var(--sl-input-border-color));
transform: translateX(calc((var(--width) - var(--height)) / -2));
@ -62,7 +62,7 @@ export default css`
border-color: rgb(var(--sl-color-neutral-200));
}
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-input-border-color));
}
@ -73,7 +73,7 @@ export default css`
}
.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-primary-600));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
}
@ -85,7 +85,7 @@ export default css`
}
.switch--checked .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-primary-600));
transform: translateX(calc((var(--width) - var(--height)) / 2));
}
@ -97,7 +97,7 @@ export default css`
}
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-primary-600));
}
@ -108,7 +108,7 @@ export default css`
}
.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {
background-color: rgb(var(--sl-color-neutral-1000));
background-color: rgb(var(--sl-color-neutral-0));
border-color: rgb(var(--sl-color-primary-600));
box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
}

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

@ -364,8 +364,8 @@ export default css`
--sl-color-neutral-950: var(--sl-color-gray-950);
/* Neutral one-offs */
--sl-color-neutral-0: 255 255 255;
--sl-color-neutral-1000: 24 24 27;
--sl-color-neutral-0: 24 24 27;
--sl-color-neutral-1000: 255 255 255;
/*
* Border radius tokens
@ -469,9 +469,9 @@ export default css`
--sl-input-height-medium: 2.5rem; /* 40px */
--sl-input-height-large: 3.125rem; /* 50px */
--sl-input-background-color: var(--sl-color-neutral-1000);
--sl-input-background-color-hover: var(--sl-color-neutral-1000);
--sl-input-background-color-focus: var(--sl-color-neutral-1000);
--sl-input-background-color: var(--sl-color-neutral-0);
--sl-input-background-color-hover: var(--sl-color-neutral-0);
--sl-input-background-color-focus: var(--sl-color-neutral-0);
--sl-input-background-color-disabled: var(--sl-color-neutral-100);
--sl-input-border-color: var(--sl-color-neutral-300);
--sl-input-border-color-hover: var(--sl-color-neutral-400);
@ -531,7 +531,7 @@ export default css`
* Panels
*/
--sl-panel-background-color: var(--sl-color-neutral-1000);
--sl-panel-background-color: var(--sl-color-neutral-0);
--sl-panel-border-color: var(--sl-color-neutral-200);
/*
@ -540,7 +540,7 @@ export default css`
--sl-tooltip-border-radius: var(--sl-border-radius-medium);
--sl-tooltip-background-color: var(--sl-color-neutral-800);
--sl-tooltip-color: var(--sl-color-neutral-1000);
--sl-tooltip-color: var(--sl-color-neutral-0);
--sl-tooltip-font-family: var(--sl-font-sans);
--sl-tooltip-font-weight: var(--sl-font-weight-normal);
--sl-tooltip-font-size: var(--sl-font-size-small);

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

@ -364,8 +364,8 @@ export default css`
--sl-color-neutral-950: var(--sl-color-gray-950);
/* Neutral one-offs */
--sl-color-neutral-0: 0 0 0;
--sl-color-neutral-1000: 255 255 255;
--sl-color-neutral-0: 255 255 255;
--sl-color-neutral-1000: 0 0 0;
/*
* Border radius tokens
@ -469,9 +469,9 @@ export default css`
--sl-input-height-medium: 2.5rem; /* 40px */
--sl-input-height-large: 3.125rem; /* 50px */
--sl-input-background-color: var(--sl-color-neutral-1000);
--sl-input-background-color-hover: var(--sl-color-neutral-1000);
--sl-input-background-color-focus: var(--sl-color-neutral-1000);
--sl-input-background-color: var(--sl-color-neutral-0);
--sl-input-background-color-hover: var(--sl-color-neutral-0);
--sl-input-background-color-focus: var(--sl-color-neutral-0);
--sl-input-background-color-disabled: var(--sl-color-neutral-100);
--sl-input-border-color: var(--sl-color-neutral-300);
--sl-input-border-color-hover: var(--sl-color-neutral-400);
@ -531,7 +531,7 @@ export default css`
* Panels
*/
--sl-panel-background-color: var(--sl-color-neutral-1000);
--sl-panel-background-color: var(--sl-color-neutral-0);
--sl-panel-border-color: var(--sl-color-neutral-200);
/*
@ -540,7 +540,7 @@ export default css`
--sl-tooltip-border-radius: var(--sl-border-radius-medium);
--sl-tooltip-background-color: var(--sl-color-neutral-800);
--sl-tooltip-color: var(--sl-color-neutral-1000);
--sl-tooltip-color: var(--sl-color-neutral-0);
--sl-tooltip-font-family: var(--sl-font-sans);
--sl-tooltip-font-weight: var(--sl-font-weight-normal);
--sl-tooltip-font-size: var(--sl-font-size-small);