Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add alpha data-vis colors #820

Merged
merged 14 commits into from
Mar 7, 2024
Merged

Add alpha data-vis colors #820

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
dc8ca58
try referencing display color
langermank Mar 4, 2024
99675b7
comment out
langermank Mar 4, 2024
0e12b18
fixes
lukasoppermann Mar 5, 2024
a2f5ff2
add data-vis colors
langermank Mar 6, 2024
b9af50a
Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx
langermank Mar 6, 2024
94ad5b9
Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx
langermank Mar 6, 2024
5204995
Update docs/storybook/stories/Color/DataVis/Charts.stories.tsx
langermank Mar 6, 2024
372eddd
rename
langermank Mar 6, 2024
200bb71
temp display scale stories
langermank Mar 6, 2024
9344cf9
address feedback
langermank Mar 7, 2024
0458eb2
Create eleven-kings-hug.md
langermank Mar 7, 2024
e6c2eda
fix snaps
langermank Mar 7, 2024
5e9c310
github-actions[bot] Regenerated snapshots
langermank Mar 7, 2024
c24e40f
Merge branch 'main' into data-vis-colors
langermank Mar 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 123 additions & 0 deletions docs/storybook/stories/Color/DataVis/Charts.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
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',
langermank marked this conversation as resolved.
Show resolved Hide resolved
parameters: {
parameters: {
controls: {hideNoControlsWarning: true},
options: {
showPanel: false,
},
},
},
}

const highchartColors = [
'highcharts-color-0',
'highcharts-color-1',
'highcharts-color-2',
'highcharts-color-3',
'highcharts-color-4',
'highcharts-color-5',
'highcharts-color-6',
'highcharts-color-7',
'highcharts-color-8',
'highcharts-color-9',
'highcharts-background-color',
'highcharts-neutral-color-100',
'highcharts-neutral-color-80',
'highcharts-neutral-color-60',
'highcharts-neutral-color-40',
'highcharts-neutral-color-20',
'highcharts-neutral-color-10',
'highcharts-neutral-color-5',
'highcharts-neutral-color-3',
'highcharts-highlight-color-100',
'highcharts-highlight-color-80',
'highcharts-highlight-color-60',
'highcharts-highlight-color-20',
'highcharts-highlight-color-10',
'highcharts-positive-color',
'highcharts-negative-color',
]

const primerDataVisColors = [
'highcharts-color-0',
'highcharts-color-1',
'highcharts-color-2',
'highcharts-color-3',
'highcharts-color-4',
'highcharts-color-5',
'highcharts-color-6',
'highcharts-color-7',
'highcharts-color-8',
'highcharts-color-9',
'highcharts-background-color',
'highcharts-neutral-color-100',
'highcharts-neutral-color-80',
'highcharts-neutral-color-60',
'highcharts-neutral-color-40',
'highcharts-neutral-color-20',
'highcharts-neutral-color-10',
'highcharts-neutral-color-5',
'highcharts-neutral-color-3',
'highcharts-highlight-color-100',
'highcharts-highlight-color-80',
'highcharts-highlight-color-60',
'bgColor-accent-muted',
'bgColor-accent-muted',
'bgColor-success-emphasis',
'bgColor-danger-emphasis',
]
langermank marked this conversation as resolved.
Show resolved Hide resolved

export const Highcharts = () => {
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>
)
}
21 changes: 17 additions & 4 deletions scripts/buildPlatforms/buildFigma.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand All @@ -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`,
],
Expand Down Expand Up @@ -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)
}
Loading
Loading