Support updated high contrast themes (#1018)

* add tooltip pattern

* control track border

* control track border

* Create quick-camels-promise.md

* github-actions[bot] Regenerated snapshots

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>

.changeset/quick-camels-promise.md

@@ -0,0 +1,8 @@
+---
+"@primer/primitives": patch
+---
+
+- Minor changes to prepare for adding more borders to high contrast themes
+- Adds tooltip pattern to allow for an inverse style in dark high contrast
+
+

docs/storybook/stories/Color/Patterns/AllPatterns.stories.tsx

@@ -725,3 +725,56 @@ export const Selection = () => {
     </Table.Container>
   )
 }
+
+export const Tooltip = () => {
+  const data = getTokensByName(colorTokens, 'tooltip').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <h1 className="sr-only" id="tooltip">
+        Tooltip
+      </h1>
+      <DataTable
+        aria-labelledby="tooltip"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return (
+                <ColorTokenSwatch
+                  bgColor={row.name.includes('bgColor') || row.name.includes('iconColor') ? row.name : undefined}
+                  textColor={row.name.includes('fgColor') ? row.name : undefined}
+                  shadowColor={row.name.includes('shadow') ? row.name : undefined}
+                  borderColor={row.name.includes('borderColor') ? row.name : undefined}
+                />
+              )
+            },
+          },
+          {
+            header: 'Token',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <InlineCode value={row.name} copyClipboard />
+            },
+          },
+          {
+            header: 'Output value',
+            field: 'value',
+            rowHeader: true,
+            renderCell: row => {
+              return <p>{row.value}</p>
+            },
+          },
+        ]}
+      />
+    </Table.Container>
+  )
+}

src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -362,6 +362,12 @@
         $type: 'color',
       },
     },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
   },
   button: {
     primary: {
@@ -902,4 +908,14 @@
       },
     },
   },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.inverse}',
+      $type: 'color',
+    },
+    fgColor: {
+      $value: '{fgColor.onInverse}',
+      $type: 'color',
+    },
+  },
 }

src/tokens/functional/color/dark/patterns-dark.json5

@@ -3073,4 +3073,30 @@
       },
     },
   },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.emphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+    },
+    fgColor: {
+      $value: '{fgColor.onEmphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component',
+          scopes: ['fgColor'],
+        },
+      },
+    },
+  },
 }

src/tokens/functional/color/dark/primitives-dark.json5

@@ -53,6 +53,18 @@
         },
       },
     },
+    onInverse: {
+      $value: '{base.color.black}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+      },
+    },
     white: {
       $value: '{base.color.white}',
       $type: 'color',

src/tokens/functional/color/light/overrides/light.high-contrast.json5

@@ -326,6 +326,12 @@
         $type: 'color',
       },
     },
+    borderColor: {
+      rest: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+      },
+    },
   },
   button: {
     default: {

src/tokens/functional/color/light/patterns-light.json5

@@ -3070,4 +3070,30 @@
       },
     },
   },
+  tooltip: {
+    bgColor: {
+      $value: '{bgColor.emphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['bgColor'],
+        },
+      },
+    },
+    fgColor: {
+      $value: '{fgColor.onEmphasis}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'component',
+          scopes: ['fgColor'],
+        },
+      },
+    },
+  },
 }

src/tokens/functional/color/light/primitives-light.json5

@@ -49,6 +49,18 @@
         },
       },
     },
+    onInverse: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'light',
+          group: 'semantic',
+          scopes: ['fgColor'],
+        },
+      },
+    },
     white: {
       $value: '{base.color.white}',
       $type: 'color',