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 themer-rework

Browse Source
This commit is contained in:
Cory LaViska
2025-06-11 11:50:51 -04:00
parent 1f0e2fc430 10cc9bdc68
commit 3a4fc79fb2
91 changed files with 4718 additions and 3182 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/webawesome/docs/_includes/base.njk
View File

@@ -69,9 +69,9 @@
{# Search #}
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
Search
<kbd slot="suffix" class="wa-desktop-only">/</kbd>
<kbd slot="end" class="wa-desktop-only">/</kbd>
</wa-button>
{# Login #}

12
packages/webawesome/docs/_includes/color-scheme-selector.njk
View File

@@ -1,18 +1,18 @@
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
<wa-option value="light">
<wa-icon slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon slot="start" name="sun" variant="regular"></wa-icon>
Light
</wa-option>
<wa-option value="dark">
<wa-icon slot="prefix" name="moon" variant="regular"></wa-icon>
<wa-icon slot="start" name="moon" variant="regular"></wa-icon>
Dark
</wa-option>
<wa-divider></wa-divider>
<wa-option value="auto">
<wa-icon class="only-light" slot="prefix" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="prefix" name="moon" variant="regular"></wa-icon>
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
System
</wa-option>
</wa-select>

2
packages/webawesome/docs/_includes/search.njk
View File

@@ -24,7 +24,7 @@
aria-haspopup="listbox"
aria-activedescendant
>
<wa-icon slot="prefix" name="search"></wa-icon>
<wa-icon slot="start" name="search"></wa-icon>
</wa-input>
</div>
</header>

4
packages/webawesome/docs/assets/styles/theme-headers.css
View File

@@ -185,11 +185,11 @@ html.wa-theme-brutalist .preview-container {
text-align: right;
}
.product-card wa-button::part(prefix) {
.product-card wa-button::part(start) {
padding-inline-start: var(--wa-space-xs);
}
.product-card wa-button::part(suffix) {
.product-card wa-button::part(end) {
padding-inline-end: var(--wa-space-xs);
}

13
packages/webawesome/docs/docs/components/badge.md
View File

@@ -140,16 +140,3 @@ One of the most common use cases for badges is attaching them to buttons. To mak
<wa-badge variant="danger" pill>6</wa-badge>
</wa-button>
```
### With Menu Items
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
```html {.example}
<wa-dropdown style="max-width: 240px;">
<wa-button slot="trigger" caret>Messages</wa-button>
<h3>Messages</h3>
<wa-dropdown-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-dropdown-item>
<wa-dropdown-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-dropdown-item>
</wa-dropdown>
```

2
packages/webawesome/docs/docs/components/breadcrumb-item.md
View File

@@ -6,7 +6,7 @@ description: Breadcrumb Items are used inside breadcrumbs to represent different
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Clothing</wa-breadcrumb-item>

34
packages/webawesome/docs/docs/components/breadcrumb.md
View File

@@ -35,32 +35,20 @@ For websites, you'll probably want to use links instead. You can make any breadc
</wa-breadcrumb>
```
### Prefixes
### Start & End Decorations
Use the `prefix` slot to add content before any breadcrumb item.
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to any breadcrumb item.
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-icon slot="start" name="house"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
<wa-breadcrumb-item>Traveling</wa-breadcrumb-item>
</wa-breadcrumb>
```
### Suffixes
Use the `suffix` slot to add content after any breadcrumb item.
```html {.example}
<wa-breadcrumb>
<wa-breadcrumb-item>Documents</wa-breadcrumb-item>
<wa-breadcrumb-item>Policies</wa-breadcrumb-item>
<wa-breadcrumb-item>
Security
<wa-icon slot="suffix" name="shield" variant="solid"></wa-icon>
<wa-icon slot="end" name="tree-palm"></wa-icon>
Traveling
</wa-breadcrumb-item>
</wa-breadcrumb>
```
@@ -98,7 +86,7 @@ Use the `separator` slot to change the separator that goes between breadcrumb it
### Custom Colors
Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffixes, and separators can be styled using CSS parts.
Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Content in the `start`, `end`, and `separator` slots can be styled using CSS parts.
```html {.example}
<style>
@@ -111,14 +99,14 @@ Breadcrumb labels match the color set on `<wa-breadcrumb-item>`. Prefixes, suffi
.redcrumbs wa-breadcrumb-item::part(separator) {
color: pink;
}
.redcrumbs wa-breadcrumb-item::part(prefix),
.redcrumbs wa-breadcrumb-item::part(suffix) {
.redcrumbs wa-breadcrumb-item::part(start),
.redcrumbs wa-breadcrumb-item::part(end) {
color: currentColor;
}
</style>
<wa-breadcrumb class="redcrumbs">
<wa-breadcrumb-item>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>Articles</wa-breadcrumb-item>
@@ -148,7 +136,7 @@ Dropdown menus can be placed in the default slot to provide additional options.
</wa-breadcrumb>
```
Alternatively, you can place dropdown menus in a prefix or suffix slot.
Alternatively, you can place dropdown menus in a `start` or `end` slot.
```html {.example}
<wa-breadcrumb>
@@ -157,7 +145,7 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
<wa-breadcrumb-item>Digital Media</wa-breadcrumb-item>
<wa-breadcrumb-item>
Web Design
<wa-dropdown slot="suffix">
<wa-dropdown slot="end">
<wa-button slot="trigger" size="small" appearance="filled" pill>
<wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
</wa-button>

10
packages/webawesome/docs/docs/components/button-group.md
View File

@@ -49,26 +49,26 @@ and it will override the inherited size,
it is rarely a good idea to mix sizes within the same button group.
:::
### Vertical button groups
### Vertical Button Groups
Set the `orientation` attribute to `vertical` to make a vertical button group.
```html {.example}
<wa-button-group orientation="vertical" label="Options" style="max-width: 120px;">
<wa-button>
<wa-icon slot="prefix" name="plus"></wa-icon>
<wa-icon slot="start" name="plus"></wa-icon>
New
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="folder-open"></wa-icon>
<wa-icon slot="start" name="folder-open"></wa-icon>
Open
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="save"></wa-icon>
<wa-icon slot="start" name="save"></wa-icon>
Save
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="print"></wa-icon>
<wa-icon slot="start" name="print"></wa-icon>
Print
</wa-button>
</wa-button-group>

28
packages/webawesome/docs/docs/components/button.md
View File

@@ -124,60 +124,60 @@ As expected, buttons can be given a custom width by setting the `width` CSS prop
<wa-button size="large" style="width: 100%;">Large</wa-button>
```
### Prefix and Suffix Icons
### Start & End Decorations
Use the `prefix` and `suffix` slots to add icons.
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the button label.
```html {.example}
<wa-button size="small">
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="start" name="gear"></wa-icon>
Settings
</wa-button>
<wa-button size="small">
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="end" name="undo"></wa-icon>
Refresh
</wa-button>
<wa-button size="small">
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="start" name="link"></wa-icon>
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="start" name="gear"></wa-icon>
Settings
</wa-button>
<wa-button>
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="end" name="undo"></wa-icon>
Refresh
</wa-button>
<wa-button>
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="start" name="link"></wa-icon>
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
Open
</wa-button>
<br /><br />
<wa-button size="large">
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="start" name="gear"></wa-icon>
Settings
</wa-button>
<wa-button size="large">
<wa-icon slot="suffix" name="undo" variant="solid"></wa-icon>
<wa-icon slot="end" name="undo"></wa-icon>
Refresh
</wa-button>
<wa-button size="large">
<wa-icon slot="prefix" name="link" variant="solid"></wa-icon>
<wa-icon slot="suffix" name="arrow-up-right-from-square" variant="solid"></wa-icon>
<wa-icon slot="start" name="link"></wa-icon>
<wa-icon slot="end" name="arrow-up-right-from-square"></wa-icon>
Open
</wa-button>
```

2
packages/webawesome/docs/docs/components/dropdown.md
View File

@@ -239,7 +239,7 @@ The preferred placement of the dropdown can be set with the `placement` attribut
<wa-dropdown placement="right-start">
<wa-button slot="trigger">
File formats
<wa-icon slot="suffix" name="chevron-right"></wa-icon>
<wa-icon slot="end" name="chevron-right"></wa-icon>
</wa-button>
<wa-dropdown-item value="pdf">PDF Document</wa-dropdown-item>

16
packages/webawesome/docs/docs/components/input.md
View File

@@ -105,24 +105,24 @@ The `type` attribute controls the type of input the browser renders.
<wa-input type="date" placeholder="Date"></wa-input>
```
### Prefix & Suffix Icons
### Start & End Decorations
Use the `prefix` and `suffix` slots to add icons.
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the input.
```html {.example}
<wa-input placeholder="Small" size="small">
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
<wa-icon name="house" slot="start"></wa-icon>
<wa-icon name="comment" slot="end"></wa-icon>
</wa-input>
<br />
<wa-input placeholder="Medium" size="medium">
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
<wa-icon name="house" slot="start"></wa-icon>
<wa-icon name="comment" slot="end"></wa-icon>
</wa-input>
<br />
<wa-input placeholder="Large" size="large">
<wa-icon name="house" variant="solid" slot="prefix"></wa-icon>
<wa-icon name="comment" variant="solid" slot="suffix"></wa-icon>
<wa-icon name="house" slot="start"></wa-icon>
<wa-icon name="comment" slot="end"></wa-icon>
</wa-input>
```

16
packages/webawesome/docs/docs/components/option.md
View File

@@ -26,28 +26,28 @@ Use the `disabled` attribute to disable an option and prevent it from being sele
</wa-select>
```
### Prefix & Suffix
### Start & End Decorations
Add icons to the start and end of menu items using the `prefix` and `suffix` slots.
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` next to the option label.
```html {.example}
<wa-select label="Select one">
<wa-option value="option-1">
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
<wa-icon slot="start" name="envelope"></wa-icon>
Email
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
<wa-icon slot="end" name="circle-check"></wa-icon>
</wa-option>
<wa-option value="option-2">
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
<wa-icon slot="start" name="phone"></wa-icon>
Phone
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
<wa-icon slot="end" name="circle-check"></wa-icon>
</wa-option>
<wa-option value="option-3">
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
<wa-icon slot="start" name="comment"></wa-icon>
Chat
<wa-icon slot="suffix" name="circle-check" variant="solid"></wa-icon>
<wa-icon slot="end" name="circle-check"></wa-icon>
</wa-option>
</wa-select>
```

2
packages/webawesome/docs/docs/components/popover.md
View File

@@ -137,7 +137,7 @@ Use the [`autofocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_a
</wa-popover>
<wa-button id="popover__autofocus">
<wa-icon name="comment" slot="prefix"></wa-icon>
<wa-icon name="comment" slot="start"></wa-icon>
Feedback
</wa-button>
```

4
packages/webawesome/docs/docs/components/progress-bar.md
View File

@@ -5,9 +5,7 @@ icon: progress-bar
---
```html {.example}
<wa-progress-bar value="40">
<wa-icon slot="prefix" name="tasks"></wa-icon>
</wa-progress-bar>
<wa-progress-bar value="40"></wa-progress-bar>
```
## Examples

13
packages/webawesome/docs/docs/components/progress-ring.md
View File

@@ -5,9 +5,7 @@ icon: progress-ring
---
```html {.example}
<wa-progress-ring value="25">
<wa-icon slot="prefix" name="circle-notch"></wa-icon>
</wa-progress-ring>
<wa-progress-ring value="25"></wa-progress-ring>
```
## Examples
@@ -17,9 +15,7 @@ icon: progress-ring
Use the `--size` custom property to set the diameter of the progress ring.
```html {.example}
<wa-progress-ring value="50" style="--size: 200px;">
<wa-icon slot="prefix" name="expand"></wa-icon>
</wa-progress-ring>
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
```
### Track and Indicator Width
@@ -27,9 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
```html {.example}
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
<wa-icon slot="prefix" name="arrows-alt"></wa-icon>
</wa-progress-ring>
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
```
### Colors
@@ -44,7 +38,6 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
--indicator-color: deeppink;
"
>
<wa-icon slot="prefix" name="palette"></wa-icon>
</wa-progress-ring>
```

30
packages/webawesome/docs/docs/components/qr-code.md
View File

@@ -12,7 +12,7 @@ QR codes are useful for providing small pieces of information to users who can q
<br />
<wa-input maxlength="255" with-clear label="Value">
<wa-icon slot="prefix" name="link"></wa-icon>
<wa-icon slot="start" name="link"></wa-icon>
</wa-input>
</div>
@@ -45,9 +45,7 @@ QR codes are useful for providing small pieces of information to users who can q
Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
```html {.example}
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
<wa-icon slot="prefix" name="palette"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
```
### Size
@@ -55,9 +53,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
Use the `size` attribute to change the size of the QR code.
```html {.example}
<wa-qr-code value="https://shoelace.style/" size="64">
<wa-icon slot="prefix" name="expand"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
```
### Radius
@@ -65,9 +61,7 @@ Use the `size` attribute to change the size of the QR code.
Create a rounded effect with the `radius` attribute.
```html {.example}
<wa-qr-code value="https://shoelace.style/" radius="0.5">
<wa-icon slot="prefix" name="circle"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
```
### Error Correction
@@ -76,18 +70,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q
```html {.example}
<div class="qr-error-correction">
<wa-qr-code value="https://shoelace.style/" error-correction="L">
<wa-icon slot="prefix" name="shield"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="M">
<wa-icon slot="prefix" name="shield"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="Q">
<wa-icon slot="prefix" name="shield"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="H">
<wa-icon slot="prefix" name="shield"></wa-icon>
</wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
<wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
</div>
<style>

48
packages/webawesome/docs/docs/components/select.md
View File

@@ -206,54 +206,30 @@ The preferred placement of the select's listbox can be set with the `placement`
</wa-select>
```
### Prefix Icons
### Start & End Decorations
Use the `prefix` slot to prepend an icon to the control.
Use the `start` and `end` slots to add presentational elements like `<wa-icon>` within the combobox.
```html {.example}
<wa-select placeholder="Small" size="small" with-clear>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
<wa-icon slot="end" name="flag-checkered"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Medium" size="medium" with-clear>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
<wa-icon slot="end" name="flag-checkered"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Large" size="large" with-clear>
<wa-icon slot="prefix" name="house" variant="solid"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
```
### Suffix Icons
Use the `suffix` slot to append an icon to the control.
```html {.example}
<wa-select placeholder="Small" size="small" with-clear>
<wa-icon name="house" slot="suffix"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Medium" size="medium" with-clear>
<wa-icon name="house" slot="suffix"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select placeholder="Large" size="large" with-clear>
<wa-icon name="house" slot="suffix"></wa-icon>
<wa-icon slot="start" name="house" variant="solid"></wa-icon>
<wa-icon slot="end" name="flag-checkered"></wa-icon>
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
@@ -269,15 +245,15 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
```html {.example}
<wa-select placeholder="Select one" value="email phone" multiple with-clear class="custom-tag">
<wa-option value="email">
<wa-icon slot="prefix" name="envelope" variant="solid"></wa-icon>
<wa-icon slot="start" name="envelope" variant="solid"></wa-icon>
Email
</wa-option>
<wa-option value="phone">
<wa-icon slot="prefix" name="phone" variant="solid"></wa-icon>
<wa-icon slot="start" name="phone" variant="solid"></wa-icon>
Phone
</wa-option>
<wa-option value="chat">
<wa-icon slot="prefix" name="comment" variant="solid"></wa-icon>
<wa-icon slot="start" name="comment" variant="solid"></wa-icon>
Chat
</wa-option>
</wa-select>
@@ -289,7 +265,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
select.getTag = (option, index) => {
// Use the same icon used in wa-option
const name = option.querySelector('wa-icon[slot="prefix"]').name;
const name = option.querySelector('wa-icon[slot="start"]').name;
// You can return a string, a Lit Template, or an HTMLElement here
return `

6
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -52,6 +52,12 @@ During the alpha period, things might break! We take breaking changes very serio
- 🚨 BREAKING: completely reworked `<wa-dropdown>` to be easier to use
- Added `<wa-dropdown-item>`, greatly simplifying the dropdown's markup structure
- Removed `<wa-menu>`, `<wa-menu-item>`, and `<wa-menu-label>`; use `<wa-dropdown-item>` and native headings instead
- 🚨 BREAKING: renamed all `prefix` and `suffix` slots to `start` and `end`, affecting the following components:
- `<wa-breadcrumb-item>`
- `<wa-button>`
- `<wa-input>`
- `<wa-select>`
- `<wa-option>`
- Added a new free component: `<wa-popover>` (#2 of 14 per stretch goals)
- Added a new free component: `<wa-zoomable-frame>` (#3 of 14 per stretch goals)
- Added a `min-block-size` to `<wa-divider orientation="vertical">` to ensure the divider is visible regardless of container height [issue:675]

6
packages/webawesome/docs/docs/resources/community.md
View File

@@ -18,7 +18,7 @@ The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) i
- Learn more about the project, its values, and its roadmap
<wa-button variant="brand" href="https://github.com/shoelace-style/shoelace/discussions" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
<wa-icon name="github" family="brands" slot="prefix"></wa-icon>
<wa-icon name="github" family="brands" slot="start"></wa-icon>
Join the Discussion
</wa-button>
@@ -32,7 +32,7 @@ The [community chat](https://discord.gg/mg8f26C) is open to the public and power
- Chat live with other designers, developers, and Web Awesome fans
<wa-button variant="brand" href="https://discord.gg/mg8f26C" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
<wa-icon name="discord" family="brands" slot="prefix"></wa-icon>
<wa-icon name="discord" family="brands" slot="start"></wa-icon>
Join the Chat
</wa-button>
@@ -43,6 +43,6 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
**Please avoid using Twitter for support questions.** The [discussion forum](https://github.com/shoelace-style/shoelace/discussions) is a much better place to share code snippets, screenshots, and other troubleshooting info. You'll have much better luck there, as more users will have a chance to help you.
<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
<wa-icon name="twitter" family="brands" slot="prefix"></wa-icon>
<wa-icon name="twitter" family="brands" slot="start"></wa-icon>
Follow on Twitter
</wa-button>

4
packages/webawesome/docs/docs/usage.md
View File

@@ -108,11 +108,11 @@ For example, a button's default slot is used to populate its label.
<wa-button>Click me</wa-button>
```
Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="prefix"` attribute? This tells the component to place the icon into its `prefix` slot.
Some components also have _named_ slots. A named slot can be populated by adding a child element with the appropriate `slot` attribute. Notice how the icon below has the `slot="start"` attribute? This tells the component to place the icon into its `start` slot.
```html
<wa-button>
<wa-icon slot="prefix" name="gear" variant="solid"></wa-icon>
<wa-icon slot="start" name="gear" variant="solid"></wa-icon>
Settings
</wa-button>
```

2
packages/webawesome/docs/docs/utilities/flank.md
View File

@@ -35,7 +35,7 @@ Flanks work especially well for asides, inputs with adjacent buttons, and rich d
```html {.example}
<div class="wa-flank:end wa-gap-xs">
<wa-input>
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
</wa-input>
<wa-button>Search</wa-button>
</div>

4
packages/webawesome/docs/docs/utilities/stack.md
View File

@@ -34,10 +34,10 @@ Stacks are well suited for forms, text, and ensuring consistent spacing between
```html {.example}
<div class="wa-stack">
<wa-input label="Email">
<wa-icon slot="prefix" name="envelope" variant="regular"></wa-icon>
<wa-icon slot="start" name="envelope" variant="regular"></wa-icon>
</wa-input>
<wa-input label="Password" type="password">
<wa-icon slot="prefix" name="lock" variant="regular"></wa-icon>
<wa-icon slot="start" name="lock" variant="regular"></wa-icon>
</wa-input>
<wa-checkbox>Remember me on this device</wa-checkbox>
<wa-button>Log In</wa-button>

4
packages/webawesome/docs/index.md
View File

@@ -222,7 +222,7 @@ layout: page
text-align: left;
white-space: wrap;
}
wa-button.tile::part(suffix) {
wa-button.tile::part(end) {
display: none;
}
wa-button.tile {
@@ -266,7 +266,7 @@ layout: page
<div class="hero-cta">
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="prefix" name="person-running"></wa-icon>
<wa-icon slot="start" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
</div>

12
packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.css
View File

@@ -45,25 +45,25 @@
outline-offset: var(--wa-focus-ring-offset);
}
.prefix,
.suffix {
.start,
.end {
display: none;
flex: 0 0 auto;
display: flex;
align-items: center;
}
.prefix,
.suffix {
.start,
.end {
display: inline-flex;
color: var(--wa-color-text-quiet);
}
::slotted([slot='prefix']) {
::slotted([slot='start']) {
margin-inline-end: var(--wa-space-s);
}
::slotted([slot='suffix']) {
::slotted([slot='end']) {
margin-inline-start: var(--wa-space-s);
}

16
packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.test.ts
View File

@@ -122,11 +122,11 @@ describe('<wa-breadcrumb-item>', () => {
});
});
describe('when provided an element in the slot "prefix" to support prefix icons', () => {
describe('when provided an element in the slot "start" to support start icons', () => {
it('should pass accessibility tests', async () => {
const el = await fixture<WaBreadcrumbItem>(html`
<wa-breadcrumb-item>
<span class="prefix-example" slot="prefix">/</span>
<span class="start-example" slot="start">/</span>
Home
</wa-breadcrumb-item>
`);
@@ -136,22 +136,22 @@ describe('<wa-breadcrumb-item>', () => {
it('should accept as an assigned child in the shadow root', async () => {
const el = await fixture<WaBreadcrumbItem>(html`
<wa-breadcrumb-item>
<span class="prefix-example" slot="prefix">/</span>
<span class="start-example" slot="start">/</span>
Home
</wa-breadcrumb-item>
`);
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=prefix]')!;
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=start]')!;
const childNodes = slot.assignedNodes({ flatten: true });
expect(childNodes.length).to.eq(1);
});
});
describe('when provided an element in the slot "suffix" to support suffix icons', () => {
describe('when provided an element in the slot "end" to support end icons', () => {
it('should pass accessibility tests', async () => {
const el = await fixture<WaBreadcrumbItem>(html`
<wa-breadcrumb-item>
<span class="prefix-example" slot="suffix">/</span>
<span class="end-example" slot="end">/</span>
Security
</wa-breadcrumb-item>
`);
@@ -162,11 +162,11 @@ describe('<wa-breadcrumb-item>', () => {
it('should accept as an assigned child in the shadow root', async () => {
const el = await fixture<WaBreadcrumbItem>(html`
<wa-breadcrumb-item>
<span class="prefix-example" slot="suffix">/</span>
<span class="end-example" slot="end">/</span>
Security
</wa-breadcrumb-item>
`);
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=suffix]')!;
const slot = el.shadowRoot!.querySelector<HTMLSlotElement>('slot[name=end]')!;
const childNodes = slot.assignedNodes({ flatten: true });
expect(childNodes.length).to.eq(1);

16
packages/webawesome/src/components/breadcrumb-item/breadcrumb-item.ts
View File

@@ -12,14 +12,14 @@ import styles from './breadcrumb-item.css';
* @since 2.0
*
* @slot - The breadcrumb item's label.
* @slot prefix - An optional prefix, usually an icon.
* @slot suffix - An optional suffix, usually an icon.
* @slot start - An element, such as `<wa-icon>`, placed before the label.
* @slot end - An element, such as `<wa-icon>`, placed after the label.
* @slot separator - The separator to use for the breadcrumb item. This will only change the separator for this item. If
* you want to change it for all items in the group, set the separator on `<wa-breadcrumb>` instead.
*
* @csspart label - The breadcrumb item's label.
* @csspart prefix - The container that wraps the prefix.
* @csspart suffix - The container that wraps the suffix.
* @csspart start - The container that wraps the `start` slot.
* @csspart end - The container that wraps the `end` slot.
* @csspart separator - The container that wraps the separator.
*/
@customElement('wa-breadcrumb-item')
@@ -71,8 +71,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
render() {
return html`
<span part="prefix" class="prefix">
<slot name="prefix"></slot>
<span part="start" class="start">
<slot name="start"></slot>
</span>
${this.renderType === 'link'
@@ -103,8 +103,8 @@ export default class WaBreadcrumbItem extends WebAwesomeElement {
`
: ''}
<span part="suffix" class="suffix">
<slot name="suffix"></slot>
<span part="end" class="end">
<slot name="end"></slot>
</span>
<span part="separator" class="separator" aria-hidden="true">

8
packages/webawesome/src/components/breadcrumb/breadcrumb.test.ts
View File

@@ -95,12 +95,12 @@ describe('<wa-breadcrumb>', () => {
});
});
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "prefix" to support prefix icons', () => {
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "start" to support start icons', () => {
it('should pass accessibility tests', async () => {
const el = await fixture<WaBreadcrumb>(html`
<wa-breadcrumb>
<wa-breadcrumb-item>
<span class="prefix-example" slot="prefix">/</span>
<span class="start-example" slot="start">/</span>
Home
</wa-breadcrumb-item>
<wa-breadcrumb-item>First</wa-breadcrumb-item>
@@ -112,7 +112,7 @@ describe('<wa-breadcrumb>', () => {
});
});
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "suffix" to support suffix icons', () => {
describe('when provided a standard list of el-breadcrumb-item children and an element in the slot "end" to support end icons', () => {
it('should pass accessibility tests', async () => {
const el = await fixture<WaBreadcrumb>(html`
<wa-breadcrumb>
@@ -120,7 +120,7 @@ describe('<wa-breadcrumb>', () => {
<wa-breadcrumb-item>Second</wa-breadcrumb-item>
<wa-breadcrumb-item>Third</wa-breadcrumb-item>
<wa-breadcrumb-item>
<span class="prefix-example" slot="suffix">/</span>
<span class="end-example" slot="end">/</span>
Security
</wa-breadcrumb-item>
</wa-breadcrumb>

14
packages/webawesome/src/components/button/button.css
View File

@@ -107,8 +107,8 @@
* Label
*/
.prefix,
.suffix {
.start,
.end {
flex: 0 0 auto;
display: flex;
align-items: center;
@@ -137,7 +137,7 @@ wa-icon[part~='caret'] {
height: 0.875em;
}
.button:has(&) .suffix {
.button:has(&) .end {
display: none;
}
}
@@ -150,9 +150,9 @@ wa-icon[part~='caret'] {
position: relative;
cursor: wait;
.prefix,
.start,
.label,
.suffix,
.end,
.caret {
visibility: hidden;
}
@@ -191,11 +191,11 @@ button ::slotted(wa-badge) {
* Button spacing
*/
slot[name='prefix']::slotted(*) {
slot[name='start']::slotted(*) {
margin-inline-end: var(--wa-form-control-padding-inline);
}
slot[name='suffix']::slotted(*),
slot[name='end']::slotted(*),
.button:not(.visually-hidden-label) [part~='caret'] {
margin-inline-start: var(--wa-form-control-padding-inline);
}

18
packages/webawesome/src/components/button/button.ts
View File

@@ -29,13 +29,13 @@ import styles from './button.css';
* @event wa-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
*
* @slot - The button's label.
* @slot prefix - A presentational prefix icon or similar element.
* @slot suffix - A presentational suffix icon or similar element.
* @slot start - An element, such as `<wa-icon>`, placed before the label.
* @slot end - An element, such as `<wa-icon>`, placed after the label.
*
* @csspart base - The component's base wrapper.
* @csspart prefix - The container that wraps the prefix.
* @csspart start - The container that wraps the `start` slot.
* @csspart label - The button's label.
* @csspart suffix - The container that wraps the suffix.
* @csspart end - The container that wraps the `end` slot.
* @csspart caret - The button's caret icon, a `<wa-icon>` element.
* @csspart spinner - The spinner that shows when the button is in the loading state.
*
@@ -60,7 +60,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
}
assumeInteractionOn = ['click'];
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
private readonly localize = new LocalizeController(this);
@query('.button') button: HTMLButtonElement | HTMLLinkElement;
@@ -263,8 +263,8 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
loading: this.loading,
rtl: this.localize.dir() === 'rtl',
'has-label': this.hasSlotController.test('[default]'),
'has-prefix': this.hasSlotController.test('prefix'),
'has-suffix': this.hasSlotController.test('suffix'),
'has-start': this.hasSlotController.test('start'),
'has-end': this.hasSlotController.test('end'),
'is-icon-button': this.isIconButton,
})}
?disabled=${ifDefined(isLink ? undefined : this.disabled)}
@@ -282,9 +282,9 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@invalid=${this.isButton() ? this.handleInvalid : null}
@click=${this.handleClick}
>
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot name="start" part="start" class="start"></slot>
<slot part="label" class="label" @slotchange=${this.handleLabelSlotChange}></slot>
<slot name="suffix" part="suffix" class="suffix"></slot>
<slot name="end" part="end" class="end"></slot>
${
this.caret
? html`

16
packages/webawesome/src/components/color-picker/color-picker.ts
View File

@@ -74,15 +74,15 @@ declare const EyeDropper: EyeDropperConstructor;
* @csspart input - The text input.
* @csspart eye-dropper-button - The eye dropper button.
* @csspart eye-dropper-button__base - The eye dropper button's exported `button` part.
* @csspart eye-dropper-button__prefix - The eye dropper button's exported `prefix` part.
* @csspart eye-dropper-button__start - The eye dropper button's exported `start` part.
* @csspart eye-dropper-button__label - The eye dropper button's exported `label` part.
* @csspart eye-dropper-button__suffix - The eye dropper button's exported `suffix` part.
* @csspart eye-dropper-button__end - The eye dropper button's exported `end` part.
* @csspart eye-dropper-button__caret - The eye dropper button's exported `caret` part.
* @csspart format-button - The format button.
* @csspart format-button__base - The format button's exported `button` part.
* @csspart format-button__prefix - The format button's exported `prefix` part.
* @csspart format-button__start - The format button's exported `start` part.
* @csspart format-button__label - The format button's exported `label` part.
* @csspart format-button__suffix - The format button's exported `suffix` part.
* @csspart format-button__end - The format button's exported `end` part.
* @csspart format-button__caret - The format button's exported `caret` part.
*
* @cssproperty --background-color - The color picker's background color.
@@ -1181,9 +1181,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
aria-label=${this.localize.term('toggleColorFormat')}
exportparts="
base:format-button__base,
prefix:format-button__prefix,
start:format-button__start,
label:format-button__label,
suffix:format-button__suffix,
end:format-button__end,
caret:format-button__caret
"
@click=${this.handleFormatToggle}
@@ -1202,9 +1202,9 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
appearance="outlined"
exportparts="
base:eye-dropper-button__base,
prefix:eye-dropper-button__prefix,
start:eye-dropper-button__start,
label:eye-dropper-button__label,
suffix:eye-dropper-button__suffix,
end:eye-dropper-button__end,
caret:eye-dropper-button__caret
"
@click=${this.handleEyeDropper}

2
packages/webawesome/src/components/dropdown-item/dropdown-item.ts
View File

@@ -33,7 +33,7 @@ import styles from './dropdown-item.css';
export default class WaDropdownItem extends WebAwesomeElement {
static css = styles;
private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix');
private readonly hasSlotController = new HasSlotController(this, '[default]', 'start', 'end');
@query('#submenu') submenuElement: HTMLDivElement;

8
packages/webawesome/src/components/input/input.css
View File

@@ -129,8 +129,8 @@ textarea {
}
}
.prefix,
.suffix {
.start,
.end {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
@@ -141,11 +141,11 @@ textarea {
}
}
.prefix::slotted(*) {
.start::slotted(*) {
margin-inline-end: var(--wa-form-control-padding-inline);
}
.suffix::slotted(*) {
.end::slotted(*) {
margin-inline-start: var(--wa-form-control-padding-inline);
}

12
packages/webawesome/src/components/input/input.ts
View File

@@ -25,8 +25,8 @@ import styles from './input.css';
* @dependency wa-icon
*
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
* @slot prefix - Used to prepend a presentational icon or similar element to the input.
* @slot suffix - Used to append a presentational icon or similar element to the input.
* @slot start - An element, such as `<wa-icon>`, placed at the start of the input control.
* @slot end - An element, such as `<wa-icon>`, placed at the end of the input control.
* @slot clear-icon - An icon to use in lieu of the default clear icon.
* @slot show-password-icon - An icon to use in lieu of the default show password icon.
* @slot hide-password-icon - An icon to use in lieu of the default hide password icon.
@@ -43,10 +43,10 @@ import styles from './input.css';
* @csspart hint - The hint's wrapper.
* @csspart input - The wrapper being rendered as an input
* @csspart base - The internal `<input>` control.
* @csspart prefix - The container that wraps the prefix.
* @csspart start - The container that wraps the `start` slot.
* @csspart clear-button - The clear button.
* @csspart password-toggle-button - The password toggle button.
* @csspart suffix - The container that wraps the suffix.
* @csspart end - The container that wraps the `end` slot.
*
* @cssproperty --background-color - The input's background color.
* @cssproperty --border-color - The color of the input's borders.
@@ -356,7 +356,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
</label>
<div part="input" class="text-field">
<slot name="prefix" part="prefix" class="prefix"></slot>
<slot name="start" part="start" class="start"></slot>
<input
part="base"
@@ -430,7 +430,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
`
: ''}
<slot name="suffix" part="suffix" class="suffix"></slot>
<slot name="end" part="end" class="end"></slot>
</div>
<slot

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

@@ -62,18 +62,18 @@
visibility: visible;
}
.prefix,
.suffix {
.start,
.end {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.prefix::slotted(*) {
.start::slotted(*) {
margin-inline-end: 0.5em;
}
.suffix::slotted(*) {
.end::slotted(*) {
margin-inline-start: 0.5em;
}

12
packages/webawesome/src/components/option/option.ts
View File

@@ -16,8 +16,8 @@ import styles from './option.css';
* @dependency wa-icon
*
* @slot - The option's label.
* @slot prefix - Used to prepend an icon or similar element to the menu item.
* @slot suffix - Used to append an icon or similar element to the menu item.
* @slot start - An element, such as `<wa-icon>`, placed before the label.
* @slot end - An element, such as `<wa-icon>`, placed after the label.
*
* @cssproperty --background-color-current - The current option's background color.
* @cssproperty --background-color-hover - The options's background color on hover.
@@ -26,8 +26,8 @@ import styles from './option.css';
*
* @csspart checked-icon - The checked icon, a `<wa-icon>` element.
* @csspart label - The option's label.
* @csspart prefix - The container that wraps the prefix.
* @csspart suffix - The container that wraps the suffix.
* @csspart start - The container that wraps the `start` slot.
* @csspart end - The container that wraps the `end` slot.
*
* @cssstate current - The user has keyed into the option, but hasn't selected it yet (shows a highlight)
* @cssstate selected - The option is selected and has aria-selected="true"
@@ -192,9 +192,9 @@ export default class WaOption extends WebAwesomeElement {
variant="solid"
aria-hidden="true"
></wa-icon>
<slot part="prefix" name="prefix" class="prefix"></slot>
<slot part="start" name="start" class="start"></slot>
<slot part="label" class="label" @slotchange=${this.handleDefaultSlotChange}></slot>
<slot part="suffix" name="suffix" class="suffix"></slot>
<slot part="end" name="end" class="end"></slot>
`;
}
}

12
packages/webawesome/src/components/select/select.css
View File

@@ -158,25 +158,25 @@ label:has(select),
}
}
/* Prefix and Suffix */
/* Start and End */
.prefix,
.suffix {
.start,
.end {
flex: 0;
display: inline-flex;
align-items: center;
color: var(--wa-color-neutral-on-quiet);
}
.suffix::slotted(*) {
.end::slotted(*) {
margin-inline-start: var(--wa-form-control-padding-inline);
}
.prefix::slotted(*) {
.start::slotted(*) {
margin-inline-end: var(--wa-form-control-padding-inline);
}
:host([multiple]) .prefix::slotted(*) {
:host([multiple]) .start::slotted(*) {
margin-inline: var(--wa-form-control-padding-inline);
}

14
packages/webawesome/src/components/select/select.ts
View File

@@ -41,8 +41,8 @@ import styles from './select.css';
*
* @slot - The listbox options. Must be `<wa-option>` elements. You can use `<wa-divider>` to group items visually.
* @slot label - The input's label. Alternatively, you can use the `label` attribute.
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
* @slot start - An element, such as `<wa-icon>`, placed at the start of the combobox.
* @slot end - An element, such as `<wa-icon>`, placed at the end of the combobox.
* @slot clear-icon - An icon to use in lieu of the default clear icon.
* @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
* @slot hint - Text that describes how to use the input. Alternatively, you can use the `hint` attribute.
@@ -62,9 +62,9 @@ import styles from './select.css';
* @csspart form-control-label - The label's wrapper.
* @csspart form-control-input - The select's wrapper.
* @csspart hint - The hint's wrapper.
* @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
* @csspart prefix - The container that wraps the prefix slot.
* @csspart suffix - The container that wraps the suffix slot.
* @csspart combobox - The container the wraps the start, end, value, clear icon, and expand button.
* @csspart start - The container that wraps the `start` slot.
* @csspart end - The container that wraps the `end` slot.
* @csspart display-input - The element that displays the selected option's label, an `<input>` element.
* @csspart listbox - The listbox container where options are slotted.
* @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -900,7 +900,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
@keydown=${this.handleComboboxKeyDown}
@mousedown=${this.handleComboboxMouseDown}
>
<slot part="prefix" name="prefix" class="prefix"></slot>
<slot part="start" name="start" class="start"></slot>
<input
part="display-input"
@@ -962,7 +962,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
`
: ''}
<slot name="suffix" part="suffix" class="suffix"></slot>
<slot name="end" part="end" class="end"></slot>
<slot name="expand-icon" part="expand-icon" class="expand-icon">
<wa-icon library="system" name="chevron-down" variant="solid"></wa-icon>

6
packages/webawesome/src/styles/themes/awesome/dimension.css → packages/webawesome/src/styles/dimension/blocky.css
View File

@@ -1,7 +1,5 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-awesome {
@layer wa-dimension {
:where(:root) {
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {

5
packages/webawesome/src/styles/dimension/flat.css Normal file
View File

@@ -0,0 +1,5 @@
@layer wa-dimension {
:where(:root) {
/* Nothing to see here */
}
}

6
packages/webawesome/src/styles/themes/glossy/dimension.css → packages/webawesome/src/styles/dimension/glossy.css
View File

@@ -1,7 +1,5 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-glossy {
@layer wa-dimension {
:where(:root) {
--wa-theme-glossy-inner-shine: inset 0 0.125rem 0 0 rgb(255 255 255 / 0.3);
--wa-theme-glossy-top-highlight: inset 0 0.25rem 0 0 rgb(255 255 255 / 0.1);
--wa-theme-glossy-upper-tint: inset 0 1.25em 0 0 rgb(255 255 255 / 0.1);

6
packages/webawesome/src/styles/themes/playful/dimension.css → packages/webawesome/src/styles/dimension/smooth.css
View File

@@ -1,7 +1,5 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-playful {
@layer wa-dimension {
:where(:root) {
button,
input:where([type='button'], [type='reset'], [type='submit']),
wa-button {

18
packages/webawesome/src/styles/themes/active/dimension.css → packages/webawesome/src/styles/dimension/subtle.css
View File

@@ -1,12 +1,10 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-active {
--wa-theme-active-shadow-pop-out:
@layer wa-dimension {
:where(:root) {
--wa-subtle-shadow-pop-out:
inset 0 0.0625rem 0 0.0625rem rgb(255 255 255 / 0.15) /* shine */,
inset 0 0.0625rem 0.125rem 0 rgb(255 255 255 / 0.2) /* inner highlight */,
inset 0 -0.125rem 0.0625rem 0 rgb(0 0 0 / 0.2) /* inner shadow */;
--wa-theme-active-shadow-punch-in:
--wa-subtle-shadow-punch-in:
inset 0 0 0 0 transparent /* shine */, inset 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.15) /* inner highlight */,
inset 0 -0.0625rem 0.25rem 0 rgb(0 0 0 / 0.15) /* inner shadow */;
@@ -18,7 +16,7 @@
&::part(base) {
border-width: 0px;
box-shadow:
var(--wa-theme-active-shadow-pop-out),
var(--wa-subtle-shadow-pop-out),
inset 0 0 0 var(--border-width) var(--border-color, var(--background-color, transparent));
padding-inline: calc(var(--wa-form-control-padding-inline) + var(--border-width));
}
@@ -27,14 +25,14 @@
&:where(:not(wa-button)),
&::part(base) {
box-shadow:
var(--wa-theme-active-shadow-punch-in),
var(--wa-subtle-shadow-punch-in),
inset 0 0 0 var(--border-width) var(--border-color-active, var(--background-color-active, transparent));
}
}
}
wa-card {
box-shadow: var(--wa-theme-active-shadow-pop-out);
box-shadow: var(--wa-subtle-shadow-pop-out);
}
input:not([type='button'], [type='reset'], [type='submit'], :checked),
@@ -51,7 +49,7 @@
wa-slider::part(thumb),
wa-switch::part(thumb) {
box-shadow: var(--wa-theme-active-shadow-pop-out);
box-shadow: var(--wa-subtle-shadow-pop-out);
}
wa-progress-bar {

391
packages/webawesome/src/styles/themes/active.css
View File

@@ -1,29 +1,378 @@
@import url('active/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('active/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('active/dimension.css');
@import url('active/overrides.css');
@import url('../color/rudimentary.css');
@import url('../brand/green.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('../dimension/subtle.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-active,
.wa-dark,
.wa-light,
.wa-invert {
/**
* Rounding
*/
--wa-border-radius-scale: 2;
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-05);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: black 5%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-70);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: black;
/* #endregion */
}
.wa-dark,
.wa-invert {
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: black;
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
--wa-color-neutral-on-loud: black;
/* #endregion */
}
:root,
.wa-theme-active,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Inter', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 550;
--wa-font-weight-bold: 650;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1.75;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
/**
* Component Groups
*/
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-active,
.wa-light,
.wa-dark,
.wa-invert {
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

145
packages/webawesome/src/styles/themes/active/color.css
View File

@@ -1,145 +0,0 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
@import url('../../brand/green.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-active,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-text-normal: var(--wa-color-neutral-05);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: black 5%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-70);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: black;
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-lowered: black;
--wa-color-text-link: var(--wa-color-brand-70);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
--wa-color-neutral-on-loud: black;
}
}

16
packages/webawesome/src/styles/themes/active/overrides.css
View File

@@ -1,16 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-active {
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-brand-on-loud);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

13
packages/webawesome/src/styles/themes/active/typography.css
View File

@@ -1,13 +0,0 @@
@import url('../default/typography.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-active {
--wa-font-family-body: 'Inter', sans-serif;
--wa-font-weight-semibold: 550;
--wa-font-weight-bold: 650;
}
}

423
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -1,55 +1,422 @@
@import url('awesome/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('awesome/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('awesome/dimension.css');
@import url('awesome/overrides.css');
@import url('../color/bright.css');
@import url('../brand/blue.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('../dimension/blocky.css');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-awesome,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-20);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-70);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-30);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: var(--wa-color-text-normal);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-70);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-30);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: var(--wa-color-text-normal);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-70);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-30);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: var(--wa-color-text-normal);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-70);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-30);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: var(--wa-color-text-normal);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
--wa-color-neutral-border-loud: var(--wa-color-neutral-30);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-40);
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Borders
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-warning-05);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
--wa-color-neutral-border-loud: var(--wa-color-neutral-80);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-on-normal: var(--wa-color-neutral-80);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
:root,
.wa-theme-awesome,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Quicksand', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 400;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-bold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 2;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/**
* Rounding
*/
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1.5;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-offset-y-scale: 2;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 0;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
/**
* Transitions
*/
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease-in;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/**
* Component Groups
*/
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-neutral-border-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-bold);
--wa-form-control-label-line-height: var(--wa-line-height-normal);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 1em;
--wa-form-control-padding-inline: 1.25em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-awesome,
.wa-light,
.wa-dark,
.wa-invert {
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
[appearance='plain'],
.wa-plain
) {
&[appearance~='outlined'],
&.wa-outlined {
--border-color: var(--text-color);
.wa-dark &,
.wa-invert & {
--border-color: var(--wa-color-border-quiet);
--text-color-active: var(--wa-color-on-quiet);
}
}
}
wa-badge {
border-radius: var(--wa-border-radius-m);
font-weight: var(--wa-font-weight-bold);
text-transform: uppercase;
}
wa-callout {
&:is([appearance~='outlined']) {
border-color: var(--wa-color-border-normal);
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-border-normal);
}
}
wa-card {
background-color: var(--wa-color-surface-raised);
}
wa-card::part(header) {
border-bottom-style: dotted;
}
wa-card::part(footer) {
border-top-style: dotted;
}
input[type='checkbox'],
wa-checkbox,
wa-tree-item::part(checkbox__control) {
--checked-icon-color: var(--wa-color-surface-default);
}
wa-switch {
--height: 1.5em;
}
wa-tag {
font-weight: var(--wa-font-weight-bold);
}
}
}

132
packages/webawesome/src/styles/themes/awesome/color.css
View File

@@ -1,132 +0,0 @@
@import url('../../color/bright.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-awesome,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-text-normal: var(--wa-color-neutral-20);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-70);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-30);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: var(--wa-color-text-normal);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-70);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-30);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: var(--wa-color-text-normal);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-70);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-30);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: var(--wa-color-text-normal);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-70);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-30);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: var(--wa-color-text-normal);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-80);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
--wa-color-neutral-border-loud: var(--wa-color-neutral-30);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-40);
--wa-color-neutral-on-loud: var(--wa-color-text-normal);
}
.wa-dark,
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-50);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-50);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-50);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-warning-05);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-50);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-border-normal: var(--wa-color-neutral-50);
--wa-color-neutral-border-loud: var(--wa-color-neutral-80);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-on-normal: var(--wa-color-neutral-80);
--wa-color-neutral-on-loud: white;
}
}

60
packages/webawesome/src/styles/themes/awesome/overrides.css
View File

@@ -1,60 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-awesome {
:is(button, input:where([type='button'], [type='reset'], [type='submit']), wa-button):not(
[appearance='plain'],
.wa-plain
) {
&[appearance~='outlined'],
&.wa-outlined {
--border-color: var(--text-color);
.wa-dark &,
.wa-invert & {
--border-color: var(--wa-color-border-quiet);
--text-color-active: var(--wa-color-on-quiet);
}
}
}
wa-badge {
border-radius: var(--wa-border-radius-m);
font-weight: var(--wa-font-weight-bold);
text-transform: uppercase;
}
wa-callout {
&:is([appearance~='outlined']) {
border-color: var(--wa-color-border-normal);
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-border-normal);
}
}
wa-card {
background-color: var(--wa-color-surface-raised);
}
wa-card::part(header) {
border-bottom-style: dotted;
}
wa-card::part(footer) {
border-top-style: dotted;
}
input[type='checkbox'],
wa-checkbox,
wa-tree-item::part(checkbox__control) {
--checked-icon-color: var(--wa-color-surface-default);
}
wa-switch {
--height: 1.5em;
}
wa-tag {
font-weight: var(--wa-font-weight-bold);
}
}
}

20
packages/webawesome/src/styles/themes/awesome/typography.css
View File

@@ -1,20 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-awesome {
/**
* Typography
*/
--wa-font-family-body: Quicksand, sans-serif;
--wa-font-weight-light: 400;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-action: var(--wa-font-weight-bold);
}
}

453
packages/webawesome/src/styles/themes/brutalist.css
View File

@@ -1,45 +1,440 @@
@import url('brutalist/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('brutalist/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('brutalist/overrides.css');
@import url('../color/default.css');
@import url('../brand/blue.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-brutalist,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-10);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-neutral-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.2);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: white 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-60);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-60);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-60);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-60);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
--wa-color-neutral-border-loud: var(--wa-color-neutral-20);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Spacing
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-05);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-neutral-05);
--wa-color-surface-border: var(--wa-color-neutral-40);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-neutral-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.5);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-95);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-95);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-95);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-95);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-90);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-95);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
/* #endregion */
}
:root,
.wa-theme-brutalist,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Space Grotesk', sans-serif;
--wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
--wa-font-family-code: 'Space Mono', monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1.125;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
/**
* Borders
*/
--wa-border-width-scale: 2;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/**
* Rounding
*/
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 0;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
/**
* Shadows
*/
--wa-shadow-blur-scale: 0;
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: var(--wa-shadow-offset-y-scale);
--wa-shadow-offset-y-scale: 4;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 4;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 0;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
/**
* Component Groups
*/
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-brutalist,
.wa-light,
.wa-dark,
.wa-invert {
blockquote,
pre {
border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
}
wa-badge {
text-transform: uppercase;
}
wa-callout,
wa-tag {
border-inline-start-color: var(--outlined-border-color, var(--wa-color-border-loud));
border-inline-start-width: var(--wa-border-width-m);
&:not([appearance~='outlined']) {
border-block-start-width: 0;
border-block-end-width: 0;
border-inline-end-width: 0;
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-fill-loud);
}
}
wa-callout {
--spacing: var(--wa-space-s) var(--wa-space-m);
&::part(icon) {
--spacing: var(--wa-space-m);
}
}
wa-carousel {
--pagination-color: var(--wa-color-neutral-fill-normal);
}
wa-carousel::part(scroll-container) {
padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
}
wa-carousel::part(pagination-item),
wa-comparison::part(handle),
wa-progress-bar::part(base),
wa-slider::part(track),
wa-slider::part(thumb),
input[type='range'],
wa-switch::part(control),
wa-switch::part(thumb) {
border-radius: var(--wa-border-radius-square);
}
wa-carousel-item::slotted(*) {
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
box-shadow: var(--wa-shadow-s);
}
wa-input::part(input),
wa-select::part(combobox),
wa-textarea::part(textarea),
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea {
border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
}
wa-rating {
--symbol-color-active: var(--wa-color-neutral-fill-loud);
}
}
}

151
packages/webawesome/src/styles/themes/brutalist/color.css
View File

@@ -1,151 +0,0 @@
@import url('../../color/default.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-brutalist,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: var(--wa-color-neutral-10);
--wa-color-text-link: var(--wa-color-neutral-40);
--wa-color-shadow: rgb(0 0 0 / 0.2);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: white 20%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-60);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-60);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-60);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-60);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-70);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
--wa-color-neutral-border-loud: var(--wa-color-neutral-20);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-neutral-05);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-neutral-05);
--wa-color-surface-border: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-neutral-70);
--wa-color-shadow: rgb(0 0 0 / 0.5);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-80);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-95);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-80);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-95);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-80);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-95);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-80);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-95);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-50);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-90);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-95);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
}
}

89
packages/webawesome/src/styles/themes/brutalist/overrides.css
View File

@@ -1,89 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-brutalist {
blockquote,
pre {
border-inline-start: var(--wa-border-style) var(--wa-border-width-m) var(--wa-color-surface-border);
}
wa-badge {
text-transform: uppercase;
}
wa-callout,
wa-tag {
border-inline-start-color: var(--outlined-border-color, var(--wa-color-border-loud));
border-inline-start-width: var(--wa-border-width-m);
&:not([appearance~='outlined']) {
border-block-start-width: 0;
border-block-end-width: 0;
border-inline-end-width: 0;
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-fill-loud);
}
}
wa-callout {
--spacing: var(--wa-space-s) var(--wa-space-m);
&::part(icon) {
--spacing: var(--wa-space-m);
}
}
wa-carousel {
--pagination-color: var(--wa-color-neutral-fill-normal);
}
wa-carousel::part(scroll-container) {
padding: var(--wa-shadow-offset-y-s) var(--wa-shadow-offset-x-s); /* make room for the box-shadow */
}
wa-carousel::part(pagination-item),
wa-comparison::part(handle),
wa-progress-bar::part(base),
wa-slider::part(track),
wa-slider::part(thumb),
input[type='range'],
wa-switch::part(control),
wa-switch::part(thumb) {
border-radius: var(--wa-border-radius-square);
}
wa-carousel-item {
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
box-shadow: var(--wa-shadow-s);
}
:is(
wa-input::part(input),
wa-select::part(form-control-input),
wa-textarea::part(form-control-input),
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea
) {
border-width: 0 0 var(--wa-form-control-border-width) var(--wa-form-control-border-width);
}
wa-rating {
--symbol-color-active: var(--wa-color-neutral-fill-loud);
}
}
}

16
packages/webawesome/src/styles/themes/brutalist/typography.css
View File

@@ -1,16 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@100;200;300;400;500;600;700&family=Space+Grotesk:wght@300..700&family=Space+Mono:wght@400;700&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-brutalist {
--wa-font-family-body: 'Space Grotesk', sans-serif;
--wa-font-family-heading: 'IBM Plex Sans Condensed', sans-serif;
--wa-font-family-code: 'Space Mono', monospace;
--wa-font-weight-bold: 700;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
}
}

362
packages/webawesome/src/styles/themes/default.css
View File

@@ -1,13 +1,357 @@
@import url('../color/default.css');
@import url('default/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('default/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('../brand/blue.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@layer wa-theme {
/* Nothing yet */
:root,
.wa-theme-default,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:root,
.wa-theme-default,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}

203
packages/webawesome/src/styles/themes/default/color.css
View File

@@ -1,203 +0,0 @@
@import url('../../brand/blue.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
/**
* Foundational Colors and Semantic Colors
*/
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
/* Surfaces are background layers that other content rests on.
* Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
/* Text colors are used for standard text elements.
* Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
/* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
/* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
* By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
* Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
/* Focus color provides the default color of the focus ring for predictable keyboard navigation.
* Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
--wa-color-focus: var(--wa-color-brand-60);
/* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/**
* Semantic Colors
* Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
* Within these groups, each color specifies a role -
* * Fill for background colors or areas larger than a few pixels
* * Border for borders, dividers, and other stroke-like elements
* * On for content displayed on a fill with the corresponding attention
* Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert {
color-scheme: dark;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
/* Mixing with --wa-color-surface-lowered prevents shadows from becoming excessively dark relative to --wa-color-surface-default. */
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
}
}

64
packages/webawesome/src/styles/themes/default/groups.css
View File

@@ -1,64 +0,0 @@
@layer wa-theme {
/**
* Component Groups
*/
:where(:root),
:host,
.wa-theme-default,
:where([class^='wa-theme-'], [class*=' wa-theme-']),
.wa-light,
.wa-dark,
.wa-invert {
/* Form controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
}
}

23
packages/webawesome/src/styles/themes/default/outlines.css
View File

@@ -1,23 +0,0 @@
@layer wa-theme {
/**
* Borders and outlines
*/
:where(:root),
:host {
--wa-border-style: solid;
/* A multiplier is provided to uniformly increase or decrease all border widths. */
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/**
* Focus
*/
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
}
}

18
packages/webawesome/src/styles/themes/default/rounding.css
View File

@@ -1,18 +0,0 @@
@layer wa-theme {
/**
* Rounding
*/
:where(:root),
:host {
/* A multiplier is provided to uniformly increase or decrease all border radii. */
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
/* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
}
}

36
packages/webawesome/src/styles/themes/default/shadows.css
View File

@@ -1,36 +0,0 @@
@layer wa-theme {
/**
* Shadows
* Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
* A multiplier is provided for each shadow quality to uniformly scale all related values.
*/
:where(:root),
:host {
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
}
}

22
packages/webawesome/src/styles/themes/default/space.css
View File

@@ -1,22 +0,0 @@
@layer wa-theme {
/**
* Spacing
*/
:where(:root),
:host {
/* A multiplier is provided to uniformly increase or decrease all spacing. */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
}
}

12
packages/webawesome/src/styles/themes/default/transitions.css
View File

@@ -1,12 +0,0 @@
@layer wa-theme {
/**
* Transitions
*/
:where(:root),
:host {
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
}
}

47
packages/webawesome/src/styles/themes/default/typography.css
View File

@@ -1,47 +0,0 @@
@layer wa-theme {
/**
* Typography
*/
:where(:root),
:where([class^='wa-theme-'], [class*=' wa-theme-']),
:host {
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered.
* A multiplier is provided to uniformly increase or decrease all font sizes. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
}
}

399
packages/webawesome/src/styles/themes/glossy.css
View File

@@ -1,34 +1,387 @@
@import url('glossy/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('glossy/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('glossy/dimension.css');
@import url('glossy/overrides.css');
@import url('../color/elegant.css');
@import url('../brand/indigo.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('../dimension/glossy.css');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-mellow,
.wa-dark,
:root,
.wa-theme-glossy,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-20);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Spacing
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:root,
.wa-theme-glossy,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Figtree', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 800;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1.125;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
/**
* Rounding
*/
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1.33;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-blur-scale: 3;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-glossy,
.wa-light,
.wa-dark,
.wa-invert {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

28
packages/webawesome/src/styles/themes/glossy/color.css
View File

@@ -1,28 +0,0 @@
@import url('../../color/elegant.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-glossy,
.wa-light,
.wa-dark .wa-invert {
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
}
.wa-dark,
.wa-invert {
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
}
}

25
packages/webawesome/src/styles/themes/glossy/overrides.css
View File

@@ -1,25 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-glossy {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: -0.02em;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
}
}

17
packages/webawesome/src/styles/themes/glossy/typography.css
View File

@@ -1,17 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-glossy {
--wa-font-family-body: 'Figtree', sans-serif;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 800;
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
}
}

611
packages/webawesome/src/styles/themes/matter.css
View File

@@ -1,44 +1,599 @@
@import url('matter/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('matter/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('matter/overrides.css');
@import url('../color/mild.css');
@import url('../brand/purple.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-matter,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-95);
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-90);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.3);
--wa-color-focus: var(--wa-color-brand-40);
--wa-color-mix-hover: white 5%;
--wa-color-mix-active: white 10%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-20);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Rounding
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-80);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-on-normal: var(--wa-color-neutral-80);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
/* #endregion */
}
:root,
.wa-theme-matter,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Wix Madefor Text', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: 'Roboto Mono', monospace;
--wa-font-family-longform: 'Roboto Serif', serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1.33;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.125rem; /* 2px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0rem; /* 0px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-blur-scale: 1.25;
--wa-shadow-offset-y-scale: 0.5;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1.25;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
/**
* Focus
*/
--wa-focus-ring-width: 0.125rem;
--wa-focus-ring-offset: 0rem;
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/**
* Component Groups
*/
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-s);
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-normal);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
@property --wa-ripple-progress {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
:root,
.wa-theme-matter,
.wa-light,
.wa-dark,
.wa-invert {
--wa-ripple-start-radius: 0.1em;
--wa-ripple-start-opacity: 0.1;
--wa-ripple-duration: calc(2 * var(--wa-transition-slow));
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {
--wa-form-control-border-radius: var(--wa-border-radius-pill);
--box-shadow: 0 0 transparent;
&:not([appearance~='plain']) {
&:where(:not(wa-button)),
&::part(base) {
padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
}
}
&:not([appearance~='outlined'], [appearance~='plain']):hover {
--box-shadow: var(--wa-shadow-s);
&:active {
--box-shadow: 0 0 transparent;
}
}
&:is([appearance~='outlined']) {
--border-color: var(--wa-form-control-border-color);
}
/* Ripple effect */
/* TODO: fix */
--wa-ripple-progress: 1;
--wa-ripple-progress-inv: calc(1 - var(--wa-ripple-progress));
--wa-ripple-radius: calc(
var(--wa-ripple-start-radius) * var(--wa-ripple-progress-inv) + 100% * var(--wa-ripple-progress)
);
--wa-ripple-opacity: calc(var(--wa-ripple-start-opacity) * var(--wa-ripple-progress-inv));
--wa-ripple-color: hsl(0 0% 100% / var(--wa-ripple-opacity));
--wa-ripple-center-x: calc(100% * var(--mouse-local-x, 0.5));
--wa-ripple-center-y: calc(100% * var(--mouse-local-y, 0.5));
background-image: radial-gradient(
circle at var(--wa-ripple-center-x) var(--wa-ripple-center-y),
var(--wa-ripple-color) var(--wa-ripple-radius),
transparent 0
);
transition:
var(--wa-transition-fast),
--wa-ripple-progress var(--wa-ripple-duration);
&:active {
--wa-ripple-progress: 0;
--wa-ripple-duration: 0s;
}
}
input[type='checkbox'],
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control) {
border-radius: calc(var(--wa-border-radius-s) / 2);
}
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea {
--wa-form-control-value-line-height: var(--wa-line-height-normal);
/* Needed for floating label */
position: relative;
&:is([appearance~='filled']):not([appearance~='outlined'], [pill]) {
--wa-focus-ring: ;
--border-color: transparent transparent var(--wa-form-control-border-color) transparent;
&:where(input, textarea, wa-input, select, wa-textarea):focus,
&:where(wa-select):focus-within {
--border-color: transparent transparent var(--wa-color-focus) transparent;
--box-shadow: inset 0 calc(var(--wa-form-control-border-width) * -2) 0 0 var(--wa-color-focus);
}
&:where(input, select, textarea),
&::part(input),
&::part(combobox) {
border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px;
}
}
/**
* Floating labels
*/
&::part(label) {
transition: all var(--wa-transition-normal);
pointer-events: none;
position: absolute;
left: calc(var(--wa-form-control-padding-inline) - 0.25em);
z-index: 1;
/* State: out of the way by default */
top: -0.5lh;
font-size: var(--wa-font-size-smaller);
background-color: var(--wa-form-control-background-color);
padding-inline: 0.25em;
}
&:focus::part(label) {
color: var(--wa-color-focus);
}
/* State: placeholder-like when:
* - the input is empty
* - the input is not focused
* - there is no actual placeholder
*/
&:state(blank):not(:focus, [placeholder])::part(label) {
top: calc(var(--wa-form-control-height) / 2 - 0.5lh);
font-size: inherit;
}
/* Different positioning and appearance for filled */
&:where([appearance~='filled'])[label]:not([placeholder]) {
&::part(base) {
/* We want to move this down a bit to make space for the floating label */
translate: 0 0.3em;
}
&::part(label) {
/* In filled inputs, the floating label stays within the input */
background-color: transparent;
}
&:not(:state(blank):not(:focus, [placeholder]))::part(label) {
top: 0;
}
}
}
wa-option {
--background-color-hover: color-mix(in oklch, var(--wa-color-surface-lowered), transparent);
--text-color-hover: var(--wa-color-text-normal);
&::part(base) {
line-height: var(--wa-line-height-expanded);
}
}
progress,
wa-progress-bar::part(base) {
height: 0.25rem;
border-radius: var(--wa-border-radius-square);
}
input:is([type='checkbox'], [type='radio']),
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control),
wa-radio::part(control) {
--checked-icon-scale: 0.65;
border-width: var(--wa-border-width-m);
margin-inline-end: 0.75em;
}
@media (hover: hover) {
:is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%);
}
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
}
}
}
}
@media (hover: hover) {
wa-slider:hover::part(thumb) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
}
}
wa-switch {
--background-color: var(--wa-color-surface-raised);
--border-width: var(--wa-border-width-m);
--height: 2em;
--width: calc(var(--height) * 1.625);
--thumb-size: 1.5em;
transition-property: all;
&::part(control) {
margin-inline-end: 0.75em;
}
@media (hover: hover) {
&:hover {
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
}
}
&:not(:state(checked))::part(thumb) {
transform: scale(0.7);
}
&:active::part(thumb) {
transform: scale(1.1);
}
}
wa-tag {
font-weight: var(--wa-font-weight-semibold);
}
}
}

149
packages/webawesome/src/styles/themes/matter/color.css
View File

@@ -1,149 +0,0 @@
@import url('../../color/mild.css');
@import url('../default/color.css');
@import url('../../brand/purple.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-matter,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-brand-95);
--wa-color-surface-lowered: var(--wa-color-neutral-90);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-shadow: rgb(0 0 0 / 0.3);
--wa-color-focus: var(--wa-color-brand-40);
--wa-color-mix-hover: white 5%;
--wa-color-mix-active: white 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-40);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-40);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-40);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-20);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-30);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-80);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-on-normal: var(--wa-color-neutral-80);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
}
}

245
packages/webawesome/src/styles/themes/matter/overrides.css
View File

@@ -1,245 +0,0 @@
@layer wa-theme {
/**
* Component Styles
*/
@property --wa-ripple-progress {
syntax: '<number>';
initial-value: 0;
inherits: false;
}
:where(:root),
:host,
.wa-theme-matter {
--wa-ripple-start-radius: 0.1em;
--wa-ripple-start-opacity: 0.1;
--wa-ripple-duration: calc(2 * var(--wa-transition-slow));
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {
--wa-form-control-border-radius: var(--wa-border-radius-pill);
--box-shadow: 0 0 transparent;
&:not([appearance~='plain']) {
&:where(:not(wa-button)),
&::part(base) {
padding-inline: calc(var(--wa-form-control-padding-inline) * 1.5);
}
}
&:not([appearance~='outlined'], [appearance~='plain']):hover {
--box-shadow: var(--wa-shadow-s);
&:active {
--box-shadow: 0 0 transparent;
}
}
&:is([appearance~='outlined']) {
--border-color: var(--wa-form-control-border-color);
}
/* Ripple effect */
/* TODO: fix */
--wa-ripple-progress: 1;
--wa-ripple-progress-inv: calc(1 - var(--wa-ripple-progress));
--wa-ripple-radius: calc(
var(--wa-ripple-start-radius) * var(--wa-ripple-progress-inv) + 100% * var(--wa-ripple-progress)
);
--wa-ripple-opacity: calc(var(--wa-ripple-start-opacity) * var(--wa-ripple-progress-inv));
--wa-ripple-color: hsl(0 0% 100% / var(--wa-ripple-opacity));
--wa-ripple-center-x: calc(100% * var(--mouse-local-x, 0.5));
--wa-ripple-center-y: calc(100% * var(--mouse-local-y, 0.5));
background-image: radial-gradient(
circle at var(--wa-ripple-center-x) var(--wa-ripple-center-y),
var(--wa-ripple-color) var(--wa-ripple-radius),
transparent 0
);
transition:
var(--wa-transition-fast),
--wa-ripple-progress var(--wa-ripple-duration);
&:active {
--wa-ripple-progress: 0;
--wa-ripple-duration: 0s;
}
}
input[type='checkbox'],
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control) {
border-radius: calc(var(--wa-border-radius-s) / 2);
}
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea,
wa-input,
wa-select,
wa-textarea {
--wa-form-control-value-line-height: var(--wa-line-height-normal);
/* Needed for floating label */
position: relative;
&:is([appearance~='filled']):not([appearance~='outlined'], [pill]) {
--wa-focus-ring: ;
--border-color: transparent transparent var(--wa-form-control-border-color) transparent;
&:where(input, textarea, wa-input, select, wa-textarea):focus,
&:where(wa-select):focus-within {
--border-color: transparent transparent var(--wa-color-focus) transparent;
--box-shadow: inset 0 calc(var(--wa-form-control-border-width) * -2) 0 0 var(--wa-color-focus);
}
&:where(input, select, textarea),
&::part(input),
&::part(combobox) {
border-radius: var(--wa-form-control-border-radius) var(--wa-form-control-border-radius) 0px 0px;
}
}
/**
* Floating labels
*/
&::part(label) {
transition: all var(--wa-transition-normal);
pointer-events: none;
position: absolute;
left: calc(var(--wa-form-control-padding-inline) - 0.25em);
z-index: 1;
/* State: out of the way by default */
top: -0.5lh;
font-size: var(--wa-font-size-smaller);
background-color: var(--wa-form-control-background-color);
padding-inline: 0.25em;
}
&:focus::part(label) {
color: var(--wa-color-focus);
}
/* State: placeholder-like when:
* - the input is empty
* - the input is not focused
* - there is no actual placeholder
*/
&:state(blank):not(:focus, [placeholder])::part(label) {
top: calc(var(--wa-form-control-height) / 2 - 0.5lh);
font-size: inherit;
}
/* Different positioning and appearance for filled */
&:where([appearance~='filled'])[label]:not([placeholder]) {
&::part(base) {
/* We want to move this down a bit to make space for the floating label */
translate: 0 0.3em;
}
&::part(label) {
/* In filled inputs, the floating label stays within the input */
background-color: transparent;
}
&:not(:state(blank):not(:focus, [placeholder]))::part(label) {
top: 0;
}
}
}
wa-option {
--background-color-hover: color-mix(in oklch, var(--wa-color-surface-lowered), transparent);
--text-color-hover: var(--wa-color-text-normal);
&::part(base) {
line-height: var(--wa-line-height-expanded);
}
}
progress,
wa-progress-bar::part(base) {
height: 0.25rem;
border-radius: var(--wa-border-radius-square);
}
input:is([type='checkbox'], [type='radio']),
wa-checkbox::part(control),
wa-tree-item::part(checkbox__control),
wa-radio::part(control) {
--checked-icon-scale: 0.65;
border-width: var(--wa-border-width-m);
margin-inline-end: 0.75em;
}
@media (hover: hover) {
:is(input:where([type='checkbox'], [type='radio']), wa-checkbox, wa-tree-item, wa-radio):hover {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-border-color), transparent 85%);
}
&:is(:checked, :indeterminate, :state(checked), :state(indeterminate)) {
&:where(input),
&::part(control),
&::part(checkbox__control) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
}
}
}
}
@media (hover: hover) {
wa-slider:hover::part(thumb) {
box-shadow: 0 0 0 0.5em color-mix(in oklab, var(--wa-form-control-activated-color), transparent 85%);
}
}
wa-switch {
--background-color: var(--wa-color-surface-raised);
--border-width: var(--wa-border-width-m);
--height: 2em;
--width: calc(var(--height) * 1.625);
--thumb-size: 1.5em;
transition-property: all;
&::part(control) {
margin-inline-end: 0.75em;
}
@media (hover: hover) {
&:hover {
--thumb-shadow: 0 0 0 0.5em color-mix(in oklab, var(--border-color), transparent 85%);
}
}
&:not(:state(checked))::part(thumb) {
transform: scale(0.7);
}
&:active::part(thumb) {
transform: scale(1.1);
}
}
wa-tag {
font-weight: var(--wa-font-weight-semibold);
}
}
}

17
packages/webawesome/src/styles/themes/matter/typography.css
View File

@@ -1,17 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-matter {
--wa-font-family-body: 'Wix Madefor Text', sans-serif;
--wa-font-family-code: 'Roboto Mono', monospace;
--wa-font-family-longform: 'Roboto Serif', serif;
--wa-font-weight-bold: 700;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-link-decoration-default: underline;
}
}

405
packages/webawesome/src/styles/themes/mellow.css
View File

@@ -1,43 +1,392 @@
@import url('mellow/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('mellow/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('mellow/overrides.css');
@import url('../color/natural.css');
@import url('../brand/blue.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-mellow,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: var(--wa-color-neutral-95);
--wa-color-surface-lowered: var(--wa-color-neutral-90);
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
--wa-color-text-normal: var(--wa-color-brand-20);
--wa-color-text-quiet: var(--wa-color-brand-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-50);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-90);
--wa-color-success-fill-normal: var(--wa-color-success-80);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Spacing
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent);
--wa-color-text-normal: var(--wa-color-brand-90);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:root,
.wa-theme-mellow,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Mulish', sans-serif;
--wa-font-family-heading: 'Lora', serif;
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: 'Lora', serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 70%, transparent) dotted;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1.125;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2.25px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4.5px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 9px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 13.5px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 18px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 27px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 36px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 45px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 54px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 72px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
/**
* Borders
*/
--wa-border-width-scale: 1.5;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/**
* Focus
*/
--wa-focus-ring-width: 0.25rem;
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.25rem; /* 4px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-offset-y-scale: 0;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
/**
* Component Groups
*/
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-mellow,
.wa-light,
.wa-dark,
.wa-invert {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: calc(1em * -0.02);
}
wa-callout {
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
calc(var(--wa-panel-border-width) * 4);
}
wa-card::part(header) {
border-bottom-style: dotted;
}
wa-card::part(footer) {
border-top-style: dotted;
}
input[type='radio'],
wa-radio {
--checked-icon-scale: 0.6;
}
}
}

102
packages/webawesome/src/styles/themes/mellow/color.css
View File

@@ -1,102 +0,0 @@
@import url('../../color/natural.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-mellow,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
color: var(--wa-color-text-normal);
/**
* Foundational Colors
*/
--wa-color-surface-raised: white;
--wa-color-surface-default: var(--wa-color-neutral-95);
--wa-color-surface-lowered: var(--wa-color-neutral-90);
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
--wa-color-text-normal: var(--wa-color-brand-20);
--wa-color-text-quiet: var(--wa-color-brand-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-focus: var(--wa-color-brand-50);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-90);
--wa-color-success-fill-normal: var(--wa-color-success-80);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-60);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: color-mix(in oklab, var(--wa-color-neutral-30), transparent);
--wa-color-text-normal: var(--wa-color-brand-90);
--wa-color-text-quiet: var(--wa-color-brand-70);
/**
* Semantic Colors
*/
--wa-color-neutral-fill-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-loud: white;
}
}

34
packages/webawesome/src/styles/themes/mellow/overrides.css
View File

@@ -1,34 +0,0 @@
@layer wa-theme {
/**
* Component Styles
*/
:where(:root),
:host,
.wa-theme-mellow {
h1,
h2,
h3,
h4,
h5,
h6 {
letter-spacing: calc(1em * -0.02);
}
wa-callout {
border-width: var(--wa-panel-border-width) var(--wa-panel-border-width) var(--wa-panel-border-width)
calc(var(--wa-panel-border-width) * 4);
}
wa-card::part(header) {
border-bottom-style: dotted;
}
wa-card::part(footer) {
border-top-style: dotted;
}
input[type='radio'],
wa-radio {
--checked-icon-scale: 0.6;
}
}
}

15
packages/webawesome/src/styles/themes/mellow/typography.css
View File

@@ -1,15 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-mellow {
--wa-font-family-body: 'Mulish', sans-serif;
--wa-font-family-heading: 'Lora', serif;
--wa-font-family-longform: 'Lora', serif;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
}
}

417
packages/webawesome/src/styles/themes/playful.css
View File

@@ -1,46 +1,401 @@
@import url('playful/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('playful/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('playful/dimension.css');
@import url('playful/overrides.css');
@import url('../color/rudimentary.css');
@import url('../brand/purple.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('../dimension/smooth.css');
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-playful,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-80);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-30);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-90);
--wa-color-success-fill-normal: var(--wa-color-success-80);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-30);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-30);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-30);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Borders
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-20);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-neutral-05);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-80);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-10);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-20);
--wa-color-brand-border-normal: var(--wa-color-brand-30);
--wa-color-brand-border-loud: var(--wa-color-brand-40);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-10);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-20);
--wa-color-success-border-normal: var(--wa-color-success-30);
--wa-color-success-border-loud: var(--wa-color-success-40);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-10);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-20);
--wa-color-warning-border-normal: var(--wa-color-warning-30);
--wa-color-warning-border-loud: var(--wa-color-warning-40);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-10);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-20);
--wa-color-danger-border-normal: var(--wa-color-danger-30);
--wa-color-danger-border-loud: var(--wa-color-danger-40);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-40);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:root,
.wa-theme-playful,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Nunito', sans-serif;
--wa-font-family-heading: 'Fredoka', sans-serif;
--wa-font-family-code: 'Azeret Mono', monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1.125;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 12.375px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 13.5px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 15.75px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 18px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 22.5px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 28.125px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 36px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 46.125px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 58.5px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 3;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/**
* Focus
*/
--wa-focus-ring-width: 0.25rem;
/**
* Rounding
*/
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 2;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.25rem; /* 4px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-blur-scale: 3;
--wa-shadow-offset-y-scale: 2;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 3;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
/**
* Component Groups
*/
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: min(var(--wa-border-radius-pill), calc(var(--wa-form-control-height) * 0.6));
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-playful,
.wa-light,
.wa-dark,
.wa-invert {
wa-badge,
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {
&:where(:not(wa-button)),
&::part(base) {
font-weight: var(--wa-font-weight-bold);
}
}
wa-badge,
wa-tag,
wa-select::part(tag) {
border-width: calc(var(--wa-border-width-s) * 0.67);
}
wa-select::part(tag) {
border-radius: var(--wa-form-control-border-radius);
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-rating {
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
}
}
}

149
packages/webawesome/src/styles/themes/playful/color.css
View File

@@ -1,149 +0,0 @@
@import url('../../color/rudimentary.css');
@import url('../default/color.css');
@import url('../../brand/purple.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-playful,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: var(--wa-color-neutral-80);
--wa-color-text-link: var(--wa-color-yellow-40);
--wa-color-focus: var(--wa-color-brand-60);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-90);
--wa-color-brand-fill-normal: var(--wa-color-brand-80);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-30);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-90);
--wa-color-success-fill-normal: var(--wa-color-success-80);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-30);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-90);
--wa-color-warning-fill-normal: var(--wa-color-warning-80);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-30);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-90);
--wa-color-danger-fill-normal: var(--wa-color-danger-80);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-30);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-80);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-neutral-20);
--wa-color-surface-default: var(--wa-color-neutral-10);
--wa-color-surface-lowered: var(--wa-color-neutral-05);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-yellow-80);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
--wa-color-brand-fill-loud: var(--wa-color-brand);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-on);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-40);
--wa-color-success-fill-loud: var(--wa-color-success);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-on);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
--wa-color-warning-fill-loud: var(--wa-color-warning);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-on);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
--wa-color-danger-fill-loud: var(--wa-color-danger);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-on);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-70);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-70);
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
}
}

39
packages/webawesome/src/styles/themes/playful/overrides.css
View File

@@ -1,39 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-playful {
wa-badge,
wa-button,
button,
input:where([type='button'], [type='reset'], [type='submit']) {
&:where(:not(wa-button)),
&::part(base) {
font-weight: var(--wa-font-weight-bold);
}
}
wa-badge,
wa-tag,
wa-select::part(tag) {
border-width: calc(var(--wa-border-width-s) * 0.67);
}
wa-select::part(tag) {
border-radius: var(--wa-form-control-border-radius);
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-rating {
--symbol-color: color-mix(in oklab, var(--symbol-color-active), transparent);
}
}
}

26
packages/webawesome/src/styles/themes/playful/typography.css
View File

@@ -1,26 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:ital@0;1&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-playful {
--wa-font-family-body: 'Nunito', sans-serif;
--wa-font-family-heading: 'Fredoka', sans-serif;
--wa-font-family-code: 'Azeret Mono', ui-monospace, monospace;
--wa-font-size-scale: 1.125;
--wa-font-weight-normal: 500;
--wa-font-weight-semibold: 600;
--wa-font-weight-bold: 700;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.35;
--wa-line-height-normal: 1.8;
--wa-line-height-expanded: 2.25;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 60%, transparent) dashed;
}
}

415
packages/webawesome/src/styles/themes/premium.css
View File

@@ -1,36 +1,407 @@
@import url('premium/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('premium/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('premium/overrides.css');
@import url('../color/anodized.css');
@import url('../brand/cyan.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-premium,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-80);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: var(--wa-color-surface-default) 5%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Borders
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-30);
--wa-color-surface-default: var(--wa-color-neutral-20);
--wa-color-surface-lowered: var(--wa-color-neutral-10);
--wa-color-surface-border: var(--wa-color-neutral-30);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-80);
--wa-color-text-link: var(--wa-color-brand-80);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: white 20%;
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-30);
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-80);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-30);
--wa-color-success-fill-normal: var(--wa-color-success-40);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-70);
--wa-color-success-on-quiet: var(--wa-color-success-80);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-30);
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-80);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-30);
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-80);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
/* #endregion */
}
:root,
.wa-theme-premium,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'DM Sans', sans-serif;
--wa-font-family-heading: 'Playfair Display', serif;
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: 'Playfair', serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.1;
--wa-line-height-normal: 1.5;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1.5;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/**
* Rounding
*/
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 0.5;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
/**
* Component Groups
*/
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
--wa-shadow-offset-y-scale: 1;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: -0.5;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: transparent;
--wa-form-control-border-color: var(--wa-color-neutral-border-loud);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-neutral-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.5em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-premium,
.wa-light,
.wa-dark,
.wa-invert {
wa-rating {
--symbol-color-active: var(--wa-color-text-quiet);
}
wa-button::part(label),
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-font-size-smaller);
text-transform: uppercase;
}
wa-callout {
font-size: var(--wa-font-size-smaller);
}
input[type='checkbox'],
wa-checkbox,
wa-tree-item::part(checkbox__control) {
--checked-icon-color: var(--wa-color-surface-default);
}
wa-badge,
wa-tag {
text-transform: uppercase;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {
--thumb-color-checked: var(--wa-color-surface-default);
}
}
}

147
packages/webawesome/src/styles/themes/premium/color.css
View File

@@ -1,147 +0,0 @@
@import url('../../color/anodized.css');
@import url('../default/color.css');
@import url('../../brand/cyan.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-premium,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: var(--wa-color-neutral-80);
--wa-color-mix-hover: white 10%;
--wa-color-mix-active: var(--wa-color-surface-default) 5%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-80);
--wa-color-brand-border-quiet: var(--wa-color-brand-80);
--wa-color-brand-border-normal: var(--wa-color-brand-70);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-80);
--wa-color-success-border-quiet: var(--wa-color-success-80);
--wa-color-success-border-normal: var(--wa-color-success-70);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-80);
--wa-color-warning-border-quiet: var(--wa-color-warning-80);
--wa-color-warning-border-normal: var(--wa-color-warning-70);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-80);
--wa-color-danger-border-normal: var(--wa-color-danger-70);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-30);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-border-normal: var(--wa-color-neutral-70);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: var(--wa-color-neutral-95);
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-raised: var(--wa-color-neutral-30);
--wa-color-surface-default: var(--wa-color-neutral-20);
--wa-color-surface-lowered: var(--wa-color-neutral-10);
--wa-color-surface-border: var(--wa-color-neutral-30);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-80);
--wa-color-text-link: var(--wa-color-brand-80);
--wa-color-mix-hover: white 20%;
--wa-color-mix-active: var(--wa-color-surface-default) 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-30);
--wa-color-brand-fill-normal: var(--wa-color-brand-40);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-70);
--wa-color-brand-on-quiet: var(--wa-color-brand-80);
--wa-color-brand-on-normal: var(--wa-color-brand-90);
--wa-color-brand-on-loud: var(--wa-color-brand-10);
--wa-color-success-fill-quiet: var(--wa-color-success-30);
--wa-color-success-fill-normal: var(--wa-color-success-40);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-70);
--wa-color-success-on-quiet: var(--wa-color-success-80);
--wa-color-success-on-normal: var(--wa-color-success-90);
--wa-color-success-on-loud: var(--wa-color-success-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-30);
--wa-color-warning-fill-normal: var(--wa-color-warning-40);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-70);
--wa-color-warning-on-quiet: var(--wa-color-warning-80);
--wa-color-warning-on-normal: var(--wa-color-warning-90);
--wa-color-warning-on-loud: var(--wa-color-warning-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-30);
--wa-color-danger-fill-normal: var(--wa-color-danger-40);
--wa-color-danger-fill-loud: var(--wa-color-danger-70);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-70);
--wa-color-danger-on-quiet: var(--wa-color-danger-80);
--wa-color-danger-on-normal: var(--wa-color-danger-90);
--wa-color-danger-on-loud: var(--wa-color-danger-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-40);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-90);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-border-normal: var(--wa-color-neutral-40);
--wa-color-neutral-border-loud: var(--wa-color-neutral-70);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-80);
--wa-color-neutral-on-normal: var(--wa-color-neutral-90);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
}
}

46
packages/webawesome/src/styles/themes/premium/overrides.css
View File

@@ -1,46 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-premium {
wa-rating {
--symbol-color-active: var(--wa-color-text-quiet);
}
wa-button::part(label),
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-font-size-smaller);
text-transform: uppercase;
}
wa-callout {
font-size: var(--wa-font-size-smaller);
}
input[type='checkbox'],
wa-checkbox,
wa-tree-item::part(checkbox__control) {
--checked-icon-color: var(--wa-color-surface-default);
}
wa-badge,
wa-tag {
text-transform: uppercase;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {
--thumb-color-checked: var(--wa-color-surface-default);
}
}
}

22
packages/webawesome/src/styles/themes/premium/typography.css
View File

@@ -1,22 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap');
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-premium,
.wa-light,
.wa-dark .wa-invert {
--wa-font-family-body: 'DM Sans', sans-serif;
--wa-font-family-heading: 'Playfair Display', serif;
--wa-font-family-longform: 'Playfair', serif;
--wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.1;
--wa-line-height-normal: 1.5;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline color-mix(in oklab, currentColor 40%, transparent);
}
}

493
packages/webawesome/src/styles/themes/shoelace.css
View File

@@ -1,51 +1,484 @@
@import url('shoelace/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('shoelace/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('shoelace/overrides.css');
@import url('../color/shoelace.css');
@import url('../brand/blue.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-shoelace,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-neutral-05) calc(var(--wa-shadow-blur-scale) * 4% + 8%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-50);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-50);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-50);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-50);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Focus
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: var(--wa-color-neutral-20);
--wa-color-text-normal: var(--wa-color-neutral-95);
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: color-mix(
in oklab,
var(--wa-color-surface-lowered) calc(var(--wa-shadow-blur-scale) * 32% + 40%),
transparent
);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-neutral-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: var(--wa-color-neutral-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-neutral-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-60);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: var(--wa-color-neutral-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-60);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
/* #endregion */
}
:root,
.wa-theme-shoelace,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 1;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 11px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 12px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 14px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 16px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 20px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 25px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 32px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 41px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 52px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: underline;
--wa-link-decoration-hover: underline;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 1;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 4px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 8px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 12px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 16px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 24px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 32px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 40px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 48px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 64px */
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 0.7;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.1875rem; /* 3px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus) 60%, transparent);
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/* #endregion */
/**
* Rounding
*/
--wa-border-radius-scale: 0.7;
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-offset-y-scale: 0.0625;
--wa-shadow-spread-scale: 0;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
/**
* Transitions
*/
--wa-shadow-blur-scale: 1;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 250ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 50ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
/**
* Component Groups
*/
/* Form controls */
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-condensed);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-m);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-shoelace,
.wa-light,
.wa-dark,
.wa-invert {
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--text-color: var(--wa-color-neutral-on-loud);
}
wa-button::part(label),
wa-radio[appearance='button'],
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-font-size-smaller);
}
wa-radio[appearance='button'] {
font-weight: var(--wa-font-weight-action);
&:state(checked) {
background-color: var(--wa-form-control-activated-color);
color: var(--wa-color-brand-on-loud);
}
}
wa-breadcrumb {
font-size: var(--wa-font-size-s);
}
wa-callout {
--spacing: var(--wa-space-m);
font-size: var(--wa-font-size-smaller);
&:is([appearance~='outlined']) {
border-top-width: var(--wa-border-width-l);
border-color: var(--wa-color-surface-border);
border-top-color: var(--border-color, var(--wa-color-border-loud));
&:not([appearance~='accent']) {
--border-color: var(--wa-color-fill-loud);
}
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-fill-loud);
--text-color: var(--wa-color-text-normal);
}
}
wa-card {
background-color: var(--wa-color-surface-raised);
}
wa-carousel {
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
:is(
wa-input,
wa-select,
wa-textarea,
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea
):not([appearance='filled'], .wa-filled) {
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
--wa-focus-ring-offset: 0;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-slider::part(thumb) {
border: none;
}
wa-switch {
--background-color: var(--wa-color-gray-50);
--border-color: var(--background-color);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
--thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
--width: calc(var(--height) * 2);
&::part(thumb) {
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
}
&[checked]::part(thumb) {
border-color: var(--background-color-checked);
}
}
wa-progress-bar::part(base),
progress {
height: 1em;
}
wa-tab {
font-size: var(--wa-font-size-smaller);
}
}
}

131
packages/webawesome/src/styles/themes/shoelace/color.css
View File

@@ -1,131 +0,0 @@
@import url('../../color/shoelace.css');
@import url('../default/color.css');
@import url('../../brand/blue.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-shoelace,
.wa-light,
.wa-dark .wa-invert {
color-scheme: light;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-95);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: var(--wa-color-brand-90);
--wa-color-brand-border-normal: var(--wa-color-brand-80);
--wa-color-brand-border-loud: var(--wa-color-brand-60);
--wa-color-brand-on-quiet: var(--wa-color-brand-50);
--wa-color-brand-on-normal: var(--wa-color-brand-40);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: var(--wa-color-success-95);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: var(--wa-color-success-90);
--wa-color-success-border-normal: var(--wa-color-success-80);
--wa-color-success-border-loud: var(--wa-color-success-60);
--wa-color-success-on-quiet: var(--wa-color-success-50);
--wa-color-success-on-normal: var(--wa-color-success-40);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: var(--wa-color-warning-95);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: var(--wa-color-warning-90);
--wa-color-warning-border-normal: var(--wa-color-warning-80);
--wa-color-warning-border-loud: var(--wa-color-warning-60);
--wa-color-warning-on-quiet: var(--wa-color-warning-50);
--wa-color-warning-on-normal: var(--wa-color-warning-40);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: var(--wa-color-danger-95);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: var(--wa-color-danger-90);
--wa-color-danger-border-normal: var(--wa-color-danger-80);
--wa-color-danger-border-loud: var(--wa-color-danger-60);
--wa-color-danger-on-quiet: var(--wa-color-danger-50);
--wa-color-danger-on-normal: var(--wa-color-danger-40);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-95);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-40);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-90);
--wa-color-neutral-border-normal: var(--wa-color-neutral-80);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-40);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-text-normal: var(--wa-color-neutral-80);
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: var(--wa-color-brand-20);
--wa-color-brand-fill-normal: var(--wa-color-brand-30);
--wa-color-brand-fill-loud: var(--wa-color-brand-70);
--wa-color-brand-border-quiet: var(--wa-color-brand-30);
--wa-color-brand-border-normal: var(--wa-color-brand-40);
--wa-color-brand-border-loud: var(--wa-color-brand-50);
--wa-color-brand-on-quiet: var(--wa-color-brand-70);
--wa-color-brand-on-normal: var(--wa-color-brand-80);
--wa-color-brand-on-loud: var(--wa-color-neutral-10);
--wa-color-success-fill-quiet: var(--wa-color-success-20);
--wa-color-success-fill-normal: var(--wa-color-success-30);
--wa-color-success-fill-loud: var(--wa-color-success-70);
--wa-color-success-border-quiet: var(--wa-color-success-30);
--wa-color-success-border-normal: var(--wa-color-success-40);
--wa-color-success-border-loud: var(--wa-color-success-50);
--wa-color-success-on-quiet: var(--wa-color-success-70);
--wa-color-success-on-normal: var(--wa-color-success-80);
--wa-color-success-on-loud: var(--wa-color-neutral-10);
--wa-color-warning-fill-quiet: var(--wa-color-warning-20);
--wa-color-warning-fill-normal: var(--wa-color-warning-30);
--wa-color-warning-fill-loud: var(--wa-color-warning-70);
--wa-color-warning-border-quiet: var(--wa-color-warning-30);
--wa-color-warning-border-normal: var(--wa-color-warning-40);
--wa-color-warning-border-loud: var(--wa-color-warning-50);
--wa-color-warning-on-quiet: var(--wa-color-warning-70);
--wa-color-warning-on-normal: var(--wa-color-warning-80);
--wa-color-warning-on-loud: var(--wa-color-neutral-10);
--wa-color-danger-fill-quiet: var(--wa-color-danger-20);
--wa-color-danger-fill-normal: var(--wa-color-danger-30);
--wa-color-danger-fill-loud: var(--wa-color-danger-60);
--wa-color-danger-border-quiet: var(--wa-color-danger-30);
--wa-color-danger-border-normal: var(--wa-color-danger-40);
--wa-color-danger-border-loud: var(--wa-color-danger-50);
--wa-color-danger-on-quiet: var(--wa-color-danger-70);
--wa-color-danger-on-normal: var(--wa-color-danger-80);
--wa-color-danger-on-loud: var(--wa-color-neutral-10);
--wa-color-neutral-fill-quiet: var(--wa-color-neutral-10);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-60);
--wa-color-neutral-border-quiet: var(--wa-color-neutral-20);
--wa-color-neutral-border-normal: var(--wa-color-neutral-30);
--wa-color-neutral-border-loud: var(--wa-color-neutral-50);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-05);
}
}

123
packages/webawesome/src/styles/themes/shoelace/overrides.css
View File

@@ -1,123 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-shoelace {
wa-avatar {
--background-color: var(--wa-color-neutral-fill-loud);
--text-color: var(--wa-color-neutral-on-loud);
}
wa-button::part(label),
wa-radio[appearance='button'],
button,
input:where([type='button'], [type='reset'], [type='submit']) {
font-size: var(--wa-font-size-smaller);
}
wa-radio[appearance='button'] {
font-weight: var(--wa-font-weight-action);
&:state(checked) {
background-color: var(--wa-form-control-activated-color);
color: var(--wa-color-brand-on-loud);
}
}
wa-breadcrumb {
font-size: var(--wa-font-size-s);
}
wa-callout {
--spacing: var(--wa-space-m);
font-size: var(--wa-font-size-smaller);
&:is([appearance~='outlined']) {
border-top-width: var(--wa-border-width-l);
border-color: var(--wa-color-surface-border);
border-top-color: var(--border-color, var(--wa-color-border-loud));
&:not([appearance~='accent']) {
--border-color: var(--wa-color-fill-loud);
}
}
&:not([appearance~='accent']) {
--icon-color: var(--wa-color-fill-loud);
--text-color: var(--wa-color-text-normal);
}
}
wa-card {
background-color: var(--wa-color-surface-raised);
}
wa-carousel {
--pagination-color-active: var(--wa-color-neutral-fill-loud);
}
:is(
wa-input,
wa-select,
wa-textarea,
input:where(
:not(
[type='button'],
[type='checkbox'],
[type='color'],
[type='file'],
[type='hidden'],
[type='image'],
[type='radio'],
[type='range'],
[type='reset'],
[type='submit']
)
),
select,
textarea
):not([appearance='filled'], .wa-filled) {
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
--wa-focus-ring-offset: 0;
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-slider::part(thumb) {
border: none;
}
wa-switch {
--background-color: var(--wa-color-gray-50);
--border-color: var(--background-color);
--height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
--thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
--width: calc(var(--height) * 2);
&::part(thumb) {
border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
}
&[checked]::part(thumb) {
border-color: var(--background-color-checked);
}
}
wa-progress-bar::part(base),
progress {
height: 1em;
}
wa-tab {
font-size: var(--wa-font-size-smaller);
}
}
}

16
packages/webawesome/src/styles/themes/shoelace/typography.css
View File

@@ -1,16 +0,0 @@
@import url('../default/typography.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-shoelace {
--wa-font-family-body:
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
--wa-link-decoration-default: underline;
}
}

422
packages/webawesome/src/styles/themes/tailspin.css
View File

@@ -1,45 +1,413 @@
@import url('tailspin/color.css');
@import url('default/space.css');
@import url('default/outlines.css');
@import url('tailspin/typography.css');
@import url('default/rounding.css');
@import url('default/shadows.css');
@import url('default/transitions.css');
@import url('default/groups.css');
@import url('tailspin/overrides.css');
@import url('../color/default.css');
@import url('../brand/indigo.css');
@import url('../success/green.css');
@import url('../warning/yellow.css');
@import url('../danger/red.css');
@import url('../neutral/gray.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
:root,
.wa-theme-tailspin,
.wa-dark,
.wa-light,
.wa-dark .wa-invert {
/* #region Colors (Light) ~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: light;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
--wa-color-surface-lowered: var(--wa-color-neutral-95);
--wa-color-surface-border: var(--wa-color-neutral-90);
--wa-color-text-normal: var(--wa-color-neutral-10);
--wa-color-text-quiet: var(--wa-color-neutral-40);
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-neutral-05) 50%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-80) 25%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.05);
--wa-color-focus: var(--wa-color-brand-50);
--wa-color-mix-hover: var(--wa-color-neutral-80) 20%;
--wa-color-mix-active: var(--wa-color-neutral-80) 10%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-10);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent);
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/* #endregion */
}
.wa-dark,
.wa-invert {
/**
* Spacing
*/
/* #region Colors (Dark) ~~~~~~~~~~~~~~~~~~~~~~ */
color-scheme: dark;
color: var(--wa-color-text-normal);
/* Foundational Colors */
--wa-color-surface-raised: var(--wa-color-neutral-10);
--wa-color-surface-default: var(--wa-color-neutral-05);
--wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
--wa-color-surface-border: rgb(255 255 255 / 0.1);
--wa-color-text-normal: white;
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
--wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-neutral-50) 10%, transparent);
--wa-color-shadow: rgb(0 0 0 / 0.2);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: var(--wa-color-neutral-70) 20%;
--wa-color-mix-active: var(--wa-color-neutral-70) 10%;
/* Semantic Colors */
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: white;
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent);
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
/* #endregion */
}
:root,
.wa-theme-tailspin,
.wa-light,
.wa-dark,
.wa-invert {
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-font-family-body: 'Inter', sans-serif;
--wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: ui-monospace, monospace;
--wa-font-family-longform: ui-serif, serif;
/* Font sizes use a ratio of 1.125 to scale sizes proportionally.
* For larger font sizes, each size is twice 1.125x larger to maximize impact.
* Each value uses `rem` units and is rounded to the nearest whole pixel when rendered. */
--wa-font-size-scale: 0.875;
--wa-font-size-2xs: round(calc(var(--wa-font-size-xs) / 1.125), 1px); /* 9.625px */
--wa-font-size-xs: round(calc(var(--wa-font-size-s) / 1.125), 1px); /* 10.5px */
--wa-font-size-s: round(calc(var(--wa-font-size-m) / 1.125), 1px); /* 12.25px */
--wa-font-size-m: calc(1rem * var(--wa-font-size-scale)); /* 14px */
--wa-font-size-l: round(calc(var(--wa-font-size-m) * 1.125 * 1.125), 1px); /* 17.5px */
--wa-font-size-xl: round(calc(var(--wa-font-size-l) * 1.125 * 1.125), 1px); /* 21.875px */
--wa-font-size-2xl: round(calc(var(--wa-font-size-xl) * 1.125 * 1.125), 1px); /* 28px */
--wa-font-size-3xl: round(calc(var(--wa-font-size-2xl) * 1.125 * 1.125), 1px); /* 35.875px */
--wa-font-size-4xl: round(calc(var(--wa-font-size-3xl) * 1.125 * 1.125), 1px); /* 45.5px */
--wa-font-size-smaller: round(calc(1em / 1.125), 1px);
--wa-font-size-larger: round(calc(1em * 1.125 * 1.125), 1px);
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 700;
--wa-font-weight-body: var(--wa-font-weight-normal);
--wa-font-weight-heading: var(--wa-font-weight-bold);
--wa-font-weight-code: var(--wa-font-weight-normal);
--wa-font-weight-longform: var(--wa-font-weight-normal);
--wa-font-weight-action: var(--wa-font-weight-semibold);
--wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
--wa-link-decoration-default: none;
--wa-link-decoration-hover: none;
/* #endregion */
/* #region Space ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-space-scale: 0.875;
--wa-space-3xs: calc(var(--wa-space-scale) * 0.125rem); /* 1.75px */
--wa-space-2xs: calc(var(--wa-space-scale) * 0.25rem); /* 3.5px */
--wa-space-xs: calc(var(--wa-space-scale) * 0.5rem); /* 7px */
--wa-space-s: calc(var(--wa-space-scale) * 0.75rem); /* 10.5px */
--wa-space-m: calc(var(--wa-space-scale) * 1rem); /* 14px */
--wa-space-l: calc(var(--wa-space-scale) * 1.5rem); /* 21px */
--wa-space-xl: calc(var(--wa-space-scale) * 2rem); /* 28px */
--wa-space-2xl: calc(var(--wa-space-scale) * 2.5rem); /* 35px */
--wa-space-3xl: calc(var(--wa-space-scale) * 3rem); /* 42px */
--wa-space-4xl: calc(var(--wa-space-scale) * 4rem); /* 56px */
/**
* Focus
*/
--wa-focus-ring-width: 0.125rem;
--wa-content-spacing: var(--wa-space-l);
/* #endregion */
/* #region Borders ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-style: solid;
--wa-border-width-scale: 1;
--wa-border-width-s: calc(var(--wa-border-width-scale) * 0.0625rem);
--wa-border-width-m: calc(var(--wa-border-width-scale) * 0.125rem);
--wa-border-width-l: calc(var(--wa-border-width-scale) * 0.1875rem);
/* #endregion */
/* #region Rounding ~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-border-radius-scale: 1;
--wa-border-radius-s: calc(var(--wa-border-radius-scale) * 0.1875rem);
--wa-border-radius-m: calc(var(--wa-border-radius-scale) * 0.375rem);
--wa-border-radius-l: calc(var(--wa-border-radius-scale) * 0.75rem);
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
--wa-border-radius-square: 0px;
/* #endregion */
/* #region Focus ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-focus-ring-style: solid;
--wa-focus-ring-width: 0.125rem; /* 2px */
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
--wa-focus-ring-offset: 0;
/* #endregion */
/* #region Shadows ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
--wa-shadow-offset-x-scale: 0;
--wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-scale) * 0.125rem);
--wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-scale) * 0.25rem);
--wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-scale) * 0.5rem);
/**
* Shadows
*/
--wa-shadow-offset-y-scale: 0.5;
--wa-shadow-offset-blur-scale: 0.5;
--wa-shadow-spread-scale: 0;
--wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-scale) * 0.125rem);
--wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-scale) * 0.25rem);
--wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-scale) * 0.5rem);
/**
* Component Groups
*/
--wa-shadow-blur-scale: 0.5;
--wa-shadow-blur-s: calc(var(--wa-shadow-blur-scale) * 0.125rem);
--wa-shadow-blur-m: calc(var(--wa-shadow-blur-scale) * 0.25rem);
--wa-shadow-blur-l: calc(var(--wa-shadow-blur-scale) * 0.5rem);
--wa-shadow-spread-scale: 0;
--wa-shadow-spread-s: calc(var(--wa-shadow-spread-scale) * 0.125rem);
--wa-shadow-spread-m: calc(var(--wa-shadow-spread-scale) * 0.25rem);
--wa-shadow-spread-l: calc(var(--wa-shadow-spread-scale) * 0.5rem);
--wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
var(--wa-shadow-spread-s) var(--wa-color-shadow);
--wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
var(--wa-shadow-spread-m) var(--wa-color-shadow);
--wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
var(--wa-shadow-spread-l) var(--wa-color-shadow);
/* #endregion */
/* #region Transitions ~~~~~~~~~~~~~~~~~~~~~~ */
--wa-transition-easing: ease;
--wa-transition-slow: 300ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 75ms;
/* #endregion */
/* #region Components ~~~~~~~~~~~~~~~~~~~~~~~ */
/* Form Controls */
--wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
--wa-form-control-border-style: var(--wa-border-style);
--wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-m);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
--wa-form-control-label-color: var(--wa-color-text-normal);
--wa-form-control-label-font-weight: var(--wa-font-weight-semibold);
--wa-form-control-label-line-height: var(--wa-line-height-normal);
--wa-form-control-value-color: var(--wa-color-text-normal);
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
--wa-form-control-hint-color: var(--wa-color-text-quiet);
--wa-form-control-hint-font-weight: var(--wa-font-weight-body);
--wa-form-control-hint-line-height: var(--wa-line-height-normal);
--wa-form-control-placeholder-color: var(--wa-color-gray-50);
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;
--wa-form-control-height: round(
calc(2 * var(--wa-form-control-padding-block) + 1em * var(--wa-form-control-value-line-height)),
1px
);
--wa-form-control-toggle-size: round(1.25em, 1px);
/* Panels */
--wa-panel-border-style: var(--wa-border-style);
--wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-l);
/* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
--wa-tooltip-background-color: var(--wa-color-text-normal);
--wa-tooltip-border-radius: var(--wa-border-radius-s);
--wa-tooltip-content-color: var(--wa-color-surface-default);
--wa-tooltip-font-size: var(--wa-font-size-s);
--wa-tooltip-line-height: var(--wa-line-height-normal);
/* #endregion */
}
}
@layer wa-overrides {
:root,
.wa-theme-tailspin,
.wa-light,
.wa-dark,
.wa-invert {
h1,
h2,
h3,
h4 {
letter-spacing: calc(1em * -0.03);
}
wa-avatar {
--background-color: var(--wa-color-neutral-fill-quiet);
--text-color: var(--wa-color-neutral-on-quiet);
}
a,
wa-badge,
wa-tag {
font-weight: var(--wa-font-weight-semibold);
}
:is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not([appearance='plain']) {
--box-shadow: var(--wa-shadow-s);
}
wa-callout {
border-radius: var(--wa-border-radius-m);
&::part(icon) {
opacity: 0.6;
}
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {
--background-color: var(--wa-color-neutral-fill-normal);
--border-color: transparent;
--height: calc(var(--thumb-size) * (18 / 14));
--thumb-color: white;
--thumb-color-checked: var(--thumb-color);
--thumb-size: 1.25em;
--thumb-shadow: var(--wa-shadow-s);
--width: calc(var(--thumb-size) * (32 / 14));
}
wa-tab {
color: var(--wa-color-text-quiet);
}
}
}

158
packages/webawesome/src/styles/themes/tailspin/color.css
View File

@@ -1,158 +0,0 @@
@import url('../../color/vogue.css');
@import url('../default/color.css');
@import url('../../brand/indigo.css');
@import url('../../success/green.css');
@import url('../../warning/yellow.css');
@import url('../../danger/red.css');
@import url('../../neutral/gray.css');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-tailspin,
.wa-light,
.wa-dark .wa-invert {
/**
* Foundational Colors
*/
--wa-color-text-link: var(--wa-color-brand-40);
--wa-color-shadow: rgb(0 0 0 / 0.05);
--wa-color-focus: var(--wa-color-brand-50);
--wa-color-mix-hover: var(--wa-color-neutral-80) 20%;
--wa-color-mix-active: var(--wa-color-neutral-80) 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-95) 85%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-90);
--wa-color-brand-fill-loud: var(--wa-color-brand-40);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-80), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-70) 60%, transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-60) 70%, transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-40);
--wa-color-brand-on-normal: var(--wa-color-brand-30);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-95) 85%, transparent);
--wa-color-success-fill-normal: var(--wa-color-success-90);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-80), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-70) 60%, transparent);
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-60) 70%, transparent);
--wa-color-success-on-quiet: var(--wa-color-success-40);
--wa-color-success-on-normal: var(--wa-color-success-30);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-95) 85%, transparent);
--wa-color-warning-fill-normal: var(--wa-color-warning-90);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-80), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-70) 60%, transparent);
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-60) 70%, transparent);
--wa-color-warning-on-quiet: var(--wa-color-warning-40);
--wa-color-warning-on-normal: var(--wa-color-warning-30);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-95) 85%, transparent);
--wa-color-danger-fill-normal: var(--wa-color-danger-90);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-80), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-70) 60%, transparent);
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-60) 70%, transparent);
--wa-color-danger-on-quiet: var(--wa-color-danger-40);
--wa-color-danger-on-normal: var(--wa-color-danger-30);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-95) 85%, transparent);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-90);
--wa-color-neutral-fill-loud: var(--wa-color-neutral-10);
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-80), transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-70) 60%, transparent);
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-60) 70%, transparent);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-30);
--wa-color-neutral-on-normal: var(--wa-color-neutral-30);
--wa-color-neutral-on-loud: white;
/**
* Component Groups
*/
--wa-form-control-background-color: color-mix(in oklab, var(--wa-color-surface-raised), transparent);
--wa-form-control-border-color: var(--wa-color-neutral-border-normal);
}
.wa-dark,
.wa-invert {
/**
* Foundational Colors
*/
--wa-color-surface-border: rgb(255 255 255 / 0.1);
--wa-color-text-normal: white;
--wa-color-text-quiet: var(--wa-color-neutral-60);
--wa-color-text-link: var(--wa-color-brand-70);
--wa-color-shadow: rgb(0 0 0 / 0.2);
--wa-color-focus: var(--wa-color-brand-60);
--wa-color-mix-hover: var(--wa-color-neutral-70) 20%;
--wa-color-mix-active: var(--wa-color-neutral-70) 10%;
/**
* Semantic Colors
*/
--wa-color-brand-fill-quiet: color-mix(in oklab, var(--wa-color-brand-10) 90%, transparent);
--wa-color-brand-fill-normal: var(--wa-color-brand-20);
--wa-color-brand-fill-loud: var(--wa-color-brand-50);
--wa-color-brand-border-quiet: color-mix(in oklab, var(--wa-color-brand-20), transparent);
--wa-color-brand-border-normal: color-mix(in oklab, var(--wa-color-brand-30), transparent);
--wa-color-brand-border-loud: color-mix(in oklab, var(--wa-color-brand-40), transparent);
--wa-color-brand-on-quiet: var(--wa-color-brand-60);
--wa-color-brand-on-normal: var(--wa-color-brand-70);
--wa-color-brand-on-loud: white;
--wa-color-success-fill-quiet: color-mix(in oklab, var(--wa-color-success-10) 90%, transparent);
--wa-color-success-fill-normal: var(--wa-color-success-20);
--wa-color-success-fill-loud: var(--wa-color-success-50);
--wa-color-success-border-quiet: color-mix(in oklab, var(--wa-color-success-20), transparent);
--wa-color-success-border-normal: color-mix(in oklab, var(--wa-color-success-30) 60%, transparent);
--wa-color-success-border-loud: color-mix(in oklab, var(--wa-color-success-40) 70%, transparent);
--wa-color-success-on-quiet: var(--wa-color-success-60);
--wa-color-success-on-normal: var(--wa-color-success-70);
--wa-color-success-on-loud: white;
--wa-color-warning-fill-quiet: color-mix(in oklab, var(--wa-color-warning-10) 90%, transparent);
--wa-color-warning-fill-normal: var(--wa-color-warning-20);
--wa-color-warning-fill-loud: var(--wa-color-warning-50);
--wa-color-warning-border-quiet: color-mix(in oklab, var(--wa-color-warning-20), transparent);
--wa-color-warning-border-normal: color-mix(in oklab, var(--wa-color-warning-30) 60%, transparent);
--wa-color-warning-border-loud: color-mix(in oklab, var(--wa-color-warning-40) 70%, transparent);
--wa-color-warning-on-quiet: var(--wa-color-warning-60);
--wa-color-warning-on-normal: var(--wa-color-warning-70);
--wa-color-warning-on-loud: white;
--wa-color-danger-fill-quiet: color-mix(in oklab, var(--wa-color-danger-10) 90%, transparent);
--wa-color-danger-fill-normal: var(--wa-color-danger-20);
--wa-color-danger-fill-loud: var(--wa-color-danger-50);
--wa-color-danger-border-quiet: color-mix(in oklab, var(--wa-color-danger-20), transparent);
--wa-color-danger-border-normal: color-mix(in oklab, var(--wa-color-danger-30) 60%, transparent);
--wa-color-danger-border-loud: color-mix(in oklab, var(--wa-color-danger-40) 70%, transparent);
--wa-color-danger-on-quiet: var(--wa-color-danger-60);
--wa-color-danger-on-normal: var(--wa-color-danger-70);
--wa-color-danger-on-loud: white;
--wa-color-neutral-fill-quiet: color-mix(in oklab, var(--wa-color-neutral-10) 90%, transparent);
--wa-color-neutral-fill-normal: var(--wa-color-neutral-20);
--wa-color-neutral-fill-loud: white;
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-neutral-20), transparent);
--wa-color-neutral-border-normal: color-mix(in oklab, var(--wa-color-neutral-30) 60%, transparent);
--wa-color-neutral-border-loud: color-mix(in oklab, var(--wa-color-neutral-40) 70%, transparent);
--wa-color-neutral-on-quiet: var(--wa-color-neutral-60);
--wa-color-neutral-on-normal: var(--wa-color-neutral-70);
--wa-color-neutral-on-loud: var(--wa-color-neutral-10);
}
}

61
packages/webawesome/src/styles/themes/tailspin/overrides.css
View File

@@ -1,61 +0,0 @@
@layer wa-theme {
:where(:root),
:host,
.wa-theme-tailspin {
h1,
h2,
h3,
h4 {
letter-spacing: calc(1em * -0.03);
}
wa-avatar {
--background-color: var(--wa-color-neutral-fill-quiet);
--text-color: var(--wa-color-neutral-on-quiet);
}
a,
wa-badge,
wa-tag {
font-weight: var(--wa-font-weight-semibold);
}
:is(wa-button, button, input:where([type='button'], [type='reset'], [type='submit'])):not([appearance='plain']) {
--box-shadow: var(--wa-shadow-s);
}
wa-callout {
border-radius: var(--wa-border-radius-m);
&::part(icon) {
opacity: 0.6;
}
}
wa-radio,
input[type='radio'] {
--checked-icon-color: var(--wa-color-surface-default);
--checked-icon-scale: 0.4;
&:checked,
&:state(checked)::part(control) {
background-color: var(--wa-form-control-activated-color);
}
}
wa-switch {
--background-color: var(--wa-color-neutral-fill-normal);
--border-color: transparent;
--height: calc(var(--thumb-size) * (18 / 14));
--thumb-color: white;
--thumb-color-checked: var(--thumb-color);
--thumb-size: 1.25em;
--thumb-shadow: var(--wa-shadow-s);
--width: calc(var(--thumb-size) * (32 / 14));
}
wa-tab {
color: var(--wa-color-text-quiet);
}
}
}

17
packages/webawesome/src/styles/themes/tailspin/typography.css
View File

@@ -1,17 +0,0 @@
@import url('../default/typography.css');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer wa-theme {
:where(:root),
:host,
.wa-theme-tailspin {
--wa-font-family-body: 'Inter', sans-serif;
--wa-font-weight-bold: 700;
--wa-font-size-scale: 0.875;
--wa-link-decoration-default: none;
--wa-link-decoration-hover: none;
}
}