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

use background-color for custom properties

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-11 23:27:03 -04:00
parent 0c297196ad
commit 65718a9728
36 changed files with 113 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-neutral-fill-normal);
--background-color: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--size: 3rem;
@@ -16,7 +16,7 @@ export default css`
position: relative;
width: var(--size);
height: var(--size);
background: var(--background);
background-color: var(--background-color);
font: inherit;
font-size: calc(var(--size) * 0.4);
color: var(--content-color);

2
src/components/avatar/avatar.ts
View File

@@ -23,7 +23,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart initials - The container that wraps the avatar's initials.
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
*
* @cssproperty --background - The avatar's background styles.
* @cssproperty --background-color - The avatar's background color.
* @cssproperty --content-color - The color of the avatar's content.
* @cssproperty --size - The size of the avatar.
*/

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

@@ -42,7 +42,7 @@ export default css`
font-size: max(12px, 0.75em);
font-weight: var(--wa-font-weight-semibold);
line-height: 1;
background: var(--background-color);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

2
src/components/badge/badge.ts
View File

@@ -16,7 +16,7 @@ import type { CSSResultGroup } from 'lit';
*
* @csspart base - The component's base wrapper.
*
* @cssproperty --background - The badge's background styles.
* @cssproperty --background-color - The badge's background color.
* @cssproperty --border-color - The color of the badge's border.
* @cssproperty --border-radius - The radius of the badge's corners.
* @cssproperty --border-style - The style of the badge's border.

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

@@ -18,33 +18,33 @@ export default css`
*/
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-loud);
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background: var(--wa-color-success-fill-loud);
--background-color: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-fill-loud);
--background-color: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-fill-loud);
--background-color: var(--wa-color-neutral-fill-loud);
--label-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-fill-loud);
--background-color: var(--wa-color-danger-fill-loud);
--label-color: var(--wa-color-danger-on-loud);
}
:host(:not([variant='text'])) {
--background-hover: color-mix(in oklab, var(--background), var(--wa-color-mix-hover));
--background-active: color-mix(in oklab, var(--background), var(--wa-color-mix-active));
--background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover));
--background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active));
--border-color: initial;
--border-color-hover: initial;
--border-color-active: initial;
@@ -57,40 +57,40 @@ export default css`
*/
:host([variant='brand'][outline]) {
--background-hover: var(--wa-color-brand-fill-quiet);
--background-color-hover: var(--wa-color-brand-fill-quiet);
--label-color: var(--wa-color-brand-on-quiet);
--label-color-hover: var(--wa-color-brand-on-normal);
}
:host([variant='success'][outline]) {
--background-hover: var(--wa-color-success-fill-quiet);
--background-color-hover: var(--wa-color-success-fill-quiet);
--label-color: var(--wa-color-success-on-quiet);
--label-color-hover: var(--wa-color-success-on-normal);
}
:host([variant='neutral'][outline]),
:host(.wa-button-group__button--radio:not([checked])) {
--background-hover: var(--wa-color-neutral-fill-quiet);
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-quiet);
--label-color-hover: var(--wa-color-neutral-on-normal);
}
:host([variant='warning'][outline]) {
--background-hover: var(--wa-color-warning-fill-quiet);
--background-color-hover: var(--wa-color-warning-fill-quiet);
--label-color: var(--wa-color-warning-on-quiet);
--label-color-hover: var(--wa-color-warning-on-normal);
}
:host([variant='danger'][outline]) {
--background-hover: var(--wa-color-danger-fill-quiet);
--background-color-hover: var(--wa-color-danger-fill-quiet);
--label-color: var(--wa-color-danger-on-quiet);
--label-color-hover: var(--wa-color-danger-on-normal);
}
:host([outline]),
:host(.wa-button-group__button--radio:not([checked])) {
--background: transparent;
--background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%);
--border-color: color-mix(in oklab, var(--label-color), var(--wa-color-surface-default) 30%);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
@@ -102,9 +102,9 @@ export default css`
*/
:host([variant='text']) {
--background: none;
--background-active: none;
--background-hover: none;
--background-color: none;
--background-color-active: none;
--background-color-hover: none;
--border-color: transparent;
--border-color-active: transparent;
--border-color-hover: transparent;
@@ -118,9 +118,9 @@ export default css`
*/
:host([checked]) {
--background: var(--wa-color-brand-fill-quiet);
--background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
--background-hover: var(--background);
--background-color: var(--wa-color-brand-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%);
--background-color-hover: var(--background-color);
--border-color: var(--wa-form-control-activated-color);
--border-color-active: var(--border-color);
--border-color-hover: var(--border-color);
@@ -152,8 +152,8 @@ export default css`
*/
.button {
background: var(--background);
border-color: var(--border-color, var(--background));
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: max(1px, var(--border-width));
@@ -213,14 +213,14 @@ export default css`
}
.button:hover:not(.button--disabled, .button--loading) {
background: var(--background-hover, var(--background, none));
border-color: var(--border-color-hover, var(--border-color, var(--background-hover)));
background-color: var(--background-color-hover, var(--background-color, none));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--label-color-hover, var(--label-color));
}
.button:active:not(.button--disabled, .button--loading) {
background: var(--background-active, var(--background, none));
border-color: var(--border-color-active, var(--border-color, var(--background-active)));
background-color: var(--background-color-active, var(--background-color, none));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--label-color-active, var(--label-color));
}

