Skip to content

Commit

Permalink
Update and refactor style-dictionary to v4.1 (#712)
Browse files Browse the repository at this point in the history
  • Loading branch information
@QuietNatu
QuietNatu authored Sep 3, 2024
1 parent 210560b commit 8d7a395
Show file tree
Hide file tree
Showing 11 changed files with 674 additions and 637 deletions.
2 changes: 1 addition & 1 deletion apps/rotom/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"i18next-resources-to-backend": "1.2.1",
"rxjs": "7.8.1",
"tslib": "2.7.0",
"zone.js": "0.15.0"
"zone.js": "0.14.10"
},
"devDependencies": {
"@angular-devkit/build-angular": "18.2.2",
Expand Down
7 changes: 3 additions & 4 deletions packages/styles/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,16 @@
}
},
"scripts": {
"build": "pnpm clean && node ./tokens/config.js",
"clean": "rimraf ./scss/tokens ./ts/tokens"
"build": "tsx ./tokens/config.ts"
},
"dependencies": {
"modern-normalize": "2.0.0"
},
"devDependencies": {
"@natu/tsconfig": "workspace:*",
"@types/node": "20.14.14",
"rimraf": "5.0.10",
"style-dictionary": "4.0.0-prerelease.15",
"style-dictionary": "4.1.0",
"tsx": "^4.19.0",
"typescript": "5.5.4",
"vite": "5.2.12"
}
Expand Down
111 changes: 0 additions & 111 deletions packages/styles/tokens/config.js
View file

This file was deleted.

101 changes: 101 additions & 0 deletions packages/styles/tokens/config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import StyleDictionary, { Config, TransformedToken } from 'style-dictionary';

const themes = ['ninjask', 'rotom', 'smeargle'];
const colorSchemes = ['light', 'dark'];

const colorSchemeExclusionRegex = `!(*.${colorSchemes.join('|*.')})`;

StyleDictionary.registerTransform({
name: 'time/miliseconds',
type: 'value',
filter: (token) => token.type === 'time',
transform: (token) => token.original.value.toString() + 'ms',
});

for (const theme of themes) {
for (let index = 0; index < colorSchemes.length; index++) {
const colorScheme = colorSchemes[index]!;
const isMainColorScheme = index === 0;

const selector = isMainColorScheme
? `:root[data-theme='${theme}']`
: `:root[data-theme='${theme}'][data-color-scheme='${colorScheme}']`;

const filter = isMainColorScheme
? undefined
: (token: TransformedToken) => token.filePath.endsWith(`.${colorScheme}.json5`);

const tokenConfig: Partial<Config> = isMainColorScheme
? {
source: [
`tokens/default/**/${colorSchemeExclusionRegex}.json5`,
`tokens/themes/${theme}/**/${colorSchemeExclusionRegex}.json5`,
],
}
: {
include: [
`tokens/default/**/${colorSchemeExclusionRegex}.json5`,
`tokens/themes/${theme}/**/${colorSchemeExclusionRegex}.json5`,
],
source: [
`tokens/default/**/*.${colorScheme}.json5`,
`tokens/themes/${theme}/**/*.${colorScheme}.json5`,
],
};

const config: Config = {
...tokenConfig,
platforms: {
scss: {
transforms: ['name/kebab', 'time/miliseconds', 'size/pxToRem'],
buildPath: `scss/tokens/${theme}/`,
prefix: 'natu',

files: [
{
destination: `_${colorScheme}.scss`,
format: `css/variables`,
filter,
options: {
selector,
outputReferences: true,
},
},
],
},
},
};

const styleDictionary = new StyleDictionary(config);
await styleDictionary.cleanAllPlatforms();
await styleDictionary.buildAllPlatforms();
}
}

const relevantTsCategories = new Set(['time']);
const tsConfig: Config = {
source: [`tokens/default/**/${colorSchemeExclusionRegex}.json5`],
platforms: {
ts: {
transforms: ['name/constant'],
buildPath: `ts/tokens/`,
prefix: 'natu',
files: [
{
destination: 'index.js',
format: 'javascript/es6',
filter: (token) => token.type && relevantTsCategories.has(token.type),
},
{
destination: 'index.d.ts',
format: 'typescript/es6-declarations',
filter: (token) => token.type && relevantTsCategories.has(token.type),
},
],
},
},
};

