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

progress refactoring color properties

Browse Source
This commit is contained in:
lindsaym-fa
2024-05-21 17:57:38 -04:00
parent da8e8ad1f6
commit 08f39419a3
59 changed files with 1602 additions and 1837 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/assets/styles/code-examples.css
View File

@@ -1,5 +1,5 @@
.code-example {
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
border-radius: var(--wa-corners-m);
color: var(--wa-color-text-normal);
margin-block-end: var(--wa-flow-spacing);
@@ -7,7 +7,7 @@
.code-example-preview {
padding: 2rem;
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
> :first-child {
margin-block-start: 0;
@@ -19,7 +19,7 @@
}
.code-example-source {
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
}
.code-example:not(.open) .code-example-source {
@@ -55,7 +55,7 @@
flex: 1 0 auto;
font-size: 0.875rem;
color: var(--wa-color-text-quiet);
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
text-align: center;
padding: 0.5rem;
cursor: pointer;

6
docs/assets/styles/copy-code.css
View File

@@ -3,13 +3,13 @@
top: 0.25rem;
right: 0.25rem;
font-family: var(--wa-font-family-body);
color: var(--wa-color-neutral-text-on-fill);
background-color: var(--wa-color-neutral-fill-subtle);
color: var(--wa-color-neutral-on-normal);
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: var(--wa-corners-s);
padding: 0.25rem;
&:hover {
background-color: var(--wa-color-neutral-fill-highlight);
background-color: var(--wa-color-neutral-fill-normal);
}
&:focus-visible {

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

@@ -11,7 +11,7 @@ wa-page[view='desktop'] [data-toggle-nav] {
/* Header */
wa-page::part(header) {
background-color: var(--wa-color-surface-default);
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
}
wa-page > header {
@@ -30,7 +30,7 @@ wa-page > header {
/* Navigation sidebar */
wa-page[view='desktop']::part(navigation) {
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
}
wa-page[view='desktop'] > #sidebar {
@@ -107,27 +107,27 @@ wa-page > main {
}
.callout-info {
background-color: var(--wa-color-brand-fill-subtle);
border-color: var(--wa-color-brand-border-subtle);
background-color: var(--wa-color-brand-fill-quiet);
border-color: var(--wa-color-brand-border-quiet);
.callout-icon {
color: var(--wa-color-brand-text-on-fill);
color: var(--wa-color-brand-on-normal);
}
code {
background-color: var(--wa-color-brand-fill-highlight);
background-color: var(--wa-color-brand-fill-normal);
}
}
.callout-warning {
background-color: var(--wa-color-warning-fill-subtle);
border-color: var(--wa-color-warning-border-subtle);
background-color: var(--wa-color-warning-fill-quiet);
border-color: var(--wa-color-warning-border-quiet);
.callout-icon {
color: var(--wa-color-warning-text-on-fill);
color: var(--wa-color-warning-on-normal);
}
code {
background-color: var(--wa-color-warning-fill-highlight);
background-color: var(--wa-color-warning-fill-normal);
}
}

14
docs/assets/styles/search.css
View File

@@ -99,7 +99,7 @@ header {
#site-search.has-results,
#site-search.no-results {
#site-search-body {
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
}
}
@@ -126,15 +126,15 @@ header {
@media (hover: hover) {
li a:hover,
li a:hover small {
background-color: var(--wa-color-neutral-fill-highlight);
background-color: var(--wa-color-neutral-fill-normal);
}
}
li[data-selected='true'] a,
li[data-selected='true'] a * {
outline: none;
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
}
h3 {
@@ -165,7 +165,7 @@ header {
wa-icon {
font-size: 1.75rem;
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
}
}
@@ -185,7 +185,7 @@ header {
.site-search-result-title {
font-size: 1.25rem;
font-weight: var(--wa-font-weight-medium);
color: var(--wa-color-brand-text-on-fill);
color: var(--wa-color-brand-on-normal);
}
.site-search-result-description {
@@ -227,7 +227,7 @@ header {
justify-content: center;
gap: 2rem;
color: var(--wa-color-text-quiet);
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-subtle);
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
border-bottom-left-radius: var(--wa-corners-m);
border-bottom-right-radius: var(--wa-corners-m);
padding: 1rem;

14
docs/docs/components/animation.md
View File

@@ -19,7 +19,7 @@ To animate an element, wrap it in `<wa-animation>` and set an animation `name`.
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
margin: 1.5rem;
}
</style>
@@ -34,7 +34,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
margin: 1.5rem;
}
`;
@@ -122,7 +122,7 @@ This example demonstrates all of the baked-in animations and easings. Animations
.animation-sandbox .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
}
.animation-sandbox .controls {
@@ -174,7 +174,7 @@ Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
}
</style>
```
@@ -193,7 +193,7 @@ const css = `
display: inline-block;
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
}
`;
@@ -266,7 +266,7 @@ Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
}
</style>
```
@@ -279,7 +279,7 @@ const css = `
.animation-keyframes .box {
width: 100px;
height: 100px;
background-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-brand-fill-loud);
}
`;

124
docs/docs/components/popup.md
View File

@@ -62,21 +62,21 @@ Popup is a low-level utility built specifically for positioning elements. Do not
<style>
.popup-overview wa-popup {
--arrow-color: var(--wa-color-brand-spot);
--arrow-color: var(--wa-color-brand-fill-loud);
}
.popup-overview span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -112,21 +112,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.popup-overview wa-popup {
--arrow-color: var(--wa-color-brand-spot);
--arrow-color: var(--wa-color-brand-fill-loud);
}
.popup-overview span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-overview .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -251,14 +251,14 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
</style>
@@ -283,14 +283,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-active .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
`;
@@ -335,14 +335,14 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px 0 0 50px;
}
#external-anchor ~ wa-popup .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
</style>
@@ -357,14 +357,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px 0 0 50px;
}
#external-anchor ~ wa-popup .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
`;
@@ -419,14 +419,14 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -456,14 +456,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-placement .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -525,14 +525,14 @@ Use the `distance` attribute to change the distance between the popup and its an
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -561,14 +561,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-distance .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -624,14 +624,14 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -660,14 +660,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-skidding .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -747,21 +747,21 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
<style>
.popup-arrow wa-popup {
--arrow-color: var(--wa-color-brand-spot);
--arrow-color: var(--wa-color-brand-fill-loud);
}
.popup-arrow span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -805,21 +805,21 @@ import WaSwitch from '@shoelace-style/shoelace/dist/react/switch';
const css = `
.popup-arrow wa-popup {
--arrow-color: var(--wa-color-brand-spot);
--arrow-color: var(--wa-color-brand-fill-loud);
}
.popup-arrow span[slot='anchor'] {
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-arrow .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -925,7 +925,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
@@ -934,7 +934,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -965,7 +965,7 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
@@ -974,7 +974,7 @@ const css = `
height: 100%;
min-width: 50px;
min-height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -1043,14 +1043,14 @@ Toggle the switch and scroll the container to see the difference.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -1086,14 +1086,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 150px 50px;
}
.popup-strategy .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -1158,14 +1158,14 @@ Scroll the container to see how the popup flips to prevent clipping.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
</style>
@@ -1197,14 +1197,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 150px 50px;
}
.popup-flip .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
`;
@@ -1267,14 +1267,14 @@ Scroll the container to see how the popup changes it's fallback placement to pre
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
</style>
@@ -1296,14 +1296,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 250px 50px;
}
.popup-flip-fallbacks .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
`;
@@ -1356,14 +1356,14 @@ Toggle the switch to see the difference.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 60px 0 0 10px;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
</style>
@@ -1394,14 +1394,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 60px 0 0 10px;
}
.popup-shift .box {
width: 300px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
`;
@@ -1464,12 +1464,12 @@ Scroll the container to see the popup resize as its available space changes.
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 250px 50px 100px 50px;
}
.popup-auto-size .box {
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
/* This sets the preferred size of the popup's content */
@@ -1510,12 +1510,12 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 250px 50px 100px 50px;
}
.popup-auto-size .box {
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
/* This sets the preferred size of the popup's content */
@@ -1575,14 +1575,14 @@ When a gap exists between the anchor and the popup element, this option will add
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-hover-bridge .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -1619,14 +1619,14 @@ const css = `
display: inline-block;
width: 150px;
height: 150px;
border: dashed 2px var(--wa-color-neutral-spot);
border: dashed 2px var(--wa-color-neutral-fill-loud);
margin: 50px;
}
.popup-hover-bridge .box {
width: 100px;
height: 50px;
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-s);
}
@@ -1760,7 +1760,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
.popup-virtual-element .circle {
width: 100px;
height: 100px;
border: solid 4px var(--wa-color-neutral-spot);
border: solid 4px var(--wa-color-neutral-fill-loud);
border-radius: 50%;
translate: -50px -50px;
animation: 1s virtual-cursor infinite;
@@ -1789,7 +1789,7 @@ const css = `
.popup-virtual-element .circle {
width: 100px;
height: 100px;
border: solid 4px var(--wa-color-neutral-spot);
border: solid 4px var(--wa-color-neutral-fill-loud);
border-radius: 50%;
translate: -50px -50px;
animation: 1s virtual-cursor infinite;

16
docs/docs/components/range.md
View File

@@ -125,8 +125,8 @@ You can customize the active and inactive portions of the track using the `--tra
```html {.example}
<wa-range
style="
--track-color-active: var(--wa-color-brand-spot);
--track-color-inactive: var(--wa-color-brand-fill-highlight);
--track-color-active: var(--wa-color-brand-fill-loud);
--track-color-inactive: var(--wa-color-brand-fill-normal);
"
></wa-range>
```
@@ -138,8 +138,8 @@ import WaRange from '@shoelace-style/shoelace/dist/react/range';
const App = () => (
<WaRange
style={{
'--track-color-active': 'var(--wa-color-brand-spot)',
'--track-color-inactive': 'var(--wa-color-brand-fill-highlight)'
'--track-color-active': 'var(--wa-color-brand-fill-loud)',
'--track-color-inactive': 'var(--wa-color-brand-fill-normal)'
}}
/>
);
@@ -155,8 +155,8 @@ You can customize the initial offset of the active track using the `--track-acti
min="-100"
max="100"
style="
--track-color-active: var(--wa-color-brand-spot);
--track-color-inactive: var(--wa-color-brand-fill-highlight);
--track-color-active: var(--wa-color-brand-fill-loud);
--track-color-inactive: var(--wa-color-brand-fill-normal);
--track-active-offset: 50%;
"
></wa-range>
@@ -171,8 +171,8 @@ const App = () => (
min={-100}
max={100}
style={{
'--track-color-active': 'var(--wa-color-brand-spot)',
'--track-color-inactive': 'var(--wa-color-brand-fill-highlight)',
'--track-color-active': 'var(--wa-color-brand-fill-loud)',
'--track-color-inactive': 'var(--wa-color-brand-fill-normal)',
'--track-active-offset': '50%'
}}
/>

8
docs/docs/components/rating.md
View File

@@ -147,8 +147,8 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
top: -4px;
left: 8px;
border-radius: var(--wa-corners-s);
background: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-text-on-spot);
background: var(--wa-color-neutral-fill-loud);
color: var(--wa-color-neutral-on-loud);
text-align: center;
padding: 4px 6px;
}
@@ -171,8 +171,8 @@ const css = `
top: -4px;
left: 8px;
border-radius: var(--wa-corners-s);
background: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-text-on-spot);
background: var(--wa-color-neutral-fill-loud);
color: var(--wa-color-neutral-on-loud);
text-align: center;
padding: 4px 6px;
}

4
docs/docs/components/split-panel.md
View File

@@ -242,7 +242,7 @@ To snap panels at specific positions while dragging, add the `snap` attribute wi
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wa-color-neutral-spot);
background: var(--wa-color-neutral-fill-loud);
transform: translateX(-3px);
}
@@ -273,7 +273,7 @@ const css = `
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--wa-color-neutral-spot);
background: var(--wa-color-neutral-fill-loud);
transform: translateX(-3px);
}

2
docs/docs/experimental/sandbox.md
View File

@@ -7,7 +7,7 @@ layout: page.njk
## Card
```html {.example}
<wa-card with-image class="card-overview">
<wa-card with-image with-footer class="card-overview">
<img
slot="image"
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"

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

@@ -35,7 +35,7 @@ hasOutline: false
:root,
#knobs {
scrollbar-color: var(--wa-color-neutral-border-highlight) var(--wa-color-surface-raised);
scrollbar-color: var(--wa-color-neutral-border-normal) var(--wa-color-surface-raised);
}
/* #region Lock theme styles */
@@ -48,25 +48,23 @@ hasOutline: false
--wa-color-shadow: rgb(0 0 0 / 0.1);
--wa-color-neutral-spot: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 75%);
--wa-color-neutral-spot-darker: color-mix(in oklab, var(--wa-color-neutral-spot), black 5%);
--wa-color-neutral-fill-subtle: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 10%);
--wa-color-neutral-fill-highlight: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 20%);
--wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 90%);
--wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 70%);
--wa-color-neutral-text-on-spot: color-mix(in oklab, var(--wa-color-surface-default) 90%, var(--wa-color-text-normal));
--wa-color-neutral-text-on-fill: color-mix(in oklab, var(--wa-color-surface-raised) 10%, var(--wa-color-text-normal));
--wa-color-neutral-text-on-surface: var(--wa-color-neutral-spot);
--wa-color-neutral-fill-loud: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 75%);
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 10%);
--wa-color-neutral-fill-normal: color-mix(in oklab, var(--wa-color-surface-default), var(--wa-color-text-normal) 20%);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 90%);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-text-normal), var(--wa-color-surface-default) 70%);
--wa-color-neutral-on-loud: color-mix(in oklab, var(--wa-color-surface-default) 90%, var(--wa-color-text-normal));
--wa-color-neutral-on-normal: color-mix(in oklab, var(--wa-color-surface-raised) 10%, var(--wa-color-text-normal));
--wa-color-neutral-on-quiet: var(--wa-color-neutral-fill-loud);
--wa-color-brand-spot: var(--wa-color-neutral-spot);
--wa-color-brand-spot-darker: var(--wa-color-neutral-spot-darker);
--wa-color-brand-fill-subtle: var(--wa-color-neutral-fill-subtle);
--wa-color-brand-fill-highlight: var(--wa-color-neutral-fill-highlight);
--wa-color-brand-border-subtle: var(--wa-color-neutral-border-subtle);
--wa-color-brand-border-highlight: var(--wa-color-neutral-border-highlight);
--wa-color-brand-text-on-spot: var(--wa-color-neutral-text-on-spot);
--wa-color-brand-text-on-fill: var(--wa-color-neutral-text-on-fill);
--wa-color-brand-text-on-surface: var(--wa-color-neutral-text-on-surface);
--wa-color-brand-fill-loud: var(--wa-color-neutral-fill-loud);
--wa-color-brand-fill-quiet: var(--wa-color-neutral-fill-quiet);
--wa-color-brand-fill-normal: var(--wa-color-neutral-fill-normal);
--wa-color-brand-border-quiet: var(--wa-color-neutral-border-quiet);
--wa-color-brand-border-normal: var(--wa-color-neutral-border-normal);
--wa-color-brand-on-loud: var(--wa-color-neutral-on-loud);
--wa-color-brand-on-normal: var(--wa-color-neutral-on-normal);
--wa-color-brand-on-quiet: var(--wa-color-neutral-on-quiet);
--wa-font-family-heading: Inconsolata, monospace;
--wa-font-family-body: Inconsolata, monospace;
@@ -159,8 +157,8 @@ hasOutline: false
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -290,7 +288,7 @@ hasOutline: false
#knobs wa-radio-group[name="color"] wa-radio {
border: 0.0625em solid var(--wa-color-neutral-border-subtle);
border: 0.0625em solid var(--wa-color-neutral-border-quiet);
border-radius: var(--wa-corners-m);
box-shadow: inset 0 0 0 0 transparent;
padding: 1em;
@@ -379,7 +377,7 @@ hasOutline: false
}
.file-uploader:is(:hover) {
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
}
/**
@@ -432,8 +430,8 @@ hasOutline: false
#icon-chooser-trigger {
--button-group-separator-border: none;
--label-color: var(--wa-color-neutral-text-on-surface);
--label-color-hover: color-mix(in oklab, var(--wa-color-neutral-text-on-surface), var(--wa-color-mix-hover));
--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);
}
@@ -723,7 +721,7 @@ hasOutline: false
border-radius: var(--wa-corners-circle);
}
&::part(button--checked) {
background: var(--wa-color-brand-spot);
background: var(--wa-color-brand-fill-loud);
}
}
}
@@ -1681,7 +1679,7 @@ hasOutline: false
padding: 0;
max-inline-size: 1400px;
margin-inline: auto;
border: var(--wa-border-width-s) var(--wa-color-neutral-border-subtle) var(--wa-border-style);
border: var(--wa-border-width-s) var(--wa-color-neutral-border-quiet) var(--wa-border-style);
overflow: clip;
}
@@ -1850,7 +1848,7 @@ hasOutline: false
.message-composer .grouped-buttons:not(:last-of-type) {
padding-inline-end: var(--wa-space-m);
border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-subtle);
border-right: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-neutral-border-quiet);
}
.message-composer wa-card::part(header) {
@@ -2266,6 +2264,16 @@ hasOutline: false
<wa-icon slot="icon" name="clock" variant="regular"></wa-icon>
This item will soon be discontinued
</wa-alert>
<wa-button-group label="Alignment">
<wa-button>Left</wa-button>
<wa-button>Center</wa-button>
<wa-button>Right</wa-button>
</wa-button-group>
<wa-button-group label="Alignment">
<wa-button variant="warning">Left</wa-button>
<wa-button variant="warning">Center</wa-button>
<wa-button variant="warning">Right</wa-button>
</wa-button-group>
<div>
<div style="margin: var(--wa-space-3xl) 0">
<wa-radio-group label="Choose a finish" name="finish" value="Matte" class="product-finish">

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

@@ -332,8 +332,8 @@ To expose custom properties as part of a component's API, scope them to the `:ho
```css
:host {
--color: var(--wa-color-brand-text-on-spot);
--background-color: var(--wa-color-brand-spot);
--color: var(--wa-color-brand-on-loud);
--background-color: var(--wa-color-brand-fill-loud);
}
```

369
docs/docs/theming/color.md
View File

@@ -20,11 +20,13 @@ layout: page.njk
}
.color-preview {
flex: 1 1 auto;
font-size: var(--wa-font-size-xs);
}
.color-swatch {
border-radius: var(--wa-corners-s);
height: 3em;
line-height: 2;
height: 2em;
padding-inline: var(--wa-space-xs);
text-align: center;
}
.text-swatch {
font-size: var(--wa-font-size-xl);
@@ -43,99 +45,51 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
- A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio, suitable for normal text (AA) and large text (AAA).
- A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio, suitable for all text (AAA).
<div class="color-name">Rose</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-95)"></div>
95
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-90)"></div>
90
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-80)"></div>
80
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-70)"></div>
70
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-60)"></div>
60
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-50)"></div>
50
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-40)"></div>
40
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-30)"></div>
30
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-20)"></div>
20
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-10)"></div>
10
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-rose-05)"></div>
05
</div>
</div>
<div class="color-name">Red</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-red-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -143,95 +97,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-yellow-05)"></div>
05
</div>
</div>
<div class="color-name">Lime</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-95)"></div>
95
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-90)"></div>
90
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-80)"></div>
80
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-70)"></div>
70
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-60)"></div>
60
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-50)"></div>
50
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-40)"></div>
40
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-30)"></div>
30
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-20)"></div>
20
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-10)"></div>
10
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-lime-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -239,95 +145,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-green-05)"></div>
05
</div>
</div>
<div class="color-name">Teal</div>
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-95)"></div>
95
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-90)"></div>
90
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-80)"></div>
80
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-70)"></div>
70
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-60)"></div>
60
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-50)"></div>
50
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-40)"></div>
40
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-30)"></div>
30
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-20)"></div>
20
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-10)"></div>
10
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-teal-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -335,47 +193,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-blue-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -383,47 +241,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-indigo-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -431,47 +289,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-violet-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -479,47 +337,47 @@ For easy WCAG 2.1 conformance, the lightness values between colors have a strong
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-gray-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -536,47 +394,47 @@ The primary and base color groups reference another literal color group. By defa
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-primary-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -584,47 +442,47 @@ The primary and base color groups reference another literal color group. By defa
<div class="color-group">
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-95)"></div>
95
<small>95</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-90)"></div>
90
<small>90</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-80)"></div>
80
<small>80</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-70)"></div>
70
<small>70</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-60)"></div>
60
<small>60</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-50)"></div>
50
<small>50</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-40)"></div>
40
<small>40</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-30)"></div>
30
<small>30</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-20)"></div>
20
<small>20</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-10)"></div>
10
<small>10</small>
</div>
<div class="color-preview">
<div class="color-swatch" style="background-color: var(--wa-color-base-05)"></div>
05
<small>05</small>
</div>
</div>
@@ -695,8 +553,8 @@ Mix colors are used in `color-mix()` functions to achieve consistent interaction
| Custom Property | Preview |
| ----------------------------- | ------------------------------- |
| `--wa-color-mix-hover` | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover))"></div></div></div> |
| `--wa-color-mix-active` | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-active))"></div></div></div> |
| `--wa-color-mix-hover` | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))"></div></div></div> |
| `--wa-color-mix-active` | <div class="color-group"><div class="color-preview" style="flex: 2 0 auto"><div class="color-swatch" style="background-color: color-mix(in oklab, transparent, var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active))"></div></div><div class="color-preview"><div class="color-swatch" style="background-color: color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active))"></div></div></div> |
## Semantic Colors
@@ -711,11 +569,12 @@ Semantic colors help reinforce a specific message, intended usage, or expected r
| Custom Property | <code>brand</code> | <code>success</code> | <code>neutral</code> | <code>warning</code> | <code>danger</code> |
| ----------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- | ------------------------------- |
| `--wa-color-*-spot` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-spot)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-spot)"></div></div> |
| `--wa-color-*-fill-subtle` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-subtle)"></div></div> |
| `--wa-color-*-fill-highlight` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-highlight)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-highlight)"></div></div> |
| `--wa-color-*-border-subtle` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-subtle)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-subtle)"></div></div> |
| `--wa-color-*-border-highlight` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-highlight)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-highlight)"></div></div> |
| `--wa-color-*-text-on-spot` | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-spot)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-spot)">AaBb</div></div> |
| `--wa-color-*-text-on-fill` | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-fill)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-fill)">AaBb</div></div> |
| `--wa-color-*-text-on-surface` | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-brand-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-success-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-neutral-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-warning-text-on-surface)">AaBb</div></div> | <div class="color-preview"><div class="text-swatch" style="color: var(--wa-color-danger-text-on-surface)">AaBb</div></div> |
| `--wa-color-*-fill-quiet` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet)"></div></div> |
| `--wa-color-*-fill-normal` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal)"></div></div> |<div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal)"></div></div> |
| `--wa-color-*-fill-loud` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud)"></div></div> |
| `--wa-color-*-border-quiet` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-quiet)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-quiet)"></div></div> |
| `--wa-color-*-border-normal` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-normal)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-normal)"></div></div> |
| `--wa-color-*-border-loud` | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-brand-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-success-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-neutral-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-warning-border-loud)"></div></div> | <div class="color-preview"><div class="color-swatch" style="border: var(--wa-border-width-s) solid var(--wa-color-danger-border-loud)"></div></div> |
| `--wa-color-*-on-quiet` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-quiet); color: var(--wa-color-brand-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-quiet); color: var(--wa-color-success-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-quiet); color: var(--wa-color-neutral-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-quiet); color: var(--wa-color-warning-on-quiet)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-quiet); color: var(--wa-color-danger-on-quiet)">AaBb</div></div> |
| `--wa-color-*-on-normal` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-normal); color: var(--wa-color-brand-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-normal); color: var(--wa-color-success-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-normal); color: var(--wa-color-neutral-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-normal); color: var(--wa-color-warning-on-normal)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-normal); color: var(--wa-color-danger-on-normal)">AaBb</div></div> |
| `--wa-color-*-on-loud` | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-success-fill-loud); color: var(--wa-color-success-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-neutral-fill-loud); color: var(--wa-color-neutral-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-warning-fill-loud); color: var(--wa-color-warning-on-loud)">AaBb</div></div> | <div class="color-preview"><div class="color-swatch" style="background-color: var(--wa-color-danger-fill-loud); color: var(--wa-color-danger-on-loud)">AaBb</div></div> |

