Add alpha data-vis colors (#820)

* try referencing display color

* comment out

* fixes

* add data-vis colors

* Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

* Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

* Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx

* rename

* temp display scale stories

* address feedback

* Create eleven-kings-hug.md

* fix snaps

* github-actions[bot] Regenerated snapshots

---------

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

.changeset/eleven-kings-hug.md

@@ -0,0 +1,5 @@
+---
+"@primer/primitives": patch
+---
+
+Add alpha data-vis colors

docs/storybook/stories/Color/DataVis/Charts.stories.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+// eslint-disable-next-line import/extensions
+import colorTokens from '../../../../../tokens-next-private/docs/functional/themes/light.json'
+import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
+import {DataTable, Table} from '@primer/react/drafts'
+import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
+import {getTokensByName} from '../../utilities/getTokensByName'
+
+export default {
+  title: 'Color/DataVis',
+  tags: ['excludeSnapshot'],
+  parameters: {
+    controls: {hideNoControlsWarning: true},
+    options: {
+      showPanel: false,
+    },
+  },
+}
+
+export const HighchartsAccentColors = () => {
+  const data = getTokensByName(colorTokens, 'data').map(token => {
+    return {
+      id: token.name,
+      ...token,
+    }
+  })
+  return (
+    <Table.Container>
+      <Table.Title as="h1" id="pattern">
+        Data visualization
+      </Table.Title>
+      <DataTable
+        aria-labelledby="pattern"
+        data={data}
+        columns={[
+          {
+            header: 'Sample',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => {
+              return <ColorTokenSwatch bgColor={row.name} />
+            },
+          },
+          {
+            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>
+  )
+}
+HighchartsAccentColors.tags = ['excludeSnapshot']

scripts/buildPlatforms/buildFigma.ts

@@ -82,6 +82,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       source: [`src/tokens/functional/shadow/light.json5`],
       include: [
         `src/tokens/base/color/light/light.json5`,
+        `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
@@ -93,6 +94,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/light/light.json5`,
         `src/tokens/base/color/light/light.high-contrast.json5`,
+        `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
@@ -104,6 +106,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/light/light.json5`,
         `src/tokens/base/color/light/light.protanopia-deuteranopia.json5`,
+        `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
@@ -115,6 +118,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/light/light.json5`,
         `src/tokens/base/color/light/light.tritanopia.json5`,
+        `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/primitives-light.json5`,
         `src/tokens/functional/color/light/patterns-light.json5`,
       ],
@@ -125,6 +129,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       source: [`src/tokens/functional/shadow/dark.json5`],
       include: [
         `src/tokens/base/color/dark/dark.json5`,
+        `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
@@ -136,6 +141,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/dark/dark.json5`,
         `src/tokens/base/color/dark/dark.high-contrast.json5`,
+        `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
@@ -147,6 +153,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/dark/dark.json5`,
         `src/tokens/base/color/dark/dark.dimmed.json5`,
+        `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
@@ -158,6 +165,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/dark/dark.json5`,
         `src/tokens/base/color/dark/dark.protanopia-deuteranopia.json5`,
+        `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
@@ -169,6 +177,7 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
       include: [
         `src/tokens/base/color/dark/dark.json5`,
         `src/tokens/base/color/dark/dark.tritanopia.json5`,
+        `src/tokens/base/color/dark/display-dark.json5`,
         `src/tokens/functional/color/dark/primitives-dark.json5`,
         `src/tokens/functional/color/dark/patterns-dark.json5`,
       ],
@@ -249,7 +258,11 @@ export const buildFigma = (buildOptions: ConfigGeneratorOptions): void => {
   // write to file
   fs.writeFileSync(`${buildOptions.buildPath}figma/figma.json`, JSON.stringify({collections, files}, null, 2))
 }
-
-buildFigma({
-  buildPath: 'tokens-next-private/',
-})
+try {
+  buildFigma({
+    buildPath: 'tokens-next-private/',
+  })
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.error('🛑 Error trying to build Figma output:', e)
+}

scripts/buildTokens.ts

@@ -51,90 +51,108 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
   /** -----------------------------------
    * Colors, shadows & borders
    * ----------------------------------- */
-  for (const {filename, source, include} of themes) {
-    // build functional scales
-    PrimerStyleDictionary.extend(
-      getStyleDictionaryConfig(
-        `functional/themes/${filename}`,
-        source,
-        include,
-        {...buildOptions, themed: true},
-        // disable fallbacks for themes
-        {fallbacks: undefined},
-      ),
-    ).buildAllPlatforms()
+  try {
+    for (const {filename, source, include} of themes) {
+      // build functional scales
+      PrimerStyleDictionary.extend(
+        getStyleDictionaryConfig(
+          `functional/themes/${filename}`,
+          source,
+          include,
+          {...buildOptions, themed: true},
+          // disable fallbacks for themes
+          {fallbacks: undefined},
+        ),
+      ).buildAllPlatforms()
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('🛑 Error trying to build Colors, shadows & borders for code output:', e)
   }
 
   /** -----------------------------------
    * Size tokens
    * ----------------------------------- */
-  const sizeFiles = glob.sync('src/tokens/functional/size/*')
-  //
-  for (const file of sizeFiles) {
+  try {
+    const sizeFiles = glob.sync('src/tokens/functional/size/*')
+    //
+    for (const file of sizeFiles) {
+      PrimerStyleDictionary.extend(
+        getStyleDictionaryConfig(
+          `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`,
+          [file],
+          ['src/tokens/base/size/size.json', ...sizeFiles],
+          buildOptions,
+        ),
+      ).buildAllPlatforms()
+    }
+    // build base scales
     PrimerStyleDictionary.extend(
-      getStyleDictionaryConfig(
-        `functional/size/${file.replace('src/tokens/functional/size/', '').replace('.json', '')}`,
-        [file],
-        ['src/tokens/base/size/size.json', ...sizeFiles],
-        buildOptions,
-      ),
+      // using includes as source
+      getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], {
+        buildPath: buildOptions.buildPath,
+        prefix: undefined,
+      }),
     ).buildAllPlatforms()
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('🛑 Error trying to build size tokens for code output:', e)
   }
-  // build base scales
-  PrimerStyleDictionary.extend(
-    // using includes as source
-    getStyleDictionaryConfig(`base/size/size`, ['src/tokens/base/size/size.json'], [], {
-      buildPath: buildOptions.buildPath,
-      prefix: undefined,
-    }),
-  ).buildAllPlatforms()
-
   /** -----------------------------------
    * Typography tokens
    * ----------------------------------- */
-  PrimerStyleDictionary.extend(
-    getStyleDictionaryConfig(
-      `functional/typography/typography`,
-      [`src/tokens/functional/typography/*.json`],
-      [`src/tokens/base/typography/*.json`],
-      buildOptions,
-      {
-        css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, {
-          options: {
-            outputReferences: true,
-          },
-        }),
-      },
-    ),
-  ).buildAllPlatforms()
+  try {
+    PrimerStyleDictionary.extend(
+      getStyleDictionaryConfig(
+        `functional/typography/typography`,
+        [`src/tokens/functional/typography/*.json`],
+        [`src/tokens/base/typography/*.json`],
+        buildOptions,
+        {
+          css: css(`css/functional/typography/typography.css`, buildOptions.prefix, buildOptions.buildPath, {
+            options: {
+              outputReferences: true,
+            },
+          }),
+        },
+      ),
+    ).buildAllPlatforms()
 
-  PrimerStyleDictionary.extend(
-    getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions),
-  ).buildAllPlatforms()
+    PrimerStyleDictionary.extend(
+      getStyleDictionaryConfig(`base/typography/typography`, [`src/tokens/base/typography/*.json`], [], buildOptions),
+    ).buildAllPlatforms()
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('🛑 Error trying to build typography tokens for code output:', e)
+  }
 
   /** -----------------------------------
    * Motion tokens
    * ----------------------------------- */
-  PrimerStyleDictionary.extend(
-    getStyleDictionaryConfig(
-      `functional/motion/motion`,
-      [`src/tokens/functional/motion/*.json5`],
-      [`src/tokens/base/motion/*.json5`],
-      buildOptions,
-      {
-        css: css(`css/functional/motion/motion.css`, buildOptions.prefix, buildOptions.buildPath, {
-          options: {
-            outputReferences: true,
-          },
-        }),
-      },
-    ),
-  ).buildAllPlatforms()
-
-  PrimerStyleDictionary.extend(
-    getStyleDictionaryConfig(`base/motion/motion`, [`src/tokens/base/motion/*.json5`], [], buildOptions),
-  ).buildAllPlatforms()
+  try {
+    PrimerStyleDictionary.extend(
+      getStyleDictionaryConfig(
+        `functional/motion/motion`,
+        [`src/tokens/functional/motion/*.json5`],
+        [`src/tokens/base/motion/*.json5`],
+        buildOptions,
+        {
+          css: css(`css/functional/motion/motion.css`, buildOptions.prefix, buildOptions.buildPath, {
+            options: {
+              outputReferences: true,
+            },
+          }),
+        },
+      ),
+    ).buildAllPlatforms()
 
+    PrimerStyleDictionary.extend(
+      getStyleDictionaryConfig(`base/motion/motion`, [`src/tokens/base/motion/*.json5`], [], buildOptions),
+    ).buildAllPlatforms()
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('🛑 Error trying to build motion tokens for code output:', e)
+  }
   /** -----------------------------------
    * deprecated tokens
    * ----------------------------------- */
@@ -144,6 +162,7 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
       filename: 'theme',
       source: [
         `src/tokens/base/color/light/light.json5`,
+        `src/tokens/base/color/light/display-light.json5`,
         `src/tokens/functional/color/light/*.json5`,
         `src/tokens/functional/shadow/light.json5`,
         `src/tokens/functional/border/light.json5`,
@@ -170,16 +189,20 @@ export const buildDesignTokens = (buildOptions: ConfigGeneratorOptions): void =>
     },
   ]
   //
-  for (const {filename, source, include} of deprecatedBuilds) {
-    PrimerStyleDictionary.extend({
-      source,
-      include,
-      platforms: {
-        deprecated: deprecatedJson(`deprecated/${filename}.json`, buildOptions.prefix, buildOptions.buildPath),
-      },
-    }).buildAllPlatforms()
+  try {
+    for (const {filename, source, include} of deprecatedBuilds) {
+      PrimerStyleDictionary.extend({
+        source,
+        include,
+        platforms: {
+          deprecated: deprecatedJson(`deprecated/${filename}.json`, buildOptions.prefix, buildOptions.buildPath),
+        },
+      }).buildAllPlatforms()
+    }
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error('🛑 Error trying to build deprecated tokens output:', e)
   }
-
   /** -----------------------------------
    * Copy `removed` files
    * ----------------------------------- */