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

update t-shirt tokens

pull/526/head
Cory LaViska 2021-09-08 09:51:31 -04:00
rodzic 4193ee1980
commit 7b1f99b41a
16 zmienionych plików z 55 dodań i 52 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -339,7 +339,7 @@ strong {
}
.markdown-section h1 {
font-size: var(--sl-font-size-xx-large);
font-size: var(--sl-font-size-2x-large);
}
.markdown-section h2 {
@ -676,7 +676,7 @@ body[data-page^='/tokens/'] .table-wrapper td:first-child code {
.color-palette {
display: grid;
grid-template-columns: 200px repeat(11, 1fr);
gap: 1rem var(--sl-spacing-xx-small);
gap: 1rem var(--sl-spacing-2x-small);
margin: 2rem 0;
}

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

@ -57,7 +57,7 @@ Details are designed to function independently, but you can simulate a group or
<style>
.details-group-example sl-details:not(:last-of-type) {
margin-bottom: var(--sl-spacing-xx-small);
margin-bottom: var(--sl-spacing-2x-small);
}
</style>
```

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

@ -8,6 +8,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
A number of users had trouble counting characters that repeat, so this release improves design token pattern so "t-shirt sizes" are more accessible. For example, `--sl-font-size-xxx-large` has become `--sl-font-size-3x-large`. This change applies to all design tokens that use this scale.
- 🚨 BREAKING: all t-shirt size design tokens now use `2x`, `3x`, `4x` instead of `xx`, `xxx`, `xxxx`
- Added missing `--sl-focus-ring-*` tokens to dark theme
- Added a subtle elevation to default buttons to make them more easily identifiable
- Improved the documentation search with a custom plugin powered by [Lunr](https://lunrjs.com/)

10
docs/tokens/spacing.md
Wyświetl plik

@ -4,13 +4,13 @@ Spacing tokens are used to provide consistent spacing between components and con
| Token | Value | Example |
| ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------- |
| `--sl-spacing-xxx-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-small); height: var(--sl-spacing-xxx-small);"></div> |
| `--sl-spacing-xx-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-small); height: var(--sl-spacing-xx-small);"></div> |
| `--sl-spacing-3x-small` | 0.125rem (2px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-small); height: var(--sl-spacing-3x-small);"></div> |
| `--sl-spacing-2x-small` | 0.25rem (4px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-small); height: var(--sl-spacing-2x-small);"></div> |
| `--sl-spacing-x-small` | 0.5rem (8px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-small); height: var(--sl-spacing-x-small);"></div> |
| `--sl-spacing-small` | 0.75rem (12px) | <div class="spacing-demo" style="width: var(--sl-spacing-small); height: var(--sl-spacing-small);"></div> |
| `--sl-spacing-medium` | 1rem (16px) | <div class="spacing-demo" style="width: var(--sl-spacing-medium); height: var(--sl-spacing-medium);"></div> |
| `--sl-spacing-large` | 1.25rem (20px) | <div class="spacing-demo" style="width: var(--sl-spacing-large); height: var(--sl-spacing-large);"></div> |
| `--sl-spacing-x-large` | 1.75rem (28px) | <div class="spacing-demo" style="width: var(--sl-spacing-x-large); height: var(--sl-spacing-x-large);"></div> |
| `--sl-spacing-xx-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-xx-large); height: var(--sl-spacing-xx-large);"></div> |
| `--sl-spacing-xxx-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxx-large); height: var(--sl-spacing-xxx-large);"></div> |
| `--sl-spacing-xxxx-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-xxxx-large); height: var(--sl-spacing-xxxx-large);"></div> |
| `--sl-spacing-2x-large` | 2.25rem (36px) | <div class="spacing-demo" style="width: var(--sl-spacing-2x-large); height: var(--sl-spacing-2x-large);"></div> |
| `--sl-spacing-3x-large` | 3rem (48px) | <div class="spacing-demo" style="width: var(--sl-spacing-3x-large); height: var(--sl-spacing-3x-large);"></div> |
| `--sl-spacing-4x-large` | 4.5rem (72px) | <div class="spacing-demo" style="width: var(--sl-spacing-4x-large); height: var(--sl-spacing-4x-large);"></div> |

