https://github.com/lukasoppermann/token-test
https://github.com/lukasoppermann/token-test
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/lukasoppermann/token-test
- Owner: lukasoppermann
- Created: 2020-10-03T20:18:45.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-05T13:31:36.000Z (almost 3 years ago)
- Last Synced: 2025-03-06T05:14:22.375Z (10 months ago)
- Language: Swift
- Size: 66.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Basic Style Dictionary
This example code is bare-bones to show you what this framework can do. If you have the style-dictionary module installed globally, you can `cd` into this directory and run:
```bash
style-dictionary build
```
You should see something like this output:
```
Copying starter files...
Source style dictionary starter files created!
Running `style-dictionary build` for the first time to generate build artifacts.
scss
✔︎ build/scss/_variables.scss
android
✔︎ build/android/font_dimens.xml
✔︎ build/android/colors.xml
ios
✔︎ build/ios/StyleDictionaryColor.h
✔︎ build/ios/StyleDictionaryColor.m
✔︎ build/ios/StyleDictionarySize.h
✔︎ build/ios/StyleDictionarySize.m
ios-swift
✔︎ build/ios-swift/StyleDictionary.swift
ios-swift-separate-enums
✔︎ build/ios-swift/StyleDictionaryColor.swift
✔︎ build/ios-swift/StyleDictionarySize.swift
```
Good for you! 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 like this:
```
├── README.md
├── config.json
├── properties/
│ ├── color/
│ ├── base.json
│ ├── font.json
│ ├── size/
│ ├── font.json
├── build/
│ ├── android/
│ ├── font_dimens.xml
│ ├── colors.xml
│ ├── scss/
│ ├── _variables.scss
│ ├── ios/
│ ├── StyleDictionaryColor.h
│ ├── StyleDictionaryColor.m
│ ├── StyleDictionarySize.h
│ ├── StyleDictionarySize.m
│ ├── ios-swift/
│ ├── StyleDictionary.swift
│ ├── StyleDictionaryColor.swift
│ ├── StyleDictionarySize.swift
```
If you open `config.json` you will see there are 3 platforms defined: scss, 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. The files built should look like these:
**Android**
```xml
12.00sp
16.00sp
32.00sp
16.00sp
#ffcccccc
#ff999999
#ff111111
#ffff0000
#ff00ff00
#ffff0000
#ff00ff00
#ffcccccc
```
**SCSS**
```scss
// variables.scss
$color-base-gray-light: #cccccc;
$color-base-gray-medium: #999999;
$color-base-gray-dark: #111111;
$color-base-red: #ff0000;
$color-base-green: #00ff00;
$color-font-base: #ff0000;
$color-font-secondary: #00ff00;
$color-font-tertiary: #cccccc;
$size-font-small: 0.75rem;
$size-font-medium: 1rem;
$size-font-large: 2rem;
$size-font-base: 1rem;
```
**iOS**
```objc
#import "StyleDictionaryColor.h"
@implementation StyleDictionaryColor
+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
return [[self values] objectAtIndex:colorEnum];
}
+ (NSArray *)values {
static NSArray* colorArray;
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
colorArray = @[
[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],
[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]
];
});
return colorArray;
}
@end
```
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.
1. The build system resolves references to other style properties. `{size.font.medium.value}` gets resolved properly.
1. The build system handles references to property values in other files as well as you can see in `properties/color/font.json`.
Now let's make a change and see how that affects things. Open up `properties/color/base.json` and change `"#111111"` to `"#000000"`. After you make that change, save the file and re-run the build command `style-dictionary build`. Open up the build files and take a look.
**Huzzah!**
Now go forth and create! Take a look at all the built-in [transforms](https://amzn.github.io/style-dictionary/#/transforms?id=pre-defined-transforms) and [formats](https://amzn.github.io/style-dictionary/#/formats?id=pre-defined-formats).