From 7baa2e70614bfe092fbde76df23c3d80cfc95af7 Mon Sep 17 00:00:00 2001
From: Erik Goens <egoens@thumbtack.com>
Date: Fri, 23 Aug 2024 09:00:06 -0700
Subject: [PATCH] adds responsive behavior and descriptions to palette colors

---
 next/pages/guidelines/color/palette.tsx       | 17 +++---
 next/pages/guidelines/color/usage-mappings.ts | 60 +++++++++++++++++++
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/next/pages/guidelines/color/palette.tsx b/next/pages/guidelines/color/palette.tsx
index f0dd179d..4eade5b3 100644
--- a/next/pages/guidelines/color/palette.tsx
+++ b/next/pages/guidelines/color/palette.tsx
@@ -5,9 +5,11 @@ import { groupBy } from 'lodash-es';
 import classNames from 'classnames';
 import * as tokens from '@thumbtack/thumbprint-tokens';
 import { NavigationCaretDownSmall } from '@thumbtack/thumbprint-icons';
+import { Text } from '@thumbtack/thumbprint-react';
 import { ContentPage } from '../../../components/mdx/mdx';
 import getLayoutProps from '../../../utils/get-layout-props';
 import { H2, P } from '../../../components/mdx/components';
+import { paletteColortMappings } from './usage-mappings';
 
 import purple from '../../../images/pages/guide/product/color/palette/purple.png';
 import yellow from '../../../images/pages/guide/product/color/palette/yellow.png';
@@ -302,18 +304,15 @@ export default function OverviewAbout({
                 {Object.keys(usages).map(key => {
                     return (
                         <div className="ba b-gray-300 pa5 br3 mb5">
-                            <H2>{key}</H2>
-                            <P>
-                                Express default and less-opinionated UI elements such as background
-                                colors, icons, and text elements.
-                            </P>
+                            <H2>{paletteColortMappings[key].title}</H2>
+                            <P>{paletteColortMappings[key].description}</P>
 
-                            <div className="flex flex-row col-gap4">
+                            <div className="flex flex-column l_flex-row row-gap4 col-gap4 ">
                                 <div className="flex-auto tp-body-2">
                                     <div className="b">Suggested use</div>
-                                    <div className="pb3">
-                                        Backgrounds, text, iconography, shadows.
-                                    </div>
+                                    <Text className="pb3 black-300" size={2}>
+                                        {paletteColortMappings[key].suggestedUse}
+                                    </Text>
 
                                     <div className="br3 overflow-hidden">
                                         {usages[key].map(component => {
diff --git a/next/pages/guidelines/color/usage-mappings.ts b/next/pages/guidelines/color/usage-mappings.ts
index 94feb1a3..5d7b0715 100644
--- a/next/pages/guidelines/color/usage-mappings.ts
+++ b/next/pages/guidelines/color/usage-mappings.ts
@@ -3,6 +3,7 @@ export interface ContentMapping {
         title: string;
         type?: string;
         color?: string;
+        suggestedUse?: string;
         description: string;
     };
 }
@@ -126,4 +127,63 @@ export const interactionContent: ContentMapping = {
     },
 };
 
+export const paletteColortMappings: ContentMapping = {
+    neutral: {
+        title: 'Neutral',
+        type: 'brand',
+        color: '#2f3033',
+        suggestedUse: 'Backgrounds, text, iconography, shadows.',
+        description:
+            'Express default and less-opinionated UI elements such as background colors, icons, and text elements.',
+    },
+    blue: {
+        title: 'Blue',
+        type: 'brand',
+        color: '#009fd9',
+        suggestedUse:
+            'Buttons, links, information, progress, promotional moments, brand moments, selected states.',
+        description:
+            'Drive focus and immediate attention to primary product moments. Overuse of this color is discouraged, so we can focus on the moments that matter.',
+    },
+    indigo: {
+        title: 'Indigo',
+        type: 'brand',
+        color: '#5968e2',
+        suggestedUse: 'Data visualizations, informational moments, user assistance.',
+        description:
+            'Guiding users through onboarding, user assistance, map overlays, and data visualizations.',
+    },
+    purple: {
+        title: 'Purple',
+        type: 'brand',
+        color: '#8d56eb',
+        suggestedUse: 'Pills and descriptors.',
+        description: 'Subtle background for accent purposes. ',
+    },
+    green: {
+        title: 'Green',
+        type: 'brand',
+        color: '#ffffff',
+        suggestedUse: 'Positive moments, savings, discounts, upward trends, growth, ratings.',
+        description:
+            'Guiding users through onboarding, user assistance, map overlays, and data visualizations.',
+    },
+    red: {
+        title: 'Red',
+        type: 'feedback',
+        color: '#2db783',
+        suggestedUse: 'Alerts, negative impact, cancellations, deletions and urgency.',
+        description:
+            'Should be used sparingly to not deter from important moments that require the user’s immediate attention..',
+    },
+    yellow: {
+        title: 'Yellow',
+        type: 'feedback',
+        color: '#ff5a5f',
+        suggestedUse: 'Cautionary moments.',
+        description:
+            'Add vibrant moments to bring additional energy to the ux and provide cautionary moments of user feedback.',
+    },
+};
+
 export default usageContentMappings;