+
+ Theming Overview
+
Color
diff --git a/docs/_includes/svgs/theming/borders.njk b/docs/_includes/svgs/theming/borders.njk
new file mode 100644
index 000000000..028b22718
--- /dev/null
+++ b/docs/_includes/svgs/theming/borders.njk
@@ -0,0 +1,6 @@
+
+
diff --git a/docs/_includes/svgs/theming/color.njk b/docs/_includes/svgs/theming/color.njk
new file mode 100644
index 000000000..69591dccb
--- /dev/null
+++ b/docs/_includes/svgs/theming/color.njk
@@ -0,0 +1,8 @@
+
+
diff --git a/docs/_includes/svgs/theming/component-groups.njk b/docs/_includes/svgs/theming/component-groups.njk
new file mode 100644
index 000000000..b8bab5a20
--- /dev/null
+++ b/docs/_includes/svgs/theming/component-groups.njk
@@ -0,0 +1,10 @@
+
+
diff --git a/docs/_includes/svgs/theming/focus.njk b/docs/_includes/svgs/theming/focus.njk
new file mode 100644
index 000000000..8e5020d4a
--- /dev/null
+++ b/docs/_includes/svgs/theming/focus.njk
@@ -0,0 +1,5 @@
+
+
diff --git a/docs/_includes/svgs/theming/shadows.njk b/docs/_includes/svgs/theming/shadows.njk
new file mode 100644
index 000000000..d5705a85c
--- /dev/null
+++ b/docs/_includes/svgs/theming/shadows.njk
@@ -0,0 +1,4 @@
+
+
\ No newline at end of file
diff --git a/docs/_includes/svgs/theming/space.njk b/docs/_includes/svgs/theming/space.njk
new file mode 100644
index 000000000..7a576beda
--- /dev/null
+++ b/docs/_includes/svgs/theming/space.njk
@@ -0,0 +1,11 @@
+
+
diff --git a/docs/_includes/svgs/theming/transitions.njk b/docs/_includes/svgs/theming/transitions.njk
new file mode 100644
index 000000000..24edadfbf
--- /dev/null
+++ b/docs/_includes/svgs/theming/transitions.njk
@@ -0,0 +1,6 @@
+
+
diff --git a/docs/_includes/svgs/theming/typography.njk b/docs/_includes/svgs/theming/typography.njk
new file mode 100644
index 000000000..78cadd17c
--- /dev/null
+++ b/docs/_includes/svgs/theming/typography.njk
@@ -0,0 +1,4 @@
+
+
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index 1addb1c55..6cc2502d5 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -222,6 +222,64 @@ wa-page > main {
}
}
+/* Index Pages */
+wa-page > main:has(> .index-grid) {
+ max-width: 120ch;
+ margin-inline: auto;
+}
+
+.index-summary {
+ max-inline-size: 80ch;
+}
+
+.index-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
+ gap: var(--wa-space-2xl);
+}
+
+.index-category {
+ grid-column: 1 / -1;
+ margin-block-end: 0;
+ margin-block-start: var(--wa-space-2xl);
+}
+
+.index-grid a {
+ border-radius: var(--wa-border-radius-m);
+}
+
+.index-grid wa-card {
+ --box-shadow: none;
+ --spacing: var(--wa-space-m);
+ inline-size: 100%;
+}
+
+.index-grid wa-card:hover {
+ --border-color: var(--wa-color-brand-border-loud);
+ --box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
+ & .page-name {
+ color: var(--wa-color-brand-on-quiet);
+ }
+}
+
+.index-grid wa-card [slot='header'] {
+ display: flex;
+}
+
+.index-grid wa-card::part(header) {
+ background-color: var(--wa-color-neutral-fill-quiet);
+ border-bottom: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-block-size: calc(6rem + var(--spacing));
+}
+
+.index-grid .page-name {
+ font-size: var(--wa-font-size-s);
+ font-weight: var(--wa-font-weight-action);
+}
+
/* Swatches */
.swatch {
background-color: transparent;
diff --git a/docs/docs/components/index.md b/docs/docs/components/index.md
index fec90d1af..6c53ce82e 100644
--- a/docs/docs/components/index.md
+++ b/docs/docs/components/index.md
@@ -5,58 +5,14 @@ layout: page-outline
---
-Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
+Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
Actions
@@ -65,7 +21,7 @@ layout: page-outline
{% include "svgs/button.njk" %}
-
Button
+
Button
@@ -73,7 +29,7 @@ layout: page-outline
{% include "svgs/button-group.njk" %}
- Button Group
+ Button Group
@@ -81,7 +37,7 @@ layout: page-outline
{% include "svgs/copy-button.njk" %}
- Copy Button
+ Copy Button
@@ -89,7 +45,7 @@ layout: page-outline
{% include "svgs/dropdown.njk" %}
- Dropdown
+ Dropdown
@@ -97,7 +53,7 @@ layout: page-outline
{% include "svgs/icon-button.njk" %}
- Icon Button
+ Icon Button
@@ -105,7 +61,7 @@ layout: page-outline
{% include "svgs/menu.njk" %}
- Menu
+ Menu
@@ -113,7 +69,7 @@ layout: page-outline
{% include "svgs/qr-code.njk" %}
- QR Code
+ QR Code
@@ -123,7 +79,7 @@ layout: page-outline
{% include "svgs/badge.njk" %}
-
Badge
+
Badge
@@ -131,7 +87,7 @@ layout: page-outline
{% include "svgs/callout.njk" %}
- Callout
+ Callout
@@ -139,7 +95,7 @@ layout: page-outline
{% include "svgs/progress-bar.njk" %}
- Progress Bar
+ Progress Bar
@@ -147,7 +103,7 @@ layout: page-outline
{% include "svgs/progress-ring.njk" %}
- Progress Ring
+ Progress Ring
@@ -155,7 +111,7 @@ layout: page-outline
{% include "svgs/skeleton.njk" %}
- Skeleton
+ Skeleton
@@ -163,7 +119,7 @@ layout: page-outline
{% include "svgs/spinner.njk" %}
- Spinner
+ Spinner
@@ -171,7 +127,7 @@ layout: page-outline
{% include "svgs/tag.njk" %}
- Tag
+ Tag
@@ -179,7 +135,7 @@ layout: page-outline
{% include "svgs/tooltip.njk" %}
- Tooltip
+ Tooltip
@@ -189,7 +145,7 @@ layout: page-outline
{% include "svgs/animated-image.njk" %}
-
Animated Image
+
Animated Image
@@ -197,7 +153,7 @@ layout: page-outline
{% include "svgs/avatar.njk" %}
- Avatar
+ Avatar
@@ -205,7 +161,7 @@ layout: page-outline
{% include "svgs/carousel.njk" %}
- Carousel
+ Carousel
@@ -213,7 +169,7 @@ layout: page-outline
{% include "svgs/icon.njk" %}
- Icon
+ Icon
@@ -221,7 +177,7 @@ layout: page-outline
{% include "svgs/image-comparer.njk" %}
- Image Comparer
+ Image Comparer
@@ -231,7 +187,7 @@ layout: page-outline
{% include "svgs/checkbox.njk" %}
-
Checkbox
+
Checkbox
@@ -239,7 +195,7 @@ layout: page-outline
{% include "svgs/color-picker.njk" %}
- Color Picker
+ Color Picker
@@ -247,7 +203,7 @@ layout: page-outline
{% include "svgs/input.njk" %}
- Input
+ Input
@@ -255,7 +211,7 @@ layout: page-outline
{% include "svgs/radio-group.njk" %}
- Radio Group
+ Radio Group
@@ -263,7 +219,7 @@ layout: page-outline
{% include "svgs/range.njk" %}
- Range
+ Range
@@ -271,7 +227,7 @@ layout: page-outline
{% include "svgs/rating.njk" %}
- Rating
+ Rating
@@ -279,7 +235,7 @@ layout: page-outline
{% include "svgs/select.njk" %}
- Select
+ Select
@@ -287,7 +243,7 @@ layout: page-outline
{% include "svgs/switch.njk" %}
- Switch
+ Switch
@@ -295,7 +251,7 @@ layout: page-outline
{% include "svgs/textarea.njk" %}
- Textarea
+ Textarea
@@ -305,7 +261,7 @@ layout: page-outline
{% include "svgs/breadcrumb.njk" %}
-
Breadcrumb
+
Breadcrumb
@@ -313,7 +269,7 @@ layout: page-outline
{% include "svgs/tab-group.njk" %}
- Tab Group
+ Tab Group
@@ -321,7 +277,7 @@ layout: page-outline
{% include "svgs/tree.njk" %}
- Tree
+ Tree
@@ -331,7 +287,7 @@ layout: page-outline
{% include "svgs/card.njk" %}
-
Card
+
Card
@@ -339,7 +295,7 @@ layout: page-outline
{% include "svgs/details.njk" %}
- Details
+ Details
@@ -347,7 +303,7 @@ layout: page-outline
{% include "svgs/dialog.njk" %}
- Dialog
+ Dialog
@@ -355,7 +311,7 @@ layout: page-outline
{% include "svgs/divider.njk" %}
- Divider
+ Divider
@@ -363,7 +319,7 @@ layout: page-outline
{% include "svgs/drawer.njk" %}
- Drawer
+ Drawer
@@ -371,7 +327,7 @@ layout: page-outline
{% include "svgs/split-panel.njk" %}
- Split Panel
+ Split Panel
@@ -381,7 +337,7 @@ layout: page-outline
{% include "svgs/animation.njk" %}
-
Animation
+
Animation
@@ -389,7 +345,7 @@ layout: page-outline
{% include "svgs/format-bytes.njk" %}
- Format Bytes
+ Format Bytes
@@ -397,7 +353,7 @@ layout: page-outline
{% include "svgs/format-date.njk" %}
- Format Date
+ Format Date
@@ -405,7 +361,7 @@ layout: page-outline
{% include "svgs/format-number.njk" %}
- Format Number
+ Format Number
@@ -413,7 +369,7 @@ layout: page-outline
{% include "svgs/include.njk" %}
- Include
+ Include
@@ -421,7 +377,7 @@ layout: page-outline
{% include "svgs/mutation-observer.njk" %}
- Mutation Observer
+ Mutation Observer
@@ -429,7 +385,7 @@ layout: page-outline
{% include "svgs/popup.njk" %}
- Popup
+ Popup
@@ -437,7 +393,7 @@ layout: page-outline
{% include "svgs/relative-time.njk" %}
- Relative Time
+ Relative Time
@@ -445,7 +401,7 @@ layout: page-outline
{% include "svgs/resize-observer.njk" %}
- Resize Observer
+ Resize Observer
@@ -453,7 +409,7 @@ layout: page-outline
{% include "svgs/visually-hidden.njk" %}
- Visually Hidden
+ Visually Hidden
\ No newline at end of file
diff --git a/docs/docs/themes.md b/docs/docs/themes.md
index 9ffb7670b..6d757f457 100644
--- a/docs/docs/themes.md
+++ b/docs/docs/themes.md
@@ -4,49 +4,64 @@ description: Everything you need to know about theming Web Awesome.
layout: page-outline
---
-Web Awesome is designed to be highly customizable through pure CSS. Out of the box, the default theme includes both light and dark styles. Alternatively, you can design your own theme.
+Themes are collections of pre-defined CSS custom properties that thread through every Web Awesome component and pattern.
-In essence, a theme is a stylesheet that uses the Web Awesome API to define custom properties and apply custom styles to components. To create a theme, you will need a decent understanding of CSS, including [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) and the [`::part` selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part).
+Web Awesome includes two pre-made themes:
+- **Default** for a clean look that prioritizes accessibility and performance
+- **Classic** for the look and feel of Shoelace with more accessible color pairings
-:::info
-For component developers, built-in themes are also available as JavaScript modules that export [Lit CSSResult](https://lit.dev/docs/api/styles/#CSSResult) objects. You can find them in `/dist/themes/*.styles.js`.
-:::
+## What's a Theme?
-## Theme Basics
+Themes are a standard collection of [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) that cover all styles from colors to transitions. We use these custom properties throughout Web Awesome components to ensure a cohesive look and feel. Our [Theming pages](/docs/theming/) document these styles so that you can use them freely throughout your project and customize them as needed.
-All themes are scoped to classes using the format `wa-theme-{name}`, where `{name}` is a lowercase, hyphen-delimited value representing the name of the theme. The included theme uses `wa-theme-default-light` and `wa-theme-default-dark` for light and dark styles, respectively. A custom theme called "Purple Power", for example, would use a class called `wa-theme-purple-power`.
+Themes are scoped to unique classes for each color scheme, such as `wa-theme-default-light` and `wa-theme-default-dark`, and the `:host` selector. Scoping to unique classes allows you to import multiple themes and use them interchangeably without collisions, while scoping to `:host` ensures the styles are applied to the shadow roots of custom elements.
-All selectors must be scoped to the theme's class to ensure interoperability with other themes. You should also scope them to `:host` so they can be imported and applied to custom element shadow roots.
+Additionally, styles may be scoped to the `:root` selector to be activated automatically. For pre-made themes, *all* custom properties are scoped to both `:root` and the class for the light color scheme (`wa-theme-default-light` or `wa-theme-classic-light`), activating the light color scheme by default.
+
+Other themes or color schemes must be activated with the corresponding class, like the dark color scheme for pre-made themes (`wa-theme-default-dark` or `wa-theme-classic-dark`), which only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
+
+For example, the default theme is set up like this:
```css
+:root,
:host,
-.wa-theme-purple-power {
- /* ... */
+.wa-theme-default-light {
+ /* all CSS custom properties for color, typography, space, etc. */
+}
+
+.wa-theme-default-dark,
+.wa-theme-default-dark :host {
+ /* subset of CSS custom properties for color */
}
```
-In the default theme, all CSS custom properties that make up Web Awesome's theming API, from colors to transitions, are scoped to both `:root` and `wa-theme-default-light`. `wa-theme-default-dark`, on the other hand, only defines a subset of custom properties for colors. This ensures that non-color styles only need to be defined once for the theme, regardless of whether the color scheme is light or dark.
+## Using Themes
-### Activating Themes
+You can import the default and classic themes from the Web Awesome CDN. Simply add the following code to the `` of your page to import the **default** theme:
-To activate a theme, import it and apply the theme's class to the `` element. This example imports and activates the default theme with dark styles.
+```html
+A theme is a collection of pre-defined CSS custom properties that control global styles from color to shadows. These custom properties thread through all Web Awesome components for a consistent look and feel.
+
+
\ No newline at end of file
diff --git a/src/themes/classic.css b/src/themes/classic.css
index b3df10a14..27eba2cd5 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -1,20 +1,18 @@
-@import 'depth_1_semiflat.css'; /* depth_0_flat.css, depth_1_semiflat.css, depth_2_chunky.css, depth_3_punchy.css, depth_4_glossy.css */
@import 'classic_components.css';
:root,
:host,
-.wa-theme-default-light {
+.wa-theme-classic-light {
color-scheme: light;
/**
- * Primitive colors
- * Each color is identified by a number that corresponds to its lightness value, where 100 is lightest (white) and 0 is darkest (black).
- * Lightness on this scale is directly related to relative luminance, so each lightness value has uniform WCAG 2.1 contrast across hues.
- * A difference of 40 between lightness values guarantees a minimum 3:1 contrast ratio.
- * A difference of 50 between lightness values guarantees a minimum 4.5:1 contrast ratio.
- * A difference of 60 between lightness values guarantees a minimum 7:1 contrast ratio.
+ * Literal Colors
+ * Each color is identified by a number that corresponds to its perceived lightness, where 100 is equal to white and 0 is equal to black.
+ * Each lightness value has nearly uniform WCAG 2.1 contrast across hues.
+ * A difference of 40 between lightness values ensures a minimum 3:1 contrast ratio.
+ * A difference of 50 between lightness values ensures a minimum 4.5:1 contrast ratio.
+ * A difference of 60 between lightness values ensures a minimum 7:1 contrast ratio.
*/
-
--wa-color-red-95: #feeeee;
--wa-color-red-90: #fedede;
--wa-color-red-80: #fdb8b8;
@@ -63,187 +61,184 @@
--wa-color-blue-10: #05202f;
--wa-color-blue-05: #04121b;
- --wa-color-gray-95: #f1f2f3;
- --wa-color-gray-90: #e5e6e7;
- --wa-color-gray-80: #c8c9cd;
- --wa-color-gray-70: #acafb4;
- --wa-color-gray-60: #8f95a0;
- --wa-color-gray-50: #6e7482;
- --wa-color-gray-40: #4f5967;
- --wa-color-gray-30: #3c4655;
- --wa-color-gray-20: #293240;
- --wa-color-gray-10: #171d2c;
- --wa-color-gray-05: #0d111b;
+ --wa-color-indigo-95: #eef2ff;
+ --wa-color-indigo-90: #dee5fd;
+ --wa-color-indigo-80: #bec8f2;
+ --wa-color-indigo-70: #9dabf0;
+ --wa-color-indigo-60: #818cf7;
+ --wa-color-indigo-50: #6063eb;
+ --wa-color-indigo-40: #4941d3;
+ --wa-color-indigo-30: #3930ad;
+ --wa-color-indigo-20: #29247a;
+ --wa-color-indigo-10: #191843;
+ --wa-color-indigo-05: #0f0e26;
- --wa-color-primary-95: var(--wa-color-blue-95);
- --wa-color-primary-90: var(--wa-color-blue-90);
- --wa-color-primary-80: var(--wa-color-blue-80);
- --wa-color-primary-70: var(--wa-color-blue-70);
- --wa-color-primary-60: var(--wa-color-blue-60);
- --wa-color-primary-50: var(--wa-color-blue-50);
- --wa-color-primary-40: var(--wa-color-blue-40);
- --wa-color-primary-30: var(--wa-color-blue-30);
- --wa-color-primary-20: var(--wa-color-blue-20);
- --wa-color-primary-10: var(--wa-color-blue-10);
- --wa-color-primary-05: var(--wa-color-blue-05);
+ --wa-color-violet-95: #f7efff;
+ --wa-color-violet-90: #efe0ff;
+ --wa-color-violet-80: #dcbdfe;
+ --wa-color-violet-70: #cb9afd;
+ --wa-color-violet-60: #b976f9;
+ --wa-color-violet-50: #9d46ec;
+ --wa-color-violet-40: #7d22cc;
+ --wa-color-violet-30: #631f9c;
+ --wa-color-violet-20: #48176e;
+ --wa-color-violet-10: #2e054e;
+ --wa-color-violet-05: #1d0331;
- --wa-color-base-95: var(--wa-color-gray-95);
- --wa-color-base-90: var(--wa-color-gray-90);
- --wa-color-base-80: var(--wa-color-gray-80);
- --wa-color-base-70: var(--wa-color-gray-70);
- --wa-color-base-60: var(--wa-color-gray-60);
- --wa-color-base-50: var(--wa-color-gray-50);
- --wa-color-base-40: var(--wa-color-gray-40);
- --wa-color-base-30: var(--wa-color-gray-30);
- --wa-color-base-20: var(--wa-color-gray-20);
- --wa-color-base-10: var(--wa-color-gray-10);
- --wa-color-base-05: var(--wa-color-gray-05);
+ --wa-color-gray-95: #f2f2f3;
+ --wa-color-gray-90: #e5e5e8;
+ --wa-color-gray-80: #c9c9cc;
+ --wa-color-gray-70: #aeafb1;
+ --wa-color-gray-60: #94959b;
+ --wa-color-gray-50: #72747d;
+ --wa-color-gray-40: #565861;
+ --wa-color-gray-30: #43454d;
+ --wa-color-gray-20: #313134;
+ --wa-color-gray-10: #1d1d20;
+ --wa-color-gray-05: #101113;
/**
- * Foundational theme colors
+ * Foundational Colors
*/
- /* Surfaces are background layers that UI components and other content rest on.
- * Surface colors support elevation, where raised is closest to the user and lowered is farthest away. */
+ /* Surfaces are background layers that other content rests on.
+ * Surface colors help convey hierarchy through elevation, where raised is closest to the user and lowered is farthest away. */
--wa-color-surface-raised: white;
--wa-color-surface-default: white;
- --wa-color-surface-lowered: var(--wa-color-base-95);
- --wa-color-surface-border: var(--wa-color-base-90);
+ --wa-color-surface-lowered: var(--wa-color-gray-95);
+ --wa-color-surface-border: var(--wa-color-gray-90);
/* Text colors are used for standard text elements.
- * Text should have a minimum 4.5:1 contrast ratio against surfaces.
- * Inverse text should support appropriate contrast against background colors with opposing lightness. */
- --wa-color-text-normal: var(--wa-color-base-10);
- --wa-color-text-quiet: var(--wa-color-base-40);
- --wa-color-text-link: var(--wa-color-brand-on-quiet);
+ * Recommended: minimum 4.5:1 contrast ratio between text colors and surface colors. */
+ --wa-color-text-normal: var(--wa-color-gray-10);
+ --wa-color-text-quiet: var(--wa-color-gray-40);
+ --wa-color-text-link: var(--wa-color-blue-50);
- /* Focus specifies the default color of the focus ring for predictable keyboard navigation.
- * Focus should have a minimum 3:1 contrast ratio against surfaces and background colors whenever possible. */
- --wa-color-focus: var(--wa-color-primary-60);
+ /* Overlays provide a backdrop for isolated content, often allowing background context to show through. */
+ --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-gray-10) 32%, transparent);
+ --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 8%, transparent);
- /* Overlays provide a backdrop for isolated content, often allowing background colors or content to show through. */
- --wa-color-overlay-modal: color-mix(in oklab, var(--wa-color-base-10) 32%, transparent);
- --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-base-50) 8%, transparent);
-
- /* Shadow specifies the default color for box shadows that indicate elevation. */
+ /* Shadows indicate elevation. Shadow color is used in your theme's shadow properties.
+ * By default, the opacity of your shadow color is tied to the blur of shadows in your theme.
+ * Because solid shadows appear stronger in color than diffused shadows, this helps keep consistent color intensity. */
--wa-color-shadow: color-mix(
in oklab,
- var(--wa-color-base-05) calc(var(--wa-shadow-blur-multiplier) * 8% + 4%),
+ var(--wa-color-gray-40) calc(var(--wa-shadow-blur-multiplier) * 24% + 8%),
transparent
);
- /* Mix colors are used in color-mix() to achieve consistent interaction effects across components. */
- --wa-color-mix-hover: black 12%;
+ /* Focus color provides the default color of the focus ring for predictable keyboard navigation.
+ * Recommended: minimum 3:1 contrast ratio against surfaces and background colors. */
+ --wa-color-focus: var(--wa-color-blue-60);
+
+ /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */
+ --wa-color-mix-hover: black 10%;
--wa-color-mix-active: black 20%;
/**
- * Semantic theme colors
- * Five semantic groups reinforce a component's message, intended usage, or expected results through meaningful hues -
- * * Brand to reinforce product branding
- * * Success to express validity or confirmation
- * * Warning to express caution or uncertainty
- * * Danger to express errors or risk
- * * Neutral for elements that are innocuous or inert
- * Each semantic group specifies colors to use as surfaces, fills, borders, and text with varying degrees of emphasis.
- * Accent colors are the most noticeable against surfaces, whereas subtle colors draw less attention.
- * Accent colors should have a minimum 3:1 contrast ratio against surfaces when possible.
- * Subtle colors have no contrast requirements.
- * Text colors should have a minimum 4.5:1 contrast ratio on the intended background - surface, subtle, or accent.
+ * Semantic Colors
+ * Five semantic groups - brand, success, neutral, warning, and danger - reinforce a component's message, intended usage, or expected results.
+ * Within these groups, each color specifies a role -
+ * * Fill for background colors or areas larger than a few pixels
+ * * Border for borders, dividers, and other stroke-like elements
+ * * On for content displayed on a fill with the corresponding attention
+ * Each role has three options for attention - quiet, normal, and loud - where quiet draws the least attention and loud draws the most.
*/
- --wa-color-brand-fill-loud: var(--wa-color-primary-50);
- --wa-color-brand-fill-quiet: var(--wa-color-primary-95);
- --wa-color-brand-fill-normal: var(--wa-color-primary-90);
- --wa-color-brand-border-quiet: var(--wa-color-primary-90);
- --wa-color-brand-border-normal: var(--wa-color-primary-80);
+ --wa-color-brand-fill-quiet: var(--wa-color-blue-95);
+ --wa-color-brand-fill-normal: var(--wa-color-blue-90);
+ --wa-color-brand-fill-loud: var(--wa-color-blue-50);
+ --wa-color-brand-border-quiet: var(--wa-color-blue-90);
+ --wa-color-brand-border-normal: var(--wa-color-blue-80);
+ --wa-color-brand-border-loud: var(--wa-color-blue-60);
+ --wa-color-brand-on-quiet: var(--wa-color-blue-50);
+ --wa-color-brand-on-normal: var(--wa-color-blue-40);
--wa-color-brand-on-loud: white;
- --wa-color-brand-on-normal: var(--wa-color-primary-40);
- --wa-color-brand-on-quiet: var(--wa-color-primary-50);
- --wa-color-success-fill-loud: var(--wa-color-green-50);
--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-50);
--wa-color-success-border-quiet: var(--wa-color-green-90);
--wa-color-success-border-normal: var(--wa-color-green-80);
- --wa-color-success-on-loud: white;
- --wa-color-success-on-normal: var(--wa-color-green-40);
+ --wa-color-success-border-loud: var(--wa-color-green-60);
--wa-color-success-on-quiet: var(--wa-color-green-50);
+ --wa-color-success-on-normal: var(--wa-color-green-40);
+ --wa-color-success-on-loud: white;
- --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-fill-quiet: var(--wa-color-yellow-95);
--wa-color-warning-fill-normal: var(--wa-color-yellow-90);
+ --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
--wa-color-warning-border-quiet: var(--wa-color-yellow-90);
--wa-color-warning-border-normal: var(--wa-color-yellow-80);
- --wa-color-warning-on-loud: white;
- --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+ --wa-color-warning-border-loud: var(--wa-color-yellow-60);
--wa-color-warning-on-quiet: var(--wa-color-yellow-50);
+ --wa-color-warning-on-normal: var(--wa-color-yellow-40);
+ --wa-color-warning-on-loud: white;
- --wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-fill-quiet: var(--wa-color-red-95);
--wa-color-danger-fill-normal: var(--wa-color-red-90);
+ --wa-color-danger-fill-loud: var(--wa-color-red-50);
--wa-color-danger-border-quiet: var(--wa-color-red-90);
--wa-color-danger-border-normal: var(--wa-color-red-80);
- --wa-color-danger-on-loud: white;
- --wa-color-danger-on-normal: var(--wa-color-red-40);
+ --wa-color-danger-border-loud: var(--wa-color-red-60);
--wa-color-danger-on-quiet: var(--wa-color-red-50);
+ --wa-color-danger-on-normal: var(--wa-color-red-40);
+ --wa-color-danger-on-loud: white;
- --wa-color-neutral-fill-loud: var(--wa-color-base-40);
- --wa-color-neutral-fill-quiet: var(--wa-color-base-95);
- --wa-color-neutral-fill-normal: var(--wa-color-base-90);
- --wa-color-neutral-border-quiet: var(--wa-color-base-90);
- --wa-color-neutral-border-normal: var(--wa-color-base-80);
+ --wa-color-neutral-fill-quiet: var(--wa-color-gray-95);
+ --wa-color-neutral-fill-normal: var(--wa-color-gray-90);
+ --wa-color-neutral-fill-loud: var(--wa-color-gray-40);
+ --wa-color-neutral-border-quiet: var(--wa-color-gray-90);
+ --wa-color-neutral-border-normal: var(--wa-color-gray-80);
+ --wa-color-neutral-border-loud: var(--wa-color-gray-50);
+ --wa-color-neutral-on-quiet: var(--wa-color-gray-40);
+ --wa-color-neutral-on-normal: var(--wa-color-gray-30);
--wa-color-neutral-on-loud: white;
- --wa-color-neutral-on-normal: var(--wa-color-base-40);
- --wa-color-neutral-on-quiet: var(--wa-color-base-50);
/**
* Typography
*/
- --wa-font-family-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
--wa-font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+ --wa-font-family-heading: var(--wa-font-family-body);
--wa-font-family-code: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--wa-font-family-longform: Georgia, 'Times New Roman', serif;
+ /* The default type scale is roughly based on the Major Second scale (x1.125),
+ * with each value rounded to the nearest whole pixel based on a 16px root font size.
+ * For larger font sizes, every other step on the scale is skipped in order to maximize variation.
+ * A multiplier is provided to uniformly increase or decrease all font sizes. */
+ --wa-font-size-multiplier: 1;
+ --wa-font-size-2xs: calc(0.6875rem * var(--wa-font-size-multiplier)); /* 11px */
+ --wa-font-size-xs: calc(0.75rem * var(--wa-font-size-multiplier)); /* 12px */
+ --wa-font-size-s: calc(0.875rem * var(--wa-font-size-multiplier)); /* 14px */
+ --wa-font-size-m: calc(1rem * var(--wa-font-size-multiplier)); /* 16px */
+ --wa-font-size-l: calc(1.25rem * var(--wa-font-size-multiplier)); /* 20px */
+ --wa-font-size-xl: calc(1.625rem * var(--wa-font-size-multiplier)); /* 26px */
+ --wa-font-size-2xl: calc(2rem * var(--wa-font-size-multiplier)); /* 32px */
+ --wa-font-size-3xl: calc(2.5625rem * var(--wa-font-size-multiplier)); /* 41px */
+ --wa-font-size-4xl: calc(3.25rem * var(--wa-font-size-multiplier)); /* 52px */
+
--wa-font-weight-light: 300;
--wa-font-weight-normal: 400;
--wa-font-weight-semibold: 500;
--wa-font-weight-bold: 600;
- --wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-body: var(--wa-font-weight-normal);
+ --wa-font-weight-heading: var(--wa-font-weight-semibold);
--wa-font-weight-action: var(--wa-font-weight-semibold);
- /* The default typescale is based on the Major Second scale (x1.125).
- * Every other step on the scale is skipped for larger sizes in order to maximize variation. */
- --wa-font-size-root: 16px;
- --wa-font-size-2xs: 0.6875rem; /* 11px */
- --wa-font-size-xs: 0.75rem; /* 12px */
- --wa-font-size-s: 0.875rem; /* 14px */
- --wa-font-size-m: 1rem; /* 16px */
- --wa-font-size-l: 1.25rem; /* 20px */
- --wa-font-size-xl: 1.625rem; /* 26px */
- --wa-font-size-2xl: 2rem; /* 32px */
- --wa-font-size-3xl: 2.5625rem; /* 41px */
- --wa-font-size-4xl: 3.25rem; /* 52px */
-
- --wa-line-height-condensed: 1.25;
+ --wa-line-height-condensed: 1.2;
--wa-line-height-normal: 1.6;
--wa-line-height-expanded: 2;
+ --wa-link-decoration-default: underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted;
+ --wa-link-decoration-hover: underline;
+
/**
* Spacing
- * Used intentionally, space properties yield a predictable rhythm and support effective implementation of the proximity principle.
- * Space can be organized into three groups with distinct usage -
- * * Small-scale space (3xs, 2xs, and xs) is used for gaps between closely related elements, such as a dropdown button and its menu,
- * and padding within small components, such as badges and tooltips
- * * Normal space (s, m, and l) is used for gaps between related elements with distinct purposes or touch targets and padding within
- * typical interface elements, such as buttons and inputs
- * * Large-scale space (xl, 2xl, and 3xl) is used for gaps between unrelated elements and padding within larger components,
- * such as cards and dialogs
*/
- /* Space is designed to scale according to a single base value.
- * The base value is intended for calculations and is not used by components directly. */
+
+ /* A multiplier is provided to uniformly increase or decrease all spacing. */
--wa-space-multiplier: 1;
--wa-space-3xs: calc(var(--wa-space-multiplier) * 0.125rem); /* 2px */
--wa-space-2xs: calc(var(--wa-space-multiplier) * 0.25rem); /* 4px */
@@ -260,34 +255,23 @@
*/
--wa-border-style: solid;
- /* Border widths are designed to scale according to a single base value.
- * The base value is intended for calculations and is not used by components directly. */
+ /* A multiplier is provided to uniformly increase or decrease all border widths. */
--wa-border-width-multiplier: 0.0625;
--wa-border-width-s: calc(var(--wa-border-width-multiplier) * 1rem);
--wa-border-width-m: calc(var(--wa-border-width-multiplier) * 2rem);
--wa-border-width-l: calc(var(--wa-border-width-multiplier) * 3rem);
- --wa-form-control-border-style: var(--wa-border-style);
- --wa-form-control-border-width: var(--wa-border-width-s);
-
- --wa-panel-border-style: var(--wa-border-style);
- --wa-panel-border-width: var(--wa-border-width-s);
-
- /**
- * Corners
- */
- /* Corners are designed to scale according to a single base value.
- * The base value is intended for calculations and is not used by components directly. */
+ /* A multiplier is provided to uniformly increase or decrease all border radii. */
--wa-border-radius-multiplier: 0.25;
- --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.75rem);
+ --wa-border-radius-xs: calc(var(--wa-border-radius-multiplier) * 0.5rem);
--wa-border-radius-s: calc(var(--wa-border-radius-multiplier) * 1rem);
--wa-border-radius-m: calc(var(--wa-border-radius-multiplier) * 2rem);
--wa-border-radius-l: calc(var(--wa-border-radius-multiplier) * 3rem);
- /* Semantic corner properties create specific shapes beyond the theme's preferred corner styles. */
+ /* These common border radius properties can create specific shapes beyond the theme's preferred corner styles. */
--wa-border-radius-pill: 9999px;
--wa-border-radius-circle: 50%;
- --wa-border-radius-square: 0;
+ --wa-border-radius-square: 0px;
/**
* Focus
@@ -299,23 +283,62 @@
--wa-focus-ring-offset: 0.0625rem; /* 1px */
/**
- * Links
+ * Shadows
+ * Shadow properties are highly modular to make it easy to create custom shadow effects or transform elements based on specific shadow qualities.
+ * A multiplier is provided for each shadow quality to uniformly scale all related values.
*/
- --wa-link-decoration-default: underline;
- --wa-link-decoration-hover: underline;
+
+ --wa-shadow-offset-x-multiplier: 0;
+ --wa-shadow-offset-x-xs: calc(var(--wa-shadow-offset-x-multiplier) * 0.5rem);
+ --wa-shadow-offset-x-s: calc(var(--wa-shadow-offset-x-multiplier) * 1rem);
+ --wa-shadow-offset-x-m: calc(var(--wa-shadow-offset-x-multiplier) * 2rem);
+ --wa-shadow-offset-x-l: calc(var(--wa-shadow-offset-x-multiplier) * 4rem);
+
+ --wa-shadow-offset-y-multiplier: 0.0625;
+ --wa-shadow-offset-y-xs: calc(var(--wa-shadow-offset-y-multiplier) * 0.5rem);
+ --wa-shadow-offset-y-s: calc(var(--wa-shadow-offset-y-multiplier) * 1rem);
+ --wa-shadow-offset-y-m: calc(var(--wa-shadow-offset-y-multiplier) * 2rem);
+ --wa-shadow-offset-y-l: calc(var(--wa-shadow-offset-y-multiplier) * 4rem);
+
+ --wa-shadow-blur-multiplier: 0.125;
+ --wa-shadow-blur-xs: calc(var(--wa-shadow-blur-multiplier) * 0.5rem);
+ --wa-shadow-blur-s: calc(var(--wa-shadow-blur-multiplier) * 1rem);
+ --wa-shadow-blur-m: calc(var(--wa-shadow-blur-multiplier) * 2rem);
+ --wa-shadow-blur-l: calc(var(--wa-shadow-blur-multiplier) * 4rem);
+
+ --wa-shadow-spread-multiplier: 0;
+ --wa-shadow-spread-xs: calc(var(--wa-shadow-spread-multiplier) * 0.5rem);
+ --wa-shadow-spread-s: calc(var(--wa-shadow-spread-multiplier) * 1rem);
+ --wa-shadow-spread-m: calc(var(--wa-shadow-spread-multiplier) * 2rem);
+ --wa-shadow-spread-l: calc(var(--wa-shadow-spread-multiplier) * 4rem);
+
+ --wa-shadow-xs: var(--wa-shadow-offset-x-xs) var(--wa-shadow-offset-y-xs) var(--wa-shadow-blur-xs)
+ var(--wa-shadow-spread-xs) var(--wa-color-shadow);
+ --wa-shadow-s: var(--wa-shadow-offset-x-s) var(--wa-shadow-offset-y-s) var(--wa-shadow-blur-s)
+ var(--wa-shadow-spread-s) var(--wa-color-shadow);
+ --wa-shadow-m: var(--wa-shadow-offset-x-m) var(--wa-shadow-offset-y-m) var(--wa-shadow-blur-m)
+ var(--wa-shadow-spread-m) var(--wa-color-shadow);
+ --wa-shadow-l: var(--wa-shadow-offset-x-l) var(--wa-shadow-offset-y-l) var(--wa-shadow-blur-l)
+ var(--wa-shadow-spread-l) var(--wa-color-shadow);
/**
* Transitions
*/
+ --wa-transition-easing: ease;
+
--wa-transition-slow: 250ms;
--wa-transition-normal: 150ms;
--wa-transition-fast: 50ms;
/**
- * Component groups
+ * Component Groups
*/
+
+ /* Form controls */
--wa-form-control-background-color: var(--wa-color-surface-default);
+ --wa-form-control-border-style: var(--wa-border-style);
+ --wa-form-control-border-width: var(--wa-border-width-s);
--wa-form-control-border-radius: var(--wa-border-radius-s);
--wa-form-control-activated-color: var(--wa-color-brand-fill-loud);
@@ -329,7 +352,7 @@
--wa-form-control-value-font-weight: var(--wa-font-weight-body);
--wa-form-control-value-line-height: var(--wa-line-height-condensed);
- --wa-form-control-placeholder-color: var(--wa-color-base-60);
+ --wa-form-control-placeholder-color: var(--wa-color-gray-60);
--wa-form-control-height-s: 1.875rem;
--wa-form-control-height-m: 2.5rem;
@@ -339,12 +362,21 @@
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
+ /* Panels */
+ --wa-panel-border-style: var(--wa-border-style);
+ --wa-panel-border-width: var(--wa-border-width-s);
--wa-panel-border-radius: var(--wa-border-radius-s);
- /**
- * From 2.x
- */
+ /* Tooltips */
--wa-tooltip-arrow-size: 0.375rem;
+
+ --wa-tooltip-background-color: var(--wa-color-text-normal);
+
+ --wa-tooltip-border-radius: var(--wa-border-radius-s);
+
+ --wa-tooltip-content-color: var(--wa-color-surface-default);
+ --wa-tooltip-font-size: var(--wa-font-size-s);
+ --wa-tooltip-line-height: var(--wa-line-height-normal);
}
.wa-theme-classic-dark,
@@ -352,125 +384,81 @@
color-scheme: dark;
/**
- * Base theme colors
+ * Foundational Colors
*/
- --wa-color-surface-raised: var(--wa-color-base-10);
- --wa-color-surface-default: var(--wa-color-base-05);
- --wa-color-surface-lowered: black;
- --wa-color-surface-border: var(--wa-color-base-20);
+ --wa-color-surface-raised: var(--wa-color-gray-10);
+ --wa-color-surface-default: var(--wa-color-gray-05);
+ --wa-color-surface-lowered: var(--wa-color-gray-05);
+ --wa-color-surface-border: var(--wa-color-gray-20);
- --wa-color-text-normal: var(--wa-color-base-95);
- --wa-color-text-quiet: var(--wa-color-base-60);
- --wa-color-text-link: var(--wa-color-brand-on-quiet);
+ --wa-color-text-normal: var(--wa-color-gray-80);
+ --wa-color-text-quiet: var(--wa-color-gray-60);
+ --wa-color-text-link: var(--wa-color-blue-70);
- --wa-color-focus: var(--wa-color-primary-70);
+ --wa-color-overlay-modal: color-mix(in oklab, black 60%, transparent);
+ --wa-color-overlay-inline: color-mix(in oklab, var(--wa-color-gray-50) 10%, transparent);
- --wa-color-overlay-modal: color-mix(in oklab, black 50%, transparent);
+ --wa-color-shadow: color-mix(
+ in oklab,
+ var(--wa-color-gray-05) calc(var(--wa-shadow-blur-multiplier) * 32% + 40%),
+ transparent
+ );
- --wa-color-shadow: color-mix(in oklab, black calc(var(--wa-shadow-blur-multiplier) * 32% + 40%), transparent);
+ --wa-color-focus: var(--wa-color-blue-60);
--wa-color-mix-hover: black 8%;
--wa-color-mix-active: black 16%;
/**
- * Semantic theme colors
+ * Semantic Colors
*/
- --wa-color-brand-fill-loud: var(--wa-color-primary-50);
- --wa-color-brand-fill-quiet: var(--wa-color-primary-10);
- --wa-color-brand-fill-normal: var(--wa-color-primary-20);
- --wa-color-brand-border-quiet: var(--wa-color-primary-20);
- --wa-color-brand-border-normal: var(--wa-color-primary-30);
- --wa-color-brand-on-loud: white;
- --wa-color-brand-on-normal: var(--wa-color-primary-70);
- --wa-color-brand-on-quiet: var(--wa-color-primary-60);
+ --wa-color-brand-fill-quiet: var(--wa-color-blue-20);
+ --wa-color-brand-fill-normal: var(--wa-color-blue-30);
+ --wa-color-brand-fill-loud: var(--wa-color-blue-70);
+ --wa-color-brand-border-quiet: var(--wa-color-blue-30);
+ --wa-color-brand-border-normal: var(--wa-color-blue-40);
+ --wa-color-brand-border-loud: var(--wa-color-blue-50);
+ --wa-color-brand-on-quiet: var(--wa-color-blue-70);
+ --wa-color-brand-on-normal: var(--wa-color-blue-80);
+ --wa-color-brand-on-loud: var(--wa-color-gray-10);
- --wa-color-success-fill-loud: var(--wa-color-green-50);
- --wa-color-success-fill-quiet: var(--wa-color-green-10);
- --wa-color-success-fill-normal: var(--wa-color-green-20);
- --wa-color-success-border-quiet: var(--wa-color-green-20);
- --wa-color-success-border-normal: var(--wa-color-green-30);
- --wa-color-success-on-loud: white;
- --wa-color-success-on-normal: var(--wa-color-green-70);
- --wa-color-success-on-quiet: var(--wa-color-green-60);
+ --wa-color-success-fill-quiet: var(--wa-color-green-20);
+ --wa-color-success-fill-normal: var(--wa-color-green-30);
+ --wa-color-success-fill-loud: var(--wa-color-green-70);
+ --wa-color-success-border-quiet: var(--wa-color-green-30);
+ --wa-color-success-border-normal: var(--wa-color-green-40);
+ --wa-color-success-border-loud: var(--wa-color-green-50);
+ --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: var(--wa-color-gray-10);
- --wa-color-warning-fill-loud: var(--wa-color-yellow-50);
- --wa-color-warning-fill-quiet: var(--wa-color-yellow-10);
- --wa-color-warning-fill-normal: var(--wa-color-yellow-20);
- --wa-color-warning-border-quiet: var(--wa-color-yellow-20);
- --wa-color-warning-border-normal: var(--wa-color-yellow-30);
- --wa-color-warning-on-loud: white;
- --wa-color-warning-on-normal: var(--wa-color-yellow-70);
- --wa-color-warning-on-quiet: var(--wa-color-yellow-60);
+ --wa-color-warning-fill-quiet: var(--wa-color-yellow-20);
+ --wa-color-warning-fill-normal: var(--wa-color-yellow-30);
+ --wa-color-warning-fill-loud: var(--wa-color-yellow-70);
+ --wa-color-warning-border-quiet: var(--wa-color-yellow-30);
+ --wa-color-warning-border-normal: var(--wa-color-yellow-40);
+ --wa-color-warning-border-loud: var(--wa-color-yellow-50);
+ --wa-color-warning-on-quiet: var(--wa-color-yellow-70);
+ --wa-color-warning-on-normal: var(--wa-color-yellow-80);
+ --wa-color-warning-on-loud: var(--wa-color-gray-10);
- --wa-color-danger-fill-loud: var(--wa-color-red-50);
- --wa-color-danger-fill-quiet: var(--wa-color-red-10);
- --wa-color-danger-fill-normal: var(--wa-color-red-20);
- --wa-color-danger-border-quiet: var(--wa-color-red-20);
- --wa-color-danger-border-normal: var(--wa-color-red-30);
- --wa-color-danger-on-loud: white;
- --wa-color-danger-on-normal: var(--wa-color-red-70);
- --wa-color-danger-on-quiet: var(--wa-color-red-60);
+ --wa-color-danger-fill-quiet: var(--wa-color-red-20);
+ --wa-color-danger-fill-normal: var(--wa-color-red-30);
+ --wa-color-danger-fill-loud: var(--wa-color-red-60);
+ --wa-color-danger-border-quiet: var(--wa-color-red-30);
+ --wa-color-danger-border-normal: var(--wa-color-red-40);
+ --wa-color-danger-border-loud: var(--wa-color-red-50);
+ --wa-color-danger-on-quiet: var(--wa-color-red-70);
+ --wa-color-danger-on-normal: var(--wa-color-red-80);
+ --wa-color-danger-on-loud: var(--wa-color-gray-10);
- --wa-color-neutral-fill-loud: var(--wa-color-base-50);
- --wa-color-neutral-fill-quiet: var(--wa-color-base-10);
- --wa-color-neutral-fill-normal: var(--wa-color-base-20);
- --wa-color-neutral-border-quiet: var(--wa-color-base-20);
- --wa-color-neutral-border-normal: var(--wa-color-base-30);
- --wa-color-neutral-on-loud: white;
- --wa-color-neutral-on-normal: var(--wa-color-base-70);
- --wa-color-neutral-on-quiet: var(--wa-color-base-60);
+ --wa-color-neutral-fill-quiet: var(--wa-color-gray-10);
+ --wa-color-neutral-fill-normal: var(--wa-color-gray-20);
+ --wa-color-neutral-fill-loud: var(--wa-color-gray-60);
+ --wa-color-neutral-border-quiet: var(--wa-color-gray-20);
+ --wa-color-neutral-border-normal: var(--wa-color-gray-30);
+ --wa-color-neutral-border-loud: var(--wa-color-gray-50);
+ --wa-color-neutral-on-quiet: var(--wa-color-gray-60);
+ --wa-color-neutral-on-normal: var(--wa-color-gray-70);
+ --wa-color-neutral-on-loud: var(--wa-color-gray-05);
}
-
-/* #region Custom Styles */
-@container preview (min-width: 0) {
- .hero-background {
- height: 70rem;
- background: linear-gradient(174deg, var(--wa-color-brand-fill-normal) 0 70%, transparent 70% 100%);
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- z-index: -1;
- }
-
- .hero-background::after {
- background: url(/assets/images/themer/classic/hero.png) 0px 0px no-repeat;
- content: '';
- position: absolute;
- height: 1200px;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- }
-
- .strata.hero {
- height: 45rem;
- }
-
- .hero .title {
- text-align: right;
- color: var(--wa-color-brand-on-normal);
- }
-}
-
-/* responsive */
-@container preview (min-width: 1040px) {
- .hero-background {
- height: 47rem;
- }
-
- .hero-background::after {
- background: url(/assets/images/themer/classic/hero.png) 50px -170px no-repeat;
- height: 900px;
- }
-
- .strata.hero {
- height: 32rem;
- }
-
- .hero .title {
- margin-inline-start: 55%;
- }
-}
-/* #endregion */
diff --git a/src/themes/classic_components.css b/src/themes/classic_components.css
index 2b14b4105..18fd9883e 100644
--- a/src/themes/classic_components.css
+++ b/src/themes/classic_components.css
@@ -1,51 +1,13 @@
-/* #region Alerts */
-wa-alert {
- --background: var(--wa-color-surface-default);
- --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
- --content-color: var(--wa-color-text-normal);
- --padding: var(--wa-space-l);
-
- font-size: var(--wa-font-size-s);
-
- &[variant='brand'] {
- --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-neutral-border-quiet)
- var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
- --icon-color: var(--wa-color-brand-fill-loud);
- }
-
- &[variant='success'] {
- --border-color: var(--wa-color-success-fill-loud) var(--wa-color-neutral-border-quiet)
- var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
- --icon-color: var(--wa-color-success-fill-loud);
- }
-
- &[variant='neutral'] {
- --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-neutral-border-quiet)
- var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
- --icon-color: var(--wa-color-neutral-fill-loud);
- }
-
- &[variant='warning'] {
- --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-neutral-border-quiet)
- var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
- --icon-color: var(--wa-color-warning-fill-loud);
- }
-
- &[variant='danger'] {
- --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-neutral-border-quiet)
- var(--wa-color-neutral-border-quiet) var(--wa-color-neutral-border-quiet);
- --icon-color: var(--wa-color-danger-fill-loud);
- }
+/* #region Avatars */
+wa-avatar {
+ --background-color: var(--wa-color-neutral-fill-loud);
+ --content-color: var(--wa-color-neutral-on-loud);
}
/* #endregion */
-/* #region Breadcrumbs */
-wa-breadcrumb {
- font-size: var(--wa-font-size-s);
-}
-
/* #region Buttons */
-wa-button {
+wa-button,
+wa-radio-button {
&[size='small'] {
font-size: var(--wa-font-size-xs);
}
@@ -58,23 +20,135 @@ wa-button {
font-size: var(--wa-font-size-m);
}
}
+
+wa-radio-button {
+ --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-mix-active));
+ --background-color-hover: var(--wa-form-control-activated-color);
+ --border-color: var(--wa-form-control-resting-color);
+ --border-color-active: var(--background-color-active);
+ --border-color-hover: var(--background-color-hover);
+ --label-color-active: var(--label-color-hover);
+ --label-color-hover: var(--wa-color-brand-on-loud);
+ --indicator-color: var(--wa-background-color);
+}
+
+wa-radio-button[checked] {
+ --background-color: var(--wa-form-control-activated-color);
+ --border-color: var(--background-color);
+ --label-color: var(--wa-color-brand-on-loud);
+}
+/* #endregion */
+
+/* #region Breadcrumbs */
+wa-breadcrumb {
+ font-size: var(--wa-font-size-s);
+}
+
+/* #region Callouts */
+wa-callout {
+ --background-color: var(--wa-color-surface-raised);
+ --border-width: var(--wa-border-width-l) var(--wa-border-width-s) var(--wa-border-width-s) var(--wa-border-width-s);
+ --content-color: var(--wa-color-text-normal);
+ --spacing: var(--wa-space-l);
+
+ font-size: var(--wa-font-size-s);
+
+ &[variant='brand'] {
+ --border-color: var(--wa-color-brand-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+ var(--wa-color-surface-border);
+ --icon-color: var(--wa-color-brand-fill-loud);
+ }
+
+ &[variant='success'] {
+ --border-color: var(--wa-color-success-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+ var(--wa-color-surface-border);
+ --icon-color: var(--wa-color-success-fill-loud);
+ }
+
+ &[variant='neutral'] {
+ --border-color: var(--wa-color-neutral-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+ var(--wa-color-surface-border);
+ --icon-color: var(--wa-color-neutral-fill-loud);
+ }
+
+ &[variant='warning'] {
+ --border-color: var(--wa-color-warning-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+ var(--wa-color-surface-border);
+ --icon-color: var(--wa-color-warning-fill-loud);
+ }
+
+ &[variant='danger'] {
+ --border-color: var(--wa-color-danger-fill-loud) var(--wa-color-surface-border) var(--wa-color-surface-border)
+ var(--wa-color-surface-border);
+ --icon-color: var(--wa-color-danger-fill-loud);
+ }
+}
+/* #endregion */
+
+/* #region Cards */
+wa-card {
+ --background-color: var(--wa-color-surface-raised);
+}
+/* #endregion */
+
+/* #region Carousel */
+wa-carousel {
+ --box-shadow: var(--wa-shadow-xs);
+ --pagination-color-active: var(--wa-color-neutral-fill-loud);
+}
+/* #endregion */
+
+/* #region Modals */
+wa-dialog,
+wa-drawer {
+ --spacing: var(--wa-space-l);
+}
/* #endregion */
/* #region Inputs */
-wa-input:not([filled]) {
+wa-input:not([filled]),
+wa-select:not([filled]),
+wa-textarea:not([filled]) {
--wa-focus-ring: var(--wa-focus-ring-style) var(--wa-focus-ring-width)
color-mix(in oklab, var(--wa-color-focus), transparent 50%);
--wa-focus-ring-offset: 0;
}
+wa-radio {
+ --background-color-checked: var(--border-color-checked);
+ --checked-icon-color: var(--wa-color-surface-default);
+ --checked-icon-scale: 0.4;
+}
+
+wa-range {
+ --thumb-gap: 0;
+}
+
wa-switch {
+ --background-color: var(--wa-color-gray-50);
+ --border-color: var(--background-color);
+ --height: calc(1em * var(--wa-form-control-value-line-height) - var(--border-width) * 2);
+ --thumb-color: var(--wa-color-surface-default);
--thumb-size: calc(var(--height) + 4px);
+ --width: calc(var(--height) * 2);
&::part(thumb) {
- border-color: var(--background);
+ border: var(--wa-border-width-s) var(--wa-border-style) var(--background-color);
}
&[checked]::part(thumb) {
- border-color: var(--background-checked);
+ border-color: var(--background-color-checked);
}
}
/* #endregion */
+
+/* #region Progress Indicators */
+wa-progress-bar {
+ --height: 1rem;
+}
+/* #endregion */
+
+/* #region Tabs */
+wa-tab {
+ font-size: var(--wa-font-size-s);
+}
+/* #endregion */