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

Native styles cleanup (#1043)

Browse Source 
* tidy and touch up content styles

* finish touching up inline text styles

* move styles for docs code blocks from `native.css` to appropriate files

* tidy and touch up list and table styles

* tidy and touch up details styles

* tidy up dialog styles

* fix bloated spacing in dialog and drawer

* add fieldset, refactor radio and checkbox styles

* refactor input, textarea, and select styles

* refactor range styles to match new `<wa-slider>`

* readability improvements

* touch up theme overrides

* fix Matter checkbox and radio hover styles
This commit is contained in:
Lindsay M
2025-06-09 11:18:37 -04:00
committed by GitHub
parent df46e1db3b
commit 6f856fbd89
16 changed files with 988 additions and 1070 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webawesome/docs/assets/styles/code-highlighter.css
View File

@@ -1,4 +1,5 @@
pre {
/* Only code blocks generated by our docs get these styles */
pre[id*='code-block-'] {
background-color: var(--wa-color-gray-20);
color: white;
@@ -8,6 +9,7 @@ pre {
background-color: var(--wa-color-surface-lowered);
}
}
.code-comment,
.code-prolog,
.code-doctype,

16
packages/webawesome/docs/assets/styles/copy-code.css
View File

@@ -1,3 +1,19 @@
/* Prep our code blocks to host the copy button */
pre[id*='code-block-']:has(code) {
position: relative;
padding: 0;
white-space: normal;
& code {
display: block;
font-size: 1em;
background-color: transparent;
padding: var(--wa-space-m);
white-space: pre;
overflow-x: auto;
}
}
wa-copy-button.copy-button {
--background-color: var(--wa-color-gray-20);
--background-color-hover: color-mix(in oklab, var(--background-color), white 5%);

29
packages/webawesome/docs/docs/utilities/native.md
View File

@@ -77,16 +77,16 @@ Organized content in bulleted or numbered format with proper nesting support.
<ol>
<li>List item 1</li>
<li>List item 2
<ul>
<ol>
<li>Subitem a</li>
<li>Subitem b</li>
</ul>
</ol>
</li>
<li>List item 3</li>
</ol>
```
### Definition Lists
### Description Lists
Term and definition pairs for glossaries and descriptions.
@@ -141,19 +141,19 @@ Various text formatting elements for emphasis and semantic meaning.
```html {.example}
<div class="two-columns">
<p><strong>Bold</strong></p>
<p><em>Italics</em></p>
<p><em>Italic</em></p>
<p><u>Underline</u></p>
<p><s>Strike-through</s></p>
<p><del>Deleted</del></p>
<p><ins>Inserted</ins></p>
<p><s>Strike-through</s></p>
<p><small>Small</small></p>
<p><span>Text <sub>Sub</sub></span></p>
<p><span>Text <sup>Sup</sup></span></p>
<p><span>Subscript <sub>Sub</sub></span></p>
<p><span>Superscript <sup>Sup</sup></span></p>
<p><abbr title="Abbreviation">Abbr.</abbr></p>
<p><kbd>Keyboard</kbd></p>
<p><mark>Highlighted</mark></p>
<p><a href="#">Link text</a></p>
<p><code>Inline code</code></p>
<p><kbd>Keyboard</kbd></p>
</div>
```
@@ -161,11 +161,13 @@ Various text formatting elements for emphasis and semantic meaning.
Formatted code snippets with proper syntax styling.
```
```html {.example}
<pre>
// do a thing
export function thing() {
return true;
}
</pre>
```
### Images
@@ -454,3 +456,12 @@ Multi-line text input fields for longer content.
```html {.example}
<label>Textarea <textarea placeholder="Type something"></textarea></label>
```
### Fieldsets
```html {.example}
<fieldset>
<legend>Legend</legend>
Nunc mi ipsum faucibus vitae aliquet nec ullamcorper. Tincidunt id aliquet risus feugiat in ante. Ac turpis egestas integer eget aliquet nibh praesent tristique magna.
</fieldset>
```

2
packages/webawesome/src/components/dialog/dialog.css
View File

@@ -3,7 +3,7 @@
--border-radius: var(--wa-panel-border-radius);
--box-shadow: var(--wa-shadow-l);
--width: 31rem;
--spacing: var(--wa-space-xl);
--spacing: var(--wa-space-l);
--show-duration: 200ms;
--hide-duration: 200ms;

2
packages/webawesome/src/components/drawer/drawer.css
View File

@@ -2,7 +2,7 @@
--background-color: var(--wa-color-surface-raised);
--box-shadow: var(--wa-shadow-l);
--size: 25rem;
--spacing: var(--wa-space-xl);
--spacing: var(--wa-space-l);
--show-duration: 200ms;
--hide-duration: 200ms;

1854
packages/webawesome/src/styles/native.css
View File

File diff suppressed because it is too large Load Diff

10
packages/webawesome/src/styles/themes/active/overrides.css
View File

@@ -2,11 +2,15 @@
:where(:root),
:host,
.wa-theme-active {
input[type='radio'],
wa-radio {
--background-color-checked: var(--wa-form-control-activated-color);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

10
packages/webawesome/src/styles/themes/brutalist/overrides.css
View File

@@ -59,6 +59,9 @@
}
:is(
wa-input::part(input),
wa-select::part(form-control-input),
wa-textarea::part(form-control-input),
input:where(
:not(
[type='button'],
@@ -74,12 +77,9 @@
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea
textarea
) {
--border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
}
wa-rating {

2
packages/webawesome/src/styles/themes/default/color.css
View File

@@ -36,7 +36,7 @@
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 20%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.

2
packages/webawesome/src/styles/themes/default/space.css
View File

@@ -16,5 +16,7 @@
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
}
}

10
packages/webawesome/src/styles/themes/glossy/overrides.css
View File

@@ -11,11 +11,15 @@
letter-spacing: -0.02em;
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

41
packages/webawesome/src/styles/themes/matter/overrides.css
View File

@@ -68,9 +68,9 @@
}
input[type='checkbox'],
wa-checkbox,
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control) {
--border-radius: calc(var(--wa-border-radius-s) / 2);
border-radius: calc(var(--wa-border-radius-s) / 2);
}
input:where(
@@ -175,31 +175,32 @@
}
progress,
wa-progress-bar {
wa-progress-bar::part(base) {
height: 0.25rem;
&:where(progress),
&::part(base) {
border-radius: var(--wa-border-radius-square);
}
border-radius: var(--wa-border-radius-square);
}
input:is([type='checkbox'], [type='radio']),
wa-checkbox,
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control),
wa-radio {
--border-width: var(--wa-border-width-m);
wa-radio::part(control) {
--checked-icon-scale: 0.65;
&::part(control) {
margin-inline-end: 0.75em;
}
@media (hover: hover) {
&:hover {
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
--box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color-checked), transparent 85%);
border-width: var(--wa-border-width-m);
margin-inline-end: 0.75em;
}
@media (hover: hover) {
:is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%);
}
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
}
}
}

