From 96f017824e22120f733edb4d0cd69fd5d7e18fd7 Mon Sep 17 00:00:00 2001 From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com> Date: Tue, 29 Oct 2024 17:40:23 -0400 Subject: [PATCH] Support for nested themes (#174) * fix nested themes * rewrite section on using multiple themes * correct CDN links --------- Co-authored-by: konnorrogers --- docs/docs/themes.md | 24 +++++++++++++++++++++--- src/themes/default.css | 25 +++++++++++++++++++++++++ 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/docs/docs/themes.md b/docs/docs/themes.md index 6d757f457..e8e33166d 100644 --- a/docs/docs/themes.md +++ b/docs/docs/themes.md @@ -40,20 +40,20 @@ For example, the default theme is set up like this: 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: ```html - + ``` Or import the **classic** theme: ```html - + ``` Both the default and classic themes include both light and dark color schemes. When importing either theme, the light color scheme is activated by default. To activate the dark color scheme, apply the appropriate class (`wa-theme-default-dark` or `wa-theme-classic-dark`, depending on theme) to the `` element on your page, like this example for the default theme: ```html - + @@ -62,6 +62,24 @@ Both the default and classic themes include both light and dark color schemes. W ``` +Because themes are scoped to specific classes, you can activate different color schemes or entire themes on different containers throughout the page. This example uses the default theme with a dark sidebar. + +```html + + + + + + + + + + + +``` + ## Creating Themes There are two ways to create themes. The easiest way is to customize the default theme. The advanced way is to create a new theme from scratch. Which method you choose depends on your project's requirements and the amount of effort you're willing to invest. diff --git a/src/themes/default.css b/src/themes/default.css index 62e6461f9..9954966bf 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -2,6 +2,7 @@ :host, .wa-theme-default-light { color-scheme: light; + color: var(--wa-color-text-normal); /** * Literal Colors @@ -384,6 +385,7 @@ .wa-theme-default-dark, .wa-theme-default-dark :host { color-scheme: dark; + color: var(--wa-color-text-normal); /** * Foundational Colors @@ -459,4 +461,27 @@ --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); + + /** + * Component Groups + */ + + /* Form controls */ + --wa-form-control-background-color: var(--wa-color-surface-default); + + --wa-form-control-activated-color: var(--wa-color-brand-fill-loud); + --wa-form-control-resting-color: var(--wa-color-neutral-border-loud); + + --wa-form-control-label-color: var(--wa-color-text-normal); + + --wa-form-control-value-color: var(--wa-color-text-normal); + + --wa-form-control-placeholder-color: var(--wa-color-gray-60); + + --wa-form-control-required-content-color: inherit; + + /* Tooltips */ + --wa-tooltip-background-color: var(--wa-color-neutral-fill-loud); + + --wa-tooltip-content-color: var(--wa-color-neutral-on-loud); }