8
docs/tokens/typography.md
Wyświetl plik

@ -18,15 +18,15 @@ Font sizes use `rem` units so they scale with the base font size. The pixel valu
| Token | Value | Example |
| --------------------------- | --------------- | ----------------------------------------------------------------- |
| `--sl-font-size-xx-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-xx-small)">Aa</span> |
| `--sl-font-size-2x-small` | 0.625rem (10px) | <span style="font-size: var(--sl-font-size-2x-small)">Aa</span> |
| `--sl-font-size-x-small` | 0.75rem (12px) | <span style="font-size: var(--sl-font-size-x-small)">Aa</span> |
| `--sl-font-size-small` | 0.875rem (14px) | <span style="font-size: var(--sl-font-size-small)">Aa</span> |
| `--sl-font-size-medium` | 1rem (16px) | <span style="font-size: var(--sl-font-size-medium)">Aa</span> |
| `--sl-font-size-large` | 1.25rem (20px) | <span style="font-size: var(--sl-font-size-large)">Aa</span> |
| `--sl-font-size-x-large` | 1.5rem (24px) | <span style="font-size: var(--sl-font-size-x-large)">Aa</span> |
| `--sl-font-size-xx-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-xx-large)">Aa</span> |
| `--sl-font-size-xxx-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-xxx-large)">Aa</span> |
| `--sl-font-size-xxxx-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-xxxx-large)">Aa</span> |
| `--sl-font-size-2x-large` | 2.25rem (36px) | <span style="font-size: var(--sl-font-size-2x-large)">Aa</span> |
| `--sl-font-size-3x-large` | 3rem (48px) | <span style="font-size: var(--sl-font-size-3x-large)">Aa</span> |
| `--sl-font-size-4x-large` | 4.5rem (72px) | <span style="font-size: var(--sl-font-size-4x-large)">Aa</span> |
## Font Weight

4
src/components/dialog/dialog.styles.ts
Wyświetl plik

@ -30,8 +30,8 @@ export default css`
flex-direction: column;
z-index: 2;
width: var(--width);
max-width: calc(100% - var(--sl-spacing-xx-large));
max-height: calc(100% - var(--sl-spacing-xx-large));
max-width: calc(100% - var(--sl-spacing-2x-large));
max-height: calc(100% - var(--sl-spacing-2x-large));
background-color: rgb(var(--sl-panel-background-color));
border-radius: var(--sl-border-radius-medium);
box-shadow: var(--sl-shadow-x-large);

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

@ -20,7 +20,7 @@ export default css`
letter-spacing: var(--sl-letter-spacing-normal);
text-align: left;
color: rgb(var(--sl-color-neutral-700));
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
transition: var(--sl-transition-fast) fill;
user-select: none;
white-space: nowrap;

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

@ -15,7 +15,7 @@ export default css`
line-height: var(--sl-line-height-normal);
letter-spacing: var(--sl-letter-spacing-normal);
color: rgb(var(--sl-color-neutral-500));
padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);
padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-large);
user-select: none;
}
`;

4
src/components/radio-group/radio-group.styles.ts
Wyświetl plik

@ -20,12 +20,12 @@ export default css`
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: rgb(var(--sl-input-color));
padding: 0 var(--sl-spacing-xx-small);
padding: 0 var(--sl-spacing-2x-small);
}
::slotted(sl-radio:not(:last-of-type)) {
display: block;
margin-bottom: var(--sl-spacing-xx-small);
margin-bottom: var(--sl-spacing-2x-small);
}
.radio-group:not(.radio-group--has-fieldset) {

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

@ -9,7 +9,7 @@ export default css`
--symbol-color: rgb(var(--sl-color-neutral-300));
--symbol-color-active: rgb(var(--sl-color-amber-500));
--symbol-size: 1.2rem;
--symbol-spacing: var(--sl-spacing-xxx-small);
--symbol-spacing: var(--sl-spacing-3x-small);
display: inline-flex;
}

