mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 12:09:26 +00:00
add variants, share styles with color palettes
This commit is contained in:
lindsaym-fa
@@ -6,27 +6,8 @@
|
||||
<wa-radio-group id="palette-picker" value="default" class="radio-cards">
|
||||
<span slot="label" class="wa-visually-hidden">Color Palette</span>
|
||||
<div class="wa-grid">
|
||||
{%- for palette in themer.palettes -%}
|
||||
{%- if not palette.isPro -%}
|
||||
<wa-radio value="{{ palette.name | lower }}">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>{{ palette.name }}</span>
|
||||
<div class="wa-palette-{{ palette.name | lower }} palette-preview wa-grid wa-gap-3xs">
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-radio>
|
||||
{%- else -%}
|
||||
{% raw %}{%- if currentUser.hasPro -%}{% endraw %}
|
||||
{%- for palette in themer.palettes -%}
|
||||
{%- if not palette.isPro -%}
|
||||
<wa-radio value="{{ palette.name | lower }}">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>{{ palette.name }}</span>
|
||||
@@ -44,20 +25,39 @@
|
||||
</div>
|
||||
</div>
|
||||
</wa-radio>
|
||||
{% raw %}{%- endif -%}{% endraw %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
{%- else -%}
|
||||
{% raw %}{%- if currentUser.hasPro -%}{% endraw %}
|
||||
<wa-radio value="{{ palette.name | lower }}">
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<span>{{ palette.name }}</span>
|
||||
<div class="wa-palette-{{ palette.name | lower }} palette-preview wa-grid wa-gap-3xs">
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
<span class="preview-swatch"></span>
|
||||
</div>
|
||||
</div>
|
||||
</wa-radio>
|
||||
{% raw %}{%- endif -%}{% endraw %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</wa-radio-group>
|
||||
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div id="palette" class="wa-stack wa-gap-xs">
|
||||
{%- for color in themer.colors -%}
|
||||
<div class="palette wa-flank wa-gap-xs">
|
||||
<div class="palette-label">{{ color }}</div>
|
||||
<div class="palette-swatches wa-grid wa-gap-2xs">
|
||||
<div class="color-scale wa-flank wa-gap-xs">
|
||||
<div class="color-name">{{ color }}</div>
|
||||
<div class="color-swatches wa-grid wa-gap-2xs">
|
||||
{%- for tint in themer.tints -%}
|
||||
<wa-copy-button
|
||||
class="palette-swatch"
|
||||
class="color-swatch"
|
||||
copy-label="{{ color }} {{ tint }}"
|
||||
value="var(--wa-color-{{ color }}-{{ tint }})"
|
||||
style="--color: var(--wa-color-{{ color }}-{{ tint }}); --tint: '{{ tint }}'"
|
||||
@@ -76,10 +76,10 @@
|
||||
const palettePicker = document.getElementById('palette-picker');
|
||||
|
||||
// Set first radio as checked and add initial palette class
|
||||
const firstRadio = palettePicker.querySelector('wa-radio');
|
||||
if (firstRadio) {
|
||||
firstRadio.checked = true;
|
||||
paletteContainer.classList.add(`wa-palette-${firstRadio.value}`);
|
||||
const firstPaletteRadio = palettePicker.querySelector('wa-radio');
|
||||
if (firstPaletteRadio) {
|
||||
firstPaletteRadio.checked = true;
|
||||
paletteContainer.classList.add(`wa-palette-${firstPaletteRadio.value}`);
|
||||
}
|
||||
|
||||
// Listen for radio changes
|
||||
@@ -99,22 +99,10 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#color-palettes {
|
||||
#color-palettes:has(+ *) {
|
||||
margin-block-end: var(--wa-content-spacing);
|
||||
}
|
||||
|
||||
.palette {
|
||||
--flank-size: 6ch;
|
||||
--content-percentage: 88%;
|
||||
--reserved-tint-space: calc(var(--wa-font-size-xs) + var(--wa-space-xs)); /* TODO: rename */
|
||||
margin-bottom: var(--reserved-tint-space);
|
||||
}
|
||||
|
||||
.palette-swatches {
|
||||
--min-column-size: 2.5rem;
|
||||
grid-row-gap: calc(var(--reserved-tint-space) + var(--wa-space-xs));
|
||||
}
|
||||
|
||||
wa-radio-group.radio-cards {
|
||||
&::part(form-control-input) {
|
||||
display: grid;
|
||||
@@ -168,54 +156,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.palette-label {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-transform: capitalize;
|
||||
font-size: var(--wa-font-size-s);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.palette-swatch {
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: var(--tint);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--reserved-tint-space));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: var(--wa-font-size-xs);
|
||||
line-height: 1;
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::part(button) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: var(--color);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
|
||||
&:hover::part(button) {
|
||||
transform: scale(1.075);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&::part(copy-icon),
|
||||
&::part(success-icon),
|
||||
&::part(error-icon) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.palette-preview {
|
||||
--min-column-size: 0rem;
|
||||
}
|
||||
@@ -257,11 +197,4 @@
|
||||
background-color: var(--wa-color-gray);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smaller screens */
|
||||
@media (max-width: 768px) {
|
||||
.palette-swatch {
|
||||
aspect-ratio: 1.5 / 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
27
packages/webawesome/docs/_includes/theming/variants.njk
Normal file
27
packages/webawesome/docs/_includes/theming/variants.njk
Normal file
@@ -0,0 +1,27 @@
|
||||
{% set colorVariants = ["brand", "neutral", "success", "warning", "danger"] %}
|
||||
|
||||
<div id="color-variants" class="wa-stack wa-gap-xs">
|
||||
{%- for colorVariant in colorVariants -%}
|
||||
<div class="color-scale wa-flank wa-gap-xs">
|
||||
<div class="color-name">{{ colorVariant }}</div>
|
||||
<div class="color-swatches wa-grid wa-gap-2xs">
|
||||
{%- for tint in themer.tints -%}
|
||||
<wa-copy-button
|
||||
class="color-swatch"
|
||||
copy-label="{{ colorVariant }} {{ tint }}"
|
||||
value="var(--wa-color-{{ colorVariant }}-{{ tint }})"
|
||||
style="--color: var(--wa-color-{{ colorVariant }}-{{ tint }}); --tint: '{{ tint }}'"
|
||||
>
|
||||
<span class="wa-visually-hidden">--wa-color-{{ colorVariant }}-{{ tint }}</span>
|
||||
</wa-copy-button>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#color-variants:has(+ *) {
|
||||
margin-block-end: var(--wa-content-spacing);
|
||||
}
|
||||
</style>
|
||||
@@ -629,6 +629,68 @@ table.colors {
|
||||
--icon-color: var(--wa-color-success-fill-quiet);
|
||||
}
|
||||
|
||||
/* Theming */
|
||||
|
||||
.color-scale.wa-flank {
|
||||
--flank-size: 6ch;
|
||||
--content-percentage: 88%;
|
||||
--reserved-tint-space: calc(var(--wa-font-size-xs) + var(--wa-space-xs)); /* TODO: rename */
|
||||
margin-bottom: var(--reserved-tint-space);
|
||||
|
||||
.color-swatches.wa-grid {
|
||||
--min-column-size: 2.5rem;
|
||||
grid-row-gap: calc(var(--reserved-tint-space) + var(--wa-space-xs));
|
||||
}
|
||||
|
||||
.color-name {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
text-transform: capitalize;
|
||||
font-size: var(--wa-font-size-s);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
wa-copy-button.color-swatch {
|
||||
padding: 0;
|
||||
aspect-ratio: 1;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: var(--tint);
|
||||
position: absolute;
|
||||
bottom: calc(-1 * var(--reserved-tint-space));
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: var(--wa-font-size-xs);
|
||||
line-height: 1;
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&::part(button) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
background-color: var(--color);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
transition: transform 0.1s ease, box-shadow 0.1s ease;
|
||||
}
|
||||
|
||||
&:hover::part(button) {
|
||||
transform: scale(1.075);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&::part(copy-icon),
|
||||
&::part(success-icon),
|
||||
&::part(error-icon) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Layout Examples */
|
||||
.layout-example-boundary {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
|
||||
@@ -6,16 +6,18 @@ layout: page-outline
|
||||
|
||||
Web Awesome themes apply a cohesive look and feel across the entire library. A theme is a collection of predefined CSS custom properties that cover a range of styles from colors to transitions. We call these CSS custom properties design tokens.
|
||||
|
||||
There are 3 pre-made Free themes to choose from and an additional 8 pre-made themes in Web Awesome Pro. You can also build your own manually with CSS or with our Pro Theme Builder.
|
||||
There are 11 handcrafted themes to choose from; 3 are free to use with an additional 9 available in Web Awesome Pro. You can also build your own manually with CSS or with our Pro Theme Builder.
|
||||
|
||||
## Key Concepts
|
||||
|
||||
### Color Palettes
|
||||
Themes are made up of several layers of increasing specificity, each represented by a CSS class on the document.
|
||||
|
||||
### Color Palette
|
||||
`.wa-palette-{name}`
|
||||
|
||||
Color palettes give you a full spectrum of colors to use in your project. A color palette defines 10 hues — red, orange, yellow, green, cyan, blue, indigo, purple, pink, and gray — each with 11 tints. Tints are assigned numbers that correlate to their lightness.
|
||||
|
||||
There are 3 Free color palettes to choose from and an additional 6 color palettes in Web Awesome Pro.
|
||||
There are 9 specially crafted color palettes; 3 are free to use with an additional 6 available in Web Awesome Pro.
|
||||
|
||||
{% include 'theming/color-palettes.njk' %}
|
||||
|
||||
@@ -33,7 +35,7 @@ Variants convey a specific meaning through color. There are five variants:
|
||||
|
||||
Brand and neutral are used by nearly every element, component, and pattern across the library. Success, warning, and danger are used selectively by components that could benefit from semantic reinforcement, such as buttons and callouts.
|
||||
|
||||
TODO: Add variant scale preview
|
||||
{% include 'theming/variants.njk' %}
|
||||
|
||||
Any hue from a color palette can be assigned to a variant. Each variant is determined by `class="wa-{variant}-{hue}"` on the `<html>` element. If no class is specified:
|
||||
- **Brand** defaults to <wa-icon name="square" style="color: var(--wa-color-blue);"></wa-icon> **blue**
|
||||
@@ -42,16 +44,16 @@ Any hue from a color palette can be assigned to a variant. Each variant is deter
|
||||
- **Warning** defaults to <wa-icon name="square" style="color: var(--wa-color-yellow);"></wa-icon> **yellow**
|
||||
- **Danger** defaults to <wa-icon name="square" style="color: var(--wa-color-red);"></wa-icon> **red**
|
||||
|
||||
### Themes
|
||||
### Theme Styles
|
||||
`.wa-theme-{name}`
|
||||
|
||||
Themes assign specific tints from your chosen variant colors — along with qualities like fonts, borders, space, and shadows — to design tokens that style elements and components. Themes may also contain custom CSS overrides to change the default look of components.
|
||||
Theme styles assign specific tints from your chosen variant colors — along with qualities like fonts, borders, space, and shadows — to design tokens that style elements and components. Themes may also contain custom CSS overrides to change the default look of components.
|
||||
|
||||
TODO: Add theme preview
|
||||
|
||||
Your theme is determined by `class="wa-theme-{name}"` on the `<html>` element. If no class is specified, the default theme is used.
|
||||
|
||||
### Light and Dark Modes
|
||||
### Light and Dark Mode
|
||||
`.wa-light` | `.wa-dark`
|
||||
|
||||
Every theme is designed to adapt to light and dark mode. Light mode styles are applied by default, but you can apply a specific color scheme to an entire page or just a section with `class="wa-light"` or `class="wa-dark"`.
|
||||
@@ -150,7 +152,7 @@ systemDark.addEventListener('change', applyDark);
|
||||
applyDark();
|
||||
```
|
||||
|
||||
## Bringing it Together
|
||||
## Using Themes
|
||||
|
||||
TODO
|
||||
|
||||
|
||||
Reference in New Issue
Block a user