Skip to content

Commit

Permalink
using SD prefix
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukasoppermann
lukasoppermann committed Sep 16, 2024
1 parent fbb228e commit 8fbe30b
Show file tree
Hide file tree
Showing 50 changed files with 2,075 additions and 2,073 deletions.
55 changes: 47 additions & 8 deletions packages/design-tokens/scripts/build-tokens.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,35 +73,40 @@ const darkJson = require('../src/tokens/base/colors/dark')
//build most tokens
buildPrimitives({
source: [`tokens/functional/**/*.json`, `!tokens/functional/**/size-*.json`],
include: ['tokens/**/*.json'],
include: ['tokens/base/**/*.json'],
namespace,
outputPath,
})

// build base tokens
buildPrimitives({
source: [`tokens/base/**/*.json`],
namespace: undefined,
outputPath,
})

buildPrimitives({
source: [`tokens/functional/size/size-fine.json`, `tokens/base/size/size.json`], //build size fine
source: [`tokens/functional/size/size-fine.json`], //build size fine
include: ['tokens/base/size/size.json'],
namespace,
outputPath,
})

buildPrimitives({
source: [`tokens/functional/size/size-coarse.json`, `tokens/base/size/size.json`], //build size coarse
source: [`tokens/functional/size/size-coarse.json`], //build size coarse
include: ['tokens/base/size/size.json'],
namespace,
outputPath,
})

buildPrimitives({
source: [`tokens/base/size/size.json`, `tokens/functional/size/size-fine.json`], // build the special formats
source: [`tokens/functional/size/size-fine.json`], // build the special formats
include: ['tokens/base/size/size.json'],
namespace,
outputPath,
platforms: {
css: {
prefix: namespace,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
Expand All @@ -124,10 +129,13 @@ const darkJson = require('../src/tokens/base/colors/dark')
})

buildPrimitives({
source: [`tokens/base/size/size.json`, `tokens/functional/size/size-coarse.json`], // build the special formats
source: [`tokens/functional/size/size-coarse.json`], // build the special formats
include: ['tokens/base/size/size.json'],
namespace,
platforms: {
css: {
prefix: namespace,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
Expand All @@ -150,7 +158,6 @@ const darkJson = require('../src/tokens/base/colors/dark')
})

const filesForResponsiveTokens = [
`tokens/base/typography/typography.json`,
`tokens/functional/typography/typography-responsive.json`,
`tokens/functional/components/grid/grid.json`,
`tokens/functional/components/river/river.json`,
Expand All @@ -167,13 +174,17 @@ const darkJson = require('../src/tokens/base/colors/dark')

buildPrimitives({
source: [path], // build the special formats
include: [`tokens/base/typography/typography.json`],
namespace,
platforms: {
css: {
prefix: namespace,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
{
filter: token => token.isSource,
destination: `${sansExtension}.css`,
format: `css/responsive-media-query`,
options: {
Expand All @@ -191,6 +202,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
namespace,
platforms: {
css: {
// prefix: namespace,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
Expand All @@ -206,8 +218,30 @@ const darkJson = require('../src/tokens/base/colors/dark')
},
})

// temp fix until prefix is removed from all component files

buildPrimitives({
source: [`tokens/functional/colors/global.json`],
namespace,
platforms: {
css: {
prefix: namespace, // we still need to remove namespace form all component files
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
{
destination: `tokens/functional/colors/global-with-modes.css`,
format: `css/color-mode-attributes`,
options: {
outputReferences: false,
},
},
],
},
},
})

const filesForColorModes = [
`tokens/functional/colors/global.json`,
`tokens/functional/components/button/colors.js`,
`tokens/functional/components/accordion/colors.js`,
`tokens/functional/components/faq/colors.json`,
Expand Down Expand Up @@ -242,15 +276,20 @@ const darkJson = require('../src/tokens/base/colors/dark')
for (const path of filesForColorModes) {
const sansExtension = path.replace(/\.[^/.]+$/, '')

const prefix = path.split('.').pop() === 'json' ? namespace : undefined

buildPrimitives({
include: [`tokens/functional/colors/global.json`],
source: [path], // build the special formats
namespace,
platforms: {
css: {
prefix, // we still need to remove namespace form all component files with .js
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
files: [
{
filter: token => token.isSource,
destination: `${sansExtension}-with-modes.css`,
format: `css/color-mode-attributes`,
options: {
Expand Down
25 changes: 20 additions & 5 deletions packages/design-tokens/scripts/style-dictionary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ const {PrimerStyleDictionary: StyleDictionary} = require('@primer/primitives/dis

const {fileHeader} = StyleDictionary.formatHelpers

const namePathToKebabCasePrefix = require('../src/transforms/namePathToKebabCasePrefix')
const colorToModeObject = require('../src/transforms/colorToModeObject')

StyleDictionary.registerTransform(namePathToKebabCasePrefix)
StyleDictionary.registerTransform(colorToModeObject)
//-----
// functions to be extracted
// TODO: extract to a separate files
Expand All @@ -14,7 +19,7 @@ const {fileHeader} = StyleDictionary.formatHelpers

StyleDictionary.registerTransformGroup({
name: 'css',
transforms: ['name/pathToKebabCase', 'dimension/rem', 'typography/css'],
transforms: ['name/pathToKebabCasePrefix', 'dimension/rem', 'typography/css'],
})

// REGISTER A CUSTOM FORMAT
Expand Down Expand Up @@ -104,9 +109,11 @@ function buildPrimitives(
],
}

const getConfig = files => {
const getConfig = (files, prefix) => {
const defaultPlatformConfig = {
css: {
prefix,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/css/`,
transformGroup: 'css',
// map the array of token file paths to style dictionary output files
Expand All @@ -122,6 +129,8 @@ function buildPrimitives(
}),
},
cssViewport: {
prefix,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/css/tokens/functional/size/`,
transformGroup: 'css',
files: [
Expand All @@ -133,6 +142,8 @@ function buildPrimitives(
],
},
scss: {
prefix,
addPrefix: token => token.isSource,
buildPath: `${outputPath}/scss/`,
transformGroup: 'css',
// map the array of token file paths to style dictionary output files
Expand All @@ -148,6 +159,7 @@ function buildPrimitives(
}),
},
js: {
prefix,
buildPath: `${outputPath}/js/`,
transforms: ['name/pathToPascalCase', 'dimension/rem'],
// map the array of token file paths to style dictionary output files
Expand All @@ -160,18 +172,20 @@ function buildPrimitives(
}),
},
jsModule: {
prefix,
buildPath: `${outputPath}/js/module/`,
transforms: ['dimension/rem'],
transforms: ['dimension/rem', 'color/modeObject'],
// map the array of token file paths to style dictionary output files
files: files.map(filePath => {
return {
format: `javascript/module`,
format: `javascript/commonJs`,
destination: filePath.replace(`.json`, `.js`),
filter: token => token.filePath === filePath && token.isSource,
}
}),
},
tsTypes: {
prefix,
buildPath: `${outputPath}/ts/`,
transforms: ['dimension/rem'],
// map the array of token file paths to style dictionary output files
Expand All @@ -184,6 +198,7 @@ function buildPrimitives(
}),
},
ts: {
prefix,
buildPath: `${outputPath}/ts/`,
transforms: ['dimension/rem'],
// map the array of token file paths to style dictionary output files
Expand All @@ -210,7 +225,7 @@ function buildPrimitives(
//build all tokens
_StyleDictionary
.extend({
...getConfig(glob.sync([...source])),
...getConfig(glob.sync([...source]), namespace),
})
.buildAllPlatforms()
}
Expand Down
7 changes: 5 additions & 2 deletions packages/design-tokens/src/formats/typescript-module-declarations-v2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ const {fileHeader} = StyleDictionary.formatHelpers

const tsModuleDeclaration = {
name: 'typescript/module-declarations-v2',
formatter({dictionary, options, file}) {
formatter({dictionary, options, file, platform}) {
const {moduleName = `tokens`} = options
const {prefix} = platform || {}

const getType = value => {
switch (typeof value) {
Expand Down Expand Up @@ -41,9 +42,11 @@ const tsModuleDeclaration = {
return tree
}

const tokens = prefix ? {[prefix]: dictionary.tokens} : dictionary.tokens

const output = `${fileHeader({file})}
declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)}
declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(tokens), null, 2)}
export default ${moduleName};`

return output
Expand Down
Loading

0 comments on commit 8fbe30b

Please sign in to comment.