├── .node-version ├── src ├── styles.css ├── styles.css.d.ts ├── types.ts ├── ui.tsx └── main.ts ├── tsconfig.json ├── .vscode └── settings.json ├── manifest.json ├── test-data ├── content.json ├── spacing.json └── colors.json ├── .editorconfig ├── package.json ├── README.md └── .gitignore /.node-version: -------------------------------------------------------------------------------- 1 | 18.16.0 -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .container { 2 | height: 164px; 3 | overflow: auto; 4 | } 5 | -------------------------------------------------------------------------------- /src/styles.css.d.ts: -------------------------------------------------------------------------------- 1 | declare const styles: { 2 | readonly "container": string; 3 | }; 4 | export = styles; 5 | 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@create-figma-plugin/tsconfig", 3 | "compilerOptions": { 4 | "typeRoots": ["node_modules/@figma", "node_modules/@types"] 5 | }, 6 | "include": ["src/**/*.ts", "src/**/*.tsx"] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "json.schemas": [ 3 | { 4 | "fileMatch": [ 5 | "package.json" 6 | ], 7 | "url": "https://yuanqing.github.io/create-figma-plugin/figma-plugin.json" 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "api": "1.0.0", 3 | "editorType": [ 4 | "figma" 5 | ], 6 | "id": "1254182310197842774", 7 | "name": "Style Dictionary to Variables", 8 | "main": "build/main.js", 9 | "ui": "build/ui.js" 10 | } 11 | -------------------------------------------------------------------------------- /test-data/content.json: -------------------------------------------------------------------------------- 1 | { 2 | "content": { 3 | "CompanyName": { 4 | "value": "Capanna della Pizza", 5 | "group": "content" 6 | }, 7 | "Tagline": { 8 | "value": "Pizza - the best food group in the world.", 9 | "group": "content" 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig is awesome: http://EditorConfig.org 2 | 3 | # top-most EditorConfig file 4 | root = true 5 | 6 | # use utf-8 for all files 7 | [*] 8 | charset = utf-8 9 | 10 | # indents 11 | indent_style = space 12 | indent_size = 2 13 | 14 | # Unix-style newlines with a newline ending every file 15 | end_of_line = lf 16 | insert_final_newline = true 17 | 18 | # whitespace 19 | trim_trailing_whitespace = true 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "@create-figma-plugin/ui": "^2.5.0", 4 | "@create-figma-plugin/utilities": "^2.5.0", 5 | "chroma-js": "^2.4.2", 6 | "preact": ">=10" 7 | }, 8 | "devDependencies": { 9 | "@create-figma-plugin/build": "^2.5.0", 10 | "@create-figma-plugin/tsconfig": "^2.5.0", 11 | "@figma/plugin-typings": "1.69.0", 12 | "@types/chroma-js": "^2.4.0", 13 | "@types/prismjs": "^1.26.0", 14 | "typescript": ">=4" 15 | }, 16 | "scripts": { 17 | "build": "build-figma-plugin --typecheck --minify", 18 | "watch": "build-figma-plugin --typecheck --watch" 19 | }, 20 | "figma-plugin": { 21 | "editorType": [ 22 | "figma" 23 | ], 24 | "id": "1254182310197842774", 25 | "name": "Style Dictionary to Variables", 26 | "main": "src/main.ts", 27 | "ui": "src/ui.tsx" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /test-data/spacing.json: -------------------------------------------------------------------------------- 1 | { 2 | "size": { 3 | "0": { 4 | "value": "0", 5 | "group": "spacing" 6 | }, 7 | "1": { 8 | "value": "4", 9 | "group": "spacing" 10 | }, 11 | "2": { 12 | "value": "8", 13 | "group": "spacing" 14 | }, 15 | "3": { 16 | "value": "12", 17 | "group": "spacing" 18 | }, 19 | "4": { 20 | "value": "16", 21 | "group": "spacing" 22 | }, 23 | "5": { 24 | "value": "24", 25 | "group": "spacing" 26 | }, 27 | "6": { 28 | "value": "32", 29 | "group": "spacing" 30 | }, 31 | "7": { 32 | "value": "40", 33 | "group": "spacing" 34 | }, 35 | "8": { 36 | "value": "48", 37 | "group": "spacing" 38 | }, 39 | "9": { 40 | "value": "56", 41 | "group": "spacing" 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/types.ts: -------------------------------------------------------------------------------- 1 | import { EventHandler } from '@create-figma-plugin/utilities' 2 | 3 | export type VariableCollectionResult = Pick 4 | 5 | export interface ImportTokensHandler extends EventHandler { 6 | name: 'IMPORT_TOKENS' 7 | handler: (code: string, importMode: 'new' | 'replace') => void 8 | } 9 | 10 | export interface ReportErrorHandler extends EventHandler { 11 | name: 'REPORT_ERROR' 12 | handler: (error: string) => void 13 | } 14 | 15 | export interface ReportSuccessHandler extends EventHandler { 16 | name: 'REPORT_SUCCESS' 17 | handler: (msg: string) => void 18 | } 19 | 20 | export interface GetVariableCollectionsHandler extends EventHandler { 21 | name: 'GET_COLLECTIONS' 22 | handler: () => void 23 | } 24 | 25 | export interface GetVariableCollectionsResultHandler extends EventHandler { 26 | name: 'GET_COLLECTIONS_RESULT' 27 | handler: (results: VariableCollectionResult[]) => void 28 | } 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Import Sd Variables 2 | 3 | ## Development guide 4 | 5 | *This plugin is built with [Create Figma Plugin](https://yuanqing.github.io/create-figma-plugin/).* 6 | 7 | ### Pre-requisites 8 | 9 | - [Node.js](https://nodejs.org) – v18 10 | - [Figma desktop app](https://figma.com/downloads/) 11 | 12 | ### Build the plugin 13 | 14 | To build the plugin: 15 | 16 | ``` 17 | $ npm run build 18 | ``` 19 | 20 | This will generate a [`manifest.json`](https://figma.com/plugin-docs/manifest/) file and a `build/` directory containing the JavaScript bundle(s) for the plugin. 21 | 22 | To watch for code changes and rebuild the plugin automatically: 23 | 24 | ``` 25 | $ npm run watch 26 | ``` 27 | 28 | ### Install the plugin 29 | 30 | 1. In the Figma desktop app, open a Figma document. 31 | 2. Search for and run `Import plugin from manifest…` via the Quick Actions search bar. 32 | 3. Select the `manifest.json` file that was generated by the `build` script. 33 | 34 | ### Debugging 35 | 36 | Use `console.log` statements to inspect values in your code. 37 | 38 | To open the developer console, search for and run `Open Console` via the Quick Actions search bar. 39 | 40 | ## See also 41 | 42 | - [Create Figma Plugin docs](https://yuanqing.github.io/create-figma-plugin/) 43 | - [`yuanqing/figma-plugins`](https://github.com/yuanqing/figma-plugins#readme) 44 | 45 | Official docs and code samples from Figma: 46 | 47 | - [Plugin API docs](https://figma.com/plugin-docs/) 48 | - [`figma/plugin-samples`](https://github.com/figma/plugin-samples#readme) 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | 132 | build/ 133 | -------------------------------------------------------------------------------- /src/ui.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | FileUploadButton, 3 | FileUploadDropzone, 4 | Container, 5 | Text, 6 | Bold, 7 | Muted, 8 | render, 9 | VerticalSpace, 10 | Banner, 11 | IconWarning32, 12 | Stack, 13 | IconCheckCircle32, 14 | SegmentedControl, 15 | IconInfo32, 16 | Code 17 | } from '@create-figma-plugin/ui' 18 | import { emit, on } from '@create-figma-plugin/utilities' 19 | import { h } from 'preact' 20 | import {useEffect, useState} from 'preact/hooks' 21 | 22 | import styles from './styles.css' 23 | import { 24 | ImportTokensHandler, 25 | ReportErrorHandler, 26 | ReportSuccessHandler, 27 | GetVariableCollectionsResultHandler, 28 | GetVariableCollectionsHandler, 29 | VariableCollectionResult, 30 | } from './types' 31 | import {TargetedEvent} from "preact/compat"; 32 | 33 | function Plugin() { 34 | const [errorMsg, setErrorMsg] = useState() 35 | const [successMsg, setSuccessMsg] = useState() 36 | const [importMode, setImportMode] = useState<'new' | 'replace'>('new'); 37 | const [collections, setCollections] = useState([]); 38 | const [selectedCollection, setSelectedCollection] = useState(null); 39 | 40 | const handleSelectedFiles = (files: Array) => { 41 | const reader = new FileReader() 42 | reader.readAsText(files[0]) 43 | 44 | reader.onloadend = () => { 45 | if (typeof reader.result === 'string') { 46 | emit('IMPORT_TOKENS', reader.result, importMode) 47 | } 48 | } 49 | } 50 | 51 | useEffect(() => { 52 | on('REPORT_ERROR', (errorMsg) => { 53 | setErrorMsg(errorMsg) 54 | }); 55 | 56 | on('REPORT_SUCCESS', (msg) => { 57 | setSuccessMsg(msg) 58 | }); 59 | 60 | on('GET_COLLECTIONS_RESULT', (result) => { 61 | setCollections(result) 62 | }) 63 | 64 | emit('GET_COLLECTIONS') 65 | }, []) 66 | 67 | return ( 68 | 69 | 70 | 71 | {successMsg && } variant="success">{successMsg}} 72 | {errorMsg && } variant="warning">{errorMsg}} 73 | {importMode === 'replace' && ( 74 | }> 75 | Tokens will be replaced using their names. The collection will be determined by the group key on the token property. 76 | 77 | )} 78 | 79 | 80 | Import mode 81 | 82 | ) => { 95 | setImportMode(e.currentTarget.value as 'new' | 'replace'); 96 | }} 97 | /> 98 | 99 | {/*{importMode === 'replace' && (*/} 100 | {/* */} 101 | {/* */} 102 | {/* Select collection to update*/} 103 | {/* */} 104 | {/* ({*/} 106 | {/* value: c.id,*/} 107 | {/* text: c.name,*/} 108 | {/* }))}*/} 109 | {/* onChange={(e: TargetedEvent) => {*/} 110 | {/* setSelectedCollection(e.currentTarget.value);*/} 111 | {/* }}*/} 112 | {/* value={selectedCollection}*/} 113 | {/* />*/} 114 | {/* */} 115 | {/*)}*/} 116 | 117 | 118 | Drop token file here to import 119 | 120 | 121 | 122 | or 123 | 124 | 125 | 126 | Select token file to import 127 | 128 | 129 | 130 | 131 | 132 | ) 133 | } 134 | 135 | export default render(Plugin) 136 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { on, showUI, emit } from '@create-figma-plugin/utilities' 2 | import chroma from 'chroma-js' 3 | 4 | import { 5 | ImportTokensHandler, 6 | ReportErrorHandler, 7 | ReportSuccessHandler, 8 | GetVariableCollectionsHandler, 9 | GetVariableCollectionsResultHandler 10 | } from './types' 11 | 12 | interface CollectionsStore { 13 | [key: string]: VariableCollection 14 | } 15 | 16 | interface ResolveTokenType { 17 | properties: any 18 | name: string[] 19 | collection: string 20 | category: string 21 | value: any 22 | } 23 | 24 | interface TokenProperties { 25 | [key: string]: {value: string; group: string} | TokenProperties 26 | } 27 | 28 | const traverseTokens = (properties: TokenProperties, prefix: string[], collections: CollectionsStore, category: string, importMode: 'new' | 'replace' = 'new') => { 29 | const createdVariables: {name: string, variable: Variable}[] = [] 30 | const aliases: ResolveTokenType[] = [] 31 | 32 | for (const [key, value] of Object.entries(properties)) { 33 | const prefixedKey = [...prefix, key] 34 | if (value.value === undefined) { 35 | const recursiveResult = traverseTokens(value as TokenProperties, prefixedKey, collections, category, importMode) 36 | createdVariables.push(...recursiveResult.variables) 37 | aliases.push(...recursiveResult.aliases) 38 | continue 39 | } 40 | 41 | const collectionName = value.group ? category : value.group 42 | 43 | if (typeof value.value === 'string' && value.value.startsWith('{')) { 44 | aliases.push({ 45 | properties: value, 46 | name: prefixedKey, 47 | collection: collectionName, 48 | category, 49 | value: value.value 50 | }) 51 | continue 52 | } 53 | 54 | if (collections[collectionName] === undefined) { 55 | if (importMode === 'new') { 56 | collections[collectionName] = figma.variables.createVariableCollection(collectionName) 57 | } else { 58 | // Find variable collection by name 59 | const existingCollection = figma.variables 60 | .getLocalVariableCollections() 61 | .find(c => c.name.toLowerCase() === collectionName.toLowerCase()); 62 | 63 | if (!existingCollection) { 64 | collections[collectionName] = figma.variables.createVariableCollection(collectionName) 65 | } else { 66 | collections[collectionName] = existingCollection 67 | } 68 | } 69 | } 70 | 71 | switch(category) { 72 | case 'size': { 73 | const variable = figma.variables.createVariable(prefixedKey.join('/'), collections[collectionName].id, 'FLOAT') 74 | 75 | variable.setValueForMode(collections[collectionName].defaultModeId, parseInt(value.value as string)) 76 | createdVariables.push({ 77 | name: prefixedKey.join('/'), 78 | variable, 79 | }) 80 | break 81 | } 82 | case 'color': { 83 | const variable = figma.variables.createVariable(prefixedKey.join('/'), collections[collectionName].id, 'COLOR') 84 | 85 | const rgbColor = chroma(value.value as string).rgba(); 86 | 87 | variable.setValueForMode(collections[collectionName].defaultModeId, { 88 | r: rgbColor[0] / 255, 89 | g: rgbColor[1] / 255, 90 | b: rgbColor[2] / 255, 91 | a: rgbColor[3], 92 | }) 93 | createdVariables.push({ 94 | name: prefixedKey.join('/'), 95 | variable, 96 | }) 97 | break 98 | } 99 | case 'content': { 100 | const variable = figma.variables.createVariable(prefixedKey.join('/'), collections[collectionName].id, 'STRING') 101 | 102 | variable.setValueForMode(collections[collectionName].defaultModeId, value.value as string) 103 | createdVariables.push({ 104 | name: prefixedKey.join('/'), 105 | variable, 106 | }) 107 | break 108 | } 109 | } 110 | } 111 | 112 | return { 113 | variables: createdVariables, 114 | aliases, 115 | } 116 | } 117 | 118 | const resolveVariableAliases = (variables: {name: string, variable: Variable}[], aliases: ResolveTokenType[], collections: CollectionsStore, category: string) => { 119 | const createdVariables: Variable[] = [] 120 | 121 | const figmaType: {size: VariableResolvedDataType, color: VariableResolvedDataType, content: VariableResolvedDataType} = { 122 | size: 'FLOAT', 123 | color: 'COLOR', 124 | content: 'STRING', 125 | } 126 | 127 | for (const alias of aliases) { 128 | const normalizedAliasName = alias.value.replace('color.', '').replace('{', '').replace('}', '').replace(/\./g, '/') 129 | 130 | const findVariable = variables.find( 131 | v => v.name === normalizedAliasName 132 | ) 133 | 134 | console.log(findVariable) 135 | if (!findVariable) { 136 | continue 137 | } 138 | 139 | const aliasedVariable = figma.variables.createVariable( 140 | alias.name.join('/'), 141 | collections[alias.collection].id, 142 | figmaType[category as 'size' | 'color' | 'content'] 143 | ) 144 | 145 | aliasedVariable.setValueForMode( 146 | collections[alias.collection].defaultModeId, 147 | figma.variables.createVariableAlias(findVariable.variable) 148 | ) 149 | 150 | createdVariables.push(aliasedVariable) 151 | } 152 | 153 | return createdVariables 154 | } 155 | 156 | export default function () { 157 | on('IMPORT_TOKENS', async (tokens, importMode) => { 158 | const file = JSON.parse(tokens) 159 | 160 | const [category, properties] = Object.entries(file)[0] 161 | const collections: CollectionsStore = {} 162 | 163 | const allowCategories = ['size', 'color', 'content'] 164 | 165 | if (!allowCategories.includes(category)) { 166 | emit('REPORT_ERROR', `We currently only support the following categories: ${allowCategories.join(', ')}`) 167 | } 168 | 169 | const totalTokens = traverseTokens(properties as TokenProperties, [], collections, category, importMode) 170 | 171 | const totalAliased = resolveVariableAliases(totalTokens.variables, totalTokens.aliases, collections, category) 172 | 173 | if (totalTokens.variables.length > 0) { 174 | emit('REPORT_SUCCESS', `Imported ${totalTokens.variables.length + totalAliased.length} tokens as variables.`) 175 | } 176 | }) 177 | on('GET_COLLECTIONS', () => { 178 | emit( 179 | 'GET_COLLECTIONS_RESULT', 180 | figma.variables.getLocalVariableCollections().map(c => ({ 181 | id: c.id, 182 | name: c.name, 183 | })) 184 | ) 185 | }) 186 | showUI({ height: 300, width: 320 }) 187 | } 188 | -------------------------------------------------------------------------------- /test-data/colors.json: -------------------------------------------------------------------------------- 1 | { 2 | "color": { 3 | "Core": { 4 | "Purple": { 5 | "100": { 6 | "value": "#F1EBFF", 7 | "group": "color" 8 | }, 9 | "200": { 10 | "value": "#DBCCFF", 11 | "group": "color" 12 | }, 13 | "300": { 14 | "value": "#CBB2FF", 15 | "group": "color" 16 | }, 17 | "400": { 18 | "value": "#B796FF", 19 | "group": "color" 20 | }, 21 | "500": { 22 | "value": "#AA85FF", 23 | "group": "color" 24 | }, 25 | "600": { 26 | "value": "#8652FF", 27 | "group": "color" 28 | }, 29 | "700": { 30 | "value": "#631FFF", 31 | "group": "color" 32 | }, 33 | "800": { 34 | "value": "#4700EB", 35 | "group": "color" 36 | }, 37 | "900": { 38 | "value": "#290087", 39 | "group": "color" 40 | } 41 | }, 42 | "Red": { 43 | "100": { 44 | "value": "#FFEBF0", 45 | "group": "color" 46 | }, 47 | "200": { 48 | "value": "#FFD2DC", 49 | "group": "color" 50 | }, 51 | "300": { 52 | "value": "#FEB9CB", 53 | "group": "color" 54 | }, 55 | "400": { 56 | "value": "#FDA0B8", 57 | "group": "color" 58 | }, 59 | "500": { 60 | "value": "#FD87A6", 61 | "group": "color" 62 | }, 63 | "600": { 64 | "value": "#FC5A85", 65 | "group": "color" 66 | }, 67 | "700": { 68 | "value": "#FB3268", 69 | "group": "color" 70 | }, 71 | "800": { 72 | "value": "#EB0744", 73 | "group": "color" 74 | }, 75 | "900": { 76 | "value": "#C80438", 77 | "group": "color" 78 | } 79 | }, 80 | "Orange": { 81 | "100": { 82 | "value": "#FFE6D6", 83 | "group": "color" 84 | }, 85 | "200": { 86 | "value": "#FFC5A0", 87 | "group": "color" 88 | }, 89 | "300": { 90 | "value": "#FFB487", 91 | "group": "color" 92 | }, 93 | "400": { 94 | "value": "#FFA26F", 95 | "group": "color" 96 | }, 97 | "500": { 98 | "value": "#FE9058", 99 | "group": "color" 100 | }, 101 | "600": { 102 | "value": "#FC7D41", 103 | "group": "color" 104 | }, 105 | "700": { 106 | "value": "#F9682A", 107 | "group": "color" 108 | }, 109 | "800": { 110 | "value": "#DD5024", 111 | "group": "color" 112 | }, 113 | "900": { 114 | "value": "#C2451E", 115 | "group": "color" 116 | } 117 | }, 118 | "Yellow": { 119 | "100": { 120 | "value": "#FFF7DE", 121 | "group": "color" 122 | }, 123 | "200": { 124 | "value": "#FFECB6", 125 | "group": "color" 126 | }, 127 | "300": { 128 | "value": "#FFE49C", 129 | "group": "color" 130 | }, 131 | "400": { 132 | "value": "#FFDC81", 133 | "group": "color" 134 | }, 135 | "500": { 136 | "value": "#FFD465", 137 | "group": "color" 138 | }, 139 | "600": { 140 | "value": "#FFCC47", 141 | "group": "color" 142 | }, 143 | "700": { 144 | "value": "#FFC31F", 145 | "group": "color" 146 | }, 147 | "800": { 148 | "value": "#EBAC00", 149 | "group": "color" 150 | }, 151 | "900": { 152 | "value": "#D69D00", 153 | "group": "color" 154 | } 155 | }, 156 | "Green": { 157 | "100": { 158 | "value": "#E4F6EB", 159 | "group": "color" 160 | }, 161 | "200": { 162 | "value": "#C0EBD0", 163 | "group": "color" 164 | }, 165 | "300": { 166 | "value": "#A7E3BD", 167 | "group": "color" 168 | }, 169 | "400": { 170 | "value": "#8FDBAB", 171 | "group": "color" 172 | }, 173 | "500": { 174 | "value": "#76D397", 175 | "group": "color" 176 | }, 177 | "600": { 178 | "value": "#5BCA84", 179 | "group": "color" 180 | }, 181 | "700": { 182 | "value": "#3BC170", 183 | "group": "color" 184 | }, 185 | "800": { 186 | "value": "#35A260", 187 | "group": "color" 188 | }, 189 | "900": { 190 | "value": "#2B7A4B", 191 | "group": "color" 192 | } 193 | }, 194 | "Teal": { 195 | "100": { 196 | "value": "#D1F3F7", 197 | "group": "color" 198 | }, 199 | "200": { 200 | "value": "#BAEDF2", 201 | "group": "color" 202 | }, 203 | "300": { 204 | "value": "#ABE8EF", 205 | "group": "color" 206 | }, 207 | "400": { 208 | "value": "#92E2EA", 209 | "group": "color" 210 | }, 211 | "500": { 212 | "value": "#81DDE7", 213 | "group": "color" 214 | }, 215 | "600": { 216 | "value": "#62D7E3", 217 | "group": "color" 218 | }, 219 | "700": { 220 | "value": "#33CADB", 221 | "group": "color" 222 | }, 223 | "800": { 224 | "value": "#2CBCC9", 225 | "group": "color" 226 | }, 227 | "900": { 228 | "value": "#30828B", 229 | "group": "color" 230 | } 231 | }, 232 | "Blue": { 233 | "100": { 234 | "value": "#DDEBFF", 235 | "group": "color" 236 | }, 237 | "200": { 238 | "value": "#B5D1FF", 239 | "group": "color" 240 | }, 241 | "300": { 242 | "value": "#9BC0FF", 243 | "group": "color" 244 | }, 245 | "400": { 246 | "value": "#81AEFF", 247 | "group": "color" 248 | }, 249 | "500": { 250 | "value": "#679DFF", 251 | "group": "color" 252 | }, 253 | "600": { 254 | "value": "#4A8BFD", 255 | "group": "color" 256 | }, 257 | "700": { 258 | "value": "#2379FA", 259 | "group": "color" 260 | }, 261 | "800": { 262 | "value": "#055FE6", 263 | "group": "color" 264 | }, 265 | "900": { 266 | "value": "#033682", 267 | "group": "color" 268 | } 269 | }, 270 | "Slate": { 271 | "50": { 272 | "value": "#F4F4F6", 273 | "group": "color" 274 | }, 275 | "100": { 276 | "value": "#E6E6EA", 277 | "group": "color" 278 | }, 279 | "200": { 280 | "value": "#D7D8DF", 281 | "group": "color" 282 | }, 283 | "300": { 284 | "value": "#C9CAD3", 285 | "group": "color" 286 | }, 287 | "400": { 288 | "value": "#BBBCC8", 289 | "group": "color" 290 | }, 291 | "500": { 292 | "value": "#ADAEBC", 293 | "group": "color" 294 | }, 295 | "600": { 296 | "value": "#9FA1B1", 297 | "group": "color" 298 | }, 299 | "700": { 300 | "value": "#9194A6", 301 | "group": "color" 302 | }, 303 | "800": { 304 | "value": "#6A6D81", 305 | "group": "color" 306 | }, 307 | "900": { 308 | "value": "#3C3E49", 309 | "group": "color" 310 | }, 311 | "1000": { 312 | "value": "#0E0E11", 313 | "group": "color" 314 | } 315 | } 316 | }, 317 | "Primary": { 318 | "Black": { 319 | "value": "#000000", 320 | "group": "color" 321 | }, 322 | "White": { 323 | "value": "#FFFFFF", 324 | "group": "color" 325 | }, 326 | "Purple": { 327 | "value": "{color.Core.Purple.700}", 328 | "group": "color" 329 | }, 330 | "Red": { 331 | "value": "{color.Core.Red.700}", 332 | "group": "color" 333 | }, 334 | "Orange": { 335 | "value": "{color.Core.Orange.700}", 336 | "group": "color" 337 | }, 338 | "Yellow": { 339 | "value": "{color.Core.Yellow.700}", 340 | "group": "color" 341 | }, 342 | "Green": { 343 | "value": "{color.Core.Green.700}", 344 | "group": "color" 345 | }, 346 | "Teal": { 347 | "value": "{color.Core.Teal.700}", 348 | "group": "color" 349 | }, 350 | "Blue": { 351 | "value": "{color.Core.Blue.700}", 352 | "group": "color" 353 | } 354 | }, 355 | "Background": { 356 | "Primary": { 357 | "value": "{color.Primary.White}", 358 | "group": "color" 359 | }, 360 | "Secondary": { 361 | "value": "{color.Core.Slate.50}", 362 | "group": "color" 363 | }, 364 | "Button": { 365 | "Default": { 366 | "value": "{color.Core.Slate.100}", 367 | "group": "color" 368 | }, 369 | "Default Active": { 370 | "value": "{color.Core.Slate.300}", 371 | "group": "color" 372 | }, 373 | "Default Disabled": { 374 | "value": "{color.Core.Slate.100}", 375 | "group": "color" 376 | }, 377 | "Text": { 378 | "value": "{color.Primary.White}", 379 | "group": "color" 380 | }, 381 | "Text Active": { 382 | "value": "{color.Core.Purple.100}", 383 | "group": "color" 384 | }, 385 | "Text Disabled": { 386 | "value": "{color.Core.Slate.50}", 387 | "group": "color" 388 | }, 389 | "Primary": { 390 | "value": "{color.Primary.Purple}", 391 | "group": "color" 392 | }, 393 | "Primary Active": { 394 | "value": "{color.Core.Purple.900}", 395 | "group": "color" 396 | }, 397 | "Primary Disabled": { 398 | "value": "{color.Core.Purple.400}", 399 | "group": "color" 400 | }, 401 | "Danger": { 402 | "value": "{color.Core.Red.800}", 403 | "group": "color" 404 | }, 405 | "Danger Active": { 406 | "value": "{color.Core.Red.900}", 407 | "group": "color" 408 | }, 409 | "Danger Disabled": { 410 | "value": "{color.Core.Red.400}", 411 | "group": "color" 412 | } 413 | }, 414 | "Input": { 415 | "Default": { 416 | "value": "{color.Background.Primary}", 417 | "group": "color" 418 | }, 419 | "Disabled": { 420 | "value": "{color.Core.Slate.50}", 421 | "group": "color" 422 | }, 423 | "Checkbox": { 424 | "value": "{color.Primary.White}", 425 | "group": "color" 426 | }, 427 | "Checkbox Checked": { 428 | "value": "{color.Primary.Blue}", 429 | "group": "color" 430 | }, 431 | "Checkbox Disabled": { 432 | "value": "{color.Core.Slate.300}", 433 | "group": "color" 434 | }, 435 | "Toggle": { 436 | "value": "{color.Core.Slate.800}", 437 | "group": "color" 438 | }, 439 | "Toggle Disabled": { 440 | "value": "{color.Core.Slate.300}", 441 | "group": "color" 442 | }, 443 | "Toggle Checked": { 444 | "value": "{color.Primary.Purple}", 445 | "group": "color" 446 | }, 447 | "Toggle Checked Disabled": { 448 | "value": "{color.Core.Purple.300}", 449 | "group": "color" 450 | }, 451 | "Toggle Danger": { 452 | "value": "{color.Core.Red.800}", 453 | "group": "color" 454 | }, 455 | "Toggle Danger Disabled": { 456 | "value": "{color.Core.Red.400}", 457 | "group": "color" 458 | } 459 | }, 460 | "Label": { 461 | "Grey": { 462 | "value": "{color.Core.Slate.100}", 463 | "group": "color" 464 | }, 465 | "Grey Hover": { 466 | "value": "{color.Core.Slate.400}", 467 | "group": "color" 468 | }, 469 | "Grey Disabled": { 470 | "value": "{color.Core.Slate.50}", 471 | "group": "color" 472 | }, 473 | "Dark Grey": { 474 | "value": "{color.Core.Slate.300}", 475 | "group": "color" 476 | }, 477 | "Dark Grey Hover": { 478 | "value": "{color.Core.Slate.500}", 479 | "group": "color" 480 | }, 481 | "Dark Grey Disabled": { 482 | "value": "{color.Core.Slate.100}", 483 | "group": "color" 484 | }, 485 | "Purple": { 486 | "value": "{color.Core.Purple.300}", 487 | "group": "color" 488 | }, 489 | "Purple Hover": { 490 | "value": "{color.Core.Purple.500}", 491 | "group": "color" 492 | }, 493 | "Purple Disabled": { 494 | "value": "{color.Core.Purple.100}", 495 | "group": "color" 496 | }, 497 | "Red": { 498 | "value": "{color.Core.Red.300}", 499 | "group": "color" 500 | }, 501 | "Red Hover": { 502 | "value": "{color.Core.Red.500}", 503 | "group": "color" 504 | }, 505 | "Red Disabled": { 506 | "value": "{color.Core.Red.100}", 507 | "group": "color" 508 | }, 509 | "Dark Red": { 510 | "value": "{color.Core.Red.800}", 511 | "group": "color" 512 | }, 513 | "Dark Red Hover": { 514 | "value": "{color.Core.Red.900}", 515 | "group": "color" 516 | }, 517 | "Dark Red Disabled": { 518 | "value": "{color.Core.Red.300}", 519 | "group": "color" 520 | }, 521 | "Orange": { 522 | "value": "{color.Core.Orange.200}", 523 | "group": "color" 524 | }, 525 | "Orange Hover": { 526 | "value": "{color.Core.Orange.500}", 527 | "group": "color" 528 | }, 529 | "Orange Disabled": { 530 | "value": "{color.Core.Orange.100}", 531 | "group": "color" 532 | }, 533 | "Yellow": { 534 | "value": "{color.Core.Yellow.200}", 535 | "group": "color" 536 | }, 537 | "Yellow Hover": { 538 | "value": "{color.Core.Yellow.500}", 539 | "group": "color" 540 | }, 541 | "Yellow Disabled": { 542 | "value": "{color.Core.Yellow.100}", 543 | "group": "color" 544 | }, 545 | "Green": { 546 | "value": "{color.Core.Green.300}", 547 | "group": "color" 548 | }, 549 | "Green Hover": { 550 | "value": "{color.Core.Green.500}", 551 | "group": "color" 552 | }, 553 | "Green Disabled": { 554 | "value": "{color.Core.Green.100}", 555 | "group": "color" 556 | }, 557 | "Teal": { 558 | "value": "{color.Core.Teal.300}", 559 | "group": "color" 560 | }, 561 | "Teal Hover": { 562 | "value": "{color.Core.Teal.500}", 563 | "group": "color" 564 | }, 565 | "Teal Disabled": { 566 | "value": "{color.Core.Teal.100}", 567 | "group": "color" 568 | }, 569 | "Blue": { 570 | "value": "{color.Core.Blue.300}", 571 | "group": "color" 572 | }, 573 | "Blue Hover": { 574 | "value": "{color.Core.Blue.500}", 575 | "group": "color" 576 | }, 577 | "Blue Disabled": { 578 | "value": "{color.Core.Blue.100}", 579 | "group": "color" 580 | }, 581 | "White": { 582 | "value": "{color.Primary.White}", 583 | "group": "color" 584 | }, 585 | "White Hover": { 586 | "value": "{color.Core.Slate.300}", 587 | "group": "color" 588 | }, 589 | "White Disabled": { 590 | "value": "{color.Primary.White}", 591 | "group": "color" 592 | } 593 | }, 594 | "Docs": { 595 | "Note": { 596 | "Default": { 597 | "value": "{color.Core.Yellow.100}", 598 | "group": "color" 599 | }, 600 | "Feedback": { 601 | "value": "{color.Core.Blue.100}", 602 | "group": "color" 603 | }, 604 | "Action Item": { 605 | "value": "{color.Core.Red.100}", 606 | "group": "color" 607 | }, 608 | "Flow": { 609 | "value": "{color.Core.Purple.100}", 610 | "group": "color" 611 | } 612 | }, 613 | "Frame Label": { 614 | "Slate": { 615 | "value": "{color.Core.Slate.1000}", 616 | "group": "color" 617 | }, 618 | "Purple": { 619 | "value": "{color.Primary.Purple}", 620 | "group": "color" 621 | }, 622 | "Blue": { 623 | "value": "{color.Primary.Blue}", 624 | "group": "color" 625 | }, 626 | "Red": { 627 | "value": "{color.Primary.Red}", 628 | "group": "color" 629 | } 630 | } 631 | } 632 | }, 633 | "Text": { 634 | "Primary": { 635 | "value": "{color.Core.Slate.1000}", 636 | "group": "color" 637 | }, 638 | "Secondary": { 639 | "value": "{color.Core.Slate.800}", 640 | "group": "color" 641 | }, 642 | "Inverse": { 643 | "value": "{color.Primary.White}", 644 | "group": "color" 645 | }, 646 | "Active": { 647 | "value": "{color.Primary.Purple}", 648 | "group": "color" 649 | }, 650 | "Danger": { 651 | "value": "{color.Core.Red.800}", 652 | "group": "color" 653 | }, 654 | "Disabled": { 655 | "value": "{color.Core.Slate.500}", 656 | "group": "color" 657 | } 658 | }, 659 | "Border": { 660 | "Hairline": { 661 | "value": "{color.Core.Slate.100}", 662 | "group": "color" 663 | }, 664 | "Divider": { 665 | "value": "{color.Core.Slate.200}", 666 | "group": "color" 667 | }, 668 | "Icon": { 669 | "Primary": { 670 | "value": "{color.Core.Slate.1000}", 671 | "group": "color" 672 | }, 673 | "Secondary": { 674 | "value": "{color.Core.Slate.800}", 675 | "group": "color" 676 | }, 677 | "Inverse": { 678 | "value": "{color.Primary.White}", 679 | "group": "color" 680 | }, 681 | "Active": { 682 | "value": "{color.Primary.Purple}", 683 | "group": "color" 684 | }, 685 | "Success": { 686 | "value": "{color.Core.Green.800}", 687 | "group": "color" 688 | }, 689 | "Warning": { 690 | "value": "{color.Core.Yellow.800}", 691 | "group": "color" 692 | }, 693 | "Danger": { 694 | "value": "{color.Core.Red.800}", 695 | "group": "color" 696 | }, 697 | "Disabled": { 698 | "value": "{color.Core.Slate.500}", 699 | "group": "color" 700 | }, 701 | "Label": { 702 | "Grey": { 703 | "value": "{color.Core.Slate.800}", 704 | "group": "color" 705 | }, 706 | "Grey Disabled": { 707 | "value": "{color.Core.Slate.100}", 708 | "group": "color" 709 | }, 710 | "Dark Grey": { 711 | "value": "{color.Core.Slate.900}", 712 | "group": "color" 713 | }, 714 | "Dark Grey Disabled": { 715 | "value": "{color.Core.Slate.200}", 716 | "group": "color" 717 | }, 718 | "Purple": { 719 | "value": "{color.Core.Purple.900}", 720 | "group": "color" 721 | }, 722 | "Purple Disabled": { 723 | "value": "{color.Core.Purple.200}", 724 | "group": "color" 725 | }, 726 | "Red": { 727 | "value": "{color.Core.Red.900}", 728 | "group": "color" 729 | }, 730 | "Red Disabled": { 731 | "value": "{color.Core.Red.200}", 732 | "group": "color" 733 | }, 734 | "Dark Red": { 735 | "value": "{color.Primary.White}", 736 | "group": "color" 737 | }, 738 | "Dark Red Disabled": { 739 | "value": "{color.Primary.White}", 740 | "group": "color" 741 | }, 742 | "Orange": { 743 | "value": "{color.Core.Orange.900}", 744 | "group": "color" 745 | }, 746 | "Orange Disabled": { 747 | "value": "{color.Core.Orange.200}", 748 | "group": "color" 749 | }, 750 | "Yellow": { 751 | "value": "{color.Core.Yellow.900}", 752 | "group": "color" 753 | }, 754 | "Yellow Disabled": { 755 | "value": "{color.Core.Yellow.300}", 756 | "group": "color" 757 | }, 758 | "Green": { 759 | "value": "{color.Core.Green.900}", 760 | "group": "color" 761 | }, 762 | "Green Disabled": { 763 | "value": "{color.Core.Green.200}", 764 | "group": "color" 765 | }, 766 | "Teal": { 767 | "value": "{color.Core.Teal.900}", 768 | "group": "color" 769 | }, 770 | "Teal Disabled": { 771 | "value": "{color.Core.Teal.300}", 772 | "group": "color" 773 | }, 774 | "Blue": { 775 | "value": "{color.Core.Blue.900}", 776 | "group": "color" 777 | }, 778 | "Blue Disabled": { 779 | "value": "{color.Core.Blue.200}", 780 | "group": "color" 781 | }, 782 | "White": { 783 | "value": "{color.Core.Slate.700}", 784 | "group": "color" 785 | }, 786 | "White Disabled": { 787 | "value": "{color.Core.Slate.100}", 788 | "group": "color" 789 | } 790 | } 791 | }, 792 | "Input": { 793 | "Default": { 794 | "value": "{color.Core.Slate.800}", 795 | "group": "color" 796 | }, 797 | "Active": { 798 | "value": "{color.Primary.Purple}", 799 | "group": "color" 800 | }, 801 | "Danger": { 802 | "value": "{color.Core.Red.800}", 803 | "group": "color" 804 | }, 805 | "Disabled": { 806 | "value": "{color.Core.Slate.400}", 807 | "group": "color" 808 | } 809 | }, 810 | "Note": { 811 | "Default": { 812 | "value": "{color.Core.Yellow.600}", 813 | "group": "color" 814 | }, 815 | "Feedback": { 816 | "value": "{color.Core.Blue.600}", 817 | "group": "color" 818 | }, 819 | "Action Item": { 820 | "value": "{color.Core.Red.600}", 821 | "group": "color" 822 | }, 823 | "Flow": { 824 | "value": "{color.Core.Purple.600}", 825 | "group": "color" 826 | } 827 | } 828 | } 829 | } 830 | } 831 | --------------------------------------------------------------------------------