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

Refactor form control sizing (#1005)

Browse Source 
* visual test setup

* fix improper class placement in visual tests

* add `wa-form-control-*-font-size` and `-wa-form-control-hint-*` custom properties

* use new custom properties

* dump of component sizing improvements

* fix native color picker styles

* update menu with relative sizes

* tidy up menu, select, and tag sizing

* use relative sizing across components

* touch up custom properties

* update docs and comments

* update changelog

* revert changes to visual tests to simplify PR

* revert leftover change to visual tests

* tidy up space doc markdown

* fix default card spacing

* fix card docs

* wrap up new `--tag-max-size` for `<wa-select>`

* change default `--tag-max-size`

* prettier

* touch up

* clean up leftovers

* fix native form control margins

* set default toggle size relative to font size

* correct toggle size in docs

* Konnorrogers/lm form control sizing (#1025)

* try a second updateComplete??

* try a second updateComplete??

* more timeouts?

* try logging

* more logging
gp

* maybe now

* radio group test

* add todo note'

* add workflow dispatch for client tests

---------

Co-authored-by: Konnor Rogers <konnor5456@gmail.com>
This commit is contained in:
Lindsay M
2025-06-03 16:27:24 -04:00
committed by GitHub
parent 9a3ffb04ba
commit 5980b5f843
48 changed files with 314 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/workflows/client_tests.yml vendored
View File

@@ -4,6 +4,7 @@
name: Client Tests
on:
workflow_dispatch:
push:
branches: [next]
pull_request:

23
package-lock.json generated
View File

@@ -2488,6 +2488,10 @@
"resolved": "packages/webawesome",
"link": true
},
"node_modules/@shoelace-style/webawesome-pro": {
"resolved": "packages/webawesome-pro",
"link": true
},
"node_modules/@sindresorhus/is": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
@@ -13987,6 +13991,25 @@
"engines": {
"node": ">=14.17.0"
}
},
"packages/webawesome-pro": {
"name": "@shoelace-style/webawesome-pro",
"version": "3.0.0-alpha.13",
"license": "TODO",
"dependencies": {
"@ctrl/tinycolor": "^4.1.0",
"@floating-ui/dom": "^1.6.13",
"@shoelace-style/animations": "^1.2.0",
"@shoelace-style/localize": "^3.2.1",
"composed-offset-position": "^0.0.6",
"lit": "^3.2.1",
"qr-creator": "^1.0.0",
"style-observer": "^0.0.7"
},
"devDependencies": {},
"engines": {
"node": ">=14.17.0"
}
}
}
}

2
packages/webawesome/docs/assets/styles/ui.css
View File

@@ -127,7 +127,7 @@
> input {
font: inherit;
margin-block: calc(-1 * var(--wa-space-smaller));
margin-block: 0.75em;
field-sizing: content;
}

