Skip to content

Commit

Permalink
Merge a2f5ff2 into 01e3daf
Browse files Browse the repository at this point in the history
  • Loading branch information
@langermank
langermank authored Mar 6, 2024
2 parents 01e3daf + a2f5ff2 commit 0c04393
Show file tree
Hide file tree
Showing 6 changed files with 784 additions and 85 deletions.
123 changes: 123 additions & 0 deletions docs/storybook/stories/Color/DataVis/Charts.stories.tsx
View file
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',
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',
]

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
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

0 comments on commit 0c04393

Please sign in to comment.