Neolithic Programming Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    @dsengineer/tokens

    3.0.0 • Public • Published

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

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

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

    Install

    npm i @dsengineer/tokens

    DownloadsWeekly Downloads

    7

    Version

    3.0.0

    License

    Apache-2.0

    Unpacked Size

    41.9 kB

    Total Files

    19

    Last publish

    Collaborators

    • avatar