@healthnz/pattern-library-themes
v1.0.0
Published
Health NZ - Design Pattern Library. Generate multi platform design tokens using Style Dictionary
Downloads
74
Readme
Pattern library themes
@healthnz/pattern-library-themes
Configuration
Style Dictionary can output design tokens for multiple platforms from a single source.
Add your platform to config.js
.
For example, a web platform with a built in format and a custom format:
"platforms": {
"web": {
"transformGroup": "js",
"files": [
{
"format": "javascript/es6",
"destination": "theme.ts"
},
{
"format": "myCustomFormat",
"destination": "myCustomFormat.ts"
},
]
}
}
Custom formats
Create a file for your platform (e.g ios.js
) in scripts/formats
.
const registerFormats = (StyleDictionary) => {
StyleDictionary.registerFormat({
name: 'ios/swift-custom-formatter',
formatter: function ({ options }) {
return `
`;
}
});
// Register more formats here
};
export default registerFormats;
Add the formatter to the platform's files
array in config.js
:
"platforms": {
"files": [
{
"format": "ios/swift-custom-formatter",
"destination": "MyCustomFormat.swift"
}
]
}
Usage
Export tokens from Figma using the Design tokens plugin.
Place the exported
.json
file(s) intoinput/themes/[themeName]
.Commit the changes, and GitLab CI will:
- Run Style Dictionary transforms on the tokens.
- Publish a new release of the package to NPM.
Once published, the updated theme will be available in the next version.
JavaScript (Vanilla Extract)
import { myTheme } from '@healthnz/pattern-library-themes';
...
<ThemeProvider theme={myTheme}>
...
</ThemeProvider>