From b7d3ee141f58e516b8f4bc12d45ee5abe13adf6a Mon Sep 17 00:00:00 2001 From: Narin Ratana Date: Tue, 19 Sep 2023 13:26:51 -0700 Subject: [PATCH] Clear out example README --- packages/tokens/README.md | 182 +------------------------------------- 1 file changed, 1 insertion(+), 181 deletions(-) diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 985b48fe..6af01aaf 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -1,181 +1 @@ -# 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 - -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 -``` - -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 -├── 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 `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: - -**Android** -```xml - - - 12.00sp - 16.00sp - 32.00sp - 16.00sp - - - - - #ffcccccc - #ff999999 - #ff111111 - #ffff0000 - #ff00ff00 - #ffff0000 - #ff00ff00 - #ffcccccc - -``` - -**Compose** -```kotlin -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** -```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 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. -1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly. -1. 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 `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. - -**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). +# VA Mobile Design Tokens