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

remaining components

Browse Source
This commit is contained in:
Cory LaViska
2023-09-07 12:54:44 -04:00
parent 67d4458e69
commit 0229c315bb
18 changed files with 193 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/pages/components/carousel.md
View File

@@ -580,7 +580,7 @@ The content of the carousel can be changed by adding or removing carousel items.
display: flex;
align-items: center;
justify-content: center;
font-size: var(--sl-font-size-2x-large);
font-size: var(--wa-font-size-2xl);
}
</style>
@@ -643,7 +643,7 @@ const css = `
align-items: center;
justify-content: center;
color: white;
font-size: var(--sl-font-size-2x-large);
font-size: var(--wa-font-size-2xl);
}
`;

16
docs/pages/components/range.md
View File

@@ -112,8 +112,8 @@ You can customize the active and inactive portions of the track using the `--tra
```html:preview
<sl-range
style="
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
--track-color-active: var(--wa-color-brand-element-fill-vivid);
--track-color-inactive: var(--wa-color-brand-element-fill-muted);
"
></sl-range>
```
@@ -126,8 +126,8 @@ import SlRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => (
<SlRange
style={{
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)'
'--track-color-active': 'var(--wa-color-brand-element-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-element-fill-muted)'
}}
/>
);
@@ -144,8 +144,8 @@ You can customize the initial offset of the active track using the `--track-acti
min="-100"
max="100"
style="
--track-color-active: var(--sl-color-primary-600);
--track-color-inactive: var(--sl-color-primary-100);
--track-color-active: var(--wa-color-brand-element-fill-vivid);
--track-color-inactive: var(--wa-color-brand-element-fill-muted);
--track-active-offset: 50%;
"
></sl-range>
@@ -161,8 +161,8 @@ const App = () => (
min={-100}
max={100}
style={{
'--track-color-active': 'var(--sl-color-primary-600)',
'--track-color-inactive': 'var(--sl-color-primary-200)',
'--track-color-active': 'var(--wa-color-brand-element-fill-vivid)',
'--track-color-inactive': 'var(--wa-color-brand-element-fill-muted)',
'--track-active-offset': '50%'
}}
/>

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

@@ -8,7 +8,7 @@ meta:
## Focus Rings
Focus ring tokens control the appearance of focus rings. Note that form inputs use `--sl-input-focus-ring-*` tokens instead.
Focus ring tokens control the appearance of focus rings.
| Token | Value |
| ------------------------ | ---------------------------------------------------------- |

12
src/components/checkbox/checkbox.styles.ts
View File

@@ -42,7 +42,7 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: solid var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border-radius: 2px;
background-color: var(--wa-form-controls-background);
color: var(--wa-form-controls-color-text);
@@ -80,14 +80,6 @@ export default css`
background-color: var(--wa-color-brand-element-fill-vivid);
}
/* Checked/indeterminate + hover */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {
color: var(--wa-color-brand-text-on-vivid);
border-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
background-color: color-mix(in oklch, var(--wa-color-brand-element-fill-vivid), white 6%);
}
/* Checked/indeterminate + focus */
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
@@ -111,6 +103,6 @@ export default css`
:host([required]) .checkbox__label::after {
content: var(--wa-form-controls-required-content);
color: var(--wa-form-controls-required-content-color);
margin-inline-start: -0.2em;
margin-inline-start: var(--wa-form-controls-required-content-offset);
}
`;

9
src/components/input/input.styles.ts
View File

@@ -22,8 +22,7 @@ export default css`
vertical-align: middle;
overflow: hidden;
cursor: text;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
}
/* Standard inputs */
@@ -68,7 +67,7 @@ export default css`
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: var(----wa-form-controls-font-line-height);
line-height: var(--wa-form-controls-font-line-height);
color: var(--wa-form-controls-color-text);
border: none;
background: inherit;
@@ -230,7 +229,7 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--wa-form-controls-color-activated);
color: var(--wa-color-neutral-element-fill-vivid);
border: none;
background: none;
padding: 0;
@@ -240,7 +239,7 @@ export default css`
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklch, currentColor, black 12%);
color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 12%);
}
.input__clear:focus,

4
src/components/option/option.styles.ts
View File

