├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── _assets └── icons │ ├── eye.svg │ ├── heart.svg │ ├── location.svg │ ├── mail.svg │ ├── paperplane.svg │ ├── photo.svg │ ├── search.svg │ ├── settings.svg │ ├── star.svg │ └── user.svg ├── _tokens ├── _components │ └── button.yml ├── _core │ ├── colors.yml │ ├── fonts.yml │ ├── icons.yml │ ├── spacing.yml │ ├── strokes.yml │ └── typography.yml └── styles.yml ├── config.json ├── gulp ├── build-ios.js ├── build-less.js ├── build-sass.js ├── build-scss.js ├── build-stylus.js ├── build-xml.js ├── icons-ios.js └── icons.js ├── gulpfile.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .npm 2 | *.log 3 | node_modules 4 | _dist 5 | _temp 6 | _site 7 | .sass-cache 8 | assets 9 | .DS_Store 10 | _tokens/*.json -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4.5.0" 4 | before_install: 5 | - npm config set registry http://registry.npmjs.org/ 6 | install: 7 | - npm install 8 | before_script: 9 | - npm install -g gulp 10 | script: gulp dragoman 11 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## Dragoman Tool 4 | * Install Node 5 | * Fork Repo 6 | * Clone & Checkout 'development' branch 7 | * Run `npm install` 8 | * Checkout README.md for more information 9 | * Comment on any issue you want to work on so we know it's being taken care of! 10 | * Pull requests to 'development' branch 11 | 12 | ## Github Page 13 | * [Install Jekyll](http://jekyllrb.com/) 14 | * [Install Bundler](http://bundler.io/) 15 | * Fork Repo 16 | * Clone & Checkout 'gh-pages' branch 17 | * Run `npm install` 18 | * Run `bundle install` 19 | * Run `jekyll serve -w` 20 | * Run `compass watch` 21 | * Comment on any issue you want to work on so we know it's being taken care of! 22 | * Pull requests to the 'gh-pages' branch 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Nate Baldwin 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # DEPRECATED 2 | This tool is no longer supported. 3 | 4 | # Dragoman 5 | [![GitHub version](https://badge.fury.io/gh/NateBaldwinDesign%2FDragoman.svg)](https://badge.fury.io/gh/NateBaldwinDesign%2FDragoman) [![Build Status](https://travis-ci.org/NateBaldwinDesign/dragoman.svg?branch=master)](https://travis-ci.org/NateBaldwinDesign/Dragoman) [![Dependency Status](https://gemnasium.com/badges/github.com/NateBaldwinDesign/Dragoman.svg)](https://gemnasium.com/github.com/NateBaldwinDesign/Dragoman) 6 | [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)]() 7 | 8 | _[drag-uh-muh n]_ 9 | noun 10 | 1. a professional interpreter. 11 | 12 | Translate your web & mobile product suite into a consistent experience with universal design tokens. 13 | 14 | ## What is it? 15 | Dragoman is a plugin for creating applications with a token-based design systems approach. Using gulp with yaml "tokens", Dragoman generates multi-platform assets for core design attributes. 16 | 17 | This allows you build unified & consistent applications with a core set of *cross-platform variables* 18 | 19 | #### Targeted Languages & Platforms 20 | * Less 21 | * Sass 22 | * Scss 23 | * Stylus 24 | * Android XML 25 | * iOS Swift 26 | 27 | ## Getting Started 28 | 29 | Define your paths, and the languages you intend to build your applications in the ./config.json file (_language selection in progress_). 30 | 31 | To translate every language in the tool, run dragoman without any options: 32 | 33 | ```bash 34 | $ gulp dragoman 35 | ``` 36 | 37 | To translate only one language, run dragoman with options: 38 | 39 | ``` bash 40 | $ gulp dragoman-[options] 41 | ``` 42 | 43 | #### Options: 44 | * [default] - translates tokens to all languages 45 | * scss 46 | * sass 47 | * less 48 | * stylus 49 | * android (xml) 50 | * ios (swift) 51 | * [option]-icons - generates icons along with language translation 52 | * web - translates all web languages & generates icons 53 | * mobile - translates android, ios, & generates icons for both 54 | 55 | eg. If you want to translate tokens into .less along with web iconography, run: 56 | 57 | ``` bash 58 | $ gulp dragoman-less-icons 59 | ``` 60 | ---- 61 | 62 | #### Default Design Tokens 63 | * Colors 64 | * Fonts 65 | * Spacing 66 | * Iconography 67 | * Typography 68 | 69 | These are the core design assets that need to be controlled cross-platform variables. You can add more tokens as you need; simply include them in the 'styles.yml' token, which includes all partials for an easy import file for your CSS stylesheets. 70 | 71 | #### Writing Variables in Tokens: 72 | When using a variable as a value, use `%` prefix. Defining a variable (as the key), no prefix is necessary. 73 | 74 | ```yaml 75 | my-color: "%color-primary" 76 | ``` 77 | 78 | 79 | ### Example 80 | Default color.yml file 81 | 82 | ```yaml 83 | color: 84 | orange: "#f26322" 85 | purple: "#783084" 86 | light-green: "#52ff7a" 87 | ``` 88 | Output as Scss: 89 | 90 | ```sass 91 | $color-orange: #f26322; 92 | $color-purple: #783084; 93 | $color-light-green: #52ff7a; 94 | ``` 95 | Output as Android XML: 96 | 97 | ```xml 98 | 99 | 100 | #f26322 101 | #783084 102 | #52ff7a 103 | 104 | ``` 105 | Output as iOS Swift: _(in progress)_ 106 | 107 | ```swift 108 | import UIKit 109 | extension UIColor { 110 | class func color-orange() -> UIColor { 111 | return UIColor(red: 242/255.0, green: 99/255.0, blue: 34/255.0, alpha: 1.0; 112 | } 113 | 114 | class func color-purple() -> UIColor { 115 | return UIColor(red: 120/255.0, green: 48/255.0, blue: 132/255.0, alpha: 1.0; 116 | } 117 | 118 | class func color-light-green() -> UIColor { 119 | return UIColor(red: 82/255.0, green: 255/255.0, blue: 122/255.0, alpha: 1.0; 120 | } 121 | } 122 | ``` 123 | 124 | ### Future Goals 125 | Ultimately, I would like this tool to be able to read shareable design sourcefiles and perform the translations from those. For example, this input could be: 126 | * Craft (by InVision) Libraries 127 | * Adobe Libraries 128 | * System color palettes (.clr files) 129 | * Incorporate documentation in tokens 130 | -------------------------------------------------------------------------------- /_assets/icons/eye.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/location.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/mail.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/paperplane.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/photo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/settings.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/star.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_assets/icons/user.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /_tokens/_components/button.yml: -------------------------------------------------------------------------------- 1 | name: button 2 | description: Buttons are used to indicate clickable elements and perform an action. 3 | button: 4 | background-color: "%color-orange" 5 | border-color: "%color-orange" 6 | border-width: "%stroke-xsmall" 7 | font: "%font-secondary" 8 | -------------------------------------------------------------------------------- /_tokens/_core/colors.yml: -------------------------------------------------------------------------------- 1 | name: color 2 | description: Color palette used throughout the interface. 3 | color: 4 | orange: "#f26322" 5 | purple: "#783084" 6 | light-green: "#52ff7a" -------------------------------------------------------------------------------- /_tokens/_core/fonts.yml: -------------------------------------------------------------------------------- 1 | name: fonts 2 | description: Default font stacks to be used throughout the UI. 3 | font: 4 | primary: "Times New Roman, Georgia, serif" 5 | secondary: "Helvetica, Arial, sans-serif" 6 | monospace: "'Lucida Console', Monaco, monospace" 7 | -------------------------------------------------------------------------------- /_tokens/_core/icons.yml: -------------------------------------------------------------------------------- 1 | name: icons 2 | description: Sizing and spacing for global instances of iconography in the UI. 3 | icon: 4 | size: "%spacing-medium" -------------------------------------------------------------------------------- /_tokens/_core/spacing.yml: -------------------------------------------------------------------------------- 1 | name: spacing 2 | description: Global units of measurement, which are used throughout the UI in order to maintain harmony and consistency. 3 | spacing: 4 | xsmall: 8px 5 | small: 12px 6 | medium: 16px 7 | large: 24px 8 | xlarge: 32px 9 | -------------------------------------------------------------------------------- /_tokens/_core/strokes.yml: -------------------------------------------------------------------------------- 1 | name: strokes 2 | description: Strokes refer to common border widths used throughout the interface. 3 | stroke: 4 | xsmall: 1px 5 | small: 2px 6 | medium: 4px 7 | large: 6px 8 | xlarge: 8px -------------------------------------------------------------------------------- /_tokens/_core/typography.yml: -------------------------------------------------------------------------------- 1 | name: typography 2 | description: Measurements and specifications for typography throughout the UI. 3 | base: 4 | font-size: "%spacing-medium" 5 | line-height: "%spacing-large" 6 | -------------------------------------------------------------------------------- /_tokens/styles.yml: -------------------------------------------------------------------------------- 1 | name: styles 2 | description: This is the configuration file determining which tokens to include when generating cross-platform stylesheets. 3 | import: 4 | - colors 5 | - fonts 6 | - spacing 7 | - typography 8 | - icons 9 | -------------------------------------------------------------------------------- /config.json: -------------------------------------------------------------------------------- 1 | { 2 | "path": { 3 | "tokens": "_tokens", 4 | "assets": "_assets", 5 | "dist": "_dist", 6 | "temp": "_temp" 7 | }, 8 | "compileStyles": { 9 | "scss": ["json-scss-stylesheet", "icons-web"], 10 | "sass":["json-sass-stylesheet", "icons-web"], 11 | "less": ["json-less-stylesheet", "icons-web"], 12 | "stylus": ["json-stylus-stylesheet", "icons-web"], 13 | "android": ["json-android-color", "icons-android"], 14 | "ios": ["json-ios-color", ""] 15 | } 16 | } -------------------------------------------------------------------------------- /gulp/build-ios.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | fs = require('fs'), 5 | gulp = require('gulp'), 6 | sass = require('gulp-sass'), 7 | clean = require('gulp-rimraf'), 8 | rename = require('gulp-rename'), 9 | wrapper = require('gulp-wrapper'), 10 | replace = require('gulp-replace'), 11 | regexReplace = require('gulp-regex-replace'), 12 | config = require('../config.json'), 13 | paths = { 14 | tokens: config.path.tokens, 15 | dist: config.path.dist, 16 | temp: config.path.temp, 17 | assets: config.path.assets 18 | }; 19 | 20 | //===========================================// 21 | // Convert custom written JSON to ios JSON format 22 | gulp.task('json-ios-color', ['clean-build'], function() { 23 | return gulp 24 | // Convert JSON to Scss 25 | .src( paths.tokens + '/**/colors.json') 26 | .pipe(replace (/(\s*"name".*)/g, '')) 27 | .pipe(replace (/(\s*"description".*)/g, '')) 28 | .pipe(jsonCss({ 29 | targetPre: "scss", 30 | delim: "-" 31 | })) 32 | // Replace characters to allow compiling 33 | // valid CSS in order to convert HEX to RGBA 34 | .pipe(replace('$', 'div#')) 35 | .pipe(replace(': #', ' { background-color: rgba(#')) 36 | .pipe(replace(';', ', 0.999999999); }')) 37 | // Convert to CSS 38 | .pipe(sass()) 39 | // Replace temporaty characters with strings 40 | // that will produce valid swift declarations 41 | .pipe(replace('div#', ' class func ')) 42 | .pipe(replace(' {', '() -> UIColor {')) 43 | .pipe(replace('}', '\n }')) 44 | .pipe(replace(' background-color: rgba(', ' return UIColor(red: ')) 45 | .pipe(replace(',', '/255.0, green:')) 46 | .pipe(replace('green: 1)', 'alpha: 1.0)')) 47 | .pipe(replace('; }', ');\n}')) 48 | .pipe(replace(/(green:.*?)(\s+green:)/g, '$1blue:')) 49 | .pipe(replace('blue', ' blue')) // add a space 50 | .pipe(wrapper({ 51 | header: 'import UIKit\nextension UIColor {\n', 52 | footer: '}\n' 53 | })) 54 | .pipe(rename('colors.swift')) 55 | .pipe(gulp.dest( paths.dist + '/ios')); 56 | }); 57 | -------------------------------------------------------------------------------- /gulp/build-less.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | gulp = require('gulp'), 5 | clean = require('gulp-rimraf'), 6 | rename = require('gulp-rename'), 7 | replace = require('gulp-replace'), 8 | regexReplace = require('gulp-regex-replace'), 9 | config = require('../config.json'), 10 | paths = { 11 | tokens: config.path.tokens, 12 | dist: config.path.dist, 13 | temp: config.path.temp, 14 | assets: config.path.assets 15 | }; 16 | 17 | //===========================================// 18 | // Convert JSON to Less variables 19 | gulp.task('json-less-global', ['clean-build'], function() { 20 | return gulp 21 | .src([ 22 | paths.tokens + '/**/*.json', 23 | '!' + paths.tokens + '/**/styles.json' 24 | ]) 25 | .pipe(replace (/(\s*"name".*)/g, '')) 26 | .pipe(replace (/(\s*"description".*)/g, '')) 27 | .pipe(jsonCss({ 28 | targetPre: "less", 29 | delim: "-" 30 | })) 31 | .pipe(rename({ 32 | prefix: "_" 33 | })) 34 | .pipe(replace('%', '@')) 35 | .pipe(gulp.dest( paths.dist + '/less')); 36 | }); 37 | gulp.task('json-less-stylesheet', ['json-less-global', 'clean-build'], function() { 38 | return gulp 39 | .src([ 40 | paths.tokens + '/styles.json' 41 | ]) 42 | .pipe(replace (/(\s*"name".*)/g, '')) 43 | .pipe(replace (/(\s*"description".*)/g, '')) 44 | .pipe(jsonCss({ 45 | targetPre: "less", 46 | delim: "/" 47 | })) 48 | .pipe(rename({ 49 | prefix: "" 50 | })) 51 | .pipe(replace('$', '@')) 52 | .pipe(replace('@meta', '/')) 53 | .pipe(replace('name:', '')) 54 | .pipe(replace(': ', '/_')) 55 | .pipe(replace('import', 'import "')) 56 | .pipe(replace(';', '";')) 57 | .pipe(replace('version/_', ' Version: ')) 58 | .pipe(regexReplace({regex: '[0-9]/', replace: 'less/'})) 59 | .pipe(gulp.dest( paths.dist + '/less')); 60 | }); 61 | -------------------------------------------------------------------------------- /gulp/build-sass.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | gulp = require('gulp'), 5 | clean = require('gulp-rimraf'), 6 | rename = require('gulp-rename'), 7 | replace = require('gulp-replace'), 8 | regexReplace = require('gulp-regex-replace'), 9 | config = require('../config.json'), 10 | paths = { 11 | tokens: config.path.tokens, 12 | dist: config.path.dist, 13 | temp: config.path.temp, 14 | assets: config.path.assets 15 | }; 16 | 17 | //===========================================// 18 | // Convert JSON to Less variables 19 | gulp.task('json-sass-global', ['clean-build'], function() { 20 | return gulp 21 | .src([ 22 | paths.tokens + '/**/*.json', 23 | '!' + paths.tokens + '/styles.json' 24 | ]) 25 | .pipe(replace (/(\s*"name".*)/g, '')) 26 | .pipe(replace (/(\s*"description".*)/g, '')) 27 | .pipe(jsonCss({ 28 | targetPre: "sass", 29 | delim: "-" 30 | })) 31 | .pipe(rename({ 32 | prefix: "_" 33 | })) 34 | .pipe(replace('%', '$')) 35 | .pipe(gulp.dest( paths.dist + '/sass')); 36 | }); 37 | gulp.task('json-sass-stylesheet', ['json-sass-global', 'clean-build'], function() { 38 | return gulp 39 | .src([ 40 | paths.tokens + '/styles.json' 41 | ]) 42 | .pipe(replace (/(\s*"name".*)/g, '')) 43 | .pipe(replace (/(\s*"description".*)/g, '')) 44 | .pipe(jsonCss({ 45 | targetPre: "scss", 46 | delim: "/" 47 | })) 48 | .pipe(rename({ 49 | prefix: "" 50 | })) 51 | .pipe(replace('$', '@')) 52 | .pipe(replace('@meta', '/')) 53 | .pipe(replace('name:', '')) 54 | .pipe(replace(': ', '/_')) 55 | .pipe(replace('import', 'import "')) 56 | .pipe(replace(';', '"')) 57 | .pipe(replace('version/_', ' Version: ')) 58 | .pipe(regexReplace({regex: '[0-9]/', replace: 'sass/'})) 59 | .pipe(gulp.dest( paths.dist + '/sass')); 60 | }); 61 | -------------------------------------------------------------------------------- /gulp/build-scss.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | gulp = require('gulp'), 5 | clean = require('gulp-rimraf'), 6 | rename = require('gulp-rename'), 7 | replace = require('gulp-replace'), 8 | regexReplace = require('gulp-regex-replace'), 9 | config = require('../config.json'), 10 | paths = { 11 | tokens: config.path.tokens, 12 | dist: config.path.dist, 13 | temp: config.path.temp, 14 | assets: config.path.assets 15 | }; 16 | 17 | //===========================================// 18 | // Convert JSON to SCSS variables 19 | gulp.task('json-scss-global', ['clean-build'], function() { 20 | return gulp 21 | .src([ 22 | paths.tokens + '/**/*.json', 23 | '!' + paths.tokens + '/**/styles.json' 24 | ]) 25 | .pipe(replace (/(\s*"name".*)/g, '')) 26 | .pipe(replace (/(\s*"description".*)/g, '')) 27 | .pipe(jsonCss({ 28 | targetPre: "scss", 29 | delim: "-" 30 | })) 31 | .pipe(rename({ 32 | prefix: "_" 33 | })) 34 | .pipe(replace('%', '$')) 35 | .pipe(gulp.dest( paths.dist + '/scss')); 36 | }); 37 | gulp.task('json-scss-stylesheet', ['json-scss-global', 'clean-build'], function() { 38 | return gulp 39 | .src([ 40 | paths.tokens + '/styles.json' 41 | ]) 42 | .pipe(replace (/(\s*"name".*)/g, '')) 43 | .pipe(replace (/(\s*"description".*)/g, '')) 44 | .pipe(jsonCss({ 45 | targetPre: "scss", 46 | delim: "/" 47 | })) 48 | .pipe(rename({ 49 | prefix: "" 50 | })) 51 | .pipe(replace('$', '@')) 52 | .pipe(replace('@meta', '/')) 53 | .pipe(replace('name:', '')) 54 | .pipe(replace(': ', '/_')) 55 | .pipe(replace(';', '";')) 56 | .pipe(replace('import', 'import "')) 57 | .pipe(replace('version/_', ' Version: ')) 58 | .pipe(regexReplace({regex: '[0-9]/', replace: 'scss/'})) 59 | .pipe(gulp.dest( paths.dist + '/scss')); 60 | }); 61 | -------------------------------------------------------------------------------- /gulp/build-stylus.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | gulp = require('gulp'), 5 | clean = require('gulp-rimraf'), 6 | rename = require('gulp-rename'), 7 | replace = require('gulp-replace'), 8 | regexReplace = require('gulp-regex-replace'), 9 | config = require('../config.json'), 10 | paths = { 11 | tokens: config.path.tokens, 12 | dist: config.path.dist, 13 | temp: config.path.temp, 14 | assets: config.path.assets 15 | }; 16 | 17 | //===========================================// 18 | // Convert JSON to Stylus variables 19 | gulp.task('json-stylus-global', ['clean-build'], function() { 20 | return gulp 21 | .src([ 22 | paths.tokens + '/**/*.json', 23 | '!' + paths.tokens + '/**/styles.json' 24 | ]) 25 | .pipe(replace (/(\s*"name".*)/g, '')) 26 | .pipe(replace (/(\s*"description".*)/g, '')) 27 | .pipe(jsonCss({ 28 | targetPre: "sass", 29 | delim: "-" 30 | })) 31 | .pipe(replace('$', '')) 32 | .pipe(replace(':', ' =')) 33 | .pipe(replace('%', '')) 34 | .pipe(rename({ 35 | prefix: "_", 36 | extname: ".styl" 37 | })) 38 | // .pipe(replace('%', '@')) 39 | .pipe(gulp.dest( paths.dist + '/stylus')); 40 | }); 41 | gulp.task('json-stylus-stylesheet', ['json-stylus-global', 'clean-build'], function() { 42 | return gulp 43 | .src([ 44 | paths.tokens + '/styles.json' 45 | ]) 46 | .pipe(replace (/(\s*"name".*)/g, '')) 47 | .pipe(replace (/(\s*"description".*)/g, '')) 48 | .pipe(jsonCss({ 49 | targetPre: "scss", 50 | delim: "/" 51 | })) 52 | .pipe(rename({ 53 | prefix: "" 54 | })) 55 | .pipe(replace('$', '@')) 56 | .pipe(replace('@meta', '/')) 57 | .pipe(replace('name:', '')) 58 | .pipe(replace(': ', '/_')) 59 | .pipe(replace('import', 'import "')) 60 | .pipe(replace(';', '"')) 61 | .pipe(replace('version/_', ' Version: ')) 62 | .pipe(regexReplace({regex: '[0-9]/', replace: 'stylus/'})) 63 | .pipe(rename({ 64 | extname: ".styl" 65 | })) 66 | .pipe(gulp.dest( paths.dist + '/stylus')); 67 | }); 68 | -------------------------------------------------------------------------------- /gulp/build-xml.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var jsonCss = require('gulp-json-css'), 4 | gulp = require('gulp'), 5 | clean = require('gulp-rimraf'), 6 | rename = require('gulp-rename'), 7 | replace = require('gulp-replace'), 8 | regexReplace = require('gulp-regex-replace'), 9 | jsonTransform = require('gulp-json-transform'), 10 | wrapper = require('gulp-wrapper'), 11 | config = require('../config.json'), 12 | paths = { 13 | tokens: config.path.tokens, 14 | dist: config.path.dist, 15 | temp: config.path.temp, 16 | assets: config.path.assets 17 | }; 18 | 19 | //===========================================// 20 | // Convert JSON to Android XML 21 | gulp.task('json-android-dimensions', ['clean-build'], function() { 22 | return gulp 23 | .src( paths.tokens + '/**/spacing.json') 24 | .pipe(jsonTransform(function(data) { 25 | return { 26 | base: data.spacing, 27 | whitespace: data.whitespace 28 | }; 29 | })) 30 | .pipe(replace (/(\s*"name".*)/g, '')) 31 | .pipe(replace (/(\s*"description".*)/g, '')) 32 | .pipe(jsonCss({ 33 | targetPre: "scss", 34 | delim: "-" 35 | })) 36 | .pipe(wrapper({ 37 | header: ' \n \n', 38 | footer: '\n \n' 39 | })) 40 | .pipe(replace('$', ' ')) 42 | .pipe(replace(';', '')) 43 | .pipe(rename('spacing.xml')) 44 | .pipe(gulp.dest( paths.dist + '/android')); 45 | }); 46 | gulp.task('json-android-color', ['json-android-dimensions', 'clean-build'], function() { 47 | return gulp 48 | .src( paths.tokens + '/**/colors.json') 49 | .pipe(replace (/(\s*"name".*)/g, '')) 50 | .pipe(replace (/(\s*"description".*)/g, '')) 51 | .pipe(jsonCss({ 52 | targetPre: "scss", 53 | delim: "-" 54 | })) 55 | .pipe(wrapper({ 56 | header: ' \n \n', 57 | footer: '\n \n' 58 | })) 59 | .pipe(replace('$', ' ')) 61 | .pipe(replace(';', '')) 62 | .pipe(rename('colors.xml')) 63 | .pipe(gulp.dest( paths.dist + '/android')); 64 | }); -------------------------------------------------------------------------------- /gulp/icons-ios.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | var gulp = require('gulp'), 4 | clean = require('gulp-rimraf'), 5 | rename = require('gulp-rename'), 6 | replace = require('gulp-replace'), 7 | run = require('gulp-run'), 8 | pngquant = require('imagemin-pngquant'), 9 | // svg2png = require('gulp-svg2png'), 10 | imagemin = require('gulp-imagemin'), 11 | svgstore = require('gulp-svgstore'), 12 | svgmin = require('gulp-svgmin'), 13 | cheerio = require('gulp-cheerio'), 14 | flatten = require('gulp-flatten'), 15 | config = require('../config.json'), 16 | paths = { 17 | tokens: config.path.tokens, 18 | dist: config.path.dist, 19 | temp: config.path.temp, 20 | assets: config.path.assets 21 | }; 22 | 23 | gulp.task('svg-temp', function() { 24 | return gulp 25 | .src( paths.assets + '/**/*.svg') 26 | .pipe(svgmin({ 27 | plugins: [{ 28 | removeXMLProcInst: false 29 | }, { 30 | removeViewBox: false 31 | }, { 32 | removeStyleElement: true 33 | }, { 34 | removeAttrs: { 35 | attrs: ['id', 'path:fill', 'class'] 36 | } 37 | }, { 38 | removeDimensions: true 39 | }, { 40 | removeTitle: true 41 | }] 42 | })) 43 | .pipe(flatten()) 44 | .pipe(gulp.dest( paths.temp + '/icons/svg')) 45 | }); 46 | // resize original svg to control 1x scale 47 | gulp.task('ios-resize', ['svg-temp'], function() { 48 | return gulp.src( paths.temp + '/**/svg/*.svg') 49 | // Use Gulp replace to add styles to SVG 50 | .pipe(replace('", 7 | "license": "MIT", 8 | "repository": { 9 | "type": "git", 10 | "url": "https://github.com/NateBaldwinDesign/dragoman.git" 11 | }, 12 | "devDependencies": { 13 | "cssjson": "^2.1.3", 14 | "del": "^2.2.2", 15 | "fs": "0.0.2", 16 | "gulp": "^3.9.1", 17 | "gulp-beautify": "^2.0.0", 18 | "gulp-cheerio": "^0.6.2", 19 | "gulp-concat-json": "^1.0.0", 20 | "gulp-data": "^1.2.1", 21 | "gulp-flatten": "^0.3.1", 22 | "gulp-if": "^2.0.1", 23 | "gulp-imagemin": "^3.0.1", 24 | "gulp-json-css": "^0.2.3", 25 | "gulp-json-transform": "^0.4.2", 26 | "gulp-jsoncombine": "^1.0.3", 27 | "gulp-npm-run": "0.0.3", 28 | "gulp-regex-replace": "^0.2.3", 29 | "gulp-rename": "^1.2.2", 30 | "gulp-replace": "^0.5.4", 31 | "gulp-require-tasks": "^1.0.5", 32 | "gulp-rimraf": "^0.2.0", 33 | "gulp-run": "^1.7.1", 34 | "gulp-sass": "^2.3.2", 35 | "gulp-svg2png": "^2.0.0", 36 | "gulp-svgmin": "^1.2.2", 37 | "gulp-svgstore": "^6.0.0", 38 | "gulp-util": "^3.0.7", 39 | "gulp-wrapper": "^1.0.0", 40 | "gulp-yaml": "^1.0.1", 41 | "imagemin-pngquant": "^5.0.0", 42 | "node-sass": "^3.8.0", 43 | "normalize-scss": "^5.0.3", 44 | "pn": "^1.0.0", 45 | "require-dir": "^0.3.0", 46 | "semver": "^5.1.0" 47 | } 48 | } 49 | --------------------------------------------------------------------------------