12
packages/webawesome/src/styles/themes/playful/overrides.css
View File

@@ -21,11 +21,15 @@
border-radius: var(--wa-form-control-border-radius);
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--wa-form-control-activated-color);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.5;
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-rating {

10
packages/webawesome/src/styles/themes/premium/overrides.css
View File

@@ -28,11 +28,15 @@
text-transform: uppercase;
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {

42
packages/webawesome/src/styles/themes/shoelace/overrides.css
View File

@@ -28,14 +28,13 @@
}
wa-callout {
--spacing: var(--wa-space-l);
--spacing: var(--wa-space-m);
font-size: var(--wa-font-size-smaller);
&:is([appearance~='outlined']) {
border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s)
var(--wa-border-width-s);
border-color: var(--border-color, var(--wa-color-border-loud)) var(--wa-color-surface-border)
var(--wa-color-surface-border) var(--wa-color-surface-border);
border-top-width: var(--wa-border-width-l);
border-color: var(--wa-color-surface-border);
border-top-color: var(--border-color, var(--wa-color-border-loud));
&:not([appearance~='accent']) {
--border-color: var(--wa-color-fill-loud);
@@ -52,16 +51,13 @@
}
wa-carousel {
--box-shadow: var(--wa-shadow-s);
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
wa-dialog,
wa-drawer {
--spacing: var(--wa-space-l);
}
:is(
wa-input,
wa-select,
wa-textarea,
input:where(
:not(
[type='button'],
@@ -77,21 +73,22 @@
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea
):not([appearance='filled']) {
textarea
):not([appearance='filled'], .wa-filled) {
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
--wa-focus-ring-offset: 0;
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--border-color-checked);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-slider::part(thumb) {
@@ -114,12 +111,13 @@
}
}
wa-progress-bar {
--height: 1rem;
wa-progress-bar::part(base),
progress {
height: 1em;
}
wa-tab {
font-size: var(--wa-font-size-s);
font-size: var(--wa-font-size-smaller);
}
}
}

12
packages/webawesome/src/styles/themes/tailspin/overrides.css
View File

@@ -32,11 +32,15 @@
}
}
input[type='radio'],
wa-radio {
--background-color-checked: var(--wa-form-control-activated-color);
--checked-icon-color: var(--wa-color-brand-on-loud);
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {