datacom-design-tokens v0.0.2
Datacom Design Tokens
Getting Started š
This contains the all the style tokens for the Datacom brand. The tokens can be built for 3 different platforms at the moment - web, android and ios. The tokens are stored as JSON files under src/
. The brand colors are under src/color
and applies to all platforms. However things like fonts and typography can be specific to platforms and for web these can be found in src/web-platform
. To create new tokens specific to ios or android please create src/ios-platform
or src/android-platform
.
Warning ā
Please be careful when changing tokens shared between platforms as other projects and teams at Datacom might be using these.
Making Changes ā
To make changes go into the JSON files inside src/
. The JSON files are built using Amazon Style Dictionary, go to their site for more information on syntax and functionality.
If the file format you need is not being built at the moment you can edit the build.js
file to add the format. For more information on this and which format is supported head to Amazon Style Dictionary or this Medium article or the bottom of this page.
To build the styles you can run:
npm i
npm run build
You should see something like this output:
Build started...
==============================================
Processing: [web]
css
āļø build/css/_variables.css
less
āļø build/less/_variables.less
scss
āļø build/scss/_variables.scss
End processing
==============================================
Processing: [ios]
ios
āļø build/ios/StyleDictionaryColor.h
āļø build/ios/StyleDictionaryColor.m
ios-swift
āļø build/ios-swift/StyleDictionary.swift
ios-swift-separate-enums
āļø build/ios-swift/StyleDictionaryColor.swift
End processing
==============================================
Processing: [android]
android
āļø build/android/colors.xml
End processing
==============================================
Pat yourself on the back, you have now built your first style dictionary! Moving on, take a look at what we have built. This should have created a build directory and it should look similar to this:
āāā README.md
āāā build.js
āāā src/
ā āāā color/
ā āāā color.json
ā āāā font.json
ā āāā web-platform/
āāā build/
ā āāā android/
ā āāā colors.xml
ā āāā scss/
ā āāā _variables.scss
ā āāā ios/
ā āāā StyleDictionaryColor.h
ā āāā StyleDictionaryColor.m
ā āāā ios-swift/
ā āāā StyleDictionary.swift
ā āāā StyleDictionaryColor.swift
Building for Other Platforms š¤
If you open build.js
you will see there are 3 platforms defined: web (scss, less, css), android, ios. Each platform has a transformGroup, buildPath, and files. The buildPath and files of the platform should match up to the files what were built.
Pretty nifty! This shows a few things happening:
1. The build system does a deep merge of all the property JSON files defined in the source
attribute of config.json
. This allows you to split up the property JSON files however you want. There are 2 JSON files with color
as the top level key, but they get merged properly.
2. The build system resolves references to other style properties. {size.font.medium.value}
gets resolved properly.
3. The build system handles references to property values in other files as well as you can see in properties/color/font.json
.
Huzzah! š
Now go forth and create! Take a look at all the built-in transforms and formats.
Useful Links
Google Font Montserrat - https://fonts.google.com/specimen/Montserrat