├── .gitattributes ├── .gitignore ├── LICENSE ├── README.html ├── README.md ├── design-tokens ├── css │ ├── style.css │ └── tokens-page-style.css ├── fav-ico │ ├── android-chrome-192x192.png │ ├── android-chrome-384x384.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ ├── site.webmanifest │ └── thumb.png ├── images │ └── wz-logo.svg ├── index.html ├── scripts │ └── main.js └── source │ ├── pug │ └── index.pug │ └── scss │ ├── base.scss │ ├── font-styles.scss │ ├── style.scss │ ├── tokens-page-style.scss │ └── tokens │ ├── _colors.scss │ ├── _grids.scss │ ├── _spacers.scss │ └── _typography.scss ├── prepros-6.config ├── promo ├── css │ ├── normalize.css │ └── style.css ├── fav-ico │ ├── android-chrome-192x192.png │ ├── android-chrome-384x384.png │ ├── apple-touch-icon.png │ ├── browserconfig.xml │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── favicon.ico │ ├── mstile-150x150.png │ ├── site.webmanifest │ └── thumb.png ├── images │ ├── figma-logo.svg │ ├── ipad-sprite.png │ ├── ipad.png │ ├── iphone-sprite.png │ ├── iphone.png │ ├── macbook-sprite.png │ ├── macbook.png │ └── wz-logo.svg ├── index.html ├── scripts │ └── main.js └── source │ ├── pug │ └── index.pug │ └── scss │ ├── base.scss │ ├── font-styles.scss │ ├── style.scss │ └── tokens │ ├── _colors.scss │ ├── _grids.scss │ ├── _spacers.scss │ └── _typography.scss ├── style-dictionary ├── README.md ├── build.js ├── build │ └── web │ │ ├── _colors.scss │ │ ├── _grids.scss │ │ ├── _spacers.scss │ │ └── _typography.scss ├── package.json ├── src │ └── base.json └── yarn.lock └── yarn-error.log /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files # 2 | ###################### 3 | .DS_Store 4 | .DS_Store? 5 | 6 | # node modules 7 | node_modules 8 | /node_modules 9 | style-dictionary/node_modules -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Pavel Laptev 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. -------------------------------------------------------------------------------- /README.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | README.md 5 | 6 | 7 |

wunderzin

8 |

A couple of days ago made a free UI Kit in Figma of a nonexistent online magazine Wunderzine. I made it for a demonstration. And today I want to share with you how to maintain frontend works — generate design tokens using Figma API and a few scripts.

9 |

https://medium.com/@PavelLaptev/design-tokens-with-figma-aef25c42430f

10 | 11 | 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wunderzin 2 | 3 | A couple of days ago made a free UI Kit in Figma of a nonexistent online magazine Wunderzine. I made it for a demonstration. And today I want to share with you how to maintain frontend works — generate design tokens using Figma API and a few scripts. 4 | 5 | https://medium.com/@PavelLaptev/design-tokens-with-figma-aef25c42430f 6 | -------------------------------------------------------------------------------- /design-tokens/css/style.css: -------------------------------------------------------------------------------- 1 | body{background:#fcffea}hr{border:none;border-top:2px dashed rgba(0, 0, 0, 0.1)}.wrapper{max-width:1600px;padding:0 100px}@media screen and (max-width:1024px){.wrapper{padding:0 60px}}@media screen and (max-width:375px){.wrapper{padding:0 20px}}.cta-btn{position:relative;cursor:pointer;padding:0 20px;min-width:220px;font-family:Arimo, sans-serif;font-weight:bold;font-size:16px;height:52px;border-radius:4px;border:none;-webkit-transition:all 0.1s;-o-transition:all 0.1s;transition:all 0.1s}.cta-btn_primary-dark{cursor:s-resize;padding:0 20px;background:#805be8;color:white}.cta-btn_primary-dark:hover{background:#5d2ee2}.cta-btn_primary-dark:focus{background:#5d2ee2}h1{font-family:Zilla Slab, serif;font-size:66px;line-height:90%;color:#313131}@media screen and (max-width:1024px){h1{font-size:56px;line-height:90%}}@media screen and (max-width:375px){h1{font-size:40px;line-height:90%}}h2{font-family:Zilla Slab, serif;font-size:46px;line-height:90%;color:#313131}h3{font-family:Zilla Slab, serif;font-size:36px;line-height:90%;color:#313131}h4{font-family:Arimo, serif;font-size:24px;line-height:120%;color:#313131}a{cursor:pointer;font-family:Arimo, Arimo-Regular, serif;line-height:150%;color:#ff8989;-webkit-transition:all 0.1s;-o-transition:all 0.1s;transition:all 0.1s}a:hover{text-decoration:none}.caption-large{font-family:Arimo, serif;font-size:16px;line-height:140%;color:#313131;text-transform:uppercase;letter-spacing:3.2px}.caption-medium{font-family:Arimo, serif;font-size:12px;line-height:140%;color:#313131;text-transform:uppercase;letter-spacing:2.4px} -------------------------------------------------------------------------------- /design-tokens/css/tokens-page-style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | .btn-loading-hide { 6 | opacity: 0; } 7 | 8 | .btn-loading { 9 | display: block; 10 | position: absolute; 11 | width: 100%; 12 | height: 100%; 13 | background: #805be8; 14 | border-radius: 4px; 15 | top: 0; 16 | left: 0; } 17 | .btn-loading__loader { 18 | display: block; 19 | position: absolute; 20 | top: calc(50% - 14px); 21 | left: calc(50% - 14px); 22 | width: 28px; 23 | height: 28px; 24 | border-radius: 20px; 25 | background: white; 26 | -webkit-animation: ld-flip 2s infinite; 27 | animation: ld-flip 2s infinite; 28 | -webkit-transform: scaleY(1) scaleX(1); 29 | -ms-transform: scaleY(1) scaleX(1); 30 | transform: scaleY(1) scaleX(1); } 31 | 32 | @-webkit-keyframes ld-flip { 33 | 0%, 34 | 25%, 35 | 50%, 36 | 75%, 37 | to { 38 | -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 39 | animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } 40 | 0%, 41 | to { 42 | -webkit-transform: rotateY(0deg) rotateX(0deg); 43 | transform: rotateY(0deg) rotateX(0deg); } 44 | 25% { 45 | -webkit-transform: rotateY(180deg) rotateX(0deg); 46 | transform: rotateY(180deg) rotateX(0deg); } 47 | 50% { 48 | -webkit-transform: rotateY(180deg) rotateX(180deg); 49 | transform: rotateY(180deg) rotateX(180deg); } 50 | 75% { 51 | -webkit-transform: rotateY(0deg) rotateX(180deg); 52 | transform: rotateY(0deg) rotateX(180deg); } } 53 | 54 | @keyframes ld-flip { 55 | 0%, 56 | 25%, 57 | 50%, 58 | 75%, 59 | to { 60 | -webkit-animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 61 | animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); } 62 | 0%, 63 | to { 64 | -webkit-transform: rotateY(0deg) rotateX(0deg); 65 | transform: rotateY(0deg) rotateX(0deg); } 66 | 25% { 67 | -webkit-transform: rotateY(180deg) rotateX(0deg); 68 | transform: rotateY(180deg) rotateX(0deg); } 69 | 50% { 70 | -webkit-transform: rotateY(180deg) rotateX(180deg); 71 | transform: rotateY(180deg) rotateX(180deg); } 72 | 75% { 73 | -webkit-transform: rotateY(0deg) rotateX(180deg); 74 | transform: rotateY(0deg) rotateX(180deg); } } 75 | 76 | .tp-header { 77 | margin-top: 40px; } 78 | .tp-header__wz-logo { 79 | width: 210px; 80 | height: 23px; 81 | background-image: url(../images/wz-logo.svg); 82 | background-size: cover; 83 | background-repeat: no-repeat; } 84 | 85 | .tp-get-tokens-block { 86 | margin: 40px 0 60px; } 87 | 88 | .tp-previews-block { 89 | margin-top: 60px; } 90 | .tp-previews-block__section { 91 | width: 100%; 92 | margin-bottom: 40px; } 93 | .tp-previews-block__section span { 94 | opacity: 0.8; } 95 | .tp-previews-block__section iframe { 96 | margin: 20px 0; 97 | width: 100%; 98 | height: 450px; 99 | border: none; 100 | background: rgba(0, 0, 0, 0.05); } 101 | 102 | .tp-footer { 103 | margin: 40px 0 60px; 104 | display: -webkit-box; 105 | display: -ms-flexbox; 106 | display: flex; 107 | -webkit-box-pack: justify; 108 | -ms-flex-pack: justify; 109 | justify-content: space-between; } 110 | .tp-footer span { 111 | font-size: 18px; } 112 | -------------------------------------------------------------------------------- /design-tokens/fav-ico/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/android-chrome-192x192.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/android-chrome-384x384.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/apple-touch-icon.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /design-tokens/fav-ico/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/favicon-16x16.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/favicon-32x32.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/favicon.ico -------------------------------------------------------------------------------- /design-tokens/fav-ico/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/mstile-150x150.png -------------------------------------------------------------------------------- /design-tokens/fav-ico/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /design-tokens/fav-ico/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/design-tokens/fav-ico/thumb.png -------------------------------------------------------------------------------- /design-tokens/images/wz-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /design-tokens/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Wûnderzin Design Tokens 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |

Design Tokens

