0.7.1 • Published 2 years ago

@pluralsight/design-tokens v0.7.1

Weekly downloads
-
License
Apache 2.0
Repository
github
Last release
2 years ago

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:

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

<!-- 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:

  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.
  2. The build system resolves references to other design tokens. {size.font.medium.value} gets resolved properly.
  3. 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 and formats.

0.7.1

2 years ago

0.5.1

2 years ago

0.6.1

2 years ago

0.3.1-rc-042461

2 years ago

0.3.1-rc-14c248

2 years ago

0.3.1-rc-c34830

2 years ago

0.3.1-rc-e85674

2 years ago

0.3.1-rc-7153c2

2 years ago

0.3.1-rc-af8786

2 years ago

0.3.1-rc-99a22c

2 years ago

0.3.1-rc-8e80db

2 years ago

0.3.1-rc-9521d0

2 years ago

0.3.1-rc-da0a15

2 years ago

0.3.1-rc-117a85

2 years ago

0.3.1-rc-6d93cf

2 years ago

0.3.1-rc-a91737

2 years ago

0.3.1-rc-c3e4e9

2 years ago

0.3.1-rc-ba2764

2 years ago

0.3.1-rc-13af66

2 years ago

0.3.1-rc-df7bef

2 years ago

0.3.1-rc-288816

2 years ago

0.3.1-rc-64b19b

2 years ago

0.3.1-rc-fccd30

2 years ago

0.3.1-rc-9e0aa2

2 years ago

0.3.1-rc-b45bb3

2 years ago

0.3.1-rc-30a38f

2 years ago

0.3.1-rc-48f618

2 years ago

0.3.1-rc-bac751

2 years ago

0.3.1-rc-0656fe

2 years ago

0.3.1-rc-e553a7

2 years ago

0.3.1-rc-ef6416

2 years ago

0.3.1-rc-f7bb52

2 years ago

0.3.1-rc-545353

2 years ago

0.3.1-rc-2bd552

2 years ago

0.3.1-rc-0bcae4

2 years ago

0.3.1-rc-e1d43a

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.1-rc-dd35c5

2 years ago

0.3.1-rc-4a84d4

2 years ago

0.3.1-rc-3c4884

2 years ago

0.3.1-rc-f4a8bd

3 years ago

0.3.1-rc-95ba8c

3 years ago

0.3.1-rc-4c2f08

3 years ago

0.3.1-rc-5d4a4f

2 years ago

0.3.1-rc-473756

3 years ago

0.3.1-rc-4bcd4c

3 years ago

0.3.1-rc-02e7a3

2 years ago

0.3.1-rc-ab41a0

2 years ago

0.3.1-rc-35be59

3 years ago

0.3.1-rc-8a2ff6

3 years ago

0.3.1-rc-a2ce2b

2 years ago

0.3.1-rc-28613c

2 years ago

0.3.1-rc-948c11

3 years ago

0.3.1-rc-5bd39c

2 years ago

0.3.1-rc-56f7cb

2 years ago

0.3.1-rc-f5690e

2 years ago

0.3.1-rc-a35044

2 years ago

0.3.1-rc-f5f5a2

3 years ago

0.3.1-rc-9fb7d3

2 years ago

0.3.1-rc-0d6de3

2 years ago

0.3.1-rc-ee4043

3 years ago

0.3.1-rc-8339fd

2 years ago

0.3.1-rc-75ad37

2 years ago

0.3.1-rc-7579c2

2 years ago

0.3.1-rc-c705ab

3 years ago

0.3.1-rc-e4b9de

2 years ago

0.3.1-rc-0b9521

2 years ago

0.3.1-rc-1fd94e

3 years ago

0.3.1-rc-ee4d2d

3 years ago

0.3.1-rc-9062f7

2 years ago

0.3.1-rc-c4c09d

3 years ago

0.3.1-rc-287148

3 years ago

0.3.1-rc-91f6af

3 years ago

0.3.1-rc-86fd8f

3 years ago

0.3.1-rc-500917

2 years ago

0.3.1-rc-99f02a

3 years ago

0.3.1-rc-b09b1f

2 years ago