8
src/components/select/select.styles.ts
Wyświetl plik

@ -120,7 +120,7 @@ export default css`
align-items: center;
flex-wrap: wrap;
justify-content: left;
margin-left: var(--sl-spacing-xx-small);
margin-left: var(--sl-spacing-2x-small);
}
/* Hidden input (for form control validation to show) */
@ -176,7 +176,7 @@ export default css`
}
.select--small .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-xx-small);
margin-right: var(--sl-spacing-2x-small);
}
.select--small.select--has-tags .select__label {
@ -219,7 +219,7 @@ export default css`
}
.select--medium .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-xx-small);
margin-right: var(--sl-spacing-2x-small);
}
.select--medium.select--has-tags .select__label {
@ -261,7 +261,7 @@ export default css`
}
.select--large .select__tags sl-tag:not(:last-of-type) {
margin-right: var(--sl-spacing-xx-small);
margin-right: var(--sl-spacing-2x-small);
}
.select--large.select--has-tags .select__label {

4
src/components/tab/tab.styles.ts
Wyświetl plik

@ -52,10 +52,10 @@ export default css`
.tab__close-button {
font-size: var(--sl-font-size-large);
margin-left: var(--sl-spacing-xx-small);
margin-left: var(--sl-spacing-2x-small);
}
.tab__close-button::part(base) {
padding: var(--sl-spacing-xxx-small);
padding: var(--sl-spacing-3x-small);
}
`;

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

@ -70,8 +70,8 @@ export default css`
}
.tag--small .tag__clear {
margin-left: var(--sl-spacing-xx-small);
margin-right: calc(-1 * var(--sl-spacing-xxx-small));
margin-left: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-3x-small));
}
.tag--medium {
@ -83,8 +83,8 @@ export default css`
}
.tag__clear {
margin-left: var(--sl-spacing-xx-small);
margin-right: calc(-1 * var(--sl-spacing-xx-small));
margin-left: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-2x-small));
}
.tag--large {
@ -96,7 +96,7 @@ export default css`
}
.tag__clear {
margin-left: var(--sl-spacing-xx-small);
margin-left: var(--sl-spacing-2x-small);
margin-right: calc(-1 * var(--sl-spacing-x-small));
}

4
src/styles/form-control.styles.ts
Wyświetl plik

@ -13,7 +13,7 @@ export default css`
.form-control--has-label .form-control__label {
display: inline-block;
color: var(--sl-input-label-color);
margin-bottom: var(--sl-spacing-xxx-small);
margin-bottom: var(--sl-spacing-3x-small);
}
.form-control--has-label.form-control--small .form-control__label {
@ -35,7 +35,7 @@ export default css`
}
.form-control--has-help-text .form-control__help-text ::slotted(*) {
margin-top: var(--sl-spacing-xxx-small);
margin-top: var(--sl-spacing-3x-small);
}
.form-control--has-help-text.form-control--small .form-control__help-text {

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

@ -393,16 +393,16 @@ export default css`
* Spacing tokens
*/
--sl-spacing-xxx-small: 0.125rem; /* 2px */
--sl-spacing-xx-small: 0.25rem; /* 4px */
--sl-spacing-3x-small: 0.125rem; /* 2px */
--sl-spacing-2x-small: 0.25rem; /* 4px */
--sl-spacing-x-small: 0.5rem; /* 8px */
--sl-spacing-small: 0.75rem; /* 12px */
--sl-spacing-medium: 1rem; /* 16px */
--sl-spacing-large: 1.25rem; /* 20px */
--sl-spacing-x-large: 1.75rem; /* 28px */
--sl-spacing-xx-large: 2.25rem; /* 36px */
--sl-spacing-xxx-large: 3rem; /* 48px */
--sl-spacing-xxxx-large: 4.5rem; /* 72px */
--sl-spacing-2x-large: 2.25rem; /* 36px */
--sl-spacing-3x-large: 3rem; /* 48px */
--sl-spacing-4x-large: 4.5rem; /* 72px */
/*
* Transition tokens
@ -425,15 +425,15 @@ export default css`
--sl-font-serif: Georgia, 'Times New Roman', serif;
/* Font sizes */
--sl-font-size-xx-small: 0.625rem; /* 10px */
--sl-font-size-2x-small: 0.625rem; /* 10px */
--sl-font-size-x-small: 0.75rem; /* 12px */
--sl-font-size-small: 0.875rem; /* 14px */
--sl-font-size-medium: 1rem; /* 16px */
--sl-font-size-large: 1.25rem; /* 20px */
--sl-font-size-x-large: 1.5rem; /* 24px */
--sl-font-size-xx-large: 2.25rem; /* 36px */
--sl-font-size-xxx-large: 3rem; /* 48px */
--sl-font-size-xxxx-large: 4.5rem; /* 72px */
--sl-font-size-2x-large: 2.25rem; /* 36px */
--sl-font-size-3x-large: 3rem; /* 48px */
--sl-font-size-4x-large: 4.5rem; /* 72px */
/* Font weights */
--sl-font-weight-light: 300;
@ -551,7 +551,7 @@ export default css`
--sl-tooltip-font-weight: var(--sl-font-weight-normal);
--sl-tooltip-font-size: var(--sl-font-size-small);
--sl-tooltip-line-height: var(--sl-line-height-dense);
--sl-tooltip-padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-small);
--sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
--sl-tooltip-arrow-size: 5px;
--sl-tooltip-arrow-start-end-offset: 8px;

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

@ -393,16 +393,16 @@ export default css`
* Spacing tokens
*/
--sl-spacing-xxx-small: 0.125rem; /* 2px */
--sl-spacing-xx-small: 0.25rem; /* 4px */
--sl-spacing-3x-small: 0.125rem; /* 2px */
--sl-spacing-2x-small: 0.25rem; /* 4px */
--sl-spacing-x-small: 0.5rem; /* 8px */
--sl-spacing-small: 0.75rem; /* 12px */
--sl-spacing-medium: 1rem; /* 16px */
--sl-spacing-large: 1.25rem; /* 20px */
--sl-spacing-x-large: 1.75rem; /* 28px */
--sl-spacing-xx-large: 2.25rem; /* 36px */
--sl-spacing-xxx-large: 3rem; /* 48px */
--sl-spacing-xxxx-large: 4.5rem; /* 72px */
--sl-spacing-2x-large: 2.25rem; /* 36px */
--sl-spacing-3x-large: 3rem; /* 48px */
--sl-spacing-4x-large: 4.5rem; /* 72px */
/*
* Transition tokens
@ -425,15 +425,15 @@ export default css`
--sl-font-serif: Georgia, 'Times New Roman', serif;
/* Font sizes */
--sl-font-size-xx-small: 0.625rem; /* 10px */
--sl-font-size-2x-small: 0.625rem; /* 10px */
--sl-font-size-x-small: 0.75rem; /* 12px */
--sl-font-size-small: 0.875rem; /* 14px */
--sl-font-size-medium: 1rem; /* 16px */
--sl-font-size-large: 1.25rem; /* 20px */
--sl-font-size-x-large: 1.5rem; /* 24px */
--sl-font-size-xx-large: 2.25rem; /* 36px */
--sl-font-size-xxx-large: 3rem; /* 48px */
--sl-font-size-xxxx-large: 4.5rem; /* 72px */
--sl-font-size-2x-large: 2.25rem; /* 36px */
--sl-font-size-3x-large: 3rem; /* 48px */
--sl-font-size-4x-large: 4.5rem; /* 72px */
/* Font weights */
--sl-font-weight-light: 300;
@ -551,7 +551,7 @@ export default css`
--sl-tooltip-font-weight: var(--sl-font-weight-normal);
--sl-tooltip-font-size: var(--sl-font-size-small);
--sl-tooltip-line-height: var(--sl-line-height-dense);
--sl-tooltip-padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-small);
--sl-tooltip-padding: var(--sl-spacing-2x-small) var(--sl-spacing-x-small);
--sl-tooltip-arrow-size: 5px;
--sl-tooltip-arrow-start-end-offset: 8px;