6
src/components/button/button.ts
View File

@@ -39,9 +39,9 @@ import type { CSSResultGroup } from 'lit';
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
* @csspart spinner - The spinner that shows when the button is in the loading state.
*
* @cssproperty --background - The button's background styles.
* @cssproperty --background-active - The color of the button's background when active.
* @cssproperty --background-hover - The color of the button's background on hover.
* @cssproperty --background-color - The button's background color.
* @cssproperty --background-color-active - The button's background color when active.
* @cssproperty --background-color-hover - The button's background color on hover.
* @cssproperty --border-color - The color of the button's border.
* @cssproperty --border-color-active - The color of the button's border when active.
* @cssproperty --border-color-hover - The color of the button's border on hover.

12
src/components/callout/callout.style.ts
View File

@@ -16,31 +16,31 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-quiet);
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-quiet);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background: var(--wa-color-success-fill-quiet);
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-quiet);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-fill-quiet);
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-quiet);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-fill-quiet);
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-quiet);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-fill-quiet);
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
@@ -49,7 +49,7 @@ export default css`
position: relative;
display: flex;
align-items: stretch;
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

4
src/components/callout/callout.ts
View File

@@ -19,9 +19,9 @@ import type { CSSResultGroup } from 'lit';
* @csspart icon - The container that wraps the optional icon.
* @csspart message - The container that wraps the callout's main content.
*
* @cssproperty --background - The callout's background styles.
* @cssproperty --background-color - The callout's background color.
* @cssproperty --border-color - The color of the callout's border.
* @cssproperty --border-radius - The border radius of the callout's corners.
* @cssproperty --border-radius - The radius of the callout's corners.
* @cssproperty --border-style - The style of the callout's borders.
* @cssproperty --border-width - The width of the callout's borders.
* @cssproperty --content-color - The color of the callout's content.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-surface-default);
--background-color: var(--wa-color-surface-default);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-panel-border-radius);
--border-style: var(--wa-panel-border-style);
@@ -16,7 +16,7 @@ export default css`
.card {
display: flex;
flex-direction: column;
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

4
src/components/card/card.ts
View File

@@ -23,9 +23,9 @@ import type { CSSResultGroup } from 'lit';
* @csspart body - The container that wraps the card's main content.
* @csspart footer - The container that wraps the card's footer.
*
* @cssproperty --background - The card's background styles.
* @cssproperty --background-color - The card's background color.
* @cssproperty --border-color - The card's border color, including borders that occur inside the card.
* @cssproperty --border-radius - The border radius for the card's corners. Expects a single value.
* @cssproperty --border-radius - The radius for the card's corners. Expects a single value.
* @cssproperty --border-style - The style of the card's borders.
* @cssproperty --border-width - The width of the card's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the card.

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-checked: var(--wa-form-control-activated-color);
--background-color: var(--wa-form-control-background);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-radius: min(
@@ -52,7 +52,7 @@ export default css`
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
background: var(--background);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
transition:
@@ -88,7 +88,7 @@ export default css`
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-on-loud);
border-color: var(--border-color-checked);
background: var(--background-checked);
background-color: var(--background-color-checked);
}
/* Checked/indeterminate + focus */

6
src/components/checkbox/checkbox.ts
View File

@@ -43,11 +43,11 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
* @csspart label - The container that wraps the checkbox's label.
* @csspart form-control-help-text - The help text's wrapper.
*
* @cssproperty --background - The checkbox's background styles.
* @cssproperty --background-checked - The checkbox's background styles when checked.
* @cssproperty --background-color - The checkbox's background color.
* @cssproperty --background-color-checked - The checkbox's background color when checked.
* @cssproperty --border-color - The color of the checkbox's borders.
* @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
* @cssproperty --border-radius - The border radius of the checkbox's corners.
* @cssproperty --border-radius - The radius of the checkbox's corners.
* @cssproperty --border-style - The style of the checkbox's borders.
* @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-surface-raised);
--background-color: var(--wa-color-surface-raised);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
@@ -23,7 +23,7 @@ export default css`
}
.color-picker {
background: var(--background);
background-color: var(--background-color);
border-radius: var(--border-radius);
color: var(--color);
font: inherit;
@@ -279,7 +279,7 @@ export default css`
.color-dropdown::part(panel) {
max-height: none;
background: var(--background);
background-color: var(--background-color);
border: var(--border-style) var(--border-width) var(--border-color);
border-radius: var(--border-radius);
overflow: visible;

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

@@ -86,9 +86,9 @@ declare const EyeDropper: EyeDropperConstructor;
* @csspart format-button__suffix - The format button's exported `suffix` part.
* @csspart format-button__caret - The format button's exported `caret` part.
*
* @cssproperty --background - The color picker's background styles.
* @cssproperty --background-color - The color picker's background color.
* @cssproperty --border-color - The color of the color picker's borders.
* @cssproperty --border-radius - The corners of the color picker.
* @cssproperty --border-radius - The radius of the color picker's corners.
* @cssproperty --border-style - The style of the color picker's borders.
* @cssproperty --border-width - The width of the color picker's borders.
* @cssproperty --grid-width - The width of the color grid.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-surface-default);
--background-color: var(--wa-color-surface-default);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-panel-border-radius);
--border-style: var(--wa-panel-border-style);
@@ -16,7 +16,7 @@ export default css`
}
.details {
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

4
src/components/details/details.ts
View File

@@ -38,9 +38,9 @@ import type { CSSResultGroup } from 'lit';
* @csspart summary-icon - The container that wraps the expand/collapse icons.
* @csspart content - The details content.
*
* @cssproperty --background - The details' background styles.
* @cssproperty --background-color - The details' background color.
* @cssproperty --border-color - The details' border color.
* @cssproperty --border-radius - The border radius for the details' corners. Expects a single value.
* @cssproperty --border-radius - The radius for the details' corners. Expects a single value.
* @cssproperty --border-style - The style of the details' borders.
* @cssproperty --border-width - The width of the details' borders. Expects a single value.
* @cssproperty --icon-color - The color of the details' icon.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-surface-raised);
--background-color: var(--wa-color-surface-raised);
--border-radius: var(--wa-panel-border-radius);
--box-shadow: var(--wa-shadow-l);
--width: 31rem;
@@ -27,7 +27,7 @@ export default css`
width: var(--width);
max-width: calc(100% - var(--wa-space-2xl));
max-height: calc(100% - var(--wa-space-2xl));
background: var(--background);
background-color: var(--background-color);
border-radius: var(--border-radius);
border: none;
box-shadow: var(--box-shadow);

2
src/components/dialog/dialog.ts
View File

@@ -45,7 +45,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart body - The dialog's body.
* @csspart footer - The dialog's footer.
*
* @cssproperty --background - The dialog's background styles.
* @cssproperty --background-color - The dialog's background color.
* @cssproperty --border-radius - The radius of the dialog's corners.
* @cssproperty --box-shadow - The shadow effects around the edges of the dialog.
* @cssproperty --spacing - The amount of space around and between the dialog's content.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-surface-raised);
--background-color: var(--wa-color-surface-raised);
--box-shadow: var(--wa-shadow-l);
--size: 25rem;
--spacing: var(--wa-space-xl);
@@ -26,7 +26,7 @@ export default css`
max-width: 100%;
max-height: 100%;
overflow: hidden;
background: var(--background);
background-color: var(--background-color);
border: none;
box-shadow: var(--box-shadow);
overflow: auto;

2
src/components/drawer/drawer.ts
View File

@@ -46,7 +46,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart body - The drawer's body.
* @csspart footer - The drawer's footer.
*
* @cssproperty --background - The drawer's background styles.
* @cssproperty --background-color - The drawer's background color.
* @cssproperty --box-shadow - The shadow effects around the edges of the drawer.
* @cssproperty --spacing - The amount of space around and between the drawer's content.
* @cssproperty --size - The preferred size of the drawer. This will be applied to the drawer's width or height

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
@@ -13,12 +13,12 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);
}
.input {
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
@@ -72,7 +72,7 @@ export default css`
color: var(--wa-form-control-value-color);
border: none;
/* prettier-ignore */
background: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
box-shadow: none;
padding: 0;
margin: 0;

4
src/components/input/input.ts
View File

@@ -54,9 +54,9 @@ import type WaButton from '../button/button.js';
* @csspart password-toggle-button - The password toggle button.
* @csspart suffix - The container that wraps the suffix.
*
* @cssproperty --background - The input's background styles.
* @cssproperty --background-color - The input's background color.
* @cssproperty --border-color - The color of the input's borders.
* @cssproperty --border-radius - The border radius of the input's corners.
* @cssproperty --border-radius - The radius of the input's corners.
* @cssproperty --border-style - The style of the input's borders.
* @cssproperty --border-width - The width of the input's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the input.

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

@@ -101,7 +101,7 @@ export default css`
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background: var(--background-color-hover);
background-color: var(--background-color-hover);
color: var(--label-color-hover);
}

6
src/components/radio-button/radio-button.ts
View File

@@ -24,9 +24,9 @@ import type { CSSResultGroup } from 'lit';
* @event wa-blur - Emitted when the button loses focus.
* @event wa-focus - Emitted when the button gains focus.
*
* @cssproperty --background - The button's background styles.
* @cssproperty --background-active - The color of the button's background when active.
* @cssproperty --background-hover - The color of the button's background on hover.
* @cssproperty --background-color - The button's background color.
* @cssproperty --background-color-active - The button's background color when active.
* @cssproperty --background-color-hover - The button's background color on hover.
* @cssproperty --border-color - The color of the button's border.
* @cssproperty --border-color-active - The color of the button's border when active.
* @cssproperty --border-color-hover - The color of the button's border on hover.

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-checked: var(--background);
--background-color: var(--wa-form-control-background);
--background-color-checked: var(--background-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);
--border-style: var(--wa-border-style);
@@ -61,7 +61,7 @@ export default css`
border-style: var(--border-style);
border-width: var(--border-width);
border-radius: 50%;
background: var(--background);
background-color: var(--background-color);
box-shadow: var(--box-shadow);
color: transparent;
transition:
@@ -83,7 +83,7 @@ export default css`
.radio--checked .radio__control {
color: var(--checked-icon-color);
border-color: var(--border-color-checked);
background: var(--background-checked);
background-color: var(--background-color-checked);
}
/* Checked + focus */

4
src/components/radio/radio.ts
View File

@@ -29,8 +29,8 @@ import type { CSSResultGroup } from 'lit';
* @csspart checked-icon - The checked icon.
* @csspart label - The container that wraps the radio's label.
*
* @cssproperty --background - The radio's background styles.
* @cssproperty --background-checked - The radio's background styles when checked.
* @cssproperty --background-color - The radio's background color.
* @cssproperty --background-color-checked - The radio's background color when checked.
* @cssproperty --border-color - The color of the radio's borders.
* @cssproperty --border-color-checked - The color of the radio's borders when checked.
* @cssproperty --border-style - The style of the radio's borders.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
@@ -13,8 +13,8 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);
}
/** The popup */
@@ -40,7 +40,7 @@ export default css`
/* Combobox */
.select__combobox {
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

2
src/components/select/select.ts
View File

@@ -75,7 +75,7 @@ import type WaPopup from '../popup/popup.js';
* @csspart clear-button - The clear button.
* @csspart expand-icon - The container that wraps the expand icon.
*
* @cssproperty --background - The background styles of the select's combobox.
* @cssproperty --background-color - The background color of the select's combobox.
* @cssproperty --border-color - The color of the select's borders, including the listbox.
* @cssproperty --border-radius - The border radius of the select's combobox.
* @cssproperty --border-style - The style of the select's borders, including the listbox.

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

@@ -2,10 +2,10 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-checked: var(--wa-form-control-activated-color);
--background-color: var(--wa-form-control-background);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--background-checked);
--border-color-checked: var(--background-color-checked);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
@@ -49,7 +49,7 @@ export default css`
justify-content: center;
width: var(--width);
height: var(--height);
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--height);
border-style: var(--border-style);
@@ -90,12 +90,12 @@ export default css`
/* Checked */
.switch--checked .switch__control {
background: var(--background-checked);
background-color: var(--background-color-checked);
border-color: var(--border-color-checked);
}
.switch--checked .switch__control .switch__thumb {
background: var(--thumb-color-checked);
background-color: var(--thumb-color-checked);
translate: calc((var(--width) - var(--height)) / 2);
}

