├── .eslintignore ├── .eslintrc.cjs ├── .gitignore ├── .prettierrc ├── .vscode ├── extensions.json └── settings.json ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE.txt ├── README.md ├── SECURITY.md ├── demo ├── dark.json ├── global.json ├── light.json ├── manifest.json ├── manifest.web.json ├── primitives.json └── sample.tokens.json ├── manifest.json ├── package-lock.json ├── package.json ├── src ├── assets │ └── import.svg ├── controller │ ├── index.ts │ └── variables.ts ├── shared │ └── collab.ts ├── ui │ ├── components │ │ ├── App.tsx │ │ ├── Button.tsx │ │ ├── Disclosure.tsx │ │ ├── FileDropZone.tsx │ │ ├── Footer.tsx │ │ ├── Icons.tsx │ │ ├── MainPage.tsx │ │ ├── PluginLayout.tsx │ │ ├── Textbox.tsx │ │ └── UploadLink.tsx │ ├── index.html │ ├── index.tsx │ └── styles.scss └── utils │ ├── classNames.ts │ ├── color.ts │ └── tokens │ ├── aliases.ts │ ├── index.ts │ ├── iteration.ts │ ├── types.ts │ └── utils.ts ├── tsconfig.json ├── typings └── assets.d.ts └── webpack.config.js /.eslintignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | .env 5 | .env.* 6 | -------------------------------------------------------------------------------- /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | // prettier-ignore 2 | 3 | module.exports = { 4 | "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"], 5 | "root": true, 6 | "ignorePatterns": ["build/", "node_modules/"], 7 | "env": { 8 | "browser": true, 9 | "es2017": true, 10 | "node": true 11 | }, 12 | "parser": "@typescript-eslint/parser", 13 | "parserOptions": { 14 | "sourceType": "module", 15 | "ecmaVersion": 2020 16 | }, 17 | "plugins": ["@typescript-eslint"], 18 | "rules": { 19 | "comma-style": ["warn", "last"], 20 | "dot-notation": "warn", 21 | "eqeqeq": ["error", "always"], 22 | "func-call-spacing": ["warn", "never"], 23 | "lines-between-class-members": ["warn", "always", { "exceptAfterSingleLine": true }], 24 | "no-cond-assign": ["error", "always"], 25 | "no-console": "off", 26 | "no-multi-spaces": "warn", 27 | "no-prototype-builtins": "off", 28 | "no-shadow": "off", 29 | "no-trailing-spaces": "warn", 30 | "no-var": "error", 31 | "padded-blocks": ["warn", "never"], 32 | "prefer-const": "warn", 33 | "prefer-rest-params": "warn", 34 | "space-infix-ops": "error", 35 | "spaced-comment": ["warn", "always", { 36 | "line": { 37 | "markers": ["/"] 38 | }, 39 | "block": { 40 | "balanced": true 41 | } 42 | }], 43 | "yoda": ["warn", "never"], 44 | "@typescript-eslint/no-empty-interface": "off", 45 | "@typescript-eslint/no-explicit-any": "off", 46 | "@typescript-eslint/no-inferrable-types": "off", 47 | "@typescript-eslint/no-non-null-assertion": "off", 48 | "@typescript-eslint/no-shadow": "error", 49 | "@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }], 50 | "@typescript-eslint/no-var-requires": "off", 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # ========================= 12 | # Operating System Files 13 | # ========================= 14 | 15 | # OSX 16 | # ========================= 17 | 18 | .DS_Store 19 | .AppleDouble 20 | .LSOverride 21 | 22 | # Thumbnails 23 | ._* 24 | 25 | # Generated files 26 | *.scss.ts 27 | 28 | # Files that might appear on external disk 29 | .Spotlight-V100 30 | .Trashes 31 | 32 | .bin 33 | dist.stats.json 34 | bower_components 35 | node_modules 36 | temp 37 | lib 38 | lib-amd 39 | lib-commonjs 40 | lib-es2015 41 | coverage 42 | dist 43 | build 44 | test-dependencies 45 | screenshots 46 | 47 | # Editor project files 48 | .vs/ 49 | *.sublime-project 50 | *.sublime-workspace 51 | .idea 52 | /.settings/ 53 | 54 | # NPM Install Temp 55 | __temp/ 56 | 57 | # Logs 58 | *.log 59 | npminstall-log.txt 60 | npm-debug.log* 61 | yarn-debug.log* 62 | yarn-error.log* 63 | 64 | # NPM debug logs 65 | npm-debug.log.* 66 | 67 | *.swp 68 | 69 | # package manifest 70 | /package-manifest.json 71 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "useTabs": true, 4 | "tabWidth": 4, 5 | "singleQuote": false, 6 | "bracketSpacing": true, 7 | "jsxBracketSameLine": false, 8 | "semi": false, 9 | "printWidth": 140, 10 | "arrowParens": "avoid" 11 | } 12 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "dbaeumer.vscode-eslint", 4 | "esbenp.prettier-vscode", 5 | "styled-components.vscode-styled-components" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.defaultFormatter": "esbenp.prettier-vscode", 3 | "editor.formatOnSave": true, 4 | "editor.insertSpaces": false, 5 | "editor.tabSize": 4, 6 | "editor.useTabStops": true, 7 | "eslint.format.enable": true, 8 | "eslint.lintTask.enable": true, 9 | "eslint.packageManager": "npm", 10 | "eslint.validate": [ 11 | "javascript", 12 | "javascriptreact" 13 | ], 14 | "files.insertFinalNewline": true, 15 | "files.trimTrailingWhitespace": true, 16 | "files.exclude": { 17 | "node_modules": true 18 | }, 19 | "javascript.suggestionActions.enabled": false, 20 | "typescript.tsdk": "node_modules/typescript/lib", 21 | "[javascript]": { 22 | "editor.defaultFormatter": "esbenp.prettier-vscode" 23 | }, 24 | "[json]": { 25 | "editor.formatOnSave": false 26 | }, 27 | "[typescriptreact]": { 28 | "editor.defaultFormatter": "esbenp.prettier-vscode", 29 | "editor.foldingStrategy": "indentation" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Microsoft Open Source Code of Conduct 2 | 3 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 4 | 5 | Resources: 6 | 7 | - [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/) 8 | - [Microsoft Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) 9 | - Contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with questions or concerns 10 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com. 4 | 5 | When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA. 6 | 7 | This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). 8 | For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or 9 | contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments. 10 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) Microsoft Corporation. 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 | # Variables Import 2 | 3 | This Figma plugin allows you to import design tokens in the [Design Token Community Group](https://design-tokens.github.io/community-group/format/) format as Figma Variables. 4 | 5 | This plugin does not contain a fully spec-compliant parser for the DTCG format and cannot handle every single valid token file—it's just a tool we built for internal use. 6 | 7 | The following token types are supported: 8 | 9 | - `string` 10 | - `number`, `dimension`, `duration` 11 | - `boolean` 12 | - `string` 13 | - Aliases to any other supported token in the same JSON and Figma file 14 | 15 | The following are supported **only** when running a local copy of this plugin, not from the Figma Community: 16 | 17 | - Aliases to any other supported token in a different JSON file and Figma file, if the other Figma file has published the variables to a team library 18 | 19 | ## Setup 20 | 21 | ### Node.js 22 | 23 | Install [Node.js](https://nodejs.org/en/download) so you can build this project. 24 | 25 | ### Install 26 | 27 | Then install dependencies. 28 | 29 | ```bash 30 | npm install 31 | ``` 32 | 33 | ### Build 34 | 35 | Then you can build. 36 | 37 | #### Dev 38 | 39 | To enable all features, you need to open `manifest.json` and add the following line: 40 | 41 | ```json 42 | "enableProposedApi": true 43 | ``` 44 | 45 | Then, you can start a background build with: 46 | 47 | ```bash 48 | npm run build:watch 49 | ``` 50 | 51 | #### Production 52 | 53 | ```bash 54 | npm run build 55 | ``` 56 | 57 | `enableProposedApi` **cannot** be used in a plugin published to the Figma community, even internal to your own organization. 58 | 59 | ### Adding to Figma 60 | 61 | Add this plugin to Figma using "[import new plugin from manifest](https://help.figma.com/hc/en-us/articles/360042786733-Create-a-plugin-for-development)". 62 | 63 | --- 64 | 65 | # The legal stuff 66 | 67 | © 2023 Microsoft. MIT license. 68 | 69 | ## Trademarks 70 | 71 | This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's [Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general). Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies. 72 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Security 4 | 5 | Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/). 6 | 7 | If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](), please report it to us as described below. 8 | 9 | ## Reporting Security Issues 10 | 11 | **Please do not report security vulnerabilities through public GitHub issues.** 12 | 13 | Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report). 14 | 15 | If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc). 16 | 17 | You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc). 18 | 19 | Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue: 20 | 21 | - Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.) 22 | - Full paths of source file(s) related to the manifestation of the issue 23 | - The location of the affected source code (tag/branch/commit or direct URL) 24 | - Any special configuration required to reproduce the issue 25 | - Step-by-step instructions to reproduce the issue 26 | - Proof-of-concept or exploit code (if possible) 27 | - Impact of the issue, including how an attacker might exploit the issue 28 | 29 | This information will help us triage your report more quickly. 30 | 31 | If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs. 32 | 33 | ## Preferred Languages 34 | 35 | We prefer all communications to be in English. 36 | 37 | ## Policy 38 | 39 | Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd). 40 | 41 | 42 | -------------------------------------------------------------------------------- /demo/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "NeutralForeground1": { 3 | "Fill": { 4 | "Color": { 5 | "Rest": { 6 | "$type": "color", 7 | "$value": "{Global.Color.White}" 8 | }, 9 | "Hover": { 10 | "$type": "color", 11 | "$value": "{Global.Color.White}" 12 | }, 13 | "Pressed": { 14 | "$type": "color", 15 | "$value": "{Global.Color.White}" 16 | }, 17 | "Selected": { 18 | "$type": "color", 19 | "$value": "{Global.Color.White}" 20 | } 21 | } 22 | } 23 | }, 24 | "NeutralForeground2": { 25 | "Fill": { 26 | "Color": { 27 | "Rest": { 28 | "$type": "color", 29 | "$value": "{Global.Color.Grey.84}" 30 | }, 31 | "Hover": { 32 | "$type": "color", 33 | "$value": "{Global.Color.White}" 34 | }, 35 | "Pressed": { 36 | "$type": "color", 37 | "$value": "{Global.Color.White}" 38 | }, 39 | "Selected": { 40 | "$type": "color", 41 | "$value": "{Global.Color.White}" 42 | }, 43 | "BrandHover": { 44 | "$type": "color", 45 | "$value": "{Global.Color.Brand.100}" 46 | }, 47 | "BrandPressed": { 48 | "$type": "color", 49 | "$value": "{Global.Color.Brand.90}" 50 | }, 51 | "BrandSelected": { 52 | "$type": "color", 53 | "$value": "{Global.Color.Brand.100}" 54 | } 55 | } 56 | } 57 | }, 58 | "NeutralForeground3": { 59 | "Fill": { 60 | "Color": { 61 | "Rest": { 62 | "$type": "color", 63 | "$value": "{Global.Color.Grey.68}" 64 | }, 65 | "Hover": { 66 | "$type": "color", 67 | "$value": "{Global.Color.Grey.84}" 68 | }, 69 | "Pressed": { 70 | "$type": "color", 71 | "$value": "{Global.Color.Grey.84}" 72 | }, 73 | "Selected": { 74 | "$type": "color", 75 | "$value": "{Global.Color.Grey.84}" 76 | }, 77 | "BrandHover": { 78 | "$type": "color", 79 | "$value": "{Global.Color.Brand.100}" 80 | }, 81 | "BrandPressed": { 82 | "$type": "color", 83 | "$value": "{Global.Color.Brand.90}" 84 | }, 85 | "BrandSelected": { 86 | "$type": "color", 87 | "$value": "{Global.Color.Brand.100}" 88 | } 89 | } 90 | } 91 | }, 92 | "NeutralForeground4": { 93 | "Fill": { 94 | "Color": { 95 | "Rest": { 96 | "$type": "color", 97 | "$value": "{Global.Color.Grey.60}" 98 | } 99 | } 100 | } 101 | }, 102 | "NeutralForegroundDisabled": { 103 | "Fill": { 104 | "Color": { 105 | "Rest": { 106 | "$type": "color", 107 | "$value": "{Global.Color.Grey.36}" 108 | } 109 | } 110 | } 111 | }, 112 | "NeutralForegroundInvertedDisabled": { 113 | "Fill": { 114 | "Color": { 115 | "Rest": { 116 | "$type": "color", 117 | "$value": "{Global.Color.WhiteAlpha.40}" 118 | } 119 | } 120 | } 121 | }, 122 | "BrandForegroundLink": { 123 | "Fill": { 124 | "Color": { 125 | "Rest": { 126 | "$type": "color", 127 | "$value": "{Global.Color.Brand.100}" 128 | }, 129 | "Hover": { 130 | "$type": "color", 131 | "$value": "{Global.Color.Brand.110}" 132 | }, 133 | "Pressed": { 134 | "$type": "color", 135 | "$value": "{Global.Color.Brand.90}" 136 | }, 137 | "Selected": { 138 | "$type": "color", 139 | "$value": "{Global.Color.Brand.100}" 140 | } 141 | } 142 | } 143 | }, 144 | "NeutralForeground2Link": { 145 | "Fill": { 146 | "Color": { 147 | "Rest": { 148 | "$type": "color", 149 | "$value": "{Global.Color.Grey.84}" 150 | }, 151 | "Hover": { 152 | "$type": "color", 153 | "$value": "{Global.Color.White}" 154 | }, 155 | "Pressed": { 156 | "$type": "color", 157 | "$value": "{Global.Color.White}" 158 | }, 159 | "Selected": { 160 | "$type": "color", 161 | "$value": "{Global.Color.White}" 162 | } 163 | } 164 | } 165 | }, 166 | "CompoundBrandForeground1": { 167 | "Fill": { 168 | "Color": { 169 | "Rest": { 170 | "$type": "color", 171 | "$value": "{Global.Color.Brand.100}" 172 | }, 173 | "Hover": { 174 | "$type": "color", 175 | "$value": "{Global.Color.Brand.110}" 176 | }, 177 | "Pressed": { 178 | "$type": "color", 179 | "$value": "{Global.Color.Brand.90}" 180 | } 181 | } 182 | } 183 | }, 184 | "BrandForeground1": { 185 | "Fill": { 186 | "Color": { 187 | "Rest": { 188 | "$type": "color", 189 | "$value": "{Global.Color.Brand.100}" 190 | } 191 | } 192 | } 193 | }, 194 | "BrandForeground2": { 195 | "Fill": { 196 | "Color": { 197 | "Rest": { 198 | "$type": "color", 199 | "$value": "{Global.Color.Brand.110}" 200 | } 201 | } 202 | } 203 | }, 204 | "NeutralForeground1Static": { 205 | "Fill": { 206 | "Color": { 207 | "Rest": { 208 | "$type": "color", 209 | "$value": "{Global.Color.Grey.14}" 210 | } 211 | } 212 | } 213 | }, 214 | "NeutralForegroundStaticInverted": { 215 | "Fill": { 216 | "Color": { 217 | "Rest": { 218 | "$type": "color", 219 | "$value": "{Global.Color.White}" 220 | } 221 | } 222 | } 223 | }, 224 | "NeutralForegroundInverted": { 225 | "Fill": { 226 | "Color": { 227 | "Rest": { 228 | "$type": "color", 229 | "$value": "{Global.Color.Grey.14}" 230 | }, 231 | "Hover": { 232 | "$type": "color", 233 | "$value": "{Global.Color.Grey.14}" 234 | }, 235 | "Pressed": { 236 | "$type": "color", 237 | "$value": "{Global.Color.Grey.14}" 238 | }, 239 | "Selected": { 240 | "$type": "color", 241 | "$value": "{Global.Color.Grey.14}" 242 | } 243 | } 244 | } 245 | }, 246 | "NeutralForegroundInverted2": { 247 | "Fill": { 248 | "Color": { 249 | "Rest": { 250 | "$type": "color", 251 | "$value": "{Global.Color.Grey.14}" 252 | } 253 | } 254 | } 255 | }, 256 | "NeutralForegroundOnBrand": { 257 | "Fill": { 258 | "Color": { 259 | "Rest": { 260 | "$type": "color", 261 | "$value": "{Global.Color.White}" 262 | } 263 | } 264 | } 265 | }, 266 | "NeutralForegroundInvertedLink": { 267 | "Fill": { 268 | "Color": { 269 | "Rest": { 270 | "$type": "color", 271 | "$value": "{Global.Color.White}" 272 | }, 273 | "Hover": { 274 | "$type": "color", 275 | "$value": "{Global.Color.White}" 276 | }, 277 | "Pressed": { 278 | "$type": "color", 279 | "$value": "{Global.Color.White}" 280 | }, 281 | "Selected": { 282 | "$type": "color", 283 | "$value": "{Global.Color.White}" 284 | } 285 | } 286 | } 287 | }, 288 | "BrandForegroundInverted": { 289 | "Fill": { 290 | "Color": { 291 | "Rest": { 292 | "$type": "color", 293 | "$value": "{Global.Color.Brand.80}" 294 | }, 295 | "Hover": { 296 | "$type": "color", 297 | "$value": "{Global.Color.Brand.70}" 298 | }, 299 | "Pressed": { 300 | "$type": "color", 301 | "$value": "{Global.Color.Brand.60}" 302 | } 303 | } 304 | } 305 | }, 306 | "BrandForegroundOnLight": { 307 | "Fill": { 308 | "Color": { 309 | "Rest": { 310 | "$type": "color", 311 | "$value": "{Global.Color.Brand.80}" 312 | }, 313 | "Hover": { 314 | "$type": "color", 315 | "$value": "{Global.Color.Brand.70}" 316 | }, 317 | "Pressed": { 318 | "$type": "color", 319 | "$value": "{Global.Color.Brand.50}" 320 | }, 321 | "Selected": { 322 | "$type": "color", 323 | "$value": "{Global.Color.Brand.60}" 324 | } 325 | } 326 | } 327 | }, 328 | "RedForeground1": { 329 | "Fill": { 330 | "Color": { 331 | "Rest": { 332 | "$type": "color", 333 | "$value": "{Global.Color.Red.Tint30}" 334 | } 335 | } 336 | } 337 | }, 338 | "RedForeground3": { 339 | "Fill": { 340 | "Color": { 341 | "Rest": { 342 | "$type": "color", 343 | "$value": "{Global.Color.Red.Tint30}" 344 | } 345 | } 346 | } 347 | }, 348 | "GreenForeground1": { 349 | "Fill": { 350 | "Color": { 351 | "Rest": { 352 | "$type": "color", 353 | "$value": "{Global.Color.Green.Tint30}" 354 | } 355 | } 356 | } 357 | }, 358 | "GreenForeground3": { 359 | "Fill": { 360 | "Color": { 361 | "Rest": { 362 | "$type": "color", 363 | "$value": "{Global.Color.Green.Tint40}" 364 | } 365 | } 366 | } 367 | }, 368 | "DarkOrangeForeground1": { 369 | "Fill": { 370 | "Color": { 371 | "Rest": { 372 | "$type": "color", 373 | "$value": "{Global.Color.DarkOrange.Tint30}" 374 | } 375 | } 376 | } 377 | }, 378 | "DarkOrangeForeground3": { 379 | "Fill": { 380 | "Color": { 381 | "Rest": { 382 | "$type": "color", 383 | "$value": "{Global.Color.DarkOrange.Tint30}" 384 | } 385 | } 386 | } 387 | }, 388 | "YellowForeground1": { 389 | "Fill": { 390 | "Color": { 391 | "Rest": { 392 | "$type": "color", 393 | "$value": "{Global.Color.Yellow.Tint30}" 394 | } 395 | } 396 | } 397 | }, 398 | "YellowForeground2": { 399 | "Fill": { 400 | "Color": { 401 | "Rest": { 402 | "$type": "color", 403 | "$value": "{Global.Color.Yellow.Tint40}" 404 | } 405 | } 406 | } 407 | }, 408 | "NeutralBackground1": { 409 | "Fill": { 410 | "Color": { 411 | "Rest": { 412 | "$type": "color", 413 | "$value": "{Global.Color.Grey.16}" 414 | }, 415 | "Hover": { 416 | "$type": "color", 417 | "$value": "{Global.Color.Grey.24}" 418 | }, 419 | "Pressed": { 420 | "$type": "color", 421 | "$value": "{Global.Color.Grey.12}" 422 | }, 423 | "Selected": { 424 | "$type": "color", 425 | "$value": "{Global.Color.Grey.22}" 426 | } 427 | } 428 | } 429 | }, 430 | "NeutralBackground2": { 431 | "Fill": { 432 | "Color": { 433 | "Rest": { 434 | "$type": "color", 435 | "$value": "{Global.Color.Grey.12}" 436 | }, 437 | "Hover": { 438 | "$type": "color", 439 | "$value": "{Global.Color.Grey.20}" 440 | }, 441 | "Pressed": { 442 | "$type": "color", 443 | "$value": "{Global.Color.Grey.8}" 444 | }, 445 | "Selected": { 446 | "$type": "color", 447 | "$value": "{Global.Color.Grey.18}" 448 | } 449 | } 450 | } 451 | }, 452 | "NeutralBackground3": { 453 | "Fill": { 454 | "Color": { 455 | "Rest": { 456 | "$type": "color", 457 | "$value": "{Global.Color.Grey.8}" 458 | }, 459 | "Hover": { 460 | "$type": "color", 461 | "$value": "{Global.Color.Grey.16}" 462 | }, 463 | "Pressed": { 464 | "$type": "color", 465 | "$value": "{Global.Color.Grey.4}" 466 | }, 467 | "Selected": { 468 | "$type": "color", 469 | "$value": "{Global.Color.Grey.14}" 470 | } 471 | } 472 | } 473 | }, 474 | "NeutralBackground4": { 475 | "Fill": { 476 | "Color": { 477 | "Rest": { 478 | "$type": "color", 479 | "$value": "{Global.Color.Grey.4}" 480 | }, 481 | "Hover": { 482 | "$type": "color", 483 | "$value": "{Global.Color.Grey.12}" 484 | }, 485 | "Pressed": { 486 | "$type": "color", 487 | "$value": "{Global.Color.Black}" 488 | }, 489 | "Selected": { 490 | "$type": "color", 491 | "$value": "{Global.Color.Grey.10}" 492 | } 493 | } 494 | } 495 | }, 496 | "NeutralBackground5": { 497 | "Fill": { 498 | "Color": { 499 | "Rest": { 500 | "$type": "color", 501 | "$value": "{Global.Color.Black}" 502 | }, 503 | "Hover": { 504 | "$type": "color", 505 | "$value": "{Global.Color.Grey.8}" 506 | }, 507 | "Pressed": { 508 | "$type": "color", 509 | "$value": "{Global.Color.Grey.2}" 510 | }, 511 | "Selected": { 512 | "$type": "color", 513 | "$value": "{Global.Color.Grey.6}" 514 | } 515 | } 516 | } 517 | }, 518 | "NeutralBackground6": { 519 | "Fill": { 520 | "Color": { 521 | "Rest": { 522 | "$type": "color", 523 | "$value": "{Global.Color.Grey.20}" 524 | } 525 | } 526 | } 527 | }, 528 | "NeutralBackgroundInverted": { 529 | "Fill": { 530 | "Color": { 531 | "Rest": { 532 | "$type": "color", 533 | "$value": "{Global.Color.White}" 534 | } 535 | } 536 | } 537 | }, 538 | "NeutralBackgroundStatic": { 539 | "Fill": { 540 | "Color": { 541 | "Rest": { 542 | "$type": "color", 543 | "$value": "{Global.Color.Grey.24}" 544 | } 545 | } 546 | } 547 | }, 548 | "NeutralBackgroundAlpha": { 549 | "Fill": { 550 | "Color": { 551 | "Rest": { 552 | "$type": "color", 553 | "$value": "{Global.Color.Grey10Alpha.50}" 554 | } 555 | } 556 | } 557 | }, 558 | "NeutralBackgroundAlpha2": { 559 | "Fill": { 560 | "Color": { 561 | "Rest": { 562 | "$type": "color", 563 | "$value": "{Global.Color.Grey12Alpha.70}" 564 | } 565 | } 566 | } 567 | }, 568 | "SubtleBackground": { 569 | "Fill": { 570 | "Color": { 571 | "Rest": { 572 | "$type": "color", 573 | "$value": "#00000000" 574 | }, 575 | "Hover": { 576 | "$type": "color", 577 | "$value": "{Global.Color.Grey.22}" 578 | }, 579 | "Pressed": { 580 | "$type": "color", 581 | "$value": "{Global.Color.Grey.18}" 582 | }, 583 | "Selected": { 584 | "$type": "color", 585 | "$value": "{Global.Color.Grey.20}" 586 | }, 587 | "LightAlphaHover": { 588 | "$type": "color", 589 | "$value": "{Global.Color.Grey14Alpha.80}" 590 | }, 591 | "LightAlphaPressed": { 592 | "$type": "color", 593 | "$value": "{Global.Color.Grey14Alpha.50}" 594 | }, 595 | "LightAlphaSelected": { 596 | "$type": "color", 597 | "$value": "#00000000" 598 | } 599 | } 600 | } 601 | }, 602 | "SubtleBackgroundInverted": { 603 | "Fill": { 604 | "Color": { 605 | "Rest": { 606 | "$type": "color", 607 | "$value": "#00000000" 608 | }, 609 | "Hover": { 610 | "$type": "color", 611 | "$value": "{Global.Color.BlackAlpha.10}" 612 | }, 613 | "Pressed": { 614 | "$type": "color", 615 | "$value": "{Global.Color.BlackAlpha.30}" 616 | }, 617 | "Selected": { 618 | "$type": "color", 619 | "$value": "{Global.Color.BlackAlpha.20}" 620 | } 621 | } 622 | } 623 | }, 624 | "TransparentBackground": { 625 | "Fill": { 626 | "Color": { 627 | "Rest": { 628 | "$type": "color", 629 | "$value": "#00000000" 630 | }, 631 | "Hover": { 632 | "$type": "color", 633 | "$value": "#00000000" 634 | }, 635 | "Pressed": { 636 | "$type": "color", 637 | "$value": "#00000000" 638 | }, 639 | "Selected": { 640 | "$type": "color", 641 | "$value": "#00000000" 642 | } 643 | } 644 | } 645 | }, 646 | "NeutralBackgroundDisabled": { 647 | "Fill": { 648 | "Color": { 649 | "Rest": { 650 | "$type": "color", 651 | "$value": "{Global.Color.Grey.8}" 652 | } 653 | } 654 | } 655 | }, 656 | "NeutralBackgroundInvertedDisabled": { 657 | "Fill": { 658 | "Color": { 659 | "Rest": { 660 | "$type": "color", 661 | "$value": "{Global.Color.WhiteAlpha.10}" 662 | } 663 | } 664 | } 665 | }, 666 | "NeutralStencil1": { 667 | "Fill": { 668 | "Color": { 669 | "Rest": { 670 | "$type": "color", 671 | "$value": "{Global.Color.Grey.34}" 672 | } 673 | } 674 | } 675 | }, 676 | "NeutralStencil2": { 677 | "Fill": { 678 | "Color": { 679 | "Rest": { 680 | "$type": "color", 681 | "$value": "{Global.Color.Grey.20}" 682 | } 683 | } 684 | } 685 | }, 686 | "NeutralStencil1Alpha": { 687 | "Fill": { 688 | "Color": { 689 | "Rest": { 690 | "$type": "color", 691 | "$value": "{Global.Color.WhiteAlpha.10}" 692 | } 693 | } 694 | } 695 | }, 696 | "NeutralStencil2Alpha": { 697 | "Fill": { 698 | "Color": { 699 | "Rest": { 700 | "$type": "color", 701 | "$value": "{Global.Color.WhiteAlpha.5}" 702 | } 703 | } 704 | } 705 | }, 706 | "BackgroundOverlay": { 707 | "Fill": { 708 | "Color": { 709 | "Rest": { 710 | "$type": "color", 711 | "$value": "{Global.Color.BlackAlpha.50}" 712 | } 713 | } 714 | } 715 | }, 716 | "ScrollbarOverlay": { 717 | "Fill": { 718 | "Color": { 719 | "Rest": { 720 | "$type": "color", 721 | "$value": "{Global.Color.WhiteAlpha.60}" 722 | } 723 | } 724 | } 725 | }, 726 | "BrandBackground": { 727 | "Fill": { 728 | "Color": { 729 | "Rest": { 730 | "$type": "color", 731 | "$value": "{Global.Color.Brand.70}" 732 | }, 733 | "Hover": { 734 | "$type": "color", 735 | "$value": "{Global.Color.Brand.80}" 736 | }, 737 | "Pressed": { 738 | "$type": "color", 739 | "$value": "{Global.Color.Brand.40}" 740 | }, 741 | "Selected": { 742 | "$type": "color", 743 | "$value": "{Global.Color.Brand.60}" 744 | } 745 | } 746 | } 747 | }, 748 | "CompoundBrandBackground": { 749 | "Fill": { 750 | "Color": { 751 | "Rest": { 752 | "$type": "color", 753 | "$value": "{Global.Color.Brand.100}" 754 | }, 755 | "Hover": { 756 | "$type": "color", 757 | "$value": "{Global.Color.Brand.110}" 758 | }, 759 | "Pressed": { 760 | "$type": "color", 761 | "$value": "{Global.Color.Brand.90}" 762 | } 763 | } 764 | } 765 | }, 766 | "BrandBackgroundStatic": { 767 | "Fill": { 768 | "Color": { 769 | "Rest": { 770 | "$type": "color", 771 | "$value": "{Global.Color.Brand.80}" 772 | } 773 | } 774 | } 775 | }, 776 | "BrandBackground2": { 777 | "Fill": { 778 | "Color": { 779 | "Rest": { 780 | "$type": "color", 781 | "$value": "{Global.Color.Brand.40}" 782 | } 783 | } 784 | } 785 | }, 786 | "BrandBackgroundInverted": { 787 | "Fill": { 788 | "Color": { 789 | "Rest": { 790 | "$type": "color", 791 | "$value": "{Global.Color.White}" 792 | }, 793 | "Hover": { 794 | "$type": "color", 795 | "$value": "{Global.Color.Brand.160}" 796 | }, 797 | "Pressed": { 798 | "$type": "color", 799 | "$value": "{Global.Color.Brand.140}" 800 | }, 801 | "Selected": { 802 | "$type": "color", 803 | "$value": "{Global.Color.Brand.150}" 804 | } 805 | } 806 | } 807 | }, 808 | "RedBackground1": { 809 | "Fill": { 810 | "Color": { 811 | "Rest": { 812 | "$type": "color", 813 | "$value": "{Global.Color.Red.Shade40}" 814 | } 815 | } 816 | } 817 | }, 818 | "RedBackground3": { 819 | "Fill": { 820 | "Color": { 821 | "Rest": { 822 | "$type": "color", 823 | "$value": "{Global.Color.Red.Primary}" 824 | } 825 | } 826 | } 827 | }, 828 | "GreenBackground1": { 829 | "Fill": { 830 | "Color": { 831 | "Rest": { 832 | "$type": "color", 833 | "$value": "{Global.Color.Green.Shade40}" 834 | } 835 | } 836 | } 837 | }, 838 | "GreenBackground3": { 839 | "Fill": { 840 | "Color": { 841 | "Rest": { 842 | "$type": "color", 843 | "$value": "{Global.Color.Green.Primary}" 844 | } 845 | } 846 | } 847 | }, 848 | "DarkOrangeBackground1": { 849 | "Fill": { 850 | "Color": { 851 | "Rest": { 852 | "$type": "color", 853 | "$value": "{Global.Color.DarkOrange.Shade40}" 854 | } 855 | } 856 | } 857 | }, 858 | "DarkOrangeBackground3": { 859 | "Fill": { 860 | "Color": { 861 | "Rest": { 862 | "$type": "color", 863 | "$value": "{Global.Color.DarkOrange.Primary}" 864 | } 865 | } 866 | } 867 | }, 868 | "YellowBackground1": { 869 | "Fill": { 870 | "Color": { 871 | "Rest": { 872 | "$type": "color", 873 | "$value": "{Global.Color.Yellow.Shade40}" 874 | } 875 | } 876 | } 877 | }, 878 | "YellowBackground3": { 879 | "Fill": { 880 | "Color": { 881 | "Rest": { 882 | "$type": "color", 883 | "$value": "{Global.Color.Yellow.Primary}" 884 | } 885 | } 886 | } 887 | }, 888 | "NeutralStrokeAccessible": { 889 | "Stroke": { 890 | "Color": { 891 | "Rest": { 892 | "$type": "color", 893 | "$value": "{Global.Color.Grey.68}" 894 | }, 895 | "Hover": { 896 | "$type": "color", 897 | "$value": "{Global.Color.Grey.74}" 898 | }, 899 | "Pressed": { 900 | "$type": "color", 901 | "$value": "{Global.Color.Grey.70}" 902 | }, 903 | "Selected": { 904 | "$type": "color", 905 | "$value": "{Global.Color.Brand.100}" 906 | } 907 | } 908 | } 909 | }, 910 | "NeutralStroke1": { 911 | "Stroke": { 912 | "Color": { 913 | "Rest": { 914 | "$type": "color", 915 | "$value": "{Global.Color.Grey.40}" 916 | }, 917 | "Hover": { 918 | "$type": "color", 919 | "$value": "{Global.Color.Grey.46}" 920 | }, 921 | "Pressed": { 922 | "$type": "color", 923 | "$value": "{Global.Color.Grey.42}" 924 | }, 925 | "Selected": { 926 | "$type": "color", 927 | "$value": "{Global.Color.Grey.44}" 928 | } 929 | } 930 | } 931 | }, 932 | "NeutralStroke2": { 933 | "Stroke": { 934 | "Color": { 935 | "Rest": { 936 | "$type": "color", 937 | "$value": "{Global.Color.Grey.32}" 938 | } 939 | } 940 | } 941 | }, 942 | "NeutralStroke3": { 943 | "Stroke": { 944 | "Color": { 945 | "Rest": { 946 | "$type": "color", 947 | "$value": "{Global.Color.Grey.24}" 948 | } 949 | } 950 | } 951 | }, 952 | "NeutralStrokeOnBrand": { 953 | "Stroke": { 954 | "Color": { 955 | "Rest": { 956 | "$type": "color", 957 | "$value": "{Global.Color.Grey.16}" 958 | } 959 | } 960 | } 961 | }, 962 | "NeutralStrokeOnBrand2": { 963 | "Stroke": { 964 | "Color": { 965 | "Rest": { 966 | "$type": "color", 967 | "$value": "{Global.Color.White}" 968 | }, 969 | "Hover": { 970 | "$type": "color", 971 | "$value": "{Global.Color.White}" 972 | }, 973 | "Pressed": { 974 | "$type": "color", 975 | "$value": "{Global.Color.White}" 976 | }, 977 | "Selected": { 978 | "$type": "color", 979 | "$value": "{Global.Color.White}" 980 | } 981 | } 982 | } 983 | }, 984 | "BrandStroke1": { 985 | "Stroke": { 986 | "Color": { 987 | "Rest": { 988 | "$type": "color", 989 | "$value": "{Global.Color.Brand.100}" 990 | } 991 | } 992 | } 993 | }, 994 | "BrandStroke2": { 995 | "Stroke": { 996 | "Color": { 997 | "Rest": { 998 | "$type": "color", 999 | "$value": "{Global.Color.Brand.50}" 1000 | } 1001 | } 1002 | } 1003 | }, 1004 | "CompoundBrandStroke": { 1005 | "Stroke": { 1006 | "Color": { 1007 | "Rest": { 1008 | "$type": "color", 1009 | "$value": "{Global.Color.Brand.100}" 1010 | }, 1011 | "Hover": { 1012 | "$type": "color", 1013 | "$value": "{Global.Color.Brand.110}" 1014 | }, 1015 | "Pressed": { 1016 | "$type": "color", 1017 | "$value": "{Global.Color.Brand.90}" 1018 | } 1019 | } 1020 | } 1021 | }, 1022 | "NeutralStrokeDisabled": { 1023 | "Stroke": { 1024 | "Color": { 1025 | "Rest": { 1026 | "$type": "color", 1027 | "$value": "{Global.Color.Grey.26}" 1028 | } 1029 | } 1030 | } 1031 | }, 1032 | "NeutralStrokeInvertedDisabled": { 1033 | "Stroke": { 1034 | "Color": { 1035 | "Rest": { 1036 | "$type": "color", 1037 | "$value": "{Global.Color.WhiteAlpha.40}" 1038 | } 1039 | } 1040 | } 1041 | }, 1042 | "TransparentStroke": { 1043 | "Stroke": { 1044 | "Color": { 1045 | "Rest": { 1046 | "$type": "color", 1047 | "$value": "#00000000" 1048 | } 1049 | } 1050 | } 1051 | }, 1052 | "TransparentStrokeInteractive": { 1053 | "Stroke": { 1054 | "Color": { 1055 | "Rest": { 1056 | "$type": "color", 1057 | "$value": "#00000000" 1058 | } 1059 | } 1060 | } 1061 | }, 1062 | "TransparentStrokeDisabled": { 1063 | "Stroke": { 1064 | "Color": { 1065 | "Rest": { 1066 | "$type": "color", 1067 | "$value": "#00000000" 1068 | } 1069 | } 1070 | } 1071 | }, 1072 | "NeutralStrokeAlpha": { 1073 | "Stroke": { 1074 | "Color": { 1075 | "Rest": { 1076 | "$type": "color", 1077 | "$value": "{Global.Color.WhiteAlpha.10}" 1078 | } 1079 | } 1080 | } 1081 | }, 1082 | "StrokeFocus1": { 1083 | "Stroke": { 1084 | "Color": { 1085 | "Rest": { 1086 | "$type": "color", 1087 | "$value": "{Global.Color.Black}" 1088 | } 1089 | } 1090 | } 1091 | }, 1092 | "StrokeFocus2": { 1093 | "Stroke": { 1094 | "Color": { 1095 | "Rest": { 1096 | "$type": "color", 1097 | "$value": "{Global.Color.White}" 1098 | } 1099 | } 1100 | } 1101 | }, 1102 | "RedBorder1": { 1103 | "Stroke": { 1104 | "Color": { 1105 | "Rest": { 1106 | "$type": "color", 1107 | "$value": "{Global.Color.Red.Primary}" 1108 | } 1109 | } 1110 | } 1111 | }, 1112 | "RedBorder2": { 1113 | "Stroke": { 1114 | "Color": { 1115 | "Rest": { 1116 | "$type": "color", 1117 | "$value": "{Global.Color.Red.Tint30}" 1118 | } 1119 | } 1120 | } 1121 | }, 1122 | "GreenBorder1": { 1123 | "Stroke": { 1124 | "Color": { 1125 | "Rest": { 1126 | "$type": "color", 1127 | "$value": "{Global.Color.Green.Primary}" 1128 | } 1129 | } 1130 | } 1131 | }, 1132 | "GreenBorder2": { 1133 | "Stroke": { 1134 | "Color": { 1135 | "Rest": { 1136 | "$type": "color", 1137 | "$value": "{Global.Color.Green.Tint40}" 1138 | } 1139 | } 1140 | } 1141 | }, 1142 | "DarkOrangeBorder1": { 1143 | "Stroke": { 1144 | "Color": { 1145 | "Rest": { 1146 | "$type": "color", 1147 | "$value": "{Global.Color.DarkOrange.Primary}" 1148 | } 1149 | } 1150 | } 1151 | }, 1152 | "DarkOrangeBorder2": { 1153 | "Stroke": { 1154 | "Color": { 1155 | "Rest": { 1156 | "$type": "color", 1157 | "$value": "{Global.Color.DarkOrange.Tint30}" 1158 | } 1159 | } 1160 | } 1161 | }, 1162 | "YellowBorder1": { 1163 | "Stroke": { 1164 | "Color": { 1165 | "Rest": { 1166 | "$type": "color", 1167 | "$value": "{Global.Color.Yellow.Primary}" 1168 | } 1169 | } 1170 | } 1171 | }, 1172 | "NeutralShadowAmbient": { 1173 | "Fill": { 1174 | "Color": { 1175 | "Rest": { 1176 | "$type": "color", 1177 | "$value": "#0000003d" 1178 | } 1179 | } 1180 | } 1181 | }, 1182 | "NeutralShadowKey": { 1183 | "Fill": { 1184 | "Color": { 1185 | "Rest": { 1186 | "$type": "color", 1187 | "$value": "#00000047" 1188 | } 1189 | } 1190 | } 1191 | }, 1192 | "NeutralShadowAmbientLighter": { 1193 | "Fill": { 1194 | "Color": { 1195 | "Rest": { 1196 | "$type": "color", 1197 | "$value": "#0000001f" 1198 | } 1199 | } 1200 | } 1201 | }, 1202 | "NeutralShadowKeyLighter": { 1203 | "Fill": { 1204 | "Color": { 1205 | "Rest": { 1206 | "$type": "color", 1207 | "$value": "#00000024" 1208 | } 1209 | } 1210 | } 1211 | }, 1212 | "NeutralShadowAmbientDarker": { 1213 | "Fill": { 1214 | "Color": { 1215 | "Rest": { 1216 | "$type": "color", 1217 | "$value": "#00000066" 1218 | } 1219 | } 1220 | } 1221 | }, 1222 | "NeutralShadowKeyDarker": { 1223 | "Fill": { 1224 | "Color": { 1225 | "Rest": { 1226 | "$type": "color", 1227 | "$value": "#0000007a" 1228 | } 1229 | } 1230 | } 1231 | }, 1232 | "BrandShadowAmbient": { 1233 | "Fill": { 1234 | "Color": { 1235 | "Rest": { 1236 | "$type": "color", 1237 | "$value": "#0000004d" 1238 | } 1239 | } 1240 | } 1241 | }, 1242 | "BrandShadowKey": { 1243 | "Fill": { 1244 | "Color": { 1245 | "Rest": { 1246 | "$type": "color", 1247 | "$value": "#00000040" 1248 | } 1249 | } 1250 | } 1251 | } 1252 | } 1253 | -------------------------------------------------------------------------------- /demo/global.json: -------------------------------------------------------------------------------- 1 | { 2 | "Global": { 3 | "Color": { 4 | "Brand": { 5 | "10": { 6 | "$type": "color", 7 | "$value": "#061724" 8 | }, 9 | "20": { 10 | "$type": "color", 11 | "$value": "#082338" 12 | }, 13 | "30": { 14 | "$type": "color", 15 | "$value": "#0a2e4a" 16 | }, 17 | "40": { 18 | "$type": "color", 19 | "$value": "#0c3b5e" 20 | }, 21 | "50": { 22 | "$type": "color", 23 | "$value": "#0e4775" 24 | }, 25 | "60": { 26 | "$type": "color", 27 | "$value": "#0f548c" 28 | }, 29 | "70": { 30 | "$type": "color", 31 | "$value": "#115ea3" 32 | }, 33 | "80": { 34 | "$type": "color", 35 | "$value": "#0f6cbd" 36 | }, 37 | "90": { 38 | "$type": "color", 39 | "$value": "#2886de" 40 | }, 41 | "100": { 42 | "$type": "color", 43 | "$value": "#479ef5" 44 | }, 45 | "110": { 46 | "$type": "color", 47 | "$value": "#62abf5" 48 | }, 49 | "120": { 50 | "$type": "color", 51 | "$value": "#77b7f7" 52 | }, 53 | "130": { 54 | "$type": "color", 55 | "$value": "#96c6fa" 56 | }, 57 | "140": { 58 | "$type": "color", 59 | "$value": "#b4d6fa" 60 | }, 61 | "150": { 62 | "$type": "color", 63 | "$value": "#cfe4fa" 64 | }, 65 | "160": { 66 | "$type": "color", 67 | "$value": "#ebf3fc" 68 | } 69 | }, 70 | "Grey": { 71 | "2": { 72 | "$type": "color", 73 | "$value": "#050505" 74 | }, 75 | "4": { 76 | "$type": "color", 77 | "$value": "#0a0a0a" 78 | }, 79 | "6": { 80 | "$type": "color", 81 | "$value": "#0f0f0f" 82 | }, 83 | "8": { 84 | "$type": "color", 85 | "$value": "#141414" 86 | }, 87 | "10": { 88 | "$type": "color", 89 | "$value": "#1a1a1a" 90 | }, 91 | "12": { 92 | "$type": "color", 93 | "$value": "#1f1f1f" 94 | }, 95 | "14": { 96 | "$type": "color", 97 | "$value": "#242424" 98 | }, 99 | "16": { 100 | "$type": "color", 101 | "$value": "#292929" 102 | }, 103 | "18": { 104 | "$type": "color", 105 | "$value": "#2e2e2e" 106 | }, 107 | "20": { 108 | "$type": "color", 109 | "$value": "#333333" 110 | }, 111 | "22": { 112 | "$type": "color", 113 | "$value": "#383838" 114 | }, 115 | "24": { 116 | "$type": "color", 117 | "$value": "#3d3d3d" 118 | }, 119 | "26": { 120 | "$type": "color", 121 | "$value": "#424242" 122 | }, 123 | "28": { 124 | "$type": "color", 125 | "$value": "#474747" 126 | }, 127 | "30": { 128 | "$type": "color", 129 | "$value": "#4d4d4d" 130 | }, 131 | "32": { 132 | "$type": "color", 133 | "$value": "#525252" 134 | }, 135 | "34": { 136 | "$type": "color", 137 | "$value": "#575757" 138 | }, 139 | "36": { 140 | "$type": "color", 141 | "$value": "#5c5c5c" 142 | }, 143 | "38": { 144 | "$type": "color", 145 | "$value": "#616161" 146 | }, 147 | "40": { 148 | "$type": "color", 149 | "$value": "#666666" 150 | }, 151 | "42": { 152 | "$type": "color", 153 | "$value": "#6b6b6b" 154 | }, 155 | "44": { 156 | "$type": "color", 157 | "$value": "#707070" 158 | }, 159 | "46": { 160 | "$type": "color", 161 | "$value": "#757575" 162 | }, 163 | "48": { 164 | "$type": "color", 165 | "$value": "#7a7a7a" 166 | }, 167 | "50": { 168 | "$type": "color", 169 | "$value": "#808080" 170 | }, 171 | "52": { 172 | "$type": "color", 173 | "$value": "#858585" 174 | }, 175 | "54": { 176 | "$type": "color", 177 | "$value": "#8a8a8a" 178 | }, 179 | "56": { 180 | "$type": "color", 181 | "$value": "#8f8f8f" 182 | }, 183 | "58": { 184 | "$type": "color", 185 | "$value": "#949494" 186 | }, 187 | "60": { 188 | "$type": "color", 189 | "$value": "#999999" 190 | }, 191 | "62": { 192 | "$type": "color", 193 | "$value": "#9e9e9e" 194 | }, 195 | "64": { 196 | "$type": "color", 197 | "$value": "#a3a3a3" 198 | }, 199 | "66": { 200 | "$type": "color", 201 | "$value": "#a8a8a8" 202 | }, 203 | "68": { 204 | "$type": "color", 205 | "$value": "#adadad" 206 | }, 207 | "70": { 208 | "$type": "color", 209 | "$value": "#b3b3b3" 210 | }, 211 | "72": { 212 | "$type": "color", 213 | "$value": "#b8b8b8" 214 | }, 215 | "74": { 216 | "$type": "color", 217 | "$value": "#bdbdbd" 218 | }, 219 | "76": { 220 | "$type": "color", 221 | "$value": "#c2c2c2" 222 | }, 223 | "78": { 224 | "$type": "color", 225 | "$value": "#c7c7c7" 226 | }, 227 | "80": { 228 | "$type": "color", 229 | "$value": "#cccccc" 230 | }, 231 | "82": { 232 | "$type": "color", 233 | "$value": "#d1d1d1" 234 | }, 235 | "84": { 236 | "$type": "color", 237 | "$value": "#d6d6d6" 238 | }, 239 | "86": { 240 | "$type": "color", 241 | "$value": "#dbdbdb" 242 | }, 243 | "88": { 244 | "$type": "color", 245 | "$value": "#e0e0e0" 246 | }, 247 | "90": { 248 | "$type": "color", 249 | "$value": "#e6e6e6" 250 | }, 251 | "92": { 252 | "$type": "color", 253 | "$value": "#ebebeb" 254 | }, 255 | "94": { 256 | "$type": "color", 257 | "$value": "#f0f0f0" 258 | }, 259 | "96": { 260 | "$type": "color", 261 | "$value": "#f5f5f5" 262 | }, 263 | "98": { 264 | "$type": "color", 265 | "$value": "#fafafa" 266 | } 267 | }, 268 | "WhiteAlpha": { 269 | "5": { 270 | "$type": "color", 271 | "$value": "#ffffff0d" 272 | }, 273 | "10": { 274 | "$type": "color", 275 | "$value": "#ffffff1a" 276 | }, 277 | "20": { 278 | "$type": "color", 279 | "$value": "#ffffff33" 280 | }, 281 | "30": { 282 | "$type": "color", 283 | "$value": "#ffffff4d" 284 | }, 285 | "40": { 286 | "$type": "color", 287 | "$value": "#ffffff66" 288 | }, 289 | "50": { 290 | "$type": "color", 291 | "$value": "#ffffff80" 292 | }, 293 | "60": { 294 | "$type": "color", 295 | "$value": "#ffffff99" 296 | }, 297 | "70": { 298 | "$type": "color", 299 | "$value": "#ffffffb3" 300 | }, 301 | "80": { 302 | "$type": "color", 303 | "$value": "#ffffffcc" 304 | }, 305 | "90": { 306 | "$type": "color", 307 | "$value": "#ffffffe6" 308 | } 309 | }, 310 | "BlackAlpha": { 311 | "5": { 312 | "$type": "color", 313 | "$value": "#0000000d" 314 | }, 315 | "10": { 316 | "$type": "color", 317 | "$value": "#0000001a" 318 | }, 319 | "20": { 320 | "$type": "color", 321 | "$value": "#00000033" 322 | }, 323 | "30": { 324 | "$type": "color", 325 | "$value": "#0000004d" 326 | }, 327 | "40": { 328 | "$type": "color", 329 | "$value": "#00000066" 330 | }, 331 | "50": { 332 | "$type": "color", 333 | "$value": "#00000080" 334 | }, 335 | "60": { 336 | "$type": "color", 337 | "$value": "#00000099" 338 | }, 339 | "70": { 340 | "$type": "color", 341 | "$value": "#000000b3" 342 | }, 343 | "80": { 344 | "$type": "color", 345 | "$value": "#000000cc" 346 | }, 347 | "90": { 348 | "$type": "color", 349 | "$value": "#000000e6" 350 | } 351 | }, 352 | "Grey10Alpha": { 353 | "5": { 354 | "$type": "color", 355 | "$value": "#1a1a1a0d" 356 | }, 357 | "10": { 358 | "$type": "color", 359 | "$value": "#1a1a1a1a" 360 | }, 361 | "20": { 362 | "$type": "color", 363 | "$value": "#1a1a1a33" 364 | }, 365 | "30": { 366 | "$type": "color", 367 | "$value": "#1a1a1a4d" 368 | }, 369 | "40": { 370 | "$type": "color", 371 | "$value": "#1a1a1a66" 372 | }, 373 | "50": { 374 | "$type": "color", 375 | "$value": "#1a1a1a80" 376 | }, 377 | "60": { 378 | "$type": "color", 379 | "$value": "#1a1a1a99" 380 | }, 381 | "70": { 382 | "$type": "color", 383 | "$value": "#1a1a1ab3" 384 | }, 385 | "80": { 386 | "$type": "color", 387 | "$value": "#1a1a1acc" 388 | }, 389 | "90": { 390 | "$type": "color", 391 | "$value": "#1a1a1ae6" 392 | } 393 | }, 394 | "Grey12Alpha": { 395 | "5": { 396 | "$type": "color", 397 | "$value": "#1f1f1f0d" 398 | }, 399 | "10": { 400 | "$type": "color", 401 | "$value": "#1f1f1f1a" 402 | }, 403 | "20": { 404 | "$type": "color", 405 | "$value": "#1f1f1f33" 406 | }, 407 | "30": { 408 | "$type": "color", 409 | "$value": "#1f1f1f4d" 410 | }, 411 | "40": { 412 | "$type": "color", 413 | "$value": "#1f1f1f66" 414 | }, 415 | "50": { 416 | "$type": "color", 417 | "$value": "#1f1f1f80" 418 | }, 419 | "60": { 420 | "$type": "color", 421 | "$value": "#1f1f1f99" 422 | }, 423 | "70": { 424 | "$type": "color", 425 | "$value": "#1f1f1fb3" 426 | }, 427 | "80": { 428 | "$type": "color", 429 | "$value": "#1f1f1fcc" 430 | }, 431 | "90": { 432 | "$type": "color", 433 | "$value": "#1f1f1fe6" 434 | } 435 | }, 436 | "Grey14Alpha": { 437 | "5": { 438 | "$type": "color", 439 | "$value": "#2424240d" 440 | }, 441 | "10": { 442 | "$type": "color", 443 | "$value": "#2424241a" 444 | }, 445 | "20": { 446 | "$type": "color", 447 | "$value": "#24242433" 448 | }, 449 | "30": { 450 | "$type": "color", 451 | "$value": "#2424244d" 452 | }, 453 | "40": { 454 | "$type": "color", 455 | "$value": "#24242466" 456 | }, 457 | "50": { 458 | "$type": "color", 459 | "$value": "#24242480" 460 | }, 461 | "60": { 462 | "$type": "color", 463 | "$value": "#24242499" 464 | }, 465 | "70": { 466 | "$type": "color", 467 | "$value": "#242424b3" 468 | }, 469 | "80": { 470 | "$type": "color", 471 | "$value": "#242424cc" 472 | }, 473 | "90": { 474 | "$type": "color", 475 | "$value": "#242424e6" 476 | } 477 | }, 478 | "White": { 479 | "$type": "color", 480 | "$value": "#ffffff" 481 | }, 482 | "Black": { 483 | "$type": "color", 484 | "$value": "#000000" 485 | }, 486 | "hcHyperlink": { 487 | "$type": "color", 488 | "$value": "#75e9fc", 489 | "$extensions": { 490 | "com.microsoft.systemcolor": "LinkText" 491 | } 492 | }, 493 | "hcHighlight": { 494 | "$type": "color", 495 | "$value": "#8ee3f0", 496 | "$extensions": { 497 | "com.microsoft.systemcolor": "Highlight" 498 | } 499 | }, 500 | "hcDisabled": { 501 | "$type": "color", 502 | "$value": "#a6a6a6", 503 | "$extensions": { 504 | "com.microsoft.systemcolor": "GrayText" 505 | } 506 | }, 507 | "hcCanvas": { 508 | "$type": "color", 509 | "$value": "#202020", 510 | "$extensions": { 511 | "com.microsoft.systemcolor": "Canvas" 512 | } 513 | }, 514 | "hcCanvasText": { 515 | "$type": "color", 516 | "$value": "#ffffff", 517 | "$extensions": { 518 | "com.microsoft.systemcolor": "CanvasText" 519 | } 520 | }, 521 | "hcHighlightText": { 522 | "$type": "color", 523 | "$value": "#263b50", 524 | "$extensions": { 525 | "com.microsoft.systemcolor": "HighlightText" 526 | } 527 | }, 528 | "hcButtonText": { 529 | "$type": "color", 530 | "$value": "#ffffff", 531 | "$extensions": { 532 | "com.microsoft.systemcolor": "ButtonText" 533 | } 534 | }, 535 | "hcButtonFace": { 536 | "$type": "color", 537 | "$value": "#202020", 538 | "$extensions": { 539 | "com.microsoft.systemcolor": "ButtonFace" 540 | } 541 | }, 542 | "DarkRed": { 543 | "Shade50": { 544 | "$type": "color", 545 | "$value": "#130204" 546 | }, 547 | "Shade40": { 548 | "$type": "color", 549 | "$value": "#230308" 550 | }, 551 | "Shade30": { 552 | "$type": "color", 553 | "$value": "#420610" 554 | }, 555 | "Shade20": { 556 | "$type": "color", 557 | "$value": "#590815" 558 | }, 559 | "Shade10": { 560 | "$type": "color", 561 | "$value": "#690a19" 562 | }, 563 | "Primary": { 564 | "$type": "color", 565 | "$value": "#750b1c" 566 | }, 567 | "Tint10": { 568 | "$type": "color", 569 | "$value": "#861b2c" 570 | }, 571 | "Tint20": { 572 | "$type": "color", 573 | "$value": "#962f3f" 574 | }, 575 | "Tint30": { 576 | "$type": "color", 577 | "$value": "#ac4f5e" 578 | }, 579 | "Tint40": { 580 | "$type": "color", 581 | "$value": "#d69ca5" 582 | }, 583 | "Tint50": { 584 | "$type": "color", 585 | "$value": "#e9c7cd" 586 | }, 587 | "Tint60": { 588 | "$type": "color", 589 | "$value": "#f9f0f2" 590 | } 591 | }, 592 | "Burgundy": { 593 | "Shade50": { 594 | "$type": "color", 595 | "$value": "#1a0607" 596 | }, 597 | "Shade40": { 598 | "$type": "color", 599 | "$value": "#310b0d" 600 | }, 601 | "Shade30": { 602 | "$type": "color", 603 | "$value": "#5c1519" 604 | }, 605 | "Shade20": { 606 | "$type": "color", 607 | "$value": "#7d1d21" 608 | }, 609 | "Shade10": { 610 | "$type": "color", 611 | "$value": "#942228" 612 | }, 613 | "Primary": { 614 | "$type": "color", 615 | "$value": "#a4262c" 616 | }, 617 | "Tint10": { 618 | "$type": "color", 619 | "$value": "#af393e" 620 | }, 621 | "Tint20": { 622 | "$type": "color", 623 | "$value": "#ba4d52" 624 | }, 625 | "Tint30": { 626 | "$type": "color", 627 | "$value": "#c86c70" 628 | }, 629 | "Tint40": { 630 | "$type": "color", 631 | "$value": "#e4afb2" 632 | }, 633 | "Tint50": { 634 | "$type": "color", 635 | "$value": "#f0d3d4" 636 | }, 637 | "Tint60": { 638 | "$type": "color", 639 | "$value": "#fbf4f4" 640 | } 641 | }, 642 | "Cranberry": { 643 | "Shade50": { 644 | "$type": "color", 645 | "$value": "#200205" 646 | }, 647 | "Shade40": { 648 | "$type": "color", 649 | "$value": "#3b0509" 650 | }, 651 | "Shade30": { 652 | "$type": "color", 653 | "$value": "#6e0811" 654 | }, 655 | "Shade20": { 656 | "$type": "color", 657 | "$value": "#960b18" 658 | }, 659 | "Shade10": { 660 | "$type": "color", 661 | "$value": "#b10e1c" 662 | }, 663 | "Primary": { 664 | "$type": "color", 665 | "$value": "#c50f1f" 666 | }, 667 | "Tint10": { 668 | "$type": "color", 669 | "$value": "#cc2635" 670 | }, 671 | "Tint20": { 672 | "$type": "color", 673 | "$value": "#d33f4c" 674 | }, 675 | "Tint30": { 676 | "$type": "color", 677 | "$value": "#dc626d" 678 | }, 679 | "Tint40": { 680 | "$type": "color", 681 | "$value": "#eeacb2" 682 | }, 683 | "Tint50": { 684 | "$type": "color", 685 | "$value": "#f6d1d5" 686 | }, 687 | "Tint60": { 688 | "$type": "color", 689 | "$value": "#fdf3f4" 690 | } 691 | }, 692 | "Red": { 693 | "Shade50": { 694 | "$type": "color", 695 | "$value": "#210809" 696 | }, 697 | "Shade40": { 698 | "$type": "color", 699 | "$value": "#3f1011" 700 | }, 701 | "Shade30": { 702 | "$type": "color", 703 | "$value": "#751d1f" 704 | }, 705 | "Shade20": { 706 | "$type": "color", 707 | "$value": "#9f282b" 708 | }, 709 | "Shade10": { 710 | "$type": "color", 711 | "$value": "#bc2f32" 712 | }, 713 | "Primary": { 714 | "$type": "color", 715 | "$value": "#d13438" 716 | }, 717 | "Tint10": { 718 | "$type": "color", 719 | "$value": "#d7494c" 720 | }, 721 | "Tint20": { 722 | "$type": "color", 723 | "$value": "#dc5e62" 724 | }, 725 | "Tint30": { 726 | "$type": "color", 727 | "$value": "#e37d80" 728 | }, 729 | "Tint40": { 730 | "$type": "color", 731 | "$value": "#f1bbbc" 732 | }, 733 | "Tint50": { 734 | "$type": "color", 735 | "$value": "#f8dadb" 736 | }, 737 | "Tint60": { 738 | "$type": "color", 739 | "$value": "#fdf6f6" 740 | } 741 | }, 742 | "DarkOrange": { 743 | "Shade50": { 744 | "$type": "color", 745 | "$value": "#230900" 746 | }, 747 | "Shade40": { 748 | "$type": "color", 749 | "$value": "#411200" 750 | }, 751 | "Shade30": { 752 | "$type": "color", 753 | "$value": "#7a2101" 754 | }, 755 | "Shade20": { 756 | "$type": "color", 757 | "$value": "#a62d01" 758 | }, 759 | "Shade10": { 760 | "$type": "color", 761 | "$value": "#c43501" 762 | }, 763 | "Primary": { 764 | "$type": "color", 765 | "$value": "#da3b01" 766 | }, 767 | "Tint10": { 768 | "$type": "color", 769 | "$value": "#de501c" 770 | }, 771 | "Tint20": { 772 | "$type": "color", 773 | "$value": "#e36537" 774 | }, 775 | "Tint30": { 776 | "$type": "color", 777 | "$value": "#e9835e" 778 | }, 779 | "Tint40": { 780 | "$type": "color", 781 | "$value": "#f4bfab" 782 | }, 783 | "Tint50": { 784 | "$type": "color", 785 | "$value": "#f9dcd1" 786 | }, 787 | "Tint60": { 788 | "$type": "color", 789 | "$value": "#fdf6f3" 790 | } 791 | }, 792 | "Bronze": { 793 | "Shade50": { 794 | "$type": "color", 795 | "$value": "#1b0a01" 796 | }, 797 | "Shade40": { 798 | "$type": "color", 799 | "$value": "#321303" 800 | }, 801 | "Shade30": { 802 | "$type": "color", 803 | "$value": "#5e2405" 804 | }, 805 | "Shade20": { 806 | "$type": "color", 807 | "$value": "#7f3107" 808 | }, 809 | "Shade10": { 810 | "$type": "color", 811 | "$value": "#963a08" 812 | }, 813 | "Primary": { 814 | "$type": "color", 815 | "$value": "#a74109" 816 | }, 817 | "Tint10": { 818 | "$type": "color", 819 | "$value": "#b2521e" 820 | }, 821 | "Tint20": { 822 | "$type": "color", 823 | "$value": "#bc6535" 824 | }, 825 | "Tint30": { 826 | "$type": "color", 827 | "$value": "#ca8057" 828 | }, 829 | "Tint40": { 830 | "$type": "color", 831 | "$value": "#e5bba4" 832 | }, 833 | "Tint50": { 834 | "$type": "color", 835 | "$value": "#f1d9cc" 836 | }, 837 | "Tint60": { 838 | "$type": "color", 839 | "$value": "#fbf5f2" 840 | } 841 | }, 842 | "Pumpkin": { 843 | "Shade50": { 844 | "$type": "color", 845 | "$value": "#200d03" 846 | }, 847 | "Shade40": { 848 | "$type": "color", 849 | "$value": "#3d1805" 850 | }, 851 | "Shade30": { 852 | "$type": "color", 853 | "$value": "#712d09" 854 | }, 855 | "Shade20": { 856 | "$type": "color", 857 | "$value": "#9a3d0c" 858 | }, 859 | "Shade10": { 860 | "$type": "color", 861 | "$value": "#b6480e" 862 | }, 863 | "Primary": { 864 | "$type": "color", 865 | "$value": "#ca5010" 866 | }, 867 | "Tint10": { 868 | "$type": "color", 869 | "$value": "#d06228" 870 | }, 871 | "Tint20": { 872 | "$type": "color", 873 | "$value": "#d77440" 874 | }, 875 | "Tint30": { 876 | "$type": "color", 877 | "$value": "#df8e64" 878 | }, 879 | "Tint40": { 880 | "$type": "color", 881 | "$value": "#efc4ad" 882 | }, 883 | "Tint50": { 884 | "$type": "color", 885 | "$value": "#f7dfd2" 886 | }, 887 | "Tint60": { 888 | "$type": "color", 889 | "$value": "#fdf7f4" 890 | } 891 | }, 892 | "Orange": { 893 | "Shade50": { 894 | "$type": "color", 895 | "$value": "#271002" 896 | }, 897 | "Shade40": { 898 | "$type": "color", 899 | "$value": "#4a1e04" 900 | }, 901 | "Shade30": { 902 | "$type": "color", 903 | "$value": "#8a3707" 904 | }, 905 | "Shade20": { 906 | "$type": "color", 907 | "$value": "#bc4b09" 908 | }, 909 | "Shade10": { 910 | "$type": "color", 911 | "$value": "#de590b" 912 | }, 913 | "Primary": { 914 | "$type": "color", 915 | "$value": "#f7630c" 916 | }, 917 | "Tint10": { 918 | "$type": "color", 919 | "$value": "#f87528" 920 | }, 921 | "Tint20": { 922 | "$type": "color", 923 | "$value": "#f98845" 924 | }, 925 | "Tint30": { 926 | "$type": "color", 927 | "$value": "#faa06b" 928 | }, 929 | "Tint40": { 930 | "$type": "color", 931 | "$value": "#fdcfb4" 932 | }, 933 | "Tint50": { 934 | "$type": "color", 935 | "$value": "#fee5d7" 936 | }, 937 | "Tint60": { 938 | "$type": "color", 939 | "$value": "#fff9f5" 940 | } 941 | }, 942 | "Peach": { 943 | "Shade50": { 944 | "$type": "color", 945 | "$value": "#291600" 946 | }, 947 | "Shade40": { 948 | "$type": "color", 949 | "$value": "#4d2a00" 950 | }, 951 | "Shade30": { 952 | "$type": "color", 953 | "$value": "#8f4e00" 954 | }, 955 | "Shade20": { 956 | "$type": "color", 957 | "$value": "#c26a00" 958 | }, 959 | "Shade10": { 960 | "$type": "color", 961 | "$value": "#e67e00" 962 | }, 963 | "Primary": { 964 | "$type": "color", 965 | "$value": "#ff8c00" 966 | }, 967 | "Tint10": { 968 | "$type": "color", 969 | "$value": "#ff9a1f" 970 | }, 971 | "Tint20": { 972 | "$type": "color", 973 | "$value": "#ffa83d" 974 | }, 975 | "Tint30": { 976 | "$type": "color", 977 | "$value": "#ffba66" 978 | }, 979 | "Tint40": { 980 | "$type": "color", 981 | "$value": "#ffddb3" 982 | }, 983 | "Tint50": { 984 | "$type": "color", 985 | "$value": "#ffedd6" 986 | }, 987 | "Tint60": { 988 | "$type": "color", 989 | "$value": "#fffaf5" 990 | } 991 | }, 992 | "Marigold": { 993 | "Shade50": { 994 | "$type": "color", 995 | "$value": "#251a00" 996 | }, 997 | "Shade40": { 998 | "$type": "color", 999 | "$value": "#463100" 1000 | }, 1001 | "Shade30": { 1002 | "$type": "color", 1003 | "$value": "#835b00" 1004 | }, 1005 | "Shade20": { 1006 | "$type": "color", 1007 | "$value": "#b27c00" 1008 | }, 1009 | "Shade10": { 1010 | "$type": "color", 1011 | "$value": "#d39300" 1012 | }, 1013 | "Primary": { 1014 | "$type": "color", 1015 | "$value": "#eaa300" 1016 | }, 1017 | "Tint10": { 1018 | "$type": "color", 1019 | "$value": "#edad1c" 1020 | }, 1021 | "Tint20": { 1022 | "$type": "color", 1023 | "$value": "#efb839" 1024 | }, 1025 | "Tint30": { 1026 | "$type": "color", 1027 | "$value": "#f2c661" 1028 | }, 1029 | "Tint40": { 1030 | "$type": "color", 1031 | "$value": "#f9e2ae" 1032 | }, 1033 | "Tint50": { 1034 | "$type": "color", 1035 | "$value": "#fcefd3" 1036 | }, 1037 | "Tint60": { 1038 | "$type": "color", 1039 | "$value": "#fefbf4" 1040 | } 1041 | }, 1042 | "Yellow": { 1043 | "Primary": { 1044 | "$type": "color", 1045 | "$value": "#fde300" 1046 | }, 1047 | "Shade10": { 1048 | "$type": "color", 1049 | "$value": "#e4cc00" 1050 | }, 1051 | "Shade20": { 1052 | "$type": "color", 1053 | "$value": "#c0ad00" 1054 | }, 1055 | "Shade30": { 1056 | "$type": "color", 1057 | "$value": "#817400" 1058 | }, 1059 | "Shade40": { 1060 | "$type": "color", 1061 | "$value": "#4c4400" 1062 | }, 1063 | "Shade50": { 1064 | "$type": "color", 1065 | "$value": "#282400" 1066 | }, 1067 | "Tint10": { 1068 | "$type": "color", 1069 | "$value": "#fde61e" 1070 | }, 1071 | "Tint20": { 1072 | "$type": "color", 1073 | "$value": "#fdea3d" 1074 | }, 1075 | "Tint30": { 1076 | "$type": "color", 1077 | "$value": "#feee66" 1078 | }, 1079 | "Tint40": { 1080 | "$type": "color", 1081 | "$value": "#fef7b2" 1082 | }, 1083 | "Tint50": { 1084 | "$type": "color", 1085 | "$value": "#fffad6" 1086 | }, 1087 | "Tint60": { 1088 | "$type": "color", 1089 | "$value": "#fffef5" 1090 | } 1091 | }, 1092 | "Gold": { 1093 | "Shade50": { 1094 | "$type": "color", 1095 | "$value": "#1f1900" 1096 | }, 1097 | "Shade40": { 1098 | "$type": "color", 1099 | "$value": "#3a2f00" 1100 | }, 1101 | "Shade30": { 1102 | "$type": "color", 1103 | "$value": "#6c5700" 1104 | }, 1105 | "Shade20": { 1106 | "$type": "color", 1107 | "$value": "#937700" 1108 | }, 1109 | "Shade10": { 1110 | "$type": "color", 1111 | "$value": "#ae8c00" 1112 | }, 1113 | "Primary": { 1114 | "$type": "color", 1115 | "$value": "#c19c00" 1116 | }, 1117 | "Tint10": { 1118 | "$type": "color", 1119 | "$value": "#c8a718" 1120 | }, 1121 | "Tint20": { 1122 | "$type": "color", 1123 | "$value": "#d0b232" 1124 | }, 1125 | "Tint30": { 1126 | "$type": "color", 1127 | "$value": "#dac157" 1128 | }, 1129 | "Tint40": { 1130 | "$type": "color", 1131 | "$value": "#ecdfa5" 1132 | }, 1133 | "Tint50": { 1134 | "$type": "color", 1135 | "$value": "#f5eece" 1136 | }, 1137 | "Tint60": { 1138 | "$type": "color", 1139 | "$value": "#fdfbf2" 1140 | } 1141 | }, 1142 | "Brass": { 1143 | "Shade50": { 1144 | "$type": "color", 1145 | "$value": "#181202" 1146 | }, 1147 | "Shade40": { 1148 | "$type": "color", 1149 | "$value": "#2e2103" 1150 | }, 1151 | "Shade30": { 1152 | "$type": "color", 1153 | "$value": "#553e06" 1154 | }, 1155 | "Shade20": { 1156 | "$type": "color", 1157 | "$value": "#745408" 1158 | }, 1159 | "Shade10": { 1160 | "$type": "color", 1161 | "$value": "#89640a" 1162 | }, 1163 | "Primary": { 1164 | "$type": "color", 1165 | "$value": "#986f0b" 1166 | }, 1167 | "Tint10": { 1168 | "$type": "color", 1169 | "$value": "#a47d1e" 1170 | }, 1171 | "Tint20": { 1172 | "$type": "color", 1173 | "$value": "#b18c34" 1174 | }, 1175 | "Tint30": { 1176 | "$type": "color", 1177 | "$value": "#c1a256" 1178 | }, 1179 | "Tint40": { 1180 | "$type": "color", 1181 | "$value": "#e0cea2" 1182 | }, 1183 | "Tint50": { 1184 | "$type": "color", 1185 | "$value": "#efe4cb" 1186 | }, 1187 | "Tint60": { 1188 | "$type": "color", 1189 | "$value": "#fbf8f2" 1190 | } 1191 | }, 1192 | "Brown": { 1193 | "Shade50": { 1194 | "$type": "color", 1195 | "$value": "#170e07" 1196 | }, 1197 | "Shade40": { 1198 | "$type": "color", 1199 | "$value": "#2b1a0e" 1200 | }, 1201 | "Shade30": { 1202 | "$type": "color", 1203 | "$value": "#50301a" 1204 | }, 1205 | "Shade20": { 1206 | "$type": "color", 1207 | "$value": "#6c4123" 1208 | }, 1209 | "Shade10": { 1210 | "$type": "color", 1211 | "$value": "#804d29" 1212 | }, 1213 | "Primary": { 1214 | "$type": "color", 1215 | "$value": "#8e562e" 1216 | }, 1217 | "Tint10": { 1218 | "$type": "color", 1219 | "$value": "#9c663f" 1220 | }, 1221 | "Tint20": { 1222 | "$type": "color", 1223 | "$value": "#a97652" 1224 | }, 1225 | "Tint30": { 1226 | "$type": "color", 1227 | "$value": "#bb8f6f" 1228 | }, 1229 | "Tint40": { 1230 | "$type": "color", 1231 | "$value": "#ddc3b0" 1232 | }, 1233 | "Tint50": { 1234 | "$type": "color", 1235 | "$value": "#edded3" 1236 | }, 1237 | "Tint60": { 1238 | "$type": "color", 1239 | "$value": "#faf7f4" 1240 | } 1241 | }, 1242 | "DarkBrown": { 1243 | "Shade50": { 1244 | "$type": "color", 1245 | "$value": "#0c0704" 1246 | }, 1247 | "Shade40": { 1248 | "$type": "color", 1249 | "$value": "#170c08" 1250 | }, 1251 | "Shade30": { 1252 | "$type": "color", 1253 | "$value": "#2b1710" 1254 | }, 1255 | "Shade20": { 1256 | "$type": "color", 1257 | "$value": "#3a1f15" 1258 | }, 1259 | "Shade10": { 1260 | "$type": "color", 1261 | "$value": "#452519" 1262 | }, 1263 | "Primary": { 1264 | "$type": "color", 1265 | "$value": "#4d291c" 1266 | }, 1267 | "Tint10": { 1268 | "$type": "color", 1269 | "$value": "#623a2b" 1270 | }, 1271 | "Tint20": { 1272 | "$type": "color", 1273 | "$value": "#784d3e" 1274 | }, 1275 | "Tint30": { 1276 | "$type": "color", 1277 | "$value": "#946b5c" 1278 | }, 1279 | "Tint40": { 1280 | "$type": "color", 1281 | "$value": "#caada3" 1282 | }, 1283 | "Tint50": { 1284 | "$type": "color", 1285 | "$value": "#e3d2cb" 1286 | }, 1287 | "Tint60": { 1288 | "$type": "color", 1289 | "$value": "#f8f3f2" 1290 | } 1291 | }, 1292 | "Lime": { 1293 | "Shade50": { 1294 | "$type": "color", 1295 | "$value": "#121b06" 1296 | }, 1297 | "Shade40": { 1298 | "$type": "color", 1299 | "$value": "#23330b" 1300 | }, 1301 | "Shade30": { 1302 | "$type": "color", 1303 | "$value": "#405f14" 1304 | }, 1305 | "Shade20": { 1306 | "$type": "color", 1307 | "$value": "#57811b" 1308 | }, 1309 | "Shade10": { 1310 | "$type": "color", 1311 | "$value": "#689920" 1312 | }, 1313 | "Primary": { 1314 | "$type": "color", 1315 | "$value": "#73aa24" 1316 | }, 1317 | "Tint10": { 1318 | "$type": "color", 1319 | "$value": "#81b437" 1320 | }, 1321 | "Tint20": { 1322 | "$type": "color", 1323 | "$value": "#90be4c" 1324 | }, 1325 | "Tint30": { 1326 | "$type": "color", 1327 | "$value": "#a4cc6c" 1328 | }, 1329 | "Tint40": { 1330 | "$type": "color", 1331 | "$value": "#cfe5af" 1332 | }, 1333 | "Tint50": { 1334 | "$type": "color", 1335 | "$value": "#e5f1d3" 1336 | }, 1337 | "Tint60": { 1338 | "$type": "color", 1339 | "$value": "#f8fcf4" 1340 | } 1341 | }, 1342 | "Forest": { 1343 | "Shade50": { 1344 | "$type": "color", 1345 | "$value": "#0c1501" 1346 | }, 1347 | "Shade40": { 1348 | "$type": "color", 1349 | "$value": "#162702" 1350 | }, 1351 | "Shade30": { 1352 | "$type": "color", 1353 | "$value": "#294903" 1354 | }, 1355 | "Shade20": { 1356 | "$type": "color", 1357 | "$value": "#376304" 1358 | }, 1359 | "Shade10": { 1360 | "$type": "color", 1361 | "$value": "#427505" 1362 | }, 1363 | "Primary": { 1364 | "$type": "color", 1365 | "$value": "#498205" 1366 | }, 1367 | "Tint10": { 1368 | "$type": "color", 1369 | "$value": "#599116" 1370 | }, 1371 | "Tint20": { 1372 | "$type": "color", 1373 | "$value": "#6ba02b" 1374 | }, 1375 | "Tint30": { 1376 | "$type": "color", 1377 | "$value": "#85b44c" 1378 | }, 1379 | "Tint40": { 1380 | "$type": "color", 1381 | "$value": "#bdd99b" 1382 | }, 1383 | "Tint50": { 1384 | "$type": "color", 1385 | "$value": "#dbebc7" 1386 | }, 1387 | "Tint60": { 1388 | "$type": "color", 1389 | "$value": "#f6faf0" 1390 | } 1391 | }, 1392 | "Seafoam": { 1393 | "Shade50": { 1394 | "$type": "color", 1395 | "$value": "#002111" 1396 | }, 1397 | "Shade40": { 1398 | "$type": "color", 1399 | "$value": "#003d20" 1400 | }, 1401 | "Shade30": { 1402 | "$type": "color", 1403 | "$value": "#00723b" 1404 | }, 1405 | "Shade20": { 1406 | "$type": "color", 1407 | "$value": "#009b51" 1408 | }, 1409 | "Shade10": { 1410 | "$type": "color", 1411 | "$value": "#00b85f" 1412 | }, 1413 | "Primary": { 1414 | "$type": "color", 1415 | "$value": "#00cc6a" 1416 | }, 1417 | "Tint10": { 1418 | "$type": "color", 1419 | "$value": "#19d279" 1420 | }, 1421 | "Tint20": { 1422 | "$type": "color", 1423 | "$value": "#34d889" 1424 | }, 1425 | "Tint30": { 1426 | "$type": "color", 1427 | "$value": "#5ae0a0" 1428 | }, 1429 | "Tint40": { 1430 | "$type": "color", 1431 | "$value": "#a8f0cd" 1432 | }, 1433 | "Tint50": { 1434 | "$type": "color", 1435 | "$value": "#cff7e4" 1436 | }, 1437 | "Tint60": { 1438 | "$type": "color", 1439 | "$value": "#f3fdf8" 1440 | } 1441 | }, 1442 | "LightGreen": { 1443 | "Shade50": { 1444 | "$type": "color", 1445 | "$value": "#031a02" 1446 | }, 1447 | "Shade40": { 1448 | "$type": "color", 1449 | "$value": "#063004" 1450 | }, 1451 | "Shade30": { 1452 | "$type": "color", 1453 | "$value": "#0b5a08" 1454 | }, 1455 | "Shade20": { 1456 | "$type": "color", 1457 | "$value": "#0e7a0b" 1458 | }, 1459 | "Shade10": { 1460 | "$type": "color", 1461 | "$value": "#11910d" 1462 | }, 1463 | "Primary": { 1464 | "$type": "color", 1465 | "$value": "#13a10e" 1466 | }, 1467 | "Tint10": { 1468 | "$type": "color", 1469 | "$value": "#27ac22" 1470 | }, 1471 | "Tint20": { 1472 | "$type": "color", 1473 | "$value": "#3db838" 1474 | }, 1475 | "Tint30": { 1476 | "$type": "color", 1477 | "$value": "#5ec75a" 1478 | }, 1479 | "Tint40": { 1480 | "$type": "color", 1481 | "$value": "#a7e3a5" 1482 | }, 1483 | "Tint50": { 1484 | "$type": "color", 1485 | "$value": "#cef0cd" 1486 | }, 1487 | "Tint60": { 1488 | "$type": "color", 1489 | "$value": "#f2fbf2" 1490 | } 1491 | }, 1492 | "Green": { 1493 | "Shade50": { 1494 | "$type": "color", 1495 | "$value": "#031403" 1496 | }, 1497 | "Shade40": { 1498 | "$type": "color", 1499 | "$value": "#052505" 1500 | }, 1501 | "Shade30": { 1502 | "$type": "color", 1503 | "$value": "#094509" 1504 | }, 1505 | "Shade20": { 1506 | "$type": "color", 1507 | "$value": "#0c5e0c" 1508 | }, 1509 | "Shade10": { 1510 | "$type": "color", 1511 | "$value": "#0e700e" 1512 | }, 1513 | "Primary": { 1514 | "$type": "color", 1515 | "$value": "#107c10" 1516 | }, 1517 | "Tint10": { 1518 | "$type": "color", 1519 | "$value": "#218c21" 1520 | }, 1521 | "Tint20": { 1522 | "$type": "color", 1523 | "$value": "#359b35" 1524 | }, 1525 | "Tint30": { 1526 | "$type": "color", 1527 | "$value": "#54b054" 1528 | }, 1529 | "Tint40": { 1530 | "$type": "color", 1531 | "$value": "#9fd89f" 1532 | }, 1533 | "Tint50": { 1534 | "$type": "color", 1535 | "$value": "#c9eac9" 1536 | }, 1537 | "Tint60": { 1538 | "$type": "color", 1539 | "$value": "#f1faf1" 1540 | } 1541 | }, 1542 | "DarkGreen": { 1543 | "Shade50": { 1544 | "$type": "color", 1545 | "$value": "#021102" 1546 | }, 1547 | "Shade40": { 1548 | "$type": "color", 1549 | "$value": "#032003" 1550 | }, 1551 | "Shade30": { 1552 | "$type": "color", 1553 | "$value": "#063b06" 1554 | }, 1555 | "Shade20": { 1556 | "$type": "color", 1557 | "$value": "#085108" 1558 | }, 1559 | "Shade10": { 1560 | "$type": "color", 1561 | "$value": "#0a5f0a" 1562 | }, 1563 | "Primary": { 1564 | "$type": "color", 1565 | "$value": "#0b6a0b" 1566 | }, 1567 | "Tint10": { 1568 | "$type": "color", 1569 | "$value": "#1a7c1a" 1570 | }, 1571 | "Tint20": { 1572 | "$type": "color", 1573 | "$value": "#2d8e2d" 1574 | }, 1575 | "Tint30": { 1576 | "$type": "color", 1577 | "$value": "#4da64d" 1578 | }, 1579 | "Tint40": { 1580 | "$type": "color", 1581 | "$value": "#9ad29a" 1582 | }, 1583 | "Tint50": { 1584 | "$type": "color", 1585 | "$value": "#c6e7c6" 1586 | }, 1587 | "Tint60": { 1588 | "$type": "color", 1589 | "$value": "#f0f9f0" 1590 | } 1591 | }, 1592 | "LightTeal": { 1593 | "Shade50": { 1594 | "$type": "color", 1595 | "$value": "#001d1f" 1596 | }, 1597 | "Shade40": { 1598 | "$type": "color", 1599 | "$value": "#00373a" 1600 | }, 1601 | "Shade30": { 1602 | "$type": "color", 1603 | "$value": "#00666d" 1604 | }, 1605 | "Shade20": { 1606 | "$type": "color", 1607 | "$value": "#008b94" 1608 | }, 1609 | "Shade10": { 1610 | "$type": "color", 1611 | "$value": "#00a5af" 1612 | }, 1613 | "Primary": { 1614 | "$type": "color", 1615 | "$value": "#00b7c3" 1616 | }, 1617 | "Tint10": { 1618 | "$type": "color", 1619 | "$value": "#18bfca" 1620 | }, 1621 | "Tint20": { 1622 | "$type": "color", 1623 | "$value": "#32c8d1" 1624 | }, 1625 | "Tint30": { 1626 | "$type": "color", 1627 | "$value": "#58d3db" 1628 | }, 1629 | "Tint40": { 1630 | "$type": "color", 1631 | "$value": "#a6e9ed" 1632 | }, 1633 | "Tint50": { 1634 | "$type": "color", 1635 | "$value": "#cef3f5" 1636 | }, 1637 | "Tint60": { 1638 | "$type": "color", 1639 | "$value": "#f2fcfd" 1640 | } 1641 | }, 1642 | "Teal": { 1643 | "Shade50": { 1644 | "$type": "color", 1645 | "$value": "#001516" 1646 | }, 1647 | "Shade40": { 1648 | "$type": "color", 1649 | "$value": "#012728" 1650 | }, 1651 | "Shade30": { 1652 | "$type": "color", 1653 | "$value": "#02494c" 1654 | }, 1655 | "Shade20": { 1656 | "$type": "color", 1657 | "$value": "#026467" 1658 | }, 1659 | "Shade10": { 1660 | "$type": "color", 1661 | "$value": "#037679" 1662 | }, 1663 | "Primary": { 1664 | "$type": "color", 1665 | "$value": "#038387" 1666 | }, 1667 | "Tint10": { 1668 | "$type": "color", 1669 | "$value": "#159195" 1670 | }, 1671 | "Tint20": { 1672 | "$type": "color", 1673 | "$value": "#2aa0a4" 1674 | }, 1675 | "Tint30": { 1676 | "$type": "color", 1677 | "$value": "#4cb4b7" 1678 | }, 1679 | "Tint40": { 1680 | "$type": "color", 1681 | "$value": "#9bd9db" 1682 | }, 1683 | "Tint50": { 1684 | "$type": "color", 1685 | "$value": "#c7ebec" 1686 | }, 1687 | "Tint60": { 1688 | "$type": "color", 1689 | "$value": "#f0fafa" 1690 | } 1691 | }, 1692 | "DarkTeal": { 1693 | "Shade50": { 1694 | "$type": "color", 1695 | "$value": "#001010" 1696 | }, 1697 | "Shade40": { 1698 | "$type": "color", 1699 | "$value": "#001f1f" 1700 | }, 1701 | "Shade30": { 1702 | "$type": "color", 1703 | "$value": "#003939" 1704 | }, 1705 | "Shade20": { 1706 | "$type": "color", 1707 | "$value": "#004e4e" 1708 | }, 1709 | "Shade10": { 1710 | "$type": "color", 1711 | "$value": "#005c5c" 1712 | }, 1713 | "Primary": { 1714 | "$type": "color", 1715 | "$value": "#006666" 1716 | }, 1717 | "Tint10": { 1718 | "$type": "color", 1719 | "$value": "#0e7878" 1720 | }, 1721 | "Tint20": { 1722 | "$type": "color", 1723 | "$value": "#218b8b" 1724 | }, 1725 | "Tint30": { 1726 | "$type": "color", 1727 | "$value": "#41a3a3" 1728 | }, 1729 | "Tint40": { 1730 | "$type": "color", 1731 | "$value": "#92d1d1" 1732 | }, 1733 | "Tint50": { 1734 | "$type": "color", 1735 | "$value": "#c2e7e7" 1736 | }, 1737 | "Tint60": { 1738 | "$type": "color", 1739 | "$value": "#eff9f9" 1740 | } 1741 | }, 1742 | "Cyan": { 1743 | "Shade50": { 1744 | "$type": "color", 1745 | "$value": "#00181e" 1746 | }, 1747 | "Shade40": { 1748 | "$type": "color", 1749 | "$value": "#002e38" 1750 | }, 1751 | "Shade30": { 1752 | "$type": "color", 1753 | "$value": "#005669" 1754 | }, 1755 | "Shade20": { 1756 | "$type": "color", 1757 | "$value": "#00748f" 1758 | }, 1759 | "Shade10": { 1760 | "$type": "color", 1761 | "$value": "#008aa9" 1762 | }, 1763 | "Primary": { 1764 | "$type": "color", 1765 | "$value": "#0099bc" 1766 | }, 1767 | "Tint10": { 1768 | "$type": "color", 1769 | "$value": "#18a4c4" 1770 | }, 1771 | "Tint20": { 1772 | "$type": "color", 1773 | "$value": "#31afcc" 1774 | }, 1775 | "Tint30": { 1776 | "$type": "color", 1777 | "$value": "#56bfd7" 1778 | }, 1779 | "Tint40": { 1780 | "$type": "color", 1781 | "$value": "#a4deeb" 1782 | }, 1783 | "Tint50": { 1784 | "$type": "color", 1785 | "$value": "#cdedf4" 1786 | }, 1787 | "Tint60": { 1788 | "$type": "color", 1789 | "$value": "#f2fafc" 1790 | } 1791 | }, 1792 | "Steel": { 1793 | "Shade50": { 1794 | "$type": "color", 1795 | "$value": "#000f12" 1796 | }, 1797 | "Shade40": { 1798 | "$type": "color", 1799 | "$value": "#001b22" 1800 | }, 1801 | "Shade30": { 1802 | "$type": "color", 1803 | "$value": "#00333f" 1804 | }, 1805 | "Shade20": { 1806 | "$type": "color", 1807 | "$value": "#004555" 1808 | }, 1809 | "Shade10": { 1810 | "$type": "color", 1811 | "$value": "#005265" 1812 | }, 1813 | "Primary": { 1814 | "$type": "color", 1815 | "$value": "#005b70" 1816 | }, 1817 | "Tint10": { 1818 | "$type": "color", 1819 | "$value": "#0f6c81" 1820 | }, 1821 | "Tint20": { 1822 | "$type": "color", 1823 | "$value": "#237d92" 1824 | }, 1825 | "Tint30": { 1826 | "$type": "color", 1827 | "$value": "#4496a9" 1828 | }, 1829 | "Tint40": { 1830 | "$type": "color", 1831 | "$value": "#94c8d4" 1832 | }, 1833 | "Tint50": { 1834 | "$type": "color", 1835 | "$value": "#c3e1e8" 1836 | }, 1837 | "Tint60": { 1838 | "$type": "color", 1839 | "$value": "#eff7f9" 1840 | } 1841 | }, 1842 | "LightBlue": { 1843 | "Shade50": { 1844 | "$type": "color", 1845 | "$value": "#091823" 1846 | }, 1847 | "Shade40": { 1848 | "$type": "color", 1849 | "$value": "#112d42" 1850 | }, 1851 | "Shade30": { 1852 | "$type": "color", 1853 | "$value": "#20547c" 1854 | }, 1855 | "Shade20": { 1856 | "$type": "color", 1857 | "$value": "#2c72a8" 1858 | }, 1859 | "Shade10": { 1860 | "$type": "color", 1861 | "$value": "#3487c7" 1862 | }, 1863 | "Primary": { 1864 | "$type": "color", 1865 | "$value": "#3a96dd" 1866 | }, 1867 | "Tint10": { 1868 | "$type": "color", 1869 | "$value": "#4fa1e1" 1870 | }, 1871 | "Tint20": { 1872 | "$type": "color", 1873 | "$value": "#65ade5" 1874 | }, 1875 | "Tint30": { 1876 | "$type": "color", 1877 | "$value": "#83bdeb" 1878 | }, 1879 | "Tint40": { 1880 | "$type": "color", 1881 | "$value": "#bfddf5" 1882 | }, 1883 | "Tint50": { 1884 | "$type": "color", 1885 | "$value": "#dcedfa" 1886 | }, 1887 | "Tint60": { 1888 | "$type": "color", 1889 | "$value": "#f6fafe" 1890 | } 1891 | }, 1892 | "Blue": { 1893 | "Shade50": { 1894 | "$type": "color", 1895 | "$value": "#001322" 1896 | }, 1897 | "Shade40": { 1898 | "$type": "color", 1899 | "$value": "#002440" 1900 | }, 1901 | "Shade30": { 1902 | "$type": "color", 1903 | "$value": "#004377" 1904 | }, 1905 | "Shade20": { 1906 | "$type": "color", 1907 | "$value": "#005ba1" 1908 | }, 1909 | "Shade10": { 1910 | "$type": "color", 1911 | "$value": "#006cbf" 1912 | }, 1913 | "Primary": { 1914 | "$type": "color", 1915 | "$value": "#0078d4" 1916 | }, 1917 | "Tint10": { 1918 | "$type": "color", 1919 | "$value": "#1a86d9" 1920 | }, 1921 | "Tint20": { 1922 | "$type": "color", 1923 | "$value": "#3595de" 1924 | }, 1925 | "Tint30": { 1926 | "$type": "color", 1927 | "$value": "#5caae5" 1928 | }, 1929 | "Tint40": { 1930 | "$type": "color", 1931 | "$value": "#a9d3f2" 1932 | }, 1933 | "Tint50": { 1934 | "$type": "color", 1935 | "$value": "#d0e7f8" 1936 | }, 1937 | "Tint60": { 1938 | "$type": "color", 1939 | "$value": "#f3f9fd" 1940 | } 1941 | }, 1942 | "RoyalBlue": { 1943 | "Shade50": { 1944 | "$type": "color", 1945 | "$value": "#000c16" 1946 | }, 1947 | "Shade40": { 1948 | "$type": "color", 1949 | "$value": "#00172a" 1950 | }, 1951 | "Shade30": { 1952 | "$type": "color", 1953 | "$value": "#002c4e" 1954 | }, 1955 | "Shade20": { 1956 | "$type": "color", 1957 | "$value": "#003b6a" 1958 | }, 1959 | "Shade10": { 1960 | "$type": "color", 1961 | "$value": "#00467e" 1962 | }, 1963 | "Primary": { 1964 | "$type": "color", 1965 | "$value": "#004e8c" 1966 | }, 1967 | "Tint10": { 1968 | "$type": "color", 1969 | "$value": "#125e9a" 1970 | }, 1971 | "Tint20": { 1972 | "$type": "color", 1973 | "$value": "#286fa8" 1974 | }, 1975 | "Tint30": { 1976 | "$type": "color", 1977 | "$value": "#4a89ba" 1978 | }, 1979 | "Tint40": { 1980 | "$type": "color", 1981 | "$value": "#9abfdc" 1982 | }, 1983 | "Tint50": { 1984 | "$type": "color", 1985 | "$value": "#c7dced" 1986 | }, 1987 | "Tint60": { 1988 | "$type": "color", 1989 | "$value": "#f0f6fa" 1990 | } 1991 | }, 1992 | "DarkBlue": { 1993 | "Shade50": { 1994 | "$type": "color", 1995 | "$value": "#000910" 1996 | }, 1997 | "Shade40": { 1998 | "$type": "color", 1999 | "$value": "#00111f" 2000 | }, 2001 | "Shade30": { 2002 | "$type": "color", 2003 | "$value": "#002039" 2004 | }, 2005 | "Shade20": { 2006 | "$type": "color", 2007 | "$value": "#002b4e" 2008 | }, 2009 | "Shade10": { 2010 | "$type": "color", 2011 | "$value": "#00335c" 2012 | }, 2013 | "Primary": { 2014 | "$type": "color", 2015 | "$value": "#003966" 2016 | }, 2017 | "Tint10": { 2018 | "$type": "color", 2019 | "$value": "#0e4a78" 2020 | }, 2021 | "Tint20": { 2022 | "$type": "color", 2023 | "$value": "#215c8b" 2024 | }, 2025 | "Tint30": { 2026 | "$type": "color", 2027 | "$value": "#4178a3" 2028 | }, 2029 | "Tint40": { 2030 | "$type": "color", 2031 | "$value": "#92b5d1" 2032 | }, 2033 | "Tint50": { 2034 | "$type": "color", 2035 | "$value": "#c2d6e7" 2036 | }, 2037 | "Tint60": { 2038 | "$type": "color", 2039 | "$value": "#eff4f9" 2040 | } 2041 | }, 2042 | "Cornflower": { 2043 | "Shade50": { 2044 | "$type": "color", 2045 | "$value": "#0d1126" 2046 | }, 2047 | "Shade40": { 2048 | "$type": "color", 2049 | "$value": "#182047" 2050 | }, 2051 | "Shade30": { 2052 | "$type": "color", 2053 | "$value": "#2c3c85" 2054 | }, 2055 | "Shade20": { 2056 | "$type": "color", 2057 | "$value": "#3c51b4" 2058 | }, 2059 | "Shade10": { 2060 | "$type": "color", 2061 | "$value": "#4760d5" 2062 | }, 2063 | "Primary": { 2064 | "$type": "color", 2065 | "$value": "#4f6bed" 2066 | }, 2067 | "Tint10": { 2068 | "$type": "color", 2069 | "$value": "#637cef" 2070 | }, 2071 | "Tint20": { 2072 | "$type": "color", 2073 | "$value": "#778df1" 2074 | }, 2075 | "Tint30": { 2076 | "$type": "color", 2077 | "$value": "#93a4f4" 2078 | }, 2079 | "Tint40": { 2080 | "$type": "color", 2081 | "$value": "#c8d1fa" 2082 | }, 2083 | "Tint50": { 2084 | "$type": "color", 2085 | "$value": "#e1e6fc" 2086 | }, 2087 | "Tint60": { 2088 | "$type": "color", 2089 | "$value": "#f7f9fe" 2090 | } 2091 | }, 2092 | "Navy": { 2093 | "Shade50": { 2094 | "$type": "color", 2095 | "$value": "#00061d" 2096 | }, 2097 | "Shade40": { 2098 | "$type": "color", 2099 | "$value": "#000c36" 2100 | }, 2101 | "Shade30": { 2102 | "$type": "color", 2103 | "$value": "#001665" 2104 | }, 2105 | "Shade20": { 2106 | "$type": "color", 2107 | "$value": "#001e89" 2108 | }, 2109 | "Shade10": { 2110 | "$type": "color", 2111 | "$value": "#0023a2" 2112 | }, 2113 | "Primary": { 2114 | "$type": "color", 2115 | "$value": "#0027b4" 2116 | }, 2117 | "Tint10": { 2118 | "$type": "color", 2119 | "$value": "#173bbd" 2120 | }, 2121 | "Tint20": { 2122 | "$type": "color", 2123 | "$value": "#3050c6" 2124 | }, 2125 | "Tint30": { 2126 | "$type": "color", 2127 | "$value": "#546fd2" 2128 | }, 2129 | "Tint40": { 2130 | "$type": "color", 2131 | "$value": "#a3b2e8" 2132 | }, 2133 | "Tint50": { 2134 | "$type": "color", 2135 | "$value": "#ccd5f3" 2136 | }, 2137 | "Tint60": { 2138 | "$type": "color", 2139 | "$value": "#f2f4fc" 2140 | } 2141 | }, 2142 | "Lavender": { 2143 | "Shade50": { 2144 | "$type": "color", 2145 | "$value": "#120f25" 2146 | }, 2147 | "Shade40": { 2148 | "$type": "color", 2149 | "$value": "#221d46" 2150 | }, 2151 | "Shade30": { 2152 | "$type": "color", 2153 | "$value": "#3f3682" 2154 | }, 2155 | "Shade20": { 2156 | "$type": "color", 2157 | "$value": "#5649b0" 2158 | }, 2159 | "Shade10": { 2160 | "$type": "color", 2161 | "$value": "#6656d1" 2162 | }, 2163 | "Primary": { 2164 | "$type": "color", 2165 | "$value": "#7160e8" 2166 | }, 2167 | "Tint10": { 2168 | "$type": "color", 2169 | "$value": "#8172eb" 2170 | }, 2171 | "Tint20": { 2172 | "$type": "color", 2173 | "$value": "#9184ee" 2174 | }, 2175 | "Tint30": { 2176 | "$type": "color", 2177 | "$value": "#a79cf1" 2178 | }, 2179 | "Tint40": { 2180 | "$type": "color", 2181 | "$value": "#d2ccf8" 2182 | }, 2183 | "Tint50": { 2184 | "$type": "color", 2185 | "$value": "#e7e4fb" 2186 | }, 2187 | "Tint60": { 2188 | "$type": "color", 2189 | "$value": "#f9f8fe" 2190 | } 2191 | }, 2192 | "Purple": { 2193 | "Shade50": { 2194 | "$type": "color", 2195 | "$value": "#0f0717" 2196 | }, 2197 | "Shade40": { 2198 | "$type": "color", 2199 | "$value": "#1c0e2b" 2200 | }, 2201 | "Shade30": { 2202 | "$type": "color", 2203 | "$value": "#341a51" 2204 | }, 2205 | "Shade20": { 2206 | "$type": "color", 2207 | "$value": "#46236e" 2208 | }, 2209 | "Shade10": { 2210 | "$type": "color", 2211 | "$value": "#532982" 2212 | }, 2213 | "Primary": { 2214 | "$type": "color", 2215 | "$value": "#5c2e91" 2216 | }, 2217 | "Tint10": { 2218 | "$type": "color", 2219 | "$value": "#6b3f9e" 2220 | }, 2221 | "Tint20": { 2222 | "$type": "color", 2223 | "$value": "#7c52ab" 2224 | }, 2225 | "Tint30": { 2226 | "$type": "color", 2227 | "$value": "#9470bd" 2228 | }, 2229 | "Tint40": { 2230 | "$type": "color", 2231 | "$value": "#c6b1de" 2232 | }, 2233 | "Tint50": { 2234 | "$type": "color", 2235 | "$value": "#e0d3ed" 2236 | }, 2237 | "Tint60": { 2238 | "$type": "color", 2239 | "$value": "#f7f4fb" 2240 | } 2241 | }, 2242 | "DarkPurple": { 2243 | "Shade50": { 2244 | "$type": "color", 2245 | "$value": "#0a0411" 2246 | }, 2247 | "Shade40": { 2248 | "$type": "color", 2249 | "$value": "#130820" 2250 | }, 2251 | "Shade30": { 2252 | "$type": "color", 2253 | "$value": "#240f3c" 2254 | }, 2255 | "Shade20": { 2256 | "$type": "color", 2257 | "$value": "#311552" 2258 | }, 2259 | "Shade10": { 2260 | "$type": "color", 2261 | "$value": "#3a1861" 2262 | }, 2263 | "Primary": { 2264 | "$type": "color", 2265 | "$value": "#401b6c" 2266 | }, 2267 | "Tint10": { 2268 | "$type": "color", 2269 | "$value": "#512b7e" 2270 | }, 2271 | "Tint20": { 2272 | "$type": "color", 2273 | "$value": "#633e8f" 2274 | }, 2275 | "Tint30": { 2276 | "$type": "color", 2277 | "$value": "#7e5ca7" 2278 | }, 2279 | "Tint40": { 2280 | "$type": "color", 2281 | "$value": "#b9a3d3" 2282 | }, 2283 | "Tint50": { 2284 | "$type": "color", 2285 | "$value": "#d8cce7" 2286 | }, 2287 | "Tint60": { 2288 | "$type": "color", 2289 | "$value": "#f5f2f9" 2290 | } 2291 | }, 2292 | "Orchid": { 2293 | "Shade50": { 2294 | "$type": "color", 2295 | "$value": "#16101d" 2296 | }, 2297 | "Shade40": { 2298 | "$type": "color", 2299 | "$value": "#281e37" 2300 | }, 2301 | "Shade30": { 2302 | "$type": "color", 2303 | "$value": "#4c3867" 2304 | }, 2305 | "Shade20": { 2306 | "$type": "color", 2307 | "$value": "#674c8c" 2308 | }, 2309 | "Shade10": { 2310 | "$type": "color", 2311 | "$value": "#795aa6" 2312 | }, 2313 | "Primary": { 2314 | "$type": "color", 2315 | "$value": "#8764b8" 2316 | }, 2317 | "Tint10": { 2318 | "$type": "color", 2319 | "$value": "#9373c0" 2320 | }, 2321 | "Tint20": { 2322 | "$type": "color", 2323 | "$value": "#a083c9" 2324 | }, 2325 | "Tint30": { 2326 | "$type": "color", 2327 | "$value": "#b29ad4" 2328 | }, 2329 | "Tint40": { 2330 | "$type": "color", 2331 | "$value": "#d7caea" 2332 | }, 2333 | "Tint50": { 2334 | "$type": "color", 2335 | "$value": "#e9e2f4" 2336 | }, 2337 | "Tint60": { 2338 | "$type": "color", 2339 | "$value": "#f9f8fc" 2340 | } 2341 | }, 2342 | "Grape": { 2343 | "Shade50": { 2344 | "$type": "color", 2345 | "$value": "#160418" 2346 | }, 2347 | "Shade40": { 2348 | "$type": "color", 2349 | "$value": "#29072e" 2350 | }, 2351 | "Shade30": { 2352 | "$type": "color", 2353 | "$value": "#4c0d55" 2354 | }, 2355 | "Shade20": { 2356 | "$type": "color", 2357 | "$value": "#671174" 2358 | }, 2359 | "Shade10": { 2360 | "$type": "color", 2361 | "$value": "#7a1589" 2362 | }, 2363 | "Primary": { 2364 | "$type": "color", 2365 | "$value": "#881798" 2366 | }, 2367 | "Tint10": { 2368 | "$type": "color", 2369 | "$value": "#952aa4" 2370 | }, 2371 | "Tint20": { 2372 | "$type": "color", 2373 | "$value": "#a33fb1" 2374 | }, 2375 | "Tint30": { 2376 | "$type": "color", 2377 | "$value": "#b55fc1" 2378 | }, 2379 | "Tint40": { 2380 | "$type": "color", 2381 | "$value": "#d9a7e0" 2382 | }, 2383 | "Tint50": { 2384 | "$type": "color", 2385 | "$value": "#eaceef" 2386 | }, 2387 | "Tint60": { 2388 | "$type": "color", 2389 | "$value": "#faf2fb" 2390 | } 2391 | }, 2392 | "Berry": { 2393 | "Shade50": { 2394 | "$type": "color", 2395 | "$value": "#1f091d" 2396 | }, 2397 | "Shade40": { 2398 | "$type": "color", 2399 | "$value": "#3a1136" 2400 | }, 2401 | "Shade30": { 2402 | "$type": "color", 2403 | "$value": "#6d2064" 2404 | }, 2405 | "Shade20": { 2406 | "$type": "color", 2407 | "$value": "#932b88" 2408 | }, 2409 | "Shade10": { 2410 | "$type": "color", 2411 | "$value": "#af33a1" 2412 | }, 2413 | "Primary": { 2414 | "$type": "color", 2415 | "$value": "#c239b3" 2416 | }, 2417 | "Tint10": { 2418 | "$type": "color", 2419 | "$value": "#c94cbc" 2420 | }, 2421 | "Tint20": { 2422 | "$type": "color", 2423 | "$value": "#d161c4" 2424 | }, 2425 | "Tint30": { 2426 | "$type": "color", 2427 | "$value": "#da7ed0" 2428 | }, 2429 | "Tint40": { 2430 | "$type": "color", 2431 | "$value": "#edbbe7" 2432 | }, 2433 | "Tint50": { 2434 | "$type": "color", 2435 | "$value": "#f5daf2" 2436 | }, 2437 | "Tint60": { 2438 | "$type": "color", 2439 | "$value": "#fdf5fc" 2440 | } 2441 | }, 2442 | "Lilac": { 2443 | "Shade50": { 2444 | "$type": "color", 2445 | "$value": "#1c0b1f" 2446 | }, 2447 | "Shade40": { 2448 | "$type": "color", 2449 | "$value": "#35153a" 2450 | }, 2451 | "Shade30": { 2452 | "$type": "color", 2453 | "$value": "#63276d" 2454 | }, 2455 | "Shade20": { 2456 | "$type": "color", 2457 | "$value": "#863593" 2458 | }, 2459 | "Shade10": { 2460 | "$type": "color", 2461 | "$value": "#9f3faf" 2462 | }, 2463 | "Primary": { 2464 | "$type": "color", 2465 | "$value": "#b146c2" 2466 | }, 2467 | "Tint10": { 2468 | "$type": "color", 2469 | "$value": "#ba58c9" 2470 | }, 2471 | "Tint20": { 2472 | "$type": "color", 2473 | "$value": "#c36bd1" 2474 | }, 2475 | "Tint30": { 2476 | "$type": "color", 2477 | "$value": "#cf87da" 2478 | }, 2479 | "Tint40": { 2480 | "$type": "color", 2481 | "$value": "#e6bfed" 2482 | }, 2483 | "Tint50": { 2484 | "$type": "color", 2485 | "$value": "#f2dcf5" 2486 | }, 2487 | "Tint60": { 2488 | "$type": "color", 2489 | "$value": "#fcf6fd" 2490 | } 2491 | }, 2492 | "Pink": { 2493 | "Shade50": { 2494 | "$type": "color", 2495 | "$value": "#24091b" 2496 | }, 2497 | "Shade40": { 2498 | "$type": "color", 2499 | "$value": "#441232" 2500 | }, 2501 | "Shade30": { 2502 | "$type": "color", 2503 | "$value": "#80215d" 2504 | }, 2505 | "Shade20": { 2506 | "$type": "color", 2507 | "$value": "#ad2d7e" 2508 | }, 2509 | "Shade10": { 2510 | "$type": "color", 2511 | "$value": "#cd3595" 2512 | }, 2513 | "Primary": { 2514 | "$type": "color", 2515 | "$value": "#e43ba6" 2516 | }, 2517 | "Tint10": { 2518 | "$type": "color", 2519 | "$value": "#e750b0" 2520 | }, 2521 | "Tint20": { 2522 | "$type": "color", 2523 | "$value": "#ea66ba" 2524 | }, 2525 | "Tint30": { 2526 | "$type": "color", 2527 | "$value": "#ef85c8" 2528 | }, 2529 | "Tint40": { 2530 | "$type": "color", 2531 | "$value": "#f7c0e3" 2532 | }, 2533 | "Tint50": { 2534 | "$type": "color", 2535 | "$value": "#fbddf0" 2536 | }, 2537 | "Tint60": { 2538 | "$type": "color", 2539 | "$value": "#fef6fb" 2540 | } 2541 | }, 2542 | "HotPink": { 2543 | "Shade50": { 2544 | "$type": "color", 2545 | "$value": "#240016" 2546 | }, 2547 | "Shade40": { 2548 | "$type": "color", 2549 | "$value": "#44002a" 2550 | }, 2551 | "Shade30": { 2552 | "$type": "color", 2553 | "$value": "#7f004e" 2554 | }, 2555 | "Shade20": { 2556 | "$type": "color", 2557 | "$value": "#ad006a" 2558 | }, 2559 | "Shade10": { 2560 | "$type": "color", 2561 | "$value": "#cc007e" 2562 | }, 2563 | "Primary": { 2564 | "$type": "color", 2565 | "$value": "#e3008c" 2566 | }, 2567 | "Tint10": { 2568 | "$type": "color", 2569 | "$value": "#e61c99" 2570 | }, 2571 | "Tint20": { 2572 | "$type": "color", 2573 | "$value": "#ea38a6" 2574 | }, 2575 | "Tint30": { 2576 | "$type": "color", 2577 | "$value": "#ee5fb7" 2578 | }, 2579 | "Tint40": { 2580 | "$type": "color", 2581 | "$value": "#f7adda" 2582 | }, 2583 | "Tint50": { 2584 | "$type": "color", 2585 | "$value": "#fbd2eb" 2586 | }, 2587 | "Tint60": { 2588 | "$type": "color", 2589 | "$value": "#fef4fa" 2590 | } 2591 | }, 2592 | "Magenta": { 2593 | "Shade50": { 2594 | "$type": "color", 2595 | "$value": "#1f0013" 2596 | }, 2597 | "Shade40": { 2598 | "$type": "color", 2599 | "$value": "#390024" 2600 | }, 2601 | "Shade30": { 2602 | "$type": "color", 2603 | "$value": "#6b0043" 2604 | }, 2605 | "Shade20": { 2606 | "$type": "color", 2607 | "$value": "#91005a" 2608 | }, 2609 | "Shade10": { 2610 | "$type": "color", 2611 | "$value": "#ac006b" 2612 | }, 2613 | "Primary": { 2614 | "$type": "color", 2615 | "$value": "#bf0077" 2616 | }, 2617 | "Tint10": { 2618 | "$type": "color", 2619 | "$value": "#c71885" 2620 | }, 2621 | "Tint20": { 2622 | "$type": "color", 2623 | "$value": "#ce3293" 2624 | }, 2625 | "Tint30": { 2626 | "$type": "color", 2627 | "$value": "#d957a8" 2628 | }, 2629 | "Tint40": { 2630 | "$type": "color", 2631 | "$value": "#eca5d1" 2632 | }, 2633 | "Tint50": { 2634 | "$type": "color", 2635 | "$value": "#f5cee6" 2636 | }, 2637 | "Tint60": { 2638 | "$type": "color", 2639 | "$value": "#fcf2f9" 2640 | } 2641 | }, 2642 | "Plum": { 2643 | "Shade50": { 2644 | "$type": "color", 2645 | "$value": "#13000c" 2646 | }, 2647 | "Shade40": { 2648 | "$type": "color", 2649 | "$value": "#240017" 2650 | }, 2651 | "Shade30": { 2652 | "$type": "color", 2653 | "$value": "#43002b" 2654 | }, 2655 | "Shade20": { 2656 | "$type": "color", 2657 | "$value": "#5a003b" 2658 | }, 2659 | "Shade10": { 2660 | "$type": "color", 2661 | "$value": "#6b0045" 2662 | }, 2663 | "Primary": { 2664 | "$type": "color", 2665 | "$value": "#77004d" 2666 | }, 2667 | "Tint10": { 2668 | "$type": "color", 2669 | "$value": "#87105d" 2670 | }, 2671 | "Tint20": { 2672 | "$type": "color", 2673 | "$value": "#98246f" 2674 | }, 2675 | "Tint30": { 2676 | "$type": "color", 2677 | "$value": "#ad4589" 2678 | }, 2679 | "Tint40": { 2680 | "$type": "color", 2681 | "$value": "#d696c0" 2682 | }, 2683 | "Tint50": { 2684 | "$type": "color", 2685 | "$value": "#e9c4dc" 2686 | }, 2687 | "Tint60": { 2688 | "$type": "color", 2689 | "$value": "#faf0f6" 2690 | } 2691 | }, 2692 | "Beige": { 2693 | "Shade50": { 2694 | "$type": "color", 2695 | "$value": "#141313" 2696 | }, 2697 | "Shade40": { 2698 | "$type": "color", 2699 | "$value": "#252323" 2700 | }, 2701 | "Shade30": { 2702 | "$type": "color", 2703 | "$value": "#444241" 2704 | }, 2705 | "Shade20": { 2706 | "$type": "color", 2707 | "$value": "#5d5958" 2708 | }, 2709 | "Shade10": { 2710 | "$type": "color", 2711 | "$value": "#6e6968" 2712 | }, 2713 | "Primary": { 2714 | "$type": "color", 2715 | "$value": "#7a7574" 2716 | }, 2717 | "Tint10": { 2718 | "$type": "color", 2719 | "$value": "#8a8584" 2720 | }, 2721 | "Tint20": { 2722 | "$type": "color", 2723 | "$value": "#9a9594" 2724 | }, 2725 | "Tint30": { 2726 | "$type": "color", 2727 | "$value": "#afabaa" 2728 | }, 2729 | "Tint40": { 2730 | "$type": "color", 2731 | "$value": "#d7d4d4" 2732 | }, 2733 | "Tint50": { 2734 | "$type": "color", 2735 | "$value": "#eae8e8" 2736 | }, 2737 | "Tint60": { 2738 | "$type": "color", 2739 | "$value": "#faf9f9" 2740 | } 2741 | }, 2742 | "Mink": { 2743 | "Shade50": { 2744 | "$type": "color", 2745 | "$value": "#0f0e0e" 2746 | }, 2747 | "Shade40": { 2748 | "$type": "color", 2749 | "$value": "#1c1b1a" 2750 | }, 2751 | "Shade30": { 2752 | "$type": "color", 2753 | "$value": "#343231" 2754 | }, 2755 | "Shade20": { 2756 | "$type": "color", 2757 | "$value": "#474443" 2758 | }, 2759 | "Shade10": { 2760 | "$type": "color", 2761 | "$value": "#54514f" 2762 | }, 2763 | "Primary": { 2764 | "$type": "color", 2765 | "$value": "#5d5a58" 2766 | }, 2767 | "Tint10": { 2768 | "$type": "color", 2769 | "$value": "#706d6b" 2770 | }, 2771 | "Tint20": { 2772 | "$type": "color", 2773 | "$value": "#84817e" 2774 | }, 2775 | "Tint30": { 2776 | "$type": "color", 2777 | "$value": "#9e9b99" 2778 | }, 2779 | "Tint40": { 2780 | "$type": "color", 2781 | "$value": "#cecccb" 2782 | }, 2783 | "Tint50": { 2784 | "$type": "color", 2785 | "$value": "#e5e4e3" 2786 | }, 2787 | "Tint60": { 2788 | "$type": "color", 2789 | "$value": "#f8f8f8" 2790 | } 2791 | }, 2792 | "Silver": { 2793 | "Shade50": { 2794 | "$type": "color", 2795 | "$value": "#151818" 2796 | }, 2797 | "Shade40": { 2798 | "$type": "color", 2799 | "$value": "#282d2e" 2800 | }, 2801 | "Shade30": { 2802 | "$type": "color", 2803 | "$value": "#4a5356" 2804 | }, 2805 | "Shade20": { 2806 | "$type": "color", 2807 | "$value": "#657174" 2808 | }, 2809 | "Shade10": { 2810 | "$type": "color", 2811 | "$value": "#78868a" 2812 | }, 2813 | "Primary": { 2814 | "$type": "color", 2815 | "$value": "#859599" 2816 | }, 2817 | "Tint10": { 2818 | "$type": "color", 2819 | "$value": "#92a1a5" 2820 | }, 2821 | "Tint20": { 2822 | "$type": "color", 2823 | "$value": "#a0aeb1" 2824 | }, 2825 | "Tint30": { 2826 | "$type": "color", 2827 | "$value": "#b3bfc2" 2828 | }, 2829 | "Tint40": { 2830 | "$type": "color", 2831 | "$value": "#d8dfe0" 2832 | }, 2833 | "Tint50": { 2834 | "$type": "color", 2835 | "$value": "#eaeeef" 2836 | }, 2837 | "Tint60": { 2838 | "$type": "color", 2839 | "$value": "#fafbfb" 2840 | } 2841 | }, 2842 | "Platinum": { 2843 | "Shade50": { 2844 | "$type": "color", 2845 | "$value": "#111314" 2846 | }, 2847 | "Shade40": { 2848 | "$type": "color", 2849 | "$value": "#1f2426" 2850 | }, 2851 | "Shade30": { 2852 | "$type": "color", 2853 | "$value": "#3b4447" 2854 | }, 2855 | "Shade20": { 2856 | "$type": "color", 2857 | "$value": "#505c60" 2858 | }, 2859 | "Shade10": { 2860 | "$type": "color", 2861 | "$value": "#5f6d71" 2862 | }, 2863 | "Primary": { 2864 | "$type": "color", 2865 | "$value": "#69797e" 2866 | }, 2867 | "Tint10": { 2868 | "$type": "color", 2869 | "$value": "#79898d" 2870 | }, 2871 | "Tint20": { 2872 | "$type": "color", 2873 | "$value": "#89989d" 2874 | }, 2875 | "Tint30": { 2876 | "$type": "color", 2877 | "$value": "#a0adb2" 2878 | }, 2879 | "Tint40": { 2880 | "$type": "color", 2881 | "$value": "#cdd6d8" 2882 | }, 2883 | "Tint50": { 2884 | "$type": "color", 2885 | "$value": "#e4e9ea" 2886 | }, 2887 | "Tint60": { 2888 | "$type": "color", 2889 | "$value": "#f8f9fa" 2890 | } 2891 | }, 2892 | "Anchor": { 2893 | "Shade50": { 2894 | "$type": "color", 2895 | "$value": "#090a0b" 2896 | }, 2897 | "Shade40": { 2898 | "$type": "color", 2899 | "$value": "#111315" 2900 | }, 2901 | "Shade30": { 2902 | "$type": "color", 2903 | "$value": "#202427" 2904 | }, 2905 | "Shade20": { 2906 | "$type": "color", 2907 | "$value": "#2b3135" 2908 | }, 2909 | "Shade10": { 2910 | "$type": "color", 2911 | "$value": "#333a3f" 2912 | }, 2913 | "Primary": { 2914 | "$type": "color", 2915 | "$value": "#394146" 2916 | }, 2917 | "Tint10": { 2918 | "$type": "color", 2919 | "$value": "#4d565c" 2920 | }, 2921 | "Tint20": { 2922 | "$type": "color", 2923 | "$value": "#626c72" 2924 | }, 2925 | "Tint30": { 2926 | "$type": "color", 2927 | "$value": "#808a90" 2928 | }, 2929 | "Tint40": { 2930 | "$type": "color", 2931 | "$value": "#bcc3c7" 2932 | }, 2933 | "Tint50": { 2934 | "$type": "color", 2935 | "$value": "#dbdfe1" 2936 | }, 2937 | "Tint60": { 2938 | "$type": "color", 2939 | "$value": "#f6f7f8" 2940 | } 2941 | }, 2942 | "Charcoal": { 2943 | "Shade50": { 2944 | "$type": "color", 2945 | "$value": "#090909" 2946 | }, 2947 | "Shade40": { 2948 | "$type": "color", 2949 | "$value": "#111111" 2950 | }, 2951 | "Shade30": { 2952 | "$type": "color", 2953 | "$value": "#202020" 2954 | }, 2955 | "Shade20": { 2956 | "$type": "color", 2957 | "$value": "#2b2b2b" 2958 | }, 2959 | "Shade10": { 2960 | "$type": "color", 2961 | "$value": "#333333" 2962 | }, 2963 | "Primary": { 2964 | "$type": "color", 2965 | "$value": "#393939" 2966 | }, 2967 | "Tint10": { 2968 | "$type": "color", 2969 | "$value": "#515151" 2970 | }, 2971 | "Tint20": { 2972 | "$type": "color", 2973 | "$value": "#686868" 2974 | }, 2975 | "Tint30": { 2976 | "$type": "color", 2977 | "$value": "#888888" 2978 | }, 2979 | "Tint40": { 2980 | "$type": "color", 2981 | "$value": "#c4c4c4" 2982 | }, 2983 | "Tint50": { 2984 | "$type": "color", 2985 | "$value": "#dfdfdf" 2986 | }, 2987 | "Tint60": { 2988 | "$type": "color", 2989 | "$value": "#f7f7f7" 2990 | } 2991 | } 2992 | }, 2993 | "Stroke": { 2994 | "Width": { 2995 | "None": { 2996 | "$type": "dimension", 2997 | "$value": "0px" 2998 | }, 2999 | "05": { 3000 | "$type": "dimension", 3001 | "$value": "0.5px" 3002 | }, 3003 | "10": { 3004 | "$type": "dimension", 3005 | "$value": "1px" 3006 | }, 3007 | "15": { 3008 | "$type": "dimension", 3009 | "$value": "1.5px" 3010 | }, 3011 | "20": { 3012 | "$type": "dimension", 3013 | "$value": "2px" 3014 | }, 3015 | "30": { 3016 | "$type": "dimension", 3017 | "$value": "3px" 3018 | }, 3019 | "40": { 3020 | "$type": "dimension", 3021 | "$value": "4px" 3022 | }, 3023 | "60": { 3024 | "$type": "dimension", 3025 | "$value": "6px" 3026 | } 3027 | } 3028 | }, 3029 | "Corner": { 3030 | "Radius": { 3031 | "None": { 3032 | "$type": "dimension", 3033 | "$value": "0px" 3034 | }, 3035 | "20": { 3036 | "$type": "dimension", 3037 | "$value": "2px" 3038 | }, 3039 | "40": { 3040 | "$type": "dimension", 3041 | "$value": "4px" 3042 | }, 3043 | "60": { 3044 | "$type": "dimension", 3045 | "$value": "6px" 3046 | }, 3047 | "80": { 3048 | "$type": "dimension", 3049 | "$value": "8px" 3050 | }, 3051 | "120": { 3052 | "$type": "dimension", 3053 | "$value": "12px" 3054 | }, 3055 | "Circular": { 3056 | "$type": "dimension", 3057 | "$value": "9999px" 3058 | } 3059 | } 3060 | }, 3061 | "Size": { 3062 | "None": { 3063 | "$type": "dimension", 3064 | "$value": "0px" 3065 | }, 3066 | "20": { 3067 | "$type": "dimension", 3068 | "$value": "2px" 3069 | }, 3070 | "40": { 3071 | "$type": "dimension", 3072 | "$value": "4px" 3073 | }, 3074 | "60": { 3075 | "$type": "dimension", 3076 | "$value": "6px" 3077 | }, 3078 | "80": { 3079 | "$type": "dimension", 3080 | "$value": "8px" 3081 | }, 3082 | "100": { 3083 | "$type": "dimension", 3084 | "$value": "10px" 3085 | }, 3086 | "120": { 3087 | "$type": "dimension", 3088 | "$value": "12px" 3089 | }, 3090 | "160": { 3091 | "$type": "dimension", 3092 | "$value": "16px" 3093 | }, 3094 | "200": { 3095 | "$type": "dimension", 3096 | "$value": "20px" 3097 | }, 3098 | "240": { 3099 | "$type": "dimension", 3100 | "$value": "24px" 3101 | }, 3102 | "280": { 3103 | "$type": "dimension", 3104 | "$value": "28px" 3105 | }, 3106 | "320": { 3107 | "$type": "dimension", 3108 | "$value": "32px" 3109 | }, 3110 | "360": { 3111 | "$type": "dimension", 3112 | "$value": "36px" 3113 | }, 3114 | "400": { 3115 | "$type": "dimension", 3116 | "$value": "40px" 3117 | }, 3118 | "480": { 3119 | "$type": "dimension", 3120 | "$value": "48px" 3121 | }, 3122 | "560": { 3123 | "$type": "dimension", 3124 | "$value": "56px" 3125 | }, 3126 | "640": { 3127 | "$type": "dimension", 3128 | "$value": "64px" 3129 | }, 3130 | "720": { 3131 | "$type": "dimension", 3132 | "$value": "72px" 3133 | }, 3134 | "800": { 3135 | "$type": "dimension", 3136 | "$value": "80px" 3137 | }, 3138 | "1200": { 3139 | "$type": "dimension", 3140 | "$value": "120px" 3141 | } 3142 | } 3143 | } 3144 | } 3145 | -------------------------------------------------------------------------------- /demo/light.json: -------------------------------------------------------------------------------- 1 | { 2 | "NeutralForeground1": { 3 | "Fill": { 4 | "Color": { 5 | "Rest": { 6 | "$type": "color", 7 | "$value": "{Global.Color.Grey.14}" 8 | }, 9 | "Hover": { 10 | "$type": "color", 11 | "$value": "{Global.Color.Grey.14}" 12 | }, 13 | "Pressed": { 14 | "$type": "color", 15 | "$value": "{Global.Color.Grey.14}" 16 | }, 17 | "Selected": { 18 | "$type": "color", 19 | "$value": "{Global.Color.Grey.14}" 20 | } 21 | } 22 | } 23 | }, 24 | "NeutralForeground2": { 25 | "Fill": { 26 | "Color": { 27 | "Rest": { 28 | "$type": "color", 29 | "$value": "{Global.Color.Grey.26}" 30 | }, 31 | "Hover": { 32 | "$type": "color", 33 | "$value": "{Global.Color.Grey.14}" 34 | }, 35 | "Pressed": { 36 | "$type": "color", 37 | "$value": "{Global.Color.Grey.14}" 38 | }, 39 | "Selected": { 40 | "$type": "color", 41 | "$value": "{Global.Color.Grey.14}" 42 | }, 43 | "BrandHover": { 44 | "$type": "color", 45 | "$value": "{Global.Color.Brand.80}" 46 | }, 47 | "BrandPressed": { 48 | "$type": "color", 49 | "$value": "{Global.Color.Brand.70}" 50 | }, 51 | "BrandSelected": { 52 | "$type": "color", 53 | "$value": "{Global.Color.Brand.80}" 54 | } 55 | } 56 | } 57 | }, 58 | "NeutralForeground3": { 59 | "Fill": { 60 | "Color": { 61 | "Rest": { 62 | "$type": "color", 63 | "$value": "{Global.Color.Grey.38}" 64 | }, 65 | "Hover": { 66 | "$type": "color", 67 | "$value": "{Global.Color.Grey.26}" 68 | }, 69 | "Pressed": { 70 | "$type": "color", 71 | "$value": "{Global.Color.Grey.26}" 72 | }, 73 | "Selected": { 74 | "$type": "color", 75 | "$value": "{Global.Color.Grey.26}" 76 | }, 77 | "BrandHover": { 78 | "$type": "color", 79 | "$value": "{Global.Color.Brand.80}" 80 | }, 81 | "BrandPressed": { 82 | "$type": "color", 83 | "$value": "{Global.Color.Brand.70}" 84 | }, 85 | "BrandSelected": { 86 | "$type": "color", 87 | "$value": "{Global.Color.Brand.80}" 88 | } 89 | } 90 | } 91 | }, 92 | "NeutralForeground4": { 93 | "Fill": { 94 | "Color": { 95 | "Rest": { 96 | "$type": "color", 97 | "$value": "{Global.Color.Grey.44}" 98 | } 99 | } 100 | } 101 | }, 102 | "NeutralForegroundDisabled": { 103 | "Fill": { 104 | "Color": { 105 | "Rest": { 106 | "$type": "color", 107 | "$value": "{Global.Color.Grey.74}" 108 | } 109 | } 110 | } 111 | }, 112 | "NeutralForegroundInvertedDisabled": { 113 | "Fill": { 114 | "Color": { 115 | "Rest": { 116 | "$type": "color", 117 | "$value": "{Global.Color.WhiteAlpha.40}" 118 | } 119 | } 120 | } 121 | }, 122 | "BrandForegroundLink": { 123 | "Fill": { 124 | "Color": { 125 | "Rest": { 126 | "$type": "color", 127 | "$value": "{Global.Color.Brand.70}" 128 | }, 129 | "Hover": { 130 | "$type": "color", 131 | "$value": "{Global.Color.Brand.60}" 132 | }, 133 | "Pressed": { 134 | "$type": "color", 135 | "$value": "{Global.Color.Brand.40}" 136 | }, 137 | "Selected": { 138 | "$type": "color", 139 | "$value": "{Global.Color.Brand.70}" 140 | } 141 | } 142 | } 143 | }, 144 | "NeutralForeground2Link": { 145 | "Fill": { 146 | "Color": { 147 | "Rest": { 148 | "$type": "color", 149 | "$value": "{Global.Color.Grey.26}" 150 | }, 151 | "Hover": { 152 | "$type": "color", 153 | "$value": "{Global.Color.Grey.14}" 154 | }, 155 | "Pressed": { 156 | "$type": "color", 157 | "$value": "{Global.Color.Grey.14}" 158 | }, 159 | "Selected": { 160 | "$type": "color", 161 | "$value": "{Global.Color.Grey.14}" 162 | } 163 | } 164 | } 165 | }, 166 | "CompoundBrandForeground1": { 167 | "Fill": { 168 | "Color": { 169 | "Rest": { 170 | "$type": "color", 171 | "$value": "{Global.Color.Brand.80}" 172 | }, 173 | "Hover": { 174 | "$type": "color", 175 | "$value": "{Global.Color.Brand.70}" 176 | }, 177 | "Pressed": { 178 | "$type": "color", 179 | "$value": "{Global.Color.Brand.60}" 180 | } 181 | } 182 | } 183 | }, 184 | "BrandForeground1": { 185 | "Fill": { 186 | "Color": { 187 | "Rest": { 188 | "$type": "color", 189 | "$value": "{Global.Color.Brand.80}" 190 | } 191 | } 192 | } 193 | }, 194 | "BrandForeground2": { 195 | "Fill": { 196 | "Color": { 197 | "Rest": { 198 | "$type": "color", 199 | "$value": "{Global.Color.Brand.70}" 200 | } 201 | } 202 | } 203 | }, 204 | "NeutralForeground1Static": { 205 | "Fill": { 206 | "Color": { 207 | "Rest": { 208 | "$type": "color", 209 | "$value": "{Global.Color.Grey.14}" 210 | } 211 | } 212 | } 213 | }, 214 | "NeutralForegroundStaticInverted": { 215 | "Fill": { 216 | "Color": { 217 | "Rest": { 218 | "$type": "color", 219 | "$value": "{Global.Color.White}" 220 | } 221 | } 222 | } 223 | }, 224 | "NeutralForegroundInverted": { 225 | "Fill": { 226 | "Color": { 227 | "Rest": { 228 | "$type": "color", 229 | "$value": "{Global.Color.White}" 230 | }, 231 | "Hover": { 232 | "$type": "color", 233 | "$value": "{Global.Color.White}" 234 | }, 235 | "Pressed": { 236 | "$type": "color", 237 | "$value": "{Global.Color.White}" 238 | }, 239 | "Selected": { 240 | "$type": "color", 241 | "$value": "{Global.Color.White}" 242 | } 243 | } 244 | } 245 | }, 246 | "NeutralForegroundInverted2": { 247 | "Fill": { 248 | "Color": { 249 | "Rest": { 250 | "$type": "color", 251 | "$value": "{Global.Color.White}" 252 | } 253 | } 254 | } 255 | }, 256 | "NeutralForegroundOnBrand": { 257 | "Fill": { 258 | "Color": { 259 | "Rest": { 260 | "$type": "color", 261 | "$value": "{Global.Color.White}" 262 | } 263 | } 264 | } 265 | }, 266 | "NeutralForegroundInvertedLink": { 267 | "Fill": { 268 | "Color": { 269 | "Rest": { 270 | "$type": "color", 271 | "$value": "{Global.Color.White}" 272 | }, 273 | "Hover": { 274 | "$type": "color", 275 | "$value": "{Global.Color.White}" 276 | }, 277 | "Pressed": { 278 | "$type": "color", 279 | "$value": "{Global.Color.White}" 280 | }, 281 | "Selected": { 282 | "$type": "color", 283 | "$value": "{Global.Color.White}" 284 | } 285 | } 286 | } 287 | }, 288 | "BrandForegroundInverted": { 289 | "Fill": { 290 | "Color": { 291 | "Rest": { 292 | "$type": "color", 293 | "$value": "{Global.Color.Brand.100}" 294 | }, 295 | "Hover": { 296 | "$type": "color", 297 | "$value": "{Global.Color.Brand.110}" 298 | }, 299 | "Pressed": { 300 | "$type": "color", 301 | "$value": "{Global.Color.Brand.100}" 302 | } 303 | } 304 | } 305 | }, 306 | "BrandForegroundOnLight": { 307 | "Fill": { 308 | "Color": { 309 | "Rest": { 310 | "$type": "color", 311 | "$value": "{Global.Color.Brand.80}" 312 | }, 313 | "Hover": { 314 | "$type": "color", 315 | "$value": "{Global.Color.Brand.70}" 316 | }, 317 | "Pressed": { 318 | "$type": "color", 319 | "$value": "{Global.Color.Brand.50}" 320 | }, 321 | "Selected": { 322 | "$type": "color", 323 | "$value": "{Global.Color.Brand.60}" 324 | } 325 | } 326 | } 327 | }, 328 | "RedForeground1": { 329 | "Fill": { 330 | "Color": { 331 | "Rest": { 332 | "$type": "color", 333 | "$value": "{Global.Color.Red.Shade10}" 334 | } 335 | } 336 | } 337 | }, 338 | "RedForeground3": { 339 | "Fill": { 340 | "Color": { 341 | "Rest": { 342 | "$type": "color", 343 | "$value": "{Global.Color.Red.Primary}" 344 | } 345 | } 346 | } 347 | }, 348 | "GreenForeground1": { 349 | "Fill": { 350 | "Color": { 351 | "Rest": { 352 | "$type": "color", 353 | "$value": "{Global.Color.Green.Shade10}" 354 | } 355 | } 356 | } 357 | }, 358 | "GreenForeground3": { 359 | "Fill": { 360 | "Color": { 361 | "Rest": { 362 | "$type": "color", 363 | "$value": "{Global.Color.Green.Primary}" 364 | } 365 | } 366 | } 367 | }, 368 | "DarkOrangeForeground1": { 369 | "Fill": { 370 | "Color": { 371 | "Rest": { 372 | "$type": "color", 373 | "$value": "{Global.Color.DarkOrange.Shade10}" 374 | } 375 | } 376 | } 377 | }, 378 | "DarkOrangeForeground3": { 379 | "Fill": { 380 | "Color": { 381 | "Rest": { 382 | "$type": "color", 383 | "$value": "{Global.Color.DarkOrange.Primary}" 384 | } 385 | } 386 | } 387 | }, 388 | "YellowForeground1": { 389 | "Fill": { 390 | "Color": { 391 | "Rest": { 392 | "$type": "color", 393 | "$value": "{Global.Color.Yellow.Shade30}" 394 | } 395 | } 396 | } 397 | }, 398 | "YellowForeground2": { 399 | "Fill": { 400 | "Color": { 401 | "Rest": { 402 | "$type": "color", 403 | "$value": "{Global.Color.Yellow.Shade30}" 404 | } 405 | } 406 | } 407 | }, 408 | "NeutralBackground1": { 409 | "Fill": { 410 | "Color": { 411 | "Rest": { 412 | "$type": "color", 413 | "$value": "{Global.Color.White}" 414 | }, 415 | "Hover": { 416 | "$type": "color", 417 | "$value": "{Global.Color.Grey.96}" 418 | }, 419 | "Pressed": { 420 | "$type": "color", 421 | "$value": "{Global.Color.Grey.88}" 422 | }, 423 | "Selected": { 424 | "$type": "color", 425 | "$value": "{Global.Color.Grey.92}" 426 | } 427 | } 428 | } 429 | }, 430 | "NeutralBackground2": { 431 | "Fill": { 432 | "Color": { 433 | "Rest": { 434 | "$type": "color", 435 | "$value": "{Global.Color.Grey.98}" 436 | }, 437 | "Hover": { 438 | "$type": "color", 439 | "$value": "{Global.Color.Grey.94}" 440 | }, 441 | "Pressed": { 442 | "$type": "color", 443 | "$value": "{Global.Color.Grey.86}" 444 | }, 445 | "Selected": { 446 | "$type": "color", 447 | "$value": "{Global.Color.Grey.90}" 448 | } 449 | } 450 | } 451 | }, 452 | "NeutralBackground3": { 453 | "Fill": { 454 | "Color": { 455 | "Rest": { 456 | "$type": "color", 457 | "$value": "{Global.Color.Grey.96}" 458 | }, 459 | "Hover": { 460 | "$type": "color", 461 | "$value": "{Global.Color.Grey.92}" 462 | }, 463 | "Pressed": { 464 | "$type": "color", 465 | "$value": "{Global.Color.Grey.84}" 466 | }, 467 | "Selected": { 468 | "$type": "color", 469 | "$value": "{Global.Color.Grey.88}" 470 | } 471 | } 472 | } 473 | }, 474 | "NeutralBackground4": { 475 | "Fill": { 476 | "Color": { 477 | "Rest": { 478 | "$type": "color", 479 | "$value": "{Global.Color.Grey.94}" 480 | }, 481 | "Hover": { 482 | "$type": "color", 483 | "$value": "{Global.Color.Grey.98}" 484 | }, 485 | "Pressed": { 486 | "$type": "color", 487 | "$value": "{Global.Color.Grey.96}" 488 | }, 489 | "Selected": { 490 | "$type": "color", 491 | "$value": "{Global.Color.White}" 492 | } 493 | } 494 | } 495 | }, 496 | "NeutralBackground5": { 497 | "Fill": { 498 | "Color": { 499 | "Rest": { 500 | "$type": "color", 501 | "$value": "{Global.Color.Grey.92}" 502 | }, 503 | "Hover": { 504 | "$type": "color", 505 | "$value": "{Global.Color.Grey.96}" 506 | }, 507 | "Pressed": { 508 | "$type": "color", 509 | "$value": "{Global.Color.Grey.94}" 510 | }, 511 | "Selected": { 512 | "$type": "color", 513 | "$value": "{Global.Color.Grey.98}" 514 | } 515 | } 516 | } 517 | }, 518 | "NeutralBackground6": { 519 | "Fill": { 520 | "Color": { 521 | "Rest": { 522 | "$type": "color", 523 | "$value": "{Global.Color.Grey.90}" 524 | } 525 | } 526 | } 527 | }, 528 | "NeutralBackgroundInverted": { 529 | "Fill": { 530 | "Color": { 531 | "Rest": { 532 | "$type": "color", 533 | "$value": "{Global.Color.Grey.16}" 534 | } 535 | } 536 | } 537 | }, 538 | "NeutralBackgroundStatic": { 539 | "Fill": { 540 | "Color": { 541 | "Rest": { 542 | "$type": "color", 543 | "$value": "{Global.Color.Grey.20}" 544 | } 545 | } 546 | } 547 | }, 548 | "NeutralBackgroundAlpha": { 549 | "Fill": { 550 | "Color": { 551 | "Rest": { 552 | "$type": "color", 553 | "$value": "{Global.Color.WhiteAlpha.50}" 554 | } 555 | } 556 | } 557 | }, 558 | "NeutralBackgroundAlpha2": { 559 | "Fill": { 560 | "Color": { 561 | "Rest": { 562 | "$type": "color", 563 | "$value": "{Global.Color.WhiteAlpha.80}" 564 | } 565 | } 566 | } 567 | }, 568 | "SubtleBackground": { 569 | "Fill": { 570 | "Color": { 571 | "Rest": { 572 | "$type": "color", 573 | "$value": "#00000000" 574 | }, 575 | "Hover": { 576 | "$type": "color", 577 | "$value": "{Global.Color.Grey.96}" 578 | }, 579 | "Pressed": { 580 | "$type": "color", 581 | "$value": "{Global.Color.Grey.88}" 582 | }, 583 | "Selected": { 584 | "$type": "color", 585 | "$value": "{Global.Color.Grey.92}" 586 | }, 587 | "LightAlphaHover": { 588 | "$type": "color", 589 | "$value": "{Global.Color.WhiteAlpha.70}" 590 | }, 591 | "LightAlphaPressed": { 592 | "$type": "color", 593 | "$value": "{Global.Color.WhiteAlpha.50}" 594 | }, 595 | "LightAlphaSelected": { 596 | "$type": "color", 597 | "$value": "#00000000" 598 | } 599 | } 600 | } 601 | }, 602 | "SubtleBackgroundInverted": { 603 | "Fill": { 604 | "Color": { 605 | "Rest": { 606 | "$type": "color", 607 | "$value": "#00000000" 608 | }, 609 | "Hover": { 610 | "$type": "color", 611 | "$value": "{Global.Color.BlackAlpha.10}" 612 | }, 613 | "Pressed": { 614 | "$type": "color", 615 | "$value": "{Global.Color.BlackAlpha.30}" 616 | }, 617 | "Selected": { 618 | "$type": "color", 619 | "$value": "{Global.Color.BlackAlpha.20}" 620 | } 621 | } 622 | } 623 | }, 624 | "TransparentBackground": { 625 | "Fill": { 626 | "Color": { 627 | "Rest": { 628 | "$type": "color", 629 | "$value": "#00000000" 630 | }, 631 | "Hover": { 632 | "$type": "color", 633 | "$value": "#00000000" 634 | }, 635 | "Pressed": { 636 | "$type": "color", 637 | "$value": "#00000000" 638 | }, 639 | "Selected": { 640 | "$type": "color", 641 | "$value": "#00000000" 642 | } 643 | } 644 | } 645 | }, 646 | "NeutralBackgroundDisabled": { 647 | "Fill": { 648 | "Color": { 649 | "Rest": { 650 | "$type": "color", 651 | "$value": "{Global.Color.Grey.94}" 652 | } 653 | } 654 | } 655 | }, 656 | "NeutralBackgroundInvertedDisabled": { 657 | "Fill": { 658 | "Color": { 659 | "Rest": { 660 | "$type": "color", 661 | "$value": "{Global.Color.WhiteAlpha.10}" 662 | } 663 | } 664 | } 665 | }, 666 | "NeutralStencil1": { 667 | "Fill": { 668 | "Color": { 669 | "Rest": { 670 | "$type": "color", 671 | "$value": "{Global.Color.Grey.90}" 672 | } 673 | } 674 | } 675 | }, 676 | "NeutralStencil2": { 677 | "Fill": { 678 | "Color": { 679 | "Rest": { 680 | "$type": "color", 681 | "$value": "{Global.Color.Grey.98}" 682 | } 683 | } 684 | } 685 | }, 686 | "NeutralStencil1Alpha": { 687 | "Fill": { 688 | "Color": { 689 | "Rest": { 690 | "$type": "color", 691 | "$value": "{Global.Color.BlackAlpha.10}" 692 | } 693 | } 694 | } 695 | }, 696 | "NeutralStencil2Alpha": { 697 | "Fill": { 698 | "Color": { 699 | "Rest": { 700 | "$type": "color", 701 | "$value": "{Global.Color.BlackAlpha.5}" 702 | } 703 | } 704 | } 705 | }, 706 | "BackgroundOverlay": { 707 | "Fill": { 708 | "Color": { 709 | "Rest": { 710 | "$type": "color", 711 | "$value": "{Global.Color.BlackAlpha.40}" 712 | } 713 | } 714 | } 715 | }, 716 | "ScrollbarOverlay": { 717 | "Fill": { 718 | "Color": { 719 | "Rest": { 720 | "$type": "color", 721 | "$value": "{Global.Color.BlackAlpha.50}" 722 | } 723 | } 724 | } 725 | }, 726 | "BrandBackground": { 727 | "Fill": { 728 | "Color": { 729 | "Rest": { 730 | "$type": "color", 731 | "$value": "{Global.Color.Brand.80}" 732 | }, 733 | "Hover": { 734 | "$type": "color", 735 | "$value": "{Global.Color.Brand.70}" 736 | }, 737 | "Pressed": { 738 | "$type": "color", 739 | "$value": "{Global.Color.Brand.40}" 740 | }, 741 | "Selected": { 742 | "$type": "color", 743 | "$value": "{Global.Color.Brand.60}" 744 | } 745 | } 746 | } 747 | }, 748 | "CompoundBrandBackground": { 749 | "Fill": { 750 | "Color": { 751 | "Rest": { 752 | "$type": "color", 753 | "$value": "{Global.Color.Brand.80}" 754 | }, 755 | "Hover": { 756 | "$type": "color", 757 | "$value": "{Global.Color.Brand.70}" 758 | }, 759 | "Pressed": { 760 | "$type": "color", 761 | "$value": "{Global.Color.Brand.60}" 762 | } 763 | } 764 | } 765 | }, 766 | "BrandBackgroundStatic": { 767 | "Fill": { 768 | "Color": { 769 | "Rest": { 770 | "$type": "color", 771 | "$value": "{Global.Color.Brand.80}" 772 | } 773 | } 774 | } 775 | }, 776 | "BrandBackground2": { 777 | "Fill": { 778 | "Color": { 779 | "Rest": { 780 | "$type": "color", 781 | "$value": "{Global.Color.Brand.160}" 782 | } 783 | } 784 | } 785 | }, 786 | "BrandBackgroundInverted": { 787 | "Fill": { 788 | "Color": { 789 | "Rest": { 790 | "$type": "color", 791 | "$value": "{Global.Color.White}" 792 | }, 793 | "Hover": { 794 | "$type": "color", 795 | "$value": "{Global.Color.Brand.160}" 796 | }, 797 | "Pressed": { 798 | "$type": "color", 799 | "$value": "{Global.Color.Brand.140}" 800 | }, 801 | "Selected": { 802 | "$type": "color", 803 | "$value": "{Global.Color.Brand.150}" 804 | } 805 | } 806 | } 807 | }, 808 | "RedBackground1": { 809 | "Fill": { 810 | "Color": { 811 | "Rest": { 812 | "$type": "color", 813 | "$value": "{Global.Color.Red.Tint60}" 814 | } 815 | } 816 | } 817 | }, 818 | "RedBackground3": { 819 | "Fill": { 820 | "Color": { 821 | "Rest": { 822 | "$type": "color", 823 | "$value": "{Global.Color.Red.Primary}" 824 | } 825 | } 826 | } 827 | }, 828 | "GreenBackground1": { 829 | "Fill": { 830 | "Color": { 831 | "Rest": { 832 | "$type": "color", 833 | "$value": "{Global.Color.Green.Tint60}" 834 | } 835 | } 836 | } 837 | }, 838 | "GreenBackground3": { 839 | "Fill": { 840 | "Color": { 841 | "Rest": { 842 | "$type": "color", 843 | "$value": "{Global.Color.Green.Primary}" 844 | } 845 | } 846 | } 847 | }, 848 | "DarkOrangeBackground1": { 849 | "Fill": { 850 | "Color": { 851 | "Rest": { 852 | "$type": "color", 853 | "$value": "{Global.Color.DarkOrange.Tint60}" 854 | } 855 | } 856 | } 857 | }, 858 | "DarkOrangeBackground3": { 859 | "Fill": { 860 | "Color": { 861 | "Rest": { 862 | "$type": "color", 863 | "$value": "{Global.Color.DarkOrange.Primary}" 864 | } 865 | } 866 | } 867 | }, 868 | "YellowBackground1": { 869 | "Fill": { 870 | "Color": { 871 | "Rest": { 872 | "$type": "color", 873 | "$value": "{Global.Color.Yellow.Tint60}" 874 | } 875 | } 876 | } 877 | }, 878 | "YellowBackground3": { 879 | "Fill": { 880 | "Color": { 881 | "Rest": { 882 | "$type": "color", 883 | "$value": "{Global.Color.Yellow.Primary}" 884 | } 885 | } 886 | } 887 | }, 888 | "NeutralStrokeAccessible": { 889 | "Stroke": { 890 | "Color": { 891 | "Rest": { 892 | "$type": "color", 893 | "$value": "{Global.Color.Grey.38}" 894 | }, 895 | "Hover": { 896 | "$type": "color", 897 | "$value": "{Global.Color.Grey.34}" 898 | }, 899 | "Pressed": { 900 | "$type": "color", 901 | "$value": "{Global.Color.Grey.30}" 902 | }, 903 | "Selected": { 904 | "$type": "color", 905 | "$value": "{Global.Color.Brand.80}" 906 | } 907 | } 908 | } 909 | }, 910 | "NeutralStroke1": { 911 | "Stroke": { 912 | "Color": { 913 | "Rest": { 914 | "$type": "color", 915 | "$value": "{Global.Color.Grey.82}" 916 | }, 917 | "Hover": { 918 | "$type": "color", 919 | "$value": "{Global.Color.Grey.78}" 920 | }, 921 | "Pressed": { 922 | "$type": "color", 923 | "$value": "{Global.Color.Grey.70}" 924 | }, 925 | "Selected": { 926 | "$type": "color", 927 | "$value": "{Global.Color.Grey.74}" 928 | } 929 | } 930 | } 931 | }, 932 | "NeutralStroke2": { 933 | "Stroke": { 934 | "Color": { 935 | "Rest": { 936 | "$type": "color", 937 | "$value": "{Global.Color.Grey.88}" 938 | } 939 | } 940 | } 941 | }, 942 | "NeutralStroke3": { 943 | "Stroke": { 944 | "Color": { 945 | "Rest": { 946 | "$type": "color", 947 | "$value": "{Global.Color.Grey.94}" 948 | } 949 | } 950 | } 951 | }, 952 | "NeutralStrokeOnBrand": { 953 | "Stroke": { 954 | "Color": { 955 | "Rest": { 956 | "$type": "color", 957 | "$value": "{Global.Color.White}" 958 | } 959 | } 960 | } 961 | }, 962 | "NeutralStrokeOnBrand2": { 963 | "Stroke": { 964 | "Color": { 965 | "Rest": { 966 | "$type": "color", 967 | "$value": "{Global.Color.White}" 968 | }, 969 | "Hover": { 970 | "$type": "color", 971 | "$value": "{Global.Color.White}" 972 | }, 973 | "Pressed": { 974 | "$type": "color", 975 | "$value": "{Global.Color.White}" 976 | }, 977 | "Selected": { 978 | "$type": "color", 979 | "$value": "{Global.Color.White}" 980 | } 981 | } 982 | } 983 | }, 984 | "BrandStroke1": { 985 | "Stroke": { 986 | "Color": { 987 | "Rest": { 988 | "$type": "color", 989 | "$value": "{Global.Color.Brand.80}" 990 | } 991 | } 992 | } 993 | }, 994 | "BrandStroke2": { 995 | "Stroke": { 996 | "Color": { 997 | "Rest": { 998 | "$type": "color", 999 | "$value": "{Global.Color.Brand.140}" 1000 | } 1001 | } 1002 | } 1003 | }, 1004 | "CompoundBrandStroke": { 1005 | "Stroke": { 1006 | "Color": { 1007 | "Rest": { 1008 | "$type": "color", 1009 | "$value": "{Global.Color.Brand.80}" 1010 | }, 1011 | "Hover": { 1012 | "$type": "color", 1013 | "$value": "{Global.Color.Brand.70}" 1014 | }, 1015 | "Pressed": { 1016 | "$type": "color", 1017 | "$value": "{Global.Color.Brand.60}" 1018 | } 1019 | } 1020 | } 1021 | }, 1022 | "NeutralStrokeDisabled": { 1023 | "Stroke": { 1024 | "Color": { 1025 | "Rest": { 1026 | "$type": "color", 1027 | "$value": "{Global.Color.Grey.88}" 1028 | } 1029 | } 1030 | } 1031 | }, 1032 | "NeutralStrokeInvertedDisabled": { 1033 | "Stroke": { 1034 | "Color": { 1035 | "Rest": { 1036 | "$type": "color", 1037 | "$value": "{Global.Color.WhiteAlpha.40}" 1038 | } 1039 | } 1040 | } 1041 | }, 1042 | "TransparentStroke": { 1043 | "Stroke": { 1044 | "Color": { 1045 | "Rest": { 1046 | "$type": "color", 1047 | "$value": "#00000000" 1048 | } 1049 | } 1050 | } 1051 | }, 1052 | "TransparentStrokeInteractive": { 1053 | "Stroke": { 1054 | "Color": { 1055 | "Rest": { 1056 | "$type": "color", 1057 | "$value": "#00000000" 1058 | } 1059 | } 1060 | } 1061 | }, 1062 | "TransparentStrokeDisabled": { 1063 | "Stroke": { 1064 | "Color": { 1065 | "Rest": { 1066 | "$type": "color", 1067 | "$value": "#00000000" 1068 | } 1069 | } 1070 | } 1071 | }, 1072 | "NeutralStrokeAlpha": { 1073 | "Stroke": { 1074 | "Color": { 1075 | "Rest": { 1076 | "$type": "color", 1077 | "$value": "{Global.Color.BlackAlpha.5}" 1078 | } 1079 | } 1080 | } 1081 | }, 1082 | "StrokeFocus1": { 1083 | "Stroke": { 1084 | "Color": { 1085 | "Rest": { 1086 | "$type": "color", 1087 | "$value": "{Global.Color.White}" 1088 | } 1089 | } 1090 | } 1091 | }, 1092 | "StrokeFocus2": { 1093 | "Stroke": { 1094 | "Color": { 1095 | "Rest": { 1096 | "$type": "color", 1097 | "$value": "{Global.Color.Black}" 1098 | } 1099 | } 1100 | } 1101 | }, 1102 | "RedBorder1": { 1103 | "Stroke": { 1104 | "Color": { 1105 | "Rest": { 1106 | "$type": "color", 1107 | "$value": "{Global.Color.Red.Tint40}" 1108 | } 1109 | } 1110 | } 1111 | }, 1112 | "RedBorder2": { 1113 | "Stroke": { 1114 | "Color": { 1115 | "Rest": { 1116 | "$type": "color", 1117 | "$value": "{Global.Color.Red.Primary}" 1118 | } 1119 | } 1120 | } 1121 | }, 1122 | "GreenBorder1": { 1123 | "Stroke": { 1124 | "Color": { 1125 | "Rest": { 1126 | "$type": "color", 1127 | "$value": "{Global.Color.Green.Tint40}" 1128 | } 1129 | } 1130 | } 1131 | }, 1132 | "GreenBorder2": { 1133 | "Stroke": { 1134 | "Color": { 1135 | "Rest": { 1136 | "$type": "color", 1137 | "$value": "{Global.Color.Green.Primary}" 1138 | } 1139 | } 1140 | } 1141 | }, 1142 | "DarkOrangeBorder1": { 1143 | "Stroke": { 1144 | "Color": { 1145 | "Rest": { 1146 | "$type": "color", 1147 | "$value": "{Global.Color.DarkOrange.Tint40}" 1148 | } 1149 | } 1150 | } 1151 | }, 1152 | "DarkOrangeBorder2": { 1153 | "Stroke": { 1154 | "Color": { 1155 | "Rest": { 1156 | "$type": "color", 1157 | "$value": "{Global.Color.DarkOrange.Primary}" 1158 | } 1159 | } 1160 | } 1161 | }, 1162 | "YellowBorder1": { 1163 | "Stroke": { 1164 | "Color": { 1165 | "Rest": { 1166 | "$type": "color", 1167 | "$value": "{Global.Color.Yellow.Tint40}" 1168 | } 1169 | } 1170 | } 1171 | }, 1172 | "NeutralShadowAmbient": { 1173 | "Fill": { 1174 | "Color": { 1175 | "Rest": { 1176 | "$type": "color", 1177 | "$value": "#0000001f" 1178 | } 1179 | } 1180 | } 1181 | }, 1182 | "NeutralShadowKey": { 1183 | "Fill": { 1184 | "Color": { 1185 | "Rest": { 1186 | "$type": "color", 1187 | "$value": "#00000024" 1188 | } 1189 | } 1190 | } 1191 | }, 1192 | "NeutralShadowAmbientLighter": { 1193 | "Fill": { 1194 | "Color": { 1195 | "Rest": { 1196 | "$type": "color", 1197 | "$value": "#0000000f" 1198 | } 1199 | } 1200 | } 1201 | }, 1202 | "NeutralShadowKeyLighter": { 1203 | "Fill": { 1204 | "Color": { 1205 | "Rest": { 1206 | "$type": "color", 1207 | "$value": "#00000012" 1208 | } 1209 | } 1210 | } 1211 | }, 1212 | "NeutralShadowAmbientDarker": { 1213 | "Fill": { 1214 | "Color": { 1215 | "Rest": { 1216 | "$type": "color", 1217 | "$value": "#00000033" 1218 | } 1219 | } 1220 | } 1221 | }, 1222 | "NeutralShadowKeyDarker": { 1223 | "Fill": { 1224 | "Color": { 1225 | "Rest": { 1226 | "$type": "color", 1227 | "$value": "#0000003d" 1228 | } 1229 | } 1230 | } 1231 | }, 1232 | "BrandShadowAmbient": { 1233 | "Fill": { 1234 | "Color": { 1235 | "Rest": { 1236 | "$type": "color", 1237 | "$value": "#0000004d" 1238 | } 1239 | } 1240 | } 1241 | }, 1242 | "BrandShadowKey": { 1243 | "Fill": { 1244 | "Color": { 1245 | "Rest": { 1246 | "$type": "color", 1247 | "$value": "#00000040" 1248 | } 1249 | } 1250 | } 1251 | } 1252 | } 1253 | -------------------------------------------------------------------------------- /demo/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Web", 3 | "collections": { 4 | "Global": { 5 | "modes": { 6 | "Global": [ "global.json" ] 7 | } 8 | }, 9 | "Web alias": { 10 | "modes": { 11 | "Light": [ "light.json" ], 12 | "Dark": [ "dark.json" ] 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /demo/manifest.web.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Web", 3 | "collections": { 4 | "Web alias": { 5 | "modes": { 6 | "Light": [ "light.json" ], 7 | "Dark": [ "dark.json" ] 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /demo/primitives.json: -------------------------------------------------------------------------------- 1 | { 2 | "Lorem ipsum": { 3 | "$type": "string", 4 | "$value": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Amet consectetur adipiscing elit duis tristique. Etiam erat velit scelerisque in dictum non consectetur a. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Blandit cursus risus at ultrices mi. Egestas diam in arcu cursus euismod quis viverra nibh cras. Urna condimentum mattis pellentesque id nibh. Felis imperdiet proin fermentum leo vel orci porta non. Id interdum velit laoreet id donec. Gravida rutrum quisque non tellus orci ac. Orci porta non pulvinar neque laoreet suspendisse. Nibh sit amet commodo nulla. Varius sit amet mattis vulputate enim. Tristique magna sit amet purus. Eget mi proin sed libero enim sed. Consequat nisl vel pretium lectus. Enim eu turpis egestas pretium." 5 | }, 6 | "Five": { 7 | "$type": "number", 8 | "$value": 5, 9 | "$description": "Number five is alive" 10 | }, 11 | "Figma is neat": { 12 | "$type": "boolean", 13 | "$value": true 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /demo/sample.tokens.json: -------------------------------------------------------------------------------- 1 | { 2 | "Global": { 3 | "Color": { 4 | "Red": { 5 | "$type": "color", 6 | "$value": "#ff0000" 7 | }, 8 | "Blue": { 9 | "$type": "color", 10 | "$value": "#0000ff" 11 | } 12 | } 13 | }, 14 | "Error2": { "$type": "color", "$value": "{Error}" }, 15 | "Error": { "$type": "color", "$value": "{Global.Color.Red}", "$description": "A special version of Red for error states." }, 16 | "IconSize": { "$type": "dimension", "$value": "32px" } 17 | } 18 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Variables Import", 3 | "id": "1253424530216967528", 4 | "api": "1.0.0", 5 | "permissions": ["teamlibrary"], 6 | "main": "build/controller.js", 7 | "ui": "build/ui.html", 8 | "editorType": ["figma"] 9 | } 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "figma-variables-import", 3 | "version": "0.2.0", 4 | "description": "Variables Import", 5 | "homepage": "https://www.figma.com/community/plugin/1253424530216967528", 6 | "author": "Travis Spomer ", 7 | "private": true, 8 | "repository": { 9 | "type": "private", 10 | "url": "https://github.com/microsoft/figma-variables-import" 11 | }, 12 | "scripts": { 13 | "analyze": "npx webpack --mode production --profile --json > profile.json && npx webpack-bundle-analyzer profile.json build", 14 | "build": "npx webpack --mode production", 15 | "build:watch": "npx webpack --mode development --watch", 16 | "lint": "npx eslint", 17 | "prettier:format": "npx prettier --write 'src/**/*.{js,jsx,ts,tsx,css,json}'" 18 | }, 19 | "dependencies": { 20 | "@travisspomer/promising-artist": "^1.0.0", 21 | "preact": "^10.11.0", 22 | "react": "npm:@preact/compat", 23 | "react-dom": "npm:@preact/compat", 24 | "styled-components": "^5.3.5" 25 | }, 26 | "devDependencies": { 27 | "@figma/plugin-typings": "^1.72.0", 28 | "@svgr/webpack": "^6.3.1", 29 | "@types/react": "^18.0.15", 30 | "@types/react-dom": "^18.0.6", 31 | "@types/styled-components": "^5.1.25", 32 | "@typescript-eslint/eslint-plugin": "^5.31.0", 33 | "@typescript-eslint/parser": "^5.31.0", 34 | "css-loader": "^6.7.1", 35 | "eslint": "^8.20.0", 36 | "html-webpack-plugin": "^5.5.0", 37 | "node-sass": "^8.0.0", 38 | "prettier": "^2.7.1", 39 | "sass-loader": "^13.2.0", 40 | "style-loader": "^3.3.1", 41 | "ts-loader": "^9.3.1", 42 | "tslib": "^2.4.0", 43 | "typescript": "^5.1.3", 44 | "webpack": "^5.94.0", 45 | "webpack-cli": "^4.10.0" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/assets/import.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/controller/index.ts: -------------------------------------------------------------------------------- 1 | import * as PromisingArtist from "@travisspomer/promising-artist" 2 | import type { OperationResult, PluginMethods, UIMethods } from "shared/collab" 3 | import type { JsonTokenDocument, JsonManifest } from "utils/tokens" 4 | import { importTokens } from "./variables" 5 | 6 | const _UI = PromisingArtist.collab( 7 | { 8 | notify(message) { 9 | figma.notify(message) 10 | }, 11 | async importFiles(files) { 12 | const results: OperationResult[] = [] 13 | 14 | // Parse all of the JSON before we start processing any tokens. 15 | const parsedFiles: Record = {} 16 | let manifest: JsonManifest | undefined 17 | for (const file of files) { 18 | try { 19 | const document = JSON.parse(file.text) 20 | if ("name" in document && "collections" in document) { 21 | if (manifest) { 22 | results.push({ result: "error", text: `More than one manifest file was found—ignoring ${file.name}.` }) 23 | } else { 24 | results.push({ result: "info", text: `Using token manifest file ${file.name}.` }) 25 | manifest = document 26 | } 27 | } else { 28 | parsedFiles[file.name] = document 29 | } 30 | } catch (ex) { 31 | results.push({ result: "error", text: `Failed to parse JSON: ${file.name}.` }) 32 | } 33 | } 34 | 35 | results.push(...(await importTokens(parsedFiles, manifest))) 36 | 37 | return results 38 | }, 39 | }, 40 | PromisingArtist.FigmaPlugin 41 | ) 42 | 43 | // ------------------------------------------------------------ 44 | 45 | figma.showUI(__html__, { themeColors: true, width: 420, height: 640 }) 46 | -------------------------------------------------------------------------------- /src/controller/variables.ts: -------------------------------------------------------------------------------- 1 | import type { OperationResult } from "shared/collab" 2 | import { jsonColorToFigmaColor } from "utils/color" 3 | import { type JsonToken, type JsonTokenDocument, type JsonManifest, allTokenNodes } from "utils/tokens" 4 | import type { JsonTokenType } from "utils/tokens/types" 5 | import { getAliasTargetName } from "utils/tokens/utils" 6 | 7 | /** For a given token name in the DTCG format, return a valid token name in the Figma format. */ 8 | function tokenNameToFigmaName(name: string): string { 9 | return name.replaceAll(".", "/") 10 | } 11 | 12 | /** For a given token $type in the DTCG format, return the corresponding Figma token type, or null if there isn't one. */ 13 | function tokenTypeToFigmaType($type: JsonTokenType): VariableResolvedDataType | null { 14 | switch ($type) { 15 | case "color": 16 | return "COLOR" 17 | case "dimension": 18 | case "duration": 19 | case "number": 20 | return "FLOAT" 21 | case "boolean": 22 | return "BOOLEAN" 23 | case "string": 24 | return "STRING" 25 | default: 26 | return null 27 | } 28 | } 29 | 30 | interface QueuedUpdate { 31 | figmaName: string 32 | token: JsonToken 33 | collectionName: string 34 | modeName: string 35 | } 36 | 37 | export async function importTokens(files: Record, manifest?: JsonManifest): Promise { 38 | if (!figma.variables) { 39 | return [ 40 | { 41 | result: "error", 42 | text: `Update and restart Figma to enable Variables features!`, 43 | }, 44 | ] 45 | } 46 | 47 | const results: OperationResult[] = [] 48 | 49 | // If a manifest wasn't supplied, invent a basic one before starting. 50 | if (!manifest) { 51 | const filenames = Object.keys(files) 52 | const name = filenames.join(", ") 53 | manifest = { 54 | name: name, 55 | collections: { 56 | [name]: { 57 | modes: { 58 | Default: filenames, 59 | }, 60 | }, 61 | }, 62 | } 63 | } 64 | 65 | // First, we need to know what variables are already present, so we can update them if necessary. 66 | const collections: Record = {} 67 | const variables: Record = {} 68 | 69 | { 70 | // Remote / team library variables 71 | const remoteCollectionsArray = figma.teamLibrary ? await figma.teamLibrary.getAvailableLibraryVariableCollectionsAsync() : [] 72 | for (const collection of remoteCollectionsArray) { 73 | collections[collection.name] = collection 74 | const variablesArray = await figma.teamLibrary.getVariablesInLibraryCollectionAsync(collection.key) 75 | for (const variable of variablesArray) variables[variable.name] = variable 76 | } 77 | 78 | // Local variables 79 | const collectionsArray = figma.variables.getLocalVariableCollections() 80 | for (const collection of collectionsArray) collections[collection.name] = collection 81 | const variablesArray = figma.variables.getLocalVariables() 82 | for (const variable of variablesArray) variables[variable.name] = variable 83 | } 84 | 85 | // Aliases can't be created until their target is, and we might see the alias before the target. So we have to maintain a queue 86 | // of tokens to add and update, and go through it multiple times. 87 | let queuedUpdates: QueuedUpdate[] = [] 88 | 89 | for (const collectionName in manifest.collections) { 90 | const collection = manifest.collections[collectionName] 91 | for (const modeName in collection.modes) { 92 | const modeFilenames = collection.modes[modeName] 93 | for (const filename of modeFilenames) { 94 | const document = files[filename] 95 | if (document) { 96 | for (const [name, token] of allTokenNodes(document)) { 97 | queuedUpdates.push({ figmaName: tokenNameToFigmaName(name), collectionName, modeName, token }) 98 | } 99 | } else { 100 | results.push({ 101 | result: "error", 102 | text: `The manifest mentioned ${filename} but you didn‘t give me that file, so I skipped it.`, 103 | }) 104 | } 105 | } 106 | } 107 | } 108 | 109 | // Now keep processing the queue of token updates until we make it through a whole iteration without accomplishing anything. 110 | let variablesCreated = 0, 111 | otherUpdatesCount = 0 112 | let keepGoing: boolean 113 | do { 114 | keepGoing = false 115 | const retryNextTime: typeof queuedUpdates = [] 116 | for (const update of queuedUpdates) { 117 | const figmaType = tokenTypeToFigmaType(update.token.$type) 118 | if (!figmaType) { 119 | results.push({ 120 | result: "info", 121 | text: `Unable to add ${update.figmaName} mode ${update.modeName} because ${update.token.$type} tokens aren‘t supported.`, 122 | }) 123 | continue 124 | } 125 | 126 | // First, if this is an alias, see if the target exists already. 127 | const targetName = getAliasTargetName(update.token.$value) 128 | let targetVariable: Variable | LibraryVariable | undefined = undefined 129 | if (targetName) { 130 | const targetFigmaName = tokenNameToFigmaName(targetName) 131 | targetVariable = variables[targetFigmaName] 132 | if (!targetVariable) { 133 | // This is an alias to a variable that hasn't been created yet, so we can't process it right now. 134 | // Save it for next iteration. 135 | retryNextTime.push(update) 136 | continue 137 | } 138 | } 139 | 140 | // TODO: Check for matching types: a variable can't be a string in one mode and a color in another. 141 | 142 | // Okay, this either isn't an alias, or it's an alias to something that indeed exists, so we can continue. 143 | // If the variable doesn't exist yet, create it now. 144 | let collection: VariableCollection | LibraryVariableCollection 145 | let variable: Variable | LibraryVariable | undefined = variables[update.figmaName] 146 | let modeId: string | undefined = undefined 147 | if (!variable) { 148 | // This variable doesn't exist yet. First, create its collection and mode if necessary. 149 | collection = collections[update.collectionName] 150 | if (!collection) { 151 | collection = figma.variables.createVariableCollection(update.collectionName) 152 | collections[update.collectionName] = collection 153 | modeId = collection.modes[0].modeId 154 | collection.renameMode(modeId, update.modeName) 155 | } else if (!("id" in collection)) { 156 | // The variable doesn't exist, but it's in a remote collection that does. 157 | results.push({ 158 | result: "error", 159 | text: `Failed to create ${update.figmaName} because it‘s defined in a different library.`, 160 | }) 161 | continue 162 | } 163 | 164 | // Then we can create the variable itself. 165 | variable = figma.variables.createVariable(update.figmaName, collection.id, figmaType) 166 | variables[update.figmaName] = variable 167 | variablesCreated++ 168 | } else if (!("id" in variable)) { 169 | results.push({ result: "error", text: `Failed to update ${update.figmaName} because it‘s defined in a different library.` }) 170 | continue 171 | } else { 172 | otherUpdatesCount++ 173 | collection = figma.variables.getVariableCollectionById(variable.variableCollectionId)! 174 | } 175 | if (!modeId) { 176 | const mode = collection.modes.find(obj => obj.name === update.modeName) 177 | try { 178 | modeId = mode ? mode.modeId : collection.addMode(update.modeName) 179 | } catch (ex) { 180 | results.push({ 181 | result: "error", 182 | text: `Failed to add a variable mode for ${update.modeName}. You may be at the limit of what your Figma account currently allows. (You already have ${collection.modes.length}.) 💸`, 183 | }) 184 | break 185 | } 186 | } 187 | if (!("id" in variable)) throw new Error("Why wasn't this case caught by earlier code?") 188 | 189 | // Then, we just need to update its value for this mode. 190 | 191 | if (targetVariable) { 192 | // This variable is an alias token. 193 | if (!("id" in targetVariable)) { 194 | // ...and it's referencing a variable in a different file, so we need to import that target before we can reference it. 195 | targetVariable = await figma.variables.importVariableByKeyAsync(targetVariable.key) 196 | } 197 | variable.setValueForMode(modeId, figma.variables.createVariableAlias(targetVariable as Variable)) 198 | } else { 199 | const value = update.token.$value 200 | switch (update.token.$type) { 201 | case "color": { 202 | const color = jsonColorToFigmaColor(value) 203 | if (color) variable.setValueForMode(modeId, color) 204 | else results.push({ result: "error", text: `Invalid color: ${update.figmaName} = ${JSON.stringify(value)}` }) 205 | break 206 | } 207 | case "dimension": 208 | case "duration": 209 | case "number": { 210 | const float = typeof value === "number" ? value : parseFloat(value) 211 | if (!isNaN(float)) variable.setValueForMode(modeId, float) 212 | else 213 | results.push({ 214 | result: "error", 215 | text: `Invalid ${update.token.$type}: ${update.figmaName} = ${JSON.stringify(value)}`, 216 | }) 217 | break 218 | } 219 | case "boolean": 220 | if (typeof value === "boolean") variable.setValueForMode(modeId, value) 221 | else 222 | results.push({ 223 | result: "error", 224 | text: `Invalid ${update.token.$type}: ${update.figmaName} = ${JSON.stringify(value)}`, 225 | }) 226 | break 227 | case "string": 228 | variable.setValueForMode(modeId, value) 229 | break 230 | default: 231 | throw new Error( 232 | `Failed to update a variable of type ${update.token.$type}. tokenTypeToFigmaType probably needs to be updated.` 233 | ) 234 | } 235 | } 236 | 237 | variable.description = update.token.$description || variable.description || "" 238 | 239 | // Important: This syntax is a hack specific to this plugin and is not a part of the standard or Figma plans. 240 | // Also, the scopes property is not available for strings and booleans. 241 | if (variable.resolvedType === "COLOR" || variable.resolvedType === "FLOAT") { 242 | if (update.token.$extensions && update.token.$extensions["com.figma"] && update.token.$extensions["com.figma"].scopes) { 243 | variable.scopes = update.token.$extensions["com.figma"].scopes 244 | } else { 245 | variable.scopes = variable.scopes || ["ALL_SCOPES"] 246 | } 247 | } 248 | 249 | // Any time we successfully make any updates, we need to loop again unless we completely finish. 250 | keepGoing = true 251 | } 252 | queuedUpdates = retryNextTime 253 | } while (keepGoing && queuedUpdates.length) 254 | 255 | // Now, if queuedUpdates isn't empty, it's just a list of unresolved aliases, so report those as errors. 256 | if (queuedUpdates.length) { 257 | const isTeamLibraryAvailable = !!figma.teamLibrary 258 | if (!isTeamLibraryAvailable) { 259 | results.push({ 260 | result: "error", 261 | text: "The Figma community version of this plugin cannot create variables that alias variables in other files during this phase of the Figma beta. (You can build this plugin from the source code to get all features.) With that in mind:", 262 | }) 263 | } 264 | for (const missing of queuedUpdates) { 265 | results.push({ 266 | result: "error", 267 | text: `Unable to add ${missing.figmaName} mode ${missing.modeName} because it is an alias of ${tokenNameToFigmaName( 268 | getAliasTargetName(missing.token.$value) || "another token" 269 | )} but ${isTeamLibraryAvailable ? "that doesn‘t exist" : "it wasn‘t found—it may be in a different file"}.`, 270 | }) 271 | } 272 | } 273 | 274 | if ((variablesCreated || otherUpdatesCount) && results.length) 275 | results.push({ 276 | result: "error", 277 | text: `${variablesCreated} variables were created and ${otherUpdatesCount} other updates were made, but ${results.length} had errors. Not great, not terrible.`, 278 | }) 279 | else if (variablesCreated || otherUpdatesCount) 280 | results.push({ 281 | result: "info", 282 | text: `${variablesCreated} variables were created and ${otherUpdatesCount} other updates were made.`, 283 | }) 284 | else results.push({ result: "error", text: `Failed to create or update any variables due to errors.` }) 285 | 286 | return results 287 | } 288 | -------------------------------------------------------------------------------- /src/shared/collab.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react" 2 | import type * as PromisingArtist from "@travisspomer/promising-artist" 3 | import type { JsonToken } from "utils/tokens" 4 | 5 | export interface PluginMethods { 6 | notify(message: string): void 7 | importFiles(files: JsonFile[]): Promise 8 | } 9 | export type PluginProxy = PromisingArtist.CollabProxy 10 | export const PluginContext = createContext(undefined as unknown as PluginProxy) 11 | 12 | export interface UIMethods { 13 | // Nothing needed yet 14 | } 15 | export type UIProxy = PromisingArtist.CollabProxy 16 | 17 | export type Token = Readonly 18 | 19 | export interface JsonFile { 20 | name: string 21 | text: string 22 | } 23 | 24 | export interface OperationResult { 25 | result: "error" | "info" 26 | text: string 27 | } 28 | -------------------------------------------------------------------------------- /src/ui/components/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import styled from "styled-components" 3 | import * as PromisingArtist from "@travisspomer/promising-artist" 4 | import { PluginContext } from "shared/collab" 5 | import type { PluginMethods, UIMethods } from "shared/collab" 6 | import { Footer } from "./Footer" 7 | import { PluginLayout } from "./PluginLayout" 8 | import { MainPage } from "./MainPage" 9 | 10 | export function App() { 11 | const Plugin = PromisingArtist.useCollab({}, PromisingArtist.FigmaPluginUI) 12 | 13 | return ( 14 | 15 | 16 | }> 17 | 18 | 19 | 20 | 21 | ) 22 | } 23 | export default App 24 | 25 | const Container = styled.div` 26 | width: 100%; 27 | height: 100%; 28 | display: flex; 29 | flex-direction: column; 30 | ` 31 | -------------------------------------------------------------------------------- /src/ui/components/Button.tsx: -------------------------------------------------------------------------------- 1 | import styled, { css } from "styled-components" 2 | 3 | export const ButtonBaseStyles = css` 4 | height: 32px; 5 | line-height: 30px; 6 | max-width: 200px; 7 | padding: 0 11px; 8 | 9 | background-color: transparent; 10 | border-radius: 6px; 11 | border: 1px solid var(--figma-color-border-strong, #2c2c2c); 12 | 13 | color: var(--figma-color-text, rgba(0, 0, 0, 0.9)); 14 | font: inherit; 15 | text-align: center; 16 | 17 | cursor: default; 18 | user-select: none; 19 | ` 20 | 21 | export const OutlineButton = styled.button` 22 | ${ButtonBaseStyles} 23 | 24 | &:focus-visible { 25 | border-color: var(--figma-color-border-brand-strong, #0d99ff); 26 | outline: 1px solid var(--figma-color-border-brand-strong, #0d99ff); 27 | outline-offset: -2px; 28 | } 29 | ` 30 | 31 | export const AccentButton = styled.button` 32 | ${ButtonBaseStyles} 33 | 34 | background-color: var(--figma-color-bg-brand, #0d99ff); 35 | border-color: transparent; 36 | 37 | color: var(--figma-color-text-onbrand, white); 38 | font-weight: 500; 39 | 40 | &:focus-visible { 41 | outline: 1px solid var(--figma-color-border-onbrand-strong, white); 42 | outline-offset: -3px; 43 | } 44 | ` 45 | export default AccentButton 46 | -------------------------------------------------------------------------------- /src/ui/components/Disclosure.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import type Preact from "preact" 3 | import styled from "styled-components" 4 | 5 | export interface DisclosureProps { 6 | label: Preact.ComponentChildren 7 | children: Preact.ComponentChildren 8 | open?: boolean 9 | } 10 | 11 | export function Disclosure(props: DisclosureProps) { 12 | return ( 13 | 14 | {props.label} 15 | {props.children} 16 | 17 | ) 18 | } 19 | export default Disclosure 20 | 21 | const StyledDetails = styled.details` 22 | summary { 23 | margin: 0 -16px 0 -1em; 24 | padding: 8px 0; 25 | 26 | color: var(--figma-color-text-brand, #007be5); 27 | text-decoration: none; 28 | 29 | cursor: pointer; 30 | 31 | & > * { 32 | display: inline; 33 | } 34 | 35 | &::marker { 36 | color: transparent; 37 | transition: color 200ms ease; 38 | } 39 | 40 | &:hover, 41 | &:focus-visible { 42 | text-decoration: underline; 43 | 44 | &::marker { 45 | color: var(--figma-color-icon-disabled, rgba(0, 0, 0, 0.3)); 46 | } 47 | } 48 | } 49 | 50 | &[open] { 51 | summary::marker { 52 | color: var(--figma-color-icon-disabled, rgba(0, 0, 0, 0.3)); 53 | } 54 | } 55 | ` 56 | -------------------------------------------------------------------------------- /src/ui/components/FileDropZone.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import styled from "styled-components" 3 | import type { UploadLinkProps } from "./UploadLink" 4 | import { classNames } from "utils/classNames" 5 | 6 | // FileDropZone uses the same props as UploadLink and functions in largely the same way, 7 | // but some props such as "accept" do not work. 8 | 9 | export function FileDropZone(props: UploadLinkProps) { 10 | const [isDragging, setIsDragging] = React.useState(false) 11 | 12 | return ( 13 | 22 | {props.children} 23 | 24 | ) 25 | 26 | function onDragStart(ev: DragEvent) { 27 | ev.preventDefault() 28 | } 29 | 30 | function onDragEnter(ev: DragEvent) { 31 | ev.stopPropagation() 32 | ev.preventDefault() 33 | setIsDragging(true) 34 | } 35 | 36 | function onDragOver(ev: DragEvent) { 37 | ev.stopPropagation() 38 | ev.preventDefault() 39 | if (ev.dataTransfer) ev.dataTransfer.dropEffect = "copy" 40 | } 41 | 42 | function onDragLeave(ev: DragEvent) { 43 | ev.stopPropagation() 44 | ev.preventDefault() 45 | setIsDragging(false) 46 | } 47 | 48 | function onDrop(ev: DragEvent) { 49 | ev.stopPropagation() 50 | ev.preventDefault() 51 | setIsDragging(false) 52 | if (ev.dataTransfer && ev.dataTransfer.files) props.onFileChosen(ev.dataTransfer.files) 53 | } 54 | } 55 | export default FileDropZone 56 | 57 | const DropZone = styled.div` 58 | border: 3px dashed var(--figma-color-border-disabled-strong, rgba(0, 0, 0, 0.3)); 59 | padding: 2em; 60 | background-color: var(--figma-color-bg-secondary, #f5f5f5); 61 | 62 | * { 63 | pointer-events: none; 64 | } 65 | 66 | &.drag-over { 67 | border: 3px solid var(--figma-color-border-selected, #0d99ff); 68 | background-color: var(--figma-color-bg-selected, #e5f4ff); 69 | } 70 | ` 71 | -------------------------------------------------------------------------------- /src/ui/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import styled from "styled-components" 3 | import { Content } from "./PluginLayout" 4 | 5 | export function Footer() { 6 | return ( 7 | 8 |
This is not a supported product. Hopefully it helps though.
9 |
10 | © 2023 Microsoft 11 | {" • "} 12 | 13 | Feedback 14 | 15 | {" • "} 16 | 17 | GitHub 18 | 19 | {" • "} 20 | 21 | Privacy 22 | 23 | {" • "} 24 | 25 | Terms of use 26 | 27 |
28 | 29 | ) 30 | } 31 | export default Footer 32 | 33 | const StyledLink = styled.a` 34 | color: var(--figma-color-text-brand, #007be5); 35 | text-decoration: none; 36 | ` 37 | -------------------------------------------------------------------------------- /src/ui/components/Icons.tsx: -------------------------------------------------------------------------------- 1 | import Import from "assets/import.svg" 2 | 3 | export { Import } 4 | -------------------------------------------------------------------------------- /src/ui/components/MainPage.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import styled from "styled-components" 3 | import { type JsonFile, type OperationResult, PluginContext } from "shared/collab" 4 | import { Disclosure } from "./Disclosure" 5 | import { FileDropZone } from "./FileDropZone" 6 | import { Import } from "./Icons" 7 | import { Content } from "./PluginLayout" 8 | 9 | export function MainPage() { 10 | const Plugin = React.useContext(PluginContext) 11 | const [results, setResults] = React.useState([]) 12 | 13 | return ( 14 | <> 15 | 16 |

Import token JSON files

17 |

Hello! I am here to help you turn token JSON into Figma variables.

18 |

Drag some files into the box below:

19 | 28 | 29 |

The manifest files I support are a thing I just made up. They should look like this:

30 | 31 | {`{ 32 | "name": "Web tokens", 33 | "collections": { 34 | "Global": { 35 | "modes": { 36 | "Default": [ "global.json" ] 37 | } 38 | }, 39 | "Alias": { 40 | "modes": { 41 | "Light": [ "light.json" ], 42 | "Dark": [ "dark.json" ] 43 | } 44 | } 45 | } 46 | }`} 47 | 48 | 49 |

The files never leave your computer.

50 | 51 | 52 | 53 | 54 | 55 |
Mmmm, files. Yummy.
56 | 57 | 58 | 59 | 60 | {results.length > 0 &&

Results

} 61 | 62 | {results.map((result, i) => ( 63 | 64 | {result.result === "error" ? "❌" : ""} 65 | {result.text} 66 | 67 | ))} 68 | 69 | 70 | 71 | ) 72 | 73 | async function onFileChosen(files: FileList) { 74 | const fileList: JsonFile[] = [] 75 | const newResults: OperationResult[] = [] 76 | 77 | try { 78 | setResults([{ result: "info", text: "Thinking..." }]) 79 | 80 | for (const file of files) { 81 | try { 82 | const fileContents = await file.text() 83 | fileList.push({ name: file.name, text: fileContents }) 84 | } catch (ex) { 85 | newResults.push({ result: "error", text: `Failed to read the contents of ${file.name}.` }) 86 | } 87 | } 88 | 89 | if (fileList.length) newResults.push(...(await Plugin.importFiles(fileList))) 90 | 91 | setResults(newResults) 92 | } catch (ex) { 93 | console.error(ex) 94 | newResults.push({ 95 | result: "error", 96 | text: `Failed to import the token files: ${ 97 | (ex && ((typeof ex === "object" && "message" in ex && ex.message) || (typeof ex === "string" && ex))) || 98 | "no further details available" 99 | }`, 100 | }) 101 | setResults(newResults) 102 | } 103 | } 104 | } 105 | export default MainPage 106 | 107 | const Horizontal = styled.div` 108 | display: flex; 109 | gap: 1em; 110 | align-items: center; 111 | justify-content: center; 112 | ` 113 | 114 | const NarrowTabsPre = styled.pre` 115 | tab-size: 2; 116 | cursor: text; 117 | user-select: text; 118 | ` 119 | 120 | const ResultsList = styled.ul` 121 | padding: 0; 122 | user-select: text; 123 | ` 124 | 125 | const Result = styled.li` 126 | margin: 0.5em 0; 127 | display: grid; 128 | grid-template-columns: 2em 1fr; 129 | ` 130 | 131 | const ResultIcon = styled.div` 132 | user-select: none; 133 | ` 134 | 135 | const ResultText = styled.div`` 136 | -------------------------------------------------------------------------------- /src/ui/components/PluginLayout.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import type Preact from "preact" 3 | import styled from "styled-components" 4 | 5 | export interface PluginLayoutProps { 6 | header?: Preact.ComponentChildren 7 | children: Preact.ComponentChildren 8 | footer?: Preact.ComponentChildren 9 | } 10 | 11 | export function PluginLayout(props: PluginLayoutProps) { 12 | return ( 13 | 14 |
{props.header}
15 | {props.children} 16 |
{props.footer}
17 | 18 | ) 19 | } 20 | export default PluginLayout 21 | 22 | const Root = styled.div` 23 | height: 100%; 24 | display: grid; 25 | grid-template-rows: auto 1fr auto; 26 | ` 27 | 28 | const Body = styled.section` 29 | display: flex; 30 | flex-direction: column; 31 | overflow: hidden auto; 32 | ` 33 | 34 | const Header = styled.header` 35 | grid-row: 1; 36 | ` 37 | 38 | const Footer = styled.footer` 39 | grid-row: -1; 40 | 41 | border-top: 1px solid var(--figma-color-border, #e5e5e5); 42 | ` 43 | 44 | export interface ContentProps { 45 | /** The content children to render. */ 46 | children: Preact.ComponentChildren 47 | /** Horizontally center the content. */ 48 | center?: boolean 49 | /** Align the content to the right. */ 50 | right?: boolean 51 | /** Align the content to the bottom. (This should be the last content item in the container.) */ 52 | bottom?: boolean 53 | } 54 | 55 | export function Content(props: ContentProps) { 56 | return ( 57 | <> 58 | {props.bottom && } 59 | 60 | 61 | ) 62 | } 63 | 64 | const StyledContent = styled.div` 65 | padding: 16px; 66 | ${props => (props.center ? "text-align: center;" : "")} 67 | ${props => (props.right ? "text-align: right;" : "")} 68 | ${props => (props.bottom ? "justify-self: flex-end;" : "")} 69 | ` 70 | 71 | const Spacer = styled.div` 72 | flex: 1; 73 | ` 74 | -------------------------------------------------------------------------------- /src/ui/components/Textbox.tsx: -------------------------------------------------------------------------------- 1 | import styled from "styled-components" 2 | 3 | export const Textbox = styled.input` 4 | padding: 7px; 5 | 6 | background-color: var(--figma-color-bg, white); 7 | border: 1px solid var(--figma-color-border, #e6e6e6); 8 | border-radius: 2px; 9 | 10 | color: var(--figma-color-text, #333333); 11 | fill: var(--figma-color-icon, #333333); 12 | font: inherit; 13 | 14 | cursor: default; 15 | user-select: initial; 16 | 17 | &:focus-visible { 18 | border-color: var(--figma-color-border-selected, #0d99ff); 19 | outline: 1px solid var(--figma-color-border-selected, #0d99ff); 20 | outline-offset: -2px; 21 | } 22 | 23 | &:focus::selection { 24 | color: var(--figma-color-text, #333333); 25 | background-color: var(--figma-color-bg-onselected, #bde3ff); 26 | } 27 | ` 28 | export default Textbox 29 | -------------------------------------------------------------------------------- /src/ui/components/UploadLink.tsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import type Preact from "preact" 3 | 4 | export interface UploadLinkProps { 5 | children?: Preact.ComponentChildren 6 | className?: string 7 | style?: React.JSX.CSSProperties 8 | accept: typeof HTMLInputElement.prototype.accept 9 | multiple?: typeof HTMLInputElement.prototype.multiple 10 | capture?: typeof HTMLInputElement.prototype.capture 11 | onFileChosen: (files: FileList) => void 12 | } 13 | 14 | export function UploadLink(props: UploadLinkProps) { 15 | const filePicker = React.useRef(null) 16 | 17 | return ( 18 | <> 19 | 20 | {props.children} 21 | 22 | 31 | 32 | ) 33 | 34 | function showFilePicker(ev: MouseEvent) { 35 | ev.stopPropagation() 36 | ev.preventDefault() 37 | filePicker.current?.click() 38 | } 39 | 40 | function onFileChosen() { 41 | const files = filePicker.current?.files 42 | if (!files || files.length === 0) return 43 | props.onFileChosen(files) 44 | } 45 | } 46 | export default UploadLink 47 | -------------------------------------------------------------------------------- /src/ui/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /src/ui/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as ReactDOM from "react-dom" 3 | import App from "./components/App" 4 | import "./styles.scss" 5 | 6 | ReactDOM.render(, document.getElementById("root")!) 7 | -------------------------------------------------------------------------------- /src/ui/styles.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *:before, 3 | *:after { 4 | box-sizing: inherit; 5 | } 6 | 7 | html, 8 | body, 9 | #root { 10 | box-sizing: border-box; 11 | height: 100%; 12 | margin: 0; 13 | padding: 0; 14 | user-select: none; 15 | } 16 | 17 | body { 18 | font-family: Inter, system-ui, sans-serif; 19 | font-size: 11px; 20 | line-height: (16px / 11px); 21 | background-color: var(--figma-color-bg, #ffffff); 22 | color: var(--figma-color-text, rgba(0, 0, 0, 0.9)); 23 | } 24 | 25 | h1 { 26 | font-size: 14px; 27 | font-weight: normal; 28 | } 29 | 30 | h2 { 31 | font-size: 12px; 32 | font-weight: 600; 33 | } 34 | 35 | h3 { 36 | font-size: 11px; 37 | font-weight: 600; 38 | } 39 | 40 | h4, 41 | h5, 42 | h6 { 43 | font-size: 11px; 44 | font-weight: normal; 45 | } 46 | 47 | a, 48 | a:visited { 49 | color: var(--figma-color-text-brand, #007be5); 50 | text-decoration: none; 51 | } 52 | 53 | a:hover, 54 | a:focus-visible { 55 | text-decoration: underline; 56 | } 57 | 58 | b, 59 | strong { 60 | font-weight: 600; 61 | } 62 | 63 | *:focus { 64 | outline: none; 65 | } 66 | 67 | img, 68 | svg { 69 | border: none; 70 | page-break-inside: avoid; 71 | vertical-align: baseline; 72 | } 73 | 74 | button { 75 | border-radius: 0; 76 | border-width: 0; 77 | } 78 | 79 | input, 80 | button, 81 | textarea, 82 | select, 83 | option, 84 | optgroup { 85 | font: inherit; 86 | } 87 | -------------------------------------------------------------------------------- /src/utils/classNames.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Creates a space-delimited CSS class list. 3 | @param args A list of CSS classes or falsy values. 4 | @returns A single space-separated string suitable for an element's "class" property. 5 | @example 6 | */ 7 | export function classNames(...args: (string | false | undefined | null)[]): string { 8 | return args.filter(value => !!value).join(" ") 9 | } 10 | -------------------------------------------------------------------------------- /src/utils/color.ts: -------------------------------------------------------------------------------- 1 | function toHex2(num: number): string { 2 | return Math.round(num * 0xff) 3 | .toString(16) 4 | .padStart(2, "0") 5 | } 6 | 7 | export function toHexColor(rgb: RGB, opacity?: number): string { 8 | return `#${toHex2(rgb.r)}${toHex2(rgb.g)}${toHex2(rgb.b)}${opacity !== undefined && opacity < 1.0 ? toHex2(opacity) : ""}` 9 | } 10 | 11 | /** Converts a 2-character hex string 00-FF to a number 0-1 without rounding. */ 12 | function hex2ToFloat(hex2: string): number { 13 | return parseInt(hex2, 16) / 0xff 14 | } 15 | 16 | /** Converts a 2-character hex string 00-FF to a number 0.00-1.00 with two digits of precision after the decimal point. */ 17 | function hex2ToFloat2(hex2: string): number { 18 | return Math.round(parseInt(hex2, 16) * (100 / 0xff)) / 100 19 | } 20 | 21 | /** 22 | Converts any valid Color value in the DTCG format to a Figma solid paint color. 23 | @param hex A string representing a valid color in the DTCG format. 24 | @returns A Figma RGB or RGBA object, or null if the string could not be parsed. 25 | @see https://tr.designtokens.org/format/#color 26 | */ 27 | export function jsonColorToFigmaColor(hex: string): RGB | RGBA | null { 28 | if (!hex.startsWith("#")) { 29 | return null 30 | } else if (hex.length === 9) { 31 | const color = { 32 | r: hex2ToFloat(hex.slice(1, 3)), 33 | g: hex2ToFloat(hex.slice(3, 5)), 34 | b: hex2ToFloat(hex.slice(5, 7)), 35 | a: hex2ToFloat2(hex.slice(7, 9)), 36 | } 37 | if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b) || isNaN(color.a)) return null 38 | return color 39 | } else if (hex.length === 7) { 40 | const color = { 41 | r: hex2ToFloat(hex.slice(1, 3)), 42 | g: hex2ToFloat(hex.slice(3, 5)), 43 | b: hex2ToFloat(hex.slice(5, 7)), 44 | } 45 | if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) return null 46 | return color 47 | } else { 48 | return null 49 | } 50 | } 51 | 52 | /** 53 | Converts any valid Color value in the DTCG format to a Figma solid paint color and an opacity value. 54 | @param hex A string representing a valid color in the DTCG format. 55 | @returns If the string could be parsed, a 2-element array containing a Figma RGB object and an opacity value; or null if the string could not be parsed. 56 | @see https://tr.designtokens.org/format/#color 57 | */ 58 | export function jsonColorToFigmaColorAndOpacity(hex: string): [color: RGB, opacity: number] | null { 59 | if (hex.startsWith("#") && (hex.length === 7 || hex.length === 9)) { 60 | const a = hex.length === 9 ? hex2ToFloat2(hex.slice(7, 9)) : 1 61 | if (isNaN(a)) return null 62 | const color = { 63 | r: hex2ToFloat(hex.slice(1, 3)), 64 | g: hex2ToFloat(hex.slice(3, 5)), 65 | b: hex2ToFloat(hex.slice(5, 7)), 66 | } 67 | if (isNaN(color.r) || isNaN(color.g) || isNaN(color.b)) return null 68 | return [color, a] 69 | } else { 70 | return null 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /src/utils/tokens/aliases.ts: -------------------------------------------------------------------------------- 1 | import type { OperationResult } from "shared/collab" 2 | import type { JsonToken } from "./types" 3 | import { getAliasTargetName } from "./utils" 4 | 5 | /** 6 | Given an object mapping token full names to tokens (such as from getAllTokens), resolves all aliases. 7 | @param tokens An object mapping token full names to tokens. 8 | @returns Details about any errors that occurred. 9 | @example const tokens = resolveAllAliases(getAllTokens(JSON.parse(tokenJson))) 10 | */ 11 | export function resolveAllAliases(tokens: Record): OperationResult[] { 12 | const results: OperationResult[] = [] 13 | for (const name in tokens) { 14 | resolveOneAlias(name, results) 15 | } 16 | return results 17 | 18 | function resolveOneAlias(name: string, currentResults: OperationResult[], previousReferences?: string | ReadonlyArray): void { 19 | const token = tokens[name] 20 | if (!token) { 21 | currentResults.push({ result: "error", text: `A token was an alias of "${name}" but that token doesn‘t exist.` }) 22 | return 23 | } 24 | const value = token.$value 25 | if (!token) { 26 | currentResults.push({ result: "error", text: `A token was an alias of "${name}" but that doesn‘t have a value.` }) 27 | return 28 | } 29 | const targetName = getAliasTargetName(value) 30 | 31 | // If this isn't an alias then there's nothing left to do. 32 | if (!targetName) return 33 | 34 | // An alias to the same token is never valid. 35 | if (targetName === name) { 36 | currentResults.push({ result: "error", text: `Alias cycle detected: ${targetName} ← ${name}.` }) 37 | return 38 | } 39 | 40 | // Alias cycles (A -> B -> A) are not valid. 41 | if (previousReferences) { 42 | if (typeof previousReferences === "string") { 43 | if (previousReferences === targetName) { 44 | currentResults.push({ result: "error", text: `Alias cycle detected: ${targetName} ← ${name} ← ${targetName}.` }) 45 | return 46 | } 47 | } else { 48 | if (previousReferences.indexOf(targetName) >= 0) { 49 | currentResults.push({ 50 | result: "error", 51 | text: `Alias cycle detected: ${targetName} ← ${name} ← ${previousReferences.join(" ← ")}.`, 52 | }) 53 | return 54 | } 55 | } 56 | } 57 | 58 | // If this token IS an alias, resolve it recursively. 59 | resolveOneAlias( 60 | targetName, 61 | currentResults, 62 | !previousReferences ? name : typeof previousReferences === "string" ? [name, previousReferences] : [name, ...previousReferences] 63 | ) 64 | // Figma native app doesn't support this syntax 65 | // tokens[name] = { ...tokens[name], ...tokens[targetName] } 66 | tokens[name] = Object.assign([], tokens[name], tokens[targetName]) 67 | return 68 | } 69 | 70 | /* 71 | Examples of reference cycles: 72 | 73 | { 74 | "Invalid1": { "$value": "{Invalid2}" }, 75 | "Invalid2": { "$value": "{Invalid1}" }, 76 | "Invalid3": { "$value": "{Invalid3}" }, 77 | "Invalid4": { "$value": "{Invalid5}" }, 78 | "Invalid5": { "$value": "{Invalid6}" }, 79 | "Invalid6": { "$value": "{Invalid4}" } 80 | } 81 | */ 82 | } 83 | -------------------------------------------------------------------------------- /src/utils/tokens/index.ts: -------------------------------------------------------------------------------- 1 | export type { JsonManifest, JsonToken, JsonTokenDocument, JsonTokenGroup } from "./types" 2 | export { resolveAllAliases } from "./aliases" 3 | export { allTokenNodes, getAllTokens } from "./iteration" 4 | -------------------------------------------------------------------------------- /src/utils/tokens/iteration.ts: -------------------------------------------------------------------------------- 1 | import type { JsonToken, JsonTokenDocument } from "./types" 2 | import { isChildName, isToken, isTokenGroup } from "./utils" 3 | 4 | export type IteratedToken = [name: string, token: JsonToken] 5 | 6 | /** 7 | Given a token document in DTCG format, iterates through all of the tokens. Each item returned from the generator is a 2-element tuple array of the form [ name, token ]. 8 | @param root An object representation of a token document in the DTCG format: as in the return value of JSON.parse() or similar. 9 | @example for (const [name, token] of allTokenNodes(root)) { console.log(name, "=", token) } 10 | */ 11 | export function* allTokenNodes(root: JsonTokenDocument): Generator { 12 | if (typeof root !== "object") throw new Error("Tokens must be in the Design Token Community Group format.") 13 | 14 | const groups = [{ nameDot: "", node: root }] 15 | while (true) { 16 | const thisGroup = groups.pop() 17 | if (!thisGroup) break 18 | for (const name in thisGroup.node) { 19 | if (!isChildName(name)) continue 20 | if (!thisGroup.node.hasOwnProperty(name)) continue 21 | const child = thisGroup.node[name] 22 | if (isToken(child)) { 23 | yield [thisGroup.nameDot + name, child] 24 | } else if (isTokenGroup(child)) { 25 | groups.unshift({ nameDot: `${thisGroup.nameDot}${name}.`, node: child }) 26 | } 27 | } 28 | } 29 | } 30 | 31 | /** 32 | Given a token document in the DTCG format, returns an object mapping each token's full name to the token itself, 33 | "flattening" the structure to remove groups. 34 | @param root An object representation of a token document in the DTCG format: as in the return value of JSON.parse() or similar. 35 | @returns An object mapping token names to tokens. 36 | @example {"Global.Color.Purple": { $value: "#ff00ff" }} 37 | */ 38 | export function getAllTokens(root: JsonTokenDocument): Record { 39 | const tokens: Record = {} 40 | for (const [name, token] of allTokenNodes(root)) { 41 | tokens[name] = token 42 | } 43 | return tokens 44 | } 45 | -------------------------------------------------------------------------------- /src/utils/tokens/types.ts: -------------------------------------------------------------------------------- 1 | export interface JsonManifest { 2 | name: string 3 | collections: Record 4 | } 5 | 6 | export interface JsonManifestCollection { 7 | modes: Record 8 | } 9 | 10 | export type JsonTokenDocument = JsonTokenChildren & { 11 | $schema?: string 12 | } 13 | 14 | export type JsonTokenGroup = JsonTokenChildren & { 15 | $description?: string 16 | } 17 | 18 | export interface JsonTokenChildren { 19 | [key: string]: JsonTokenGroup | JsonToken 20 | } 21 | 22 | export type JsonTokenValue = any 23 | 24 | export interface JsonToken { 25 | $type: JsonTokenType 26 | $value: JsonTokenValue 27 | $description?: string 28 | $extensions?: Record 29 | } 30 | 31 | type JsonTokenPrimitiveType = "string" | "number" | "boolean" | "object" | "array" | "null" 32 | type JsonTokenBasicType = "color" | "dimension" | "fontFamily" | "fontWeight" | "duration" | "cubicBezier" 33 | type JsonTokenCompositeType = "strokeStyle" | "border" | "transition" | "shadow" | "gradient" | "typography" 34 | export type JsonTokenType = JsonTokenPrimitiveType | JsonTokenBasicType | JsonTokenCompositeType 35 | -------------------------------------------------------------------------------- /src/utils/tokens/utils.ts: -------------------------------------------------------------------------------- 1 | import type { JsonToken, JsonTokenGroup } from "./types" 2 | 3 | export function isChildName(name: string): boolean { 4 | return name.charCodeAt(0) !== 36 /* "$" */ 5 | } 6 | 7 | export function isToken(obj: JsonTokenGroup | JsonToken): obj is JsonToken { 8 | return typeof obj === "object" && "$value" in obj 9 | } 10 | 11 | export function isTokenGroup(obj: JsonTokenGroup | JsonToken): obj is JsonTokenGroup { 12 | return typeof obj === "object" && !("$value" in obj) 13 | } 14 | 15 | export function isAliasValue(value: string): boolean { 16 | return value.charCodeAt(0) === 123 /* "{" */ && value.charCodeAt(value.length - 1) === 125 /* "}" */ 17 | } 18 | 19 | export function getAliasTargetName(value: any): string | null { 20 | if (typeof value === "string" && value.charCodeAt(0) === 123 /* "{" */ && value.charCodeAt(value.length - 1) === 125 /* "}" */) 21 | return value.slice(1, -1) 22 | else return null 23 | } 24 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "allowSyntheticDefaultImports": true, 5 | "baseUrl": ".", 6 | "paths": { 7 | "*": [ 8 | "src/*" 9 | ], 10 | "react": [ 11 | "./node_modules/preact/compat/" 12 | ], 13 | "react-dom": [ 14 | "./node_modules/preact/compat/" 15 | ] 16 | }, 17 | "typeRoots": [ 18 | "./typings", 19 | "./node_modules/@types", 20 | "./node_modules/@figma" 21 | ], 22 | "target": "es2021", 23 | "jsx": "react", 24 | "experimentalDecorators": true, 25 | "forceConsistentCasingInFileNames": true, 26 | "module": "es2022", 27 | "moduleResolution": "node", 28 | "noEmit": true, 29 | "noEmitOnError": true, 30 | "noImplicitAny": true, 31 | "noImplicitReturns": true, 32 | "removeComments": true, 33 | "resolveJsonModule": true, 34 | "rootDir": "src", 35 | "sourceMap": true, 36 | "strictNullChecks": true, 37 | "verbatimModuleSyntax": true 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /typings/assets.d.ts: -------------------------------------------------------------------------------- 1 | declare module "*.svg" 2 | declare module "*.ttf" { 3 | const content: any 4 | export default content 5 | } 6 | declare module "*.woff2" { 7 | const content: any 8 | export default content 9 | } 10 | declare module "*.jpg" { 11 | const content: any 12 | export default content 13 | } 14 | declare module "*.jpeg" { 15 | const content: any 16 | export default content 17 | } 18 | declare module "*.png" { 19 | const content: any 20 | export default content 21 | } 22 | declare module "*.gif" { 23 | const content: any 24 | export default content 25 | } 26 | declare module "*.avif" { 27 | const content: any 28 | export default content 29 | } 30 | declare module "*.av1" { 31 | const content: any 32 | export default content 33 | } 34 | declare module "*.webp" { 35 | const content: any 36 | export default content 37 | } 38 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const webpack = require("webpack") 2 | const path = require("path") 3 | const HtmlWebpackPlugin = require("html-webpack-plugin") 4 | 5 | module.exports = (env, argv) => ({ 6 | mode: argv.mode === "production" ? "production" : "development", 7 | 8 | entry: { 9 | controller: "./src/controller/index.ts", 10 | ui: "./src/ui/index.tsx", 11 | }, 12 | 13 | output: { 14 | filename: "[name].js", 15 | path: path.resolve(__dirname, "build"), 16 | pathinfo: false, 17 | clean: true, 18 | }, 19 | 20 | devtool: argv.mode === "production" ? false : "inline-source-map", 21 | 22 | module: { 23 | rules: [ 24 | { 25 | test: /\.tsx?$/, 26 | use: [ 27 | { 28 | loader: "ts-loader", 29 | options: { 30 | happyPackMode: true, 31 | }, 32 | }, 33 | ], 34 | exclude: /node_modules/, 35 | }, 36 | { 37 | test: /\.(css|scss)$/, 38 | use: ["style-loader", "css-loader", "sass-loader"], 39 | exclude: /node_modules/, 40 | }, 41 | { 42 | test: /\.svg$/i, 43 | issuer: /\.[jt]sx?$/, 44 | use: ["@svgr/webpack"], 45 | }, 46 | { 47 | test: /\.(ttf|woff2|jpe?g|png|gif|avif|av1|webp)$/, 48 | type: "asset/inline", 49 | exclude: /node_modules/, 50 | }, 51 | ], 52 | }, 53 | 54 | plugins: [ 55 | new webpack.NoEmitOnErrorsPlugin(), 56 | 57 | new HtmlWebpackPlugin({ 58 | inject: false, // Don't inject a