js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

rename border tokens with s/m/l convention

Browse Source
This commit is contained in:
lindsaym-fa
2024-01-16 13:50:30 -06:00
parent b892f1f86a
commit 7c6f018c5b
22 changed files with 73 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/assets/styles/code-previews.css
View File

@@ -8,7 +8,7 @@
.code-preview__preview {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-top-left-radius: var(--wa-corners-s);
border-top-right-radius: var(--wa-corners-s);
@@ -42,7 +42,7 @@
font-size: var(--wa-font-size-xs);
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-top-right-radius: var(--wa-corners-s);
cursor: ew-resize;
}
@@ -58,7 +58,7 @@
}
.code-preview__source {
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-radius: 0 !important;
display: none;
@@ -74,7 +74,7 @@
.code-preview__buttons {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
display: flex;
@@ -97,7 +97,7 @@
}
.code-preview__button:not(:last-of-type) {
border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.code-preview__button--html,
@@ -129,7 +129,7 @@
.code-preview__button:hover,
.code-preview__button:active {
box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-border-subtle);
box-shadow: 0 0 0 var(--wa-border-width-s) var(--wa-color-brand-border-subtle);
border-right-color: transparent;
background-color: var(--wa-color-brand-fill-subtle);
color: var(--wa-color-brand-text-on-surface);

10
docs/assets/styles/docs.css
View File

@@ -343,7 +343,7 @@ pre:hover .copy-code-button,
z-index: 20;
width: var(--docs-sidebar-width);
background-color: var(--docs-background-color);
border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: 0;
padding: 2rem;
margin: 0;
@@ -392,7 +392,7 @@ pre:hover .copy-code-button,
#sidebar nav h2 {
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-medium);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
}
@@ -517,7 +517,7 @@ main {
max-height: calc(100vh - 6rem);
font-size: var(--wa-font-size-s);
line-height: 1.33;
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
list-style: none;
padding: 1rem 0;
margin: 0;
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
details,
pre {
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
details summary {
@@ -706,7 +706,7 @@ html.sidebar-open #menu-toggle {
}
.code-preview__source-group {
border-bottom: solid 1px var(--wa-border-width-thin);
border-bottom: solid 1px var(--wa-border-width-s);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
}

2
docs/assets/styles/search.css
View File

@@ -6,7 +6,7 @@
--docs-search-box-color: var(--wa-form-controls-placeholder-color);
--docs-search-dialog-background: var(--wa-color-surface-raised);
--docs-search-border-width: var(--wa-border-width-thin);
--docs-search-border-width: var(--wa-border-width-s);
--docs-search-border-color: var(--wa-color-surface-border);
--docs-search-text-color: var(--wa-color-text-normal);
--docs-search-text-color-muted: var(--wa-color-text-quiet);

2
docs/pages/experimental/themer.md
View File

@@ -852,7 +852,7 @@ toc: false
top: 2rem;
left: 2rem;
background: var(--wa-color-surface-default);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-m);
box-shadow: var(--wa-shadow-level-2);
width: var(--knobs-width);

12
docs/pages/tokens/borders.md
View File

@@ -8,12 +8,12 @@ meta:
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| `--wa-border-style` | `solid` | |
| `--wa-border-width-thin` | `0.0625rem` (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div> |
| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
| `--wa-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div> |
| Token | Value | Example |
| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
| `--wa-border-style` | `solid` | |
| `--wa-border-width-s` | `0.0625rem` (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-s);"></div> |
| `--wa-border-width-m` | `calc(var(--wa-border-width-s) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-m);"></div> |
| `--wa-border-width-l` | `calc(var(--wa-border-width-s) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-l);"></div> |
## Corners

10
docs/pages/tokens/more.md
View File

@@ -10,10 +10,10 @@ meta:
Focus ring tokens control the appearance of focus rings.
| Token | Value |
| ------------------------ | ---------------------------------------------------------- |
| `--wa-focus-ring` | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
| Token | Value |
| ------------------------ | ------------------------------------------------------ |
| `--wa-focus-ring` | `solid var(--wa-border-width-l) var(--wa-color-focus)` |
| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
## Form Controls
@@ -23,7 +23,7 @@ Form control tokens control the appearance of form controls such as [input](/com
| -------------------------------------- | ------------------------------------------ |
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
| `--wa-form-controls-border-style` | `var(--wa-border-style)` |
| `--wa-form-controls-border-width` | `var(--wa-border-width-thin)` |
| `--wa-form-controls-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-controls-corners` | `var(--wa-corners-s)` |
| `--wa-form-controls-resting-color` | `var(--wa-color-neutral-border-highlight)` |
| `--wa-form-controls-activated-color` | `var(--wa-color-brand-action-vivid)` |

2
src/components/button/button.styles.ts
View File

@@ -446,7 +446,7 @@ export default css`
/* All except the first */
:host(.wa-button-group__button:not(.wa-button-group__button--first)) {
margin-inline-start: calc(-1 * var(--wa-border-width-thin));
margin-inline-start: calc(-1 * var(--wa-border-width-s));
}
/* Add a visual separator between solid buttons */

4
src/components/color-picker/color-picker.styles.ts
View File

@@ -26,7 +26,7 @@ export default css`
}
.color-picker--inline {
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-form-controls-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.color-picker--inline:focus-visible {
@@ -273,7 +273,7 @@ export default css`
.color-dropdown::part(panel) {
max-height: none;
background-color: var(--wa-color-surface-raised);
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
overflow: visible;
}

2
src/components/divider/divider.styles.ts
View File

@@ -6,7 +6,7 @@ export default css`
:host {
--color: var(--wa-color-surface-border);
--width: var(--wa-border-width-thin);
--width: var(--wa-border-width-s);
--spacing: var(--wa-space-m);
}

2
src/components/menu/menu.styles.ts
View File

@@ -8,7 +8,7 @@ export default css`
display: block;
position: relative;
background-color: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-xs) 0;
overflow: auto;

2
src/components/tab/tab.styles.ts
View File

@@ -35,7 +35,7 @@ export default css`
.tab:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: calc(-1 * var(--wa-border-width-thick) - var(--wa-focus-ring-offset));
outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
}
.tab.tab--active:not(.tab--disabled) {

2
src/components/tag/tag.styles.ts
View File

@@ -11,7 +11,7 @@ export default css`
.tag {
display: flex;
align-items: center;
border: solid var(--wa-border-width-thin);
border: solid var(--wa-border-width-s);
line-height: 1;
white-space: nowrap;
user-select: none;

8
src/themes/applied.css
View File

@@ -113,7 +113,7 @@ h6 {
hr {
border: none;
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-flow-spacing) 0;
}
@@ -316,7 +316,7 @@ details[open] > summary::before {
}
details + details {
margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-thin));
margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
}
/* Tables */
@@ -331,7 +331,7 @@ caption {
}
tbody tr {
border-top: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
tbody tr:nth-child(2n + 1) {
@@ -455,7 +455,7 @@ textarea {
details,
pre {
background: none;
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
summary {

10
src/themes/chic.css
View File

@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

10
src/themes/classic.css
View File

@@ -247,15 +247,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

3
src/themes/classic_components.css
View File

@@ -1,8 +1,7 @@
/* #region Alerts */
wa-alert {
--background: var(--wa-color-surface-default);
--border-width: var(--wa-border-width-thick) var(--wa-border-width-thin) var(--wa-border-width-thin)
var(--wa-border-width-thin);
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--content-color: var(--wa-color-text-normal);
--padding: var(--wa-space-l);

10
src/themes/default.css
View File

@@ -245,15 +245,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

10
src/themes/fa.css
View File

@@ -242,15 +242,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

4
src/themes/forms.css
View File

@@ -4,7 +4,7 @@
--wa-form-controls-value-color: var(--wa-color-danger-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-danger-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-danger-text-on-fill);
@@ -16,7 +16,7 @@
--wa-form-controls-value-color: var(--wa-color-success-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-success-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-success-text-on-fill);

10
src/themes/glassy.css
View File

@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: hidden;
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

10
src/themes/mellow.css
View File

@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners

10
src/themes/playful.css
View File

@@ -244,15 +244,15 @@
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners