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

update component group background properties to background-color

Browse Source
This commit is contained in:
lindsaym-fa
2024-06-12 16:51:13 -04:00
parent f734a85665
commit 83bc4bf2fb
20 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/docs/experimental/themer.md
View File

@@ -152,7 +152,7 @@ hasOutline: false
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
calc(var(--wa-shadow-offset-x-l) * -1) var(--wa-color-shadow);
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);
@@ -367,7 +367,7 @@ hasOutline: false
position: relative;
border: var(--wa-form-control-border-width) dashed var(--wa-form-control-resting-color);
border-radius: var(--wa-form-control-border-radius);
background: var(--wa-form-control-background);
background: var(--wa-form-control-background-color);
cursor: pointer;
font-weight: var(--wa-font-weight-action);
height: calc(var(--wa-form-control-height-m) + var(--wa-border-width-s) * 2);

4
docs/docs/theming/component-groups.md
View File

@@ -14,7 +14,7 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
| Custom Property | Default Value |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| `--wa-form-control-background` | `var(--wa-color-surface-default)` |
| `--wa-form-control-background-color` | `var(--wa-color-surface-default)` |
| `--wa-form-control-border-style` | `var(--wa-border-style)` |
| `--wa-form-control-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-control-border-radius` | `var(--wa-border-radius-s)` |
@@ -105,7 +105,7 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
| Custom Property | Default Value |
| ---------------------------- | ----------------------------------- |
| `--wa-tooltip-arrow-size` | `0.375rem` <small>(6px)</small> |
| `--wa-tooltip-background` | `var(--wa-color-neutral-fill-loud)` |
| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` |
| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` |
| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` |
| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` |

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--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);

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--background-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--wa-form-control-activated-color);

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

@@ -150,7 +150,7 @@ export default css`
z-index: 1000;
left: 0;
border-radius: var(--wa-tooltip-border-radius);
background-color: var(--wa-tooltip-background);
background-color: var(--wa-tooltip-background-color);
font-family: inherit;
font-size: var(--wa-tooltip-font-size);
line-height: var(--wa-tooltip-line-height);

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--background-color-checked: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-checked: var(--background-color-checked);
@@ -11,7 +11,7 @@ export default css`
--box-shadow: initial;
--height: calc(1em * var(--wa-form-control-value-line-height));
--thumb-color: var(--wa-form-control-resting-color);
--thumb-color-checked: var(--wa-form-control-background);
--thumb-color-checked: var(--wa-form-control-background-color);
--thumb-shadow: initial;
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
--width: calc(var(--height) * 1.75);

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--background-color: var(--wa-form-control-background);
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);

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

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

2
src/themes/active.css
View File

@@ -310,7 +310,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/brutalist.css
View File

@@ -311,7 +311,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/classic.css
View File

@@ -314,7 +314,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

4
src/themes/default.css
View File

@@ -331,7 +331,7 @@
*/
/* Form controls */
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
@@ -372,7 +372,7 @@
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background: var(--wa-color-neutral-fill-loud);
--wa-tooltip-background-color: var(--wa-color-neutral-fill-loud);
--wa-tooltip-border-radius: var(--wa-border-radius-s);

2
src/themes/fa.css
View File

@@ -315,7 +315,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/glassy.css
View File

@@ -309,7 +309,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/mellow.css
View File

@@ -309,7 +309,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/migration.css
View File

@@ -312,7 +312,7 @@
/**
* Component groups
*/
--wa-form-control-background: var(--wa-color-surface-default);
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-radius: var(--wa-border-radius-s);

2
src/themes/playful.css
View File

@@ -324,7 +324,7 @@
/**
* Component groups
*/
--wa-form-control-background: transparent;
--wa-form-control-background-color: transparent;
--wa-form-control-border-radius: var(--wa-border-radius-pill);

2
src/themes/premium.css
View File

@@ -312,7 +312,7 @@
/**
* Component groups
*/
--wa-form-control-background: transparent;
--wa-form-control-background-color: transparent;
--wa-form-control-border-radius: var(--wa-border-radius-s);