@@ -28,13 +28,13 @@ export default css`
}
.option--hover:not(.option--current):not(.option--disabled) {
background-color: var(--wa-color-neutral-container-fill-muted);
background-color: var(--wa-color-neutral-element-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.option--current,
.option--current.option--disabled {
background-color: var(--wa-color-brand-container-fill-vivid);
background-color: var(--wa-color-brand-element-fill-vivid);
color: var(--wa-color-brand-text-on-vivid);
opacity: 1;
}

2
src/components/popup/popup.component.ts
View File

@@ -35,7 +35,7 @@ function isVirtualElement(e: unknown): e is VirtualElement {
*
* @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
* attribute is used.
* @cssproperty [--arrow-color=var(--sl-color-neutral-0)] - The color of the arrow.
* @cssproperty [--arrow-color=var(--wa-color-black)] - The color of the arrow.
* @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
* popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
* available when using `auto-size`.

4
src/components/radio-group/radio-group.styles.ts
View File

@@ -22,8 +22,8 @@ export default css`
}
.radio-group--required .radio-group__label::after {
content: var(--sl-input-required-content);
margin-inline-start: var(--sl-input-required-content-offset);
content: var(--wa-form-controls-required-content);
margin-inline-start: var(--wa-form-controls-required-content-offset);
}
.visually-hidden {

54
src/components/radio/radio.styles.ts
View File

@@ -9,33 +9,33 @@ export default css`
}
:host(:focus-visible) {
outline: 0px;
outline: none;
}
.radio {
display: inline-flex;
align-items: top;
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-label-color);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
color: var(--wa-form-controls-color-text);
vertical-align: middle;
cursor: pointer;
}
.radio--small {
--toggle-size: var(--sl-toggle-size-small);
font-size: var(--sl-input-font-size-small);
--toggle-size: var(--wa-form-control-toggle-size-s);
font-size: var(--wa-font-size-s);
}
.radio--medium {
--toggle-size: var(--sl-toggle-size-medium);
font-size: var(--sl-input-font-size-medium);
--toggle-size: var(--wa-form-control-toggle-size-m);
font-size: var(--wa-font-size-m);
}
.radio--large {
--toggle-size: var(--sl-toggle-size-large);
font-size: var(--sl-input-font-size-large);
--toggle-size: var(--wa-form-control-toggle-size-l);
font-size: var(--wa-font-size-l);
}
.radio__checked-icon {
@@ -52,12 +52,12 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-color-resting);
border-radius: 50%;
background-color: var(--sl-input-background-color);
background-color: var(--wa-form-controls-background);
color: transparent;
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}
.radio__input {
@@ -68,29 +68,17 @@ export default css`
pointer-events: none;
}
/* Hover */
.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
border-color: var(--sl-input-border-color-hover);
background-color: var(--sl-input-background-color-hover);
}
/* Checked */
.radio--checked .radio__control {
color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
background-color: var(--sl-color-primary-600);
}
/* Checked + hover */
.radio.radio--checked:not(.radio--disabled) .radio__control:hover {
border-color: var(--sl-color-primary-500);
background-color: var(--sl-color-primary-500);
color: var(--wa-color-brand-text-on-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
background-color: var(--wa-color-brand-element-fill-vivid);
}
/* Checked + focus */
:host(:focus-visible) .radio__control {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Disabled */
@@ -106,7 +94,7 @@ export default css`
.radio__label {
display: inline-block;
color: var(--sl-input-label-color);
color: var(--wa-form-controls-color-text);
line-height: var(--toggle-size);
margin-inline-start: 0.5em;
user-select: none;

77
src/components/range/range.styles.ts
View File

@@ -8,9 +8,9 @@ export default css`
:host {
--thumb-size: 20px;
--tooltip-offset: 10px;
--track-color-active: var(--sl-color-neutral-200);
--track-color-inactive: var(--sl-color-neutral-200);
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
--track-color-active: var(--wa-color-neutral-element-fill-muted);
--track-color-inactive: var(--wa-color-neutral-element-fill-muted);
--track-active-offset: 0%;
--track-height: 6px;
@@ -28,7 +28,7 @@ export default css`
width: 100%;
height: var(--track-height);
background: transparent;
line-height: var(--sl-input-height-medium);
line-height: var(--wa-form-controls-height-m);
vertical-align: middle;
margin: 0;
@@ -68,26 +68,20 @@ export default css`
width: var(--thumb-size);
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-600);
border: solid var(--sl-input-border-width) var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-color-brand-element-fill-vivid);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
cursor: pointer;
}
.range__control:enabled::-webkit-slider-thumb:hover {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
}
.range__control:enabled:focus-visible::-webkit-slider-thumb {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.range__control:enabled::-webkit-slider-thumb:active {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
cursor: grabbing;
}
@@ -115,26 +109,19 @@ export default css`
height: var(--thumb-size);
width: var(--thumb-size);
border-radius: 50%;
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
cursor: pointer;
}
.range__control:enabled::-moz-range-thumb:hover {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
}
.range__control:enabled:focus-visible::-moz-range-thumb {
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.range__control:enabled::-moz-range-thumb:active {
background-color: var(--sl-color-primary-500);
border-color: var(--sl-color-primary-500);
cursor: grabbing;
}
@@ -158,18 +145,18 @@ export default css`
/* Tooltip output */
.range__tooltip {
position: absolute;
z-index: var(--sl-z-index-tooltip);
z-index: var(--wa-z-index-tooltip);
left: 0;
border-radius: var(--sl-tooltip-border-radius);
background-color: var(--sl-tooltip-background-color);
font-family: var(--sl-tooltip-font-family);
font-size: var(--sl-tooltip-font-size);
font-weight: var(--sl-tooltip-font-weight);
line-height: var(--sl-tooltip-line-height);
color: var(--sl-tooltip-color);
border-radius: var(--wa-corners-1x);
background-color: var(--wa-color-neutral-element-fill-vivid);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-regular);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-vivid);
opacity: 0;
padding: var(--sl-tooltip-padding);
transition: var(--sl-transition-fast) opacity;
padding: var(--wa-space-2xs) var(--wa-space-xs);
transition: var(--wa-transition-fast) opacity;
pointer-events: none;
}
@@ -179,7 +166,7 @@ export default css`
width: 0;
height: 0;
left: 50%;
translate: calc(-1 * var(--sl-tooltip-arrow-size));
translate: calc(-1 * var(--wa-tooltip-arrow-size));
}
.range--tooltip-visible .range__tooltip {
@@ -192,9 +179,9 @@ export default css`
}
.range--tooltip-top .range__tooltip:after {
border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
border-left: var(--sl-tooltip-arrow-size) solid transparent;
border-right: var(--sl-tooltip-arrow-size) solid transparent;
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-element-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
top: 100%;
}
@@ -204,9 +191,9 @@ export default css`
}
.range--tooltip-bottom .range__tooltip:after {
border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);
border-left: var(--sl-tooltip-arrow-size) solid transparent;
border-right: var(--sl-tooltip-arrow-size) solid transparent;
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-element-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
bottom: 100%;
}

132
src/components/select/select.styles.ts
View File

@@ -40,14 +40,13 @@ export default css`
position: relative;
align-items: center;
justify-content: start;
font-family: var(--sl-input-font-family);
font-weight: var(--sl-input-font-weight);
letter-spacing: var(--sl-input-letter-spacing);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
vertical-align: middle;
overflow: hidden;
cursor: pointer;
transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow,
var(--sl-transition-fast) background-color;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border, var(--wa-transition-fast) box-shadow,
var(--wa-transition-fast) background-color;
}
.select__display-input {
@@ -56,7 +55,8 @@ export default css`
font: inherit;
border: none;
background: none;
color: var(--sl-input-color);
line-height: var(--wa-form-controls-font-line-height);
color: var(--wa-form-controls-color-text);
cursor: inherit;
overflow: hidden;
padding: 0;
@@ -64,10 +64,6 @@ export default css`
-webkit-appearance: none;
}
.select:not(.select--disabled):hover .select__display-input {
color: var(--sl-input-color-hover);
}
.select__display-input:focus {
outline: none;
}
@@ -100,7 +96,7 @@ export default css`
flex: 1;
align-items: center;
flex-wrap: wrap;
margin-inline-start: var(--sl-spacing-2x-small);
margin-inline-start: var(--wa-space-2xs);
}
.select__tags::slotted(sl-tag) {
@@ -114,14 +110,12 @@ export default css`
/* Standard selects */
.select--standard .select__combobox {
background-color: var(--sl-input-background-color);
border: solid var(--sl-input-border-width) var(--sl-input-border-color);
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-color-resting);
}
.select--standard.select--disabled .select__combobox {
background-color: var(--sl-input-background-color-disabled);
border-color: var(--sl-input-border-color-disabled);
color: var(--sl-input-color-disabled);
opacity: 0.5;
cursor: not-allowed;
outline: none;
@@ -129,49 +123,43 @@ export default css`
.select--standard:not(.select--disabled).select--open .select__combobox,
.select--standard:not(.select--disabled).select--focused .select__combobox {
background-color: var(--sl-input-background-color-focus);
border-color: var(--sl-input-border-color-focus);
box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Filled selects */
.select--filled .select__combobox {
border: none;
background-color: var(--sl-input-filled-background-color);
color: var(--sl-input-color);
}
.select--filled:hover:not(.select--disabled) .select__combobox {
background-color: var(--sl-input-filled-background-color-hover);
background-color: var(--wa-color-neutral-container-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.select--filled.select--disabled .select__combobox {
background-color: var(--sl-input-filled-background-color-disabled);
opacity: 0.5;
cursor: not-allowed;
}
.select--filled:not(.select--disabled).select--open .select__combobox,
.select--filled:not(.select--disabled).select--focused .select__combobox {
background-color: var(--sl-input-filled-background-color-focus);
outline: var(--sl-focus-ring);
background-color: var(--wa-color-neutral-container-fill-muted);
color: var(--wa-color-neutral-text-on-muted);
}
/* Sizes */
.select--small .select__combobox {
border-radius: var(--sl-input-border-radius-small);
font-size: var(--sl-input-font-size-small);
min-height: var(--sl-input-height-small);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-s);
min-height: var(--wa-form-controls-height-s);
padding-block: 0;
padding-inline: var(--sl-input-spacing-small);
padding-inline: var(--wa-space-s);
}
.select--small .select__clear {
margin-inline-start: var(--sl-input-spacing-small);
margin-inline-start: var(--wa-space-s);
}
.select--small .select__prefix::slotted(*) {
margin-inline-end: var(--sl-input-spacing-small);
margin-inline-end: var(--wa-space-s);
}
.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
@@ -184,19 +172,19 @@ export default css`
}
.select--medium .select__combobox {
border-radius: var(--sl-input-border-radius-medium);
font-size: var(--sl-input-font-size-medium);
min-height: var(--sl-input-height-medium);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-m);
min-height: var(--wa-form-controls-height-m);
padding-block: 0;
padding-inline: var(--sl-input-spacing-medium);
padding-inline: var(--wa-space-m);
}
.select--medium .select__clear {
margin-inline-start: var(--sl-input-spacing-medium);
margin-inline-start: var(--wa-space-m);
}
.select--medium .select__prefix::slotted(*) {
margin-inline-end: var(--sl-input-spacing-medium);
margin-inline-end: var(--wa-space-m);
}
.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
@@ -209,19 +197,19 @@ export default css`
}
.select--large .select__combobox {
border-radius: var(--sl-input-border-radius-large);
font-size: var(--sl-input-font-size-large);
min-height: var(--sl-input-height-large);
border-radius: var(--wa-corners-1x);
font-size: var(--wa-font-size-l);
min-height: var(--wa-form-controls-height-l);
padding-block: 0;
padding-inline: var(--sl-input-spacing-large);
padding-inline: var(--wa-space-l);
}
.select--large .select__clear {
margin-inline-start: var(--sl-input-spacing-large);
margin-inline-start: var(--wa-space-l);
}
.select--large .select__prefix::slotted(*) {
margin-inline-end: var(--sl-input-spacing-large);
margin-inline-end: var(--wa-space-l);
}
.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
@@ -235,15 +223,15 @@ export default css`
/* Pills */
.select--pill.select--small .select__combobox {
border-radius: var(--sl-input-height-small);
border-radius: var(--wa-form-controls-height-s);
}
.select--pill.select--medium .select__combobox {
border-radius: var(--sl-input-height-medium);
border-radius: var(--wa-form-controls-height-m);
}
.select--pill.select--large .select__combobox {
border-radius: var(--sl-input-height-large);
border-radius: var(--wa-form-controls-height-l);
}
/* Prefix */
@@ -251,7 +239,7 @@ export default css`
flex: 0;
display: inline-flex;
align-items: center;
color: var(--sl-input-placeholder-color);
color: var(--wa-form-controls-color-activated);
}
/* Clear button */
@@ -260,30 +248,30 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--sl-input-icon-color);
color: var(--wa-color-neutral-element-fill-vivid);
border: none;
background: none;
padding: 0;
transition: var(--sl-transition-fast) color;
transition: var(--wa-transition-fast) color;
cursor: pointer;
}
.select__clear:hover {
color: var(--sl-input-icon-color-hover);
}
.select__clear:focus {
outline: none;
}
.select__clear:active {
color: color-mix(in oklch, var(--wa-color-neutral-element-fill-vivid), black 12%);
}
/* Expand icon */
.select__expand-icon {
flex: 0 0 auto;
display: flex;
align-items: center;
transition: var(--sl-transition-medium) rotate ease;
transition: var(--wa-transition-normal) rotate ease;
rotate: 0;
margin-inline-start: var(--sl-spacing-small);
margin-inline-start: var(--wa-space-s);
}
.select--open .select__expand-icon {
@@ -294,14 +282,14 @@ export default css`
.select__listbox {
display: block;
position: relative;
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-medium);
font-weight: var(--sl-font-weight-normal);
box-shadow: var(--sl-shadow-large);
background: var(--sl-panel-background-color);
border: solid var(--sl-panel-border-width) var(--sl-panel-border-color);
border-radius: var(--sl-border-radius-medium);
padding-block: var(--sl-spacing-x-small);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
box-shadow: var(--wa-shadow-level-3);
background: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
padding-block: var(--wa-space-xs);
padding-inline: 0;
overflow: auto;
overscroll-behavior: none;
@@ -312,14 +300,14 @@ export default css`
}
.select__listbox ::slotted(sl-divider) {
--spacing: var(--sl-spacing-x-small);
--spacing: var(--wa-space-xs);
}
.select__listbox ::slotted(small) {
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
color: var(--sl-color-neutral-500);
padding-block: var(--sl-spacing-x-small);
padding-inline: var(--sl-spacing-x-large);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-medium);
color: var(--wa-color-text-quiet);
padding-block: var(--wa-space-xs);
padding-inline: var(--wa-space-xl);
}
`;

