├── .babelrc ├── .browserslistrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .npmignore ├── .prettierrc ├── .stylintrc ├── LICENSE ├── README.md ├── dev └── index.html ├── gulpfile.js ├── jest.config.js ├── package-lock.json ├── package.json ├── rollup.config.js ├── scripts └── watcher.js ├── src ├── design-token.ts ├── index.ts ├── interfaces │ ├── index.ts │ └── tokens.ts ├── lib │ ├── attributes.ts │ ├── cardinal.ts │ ├── classnames.ts │ ├── color.ts │ ├── debounce.ts │ ├── helpers.ts │ ├── node.ts │ ├── styles.ts │ └── throttle.ts ├── line.ts ├── style │ └── styles.styl ├── tokens.json └── types │ ├── index.ts │ └── tokens.ts ├── test.setup.js ├── tsconfig.json └── tslint.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "browsers": ["> 5%", "last 2 firefox versions", "last 2 edge versions"] 8 | }, 9 | "modules": false, 10 | "useBuiltIns": "usage", 11 | "corejs": "3.9.0" 12 | } 13 | ] 14 | ], 15 | "plugins": [ 16 | "@babel/plugin-proposal-export-default-from", 17 | "@babel/transform-regenerator", 18 | "@babel/transform-async-to-generator" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | # Browsers that we support 2 | 3 | > 5% 4 | last 2 firefox versions 5 | last 2 edge versions 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | indent_size = 2 14 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "parserOptions": { 4 | "ecmaVersion": 6, 5 | "sourceType": "module", 6 | "ecmaFeatures": { 7 | "classes": true 8 | } 9 | }, 10 | "env": { 11 | "browser": true, 12 | "amd": true, 13 | "es6": true, 14 | "node": true, 15 | "jest/globals": true 16 | }, 17 | "plugins": ["jest"], 18 | "rules": { 19 | "comma-dangle": 1, 20 | "quotes": [1, "single"], 21 | "no-undef": 2, 22 | "global-strict": 0, 23 | "indent": [1, 2, { "SwitchCase": 1 }], 24 | "no-extra-semi": 1, 25 | "no-underscore-dangle": 0, 26 | "no-console": 1, 27 | "no-unused-vars": 1, 28 | "no-trailing-spaces": [1, { "skipBlankLines": true }], 29 | "no-unreachable": 1, 30 | "no-alert": 0, 31 | "semi": 1 32 | }, 33 | "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"] 34 | } 35 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | *.tgz 40 | 41 | 42 | .npmrc 43 | .yarnrc 44 | bin 45 | v8-compile-cache-0 46 | .changelog 47 | /public 48 | .vs 49 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "semi": true, 4 | "singleQuote": true, 5 | "jsxBracketSameLine": true, 6 | "tabWidth": 2, 7 | "printWidth": 120 8 | } 9 | -------------------------------------------------------------------------------- /.stylintrc: -------------------------------------------------------------------------------- 1 | { 2 | "blocks": false, 3 | "brackets": "never", 4 | "colons": "never", 5 | "colors": "always", 6 | "commaSpace": false, 7 | "commentSpace": false, 8 | "cssLiteral": "never", 9 | "depthLimit": false, 10 | "duplicates": false, 11 | "efficient": "always", 12 | "extendPref": false, 13 | "globalDupe": false, 14 | "indentPref": 2, 15 | "leadingZero": false, 16 | "maxErrors": false, 17 | "maxWarnings": false, 18 | "mixed": false, 19 | "namingConvention": false, 20 | "namingConventionStrict": false, 21 | "noImportant": false, 22 | "parenSpace": false, 23 | "placeholders": false, 24 | "prefixVarsWithDollar": "always", 25 | "quotePref": false, 26 | "reporter": "stylint-stylish", 27 | "semicolons": "never", 28 | "stackedProperties": "never", 29 | "trailingWhitespace": "never", 30 | "universal": false, 31 | "valid": true, 32 | "zeroUnits": "never", 33 | "zIndexNormalize": false 34 | } 35 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Alexander Vassbotn Røyne-Helgesen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # @phun-ky/design-token-flow 2 | 3 | $ npm i @phun-ky/design-token-flow 4 | 5 | **NOTE** 6 | 7 | This is alpha, at best, for now 8 | 9 | ## Contributors 10 | 11 | [Stefano Tirloni](http://www.stedesign.com/) 12 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | @phun-ky/design-token-flow 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 233 | 234 | 235 | 236 | 237 | 238 | 239 |
240 |
241 | 242 | 100% 243 | 244 | 245 |
246 | 247 | 248 | 249 | 250 | 251 | 252 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | const gulp = require('gulp'); 2 | const cssnano = require('cssnano'); 3 | const stylus = require('gulp-stylus'); 4 | const rename = require('gulp-rename'); 5 | const sourcemaps = require('gulp-sourcemaps'); 6 | const postcss = require('gulp-postcss'); 7 | const banner = require('gulp-banner'); 8 | const pkg = require('./package.json'); 9 | 10 | const bannerTemplate = 11 | '/**!\n' + 12 | ' * <%= pkg.name %> <%= pkg.version %>\n' + 13 | ' * <%= pkg.description %>\n' + 14 | ' * <%= pkg.homepage %>\n' + 15 | ' *\n' + 16 | ' * Copyright © 2021-' + 17 | new Date().getFullYear() + 18 | ' <%= pkg.author.name %>\n' + 19 | '*/\n\n'; 20 | 21 | const plugins = [ 22 | { 23 | reduceIdents: false, 24 | discardDuplicates: true, 25 | discardComments: { 26 | removeAll: true 27 | }, 28 | autoprefixer: { 29 | add: true, 30 | cascade: false 31 | }, 32 | zindex: false 33 | } 34 | ]; 35 | 36 | const build = () => 37 | gulp 38 | .src('./src/style/styles.styl') 39 | .pipe(stylus({ 'include css': true, 'disable cache': true })) 40 | .pipe(rename('styles.css')) 41 | .pipe(sourcemaps.init()) 42 | .pipe(postcss([cssnano(plugins)])) 43 | .pipe( 44 | banner(bannerTemplate, { 45 | pkg: pkg 46 | }) 47 | ) 48 | .pipe(sourcemaps.write('.')) 49 | .pipe(gulp.dest('./dist/')); 50 | 51 | gulp.task('default', build); 52 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | setupFilesAfterEnv: ['./test.setup.js'], 3 | verbose: true, 4 | testMatch: ['**/test/*.js?(x)'] 5 | }; 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@phun-ky/design-token-flow", 3 | "version": "0.1.0", 4 | "publishConfig": { 5 | "access": "public" 6 | }, 7 | "description": "Design token relations", 8 | "main": "./dist/dtf.cjs.js", 9 | "module": "./dist/dtf.esm.js", 10 | "browser": "./dist/dtf.umd.js", 11 | "scripts": { 12 | "version": "npm run build", 13 | "build": "rm -rf dist/ && rollup -c && gulp", 14 | "dev": "rollup -c -w", 15 | "test": "echo \"Error: no test specified\" && exit 1", 16 | "stylus": "rm -rf ./dist/*.css ./dist/*.css.map && stylus ./src/style/styles.styl -o ./dist/styles.css", 17 | "postcss": "rm -rf ./dist/styles.min.css && postcss ./dist/styles.css.css -o styles.min.css", 18 | "commit": "npx git-cz", 19 | "release": "npx standard-version" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "git+https://github.com/phun-ky/design-token-flow.git" 24 | }, 25 | "author": "Alexander Vassbotn Røyne-Helgesen ", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/phun-ky/design-token-flow/issues" 29 | }, 30 | "standard-version": { 31 | "scripts": { 32 | "prerelease": "npm run build && git add .", 33 | "posttag": "git push --follow-tags origin master && npm publish" 34 | }, 35 | "types": [ 36 | { 37 | "type": "chore", 38 | "section": "Tasks", 39 | "hidden": true 40 | }, 41 | { 42 | "type": "docs", 43 | "section": "Documentation" 44 | }, 45 | { 46 | "type": "feat", 47 | "section": "Feature" 48 | }, 49 | { 50 | "type": "fix", 51 | "section": "Bug" 52 | }, 53 | { 54 | "type": "perf", 55 | "section": "Performance change" 56 | }, 57 | { 58 | "type": "refactor", 59 | "section": "Refactoring" 60 | }, 61 | { 62 | "type": "release", 63 | "section": "Create a release commit", 64 | "hidden": true 65 | }, 66 | { 67 | "type": "style", 68 | "section": "Markup, white-space, formatting, missing semi-colons...", 69 | "hidden": true 70 | }, 71 | { 72 | "type": "test", 73 | "section": "Adding missing tests", 74 | "hidden": true 75 | } 76 | ] 77 | }, 78 | "homepage": "https://github.com/phun-ky/design-token-flow#readme", 79 | "devDependencies": { 80 | "@rollup/plugin-commonjs": "^17.1.0", 81 | "@rollup/plugin-json": "^4.1.0", 82 | "@rollup/plugin-node-resolve": "^11.2.0", 83 | "eslint": "^7.32.0", 84 | "eslint-config-airbnb": "^18.2.1", 85 | "eslint-config-prettier": "^8.3.0", 86 | "eslint-plugin-compat": "^3.13.0", 87 | "eslint-plugin-import": "^2.24.2", 88 | "eslint-plugin-jest": "^24.4.2", 89 | "eslint-plugin-prettier": "^4.0.0", 90 | "eslint-plugin-react": "^7.23.2", 91 | "eslint-plugin-react-hooks": "^4.2.0", 92 | "prettier": "^2.4.1", 93 | "prettier-eslint": "^13.0.0", 94 | "rollup-plugin-dts": "^4.0.1", 95 | "rollup-plugin-terser": "^7.0.2", 96 | "rollup-plugin-typescript2": "^0.31.1", 97 | "tslib": "^2.3.1", 98 | "typescript": "^4.5.4" 99 | }, 100 | "dependencies": { 101 | "network-information-types": "^0.1.1", 102 | "panzoom": "^9.4.1" 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 2 | import pkg from './package.json'; 3 | import json from '@rollup/plugin-json'; 4 | import ts from 'rollup-plugin-typescript2'; 5 | import dts from 'rollup-plugin-dts'; 6 | import typescript from 'typescript'; 7 | import { terser } from 'rollup-plugin-terser'; 8 | 9 | export default [ 10 | { 11 | input: 'src/index.ts', 12 | output: { 13 | name: 'dtf', 14 | file: pkg.browser, 15 | format: 'umd', 16 | sourcemap: true, 17 | exports: 'named', 18 | assetFileNames: '[name][extname]' 19 | }, 20 | plugins: [ 21 | json(), 22 | nodeResolve(), 23 | ts({ 24 | useTsconfigDeclarationDir: true, 25 | sourceMap: false, 26 | typescript 27 | }), 28 | terser() 29 | ] 30 | }, 31 | { 32 | input: './dist/dts/index.d.ts', 33 | output: [{ file: './dist/dts/index.d.ts', format: 'es' }], 34 | plugins: [dts()] 35 | } 36 | ]; 37 | -------------------------------------------------------------------------------- /scripts/watcher.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | /* eslint no-console: 0 */ 3 | 4 | var path = require('path'); 5 | var express = require('express'); 6 | var bodyParser = require('body-parser'); 7 | var http = require('http'); 8 | var net = require('net'); 9 | var reload = require('reload'); 10 | var open = require('open'); 11 | 12 | const async = require('async'); 13 | const { spawn } = require('child_process'); 14 | 15 | var app = express(); 16 | 17 | const __www = path.join(__dirname, '../dev'); 18 | const __www_assets = path.join(__dirname, '../dist'); 19 | const src = path.join(__dirname, '../src'); 20 | 21 | app.use( 22 | bodyParser.json({ 23 | type: ['application/manifest+json', 'application/json'] 24 | }) 25 | ); 26 | app.use(express.static(__www)); 27 | app.use('/assets', express.static(__www_assets)); 28 | const server = http.createServer(app); 29 | 30 | var watcher = require('node-watch')( 31 | [src, __www], 32 | { filter: f => !/node_modules/.test(f), recursive: true }, 33 | function () {} 34 | ); 35 | 36 | watcher.on('ready', function () { 37 | console.log('Ready to listen for changes'); 38 | }); 39 | 40 | var portrange = process.env.port || 45032; 41 | 42 | function getPort(cb) { 43 | var port = portrange; 44 | portrange += 1; 45 | 46 | var server = net.createServer(); 47 | server.listen(port, function () { 48 | server.once('close', function () { 49 | cb(port); 50 | }); 51 | server.close(); 52 | }); 53 | server.on('error', function () { 54 | getPort(cb); 55 | }); 56 | } 57 | 58 | // Reload code here 59 | 60 | const reloadDev = port => { 61 | reload(app, { port }) 62 | .then(function (reloadReturned) { 63 | // reloadReturned is documented in the returns API in the README 64 | 65 | getPort(startServer); 66 | 67 | watcher.on('change', function (evt, name) { 68 | console.log('Changed: ' + name); 69 | 70 | async.series( 71 | [ 72 | function (callback) { 73 | spawn('npm', ['run', 'build'], { stdio: 'inherit' }).on('exit', function (error) { 74 | if (error) { 75 | console.error(error); 76 | } 77 | callback(null, 'one'); 78 | }); 79 | } 80 | ], 81 | function (err) { 82 | if (err) { 83 | console.log(err); 84 | } 85 | reloadReturned.reload(); 86 | } 87 | ); 88 | }); 89 | }) 90 | .catch(function (err) { 91 | console.error('Reload could not start, could not start server/sample app', err); 92 | }); 93 | }; 94 | 95 | getPort(reloadDev); 96 | 97 | const startServer = function (port) { 98 | port = process.env.port || port; 99 | server 100 | .listen(port, err => { 101 | if (err) { 102 | console.error(`Error: ${JSON.stringify(err)}`); 103 | } 104 | console.log(`🌎 Open http://localhost:${port} in a browser to view the app.`); 105 | open(`http://localhost:${port}`); 106 | }) 107 | .on('error', err => { 108 | if (err.errno === 'EADDRINUSE') { 109 | console.error(`Port already in use! Please use another port. Error: ${JSON.stringify(err)}`); 110 | } else { 111 | console.error(`Error: ${JSON.stringify(err)}`); 112 | } 113 | 114 | process.exit(0); 115 | }); 116 | }; 117 | 118 | process.on('SIGINT', function () { 119 | watcher.close(); 120 | process.exit(1); 121 | }); 122 | process.on('exit', function () { 123 | watcher.close(); 124 | process.exit(1); 125 | }); 126 | -------------------------------------------------------------------------------- /src/design-token.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | import * as color from './lib/color'; 5 | import * as node from './lib/node'; 6 | import * as styles from './lib/styles'; 7 | import * as classnames from './lib/classnames'; 8 | 9 | const DesignToken = function (this:typeof DesignToken, token) { 10 | this._init(token); 11 | }; 12 | // 13 | // DesignToken.prototype.update = function () { 14 | // this.id = this.el.getAttribute('id'); 15 | // this['data-value'] = this.el.getAttribute('data-value'); 16 | // this['data-rgb'] = this.el.getAttribute('data-rgb'); 17 | // this['data-hex'] = this.el.getAttribute('data-hex'); 18 | // this['data-color'] = this.el.getAttribute('data-color'); 19 | // this['data-descendants'] = this.el.getAttribute('data-descendants'); 20 | // this['data-ancestors'] = this.el.getAttribute('data-ancestors'); 21 | // }; 22 | DesignToken.prototype._create_el = function () { 23 | const classNames = classnames.cx('design-token', { 24 | color: this.category === 'color' && this.type !== 'text', 25 | large: this.type === 'base' || this.category === 'font-family', 26 | font: this.category === 'font-family', 27 | size: this.category === 'size', 28 | 'font-weight': this.category === 'font' && this.type === 'weight', 29 | 'text-color': this.category === 'color' && this.type === 'text' 30 | }); 31 | /* 32 | 33 | $color-blackSlug331e11 42 | 43 | */ 44 | const _el = node.create({ 45 | type: 'span', 46 | classNames, 47 | attrs: { 48 | id: this.id, 49 | 'data-category': this.category, 50 | 'data-type': this.type, 51 | 'data-item': this.item, 52 | 'data-subItem': this.subItem, 53 | 'data-state': this.state, 54 | 'data-hex': this.hex, 55 | 'data-color': this.color, 56 | 'data-value': this.value, 57 | 'data-size': this.size, 58 | 'data-px': this.px, 59 | 'data-rem': this.rem, 60 | 'data-ancestors': this.ancestors, 61 | 'data-descendants': this.descendants 62 | } 63 | }); 64 | 65 | const _id = document.createTextNode(`$${this.id}`); 66 | 67 | node.prepend(_el, _id); 68 | 69 | if (this.category === 'color') { 70 | const _drop_el = node.create({ type: 'span', classNames: 'drop' }); 71 | node.prepend(_el, _drop_el); 72 | styles.add(_drop_el, { 'background-color': this.color }); 73 | if (this.type === 'base') { 74 | const _code_el = node.create({ type: 'code', textContent: this.hex || this.color }); 75 | _el.appendChild(_code_el); 76 | } 77 | } 78 | 79 | if (this.category === 'font-family') { 80 | const _code_el = node.create({ type: 'code', textContent: this.value }); 81 | _el.appendChild(_code_el); 82 | } 83 | 84 | if (this.category === 'font' && this.type === 'weight') { 85 | let _styles = {}; 86 | 87 | if (this['font-family']) { 88 | _styles['font-family'] = this['font-family']; 89 | } 90 | 91 | if (this.variable) { 92 | _styles['font-weight'] = 'normal'; 93 | _styles['font-variation-settings'] = `"wght" ${this.value}`; 94 | } else { 95 | _styles['font-weight'] = this.value; 96 | } 97 | const _weight_el = node.create({ type: 'span', textContent: 'Rr', classNames: 'text' }); 98 | styles.add(_weight_el, _styles); 99 | node.prepend(_el, _weight_el); 100 | } 101 | 102 | if (this.category === 'color' && this.type === 'text') { 103 | if (this.color) { 104 | const _text_el = node.create({ type: 'span', textContent: 'Aa', classNames: 'text' }); 105 | const _color_lightness = color.light_or_dark(this.color); 106 | const _is_light_color = _color_lightness === 'light'; 107 | 108 | classnames.set(_el, _color_lightness); 109 | styles.add(_text_el, { color: this.color }); 110 | 111 | if (_is_light_color) { 112 | styles.add(_el, { color: this.color }); 113 | } 114 | node.prepend(_el, _text_el); 115 | } 116 | } 117 | 118 | return _el; 119 | }; 120 | 121 | DesignToken.prototype._init = function (token) { 122 | let { category, type, item, subItem, state, em, value, id, ancestorId, color, rgb, hex, px, rem } = token; 123 | const __formatRgb = color => { 124 | if (color.indexOf('rgb') === 0) { 125 | return color.replace(/,\s/g, ','); 126 | } 127 | return color; 128 | }; 129 | Object.keys(token).forEach(key => { 130 | if (key === 'ancestorId') return; 131 | this[key] = token[key]; 132 | }); 133 | if (category && category === 'color') { 134 | this.color = __formatRgb(color || value || rgb || hex); 135 | if (rgb) { 136 | this.rgb = __formatRgb(rgb); 137 | } 138 | if (hex) { 139 | this.hex = hex; 140 | } 141 | } 142 | if (category && category === 'size') { 143 | this.size = value || px || rem; 144 | if (px) { 145 | this.px = px; 146 | } 147 | if (rem) { 148 | this.rem = rem; 149 | } 150 | if (em) { 151 | this.em = em; 152 | } 153 | } 154 | if (ancestorId && ancestorId !== '') { 155 | this.ancestors = ancestorId; 156 | } 157 | 158 | this.el = this._create_el(); 159 | }; 160 | 161 | DesignToken.prototype._set = function (key, value) { 162 | this[key] = value; 163 | if (this.el) { 164 | this.el.setAttribute(`data-${key}`, value); 165 | } 166 | }; 167 | 168 | DesignToken.prototype._get = function (key) { 169 | return this[key]; 170 | }; 171 | 172 | DesignToken.prototype.process = function () { 173 | // if (this.el.classList.contains('color')) { 174 | // const color = this._get('color'); 175 | // if (color) { 176 | // const drop = this.el.querySelector('.drop'); 177 | // if (drop) { 178 | // drop.style.backgroundColor = color; 179 | // this._set('color', color); 180 | // } 181 | // } 182 | // } 183 | // if (this.el.classList.contains('is-connected')) { 184 | // this._find_connections(); 185 | // } 186 | }; 187 | 188 | export default DesignToken; 189 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | import panzoom from 'panzoom'; 5 | import { uniqueID } from './lib/helpers'; 6 | import * as cardinal from './lib/cardinal'; 7 | import * as node from './lib/node'; 8 | import { RawDesignTokenType} from './types'; 9 | import {RawTokensInterface} from './interfaces'; 10 | 11 | import DesignToken from './design-token'; 12 | 13 | import tokens from './tokens.json'; 14 | 15 | // console.log(tokens); 16 | 17 | const DTF = function (this:typeof DTF, raw_tokens:RawTokensInterface) { 18 | this._raw_tokens = raw_tokens; 19 | this._tokens = []; 20 | this._init(); 21 | }; 22 | 23 | DTF.prototype._process_tokens = function (this:typeof DTF, ) { 24 | this._tokens.forEach(token => { 25 | // console.log(token); 26 | token.process(); 27 | }); 28 | }; 29 | 30 | DTF.prototype._clear_lines = function () { 31 | document.querySelectorAll('path:not(.original)').forEach(el => el.remove()); 32 | }; 33 | 34 | DTF.prototype._setup_tokens = function (this:typeof DTF, ) { 35 | if (this._raw_tokens) { 36 | const _tokens_array = []; 37 | const _grouped_tokens = {}; 38 | Object.keys(this._raw_tokens).forEach((token:string) => { 39 | _tokens_array.push(this._raw_tokens[token]); 40 | 41 | // const _design_token = new DesignToken(this._raw_tokens[token]); 42 | // document.querySelector('.container .base').appendChild(_design_token.el); 43 | // this._tokens.push(_design_token); 44 | }); 45 | 46 | _tokens_array.forEach(token => { 47 | const { category, type, item } = token; 48 | const _group_name = item == 'button' ? `${category}-${type}-${item}` : `${category}-${type}`; 49 | if (!_grouped_tokens[_group_name]) { 50 | _grouped_tokens[_group_name] = []; 51 | } 52 | _grouped_tokens[_group_name].push(token); 53 | }); 54 | 55 | console.log(_grouped_tokens); 56 | 57 | let _custom_grouping_ordering = [ 58 | ['color-base'], 59 | ['color-accent', 'color-background', 'color-text', 'color-infographic', 'color-interaction', 'color-status'], 60 | ['color-cta'], 61 | ['color-background-button'], 62 | ['size-font', 'size-line-height', 'font-weight'], 63 | ['font-family', 'size-spacing'] 64 | ]; 65 | 66 | const _customized_grouping = []; 67 | 68 | _custom_grouping_ordering.forEach((custom_group, i) => { 69 | custom_group.forEach(group => { 70 | if (!_customized_grouping[i]) { 71 | _customized_grouping[i] = []; 72 | } 73 | // console.log(group); 74 | _grouped_tokens[group].forEach(token => _customized_grouping[i].push(token)); 75 | }); 76 | }); 77 | 78 | _customized_grouping.forEach((group:[]) => { 79 | const _base = node.create({ type: 'div', classNames: `base ${group}` }); 80 | group.forEach((token) => { 81 | const _design_token = new DesignToken(token); 82 | _base.appendChild(_design_token.el); 83 | this._tokens.push(_design_token); 84 | }); 85 | this._container_el.appendChild(_base); 86 | }); 87 | } 88 | }; 89 | 90 | DTF.prototype._init = function () { 91 | this._container_el = document.querySelector('.container'); 92 | // this._container_rect = document.querySelector('.container').getBoundingClientRect(); 93 | this._setup_tokens(); 94 | this._connect_tokens(); 95 | this._process_tokens(); 96 | //give resizing time to happen 97 | var raf; 98 | window.addEventListener( 99 | 'resize', 100 | function (this:typeof DTF) { 101 | // If there's a timer, cancel it 102 | if (raf) { 103 | window.cancelAnimationFrame(raf); 104 | } 105 | raf = window.requestAnimationFrame( 106 | function (this:typeof DTF) { 107 | this._clear_lines(); 108 | this._connect_tokens(); 109 | }.bind(this) 110 | ); 111 | }.bind(this) 112 | ); 113 | }; 114 | 115 | DTF.prototype._connect_tokens = function () { 116 | const _original_path_el = document.getElementById('path'); 117 | 118 | this._tokens.forEach(token => { 119 | if (token.ancestors && token.ancestors.length !== 0) { 120 | token.ancestors.split(',').forEach(ancestor => { 121 | const _start_token = this._tokens.find(token => token.id === ancestor); 122 | const _stop_token = token; 123 | this._line(_original_path_el, _start_token, _stop_token); 124 | this._check_relation(_start_token, _stop_token); 125 | }); 126 | } 127 | }); 128 | }; 129 | 130 | DTF.prototype._get_positions_for_path = function (direction) { 131 | let _pos1; 132 | let _pos2; 133 | switch (direction) { 134 | case 'north': { 135 | _pos1 = 'bottom'; 136 | _pos2 = 'top'; 137 | break; 138 | } 139 | case 'north-east': { 140 | _pos1 = 'left'; 141 | _pos2 = 'right'; 142 | break; 143 | } 144 | case 'east': { 145 | _pos1 = 'left'; 146 | _pos2 = 'right'; 147 | break; 148 | } 149 | case 'south-east': { 150 | _pos1 = 'left'; 151 | _pos2 = 'right'; 152 | break; 153 | } 154 | case 'south': { 155 | _pos1 = 'top'; 156 | _pos2 = 'bottom'; 157 | break; 158 | } 159 | case 'south-west': 160 | case 'west': 161 | case 'north-west': 162 | default: { 163 | _pos1 = 'right'; 164 | _pos2 = 'left'; 165 | break; 166 | } 167 | } 168 | 169 | return { 170 | pos1: _pos1, 171 | pos2: _pos2 172 | }; 173 | }; 174 | 175 | DTF.prototype._get_path = function (start_el, stop_el) { 176 | const _direction = cardinal.direction_of_element({ stop: stop_el, start: start_el }); 177 | 178 | const { pos1, pos2 } = this._get_positions_for_path(_direction); 179 | 180 | const { x1, y1, x2, y2 } = cardinal.get_coords_pair_from_objects(start_el, stop_el, pos1, pos2); 181 | 182 | const _p0 = { x: x1, y: y1 }; // The first point of line 183 | const _c0 = { x: x1 + (x2 - x1) / 2, y: y1 }; // Controller for p0 184 | const _c1 = { x: x1 + (x2 - x1) / 2, y: y2 }; // Controller for p1 185 | const _p1 = { x: x2, y: y2 }; // The last point of line 186 | 187 | return ( 188 | 'M ' + _p0.x + ' ' + _p0.y + 'C ' + _c0.x + ' ' + _c0.y + ', ' + _c1.x + ' ' + _c1.y + ', ' + _p1.x + ' ' + _p1.y 189 | ); 190 | }; 191 | 192 | DTF.prototype._line = function (path, start_token, stop_token) { 193 | if (!start_token || !stop_token) return; 194 | 195 | const _start_el = start_token.el; 196 | const _stop_el = stop_token.el; 197 | const _id = uniqueID(); 198 | const _path_el_id = `ph_draw_path-path-${_id}`; 199 | const _new_path = path.cloneNode(false); 200 | _new_path.setAttribute('id', _path_el_id); 201 | 202 | _new_path.setAttribute('data-start-el', _start_el.id); 203 | _new_path.setAttribute('data-stop-el', _stop_el.id); 204 | _new_path.classList.remove('original'); 205 | _start_el.classList.add('is-connected'); 206 | _stop_el.classList.add('is-connected'); 207 | path.parentNode.insertBefore(_new_path, path.nextSibling); 208 | 209 | const _d = this._get_path(_start_el, _stop_el); 210 | 211 | _new_path.setAttribute('d', _d); //svg attributes 212 | 213 | // const _new_control_1 = _control_el.cloneNode(false); 214 | // const _control_el = document.getElementById('control'); 215 | // const _new_control_2 = _control_el.cloneNode(false); 216 | // _new_control_1.setAttribute('data-for', _path_el_id); 217 | // _new_control_2.setAttribute('data-for', _path_el_id); 218 | // _new_control_1.classList.remove('original'); 219 | // _new_control_2.classList.remove('original'); 220 | // _control_el.parentNode.insertBefore(_new_control_1, _control_el.nextSibling); 221 | // _control_el.parentNode.insertBefore(_new_control_2, _control_el.nextSibling); 222 | 223 | //_new_control_1.setAttribute('d','M'+_p0.x+','+(_p0.y)+'L'+_c0.x+','+(_c0.y)); 224 | //_new_control_2.setAttribute('d','M'+_p1.x+','+(_p1.y)+'L'+_c1.x+','+(_c1.y)); 225 | }; 226 | 227 | DTF.prototype._check_relation = function (start_token, stop_token) { 228 | if (!start_token || !stop_token) return; 229 | let _start_descendants = start_token._get('descendants'); 230 | let _stop_ancestors = stop_token._get('ancestors'); 231 | 232 | if ( 233 | !_start_descendants || 234 | (_start_descendants && _start_descendants.length === 0) || 235 | (_start_descendants && _start_descendants === '') 236 | ) { 237 | start_token._set('descendants', stop_token.id); 238 | } else { 239 | const _to_array = _start_descendants.split(','); 240 | if (!_to_array.includes(stop_token.id)) { 241 | const _new_descendants = [..._start_descendants.split(','), ...[stop_token.id]].join(','); 242 | start_token._set('descendants', _new_descendants); 243 | } 244 | } 245 | 246 | if ( 247 | !_stop_ancestors || 248 | (_stop_ancestors && _stop_ancestors.length === 0) || 249 | (_stop_ancestors && _stop_ancestors === '') 250 | ) { 251 | stop_token._set('ancestors', start_token.id); 252 | } else { 253 | const _to_array = _stop_ancestors.split(','); 254 | if (!_to_array.includes(start_token.id)) { 255 | const _new_ancestors = [..._stop_ancestors.split(','), ...[start_token.id]].join(','); 256 | stop_token._set('ancestors', _new_ancestors); 257 | } 258 | } 259 | }; 260 | 261 | const draw = new DTF(tokens); 262 | 263 | requestAnimationFrame(function () { 264 | draw._clear_lines(); 265 | draw._connect_tokens(); 266 | }); 267 | -------------------------------------------------------------------------------- /src/interfaces/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tokens' 2 | -------------------------------------------------------------------------------- /src/interfaces/tokens.ts: -------------------------------------------------------------------------------- 1 | import {RawDesignTokenType} from './types' 2 | 3 | export interface RawTokensInterface { 4 | [key: string]: RawDesignTokenType 5 | } 6 | -------------------------------------------------------------------------------- /src/lib/attributes.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | export const set = (el, attrs) => { 5 | if (!el) return; 6 | if (!attrs || (attrs && attrs.length === 0)) return; 7 | Object.keys(attrs).forEach(key => el.setAttribute(key, attrs[key])); 8 | }; 9 | export const remove = (el, attrs) => { 10 | if (!el) return; 11 | if (!attrs || (attrs && attrs.length === 0)) return; 12 | Object.keys(attrs).forEach(key => el.removeAttribute(key)); 13 | }; 14 | export const toggle = (el, attrs) => { 15 | if (!el) return; 16 | if (!attrs || (attrs && attrs.length === 0)) return; 17 | Object.keys(attrs).forEach(key => { 18 | if (el.getAttribute(key) === attrs[key]) { 19 | el.removeAttribute(key); 20 | } else { 21 | el.setAttribute(key, attrs[key]); 22 | } 23 | }); 24 | }; 25 | -------------------------------------------------------------------------------- /src/lib/cardinal.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | // https://stackoverflow.com/a/9614122/460422 5 | export const angle = (cx, cy, ex, ey) => { 6 | var dy = ey - cy; 7 | var dx = ex - cx; 8 | var theta = Math.atan2(dy, dx); // range (-PI, PI] 9 | theta *= 180 / Math.PI; // rads to degs, range (-180, 180] 10 | //if (theta < 0) theta = 360 + theta; // range [0, 360) 11 | return theta; 12 | }; 13 | 14 | export const coords = { 15 | top: rect => rect.top, 16 | right: rect => rect.left + rect.width, 17 | bottom: rect => rect.top + rect.height, 18 | left: rect => rect.left, 19 | center_x: rect => rect.left + rect.width / 2, 20 | center_y: rect => rect.top + rect.height / 2 21 | }; 22 | 23 | export const xy = { 24 | center: rect => ({ x: coords.center_x(rect), y: coords.center_y(rect) }), 25 | top: rect => ({ x: coords.center_x(rect), y: coords.top(rect) }), 26 | right: rect => ({ x: coords.right(rect), y: coords.center_y(rect) }), 27 | bottom: rect => ({ x: coords.center_x(rect), y: coords.bottom(rect) }), 28 | left: rect => ({ x: coords.left(rect), y: coords.center_y(rect) }) 29 | }; 30 | 31 | export const get_coords_pair_from_objects = (el1, el2, pos1 = 'center', pos2 = 'center') => { 32 | if (!el1 || !el2) { 33 | throw 'No element given'; 34 | } 35 | 36 | const { x: x1, y: y1 } = initrinsic_coords(el1, pos1); 37 | const { x: x2, y: y2 } = initrinsic_coords(el2, pos2); 38 | 39 | return { 40 | x1, 41 | y1, 42 | x2, 43 | y2 44 | }; 45 | }; 46 | 47 | export const initrinsic_coords = (el, pos = 'center') => { 48 | if (!pos) { 49 | throw 'No position given'; 50 | } 51 | if (typeof pos !== 'string') { 52 | throw `The position given is not the required type: pos: ${typeof pos}`; 53 | } 54 | const _allowed_positions = ['center', 'left', 'right', 'top', 'bottom']; 55 | if (!_allowed_positions.includes(pos)) { 56 | throw 'The position given does not match allowed positions to use! Valid positions are: center, left, right, top or bottom'; 57 | } 58 | const _el1_rect = el.getBoundingClientRect(); 59 | return xy[pos](_el1_rect); 60 | }; 61 | 62 | export const direction_of_element = ({ start, stop }) => { 63 | const { x1, y1, x2, y2 } = get_coords_pair_from_objects(start, stop); 64 | const _angle = angle(x1, y1, x2, y2); 65 | const _direction = cardinal_direction(_angle); 66 | // console.log(`\`${start.id}\` is ${_direction} of \`${stop.id}\` with angle: \`${_angle}\``); 67 | return _direction; 68 | }; 69 | 70 | export const cardinal_direction = degrees => { 71 | if (degrees >= 22.5 && degrees <= 67.5) { 72 | return 'north-west'; 73 | } else if (degrees >= 67.5 && degrees <= 112.5) { 74 | return 'north'; 75 | } else if (degrees >= 112.5 && degrees <= 157.5) { 76 | return 'north-east'; 77 | } else if (degrees >= 157.5 && degrees <= 202.5) { 78 | return 'east'; 79 | } else if (degrees >= 202.5 && degrees <= 247.5) { 80 | return 'south-east'; 81 | } else if (degrees >= 247.5 && degrees <= 292.5) { 82 | return 'south'; 83 | } else if (degrees >= 292.5 && degrees <= 337.5) { 84 | return 'south-west'; 85 | } else if (degrees >= 337.5) { 86 | return 'west'; 87 | } else if (degrees <= 22.5 && degrees >= -22.5) { 88 | return 'west'; 89 | } else if (degrees <= -22.5 && degrees >= -67.5) { 90 | return 'south-west'; 91 | } else if (degrees <= -67.5 && degrees >= -112.5) { 92 | return 'south'; 93 | } else if (degrees <= -112.5 && degrees >= -157.5) { 94 | return 'south-east'; 95 | } else if (degrees <= -157.5 && degrees >= -202.5) { 96 | return 'east'; 97 | } else if (degrees <= -202.5 && degrees >= -247.5) { 98 | return 'north-east'; 99 | } else if (degrees <= -247.5 && degrees >= -292.5) { 100 | return 'north'; 101 | } else if (degrees <= -292.5 && degrees >= -337.5) { 102 | return 'north-west'; 103 | } else if (degrees <= -337.5) { 104 | return 'west'; 105 | } else { 106 | return 'south'; 107 | } 108 | }; 109 | -------------------------------------------------------------------------------- /src/lib/classnames.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | export const set = (el, cls, avoid = 'noop') => { 5 | if (!el) return; 6 | if (!cls || (cls && cls.length === 0)) return; 7 | cls 8 | .split(' ') 9 | .filter(cl => cl !== avoid) 10 | .forEach(cl => el.classList.add(cl)); 11 | }; 12 | 13 | export const toggle = (el, cls) => { 14 | if (!el) return; 15 | if (!cls || (cls && cls.length === 0)) return; 16 | cls.split(' ').forEach(cl => el.classList.toggle(cl)); 17 | }; 18 | 19 | export const remove = (el, cls, avoid = 'noop') => { 20 | if (!el) return; 21 | if (!cls || (cls && cls.length === 0)) return; 22 | 23 | cls.split(' ').forEach(cl => { 24 | if (cl !== avoid) { 25 | el.classList.remove(cl); 26 | } 27 | }); 28 | }; 29 | 30 | export const cx = (cls, cls_obj) => 31 | `${cls} ${Object.keys(cls_obj) 32 | .filter(classname => cls_obj[classname]) 33 | .join(' ')}`.trim(); 34 | -------------------------------------------------------------------------------- /src/lib/color.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | // Anreas Wik https://codepen.io/andreaswik 5 | export const light_or_dark = color => { 6 | let r, g, b, hsp; 7 | // Check the format of the color, HEX or RGB? 8 | if (color.match(/^rgb/)) { 9 | // If HEX --> store the red, green, blue values in separate variables 10 | color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/); 11 | 12 | r = color[1]; 13 | g = color[2]; 14 | b = color[3]; 15 | } else { 16 | // If RGB --> Convert it to HEX: http://gist.github.com/983661 17 | color = +('0x' + color.slice(1).replace(color.length < 5 && /./g, '$&$&')); 18 | 19 | r = color >> 16; 20 | g = (color >> 8) & 255; 21 | b = color & 255; 22 | } 23 | 24 | // HSP (Highly Sensitive Poo) equation from http://alienryderflex.com/hsp.html 25 | hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b)); 26 | 27 | // Using the HSP value, determine whether the color is light or dark 28 | if (hsp > 127.5) { 29 | return 'light'; 30 | } else { 31 | return 'dark'; 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /src/lib/debounce.ts: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | export const debounce = function (fn) { 3 | var queued; 4 | return function (...args) { 5 | if (queued) cancelAnimationFrame(queued); 6 | 7 | queued = requestAnimationFrame(fn.bind(fn, ...args)); 8 | }; 9 | }; 10 | 11 | // https://stackoverflow.com/a/9614122/460422 12 | export const angle = (cx, cy, ex, ey) => { 13 | var dy = ey - cy; 14 | var dx = ex - cx; 15 | var theta = Math.atan2(dy, dx); // range (-PI, PI] 16 | theta *= 180 / Math.PI; // rads to degs, range (-180, 180] 17 | //if (theta < 0) theta = 360 + theta; // range [0, 360) 18 | return theta; 19 | }; 20 | -------------------------------------------------------------------------------- /src/lib/helpers.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | export const uniqueID = () => '_' + Math.random().toString(36).substr(2, 9); 4 | 5 | export const isArrayUsable = arr => arr && Array.isArray(arr) && arr.length !== 0; 6 | -------------------------------------------------------------------------------- /src/lib/node.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | import * as classnames from './classnames'; 5 | type NodeCreateType = { 6 | type:string; 7 | classNames?: string; 8 | id?:string; 9 | textContent?:string; 10 | attrs?:{ 11 | [key: string]: string 12 | } 13 | } 14 | export const create = (props:NodeCreateType) => { 15 | const { type = 'div', classNames = 'ph', id, textContent, attrs } = props; 16 | const el = document.createElement(type); 17 | classnames.set(el, classNames); 18 | if (id) { 19 | el.setAttribute('id', id); 20 | } 21 | if (textContent) { 22 | el.textContent = textContent; 23 | } 24 | if (attrs) { 25 | Object.keys(attrs).forEach(key => { 26 | if (attrs[key]) { 27 | el.setAttribute(key, attrs[key]); 28 | } 29 | }); 30 | } 31 | return el; 32 | }; 33 | 34 | export const clear = el => { 35 | const cNode = el.cloneNode(false); 36 | el.parentNode.replaceChild(cNode, el); 37 | return cNode; 38 | }; 39 | 40 | export const prepend = (el, child) => { 41 | return el.insertBefore(child, el.firstChild); 42 | }; 43 | -------------------------------------------------------------------------------- /src/lib/styles.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | export const add = (el, styles) => { 5 | if (!el) return; 6 | if ( 7 | !styles || 8 | (styles && styles.length === 0 && styles.constructor === String) || 9 | (styles && styles.length === 0 && styles.constructor === Array) || 10 | (styles && Object.keys(styles).length === 0 && styles.constructor === Object) 11 | ) 12 | return; 13 | if (typeof styles === 'string') { 14 | el.style = styles;; 15 | } else if (Array.isArray(styles)) { 16 | styles.forEach((style) => (el.style[style.key] = style.value)); 17 | } else { 18 | Object.keys(styles).forEach(key => (el.style[key] = styles[key])); 19 | } 20 | }; 21 | -------------------------------------------------------------------------------- /src/lib/throttle.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | const throttle = function (callback) { 4 | let running = false; 5 | return function () { 6 | if (running) { 7 | return; 8 | } 9 | running = true; 10 | requestAnimationFrame(function () { 11 | callback(); 12 | running = false; 13 | }); 14 | }; 15 | }; 16 | 17 | export default throttle; 18 | -------------------------------------------------------------------------------- /src/line.ts: -------------------------------------------------------------------------------- 1 | /* eslint no-console:0 */ 2 | 'use strict'; 3 | 4 | const Line = function () {}; 5 | 6 | export default Line; 7 | -------------------------------------------------------------------------------- /src/style/styles.styl: -------------------------------------------------------------------------------- 1 | 2 | *, 3 | *:after, 4 | *:before 5 | margin 0 6 | padding 0 7 | box-sizing border-box 8 | 9 | html, body 10 | margin 0 11 | padding 0 12 | box-sizing border-box 13 | 14 | 15 | body 16 | background-color #F7F8FF 17 | background-image radial-gradient(#CAD4DB 1px, #F7F8FF 1px) 18 | background-size 20px 20px 19 | // overflow hidden 20 | 21 | 22 | 23 | .container 24 | min-height 100vh 25 | height 100% 26 | width 100vw 27 | 28 | 29 | #svg 30 | position absolute 31 | top 0 32 | left 0 33 | width 100% 34 | height 100% 35 | pointer-events none 36 | z-index 3 37 | 38 | 39 | .design-token 40 | opacity 0.4 41 | background-color #ffffff 42 | display inline-flex 43 | white-space nowrap 44 | font-size 14px 45 | line-height 16px 46 | font-weight bold 47 | color #000000 48 | border-radius 1rem 49 | padding 0 0.5rem 50 | height 2rem 51 | user-select none 52 | align-items center 53 | justify-content flex-start 54 | position relative 55 | z-index 10 56 | font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important 57 | //box-shadow 0 3px 6px #d1d9e6 58 | box-shadow 0px 2px 10px rgba(104, 108, 123, 0.25) 59 | margin-bottom 1rem 60 | margin-top 0 61 | &[data-ancestors] 62 | &+[data-descendants] 63 | margin-top 2rem 64 | &:last-of-type 65 | margin-bottom 0 66 | 67 | 68 | 69 | .design-token.large 70 | height 56px 71 | border-radius 28px 72 | padding 0 1.5rem 73 | // max-width 320px 74 | margin-bottom 2rem 75 | &:last-of-type 76 | margin-bottom 0 77 | 78 | 79 | 80 | .design-token.large.font 81 | height 4rem 82 | border-radius 2rem 83 | position relative 84 | flex-direction column 85 | align-items flex-start 86 | padding-top 0.75rem 87 | 88 | & code 89 | margin-top 8px 90 | font-weight 500 91 | background-color #ECF1F5 92 | border none 93 | padding 4px 8px 94 | border-radius 6px 95 | display inline-block 96 | white-space nowrap 97 | color #6F7582 98 | font-size 14px 99 | line-height 12px 100 | font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important 101 | 102 | 103 | .design-token.large.color 104 | height 68px 105 | border-radius 34px 106 | padding-left 62px 107 | position relative 108 | flex-direction column 109 | align-items flex-start 110 | padding-top 12px 111 | padding-bottom 12px 112 | &[data-rgb], 113 | &[data-color] 114 | & code 115 | text-transform lowercase 116 | &[data-hex] 117 | & code 118 | &:before 119 | content '# ' 120 | color #6F7582 121 | 122 | & code 123 | margin-top 8px 124 | font-weight normal 125 | border 1px solid #E9EEF6 126 | padding 4px 8px 127 | border-radius 4px 128 | display inline-block 129 | white-space nowrap 130 | font-size 12px 131 | text-transform uppercase 132 | line-height 14px 133 | font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important 134 | 135 | 136 | 137 | 138 | .design-token.color 139 | padding-left 1.75rem 140 | 141 | & .drop 142 | box-sizing content-box 143 | border 1px solid #edeeef 144 | background-color transparent 145 | background-clip padding-box 146 | box-shadow inset 0 0 0 1px rgba(0,0,0,0.05), 0 3px 6px #d1d9e6 147 | height 1rem 148 | width 1rem 149 | display block 150 | border-radius 100% 151 | position absolute 152 | top 50% 153 | transform translateY(-50%) 154 | left 7px 155 | 156 | 157 | 158 | .design-token.large.color .drop 159 | border 2px solid white 160 | background-color transparent 161 | //box-shadow 0 3px 6px #d1d9e6 162 | box-shadow 0px 2px 9px rgba(64, 65, 108, 0.19646) 163 | height 32px 164 | width 32px 165 | display block 166 | border-radius 100% 167 | position absolute 168 | top 50% 169 | transform translateY(-50%) 170 | left 18px 171 | 172 | 173 | 174 | .is-moveable 175 | cursor pointer 176 | cursor hand 177 | cursor -webkit-grab 178 | cursor grab 179 | 180 | 181 | 182 | 183 | 184 | .is-moving 185 | user-select none 186 | 187 | 188 | .container 189 | display grid 190 | grid-template-columns repeat(auto-fit, minmax(320px, 1fr)) 191 | grid-gap 3rem 192 | 193 | & > .base 194 | display flex 195 | height 100% 196 | flex-direction column 197 | justify-content center 198 | align-items flex-start 199 | padding-top 3rem 200 | padding-bottom 3rem 201 | padding-right 1rem 202 | padding-left 1rem 203 | &:first-of-type 204 | align-items flex-start 205 | padding-left 3rem 206 | &:last-of-type 207 | align-items flex-end 208 | padding-right 3rem 209 | 210 | 211 | & > .descendants-1 212 | justify-content center 213 | & > .design-token 214 | margin-bottom 2rem 215 | &:last-of-type 216 | margin-bottom 0 217 | 218 | 219 | 220 | 221 | 222 | .design-token.text-color 223 | & .text 224 | font-weight 700 225 | display inline-block 226 | margin-right 8px 227 | 228 | 229 | .design-token.font-weight 230 | & .text 231 | display inline-block 232 | margin-right 8px 233 | margin-left 4px 234 | font-size 1rem 235 | 236 | 237 | 238 | .design-token.light 239 | background-color #374151 240 | 241 | 242 | 243 | .design-token.font-size, 244 | .design-token.size 245 | &:before 246 | content attr(data-value) 247 | font-weight 500 248 | background-color #ecf1f5 249 | border none 250 | margin-right 4px 251 | padding 4px 4px 252 | border-radius 6px 253 | display inline-block 254 | white-space nowrap 255 | color #6F7582 256 | font-size 11px 257 | line-height 12px 258 | font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important 259 | 260 | 261 | 262 | 263 | .design-token.component 264 | background-color #5366f7 265 | color white 266 | 267 | 268 | .design-token.is-connected, 269 | .design-token:hover 270 | opacity 1 271 | 272 | path.control 273 | z-index 10 274 | 275 | 276 | .settings 277 | position fixed 278 | bottom 3rem 279 | right 3rem 280 | height 3rem 281 | box-shadow 0px 2px 10px rgba(104, 108, 123, 0.25) 282 | border-radius 6px 283 | display flex 284 | align-items center 285 | padding 4px 8px 286 | 287 | background-color white 288 | & button 289 | border none 290 | box-shadow none 291 | background-color transparent 292 | height 2rem 293 | cursor pointer 294 | width 2rem 295 | & .center 296 | background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='32px' height='32px' viewBox='0 0 32 32' stroke-width='2'%3E%3Cg stroke-width='2' transform='translate(0, 0)'%3E%3Cpolyline points='2 10 2 2 10 2' fill='none' stroke='%23000000' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' stroke-linejoin='miter'%3E%3C/polyline%3E%3Cpolyline data-color='color-2' points='22 2 30 2 30 10' fill='none' stroke='%23000000' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' stroke-linejoin='miter'%3E%3C/polyline%3E%3Cpolyline points='30 22 30 30 22 30' fill='none' stroke='%23000000' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' stroke-linejoin='miter'%3E%3C/polyline%3E%3Cpolyline data-color='color-2' points='10 30 2 30 2 22' fill='none' stroke='%23000000' stroke-linecap='square' stroke-miterlimit='10' stroke-width='2' stroke-linejoin='miter'%3E%3C/polyline%3E%3C/g%3E%3C/svg%3E") 297 | background-repeat no-repeat 298 | background-size 24px 24px 299 | background-position center center 300 | margin-left 1rem 301 | position relative 302 | &:before 303 | content "" 304 | display block 305 | width 1pt 306 | height 2rem 307 | background rgba(0,0,0,0.03) 308 | position absolute 309 | left -12px 310 | top 50% 311 | transform translateY(-50%) 312 | 313 | .zoomValue 314 | font-family "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace 315 | background transparent 316 | border none 317 | display flex 318 | font-weight 600 319 | font-size 1rem 320 | line-height 1rem 321 | width 3rem 322 | height 2rem 323 | align-items center 324 | justify-content center 325 | text-align center 326 | appearance none 327 | 328 | .zoomOut, 329 | .zoomIn 330 | background-repeat no-repeat 331 | background-position center center 332 | background-size 24px 24px 333 | 334 | .zoomOut 335 | background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='square' stroke-miterlimit='10' d='M23 16H9'/%3E%3C/svg%3E") 336 | 337 | .zoomIn 338 | background-image url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke-width='2' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square' stroke-miterlimit='10'%3E%3Cpath d='M16 9v14M23 16H9'/%3E%3C/g%3E%3C/svg%3E") 339 | -------------------------------------------------------------------------------- /src/tokens.json: -------------------------------------------------------------------------------- 1 | { 2 | "size-breakpoint-min-xxs": { 3 | "name": "XXS", 4 | "id": "size-breakpoint-min-xxs", 5 | "category": "size", 6 | "value": "22.5rem", 7 | "type": "breakpoint", 8 | "item": "min-xxs", 9 | "comment": "360px" 10 | }, 11 | "size-breakpoint-min-xs": { 12 | "name": "ExtraSmall", 13 | "id": "size-breakpoint-min-xs", 14 | "category": "size", 15 | "value": "25rem", 16 | "type": "breakpoint", 17 | "item": "min-xs", 18 | "comment": "400px" 19 | }, 20 | "size-breakpoint-min-smlr": { 21 | "name": "Smaller", 22 | "id": "size-breakpoint-min-smlr", 23 | "category": "size", 24 | "value": "45rem", 25 | "type": "breakpoint", 26 | "item": "min-smlr", 27 | "comment": "720px" 28 | }, 29 | "size-breakpoint-min-sm": { 30 | "name": "Small", 31 | "id": "size-breakpoint-min-sm", 32 | "category": "size", 33 | "value": "60rem", 34 | "type": "breakpoint", 35 | "item": "min-sm", 36 | "comment": "960px" 37 | }, 38 | "size-breakpoint-min-md": { 39 | "name": "Medium", 40 | "id": "size-breakpoint-min-md", 41 | "category": "size", 42 | "value": "75rem", 43 | "type": "breakpoint", 44 | "item": "min-md", 45 | "comment": "1200px" 46 | }, 47 | "size-breakpoint-min-lg": { 48 | "name": "Large", 49 | "id": "size-breakpoint-min-lg", 50 | "category": "size", 51 | "value": "90rem", 52 | "type": "breakpoint", 53 | "item": "min-lg", 54 | "comment": "1440px" 55 | }, 56 | "size-breakpoint-min-xl": { 57 | "name": "ExtraLarge", 58 | "id": "size-breakpoint-min-xl", 59 | "category": "size", 60 | "value": "120rem", 61 | "type": "breakpoint", 62 | "item": "min-xl", 63 | "comment": "1920px" 64 | }, 65 | "size-breakpoint-min-xxl": { 66 | "name": "Xxl", 67 | "id": "size-breakpoint-min-xxl", 68 | "category": "size", 69 | "value": "160rem", 70 | "type": "breakpoint", 71 | "item": "min-xxl", 72 | "comment": "2560px" 73 | }, 74 | "size-breakpoint-min-huge": { 75 | "name": "Huge", 76 | "id": "size-breakpoint-min-huge", 77 | "category": "size", 78 | "value": "200rem", 79 | "type": "breakpoint", 80 | "item": "min-huge", 81 | "comment": "3200px" 82 | }, 83 | "size-breakpoint-min-huger": { 84 | "name": "Huger", 85 | "id": "size-breakpoint-min-huger", 86 | "category": "size", 87 | "value": "240rem", 88 | "type": "breakpoint", 89 | "item": "min-huger", 90 | "comment": "3840px" 91 | }, 92 | "size-font-14": { 93 | "target": "mobile", 94 | "id": "size-font-14", 95 | "category": "size", 96 | "value": "0.875rem", 97 | "type": "font", 98 | "item": "14", 99 | "comment": "14 pixels" 100 | }, 101 | "size-font-15": { 102 | "target": "mobile", 103 | "id": "size-font-15", 104 | "category": "size", 105 | "value": "0.9375rem", 106 | "type": "font", 107 | "item": "15", 108 | "comment": "15 pixels" 109 | }, 110 | "size-font-16": { 111 | "target": "mobile", 112 | "id": "size-font-16", 113 | "category": "size", 114 | "value": "1rem", 115 | "type": "font", 116 | "item": "16", 117 | "comment": "16 pixels" 118 | }, 119 | "size-font-18": { 120 | "target": "mobile", 121 | "id": "size-font-18", 122 | "category": "size", 123 | "value": "1.125rem", 124 | "type": "font", 125 | "item": "18", 126 | "comment": "18 pixels" 127 | }, 128 | "size-font-20": { 129 | "target": "mobile", 130 | "id": "size-font-20", 131 | "category": "size", 132 | "value": "1.25rem", 133 | "type": "font", 134 | "item": "20", 135 | "comment": "20 pixels" 136 | }, 137 | "size-font-22": { 138 | "target": "mobile", 139 | "id": "size-font-22", 140 | "category": "size", 141 | "value": "1.375rem", 142 | "type": "font", 143 | "item": "22", 144 | "comment": "22 pixels" 145 | }, 146 | "size-font-24": { 147 | "target": "mobile", 148 | "id": "size-font-24", 149 | "category": "size", 150 | "value": "1.5rem", 151 | "type": "font", 152 | "item": "24", 153 | "comment": "24 pixels" 154 | }, 155 | "size-font-26": { 156 | "target": "mobile", 157 | "id": "size-font-26", 158 | "category": "size", 159 | "value": "1.625rem", 160 | "type": "font", 161 | "item": "26", 162 | "comment": "26 pixels" 163 | }, 164 | "size-font-28": { 165 | "target": "mobile", 166 | "id": "size-font-28", 167 | "category": "size", 168 | "value": "1.75rem", 169 | "type": "font", 170 | "item": "28", 171 | "comment": "28 pixels" 172 | }, 173 | "size-font-30": { 174 | "target": "mobile", 175 | "id": "size-font-30", 176 | "category": "size", 177 | "value": "1.875rem", 178 | "type": "font", 179 | "item": "30", 180 | "comment": "30 pixels" 181 | }, 182 | "size-font-32": { 183 | "target": "mobile", 184 | "id": "size-font-32", 185 | "category": "size", 186 | "value": "2rem", 187 | "type": "font", 188 | "item": "32", 189 | "comment": "32 pixels" 190 | }, 191 | "size-font-33": { 192 | "target": "mobile", 193 | "id": "size-font-33", 194 | "category": "size", 195 | "value": "2.0625rem", 196 | "type": "font", 197 | "item": "33", 198 | "comment": "33 pixels" 199 | }, 200 | "size-font-36": { 201 | "target": "mobile", 202 | "id": "size-font-36", 203 | "category": "size", 204 | "value": "2.25rem", 205 | "type": "font", 206 | "item": "36", 207 | "comment": "36 pixels" 208 | }, 209 | "size-font-38": { 210 | "target": "mobile", 211 | "id": "size-font-38", 212 | "category": "size", 213 | "value": "2.375rem", 214 | "type": "font", 215 | "item": "38", 216 | "comment": "38 pixels" 217 | }, 218 | "size-font-42": { 219 | "target": "mobile", 220 | "id": "size-font-42", 221 | "category": "size", 222 | "value": "2.625rem", 223 | "type": "font", 224 | "item": "42", 225 | "comment": "42 pixels" 226 | }, 227 | "size-font-48": { 228 | "target": "mobile", 229 | "id": "size-font-48", 230 | "category": "size", 231 | "value": "3rem", 232 | "type": "font", 233 | "item": "48", 234 | "comment": "48 pixels" 235 | }, 236 | "size-font-54": { 237 | "target": "mobile", 238 | "id": "size-font-54", 239 | "category": "size", 240 | "value": "3.375rem", 241 | "type": "font", 242 | "item": "54", 243 | "comment": "54 pixels" 244 | }, 245 | "size-font-56": { 246 | "target": "mobile", 247 | "id": "size-font-56", 248 | "category": "size", 249 | "value": "3.5rem", 250 | "type": "font", 251 | "item": "56", 252 | "comment": "56 pixels" 253 | }, 254 | "size-font-66": { 255 | "target": "mobile", 256 | "id": "size-font-66", 257 | "category": "size", 258 | "value": "4.125rem", 259 | "type": "font", 260 | "item": "66", 261 | "comment": "66 pixels" 262 | }, 263 | "size-font-14px": { 264 | "target": "web", 265 | "id": "size-font-14px", 266 | "category": "size", 267 | "value": "14px", 268 | "type": "font", 269 | "item": "14px", 270 | "comment": "0.875rem" 271 | }, 272 | "size-font-15px": { 273 | "target": "web", 274 | "id": "size-font-15px", 275 | "category": "size", 276 | "value": "15px", 277 | "type": "font", 278 | "item": "15px", 279 | "comment": "0.9375rem" 280 | }, 281 | "size-font-16px": { 282 | "target": "web", 283 | "id": "size-font-16px", 284 | "category": "size", 285 | "value": "16px", 286 | "type": "font", 287 | "item": "16px", 288 | "comment": "1rem" 289 | }, 290 | "size-font-18px": { 291 | "target": "web", 292 | "id": "size-font-18px", 293 | "category": "size", 294 | "value": "18px", 295 | "type": "font", 296 | "item": "18px", 297 | "comment": "1.125rem" 298 | }, 299 | "size-font-20px": { 300 | "target": "web", 301 | "id": "size-font-20px", 302 | "category": "size", 303 | "value": "20px", 304 | "type": "font", 305 | "item": "20px", 306 | "comment": "1.25rem" 307 | }, 308 | "size-font-22px": { 309 | "target": "web", 310 | "id": "size-font-22px", 311 | "category": "size", 312 | "value": "22px", 313 | "type": "font", 314 | "item": "22px", 315 | "comment": "1.375rem" 316 | }, 317 | "size-font-24px": { 318 | "target": "web", 319 | "id": "size-font-24px", 320 | "category": "size", 321 | "value": "24px", 322 | "type": "font", 323 | "item": "24px", 324 | "comment": "1.5rem" 325 | }, 326 | "size-font-26px": { 327 | "target": "web", 328 | "id": "size-font-26px", 329 | "category": "size", 330 | "value": "26px", 331 | "type": "font", 332 | "item": "26px", 333 | "comment": "1.625rem" 334 | }, 335 | "size-font-28px": { 336 | "target": "web", 337 | "id": "size-font-28px", 338 | "category": "size", 339 | "value": "28px", 340 | "type": "font", 341 | "item": "28px", 342 | "comment": "1.75rem" 343 | }, 344 | "size-font-30px": { 345 | "target": "web", 346 | "id": "size-font-30px", 347 | "category": "size", 348 | "value": "30px", 349 | "type": "font", 350 | "item": "30px", 351 | "comment": "1.875rem" 352 | }, 353 | "size-font-32px": { 354 | "target": "web", 355 | "id": "size-font-32px", 356 | "category": "size", 357 | "value": "32px", 358 | "type": "font", 359 | "item": "32px", 360 | "comment": "2rem" 361 | }, 362 | "size-font-33px": { 363 | "target": "web", 364 | "id": "size-font-33px", 365 | "category": "size", 366 | "value": "33px", 367 | "type": "font", 368 | "item": "33px", 369 | "comment": "2.0625rem" 370 | }, 371 | "size-font-36px": { 372 | "target": "web", 373 | "id": "size-font-36px", 374 | "category": "size", 375 | "value": "36px", 376 | "type": "font", 377 | "item": "36px", 378 | "comment": "2.25rem" 379 | }, 380 | "size-font-38px": { 381 | "target": "web", 382 | "id": "size-font-38px", 383 | "category": "size", 384 | "value": "38px", 385 | "type": "font", 386 | "item": "38px", 387 | "comment": "2.375rem" 388 | }, 389 | "size-font-42px": { 390 | "target": "web", 391 | "id": "size-font-42px", 392 | "category": "size", 393 | "value": "42px", 394 | "type": "font", 395 | "item": "42px", 396 | "comment": "2.625rem" 397 | }, 398 | "size-font-48px": { 399 | "target": "web", 400 | "id": "size-font-48px", 401 | "category": "size", 402 | "value": "48px", 403 | "type": "font", 404 | "item": "48px", 405 | "comment": "3rem" 406 | }, 407 | "size-font-54px": { 408 | "target": "web", 409 | "id": "size-font-54px", 410 | "category": "size", 411 | "value": "54px", 412 | "type": "font", 413 | "item": "54px", 414 | "comment": "3.375rem" 415 | }, 416 | "size-font-56px": { 417 | "target": "web", 418 | "id": "size-font-56px", 419 | "category": "size", 420 | "value": "56px", 421 | "type": "font", 422 | "item": "56px", 423 | "comment": "3.5rem" 424 | }, 425 | "size-font-66px": { 426 | "target": "web", 427 | "id": "size-font-66px", 428 | "category": "size", 429 | "value": "66px", 430 | "type": "font", 431 | "item": "66px", 432 | "comment": "4.125rem" 433 | }, 434 | "size-line-height-24": { 435 | "target": "mobile", 436 | "id": "size-line-height-24", 437 | "category": "size", 438 | "value": "1.5rem", 439 | "type": "line-height", 440 | "item": "24", 441 | "comment": "24px" 442 | }, 443 | "size-line-height-28": { 444 | "target": "mobile", 445 | "id": "size-line-height-28", 446 | "category": "size", 447 | "value": "1.75rem", 448 | "type": "line-height", 449 | "item": "28", 450 | "comment": "28px" 451 | }, 452 | "size-line-height-32": { 453 | "target": "mobile", 454 | "id": "size-line-height-32", 455 | "category": "size", 456 | "value": "2rem", 457 | "type": "line-height", 458 | "item": "32", 459 | "comment": "32px" 460 | }, 461 | "size-line-height-40": { 462 | "target": "mobile", 463 | "id": "size-line-height-40", 464 | "category": "size", 465 | "value": "2.5rem", 466 | "type": "line-height", 467 | "item": "40", 468 | "comment": "40px" 469 | }, 470 | "size-line-height-42": { 471 | "target": "mobile", 472 | "id": "size-line-height-42", 473 | "category": "size", 474 | "value": "2.625rem", 475 | "type": "line-height", 476 | "item": "42", 477 | "comment": "42px" 478 | }, 479 | "size-line-height-44": { 480 | "target": "mobile", 481 | "id": "size-line-height-44", 482 | "category": "size", 483 | "value": "2.75rem", 484 | "type": "line-height", 485 | "item": "44", 486 | "comment": "44px" 487 | }, 488 | "size-line-height-48": { 489 | "target": "mobile", 490 | "id": "size-line-height-48", 491 | "category": "size", 492 | "value": "3rem", 493 | "type": "line-height", 494 | "item": "48", 495 | "comment": "48px" 496 | }, 497 | "size-line-height-52": { 498 | "target": "mobile", 499 | "id": "size-line-height-52", 500 | "category": "size", 501 | "value": "3.25rem", 502 | "type": "line-height", 503 | "item": "52", 504 | "comment": "52px" 505 | }, 506 | "size-line-height-56": { 507 | "target": "mobile", 508 | "id": "size-line-height-56", 509 | "category": "size", 510 | "value": "3.5rem", 511 | "type": "line-height", 512 | "item": "56", 513 | "comment": "56px" 514 | }, 515 | "size-line-height-64": { 516 | "target": "mobile", 517 | "id": "size-line-height-64", 518 | "category": "size", 519 | "value": "4rem", 520 | "type": "line-height", 521 | "item": "64", 522 | "comment": "64px" 523 | }, 524 | "size-line-height-72": { 525 | "target": "mobile", 526 | "id": "size-line-height-72", 527 | "category": "size", 528 | "value": "4.5rem", 529 | "type": "line-height", 530 | "item": "72", 531 | "comment": "72px" 532 | }, 533 | "size-line-height-24px": { 534 | "target": "web", 535 | "id": "size-line-height-24px", 536 | "category": "size", 537 | "value": "24px", 538 | "type": "line-height", 539 | "item": "24px", 540 | "comment": "1.5rem" 541 | }, 542 | "size-line-height-28px": { 543 | "target": "web", 544 | "id": "size-line-height-28px", 545 | "category": "size", 546 | "value": "28px", 547 | "type": "line-height", 548 | "item": "28px", 549 | "comment": "1.75rem" 550 | }, 551 | "size-line-height-32px": { 552 | "target": "web", 553 | "id": "size-line-height-32px", 554 | "category": "size", 555 | "value": "32px", 556 | "type": "line-height", 557 | "item": "32px", 558 | "comment": "2rem" 559 | }, 560 | "size-line-height-40px": { 561 | "target": "web", 562 | "id": "size-line-height-40px", 563 | "category": "size", 564 | "value": "40px", 565 | "type": "line-height", 566 | "item": "40px", 567 | "comment": "2.5rem" 568 | }, 569 | "size-line-height-42px": { 570 | "target": "web", 571 | "id": "size-line-height-42px", 572 | "category": "size", 573 | "value": "42px", 574 | "type": "line-height", 575 | "item": "42px", 576 | "comment": "2.625rem" 577 | }, 578 | "size-line-height-44px": { 579 | "target": "web", 580 | "id": "size-line-height-44px", 581 | "category": "size", 582 | "value": "44px", 583 | "type": "line-height", 584 | "item": "44px", 585 | "comment": "2.75rem" 586 | }, 587 | "size-line-height-48px": { 588 | "target": "web", 589 | "id": "size-line-height-48px", 590 | "category": "size", 591 | "value": "48px", 592 | "type": "line-height", 593 | "item": "48px", 594 | "comment": "3rem" 595 | }, 596 | "size-line-height-52px": { 597 | "target": "web", 598 | "id": "size-line-height-52px", 599 | "category": "size", 600 | "value": "52px", 601 | "type": "line-height", 602 | "item": "52px", 603 | "comment": "3.25rem" 604 | }, 605 | "size-line-height-56px": { 606 | "target": "web", 607 | "id": "size-line-height-56px", 608 | "category": "size", 609 | "value": "56px", 610 | "type": "line-height", 611 | "item": "56px", 612 | "comment": "3.5rem" 613 | }, 614 | "size-line-height-64px": { 615 | "target": "web", 616 | "id": "size-line-height-64px", 617 | "category": "size", 618 | "value": "64px", 619 | "type": "line-height", 620 | "item": "64px", 621 | "comment": "4rem" 622 | }, 623 | "size-line-height-72px": { 624 | "target": "web", 625 | "id": "size-line-height-72px", 626 | "category": "size", 627 | "value": "72px", 628 | "type": "line-height", 629 | "item": "72px", 630 | "comment": "4.5rem" 631 | }, 632 | "size-spacing-4": { 633 | "target": "mobile", 634 | "id": "size-spacing-4", 635 | "category": "size", 636 | "value": "0.25rem", 637 | "type": "spacing", 638 | "item": "4", 639 | "comment": "4px" 640 | }, 641 | "size-spacing-8": { 642 | "target": "mobile", 643 | "id": "size-spacing-8", 644 | "category": "size", 645 | "value": "0.5rem", 646 | "type": "spacing", 647 | "item": "8", 648 | "comment": "8px" 649 | }, 650 | "size-spacing-12": { 651 | "target": "mobile", 652 | "id": "size-spacing-12", 653 | "category": "size", 654 | "value": "0.75rem", 655 | "type": "spacing", 656 | "item": "12", 657 | "comment": "12px" 658 | }, 659 | "size-spacing-16": { 660 | "target": "mobile", 661 | "id": "size-spacing-16", 662 | "category": "size", 663 | "value": "1rem", 664 | "type": "spacing", 665 | "item": "16", 666 | "comment": "16px" 667 | }, 668 | "size-spacing-20": { 669 | "target": "mobile", 670 | "id": "size-spacing-20", 671 | "category": "size", 672 | "value": "1.25rem", 673 | "type": "spacing", 674 | "item": "20", 675 | "comment": "20px" 676 | }, 677 | "size-spacing-24": { 678 | "target": "mobile", 679 | "id": "size-spacing-24", 680 | "category": "size", 681 | "value": "1.5rem", 682 | "type": "spacing", 683 | "item": "24", 684 | "comment": "24px" 685 | }, 686 | "size-spacing-28": { 687 | "target": "mobile", 688 | "id": "size-spacing-28", 689 | "category": "size", 690 | "value": "1.75rem", 691 | "type": "spacing", 692 | "item": "28", 693 | "comment": "28px" 694 | }, 695 | "size-spacing-32": { 696 | "target": "mobile", 697 | "id": "size-spacing-32", 698 | "category": "size", 699 | "value": "2rem", 700 | "type": "spacing", 701 | "item": "32", 702 | "comment": "32px" 703 | }, 704 | "size-spacing-36": { 705 | "target": "mobile", 706 | "id": "size-spacing-36", 707 | "category": "size", 708 | "value": "2.25rem", 709 | "type": "spacing", 710 | "item": "36", 711 | "comment": "36px" 712 | }, 713 | "size-spacing-40": { 714 | "target": "mobile", 715 | "id": "size-spacing-40", 716 | "category": "size", 717 | "value": "2.5rem", 718 | "type": "spacing", 719 | "item": "40", 720 | "comment": "40px" 721 | }, 722 | "size-spacing-44": { 723 | "target": "mobile", 724 | "id": "size-spacing-44", 725 | "category": "size", 726 | "value": "2.75rem", 727 | "type": "spacing", 728 | "item": "44", 729 | "comment": "44px" 730 | }, 731 | "size-spacing-48": { 732 | "target": "mobile", 733 | "id": "size-spacing-48", 734 | "category": "size", 735 | "value": "3rem", 736 | "type": "spacing", 737 | "item": "48", 738 | "comment": "48px" 739 | }, 740 | "size-spacing-52": { 741 | "target": "mobile", 742 | "id": "size-spacing-52", 743 | "category": "size", 744 | "value": "3.25rem", 745 | "type": "spacing", 746 | "item": "52", 747 | "comment": "52px" 748 | }, 749 | "size-spacing-56": { 750 | "target": "mobile", 751 | "id": "size-spacing-56", 752 | "category": "size", 753 | "value": "3.5rem", 754 | "type": "spacing", 755 | "item": "56", 756 | "comment": "56px" 757 | }, 758 | "size-spacing-60": { 759 | "target": "mobile", 760 | "id": "size-spacing-60", 761 | "category": "size", 762 | "value": "3.75rem", 763 | "type": "spacing", 764 | "item": "60", 765 | "comment": "60px" 766 | }, 767 | "size-spacing-64": { 768 | "target": "mobile", 769 | "id": "size-spacing-64", 770 | "category": "size", 771 | "value": "4rem", 772 | "type": "spacing", 773 | "item": "64", 774 | "comment": "64px" 775 | }, 776 | "size-spacing-68": { 777 | "target": "mobile", 778 | "id": "size-spacing-68", 779 | "category": "size", 780 | "value": "4.25rem", 781 | "type": "spacing", 782 | "item": "68", 783 | "comment": "68px" 784 | }, 785 | "size-spacing-72": { 786 | "target": "mobile", 787 | "id": "size-spacing-72", 788 | "category": "size", 789 | "value": "4.5rem", 790 | "type": "spacing", 791 | "item": "72", 792 | "comment": "72px" 793 | }, 794 | "size-spacing-76": { 795 | "target": "mobile", 796 | "id": "size-spacing-76", 797 | "category": "size", 798 | "value": "4.75rem", 799 | "type": "spacing", 800 | "item": "76", 801 | "comment": "76px" 802 | }, 803 | "size-spacing-80": { 804 | "target": "mobile", 805 | "id": "size-spacing-80", 806 | "category": "size", 807 | "value": "5rem", 808 | "type": "spacing", 809 | "item": "80", 810 | "comment": "80px" 811 | }, 812 | "size-spacing-84": { 813 | "target": "mobile", 814 | "id": "size-spacing-84", 815 | "category": "size", 816 | "value": "5.25rem", 817 | "type": "spacing", 818 | "item": "84", 819 | "comment": "84px" 820 | }, 821 | "size-spacing-88": { 822 | "target": "mobile", 823 | "id": "size-spacing-88", 824 | "category": "size", 825 | "value": "5.5rem", 826 | "type": "spacing", 827 | "item": "88", 828 | "comment": "88px" 829 | }, 830 | "size-spacing-92": { 831 | "target": "mobile", 832 | "id": "size-spacing-92", 833 | "category": "size", 834 | "value": "5.75rem", 835 | "type": "spacing", 836 | "item": "92", 837 | "comment": "92px" 838 | }, 839 | "size-spacing-96": { 840 | "target": "mobile", 841 | "id": "size-spacing-96", 842 | "category": "size", 843 | "value": "6rem", 844 | "type": "spacing", 845 | "item": "96", 846 | "comment": "96px" 847 | }, 848 | "size-spacing-100": { 849 | "target": "mobile", 850 | "id": "size-spacing-100", 851 | "category": "size", 852 | "value": "6.25rem", 853 | "type": "spacing", 854 | "item": "100", 855 | "comment": "100px" 856 | }, 857 | "size-spacing-104": { 858 | "target": "mobile", 859 | "id": "size-spacing-104", 860 | "category": "size", 861 | "value": "6.5rem", 862 | "type": "spacing", 863 | "item": "104", 864 | "comment": "104px" 865 | }, 866 | "size-spacing-4px": { 867 | "target": "web", 868 | "id": "size-spacing-4px", 869 | "category": "size", 870 | "value": "4px", 871 | "type": "spacing", 872 | "item": "4px", 873 | "comment": "0.25rem" 874 | }, 875 | "size-spacing-8px": { 876 | "target": "web", 877 | "id": "size-spacing-8px", 878 | "category": "size", 879 | "value": "8px", 880 | "type": "spacing", 881 | "item": "8px", 882 | "comment": "0.5rem" 883 | }, 884 | "size-spacing-12px": { 885 | "target": "web", 886 | "id": "size-spacing-12px", 887 | "category": "size", 888 | "value": "12px", 889 | "type": "spacing", 890 | "item": "12px", 891 | "comment": "0.75rem" 892 | }, 893 | "size-spacing-16px": { 894 | "target": "web", 895 | "id": "size-spacing-16px", 896 | "category": "size", 897 | "value": "16px", 898 | "type": "spacing", 899 | "item": "16px", 900 | "comment": "1rem" 901 | }, 902 | "size-spacing-20px": { 903 | "target": "web", 904 | "id": "size-spacing-20px", 905 | "category": "size", 906 | "value": "20px", 907 | "type": "spacing", 908 | "item": "20px", 909 | "comment": "1.25rem" 910 | }, 911 | "size-spacing-24px": { 912 | "target": "web", 913 | "id": "size-spacing-24px", 914 | "category": "size", 915 | "value": "24px", 916 | "type": "spacing", 917 | "item": "24px", 918 | "comment": "1.5rem" 919 | }, 920 | "size-spacing-28px": { 921 | "target": "web", 922 | "id": "size-spacing-28px", 923 | "category": "size", 924 | "value": "28px", 925 | "type": "spacing", 926 | "item": "28px", 927 | "comment": "1.75rem" 928 | }, 929 | "size-spacing-32px": { 930 | "target": "web", 931 | "id": "size-spacing-32px", 932 | "category": "size", 933 | "value": "32px", 934 | "type": "spacing", 935 | "item": "32px", 936 | "comment": "2rem" 937 | }, 938 | "size-spacing-36px": { 939 | "target": "web", 940 | "id": "size-spacing-36px", 941 | "category": "size", 942 | "value": "36px", 943 | "type": "spacing", 944 | "item": "36px", 945 | "comment": "2.25rem" 946 | }, 947 | "size-spacing-40px": { 948 | "target": "web", 949 | "id": "size-spacing-40px", 950 | "category": "size", 951 | "value": "40px", 952 | "type": "spacing", 953 | "item": "40px", 954 | "comment": "2.5rem" 955 | }, 956 | "size-spacing-44px": { 957 | "target": "web", 958 | "id": "size-spacing-44px", 959 | "category": "size", 960 | "value": "44px", 961 | "type": "spacing", 962 | "item": "44px", 963 | "comment": "2.75rem" 964 | }, 965 | "size-spacing-48px": { 966 | "target": "web", 967 | "id": "size-spacing-48px", 968 | "category": "size", 969 | "value": "48px", 970 | "type": "spacing", 971 | "item": "48px", 972 | "comment": "3rem" 973 | }, 974 | "size-spacing-52px": { 975 | "target": "web", 976 | "id": "size-spacing-52px", 977 | "category": "size", 978 | "value": "52px", 979 | "type": "spacing", 980 | "item": "52px", 981 | "comment": "3.25rem" 982 | }, 983 | "size-spacing-56px": { 984 | "target": "web", 985 | "id": "size-spacing-56px", 986 | "category": "size", 987 | "value": "56px", 988 | "type": "spacing", 989 | "item": "56px", 990 | "comment": "3.5rem" 991 | }, 992 | "size-spacing-60px": { 993 | "target": "web", 994 | "id": "size-spacing-60px", 995 | "category": "size", 996 | "value": "60px", 997 | "type": "spacing", 998 | "item": "60px", 999 | "comment": "3.75rem" 1000 | }, 1001 | "size-spacing-64px": { 1002 | "target": "web", 1003 | "id": "size-spacing-64px", 1004 | "category": "size", 1005 | "value": "64px", 1006 | "type": "spacing", 1007 | "item": "64px", 1008 | "comment": "4rem" 1009 | }, 1010 | "size-spacing-68px": { 1011 | "target": "web", 1012 | "id": "size-spacing-68px", 1013 | "category": "size", 1014 | "value": "68px", 1015 | "type": "spacing", 1016 | "item": "68px", 1017 | "comment": "4.25rem" 1018 | }, 1019 | "size-spacing-72px": { 1020 | "target": "web", 1021 | "id": "size-spacing-72px", 1022 | "category": "size", 1023 | "value": "72px", 1024 | "type": "spacing", 1025 | "item": "72px", 1026 | "comment": "4.5rem" 1027 | }, 1028 | "size-spacing-76px": { 1029 | "target": "web", 1030 | "id": "size-spacing-76px", 1031 | "category": "size", 1032 | "value": "76px", 1033 | "type": "spacing", 1034 | "item": "76px", 1035 | "comment": "4.75rem" 1036 | }, 1037 | "size-spacing-80px": { 1038 | "target": "web", 1039 | "id": "size-spacing-80px", 1040 | "category": "size", 1041 | "value": "80px", 1042 | "type": "spacing", 1043 | "item": "80px", 1044 | "comment": "5rem" 1045 | }, 1046 | "size-spacing-84px": { 1047 | "target": "web", 1048 | "id": "size-spacing-84px", 1049 | "category": "size", 1050 | "value": "84px", 1051 | "type": "spacing", 1052 | "item": "84px", 1053 | "comment": "5.25rem" 1054 | }, 1055 | "size-spacing-88px": { 1056 | "target": "web", 1057 | "id": "size-spacing-88px", 1058 | "category": "size", 1059 | "value": "88px", 1060 | "type": "spacing", 1061 | "item": "88px", 1062 | "comment": "5.5rem" 1063 | }, 1064 | "size-spacing-92px": { 1065 | "target": "web", 1066 | "id": "size-spacing-92px", 1067 | "category": "size", 1068 | "value": "92px", 1069 | "type": "spacing", 1070 | "item": "92px", 1071 | "comment": "5.75rem" 1072 | }, 1073 | "size-spacing-96px": { 1074 | "target": "web", 1075 | "id": "size-spacing-96px", 1076 | "category": "size", 1077 | "value": "96px", 1078 | "type": "spacing", 1079 | "item": "96px", 1080 | "comment": "6rem" 1081 | }, 1082 | "size-spacing-100px": { 1083 | "target": "web", 1084 | "id": "size-spacing-100px", 1085 | "category": "size", 1086 | "value": "100px", 1087 | "type": "spacing", 1088 | "item": "100px", 1089 | "comment": "6.25rem" 1090 | }, 1091 | "size-spacing-104px": { 1092 | "target": "web", 1093 | "id": "size-spacing-104px", 1094 | "category": "size", 1095 | "value": "104px", 1096 | "type": "spacing", 1097 | "item": "104px", 1098 | "comment": "6.5rem" 1099 | }, 1100 | "color-background-button-primary": { 1101 | "id": "color-background-button-primary", 1102 | "category": "color", 1103 | "ancestorId": "color-cta", 1104 | "value": "rgb(0,84,240)", 1105 | "type": "background", 1106 | "item": "button", 1107 | "subItem": "primary" 1108 | }, 1109 | "color-background-lightest-beige": { 1110 | "name": "Doctor", 1111 | "color-name": "Doctor", 1112 | "rgb": "rgb(250,249,247)", 1113 | "hex": "#faf9f7", 1114 | "internal-name": "BE 5", 1115 | "pms": "PMS 9223 / 20%", 1116 | "cmykc": "5, 10, 15, 3 / 20%", 1117 | "cmyku": "3, 8, 14, 2 / 20%", 1118 | "id": "color-background-lightest-beige", 1119 | "category": "color", 1120 | "ancestorId": "color-base-beige-100", 1121 | "value": "rgb(250,249,247)", 1122 | "type": "background", 1123 | "item": "lightest-beige" 1124 | }, 1125 | "color-background-lighter-beige": { 1126 | "name": "The Speed Of Light", 1127 | "color-name": "The Speed Of Light", 1128 | "rgb": "rgb(246,243,240)", 1129 | "hex": "#f6f3f0", 1130 | "internal-name": "BE 4", 1131 | "pms": "PMS 9223 / 40%", 1132 | "cmykc": "5, 10, 15, 3 / 40%", 1133 | "cmyku": "3, 8, 14, 2 / 40%", 1134 | "id": "color-background-lighter-beige", 1135 | "category": "color", 1136 | "ancestorId": "color-base-beige-200", 1137 | "value": "rgb(246,243,240)", 1138 | "type": "background", 1139 | "item": "lighter-beige" 1140 | }, 1141 | "color-background-light-beige": { 1142 | "name": "Valhallan Blizzard", 1143 | "color-name": "Valhallan Blizzard", 1144 | "rgb": "rgb(241,236,232)", 1145 | "hex": "#f1ece8", 1146 | "internal-name": "BE 3", 1147 | "pms": "PMS 9223 / 60%", 1148 | "cmykc": "5, 10, 15, 3 / 60%", 1149 | "cmyku": "3, 8, 14, 2 / 60%", 1150 | "id": "color-background-light-beige", 1151 | "category": "color", 1152 | "ancestorId": "color-base-beige-300", 1153 | "value": "rgb(241,236,232)", 1154 | "type": "background", 1155 | "item": "light-beige" 1156 | }, 1157 | "color-background-beige": { 1158 | "name": "Desert Storm", 1159 | "color-name": "Desert Storm", 1160 | "rgb": "rgb(237,230,225)", 1161 | "hex": "#ede6e1", 1162 | "internal-name": "BE 2", 1163 | "pmsc": "PMS 9223 / 80%", 1164 | "cmykc": "5, 10, 15, 3 / 80%", 1165 | "cmyku": "3, 8, 14, 2 / 80%", 1166 | "id": "color-background-beige", 1167 | "category": "color", 1168 | "ancestorId": "color-base-beige-400", 1169 | "value": "rgb(237,230,225)", 1170 | "type": "background", 1171 | "item": "beige" 1172 | }, 1173 | "color-background-dark-beige": { 1174 | "name": "Stone Harbour", 1175 | "color-name": "Stone Harbour", 1176 | "rgb": "rgb(232,224,217)", 1177 | "hex": "#e8e0d9", 1178 | "internal-name": "BE 1", 1179 | "pms": "PMS 9223", 1180 | "cmykc": "5, 10, 15, 3", 1181 | "cmyku": "3, 8, 14, 2", 1182 | "ncs": "1005-Y60R", 1183 | "ral": "060 85 05 Champagnerosé", 1184 | "tcx": "12-0000 TCX", 1185 | "id": "color-background-dark-beige", 1186 | "category": "color", 1187 | "ancestorId": "color-base-beige-500", 1188 | "value": "rgb(232,224,217)", 1189 | "type": "background", 1190 | "item": "dark-beige" 1191 | }, 1192 | "color-accent-blue": { 1193 | "name": "Megaman Helmet", 1194 | "color-name": "Megaman Helmet", 1195 | "rgb": "rgb(0,84,240)", 1196 | "hex": "#0054f0", 1197 | "internal-name": "BL 1", 1198 | "pms": "PMS 3005", 1199 | "cmyk": "100,30,0,0", 1200 | "ncs": "S 2565-R80B", 1201 | "ral": "270 40 40 Zauberblau", 1202 | "tcx": "18-4051 TCX", 1203 | "id": "color-accent-blue", 1204 | "category": "color", 1205 | "ancestorId": "color-base-blue-100", 1206 | "value": "rgb(0,84,240)", 1207 | "type": "accent", 1208 | "item": "blue" 1209 | }, 1210 | "color-base-light-blue-100": { 1211 | "name": "Gas Giant", 1212 | "color-name": "Gas Giant", 1213 | "rgb": "rgb(151, 226, 247)", 1214 | "hex": "#97e2f7", 1215 | "internal-name": "CB 3", 1216 | "pmsc": "PMS 291 C", 1217 | "pmsu": "PMS 544 U", 1218 | "cmykc": "35, 0, 2, 0", 1219 | "cmyku": "34, 3, 0, 2", 1220 | "id": "color-base-light-blue-100", 1221 | "category": "color", 1222 | "value": "rgb(151, 226, 247)", 1223 | "type": "base", 1224 | "item": "light-blue", 1225 | "subItem": "100" 1226 | }, 1227 | "color-base-light-blue-200": { 1228 | "name": "Blue Martini", 1229 | "color-name": "Blue Martini", 1230 | "rgb": "rgb(76, 176, 211)", 1231 | "hex": "#4cb0d3", 1232 | "internal-name": "CB 2", 1233 | "pmsc": "PMS 2389 C", 1234 | "pmsu": "PMS 2389 U", 1235 | "cmykc": "68, 13, 12, 0", 1236 | "cmyku": "63, 16, 8, 0", 1237 | "id": "color-base-light-blue-200", 1238 | "category": "color", 1239 | "value": "rgb(76, 176, 211)", 1240 | "type": "base", 1241 | "item": "light-blue", 1242 | "subItem": "200" 1243 | }, 1244 | "color-base-light-blue-300": { 1245 | "name": "Vanity", 1246 | "color-name": "Vanity", 1247 | "rgb": "rgb(83, 146, 178)", 1248 | "hex": "#5392b2", 1249 | "internal-name": "CB 1", 1250 | "pmsc": "PMS 2159 C", 1251 | "pmsu": "PMS 2149 U", 1252 | "cmykc": "70, 37, 18, 10", 1253 | "cmyku": "65, 30, 15, 5", 1254 | "id": "color-base-light-blue-300", 1255 | "category": "color", 1256 | "value": "rgb(83, 146, 178)", 1257 | "type": "base", 1258 | "item": "light-blue", 1259 | "subItem": "300" 1260 | }, 1261 | "color-base-blue-100": { 1262 | "name": "Megaman Helmet", 1263 | "color-name": "Megaman Helmet", 1264 | "rgb": "rgb(0,84,240)", 1265 | "hex": "#0054f0", 1266 | "internal-name": "BL 1", 1267 | "pms": "PMS 3005", 1268 | "cmyk": "100,30,0,0", 1269 | "ncs": "S 2565-R80B", 1270 | "ral": "270 40 40 Zauberblau", 1271 | "tcx": "18-4051 TCX", 1272 | "id": "color-base-blue-100", 1273 | "category": "color", 1274 | "value": "rgb(0,84,240)", 1275 | "type": "base", 1276 | "item": "blue", 1277 | "subItem": "100" 1278 | }, 1279 | "color-base-blue-200": { 1280 | "name": "Bracing Blue", 1281 | "color-name": "Bracing Blue", 1282 | "rgb": "rgb(0, 64, 128)", 1283 | "hex": "#004080", 1284 | "internal-name": "BL 1 Dark", 1285 | "cmyk": "100,50,0,50", 1286 | "id": "color-base-blue-200", 1287 | "category": "color", 1288 | "value": "rgb(0, 64, 128)", 1289 | "type": "base", 1290 | "item": "blue", 1291 | "subItem": "200" 1292 | }, 1293 | "color-base-beige-100": { 1294 | "name": "Doctor", 1295 | "color-name": "Doctor", 1296 | "rgb": "rgb(250,249,247)", 1297 | "hex": "#faf9f7", 1298 | "internal-name": "BE 5", 1299 | "pms": "PMS 9223 / 20%", 1300 | "cmykc": "5, 10, 15, 3 / 20%", 1301 | "cmyku": "3, 8, 14, 2 / 20%", 1302 | "id": "color-base-beige-100", 1303 | "category": "color", 1304 | "value": "rgb(250,249,247)", 1305 | "type": "base", 1306 | "item": "beige", 1307 | "subItem": "100" 1308 | }, 1309 | "color-base-beige-200": { 1310 | "name": "The Speed Of Light", 1311 | "color-name": "The Speed Of Light", 1312 | "rgb": "rgb(246,243,240)", 1313 | "hex": "#f6f3f0", 1314 | "internal-name": "BE 4", 1315 | "pms": "PMS 9223 / 40%", 1316 | "cmykc": "5, 10, 15, 3 / 40%", 1317 | "cmyku": "3, 8, 14, 2 / 40%", 1318 | "id": "color-base-beige-200", 1319 | "category": "color", 1320 | "value": "rgb(246,243,240)", 1321 | "type": "base", 1322 | "item": "beige", 1323 | "subItem": "200" 1324 | }, 1325 | "color-base-beige-300": { 1326 | "name": "Valhallan Blizzard", 1327 | "color-name": "Valhallan Blizzard", 1328 | "rgb": "rgb(241,236,232)", 1329 | "hex": "#f1ece8", 1330 | "internal-name": "BE 3", 1331 | "pms": "PMS 9223 / 60%", 1332 | "cmykc": "5, 10, 15, 3 / 60%", 1333 | "cmyku": "3, 8, 14, 2 / 60%", 1334 | "id": "color-base-beige-300", 1335 | "category": "color", 1336 | "value": "rgb(241,236,232)", 1337 | "type": "base", 1338 | "item": "beige", 1339 | "subItem": "300" 1340 | }, 1341 | "color-base-beige-400": { 1342 | "name": "Desert Storm", 1343 | "color-name": "Desert Storm", 1344 | "rgb": "rgb(237,230,225)", 1345 | "hex": "#ede6e1", 1346 | "internal-name": "BE 2", 1347 | "pmsc": "PMS 9223 / 80%", 1348 | "cmykc": "5, 10, 15, 3 / 80%", 1349 | "cmyku": "3, 8, 14, 2 / 80%", 1350 | "id": "color-base-beige-400", 1351 | "category": "color", 1352 | "value": "rgb(237,230,225)", 1353 | "type": "base", 1354 | "item": "beige", 1355 | "subItem": "400" 1356 | }, 1357 | "color-base-beige-500": { 1358 | "name": "Stone Harbour", 1359 | "color-name": "Stone Harbour", 1360 | "rgb": "rgb(232,224,217)", 1361 | "hex": "#e8e0d9", 1362 | "internal-name": "BE 1", 1363 | "pms": "PMS 9223", 1364 | "cmykc": "5, 10, 15, 3", 1365 | "cmyku": "3, 8, 14, 2", 1366 | "ncs": "1005-Y60R", 1367 | "ral": "060 85 05 Champagnerosé", 1368 | "tcx": "12-0000 TCX", 1369 | "id": "color-base-beige-500", 1370 | "category": "color", 1371 | "value": "rgb(232,224,217)", 1372 | "type": "base", 1373 | "item": "beige", 1374 | "subItem": "500" 1375 | }, 1376 | "color-base-pink-100": { 1377 | "name": "Peach Crayon", 1378 | "color-name": "Peach Crayon", 1379 | "rgb": "rgb(255, 201, 166)", 1380 | "hex": "#ffc9a6", 1381 | "internal-name": "CR 3", 1382 | "pmsc": "PMS 7520 C", 1383 | "pmsu": "PMS 7520 U", 1384 | "cmykc": "0, 20, 25, 5", 1385 | "cmyku": "5, 17, 31, 0", 1386 | "id": "color-base-pink-100", 1387 | "category": "color", 1388 | "value": "rgb(255, 201, 166)", 1389 | "type": "base", 1390 | "item": "pink", 1391 | "subItem": "100" 1392 | }, 1393 | "color-base-pink-200": { 1394 | "name": "Fresh Salmon", 1395 | "color-name": "Fresh Salmon", 1396 | "rgb": "rgb(255, 133, 105)", 1397 | "hex": "#ff8569", 1398 | "internal-name": "CR 2", 1399 | "pmsc": "PMS 486 C", 1400 | "pmsu": "PMS 487 U", 1401 | "cmykc": "0, 53, 48, 0", 1402 | "cmyku": "0, 47, 46, 0", 1403 | "ncs": "S 1050-Y80R", 1404 | "ral": "030 70 40 Flamingorot", 1405 | "tcx": "16-1526 TCX", 1406 | "id": "color-base-pink-200", 1407 | "category": "color", 1408 | "value": "rgb(255, 133, 105)", 1409 | "type": "base", 1410 | "item": "pink", 1411 | "subItem": "200" 1412 | }, 1413 | "color-base-pink-300": { 1414 | "name": "Musk Deer", 1415 | "color-name": "Musk Deer", 1416 | "rgb": "rgb(128, 92, 92)", 1417 | "hex": "#805c5c", 1418 | "internal-name": "CR 1", 1419 | "pmsc": "PMS 7639 C", 1420 | "pmsu": "PMS 4995 U", 1421 | "cmykc": "41, 62, 48, 7", 1422 | "cmyku": "0, 42, 15, 48", 1423 | "ncs": "S 5020-R10B", 1424 | "ral": "360 40 15 Rubingrau", 1425 | "tcx": "18-1612 TCX", 1426 | "id": "color-base-pink-300", 1427 | "category": "color", 1428 | "value": "rgb(128, 92, 92)", 1429 | "type": "base", 1430 | "item": "pink", 1431 | "subItem": "300" 1432 | }, 1433 | "color-base-green-100": { 1434 | "name": "Camarone", 1435 | "color-name": "Camarone", 1436 | "rgb": "rgb(33, 115, 49)", 1437 | "hex": "#217331", 1438 | "internal-name": "green", 1439 | "id": "color-base-green-100", 1440 | "category": "color", 1441 | "value": "rgb(33, 115, 49)", 1442 | "type": "base", 1443 | "item": "green", 1444 | "subItem": "100" 1445 | }, 1446 | "color-base-red-100": { 1447 | "name": "Virtual Boy", 1448 | "color-name": "Virtual Boy", 1449 | "rgb": "rgb(187, 50, 12)", 1450 | "hex": "#bb320c", 1451 | "internal-name": "red", 1452 | "id": "color-base-red-100", 1453 | "category": "color", 1454 | "value": "rgb(187, 50, 12)", 1455 | "type": "base", 1456 | "item": "red", 1457 | "subItem": "100" 1458 | }, 1459 | "color-base-brown-100": { 1460 | "name": "Fozzie Bear", 1461 | "color-name": "Fozzie Bear", 1462 | "rgb": "rgb(110,98,94)", 1463 | "hex": "#6e625e", 1464 | "internal-name": "LB 1", 1465 | "pms": "PMS 7531", 1466 | "cmykc": "15, 27, 36, 51", 1467 | "cmyku": "14, 23, 33, 46", 1468 | "ncs": "6010-Y30R", 1469 | "ral": "060 50 10 Sandsteingrau", 1470 | "tcx": "18-1017 TCX", 1471 | "id": "color-base-brown-100", 1472 | "category": "color", 1473 | "value": "rgb(110,98,94)", 1474 | "type": "base", 1475 | "item": "brown", 1476 | "subItem": "100" 1477 | }, 1478 | "color-base-brown-200": { 1479 | "name": "Black Slug", 1480 | "color-name": "Black Slug", 1481 | "rgb": "rgb(51,30,17)", 1482 | "hex": "#331e11", 1483 | "internal-name": "BR 1", 1484 | "pms": "PMS 2322", 1485 | "cmykc": "32, 72, 99, 81", 1486 | "cmyku": "25, 70, 70, 80", 1487 | "ncs": "S 8010-Y50R", 1488 | "ral": "050 30 10 Obsidianbraun", 1489 | "tcx": "19-0814 TCX", 1490 | "id": "color-base-brown-200", 1491 | "category": "color", 1492 | "value": "rgb(51,30,17)", 1493 | "type": "base", 1494 | "item": "brown", 1495 | "subItem": "200" 1496 | }, 1497 | "color-base-teal-100": { 1498 | "name": "Spearmint Water", 1499 | "color-name": "Spearmint Water", 1500 | "rgb": "rgb(181, 237, 232)", 1501 | "hex": "#b5ede8", 1502 | "internal-name": "CG 3", 1503 | "pmsc": "PMS 7457 C", 1504 | "pmsu": "PMS 5523 U", 1505 | "cmykc": "25, 0, 13, 0", 1506 | "cmyku": "20, 0, 12, 0", 1507 | "id": "color-base-teal-100", 1508 | "category": "color", 1509 | "value": "rgb(181, 237, 232)", 1510 | "type": "base", 1511 | "item": "teal", 1512 | "subItem": "100" 1513 | }, 1514 | "color-base-teal-200": { 1515 | "name": "Tranquil Teal", 1516 | "color-name": "Tranquil Teal", 1517 | "rgb": "rgb(135, 199, 186)", 1518 | "hex": "#87c7ba", 1519 | "internal-name": "CG 2", 1520 | "pmsc": "PMS 564 C", 1521 | "pmsu": "PMS 565 U", 1522 | "cmykc": "53, 0, 32, 0", 1523 | "cmyku": "42, 0, 27, 0", 1524 | "ncs": "S 1030-B50G", 1525 | "ral": "18 80 20 Opalturkis", 1526 | "tcx": "14-5711 TCX", 1527 | "id": "color-base-teal-200", 1528 | "category": "color", 1529 | "value": "rgb(135, 199, 186)", 1530 | "type": "base", 1531 | "item": "teal", 1532 | "subItem": "200" 1533 | }, 1534 | "color-base-teal-300": { 1535 | "name": "Little League", 1536 | "color-name": "Little League", 1537 | "rgb": "rgb(107, 153, 148)", 1538 | "hex": "#6b9994", 1539 | "internal-name": "CG 1", 1540 | "pmsc": "PMS 2211 C", 1541 | "pmsu": "PMS 5493 U", 1542 | "cmykc": "63, 25, 35, 5", 1543 | "cmyku": "47, 6, 20, 20", 1544 | "ncs": "S 4020-B30G", 1545 | "ral": "200 60 15 Waidindigo", 1546 | "tcx": "17-5110 TCX", 1547 | "id": "color-base-teal-300", 1548 | "category": "color", 1549 | "value": "rgb(107, 153, 148)", 1550 | "type": "base", 1551 | "item": "teal", 1552 | "subItem": "300" 1553 | }, 1554 | "color-base-yellow-100": { 1555 | "name": "Swedish Yellow", 1556 | "color-name": "Swedish Yellow", 1557 | "rgb": "rgb(255, 224, 130)", 1558 | "hex": "#ffe082", 1559 | "internal-name": "CY 3", 1560 | "pmsc": "PMS 7402 C", 1561 | "pmsu": "PMS 2001 U", 1562 | "cmykc": "0, 6, 53, 0", 1563 | "cmyku": "0, 3, 48, 0", 1564 | "id": "color-base-yellow-100", 1565 | "category": "color", 1566 | "value": "rgb(255, 224, 130)", 1567 | "type": "base", 1568 | "item": "yellow", 1569 | "subItem": "100" 1570 | }, 1571 | "color-base-yellow-200": { 1572 | "name": "Go Bananas", 1573 | "color-name": "Go Bananas", 1574 | "rgb": "rgb(252, 199, 79)", 1575 | "hex": "#fcc74f", 1576 | "internal-name": "CY 2", 1577 | "pmsc": "PMS 141 C", 1578 | "pmsu": "PMS 7403 U", 1579 | "cmykc": "0, 20, 72, 0", 1580 | "cmyku": "0, 14, 65, 0", 1581 | "ncs": "S 1050-Y10R", 1582 | "ral": "080 80 60 Vollgelb", 1583 | "tcx": "14-0846 TCX", 1584 | "id": "color-base-yellow-200", 1585 | "category": "color", 1586 | "value": "rgb(252, 199, 79)", 1587 | "type": "base", 1588 | "item": "yellow", 1589 | "subItem": "200" 1590 | }, 1591 | "color-base-yellow-300": { 1592 | "name": "Apple Cinnamon", 1593 | "color-name": "Apple Cinnamon", 1594 | "rgb": "rgb(176, 135, 89)", 1595 | "hex": "#b08759", 1596 | "internal-name": "CY 1", 1597 | "pmsc": "PMS 2317 C", 1598 | "pmsu": "PMS 2313 U", 1599 | "cmykc": "35, 48, 70, 5", 1600 | "cmyku": "0, 30, 54, 27", 1601 | "ncs": "S 4030-Y30R", 1602 | "ral": "060 50 30 Senfbraun", 1603 | "tcx": "17-1125 TCX", 1604 | "id": "color-base-yellow-300", 1605 | "category": "color", 1606 | "value": "rgb(176, 135, 89)", 1607 | "type": "base", 1608 | "item": "yellow", 1609 | "subItem": "300" 1610 | }, 1611 | "color-cta": { 1612 | "id": "color-cta", 1613 | "category": "color", 1614 | "ancestorId": "color-accent-blue", 1615 | "value": "rgb(0,84,240)", 1616 | "type": "cta" 1617 | }, 1618 | "color-infographic-dark-red": { 1619 | "name": "Musk Deer", 1620 | "color-name": "Musk Deer", 1621 | "rgb": "rgb(128, 92, 92)", 1622 | "hex": "#805c5c", 1623 | "internal-name": "CR 1", 1624 | "pmsc": "PMS 7639 C", 1625 | "pmsu": "PMS 4995 U", 1626 | "cmykc": "41, 62, 48, 7", 1627 | "cmyku": "0, 42, 15, 48", 1628 | "ncs": "S 5020-R10B", 1629 | "ral": "360 40 15 Rubingrau", 1630 | "tcx": "18-1612 TCX", 1631 | "id": "color-infographic-dark-red", 1632 | "category": "color", 1633 | "ancestorId": "color-base-pink-300", 1634 | "value": "rgb(128, 92, 92)", 1635 | "type": "infographic", 1636 | "item": "dark-red" 1637 | }, 1638 | "color-infographic-red": { 1639 | "name": "Fresh Salmon", 1640 | "color-name": "Fresh Salmon", 1641 | "rgb": "rgb(255, 133, 105)", 1642 | "hex": "#ff8569", 1643 | "internal-name": "CR 2", 1644 | "pmsc": "PMS 486 C", 1645 | "pmsu": "PMS 487 U", 1646 | "cmykc": "0, 53, 48, 0", 1647 | "cmyku": "0, 47, 46, 0", 1648 | "ncs": "S 1050-Y80R", 1649 | "ral": "030 70 40 Flamingorot", 1650 | "tcx": "16-1526 TCX", 1651 | "id": "color-infographic-red", 1652 | "category": "color", 1653 | "ancestorId": "color-base-pink-200", 1654 | "value": "rgb(255, 133, 105)", 1655 | "type": "infographic", 1656 | "item": "red" 1657 | }, 1658 | "color-infographic-light-red": { 1659 | "name": "Peach Crayon", 1660 | "color-name": "Peach Crayon", 1661 | "rgb": "rgb(255, 201, 166)", 1662 | "hex": "#ffc9a6", 1663 | "internal-name": "CR 3", 1664 | "pmsc": "PMS 7520 C", 1665 | "pmsu": "PMS 7520 U", 1666 | "cmykc": "0, 20, 25, 5", 1667 | "cmyku": "5, 17, 31, 0", 1668 | "id": "color-infographic-light-red", 1669 | "category": "color", 1670 | "ancestorId": "color-base-pink-100", 1671 | "value": "rgb(255, 201, 166)", 1672 | "type": "infographic", 1673 | "item": "light-red" 1674 | }, 1675 | "color-infographic-dark-yellow": { 1676 | "name": "Apple Cinnamon", 1677 | "color-name": "Apple Cinnamon", 1678 | "rgb": "rgb(176, 135, 89)", 1679 | "hex": "#b08759", 1680 | "internal-name": "CY 1", 1681 | "pmsc": "PMS 2317 C", 1682 | "pmsu": "PMS 2313 U", 1683 | "cmykc": "35, 48, 70, 5", 1684 | "cmyku": "0, 30, 54, 27", 1685 | "ncs": "S 4030-Y30R", 1686 | "ral": "060 50 30 Senfbraun", 1687 | "tcx": "17-1125 TCX", 1688 | "id": "color-infographic-dark-yellow", 1689 | "category": "color", 1690 | "ancestorId": "color-base-yellow-300", 1691 | "value": "rgb(176, 135, 89)", 1692 | "type": "infographic", 1693 | "item": "dark-yellow" 1694 | }, 1695 | "color-infographic-yellow": { 1696 | "name": "Go Bananas", 1697 | "color-name": "Go Bananas", 1698 | "rgb": "rgb(252, 199, 79)", 1699 | "hex": "#fcc74f", 1700 | "internal-name": "CY 2", 1701 | "pmsc": "PMS 141 C", 1702 | "pmsu": "PMS 7403 U", 1703 | "cmykc": "0, 20, 72, 0", 1704 | "cmyku": "0, 14, 65, 0", 1705 | "ncs": "S 1050-Y10R", 1706 | "ral": "080 80 60 Vollgelb", 1707 | "tcx": "14-0846 TCX", 1708 | "id": "color-infographic-yellow", 1709 | "category": "color", 1710 | "ancestorId": "color-base-yellow-200", 1711 | "value": "rgb(252, 199, 79)", 1712 | "type": "infographic", 1713 | "item": "yellow" 1714 | }, 1715 | "color-infographic-light-yellow": { 1716 | "name": "Swedish Yellow", 1717 | "color-name": "Swedish Yellow", 1718 | "rgb": "rgb(255, 224, 130)", 1719 | "hex": "#ffe082", 1720 | "internal-name": "CY 3", 1721 | "pmsc": "PMS 7402 C", 1722 | "pmsu": "PMS 2001 U", 1723 | "cmykc": "0, 6, 53, 0", 1724 | "cmyku": "0, 3, 48, 0", 1725 | "id": "color-infographic-light-yellow", 1726 | "category": "color", 1727 | "ancestorId": "color-base-yellow-100", 1728 | "value": "rgb(255, 224, 130)", 1729 | "type": "infographic", 1730 | "item": "light-yellow" 1731 | }, 1732 | "color-infographic-dark-green": { 1733 | "name": "Little League", 1734 | "color-name": "Little League", 1735 | "rgb": "rgb(107, 153, 148)", 1736 | "hex": "#6b9994", 1737 | "internal-name": "CG 1", 1738 | "pmsc": "PMS 2211 C", 1739 | "pmsu": "PMS 5493 U", 1740 | "cmykc": "63, 25, 35, 5", 1741 | "cmyku": "47, 6, 20, 20", 1742 | "ncs": "S 4020-B30G", 1743 | "ral": "200 60 15 Waidindigo", 1744 | "tcx": "17-5110 TCX", 1745 | "id": "color-infographic-dark-green", 1746 | "category": "color", 1747 | "ancestorId": "color-base-teal-300", 1748 | "value": "rgb(107, 153, 148)", 1749 | "type": "infographic", 1750 | "item": "dark-green" 1751 | }, 1752 | "color-infographic-green": { 1753 | "name": "Tranquil Teal", 1754 | "color-name": "Tranquil Teal", 1755 | "rgb": "rgb(135, 199, 186)", 1756 | "hex": "#87c7ba", 1757 | "internal-name": "CG 2", 1758 | "pmsc": "PMS 564 C", 1759 | "pmsu": "PMS 565 U", 1760 | "cmykc": "53, 0, 32, 0", 1761 | "cmyku": "42, 0, 27, 0", 1762 | "ncs": "S 1030-B50G", 1763 | "ral": "18 80 20 Opalturkis", 1764 | "tcx": "14-5711 TCX", 1765 | "id": "color-infographic-green", 1766 | "category": "color", 1767 | "ancestorId": "color-base-teal-200", 1768 | "value": "rgb(135, 199, 186)", 1769 | "type": "infographic", 1770 | "item": "green" 1771 | }, 1772 | "color-infographic-light-green": { 1773 | "name": "Spearmint Water", 1774 | "color-name": "Spearmint Water", 1775 | "rgb": "rgb(181, 237, 232)", 1776 | "hex": "#b5ede8", 1777 | "internal-name": "CG 3", 1778 | "pmsc": "PMS 7457 C", 1779 | "pmsu": "PMS 5523 U", 1780 | "cmykc": "25, 0, 13, 0", 1781 | "cmyku": "20, 0, 12, 0", 1782 | "id": "color-infographic-light-green", 1783 | "category": "color", 1784 | "ancestorId": "color-base-teal-100", 1785 | "value": "rgb(181, 237, 232)", 1786 | "type": "infographic", 1787 | "item": "light-green" 1788 | }, 1789 | "color-infographic-dark-blue": { 1790 | "name": "Vanity", 1791 | "color-name": "Vanity", 1792 | "rgb": "rgb(83, 146, 178)", 1793 | "hex": "#5392b2", 1794 | "internal-name": "CB 1", 1795 | "pmsc": "PMS 2159 C", 1796 | "pmsu": "PMS 2149 U", 1797 | "cmykc": "70, 37, 18, 10", 1798 | "cmyku": "65, 30, 15, 5", 1799 | "id": "color-infographic-dark-blue", 1800 | "category": "color", 1801 | "ancestorId": "color-base-light-blue-300", 1802 | "value": "rgb(83, 146, 178)", 1803 | "type": "infographic", 1804 | "item": "dark-blue" 1805 | }, 1806 | "color-infographic-blue": { 1807 | "name": "Blue Martini", 1808 | "color-name": "Blue Martini", 1809 | "rgb": "rgb(76, 176, 211)", 1810 | "hex": "#4cb0d3", 1811 | "internal-name": "CB 2", 1812 | "pmsc": "PMS 2389 C", 1813 | "pmsu": "PMS 2389 U", 1814 | "cmykc": "68, 13, 12, 0", 1815 | "cmyku": "63, 16, 8, 0", 1816 | "id": "color-infographic-blue", 1817 | "category": "color", 1818 | "ancestorId": "color-base-light-blue-200", 1819 | "value": "rgb(76, 176, 211)", 1820 | "type": "infographic", 1821 | "item": "blue" 1822 | }, 1823 | "color-infographic-light-blue": { 1824 | "name": "Gas Giant", 1825 | "color-name": "Gas Giant", 1826 | "rgb": "rgb(151, 226, 247)", 1827 | "hex": "#97e2f7", 1828 | "internal-name": "CB 3", 1829 | "pmsc": "PMS 291 C", 1830 | "pmsu": "PMS 544 U", 1831 | "cmykc": "35, 0, 2, 0", 1832 | "cmyku": "34, 3, 0, 2", 1833 | "id": "color-infographic-light-blue", 1834 | "category": "color", 1835 | "ancestorId": "color-base-light-blue-100", 1836 | "value": "rgb(151, 226, 247)", 1837 | "type": "infographic", 1838 | "item": "light-blue" 1839 | }, 1840 | "color-interaction-dark-blue": { 1841 | "name": "Bracing Blue", 1842 | "color-name": "Bracing Blue", 1843 | "rgb": "rgb(0, 64, 128)", 1844 | "hex": "#004080", 1845 | "internal-name": "BL 1 Dark", 1846 | "cmyk": "100,50,0,50", 1847 | "id": "color-interaction-dark-blue", 1848 | "category": "color", 1849 | "ancestorId": "color-base-blue-200", 1850 | "value": "rgb(0, 64, 128)", 1851 | "type": "interaction", 1852 | "item": "dark-blue" 1853 | }, 1854 | "color-status-red": { 1855 | "name": "Virtual Boy", 1856 | "color-name": "Virtual Boy", 1857 | "rgb": "rgb(187, 50, 12)", 1858 | "hex": "#bb320c", 1859 | "internal-name": "red", 1860 | "id": "color-status-red", 1861 | "category": "color", 1862 | "ancestorId": "color-base-red-100", 1863 | "value": "rgb(187, 50, 12)", 1864 | "type": "status", 1865 | "item": "red" 1866 | }, 1867 | "color-status-green": { 1868 | "name": "Camarone", 1869 | "color-name": "Camarone", 1870 | "rgb": "rgb(33, 115, 49)", 1871 | "hex": "#217331", 1872 | "internal-name": "green", 1873 | "id": "color-status-green", 1874 | "category": "color", 1875 | "ancestorId": "color-base-green-100", 1876 | "value": "rgb(33, 115, 49)", 1877 | "type": "status", 1878 | "item": "green" 1879 | }, 1880 | "color-text-lightest-beige": { 1881 | "name": "Doctor", 1882 | "color-name": "Doctor", 1883 | "rgb": "rgb(250,249,247)", 1884 | "hex": "#faf9f7", 1885 | "internal-name": "BE 5", 1886 | "pms": "PMS 9223 / 20%", 1887 | "cmykc": "5, 10, 15, 3 / 20%", 1888 | "cmyku": "3, 8, 14, 2 / 20%", 1889 | "id": "color-text-lightest-beige", 1890 | "category": "color", 1891 | "ancestorId": "color-base-beige-100", 1892 | "value": "rgb(250,249,247)", 1893 | "type": "text", 1894 | "item": "lightest-beige" 1895 | }, 1896 | "color-text-light-brown": { 1897 | "name": "Fozzie Bear", 1898 | "color-name": "Fozzie Bear", 1899 | "rgb": "rgb(110,98,94)", 1900 | "hex": "#6e625e", 1901 | "internal-name": "LB 1", 1902 | "pms": "PMS 7531", 1903 | "cmykc": "15, 27, 36, 51", 1904 | "cmyku": "14, 23, 33, 46", 1905 | "ncs": "6010-Y30R", 1906 | "ral": "060 50 10 Sandsteingrau", 1907 | "tcx": "18-1017 TCX", 1908 | "id": "color-text-light-brown", 1909 | "category": "color", 1910 | "ancestorId": "color-base-brown-100", 1911 | "value": "rgb(110,98,94)", 1912 | "type": "text", 1913 | "item": "light-brown" 1914 | }, 1915 | "color-text-brown": { 1916 | "name": "Black Slug", 1917 | "color-name": "Black Slug", 1918 | "rgb": "rgb(51,30,17)", 1919 | "hex": "#331e11", 1920 | "internal-name": "BR 1", 1921 | "pms": "PMS 2322", 1922 | "cmykc": "32, 72, 99, 81", 1923 | "cmyku": "25, 70, 70, 80", 1924 | "ncs": "S 8010-Y50R", 1925 | "ral": "050 30 10 Obsidianbraun", 1926 | "tcx": "19-0814 TCX", 1927 | "id": "color-text-brown", 1928 | "category": "color", 1929 | "ancestorId": "color-base-brown-200", 1930 | "value": "rgb(51,30,17)", 1931 | "type": "text", 1932 | "item": "brown" 1933 | }, 1934 | "asset-font-ifsans-variable-name": { 1935 | "id": "asset-font-ifsans-variable-name", 1936 | "category": "asset", 1937 | "value": "If Sans", 1938 | "type": "font", 1939 | "item": "ifsans-variable", 1940 | "subItem": "name" 1941 | }, 1942 | "asset-font-ifsans-variable-eot": { 1943 | "id": "asset-font-ifsans-variable-eot", 1944 | "category": "asset", 1945 | "value": "./fonts/IfSans-Variable.eot", 1946 | "type": "font", 1947 | "item": "ifsans-variable", 1948 | "subItem": "eot" 1949 | }, 1950 | "asset-font-ifsans-variable-otf": { 1951 | "id": "asset-font-ifsans-variable-otf", 1952 | "category": "asset", 1953 | "value": "./fonts/IfSans-Variable.otf", 1954 | "type": "font", 1955 | "item": "ifsans-variable", 1956 | "subItem": "otf" 1957 | }, 1958 | "asset-font-ifsans-variable-ttf": { 1959 | "id": "asset-font-ifsans-variable-ttf", 1960 | "category": "asset", 1961 | "value": "./fonts/IfSans-Variable.ttf", 1962 | "type": "font", 1963 | "item": "ifsans-variable", 1964 | "subItem": "ttf" 1965 | }, 1966 | "asset-font-ifsans-variable-woff": { 1967 | "id": "asset-font-ifsans-variable-woff", 1968 | "category": "asset", 1969 | "value": "./fonts/IfSans-Variable.woff", 1970 | "type": "font", 1971 | "item": "ifsans-variable", 1972 | "subItem": "woff" 1973 | }, 1974 | "asset-font-ifsans-variable-woff2": { 1975 | "id": "asset-font-ifsans-variable-woff2", 1976 | "category": "asset", 1977 | "value": "./fonts/IfSans-Variable.woff2", 1978 | "type": "font", 1979 | "item": "ifsans-variable", 1980 | "subItem": "woff2" 1981 | }, 1982 | "asset-font-ifsans-variable-italic-name": { 1983 | "id": "asset-font-ifsans-variable-italic-name", 1984 | "category": "asset", 1985 | "value": "If Sans Italic", 1986 | "type": "font", 1987 | "item": "ifsans-variable-italic", 1988 | "subItem": "name" 1989 | }, 1990 | "asset-font-ifsans-variable-italic-eot": { 1991 | "id": "asset-font-ifsans-variable-italic-eot", 1992 | "category": "asset", 1993 | "value": "./fonts/IfSans-VariableItalic.eot", 1994 | "type": "font", 1995 | "item": "ifsans-variable-italic", 1996 | "subItem": "eot" 1997 | }, 1998 | "asset-font-ifsans-variable-italic-otf": { 1999 | "id": "asset-font-ifsans-variable-italic-otf", 2000 | "category": "asset", 2001 | "value": "./fonts/IfSans-VariableItalic.otf", 2002 | "type": "font", 2003 | "item": "ifsans-variable-italic", 2004 | "subItem": "otf" 2005 | }, 2006 | "asset-font-ifsans-variable-italic-ttf": { 2007 | "id": "asset-font-ifsans-variable-italic-ttf", 2008 | "category": "asset", 2009 | "value": "./fonts/IfSans-VariableItalic.ttf", 2010 | "type": "font", 2011 | "item": "ifsans-variable-italic", 2012 | "subItem": "ttf" 2013 | }, 2014 | "asset-font-ifsans-variable-italic-woff": { 2015 | "id": "asset-font-ifsans-variable-italic-woff", 2016 | "category": "asset", 2017 | "value": "./fonts/IfSans-VariableItalic.woff", 2018 | "type": "font", 2019 | "item": "ifsans-variable-italic", 2020 | "subItem": "woff" 2021 | }, 2022 | "asset-font-ifsans-variable-italic-woff2": { 2023 | "id": "asset-font-ifsans-variable-italic-woff2", 2024 | "category": "asset", 2025 | "value": "./fonts/IfSans-VariableItalic.woff2", 2026 | "type": "font", 2027 | "item": "ifsans-variable-italic", 2028 | "subItem": "woff2" 2029 | }, 2030 | "asset-font-ifsans-regular-name": { 2031 | "id": "asset-font-ifsans-regular-name", 2032 | "category": "asset", 2033 | "value": "If Sans", 2034 | "type": "font", 2035 | "item": "ifsans-regular", 2036 | "subItem": "name" 2037 | }, 2038 | "asset-font-ifsans-regular-eot": { 2039 | "id": "asset-font-ifsans-regular-eot", 2040 | "category": "asset", 2041 | "value": "./fonts/IfSans-Regular.eot", 2042 | "type": "font", 2043 | "item": "ifsans-regular", 2044 | "subItem": "eot" 2045 | }, 2046 | "asset-font-ifsans-regular-otf": { 2047 | "id": "asset-font-ifsans-regular-otf", 2048 | "category": "asset", 2049 | "value": "./fonts/IfSans-Regular.otf", 2050 | "type": "font", 2051 | "item": "ifsans-regular", 2052 | "subItem": "otf" 2053 | }, 2054 | "asset-font-ifsans-regular-ttf": { 2055 | "id": "asset-font-ifsans-regular-ttf", 2056 | "category": "asset", 2057 | "value": "./fonts/IfSans-Regular.ttf", 2058 | "type": "font", 2059 | "item": "ifsans-regular", 2060 | "subItem": "ttf" 2061 | }, 2062 | "asset-font-ifsans-regular-woff": { 2063 | "id": "asset-font-ifsans-regular-woff", 2064 | "category": "asset", 2065 | "value": "./fonts/IfSans-Regular.woff", 2066 | "type": "font", 2067 | "item": "ifsans-regular", 2068 | "subItem": "woff" 2069 | }, 2070 | "asset-font-ifsans-regular-woff2": { 2071 | "id": "asset-font-ifsans-regular-woff2", 2072 | "category": "asset", 2073 | "value": "./fonts/IfSans-Regular.woff2", 2074 | "type": "font", 2075 | "item": "ifsans-regular", 2076 | "subItem": "woff2" 2077 | }, 2078 | "asset-font-ifsans-thin-name": { 2079 | "id": "asset-font-ifsans-thin-name", 2080 | "category": "asset", 2081 | "value": "If Sans Thin", 2082 | "type": "font", 2083 | "item": "ifsans-thin", 2084 | "subItem": "name" 2085 | }, 2086 | "asset-font-ifsans-thin-eot": { 2087 | "id": "asset-font-ifsans-thin-eot", 2088 | "category": "asset", 2089 | "value": "./fonts/IfSans-Thin.eot", 2090 | "type": "font", 2091 | "item": "ifsans-thin", 2092 | "subItem": "eot" 2093 | }, 2094 | "asset-font-ifsans-thin-otf": { 2095 | "id": "asset-font-ifsans-thin-otf", 2096 | "category": "asset", 2097 | "value": "./fonts/IfSans-Thin.otf", 2098 | "type": "font", 2099 | "item": "ifsans-thin", 2100 | "subItem": "otf" 2101 | }, 2102 | "asset-font-ifsans-thin-ttf": { 2103 | "id": "asset-font-ifsans-thin-ttf", 2104 | "category": "asset", 2105 | "value": "./fonts/IfSans-Thin.ttf", 2106 | "type": "font", 2107 | "item": "ifsans-thin", 2108 | "subItem": "ttf" 2109 | }, 2110 | "asset-font-ifsans-thin-woff": { 2111 | "id": "asset-font-ifsans-thin-woff", 2112 | "category": "asset", 2113 | "value": "./fonts/IfSans-Thin.woff", 2114 | "type": "font", 2115 | "item": "ifsans-thin", 2116 | "subItem": "woff" 2117 | }, 2118 | "asset-font-ifsans-thin-woff2": { 2119 | "id": "asset-font-ifsans-thin-woff2", 2120 | "category": "asset", 2121 | "value": "./fonts/IfSans-Thin.woff2", 2122 | "type": "font", 2123 | "item": "ifsans-thin", 2124 | "subItem": "woff2" 2125 | }, 2126 | "asset-font-ifsans-light-name": { 2127 | "id": "asset-font-ifsans-light-name", 2128 | "category": "asset", 2129 | "value": "If Sans Light", 2130 | "type": "font", 2131 | "item": "ifsans-light", 2132 | "subItem": "name" 2133 | }, 2134 | "asset-font-ifsans-light-eot": { 2135 | "id": "asset-font-ifsans-light-eot", 2136 | "category": "asset", 2137 | "value": "./fonts/IfSans-Light.eot", 2138 | "type": "font", 2139 | "item": "ifsans-light", 2140 | "subItem": "eot" 2141 | }, 2142 | "asset-font-ifsans-light-otf": { 2143 | "id": "asset-font-ifsans-light-otf", 2144 | "category": "asset", 2145 | "value": "./fonts/IfSans-Light.otf", 2146 | "type": "font", 2147 | "item": "ifsans-light", 2148 | "subItem": "otf" 2149 | }, 2150 | "asset-font-ifsans-light-ttf": { 2151 | "id": "asset-font-ifsans-light-ttf", 2152 | "category": "asset", 2153 | "value": "./fonts/IfSans-Light.ttf", 2154 | "type": "font", 2155 | "item": "ifsans-light", 2156 | "subItem": "ttf" 2157 | }, 2158 | "asset-font-ifsans-light-woff": { 2159 | "id": "asset-font-ifsans-light-woff", 2160 | "category": "asset", 2161 | "value": "./fonts/IfSans-Light.woff", 2162 | "type": "font", 2163 | "item": "ifsans-light", 2164 | "subItem": "woff" 2165 | }, 2166 | "asset-font-ifsans-light-woff2": { 2167 | "id": "asset-font-ifsans-light-woff2", 2168 | "category": "asset", 2169 | "value": "./fonts/IfSans-Light.woff2", 2170 | "type": "font", 2171 | "item": "ifsans-light", 2172 | "subItem": "woff2" 2173 | }, 2174 | "asset-font-ifsans-medium-name": { 2175 | "id": "asset-font-ifsans-medium-name", 2176 | "category": "asset", 2177 | "value": "If Sans Medium", 2178 | "type": "font", 2179 | "item": "ifsans-medium", 2180 | "subItem": "name" 2181 | }, 2182 | "asset-font-ifsans-medium-eot": { 2183 | "id": "asset-font-ifsans-medium-eot", 2184 | "category": "asset", 2185 | "value": "./fonts/IfSans-Medium.eot", 2186 | "type": "font", 2187 | "item": "ifsans-medium", 2188 | "subItem": "eot" 2189 | }, 2190 | "asset-font-ifsans-medium-otf": { 2191 | "id": "asset-font-ifsans-medium-otf", 2192 | "category": "asset", 2193 | "value": "./fonts/IfSans-Medium.otf", 2194 | "type": "font", 2195 | "item": "ifsans-medium", 2196 | "subItem": "otf" 2197 | }, 2198 | "asset-font-ifsans-medium-ttf": { 2199 | "id": "asset-font-ifsans-medium-ttf", 2200 | "category": "asset", 2201 | "value": "./fonts/IfSans-Medium.ttf", 2202 | "type": "font", 2203 | "item": "ifsans-medium", 2204 | "subItem": "ttf" 2205 | }, 2206 | "asset-font-ifsans-medium-woff": { 2207 | "id": "asset-font-ifsans-medium-woff", 2208 | "category": "asset", 2209 | "value": "./fonts/IfSans-Medium.woff", 2210 | "type": "font", 2211 | "item": "ifsans-medium", 2212 | "subItem": "woff" 2213 | }, 2214 | "asset-font-ifsans-medium-woff2": { 2215 | "id": "asset-font-ifsans-medium-woff2", 2216 | "category": "asset", 2217 | "value": "./fonts/IfSans-Medium.woff2", 2218 | "type": "font", 2219 | "item": "ifsans-medium", 2220 | "subItem": "woff2" 2221 | }, 2222 | "asset-font-ifsans-bold-name": { 2223 | "id": "asset-font-ifsans-bold-name", 2224 | "category": "asset", 2225 | "value": "If Sans Bold", 2226 | "type": "font", 2227 | "item": "ifsans-bold", 2228 | "subItem": "name" 2229 | }, 2230 | "asset-font-ifsans-bold-eot": { 2231 | "id": "asset-font-ifsans-bold-eot", 2232 | "category": "asset", 2233 | "value": "./fonts/IfSans-Bold.eot", 2234 | "type": "font", 2235 | "item": "ifsans-bold", 2236 | "subItem": "eot" 2237 | }, 2238 | "asset-font-ifsans-bold-otf": { 2239 | "id": "asset-font-ifsans-bold-otf", 2240 | "category": "asset", 2241 | "value": "./fonts/IfSans-Bold.otf", 2242 | "type": "font", 2243 | "item": "ifsans-bold", 2244 | "subItem": "otf" 2245 | }, 2246 | "asset-font-ifsans-bold-ttf": { 2247 | "id": "asset-font-ifsans-bold-ttf", 2248 | "category": "asset", 2249 | "value": "./fonts/IfSans-Bold.ttf", 2250 | "type": "font", 2251 | "item": "ifsans-bold", 2252 | "subItem": "ttf" 2253 | }, 2254 | "asset-font-ifsans-bold-woff": { 2255 | "id": "asset-font-ifsans-bold-woff", 2256 | "category": "asset", 2257 | "value": "./fonts/IfSans-Bold.woff", 2258 | "type": "font", 2259 | "item": "ifsans-bold", 2260 | "subItem": "woff" 2261 | }, 2262 | "asset-font-ifsans-bold-woff2": { 2263 | "id": "asset-font-ifsans-bold-woff2", 2264 | "category": "asset", 2265 | "value": "./fonts/IfSans-Bold.woff2", 2266 | "type": "font", 2267 | "item": "ifsans-bold", 2268 | "subItem": "woff2" 2269 | }, 2270 | "asset-font-ifsans-regular-italic-name": { 2271 | "id": "asset-font-ifsans-regular-italic-name", 2272 | "category": "asset", 2273 | "value": "If Sans Italic", 2274 | "type": "font", 2275 | "item": "ifsans-regular-italic", 2276 | "subItem": "name" 2277 | }, 2278 | "asset-font-ifsans-regular-italic-eot": { 2279 | "id": "asset-font-ifsans-regular-italic-eot", 2280 | "category": "asset", 2281 | "value": "./fonts/IfSans-Italic.eot", 2282 | "type": "font", 2283 | "item": "ifsans-regular-italic", 2284 | "subItem": "eot" 2285 | }, 2286 | "asset-font-ifsans-regular-italic-otf": { 2287 | "id": "asset-font-ifsans-regular-italic-otf", 2288 | "category": "asset", 2289 | "value": "./fonts/IfSans-Italic.otf", 2290 | "type": "font", 2291 | "item": "ifsans-regular-italic", 2292 | "subItem": "otf" 2293 | }, 2294 | "asset-font-ifsans-regular-italic-ttf": { 2295 | "id": "asset-font-ifsans-regular-italic-ttf", 2296 | "category": "asset", 2297 | "value": "./fonts/IfSans-Italic.ttf", 2298 | "type": "font", 2299 | "item": "ifsans-regular-italic", 2300 | "subItem": "ttf" 2301 | }, 2302 | "asset-font-ifsans-regular-italic-woff": { 2303 | "id": "asset-font-ifsans-regular-italic-woff", 2304 | "category": "asset", 2305 | "value": "./fonts/IfSans-Italic.woff", 2306 | "type": "font", 2307 | "item": "ifsans-regular-italic", 2308 | "subItem": "woff" 2309 | }, 2310 | "asset-font-ifsans-regular-italic-woff2": { 2311 | "id": "asset-font-ifsans-regular-italic-woff2", 2312 | "category": "asset", 2313 | "value": "./fonts/IfSans-Italic.woff2", 2314 | "type": "font", 2315 | "item": "ifsans-regular-italic", 2316 | "subItem": "woff2" 2317 | }, 2318 | "asset-font-ifsans-thin-italic-name": { 2319 | "id": "asset-font-ifsans-thin-italic-name", 2320 | "category": "asset", 2321 | "value": "If Sans Thin Italic", 2322 | "type": "font", 2323 | "item": "ifsans-thin-italic", 2324 | "subItem": "name" 2325 | }, 2326 | "asset-font-ifsans-thin-italic-eot": { 2327 | "id": "asset-font-ifsans-thin-italic-eot", 2328 | "category": "asset", 2329 | "value": "./fonts/IfSans-ThinItalic.eot", 2330 | "type": "font", 2331 | "item": "ifsans-thin-italic", 2332 | "subItem": "eot" 2333 | }, 2334 | "asset-font-ifsans-thin-italic-otf": { 2335 | "id": "asset-font-ifsans-thin-italic-otf", 2336 | "category": "asset", 2337 | "value": "./fonts/IfSans-ThinItalic.otf", 2338 | "type": "font", 2339 | "item": "ifsans-thin-italic", 2340 | "subItem": "otf" 2341 | }, 2342 | "asset-font-ifsans-thin-italic-ttf": { 2343 | "id": "asset-font-ifsans-thin-italic-ttf", 2344 | "category": "asset", 2345 | "value": "./fonts/IfSans-ThinItalic.ttf", 2346 | "type": "font", 2347 | "item": "ifsans-thin-italic", 2348 | "subItem": "ttf" 2349 | }, 2350 | "asset-font-ifsans-thin-italic-woff": { 2351 | "id": "asset-font-ifsans-thin-italic-woff", 2352 | "category": "asset", 2353 | "value": "./fonts/IfSans-ThinItalic.woff", 2354 | "type": "font", 2355 | "item": "ifsans-thin-italic", 2356 | "subItem": "woff" 2357 | }, 2358 | "asset-font-ifsans-thin-italic-woff2": { 2359 | "id": "asset-font-ifsans-thin-italic-woff2", 2360 | "category": "asset", 2361 | "value": "./fonts/IfSans-ThinItalic.woff2", 2362 | "type": "font", 2363 | "item": "ifsans-thin-italic", 2364 | "subItem": "woff2" 2365 | }, 2366 | "asset-font-ifsans-light-italic-name": { 2367 | "id": "asset-font-ifsans-light-italic-name", 2368 | "category": "asset", 2369 | "value": "If Sans Light Italic", 2370 | "type": "font", 2371 | "item": "ifsans-light-italic", 2372 | "subItem": "name" 2373 | }, 2374 | "asset-font-ifsans-light-italic-eot": { 2375 | "id": "asset-font-ifsans-light-italic-eot", 2376 | "category": "asset", 2377 | "value": "./fonts/IfSans-LightItalic.eot", 2378 | "type": "font", 2379 | "item": "ifsans-light-italic", 2380 | "subItem": "eot" 2381 | }, 2382 | "asset-font-ifsans-light-italic-otf": { 2383 | "id": "asset-font-ifsans-light-italic-otf", 2384 | "category": "asset", 2385 | "value": "./fonts/IfSans-LightItalic.otf", 2386 | "type": "font", 2387 | "item": "ifsans-light-italic", 2388 | "subItem": "otf" 2389 | }, 2390 | "asset-font-ifsans-light-italic-ttf": { 2391 | "id": "asset-font-ifsans-light-italic-ttf", 2392 | "category": "asset", 2393 | "value": "./fonts/IfSans-LightItalic.ttf", 2394 | "type": "font", 2395 | "item": "ifsans-light-italic", 2396 | "subItem": "ttf" 2397 | }, 2398 | "asset-font-ifsans-light-italic-woff": { 2399 | "id": "asset-font-ifsans-light-italic-woff", 2400 | "category": "asset", 2401 | "value": "./fonts/IfSans-LightItalic.woff", 2402 | "type": "font", 2403 | "item": "ifsans-light-italic", 2404 | "subItem": "woff" 2405 | }, 2406 | "asset-font-ifsans-light-italic-woff2": { 2407 | "id": "asset-font-ifsans-light-italic-woff2", 2408 | "category": "asset", 2409 | "value": "./fonts/IfSans-LightItalic.woff2", 2410 | "type": "font", 2411 | "item": "ifsans-light-italic", 2412 | "subItem": "woff2" 2413 | }, 2414 | "asset-font-ifsans-medium-italic-name": { 2415 | "id": "asset-font-ifsans-medium-italic-name", 2416 | "category": "asset", 2417 | "value": "If Sans Medium Italic", 2418 | "type": "font", 2419 | "item": "ifsans-medium-italic", 2420 | "subItem": "name" 2421 | }, 2422 | "asset-font-ifsans-medium-italic-eot": { 2423 | "id": "asset-font-ifsans-medium-italic-eot", 2424 | "category": "asset", 2425 | "value": "./fonts/IfSans-MediumItalic.eot", 2426 | "type": "font", 2427 | "item": "ifsans-medium-italic", 2428 | "subItem": "eot" 2429 | }, 2430 | "asset-font-ifsans-medium-italic-otf": { 2431 | "id": "asset-font-ifsans-medium-italic-otf", 2432 | "category": "asset", 2433 | "value": "./fonts/IfSans-MediumItalic.otf", 2434 | "type": "font", 2435 | "item": "ifsans-medium-italic", 2436 | "subItem": "otf" 2437 | }, 2438 | "asset-font-ifsans-medium-italic-ttf": { 2439 | "id": "asset-font-ifsans-medium-italic-ttf", 2440 | "category": "asset", 2441 | "value": "./fonts/IfSans-MediumItalic.ttf", 2442 | "type": "font", 2443 | "item": "ifsans-medium-italic", 2444 | "subItem": "ttf" 2445 | }, 2446 | "asset-font-ifsans-medium-italic-woff": { 2447 | "id": "asset-font-ifsans-medium-italic-woff", 2448 | "category": "asset", 2449 | "value": "./fonts/IfSans-MediumItalic.woff", 2450 | "type": "font", 2451 | "item": "ifsans-medium-italic", 2452 | "subItem": "woff" 2453 | }, 2454 | "asset-font-ifsans-medium-italic-woff2": { 2455 | "id": "asset-font-ifsans-medium-italic-woff2", 2456 | "category": "asset", 2457 | "value": "./fonts/IfSans-MediumItalic.woff2", 2458 | "type": "font", 2459 | "item": "ifsans-medium-italic", 2460 | "subItem": "woff2" 2461 | }, 2462 | "asset-font-ifsans-bold-italic-name": { 2463 | "id": "asset-font-ifsans-bold-italic-name", 2464 | "category": "asset", 2465 | "value": "If Sans Bold Italic", 2466 | "type": "font", 2467 | "item": "ifsans-bold-italic", 2468 | "subItem": "name" 2469 | }, 2470 | "asset-font-ifsans-bold-italic-eot": { 2471 | "id": "asset-font-ifsans-bold-italic-eot", 2472 | "category": "asset", 2473 | "value": "./fonts/IfSans-BoldItalic.eot", 2474 | "type": "font", 2475 | "item": "ifsans-bold-italic", 2476 | "subItem": "eot" 2477 | }, 2478 | "asset-font-ifsans-bold-italic-otf": { 2479 | "id": "asset-font-ifsans-bold-italic-otf", 2480 | "category": "asset", 2481 | "value": "./fonts/IfSans-BoldItalic.otf", 2482 | "type": "font", 2483 | "item": "ifsans-bold-italic", 2484 | "subItem": "otf" 2485 | }, 2486 | "asset-font-ifsans-bold-italic-ttf": { 2487 | "id": "asset-font-ifsans-bold-italic-ttf", 2488 | "category": "asset", 2489 | "value": "./fonts/IfSans-BoldItalic.ttf", 2490 | "type": "font", 2491 | "item": "ifsans-bold-italic", 2492 | "subItem": "ttf" 2493 | }, 2494 | "asset-font-ifsans-bold-italic-woff": { 2495 | "id": "asset-font-ifsans-bold-italic-woff", 2496 | "category": "asset", 2497 | "value": "./fonts/IfSans-BoldItalic.woff", 2498 | "type": "font", 2499 | "item": "ifsans-bold-italic", 2500 | "subItem": "woff" 2501 | }, 2502 | "asset-font-ifsans-bold-italic-woff2": { 2503 | "id": "asset-font-ifsans-bold-italic-woff2", 2504 | "category": "asset", 2505 | "value": "./fonts/IfSans-BoldItalic.woff2", 2506 | "type": "font", 2507 | "item": "ifsans-bold-italic", 2508 | "subItem": "woff2" 2509 | }, 2510 | "asset-font-ifsans-variable-thin-name": { 2511 | "id": "asset-font-ifsans-variable-thin-name", 2512 | "category": "asset", 2513 | "ancestorId": "asset-font-ifsans-thin-name", 2514 | "value": "If Sans Thin", 2515 | "type": "font", 2516 | "item": "ifsans-variable-thin", 2517 | "subItem": "name" 2518 | }, 2519 | "asset-font-ifsans-variable-thin-eot": { 2520 | "id": "asset-font-ifsans-variable-thin-eot", 2521 | "category": "asset", 2522 | "ancestorId": "asset-font-ifsans-variable-eot", 2523 | "value": "./fonts/IfSans-Variable.eot", 2524 | "type": "font", 2525 | "item": "ifsans-variable-thin", 2526 | "subItem": "eot" 2527 | }, 2528 | "asset-font-ifsans-variable-thin-otf": { 2529 | "id": "asset-font-ifsans-variable-thin-otf", 2530 | "category": "asset", 2531 | "ancestorId": "asset-font-ifsans-variable-otf", 2532 | "value": "./fonts/IfSans-Variable.otf", 2533 | "type": "font", 2534 | "item": "ifsans-variable-thin", 2535 | "subItem": "otf" 2536 | }, 2537 | "asset-font-ifsans-variable-thin-ttf": { 2538 | "id": "asset-font-ifsans-variable-thin-ttf", 2539 | "category": "asset", 2540 | "ancestorId": "asset-font-ifsans-variable-ttf", 2541 | "value": "./fonts/IfSans-Variable.ttf", 2542 | "type": "font", 2543 | "item": "ifsans-variable-thin", 2544 | "subItem": "ttf" 2545 | }, 2546 | "asset-font-ifsans-variable-thin-woff": { 2547 | "id": "asset-font-ifsans-variable-thin-woff", 2548 | "category": "asset", 2549 | "ancestorId": "asset-font-ifsans-variable-woff", 2550 | "value": "./fonts/IfSans-Variable.woff", 2551 | "type": "font", 2552 | "item": "ifsans-variable-thin", 2553 | "subItem": "woff" 2554 | }, 2555 | "asset-font-ifsans-variable-thin-woff2": { 2556 | "id": "asset-font-ifsans-variable-thin-woff2", 2557 | "category": "asset", 2558 | "ancestorId": "asset-font-ifsans-variable-woff2", 2559 | "value": "./fonts/IfSans-Variable.woff2", 2560 | "type": "font", 2561 | "item": "ifsans-variable-thin", 2562 | "subItem": "woff2" 2563 | }, 2564 | "asset-font-ifsans-variable-light-name": { 2565 | "id": "asset-font-ifsans-variable-light-name", 2566 | "category": "asset", 2567 | "ancestorId": "asset-font-ifsans-light-name", 2568 | "value": "If Sans Light", 2569 | "type": "font", 2570 | "item": "ifsans-variable-light", 2571 | "subItem": "name" 2572 | }, 2573 | "asset-font-ifsans-variable-light-eot": { 2574 | "id": "asset-font-ifsans-variable-light-eot", 2575 | "category": "asset", 2576 | "ancestorId": "asset-font-ifsans-variable-eot", 2577 | "value": "./fonts/IfSans-Variable.eot", 2578 | "type": "font", 2579 | "item": "ifsans-variable-light", 2580 | "subItem": "eot" 2581 | }, 2582 | "asset-font-ifsans-variable-light-otf": { 2583 | "id": "asset-font-ifsans-variable-light-otf", 2584 | "category": "asset", 2585 | "ancestorId": "asset-font-ifsans-variable-otf", 2586 | "value": "./fonts/IfSans-Variable.otf", 2587 | "type": "font", 2588 | "item": "ifsans-variable-light", 2589 | "subItem": "otf" 2590 | }, 2591 | "asset-font-ifsans-variable-light-ttf": { 2592 | "id": "asset-font-ifsans-variable-light-ttf", 2593 | "category": "asset", 2594 | "ancestorId": "asset-font-ifsans-variable-ttf", 2595 | "value": "./fonts/IfSans-Variable.ttf", 2596 | "type": "font", 2597 | "item": "ifsans-variable-light", 2598 | "subItem": "ttf" 2599 | }, 2600 | "asset-font-ifsans-variable-light-woff": { 2601 | "id": "asset-font-ifsans-variable-light-woff", 2602 | "category": "asset", 2603 | "ancestorId": "asset-font-ifsans-variable-woff", 2604 | "value": "./fonts/IfSans-Variable.woff", 2605 | "type": "font", 2606 | "item": "ifsans-variable-light", 2607 | "subItem": "woff" 2608 | }, 2609 | "asset-font-ifsans-variable-light-woff2": { 2610 | "id": "asset-font-ifsans-variable-light-woff2", 2611 | "category": "asset", 2612 | "ancestorId": "asset-font-ifsans-variable-woff2", 2613 | "value": "./fonts/IfSans-Variable.woff2", 2614 | "type": "font", 2615 | "item": "ifsans-variable-light", 2616 | "subItem": "woff2" 2617 | }, 2618 | "asset-font-ifsans-variable-medium-name": { 2619 | "id": "asset-font-ifsans-variable-medium-name", 2620 | "category": "asset", 2621 | "ancestorId": "asset-font-ifsans-medium-name", 2622 | "value": "If Sans Medium", 2623 | "type": "font", 2624 | "item": "ifsans-variable-medium", 2625 | "subItem": "name" 2626 | }, 2627 | "asset-font-ifsans-variable-medium-eot": { 2628 | "id": "asset-font-ifsans-variable-medium-eot", 2629 | "category": "asset", 2630 | "ancestorId": "asset-font-ifsans-variable-eot", 2631 | "value": "./fonts/IfSans-Variable.eot", 2632 | "type": "font", 2633 | "item": "ifsans-variable-medium", 2634 | "subItem": "eot" 2635 | }, 2636 | "asset-font-ifsans-variable-medium-otf": { 2637 | "id": "asset-font-ifsans-variable-medium-otf", 2638 | "category": "asset", 2639 | "ancestorId": "asset-font-ifsans-variable-otf", 2640 | "value": "./fonts/IfSans-Variable.otf", 2641 | "type": "font", 2642 | "item": "ifsans-variable-medium", 2643 | "subItem": "otf" 2644 | }, 2645 | "asset-font-ifsans-variable-medium-ttf": { 2646 | "id": "asset-font-ifsans-variable-medium-ttf", 2647 | "category": "asset", 2648 | "ancestorId": "asset-font-ifsans-variable-ttf", 2649 | "value": "./fonts/IfSans-Variable.ttf", 2650 | "type": "font", 2651 | "item": "ifsans-variable-medium", 2652 | "subItem": "ttf" 2653 | }, 2654 | "asset-font-ifsans-variable-medium-woff": { 2655 | "id": "asset-font-ifsans-variable-medium-woff", 2656 | "category": "asset", 2657 | "ancestorId": "asset-font-ifsans-variable-woff", 2658 | "value": "./fonts/IfSans-Variable.woff", 2659 | "type": "font", 2660 | "item": "ifsans-variable-medium", 2661 | "subItem": "woff" 2662 | }, 2663 | "asset-font-ifsans-variable-medium-woff2": { 2664 | "id": "asset-font-ifsans-variable-medium-woff2", 2665 | "category": "asset", 2666 | "ancestorId": "asset-font-ifsans-variable-woff2", 2667 | "value": "./fonts/IfSans-Variable.woff2", 2668 | "type": "font", 2669 | "item": "ifsans-variable-medium", 2670 | "subItem": "woff2" 2671 | }, 2672 | "asset-font-ifsans-variable-bold-name": { 2673 | "id": "asset-font-ifsans-variable-bold-name", 2674 | "category": "asset", 2675 | "ancestorId": "asset-font-ifsans-bold-name", 2676 | "value": "If Sans Bold", 2677 | "type": "font", 2678 | "item": "ifsans-variable-bold", 2679 | "subItem": "name" 2680 | }, 2681 | "asset-font-ifsans-variable-bold-eot": { 2682 | "id": "asset-font-ifsans-variable-bold-eot", 2683 | "category": "asset", 2684 | "ancestorId": "asset-font-ifsans-variable-eot", 2685 | "value": "./fonts/IfSans-Variable.eot", 2686 | "type": "font", 2687 | "item": "ifsans-variable-bold", 2688 | "subItem": "eot" 2689 | }, 2690 | "asset-font-ifsans-variable-bold-otf": { 2691 | "id": "asset-font-ifsans-variable-bold-otf", 2692 | "category": "asset", 2693 | "ancestorId": "asset-font-ifsans-variable-otf", 2694 | "value": "./fonts/IfSans-Variable.otf", 2695 | "type": "font", 2696 | "item": "ifsans-variable-bold", 2697 | "subItem": "otf" 2698 | }, 2699 | "asset-font-ifsans-variable-bold-ttf": { 2700 | "id": "asset-font-ifsans-variable-bold-ttf", 2701 | "category": "asset", 2702 | "ancestorId": "asset-font-ifsans-variable-ttf", 2703 | "value": "./fonts/IfSans-Variable.ttf", 2704 | "type": "font", 2705 | "item": "ifsans-variable-bold", 2706 | "subItem": "ttf" 2707 | }, 2708 | "asset-font-ifsans-variable-bold-woff": { 2709 | "id": "asset-font-ifsans-variable-bold-woff", 2710 | "category": "asset", 2711 | "ancestorId": "asset-font-ifsans-variable-woff", 2712 | "value": "./fonts/IfSans-Variable.woff", 2713 | "type": "font", 2714 | "item": "ifsans-variable-bold", 2715 | "subItem": "woff" 2716 | }, 2717 | "asset-font-ifsans-variable-bold-woff2": { 2718 | "id": "asset-font-ifsans-variable-bold-woff2", 2719 | "category": "asset", 2720 | "ancestorId": "asset-font-ifsans-variable-woff2", 2721 | "value": "./fonts/IfSans-Variable.woff2", 2722 | "type": "font", 2723 | "item": "ifsans-variable-bold", 2724 | "subItem": "woff2" 2725 | }, 2726 | "asset-font-ifsans-variable-thin-italic-name": { 2727 | "id": "asset-font-ifsans-variable-thin-italic-name", 2728 | "category": "asset", 2729 | "ancestorId": "asset-font-ifsans-thin-italic-name", 2730 | "value": "If Sans Thin Italic", 2731 | "type": "font", 2732 | "item": "ifsans-variable-thin-italic", 2733 | "subItem": "name" 2734 | }, 2735 | "asset-font-ifsans-variable-thin-italic-eot": { 2736 | "id": "asset-font-ifsans-variable-thin-italic-eot", 2737 | "category": "asset", 2738 | "ancestorId": "asset-font-ifsans-variable-italic-eot", 2739 | "value": "./fonts/IfSans-VariableItalic.eot", 2740 | "type": "font", 2741 | "item": "ifsans-variable-thin-italic", 2742 | "subItem": "eot" 2743 | }, 2744 | "asset-font-ifsans-variable-thin-italic-otf": { 2745 | "id": "asset-font-ifsans-variable-thin-italic-otf", 2746 | "category": "asset", 2747 | "ancestorId": "asset-font-ifsans-variable-italic-otf", 2748 | "value": "./fonts/IfSans-VariableItalic.otf", 2749 | "type": "font", 2750 | "item": "ifsans-variable-thin-italic", 2751 | "subItem": "otf" 2752 | }, 2753 | "asset-font-ifsans-variable-thin-italic-ttf": { 2754 | "id": "asset-font-ifsans-variable-thin-italic-ttf", 2755 | "category": "asset", 2756 | "ancestorId": "asset-font-ifsans-variable-italic-ttf", 2757 | "value": "./fonts/IfSans-VariableItalic.ttf", 2758 | "type": "font", 2759 | "item": "ifsans-variable-thin-italic", 2760 | "subItem": "ttf" 2761 | }, 2762 | "asset-font-ifsans-variable-thin-italic-woff": { 2763 | "id": "asset-font-ifsans-variable-thin-italic-woff", 2764 | "category": "asset", 2765 | "ancestorId": "asset-font-ifsans-variable-italic-woff", 2766 | "value": "./fonts/IfSans-VariableItalic.woff", 2767 | "type": "font", 2768 | "item": "ifsans-variable-thin-italic", 2769 | "subItem": "woff" 2770 | }, 2771 | "asset-font-ifsans-variable-thin-italic-woff2": { 2772 | "id": "asset-font-ifsans-variable-thin-italic-woff2", 2773 | "category": "asset", 2774 | "ancestorId": "asset-font-ifsans-variable-italic-woff2", 2775 | "value": "./fonts/IfSans-VariableItalic.woff2", 2776 | "type": "font", 2777 | "item": "ifsans-variable-thin-italic", 2778 | "subItem": "woff2" 2779 | }, 2780 | "asset-font-ifsans-variable-light-italic-name": { 2781 | "id": "asset-font-ifsans-variable-light-italic-name", 2782 | "category": "asset", 2783 | "ancestorId": "asset-font-ifsans-light-italic-name", 2784 | "value": "If Sans Light Italic", 2785 | "type": "font", 2786 | "item": "ifsans-variable-light-italic", 2787 | "subItem": "name" 2788 | }, 2789 | "asset-font-ifsans-variable-light-italic-eot": { 2790 | "id": "asset-font-ifsans-variable-light-italic-eot", 2791 | "category": "asset", 2792 | "ancestorId": "asset-font-ifsans-variable-italic-eot", 2793 | "value": "./fonts/IfSans-VariableItalic.eot", 2794 | "type": "font", 2795 | "item": "ifsans-variable-light-italic", 2796 | "subItem": "eot" 2797 | }, 2798 | "asset-font-ifsans-variable-light-italic-otf": { 2799 | "id": "asset-font-ifsans-variable-light-italic-otf", 2800 | "category": "asset", 2801 | "ancestorId": "asset-font-ifsans-variable-italic-otf", 2802 | "value": "./fonts/IfSans-VariableItalic.otf", 2803 | "type": "font", 2804 | "item": "ifsans-variable-light-italic", 2805 | "subItem": "otf" 2806 | }, 2807 | "asset-font-ifsans-variable-light-italic-ttf": { 2808 | "id": "asset-font-ifsans-variable-light-italic-ttf", 2809 | "category": "asset", 2810 | "ancestorId": "asset-font-ifsans-variable-italic-ttf", 2811 | "value": "./fonts/IfSans-VariableItalic.ttf", 2812 | "type": "font", 2813 | "item": "ifsans-variable-light-italic", 2814 | "subItem": "ttf" 2815 | }, 2816 | "asset-font-ifsans-variable-light-italic-woff": { 2817 | "id": "asset-font-ifsans-variable-light-italic-woff", 2818 | "category": "asset", 2819 | "ancestorId": "asset-font-ifsans-variable-italic-woff", 2820 | "value": "./fonts/IfSans-VariableItalic.woff", 2821 | "type": "font", 2822 | "item": "ifsans-variable-light-italic", 2823 | "subItem": "woff" 2824 | }, 2825 | "asset-font-ifsans-variable-light-italic-woff2": { 2826 | "id": "asset-font-ifsans-variable-light-italic-woff2", 2827 | "category": "asset", 2828 | "ancestorId": "asset-font-ifsans-variable-italic-woff2", 2829 | "value": "./fonts/IfSans-VariableItalic.woff2", 2830 | "type": "font", 2831 | "item": "ifsans-variable-light-italic", 2832 | "subItem": "woff2" 2833 | }, 2834 | "asset-font-ifsans-variable-medium-italic-name": { 2835 | "id": "asset-font-ifsans-variable-medium-italic-name", 2836 | "category": "asset", 2837 | "ancestorId": "asset-font-ifsans-medium-italic-name", 2838 | "value": "If Sans Medium Italic", 2839 | "type": "font", 2840 | "item": "ifsans-variable-medium-italic", 2841 | "subItem": "name" 2842 | }, 2843 | "asset-font-ifsans-variable-medium-italic-eot": { 2844 | "id": "asset-font-ifsans-variable-medium-italic-eot", 2845 | "category": "asset", 2846 | "ancestorId": "asset-font-ifsans-variable-italic-eot", 2847 | "value": "./fonts/IfSans-VariableItalic.eot", 2848 | "type": "font", 2849 | "item": "ifsans-variable-medium-italic", 2850 | "subItem": "eot" 2851 | }, 2852 | "asset-font-ifsans-variable-medium-italic-otf": { 2853 | "id": "asset-font-ifsans-variable-medium-italic-otf", 2854 | "category": "asset", 2855 | "ancestorId": "asset-font-ifsans-variable-italic-otf", 2856 | "value": "./fonts/IfSans-VariableItalic.otf", 2857 | "type": "font", 2858 | "item": "ifsans-variable-medium-italic", 2859 | "subItem": "otf" 2860 | }, 2861 | "asset-font-ifsans-variable-medium-italic-ttf": { 2862 | "id": "asset-font-ifsans-variable-medium-italic-ttf", 2863 | "category": "asset", 2864 | "ancestorId": "asset-font-ifsans-variable-italic-ttf", 2865 | "value": "./fonts/IfSans-VariableItalic.ttf", 2866 | "type": "font", 2867 | "item": "ifsans-variable-medium-italic", 2868 | "subItem": "ttf" 2869 | }, 2870 | "asset-font-ifsans-variable-medium-italic-woff": { 2871 | "id": "asset-font-ifsans-variable-medium-italic-woff", 2872 | "category": "asset", 2873 | "ancestorId": "asset-font-ifsans-variable-italic-woff", 2874 | "value": "./fonts/IfSans-VariableItalic.woff", 2875 | "type": "font", 2876 | "item": "ifsans-variable-medium-italic", 2877 | "subItem": "woff" 2878 | }, 2879 | "asset-font-ifsans-variable-medium-italic-woff2": { 2880 | "id": "asset-font-ifsans-variable-medium-italic-woff2", 2881 | "category": "asset", 2882 | "ancestorId": "asset-font-ifsans-variable-italic-woff2", 2883 | "value": "./fonts/IfSans-VariableItalic.woff2", 2884 | "type": "font", 2885 | "item": "ifsans-variable-medium-italic", 2886 | "subItem": "woff2" 2887 | }, 2888 | "asset-font-ifsans-variable-bold-italic-name": { 2889 | "id": "asset-font-ifsans-variable-bold-italic-name", 2890 | "category": "asset", 2891 | "ancestorId": "asset-font-ifsans-bold-italic-name", 2892 | "value": "If Sans Bold Italic", 2893 | "type": "font", 2894 | "item": "ifsans-variable-bold-italic", 2895 | "subItem": "name" 2896 | }, 2897 | "asset-font-ifsans-variable-bold-italic-eot": { 2898 | "id": "asset-font-ifsans-variable-bold-italic-eot", 2899 | "category": "asset", 2900 | "ancestorId": "asset-font-ifsans-variable-italic-eot", 2901 | "value": "./fonts/IfSans-VariableItalic.eot", 2902 | "type": "font", 2903 | "item": "ifsans-variable-bold-italic", 2904 | "subItem": "eot" 2905 | }, 2906 | "asset-font-ifsans-variable-bold-italic-otf": { 2907 | "id": "asset-font-ifsans-variable-bold-italic-otf", 2908 | "category": "asset", 2909 | "ancestorId": "asset-font-ifsans-variable-italic-otf", 2910 | "value": "./fonts/IfSans-VariableItalic.otf", 2911 | "type": "font", 2912 | "item": "ifsans-variable-bold-italic", 2913 | "subItem": "otf" 2914 | }, 2915 | "asset-font-ifsans-variable-bold-italic-ttf": { 2916 | "id": "asset-font-ifsans-variable-bold-italic-ttf", 2917 | "category": "asset", 2918 | "ancestorId": "asset-font-ifsans-variable-italic-ttf", 2919 | "value": "./fonts/IfSans-VariableItalic.ttf", 2920 | "type": "font", 2921 | "item": "ifsans-variable-bold-italic", 2922 | "subItem": "ttf" 2923 | }, 2924 | "asset-font-ifsans-variable-bold-italic-woff": { 2925 | "id": "asset-font-ifsans-variable-bold-italic-woff", 2926 | "category": "asset", 2927 | "ancestorId": "asset-font-ifsans-variable-italic-woff", 2928 | "value": "./fonts/IfSans-VariableItalic.woff", 2929 | "type": "font", 2930 | "item": "ifsans-variable-bold-italic", 2931 | "subItem": "woff" 2932 | }, 2933 | "asset-font-ifsans-variable-bold-italic-woff2": { 2934 | "id": "asset-font-ifsans-variable-bold-italic-woff2", 2935 | "category": "asset", 2936 | "ancestorId": "asset-font-ifsans-variable-italic-woff2", 2937 | "value": "./fonts/IfSans-VariableItalic.woff2", 2938 | "type": "font", 2939 | "item": "ifsans-variable-bold-italic", 2940 | "subItem": "woff2" 2941 | }, 2942 | "font-weight-36": { 2943 | "variable": true, 2944 | "font-family": "\"If Sans\", Arial, sans-serif", 2945 | "id": "font-weight-36", 2946 | "category": "font", 2947 | "value": 36, 2948 | "type": "weight", 2949 | "item": "36" 2950 | }, 2951 | "font-weight-40": { 2952 | "variable": true, 2953 | "font-family": "\"If Sans\", Arial, sans-serif", 2954 | "id": "font-weight-40", 2955 | "category": "font", 2956 | "value": 40, 2957 | "type": "weight", 2958 | "item": "40" 2959 | }, 2960 | "font-weight-45": { 2961 | "variable": true, 2962 | "font-family": "\"If Sans\", Arial, sans-serif", 2963 | "id": "font-weight-45", 2964 | "category": "font", 2965 | "value": 45, 2966 | "type": "weight", 2967 | "item": "45" 2968 | }, 2969 | "font-weight-48": { 2970 | "variable": true, 2971 | "font-family": "\"If Sans\", Arial, sans-serif", 2972 | "id": "font-weight-48", 2973 | "category": "font", 2974 | "value": 48, 2975 | "type": "weight", 2976 | "item": "48" 2977 | }, 2978 | "font-weight-50": { 2979 | "variable": true, 2980 | "font-family": "\"If Sans\", Arial, sans-serif", 2981 | "id": "font-weight-50", 2982 | "category": "font", 2983 | "value": 50, 2984 | "type": "weight", 2985 | "item": "50" 2986 | }, 2987 | "font-weight-54": { 2988 | "variable": true, 2989 | "font-family": "\"If Sans\", Arial, sans-serif", 2990 | "id": "font-weight-54", 2991 | "category": "font", 2992 | "value": 54, 2993 | "type": "weight", 2994 | "item": "54" 2995 | }, 2996 | "font-weight-64": { 2997 | "variable": true, 2998 | "font-family": "\"If Sans\", Arial, sans-serif", 2999 | "id": "font-weight-64", 3000 | "category": "font", 3001 | "value": 64, 3002 | "type": "weight", 3003 | "item": "64" 3004 | }, 3005 | "font-weight-70": { 3006 | "variable": true, 3007 | "font-family": "\"If Sans\", Arial, sans-serif", 3008 | "id": "font-weight-70", 3009 | "category": "font", 3010 | "value": 70, 3011 | "type": "weight", 3012 | "item": "70" 3013 | }, 3014 | "font-weight-78": { 3015 | "variable": true, 3016 | "font-family": "\"If Sans\", Arial, sans-serif", 3017 | "id": "font-weight-78", 3018 | "category": "font", 3019 | "value": 78, 3020 | "type": "weight", 3021 | "item": "78" 3022 | }, 3023 | "font-weight-82": { 3024 | "variable": true, 3025 | "font-family": "\"If Sans\", Arial, sans-serif", 3026 | "id": "font-weight-82", 3027 | "category": "font", 3028 | "value": 82, 3029 | "type": "weight", 3030 | "item": "82" 3031 | }, 3032 | "font-weight-85": { 3033 | "variable": true, 3034 | "font-family": "\"If Sans\", Arial, sans-serif", 3035 | "id": "font-weight-85", 3036 | "category": "font", 3037 | "value": 85, 3038 | "type": "weight", 3039 | "item": "85" 3040 | }, 3041 | "font-weight-104": { 3042 | "variable": true, 3043 | "font-family": "\"If Sans\", Arial, sans-serif", 3044 | "id": "font-weight-104", 3045 | "category": "font", 3046 | "value": 104, 3047 | "type": "weight", 3048 | "item": "104" 3049 | }, 3050 | "font-weight-126": { 3051 | "variable": true, 3052 | "font-family": "\"If Sans\", Arial, sans-serif", 3053 | "id": "font-weight-126", 3054 | "category": "font", 3055 | "value": 126, 3056 | "type": "weight", 3057 | "item": "126" 3058 | }, 3059 | "font-family-sans-thin": { 3060 | "id": "font-family-sans-thin", 3061 | "category": "font", 3062 | "ancestorId": "asset-font-ifsans-thin-name", 3063 | "value": "If Sans Thin", 3064 | "type": "family", 3065 | "item": "sans-thin" 3066 | }, 3067 | "font-family-sans-light": { 3068 | "id": "font-family-sans-light", 3069 | "category": "font", 3070 | "ancestorId": "asset-font-ifsans-light-name", 3071 | "value": "If Sans Light", 3072 | "type": "family", 3073 | "item": "sans-light" 3074 | }, 3075 | "font-family-sans": { 3076 | "id": "font-family-sans", 3077 | "category": "font", 3078 | "ancestorId": "asset-font-ifsans-regular-name", 3079 | "value": "If Sans", 3080 | "type": "family", 3081 | "item": "sans" 3082 | }, 3083 | "font-family-sans-medium": { 3084 | "id": "font-family-sans-medium", 3085 | "category": "font", 3086 | "ancestorId": "asset-font-ifsans-medium-name", 3087 | "value": "If Sans Medium", 3088 | "type": "family", 3089 | "item": "sans-medium" 3090 | }, 3091 | "font-family-sans-bold": { 3092 | "id": "font-family-sans-bold", 3093 | "category": "font", 3094 | "ancestorId": "asset-font-ifsans-bold-name", 3095 | "value": "If Sans Bold", 3096 | "type": "family", 3097 | "item": "sans-bold" 3098 | }, 3099 | "font-family-sans-thin-italic": { 3100 | "id": "font-family-sans-thin-italic", 3101 | "category": "font", 3102 | "ancestorId": "asset-font-ifsans-thin-italic-name", 3103 | "value": "If Sans Thin Italic", 3104 | "type": "family", 3105 | "item": "sans-thin-italic" 3106 | }, 3107 | "font-family-sans-light-italic": { 3108 | "id": "font-family-sans-light-italic", 3109 | "category": "font", 3110 | "ancestorId": "asset-font-ifsans-light-italic-name", 3111 | "value": "If Sans Light Italic", 3112 | "type": "family", 3113 | "item": "sans-light-italic" 3114 | }, 3115 | "font-family-sans-italic": { 3116 | "id": "font-family-sans-italic", 3117 | "category": "font", 3118 | "ancestorId": "asset-font-ifsans-regular-italic-name", 3119 | "value": "If Sans Italic", 3120 | "type": "family", 3121 | "item": "sans-italic" 3122 | }, 3123 | "font-family-sans-medium-italic": { 3124 | "id": "font-family-sans-medium-italic", 3125 | "category": "font", 3126 | "ancestorId": "asset-font-ifsans-medium-italic-name", 3127 | "value": "If Sans Medium Italic", 3128 | "type": "family", 3129 | "item": "sans-medium-italic" 3130 | }, 3131 | "font-family-sans-bold-italic": { 3132 | "id": "font-family-sans-bold-italic", 3133 | "category": "font", 3134 | "ancestorId": "asset-font-ifsans-bold-italic-name", 3135 | "value": "If Sans Bold Italic", 3136 | "type": "family", 3137 | "item": "sans-bold-italic" 3138 | } 3139 | } 3140 | -------------------------------------------------------------------------------- /src/types/index.ts: -------------------------------------------------------------------------------- 1 | export * from './tokens' 2 | -------------------------------------------------------------------------------- /src/types/tokens.ts: -------------------------------------------------------------------------------- 1 | export type RawDesignTokenType = { 2 | "name": string; 3 | "id": string; 4 | "category": string; 5 | "value": string; 6 | "type": string; 7 | "item": string; 8 | "comment": string; 9 | } 10 | -------------------------------------------------------------------------------- /test.setup.js: -------------------------------------------------------------------------------- 1 | require('@testing-library/jest-dom'); 2 | require('regenerator-runtime/runtime'); 3 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2021", 4 | "lib": ["ES2021", "dom"], 5 | "sourceMap": true, 6 | "declaration": true, 7 | "declarationDir": "dist/dts", 8 | "moduleResolution": "node", 9 | "rootDir": "src", 10 | "noImplicitReturns": true, 11 | "noImplicitThis": true, 12 | "noImplicitAny": false, 13 | "strictNullChecks": true, 14 | "esModuleInterop": true, 15 | "baseUrl": "src/", 16 | "typeRoots": ["./node_modules/@types"], 17 | "resolveJsonModule": true, 18 | "types": ["node", "./node_modules/network-information-types"] 19 | }, 20 | "exclude": ["node_modules", "build", "dist", "./speccer.js", "scripts", "tests", "dts"] 21 | } 22 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "defaultSeverity": "error", 3 | "extends": ["tslint:recommended"], 4 | "jsRules": {}, 5 | "rules": { 6 | "ordered-imports": false, 7 | "object-literal-sort-keys": false, 8 | "member-ordering": false, 9 | "await-promise": false, 10 | "interface-name": false, 11 | "quotemark": false, 12 | "curly": false, 13 | "member-access": [true, "no-public"], 14 | "semicolon": false, 15 | "no-trailing-whitespace": false, 16 | "no-console": false, 17 | "jsx-alignment": false, 18 | "jsx-wrap-multiline": false, 19 | "jsx-no-lambda": false, 20 | "jsx-no-multiline-js": false 21 | }, 22 | "rulesDirectory": [] 23 | } 24 | --------------------------------------------------------------------------------