diff --git a/packages/webawesome/docs/docs/color-palettes.njk b/packages/webawesome/docs/docs/color-palettes.njk index 4fe7648ad..0525f8380 100644 --- a/packages/webawesome/docs/docs/color-palettes.njk +++ b/packages/webawesome/docs/docs/color-palettes.njk @@ -66,14 +66,50 @@ layout: page

Using This Palette

+
{% for palette in themer.palettes %} -
-

- To import this palette, set <html class="wa-palette-{{ palette.name | lower }}"> and import the following stylesheet: -

- 
<link rel="stylesheet" href="/dist/styles/color/palettes/{{ palette.filename }}" />
-
+
+ + Projects + npm + Self-Hosted + + + +

+ In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ palette.name | capitalize }} as your Color Palette. +

+ +

+ In your project's Settings, set your Color Palette to {{ palette.name | capitalize }}. +

+

Save your palette and watch it come to life anywhere you're using your project.

+ + + +

+ To use this theme, import the theme's stylesheet: +

+ 
import '@awesome.me/webawesome/dist/styles/themes/{{ palette.filename }}';
+

+ Then apply the following class to the <html> element: +

+ 
<html class="wa-palette-{{ palette.name | lower }}">
+ + + +

+ To use this theme, import the theme's stylesheet: +

+ 
<link rel="stylesheet" href="/dist/styles/themes/{{ palette.filename }}" />
+

+ Then apply the following class to the <html> element: +

+ 
<html class="wa-palette-{{ palette.name | lower }}">
+ + +
{% endfor %}
diff --git a/packages/webawesome/docs/docs/themes.njk b/packages/webawesome/docs/docs/themes.njk index 5220de115..289e2104c 100644 --- a/packages/webawesome/docs/docs/themes.njk +++ b/packages/webawesome/docs/docs/themes.njk @@ -87,47 +87,51 @@ to create a project with any one of these themes.

Using This Theme

-{% for theme in themer.themes %} - - Projects - npm - Self-Hosted +
+ {% for theme in themer.themes %} +
+ + Projects + npm + Self-Hosted - - -

- In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ theme.filename | stripExtension | capitalize }} as your Starting Theme. -

- -

- In your project's Settings, set your Theme to {{ theme.filename | stripExtension | capitalize }} and your Color Palette to {{ theme.palette.filename | stripExtension | capitalize }}. -

-

Save your theme and watch it come to life anywhere you're using your project.

- + + +

+ In your project's Settings, Edit Your Theme to open the Theme Builder. Select {{ theme.filename | stripExtension | capitalize }} as your Starting Theme. +

+ +

+ In your project's Settings, set your Theme to {{ theme.filename | stripExtension | capitalize }} and your Color Palette to {{ theme.palette.filename | stripExtension | capitalize }}. +

+

Save your theme and watch it come to life anywhere you're using your project.

+ - -

- To use this theme, import the theme's stylesheet: -

- 
import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';
-

- Then apply the following classes to the <html> element: -

- 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
- + +

+ To use this theme, import the theme's stylesheet: +

+ 
import '@awesome.me/webawesome/dist/styles/themes/{{ theme.filename }}';
+

+ Then apply the following classes to the <html> element: +

+ 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
+ - -

- To use this theme, import the theme's stylesheet: -

- 
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" />
-

- Then apply the following classes to the <html> element: -

- 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
- - -{% endfor %} + +

+ To use this theme, import the theme's stylesheet: +

+ 
<link rel="stylesheet" href="/dist/styles/themes/{{ theme.filename }}" />
+

+ Then apply the following classes to the <html> element: +

+ 
<html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
+ + +
+ {% endfor %} +