Skip to content
Snippets Groups Projects
Commit 6612eaee authored by Lukas Eipert's avatar Lukas Eipert
Browse files

feat: generate list of tailwind color definitions statically 

Similar to
!4176, this
makes it so that we can consume the tailwind tokens a little more
easily and have diffs if we change the logic.

Extracted from: !4156
parent 28b64bcb
No related branches found
No related tags found
1 merge request!4199feat: generate list of tailwind color definitions statically
Hide whitespace changes
Inline Side-by-side
bin/build_tokens.js
+ 86
− 0
View file @ 6612eaee
......@@ -4,6 +4,9 @@ const fs = require('fs');
const prettier = require('prettier');
const StyleDictionary = require('style-dictionary');
const merge = require('lodash/merge');
const { TailwindTokenFormatter } = require('./lib/tailwind_token_formatter');
const { fileHeader } = StyleDictionary.formatHelpers;
/**
* Design tokens
......@@ -84,6 +87,7 @@ StyleDictionary.registerTransformGroup({
/**
* File header
* https://amzn.github.io/style-dictionary/#/api?id=registerfileheader
*/
StyleDictionary.registerFileHeader({
name: 'withoutTimestamp',
......@@ -92,6 +96,73 @@ StyleDictionary.registerFileHeader({
},
});
/**
* Formats
* https://amzn.github.io/style-dictionary/#/api?id=registerformat
*/
StyleDictionary.registerFormat({
name: 'tailwind',
formatter: ({ dictionary, file }) => {
const f = new TailwindTokenFormatter(dictionary.tokens);
const COMPILED_TOKENS = dictionary.tokens;
const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
Object.entries(COMPILED_TOKENS[color]).forEach(([, token]) => {
acc[token.path.join('-')] = f.cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales]) => {
Object.entries(scales).forEach(([, token]) => {
acc[token.path.join('-')] = f.cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [, scales]) => {
Object.entries(scales).forEach(([, token]) => {
acc[token.path.join('-')] = f.cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
acc[scale] = f.cssCustomPropertyWithValue(token);
return acc;
}, {});
return `${fileHeader({ file })}
const baseColors = ${JSON.stringify(baseColors)};
const themeColors = ${JSON.stringify(themeColors)};
const dataVizColors = ${JSON.stringify(dataVizColors)};
const textColors = ${JSON.stringify(textColors)};
const colors = {
transparent: 'transparent',
white: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.white)}',
black: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.black)}',
...baseColors,
...themeColors,
...dataVizColors,
};
const textColor = {
...colors,
...textColors,
primary: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary)}',
secondary: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary)}',
tertiary: '${f.cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary)}',
};
module.exports = {
colors,
textColor,
}
`;
},
});
/**
* Replaces `$value` with `value` and `$description` with `comment` to make a
* W3C community group Design Tokens Format Module standard file compatible
......@@ -126,6 +197,7 @@ StyleDictionary.registerAction({
// ignore clean function
},
});
/**
* Creates style-dictionary config
* https://amzn.github.io/style-dictionary/#/config
......@@ -181,6 +253,20 @@ const getStyleDictionaryConfigDefault = (buildPath = 'dist/tokens') => {
},
],
},
tailwind: {
buildPath: `${buildPath}/tailwind/`,
transformGroup: 'js/default',
actions: ['prettier'],
options: {
fileHeader: 'withoutTimestamp',
},
files: [
{
destination: 'tokens.cjs',
format: 'tailwind',
},
],
},
scss: {
prefix: PREFIX,
buildPath: `${buildPath}/scss/`,
......
bin/lib/tailwind_token_formatter.js 0 → 100644
+ 74
− 0
View file @ 6612eaee
/**
* Returns if value is an alias to another token
* name e.g. {text.color.default}
*
* @param {string} value
* @returns {boolean}
*/
const isAliasValue = (value) => typeof value === 'string' && value.includes('{');
/**
* Returns if the original token value is an alias to another token or
* is an object which has strings that alias to another token
*
* @param {string|object} value token.original.value
* @returns {boolean}
*/
const hasAliases = (value) => {
if (typeof value === 'object') {
return Object.values(value).some((val) => isAliasValue(val) || hasAliases(val));
}
return isAliasValue(value);
};
class TailwindFormatter {
constructor(tokens) {
this.allTokens = tokens;
}
/**
* Original token object of alias from COMPILED_TOKENS
*
* @param {string|object} value token.original.value
* @returns {object} original token object
*/
getAliasedToken = (value) => {
const keys = value.slice(1, -1).split('.');
return keys.reduce((obj, key) => obj && obj[key], this.allTokens);
};
/**
* CSS custom property from alias token path.
* Include prefix if original token does not have `"prefix": false`
*
* @param {object} token
* @returns {string} CSS custom property with default value
*/
aliasToCSSCustomProperty = (token) => {
const { value } = token.original;
const aliasedToken =
typeof value === 'string' ? this.getAliasedToken(value) : this.getAliasedToken(value.default);
const prefix = aliasedToken.prefix !== false ? 'gl' : false;
return `var(--${[prefix, ...aliasedToken.path].filter(Boolean).join('-')}, ${token.value})`;
};
/**
* CSS custom property with default value
*
* @param {object} token
* @returns {string} CSS custom property with default value
*/
cssCustomPropertyWithValue = (token) => {
const path = [token.prefix !== false ? 'gl' : false, ...token.path].filter(Boolean);
const value = hasAliases(token.original.value)
? this.aliasToCSSCustomProperty(token)
: token.value;
return `var(--${path.join('-')}, ${value})`;
};
}
module.exports = {
TailwindTokenFormatter: TailwindFormatter,
hasAliases,
isAliasValue,
};
bin/lib/tailwind_token_formatter.spec.js 0 → 100644
+ 134
− 0
View file @ 6612eaee
import { isAliasValue, hasAliases, TailwindTokenFormatter } from './tailwind_token_formatter';
const tokens = {
color: {
constant: {
value: '#000',
prefix: false,
original: {
value: '#000',
},
path: ['color', 'constant'],
},
constantObject: {
value: '#000',
prefix: false,
original: {
value: {
default: '#000',
dark: '#fff',
},
},
path: ['color', 'constantObject'],
},
alias: {
value: '#000',
prefix: false,
original: {
value: '{color.constant}',
dark: '#fff',
},
path: ['color', 'alias'],
},
aliasObject: {
value: '#000',
prefix: false,
original: {
value: {
default: '{color.constant}',
},
},
path: ['color', 'aliasObject'],
},
prefixConstant: {
value: '#000',
original: {
value: '#000',
},
path: ['color', 'prefixConstant'],
},
prefixAlias: {
value: '#000',
original: {
value: '{color.prefixConstant}',
},
path: ['color', 'prefixAlias'],
},
},
};
describe('Tailwind Token Formatter', () => {
describe('isAliasValue', () => {
it('returns true when value is alias', () => {
expect(isAliasValue('{color.alias}')).toBe(true);
});
it('returns false when value is string', () => {
expect(isAliasValue('#fff')).toBe(false);
});
});
describe('hasAliases', () => {
it('returns true when original value is alias', () => {
expect(hasAliases(tokens.color.alias.original.value)).toBe(true);
});
it('returns false when original value is string', () => {
expect(hasAliases(tokens.color.constant.original.value)).toBe(false);
});
it('returns true when original value property contains alias in a nested object', () => {
expect(hasAliases(tokens.color.aliasObject.original.value)).toBe(true);
});
it('returns false when original value property contains strings in a nested object', () => {
expect(hasAliases(tokens.color.constantObject.original.value)).toBe(false);
});
});
describe('TailwindTokenFormatter', () => {
let f;
beforeEach(() => {
f = new TailwindTokenFormatter(tokens);
});
describe('#getAliasedToken', () => {
it('returns original object of alias', () => {
expect(f.getAliasedToken(tokens.color.alias.original.value)).toBe(tokens.color.constant);
});
});
describe('#aliasToCSSCustomProperty', () => {
it('returns CSS custom property of alias', () => {
expect(f.aliasToCSSCustomProperty(tokens.color.alias)).toBe('var(--color-constant, #000)');
});
});
describe('#cssCustomPropertyWithValue', () => {
it('returns CSS custom property with default value of #000', () => {
expect(f.cssCustomPropertyWithValue(tokens.color.constant)).toBe(
'var(--color-constant, #000)'
);
});
it('returns CSS custom property with default value of var(--color-constant)', () => {
expect(f.cssCustomPropertyWithValue(tokens.color.alias)).toBe(
'var(--color-alias, var(--color-constant, #000))'
);
});
it('returns CSS custom property with prefix and default value of #000', () => {
expect(f.cssCustomPropertyWithValue(tokens.color.prefixConstant)).toBe(
'var(--gl-color-prefixConstant, #000)'
);
});
it('returns CSS custom property with default value of var(--gl-color-constant)', () => {
expect(f.cssCustomPropertyWithValue(tokens.color.prefixAlias)).toBe(
'var(--gl-color-prefixAlias, var(--gl-color-prefixConstant, #000))'
);
});
});
});
});
src/tokens/build/tailwind/tokens.cjs 0 → 100644
+ 237
− 0
View file @ 6612eaee
/**
* Automatically generated
* Do not edit directly
*/
const baseColors = {
'blue-50': 'var(--blue-50, #e9f3fc)',
'blue-100': 'var(--blue-100, #cbe2f9)',
'blue-200': 'var(--blue-200, #9dc7f1)',
'blue-300': 'var(--blue-300, #63a6e9)',
'blue-400': 'var(--blue-400, #428fdc)',
'blue-500': 'var(--blue-500, #1f75cb)',
'blue-600': 'var(--blue-600, #1068bf)',
'blue-700': 'var(--blue-700, #0b5cad)',
'blue-800': 'var(--blue-800, #064787)',
'blue-900': 'var(--blue-900, #033464)',
'blue-950': 'var(--blue-950, #002850)',
'gray-10': 'var(--gray-10, #fbfafd)',
'gray-50': 'var(--gray-50, #ececef)',
'gray-100': 'var(--gray-100, #dcdcde)',
'gray-200': 'var(--gray-200, #bfbfc3)',
'gray-300': 'var(--gray-300, #a4a3a8)',
'gray-400': 'var(--gray-400, #89888d)',
'gray-500': 'var(--gray-500, #737278)',
'gray-600': 'var(--gray-600, #626168)',
'gray-700': 'var(--gray-700, #535158)',
'gray-800': 'var(--gray-800, #434248)',
'gray-900': 'var(--gray-900, #333238)',
'gray-950': 'var(--gray-950, #1f1e24)',
'green-50': 'var(--green-50, #ecf4ee)',
'green-100': 'var(--green-100, #c3e6cd)',
'green-200': 'var(--green-200, #91d4a8)',
'green-300': 'var(--green-300, #52b87a)',
'green-400': 'var(--green-400, #2da160)',
'green-500': 'var(--green-500, #108548)',
'green-600': 'var(--green-600, #217645)',
'green-700': 'var(--green-700, #24663b)',
'green-800': 'var(--green-800, #0d532a)',
'green-900': 'var(--green-900, #0a4020)',
'green-950': 'var(--green-950, #072b15)',
'orange-50': 'var(--orange-50, #fdf1dd)',
'orange-100': 'var(--orange-100, #f5d9a8)',
'orange-200': 'var(--orange-200, #e9be74)',
'orange-300': 'var(--orange-300, #d99530)',
'orange-400': 'var(--orange-400, #c17d10)',
'orange-500': 'var(--orange-500, #ab6100)',
'orange-600': 'var(--orange-600, #9e5400)',
'orange-700': 'var(--orange-700, #8f4700)',
'orange-800': 'var(--orange-800, #703800)',
'orange-900': 'var(--orange-900, #5c2900)',
'orange-950': 'var(--orange-950, #421f00)',
'purple-50': 'var(--purple-50, #f4f0ff)',
'purple-100': 'var(--purple-100, #e1d8f9)',
'purple-200': 'var(--purple-200, #cbbbf2)',
'purple-300': 'var(--purple-300, #ac93e6)',
'purple-400': 'var(--purple-400, #9475db)',
'purple-500': 'var(--purple-500, #7b58cf)',
'purple-600': 'var(--purple-600, #694cc0)',
'purple-700': 'var(--purple-700, #5943b6)',
'purple-800': 'var(--purple-800, #453894)',
'purple-900': 'var(--purple-900, #2f2a6b)',
'purple-950': 'var(--purple-950, #232150)',
'red-50': 'var(--red-50, #fcf1ef)',
'red-100': 'var(--red-100, #fdd4cd)',
'red-200': 'var(--red-200, #fcb5aa)',
'red-300': 'var(--red-300, #f57f6c)',
'red-400': 'var(--red-400, #ec5941)',
'red-500': 'var(--red-500, #dd2b0e)',
'red-600': 'var(--red-600, #c91c00)',
'red-700': 'var(--red-700, #ae1800)',
'red-800': 'var(--red-800, #8d1300)',
'red-900': 'var(--red-900, #660e00)',
'red-950': 'var(--red-950, #4d0a00)',
};
const themeColors = {
'theme-indigo-10': 'var(--theme-indigo-10, #f8f8ff)',
'theme-indigo-50': 'var(--theme-indigo-50, #f1f1ff)',
'theme-indigo-100': 'var(--theme-indigo-100, #dbdbf8)',
'theme-indigo-200': 'var(--theme-indigo-200, #c7c7f2)',
'theme-indigo-300': 'var(--theme-indigo-300, #a2a2e6)',
'theme-indigo-400': 'var(--theme-indigo-400, #8181d7)',
'theme-indigo-500': 'var(--theme-indigo-500, #6666c4)',
'theme-indigo-600': 'var(--theme-indigo-600, #5252b5)',
'theme-indigo-700': 'var(--theme-indigo-700, #41419f)',
'theme-indigo-800': 'var(--theme-indigo-800, #303083)',
'theme-indigo-900': 'var(--theme-indigo-900, #222261)',
'theme-indigo-950': 'var(--theme-indigo-950, #14143d)',
'theme-blue-10': 'var(--theme-blue-10, #e6ecf0)',
'theme-blue-50': 'var(--theme-blue-50, #cdd8e3)',
'theme-blue-100': 'var(--theme-blue-100, #b9cadc)',
'theme-blue-200': 'var(--theme-blue-200, #a6bdd5)',
'theme-blue-300': 'var(--theme-blue-300, #81a5c9)',
'theme-blue-400': 'var(--theme-blue-400, #628eb9)',
'theme-blue-500': 'var(--theme-blue-500, #4977a5)',
'theme-blue-600': 'var(--theme-blue-600, #346596)',
'theme-blue-700': 'var(--theme-blue-700, #235180)',
'theme-blue-800': 'var(--theme-blue-800, #153c63)',
'theme-blue-900': 'var(--theme-blue-900, #0b2640)',
'theme-blue-950': 'var(--theme-blue-950, #04101c)',
'theme-light-blue-10': 'var(--theme-light-blue-10, #eef3f7)',
'theme-light-blue-50': 'var(--theme-light-blue-50, #dde6ee)',
'theme-light-blue-100': 'var(--theme-light-blue-100, #c1d4e6)',
'theme-light-blue-200': 'var(--theme-light-blue-200, #a0bedc)',
'theme-light-blue-300': 'var(--theme-light-blue-300, #74a3d3)',
'theme-light-blue-400': 'var(--theme-light-blue-400, #4f8bc7)',
'theme-light-blue-500': 'var(--theme-light-blue-500, #3476b9)',
'theme-light-blue-600': 'var(--theme-light-blue-600, #2268ae)',
'theme-light-blue-700': 'var(--theme-light-blue-700, #145aa1)',
'theme-light-blue-800': 'var(--theme-light-blue-800, #0e4d8d)',
'theme-light-blue-900': 'var(--theme-light-blue-900, #0c4277)',
'theme-light-blue-950': 'var(--theme-light-blue-950, #0a3764)',
'theme-green-10': 'var(--theme-green-10, #eef4ef)',
'theme-green-50': 'var(--theme-green-50, #dde9de)',
'theme-green-100': 'var(--theme-green-100, #b1d6b5)',
'theme-green-200': 'var(--theme-green-200, #8cc497)',
'theme-green-300': 'var(--theme-green-300, #69af7d)',
'theme-green-400': 'var(--theme-green-400, #499767)',
'theme-green-500': 'var(--theme-green-500, #308258)',
'theme-green-600': 'var(--theme-green-600, #25744c)',
'theme-green-700': 'var(--theme-green-700, #1b653f)',
'theme-green-800': 'var(--theme-green-800, #155635)',
'theme-green-900': 'var(--theme-green-900, #0e4328)',
'theme-green-950': 'var(--theme-green-950, #052e19)',
'theme-red-10': 'var(--theme-red-10, #faf4f3)',
'theme-red-50': 'var(--theme-red-50, #f4e9e7)',
'theme-red-100': 'var(--theme-red-100, #ecd3d0)',
'theme-red-200': 'var(--theme-red-200, #e3bab5)',
'theme-red-300': 'var(--theme-red-300, #d59086)',
'theme-red-400': 'var(--theme-red-400, #c66e60)',
'theme-red-500': 'var(--theme-red-500, #ad4a3b)',
'theme-red-600': 'var(--theme-red-600, #a13322)',
'theme-red-700': 'var(--theme-red-700, #8f2110)',
'theme-red-800': 'var(--theme-red-800, #761405)',
'theme-red-900': 'var(--theme-red-900, #580d02)',
'theme-red-950': 'var(--theme-red-950, #380700)',
'theme-light-red-10': 'var(--theme-light-red-10, #fdf9f8)',
'theme-light-red-50': 'var(--theme-light-red-50, #faf2f1)',
'theme-light-red-100': 'var(--theme-light-red-100, #f6d9d5)',
'theme-light-red-200': 'var(--theme-light-red-200, #ebada2)',
'theme-light-red-300': 'var(--theme-light-red-300, #e07f6f)',
'theme-light-red-400': 'var(--theme-light-red-400, #d36250)',
'theme-light-red-500': 'var(--theme-light-red-500, #c24b38)',
'theme-light-red-600': 'var(--theme-light-red-600, #b53a26)',
'theme-light-red-700': 'var(--theme-light-red-700, #a02e1c)',
'theme-light-red-800': 'var(--theme-light-red-800, #8b2212)',
'theme-light-red-900': 'var(--theme-light-red-900, #751709)',
'theme-light-red-950': 'var(--theme-light-red-950, #5c1105)',
};
const dataVizColors = {
'data-viz-green-50': 'var(--data-viz-green-50, #ddfab7)',
'data-viz-green-100': 'var(--data-viz-green-100, #c6ed94)',
'data-viz-green-200': 'var(--data-viz-green-200, #b0d97b)',
'data-viz-green-300': 'var(--data-viz-green-300, #94c25e)',
'data-viz-green-400': 'var(--data-viz-green-400, #81ac41)',
'data-viz-green-500': 'var(--data-viz-green-500, #619025)',
'data-viz-green-600': 'var(--data-viz-green-600, #4e7f0e)',
'data-viz-green-700': 'var(--data-viz-green-700, #366800)',
'data-viz-green-800': 'var(--data-viz-green-800, #275600)',
'data-viz-green-900': 'var(--data-viz-green-900, #1a4500)',
'data-viz-green-950': 'var(--data-viz-green-950, #133a03)',
'data-viz-aqua-50': 'var(--data-viz-aqua-50, #b5fefd)',
'data-viz-aqua-100': 'var(--data-viz-aqua-100, #93f2ef)',
'data-viz-aqua-200': 'var(--data-viz-aqua-200, #5edee3)',
'data-viz-aqua-300': 'var(--data-viz-aqua-300, #32c5d2)',
'data-viz-aqua-400': 'var(--data-viz-aqua-400, #00acc4)',
'data-viz-aqua-500': 'var(--data-viz-aqua-500, #0090b1)',
'data-viz-aqua-600': 'var(--data-viz-aqua-600, #007b9b)',
'data-viz-aqua-700': 'var(--data-viz-aqua-700, #006381)',
'data-viz-aqua-800': 'var(--data-viz-aqua-800, #00516c)',
'data-viz-aqua-900': 'var(--data-viz-aqua-900, #004059)',
'data-viz-aqua-950': 'var(--data-viz-aqua-950, #00344b)',
'data-viz-blue-50': 'var(--data-viz-blue-50, #e9ebff)',
'data-viz-blue-100': 'var(--data-viz-blue-100, #d2dcff)',
'data-viz-blue-200': 'var(--data-viz-blue-200, #b7c6ff)',
'data-viz-blue-300': 'var(--data-viz-blue-300, #97acff)',
'data-viz-blue-400': 'var(--data-viz-blue-400, #7992f5)',
'data-viz-blue-500': 'var(--data-viz-blue-500, #617ae2)',
'data-viz-blue-600': 'var(--data-viz-blue-600, #4e65cd)',
'data-viz-blue-700': 'var(--data-viz-blue-700, #3f51ae)',
'data-viz-blue-800': 'var(--data-viz-blue-800, #374291)',
'data-viz-blue-900': 'var(--data-viz-blue-900, #303470)',
'data-viz-blue-950': 'var(--data-viz-blue-950, #2a2b59)',
'data-viz-magenta-50': 'var(--data-viz-magenta-50, #ffe3eb)',
'data-viz-magenta-100': 'var(--data-viz-magenta-100, #ffccdb)',
'data-viz-magenta-200': 'var(--data-viz-magenta-200, #fcacc5)',
'data-viz-magenta-300': 'var(--data-viz-magenta-300, #f88aaf)',
'data-viz-magenta-400': 'var(--data-viz-magenta-400, #e86e9a)',
'data-viz-magenta-500': 'var(--data-viz-magenta-500, #cf4d81)',
'data-viz-magenta-600': 'var(--data-viz-magenta-600, #b93d71)',
'data-viz-magenta-700': 'var(--data-viz-magenta-700, #9a2e5d)',
'data-viz-magenta-800': 'var(--data-viz-magenta-800, #7c214f)',
'data-viz-magenta-900': 'var(--data-viz-magenta-900, #661e3a)',
'data-viz-magenta-950': 'var(--data-viz-magenta-950, #541d31)',
'data-viz-orange-50': 'var(--data-viz-orange-50, #fae8d1)',
'data-viz-orange-100': 'var(--data-viz-orange-100, #f5d6b3)',
'data-viz-orange-200': 'var(--data-viz-orange-200, #eebd8c)',
'data-viz-orange-300': 'var(--data-viz-orange-300, #e99b60)',
'data-viz-orange-400': 'var(--data-viz-orange-400, #e07e41)',
'data-viz-orange-500': 'var(--data-viz-orange-500, #c95d2e)',
'data-viz-orange-600': 'var(--data-viz-orange-600, #b14f18)',
'data-viz-orange-700': 'var(--data-viz-orange-700, #92430a)',
'data-viz-orange-800': 'var(--data-viz-orange-800, #6f3500)',
'data-viz-orange-900': 'var(--data-viz-orange-900, #5e2f05)',
'data-viz-orange-950': 'var(--data-viz-orange-950, #4b2707)',
};
const textColors = {
default: 'var(--gl-text-color-default, #434248)',
subtle: 'var(--gl-text-color-subtle, #626168)',
strong: 'var(--gl-text-color-strong, #1f1e24)',
heading: 'var(--gl-text-color-heading, #1f1e24)',
link: 'var(--gl-text-color-link, #0b5cad)',
danger: 'var(--gl-text-color-danger, #c91c00)',
success: 'var(--gl-text-color-success, #217645)',
disabled: 'var(--gl-text-color-disabled, #89888d)',
};
const colors = {
transparent: 'transparent',
white: 'var(--white, #fff)',
black: 'var(--black, #000)',
...baseColors,
...themeColors,
...dataVizColors,
};
const textColor = {
...colors,
...textColors,
primary: 'var(--gl-text-primary, #333238)',
secondary: 'var(--gl-text-secondary, #737278)',
tertiary: 'var(--gl-text-tertiary, #89888d)',
};
module.exports = {
colors,
textColor,
};
tailwind.defaults.js
+ 1
− 49
View file @ 6612eaee
const COMPILED_TOKENS = require('./dist/tokens/json/tokens.json');
const cssCustomPropertyWithValue = (token) => {
const path = [token.prefix !== false ? 'gl' : false, ...token.path].filter(Boolean);
return `var(--${path.join('-')}, ${token.value})`;
};
const baseColors = ['blue', 'gray', 'green', 'orange', 'purple', 'red'].reduce((acc, color) => {
Object.entries(COMPILED_TOKENS[color]).forEach(([, token]) => {
acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const themeColors = Object.entries(COMPILED_TOKENS.theme).reduce((acc, [, scales]) => {
Object.entries(scales).forEach(([, token]) => {
acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const dataVizColors = Object.entries(COMPILED_TOKENS['data-viz']).reduce((acc, [, scales]) => {
Object.entries(scales).forEach(([, token]) => {
acc[token.path.join('-')] = cssCustomPropertyWithValue(token);
});
return acc;
}, {});
const textColors = Object.entries(COMPILED_TOKENS.text.color).reduce((acc, [scale, token]) => {
acc[scale] = cssCustomPropertyWithValue(token);
return acc;
}, {});
const colors = {
transparent: 'transparent',
white: cssCustomPropertyWithValue(COMPILED_TOKENS.white),
black: cssCustomPropertyWithValue(COMPILED_TOKENS.black),
...baseColors,
...themeColors,
...dataVizColors,
};
const textColor = {
...colors,
...textColors,
primary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.primary),
secondary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.secondary),
tertiary: cssCustomPropertyWithValue(COMPILED_TOKENS.text.tertiary),
};
const { colors, textColor } = require('./src/tokens/build/tailwind/tokens.cjs');
const gridSize = 0.5; // rem
const spacing = {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment