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

add depth to checkbox

Browse Source
This commit is contained in:
lindsaym-fa
2024-01-17 16:44:34 -06:00
parent 1b380f3f1d
commit 5335c9421a
4 changed files with 46 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,10 +6,13 @@ export default css`
:host {
--background: var(--wa-form-controls-background);
--background-checked: var(--wa-form-controls-activated-color);
--border-color: var(--wa-form-controls-resting-color);
--border-color-checked: var(--wa-form-controls-activated-color);
--border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/radio */
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
display: inline-block;
}
@@ -52,6 +55,7 @@ export default css`
border-style: var(--border-style);
border-width: var(--border-width);
background: var(--background);
box-shadow: var(--box-shadow);
color: var(--wa-form-controls-value-color);
transition:
var(--wa-transition-fast) border-color,
@@ -86,8 +90,8 @@ export default css`
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-text-on-spot);
border-color: var(--wa-form-controls-activated-color);
background-color: var(--wa-form-controls-activated-color);
border-color: var(--border-color-checked);
background: var(--background-checked);
}
/* Checked/indeterminate + focus */

20
src/themes/chic.css
View File

@@ -128,8 +128,8 @@
* Subtle colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
*/
--wa-color-brand-spot: var(--wa-color-lime-70);
--wa-color-brand-spot-darker: var(--wa-color-lime-60);
--wa-color-brand-spot: var(--wa-color-lime-80);
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
--wa-color-brand-fill-subtle: var(--wa-color-lime-95);
--wa-color-brand-fill-highlight: var(--wa-color-lime-90);
--wa-color-brand-border-subtle: var(--wa-color-lime-90);
@@ -138,8 +138,8 @@
--wa-color-brand-text-on-fill: var(--wa-color-lime-40);
--wa-color-brand-text-on-surface: var(--wa-color-lime-50);
--wa-color-success-spot: var(--wa-color-green-70);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-70);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
@@ -148,8 +148,8 @@
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-70);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-70);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
@@ -158,8 +158,8 @@
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-60);
--wa-color-danger-spot: var(--wa-color-red-80);
--wa-color-danger-spot-darker: var(--wa-color-red-70);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
@@ -168,8 +168,8 @@
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-70);
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);

12
src/themes/depth_3_punchy.css
View File

@@ -69,6 +69,18 @@ wa-textarea {
}
}
wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
);
&:not([checked]):not([indeterminate]) {
--box-shadow: var(--wa-shadow-inset);
}
}
wa-switch {
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,

18
src/themes/depth_4_glossy.css
View File

@@ -257,6 +257,24 @@ wa-textarea:not(:focus) {
}
}
wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
);
&:not([checked]):not([indeterminate]) {
--box-shadow: var(--wa-shadow-inset);
}
&[checked] {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
}
}
wa-switch {
--box-shadow: var(--wa-shadow-inset);
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,