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

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Lea Verou
2024-12-16 12:46:59 -05:00
parent 82a5aff8db e74a30f62a
commit 35571c1d4e
6 changed files with 166 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
docs/docs/experimental/style-guide.md
View File

@@ -8,6 +8,106 @@ The styles shown below can be all yours by adding Web Awesome's applied styleshe
---
## Forms
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;" class="wa">
<div>
<button>Button</button>
<input type="button" value="Input (button)"></input>
<input type="reset" value="Input (reset)"></input>
<input type="submit" value="Input (submit)"></input>
</div>
<wa-button>WA Button</wa-button>
<label for="input-text">Input (text)</label>
<input type="text" id="input-text"></input>
<wa-input label="WA Input (text)" type="text"></wa-input>
<label for="input-number">Input (number)</label>
<input type="number" id="input-number"></input>
<wa-input label="WA Input (number)" type="number"></wa-input>
<label for="input-password">Input (password)</label>
<input type="password" id="input-password"></input>
<wa-input label="WA Input (password)" type="password"></wa-input>
<input type="checkbox" id="input-checkbox"></input>
<label for="input-checkbox">Input (checkbox)</label>
<wa-checkbox>WA Checkbox</wa-checkbox>
<label for="input-color">Input (color)</label>
<input type="color" id="input-color"></input>
<wa-color-picker label="WA Color Picker"></wa-color-picker>
<label for="input-date">Input (date)</label>
<input type="date" id="input-date"></input>
<wa-input label="WA Input (date)" type="date"></wa-input>
<label for="input-time">Input (time)</label>
<input type="time" id="input-time"></input>
<wa-input label="WA Input (time)" type="time"></wa-input>
<fieldset>
<legend>Radio Group:</legend>
<input type="radio" id="radio-1" name="radio" value="radio-1" checked />
<label for="radio-1">Radio 1</label>
<input type="radio" id="radio-2" name="radio" value="radio-2" />
<label for="radio-2">Radio 2</label>
<input type="radio" id="radio-3" name="radio" value="radio-3" />
<label for="radio-3">Radio 3</label>
</fieldset>
<fieldset>
<wa-radio-group label="WA Radio Group:" name="wa-radio" value="radio-1">
<wa-radio value="radio-1">Radio</wa-radio>
<wa-radio value="radio-2">Radio</wa-radio>
<wa-radio value="radio-3">Radio</wa-radio>
</wa-radio-group>
</fieldset>
<label for="input-range">Input (range)</label>
<input type="range" id="input-range"></input>
<wa-range label="WA Range"></wa-range>
<div>
<label for="textarea">Textarea</label>
<textarea id="textarea"></textarea>
</div>
<wa-textarea label="WA Textarea"></wa-textarea>
<div>
<label for="select">Select</label>
<select id="select">
<option value="option-1">Option 1</option>
<option value="option-2">Option 2</option>
<option value="option-3">Option 3</option>
</select>
</div>
<wa-select label="WA Select">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
</div>
## Typography
Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat.

64
src/components/button/button.css
View File

@@ -1,16 +1,4 @@
:host {
--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));
--border-color: initial;
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
display: inline-block;
position: relative;
width: auto;
@@ -168,52 +156,15 @@
--indicator-width: var(--wa-border-width-s);
}
/*
* Sizes
*/
:host([size='small']) {
font-size: var(--wa-font-size-s);
}
:host([size='medium']) {
font-size: var(--wa-font-size-m);
}
:host([size='large']) {
font-size: var(--wa-font-size-l);
}
/*
* Internal
*/
.button {
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: max(1px, var(--border-width));
box-shadow: var(--box-shadow);
color: var(--label-color);
display: inline-flex;
align-items: stretch;
justify-content: center;
width: 100%;
font: inherit;
font-weight: var(--wa-font-weight-action);
text-decoration: none;
user-select: none;
-webkit-user-select: none;
white-space: nowrap;
vertical-align: middle;
padding: 0;
transition:
background var(--wa-transition-fast) var(--wa-transition-easing),
border var(--wa-transition-fast) var(--wa-transition-easing),
box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
color var(--wa-transition-fast) var(--wa-transition-easing);
cursor: inherit;
}
.button--checked {
@@ -249,18 +200,6 @@
pointer-events: none;
}
.button:hover:not(.button--disabled, .button--loading) {
background-color: var(--background-color-hover, var(--background-color, none));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--label-color-hover, var(--label-color));
}
.button:active:not(.button--disabled, .button--loading) {
background-color: var(--background-color-active, var(--background-color, none));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--label-color-active, var(--label-color));
}
@media (forced-colors: active) {
.button.button--outlined.button--checked:not(.button--disabled) {
outline: solid 2px transparent;
@@ -292,16 +231,19 @@
*/
.button--small {
font-size: var(--wa-font-size-s);
height: var(--wa-form-control-height-s);
line-height: calc(var(--wa-form-control-height-s) - var(--border-width) * 2);
}
.button--medium {
font-size: var(--wa-font-size-m);
height: var(--wa-form-control-height-m);
line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
}
.button--large {
font-size: var(--wa-font-size-l);
height: var(--wa-form-control-height-l);
line-height: calc(var(--wa-form-control-height-l) - var(--border-width) * 2);
}

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

@@ -8,6 +8,7 @@ import { WaInvalidEvent } from '../../events/invalid.js';
import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import nativeStyles from '../../styles/native/button.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import '../spinner/spinner.js';
@@ -53,7 +54,7 @@ import styles from './button.css';
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = styles;
static shadowStyle = [nativeStyles, styles];
static get validators() {
return [...super.validators, MirrorValidator()];

1
src/styles/applied.css
View File

@@ -1,5 +1,6 @@
@import url('utilities/visually-hidden.css');
@import url('components/wa-page.css');
@import url('./native.css');
@import url('native/content.css');
@import url('native/code.css');
@import url('native/forms.css');

1
src/styles/native.css Normal file
View File

@@ -0,0 +1 @@
@import url('./native/button.css');

59
src/styles/native/button.css Normal file
View File

@@ -0,0 +1,59 @@
:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)),
:host {
--background-color: 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));
--border-color: initial;
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--label-color: var(--wa-color-neutral-on-loud);
--label-color-hover: var(--label-color);
--label-color-active: var(--label-color);
}
button,
input:is([type='button'], [type='reset'], [type='submit']),
:host([href]) a {
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: max(1px, var(--border-width));
box-shadow: var(--box-shadow);
color: var(--label-color);
cursor: pointer;
font-family: inherit;
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-action);
height: var(--wa-form-control-height-m);
line-height: calc(var(--wa-form-control-height-m) - var(--border-width) * 2);
padding: 0 var(--wa-space-m);
text-decoration: none;
user-select: none;
-webkit-user-select: none;
white-space: nowrap;
vertical-align: middle;
transition:
background var(--wa-transition-fast) var(--wa-transition-easing),
border var(--wa-transition-fast) var(--wa-transition-easing),
box-shadow var(--wa-transition-fast) var(--wa-transition-easing),
color var(--wa-transition-fast) var(--wa-transition-easing);
}
:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)):hover,
:is(:host button, :host([href]) a):hover:not(.button--disabled, .button--loading) {
background-color: var(--background-color-hover, var(--background-color));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--label-color-hover, var(--label-color));
}
:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)):active,
:is(:host button, :host([href]) a):active:not(.button--disabled, .button--loading) {
background-color: var(--background-color-active, var(--background-color));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--label-color-active, var(--label-color));
}