Skip to content

Commit

Permalink
working on preprocessor
Browse files Browse the repository at this point in the history
  • Loading branch information
lukasoppermann committed Dec 5, 2024
1 parent 6ca55d3 commit bedde36
Show file tree
Hide file tree
Showing 23 changed files with 333 additions and 37 deletions.
5 changes: 5 additions & 0 deletions .changeset/great-insects-act.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/primitives': minor
---

Adding new themeOverride preprocessor
8 changes: 4 additions & 4 deletions contributor-docs/adrs/adr-004-token-overrides.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@

## Status

| Stage | Status |
| -------- | ----------- |
| Approved ||
| Adopted | 🚧 |
| Stage | Status |
| -------- | ------ |
| Approved | |
| Adopted | 🚧 |

## Context

Expand Down
37 changes: 23 additions & 14 deletions scripts/buildFigma.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,12 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
const baseScales = [
{
name: 'light',
theme: 'light',
source: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
},
{
name: 'light-high-constrast',
theme: 'light-high-constrast',
source: [
`src/tokens/base/color/light/light.json5`,
`src/tokens/base/color/light/display-light.json5`,
Expand All @@ -24,9 +26,11 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
},
{
name: 'dark',
theme: 'dark',
source: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
theme: 'dark-high-constrast',
name: 'dark-high-constrast',
source: [
`src/tokens/base/color/dark/dark.json5`,
Expand All @@ -35,6 +39,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
],
},
{
theme: 'dark-dimmed',
name: 'dark-dimmed',
source: [
`src/tokens/base/color/dark/dark.json5`,
Expand Down Expand Up @@ -62,7 +67,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
include,
platforms: {
figma: figma(`figma/themes/${filename}.json`, buildOptions.prefix, buildOptions.buildPath, {
mode: filename.replaceAll('-', ' '),
theme: filename.replaceAll('-', ' '),
}),
},
})
Expand Down Expand Up @@ -118,7 +123,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/light/primitives-light.json5`,
`src/tokens/functional/color/light/patterns-light.json5`,
],
mode: 'light',
theme: 'light',
},
{
name: 'light-high-contrast',
Expand All @@ -130,7 +135,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/light/primitives-light.json5`,
`src/tokens/functional/color/light/patterns-light.json5`,
],
mode: 'light high contrast',
theme: 'light high contrast',
},
{
name: 'light-colorblind',
Expand All @@ -142,7 +147,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/light/primitives-light.json5`,
`src/tokens/functional/color/light/patterns-light.json5`,
],
mode: 'light colorblind',
theme: 'light colorblind',
},
{
name: 'light-tritanopia',
Expand All @@ -154,7 +159,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/light/primitives-light.json5`,
`src/tokens/functional/color/light/patterns-light.json5`,
],
mode: 'light tritanopia',
theme: 'light tritanopia',
},
{
name: 'dark',
Expand All @@ -165,7 +170,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
mode: 'dark',
theme: 'dark',
},
{
name: 'dark-high-contrast',
Expand All @@ -177,7 +182,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
mode: 'dark high contrast',
theme: 'dark high contrast',
},
{
name: 'dark-dimmed',
Expand All @@ -189,7 +194,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
mode: 'dark dimmed',
theme: 'dark dimmed',
},
{
name: 'dark-colorblind',
Expand All @@ -201,7 +206,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
mode: 'dark colorblind',
theme: 'dark colorblind',
},
{
name: 'dark-tritanopia',
Expand All @@ -213,16 +218,16 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
`src/tokens/functional/color/dark/primitives-dark.json5`,
`src/tokens/functional/color/dark/patterns-dark.json5`,
],
mode: 'dark tritanopia',
theme: 'dark tritanopia',
},
]
//
for (const {name, source, include, mode} of shadowFiles) {
for (const {name, source, include, theme} of shadowFiles) {
const extended = await PrimerStyleDictionary.extend({
source,
include,
platforms: {
figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {mode}),
figma: figma(`figma/shadows/${name}.json`, buildOptions.prefix, buildOptions.buildPath, {theme}),
},
})

Expand All @@ -247,6 +252,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
group: string
name: string
}> = files.flatMap(filePath => JSON.parse(fs.readFileSync(filePath, 'utf8')))

// create a list of groups with collections and modes
const collections: Record<
string,
Expand All @@ -256,7 +262,10 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
}
> = {}