97
src/components/switch/switch.styles.ts
View File

@@ -9,37 +9,37 @@ export default css`
}
:host([size='small']) {
--height: var(--sl-toggle-size-small);
--thumb-size: calc(var(--sl-toggle-size-small) + 4px);
--height: var(--wa-form-control-toggle-size-s);
--thumb-size: calc(var(--wa-form-control-toggle-size-s) + 4px);
--width: calc(var(--height) * 2);
font-size: var(--sl-input-font-size-small);
font-size: var(--wa-font-size-s);
}
:host([size='medium']) {
--height: var(--sl-toggle-size-medium);
--thumb-size: calc(var(--sl-toggle-size-medium) + 4px);
--height: var(--wa-form-control-toggle-size-m);
--thumb-size: calc(var(--wa-form-control-toggle-size-m) + 4px);
--width: calc(var(--height) * 2);
font-size: var(--sl-input-font-size-medium);
font-size: var(--wa-font-size-m);
}
:host([size='large']) {
--height: var(--sl-toggle-size-large);
--thumb-size: calc(var(--sl-toggle-size-large) + 4px);
--height: var(--wa-form-control-toggle-size-l);
--thumb-size: calc(var(--wa-form-control-toggle-size-l) + 4px);
--width: calc(var(--height) * 2);
font-size: var(--sl-input-font-size-large);
font-size: var(--wa-font-size-l);
}
.switch {
position: relative;
display: inline-flex;
align-items: center;
font-family: var(--sl-input-font-family);
font-family: var(--wa-font-family-body);
font-weight: var(--wa-font-weight-normal);
font-size: inherit;
font-weight: var(--sl-input-font-weight);
color: var(--sl-input-label-color);
color: var(--wa-form-controls-color-text);
vertical-align: middle;
cursor: pointer;
}
@@ -52,21 +52,22 @@ export default css`
justify-content: center;
width: var(--width);
height: var(--height);
background-color: var(--sl-color-neutral-400);
border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
background-color: var(--wa-color-neutral-element-fill-vivid);
border: solid var(--wa-border-width-thin) var(--wa-color-neutral-container-fill-muted);
border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color;
}
.switch__control .switch__thumb {
width: var(--thumb-size);
height: var(--thumb-size);
background-color: var(--sl-color-neutral-0);
background-color: var(--wa-form-controls-background);
border-radius: 50%;
border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-color-neutral-element-outline-vivid);
translate: calc((var(--width) - var(--height)) / -2);
transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) background-color,
var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) border-color, var(--wa-transition-fast) box-shadow;
}
.switch__input {
@@ -77,66 +78,23 @@ export default css`
pointer-events: none;
}
/* Hover */
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {
background-color: var(--sl-color-neutral-400);
border-color: var(--sl-color-neutral-400);
}
.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-neutral-400);
}
/* Focus */
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
background-color: var(--sl-color-neutral-400);
border-color: var(--sl-color-neutral-400);
}
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Checked */
.switch--checked .switch__control {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
background-color: var(--wa-color-brand-element-fill-vivid);
border-color: var(--wa-color-brand-element-fill-vivid);
}
.switch--checked .switch__control .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
border-color: var(--wa-color-brand-element-outline-vivid);
translate: calc((var(--width) - var(--height)) / 2);
}
/* Checked + hover */
.switch.switch--checked:not(.switch--disabled) .switch__control:hover {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
}
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
}
/* Checked + focus */
.switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control {
background-color: var(--sl-color-primary-600);
border-color: var(--sl-color-primary-600);
}
.switch.switch--checked:not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
background-color: var(--sl-color-neutral-0);
border-color: var(--sl-color-primary-600);
outline: var(--sl-focus-ring);
outline-offset: var(--sl-focus-ring-offset);
}
/* Disabled */
.switch--disabled {
opacity: 0.5;
@@ -151,8 +109,9 @@ export default css`
}
:host([required]) .switch__label::after {
content: var(--sl-input-required-content);
margin-inline-start: var(--sl-input-required-content-offset);
content: var(--wa-form-controls-required-content);
color: var(--wa-form-controls-required-content-color);
margin-inline-start: var(--wa-form-controls-required-content-offset);
}
@media (forced-colors: active) {

18
src/components/tab-group/tab-group.styles.ts
View File

@@ -5,8 +5,8 @@ export default css`
${componentStyles}
:host {
--indicator-color: var(--sl-color-primary-600);
--track-color: var(--sl-color-neutral-200);
--indicator-color: var(--wa-color-brand-element-fill-vivid);
--track-color: var(--wa-color-neutral-element-fill-muted);
--track-width: 2px;
display: block;
@@ -24,12 +24,12 @@ export default css`
.tab-group__indicator {
position: absolute;
transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) width ease;
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) width ease;
}
.tab-group--has-scroll-controls .tab-group__nav-container {
position: relative;
padding: 0 var(--sl-spacing-x-large);
padding: 0 var(--wa-space-xl);
}
.tab-group__body {
@@ -44,7 +44,7 @@ export default css`
position: absolute;
top: 0;
bottom: 0;
width: var(--sl-spacing-x-large);
width: var(--wa-space-xl);
}
.tab-group__scroll-button--start {
@@ -108,7 +108,7 @@ export default css`
}
.tab-group--top ::slotted(sl-tab-panel) {
--padding: var(--sl-spacing-medium) 0;
--padding: var(--wa-space-m) 0;
}
/*
@@ -154,7 +154,7 @@ export default css`
}
.tab-group--bottom ::slotted(sl-tab-panel) {
--padding: var(--sl-spacing-medium) 0;
--padding: var(--wa-space-m) 0;
}
/*
@@ -191,7 +191,7 @@ export default css`
}
.tab-group--start ::slotted(sl-tab-panel) {
--padding: 0 var(--sl-spacing-medium);
--padding: 0 var(--wa-space-m);
}
/*
@@ -228,6 +228,6 @@ export default css`
}
.tab-group--end ::slotted(sl-tab-panel) {
--padding: 0 var(--sl-spacing-medium);
--padding: 0 var(--wa-space-m);
}
`;

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

@@ -11,12 +11,12 @@ export default css`
.tab {
display: inline-flex;
align-items: center;
font-family: var(--sl-font-sans);
font-size: var(--sl-font-size-small);
font-weight: var(--sl-font-weight-semibold);
border-radius: var(--sl-border-radius-medium);
color: var(--sl-color-neutral-600);
padding: var(--sl-spacing-medium) var(--sl-spacing-large);
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-s);
font-weight: var(--wa-font-weight-medium);
border-radius: var(--wa-corners-1x);
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-m) var(--wa-space-l);
white-space: nowrap;
user-select: none;
cursor: pointer;
@@ -24,28 +24,24 @@ export default css`
}
.tab:hover:not(.tab--disabled) {
color: var(--sl-color-primary-600);
color: var(--wa-color-neutral-text-on-surface);
}
.tab:focus {
outline: none;
}
.tab:focus-visible:not(.tab--disabled) {
color: var(--sl-color-primary-600);
}
.tab:focus-visible {
outline: var(--sl-focus-ring);
outline-offset: calc(-1 * var(--sl-focus-ring-width) - var(--sl-focus-ring-offset));
outline: var(--wa-focus-ring);
outline-offset: calc(-1 * var(--wa-border-width-thick) - var(--wa-focus-ring-offset));
}
.tab.tab--active:not(.tab--disabled) {
color: var(--sl-color-primary-600);
color: var(--wa-color-brand-text-on-surface);
}
.tab.tab--closable {
padding-inline-end: var(--sl-spacing-small);
padding-inline-end: var(--wa-space-s);
}
.tab.tab--disabled {
@@ -54,12 +50,12 @@ export default css`
}
.tab__close-button {
font-size: var(--sl-font-size-small);
margin-inline-start: var(--sl-spacing-small);
font-size: var(--wa-font-size-m);
margin-inline-start: var(--wa-space-s);
}
.tab__close-button::part(base) {
padding: var(--sl-spacing-3x-small);
padding: var(--wa-space-3xs);
}
@media (forced-colors: active) {

3
src/components/textarea/textarea.styles.ts
View File

@@ -20,8 +20,7 @@ export default css`
color: var(--wa-form-controls-color-text);
line-height: var(--wa-form-controls-font-line-height);
vertical-align: middle;
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
cursor: text;
}

4
src/components/tree/tree.component.ts
View File

@@ -62,8 +62,8 @@ function syncCheckboxes(changedTreeItem: SlTreeItem, initialSync = false) {
*
* @csspart base - The component's base wrapper.
*
* @cssproperty [--indent-size=var(--sl-spacing-medium)] - The size of the indentation for nested items.
* @cssproperty [--indent-guide-color=var(--sl-color-neutral-200)] - The color of the indentation line.
* @cssproperty [--indent-size=var(--wa-spacing-m)] - The size of the indentation for nested items.
* @cssproperty [--indent-guide-color=var(--wa-color-surface-outline)] - The color of the indentation line.
* @cssproperty [--indent-guide-offset=0] - The amount of vertical spacing to leave between the top and bottom of the
* indentation line's starting position.
* @cssproperty [--indent-guide-style=solid] - The style of the indentation line, e.g. solid, dotted, dashed.

2
src/styles/form-control.styles.ts
View File

@@ -30,7 +30,7 @@ export default css`
:host([required]) .form-control--has-label .form-control__label::after {
content: var(--wa-form-controls-required-content);
margin-inline-start: var(--wa-space-2xs);
margin-inline-start: var(--wa-form-controls-required-content-offset);
color: var(--wa-form-controls-required-content-color);
}

5
src/themes/default.css
View File

@@ -275,14 +275,15 @@
/**
* From 2.x
*/
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-height-s: 2rem;
--wa-form-controls-height-m: 2.75rem;
--wa-form-controls-height-l: 3.5rem;
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-required-content-offset: -0.1em;
--wa-overlay-color: hsl(240 3.8% 46.1% / 33%);