4
src/components/switch/switch.ts
View File

@@ -37,8 +37,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
* @csspart label - The switch's label.
* @csspart form-control-help-text - The help text's wrapper.
*
* @cssproperty --background - The switch's background styles.
* @cssproperty --background-checked - The switch's background styles when checked.
* @cssproperty --background-color - The switch's background color.
* @cssproperty --background-color-checked - The switch's background color when checked.
* @cssproperty --border-color - The color of the switch's borders.
* @cssproperty --border-color-checked - The color of the switch's borders when checked.
* @cssproperty --border-style - The style of the switch's borders.

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

@@ -10,31 +10,31 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-quiet);
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-normal);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background: var(--wa-color-success-fill-quiet);
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-normal);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-fill-quiet);
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-normal);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-fill-quiet);
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-normal);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-fill-quiet);
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-normal);
--content-color: var(--wa-color-danger-on-normal);
}
@@ -42,7 +42,7 @@ export default css`
.tag {
display: flex;
align-items: center;
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

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

@@ -26,7 +26,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
* @csspart remove-button__base - The remove button's exported `base` part.
*
* @cssproperty --background - The tag's background styles.
* @cssproperty --background-color - The tag's background color.
* @cssproperty --border-color - The color of the tag's border.
* @cssproperty --border-radius - The radius of the tag's corners.
* @cssproperty --border-style - The style of the tag's border.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
@@ -13,12 +13,12 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);
}
.textarea {
background: var(--background);
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);

2
src/components/textarea/textarea.ts
View File

@@ -38,7 +38,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart base - The component's base wrapper.
* @csspart textarea - The internal `<textarea>` control.
*
* @cssproperty --background - The textarea's background styles.
* @cssproperty --background-color - The textarea's background color.
* @cssproperty --border-color - The color of the textarea's borders.
* @cssproperty --border-radius - The border radius of the textarea's corners.
* @cssproperty --border-style - The style of the textarea's borders.

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-tooltip-background);
--background-color: var(--wa-tooltip-background);
--border-radius: var(--wa-tooltip-border-radius);
--max-width: 30ch;
--padding: var(--wa-space-2xs) var(--wa-space-xs);
@@ -40,7 +40,7 @@ export default css`
width: max-content;
max-width: var(--max-width);
border-radius: var(--border-radius);
background: var(--background);
background-color: var(--background-color);
font: inherit;
color: var(--wa-tooltip-content-color);
font-size: var(--wa-tooltip-font-size);

2
src/components/tooltip/tooltip.ts
View File

@@ -35,7 +35,7 @@ import type { CSSResultGroup } from 'lit';
* @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
* @csspart body - The tooltip's body where its content is rendered.
*
* @cssproperty --background - The tooltip's background styles.
* @cssproperty --background-color - The tooltip's background color.
* @cssproperty --border-radius - The radius of the tooltip's corners.
* @cssproperty --content-color - The color of the tooltip's content.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.