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

Merge branch 'next' into konnorrogers/remove-unnecessary-plugin

Browse Source
This commit is contained in:
Cory LaViska
2024-12-17 12:13:02 -05:00
committed by GitHub
parent 725fb1f013 1bf83499b0
commit ce65a49dbe
73 changed files with 2460 additions and 2197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
cspell.json
View File

@@ -39,6 +39,7 @@
"crutchcorn",
"csspart",
"cssproperty",
"cssstate",
"datetime",
"describedby",
"Docsify",
@@ -46,6 +47,7 @@
"dropdowns",
"easings",
"ecommerce",
"endfor",
"endraw",
"endregion",
"enterkeyhint",
@@ -160,11 +162,13 @@
"tabler",
"tablist",
"tabpanel",
"tbody",
"templating",
"tera",
"testid",
"textareas",
"textfield",
"thead",
"Themer",
"tinycolor",
"transitionend",

18
docs/.eleventy.js
View File

@@ -1,4 +1,3 @@
import { parse } from 'path';
import { anchorHeadingsPlugin } from './_utils/anchor-headings.js';
import { codeExamplesPlugin } from './_utils/code-examples.js';
import { copyCodePlugin } from './_utils/copy-code.js';
@@ -10,6 +9,7 @@ import { removeDataAlphaElements } from './_utils/remove-data-alpha-elements.js'
import litPlugin from '@lit-labs/eleventy-plugin-lit';
import { readFile } from 'fs/promises';
import componentList from './_data/componentList.js';
import * as filters from './_utils/filters.js';
import { outlinePlugin } from './_utils/outline.js';
import { replaceTextPlugin } from './_utils/replace-text.js';
import { searchPlugin } from './_utils/search.js';
@@ -38,18 +38,10 @@ export default function (eleventyConfig) {
// Template filters - {{ content | filter }}
eleventyConfig.addFilter('inlineMarkdown', content => markdown.renderInline(content || ''));
eleventyConfig.addFilter('markdown', content => markdown.render(content || ''));
eleventyConfig.addFilter('stripExtension', string => parse(string).name);
eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
eleventyConfig.addFilter('trimPipes', content => {
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
});
eleventyConfig.addFilter('keys', obj => Object.keys(obj));
eleventyConfig.addFilter('log', (firstArg, ...rest) => {
console.log(firstArg, ...rest);
return firstArg;
});
for (let name in filters) {
eleventyConfig.addFilter(name, filters[name]);
}
eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
key = key.split('.');

2
docs/_includes/base.njk
View File

@@ -98,7 +98,7 @@
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
</a>
<small id="version-number" class="only-desktop">{{ package.version }}</small>
<wa-badge variant="warning" class="only-desktop">Alpha</wa-badge>
<wa-badge variant="warning" appearance="tinted" class="only-desktop">Alpha</wa-badge>
</div>
<div id="docs-toolbar">

24
docs/_utils/filters.js Normal file
View File

@@ -0,0 +1,24 @@
import { parse } from 'path';
export function stripExtension(string) {
return parse(string).name;
}
export function stripPrefix(content) {
return content.replace(/^wa-/, '');
}
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
export function trimPipes(content) {
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
}
export function keys(obj) {
return Object.keys(obj);
}
export function log(firstArg, ...rest) {
console.log(firstArg, ...rest);
return firstArg;
}

4
docs/assets/styles/docs.css
View File

@@ -46,7 +46,7 @@ wa-page > header {
}
wa-button[data-toggle-nav] {
--label-color: currentColor;
--text-color: currentColor;
font-size: 1rem;
margin-inline-start: -0.875rem;
margin-inline-end: 0;
@@ -76,8 +76,6 @@ wa-page > header {
margin-block-start: var(--wa-space-2xs);
}
#version-number + wa-badge {
--background-color: var(--wa-color-warning-fill-quiet);
--content-color: var(--wa-color-warning-on-quiet);
font-size: var(--wa-font-size-2xs);
text-transform: uppercase;
}

2
docs/assets/styles/theme-headers.css
View File

@@ -23,7 +23,7 @@
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
.project-header {

2
docs/docs/components/avatar.md
View File

@@ -97,7 +97,7 @@ You can group avatars with a few lines of CSS.
margin-left: calc(-1 * var(--wa-space-m));
}
.avatar-group wa-avatar::part(base) {
.avatar-group wa-avatar {
border: solid 2px var(--wa-color-surface-default);
}
</style>

42
docs/docs/components/badge.md
View File

@@ -22,6 +22,48 @@ Set the `variant` attribute to change the badge's variant.
<wa-badge variant="danger">Danger</wa-badge>
```
### Appearance
Use the `appearance` attribute to change the badge's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="neutral">F+O</wa-badge>
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="neutral">T+O</wa-badge>
<wa-badge appearance="tinted" variant="neutral">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="brand">F+O</wa-badge>
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="brand">T+O</wa-badge>
<wa-badge appearance="tinted" variant="brand">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="success">F+O</wa-badge>
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="success">T+O</wa-badge>
<wa-badge appearance="tinted" variant="success">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="filled outlined" variant="warning">F+O</wa-badge>
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="warning">T+O</wa-badge>
<wa-badge appearance="tinted" variant="warning">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
<wa-badge appearance="filled outlined" variant="danger">F+O</wa-badge>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="tinted outlined" variant="danger">T+O</wa-badge>
<wa-badge appearance="tinted" variant="danger">Tinted</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>
```
### Pill Badges
Use the `pill` attribute to give badges rounded edges.

2
docs/docs/components/button.md
View File

@@ -91,7 +91,7 @@ It's often helpful to have a button that works like a link. This is possible by
### Setting a Custom Width
As expected, buttons can be given a custom width by setting the `width` attribute. This is useful for making buttons span the full width of their container on smaller screens.
As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
```html {.example}
<wa-button size="small" style="width: 100%; margin-bottom: 1rem;">Small</wa-button>

2
docs/docs/components/input.md
View File

@@ -157,7 +157,7 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
text-align: right;
}
.label-on-left::part(form-control-hint) {
.label-on-left::part(hint) {
grid-column-start: 2;
}
</style>

123
docs/docs/essentials/button.md Normal file
View File

@@ -0,0 +1,123 @@
---
title: Button
---
```html {.example}
<button>Button</button>
```
## Examples
### Variants
Use the variant utility classes to set the button's semantic variant.
```html {.example}
<button class="wa-neutral">Neutral</button>
<button class="wa-brand">Brand</button>
<button class="wa-success">Success</button>
<button class="wa-warning">Warning</button>
<button class="wa-danger">Danger</button>
```
### Appearance
Use the appearance utility classes to change the button's visual appearance:
```html {.example}
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-neutral">Filled</button>
<button class="wa-tinted wa-neutral">Tinted</button>
<button class="wa-outlined wa-neutral">Outlined</button>
<button class="wa-text wa-neutral">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-brand">Filled</button>
<button class="wa-tinted wa-brand">Tinted</button>
<button class="wa-outlined wa-brand">Outlined</button>
<button class="wa-text wa-brand">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-success">Filled</button>
<button class="wa-tinted wa-success">Tinted</button>
<button class="wa-outlined wa-success">Outlined</button>
<button class="wa-text wa-success">Text</button>
</div>
<div style="margin-block-end: 1rem;">
<button class="wa-filled wa-warning">Filled</button>
<button class="wa-tinted wa-warning">Tinted</button>
<button class="wa-outlined wa-warning">Outlined</button>
<button class="wa-text wa-warning">Text</button>
</div>
<div>
<button class="wa-filled wa-danger">Filled</button>
<button class="wa-tinted wa-danger">Tinted</button>
<button class="wa-outlined wa-danger">Outlined</button>
<button class="wa-text wa-danger">Text</button>
</div>
```
### Sizes
Use `wa-size-*` classes to change a button's size.
```html {.example}
<button class="wa-size-s">Small</button>
<button class="wa-size-m">Medium</button>
<button class="wa-size-l">Large</button>
```
### Pill Buttons
Use the `wa-pill` class to give buttons rounded edges.
```html {.example}
<button class="wa-size-s wa-pill">Small</button>
<button class="wa-size-m wa-pill">Medium</button>
<button class="wa-size-l wa-pill">Large</button>
```
### Link Buttons
It's often helpful to have a link that looks like a button.
This is possible by adding a `wa-button` class to your link.
```html {.example}
<a href="https://example.com/" class="wa-button">Link</a>
<a href="https://example.com/" target="_blank" class="wa-button">New Window</a>
<a href="/assets/images/logo.svg" download="shoelace.svg" class="wa-button">Download</a>
```
### Setting a Custom Width
As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens.
```html {.example}
<button class="wa-size-s" style="width: 100%; margin-bottom: 1rem;">Small</button>
<button class="wa-size-m" style="width: 100%; margin-bottom: 1rem;">Medium</button>
<button class="wa-size-l" style="width: 100%;">Large</button>
```
<!--
### Loading
Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
```html {.example}
<button class="wa-brand" loading>Brand</button>
<button class="wa-success" loading>Success</button>
<button class="wa-neutral" loading>Neutral</button>
<button class="wa-warning" loading>Warning</button>
<button class="wa-danger" loading>Danger</button>
```
### Disabled
Use the `disabled` attribute to disable a button.
```html {.example}
<button class="wa-brand" disabled>Brand</button>
<button class="wa-success" disabled>Success</button>
<button class="wa-neutral" disabled>Neutral</button>
<button class="wa-warning" disabled>Warning</button>
``` -->

3
docs/docs/essentials/essentials.json Normal file
View File

@@ -0,0 +1,3 @@
{
"layout": "docs.njk"
}

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

@@ -22,9 +22,9 @@ The styles shown below can be all yours by adding Web Awesome's applied styleshe
<wa-button>WA Button</wa-button>
<label for="input-text">Input (text)</label>
<input type="text" id="input-text"></input>
<input type="text" id="input-text" placeholder="placeholder"></input>
<wa-input label="WA Input (text)" type="text"></wa-input>
<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>
<label for="input-number">Input (number)</label>
<input type="number" id="input-number"></input>
@@ -32,9 +32,34 @@ The styles shown below can be all yours by adding Web Awesome's applied styleshe
<wa-input label="WA Input (number)" type="number"></wa-input>
<label for="input-password">Input (password)</label>
<input type="password" id="input-password"></input>
<input type="password" id="input-password" required></input>
<wa-input label="WA Input (password)" type="password"></wa-input>
<wa-input label="WA Input (password)" type="password" required></wa-input>
<label for="input-datetime-local">Input (datetime-local)</label>
<input type="datetime-local" id="input-datetime-local"></input>
<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>
<label for="input-email">Input (email)</label>
<input type="email" id="input-email"></input>
<wa-input label="WA Input (email)" type="email"></wa-input>
<label for="input-search">Input (search)</label>
<input type="search" id="input-search"></input>
<wa-input label="WA Input (search)" type="search"></wa-input>
<label for="input-tel">Input (tel)</label>
<input type="tel" id="input-tel"></input>
<wa-input label="WA Input (tel)" type="tel"></wa-input>
<label for="input-url">Input (url)</label>
<input type="url" id="input-url"></input>
<wa-input label="WA Input (url)" type="url"></wa-input>
<input type="checkbox" id="input-checkbox"></input>
<label for="input-checkbox">Input (checkbox)</label>

12
docs/docs/experimental/themer.md
View File

@@ -170,13 +170,13 @@ hasOutline: false
--wa-form-control-placeholder-color: color-mix(in oklab, var(--wa-color-text-normal), transparent);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height)
);
--wa-form-control-required-content: '*';
@@ -429,9 +429,9 @@ hasOutline: false
#icon-chooser-trigger {
--button-group-separator-border: none;
--label-color: var(--wa-color-neutral-on-quiet);
--label-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
--label-color-active: var(--label-color-hover);
--text-color: var(--wa-color-neutral-on-quiet);
--text-color-hover: color-mix(in oklab, var(--wa-color-neutral-on-quiet), var(--wa-color-mix-hover));
--text-color-active: var(--text-color-hover);
}
#icon-chooser::part(dialog) {

6
docs/docs/resources/contributing.md
View File

@@ -23,12 +23,6 @@ A common misconception about contributing to an open source project is that you
Please take a moment to review these guidelines to make the contribution process as easy as possible for both yourself and the project's maintainers.
## AI-generated Code
As an open source maintainer, I respectfully ask that you refrain from using AI-generated code when contributing to this project. This includes code generated by tools such as GitHub Copilot, even if you make alterations to it afterwards. While some of Copilot's features are indeed convenient, the ethics surrounding which codebases the AI has been trained on and their corresponding software licenses remain very questionable and have yet to be tested in a legal context.
I realize that one cannot reasonably enforce this any more than one can enforce not copying licensed code from other codebases, nor do I wish to expend energy policing contributors. I would, however, like to avoid all ethical and legal challenges that result from using AI-generated code. As such, I respectfully ask that you refrain from using such tools when contributing to this project. At this time, I will not knowingly accept any code that has been generated in such a manner.
## Using the Issue Tracker
The [issue tracker](https://github.com/shoelace-style/webawesome-alpha/issues) is for bug reports, feature requests, and pull requests.

8
docs/docs/theming/component-groups.md
View File

@@ -27,9 +27,9 @@ Not every form control uses all of these custom properties. For example, `<wa-ra
| `--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-height-s` | `calc(var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-s` | `calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-m` | `calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-height-l` | `calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height))` |
| `--wa-form-control-required-content` | `'*'` |
| `--wa-form-control-required-content-color` | `inherit` |
| `--wa-form-control-required-content-offset` | `-0.1em` |
@@ -114,4 +114,4 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon
```html {.example}
<wa-icon-button id="bullseye-example" label="Button" name="bullseye"></wa-icon-button>
<wa-tooltip for="bullseye-example" open trigger="manual">This is a tooltip</wa-tooltip>
```
```

9
docs/index.md
View File

@@ -86,13 +86,13 @@ layout: page
flex: 1 1 67%;
}
& wa-button {
--wa-form-control-height-s: 2.5rem;
--border-color: black;
--border-width: 0.125rem;
--box-shadow: 0 0.25rem 0 0 var(--border-color);
box-shadow: 0 0.25rem 0 0 var(--border-color);
flex: 1 1 auto;
height: 2.5rem;
&:active:not([disabled]) {
--box-shadow: 0 0 0 0 transparent;
box-shadow: 0 0 0 0 transparent;
transform: translateY(0.25rem);
}
}
@@ -190,8 +190,7 @@ layout: page
gap: 0.5rem;
}
& wa-button {
--wa-form-control-height-m: 1.5rem;
display: inline-flex;
height: 1.5rem;
font-size: 0.75rem;
}
}

2026
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

57
package.json
View File

@@ -57,31 +57,33 @@
"prettier:fix": "prettier --write --log-level=warn .",
"spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress",
"verify": "npm run prettier && npm run build && npm run test",
"prepublishOnly": "npm run verify"
"prepublishOnly": "npm run verify",
"check-updates": "npx npm-check-updates --interactive --format group"
},
"engines": {
"node": ">=14.17.0"
},
"dependencies": {
"@ctrl/tinycolor": "^4.0.2",
"@floating-ui/dom": "^1.5.3",
"@shoelace-style/animations": "^1.1.0",
"@ctrl/tinycolor": "^4.1.0",
"@floating-ui/dom": "^1.6.12",
"@shoelace-style/animations": "^1.2.0",
"@shoelace-style/localize": "^3.2.1",
"composed-offset-position": "^0.0.4",
"lit": "^3.0.0",
"composed-offset-position": "^0.0.6",
"lit": "^3.2.1",
"qr-creator": "^1.0.0"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0-alpha.5",
"@custom-elements-manifest/analyzer": "^0.9.4",
"@11ty/eleventy": "3.0.0",
"@custom-elements-manifest/analyzer": "^0.10.4",
"@konnorr/esbuild-plugin-lit-css": "^1.0.1",
"@lit-labs/eleventy-plugin-lit": "^1.0.3",
"@lit-labs/testing": "^0.2.4",
"@lit/react": "^1.0.0",
"@lit-labs/testing": "^0.2.5",
"@lit/react": "^1.0.6",
"@open-wc/testing": "^3.2.0",
"@types/mocha": "^10.0.2",
"@types/mocha": "^10.0.10",
"@types/react": "^18.2.28",
"@web/dev-server-esbuild": "^0.3.6",
"@web/test-runner": "^0.18.1",
"@web/test-runner": "^0.19.0",
"@web/test-runner-commands": "^0.9.0",
"@web/test-runner-playwright": "^0.11.0",
"browser-sync": "^2.29.3",
@@ -89,47 +91,48 @@
"change-case": "^4.1.2",
"chokidar": "^3.5.3",
"command-line-args": "^5.2.1",
"comment-parser": "^1.4.0",
"comment-parser": "^1.4.1",
"cspell": "^6.18.1",
"custom-element-jet-brains-integration": "^1.4.0",
"custom-element-vs-code-integration": "^1.2.1",
"custom-element-vuejs-integration": "^1.0.0",
"custom-element-jet-brains-integration": "^1.6.2",
"custom-element-vs-code-integration": "^1.4.1",
"custom-element-vuejs-integration": "^1.3.3",
"del": "^7.1.0",
"download": "^8.0.0",
"esbuild": "^0.19.4",
"esbuild": "0.23.1",
"esbuild-plugin-replace": "^1.4.0",
"front-matter": "^4.0.2",
"get-port": "^7.0.0",
"get-port": "^7.1.0",
"globby": "^13.2.2",
"husky": "^8.0.3",
"lint-staged": "^14.0.1",
"lunr": "^2.3.9",
"markdown-it": "^14.1.0",
"markdown-it-attrs": "^4.1.6",
"markdown-it-attrs": "^4.3.0",
"markdown-it-container": "^3.0.0",
"markdown-it-ins": "^3.0.1",
"markdown-it-kbd": "^2.2.2",
"markdown-it-mark": "^3.0.1",
"marked": "^11.1.0",
"node-html-parser": "^6.1.13",
"ora": "^8.0.1",
"npm-check-updates": "^17.1.11",
"ora": "^8.1.1",
"pascal-case": "^3.1.2",
"playwright": "^1.46.1",
"plop": "^4.0.0",
"prettier": "^3.0.3",
"playwright": "^1.49.1",
"plop": "^4.0.1",
"prettier": "^3.4.2",
"prettier-plugin-organize-imports": "^4.1.0",
"prismjs": "^1.29.0",
"react": "^18.2.0",
"recursive-copy": "^2.0.14",
"sinon": "^16.1.0",
"source-map": "^0.7.4",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"user-agent-data-types": "^0.3.1",
"tslib": "^2.8.1",
"typescript": "^5.7.2",
"user-agent-data-types": "^0.4.2",
"uuid": "^9.0.1"
},
"overrides": {
"playwright": "^1.46.1"
"playwright": "^1.49.1"
},
"lint-staged": {
"*.{ts,js}": [

30
src/components/avatar/avatar.css
View File

@@ -1,12 +1,8 @@
:host {
--background-color: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
--size: 3rem;
display: inline-block;
}
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -16,27 +12,22 @@
background-color: var(--background-color);
font: inherit;
font-size: calc(var(--size) * 0.4);
color: var(--content-color);
color: var(--text-color);
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
}
.avatar--circle,
.avatar--circle .avatar__image {
border-radius: var(--wa-border-radius-circle);
}
.avatar--rounded,
.avatar--rounded .avatar__image {
border-radius: var(--wa-border-radius-s);
}
.avatar--square {
:host([shape='square']) {
border-radius: 0;
}
.avatar__icon {
:host([shape='rounded']) {
border-radius: var(--wa-border-radius-s);
}
.icon {
display: flex;
align-items: center;
justify-content: center;
@@ -47,12 +38,12 @@
height: 100%;
}
.avatar__initials {
.initials {
line-height: 1;
text-transform: uppercase;
}
.avatar__image {
.image {
position: absolute;
top: 0;
left: 0;
@@ -60,4 +51,5 @@
height: 100%;
object-fit: cover;
overflow: hidden;
border-radius: inherit;
}

34
src/components/avatar/avatar.ts
View File

@@ -1,6 +1,5 @@
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { WaErrorEvent } from '../../events/error.js';
import { watch } from '../../internal/watch.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
@@ -26,7 +25,7 @@ import styles from './avatar.css';
* @csspart image - The avatar image. Only shown when the `image` attribute is set.
*
* @cssproperty --background-color - The avatar's background color.
* @cssproperty --content-color - The color of the avatar's content.
* @cssproperty --text-color - The color of the avatar's content.
* @cssproperty --size - The size of the avatar.
*/
@customElement('wa-avatar')
@@ -65,10 +64,11 @@ export default class WaAvatar extends WebAwesomeElement {
const avatarWithImage = html`
<img
part="image"
class="avatar__image"
class="image"
src="${this.image}"
loading="${this.loading}"
alt=""
aria-label=${this.label}
@error="${this.handleImageLoadError}"
/>
`;
@@ -76,32 +76,18 @@ export default class WaAvatar extends WebAwesomeElement {
let avatarWithoutImage = html``;
if (this.initials) {
avatarWithoutImage = html`<div part="initials" class="avatar__initials">${this.initials}</div>`;
avatarWithoutImage = html`<div part="initials" class="initials" role="img" aria-label=${this.label}>
${this.initials}
</div>`;
} else {
avatarWithoutImage = html`
<div part="icon" class="avatar__icon" aria-hidden="true">
<slot name="icon">
<wa-icon name="user" library="system" variant="solid"></wa-icon>
</slot>
</div>
<slot name="icon" part="icon" class="icon" role="img" aria-label=${this.label}>
<wa-icon name="user" library="system" variant="solid"></wa-icon>
</slot>
`;
}
return html`
<div
part="base"
class=${classMap({
avatar: true,
'avatar--circle': this.shape === 'circle',
'avatar--rounded': this.shape === 'rounded',
'avatar--square': this.shape === 'square',
})}
role="img"
aria-label=${this.label}
>
${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage}
</div>
`;
return html` ${this.image && !this.hasError ? avatarWithImage : avatarWithoutImage} `;
}
}

50
src/components/badge/badge.css
View File

@@ -1,50 +1,16 @@
:host {
--border-color: var(--background-color);
--border-radius: var(--wa-border-radius-xs);
--border-style: var(--wa-border-style);
--border-width: var(--wa-border-width-s);
display: inline-flex;
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--content-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-loud);
--content-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-loud);
--content-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-loud);
--content-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-loud);
--content-color: var(--wa-color-danger-on-loud);
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: max(var(--wa-font-size-2xs), 0.75em);
font-weight: var(--wa-font-weight-semibold);
line-height: 1;
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
color: var(--content-color);
background-color: var(--background-color, var(--wa-color-fill-loud));
border-color: var(--border-color, transparent);
border-radius: var(--wa-border-radius-xs);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--text-color, var(--wa-color-on-loud));
white-space: nowrap;
padding: 0.375em 0.625em;
user-select: none;
@@ -53,12 +19,12 @@
}
/* Pill modifier */
.badge--pill {
:host([pill]) {
border-radius: var(--wa-border-radius-pill);
}
/* Pulse modifier */
.badge--pulse {
:host([pulse]) {
--pulse-color: var(--background-color);
animation: pulse 1.5s infinite;

29
src/components/badge/badge.ts
View File

@@ -1,7 +1,8 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import appearanceStyles from '../../styles/utilities/appearance.css';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './badge.css';
/**
@@ -19,15 +20,18 @@ import styles from './badge.css';
* @cssproperty --border-radius - The radius of the badge's corners.
* @cssproperty --border-style - The style of the badge's border.
* @cssproperty --border-width - The width of the badge's border.
* @cssproperty --content-color - The color of the badge's content.
* @cssproperty --text-color - The color of the badge's content.
*/
@customElement('wa-badge')
export default class WaBadge extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [variantStyles, appearanceStyles, styles];
/** The badge's theme variant. */
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';
/** The badge's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'tinted' | 'outlined' = 'filled';
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;
@@ -35,24 +39,7 @@ export default class WaBadge extends WebAwesomeElement {
@property({ type: Boolean, reflect: true }) pulse = false;
render() {
return html`
<span
part="base"
class=${classMap({
badge: true,
'badge--brand': this.variant === 'brand',
'badge--success': this.variant === 'success',
'badge--neutral': this.variant === 'neutral',
'badge--warning': this.variant === 'warning',
'badge--danger': this.variant === 'danger',
'badge--pill': this.pill,
'badge--pulse': this.pulse,
})}
role="status"
>
<slot></slot>
</span>
`;
return html` <slot part="base" role="status"></slot>`;
}
}

16
src/components/button-group/button-group.css
View File

@@ -1,19 +1,3 @@
:host {
display: inline-flex;
}
.button-group {
display: flex;
position: relative;
flex-wrap: wrap;
isolation: isolate;
}
:host([orientation='vertical']) .button-group {
flex-direction: column;
}
/* Show the focus indicator above other buttons */
::slotted(:focus) {
z-index: 1 !important;
}

14
src/components/button-group/button-group.ts
View File

@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import buttonGroupStyles from '../../styles/utilities/button-group.css';
import styles from './button-group.css';
/**
@@ -15,7 +16,7 @@ import styles from './button-group.css';
*/
@customElement('wa-button-group')
export default class WaButtonGroup extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [buttonGroupStyles, styles];
@query('slot') defaultSlot: HTMLSlotElement;
@@ -82,20 +83,19 @@ export default class WaButtonGroup extends WebAwesomeElement {
}
render() {
// eslint-disable-next-line lit-a11y/mouse-events-have-key-events
return html`
<div
<slot
part="base"
class="button-group"
class="wa-button-group"
role="${this.disableRole ? 'presentation' : 'group'}"
aria-label=${this.label}
aria-orientation=${this.orientation}
@focusout=${this.handleBlur}
@focusin=${this.handleFocus}
@mouseover=${this.handleMouseOver}
@mouseout=${this.handleMouseOut}
>
<slot @slotchange=${this.handleSlotChange}></slot>
</div>
@slotchange=${this.handleSlotChange}
></slot>
`;
}
}

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

@@ -1,479 +1,106 @@
:host {
display: inline-block;
display: contents;
position: relative;
width: auto;
cursor: pointer;
}
/*
* Filled buttons
*/
:host([appearance='filled'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-loud);
--label-color: var(--wa-color-neutral-on-loud);
}
:host([appearance='filled'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([appearance='filled'][variant='success']) {
--background-color: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([appearance='filled'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([appearance='filled'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-loud);
--label-color: var(--wa-color-danger-on-loud);
}
/*
* Tinted buttons
*/
:host([appearance='tinted']) {
--background-color-hover: color-mix(in oklab, var(--background-color), transparent 10%);
--background-color-active: color-mix(in oklab, var(--background-color), transparent 20%);
}
:host([appearance='tinted'][variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-normal);
--label-color: var(--wa-color-neutral-on-normal);
}
:host([appearance='tinted'][variant='brand']) {
--background-color: var(--wa-color-brand-fill-normal);
--label-color: var(--wa-color-brand-on-normal);
}
:host([appearance='tinted'][variant='success']) {
--background-color: var(--wa-color-success-fill-normal);
--label-color: var(--wa-color-success-on-normal);
}
:host([appearance='tinted'][variant='warning']) {
--background-color: var(--wa-color-warning-fill-normal);
--label-color: var(--wa-color-warning-on-normal);
}
:host([appearance='tinted'][variant='danger']) {
--background-color: var(--wa-color-danger-fill-normal);
--label-color: var(--wa-color-danger-on-normal);
}
/*
* Outlined buttons
*/
:host([appearance='outlined']),
:host(.wa-button-group__button--radio:not([checked])) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
}
:host([appearance='outlined'][variant='neutral']),
:host(.wa-button-group__button--radio:not([checked])) {
--background-color-hover: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-loud);
--label-color: var(--wa-color-neutral-on-quiet);
}
:host([appearance='outlined'][variant='brand']) {
--background-color-hover: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-loud);
--label-color: var(--wa-color-brand-on-quiet);
}
:host([appearance='outlined'][variant='success']) {
--background-color-hover: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-loud);
--label-color: var(--wa-color-success-on-quiet);
}
:host([appearance='outlined'][variant='warning']) {
--background-color-hover: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-loud);
--label-color: var(--wa-color-warning-on-quiet);
}
:host([appearance='outlined'][variant='danger']) {
--background-color-hover: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-loud);
--label-color: var(--wa-color-danger-on-quiet);
}
/*
* Text buttons
*/
:host([appearance='text']) {
--background-color: transparent;
--background-color-active: color-mix(in oklab, var(--background-color-hover), transparent 20%);
}
:host([appearance='text'][variant='neutral']) {
--label-color: var(--wa-color-neutral-on-quiet);
--background-color-hover: var(--wa-color-neutral-fill-quiet);
}
:host([appearance='text'][variant='brand']) {
--label-color: var(--wa-color-brand-on-quiet);
--background-color-hover: var(--wa-color-brand-fill-quiet);
}
:host([appearance='text'][variant='success']) {
--label-color: var(--wa-color-success-on-quiet);
--background-color-hover: var(--wa-color-success-fill-quiet);
}
:host([appearance='text'][variant='warning']) {
--label-color: var(--wa-color-warning-on-quiet);
--background-color-hover: var(--wa-color-warning-fill-quiet);
}
:host([appearance='text'][variant='danger']) {
--label-color: var(--wa-color-danger-on-quiet);
--background-color-hover: var(--wa-color-danger-fill-quiet);
}
/*
* Checked buttons
*/
:host([checked]) {
--background-color: var(--wa-color-brand-fill-quiet);
--background-color-hover: var(--background-color);
--border-color: var(--wa-form-control-activated-color);
--label-color: var(--wa-color-brand-on-normal);
--indicator-color: var(--border-color);
--indicator-width: var(--wa-border-width-s);
}
/*
* Internal
*/
.button {
:where([part~='base']) {
all: inherit;
display: inline-flex;
align-items: stretch;
justify-content: center;
width: 100%;
}
.button--checked {
box-shadow:
var(--box-shadow, 0 0 transparent),
inset 0 0 0 var(--indicator-width) var(--indicator-color);
}
/*
* States
*/
* Label
*/
.button::-moz-focus-inner {
border: 0;
}
.button:focus {
outline: none;
}
.button:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.button--disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* When disabled, prevent mouse events from bubbling up from children */
.button--disabled * {
pointer-events: none;
}
@media (forced-colors: active) {
.button.button--outlined.button--checked:not(.button--disabled) {
outline: solid 2px transparent;
}
}
/*
* Label
*/
.button__prefix,
.button__suffix {
.prefix,
.suffix {
flex: 0 0 auto;
display: flex;
align-items: center;
pointer-events: none;
}
.button__label {
.label {
display: inline-block;
}
.button__label::slotted(wa-icon) {
.label::slotted(wa-icon) {
vertical-align: -2px;
}
/*
* Size modifiers
*/
* Caret modifier
*/
.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);
}
/*
* Pill modifier
*/
.button--pill {
border-radius: var(--wa-border-radius-pill);
}
/*
* Caret modifier
*/
.button--caret .button__suffix {
display: none;
}
.button--caret .button__caret {
wa-icon[part~='caret'] {
display: flex;
align-self: center;
align-items: center;
}
.button--caret .button__caret::part(svg) {
width: 0.875em;
height: 0.875em;
&::part(svg) {
width: 0.875em;
height: 0.875em;
}
.wa-button:has(&) .suffix {
display: none;
}
}
/*
* Loading modifier
*/
* Loading modifier
*/
.button--loading {
.loading {
position: relative;
cursor: wait;
}
.button--loading .button__prefix,
.button--loading .button__label,
.button--loading .button__suffix,
.button--loading .button__caret {
visibility: hidden;
}
.prefix,
.label,
.suffix,
.caret {
visibility: hidden;
}
.button--loading wa-spinner {
--indicator-color: currentColor;
--track-color: color-mix(in oklab, currentColor, transparent 90%);
position: absolute;
font-size: 1em;
height: 1em;
width: 1em;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
wa-spinner {
--indicator-color: currentColor;
--track-color: color-mix(in oklab, currentColor, transparent 90%);
position: absolute;
font-size: 1em;
height: 1em;
width: 1em;
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
}
}
/*
* Badges
*/
* Badges
*/
.button ::slotted(wa-badge) {
--border-color: var(--wa-color-surface-default);
button ::slotted(wa-badge) {
border-color: var(--wa-color-surface-default);
position: absolute;
top: 0;
right: 0;
inset-block-start: 0;
inset-inline-end: 0;
translate: 50% -50%;
pointer-events: none;
}
.button--rtl ::slotted(wa-badge) {
right: auto;
left: 0;
:host(:dir(rtl)) ::slotted(wa-badge) {
translate: -50% -50%;
}
/*
* Button spacing
*/
* Button spacing
*/
.button--small {
padding: 0 var(--wa-space-s);
slot[name='prefix']::slotted(*) {
margin-inline-end: var(--space);
}
.button--medium {
padding: 0 var(--wa-space-m);
}
.button--large {
padding: 0 var(--wa-space-l);
}
.button--small ::slotted([slot='prefix']) {
margin-inline-end: var(--wa-space-s);
}
.button--medium ::slotted([slot='prefix']) {
margin-inline-end: var(--wa-space-m);
}
.button--large ::slotted([slot='prefix']) {
margin-inline-end: var(--wa-space-l);
}
.button--small ::slotted([slot='suffix']),
.button--small.button--caret:not(.button--visually-hidden-label) .button__caret {
margin-inline-start: var(--wa-space-s);
}
.button--medium ::slotted([slot='suffix']),
.button--medium.button--caret:not(.button--visually-hidden-label) .button__caret {
margin-inline-start: var(--wa-space-m);
}
.button--large ::slotted([slot='suffix']),
.button--large.button--caret:not(.button--visually-hidden-label) .button__caret {
margin-inline-start: var(--wa-space-l);
}
/*
* Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
* This means buttons aren't always direct descendants of the button group, thus we can't target them with the
* ::slotted selector. To work around this, the button group component does some magic to add these special classes to
* buttons and we style them here instead.
*/
/*
:host([data-button-group-middle]) #button {
border-radius: 0;
}
:host([data-button-group-horizontal][data-button-group-first]) #button {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
:host([data-button-group-horizontal][data-button-group-last]) #button {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
:host([data-button-group-vertical][data-button-group-first]) #button {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
:host([data-button-group-vertical][data-button-group-last]) #button {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
*/
:host(.wa-button-group__button--inner) .button {
border-radius: 0;
}
:host(.wa-button-group-horizontal.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
:host(.wa-button-group-horizontal.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
:host(.wa-button-group-vertical.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
border-end-start-radius: 0;
border-end-end-radius: 0;
}
:host(.wa-button-group-vertical.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
/* All except the first */
:host(
.wa-button-group-horizontal.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
) {
margin-inline-start: calc(-1 * var(--border-width));
}
:host(
.wa-button-group-vertical.wa-button-group-horizontal.wa-button-group__button:not(.wa-button-group__button--first)
) {
margin-block-start: calc(-1 * var(--border-width));
}
/* Add a visual separator between filled buttons */
:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio)) .button:after {
content: '';
position: absolute;
z-index: 2; /* Keep separators visible on hover */
}
:host(
.wa-button-group-horizontal.wa-button-group__button:not(
.wa-button-group__button--first,
.wa-button-group__button--radio
)
)
.button:after {
top: 0;
bottom: 0;
inset-inline-start: 0;
border-left: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
}
:host(
.wa-button-group-vertical.wa-button-group__button:not(
.wa-button-group__button--first,
.wa-button-group__button--radio
)
)
.button:after {
left: 0;
right: 0;
inset-block-start: 0;
border-top: solid max(var(--border-width), 1px) var(--border-color, rgb(0 0 0 / 0.3));
}
/* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
:host(.wa-button-group__button--hover) {
z-index: 1;
}
/* Focus and checked are always on top */
:host(.wa-button-group__button--focus),
:host(.wa-button-group__button[checked]) {
z-index: 2;
slot[name='suffix']::slotted(*),
.wa-button:not(.visually-hidden-label) [part~='caret'] {
margin-inline-start: var(--space);
}

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

@@ -9,6 +9,9 @@ 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 appearanceStyles from '../../styles/utilities/appearance.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import '../spinner/spinner.js';
@@ -38,23 +41,19 @@ import styles from './button.css';
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
* @csspart spinner - The spinner that shows when the button is in the loading state.
*
* @cssproperty --background-color - The button's background color.
* @cssproperty --background-color - The button's background color when the button is not being interacted with.
* @cssproperty --background-color-active - The button's background color when active.
* @cssproperty --background-color-hover - The button's background color on hover.
* @cssproperty --border-color - The color of the button's border.
* @cssproperty --border-color - The color of the button's border when the button is not being interacted with.
* @cssproperty --border-color-active - The color of the button's border when active.
* @cssproperty --border-color-hover - The color of the button's border on hover.
* @cssproperty --border-radius - The radius of the button's corners.
* @cssproperty --border-style - The style of the button's border.
* @cssproperty --border-width - The width of the button's border. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the button.
* @cssproperty --label-color - The color of the button's label.
* @cssproperty --label-color-active - The color of the button's label when active.
* @cssproperty --label-color-hover - The color of the button's label on hover.
* @cssproperty --text-color - The color of the button's label when the button is not being interacted with.
* @cssproperty --text-color-active - The color of the button's label when active.
* @cssproperty --text-color-hover - The color of the button's label on hover.
*/
@customElement('wa-button')
export default class WaButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = [nativeStyles, styles];
static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles];
static get validators() {
return [...super.validators, MirrorValidator()];
@@ -63,7 +62,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
assumeInteractionOn = ['click'];
private readonly localize = new LocalizeController(this);
@query('.button') button: HTMLButtonElement | HTMLLinkElement;
@query('.wa-button') button: HTMLButtonElement | HTMLLinkElement;
@state() private hasFocus = false;
@state() visuallyHiddenLabel = false;
@@ -236,6 +235,17 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
this.button.blur();
}
getBoundingClientRect(): DOMRect {
let rect = super.getBoundingClientRect();
let buttonRect = this.button.getBoundingClientRect();
if (rect.width === 0 && buttonRect.width > 0) {
return buttonRect;
}
return rect;
}
render() {
const isLink = this.isLink();
const tag = isLink ? literal`a` : literal`button`;
@@ -247,25 +257,13 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
part="base"
class=${classMap({
button: true,
'button--brand': this.variant === 'brand',
'button--success': this.variant === 'success',
'button--neutral': this.variant === 'neutral',
'button--warning': this.variant === 'warning',
'button--danger': this.variant === 'danger',
'button--small': this.size === 'small',
'button--medium': this.size === 'medium',
'button--large': this.size === 'large',
'button--caret': this.caret,
'button--disabled': this.disabled,
'button--focused': this.hasFocus,
'button--loading': this.loading,
'button--filled': this.appearance === 'filled',
'button--tinted': this.appearance === 'tinted',
'button--outlined': this.appearance === 'outlined',
'button--text': this.appearance === 'text',
'button--pill': this.pill,
'button--rtl': this.localize.dir() === 'rtl',
'button--visually-hidden-label': this.visuallyHiddenLabel,
'wa-button': true,
caret: this.caret,
disabled: this.disabled,
focused: this.hasFocus,
loading: this.loading,
rtl: this.localize.dir() === 'rtl',
'visually-hidden-label': this.visuallyHiddenLabel,
})}
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
type=${ifDefined(isLink ? undefined : this.type)}
@@ -284,27 +282,19 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@invalid=${this.isButton() ? this.handleInvalid : null}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="button__prefix"></slot>
<slot part="label" class="button__label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
${
this.caret
? html`
<wa-icon
part="caret"
class="button__caret"
library="system"
name="chevron-down"
variant="solid"
></wa-icon>
<wa-icon part="caret" class="caret" library="system" name="chevron-down" variant="solid"></wa-icon>
`
: ''
}
${this.loading ? html`<wa-spinner part="spinner"></wa-spinner>` : ''}
</${tag}>
`;
/* eslint-enable lit/no-invalid-html */
/* eslint-enable lit/binding-positions */
}
}
declare global {

36
src/components/callout/callout.css
View File

@@ -7,44 +7,14 @@
display: flex;
align-items: stretch;
border-radius: var(--wa-panel-border-radius);
background-color: var(--background-color);
border-color: var(--border-color);
background-color: var(--background-color, var(--wa-color-fill-quiet));
border-color: var(--border-color, var(--wa-color-border-quiet));
border-style: var(--wa-panel-border-style);
border-width: var(--wa-panel-border-width);
color: var(--content-color);
color: var(--text-color, var(--wa-color-on-normal));
padding: var(--spacing);
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-quiet);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-quiet);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-quiet);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-quiet);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
[part~='icon'] {
flex: 0 0 auto;
display: flex;

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

@@ -1,6 +1,7 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import variantStyles from '../../styles/utilities/variants.css';
import styles from './callout.css';
/**
@@ -21,7 +22,7 @@ import styles from './callout.css';
*/
@customElement('wa-callout')
export default class WaCallout extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [variantStyles, styles];
/** The callout's theme variant. */
@property({ reflect: true }) variant: 'brand' | 'success' | 'neutral' | 'warning' | 'danger' = 'brand';

2
src/components/checkbox/checkbox.ts
View File

@@ -13,7 +13,7 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/shadow/size.css';
import sizeStyles from '../../styles/utilities/size.css';
import '../icon/icon.js';
import styles from './checkbox.css';

4
src/components/format-bytes/format-bytes.ts
View File

@@ -10,6 +10,10 @@ import { LocalizeController } from '../../utilities/localize.js';
*/
@customElement('wa-format-bytes')
export default class WaFormatBytes extends WebAwesomeElement {
static get styles() {
return [];
}
private readonly localize = new LocalizeController(this);
/** The number to format in bytes. */

4
src/components/format-date/format-date.ts
View File

@@ -11,6 +11,10 @@ import { LocalizeController } from '../../utilities/localize.js';
*/
@customElement('wa-format-date')
export default class WaFormatDate extends WebAwesomeElement {
static get styles() {
return [];
}
private readonly localize = new LocalizeController(this);
/**

4
src/components/format-number/format-number.ts
View File

@@ -10,6 +10,10 @@ import { LocalizeController } from '../../utilities/localize.js';
*/
@customElement('wa-format-number')
export default class WaFormatNumber extends WebAwesomeElement {
static get styles() {
return [];
}
private readonly localize = new LocalizeController(this);
/** The number to format. */

84
src/components/input/input.css
View File

@@ -1,63 +1,13 @@
:host {
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
display: block;
}
:host([filled]) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);
}
.input {
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
flex: 1 1 auto;
display: inline-flex;
display: flex;
align-items: stretch;
justify-content: start;
position: relative;
width: 100%;
font: inherit;
vertical-align: middle;
overflow: hidden;
cursor: text;
transition:
background var(--wa-transition-normal) var(--wa-transition-easing),
border var(--wa-transition-normal) var(--wa-transition-easing),
outline var(--wa-transition-fast) var(--wa-transition-easing);
}
/* Standard inputs */
.input--standard.input--focused:not(.input--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
border-color: var(--wa-form-control-activated-color);
}
.input--standard.input--disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Filled inputs */
.input--filled.input--focused:not(.input--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
.input--filled.input--disabled {
opacity: 0.5;
cursor: not-allowed;
}
.input__control {
@@ -65,8 +15,6 @@
min-width: 0;
height: 100%;
font: inherit;
line-height: var(--wa-form-control-value-line-height);
color: var(--wa-form-control-value-color);
border: none;
/* prettier-ignore */
background-color: rgb(118 118 118 / 0); /* ensures proper placeholder styles in webkit's date input */
@@ -84,28 +32,6 @@
-webkit-appearance: none;
}
.input__control:-webkit-autofill,
.input__control:-webkit-autofill:hover,
.input__control:-webkit-autofill:focus,
.input__control:-webkit-autofill:active {
box-shadow: none;
-webkit-text-fill-color: var(--wa-color-brand-on-normal);
caret-color: var(--wa-form-control-value-color);
}
.input--filled .input__control:-webkit-autofill,
.input--filled .input__control:-webkit-autofill:hover,
.input--filled .input__control:-webkit-autofill:focus,
.input--filled .input__control:-webkit-autofill:active {
box-shadow: none;
}
.input__control::placeholder {
color: var(--wa-form-control-placeholder-color);
user-select: none;
-webkit-user-select: none;
}
.input__control:focus {
outline: none;
}
@@ -195,14 +121,6 @@
}
}
/*
* Pill modifier
*/
.input--pill {
border-radius: var(--wa-border-radius-pill);
}
/*
* Clearable + Password Toggle
*/

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

@@ -12,6 +12,7 @@ import { HasSlotController } from '../../internal/slot.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/input.css';
import formControlStyles from '../../styles/shadow/form-control.css';
import { LocalizeController } from '../../utilities/localize.js';
import type WaButton from '../button/button.js';
@@ -61,7 +62,7 @@ import styles from './input.css';
*/
@customElement('wa-input')
export default class WaInput extends WebAwesomeFormAssociatedElement {
static shadowStyle = [formControlStyles, styles];
static shadowStyle = [formControlStyles, nativeStyles, styles];
static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true };

6
src/components/menu-item/menu-item.css
View File

@@ -1,6 +1,6 @@
:host {
--background-color-hover: var(--wa-color-neutral-fill-normal);
--label-color-hover: var(--wa-color-neutral-on-normal);
--text-color-hover: var(--wa-color-neutral-on-normal);
--submenu-offset: -0.125rem;
display: block;
@@ -100,14 +100,14 @@
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
}
:host(:focus-visible) .menu-item {
outline: var(--wa-focus-ring);
outline-offset: calc(-1 * var(--wa-focus-ring-width));
background: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
opacity: 1;
}

2
src/components/menu-item/menu-item.ts
View File

@@ -36,7 +36,7 @@ import { SubmenuController } from './submenu-controller.js';
* @csspart submenu-icon - The submenu icon, visible only when the menu item has a submenu (not yet implemented).
*
* @cssproperty --background-color-hover - The menu item's background color on hover.
* @cssproperty --label-color-hover - The label color on hover.
* @cssproperty --text-color-hover - The label color on hover.
* @cssproperty [--submenu-offset=-2px] - The distance submenus shift to overlap the parent menu.
*/
@customElement('wa-menu-item')

8
src/components/option/option.css
View File

@@ -1,8 +1,8 @@
:host {
--background-color-current: var(--wa-color-brand-fill-loud);
--background-color-hover: var(--wa-color-neutral-fill-normal);
--label-color-current: var(--wa-color-brand-on-loud);
--label-color-hover: var(--wa-color-neutral-on-normal);
--text-color-current: var(--wa-color-brand-on-loud);
--text-color-hover: var(--wa-color-neutral-on-normal);
display: block;
color: var(--wa-color-text-normal);
@@ -27,13 +27,13 @@
.option--hover:not(.option--current):not(.option--disabled) {
background-color: var(--background-color-hover);
color: var(--label-color-hover);
color: var(--text-color-hover);
}
.option--current,
.option--current.option--disabled {
background-color: var(--background-color-current);
color: var(--label-color-current);
color: var(--text-color-current);
opacity: 1;
}

4
src/components/option/option.ts
View File

@@ -21,8 +21,8 @@ import styles from './option.css';
*
* @cssproperty --background-color-current - The current option's background color.
* @cssproperty --background-color-hover - The options's background color on hover.
* @cssproperty --label-color-current - The current option's label color.
* @cssproperty --label-color-hover - The label color on hover.
* @cssproperty --text-color-current - The current option's label color.
* @cssproperty --text-color-hover - The label color on hover.
*
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart base - The component's base wrapper.

4
src/components/progress-bar/progress-bar.css
View File

@@ -2,7 +2,7 @@
--height: 1.25rem;
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
--text-color: var(--wa-color-brand-on-loud);
--box-shadow: none;
display: block;
@@ -21,7 +21,7 @@
height: 100%;
font: inherit;
background-color: var(--indicator-color);
color: var(--label-color);
color: var(--text-color);
text-align: center;
line-height: var(--height);
white-space: nowrap;

2
src/components/progress-bar/progress-bar.ts
View File

@@ -22,7 +22,7 @@ import styles from './progress-bar.css';
* @cssproperty --height - The progress bar's height.
* @cssproperty --track-color - The color of the track.
* @cssproperty --indicator-color - The color of the indicator.
* @cssproperty --label-color - The color of the label.
* @cssproperty --text-color - The color of the label.
* @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
*/
@customElement('wa-progress-bar')

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

@@ -1,6 +1,15 @@
.button__prefix,
.button__suffix,
.button__label {
:host {
display: contents;
}
:where([part~='base']) {
all: inherit;
display: inline-flex;
}
.prefix,
.suffix,
.label {
display: inline-flex;
position: relative;
align-items: center;
@@ -19,3 +28,20 @@
opacity: 0;
z-index: -1;
}
/*
* Checked buttons
*/
: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-width: var(--wa-border-width-s);
box-shadow:
var(--box-shadow, 0 0 transparent),
inset 0 0 0 var(--indicator-width) var(--indicator-color);
}

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

@@ -7,6 +7,9 @@ import { WaFocusEvent } from '../../events/focus.js';
import { HasSlotController } from '../../internal/slot.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import nativeStyles from '../../styles/native/button.css';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import buttonStyles from '../button/button.css';
import styles from './radio-button.css';
@@ -35,24 +38,23 @@ import styles from './radio-button.css';
* @cssproperty --box-shadow - The shadow effects around the edges of the button.
* @cssproperty --indicator-color - The color of the checked button indicator.
* @cssproperty --indicator-width - The width of the checked button indicator.
* @cssproperty --label-color - The color of the button's label.
* @cssproperty --label-color-active - The color of the button's label when active.
* @cssproperty --label-color-hover - The color of the button's label on hover.
* @cssproperty --text-color - The color of the button's label.
* @cssproperty --text-color-active - The color of the button's label when active.
* @cssproperty --text-color-hover - The color of the button's label on hover.
*
* @csspart base - The component's base wrapper.
* @csspart button - The internal `<button>` element.
* @csspart button--checked - The internal button element when the radio button is checked.
* @csspart base - The internal `<button>` element.
* @csspart checked - The internal button element when the radio button is checked.
* @csspart prefix - The container that wraps the prefix.
* @csspart label - The container that wraps the radio button's label.
* @csspart suffix - The container that wraps the suffix.
*/
@customElement('wa-radio-button')
export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
static shadowStyle = [buttonStyles, styles];
static shadowStyle = [variantStyles, sizeStyles, nativeStyles, buttonStyles, styles];
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
@query('.button') input: HTMLInputElement;
@query('button') input: HTMLButtonElement;
@query('.hidden-input') hiddenInput: HTMLInputElement;
@state() protected hasFocus = false;
@@ -147,39 +149,33 @@ export default class WaRadioButton extends WebAwesomeFormAssociatedElement {
const hasSuffix = this.hasUpdated ? this.hasSlotController.test('suffix') : this.withSuffix;
return html`
<div part="base" role="presentation">
<button
part="${`button${this.checked ? ' button--checked' : ''}`}"
role="radio"
aria-checked="${this.checked}"
class=${classMap({
button: true,
'button--neutral': !this.checked,
'button--brand': this.checked,
'button--small': this.size === 'small',
'button--medium': this.size === 'medium',
'button--large': this.size === 'large',
'button--checked': this.checked,
'button--disabled': this.disabled,
'button--focused': this.hasFocus,
'button--outlined': true,
'button--pill': this.pill,
'button--has-label': hasLabel,
'button--has-prefix': hasPrefix,
'button--has-suffix': hasSuffix,
})}
aria-disabled=${this.disabled}
type="button"
value=${ifDefined(this.value)}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="button__prefix"></slot>
<slot part="label" class="button__label"></slot>
<slot name="suffix" part="suffix" class="button__suffix"></slot>
</button>
</div>
<button
part="base${this.checked ? ' checked' : ''}"
role="radio"
aria-checked="${this.checked}"
class=${classMap({
'wa-neutral': !this.checked,
'wa-brand': this.checked,
disabled: this.disabled,
focused: this.hasFocus,
'wa-outlined': true,
'wa-tinted': this.checked,
'wa-pill': this.pill,
'has-label': hasLabel,
'has-prefix': hasPrefix,
'has-suffix': hasSuffix,
})}
aria-disabled=${this.disabled}
type="button"
value=${ifDefined(this.value)}
@blur=${this.handleBlur}
@focus=${this.handleFocus}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot part="label" class="label"></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
</button>
`;
}
}

12
src/components/radio-group/radio-group.css
View File

@@ -18,14 +18,6 @@
margin-inline-start: var(--wa-form-control-required-content-offset);
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
.wa-button-group {
display: flex;
}

20
src/components/radio-group/radio-group.ts
View File

@@ -9,7 +9,8 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import '../button-group/button-group.js';
import buttonGroupStyles from '../../styles/utilities/button-group.css';
import sizeStyles from '../../styles/utilities/size.css';
import type WaRadioButton from '../radio-button/radio-button.js';
import '../radio/radio.js';
import type WaRadio from '../radio/radio.js';
@@ -41,7 +42,7 @@ import styles from './radio-group.css';
*/
@customElement('wa-radio-group')
export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
static shadowStyle = [formControlStyles, styles];
static shadowStyle = [sizeStyles, buttonGroupStyles, formControlStyles, styles];
static get validators() {
const validators = isServer
@@ -314,7 +315,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
const hasHintSlot = this.hasUpdated ? this.hasSlotController.test('hint') : this.withHint;
const hasLabel = this.label ? true : !!hasLabelSlot;
const hasHint = this.hint ? true : !!hasHintSlot;
const defaultSlot = html` <slot @slotchange=${this.syncRadioElements}></slot> `;
return html`
<fieldset
@@ -342,15 +342,11 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
<slot name="label">${this.label}</slot>
</label>
<div part="form-control-input" class="form-control-input" role="presentation">
${this.hasButtonGroup
? html`
<wa-button-group part="button-group" exportparts="base:button-group__base" role="presentation">
${defaultSlot}
</wa-button-group>
`
: defaultSlot}
</div>
<slot
part="form-control-input"
class=${classMap({ 'wa-button-group': this.hasButtonGroup })}
@slotchange=${this.syncRadioElements}
></slot>
<slot
name="hint"

2
src/components/radio/radio.ts
View File

@@ -5,7 +5,7 @@ import { WaBlurEvent } from '../../events/blur.js';
import { WaFocusEvent } from '../../events/focus.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import sizeStyles from '../../styles/shadow/size.css';
import sizeStyles from '../../styles/utilities/size.css';
import '../icon/icon.js';
import styles from './radio.css';

2
src/components/select/select.ts
View File

@@ -21,7 +21,7 @@ import { RequiredValidator } from '../../internal/validators/required-validator.
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/shadow/size.css';
import sizeStyles from '../../styles/utilities/size.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import type WaOption from '../option/option.js';

115
src/components/tag/tag.css
View File

@@ -1,105 +1,44 @@
:host {
--border-radius: var(--wa-border-radius-xs);
--border-style: var(--wa-border-style);
--border-width: var(--wa-border-width-s);
--size-s: var(--wa-font-size-xs);
--size-m: var(--wa-font-size-s);
--size-l: var(--wa-font-size-m);
--form-control-height: calc(var(--space-smaller) * 2 + 1em * var(--wa-form-control-value-line-height));
display: inline-block;
}
:host([variant='brand']) {
--background-color: var(--wa-color-brand-fill-quiet);
--border-color: var(--wa-color-brand-border-normal);
--content-color: var(--wa-color-brand-on-normal);
}
:host([variant='success']) {
--background-color: var(--wa-color-success-fill-quiet);
--border-color: var(--wa-color-success-border-normal);
--content-color: var(--wa-color-success-on-normal);
}
:host([variant='warning']) {
--background-color: var(--wa-color-warning-fill-quiet);
--border-color: var(--wa-color-warning-border-normal);
--content-color: var(--wa-color-warning-on-normal);
}
:host([variant='neutral']) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--wa-color-neutral-border-normal);
--content-color: var(--wa-color-neutral-on-normal);
}
:host([variant='danger']) {
--background-color: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-normal);
--content-color: var(--wa-color-danger-on-normal);
}
.tag {
display: flex;
display: inline-flex;
border-radius: var(--wa-border-radius-s);
align-items: center;
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
color: var(--content-color);
background-color: var(--wa-color-fill-quiet);
border-color: var(--wa-color-border-normal);
border-style: var(--wa-border-style);
border-width: var(--wa-border-width-s);
color: var(--wa-color-on-normal);
line-height: 1;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
height: calc(var(--form-control-height) * 0.8);
line-height: calc(var(--form-control-height) - var(--wa-form-control-border-width) * 2);
padding: 0 var(--space-smaller);
}
.tag__remove::part(base) {
[part='remove-button'] {
color: inherit;
padding: 0;
}
.tag:hover > wa-icon-button {
color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-hover));
}
.tag:active > wa-icon-button {
color: color-mix(in oklab, var(--content-color), var(--wa-color-mix-active));
}
/*
* Size modifiers
*/
.tag--small {
font-size: var(--wa-font-size-xs);
height: calc(var(--wa-form-control-height-s) * 0.8);
line-height: calc(var(--wa-form-control-height-s) - var(--wa-form-control-border-width) * 2);
border-radius: var(--wa-border-radius-s);
padding: 0 var(--wa-space-xs);
}
.tag--medium {
font-size: var(--wa-font-size-s);
height: calc(var(--wa-form-control-height-m) * 0.8);
line-height: calc(var(--wa-form-control-height-m) - var(--wa-form-control-border-width) * 2);
border-radius: var(--wa-border-radius-s);
padding: 0 var(--wa-space-s);
}
.tag--large {
font-size: var(--wa-font-size-m);
height: calc(var(--wa-form-control-height-l) * 0.8);
line-height: calc(var(--wa-form-control-height-l) - var(--wa-form-control-border-width) * 2);
border-radius: var(--wa-border-radius-s);
padding: 0 var(--wa-space-m);
}
.tag__remove {
margin-inline-start: 0.75em;
}
/*
* Pill modifier
*/
:host(:hover) > wa-icon-button {
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-hover));
}
.tag--pill {
:host(:active) > wa-icon-button {
color: color-mix(in oklab, var(--text-color), var(--wa-color-mix-active));
}
/*
* Pill modifier
*/
:host([pill]) {
border-radius: var(--wa-border-radius-pill);
}

68
src/components/tag/tag.ts
View File

@@ -1,8 +1,9 @@
import { html } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { WaRemoveEvent } from '../../events/remove.js';
import WebAwesomeElement from '../../internal/webawesome-element.js';
import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon-button/icon-button.js';
import styles from './tag.css';
@@ -23,17 +24,10 @@ import styles from './tag.css';
* @csspart content - The tag's content.
* @csspart remove-button - The tag's remove button, an `<wa-icon-button>`.
* @csspart remove-button__base - The remove button's exported `base` part.
*
* @cssproperty --background-color - The tag's background color.
* @cssproperty --border-color - The color of the tag's border.
* @cssproperty --border-radius - The radius of the tag's corners.
* @cssproperty --border-style - The style of the tag's border.
* @cssproperty --border-width - The width of the tag's border.
* @cssproperty --content-color - The color of the tag's content.
*/
@customElement('wa-tag')
export default class WaTag extends WebAwesomeElement {
static shadowStyle = styles;
static shadowStyle = [sizeStyles, variantStyles, styles];
private readonly localize = new LocalizeController(this);
@@ -55,47 +49,23 @@ export default class WaTag extends WebAwesomeElement {
render() {
return html`
<span
part="base"
class=${classMap({
tag: true,
<slot part="content" class="tag__content"></slot>
// Types
'tag--brand': this.variant === 'brand',
'tag--success': this.variant === 'success',
'tag--neutral': this.variant === 'neutral',
'tag--warning': this.variant === 'warning',
'tag--danger': this.variant === 'danger',
'tag--text': this.variant === 'text',
// Sizes
'tag--small': this.size === 'small',
'tag--medium': this.size === 'medium',
'tag--large': this.size === 'large',
// Modifiers
'tag--pill': this.pill,
'tag--removable': this.removable,
})}
>
<slot part="content" class="tag__content"></slot>
${this.removable
? html`
<wa-icon-button
part="remove-button"
exportparts="base:remove-button__base"
name="xmark"
library="system"
variant="solid"
label=${this.localize.term('remove')}
class="tag__remove"
@click=${this.handleRemoveClick}
tabindex="-1"
></wa-icon-button>
`
: ''}
</span>
${this.removable
? html`
<wa-icon-button
part="remove-button"
exportparts="base:remove-button__base"
name="xmark"
library="system"
variant="solid"
label=${this.localize.term('remove')}
class="tag__remove"
@click=${this.handleRemoveClick}
tabindex="-1"
></wa-icon-button>
`
: ''}
`;
}
}

2
src/components/textarea/textarea.ts
View File

@@ -12,7 +12,7 @@ import { MirrorValidator } from '../../internal/validators/mirror-validator.js';
import { watch } from '../../internal/watch.js';
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-element.js';
import formControlStyles from '../../styles/shadow/form-control.css';
import sizeStyles from '../../styles/shadow/size.css';
import sizeStyles from '../../styles/utilities/size.css';
import styles from './textarea.css';
/**

2
src/components/tooltip/tooltip.ts
View File

@@ -35,7 +35,7 @@ import styles from './tooltip.css';
*
* @cssproperty --background-color - The tooltip's background color.
* @cssproperty --border-radius - The radius of the tooltip's corners.
* @cssproperty --content-color - The color of the tooltip's content.
* @cssproperty --text-color - The color of the tooltip's content.
* @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
* @cssproperty --padding - The padding within the tooltip.
* @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.

4
src/internal/webawesome-element.ts
View File

@@ -226,6 +226,7 @@ export class WebAwesomeFormAssociatedElement
this.addEventListener('invalid', this.emitInvalid);
}
}
states: CustomStateSet;
connectedCallback() {
super.connectedCallback();
@@ -493,7 +494,6 @@ export class WebAwesomeFormAssociatedElement
// Custom states
addCustomState(state: string) {
try {
// @ts-expect-error CustomStateSet doesn't exist in TS yet.
(this.internals.states as Set<string>).add(state);
} catch (_) {
// Without this, test suite errors.
@@ -504,7 +504,6 @@ export class WebAwesomeFormAssociatedElement
deleteCustomState(state: string) {
try {
// @ts-expect-error CustomStateSet doesn't exist in TS yet.
(this.internals.states as Set<string>).delete(state);
} catch (_) {
// Without this, test suite errors.
@@ -531,7 +530,6 @@ export class WebAwesomeFormAssociatedElement
let bool = false;
try {
// @ts-expect-error CustomStateSet doesn't exist in TS yet.
bool = (this.internals.states as Set<string>).has(state);
} catch (_) {
// Without this, test suite errors.

4
src/styles/applied.css
View File

@@ -8,6 +8,10 @@
@import url('native/tables.css');
@import url('native/blockquote.css');
@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
* Web Awesome's design tokens.

2
src/styles/native.css
View File

@@ -1 +1,3 @@
@import url('./native/button.css');
@import url('./native/form-control.css');
@import url('./native/input.css');

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

@@ -1,59 +1,103 @@
:is(button, input:is([type='button'], [type='reset'], [type='submit'])):where(:not(:host button)),
:host {
--background-color: var(--wa-color-neutral-fill-loud);
:is(button, input:where([type='button'], [type='reset'], [type='submit'])):where(:not(:host *, .wa-off, .wa-off *)),
:host,
.wa-button:where(:not([part~='base'])) {
--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));
--border-color: initial;
--border-color: transparent;
--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);
}
--border-width: max(1px, var(--wa-form-control-border-width));
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-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
--text-color-hover: var(--text-color);
--text-color-active: var(--text-color);
border-radius: var(--wa-form-control-border-radius);
border-style: var(--wa-border-style);
border-width: var(--border-width);
align-items: center;
justify-content: center;
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);
transition-property: background, border, box-shadow, color;
transition-duration: var(--wa-transition-fast);
transition-timing-function: var(--wa-transition-easing);
cursor: pointer;
padding: 0 var(--space, var(--wa-space-m));
font-family: inherit;
font-size: var(--size, var(--wa-font-size-m));
font-weight: var(--wa-font-weight-action);
--form-control-height: calc(
2 * var(--space-smaller, var(--wa-space-s)) + 1em * var(--wa-form-control-value-line-height)
);
height: var(--form-control-height);
line-height: calc(var(--form-control-height) - var(--border-width) * 2);
}
: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));
button,
input:is([type='button'], [type='reset'], [type='submit']),
:host([href]) a,
.wa-button:not([part~='base']) {
display: inline-flex;
background-color: var(--background-color);
border-color: var(--border-color, var(--background-color));
color: var(--text-color);
/* Interactive */
&:where(:not(:disabled, [disabled], :host([disabled]) *, .loading)) {
&:hover {
background-color: var(--background-color-hover, var(--background-color));
border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover)));
color: var(--text-color-hover, var(--text-color));
}
&:active {
background-color: var(--background-color-active, var(--background-color));
border-color: var(--border-color-active, var(--border-color, var(--background-color-active)));
color: var(--text-color-active, var(--text-color));
}
}
/*
* States
*/
&::-moz-focus-inner {
border: 0;
}
&:focus {
outline: none;
}
&:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
/* When disabled, prevent mouse events from bubbling up from children */
* {
pointer-events: none;
}
}
}
: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));
/**
* Utilities
*/
/* Styles */
.wa-pill,
:host([pill]) {
border-radius: var(--wa-border-radius-pill);
}

13
src/styles/native/form-control.css Normal file
View File

@@ -0,0 +1,13 @@
label {
display: inline-block;
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-bottom: var(--wa-space-xs);
}
label:has(+ input:required)::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
color: var(--wa-form-control-required-content-color);
}

98
src/styles/native/input.css Normal file
View File

@@ -0,0 +1,98 @@
/* Exclude inputs that don't accept text, referenced in subsequent rules with :where(&) */
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
) {
/* Set custom properties for native and WA inputs */
input:where(:not(:host input)):where(&),
:host(&) {
--background-color: var(--wa-form-control-background-color);
--border-color: var(--wa-form-control-resting-color);
--border-radius: var(--wa-form-control-border-radius);
--border-style: var(--wa-form-control-border-style);
--border-width: var(--wa-form-control-border-width);
--box-shadow: initial;
}
/* Set custom properties for filled input variants via class="wa-filled" or <wa-input filled> */
input:where(:not(:host input)).wa-filled:where(&),
:host(.wa-filled:where(&)),
:host([filled]:where(&)) {
--background-color: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background-color);
}
/* Set custom properties for pill input variants via class="wa-pill" or <wa-input pill> */
input:where(:not(:host input)).wa-pill:where(&),
:host(.wa-pill:where(&)),
:host([pill]:where(&)) {
--border-radius: var(--wa-border-radius-pill);
}
/* Style text controls of inputs, including within <wa-input> */
:is(input):where(&) {
color: var(--wa-form-control-value-color);
font-size: var(--wa-font-size-m);
line-height: var(--wa-form-control-value-line-height);
padding: 0 var(--wa-space-m);
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
box-shadow: none;
caret-color: var(--wa-form-control-value-color);
}
&::placeholder {
color: var(--wa-form-control-placeholder-color);
user-select: none;
-webkit-user-select: none;
}
}
/* Style native inputs and <wa-input>'s visible container */
:is(input:where(:not(:host input)), :host .input):where(&) {
background-color: var(--background-color);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
box-shadow: var(--box-shadow);
cursor: text;
font-family: inherit;
line-height: var(--wa-form-control-value-line-height);
overflow: hidden;
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);
&:not(.input--small, .input--large) {
height: var(--wa-form-control-height-m);
}
}
/* Style focused inputs */
:is(input:where(:not(:host input)):focus, :host .input--focused:not(.input--disabled)):where(&) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
/* Style disabled inputs */
:is(input:where(:not(:host input)):disabled, :host .input--disabled):where(&) {
cursor: not-allowed;
opacity: 0.5;
}
}

6
src/styles/shadow/form-control.css
View File

@@ -8,7 +8,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-bottom: var(--wa-space-3xs);
margin-block-end: var(--wa-space-xs);
&:is(.form-control--small *) {
font-size: var(--wa-font-size-s);
@@ -32,9 +32,11 @@
/* Help text */
[part~='form-control-hint'],
[part~='hint'] {
display: inline-block;
color: var(--wa-color-text-quiet);
margin-top: var(--wa-space-3xs);
margin-block-start: var(--wa-space-xs);
font-size: var(--size-smaller, 85%);
line-height: var(--wa-form-control-label-line-height);
&:is(.form-control--small *) {
font-size: var(--wa-font-size-xs);

14
src/styles/themes/active.css
View File

@@ -327,15 +327,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -468,7 +462,7 @@
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
wa-rating {

18
src/styles/themes/brutalist.css
View File

@@ -328,15 +328,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -506,7 +500,7 @@
wa-alert {
--border-width: 0 0 0 var(--wa-panel-border-width);
--content-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
--padding: var(--wa-space-s) var(--wa-space-m);
&::part(icon) {
@@ -551,7 +545,7 @@
wa-badge {
--border-color: var(--wa-color-surface-border);
--content-color: var(--wa-color-base-10);
--text-color: var(--wa-color-base-10);
text-transform: uppercase;
&::part(base) {
@@ -710,7 +704,7 @@
}
/* imitating the rounded avatar */
.blog wa-avatar::part(base) {
.blog wa-avatar {
background-color: transparent;
}

277
src/styles/themes/classic.css
View File

@@ -1,4 +1,8 @@
@import 'classic_components.css';
@import url('default/typography.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/shadows.css');
@import url('default/groups.css');
:root,
:host,
@@ -203,123 +207,21 @@
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: Georgia, 'Times New Roman', 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.
* 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-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-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/**
* Spacing
*/
/* A multiplier is provided to uniformly increase or decrease all spacing. */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--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-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* A multiplier is provided to uniformly increase or decrease all border widths. */
--wa-border-width-scale: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 3rem);
/* A multiplier is provided to uniformly increase or decrease all border radii. */
--wa-border-radius-scale: 0.25;
--wa-border-radius-xs: calc(var(--wa-border-radius-scale) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 3rem);
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/**
* Focus
*/
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Shadows
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
* A multiplier is provided for each shadow quality to uniformly scale all related values.
*/
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 1rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 2rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 4rem);
--wa-shadow-offset-y-scale: 0.0625;
--wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 1rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 2rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 4rem);
--wa-shadow-blur-scale: 0.125;
--wa-shadow-blur-xs: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 1rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 2rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 4rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-xs: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 1rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 2rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 4rem);
--wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
var(--wa-shadow-spread-xs) var(--wa-color-shadow);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/**
* Transitions
@@ -335,48 +237,19 @@
*/
/* Form controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-s);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
--wa-form-control-label-line-height: var(--wa-line-height-normal);
--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-height-s: 1.875rem;
--wa-form-control-height-m: 2.5rem;
--wa-form-control-height-l: 3.125rem;
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-s);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
}
.wa-theme-classic-dark,
@@ -462,3 +335,143 @@
--wa-color-neutral-on-normal: var(--wa-color-gray-70);
--wa-color-neutral-on-loud: var(--wa-color-gray-05);
}
/**
* Component style overrides
*/
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--text-color: var(--wa-color-neutral-on-loud);
}
wa-button,
wa-radio-button {
&[size='small'] {
font-size: var(--wa-font-size-xs);
}
&[size='medium'] {
font-size: var(--wa-font-size-s);
}
&[size='large'] {
font-size: var(--wa-font-size-m);
}
}
wa-radio-button {
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
--background-color-hover: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-active: var(--background-color-active);
--border-color-hover: var(--background-color-hover);
--text-color-active: var(--text-color-hover);
--text-color-hover: var(--wa-color-brand-on-loud);
--indicator-color: var(--wa-background-color);
&[checked] {
--background-color: var(--wa-form-control-activated-color);
--border-color: var(--background-color);
--text-color: var(--wa-color-brand-on-loud);
}
}
wa-breadcrumb {
font-size: var(--wa-font-size-s);
}
/* #region Callouts */
wa-callout {
--background-color: var(--wa-color-surface-raised);
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--text-color: var(--wa-color-text-normal);
--spacing: var(--wa-space-l);
font-size: var(--wa-font-size-s);
&[variant='brand'] {
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-brand-fill-loud);
}
&[variant='success'] {
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-success-fill-loud);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-neutral-fill-loud);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-warning-fill-loud);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-danger-fill-loud);
}
}
wa-card {
--background-color: var(--wa-color-surface-raised);
}
wa-carousel {
--box-shadow: var(--wa-shadow-xs);
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
wa-dialog,
wa-drawer {
--spacing: var(--wa-space-l);
}
wa-input:not([filled]),
wa-select:not([filled]),
wa-textarea:not([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;
}
wa-radio {
--background-color-checked: var(--border-color-checked);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
}
wa-range {
--thumb-gap: 0;
}
wa-switch {
--background-color: var(--wa-color-gray-50);
--border-color: var(--background-color);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
--thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
--width: calc(var(--height) * 2);
&::part(thumb) {
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
}
&[checked]::part(thumb) {
border-color: var(--background-color-checked);
}
}
wa-progress-bar {
--height: 1rem;
}
wa-tab {
font-size: var(--wa-font-size-s);
}

154
src/styles/themes/classic_components.css
View File

@@ -1,154 +0,0 @@
/* #region Avatars */
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--content-color: var(--wa-color-neutral-on-loud);
}
/* #endregion */
/* #region Buttons */
wa-button,
wa-radio-button {
&[size='small'] {
font-size: var(--wa-font-size-xs);
}
&[size='medium'] {
font-size: var(--wa-font-size-s);
}
&[size='large'] {
font-size: var(--wa-font-size-m);
}
}
wa-radio-button {
--background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
--background-color-hover: var(--wa-form-control-activated-color);
--border-color: var(--wa-form-control-resting-color);
--border-color-active: var(--background-color-active);
--border-color-hover: var(--background-color-hover);
--label-color-active: var(--label-color-hover);
--label-color-hover: var(--wa-color-brand-on-loud);
--indicator-color: var(--wa-background-color);
}
wa-radio-button[checked] {
--background-color: var(--wa-form-control-activated-color);
--border-color: var(--background-color);
--label-color: var(--wa-color-brand-on-loud);
}
/* #endregion */
/* #region Breadcrumbs */
wa-breadcrumb {
font-size: var(--wa-font-size-s);
}
/* #region Callouts */
wa-callout {
--background-color: var(--wa-color-surface-raised);
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--content-color: var(--wa-color-text-normal);
--spacing: var(--wa-space-l);
font-size: var(--wa-font-size-s);
&[variant='brand'] {
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-brand-fill-loud);
}
&[variant='success'] {
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-success-fill-loud);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-neutral-fill-loud);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-warning-fill-loud);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
var(--wa-color-surface-border);
--icon-color: var(--wa-color-danger-fill-loud);
}
}
/* #endregion */
/* #region Cards */
wa-card {
--background-color: var(--wa-color-surface-raised);
}
/* #endregion */
/* #region Carousel */
wa-carousel {
--box-shadow: var(--wa-shadow-xs);
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
/* #endregion */
/* #region Modals */
wa-dialog,
wa-drawer {
--spacing: var(--wa-space-l);
}
/* #endregion */
/* #region Inputs */
wa-input:not([filled]),
wa-select:not([filled]),
wa-textarea:not([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;
}
wa-radio {
--background-color-checked: var(--border-color-checked);
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
}
wa-range {
--thumb-gap: 0;
}
wa-switch {
--background-color: var(--wa-color-gray-50);
--border-color: var(--background-color);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
--thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
--width: calc(var(--height) * 2);
&::part(thumb) {
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
}
&[checked]::part(thumb) {
border-color: var(--background-color-checked);
}
}
/* #endregion */
/* #region Progress Indicators */
wa-progress-bar {
--height: 1rem;
}
/* #endregion */
/* #region Tabs */
wa-tab {
font-size: var(--wa-font-size-s);
}
/* #endregion */

12
src/styles/themes/default/groups.css
View File

@@ -23,15 +23,9 @@
--wa-form-control-placeholder-color: var(--wa-color-gray-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;

31
src/styles/themes/fa.css
View File

@@ -332,15 +332,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -477,7 +471,7 @@
}
wa-alert {
--content-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
--icon-color: var(--border-color);
.wa-theme-fa-dark & {
@@ -511,12 +505,12 @@
}
wa-button:not([appearance='text']) {
--border-color: var(--label-color);
--border-color: var(--text-color);
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--box-shadow-color: var(--border-color);
--background-active: var(--border-color);
--label-color-active: var(--background);
--text-color-active: var(--background);
&[appearance='outlined'] {
--background: var(--wa-color-surface-default);
@@ -570,13 +564,13 @@
--background-active: var(--wa-color-neutral-on-quiet);
--border-color-active: var(--background-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);
--text-color-active: var(--wa-color-surface-default);
&:active,
&[checked] {
--background: var(--wa-color-neutral-on-quiet);
--box-shadow: none;
--label-color: var(--wa-color-surface-default);
--text-color: var(--wa-color-surface-default);
transform: translateX(var(--wa-shadow-offset-x-s)) translateY(var(--wa-shadow-offset-y-s));
}
}
@@ -598,16 +592,13 @@
wa-input,
wa-select {
--wa-form-control-height-s: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height) +
var(--wa-shadow-offset-y-s)
var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
);
--wa-form-control-height-m: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height) +
var(--wa-shadow-offset-y-s)
var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
);
--wa-form-control-height-l: calc(
var(--wa-space-l) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height) +
var(--wa-shadow-offset-y-s)
var(--wa-space-l) * 2 + 1em * var(--wa-form-control-value-line-height) + var(--wa-shadow-offset-y-s)
);
& > wa-icon {

12
src/styles/themes/glassy.css
View File

@@ -326,15 +326,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;

12
src/styles/themes/mellow.css
View File

@@ -326,15 +326,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;

26
src/styles/themes/migration.css
View File

@@ -329,15 +329,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -522,28 +516,28 @@
&[variant='brand'] {
--background: var(--wa-color-brand-fill-normal);
--content-color: var(--wa-color-brand-on-normal);
--text-color: var(--wa-color-brand-on-normal);
}
&[variant='success'] {
--background: var(--wa-color-success-fill-normal);
--content-color: var(--wa-color-success-on-normal);
--text-color: var(--wa-color-success-on-normal);
}
&[variant='warning'] {
--background: var(--wa-color-warning-fill-normal);
--content-color: var(--wa-color-warning-on-normal);
--text-color: var(--wa-color-warning-on-normal);
}
&[variant='danger'] {
--background: var(--wa-color-danger-fill-normal);
--content-color: var(--wa-color-danger-on-normal);
--text-color: var(--wa-color-danger-on-normal);
}
&[variant='neutral'] {
--background: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--text-color: var(--wa-color-neutral-on-normal);
}
}
wa-button[appearance='outline'] {
--border-color: color-mix(in oklab, var(--label-color), transparent 75%);
--border-color: color-mix(in oklab, var(--text-color), transparent 75%);
}
wa-input,
@@ -556,7 +550,7 @@
wa-radio-button:not([checked]) {
--border-color: var(--wa-color-neutral-border-normal);
--label-color: var(--wa-color-text-normal);
--text-color: var(--wa-color-text-normal);
}
wa-switch {

30
src/styles/themes/playful.css
View File

@@ -341,15 +341,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -572,7 +566,7 @@
--button-shadow-inner-a: var(--wa-color-primary-30);
--button-shadow-inner-b: var(--wa-color-primary-80);
--button-text-shadow: var(--wa-color-primary-40);
--label-color: var(--wa-color-primary-95);
--text-color: var(--wa-color-primary-95);
}
&[variant='success'] {
@@ -640,8 +634,8 @@
wa-button[appearance='outlined'] {
--box-shadow: none;
--border-width: var(--wa-form-control-border-width);
--label-color: var(--wa-color-neutral-on-normal);
--label-color-hover: var(--wa-color-neutral-on-loud);
--text-color: var(--wa-color-neutral-on-normal);
--text-color-hover: var(--wa-color-neutral-on-loud);
&::part(label) {
text-shadow: none;
@@ -694,23 +688,23 @@
&[variant='brand'] {
--background: var(--wa-color-primary-80);
--content-color: var(--wa-color-primary-20);
--text-color: var(--wa-color-primary-20);
}
&[variant='success'] {
--background: var(--wa-color-green-80);
--content-color: var(--wa-color-green-20);
--text-color: var(--wa-color-green-20);
}
&[variant='warning'] {
--background: var(--wa-color-yellow-80);
--content-color: var(--wa-color-yellow-20);
--text-color: var(--wa-color-yellow-20);
}
&[variant='danger'] {
--background: var(--wa-color-red-80);
--content-color: var(--wa-color-red-20);
--text-color: var(--wa-color-red-20);
}
&[variant='neutral'] {
--background: white;
--content-color: var(--wa-color-base-30);
--text-color: var(--wa-color-base-30);
}
}
@@ -867,7 +861,7 @@
--button-shadow-inner-a: var(--wa-color-primary-30);
--button-shadow-inner-b: var(--wa-color-primary-80);
--button-text-shadow: var(--wa-color-primary-40);
--label-color: var(--wa-color-primary-95);
--text-color: var(--wa-color-primary-95);
}
&[variant='success'] {

24
src/styles/themes/premium.css
View File

@@ -329,15 +329,9 @@
--wa-form-control-placeholder-color: var(--wa-color-base-60);
--wa-form-control-height-s: calc(
var(--wa-space-xs) * 2 + var(--wa-font-size-s) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-m: calc(
var(--wa-space-s) * 2 + var(--wa-font-size-m) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-l: calc(
var(--wa-space-m) * 2 + var(--wa-font-size-l) * var(--wa-form-control-value-line-height)
);
--wa-form-control-height-s: calc(var(--wa-space-xs) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-m: calc(var(--wa-space-s) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-height-l: calc(var(--wa-space-m) * 2 + 1em * var(--wa-form-control-value-line-height));
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
@@ -531,23 +525,23 @@
wa-badge {
&[variant='brand'] {
--background: var(--wa-color-primary-80);
--content-color: var(--wa-color-primary-20);
--text-color: var(--wa-color-primary-20);
}
&[variant='success'] {
--background: var(--wa-color-green-80);
--content-color: var(--wa-color-green-20);
--text-color: var(--wa-color-green-20);
}
&[variant='warning'] {
--background: var(--wa-color-yellow-80);
--content-color: var(--wa-color-yellow-20);
--text-color: var(--wa-color-yellow-20);
}
&[variant='danger'] {
--background: var(--wa-color-red-80);
--content-color: var(--wa-color-red-20);
--text-color: var(--wa-color-red-20);
}
&[variant='neutral'] {
--background: white;
--content-color: var(--wa-color-base-30);
--text-color: var(--wa-color-base-30);
}
}
@@ -569,7 +563,7 @@
font-style: italic;
}
.blog wa-avatar::part(base) {
.blog wa-avatar {
border-radius: var(--wa-border-radius-circle);
overflow: hidden;
}

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

@@ -0,0 +1,47 @@
.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);
--text-color: var(--wa-color-on-quiet);
--text-color-hover: var(--wa-color-on-quiet);
}
.wa-filled,
:host([appearance~='filled']) {
--background-color: var(--wa-color-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));
--text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
&:is(.wa-outlined, :host([appearance~='outlined'])) {
--border-color: oklch(from var(--wa-color-fill-loud) calc(l - 0.1) c h);
}
}
.wa-tinted,
:host([appearance~='tinted']) {
--background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
--text-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%);
&:is(.wa-outlined, :host([appearance~='outlined'])) {
--border-color: var(--wa-color-border-normal);
}
}
.wa-text,
:host([appearance~='text']) {
--background-color: transparent;
--text-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%);
}

57
src/styles/utilities/button-group.css Normal file
View File

@@ -0,0 +1,57 @@
.wa-button-group {
display: inline-flex;
position: relative;
flex-wrap: wrap;
isolation: isolate;
> :hover,
&::slotted(:hover) {
z-index: 1;
}
/* Focus and checked are always on top */
> :focus,
&::slotted(:focus),
> [aria-checked='true'],
> [checked],
&::slotted([aria-checked='true']),
&::slotted([checked]) {
z-index: 2 !important;
}
}
/* Horizontal */
.wa-button-group:not([aria-orientation='vertical']) {
> :not(:first-child),
&::slotted(:not(:first-child)) {
border-start-start-radius: 0 !important;
border-end-start-radius: 0 !important;
border-inline-start-color: var(--border-color, rgb(0 0 0 / 0.3));
margin-inline-start: calc(-1 * var(--border-width, 1px));
}
> :not(:last-child),
&::slotted(:not(:last-child)) {
border-start-end-radius: 0 !important;
border-end-end-radius: 0 !important;
}
}
/* Vertical */
.wa-button-group[aria-orientation='vertical'] {
flex-direction: column;
> :not(:first-child),
&::slotted(:not(:first-child)) {
border-start-start-radius: 0 !important;
border-start-end-radius: 0 !important;
border-block-start-color: var(--border-color, rgb(0 0 0 / 0.3));
margin-block-start: calc(-1 * var(--border-width, 1px));
}
> :not(:last-child),
&::slotted(:not(:last-child)) {
border-end-start-radius: 0 !important;
border-end-end-radius: 0 !important;
}
}

3
src/styles/shadow/size.css → src/styles/utilities/size.css
View File

@@ -19,6 +19,7 @@
font-size: var(--size-m);
--size-smaller: var(--size-s);
--space: var(--space-m);
--space-smaller: var(--space-s);
}
:host([size='small']),
@@ -26,6 +27,7 @@
font-size: var(--size-s);
--size-smaller: var(--size-xs);
--space: var(--space-s);
--space-smaller: var(--space-xs);
}
:host([size='large']),
@@ -33,4 +35,5 @@
font-size: var(--size-l);
--size-smaller: var(--size-m);
--space: var(--space-l);
--space-smaller: var(--space-m);
}

75
src/styles/utilities/variants.css Normal file
View File

@@ -0,0 +1,75 @@
.wa-neutral,
:host([variant='neutral']),
:root {
--wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
--wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
--wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
--wa-color-border-loud: var(--wa-color-neutral-border-loud);
--wa-color-border-normal: var(--wa-color-neutral-border-normal);
--wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
--wa-color-on-loud: var(--wa-color-neutral-on-loud);
--wa-color-on-normal: var(--wa-color-neutral-on-normal);
--wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
}
.wa-brand,
:host([variant='brand']) {
--wa-color-fill-loud: var(--wa-color-brand-fill-loud);
--wa-color-fill-normal: var(--wa-color-brand-fill-normal);
--wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
--wa-color-border-loud: var(--wa-color-brand-border-loud);
--wa-color-border-normal: var(--wa-color-brand-border-normal);
--wa-color-border-quiet: var(--wa-color-brand-border-quiet);
--wa-color-on-loud: var(--wa-color-brand-on-loud);
--wa-color-on-normal: var(--wa-color-brand-on-normal);
--wa-color-on-quiet: var(--wa-color-brand-on-quiet);
}
.wa-success,
:host([variant='success']) {
--wa-color-fill-loud: var(--wa-color-success-fill-loud);
--wa-color-fill-normal: var(--wa-color-success-fill-normal);
--wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
--wa-color-border-loud: var(--wa-color-success-border-loud);
--wa-color-border-normal: var(--wa-color-success-border-normal);
--wa-color-border-quiet: var(--wa-color-success-border-quiet);
--wa-color-on-loud: var(--wa-color-success-on-loud);
--wa-color-on-normal: var(--wa-color-success-on-normal);
--wa-color-on-quiet: var(--wa-color-success-on-quiet);
}
.wa-warning,
:host([variant='warning']) {
--wa-color-fill-loud: var(--wa-color-warning-fill-loud);
--wa-color-fill-normal: var(--wa-color-warning-fill-normal);
--wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
--wa-color-border-loud: var(--wa-color-warning-border-loud);
--wa-color-border-normal: var(--wa-color-warning-border-normal);
--wa-color-border-quiet: var(--wa-color-warning-border-quiet);
--wa-color-on-loud: var(--wa-color-warning-on-loud);
--wa-color-on-normal: var(--wa-color-warning-on-normal);
--wa-color-on-quiet: var(--wa-color-warning-on-quiet);
}
.wa-danger,
:host([variant='danger']) {
--wa-color-fill-loud: var(--wa-color-danger-fill-loud);
--wa-color-fill-normal: var(--wa-color-danger-fill-normal);
--wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
--wa-color-border-loud: var(--wa-color-danger-border-loud);
--wa-color-border-normal: var(--wa-color-danger-border-normal);
--wa-color-border-quiet: var(--wa-color-danger-border-quiet);
--wa-color-on-loud: var(--wa-color-danger-on-loud);
--wa-color-on-normal: var(--wa-color-danger-on-normal);
--wa-color-on-quiet: var(--wa-color-danger-on-quiet);
}