mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 20:19:13 +00:00
Merge branch 'pattern-main' into kj/e-commerce-patterns
This commit is contained in:
Kelsey Jackson
@@ -13,3 +13,4 @@ package-lock.json
|
||||
tsconfig.json
|
||||
cdn
|
||||
_site
|
||||
docs/assets/scripts/prism.js
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default as default } from '../../src/styles/color/palettes-analyzed.js';
|
||||
export { default as default } from '../../src/styles/color/scripts/palettes-analyzed.js';
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
|
||||
{# Docs styles #}
|
||||
<link rel="stylesheet" href="/assets/styles/docs.css" />
|
||||
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body class="layout-{{ layout | stripExtension }}{{ ' page-wide' if wide }}">
|
||||
<!-- use view="desktop" as default to reduce layout jank on desktop site. -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<wa-tab-group>
|
||||
<wa-tab-group class="import-stylesheet-code">
|
||||
<wa-tab panel="html">In HTML</wa-tab>
|
||||
<wa-tab panel="css">In CSS</wa-tab>
|
||||
<wa-tab-panel name="html">
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
{% if pageSubtitle -%}
|
||||
<div class="wa-caption-s">{{ pageSubtitle }}</div>
|
||||
{%- endif %}
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% set paletteId = page.fileSlug %}
|
||||
{% set paletteId = palette.fileSlug or page.fileSlug %}
|
||||
{% set tints = [80, 60, 40, 20] %}
|
||||
{% set width = 20 %}
|
||||
{% set height = 13 %}
|
||||
|
||||
24
docs/_includes/svgs/theme-color.njk
Normal file
24
docs/_includes/svgs/theme-color.njk
Normal file
@@ -0,0 +1,24 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="/dist/styles/utilities.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/color.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-color-icon wa-theme-{{ themeId }}">
|
||||
<div class="wa-brand wa-accent">A</div>
|
||||
<div class="wa-brand wa-outlined">A</div>
|
||||
<div class="wa-brand wa-filled">A</div>
|
||||
<div class="wa-brand wa-plain">A</div>
|
||||
{# <div class="wa-danger wa-outlined wa-filled"><wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon></div> #}
|
||||
|
||||
<div class="wa-neutral wa-accent">A</div>
|
||||
<div class="wa-neutral wa-outlined">A</div>
|
||||
<div class="wa-neutral wa-filled">A</div>
|
||||
<div class="wa-neutral wa-plain">A</div>
|
||||
{# <div class="wa-warning wa-outlined wa-filled"><wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon></div> #}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
16
docs/_includes/svgs/theme-typography.njk
Normal file
16
docs/_includes/svgs/theme-typography.njk
Normal file
@@ -0,0 +1,16 @@
|
||||
{% set themeId = theme.fileSlug %}
|
||||
|
||||
<div>
|
||||
<template shadowrootmode="open">
|
||||
<link rel="stylesheet" href="/dist/styles/native/content.css">
|
||||
<link rel="stylesheet" href="/dist/styles/native/blockquote.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ page.fileSlug or 'default' }}.css">
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ themeId }}/typography.css">
|
||||
<link rel="stylesheet" href="/assets/styles/theme-icons.css">
|
||||
|
||||
<div class="theme-typography-icon wa-theme-{{ themeId }}" data-no-outline data-no-anchor role="presentation">
|
||||
<h3>Title</h3>
|
||||
<p>Body text</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
@@ -93,7 +93,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="outlined">Brand</wa-badge>
|
||||
@@ -495,7 +495,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
@@ -696,7 +696,7 @@
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="test-failure"><code>outlined</code></th>
|
||||
<th><code>outlined</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="outlined">Brand</wa-tag>
|
||||
|
||||
@@ -4,100 +4,143 @@
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{% block head %}
|
||||
<script>
|
||||
globalThis.wa_data ??= {};
|
||||
wa_data.baseTheme = "{{ page.fileSlug }}";
|
||||
wa_data.themes = {
|
||||
{% for theme in collections.theme -%}
|
||||
"{{ theme.fileSlug }}": {
|
||||
"title": "{{ theme.data.title }}",
|
||||
"palette": "{{ theme.data.palette }}",
|
||||
"brand": "{{ theme.data.brand }}"
|
||||
},
|
||||
{% endfor %}
|
||||
};
|
||||
wa_data.palettes = {
|
||||
{% for palette in collections.palette -%}
|
||||
"{{ palette.fileSlug }}": {
|
||||
"title": "{{ palette.data.title }}",
|
||||
},
|
||||
{% endfor %}
|
||||
};
|
||||
</script>
|
||||
<link href="{{ page.url }}../remix.css" rel="stylesheet">
|
||||
<script src="{{ page.url }}../remix.js" type="module"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block header %}
|
||||
|
||||
<iframe src='{{ page.url }}demo.html' id="demo"></iframe>
|
||||
|
||||
<p id="mix_and_match" class="wa-gap-m">
|
||||
<strong>
|
||||
<wa-icon name="merge" slot="prefix"></wa-icon>
|
||||
Remix
|
||||
<wa-icon-button href="#remixing" name="circle-question" slot="suffix" variant="regular" label="How to use?"></wa-icon-button>
|
||||
</strong>
|
||||
<wa-select name="colors" label="Colors from…" size="small">
|
||||
<wa-details id="mix_and_match" class="wa-gap-m" >
|
||||
<h4 slot="summary" data-no-anchor data-no-outline id="remix">
|
||||
<wa-icon name="arrows-rotate"></wa-icon>
|
||||
Remix this theme
|
||||
<wa-icon id="what-is-remixing" href="#remixing" name="circle-question" slot="suffix" variant="regular"></wa-icon>
|
||||
<wa-tooltip for="what-is-remixing">Customize this theme by changing its colors and/or remixing it with design elements from other themes!</wa-tooltip>
|
||||
</h4>
|
||||
|
||||
<wa-select name="colors" label="Colors from…" value="" clearable>
|
||||
<wa-icon name="palette" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% set currentTheme = theme.fileSlug == page.fileSlug %}
|
||||
<wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theme-color.njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ theme.data.title }}
|
||||
{% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="palette" label="Palette" size="small">
|
||||
<wa-select name="palette" label="Palette" clearable>
|
||||
<wa-icon name="swatchbook" slot="prefix" variant="regular"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for p in collections.palette | sort %}
|
||||
{% if p.fileSlug !== palette %}
|
||||
<wa-option value="{{ p.fileSlug }}">{{ p.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% set defaultPalette = palette %}
|
||||
{% for palette in collections.palette | sort %}
|
||||
{% set currentPalette = palette.fileSlug == defaultPalette %}
|
||||
<wa-option label="{{ palette.data.title }}" value="{{ palette.fileSlug if not currentPalette }}" {{ (palette.fileSlug if currentPalette) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/" + (palette.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ palette.data.title }}
|
||||
{% if palette.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentPalette %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
{% set palette = defaultPalette %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="brand" label="Brand color" value="" clearable>
|
||||
<div class="selected-swatch" slot="prefix"></div>
|
||||
{% for hue in hues %}
|
||||
{% set currentBrand = hue == brand %}
|
||||
<wa-option label="{{ hue | capitalize }}" value="{{ hue if not currentBrand }}" {{ (hue if currentBrand) | attr('data-id') }} style="--color: var(--wa-color-{{ hue }})">
|
||||
{{ hue | capitalize }}
|
||||
{% if currentBrand %}<wa-badge variant="neutral" appearance="outlined">Theme default</wa-badge>{% endif %}
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
|
||||
<wa-select name="typography" label="Typography from…" size="small">
|
||||
<wa-select name="typography" label="Typography from…" clearable>
|
||||
<wa-icon name="font-case" slot="prefix"></wa-icon>
|
||||
<wa-option value="">(Theme default)</wa-option>
|
||||
<wa-divider></wa-divider>
|
||||
{% for theme in collections.theme | sort %}
|
||||
{% if theme.fileSlug !== page.fileSlug %}
|
||||
<wa-option value="{{ theme.fileSlug }}">{{ theme.data.title }}</wa-option>
|
||||
{% endif %}
|
||||
{% set currentTheme = theme.fileSlug == page.fileSlug %}
|
||||
<wa-option label="{{ theme.data.title }}" value="{{ theme.fileSlug if not currentTheme }}" {{ (theme.fileSlug if currentTheme) | attr('data-id') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/theme-typography.njk" %}
|
||||
</div>
|
||||
<span class="page-name">
|
||||
{{ theme.data.title }}
|
||||
{% if theme.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
{% if currentTheme %}<wa-badge variant="neutral" appearance="outlined">This theme</wa-badge>{% endif %}
|
||||
</span>
|
||||
</wa-card>
|
||||
</wa-option>
|
||||
{% endfor %}
|
||||
</wa-select>
|
||||
</wa-details>
|
||||
|
||||
|
||||
</p>
|
||||
<script>
|
||||
document.querySelector('#mix_and_match').addEventListener('change', function(event) {
|
||||
let selects = document.querySelectorAll('#mix_and_match wa-select');
|
||||
let url = new URL(demo.src);
|
||||
|
||||
for (let select of selects) {
|
||||
url.searchParams.set(select.name, select.value);
|
||||
}
|
||||
|
||||
demo.src = url;
|
||||
});
|
||||
</script>
|
||||
|
||||
<h2>Default Color Palette</h2>
|
||||
<h2>Color</h2>
|
||||
{% set paletteURL = '/docs/palettes/' + palette + '/' %}
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
<div class="index-grid">
|
||||
{% include 'page-card.njk' %}
|
||||
</div>
|
||||
{% set page = themePage %}
|
||||
|
||||
|
||||
<div class="index-grid">
|
||||
{% set themePage = page %}
|
||||
{% set page = paletteURL | getCollectionItemFromUrl %}
|
||||
{% set pageSubtitle = "Default color palette" %}
|
||||
{% include 'page-card.njk' %}
|
||||
{% set page = themePage %}
|
||||
|
||||
<wa-card style="--header-background: var(--wa-color-{{ brand }})" class="wa-palette-{{ palette }}">
|
||||
<div slot="header"></div>
|
||||
<div class="page-name">{{ brand | capitalize }}</div>
|
||||
<div class="wa-caption-s">Default brand color</div>
|
||||
</wa-card>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block afterContent %}
|
||||
{% markdown %}
|
||||
## How to use this theme
|
||||
|
||||
<h2 id="usage">How to use this theme</h2>
|
||||
|
||||
{% markdown %}
|
||||
You can import this theme from the Web Awesome CDN.
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
### Remixing { #remixing }
|
||||
|
||||
If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
|
||||
|
||||
{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
|
||||
{% include 'import-stylesheet-code.md.njk' %}
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
Please note that not all combinations will look good — once you’re mixing and matching, you’re on your own!
|
||||
</wa-callout>
|
||||
|
||||
## Dark mode
|
||||
|
||||
To activate the dark color scheme of the theme on any element and its contents, apply the class `wa-dark` to it.
|
||||
|
||||
@@ -37,7 +37,8 @@ export function anchorHeadingsPlugin(options = {}) {
|
||||
}
|
||||
|
||||
// Look for headings
|
||||
container.querySelectorAll(options.headingSelector).forEach(heading => {
|
||||
let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
|
||||
container.querySelectorAll(selector).forEach(heading => {
|
||||
const hasAnchor = heading.querySelector('a');
|
||||
const existingId = heading.getAttribute('id');
|
||||
const clone = parse(heading.outerHTML);
|
||||
|
||||
8
docs/assets/scripts/prism.js
Normal file
8
docs/assets/scripts/prism.js
Normal file
File diff suppressed because one or more lines are too long
37
docs/assets/scripts/remix.js
Normal file
37
docs/assets/scripts/remix.js
Normal file
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* Get import code for remixed themes.
|
||||
*/
|
||||
export const urls = {
|
||||
colors: id => `styles/themes/${id}/color.css`,
|
||||
palette: id => `styles/color/${id}.css`,
|
||||
brand: id => `styles/brand/${id}.css`,
|
||||
typography: id => `styles/themes/${id}/typography.css`,
|
||||
};
|
||||
|
||||
function getImport(url, options = {}) {
|
||||
let { language = 'html', cdnUrl = '/dist/', attributes } = options;
|
||||
url = cdnUrl + url;
|
||||
|
||||
if (language === 'css') {
|
||||
return `@import url('${url}');`;
|
||||
} else {
|
||||
attributes = attributes ? ` ${attributes}` : '';
|
||||
return `<link rel="stylesheet" href="${url}"${attributes} />`;
|
||||
}
|
||||
}
|
||||
|
||||
export function getCode(base, params, options) {
|
||||
let ret = [];
|
||||
|
||||
if (base) {
|
||||
ret.push(`styles/themes/${base}.css`);
|
||||
}
|
||||
|
||||
ret.push(
|
||||
...Object.entries(params)
|
||||
.filter(([aspect, id]) => Boolean(id))
|
||||
.map(([aspect, id]) => urls[aspect](id)),
|
||||
);
|
||||
|
||||
return ret.map(url => getImport(url, options)).join('\n');
|
||||
}
|
||||
@@ -360,7 +360,7 @@ wa-page > main:has(> .index-grid) {
|
||||
}
|
||||
|
||||
&::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -543,23 +543,4 @@ table.colors {
|
||||
height: 65vh;
|
||||
max-height: 21lh;
|
||||
}
|
||||
|
||||
#mix_and_match {
|
||||
strong {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-2xs);
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
wa-select::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
wa-select[value='']::part(display-input),
|
||||
wa-option[value=''] {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
34
docs/assets/styles/theme-icons.css
Normal file
34
docs/assets/styles/theme-icons.css
Normal file
@@ -0,0 +1,34 @@
|
||||
.theme-color-icon {
|
||||
display: grid;
|
||||
gap: var(--wa-space-xs);
|
||||
grid-template-columns: repeat(4, auto);
|
||||
|
||||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background-color: var(--background-color);
|
||||
border: var(--wa-border-width-s) var(--wa-border-style) var(--border-color);
|
||||
padding: var(--wa-space-2xs) var(--wa-space-xs);
|
||||
color: var(--text-color);
|
||||
font-weight: var(--wa-font-weight-semibold);
|
||||
|
||||
&.plain {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.theme-typography-icon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--wa-space-xs);
|
||||
|
||||
h3,
|
||||
p {
|
||||
margin-block: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -74,3 +74,15 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
|
||||
<wa-radio value="3">Large 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Hint
|
||||
|
||||
Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-radio-group label="Select an option" name="a" value="1">
|
||||
<wa-radio value="1" hint="What should the user know about radio 1?">Option 1</wa-radio>
|
||||
<wa-radio value="2" hint="What should the user know about radio 2?">Option 2</wa-radio>
|
||||
<wa-radio value="3" hint="What should the user know about radio 3?">Option 3</wa-radio>
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
@@ -130,6 +130,15 @@ Note that multi-select options may wrap, causing the control to expand verticall
|
||||
|
||||
Use the `value` attribute to set the initial selection.
|
||||
|
||||
```html {.example}
|
||||
<wa-select value="option-1">
|
||||
<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-option value="option-4">Option 4</wa-option>
|
||||
</wa-select>
|
||||
```
|
||||
|
||||
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `<wa-option>` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
|
||||
|
||||
```html {.example}
|
||||
@@ -294,7 +303,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
|
||||
return `
|
||||
<wa-tag removable>
|
||||
<wa-icon name="${name}" style="padding-inline-end: .5rem;"></wa-icon>
|
||||
${option.getTextLabel()}
|
||||
${option.label}
|
||||
</wa-tag>
|
||||
`;
|
||||
};
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"tags": ["palettes", "palette"],
|
||||
"eleventyComputed": {
|
||||
"snippet": ".wa-palette-{{ page.fileSlug }}",
|
||||
"icon": "palette"
|
||||
"icon": "palette",
|
||||
"file": "styles/color/{{ page.fileSlug }}.css"
|
||||
}
|
||||
}
|
||||
|
||||
1
docs/docs/themes/active.md
vendored
1
docs/docs/themes/active.md
vendored
@@ -4,4 +4,5 @@ description: Energetic and tactile, always in motion.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: rudimentary
|
||||
brand: green
|
||||
---
|
||||
|
||||
1
docs/docs/themes/awesome.md
vendored
1
docs/docs/themes/awesome.md
vendored
@@ -3,4 +3,5 @@ title: Awesome
|
||||
description: Punchy and vibrant, the rockstar of themes.
|
||||
order: 0.2
|
||||
palette: bright
|
||||
brand: blue
|
||||
---
|
||||
|
||||
1
docs/docs/themes/brutalist.md
vendored
1
docs/docs/themes/brutalist.md
vendored
@@ -4,4 +4,5 @@ description: Sharp, square, and unapologetically bold.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: default
|
||||
brand: blue
|
||||
---
|
||||
|
||||
1
docs/docs/themes/default.md
vendored
1
docs/docs/themes/default.md
vendored
@@ -3,4 +3,5 @@ title: Default
|
||||
description: Your trusty companion, like a perfectly broken-in pair of jeans.
|
||||
order: 0
|
||||
palette: default
|
||||
brand: blue
|
||||
---
|
||||
|
||||
39
docs/docs/themes/demo.njk
vendored
39
docs/docs/themes/demo.njk
vendored
@@ -11,7 +11,6 @@ eleventyComputed:
|
||||
forceTheme: "{{ theme.fileSlug }}"
|
||||
---
|
||||
|
||||
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.fileSlug }}.css" />
|
||||
<link rel="stylesheet" href="/docs/themes/showcase.css" />
|
||||
|
||||
{% set content %}
|
||||
@@ -34,35 +33,45 @@ eleventyComputed:
|
||||
</div>
|
||||
</wa-image-comparer>
|
||||
|
||||
<script>
|
||||
<script type="module">
|
||||
import { getCode, urls as stylesheetURLs } from "/assets/scripts/remix.js";
|
||||
|
||||
function updateTheme() {
|
||||
let params = new URLSearchParams(window.location.search);
|
||||
let script = document.currentScript;
|
||||
const stylesheetURLs = {
|
||||
colors: id => `/dist/styles/themes/${ id }/color.css`,
|
||||
palette: id => `/dist/styles/color/${ id }.css`,
|
||||
typography: id => `/dist/styles/themes/${ id }/typography.css`
|
||||
params = Object.fromEntries(params.entries());
|
||||
|
||||
const docsURLs = {
|
||||
colors: '/docs/themes/',
|
||||
palette: '/docs/palettes/',
|
||||
typography: '/docs/themes/'
|
||||
};
|
||||
const icons = {
|
||||
colors: 'palette',
|
||||
palette: 'swatchbook',
|
||||
brand: 'droplet',
|
||||
typography: 'font-case'
|
||||
}
|
||||
};
|
||||
|
||||
for (let link of document.querySelectorAll('link.mix-and-match')) {
|
||||
link.remove();
|
||||
}
|
||||
|
||||
let msgs = [];
|
||||
let code = getCode("{{ theme.fileSlug }}", params, {attributes: 'class="mix-and-match"'});
|
||||
document.head.insertAdjacentHTML('beforeend', code);
|
||||
|
||||
for (let name in stylesheetURLs) {
|
||||
if (params.get(name)) {
|
||||
let url = stylesheetURLs[name](params.get(name));
|
||||
script.insertAdjacentHTML('afterend', `<link rel="stylesheet" href="${ url }" class="mix-and-match" />`);
|
||||
let docsURL = (name === 'palette' ? '/docs/palettes/' : '/docs/themes/') + params.get(name) + '/';
|
||||
let title = params.get(name).replace(/^[a-z]/g, c => c.toUpperCase());
|
||||
let override = params[name];
|
||||
if (override) {
|
||||
let docsURL = docsURLs[name] ? docsURLs[name] + override + '/' : '';
|
||||
let title = override.replace(/^[a-z]/g, c => c.toUpperCase());
|
||||
|
||||
if (docsURL) {
|
||||
title = `<a href="${ docsURL }">${ title }</a>`;
|
||||
}
|
||||
|
||||
let icon = icons[name];
|
||||
msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> <a href="${ docsURL }">${ title }</a>`);
|
||||
msgs.push(`<wa-icon name="${icon}" variant="regular"></wa-icon> ${ title }`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,7 +79,7 @@ function updateTheme() {
|
||||
p.hidden = msgs.length === 0;
|
||||
if (msgs.length) {
|
||||
let icon =
|
||||
p.innerHTML = `<strong><wa-icon name="merge"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
p.innerHTML = `<strong><wa-icon name="arrows-rotate"></wa-icon> Remixed</strong> ` + msgs.map(msg => `<wa-badge appearance=outlined>
|
||||
${ msg }</wa-badge>`).join(' ');
|
||||
}
|
||||
}
|
||||
|
||||
1
docs/docs/themes/glossy.md
vendored
1
docs/docs/themes/glossy.md
vendored
@@ -4,4 +4,5 @@ description: Bustling with plenty of luster and shine.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: elegant
|
||||
brand: indigo
|
||||
---
|
||||
|
||||
1
docs/docs/themes/matter.md
vendored
1
docs/docs/themes/matter.md
vendored
@@ -4,6 +4,7 @@ description: Digital design inspired by the real world.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: mild
|
||||
brand: indigo
|
||||
---
|
||||
|
||||
Set the page theme to "{{ title }}" from the top right to preview the following examples.
|
||||
|
||||
1
docs/docs/themes/playful.md
vendored
1
docs/docs/themes/playful.md
vendored
@@ -4,4 +4,5 @@ description: Cheerful and engaging, like a playground on screen.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: rudimentary
|
||||
brand: purple
|
||||
---
|
||||
|
||||
1
docs/docs/themes/premium.md
vendored
1
docs/docs/themes/premium.md
vendored
@@ -4,4 +4,5 @@ description: The ultimate in sophistication and style.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: anodized
|
||||
brand: cyan
|
||||
---
|
||||
|
||||
127
docs/docs/themes/remix.css
vendored
Normal file
127
docs/docs/themes/remix.css
vendored
Normal file
@@ -0,0 +1,127 @@
|
||||
#mix_and_match {
|
||||
margin-block-end: var(--wa-space-2xl);
|
||||
|
||||
&::part(content) {
|
||||
display: flex;
|
||||
gap: var(--wa-space-xl);
|
||||
padding-block-start: var(--wa-space-m);
|
||||
}
|
||||
|
||||
> [slot='summary'] {
|
||||
margin: 0;
|
||||
|
||||
wa-icon:first-of-type {
|
||||
vertical-align: -0.15em;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
wa-icon#what-is-remixing {
|
||||
vertical-align: -0.1em;
|
||||
font-size: var(--wa-font-size-s);
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-select {
|
||||
&::part(label) {
|
||||
margin-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
wa-select:has(> wa-option > wa-card) {
|
||||
&::part(listbox) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
width: min(90vw, 800px);
|
||||
}
|
||||
|
||||
&:state(blank)::part(display-input) {
|
||||
font-style: italic;
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
wa-option:has(> wa-card) {
|
||||
position: relative;
|
||||
padding: var(--wa-space-smaller);
|
||||
|
||||
&::part(checked-icon) {
|
||||
position: absolute;
|
||||
inset-block-start: calc(var(--wa-space-smaller) - 0.5em);
|
||||
inset-inline-end: calc(var(--wa-space-smaller) - 0.5em);
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
line-height: 1em;
|
||||
padding: 0.4em;
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
text-align: center;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--spacing: var(--wa-space-smaller);
|
||||
|
||||
&::part(body) {
|
||||
background: var(--wa-color-neutral-fill-quiet);
|
||||
padding-block: var(--wa-space-s);
|
||||
}
|
||||
}
|
||||
|
||||
&:state(current),
|
||||
&:state(hover),
|
||||
&:state(selected),
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
wa-card {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 var(--wa-border-width-m) var(--wa-color-brand-border-normal);
|
||||
}
|
||||
}
|
||||
|
||||
&[aria-selected='true'] {
|
||||
wa-card {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 var(--wa-border-width-m) var(--wa-color-brand-border-loud);
|
||||
|
||||
&::part(body) {
|
||||
background: var(--wa-color-brand-fill-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selected-swatch,
|
||||
wa-select[name='brand'] wa-option::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
aspect-ratio: 1;
|
||||
flex: none;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
background: var(--color);
|
||||
border: 1px solid var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
wa-select[name='brand'] wa-option {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
width: 1em;
|
||||
margin-inline: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
&::part(checked-icon) {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#test_select wa-option:state(selected) {
|
||||
outline: 2px solid red;
|
||||
background: yellow;
|
||||
}
|
||||
171
docs/docs/themes/remix.js
vendored
Normal file
171
docs/docs/themes/remix.js
vendored
Normal file
@@ -0,0 +1,171 @@
|
||||
import { getCode } from '/assets/scripts/remix.js';
|
||||
|
||||
await Promise.all(['wa-select', 'wa-option', 'wa-details'].map(tag => customElements.whenDefined(tag)));
|
||||
globalThis.Prism = globalThis.Prism || {};
|
||||
globalThis.Prism.manual = true;
|
||||
await import('/assets/scripts/prism.js');
|
||||
Prism.plugins.customClass.prefix('code-');
|
||||
|
||||
const cdnUrl = document.documentElement.dataset.cdnUrl;
|
||||
|
||||
const domChange = document.startViewTransition ? document.startViewTransition.bind(document) : fn => fn();
|
||||
|
||||
let selects, data, codeSnippets;
|
||||
|
||||
let computed = {
|
||||
get isRemixed() {
|
||||
return Object.values(data.params).filter(Boolean).length > 0;
|
||||
},
|
||||
get palette() {
|
||||
return data.params.palette || data.defaultParams.palette;
|
||||
},
|
||||
get brand() {
|
||||
return data.params.brand || data.defaultParams.brand;
|
||||
},
|
||||
};
|
||||
|
||||
function selectsChanged(event) {
|
||||
data.params[event.target.name] = event.target.value;
|
||||
render(event.target.name);
|
||||
}
|
||||
|
||||
function init() {
|
||||
selects = Object.fromEntries(
|
||||
[...document.querySelectorAll('#mix_and_match wa-select')].map(select => [select.getAttribute('name'), select]),
|
||||
);
|
||||
|
||||
codeSnippets = document.querySelector('#usage ~ wa-tab-group.import-stylesheet-code:first-of-type');
|
||||
codeSnippets = {
|
||||
html: codeSnippets.querySelector('code.language-html'),
|
||||
css: codeSnippets.querySelector('code.language-css'),
|
||||
};
|
||||
|
||||
data = {
|
||||
baseTheme: wa_data.baseTheme,
|
||||
themes: wa_data.themes,
|
||||
palettes: wa_data.palettes,
|
||||
defaultParams: {
|
||||
colors: '',
|
||||
get palette() {
|
||||
let colors = data.params.colors || data.baseTheme;
|
||||
return data.themes[colors].palette;
|
||||
},
|
||||
get brand() {
|
||||
let colors = data.params.colors || data.baseTheme;
|
||||
return data.themes[colors].brand;
|
||||
},
|
||||
typography: '',
|
||||
},
|
||||
params: { colors: '', palette: '', brand: '', typography: '' },
|
||||
urlParams: new URLSearchParams(location.search),
|
||||
};
|
||||
|
||||
// Read URL params and apply them. This facilitates permalinks.
|
||||
if (location.search) {
|
||||
for (let aspect in data.params) {
|
||||
if (data.urlParams.has(aspect)) {
|
||||
data.params[aspect] = data.urlParams.get(aspect);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (computed.isRemixed) {
|
||||
// Start with the remixing UI open if the theme has been remixed
|
||||
mix_and_match.setAttribute('open', '');
|
||||
mix_and_match.open = true;
|
||||
}
|
||||
|
||||
for (let name in selects) {
|
||||
selects[name].addEventListener('change', selectsChanged);
|
||||
}
|
||||
|
||||
Promise.all(Object.values(selects).map(select => select.updateComplete)).then(() => render());
|
||||
|
||||
return { selects, codeSnippets, data, computed, render };
|
||||
}
|
||||
|
||||
globalThis.remixApp = init();
|
||||
|
||||
// Async load CSS for other themes *before* current theme stylesheet
|
||||
let themeStylesheet = document.querySelector('#theme-stylesheet');
|
||||
|
||||
for (const theme in data.themes) {
|
||||
themeStylesheet.insertAdjacentHTML(
|
||||
'beforebegin',
|
||||
`<link rel="preload" as="style" href="/dist/styles/themes/${theme}/color.css" onload="this.rel = 'stylesheet'" />
|
||||
<link rel="preload" as="style" href="/dist/styles/themes/${theme}/typography.css" onload="this.rel = 'stylesheet'" />`,
|
||||
);
|
||||
}
|
||||
|
||||
for (const palette in data.palettes) {
|
||||
themeStylesheet.insertAdjacentHTML(
|
||||
'beforebegin',
|
||||
`<link rel="preload" as="style" href="/dist/styles/color/${palette}.css" onload="this.rel = 'stylesheet'" />`,
|
||||
);
|
||||
}
|
||||
|
||||
function setDefault(select, value) {
|
||||
let oldDefaultOption = select.querySelector(`wa-option[value=""]:not([data-id="${value}"])`);
|
||||
let newDefaultOption = select.querySelector(`wa-option[value="${value}"]`);
|
||||
|
||||
if (oldDefaultOption) {
|
||||
oldDefaultOption.value = oldDefaultOption.dataset.id;
|
||||
}
|
||||
|
||||
if (newDefaultOption) {
|
||||
newDefaultOption.dataset.id ??= newDefaultOption.value;
|
||||
newDefaultOption.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function render(changedAspect) {
|
||||
let url = new URL(demo.src);
|
||||
|
||||
if (!changedAspect || changedAspect === 'colors') {
|
||||
// Update the default palette when the theme colors change to the default palette of that theme
|
||||
setDefault(selects.palette, data.defaultParams.palette);
|
||||
setDefault(selects.brand, data.defaultParams.brand);
|
||||
}
|
||||
|
||||
let brand = data.params.brand || data.defaultParams.brand;
|
||||
selects.brand.style.setProperty('--color', `var(--wa-color-${brand})`);
|
||||
selects.brand.className = `wa-palette-${computed.palette}`;
|
||||
|
||||
for (let aspect in data.params) {
|
||||
let value = data.params[aspect];
|
||||
|
||||
if (value) {
|
||||
data.urlParams.set(aspect, value);
|
||||
} else {
|
||||
data.urlParams.delete(aspect);
|
||||
}
|
||||
|
||||
selects[aspect].value = value;
|
||||
}
|
||||
|
||||
// Update demo URL
|
||||
domChange(() => {
|
||||
url.search = data.urlParams;
|
||||
demo.src = url;
|
||||
return new Promise(resolve => (demo.onload = resolve));
|
||||
});
|
||||
|
||||
// Update page URL. If there’s already a search, replace it.
|
||||
// We don’t want to clog the user’s history while they iterate
|
||||
let historyAction = location.search ? 'replaceState' : 'pushState';
|
||||
history[historyAction](null, '', `?${data.urlParams}`);
|
||||
|
||||
// Update code snippets
|
||||
for (let language in codeSnippets) {
|
||||
let codeSnippet = codeSnippets[language];
|
||||
let copyButton = codeSnippet.previousElementSibling;
|
||||
let code = getCode(data.baseTheme, data.params, { language, cdnUrl });
|
||||
codeSnippet.textContent = code;
|
||||
copyButton.value = code;
|
||||
Prism.highlightElement(codeSnippet);
|
||||
}
|
||||
}
|
||||
|
||||
addEventListener('turbo:render', event => {
|
||||
remixApp = init();
|
||||
});
|
||||
13
docs/docs/themes/showcase.css
vendored
13
docs/docs/themes/showcase.css
vendored
@@ -14,7 +14,18 @@ body,
|
||||
color: var(--wa-color-text-quiet);
|
||||
|
||||
wa-icon {
|
||||
vertical-align: middle;
|
||||
vertical-align: -0.15em;
|
||||
}
|
||||
|
||||
> strong {
|
||||
margin-inline-end: var(--wa-space-2xs);
|
||||
}
|
||||
|
||||
wa-badge {
|
||||
> a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
1
docs/docs/themes/tailspin.md
vendored
1
docs/docs/themes/tailspin.md
vendored
@@ -4,4 +4,5 @@ description: Like a bird in flight, guiding you from there to here.
|
||||
isPro: true
|
||||
tags: pro
|
||||
palette: vogue
|
||||
brand: indigo
|
||||
---
|
||||
|
||||
6
docs/docs/themes/themes.json
vendored
6
docs/docs/themes/themes.json
vendored
@@ -1,5 +1,9 @@
|
||||
{
|
||||
"layout": "theme.njk",
|
||||
"wide": true,
|
||||
"tags": ["themes", "theme"]
|
||||
"tags": ["themes", "theme"],
|
||||
"brand": "blue",
|
||||
"eleventyComputed": {
|
||||
"file": "styles/themes/{{ page.fileSlug }}.css"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
|
||||
--spacing: var(--wa-space);
|
||||
--border-width: var(--wa-panel-border-width);
|
||||
--border-color: var(--wa-color-surface-border);
|
||||
--border-radius: var(--wa-panel-border-radius);
|
||||
|
||||
--inner-border-radius: calc(var(--border-radius) - var(--border-width));
|
||||
@@ -12,7 +13,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
border-color: var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
border-style: var(--wa-panel-border-style);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
@@ -20,12 +21,20 @@
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
/* Take care of top and bottom radii */
|
||||
.image,
|
||||
:host(:not([with-image])) .header {
|
||||
:host(:not([with-image])) .header,
|
||||
:host(:not([with-image], [with-header])) .body {
|
||||
border-start-start-radius: var(--inner-border-radius);
|
||||
border-start-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
:host(:not([with-footer])) .body,
|
||||
.footer {
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-end-end-radius: var(--inner-border-radius);
|
||||
}
|
||||
|
||||
.image {
|
||||
display: flex;
|
||||
|
||||
@@ -39,7 +48,9 @@
|
||||
|
||||
.header {
|
||||
display: block;
|
||||
border-bottom: inherit;
|
||||
border-block-end-style: inherit;
|
||||
border-block-end-color: var(--border-color);
|
||||
border-block-end-width: var(--border-width);
|
||||
padding: calc(var(--spacing) / 2) var(--spacing);
|
||||
}
|
||||
|
||||
@@ -50,9 +61,9 @@
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
border-top: inherit;
|
||||
border-end-start-radius: var(--inner-border-radius);
|
||||
border-end-end-radius: var(--inner-border-radius);
|
||||
border-block-start-style: inherit;
|
||||
border-block-start-color: var(--border-color);
|
||||
border-block-start-width: var(--border-width);
|
||||
padding: var(--spacing);
|
||||
}
|
||||
|
||||
|
||||
@@ -21,9 +21,10 @@ import styles from './card.css';
|
||||
* @csspart body - The container that wraps the card's main content.
|
||||
* @csspart footer - The container that wraps the card's footer.
|
||||
*
|
||||
* @cssproperty --border-radius - The radius for the card's corners. Expects a single value. Defaults to `var(--wa-panel-border-radius)`.
|
||||
* @cssproperty --border-width - The width of the card's borders. Expects a single value. Defaults to `var(--wa-panel-border-width)`.
|
||||
* @cssproperty --spacing - The amount of space around and between sections of the card. Expects a single value. Defaults to `var(--wa-space)`.
|
||||
* @cssproperty [--border-radius=var(--wa-panel-border-radius)] - The radius for the card's corners. Expects a single value.
|
||||
* @cssproperty [--border-color=var(--wa-color-surface-border)] - The color of the card's borders, including inner borders. Expects a single value.
|
||||
* @cssproperty [--border-width=var(--wa-panel-border-width)] - The width of the card's borders. Expects a single value.
|
||||
* @cssproperty [--spacing=var(--wa-space)] - The amount of space around and between sections of the card. Expects a single value.
|
||||
*/
|
||||
@customElement('wa-card')
|
||||
export default class WaCard extends WebAwesomeElement {
|
||||
|
||||
@@ -127,7 +127,7 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
@property({ type: Boolean, reflect: true }) required = false;
|
||||
|
||||
/** The checkbox's hint. If you need to display HTML, use the `hint` slot instead. */
|
||||
@property({ attribute: 'hint' }) hint = '';
|
||||
@property() hint = '';
|
||||
|
||||
private handleClick() {
|
||||
this.hasInteracted = true;
|
||||
|
||||
@@ -60,9 +60,16 @@ describe('<wa-menu-item>', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('should return a text label when calling getTextLabel()', async () => {
|
||||
it('defaultLabel should return a text label', async () => {
|
||||
const el = await fixture<WaMenuItem>(html` <wa-menu-item>Test</wa-menu-item> `);
|
||||
expect(el.getTextLabel()).to.equal('Test');
|
||||
expect(el.defaultLabel).to.equal('Test');
|
||||
expect(el.label).to.equal('Test');
|
||||
});
|
||||
|
||||
it('label attribute should override default label', async () => {
|
||||
const el = await fixture<WaMenuItem>(html` <wa-menu-item label="Manual label">Text content</wa-menu-item> `);
|
||||
expect(el.defaultLabel).to.equal('Text content');
|
||||
expect(el.label).to.equal('Manual label');
|
||||
});
|
||||
|
||||
it('should emit the slotchange event when the label changes', async () => {
|
||||
@@ -107,7 +114,7 @@ describe('<wa-menu-item>', () => {
|
||||
expect(submenuSlot.hidden).to.be.true;
|
||||
});
|
||||
|
||||
it('should render an wa-popup if the slot="submenu" attribute is present', async () => {
|
||||
it('should render a wa-popup if the slot="submenu" attribute is present', async () => {
|
||||
const menu = await fixture<WaMenuItem>(html`
|
||||
<wa-menu>
|
||||
<wa-menu-item id="test">
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { getTextContent } from '../../internal/slot.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import getText from '../../internal/get-text.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
@@ -43,7 +42,6 @@ import { SubmenuController } from './submenu-controller.js';
|
||||
export default class WaMenuItem extends WebAwesomeElement {
|
||||
static shadowStyle = styles;
|
||||
|
||||
private cachedTextLabel: string;
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
@query('slot:not([name])') defaultSlot: HTMLSlotElement;
|
||||
@@ -64,6 +62,36 @@ export default class WaMenuItem extends WebAwesomeElement {
|
||||
/** Draws the menu item in a disabled state, preventing selection. */
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
_label: string = '';
|
||||
/**
|
||||
* The option’s plain text label.
|
||||
* Usually automatically generated, but can be useful to provide manually for cases involving complex content.
|
||||
*/
|
||||
@property()
|
||||
set label(value) {
|
||||
const oldValue = this._label;
|
||||
this._label = value || '';
|
||||
|
||||
if (this._label !== oldValue) {
|
||||
this.requestUpdate('label', oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
get label(): string {
|
||||
if (this._label) {
|
||||
return this._label;
|
||||
}
|
||||
|
||||
if (!this.defaultLabel) {
|
||||
this.updateDefaultLabel();
|
||||
}
|
||||
|
||||
return this.defaultLabel;
|
||||
}
|
||||
|
||||
/** The default label, generated from the element contents. Will be equal to `label` in most cases. */
|
||||
@state() defaultLabel = '';
|
||||
|
||||
/**
|
||||
* Used for SSR purposes. If true, will render a ">" caret icon for showing that it has a submenu, but will be non-interactive.
|
||||
*/
|
||||
@@ -75,6 +103,7 @@ export default class WaMenuItem extends WebAwesomeElement {
|
||||
super.connectedCallback();
|
||||
this.addEventListener('click', this.handleHostClick);
|
||||
this.addEventListener('mouseover', this.handleMouseOver);
|
||||
this.updateDefaultLabel();
|
||||
}
|
||||
|
||||
disconnectedCallback() {
|
||||
@@ -93,17 +122,10 @@ export default class WaMenuItem extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
private handleDefaultSlotChange() {
|
||||
const textLabel = this.getTextLabel();
|
||||
|
||||
// Ignore the first time the label is set
|
||||
if (typeof this.cachedTextLabel === 'undefined') {
|
||||
this.cachedTextLabel = textLabel;
|
||||
return;
|
||||
}
|
||||
let labelChanged = this.updateDefaultLabel();
|
||||
|
||||
// When the label changes, emit a slotchange event so parent controls see it
|
||||
if (textLabel !== this.cachedTextLabel) {
|
||||
this.cachedTextLabel = textLabel;
|
||||
if (labelChanged) {
|
||||
/** @internal - prevent the CEM from recording this event */
|
||||
this.dispatchEvent(new Event('slotchange', { bubbles: true, composed: false, cancelable: false }));
|
||||
}
|
||||
@@ -122,41 +144,48 @@ export default class WaMenuItem extends WebAwesomeElement {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
@watch('checked')
|
||||
handleCheckedChange() {
|
||||
// For proper accessibility, users have to use type="checkbox" to use the checked attribute
|
||||
if (this.checked && this.type !== 'checkbox') {
|
||||
this.checked = false;
|
||||
return;
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has('checked')) {
|
||||
// For proper accessibility, users have to use type="checkbox" to use the checked attribute
|
||||
if (this.checked && this.type !== 'checkbox') {
|
||||
this.checked = false;
|
||||
return;
|
||||
}
|
||||
|
||||
// Only checkbox types can receive the aria-checked attribute
|
||||
if (this.type === 'checkbox') {
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
} else {
|
||||
this.removeAttribute('aria-checked');
|
||||
}
|
||||
}
|
||||
|
||||
// Only checkbox types can receive the aria-checked attribute
|
||||
if (this.type === 'checkbox') {
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
} else {
|
||||
this.removeAttribute('aria-checked');
|
||||
if (changedProperties.has('disabled')) {
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
}
|
||||
|
||||
if (changedProperties.has('type')) {
|
||||
if (this.type === 'checkbox') {
|
||||
this.setAttribute('role', 'menuitemcheckbox');
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
} else {
|
||||
this.setAttribute('role', 'menuitem');
|
||||
this.removeAttribute('aria-checked');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@watch('disabled')
|
||||
handleDisabledChange() {
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
}
|
||||
private updateDefaultLabel() {
|
||||
let oldValue = this.defaultLabel;
|
||||
this.defaultLabel = getText(this).trim();
|
||||
let changed = this.defaultLabel !== oldValue;
|
||||
|
||||
@watch('type')
|
||||
handleTypeChange() {
|
||||
if (this.type === 'checkbox') {
|
||||
this.setAttribute('role', 'menuitemcheckbox');
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
} else {
|
||||
this.setAttribute('role', 'menuitem');
|
||||
this.removeAttribute('aria-checked');
|
||||
if (!this._label && changed) {
|
||||
// Uses default label, and it has changed
|
||||
this.requestUpdate('label', oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns a text label based on the contents of the menu item's default slot. */
|
||||
getTextLabel() {
|
||||
return getTextContent(this.defaultSlot);
|
||||
return changed;
|
||||
}
|
||||
|
||||
isSubmenu() {
|
||||
|
||||
@@ -23,6 +23,7 @@ describe('<wa-option>', () => {
|
||||
|
||||
expect(el.value).to.equal('');
|
||||
expect(el.disabled).to.be.false;
|
||||
expect(el.label).to.equal('Test');
|
||||
expect(el.getAttribute('aria-disabled')).to.equal('false');
|
||||
});
|
||||
|
||||
@@ -44,9 +45,16 @@ describe('<wa-option>', () => {
|
||||
expect(el.value).to.equal('10');
|
||||
});
|
||||
|
||||
it('should escape HTML when calling getTextLabel()', async () => {
|
||||
it('defaultLabel should escape HTML', async () => {
|
||||
const el = await fixture<WaOption>(html` <wa-option><strong>Option</strong></wa-option> `);
|
||||
expect(el.getTextLabel()).to.equal('Option');
|
||||
expect(el.defaultLabel).to.equal('Option');
|
||||
expect(el.label).to.equal('Option');
|
||||
});
|
||||
|
||||
it('label attribute should override default label', async () => {
|
||||
const el = await fixture<WaOption>(html` <wa-option label="Manual label">Text content</wa-option> `);
|
||||
expect(el.defaultLabel).to.equal('Text content');
|
||||
expect(el.label).to.equal('Manual label');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import getText from '../../internal/get-text.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
@@ -42,7 +43,9 @@ export default class WaOption extends WebAwesomeElement {
|
||||
|
||||
@query('.label') defaultSlot: HTMLSlotElement;
|
||||
|
||||
// Set via the parent select
|
||||
@state() current = false;
|
||||
|
||||
@state() selected = false;
|
||||
|
||||
/**
|
||||
@@ -55,6 +58,36 @@ export default class WaOption extends WebAwesomeElement {
|
||||
/** Draws the option in a disabled state, preventing selection. */
|
||||
@property({ type: Boolean, reflect: true }) disabled = false;
|
||||
|
||||
_label: string = '';
|
||||
/**
|
||||
* The option’s plain text label.
|
||||
* Usually automatically generated, but can be useful to provide manually for cases involving complex content.
|
||||
*/
|
||||
@property()
|
||||
set label(value) {
|
||||
const oldValue = this._label;
|
||||
this._label = value || '';
|
||||
|
||||
if (this._label !== oldValue) {
|
||||
this.requestUpdate('label', oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
get label(): string {
|
||||
if (this._label) {
|
||||
return this._label;
|
||||
}
|
||||
|
||||
if (!this.defaultLabel) {
|
||||
this.updateDefaultLabel();
|
||||
}
|
||||
|
||||
return this.defaultLabel;
|
||||
}
|
||||
|
||||
/** The default label, generated from the element contents. Will be equal to `label` in most cases. */
|
||||
@state() defaultLabel = '';
|
||||
|
||||
connectedCallback() {
|
||||
super.connectedCallback();
|
||||
this.setAttribute('role', 'option');
|
||||
@@ -62,6 +95,7 @@ export default class WaOption extends WebAwesomeElement {
|
||||
|
||||
this.addEventListener('mouseenter', this.handleHover);
|
||||
this.addEventListener('mouseleave', this.handleHover);
|
||||
this.updateDefaultLabel();
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
@@ -72,6 +106,8 @@ export default class WaOption extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
private handleDefaultSlotChange() {
|
||||
this.updateDefaultLabel();
|
||||
|
||||
if (this.isInitialized) {
|
||||
// When the label changes, tell the controller to update
|
||||
customElements.whenDefined('wa-select').then(() => {
|
||||
@@ -119,6 +155,8 @@ export default class WaOption extends WebAwesomeElement {
|
||||
console.error(`Option values cannot include a space. All spaces have been replaced with underscores.`, this);
|
||||
this.value = this.value.replace(/ /g, '_');
|
||||
}
|
||||
|
||||
this.handleDefaultSlotChange();
|
||||
}
|
||||
|
||||
if (changedProperties.has('current')) {
|
||||
@@ -126,24 +164,17 @@ export default class WaOption extends WebAwesomeElement {
|
||||
}
|
||||
}
|
||||
|
||||
/** Returns a plain text label based on the option's content. */
|
||||
getTextLabel() {
|
||||
const nodes = this.childNodes;
|
||||
let label = '';
|
||||
private updateDefaultLabel() {
|
||||
let oldValue = this.defaultLabel;
|
||||
this.defaultLabel = getText(this).trim();
|
||||
let changed = this.defaultLabel !== oldValue;
|
||||
|
||||
[...nodes].forEach(node => {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
if (!(node as HTMLElement).hasAttribute('slot')) {
|
||||
label += (node as HTMLElement).textContent;
|
||||
}
|
||||
}
|
||||
if (!this._label && changed) {
|
||||
// Uses default label, and it has changed
|
||||
this.requestUpdate('label', oldValue);
|
||||
}
|
||||
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
label += node.textContent;
|
||||
}
|
||||
});
|
||||
|
||||
return label.trim();
|
||||
return changed;
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
:host(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.radio {
|
||||
display: flex;
|
||||
:host {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: top;
|
||||
font: inherit;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:host(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.checked-icon {
|
||||
display: flex;
|
||||
fill: currentColor;
|
||||
@@ -19,6 +19,11 @@
|
||||
}
|
||||
|
||||
/* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
|
||||
.radio:not(.radio--checked) svg circle {
|
||||
:host(:not(:state(checked))) svg circle {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[part~='hint'] {
|
||||
grid-column: 2;
|
||||
margin-block-start: var(--wa-space-3xs);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html, isServer } from 'lit';
|
||||
import { customElement, property, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js';
|
||||
import nativeStyles from '../../styles/native/radio.css';
|
||||
import formControlStyles from '../../styles/shadow/form-control.css';
|
||||
import sizeStyles from '../../styles/utilities/size.css';
|
||||
import '../icon/icon.js';
|
||||
import styles from './radio.css';
|
||||
@@ -17,14 +19,15 @@ import styles from './radio.css';
|
||||
* @dependency wa-icon
|
||||
*
|
||||
* @slot - The radio's label.
|
||||
* @slot hint - Text that describes how to use the checkbox. Alternatively, you can use the `hint` attribute.
|
||||
*
|
||||
* @event blur - Emitted when the control loses focus.
|
||||
* @event focus - Emitted when the control gains focus.
|
||||
*
|
||||
* @csspart base - The component's base wrapper.
|
||||
* @csspart control - The circular container that wraps the radio's checked state.
|
||||
* @csspart checked-icon - The checked icon.
|
||||
* @csspart label - The container that wraps the radio's label.
|
||||
* @csspart hint - The hint's wrapper.
|
||||
*
|
||||
* @cssproperty --background-color - The radio's background color.
|
||||
* @cssproperty --background-color-checked - The radio's background color when checked.
|
||||
@@ -42,7 +45,7 @@ import styles from './radio.css';
|
||||
*/
|
||||
@customElement('wa-radio')
|
||||
export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
static shadowStyle = [sizeStyles, nativeStyles, styles];
|
||||
static shadowStyle = [formControlStyles, sizeStyles, nativeStyles, styles];
|
||||
|
||||
@state() checked = false;
|
||||
|
||||
@@ -63,6 +66,11 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
/** Disables the radio. */
|
||||
@property({ type: Boolean }) disabled = false;
|
||||
|
||||
/** The radio's hint. If you need to display HTML, use the `hint` slot instead. */
|
||||
@property() hint = '';
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(this, 'hint');
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
if (!isServer) {
|
||||
@@ -81,11 +89,19 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
}
|
||||
|
||||
@watch('checked')
|
||||
handleCheckedChange() {
|
||||
this.toggleCustomState('checked', this.checked);
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
this.tabIndex = this.checked ? 0 : -1;
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
super.updated(changedProperties);
|
||||
|
||||
if (changedProperties.has('checked')) {
|
||||
this.toggleCustomState('checked', this.checked);
|
||||
this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
|
||||
this.tabIndex = this.checked ? 0 : -1;
|
||||
}
|
||||
|
||||
if (changedProperties.has('disabled')) {
|
||||
this.toggleCustomState('disabled', this.disabled);
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -95,12 +111,6 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
// We override `setValue` because we don't want to set form values from here. We want to do that in "RadioGroup" itself.
|
||||
}
|
||||
|
||||
@watch('disabled', { waitUntilFirstUpdate: true })
|
||||
handleDisabledChange() {
|
||||
this.toggleCustomState('disabled', this.disabled);
|
||||
this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');
|
||||
}
|
||||
|
||||
private handleClick = () => {
|
||||
if (!this.disabled) {
|
||||
this.checked = true;
|
||||
@@ -108,26 +118,30 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
};
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<span
|
||||
part="base"
|
||||
class=${classMap({
|
||||
radio: true,
|
||||
'radio--checked': this.checked,
|
||||
})}
|
||||
>
|
||||
<span part="control" class="control">
|
||||
${this.checked
|
||||
? html`
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
|
||||
<circle cx="8" cy="8" r="8" />
|
||||
</svg>
|
||||
`
|
||||
: ''}
|
||||
</span>
|
||||
const hasHintSlot = isServer ? true : this.hasSlotController.test('hint');
|
||||
const hasHint = this.hint ? true : !!hasHintSlot;
|
||||
|
||||
<slot part="label" class="label"></slot>
|
||||
return html`
|
||||
<span part="control" class="control">
|
||||
${this.checked
|
||||
? html`
|
||||
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" part="checked-icon" class="checked-icon">
|
||||
<circle cx="8" cy="8" r="8" />
|
||||
</svg>
|
||||
`
|
||||
: ''}
|
||||
</span>
|
||||
|
||||
<slot part="label" class="label"></slot>
|
||||
|
||||
<slot
|
||||
name="hint"
|
||||
aria-hidden=${hasHint ? 'false' : 'true'}
|
||||
class="${classMap({ 'has-slotted': hasHint })}"
|
||||
id="hint"
|
||||
part="hint"
|
||||
>${this.hint}</slot
|
||||
>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -252,7 +252,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
removable
|
||||
@wa-remove=${(event: WaRemoveEvent) => this.handleTagRemove(event, option)}
|
||||
>
|
||||
${option.getTextLabel()}
|
||||
${option.label}
|
||||
</wa-tag>
|
||||
`;
|
||||
};
|
||||
@@ -437,7 +437,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
for (const option of allOptions) {
|
||||
const label = option.getTextLabel().toLowerCase();
|
||||
const label = option.label.toLowerCase();
|
||||
|
||||
if (label.startsWith(this.typeToSelectString)) {
|
||||
this.setCurrentOption(option);
|
||||
@@ -642,7 +642,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
} else {
|
||||
const selectedOption = this.selectedOptions[0];
|
||||
this.value = selectedOption?.value ?? '';
|
||||
this.displayLabel = selectedOption?.getTextLabel?.() ?? '';
|
||||
this.displayLabel = selectedOption?.label ?? '';
|
||||
}
|
||||
|
||||
// Update validity
|
||||
|
||||
46
src/internal/get-text.ts
Normal file
46
src/internal/get-text.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
/**
|
||||
* Like textContent, but better:
|
||||
* - Uses assignedNodes to get text content from slots (and falls back to content if nothing is slotted)
|
||||
* - Ignores script and style elements
|
||||
* @param root - One or more nodes to get text content from.
|
||||
* @param depth - By default, will just return element.textContent for any child elements instead of calling the function recursively.
|
||||
* Set to a positive integer to recurse that many levels. Generally a tradeoff between performance and accuracy.
|
||||
* @returns
|
||||
*/
|
||||
export default function getText(root: Node | Iterable<Node>, depth = 0): string {
|
||||
if (!root || !globalThis.Node) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (typeof (root as any)[Symbol.iterator] === 'function') {
|
||||
let nodes = Array.isArray(root) ? root : [...(root as Iterable<Node>)];
|
||||
return nodes.map(node => getText(node, --depth)).join('');
|
||||
}
|
||||
|
||||
let node = root as Node;
|
||||
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
return node.textContent ?? '';
|
||||
}
|
||||
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
let element = node as HTMLElement;
|
||||
|
||||
if (element.hasAttribute('slot') || element.matches('style, script')) {
|
||||
return '';
|
||||
}
|
||||
|
||||
if (element instanceof HTMLSlotElement) {
|
||||
let assignedNodes = element.assignedNodes({ flatten: true });
|
||||
|
||||
if (assignedNodes.length > 0) {
|
||||
// If no assigned nodes, we still want the slot contents
|
||||
return getText(assignedNodes, --depth);
|
||||
}
|
||||
}
|
||||
|
||||
return depth > -1 ? getText(element, --depth) : (element.textContent ?? '');
|
||||
}
|
||||
|
||||
return node.hasChildNodes() ? getText(node.childNodes, --depth) : '';
|
||||
}
|
||||
@@ -12,11 +12,11 @@ export class HasSlotController implements ReactiveController {
|
||||
|
||||
private hasDefaultSlot() {
|
||||
return [...this.host.childNodes].some(node => {
|
||||
if (node.nodeType === node.TEXT_NODE && node.textContent!.trim() !== '') {
|
||||
if (node.nodeType === Node.TEXT_NODE && node.textContent!.trim() !== '') {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (node.nodeType === node.ELEMENT_NODE) {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
const el = node as HTMLElement;
|
||||
const tagName = el.tagName.toLowerCase();
|
||||
|
||||
@@ -90,23 +90,3 @@ export function getInnerHTML(nodes: Iterable<Node>, callback?: (node: Node) => s
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a slot, this function iterates over all of its assigned text nodes and returns the concatenated text as a
|
||||
* string. This is useful because we can't use slot.textContent as an alternative.
|
||||
*/
|
||||
export function getTextContent(slot: HTMLSlotElement | undefined | null): string {
|
||||
if (!slot) {
|
||||
return '';
|
||||
}
|
||||
const nodes = slot.assignedNodes({ flatten: true });
|
||||
let text = '';
|
||||
|
||||
[...nodes].forEach(node => {
|
||||
if (node.nodeType === Node.TEXT_NODE) {
|
||||
text += node.textContent;
|
||||
}
|
||||
});
|
||||
|
||||
return text;
|
||||
}
|
||||
|
||||
@@ -14,4 +14,5 @@
|
||||
--wa-color-brand-10: var(--wa-color-blue-10);
|
||||
--wa-color-brand-05: var(--wa-color-blue-05);
|
||||
--wa-color-brand: var(--wa-color-blue);
|
||||
--wa-color-brand-key: var(--wa-color-blue-key);
|
||||
}
|
||||
|
||||
@@ -14,4 +14,5 @@
|
||||
--wa-color-brand-10: var(--wa-color-cyan-10);
|
||||
--wa-color-brand-05: var(--wa-color-cyan-05);
|
||||
--wa-color-brand: var(--wa-color-cyan);
|
||||
--wa-color-brand-key: var(--wa-color-cyan-key);
|
||||
}
|
||||
|
||||
18
src/styles/brand/gray.css
Normal file
18
src/styles/brand/gray.css
Normal file
@@ -0,0 +1,18 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
|
||||
--wa-color-brand-95: var(--wa-color-gray-95);
|
||||
--wa-color-brand-90: var(--wa-color-gray-90);
|
||||
--wa-color-brand-80: var(--wa-color-gray-80);
|
||||
--wa-color-brand-70: var(--wa-color-gray-70);
|
||||
--wa-color-brand-60: var(--wa-color-gray-60);
|
||||
--wa-color-brand-50: var(--wa-color-gray-50);
|
||||
--wa-color-brand-40: var(--wa-color-gray-40);
|
||||
--wa-color-brand-30: var(--wa-color-gray-30);
|
||||
--wa-color-brand-20: var(--wa-color-gray-20);
|
||||
--wa-color-brand-10: var(--wa-color-gray-10);
|
||||
--wa-color-brand-05: var(--wa-color-gray-05);
|
||||
--wa-color-brand: var(--wa-color-gray);
|
||||
--wa-color-brand-key: var(--wa-color-gray-key);
|
||||
}
|
||||
@@ -14,4 +14,5 @@
|
||||
--wa-color-brand-10: var(--wa-color-green-10);
|
||||
--wa-color-brand-05: var(--wa-color-green-05);
|
||||
--wa-color-brand: var(--wa-color-green);
|
||||
--wa-color-brand-key: var(--wa-color-green-key);
|
||||
}
|
||||
|
||||
@@ -14,4 +14,5 @@
|
||||
--wa-color-brand-10: var(--wa-color-indigo-10);
|
||||
--wa-color-brand-05: var(--wa-color-indigo-05);
|
||||
--wa-color-brand: var(--wa-color-indigo);
|
||||
--wa-color-brand-key: var(--wa-color-indigo-key);
|
||||
}
|
||||
|
||||
18
src/styles/brand/orange.css
Normal file
18
src/styles/brand/orange.css
Normal file
@@ -0,0 +1,18 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
|
||||
--wa-color-brand-95: var(--wa-color-orange-95);
|
||||
--wa-color-brand-90: var(--wa-color-orange-90);
|
||||
--wa-color-brand-80: var(--wa-color-orange-80);
|
||||
--wa-color-brand-70: var(--wa-color-orange-70);
|
||||
--wa-color-brand-60: var(--wa-color-orange-60);
|
||||
--wa-color-brand-50: var(--wa-color-orange-50);
|
||||
--wa-color-brand-40: var(--wa-color-orange-40);
|
||||
--wa-color-brand-30: var(--wa-color-orange-30);
|
||||
--wa-color-brand-20: var(--wa-color-orange-20);
|
||||
--wa-color-brand-10: var(--wa-color-orange-10);
|
||||
--wa-color-brand-05: var(--wa-color-orange-05);
|
||||
--wa-color-brand: var(--wa-color-orange);
|
||||
--wa-color-brand-key: var(--wa-color-orange-key);
|
||||
}
|
||||
18
src/styles/brand/pink.css
Normal file
18
src/styles/brand/pink.css
Normal file
@@ -0,0 +1,18 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
|
||||
--wa-color-brand-95: var(--wa-color-pink-95);
|
||||
--wa-color-brand-90: var(--wa-color-pink-90);
|
||||
--wa-color-brand-80: var(--wa-color-pink-80);
|
||||
--wa-color-brand-70: var(--wa-color-pink-70);
|
||||
--wa-color-brand-60: var(--wa-color-pink-60);
|
||||
--wa-color-brand-50: var(--wa-color-pink-50);
|
||||
--wa-color-brand-40: var(--wa-color-pink-40);
|
||||
--wa-color-brand-30: var(--wa-color-pink-30);
|
||||
--wa-color-brand-20: var(--wa-color-pink-20);
|
||||
--wa-color-brand-10: var(--wa-color-pink-10);
|
||||
--wa-color-brand-05: var(--wa-color-pink-05);
|
||||
--wa-color-brand: var(--wa-color-pink);
|
||||
--wa-color-brand-key: var(--wa-color-pink-key);
|
||||
}
|
||||
@@ -14,4 +14,5 @@
|
||||
--wa-color-brand-10: var(--wa-color-purple-10);
|
||||
--wa-color-brand-05: var(--wa-color-purple-05);
|
||||
--wa-color-brand: var(--wa-color-purple);
|
||||
--wa-color-brand-key: var(--wa-color-purple-key);
|
||||
}
|
||||
|
||||
18
src/styles/brand/red.css
Normal file
18
src/styles/brand/red.css
Normal file
@@ -0,0 +1,18 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
|
||||
--wa-color-brand-95: var(--wa-color-red-95);
|
||||
--wa-color-brand-90: var(--wa-color-red-90);
|
||||
--wa-color-brand-80: var(--wa-color-red-80);
|
||||
--wa-color-brand-70: var(--wa-color-red-70);
|
||||
--wa-color-brand-60: var(--wa-color-red-60);
|
||||
--wa-color-brand-50: var(--wa-color-red-50);
|
||||
--wa-color-brand-40: var(--wa-color-red-40);
|
||||
--wa-color-brand-30: var(--wa-color-red-30);
|
||||
--wa-color-brand-20: var(--wa-color-red-20);
|
||||
--wa-color-brand-10: var(--wa-color-red-10);
|
||||
--wa-color-brand-05: var(--wa-color-red-05);
|
||||
--wa-color-brand: var(--wa-color-red);
|
||||
--wa-color-brand-key: var(--wa-color-red-key);
|
||||
}
|
||||
18
src/styles/brand/yellow.css
Normal file
18
src/styles/brand/yellow.css
Normal file
@@ -0,0 +1,18 @@
|
||||
:where(:root),
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
:where([class^='wa-palette-'], [class*=' wa-palette-']) {
|
||||
--wa-color-brand-95: var(--wa-color-yellow-95);
|
||||
--wa-color-brand-90: var(--wa-color-yellow-90);
|
||||
--wa-color-brand-80: var(--wa-color-yellow-80);
|
||||
--wa-color-brand-70: var(--wa-color-yellow-70);
|
||||
--wa-color-brand-60: var(--wa-color-yellow-60);
|
||||
--wa-color-brand-50: var(--wa-color-yellow-50);
|
||||
--wa-color-brand-40: var(--wa-color-yellow-40);
|
||||
--wa-color-brand-30: var(--wa-color-yellow-30);
|
||||
--wa-color-brand-20: var(--wa-color-yellow-20);
|
||||
--wa-color-brand-10: var(--wa-color-yellow-10);
|
||||
--wa-color-brand-05: var(--wa-color-yellow-05);
|
||||
--wa-color-brand: var(--wa-color-yellow);
|
||||
--wa-color-brand-key: var(--wa-color-yellow-key);
|
||||
}
|
||||
@@ -2,107 +2,115 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-anodized {
|
||||
--wa-color-red-95: #fbeeeb /* oklch(95.851% 0.01469 33.071) */;
|
||||
--wa-color-red-90: #f8e0d9 /* oklch(92.431% 0.02823 36.865) */;
|
||||
--wa-color-red-80: #efbdb1 /* oklch(83.972% 0.06035 33.801) */;
|
||||
--wa-color-red-70: #e39f8d /* oklch(76.38% 0.08577 35.424) */;
|
||||
--wa-color-red-60: #d1806b /* oklch(68.083% 0.10573 35.329) */;
|
||||
--wa-color-red-50: #b35e49 /* oklch(57.764% 0.11532 34.927) */;
|
||||
--wa-color-red-40: #8e4330 /* oklch(47.527% 0.10671 35.325) */;
|
||||
--wa-color-red-30: #733223 /* oklch(40.293% 0.09564 34.326) */;
|
||||
--wa-color-red-20: #562317 /* oklch(32.748% 0.07905 34.548) */;
|
||||
--wa-color-red-10: #36130a /* oklch(23.979% 0.05887 35.518) */;
|
||||
--wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-95: #ffefee /* oklch(96.448% 0.01742 21.806) */;
|
||||
--wa-color-red-90: #fededd /* oklch(92.674% 0.03556 19.95) */;
|
||||
--wa-color-red-80: #fabab8 /* oklch(84.695% 0.0745 20.791) */;
|
||||
--wa-color-red-70: #f19695 /* oklch(76.595% 0.11008 20.609) */;
|
||||
--wa-color-red-60: #d47c7e /* oklch(68.199% 0.10963 18.885) */;
|
||||
--wa-color-red-50: #af5e5a /* oklch(57.551% 0.10599 23.859) */;
|
||||
--wa-color-red-40: #89453f /* oklch(47.393% 0.09388 26.419) */;
|
||||
--wa-color-red-30: #6d352f /* oklch(40.077% 0.08085 27.557) */;
|
||||
--wa-color-red-20: #522521 /* oklch(32.622% 0.06818 26.677) */;
|
||||
--wa-color-red-10: #331512 /* oklch(23.979% 0.04918 27.221) */;
|
||||
--wa-color-red-05: #220b09 /* oklch(18.625% 0.04007 26.766) */;
|
||||
--wa-color-red: var(--wa-color-red-70);
|
||||
--wa-color-red-key: 70;
|
||||
|
||||
--wa-color-yellow-95: #fff2b8 /* oklch(95.764% 0.07527 96.955) */;
|
||||
--wa-color-yellow-90: #ffe578 /* oklch(92.163% 0.13215 96.194) */;
|
||||
--wa-color-yellow-80: #eac46c /* oklch(83.54% 0.11551 86.482) */;
|
||||
--wa-color-yellow-70: #d5a766 /* oklch(75.67% 0.0989 74.916) */;
|
||||
--wa-color-yellow-60: #bd8a5e /* oklch(67.327% 0.08618 61.351) */;
|
||||
--wa-color-yellow-50: #9d6a4f /* oklch(57.149% 0.0766 48.607) */;
|
||||
--wa-color-yellow-40: #794f3c /* oklch(46.965% 0.06418 45.076) */;
|
||||
--wa-color-yellow-30: #603d2f /* oklch(39.723% 0.05466 42.556) */;
|
||||
--wa-color-yellow-20: #482b21 /* oklch(32.256% 0.04681 39.773) */;
|
||||
--wa-color-yellow-10: #2c1912 /* oklch(23.678% 0.03339 40.974) */;
|
||||
--wa-color-yellow-05: #1d0e0a /* oklch(18.423% 0.02718 35.681) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-90);
|
||||
--wa-color-yellow-95: #faf3e1 /* oklch(96.479% 0.02487 89.211) */;
|
||||
--wa-color-yellow-90: #f4e5be /* oklch(92.412% 0.0535 89.488) */;
|
||||
--wa-color-yellow-80: #eac673 /* oklch(84.03% 0.1101 86.581) */;
|
||||
--wa-color-yellow-70: #d4a85b /* oklch(75.609% 0.10842 79.92) */;
|
||||
--wa-color-yellow-60: #bf8b4a /* oklch(67.445% 0.10375 70.58) */;
|
||||
--wa-color-yellow-50: #a06938 /* oklch(56.952% 0.09579 60.65) */;
|
||||
--wa-color-yellow-40: #7f4d29 /* oklch(47.038% 0.08433 54.746) */;
|
||||
--wa-color-yellow-30: #663b1e /* oklch(39.848% 0.07399 52.93) */;
|
||||
--wa-color-yellow-20: #4c2a14 /* oklch(32.393% 0.0609 51.89) */;
|
||||
--wa-color-yellow-10: #2f1809 /* oklch(23.743% 0.04463 52.113) */;
|
||||
--wa-color-yellow-05: #1f0e04 /* oklch(18.6% 0.03542 53.04) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #dcf8ea /* oklch(95.5% 0.03463 164.16) */;
|
||||
--wa-color-green-90: #bcf1d8 /* oklch(91.473% 0.06399 164.58) */;
|
||||
--wa-color-green-80: #6dddad /* oklch(81.852% 0.12484 163.42) */;
|
||||
--wa-color-green-70: #33c685 /* oklch(73.519% 0.15428 158.98) */;
|
||||
--wa-color-green-60: #0a6 /* oklch(64.917% 0.15588 156.54) */;
|
||||
--wa-color-green-50: #008754 /* oklch(54.923% 0.12782 158.29) */;
|
||||
--wa-color-green-40: #006646 /* oklch(45.146% 0.09722 163.25) */;
|
||||
--wa-color-green-30: #00503b /* oklch(38.299% 0.07764 167.91) */;
|
||||
--wa-color-green-20: #003a2d /* oklch(31.045% 0.06006 172.22) */;
|
||||
--wa-color-green-10: #00231b /* oklch(22.853% 0.04344 174.1) */;
|
||||
--wa-color-green-05: #001610 /* oklch(17.856% 0.03405 173.73) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
--wa-color-green-95: #ebf6e0 /* oklch(95.901% 0.03126 128.83) */;
|
||||
--wa-color-green-90: #d3efbe /* oklch(91.922% 0.0713 131.97) */;
|
||||
--wa-color-green-80: #96db86 /* oklch(82.501% 0.13433 139.79) */;
|
||||
--wa-color-green-70: #68c17c /* oklch(73.758% 0.13164 149.51) */;
|
||||
--wa-color-green-60: #4aa672 /* oklch(65.518% 0.11814 156.17) */;
|
||||
--wa-color-green-50: #2e845d /* oklch(55.093% 0.10286 160.26) */;
|
||||
--wa-color-green-40: #1b6548 /* oklch(45.377% 0.0863 162.75) */;
|
||||
--wa-color-green-30: #104f38 /* oklch(38.219% 0.07374 163.76) */;
|
||||
--wa-color-green-20: #083a29 /* oklch(31.135% 0.05985 165.09) */;
|
||||
--wa-color-green-10: #032317 /* oklch(22.865% 0.0446 164.36) */;
|
||||
--wa-color-green-05: #01160d /* oklch(17.827% 0.03566 164.38) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
--wa-color-green-key: 80;
|
||||
|
||||
--wa-color-cyan-95: #cbfaf9 /* oklch(95.226% 0.04791 194.77) */;
|
||||
--wa-color-cyan-90: #9ff4f3 /* oklch(91.294% 0.08228 194.86) */;
|
||||
--wa-color-cyan-80: #1adfdb /* oklch(81.816% 0.13749 192.46) */;
|
||||
--wa-color-cyan-70: #00c3be /* oklch(73.815% 0.1269 191.5) */;
|
||||
--wa-color-cyan-60: #1aa6a0 /* oklch(65.653% 0.10892 190.15) */;
|
||||
--wa-color-cyan-50: #15837e /* oklch(55.258% 0.09092 189.97) */;
|
||||
--wa-color-cyan-40: #10635e /* oklch(45.271% 0.07391 188.55) */;
|
||||
--wa-color-cyan-30: #0c4e4a /* oklch(38.439% 0.06211 188.63) */;
|
||||
--wa-color-cyan-20: #083936 /* oklch(31.289% 0.04971 188.74) */;
|
||||
--wa-color-cyan-10: #04221f /* oklch(22.881% 0.03588 185.7) */;
|
||||
--wa-color-cyan-05: #021513 /* oklch(17.794% 0.0276 186.43) */;
|
||||
--wa-color-cyan-95: #cafbfd /* oklch(95.491% 0.04984 199.43) */;
|
||||
--wa-color-cyan-90: #97f5f8 /* oklch(91.286% 0.08952 198.32) */;
|
||||
--wa-color-cyan-80: #3fdee7 /* oklch(82.5% 0.12703 200.7) */;
|
||||
--wa-color-cyan-70: #00c0d4 /* oklch(73.886% 0.127 207.98) */;
|
||||
--wa-color-cyan-60: #00a3bf /* oklch(65.895% 0.11686 215.74) */;
|
||||
--wa-color-cyan-50: #007fa2 /* oklch(55.537% 0.10592 225.72) */;
|
||||
--wa-color-cyan-40: #006082 /* oklch(45.89% 0.09291 231.37) */;
|
||||
--wa-color-cyan-30: #014a6b /* oklch(38.746% 0.08372 236.7) */;
|
||||
--wa-color-cyan-20: #003652 /* oklch(31.672% 0.07138 239.03) */;
|
||||
--wa-color-cyan-10: #002034 /* oklch(23.245% 0.05366 240.46) */;
|
||||
--wa-color-cyan-05: #001422 /* oklch(18.196% 0.041 239.02) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
--wa-color-cyan-key: 80;
|
||||
|
||||
--wa-color-blue-95: #ecf3ff /* oklch(96.238% 0.01777 261.34) */;
|
||||
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
|
||||
--wa-color-blue-80: #abcaff /* oklch(83.49% 0.082 261.03) */;
|
||||
--wa-color-blue-70: #83b0fe /* oklch(75.655% 0.12308 260.97) */;
|
||||
--wa-color-blue-60: #5593fe /* oklch(67.328% 0.1713 260.55) */;
|
||||
--wa-color-blue-50: #3d74d2 /* oklch(57.024% 0.15628 260.38) */;
|
||||
--wa-color-blue-40: #2e589f /* oklch(46.829% 0.12443 260.23) */;
|
||||
--wa-color-blue-30: #24457c /* oklch(39.571% 0.10098 260.03) */;
|
||||
--wa-color-blue-20: #1b325b /* oklch(32.168% 0.07881 261.06) */;
|
||||
--wa-color-blue-10: #101d35 /* oklch(23.292% 0.05008 261.75) */;
|
||||
--wa-color-blue-05: #0a1222 /* oklch(18.375% 0.0352 263.19) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-95: #e5f6ff /* oklch(96.324% 0.02167 230.54) */;
|
||||
--wa-color-blue-90: #c7ebff /* oklch(92.061% 0.04647 232.28) */;
|
||||
--wa-color-blue-80: #8ed2f9 /* oklch(83.243% 0.08774 234.44) */;
|
||||
--wa-color-blue-70: #5db7f3 /* oklch(74.844% 0.12234 240.33) */;
|
||||
--wa-color-blue-60: #309aee /* oklch(66.707% 0.15592 247.36) */;
|
||||
--wa-color-blue-50: #0774df /* oklch(56.704% 0.18422 255.07) */;
|
||||
--wa-color-blue-40: #0152c1 /* oklch(47.066% 0.187 259.59) */;
|
||||
--wa-color-blue-30: #003ea2 /* oklch(40.154% 0.17138 260.8) */;
|
||||
--wa-color-blue-20: #002b7f /* oklch(32.816% 0.14852 261.7) */;
|
||||
--wa-color-blue-10: #001853 /* oklch(24.067% 0.11176 262.05) */;
|
||||
--wa-color-blue-05: #000e39 /* oklch(18.796% 0.0868 261.98) */;
|
||||
--wa-color-blue: var(--wa-color-blue-40);
|
||||
--wa-color-blue-key: 40;
|
||||
|
||||
--wa-color-indigo-95: #f5efff /* oklch(96.142% 0.02215 302.94) */;
|
||||
--wa-color-indigo-90: #ede0ff /* oklch(92.64% 0.04374 304.51) */;
|
||||
--wa-color-indigo-80: #d7bdff /* oklch(84.265% 0.09443 302.44) */;
|
||||
--wa-color-indigo-70: #bf9efe /* oklch(76.541% 0.13786 298.94) */;
|
||||
--wa-color-indigo-60: #a280fa /* oklch(68.571% 0.17519 294.14) */;
|
||||
--wa-color-indigo-50: #7f5bec /* oklch(58.581% 0.20817 289.86) */;
|
||||
--wa-color-indigo-40: #603dc8 /* oklch(48.557% 0.20262 287.93) */;
|
||||
--wa-color-indigo-30: #4c2ba5 /* oklch(41.119% 0.18229 287.94) */;
|
||||
--wa-color-indigo-20: #381d7f /* oklch(33.629% 0.15279 287.75) */;
|
||||
--wa-color-indigo-10: #210e53 /* oklch(24.589% 0.11518 287.13) */;
|
||||
--wa-color-indigo-05: #150739 /* oklch(19.258% 0.08946 287.81) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
|
||||
--wa-color-indigo-90: #e1e4fe /* oklch(92.448% 0.03538 280.45) */;
|
||||
--wa-color-indigo-80: #bfc6fe /* oklch(84.035% 0.07865 279.01) */;
|
||||
--wa-color-indigo-70: #9fa8fc /* oklch(75.744% 0.12084 278.41) */;
|
||||
--wa-color-indigo-60: #828bf6 /* oklch(67.774% 0.15666 277.72) */;
|
||||
--wa-color-indigo-50: #6166e8 /* oklch(57.738% 0.19274 276.85) */;
|
||||
--wa-color-indigo-40: #4743d0 /* oklch(48.143% 0.20939 276.34) */;
|
||||
--wa-color-indigo-30: #372db3 /* oklch(41.009% 0.20044 276.19) */;
|
||||
--wa-color-indigo-20: #291b90 /* oklch(33.874% 0.17803 276.48) */;
|
||||
--wa-color-indigo-10: #170a61 /* oklch(24.844% 0.13871 276.05) */;
|
||||
--wa-color-indigo-05: #0e0445 /* oklch(19.553% 0.11104 276.58) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #fbedfd /* oklch(96.172% 0.02584 321.94) */;
|
||||
--wa-color-purple-90: #f7defa /* oklch(92.922% 0.04588 322.59) */;
|
||||
--wa-color-purple-80: #eeb6f5 /* oklch(84.707% 0.10462 322.7) */;
|
||||
--wa-color-purple-70: #e590f0 /* oklch(77.326% 0.15957 322.79) */;
|
||||
--wa-color-purple-60: #d56ae2 /* oklch(69.373% 0.19861 323.18) */;
|
||||
--wa-color-purple-50: #b547be /* oklch(59.084% 0.2006 324.63) */;
|
||||
--wa-color-purple-40: #952598 /* oklch(48.958% 0.19474 326.91) */;
|
||||
--wa-color-purple-30: #751d79 /* oklch(41.379% 0.16261 326.12) */;
|
||||
--wa-color-purple-20: #561658 /* oklch(33.585% 0.12607 326.65) */;
|
||||
--wa-color-purple-10: #340d36 /* oklch(24.532% 0.08615 325.79) */;
|
||||
--wa-color-purple-05: #210822 /* oklch(19.065% 0.0603 326.11) */;
|
||||
--wa-color-purple-95: #fbefff /* oklch(96.613% 0.02465 317.72) */;
|
||||
--wa-color-purple-90: #f7ddff /* oklch(92.895% 0.0531 318.2) */;
|
||||
--wa-color-purple-80: #edb7ff /* oklch(85.165% 0.11316 317.53) */;
|
||||
--wa-color-purple-70: #dc91fe /* oklch(77.161% 0.16803 314.62) */;
|
||||
--wa-color-purple-60: #c670f2 /* oklch(69.273% 0.19845 312.9) */;
|
||||
--wa-color-purple-50: #a34bda /* oklch(58.947% 0.21432 309.63) */;
|
||||
--wa-color-purple-40: #802fb6 /* oklch(48.965% 0.20261 307.82) */;
|
||||
--wa-color-purple-30: #661f96 /* oklch(41.488% 0.1815 307.02) */;
|
||||
--wa-color-purple-20: #4c1372 /* oklch(33.753% 0.1509 306.93) */;
|
||||
--wa-color-purple-10: #30074a /* oklch(24.849% 0.1139 307.37) */;
|
||||
--wa-color-purple-05: #200333 /* oklch(19.47% 0.0902 307.77) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-key: 50;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e2e5e8 /* oklch(92.046% 0.00521 247.88) */;
|
||||
--wa-color-gray-80: #c2c9d0 /* oklch(83.255% 0.01246 247.98) */;
|
||||
--wa-color-gray-70: #a6b0ba /* oklch(75.244% 0.01824 248.07) */;
|
||||
--wa-color-gray-60: #8897a3 /* oklch(66.841% 0.02477 242.06) */;
|
||||
--wa-color-gray-50: #657888 /* oklch(56.309% 0.0335 243.8) */;
|
||||
--wa-color-gray-40: #435c6f /* oklch(46.235% 0.04323 241.6) */;
|
||||
--wa-color-gray-30: #2d485d /* oklch(38.946% 0.04864 242.89) */;
|
||||
--wa-color-gray-20: #18354a /* oklch(31.701% 0.05142 242.24) */;
|
||||
--wa-color-gray-10: #012034 /* oklch(23.295% 0.05299 241.23) */;
|
||||
--wa-color-gray-05: #001421 /* oklch(18.122% 0.03959 237.04) */;
|
||||
--wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
|
||||
--wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
|
||||
--wa-color-gray-80: #cacaca /* oklch(83.901% 0 none) */;
|
||||
--wa-color-gray-70: #aeafaf /* oklch(75.321% 0.00114 197.13) */;
|
||||
--wa-color-gray-60: #959595 /* oklch(66.984% 0 none) */;
|
||||
--wa-color-gray-50: #757575 /* oklch(56.241% 0 none) */;
|
||||
--wa-color-gray-40: #595959 /* oklch(46.4% 0 none) */;
|
||||
--wa-color-gray-30: #454444 /* oklch(38.762% 0.00135 17.215) */;
|
||||
--wa-color-gray-20: #323232 /* oklch(31.714% 0 none) */;
|
||||
--wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
|
||||
--wa-color-gray-05: #121212 /* oklch(18.22% 0 none) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -5,104 +5,112 @@
|
||||
--wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
|
||||
--wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
|
||||
--wa-color-red-80: #ffb7b7 /* oklch(84.652% 0.084 18.964) */;
|
||||
--wa-color-red-70: #ff8e8e /* oklch(76.851% 0.13692 20.73) */;
|
||||
--wa-color-red-60: #fd5f5f /* oklch(69.182% 0.19322 23.628) */;
|
||||
--wa-color-red-50: #de3131 /* oklch(58.924% 0.20878 26.488) */;
|
||||
--wa-color-red-40: #b40917 /* oklch(48.728% 0.19437 26.549) */;
|
||||
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
|
||||
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
|
||||
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
|
||||
--wa-color-red-05: #300000 /* oklch(19.415% 0.07967 29.234) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-70: #ff8e90 /* oklch(76.896% 0.13677 19.629) */;
|
||||
--wa-color-red-60: #f76563 /* oklch(69.077% 0.18003 23.786) */;
|
||||
--wa-color-red-50: #d04442 /* oklch(58.513% 0.17687 25.152) */;
|
||||
--wa-color-red-40: #a52c2b /* oklch(48.271% 0.15774 25.737) */;
|
||||
--wa-color-red-30: #861d1c /* oklch(40.905% 0.1406 26.45) */;
|
||||
--wa-color-red-20: #680d0e /* oklch(33.449% 0.1237 26.777) */;
|
||||
--wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
|
||||
--wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
|
||||
--wa-color-red: var(--wa-color-red-60);
|
||||
--wa-color-red-key: 60;
|
||||
|
||||
--wa-color-yellow-95: #fef3c1 /* oklch(96.062% 0.06532 97.08) */;
|
||||
--wa-color-yellow-90: #fee682 /* oklch(92.403% 0.1233 96.206) */;
|
||||
--wa-color-yellow-80: #fbc217 /* oklch(84.22% 0.16883 86.577) */;
|
||||
--wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
|
||||
--wa-color-yellow-60: #e67700 /* oklch(68.349% 0.1693 54.965) */;
|
||||
--wa-color-yellow-50: #b75d00 /* oklch(57.535% 0.1429 54.739) */;
|
||||
--wa-color-yellow-40: #8c4600 /* oklch(47.31% 0.11712 55.012) */;
|
||||
--wa-color-yellow-30: #6f3600 /* oklch(40.006% 0.09924 54.843) */;
|
||||
--wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
|
||||
--wa-color-yellow-10: #341500 /* oklch(23.823% 0.06026 53.274) */;
|
||||
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-60);
|
||||
--wa-color-yellow-95: #fff4c0 /* oklch(96.32% 0.0677 97.497) */;
|
||||
--wa-color-yellow-90: #ffe579 /* oklch(92.176% 0.13122 96.089) */;
|
||||
--wa-color-yellow-80: #ffbf18 /* oklch(84.069% 0.16897 83.446) */;
|
||||
--wa-color-yellow-70: #f29c00 /* oklch(76.127% 0.16443 70.48) */;
|
||||
--wa-color-yellow-60: #d08402 /* oklch(67.671% 0.14665 69.482) */;
|
||||
--wa-color-yellow-50: #a56804 /* oklch(57.027% 0.1228 69.447) */;
|
||||
--wa-color-yellow-40: #7d4f04 /* oklch(46.866% 0.09949 70.54) */;
|
||||
--wa-color-yellow-30: #643d03 /* oklch(39.73% 0.08492 68.821) */;
|
||||
--wa-color-yellow-20: #4a2c01 /* oklch(32.318% 0.06941 69.3) */;
|
||||
--wa-color-yellow-10: #2d1901 /* oklch(23.512% 0.04963 68.776) */;
|
||||
--wa-color-yellow-05: #1d0f00 /* oklch(18.392% 0.03939 71.947) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #d8fbf0 /* oklch(96.011% 0.03902 174.52) */;
|
||||
--wa-color-green-90: #a4f5dd /* oklch(91.124% 0.08611 173.73) */;
|
||||
--wa-color-green-80: #51e1b5 /* oklch(82.107% 0.13869 169.04) */;
|
||||
--wa-color-green-70: #1cc693 /* oklch(73.497% 0.14832 165.73) */;
|
||||
--wa-color-green-60: #0da97a /* oklch(65.179% 0.13571 164.57) */;
|
||||
--wa-color-green-50: #088660 /* oklch(55.001% 0.1145 164.58) */;
|
||||
--wa-color-green-40: #066549 /* oklch(45.014% 0.09185 165.65) */;
|
||||
--wa-color-green-30: #054f39 /* oklch(38.028% 0.07648 166.14) */;
|
||||
--wa-color-green-20: #043a2a /* oklch(31.057% 0.06074 167.25) */;
|
||||
--wa-color-green-10: #022319 /* oklch(22.882% 0.04342 168.87) */;
|
||||
--wa-color-green-05: #01160f /* oklch(17.9% 0.03352 169.84) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
--wa-color-green-95: #dbfaf0 /* oklch(96.006% 0.03481 174.15) */;
|
||||
--wa-color-green-90: #b1f3de /* oklch(91.419% 0.0722 172.95) */;
|
||||
--wa-color-green-80: #3fe2b2 /* oklch(81.853% 0.14907 168.5) */;
|
||||
--wa-color-green-70: #29c596 /* oklch(73.487% 0.14194 166.89) */;
|
||||
--wa-color-green-60: #19a87d /* oklch(65.107% 0.13007 166.01) */;
|
||||
--wa-color-green-50: #0a8560 /* oklch(54.742% 0.11293 164.94) */;
|
||||
--wa-color-green-40: #036648 /* oklch(45.239% 0.09474 164.51) */;
|
||||
--wa-color-green-30: #015038 /* oklch(38.229% 0.08003 164.89) */;
|
||||
--wa-color-green-20: #003a28 /* oklch(30.885% 0.06454 165.46) */;
|
||||
--wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
|
||||
--wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
--wa-color-green-key: 80;
|
||||
|
||||
--wa-color-cyan-95: #dcf9fc /* oklch(96.213% 0.03042 204.23) */;
|
||||
--wa-color-cyan-90: #aff0f6 /* oklch(91.368% 0.06543 203.24) */;
|
||||
--wa-color-cyan-80: #69dae9 /* oklch(82.807% 0.10458 206.97) */;
|
||||
--wa-color-cyan-70: #2bbfd4 /* oklch(74.03% 0.11967 209.65) */;
|
||||
--wa-color-cyan-60: #12a3b8 /* oklch(65.721% 0.1115 211.17) */;
|
||||
--wa-color-cyan-50: #0c8195 /* oklch(55.546% 0.09532 213.91) */;
|
||||
--wa-color-cyan-40: #096272 /* oklch(45.73% 0.07805 214.43) */;
|
||||
--wa-color-cyan-30: #074c59 /* oklch(38.429% 0.06506 214.82) */;
|
||||
--wa-color-cyan-20: #063842 /* oklch(31.484% 0.05211 215.06) */;
|
||||
--wa-color-cyan-10: #032127 /* oklch(22.892% 0.03684 213.41) */;
|
||||
--wa-color-cyan-05: #021518 /* oklch(18.045% 0.02758 207.97) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
--wa-color-cyan-95: #dbf9fc /* oklch(96.146% 0.03142 203.97) */;
|
||||
--wa-color-cyan-90: #a6f2fa /* oklch(91.438% 0.07533 204.25) */;
|
||||
--wa-color-cyan-80: #51dcee /* oklch(82.7% 0.11986 207.31) */;
|
||||
--wa-color-cyan-70: #2fbfd5 /* oklch(74.137% 0.11878 210.5) */;
|
||||
--wa-color-cyan-60: #1fa3b9 /* oklch(65.917% 0.10909 212.4) */;
|
||||
--wa-color-cyan-50: #118095 /* oklch(55.343% 0.09433 215.17) */;
|
||||
--wa-color-cyan-40: #056273 /* oklch(45.726% 0.0795 215.29) */;
|
||||
--wa-color-cyan-30: #014c5a /* oklch(38.37% 0.06757 215.53) */;
|
||||
--wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
|
||||
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
|
||||
--wa-color-cyan-05: #00151a /* oklch(17.995% 0.03161 213.85) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
--wa-color-cyan-key: 80;
|
||||
|
||||
--wa-color-blue-95: #e7f5ff /* oklch(96.268% 0.02005 238.66) */;
|
||||
--wa-color-blue-90: #ceeaff /* oklch(92.321% 0.04119 240.38) */;
|
||||
--wa-color-blue-80: #94d0fe /* oklch(83.329% 0.08941 242.12) */;
|
||||
--wa-color-blue-70: #60b5f9 /* oklch(74.8% 0.1287 244.9) */;
|
||||
--wa-color-blue-60: #3299f0 /* oklch(66.644% 0.15866 248.64) */;
|
||||
--wa-color-blue-50: #1a77cc /* oklch(56.301% 0.15449 251.61) */;
|
||||
--wa-color-blue-40: #165a9b /* oklch(46.242% 0.12393 251.89) */;
|
||||
--wa-color-blue-30: #11477a /* oklch(39.241% 0.10211 251.38) */;
|
||||
--wa-color-blue-20: #0d3459 /* oklch(31.95% 0.07871 250.89) */;
|
||||
--wa-color-blue-10: #071f35 /* oklch(23.365% 0.05197 249.19) */;
|
||||
--wa-color-blue-05: #051321 /* oklch(18.208% 0.03553 248.92) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-80: #93d0ff /* oklch(83.315% 0.09108 242.3) */;
|
||||
--wa-color-blue-70: #5bb5fe /* oklch(74.85% 0.13654 245.56) */;
|
||||
--wa-color-blue-60: #4a99e4 /* oklch(66.699% 0.13625 249.55) */;
|
||||
--wa-color-blue-50: #3178c0 /* oklch(56.346% 0.13216 251.63) */;
|
||||
--wa-color-blue-40: #235a96 /* oklch(46.273% 0.11344 253.15) */;
|
||||
--wa-color-blue-30: #194777 /* oklch(39.272% 0.09544 252.36) */;
|
||||
--wa-color-blue-20: #103359 /* oklch(31.787% 0.07886 253.15) */;
|
||||
--wa-color-blue-10: #061e38 /* oklch(23.254% 0.05851 252.8) */;
|
||||
--wa-color-blue-05: #031225 /* oklch(18.051% 0.04534 253.25) */;
|
||||
--wa-color-blue: var(--wa-color-blue-70);
|
||||
--wa-color-blue-key: 70;
|
||||
|
||||
--wa-color-indigo-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
|
||||
--wa-color-indigo-90: #dce5ff /* oklch(92.306% 0.03671 270.47) */;
|
||||
--wa-color-indigo-80: #bac8ff /* oklch(84.108% 0.07867 273.5) */;
|
||||
--wa-color-indigo-70: #96abff /* oklch(75.857% 0.12332 272.47) */;
|
||||
--wa-color-indigo-60: #738efc /* oklch(67.734% 0.16478 271.06) */;
|
||||
--wa-color-indigo-50: #486af1 /* oklch(57.714% 0.20605 268.43) */;
|
||||
--wa-color-indigo-40: #354dc3 /* oklch(47.651% 0.18567 269.2) */;
|
||||
--wa-color-indigo-30: #293c98 /* oklch(40.065% 0.15173 269.37) */;
|
||||
--wa-color-indigo-20: #1e2c70 /* oklch(32.649% 0.11852 269.77) */;
|
||||
--wa-color-indigo-10: #121a43 /* oklch(23.813% 0.07786 271) */;
|
||||
--wa-color-indigo-05: #0b102a /* oklch(18.556% 0.05298 272.08) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-70: #95abff /* oklch(75.79% 0.12361 271.99) */;
|
||||
--wa-color-indigo-60: #728dff /* oklch(67.658% 0.17035 271.19) */;
|
||||
--wa-color-indigo-50: #516ed8 /* oklch(57.136% 0.16529 269.13) */;
|
||||
--wa-color-indigo-40: #3851b3 /* oklch(47.273% 0.15818 268.81) */;
|
||||
--wa-color-indigo-30: #2a3f8f /* oklch(39.968% 0.13476 268.52) */;
|
||||
--wa-color-indigo-20: #1e2d6c /* oklch(32.512% 0.11114 269.2) */;
|
||||
--wa-color-indigo-10: #101a45 /* oklch(23.864% 0.08185 269.36) */;
|
||||
--wa-color-indigo-05: #080f2f /* oklch(18.545% 0.06467 269.54) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-60);
|
||||
--wa-color-indigo-key: 60;
|
||||
|
||||
--wa-color-purple-95: #f3f0ff /* oklch(96.181% 0.02019 295.19) */;
|
||||
--wa-color-purple-90: #eae2ff /* oklch(92.785% 0.03984 298.23) */;
|
||||
--wa-color-purple-80: #d1c0ff /* oklch(84.322% 0.08845 296.84) */;
|
||||
--wa-color-purple-70: #b8a0fd /* oklch(76.245% 0.13251 294.93) */;
|
||||
--wa-color-purple-60: #a080fb /* oklch(68.452% 0.17635 293.16) */;
|
||||
--wa-color-purple-50: #7f57f5 /* oklch(58.672% 0.22391 289.27) */;
|
||||
--wa-color-purple-40: #603dc7 /* oklch(48.471% 0.20143 288.1) */;
|
||||
--wa-color-purple-30: #4c309c /* oklch(40.999% 0.16546 288.84) */;
|
||||
--wa-color-purple-20: #372372 /* oklch(33.171% 0.12869 289.06) */;
|
||||
--wa-color-purple-10: #211544 /* oklch(24.211% 0.08441 290.44) */;
|
||||
--wa-color-purple-05: #150d2a /* oklch(18.859% 0.05661 292.88) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-70: #b8a0fe /* oklch(76.293% 0.13384 294.76) */;
|
||||
--wa-color-purple-60: #9e83f2 /* oklch(68.278% 0.16015 292.86) */;
|
||||
--wa-color-purple-50: #7b65cb /* oklch(57.62% 0.15206 290.77) */;
|
||||
--wa-color-purple-40: #5c4ba7 /* oklch(47.824% 0.14213 288.32) */;
|
||||
--wa-color-purple-30: #493590 /* oklch(40.487% 0.14337 288.41) */;
|
||||
--wa-color-purple-20: #371f7a /* oklch(33.309% 0.1443 287.97) */;
|
||||
--wa-color-purple-10: #250161 /* oklch(25.284% 0.14353 287.73) */;
|
||||
--wa-color-purple-05: #150047 /* oklch(19.858% 0.11707 283.68) */;
|
||||
--wa-color-purple: var(--wa-color-purple-60);
|
||||
--wa-color-purple-key: 60;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e3e5ea /* oklch(92.181% 0.00709 268.54) */;
|
||||
--wa-color-gray-80: #c7cad4 /* oklch(83.966% 0.01424 272.66) */;
|
||||
--wa-color-gray-70: #a9afbe /* oklch(75.397% 0.0225 268.37) */;
|
||||
--wa-color-gray-60: #8d95a8 /* oklch(66.968% 0.02959 267.4) */;
|
||||
--wa-color-gray-95: #f1f2f5 /* oklch(96.124% 0.00414 271.37) */;
|
||||
--wa-color-gray-90: #e4e6eb /* oklch(92.484% 0.00709 268.54) */;
|
||||
--wa-color-gray-80: #c5cad5 /* oklch(83.843% 0.01625 266.26) */;
|
||||
--wa-color-gray-70: #a8afbf /* oklch(75.353% 0.02424 266.85) */;
|
||||
--wa-color-gray-60: #8c95aa /* oklch(66.963% 0.0328 267.07) */;
|
||||
--wa-color-gray-50: #6a7591 /* oklch(56.369% 0.04546 268.14) */;
|
||||
--wa-color-gray-40: #4b5977 /* oklch(46.454% 0.05212 265.05) */;
|
||||
--wa-color-gray-30: #344566 /* oklch(39.129% 0.06051 263) */;
|
||||
--wa-color-gray-20: #1a3356 /* oklch(32.021% 0.07012 257.11) */;
|
||||
--wa-color-gray-10: #0e1e35 /* oklch(23.442% 0.04969 257.55) */;
|
||||
--wa-color-gray-05: #081220 /* oklch(18.072% 0.03272 256.72) */;
|
||||
--wa-color-gray-40: #4a597a /* oklch(46.526% 0.05715 265.38) */;
|
||||
--wa-color-gray-30: #384565 /* oklch(39.365% 0.05713 266.86) */;
|
||||
--wa-color-gray-20: #26314f /* oklch(31.829% 0.05593 267.86) */;
|
||||
--wa-color-gray-10: #131c38 /* oklch(23.46% 0.0555 268.48) */;
|
||||
--wa-color-gray-05: #0a1127 /* oklch(18.485% 0.04617 268.36) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -2,96 +2,103 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-classic {
|
||||
--wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
|
||||
--wa-color-red-90: #fedede /* oklch(92.701% 0.03551 17.81) */;
|
||||
--wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
|
||||
--wa-color-red-70: #fa9292 /* oklch(76.951% 0.12587 20.376) */;
|
||||
--wa-color-red-60: #ee6c6c /* oklch(68.861% 0.16125 22.227) */;
|
||||
--wa-color-red-50: #d43c3c /* oklch(58.269% 0.18916 25.263) */;
|
||||
--wa-color-red-40: #ac1e1e /* oklch(48.229% 0.17712 27.066) */;
|
||||
--wa-color-red-30: #640f0f /* oklch(32.787% 0.11797 26.73) */;
|
||||
--wa-color-red-20: #631111 /* oklch(32.78% 0.11503 26.34) */;
|
||||
--wa-color-red-10: #3b0d0d /* oklch(24.059% 0.07249 24.391) */;
|
||||
--wa-color-red-05: #260606 /* oklch(18.371% 0.05502 24.325) */;
|
||||
--wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
|
||||
--wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
|
||||
--wa-color-red-80: #ffb8b4 /* oklch(84.753% 0.08313 22.598) */;
|
||||
--wa-color-red-70: #fd908e /* oklch(76.913% 0.13219 21.705) */;
|
||||
--wa-color-red-60: #f46766 /* oklch(68.945% 0.17423 23.179) */;
|
||||
--wa-color-red-50: #df2f2e /* oklch(58.922% 0.21141 26.911) */;
|
||||
--wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
|
||||
--wa-color-red-30: #910000 /* oklch(41.235% 0.16921 29.234) */;
|
||||
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
|
||||
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
|
||||
--wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #fef2c4 /* oklch(95.928% 0.0607 95.131) */;
|
||||
--wa-color-yellow-90: #fde494 /* oklch(92.185% 0.10303 92.708) */;
|
||||
--wa-color-yellow-80: #fbc129 /* oklch(84.088% 0.16334 85.185) */;
|
||||
--wa-color-yellow-70: #f29c0b /* oklch(76.145% 0.1631 70.065) */;
|
||||
--wa-color-yellow-60: #db7e13 /* oklch(68.058% 0.15388 60.67) */;
|
||||
--wa-color-yellow-50: #af6005 /* oklch(56.918% 0.13324 58.984) */;
|
||||
--wa-color-yellow-40: #904207 /* oklch(47.288% 0.12241 49.414) */;
|
||||
--wa-color-yellow-30: #713406 /* oklch(40.01% 0.10093 50.35) */;
|
||||
--wa-color-yellow-20: #532408 /* oklch(32.223% 0.07974 47.215) */;
|
||||
--wa-color-yellow-10: #321606 /* oklch(23.771% 0.05225 48.671) */;
|
||||
--wa-color-yellow-05: #1f0c01 /* oklch(18.046% 0.04102 55.818) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-95: #fef2bf /* oklch(95.823% 0.06674 96.369) */;
|
||||
--wa-color-yellow-90: #fde588 /* oklch(92.2% 0.11633 95.327) */;
|
||||
--wa-color-yellow-80: #f4c34e /* oklch(83.998% 0.14252 85.76) */;
|
||||
--wa-color-yellow-70: #e9a010 /* oklch(75.825% 0.15689 75.537) */;
|
||||
--wa-color-yellow-60: #de7c00 /* oklch(68.073% 0.15991 59.827) */;
|
||||
--wa-color-yellow-50: #bc5908 /* oklch(57.654% 0.1491 50.241) */;
|
||||
--wa-color-yellow-40: #934107 /* oklch(47.603% 0.12628 47.819) */;
|
||||
--wa-color-yellow-30: #763104 /* oklch(40.324% 0.1093 46.564) */;
|
||||
--wa-color-yellow-20: #572301 /* oklch(32.677% 0.08796 47.926) */;
|
||||
--wa-color-yellow-10: #371300 /* oklch(24.001% 0.06559 47.77) */;
|
||||
--wa-color-yellow-05: #250a00 /* oklch(18.773% 0.0519 47.039) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-60);
|
||||
--wa-color-yellow-key: 60;
|
||||
|
||||
--wa-color-green-95: #e9f5ed /* oklch(95.897% 0.01651 156.91) */;
|
||||
--wa-color-green-90: #cfedd9 /* oklch(91.883% 0.04142 156.31) */;
|
||||
--wa-color-green-80: #a2d5b4 /* oklch(82.826% 0.07031 156.17) */;
|
||||
--wa-color-green-70: #6cc08a /* oklch(73.992% 0.11416 154.35) */;
|
||||
--wa-color-green-60: #38a961 /* oklch(65.365% 0.14702 151.78) */;
|
||||
--wa-color-green-50: #178640 /* oklch(54.51% 0.14175 149.98) */;
|
||||
--wa-color-green-40: #006823 /* oklch(45.073% 0.13335 147.17) */;
|
||||
--wa-color-green-30: #0d5026 /* oklch(38.028% 0.09504 150.7) */;
|
||||
--wa-color-green-20: #0c391d /* oklch(30.614% 0.06954 152.08) */;
|
||||
--wa-color-green-10: #082213 /* oklch(22.658% 0.04352 155.31) */;
|
||||
--wa-color-green-05: #02140a /* oklch(17.084% 0.03423 159.06) */;
|
||||
--wa-color-green-95: #d4fce1 /* oklch(95.554% 0.05477 155.71) */;
|
||||
--wa-color-green-90: #a4f8c2 /* oklch(91.11% 0.1107 155.35) */;
|
||||
--wa-color-green-80: #6ae095 /* oklch(81.924% 0.15151 153.52) */;
|
||||
--wa-color-green-70: #44c670 /* oklch(73.506% 0.16742 151) */;
|
||||
--wa-color-green-60: #21ab52 /* oklch(65.151% 0.17062 149.59) */;
|
||||
--wa-color-green-50: #0d873f /* oklch(54.644% 0.14593 150.18) */;
|
||||
--wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
|
||||
--wa-color-green-30: #115029 /* oklch(38.182% 0.09049 151.63) */;
|
||||
--wa-color-green-20: #0a3a1c /* oklch(30.854% 0.07315 151.48) */;
|
||||
--wa-color-green-10: #04230f /* oklch(22.692% 0.05324 151.92) */;
|
||||
--wa-color-green-05: #021608 /* oklch(17.756% 0.04076 152.68) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
--wa-color-green-key: 60;
|
||||
|
||||
--wa-color-cyan-95: #d0fbf3 /* oklch(95.575% 0.04532 182.8) */;
|
||||
--wa-color-cyan-90: #a9f4e8 /* oklch(91.479% 0.07585 183.56) */;
|
||||
--wa-color-cyan-80: #5bdecd /* oklch(82.349% 0.1175 183.5) */;
|
||||
--wa-color-cyan-70: #36c2b3 /* oklch(73.796% 0.11779 184.4) */;
|
||||
--wa-color-cyan-60: #12a797 /* oklch(65.522% 0.11415 182.81) */;
|
||||
--wa-color-cyan-50: #0b8278 /* oklch(54.658% 0.09409 185.3) */;
|
||||
--wa-color-cyan-40: #09635b /* oklch(45.055% 0.07686 185.06) */;
|
||||
--wa-color-cyan-30: #0a4e49 /* oklch(38.363% 0.06313 187.15) */;
|
||||
--wa-color-cyan-20: #0a3835 /* oklch(30.997% 0.04799 188.56) */;
|
||||
--wa-color-cyan-10: #082120 /* oklch(22.8% 0.03074 191.62) */;
|
||||
--wa-color-cyan-05: #021413 /* oklch(17.442% 0.02643 190.53) */;
|
||||
--wa-color-cyan-95: #d8fafc /* oklch(96.149% 0.03524 200.93) */;
|
||||
--wa-color-cyan-90: #a3f2f7 /* oklch(91.187% 0.07744 200.93) */;
|
||||
--wa-color-cyan-80: #67dbe2 /* oklch(82.721% 0.1051 200.68) */;
|
||||
--wa-color-cyan-70: #29c0ca /* oklch(73.859% 0.11825 201.93) */;
|
||||
--wa-color-cyan-60: #0ca4ae /* oklch(65.523% 0.10997 202.61) */;
|
||||
--wa-color-cyan-50: #0c828c /* oklch(55.424% 0.09237 204.53) */;
|
||||
--wa-color-cyan-40: #0a626b /* oklch(45.428% 0.07504 206.17) */;
|
||||
--wa-color-cyan-30: #084d55 /* oklch(38.542% 0.06312 207.36) */;
|
||||
--wa-color-cyan-20: #06383f /* oklch(31.335% 0.05062 209.3) */;
|
||||
--wa-color-cyan-10: #002127 /* oklch(22.739% 0.03961 211.94) */;
|
||||
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
--wa-color-cyan-key: 70;
|
||||
|
||||
--wa-color-blue-95: #e5f4fe /* oklch(95.896% 0.02085 236.75) */;
|
||||
--wa-color-blue-90: #c8ebfd /* oklch(92.061% 0.04406 230.21) */;
|
||||
--wa-color-blue-80: #80d4fc /* oklch(83.114% 0.09915 230.17) */;
|
||||
--wa-color-blue-70: #37bbf5 /* oklch(74.731% 0.13762 232.44) */;
|
||||
--wa-color-blue-60: #0d9ee0 /* oklch(66.354% 0.14388 237.59) */;
|
||||
--wa-color-blue-50: #027ab9 /* oklch(55.557% 0.13184 242.23) */;
|
||||
--wa-color-blue-40: #015d8d /* oklch(45.762% 0.10698 241.38) */;
|
||||
--wa-color-blue-30: #024970 /* oklch(38.805% 0.0903 241.59) */;
|
||||
--wa-color-blue-20: #04354f /* oklch(31.306% 0.06703 238.73) */;
|
||||
--wa-color-blue-10: #05202f /* oklch(23.154% 0.04349 236.83) */;
|
||||
--wa-color-blue-05: #04121b /* oklch(17.393% 0.0282 236.81) */;
|
||||
--wa-color-blue-95: #e2f6ff /* oklch(96.112% 0.0243 226.47) */;
|
||||
--wa-color-blue-90: #c0ecff /* oklch(91.822% 0.0523 226) */;
|
||||
--wa-color-blue-80: #7fd4fc /* oklch(83.068% 0.09979 229.91) */;
|
||||
--wa-color-blue-70: #48b9f4 /* oklch(74.644% 0.13162 235.42) */;
|
||||
--wa-color-blue-60: #1f9de2 /* oklch(66.419% 0.14398 240.02) */;
|
||||
--wa-color-blue-50: #007bbc /* oklch(55.956% 0.1346 242.72) */;
|
||||
--wa-color-blue-40: #005d93 /* oklch(46.121% 0.11438 244.28) */;
|
||||
--wa-color-blue-30: #004975 /* oklch(39.093% 0.09705 244.33) */;
|
||||
--wa-color-blue-20: #003558 /* oklch(31.8% 0.08026 245.13) */;
|
||||
--wa-color-blue-10: #001f36 /* oklch(23.093% 0.05763 244.59) */;
|
||||
--wa-color-blue-05: #001325 /* oklch(18.113% 0.04675 246.17) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-key: 60;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
|
||||
--wa-color-indigo-90: #dee5fd /* oklch(92.388% 0.03348 272.78) */;
|
||||
--wa-color-indigo-80: #bec8f2 /* oklch(83.901% 0.05981 274.54) */;
|
||||
--wa-color-indigo-70: #9dabf0 /* oklch(75.639% 0.10065 274.93) */;
|
||||
--wa-color-indigo-60: #818cf7 /* oklch(67.953% 0.15693 276.94) */;
|
||||
--wa-color-indigo-50: #6063eb /* oklch(57.366% 0.20061 277.06) */;
|
||||
--wa-color-indigo-40: #4941d3 /* oklch(48.251% 0.21482 277.09) */;
|
||||
--wa-color-indigo-30: #3930ad /* oklch(40.969% 0.18954 277.17) */;
|
||||
--wa-color-indigo-20: #29247a /* oklch(32.82% 0.14032 277.91) */;
|
||||
--wa-color-indigo-10: #191843 /* oklch(23.918% 0.07895 279.64) */;
|
||||
--wa-color-indigo-05: #0f0e26 /* oklch(18.064% 0.04799 282.35) */;
|
||||
--wa-color-indigo-95: #eff2ff /* oklch(96.265% 0.01769 275.64) */;
|
||||
--wa-color-indigo-90: #e0e5ff /* oklch(92.602% 0.03569 277.03) */;
|
||||
--wa-color-indigo-80: #bec7ff /* oklch(84.198% 0.07895 277.45) */;
|
||||
--wa-color-indigo-70: #9da9fc /* oklch(75.797% 0.11994 276.85) */;
|
||||
--wa-color-indigo-60: #808bf8 /* oklch(67.752% 0.15983 276.9) */;
|
||||
--wa-color-indigo-50: #6163f0 /* oklch(57.814% 0.20686 277.14) */;
|
||||
--wa-color-indigo-40: #4a41d4 /* oklch(48.413% 0.21583 277.35) */;
|
||||
--wa-color-indigo-30: #3b369d /* oklch(40.562% 0.16149 278.54) */;
|
||||
--wa-color-indigo-20: #2b2872 /* oklch(32.937% 0.12339 278.99) */;
|
||||
--wa-color-indigo-10: #191748 /* oklch(24.174% 0.08853 279.28) */;
|
||||
--wa-color-indigo-05: #0e0d31 /* oklch(18.772% 0.06933 278.6) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-purple-70: #cb9afd /* oklch(76.897% 0.14583 306.03) */;
|
||||
--wa-color-purple-60: #b976f9 /* oklch(69.137% 0.19284 305.56) */;
|
||||
--wa-color-purple-50: #9d46ec /* oklch(58.928% 0.237 303.82) */;
|
||||
--wa-color-purple-40: #7d22cc /* oklch(49.256% 0.23487 302) */;
|
||||
--wa-color-purple-30: #631f9c /* oklch(41.597% 0.18675 303.6) */;
|
||||
--wa-color-purple-20: #48176e /* oklch(33.244% 0.14133 305.45) */;
|
||||
--wa-color-purple-10: #2e054e /* oklch(24.726% 0.11996 303.55) */;
|
||||
--wa-color-purple-05: #1d0331 /* oklch(18.767% 0.08707 305.63) */;
|
||||
--wa-color-purple-95: #f6f0ff /* oklch(96.412% 0.02086 304.04) */;
|
||||
--wa-color-purple-90: #eee0ff /* oklch(92.72% 0.04406 305.89) */;
|
||||
--wa-color-purple-80: #dcbdff /* oklch(84.694% 0.09583 305.85) */;
|
||||
--wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
|
||||
--wa-color-purple-60: #b874ff /* oklch(69.085% 0.2024 304.19) */;
|
||||
--wa-color-purple-50: #9f46ee /* oklch(59.304% 0.23941 304.1) */;
|
||||
--wa-color-purple-40: #7e2ac2 /* oklch(49.181% 0.21892 304.24) */;
|
||||
--wa-color-purple-30: #632198 /* oklch(41.448% 0.18071 304.64) */;
|
||||
--wa-color-purple-20: #4a1574 /* oklch(33.839% 0.15043 304.56) */;
|
||||
--wa-color-purple-10: #2e094b /* oklch(24.855% 0.11212 304.52) */;
|
||||
--wa-color-purple-05: #1e0433 /* oklch(19.319% 0.0877 304.85) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-key: 50;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
|
||||
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #1d1d20 /* oklch(23.201% 0.00571 285.95) */;
|
||||
--wa-color-gray-05: #101113 /* oklch(17.739% 0.00442 264.46) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -2,96 +2,103 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-default {
|
||||
--wa-color-red-95: #ffefef /* oklch(96.475% 0.01735 17.458) */;
|
||||
--wa-color-red-90: #ffdddc /* oklch(92.547% 0.03785 19.865) */;
|
||||
--wa-color-red-80: #ffb7b6 /* oklch(84.626% 0.08407 19.872) */;
|
||||
--wa-color-red-70: #fc9090 /* oklch(76.834% 0.13083 20.537) */;
|
||||
--wa-color-red-60: #f2676c /* oklch(68.768% 0.17146 20.596) */;
|
||||
--wa-color-red-50: #de2d44 /* oklch(58.887% 0.20998 20.414) */;
|
||||
--wa-color-red-40: #b11036 /* oklch(48.766% 0.18763 17.443) */;
|
||||
--wa-color-red-30: #861a2f /* oklch(40.968% 0.14194 15.902) */;
|
||||
--wa-color-red-20: #641122 /* oklch(33.29% 0.11505 15.196) */;
|
||||
--wa-color-red-10: #400712 /* oklch(24.506% 0.08542 15.881) */;
|
||||
--wa-color-red-05: #2a030a /* oklch(18.798% 0.06593 14.104) */;
|
||||
--wa-color-red-95: #fff0ef /* oklch(96.667% 0.01632 22.08) */;
|
||||
--wa-color-red-90: #ffdedc /* oklch(92.735% 0.03679 21.966) */;
|
||||
--wa-color-red-80: #ffb8b6 /* oklch(84.803% 0.08289 20.771) */;
|
||||
--wa-color-red-70: #fd8f90 /* oklch(76.801% 0.13322 20.052) */;
|
||||
--wa-color-red-60: #f3676c /* oklch(68.914% 0.17256 20.646) */;
|
||||
--wa-color-red-50: #dc3146 /* oklch(58.857% 0.20512 20.223) */;
|
||||
--wa-color-red-40: #b30532 /* oklch(48.737% 0.19311 18.413) */;
|
||||
--wa-color-red-30: #8a132c /* oklch(41.17% 0.1512 16.771) */;
|
||||
--wa-color-red-20: #631323 /* oklch(33.297% 0.11208 14.847) */;
|
||||
--wa-color-red-10: #3e0913 /* oklch(24.329% 0.08074 15.207) */;
|
||||
--wa-color-red-05: #2a040b /* oklch(19.016% 0.06394 13.71) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #fdf3ba /* oklch(95.838% 0.07362 99.275) */;
|
||||
--wa-color-yellow-90: #fee590 /* oklch(92.407% 0.10827 93.577) */;
|
||||
--wa-color-yellow-80: #fcc041 /* oklch(84.136% 0.1524 82.087) */;
|
||||
--wa-color-yellow-70: #f39b00 /* oklch(76.07% 0.16522 69.58) */;
|
||||
--wa-color-yellow-60: #e07b00 /* oklch(68.175% 0.16203 58.675) */;
|
||||
--wa-color-yellow-50: #bb5a00 /* oklch(57.639% 0.14858 51.823) */;
|
||||
--wa-color-yellow-40: #924200 /* oklch(47.573% 0.12584 49.96) */;
|
||||
--wa-color-yellow-30: #743200 /* oklch(40.128% 0.10738 49.167) */;
|
||||
--wa-color-yellow-20: #572300 /* oklch(32.668% 0.08836 48.446) */;
|
||||
--wa-color-yellow-10: #361300 /* oklch(23.81% 0.06438 48.467) */;
|
||||
--wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-70);
|
||||
--wa-color-yellow-95: #fef3cd /* oklch(96.322% 0.05069 93.748) */;
|
||||
--wa-color-yellow-90: #ffe495 /* oklch(92.377% 0.10246 91.296) */;
|
||||
--wa-color-yellow-80: #fac22b /* oklch(84.185% 0.16263 85.991) */;
|
||||
--wa-color-yellow-70: #ef9d00 /* oklch(75.949% 0.16251 72.13) */;
|
||||
--wa-color-yellow-60: #da7e00 /* oklch(67.883% 0.15587 62.246) */;
|
||||
--wa-color-yellow-50: #b45f04 /* oklch(57.449% 0.13836 56.585) */;
|
||||
--wa-color-yellow-40: #8c4602 /* oklch(47.319% 0.11666 54.663) */;
|
||||
--wa-color-yellow-30: #6f3601 /* oklch(40.012% 0.09892 54.555) */;
|
||||
--wa-color-yellow-20: #532600 /* oklch(32.518% 0.08157 53.927) */;
|
||||
--wa-color-yellow-10: #331600 /* oklch(23.846% 0.05834 56.02) */;
|
||||
--wa-color-yellow-05: #220c00 /* oklch(18.585% 0.04625 54.588) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #e2f9e2 /* oklch(95.91% 0.03884 145.26) */;
|
||||
--wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
|
||||
--wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
|
||||
--wa-color-green-80: #92da97 /* oklch(82.37% 0.11765 146.06) */;
|
||||
--wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
|
||||
--wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
|
||||
--wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
|
||||
--wa-color-green-50: #008825 /* oklch(54.493% 0.16976 145.33) */;
|
||||
--wa-color-green-40: #006800 /* oklch(44.821% 0.15252 142.5) */;
|
||||
--wa-color-green-30: #005300 /* oklch(38.319% 0.13039 142.5) */;
|
||||
--wa-color-green-20: #003c00 /* oklch(30.861% 0.10501 142.5) */;
|
||||
--wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
|
||||
--wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
|
||||
--wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
|
||||
--wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
|
||||
--wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
|
||||
--wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
|
||||
--wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
|
||||
--wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
|
||||
--wa-color-green: var(--wa-color-green-60);
|
||||
--wa-color-green-key: 60;
|
||||
|
||||
--wa-color-cyan-95: #e3f7f5 /* oklch(96.09% 0.02114 189.57) */;
|
||||
--wa-color-cyan-90: #c6eeeb /* oklch(91.997% 0.04158 190.86) */;
|
||||
--wa-color-cyan-80: #81d9d3 /* oklch(82.83% 0.08563 190.03) */;
|
||||
--wa-color-cyan-70: #34c2b9 /* oklch(73.949% 0.11679 188.57) */;
|
||||
--wa-color-cyan-60: #10a69d /* oklch(65.445% 0.11161 187.92) */;
|
||||
--wa-color-cyan-50: #00837c /* oklch(54.971% 0.09552 188.22) */;
|
||||
--wa-color-cyan-40: #00645e /* oklch(45.331% 0.07895 187.65) */;
|
||||
--wa-color-cyan-30: #004e49 /* oklch(38.182% 0.06656 187.42) */;
|
||||
--wa-color-cyan-20: #003935 /* oklch(31.03% 0.05415 187.16) */;
|
||||
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-cyan-05: #001513 /* oklch(17.625% 0.03077 187.05) */;
|
||||
--wa-color-cyan-95: #e3f6fb /* oklch(96.063% 0.02111 215.26) */;
|
||||
--wa-color-cyan-90: #c5ecf7 /* oklch(91.881% 0.04314 216.7) */;
|
||||
--wa-color-cyan-80: #7fd6ec /* oklch(82.906% 0.08934 215.86) */;
|
||||
--wa-color-cyan-70: #2fbedc /* oklch(74.18% 0.12169 215.86) */;
|
||||
--wa-color-cyan-60: #00a3c0 /* oklch(65.939% 0.11738 216.42) */;
|
||||
--wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
|
||||
--wa-color-cyan-40: #026274 /* oklch(45.735% 0.08074 216.18) */;
|
||||
--wa-color-cyan-30: #014c5b /* oklch(38.419% 0.06817 216.88) */;
|
||||
--wa-color-cyan-20: #003844 /* oklch(31.427% 0.05624 217.32) */;
|
||||
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
|
||||
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
--wa-color-cyan-key: 70;
|
||||
|
||||
--wa-color-blue-95: #ebf4ff /* oklch(96.361% 0.01763 253.34) */;
|
||||
--wa-color-blue-90: #d4e7ff /* oklch(92.129% 0.03859 254.29) */;
|
||||
--wa-color-blue-80: #a6ccff /* oklch(83.582% 0.08269 255.9) */;
|
||||
--wa-color-blue-70: #77b1ff /* oklch(75.268% 0.12855 256.14) */;
|
||||
--wa-color-blue-60: #4895fd /* oklch(67.184% 0.17212 256.8) */;
|
||||
--wa-color-blue-50: #0070ef /* oklch(56.997% 0.20953 257.84) */;
|
||||
--wa-color-blue-40: #0055b8 /* oklch(46.934% 0.17173 257.73) */;
|
||||
--wa-color-blue-30: #004390 /* oklch(39.638% 0.1408 257.02) */;
|
||||
--wa-color-blue-20: #00306c /* oklch(32.102% 0.11523 257.27) */;
|
||||
--wa-color-blue-10: #001c45 /* oklch(23.545% 0.08493 257.39) */;
|
||||
--wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
|
||||
--wa-color-blue-95: #e8f3ff /* oklch(95.944% 0.01996 250.38) */;
|
||||
--wa-color-blue-90: #d1e8ff /* oklch(92.121% 0.03985 248.26) */;
|
||||
--wa-color-blue-80: #9fceff /* oklch(83.572% 0.08502 249.92) */;
|
||||
--wa-color-blue-70: #6eb3ff /* oklch(75.256% 0.1308 252.03) */;
|
||||
--wa-color-blue-60: #3e96ff /* oklch(67.196% 0.17661 254.97) */;
|
||||
--wa-color-blue-50: #0071ec /* oklch(56.972% 0.20461 257.29) */;
|
||||
--wa-color-blue-40: #0053c0 /* oklch(47.175% 0.1846 259.19) */;
|
||||
--wa-color-blue-30: #003f9c /* oklch(39.805% 0.16217 259.98) */;
|
||||
--wa-color-blue-20: #002d77 /* oklch(32.436% 0.1349 260.35) */;
|
||||
--wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
|
||||
--wa-color-blue-05: #000f35 /* oklch(18.565% 0.07904 260.75) */;
|
||||
--wa-color-blue: var(--wa-color-blue-50);
|
||||
--wa-color-blue-key: 50;
|
||||
|
||||
--wa-color-indigo-95: #f0f2fe /* oklch(96.311% 0.01617 278.51) */;
|
||||
--wa-color-indigo-90: #e2e4fc /* oklch(92.459% 0.03255 281.95) */;
|
||||
--wa-color-indigo-80: #c2c6f8 /* oklch(84.027% 0.06987 281.2) */;
|
||||
--wa-color-indigo-70: #a5a9f2 /* oklch(75.915% 0.10451 281.18) */;
|
||||
--wa-color-indigo-60: #8a8beb /* oklch(67.735% 0.14003 281.54) */;
|
||||
--wa-color-indigo-50: #6b65e2 /* oklch(57.839% 0.18419 281.11) */;
|
||||
--wa-color-indigo-40: #5246c1 /* oklch(48.113% 0.18471 281.3) */;
|
||||
--wa-color-indigo-30: #412eaa /* oklch(41.007% 0.18636 281.32) */;
|
||||
--wa-color-indigo-20: #321393 /* oklch(34.125% 0.1858 281.27) */;
|
||||
--wa-color-indigo-10: #1c006a /* oklch(25.437% 0.15565 278.46) */;
|
||||
--wa-color-indigo-05: #130049 /* oklch(19.925% 0.11977 280.89) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
|
||||
--wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
|
||||
--wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
|
||||
--wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
|
||||
--wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
|
||||
--wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
|
||||
--wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
|
||||
--wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
|
||||
--wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
|
||||
--wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
|
||||
--wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-key: 50;
|
||||
|
||||
--wa-color-purple-95: #f9effd /* oklch(96.395% 0.02131 316.46) */;
|
||||
--wa-color-purple-90: #f4defb /* oklch(92.703% 0.04524 317.99) */;
|
||||
--wa-color-purple-80: #e7baf7 /* oklch(84.83% 0.09589 317.09) */;
|
||||
--wa-color-purple-70: #d996ef /* oklch(76.972% 0.14185 317.52) */;
|
||||
--wa-color-purple-60: #c674e1 /* oklch(68.954% 0.1743 317.29) */;
|
||||
--wa-color-purple-50: #a94dc6 /* oklch(58.676% 0.19389 317.27) */;
|
||||
--wa-color-purple-40: #8732a1 /* oklch(48.724% 0.18099 317.24) */;
|
||||
--wa-color-purple-30: #6d2283 /* oklch(41.31% 0.16202 317.42) */;
|
||||
--wa-color-purple-20: #521564 /* oklch(33.69% 0.13677 317.22) */;
|
||||
--wa-color-purple-10: #330940 /* oklch(24.654% 0.10189 316.7) */;
|
||||
--wa-color-purple-05: #22042b /* oklch(19.232% 0.08005 317.42) */;
|
||||
--wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
|
||||
--wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
|
||||
--wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
|
||||
--wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
|
||||
--wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
|
||||
--wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
|
||||
--wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
|
||||
--wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
|
||||
--wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
|
||||
--wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
|
||||
--wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-key: 50;
|
||||
|
||||
--wa-color-gray-95: #f1f2f3 /* oklch(96.067% 0.00172 247.84) */;
|
||||
--wa-color-gray-90: #e4e5e9 /* oklch(92.228% 0.0055 274.96) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #1b1d26 /* oklch(23.277% 0.01762 275.14) */;
|
||||
--wa-color-gray-05: #101219 /* oklch(18.342% 0.01472 272.42) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -2,107 +2,115 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-elegant {
|
||||
--wa-color-red-95: #fdeeef /* oklch(96.122% 0.01629 12.781) */;
|
||||
--wa-color-red-90: #fcdfe0 /* oklch(92.771% 0.0321 15.37) */;
|
||||
--wa-color-red-80: #f8b9bc /* oklch(84.416% 0.07319 15.56) */;
|
||||
--wa-color-red-70: #f0969c /* oklch(76.649% 0.10862 15.608) */;
|
||||
--wa-color-red-60: #e3727d /* oklch(68.562% 0.1405 15.424) */;
|
||||
--wa-color-red-50: #cc465a /* oklch(58.534% 0.16911 15.341) */;
|
||||
--wa-color-red-95: #feeeef /* oklch(96.203% 0.01739 13.095) */;
|
||||
--wa-color-red-90: #fbdfe1 /* oklch(92.712% 0.03103 12.802) */;
|
||||
--wa-color-red-80: #f2bcc0 /* oklch(84.468% 0.06249 13.512) */;
|
||||
--wa-color-red-70: #e79aa1 /* oklch(76.427% 0.09275 13.523) */;
|
||||
--wa-color-red-60: #db7781 /* oklch(68.361% 0.12461 14.576) */;
|
||||
--wa-color-red-50: #c64b5d /* oklch(58.247% 0.15692 14.667) */;
|
||||
--wa-color-red-40: #ac1d3d /* oklch(48.628% 0.17601 15.401) */;
|
||||
--wa-color-red-30: #8f012c /* oklch(41.346% 0.16471 15.45) */;
|
||||
--wa-color-red-20: #6b001c /* oklch(33.484% 0.13403 16.992) */;
|
||||
--wa-color-red-10: #44000d /* oklch(24.5% 0.09818 18.249) */;
|
||||
--wa-color-red-05: #2e0006 /* oklch(19.077% 0.07648 18.657) */;
|
||||
--wa-color-red-30: #8f002b /* oklch(41.286% 0.16513 15.826) */;
|
||||
--wa-color-red-20: #6b001f /* oklch(33.545% 0.13412 15.162) */;
|
||||
--wa-color-red-10: #430212 /* oklch(24.607% 0.09481 14.336) */;
|
||||
--wa-color-red-05: #2d0109 /* oklch(19.102% 0.07343 14.851) */;
|
||||
--wa-color-red: var(--wa-color-red-40);
|
||||
--wa-color-red-key: 40;
|
||||
|
||||
--wa-color-yellow-95: #f5f2e5 /* oklch(95.994% 0.01748 96.105) */;
|
||||
--wa-color-yellow-90: #ece6cc /* oklch(92.281% 0.03499 96.315) */;
|
||||
--wa-color-yellow-80: #dac992 /* oklch(83.686% 0.07427 92.946) */;
|
||||
--wa-color-yellow-70: #c9ac5c /* oklch(75.33% 0.10529 89.848) */;
|
||||
--wa-color-yellow-60: #b98f27 /* oklch(67.248% 0.12518 85.119) */;
|
||||
--wa-color-yellow-95: #f7f4da /* oklch(96.266% 0.03422 101.63) */;
|
||||
--wa-color-yellow-90: #ede7c3 /* oklch(92.349% 0.04769 99.435) */;
|
||||
--wa-color-yellow-80: #d8ca96 /* oklch(83.793% 0.06999 94.829) */;
|
||||
--wa-color-yellow-70: #c5ac6b /* oklch(75.167% 0.08892 89.16) */;
|
||||
--wa-color-yellow-60: #b39043 /* oklch(67.06% 0.10423 84.751) */;
|
||||
--wa-color-yellow-50: #9b6d09 /* oklch(56.774% 0.11557 78.692) */;
|
||||
--wa-color-yellow-40: #785007 /* oklch(46.422% 0.09514 74.644) */;
|
||||
--wa-color-yellow-30: #613e06 /* oklch(39.54% 0.08123 71.804) */;
|
||||
--wa-color-yellow-20: #492c05 /* oklch(32.206% 0.06602 68.329) */;
|
||||
--wa-color-yellow-10: #2b1a02 /* oklch(23.457% 0.04659 73.352) */;
|
||||
--wa-color-yellow-05: #191008 /* oklch(18.243% 0.02161 62.915) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-60);
|
||||
--wa-color-yellow-40: #7c4f00 /* oklch(46.714% 0.10011 71.858) */;
|
||||
--wa-color-yellow-30: #623e00 /* oklch(39.642% 0.08465 72.511) */;
|
||||
--wa-color-yellow-20: #482d04 /* oklch(32.274% 0.06572 71.644) */;
|
||||
--wa-color-yellow-10: #2c1a02 /* oklch(23.612% 0.04739 71.633) */;
|
||||
--wa-color-yellow-05: #1d0f01 /* oklch(18.42% 0.03735 69.287) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-50);
|
||||
--wa-color-yellow-key: 50;
|
||||
|
||||
--wa-color-green-95: #ecf4f1 /* oklch(96.029% 0.00935 171.8) */;
|
||||
--wa-color-green-90: #dae9e3 /* oklch(92.11% 0.01786 170.06) */;
|
||||
--wa-color-green-80: #b0d1c4 /* oklch(83.284% 0.03952 169.54) */;
|
||||
--wa-color-green-70: #88b9a6 /* oklch(74.553% 0.05874 168.82) */;
|
||||
--wa-color-green-60: #5fa288 /* oklch(65.987% 0.07948 167.12) */;
|
||||
--wa-color-green-50: #2d8462 /* oklch(55.19% 0.09885 163.66) */;
|
||||
--wa-color-green-40: #00663e /* oklch(44.949% 0.10492 158.13) */;
|
||||
--wa-color-green-30: #005031 /* oklch(38.025% 0.08722 159.15) */;
|
||||
--wa-color-green-20: #003b24 /* oklch(31.092% 0.0701 160.21) */;
|
||||
--wa-color-green-10: #002316 /* oklch(22.679% 0.04824 164.14) */;
|
||||
--wa-color-green-05: #00160d /* oklch(17.744% 0.03707 165.47) */;
|
||||
--wa-color-green-95: #eaf6ef /* oklch(96.224% 0.01568 160.63) */;
|
||||
--wa-color-green-90: #d6ebe0 /* oklch(92.147% 0.02666 163.16) */;
|
||||
--wa-color-green-80: #b0d2c0 /* oklch(83.388% 0.04396 162.23) */;
|
||||
--wa-color-green-70: #89b9a0 /* oklch(74.448% 0.06245 161.7) */;
|
||||
--wa-color-green-60: #66a184 /* oklch(65.998% 0.07584 162.02) */;
|
||||
--wa-color-green-50: #378361 /* oklch(55.235% 0.09296 161.66) */;
|
||||
--wa-color-green-40: #036645 /* oklch(45.159% 0.0975 162.35) */;
|
||||
--wa-color-green-30: #005035 /* oklch(38.128% 0.08321 162.33) */;
|
||||
--wa-color-green-20: #003a27 /* oklch(30.855% 0.06552 164.26) */;
|
||||
--wa-color-green-10: #002317 /* oklch(22.712% 0.04718 165.92) */;
|
||||
--wa-color-green-05: #00160e /* oklch(17.779% 0.03599 168.03) */;
|
||||
--wa-color-green: var(--wa-color-green-40);
|
||||
--wa-color-green-key: 40;
|
||||
|
||||
--wa-color-cyan-95: #ebf4f4 /* oklch(96.04% 0.00955 197) */;
|
||||
--wa-color-cyan-90: #d9e9e9 /* oklch(92.209% 0.01702 196.86) */;
|
||||
--wa-color-cyan-80: #add0d1 /* oklch(83.253% 0.03716 198.6) */;
|
||||
--wa-color-cyan-70: #84b8ba /* oklch(74.697% 0.05455 199.05) */;
|
||||
--wa-color-cyan-60: #5aa0a3 /* oklch(66.11% 0.07083 199.17) */;
|
||||
--wa-color-cyan-50: #268285 /* oklch(55.592% 0.08321 198.23) */;
|
||||
--wa-color-cyan-40: #006366 /* oklch(45.364% 0.07714 198.42) */;
|
||||
--wa-color-cyan-30: #004e51 /* oklch(38.509% 0.06547 199.25) */;
|
||||
--wa-color-cyan-20: #00393b /* oklch(31.287% 0.0532 198.64) */;
|
||||
--wa-color-cyan-10: #002223 /* oklch(22.861% 0.03889 197.63) */;
|
||||
--wa-color-cyan-05: #001415 /* oklch(17.367% 0.02953 198.81) */;
|
||||
--wa-color-cyan-95: #ecf3f6 /* oklch(95.973% 0.00849 225.08) */;
|
||||
--wa-color-cyan-90: #dae8ee /* oklch(92.227% 0.01706 225.2) */;
|
||||
--wa-color-cyan-80: #aecfdc /* oklch(83.456% 0.0396 223.66) */;
|
||||
--wa-color-cyan-70: #82b7c9 /* oklch(74.873% 0.06114 221.03) */;
|
||||
--wa-color-cyan-60: #549fb5 /* oklch(66.279% 0.08114 219.25) */;
|
||||
--wa-color-cyan-50: #078098 /* oklch(55.379% 0.09774 217.32) */;
|
||||
--wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
|
||||
--wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
|
||||
--wa-color-cyan-20: #023841 /* oklch(31.326% 0.05351 212.43) */;
|
||||
--wa-color-cyan-10: #012126 /* oklch(22.736% 0.03817 209.61) */;
|
||||
--wa-color-cyan-05: #011519 /* oklch(18.019% 0.02954 211.13) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-50);
|
||||
--wa-color-cyan-key: 50;
|
||||
|
||||
--wa-color-blue-95: #ebf3fa /* oklch(96.015% 0.01271 244.25) */;
|
||||
--wa-color-blue-95: #ebf4fb /* oklch(96.242% 0.01344 240.95) */;
|
||||
--wa-color-blue-90: #d8e8f5 /* oklch(92.295% 0.02463 242.35) */;
|
||||
--wa-color-blue-80: #accee9 /* oklch(83.556% 0.05253 242.25) */;
|
||||
--wa-color-blue-70: #81b5dd /* oklch(75.142% 0.07972 242.18) */;
|
||||
--wa-color-blue-60: #559bd2 /* oklch(66.672% 0.10847 244.18) */;
|
||||
--wa-color-blue-50: #1c7ac3 /* oklch(56.462% 0.13979 247.89) */;
|
||||
--wa-color-blue-40: #005aa0 /* oklch(46.253% 0.13415 250.9) */;
|
||||
--wa-color-blue-30: #00477e /* oklch(39.201% 0.11116 250.07) */;
|
||||
--wa-color-blue-20: #00345d /* oklch(31.892% 0.08838 249.18) */;
|
||||
--wa-color-blue-10: #001f37 /* oklch(23.169% 0.0591 245.63) */;
|
||||
--wa-color-blue-05: #001221 /* oklch(17.475% 0.04178 242.4) */;
|
||||
--wa-color-blue: var(--wa-color-blue-50);
|
||||
--wa-color-blue-80: #b0cee8 /* oklch(83.785% 0.0487 244.56) */;
|
||||
--wa-color-blue-70: #88b3dc /* oklch(75.074% 0.0753 247.65) */;
|
||||
--wa-color-blue-60: #6299ce /* oklch(66.642% 0.09844 248.63) */;
|
||||
--wa-color-blue-50: #3578bc /* oklch(56.244% 0.12562 251.34) */;
|
||||
--wa-color-blue-40: #0159a5 /* oklch(46.385% 0.14173 252.83) */;
|
||||
--wa-color-blue-30: #00438d /* oklch(39.39% 0.13669 256.43) */;
|
||||
--wa-color-blue-20: #00306d /* oklch(32.191% 0.11667 257.51) */;
|
||||
--wa-color-blue-10: #001d43 /* oklch(23.62% 0.08036 255.9) */;
|
||||
--wa-color-blue-05: #00112f /* oklch(18.443% 0.06618 257.27) */;
|
||||
--wa-color-blue: var(--wa-color-blue-40);
|
||||
--wa-color-blue-key: 40;
|
||||
|
||||
--wa-color-indigo-95: #f1f1fa /* oklch(96.073% 0.01199 286.17) */;
|
||||
--wa-color-indigo-90: #e4e4f6 /* oklch(92.422% 0.02428 285.92) */;
|
||||
--wa-color-indigo-80: #c6c7eb /* oklch(84.051% 0.05002 284.01) */;
|
||||
--wa-color-indigo-70: #a9aae1 /* oklch(75.682% 0.07863 283.54) */;
|
||||
--wa-color-indigo-60: #8d8ed7 /* oklch(67.514% 0.10716 282.54) */;
|
||||
--wa-color-indigo-50: #696ccb /* oklch(57.448% 0.14365 279.49) */;
|
||||
--wa-color-indigo-40: #4649bf /* oklch(47.579% 0.1808 275.97) */;
|
||||
--wa-color-indigo-30: #36389c /* oklch(40.459% 0.15877 275.79) */;
|
||||
--wa-color-indigo-20: #272972 /* oklch(32.817% 0.12297 276.06) */;
|
||||
--wa-color-indigo-10: #171844 /* oklch(23.835% 0.08107 277.33) */;
|
||||
--wa-color-indigo-05: #0d0e27 /* oklch(17.951% 0.0503 278.32) */;
|
||||
--wa-color-indigo-95: #f2f3fb /* oklch(96.568% 0.01071 280.48) */;
|
||||
--wa-color-indigo-90: #e1e4f7 /* oklch(92.225% 0.02593 278.72) */;
|
||||
--wa-color-indigo-80: #c2c8f0 /* oklch(84.125% 0.05619 278.41) */;
|
||||
--wa-color-indigo-70: #a2abe9 /* oklch(75.691% 0.08969 277.64) */;
|
||||
--wa-color-indigo-60: #838fe0 /* oklch(67.424% 0.12044 276.26) */;
|
||||
--wa-color-indigo-50: #616cd2 /* oklch(57.327% 0.15517 275.74) */;
|
||||
--wa-color-indigo-40: #444bbe /* oklch(47.719% 0.17747 274.78) */;
|
||||
--wa-color-indigo-30: #3235a6 /* oklch(40.598% 0.17674 274.08) */;
|
||||
--wa-color-indigo-20: #222581 /* oklch(33.204% 0.15044 273.22) */;
|
||||
--wa-color-indigo-10: #121650 /* oklch(24.243% 0.10418 272.65) */;
|
||||
--wa-color-indigo-05: #090c39 /* oklch(19.042% 0.08527 272.11) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #f6f0f9 /* oklch(96.235% 0.01349 314.76) */;
|
||||
--wa-color-purple-95: #f6f2f8 /* oklch(96.593% 0.00898 314.78) */;
|
||||
--wa-color-purple-90: #eee2f2 /* oklch(92.695% 0.0249 317.72) */;
|
||||
--wa-color-purple-80: #dbc0e4 /* oklch(84.178% 0.05727 317.65) */;
|
||||
--wa-color-purple-70: #c9a1d6 /* oklch(76.281% 0.08607 317.75) */;
|
||||
--wa-color-purple-60: #b781c9 /* oklch(68.27% 0.11848 317.44) */;
|
||||
--wa-color-purple-50: #a059b7 /* oklch(58.361% 0.1559 317.36) */;
|
||||
--wa-color-purple-40: #882ea5 /* oklch(48.708% 0.19016 316.59) */;
|
||||
--wa-color-purple-30: #6d2086 /* oklch(41.325% 0.16725 316.35) */;
|
||||
--wa-color-purple-20: #501862 /* oklch(33.549% 0.13014 316.64) */;
|
||||
--wa-color-purple-10: #300e3b /* oklch(24.365% 0.08778 316.83) */;
|
||||
--wa-color-purple-05: #1c0823 /* oklch(18.278% 0.05827 316.48) */;
|
||||
--wa-color-purple-80: #dac1e8 /* oklch(84.417% 0.05975 313.48) */;
|
||||
--wa-color-purple-70: #c4a1e0 /* oklch(76.209% 0.09582 309.5) */;
|
||||
--wa-color-purple-60: #ad82d8 /* oklch(68.129% 0.13065 306.24) */;
|
||||
--wa-color-purple-50: #8e5dcc /* oklch(58.178% 0.16754 301.8) */;
|
||||
--wa-color-purple-40: #7039ba /* oklch(48.506% 0.19176 298.45) */;
|
||||
--wa-color-purple-30: #5925a1 /* oklch(41.419% 0.1844 296.38) */;
|
||||
--wa-color-purple-20: #3f1d77 /* oklch(33.628% 0.14302 294.7) */;
|
||||
--wa-color-purple-10: #241443 /* oklch(24.289% 0.08468 295) */;
|
||||
--wa-color-purple-05: #160b2e /* oklch(18.938% 0.06685 293.46) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
--wa-color-purple-key: 40;
|
||||
|
||||
--wa-color-gray-95: #f2f2f3 /* oklch(96.143% 0.00133 286.37) */;
|
||||
--wa-color-gray-90: #e6e5e8 /* oklch(92.354% 0.00415 301.42) */;
|
||||
--wa-color-gray-80: #cbc8ce /* oklch(83.695% 0.00885 308.34) */;
|
||||
--wa-color-gray-70: #b1adb6 /* oklch(75.367% 0.01345 305.97) */;
|
||||
--wa-color-gray-60: #98939f /* oklch(67.134% 0.01834 304.67) */;
|
||||
--wa-color-gray-50: #7a7382 /* oklch(56.69% 0.0242 306.59) */;
|
||||
--wa-color-gray-40: #5d5568 /* oklch(46.422% 0.03185 304.29) */;
|
||||
--wa-color-gray-30: #494352 /* oklch(39.46% 0.02608 303.4) */;
|
||||
--wa-color-gray-20: #35313c /* oklch(32.176% 0.01998 301.84) */;
|
||||
--wa-color-gray-10: #1f1c23 /* oklch(23.288% 0.01397 304.73) */;
|
||||
--wa-color-gray-05: #131115 /* oklch(18.185% 0.00865 307.93) */;
|
||||
--wa-color-gray-90: #e5e5e8 /* oklch(92.276% 0.00403 286.32) */;
|
||||
--wa-color-gray-80: #c9c9d0 /* oklch(83.798% 0.00965 286.19) */;
|
||||
--wa-color-gray-70: #adaeb9 /* oklch(75.343% 0.01566 281.86) */;
|
||||
--wa-color-gray-60: #9294a2 /* oklch(66.945% 0.02068 279.35) */;
|
||||
--wa-color-gray-50: #727486 /* oklch(56.356% 0.02776 280.45) */;
|
||||
--wa-color-gray-40: #55586b /* oklch(46.492% 0.03098 278.07) */;
|
||||
--wa-color-gray-30: #424456 /* oklch(39.204% 0.03051 279.92) */;
|
||||
--wa-color-gray-20: #30323f /* oklch(32.064% 0.02327 278.14) */;
|
||||
--wa-color-gray-10: #1c1d25 /* oklch(23.329% 0.01544 279.52) */;
|
||||
--wa-color-gray-05: #111217 /* oklch(18.343% 0.01033 276.41) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
--wa-color-red-10: #450002 /* oklch(24.549% 0.10017 27.414) */;
|
||||
--wa-color-red-05: #2f0001 /* oklch(19.191% 0.07829 27.331) */;
|
||||
--wa-color-red: var(--wa-color-red-40);
|
||||
--wa-color-red-key: 40;
|
||||
|
||||
--wa-color-yellow-95: #fff4b3 /* oklch(96.064% 0.08319 99.657) */;
|
||||
--wa-color-yellow-90: #fee58c /* oklch(92.346% 0.11242 94.205) */;
|
||||
@@ -27,71 +28,77 @@
|
||||
--wa-color-yellow-10: #251d00 /* oklch(23.339% 0.04787 94.382) */;
|
||||
--wa-color-yellow-05: #171200 /* oklch(18.295% 0.03771 96.891) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #e1f9e1 /* oklch(95.814% 0.04053 145.25) */;
|
||||
--wa-color-green-90: #bff2c0 /* oklch(91.282% 0.08527 145.33) */;
|
||||
--wa-color-green-80: #9fd7a1 /* oklch(82.641% 0.09444 145.54) */;
|
||||
--wa-color-green-70: #86bc88 /* oklch(74.373% 0.09308 145.46) */;
|
||||
--wa-color-green-60: #6ca170 /* oklch(65.848% 0.09138 146.27) */;
|
||||
--wa-color-green-50: #4e8153 /* oklch(55.447% 0.08949 146.53) */;
|
||||
--wa-color-green-40: #336339 /* oklch(45.387% 0.08557 146.75) */;
|
||||
--wa-color-green-30: #224e29 /* oklch(38.199% 0.07889 147.22) */;
|
||||
--wa-color-green-20: #123a1b /* oklch(31.105% 0.0705 148.25) */;
|
||||
--wa-color-green-10: #01230a /* oklch(22.432% 0.06139 149.06) */;
|
||||
--wa-color-green-05: #001701 /* oklch(17.759% 0.05792 143.81) */;
|
||||
--wa-color-green-95: #dffbda /* oklch(95.911% 0.05253 140.9) */;
|
||||
--wa-color-green-90: #c1f2be /* oklch(91.363% 0.08611 143.36) */;
|
||||
--wa-color-green-80: #a1d7a0 /* oklch(82.74% 0.09423 144.22) */;
|
||||
--wa-color-green-70: #87bb87 /* oklch(74.177% 0.09187 144.58) */;
|
||||
--wa-color-green-60: #6ea16f /* oklch(65.944% 0.09116 144.91) */;
|
||||
--wa-color-green-50: #4f8051 /* oklch(55.201% 0.08939 145.16) */;
|
||||
--wa-color-green-40: #336437 /* oklch(45.626% 0.08945 145.65) */;
|
||||
--wa-color-green-30: #1f5026 /* oklch(38.6% 0.08722 146.45) */;
|
||||
--wa-color-green-20: #073b14 /* oklch(30.947% 0.0845 147.2) */;
|
||||
--wa-color-green-10: #002400 /* oklch(22.556% 0.07675 142.5) */;
|
||||
--wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
--wa-color-green-key: 80;
|
||||
|
||||
--wa-color-cyan-95: #edf3f3 /* oklch(95.962% 0.00639 197.05) */;
|
||||
--wa-color-cyan-90: #dbe8e7 /* oklch(92.095% 0.01393 191.38) */;
|
||||
--wa-color-cyan-80: #b4cfcc /* oklch(83.363% 0.02926 188.46) */;
|
||||
--wa-color-cyan-70: #8db7b3 /* oklch(74.796% 0.04527 189) */;
|
||||
--wa-color-cyan-60: #679f9b /* oklch(66.257% 0.05926 190.12) */;
|
||||
--wa-color-cyan-50: #36817c /* oklch(55.496% 0.07429 189.27) */;
|
||||
--wa-color-cyan-40: #006461 /* oklch(45.445% 0.0782 191.18) */;
|
||||
--wa-color-cyan-30: #004e4b /* oklch(38.26% 0.066 190.33) */;
|
||||
--wa-color-cyan-20: #003937 /* oklch(31.113% 0.05357 190.93) */;
|
||||
--wa-color-cyan-10: #002220 /* oklch(22.721% 0.03935 189.11) */;
|
||||
--wa-color-cyan-05: #001514 /* oklch(17.672% 0.03043 190.87) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-40);
|
||||
--wa-color-cyan-95: #ccfaff /* oklch(95.468% 0.04738 204.53) */;
|
||||
--wa-color-cyan-90: #b4efff /* oklch(91.73% 0.06334 216.28) */;
|
||||
--wa-color-cyan-80: #8ed4e9 /* oklch(83.085% 0.07588 218.68) */;
|
||||
--wa-color-cyan-70: #6bbad0 /* oklch(74.634% 0.08383 217.83) */;
|
||||
--wa-color-cyan-60: #4ca0b6 /* oklch(66.234% 0.08708 217.43) */;
|
||||
--wa-color-cyan-50: #238094 /* oklch(55.617% 0.08818 215.68) */;
|
||||
--wa-color-cyan-40: #006274 /* oklch(45.709% 0.0812 216.04) */;
|
||||
--wa-color-cyan-30: #004c5c /* oklch(38.451% 0.06912 218.07) */;
|
||||
--wa-color-cyan-20: #003845 /* oklch(31.48% 0.05692 218.99) */;
|
||||
--wa-color-cyan-10: #00212a /* oklch(22.908% 0.04161 219.65) */;
|
||||
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-50);
|
||||
--wa-color-cyan-key: 50;
|
||||
|
||||
--wa-color-blue-95: #eaf5ff /* oklch(96.485% 0.01782 245.38) */;
|
||||
--wa-color-blue-90: #d5e7ff /* oklch(92.2% 0.03803 255.61) */;
|
||||
--wa-color-blue-80: #b5cced /* oklch(83.888% 0.05268 257.37) */;
|
||||
--wa-color-blue-70: #95b1d7 /* oklch(75.273% 0.06312 256.12) */;
|
||||
--wa-color-blue-60: #7697c1 /* oklch(66.758% 0.07287 254.73) */;
|
||||
--wa-color-blue-50: #5078a5 /* oklch(56.23% 0.08347 252.2) */;
|
||||
--wa-color-blue-40: #305b88 /* oklch(46.183% 0.08806 251.23) */;
|
||||
--wa-color-blue-30: #1b4771 /* oklch(38.952% 0.0863 250.15) */;
|
||||
--wa-color-blue-20: #0a3458 /* oklch(31.794% 0.07822 249.27) */;
|
||||
--wa-color-blue-10: #011f39 /* oklch(23.373% 0.0615 248.28) */;
|
||||
--wa-color-blue-05: #001327 /* oklch(18.28% 0.04995 248.62) */;
|
||||
--wa-color-blue-95: #edf2ff /* oklch(96.116% 0.01824 269.09) */;
|
||||
--wa-color-blue-90: #d9e7ff /* oklch(92.484% 0.03602 261.3) */;
|
||||
--wa-color-blue-80: #adcbfd /* oklch(83.746% 0.07762 260.54) */;
|
||||
--wa-color-blue-70: #8eb0e6 /* oklch(75.222% 0.08682 259.49) */;
|
||||
--wa-color-blue-60: #7396cb /* oklch(66.799% 0.08844 258.49) */;
|
||||
--wa-color-blue-50: #5277a9 /* oklch(56.315% 0.08873 256.19) */;
|
||||
--wa-color-blue-40: #355a8b /* oklch(46.361% 0.09091 255.97) */;
|
||||
--wa-color-blue-30: #214675 /* oklch(39.204% 0.09067 255.51) */;
|
||||
--wa-color-blue-20: #07335e /* oklch(31.889% 0.089 252.57) */;
|
||||
--wa-color-blue-10: #021e3c /* oklch(23.378% 0.06693 252.62) */;
|
||||
--wa-color-blue-05: #011228 /* oklch(18.145% 0.05213 252.89) */;
|
||||
--wa-color-blue: var(--wa-color-blue-40);
|
||||
--wa-color-blue-key: 40;
|
||||
|
||||
--wa-color-indigo-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-indigo-90: #ede1ff /* oklch(92.831% 0.04213 303.7) */;
|
||||
--wa-color-indigo-80: #d3c0ff /* oklch(84.487% 0.08877 298.31) */;
|
||||
--wa-color-indigo-70: #baa1f9 /* oklch(76.409% 0.12586 296.37) */;
|
||||
--wa-color-indigo-60: #9f86e0 /* oklch(67.937% 0.13169 295.47) */;
|
||||
--wa-color-indigo-50: #7f67bd /* oklch(57.508% 0.13016 294.83) */;
|
||||
--wa-color-indigo-40: #624a9e /* oklch(47.598% 0.13133 294.01) */;
|
||||
--wa-color-indigo-30: #4e3589 /* oklch(40.435% 0.13395 293.19) */;
|
||||
--wa-color-indigo-20: #3a2074 /* oklch(33.206% 0.1353 291.46) */;
|
||||
--wa-color-indigo-10: #24045f /* oklch(25.226% 0.1388 287.21) */;
|
||||
--wa-color-indigo-05: #180044 /* oklch(19.806% 0.11332 288.23) */;
|
||||
--wa-color-indigo-95: #f2f0ff /* oklch(96.104% 0.02008 292.15) */;
|
||||
--wa-color-indigo-90: #e5e2ff /* oklch(92.396% 0.03925 290.36) */;
|
||||
--wa-color-indigo-80: #c4c5ff /* oklch(84.252% 0.0807 283.75) */;
|
||||
--wa-color-indigo-70: #a7a9ea /* oklch(75.712% 0.09299 282.57) */;
|
||||
--wa-color-indigo-60: #8d8fd0 /* oklch(67.378% 0.09568 282.15) */;
|
||||
--wa-color-indigo-50: #6d70ae /* oklch(56.894% 0.09519 280.8) */;
|
||||
--wa-color-indigo-40: #515390 /* oklch(46.941% 0.09769 280.51) */;
|
||||
--wa-color-indigo-30: #3d4078 /* oklch(39.763% 0.0933 278.94) */;
|
||||
--wa-color-indigo-20: #2a2d62 /* oklch(32.529% 0.09204 277.54) */;
|
||||
--wa-color-indigo-10: #181a3e /* oklch(23.848% 0.06755 277.57) */;
|
||||
--wa-color-indigo-05: #0e0f2b /* oklch(18.654% 0.05555 278.01) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #ffedff /* oklch(96.554% 0.03048 325.81) */;
|
||||
--wa-color-purple-90: #fbdbff /* oklch(92.864% 0.05886 322.51) */;
|
||||
--wa-color-purple-80: #e2bde9 /* oklch(84.412% 0.07219 320.92) */;
|
||||
--wa-color-purple-70: #c8a2d1 /* oklch(76.182% 0.07799 319.78) */;
|
||||
--wa-color-purple-60: #af87b9 /* oklch(67.852% 0.08482 319.46) */;
|
||||
--wa-color-purple-50: #8f679b /* oklch(57.383% 0.09035 318.24) */;
|
||||
--wa-color-purple-40: #714a7f /* oklch(47.4% 0.09437 316.77) */;
|
||||
--wa-color-purple-30: #5d366c /* oklch(40.395% 0.09808 316) */;
|
||||
--wa-color-purple-20: #492258 /* oklch(33.171% 0.10022 315.66) */;
|
||||
--wa-color-purple-10: #310c40 /* oklch(24.665% 0.097 314.25) */;
|
||||
--wa-color-purple-05: #22042d /* oklch(19.41% 0.08225 315.39) */;
|
||||
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
|
||||
--wa-color-purple-80: #d4bfff /* oklch(84.383% 0.09054 299.5) */;
|
||||
--wa-color-purple-70: #b9a4e9 /* oklch(76.164% 0.09954 297.97) */;
|
||||
--wa-color-purple-60: #9f89d0 /* oklch(67.711% 0.10516 297.78) */;
|
||||
--wa-color-purple-50: #7f69b0 /* oklch(57.166% 0.10893 297.1) */;
|
||||
--wa-color-purple-40: #624c92 /* oklch(47.204% 0.11139 296.38) */;
|
||||
--wa-color-purple-30: #4e3a77 /* oklch(40.061% 0.10079 296.72) */;
|
||||
--wa-color-purple-20: #3a2761 /* oklch(32.781% 0.09892 295.54) */;
|
||||
--wa-color-purple-10: #23163e /* oklch(24.121% 0.07355 295.33) */;
|
||||
--wa-color-purple-05: #160c2b /* oklch(18.861% 0.06023 294.83) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
--wa-color-purple-key: 40;
|
||||
|
||||
--wa-color-gray-95: #f4f3f4 /* oklch(96.52% 0.00169 325.59) */;
|
||||
--wa-color-gray-90: #e7e5e8 /* oklch(92.431% 0.00454 314.8) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #1f1d22 /* oklch(23.51% 0.0099 303.74) */;
|
||||
--wa-color-gray-05: #121214 /* oklch(18.309% 0.00404 285.99) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -3,30 +3,32 @@
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-natural {
|
||||
--wa-color-red-95: #f9f0ee /* oklch(96.159% 0.0101 32.516) */;
|
||||
--wa-color-red-90: #f5e2dd /* oklch(92.669% 0.02202 35.121) */;
|
||||
--wa-color-red-80: #e8bfb5 /* oklch(83.775% 0.0493 33.987) */;
|
||||
--wa-color-red-70: #dba294 /* oklch(76.229% 0.07115 34.235) */;
|
||||
--wa-color-red-60: #c98373 /* oklch(67.81% 0.09043 33.504) */;
|
||||
--wa-color-red-50: #ae6150 /* oklch(57.709% 0.10386 33.445) */;
|
||||
--wa-color-red-40: #8c4434 /* oklch(47.455% 0.10187 33.787) */;
|
||||
--wa-color-red-30: #713225 /* oklch(40.002% 0.09248 33.14) */;
|
||||
--wa-color-red-90: #f5e1dc /* oklch(92.449% 0.0231 34.298) */;
|
||||
--wa-color-red-80: #e9c1b7 /* oklch(84.299% 0.04808 34.353) */;
|
||||
--wa-color-red-70: #daa193 /* oklch(75.915% 0.07123 34.238) */;
|
||||
--wa-color-red-60: #c48576 /* oklch(67.655% 0.08143 33.955) */;
|
||||
--wa-color-red-50: #a86252 /* oklch(57.121% 0.09478 33.75) */;
|
||||
--wa-color-red-40: #864839 /* oklch(47.352% 0.08833 34.595) */;
|
||||
--wa-color-red-30: #6f3428 /* oklch(40.073% 0.08669 32.867) */;
|
||||
--wa-color-red-20: #562318 /* oklch(32.765% 0.07872 33.646) */;
|
||||
--wa-color-red-10: #36130b /* oklch(23.996% 0.05851 34.254) */;
|
||||
--wa-color-red-05: #240a05 /* oklch(18.708% 0.04625 34.412) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #f5f0e8 /* oklch(95.682% 0.01193 79.784) */;
|
||||
--wa-color-yellow-90: #ede4d5 /* oklch(92.192% 0.0223 80.684) */;
|
||||
--wa-color-yellow-80: #dac6a4 /* oklch(83.455% 0.05079 80.939) */;
|
||||
--wa-color-yellow-95: #f6f1ea /* oklch(96.009% 0.01076 76.598) */;
|
||||
--wa-color-yellow-90: #eee5d7 /* oklch(92.521% 0.02111 79.091) */;
|
||||
--wa-color-yellow-80: #dbc8a8 /* oklch(84.033% 0.04791 80.753) */;
|
||||
--wa-color-yellow-70: #c7ab7b /* oklch(75.433% 0.07174 80.723) */;
|
||||
--wa-color-yellow-60: #b29054 /* oklch(67.181% 0.08832 80.564) */;
|
||||
--wa-color-yellow-50: #94702b /* oklch(56.778% 0.09671 80.65) */;
|
||||
--wa-color-yellow-40: #735310 /* oklch(46.47% 0.08924 80.445) */;
|
||||
--wa-color-yellow-30: #5c4003 /* oklch(39.286% 0.07968 79.822) */;
|
||||
--wa-color-yellow-60: #af905b /* oklch(66.983% 0.07981 80.152) */;
|
||||
--wa-color-yellow-50: #8f703a /* oklch(56.392% 0.08172 79.742) */;
|
||||
--wa-color-yellow-40: #71541d /* oklch(46.546% 0.08061 80.169) */;
|
||||
--wa-color-yellow-30: #5b4111 /* oklch(39.475% 0.07191 78.67) */;
|
||||
--wa-color-yellow-20: #442f00 /* oklch(32.136% 0.06628 81.612) */;
|
||||
--wa-color-yellow-10: #2a1b00 /* oklch(23.521% 0.04872 79.998) */;
|
||||
--wa-color-yellow-05: #1b1000 /* oklch(18.327% 0.03796 79.944) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-50);
|
||||
--wa-color-yellow-key: 50;
|
||||
|
||||
--wa-color-green-95: #edf2ee /* oklch(95.624% 0.00749 151.89) */;
|
||||
--wa-color-green-90: #dde8df /* oklch(92.017% 0.01681 151.09) */;
|
||||
@@ -40,32 +42,35 @@
|
||||
--wa-color-green-10: #0c2212 /* oklch(22.839% 0.04191 150.74) */;
|
||||
--wa-color-green-05: #051509 /* oklch(17.675% 0.03381 151.11) */;
|
||||
--wa-color-green: var(--wa-color-green-50);
|
||||
--wa-color-green-key: 50;
|
||||
|
||||
--wa-color-cyan-95: #eff3f4 /* oklch(96.14% 0.00448 214.33) */;
|
||||
--wa-color-cyan-90: #dee7e9 /* oklch(92.173% 0.01004 212.52) */;
|
||||
--wa-color-cyan-80: #b7cccf /* oklch(83.033% 0.02314 207.07) */;
|
||||
--wa-color-cyan-70: #96b4b9 /* oklch(74.914% 0.03351 208.76) */;
|
||||
--wa-color-cyan-60: #759ba1 /* oklch(66.351% 0.04257 208.18) */;
|
||||
--wa-color-cyan-50: #4d7d84 /* oklch(55.819% 0.05314 207.5) */;
|
||||
--wa-color-cyan-40: #2b6067 /* oklch(45.606% 0.05711 206.88) */;
|
||||
--wa-color-cyan-30: #194c53 /* oklch(38.597% 0.05436 207.82) */;
|
||||
--wa-color-cyan-20: #0a383e /* oklch(31.395% 0.04827 207.89) */;
|
||||
--wa-color-cyan-80: #b8cdd1 /* oklch(83.375% 0.02342 210.4) */;
|
||||
--wa-color-cyan-70: #96b4ba /* oklch(74.946% 0.03385 211.12) */;
|
||||
--wa-color-cyan-60: #759ba2 /* oklch(66.386% 0.0429 210.11) */;
|
||||
--wa-color-cyan-50: #4a7d86 /* oklch(55.736% 0.05643 209.98) */;
|
||||
--wa-color-cyan-40: #2f6067 /* oklch(45.783% 0.05405 207.62) */;
|
||||
--wa-color-cyan-30: #1e4c52 /* oklch(38.743% 0.05069 206.89) */;
|
||||
--wa-color-cyan-20: #0c383e /* oklch(31.452% 0.04725 208.21) */;
|
||||
--wa-color-cyan-10: #022125 /* oklch(22.735% 0.03682 207.1) */;
|
||||
--wa-color-cyan-05: #011518 /* oklch(17.963% 0.02908 207.19) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-40);
|
||||
--wa-color-cyan: var(--wa-color-cyan-50);
|
||||
--wa-color-cyan-key: 50;
|
||||
|
||||
--wa-color-blue-95: #eef1f5 /* oklch(95.7% 0.00626 255.48) */;
|
||||
--wa-color-blue-90: #e1e6ef /* oklch(92.375% 0.01334 262.38) */;
|
||||
--wa-color-blue-80: #bdc9dc /* oklch(83.261% 0.0297 259.59) */;
|
||||
--wa-color-blue-95: #f0f2f6 /* oklch(96.077% 0.00576 264.53) */;
|
||||
--wa-color-blue-90: #e0e5ef /* oklch(92.101% 0.0146 264.5) */;
|
||||
--wa-color-blue-80: #c0cbde /* oklch(83.957% 0.02915 261.47) */;
|
||||
--wa-color-blue-70: #9fb0ca /* oklch(75.271% 0.04205 258.8) */;
|
||||
--wa-color-blue-60: #8196b8 /* oklch(66.901% 0.05611 259.98) */;
|
||||
--wa-color-blue-50: #5f779e /* oklch(56.593% 0.06705 259.94) */;
|
||||
--wa-color-blue-40: #415981 /* oklch(46.262% 0.07185 260.29) */;
|
||||
--wa-color-blue-50: #5c76a0 /* oklch(56.262% 0.07235 259.79) */;
|
||||
--wa-color-blue-40: #425981 /* oklch(46.327% 0.07137 261.08) */;
|
||||
--wa-color-blue-30: #2f466a /* oklch(39.269% 0.06791 259.08) */;
|
||||
--wa-color-blue-20: #203351 /* oklch(32.043% 0.05935 259.22) */;
|
||||
--wa-color-blue-10: #101e34 /* oklch(23.495% 0.04695 259.11) */;
|
||||
--wa-color-blue-05: #081223 /* oklch(18.293% 0.03819 260.22) */;
|
||||
--wa-color-blue: var(--wa-color-blue-40);
|
||||
--wa-color-blue-05: #081224 /* oklch(18.37% 0.04003 261.12) */;
|
||||
--wa-color-blue: var(--wa-color-blue-50);
|
||||
--wa-color-blue-key: 50;
|
||||
|
||||
--wa-color-indigo-95: #f2f2f7 /* oklch(96.257% 0.00665 286.27) */;
|
||||
--wa-color-indigo-90: #e6e5f1 /* oklch(92.619% 0.01616 289.92) */;
|
||||
@@ -79,19 +84,21 @@
|
||||
--wa-color-indigo-10: #1e1a32 /* oklch(23.531% 0.04547 290.1) */;
|
||||
--wa-color-indigo-05: #121021 /* oklch(18.511% 0.03422 287.97) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-50);
|
||||
--wa-color-indigo-key: 50;
|
||||
|
||||
--wa-color-purple-95: #f4f1f6 /* oklch(96.187% 0.00734 312.3) */;
|
||||
--wa-color-purple-90: #eae4ef /* oklch(92.675% 0.01603 310.1) */;
|
||||
--wa-color-purple-80: #d2c4dc /* oklch(83.913% 0.03624 311.38) */;
|
||||
--wa-color-purple-70: #bca8ca /* oklch(75.974% 0.05263 311.37) */;
|
||||
--wa-color-purple-60: #a48cb6 /* oklch(67.622% 0.06639 310.43) */;
|
||||
--wa-color-purple-50: #876b9a /* oklch(57.261% 0.07753 311.16) */;
|
||||
--wa-color-purple-40: #694e7b /* oklch(47.05% 0.07756 311.1) */;
|
||||
--wa-color-purple-50: #866a99 /* oklch(56.923% 0.07763 311.15) */;
|
||||
--wa-color-purple-40: #694f7a /* oklch(47.198% 0.07429 311.36) */;
|
||||
--wa-color-purple-30: #543c64 /* oklch(39.99% 0.07155 310.98) */;
|
||||
--wa-color-purple-20: #3e2b4b /* oklch(32.584% 0.06005 310.65) */;
|
||||
--wa-color-purple-10: #26182f /* oklch(23.839% 0.04672 311.22) */;
|
||||
--wa-color-purple-05: #180e1f /* oklch(18.634% 0.03651 310.29) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-key: 50;
|
||||
|
||||
--wa-color-gray-95: #f1f1f0 /* oklch(95.787% 0.00133 106.42) */;
|
||||
--wa-color-gray-90: #e7e6e4 /* oklch(92.515% 0.0029 84.559) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #1f1d1a /* oklch(23.185% 0.00644 78.196) */;
|
||||
--wa-color-gray-05: #131210 /* oklch(18.257% 0.00432 84.592) */;
|
||||
--wa-color-gray: var(--wa-color-gray-50);
|
||||
--wa-color-gray-key: 50;
|
||||
}
|
||||
|
||||
@@ -2,96 +2,103 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-rudimentary {
|
||||
--wa-color-red-95: #fee /* oklch(96.257% 0.01846 17.478) */;
|
||||
--wa-color-red-95: #fff0f0 /* oklch(96.694% 0.01624 17.438) */;
|
||||
--wa-color-red-90: #fdd /* oklch(92.574% 0.03779 17.855) */;
|
||||
--wa-color-red-80: #ffb6b8 /* oklch(84.502% 0.08518 17.203) */;
|
||||
--wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
|
||||
--wa-color-red-60: #f16b5e /* oklch(68.899% 0.16784 27.833) */;
|
||||
--wa-color-red-50: #da3c06 /* oklch(58.891% 0.20155 35.469) */;
|
||||
--wa-color-red-40: #a62c00 /* oklch(48.117% 0.16441 36.104) */;
|
||||
--wa-color-red-30: #812500 /* oklch(40.578% 0.1326 38.082) */;
|
||||
--wa-color-red-20: #601a00 /* oklch(32.994% 0.10679 38.524) */;
|
||||
--wa-color-red-10: #3d0d00 /* oklch(24.253% 0.07888 38.298) */;
|
||||
--wa-color-red-05: #290600 /* oklch(18.868% 0.06197 37.848) */;
|
||||
--wa-color-red-80: #ffb8b5 /* oklch(84.778% 0.083 21.686) */;
|
||||
--wa-color-red-70: #fe8f8a /* oklch(76.793% 0.13503 23.416) */;
|
||||
--wa-color-red-60: #f6665e /* oklch(68.97% 0.17859 26.005) */;
|
||||
--wa-color-red-50: #e32720 /* oklch(58.995% 0.22134 28.631) */;
|
||||
--wa-color-red-40: #b60000 /* oklch(48.747% 0.20003 29.234) */;
|
||||
--wa-color-red-30: #910101 /* oklch(41.281% 0.16874 29.146) */;
|
||||
--wa-color-red-20: #6d0000 /* oklch(33.581% 0.1378 29.234) */;
|
||||
--wa-color-red-10: #450000 /* oklch(24.517% 0.1006 29.234) */;
|
||||
--wa-color-red-05: #2f0000 /* oklch(19.165% 0.07864 29.234) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #fff497 /* oklch(95.586% 0.11473 102.45) */;
|
||||
--wa-color-yellow-90: #ffe571 /* oklch(92.08% 0.13847 96.881) */;
|
||||
--wa-color-yellow-80: #ffbd31 /* oklch(83.787% 0.16061 80.808) */;
|
||||
--wa-color-yellow-70: #f09d27 /* oklch(76.177% 0.15513 69.241) */;
|
||||
--wa-color-yellow-60: #d67f31 /* oklch(67.745% 0.13973 58.256) */;
|
||||
--wa-color-yellow-50: #b1612d /* oklch(57.606% 0.12242 50.859) */;
|
||||
--wa-color-yellow-40: #8b4527 /* oklch(47.274% 0.1046 42.804) */;
|
||||
--wa-color-yellow-30: #703422 /* oklch(40.129% 0.09009 37.442) */;
|
||||
--wa-color-yellow-20: #53251c /* oklch(32.68% 0.071 32.488) */;
|
||||
--wa-color-yellow-10: #311613 /* oklch(23.859% 0.04441 27.497) */;
|
||||
--wa-color-yellow-05: #1f0d0b /* oklch(18.561% 0.0315 27.209) */;
|
||||
--wa-color-yellow-95: #fff5b4 /* oklch(96.281% 0.08306 100.4) */;
|
||||
--wa-color-yellow-90: #fde572 /* oklch(91.915% 0.13738 97.724) */;
|
||||
--wa-color-yellow-80: #f4c403 /* oklch(83.862% 0.17104 90.777) */;
|
||||
--wa-color-yellow-70: #e6a200 /* oklch(75.828% 0.1578 78.483) */;
|
||||
--wa-color-yellow-60: #d28300 /* oklch(67.735% 0.14848 68.161) */;
|
||||
--wa-color-yellow-50: #b36000 /* oklch(57.465% 0.13759 57.969) */;
|
||||
--wa-color-yellow-40: #8f4400 /* oklch(47.43% 0.12139 52.363) */;
|
||||
--wa-color-yellow-30: #733301 /* oklch(40.135% 0.10525 50.086) */;
|
||||
--wa-color-yellow-20: #562400 /* oklch(32.667% 0.08641 49.965) */;
|
||||
--wa-color-yellow-10: #361400 /* oklch(23.998% 0.06347 49.971) */;
|
||||
--wa-color-yellow-05: #240b00 /* oklch(18.767% 0.04963 49.978) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #dafadc /* oklch(95.411% 0.05194 146.87) */;
|
||||
--wa-color-green-90: #b9f4bc /* oklch(91.261% 0.09639 146.02) */;
|
||||
--wa-color-green-80: #64e177 /* oklch(81.419% 0.18348 146.66) */;
|
||||
--wa-color-green-70: #2ec859 /* oklch(73.18% 0.19719 147.79) */;
|
||||
--wa-color-green-60: #00ac4a /* oklch(64.995% 0.18331 149.02) */;
|
||||
--wa-color-green-50: #008840 /* oklch(54.827% 0.14802 150.85) */;
|
||||
--wa-color-green-40: #006734 /* oklch(45.037% 0.11628 152.87) */;
|
||||
--wa-color-green-30: #005128 /* oklch(38.134% 0.09801 153.08) */;
|
||||
--wa-color-green-20: #003b1c /* oklch(30.9% 0.07883 153.44) */;
|
||||
--wa-color-green-10: #00230e /* oklch(22.462% 0.05754 153.24) */;
|
||||
--wa-color-green-05: #001607 /* oklch(17.557% 0.04482 153.41) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
--wa-color-green-95: #d3fece /* oklch(95.448% 0.0775 142.18) */;
|
||||
--wa-color-green-90: #a3fb9e /* oklch(91.005% 0.15051 143.02) */;
|
||||
--wa-color-green-80: #55e557 /* oklch(81.532% 0.22113 143.41) */;
|
||||
--wa-color-green-70: #35c83d /* oklch(73.012% 0.21608 143.61) */;
|
||||
--wa-color-green-60: #21ac2c /* oklch(64.997% 0.20039 143.64) */;
|
||||
--wa-color-green-50: #0f881d /* oklch(54.57% 0.17259 143.76) */;
|
||||
--wa-color-green-40: #016810 /* oklch(44.912% 0.14592 143.81) */;
|
||||
--wa-color-green-30: #005207 /* oklch(38.047% 0.12561 143.42) */;
|
||||
--wa-color-green-20: #003c03 /* oklch(30.89% 0.10259 143.24) */;
|
||||
--wa-color-green-10: #002401 /* oklch(22.574% 0.07524 143.13) */;
|
||||
--wa-color-green-05: #001700 /* oklch(17.73% 0.06033 142.5) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
--wa-color-green-key: 80;
|
||||
|
||||
--wa-color-cyan-95: #d1f9f1 /* oklch(95.167% 0.04252 181.91) */;
|
||||
--wa-color-cyan-90: #a9f4e6 /* oklch(91.421% 0.07655 181.59) */;
|
||||
--wa-color-cyan-80: #56ddcd /* oklch(81.962% 0.11921 184.3) */;
|
||||
--wa-color-cyan-70: #29c2ba /* oklch(73.788% 0.1202 189.37) */;
|
||||
--wa-color-cyan-60: #11a5a8 /* oklch(65.588% 0.10925 197.16) */;
|
||||
--wa-color-cyan-50: #06828e /* oklch(55.453% 0.09384 206.29) */;
|
||||
--wa-color-cyan-40: #006271 /* oklch(45.569% 0.07965 212.74) */;
|
||||
--wa-color-cyan-30: #004d5a /* oklch(38.635% 0.06787 213.86) */;
|
||||
--wa-color-cyan-20: #003843 /* oklch(31.374% 0.0556 215.61) */;
|
||||
--wa-color-cyan-10: #002129 /* oklch(22.851% 0.04085 217.17) */;
|
||||
--wa-color-cyan-05: #00151b /* oklch(18.055% 0.03231 217.31) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-70);
|
||||
--wa-color-cyan-95: #bffdfd /* oklch(95.254% 0.06191 196.16) */;
|
||||
--wa-color-cyan-90: #87f8f6 /* oklch(91.191% 0.10384 193.98) */;
|
||||
--wa-color-cyan-80: #11e0e1 /* oklch(82.2% 0.13867 195.37) */;
|
||||
--wa-color-cyan-70: #00c1cc /* oklch(73.822% 0.12561 202.07) */;
|
||||
--wa-color-cyan-60: #00a4b6 /* oklch(65.766% 0.11321 208.52) */;
|
||||
--wa-color-cyan-50: #008098 /* oklch(55.318% 0.09882 217.04) */;
|
||||
--wa-color-cyan-40: #016177 /* oklch(45.597% 0.08301 220.49) */;
|
||||
--wa-color-cyan-30: #014c5f /* oklch(38.623% 0.07093 221.97) */;
|
||||
--wa-color-cyan-20: #003746 /* oklch(31.239% 0.05795 222.52) */;
|
||||
--wa-color-cyan-10: #00212c /* oklch(23.027% 0.04335 224.27) */;
|
||||
--wa-color-cyan-05: #00141c /* oklch(17.778% 0.0335 224.39) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
--wa-color-cyan-key: 80;
|
||||
|
||||
--wa-color-blue-95: #e1f4ff /* oklch(95.642% 0.02496 232.97) */;
|
||||
--wa-color-blue-90: #caebff /* oklch(92.258% 0.04407 234.57) */;
|
||||
--wa-color-blue-80: #87d1ff /* oklch(82.911% 0.09817 236.93) */;
|
||||
--wa-color-blue-70: #4cb8ff /* oklch(75.061% 0.14167 241.25) */;
|
||||
--wa-color-blue-60: #09f /* oklch(66.905% 0.18368 248.81) */;
|
||||
--wa-color-blue-50: #0072ed /* oklch(57.257% 0.20469 257.18) */;
|
||||
--wa-color-blue-40: #0053be /* oklch(47.006% 0.18201 258.98) */;
|
||||
--wa-color-blue-30: #00409b /* oklch(39.927% 0.15956 259.61) */;
|
||||
--wa-color-blue-20: #002e76 /* oklch(32.56% 0.13217 259.91) */;
|
||||
--wa-color-blue-10: #001a4e /* oklch(23.965% 0.10161 260.68) */;
|
||||
--wa-color-blue-05: #000f36 /* oklch(18.68% 0.08063 260.98) */;
|
||||
--wa-color-blue-95: #e5f6fe /* oklch(96.294% 0.02094 227.52) */;
|
||||
--wa-color-blue-90: #c5ebff /* oklch(91.932% 0.04809 230.9) */;
|
||||
--wa-color-blue-80: #8bd2ff /* oklch(83.326% 0.09527 237.31) */;
|
||||
--wa-color-blue-70: #55b6ff /* oklch(74.905% 0.13947 244.06) */;
|
||||
--wa-color-blue-60: #2a97ff /* oklch(66.922% 0.18057 251.94) */;
|
||||
--wa-color-blue-50: #146bff /* oklch(57.485% 0.23344 261.04) */;
|
||||
--wa-color-blue-40: #0e48de /* oklch(48.043% 0.23341 263.63) */;
|
||||
--wa-color-blue-30: #0038b0 /* oklch(40.387% 0.19651 262.63) */;
|
||||
--wa-color-blue-20: #002887 /* oklch(33.083% 0.16285 262.76) */;
|
||||
--wa-color-blue-10: #001658 /* oklch(24.241% 0.12149 262.95) */;
|
||||
--wa-color-blue-05: #000c3c /* oklch(18.73% 0.09414 262.97) */;
|
||||
--wa-color-blue: var(--wa-color-blue-50);
|
||||
--wa-color-blue-key: 50;
|
||||
|
||||
--wa-color-indigo-95: #f1efff /* oklch(95.834% 0.02142 291.74) */;
|
||||
--wa-color-indigo-90: #e7e3ff /* oklch(92.744% 0.03793 292.2) */;
|
||||
--wa-color-indigo-80: #cbc1ff /* oklch(84.027% 0.08632 291.82) */;
|
||||
--wa-color-indigo-70: #b3a3ff /* oklch(76.472% 0.13034 290.97) */;
|
||||
--wa-color-indigo-60: #9b81ff /* oklch(68.426% 0.17995 290.32) */;
|
||||
--wa-color-indigo-50: #7f56f9 /* oklch(58.841% 0.22979 288.88) */;
|
||||
--wa-color-indigo-40: #6427e7 /* oklch(49.439% 0.25627 286.93) */;
|
||||
--wa-color-indigo-30: #5102ca /* oklch(42.528% 0.24562 286.08) */;
|
||||
--wa-color-indigo-20: #3a009b /* oklch(34.649% 0.20256 284.92) */;
|
||||
--wa-color-indigo-10: #220064 /* oklch(25.227% 0.14791 284.49) */;
|
||||
--wa-color-indigo-05: #160046 /* oklch(19.835% 0.11578 285.15) */;
|
||||
--wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
|
||||
--wa-color-indigo-90: #e1e4ff /* oklch(92.481% 0.03674 280.62) */;
|
||||
--wa-color-indigo-80: #c0c6ff /* oklch(84.148% 0.07987 279.84) */;
|
||||
--wa-color-indigo-70: #a2a7ff /* oklch(75.911% 0.12582 280.46) */;
|
||||
--wa-color-indigo-60: #8a87ff /* oklch(68.133% 0.17285 281.91) */;
|
||||
--wa-color-indigo-50: #6f5aff /* oklch(58.566% 0.23371 282.19) */;
|
||||
--wa-color-indigo-40: #5823f7 /* oklch(49.739% 0.27634 280.94) */;
|
||||
--wa-color-indigo-30: #4600d4 /* oklch(42.607% 0.25731 280.24) */;
|
||||
--wa-color-indigo-20: #3200a1 /* oklch(34.632% 0.20991 279.75) */;
|
||||
--wa-color-indigo-10: #1d0069 /* oklch(25.391% 0.1543 279.39) */;
|
||||
--wa-color-indigo-05: #120049 /* oklch(19.822% 0.11998 279.93) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #f8edfd /* oklch(95.934% 0.02417 315.47) */;
|
||||
--wa-color-purple-90: #f2e0fc /* oklch(92.948% 0.04198 313.7) */;
|
||||
--wa-color-purple-80: #e3baf6 /* oklch(84.428% 0.09274 314.96) */;
|
||||
--wa-color-purple-70: #d498f1 /* oklch(76.886% 0.1383 314.23) */;
|
||||
--wa-color-purple-60: #c76ff2 /* oklch(69.246% 0.20034 313.36) */;
|
||||
--wa-color-purple-50: #ac44dc /* oklch(59.406% 0.2279 312.95) */;
|
||||
--wa-color-purple-40: #862dad /* oklch(48.893% 0.19805 313.21) */;
|
||||
--wa-color-purple-30: #6b218a /* oklch(41.428% 0.16916 313.67) */;
|
||||
--wa-color-purple-20: #4f1568 /* oklch(33.543% 0.13957 313.21) */;
|
||||
--wa-color-purple-10: #310a42 /* oklch(24.603% 0.10191 313.12) */;
|
||||
--wa-color-purple-05: #20052d /* oklch(19.24% 0.07931 312.44) */;
|
||||
--wa-color-purple-95: #f9f0ff /* oklch(96.646% 0.02199 312.19) */;
|
||||
--wa-color-purple-90: #f2dfff /* oklch(92.855% 0.04724 311.73) */;
|
||||
--wa-color-purple-80: #e5b9fe /* oklch(84.736% 0.10475 313.02) */;
|
||||
--wa-color-purple-70: #d794fc /* oklch(77.031% 0.15876 312.74) */;
|
||||
--wa-color-purple-60: #c86df6 /* oklch(69.308% 0.20786 312.9) */;
|
||||
--wa-color-purple-50: #b334e8 /* oklch(59.685% 0.25757 313.29) */;
|
||||
--wa-color-purple-40: #9200c2 /* oklch(49.816% 0.24738 313.46) */;
|
||||
--wa-color-purple-30: #720a97 /* oklch(41.936% 0.20122 313.63) */;
|
||||
--wa-color-purple-20: #550373 /* oklch(34.13% 0.16667 313.17) */;
|
||||
--wa-color-purple-10: #350149 /* oklch(24.929% 0.12192 313.39) */;
|
||||
--wa-color-purple-05: #240033 /* oklch(19.65% 0.09758 313.47) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-key: 50;
|
||||
|
||||
--wa-color-gray-95: #f2f2f2 /* oklch(96.115% 0 none) */;
|
||||
--wa-color-gray-90: #e6e6e6 /* oklch(92.494% 0 none) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #1d1d1d /* oklch(23.075% 0 none) */;
|
||||
--wa-color-gray-05: #131313 /* oklch(18.674% 0 none) */;
|
||||
--wa-color-gray: var(--wa-color-gray-60);
|
||||
--wa-color-gray-key: 60;
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
* More later.
|
||||
*/
|
||||
import rawPalettes from './palettes.js';
|
||||
import { clamp } from './util.js';
|
||||
|
||||
// Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
|
||||
const DEFAULT_ACCENT = 60;
|
||||
@@ -58,9 +59,5 @@ for (let paletteId in palettes) {
|
||||
}
|
||||
}
|
||||
|
||||
function clamp(min, value, max) {
|
||||
return Math.min(Math.max(min, value), max);
|
||||
}
|
||||
|
||||
export default palettes;
|
||||
export { rawPalettes };
|
||||
@@ -6,11 +6,9 @@
|
||||
import Color from 'colorjs.io';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import { PALETTE_DIR } from './util.js';
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
||||
|
||||
export const paletteFiles = fs.readdirSync(__dirname).filter(file => file.endsWith('.css'));
|
||||
export const paletteFiles = fs.readdirSync(PALETTE_DIR + '/').filter(file => file.endsWith('.css'));
|
||||
export const declarationRegex =
|
||||
/^\s*--wa-color-(?<hue>[a-z]+)-(?<level>[0-9]+):\s*(?<color>.+?)\s*(\/\*.+?\*\/)?\s*;$/gm;
|
||||
export const rawCSS = {};
|
||||
@@ -55,7 +53,7 @@ function parse(contents, file) {
|
||||
const palettes = {};
|
||||
|
||||
for (let file of paletteFiles) {
|
||||
let css = fs.readFileSync(path.join(__dirname, file), 'utf8');
|
||||
let css = fs.readFileSync(path.join(PALETTE_DIR, file), 'utf8');
|
||||
rawCSS[file] = css;
|
||||
let tokens = parse(css, file);
|
||||
let paletteId = file.replace(/\.css$/, '');
|
||||
98
src/styles/color/scripts/ranges.js
Normal file
98
src/styles/color/scripts/ranges.js
Normal file
@@ -0,0 +1,98 @@
|
||||
// Run via node ranges.js to analyze all palettes
|
||||
// or node ranges.js <paletteId> to analyze a single palette
|
||||
import palettes from './palettes-analyzed.js';
|
||||
import { toPrecision } from './util.js';
|
||||
|
||||
let paletteId = process.argv[2];
|
||||
|
||||
/**
|
||||
* Each "test" consists of the following params to analyze:
|
||||
* - component: The color component to analyze (h, c, l)
|
||||
* - label: The label to display in the console
|
||||
* - by: The grouping to analyze by (tint, hue)
|
||||
* - levels: The number of tints from the core color to include in the analysis.
|
||||
* Examples: undefined for all tints, 0 for the core color only, 10 for the core color and ±10 from it.
|
||||
*/
|
||||
let tests = [
|
||||
{ component: 'h', label: 'Hue', by: 'hue', levels: paletteId ? undefined : 10 },
|
||||
{ component: 'c', label: 'Chroma', by: 'tint' },
|
||||
{ component: 'l', label: 'L', by: 'tint' },
|
||||
];
|
||||
|
||||
if (!paletteId) {
|
||||
tests.push({ component: 'h', label: 'Core Hue', by: 'hue', levels: 0 });
|
||||
}
|
||||
|
||||
const tints = ['95', '90', '80', '70', '60', '50', '40', '30', '20', '10', '05'];
|
||||
const hues = ['red', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'gray'];
|
||||
|
||||
function analyzePalette(scales, results, { component, levels, by = 'tint' }) {
|
||||
for (let hue in scales) {
|
||||
let colors = scales[hue];
|
||||
let key = colors.maxChromaTint;
|
||||
let resultsByHue = by === 'hue' ? results[hue] : results;
|
||||
|
||||
for (let tint of tints) {
|
||||
let color = colors[tint];
|
||||
let value = color[component];
|
||||
let resultsByTint = by === 'tint' ? resultsByHue[tint] : resultsByHue;
|
||||
|
||||
if (levels === undefined || Math.abs(tint - key) <= levels) {
|
||||
if (resultsByTint.min > value) resultsByTint.min = value;
|
||||
if (resultsByTint.max < value) resultsByTint.max = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function analyze(options = {}) {
|
||||
let results = {};
|
||||
let keys = options.by === 'hue' ? hues : tints;
|
||||
|
||||
for (let key of keys) {
|
||||
results[key] = { min: Infinity, max: -Infinity };
|
||||
}
|
||||
|
||||
if (paletteId) {
|
||||
analyzePalette(palettes[paletteId], results, options);
|
||||
} else {
|
||||
for (let paletteId in palettes) {
|
||||
analyzePalette(palettes[paletteId], results, options);
|
||||
}
|
||||
}
|
||||
|
||||
// Add extent & mid, make numbers easier to read
|
||||
for (let key of keys) {
|
||||
let info = results[key];
|
||||
if (options.component === 'h') {
|
||||
// Fixup hues crossing 0
|
||||
if (Math.abs(info.max - info.min) > 180) {
|
||||
info.min += 360;
|
||||
|
||||
if (info.min > info.max) {
|
||||
[info.min, info.max] = [info.max, info.min];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
info.extent = info.max - info.min;
|
||||
info.mid = (info.min + info.max) / 2;
|
||||
|
||||
for (let prop in info) {
|
||||
info[prop] = toPrecision(info[prop]);
|
||||
}
|
||||
}
|
||||
|
||||
let label = `${options.label || options.component} ranges`;
|
||||
console.log(label + (options.levels !== undefined ? ` (±${options.levels} from core tint)` : '') + ':');
|
||||
console.table(results);
|
||||
}
|
||||
|
||||
if (paletteId) {
|
||||
// Analyze a single palette
|
||||
console.log(`Analyzing palette '${paletteId}'`);
|
||||
}
|
||||
|
||||
for (let test of tests) {
|
||||
analyze(test);
|
||||
}
|
||||
@@ -6,23 +6,14 @@
|
||||
import chalk from 'chalk';
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
import palettes, { rawPalettes } from './palettes-analyzed.js';
|
||||
|
||||
const __dirname = fileURLToPath(new URL('.', import.meta.url));
|
||||
import { PALETTE_DIR, formatComparison, hueToChalk } from './util.js';
|
||||
|
||||
const selector = paletteId =>
|
||||
[':where(:root)', ':host', ":where([class^='wa-theme-'], [class*=' wa-theme-'])", `.wa-palette-${paletteId}`].join(
|
||||
',\n',
|
||||
);
|
||||
|
||||
// Default accent tint if all chromas are 0, but also the tint accent colors will be nudged towards (see chromaTolerance)
|
||||
const defaultAccent = 60;
|
||||
|
||||
// Min and max allowed tints
|
||||
const minAccentTint = 40;
|
||||
const maxAccentTint = 90;
|
||||
|
||||
// Used for formatting warnings
|
||||
const paletteIdMaxChars = Object.keys(palettes).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
const hueMaxChars = Object.keys(palettes.default).reduce((max, id) => Math.max(max, id.length), 0);
|
||||
@@ -73,59 +64,17 @@ for (let paletteId in palettes) {
|
||||
}
|
||||
|
||||
tintCSS += `--wa-color-${hue}: var(--wa-color-${hue}-${tints.maxChromaTint});\n`;
|
||||
tintCSS += `--wa-color-${hue}-key: ${tints.maxChromaTint};\n`;
|
||||
css += tintCSS + '\n';
|
||||
}
|
||||
|
||||
let indent = ' ';
|
||||
css = `${selector(paletteId)} {\n${css.trimEnd().replace(/^(?=\S)/gm, indent)}\n}\n`;
|
||||
|
||||
fs.writeFileSync(path.join(__dirname, paletteId + '.css'), css, 'utf8');
|
||||
fs.writeFileSync(path.join(PALETTE_DIR, paletteId + '.css'), css, 'utf8');
|
||||
}
|
||||
|
||||
console.info(
|
||||
`🎨 Wrote ${Object.keys(palettes).length} palette files.` +
|
||||
(issueCount > 0 ? ` ${chalk.bold(issueCount)} issues found across ${chalk.bold(issuePaletteCount)} palettes.` : ''),
|
||||
);
|
||||
|
||||
/**
|
||||
* Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
|
||||
* @param {number} a
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
function formatComparison(a, b) {
|
||||
let op = a < b ? '<' : '>';
|
||||
|
||||
for (let i = 1; i < 10; i++) {
|
||||
let roundedA = a.toPrecision(i);
|
||||
let roundedB = b.toPrecision(i);
|
||||
|
||||
if (roundedA !== roundedB) {
|
||||
return `${roundedA} ${op} ${roundedB}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `${a} ${op} ${b}`;
|
||||
}
|
||||
|
||||
function hueToChalk(hue) {
|
||||
let ret;
|
||||
|
||||
if (hue in chalk) {
|
||||
ret = chalk[hue];
|
||||
}
|
||||
switch (hue) {
|
||||
case 'indigo':
|
||||
ret = chalk.hex('#8a8beb');
|
||||
break;
|
||||
case 'purple':
|
||||
ret = chalk.hex('#a94dc6');
|
||||
break;
|
||||
}
|
||||
|
||||
if (ret) {
|
||||
return ret.bold;
|
||||
}
|
||||
|
||||
return chalk.bold;
|
||||
}
|
||||
59
src/styles/color/scripts/util.js
Normal file
59
src/styles/color/scripts/util.js
Normal file
@@ -0,0 +1,59 @@
|
||||
import chalk from 'chalk';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
let url = new URL('.', import.meta.url);
|
||||
// One level up
|
||||
url.pathname = path.join(url.pathname, '..');
|
||||
export const PALETTE_DIR = fileURLToPath(url);
|
||||
|
||||
export function clamp(min, value, max) {
|
||||
return Math.min(Math.max(min, value), max);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a comparison by rounding numbers to the lowest number of significant digits that still shows a difference.
|
||||
* @param {number} a
|
||||
* @param {number} b
|
||||
* @returns {string}
|
||||
*/
|
||||
export function formatComparison(a, b) {
|
||||
let op = a < b ? '<' : '>';
|
||||
|
||||
for (let i = 1; i < 10; i++) {
|
||||
let roundedA = a.toPrecision(i);
|
||||
let roundedB = b.toPrecision(i);
|
||||
|
||||
if (roundedA !== roundedB) {
|
||||
return `${roundedA} ${op} ${roundedB}`;
|
||||
}
|
||||
}
|
||||
|
||||
return `${a} ${op} ${b}`;
|
||||
}
|
||||
|
||||
export function hueToChalk(hue) {
|
||||
let ret;
|
||||
|
||||
if (hue in chalk) {
|
||||
ret = chalk[hue];
|
||||
}
|
||||
switch (hue) {
|
||||
case 'indigo':
|
||||
ret = chalk.hex('#8a8beb');
|
||||
break;
|
||||
case 'purple':
|
||||
ret = chalk.hex('#a94dc6');
|
||||
break;
|
||||
}
|
||||
|
||||
if (ret) {
|
||||
return ret.bold;
|
||||
}
|
||||
|
||||
return chalk.bold;
|
||||
}
|
||||
|
||||
export function toPrecision(value, precision = 2) {
|
||||
return +Number(value).toPrecision(precision);
|
||||
}
|
||||
@@ -2,70 +2,75 @@
|
||||
:host,
|
||||
:where([class^='wa-theme-'], [class*=' wa-theme-']),
|
||||
.wa-palette-vogue {
|
||||
--wa-color-red-95: #feeeee /* oklch(96.175% 0.01736 17.459) */;
|
||||
--wa-color-red-90: #fedddd /* oklch(92.486% 0.03666 17.834) */;
|
||||
--wa-color-red-80: #fdb8b8 /* oklch(84.646% 0.08038 18.878) */;
|
||||
--wa-color-red-70: #fb9191 /* oklch(76.892% 0.12835 20.456) */;
|
||||
--wa-color-red-60: #f66565 /* oklch(68.965% 0.17872 22.978) */;
|
||||
--wa-color-red-50: #e12b2b /* oklch(58.974% 0.21613 27.031) */;
|
||||
--wa-color-red-40: #af1b1b /* oklch(48.576% 0.18205 27.417) */;
|
||||
--wa-color-red-30: #851e1e /* oklch(40.835% 0.13843 25.838) */;
|
||||
--wa-color-red-20: #641414 /* oklch(33.307% 0.11308 25.859) */;
|
||||
--wa-color-red-10: #400809 /* oklch(24.44% 0.08486 25.315) */;
|
||||
--wa-color-red-05: #2b0404 /* oklch(19.055% 0.06569 26.078) */;
|
||||
--wa-color-red-95: #ffeff0 /* oklch(96.503% 0.01737 13.094) */;
|
||||
--wa-color-red-90: #ffdde0 /* oklch(92.655% 0.03789 11.812) */;
|
||||
--wa-color-red-80: #feb7c0 /* oklch(84.783% 0.08312 10.582) */;
|
||||
--wa-color-red-70: #fd8e9c /* oklch(76.934% 0.13451 12.688) */;
|
||||
--wa-color-red-60: #f96077 /* oklch(69.165% 0.18694 14.455) */;
|
||||
--wa-color-red-50: #e3204a /* oklch(59.121% 0.2222 17.415) */;
|
||||
--wa-color-red-40: #b0113a /* oklch(48.689% 0.1864 15.801) */;
|
||||
--wa-color-red-30: #881337 /* oklch(41.033% 0.15017 10.272) */;
|
||||
--wa-color-red-20: #670b26 /* oklch(33.541% 0.12341 11.466) */;
|
||||
--wa-color-red-10: #410414 /* oklch(24.436% 0.0904 12.512) */;
|
||||
--wa-color-red-05: #2c020b /* oklch(19.105% 0.07041 12.549) */;
|
||||
--wa-color-red: var(--wa-color-red-50);
|
||||
--wa-color-red-key: 50;
|
||||
|
||||
--wa-color-yellow-95: #fef6ab /* oklch(96.234% 0.09455 102.83) */;
|
||||
--wa-color-yellow-90: #ffe759 /* oklch(92.242% 0.15928 99.624) */;
|
||||
--wa-color-yellow-80: #f3c41a /* oklch(83.803% 0.16708 90.67) */;
|
||||
--wa-color-yellow-70: #e0a502 /* oklch(75.733% 0.15552 82.666) */;
|
||||
--wa-color-yellow-90: #fde761 /* oklch(92.138% 0.15325 99.997) */;
|
||||
--wa-color-yellow-80: #f5c308 /* oklch(83.774% 0.17019 89.81) */;
|
||||
--wa-color-yellow-70: #e0a504 /* oklch(75.737% 0.15524 82.606) */;
|
||||
--wa-color-yellow-60: #c88804 /* oklch(67.447% 0.14121 75.44) */;
|
||||
--wa-color-yellow-50: #a76706 /* oklch(57.104% 0.124 67.484) */;
|
||||
--wa-color-yellow-40: #834b0f /* oklch(46.963% 0.10211 60.864) */;
|
||||
--wa-color-yellow-30: #693910 /* oklch(39.742% 0.08578 56.326) */;
|
||||
--wa-color-yellow-20: #502809 /* oklch(32.489% 0.07269 53.649) */;
|
||||
--wa-color-yellow-10: #311704 /* oklch(23.775% 0.05173 54.627) */;
|
||||
--wa-color-yellow-05: #1f0e02 /* oklch(18.545% 0.03815 59.032) */;
|
||||
--wa-color-yellow-10: #321603 /* oklch(23.72% 0.05451 52.882) */;
|
||||
--wa-color-yellow-05: #210d02 /* oklch(18.673% 0.04137 52.815) */;
|
||||
--wa-color-yellow: var(--wa-color-yellow-80);
|
||||
--wa-color-yellow-key: 80;
|
||||
|
||||
--wa-color-green-95: #d6fbe3 /* oklch(95.529% 0.04989 156.89) */;
|
||||
--wa-color-green-90: #acf5c6 /* oklch(90.962% 0.09709 155.72) */;
|
||||
--wa-color-green-80: #58e38b /* oklch(81.864% 0.17318 152.51) */;
|
||||
--wa-color-green-70: #25c861 /* oklch(73.149% 0.19247 149.75) */;
|
||||
--wa-color-green-60: #17ab4e /* oklch(64.955% 0.17611 149.25) */;
|
||||
--wa-color-green-50: #158740 /* oklch(54.761% 0.14352 149.99) */;
|
||||
--wa-color-green-40: #166635 /* oklch(45.105% 0.10874 151.56) */;
|
||||
--wa-color-green-30: #13502b /* oklch(38.277% 0.08756 152.42) */;
|
||||
--wa-color-green-20: #093a1d /* oklch(30.848% 0.07243 152.47) */;
|
||||
--wa-color-green-10: #032311 /* oklch(22.69% 0.05156 154.92) */;
|
||||
--wa-color-green-05: #02160a /* oklch(17.815% 0.03799 156.47) */;
|
||||
--wa-color-green: var(--wa-color-green-70);
|
||||
--wa-color-green-95: #e6fbbc /* oklch(95.736% 0.08443 122.96) */;
|
||||
--wa-color-green-90: #c7f577 /* oklch(91.183% 0.16201 126.05) */;
|
||||
--wa-color-green-80: #98de27 /* oklch(82.338% 0.20949 129.59) */;
|
||||
--wa-color-green-70: #7bc211 /* oklch(73.847% 0.19884 131.28) */;
|
||||
--wa-color-green-60: #67a50d /* oklch(65.44% 0.17673 131.51) */;
|
||||
--wa-color-green-50: #51820e /* oklch(55.059% 0.14619 131.47) */;
|
||||
--wa-color-green-40: #3f6212 /* oklch(45.284% 0.11293 130.93) */;
|
||||
--wa-color-green-30: #324d12 /* oklch(38.502% 0.09061 130.96) */;
|
||||
--wa-color-green-20: #213908 /* oklch(31.337% 0.07851 132.44) */;
|
||||
--wa-color-green-10: #122203 /* oklch(22.929% 0.05744 132.15) */;
|
||||
--wa-color-green-05: #091501 /* oklch(17.772% 0.04591 132.17) */;
|
||||
--wa-color-green: var(--wa-color-green-80);
|
||||
--wa-color-green-key: 80;
|
||||
|
||||
--wa-color-cyan-95: #d1fbf2 /* oklch(95.61% 0.04472 180.87) */;
|
||||
--wa-color-cyan-90: #9bf6e4 /* oklch(91.092% 0.09113 180.19) */;
|
||||
--wa-color-cyan-80: #43e0ca /* oklch(82.113% 0.13179 181.48) */;
|
||||
--wa-color-cyan-70: #1ac4b0 /* oklch(73.775% 0.12864 181.89) */;
|
||||
--wa-color-cyan-60: #0ea798 /* oklch(65.521% 0.11439 183.58) */;
|
||||
--wa-color-cyan-50: #0e837a /* oklch(55.027% 0.0937 186.25) */;
|
||||
--wa-color-cyan-40: #11635e /* oklch(45.289% 0.07357 188.54) */;
|
||||
--wa-color-cyan-30: #134d49 /* oklch(38.278% 0.05833 188.33) */;
|
||||
--wa-color-cyan-20: #073938 /* oklch(31.345% 0.04977 192.86) */;
|
||||
--wa-color-cyan-10: #022222 /* oklch(22.914% 0.03701 194.88) */;
|
||||
--wa-color-cyan-95: #d2faf5 /* oklch(95.553% 0.04164 187.25) */;
|
||||
--wa-color-cyan-90: #9df5ea /* oklch(91.142% 0.08636 185.8) */;
|
||||
--wa-color-cyan-80: #34e0d2 /* oklch(82.077% 0.1342 186.48) */;
|
||||
--wa-color-cyan-70: #1bc3b8 /* oklch(73.79% 0.12485 187.52) */;
|
||||
--wa-color-cyan-60: #0ba69e /* oklch(65.442% 0.11207 188.69) */;
|
||||
--wa-color-cyan-50: #05837e /* oklch(55.086% 0.09419 190.05) */;
|
||||
--wa-color-cyan-40: #066460 /* oklch(45.484% 0.07694 189.95) */;
|
||||
--wa-color-cyan-30: #064e4c /* oklch(38.409% 0.06372 191.78) */;
|
||||
--wa-color-cyan-20: #053938 /* oklch(31.291% 0.05079 192.86) */;
|
||||
--wa-color-cyan-10: #032222 /* oklch(22.965% 0.03606 194.94) */;
|
||||
--wa-color-cyan-05: #011515 /* oklch(17.806% 0.02865 194.89) */;
|
||||
--wa-color-cyan: var(--wa-color-cyan-80);
|
||||
--wa-color-cyan-key: 80;
|
||||
|
||||
--wa-color-blue-95: #ebf3ff /* oklch(96.164% 0.01825 258.35) */;
|
||||
--wa-color-blue-90: #d6e7fe /* oklch(92.238% 0.03631 255.96) */;
|
||||
--wa-color-blue-80: #a4cefe /* oklch(83.833% 0.08104 252.13) */;
|
||||
--wa-color-blue-70: #73b2fb /* oklch(75.087% 0.12447 253.02) */;
|
||||
--wa-color-blue-60: #4d95f9 /* oklch(67.127% 0.16539 257.15) */;
|
||||
--wa-color-blue-50: #2b6df0 /* oklch(57.128% 0.2086 262.06) */;
|
||||
--wa-color-blue-40: #1d4bd3 /* oklch(47.813% 0.21434 264.65) */;
|
||||
--wa-color-blue-30: #1e3d9c /* oklch(40.115% 0.15907 265.62) */;
|
||||
--wa-color-blue-20: #1c2e69 /* oklch(32.363% 0.10583 267.39) */;
|
||||
--wa-color-blue-10: #101b41 /* oklch(23.741% 0.07371 268.19) */;
|
||||
--wa-color-blue-05: #09102c /* oklch(18.584% 0.05736 269.49) */;
|
||||
--wa-color-blue: var(--wa-color-blue-40);
|
||||
--wa-color-blue-95: #e6f5fe /* oklch(96.166% 0.01999 233.85) */;
|
||||
--wa-color-blue-90: #cce9fc /* oklch(91.886% 0.04012 236.63) */;
|
||||
--wa-color-blue-80: #93d1f8 /* oklch(83.254% 0.08372 236.73) */;
|
||||
--wa-color-blue-70: #57b8f1 /* oklch(74.755% 0.12265 237.38) */;
|
||||
--wa-color-blue-60: #009de5 /* oklch(66.307% 0.15092 239.62) */;
|
||||
--wa-color-blue-50: #047bbb /* oklch(55.932% 0.133 242.55) */;
|
||||
--wa-color-blue-40: #0b5d8e /* oklch(45.95% 0.10648 242.94) */;
|
||||
--wa-color-blue-30: #0c4970 /* oklch(38.984% 0.08794 243.3) */;
|
||||
--wa-color-blue-20: #093552 /* oklch(31.634% 0.06911 243.22) */;
|
||||
--wa-color-blue-10: #041f32 /* oklch(23.003% 0.04923 243.03) */;
|
||||
--wa-color-blue-05: #021321 /* oklch(17.965% 0.03841 243.33) */;
|
||||
--wa-color-blue: var(--wa-color-blue-60);
|
||||
--wa-color-blue-key: 60;
|
||||
|
||||
--wa-color-indigo-95: #eef2ff /* oklch(96.191% 0.01793 272.31) */;
|
||||
--wa-color-indigo-90: #dde5ff /* oklch(92.379% 0.03641 272.07) */;
|
||||
@@ -79,19 +84,21 @@
|
||||
--wa-color-indigo-10: #1b1842 /* oklch(24.014% 0.0769 282.14) */;
|
||||
--wa-color-indigo-05: #100f29 /* oklch(18.672% 0.05145 281.93) */;
|
||||
--wa-color-indigo: var(--wa-color-indigo-40);
|
||||
--wa-color-indigo-key: 40;
|
||||
|
||||
--wa-color-purple-95: #f7efff /* oklch(96.298% 0.02281 308.2) */;
|
||||
--wa-color-purple-90: #efe0ff /* oklch(92.801% 0.0444 307.25) */;
|
||||
--wa-color-purple-80: #dcbdfe /* oklch(84.655% 0.09457 306.19) */;
|
||||
--wa-color-purple-70: #cb99fd /* oklch(76.728% 0.14746 306.23) */;
|
||||
--wa-color-purple-60: #b875fb /* oklch(68.999% 0.19637 304.88) */;
|
||||
--wa-color-purple-50: #9e44f3 /* oklch(59.348% 0.24636 302.91) */;
|
||||
--wa-color-purple-40: #7e22cd /* oklch(49.465% 0.23596 302.16) */;
|
||||
--wa-color-purple-30: #63209a /* oklch(41.52% 0.18376 304.12) */;
|
||||
--wa-color-purple-20: #4b1079 /* oklch(33.995% 0.16043 303.8) */;
|
||||
--wa-color-purple-10: #2f0451 /* oklch(25.081% 0.12442 302.96) */;
|
||||
--wa-color-purple-05: #1e0238 /* oklch(19.51% 0.09712 301.8) */;
|
||||
--wa-color-purple: var(--wa-color-purple-50);
|
||||
--wa-color-purple-95: #f2f0ff /* oklch(96.104% 0.02008 292.15) */;
|
||||
--wa-color-purple-90: #e8e3ff /* oklch(92.821% 0.03803 293.84) */;
|
||||
--wa-color-purple-80: #cfc1ff /* oklch(84.348% 0.08665 294.83) */;
|
||||
--wa-color-purple-70: #b7a0ff /* oklch(76.256% 0.13508 294.09) */;
|
||||
--wa-color-purple-60: #a27eff /* oklch(68.532% 0.18446 293.83) */;
|
||||
--wa-color-purple-50: #8851f7 /* oklch(58.85% 0.23337 293.05) */;
|
||||
--wa-color-purple-40: #6f25de /* oklch(49.509% 0.24843 292.64) */;
|
||||
--wa-color-purple-30: #5910ba /* oklch(42.188% 0.22532 292.19) */;
|
||||
--wa-color-purple-20: #3e1485 /* oklch(33.887% 0.1683 291.25) */;
|
||||
--wa-color-purple-10: #250b55 /* oklch(24.903% 0.1207 290.68) */;
|
||||
--wa-color-purple-05: #18053a /* oklch(19.398% 0.09378 291.87) */;
|
||||
--wa-color-purple: var(--wa-color-purple-40);
|
||||
--wa-color-purple-key: 40;
|
||||
|
||||
--wa-color-gray-95: #f1f2f4 /* oklch(96.095% 0.00288 264.54) */;
|
||||
--wa-color-gray-90: #e3e5e9 /* oklch(92.152% 0.00582 264.53) */;
|
||||
@@ -105,4 +112,5 @@
|
||||
--wa-color-gray-10: #161e2d /* oklch(23.484% 0.03142 262.56) */;
|
||||
--wa-color-gray-05: #0c1220 /* oklch(18.396% 0.03036 265.82) */;
|
||||
--wa-color-gray: var(--wa-color-gray-40);
|
||||
--wa-color-gray-key: 40;
|
||||
}
|
||||
|
||||
@@ -71,13 +71,13 @@ input[type='radio'],
|
||||
input[type='radio'],
|
||||
label:has(input[type='radio']),
|
||||
input[type='radio'] + label,
|
||||
:host [part~='base'] {
|
||||
:host {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Checked */
|
||||
input[type='radio']:checked,
|
||||
:host .radio--checked .control {
|
||||
:host(:state(checked)) .control {
|
||||
color: var(--checked-icon-color);
|
||||
border-color: var(--border-color-checked);
|
||||
background-color: var(--background-color-checked);
|
||||
|
||||
@@ -25,14 +25,14 @@
|
||||
--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-cyan-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-cyan-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-cyan-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-cyan-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-cyan-30);
|
||||
--wa-color-success-on-quiet: var(--wa-color-cyan-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-cyan-40);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-95);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-90);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-70);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-30);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-40);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-40);
|
||||
--wa-color-success-on-loud: var(--wa-color-text-normal);
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
|
||||
@@ -85,14 +85,14 @@
|
||||
--wa-color-brand-on-normal: var(--wa-color-brand-80);
|
||||
--wa-color-brand-on-loud: white;
|
||||
|
||||
--wa-color-success-fill-quiet: var(--wa-color-cyan-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-cyan-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-cyan-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-cyan-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-cyan-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-cyan-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-cyan-80);
|
||||
--wa-color-success-fill-quiet: var(--wa-color-green-10);
|
||||
--wa-color-success-fill-normal: var(--wa-color-green-20);
|
||||
--wa-color-success-fill-loud: var(--wa-color-green-50);
|
||||
--wa-color-success-border-quiet: var(--wa-color-green-30);
|
||||
--wa-color-success-border-normal: var(--wa-color-green-50);
|
||||
--wa-color-success-border-loud: var(--wa-color-green-80);
|
||||
--wa-color-success-on-quiet: var(--wa-color-green-70);
|
||||
--wa-color-success-on-normal: var(--wa-color-green-80);
|
||||
--wa-color-success-on-loud: white;
|
||||
|
||||
--wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
/* 0 specificity. Safari doesn't like :where(:host()) so we need a separate rule. */
|
||||
.wa-filled,
|
||||
.wa-plain,
|
||||
.wa-accent,
|
||||
:where(.wa-filled, .wa-plain, .wa-accent, .wa-outlined),
|
||||
:host {
|
||||
--border-color: transparent;
|
||||
--outlined-border-color: initial;
|
||||
--outlined-border-color-hover: initial;
|
||||
--outlined-text-color: initial;
|
||||
--outlined-text-color-hover: initial;
|
||||
}
|
||||
|
||||
.wa-outlined,
|
||||
|
||||
Reference in New Issue
Block a user