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

Merge branch 'next' into patterns-exploration

Browse Source
This commit is contained in:
lindsaym-fa
2024-01-18 08:50:24 -06:00
parent 23420baa63 d1ed504dd8
commit af01e0d060
37 changed files with 469 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/default.njk
View File

@@ -53,7 +53,7 @@
{# Web Fonts #}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Inter:wght@100..900&family=Lora:wght@400..700&family=Mulish:wght@200..1000&family=Noto+Sans+Display:wght@100..900&family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:wght@100..900&family=Noto+Serif:wght@100..900&family=Open+Sans:wght@300..800&family=Playfair+Display:wght@400..900&family=Playfair:opsz,wght@5..1200,300;5..1200,400;5..1200,500;5..1200,600&family=Quicksand:wght@300..700&family=Roboto+Flex:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Mono:wght@300..700&family=Roboto+Serif:opsz,wght@8..144,300;8..144,400;8..144,500;8..144,600&family=Roboto+Slab:wght@300..700&display=swap" rel="stylesheet">
{# Turbo + Scroll positioning #}
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>

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

@@ -8,7 +8,7 @@
.code-preview__preview {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-top-left-radius: var(--wa-corners-s);
border-top-right-radius: var(--wa-corners-s);
@@ -42,7 +42,7 @@
font-size: var(--wa-font-size-xs);
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-border);
border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-top-right-radius: var(--wa-corners-s);
cursor: ew-resize;
}
@@ -58,7 +58,7 @@
}
.code-preview__source {
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom: none;
border-radius: 0 !important;
display: none;
@@ -74,7 +74,7 @@
.code-preview__buttons {
position: relative;
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
display: flex;
@@ -97,7 +97,7 @@
}
.code-preview__button:not(:last-of-type) {
border-right: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border-right: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.code-preview__button--html,
@@ -129,7 +129,7 @@
.code-preview__button:hover,
.code-preview__button:active {
box-shadow: 0 0 0 var(--wa-border-width-thin) var(--wa-color-brand-border-subtle);
box-shadow: 0 0 0 var(--wa-border-width-s) var(--wa-color-brand-border-subtle);
border-right-color: transparent;
background-color: var(--wa-color-brand-fill-subtle);
color: var(--wa-color-brand-text-on-surface);

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

@@ -343,7 +343,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-border);
border-right: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: 0;
padding: 2rem;
margin: 0;
@@ -392,7 +392,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-border);
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-space-xl) 0 var(--wa-space-xs) 0;
}
@@ -517,7 +517,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-border);
border-left: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
list-style: none;
padding: 1rem 0;
margin: 0;
@@ -672,7 +672,7 @@ html.sidebar-open #menu-toggle {
details,
pre {
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
details summary {
@@ -706,7 +706,7 @@ html.sidebar-open #menu-toggle {
}
.code-preview__source-group {
border-bottom: solid 1px var(--wa-border-width-thin);
border-bottom: solid 1px var(--wa-border-width-s);
border-bottom-left-radius: var(--wa-corners-s);
border-bottom-right-radius: var(--wa-corners-s);
}

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

@@ -6,7 +6,7 @@
--docs-search-box-color: var(--wa-form-controls-placeholder-color);
--docs-search-dialog-background: var(--wa-color-surface-raised);
--docs-search-border-width: var(--wa-border-width-thin);
--docs-search-border-width: var(--wa-border-width-s);
--docs-search-border-color: var(--wa-color-surface-border);
--docs-search-text-color: var(--wa-color-text-normal);
--docs-search-text-color-muted: var(--wa-color-text-quiet);

8
docs/pages/experimental/themer.md
View File

@@ -691,6 +691,9 @@ toc: false
case 'lora':
fontFamily = `'Lora', serif`;
break;
case 'mulish':
fontFamily = `'Mulish', sans-serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
@@ -746,6 +749,9 @@ toc: false
case 'lora':
fontFamily = `'Lora', serif`;
break;
case 'mulish':
fontFamily = `'Mulish', sans-serif`;
break;
case 'noto-sans':
fontFamily = `'Noto Sans', sans-serif`;
break;
@@ -846,7 +852,7 @@ toc: false
top: 2rem;
left: 2rem;
background: var(--wa-color-surface-default);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-m);
box-shadow: var(--wa-shadow-level-2);
width: var(--knobs-width);

12
docs/pages/tokens/borders.md
View File

@@ -8,12 +8,12 @@ meta:
Border radius tokens are used to give sharp edges a more subtle, rounded effect. They use rem units so they scale with the base font size. The pixel values displayed are based on a 16px font size.
| Token | Value | Example |
| -------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------ |
| `--wa-border-style` | `solid` | |
| `--wa-border-width-thin` | `0.0625rem` (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-thin);"></div> |
| `--wa-border-width-medium` | `calc(var(--wa-border-width-thin) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-medium);"></div> |
| `--wa-border-width-thick` | `calc(var(--wa-border-width-thin) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-thick);"></div> |
| Token | Value | Example |
| --------------------- | ------------------------------------------ | ------------------------------------------------------------------------------- |
| `--wa-border-style` | `solid` | |
| `--wa-border-width-s` | `0.0625rem` (1px) | <div class="border-demo" style="border-width: var(--wa-border-width-s);"></div> |
| `--wa-border-width-m` | `calc(var(--wa-border-width-s) * 2)` (2px) | <div class="border-demo" style="border-width: var(--wa-border-width-m);"></div> |
| `--wa-border-width-l` | `calc(var(--wa-border-width-s) * 3)` (3px) | <div class="border-demo" style="border-width: var(--wa-border-width-l);"></div> |
## Corners

10
docs/pages/tokens/more.md
View File

@@ -10,10 +10,10 @@ meta:
Focus ring tokens control the appearance of focus rings.
| Token | Value |
| ------------------------ | ---------------------------------------------------------- |
| `--wa-focus-ring` | `solid var(--wa-border-width-thick) var(--wa-color-focus)` |
| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
| Token | Value |
| ------------------------ | ------------------------------------------------------ |
| `--wa-focus-ring` | `solid var(--wa-border-width-l) var(--wa-color-focus)` |
| `--wa-focus-ring-offset` | `0.0625rem` (1px) |
## Form Controls
@@ -23,7 +23,7 @@ Form control tokens control the appearance of form controls such as [input](/com
| -------------------------------------- | ------------------------------------------ |
| `--wa-form-controls-background` | `var(--wa-color-surface-raised)` |
| `--wa-form-controls-border-style` | `var(--wa-border-style)` |
| `--wa-form-controls-border-width` | `var(--wa-border-width-thin)` |
| `--wa-form-controls-border-width` | `var(--wa-border-width-s)` |
| `--wa-form-controls-corners` | `var(--wa-corners-s)` |
| `--wa-form-controls-resting-color` | `var(--wa-color-neutral-border-highlight)` |
| `--wa-form-controls-activated-color` | `var(--wa-color-brand-action-vivid)` |

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

@@ -446,7 +446,7 @@ export default css`
/* All except the first */
:host(.wa-button-group__button:not(.wa-button-group__button--first)) {
margin-inline-start: calc(-1 * var(--wa-border-width-thin));
margin-inline-start: calc(-1 * var(--wa-border-width-s));
}
/* Add a visual separator between solid buttons */

9
src/components/checkbox/checkbox.component.ts
View File

@@ -35,6 +35,15 @@ import type { WebAwesomeFormControl } from '../../internal/webawesome-element.js
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart indeterminate-icon - The indeterminate icon, a `<wa-icon>` element.
* @csspart label - The container that wraps the checkbox's label.
*
* @cssproperty --background - The checkbox's background styles.
* @cssproperty --background-checked - The checkbox's background styles when checked.
* @cssproperty --border-color - The color of the checkbox's borders.
* @cssproperty --border-color-checked - The color of the checkbox's borders when checked.
* @cssproperty --border-radius - The border radius of the checkbox's corners.
* @cssproperty --border-style - The style of the checkbox's borders.
* @cssproperty --border-width - The width of the checkbox's borders. Expects a single value.
* @cssproperty --box-shadow - The shadow effects around the edges of the checkbox.
*/
export default class WaCheckbox extends WebAwesomeElement implements WebAwesomeFormControl {
static styles: CSSResultGroup = styles;

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

@@ -5,6 +5,15 @@ export default css`
${componentStyles}
:host {
--background: var(--wa-form-controls-background);
--background-checked: var(--wa-form-controls-activated-color);
--border-color: var(--wa-form-controls-resting-color);
--border-color-checked: var(--wa-form-controls-activated-color);
--border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/radio */
--border-style: var(--wa-border-style);
--border-width: var(--wa-form-controls-border-width);
--box-shadow: none;
display: inline-block;
}
@@ -41,9 +50,12 @@ 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-resting-color);
border-radius: min(0.375rem, var(--wa-corners-xs)); /* min so it doesn't look like a circle/checkbox */
background-color: var(--wa-form-controls-background);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
background: var(--background);
box-shadow: var(--box-shadow);
color: var(--wa-form-controls-value-color);
transition:
var(--wa-transition-fast) border-color,
@@ -78,8 +90,8 @@ export default css`
.checkbox--checked .checkbox__control,
.checkbox--indeterminate .checkbox__control {
color: var(--wa-color-brand-text-on-spot);
border-color: var(--wa-form-controls-activated-color);
background-color: var(--wa-form-controls-activated-color);
border-color: var(--border-color-checked);
background: var(--background-checked);
}
/* Checked/indeterminate + focus */

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

@@ -26,7 +26,7 @@ export default css`
}
.color-picker--inline {
border: var(--wa-form-controls-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-form-controls-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
}
.color-picker--inline:focus-visible {
@@ -273,7 +273,7 @@ export default css`
.color-dropdown::part(panel) {
max-height: none;
background-color: var(--wa-color-surface-raised);
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
overflow: visible;
}

8
src/components/details/details.component.ts
View File

@@ -35,6 +35,14 @@ import type { CSSResultGroup } from 'lit';
* @csspart summary-icon - The container that wraps the expand/collapse icons.
* @csspart content - The details content.
*
* @cssproperty --background - The details' background styles.
* @cssproperty --border-color - The details' border color.
* @cssproperty --border-radius - The border radius for the details' corners. Expects a single value.
* @cssproperty --border-style - The style of the details' borders.
* @cssproperty --border-width - The width of the details' borders. Expects a single value.
* @cssproperty --icon-color - The color of the details' icon.
* @cssproperty --padding - The padding with the details. Expects a single value.
*
* @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
* @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
*/

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

@@ -5,13 +5,23 @@ export default css`
${componentStyles}
:host {
--background: var(--wa-color-surface-default);
--border-color: var(--wa-color-surface-border);
--border-radius: var(--wa-panel-corners);
--border-style: var(--wa-panel-border-style);
--border-width: var(--wa-panel-border-width);
--icon-color: var(--wa-color-text-quiet);
--padding: var(--wa-space-m);
display: block;
}
.details {
border: solid 1px var(--wa-color-surface-border);
border-radius: var(--wa-panel-corners);
background-color: var(--wa-color-surface-default);
background: var(--background);
border-color: var(--border-color);
border-radius: var(--border-radius);
border-style: var(--border-style);
border-width: var(--border-width);
overflow-anchor: none;
}
@@ -22,7 +32,7 @@ export default css`
.details__header {
display: flex;
align-items: center;
padding: var(--wa-space-m);
padding: var(--padding);
user-select: none;
-webkit-user-select: none;
cursor: pointer;
@@ -60,7 +70,7 @@ export default css`
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--wa-color-text-quiet);
color: var(--icon-color);
transition: var(--wa-transition-fast) rotate ease;
}
@@ -83,6 +93,6 @@ export default css`
.details__content {
display: block;
padding: var(--wa-space-m);
padding: var(--padding);
}
`;

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

@@ -6,7 +6,7 @@ export default css`
:host {
--color: var(--wa-color-surface-border);
--width: var(--wa-border-width-thin);
--width: var(--wa-border-width-s);
--spacing: var(--wa-space-m);
}

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

@@ -8,7 +8,7 @@ export default css`
display: block;
position: relative;
background-color: var(--wa-color-surface-raised);
border: var(--wa-border-style) var(--wa-border-width-thin) var(--wa-color-surface-border);
border: var(--wa-border-style) var(--wa-border-width-s) var(--wa-color-surface-border);
border-radius: var(--wa-corners-s);
padding: var(--wa-space-xs) 0;
overflow: auto;

1
src/components/progress-bar/progress-bar.component.ts
View File

@@ -24,6 +24,7 @@ import type { CSSResultGroup } from 'lit';
* @cssproperty --track-color - The color of the track.
* @cssproperty --indicator-color - The color of the indicator.
* @cssproperty --label-color - The color of the label.
* @cssproperty --box-shadow - The shadow effects around the edges of the progress bar.
*/
export default class WaProgressBar extends WebAwesomeElement {
static styles: CSSResultGroup = styles;

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

@@ -9,6 +9,7 @@ export default css`
--track-color: var(--wa-color-neutral-fill-highlight);
--indicator-color: var(--wa-color-brand-spot);
--label-color: var(--wa-color-brand-text-on-spot);
--box-shadow: none;
display: block;
}
@@ -18,7 +19,7 @@ export default css`
background-color: var(--track-color);
height: var(--height);
border-radius: var(--wa-corners-pill);
box-shadow: var(--wa-shadow-inset);
box-shadow: var(--box-shadow);
overflow: hidden;
}

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

@@ -35,7 +35,7 @@ export default css`
.tab:focus-visible {
outline: var(--wa-focus-ring);
outline-offset: calc(-1 * var(--wa-border-width-thick) - var(--wa-focus-ring-offset));
outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
}
.tab.tab--active:not(.tab--disabled) {

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

@@ -11,7 +11,7 @@ export default css`
.tag {
display: flex;
align-items: center;
border: solid var(--wa-border-width-thin);
border: solid var(--wa-border-width-s);
line-height: 1;
white-space: nowrap;
user-select: none;

12
src/themes/applied.css
View File

@@ -113,7 +113,7 @@ h6 {
hr {
border: none;
border-bottom: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-bottom: solid var(--wa-border-width-s) var(--wa-color-surface-border);
margin: var(--wa-flow-spacing) 0;
}
@@ -316,7 +316,7 @@ details[open] > summary::before {
}
details + details {
margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-thin));
margin-top: calc(-1 * var(--wa-flow-spacing) + var(--wa-border-width-s));
}
/* Tables */
@@ -331,7 +331,7 @@ caption {
}
tbody tr {
border-top: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border-top: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
tbody tr:nth-child(2n + 1) {
@@ -403,10 +403,14 @@ iframe {
/* Links */
a {
color: var(--wa-color-text-link);
text-decoration: var(--wa-link-decoration-default);
-webkit-text-decoration: var(--wa-link-decoration-default);
}
a:hover {
color: color-mix(in oklab, var(--wa-color-text-link) 100%, var(--wa-color-mix-hover));
text-decoration: var(--wa-link-decoration-hover);
-webkit-text-decoration: var(--wa-link-decoration-hover);
}
a:focus,
@@ -451,7 +455,7 @@ textarea {
details,
pre {
background: none;
border: solid var(--wa-border-width-thin) var(--wa-color-surface-border);
border: solid var(--wa-border-width-s) var(--wa-color-surface-border);
}
summary {

43
src/themes/borders_0_minimal.css
View File

@@ -1,43 +0,0 @@
:root {
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-panel-border-style: hidden;
--wa-panel-border-width: var(--wa-border-width-thin);
}
/* #region Buttons */
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
}
}
/* #endregion */

43
src/themes/borders_1_feather.css
View File

@@ -1,43 +0,0 @@
:root {
/**
* Borders
*/
--wa-border-style: dotted;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
}
/* #region Buttons */
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
}
}
/* #endregion */

19
src/themes/borders_2_light.css
View File

@@ -1,19 +0,0 @@
:root {
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
}

19
src/themes/borders_3_medium.css
View File

@@ -1,19 +0,0 @@
:root {
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
}

47
src/themes/borders_4_heavy.css
View File

@@ -1,47 +0,0 @@
:root {
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-thin: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-medium: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-thick: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-thin);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-thin);
}
/* #region Buttons */
wa-button {
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--box-shadow-color: var(--border-color);
&[variant='brand'] {
--border-color: var(--wa-color-brand-spot-darker);
}
&[variant='success'] {
--border-color: var(--wa-color-success-spot-darker);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-spot-darker);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-spot-darker);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-spot-darker);
}
}
/* #endregion */

66
src/themes/chic.css
View File

@@ -1,6 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..600&display=swap');
@import 'depth_3_punchy.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
:root,
:host,
@@ -130,8 +128,8 @@
* 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-lime-70);
--wa-color-brand-spot-darker: var(--wa-color-lime-60);
--wa-color-brand-spot: var(--wa-color-lime-80);
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
--wa-color-brand-fill-subtle: var(--wa-color-lime-95);
--wa-color-brand-fill-highlight: var(--wa-color-lime-90);
--wa-color-brand-border-subtle: var(--wa-color-lime-90);
@@ -140,8 +138,8 @@
--wa-color-brand-text-on-fill: var(--wa-color-lime-40);
--wa-color-brand-text-on-surface: var(--wa-color-lime-50);
--wa-color-success-spot: var(--wa-color-green-70);
--wa-color-success-spot-darker: var(--wa-color-green-60);
--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);
@@ -150,8 +148,8 @@
--wa-color-success-text-on-fill: var(--wa-color-green-40);
--wa-color-success-text-on-surface: var(--wa-color-green-50);
--wa-color-warning-spot: var(--wa-color-yellow-70);
--wa-color-warning-spot-darker: var(--wa-color-yellow-60);
--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);
@@ -160,8 +158,8 @@
--wa-color-warning-text-on-fill: var(--wa-color-yellow-40);
--wa-color-warning-text-on-surface: var(--wa-color-yellow-50);
--wa-color-danger-spot: var(--wa-color-red-70);
--wa-color-danger-spot-darker: var(--wa-color-red-60);
--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);
@@ -170,8 +168,8 @@
--wa-color-danger-text-on-fill: var(--wa-color-red-40);
--wa-color-danger-text-on-surface: var(--wa-color-red-50);
--wa-color-neutral-spot: var(--wa-color-base-70);
--wa-color-neutral-spot-darker: var(--wa-color-base-60);
--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);
@@ -190,12 +188,12 @@
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-medium: 500;
--wa-font-weight-heavy: 600;
--wa-font-weight-medium: 550;
--wa-font-weight-heavy: 650;
--wa-font-weight-heading: var(--wa-font-weight-medium);
--wa-font-weight-heading: var(--wa-font-weight-heavy);
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-heavy);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -238,12 +236,30 @@
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
/* Corners are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-corners-base: 0.5;
--wa-corners-base: 0.75;
--wa-corners-xs: calc(var(--wa-corners-base) * 0.75rem);
--wa-corners-s: calc(var(--wa-corners-base) * 1rem);
--wa-corners-m: calc(var(--wa-corners-base) * 2rem);
@@ -262,6 +278,12 @@
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -317,8 +339,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -336,7 +358,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -355,8 +377,8 @@
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-lime-80);
--wa-color-brand-spot-darker: var(--wa-color-lime-70);
--wa-color-brand-fill-subtle: var(--wa-color-lime-10);

35
src/themes/classic.css
View File

@@ -1,5 +1,4 @@
@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
@import 'classic_components.css';
:root,
@@ -240,6 +239,24 @@
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -265,6 +282,12 @@
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -314,8 +337,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -333,7 +356,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -352,8 +375,8 @@
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-blue-50);
--wa-color-brand-spot-darker: var(--wa-color-blue-40);
--wa-color-brand-fill-subtle: var(--wa-color-blue-10);

3
src/themes/classic_components.css
View File

@@ -1,8 +1,7 @@
/* #region Alerts */
wa-alert {
--background: var(--wa-color-surface-default);
--border-width: var(--wa-border-width-thick) var(--wa-border-width-thin) var(--wa-border-width-thin)
var(--wa-border-width-thin);
--border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
--content-color: var(--wa-color-text-normal);
--padding: var(--wa-space-l);

36
src/themes/default.css
View File

@@ -1,5 +1,4 @@
@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'borders_2_light.css'; /* borders_0_minimal.css, borders_1_feather.css, borders_2_light.css, borders_3_medium.css, borders_4_heavy.css */
:root,
:host,
@@ -237,6 +236,25 @@
--wa-space-xl: calc(var(--wa-space-base) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -262,6 +280,12 @@
color-mix(in oklab, var(--wa-color-focus) 98%, transparent);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -317,8 +341,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -336,7 +360,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -355,8 +379,8 @@
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-blue-50);
--wa-color-brand-spot-darker: var(--wa-color-blue-40);
--wa-color-brand-fill-subtle: var(--wa-color-blue-10);

6
src/themes/depth_2_chunky.css
View File

@@ -90,3 +90,9 @@ wa-textarea {
}
}
/* #endregion */
/* #region Progress bar */
wa-progress-bar {
--box-shadow: var(--wa-shadow-inset);
}
/* #endregion */

18
src/themes/depth_3_punchy.css
View File

@@ -69,9 +69,27 @@ wa-textarea {
}
}
wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
);
&:not([checked]):not([indeterminate]) {
--box-shadow: var(--wa-shadow-inset);
}
}
wa-switch {
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.1) /* inner highlight */,
inset 0 -0.0625rem 0.0625rem 0 rgb(0 0 0 / 0.1) /* inner shadow */, var(--wa-shadow-level-1) /* outer shadow */;
}
/* #endregion */
/* #region Progress bar */
wa-progress-bar {
--box-shadow: var(--wa-shadow-inset);
}
/* #endregion */

24
src/themes/depth_4_glossy.css
View File

@@ -257,6 +257,24 @@ wa-textarea:not(:focus) {
}
}
wa-checkbox {
--background-checked: linear-gradient(
to bottom,
var(--wa-form-controls-activated-color),
var(--wa-color-brand-spot-darker)
);
&:not([checked]):not([indeterminate]) {
--box-shadow: var(--wa-shadow-inset);
}
&[checked] {
--box-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
inset 0 0.125rem 0 0 rgb(255 255 255 / 0.05) /* top highlight */,
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
}
}
wa-switch {
--box-shadow: var(--wa-shadow-inset);
--thumb-shadow: inset 0 0.0625rem 0 0 rgb(255 255 255 / 0.2) /* shine */,
@@ -266,3 +284,9 @@ wa-switch {
inset 0 -0.0625rem 0 0 rgb(0 0 0 / 0.2) /* bottom highlight */, var(--wa-shadow-level-1) /* outer shadow */;
}
/* #endregion */
/* #region Progress bar */
wa-progress-bar {
--box-shadow: var(--wa-shadow-inset);
}
/* #endregion */

51
src/themes/fa.css
View File

@@ -1,5 +1,4 @@
@import 'depth_2_chunky.css';
@import 'borders_4_heavy.css';
@import 'cera_typeface.css';
:root,
@@ -234,6 +233,25 @@
--wa-space-xl: calc(var(--wa-space-base) * 1.5rem); /* 24px */
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -405,9 +423,33 @@
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
}
/* _utility.css */
/* #region Custom styles */
wa-button {
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--box-shadow-color: var(--border-color);
&[variant='brand'] {
--border-color: var(--wa-color-brand-spot-darker);
}
&[variant='success'] {
--border-color: var(--wa-color-success-spot-darker);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-spot-darker);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-spot-darker);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-spot-darker);
}
}
/* To be (re)moved */
wa-button:not([variant='text']) {
--border-color: var(--label-color);
--border-color-hover: var(--border-color);
@@ -440,3 +482,6 @@ wa-alert {
--icon-color: var(--wa-color-neutral-spot-darker);
}
}
/* #endregion */
/* _utility.css */

4
src/themes/forms.css
View File

@@ -4,7 +4,7 @@
--wa-form-controls-value-color: var(--wa-color-danger-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-danger-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-danger-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-danger-text-on-fill);
@@ -16,7 +16,7 @@
--wa-form-controls-value-color: var(--wa-color-success-text-on-surface);
/* Focus ring */
--wa-focus-ring: solid var(--wa-border-width-thick) var(--wa-color-success-spot);
--wa-focus-ring: solid var(--wa-border-width-l) var(--wa-color-success-spot);
/* Help text */
--wa-color-text-quiet: var(--wa-color-success-text-on-fill);

60
src/themes/glassy.css
View File

@@ -1,6 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Quicksand:wght@300..700&display=swap');
@import 'depth_4_glossy.css';
@import 'borders_0_minimal.css';
:root,
:host,
@@ -238,6 +236,24 @@
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: hidden;
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -262,6 +278,12 @@
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -317,8 +339,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -336,7 +358,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -355,8 +377,8 @@
--wa-color-mix-active: black 12%;
/**
* Semantic theme colors
*/
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-orchid-50);
--wa-color-brand-spot-darker: var(--wa-color-orchid-40);
--wa-color-brand-fill-subtle: var(--wa-color-orchid-10);
@@ -408,4 +430,28 @@
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
}
/* #region Custom styles */
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
}
}
/* #endregion */
/* _utility.css */

62
src/themes/mellow.css
View File

@@ -1,6 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&family=Lora:wght@400..700&display=swap');
@import 'depth_0_flat.css';
@import 'borders_1_feather.css';
:root,
:host,
@@ -184,7 +182,7 @@
* Typography
*/
--wa-font-family-heading: 'Lora', serif;
--wa-font-family-body: 'Inter', serif;
--wa-font-family-body: 'Mulish', sans-serif;
--wa-font-family-code: 'Noto Sans Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: 'Lora', serif;
@@ -238,6 +236,24 @@
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: dotted;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -262,6 +278,12 @@
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline var(--wa-color-brand-border-highlight) dotted;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -317,8 +339,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -336,7 +358,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-80);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -355,8 +377,8 @@
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
* 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);
@@ -408,4 +430,28 @@
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
}
/* #region Custom styles */
wa-button[outline] {
&[variant='brand'] {
--border-color: var(--wa-color-brand-border-highlight);
}
&[variant='success'] {
--border-color: var(--wa-color-success-border-highlight);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-border-highlight);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-border-highlight);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-border-highlight);
}
}
/* #endregion */
/* _utility.css */

72
src/themes/playful.css
View File

@@ -1,6 +1,4 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@300..700&family=Roboto+Slab:wght@300..700&display=swap');
@import 'depth_2_chunky.css';
@import 'borders_4_heavy.css';
:root,
:host,
@@ -190,12 +188,12 @@
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-medium: 500;
--wa-font-weight-heavy: 600;
--wa-font-weight-medium: 600;
--wa-font-weight-heavy: 800;
--wa-font-weight-heading: var(--wa-font-weight-heavy);
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-heavy);
--wa-font-weight-action: var(--wa-font-weight-medium);
/* The default typescale is based on the Major Second scale (x1.125).
* Every other step on the scale is skipped for larger sizes in order to maximize variation. */
@@ -227,7 +225,7 @@
*/
/* Space is designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-space-base: 1;
--wa-space-base: 1.125;
--wa-space-3xs: calc(var(--wa-space-base) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-base) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-base) * 0.5rem); /* 8px */
@@ -238,6 +236,24 @@
--wa-space-2xl: calc(var(--wa-space-base) * 2rem); /* 32px */
--wa-space-3xl: calc(var(--wa-space-base) * 3rem); /* 48px */
/**
* Borders
*/
--wa-border-style: solid;
/* Border widths are designed to scale according to a single base value.
* The base value is intended for calculations and is not used by components directly. */
--wa-border-width-base: 0.125;
--wa-border-width-s: calc(var(--wa-border-width-base) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-base) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-base) * 3rem);
--wa-form-controls-border-style: var(--wa-border-style);
--wa-form-controls-border-width: var(--wa-border-width-s);
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
/**
* Corners
*/
@@ -262,6 +278,12 @@
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
* Links
*/
--wa-link-decoration-default: underline;
--wa-link-decoration-hover: underline;
/**
* Z-index
*/
@@ -317,8 +339,8 @@
--wa-flow-spacing: 1.5rem;
/**
* From 2.x
*/
* From 2.x
*/
--wa-form-control-toggle-size-s: 0.875rem;
--wa-form-control-toggle-size-m: 1.125rem;
--wa-form-control-toggle-size-l: 1.375rem;
@@ -336,7 +358,7 @@
--wa-color-surface-raised: var(--wa-color-base-10);
--wa-color-surface-default: var(--wa-color-base-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-base-10);
--wa-color-surface-border: var(--wa-color-base-20);
--wa-color-text-normal: var(--wa-color-base-95);
--wa-color-text-quiet: var(--wa-color-base-60);
@@ -355,8 +377,8 @@
--wa-color-mix-active: black 16%;
/**
* Semantic theme colors
*/
* Semantic theme colors
*/
--wa-color-brand-spot: var(--wa-color-rose-50);
--wa-color-brand-spot-darker: var(--wa-color-rose-40);
--wa-color-brand-fill-subtle: var(--wa-color-rose-10);
@@ -408,4 +430,32 @@
--wa-color-neutral-text-on-surface: var(--wa-color-base-60);
}
/* #region Custom styles */
wa-button {
--border-color-hover: var(--border-color);
--border-color-active: var(--border-color);
--box-shadow-color: var(--border-color);
&[variant='brand'] {
--border-color: var(--wa-color-brand-spot-darker);
}
&[variant='success'] {
--border-color: var(--wa-color-success-spot-darker);
}
&[variant='neutral'] {
--border-color: var(--wa-color-neutral-spot-darker);
}
&[variant='warning'] {
--border-color: var(--wa-color-warning-spot-darker);
}
&[variant='danger'] {
--border-color: var(--wa-color-danger-spot-darker);
}
}
/* #endregion */
/* _utility.css */