Skip to content

Commit 8cc5980

Browse files
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]>
1 parent 688d78d commit 8cc5980

File tree

3 files changed

+571
-287
lines changed

3 files changed

+571
-287
lines changed

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

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react'
22
// eslint-disable-next-line import/extensions
33
import colorTokens from '../../../../../dist/docs/functional/themes/light.json'
44
import {ColorTokenSwatch} from '../../StorybookComponents/ColorTokenSwatch/ColorTokenSwatch'
5-
import {DataTable, Table} from '@primer/react/experimental'
5+
import {Banner, DataTable, Table} from '@primer/react/experimental'
66
import {InlineCode} from '../../StorybookComponents/InlineCode/InlineCode'
77
import {getTokensByName} from '../../utilities/getTokensByName'
8+
import {Box} from '@primer/react'
9+
import {ColorScaleByName} from '../../StorybookComponents/ColorScale/ColorScaleByName'
810

911
export default {
1012
title: 'Color/Alpha/Display',
@@ -160,3 +162,37 @@ export const Border = () => {
160162
</Table.Container>
161163
)
162164
}
165+
166+
export const Scales = () => {
167+
const data = [
168+
...new Set(
169+
getTokensByName(colorTokens, 'display')
170+
.map(token => {
171+
return {
172+
id: token.name,
173+
...token,
174+
}
175+
})
176+
.filter(token => token.name.includes('scale'))
177+
.map(token => token.path.at(1)),
178+
),
179+
]
180+
181+
return (
182+
<Box>
183+
<h1 className="sr-only">Scales</h1>
184+
<Banner title="Display scales are designed for very limited use cases only." variant="warning">
185+
If you feel like they make sense in your case, please reach out to the Primer team.
186+
</Banner>
187+
<div className="ColorScale--grid" style={{paddingTop: '1rem'}}>
188+
{data.map(token => {
189+
return (
190+
<div key={token}>
191+
<ColorScaleByName colorBaseVariable={`display-${token}-scale`} steps={9} />
192+
</div>
193+
)
194+
})}
195+
</div>
196+
</Box>
197+
)
198+
}
Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React from 'react'
2+
import {toHex, readableColor} from 'color2k'
3+
import './ColorScale.css'
4+
5+
export type ColorScaleProps = {
6+
colorBaseVariable: string
7+
steps: number
8+
}
9+
10+
const ColorBlock = ({color}: {color: string}) => {
11+
const ref = React.useRef<HTMLDivElement | null>(null)
12+
const [hex, setHex] = React.useState<string | null>(null)
13+
const [textColor, setTextColor] = React.useState<string>('currentColor')
14+
15+
React.useEffect(() => {
16+
setTimeout(() => {
17+
if (ref.current === null) {
18+
return
19+
}
20+
const style = getComputedStyle(ref.current)
21+
const rgb = style.getPropertyValue('background-color')
22+
const asHex = toHex(rgb)
23+
setHex(asHex)
24+
setTextColor(asHex ? readableColor(asHex) : 'currentColor')
25+
}, 0)
26+
}, [color])
27+
28+
return (
29+
<div
30+
className="ColorScale--block"
31+
style={{
32+
backgroundColor: `var(--${color})`,
33+
color: textColor,
34+
}}
35+
data-color-scale
36+
ref={ref}
37+
>
38+
{' '}
39+
<p data-token-name>{color}</p>
40+
{hex ? <p data-token-name>{hex}</p> : null}
41+
</div>
42+
)
43+
}
44+
45+
export const ColorScaleByName = ({colorBaseVariable, steps}: ColorScaleProps) => {
46+
return (
47+
<div>
48+
{new Array(steps).fill(null).map((_, index) => {
49+
const color = `${colorBaseVariable}-${index}`
50+
return <ColorBlock key={color} color={color} />
51+
})}
52+
</div>
53+
)
54+
}
55+
56+
// export default ColorScale
57+
58+
ColorScaleByName.displayName = 'ColorScaleByName'

0 commit comments

Comments
 (0)