30
src/components/alert/alert.styles.ts
View File

@@ -16,33 +16,33 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-subtle);
--border-color: var(--wa-color-brand-border-subtle);
--content-color: var(--wa-color-brand-text-on-fill);
--background: 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: var(--wa-color-success-fill-subtle);
--border-color: var(--wa-color-success-border-subtle);
--content-color: var(--wa-color-success-text-on-fill);
--background: 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: var(--wa-color-neutral-fill-subtle);
--border-color: var(--wa-color-neutral-border-subtle);
--content-color: var(--wa-color-neutral-text-on-fill);
--background: 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: var(--wa-color-warning-fill-subtle);
--border-color: var(--wa-color-warning-border-subtle);
--content-color: var(--wa-color-warning-text-on-fill);
--background: 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: var(--wa-color-danger-fill-subtle);
--border-color: var(--wa-color-danger-border-subtle);
--content-color: var(--wa-color-danger-text-on-fill);
--background: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-quiet);
--content-color: var(--wa-color-danger-on-normal);
}
.alert {

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--background: var(--wa-color-neutral-fill-highlight);
--content-color: var(--wa-color-neutral-text-on-fill);
--background: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
--size: 3rem;
display: inline-block;

20
src/components/badge/badge.styles.ts
View File

@@ -11,28 +11,28 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-spot);
--content-color: var(--wa-color-brand-text-on-spot);
--background: var(--wa-color-brand-fill-loud);
--content-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background: var(--wa-color-success-spot);
--content-color: var(--wa-color-success-text-on-spot);
--background: var(--wa-color-success-fill-loud);
--content-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-spot);
--content-color: var(--wa-color-warning-text-on-spot);
--background: var(--wa-color-warning-fill-loud);
--content-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-spot);
--content-color: var(--wa-color-neutral-text-on-spot);
--background: var(--wa-color-neutral-fill-loud);
--content-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-spot);
--content-color: var(--wa-color-danger-text-on-spot);
--background: var(--wa-color-danger-fill-loud);
--content-color: var(--wa-color-danger-on-loud);
}
.badge {

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

@@ -10,7 +10,7 @@ export default css`
align-items: center;
font: inherit;
font-weight: var(--wa-font-weight-action);
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-neutral-on-quiet);
line-height: var(--wa-font-line-height-regular);
white-space: nowrap;
}

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

@@ -18,28 +18,28 @@ export default css`
*/
:host([variant='brand']) {
--background: var(--wa-color-brand-spot);
--label-color: var(--wa-color-brand-text-on-spot);
--background: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
}
:host([variant='success']) {
--background: var(--wa-color-success-spot);
--label-color: var(--wa-color-success-text-on-spot);
--background: var(--wa-color-success-fill-loud);
--label-color: var(--wa-color-success-on-loud);
}
:host([variant='warning']) {
--background: var(--wa-color-warning-spot);
--label-color: var(--wa-color-warning-text-on-spot);
--background: var(--wa-color-warning-fill-loud);
--label-color: var(--wa-color-warning-on-loud);
}
:host([variant='neutral']) {
--background: var(--wa-color-neutral-spot);
--label-color: var(--wa-color-neutral-text-on-spot);
--background: var(--wa-color-neutral-fill-loud);
--label-color: var(--wa-color-neutral-on-loud);
}
:host([variant='danger']) {
--background: var(--wa-color-danger-spot);
--label-color: var(--wa-color-danger-text-on-spot);
--background: var(--wa-color-danger-fill-loud);
--label-color: var(--wa-color-danger-on-loud);
}
:host(:not([variant='text'])) {
@@ -57,34 +57,34 @@ export default css`
*/
:host([variant='brand'][outline]) {
--background-hover: var(--wa-color-brand-fill-subtle);
--label-color: var(--wa-color-brand-text-on-surface);
--label-color-hover: var(--wa-color-brand-text-on-fill);
--background-hover: var(--wa-color-brand-fill-quiet);
--label-color: var(--wa-color-brand-on-quiet);
--label-color-hover: var(--wa-color-brand-on-normal);
}
:host([variant='success'][outline]) {
--background-hover: var(--wa-color-success-fill-subtle);
--label-color: var(--wa-color-success-text-on-surface);
--label-color-hover: var(--wa-color-success-text-on-fill);
--background-hover: var(--wa-color-success-fill-quiet);
--label-color: var(--wa-color-success-on-quiet);
--label-color-hover: var(--wa-color-success-on-normal);
}
:host([variant='neutral'][outline]),
:host(.wa-button-group__button--radio:not([checked])) {
--background-hover: var(--wa-color-neutral-fill-subtle);
--label-color: var(--wa-color-neutral-text-on-surface);
--label-color-hover: var(--wa-color-neutral-text-on-fill);
--background-hover: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-quiet);
--label-color-hover: var(--wa-color-neutral-on-normal);
}
:host([variant='warning'][outline]) {
--background-hover: var(--wa-color-warning-fill-subtle);
--label-color: var(--wa-color-warning-text-on-surface);
--label-color-hover: var(--wa-color-warning-text-on-fill);
--background-hover: var(--wa-color-warning-fill-quiet);
--label-color: var(--wa-color-warning-on-quiet);
--label-color-hover: var(--wa-color-warning-on-normal);
}
:host([variant='danger'][outline]) {
--background-hover: var(--wa-color-danger-fill-subtle);
--label-color: var(--wa-color-danger-text-on-surface);
--label-color-hover: var(--wa-color-danger-text-on-fill);
--background-hover: var(--wa-color-danger-fill-quiet);
--label-color: var(--wa-color-danger-on-quiet);
--label-color-hover: var(--wa-color-danger-on-normal);
}
:host([outline]),
@@ -118,13 +118,13 @@ export default css`
*/
:host([checked]) {
--background: var(--wa-color-brand-fill-subtle);
--background: var(--wa-color-brand-fill-quiet);
--background-active: color-mix(in oklab, var(--background-hover), var(--wa-color-surface-default) 30%);
--background-hover: var(--background);
--border-color: var(--wa-form-controls-activated-color);
--border-color-active: var(--border-color);
--border-color-hover: var(--border-color);
--label-color: var(--wa-color-brand-text-on-fill);
--label-color: var(--wa-color-brand-on-normal);
--label-color-active: var(--label-color);
--label-color-hover: var(--label-color);
--indicator-color: var(--border-color);

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

@@ -87,7 +87,7 @@ export default css`
/* Checked/indeterminate */
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-text-on-spot);
color: var(--wa-color-brand-on-loud);
border-color: var(--border-color-checked);
background: var(--background-checked);
}

10
src/components/color-picker/color-picker.styles.ts
View File

@@ -172,7 +172,7 @@ export default css`
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 var(--wa-color-brand-spot);
box-shadow: 0 0 0 0 var(--wa-color-brand-fill-loud);
}
70% {
box-shadow: 0 0 0 0.5rem transparent;
@@ -236,10 +236,10 @@ export default css`
}
.color-picker__transparent-bg {
background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-highlight) 75%),
linear-gradient(45deg, var(--wa-color-neutral-fill-highlight) 25%, transparent 25%);
background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-normal) 75%),
linear-gradient(45deg, var(--wa-color-neutral-fill-normal) 25%, transparent 25%);
background-size: 10px 10px;
background-position:
0 0,

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

@@ -2,8 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--error-color: var(--wa-color-danger-spot);
--success-color: var(--wa-color-success-spot);
--error-color: var(--wa-color-danger-fill-loud);
--success-color: var(--wa-color-success-fill-loud);
display: inline-block;
}

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

@@ -23,11 +23,11 @@ export default css`
.icon-button:hover:not(.icon-button--disabled),
.icon-button:focus-visible:not(.icon-button--disabled) {
color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-fill-loud);
}
.icon-button:active:not(.icon-button--disabled) {
color: color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active));
color: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active));
}
.icon-button:focus {

6
src/components/image-comparer/image-comparer.styles.ts
View File

@@ -46,7 +46,7 @@ export default css`
top: 0;
width: var(--divider-width);
height: 100%;
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
translate: calc(var(--divider-width) / -2);
cursor: ew-resize;
}
@@ -59,10 +59,10 @@ export default css`
top: calc(50% - (var(--handle-size) / 2));
width: var(--handle-size);
height: var(--handle-size);
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: var(--wa-corners-circle);
font-size: calc(var(--handle-size) * 0.5);
color: var(--wa-color-neutral-text-on-fill);
color: var(--wa-color-neutral-on-normal);
cursor: inherit;
z-index: 10;
}

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