29 | 34 |
35 |
36 |
37 | Grids 38 |
39 |
40 |
41 | Spacers 42 |
43 |
44 |
45 | Colors 46 |
47 |
48 |
49 | Typography 50 |
51 |
52 |
53 |
☜  back to the articleGithub
54 |
55 | 56 | 57 | -------------------------------------------------------------------------------- /design-tokens/scripts/main.js: -------------------------------------------------------------------------------- 1 | const getJSONBtn = document.getElementById("get-json-btn"); 2 | const loaderDiv = document.querySelector(".btn-loading"); 3 | 4 | function download(content, fileName, contentType) { 5 | var a = document.createElement("a"); 6 | var file = new Blob([content], { type: contentType }); 7 | a.href = URL.createObjectURL(file); 8 | a.download = fileName; 9 | a.click(); 10 | } 11 | 12 | //////////////////////////////////////////////// 13 | 14 | function getPalette(stylesArtboard) { 15 | // empty "palette obj" wheree we will store all colors 16 | const palette = {}; 17 | // get "palette" artboard 18 | const paletteAtrboard = stylesArtboard.filter(item => { 19 | return item.name === "palette"; 20 | })[0].children; 21 | 22 | // get colors from each children 23 | paletteAtrboard.map(item => { 24 | function rbaObj(obj) { 25 | return item.fills[0].color[obj] * 255; 26 | } 27 | 28 | const colorObj = { 29 | [item.name]: { 30 | value: `rgba(${rbaObj("r")}, ${rbaObj("g")}, ${rbaObj("b")}, ${ 31 | item.fills[0].color.a 32 | })`, 33 | type: "color" 34 | } 35 | }; 36 | 37 | Object.assign(palette, colorObj); 38 | }); 39 | 40 | return palette; 41 | } 42 | 43 | function getGrids(stylesArtboard) { 44 | // empty "grids obj" wheree we will store all colors 45 | const grids = {}; 46 | // get "grids" artboard 47 | const gridsAtrboard = stylesArtboard.filter(item => { 48 | return item.name === "grids"; 49 | })[0].children; 50 | 51 | gridsAtrboard.map(item => { 52 | const gridObj = { 53 | [item.name]: { 54 | count: { 55 | value: item.layoutGrids[0].count, 56 | type: "grids" 57 | }, 58 | gutter: { 59 | value: `${item.layoutGrids[0].gutterSize}px`, 60 | type: "grids" 61 | }, 62 | offset: { 63 | value: `${item.layoutGrids[0].offset}px`, 64 | type: "grids" 65 | }, 66 | width: { 67 | value: `${item.absoluteBoundingBox.width}px`, 68 | type: "grids" 69 | } 70 | } 71 | }; 72 | 73 | Object.assign(grids, gridObj); 74 | }); 75 | 76 | return grids; 77 | } 78 | 79 | function getSpacers(stylesArtboard) { 80 | // empty "spacers obj" wheree we will store all colors 81 | const spacers = {}; 82 | // get "spacers" artboard 83 | const spacersAtrboard = stylesArtboard.filter(item => { 84 | return item.name === "spacers"; 85 | })[0].children; 86 | 87 | spacersAtrboard.map(item => { 88 | const spacerObj = { 89 | [item.name]: { 90 | value: `${item.absoluteBoundingBox.height}px`, 91 | type: "spacers" 92 | } 93 | }; 94 | 95 | Object.assign(spacers, spacerObj); 96 | }); 97 | 98 | return spacers; 99 | } 100 | 101 | function getFontStyles(stylesArtboard) { 102 | // empty "spacers obj" wheree we will store all colors 103 | const fontStyles = {}; 104 | // get "spacers" artboard 105 | const fontStylesAtrboard = stylesArtboard.filter(item => { 106 | return item.name === "typography"; 107 | })[0].children; 108 | 109 | fontStylesAtrboard.map((fontItem, i) => { 110 | if (fontItem.children) { 111 | let subFonts = {}; 112 | 113 | // get all sub fonts 114 | fontItem.children.map(subFontItem => { 115 | let subFontObj = { 116 | [subFontItem.name]: { 117 | family: { 118 | value: `${subFontItem.style.fontFamily}`, 119 | type: "typography" 120 | }, 121 | size: { 122 | value: `${subFontItem.style.fontSize}px`, 123 | type: "typography" 124 | }, 125 | weight: { 126 | value: subFontItem.style.fontWeight, 127 | type: "typography" 128 | }, 129 | lineheight: { 130 | value: `${subFontItem.style.lineHeightPercent}%`, 131 | type: "typography" 132 | }, 133 | spacing: { 134 | value: 135 | subFontItem.style.letterSpacing !== 0 136 | ? `${subFontItem.style.letterSpacing}px` 137 | : "normal", 138 | type: "typography" 139 | } 140 | } 141 | }; 142 | // merge multiple subfonts objects into one 143 | Object.assign(subFonts, subFontObj); 144 | }); 145 | 146 | // 147 | let fontObj = { 148 | [fontItem.name]: subFonts 149 | }; 150 | 151 | Object.assign(fontStyles, fontObj); 152 | } else { 153 | let fontObj = { 154 | [fontItem.name]: { 155 | family: { 156 | value: `${fontItem.style.fontFamily}, ${ 157 | fontItem.style.fontPostScriptName 158 | }`, 159 | type: "typography" 160 | }, 161 | size: { 162 | value: fontItem.style.fontSize, 163 | type: "typography" 164 | }, 165 | weight: { 166 | value: fontItem.style.fontWeight, 167 | type: "typography" 168 | }, 169 | lineheight: { 170 | value: `${fontItem.style.lineHeightPercent}%`, 171 | type: "typography" 172 | }, 173 | spacing: { 174 | value: 175 | fontItem.style.letterSpacing !== 0 176 | ? `${fontItem.style.letterSpacing}px` 177 | : "normal", 178 | type: "typography" 179 | } 180 | } 181 | }; 182 | 183 | Object.assign(fontStyles, fontObj); 184 | } 185 | }); 186 | 187 | return fontStyles; 188 | } 189 | 190 | // main function 191 | async function getStylesArtboard(figmaApiKey, figmaId) { 192 | const result = await fetch("https://api.figma.com/v1/files/" + figmaId, { 193 | method: "GET", 194 | headers: { 195 | "X-Figma-Token": figmaApiKey 196 | } 197 | }); 198 | const figmaTreeStructure = await result.json(); 199 | 200 | const stylesArtboard = figmaTreeStructure.document.children.filter(item => { 201 | return item.name === "styles"; 202 | })[0].children; 203 | 204 | baseTokeensJSON = { 205 | token: { 206 | grids: {}, 207 | spacers: {}, 208 | colors: {}, 209 | fonts: {} 210 | } 211 | }; 212 | 213 | Object.assign(baseTokeensJSON.token.grids, getGrids(stylesArtboard)); 214 | Object.assign(baseTokeensJSON.token.spacers, getSpacers(stylesArtboard)); 215 | Object.assign(baseTokeensJSON.token.colors, getPalette(stylesArtboard)); 216 | Object.assign(baseTokeensJSON.token.fonts, getFontStyles(stylesArtboard)); 217 | 218 | loaderDiv.classList.add("btn-loading-hide"); 219 | download( 220 | JSON.stringify(baseTokeensJSON, null, 4), 221 | "base.json", 222 | "application/json" 223 | ); 224 | } 225 | 226 | getJSONBtn.onclick = function() { 227 | loaderDiv.classList.remove("btn-loading-hide"); 228 | getStylesArtboard( 229 | "6378-8b5cb2d6-7689-4b50-a0c4-f326bc9fc9af", 230 | "JNIu97dR9CPt6kTg3grNFc7n" 231 | ); 232 | }; 233 | -------------------------------------------------------------------------------- /design-tokens/source/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html.no-js(lang="") 3 | head 4 | meta(charset="utf-8") 5 | meta(http-equiv="x-ua-compatible" content="ie=edge") 6 | title Wûnderzin Design Tokens 7 | meta(name="description" content="Design tokens generator from Figma") 8 | meta(name="viewport" content="width=device-width, initial-scale=1") 9 | 10 | link(rel='apple-touch-icon', sizes='180x180', href='fav-ico/apple-touch-icon.png') 11 | link(rel='icon', type='image/png', sizes='32x32', href='fav-ico/favicon-32x32.png') 12 | link(rel='icon', type='image/png', sizes='16x16', href='fav-ico/favicon-16x16.png') 13 | link(rel='manifest', href='fav-ico/site.webmanifest') 14 | meta(name='msapplication-TileColor', content='#da532c') 15 | meta(name='theme-color', content='#ffffff') 16 | 17 | meta(property='og:image', content='fav-ico/thumb.png') 18 | meta(property='og:image:type', content='image/jpeg') 19 | meta(property='og:image:width', content='800') 20 | meta(property='og:image:height', content='520') 21 | 22 | link(href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|Zilla+Slab:700" rel="stylesheet") 23 | link(rel="stylesheet" href="css/style.css") 24 | link(rel="stylesheet" href="css/tokens-page-style.css") 25 | body 26 | .wrapper 27 | .tp-header 28 | a(href="https://www.figma.com/file/JNIu97dR9CPt6kTg3grNFc7n/W%C3%BBnderzin-UI-Kit?node-id=0%3A1" target="_blank") 29 | .tp-header__wz-logo 30 | .tp-get-tokens-block 31 | h1 Design Tokens 32 | button#get-json-btn.cta-btn.cta-btn_primary-dark 33 | .btn-loading.btn-loading-hide 34 | .btn-loading__loader 35 | span Generate Tokens 36 | .tp-previews-block 37 | //- h3 Figma previews 38 | .tp-previews-block__section 39 | iframe(src='https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJNIu97dR9CPt6kTg3grNFc7n%2FW%25C3%25BBnderzin-UI-Kit%3Fnode-id%3D181%253A0', allowfullscreen='') 40 | span.caption-medium Grids 41 | hr 42 | .tp-previews-block__section 43 | iframe(src='https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJNIu97dR9CPt6kTg3grNFc7n%2FW%25C3%25BBnderzin-UI-Kit%3Fnode-id%3D45%253A117', allowfullscreen='') 44 | span.caption-medium Spacers 45 | hr 46 | .tp-previews-block__section 47 | iframe(src='https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJNIu97dR9CPt6kTg3grNFc7n%2FW%25C3%25BBnderzin-UI-Kit%3Fnode-id%3D1%253A26', allowfullscreen='') 48 | span.caption-medium Colors 49 | hr 50 | .tp-previews-block__section 51 | iframe(src='https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FJNIu97dR9CPt6kTg3grNFc7n%2FW%25C3%25BBnderzin-UI-Kit%3Fnode-id%3D13%253A3', allowfullscreen='') 52 | span.caption-medium Typography 53 | hr 54 | .tp-footer 55 | span ☜   56 | a(href="https://medium.com/@PavelLaptev/design-tokens-with-figma-aef25c42430f") back to the article 57 | a(href="https://github.com/PavelLaptev/wunderzin" target="_blank") Github 58 | 59 | 60 | 61 | script(src="scripts/main.js") -------------------------------------------------------------------------------- /design-tokens/source/scss/base.scss: -------------------------------------------------------------------------------- 1 | // tokens 2 | @import "tokens/_colors"; 3 | @import "tokens/_grids"; 4 | @import "tokens/_typography"; 5 | 6 | body { 7 | background: $token-colors-lemo; 8 | } 9 | 10 | hr { 11 | border: none; 12 | border-top: 2px dashed rgba(0, 0, 0, 0.1); 13 | } 14 | 15 | .wrapper { 16 | max-width: $token-grids-desktop-width; 17 | padding: 0 $token-grids-desktop-offset; 18 | @media screen and (max-width: $token-grids-tablet-width) { 19 | padding: 0 $token-grids-tablet-offset; 20 | } 21 | @media screen and (max-width: $token-grids-mobile-width) { 22 | padding: 0 $token-grids-mobile-offset; 23 | } 24 | } 25 | 26 | .cta-btn { 27 | position: relative; 28 | cursor: pointer; 29 | padding: 0 20px; 30 | min-width: 220px; 31 | font-family: $token-fonts-content-desktop-family, sans-serif; 32 | font-weight: bold; 33 | font-size: 16px; 34 | height: 52px; 35 | border-radius: 4px; 36 | border: none; 37 | transition: all 0.1s; 38 | &_primary-dark { 39 | cursor: s-resize; 40 | padding: 0 20px; 41 | background: $token-colors-supernova; 42 | color: $token-colors-blank; 43 | &:hover { 44 | background: darken($token-colors-supernova, 10); 45 | } 46 | &:focus { 47 | background: darken($token-colors-supernova, 10); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /design-tokens/source/scss/font-styles.scss: -------------------------------------------------------------------------------- 1 | // tokens 2 | @import "tokens/_colors"; 3 | @import "tokens/_typography"; 4 | 5 | h1 { 6 | font-family: $token-fonts-h-1-desktop-family, serif; 7 | font-size: $token-fonts-h-1-desktop-size; 8 | line-height: $token-fonts-h-1-desktop-lineheight; 9 | color: $token-colors-puma; 10 | @media screen and (max-width: $token-grids-tablet-width) { 11 | font-size: $token-fonts-h-1-tablet-size; 12 | line-height: $token-fonts-h-1-tablet-lineheight; 13 | } 14 | @media screen and (max-width: $token-grids-mobile-width) { 15 | font-size: $token-fonts-h-1-mobile-size; 16 | line-height: $token-fonts-h-1-mobile-lineheight; 17 | } 18 | } 19 | 20 | h2 { 21 | font-family: $token-fonts-h-2-desktop-family, serif; 22 | font-size: $token-fonts-h-2-desktop-size; 23 | line-height: $token-fonts-h-2-desktop-lineheight; 24 | color: $token-colors-puma; 25 | } 26 | 27 | h3 { 28 | font-family: $token-fonts-h-3-desktop-family, serif; 29 | font-size: $token-fonts-h-3-desktop-size; 30 | line-height: $token-fonts-h-3-desktop-lineheight; 31 | color: $token-colors-puma; 32 | } 33 | 34 | h4 { 35 | font-family: $token-fonts-h-4-desktop-family, serif; 36 | font-size: $token-fonts-h-4-desktop-size; 37 | line-height: $token-fonts-h-4-desktop-lineheight; 38 | color: $token-colors-puma; 39 | } 40 | 41 | a { 42 | cursor: pointer; 43 | font-family: $token-fonts-link-family, serif; 44 | line-height: $token-fonts-link-lineheight; 45 | color: $token-colors-coral; 46 | transition: all 0.1s; 47 | &:hover { 48 | text-decoration: none; 49 | } 50 | } 51 | 52 | .caption-large { 53 | font-family: $token-fonts-caption-large-family, serif; 54 | font-size: $token-fonts-caption-large-size; 55 | line-height: $token-fonts-caption-large-lineheight; 56 | color: $token-colors-puma; 57 | text-transform: uppercase; 58 | letter-spacing: $token-fonts-caption-large-spacing; 59 | } 60 | 61 | .caption-medium { 62 | font-family: $token-fonts-caption-medium-family, serif; 63 | font-size: $token-fonts-caption-medium-size; 64 | line-height: $token-fonts-caption-medium-lineheight; 65 | color: $token-colors-puma; 66 | text-transform: uppercase; 67 | letter-spacing: $token-fonts-caption-medium-spacing; 68 | } 69 | -------------------------------------------------------------------------------- /design-tokens/source/scss/style.scss: -------------------------------------------------------------------------------- 1 | // base 2 | @import "base"; 3 | @import "font-styles"; 4 | -------------------------------------------------------------------------------- /design-tokens/source/scss/tokens-page-style.scss: -------------------------------------------------------------------------------- 1 | @import "tokens/_colors"; 2 | 3 | .btn-loading-hide { 4 | opacity: 0; 5 | } 6 | 7 | .btn-loading { 8 | display: block; 9 | position: absolute; 10 | width: 100%; 11 | height: 100%; 12 | background: $token-colors-supernova; 13 | border-radius: 4px; 14 | top: 0; 15 | left: 0; 16 | &__loader { 17 | display: block; 18 | position: absolute; 19 | top: calc(50% - 14px); 20 | left: calc(50% - 14px); 21 | width: 28px; 22 | height: 28px; 23 | border-radius: 20px; 24 | background: $token-colors-blank; 25 | animation: ld-flip 2s infinite; 26 | transform: scaleY(1) scaleX(1); 27 | } 28 | } 29 | 30 | @keyframes ld-flip { 31 | 0%, 32 | 25%, 33 | 50%, 34 | 75%, 35 | to { 36 | animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); 37 | } 38 | 39 | 0%, 40 | to { 41 | transform: rotateY(0deg) rotateX(0deg); 42 | } 43 | 44 | 25% { 45 | transform: rotateY(180deg) rotateX(0deg); 46 | } 47 | 48 | 50% { 49 | transform: rotateY(180deg) rotateX(180deg); 50 | } 51 | 52 | 75% { 53 | transform: rotateY(0deg) rotateX(180deg); 54 | } 55 | } 56 | 57 | .tp { 58 | &-header { 59 | margin-top: 40px; 60 | &__wz-logo { 61 | width: 210px; 62 | height: 23px; 63 | background-image: url(../images/wz-logo.svg); 64 | background-size: cover; 65 | background-repeat: no-repeat; 66 | } 67 | } 68 | 69 | &-get-tokens-block { 70 | margin: 40px 0 60px; 71 | } 72 | 73 | &-previews-block { 74 | margin-top: 60px; 75 | &__section { 76 | width: 100%; 77 | margin-bottom: 40px; 78 | span { 79 | opacity: 0.8; 80 | } 81 | iframe { 82 | margin: 20px 0; 83 | width: 100%; 84 | height: 450px; 85 | border: none; 86 | background: rgba(0, 0, 0, 0.05); 87 | } 88 | } 89 | } 90 | 91 | &-footer { 92 | margin: 40px 0 60px; 93 | display: flex; 94 | justify-content: space-between; 95 | span { 96 | font-size: 18px; 97 | } 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /design-tokens/source/scss/tokens/_colors.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-colors-lemo: rgba(252, 255, 234, 1); 7 | $token-colors-blank: rgba(255, 255, 255, 1); 8 | $token-colors-medium-lemo: rgba(237, 239, 222, 1); 9 | $token-colors-dark-lemo: rgba(141, 141, 136, 1); 10 | $token-colors-limo: rgba(238, 255, 137, 1); 11 | $token-colors-coral: rgba(255, 137, 137, 1); 12 | $token-colors-plastic-grass: rgba(74, 222, 168, 1); 13 | $token-colors-supernova: rgba(128, 91, 232, 1); 14 | $token-colors-puma: rgba(49, 49, 49, 1); -------------------------------------------------------------------------------- /design-tokens/source/scss/tokens/_grids.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-grids-desktop-count: 12; 7 | $token-grids-desktop-gutter: 40px; 8 | $token-grids-desktop-offset: 100px; 9 | $token-grids-desktop-width: 1600px; 10 | $token-grids-tablet-count: 12; 11 | $token-grids-tablet-gutter: 40px; 12 | $token-grids-tablet-offset: 60px; 13 | $token-grids-tablet-width: 1024px; 14 | $token-grids-mobile-count: 4; 15 | $token-grids-mobile-gutter: 20px; 16 | $token-grids-mobile-offset: 20px; 17 | $token-grids-mobile-width: 375px; -------------------------------------------------------------------------------- /design-tokens/source/scss/tokens/_spacers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-spacers-m: 8px; 7 | $token-spacers-s: 4px; 8 | $token-spacers-l: 16px; 9 | $token-spacers-xl: 24px; 10 | $token-spacers-xxl: 32px; -------------------------------------------------------------------------------- /design-tokens/source/scss/tokens/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-fonts-link-family: Arimo, Arimo-Regular; 7 | $token-fonts-link-size: 16; 8 | $token-fonts-link-weight: 400; 9 | $token-fonts-link-lineheight: 150%; 10 | $token-fonts-link-spacing: normal; 11 | $token-fonts-caption-large-family: Arimo; 12 | $token-fonts-caption-large-size: 16px; 13 | $token-fonts-caption-large-weight: 400; 14 | $token-fonts-caption-large-lineheight: 140%; 15 | $token-fonts-caption-large-spacing: 3.2px; 16 | $token-fonts-caption-medium-family: Arimo; 17 | $token-fonts-caption-medium-size: 12px; 18 | $token-fonts-caption-medium-weight: 400; 19 | $token-fonts-caption-medium-lineheight: 140%; 20 | $token-fonts-caption-medium-spacing: 2.4000000000000004px; 21 | $token-fonts-caption-small-family: Arimo; 22 | $token-fonts-caption-small-size: 12px; 23 | $token-fonts-caption-small-weight: 400; 24 | $token-fonts-caption-small-lineheight: 120%; 25 | $token-fonts-caption-small-spacing: 2.4000000000000004px; 26 | $token-fonts-h-1-desktop-family: Zilla Slab; 27 | $token-fonts-h-1-desktop-size: 66px; 28 | $token-fonts-h-1-desktop-weight: 700; 29 | $token-fonts-h-1-desktop-lineheight: 90%; 30 | $token-fonts-h-1-desktop-spacing: normal; 31 | $token-fonts-h-1-tablet-family: Zilla Slab; 32 | $token-fonts-h-1-tablet-size: 56px; 33 | $token-fonts-h-1-tablet-weight: 700; 34 | $token-fonts-h-1-tablet-lineheight: 90%; 35 | $token-fonts-h-1-tablet-spacing: normal; 36 | $token-fonts-h-1-mobile-family: Zilla Slab; 37 | $token-fonts-h-1-mobile-size: 40px; 38 | $token-fonts-h-1-mobile-weight: 700; 39 | $token-fonts-h-1-mobile-lineheight: 90%; 40 | $token-fonts-h-1-mobile-spacing: normal; 41 | $token-fonts-h-2-mobile-family: Zilla Slab; 42 | $token-fonts-h-2-mobile-size: 32px; 43 | $token-fonts-h-2-mobile-weight: 700; 44 | $token-fonts-h-2-mobile-lineheight: 90%; 45 | $token-fonts-h-2-mobile-spacing: normal; 46 | $token-fonts-h-2-desktop-family: Zilla Slab; 47 | $token-fonts-h-2-desktop-size: 46px; 48 | $token-fonts-h-2-desktop-weight: 700; 49 | $token-fonts-h-2-desktop-lineheight: 90%; 50 | $token-fonts-h-2-desktop-spacing: normal; 51 | $token-fonts-h-2-tablet-family: Zilla Slab; 52 | $token-fonts-h-2-tablet-size: 40px; 53 | $token-fonts-h-2-tablet-weight: 700; 54 | $token-fonts-h-2-tablet-lineheight: 90%; 55 | $token-fonts-h-2-tablet-spacing: normal; 56 | $token-fonts-h-3-mobile-family: Zilla Slab; 57 | $token-fonts-h-3-mobile-size: 28px; 58 | $token-fonts-h-3-mobile-weight: 700; 59 | $token-fonts-h-3-mobile-lineheight: 90%; 60 | $token-fonts-h-3-mobile-spacing: normal; 61 | $token-fonts-h-3-desktop-family: Zilla Slab; 62 | $token-fonts-h-3-desktop-size: 36px; 63 | $token-fonts-h-3-desktop-weight: 700; 64 | $token-fonts-h-3-desktop-lineheight: 90%; 65 | $token-fonts-h-3-desktop-spacing: normal; 66 | $token-fonts-h-3-tablet-family: Zilla Slab; 67 | $token-fonts-h-3-tablet-size: 32px; 68 | $token-fonts-h-3-tablet-weight: 700; 69 | $token-fonts-h-3-tablet-lineheight: 90%; 70 | $token-fonts-h-3-tablet-spacing: normal; 71 | $token-fonts-h-4-desktop-family: Arimo; 72 | $token-fonts-h-4-desktop-size: 24px; 73 | $token-fonts-h-4-desktop-weight: 700; 74 | $token-fonts-h-4-desktop-lineheight: 120%; 75 | $token-fonts-h-4-desktop-spacing: normal; 76 | $token-fonts-h-4-mobile-family: Arimo; 77 | $token-fonts-h-4-mobile-size: 22px; 78 | $token-fonts-h-4-mobile-weight: 700; 79 | $token-fonts-h-4-mobile-lineheight: 120%; 80 | $token-fonts-h-4-mobile-spacing: normal; 81 | $token-fonts-content-desktop-family: Arimo; 82 | $token-fonts-content-desktop-size: 16px; 83 | $token-fonts-content-desktop-weight: 400; 84 | $token-fonts-content-desktop-lineheight: 150%; 85 | $token-fonts-content-desktop-spacing: normal; 86 | $token-fonts-content-mobile-family: Arimo; 87 | $token-fonts-content-mobile-size: 17px; 88 | $token-fonts-content-mobile-weight: 400; 89 | $token-fonts-content-mobile-lineheight: 150%; 90 | $token-fonts-content-mobile-spacing: normal; -------------------------------------------------------------------------------- /prepros-6.config: -------------------------------------------------------------------------------- 1 | { 2 | "name": "wunderzin", 3 | "firstRun": false, 4 | "exportConfig": true, 5 | "fileConfigs": [ 6 | { 7 | "path": "design-tokens/source/pug/index.pug", 8 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"design-tokens/index.html\",\"autoCompile\":true,\"compiler-pug\":{\"enabled\":true,\"pretty\":true}}" 9 | }, 10 | { 11 | "path": "style-dictionary/build/web/variables.scss", 12 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 13 | }, 14 | { 15 | "path": "style-dictionary/build/web/tokens.scss", 16 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 17 | }, 18 | { 19 | "path": "style-dictionary/build/web/colors.scss", 20 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 21 | }, 22 | { 23 | "path": "style-dictionary/build/web/grids.scss", 24 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 25 | }, 26 | { 27 | "path": "style-dictionary/build/web/typography.scss", 28 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 29 | }, 30 | { 31 | "path": "style-dictionary/build/web/spacers.scss", 32 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 33 | }, 34 | { 35 | "path": "style-dictionary/README.md", 36 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"compiler-markdown\":{\"enabled\":true,\"sanitize\":false,\"githubFlavored\":true,\"wrapWithHtml\":true}}" 37 | }, 38 | { 39 | "path": "design-tokens/source/stylus/style.styl", 40 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"design-tokens/css/style.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-stylus\":{\"enabled\":true},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":true}}" 41 | }, 42 | { 43 | "path": "design-tokens/source/stylus/tokens/typography.scss", 44 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 45 | }, 46 | { 47 | "path": "design-tokens/source/stylus/tokens/spacers.scss", 48 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 49 | }, 50 | { 51 | "path": "design-tokens/source/stylus/tokens/grids.scss", 52 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 53 | }, 54 | { 55 | "path": "design-tokens/source/stylus/tokens/colors.scss", 56 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 57 | }, 58 | { 59 | "path": "design-tokens/source/stylus/tokens/_colors.scss", 60 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 61 | }, 62 | { 63 | "path": "design-tokens/source/stylus/tokens/_grids.scss", 64 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 65 | }, 66 | { 67 | "path": "design-tokens/source/stylus/tokens/_typography.scss", 68 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 69 | }, 70 | { 71 | "path": "design-tokens/source/stylus/tokens/_spacers.scss", 72 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 73 | }, 74 | { 75 | "path": "design-tokens/source/scss/base.scss", 76 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 77 | }, 78 | { 79 | "path": "design-tokens/source/scss/style.scss", 80 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"design-tokens/css/style.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":true}}" 81 | }, 82 | { 83 | "path": "design-tokens/source/scss/tokens-page-style.scss", 84 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"design-tokens/css/tokens-page-style.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 85 | }, 86 | { 87 | "path": "style-dictionary/build/web/_typography.scss", 88 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 89 | }, 90 | { 91 | "path": "style-dictionary/build/web/_grids.scss", 92 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 93 | }, 94 | { 95 | "path": "style-dictionary/build/web/_colors.scss", 96 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 97 | }, 98 | { 99 | "path": "style-dictionary/build/web/_spacers.scss", 100 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 101 | }, 102 | { 103 | "path": "design-tokens/source/scss/tokens/_spacers.scss", 104 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"\",\"autoCompile\":false,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 105 | }, 106 | { 107 | "path": "promo/source/pug/index.pug", 108 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"promo/index.html\",\"autoCompile\":true,\"compiler-pug\":{\"enabled\":true,\"pretty\":true}}" 109 | }, 110 | { 111 | "path": "promo/source/scss/style.scss", 112 | "configJson": "{\"forceCompile\":false,\"customOutput\":\"promo/css/style.css\",\"autoCompile\":true,\"sourceMap\":false,\"compiler-node-sass\":{\"enabled\":true,\"outputStyle\":\"nested\"},\"compiler-autoprefixer\":{\"enabled\":true},\"compiler-minify-css\":{\"enabled\":false}}" 113 | } 114 | ], 115 | "fileTree": { 116 | "expandedDirs": [ 117 | "design-tokens", 118 | "design-tokens/source/pug", 119 | "style-dictionary", 120 | "style-dictionary/build/web", 121 | "design-tokens/source/stylus", 122 | "design-tokens/source/stylus/tokens", 123 | "style-dictionary/src", 124 | "style-dictionary/build", 125 | "design-tokens/source/css", 126 | "design-tokens/scripts", 127 | "promo", 128 | "promo/source", 129 | "promo/source/pug", 130 | "promo/source/scss" 131 | ], 132 | "hideSystemFiles": true, 133 | "systemFiles": [ 134 | ".*", 135 | "desktop.ini", 136 | "prepros.config", 137 | "$RECYCLE.BIN", 138 | "prepros.cfg", 139 | "prepros-6.config", 140 | "Prepros Export" 141 | ], 142 | "hideUnwatchedFiles": false 143 | }, 144 | "imports": [ 145 | { 146 | "path": "design-tokens/source/scss/base.scss", 147 | "imports": [ 148 | "design-tokens/source/scss/tokens/_colors.scss", 149 | "design-tokens/source/scss/tokens/_grids.scss", 150 | "design-tokens/source/scss/tokens/_typography.scss" 151 | ] 152 | }, 153 | { 154 | "path": "design-tokens/source/scss/font-styles.scss", 155 | "imports": [ 156 | "design-tokens/source/scss/tokens/_colors.scss", 157 | "design-tokens/source/scss/tokens/_typography.scss" 158 | ] 159 | }, 160 | { 161 | "path": "design-tokens/source/scss/style.scss", 162 | "imports": [ 163 | "design-tokens/source/scss/base.scss", 164 | "design-tokens/source/scss/font-styles.scss", 165 | "design-tokens/source/scss/tokens/_colors.scss", 166 | "design-tokens/source/scss/tokens/_grids.scss", 167 | "design-tokens/source/scss/tokens/_typography.scss" 168 | ] 169 | }, 170 | { 171 | "path": "design-tokens/source/scss/tokens-page-style.scss", 172 | "imports": [ 173 | "design-tokens/source/scss/tokens/_colors.scss" 174 | ] 175 | }, 176 | { 177 | "path": "promo/source/scss/base.scss", 178 | "imports": [ 179 | "promo/source/scss/tokens/_colors.scss", 180 | "promo/source/scss/tokens/_grids.scss", 181 | "promo/source/scss/tokens/_typography.scss" 182 | ] 183 | }, 184 | { 185 | "path": "promo/source/scss/font-styles.scss", 186 | "imports": [ 187 | "promo/source/scss/tokens/_colors.scss", 188 | "promo/source/scss/tokens/_typography.scss" 189 | ] 190 | }, 191 | { 192 | "path": "promo/source/scss/style.scss", 193 | "imports": [ 194 | "promo/source/scss/base.scss", 195 | "promo/source/scss/font-styles.scss", 196 | "promo/source/scss/tokens/_colors.scss", 197 | "promo/source/scss/tokens/_grids.scss", 198 | "promo/source/scss/tokens/_typography.scss" 199 | ] 200 | }, 201 | { 202 | "path": "promo/source/scss/tokens-page-style.scss", 203 | "imports": [ 204 | "promo/source/scss/tokens/_colors.scss" 205 | ] 206 | } 207 | ], 208 | "projectView": { 209 | "selectedView": "file-tree" 210 | }, 211 | "fileWatcher": { 212 | "enabled": true, 213 | "watchedExtensions": [ 214 | "less", 215 | "sass", 216 | "scss", 217 | "styl", 218 | "md", 219 | "markdown", 220 | "coffee", 221 | "js", 222 | "jade", 223 | "haml", 224 | "slim", 225 | "ls", 226 | "kit", 227 | "png", 228 | "jpg", 229 | "jpeg", 230 | "ts", 231 | "pug", 232 | "css", 233 | "html", 234 | "htm", 235 | "php" 236 | ] 237 | }, 238 | "pathFilters": [ 239 | "node_modules", 240 | ".*", 241 | "bower_components", 242 | "prepros.config", 243 | "Prepros Export", 244 | "prepros-6.config", 245 | "prepros.cfg", 246 | "wp-admin", 247 | "wp-includes" 248 | ], 249 | "server": { 250 | "port": 7884, 251 | "assignNewPortAutomatically": true, 252 | "enable": true, 253 | "proxy": { 254 | "enable": false, 255 | "url": "" 256 | } 257 | }, 258 | "browser-sync": { 259 | "enable": false, 260 | "clicks": true, 261 | "forms": true, 262 | "scroll": true 263 | }, 264 | "live-reload": { 265 | "enable": true, 266 | "animate": true, 267 | "delay": 0 268 | }, 269 | "ftp-deploy": { 270 | "connectionType": "ftp", 271 | "remotePath": "", 272 | "uploadTimeout": 20000, 273 | "uploadOnChange": false, 274 | "ftp": { 275 | "secure": false, 276 | "keepAlive": true, 277 | "host": "", 278 | "port": 21, 279 | "user": "", 280 | "password": "" 281 | }, 282 | "sftp": { 283 | "host": "", 284 | "port": 22, 285 | "usePrivateKey": false, 286 | "username": "", 287 | "password": "", 288 | "privateKey": "", 289 | "passphrase": "" 290 | }, 291 | "pathFilters": [ 292 | "config.rb", 293 | "prepros.config", 294 | "prepros-6.config", 295 | "node_modules", 296 | "Prepros Export", 297 | ".git", 298 | ".idea", 299 | ".sass-cache", 300 | ".hg", 301 | ".svn", 302 | ".cache", 303 | ".DS_Store", 304 | "*.sass", 305 | "*.scss", 306 | "*.less", 307 | "*.pug", 308 | "*.jade", 309 | "*.styl", 310 | "*.haml", 311 | "*.slim", 312 | "*.coffee", 313 | "*.ls", 314 | "*.kit", 315 | "*.ts" 316 | ], 317 | "history": [] 318 | }, 319 | "file-type-sass": "{\"compilers\":[\"node-sass\",\"autoprefixer\",\"minify-css\"]}", 320 | "file-type-less": "{\"compilers\":[\"less\",\"autoprefixer\",\"minify-css\"]}", 321 | "autoprefixer": { 322 | "browsers": "last 5 versions" 323 | }, 324 | "file-type-pug": "{\"compilers\":[\"pug\"]}", 325 | "file-type-css": "{\"compilers\":[\"autoprefixer\",\"cssnext\",\"minify-css\"]}", 326 | "file-type-javascript": "{\"compilers\":[\"concat-js\",\"babel\",\"uglify-js\"]}", 327 | "file-type-stylus": "{\"compilers\":[\"stylus\",\"autoprefixer\",\"minify-css\"]}", 328 | "file-type-markdown": "{\"compilers\":[\"markdown\"]}", 329 | "file-type-haml": "{\"compilers\":[\"haml\"]}", 330 | "file-type-slim": "{\"compilers\":[\"slim\"]}", 331 | "file-type-coffee-script": "{\"compilers\":[\"coffee-script\",\"uglify-js\"]}", 332 | "file-type-livescript": "{\"compilers\":[\"livescript\",\"uglify-js\"]}", 333 | "file-type-kit": "{\"compilers\":[\"kit\"]}", 334 | "uglify-js": { 335 | "ie8": false, 336 | "compress": { 337 | "sequences": true, 338 | "properties": true, 339 | "dead_code": true, 340 | "drop_debugger": true, 341 | "unsafe": false, 342 | "unsafe_comps": false, 343 | "unsafe_math": false, 344 | "unsafe_proto": false, 345 | "unsafe_regexp": false, 346 | "conditionals": true, 347 | "comparisons": true, 348 | "evaluate": true, 349 | "booleans": true, 350 | "loops": true, 351 | "unused": true, 352 | "toplevel": false, 353 | "top_retain": "", 354 | "hoist_funs": true, 355 | "hoist_vars": false, 356 | "if_return": true, 357 | "join_vars": true, 358 | "collapse_vars": true, 359 | "reduce_vars": true, 360 | "warnings": true, 361 | "negate_iife": true, 362 | "pure_getters": false, 363 | "pure_funcs": [], 364 | "drop_console": false, 365 | "expression": false, 366 | "keep_fargs": true, 367 | "keep_fnames": false, 368 | "passes": 1, 369 | "keep_infinity": false, 370 | "side_effects": true, 371 | "global_defs": [] 372 | }, 373 | "output": { 374 | "ascii_only": false, 375 | "beautify": false, 376 | "comments": "", 377 | "indent_level": 4, 378 | "indent_start": 0, 379 | "inline_script": false, 380 | "keep_quoted_props": false, 381 | "max_line_len": false, 382 | "preamble": "", 383 | "preserve_line": false, 384 | "quote_keys": false, 385 | "quote_style": 0, 386 | "semicolons": true, 387 | "shebang": true, 388 | "width": 80 389 | } 390 | }, 391 | "cssnext": { 392 | "customProperties": true, 393 | "applyRule": true, 394 | "calc": false, 395 | "nesting": true, 396 | "customMedia": true, 397 | "mediaQueriesRange": true, 398 | "customSelectors": true, 399 | "attributeCaseInsensitive": true, 400 | "colorRebeccapurple": true, 401 | "colorHwb": true, 402 | "colorGray": true, 403 | "colorHexAlpha": true, 404 | "colorFunction": true, 405 | "fontVariant": true, 406 | "filter": true, 407 | "initial": true, 408 | "rem": true, 409 | "pseudoElements": true, 410 | "pseudoClassMatches": true, 411 | "pseudoClassNot": true, 412 | "pseudoClassAnyLink": true, 413 | "colorRgba": true, 414 | "overflowWrap": true 415 | }, 416 | "file-type-typescript": "{\"compilers\":[\"typescript\",\"uglify-js\"],\"autoCompile\":true,\"sourceMap\":false,\"output\":{\"outputType\":\"REPLACE_SEGMENT\",\"replaceSegments\":[\"typescript\",\"ts\"],\"replaceSegmentsWith\":\"js\",\"relative\":\"\"},\"compiler-uglify-js\":{\"enabled\":true,\"mangle\":true},\"compiler-typescript\":{\"enabled\":true}}", 417 | "babel": { 418 | "useBabelRc": true, 419 | "presets": { 420 | "babel-preset-es2015": true 421 | }, 422 | "plugins": { 423 | "babel-plugin-syntax-jsx": true, 424 | "babel-plugin-transform-react-jsx": true, 425 | "babel-plugin-transform-async-to-generator": true, 426 | "babel-plugin-transform-class-properties": true, 427 | "babel-plugin-transform-object-rest-spread": true 428 | } 429 | }, 430 | "file-type-png": "{\"compilers\":[\"png\"]}", 431 | "file-type-jpg": "{\"compilers\":[\"jpg\"]}" 432 | } -------------------------------------------------------------------------------- /promo/css/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /* Document 4 | ========================================================================== */ 5 | 6 | /** 7 | * 1. Correct the line height in all browsers. 8 | * 2. Prevent adjustments of font size after orientation changes in iOS. 9 | */ 10 | 11 | html { 12 | line-height: 1.15; /* 1 */ 13 | -webkit-text-size-adjust: 100%; /* 2 */ 14 | } 15 | 16 | /* Sections 17 | ========================================================================== */ 18 | 19 | /** 20 | * Remove the margin in all browsers. 21 | */ 22 | 23 | body { 24 | margin: 0; 25 | } 26 | 27 | /** 28 | * Render the `main` element consistently in IE. 29 | */ 30 | 31 | main { 32 | display: block; 33 | } 34 | 35 | /** 36 | * Correct the font size and margin on `h1` elements within `section` and 37 | * `article` contexts in Chrome, Firefox, and Safari. 38 | */ 39 | 40 | h1 { 41 | font-size: 2em; 42 | margin: 0.67em 0; 43 | } 44 | 45 | /* Grouping content 46 | ========================================================================== */ 47 | 48 | /** 49 | * 1. Add the correct box sizing in Firefox. 50 | * 2. Show the overflow in Edge and IE. 51 | */ 52 | 53 | hr { 54 | box-sizing: content-box; /* 1 */ 55 | height: 0; /* 1 */ 56 | overflow: visible; /* 2 */ 57 | } 58 | 59 | /** 60 | * 1. Correct the inheritance and scaling of font size in all browsers. 61 | * 2. Correct the odd `em` font sizing in all browsers. 62 | */ 63 | 64 | pre { 65 | font-family: monospace, monospace; /* 1 */ 66 | font-size: 1em; /* 2 */ 67 | } 68 | 69 | /* Text-level semantics 70 | ========================================================================== */ 71 | 72 | /** 73 | * Remove the gray background on active links in IE 10. 74 | */ 75 | 76 | a { 77 | background-color: transparent; 78 | } 79 | 80 | /** 81 | * 1. Remove the bottom border in Chrome 57- 82 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 83 | */ 84 | 85 | abbr[title] { 86 | border-bottom: none; /* 1 */ 87 | text-decoration: underline; /* 2 */ 88 | text-decoration: underline dotted; /* 2 */ 89 | } 90 | 91 | /** 92 | * Add the correct font weight in Chrome, Edge, and Safari. 93 | */ 94 | 95 | b, 96 | strong { 97 | font-weight: bolder; 98 | } 99 | 100 | /** 101 | * 1. Correct the inheritance and scaling of font size in all browsers. 102 | * 2. Correct the odd `em` font sizing in all browsers. 103 | */ 104 | 105 | code, 106 | kbd, 107 | samp { 108 | font-family: monospace, monospace; /* 1 */ 109 | font-size: 1em; /* 2 */ 110 | } 111 | 112 | /** 113 | * Add the correct font size in all browsers. 114 | */ 115 | 116 | small { 117 | font-size: 80%; 118 | } 119 | 120 | /** 121 | * Prevent `sub` and `sup` elements from affecting the line height in 122 | * all browsers. 123 | */ 124 | 125 | sub, 126 | sup { 127 | font-size: 75%; 128 | line-height: 0; 129 | position: relative; 130 | vertical-align: baseline; 131 | } 132 | 133 | sub { 134 | bottom: -0.25em; 135 | } 136 | 137 | sup { 138 | top: -0.5em; 139 | } 140 | 141 | /* Embedded content 142 | ========================================================================== */ 143 | 144 | /** 145 | * Remove the border on images inside links in IE 10. 146 | */ 147 | 148 | img { 149 | border-style: none; 150 | } 151 | 152 | /* Forms 153 | ========================================================================== */ 154 | 155 | /** 156 | * 1. Change the font styles in all browsers. 157 | * 2. Remove the margin in Firefox and Safari. 158 | */ 159 | 160 | button, 161 | input, 162 | optgroup, 163 | select, 164 | textarea { 165 | font-family: inherit; /* 1 */ 166 | font-size: 100%; /* 1 */ 167 | line-height: 1.15; /* 1 */ 168 | margin: 0; /* 2 */ 169 | } 170 | 171 | /** 172 | * Show the overflow in IE. 173 | * 1. Show the overflow in Edge. 174 | */ 175 | 176 | button, 177 | input { /* 1 */ 178 | overflow: visible; 179 | } 180 | 181 | /** 182 | * Remove the inheritance of text transform in Edge, Firefox, and IE. 183 | * 1. Remove the inheritance of text transform in Firefox. 184 | */ 185 | 186 | button, 187 | select { /* 1 */ 188 | text-transform: none; 189 | } 190 | 191 | /** 192 | * Correct the inability to style clickable types in iOS and Safari. 193 | */ 194 | 195 | button, 196 | [type="button"], 197 | [type="reset"], 198 | [type="submit"] { 199 | -webkit-appearance: button; 200 | } 201 | 202 | /** 203 | * Remove the inner border and padding in Firefox. 204 | */ 205 | 206 | button::-moz-focus-inner, 207 | [type="button"]::-moz-focus-inner, 208 | [type="reset"]::-moz-focus-inner, 209 | [type="submit"]::-moz-focus-inner { 210 | border-style: none; 211 | padding: 0; 212 | } 213 | 214 | /** 215 | * Restore the focus styles unset by the previous rule. 216 | */ 217 | 218 | button:-moz-focusring, 219 | [type="button"]:-moz-focusring, 220 | [type="reset"]:-moz-focusring, 221 | [type="submit"]:-moz-focusring { 222 | outline: 1px dotted ButtonText; 223 | } 224 | 225 | /** 226 | * Correct the padding in Firefox. 227 | */ 228 | 229 | fieldset { 230 | padding: 0.35em 0.75em 0.625em; 231 | } 232 | 233 | /** 234 | * 1. Correct the text wrapping in Edge and IE. 235 | * 2. Correct the color inheritance from `fieldset` elements in IE. 236 | * 3. Remove the padding so developers are not caught out when they zero out 237 | * `fieldset` elements in all browsers. 238 | */ 239 | 240 | legend { 241 | box-sizing: border-box; /* 1 */ 242 | color: inherit; /* 2 */ 243 | display: table; /* 1 */ 244 | max-width: 100%; /* 1 */ 245 | padding: 0; /* 3 */ 246 | white-space: normal; /* 1 */ 247 | } 248 | 249 | /** 250 | * Add the correct vertical alignment in Chrome, Firefox, and Opera. 251 | */ 252 | 253 | progress { 254 | vertical-align: baseline; 255 | } 256 | 257 | /** 258 | * Remove the default vertical scrollbar in IE 10+. 259 | */ 260 | 261 | textarea { 262 | overflow: auto; 263 | } 264 | 265 | /** 266 | * 1. Add the correct box sizing in IE 10. 267 | * 2. Remove the padding in IE 10. 268 | */ 269 | 270 | [type="checkbox"], 271 | [type="radio"] { 272 | box-sizing: border-box; /* 1 */ 273 | padding: 0; /* 2 */ 274 | } 275 | 276 | /** 277 | * Correct the cursor style of increment and decrement buttons in Chrome. 278 | */ 279 | 280 | [type="number"]::-webkit-inner-spin-button, 281 | [type="number"]::-webkit-outer-spin-button { 282 | height: auto; 283 | } 284 | 285 | /** 286 | * 1. Correct the odd appearance in Chrome and Safari. 287 | * 2. Correct the outline style in Safari. 288 | */ 289 | 290 | [type="search"] { 291 | -webkit-appearance: textfield; /* 1 */ 292 | outline-offset: -2px; /* 2 */ 293 | } 294 | 295 | /** 296 | * Remove the inner padding in Chrome and Safari on macOS. 297 | */ 298 | 299 | [type="search"]::-webkit-search-decoration { 300 | -webkit-appearance: none; 301 | } 302 | 303 | /** 304 | * 1. Correct the inability to style clickable types in iOS and Safari. 305 | * 2. Change font properties to `inherit` in Safari. 306 | */ 307 | 308 | ::-webkit-file-upload-button { 309 | -webkit-appearance: button; /* 1 */ 310 | font: inherit; /* 2 */ 311 | } 312 | 313 | /* Interactive 314 | ========================================================================== */ 315 | 316 | /* 317 | * Add the correct display in Edge, IE 10+, and Firefox. 318 | */ 319 | 320 | details { 321 | display: block; 322 | } 323 | 324 | /* 325 | * Add the correct display in all browsers. 326 | */ 327 | 328 | summary { 329 | display: list-item; 330 | } 331 | 332 | /* Misc 333 | ========================================================================== */ 334 | 335 | /** 336 | * Add the correct display in IE 10+. 337 | */ 338 | 339 | template { 340 | display: none; 341 | } 342 | 343 | /** 344 | * Add the correct display in IE 10. 345 | */ 346 | 347 | [hidden] { 348 | display: none; 349 | } 350 | -------------------------------------------------------------------------------- /promo/css/style.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | /** 6 | * Do not edit directly 7 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 8 | */ 9 | /** 10 | * Do not edit directly 11 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 12 | */ 13 | * ::-moz-selection { 14 | background: #ff8989; } 15 | * ::selection { 16 | background: #ff8989; } 17 | 18 | body { 19 | background: #eeff89; } 20 | 21 | hr { 22 | border: none; 23 | border-top: 2px dashed rgba(0, 0, 0, 0.1); } 24 | 25 | .wrapper { 26 | display: -webkit-box; 27 | display: -ms-flexbox; 28 | display: flex; 29 | height: 100vh; 30 | padding-left: 100px; } 31 | @media screen and (max-width: 900px) { 32 | .wrapper { 33 | -webkit-box-orient: vertical; 34 | -webkit-box-direction: normal; 35 | -ms-flex-direction: column; 36 | flex-direction: column; 37 | padding-left: 0; 38 | min-height: 1200px; } } 39 | 40 | .cta-btn { 41 | position: relative; 42 | -webkit-user-select: none; 43 | -moz-user-select: none; 44 | -ms-user-select: none; 45 | user-select: none; 46 | cursor: pointer; 47 | padding: 0 20px; 48 | min-width: 220px; 49 | font-family: Arimo, sans-serif; 50 | font-weight: bold; 51 | font-size: 16px; 52 | height: 52px; 53 | border-radius: 4px; 54 | border: none; 55 | -webkit-transition: all 0.1s; 56 | -o-transition: all 0.1s; 57 | transition: all 0.1s; } 58 | @media screen and (max-width: 600px) { 59 | .cta-btn { 60 | width: 100%; } } 61 | .cta-btn_primary-dark { 62 | padding: 0 20px; 63 | background: #805be8; 64 | color: white; } 65 | .cta-btn_primary-dark:hover { 66 | background: #5d2ee2; } 67 | .cta-btn_primary-dark:focus { 68 | background: #5d2ee2; } 69 | 70 | .content-side { 71 | display: -webkit-box; 72 | display: -ms-flexbox; 73 | display: flex; 74 | -webkit-box-orient: vertical; 75 | -webkit-box-direction: normal; 76 | -ms-flex-direction: column; 77 | flex-direction: column; 78 | -webkit-box-pack: justify; 79 | -ms-flex-pack: justify; 80 | justify-content: space-between; 81 | max-width: 500px; 82 | -webkit-box-flex: 1; 83 | -ms-flex: 1 1 auto; 84 | flex: 1 1 auto; 85 | margin: 80px 0 60px; } 86 | @media screen and (max-width: 900px) { 87 | .content-side { 88 | margin: 60px 80px 20px; 89 | max-width: 800px; } } 90 | @media screen and (max-width: 600px) { 91 | .content-side { 92 | margin: 40px 40px 20px; } } 93 | .content-side__wz-logo { 94 | -webkit-box-flex: 0; 95 | -ms-flex: 0 0 auto; 96 | flex: 0 0 auto; 97 | width: 296px; 98 | height: 32px; 99 | background-image: url(../images/wz-logo.svg); 100 | background-size: contain; 101 | background-repeat: no-repeat; } 102 | @media screen and (max-width: 600px) { 103 | .content-side__wz-logo { 104 | width: 100%; } } 105 | .content-side__main-section { 106 | margin-bottom: 40px; } 107 | @media screen and (max-width: 900px) { 108 | .content-side__main-section { 109 | margin-bottom: 0; } } 110 | .content-side__main-section__header { 111 | white-space: nowrap; } 112 | @media screen and (max-width: 600px) { 113 | .content-side__main-section__header { 114 | white-space: normal; } } 115 | .content-side__main-section__btn-row { 116 | display: -webkit-box; 117 | display: -ms-flexbox; 118 | display: flex; 119 | -webkit-box-align: center; 120 | -ms-flex-align: center; 121 | align-items: center; } 122 | 123 | .figma-logo { 124 | margin-left: 20px; 125 | width: 40px; 126 | height: 40px; 127 | background-image: url(../images/figma-logo.svg); 128 | background-size: cover; 129 | background-repeat: no-repeat; } 130 | @media screen and (max-width: 600px) { 131 | .figma-logo { 132 | display: none; } } 133 | 134 | .preview-side { 135 | display: -webkit-box; 136 | display: -ms-flexbox; 137 | display: flex; 138 | -webkit-box-align: center; 139 | -ms-flex-align: center; 140 | align-items: center; 141 | -webkit-box-pack: center; 142 | -ms-flex-pack: center; 143 | justify-content: center; 144 | -webkit-box-flex: 1; 145 | -ms-flex: 1 2 auto; 146 | flex: 1 2 auto; 147 | overflow: hidden; 148 | position: relative; 149 | margin-left: 40px; } 150 | @media screen and (max-width: 600px) { 151 | .preview-side { 152 | -webkit-box-align: start; 153 | -ms-flex-align: start; 154 | align-items: flex-start; 155 | margin-left: 0; } } 156 | .preview-side__devices { 157 | position: relative; 158 | width: 1100px; 159 | height: 700px; } 160 | @media screen and (max-width: 900px) { 161 | .preview-side__devices { 162 | height: 500px; } } 163 | @media screen and (max-width: 600px) { 164 | .preview-side__devices { 165 | -webkit-transform: scale(0.8); 166 | -ms-transform: scale(0.8); 167 | transform: scale(0.8); } } 168 | .preview-side__iphone { 169 | position: absolute; 170 | top: 280px; 171 | left: 0; 172 | z-index: 3; 173 | width: 230px; 174 | height: 450px; 175 | background-image: url(../images/iphone.png); 176 | background-size: cover; 177 | background-repeat: no-repeat; } 178 | .preview-side__iphone__screen { 179 | position: absolute; 180 | top: 11px; 181 | left: 14px; 182 | width: 207px; 183 | height: 424px; 184 | background-size: 640px; 185 | background-image: url(../images/iphone-sprite.png); 186 | background-position: -5px -1733px; } 187 | .preview-side__ipad { 188 | position: absolute; 189 | top: 340px; 190 | left: calc(60px + 22vw); 191 | z-index: 2; 192 | width: 540px; 193 | height: 750px; 194 | background-image: url(../images/ipad.png); 195 | background-size: cover; 196 | background-repeat: no-repeat; } 197 | .preview-side__ipad__screen { 198 | position: absolute; 199 | top: 18px; 200 | left: 24px; 201 | width: 500px; 202 | height: 710px; 203 | background-size: 1500px; 204 | background-image: url(../images/ipad-sprite.png); 205 | background-position: -3px -2134px; } 206 | .preview-side__macbook { 207 | position: absolute; 208 | top: 0; 209 | left: 40px; 210 | z-index: 1; 211 | width: 1050px; 212 | height: 640px; 213 | background-image: url(../images/macbook.png); 214 | background-size: cover; 215 | background-repeat: no-repeat; } 216 | .preview-side__macbook__screen { 217 | position: absolute; 218 | top: 6px; 219 | left: 76px; 220 | width: 897px; 221 | height: 586px; 222 | background-size: 1824px; 223 | background-image: url(../images/macbook-sprite.png); 224 | background-position: -6px -1781px; } 225 | 226 | /** 227 | * Do not edit directly 228 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 229 | */ 230 | /** 231 | * Do not edit directly 232 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 233 | */ 234 | h1 { 235 | font-family: Zilla Slab, serif; 236 | font-size: 66px; 237 | line-height: 90%; 238 | color: #313131; } 239 | @media screen and (max-width: 1024px) { 240 | h1 { 241 | font-size: 56px; 242 | line-height: 90%; } } 243 | @media screen and (max-width: 375px) { 244 | h1 { 245 | font-size: 40px; 246 | line-height: 90%; } } 247 | 248 | h2 { 249 | font-family: Zilla Slab, serif; 250 | font-size: 46px; 251 | line-height: 90%; 252 | color: #313131; } 253 | 254 | h3 { 255 | font-family: Zilla Slab, serif; 256 | font-size: 36px; 257 | line-height: 90%; 258 | color: #313131; } 259 | 260 | h4 { 261 | font-family: Arimo, serif; 262 | font-size: 24px; 263 | line-height: 120%; 264 | color: #313131; } 265 | 266 | a { 267 | cursor: pointer; 268 | font-family: Arimo, Arimo-Regular, serif; 269 | line-height: 150%; 270 | color: #ff8989; 271 | -webkit-transition: all 0.1s; 272 | -o-transition: all 0.1s; 273 | transition: all 0.1s; } 274 | a:hover { 275 | text-decoration: none; } 276 | 277 | p { 278 | font-family: Arimo, serif; 279 | font-size: 16px; 280 | line-height: 150%; 281 | color: #313131; } 282 | 283 | .caption-large { 284 | font-family: Arimo, serif; 285 | font-size: 16px; 286 | line-height: 140%; 287 | color: #313131; 288 | text-transform: uppercase; 289 | letter-spacing: 3.2px; } 290 | 291 | .caption-medium { 292 | font-family: Arimo, serif; 293 | font-size: 12px; 294 | line-height: 140%; 295 | color: #313131; 296 | text-transform: uppercase; 297 | letter-spacing: 2.4px; } 298 | -------------------------------------------------------------------------------- /promo/fav-ico/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/android-chrome-192x192.png -------------------------------------------------------------------------------- /promo/fav-ico/android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/android-chrome-384x384.png -------------------------------------------------------------------------------- /promo/fav-ico/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/apple-touch-icon.png -------------------------------------------------------------------------------- /promo/fav-ico/browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | #da532c 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /promo/fav-ico/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/favicon-16x16.png -------------------------------------------------------------------------------- /promo/fav-ico/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/favicon-32x32.png -------------------------------------------------------------------------------- /promo/fav-ico/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/favicon.ico -------------------------------------------------------------------------------- /promo/fav-ico/mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/mstile-150x150.png -------------------------------------------------------------------------------- /promo/fav-ico/site.webmanifest: -------------------------------------------------------------------------------- 1 | { 2 | "name": "", 3 | "short_name": "", 4 | "icons": [ 5 | { 6 | "src": "/android-chrome-192x192.png", 7 | "sizes": "192x192", 8 | "type": "image/png" 9 | }, 10 | { 11 | "src": "/android-chrome-384x384.png", 12 | "sizes": "384x384", 13 | "type": "image/png" 14 | } 15 | ], 16 | "theme_color": "#ffffff", 17 | "background_color": "#ffffff", 18 | "display": "standalone" 19 | } 20 | -------------------------------------------------------------------------------- /promo/fav-ico/thumb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/fav-ico/thumb.png -------------------------------------------------------------------------------- /promo/images/figma-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /promo/images/ipad-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/ipad-sprite.png -------------------------------------------------------------------------------- /promo/images/ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/ipad.png -------------------------------------------------------------------------------- /promo/images/iphone-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/iphone-sprite.png -------------------------------------------------------------------------------- /promo/images/iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/iphone.png -------------------------------------------------------------------------------- /promo/images/macbook-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/macbook-sprite.png -------------------------------------------------------------------------------- /promo/images/macbook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PavelLaptev/wunderzin/21aba7ae52ad3604912104823c355478a809216f/promo/images/macbook.png -------------------------------------------------------------------------------- /promo/images/wz-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /promo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Wûnderzin Ui Kit 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |
26 | 27 |
28 |

