diff --git a/docs/_includes/contrast-table.njk b/docs/_includes/contrast-table.njk new file mode 100644 index 000000000..19b4bec7f --- /dev/null +++ b/docs/_includes/contrast-table.njk @@ -0,0 +1,31 @@ + + + + + {% for tint_bg in tints -%} + {% for tint_fg in tints | reverse -%} + {% if (tint_fg - tint_bg) | abs == difference %} + + {% endif %} + {%- endfor -%} + {%- endfor %} + + +{% for hue in hues -%} + + + {% for tint_bg in tints -%} + {% for tint_fg in tints | reverse -%} + + {% if (tint_fg - tint_bg) | abs == difference %} + + {% endif %} + {%- endfor -%} + {%- endfor -%} + +{%- endfor %} +
{{ tint_fg }} on {{ tint_bg }}
{{ hue | capitalize }} +
+ {{ tint_fg }} on {{ tint_bg }} +
+
diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index b834bc717..bc1e38768 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -25,6 +25,7 @@ 'utilities': 'Style Utilities', 'layout': 'Layout', 'patterns': 'Patterns', + 'palettes': 'Color Palettes', 'tokens': 'Design Tokens' } %} {% include 'sidebar-group.njk' %} diff --git a/docs/_layouts/palette.njk b/docs/_layouts/palette.njk new file mode 100644 index 000000000..68dd147f1 --- /dev/null +++ b/docs/_layouts/palette.njk @@ -0,0 +1,108 @@ +{% set hasSidebar = true %} +{% set hasOutline = true %} +{# {% set forceTheme = page.fileSlug %} #} + +{% extends '../_layouts/block.njk' %} + +{% set paletteId = page.fileSlug %} + +{% block afterContent %} + + +{% set hues = ["red", "yellow", "green", "teal", "blue", "indigo", "violet", "gray"] %} +{% set tints = ["95", "90", "80", "70", "60", "50", "40", "30", "20", "10", "05"] %} + + + + + + {% for tint in tints -%} + + {%- endfor %} + + +{% for hue in hues -%} + + + {% for tint in tints -%} + + {%- endfor -%} + +{%- endfor %} +
{{ tint }}
{{ hue | capitalize }} +
+ +
+
+ +

Used By

+ +
+{% for page in collections.theme %} + {%- if page.data.palette == paletteId -%} + {% include "page-card.njk" %} + {%- endif -%} +{% endfor %} +
+ +{% markdown %} +## Color Contrast + +Web Awesome color scales are designed to guarantee certain contrast ratios, +both per [WCAG 2.1 success criteria](https://www.w3.org/TR/WCAG21/#contrast-minimum) +as well as the emergent APCA specification _(planned)_. +so you can ensure that text is both legible to all users, and legally conformant. + +### Level 1 + +A difference of `40` ensures a minimum **3:1** contrast ratio, suitable for large text and icons (AA). +{% endmarkdown %} + +{% set difference = 40 %} +{% include "contrast-table.njk" %} + +{% markdown %} +### Level 2 + +A difference of `50` ensures a minimum **4.5:1** contrast ratio, suitable for normal text (AA) and large text (AAA) +{% endmarkdown %} + +{% set difference = 50 %} +{% include "contrast-table.njk" %} + +{% markdown %} +### Level 3 + +A difference of `60` ensures a minimum **7:1** contrast ratio, suitable for all text (AAA) +{% endmarkdown %} + +{% set difference = 60 %} +{% include "contrast-table.njk" %} + +{% markdown %} +## How to use this palette + +If you are using a Web Awesome theme that uses this palette, it will already be included. +To use a different palette than a theme default, or to use it in a custom theme, you can import this palette directly from the Web Awesome CDN. + + +In HTML +In CSS + + +Simply add the following code to the `` of your page: +```html + +``` + + + +Simply add the following code at the top of your CSS file: +```css +@import url('{% cdnUrl 'styles/color/' + page.fileSlug + '.css' %}'); +``` + + + +{% endmarkdown %} +{% endblock %} diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f2c8cfa57..bf7bc4c53 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -333,6 +333,7 @@ wa-page > main:has(> .index-grid) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr)); gap: var(--wa-space-2xl); + margin-block-end: var(--wa-space-3xl); a { border-radius: var(--wa-border-radius-l); @@ -383,15 +384,22 @@ wa-page > main:has(> .index-grid) { /* Swatches */ .swatch { position: relative; + display: flex; + align-items: center; + justify-content: center; background-color: transparent; border-color: var(--wa-color-neutral-border-normal); border-style: var(--wa-border-style); border-width: var(--wa-border-width-s); border-radius: var(--wa-border-radius-m); box-sizing: border-box; - line-height: 2.5; - height: 2.5em; - padding-inline: var(--wa-space-xs); + min-height: 2.5em; + padding: var(--wa-space-xs); + font-weight: var(--wa-font-weight-semibold); + + &.color { + border-color: transparent; + } wa-copy-button { position: absolute; @@ -421,6 +429,34 @@ wa-page > main:has(> .index-grid) { } } +table.colors { + thead { + th { + text-align: center; + padding-block: 0; + } + } + tbody { + tr { + border: none; + &:hover { + background: transparent; + } + } + + th { + width: 0; + vertical-align: middle; + text-align: right; + } + + td { + padding-inline: var(--wa-space-3xs); + padding-block: var(--wa-space-s); + } + } +} + /* Layout Examples */ .layout-example-boundary { border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal); diff --git a/docs/docs/palettes/anodized.md b/docs/docs/palettes/anodized.md new file mode 100644 index 000000000..656befdc3 --- /dev/null +++ b/docs/docs/palettes/anodized.md @@ -0,0 +1,5 @@ +--- +title: Anodized +isPro: true +tags: pro +--- diff --git a/docs/docs/palettes/bright.md b/docs/docs/palettes/bright.md new file mode 100644 index 000000000..2ed50bd18 --- /dev/null +++ b/docs/docs/palettes/bright.md @@ -0,0 +1,3 @@ +--- +title: Bright +--- diff --git a/docs/docs/palettes/classic.md b/docs/docs/palettes/classic.md new file mode 100644 index 000000000..fdef001c5 --- /dev/null +++ b/docs/docs/palettes/classic.md @@ -0,0 +1,4 @@ +--- +title: Classic +description: The original Shoelace color palette. +--- diff --git a/docs/docs/palettes/default.md b/docs/docs/palettes/default.md new file mode 100644 index 000000000..1332ce471 --- /dev/null +++ b/docs/docs/palettes/default.md @@ -0,0 +1,4 @@ +--- +title: Default +description: This is the palette used in the default theme. +--- diff --git a/docs/docs/palettes/elegant.md b/docs/docs/palettes/elegant.md new file mode 100644 index 000000000..d3c4e2e4e --- /dev/null +++ b/docs/docs/palettes/elegant.md @@ -0,0 +1,5 @@ +--- +title: Elegant +isPro: true +tags: pro +--- diff --git a/docs/docs/palettes/index.njk b/docs/docs/palettes/index.njk new file mode 100644 index 000000000..9f3eb51f4 --- /dev/null +++ b/docs/docs/palettes/index.njk @@ -0,0 +1,10 @@ +--- +title: Color Palettes +description: Palettes define [literal colors](/docs/tokens/colors) that are used in the design system. +layout: overview +override:tags: [] +forTag: palette +categories: + other: Free + pro: Pro +--- diff --git a/docs/docs/palettes/natural.md b/docs/docs/palettes/natural.md new file mode 100644 index 000000000..53afed578 --- /dev/null +++ b/docs/docs/palettes/natural.md @@ -0,0 +1,5 @@ +--- +title: Natural +isPro: true +tags: pro +--- diff --git a/docs/docs/palettes/palettes.json b/docs/docs/palettes/palettes.json new file mode 100644 index 000000000..f149d8e58 --- /dev/null +++ b/docs/docs/palettes/palettes.json @@ -0,0 +1,7 @@ +{ + "layout": "palette.njk", + "tags": ["palettes", "palette"], + "eleventyComputed": { + "snippet": ".wa-palette-{{ page.fileSlug }}" + } +} diff --git a/docs/docs/palettes/rudimentary.md b/docs/docs/palettes/rudimentary.md new file mode 100644 index 000000000..4379344b9 --- /dev/null +++ b/docs/docs/palettes/rudimentary.md @@ -0,0 +1,5 @@ +--- +title: Rudimentary +isPro: true +tags: pro +--- diff --git a/docs/docs/palettes/vogue.md b/docs/docs/palettes/vogue.md new file mode 100644 index 000000000..b82cbcdae --- /dev/null +++ b/docs/docs/palettes/vogue.md @@ -0,0 +1,5 @@ +--- +title: Vogue +isPro: true +tags: pro +--- diff --git a/docs/docs/tokens/color.md b/docs/docs/tokens/color.md index 3c9516a78..d123f6f44 100644 --- a/docs/docs/tokens/color.md +++ b/docs/docs/tokens/color.md @@ -71,7 +71,9 @@ Web Awesome defines seven literal colors each with 11 lightness values using the