diff --git a/build.washingtonpost.com/components/Layout/Components/Sidebar.js b/build.washingtonpost.com/components/Layout/Components/Sidebar.js index dae95efdf..f46ba8fc6 100644 --- a/build.washingtonpost.com/components/Layout/Components/Sidebar.js +++ b/build.washingtonpost.com/components/Layout/Components/Sidebar.js @@ -228,7 +228,7 @@ export default function Sidebar({ navigation, setMobileMenu }) { }; return ( - + {navigation && navigation.map((nav, index) => { return ( diff --git a/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx b/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx index 4fd2216c8..e01b35967 100644 --- a/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx +++ b/build.washingtonpost.com/components/Markdown/Components/tableofcontents.jsx @@ -74,7 +74,9 @@ export default function TableOfContents({ css, headings }) { return ( -
+
Table of Contents
diff --git a/build.washingtonpost.com/docs/foundations/color.mdx b/build.washingtonpost.com/docs/foundations/color.mdx index 3eeea4090..ae9e7f1cd 100644 --- a/build.washingtonpost.com/docs/foundations/color.mdx +++ b/build.washingtonpost.com/docs/foundations/color.mdx @@ -4,7 +4,9 @@ title: Color description: Color token values are defined by their context. There are two contexts "light" and "dark" context. Toggle the sun/moon in the top right of the site to see each context. --- -### Table of contents +
+ +## Table of contents - [Theme and semantic tokens](/foundations/color#Theme_and_Semantic_tokens) - [Color tokens](/foundations/color#Color%20tokens) diff --git a/build.washingtonpost.com/docs/foundations/icons.mdx b/build.washingtonpost.com/docs/foundations/icons.mdx index 3f1bb31b6..1d143158f 100644 --- a/build.washingtonpost.com/docs/foundations/icons.mdx +++ b/build.washingtonpost.com/docs/foundations/icons.mdx @@ -14,7 +14,7 @@ description: If you do not see an icon that you require for your project, please refer to our [WAM (WPDS-Asset manager)](/foundations/wam) on how to contribute. -##
+
## Available icons diff --git a/build.washingtonpost.com/docs/foundations/principles.mdx b/build.washingtonpost.com/docs/foundations/principles.mdx index 087c6e54a..9ba2eff09 100644 --- a/build.washingtonpost.com/docs/foundations/principles.mdx +++ b/build.washingtonpost.com/docs/foundations/principles.mdx @@ -27,7 +27,7 @@ import Tokens from "@washingtonpost/wpds-theme/src/wpds.tokens.json"; ## Guidance -#### Hierarchy and layout structure +### Hierarchy and layout structure Utilize color to separate sections of information and highlight elements of importance. @@ -42,7 +42,7 @@ Utilize color to separate sections of information and highlight elements of impo
-#### Affordance +### Affordance Use color to create an [affordance](https://www.merriam-webster.com/dictionary/affordance#:~:text=Definition%20of%20affordance,those%20affordances%20are%20fairly%20obvious) to signal interaction, call to action, or a link. @@ -58,7 +58,7 @@ Use color to create an [affordance](https://www.merriam-webster.com/dictionary/a
-#### System status +### System status `Semantic colors` represent system status of default, success, or failed states when completing an action or goal. @@ -75,7 +75,7 @@ Use color to create an [affordance](https://www.merriam-webster.com/dictionary/a
-#### Editorial tone +### Editorial tone Color used within the editorial palette to differentiate content with various lines of coverage. @@ -92,7 +92,7 @@ Color used within the editorial palette to differentiate content with various li
-#### Illustration +### Illustration Apply color to illustrations and icons to achieve a visual style that varies across editorial tones, product functions, and sub-brand art direction. @@ -108,7 +108,7 @@ Apply color to illustrations and icons to achieve a visual style that varies acr
-#### Brand recognition +### Brand recognition Sub-brands have a unique palette, art direction, visual look, and distinction from The Washington Post brand. @@ -125,7 +125,7 @@ Sub-brands have a unique palette, art direction, visual look, and distinction fr
-#### Visual information +### Visual information Continuous and categorical datasets projected in a chart or map often require color to distinguish types of information and values. @@ -287,7 +287,7 @@ assigns a color intention.
-#### How to use theme +### How to use theme Theme tokens with `on`(`onPrimary` or `onMessage`) in the name are paired with the base alias. One example is `onPrimary` is used when an element or content is on the `primary` color token. @@ -394,7 +394,7 @@ a static color add `-static` at the end of a color token name and it will lock t
-#### Example +### Example Our theme token `onCta` and semantic color token `onMessage` both are tied to `gray-600-static` to ensure they remain with the correct minimal color contrast needed for the element to be accessible. @@ -440,7 +440,7 @@ contrast ratio outlined by WCAG 2.0 level AA.
-#### Accessible +### Accessible One of our theme tokens named `accessible` is accessible on the target background (`gray600` or `gray0`). diff --git a/build.washingtonpost.com/docs/foundations/typography.mdx b/build.washingtonpost.com/docs/foundations/typography.mdx index a63e8748c..6f751b058 100644 --- a/build.washingtonpost.com/docs/foundations/typography.mdx +++ b/build.washingtonpost.com/docs/foundations/typography.mdx @@ -4,7 +4,9 @@ title: Typography description: --- -### Table of contents +
+ +## Table of contents - [Font](/foundations/typography#Font) - [Font size](/foundations/typography#Font%20size) diff --git a/build.washingtonpost.com/docs/foundations/wam.mdx b/build.washingtonpost.com/docs/foundations/wam.mdx index 614ff504d..33fcdc3e3 100644 --- a/build.washingtonpost.com/docs/foundations/wam.mdx +++ b/build.washingtonpost.com/docs/foundations/wam.mdx @@ -4,7 +4,9 @@ title: Asset-Manager (WAM) description: WPDS Asset-Manager (also known as WAM) manages all assets as raw SVG files. The asset manager is an independent package that allows for more streamlined management of our assets. --- -### Table of contents +
+ +## Table of contents - [Getting started](foundations/wam#Getting%20started) - [Design principles](/foundations/wam#Design%20principles) diff --git a/build.washingtonpost.com/docs/zzz/color-codes.mdx b/build.washingtonpost.com/docs/zzz/color-codes.mdx index fe91c885c..9c590308a 100644 --- a/build.washingtonpost.com/docs/zzz/color-codes.mdx +++ b/build.washingtonpost.com/docs/zzz/color-codes.mdx @@ -4,7 +4,9 @@ title: The Source of Truth description: Curious about the RGBA and Hex values for our wonderful color tokens? Ponder no longer! --- -### Table of contents +
+ +## Table of contents - [Light tokens](/zzz/color-codes#Light%20tokens) - [Dark tokens](/zzz/color-codes#Dark%20tokens)