Online magazine
free UI Kit

29 |
30 | 31 | 32 |
33 |
34 |
35 |

Design tokens with Figma

36 |

by Pavel Laptev

37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 | -------------------------------------------------------------------------------- /promo/scripts/main.js: -------------------------------------------------------------------------------- 1 | const macbook = document.getElementById("macbook-device"); 2 | const iphone = document.getElementById("iphone-device"); 3 | const ipad = document.getElementById("ipad-device"); 4 | 5 | const macbookPos = ["-6px -1781px", "-6px -2373px", "-917px -2372px"]; 6 | const iphonePos = ["-5px -1733px", "207.5px -1733px", "421.5px -1733px"]; 7 | const ipadPos = ["-3px -2134px", "496px -2134px", "997px -2134px"]; 8 | 9 | /////// 10 | macbook.addEventListener("mouseenter", function() { 11 | this.style.backgroundPosition = macbookPos[Math.floor(Math.random() * 3)]; 12 | }); 13 | 14 | /////// 15 | iphone.addEventListener("mouseenter", function() { 16 | this.style.backgroundPosition = iphonePos[Math.floor(Math.random() * 3)]; 17 | }); 18 | 19 | /////// 20 | ipad.addEventListener("mouseenter", function() { 21 | this.style.backgroundPosition = ipadPos[Math.floor(Math.random() * 3)]; 22 | }); 23 | -------------------------------------------------------------------------------- /promo/source/pug/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html.no-js(lang="") 3 | head 4 | meta(charset="utf-8") 5 | meta(http-equiv="x-ua-compatible" content="ie=edge") 6 | title Wûnderzin Ui Kit 7 | meta(name="description" content="Online magazine — free UI Kit") 8 | meta(name="viewport" content="width=device-width, initial-scale=1") 9 | 10 | link(rel='apple-touch-icon', sizes='180x180', href='fav-ico/apple-touch-icon.png') 11 | link(rel='icon', type='image/png', sizes='32x32', href='fav-ico/favicon-32x32.png') 12 | link(rel='icon', type='image/png', sizes='16x16', href='fav-ico/favicon-16x16.png') 13 | link(rel='manifest', href='fav-ico/site.webmanifest') 14 | meta(name='msapplication-TileColor', content='#da532c') 15 | meta(name='theme-color', content='#ffffff') 16 | 17 | meta(property='og:image', content='fav-ico/thumb.png') 18 | meta(property='og:image:type', content='image/jpeg') 19 | meta(property='og:image:width', content='800') 20 | meta(property='og:image:height', content='520') 21 | 22 | link(href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i|Zilla+Slab:700" rel="stylesheet") 23 | link(rel="stylesheet" href="css/normalize.css") 24 | link(rel="stylesheet" href="css/style.css") 25 | body 26 | .wrapper 27 | .content-side 28 | .content-side__wz-logo 29 | .content-side__main-section 30 | h1.content-side__main-section__header Online magazine
free UI Kit 31 | .content-side__main-section__btn-row 32 | button(onclick="window.location.href='https://www.figma.com/file/JNIu97dR9CPt6kTg3grNFc7n/W%C3%BBnderzin-UI-Kit?node-id=0%3A1'").cta-btn.cta-btn_primary-dark Get the Kit 33 | .figma-logo 34 | .content-side__footer 35 | h4(style="margin-bottom: 12px") 36 | a(href="https://medium.com/@PavelLaptev/design-tokens-with-figma-aef25c42430f" target="_blank") Design tokens with Figma 37 | p(style="margin: 0; opacity: 0.7;") by Pavel Laptev 38 | .preview-side 39 | .preview-side__devices 40 | .preview-side__iphone 41 | #iphone-device.preview-side__iphone__screen 42 | .preview-side__ipad 43 | #ipad-device.preview-side__ipad__screen 44 | .preview-side__macbook 45 | #macbook-device.preview-side__macbook__screen 46 | 47 | 48 | 49 | 50 | script(src="scripts/main.js") -------------------------------------------------------------------------------- /promo/source/scss/base.scss: -------------------------------------------------------------------------------- 1 | // tokens 2 | @import "tokens/_colors"; 3 | @import "tokens/_grids"; 4 | @import "tokens/_typography"; 5 | 6 | * ::selection { 7 | background: $token-colors-coral; 8 | } 9 | 10 | body { 11 | background: $token-colors-limo; 12 | } 13 | 14 | hr { 15 | border: none; 16 | border-top: 2px dashed rgba(0, 0, 0, 0.1); 17 | } 18 | 19 | .wrapper { 20 | display: flex; 21 | height: 100vh; 22 | padding-left: 100px; 23 | @media screen and (max-width: 900px) { 24 | flex-direction: column; 25 | padding-left: 0; 26 | min-height: 1200px; 27 | } 28 | } 29 | 30 | .cta-btn { 31 | position: relative; 32 | user-select: none; 33 | cursor: pointer; 34 | padding: 0 20px; 35 | min-width: 220px; 36 | font-family: $token-fonts-content-desktop-family, sans-serif; 37 | font-weight: bold; 38 | font-size: 16px; 39 | height: 52px; 40 | border-radius: 4px; 41 | border: none; 42 | transition: all 0.1s; 43 | @media screen and (max-width: 600px) { 44 | width: 100%; 45 | } 46 | &_primary-dark { 47 | padding: 0 20px; 48 | background: $token-colors-supernova; 49 | color: $token-colors-blank; 50 | &:hover { 51 | background: darken($token-colors-supernova, 10); 52 | } 53 | &:focus { 54 | background: darken($token-colors-supernova, 10); 55 | } 56 | } 57 | } 58 | 59 | .content-side { 60 | display: flex; 61 | flex-direction: column; 62 | justify-content: space-between; 63 | max-width: 500px; 64 | flex: 1 1 auto; 65 | margin: 80px 0 60px; 66 | @media screen and (max-width: 900px) { 67 | margin: 60px 80px 20px; 68 | max-width: 800px; 69 | } 70 | @media screen and (max-width: 600px) { 71 | margin: 40px 40px 20px; 72 | } 73 | &__wz-logo { 74 | flex: 0 0 auto; 75 | width: 296px; 76 | height: 32px; 77 | background-image: url(../images/wz-logo.svg); 78 | background-size: contain; 79 | background-repeat: no-repeat; 80 | @media screen and (max-width: 600px) { 81 | width: 100%; 82 | } 83 | } 84 | &__main-section { 85 | margin-bottom: 40px; 86 | @media screen and (max-width: 900px) { 87 | margin-bottom: 0; 88 | } 89 | &__header { 90 | white-space: nowrap; 91 | @media screen and (max-width: 600px) { 92 | white-space: normal; 93 | } 94 | } 95 | &__btn-row { 96 | display: flex; 97 | align-items: center; 98 | } 99 | } 100 | } 101 | 102 | .figma-logo { 103 | margin-left: 20px; 104 | width: 40px; 105 | height: 40px; 106 | background-image: url(../images/figma-logo.svg); 107 | background-size: cover; 108 | background-repeat: no-repeat; 109 | @media screen and (max-width: 600px) { 110 | display: none; 111 | } 112 | } 113 | 114 | .preview-side { 115 | display: flex; 116 | align-items: center; 117 | justify-content: center; 118 | flex: 1 2 auto; 119 | overflow: hidden; 120 | position: relative; 121 | margin-left: 40px; 122 | @media screen and (max-width: 600px) { 123 | align-items: flex-start; 124 | margin-left: 0; 125 | } 126 | &__devices { 127 | position: relative; 128 | width: 1100px; 129 | height: 700px; 130 | @media screen and (max-width: 900px) { 131 | height: 500px; 132 | } 133 | @media screen and (max-width: 600px) { 134 | transform: scale(0.8); 135 | } 136 | } 137 | &__iphone { 138 | position: absolute; 139 | top: 280px; 140 | left: 0; 141 | z-index: 3; 142 | width: 230px; 143 | height: 450px; 144 | background-image: url(../images/iphone.png); 145 | background-size: cover; 146 | background-repeat: no-repeat; 147 | &__screen { 148 | position: absolute; 149 | top: 11px; 150 | left: 14px; 151 | width: 207px; 152 | height: 424px; 153 | background-size: 640px; 154 | background-image: url(../images/iphone-sprite.png); 155 | background-position: -5px -1733px; 156 | } 157 | } 158 | &__ipad { 159 | position: absolute; 160 | top: 340px; 161 | left: calc(60px + 22vw); 162 | z-index: 2; 163 | width: 540px; 164 | height: 750px; 165 | background-image: url(../images/ipad.png); 166 | background-size: cover; 167 | background-repeat: no-repeat; 168 | &__screen { 169 | position: absolute; 170 | top: 18px; 171 | left: 24px; 172 | width: 500px; 173 | height: 710px; 174 | background-size: 1500px; 175 | background-image: url(../images/ipad-sprite.png); 176 | background-position: -3px -2134px; 177 | } 178 | } 179 | &__macbook { 180 | position: absolute; 181 | top: 0; 182 | left: 40px; 183 | z-index: 1; 184 | width: 1050px; 185 | height: 640px; 186 | background-image: url(../images/macbook.png); 187 | background-size: cover; 188 | background-repeat: no-repeat; 189 | &__screen { 190 | position: absolute; 191 | top: 6px; 192 | left: 76px; 193 | width: 897px; 194 | height: 586px; 195 | background-size: 1824px; 196 | background-image: url(../images/macbook-sprite.png); 197 | background-position: -6px -1781px; 198 | } 199 | } 200 | } 201 | -------------------------------------------------------------------------------- /promo/source/scss/font-styles.scss: -------------------------------------------------------------------------------- 1 | // tokens 2 | @import "tokens/_colors"; 3 | @import "tokens/_typography"; 4 | 5 | h1 { 6 | font-family: $token-fonts-h-1-desktop-family, serif; 7 | font-size: $token-fonts-h-1-desktop-size; 8 | line-height: $token-fonts-h-1-desktop-lineheight; 9 | color: $token-colors-puma; 10 | @media screen and (max-width: $token-grids-tablet-width) { 11 | font-size: $token-fonts-h-1-tablet-size; 12 | line-height: $token-fonts-h-1-tablet-lineheight; 13 | } 14 | @media screen and (max-width: $token-grids-mobile-width) { 15 | font-size: $token-fonts-h-1-mobile-size; 16 | line-height: $token-fonts-h-1-mobile-lineheight; 17 | } 18 | } 19 | 20 | h2 { 21 | font-family: $token-fonts-h-2-desktop-family, serif; 22 | font-size: $token-fonts-h-2-desktop-size; 23 | line-height: $token-fonts-h-2-desktop-lineheight; 24 | color: $token-colors-puma; 25 | } 26 | 27 | h3 { 28 | font-family: $token-fonts-h-3-desktop-family, serif; 29 | font-size: $token-fonts-h-3-desktop-size; 30 | line-height: $token-fonts-h-3-desktop-lineheight; 31 | color: $token-colors-puma; 32 | } 33 | 34 | h4 { 35 | font-family: $token-fonts-h-4-desktop-family, serif; 36 | font-size: $token-fonts-h-4-desktop-size; 37 | line-height: $token-fonts-h-4-desktop-lineheight; 38 | color: $token-colors-puma; 39 | } 40 | 41 | a { 42 | cursor: pointer; 43 | font-family: $token-fonts-link-family, serif; 44 | line-height: $token-fonts-link-lineheight; 45 | color: $token-colors-coral; 46 | transition: all 0.1s; 47 | &:hover { 48 | text-decoration: none; 49 | } 50 | } 51 | 52 | p { 53 | font-family: $token-fonts-content-desktop-family, serif; 54 | font-size: $token-fonts-content-desktop-size; 55 | line-height: $token-fonts-content-desktop-lineheight; 56 | color: $token-colors-puma; 57 | } 58 | 59 | .caption-large { 60 | font-family: $token-fonts-caption-large-family, serif; 61 | font-size: $token-fonts-caption-large-size; 62 | line-height: $token-fonts-caption-large-lineheight; 63 | color: $token-colors-puma; 64 | text-transform: uppercase; 65 | letter-spacing: $token-fonts-caption-large-spacing; 66 | } 67 | 68 | .caption-medium { 69 | font-family: $token-fonts-caption-medium-family, serif; 70 | font-size: $token-fonts-caption-medium-size; 71 | line-height: $token-fonts-caption-medium-lineheight; 72 | color: $token-colors-puma; 73 | text-transform: uppercase; 74 | letter-spacing: $token-fonts-caption-medium-spacing; 75 | } 76 | -------------------------------------------------------------------------------- /promo/source/scss/style.scss: -------------------------------------------------------------------------------- 1 | // base 2 | @import "base"; 3 | @import "font-styles"; 4 | -------------------------------------------------------------------------------- /promo/source/scss/tokens/_colors.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-colors-lemo: rgba(252, 255, 234, 1); 7 | $token-colors-blank: rgba(255, 255, 255, 1); 8 | $token-colors-medium-lemo: rgba(237, 239, 222, 1); 9 | $token-colors-dark-lemo: rgba(141, 141, 136, 1); 10 | $token-colors-limo: rgba(238, 255, 137, 1); 11 | $token-colors-coral: rgba(255, 137, 137, 1); 12 | $token-colors-plastic-grass: rgba(74, 222, 168, 1); 13 | $token-colors-supernova: rgba(128, 91, 232, 1); 14 | $token-colors-puma: rgba(49, 49, 49, 1); -------------------------------------------------------------------------------- /promo/source/scss/tokens/_grids.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-grids-desktop-count: 12; 7 | $token-grids-desktop-gutter: 40px; 8 | $token-grids-desktop-offset: 100px; 9 | $token-grids-desktop-width: 1600px; 10 | $token-grids-tablet-count: 12; 11 | $token-grids-tablet-gutter: 40px; 12 | $token-grids-tablet-offset: 60px; 13 | $token-grids-tablet-width: 1024px; 14 | $token-grids-mobile-count: 4; 15 | $token-grids-mobile-gutter: 20px; 16 | $token-grids-mobile-offset: 20px; 17 | $token-grids-mobile-width: 375px; -------------------------------------------------------------------------------- /promo/source/scss/tokens/_spacers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-spacers-m: 8px; 7 | $token-spacers-s: 4px; 8 | $token-spacers-l: 16px; 9 | $token-spacers-xl: 24px; 10 | $token-spacers-xxl: 32px; -------------------------------------------------------------------------------- /promo/source/scss/tokens/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-fonts-link-family: Arimo, Arimo-Regular; 7 | $token-fonts-link-size: 16; 8 | $token-fonts-link-weight: 400; 9 | $token-fonts-link-lineheight: 150%; 10 | $token-fonts-link-spacing: normal; 11 | $token-fonts-caption-large-family: Arimo; 12 | $token-fonts-caption-large-size: 16px; 13 | $token-fonts-caption-large-weight: 400; 14 | $token-fonts-caption-large-lineheight: 140%; 15 | $token-fonts-caption-large-spacing: 3.2px; 16 | $token-fonts-caption-medium-family: Arimo; 17 | $token-fonts-caption-medium-size: 12px; 18 | $token-fonts-caption-medium-weight: 400; 19 | $token-fonts-caption-medium-lineheight: 140%; 20 | $token-fonts-caption-medium-spacing: 2.4000000000000004px; 21 | $token-fonts-caption-small-family: Arimo; 22 | $token-fonts-caption-small-size: 12px; 23 | $token-fonts-caption-small-weight: 400; 24 | $token-fonts-caption-small-lineheight: 120%; 25 | $token-fonts-caption-small-spacing: 2.4000000000000004px; 26 | $token-fonts-h-1-desktop-family: Zilla Slab; 27 | $token-fonts-h-1-desktop-size: 66px; 28 | $token-fonts-h-1-desktop-weight: 700; 29 | $token-fonts-h-1-desktop-lineheight: 90%; 30 | $token-fonts-h-1-desktop-spacing: normal; 31 | $token-fonts-h-1-tablet-family: Zilla Slab; 32 | $token-fonts-h-1-tablet-size: 56px; 33 | $token-fonts-h-1-tablet-weight: 700; 34 | $token-fonts-h-1-tablet-lineheight: 90%; 35 | $token-fonts-h-1-tablet-spacing: normal; 36 | $token-fonts-h-1-mobile-family: Zilla Slab; 37 | $token-fonts-h-1-mobile-size: 40px; 38 | $token-fonts-h-1-mobile-weight: 700; 39 | $token-fonts-h-1-mobile-lineheight: 90%; 40 | $token-fonts-h-1-mobile-spacing: normal; 41 | $token-fonts-h-2-mobile-family: Zilla Slab; 42 | $token-fonts-h-2-mobile-size: 32px; 43 | $token-fonts-h-2-mobile-weight: 700; 44 | $token-fonts-h-2-mobile-lineheight: 90%; 45 | $token-fonts-h-2-mobile-spacing: normal; 46 | $token-fonts-h-2-desktop-family: Zilla Slab; 47 | $token-fonts-h-2-desktop-size: 46px; 48 | $token-fonts-h-2-desktop-weight: 700; 49 | $token-fonts-h-2-desktop-lineheight: 90%; 50 | $token-fonts-h-2-desktop-spacing: normal; 51 | $token-fonts-h-2-tablet-family: Zilla Slab; 52 | $token-fonts-h-2-tablet-size: 40px; 53 | $token-fonts-h-2-tablet-weight: 700; 54 | $token-fonts-h-2-tablet-lineheight: 90%; 55 | $token-fonts-h-2-tablet-spacing: normal; 56 | $token-fonts-h-3-mobile-family: Zilla Slab; 57 | $token-fonts-h-3-mobile-size: 28px; 58 | $token-fonts-h-3-mobile-weight: 700; 59 | $token-fonts-h-3-mobile-lineheight: 90%; 60 | $token-fonts-h-3-mobile-spacing: normal; 61 | $token-fonts-h-3-desktop-family: Zilla Slab; 62 | $token-fonts-h-3-desktop-size: 36px; 63 | $token-fonts-h-3-desktop-weight: 700; 64 | $token-fonts-h-3-desktop-lineheight: 90%; 65 | $token-fonts-h-3-desktop-spacing: normal; 66 | $token-fonts-h-3-tablet-family: Zilla Slab; 67 | $token-fonts-h-3-tablet-size: 32px; 68 | $token-fonts-h-3-tablet-weight: 700; 69 | $token-fonts-h-3-tablet-lineheight: 90%; 70 | $token-fonts-h-3-tablet-spacing: normal; 71 | $token-fonts-h-4-desktop-family: Arimo; 72 | $token-fonts-h-4-desktop-size: 24px; 73 | $token-fonts-h-4-desktop-weight: 700; 74 | $token-fonts-h-4-desktop-lineheight: 120%; 75 | $token-fonts-h-4-desktop-spacing: normal; 76 | $token-fonts-h-4-mobile-family: Arimo; 77 | $token-fonts-h-4-mobile-size: 22px; 78 | $token-fonts-h-4-mobile-weight: 700; 79 | $token-fonts-h-4-mobile-lineheight: 120%; 80 | $token-fonts-h-4-mobile-spacing: normal; 81 | $token-fonts-content-desktop-family: Arimo; 82 | $token-fonts-content-desktop-size: 16px; 83 | $token-fonts-content-desktop-weight: 400; 84 | $token-fonts-content-desktop-lineheight: 150%; 85 | $token-fonts-content-desktop-spacing: normal; 86 | $token-fonts-content-mobile-family: Arimo; 87 | $token-fonts-content-mobile-size: 17px; 88 | $token-fonts-content-mobile-weight: 400; 89 | $token-fonts-content-mobile-lineheight: 150%; 90 | $token-fonts-content-mobile-spacing: normal; -------------------------------------------------------------------------------- /style-dictionary/README.md: -------------------------------------------------------------------------------- 1 | # Style Dictionary project 2 | 3 | open this folder in the terminal or drag'n'drop this file into the VS code and run the following lines in the VS code terminal. 4 | 5 | ## Install 6 | 7 | ``` 8 | $ npm i 9 | ``` 10 | 11 | ## Run the build script 12 | 13 | ``` 14 | $ npm run build 15 | ``` 16 | -------------------------------------------------------------------------------- /style-dictionary/build.js: -------------------------------------------------------------------------------- 1 | const StyleDictionary = require("style-dictionary").extend({ 2 | source: ["src/**/*.json"], 3 | platforms: { 4 | scss: { 5 | transformGroup: "scss", 6 | buildPath: "build/web/", 7 | files: [ 8 | { 9 | destination: "_colors.scss", 10 | format: "scss/variables", 11 | filter: { 12 | type: "color" 13 | } 14 | }, 15 | { 16 | destination: "_typography.scss", 17 | format: "scss/variables", 18 | filter: { 19 | type: "typography" 20 | } 21 | }, 22 | { 23 | destination: "_grids.scss", 24 | format: "scss/variables", 25 | filter: { 26 | type: "grids" 27 | } 28 | }, 29 | { 30 | destination: "_spacers.scss", 31 | format: "scss/variables", 32 | filter: { 33 | type: "spacers" 34 | } 35 | } 36 | ] 37 | } 38 | } 39 | }); 40 | 41 | StyleDictionary.buildAllPlatforms(); 42 | 43 | console.log("done!"); 44 | -------------------------------------------------------------------------------- /style-dictionary/build/web/_colors.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-colors-lemo: rgba(252, 255, 234, 1); 7 | $token-colors-blank: rgba(255, 255, 255, 1); 8 | $token-colors-medium-lemo: rgba(237, 239, 222, 1); 9 | $token-colors-dark-lemo: rgba(141, 141, 136, 1); 10 | $token-colors-limo: rgba(238, 255, 137, 1); 11 | $token-colors-coral: rgba(255, 137, 137, 1); 12 | $token-colors-plastic-grass: rgba(74, 222, 168, 1); 13 | $token-colors-supernova: rgba(128, 91, 232, 1); 14 | $token-colors-puma: rgba(49, 49, 49, 1); -------------------------------------------------------------------------------- /style-dictionary/build/web/_grids.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-grids-desktop-count: 12; 7 | $token-grids-desktop-gutter: 40px; 8 | $token-grids-desktop-offset: 100px; 9 | $token-grids-desktop-width: 1600px; 10 | $token-grids-tablet-count: 12; 11 | $token-grids-tablet-gutter: 40px; 12 | $token-grids-tablet-offset: 60px; 13 | $token-grids-tablet-width: 1024px; 14 | $token-grids-mobile-count: 4; 15 | $token-grids-mobile-gutter: 20px; 16 | $token-grids-mobile-offset: 20px; 17 | $token-grids-mobile-width: 375px; -------------------------------------------------------------------------------- /style-dictionary/build/web/_spacers.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-spacers-m: 8px; 7 | $token-spacers-s: 4px; 8 | $token-spacers-l: 16px; 9 | $token-spacers-xl: 24px; 10 | $token-spacers-xxl: 32px; -------------------------------------------------------------------------------- /style-dictionary/build/web/_typography.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Do not edit directly 3 | * Generated on Fri, 04 Jan 2019 21:24:14 GMT 4 | */ 5 | 6 | $token-fonts-link-family: Arimo, Arimo-Regular; 7 | $token-fonts-link-size: 16; 8 | $token-fonts-link-weight: 400; 9 | $token-fonts-link-lineheight: 150%; 10 | $token-fonts-link-spacing: normal; 11 | $token-fonts-caption-large-family: Arimo; 12 | $token-fonts-caption-large-size: 16px; 13 | $token-fonts-caption-large-weight: 400; 14 | $token-fonts-caption-large-lineheight: 140%; 15 | $token-fonts-caption-large-spacing: 3.2px; 16 | $token-fonts-caption-medium-family: Arimo; 17 | $token-fonts-caption-medium-size: 12px; 18 | $token-fonts-caption-medium-weight: 400; 19 | $token-fonts-caption-medium-lineheight: 140%; 20 | $token-fonts-caption-medium-spacing: 2.4000000000000004px; 21 | $token-fonts-caption-small-family: Arimo; 22 | $token-fonts-caption-small-size: 12px; 23 | $token-fonts-caption-small-weight: 400; 24 | $token-fonts-caption-small-lineheight: 120%; 25 | $token-fonts-caption-small-spacing: 2.4000000000000004px; 26 | $token-fonts-h-1-desktop-family: Zilla Slab; 27 | $token-fonts-h-1-desktop-size: 66px; 28 | $token-fonts-h-1-desktop-weight: 700; 29 | $token-fonts-h-1-desktop-lineheight: 90%; 30 | $token-fonts-h-1-desktop-spacing: normal; 31 | $token-fonts-h-1-tablet-family: Zilla Slab; 32 | $token-fonts-h-1-tablet-size: 56px; 33 | $token-fonts-h-1-tablet-weight: 700; 34 | $token-fonts-h-1-tablet-lineheight: 90%; 35 | $token-fonts-h-1-tablet-spacing: normal; 36 | $token-fonts-h-1-mobile-family: Zilla Slab; 37 | $token-fonts-h-1-mobile-size: 40px; 38 | $token-fonts-h-1-mobile-weight: 700; 39 | $token-fonts-h-1-mobile-lineheight: 90%; 40 | $token-fonts-h-1-mobile-spacing: normal; 41 | $token-fonts-h-2-mobile-family: Zilla Slab; 42 | $token-fonts-h-2-mobile-size: 32px; 43 | $token-fonts-h-2-mobile-weight: 700; 44 | $token-fonts-h-2-mobile-lineheight: 90%; 45 | $token-fonts-h-2-mobile-spacing: normal; 46 | $token-fonts-h-2-desktop-family: Zilla Slab; 47 | $token-fonts-h-2-desktop-size: 46px; 48 | $token-fonts-h-2-desktop-weight: 700; 49 | $token-fonts-h-2-desktop-lineheight: 90%; 50 | $token-fonts-h-2-desktop-spacing: normal; 51 | $token-fonts-h-2-tablet-family: Zilla Slab; 52 | $token-fonts-h-2-tablet-size: 40px; 53 | $token-fonts-h-2-tablet-weight: 700; 54 | $token-fonts-h-2-tablet-lineheight: 90%; 55 | $token-fonts-h-2-tablet-spacing: normal; 56 | $token-fonts-h-3-mobile-family: Zilla Slab; 57 | $token-fonts-h-3-mobile-size: 28px; 58 | $token-fonts-h-3-mobile-weight: 700; 59 | $token-fonts-h-3-mobile-lineheight: 90%; 60 | $token-fonts-h-3-mobile-spacing: normal; 61 | $token-fonts-h-3-desktop-family: Zilla Slab; 62 | $token-fonts-h-3-desktop-size: 36px; 63 | $token-fonts-h-3-desktop-weight: 700; 64 | $token-fonts-h-3-desktop-lineheight: 90%; 65 | $token-fonts-h-3-desktop-spacing: normal; 66 | $token-fonts-h-3-tablet-family: Zilla Slab; 67 | $token-fonts-h-3-tablet-size: 32px; 68 | $token-fonts-h-3-tablet-weight: 700; 69 | $token-fonts-h-3-tablet-lineheight: 90%; 70 | $token-fonts-h-3-tablet-spacing: normal; 71 | $token-fonts-h-4-desktop-family: Arimo; 72 | $token-fonts-h-4-desktop-size: 24px; 73 | $token-fonts-h-4-desktop-weight: 700; 74 | $token-fonts-h-4-desktop-lineheight: 120%; 75 | $token-fonts-h-4-desktop-spacing: normal; 76 | $token-fonts-h-4-mobile-family: Arimo; 77 | $token-fonts-h-4-mobile-size: 22px; 78 | $token-fonts-h-4-mobile-weight: 700; 79 | $token-fonts-h-4-mobile-lineheight: 120%; 80 | $token-fonts-h-4-mobile-spacing: normal; 81 | $token-fonts-content-desktop-family: Arimo; 82 | $token-fonts-content-desktop-size: 16px; 83 | $token-fonts-content-desktop-weight: 400; 84 | $token-fonts-content-desktop-lineheight: 150%; 85 | $token-fonts-content-desktop-spacing: normal; 86 | $token-fonts-content-mobile-family: Arimo; 87 | $token-fonts-content-mobile-size: 17px; 88 | $token-fonts-content-mobile-weight: 400; 89 | $token-fonts-content-mobile-lineheight: 150%; 90 | $token-fonts-content-mobile-spacing: normal; -------------------------------------------------------------------------------- /style-dictionary/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "style-dictionary", 3 | "version": "1.0.0", 4 | "main": "build.js", 5 | "scripts": { 6 | "test": "echo \"Error: no test specified\" && exit 1", 7 | "build": "node ./build.js" 8 | }, 9 | "author": "Pavel Laptev", 10 | "license": "MIT", 11 | "devDependencies": { 12 | "style-dictionary": "^2.6.2" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /style-dictionary/src/base.json: -------------------------------------------------------------------------------- 1 | { 2 | "token": { 3 | "grids": { 4 | "desktop": { 5 | "count": { 6 | "value": 12, 7 | "type": "grids" 8 | }, 9 | "gutter": { 10 | "value": "40px", 11 | "type": "grids" 12 | }, 13 | "offset": { 14 | "value": "100px", 15 | "type": "grids" 16 | }, 17 | "width": { 18 | "value": "1600px", 19 | "type": "grids" 20 | } 21 | }, 22 | "tablet": { 23 | "count": { 24 | "value": 12, 25 | "type": "grids" 26 | }, 27 | "gutter": { 28 | "value": "40px", 29 | "type": "grids" 30 | }, 31 | "offset": { 32 | "value": "60px", 33 | "type": "grids" 34 | }, 35 | "width": { 36 | "value": "1024px", 37 | "type": "grids" 38 | } 39 | }, 40 | "mobile": { 41 | "count": { 42 | "value": 4, 43 | "type": "grids" 44 | }, 45 | "gutter": { 46 | "value": "20px", 47 | "type": "grids" 48 | }, 49 | "offset": { 50 | "value": "20px", 51 | "type": "grids" 52 | }, 53 | "width": { 54 | "value": "375px", 55 | "type": "grids" 56 | } 57 | } 58 | }, 59 | "spacers": { 60 | "M": { 61 | "value": "8px", 62 | "type": "spacers" 63 | }, 64 | "S": { 65 | "value": "4px", 66 | "type": "spacers" 67 | }, 68 | "L": { 69 | "value": "16px", 70 | "type": "spacers" 71 | }, 72 | "XL": { 73 | "value": "24px", 74 | "type": "spacers" 75 | }, 76 | "XXL": { 77 | "value": "32px", 78 | "type": "spacers" 79 | } 80 | }, 81 | "colors": { 82 | "lemo": { 83 | "value": "rgba(252, 255, 234, 1)", 84 | "type": "color" 85 | }, 86 | "blank": { 87 | "value": "rgba(255, 255, 255, 1)", 88 | "type": "color" 89 | }, 90 | "medium-lemo": { 91 | "value": "rgba(237, 239, 222, 1)", 92 | "type": "color" 93 | }, 94 | "dark-lemo": { 95 | "value": "rgba(141, 141, 136, 1)", 96 | "type": "color" 97 | }, 98 | "limo": { 99 | "value": "rgba(238, 255, 137, 1)", 100 | "type": "color" 101 | }, 102 | "coral": { 103 | "value": "rgba(255, 137, 137, 1)", 104 | "type": "color" 105 | }, 106 | "plastic-grass": { 107 | "value": "rgba(74, 222, 168, 1)", 108 | "type": "color" 109 | }, 110 | "supernova": { 111 | "value": "rgba(128, 91, 232, 1)", 112 | "type": "color" 113 | }, 114 | "puma": { 115 | "value": "rgba(49, 49, 49, 1)", 116 | "type": "color" 117 | } 118 | }, 119 | "fonts": { 120 | "link": { 121 | "family": { 122 | "value": "Arimo, Arimo-Regular", 123 | "type": "typography" 124 | }, 125 | "size": { 126 | "value": 16, 127 | "type": "typography" 128 | }, 129 | "weight": { 130 | "value": 400, 131 | "type": "typography" 132 | }, 133 | "lineheight": { 134 | "value": "150%", 135 | "type": "typography" 136 | }, 137 | "spacing": { 138 | "value": "normal", 139 | "type": "typography" 140 | } 141 | }, 142 | "caption": { 143 | "large": { 144 | "family": { 145 | "value": "Arimo", 146 | "type": "typography" 147 | }, 148 | "size": { 149 | "value": "16px", 150 | "type": "typography" 151 | }, 152 | "weight": { 153 | "value": 400, 154 | "type": "typography" 155 | }, 156 | "lineheight": { 157 | "value": "140%", 158 | "type": "typography" 159 | }, 160 | "spacing": { 161 | "value": "3.2px", 162 | "type": "typography" 163 | } 164 | }, 165 | "medium": { 166 | "family": { 167 | "value": "Arimo", 168 | "type": "typography" 169 | }, 170 | "size": { 171 | "value": "12px", 172 | "type": "typography" 173 | }, 174 | "weight": { 175 | "value": 400, 176 | "type": "typography" 177 | }, 178 | "lineheight": { 179 | "value": "140%", 180 | "type": "typography" 181 | }, 182 | "spacing": { 183 | "value": "2.4000000000000004px", 184 | "type": "typography" 185 | } 186 | }, 187 | "small": { 188 | "family": { 189 | "value": "Arimo", 190 | "type": "typography" 191 | }, 192 | "size": { 193 | "value": "12px", 194 | "type": "typography" 195 | }, 196 | "weight": { 197 | "value": 400, 198 | "type": "typography" 199 | }, 200 | "lineheight": { 201 | "value": "120%", 202 | "type": "typography" 203 | }, 204 | "spacing": { 205 | "value": "2.4000000000000004px", 206 | "type": "typography" 207 | } 208 | } 209 | }, 210 | "h1": { 211 | "desktop": { 212 | "family": { 213 | "value": "Zilla Slab", 214 | "type": "typography" 215 | }, 216 | "size": { 217 | "value": "66px", 218 | "type": "typography" 219 | }, 220 | "weight": { 221 | "value": 700, 222 | "type": "typography" 223 | }, 224 | "lineheight": { 225 | "value": "90%", 226 | "type": "typography" 227 | }, 228 | "spacing": { 229 | "value": "normal", 230 | "type": "typography" 231 | } 232 | }, 233 | "tablet": { 234 | "family": { 235 | "value": "Zilla Slab", 236 | "type": "typography" 237 | }, 238 | "size": { 239 | "value": "56px", 240 | "type": "typography" 241 | }, 242 | "weight": { 243 | "value": 700, 244 | "type": "typography" 245 | }, 246 | "lineheight": { 247 | "value": "90%", 248 | "type": "typography" 249 | }, 250 | "spacing": { 251 | "value": "normal", 252 | "type": "typography" 253 | } 254 | }, 255 | "mobile": { 256 | "family": { 257 | "value": "Zilla Slab", 258 | "type": "typography" 259 | }, 260 | "size": { 261 | "value": "40px", 262 | "type": "typography" 263 | }, 264 | "weight": { 265 | "value": 700, 266 | "type": "typography" 267 | }, 268 | "lineheight": { 269 | "value": "90%", 270 | "type": "typography" 271 | }, 272 | "spacing": { 273 | "value": "normal", 274 | "type": "typography" 275 | } 276 | } 277 | }, 278 | "h2": { 279 | "mobile": { 280 | "family": { 281 | "value": "Zilla Slab", 282 | "type": "typography" 283 | }, 284 | "size": { 285 | "value": "32px", 286 | "type": "typography" 287 | }, 288 | "weight": { 289 | "value": 700, 290 | "type": "typography" 291 | }, 292 | "lineheight": { 293 | "value": "90%", 294 | "type": "typography" 295 | }, 296 | "spacing": { 297 | "value": "normal", 298 | "type": "typography" 299 | } 300 | }, 301 | "desktop": { 302 | "family": { 303 | "value": "Zilla Slab", 304 | "type": "typography" 305 | }, 306 | "size": { 307 | "value": "46px", 308 | "type": "typography" 309 | }, 310 | "weight": { 311 | "value": 700, 312 | "type": "typography" 313 | }, 314 | "lineheight": { 315 | "value": "90%", 316 | "type": "typography" 317 | }, 318 | "spacing": { 319 | "value": "normal", 320 | "type": "typography" 321 | } 322 | }, 323 | "tablet": { 324 | "family": { 325 | "value": "Zilla Slab", 326 | "type": "typography" 327 | }, 328 | "size": { 329 | "value": "40px", 330 | "type": "typography" 331 | }, 332 | "weight": { 333 | "value": 700, 334 | "type": "typography" 335 | }, 336 | "lineheight": { 337 | "value": "90%", 338 | "type": "typography" 339 | }, 340 | "spacing": { 341 | "value": "normal", 342 | "type": "typography" 343 | } 344 | } 345 | }, 346 | "h3": { 347 | "mobile": { 348 | "family": { 349 | "value": "Zilla Slab", 350 | "type": "typography" 351 | }, 352 | "size": { 353 | "value": "28px", 354 | "type": "typography" 355 | }, 356 | "weight": { 357 | "value": 700, 358 | "type": "typography" 359 | }, 360 | "lineheight": { 361 | "value": "90%", 362 | "type": "typography" 363 | }, 364 | "spacing": { 365 | "value": "normal", 366 | "type": "typography" 367 | } 368 | }, 369 | "desktop": { 370 | "family": { 371 | "value": "Zilla Slab", 372 | "type": "typography" 373 | }, 374 | "size": { 375 | "value": "36px", 376 | "type": "typography" 377 | }, 378 | "weight": { 379 | "value": 700, 380 | "type": "typography" 381 | }, 382 | "lineheight": { 383 | "value": "90%", 384 | "type": "typography" 385 | }, 386 | "spacing": { 387 | "value": "normal", 388 | "type": "typography" 389 | } 390 | }, 391 | "tablet": { 392 | "family": { 393 | "value": "Zilla Slab", 394 | "type": "typography" 395 | }, 396 | "size": { 397 | "value": "32px", 398 | "type": "typography" 399 | }, 400 | "weight": { 401 | "value": 700, 402 | "type": "typography" 403 | }, 404 | "lineheight": { 405 | "value": "90%", 406 | "type": "typography" 407 | }, 408 | "spacing": { 409 | "value": "normal", 410 | "type": "typography" 411 | } 412 | } 413 | }, 414 | "h4": { 415 | "desktop": { 416 | "family": { 417 | "value": "Arimo", 418 | "type": "typography" 419 | }, 420 | "size": { 421 | "value": "24px", 422 | "type": "typography" 423 | }, 424 | "weight": { 425 | "value": 700, 426 | "type": "typography" 427 | }, 428 | "lineheight": { 429 | "value": "120%", 430 | "type": "typography" 431 | }, 432 | "spacing": { 433 | "value": "normal", 434 | "type": "typography" 435 | } 436 | }, 437 | "mobile": { 438 | "family": { 439 | "value": "Arimo", 440 | "type": "typography" 441 | }, 442 | "size": { 443 | "value": "22px", 444 | "type": "typography" 445 | }, 446 | "weight": { 447 | "value": 700, 448 | "type": "typography" 449 | }, 450 | "lineheight": { 451 | "value": "120%", 452 | "type": "typography" 453 | }, 454 | "spacing": { 455 | "value": "normal", 456 | "type": "typography" 457 | } 458 | } 459 | }, 460 | "content": { 461 | "desktop": { 462 | "family": { 463 | "value": "Arimo", 464 | "type": "typography" 465 | }, 466 | "size": { 467 | "value": "16px", 468 | "type": "typography" 469 | }, 470 | "weight": { 471 | "value": 400, 472 | "type": "typography" 473 | }, 474 | "lineheight": { 475 | "value": "150%", 476 | "type": "typography" 477 | }, 478 | "spacing": { 479 | "value": "normal", 480 | "type": "typography" 481 | } 482 | }, 483 | "mobile": { 484 | "family": { 485 | "value": "Arimo", 486 | "type": "typography" 487 | }, 488 | "size": { 489 | "value": "17px", 490 | "type": "typography" 491 | }, 492 | "weight": { 493 | "value": 400, 494 | "type": "typography" 495 | }, 496 | "lineheight": { 497 | "value": "150%", 498 | "type": "typography" 499 | }, 500 | "spacing": { 501 | "value": "normal", 502 | "type": "typography" 503 | } 504 | } 505 | } 506 | } 507 | } 508 | } -------------------------------------------------------------------------------- /style-dictionary/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | ansi-styles@^3.2.1: 6 | version "3.2.1" 7 | resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-3.2.1.tgz#41fbb20243e50b12be0f04b8dedbf07520ce841d" 8 | dependencies: 9 | color-convert "^1.9.0" 10 | 11 | balanced-match@^1.0.0: 12 | version "1.0.0" 13 | resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767" 14 | 15 | brace-expansion@^1.1.7: 16 | version "1.1.11" 17 | resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" 18 | dependencies: 19 | balanced-match "^1.0.0" 20 | concat-map "0.0.1" 21 | 22 | chalk@^2.4.1: 23 | version "2.4.1" 24 | resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e" 25 | dependencies: 26 | ansi-styles "^3.2.1" 27 | escape-string-regexp "^1.0.5" 28 | supports-color "^5.3.0" 29 | 30 | color-convert@^1.9.0: 31 | version "1.9.3" 32 | resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" 33 | dependencies: 34 | color-name "1.1.3" 35 | 36 | color-name@1.1.3: 37 | version "1.1.3" 38 | resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" 39 | 40 | commander@^2.9.0: 41 | version "2.19.0" 42 | resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a" 43 | 44 | concat-map@0.0.1: 45 | version "0.0.1" 46 | resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b" 47 | 48 | escape-string-regexp@^1.0.5: 49 | version "1.0.5" 50 | resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4" 51 | 52 | fs-extra@^6.0.1: 53 | version "6.0.1" 54 | resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-6.0.1.tgz#8abc128f7946e310135ddc93b98bddb410e7a34b" 55 | dependencies: 56 | graceful-fs "^4.1.2" 57 | jsonfile "^4.0.0" 58 | universalify "^0.1.0" 59 | 60 | fs.realpath@^1.0.0: 61 | version "1.0.0" 62 | resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" 63 | 64 | glob@^7.1.1: 65 | version "7.1.3" 66 | resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1" 67 | dependencies: 68 | fs.realpath "^1.0.0" 69 | inflight "^1.0.4" 70 | inherits "2" 71 | minimatch "^3.0.4" 72 | once "^1.3.0" 73 | path-is-absolute "^1.0.0" 74 | 75 | graceful-fs@^4.1.2, graceful-fs@^4.1.6: 76 | version "4.1.15" 77 | resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00" 78 | 79 | has-flag@^3.0.0: 80 | version "3.0.0" 81 | resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" 82 | 83 | inflight@^1.0.4: 84 | version "1.0.6" 85 | resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9" 86 | dependencies: 87 | once "^1.3.0" 88 | wrappy "1" 89 | 90 | inherits@2: 91 | version "2.0.3" 92 | resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de" 93 | 94 | json5@^2.1.0: 95 | version "2.1.0" 96 | resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.0.tgz#e7a0c62c48285c628d20a10b85c89bb807c32850" 97 | dependencies: 98 | minimist "^1.2.0" 99 | 100 | jsonfile@^4.0.0: 101 | version "4.0.0" 102 | resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb" 103 | optionalDependencies: 104 | graceful-fs "^4.1.6" 105 | 106 | lodash@^4.16.4: 107 | version "4.17.11" 108 | resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d" 109 | 110 | minimatch@^3.0.4: 111 | version "3.0.4" 112 | resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083" 113 | dependencies: 114 | brace-expansion "^1.1.7" 115 | 116 | minimist@^1.2.0: 117 | version "1.2.0" 118 | resolved "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" 119 | 120 | once@^1.3.0: 121 | version "1.4.0" 122 | resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1" 123 | dependencies: 124 | wrappy "1" 125 | 126 | path-is-absolute@^1.0.0: 127 | version "1.0.1" 128 | resolved "http://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" 129 | 130 | resolve-cwd@^2.0.0: 131 | version "2.0.0" 132 | resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a" 133 | dependencies: 134 | resolve-from "^3.0.0" 135 | 136 | resolve-from@^3.0.0: 137 | version "3.0.0" 138 | resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" 139 | 140 | style-dictionary@^2.6.2: 141 | version "2.6.2" 142 | resolved "https://registry.yarnpkg.com/style-dictionary/-/style-dictionary-2.6.2.tgz#7a550869f8f0e59cb559bdaff87f63e7d80b4689" 143 | dependencies: 144 | chalk "^2.4.1" 145 | commander "^2.9.0" 146 | fs-extra "^6.0.1" 147 | glob "^7.1.1" 148 | json5 "^2.1.0" 149 | lodash "^4.16.4" 150 | resolve-cwd "^2.0.0" 151 | tinycolor2 "^1.4.1" 152 | 153 | supports-color@^5.3.0: 154 | version "5.5.0" 155 | resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" 156 | dependencies: 157 | has-flag "^3.0.0" 158 | 159 | tinycolor2@^1.4.1: 160 | version "1.4.1" 161 | resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" 162 | 163 | universalify@^0.1.0: 164 | version "0.1.2" 165 | resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66" 166 | 167 | wrappy@1: 168 | version "1.0.2" 169 | resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" 170 | -------------------------------------------------------------------------------- /yarn-error.log: -------------------------------------------------------------------------------- 1 | Arguments: 2 | /usr/local/bin/node /usr/local/Cellar/yarn/1.7.0/libexec/bin/yarn.js init 3 | 4 | PATH: 5 | /usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin 6 | 7 | Yarn version: 8 | 1.7.0 9 | 10 | Node version: 11 | 10.5.0 12 | 13 | Platform: 14 | darwin x64 15 | 16 | Trace: 17 | Error: canceled 18 | at Interface. (/usr/local/Cellar/yarn/1.7.0/libexec/lib/cli.js:131036:13) 19 | at Interface.emit (events.js:182:13) 20 | at Interface._ttyWrite (readline.js:783:16) 21 | at ReadStream.onkeypress (readline.js:168:10) 22 | at ReadStream.emit (events.js:182:13) 23 | at emitKeys (internal/readline.js:422:14) 24 | at emitKeys.next () 25 | at ReadStream.onData (readline.js:1022:36) 26 | at ReadStream.emit (events.js:182:13) 27 | at addChunk (_stream_readable.js:283:12) 28 | 29 | npm manifest: 30 | No manifest 31 | 32 | yarn manifest: 33 | No manifest 34 | 35 | Lockfile: 36 | No lockfile 37 | --------------------------------------------------------------------------------