@@ -13,7 +13,7 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-subtle);
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
}
@@ -92,7 +92,7 @@ export default css`
.input__control:-webkit-autofill:focus,
.input__control:-webkit-autofill:active {
box-shadow: none;
-webkit-text-fill-color: var(--wa-color-brand-text-on-fill);
-webkit-text-fill-color: var(--wa-color-brand-on-normal);
caret-color: var(--wa-form-controls-value-color);
}
@@ -123,7 +123,7 @@ export default css`
.input__prefix ::slotted(wa-icon),
.input__suffix ::slotted(wa-icon) {
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
}
/*
@@ -225,7 +225,7 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
border: none;
background: none;
padding: 0;
@@ -235,7 +235,7 @@ export default css`
.input__clear:active,
.input__password-toggle:active {
color: color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active));
color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
}
.input__clear:focus,

6
src/components/menu-item/menu-item.styles.ts
View File

@@ -99,14 +99,14 @@ export default css`
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
color: var(--wa-color-text-normal);
}
:host(:focus-visible) .menu-item {
outline: none;
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
opacity: 1;
}

2
src/components/menu-label/menu-label.styles.ts
View File

@@ -10,7 +10,7 @@ export default css`
display: inline-block;
font: inherit;
font-weight: var(--wa-font-weight-medium);
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-neutral-on-quiet);
padding: var(--wa-space-2xs) calc(var(--wa-space-2xs) + var(--wa-space-xl));
user-select: none;
-webkit-user-select: none;

10
src/components/option/option.styles.ts
View File

@@ -16,21 +16,21 @@ export default css`
display: flex;
align-items: center;
font: inherit;
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-neutral-on-quiet);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-2xs);
transition: var(--wa-transition-fast) fill;
cursor: pointer;
}
.option--hover:not(.option--current):not(.option--disabled) {
background-color: var(--wa-color-neutral-fill-highlight);
color: var(--wa-color-neutral-text-on-fill);
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-neutral-on-normal);
}
.option--current,
.option--current.option--disabled {
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
opacity: 1;
}

6
src/components/progress-bar/progress-bar.styles.ts
View File

@@ -3,9 +3,9 @@ import { css } from 'lit';
export default css`
:host {
--height: 1.25rem;
--track-color: var(--wa-color-neutral-fill-highlight);
--indicator-color: var(--wa-color-brand-spot);
--label-color: var(--wa-color-brand-text-on-spot);
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-color: var(--wa-color-brand-fill-loud);
--label-color: var(--wa-color-brand-on-loud);
--box-shadow: none;
display: block;

4
src/components/progress-ring/progress-ring.styles.ts
View File

@@ -4,9 +4,9 @@ export default css`
:host {
--size: 8rem;
--track-width: 0.25rem;
--track-color: var(--wa-color-neutral-fill-highlight);
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-width: var(--track-width);
--indicator-color: var(--wa-color-brand-spot);
--indicator-color: var(--wa-color-brand-fill-loud);
--indicator-transition-duration: 0.35s;
display: inline-flex;

12
src/components/range/range.styles.ts
View File

@@ -7,8 +7,8 @@ export default css`
--thumb-shadow: initial;
--thumb-size: calc(1rem * var(--wa-form-controls-value-line-height));
--tooltip-offset: calc(var(--wa-tooltip-arrow-size) * 2.5);
--track-color-active: var(--wa-color-neutral-fill-highlight);
--track-color-inactive: var(--wa-color-neutral-fill-highlight);
--track-color-active: var(--wa-color-neutral-fill-normal);
--track-color-inactive: var(--wa-color-neutral-fill-normal);
--track-active-offset: 0%;
--track-height: calc(var(--thumb-size) * 0.25);
@@ -150,10 +150,10 @@ export default css`
z-index: var(--wa-z-index-tooltip);
left: 0;
border-radius: var(--wa-corners-s);
background-color: var(--wa-color-neutral-spot);
background-color: var(--wa-color-neutral-fill-loud);
font: inherit;
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-spot);
color: var(--wa-color-neutral-on-loud);
opacity: 0;
padding: var(--wa-space-2xs) var(--wa-space-xs);
transition: var(--wa-transition-fast) opacity;
@@ -179,7 +179,7 @@ export default css`
}
.range--tooltip-top .range__tooltip:after {
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-spot);
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
top: 100%;
@@ -191,7 +191,7 @@ export default css`
}
.range--tooltip-bottom .range__tooltip:after {
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-spot);
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-loud);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
bottom: 100%;

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

@@ -2,7 +2,7 @@ import { css } from 'lit';
export default css`
:host {
--symbol-color: var(--wa-color-neutral-fill-highlight);
--symbol-color: var(--wa-color-neutral-fill-normal);
--symbol-color-active: var(--wa-color-yellow-70);
--symbol-size: var(--wa-font-size-l);
--symbol-spacing: var(--wa-space-3xs);

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

@@ -13,7 +13,7 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-subtle);
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
}
@@ -239,7 +239,7 @@ export default css`
flex: 0;
display: inline-flex;
align-items: center;
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
}
/* Clear button */
@@ -248,7 +248,7 @@ export default css`
align-items: center;
justify-content: center;
font-size: inherit;
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
border: none;
background: none;
padding: 0;
@@ -261,7 +261,7 @@ export default css`
}
.select__clear:active {
color: color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active));
color: color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active));
}
/* Expand icon */

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

