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

Remove Awesome's dimension.css, re-combine with overrides.css

Browse Source
This commit is contained in:
lindsaym-fa
2025-05-13 16:45:28 -04:00
committed by Lea Verou
parent 3703ef26da
commit 2c839a4225
3 changed files with 78 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/styles/themes/awesome.css
View File

@@ -6,7 +6,6 @@
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('awesome/dimension.css');
@import url('awesome/overrides.css');
:where(:root),

78
src/styles/themes/awesome/dimension.css
View File

@@ -1,78 +0,0 @@
:where(:root),
:host,
.wa-theme-awesome {
:is(
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-group > wa-radio-button,
.wa-button
):not([appearance='plain'], .wa-plain) {
--wa-transition-slow: 0;
--wa-transition-normal: 0;
--wa-transition-fast: 0;
--border-color: var(--text-color);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--border-color);
--background-color-active: var(--border-color);
--text-color-active: var(--background-color);
margin-bottom: var(--wa-shadow-offset-y-s);
&:is([appearance='outlined'], .wa-outlined) {
--background-color: var(--wa-color-surface-default);
}
&:not([disabled], [loading]):active,
&::part(checked) {
box-shadow: none;
transform: translateY(var(--wa-shadow-offset-y-s));
}
.wa-dark & {
--border-color: var(--wa-color-border-quiet);
}
}
wa-radio-group > wa-radio-button {
&::part(base) {
--background-color-active: var(--border-color-active);
--border-color-active: var(--wa-color-neutral-border-loud);
--text-color-active: var(--wa-color-surface-default);
}
&::part(checked) {
--background-color: var(--border-color);
--background-color-hover: var(--border-color);
--border-color: var(--wa-color-neutral-border-loud);
--text-color: var(--wa-color-surface-default);
--text-color-hover: var(--text-color);
}
}
:is(
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea,
.wa-text-field
):not(:focus, [appearance='filled'], .wa-filled) {
--box-shadow: inset var(--wa-shadow-s);
}
}

78
src/styles/themes/awesome/overrides.css
View File

@@ -1,6 +1,84 @@
:where(:root),
:host,
.wa-theme-awesome {
:is(
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button,
wa-radio-group > wa-radio-button,
.wa-button
):not([appearance='plain'], .wa-plain) {
--wa-transition-slow: 0;
--wa-transition-normal: 0;
--wa-transition-fast: 0;
--border-color: var(--text-color);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--border-color);
--background-color-active: var(--border-color);
--text-color-active: var(--background-color);
margin-bottom: var(--wa-shadow-offset-y-s);
&:is([appearance='outlined'], .wa-outlined) {
--background-color: var(--wa-color-surface-default);
}
&:not([disabled], [loading]):active,
&::part(checked) {
box-shadow: none;
transform: translateY(var(--wa-shadow-offset-y-s));
}
.wa-dark &,
.wa-invert & {
--border-color: var(--wa-color-border-quiet);
--text-color-active: var(--wa-color-on-quiet);
}
}
wa-radio-group > wa-radio-button {
&::part(base) {
--background-color-active: var(--border-color-active);
--border-color-active: var(--wa-color-neutral-border-loud);
--text-color-active: var(--wa-color-surface-default);
}
&::part(checked) {
--background-color: var(--border-color);
--background-color-hover: var(--border-color);
--border-color: var(--wa-color-neutral-border-loud);
--text-color: var(--wa-color-surface-default);
--text-color-hover: var(--text-color);
}
}
:is(
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea,
.wa-text-field
):not(:focus, [appearance='filled'], .wa-filled) {
--box-shadow: inset var(--wa-shadow-s);
}
wa-badge {
border-radius: var(--wa-border-radius-m);
font-weight: var(--wa-font-weight-bold);