9
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -31,14 +31,23 @@ During the alpha period, things might break! We take breaking changes very serio
- `<wa-tab-group no-scroll-controls>` => `<wa-tab-group without-scroll-controls>`
- `<wa-tag removable>` => `<wa-tag with-remove>`
- 🚨 BREAKING: removed the `size` attribute from `<wa-card>`; please set the size of child elements on the children directly
- 🚨 BREAKING: Greatly simplified the sizing strategy across components and utilities
- Removed `--wa-size`, `--wa-size-smaller`, `--wa-size-larger`, `--wa-space`, `--wa-space-smaller`, and `--wa-space-larger`
- Added tokens for `--wa-form-control-padding-inline`, `--wa-form-control-padding-block`, and `--wa-form-control-toggle-size`
- Refactored default `--wa-font-size-*` values to use an apparent 1.125 ratio and round rendered values to the nearest whole pixel
- Added convenience tokens for `--wa-font-size-smaller` and `--wa-font-size-larger`
- Updated components to use relative `em` values for internal padding and margin wherever appropriate
- 🚨 BREAKING: removed the `hint` property and slot from `<wa-radio>`; please apply hints directly to `<wa-radio-group>` instead
- Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]
- Added support for `name` in `<wa-details>` for exclusively opening one in a group
- Added `--checked-icon-scale` to `<wa-checkbox>`
- Added `--tag-max-size` to `<wa-select>` when using `multiple`
- Fixed a bug in `<wa-radio-group>` that caused radios to uncheck when assigning a numeric value [issue:924]
- Fixed `<wa-button-group>` so dividers properly show between buttons
- Fixed the tooltip position in `<wa-slider>` when using RTL
- Fixed a bug in `<wa-details>` and native `<details>` styles that made the summary hard to click [issue:684]
- Fixed a handful of bugs unify form control height across components and native elements
- Improved CSS utilities and Native Styles to use [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for easier end user customization (no more specificity conflicts — your CSS wins!)
- Improved native `<button>` styles to properly space icons
- Improved button appearances in `<wa-color-picker>`

35
packages/webawesome/docs/docs/tokens/component-groups.md
View File

@@ -8,12 +8,12 @@ For components that share similar qualities, Web Awesome includes custom propert
## Form Controls
Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), etc. share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`.
Components such as [input](/docs/components/input), [select](/docs/components/select), [textarea](/docs/components/textarea), [checkbox](/docs/components/checkbox), and others share a number of styles to give your forms a cohesive appearance. Web Awesome defines custom properties for these styles using the format `--wa-form-control-{style}`.
Not every form control uses all of these custom properties. For example, `<wa-radio>` defines its own height and border radius to achieve its familiar shape but shares many other styles with other components for a cohesive look and feel. Similarly, `<wa-button>` defines many of its own styles but matches the height and border width of other form controls.
| Custom Property | Default Value |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| ------------------------------------------- | ------------------------------------- |
| `--wa-form-control-background-color` | `var(--wa-color-surface-default)` |
| `--wa-form-control-border-color` | `var(--wa-color-neutral-border-loud)` |
| `--wa-form-control-border-style` | `var(--wa-border-style)` |
@@ -26,13 +26,20 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
| `--wa-form-control-value-color` | `var(--wa-color-text-normal)` |
| `--wa-form-control-value-font-weight` | `var(--wa-font-weight-body)` |
| `--wa-form-control-value-line-height` | `var(--wa-line-height-condensed)` |
| `--wa-form-control-hint-color` | `var(--wa-color-text-quiet)` |
| `--wa-form-control-hint-font-weight` | `var(--wa-font-weight-body)` |
| `--wa-form-control-hint-line-height` | `var(--wa-line-height-normal)` |
| `--wa-form-control-placeholder-color` | `var(--wa-color-gray-60)` |
| `--wa-form-control-required-content` | `'*'` |
| `--wa-form-control-required-content-color` | `inherit` |
| `--wa-form-control-required-content-offset` | `-0.1em` |
| `--wa-form-control-padding-block` | `0.75em` |
| `--wa-form-control-padding-inline` | `1em` |
| `--wa-form-control-height` | `round(calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)), 1px)` |
| `--wa-form-control-toggle-size` | `round(1.25em, 1px)` |
```html {.example}
<form class="wa-block-spacing-l">
<form class="wa-stack">
<wa-input label="Input" placeholder="Placeholder"></wa-input>
<wa-select label="Select" value="option-1">
<wa-option value="option-1">Option 1</wa-option>
@@ -50,19 +57,6 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
<wa-slider label="Range"></wa-slider>
<wa-button>Button</wa-button>
</form>
<style>
.wa-block-spacing-l > * + *, wa-radio {
display: block;
margin-block-start: var(--wa-space-l);
}
wa-radio {
margin-block-start: var(--wa-space-2xs);
}
wa-radio, wa-checkbox, wa-switch, wa-button {
width: fit-content;
}
</style>
```
## Panels
@@ -76,7 +70,7 @@ Panels consist of components with larger, contained surface areas like [callout]
| `--wa-panel-border-radius` | `var(--wa-border-radius-l)` |
```html {.example}
<div class="wa-block-spacing-l">
<div class="wa-stack">
<wa-callout>
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
This is a simple callout with an icon.
@@ -86,13 +80,6 @@ Panels consist of components with larger, contained surface areas like [callout]
<code>wa-details</code>, at your service.
</wa-details>
</div>
<style>
.wa-block-spacing-l > * + * {
display: block;
margin-block-start: var(--wa-space-l);
}
</style>
```
## Tooltips

30
packages/webawesome/docs/docs/tokens/space.md
View File

@@ -35,21 +35,19 @@ description: Lock down consistent spacing Web Awesome's space properties.
Space properties are used intentionally throughout Web Awesome to create predictable rhythm and meaningful proximity. These properties use `rem` units in order to scale proportionately with the root font size.
Each space property uses a `calc()` function with `--wa-space-scale` to scale all spacing at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
You can use `--wa-space-scale` to increase or decrease all spacing at once. By default, this multiplier is `1`.
| Custom Property | Default Value | Preview |
| ---------------- | ------------------------------- | --------------------------------------------------------------------- |
| `--wa-space-3xs` | `0.125rem` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
| `--wa-space-2xs` | `0.25rem` <small>(4px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
| `--wa-space-xs` | `0.5rem` <small>(8px)</small> | <div class="spacing-example" style="width: var(--wa-space-xs)"></div> |
| `--wa-space-s` | `0.75rem` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div> |
| `--wa-space-m` | `1rem` <small>(16px)</small> | <div class="spacing-example" style="width: var(--wa-space-m)"></div> |
| `--wa-space-l` | `1.25rem` <small>(20px)</small> | <div class="spacing-example" style="width: var(--wa-space-l)"></div> |
| `--wa-space-xl` | `1.5rem` <small>(24px)</small> | <div class="spacing-example" style="width: var(--wa-space-xl)"></div> |
| `--wa-space-2xl` | `2rem` <small>(32px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
| `--wa-space-3xl` | `3rem` <small>(48px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.
When using space properties, it may be helpful to consider three distinct groups:
- Small-scale space (`3xs`, `2xs`, and `xs`) can be used for gaps between cooperating elements, such as a dropdown button and its menu, and padding within small components, such as badges and tooltips
- Normal space (`s`, `m`, and `l`) can be used for gaps between related elements with distinct touch targets and padding within typical interface elements, such as buttons and inputs
- Large-scale space (`xl`, `2xl`, and `3xl`) can be used for gaps between unrelated elements and padding within larger components, such as cards and dialogs
| Custom Property | Default Value | Preview - |
| ---------------- | ------------------------------------------------------------- | ---------------------------------------------------------------------- |
| `--wa-space-3xs` | `calc(var(--wa-space-scale) * 0.125rem)` <small>(2px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xs)"></div> |
| `--wa-space-2xs` | `calc(var(--wa-space-scale) * 0.25rem)` <small>(4px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xs)"></div> |
| `--wa-space-xs` | `calc(var(--wa-space-scale) * 0.5rem)` <small>(8px)</small> | <div class="spacing-example" style="width: var(--wa-space-xs)"></div> |
| `--wa-space-s` | `calc(var(--wa-space-scale) * 0.75rem)` <small>(12px)</small> | <div class="spacing-example" style="width: var(--wa-space-s)"></div> |
| `--wa-space-m` | `calc(var(--wa-space-scale) * 1rem)` <small>(16px)</small> | <div class="spacing-example" style="width: var(--wa-space-m)"></div> |
| `--wa-space-l` | `calc(var(--wa-space-scale) * 1.5rem)` <small>(24px)</small> | <div class="spacing-example" style="width: var(--wa-space-l)"></div> |
| `--wa-space-xl` | `calc(var(--wa-space-scale) * 2rem)` <small>(32px)</small> | <div class="spacing-example" style="width: var(--wa-space-xl)"></div> |
| `--wa-space-2xl` | `calc(var(--wa-space-scale) * 2.5rem)` <small>(40px)</small> | <div class="spacing-example" style="width: var(--wa-space-2xl)"></div> |
| `--wa-space-3xl` | `calc(var(--wa-space-scale) * 3rem)` <small>(48px)</small> | <div class="spacing-example" style="width: var(--wa-space-3xl)"></div> |
| `--wa-space-4xl` | `calc(var(--wa-space-scale) * 4rem)` <small>(64px)</small> | <div class="spacing-example" style="width: var(--wa-space-4xl)"></div> |

33
packages/webawesome/docs/docs/tokens/typography.md
View File

@@ -17,21 +17,32 @@ Font families are assigned specific roles &mdash; like heading or code &mdash; t
## Font Size
Font sizes use the Major Second type scale, rounded to the nearest whole pixel assuming a 16px root font size. To maximize variation in larger font sizes, every other step on the scale is skipped.
Font sizes use a ratio of 1.125 to scale sizes proportionally. Starting with the medium (`m`) font size, smaller sizes (`s` through `2xs`) are 1.125x smaller as the sizes decrease, and larger sizes (`l` through `4xl`) are _twice_ 1.125x larger as sizes increase — here, the ratio is doubled to maximize impact between sizes.
Each font size uses a `calc()` function with `--wa-font-size-scale` to scale all font sizes at once. By default, this multiplier is `1`. The table below lists the result of the calculation.
Each value uses `rem` units and is rounded to the nearest whole pixel when rendered with [`round()`](https://developer.mozilla.org/en-US/docs/Web/CSS/round).
You can use `--wa-font-size-scale` to increase or decrease all font sizes at once. By default, this multiplier is `1`.
The calculations for each size and the resulting pixel value (assuming a 16px root font size) are listed below.
| Custom Property | Default Value | Preview |
| -------------------- | --------------------------------- | ---------------------------------------------------------- |
| `--wa-font-size-2xs` | `0.6875rem` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
| `--wa-font-size-xs` | `0.75rem` <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
| `--wa-font-size-s` | `0.875rem` <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
| `--wa-font-size-m` | `1rem` <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
| `--wa-font-size-l` | `1.25rem` <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
| `--wa-font-size-xl` | `1.625rem` <small>(26px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
| `--wa-font-size-2xl` | `2rem` <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
| `--wa-font-size-3xl` | `2.5625rem` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
| `--wa-font-size-4xl` | `3.25rem` <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
| `--wa-font-size-2xs` | `round(calc(var(--wa-font-size-xs) / 1.125), 1px)` <small>(11px)</small> | <div style="font-size: var(--wa-font-size-2xs)">AaBb</div> |
| `--wa-font-size-xs` | `round(calc(var(--wa-font-size-s) / 1.125), 1px)` <small>(12px)</small> | <div style="font-size: var(--wa-font-size-xs)">AaBb</div> |
| `--wa-font-size-s` | `round(calc(var(--wa-font-size-m) / 1.125), 1px)` <small>(14px)</small> | <div style="font-size: var(--wa-font-size-s)">AaBb</div> |
| `--wa-font-size-m` | `calc(1rem * var(--wa-font-size-scale))` <small>(16px)</small> | <div style="font-size: var(--wa-font-size-m)">AaBb</div> |
| `--wa-font-size-l` | `round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px)` <small>(20px)</small> | <div style="font-size: var(--wa-font-size-l)">AaBb</div> |
| `--wa-font-size-xl` | `round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px)` <small>(25px)</small> | <div style="font-size: var(--wa-font-size-xl)">AaBb</div> |
| `--wa-font-size-2xl` | `round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px)` <small>(32px)</small> | <div style="font-size: var(--wa-font-size-2xl)">AaBb</div> |
| `--wa-font-size-3xl` | `round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px)` <small>(41px)</small> | <div style="font-size: var(--wa-font-size-3xl)">AaBb</div> |
| `--wa-font-size-4xl` | `round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125)` <small>(52px)</small> | <div style="font-size: var(--wa-font-size-4xl)">AaBb</div> |
You can also use these two custom properties make any font size proportionally smaller or larger to its parent.
| Custom Property | Default Value |
| ------------------------ | --------------------------------------- |
| `--wa-font-size-smaller` | `round(calc(1em / 1.125), 1px)` |
| `--wa-font-size-larger` | `round(calc(1em * 1.125 * 1.125), 1px)` |
## Font Weight

8
packages/webawesome/src/components/button/button.css
View File

@@ -36,9 +36,9 @@
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
padding: 0 var(--wa-space, var(--wa-space-m));
padding: 0 var(--wa-form-control-padding-inline);
font-family: inherit;
font-size: var(--wa-size, var(--wa-font-size-m));
font-size: inherit;
font-weight: var(--wa-font-weight-action);
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
height: var(--wa-form-control-height);
@@ -182,12 +182,12 @@ button ::slotted(wa-badge) {
*/
slot[name='prefix']::slotted(*) {
margin-inline-end: var(--wa-space);
margin-inline-end: var(--wa-form-control-padding-inline);
}
slot[name='suffix']::slotted(*),
.button:not(.visually-hidden-label) [part~='caret'] {
margin-inline-start: var(--wa-space);
margin-inline-start: var(--wa-form-control-padding-inline);
}
/*

6
packages/webawesome/src/components/card/card.css
View File

@@ -1,9 +1,5 @@
:host {
--space-s: var(--wa-space-l);
--space-m: var(--wa-space-xl);
--space-l: var(--wa-space-2xl);
--spacing: var(--wa-space);
--spacing: var(--wa-space-l);
--border-width: var(--wa-panel-border-width);
--outlined-background-color: var(--wa-color-surface-default);
--outlined-border-color: var(--wa-color-surface-border);

2
packages/webawesome/src/components/card/card.ts
View File

@@ -26,7 +26,7 @@ import styles from './card.css';
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders. Expects a single value.
* @cssproperty [--inner-border-color=var(--wa-color-surface-border)] - The color of the card's inner borders, e.g. those separating headers and footers from the main content. Expects a single value.
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
* @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
* @cssproperty [--spacing=var(--wa-space-l)] - The amount of space around and between sections of the card. Expects a single value.
*/
@customElement('wa-card')
export default class WaCard extends WebAwesomeElement {

6
packages/webawesome/src/components/checkbox/checkbox.css
View File

@@ -11,7 +11,8 @@
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--toggle-size: 1lh;
--checked-icon-scale: 0.8;
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
@@ -43,7 +44,7 @@
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
:host [part~='base'] {
@@ -86,6 +87,7 @@ input {
[part~='icon'] {
display: flex;
scale: var(--checked-icon-scale);
/* Without this, Safari renders the icon slightly to the left */
&::part(svg) {

5
packages/webawesome/src/components/color-picker/color-picker.css
View File

@@ -14,7 +14,7 @@
--slider-handle-size: calc(var(--slider-height) + 0.25rem);
--swatch-border-radius: var(--wa-border-radius-m);
--swatch-size: 1.5rem;
--trigger-border-radius: var(--wa-border-radius-circle);
--trigger-border-radius: var(--wa-form-control-border-radius);
}
.color-picker {
@@ -301,6 +301,7 @@
background-color: transparent;
border: none;
cursor: pointer;
font-size: inherit;
forced-color-adjust: none;
width: var(--wa-form-control-height);
height: var(--wa-form-control-height);
@@ -318,7 +319,7 @@
background-color: currentColor;
box-shadow:
inset 0 0 0 var(--border-width) var(--wa-form-control-border-color),
inset 0 0 0 calc(var(--border-width) * 2) var(--wa-color-surface-default);
inset 0 0 0 calc(var(--border-width) * 3) var(--wa-color-surface-default);
}
.trigger-empty:before {

2
packages/webawesome/src/components/copy-button/copy-button.css
View File

@@ -17,7 +17,7 @@
border-radius: var(--wa-border-radius-m);
color: inherit;
font-size: inherit;
padding: var(--wa-space-xs);
padding: 0.5em;
cursor: pointer;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
}

2
packages/webawesome/src/components/icon-button/icon-button.css
View File

@@ -17,7 +17,7 @@
border-radius: var(--wa-border-radius-m);
font-size: inherit;
color: inherit;
padding: var(--wa-space-xs);
padding: 0.5em;
cursor: pointer;
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
-webkit-appearance: none;

8
packages/webawesome/src/components/input/input.css
View File

@@ -22,7 +22,7 @@
border-width: var(--border-width);
cursor: text;
color: var(--wa-form-control-value-color);
font-size: var(--wa-size);
font-size: var(--wa-form-control-value-font-size);
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
@@ -35,7 +35,7 @@
transition-timing-function: var(--wa-transition-easing);
background-color: var(--background-color, var(--wa-form-control-background-color));
box-shadow: var(--box-shadow);
padding: var(--wa-space-smaller) var(--wa-space);
padding: 0 var(--wa-form-control-padding-inline);
&:focus-within {
outline: var(--wa-focus-ring);
@@ -142,11 +142,11 @@ textarea {
}
.prefix::slotted(*) {
margin-inline-end: var(--wa-space);
margin-inline-end: var(--wa-form-control-padding-inline);
}
.suffix::slotted(*) {
margin-inline-start: var(--wa-space);
margin-inline-start: var(--wa-form-control-padding-inline);
}
/*

16
packages/webawesome/src/components/menu-item/menu-item.css
View File

@@ -9,7 +9,7 @@
display: flex;
align-items: stretch;
font: inherit;
padding: var(--wa-space-xs) var(--wa-space-2xs);
padding: 0.5em 0.25em;
line-height: var(--wa-line-height-condensed);
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
user-select: none;
@@ -39,11 +39,11 @@
:host([loading]) wa-spinner {
--indicator-color: currentColor;
--track-width: 0.0625rem;
--track-width: round(0.0625em, 1px);
position: absolute;
font-size: 0.8em;
font-size: var(--wa-font-size-smaller);
top: calc(50% - 0.5em);
left: 0.5rem;
left: 0.6em;
opacity: 1;
}
@@ -61,7 +61,7 @@
}
.prefix::slotted(*) {
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
.suffix {
@@ -71,7 +71,7 @@
}
.suffix::slotted(*) {
margin-inline-start: var(--wa-space-xs);
margin-inline-start: 0.5em;
}
/* Safe triangle */
@@ -114,8 +114,8 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
width: var(--wa-space-xl);
font-size: var(--wa-font-size-smaller);
width: 2em;
visibility: hidden;
}

4
packages/webawesome/src/components/menu-label/menu-label.css
View File

@@ -1,9 +1,9 @@
:host {
display: block;
color: var(--wa-color-text-quiet);
font-size: var(--wa-font-size-s);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-semibold);
padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl));
padding: 0.5em 2.25em;
-webkit-user-select: none;
user-select: none;
}

4
packages/webawesome/src/components/menu/menu.css
View File

@@ -5,11 +5,11 @@
background-color: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-border-radius-m);
padding: var(--wa-space-xs) 0;
padding: 0.5em 0;
overflow: auto;
overscroll-behavior: none;
}
::slotted(wa-divider) {
--spacing: var(--wa-space-xs);
--spacing: 0.5em;
}

10
packages/webawesome/src/components/option/option.css
View File

@@ -13,7 +13,7 @@
display: flex;
align-items: center;
font: inherit;
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
padding: 0.5em 1em 0.5em 0.25em;
line-height: var(--wa-line-height-condensed);
transition: fill var(--wa-transition-normal) var(--wa-transition-easing);
cursor: pointer;
@@ -51,9 +51,9 @@
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875em;
font-size: var(--wa-font-size-smaller);
visibility: hidden;
width: var(--wa-space-xl);
width: 2em;
}
:host(:state(selected)) .check {
@@ -68,11 +68,11 @@
}
.prefix::slotted(*) {
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
.suffix::slotted(*) {
margin-inline-start: var(--wa-space-xs);
margin-inline-start: 0.5em;
}
@media (forced-colors: active) {

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

@@ -79,7 +79,7 @@
flex-direction: column;
width: max-content;
max-width: var(--max-width);
padding: var(--wa-space);
padding: var(--wa-space-l);
background-color: var(--wa-color-surface-default);
border: var(--wa-panel-border-width) solid var(--wa-color-surface-border);
border-radius: var(--wa-panel-border-radius);

6
packages/webawesome/src/components/radio-group/radio-group.css
View File

@@ -26,18 +26,18 @@
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: var(--wa-space-s);
gap: 0.75em;
}
/* Horizontal */
:host([orientation='horizontal']) [part~='form-control-input'] {
flex-direction: row;
gap: var(--wa-space-m);
gap: 1em;
}
/* Help text */
[part~='hint'] {
margin-block-start: var(--wa-space-xs);
margin-block-start: 0.5em;
}
/* Radios have the "button" appearance */

12
packages/webawesome/src/components/radio-group/radio-group.test.ts
View File

@@ -2,7 +2,7 @@ import { aTimeout, expect, oneEvent } from '@open-wc/testing';
import { sendKeys } from '@web/test-runner-commands';
import { html } from 'lit';
import sinon from 'sinon';
import { clickOnElement } from '../../internal/test.js';
// import { clickOnElement } from '../../internal/test.js';
import { fixtures } from '../../internal/test/fixture.js';
import { runFormControlBaseTests } from '../../internal/test/form-control-base-tests.js';
import type WaRadio from '../radio/radio.js';
@@ -106,8 +106,11 @@ describe('<wa-radio-group>', () => {
expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
expect(radioGroup.hasCustomState('user-valid')).to.be.false;
await clickOnElement(secondRadio);
// TODO: Go back to clickOnElement when we can determine why CI is not cleaning up elements.
// await clickOnElement(secondRadio);
secondRadio.click()
await secondRadio.updateComplete;
await radioGroup.updateComplete
expect(radioGroup.checkValidity()).to.be.true;
expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
@@ -130,7 +133,10 @@ describe('<wa-radio-group>', () => {
expect(radioGroup.hasCustomState('user-invalid')).to.be.false;
expect(radioGroup.hasCustomState('user-valid')).to.be.false;
await clickOnElement(secondRadio);
// TODO: Go back to clickOnElement when we can determine why CI is not cleaning up elements.
// await clickOnElement(secondRadio);
secondRadio.click()
await radioGroup.updateComplete;
radioGroup.value = '';
await radioGroup.updateComplete;

10
packages/webawesome/src/components/radio/radio.css
View File

@@ -7,8 +7,8 @@
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.75;
--toggle-size: round(1lh, 1px);
--checked-icon-scale: 0.7;
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
@@ -36,7 +36,7 @@
}
[part~='hint'] {
margin-block-start: var(--wa-space-3xs);
margin-block-start: 0.5em;
}
/* Default appearance */
@@ -63,7 +63,7 @@
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
.checked-icon {
@@ -101,7 +101,7 @@
background-color: var(--wa-color-surface-default);
border: var(--border-width) var(--border-style) var(--wa-form-control-border-color);
border-radius: var(--wa-border-radius-m);
padding: 0 var(--wa-space);
padding: 0 var(--wa-form-control-padding-inline);
transition:
background-color var(--wa-transition-fast),
border-color var(--wa-transition-fast);

8
packages/webawesome/src/components/rating/rating.css
View File

@@ -1,13 +1,7 @@
:host {
--size-xs: var(--wa-space-s);
--size-s: var(--wa-space-m);
--size-m: var(--wa-space-l);
--size-l: var(--wa-space-xl);
--symbol-color: var(--wa-color-neutral-on-quiet);
--symbol-color-active: var(--wa-color-yellow-70);
--symbol-size: var(--wa-size);
--symbol-spacing: var(--wa-space-3xs);
--symbol-spacing: 0.125em;
display: inline-flex;
}

97
packages/webawesome/src/components/select/select.css
View File

@@ -6,32 +6,7 @@ label:has(select),
--outlined-text-color: var(--wa-form-control-value-color);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
}
:host [part~='combobox'] {
background-color: var(--background-color, var(--wa-form-control-background-color));
border-color: var(--border-color, var(--wa-form-control-border-color));
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
cursor: pointer;
font-family: inherit;
font-size: var(--wa-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
min-width: 0;
overflow: hidden;
padding: var(--wa-space-smaller) var(--wa-space);
position: relative;
vertical-align: middle;
width: 100%;
transition:
background-color var(--wa-transition-normal),
border var(--wa-transition-normal),
outline var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
--tag-max-size: 10ch;
}
/* Add ellipses to multi select options */
@@ -40,7 +15,7 @@ label:has(select),
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 7ch;
max-width: var(--tag-max-size);
}
:host .disabled [part~='combobox'] {
@@ -86,21 +61,31 @@ label:has(select),
min-height: var(--wa-form-control-height);
:host([size='small']) & {
&:not(.placeholder-visible *) {
padding-block: 2px;
}
}
background-color: var(--background-color, var(--wa-form-control-background-color));
border-color: var(--border-color, var(--wa-form-control-border-color));
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-form-control-border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
color: var(--wa-form-control-value-color);
cursor: pointer;
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
overflow: hidden;
padding: 0 var(--wa-form-control-padding-inline);
position: relative;
vertical-align: middle;
width: 100%;
transition:
background-color var(--wa-transition-normal),
border var(--wa-transition-normal),
outline var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
:host([size='large']) & {
&:not(.placeholder-visible *) {
padding-block: 4px;
}
}
:host([multiple]) .select:not(.placeholder-visible) {
:host([multiple]) .select:not(.placeholder-visible) & {
padding-inline-start: 0;
padding-block: 3px;
padding-block: calc(var(--wa-form-control-height) * 0.1 - var(--wa-form-control-border-width));
}
/* Pills */
@@ -160,16 +145,8 @@ label:has(select),
flex: 1;
align-items: center;
flex-wrap: wrap;
margin-inline-start: var(--wa-space-2xs);
gap: 3px;
:host([size='small']) & {
gap: 2px;
}
:host([size='large']) & {
gap: 4px;
}
margin-inline-start: 0.25em;
gap: 0.25em;
&::slotted(wa-tag) {
cursor: pointer !important;
@@ -192,15 +169,15 @@ label:has(select),
}
.suffix::slotted(*) {
margin-inline-start: var(--wa-space-s);
margin-inline-start: var(--wa-form-control-padding-inline);
}
.prefix::slotted(*) {
margin-inline-end: var(--wa-space);
margin-inline-end: var(--wa-form-control-padding-inline);
}
:host([multiple]) .prefix::slotted(*) {
margin-inline: var(--wa-space);
margin-inline: var(--wa-form-control-padding-inline);
}
/* Clear button */
@@ -215,7 +192,7 @@ label:has(select),
padding: 0;
transition: color var(--wa-transition-normal);
cursor: pointer;
margin-inline-start: var(--wa-space);
margin-inline-start: var(--wa-form-control-padding-inline);
&:focus {
outline: none;
@@ -238,7 +215,7 @@ label:has(select),
color: var(--wa-color-neutral-on-quiet);
transition: rotate var(--wa-transition-slow) ease;
rotate: 0deg;
margin-inline-start: var(--wa-space-s);
margin-inline-start: var(--wa-form-control-padding-inline);
.open & {
rotate: -180deg;
@@ -256,7 +233,7 @@ label:has(select),
border-radius: var(--wa-border-radius-m);
border-style: var(--wa-border-style);
border-width: var(--border-width);
padding-block: var(--wa-space-xs);
padding-block: 0.5em;
padding-inline: 0;
overflow: auto;
overscroll-behavior: none;
@@ -266,15 +243,15 @@ label:has(select),
max-height: var(--auto-size-available-height);
&::slotted(wa-divider) {
--spacing: var(--wa-space-xs);
--spacing: 0.5em;
}
}
slot:not([name])::slotted(small) {
display: block;
font-size: var(--wa-font-size-s);
font-size: var(--wa-font-size-smaller);
font-weight: var(--wa-font-weight-semibold);
color: var(--wa-color-text-quiet);
padding-block: var(--wa-space-xs);
padding-inline: var(--wa-space-xl);
padding-block: 0.5em;
padding-inline: 2.25em;
}

1
packages/webawesome/src/components/select/select.ts
View File

@@ -79,6 +79,7 @@ import styles from './select.css';
* @cssproperty --border-color - The border color of the select's combobox.
* @cssproperty --border-width - The width of the select's borders, including the listbox.
* @cssproperty --box-shadow - The shadow effects around the edges of the select's combobox.
* @cssproperty [--tag-max-size=10ch] - When using `multiple`, the max size of tags before their content is truncated.
*
* @cssstate blank - The select is empty.
*/

5
packages/webawesome/src/components/slider/slider.css
View File

@@ -2,7 +2,7 @@
--thumb-color: var(--wa-form-control-activated-color);
--thumb-gap: calc(var(--thumb-size) * 0.125);
--thumb-shadow: initial;
--thumb-size: calc(1rem * var(--wa-form-control-value-line-height));
--thumb-size: calc(1em * var(--wa-form-control-value-line-height));
--track-color-active: var(--wa-color-neutral-fill-normal);
--track-color-inactive: var(--wa-color-neutral-fill-normal);
@@ -22,6 +22,7 @@ input[type='range'] {
border-radius: calc(var(--track-height) / 2);
width: 100%;
height: var(--track-height);
font-size: inherit;
line-height: var(--wa-form-control-height);
vertical-align: middle;
margin: 0;
@@ -152,7 +153,7 @@ input[type='range']:focus {
line-height: var(--wa-tooltip-line-height);
color: var(--wa-tooltip-content-color);
opacity: 0;
padding: var(--wa-space-2xs) var(--wa-space-xs);
padding: 0.25em 0.5em;
transition: var(--wa-transition-normal) opacity;
pointer-events: none;

3
packages/webawesome/src/components/switch/switch.css
View File

@@ -6,7 +6,7 @@
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
--height: calc(1em * var(--wa-form-control-value-line-height));
--height: var(--wa-form-control-toggle-size);
--thumb-color: var(--wa-form-control-border-color);
--thumb-color-checked: var(--wa-form-control-background-color);
--thumb-shadow: initial;
@@ -14,6 +14,7 @@
--width: calc(var(--height) * 1.75);
display: inline-flex;
line-height: var(--wa-form-control-value-line-height);
}
label {

12
packages/webawesome/src/components/tab-group/tab-group.css
View File

@@ -22,7 +22,7 @@
.tab-group-has-scroll-controls .nav-container {
position: relative;
padding: 0 var(--wa-space-xl);
padding: 0 1.5em;
}
.body {
@@ -37,7 +37,7 @@
position: absolute;
top: 0;
bottom: 0;
width: var(--wa-space-xl);
width: 1.5em;
}
.scroll-button-start {
@@ -96,7 +96,7 @@
}
.tab-group-top ::slotted(wa-tab-panel) {
--padding: var(--wa-space-m) 0;
--padding: var(--wa-space-xl) 0;
}
/*
@@ -147,7 +147,7 @@
}
.tab-group-bottom ::slotted(wa-tab-panel) {
--padding: var(--wa-space-m) 0;
--padding: var(--wa-space-xl) 0;
}
/*
@@ -184,7 +184,7 @@
}
.tab-group-start ::slotted(wa-tab-panel) {
--padding: 0 var(--wa-space-m);
--padding: 0 var(--wa-space-xl);
}
/*
@@ -221,5 +221,5 @@
}
.tab-group-end ::slotted(wa-tab-panel) {
--padding: 0 var(--wa-space-m);
--padding: 0 var(--wa-space-xl);
}

6
packages/webawesome/src/components/tab/tab.css
View File

@@ -9,7 +9,7 @@
display: inline-flex;
align-items: center;
font: inherit;
padding: var(--wa-space-m) var(--wa-space-l);
padding: 1em 1.5em;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
@@ -17,11 +17,11 @@
transition: color var(--wa-transition-fast) var(--wa-transition-easing);
::slotted(wa-icon:first-child) {
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
::slotted(wa-icon:last-child) {
margin-inline-start: var(--wa-space-xs);
margin-inline-start: 0.5em;
}
}

14
packages/webawesome/src/components/tag/tag.css
View File

@@ -1,10 +1,6 @@
:host {
--size-s: var(--wa-font-size-xs);
--size-m: var(--wa-font-size-s);
--size-l: var(--wa-font-size-m);
display: inline-flex;
gap: 0.33em;
gap: 0.5em;
border-radius: var(--wa-border-radius-m);
align-items: center;
background-color: var(--background-color, var(--wa-color-fill-quiet));
@@ -12,19 +8,23 @@
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--text-color, var(--wa-color-on-normal));
font-size: inherit;
line-height: 1;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
height: calc(var(--wa-form-control-height) * 0.8);
line-height: calc(var(--wa-form-control-height) - var(--wa-form-control-border-width) * 2);
padding: 0 var(--wa-space-smaller);
padding: 0 0.75em;
}
.content {
font-size: var(--wa-font-size-smaller);
}
[part='remove-button'] {
color: inherit;
padding: 0;
margin-inline-start: 0.75em;
}
[part='remove-button']::part(base) {

4
packages/webawesome/src/components/textarea/textarea.css
View File

@@ -38,8 +38,8 @@ textarea {
background: transparent;
font: inherit;
color: inherit;
padding: var(--wa-space-smaller) var(--wa-space);
min-height: calc(var(--wa-form-control-height) - var(--border-width) * 2 - (var(--wa-space-smaller) * 2));
padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
min-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
box-shadow: none;
margin: 0;

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

@@ -2,7 +2,7 @@
--background-color: var(--wa-tooltip-background-color);
--border-radius: var(--wa-tooltip-border-radius);
--max-width: 30ch;
--padding: var(--wa-space-2xs) var(--wa-space-xs);
--padding: 0.25em 0.5em;
/** These styles are added so we don't interfere in the DOM. */
display: inline-block;

10
packages/webawesome/src/styles/component/form-control.css
View File

@@ -9,7 +9,7 @@
color: var(--wa-form-control-label-color);
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
margin-block-end: var(--wa-space-xs);
margin-block-end: 0.5em;
:host([required]) &::after {
content: var(--wa-form-control-required-content);
@@ -21,9 +21,11 @@
/* Help text */
[part~='hint'] {
display: block;
color: var(--wa-color-text-quiet);
margin-block-start: var(--wa-space-xs);
font-size: var(--wa-size-smaller, 85%);
color: var(--wa-form-control-hint-color);
font-weight: var(--wa-form-control-hint-font-weight);
line-height: var(--wa-form-control-hint-line-height);
margin-block-start: 0.5em;
font-size: var(--wa-font-size-smaller);
line-height: var(--wa-form-control-label-line-height);
&:not(.has-slotted) {

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

@@ -435,7 +435,7 @@
& + :is(input:not([type='checkbox'], [type='radio']), textarea, select),
& > :is(input:not([type='checkbox'], [type='radio']), textarea, select) {
margin-block-start: var(--wa-space-xs);
margin-block-start: 0.5em;
}
}
@@ -500,11 +500,13 @@
--border-width: var(--wa-form-control-border-width);
--box-shadow: none;
--checked-icon-color: var(--wa-color-brand-on-loud);
--toggle-size: 1lh;
--checked-icon-scale: 0.8;
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
font-family: inherit;
font-size: var(--wa-form-control-value-font-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
user-select: none;
@@ -519,11 +521,12 @@
&:checked::after {
background-color: currentColor;
content: '';
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>')
center no-repeat;
position: absolute;
height: 100%;
width: 100%;
scale: var(--checked-icon-scale);
}
&:indeterminate::after {
@@ -558,7 +561,7 @@
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
/* Set cursor for input and labels */
@@ -600,7 +603,7 @@
--box-shadow: none;
--checked-icon-color: var(--wa-form-control-activated-color);
--checked-icon-scale: 0.75;
--toggle-size: round(1lh, 1px);
--toggle-size: var(--wa-form-control-toggle-size);
color: var(--wa-form-control-value-color);
display: inline-flex;
@@ -648,7 +651,7 @@
color var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
margin-inline-end: var(--wa-space-xs);
margin-inline-end: 0.5em;
}
/* Set cursor for input and labels */
@@ -699,14 +702,14 @@
color: var(--wa-form-control-value-color);
cursor: pointer;
font-family: inherit;
font-size: var(--wa-size);
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
min-width: 0;
overflow: hidden;
padding: var(--wa-space-smaller) var(--wa-space);
padding: 0 var(--wa-form-control-padding-inline);
position: relative;
vertical-align: middle;
min-height: var(--wa-form-control-height);
width: 100%;
transition:
background-color var(--wa-transition-normal),
@@ -734,10 +737,14 @@
background-image: var(--icon-caret), var(--icon-caret);
background-repeat: no-repeat;
background-position: center right var(--wa-space);
background-position: center right var(--wa-form-control-padding-inline);
background-blend-mode: hue, difference;
}
select.wa-pill {
border-radius: var(--wa-border-radius-pill) !important;
}
/* Buttons */
button,
input[type='button'],
@@ -758,7 +765,6 @@
--text-color-hover: var(--text-color);
--text-color-active: var(--text-color);
display: flex; /* Display flex with gap for icon spacing */
gap: 0.5em;
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
@@ -775,9 +781,8 @@
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
padding: 0 var(--wa-space, var(--wa-space-m));
padding: 0 var(--wa-form-control-padding-inline);
font-family: inherit;
font-size: var(--wa-size, var(--wa-font-size-m));
font-weight: var(--wa-font-weight-action);
height: var(--wa-form-control-height);
line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2);
@@ -877,11 +882,12 @@
border-style: var(--wa-form-control-border-style);
cursor: text;
color: var(--wa-form-control-value-color);
font-size: var(--wa-size);
font-size: var(--wa-form-control-value-size);
font-family: inherit;
font-weight: var(--wa-form-control-value-font-weight);
line-height: var(--wa-form-control-value-line-height);
vertical-align: middle;
height: var(--wa-form-control-height);
width: 100%;
transition:
background-color var(--wa-transition-normal),
@@ -892,7 +898,15 @@
background-color: var(--background-color, var(--wa-form-control-background-color));
border-width: var(--border-width, var(--wa-form-control-border-width));
box-shadow: var(--box-shadow, initial);
padding: var(--wa-space-smaller) var(--wa-space);
padding: 0 var(--wa-form-control-padding-inline);
/* Textareas only */
&:not(input) {
line-height: var(--wa-line-height-normal);
height: auto;
min-height: var(--wa-form-control-height);
padding: calc(var(--wa-form-control-padding-block) - ((1lh - 1em) / 2)) var(--wa-form-control-padding-inline); /* accounts for the larger line height of textarea content */
}
/* Style focused inputs */
&:focus-within {
@@ -962,13 +976,15 @@
/* Color picker */
input[type='color'] {
--border-width: var(--wa-form-control-border-width);
--trigger-border-radius: var(--wa-form-control-border-radius);
display: block;
border-radius: calc(infinity * 1px);
border-radius: var(--trigger-border-radius);
background: transparent;
padding: var(--wa-form-control-border-width);
width: calc(var(--wa-form-control-height) - 2px);
height: calc(var(--wa-form-control-height) - 2px);
border: var(--wa-form-control-border-width) var(--wa-border-style) var(--wa-form-control-border-color);
padding: calc(var(--border-width) * 2);
width: var(--wa-form-control-height);
height: var(--wa-form-control-height);
border: var(--border-width) var(--wa-border-style) var(--wa-form-control-border-color);
cursor: pointer;
forced-color-adjust: none;
@@ -979,12 +995,12 @@
&::-webkit-color-swatch {
border: none;
border-radius: inherit;
border-radius: calc(var(--trigger-border-radius) - var(--border-width) * 3);
}
&::-moz-color-swatch {
border: none;
border-radius: inherit;
border-radius: calc(var(--trigger-border-radius) - var(--border-width) * 3);
}
&:focus-visible {

2
packages/webawesome/src/styles/themes/active/dimension.css
View File

@@ -20,7 +20,7 @@
box-shadow:
var(--wa-theme-active-shadow-pop-out),
inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
padding-inline: calc(var(--wa-space) + var(--border-width));
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
}
&:not([disabled], [loading]):active {

8
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -16,11 +16,6 @@
.wa-dark,
.wa-light,
.wa-invert {
/**
* Spacing
*/
--wa-space-scale: 1.25;
/**
* Borders
*/
@@ -53,5 +48,8 @@
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-bold);
--wa-form-control-label-line-height: var(--wa-line-height-normal);
--wa-form-control-padding-block: 1em;
--wa-form-control-padding-inline: 1.25em;
}
}

6
packages/webawesome/src/styles/themes/awesome/dimension.css
View File

@@ -14,8 +14,7 @@
--background-color-active: var(--border-color-active);
--border-color-hover: var(--wa-color-shadow);
--border-color-active: var(--wa-color-shadow);
--box-shadow: var(--wa-shadow-offset-x-s) max(var(--wa-shadow-offset-y-s), var(--border-width)) 0 0
var(--wa-color-shadow);
--box-shadow: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) 0 0 var(--wa-color-shadow);
.wa-dark &,
.wa-invert & {
@@ -50,6 +49,7 @@
) {
&:where(:not(wa-button)),
&::part(base) {
height: calc(var(--wa-form-control-height) - var(--wa-shadow-offset-y-s));
margin-bottom: var(--wa-shadow-offset-y-s);
margin-right: var(--wa-shadow-offset-x-s);
}
@@ -57,7 +57,7 @@
&:where(:not(wa-button)),
&::part(base) {
box-shadow: none;
transform: translate(var(--wa-shadow-offset-x-s), max(var(--wa-shadow-offset-y-s), var(--border-width)));
transform: translate(var(--wa-shadow-offset-x-s), var(--wa-shadow-offset-y-s));
}
}
}

16
packages/webawesome/src/styles/themes/default/groups.css
View File

@@ -21,18 +21,30 @@
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-normal);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);

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

@@ -11,9 +11,9 @@
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.25rem); /* 20px */
--wa-space-xl: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--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 */
}

25
packages/webawesome/src/styles/themes/default/typography.css
View File

@@ -10,20 +10,23 @@
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* The default type scale is roughly based on the Major Second scale (x1.125),
* with each value rounded to the nearest whole pixel based on a 16px root font size.
* For larger font sizes, every other step on the scale is skipped in order to maximize variation.
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered.
* A multiplier is provided to uniformly increase or decrease all font sizes. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-scale)); /* 11px */
--wa-font-size-xs: calc(0.75rem * var(--wa-font-size-scale)); /* 12px */
--wa-font-size-s: calc(0.875rem * var(--wa-font-size-scale)); /* 14px */
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: calc(1.25rem * var(--wa-font-size-scale)); /* 20px */
--wa-font-size-xl: calc(1.625rem * var(--wa-font-size-scale)); /* 26px */
--wa-font-size-2xl: calc(2rem * var(--wa-font-size-scale)); /* 32px */
--wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-scale)); /* 41px */
--wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-scale)); /* 52px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;

2
packages/webawesome/src/styles/themes/glossy/dimension.css
View File

@@ -28,7 +28,7 @@
&::part(base) {
border-width: 0px;
margin-bottom: var(--wa-shadow-offset-y-s);
padding-inline: calc(var(--wa-space) + var(--border-width));
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
transition: all var(--wa-transition-fast);
}

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

@@ -24,7 +24,7 @@
&:not([appearance~='plain']) {
&:where(:not(wa-button)),
&::part(base) {
padding-inline: calc(var(--wa-space) * 1.5);
padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
}
}
@@ -128,12 +128,12 @@
pointer-events: none;
position: absolute;
left: calc(var(--wa-space) - 0.25em);
left: calc(var(--wa-form-control-padding-inline) - 0.25em);
z-index: 1;
/* State: out of the way by default */
top: -0.5lh;
font-size: var(--wa-size-smaller);
font-size: var(--wa-font-size-smaller);
background-color: var(--wa-form-control-background-color);
padding-inline: 0.25em;

2
packages/webawesome/src/styles/themes/playful/dimension.css
View File

@@ -52,7 +52,7 @@
&:not([appearance~='outlined']) {
&:where(:not(wa-button)),
&::part(base) {
padding-inline: calc(var(--wa-space) + var(--border-width));
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
border-width: 0px;
}
}

3
packages/webawesome/src/styles/themes/premium.css
View File

@@ -30,6 +30,7 @@
*/
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
--wa-form-control-background-color: transparent;
--wa-form-control-value-line-height: var(--wa-line-height-normal);
--wa-form-control-toggle-size: round(1.5em, 1px);
}
}

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

@@ -6,15 +6,15 @@
--symbol-color-active: var(--wa-color-text-quiet);
}
wa-button::part(base),
wa-button::part(label),
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-size-smaller);
font-size: var(--wa-font-size-smaller);
text-transform: uppercase;
}
wa-callout {
font-size: var(--wa-size-smaller);
font-size: var(--wa-font-size-smaller);
}
input[type='checkbox'],

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

@@ -7,11 +7,11 @@
--text-color: var(--wa-color-neutral-on-loud);
}
wa-button::part(base),
wa-button::part(label),
wa-radio[appearance='button'],
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-size-smaller);
font-size: var(--wa-font-size-smaller);
}
wa-radio[appearance='button'] {
@@ -29,7 +29,7 @@
wa-callout {
--spacing: var(--wa-space-l);
font-size: var(--wa-size-smaller);
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)

82
packages/webawesome/src/styles/utilities/size.css
View File

@@ -1,92 +1,16 @@
@layer wa-utilities {
/**
* Shadow styles for elements that have a size attribute and for the size utility classes.
*/
:host,
:where(.wa-size-s, .wa-size-m, .wa-size-l) {
font-size: var(--wa-size, var(--wa-font-size-m));
}
:host {
/* Components are meant to override these */
--size-xs: var(--wa-font-size-xs);
--size-s: var(--wa-font-size-s);
--size-m: var(--wa-font-size-m);
--size-l: var(--wa-font-size-l);
--space-xs: var(--wa-space-xs);
--space-s: var(--wa-space-s);
--space-m: var(--wa-space-m);
--space-l: var(--wa-space-l);
}
:where(:root),
:host,
.wa-size-s,
.wa-size-m,
.wa-size-l {
--_wa-is-small: var(--wa-is-small, 0);
--_wa-is-medium: var(--wa-is-medium, 1);
--_wa-is-large: var(--wa-is-large, 0);
--_size-xs: var(--size-xs, var(--wa-font-size-xs));
--_size-s: var(--size-s, var(--wa-font-size-s));
--_size-m: var(--size-m, var(--wa-font-size-m));
--_size-l: var(--size-l, var(--wa-font-size-l));
--_space-xs: var(--space-xs, var(--wa-space-xs));
--_space-s: var(--space-s, var(--wa-space-s));
--_space-m: var(--space-m, var(--wa-space-m));
--_space-l: var(--space-l, var(--wa-space-l));
--wa-size: calc(
var(--_wa-is-small) * var(--_size-s) + var(--_wa-is-medium) * var(--_size-m) + var(--_wa-is-large) *
var(--_size-l)
);
--wa-size-smaller: calc(
var(--_wa-is-small) * var(--_size-xs) + var(--_wa-is-medium) * var(--_size-s) + var(--_wa-is-large) *
var(--_size-m)
);
--wa-space: calc(
var(--_wa-is-small) * var(--_space-s) + var(--_wa-is-medium) * var(--_space-m) + var(--_wa-is-large) *
var(--_space-l)
);
--wa-space-smaller: calc(
var(--_wa-is-small) * var(--_space-xs) + var(--_wa-is-medium) * var(--_space-s) + var(--_wa-is-large) *
var(--_space-m)
);
--_wa-form-control-height: calc(2 * var(--wa-space-smaller) + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height: var(--_wa-form-control-height);
@supports (height: round(1.2px, 1px)) {
--wa-form-control-height: round(var(--_wa-form-control-height), 1px);
}
}
:host([size]),
.wa-size-s,
.wa-size-m,
.wa-size-l {
--wa-is-small: 0;
--wa-is-medium: 0;
--wa-is-large: 0;
}
:host([size='small']),
.wa-size-s {
--wa-is-small: 1;
font-size: var(--wa-font-size-s);
}
:where(:root), /* Medium size is the default */
:host([size='medium']),
.wa-size-m {
--wa-is-medium: 1;
font-size: var(--wa-font-size-m);
}
:host([size='large']),
.wa-size-l {
--wa-is-large: 1;
font-size: var(--wa-font-size-l);
}
}