adds links to color usage documentation pages

adds high emphasis color to accessibility
thumbtack · Aug 26, 2024 · b9f1cf0 · b9f1cf0
1 parent 247c066
commit b9f1cf0
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 5 deletions.
diff --git a/next/pages/guidelines/color/accessibility.tsx b/next/pages/guidelines/color/accessibility.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import type { InferGetStaticPropsType } from 'next';
 import { Grid, GridColumn, Text } from '@thumbtack/thumbprint-react';
+import * as tokens from '@thumbtack/thumbprint-tokens';
 import { ContentPage } from '../../../components/mdx/mdx';
 import getContentPageStaticProps from '../../../utils/get-content-page-static-props';
 import { CodeExperimental, H2, H3, LI, P, UL } from '../../../components/mdx/components';
@@ -48,7 +49,8 @@ export default function OverviewAbout({
                 values. For example, when using the <strong>blue-100</strong> background color, the{' '}
                 <strong>blue-600</strong> color should be used for the text.
             </P>
-            <H3>100-level background</H3>
+
+            <H3>Low emphasis backgrounds</H3>
             <P>
                 A common and preferred pattern for non-interactive elements when applying a
                 background color uses the <strong>100-level</strong> values for backgrounds. The{' '}
@@ -104,6 +106,77 @@ export default function OverviewAbout({
                 </GridColumn>
             </Grid>
 
+            <H3>High emphasis backgrounds</H3>
+            <P>
+                When moments in the user experience call for bringing more emphasis to the moment,
+                then a darker value of of the color system can be used a background. These are more
+                commonly going to be used as a 500 (Yellow 600) value. The 100-level or white text
+                color should be used.
+            </P>
+
+            <Grid gutter="flush">
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-blue-500 pa3 bt bl bb b-gray-300"
+                        style={{ background: tokens.tpColorBlue500 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-indigo-500 pa3 bt bb b-gray-300"
+                        style={{ background: tokens.tpColorIndigo500 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-purple-500 pa3 bt bb b-gray-300"
+                        style={{ background: tokens.tpColorPurple500 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-green-500 pa3 bt bb b-gray-300"
+                        style={{ background: tokens.tpColorGreen500 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-yellow-600 pa3 bt bb b-gray-300"
+                        style={{ background: tokens.tpColorYellow600 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+                <GridColumn aboveSmall={2}>
+                    <div
+                        className="bg-red-500 pa3 bt br bb b-gray-300"
+                        style={{ background: tokens.tpColorRed500 }}
+                    >
+                        <Text size={2} className="white">
+                            white
+                        </Text>
+                    </div>
+                </GridColumn>
+            </Grid>
+
             <H3>White background</H3>
             <P>
                 The foreground text should use the <strong>500 value</strong> when using a{' '}

diff --git a/next/pages/guidelines/color/overview.tsx b/next/pages/guidelines/color/overview.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { InferGetStaticPropsType } from 'next';
+import Link from 'next/link';
 import { ContentPage } from '../../../components/mdx/mdx';
 import getContentPageStaticProps from '../../../utils/get-content-page-static-props';
 import { H2, H3, P } from '../../../components/mdx/components';
@@ -126,7 +127,7 @@ export default function OverviewAbout({
                 {colorThemeTable({ type: 'brand' })}
             </div>
 
-            <div>
+            <div className="mb5">
                 <H3>Feedback colors</H3>
                 <P>
                     These colors are used to help re-enforce important moments in the user journey
@@ -136,7 +137,9 @@ export default function OverviewAbout({
                 {colorThemeTable({ type: 'feedback' })}
             </div>
 
-            <div>
+            <Link href="/guidelines/color/palette/">See all colors</Link>
+
+            <div className="mb5">
                 <H2>Usage</H2>
                 <P>
                     Color usage is arranged into four high-level categories background, border, text
@@ -150,6 +153,8 @@ export default function OverviewAbout({
                 {overviewTable({ list: usageContent })}
             </div>
 
+            <Link href="/guidelines/color/usage/background/">Read more about color usage</Link>
+
             <div>
                 <H2>Emphasis</H2>
                 <P>
@@ -172,10 +177,10 @@ export default function OverviewAbout({
 
             <div>
                 <H2>Interaction</H2>
-                {/* <P className="b">Moments of user engagement.</P> */}
                 <P>
                     Status such as hover, selected, disabled, and others describe how users engage
-                    with content. Not all elements are interactive, but our color usage patterns
+                    with content. Not all elements are interactive, but our{' '}
+                    <Link href="/guidelines/color/usage/background/">color usage patterns </Link>{' '}
                     provide additional color definitions when applicable.
                 </P>
                 <ExampleBox>