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

prettier

Browse Source
This commit is contained in:
Cory LaViska
2023-09-11 13:53:21 -04:00
parent 5a55c240ee
commit 1f04cd2a50
33 changed files with 240 additions and 515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
docs/assets/styles/code-previews.css
View File

@@ -8,21 +8,19 @@
.code-preview__preview {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: none;
border-top-left-radius: var(--wa-corners-1x);
border-top-right-radius: var(--wa-corners-1x);
background-color: var(--wa-color-surface-default);
min-width: 20rem;
max-width: 100%;
padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl)
var(--wa-space-xl);
padding: var(--wa-space-xl) var(--wa-space-3xl) var(--wa-space-xl) var(--wa-space-xl);
}
/* Block the preview while dragging to prevent iframes from intercepting drag events */
.code-preview__preview--dragging:after {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@@ -44,8 +42,7 @@
font-size: 20px;
color: var(--wa-color-text-quiet);
background-color: var(--wa-color-surface-default);
border-left: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-top-right-radius: var(--wa-corners-1x);
cursor: ew-resize;
}
@@ -61,8 +58,7 @@
}
.code-preview__source {
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom: none;
border-radius: 0 !important;
display: none;
@@ -78,8 +74,7 @@
.code-preview__buttons {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-bottom-left-radius: var(--wa-corners-1x);
border-bottom-right-radius: var(--wa-corners-1x);
display: flex;
@@ -102,8 +97,7 @@
}
.code-preview__button:not(:last-of-type) {
border-right: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
.code-preview__button--html,
@@ -135,8 +129,7 @@
.code-preview__button:hover,
.code-preview__button:active {
box-shadow: 0 0 0 var(--wa-border-width-thin)
var(--wa-color-brand-outline-muted);
box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-outline-muted);
border-right-color: transparent;
background-color: var(--wa-color-brand-fill-muted);
color: var(--wa-color-brand-text-on-surface);
@@ -171,10 +164,10 @@
}
/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
.flavor-html [data-flavor]:not([data-flavor="html"]) {
.flavor-html [data-flavor]:not([data-flavor='html']) {
display: none;
}
.flavor-react [data-flavor]:not([data-flavor="react"]) {
.flavor-react [data-flavor]:not([data-flavor='react']) {
display: none;
}

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

@@ -128,8 +128,7 @@ h1 {
h2 {
font-size: 1.875rem;
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
h3 {
@@ -205,8 +204,7 @@ code {
kbd {
background: var(--wa-color-neutral-fill-muted);
border: solid 1px var(--wa-color-neutral-outline-muted);
box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white),
0 1px 0 0 var(--wa-color-tint-black);
box-shadow: inset 0 1px 0 1px var(--wa-color-tint-white), 0 1px 0 0 var(--wa-color-tint-black);
font-family: var(--wa-font-family-code);
font-size: 0.9125em;
border-radius: var(--wa-corners-1x);
@@ -239,8 +237,7 @@ mark {
hr {
border: none;
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
margin: calc(var(--docs-content-vertical-spacing) * 2) 0;
}
@@ -312,7 +309,7 @@ svg.wordmark {
}
.anchor-heading a::after {
content: "#";
content: '#';
color: color-mix(in oklch, var(--wa-color-text-link) 100%, black 12%);
margin-inline: 0.5rem;
opacity: 0;
@@ -343,8 +340,7 @@ table {
}
table tr {
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
table th {
@@ -496,19 +492,11 @@ pre .token.italic {
}
.copy-code-button::part(button):hover {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 4%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 4%);
}
.copy-code-button::part(button):active {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 8%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 8%);
}
pre .copy-code-button {
@@ -567,8 +555,7 @@ pre:hover .copy-code-button,
float: none;
width: calc(100% + (var(--docs-content-padding) * 2));
max-width: none;
margin: var(--docs-content-vertical-spacing)
calc(-1 * var(--docs-content-padding));
margin: var(--docs-content-vertical-spacing) calc(-1 * var(--docs-content-padding));
}
}
@@ -612,9 +599,7 @@ pre:hover .copy-code-button,
}
.content details + details {
margin-top: calc(
-1 * var(--docs-content-vertical-spacing) + (2 * var(--wa-border-width-thin))
);
margin-top: calc(-1 * var(--docs-content-vertical-spacing) + (2 * var(--wa-border-width-thin)));
}
/* Sidebar */
@@ -627,8 +612,7 @@ pre:hover .copy-code-button,
z-index: 20;
width: var(--docs-sidebar-width);
background-color: var(--docs-background-color);
border-right: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-right: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: 0;
padding: 2rem;
margin: 0;
@@ -673,8 +657,7 @@ pre:hover .copy-code-button,
#sidebar nav h2 {
font-size: var(--wa-font-size-m);
font-weight: var(--wa-font-weight-medium);
border-bottom: solid var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-outline);
margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
}
@@ -774,13 +757,8 @@ main {
.content--with-toc {
/* There's a 2rem gap, so we need to remove it from the column */
grid-template-columns: calc(75% - 2rem) min(
25%,
var(--docs-content-toc-max-width)
);
max-width: calc(
var(--docs-content-max-width) + var(--docs-content-toc-max-width)
);
grid-template-columns: calc(75% - 2rem) min(25%, var(--docs-content-toc-max-width));
max-width: calc(var(--docs-content-max-width) + var(--docs-content-toc-max-width));
}
.content__body {
@@ -805,8 +783,7 @@ main {
max-height: calc(100vh - 6rem);
font-size: var(--wa-font-size-s);
line-height: 1.33;
border-left: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border-left: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
list-style: none;
padding: 1rem 0;
margin: 0;
@@ -819,14 +796,14 @@ main {
margin: 0;
}
.content__toc li[data-level="3"] {
.content__toc li[data-level='3'] {
margin-left: 1rem;
}
/* We don't use them, but just in case */
.content__toc li[data-level="4"],
.content__toc li[data-level="5"],
.content__toc li[data-level="6"] {
.content__toc li[data-level='4'],
.content__toc li[data-level='5'],
.content__toc li[data-level='6'] {
margin-left: 2rem;
}
@@ -878,17 +855,13 @@ main {
}
.content__toc ul::after {
content: "";
content: '';
position: absolute;
top: 0;
bottom: 1rem; /* don't cover the scrollbar */
right: 0;
width: 2rem;
background: linear-gradient(
90deg,
rgba(0 0 0 / 0) 0%,
var(--wa-color-surface-default) 100%
);
background: linear-gradient(90deg, rgba(0 0 0 / 0) 0%, var(--wa-color-surface-default) 100%);
}
.content__toc li {
@@ -899,7 +872,7 @@ main {
margin-bottom: 0;
}
.content__toc [data-level]:not([data-level="2"]) {
.content__toc [data-level]:not([data-level='2']) {
display: none;
}
@@ -960,7 +933,7 @@ html.sidebar-open #menu-toggle {
/* Print styles */
@media print {
a:not(.anchor-heading)[href]::after {
content: " (" attr(href) ")";
content: ' (' attr(href) ')';
}
details,
@@ -1140,8 +1113,8 @@ html.sidebar-open #menu-toggle {
}
}
body[data-page^="/tokens/"] .table-wrapper td:first-child,
body[data-page^="/tokens/"] .table-wrapper td:first-child code {
body[data-page^='/tokens/'] .table-wrapper td:first-child,
body[data-page^='/tokens/'] .table-wrapper td:first-child code {
white-space: nowrap;
}
@@ -1166,7 +1139,7 @@ body[data-page^="/tokens/"] .table-wrapper td:first-child code {
}
.transition-demo:after {
content: "";
content: '';
position: absolute;
background-color: var(--wa-color-brand-fill-vivid);
top: 0;

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

@@ -16,11 +16,7 @@
--docs-search-accent-color: var(--wa-color-brand-text-on-surface);
--docs-search-icon-color: var(--wa-color-neutral-fill-vivid);
--docs-search-icon-color-active: color-mix(
in lch,
var(--wa-color-neutral-fill-vivid),
8% black
);
--docs-search-icon-color-active: color-mix(in lch, var(--wa-color-neutral-fill-vivid), 8% black);
--docs-search-shadow: var(--wa-shadow-level-3);
--docs-search-result-background-hover: var(--wa-color-neutral-fill-muted-alt);
--docs-search-result-color-hover: var(--wa-color-neutral-text-on-muted);
@@ -44,8 +40,7 @@ body.search-visible {
border: none;
border-radius: 9999px;
background: var(--docs-search-box-background);
border: solid var(--docs-search-box-border-width)
var(--docs-search-box-border-color);
border: solid var(--docs-search-box-border-width) var(--docs-search-box-border-color);
font: inherit;
color: var(--docs-search-box-color);
padding: 0.75rem 1rem;
@@ -213,8 +208,7 @@ body.search-visible {
}
.search--has-results .search__body {
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
}
.search__results {
@@ -245,8 +239,8 @@ body.search-visible {
color: var(--docs-search-result-color-hover);
}
.search__results li[data-selected="true"] a,
.search__results li[data-selected="true"] a * {
.search__results li[data-selected='true'] a,
.search__results li[data-selected='true'] a * {
outline: none;
background-color: var(--docs-search-result-background-active);
color: var(--docs-search-result-color-active);
@@ -315,8 +309,7 @@ body.search-visible {
.search__empty {
display: none;
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
text-align: center;
color: var(--docs-search-text-color-muted);
padding: 2rem;
@@ -330,8 +323,7 @@ body.search-visible {
display: flex;
justify-content: center;
gap: 2rem;
border-top: solid var(--docs-search-border-width)
var(--docs-search-border-color);
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: 1rem;

21
docs/pages/components/icon.md
View File

@@ -204,11 +204,11 @@ Here's an example that registers an icon library located in the `/assets/icons`
```html
<script type="module">
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
registerIconLibrary("my-icons", {
resolver: (name) => `/assets/icons/${name}.svg`,
mutator: (svg) => svg.setAttribute("fill", "currentColor"),
registerIconLibrary('my-icons', {
resolver: name => `/assets/icons/${name}.svg`,
mutator: svg => svg.setAttribute('fill', 'currentColor')
});
</script>
```
@@ -626,11 +626,10 @@ This example will load the same set of icons from the jsDelivr CDN instead of yo
```html
<script type="module">
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
registerIconLibrary("default", {
resolver: (name) =>
`https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`,
registerIconLibrary('default', {
resolver: name => `https://cdn.jsdelivr.net/npm/bootstrap-icons@1.0.0/icons/${name}.svg`
});
</script>
```
@@ -674,10 +673,10 @@ If you want to change the icons Web Awesome uses internally, you can register an
```html
<script type="module">
import { registerIconLibrary } from "/dist/utilities/icon-library.js";
import { registerIconLibrary } from '/dist/utilities/icon-library.js';
registerIconLibrary("system", {
resolver: (name) => `/path/to/custom/icons/${name}.svg`,
registerIconLibrary('system', {
resolver: name => `/path/to/custom/icons/${name}.svg`
});
</script>
```

2
docs/pages/components/popup.md
View File

@@ -1539,7 +1539,7 @@ const virtualElement = {
getBoundingClientRect() {
// ...
return { width, height, x, y, top, left, right, bottom };
},
}
};
```

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -38,36 +38,31 @@ export default css`
.alert--brand {
background-color: var(--wa-color-brand-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-brand-outline-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-brand-outline-muted);
color: var(--wa-color-brand-text-on-muted);
}
.alert--success {
background-color: var(--wa-color-success-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-success-outline-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-success-outline-muted);
color: var(--wa-color-success-text-on-muted);
}
.alert--neutral {
background-color: var(--wa-color-neutral-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-neutral-outline-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-neutral-outline-muted);
color: var(--wa-color-neutral-text-on-muted);
}
.alert--warning {
background-color: var(--wa-color-warning-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-warning-outline-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-warning-outline-muted);
color: var(--wa-color-warning-text-on-muted);
}
.alert--danger {
background-color: var(--wa-color-danger-fill-muted);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-danger-outline-muted);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-danger-outline-muted);
color: var(--wa-color-danger-text-on-muted);
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -24,9 +24,8 @@ export default css`
white-space: nowrap;
vertical-align: middle;
padding: 0;
transition: var(--wa-transition-faster) background-color,
var(--wa-transition-faster) color, var(--wa-transition-faster) border,
var(--wa-transition-faster) box-shadow;
transition: var(--wa-transition-faster) background-color, var(--wa-transition-faster) color,
var(--wa-transition-faster) border, var(--wa-transition-faster) box-shadow;
cursor: inherit;
}
@@ -100,19 +99,11 @@ export default css`
}
.button--standard.button--brand:hover:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
}
.button--standard.button--brand:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
}
/* Success */
@@ -122,19 +113,11 @@ export default css`
}
.button--standard.button--success:hover:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
}
.button--standard.button--success:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
}
/* Neutral */
@@ -144,19 +127,11 @@ export default css`
}
.button--standard.button--neutral:hover:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
}
.button--standard.button--neutral:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
}
/* Warning */
@@ -165,19 +140,11 @@ export default css`
color: var(--wa-color-warning-text-on-vivid);
}
.button--standard.button--warning:hover:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
}
.button--standard.button--warning:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
}
/* Danger */
@@ -187,19 +154,11 @@ export default css`
}
.button--standard.button--danger:hover:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
}
.button--standard.button--danger:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
}
/*
@@ -219,30 +178,14 @@ export default css`
.button--outline.button--brand:hover:not(.button--disabled),
.button--outline.button--brand.button--checked:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), white 6%);
color: var(--wa-color-brand-text-on-vivid);
}
.button--outline.button--brand:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-brand-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-brand-fill-vivid), black 6%);
}
/* Success */
@@ -253,51 +196,26 @@ export default css`
.button--outline.button--success:hover:not(.button--disabled),
.button--outline.button--success.button--checked:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), white 6%);
color: var(--wa-color-success-text-on-vivid);
}
.button--outline.button--success:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-success-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-success-fill-vivid), black 6%);
}
.button--outline.button--small {
line-height: calc(
var(--wa-form-controls-height-s) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
line-height: calc(var(--wa-form-controls-height-s) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
.button--outline.button--medium {
line-height: calc(
var(--wa-form-controls-height-m) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
line-height: calc(var(--wa-form-controls-height-m) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
.button--outline.button--large {
line-height: calc(
var(--wa-form-controls-height-l) -
max(1px, var(--wa-form-controls-border-width)) * 2
);
line-height: calc(var(--wa-form-controls-height-l) - max(1px, var(--wa-form-controls-border-width)) * 2);
}
/* Neutral */
@@ -308,30 +226,14 @@ export default css`
.button--outline.button--neutral:hover:not(.button--disabled),
.button--outline.button--neutral.button--checked:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), white 6%);
color: var(--wa-color-neutral-text-on-vivid);
}
.button--outline.button--neutral:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-neutral-fill-vivid), black 6%);
}
/* Warning */
@@ -342,30 +244,14 @@ export default css`
.button--outline.button--warning:hover:not(.button--disabled),
.button--outline.button--warning.button--checked:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), white 6%);
color: var(--wa-color-warning-text-on-vivid);
}
.button--outline.button--warning:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-warning-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-warning-fill-vivid), black 6%);
}
/* Danger */
@@ -376,30 +262,14 @@ export default css`
.button--outline.button--danger:hover:not(.button--disabled),
.button--outline.button--danger.button--checked:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
white 6%
);
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), white 6%);
color: var(--wa-color-danger-text-on-vivid);
}
.button--outline.button--danger:active:not(.button--disabled) {
background-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
border-color: color-mix(
in oklch,
var(--wa-color-danger-fill-vivid),
black 6%
);
background-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
border-color: color-mix(in oklch, var(--wa-color-danger-fill-vivid), black 6%);
}
@media (forced-colors: active) {
@@ -602,8 +472,7 @@ export default css`
* buttons and we style them here instead.
*/
:host(.wa-button-group__button--first:not(.wa-button-group__button--last))
.button {
:host(.wa-button-group__button--first:not(.wa-button-group__button--last)) .button {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
@@ -612,8 +481,7 @@ export default css`
border-radius: 0;
}
:host(.wa-button-group__button--last:not(.wa-button-group__button--first))
.button {
:host(.wa-button-group__button--last:not(.wa-button-group__button--first)) .button {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
@@ -624,14 +492,9 @@ export default css`
}
/* Add a visual separator between solid buttons */
:host(
.wa-button-group__button:not(
.wa-button-group__button--first,
.wa-button-group__button--radio
):not(:hover)
)
:host(.wa-button-group__button:not(.wa-button-group__button--first, .wa-button-group__button--radio):not(:hover))
.button:after {
content: "";
content: '';
position: absolute;
top: 0;
inset-inline-start: 0;

13
src/components/carousel/carousel.styles.ts
View File

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -17,8 +17,8 @@ export default css`
grid-template-columns: min-content 1fr min-content;
grid-template-rows: 1fr min-content;
grid-template-areas:
". slides ."
". pagination .";
'. slides .'
'. pagination .';
gap: var(--wa-space-m);
align-items: center;
min-height: 100%;
@@ -48,10 +48,7 @@ export default css`
aspect-ratio: calc(var(--aspect-ratio) * var(--slides-per-page));
border-radius: var(--wa-corners-1x);
--slide-size: calc(
(100% - (var(--slides-per-page) - 1) * var(--slide-gap)) /
var(--slides-per-page)
);
--slide-size: calc((100% - (var(--slides-per-page) - 1) * var(--slide-gap)) / var(--slides-per-page));
}
@media (prefers-reduced-motion) {

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -42,13 +42,11 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: var(--wa-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
border-radius: 2px;
background-color: var(--wa-form-controls-background);
color: var(--wa-form-controls-text-color);
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}
@@ -68,9 +66,7 @@ export default css`
}
/* Focus */
.checkbox:not(.checkbox--checked):not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control {
.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
border-color: var(--wa-form-controls-border-color-activated);
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
@@ -85,12 +81,8 @@ export default css`
}
/* Checked/indeterminate + focus */
.checkbox.checkbox--checked:not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled)
.checkbox__input:focus-visible
~ .checkbox__control {
.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control,
.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__input:focus-visible ~ .checkbox__control {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -27,8 +27,7 @@ export default css`
}
.color-picker--inline {
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
}
.color-picker--inline:focus-visible {
@@ -39,11 +38,7 @@ export default css`
.color-picker__grid {
position: relative;
height: var(--grid-height);
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 100%
),
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
border-top-left-radius: var(--wa-corners-1x);
border-top-right-radius: var(--wa-corners-1x);
@@ -148,7 +143,7 @@ export default css`
}
.color-picker__preview:before {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@@ -245,26 +240,10 @@ export default css`
}
.color-picker__transparent-bg {
background-image: linear-gradient(
45deg,
var(--wa-color-neutral-fill-muted-alt) 25%,
transparent 25%
),
linear-gradient(
45deg,
transparent 75%,
var(--wa-color-neutral-fill-muted-alt) 75%
),
linear-gradient(
45deg,
transparent 75%,
var(--wa-color-neutral-fill-muted-alt) 75%
),
linear-gradient(
45deg,
var(--wa-color-neutral-fill-muted-alt) 25%,
transparent 25%
);
background-image: linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
linear-gradient(45deg, transparent 75%, var(--wa-color-neutral-fill-muted-alt) 75%),
linear-gradient(45deg, var(--wa-color-neutral-fill-muted-alt) 25%, transparent 25%);
background-size: 10px 10px;
background-position: 0 0, 0 0, -5px -5px, 5px 5px;
}
@@ -324,7 +303,7 @@ export default css`
}
.color-dropdown__trigger:before {
content: "";
content: '';
position: absolute;
top: 0;
left: 0;
@@ -332,8 +311,7 @@ export default css`
height: 100%;
border-radius: inherit;
background-color: currentColor;
box-shadow: inset 0 0 0 2px var(--wa-form-controls-border-color-resting),
inset 0 0 0 4px var(--wa-color-white);
box-shadow: inset 0 0 0 2px var(--wa-form-controls-border-color-resting), inset 0 0 0 4px var(--wa-color-white);
}
.color-dropdown__trigger--empty:before {
@@ -344,9 +322,7 @@ export default css`
outline: none;
}
.color-dropdown__trigger:focus-visible:not(
.color-dropdown__trigger--disabled
) {
.color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,6 +1,6 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
export default css`
${componentStyles}
@@ -22,15 +22,13 @@ export default css`
vertical-align: middle;
overflow: hidden;
cursor: text;
transition: var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
}
/* Standard inputs */
.input--standard {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}
@@ -136,10 +134,7 @@ export default css`
}
.input--small .input__control {
height: calc(
var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) *
2
);
height: calc(var(--wa-form-controls-height-s) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-s);
}
@@ -163,10 +158,7 @@ export default css`
}
.input--medium .input__control {
height: calc(
var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) *
2
);
height: calc(var(--wa-form-controls-height-m) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-m);
}
@@ -190,10 +182,7 @@ export default css`
}
.input--large .input__control {
height: calc(
var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) *
2
);
height: calc(var(--wa-form-controls-height-l) - var(--wa-form-controls-border-width) * 2);
padding: 0 var(--wa-space-l);
}
@@ -268,13 +257,13 @@ export default css`
}
/* Hide the built-in number spinner */
.input--no-spin-buttons input[type="number"]::-webkit-outer-spin-button,
.input--no-spin-buttons input[type="number"]::-webkit-inner-spin-button {
.input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
.input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
.input--no-spin-buttons input[type="number"] {
.input--no-spin-buttons input[type='number'] {
-moz-appearance: textfield;
}
`;

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -67,7 +67,7 @@ export default css`
outline: none;
}
:host(:hover:not([aria-disabled="true"], :focus-visible)) .menu-item,
:host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item,
.menu-item--submenu-expanded {
background-color: var(--wa-color-neutral-fill-muted);
color: var(--wa-color-text-normal);
@@ -107,7 +107,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:hover:not([aria-disabled="true"])) .menu-item,
:host(:hover:not([aria-disabled='true'])) .menu-item,
:host(:focus-visible) .menu-item {
outline: dashed 1px SelectedItem;
outline-offset: -1px;

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -22,8 +22,7 @@ export default css`
font-weight: var(--wa-font-weight-normal);
line-height: var(--wa-line-height-regular);
color: var(--wa-color-neutral-text-on-surface);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs)
var(--wa-space-xs);
padding: var(--wa-space-xs) var(--wa-space-m) var(--wa-space-xs) var(--wa-space-xs);
transition: var(--wa-transition-fast) fill;
cursor: pointer;
}
@@ -81,7 +80,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:hover:not([aria-disabled="true"])) .option {
:host(:hover:not([aria-disabled='true'])) .option {
outline: dashed 1px SelectedItem;
outline-offset: -1px;
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -31,9 +31,7 @@ export default css`
.progress-ring__track,
.progress-ring__indicator {
--radius: calc(
var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5
);
--radius: calc(var(--size) / 2 - max(var(--track-width), var(--indicator-width)) * 0.5);
--circumference: calc(var(--radius) * 2 * 3.141592654);
fill: none;
@@ -54,9 +52,7 @@ export default css`
transition-property: stroke-dashoffset;
transition-duration: var(--indicator-transition-duration);
stroke-dasharray: var(--circumference) var(--circumference);
stroke-dashoffset: calc(
var(--circumference) - var(--percentage) * var(--circumference)
);
stroke-dashoffset: calc(var(--circumference) - var(--percentage) * var(--circumference));
}
.progress-ring__label {

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -52,13 +52,11 @@ export default css`
justify-content: center;
width: var(--toggle-size);
height: var(--toggle-size);
border: var(--wa-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
border: var(--wa-border-style) var(--wa-form-controls-border-width) var(--wa-form-controls-border-color-resting);
border-radius: 50%;
background-color: var(--wa-form-controls-background);
color: transparent;
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
}

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

@@ -1,6 +1,6 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
export default css`
${componentStyles}
@@ -35,12 +35,10 @@ export default css`
background-image: linear-gradient(
to right,
var(--track-color-inactive) 0%,
var(--track-color-inactive)
min(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) 100%
);
}
@@ -49,12 +47,10 @@ export default css`
background-image: linear-gradient(
to left,
var(--track-color-inactive) 0%,
var(--track-color-inactive)
min(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) min(var(--percent), var(--track-active-offset)),
var(--track-color-active) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive)
max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) max(var(--percent), var(--track-active-offset)),
var(--track-color-inactive) 100%
);
}
@@ -73,8 +69,7 @@ export default css`
height: var(--thumb-size);
border-radius: 50%;
background-color: var(--wa-color-brand-fill-vivid);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width) var(--wa-color-brand-fill-vivid);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width) var(--wa-color-brand-fill-vivid);
-webkit-appearance: none;
margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
cursor: pointer;
@@ -115,8 +110,7 @@ export default css`
border-radius: 50%;
background-color: var(--wa-color-brand-fill-vivid);
border-color: var(--wa-color-brand-fill-vivid);
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color,
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) color, var(--wa-transition-fast) box-shadow;
cursor: pointer;
}
@@ -166,7 +160,7 @@ export default css`
}
.range__tooltip:after {
content: "";
content: '';
position: absolute;
width: 0;
height: 0;
@@ -184,8 +178,7 @@ export default css`
}
.range--tooltip-top .range__tooltip:after {
border-top: var(--wa-tooltip-arrow-size) solid
var(--wa-color-neutral-fill-vivid);
border-top: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
top: 100%;
@@ -197,8 +190,7 @@ export default css`
}
.range--tooltip-bottom .range__tooltip:after {
border-bottom: var(--wa-tooltip-arrow-size) solid
var(--wa-color-neutral-fill-vivid);
border-bottom: var(--wa-tooltip-arrow-size) solid var(--wa-color-neutral-fill-vivid);
border-left: var(--wa-tooltip-arrow-size) solid transparent;
border-right: var(--wa-tooltip-arrow-size) solid transparent;
bottom: 100%;

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,6 +1,6 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
export default css`
${componentStyles}
@@ -23,11 +23,11 @@ export default css`
z-index: var(--wa-z-index-dropdown);
}
.select[data-current-placement^="top"]::part(popup) {
.select[data-current-placement^='top']::part(popup) {
transform-origin: bottom;
}
.select[data-current-placement^="bottom"]::part(popup) {
.select[data-current-placement^='bottom']::part(popup) {
transform-origin: top;
}
@@ -45,8 +45,7 @@ export default css`
vertical-align: middle;
overflow: hidden;
cursor: pointer;
transition: var(--wa-transition-fast) color,
var(--wa-transition-fast) border, var(--wa-transition-fast) box-shadow,
transition: var(--wa-transition-fast) color, var(--wa-transition-fast) border, var(--wa-transition-fast) box-shadow,
var(--wa-transition-fast) background-color;
}
@@ -112,8 +111,7 @@ export default css`
/* Standard selects */
.select--standard .select__combobox {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}
@@ -164,8 +162,7 @@ export default css`
margin-inline-end: var(--wa-space-s);
}
.select--small.select--multiple:not(.select--placeholder-visible)
.select__combobox {
.select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
padding-block: 2px;
padding-inline-start: 0;
}
@@ -190,8 +187,7 @@ export default css`
margin-inline-end: var(--wa-space-m);
}
.select--medium.select--multiple:not(.select--placeholder-visible)
.select__combobox {
.select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
padding-inline-start: 0;
padding-block: 3px;
}
@@ -216,8 +212,7 @@ export default css`
margin-inline-end: var(--wa-space-l);
}
.select--large.select--multiple:not(.select--placeholder-visible)
.select__combobox {
.select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
padding-inline-start: 0;
padding-block: 4px;
}
@@ -292,8 +287,7 @@ export default css`
font-weight: var(--wa-font-weight-normal);
box-shadow: var(--wa-shadow-level-3);
background: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin)
var(--wa-color-surface-outline);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-outline);
border-radius: var(--wa-corners-1x);
padding-block: var(--wa-space-xs);
padding-inline: 0;

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -7,11 +7,7 @@ export default css`
:host {
--border-radius: var(--wa-corners-pill);
--color: var(--wa-color-neutral-fill-muted);
--sheen-color: color-mix(
in oklch,
var(--wa-color-neutral-fill-muted),
white 50%
);
--sheen-color: color-mix(in oklch, var(--wa-color-neutral-fill-muted), white 50%);
display: block;
position: relative;
@@ -31,13 +27,7 @@ export default css`
}
.skeleton--sheen .skeleton__indicator {
background: linear-gradient(
270deg,
var(--sheen-color),
var(--color),
var(--color),
var(--sheen-color)
);
background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));
background-size: 400% 100%;
background-size: 400% 100%;
animation: sheen 8s ease-in-out infinite;

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -49,7 +49,7 @@ export default css`
:host(:not([vertical])) .divider::after {
display: flex;
content: "";
content: '';
position: absolute;
height: 100%;
left: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);
@@ -66,7 +66,7 @@ export default css`
}
:host([vertical]) .divider::after {
content: "";
content: '';
position: absolute;
width: 100%;
top: calc(var(--divider-hit-area) / -2 + var(--divider-width) / 2);

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -8,7 +8,7 @@ export default css`
display: inline-block;
}
:host([size="small"]) {
:host([size='small']) {
--height: var(--wa-form-control-toggle-size-s);
--thumb-size: calc(var(--wa-form-control-toggle-size-s) + 4px);
--width: calc(var(--height) * 2);
@@ -16,7 +16,7 @@ export default css`
font-size: var(--wa-font-size-s);
}
:host([size="medium"]) {
:host([size='medium']) {
--height: var(--wa-form-control-toggle-size-m);
--thumb-size: calc(var(--wa-form-control-toggle-size-m) + 4px);
--width: calc(var(--height) * 2);
@@ -24,7 +24,7 @@ export default css`
font-size: var(--wa-font-size-m);
}
:host([size="large"]) {
:host([size='large']) {
--height: var(--wa-form-control-toggle-size-l);
--thumb-size: calc(var(--wa-form-control-toggle-size-l) + 4px);
--width: calc(var(--height) * 2);
@@ -55,8 +55,7 @@ export default css`
background-color: var(--wa-color-neutral-fill-vivid);
border: solid var(--wa-border-width-thin) var(--wa-color-neutral-fill-muted);
border-radius: var(--height);
transition: var(--wa-transition-fast) border-color,
var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border-color, var(--wa-transition-fast) background-color;
}
.switch__control .switch__thumb {
@@ -64,13 +63,11 @@ export default css`
height: var(--thumb-size);
background-color: var(--wa-form-controls-background);
border-radius: 50%;
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width) var(--wa-color-neutral-outline-vivid);
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-color-neutral-outline-vivid);
translate: calc((var(--width) - var(--height)) / -2);
transition: var(--wa-transition-fast) translate ease,
var(--wa-transition-fast) background-color,
var(--wa-transition-fast) border-color,
var(--wa-transition-fast) box-shadow;
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) background-color,
var(--wa-transition-fast) border-color, var(--wa-transition-fast) box-shadow;
}
.switch__input {
@@ -82,10 +79,7 @@ export default css`
}
/* Focus */
.switch:not(.switch--checked):not(.switch--disabled)
.switch__input:focus-visible
~ .switch__control
.switch__thumb {
.switch:not(.switch--checked):not(.switch--disabled) .switch__input:focus-visible ~ .switch__control .switch__thumb {
outline: var(--wa-focus-ring);
outline-offset: var(--wa-focus-ring-offset);
}
@@ -121,9 +115,7 @@ export default css`
}
@media (forced-colors: active) {
.switch.switch--checked:not(.switch--disabled)
.switch__control:hover
.switch__thumb,
.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb,
.switch--checked .switch__control .switch__thumb {
background-color: ButtonText;
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -24,8 +24,7 @@ export default css`
.tab-group__indicator {
position: absolute;
transition: var(--wa-transition-fast) translate ease,
var(--wa-transition-fast) width ease;
transition: var(--wa-transition-fast) translate ease, var(--wa-transition-fast) width ease;
}
.tab-group--has-scroll-controls .tab-group__nav-container {

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}

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

@@ -1,6 +1,6 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import formControlStyles from "../../styles/form-control.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
import formControlStyles from '../../styles/form-control.styles.js';
export default css`
${componentStyles}
@@ -20,16 +20,14 @@ export default css`
color: var(--wa-form-controls-text-color);
line-height: var(--wa-form-controls-value-line-height);
vertical-align: middle;
transition: var(--wa-transition-fast) border,
var(--wa-transition-fast) background-color;
transition: var(--wa-transition-fast) border, var(--wa-transition-fast) background-color;
cursor: text;
}
/* Standard textareas */
.textarea--standard {
background-color: var(--wa-form-controls-background);
border: var(--wa-form-controls-border-style)
var(--wa-form-controls-border-width)
border: var(--wa-form-controls-border-style) var(--wa-form-controls-border-width)
var(--wa-form-controls-border-color-resting);
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -22,19 +22,19 @@ export default css`
z-index: var(--wa-z-index-tooltip);
}
.tooltip[placement^="top"]::part(popup) {
.tooltip[placement^='top']::part(popup) {
transform-origin: bottom;
}
.tooltip[placement^="bottom"]::part(popup) {
.tooltip[placement^='bottom']::part(popup) {
transform-origin: top;
}
.tooltip[placement^="left"]::part(popup) {
.tooltip[placement^='left']::part(popup) {
transform-origin: right;
}
.tooltip[placement^="right"]::part(popup) {
.tooltip[placement^='right']::part(popup) {
transform-origin: left;
}

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

@@ -1,5 +1,5 @@
import { css } from "lit";
import componentStyles from "../../styles/component.styles.js";
import { css } from 'lit';
import componentStyles from '../../styles/component.styles.js';
export default css`
${componentStyles}
@@ -77,8 +77,8 @@ export default css`
rotate: -90deg;
}
.tree-item--expanded slot[name="expand-icon"],
.tree-item:not(.tree-item--expanded) slot[name="collapse-icon"] {
.tree-item--expanded slot[name='expand-icon'],
.tree-item:not(.tree-item--expanded) slot[name='collapse-icon'] {
display: none;
}
@@ -108,12 +108,12 @@ export default css`
z-index: 2;
}
:host(:not([aria-disabled="true"])) .tree-item--selected .tree-item__item {
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
background-color: var(--wa-color-neutral-fill-muted);
border-inline-start-color: var(--wa-color-brand-outline-vivid);
}
:host(:not([aria-disabled="true"])) .tree-item__expand-button {
:host(:not([aria-disabled='true'])) .tree-item__expand-button {
color: var(--wa-color-neutral-fill-vivid);
}
@@ -134,13 +134,12 @@ export default css`
}
.tree-item__children::before {
content: "";
content: '';
position: absolute;
top: var(--indent-guide-offset);
bottom: var(--indent-guide-offset);
left: calc(1em - (var(--indent-guide-width) / 2) - 1px);
border-inline-end: var(--indent-guide-width) var(--indent-guide-style)
var(--indent-guide-color);
border-inline-end: var(--indent-guide-width) var(--indent-guide-style) var(--indent-guide-color);
z-index: 1;
}
@@ -150,7 +149,7 @@ export default css`
}
@media (forced-colors: active) {
:host(:not([aria-disabled="true"])) .tree-item--selected .tree-item__item {
:host(:not([aria-disabled='true'])) .tree-item--selected .tree-item__item {
outline: dashed 1px SelectedItem;
}
}

13
src/themes/default.css
View File

@@ -89,9 +89,9 @@
/**
* Semantic color variants
*/
/* TODO: Add comments for semantic color tokens and usage expectations */
/* TODO: Add tokens for hover and active tints */
/* CONSIDER: Change -alt naming to -tint or -shade? */
/* TODO: Add comments for semantic color tokens and usage expectations */
/* TODO: Add tokens for hover and active tints */
/* CONSIDER: Change -alt naming to -tint or -shade? */
--wa-color-brand-fill-vivid: var(--wa-color-blue-50);
--wa-color-brand-fill-vivid-alt: var(--wa-color-blue-40);
--wa-color-brand-fill-muted: var(--wa-color-blue-95);
@@ -157,9 +157,8 @@
*/
--wa-font-family-heading: system-ui;
--wa-font-family-body: system-ui;
--wa-font-family-code: "Noto Sans Mono", "SFMono-Regular", Consolas,
"Liberation Mono", Menlo, monospace;
--wa-font-family-longform: "Lora", serif;
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: 'Lora', serif;
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
@@ -287,7 +286,7 @@
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
--wa-form-controls-required-content: "*";
--wa-form-controls-required-content: '*';
--wa-form-controls-required-content-color: inherit;
--wa-form-controls-required-content-offset: -0.1em;