From 69cb797daa02c9ba056945a3242646928515240a Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Fri, 10 Feb 2023 17:04:40 -0800
Subject: [PATCH 1/7] feat(website): show text color accessible background
 pairings

---
 .../src/components/tokens-list/index.tsx      |  3 +-
 .../token-card/AccessiblePairing.tsx          | 52 +++++++++++++++++++
 .../tokens-list/token-card/index.tsx          |  5 ++
 .../token-card/token-example/index.tsx        |  2 +
 .../src/components/tokens-list/types.ts       |  1 +
 5 files changed, 62 insertions(+), 1 deletion(-)
 create mode 100644 packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx

diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index 0d4de82ade..78a2c53f85 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -193,7 +193,7 @@ export const TokensList = (): JSX.Element => {
                 {sectionIntro}
                 <Box marginBottom="space130" data-cy="tokens-table-container">
                   {categoryTokens ? (
-                    categoryTokens.map(({name, value, altValue, comment}) => (
+                    categoryTokens.map(({name, value, altValue, comment, text_contrast_pairing}) => (
                       <TokenCard
                         key={`token${name}`}
                         category={tokenCategory}
@@ -210,6 +210,7 @@ export const TokensList = (): JSX.Element => {
                         useCamelCase={useJavascriptNames}
                         onCopyText={handleCopyName}
                         isCopied={clipboard.copied && lastCopiedValue === name}
+                        text_contrast_pairing={text_contrast_pairing}
                       />
                     ))
                   ) : (
diff --git a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
new file mode 100644
index 0000000000..ba05b31791
--- /dev/null
+++ b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
@@ -0,0 +1,52 @@
+import {Box} from '@twilio-paste/box';
+import type {BoxProps} from '@twilio-paste/box';
+import {Paragraph} from '@twilio-paste/paragraph';
+import {Popover, PopoverBadgeButton, PopoverContainer} from '@twilio-paste/popover';
+import {Heading} from '@twilio-paste/heading';
+import camelCase from 'lodash/camelCase';
+
+import type {TokenCardProps} from '../types';
+
+export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pairing' | 'name'>> = ({
+  text_contrast_pairing,
+  name,
+}) => {
+  return (
+    <Box as="div" marginTop="space50">
+      <PopoverContainer>
+        <PopoverBadgeButton variant="decorative30">
+          <span aria-hidden="true">👯‍♀️</span> Accessible color token pairs
+        </PopoverBadgeButton>
+        <Popover aria-label="Background colors this text color is accessible on">
+          <Heading variant="heading50" as="h2">
+            Accessible color token pairs
+          </Heading>
+          <Paragraph>
+            Here are some colors that meet accessible contrast ratios when paired with <strong>{name}</strong>.
+          </Paragraph>
+
+          <Box display="flex" rowGap="space30" columnGap="space30" flexWrap="wrap">
+            {text_contrast_pairing?.map((color) => (
+              <Box
+                backgroundColor={camelCase(color) as BoxProps['color']}
+                color={camelCase(name) as BoxProps['color']}
+                borderRadius="borderRadius20"
+                paddingX="space30"
+                paddingY="space10"
+                fontFamily="fontFamilyCode"
+                fontSize="fontSize20"
+                lineHeight="lineHeight10"
+                borderStyle="solid"
+                borderColor="colorBorderWeak"
+                borderWidth="borderWidth10"
+                key={`color${color}`}
+              >
+                ${color}
+              </Box>
+            ))}
+          </Box>
+        </Popover>
+      </PopoverContainer>
+    </Box>
+  );
+};
diff --git a/packages/paste-website/src/components/tokens-list/token-card/index.tsx b/packages/paste-website/src/components/tokens-list/token-card/index.tsx
index 1f43fe909c..8da01f64a1 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/index.tsx
@@ -10,6 +10,7 @@ import {styled, css} from '@twilio-paste/styling-library';
 
 import {TokenExample} from './token-example';
 import type {TokenCardProps} from '../types';
+import {AccessiblePairing} from './AccessiblePairing';
 
 const TokenCardContent = styled.dl(
   css({
@@ -65,6 +66,7 @@ export const TokenCard: React.FC<React.PropsWithChildren<TokenCardProps>> = Reac
     textColor,
     textColorInverse,
     useCamelCase,
+    text_contrast_pairing,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCopyText = () => {},
     isCopied = false,
@@ -185,6 +187,9 @@ export const TokenCard: React.FC<React.PropsWithChildren<TokenCardProps>> = Reac
             </Box>
           </TokenCardValue>
           <TokenCardComment>{comment}</TokenCardComment>
+          {text_contrast_pairing && text_contrast_pairing.length > 0 && (
+            <AccessiblePairing name={tokenName} text_contrast_pairing={text_contrast_pairing} />
+          )}
         </TokenCardContent>
       </Box>
     );
diff --git a/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx b/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
index 268068a763..98b790efa3 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
@@ -19,6 +19,7 @@ export const TokenExample: React.FC<React.PropsWithChildren<TokenExampleProps>>
   borderColor,
   textColorInverse,
   highlightColor,
+  text_contrast_pairing,
   ...props
 }) => {
   const backgroundColor = name.toLowerCase().match('inverse') ? backgroundColorInverse : props.backgroundColor;
@@ -124,6 +125,7 @@ export const TokenExample: React.FC<React.PropsWithChildren<TokenExampleProps>>
           backgroundColor={backgroundColor}
           textColor={textColor}
           textShadow={textShadow}
+          text_contrast_pairing={text_contrast_pairing}
         />
       );
   }
diff --git a/packages/paste-website/src/components/tokens-list/types.ts b/packages/paste-website/src/components/tokens-list/types.ts
index a27d0a5b27..584ba45783 100644
--- a/packages/paste-website/src/components/tokens-list/types.ts
+++ b/packages/paste-website/src/components/tokens-list/types.ts
@@ -32,6 +32,7 @@ export interface TokenExampleProps extends TokenExampleColors {
   category: Token['category'];
   name: Token['name'];
   value: Token['value'];
+  text_contrast_pairing?: Token['text_contrast_pairing'];
 }
 
 export interface TokenCardProps extends TokenExampleProps {

From 1bfcdf4a2b7575f9139ded4bf62f6fb35e8cadc9 Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Fri, 10 Feb 2023 17:14:33 -0800
Subject: [PATCH 2/7] feat(website): story and swap the chevron icon

---
 .../components/tokens-list/token-card/AccessiblePairing.tsx   | 2 +-
 packages/paste-website/stories/TokenCard.stories.tsx          | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
index ba05b31791..7a7aebc7bf 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
@@ -28,7 +28,7 @@ export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pai
           <Box display="flex" rowGap="space30" columnGap="space30" flexWrap="wrap">
             {text_contrast_pairing?.map((color) => (
               <Box
-                backgroundColor={camelCase(color) as BoxProps['color']}
+                backgroundColor={camelCase(color) as BoxProps['backgroundColor']}
                 color={camelCase(name) as BoxProps['color']}
                 borderRadius="borderRadius20"
                 paddingX="space30"
diff --git a/packages/paste-website/stories/TokenCard.stories.tsx b/packages/paste-website/stories/TokenCard.stories.tsx
index 610189d272..aa643afda1 100644
--- a/packages/paste-website/stories/TokenCard.stories.tsx
+++ b/packages/paste-website/stories/TokenCard.stories.tsx
@@ -35,7 +35,7 @@ export default {
   },
 } as Meta<typeof TokenCard>;
 
-const Template: StoryFn<typeof TokenCard> = ({name, category, useCamelCase}) => {
+const Template: StoryFn<typeof TokenCard> = ({name, category, useCamelCase, text_contrast_pairing}) => {
   const theme = useTheme();
   const categoryTokens = defaultThemeTokens[category];
   const backgroundColor = theme.backgroundColors.colorBackgroundBody;
@@ -91,6 +91,7 @@ const Template: StoryFn<typeof TokenCard> = ({name, category, useCamelCase}) =>
         textColorInverse={textColorInverse}
         borderColor={borderColor}
         useCamelCase={useCamelCase}
+        text_contrast_pairing={text_contrast_pairing}
       />
     </Box>
   );
@@ -214,6 +215,7 @@ export const TextColorToken = Template.bind({});
 TextColorToken.args = {
   category: 'text-colors',
   name: 'color-text-success',
+  text_contrast_pairing: ['color-background', 'color-background-new', 'color-background-user'],
 };
 
 export const TextColorConditionalToken = Template.bind({});

From e5e20550c6849e64df87a6b0cdac3966dd152092 Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Fri, 10 Feb 2023 17:35:46 -0800
Subject: [PATCH 3/7] fix: chevron and theme

---
 .../src/components/tokens-list/index.tsx      |  1 +
 .../token-card/AccessiblePairing.tsx          | 46 ++++++++++---------
 .../tokens-list/token-card/index.tsx          |  7 ++-
 .../src/components/tokens-list/types.ts       |  1 +
 4 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index 78a2c53f85..b5c25ad96f 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -211,6 +211,7 @@ export const TokensList = (): JSX.Element => {
                         onCopyText={handleCopyName}
                         isCopied={clipboard.copied && lastCopiedValue === name}
                         text_contrast_pairing={text_contrast_pairing}
+                        selectedTheme={selectedTheme}
                       />
                     ))
                   ) : (
diff --git a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
index 7a7aebc7bf..107fd6f032 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
@@ -6,10 +6,12 @@ import {Heading} from '@twilio-paste/heading';
 import camelCase from 'lodash/camelCase';
 
 import type {TokenCardProps} from '../types';
+import {Theme} from '@twilio-paste/theme';
 
-export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pairing' | 'name'>> = ({
+export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pairing' | 'name' | 'selectedTheme'>> = ({
   text_contrast_pairing,
   name,
+  selectedTheme,
 }) => {
   return (
     <Box as="div" marginTop="space50">
@@ -25,26 +27,28 @@ export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pai
             Here are some colors that meet accessible contrast ratios when paired with <strong>{name}</strong>.
           </Paragraph>
 
-          <Box display="flex" rowGap="space30" columnGap="space30" flexWrap="wrap">
-            {text_contrast_pairing?.map((color) => (
-              <Box
-                backgroundColor={camelCase(color) as BoxProps['backgroundColor']}
-                color={camelCase(name) as BoxProps['color']}
-                borderRadius="borderRadius20"
-                paddingX="space30"
-                paddingY="space10"
-                fontFamily="fontFamilyCode"
-                fontSize="fontSize20"
-                lineHeight="lineHeight10"
-                borderStyle="solid"
-                borderColor="colorBorderWeak"
-                borderWidth="borderWidth10"
-                key={`color${color}`}
-              >
-                ${color}
-              </Box>
-            ))}
-          </Box>
+          <Theme.Provider theme={selectedTheme}>
+            <Box display="flex" rowGap="space30" columnGap="space30" flexWrap="wrap">
+              {text_contrast_pairing?.map((color) => (
+                <Box
+                  backgroundColor={camelCase(color) as BoxProps['backgroundColor']}
+                  color={camelCase(name) as BoxProps['color']}
+                  borderRadius="borderRadius20"
+                  paddingX="space30"
+                  paddingY="space10"
+                  fontFamily="fontFamilyCode"
+                  fontSize="fontSize20"
+                  lineHeight="lineHeight10"
+                  borderStyle="solid"
+                  borderColor="colorBorderWeak"
+                  borderWidth="borderWidth10"
+                  key={`color${color}`}
+                >
+                  ${color}
+                </Box>
+              ))}
+            </Box>
+          </Theme.Provider>
         </Popover>
       </PopoverContainer>
     </Box>
diff --git a/packages/paste-website/src/components/tokens-list/token-card/index.tsx b/packages/paste-website/src/components/tokens-list/token-card/index.tsx
index 8da01f64a1..1bd18c61e2 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/index.tsx
@@ -70,6 +70,7 @@ export const TokenCard: React.FC<React.PropsWithChildren<TokenCardProps>> = Reac
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     onCopyText = () => {},
     isCopied = false,
+    selectedTheme,
     ...props
   }) => {
     const tooltipState = useTooltipState();
@@ -188,7 +189,11 @@ export const TokenCard: React.FC<React.PropsWithChildren<TokenCardProps>> = Reac
           </TokenCardValue>
           <TokenCardComment>{comment}</TokenCardComment>
           {text_contrast_pairing && text_contrast_pairing.length > 0 && (
-            <AccessiblePairing name={tokenName} text_contrast_pairing={text_contrast_pairing} />
+            <AccessiblePairing
+              name={tokenName}
+              text_contrast_pairing={text_contrast_pairing}
+              selectedTheme={selectedTheme}
+            />
           )}
         </TokenCardContent>
       </Box>
diff --git a/packages/paste-website/src/components/tokens-list/types.ts b/packages/paste-website/src/components/tokens-list/types.ts
index 584ba45783..6cbb68ad98 100644
--- a/packages/paste-website/src/components/tokens-list/types.ts
+++ b/packages/paste-website/src/components/tokens-list/types.ts
@@ -41,4 +41,5 @@ export interface TokenCardProps extends TokenExampleProps {
   useCamelCase?: boolean;
   isCopied?: boolean;
   onCopyText?: (tokenName: string) => void;
+  selectedTheme: 'default' | 'dark';
 }

From e4307d0cfae0211da58798b0d1ab2517dc33d7da Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Thu, 23 Feb 2023 18:28:41 -0800
Subject: [PATCH 4/7] chore: token annotation tidy and better pairing

---
 .../tokens/global/text-color.yml              |  8 ++---
 .../tokens/themes/dark/aliases/box-shadow.yml |  2 +-
 .../tokens/themes/dark/aliases/offset.yml     |  2 --
 .../tokens/themes/dark/global/text-color.yml  | 16 ----------
 .../themes/evergreen/aliases/box-shadow.yml   |  2 +-
 .../themes/evergreen/aliases/offset.yml       |  2 --
 .../themes/evergreen/global/text-color.yml    | 16 ----------
 .../themes/twilio-dark/global/text-color.yml  |  4 ---
 .../themes/twilio/aliases/box-shadow.yml      |  3 --
 .../themes/twilio/global/box-shadow.yml       |  1 -
 .../themes/twilio/global/text-color.yml       |  4 ---
 .../src/components/tokens-list/index.tsx      | 29 +++++++++++++++----
 .../token-card/AccessiblePairing.tsx          |  2 +-
 13 files changed, 31 insertions(+), 60 deletions(-)
 delete mode 100644 packages/paste-design-tokens/tokens/themes/dark/aliases/offset.yml
 delete mode 100644 packages/paste-design-tokens/tokens/themes/evergreen/aliases/offset.yml
 delete mode 100644 packages/paste-design-tokens/tokens/themes/twilio/aliases/box-shadow.yml

diff --git a/packages/paste-design-tokens/tokens/global/text-color.yml b/packages/paste-design-tokens/tokens/global/text-color.yml
index 0e3436c76a..8c446ec87b 100644
--- a/packages/paste-design-tokens/tokens/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/global/text-color.yml
@@ -483,28 +483,28 @@ props:
     text_contrast_pairing:
       - color-background
       - color-background-body
-      - color-background-decorative-10
+      - color-background-decorative-10-weakest
   color-text-decorative-20:
     value: "{!palette-blue-80}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
     text_contrast_pairing:
       - color-background
       - color-background-body
-      - color-background-decorative-20
+      - color-background-decorative-20-weakest
   color-text-decorative-30:
     value: "{!palette-green-70}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
     text_contrast_pairing:
       - color-background
       - color-background-body
-      - color-background-decorative-30
+      - color-background-decorative-30-weakest
   color-text-decorative-40:
     value: "{!palette-purple-60}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
     text_contrast_pairing:
       - color-background
       - color-background-body
-      - color-background-decorative-40
+      - color-background-decorative-40-weakest
 
   # user
   color-text-user:
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
index c3b5062f28..c64fff9e2b 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/aliases/box-shadow.yml
@@ -1,8 +1,8 @@
 imports:
   - ../../../aliases/box-shadow.yml
+  - ../../../aliases/offset.yml
   - ./color-palette.yml
   - ./color.yml
-  - ./offset.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}"
diff --git a/packages/paste-design-tokens/tokens/themes/dark/aliases/offset.yml b/packages/paste-design-tokens/tokens/themes/dark/aliases/offset.yml
deleted file mode 100644
index 10f5885375..0000000000
--- a/packages/paste-design-tokens/tokens/themes/dark/aliases/offset.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-imports:
-  - ../../../aliases/offset.yml
diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
index 6242fa0598..7b7c017168 100644
--- a/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/dark/global/text-color.yml
@@ -155,31 +155,15 @@ props:
   color-text-decorative-10:
     value: "{!palette-gray-20}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-10
   color-text-decorative-20:
     value: "{!palette-blue-20}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-20
   color-text-decorative-30:
     value: "{!palette-green-30}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-30
   color-text-decorative-40:
     value: "{!palette-purple-20}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-40
 
   # user
   color-text-user:
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
index c3b5062f28..c64fff9e2b 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/box-shadow.yml
@@ -1,8 +1,8 @@
 imports:
   - ../../../aliases/box-shadow.yml
+  - ../../../aliases/offset.yml
   - ./color-palette.yml
   - ./color.yml
-  - ./offset.yml
 aliases:
   shadow-elevation-0: "none"
   shadow-elevation-10: "{!offset-0} {!offset-10} {!offset-20} {!offset-0} {!black-transparent-40}"
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/offset.yml b/packages/paste-design-tokens/tokens/themes/evergreen/aliases/offset.yml
deleted file mode 100644
index 10f5885375..0000000000
--- a/packages/paste-design-tokens/tokens/themes/evergreen/aliases/offset.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-imports:
-  - ../../../aliases/offset.yml
diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
index 70a81abc9c..8562c75cda 100644
--- a/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/evergreen/global/text-color.yml
@@ -132,28 +132,12 @@ props:
   color-text-decorative-10:
     value: "#696F8C"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-10
   color-text-decorative-20:
     value: "#2952CC"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-20
   color-text-decorative-30:
     value: "#317159"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-30
   color-text-decorative-40:
     value: "#6E62B6"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-40
diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/text-color.yml
index a5a278cf26..27d8ba3ce7 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/text-color.yml
@@ -28,10 +28,6 @@ props:
   color-text-decorative-40:
     value: "{!palette-purple-30}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-40
 
   # user
   color-text-user:
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/aliases/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio/aliases/box-shadow.yml
deleted file mode 100644
index c570173fc1..0000000000
--- a/packages/paste-design-tokens/tokens/themes/twilio/aliases/box-shadow.yml
+++ /dev/null
@@ -1,3 +0,0 @@
-imports:
-  - ../../../aliases/box-shadow.yml
-  - ../../../aliases/color.yml
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
index 1d4a64c63f..e5f0c2cb78 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/box-shadow.yml
@@ -3,7 +3,6 @@ global:
   category: box-shadow
 imports:
   - ../../../global/box-shadow.yml
-  - ../aliases/box-shadow.yml
 props:
   shadow-focus:
     value: "{!offset-0} {!offset-0} {!offset-0} {!offset-10} {!palette-gray-0}, {!offset-0} {!offset-0} {!offset-0} 3px {!palette-blue-55}, {!offset-0} {!offset-0} {!offset-0} 5px {!palette-blue-20}"
diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml
index 566c73115e..4bd8f22e1c 100644
--- a/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml
+++ b/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml
@@ -49,10 +49,6 @@ props:
   color-text-decorative-30:
     value: "{!palette-green-80}"
     comment: Text color with no semantic meaning, used for decorative purposes only. Should generally be used with matching decorative background and/or border tokens.
-    text_contrast_pairing:
-      - color-background
-      - color-background-body
-      - color-background-decorative-30
 
   # user
   color-text-user:
diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index b5c25ad96f..8b01a18401 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -17,6 +17,22 @@ import {SimpleStorage} from '../../utils/SimpleStorage';
 import {sectionIntros} from './sectionIntros';
 import {ScrollToTopLink} from './ScrollToTopLink';
 
+const getTokenContrastPairs = (Tokens: typeof DefaultThemeTokens): Record<string, string[]> => {
+  const {tokens} = Tokens;
+  const tokensWithPairs: Record<string, string[]> = {};
+  const tokenCategories = Object.keys(tokens) as [keyof typeof tokens];
+  tokenCategories.forEach((tokenCatgory) => {
+    tokens[tokenCatgory].forEach((token) => {
+      if (token.hasOwnProperty('text_contrast_pairing')) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore This typing is weird and I can't work it out. text_contrast_pairing definitely is part of token
+        tokensWithPairs[token.name] = token.text_contrast_pairing;
+      }
+    });
+  });
+  return tokensWithPairs;
+};
+
 const sentenceCase = (catName: string): string => {
   return catName
     .split('-')
@@ -46,19 +62,22 @@ export const TokensList = (): JSX.Element => {
 
   // State related to select and filter controls
   const [filterString, setFilterString] = React.useState('');
-  const [selectedTheme, setSelectedTheme] = React.useState(defaultTheme);
+  const [selectedTheme, setSelectedTheme] = React.useState<'default' | 'dark'>(defaultTheme);
   const [selectedFormat, setSelectedFormat] = React.useState(defaultFormat);
   const [useJavascriptNames, setUseJavascriptNames] = React.useState(false);
 
   // State related to the clipboard
   const [lastCopiedValue, setLastCopiedValue] = React.useState('');
 
+  // Get a static list of tokens and color contrast pairs
+  const tokenContrastPairs = getTokenContrastPairs(DefaultThemeTokens);
+
   /*
    * This runs on hydration, grabs any settings from the client's localStorage,
    * and populates the token list.
    */
   React.useEffect(() => {
-    const userTheme = SimpleStorage.get('themeControl') || defaultTheme;
+    const userTheme = (SimpleStorage.get('themeControl') as 'dark' | 'default') || defaultTheme;
     const userFormat = SimpleStorage.get('formatControl') || defaultFormat;
     let tokenList: Tokens = DefaultThemeTokens.tokens;
 
@@ -98,7 +117,7 @@ export const TokensList = (): JSX.Element => {
     const newTokens = value === 'dark' ? DarkThemeTokens.tokens : DefaultThemeTokens.tokens;
 
     SimpleStorage.set('themeControl', value);
-    setSelectedTheme(value);
+    setSelectedTheme(value as 'default' | 'dark');
     setTokens(newTokens);
     setExampleColors(getTokenExampleColors(newTokens));
   };
@@ -193,7 +212,7 @@ export const TokensList = (): JSX.Element => {
                 {sectionIntro}
                 <Box marginBottom="space130" data-cy="tokens-table-container">
                   {categoryTokens ? (
-                    categoryTokens.map(({name, value, altValue, comment, text_contrast_pairing}) => (
+                    categoryTokens.map(({name, value, altValue, comment}) => (
                       <TokenCard
                         key={`token${name}`}
                         category={tokenCategory}
@@ -210,7 +229,7 @@ export const TokensList = (): JSX.Element => {
                         useCamelCase={useJavascriptNames}
                         onCopyText={handleCopyName}
                         isCopied={clipboard.copied && lastCopiedValue === name}
-                        text_contrast_pairing={text_contrast_pairing}
+                        text_contrast_pairing={tokenContrastPairs[name]}
                         selectedTheme={selectedTheme}
                       />
                     ))
diff --git a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
index 107fd6f032..9996653408 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/AccessiblePairing.tsx
@@ -4,9 +4,9 @@ import {Paragraph} from '@twilio-paste/paragraph';
 import {Popover, PopoverBadgeButton, PopoverContainer} from '@twilio-paste/popover';
 import {Heading} from '@twilio-paste/heading';
 import camelCase from 'lodash/camelCase';
+import {Theme} from '@twilio-paste/theme';
 
 import type {TokenCardProps} from '../types';
-import {Theme} from '@twilio-paste/theme';
 
 export const AccessiblePairing: React.FC<Pick<TokenCardProps, 'text_contrast_pairing' | 'name' | 'selectedTheme'>> = ({
   text_contrast_pairing,

From 554f298dddd6558ad32c1988769558c5479e0baa Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Fri, 24 Feb 2023 17:14:29 -0800
Subject: [PATCH 5/7] chore: tidy up and tests

---
 .../__tests__/tokenAccessiblePairs.test.tsx   | 78 +++++++++++++++++++
 .../src/__tests__/tokenCard.test.tsx          |  6 ++
 .../src/components/tokens-list/helpers.tsx    | 18 ++++-
 .../src/components/tokens-list/index.tsx      | 18 +----
 .../token-card/token-example/index.tsx        |  1 -
 5 files changed, 102 insertions(+), 19 deletions(-)
 create mode 100644 packages/paste-website/src/__tests__/tokenAccessiblePairs.test.tsx

diff --git a/packages/paste-website/src/__tests__/tokenAccessiblePairs.test.tsx b/packages/paste-website/src/__tests__/tokenAccessiblePairs.test.tsx
new file mode 100644
index 0000000000..c2ea59467c
--- /dev/null
+++ b/packages/paste-website/src/__tests__/tokenAccessiblePairs.test.tsx
@@ -0,0 +1,78 @@
+import {getTokenContrastPairs} from '../components/tokens-list/helpers';
+
+describe('Color token pairing display', () => {
+  describe('getTokenContrastPairs', () => {
+    it('should only return an object of tokens with their accessbile pairings', () => {
+      const mockTokens = {
+        tokens: {
+          'background-colors': [
+            {
+              type: 'color',
+              value: 'rgb(244, 244, 246)',
+              comment: 'Default background color for any container.',
+              name: 'color-background',
+              altValue: '#F4F4F6',
+              category: 'background-color',
+            },
+            {
+              type: 'color',
+              value: 'rgb(20, 176, 83)',
+              comment: 'Background color used to represent an entity or person as "available".',
+              name: 'color-background-available',
+              altValue: '#14B053',
+              category: 'background-color',
+            },
+          ],
+          'text-colors': [
+            {
+              type: 'color',
+              value: 'rgb(96, 107, 133)',
+              comment: 'Weak body text for visual hierarchy.',
+              text_contrast_pairing: [
+                'color-background',
+                'color-background-body',
+                'color-background-neutral-weakest',
+                'color-background-warning-weakest',
+                'color-background-error-weakest',
+                'color-background-row-striped',
+                'color-background-primary-weakest',
+                'color-background-destructive-weakest',
+              ],
+              name: 'color-text-weak',
+              altValue: '#606B85',
+              category: 'text-color',
+            },
+            {
+              type: 'color',
+              value: 'rgb(96, 107, 133)',
+              name: 'color-text',
+              altValue: '#606B85',
+              category: 'text-color',
+            },
+            {
+              type: 'color',
+              value: 'rgb(96, 107, 133)',
+              text_contrast_pairing: ['color-background', 'color-background-body'],
+              name: 'color-text-strong',
+              altValue: '#606B85',
+              category: 'text-color',
+            },
+          ],
+        },
+      };
+      expect(getTokenContrastPairs(mockTokens)).toEqual({
+        'color-text-weak': [
+          'color-background',
+          'color-background-body',
+          'color-background-neutral-weakest',
+          'color-background-warning-weakest',
+          'color-background-error-weakest',
+          'color-background-row-striped',
+          'color-background-primary-weakest',
+          'color-background-destructive-weakest',
+        ],
+        'color-text-strong': ['color-background', 'color-background-body'],
+      });
+    });
+  });
+});
diff --git a/packages/paste-website/src/__tests__/tokenCard.test.tsx b/packages/paste-website/src/__tests__/tokenCard.test.tsx
index c1bcf66587..3192cda6ce 100644
--- a/packages/paste-website/src/__tests__/tokenCard.test.tsx
+++ b/packages/paste-website/src/__tests__/tokenCard.test.tsx
@@ -33,6 +33,7 @@ describe('TokenCard', () => {
         textColor={testExampleTextColor}
         textColorInverse={testExampleTextColorInverse}
         useCamelCase={useCamelCase}
+        selectedTheme="default"
       />
     </Theme.Provider>
   );
@@ -66,6 +67,7 @@ describe('TokenCard', () => {
           value="70.5rem"
           altValue="1128px"
           comment="Generic sizing token scale for UI components."
+          selectedTheme="default"
         />
       </Theme.Provider>
     );
@@ -86,6 +88,7 @@ describe('TokenCard', () => {
           backgroundColorInverse={testExampleBackgroundInverse}
           textColor={testExampleTextColor}
           textColorInverse={testExampleTextColorInverse}
+          selectedTheme="default"
         />
       </Theme.Provider>
     );
@@ -105,6 +108,7 @@ describe('TokenCard', () => {
           comment="Light inverse background color for any container. Must be used on color-background-body-inverse."
           backgroundColor={testExampleBackground}
           backgroundColorInverse={testExampleBackgroundInverse}
+          selectedTheme="default"
         />
       </Theme.Provider>
     );
@@ -127,6 +131,7 @@ describe('TokenCard', () => {
           backgroundColorInverse={testExampleBackgroundInverse}
           textColor={testExampleTextColor}
           textColorInverse={testExampleTextColorInverse}
+          selectedTheme="default"
         />
       </Theme.Provider>
     );
@@ -149,6 +154,7 @@ describe('TokenCard', () => {
           highlightColor={testExampleHighlightColor}
           textColor={testExampleTextColor}
           textColorInverse={testExampleTextColorInverse}
+          selectedTheme="default"
         />
       </Theme.Provider>
     );
diff --git a/packages/paste-website/src/components/tokens-list/helpers.tsx b/packages/paste-website/src/components/tokens-list/helpers.tsx
index 2a7e5359ae..cfae061e91 100644
--- a/packages/paste-website/src/components/tokens-list/helpers.tsx
+++ b/packages/paste-website/src/components/tokens-list/helpers.tsx
@@ -1,7 +1,7 @@
 import type {Properties} from 'csstype';
 import debounce from 'lodash/debounce';
 
-import type {Token, Tokens, TokenExampleColors} from './types';
+import type {Token, Tokens, TokenExampleColors, TokensShape} from './types';
 import {event} from '../../lib/gtag';
 
 export const trackTokenFilterString = debounce((filter: string): void => {
@@ -63,3 +63,19 @@ export const getTokenExampleColors = (tokens: Tokens): TokenExampleColors => {
       ?.value as Properties['color'],
   };
 };
+
+export const getTokenContrastPairs = (Tokens: TokensShape): Record<string, string[]> => {
+  const {tokens} = Tokens;
+  const tokensWithPairs: Record<string, string[]> = {};
+  const tokenCategories = tokens ? (Object.keys(tokens) as [keyof typeof tokens]) : [];
+  tokenCategories.forEach((tokenCatgory) => {
+    if (tokens) {
+      tokens[tokenCatgory].forEach((token) => {
+        if (token.text_contrast_pairing) {
+          tokensWithPairs[token.name] = token.text_contrast_pairing;
+        }
+      });
+    }
+  });
+  return tokensWithPairs;
+};
diff --git a/packages/paste-website/src/components/tokens-list/index.tsx b/packages/paste-website/src/components/tokens-list/index.tsx
index 8b01a18401..8a17375561 100644
--- a/packages/paste-website/src/components/tokens-list/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/index.tsx
@@ -7,7 +7,7 @@ import {useClipboard} from '@twilio-paste/clipboard-copy-library';
 import kebabCase from 'lodash/kebabCase';
 
 import {AnchoredHeading} from '../Heading';
-import {trackTokenFilterString, filterTokenList, getTokenExampleColors} from './helpers';
+import {trackTokenFilterString, filterTokenList, getTokenExampleColors, getTokenContrastPairs} from './helpers';
 import type {Tokens, TokenExampleColors} from './types';
 import {PageAside} from '../shortcodes/PageAside';
 import {NoTokensFound} from './NoTokensFound';
@@ -17,22 +17,6 @@ import {SimpleStorage} from '../../utils/SimpleStorage';
 import {sectionIntros} from './sectionIntros';
 import {ScrollToTopLink} from './ScrollToTopLink';
 
-const getTokenContrastPairs = (Tokens: typeof DefaultThemeTokens): Record<string, string[]> => {
-  const {tokens} = Tokens;
-  const tokensWithPairs: Record<string, string[]> = {};
-  const tokenCategories = Object.keys(tokens) as [keyof typeof tokens];
-  tokenCategories.forEach((tokenCatgory) => {
-    tokens[tokenCatgory].forEach((token) => {
-      if (token.hasOwnProperty('text_contrast_pairing')) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore This typing is weird and I can't work it out. text_contrast_pairing definitely is part of token
-        tokensWithPairs[token.name] = token.text_contrast_pairing;
-      }
-    });
-  });
-  return tokensWithPairs;
-};
-
 const sentenceCase = (catName: string): string => {
   return catName
     .split('-')
diff --git a/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx b/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
index 98b790efa3..6e3d21f57a 100644
--- a/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
+++ b/packages/paste-website/src/components/tokens-list/token-card/token-example/index.tsx
@@ -125,7 +125,6 @@ export const TokenExample: React.FC<React.PropsWithChildren<TokenExampleProps>>
           backgroundColor={backgroundColor}
           textColor={textColor}
           textShadow={textShadow}
-          text_contrast_pairing={text_contrast_pairing}
         />
       );
   }

From 3a4611c966609357582b04840f957348c789c98e Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Wed, 1 Mar 2023 14:16:47 -0800
Subject: [PATCH 6/7] chore: changeset

---
 .changeset/sixty-chefs-cover.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/sixty-chefs-cover.md

diff --git a/.changeset/sixty-chefs-cover.md b/.changeset/sixty-chefs-cover.md
new file mode 100644
index 0000000000..f98385ac1c
--- /dev/null
+++ b/.changeset/sixty-chefs-cover.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/design-tokens': patch
+'@twilio-paste/core': patch
+---
+
+[Design Tokens]: correct color contrast token pair naming for decorative background 10

From ca7f45e226829de31ce3e737596d46092eccce0d Mon Sep 17 00:00:00 2001
From: Si Taggart <me@simontaggart.com>
Date: Wed, 1 Mar 2023 16:08:49 -0800
Subject: [PATCH 7/7] chore: disable incorrect axe rule for token card story

---
 .../paste-website/stories/TokenCard.stories.tsx     | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/paste-website/stories/TokenCard.stories.tsx b/packages/paste-website/stories/TokenCard.stories.tsx
index aa643afda1..001162df81 100644
--- a/packages/paste-website/stories/TokenCard.stories.tsx
+++ b/packages/paste-website/stories/TokenCard.stories.tsx
@@ -217,6 +217,19 @@ TextColorToken.args = {
   name: 'color-text-success',
   text_contrast_pairing: ['color-background', 'color-background-new', 'color-background-user'],
 };
+TextColorToken.parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          // this rule is technically wrong https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
+          id: 'definition-list',
+          enabled: false,
+        },
+      ],
+    },
+  },
+};
 
 export const TextColorConditionalToken = Template.bind({});
 TextColorConditionalToken.args = {