├── docs ├── .nojekyll ├── assets │ ├── cti.png │ ├── logo.png │ ├── favicon.png │ ├── fake_player.png │ ├── build-diagram.png │ └── property-definitions.png ├── _sidebar.md └── _coverpage.md ├── .babelrc ├── examples ├── advanced │ ├── s3 │ │ ├── .gitignore │ │ ├── assets │ │ │ ├── fonts │ │ │ │ ├── Roboto-Regular.ttf │ │ │ │ ├── OpenSans-Regular.ttf │ │ │ │ ├── MaterialIcons-Regular.eot │ │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ │ ├── MaterialIcons-Regular.woff │ │ │ │ └── MaterialIcons-Regular.woff2 │ │ │ └── icons │ │ │ │ ├── edit-2.svg │ │ │ │ ├── bookmark.svg │ │ │ │ ├── folder.svg │ │ │ │ ├── edit-3.svg │ │ │ │ ├── check-circle.svg │ │ │ │ ├── dollar-sign.svg │ │ │ │ ├── file.svg │ │ │ │ ├── book-open.svg │ │ │ │ ├── book.svg │ │ │ │ ├── briefcase.svg │ │ │ │ ├── check-square.svg │ │ │ │ ├── alert-circle.svg │ │ │ │ ├── camera.svg │ │ │ │ ├── edit-1.svg │ │ │ │ ├── archive.svg │ │ │ │ ├── database.svg │ │ │ │ ├── delete.svg │ │ │ │ ├── download-cloud.svg │ │ │ │ ├── external-link.svg │ │ │ │ ├── grid.svg │ │ │ │ ├── globe.svg │ │ │ │ ├── calendar.svg │ │ │ │ ├── alert-octagon.svg │ │ │ │ ├── alert-triangle.svg │ │ │ │ ├── file-text.svg │ │ │ │ ├── gift.svg │ │ │ │ ├── github.svg │ │ │ │ └── film.svg │ │ ├── properties │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ ├── size │ │ │ │ └── font.json │ │ │ └── assets │ │ │ │ └── fonts.json │ │ ├── package.json │ │ └── upload.js │ ├── create-react-app │ │ ├── .env │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── manifest.json │ │ ├── README.media │ │ │ └── react-app-screenshot.png │ │ ├── src │ │ │ ├── components │ │ │ │ ├── with-css-modules │ │ │ │ │ └── css-modules-logo.png │ │ │ │ ├── with-styled-components │ │ │ │ │ └── styled-components-logo.png │ │ │ │ └── with-sass │ │ │ │ │ └── ComponentWithSass.js │ │ │ ├── App.test.js │ │ │ ├── index.scss │ │ │ └── index.js │ │ ├── style-dictionary │ │ │ ├── properties │ │ │ │ ├── spacing.json │ │ │ │ ├── color.json │ │ │ │ └── font.json │ │ │ └── config.json │ │ └── .gitignore │ ├── npm-module │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ └── size │ │ │ │ └── font.json │ │ ├── config.json │ │ └── package.json │ ├── component-cti │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── size │ │ │ │ ├── font.json │ │ │ │ └── padding.json │ │ │ ├── color │ │ │ │ ├── background.json │ │ │ │ ├── core.json │ │ │ │ └── font.json │ │ │ └── component │ │ │ │ └── button.json │ │ └── package.json │ ├── custom-filters │ │ ├── .gitignore │ │ ├── tokens │ │ │ └── spacing.json │ │ ├── package.json │ │ ├── config.json │ │ └── build.js │ ├── assets-base64-embed │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── assets │ │ │ │ ├── images.json │ │ │ │ └── fonts.json │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ └── size │ │ │ │ └── font.json │ │ ├── assets │ │ │ ├── images │ │ │ │ └── logo.png │ │ │ ├── fonts │ │ │ │ ├── Roboto-Regular.ttf │ │ │ │ ├── OpenSans-Regular.ttf │ │ │ │ ├── MaterialIcons-Regular.eot │ │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ │ ├── MaterialIcons-Regular.woff │ │ │ │ └── MaterialIcons-Regular.woff2 │ │ │ └── icons │ │ │ │ ├── edit-2.svg │ │ │ │ ├── bookmark.svg │ │ │ │ ├── folder.svg │ │ │ │ ├── edit-3.svg │ │ │ │ ├── check-circle.svg │ │ │ │ ├── file.svg │ │ │ │ ├── book-open.svg │ │ │ │ ├── dollar-sign.svg │ │ │ │ ├── book.svg │ │ │ │ ├── briefcase.svg │ │ │ │ ├── check-square.svg │ │ │ │ ├── camera.svg │ │ │ │ ├── edit-1.svg │ │ │ │ ├── alert-circle.svg │ │ │ │ ├── archive.svg │ │ │ │ ├── database.svg │ │ │ │ ├── delete.svg │ │ │ │ ├── download-cloud.svg │ │ │ │ ├── external-link.svg │ │ │ │ ├── grid.svg │ │ │ │ ├── calendar.svg │ │ │ │ ├── globe.svg │ │ │ │ ├── alert-octagon.svg │ │ │ │ ├── alert-triangle.svg │ │ │ │ ├── file-text.svg │ │ │ │ ├── gift.svg │ │ │ │ ├── github.svg │ │ │ │ └── film.svg │ │ └── package.json │ ├── auto-rebuild-watcher │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ └── size │ │ │ │ └── font.json │ │ └── package.json │ ├── create-react-native-app │ │ ├── .gitattributes │ │ ├── metro.config.js │ │ ├── android │ │ │ ├── app │ │ │ │ ├── src │ │ │ │ │ ├── main │ │ │ │ │ │ └── res │ │ │ │ │ │ │ ├── values │ │ │ │ │ │ │ ├── strings.xml │ │ │ │ │ │ │ ├── colors.xml │ │ │ │ │ │ │ └── styles.xml │ │ │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ │ │ ├── ic_launcher.png │ │ │ │ │ │ │ └── ic_launcher_round.png │ │ │ │ │ │ │ └── drawable │ │ │ │ │ │ │ ├── splashscreen_image.png │ │ │ │ │ │ │ └── splashscreen.xml │ │ │ │ │ └── debug │ │ │ │ │ │ └── AndroidManifest.xml │ │ │ │ ├── debug.keystore │ │ │ │ ├── proguard-rules.pro │ │ │ │ └── build_defs.bzl │ │ │ ├── gradle │ │ │ │ └── wrapper │ │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ │ └── gradle-wrapper.properties │ │ │ └── settings.gradle │ │ ├── ios │ │ │ ├── createreactnativeapp │ │ │ │ ├── Images.xcassets │ │ │ │ │ ├── Contents.json │ │ │ │ │ ├── SplashScreen.imageset │ │ │ │ │ │ ├── splashscreen.png │ │ │ │ │ │ └── Contents.json │ │ │ │ │ ├── SplashScreenBackground.imageset │ │ │ │ │ │ ├── background.png │ │ │ │ │ │ └── Contents.json │ │ │ │ │ └── AppIcon.appiconset │ │ │ │ │ │ └── Contents.json │ │ │ │ ├── main.m │ │ │ │ ├── AppDelegate.h │ │ │ │ └── Supporting │ │ │ │ │ └── Expo.plist │ │ │ └── Podfile │ │ ├── babel.config.js │ │ ├── .buckconfig │ │ ├── __tests__ │ │ │ └── App.js │ │ ├── app.json │ │ ├── index.js │ │ ├── src │ │ │ └── style-dictionary-dist │ │ │ │ └── variables.js │ │ ├── style-dictionary │ │ │ └── properties │ │ │ │ ├── size │ │ │ │ └── size.json │ │ │ │ └── color │ │ │ │ └── brand.json │ │ └── config.json │ ├── custom-transforms │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── button.json │ │ │ ├── spacing.json │ │ │ ├── font.json │ │ │ └── colors.json │ │ ├── package.json │ │ └── config.json │ ├── matching-build-files │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── color │ │ │ │ └── base.json │ │ │ ├── index.js │ │ │ ├── size │ │ │ │ └── base.json │ │ │ └── button │ │ │ │ └── base.json │ │ └── package.json │ ├── tokens-deprecation │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ └── size │ │ │ │ └── font.json │ │ ├── package.json │ │ ├── templates │ │ │ └── web-scss.template │ │ ├── config.json │ │ └── build.js │ ├── variables-in-outputs │ │ ├── .gitignore │ │ ├── tokens │ │ │ └── color │ │ │ │ ├── background.json │ │ │ │ └── palette.json │ │ └── package.json │ ├── custom-formats-with-templates │ │ ├── .gitignore │ │ ├── templates │ │ │ ├── android-xml_alt.hbs │ │ │ ├── web-scss.template │ │ │ └── ios-plist_alt.pug │ │ ├── properties │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ └── size │ │ │ │ └── font.json │ │ └── package.json │ ├── multi-brand-multi-platform │ │ ├── .gitignore │ │ ├── tokens │ │ │ ├── platforms │ │ │ │ ├── ios │ │ │ │ │ ├── button.json │ │ │ │ │ └── font.json │ │ │ │ ├── web │ │ │ │ │ ├── button.json │ │ │ │ │ └── font.json │ │ │ │ └── android │ │ │ │ │ ├── button.json │ │ │ │ │ └── font.json │ │ │ ├── brands │ │ │ │ ├── brand-1 │ │ │ │ │ └── color.json │ │ │ │ ├── brand-2 │ │ │ │ │ └── color.json │ │ │ │ └── brand-3 │ │ │ │ │ └── color.json │ │ │ └── globals │ │ │ │ ├── font │ │ │ │ └── index.json │ │ │ │ ├── button.json │ │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ │ └── size │ │ │ │ └── font.json │ │ └── package.json │ ├── custom-parser │ │ ├── tokens │ │ │ └── color │ │ │ │ └── core.json │ │ └── package.json │ ├── flutter │ │ ├── README.md │ │ ├── .gitignore │ │ └── style_dictionary │ │ │ └── properties │ │ │ ├── size │ │ │ ├── font.json │ │ │ └── padding.json │ │ │ └── color │ │ │ ├── background.json │ │ │ ├── core.json │ │ │ └── font.json │ ├── referencing_aliasing │ │ ├── tokens │ │ │ ├── globals.json │ │ │ ├── color │ │ │ │ ├── font.json │ │ │ │ └── base.json │ │ │ ├── button │ │ │ │ └── button.json │ │ │ └── size │ │ │ │ └── font.json │ │ ├── config.json │ │ └── package.json │ ├── node-modules-as-config-and-properties │ │ ├── tokens │ │ │ ├── color │ │ │ │ ├── border.js │ │ │ │ ├── background.js │ │ │ │ ├── font.js │ │ │ │ ├── index.js │ │ │ │ └── brand.js │ │ │ ├── index.js │ │ │ └── size │ │ │ │ ├── index.js │ │ │ │ ├── border.js │ │ │ │ ├── padding.js │ │ │ │ └── font.js │ │ ├── components │ │ │ ├── index.js │ │ │ └── button │ │ │ │ ├── index.js │ │ │ │ ├── base.js │ │ │ │ ├── primary.js │ │ │ │ └── secondary.js │ │ └── package.json │ ├── custom-file-header │ │ ├── tokens │ │ │ └── color.json │ │ └── package.json │ ├── transitive-transforms │ │ ├── tokens │ │ │ ├── hue.json5 │ │ │ ├── alpha.json5 │ │ │ ├── lightness.json5 │ │ │ ├── saturation.json5 │ │ │ └── color │ │ │ │ ├── overlay.json5 │ │ │ │ └── font.json5 │ │ └── package.json │ ├── format-helpers │ │ ├── tokens │ │ │ └── color.json │ │ ├── package.json │ │ └── README.md │ └── yaml-tokens │ │ ├── tokens │ │ └── color │ │ │ └── core.yaml │ │ └── package.json ├── complete │ ├── android │ │ ├── settings.gradle │ │ ├── styledictionary │ │ │ ├── src │ │ │ │ ├── main │ │ │ │ │ ├── res │ │ │ │ │ │ └── values │ │ │ │ │ │ │ └── strings.xml │ │ │ │ │ └── AndroidManifest.xml │ │ │ │ └── test │ │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── example │ │ │ │ │ └── styledictionary │ │ │ │ │ └── ExampleUnitTest.java │ │ │ ├── proguard-rules.pro │ │ │ └── build.gradle │ │ ├── gradle │ │ │ └── wrapper │ │ │ │ ├── gradle-wrapper.jar │ │ │ │ └── gradle-wrapper.properties │ │ ├── demo │ │ │ ├── src │ │ │ │ ├── main │ │ │ │ │ ├── res │ │ │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ │ │ └── ic_launcher.png │ │ │ │ │ │ ├── anim │ │ │ │ │ │ │ ├── slide_from_left.xml │ │ │ │ │ │ │ ├── slide_from_right.xml │ │ │ │ │ │ │ ├── slide_to_left.xml │ │ │ │ │ │ │ └── slide_to_right.xml │ │ │ │ │ │ ├── values-w820dp │ │ │ │ │ │ │ └── dimens.xml │ │ │ │ │ │ ├── layout │ │ │ │ │ │ │ ├── activity_icon_detail.xml │ │ │ │ │ │ │ ├── activity_property_detail.xml │ │ │ │ │ │ │ ├── activity_font_color.xml │ │ │ │ │ │ │ ├── activity_background_color.xml │ │ │ │ │ │ │ ├── activity_icon_list.xml │ │ │ │ │ │ │ ├── activity_properties.xml │ │ │ │ │ │ │ ├── fragment_property_list.xml │ │ │ │ │ │ │ └── activity_base_color.xml │ │ │ │ │ │ └── values │ │ │ │ │ │ │ └── dimens.xml │ │ │ │ │ └── java │ │ │ │ │ │ └── com │ │ │ │ │ │ └── amazon │ │ │ │ │ │ └── styledictionaryexample │ │ │ │ │ │ ├── util │ │ │ │ │ │ └── StringHelper.kt │ │ │ │ │ │ └── models │ │ │ │ │ │ └── StyleDictionaryNode.kt │ │ │ │ ├── test │ │ │ │ │ └── java │ │ │ │ │ │ └── com │ │ │ │ │ │ └── amazon │ │ │ │ │ │ └── styledictionaryexample │ │ │ │ │ │ └── ExampleUnitTest.java │ │ │ │ └── androidTest │ │ │ │ │ └── java │ │ │ │ │ └── com │ │ │ │ │ └── amazon │ │ │ │ │ └── styledictionaryexample │ │ │ │ │ └── ApplicationTest.java │ │ │ └── proguard-rules.pro │ │ ├── .gitignore │ │ └── build.gradle │ ├── ios │ │ ├── Demo │ │ │ ├── StyleDictionary │ │ │ │ ├── en.lproj │ │ │ │ │ └── InfoPlist.strings │ │ │ │ ├── Components │ │ │ │ │ ├── FontColorViewCell.m │ │ │ │ │ ├── ColorCell.h │ │ │ │ │ ├── FontColorViewCell.h │ │ │ │ │ ├── HeaderCollectionViewCell.h │ │ │ │ │ └── CardViewCell.h │ │ │ │ ├── StyleDictionaryViewController.h │ │ │ │ ├── StyleDictionary-Prefix.pch │ │ │ │ ├── StyleDictionaryAppDelegate.h │ │ │ │ ├── main.m │ │ │ │ ├── Views │ │ │ │ │ ├── ColorViewController.h │ │ │ │ │ └── SizeViewController.h │ │ │ │ └── StyleDictionaryViewController.m │ │ │ ├── Podfile │ │ │ ├── Pods │ │ │ │ ├── Target Support Files │ │ │ │ │ ├── StyleDictionary │ │ │ │ │ │ ├── StyleDictionary.modulemap │ │ │ │ │ │ ├── StyleDictionary-dummy.m │ │ │ │ │ │ ├── StyleDictionary-prefix.pch │ │ │ │ │ │ ├── StyleDictionary.xcconfig │ │ │ │ │ │ └── StyleDictionary-umbrella.h │ │ │ │ │ └── Pods-StyleDictionary_Demo │ │ │ │ │ │ ├── Pods-StyleDictionary_Demo.modulemap │ │ │ │ │ │ ├── Pods-StyleDictionary_Demo-dummy.m │ │ │ │ │ │ ├── Pods-StyleDictionary_Demo-umbrella.h │ │ │ │ │ │ ├── Pods-StyleDictionary_Demo.debug.xcconfig │ │ │ │ │ │ └── Pods-StyleDictionary_Demo.release.xcconfig │ │ │ │ ├── Manifest.lock │ │ │ │ └── Local Podspecs │ │ │ │ │ └── StyleDictionary.podspec.json │ │ │ ├── StyleDictionary.xcodeproj │ │ │ │ └── project.xcworkspace │ │ │ │ │ └── contents.xcworkspacedata │ │ │ ├── StyleDictionary.xcworkspace │ │ │ │ └── contents.xcworkspacedata │ │ │ └── Podfile.lock │ │ └── Classes │ │ │ ├── UIButton+StyleDictionary.h │ │ │ ├── UIButton+StyleDictionary.m │ │ │ └── UIFont+MaterialIcons.h │ ├── assets │ │ └── fonts │ │ │ ├── Roboto-Regular.ttf │ │ │ ├── OpenSans-Regular.ttf │ │ │ ├── MaterialIcons-Regular.eot │ │ │ ├── MaterialIcons-Regular.ttf │ │ │ ├── MaterialIcons-Regular.woff │ │ │ └── MaterialIcons-Regular.woff2 │ ├── tokens │ │ ├── font.json │ │ ├── size │ │ │ ├── icon.json │ │ │ ├── padding.json │ │ │ └── font.json │ │ ├── time.json │ │ ├── color │ │ │ ├── chart.json │ │ │ ├── border.json │ │ │ └── brand.json │ │ └── asset │ │ │ └── font.json │ ├── .gitignore │ ├── package.json │ ├── README.md │ └── StyleDictionary.podspec └── basic │ └── tokens │ ├── color │ ├── font.json │ └── base.json │ └── size │ └── font.json ├── __tests__ ├── __configs │ ├── test.js │ └── include.json ├── __json_files │ ├── yaml.yaml │ ├── broken │ │ └── broken.json │ ├── simple.json │ ├── module_exports_object.js │ ├── test │ │ └── directory.json │ ├── circular.json │ ├── circular_5.json │ ├── shallow │ │ ├── 3.json5 │ │ ├── 4.jsonc │ │ ├── 1.json │ │ └── 2.json │ ├── nested_pointers.json │ ├── circular_2.json │ ├── multiple_reference_errors.json │ ├── no_reference.json │ ├── nested_pointers_2.json │ ├── circular_3.json │ ├── reference_type.json │ ├── non_existent.json │ ├── nested_pointers_3.json │ ├── array.json │ ├── circular_4.json │ ├── nested_references.json │ ├── not_circular.json │ └── nested_pointers_4.json ├── __assets │ └── images │ │ ├── hdpi │ │ ├── flag_us_base.png │ │ └── flag_us_small.png │ │ ├── mdpi │ │ ├── flag_us_base.png │ │ └── flag_us_small.png │ │ ├── xhdpi │ │ ├── flag_us_base.png │ │ └── flag_us_small.png │ │ └── xxhdpi │ │ ├── flag_us_base.png │ │ └── flag_us_small.png ├── __properties │ ├── comment.json │ ├── font.json │ ├── nonPropertyNode.json │ ├── paddings.1.json │ ├── paddings.json │ ├── font_sizes.json │ └── images │ │ └── flags │ │ └── us.json └── __setup.js ├── .jsdoc.json ├── format-helpers.js ├── .husky └── pre-commit ├── .npmignore ├── NOTICE ├── scripts ├── handlebars │ ├── header.hbs │ ├── templates │ │ ├── api.hbs │ │ └── transform_groups.hbs │ ├── body.hbs │ └── sig-name.hbs ├── clearDocCache.js └── version.js ├── __integration__ ├── tokens │ ├── size │ │ ├── border.json │ │ ├── font.json │ │ └── padding.json │ └── color │ │ ├── border.json │ │ ├── brand.json │ │ ├── background.json │ │ └── font.jsonc └── _constants.js ├── .github ├── PULL_REQUEST_TEMPLATE.md └── workflows │ └── test.yml ├── .editorconfig ├── lib └── utils │ ├── jsonc.js │ └── references │ └── defaults.js ├── .eslintrc.json └── types ├── _helpers.ts ├── FileHeader.d.ts ├── TransformGroup.d.ts ├── Filter.d.ts ├── Matcher.d.ts └── Options.d.ts /docs/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /examples/advanced/s3/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /__tests__/__configs/test.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./test.json") -------------------------------------------------------------------------------- /__tests__/__json_files/yaml.yaml: -------------------------------------------------------------------------------- 1 | foo: "bar" 2 | bar: "{foo}" 3 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true -------------------------------------------------------------------------------- /examples/advanced/npm-module/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/component-cti/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/custom-filters/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /.jsdoc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["./node_modules/jsdoc-escape-at"] 3 | } 4 | -------------------------------------------------------------------------------- /__tests__/__json_files/broken/broken.json: -------------------------------------------------------------------------------- 1 | { 2 | invalid: "json", 3 | } 4 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/auto-rebuild-watcher/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/.gitattributes: -------------------------------------------------------------------------------- 1 | *.pbxproj -text 2 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/variables-in-outputs/.gitignore: -------------------------------------------------------------------------------- 1 | build 2 | node_modules 3 | -------------------------------------------------------------------------------- /format-helpers.js: -------------------------------------------------------------------------------- 1 | module.exports = require("./lib/common/formatHelpers"); 2 | -------------------------------------------------------------------------------- /__tests__/__json_files/simple.json: -------------------------------------------------------------------------------- 1 | { 2 | "foo": "bar", 3 | "bar": "{foo}" 4 | } -------------------------------------------------------------------------------- /examples/complete/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':demo', ':styledictionary' 2 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npm test 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .eslintrc.json 3 | .editorconfig 4 | images/ 5 | test/ 6 | -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | node_modules/ 3 | -------------------------------------------------------------------------------- /NOTICE: -------------------------------------------------------------------------------- 1 | Style Dictionary 2 | Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | -------------------------------------------------------------------------------- /docs/assets/cti.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/cti.png -------------------------------------------------------------------------------- /docs/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/logo.png -------------------------------------------------------------------------------- /__tests__/__json_files/module_exports_object.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "foo": "bar", 3 | "bar": "{foo}" 4 | } 5 | -------------------------------------------------------------------------------- /__tests__/__json_files/test/directory.json: -------------------------------------------------------------------------------- 1 | { 2 | "test": { 3 | "a": { 4 | "b": 1 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /docs/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/favicon.png -------------------------------------------------------------------------------- /__tests__/__json_files/circular.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": "{b}", 3 | "b": "{c}", 4 | "c": "{d}", 5 | "d": "{a}" 6 | } 7 | -------------------------------------------------------------------------------- /__tests__/__json_files/circular_5.json: -------------------------------------------------------------------------------- 1 | { 2 | "k": "{l}", 3 | "l": "{m}", 4 | "m": "{l}", 5 | "n": "{k}" 6 | } 7 | -------------------------------------------------------------------------------- /__tests__/__json_files/shallow/3.json5: -------------------------------------------------------------------------------- 1 | { 2 | json5A: 5, 3 | // some comment 4 | d: { 5 | json5e: 1, 6 | }, 7 | } 8 | -------------------------------------------------------------------------------- /docs/assets/fake_player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/fake_player.png -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/en.lproj/InfoPlist.strings: -------------------------------------------------------------------------------- 1 | /* Localized versions of Info.plist keys */ 2 | 3 | -------------------------------------------------------------------------------- /scripts/handlebars/header.hbs: -------------------------------------------------------------------------------- 1 | {{>heading-indent}} 2 | {{#if typicalname}}{{{typicalname}}}{{else}}{{{name}}} {{/if}} 3 | -------------------------------------------------------------------------------- /docs/assets/build-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/build-diagram.png -------------------------------------------------------------------------------- /scripts/handlebars/templates/api.hbs: -------------------------------------------------------------------------------- 1 | # API 2 | 3 | {{#module name="style-dictionary"}} 4 | {{>members}} 5 | {{/module}} 6 | -------------------------------------------------------------------------------- /__tests__/__json_files/shallow/4.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "jsonCA": 5, 3 | // some comment 4 | "d": { 5 | "jsonCe": 1 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /__tests__/__json_files/nested_pointers.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 1, 3 | "b": "{a}", 4 | "c": "{b}", 5 | "d": "{e}", 6 | "e": "{c}" 7 | } -------------------------------------------------------------------------------- /__tests__/__json_files/circular_2.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": { 3 | "b": { 4 | "c": "{j}" 5 | } 6 | }, 7 | "j": "{a.b.c}" 8 | } 9 | -------------------------------------------------------------------------------- /docs/assets/property-definitions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/docs/assets/property-definitions.png -------------------------------------------------------------------------------- /examples/advanced/custom-parser/tokens/color/core.json: -------------------------------------------------------------------------------- 1 | { 2 | "blue": { "value": "#0000ff" }, 3 | "red": { "value": "#ff0000" } 4 | } 5 | -------------------------------------------------------------------------------- /examples/advanced/flutter/README.md: -------------------------------------------------------------------------------- 1 | # style_dictionary 2 | 3 | A Flutter package project to show the usage of styled-dictionary's flutter support. -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/tokens/globals.json: -------------------------------------------------------------------------------- 1 | { 2 | "globals": { 3 | "baseline": "16", 4 | "unit": "px" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /__tests__/__json_files/multiple_reference_errors.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": { 3 | "b": "{b.a}", 4 | "c": "{b.c}", 5 | "d": "{d}" 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/color/border.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: { value: "{color.core.grey.20.value}" } 3 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | color: require('./color'), 3 | size: require('./size') 4 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Podfile: -------------------------------------------------------------------------------- 1 | use_frameworks! 2 | 3 | target 'StyleDictionary_Demo' do 4 | pod 'StyleDictionary', :path => '../../' 5 | 6 | end 7 | -------------------------------------------------------------------------------- /scripts/clearDocCache.js: -------------------------------------------------------------------------------- 1 | const jsdoc2md = require('jsdoc-to-markdown'); 2 | 3 | async function clear() { 4 | await jsdoc2md.clear() 5 | }; 6 | 7 | clear(); -------------------------------------------------------------------------------- /__tests__/__assets/images/hdpi/flag_us_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/hdpi/flag_us_base.png -------------------------------------------------------------------------------- /__tests__/__assets/images/mdpi/flag_us_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/mdpi/flag_us_base.png -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/components/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | component: { 3 | button: require('./button') 4 | } 5 | } -------------------------------------------------------------------------------- /examples/complete/android/styledictionary/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | styledictionary 3 | 4 | -------------------------------------------------------------------------------- /__tests__/__assets/images/hdpi/flag_us_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/hdpi/flag_us_small.png -------------------------------------------------------------------------------- /__tests__/__assets/images/mdpi/flag_us_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/mdpi/flag_us_small.png -------------------------------------------------------------------------------- /__tests__/__assets/images/xhdpi/flag_us_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/xhdpi/flag_us_base.png -------------------------------------------------------------------------------- /__tests__/__assets/images/xhdpi/flag_us_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/xhdpi/flag_us_small.png -------------------------------------------------------------------------------- /__tests__/__assets/images/xxhdpi/flag_us_base.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/xxhdpi/flag_us_base.png -------------------------------------------------------------------------------- /__tests__/__json_files/no_reference.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 1, 3 | "b": { 4 | "c": 2, 5 | "d": { 6 | "e": 3 7 | } 8 | }, 9 | "f": 4 10 | } -------------------------------------------------------------------------------- /__tests__/__properties/comment.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "large": { 4 | "value": 20, 5 | "comment": "this is a comment" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/ios/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "height": { 4 | "value": "50px" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/web/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "height": { 4 | "value": "40px" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/complete/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /__integration__/tokens/size/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "border": { 4 | "radius": { 5 | "large": { "value": 30 } 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /__tests__/__assets/images/xxhdpi/flag_us_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/__tests__/__assets/images/xxhdpi/flag_us_small.png -------------------------------------------------------------------------------- /__tests__/__json_files/nested_pointers_2.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": "{b}", 3 | "b": "{c}", 4 | "c": "{d}", 5 | "d": "{e}", 6 | "e": "{f}", 7 | "f": "{g}", 8 | "g": 1 9 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/android/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "height": { 4 | "value": "50px" 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /examples/complete/assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /__tests__/__json_files/circular_3.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": { 3 | "b": "{c.d.e}" 4 | }, 5 | "c": { 6 | "d": { 7 | "e": "{a.b}" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /__tests__/__setup.js: -------------------------------------------------------------------------------- 1 | const constantDate = new Date('2000-01-01'); 2 | global.Date = function() { return constantDate }; 3 | global.Date.now = function() { return constantDate }; -------------------------------------------------------------------------------- /examples/advanced/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/metro.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transformer: { 3 | assetPlugins: ['expo-asset/tools/hashAssetFiles'], 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /__tests__/__json_files/reference_type.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 1, 3 | "b": { 4 | "c": 2 5 | }, 6 | "d": "{a}", 7 | "e": "{b}", 8 | "f": [1,2,3], 9 | "g": "{f}" 10 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | create-react-native-app 3 | 4 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "version" : 1, 4 | "author" : "xcode" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/components/button/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | primary: require('./primary'), 3 | secondary: require('./secondary') 4 | } -------------------------------------------------------------------------------- /examples/complete/assets/fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /examples/complete/assets/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /examples/complete/assets/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/tokens/assets/images.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "image": { 4 | "logo": { "value": "assets/images/logo.png" } 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/android/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "platform": { 4 | "system": { "value": "Roboto" } 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/ios/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "platform": { 4 | "system": { "value": "San Francisco" } 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /examples/complete/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/complete/assets/fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/assets/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /__tests__/__json_files/non_existent.json: -------------------------------------------------------------------------------- 1 | { 2 | "foo": "{bar}", 3 | "baz": "boo", 4 | "a": { 5 | "b": { 6 | "c": "1" 7 | } 8 | }, 9 | "error": "{a.b.d}" 10 | } -------------------------------------------------------------------------------- /__tests__/__properties/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "font": { 4 | "icon": { 5 | "value": "./test/__assets/fonts/scapp_icons-regular.ttf" 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/images/logo.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/.buckconfig: -------------------------------------------------------------------------------- 1 | 2 | [android] 3 | target = Google Inc.:Google APIs:23 4 | 5 | [maven_repositories] 6 | central = https://repo1.maven.org/maven2 7 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /examples/advanced/s3/assets/fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/s3/assets/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /examples/advanced/flutter/.gitignore: -------------------------------------------------------------------------------- 1 | # style dictionary 2 | 3 | /lib/unique_file 4 | /lib/style_dictionary_color.dart 5 | /lib/style_dictionary_sizes.dart 6 | .dart_tool/ 7 | .packages 8 | pubspec.lock -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/size/index.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | padding: require('./padding'), 3 | font: require('./font'), 4 | border: require('./border') 5 | } -------------------------------------------------------------------------------- /__tests__/__json_files/nested_pointers_3.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": "{b} bar", 3 | "b": "{c} baz", 4 | "c": "{d} bla", 5 | "d": "{e} boo", 6 | "e": "{f} bae", 7 | "f": "{g} bee", 8 | "g": "foo bon" 9 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/debug.keystore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/debug.keystore -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/OpenSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/OpenSans-Regular.ttf -------------------------------------------------------------------------------- /examples/advanced/create-react-app/README.media/react-app-screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-app/README.media/react-app-screenshot.png -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/platforms/web/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "platform": { 4 | "system": { "value": "Tahoma, Arial, 'Helvetica Neue', sans" } 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/demo/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/demo/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/demo/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/templates/android-xml_alt.hbs: -------------------------------------------------------------------------------- 1 | 2 | {{#each allTokens}} 3 | {{value}} 4 | {{/each}} 5 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/components/button/base.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | padding: { value: '{size.padding.base.value}' }, 3 | 'font-size': { value: '{size.font.large.value}' } 4 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/demo/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/complete/android/demo/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /__integration__/tokens/color/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "border": { 4 | "primary": { "value": "{color.core.neutral.300.value}" }, 5 | "secondary": {}, 6 | "tertiary": {} 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.eot -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.ttf -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.woff -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small": { "value": 0.75 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 1.5 } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | *Issue #, if available:* 2 | 3 | *Description of changes:* 4 | 5 | 6 | By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license. 7 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/assets-base64-embed/assets/fonts/MaterialIcons-Regular.woff2 -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/size/padding.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "small": { "value": 0.5 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 2 } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/templates/web-scss.template: -------------------------------------------------------------------------------- 1 | <% _.each(allTokens, function(prop) { 2 | %>$<%= prop.name %>: <%= prop.value %>;<% if (prop.comment) { %> // <%= prop.comment %><% } %> 3 | <% }); %> -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/brands/brand-1/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "primary" : { "value": "#3B5998" }, 5 | "secondary" : { "value": "#4267B2" } 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/brands/brand-2/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "primary" : { "value": "#1DA1F2" }, 5 | "secondary" : { "value": "#AAB8C2" } 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/brands/brand-3/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "primary" : { "value": "#EA4335" }, 5 | "secondary" : { "value": "#34A853" } 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /examples/advanced/flutter/style_dictionary/properties/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small": { "value": 0.75 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 1.5 } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/size/border.js: -------------------------------------------------------------------------------- 1 | // Look! No namespaces! 2 | module.exports = { 3 | width: { 4 | base: { value: 0.125 } 5 | }, 6 | radius: { 7 | base: { value: 0.25 } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/StyleDictionary/StyleDictionary.modulemap: -------------------------------------------------------------------------------- 1 | framework module StyleDictionary { 2 | umbrella header "StyleDictionary-umbrella.h" 3 | 4 | export * 5 | module * { export * } 6 | } 7 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/components/with-css-modules/css-modules-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-app/src/components/with-css-modules/css-modules-logo.png -------------------------------------------------------------------------------- /examples/advanced/custom-file-header/tokens/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "core": { 4 | "red": { "value": "#ff0000" }, 5 | "blue": { "value": "#00ff00" }, 6 | "green": { "value": "#0000ff" } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/flutter/style_dictionary/properties/size/padding.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "small": { "value": 0.5 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 2 } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/StyleDictionary/StyleDictionary-dummy.m: -------------------------------------------------------------------------------- 1 | #import 2 | @interface PodsDummy_StyleDictionary : NSObject 3 | @end 4 | @implementation PodsDummy_StyleDictionary 5 | @end 6 | -------------------------------------------------------------------------------- /__integration__/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small": { "value": 0.75 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 1.5 }, 7 | "xl": { "value": 2.25 } 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /__integration__/tokens/size/padding.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "small": { "value": 0.5 }, 5 | "medium": { "value": 1 }, 6 | "large": { "value": 1 }, 7 | "xl": { "value": 1 } 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /__tests__/__json_files/shallow/1.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 1, 3 | "b": { 4 | "a": 1 5 | }, 6 | "c": [ 7 | 1, 8 | 2 9 | ], 10 | "d": { 11 | "e": { 12 | "f": { 13 | "g": 1 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /__tests__/__json_files/shallow/2.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 2, 3 | "b": { 4 | "c": 2 5 | }, 6 | "c": [ 7 | 3, 8 | 4 9 | ], 10 | "d": { 11 | "e": { 12 | "f": { 13 | "h": 2 14 | } 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "red": { 4 | "value": "#FF0000" 5 | }, 6 | "blue": { 7 | "value": "#0000FF" 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/globals/font/index.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "family": { 4 | "headers" : { "value": "Montserrat" }, 5 | "base" : { "value": "{font.platform.system.value}" } 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/color/background.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: { value: "#ffffff" }, 3 | alt: { value: "{color.core.grey.20.value}" }, 4 | link: { value: "{color.brand.primary.base.value}" } 5 | }; -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/color/background.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "background": { 4 | "primary": { "value": "#ffffff" }, 5 | "link": { "value": "#0366d6" }, 6 | "inverse": { "value": "#111111" } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /__tests__/__json_files/array.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": 1, 3 | "b": { 4 | "c": 2 5 | }, 6 | "d": [ 7 | "{b.c}", 8 | "{a}" 9 | ], 10 | "e": [ 11 | { 12 | "a": "{a}" 13 | }, 14 | { 15 | "a": "{b.c}" 16 | } 17 | ] 18 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/components/with-styled-components/styled-components-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-app/src/components/with-styled-components/styled-components-logo.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/drawable/splashscreen_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/drawable/splashscreen_image.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/advanced/flutter/style_dictionary/properties/color/background.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "background": { 4 | "primary": { "value": "#ffffff" }, 5 | "link": { "value": "#0366d6" }, 6 | "inverse": { "value": "#111111" } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/hue.json5: -------------------------------------------------------------------------------- 1 | { 2 | hue: { 3 | red: 0, 4 | orange: 25, 5 | yellow: 50, 6 | lime: 75, 7 | green: 125, 8 | teal: 175, 9 | blue: 225, 10 | purple: 275, 11 | pink: 325 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/Pods-StyleDictionary_Demo/Pods-StyleDictionary_Demo.modulemap: -------------------------------------------------------------------------------- 1 | framework module Pods_StyleDictionary_Demo { 2 | umbrella header "Pods-StyleDictionary_Demo-umbrella.h" 3 | 4 | export * 5 | module * { export * } 6 | } 7 | -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/tokens/index.js: -------------------------------------------------------------------------------- 1 | const { readdirSync, statSync } = require("fs"); 2 | const { join } = require("path"); 3 | const dirs = (p) => 4 | readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory()); 5 | module.exports = dirs(__dirname); 6 | -------------------------------------------------------------------------------- /__tests__/__json_files/circular_4.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": { 3 | "b": { 4 | "c": { 5 | "d": "{e.f.g}" 6 | } 7 | } 8 | }, 9 | "e": { 10 | "f": { 11 | "g": "{h.i}" 12 | } 13 | }, 14 | "h": { 15 | "i": "{a.b.c.d}" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /__tests__/__json_files/nested_references.json: -------------------------------------------------------------------------------- 1 | { 2 | "test": "1", 3 | "a": { 4 | "b": { 5 | "c": 1, 6 | "d": "{e.f.g}" 7 | } 8 | }, 9 | "e": { 10 | "f": { 11 | "g": 2, 12 | "h": "{a.b.c}" 13 | } 14 | }, 15 | "i": "{e.f.g}" 16 | } -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/tokens/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "border" : { 4 | "width": { 5 | "value": "1" 6 | }, 7 | "radius": { 8 | "value": "0.01", 9 | "group": "ratio" 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/Pods-StyleDictionary_Demo/Pods-StyleDictionary_Demo-dummy.m: -------------------------------------------------------------------------------- 1 | #import 2 | @interface PodsDummy_Pods_StyleDictionary_Demo : NSObject 3 | @end 4 | @implementation PodsDummy_Pods_StyleDictionary_Demo 5 | @end 6 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/complete/tokens/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "family": { 4 | "base": { 5 | "value": "{asset.font.opensans.name.value}" 6 | }, 7 | "icons": { 8 | "value": "{asset.font.icon.name.value}" 9 | } 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/color/core.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "core": { 4 | "white": { "value": "#ffffff" }, 5 | "black": { "value": "#111111" }, 6 | "gray": { "value": "#dddddd" }, 7 | "blue": { "value": "#0366d6" } 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "primary": { "value": "{color.core.black.value}" }, 5 | "link": { "value": "{color.core.blue.value}" }, 6 | "inverse": { "value": "{color.core.white.value}" } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-app/style-dictionary/properties/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "spacing": { 3 | "small": { 4 | "value": "10px" 5 | }, 6 | "medium": { 7 | "value": "20px" 8 | }, 9 | "large": { 10 | "value": "30px" 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /__integration__/tokens/color/brand.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "primary": { 5 | "value": "{color.core.aqua.700.value}" 6 | }, 7 | 8 | "secondary": { 9 | "value": "{color.core.purple.700.value}" 10 | } 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /examples/complete/android/.gitignore: -------------------------------------------------------------------------------- 1 | # Style Dictionary 2 | styledictionary/src/main/res/values/style_dictionary_* 3 | styledictionary/src/main/assets/ 4 | 5 | *.iml 6 | .gradle 7 | local.properties 8 | /.idea/workspace.xml 9 | /.idea/libraries 10 | .DS_Store 11 | build 12 | captures 13 | -------------------------------------------------------------------------------- /examples/advanced/flutter/style_dictionary/properties/color/core.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "core": { 4 | "white": { "value": "#ffffff" }, 5 | "black": { "value": "#111111" }, 6 | "gray": { "value": "#dddddd" }, 7 | "blue": { "value": "#0366d6" } 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /examples/advanced/format-helpers/tokens/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "core": { 4 | "greener": { "value": "{color.core.green.value}" }, 5 | "red": { "value": "#ff0000" }, 6 | "blue": { "value": "#0000ff" }, 7 | "green": { "value": "#00ff00" } 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /examples/basic/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/complete/tokens/size/icon.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "icon": { 4 | "small": { "value":"1.5" }, 5 | "base" : { "value":"2.0" }, 6 | "large": { "value":"2.5" }, 7 | "xl" : { "value":"3.0" }, 8 | "xxl" : { "value":"5.0" } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreen.imageset/splashscreen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreen.imageset/splashscreen.png -------------------------------------------------------------------------------- /examples/advanced/flutter/style_dictionary/properties/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "primary": { "value": "{color.core.black.value}" }, 5 | "link": { "value": "{color.core.blue.value}" }, 6 | "inverse": { "value": "{color.core.white.value}" } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/tokens/size/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "small": { 4 | "value": "2px" 5 | }, 6 | "medium": { 7 | "value": "8px" 8 | }, 9 | "large": { 10 | "value": "16px" 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /examples/advanced/s3/properties/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/complete/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Thu Mar 02 13:41:05 PST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.2-all.zip -------------------------------------------------------------------------------- /__tests__/__properties/nonPropertyNode.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "key1": "testing", 4 | "base": { 5 | "red": { 6 | "value": "#f00", 7 | "key2": "also testing" 8 | }, 9 | "attributes": { 10 | "key3": "more testing" 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/advanced/npm-module/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/edit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/yaml-tokens/tokens/color/core.yaml: -------------------------------------------------------------------------------- 1 | color: 2 | base: 3 | white: 4 | value: "#fff" 5 | red: 6 | value: 7 | r: 255 8 | g: 0 9 | b: 0 10 | green: 11 | value: "rgb(0,255,0)" 12 | success: 13 | value: "{color.base.green.value}" 14 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreenBackground.imageset/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/divriots/browser-style-dictionary/HEAD/examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreenBackground.imageset/background.png -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/main.m: -------------------------------------------------------------------------------- 1 | #import 2 | 3 | #import "AppDelegate.h" 4 | 5 | int main(int argc, char * argv[]) { 6 | @autoreleasepool { 7 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class])); 8 | } 9 | } 10 | 11 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/globals/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "border": { 4 | "radius": { 5 | "value": "4px" 6 | } 7 | }, 8 | "text": { 9 | "size": { 10 | "value": "{size.font.medium.value}" 11 | } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/color/font.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | base: { value: "{color.core.grey.100.value}" }, 3 | secondary: { value: "{color.core.grey.80.value}" }, 4 | link: { value: "{color.brand.primary.base.value}" }, 5 | inverse: { 6 | base: { value: "#fff" } 7 | } 8 | } -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.gray.dark.value}" }, 5 | "faded": { "value": "{color.base.gray.medium.value}" }, 6 | "error": { "value": "{color.base.red.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/auto-rebuild-watcher/tokens/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/edit-2.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/values/colors.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | #FFFFFF 5 | 6 | -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/properties/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.red.value}" }, 5 | "secondary": { "value": "{color.base.green.value}" }, 6 | "tertiary" : { "value": "{color.base.gray.light.value}" } 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/size/padding.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | '1': { value: 0.5 }, 3 | '2': { value: 1 }, 4 | '3': { value: 2 }, 5 | '4': { value: 3.5 }, 6 | '5': { value: 5 }, 7 | 8 | base: { value: '{size.padding.1.value}' }, 9 | large: { value: '{size.padding.2.value}' }, 10 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/bookmark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/StyleDictionary/StyleDictionary-prefix.pch: -------------------------------------------------------------------------------- 1 | #ifdef __OBJC__ 2 | #import 3 | #else 4 | #ifndef FOUNDATION_EXPORT 5 | #if defined(__cplusplus) 6 | #define FOUNDATION_EXPORT extern "C" 7 | #else 8 | #define FOUNDATION_EXPORT extern 9 | #endif 10 | #endif 11 | #endif 12 | 13 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/__tests__/App.js: -------------------------------------------------------------------------------- 1 | import "react-native"; 2 | import React from "react"; 3 | import App from "../src/App"; 4 | 5 | // Note: test renderer must be required after react-native. 6 | import renderer from "react-test-renderer"; 7 | 8 | it("renders correctly", () => { 9 | renderer.create(); 10 | }); 11 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-native-app", 3 | "displayName": "create-react-native-app", 4 | "expo": { 5 | "name": "create-react-native-app", 6 | "slug": "create-react-native-app", 7 | "version": "1.0.0", 8 | "assetBundlePatterns": [ 9 | "**/*" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["tokens/**/*.json"], 3 | "platforms": { 4 | "example": { 5 | "transformGroup": "web", 6 | "buildPath": "build/json/", 7 | "files": [{ 8 | "destination": "variables.json", 9 | "format": "json/flat" 10 | }] 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/edit-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Components/FontColorViewCell.m: -------------------------------------------------------------------------------- 1 | // 2 | // FontColorViewCell.m 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 1/29/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import "FontColorViewCell.h" 10 | 11 | @implementation FontColorViewCell 12 | 13 | @end 14 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/folder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/tokens/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "margin": { 3 | "small" : { 4 | "value": "0.15", 5 | "group": "spacing" 6 | }, 7 | "medium": { 8 | "value": "0.25", 9 | "group": "spacing" 10 | }, 11 | "large" : { 12 | "value": "0.4", 13 | "group": "spacing" 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/tokens/button/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "background": { 4 | "color": { 5 | "value": "{color.blue.value}" 6 | } 7 | }, 8 | "text": { 9 | "color": { 10 | "value": "#FFFFFF" 11 | } 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/color/index.js: -------------------------------------------------------------------------------- 1 | // This is kinda cool, don't have to do that 2 | // weird JSON structure nesting in every file. 3 | module.exports = { 4 | core: require('./core'), 5 | brand: require('./brand'), 6 | font: require('./font'), 7 | background: require('./background'), 8 | border: require('./border') 9 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/size/font.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | '1': { value: 0.75 }, 3 | '2': { value: 0.875 }, 4 | '3': { value: 1 }, 5 | '4': { value: 1.25 }, 6 | '5': { value: 1.75 }, 7 | '6': { value: 2.5 }, 8 | 9 | base: { value: '{size.font.3.value}' }, 10 | large: { value: '{size.font.4.value}' }, 11 | } -------------------------------------------------------------------------------- /examples/basic/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/android/styledictionary/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/complete/ios/Classes/UIButton+StyleDictionary.h: -------------------------------------------------------------------------------- 1 | // 2 | // UIButton+StyleDictionary.h 3 | // Pods 4 | // 5 | // Created by Banks, Daniel on 1/28/17. 6 | // 7 | // 8 | 9 | #import 10 | #import "UIColor+StyleDictionary.h" 11 | 12 | @interface UIButton (StyleDictionary) 13 | 14 | + (UIButton *)styleDictionaryButton; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/edit-3.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/npm-module/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/dollar-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/properties/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/custom-file-header/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-file-header", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "sd.config.js", 6 | "scripts": { 7 | "build": "node build.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "style-dictionary": "3.1.1" 14 | } 15 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/book-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/auto-rebuild-watcher/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/briefcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /__tests__/__json_files/not_circular.json: -------------------------------------------------------------------------------- 1 | { 2 | "prop1" : { "value": "test1 value" }, 3 | "prop2" : { "value": "test2 value" }, 4 | "prop3" : { "value": "{prop1.value}" }, 5 | "prop4" : { "value": "{prop3.value}" }, 6 | "prop12" : { "value": "{prop1.value}, {prop2.value} and some extra stuff" }, 7 | "prop124" : { "value": "{prop1.value}, {prop2.value} and {prop4.value}" } 8 | } 9 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/check-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/file.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/check-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/book-open.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/dollar-sign.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/index.js: -------------------------------------------------------------------------------- 1 | import { registerRootComponent } from "expo"; 2 | 3 | import App from "./src/App"; 4 | 5 | // registerRootComponent calls AppRegistry.registerComponent('main', () => App); 6 | // It also ensures that whether you load the app in the Expo client or in a native build, 7 | // the environment is set up appropriately 8 | registerRootComponent(App); 9 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/edit-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/book.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/briefcase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/properties/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { "value": "#FF0000" }, 10 | "green": { "value": "#00FF00" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/anim/slide_from_left.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/anim/slide_from_right.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/anim/slide_to_left.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/anim/slide_to_right.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/check-square.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/globals/color/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "base" : { "value": "{color.base.black.value}" }, 5 | "primary" : { "value": "{color.primary.value}" }, 6 | "secondary" : { "value": "{color.secondary.value}" }, 7 | "tertiary" : { "value": "{color.base.gray.light.value}" } 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/camera.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/edit-1.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/style-dictionary/properties/color.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "primary": { 5 | "value": "#61dafb" 6 | }, 7 | "secondary": { 8 | "value": "#fc7aa5" 9 | } 10 | }, 11 | "text": { 12 | "value": "#666666" 13 | }, 14 | "background": { 15 | "value": "#EEEEEE" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/settings.gradle: -------------------------------------------------------------------------------- 1 | rootProject.name = 'createreactnativeapp' 2 | 3 | apply from: '../node_modules/react-native-unimodules/gradle.groovy' 4 | includeUnimodulesProjects() 5 | 6 | apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); 7 | applyNativeModulesSettingsGradle(settings) 8 | 9 | include ':app' 10 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/AppDelegate.h: -------------------------------------------------------------------------------- 1 | #import 2 | #import 3 | #import 4 | #import 5 | 6 | #import 7 | 8 | @interface AppDelegate : UMAppDelegateWrapper 9 | 10 | @end 11 | -------------------------------------------------------------------------------- /examples/advanced/custom-parser/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-example-custom-parser", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "style-dictionary build --config ./sd.config.js" 8 | }, 9 | "author": "", 10 | "license": "Apache-2.0", 11 | "devDependencies": { 12 | "style-dictionary": "3.1.1" 13 | } 14 | } -------------------------------------------------------------------------------- /examples/advanced/format-helpers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "format-helpers", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "sd.config.js", 6 | "scripts": { 7 | "build": "style-dictionary build --config ./sd.config.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "Apache-2.0", 12 | "devDependencies": { 13 | "style-dictionary": "3.1.1" 14 | } 15 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/database.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Podfile.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - StyleDictionary (0.1.0) 3 | 4 | DEPENDENCIES: 5 | - StyleDictionary (from `../../`) 6 | 7 | EXTERNAL SOURCES: 8 | StyleDictionary: 9 | :path: ../../ 10 | 11 | SPEC CHECKSUMS: 12 | StyleDictionary: 8db49ccfc0bb0865d76f74903ed3a734e71d1514 13 | 14 | PODFILE CHECKSUM: ec1f1cbad8251d242946ad120e9a8be9cd2c6518 15 | 16 | COCOAPODS: 1.2.0 17 | -------------------------------------------------------------------------------- /lib/utils/jsonc.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs"); 2 | const jsonc = require("jsonc-parser"); 3 | 4 | module.exports = { 5 | register(module, filename) { 6 | const content = fs.readFileSync(filename, "utf8"); 7 | try { 8 | module.exports = jsonc.parse(content); 9 | } catch (err) { 10 | err.message = filename + ": " + err.message; 11 | throw err; 12 | } 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/alert-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/archive.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Manifest.lock: -------------------------------------------------------------------------------- 1 | PODS: 2 | - StyleDictionary (0.1.0) 3 | 4 | DEPENDENCIES: 5 | - StyleDictionary (from `../../`) 6 | 7 | EXTERNAL SOURCES: 8 | StyleDictionary: 9 | :path: ../../ 10 | 11 | SPEC CHECKSUMS: 12 | StyleDictionary: 8db49ccfc0bb0865d76f74903ed3a734e71d1514 13 | 14 | PODFILE CHECKSUM: ec1f1cbad8251d242946ad120e9a8be9cd2c6518 15 | 16 | COCOAPODS: 1.2.0 17 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/drawable/splashscreen.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/advanced/variables-in-outputs/tokens/color/background.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "background": { 4 | "primary": { "value": "{color.palette.neutral.0.value}" }, 5 | "secondary": { "value": "{color.palette.neutral.5.value}" }, 6 | "tertiary": { "value": "{color.palette.neutral.10.value}" }, 7 | "base": { "value": "{color.background.primary.value}" } 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/database.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/delete.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/src/style-dictionary-dist/variables.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 18 Dec 2020 00:08:57 GMT 4 | */ 5 | 6 | export const colorBrand01 = "#eeeeff"; 7 | export const colorBrand02 = "#ddaa33"; 8 | export const sizeFontSm = {"original":"16px","number":16,"decimal":0.16,"scale":256}; 9 | export const sizeFontMd = {"original":"2rem","number":2,"decimal":0.02,"scale":32}; -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/style-dictionary/properties/size/size.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "sm": { 5 | "value": "16px", 6 | "attributes": { 7 | "category": "size" 8 | } 9 | }, 10 | "md": { 11 | "value": "2rem", 12 | "attributes": { 13 | "category": "size" 14 | } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/advanced/yaml-tokens/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-example-yaml-tokens", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "style-dictionary build --config ./sd.config.js" 8 | }, 9 | "author": "", 10 | "license": "Apache-2.0", 11 | "devDependencies": { 12 | "style-dictionary": "3.1.1", 13 | "yaml": "^1.10.0" 14 | } 15 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["./style-dictionary/properties/**/*.json"], 3 | "platforms": { 4 | "rn": { 5 | "transformGroup": "react-native", 6 | "buildPath": "./src/style-dictionary-dist/", 7 | "files": [ 8 | { 9 | "destination": "variables.js", 10 | "format": "javascript/es6" 11 | } 12 | ] 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/style-dictionary/properties/color/brand.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "01": { 5 | "value": "#eef", 6 | "attributes": { 7 | "category": "color" 8 | } 9 | }, 10 | "02": { 11 | "value": "#da3", 12 | "attributes": { 13 | "category": "color" 14 | } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/download-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/external-link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/tokens/size/padding.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "tiny" : { "value": "0.25" }, 5 | "small" : { "value": "0.5" }, 6 | "medium" : { "value": "1" }, 7 | "large" : { "value": "1.5" }, 8 | "xl" : { "value": "2" }, 9 | "xxl" : { "value": "3" }, 10 | "base" : { "value": "{size.padding.medium.value}" } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/variables-in-outputs/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-example-variables-in-outputs", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "sd.config.js", 6 | "scripts": { 7 | "build": "style-dictionary build --config ./sd.config.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "MIT", 12 | "devDependencies": { 13 | "style-dictionary": "3.1.1" 14 | } 15 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/StyleDictionaryViewController.h: -------------------------------------------------------------------------------- 1 | // 2 | // StyleDictionaryViewController.h 3 | // StyleDictionary 4 | // 5 | // Created by Danny Banks on 02/09/2017. 6 | // Copyright (c) 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface StyleDictionaryViewController : UIViewController 13 | 14 | @end 15 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/values-w820dp/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 64dp 6 | 7 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/download-cloud.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/external-link.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "transitive-transforms", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "sd.config.js", 6 | "scripts": { 7 | "build": "style-dictionary build --config ./sd.config.js" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "chroma-js": "^2.1.0", 14 | "style-dictionary": "3.1.1" 15 | } 16 | } -------------------------------------------------------------------------------- /examples/complete/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "tiny" : { "value": "0.75" }, 5 | "small" : { "value": "0.875" }, 6 | "medium": { "value": "1" }, 7 | "large" : { "value": "1.25" }, 8 | "xl" : { "value": "1.5" }, 9 | "xxl" : { "value": "2" }, 10 | "xxxl" : { "value": "3" }, 11 | "base" : { "value": "{size.font.medium.value}" } 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/grid.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/custom-filters/tokens/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "margin": { 3 | "small" : { 4 | "value": "0.15", 5 | "group": "spacing" 6 | }, 7 | "medium": { 8 | "value": "0.25", 9 | "group": "spacing" 10 | }, 11 | "large" : { 12 | "value": "0.6", 13 | "group": "spacing" 14 | }, 15 | "extralarge" : { 16 | "value": "1", 17 | "group": "spacing" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/tokens/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "small" : { 4 | "value": "0.75", 5 | "group": "typography" 6 | }, 7 | "medium": { 8 | "value": "1.5", 9 | "group": "typography" 10 | }, 11 | "large" : { 12 | "value": "2", 13 | "group": "typography" 14 | }, 15 | "base" : { 16 | "value": "1", 17 | "group": "typography" 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /__tests__/__configs/include.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "tiny": { 5 | "value": "3" 6 | }, 7 | "small": { 8 | "value": "5" 9 | }, 10 | "base": { 11 | "value": "10" 12 | }, 13 | "large": { 14 | "value": "15" 15 | }, 16 | "xl": { 17 | "value": "20" 18 | }, 19 | "xxl": { 20 | "value": "30" 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/alert-octagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_icon_detail.xml: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/calendar.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/globe.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/index.scss: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; 11 | } 12 | -------------------------------------------------------------------------------- /examples/advanced/custom-filters/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-filters", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node ./build.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0" 17 | } 18 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Components/ColorCell.h: -------------------------------------------------------------------------------- 1 | // 2 | // ColorCell.h 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 1/21/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface ColorCell : UICollectionViewCell 12 | 13 | @property (nonatomic, strong) UILabel *keyLabel; 14 | @property (nonatomic, strong) UILabel *valueLabel; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/StyleDictionary-Prefix.pch: -------------------------------------------------------------------------------- 1 | // 2 | // Prefix header 3 | // 4 | // The contents of this file are implicitly included at the beginning of every source file. 5 | // 6 | 7 | #import 8 | 9 | #ifndef __IPHONE_5_0 10 | #warning "This project uses features only available in iOS SDK 5.0 and later." 11 | #endif 12 | 13 | #ifdef __OBJC__ 14 | @import UIKit; 15 | @import Foundation; 16 | #endif 17 | -------------------------------------------------------------------------------- /__tests__/__properties/paddings.1.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "tiny": { 5 | "value": "3" 6 | }, 7 | "small": { 8 | "value": "5" 9 | }, 10 | "base": { 11 | "value": "10" 12 | }, 13 | "large": { 14 | "value": "15" 15 | }, 16 | "xl": { 17 | "value": "20" 18 | }, 19 | "xxl": { 20 | "value": "30" 21 | } 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/alert-octagon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/.gitignore: -------------------------------------------------------------------------------- 1 | # Style Dictionary Generated Files (ios) 2 | ios/assets 3 | ios/Classes/Generated 4 | 5 | # OS X 6 | .DS_Store 7 | 8 | # Xcode 9 | build/ 10 | *.pbxuser 11 | !default.pbxuser 12 | *.mode1v3 13 | !default.mode1v3 14 | *.mode2v3 15 | !default.mode2v3 16 | *.perspectivev3 17 | !default.perspectivev3 18 | xcuserdata/ 19 | *.xccheckout 20 | profile 21 | *.moved-aside 22 | DerivedData 23 | *.hmap 24 | *.ipa 25 | 26 | # Bundler 27 | .bundle 28 | -------------------------------------------------------------------------------- /examples/complete/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-example-complete", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build.js", 6 | "scripts": { 7 | "build": "node_modules/.bin/style-dictionary build", 8 | "clean": "rm -rf build", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "", 12 | "license": "Apache-2.0", 13 | "devDependencies": { 14 | "style-dictionary": "latest" 15 | } 16 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/alert-triangle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Supporting/Expo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | EXUpdatesSDKVersion 6 | YOUR-APP-SDK-VERSION-HERE 7 | EXUpdatesURL 8 | YOUR-APP-URL-HERE 9 | 10 | 11 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/components/button/primary.js: -------------------------------------------------------------------------------- 1 | const base = require('./base'); 2 | 3 | // You can do interesting things like having a base object 4 | // that you extend. This can be useful for defining component 5 | // styles if you have a base style and variations. 6 | module.exports = Object.assign({}, base, { 7 | 'background-color': { value: '{color.background.link.value}' }, 8 | 'color': { value: '{color.font.inverse.base.value}' }, 9 | }); -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/values/dimens.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 16dp 4 | 16dp 5 | 16dp 6 | 180dp 7 | 16dp 8 | 200dp 9 | 10 | -------------------------------------------------------------------------------- /__integration__/_constants.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | buildPath: `__integration__/build/`, 3 | cleanConsoleOutput: (str) => { 4 | const arr = str.split(`\n`) 5 | // Remove ANSI stuff from the console output so we get human-readable strings 6 | // https://github.com/chalk/ansi-regex/blob/main/index.js#L3 7 | .map(s => s.replace(/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g,'').trim()); 8 | return arr.join(`\n`) 9 | } 10 | } -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/components/button/secondary.js: -------------------------------------------------------------------------------- 1 | const base = require('./base'); 2 | 3 | module.exports = Object.assign({}, base, { 4 | 'background-color': { value: '{color.background.base.value}' }, 5 | 'color': { value: '{color.font.link.value}' }, 6 | 'border-color': { value: '{color.border.base.value}' }, 7 | 'border-width': { value: '{size.border.width.base.value}' }, 8 | 'border-radius': { value: '{size.border.radius.base.value}' }, 9 | }); -------------------------------------------------------------------------------- /examples/complete/android/demo/src/test/java/com/amazon/styledictionaryexample/ExampleUnitTest.java: -------------------------------------------------------------------------------- 1 | package com.amazon.styledictionaryexample; 2 | 3 | import org.junit.Test; 4 | 5 | import static org.junit.Assert.*; 6 | 7 | /** 8 | * To work on unit tests, switch the Test Artifact in the Build Variants view. 9 | */ 10 | public class ExampleUnitTest { 11 | @Test 12 | public void addition_isCorrect() throws Exception { 13 | assertEquals(4, 2 + 2); 14 | } 15 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Components/FontColorViewCell.h: -------------------------------------------------------------------------------- 1 | // 2 | // FontColorViewCell.h 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 1/29/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | 11 | @interface FontColorViewCell : UICollectionViewCell 12 | 13 | @property (nonatomic, strong) UILabel *keyLabel; 14 | @property (nonatomic, strong) UILabel *valueLabel; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/StyleDictionaryAppDelegate.h: -------------------------------------------------------------------------------- 1 | // 2 | // StyleDictionaryAppDelegate.h 3 | // StyleDictionary 4 | // 5 | // Created by Danny Banks on 02/09/2017. 6 | // Copyright (c) 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | @import UIKit; 10 | #import 11 | 12 | @interface StyleDictionaryAppDelegate : UIResponder 13 | 14 | @property (strong, nonatomic) UIWindow *window; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-assets-base64-embed", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build.js", 6 | "scripts": { 7 | "build": "node_modules/.bin/style-dictionary build", 8 | "clean": "rm -rf build", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "author": "", 12 | "license": "Apache-2.0", 13 | "devDependencies": { 14 | "style-dictionary": "3.1.1" 15 | } 16 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Components/HeaderCollectionViewCell.h: -------------------------------------------------------------------------------- 1 | // 2 | // HeaderCollectionViewCell.h 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 2/9/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface HeaderCollectionViewCell : UICollectionViewCell 13 | 14 | @property (nonatomic, strong) UILabel *titleLabel; 15 | 16 | @end 17 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/main.m: -------------------------------------------------------------------------------- 1 | // 2 | // main.m 3 | // StyleDictionaryExample 4 | // 5 | // Created by Danny Banks on 01/20/2017. 6 | // Copyright (c) 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | @import UIKit; 10 | #import "StyleDictionaryAppDelegate.h" 11 | 12 | int main(int argc, char * argv[]) 13 | { 14 | @autoreleasepool { 15 | return UIApplicationMain(argc, argv, nil, NSStringFromClass([StyleDictionaryAppDelegate class])); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreen.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "universal", 5 | "filename": "splashscreen.png", 6 | "scale": "1x" 7 | }, 8 | { 9 | "idiom": "universal", 10 | "scale": "2x" 11 | }, 12 | { 13 | "idiom": "universal", 14 | "scale": "3x" 15 | } 16 | ], 17 | "info": { 18 | "version": 1, 19 | "author": "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/tokens/button/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "button": { 3 | "color": { 4 | "primary": { 5 | "value": "{color.primary.value}" 6 | }, 7 | "secondary": { 8 | "value": "{color.secondary.value}" 9 | }, 10 | "danger": { 11 | "value": "{color.base.red.value}" 12 | } 13 | }, 14 | "text": { 15 | "size": { 16 | "value": "{globals.baseline}{globals.unit}" 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/file-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/gift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/SplashScreenBackground.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images": [ 3 | { 4 | "idiom": "universal", 5 | "filename": "background.png", 6 | "scale": "1x" 7 | }, 8 | { 9 | "idiom": "universal", 10 | "scale": "2x" 11 | }, 12 | { 13 | "idiom": "universal", 14 | "scale": "3x" 15 | } 16 | ], 17 | "info": { 18 | "version": 1, 19 | "author": "xcode" 20 | } 21 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_property_detail.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | -------------------------------------------------------------------------------- /__tests__/__properties/paddings.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "padding": { 4 | "zero": { 5 | "value": 0 6 | }, 7 | "tiny": { 8 | "value": "3" 9 | }, 10 | "small": { 11 | "value": "5" 12 | }, 13 | "base": { 14 | "value": "10" 15 | }, 16 | "large": { 17 | "value": "15" 18 | }, 19 | "xl": { 20 | "value": "20" 21 | }, 22 | "xxl": { 23 | "value": "30" 24 | } 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-app/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # style dictionary 15 | /src/style-dictionary-dist 16 | 17 | # misc 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /examples/advanced/npm-module/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["tokens/**/*.json"], 3 | "platforms": { 4 | "scss": { 5 | "transformGroup": "scss", 6 | "buildPath": "build/scss/", 7 | "files": [{ 8 | "destination": "tokens.scss", 9 | "format": "scss/variables" 10 | }] 11 | }, 12 | "js": { 13 | "transformGroup": "js", 14 | "files": [{ 15 | "destination": "tokens.js", 16 | "format": "javascript/es6" 17 | }] 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/androidTest/java/com/amazon/styledictionaryexample/ApplicationTest.java: -------------------------------------------------------------------------------- 1 | package com.amazon.styledictionaryexample; 2 | 3 | import android.app.Application; 4 | import android.test.ApplicationTestCase; 5 | 6 | /** 7 | * Testing Fundamentals 8 | */ 9 | public class ApplicationTest extends ApplicationTestCase { 10 | public ApplicationTest() { 11 | super(Application.class); 12 | } 13 | } -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["jest"], 3 | "env": { 4 | "node": true, 5 | "mocha": true, 6 | "jest": true 7 | }, 8 | "globals": { 9 | "Buffer": true, 10 | "escape": true 11 | }, 12 | "extends": [ 13 | "eslint:recommended", 14 | "plugin:jest/recommended" 15 | ], 16 | "rules": { 17 | "no-console": 0, 18 | "no-unused-vars": 1, 19 | "no-control-regex": 0, 20 | "comma-dangle": 0, 21 | "no-prototype-builtins": 0, 22 | "jest/valid-title": 0 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/file-text.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/Pods-StyleDictionary_Demo/Pods-StyleDictionary_Demo-umbrella.h: -------------------------------------------------------------------------------- 1 | #ifdef __OBJC__ 2 | #import 3 | #else 4 | #ifndef FOUNDATION_EXPORT 5 | #if defined(__cplusplus) 6 | #define FOUNDATION_EXPORT extern "C" 7 | #else 8 | #define FOUNDATION_EXPORT extern 9 | #endif 10 | #endif 11 | #endif 12 | 13 | 14 | FOUNDATION_EXPORT double Pods_StyleDictionary_DemoVersionNumber; 15 | FOUNDATION_EXPORT const unsigned char Pods_StyleDictionary_DemoVersionString[]; 16 | 17 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/gift.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/alpha.json5: -------------------------------------------------------------------------------- 1 | { 2 | // Because these are not like a token object with a 'value' attribute, 3 | // Style Dictionary won't consider them tokens and therefore won't output them. 4 | // But, you can still access/reference them in tokens using the same reference 5 | // syntax: "value": "{alpha.0}" 6 | // This is an array, you can access its members with dot notation and 7 | // the index of the item. 8 | alpha: [ 9 | 1, 10 | 0.9, 11 | 0.75, 12 | 0.5 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-custom-transforms", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node ./build.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "style-dictionary": "3.1.1" 19 | } 20 | } -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Views/ColorViewController.h: -------------------------------------------------------------------------------- 1 | // 2 | // ColorViewController.h 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 1/21/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | #import "BaseColorViewController.h" 12 | #import "TextColorViewController.h" 13 | #import "BackgroundColorsViewController.h" 14 | 15 | @interface ColorViewController : UIViewController 16 | 17 | @end 18 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.scss'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-auto-rebuild-watcher", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node ./build.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "style-dictionary": "3.1.1" 19 | } 20 | } -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/component-cti/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-component-cti", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "style-dictionary build --config ./config.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "style-dictionary": "3.1.1" 19 | } 20 | } -------------------------------------------------------------------------------- /__tests__/__json_files/nested_pointers_4.json: -------------------------------------------------------------------------------- 1 | { 2 | "a": { 3 | "a": { 4 | "a": "{b.b.b}" 5 | } 6 | }, 7 | "b": { 8 | "b": { 9 | "b": "{c.c.c}" 10 | } 11 | }, 12 | "c": { 13 | "c": { 14 | "c": "{d.d.d}" 15 | } 16 | }, 17 | "d": { 18 | "d": { 19 | "d": "{e.e.e}" 20 | } 21 | }, 22 | "e": { 23 | "e": { 24 | "e": "{f.f.f}" 25 | } 26 | }, 27 | "f": { 28 | "f": { 29 | "f": "{g.g.g}" 30 | } 31 | }, 32 | "g": { 33 | "g": { 34 | "g": 1 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/github.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-referencing_aliasing", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node_modules/.bin/style-dictionary build", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "style-dictionary": "3.1.1" 19 | } 20 | } -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-tokens-deprecation", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "tokens" 9 | ], 10 | "scripts": { 11 | "build": "node ./build.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "lodash": "^4.17.11", 19 | "style-dictionary": "3.1.1" 20 | } 21 | } -------------------------------------------------------------------------------- /examples/advanced/custom-filters/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["tokens/**/*.json"], 3 | "platforms": { 4 | "web": { 5 | "buildPath": "build/web/", 6 | "files": [{ 7 | "destination": "tokens.js", 8 | "filter": "removeBigSpacing", 9 | "format": "javascript/es6" 10 | }] 11 | }, 12 | "scss": { 13 | "buildPath": "build/web/", 14 | "files": [{ 15 | "destination": "tokens.scss", 16 | "filter": "removeBigSpacing", 17 | "format": "scss/variables" 18 | }] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/templates/web-scss.template: -------------------------------------------------------------------------------- 1 | <% _.each(allTokens, function(prop) { 2 | var output = ""; 3 | if(prop.deprecated) { 4 | output += "// Notice: the following value is deprecated"; 5 | if(prop.deprecated_comment) { 6 | output += " (" + prop.deprecated_comment + ")"; 7 | } 8 | output += "\n"; 9 | } 10 | output += "$" + prop.name + ": " + prop.value + ";"; 11 | if(prop.comment) { 12 | output += " // " + prop.comment; 13 | } 14 | output += "\n"; 15 | print(output); 16 | }); %> 17 | -------------------------------------------------------------------------------- /examples/advanced/variables-in-outputs/tokens/color/palette.json: -------------------------------------------------------------------------------- 1 | { 2 | "color" : { 3 | "palette" : { 4 | "neutral": { 5 | "140" : { "value" : "#192026" }, 6 | "100" : { "value" : "#303942" }, 7 | "80" : { "value" : "#63676B" }, 8 | "60" : { "value" : "#8C8F92" }, 9 | "40" : { "value" : "#ADB0B3" }, 10 | "20" : { "value" : "#D1D2D3" }, 11 | "10" : { "value" : "#EAEBEC" }, 12 | "5" : { "value" : "#F2F4F5" }, 13 | "0" : { "value" : "#FFFFFF" } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/complete/android/styledictionary/src/test/java/com/example/styledictionary/ExampleUnitTest.java: -------------------------------------------------------------------------------- 1 | package com.example.styledictionary; 2 | 3 | import org.junit.Test; 4 | 5 | import static org.junit.Assert.*; 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * @see Testing documentation 11 | */ 12 | public class ExampleUnitTest { 13 | @Test 14 | public void addition_isCorrect() throws Exception { 15 | assertEquals(4, 2 + 2); 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /scripts/handlebars/body.hbs: -------------------------------------------------------------------------------- 1 | {{#if (equal kind "function")}}> {{>sig-name}}{{/if}} 2 | 3 | {{>deprecated~}} 4 | {{>description~}} 5 | {{>summary~}} 6 | {{>augments~}} 7 | {{>implements~}} 8 | {{>mixes~}} 9 | {{>default~}} 10 | {{>chainable~}} 11 | {{>overrides~}} 12 | {{>returns~}} 13 | {{>throws~}} 14 | {{>fires~}} 15 | {{>this~}} 16 | {{>readOnly~}} 17 | {{>requires~}} 18 | {{>customTags~}} 19 | {{>see~}} 20 | {{>since~}} 21 | {{>version~}} 22 | {{>authors~}} 23 | {{>license~}} 24 | {{>copyright~}} 25 | {{>todo~}} 26 | {{>params~}} 27 | {{>properties~}} 28 | {{>examples~}} 29 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["tokens/**/*.json"], 3 | "platforms": { 4 | "scss": { 5 | "transformGroup": "scss", 6 | "buildPath": "build/scss/", 7 | "files": [{ 8 | "destination": "_variables.scss", 9 | "format": "custom/format/scss" 10 | }] 11 | }, 12 | "ios": { 13 | "transformGroup": "ios", 14 | "buildPath": "build/ios/", 15 | "files": [{ 16 | "destination": "tokens.plist", 17 | "format": "custom/format/ios-plist" 18 | }] 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/basic/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/complete/tokens/time.json: -------------------------------------------------------------------------------- 1 | { 2 | "time": { 3 | "transition": { 4 | "short": { "value":"200" }, 5 | "base": { "value":"400" }, 6 | "long": { "value":"600" }, 7 | "xl": { "value":"1000" } 8 | }, 9 | 10 | "delay": { 11 | "short": { "value":"50" }, 12 | "base": { "value":"100" }, 13 | "long": { "value":"200" } 14 | }, 15 | 16 | "duration": { 17 | "short": { "value":"2000" }, 18 | "base": { "value":"4000" }, 19 | "long": { "value":"6000" } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /.github/workflows/test.yml: -------------------------------------------------------------------------------- 1 | name: Test 2 | 3 | on: 4 | pull_request: 5 | branches: [ "main", "3.0" ] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | strategy: 11 | matrix: 12 | node-version: [12.x, 14.x, 15.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v2 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v2 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | cache: 'npm' 21 | - run: npm ci 22 | - run: npm run build --if-present 23 | - run: npm test 24 | -------------------------------------------------------------------------------- /examples/advanced/npm-module/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-npm-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node_modules/.bin/style-dictionary build", 12 | "clean": "rm -rf build", 13 | "prepublishOnly": "npm run build", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "author": "", 17 | "license": "Apache-2.0", 18 | "devDependencies": { 19 | "style-dictionary": "3.1.1" 20 | } 21 | } -------------------------------------------------------------------------------- /examples/advanced/s3/properties/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { "value": "#CCCCCC" }, 6 | "medium": { "value": "#999999" }, 7 | "dark" : { "value": "#111111" } 8 | }, 9 | "red": { 10 | "value": "#FF0000", 11 | "deprecated": true, 12 | "deprecated_comment": "replace with the \"blue\" color" 13 | }, 14 | "green": { 15 | "value": "#00FF00" 16 | }, 17 | "blue": { 18 | "value": "#0000FF" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /scripts/version.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | const glob = require('glob'); 3 | const execSync = require('child_process').execSync; 4 | const PACKAGE = require('../package.json'); 5 | const packageJSONs = glob.sync('./examples/*/*/package.json', {}); 6 | 7 | packageJSONs.forEach(function(filePath) { 8 | let pkg = fs.readJsonSync(filePath); 9 | pkg.devDependencies[PACKAGE.name] = PACKAGE.version; 10 | fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2)); 11 | // Add the package.json file to staging and it'll get commited 12 | execSync(`git add ${filePath}`); 13 | }); 14 | -------------------------------------------------------------------------------- /examples/advanced/npm-module/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/auto-rebuild-watcher/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/tokens/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "white": { "value": "#FFFFFF" }, 5 | "gray": { 6 | "light" : { "value": "#CCCCCC" }, 7 | "medium": { "value": { "r": 146, "g": 153, "b": 162 } }, 8 | "dark" : { "value": "#111111" } 9 | }, 10 | "red": { "value": "#FF0000" }, 11 | "green": { "value": "#00FF00" }, 12 | "blue": { "value": "#0000FF" } 13 | }, 14 | "primary": { "value": "{color.base.green.value}" }, 15 | "secondary": { "value": "{color.base.blue.value}" } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /examples/advanced/referencing_aliasing/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "12", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "16", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "18", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/s3/assets/icons/film.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /__tests__/__properties/font_sizes.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "tiny": { 5 | "value": "11px" 6 | }, 7 | "small": { 8 | "value": "13px" 9 | }, 10 | "medium": { 11 | "value": "15px" 12 | }, 13 | "large": { 14 | "value": "17px" 15 | }, 16 | "xl": { 17 | "value": "21px" 18 | }, 19 | "xxl": { 20 | "value": "25px" 21 | }, 22 | "xxxl": { 23 | "value": "30px" 24 | }, 25 | "base": { 26 | "value": "{size.font.medium.value}" 27 | } 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/properties/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/globals/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font" 15 | }, 16 | "base" : { 17 | "value": "{size.font.medium.value}", 18 | "comment": "the base size of the font" 19 | } 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/s3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-s3-example", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build.js", 6 | "scripts": { 7 | "build": "node_modules/.bin/style-dictionary build", 8 | "upload": "node upload.js", 9 | "start": "npm run build && npm run upload", 10 | "clean": "rm -rf build", 11 | "test": "echo \"Error: no test specified\" && exit 1" 12 | }, 13 | "author": "", 14 | "license": "Apache-2.0", 15 | "devDependencies": { 16 | "aws-sdk": "^2.7.21", 17 | "fs-extra": "^1.0.0", 18 | "style-dictionary": "3.1.1" 19 | } 20 | } -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/lightness.json5: -------------------------------------------------------------------------------- 1 | { 2 | // Because these are not like a token object with a 'value' attribute, 3 | // Style Dictionary won't consider them tokens and therefore won't output them. 4 | // But, you can still access/reference them in tokens using the same reference 5 | // syntax: "value": "{lightness.0}" 6 | // This can be used when defining colors as HSL: 7 | // "value": {"h": "{hue.red}", "l": "{lightness.0}", "s": "{saturation.0}"} 8 | lightness: [ 9 | 96, 10 | 90, 11 | 77, 12 | 67, 13 | 63, 14 | 58, 15 | 55, 16 | 50 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/assets/icons/film.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/saturation.json5: -------------------------------------------------------------------------------- 1 | { 2 | // Because these are not like a token object with a 'value' attribute, 3 | // Style Dictionary won't consider them tokens and therefore won't output them. 4 | // But, you can still access/reference them in tokens using the same reference 5 | // syntax: "value": "{lightness.0}" 6 | // This can be used when defining colors as HSL: 7 | // "value": {"h": "{hue.red}", "l": "{lightness.0}", "s": "{saturation.0}"} 8 | saturation: [ 9 | 100, 10 | 90, 11 | 85, 12 | 80, 13 | 75, 14 | 70, 15 | 65, 16 | 50 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /__tests__/__properties/images/flags/us.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "image": { 4 | "flag": { 5 | "us": { 6 | "mdpi": { 7 | "value": "__tests__/__assets/images/mdpi/flag_us_base.png" 8 | }, 9 | "hdpi": { 10 | "value": "__tests__/__assets/images/hdpi/flag_us_base.png" 11 | }, 12 | "xhdpi": { 13 | "value": "__tests__/__assets/images/xhdpi/flag_us_base.png" 14 | }, 15 | "xxhdpi": { 16 | "value": "__tests__/__assets/images/xxhdpi/flag_us_base.png" 17 | } 18 | } 19 | } 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /examples/advanced/component-cti/tokens/component/button.json: -------------------------------------------------------------------------------- 1 | { 2 | "component": { 3 | "button": { 4 | "padding": { "value": "{size.padding.medium.value}" }, 5 | "font-size": { "value": 2 }, 6 | "text-align": { "value": "center" }, 7 | 8 | "primary": { 9 | "background-color": { "value": "hsl(10, 80, 50)" }, 10 | "color": { "value": "{color.font.inverse.value}" } 11 | }, 12 | 13 | "secondary": { 14 | "background-color": { "value": "{color.background.primary.value}" }, 15 | "color": { "value": "{color.font.link.value}" } 16 | } 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /__integration__/tokens/color/background.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "background": { 4 | "primary": { "value": "{color.core.neutral.0.value}", "themeable": true }, 5 | "secondary": { "value": "{color.core.neutral.100.value}" }, 6 | "tertiary": { "value": "{color.core.neutral.200.value}" }, 7 | "danger": { "value": "{color.core.red.0.value}" }, 8 | "warning": { "value": "{color.core.orange.0.value}" }, 9 | "success": { "value": "{color.core.green.0.value}" }, 10 | "info": { "value": "{color.core.blue.0.value}" }, 11 | "disabled": { "value": "{color.background.tertiary.value}" } 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-custom-formats-with-templates", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node ./build.js", 12 | "clean": "rm -rf build", 13 | "test": "echo \"Error: no test specified\" && exit 1" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "devDependencies": { 18 | "handlebars": "^4.7.7", 19 | "lodash": "^4.17.21", 20 | "pug": "^3.0.2", 21 | "style-dictionary": "3.1.1" 22 | } 23 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_font_color.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/tokens/colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "gray": { 5 | "light" : { 6 | "value": "#CCCCCC", 7 | "group": "color" 8 | }, 9 | "medium": { 10 | "value": "#999999", 11 | "group": "color" 12 | }, 13 | "dark" : { 14 | "value": "#111111", 15 | "group": "color" 16 | } 17 | }, 18 | "red": { 19 | "value": "#FF0000", 20 | "group": "color" 21 | }, 22 | "green": { 23 | "value": "#00FF00", 24 | "group": "color" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/style-dictionary/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["./style-dictionary/properties/**/*.json"], 3 | "platforms": { 4 | "scss": { 5 | "transformGroup": "scss", 6 | "buildPath": "./src/style-dictionary-dist/", 7 | "prefix": "token", 8 | "files": [{ 9 | "destination": "variables.scss", 10 | "format": "scss/variables" 11 | }] 12 | }, 13 | "js": { 14 | "transformGroup": "js", 15 | "buildPath": "./src/style-dictionary-dist/", 16 | "files": [{ 17 | "destination": "variables.js", 18 | "format": "javascript/es6" 19 | }] 20 | } 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/color/overlay.json5: -------------------------------------------------------------------------------- 1 | { 2 | color: { 3 | overlay: { 4 | primary: { 5 | value: "{color.core.white.value}", 6 | modify: [{ 7 | type: "alpha", 8 | // You can access other parts of your style dictionary in here too: 9 | amount: "{alpha.1}" 10 | }] 11 | }, 12 | 13 | secondary: { 14 | value: "{color.core.white.value}", 15 | modify: [{ 16 | type: "alpha", 17 | // You can access other parts of your style dictionary in here too: 18 | amount: "{alpha.2}" 19 | }] 20 | } 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /examples/advanced/s3/properties/assets/fonts.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "font": { 4 | "materialicons": { 5 | "ttf" : { "value": "assets/fonts/MaterialIcons-Regular.ttf" }, 6 | "eot" : { "value": "assets/fonts/MaterialIcons-Regular.eot" }, 7 | "woff" : { "value": "assets/fonts/MaterialIcons-Regular.woff" }, 8 | "woff2": { "value": "assets/fonts/MaterialIcons-Regular.woff2" } 9 | }, 10 | "opensans": { 11 | "ttf" : { "value": "assets/fonts/OpenSans-Regular.ttf" } 12 | }, 13 | "roboto": { 14 | "ttf" : { "value": "assets/fonts/Roboto-Regular.ttf" } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_background_color.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/StyleDictionary/StyleDictionary.xcconfig: -------------------------------------------------------------------------------- 1 | CONFIGURATION_BUILD_DIR = $PODS_CONFIGURATION_BUILD_DIR/StyleDictionary 2 | GCC_PREPROCESSOR_DEFINITIONS = $(inherited) COCOAPODS=1 3 | HEADER_SEARCH_PATHS = "${PODS_ROOT}/Headers/Private" "${PODS_ROOT}/Headers/Public" 4 | OTHER_LDFLAGS = -framework "QuartzCore" -framework "UIKit" 5 | PODS_BUILD_DIR = $BUILD_DIR 6 | PODS_CONFIGURATION_BUILD_DIR = $PODS_BUILD_DIR/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 7 | PODS_ROOT = ${SRCROOT} 8 | PODS_TARGET_SRCROOT = ${PODS_ROOT}/../../.. 9 | PRODUCT_BUNDLE_IDENTIFIER = org.cocoapods.${PRODUCT_NAME:rfc1034identifier} 10 | SKIP_INSTALL = YES 11 | -------------------------------------------------------------------------------- /examples/advanced/assets-base64-embed/tokens/assets/fonts.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "font": { 4 | "materialicons": { 5 | "ttf" : { "value": "assets/fonts/MaterialIcons-Regular.ttf" }, 6 | "eot" : { "value": "assets/fonts/MaterialIcons-Regular.eot" }, 7 | "woff" : { "value": "assets/fonts/MaterialIcons-Regular.woff" }, 8 | "woff2": { "value": "assets/fonts/MaterialIcons-Regular.woff2" } 9 | }, 10 | "opensans": { 11 | "ttf" : { "value": "assets/fonts/OpenSans-Regular.ttf" } 12 | }, 13 | "roboto": { 14 | "ttf" : { "value": "assets/fonts/Roboto-Regular.ttf" } 15 | } 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /examples/advanced/auto-rebuild-watcher/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-auto-rebuild-watcher", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "build/index.js", 6 | "files": [ 7 | "build", 8 | "properties" 9 | ], 10 | "scripts": { 11 | "build": "node_modules/.bin/style-dictionary build", 12 | "clean": "rm -rf build", 13 | "watch": "npm run build && chokidar \"tokens/**/*.json\" -c \"npm run build\"", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "author": "", 17 | "license": "Apache-2.0", 18 | "devDependencies": { 19 | "chokidar-cli": "^1.2.0", 20 | "style-dictionary": "3.1.1" 21 | } 22 | } -------------------------------------------------------------------------------- /examples/complete/README.md: -------------------------------------------------------------------------------- 1 | # Style Dictionary Complete Example 2 | 3 | This starter project has everything you need to get started. 4 | 5 | ## How it works 6 | 7 | All of the design tokens and assets are in this package. Make any changes to suit your needs. This package has iOS, Android, and web code. 8 | 9 | To get started, run 10 | ``` 11 | $ npm install 12 | $ npm run build 13 | ``` 14 | 15 | The npm build task is what performs the style dictionary build steps to generate the files for each platform. Every time you change something in the style dictionary, like changing colors or adding design tokens, you will have to run this command again to generate the files. 16 | 17 | ## iOS 18 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/Pods-StyleDictionary_Demo/Pods-StyleDictionary_Demo.debug.xcconfig: -------------------------------------------------------------------------------- 1 | FRAMEWORK_SEARCH_PATHS = $(inherited) "$PODS_CONFIGURATION_BUILD_DIR/StyleDictionary" 2 | GCC_PREPROCESSOR_DEFINITIONS = $(inherited) COCOAPODS=1 3 | LD_RUNPATH_SEARCH_PATHS = $(inherited) '@executable_path/Frameworks' '@loader_path/Frameworks' 4 | OTHER_CFLAGS = $(inherited) -iquote "$PODS_CONFIGURATION_BUILD_DIR/StyleDictionary/StyleDictionary.framework/Headers" 5 | OTHER_LDFLAGS = $(inherited) -framework "StyleDictionary" 6 | PODS_BUILD_DIR = $BUILD_DIR 7 | PODS_CONFIGURATION_BUILD_DIR = $PODS_BUILD_DIR/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 8 | PODS_ROOT = ${SRCROOT}/Pods 9 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/Pods-StyleDictionary_Demo/Pods-StyleDictionary_Demo.release.xcconfig: -------------------------------------------------------------------------------- 1 | FRAMEWORK_SEARCH_PATHS = $(inherited) "$PODS_CONFIGURATION_BUILD_DIR/StyleDictionary" 2 | GCC_PREPROCESSOR_DEFINITIONS = $(inherited) COCOAPODS=1 3 | LD_RUNPATH_SEARCH_PATHS = $(inherited) '@executable_path/Frameworks' '@loader_path/Frameworks' 4 | OTHER_CFLAGS = $(inherited) -iquote "$PODS_CONFIGURATION_BUILD_DIR/StyleDictionary/StyleDictionary.framework/Headers" 5 | OTHER_LDFLAGS = $(inherited) -framework "StyleDictionary" 6 | PODS_BUILD_DIR = $BUILD_DIR 7 | PODS_CONFIGURATION_BUILD_DIR = $PODS_BUILD_DIR/$(CONFIGURATION)$(EFFECTIVE_PLATFORM_NAME) 8 | PODS_ROOT = ${SRCROOT}/Pods 9 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /types/_helpers.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | export type Named = T & { name: string; }; 15 | -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/tokens/size/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "font": { 4 | "small" : { 5 | "value": "0.75", 6 | "comment": "the small size of the font" 7 | }, 8 | "medium": { 9 | "value": "1", 10 | "comment": "the medium size of the font" 11 | }, 12 | "large" : { 13 | "value": "2", 14 | "comment": "the large size of the font", 15 | "deprecated": true, 16 | "deprecated_comment": "replace with the \"medium\" size" 17 | }, 18 | "base" : { 19 | "value": "{size.font.medium.value}", 20 | "comment": "the base size of the font" 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/_sidebar.md: -------------------------------------------------------------------------------- 1 | - Getting started 2 | - [Overview](README.md) 3 | - [What's new in 3.0](version_3.md) 4 | - [Quick Start](quick_start.md) 5 | - [Examples](examples.md) 6 | - [Config](config.md) 7 | - [Tokens](tokens.md) 8 | - [Package structure](package_structure.md) 9 | - [Extending](extending.md) 10 | 11 | - Reference 12 | - [Architecture](architecture.md) 13 | - [Using the CLI](using_the_cli.md) 14 | - [Using the NPM Module](using_the_npm_module.md) 15 | - [API](api.md) 16 | - [Parsers](parsers.md) 17 | - [Transforms](transforms.md) 18 | - [Transform groups](transform_groups.md) 19 | - [Formats](formats.md) 20 | - [Templates](templates.md) 21 | - [Actions](actions.md) 22 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_icon_list.xml: -------------------------------------------------------------------------------- 1 | 2 | 12 | -------------------------------------------------------------------------------- /examples/advanced/matching-build-files/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-matching-build-files", 3 | "version": "1.0.0", 4 | "description": "An example to show how to automate build files that match folders", 5 | "main": "build/js/cjs/index.js", 6 | "module": "build/js/esm/index.js", 7 | "files": [ 8 | "build", 9 | "properties" 10 | ], 11 | "scripts": { 12 | "build": "style-dictionary build --config ./config.js", 13 | "clean": "rm -rf build", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "author": "Kelly Harrop ", 17 | "license": "Apache-2.0", 18 | "devDependencies": { 19 | "style-dictionary": "3.1.1" 20 | } 21 | } -------------------------------------------------------------------------------- /types/FileHeader.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | export type FileHeader = (defaultMessage: string[]) => string[]; 15 | -------------------------------------------------------------------------------- /types/TransformGroup.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | export interface TransformGroup { 15 | transforms: Array; 16 | } -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/android/app/build_defs.bzl: -------------------------------------------------------------------------------- 1 | """Helper definitions to glob .aar and .jar targets""" 2 | 3 | def create_aar_targets(aarfiles): 4 | for aarfile in aarfiles: 5 | name = "aars__" + aarfile[aarfile.rindex("/") + 1:aarfile.rindex(".aar")] 6 | lib_deps.append(":" + name) 7 | android_prebuilt_aar( 8 | name = name, 9 | aar = aarfile, 10 | ) 11 | 12 | def create_jar_targets(jarfiles): 13 | for jarfile in jarfiles: 14 | name = "jars__" + jarfile[jarfile.rindex("/") + 1:jarfile.rindex(".jar")] 15 | lib_deps.append(":" + name) 16 | prebuilt_jar( 17 | name = name, 18 | binary_jar = jarfile, 19 | ) 20 | -------------------------------------------------------------------------------- /examples/complete/tokens/color/chart.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "chart": { 4 | "stacked": { 5 | "base": { 6 | "100": { "value":"{color.base.blue.100.value}" }, 7 | "200": { "value":"{color.base.blue.200.value}" }, 8 | "300": { "value":"{color.base.blue.300.value}" }, 9 | "400": { "value":"{color.base.blue.400.value}" }, 10 | "500": { "value":"{color.base.blue.500.value}" }, 11 | "600": { "value":"{color.base.blue.600.value}" }, 12 | "700": { "value":"{color.base.blue.700.value}" }, 13 | "800": { "value":"{color.base.blue.800.value}" }, 14 | "900": { "value":"{color.base.blue.900.value}" } 15 | } 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /docs/_coverpage.md: -------------------------------------------------------------------------------- 1 | ![logo](assets/logo.png) 2 | 3 | # Style Dictionary 4 | 5 | > Style once, use everywhere. 6 | 7 | **Style Dictionary** is a build system that allows you to define styles once, in a way for any platform or language to consume. A single place to create and edit your styles, and a single command exports these rules to all the places you need them - iOS, Android, CSS, JS, HTML, sketch files, style documentation, or anything you can think of. It is available as a CLI through npm, but can also be used like any normal node module if you want to extend its functionality. 8 | 9 | [GitHub](https://github.com/amzn/style-dictionary) 10 | [Get Started](README.md) 11 | 12 | [See what's new in 3.0!](version_3.md) 13 | 14 | ![color](#D9F8F5) 15 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/tokens/color/brand.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | primary: { 3 | lighter: { "value": "{color.core.teal.60.value}" }, 4 | light: { "value": "{color.core.teal.80.value}" }, 5 | base: { "value": "{color.core.teal.100.value}" }, 6 | dark: { "value": "{color.core.teal.120.value}" }, 7 | darker: { "value": "{color.core.teal.140.value}" } 8 | }, 9 | secondary: { 10 | lighter: { "value": "{color.core.purple.60.value}" }, 11 | light: { "value": "{color.core.purple.80.value}" }, 12 | base: { "value": "{color.core.purple.100.value}" }, 13 | dark: { "value": "{color.core.purple.120.value}" }, 14 | darker: { "value": "{color.core.purple.140.value}" } 15 | } 16 | } -------------------------------------------------------------------------------- /scripts/handlebars/sig-name.hbs: -------------------------------------------------------------------------------- 1 | {{#if virtual}}*{{/if}}{{#with (parentObject)}}{{#if virtual}}*{{/if~}}{{/with~}} 2 | {{#if name}}{{#sig~}} 3 | {{{@depOpen}~}} 4 | {{{@codeOpen}~}} 5 | {{#if @prefix}}{{@prefix}} {{/if~}} 6 | {{@parent~}} 7 | {{@accessSymbol}}{{#if (isEvent)}}"{{{name}}}"{{else}}{{{name}}}{{/if~}} 8 | {{#if @methodSign}}{{#if (isEvent)}} {{@methodSign}}{{else}}{{@methodSign}}{{/if}}{{/if~}} 9 | {{{@codeClose}~}} 10 | {{#if @returnSymbol}} {{@returnSymbol}}{{/if~}} 11 | {{#if @returnTypes}} {{>linked-type-list types=@returnTypes delimiter=" \| " }}{{/if~}} 12 | {{#if @suffix}} {{@suffix}}{{/if~}} 13 | {{{@depClose}~}} 14 | {{~/sig}} 15 | 16 | {{/if}} 17 | {{#if virtual}}*{{/if}}{{#with (parentObject)}}{{#if virtual}}*{{/if}} 18 | 19 | {{/with}} 20 | -------------------------------------------------------------------------------- /examples/complete/android/styledictionary/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /Users/djb/android/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /types/Filter.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | import { Matcher } from './Matcher'; 15 | 16 | export interface Filter { 17 | name: string; 18 | matcher: Matcher; 19 | } -------------------------------------------------------------------------------- /types/Matcher.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | import { TransformedToken } from './TransformedToken'; 15 | 16 | export type Matcher = (token: TransformedToken) => boolean; -------------------------------------------------------------------------------- /examples/complete/android/demo/proguard-rules.pro: -------------------------------------------------------------------------------- 1 | # Add project specific ProGuard rules here. 2 | # By default, the flags in this file are appended to flags specified 3 | # in /usr/local/Cellar/android-sdk/24.4.1_1/tools/proguard/proguard-android.txt 4 | # You can edit the include path and order by changing the proguardFiles 5 | # directive in build.gradle. 6 | # 7 | # For more details, see 8 | # http://developer.android.com/guide/developing/tools/proguard.html 9 | 10 | # Add any project specific keep options here: 11 | 12 | # If your project uses WebView with JS, uncomment the following 13 | # and specify the fully qualified class name to the JavaScript interface 14 | # class: 15 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview { 16 | # public *; 17 | #} 18 | -------------------------------------------------------------------------------- /examples/complete/ios/Classes/UIButton+StyleDictionary.m: -------------------------------------------------------------------------------- 1 | // 2 | // UIButton+StyleDictionary.m 3 | // Pods 4 | // 5 | // Created by Banks, Daniel on 1/28/17. 6 | // 7 | // 8 | 9 | #import "UIButton+StyleDictionary.h" 10 | 11 | @implementation UIButton (StyleDictionary) 12 | 13 | + (UIButton *) styleDictionaryButton { 14 | UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; 15 | button.backgroundColor = [UIColor styleDictionaryColor:StyleDictionaryColorBackgroundButtonPrimaryBase]; 16 | button.titleLabel.textColor = [UIColor styleDictionaryColor:StyleDictionaryColorFontButtonPrimary]; 17 | [button setBackgroundColor:[UIColor styleDictionaryColor:StyleDictionaryColorBackgroundButtonPrimaryActive]]; 18 | 19 | return button; 20 | } 21 | 22 | @end 23 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/style-dictionary/properties/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "font": { 3 | "family": { 4 | "base" : { 5 | "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif" 6 | }, 7 | "code" : { 8 | "value": "source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace" 9 | } 10 | } 11 | }, 12 | "size": { 13 | "text": { 14 | "base" : { 15 | "value": "{size.text.medium.value}" 16 | }, 17 | "small" : { 18 | "value": "0.75" 19 | }, 20 | "medium": { 21 | "value": "1" 22 | }, 23 | "large" : { 24 | "value": "1.5" 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /examples/complete/tokens/asset/font.json: -------------------------------------------------------------------------------- 1 | { 2 | "asset": { 3 | "font": { 4 | "icon": { 5 | "name" : { "value": "MaterialIcons" }, 6 | "ttf" : { "value": "assets/fonts/MaterialIcons-Regular.ttf" }, 7 | "eot" : { "value": "assets/fonts/MaterialIcons-Regular.eot" }, 8 | "woff" : { "value": "assets/fonts/MaterialIcons-Regular.woff" }, 9 | "woff2": { "value": "assets/fonts/MaterialIcons-Regular.woff2" } 10 | }, 11 | "opensans": { 12 | "name" : { "value": "Open Sans" }, 13 | "ttf" : { "value": "assets/fonts/OpenSans-Regular.ttf" } 14 | }, 15 | "roboto": { 16 | "name" : { "value": "Roboto" }, 17 | "ttf" : { "value": "assets/fonts/Roboto-Regular.ttf" } 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/complete/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | ext.kotlin_version = '1.4.32' 5 | repositories { 6 | mavenCentral() 7 | google() 8 | } 9 | dependencies { 10 | classpath 'com.android.tools.build:gradle:4.1.3' 11 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 12 | 13 | // NOTE: Do not place your application dependencies here; they belong 14 | // in the individual module build.gradle files 15 | } 16 | } 17 | 18 | allprojects { 19 | repositories { 20 | google() 21 | mavenCentral() 22 | } 23 | } 24 | 25 | task clean(type: Delete) { 26 | delete rootProject.buildDir 27 | } 28 | -------------------------------------------------------------------------------- /examples/advanced/s3/upload.js: -------------------------------------------------------------------------------- 1 | var AWS = require('aws-sdk'), 2 | fs = require('fs-extra'); 3 | 4 | // Create an S3 client 5 | var s3 = new AWS.S3(); 6 | 7 | // Enter your bucket name here 8 | var bucketName = 'style-dictionary-test'; 9 | 10 | // Change working directory to ./build 11 | process.chdir('build'); 12 | var files = fs.walkSync('./'); 13 | 14 | s3.createBucket({Bucket: bucketName}, function() { 15 | files.forEach(function(file) { 16 | var options = { 17 | Bucket: bucketName, 18 | Key: file, 19 | Body: fs.readFileSync(file) 20 | }; 21 | s3.putObject(options, function(err, data) { 22 | if (err) 23 | console.log(err); 24 | else 25 | console.log("Successfully uploaded data to " + bucketName + "/" + file); 26 | }); 27 | }); 28 | }); 29 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_properties.xml: -------------------------------------------------------------------------------- 1 | 2 | 9 | 14 | 15 | -------------------------------------------------------------------------------- /lib/utils/references/defaults.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | const defaults = { 15 | opening_character: '{', 16 | closing_character: '}', 17 | separator: '.' 18 | }; 19 | 20 | module.exports = defaults; 21 | -------------------------------------------------------------------------------- /examples/advanced/custom-formats-with-templates/templates/ios-plist_alt.pug: -------------------------------------------------------------------------------- 1 | 2 | each token in allTokens 3 | case token.attributes.category 4 | when 'color' 5 | - var tag = 'string' 6 | when 'size' 7 | - var tag = 'integer' 8 | when 'time' 9 | - var tag = 'real' 10 | when 'opacity' 11 | - var tag = 'real' 12 | when 'content' 13 | - var tag = 'string' 14 | default 15 | - var tag = 'string' 16 | key #{token.name} 17 | dict 18 | if token.comment 19 | // #{token.comment} 20 | if token.type 21 | key type 22 | string #{token.type} 23 | key value 24 | #{tag}(name=token.name) #{token.value} 25 | -------------------------------------------------------------------------------- /examples/advanced/custom-transforms/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "source": ["tokens/**/*.json"], 3 | "platforms": { 4 | "web": { 5 | "transformGroup": "custom/web", 6 | "buildPath": "build/web/", 7 | "files": [{ 8 | "destination": "tokens.js", 9 | "format": "javascript/es6" 10 | }] 11 | }, 12 | "scss": { 13 | "transformGroup": "custom/scss", 14 | "buildPath": "build/web/", 15 | "files": [{ 16 | "destination": "tokens.scss", 17 | "format": "scss/variables" 18 | }] 19 | }, 20 | "android": { 21 | "transformGroup": "custom/android", 22 | "buildPath": "build/android/", 23 | "files": [{ 24 | "destination": "tokens.xml", 25 | "format": "custom/android/xml" 26 | }] 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/fragment_property_list.xml: -------------------------------------------------------------------------------- 1 | 2 | 14 | -------------------------------------------------------------------------------- /examples/advanced/multi-brand-multi-platform/tokens/globals/color/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "base": { 4 | "black" : { "value": "#000000" }, 5 | "gray": { 6 | "light" : { "value": "#CCCCCC" }, 7 | "medium" : { "value": "#999999" }, 8 | "dark" : { "value": "#111111" } 9 | }, 10 | "red" : { "value": "#FF0000" }, 11 | "green" : { "value": "#00FF00" } 12 | }, 13 | "primary" : { "value": "{color.brand.primary.value}" }, 14 | "secondary" : { "value": "{color.brand.secondary.value}" }, 15 | "action": { 16 | "primary" : { "value": "{color.primary.value}" }, 17 | "secondary" : { "value": "{color.secondary.value}" }, 18 | "tertiary" : { "value": "{color.base.gray.medium.value}" } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Target Support Files/StyleDictionary/StyleDictionary-umbrella.h: -------------------------------------------------------------------------------- 1 | #ifdef __OBJC__ 2 | #import 3 | #else 4 | #ifndef FOUNDATION_EXPORT 5 | #if defined(__cplusplus) 6 | #define FOUNDATION_EXPORT extern "C" 7 | #else 8 | #define FOUNDATION_EXPORT extern 9 | #endif 10 | #endif 11 | #endif 12 | 13 | #import "StyleDictionaryColor.h" 14 | #import "StyleDictionaryIcons.h" 15 | #import "StyleDictionaryProperties.h" 16 | #import "StyleDictionarySize.h" 17 | #import "StyleDictionary.h" 18 | #import "StyleDictionaryButton.h" 19 | #import "UIButton+StyleDictionary.h" 20 | #import "UIColor+StyleDictionary.h" 21 | #import "UIFont+MaterialIcons.h" 22 | 23 | FOUNDATION_EXPORT double StyleDictionaryVersionNumber; 24 | FOUNDATION_EXPORT const unsigned char StyleDictionaryVersionString[]; 25 | 26 | -------------------------------------------------------------------------------- /scripts/handlebars/templates/transform_groups.hbs: -------------------------------------------------------------------------------- 1 | # Transform Groups 2 | 3 | Transform Groups are a way to easily use multiple transforms at once. They are an array of transforms. You can define a custom transform group with the [`registerTransformGroup`](api.md#registertransformgroup). 4 | 5 | You use transformGroups in your config file under platforms > [platform] > transformGroup 6 | 7 | ```json 8 | { 9 | "source": ["tokens/**/*.json"], 10 | "platforms": { 11 | "android": { 12 | "transformGroup": "android" 13 | } 14 | } 15 | } 16 | ``` 17 | 18 | ---- 19 | 20 | ## Pre-defined Transform groups 21 | 22 | [lib/common/transformGroups.js](https://github.com/amzn/style-dictionary/blob/main/lib/common/transformGroups.js) 23 | 24 | {{#namespace name="TransformGroups"}} 25 | {{>members~}} 26 | {{/namespace}} 27 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Components/CardViewCell.h: -------------------------------------------------------------------------------- 1 | // 2 | // CardViewCell.h 3 | // StyleDictionaryExample 4 | // 5 | // Created by Banks, Daniel on 1/30/17. 6 | // Copyright © 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import 10 | #import 11 | 12 | @interface CardViewCell : UICollectionViewCell 13 | 14 | @property (nonatomic, strong) NSString *title; 15 | @property (nonatomic, strong) NSString *subtitle; 16 | @property (nonatomic, strong) NSString *icon; 17 | 18 | @property (nonatomic, retain) UILabel *titleLabel; 19 | @property (nonatomic, retain) UILabel *subtitleLabel; 20 | @property (nonatomic, retain) UILabel *iconLabel; 21 | 22 | - (void)setTitle:(NSString *)title andSubtitle:(NSString *)subtitle andIcon:(NSString *)icon; 23 | 24 | @end 25 | -------------------------------------------------------------------------------- /examples/advanced/node-modules-as-config-and-properties/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary-example-node", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "clean": "rm -rf build", 8 | "build": "style-dictionary build --config ./config.js", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git://github.com/amzn/style-dictionary.git" 14 | }, 15 | "author": "", 16 | "license": "Apache-2.0", 17 | "bugs": { 18 | "url": "https://github.com/dbanksdesign/style-dictionary-node/issues" 19 | }, 20 | "homepage": "https://github.com/dbanksdesign/style-dictionary-node#readme", 21 | "devDependencies": { 22 | "style-dictionary": "3.1.1", 23 | "tinycolor2": "^1.4.1" 24 | } 25 | } -------------------------------------------------------------------------------- /examples/advanced/transitive-transforms/tokens/color/font.json5: -------------------------------------------------------------------------------- 1 | { 2 | color: { 3 | font: { 4 | primary: { value: "{color.core.black.value}" }, 5 | secondary: { 6 | value: "{color.font.primary.value}", 7 | modify: [{ 8 | type: "brighten", 9 | // See https://gka.github.io/chroma.js/#color-brighten 10 | // for definition of brighten 11 | amount: 1 12 | }] 13 | }, 14 | tertiary: { 15 | // transitive transforms allow you to modify a modified reference 16 | value: "{color.font.secondary.value}", 17 | modify: [{ 18 | // this will brighten the secondary value, which is a brightened version 19 | // of primary 20 | type: "brighten", 21 | amount: 1 22 | }] 23 | }, 24 | } 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /examples/complete/StyleDictionary.podspec: -------------------------------------------------------------------------------- 1 | 2 | Pod::Spec.new do |s| 3 | s.name = 'StyleDictionary' 4 | s.version = '0.1.0' 5 | s.summary = 'An example StyleDictionary cocoapod and example app.' 6 | s.description = <<-DESC 7 | An example StyleDictionary cocoapod and example app. 8 | DESC 9 | s.homepage = 'homepage' 10 | s.license = { :type => 'Apache-2.0', :file => 'LICENSE' } 11 | s.author = { 'Danny Banks' => 'djb@amazon.com' } 12 | s.source = { :git => '', :tag => s.version.to_s } 13 | s.platform = :ios 14 | s.source_files = 'ios/Classes/**/*.{h,m}' 15 | s.public_header_files = 'ios/Classes/**/*.h' 16 | s.resource_bundles = { 17 | 'StyleDictionary' => ['assets/**/*'] 18 | } 19 | s.frameworks = 'UIKit', 'QuartzCore' 20 | end 21 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/Views/SizeViewController.h: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | // 4 | // Licensed under the Apache License, Version 2.0 (the "License"). 5 | // You may not use this file except in compliance with the License. 6 | // A copy of the License is located at 7 | // 8 | // http://www.apache.org/licenses/LICENSE-2.0 9 | // 10 | // or in the "license" file accompanying this file. This file is distributed 11 | // on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either 12 | // express or implied. See the License for the specific language governing 13 | // permissions and limitations under the License. 14 | // 15 | // SizeViewController.h 16 | // 17 | 18 | #import 19 | 20 | @interface SizeViewController : UIViewController 21 | 22 | @end 23 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/StyleDictionary/StyleDictionaryViewController.m: -------------------------------------------------------------------------------- 1 | // 2 | // StyleDictionaryViewController.m 3 | // StyleDictionary 4 | // 5 | // Created by Danny Banks on 02/09/2017. 6 | // Copyright (c) 2017 Danny Banks. All rights reserved. 7 | // 8 | 9 | #import "StyleDictionaryViewController.h" 10 | 11 | @interface StyleDictionaryViewController () 12 | 13 | @end 14 | 15 | @implementation StyleDictionaryViewController 16 | 17 | - (void)viewDidLoad 18 | { 19 | [super viewDidLoad]; 20 | self.view.backgroundColor = [UIColor styleDictionaryColor:StyleDictionaryColorFontError]; 21 | // Do any additional setup after loading the view, typically from a nib. 22 | } 23 | 24 | - (void)didReceiveMemoryWarning 25 | { 26 | [super didReceiveMemoryWarning]; 27 | // Dispose of any resources that can be recreated. 28 | } 29 | 30 | @end 31 | -------------------------------------------------------------------------------- /examples/complete/tokens/color/border.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "border": { 4 | "light": { "value": "{color.base.grey.200.value}" }, 5 | "base": { "value": "{color.base.grey.300.value}" }, 6 | "dark": { "value": "{color.base.grey.400.value}" }, 7 | "focus": { "value": "{color.brand.primary.base.value}" }, 8 | "error": { "value": "{color.base.red.600.value}" }, 9 | "warning": { "value": "{color.base.orange.600.value}" }, 10 | "success": { "value": "{color.base.green.600.value}" }, 11 | 12 | "button": { 13 | "secondary": { 14 | "base": { "value": "{color.border.base.value}" }, 15 | "active": { "value": "{color.brand.secondary.dark.value}"}, 16 | "disabled": { "value": "{color.border.light.value}" } 17 | } 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/createreactnativeapp/Images.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "iphone", 5 | "size" : "29x29", 6 | "scale" : "2x" 7 | }, 8 | { 9 | "idiom" : "iphone", 10 | "size" : "29x29", 11 | "scale" : "3x" 12 | }, 13 | { 14 | "idiom" : "iphone", 15 | "size" : "40x40", 16 | "scale" : "2x" 17 | }, 18 | { 19 | "idiom" : "iphone", 20 | "size" : "40x40", 21 | "scale" : "3x" 22 | }, 23 | { 24 | "idiom" : "iphone", 25 | "size" : "60x60", 26 | "scale" : "2x" 27 | }, 28 | { 29 | "idiom" : "iphone", 30 | "size" : "60x60", 31 | "scale" : "3x" 32 | } 33 | ], 34 | "info" : { 35 | "version" : 1, 36 | "author" : "xcode" 37 | } 38 | } -------------------------------------------------------------------------------- /examples/complete/android/styledictionary/build.gradle: -------------------------------------------------------------------------------- 1 | apply plugin: 'com.android.library' 2 | 3 | android { 4 | compileSdkVersion 30 5 | 6 | defaultConfig { 7 | minSdkVersion 15 8 | targetSdkVersion 30 9 | versionCode 1 10 | versionName "1.0" 11 | 12 | testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner" 13 | 14 | } 15 | buildTypes { 16 | release { 17 | minifyEnabled false 18 | proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' 19 | } 20 | } 21 | } 22 | 23 | dependencies { 24 | androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', { 25 | exclude group: 'com.android.support', module: 'support-annotations' 26 | }) 27 | testImplementation 'junit:junit:4.13.2' 28 | } 29 | -------------------------------------------------------------------------------- /examples/complete/tokens/color/brand.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "brand": { 4 | "primary": { 5 | "lighter": { "value": "{color.base.teal.100.value}" }, 6 | "light": { "value": "{color.base.teal.300.value}" }, 7 | "base": { "value": "{color.base.teal.500.value}" }, 8 | "dark": { "value": "{color.base.teal.700.value}" }, 9 | "darker": { "value": "{color.base.teal.900.value}" } 10 | }, 11 | 12 | "secondary": { 13 | "lighter": { "value": "{color.base.indigo.100.value}" }, 14 | "light": { "value": "{color.base.indigo.300.value}" }, 15 | "base": { "value": "{color.base.indigo.500.value}" }, 16 | "dark": { "value": "{color.base.indigo.700.value}" }, 17 | "darker": { "value": "{color.base.indigo.900.value}" } 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /__integration__/tokens/color/font.jsonc: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "font": { 4 | "primary": { "value": "{color.core.neutral.1100.value}" }, 5 | "secondary": { "value": "{color.core.neutral.900.value}" }, 6 | "tertiary": { "value": "{color.core.neutral.800.value}" }, 7 | 8 | "interactive": { 9 | "_": { "value": "{color.brand.primary.value}" }, 10 | "hover": { "value": "{color.brand.primary.value}" }, 11 | "active": { "value": "{color.brand.secondary.value}" }, 12 | "disabled": { "value": "{color.font.tertiary.value}" } 13 | }, 14 | 15 | "danger": { "value": "{color.core.red.1000.value}" }, 16 | "warning": { "value": "{color.core.orange.1000.value}" }, 17 | // make sure references without .value work too 18 | "success": { "value": "{color.core.green.1000}" } 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/res/layout/activity_base_color.xml: -------------------------------------------------------------------------------- 1 | 2 | 16 | -------------------------------------------------------------------------------- /types/Options.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with 5 | * the License. A copy of the License is located at 6 | * 7 | * http://www.apache.org/licenses/LICENSE-2.0 8 | * 9 | * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR 10 | * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions 11 | * and limitations under the License. 12 | */ 13 | 14 | import { FileHeader } from './FileHeader'; 15 | 16 | export interface Options { 17 | showFileHeader?: boolean; 18 | fileHeader?: string | FileHeader; 19 | outputReferences?: boolean; 20 | [key: string]: any; 21 | } -------------------------------------------------------------------------------- /examples/advanced/tokens-deprecation/build.js: -------------------------------------------------------------------------------- 1 | const StyleDictionary = require('style-dictionary').extend(__dirname + '/config.json'); 2 | const fs = require('fs'); 3 | const _ = require('lodash'); 4 | 5 | 6 | console.log('Build started...'); 7 | console.log('\n=============================================='); 8 | 9 | StyleDictionary.registerFormat({ 10 | name: 'custom/format/scss', 11 | formatter: _.template(fs.readFileSync(__dirname + '/templates/web-scss.template')) 12 | }); 13 | 14 | StyleDictionary.registerFormat({ 15 | name: 'custom/format/ios-plist', 16 | formatter: _.template(fs.readFileSync(__dirname + '/templates/ios-plist.template')) 17 | }); 18 | 19 | // FINALLY, BUILD ALL THE PLATFORMS 20 | StyleDictionary.buildAllPlatforms(); 21 | 22 | 23 | console.log('\n=============================================='); 24 | console.log('\nBuild completed!'); 25 | -------------------------------------------------------------------------------- /examples/complete/ios/Demo/Pods/Local Podspecs/StyleDictionary.podspec.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "StyleDictionary", 3 | "version": "0.1.0", 4 | "summary": "An example StyleDictionary cocoapod and example app.", 5 | "description": "An example StyleDictionary cocoapod and example app.", 6 | "homepage": "homepage", 7 | "license": { 8 | "type": "Apache-2.0", 9 | "file": "LICENSE" 10 | }, 11 | "authors": { 12 | "Danny Banks": "djb@amazon.com" 13 | }, 14 | "source": { 15 | "git": "", 16 | "tag": "0.1.0" 17 | }, 18 | "platforms": { 19 | "ios": null 20 | }, 21 | "source_files": "ios/Classes/**/*.{h,m}", 22 | "public_header_files": "ios/Classes/**/*.h", 23 | "resource_bundles": { 24 | "StyleDictionary": [ 25 | "assets/**/*" 26 | ] 27 | }, 28 | "frameworks": [ 29 | "UIKit", 30 | "QuartzCore" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /examples/complete/ios/Classes/UIFont+MaterialIcons.h: -------------------------------------------------------------------------------- 1 | // 2 | // Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | // 4 | // Licensed under the Apache License, Version 2.0 (the "License"). 5 | // You may not use this file except in compliance with the License. 6 | // A copy of the License is located at 7 | // 8 | // http://www.apache.org/licenses/LICENSE-2.0 9 | // 10 | // or in the "license" file accompanying this file. This file is distributed 11 | // on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either 12 | // express or implied. See the License for the specific language governing 13 | // permissions and limitations under the License. 14 | // 15 | // UIFont+MaterialIcons.h 16 | // 17 | 18 | #import 19 | 20 | @interface UIFont (MaterialIcons) 21 | 22 | + (instancetype)iconFontOfSize:(CGFloat)size; 23 | 24 | @end 25 | -------------------------------------------------------------------------------- /examples/advanced/custom-filters/build.js: -------------------------------------------------------------------------------- 1 | const StyleDictionary = require('../../../index'); 2 | 3 | console.log('Build started...'); 4 | console.log('\n=============================================='); 5 | 6 | 7 | // REGISTER THE CUSTOM FILTERS 8 | 9 | StyleDictionary.registerFilter({ 10 | name: 'removeBigSpacing', 11 | matcher: function(token) { 12 | return token.group === 'spacing' && token.value < 0.5 13 | } 14 | }); 15 | 16 | // APPLY THE CONFIGURATION 17 | // IMPORTANT: the registration of custom transforms 18 | // needs to be done _before_ applying the configuration 19 | const StyleDictionaryExtended = StyleDictionary.extend(__dirname + '/config.json'); 20 | 21 | 22 | // FINALLY, BUILD ALL THE PLATFORMS 23 | StyleDictionaryExtended.buildAllPlatforms(); 24 | 25 | 26 | console.log('\n=============================================='); 27 | console.log('\nBuild completed!'); 28 | -------------------------------------------------------------------------------- /examples/advanced/create-react-app/src/components/with-sass/ComponentWithSass.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './sass-logo.svg'; 3 | import './ComponentWithSass.scss'; 4 | 5 | class MyComponent extends Component { 6 | render() { 7 | return ( 8 |
9 | Sass logo 10 |
11 |

12 | This component is styled with Sass and Style Dictionary tokens 13 |

14 |

More information about Sass: sass-lang.com

15 |
16 |
17 | ); 18 | } 19 | } 20 | 21 | export default MyComponent; 22 | -------------------------------------------------------------------------------- /examples/advanced/create-react-native-app/ios/Podfile: -------------------------------------------------------------------------------- 1 | require_relative '../node_modules/react-native/scripts/react_native_pods' 2 | require_relative '../node_modules/react-native-unimodules/cocoapods.rb' 3 | require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' 4 | 5 | platform :ios, '10.0' 6 | 7 | target 'createreactnativeapp' do 8 | use_unimodules! 9 | config = use_native_modules! 10 | 11 | use_react_native!(:path => config["reactNativePath"]) 12 | 13 | # Uncomment the code below to enable Flipper. 14 | # 15 | # You should not install Flipper in CI environments when creating release 16 | # builds, this will lead to significantly slower build times. 17 | # 18 | # Note that if you have use_frameworks! enabled, Flipper will not work. 19 | # 20 | # use_flipper! 21 | # post_install do |installer| 22 | # flipper_post_install(installer) 23 | # end 24 | end 25 | -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/java/com/amazon/styledictionaryexample/util/StringHelper.kt: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). 5 | * You may not use this file except in compliance with the License. 6 | * A copy of the License is located at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * or in the "license" file accompanying this file. This file is distributed 11 | * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either 12 | * express or implied. See the License for the specific language governing 13 | * permissions and limitations under the License. 14 | */ 15 | package com.amazon.styledictionaryexample.util 16 | 17 | object StringHelper { 18 | fun nameToDisplay(str: String): String { 19 | return str.replace("_".toRegex(), " ") 20 | } 21 | } -------------------------------------------------------------------------------- /examples/complete/android/demo/src/main/java/com/amazon/styledictionaryexample/models/StyleDictionaryNode.kt: -------------------------------------------------------------------------------- 1 | /** 2 | * Copyright 2017 Amazon.com, Inc. or its affiliates. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"). 5 | * You may not use this file except in compliance with the License. 6 | * A copy of the License is located at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * or in the "license" file accompanying this file. This file is distributed 11 | * on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either 12 | * express or implied. See the License for the specific language governing 13 | * permissions and limitations under the License. 14 | */ 15 | package com.amazon.styledictionaryexample.models 16 | 17 | data class StyleDictionaryNode( 18 | val name: String, 19 | val count: Int = 0, 20 | val isLeaf: Boolean = false 21 | ) -------------------------------------------------------------------------------- /examples/advanced/format-helpers/README.md: -------------------------------------------------------------------------------- 1 | ## Format Helpers 2 | 3 | This example shows how to use the format helper methods to create custom formats. 4 | 5 | #### Running the example 6 | 7 | First of all, set up the required dependencies running the command `npm install` in your local CLI environment (if you prefer to use *yarn* update the commands accordingly). 8 | 9 | At this point, if you want to build the tokens you can run `npm run build`. This command will run the Style Dictionary CLI with the **sd.config.js** as the configuration file and will generate the files in the `build` folder. 10 | 11 | #### How does it work? 12 | 13 | Starting in version 3.0, Style Dictionary exposes internal helper methods for formats. In the configuration we are defining custom formats using some of those format helper methods. 14 | 15 | #### What to look at 16 | 17 | The [`sd.config.js`](sd.config.js) file has everything you need to know. 18 | --------------------------------------------------------------------------------