0.3.1-rc-6ec900

2 years ago

0.3.1-rc-0e43e1

2 years ago

0.3.1-rc-7ca313

2 years ago

0.3.1-rc-4b211e

2 years ago

0.3.1-rc-533c20

2 years ago

0.3.1-rc-e53b7d

3 years ago

0.3.1-rc-c805e2

2 years ago

0.3.1-rc-99bbb3

2 years ago

0.3.1-rc-9cbfb8

2 years ago

0.3.1-rc-e2d6cf

3 years ago

0.3.1-rc-58df9e

3 years ago

0.3.1-rc-b738c0

2 years ago

0.3.1-rc-fa01ff

3 years ago

0.3.1-rc-5a0174

2 years ago

0.3.1-rc-b13dac

3 years ago

0.3.1-rc-34b764

2 years ago

0.3.1-rc-4cee61

3 years ago

0.3.1-rc-268ec3

3 years ago

0.3.1-rc-157f60

3 years ago

0.3.1-rc-ccedfa

2 years ago

0.3.1-rc-8fbb74

2 years ago

0.3.1-rc-305cb7

3 years ago

0.3.1-rc-bbe17b

2 years ago

0.3.1-rc-e9c110

2 years ago

0.3.1-rc-631946

3 years ago

0.3.1-rc-845f54

3 years ago

0.3.1-rc-79f535

3 years ago

0.3.1-rc-4195f5

2 years ago

0.3.1-rc-9c5659

2 years ago

0.3.1-rc-59730b

2 years ago

0.3.1-rc-0efea4

2 years ago

0.3.1-rc-99930f

3 years ago

0.3.1-rc-dbee1e

3 years ago

0.3.1-rc-2c0ec3

3 years ago

0.3.1-rc-827525

2 years ago

0.3.1-rc-6b6633

3 years ago

0.3.1-rc-7df556

2 years ago

0.3.1-rc-321435

3 years ago

0.3.1-rc-e607a6

2 years ago

0.3.1-rc-a74f14

3 years ago

0.3.1-rc-fdc73f

3 years ago

0.3.1-rc-f94ff6

2 years ago

0.3.1-rc-bca150

2 years ago

0.3.1-rc-a6ad11

3 years ago

0.3.1-rc-f63297

3 years ago

0.3.1-rc-719a86

2 years ago

0.3.1-rc-124083

2 years ago

0.3.1-rc-33cc5a

2 years ago

0.3.1-rc-401938

2 years ago

0.3.1-rc-8a8fbf

2 years ago

0.3.1-rc-d602f9

2 years ago

0.3.1-rc-d0e756

2 years ago

0.3.1-rc-26ff70

2 years ago

0.3.1-rc-c080ad

3 years ago

0.3.1-rc-ecae9a

2 years ago

0.3.1-rc-e1e548

3 years ago

0.3.1-rc-68da83

3 years ago

0.3.1-rc-30dfeb

2 years ago

0.3.1-rc-eecff5

3 years ago

0.2.0-rc-9b2f6a

3 years ago

0.3.1-rc-e74b9e

3 years ago

0.2.0-rc-1983a8

3 years ago

0.3.1-rc-421dd0

3 years ago

0.2.0-rc-974fd7

3 years ago

0.2.0-rc-2cc34e

3 years ago

0.2.0-rc-d9f115

3 years ago

0.2.0-rc-dc3912

3 years ago

0.2.0-rc-ceea91

3 years ago

0.3.1

3 years ago

0.3.1-rc-c94a05

3 years ago

0.3.1-rc-b5e643

3 years ago

0.1.3

3 years ago

0.3.1-rc-37706b

3 years ago

0.2.0-rc-028d80

3 years ago

0.2.0-rc-8f3913

3 years ago

0.3.1-rc-f36f08

3 years ago

0.2.0-rc-1fc600

3 years ago

0.3.1-rc-043800

3 years ago

0.3.1-rc-569991

3 years ago

0.2.0-rc-86c8ea

3 years ago

0.2.0-rc-61d98c

3 years ago

0.2.0

3 years ago

0.1.2

3 years ago

0.1.0

3 years ago

0.0.0

3 years ago