@@ -3,8 +3,8 @@ import { css } from 'lit';
export default css`
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-fill-highlight);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), var(--wa-color-surface-raised) 30%);
--color: var(--wa-color-neutral-fill-normal);
--sheen-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), var(--wa-color-surface-raised) 30%);
display: block;
position: relative;

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

@@ -8,8 +8,8 @@ import { css } from 'lit';
export default css`
:host {
--track-width: 2px;
--track-color: var(--wa-color-neutral-fill-highlight);
--indicator-color: var(--wa-color-brand-spot);
--track-color: var(--wa-color-neutral-fill-normal);
--indicator-color: var(--wa-color-brand-fill-loud);
--speed: 2s;
flex: none;

8
src/components/split-panel/split-panel.styles.ts
View File

@@ -21,8 +21,8 @@ export default css`
position: relative;
align-items: center;
justify-content: center;
background-color: var(--wa-color-neutral-border-highlight);
color: var(--wa-color-neutral-text-on-fill);
background-color: var(--wa-color-neutral-border-normal);
color: var(--wa-color-neutral-on-normal);
z-index: 1;
}
@@ -31,8 +31,8 @@ export default css`
}
:host(:not([disabled])) .divider:focus-visible {
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
}
:host([disabled]) .divider {

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

@@ -8,11 +8,11 @@ export default css`
--border-color-checked: var(--background-checked);
--border-style: var(--wa-form-controls-border-style);
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
--box-shadow: initial;
--height: calc(1em * var(--wa-form-controls-value-line-height));
--thumb-color: var(--wa-form-controls-resting-color);
--thumb-color-checked: var(--wa-form-controls-background);
--thumb-shadow: none;
--thumb-shadow: initial;
--thumb-size: calc((var(--height) - var(--border-width) * 2) * 0.75);
--width: calc(var(--height) * 1.75);

4
src/components/tab-group/tab-group.styles.ts
View File

@@ -2,8 +2,8 @@ import { css } from 'lit';
export default css`
:host {
--indicator-color: var(--wa-color-brand-spot);
--track-color: var(--wa-color-neutral-fill-highlight);
--indicator-color: var(--wa-color-brand-fill-loud);
--track-color: var(--wa-color-neutral-fill-normal);
--track-width: 2px;
display: block;

6
src/components/tab/tab.styles.ts
View File

@@ -10,7 +10,7 @@ export default css`
align-items: center;
font: inherit;
font-weight: var(--wa-font-weight-action);
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-neutral-on-quiet);
padding: var(--wa-space-m) var(--wa-space-l);
white-space: nowrap;
user-select: none;
@@ -22,7 +22,7 @@ export default css`
}
.tab:hover:not(.tab--disabled) {
color: var(--wa-color-neutral-text-on-surface);
color: var(--wa-color-neutral-on-quiet);
}
.tab:focus {
@@ -35,7 +35,7 @@ export default css`
}
.tab.tab--active:not(.tab--disabled) {
color: var(--wa-color-brand-text-on-surface);
color: var(--wa-color-brand-on-quiet);
}
.tab.tab--closable {

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

@@ -10,33 +10,33 @@ export default css`
}
:host([variant='brand']) {
--background: var(--wa-color-brand-fill-subtle);
--border-color: var(--wa-color-brand-border-highlight);
--content-color: var(--wa-color-brand-text-on-fill);
--background: 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: var(--wa-color-success-fill-subtle);
--border-color: var(--wa-color-success-border-highlight);
--content-color: var(--wa-color-success-text-on-fill);
--background: 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: var(--wa-color-warning-fill-subtle);
--border-color: var(--wa-color-warning-border-highlight);
--content-color: var(--wa-color-warning-text-on-fill);
--background: 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: var(--wa-color-neutral-fill-subtle);
--border-color: var(--wa-color-neutral-border-highlight);
--content-color: var(--wa-color-neutral-text-on-fill);
--background: 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: var(--wa-color-danger-fill-subtle);
--border-color: var(--wa-color-danger-border-highlight);
--content-color: var(--wa-color-danger-text-on-fill);
--background: var(--wa-color-danger-fill-quiet);
--border-color: var(--wa-color-danger-border-normal);
--content-color: var(--wa-color-danger-on-normal);
}
.tag {

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

@@ -13,7 +13,7 @@ export default css`
}
:host([filled]) {
--background: var(--wa-color-neutral-fill-subtle);
--background: var(--wa-color-neutral-fill-quiet);
--border-color: var(--background);
}

6
src/components/tooltip/tooltip.styles.ts
View File

@@ -11,7 +11,7 @@ export default css`
.tooltip {
--arrow-size: var(--wa-tooltip-arrow-size);
--arrow-color: var(--wa-color-neutral-spot);
--arrow-color: var(--wa-color-neutral-fill-loud);
}
.tooltip::part(popup) {
@@ -39,12 +39,12 @@ export default css`
width: max-content;
max-width: var(--max-width);
border-radius: var(--wa-corners-s);
background-color: var(--wa-color-neutral-spot);
background-color: var(--wa-color-neutral-fill-loud);
font: inherit;
line-height: var(--wa-line-height-regular);
text-align: start;
white-space: normal;
color: var(--wa-color-neutral-text-on-spot);
color: var(--wa-color-neutral-on-loud);
padding: var(--wa-space-2xs) var(--wa-space-xs);
user-select: none;
-webkit-user-select: none;

8
src/components/tree-item/tree-item.styles.ts
View File

@@ -53,7 +53,7 @@ export default css`
align-items: center;
justify-content: center;
box-sizing: content-box;
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
padding: var(--wa-space-xs);
width: 1rem;
height: 1rem;
@@ -105,12 +105,12 @@ export default css`
}
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
background-color: var(--wa-color-neutral-fill-subtle);
border-inline-start-color: var(--wa-color-brand-spot);
background-color: var(--wa-color-neutral-fill-quiet);
border-inline-start-color: var(--wa-color-brand-fill-loud);
}
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-fill-loud);
}
.tree-item__label {

186
src/themes/active.css
View File

@@ -113,7 +113,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-05);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -153,55 +153,50 @@
* Subtle colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
*/
--wa-color-brand-spot: var(--wa-color-primary-80);
--wa-color-brand-spot-darker: var(--wa-color-primary-70);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
--wa-color-brand-border-highlight: var(--wa-color-primary-80);
--wa-color-brand-text-on-spot: black;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-80);
--wa-color-brand-on-loud: black;
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-70);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: black;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
--wa-color-success-on-loud: black;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-70);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: black;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
--wa-color-warning-on-loud: black;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-80);
--wa-color-danger-spot-darker: var(--wa-color-red-70);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: black;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-80);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
--wa-color-danger-on-loud: black;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: black;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: black;
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -307,7 +302,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -333,8 +328,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -384,7 +379,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -401,55 +396,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-80);
--wa-color-brand-spot-darker: var(--wa-color-primary-70);
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
--wa-color-brand-border-subtle: var(--wa-color-primary-20);
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
--wa-color-brand-text-on-spot: black;
--wa-color-brand-text-on-fill: var(--wa-color-primary-90);
--wa-color-brand-text-on-surface: var(--wa-color-primary-80);
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-on-loud: black;
--wa-color-brand-on-normal: var(--wa-color-primary-90);
--wa-color-brand-on-quiet: var(--wa-color-primary-80);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-70);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: black;
--wa-color-success-text-on-fill: var(--wa-color-green-90);
--wa-color-success-text-on-surface: var(--wa-color-green-80);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: black;
--wa-color-success-on-normal: var(--wa-color-green-90);
--wa-color-success-on-quiet: var(--wa-color-green-80);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-70);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: black;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: black;
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
--wa-color-warning-on-quiet: var(--wa-color-yellow-80);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-60);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: black;
--wa-color-danger-text-on-fill: var(--wa-color-red-80);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-danger-fill-loud: var(--wa-color-red-70);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: black;
--wa-color-danger-on-normal: var(--wa-color-red-80);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: black;
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-on-loud: black;
--wa-color-neutral-on-normal: var(--wa-color-base-80);
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
.hero-background::after {
backdrop-filter: brightness(0.8);
@@ -496,12 +486,12 @@
}
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-subtle);
--label-color: var(--wa-color-neutral-text-on-fill);
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
}
wa-rating {
--symbol-color-active: var(--wa-color-brand-text-on-surface);
--symbol-color-active: var(--wa-color-brand-on-quiet);
}
}

26
src/themes/applied.css
View File

@@ -137,22 +137,22 @@ mark {
}
ins {
background-color: var(--wa-color-success-fill-subtle);
color: var(--wa-color-success-text-on-fill);
background-color: var(--wa-color-success-fill-quiet);
color: var(--wa-color-success-on-normal);
border-radius: var(--wa-corners-s);
text-decoration: none;
}
del {
background-color: var(--wa-color-danger-fill-subtle);
color: var(--wa-color-danger-text-on-fill);
background-color: var(--wa-color-danger-fill-quiet);
color: var(--wa-color-danger-on-normal);
border-radius: var(--wa-corners-s);
text-decoration: none;
padding: 0.125em 0.25em;
}
mark {
background-color: var(--wa-color-warning-fill-subtle);
background-color: var(--wa-color-warning-fill-quiet);
color: inherit;
border-radius: var(--wa-corners-s);
padding: 0.125em 0.25em;
@@ -221,13 +221,13 @@ pre:has(code) {
}
kbd {
border: solid 1px var(--wa-color-neutral-border-subtle);
border: solid 1px var(--wa-color-neutral-border-quiet);
box-shadow:
inset 0 1px 0 1px rgb(255 255 255 / 0.2),
0 1px 0 0 rgb(0 0 0 / 0.2);
font-family: var(--wa-font-family-code);
border-radius: var(--wa-corners-s);
color: var(--wa-color-neutral-text-on-fill);
color: var(--wa-color-neutral-on-normal);
padding: 0.125em 0.4em;
}
@@ -241,7 +241,7 @@ blockquote {
font-family: var(--wa-font-family-longform);
font-size: var(--wa-font-size-l);
font-style: italic;
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-xl);
margin: 0 0 var(--wa-space-xl) 0;
@@ -277,7 +277,7 @@ li > ol {
/* Details */
details {
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
border-radius: var(--wa-panel-corners);
padding: 0;
margin: 0;
@@ -345,12 +345,12 @@ tbody tr {
}
tbody tr:hover {
background-color: color-mix(in oklab, var(--wa-color-brand-fill-highlight), transparent 50%);
border-top-color: var(--wa-color-brand-border-subtle);
background-color: color-mix(in oklab, var(--wa-color-brand-fill-normal), transparent 50%);
border-top-color: var(--wa-color-brand-border-quiet);
}
tbody tr:hover + tr {
border-top-color: var(--wa-color-brand-border-subtle);
border-top-color: var(--wa-color-brand-border-quiet);
}
th {
@@ -452,7 +452,7 @@ textarea {
}
table.wa-alternating-row-colors tbody tr:nth-child(2n + 1) {
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), transparent 80%);
background-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 80%);
}
/* Print styles */

244
src/themes/brutalist.css
View File

@@ -114,7 +114,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-50);
--wa-color-text-link: var(--wa-color-neutral-text-on-surface);
--wa-color-text-link: var(--wa-color-neutral-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -154,55 +154,50 @@
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-20);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-80);
--wa-color-brand-border-highlight: var(--wa-color-primary-60);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: var(--wa-color-primary-80);
--wa-color-brand-border-normal: var(--wa-color-primary-60);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-80);
--wa-color-success-border-highlight: var(--wa-color-green-60);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-80);
--wa-color-success-border-normal: var(--wa-color-green-60);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-80);
--wa-color-warning-border-highlight: var(--wa-color-yellow-60);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-80);
--wa-color-warning-border-normal: var(--wa-color-yellow-60);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-80);
--wa-color-danger-border-highlight: var(--wa-color-red-60);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-80);
--wa-color-danger-border-normal: var(--wa-color-red-60);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-20);
--wa-color-neutral-spot-darker: var(--wa-color-base-10);
--wa-color-neutral-fill-subtle: var(--wa-color-base-90);
--wa-color-neutral-fill-highlight: var(--wa-color-base-70);
--wa-color-neutral-border-subtle: var(--wa-color-base-80);
--wa-color-neutral-border-highlight: var(--wa-color-base-20);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-30);
--wa-color-neutral-text-on-surface: var(--wa-color-base-10);
--wa-color-neutral-fill-loud: var(--wa-color-base-20);
--wa-color-neutral-fill-quiet: var(--wa-color-base-90);
--wa-color-neutral-fill-normal: var(--wa-color-base-70);
--wa-color-neutral-border-quiet: var(--wa-color-base-80);
--wa-color-neutral-border-normal: var(--wa-color-base-20);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-30);
--wa-color-neutral-on-quiet: var(--wa-color-base-10);
/**
* Typography
@@ -308,7 +303,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-neutral-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-neutral-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -334,8 +329,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-neutral-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-neutral-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
@@ -385,7 +380,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-70);
--wa-color-text-link: var(--wa-color-neutral-text-on-surface);
--wa-color-text-link: var(--wa-color-neutral-on-quiet);
--wa-color-selection-background: var(--wa-color-base-40);
--wa-color-selection-text: white;
@@ -402,67 +397,62 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-70);
--wa-color-brand-spot-darker: var(--wa-color-primary-80);
--wa-color-brand-fill-subtle: var(--wa-color-primary-20);
--wa-color-brand-fill-highlight: var(--wa-color-primary-30);
--wa-color-brand-border-subtle: var(--wa-color-primary-40);
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
--wa-color-brand-text-on-spot: var(--wa-color-primary-10);
--wa-color-brand-text-on-fill: var(--wa-color-primary-95);
--wa-color-brand-text-on-surface: var(--wa-color-primary-80);
--wa-color-brand-fill-loud: var(--wa-color-primary-70);
--wa-color-brand-fill-quiet: var(--wa-color-primary-20);
--wa-color-brand-fill-normal: var(--wa-color-primary-30);
--wa-color-brand-border-quiet: var(--wa-color-primary-40);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-on-loud: var(--wa-color-primary-10);
--wa-color-brand-on-normal: var(--wa-color-primary-95);
--wa-color-brand-on-quiet: var(--wa-color-primary-80);
--wa-color-success-spot: var(--wa-color-green-70);
--wa-color-success-spot-darker: var(--wa-color-green-80);
--wa-color-success-fill-subtle: var(--wa-color-green-20);
--wa-color-success-fill-highlight: var(--wa-color-green-30);
--wa-color-success-border-subtle: var(--wa-color-green-40);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: var(--wa-color-green-10);
--wa-color-success-text-on-fill: var(--wa-color-green-95);
--wa-color-success-text-on-surface: var(--wa-color-green-80);
--wa-color-success-fill-loud: var(--wa-color-green-70);
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-30);
--wa-color-success-border-quiet: var(--wa-color-green-40);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: var(--wa-color-green-10);
--wa-color-success-on-normal: var(--wa-color-green-95);
--wa-color-success-on-quiet: var(--wa-color-green-80);
--wa-color-warning-spot: var(--wa-color-yellow-70);
--wa-color-warning-spot-darker: var(--wa-color-yellow-80);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-30);
--wa-color-warning-border-subtle: var(--wa-color-yellow-40);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-80);
--wa-color-warning-fill-loud: var(--wa-color-yellow-70);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
--wa-color-warning-fill-normal: var(--wa-color-yellow-30);
--wa-color-warning-border-quiet: var(--wa-color-yellow-40);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: var(--wa-color-yellow-10);
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
--wa-color-warning-on-quiet: var(--wa-color-yellow-80);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-80);
--wa-color-danger-fill-subtle: var(--wa-color-red-20);
--wa-color-danger-fill-highlight: var(--wa-color-red-30);
--wa-color-danger-border-subtle: var(--wa-color-red-40);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: var(--wa-color-red-10);
--wa-color-danger-text-on-fill: var(--wa-color-red-95);
--wa-color-danger-text-on-surface: var(--wa-color-red-80);
--wa-color-danger-fill-loud: var(--wa-color-red-70);
--wa-color-danger-fill-quiet: var(--wa-color-red-20);
--wa-color-danger-fill-normal: var(--wa-color-red-30);
--wa-color-danger-border-quiet: var(--wa-color-red-40);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: var(--wa-color-red-10);
--wa-color-danger-on-normal: var(--wa-color-red-95);
--wa-color-danger-on-quiet: var(--wa-color-red-80);
--wa-color-neutral-spot: var(--wa-color-base-95);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-30);
--wa-color-neutral-fill-highlight: var(--wa-color-base-40);
--wa-color-neutral-border-subtle: var(--wa-color-base-50);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
--wa-color-neutral-text-on-fill: var(--wa-color-base-95);
--wa-color-neutral-text-on-surface: var(--wa-color-base-80);
--wa-color-neutral-fill-loud: var(--wa-color-base-95);
--wa-color-neutral-fill-quiet: var(--wa-color-base-30);
--wa-color-neutral-fill-normal: var(--wa-color-base-40);
--wa-color-neutral-border-quiet: var(--wa-color-base-50);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: var(--wa-color-base-10);
--wa-color-neutral-on-normal: var(--wa-color-base-95);
--wa-color-neutral-on-quiet: var(--wa-color-base-80);
}
/* #region Custom Styles */
@container preview (min-width: 0) {
.preview-container pre {
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-subtle);
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
}
.preview-container pre,
.preview-container code {
font-size: var(--wa-font-size-m);
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
}
/* syntax highlighting */
@@ -530,7 +520,7 @@
wa-rating {
--symbol-size: var(--wa-font-size-l);
--symbol-color: color-mix(in oklab, var(--wa-color-base-20), transparent 50%);
--symbol-color-active: var(--wa-color-neutral-spot);
--symbol-color-active: var(--wa-color-neutral-fill-loud);
}
wa-alert {
@@ -543,25 +533,25 @@
}
&[variant='brand'] {
--icon-color: var(--wa-color-brand-text-on-fill);
--icon-color: var(--wa-color-brand-on-normal);
}
&[variant='success'] {
--icon-color: var(--wa-color-success-text-on-fill);
--icon-color: var(--wa-color-success-on-normal);
}
&[variant='warning'] {
--icon-color: var(--wa-color-warning-text-on-fill);
--icon-color: var(--wa-color-warning-on-normal);
}
&[variant='danger'] {
--icon-color: var(--wa-color-danger-text-on-fill);
--icon-color: var(--wa-color-danger-on-normal);
}
&[variant='neutral'] {
--icon-color: var(--wa-color-neutral-text-on-fill);
--icon-color: var(--wa-color-neutral-on-normal);
}
}
wa-carousel {
--pagination-color-activated: var(--wa-color-primary-70);
--pagination-color-resting: var(--wa-color-neutral-fill-highlight);
--pagination-color-resting: var(--wa-color-neutral-fill-normal);
}
wa-carousel::part(scroll-container) {
@@ -608,19 +598,19 @@
--border-width: 0 0 0 var(--wa-panel-border-width);
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-subtle);
--border-color: var(--wa-color-brand-border-quiet);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-subtle);
--border-color: var(--wa-color-success-border-quiet);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-subtle);
--border-color: var(--wa-color-warning-border-quiet);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-subtle);
--border-color: var(--wa-color-danger-border-quiet);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-subtle);
--border-color: var(--wa-color-neutral-border-quiet);
}
}
@@ -686,7 +676,7 @@
}
.hero wa-button {
--background: var(--wa-color-neutral-spot);
--background: var(--wa-color-neutral-fill-loud);
margin-block-start: var(--wa-space-xl);
font-size: var(--wa-font-size-l);
}
@@ -744,7 +734,7 @@
}
.blog wa-avatar::part(image) {
border: var(--wa-border-width-s) solid var(--wa-color-brand-spot);
border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
border-radius: var(--wa-corners-circle);
}
@@ -760,15 +750,15 @@
}
.message-composer wa-card::part(header) {
background-color: var(--wa-color-neutral-spot);
background-color: var(--wa-color-neutral-fill-loud);
}
.message-composer .grouped-buttons {
--wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-30), white 40%);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-30), white 40%);
}
.message-composer [slot='header'] wa-icon-button::part(base) {
color: var(--wa-color-neutral-text-on-spot);
color: var(--wa-color-neutral-on-loud);
}
.message-composer .grouped-buttons wa-icon-button::part(base) {
@@ -778,17 +768,17 @@
}
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
background-color: var(--wa-color-neutral-fill-highlight);
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-text-normal);
}
.message-composer wa-tooltip::part(body) {
background-color: var(--wa-color-brand-spot);
color: var(--wa-color-brand-text-on-spot);
background-color: var(--wa-color-brand-fill-loud);
color: var(--wa-color-brand-on-loud);
}
.message-composer wa-tooltip::part(base__arrow) {
--arrow-color: var(--wa-color-brand-spot);
--arrow-color: var(--wa-color-brand-fill-loud);
}
.message-composer wa-card::part(footer) {
@@ -797,14 +787,14 @@
}
.support-table th {
background-color: var(--wa-color-neutral-spot);
color: var(--wa-color-neutral-text-on-spot);
background-color: var(--wa-color-neutral-fill-loud);
color: var(--wa-color-neutral-on-loud);
}
.support-table th wa-checkbox {
--background: transparent;
--border-color: var(--wa-color-neutral-text-on-spot);
--border-color-checked: var(--wa-color-neutral-text-on-spot);
--border-color: var(--wa-color-neutral-on-loud);
--border-color-checked: var(--wa-color-neutral-on-loud);
}
.checkout-form {
@@ -828,19 +818,19 @@
& wa-alert {
&[variant='brand'] {
--icon-color: var(--wa-color-brand-text-on-surface);
--icon-color: var(--wa-color-brand-on-quiet);
}
&[variant='success'] {
--icon-color: var(--wa-color-success-text-on-surface);
--icon-color: var(--wa-color-success-on-quiet);
}
&[variant='warning'] {
--icon-color: var(--wa-color-warning-text-on-surface);
--icon-color: var(--wa-color-warning-on-quiet);
}
&[variant='danger'] {
--icon-color: var(--wa-color-danger-text-on-surface);
--icon-color: var(--wa-color-danger-on-quiet);
}
&[variant='neutral'] {
--icon-color: var(--wa-color-neutral-text-on-surface);
--icon-color: var(--wa-color-neutral-on-quiet);
}
}

182
src/themes/classic.css
View File

@@ -115,7 +115,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -155,55 +155,50 @@
* Subtle colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
--wa-color-brand-border-highlight: var(--wa-color-primary-80);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-80);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-40);
--wa-color-neutral-spot-darker: var(--wa-color-base-30);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-40);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -337,8 +332,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -382,7 +377,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -399,62 +394,57 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
--wa-color-brand-border-subtle: var(--wa-color-primary-20);
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-70);
--wa-color-brand-text-on-surface: var(--wa-color-primary-60);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-70);
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
}
/* #region Custom Styles */
@container preview (min-width: 0) {
.hero-background {
height: 70rem;
background: linear-gradient(174deg, var(--wa-color-brand-fill-highlight) 0 70%, transparent 70% 100%);
background: linear-gradient(174deg, var(--wa-color-brand-fill-normal) 0 70%, transparent 70% 100%);
position: absolute;
top: 0;
left: 0;
@@ -479,7 +469,7 @@
.hero .title {
text-align: right;
color: var(--wa-color-brand-text-on-fill);
color: var(--wa-color-brand-on-normal);
}
}

30
src/themes/classic_components.css
View File

@@ -8,33 +8,33 @@ wa-alert {
font-size: var(--wa-font-size-s);
&[variant='brand'] {
--border-color: var(--wa-color-brand-spot) var(--wa-color-neutral-border-subtle)
var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
--icon-color: var(--wa-color-brand-spot);
--border-color: var(--wa-color-brand-fill-loud) var(--wa-color-neutral-border-quiet)
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
--icon-color: var(--wa-color-brand-fill-loud);
}
&[variant='success'] {
--border-color: var(--wa-color-success-spot) var(--wa-color-neutral-border-subtle)
var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
--icon-color: var(--wa-color-success-spot);
--border-color: var(--wa-color-success-fill-loud) var(--wa-color-neutral-border-quiet)
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
--icon-color: var(--wa-color-success-fill-loud);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-spot) var(--wa-color-neutral-border-subtle)
var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
--icon-color: var(--wa-color-neutral-spot);
--border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-neutral-border-quiet)
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
--icon-color: var(--wa-color-neutral-fill-loud);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-spot) var(--wa-color-neutral-border-subtle)
var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
--icon-color: var(--wa-color-warning-spot);
--border-color: var(--wa-color-warning-fill-loud) var(--wa-color-neutral-border-quiet)
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
--icon-color: var(--wa-color-warning-fill-loud);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-spot) var(--wa-color-neutral-border-subtle)
var(--wa-color-neutral-border-subtle) var(--wa-color-neutral-border-subtle);
--icon-color: var(--wa-color-danger-spot);
--border-color: var(--wa-color-danger-fill-loud) var(--wa-color-neutral-border-quiet)
var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
--icon-color: var(--wa-color-danger-fill-loud);
}
}
/* #endregion */

184
src/themes/color_standard.css
View File

@@ -1,122 +1,86 @@
:root,
:host {
--wa-color-rose-95: #fdeef5;
--wa-color-rose-90: #fbdeeb;
--wa-color-rose-80: #f7b8d3;
--wa-color-rose-70: #f391b9;
--wa-color-rose-60: #ee669b;
--wa-color-rose-50: #de1d6a;
--wa-color-rose-40: #ab174e;
--wa-color-rose-30: #88123b;
--wa-color-rose-20: #630d29;
--wa-color-rose-10: #3e0817;
--wa-color-rose-05: #26050c;
--wa-color-red-95: #ffefef;
--wa-color-red-90: #ffdddc;
--wa-color-red-80: #ffb7b6;
--wa-color-red-70: #fc9090;
--wa-color-red-60: #f2676c;
--wa-color-red-50: #de2d44;
--wa-color-red-40: #b11036;
--wa-color-red-30: #861a2f;
--wa-color-red-20: #641122;
--wa-color-red-10: #400712;
--wa-color-red-05: #2a030a;
--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-red-05: #290601;
--wa-color-yellow-95: #fbf3c9;
--wa-color-yellow-90: #ffe492;
--wa-color-yellow-95: #fdf3ba;
--wa-color-yellow-90: #fee590;
--wa-color-yellow-80: #fcc041;
--wa-color-yellow-70: #e5a23d;
--wa-color-yellow-60: #cc853a;
--wa-color-yellow-50: #a86633;
--wa-color-yellow-40: #824a2a;
--wa-color-yellow-30: #6a3825;
--wa-color-yellow-20: #4f281d;
--wa-color-yellow-10: #2e1813;
--wa-color-yellow-05: #1a0e0a;
--wa-color-yellow-70: #f39b00;
--wa-color-yellow-60: #e07b00;
--wa-color-yellow-50: #bb5a00;
--wa-color-yellow-40: #924200;
--wa-color-yellow-30: #743200;
--wa-color-yellow-20: #572300;
--wa-color-yellow-10: #361300;
--wa-color-yellow-05: #240b00;
--wa-color-lime-95: #eff4e3;
--wa-color-lime-90: #dfeac7;
--wa-color-lime-80: #bcd288;
--wa-color-lime-70: #98bb4a;
--wa-color-lime-60: #74a30b;
--wa-color-lime-50: #588000;
--wa-color-lime-40: #436100;
--wa-color-lime-30: #354d00;
--wa-color-lime-20: #263700;
--wa-color-lime-10: #172100;
--wa-color-lime-05: #0d1300;
--wa-color-green-95: #e2f8df;
--wa-color-green-95: #e2f9e2;
--wa-color-green-90: #c2f2c1;
--wa-color-green-80: #68e27a;
--wa-color-green-70: #00cb50;
--wa-color-green-60: #00ae4b;
--wa-color-green-50: #008840;
--wa-color-green-40: #006834;
--wa-color-green-30: #00522c;
--wa-color-green-20: #003b22;
--wa-color-green-10: #002418;
--wa-color-green-05: #001611;
--wa-color-green-80: #92da97;
--wa-color-green-70: #5dc36f;
--wa-color-green-60: #00ac49;
--wa-color-green-50: #008825;
--wa-color-green-40: #006800;
--wa-color-green-30: #005300;
--wa-color-green-20: #003c00;
--wa-color-green-10: #002400;
--wa-color-green-05: #001700;
--wa-color-teal-95: #e5f5f5;
--wa-color-teal-90: #cbecec;
--wa-color-teal-80: #8ed6d5;
--wa-color-teal-70: #50bfbe;
--wa-color-teal-60: #1ea5a4;
--wa-color-teal-50: #188180;
--wa-color-teal-40: #126261;
--wa-color-teal-30: #0e4d4d;
--wa-color-teal-20: #0a3737;
--wa-color-teal-10: #062121;
--wa-color-teal-05: #041313;
--wa-color-blue-95: #e8f3ff;
--wa-color-blue-90: #d1e8ff;
--wa-color-blue-80: #9fceff;
--wa-color-blue-70: #6eb3ff;
--wa-color-blue-60: #3e96ff;
--wa-color-blue-50: #0071ec;
--wa-color-blue-40: #0053c0;
--wa-color-blue-30: #003f9c;
--wa-color-blue-20: #002d77;
--wa-color-blue-10: #001a4e;
--wa-color-blue-05: #000f35;
--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-blue-05: #001427;
--wa-color-indigo-95: #f0f2fe;
--wa-color-indigo-90: #e2e4fc;
--wa-color-indigo-80: #c2c6f8;
--wa-color-indigo-70: #a5a9f2;
--wa-color-indigo-60: #8a8beb;
--wa-color-indigo-50: #6b65e2;
--wa-color-indigo-40: #5246c1;
--wa-color-indigo-30: #412eaa;
--wa-color-indigo-20: #321393;
--wa-color-indigo-10: #1c006a;
--wa-color-indigo-05: #130049;
--wa-color-indigo-95: #f2f1fd;
--wa-color-indigo-90: #e5e4fa;
--wa-color-indigo-80: #c7c5f5;
--wa-color-indigo-70: #aba7f0;
--wa-color-indigo-60: #8f8aea;
--wa-color-indigo-50: #6a63e1;
--wa-color-indigo-40: #514cab;
--wa-color-indigo-30: #403c86;
--wa-color-indigo-20: #2e2b60;
--wa-color-indigo-10: #1b1a3a;
--wa-color-indigo-05: #100f21;
--wa-color-violet-95: #f9effd;
--wa-color-violet-90: #f4defb;
--wa-color-violet-80: #e7baf7;
--wa-color-violet-70: #d996ef;
--wa-color-violet-60: #c674e1;
--wa-color-violet-50: #a94dc6;
--wa-color-violet-40: #8732a1;
--wa-color-violet-30: #6d2283;
--wa-color-violet-20: #521564;
--wa-color-violet-10: #330940;
--wa-color-violet-05: #22042b;
--wa-color-violet-95: #f8effa;
--wa-color-violet-90: #f0e0f6;
--wa-color-violet-80: #e0beeb;
--wa-color-violet-70: #d09de1;
--wa-color-violet-60: #c07ad6;
--wa-color-violet-50: #a84cc5;
--wa-color-violet-40: #803a97;
--wa-color-violet-30: #652e76;
--wa-color-violet-20: #482155;
--wa-color-violet-10: #2c1433;
--wa-color-violet-05: #190b1e;
--wa-color-gray-95: #f2f2f4;
--wa-color-gray-90: #e5e5e9;
--wa-color-gray-80: #c8c9d1;
--wa-color-gray-70: #acaebb;
--wa-color-gray-60: #9194a4;
--wa-color-gray-50: #70758a;
--wa-color-gray-95: #f1f2f3;
--wa-color-gray-90: #e4e5e9;
--wa-color-gray-80: #c7c9d0;
--wa-color-gray-70: #abaeb9;
--wa-color-gray-60: #9194a2;
--wa-color-gray-50: #717584;
--wa-color-gray-40: #545868;
--wa-color-gray-30: #424551;
--wa-color-gray-20: #30323b;
--wa-color-gray-10: #1c1d23;
--wa-color-gray-05: #111215;
--wa-color-gray-30: #424554;
--wa-color-gray-20: #2f323f;
--wa-color-gray-10: #1b1d26;
--wa-color-gray-05: #101219;
}

329
src/themes/default.css
View File

@@ -6,72 +6,96 @@
color-scheme: light;
/**
* Primitive colors
* Literal colors
* Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
* Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
* Lightness on this scale strongly correlates to relative luminance, so each lightness value has nearly uniform WCAG 2.1 contrast across hues.
* A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
* A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
* A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
*/
--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-red-05: #290601;
--wa-color-red-95: #ffefef;
--wa-color-red-90: #ffdddc;
--wa-color-red-80: #ffb7b6;
--wa-color-red-70: #fc9090;
--wa-color-red-60: #f2676c;
--wa-color-red-50: #de2d44;
--wa-color-red-40: #b11036;
--wa-color-red-30: #861a2f;
--wa-color-red-20: #641122;
--wa-color-red-10: #400712;
--wa-color-red-05: #2a030a;
--wa-color-yellow-95: #fbf3c9;
--wa-color-yellow-90: #ffe492;
--wa-color-yellow-95: #fdf3ba;
--wa-color-yellow-90: #fee590;
--wa-color-yellow-80: #fcc041;
--wa-color-yellow-70: #e5a23d;
--wa-color-yellow-60: #cc853a;
--wa-color-yellow-50: #a86633;
--wa-color-yellow-40: #824a2a;
--wa-color-yellow-30: #6a3825;
--wa-color-yellow-20: #4f281d;
--wa-color-yellow-10: #2e1813;
--wa-color-yellow-05: #1a0e0a;
--wa-color-yellow-70: #f39b00;
--wa-color-yellow-60: #e07b00;
--wa-color-yellow-50: #bb5a00;
--wa-color-yellow-40: #924200;
--wa-color-yellow-30: #743200;
--wa-color-yellow-20: #572300;
--wa-color-yellow-10: #361300;
--wa-color-yellow-05: #240b00;
--wa-color-green-95: #e2f8df;
--wa-color-green-95: #e2f9e2;
--wa-color-green-90: #c2f2c1;
--wa-color-green-80: #68e27a;
--wa-color-green-70: #00cb50;
--wa-color-green-60: #00ae4b;
--wa-color-green-50: #008840;
--wa-color-green-40: #006834;
--wa-color-green-30: #00522c;
--wa-color-green-20: #003b22;
--wa-color-green-10: #002418;
--wa-color-green-05: #001611;
--wa-color-green-80: #92da97;
--wa-color-green-70: #5dc36f;
--wa-color-green-60: #00ac49;
--wa-color-green-50: #008825;
--wa-color-green-40: #006800;
--wa-color-green-30: #005300;
--wa-color-green-20: #003c00;
--wa-color-green-10: #002400;
--wa-color-green-05: #001700;
--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-blue-05: #001427;
--wa-color-blue-95: #e8f3ff;
--wa-color-blue-90: #d1e8ff;
--wa-color-blue-80: #9fceff;
--wa-color-blue-70: #6eb3ff;
--wa-color-blue-60: #3e96ff;
--wa-color-blue-50: #0071ec;
--wa-color-blue-40: #0053c0;
--wa-color-blue-30: #003f9c;
--wa-color-blue-20: #002d77;
--wa-color-blue-10: #001a4e;
--wa-color-blue-05: #000f35;
--wa-color-gray-95: #f2f2f4;
--wa-color-gray-90: #e5e5e9;
--wa-color-gray-80: #c8c9d1;
--wa-color-gray-70: #acaebb;
--wa-color-gray-60: #9194a4;
--wa-color-gray-50: #70758a;
--wa-color-indigo-95: #f0f2fe;
--wa-color-indigo-90: #e2e4fc;
--wa-color-indigo-80: #c2c6f8;
--wa-color-indigo-70: #a5a9f2;
--wa-color-indigo-60: #8a8beb;
--wa-color-indigo-50: #6b65e2;
--wa-color-indigo-40: #5246c1;
--wa-color-indigo-30: #412eaa;
--wa-color-indigo-20: #321393;
--wa-color-indigo-10: #1c006a;
--wa-color-indigo-05: #130049;
--wa-color-violet-95: #f9effd;
--wa-color-violet-90: #f4defb;
--wa-color-violet-80: #e7baf7;
--wa-color-violet-70: #d996ef;
--wa-color-violet-60: #c674e1;
--wa-color-violet-50: #a94dc6;
--wa-color-violet-40: #8732a1;
--wa-color-violet-30: #6d2283;
--wa-color-violet-20: #521564;
--wa-color-violet-10: #330940;
--wa-color-violet-05: #22042b;
--wa-color-gray-95: #f1f2f3;
--wa-color-gray-90: #e4e5e9;
--wa-color-gray-80: #c7c9d0;
--wa-color-gray-70: #abaeb9;
--wa-color-gray-60: #9194a2;
--wa-color-gray-50: #717584;
--wa-color-gray-40: #545868;
--wa-color-gray-30: #424551;
--wa-color-gray-20: #30323b;
--wa-color-gray-10: #1c1d23;
--wa-color-gray-05: #111215;
--wa-color-gray-30: #424554;
--wa-color-gray-20: #2f323f;
--wa-color-gray-10: #1b1d26;
--wa-color-gray-05: #101219;
--wa-color-primary-95: var(--wa-color-blue-95);
--wa-color-primary-90: var(--wa-color-blue-90);
@@ -109,11 +133,10 @@
--wa-color-surface-border: var(--wa-color-base-90);
/* Text colors are used for standard text elements.
* Text should have a minimum 4.5:1 contrast ratio against surfaces.
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
* Text should have a minimum 4.5:1 contrast ratio against surfaces. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-primary-50);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -152,57 +175,58 @@
* Vivid colors should have a minimum 3:1 contrast ratio against surfaces when possible.
* Muted colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
* Colors are differentiated by how much they contribute to visual noise. It's hard to focus on a conversation in a loud restaurant. In the same way, it's hard for a user to focus their attention when there are many colors competing for it.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
--wa-color-brand-border-highlight: var(--wa-color-primary-80);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-80);
--wa-color-brand-border-loud: var(--wa-color-primary-60);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-loud: white;
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
--wa-color-success-border-loud: var(--wa-color-green-60);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-loud: white;
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
--wa-color-warning-border-loud: var(--wa-color-yellow-60);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-loud: white;
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
--wa-color-danger-border-loud: var(--wa-color-red-60);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-loud: white;
--wa-color-neutral-spot: var(--wa-color-base-20);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-fill-loud: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-border-loud: var(--wa-color-base-60);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-loud: white;
/**
* Typography
@@ -308,7 +332,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -334,7 +358,7 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-base-60);
--wa-form-controls-label-color: var(--wa-color-text-normal);
@@ -385,7 +409,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -402,62 +426,57 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
--wa-color-brand-border-subtle: var(--wa-color-primary-20);
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-70);
--wa-color-brand-text-on-surface: var(--wa-color-primary-60);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-70);
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-80);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
}
/* #region Custom Styles */
@container preview (min-width: 0) {
.hero-background {
height: 47rem;
background-color: var(--wa-color-brand-spot-darker);
background-color: var(--wa-color-brand-fill-loud);
position: absolute;
top: 0;
left: 0;
@@ -477,12 +496,12 @@
}
.hero wa-button[variant='brand'] {
--background: var(--wa-color-neutral-fill-subtle);
--label-color: var(--wa-color-neutral-text-on-fill);
--background: var(--wa-color-neutral-fill-quiet);
--label-color: var(--wa-color-neutral-on-normal);
}
.project-header {
color: var(--wa-color-brand-text-on-spot);
color: var(--wa-color-brand-on-loud);
}
.strata.hero {
@@ -491,7 +510,7 @@
.hero .title {
margin-inline-end: 40%;
color: var(--wa-color-brand-text-on-spot);
color: var(--wa-color-brand-on-loud);
}
}

10
src/themes/depth_2_chunky.css
View File

@@ -60,23 +60,23 @@ wa-button {
}
}
&[variant='brand'] {
--box-shadow-color: var(--wa-color-brand-spot-darker);
--box-shadow-color: var(--wa-color-brand-border-loud);
}
&[variant='success'] {
--box-shadow-color: var(--wa-color-success-spot-darker);
--box-shadow-color: var(--wa-color-success-border-loud);
}
&[variant='neutral'] {
--box-shadow-color: var(--wa-color-neutral-spot-darker);
--box-shadow-color: var(--wa-color-neutral-border-loud);
}
&[variant='warning'] {
--box-shadow-color: var(--wa-color-warning-spot-darker);
--box-shadow-color: var(--wa-color-warning-border-loud);
}
&[variant='danger'] {
--box-shadow-color: var(--wa-color-danger-spot-darker);
--box-shadow-color: var(--wa-color-danger-border-loud);
}
}
/* #endregion */

2
src/themes/depth_3_punchy.css
View File

@@ -73,7 +73,7 @@ wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
var(--wa-color-brand-border-loud)
);
&:not([checked]):not([indeterminate]) {

97
src/themes/depth_4_glossy.css
View File

@@ -59,7 +59,7 @@
&[variant='brand'] {
--background: color-mix(
in oklab,
var(--wa-color-brand-fill-subtle),
var(--wa-color-brand-fill-quiet),
transparent var(--wa-background-transparency-percent)
);
}
@@ -67,7 +67,7 @@
&[variant='success'] {
--background: color-mix(
in oklab,
var(--wa-color-success-fill-subtle),
var(--wa-color-success-fill-quiet),
transparent var(--wa-background-transparency-percent)
);
}
@@ -75,7 +75,7 @@
&[variant='neutral'] {
--background: color-mix(
in oklab,
var(--wa-color-neutral-fill-subtle),
var(--wa-color-neutral-fill-quiet),
transparent var(--wa-background-transparency-percent)
);
}
@@ -83,7 +83,7 @@
&[variant='warning'] {
--background: color-mix(
in oklab,
var(--wa-color-warning-fill-subtle),
var(--wa-color-warning-fill-quiet),
transparent var(--wa-background-transparency-percent)
);
}
@@ -91,7 +91,7 @@
&[variant='danger'] {
--background: color-mix(
in oklab,
var(--wa-color-danger-fill-subtle),
var(--wa-color-danger-fill-quiet),
transparent var(--wa-background-transparency-percent)
);
}
@@ -132,83 +132,88 @@ wa-button:not([variant='text']) {
wa-button:not([outline]) {
&[variant='brand'] {
--background: linear-gradient(var(--wa-color-brand-spot) 25%, var(--wa-color-brand-spot));
--background: linear-gradient(var(--wa-color-brand-fill-loud) 25%, var(--wa-color-brand-fill-loud));
--background-hover: linear-gradient(
color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-hover))
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover))
);
--background-active: linear-gradient(
color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-mix-active)),
var(--wa-color-brand-spot)
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-active)),
var(--wa-color-brand-fill-loud)
);
--border-color: var(--wa-color-brand-spot)
color-mix(in oklab, var(--wa-color-brand-spot), var(--wa-color-brand-spot)) var(--wa-color-brand-spot);
--border-color: var(--wa-color-brand-fill-loud)
color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-brand-fill-loud))
var(--wa-color-brand-fill-loud);
--border-color-hover: var(--border-color);
--border-color-active: var(--wa-color-brand-spot);
--border-color-active: var(--wa-color-brand-fill-loud);
}
&[variant='success'] {
--background: linear-gradient(var(--wa-color-success-spot) 25%, var(--wa-color-success-spot));
--background: linear-gradient(var(--wa-color-success-fill-loud) 25%, var(--wa-color-success-fill-loud));
--background-hover: linear-gradient(
color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-hover))
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-hover))
);
--background-active: linear-gradient(
color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-mix-active)),
var(--wa-color-success-spot)
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-mix-active)),
var(--wa-color-success-fill-loud)
);
--border-color: var(--wa-color-success-spot)
color-mix(in oklab, var(--wa-color-success-spot), var(--wa-color-success-spot)) var(--wa-color-success-spot);
--border-color: var(--wa-color-success-fill-loud)
color-mix(in oklab, var(--wa-color-success-fill-loud), var(--wa-color-success-fill-loud))
var(--wa-color-success-fill-loud);
--border-color-hover: var(--border-color);
--border-color-active: var(--wa-color-success-spot);
--border-color-active: var(--wa-color-success-fill-loud);
}
&[variant='neutral'] {
--background: linear-gradient(var(--wa-color-neutral-spot) 25%, var(--wa-color-neutral-spot));
--background: linear-gradient(var(--wa-color-neutral-fill-loud) 25%, var(--wa-color-neutral-fill-loud));
--background-hover: linear-gradient(
color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-hover))
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-hover))
);
--background-active: linear-gradient(
color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-mix-active)),
var(--wa-color-neutral-spot)
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-mix-active)),
var(--wa-color-neutral-fill-loud)
);
--border-color: var(--wa-color-neutral-spot)
color-mix(in oklab, var(--wa-color-neutral-spot), var(--wa-color-neutral-spot)) var(--wa-color-neutral-spot);
--border-color: var(--wa-color-neutral-fill-loud)
color-mix(in oklab, var(--wa-color-neutral-fill-loud), var(--wa-color-neutral-fill-loud))
var(--wa-color-neutral-fill-loud);
--border-color-hover: var(--border-color);
--border-color-active: var(--wa-color-neutral-spot);
--border-color-active: var(--wa-color-neutral-fill-loud);
}
&[variant='warning'] {
--background: linear-gradient(var(--wa-color-warning-spot) 25%, var(--wa-color-warning-spot));
--background: linear-gradient(var(--wa-color-warning-fill-loud) 25%, var(--wa-color-warning-fill-loud));
--background-hover: linear-gradient(
color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-hover))
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-hover))
);
--background-active: linear-gradient(
color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-mix-active)),
var(--wa-color-warning-spot)
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-mix-active)),
var(--wa-color-warning-fill-loud)
);
--border-color: var(--wa-color-warning-spot)
color-mix(in oklab, var(--wa-color-warning-spot), var(--wa-color-warning-spot)) var(--wa-color-warning-spot);
--border-color: var(--wa-color-warning-fill-loud)
color-mix(in oklab, var(--wa-color-warning-fill-loud), var(--wa-color-warning-fill-loud))
var(--wa-color-warning-fill-loud);
--border-color-hover: var(--border-color);
--border-color-active: var(--wa-color-warning-spot);
--border-color-active: var(--wa-color-warning-fill-loud);
}
&[variant='danger'] {
--background: linear-gradient(var(--wa-color-danger-spot) 25%, var(--wa-color-danger-spot));
--background: linear-gradient(var(--wa-color-danger-fill-loud) 25%, var(--wa-color-danger-fill-loud));
--background-hover: linear-gradient(
color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-hover))
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover)) 25%,
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-hover))
);
--background-active: linear-gradient(
color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-mix-active)),
var(--wa-color-danger-spot)
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-mix-active)),
var(--wa-color-danger-fill-loud)
);
--border-color: var(--wa-color-danger-spot)
color-mix(in oklab, var(--wa-color-danger-spot), var(--wa-color-danger-spot)) var(--wa-color-danger-spot);
--border-color: var(--wa-color-danger-fill-loud)
color-mix(in oklab, var(--wa-color-danger-fill-loud), var(--wa-color-danger-fill-loud))
var(--wa-color-danger-fill-loud);
--border-color-hover: var(--border-color);
--border-color-active: var(--wa-color-danger-spot);
--border-color-active: var(--wa-color-danger-fill-loud);
}
}
/* #endregion */
@@ -262,7 +267,7 @@ wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
var(--wa-color-brand-border-loud)
);
&:not([checked]):not([indeterminate]) {

216
src/themes/fa.css
View File

@@ -114,7 +114,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-20);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -158,55 +158,50 @@
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-70);
--wa-color-brand-spot-darker: var(--wa-color-primary-50);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-70);
--wa-color-brand-border-highlight: var(--wa-color-primary-50);
--wa-color-brand-text-on-spot: var(--wa-color-text-normal);
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-70);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: var(--wa-color-primary-70);
--wa-color-brand-border-normal: var(--wa-color-primary-50);
--wa-color-brand-on-loud: var(--wa-color-text-normal);
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-50);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-70);
--wa-color-success-border-highlight: var(--wa-color-green-50);
--wa-color-success-text-on-spot: var(--wa-color-text-normal);
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-70);
--wa-color-success-border-normal: var(--wa-color-green-50);
--wa-color-success-on-loud: var(--wa-color-text-normal);
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-50);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-70);
--wa-color-warning-border-highlight: var(--wa-color-yellow-60);
--wa-color-warning-text-on-spot: var(--wa-color-text-normal);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-70);
--wa-color-warning-border-normal: var(--wa-color-yellow-60);
--wa-color-warning-on-loud: var(--wa-color-text-normal);
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-50);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-70);
--wa-color-danger-border-highlight: var(--wa-color-red-50);
--wa-color-danger-text-on-spot: var(--wa-color-text-normal);
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-70);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-70);
--wa-color-danger-border-normal: var(--wa-color-red-50);
--wa-color-danger-on-loud: var(--wa-color-text-normal);
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-50);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-60);
--wa-color-neutral-border-highlight: var(--wa-color-base-40);
--wa-color-neutral-text-on-spot: var(--wa-color-text-normal);
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-text-normal);
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-60);
--wa-color-neutral-border-normal: var(--wa-color-base-40);
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-text-normal);
/**
* Typography
@@ -338,8 +333,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-heavy);
@@ -389,7 +384,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -410,55 +405,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-80);
--wa-color-brand-spot-darker: var(--wa-color-primary-50);
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
--wa-color-brand-border-subtle: var(--wa-color-primary-60);
--wa-color-brand-border-highlight: var(--wa-color-primary-70);
--wa-color-brand-text-on-spot: var(--wa-color-primary-10);
--wa-color-brand-text-on-fill: var(--wa-color-primary-80);
--wa-color-brand-text-on-surface: var(--wa-color-primary-70);
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-border-quiet: var(--wa-color-primary-60);
--wa-color-brand-border-normal: var(--wa-color-primary-70);
--wa-color-brand-on-loud: var(--wa-color-primary-10);
--wa-color-brand-on-normal: var(--wa-color-primary-80);
--wa-color-brand-on-quiet: var(--wa-color-primary-70);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-50);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-60);
--wa-color-success-border-highlight: var(--wa-color-green-70);
--wa-color-success-text-on-spot: var(--wa-color-green-10);
--wa-color-success-text-on-fill: var(--wa-color-green-80);
--wa-color-success-text-on-surface: var(--wa-color-green-70);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-60);
--wa-color-success-border-normal: var(--wa-color-green-70);
--wa-color-success-on-loud: var(--wa-color-green-10);
--wa-color-success-on-normal: var(--wa-color-green-80);
--wa-color-success-on-quiet: var(--wa-color-green-70);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-50);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-60);
--wa-color-warning-border-highlight: var(--wa-color-yellow-70);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-10);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-80);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-60);
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-loud: var(--wa-color-yellow-10);
--wa-color-warning-on-normal: var(--wa-color-yellow-80);
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
--wa-color-danger-spot: var(--wa-color-red-80);
--wa-color-danger-spot-darker: var(--wa-color-red-50);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-60);
--wa-color-danger-border-highlight: var(--wa-color-red-70);
--wa-color-danger-text-on-spot: var(--wa-color-red-10);
--wa-color-danger-text-on-fill: var(--wa-color-red-80);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-danger-fill-loud: var(--wa-color-red-80);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-60);
--wa-color-danger-border-normal: var(--wa-color-red-70);
--wa-color-danger-on-loud: var(--wa-color-red-10);
--wa-color-danger-on-normal: var(--wa-color-red-80);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-neutral-spot: var(--wa-color-base-80);
--wa-color-neutral-spot-darker: var(--wa-color-base-50);
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
--wa-color-neutral-border-subtle: var(--wa-color-base-60);
--wa-color-neutral-border-highlight: var(--wa-color-base-70);
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
--wa-color-neutral-text-on-fill: var(--wa-color-base-80);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
--wa-color-neutral-fill-loud: var(--wa-color-base-80);
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
--wa-color-neutral-border-quiet: var(--wa-color-base-60);
--wa-color-neutral-border-normal: var(--wa-color-base-70);
--wa-color-neutral-on-loud: var(--wa-color-base-10);
--wa-color-neutral-on-normal: var(--wa-color-base-80);
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
}
/* #region Custom Styles */
@@ -468,14 +458,14 @@
}
.hero {
color: var(--wa-color-brand-text-on-fill);
color: var(--wa-color-brand-on-normal);
text-align: center;
}
.hero .title {
background:
url('/assets/images/themer/fa/hero.png') center center / cover no-repeat,
var(--wa-color-brand-fill-highlight);
var(--wa-color-brand-fill-normal);
padding: calc(var(--wa-space-3xl) * 5) calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 4);
margin: calc(var(--wa-space-3xl) * -1) 0;
border-radius: var(--wa-panel-corners);
@@ -497,8 +487,8 @@
}
.message-composer wa-card::part(header) {
background-color: var(--wa-color-neutral-fill-highlight);
color: var(--wa-color-neutral-text-on-fill);
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-neutral-on-normal);
& wa-icon-button {
color: var(--wa-color-text-normal);
@@ -514,19 +504,19 @@
}
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
--border-color: var(--wa-color-brand-border-normal);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
--border-color: var(--wa-color-success-border-normal);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
--border-color: var(--wa-color-warning-border-normal);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
--border-color: var(--wa-color-danger-border-normal);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
}
}
@@ -553,19 +543,19 @@
.wa-theme-fa-dark & {
&[variant='brand'] {
--border-color: var(--wa-color-brand-spot-darker);
--border-color: var(--wa-color-brand-border-loud);
}
&[variant='success'] {
--border-color: var(--wa-color-success-spot-darker);
--border-color: var(--wa-color-success-border-loud);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-spot-darker);
--border-color: var(--wa-color-warning-border-loud);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-spot-darker);
--border-color: var(--wa-color-danger-border-loud);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-spot-darker);
--border-color: var(--wa-color-neutral-border-loud);
}
}
}
@@ -583,8 +573,8 @@
}
wa-carousel {
--pagination-color-activated: var(--wa-color-brand-spot);
--pagination-color-resting: var(--wa-color-neutral-spot);
--pagination-color-activated: var(--wa-color-brand-fill-loud);
--pagination-color-resting: var(--wa-color-neutral-fill-loud);
}
wa-checkbox,
@@ -596,7 +586,7 @@
--wa-transition-normal: 0ms;
--wa-transition-fast: 0ms;
--wa-transition-faster: 0ms;
--background-active: var(--wa-color-neutral-text-on-surface);
--background-active: var(--wa-color-neutral-on-quiet);
--border-color-active: var(--background-active);
--box-shadow: var(--wa-shadow-offset-x-level-1) var(--wa-shadow-offset-y-level-1) var(--wa-shadow-blur-level-1)
var(--border-color);
@@ -604,7 +594,7 @@
&:active,
&[checked] {
--background: var(--wa-color-neutral-text-on-surface);
--background: var(--wa-color-neutral-on-quiet);
--box-shadow: none;
--label-color: var(--wa-color-surface-default);
transform: translateX(var(--wa-shadow-offset-x-level-1)) translateY(var(--wa-shadow-offset-y-level-1));
@@ -615,7 +605,7 @@
--background: transparent;
--border-color: var(--wa-form-controls-activated-color);
--thumb-color: var(--border-color);
--thumb-color-checked: var(--wa-color-neutral-fill-subtle);
--thumb-color-checked: var(--wa-color-neutral-fill-quiet);
--thumb-size: 1em;
--height: 1.5em;
--width: calc(var(--thumb-size) * 2.5);

20
src/themes/forms.css
View File

@@ -1,23 +1,23 @@
.wa-invalid {
--wa-form-controls-resting-color: var(--wa-color-danger-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-danger-spot);
--wa-form-controls-value-color: var(--wa-color-danger-text-on-surface);
--wa-form-controls-resting-color: var(--wa-color-danger-border-normal);
--wa-form-controls-activated-color: var(--wa-color-danger-fill-loud);
--wa-form-controls-value-color: var(--wa-color-danger-on-quiet);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-fill-loud);
/* Help text */
--wa-color-text-quiet: var(--wa-color-danger-text-on-fill);
--wa-color-text-quiet: var(--wa-color-danger-on-normal);
}
.wa-valid {
--wa-form-controls-resting-color: var(--wa-color-success-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-success-spot);
--wa-form-controls-value-color: var(--wa-color-success-text-on-surface);
--wa-form-controls-resting-color: var(--wa-color-success-border-normal);
--wa-form-controls-activated-color: var(--wa-color-success-fill-loud);
--wa-form-controls-value-color: var(--wa-color-success-on-quiet);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-fill-loud);
/* Help text */
--wa-color-text-quiet: var(--wa-color-success-text-on-fill);
--wa-color-text-quiet: var(--wa-color-success-on-normal);
}

192
src/themes/glassy.css
View File

@@ -113,7 +113,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -153,55 +153,50 @@
* Muted colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-90);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
--wa-color-brand-border-highlight: var(--wa-color-primary-80);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-90);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-80);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -306,7 +301,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -332,8 +327,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -383,7 +378,7 @@
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -400,55 +395,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-20);
--wa-color-brand-fill-highlight: var(--wa-color-primary-30);
--wa-color-brand-border-subtle: var(--wa-color-primary-20);
--wa-color-brand-border-highlight: var(--wa-color-primary-30);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-70);
--wa-color-brand-text-on-surface: var(--wa-color-primary-60);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-20);
--wa-color-brand-fill-normal: var(--wa-color-primary-30);
--wa-color-brand-border-quiet: var(--wa-color-primary-20);
--wa-color-brand-border-normal: var(--wa-color-primary-30);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-70);
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
.hero-background::after {
height: 50rem;
@@ -466,29 +456,29 @@
@container preview (min-width: 0) {
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
--border-color: var(--wa-color-brand-border-normal);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
--border-color: var(--wa-color-success-border-normal);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
--border-color: var(--wa-color-warning-border-normal);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
--border-color: var(--wa-color-danger-border-normal);
}
}
wa-rating {
--symbol-size: var(--wa-font-size-m);
--symbol-color-active: var(--wa-color-neutral-text-on-surface);
--symbol-color-active: var(--wa-color-neutral-on-quiet);
}
.hero-background {

186
src/themes/mellow.css
View File

@@ -153,55 +153,50 @@
* Muted colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-green-50);
--wa-color-brand-spot-darker: var(--wa-color-green-40);
--wa-color-brand-fill-subtle: var(--wa-color-green-95);
--wa-color-brand-fill-highlight: var(--wa-color-green-90);
--wa-color-brand-border-subtle: var(--wa-color-green-90);
--wa-color-brand-border-highlight: var(--wa-color-green-80);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-green-40);
--wa-color-brand-text-on-surface: var(--wa-color-green-50);
--wa-color-brand-fill-loud: var(--wa-color-green-50);
--wa-color-brand-fill-quiet: var(--wa-color-green-95);
--wa-color-brand-fill-normal: var(--wa-color-green-90);
--wa-color-brand-border-quiet: var(--wa-color-green-90);
--wa-color-brand-border-normal: var(--wa-color-green-80);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-green-40);
--wa-color-brand-on-quiet: var(--wa-color-green-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-80);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-80);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-80);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -306,7 +301,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -332,8 +327,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -400,77 +395,72 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-green-50);
--wa-color-brand-spot-darker: var(--wa-color-green-40);
--wa-color-brand-fill-subtle: var(--wa-color-green-10);
--wa-color-brand-fill-highlight: var(--wa-color-green-20);
--wa-color-brand-border-subtle: var(--wa-color-green-20);
--wa-color-brand-border-highlight: var(--wa-color-green-30);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-green-70);
--wa-color-brand-text-on-surface: var(--wa-color-green-60);
--wa-color-brand-fill-loud: var(--wa-color-green-50);
--wa-color-brand-fill-quiet: var(--wa-color-green-10);
--wa-color-brand-fill-normal: var(--wa-color-green-20);
--wa-color-brand-border-quiet: var(--wa-color-green-20);
--wa-color-brand-border-normal: var(--wa-color-green-30);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-green-70);
--wa-color-brand-on-quiet: var(--wa-color-green-60);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: var(--wa-color-green-20);
--wa-color-success-border-highlight: var(--wa-color-green-30);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: var(--wa-color-green-20);
--wa-color-success-border-normal: var(--wa-color-green-30);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: var(--wa-color-yellow-20);
--wa-color-warning-border-highlight: var(--wa-color-yellow-30);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: var(--wa-color-yellow-20);
--wa-color-warning-border-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: var(--wa-color-red-20);
--wa-color-danger-border-highlight: var(--wa-color-red-30);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: var(--wa-color-red-20);
--wa-color-danger-border-normal: var(--wa-color-red-30);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: var(--wa-color-base-20);
--wa-color-neutral-border-highlight: var(--wa-color-base-30);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: var(--wa-color-base-20);
--wa-color-neutral-border-normal: var(--wa-color-base-30);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
}
/* #region Custom styles */
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
--border-color: var(--wa-color-brand-border-normal);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
--border-color: var(--wa-color-success-border-normal);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
--border-color: var(--wa-color-warning-border-normal);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
--border-color: var(--wa-color-danger-border-normal);
}
}
/* #endregion */

206
src/themes/migration.css
View File

@@ -113,7 +113,7 @@
* Inverse text should support appropriate contrast against background colors with opposing lightness. */
--wa-color-text-normal: var(--wa-color-base-10);
--wa-color-text-quiet: var(--wa-color-base-40);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
/* Selection colors apply on content that is highlighted by the user.
* Selection text should have a minimum 4.5:1 contrast ratio against the selection background. */
@@ -154,55 +154,50 @@
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-40);
--wa-color-brand-spot-darker: var(--wa-color-primary-30);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-90);
--wa-color-brand-border-subtle: color-mix(in oklab, var(--wa-color-primary-80), transparent);
--wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-70), transparent);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-40);
--wa-color-brand-text-on-surface: var(--wa-color-primary-40);
--wa-color-brand-fill-loud: var(--wa-color-primary-40);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-90);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-80), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-70), transparent);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-40);
--wa-color-brand-on-quiet: var(--wa-color-primary-40);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-90);
--wa-color-success-border-subtle: color-mix(in oklab, var(--wa-color-green-80), transparent);
--wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-70), transparent);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-90);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-80), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-70), transparent);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-40);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-90);
--wa-color-warning-border-subtle: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
--wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-80), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-70), transparent);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-90);
--wa-color-danger-border-subtle: color-mix(in oklab, var(--wa-color-red-80), transparent);
--wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-70), transparent);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-80), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-70), transparent);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-40);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-10);
--wa-color-neutral-spot-darker: black;
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-90);
--wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
--wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
--wa-color-neutral-text-on-spot: white;
--wa-color-neutral-text-on-fill: var(--wa-color-base-40);
--wa-color-neutral-text-on-surface: var(--wa-color-base-40);
--wa-color-neutral-fill-loud: var(--wa-color-base-10);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-90);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-70), transparent 50%);
--wa-color-neutral-on-loud: white;
--wa-color-neutral-on-normal: var(--wa-color-base-40);
--wa-color-neutral-on-quiet: var(--wa-color-base-40);
/**
* Typography
@@ -335,8 +330,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-quiet);
--wa-form-controls-label-font-weight: var(--wa-font-weight-medium);
@@ -386,7 +381,7 @@
--wa-color-text-normal: white;
--wa-color-text-quiet: var(--wa-color-base-60);
--wa-color-text-link: var(--wa-color-brand-text-on-surface);
--wa-color-text-link: var(--wa-color-brand-on-quiet);
--wa-color-selection-background: var(--wa-color-primary-40);
--wa-color-selection-text: white;
@@ -403,55 +398,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-10);
--wa-color-brand-fill-highlight: var(--wa-color-primary-20);
--wa-color-brand-border-subtle: color-mix(in oklab, var(--wa-color-primary-20), transparent);
--wa-color-brand-border-highlight: color-mix(in oklab, var(--wa-color-primary-30), transparent);
--wa-color-brand-text-on-spot: white;
--wa-color-brand-text-on-fill: var(--wa-color-primary-70);
--wa-color-brand-text-on-surface: var(--wa-color-primary-60);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-10);
--wa-color-brand-fill-normal: var(--wa-color-primary-20);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-primary-20), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-primary-30), transparent);
--wa-color-brand-on-loud: white;
--wa-color-brand-on-normal: var(--wa-color-primary-70);
--wa-color-brand-on-quiet: var(--wa-color-primary-60);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-10);
--wa-color-success-fill-highlight: var(--wa-color-green-20);
--wa-color-success-border-subtle: color-mix(in oklab, var(--wa-color-green-20), transparent);
--wa-color-success-border-highlight: color-mix(in oklab, var(--wa-color-green-30), transparent);
--wa-color-success-text-on-spot: white;
--wa-color-success-text-on-fill: var(--wa-color-green-70);
--wa-color-success-text-on-surface: var(--wa-color-green-60);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-10);
--wa-color-success-fill-normal: var(--wa-color-green-20);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-green-20), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-green-30), transparent);
--wa-color-success-on-loud: white;
--wa-color-success-on-normal: var(--wa-color-green-70);
--wa-color-success-on-quiet: var(--wa-color-green-60);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-10);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-20);
--wa-color-warning-border-subtle: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
--wa-color-warning-border-highlight: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
--wa-color-warning-text-on-spot: white;
--wa-color-warning-text-on-fill: var(--wa-color-yellow-70);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-60);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
--wa-color-warning-fill-normal: var(--wa-color-yellow-20);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-yellow-20), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-yellow-30), transparent);
--wa-color-warning-on-loud: white;
--wa-color-warning-on-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-quiet: var(--wa-color-yellow-60);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-10);
--wa-color-danger-fill-highlight: var(--wa-color-red-20);
--wa-color-danger-border-subtle: color-mix(in oklab, var(--wa-color-red-20), transparent);
--wa-color-danger-border-highlight: color-mix(in oklab, var(--wa-color-red-30), transparent);
--wa-color-danger-text-on-spot: white;
--wa-color-danger-text-on-fill: var(--wa-color-red-70);
--wa-color-danger-text-on-surface: var(--wa-color-red-60);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-10);
--wa-color-danger-fill-normal: var(--wa-color-red-20);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-red-20), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-red-30), transparent);
--wa-color-danger-on-loud: white;
--wa-color-danger-on-normal: var(--wa-color-red-70);
--wa-color-danger-on-quiet: var(--wa-color-red-60);
--wa-color-neutral-spot: white;
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
--wa-color-neutral-fill-subtle: var(--wa-color-base-10);
--wa-color-neutral-fill-highlight: var(--wa-color-base-20);
--wa-color-neutral-border-subtle: color-mix(in oklab, var(--wa-color-base-20), transparent);
--wa-color-neutral-border-highlight: color-mix(in oklab, var(--wa-color-base-30), transparent);
--wa-color-neutral-text-on-spot: var(--wa-color-base-10);
--wa-color-neutral-text-on-fill: var(--wa-color-base-70);
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
--wa-color-neutral-fill-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-base-10);
--wa-color-neutral-fill-normal: var(--wa-color-base-20);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-base-20), transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-base-30), transparent);
--wa-color-neutral-on-loud: var(--wa-color-base-10);
--wa-color-neutral-on-normal: var(--wa-color-base-70);
--wa-color-neutral-on-quiet: var(--wa-color-base-60);
}
/* #region Custom Styles */
@@ -469,7 +459,7 @@
.hero {
--hero-background-color: var(--wa-color-surface-default);
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-highlight), transparent 30%);
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
radial-gradient(
@@ -533,11 +523,11 @@
}
pre.codeblock {
background-color: var(--wa-color-neutral-fill-highlight);
background-color: var(--wa-color-neutral-fill-normal);
}
wa-avatar {
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
}
a,
@@ -550,24 +540,24 @@
--border-color: transparent;
&[variant='brand'] {
--background: var(--wa-color-brand-fill-highlight);
--content-color: var(--wa-color-brand-text-on-fill);
--background: var(--wa-color-brand-fill-normal);
--content-color: var(--wa-color-brand-on-normal);
}
&[variant='success'] {
--background: var(--wa-color-success-fill-highlight);
--content-color: var(--wa-color-success-text-on-fill);
--background: var(--wa-color-success-fill-normal);
--content-color: var(--wa-color-success-on-normal);
}
&[variant='warning'] {
--background: var(--wa-color-warning-fill-highlight);
--content-color: var(--wa-color-warning-text-on-fill);
--background: var(--wa-color-warning-fill-normal);
--content-color: var(--wa-color-warning-on-normal);
}
&[variant='danger'] {
--background: var(--wa-color-danger-fill-highlight);
--content-color: var(--wa-color-danger-text-on-fill);
--background: var(--wa-color-danger-fill-normal);
--content-color: var(--wa-color-danger-on-normal);
}
&[variant='neutral'] {
--background: var(--wa-color-neutral-fill-highlight);
--content-color: var(--wa-color-neutral-text-on-fill);
--background: var(--wa-color-neutral-fill-normal);
--content-color: var(--wa-color-neutral-on-normal);
}
}
@@ -585,7 +575,7 @@
}
wa-radio-button:not([checked]) {
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
--label-color: var(--wa-color-text-normal);
}

204
src/themes/playful.css
View File

@@ -166,55 +166,50 @@
* Muted colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-95);
--wa-color-brand-fill-highlight: var(--wa-color-primary-80);
--wa-color-brand-border-subtle: var(--wa-color-primary-90);
--wa-color-brand-border-highlight: var(--wa-color-primary-70);
--wa-color-brand-text-on-spot: var(--wa-color-primary-95);
--wa-color-brand-text-on-fill: var(--wa-color-primary-30);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-95);
--wa-color-brand-fill-normal: var(--wa-color-primary-80);
--wa-color-brand-border-quiet: var(--wa-color-primary-90);
--wa-color-brand-border-normal: var(--wa-color-primary-70);
--wa-color-brand-on-loud: var(--wa-color-primary-95);
--wa-color-brand-on-normal: var(--wa-color-primary-30);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-95);
--wa-color-success-fill-highlight: var(--wa-color-green-80);
--wa-color-success-border-subtle: var(--wa-color-green-90);
--wa-color-success-border-highlight: var(--wa-color-green-70);
--wa-color-success-text-on-spot: var(--wa-color-green-95);
--wa-color-success-text-on-fill: var(--wa-color-green-30);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-95);
--wa-color-success-fill-normal: var(--wa-color-green-80);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-70);
--wa-color-success-on-loud: var(--wa-color-green-95);
--wa-color-success-on-normal: var(--wa-color-green-30);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-95);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-80);
--wa-color-warning-border-subtle: var(--wa-color-yellow-90);
--wa-color-warning-border-highlight: var(--wa-color-yellow-70);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-95);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-30);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-70);
--wa-color-warning-on-loud: var(--wa-color-yellow-95);
--wa-color-warning-on-normal: var(--wa-color-yellow-30);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-95);
--wa-color-danger-fill-highlight: var(--wa-color-red-80);
--wa-color-danger-border-subtle: var(--wa-color-red-90);
--wa-color-danger-border-highlight: var(--wa-color-red-70);
--wa-color-danger-text-on-spot: var(--wa-color-red-95);
--wa-color-danger-text-on-fill: var(--wa-color-red-30);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-80);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-70);
--wa-color-danger-on-loud: var(--wa-color-red-95);
--wa-color-danger-on-normal: var(--wa-color-red-30);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-highlight: var(--wa-color-base-80);
--wa-color-neutral-border-subtle: var(--wa-color-base-90);
--wa-color-neutral-border-highlight: var(--wa-color-base-80);
--wa-color-neutral-text-on-spot: var(--wa-color-base-95);
--wa-color-neutral-text-on-fill: var(--wa-color-base-30);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
--wa-color-neutral-fill-normal: var(--wa-color-base-80);
--wa-color-neutral-border-quiet: var(--wa-color-base-90);
--wa-color-neutral-border-normal: var(--wa-color-base-80);
--wa-color-neutral-on-loud: var(--wa-color-base-95);
--wa-color-neutral-on-normal: var(--wa-color-base-30);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -321,7 +316,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -347,8 +342,8 @@
--wa-form-controls-corners: var(--wa-corners-pill);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -423,55 +418,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-60);
--wa-color-brand-fill-subtle: var(--wa-color-primary-20);
--wa-color-brand-fill-highlight: var(--wa-color-primary-40);
--wa-color-brand-border-subtle: var(--wa-color-primary-30);
--wa-color-brand-border-highlight: var(--wa-color-primary-40);
--wa-color-brand-text-on-spot: var(--wa-color-primary-95);
--wa-color-brand-text-on-fill: var(--wa-color-primary-95);
--wa-color-brand-text-on-surface: var(--wa-color-primary-70);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-20);
--wa-color-brand-fill-normal: var(--wa-color-primary-40);
--wa-color-brand-border-quiet: var(--wa-color-primary-30);
--wa-color-brand-border-normal: var(--wa-color-primary-40);
--wa-color-brand-on-loud: var(--wa-color-primary-95);
--wa-color-brand-on-normal: var(--wa-color-primary-95);
--wa-color-brand-on-quiet: var(--wa-color-primary-70);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--wa-color-success-fill-subtle: var(--wa-color-green-20);
--wa-color-success-fill-highlight: var(--wa-color-green-40);
--wa-color-success-border-subtle: var(--wa-color-green-30);
--wa-color-success-border-highlight: var(--wa-color-green-40);
--wa-color-success-text-on-spot: var(--wa-color-green-20);
--wa-color-success-text-on-fill: var(--wa-color-green-95);
--wa-color-success-text-on-surface: var(--wa-color-green-70);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-20);
--wa-color-success-fill-normal: var(--wa-color-green-40);
--wa-color-success-border-quiet: var(--wa-color-green-30);
--wa-color-success-border-normal: var(--wa-color-green-40);
--wa-color-success-on-loud: var(--wa-color-green-20);
--wa-color-success-on-normal: var(--wa-color-green-95);
--wa-color-success-on-quiet: var(--wa-color-green-70);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-20);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-40);
--wa-color-warning-border-subtle: var(--wa-color-yellow-30);
--wa-color-warning-border-highlight: var(--wa-color-yellow-40);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-20);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-95);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
--wa-color-warning-fill-normal: var(--wa-color-yellow-40);
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-loud: var(--wa-color-yellow-20);
--wa-color-warning-on-normal: var(--wa-color-yellow-95);
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
--wa-color-danger-spot: var(--wa-color-red-60);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-20);
--wa-color-danger-fill-highlight: var(--wa-color-red-40);
--wa-color-danger-border-subtle: var(--wa-color-red-30);
--wa-color-danger-border-highlight: var(--wa-color-red-40);
--wa-color-danger-text-on-spot: var(--wa-color-red-20);
--wa-color-danger-text-on-fill: var(--wa-color-red-95);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-danger-fill-loud: var(--wa-color-red-60);
--wa-color-danger-fill-quiet: var(--wa-color-red-20);
--wa-color-danger-fill-normal: var(--wa-color-red-40);
--wa-color-danger-border-quiet: var(--wa-color-red-30);
--wa-color-danger-border-normal: var(--wa-color-red-40);
--wa-color-danger-on-loud: var(--wa-color-red-20);
--wa-color-danger-on-normal: var(--wa-color-red-95);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-neutral-spot: var(--wa-color-base-40);
--wa-color-neutral-spot-darker: var(--wa-color-base-70);
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
--wa-color-neutral-border-subtle: var(--wa-color-base-30);
--wa-color-neutral-border-highlight: var(--wa-color-base-40);
--wa-color-neutral-text-on-spot: var(--wa-color-base-20);
--wa-color-neutral-text-on-fill: var(--wa-color-base-95);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
--wa-color-neutral-fill-loud: var(--wa-color-base-40);
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
--wa-color-neutral-border-quiet: var(--wa-color-base-30);
--wa-color-neutral-border-normal: var(--wa-color-base-40);
--wa-color-neutral-on-loud: var(--wa-color-base-20);
--wa-color-neutral-on-normal: var(--wa-color-base-95);
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
}
/* #region Custom Styles */
@@ -669,8 +659,8 @@
wa-button[outline] {
--box-shadow: none;
--border-width: var(--wa-form-controls-border-width);
--label-color: var(--wa-color-neutral-text-on-fill);
--label-color-hover: var(--wa-color-neutral-text-on-spot);
--label-color: var(--wa-color-neutral-on-normal);
--label-color-hover: var(--wa-color-neutral-on-loud);
&::part(label) {
text-shadow: none;
@@ -701,19 +691,19 @@
font-weight: var(--wa-font-weight-heavy);
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-subtle);
--border-color: var(--wa-color-brand-border-quiet);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-subtle);
--border-color: var(--wa-color-success-border-quiet);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-subtle);
--border-color: var(--wa-color-warning-border-quiet);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-subtle);
--border-color: var(--wa-color-danger-border-quiet);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-subtle);
--border-color: var(--wa-color-neutral-border-quiet);
}
}
@@ -744,7 +734,7 @@
}
.project-header {
color: var(--wa-color-success-text-on-fill);
color: var(--wa-color-success-on-normal);
}
.hero-background {
@@ -777,7 +767,7 @@
}
.hero .hero-title {
color: var(--wa-color-success-text-on-fill);
color: var(--wa-color-success-on-normal);
font-size: var(--wa-font-size-4xl);
}
@@ -817,13 +807,13 @@
}
.message-composer wa-card::part(header) {
--wa-color-neutral-border-subtle: var(--wa-color-base-70);
--wa-color-neutral-border-quiet: var(--wa-color-base-70);
border-width: 0;
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
}
&:not(.wa-theme-premium-dark) .message-composer wa-card {
--wa-color-neutral-fill-subtle: var(--wa-color-base-90);
--wa-color-neutral-fill-quiet: var(--wa-color-base-90);
}
.message-composer wa-icon-button {
@@ -942,7 +932,7 @@
& wa-button[outline] {
--box-shadow: none;
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
}
& wa-card {
@@ -994,7 +984,7 @@
}
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
--wa-color-neutral-border-subtle: var(--wa-color-base-40);
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
}
& .support-table th {

200
src/themes/premium.css
View File

@@ -155,55 +155,50 @@
* Muted colors have no contrast requirements.
* Text colors should have a minimum 4.5:1 contrast ratio on the intended background - vivid, muted, or surface.
*/
--wa-color-brand-spot: var(--wa-color-primary-50);
--wa-color-brand-spot-darker: var(--wa-color-primary-40);
--wa-color-brand-fill-subtle: var(--wa-color-primary-90);
--wa-color-brand-fill-highlight: var(--wa-color-primary-80);
--wa-color-brand-border-subtle: var(--wa-color-primary-80);
--wa-color-brand-border-highlight: var(--wa-color-primary-50);
--wa-color-brand-text-on-spot: var(--wa-color-primary-95);
--wa-color-brand-text-on-fill: var(--wa-color-primary-20);
--wa-color-brand-text-on-surface: var(--wa-color-primary-50);
--wa-color-brand-fill-loud: var(--wa-color-primary-50);
--wa-color-brand-fill-quiet: var(--wa-color-primary-90);
--wa-color-brand-fill-normal: var(--wa-color-primary-80);
--wa-color-brand-border-quiet: var(--wa-color-primary-80);
--wa-color-brand-border-normal: var(--wa-color-primary-50);
--wa-color-brand-on-loud: var(--wa-color-primary-95);
--wa-color-brand-on-normal: var(--wa-color-primary-20);
--wa-color-brand-on-quiet: var(--wa-color-primary-50);
--wa-color-success-spot: var(--wa-color-green-50);
--wa-color-success-spot-darker: var(--wa-color-green-40);
--wa-color-success-fill-subtle: var(--wa-color-green-90);
--wa-color-success-fill-highlight: var(--wa-color-green-80);
--wa-color-success-border-subtle: var(--wa-color-green-80);
--wa-color-success-border-highlight: var(--wa-color-green-50);
--wa-color-success-text-on-spot: var(--wa-color-green-95);
--wa-color-success-text-on-fill: var(--wa-color-green-20);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-success-fill-loud: var(--wa-color-green-50);
--wa-color-success-fill-quiet: var(--wa-color-green-90);
--wa-color-success-fill-normal: var(--wa-color-green-80);
--wa-color-success-border-quiet: var(--wa-color-green-80);
--wa-color-success-border-normal: var(--wa-color-green-50);
--wa-color-success-on-loud: var(--wa-color-green-95);
--wa-color-success-on-normal: var(--wa-color-green-20);
--wa-color-success-on-quiet: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-50);
--wa-color-warning-spot-darker: var(--wa-color-yellow-40);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-90);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-80);
--wa-color-warning-border-subtle: var(--wa-color-yellow-80);
--wa-color-warning-border-highlight: var(--wa-color-yellow-50);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-95);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-20);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-90);
--wa-color-warning-fill-normal: var(--wa-color-yellow-80);
--wa-color-warning-border-quiet: var(--wa-color-yellow-80);
--wa-color-warning-border-normal: var(--wa-color-yellow-50);
--wa-color-warning-on-loud: var(--wa-color-yellow-95);
--wa-color-warning-on-normal: var(--wa-color-yellow-20);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-50);
--wa-color-danger-spot-darker: var(--wa-color-red-40);
--wa-color-danger-fill-subtle: var(--wa-color-red-90);
--wa-color-danger-fill-highlight: var(--wa-color-red-80);
--wa-color-danger-border-subtle: var(--wa-color-red-80);
--wa-color-danger-border-highlight: var(--wa-color-red-50);
--wa-color-danger-text-on-spot: var(--wa-color-red-95);
--wa-color-danger-text-on-fill: var(--wa-color-red-20);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-90);
--wa-color-danger-fill-normal: var(--wa-color-red-80);
--wa-color-danger-border-quiet: var(--wa-color-red-80);
--wa-color-danger-border-normal: var(--wa-color-red-50);
--wa-color-danger-on-loud: var(--wa-color-red-95);
--wa-color-danger-on-normal: var(--wa-color-red-20);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-50);
--wa-color-neutral-spot-darker: var(--wa-color-base-40);
--wa-color-neutral-fill-subtle: var(--wa-color-base-90);
--wa-color-neutral-fill-highlight: var(--wa-color-base-80);
--wa-color-neutral-border-subtle: var(--wa-color-base-80);
--wa-color-neutral-border-highlight: var(--wa-color-base-50);
--wa-color-neutral-text-on-spot: var(--wa-color-base-95);
--wa-color-neutral-text-on-fill: var(--wa-color-base-20);
--wa-color-neutral-text-on-surface: var(--wa-color-base-50);
--wa-color-neutral-fill-loud: var(--wa-color-base-50);
--wa-color-neutral-fill-quiet: var(--wa-color-base-90);
--wa-color-neutral-fill-normal: var(--wa-color-base-80);
--wa-color-neutral-border-quiet: var(--wa-color-base-80);
--wa-color-neutral-border-normal: var(--wa-color-base-50);
--wa-color-neutral-on-loud: var(--wa-color-base-95);
--wa-color-neutral-on-normal: var(--wa-color-base-20);
--wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
@@ -309,7 +304,7 @@
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-default: underline var(--wa-color-brand-border-normal) dotted;
--wa-link-decoration-hover: underline;
/**
@@ -335,8 +330,8 @@
--wa-form-controls-corners: var(--wa-corners-s);
--wa-form-controls-activated-color: var(--wa-color-brand-spot);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-highlight);
--wa-form-controls-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-controls-resting-color: var(--wa-color-neutral-border-normal);
--wa-form-controls-label-color: var(--wa-color-text-normal);
--wa-form-controls-label-font-weight: var(--wa-font-weight-normal);
@@ -411,55 +406,50 @@
/**
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-primary-80);
--wa-color-brand-spot-darker: var(--wa-color-primary-60);
--wa-color-brand-fill-subtle: var(--wa-color-primary-30);
--wa-color-brand-fill-highlight: var(--wa-color-primary-40);
--wa-color-brand-border-subtle: var(--wa-color-primary-30);
--wa-color-brand-border-highlight: var(--wa-color-primary-40);
--wa-color-brand-text-on-spot: var(--wa-color-primary-20);
--wa-color-brand-text-on-fill: var(--wa-color-primary-90);
--wa-color-brand-text-on-surface: var(--wa-color-primary-70);
--wa-color-brand-fill-loud: var(--wa-color-primary-80);
--wa-color-brand-fill-quiet: var(--wa-color-primary-30);
--wa-color-brand-fill-normal: var(--wa-color-primary-40);
--wa-color-brand-border-quiet: var(--wa-color-primary-30);
--wa-color-brand-border-normal: var(--wa-color-primary-40);
--wa-color-brand-on-loud: var(--wa-color-primary-20);
--wa-color-brand-on-normal: var(--wa-color-primary-90);
--wa-color-brand-on-quiet: var(--wa-color-primary-70);
--wa-color-success-spot: var(--wa-color-green-80);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--wa-color-success-fill-subtle: var(--wa-color-green-30);
--wa-color-success-fill-highlight: var(--wa-color-green-40);
--wa-color-success-border-subtle: var(--wa-color-green-30);
--wa-color-success-border-highlight: var(--wa-color-green-40);
--wa-color-success-text-on-spot: var(--wa-color-green-20);
--wa-color-success-text-on-fill: var(--wa-color-green-90);
--wa-color-success-text-on-surface: var(--wa-color-green-70);
--wa-color-success-fill-loud: var(--wa-color-green-80);
--wa-color-success-fill-quiet: var(--wa-color-green-30);
--wa-color-success-fill-normal: var(--wa-color-green-40);
--wa-color-success-border-quiet: var(--wa-color-green-30);
--wa-color-success-border-normal: var(--wa-color-green-40);
--wa-color-success-on-loud: var(--wa-color-green-20);
--wa-color-success-on-normal: var(--wa-color-green-90);
--wa-color-success-on-quiet: var(--wa-color-green-70);
--wa-color-warning-spot: var(--wa-color-yellow-80);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--wa-color-warning-fill-subtle: var(--wa-color-yellow-30);
--wa-color-warning-fill-highlight: var(--wa-color-yellow-40);
--wa-color-warning-border-subtle: var(--wa-color-yellow-30);
--wa-color-warning-border-highlight: var(--wa-color-yellow-40);
--wa-color-warning-text-on-spot: var(--wa-color-yellow-20);
--wa-color-warning-text-on-fill: var(--wa-color-yellow-90);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-70);
--wa-color-warning-fill-loud: var(--wa-color-yellow-80);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-30);
--wa-color-warning-fill-normal: var(--wa-color-yellow-40);
--wa-color-warning-border-quiet: var(--wa-color-yellow-30);
--wa-color-warning-border-normal: var(--wa-color-yellow-40);
--wa-color-warning-on-loud: var(--wa-color-yellow-20);
--wa-color-warning-on-normal: var(--wa-color-yellow-90);
--wa-color-warning-on-quiet: var(--wa-color-yellow-70);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-50);
--wa-color-danger-fill-subtle: var(--wa-color-red-30);
--wa-color-danger-fill-highlight: var(--wa-color-red-40);
--wa-color-danger-border-subtle: var(--wa-color-red-30);
--wa-color-danger-border-highlight: var(--wa-color-red-40);
--wa-color-danger-text-on-spot: var(--wa-color-red-20);
--wa-color-danger-text-on-fill: var(--wa-color-red-90);
--wa-color-danger-text-on-surface: var(--wa-color-red-70);
--wa-color-danger-fill-loud: var(--wa-color-red-70);
--wa-color-danger-fill-quiet: var(--wa-color-red-30);
--wa-color-danger-fill-normal: var(--wa-color-red-40);
--wa-color-danger-border-quiet: var(--wa-color-red-30);
--wa-color-danger-border-normal: var(--wa-color-red-40);
--wa-color-danger-on-loud: var(--wa-color-red-20);
--wa-color-danger-on-normal: var(--wa-color-red-90);
--wa-color-danger-on-quiet: var(--wa-color-red-70);
--wa-color-neutral-spot: var(--wa-color-base-40);
--wa-color-neutral-spot-darker: var(--wa-color-base-30);
--wa-color-neutral-fill-subtle: var(--wa-color-base-20);
--wa-color-neutral-fill-highlight: var(--wa-color-base-30);
--wa-color-neutral-border-subtle: var(--wa-color-base-30);
--wa-color-neutral-border-highlight: var(--wa-color-base-70);
--wa-color-neutral-text-on-spot: var(--wa-color-base-95);
--wa-color-neutral-text-on-fill: var(--wa-color-base-90);
--wa-color-neutral-text-on-surface: var(--wa-color-base-70);
--wa-color-neutral-fill-loud: var(--wa-color-base-40);
--wa-color-neutral-fill-quiet: var(--wa-color-base-20);
--wa-color-neutral-fill-normal: var(--wa-color-base-30);
--wa-color-neutral-border-quiet: var(--wa-color-base-30);
--wa-color-neutral-border-normal: var(--wa-color-base-70);
--wa-color-neutral-on-loud: var(--wa-color-base-95);
--wa-color-neutral-on-normal: var(--wa-color-base-90);
--wa-color-neutral-on-quiet: var(--wa-color-base-70);
}
/* #region Custom Styles */
@@ -500,9 +490,9 @@
wa-switch {
--background: transparent;
--border-color: var(--wa-color-neutral-border-highlight);
--border-color: var(--wa-color-neutral-border-normal);
--thumb-color: var(--border-color);
--thumb-color-checked: var(--wa-color-brand-fill-subtle);
--thumb-color-checked: var(--wa-color-brand-fill-quiet);
--thumb-size: 1em;
--height: 1.5em;
--width: calc(var(--thumb-size) * 2.5);
@@ -527,8 +517,8 @@
}
wa-carousel {
--pagination-color-activated: var(--wa-color-brand-spot);
--pagination-color-resting: var(--wa-color-neutral-fill-highlight);
--pagination-color-activated: var(--wa-color-brand-fill-loud);
--pagination-color-resting: var(--wa-color-neutral-fill-normal);
}
wa-badge,
@@ -581,12 +571,12 @@
}
.project-header {
background-color: var(--wa-color-warning-fill-highlight);
background-color: var(--wa-color-warning-fill-normal);
}
.strata.hero {
height: 60rem;
background: var(--wa-color-warning-fill-highlight) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
background-size: cover;
padding-top: var(--wa-space-2xl);
padding-left: var(--wa-space-s);
@@ -594,7 +584,7 @@
}
.hero .hero-title {
color: var(--wa-color-warning-text-on-fill);
color: var(--wa-color-warning-on-normal);
font-style: italic;
}
@@ -646,11 +636,11 @@
.message-composer wa-card::part(header) {
border-width: 0;
background-color: var(--wa-color-neutral-fill-subtle);
background-color: var(--wa-color-neutral-fill-quiet);
}
&:not(.wa-theme-premium-dark) .message-composer wa-card {
--wa-color-neutral-fill-subtle: var(--wa-color-base-95);
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
}
.message-composer wa-card::part(footer) {
@@ -664,7 +654,7 @@
justify-content: center;
}
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
background-color: var(--wa-color-neutral-fill-highlight);
background-color: var(--wa-color-neutral-fill-normal);
color: var(--wa-color-text-normal);
}
@@ -701,7 +691,7 @@
.wa-theme-premium-dark {
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
--wa-color-neutral-border-subtle: var(--wa-color-base-40);
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
}
& .preview-container pre,
@@ -737,7 +727,7 @@
/* responsive */
@container preview (min-width: 1040px) {
.strata.hero {
background: var(--wa-color-warning-fill-highlight) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
padding-top: 15rem;
padding-left: 50%;
}