{"_id":"@davoo96/design-tokens","name":"@davoo96/design-tokens","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@davoo96/design-tokens","version":"1.0.0","description":"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 ```","main":"index.js","scripts":{"build":"node src/index.js","build:dev":"rm -rf dist && node src/index.js"},"author":"","license":"ISC","dependencies":{"style-dictionary":"^3.7.1"},"devDependencies":{},"repository":{"type":"git","url":"git+https://github.com/Davoo96/design-system-code.git"},"bugs":{"url":"https://github.com/Davoo96/design-system-code/issues"},"homepage":"https://github.com/Davoo96/design-system-code#readme","_id":"@davoo96/design-tokens@1.0.0","_nodeVersion":"18.1.0","_npmVersion":"8.8.0","dist":{"integrity":"sha512-JpYJtygDSha0pYub8TvdBLxc/0K0BsvR11Np2R08qfbqC6QdJaHog7r3LtHwM5KFgVXJZG0/2IZt1dbb2Oc4kg==","shasum":"2206eddf3fbf1ac9d9ffd59ad7de7521718ca51e","tarball":"https://registry.npmjs.org/@davoo96/design-tokens/-/design-tokens-1.0.0.tgz","fileCount":63,"unpackedSize":41781,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC33y9oNa6WKafcTkkT+oTfUosX4MuwbNp+DHkOQ3ScBgIgdPVEPFqAEL/D1mXyCOsITwnNsuxc4YjxsKqPDFwVGzY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPKKVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo1QhAAgJ/xH0sPvLDPHOBv0FaMEVCGbCvq2KdF3gByEWMleeffLwyY\r\nqyG4ty2oJSkrcpct4j5/h2QGAAAIUR8gvazVfsTPiu3xtrMY8D9HulAqlVcD\r\nTzEJC1xNkkmKlTqEwLJMOiokHl899hRIxX3doo5pXlNFuEh7FgcV8RUFfqdU\r\nBYChARyZgmC08NNdZ71VZg273nghFBAD5HI6IuKnmMGv7/zcJrMjP7/jT6sp\r\nqJdL8DAk3BeX3iXUVmtmkIYvyNVve+y1/LSBfK6RvBxSmR9ELg3239H77A4+\r\noUWhp4uqoSYMo50oGxBzMuxfDwS4dzW1xgP3hWt3mOcL1ijJKmzac5o1sQW7\r\nZhly9muEgo262SXnb4gSASCqUTObw+3CbOTtVbvaV95sLUbXRM0MbY8HacG7\r\nEwe4ymkOtH1MTP0ywxjZ7jW28gHuGgaHboieDg445U+uY2CdN6U+yDX+UCft\r\ntOYkJjnyJF89TCWyiW+J5XH7jCUDCgVHLmnZCxypGko3mZgJefLzgC+kiBXE\r\nejuvNukufg8wjYEE/ulh2acVd1/l79ZQQZCFVhRj6PTI+3R/G9XiKJU1Ysf/\r\nVntZMCnZCLaDzRbPBWWl1OZ+8e350OxEvXMAklvgn2UcUVHmSD4y5DswepiG\r\nQqCnruGpr60vmNLYMZlU3vyHNATZtGqTKt8=\r\n=spkf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"davoo96","email":"davizi96@hotmail.com"},"directories":{},"maintainers":[{"name":"davoo96","email":"davizi96@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/design-tokens_1.0.0_1664918165714_0.19131164553703517"},"_hasShrinkwrap":false}},"time":{"created":"2022-10-04T21:16:05.636Z","1.0.0":"2022-10-04T21:16:05.894Z","modified":"2022-10-04T21:16:06.046Z"},"maintainers":[{"name":"davoo96","email":"davizi96@hotmail.com"}],"description":"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 ```","homepage":"https://github.com/Davoo96/design-system-code#readme","repository":{"type":"git","url":"git+https://github.com/Davoo96/design-system-code.git"},"bugs":{"url":"https://github.com/Davoo96/design-system-code/issues"},"license":"ISC","readme":"# Basic Style Dictionary\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"}