const styleDictionary = new StyleDictionary(tsConfig);
await styleDictionary.cleanAllPlatforms();
await styleDictionary.buildAllPlatforms();
80 changes: 40 additions & 40 deletions packages/styles/tokens/default/base/color.dark.json5
View file
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
{
color: {
font: {
base: { value: '{color.grey.100}' },
disabled: { value: '{color.grey.100-alpha-30}' },
invert: { value: '{color.grey.900}' },
neutral: { value: '{color.grey.300}' },
accent: { value: '{color.theme.primary.300}' },
critical: { value: '{color.red.300}' },
base: { value: '{color.grey.100}', type: 'color' },
disabled: { value: '{color.grey.100-alpha-30}', type: 'color' },
invert: { value: '{color.grey.900}', type: 'color' },
neutral: { value: '{color.grey.300}', type: 'color' },
accent: { value: '{color.theme.primary.300}', type: 'color' },
critical: { value: '{color.red.300}', type: 'color' },
},

surface: {
base: { value: '{color.grey.900}' },
primary: { value: '{color.grey.950}' },
invert: { value: '{color.grey.100}' },
neutral: { value: '{color.grey.800}' },
'neutral-active': { value: '{color.grey.700}' },
'neutral-hover': { value: '{color.grey.700}' },
'neutral-strong': { value: '{color.grey.300}' },
'neutral-strong-active': { value: '{color.grey.200}' },
'neutral-strong-hover': { value: '{color.grey.200}' },
accent: { value: '{color.theme.primary.800}' },
'accent-active': { value: '{color.theme.primary.700}' },
'accent-hover': { value: '{color.theme.primary.700}' },
'accent-strong': { value: '{color.theme.primary.300}' },
'accent-strong-active': { value: '{color.theme.primary.200}' },
'accent-strong-hover': { value: '{color.theme.primary.200}' },
critical: { value: '{color.red.200}' },
'critical-active': { value: '{color.red.700}' },
'critical-hover': { value: '{color.red.700}' },
'critical-strong': { value: '{color.red.300}' },
'critical-strong-active': { value: '{color.red.200}' },
'critical-strong-hover': { value: '{color.red.200}' },
base: { value: '{color.grey.900}', type: 'color' },
primary: { value: '{color.grey.950}', type: 'color' },
invert: { value: '{color.grey.100}', type: 'color' },
neutral: { value: '{color.grey.800}', type: 'color' },
'neutral-active': { value: '{color.grey.700}', type: 'color' },
'neutral-hover': { value: '{color.grey.700}', type: 'color' },
'neutral-strong': { value: '{color.grey.300}', type: 'color' },
'neutral-strong-active': { value: '{color.grey.200}', type: 'color' },
'neutral-strong-hover': { value: '{color.grey.200}', type: 'color' },
accent: { value: '{color.theme.primary.800}', type: 'color' },
'accent-active': { value: '{color.theme.primary.700}', type: 'color' },
'accent-hover': { value: '{color.theme.primary.700}', type: 'color' },
'accent-strong': { value: '{color.theme.primary.300}', type: 'color' },
'accent-strong-active': { value: '{color.theme.primary.200}', type: 'color' },
'accent-strong-hover': { value: '{color.theme.primary.200}', type: 'color' },
critical: { value: '{color.red.200}', type: 'color' },
'critical-active': { value: '{color.red.700}', type: 'color' },
'critical-hover': { value: '{color.red.700}', type: 'color' },
'critical-strong': { value: '{color.red.300}', type: 'color' },
'critical-strong-active': { value: '{color.red.200}', type: 'color' },
'critical-strong-hover': { value: '{color.red.200}', type: 'color' },
},

border: {
base: { value: '{color.grey.800}' },
invert: { value: '{color.white}' },
neutral: { value: '{color.grey.700}' },
accent: { value: '{color.theme.primary.700}' },
'accent-strong': { value: '{color.theme.primary.200}' },
'accent-strong-active': { value: '{color.theme.primary.100}' },
'accent-strong-hover': { value: '{color.theme.primary.100}' },
critical: { value: '{color.red.700}' },
'critical-strong': { value: '{color.red.200}' },
'critical-strong-active': { value: '{color.red.100}' },
'critical-strong-hover': { value: '{color.red.100}' },
base: { value: '{color.grey.800}', type: 'color' },
invert: { value: '{color.white}', type: 'color' },
neutral: { value: '{color.grey.700}', type: 'color' },
accent: { value: '{color.theme.primary.700}', type: 'color' },
'accent-strong': { value: '{color.theme.primary.200}', type: 'color' },
'accent-strong-active': { value: '{color.theme.primary.100}', type: 'color' },
'accent-strong-hover': { value: '{color.theme.primary.100}', type: 'color' },
critical: { value: '{color.red.700}', type: 'color' },
'critical-strong': { value: '{color.red.200}', type: 'color' },
'critical-strong-active': { value: '{color.red.100}', type: 'color' },
'critical-strong-hover': { value: '{color.red.100}', type: 'color' },
},

outline: {
accent: { value: '{color.theme.primary.400-alpha-30}' },
critical: { value: '{color.red.400-alpha-30}' },
accent: { value: '{color.theme.primary.400-alpha-30}', type: 'color' },
critical: { value: '{color.red.400-alpha-30}', type: 'color' },
},
},
}
Loading

0 comments on commit 8d7a395

Please sign in to comment.