Don't hide display functional scale in Figma (#1221)

* add display functional scales to storybook

* dont hide display tokens in Figma

* add figma borderColor

* fix formattingh

* Apply suggestions from code review

Co-authored-by: Copilot <[email protected]>

---------

Co-authored-by: Copilot <[email protected]>

Author: lukasoppermann

docs/storybook/stories/Color/Functional/Display.stories.tsx

@@ -2,9 +2,11 @@ import React from 'react'
 // eslint-disable-next-line import/extensions
 import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
 import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
-import {DataTable, Table} from '@primer/react/experimental'
+import {Banner, DataTable, Table} from '@primer/react/experimental'
 import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
 import {getTokensByName} from '../../utilities/getTokensByName'
+import {Box} from '@primer/react'
+import {ColorScaleByName} from '../../StorybookComponents/ColorScale/ColorScaleByName'
 
 export default {
   title: 'Color/Alpha/Display',
@@ -160,3 +162,37 @@ export const Border = () => {
     </Table.Container>
   )
 }
+
+export const Scales = () => {
+  const data = [
+    ...new Set(
+      getTokensByName(colorTokens, 'display')
+        .map(token => {
+          return {
+            id: token.name,
+            ...token,
+          }
+        })
+        .filter(token => token.name.includes('scale'))
+        .map(token => token.path.at(1)),
+    ),
+  ]
+
+  return (
+    <Box>
+      <h1 className="sr-only">Scales</h1>
+      <Banner title="Display scales are designed for very limited use cases only." variant="warning">
+        If you feel like they make sense in your case, please reach out to the Primer team.
+      </Banner>
+      <div className="ColorScale--grid" style={{paddingTop: '1rem'}}>
+        {data.map(token => {
+          return (
+            <div key={token}>
+              <ColorScaleByName colorBaseVariable={`display-${token}-scale`} steps={9} />
+            </div>
+          )
+        })}
+      </div>
+    </Box>
+  )
+}

docs/storybook/stories/StorybookComponents/ColorScale/ColorScaleByName.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {toHex, readableColor} from 'color2k'
+import './ColorScale.css'
+
+export type ColorScaleProps = {
+  colorBaseVariable: string
+  steps: number
+}
+
+const ColorBlock = ({color}: {color: string}) => {
+  const ref = React.useRef<HTMLDivElement | null>(null)
+  const [hex, setHex] = React.useState<string | null>(null)
+  const [textColor, setTextColor] = React.useState<string>('currentColor')
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      if (ref.current === null) {
+        return
+      }
+      const style = getComputedStyle(ref.current)
+      const rgb = style.getPropertyValue('background-color')
+      const asHex = toHex(rgb)
+      setHex(asHex)
+      setTextColor(asHex ? readableColor(asHex) : 'currentColor')
+    }, 0)
+  }, [color])
+
+  return (
+    <div
+      className="ColorScale--block"
+      style={{
+        backgroundColor: `var(--${color})`,
+        color: textColor,
+      }}
+      data-color-scale
+      ref={ref}
+    >
+      {' '}
+      <p data-token-name>{color}</p>
+      {hex ? <p data-token-name>{hex}</p> : null}
+    </div>
+  )
+}
+
+export const ColorScaleByName = ({colorBaseVariable, steps}: ColorScaleProps) => {
+  return (
+    <div>
+      {new Array(steps).fill(null).map((_, index) => {
+        const color = `${colorBaseVariable}-${index}`
+        return <ColorBlock key={color} color={color} />
+      })}
+    </div>
+  )
+}
+
+// export default ColorScale
+
+ColorScaleByName.displayName = 'ColorScaleByName'