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

Move appearance utils to separate file

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 03:03:55 -05:00
parent 8a321951d3
commit cbab3b09e5
4 changed files with 42 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import nativeStyles from '../../styles/native/button.css';
import sizeStyles from '../../styles/shadow/size.css';
import appearanceStyles from '../../styles/utilities/appearance.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
@@ -52,7 +53,7 @@ import styles from './button.css';
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = [variantStyles, sizeStyles, nativeStyles, styles];
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
static get validators() {
return [...super.validators, MirrorValidator()];

1
src/styles/applied.css
View File

@@ -10,6 +10,7 @@
@import url('shadow/size.css');
@import url('utilities/variants.css');
@import url('utilities/appearance.css');
/**
* Applied styles are used to "reset" a page and provide defaults for typography and native HTML elements based on

40
src/styles/native/button.css
View File

@@ -96,46 +96,6 @@ input:is([type='button'], [type='reset'], [type='submit']),
/* Styles */
.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%);
--border-color: var(--wa-color-border-loud);
--border-color-hover: var(--wa-color-border-loud);
--label-color: var(--wa-color-on-quiet);
--label-color-hover: var(--wa-color-on-quiet);
}
.wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
--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));
--label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
}
.wa-tinted,
:host([appearance~='tinted']) {
--background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
}
.wa-text,
:host([appearance~='text']) {
--background-color: transparent;
--label-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%);
}
.wa-pill,
:host([pill]) {
border-radius: var(--wa-border-radius-pill);

39
src/styles/utilities/appearance.css Normal file
View File

@@ -0,0 +1,39 @@
.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%);
--border-color: var(--wa-color-border-loud);
--border-color-hover: var(--wa-color-border-loud);
--label-color: var(--wa-color-on-quiet);
--label-color-hover: var(--wa-color-on-quiet);
}
.wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
--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));
--label-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
}
.wa-tinted,
:host([appearance~='tinted']) {
--background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--label-color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
}
.wa-text,
:host([appearance~='text']) {
--background-color: transparent;
--label-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%);
}