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

Allow customization of outlined styles, fixes #412 (#426)

Browse Source
This commit is contained in:
Lea Verou
2025-01-06 17:35:57 -05:00
committed by GitHub
parent fc84e1a50d
commit f39308dbc5
4 changed files with 41 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/input/input.css
View File

@@ -30,6 +30,7 @@ input {
background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
padding-block: 0;
color: inherit;
}
input::-webkit-search-decoration,

13
src/components/textarea/textarea.css
View File

@@ -13,10 +13,15 @@
transition: inherit;
}
textarea[part] {
padding: var(--wa-space);
border-radius: inherit;
border: var(--border-width) solid transparent; /* make resizer look a little nicer */
textarea {
background-color: transparent;
color: inherit;
&[part] {
padding: var(--wa-space);
border-radius: inherit;
border: var(--border-width) solid transparent; /* make resizer look a little nicer */
}
}
textarea,

21
src/styles/native/input.css
View File

@@ -14,13 +14,20 @@ input:where(:not(
[type='reset'],
[type='submit']
)) {
:where(&:not(:host *)) {
/* Defaults for root element with 0 specificity.
* Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
* Instead we provide the fallback when setting
*/
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
&:not(:host *) {
/* Defaults for root element. */
--outlined-background-color: var(--wa-form-control-background-color);
--outlined-border-color: var(--wa-form-control-resting-color);
--outlined-text-color: var(--wa-form-control-value-color);
:where(&) {
/* Defaults with 0 specificity.
* Do NOT reset --background-color and --border-color here so they trickle in from the appearance utils
* Instead we provide the fallback when setting
*/
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
}
}
/* Style native inputs and <wa-input>'s visible container */

36
src/styles/utilities/appearance.css
View File

@@ -1,14 +1,17 @@
.wa-outlined,
:host([appearance~='outlined']) {
--background-color: transparent;
--background-color-hover: var(--wa-color-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
--background-color: var(--outlined-background-color, transparent);
--background-color-hover: var(--outlined-background-color-hover, var(--wa-color-fill-quiet));
--background-color-active: var(
--outlined-background-color-active,
color-mix(in oklab, var(--background-color-hover), transparent 20%)
);
--border-color: var(--wa-color-border-loud);
--border-color-hover: var(--wa-color-border-loud);
--border-color: var(--outlined-border-color, var(--wa-color-border-loud));
--border-color-hover: var(--outlined-border-color-hover, var(--wa-color-border-loud));
--text-color: var(--wa-color-on-quiet);
--text-color-hover: var(--wa-color-on-quiet);
--text-color: var(--outlined-text-color, var(--wa-color-on-quiet));
--text-color-hover: var(--outlined-text-color-hover, var(--text-color));
}
.wa-accent,
@@ -17,32 +20,27 @@
--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));
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--outlined-border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
&:is(.wa-outlined, :host([appearance~='outlined'])) {
--border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
}
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
}
.wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
--border-color: transparent;
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
--background-color-hover: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
&:is(.wa-outlined, :host([appearance~='outlined'])) {
--border-color: var(--wa-color-border-normal);
}
--outlined-border-color: var(--wa-color-border-normal);
--text-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
}
.wa-plain,
:host([appearance~='plain']) {
--background-color: transparent;
--text-color: var(--wa-color-on-quiet);
--background-color-hover: var(--wa-color-fill-quiet);
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
--text-color: var(--wa-color-on-quiet);
}