Skip to content

Commit 708ba25

Browse files
wycatswycats
authored
Merge pull request #10 from starbeamjs/twoslash
2 parents c29a072 + 9dc6d50 commit 708ba25

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

86 files changed

+3471
-1101
lines changed

‎.taplo.toml

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,5 +91,6 @@
9191
"fileMatch": ["src/api/**/$api/*.json", "src/api/**/$api/*.jsonc"],
9292
"url": "./packages/api-docs/dist/api.schema.json"
9393
}
94-
]
94+
],
95+
"files.trimTrailingWhitespace": false
9596
}

‎README.md

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
# Basic Style Dictionary
2+
3+
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:
4+
```bash
5+
style-dictionary build
6+
```
7+
8+
You should see something like this output:
9+
```
10+
Copying starter files...
11+
12+
Source style dictionary starter files created!
13+
14+
Running `style-dictionary build` for the first time to generate build artifacts.
15+
16+
17+
scss
18+
✔︎ build/scss/_variables.scss
19+
20+
android
21+
✔︎ build/android/font_dimens.xml
22+
✔︎ build/android/colors.xml
23+
24+
compose
25+
✔︎ build/compose/StyleDictionaryColor.kt
26+
✔︎ build/compose/StyleDictionarySize.kt
27+
28+
ios
29+
✔︎ build/ios/StyleDictionaryColor.h
30+
✔︎ build/ios/StyleDictionaryColor.m
31+
✔︎ build/ios/StyleDictionarySize.h
32+
✔︎ build/ios/StyleDictionarySize.m
33+
34+
ios-swift
35+
✔︎ build/ios-swift/StyleDictionary.swift
36+
37+
ios-swift-separate-enums
38+
✔︎ build/ios-swift/StyleDictionaryColor.swift
39+
✔︎ build/ios-swift/StyleDictionarySize.swift
40+
```
41+
42+
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:
43+
```
44+
├── README.md
45+
├── config.json
46+
├── tokens/
47+
│ ├── color/
48+
│ ├── base.json
49+
│ ├── font.json
50+
│ ├── size/
51+
│ ├── font.json
52+
├── build/
53+
│ ├── android/
54+
│ ├── font_dimens.xml
55+
│ ├── colors.xml
56+
│ ├── compose/
57+
│ ├── StyleDictionaryColor.kt
58+
│ ├── StyleDictionarySize.kt
59+
│ ├── scss/
60+
│ ├── _variables.scss
61+
│ ├── ios/
62+
│ ├── StyleDictionaryColor.h
63+
│ ├── StyleDictionaryColor.m
64+
│ ├── StyleDictionarySize.h
65+
│ ├── StyleDictionarySize.m
66+
│ ├── ios-swift/
67+
│ ├── StyleDictionary.swift
68+
│ ├── StyleDictionaryColor.swift
69+
│ ├── StyleDictionarySize.swift
70+
```
71+
72+
If you open `config.json` you will see there are 5 platforms defined: scss, android, compose, ios, and ios-swift. 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:
73+
74+
**Android**
75+
```xml
76+
<!-- font_dimens.xml -->
77+
<resources>
78+
<dimen name="size_font_small">12.00sp</dimen>
79+
<dimen name="size_font_medium">16.00sp</dimen>
80+
<dimen name="size_font_large">32.00sp</dimen>
81+
<dimen name="size_font_base">16.00sp</dimen>
82+
</resources>
83+
84+
<!-- colors.xml -->
85+
<resources>
86+
<color name="color_base_gray_light">#ffcccccc</color>
87+
<color name="color_base_gray_medium">#ff999999</color>
88+
<color name="color_base_gray_dark">#ff111111</color>
89+
<color name="color_base_red">#ffff0000</color>
90+
<color name="color_base_green">#ff00ff00</color>
91+
<color name="color_font_base">#ffff0000</color>
92+
<color name="color_font_secondary">#ff00ff00</color>
93+
<color name="color_font_tertiary">#ffcccccc</color>
94+
</resources>
95+
```
96+
97+
**Compose**
98+
```kotlin
99+
object StyleDictionaryColor {
100+
val colorBaseGrayDark = Color(0xff111111)
101+
val colorBaseGrayLight = Color(0xffcccccc)
102+
val colorBaseGrayMedium = Color(0xff999999)
103+
val colorBaseGreen = Color(0xff00ff00)
104+
val colorBaseRed = Color(0xffff0000)
105+
val colorFontBase = Color(0xffff0000)
106+
val colorFontSecondary = Color(0xff00ff00)
107+
val colorFontTertiary = Color(0xffcccccc)
108+
}
109+
110+
object StyleDictionarySize {
111+
/** the base size of the font */
112+
val sizeFontBase = 16.00.sp
113+
/** the large size of the font */
114+
val sizeFontLarge = 32.00.sp
115+
/** the medium size of the font */
116+
val sizeFontMedium = 16.00.sp
117+
/** the small size of the font */
118+
val sizeFontSmall = 12.00.sp
119+
}
120+
```
121+
122+
**SCSS**
123+
```scss
124+
// variables.scss
125+
$color-base-gray-light: #cccccc;
126+
$color-base-gray-medium: #999999;
127+
$color-base-gray-dark: #111111;
128+
$color-base-red: #ff0000;
129+
$color-base-green: #00ff00;
130+
$color-font-base: #ff0000;
131+
$color-font-secondary: #00ff00;
132+
$color-font-tertiary: #cccccc;
133+
$size-font-small: 0.75rem;
134+
$size-font-medium: 1rem;
135+
$size-font-large: 2rem;
136+
$size-font-base: 1rem;
137+
```
138+
139+
**iOS**
140+
```objc
141+
#import "StyleDictionaryColor.h"
142+
143+
@implementation StyleDictionaryColor
144+
145+
+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{
146+
return [[self values] objectAtIndex:colorEnum];
147+
}
148+
149+
+ (NSArray *)values {
150+
static NSArray* colorArray;
151+
static dispatch_once_t onceToken;
152+
153+
dispatch_once(&onceToken, ^{
154+
colorArray = @[
155+
[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],
156+
[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],
157+
[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],
158+
[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
159+
[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
160+
[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],
161+
[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],
162+
[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]
163+
];
164+
});
165+
166+
return colorArray;
167+
}
168+
169+
@end
170+
```
171+
172+
Pretty nifty! This shows a few things happening:
173+
1. The build system does a deep merge of all the token JSON files defined in the `source` attribute of `config.json`. This allows you to split up the token JSON files however you want. There are 2 JSON files with `color` as the top level key, but they get merged properly.
174+
1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.
175+
1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.
176+
177+
Now let's make a change and see how that affects things. Open up `tokens/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.
178+
179+
**Huzzah!**
180+
181+
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).

‎config.json

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
{
2+
"source": ["tokens/**/*.json"],
3+
"platforms": {
4+
"scss": {
5+
"transformGroup": "scss",
6+
"buildPath": "build/scss/",
7+
"files": [{
8+
"destination": "_variables.scss",
9+
"format": "scss/variables"
10+
}]
11+
},
12+
"android": {
13+
"transformGroup": "android",
14+
"buildPath": "build/android/",
15+
"files": [{
16+
"destination": "font_dimens.xml",
17+
"format": "android/fontDimens"
18+
},{
19+
"destination": "colors.xml",
20+
"format": "android/colors"
21+
}]
22+
},
23+
"compose": {
24+
"transformGroup": "compose",
25+
"buildPath": "build/compose/",
26+
"files": [{
27+
"destination": "StyleDictionaryColor.kt",
28+
"format": "compose/object",
29+
"className": "StyleDictionaryColor",
30+
"packageName": "StyleDictionaryColor",
31+
"filter": {
32+
"attributes": {
33+
"category": "color"
34+
}
35+
}
36+
},{
37+
"destination": "StyleDictionarySize.kt",
38+
"format": "compose/object",
39+
"className": "StyleDictionarySize",
40+
"packageName": "StyleDictionarySize",
41+
"type": "float",
42+
"filter": {
43+
"attributes": {
44+
"category": "size"
45+
}
46+
}
47+
}]
48+
},
49+
"ios": {
50+
"transformGroup": "ios",
51+
"buildPath": "build/ios/",
52+
"files": [{
53+
"destination": "StyleDictionaryColor.h",
54+
"format": "ios/colors.h",
55+
"className": "StyleDictionaryColor",
56+
"type": "StyleDictionaryColorName",
57+
"filter": {
58+
"attributes": {
59+
"category": "color"
60+
}
61+
}
62+
},{
63+
"destination": "StyleDictionaryColor.m",
64+
"format": "ios/colors.m",
65+
"className": "StyleDictionaryColor",
66+
"type": "StyleDictionaryColorName",
67+
"filter": {
68+
"attributes": {
69+
"category": "color"
70+
}
71+
}
72+
},{
73+
"destination": "StyleDictionarySize.h",
74+
"format": "ios/static.h",
75+
"className": "StyleDictionarySize",
76+
"type": "float",
77+
"filter": {
78+
"attributes": {
79+
"category": "size"
80+
}
81+
}
82+
},{
83+
"destination": "StyleDictionarySize.m",
84+
"format": "ios/static.m",
85+
"className": "StyleDictionarySize",
86+
"type": "float",
87+
"filter": {
88+
"attributes": {
89+
"category": "size"
90+
}
91+
}
92+
}]
93+
},
94+
"ios-swift": {
95+
"transformGroup": "ios-swift",
96+
"buildPath": "build/ios-swift/",
97+
"files": [{
98+
"destination": "StyleDictionary+Class.swift",
99+
"format": "ios-swift/class.swift",
100+
"className": "StyleDictionaryClass",
101+
"filter": {}
102+
},{
103+
"destination": "StyleDictionary+Enum.swift",
104+
"format": "ios-swift/enum.swift",
105+
"className": "StyleDictionaryEnum",
106+
"filter": {}
107+
},{
108+
"destination": "StyleDictionary+Struct.swift",
109+
"format": "ios-swift/any.swift",
110+
"className": "StyleDictionaryStruct",
111+
"filter": {},
112+
"options": {
113+
"imports": "SwiftUI",
114+
"objectType": "struct",
115+
"accessControl": "internal"
116+
}
117+
}]
118+
},
119+
"ios-swift-separate-enums": {
120+
"transformGroup": "ios-swift-separate",
121+
"buildPath": "build/ios-swift/",
122+
"files": [{
123+
"destination": "StyleDictionaryColor.swift",
124+
"format": "ios-swift/enum.swift",
125+
"className": "StyleDictionaryColor",
126+
"filter": {
127+
"attributes": {
128+
"category": "color"
129+
}
130+
}
131+
},{
132+
"destination": "StyleDictionarySize.swift",
133+
"format": "ios-swift/enum.swift",
134+
"className": "StyleDictionarySize",
135+
"filter": {
136+
"attributes": {
137+
"category": "size"
138+
}
139+
}
140+
}]
141+
}
142+
}
143+
}

0 commit comments

Comments
 (0)