js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
konnorrogers
2023-09-12 14:46:53 -04:00
parent 8ad392a5ac 5219188690
commit 93841348e1
17 changed files with 141 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_utilities/replacer.cjs
View File

@@ -13,7 +13,12 @@
* @param {Replacements} replacements
*/
module.exports = function (content, replacements) {
/** This seems trivial, but by assigning to a string first, THEN using innerHTML after iterating over every replacement, we reduce the calculations of JSDOM. At the time of writing benchmarks show a reduction from 9seconds to 3 seconds by doing so. */
let html = content.body.innerHTML;
replacements.forEach(replacement => {
content.body.innerHTML = content.body.innerHTML.replaceAll(replacement.pattern, replacement.replacement);
html = html.replaceAll(replacement.pattern, replacement.replacement);
});
content.body.innerHTML = html;
};

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

@@ -175,7 +175,7 @@ a {
}
a:hover {
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
}
abbr[title] {
@@ -310,7 +310,7 @@ svg.wordmark {
.anchor-heading a::after {
content: '#';
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-tint-hover));
margin-inline: 0.5rem;
opacity: 0;
transition: 100ms opacity;
@@ -492,11 +492,11 @@ pre .token.italic {
}
.copy-code-button::part(button):hover {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 4%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
}
.copy-code-button::part(button):active {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 8%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
pre .copy-code-button {

1
docs/eleventy.config.cjs
View File

@@ -143,6 +143,7 @@ module.exports = function (eleventyConfig) {
scrollingTables(doc);
copyCodeButtons(doc); // must be after codePreviews + highlightCodeBlocks
typography(doc, '#content');
replacer(doc, [
{ pattern: '%VERSION%', replacement: customElementsManifest.package.version },
{ pattern: '%CDNDIR%', replacement: cdndir },

4
docs/pages/resources/changelog.md
View File

@@ -12,8 +12,9 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
New versions of Web Awesome are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
## Theme API
## 3.0 Changes (BREAKING)
- Changed the `sl` prefix to `wa` for Web Awesome, including tags, events, etc.
- Changed `primary` variants to `brand` in all components
- Removed `default` from `<wa-button>` and made `neutral` the new default
- Removed the `circle` modifier from `<wa-button>` because button's no longer have a set height
@@ -22,6 +23,7 @@ New versions of Web Awesome are released as-needed and generally occur when a cr
- Fixed a bug in `<wa-switch>` that resulted in improper spacing between the label and the required asterisk [#1540]
- Updated `@ctrl/tinycolor` to 4.0.1 [#1542]
- Updated Bootstrap Icons to 1.11.0
## 2.8.0

18
package-lock.json generated
View File

@@ -30,7 +30,7 @@
"@web/test-runner": "^0.15.0",
"@web/test-runner-commands": "^0.6.5",
"@web/test-runner-playwright": "^0.9.0",
"bootstrap-icons": "^1.10.5",
"bootstrap-icons": "^1.11.0",
"browser-sync": "^2.29.3",
"chalk": "^5.2.0",
"change-case": "^4.1.2",
@@ -83,10 +83,6 @@
},
"engines": {
"node": ">=14.17.0"
},
"funding": {
"type": "individual",
"url": "https://github.com/sponsors/claviska"
}
},
"node_modules/@11ty/dependency-tree": {
@@ -3988,9 +3984,9 @@
}
},
"node_modules/bootstrap-icons": {
"version": "1.10.5",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
"integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.0.tgz",
"integrity": "sha512-bLTbtACfUqwZf6f/xUYUb7bTRZC68QaQwwy9h1b96NPKfnwqzSatHqDypW6R2CBW7zUE7lP+O93GdZuPY3RIHA==",
"dev": true,
"funding": [
{
@@ -20213,9 +20209,9 @@
}
},
"bootstrap-icons": {
"version": "1.10.5",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.10.5.tgz",
"integrity": "sha512-oSX26F37V7QV7NCE53PPEL45d7EGXmBgHG3pDpZvcRaKVzWMqIRL9wcqJUyEha1esFtM3NJzvmxFXDxjJYD0jQ==",
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.11.0.tgz",
"integrity": "sha512-bLTbtACfUqwZf6f/xUYUb7bTRZC68QaQwwy9h1b96NPKfnwqzSatHqDypW6R2CBW7zUE7lP+O93GdZuPY3RIHA==",
"dev": true
},
"boxen": {

2
package.json
View File

@@ -77,7 +77,7 @@
"@web/test-runner": "^0.15.0",
"@web/test-runner-commands": "^0.6.5",
"@web/test-runner-playwright": "^0.9.0",
"bootstrap-icons": "^1.10.5",
"bootstrap-icons": "^1.11.0",
"browser-sync": "^2.29.3",
"chalk": "^5.2.0",
"change-case": "^4.1.2",

2
src/components/breadcrumb-item/breadcrumb-item.styles.ts
View File

@@ -41,7 +41,7 @@ export default css`
}
:host(:not(:last-of-type)) .breadcrumb-item__label:hover {
color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
color: color-mix(in oklab, var(--wa-color-brand-text-on-surface), var(--wa-color-tint-hover));
}
:host(:not(:last-of-type)) .breadcrumb-item__label:active {

6
src/components/button/button.component.ts
View File

@@ -180,7 +180,7 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
this.emit('wa-focus');
}
private handleClick(event: MouseEvent) {
private handleClick() {
if (this.type === 'submit') {
this.formControlController.submit(this);
}
@@ -188,10 +188,6 @@ export default class WaButton extends WebAwesomeElement implements WebAwesomeFor
if (this.type === 'reset') {
this.formControlController.reset(this);
}
if (this.href) {
event.preventDefault();
}
}
private handleInvalid(event: Event) {

64
src/components/button/button.styles.ts
View File

@@ -99,11 +99,11 @@ export default css`
}
.button--standard.button--brand:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
/* Success */
@@ -113,11 +113,11 @@ export default css`
}
.button--standard.button--success:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
}
/* Neutral */
@@ -127,11 +127,11 @@ export default css`
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Warning */
@@ -140,11 +140,11 @@ export default css`
color: var(--wa-color-warning-text-on-vivid);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
}
/* Danger */
@@ -154,11 +154,11 @@ export default css`
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
}
.button--standard.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
}
/*
@@ -178,14 +178,14 @@ export default css`
.button--outline.button--brand:hover:not(.button--disabled),
.button--outline.button--brand.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-brand-text-on-vivid);
}
.button--outline.button--brand:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
/* Success */
@@ -196,14 +196,14 @@ export default css`
.button--outline.button--success:hover:not(.button--disabled),
.button--outline.button--success.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-success-text-on-vivid);
}
.button--outline.button--success:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-success-fill-vivid), var(--wa-color-tint-active));
}
.button--outline.button--small {
@@ -226,14 +226,14 @@ export default css`
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-neutral-text-on-vivid);
}
.button--outline.button--neutral:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Warning */
@@ -244,14 +244,14 @@ export default css`
.button--outline.button--warning:hover:not(.button--disabled),
.button--outline.button--warning.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-warning-text-on-vivid);
}
.button--outline.button--warning:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-warning-fill-vivid), var(--wa-color-tint-active));
}
/* Danger */
@@ -262,14 +262,14 @@ export default css`
.button--outline.button--danger:hover:not(.button--disabled),
.button--outline.button--danger.button--checked:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-hover));
color: var(--wa-color-danger-text-on-vivid);
}
.button--outline.button--danger:active:not(.button--disabled) {
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
background-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
border-color: color-mix(in oklab, var(--wa-color-danger-fill-vivid), var(--wa-color-tint-active));
}
@media (forced-colors: active) {
@@ -289,7 +289,7 @@ export default css`
}
.button--text:hover:not(.button--disabled) {
color: color-mix(in oklch, var(--wa-color-text-link), white 6%);
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-tint-hover));
}
.button--text:focus-visible:not(.button--disabled),
@@ -368,7 +368,7 @@ export default css`
.button--loading wa-spinner {
--indicator-color: currentColor;
--track-color: color-mix(in oklch, currentColor, transparent 90%);
--track-color: color-mix(in oklab, currentColor, transparent 90%);
position: absolute;
font-size: 1em;
height: 1em;

2
src/components/dropdown/dropdown.styles.ts
View File

@@ -36,7 +36,7 @@ export default css`
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
box-shadow: var(--wa-shadow-level-3);
box-shadow: var(--wa-shadow-level-2);
border-radius: var(--wa-corners-1x);
pointer-events: none;
}

4
src/components/icon-button/icon-button.styles.ts
View File

@@ -26,11 +26,11 @@ export default css`
.icon-button:hover:not(.icon-button--disabled),
.icon-button:focus-visible:not(.icon-button--disabled) {
color: var(--wa-color-brand-text-on-surface);
color: var(--wa-color-brand-fill-vivid);
}
.icon-button:active:not(.icon-button--disabled) {
color: color-mix(in oklch, var(--wa-color-brand-text-on-surface), black 8%);
color: color-mix(in oklab, var(--wa-color-brand-fill-vivid), var(--wa-color-tint-active));
}
.icon-button:focus {

2
src/components/input/input.styles.ts
View File

@@ -239,7 +239,7 @@ export default css`
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
.input__clear:focus,

4
src/components/select/select.styles.ts
View File

@@ -261,7 +261,7 @@ export default css`
}
.select__clear:active {
color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 12%);
color: color-mix(in oklab, var(--wa-color-neutral-fill-vivid), var(--wa-color-tint-active));
}
/* Expand icon */
@@ -285,7 +285,7 @@ export default css`
font-family: var(--wa-font-family-body);
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-normal);
box-shadow: var(--wa-shadow-level-3);
box-shadow: var(--wa-shadow-level-2);
background: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);

2
src/components/skeleton/skeleton.styles.ts
View File

@@ -7,7 +7,7 @@ export default css`
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-fill-muted);
--sheen-color: color-mix(in oklch, var(--wa-color-neutral-fill-muted), white 50%);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-muted), white 50%);
display: block;
position: relative;