for (const {collection, mode, group} of tokens) {
for (const {collection, mode, group, name} of tokens) {

Check failure on line 265 in scripts/buildFigma.ts

View workflow job for this annotation

GitHub Actions / Test & Lint

'name' is assigned a value but never used
if (!collection) {
continue
}
if (!(collection in collections)) {
collections[collection] = {
modes: [],
Expand All @@ -271,7 +280,7 @@ const buildFigma = async (buildOptions: ConfigGeneratorOptions): Promise<void> =
collections[collection].groups.push(group)
}
}

console.log('collections', collections)

Check failure on line 283 in scripts/buildFigma.ts

View workflow job for this annotation

GitHub Actions / Test & Lint

Unexpected console statement
// define the order of the modes
// we inverse it to deal with the -1 of the indexOf if item is not found in the array: basically anything that is not in the list should come last
const modeOrder = [
Expand Down
17 changes: 12 additions & 5 deletions scripts/buildTokens.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,16 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
},
platforms: Object.fromEntries(
Object.entries({
css: css(`css/${filename}.css`, options.prefix, options.buildPath, {themed: options.themed}),
docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath),
styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath),
css: css(`css/${filename}.css`, options.prefix, options.buildPath, {
themed: options.themed,
theme: options.theme,
}),
docJson: docJson(`docs/${filename}.json`, options.prefix, options.buildPath, {
theme: options.theme,
}),
styleLint: styleLint(`styleLint/${filename}.json`, options.prefix, options.buildPath, {
theme: options.theme,
}),
fallbacks: fallbacks(`fallbacks/${filename}.json`, options.prefix, options.buildPath),
...platforms,
}).filter((entry: [string, unknown]) => entry[1] !== undefined),
Expand Down Expand Up @@ -71,14 +78,14 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
* Colors, shadows & borders
* ----------------------------------- */
try {
for (const {filename, source, include} of themes) {
for (const {filename, source, include, theme} of themes) {
// build functional scales
const extendedSD = await PrimerStyleDictionary.extend(
getStyleDictionaryConfig(
`functional/themes/${filename}`,
source,
include,
{...buildOptions, themed: true},
{...buildOptions, themed: true, theme},
// disable fallbacks for themes
{fallbacks: undefined},
),
Expand Down
23 changes: 21 additions & 2 deletions scripts/themes.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,40 +3,48 @@ import type {TokenBuildInput} from '../src/types/tokenBuildInput.js'
export const themes: TokenBuildInput[] = [
{
filename: 'light',
theme: 'light',
source: [
`src/tokens/functional/color/light/*.json5`,
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/light.json5`,
`src/tokens/functional/color/components/*.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
},
{
filename: 'light-tritanopia',
theme: 'light-tritanopia',
source: [
`src/tokens/functional/color/light/*.json5`,
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/light.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/light/overrides/light.tritanopia.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
},
{
filename: 'light-colorblind',
theme: 'light-protanopia-deuteranopia',
source: [
`src/tokens/functional/color/light/*.json5`,
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/light.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5`,
],
include: [`src/tokens/base/color/light/light.json5`, `src/tokens/base/color/light/display-light.json5`],
},
{
filename: 'light-high-contrast',
theme: 'light-high-contrast',
source: [
`src/tokens/functional/color/light/*.json5`,
`src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
`src/tokens/functional/shadow/light.json5`,
`src/tokens/functional/border/light.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/light/overrides/light.high-contrast.json5`,
],
include: [
`src/tokens/base/color/light/light.json5`,
Expand All @@ -46,54 +54,65 @@ export const themes: TokenBuildInput[] = [
},
{
filename: 'dark',
theme: 'dark',
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/components/*.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-dimmed',
theme: 'dark-dimmed',
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.dimmed.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/components/*.json5`,
],
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/components/*.json5`,
],
},
{
filename: 'dark-tritanopia',
theme: 'dark-tritanopia',
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.tritanopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-colorblind',
theme: 'dark-protanopia-deuteranopia',
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5`,
],
include: [`src/tokens/base/color/dark/dark.json5`, `src/tokens/base/color/dark/display-dark.json5`],
},
{
filename: 'dark-high-contrast',
theme: 'dark-high-contrast',
source: [
`src/tokens/functional/color/dark/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
`src/tokens/functional/shadow/dark.json5`,
`src/tokens/functional/border/dark.json5`,
`src/tokens/functional/color/components/*.json5`,
`src/tokens/functional/color/dark/overrides/dark.high-contrast.json5`,
],
include: [
`src/tokens/base/color/dark/dark.json5`,
Expand Down
3 changes: 0 additions & 3 deletions src/filters/isColor.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,5 @@ import type {TransformedToken} from 'style-dictionary/types'
*/
export const isColor = (token: TransformedToken): boolean => {
const typeValue = token.$type ?? token.type
// if (token.path.join('-') === 'control-transparent-bgColor-selected') {
// console.log(typeValue === 'color', token)
// }
return typeValue === 'color'
}
4 changes: 4 additions & 0 deletions src/platforms/css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
return {
prefix,
buildPath,
preprocessors: ['themeOverrides'],
transforms: [
'name/pathToKebabCase',
'color/hex',
Expand All @@ -39,6 +40,9 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
],
options: {
basePxFontSize: 16,
themeOverrides: {
theme: options?.theme,
},
},
files: [
{
Expand Down
6 changes: 5 additions & 1 deletion src/platforms/docJson.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ import type {PlatformInitializer} from '../types/platformInitializer.js'
import {isSource} from '../filters/index.js'
import type {PlatformConfig} from 'style-dictionary/types'

export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): PlatformConfig => ({
export const docJson: PlatformInitializer = (outputFile, prefix, buildPath, options): PlatformConfig => ({
prefix,
buildPath,
preprocessors: ['themeOverrides'],
transforms: [
'name/pathToKebabCase',
'color/hex',
Expand All @@ -23,6 +24,9 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): Pla
$type: 'type',
$description: 'description',
},
themeOverrides: {
theme: options?.theme,
},
},
files: [
{
Expand Down
Loading

0 comments on commit bedde36

Please sign in to comment.