{"_id":"@alessio-libardi/tokens","_rev":"1-1efe060284693aeb3d399f0e76a6c5cb","name":"@alessio-libardi/tokens","dist-tags":{"latest":"1.1.1"},"versions":{"1.1.1":{"name":"@alessio-libardi/tokens","version":"1.1.1","description":"Open Source Design System tokens management template.","scripts":{"build":"style-dictionary build","test":"echo \"Error: no test specified\" && exit 1"},"author":{"name":"Alessio Libardi"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alessio-libardi/tokens.git"},"bugs":{"url":"https://github.com/alessio-libardi/tokens/issues"},"homepage":"https://github.com/alessio-libardi/tokens#readme","devDependencies":{"cz-conventional-changelog":"^3.3.0","style-dictionary":"^3.0.1"},"publishConfig":{"access":"public"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"gitHead":"573148237d5fc7b24dc055c0219a169ba81e8b0b","_id":"@alessio-libardi/tokens@1.1.1","_nodeVersion":"12.22.1","_npmVersion":"6.14.12","dist":{"integrity":"sha512-qsb5FmBhSRiQTwpRijjW2LtmivOfAKw5XFkJ59vXZuHHv7ycVEtLPv23EJdVno8+6T2UHR53e6WgfBKitTGZ4A==","shasum":"29ff2f6d53d8246d05052f7fbc4796028925b107","tarball":"https://registry.npmjs.org/@alessio-libardi/tokens/-/tokens-1.1.1.tgz","fileCount":3,"unpackedSize":8099,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyFAlCRA9TVsSAnZWagAA0RcP/iEvs6JL4LYwHq6lX75P\nYz6YV2MxIi8Wce8o4LiJcDLJrpQOemBwsKUKbpZpCDhzJeqIlNeCSVNm1YH+\nZwTZyZyx9Zd20B4G9P7O71MIuWJrunHC+HULgo7cMUJVbY2mNIyaFRnr0leD\nhCZkiZpECEKPkfjBuJ7ADtUSLdrqg+UyYXHC292FtsSdRrOWLmXkNBOqqHV8\n6lIcb6C1XLHVQkw5vCdU8MD3/6njuTVfRKH1vPrW97Ocwi3hJQMVILwATdNO\nz0Hq1QYuPzwvThK8Fva3heGa/C9stS4lUgzBwiOB3TAZDeKqsSeNWkj3fXJ/\nw2Fx1Gz4Qhr/3vDkOdy3xjQfFnSRM2zN/PHqQBk1WhWkVrduw93rxdu5mvMg\ngd/plO0oUVGqMbKuhMnLKYehiqGraqbHb1AwWICNknYasbDSUgffXqa8oXtx\nIAkcFU7CBJPJJ5nipzV5Gj95rK3x4Rul8Z0QI4V6tLFNzmQpiWl3uoxZgMP/\nQqUE/wc5xAO231zIDrOMhazm86f1QPJLBRP9aRIG1m6u1t53goUXfLy4zu1k\nWjZatApBvn8gRE4vJhX/oI0T2cMFjJrJOYzcRNXs9EH/l57Zr4DyJg1P8SIS\nQSwkLnUOTER8AfpMBykYTbpoIlXq5EaOxvaNLeIcV0joelmRkiqXEIce8lqZ\nOJwZ\r\n=bDpe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGyZ4S8BiDuZGz+vkc2kkAtzTMzeLh9wCpnFE7dMD9AAiEA8yCeYZcigMNykokJEXiFPRkITKzuP4rrP0r+lga7RbA="}]},"_npmUser":{"name":"alessio-libardi","email":"alessio.libardi@gmail.com"},"directories":{},"maintainers":[{"name":"alessio-libardi","email":"alessio.libardi@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tokens_1.1.1_1623740453574_0.8785022745000997"},"_hasShrinkwrap":false}},"time":{"created":"2021-06-15T07:00:53.528Z","1.1.1":"2021-06-15T07:00:53.717Z","modified":"2022-04-04T12:37:54.774Z"},"maintainers":[{"name":"alessio-libardi","email":"alessio.libardi@gmail.com"}],"description":"Open Source Design System tokens management template.","homepage":"https://github.com/alessio-libardi/tokens#readme","repository":{"type":"git","url":"git+https://github.com/alessio-libardi/tokens.git"},"author":{"name":"Alessio Libardi"},"bugs":{"url":"https://github.com/alessio-libardi/tokens/issues"},"license":"MIT","readme":"# Open Source Design System tokens management template.\n\nThis 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:\n```bash\nstyle-dictionary build\n```\n\nYou should see something like this output:\n```\nCopying starter files...\n\nSource style dictionary starter files created!\n\nRunning `style-dictionary build` for the first time to generate build artifacts.\n\n\nscss\n✔︎  build/scss/_variables.scss\n\nandroid\n✔︎  build/android/font_dimens.xml\n✔︎  build/android/colors.xml\n\ncompose\n✔︎ build/compose/StyleDictionaryColor.kt\n✔︎ build/compose/StyleDictionarySize.kt\n\nios\n✔︎  build/ios/StyleDictionaryColor.h\n✔︎  build/ios/StyleDictionaryColor.m\n✔︎  build/ios/StyleDictionarySize.h\n✔︎  build/ios/StyleDictionarySize.m\n\nios-swift\n✔︎  build/ios-swift/StyleDictionary.swift\n\nios-swift-separate-enums\n✔︎  build/ios-swift/StyleDictionaryColor.swift\n✔︎  build/ios-swift/StyleDictionarySize.swift\n```\n\nGood 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:\n```\n├── README.md\n├── config.json\n├── tokens/\n│   ├── color/\n│       ├── base.json\n│       ├── font.json\n│   ├── size/\n│       ├── font.json\n├── build/\n│   ├── android/\n│      ├── font_dimens.xml\n│      ├── colors.xml\n│   ├── compose/\n│      ├── StyleDictionaryColor.kt\n│      ├── StyleDictionarySize.kt\n│   ├── scss/\n│      ├── _variables.scss\n│   ├── ios/\n│      ├── StyleDictionaryColor.h\n│      ├── StyleDictionaryColor.m\n│      ├── StyleDictionarySize.h\n│      ├── StyleDictionarySize.m\n│   ├── ios-swift/\n│      ├── StyleDictionary.swift\n│      ├── StyleDictionaryColor.swift\n│      ├── StyleDictionarySize.swift\n```\n\nIf 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:\n\n**Android**\n```xml\n<!-- font_dimens.xml -->\n<resources>\n  <dimen name=\"size_font_small\">12.00sp</dimen>\n  <dimen name=\"size_font_medium\">16.00sp</dimen>\n  <dimen name=\"size_font_large\">32.00sp</dimen>\n  <dimen name=\"size_font_base\">16.00sp</dimen>\n</resources>\n\n<!-- colors.xml -->\n<resources>\n  <color name=\"color_base_gray_light\">#ffcccccc</color>\n  <color name=\"color_base_gray_medium\">#ff999999</color>\n  <color name=\"color_base_gray_dark\">#ff111111</color>\n  <color name=\"color_base_red\">#ffff0000</color>\n  <color name=\"color_base_green\">#ff00ff00</color>\n  <color name=\"color_font_base\">#ffff0000</color>\n  <color name=\"color_font_secondary\">#ff00ff00</color>\n  <color name=\"color_font_tertiary\">#ffcccccc</color>\n</resources>\n```\n\n**Compose**\n```kotlin\nobject StyleDictionaryColor {\n  val colorBaseGrayDark = Color(0xff111111)\n  val colorBaseGrayLight = Color(0xffcccccc)\n  val colorBaseGrayMedium = Color(0xff999999)\n  val colorBaseGreen = Color(0xff00ff00)\n  val colorBaseRed = Color(0xffff0000)\n  val colorFontBase = Color(0xffff0000)\n  val colorFontSecondary = Color(0xff00ff00)\n  val colorFontTertiary = Color(0xffcccccc)\n}\n\nobject StyleDictionarySize {\n  /** the base size of the font */\n  val sizeFontBase = 16.00.sp\n  /** the large size of the font */\n  val sizeFontLarge = 32.00.sp\n  /** the medium size of the font */\n  val sizeFontMedium = 16.00.sp\n  /** the small size of the font */\n  val sizeFontSmall = 12.00.sp\n}\n```\n\n**SCSS**\n```scss\n// variables.scss\n$color-base-gray-light: #cccccc;\n$color-base-gray-medium: #999999;\n$color-base-gray-dark: #111111;\n$color-base-red: #ff0000;\n$color-base-green: #00ff00;\n$color-font-base: #ff0000;\n$color-font-secondary: #00ff00;\n$color-font-tertiary: #cccccc;\n$size-font-small: 0.75rem;\n$size-font-medium: 1rem;\n$size-font-large: 2rem;\n$size-font-base: 1rem;\n```\n\n**iOS**\n```objc\n#import \"StyleDictionaryColor.h\"\n\n@implementation StyleDictionaryColor\n\n+ (UIColor *)color:(StyleDictionaryColorName)colorEnum{\n  return [[self values] objectAtIndex:colorEnum];\n}\n\n+ (NSArray *)values {\n  static NSArray* colorArray;\n  static dispatch_once_t onceToken;\n\n  dispatch_once(&onceToken, ^{\n    colorArray = @[\n[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f],\n[UIColor colorWithRed:0.600f green:0.600f blue:0.600f alpha:1.000f],\n[UIColor colorWithRed:0.067f green:0.067f blue:0.067f alpha:1.000f],\n[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],\n[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],\n[UIColor colorWithRed:1.000f green:0.000f blue:0.000f alpha:1.000f],\n[UIColor colorWithRed:0.000f green:1.000f blue:0.000f alpha:1.000f],\n[UIColor colorWithRed:0.800f green:0.800f blue:0.800f alpha:1.000f]\n    ];\n  });\n\n  return colorArray;\n}\n\n@end\n```\n\nPretty nifty! This shows a few things happening:\n1. 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.\n1. The build system resolves references to other design tokens. `{size.font.medium.value}` gets resolved properly.\n1. The build system handles references to token values in other files as well as you can see in `tokens/color/font.json`.\n\nNow 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.\n\n**Huzzah!**\n\nNow 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).\n","readmeFilename":"README.md"}