26
src/components/tag/tag.styles.ts
View File

@@ -98,8 +98,32 @@ export default css`
padding: var(--wa-space-2xs) var(--wa-space-xs);
}
.tag--small {
font-size: var(--wa-font-size-s);
height: calc(var(--wa-form-controls-height-s) * 0.8);
line-height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-1x);
padding: 0 var(--wa-space-xs);
}
.tag--medium {
font-size: var(--wa-font-size-m);
height: calc(var(--wa-form-controls-height-m) * 0.8);
line-height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-1x);
padding: 0 var(--wa-space-s);
}
.tag--large {
font-size: var(--wa-font-size-l);
height: calc(var(--wa-form-controls-height-l) * 0.8);
line-height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
border-radius: var(--wa-corners-1x);
padding: 0 var(--wa-space-m);
}
.tag__remove {
margin-inline-start: var(--wa-space-2xs);
margin-inline-start: var(--wa-space-xs);
}
/*

2
src/themes/_utility.css
View File

@@ -25,5 +25,5 @@
}
.wa-toast-stack wa-alert::part(base) {
box-shadow: var(--wa-shadow-level-3);
box-shadow: var(--wa-shadow-level-2);
}

104
src/themes/default.css
View File

@@ -6,59 +6,59 @@
/**
* Primitives
*/
--wa-color-red-95: #ffefef;
--wa-color-red-90: #ffdedf;
--wa-color-red-80: #ffb7bb;
--wa-color-red-70: #fb9098;
--wa-color-red-60: #f36677;
--wa-color-red-50: #e41c51;
--wa-color-red-40: #ab203e;
--wa-color-red-30: #831f31;
--wa-color-red-20: #5d1b25;
--wa-color-red-10: #331417;
--wa-color-red-95: #fdeef3;
--wa-color-red-90: #fcdee7;
--wa-color-red-80: #f8b8c8;
--wa-color-red-70: #f492a8;
--wa-color-red-60: #ef6982;
--wa-color-red-50: #df2e45;
--wa-color-red-40: #a82431;
--wa-color-red-30: #851d23;
--wa-color-red-20: #621617;
--wa-color-red-10: #3c0c09;
--wa-color-yellow-95: #f9f2db;
--wa-color-yellow-90: #f4e5b6;
--wa-color-yellow-80: #e8c762;
--wa-color-yellow-70: #d6a927;
--wa-color-yellow-60: #b78f21;
--wa-color-yellow-50: #92701b;
--wa-color-yellow-40: #705514;
--wa-color-yellow-30: #584210;
--wa-color-yellow-20: #41300c;
--wa-color-yellow-10: #261c07;
--wa-color-yellow-95: #faf3c9;
--wa-color-yellow-90: #fde592;
--wa-color-yellow-80: #f6c240;
--wa-color-yellow-70: #dfa43b;
--wa-color-yellow-60: #c68836;
--wa-color-yellow-50: #a3692e;
--wa-color-yellow-40: #7e4c26;
--wa-color-yellow-30: #663a20;
--wa-color-yellow-20: #4d2919;
--wa-color-yellow-10: #2d1810;
--wa-color-green-95: #e6f7ea;
--wa-color-green-90: #cceed4;
--wa-color-green-80: #91daa2;
--wa-color-green-70: #51c56c;
--wa-color-green-60: #3da856;
--wa-color-green-50: #308544;
--wa-color-green-40: #256534;
--wa-color-green-30: #1d4f29;
--wa-color-green-20: #15391d;
--wa-color-green-10: #0c2211;
--wa-color-green-95: #e8f6ea;
--wa-color-green-90: #d0edd8;
--wa-color-green-80: #94d8ad;
--wa-color-green-70: #4ec486;
--wa-color-green-60: #00ae5f;
--wa-color-green-50: #008b4d;
--wa-color-green-40: #00693e;
--wa-color-green-30: #005334;
--wa-color-green-20: #003d28;
--wa-color-green-10: #00241b;
--wa-color-blue-95: #eaf3fe;
--wa-color-blue-90: #d5e8fd;
--wa-color-blue-80: #a6cdfb;
--wa-color-blue-70: #76b2f9;
--wa-color-blue-60: #4496f6;
--wa-color-blue-50: #0070f2;
--wa-color-blue-40: #0055b9;
--wa-color-blue-30: #004390;
--wa-color-blue-20: #00316a;
--wa-color-blue-10: #001d40;
--wa-color-blue-95: #e9f3fe;
--wa-color-blue-90: #d4e8fc;
--wa-color-blue-80: #a2cef9;
--wa-color-blue-70: #6eb4f6;
--wa-color-blue-60: #259af4;
--wa-color-blue-50: #0076f2;
--wa-color-blue-40: #005ab7;
--wa-color-blue-30: #004790;
--wa-color-blue-20: #00346a;
--wa-color-blue-10: #001f3f;
--wa-color-neutral-95: #f2f2f4;
--wa-color-neutral-90: #e5e5ea;
--wa-color-neutral-80: #c8c9d3;
--wa-color-neutral-70: #acaebc;
--wa-color-neutral-60: #9193a6;
--wa-color-neutral-50: #71748c;
--wa-color-neutral-40: #56586a;
--wa-color-neutral-30: #434453;
--wa-color-neutral-20: #30323c;
--wa-color-neutral-90: #e5e5e9;
--wa-color-neutral-80: #c8c9d1;
--wa-color-neutral-70: #acaebb;
--wa-color-neutral-60: #9194a4;
--wa-color-neutral-50: #70758a;
--wa-color-neutral-40: #545868;
--wa-color-neutral-30: #424551;
--wa-color-neutral-20: #30323b;
--wa-color-neutral-10: #1c1d23;
--wa-color-white: white;
@@ -86,11 +86,13 @@
--wa-color-tint-white: rgb(255 255 255 / 0.2);
--wa-color-tint-black: rgb(0 0 0 / 0.2);
--wa-color-tint-hover: black 8%;
--wa-color-tint-active: black 16%;
/**
* Semantic color variants
*/
/* TODO: Add comments for semantic color tokens and usage expectations */
/* TODO: Add tokens for hover and active tints */
/* CONSIDER: Change -alt naming to -tint or -shade? */
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);
@@ -216,7 +218,7 @@
/**
* Borders & corners
*/
--wa-border-width-thin: 0.0625rem; /* 1px*/
--wa-border-width-thin: 0.0625rem; /* 1px */
--wa-border-width-medium: calc(var(--wa-border-width-thin) * 2);
--wa-border-width-thick: calc(var(--wa-border-width-thin) * 3);
@@ -268,9 +270,7 @@
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-form-controls-corners: var(--wa-corners-1x);
/* prettier-ignore */
--wa-form-controls-border-color-resting: var(--wa-color-neutral-outline-muted-alt);
/* prettier-ignore */
--wa-form-controls-border-color-activated: var(--wa-color-brand-outline-vivid);
--wa-form-controls-text-color: var(--wa-color-text-normal);
--wa-form-controls-value-line-height: var(--wa-font-height-compact);