{"_id":"@dylandepass/rosalind-theme","name":"@dylandepass/rosalind-theme","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.1":{"name":"@dylandepass/rosalind-theme","version":"1.0.1","description":"Starter design system for Franklin based websites","author":{"name":"Dylan Depass","email":"dyland@adobe.com"},"homepage":"https://hlx.live","repository":{"type":"git","url":"git+https://github.com/dylandepass/rosalind-theme.git"},"license":"MIT","keywords":["adobe","franklin","design system"],"scripts":{"semantic-release":"semantic-release","dev":"gulp dev --dna $npm_config_dna","build":"gulp build --dna $npm_config_dna","demo":"echo \"Hello $npm_config_first $npm_config_last\"","lint":"stylelint \"./src/**/*.css\"","storybook":"start-storybook -p 6006","build-storybook":"build-storybook"},"publishConfig":{"access":"public"},"devDependencies":{"@babel/core":"^7.19.0","@storybook/addon-actions":"^6.5.10","@storybook/addon-essentials":"^6.5.10","@storybook/addon-interactions":"^6.5.10","@storybook/addon-links":"^6.5.10","@storybook/builder-webpack4":"^6.5.10","@storybook/html":"^6.5.10","@storybook/manager-webpack4":"^6.5.10","@storybook/testing-library":"^0.0.13","autoprefixer":"10.4.4","babel-loader":"^8.2.5","gulp":"4.0.2","gulp-plumber":"1.2.1","gulp-postcss":"9.0.1","gulp-rename":"2.0.0","gulp-sourcemaps":"3.0.0","gulp-util":"3.0.8","postcss":"^8.4.16","postcss-color-mod-function":"^3.0.3","postcss-custom-media":"^8.0.2","postcss-custom-properties":"^12.1.8","postcss-import":"14.1.0","postcss-media-variables":"^2.0.1","postcss-mixins":"9.0.2","postcss-preset-env":"7.8.2","postcss-pxtorem":"^6.0.0","stylelint":"14.10.0","stylelint-config-prettier":"9.0.3","stylelint-config-standard":"25.0.0","cssnano":"^5.1.13","semantic-release":"19.0.3","@semantic-release/changelog":"6.0.1","@semantic-release/git":"10.0.1","@semantic-release/npm":"9.0.1"},"dependencies":{"@dylandepass/rosalind-dna":"1.5.14","normalize.css":"^8.0.1"},"gitHead":"dc1d619d085f1586fd459fbb7fd8c93a4c5b5048","bugs":{"url":"https://github.com/dylandepass/rosalind-theme/issues"},"_id":"@dylandepass/rosalind-theme@1.0.1","_nodeVersion":"16.18.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-Eqi65/pQH2yUae+EgbBZhpYUWuB0Sy45ryLcaMT/pgngawovV+bAOLYsl50yJB5XpZ+5IcTzX4Sixe0HSyMbkg==","shasum":"9d0a787c8e08f7ec1c0d73d67dc9e86e5ee1e643","tarball":"https://registry.npmjs.org/@dylandepass/rosalind-theme/-/rosalind-theme-1.0.1.tgz","fileCount":42,"unpackedSize":252803,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkKMBNQmJcX7qvqcQjGvYzzoijJnprI7ZY7Er+XtK9HgIgAjRrS6joEBoMrnp+MQ/LLMjQ2A5DjOy/qi8qtOVtalo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaoRVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTyg/+PG80/QqsbSOs3ghRGiL/bY+p6SuRnXye4HlGjAynpSNYlk6n\r\nE3qHg/1KO/rQ5TLC0kQw3S3sUeKnzVflLBislAIYiGNrphnBdg4Mxex2Gz8X\r\nRYvHk4O8/gHi1VoVk4NeoFfHh46UbPYWw4IvnruTyf7gKKNUzStl/FKyOovf\r\nGzHNogAVkcygYZKiw81D5ZCsTRZFrXTOgnf0TrMGKxu4EfbHbxKT7sM036jd\r\nI8Z84BCTWZc/XzdZuK8rnoF6LA3L6f3O1QSIgIU7TDJ8ImJP5pGCnoBwlzsE\r\nX11AcgbQEliiN+StaokASoPaZzfEquL71jl+CFukFITMMVyHrvIO62UnxxfL\r\nCxofv5zJsXSSUHeXeYNMqLLY9FZfKVK4d3jJcH1j9Ihrz4wwqXlCaiyLpVJm\r\nglQkmQigaRdofKGFftvoaHyo3xccFFtCM+mqkBRo2N+2truAnDW6IOHKhGZc\r\nP1ja6X4F3gp4FGAfoEQ55+FK+vn9Hex/dQWgOhxyYksHbTrNdgUiy0xKhWeG\r\ngpu0JVffCUfjKh11DJRcBXbSQ8/vNHLDibPBnrvVyE+G2NMvZuC0UYUDZgFI\r\nrt5BTJwYyZ4qghj0RVr7g2giiM8OaXv7UJzlybGLlBNEdq7Ey1ybZAepBpP6\r\ngPHAtCvsY7UOVGQhkZjhE2xNdxLnAJDKmFs=\r\n=C8S0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dylandepass","email":"dylandepass@gmail.com"},"directories":{},"maintainers":[{"name":"dylandepass","email":"dylandepass@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rosalind-theme_1.0.1_1667925077333_0.021619459859895773"},"_hasShrinkwrap":false}},"time":{"created":"2022-11-08T16:31:17.263Z","1.0.1":"2022-11-08T16:31:17.579Z","modified":"2022-11-08T16:31:17.742Z"},"maintainers":[{"name":"dylandepass","email":"dylandepass@gmail.com"}],"description":"Starter design system for Franklin based websites","homepage":"https://hlx.live","keywords":["adobe","franklin","design system"],"repository":{"type":"git","url":"git+https://github.com/dylandepass/rosalind-theme.git"},"author":{"name":"Dylan Depass","email":"dyland@adobe.com"},"bugs":{"url":"https://github.com/dylandepass/rosalind-theme/issues"},"license":"MIT","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"}