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.

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
5 changes: 5 additions & 0 deletions .changeset/eleven-kings-hug.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/primitives": patch
---

Add alpha data-vis colors
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
65 changes: 65 additions & 0 deletions docs/storybook/stories/Color/DataVis/Charts.stories.tsx
Original file line number Diff line number Diff line change
@@ -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',
langermank marked this conversation as resolved.
Show resolved Hide resolved
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']
21 changes: 17 additions & 4 deletions scripts/buildPlatforms/buildFigma.ts
Original file line number Diff line number Diff line change
@@ -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)
}
175 changes: 99 additions & 76 deletions scripts/buildTokens.ts
Original file line number Diff line number Diff line change
@@ -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
* ----------------------------------- */
10 changes: 5 additions & 5 deletions scripts/themes.config.ts
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-dimmed',
@@ -70,7 +70,7 @@ export const themes: TokenBuildInput[] = [
include: [
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/dark.dimmed.json5`,
`src/tokens/base/color/light/display-dark.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
],
},
{
@@ -82,7 +82,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-colorblind',
@@ -93,7 +93,7 @@ export const themes: TokenBuildInput[] = [
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/light/display-dark.json5`],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-high-contrast',
@@ -107,7 +107,7 @@ export const themes: TokenBuildInput[] = [
include: [
`src/tokens/base/color/dark/dark.json5`,
`src/tokens/base/color/dark/dark.high-contrast.json5`,
`src/tokens/base/color/light/display-dark.json5`,
`src/tokens/base/color/dark/display-dark.json5`,
],
},
]
144 changes: 144 additions & 0 deletions src/tokens/functional/color/dark/data-vis-dark.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
{
data: {
blue: {
color: {
$value: '{base.display.color.blue.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
auburn: {
color: {
$value: '{base.display.color.auburn.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
orange: {
color: {
$value: '{base.display.color.orange.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
yellow: {
color: {
$value: '{base.display.color.yellow.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
green: {
color: {
$value: '{base.display.color.green.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
teal: {
color: {
$value: '{base.display.color.teal.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
purple: {
color: {
$value: '{base.display.color.purple.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
pink: {
color: {
$value: '{base.display.color.pink.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
red: {
color: {
$value: '{base.display.color.red.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
gray: {
color: {
$value: '{base.display.color.gray.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
},
}
144 changes: 144 additions & 0 deletions src/tokens/functional/color/light/data-vis-light.json5
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
{
data: {
blue: {
color: {
$value: '{base.display.color.blue.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
auburn: {
color: {
$value: '{base.display.color.auburn.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
orange: {
color: {
$value: '{base.display.color.orange.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
yellow: {
color: {
$value: '{base.display.color.yellow.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
green: {
color: {
$value: '{base.display.color.green.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
teal: {
color: {
$value: '{base.display.color.teal.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
purple: {
color: {
$value: '{base.display.color.purple.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
pink: {
color: {
$value: '{base.display.color.pink.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
red: {
color: {
$value: '{base.display.color.red.5}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
gray: {
color: {
$value: '{base.display.color.gray.4}',
$type: 'color',
$extensions: {
'org.primer.figma': {
collection: 'mode',
mode: 'dark',
group: 'component',
scopes: ['bgColor'],
},
},
},
},
},
}