Skip to content
This repository has been archived by the owner on Oct 30, 2023. It is now read-only.

Commit

Permalink
feat: add theming
Browse files Browse the repository at this point in the history
  • Loading branch information
braddialpad committed May 11, 2023
1 parent d2c1f84 commit 204be4e
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 109 deletions.
10 changes: 7 additions & 3 deletions build-ios.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
#!/usr/bin/env node
const fs = require('fs');

const THEMES = require('./build').THEMES;

if (!fs.existsSync('dist_ios/Sources')) {
fs.mkdirSync('dist_ios/Sources')
}

fs.copyFile('dist/ios/tokens.swift', 'dist_ios/Sources/tokens.swift', (err) => {
if (err) throw err;
console.log('dialtone.swift was copied to dist_ios/Sources/tokens.swift');
THEMES.forEach(theme => {
fs.copyFile(`dist/ios/tokens-${theme}.swift`, `dist_ios/Sources/tokens-${theme}.swift`, (err) => {
if (err) throw err;
console.log(`dialtone.swift was copied to dist_ios/Sources/tokens-${theme}.swift`);
});
});
24 changes: 18 additions & 6 deletions build.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,20 @@ var Color = require('tinycolor2');

const fs = require('fs');

const StyleDictionary = require('style-dictionary').extend('config.js');
const StyleDictionary = require('style-dictionary');

const getStyleDictionaryConfig = require('./config.js').getStyleDictionaryConfig;

// Identifiers
const SPACING_IDENTIFIERS = ['spacing'];
const SIZE_IDENTIFIERS = ['fontSizes', 'fontSize', 'sizing', 'borderWidth', 'borderRadius', 'blur', 'spread', 'x', 'y'];
const LINE_HEIGHT_IDENTIFIERS = ['lineHeights', 'lineHeight'];
const FONT_SIZE_IDENTIFIERS = ['fontSizes', 'fontSize'];
const WEIGHT_IDENTIFIERS = ['fontWeights', 'fontWeight'];
const FONT_FAMILY_IDENTIFIERS = ['fontFamilies', 'fontFamily', 'typography']
const FONT_FAMILY_IDENTIFIERS = ['fontFamilies', 'fontFamily', 'typography'];

const THEMES = ['light', 'dark'];
exports.THEMES = THEMES;

// Values
const FALLBACK_FONTS = ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'];
Expand Down Expand Up @@ -344,7 +349,11 @@ StyleDictionary.registerAction({
},
});

StyleDictionary.buildAllPlatforms();

THEMES.forEach(theme => {
const sd = StyleDictionary.extend(getStyleDictionaryConfig(theme));
sd.buildAllPlatforms();
});

function insert(str, index, value) {
return str.substring(0, index) + value + str.substring(index);
Expand All @@ -360,9 +369,12 @@ function addImportIntoKotlinFile(path, importText) {
fs.writeFileSync(path, newContent);
}

const KOTLIN_FILE_PATH = './dist/android/java/tokens.kt';
addImportIntoKotlinFile(KOTLIN_FILE_PATH, 'import androidx.compose.ui.text.font.FontWeight')
addImportIntoKotlinFile(KOTLIN_FILE_PATH, 'import androidx.compose.ui.text.font.FontFamily')
THEMES.forEach(theme => {
const KOTLIN_FILE_PATH = `./dist/android/java/tokens-${theme}.kt`;
addImportIntoKotlinFile(KOTLIN_FILE_PATH, 'import androidx.compose.ui.text.font.FontWeight');
addImportIntoKotlinFile(KOTLIN_FILE_PATH, 'import androidx.compose.ui.text.font.FontFamily');
});


const DOC_OUTPUT_PATH = './dist/doc.json';

Expand Down
181 changes: 91 additions & 90 deletions config.js
Original file line number Diff line number Diff line change
@@ -1,96 +1,97 @@
module.exports = {
source: ['tokens/**/*.json'],
platforms: {
less: {
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/hex'],
prefix: 'dt',
buildPath: 'dist/less/',
files: [
{
destination: 'variables.less',
format: 'less/variables',
},
],
},
css: {
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'size/rem', 'color/css'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/css/',
files: [
{
destination: 'variables.css',
format: 'css/variables',
},
],
},
android_xml: {
transforms: ['attribute/cti', 'name/cti/snake', 'dt/android/color', 'size/remToSp', 'size/remToDp'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/android/res/values/',
files: [
{
destination: 'colors.xml',
format: 'android/resources',
resourceType: 'color',
filter: function(token) {
return ['color'].includes(token.type);
const getStyleDictionaryConfig = (theme) => {
return {
source: [`tokens/tokens-${theme}.json`],
platforms: {
less: {
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'color/hex'],
prefix: 'dt',
buildPath: 'dist/less/',
files: [
{
destination: `variables-${theme}.less`,
format: 'less/variables',
},
},
{
destination: 'dimens.xml',
format: 'android/resources',
resourceType: 'dimen',
filter: function(token) {
return ['sizing', 'borderRadius', 'fontSizes', 'borderWidth', 'spacing'].includes(token.type);
],
},
css: {
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'attribute/cti', 'name/cti/kebab', 'time/seconds', 'content/icon', 'size/rem', 'color/css'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/css/',
files: [
{
destination: `variables-${theme}.css`,
format: 'css/variables',
options: {
selector: `.dialtone-theme-${theme}`
}
},
},
],
},
android_compose: {
transforms: ['dt/android/compose/fonts/transformToStack', 'dt/android/fonts/weight', 'dt/android/lineHeight/percentToDecimal', 'dt/android/opacity/percentToFloat', 'dt/android/size/pxToDp', 'dt/android/size/pxToSp', 'dt/android/compose/color', 'dt/stringify', 'attribute/cti', 'name/cti/camel'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/android/java/',
files: [
{
destination: 'tokens.kt',
format: 'compose/object',
packageName: 'design.dialpad',
className: 'DialtoneTokens',
filter: function(token) {
return token.path[0] !== 'tokenSetOrder';
],
},
android_xml: {
transforms: ['attribute/cti', 'name/cti/snake', 'dt/android/color', 'size/remToSp', 'size/remToDp'],
actions: ['buildDocJson'],
prefix: `dt_${theme}`,
buildPath: 'dist/android/res/values/',
files: [
{
destination: `colors-${theme}.xml`,
format: 'android/resources',
resourceType: 'color',
filter: function(token) {
return ['color'].includes(token.type);
},
},
}
]
},
ios: {
transforms: ['dt/ios/fonts/transformToStack', 'attribute/cti', 'name/cti/camel', 'dt/ios/color', 'dt/ios/size/pxToCGFloat', 'dt/ios/lineHeight/percentToDecimal', 'dt/stringify'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/ios/',
files: [
{
destination: 'tokens.swift',
format: 'ios-swift/enum.swift',
className: 'DialtoneTokens',
filter: function(token) {
return token.path[0] !== 'tokenSetOrder';
{
destination: 'dimens.xml',
format: 'android/resources',
resourceType: 'dimen',
filter: function(token) {
return ['sizing', 'borderRadius', 'fontSizes', 'borderWidth', 'spacing'].includes(token.type);
},
},
},
],
},
json: {
prefix: 'dt',
buildPath: 'dist/',
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'name/cti/camel'],
files: [
{
destination: 'tokens.json',
format: 'json/flat',
},
],
],
},
android_compose: {
transforms: ['dt/android/compose/fonts/transformToStack', 'dt/android/fonts/weight', 'dt/android/lineHeight/percentToDecimal', 'dt/android/opacity/percentToFloat', 'dt/android/size/pxToDp', 'dt/android/size/pxToSp', 'dt/android/compose/color', 'dt/stringify', 'attribute/cti', 'name/cti/camel'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/android/java/',
files: [
{
destination: `tokens-${theme}.kt`,
format: 'compose/object',
packageName: 'design.dialpad',
className: `DialtoneTokens${theme.charAt(0).toUpperCase() + theme.slice(1)}`,
}
]
},
ios: {
transforms: ['dt/ios/fonts/transformToStack', 'attribute/cti', 'name/cti/camel', 'dt/ios/color', 'dt/ios/size/pxToCGFloat', 'dt/ios/lineHeight/percentToDecimal', 'dt/stringify'],
actions: ['buildDocJson'],
prefix: 'dt',
buildPath: 'dist/ios/',
files: [
{
destination: `tokens-${theme}.swift`,
format: 'ios-swift/enum.swift',
className: `DialtoneTokens${theme.charAt(0).toUpperCase() + theme.slice(1)}`,
},
],
},
json: {
prefix: 'dt',
buildPath: 'dist/',
transforms: ['dt/size/pxToRem', 'dt/fonts/transformToStack', 'name/cti/camel'],
files: [
{
destination: `tokens-${theme}.json`,
format: 'json/flat',
},
],
},
},
},
}
};

exports.getStyleDictionaryConfig = getStyleDictionaryConfig;
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,9 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npm run transform && ./build.js && cp ./AndroidManifest.xml dist/android && ./gradlew publishToMavenLocal -Pversion=$npm_package_version && ./build-ios.js",
"transform": "token-transformer base.json tokens/tokens.json base,semantic,components/badge,components/checkbox,components/icon,components/radio --expandTypography=true --expandShadow=true",
"build": "npm run transform && npm run transform-dark && ./build.js && cp ./AndroidManifest.xml dist/android && ./gradlew publishToMavenLocal -Pversion=$npm_package_version && ./build-ios.js",
"transform": "token-transformer base.json tokens/tokens-light.json base,semantic,components/checkbox,components/icon,components/radio,components/badge,components/avatar --expandTypography=true --expandShadow=true",
"transform-dark": "token-transformer base.json tokens/tokens-dark.json base,base/dark,semantic,semantic/dark,components/avatar,components/badge,components/checkbox,components/checkbox/dark,components/icon,components/radio,components/radio/dark --expandTypography=true --expandShadow=true",
"prepublishOnly": "npm run build",
"release": "semantic-release --no-ci --extends ./release-local.config.js"
},
Expand Down Expand Up @@ -34,6 +35,6 @@
"@semantic-release/git": "^10.0.1",
"maven": "^5.0.0",
"style-dictionary": "^3.8.0",
"token-transformer": "^0.0.32"
"token-transformer": "^0.0.31"
}
}

0 comments on commit 204be4e

Please sign in to comment.