Basic Style Dictionary with Swift
基本风格词典
此示例代码是基本的,向您展示此框架可以做什么。如果你全局安装了样式字典模块,你可以进入这个目录并运行:cd
style-dictionary build
您应该看到类似以下输出的内容:
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
compose
✔︎ build/compose/StyleDictionaryColor.kt
✔︎ build/compose/StyleDictionarySize.kt
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
对你有好处!您现在已经构建了您的第一本样式词典!继续,看看我们构建了什么。这应该创建一个构建目录,它应该看起来像这样:
├── README.md
├── config.json
├── tokens/
│ ├── color/
│ ├── base.json
│ ├── font.json
│ ├── size/
│ ├── font.json
├── build/
│ ├── android/
│ ├── font_dimens.xml
│ ├── colors.xml
│ ├── compose/
│ ├── StyleDictionaryColor.kt
│ ├── StyleDictionarySize.kt
│ ├── scss/
│ ├── _variables.scss
│ ├── ios/
│ ├── StyleDictionaryColor.h
│ ├── StyleDictionaryColor.m
│ ├── StyleDictionarySize.h
│ ├── StyleDictionarySize.m
│ ├── ios-swift/
│ ├── StyleDictionary.swift
│ ├── StyleDictionaryColor.swift
│ ├── StyleDictionarySize.swift
If you open 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:config.json
Android
<!-- font_dimens.xml -->
<resources>
<dimen name="size_font_small">12.00sp</dimen>
<dimen name="size_font_medium">16.00sp</dimen>
<dimen name="size_font_large">32.00sp</dimen>
<dimen name="size_font_base">16.00sp</dimen>
</resources>
<!-- colors.xml -->
<resources>
<color name="color_base_gray_light">#ffcccccc</color>
<color name="color_base_gray_medium">#ff999999</color>
<color name="color_base_gray_dark">#ff111111</color>
<color name="color_base_red">#ffff0000</color>
<color name="color_base_green">#ff00ff00</color>
<color name="color_font_base">#ffff0000</color>
<color name="color_font_secondary">#ff00ff00</color>
<color name="color_font_tertiary">#ffcccccc</color>
</resources>
Compose
object StyleDictionaryColor {
val colorBaseGrayDark = Color(0xff111111)
val colorBaseGrayLight = Color(0xffcccccc)
val colorBaseGrayMedium = Color(0xff999999)
val colorBaseGreen = Color(0xff00ff00)
val colorBaseRed = Color(0xffff0000)
val colorFontBase = Color(0xffff0000)
val colorFontSecondary = Color(0xff00ff00)
val colorFontTertiary = Color(0xffcccccc)
}
object StyleDictionarySize {
/** the base size of the font */
val sizeFontBase = 16.00.sp
/** the large size of the font */
val sizeFontLarge = 32.00.sp
/** the medium size of the font */
val sizeFontMedium = 16.00.sp
/** the small size of the font */
val sizeFontSmall = 12.00.sp
}
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
#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:
- The build system does a deep merge of all the token JSON files defined in the attribute of . This allows you to split up the token JSON files however you want. There are 2 JSON files with as the top level key, but they get merged properly.
source
config.json
color
- The build system resolves references to other design tokens. gets resolved properly.
{size.font.medium.value}
- The build system handles references to token values in other files as well as you can see in .
tokens/color/font.json
Now let’s make a change and see how that affects things. Open up and change to . After you make that change, save the file and re-run the build command . Open up the build files and take a look.tokens/color/base.json
"#111111"
"#000000"
style-dictionary build
Huzzah!
Now go forth and create! Take a look at all the built-in transforms and formats.