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

Fixed radio button styling regression (#443)

Browse Source 
* fixed styling regression

* Import missing appearance utilities

* Fix up radio button theme styles

* tweaked based on feedback

---------

Co-authored-by: lindsaym-fa <dev@lindsaym.design>
This commit is contained in:
Kelsey Jackson
2025-01-08 11:07:28 -06:00
committed by GitHub
parent 3511a60b93
commit 31cfdf5704
3 changed files with 21 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/radio-button/radio-button.css
View File

@@ -34,14 +34,12 @@
*/
:host([checked]) {
--background-color: var(--wa-color-brand-fill-quiet);
--background-color-hover: var(--background-color);
--border-color: var(--wa-form-control-activated-color);
--text-color: var(--wa-color-brand-on-normal);
--indicator-color: var(--border-color);
--indicator-color: var(--wa-form-control-activated-color);
--indicator-width: var(--wa-border-width-s);
box-shadow:
var(--box-shadow, 0 0 transparent),
inset 0 0 0 var(--indicator-width) var(--indicator-color);
box-shadow: inset 0 0 0 var(--indicator-width) var(--indicator-color);
& button {
--border-color: var(--indicator-color);
}
}

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

@@ -8,6 +8,7 @@ import { HasSlotController } from '../../internal/slot.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-formassociated-element.js';
import nativeStyles from '../../styles/native/button.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import buttonStyles from '../button/button.css';
@@ -50,7 +51,7 @@ import styles from './radio-button.css';
*/
@customElement('wa-radio-button')
export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = [variantStyles, sizeStyles, nativeStyles, buttonStyles, styles];
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, buttonStyles, styles];
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');

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

@@ -247,10 +247,13 @@ wa-badge {
text-transform: uppercase;
}
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button, .wa-button):not(
[appearance='plain'],
.wa-plain
) {
: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;
@@ -269,7 +272,8 @@ wa-badge {
--background-color: var(--wa-color-surface-default);
}
&:not([disabled], [loading]):active {
&:not([disabled], [loading]):active,
&::part(checked) {
box-shadow: none;
transform: translateY(var(--wa-shadow-offset-y-s));
}
@@ -308,18 +312,12 @@ wa-checkbox {
}
wa-radio-group > wa-radio-button {
--background-color-active: var(--border-color);
--border-color-active: var(--background-color-active);
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s) var(--border-color);
--label-color-active: var(--wa-color-surface-default);
&:active,
&[checked] {
&::part(base):active,
&::part(checked) {
--background-color: var(--border-color);
--background-color-hover: var(--border-color);
--border-color: var(--wa-color-neutral-border-loud);
--box-shadow: none;
--label-color: var(--wa-color-surface-default);
transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
--text-color: var(--wa-color-surface-default);
}
}