├── .DS_Store ├── .gitignore ├── .vscode ├── settings.json └── tasks.json ├── README.md ├── dist ├── code.js ├── ui.html └── ui.js ├── figma.d.ts ├── manifest.json ├── package.json ├── src ├── code.js ├── code.ts ├── color-guide.js ├── color-guide.ts ├── ui.html ├── ui.js └── ui.ts ├── themes ├── atom-one-dark-pro.json5 ├── ayu-light.json5 ├── dark-modern.json5 ├── dark.json5 ├── dracula.json5 ├── light-modern.json5 ├── light.json5 ├── material-light.json5 ├── material-ocean.json5 ├── material-palenight.json5 ├── material.json5 ├── monokai.json5 ├── nord.json5 ├── solarized-dark.json5 └── solarized-light.json5 ├── tsconfig.json ├── webpack.config.js └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kaleidocode-app/kaleidocode/b6a1ab4477af098f4d97a9587e4e40e65e262a00/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "prettier.semi": false, 3 | "prettier.singleQuote": true, 4 | "prettier.printWidth": 100, 5 | "files.associations": { 6 | "*.json5": "jsonc" 7 | } 8 | } -------------------------------------------------------------------------------- /.vscode/tasks.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the tasks.json format 4 | "version": "2.0.0", 5 | "tasks": [ 6 | { 7 | "type": "npm", 8 | "script": "watch", 9 | "group": { 10 | "kind": "build", 11 | "isDefault": true 12 | } 13 | } 14 | ] 15 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | A Figma plugin that allows you to convert VS Code themes to Figma color libraries, swap and relink themes, and create new VS Code themes from scratch 6 | 7 | 8 | 9 |
10 | 11 | # Features 12 | 13 | ## Generate Themes 14 | Create color guides and color styles based off of a selection of pre-loaded VS Code color themes (Default Dark, Default Light, Ayu Light, Dracula, and Nord). 15 | 16 | ![generate themes](https://user-images.githubusercontent.com/35271042/62099022-8e358000-b241-11e9-83b5-5cb4e304698b.gif) 17 | 18 | ## Swap Themes 19 | Easily swap components between color themes and relink color styles if they have become detached. 20 | 21 | ![swap themes](https://user-images.githubusercontent.com/35271042/62098993-74943880-b241-11e9-8414-325e43c83518.gif) 22 | 23 | ## Create Custom Themes 24 | Paste in a JSON file for your custom VS Code theme or other VS Code themes not currently in the plugin. 25 | 26 | ![create custom theme](https://user-images.githubusercontent.com/35271042/62099021-8e358000-b241-11e9-8798-a87f407b6e6f.gif) 27 | 28 | 29 | # How to use 30 | 31 | ## 1. Generate color styles 32 | 33 | First, you'll need to generate color guides and styles in your new file. In the "Generate" tab, select the themes you'd like to create or Select All themes. 34 | 35 | 36 | 37 | ## 2. Create a custom theme 38 | 39 | To create a custom theme, paste in the JSON for your theme into the text box. Note, this should match the formatting for all other VS Code color themes, where the colors are defined `"activityBar.background": "#fafafa"` 40 | 41 | 42 | 43 | ## 3. Swap themes 44 | 45 | To swap themes, simply select the frame with all the components you'd like to swap, select the theme you'd like to switch to in the `Swap` tab, and click `Swap Theme`. The themes must be present in the file to switch themes. 46 | 47 | You can also relink color styles by having the layers name the same name as their desired color and appending three dashes (`---`). For example, the side bar background layer would need to be named `---sideBar.background`. This is what enables Kaleidocode to go find the color style for the desired theme and relink it. 48 | 49 | 50 | 51 | 52 | # Building the source code 53 | This plugin template uses Typescript. If you are familiar with Javascript, Typescript will 54 | look very familiar. In fact, valid Javascript code is already valid Typescript code. 55 | 56 | Typescript adds type annotations to variables. This allows code editors such as Visual Studio Code 57 | to provide information about the Figma API while you are writing code, as well as help catch bugs 58 | you previously didn't notice. 59 | 60 | For more information, visit https://www.typescriptlang.org/ 61 | 62 | Using Typescript requires a compiler to convert Typescript (code.ts) into Javascript (code.js) 63 | for the browser to run. 64 | 65 | To get the TypeScript compiler working: 66 | 67 | 1. Download Visual Studio Code if you haven't already: https://code.visualstudio.com/. 68 | 2. Install the TypeScript compiler globally: `sudo npm install -g typescript`. 69 | 3. Open this directory in Visual Studio Code. 70 | 4. Compile TypeScript to JavaScript: Run the "Terminal > Run Build Task..." menu item, 71 | then select "tsc: watch - tsconfig.json". You will have to do this again every time 72 | you reopen Visual Studio Code. 73 | 74 | That's it! Visual Studio Code will regenerate the JavaScript file every time you save. 75 | -------------------------------------------------------------------------------- /dist/ui.js: -------------------------------------------------------------------------------- 1 | /******/ (function(modules) { // webpackBootstrap 2 | /******/ // The module cache 3 | /******/ var installedModules = {}; 4 | /******/ 5 | /******/ // The require function 6 | /******/ function __webpack_require__(moduleId) { 7 | /******/ 8 | /******/ // Check if module is in cache 9 | /******/ if(installedModules[moduleId]) { 10 | /******/ return installedModules[moduleId].exports; 11 | /******/ } 12 | /******/ // Create a new module (and put it into the cache) 13 | /******/ var module = installedModules[moduleId] = { 14 | /******/ i: moduleId, 15 | /******/ l: false, 16 | /******/ exports: {} 17 | /******/ }; 18 | /******/ 19 | /******/ // Execute the module function 20 | /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 21 | /******/ 22 | /******/ // Flag the module as loaded 23 | /******/ module.l = true; 24 | /******/ 25 | /******/ // Return the exports of the module 26 | /******/ return module.exports; 27 | /******/ } 28 | /******/ 29 | /******/ 30 | /******/ // expose the modules object (__webpack_modules__) 31 | /******/ __webpack_require__.m = modules; 32 | /******/ 33 | /******/ // expose the module cache 34 | /******/ __webpack_require__.c = installedModules; 35 | /******/ 36 | /******/ // define getter function for harmony exports 37 | /******/ __webpack_require__.d = function(exports, name, getter) { 38 | /******/ if(!__webpack_require__.o(exports, name)) { 39 | /******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); 40 | /******/ } 41 | /******/ }; 42 | /******/ 43 | /******/ // define __esModule on exports 44 | /******/ __webpack_require__.r = function(exports) { 45 | /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 46 | /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 47 | /******/ } 48 | /******/ Object.defineProperty(exports, '__esModule', { value: true }); 49 | /******/ }; 50 | /******/ 51 | /******/ // create a fake namespace object 52 | /******/ // mode & 1: value is a module id, require it 53 | /******/ // mode & 2: merge all properties of value into the ns 54 | /******/ // mode & 4: return value when already ns object 55 | /******/ // mode & 8|1: behave like require 56 | /******/ __webpack_require__.t = function(value, mode) { 57 | /******/ if(mode & 1) value = __webpack_require__(value); 58 | /******/ if(mode & 8) return value; 59 | /******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; 60 | /******/ var ns = Object.create(null); 61 | /******/ __webpack_require__.r(ns); 62 | /******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); 63 | /******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); 64 | /******/ return ns; 65 | /******/ }; 66 | /******/ 67 | /******/ // getDefaultExport function for compatibility with non-harmony modules 68 | /******/ __webpack_require__.n = function(module) { 69 | /******/ var getter = module && module.__esModule ? 70 | /******/ function getDefault() { return module['default']; } : 71 | /******/ function getModuleExports() { return module; }; 72 | /******/ __webpack_require__.d(getter, 'a', getter); 73 | /******/ return getter; 74 | /******/ }; 75 | /******/ 76 | /******/ // Object.prototype.hasOwnProperty.call 77 | /******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; 78 | /******/ 79 | /******/ // __webpack_public_path__ 80 | /******/ __webpack_require__.p = ""; 81 | /******/ 82 | /******/ 83 | /******/ // Load entry module and return exports 84 | /******/ return __webpack_require__(__webpack_require__.s = "./src/ui.ts"); 85 | /******/ }) 86 | /************************************************************************/ 87 | /******/ ({ 88 | 89 | /***/ "./src/ui.ts": 90 | /*!*******************!*\ 91 | !*** ./src/ui.ts ***! 92 | \*******************/ 93 | /*! no static exports found */ 94 | /***/ (function(module, exports) { 95 | 96 | document.getElementById('create-styles').onclick = () => { 97 | let icon = document.getElementById('create-styles').querySelector('.icon-loader'); 98 | let text = document.getElementById('create-styles').querySelector('.text'); 99 | icon.style.display = "block"; 100 | text.style.display = "none"; 101 | let themes = []; 102 | let themeItems = document.querySelectorAll('input[type=checkbox]:checked'); 103 | themeItems.forEach(t => { 104 | themes.push(t.id); 105 | }); 106 | setTimeout(function () { 107 | parent.postMessage({ pluginMessage: { type: 'create-styles', themes } }, '*'); 108 | }, 100); 109 | }; 110 | document.getElementById('swap-theme').onclick = () => { 111 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 112 | let text = document.getElementById('swap-theme').querySelector('.text'); 113 | icon.style.display = "block"; 114 | text.style.display = "none"; 115 | document.getElementById('swap-validation').classList.add('hidden'); 116 | const newThemeName = document.getElementById('themes').value; 117 | setTimeout(function () { 118 | parent.postMessage({ pluginMessage: { type: 'swap-theme', newThemeName } }, '*'); 119 | }, 100); 120 | }; 121 | document.getElementById('create-custom').onclick = () => { 122 | let icon = document.getElementById('create-custom').querySelector('.icon-loader'); 123 | let text = document.getElementById('create-custom').querySelector('.text'); 124 | icon.style.display = "block"; 125 | text.style.display = "none"; 126 | const newTheme = (document.getElementById('custom-theme')); 127 | const newThemeCode = newTheme.value; 128 | setTimeout(function () { 129 | parent.postMessage({ pluginMessage: { type: 'create-custom', newThemeCode } }, '*'); 130 | }, 100); 131 | }; 132 | document.getElementById('load-themes').onclick = () => { 133 | parent.postMessage({ pluginMessage: { type: 'load-themes' } }, '*'); 134 | }; 135 | document.getElementById('select-all').onclick = () => { 136 | toggleCheckboxes(); 137 | }; 138 | const tabButtonGenerate = document.getElementById('tab-button-generate'); 139 | const tabButtonTheme = document.getElementById('tab-button-theme'); 140 | const tabButtonCreate = document.getElementById('tab-button-create'); 141 | const tabContentGenerate = document.getElementById('contentGenerate'); 142 | const tabContentTheme = document.getElementById('contentTheme'); 143 | const tabContentCreate = document.getElementById('contentCreate'); 144 | function addActive(button, content) { 145 | button.classList.add('active'); 146 | content.classList.add('active'); 147 | } 148 | function removeActive() { 149 | var activeItems = document.querySelectorAll('.active'); 150 | [].forEach.call(activeItems, function (el) { 151 | el.classList.remove('active'); 152 | }); 153 | } 154 | tabButtonGenerate.onclick = function () { 155 | removeActive(); 156 | addActive(tabButtonGenerate, tabContentGenerate); 157 | }; 158 | tabButtonTheme.onclick = function () { 159 | removeActive(); 160 | addActive(tabButtonTheme, tabContentTheme); 161 | }; 162 | tabButtonCreate.onclick = function () { 163 | removeActive(); 164 | addActive(tabButtonCreate, tabContentCreate); 165 | }; 166 | tabButtonGenerate.click(); 167 | document.getElementById('load-themes').click(); 168 | let dropdown = document.getElementById('themes'); 169 | let validation = document.getElementById('swap-validation'); 170 | onmessage = (event) => { 171 | const pluginMessage = event.data.pluginMessage; 172 | // load themes 173 | if (pluginMessage.type == 'loadThemes') { 174 | let themeNames = pluginMessage.themeNames[0]; 175 | if (themeNames.length > 0) { 176 | // Remove placeholder item 177 | dropdown.options[0] = null; 178 | document.getElementById('swap-theme').classList.remove('disabled'); 179 | themeNames.forEach((t, index) => { 180 | // add options to select dropdown 181 | let option = document.createElement('option'); 182 | let name = t; 183 | name = name.replace(/-+/g, ' '); 184 | name = name.replace(/\b\w/g, (l) => l.toUpperCase()); 185 | option.text = name; 186 | option.value = t; 187 | dropdown.add(option, index); 188 | }); 189 | } 190 | } 191 | // when swap is complete 192 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.complete == true) { 193 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 194 | let text = document.getElementById('swap-theme').querySelector('.text'); 195 | icon.style.display = "none"; 196 | text.style.display = "block"; 197 | } 198 | // when swap is missing selection 199 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.selectionEmpty == true) { 200 | validation.classList.remove('hidden'); 201 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 202 | let text = document.getElementById('swap-theme').querySelector('.text'); 203 | icon.style.display = "none"; 204 | text.style.display = "block"; 205 | } 206 | }; 207 | function toggleCheckboxes() { 208 | let checkboxes = document.getElementsByName('checkbox'); 209 | let toggleButton = document.getElementById('select-all'); 210 | if (toggleButton.checked) { 211 | console.log('Check everything'); 212 | checkboxes.forEach(c => { 213 | let check = document.getElementById(c.id); 214 | check.checked = true; 215 | }); 216 | } 217 | else { 218 | console.log('Uncheck everything'); 219 | checkboxes.forEach(c => { 220 | let check = document.getElementById(c.id); 221 | check.checked = false; 222 | }); 223 | } 224 | } 225 | 226 | 227 | /***/ }) 228 | 229 | /******/ }); 230 | //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vc3JjL3VpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQTtBQUNBOztBQUVBO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FBRUE7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7QUFDQTs7O0FBR0E7QUFDQTs7QUFFQTtBQUNBOztBQUVBO0FBQ0E7QUFDQTtBQUNBLGtEQUEwQyxnQ0FBZ0M7QUFDMUU7QUFDQTs7QUFFQTtBQUNBO0FBQ0E7QUFDQSxnRUFBd0Qsa0JBQWtCO0FBQzFFO0FBQ0EseURBQWlELGNBQWM7QUFDL0Q7O0FBRUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGlEQUF5QyxpQ0FBaUM7QUFDMUUsd0hBQWdILG1CQUFtQixFQUFFO0FBQ3JJO0FBQ0E7O0FBRUE7QUFDQTtBQUNBO0FBQ0EsbUNBQTJCLDBCQUEwQixFQUFFO0FBQ3ZELHlDQUFpQyxlQUFlO0FBQ2hEO0FBQ0E7QUFDQTs7QUFFQTtBQUNBLDhEQUFzRCwrREFBK0Q7O0FBRXJIO0FBQ0E7OztBQUdBO0FBQ0E7Ozs7Ozs7Ozs7OztBQ2xGQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxLQUFLO0FBQ0w7QUFDQSw0QkFBNEIsaUJBQWlCLGdDQUFnQyxFQUFFO0FBQy9FLEtBQUs7QUFDTDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSw0QkFBNEIsaUJBQWlCLG1DQUFtQyxFQUFFO0FBQ2xGLEtBQUs7QUFDTDtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSw0QkFBNEIsaUJBQWlCLHNDQUFzQyxFQUFFO0FBQ3JGLEtBQUs7QUFDTDtBQUNBO0FBQ0Esd0JBQXdCLGlCQUFpQixzQkFBc0IsRUFBRTtBQUNqRTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQSxLQUFLO0FBQ0w7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGFBQWE7QUFDYjtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EsU0FBUztBQUNUO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLFNBQVM7QUFDVDtBQUNBIiwiZmlsZSI6InVpLmpzIiwic291cmNlc0NvbnRlbnQiOlsiIFx0Ly8gVGhlIG1vZHVsZSBjYWNoZVxuIFx0dmFyIGluc3RhbGxlZE1vZHVsZXMgPSB7fTtcblxuIFx0Ly8gVGhlIHJlcXVpcmUgZnVuY3Rpb25cbiBcdGZ1bmN0aW9uIF9fd2VicGFja19yZXF1aXJlX18obW9kdWxlSWQpIHtcblxuIFx0XHQvLyBDaGVjayBpZiBtb2R1bGUgaXMgaW4gY2FjaGVcbiBcdFx0aWYoaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0pIHtcbiBcdFx0XHRyZXR1cm4gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0uZXhwb3J0cztcbiBcdFx0fVxuIFx0XHQvLyBDcmVhdGUgYSBuZXcgbW9kdWxlIChhbmQgcHV0IGl0IGludG8gdGhlIGNhY2hlKVxuIFx0XHR2YXIgbW9kdWxlID0gaW5zdGFsbGVkTW9kdWxlc1ttb2R1bGVJZF0gPSB7XG4gXHRcdFx0aTogbW9kdWxlSWQsXG4gXHRcdFx0bDogZmFsc2UsXG4gXHRcdFx0ZXhwb3J0czoge31cbiBcdFx0fTtcblxuIFx0XHQvLyBFeGVjdXRlIHRoZSBtb2R1bGUgZnVuY3Rpb25cbiBcdFx0bW9kdWxlc1ttb2R1bGVJZF0uY2FsbChtb2R1bGUuZXhwb3J0cywgbW9kdWxlLCBtb2R1bGUuZXhwb3J0cywgX193ZWJwYWNrX3JlcXVpcmVfXyk7XG5cbiBcdFx0Ly8gRmxhZyB0aGUgbW9kdWxlIGFzIGxvYWRlZFxuIFx0XHRtb2R1bGUubCA9IHRydWU7XG5cbiBcdFx0Ly8gUmV0dXJuIHRoZSBleHBvcnRzIG9mIHRoZSBtb2R1bGVcbiBcdFx0cmV0dXJuIG1vZHVsZS5leHBvcnRzO1xuIFx0fVxuXG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlcyBvYmplY3QgKF9fd2VicGFja19tb2R1bGVzX18pXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm0gPSBtb2R1bGVzO1xuXG4gXHQvLyBleHBvc2UgdGhlIG1vZHVsZSBjYWNoZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5jID0gaW5zdGFsbGVkTW9kdWxlcztcblxuIFx0Ly8gZGVmaW5lIGdldHRlciBmdW5jdGlvbiBmb3IgaGFybW9ueSBleHBvcnRzXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmQgPSBmdW5jdGlvbihleHBvcnRzLCBuYW1lLCBnZXR0ZXIpIHtcbiBcdFx0aWYoIV9fd2VicGFja19yZXF1aXJlX18ubyhleHBvcnRzLCBuYW1lKSkge1xuIFx0XHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBuYW1lLCB7IGVudW1lcmFibGU6IHRydWUsIGdldDogZ2V0dGVyIH0pO1xuIFx0XHR9XG4gXHR9O1xuXG4gXHQvLyBkZWZpbmUgX19lc01vZHVsZSBvbiBleHBvcnRzXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnIgPSBmdW5jdGlvbihleHBvcnRzKSB7XG4gXHRcdGlmKHR5cGVvZiBTeW1ib2wgIT09ICd1bmRlZmluZWQnICYmIFN5bWJvbC50b1N0cmluZ1RhZykge1xuIFx0XHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCBTeW1ib2wudG9TdHJpbmdUYWcsIHsgdmFsdWU6ICdNb2R1bGUnIH0pO1xuIFx0XHR9XG4gXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShleHBvcnRzLCAnX19lc01vZHVsZScsIHsgdmFsdWU6IHRydWUgfSk7XG4gXHR9O1xuXG4gXHQvLyBjcmVhdGUgYSBmYWtlIG5hbWVzcGFjZSBvYmplY3RcbiBcdC8vIG1vZGUgJiAxOiB2YWx1ZSBpcyBhIG1vZHVsZSBpZCwgcmVxdWlyZSBpdFxuIFx0Ly8gbW9kZSAmIDI6IG1lcmdlIGFsbCBwcm9wZXJ0aWVzIG9mIHZhbHVlIGludG8gdGhlIG5zXG4gXHQvLyBtb2RlICYgNDogcmV0dXJuIHZhbHVlIHdoZW4gYWxyZWFkeSBucyBvYmplY3RcbiBcdC8vIG1vZGUgJiA4fDE6IGJlaGF2ZSBsaWtlIHJlcXVpcmVcbiBcdF9fd2VicGFja19yZXF1aXJlX18udCA9IGZ1bmN0aW9uKHZhbHVlLCBtb2RlKSB7XG4gXHRcdGlmKG1vZGUgJiAxKSB2YWx1ZSA9IF9fd2VicGFja19yZXF1aXJlX18odmFsdWUpO1xuIFx0XHRpZihtb2RlICYgOCkgcmV0dXJuIHZhbHVlO1xuIFx0XHRpZigobW9kZSAmIDQpICYmIHR5cGVvZiB2YWx1ZSA9PT0gJ29iamVjdCcgJiYgdmFsdWUgJiYgdmFsdWUuX19lc01vZHVsZSkgcmV0dXJuIHZhbHVlO1xuIFx0XHR2YXIgbnMgPSBPYmplY3QuY3JlYXRlKG51bGwpO1xuIFx0XHRfX3dlYnBhY2tfcmVxdWlyZV9fLnIobnMpO1xuIFx0XHRPYmplY3QuZGVmaW5lUHJvcGVydHkobnMsICdkZWZhdWx0JywgeyBlbnVtZXJhYmxlOiB0cnVlLCB2YWx1ZTogdmFsdWUgfSk7XG4gXHRcdGlmKG1vZGUgJiAyICYmIHR5cGVvZiB2YWx1ZSAhPSAnc3RyaW5nJykgZm9yKHZhciBrZXkgaW4gdmFsdWUpIF9fd2VicGFja19yZXF1aXJlX18uZChucywga2V5LCBmdW5jdGlvbihrZXkpIHsgcmV0dXJuIHZhbHVlW2tleV07IH0uYmluZChudWxsLCBrZXkpKTtcbiBcdFx0cmV0dXJuIG5zO1xuIFx0fTtcblxuIFx0Ly8gZ2V0RGVmYXVsdEV4cG9ydCBmdW5jdGlvbiBmb3IgY29tcGF0aWJpbGl0eSB3aXRoIG5vbi1oYXJtb255IG1vZHVsZXNcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubiA9IGZ1bmN0aW9uKG1vZHVsZSkge1xuIFx0XHR2YXIgZ2V0dGVyID0gbW9kdWxlICYmIG1vZHVsZS5fX2VzTW9kdWxlID9cbiBcdFx0XHRmdW5jdGlvbiBnZXREZWZhdWx0KCkgeyByZXR1cm4gbW9kdWxlWydkZWZhdWx0J107IH0gOlxuIFx0XHRcdGZ1bmN0aW9uIGdldE1vZHVsZUV4cG9ydHMoKSB7IHJldHVybiBtb2R1bGU7IH07XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18uZChnZXR0ZXIsICdhJywgZ2V0dGVyKTtcbiBcdFx0cmV0dXJuIGdldHRlcjtcbiBcdH07XG5cbiBcdC8vIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbFxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5vID0gZnVuY3Rpb24ob2JqZWN0LCBwcm9wZXJ0eSkgeyByZXR1cm4gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsKG9iamVjdCwgcHJvcGVydHkpOyB9O1xuXG4gXHQvLyBfX3dlYnBhY2tfcHVibGljX3BhdGhfX1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5wID0gXCJcIjtcblxuXG4gXHQvLyBMb2FkIGVudHJ5IG1vZHVsZSBhbmQgcmV0dXJuIGV4cG9ydHNcbiBcdHJldHVybiBfX3dlYnBhY2tfcmVxdWlyZV9fKF9fd2VicGFja19yZXF1aXJlX18ucyA9IFwiLi9zcmMvdWkudHNcIik7XG4iLCJkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY3JlYXRlLXN0eWxlcycpLm9uY2xpY2sgPSAoKSA9PiB7XG4gICAgbGV0IGljb24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY3JlYXRlLXN0eWxlcycpLnF1ZXJ5U2VsZWN0b3IoJy5pY29uLWxvYWRlcicpO1xuICAgIGxldCB0ZXh0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NyZWF0ZS1zdHlsZXMnKS5xdWVyeVNlbGVjdG9yKCcudGV4dCcpO1xuICAgIGljb24uc3R5bGUuZGlzcGxheSA9IFwiYmxvY2tcIjtcbiAgICB0ZXh0LnN0eWxlLmRpc3BsYXkgPSBcIm5vbmVcIjtcbiAgICBsZXQgdGhlbWVzID0gW107XG4gICAgbGV0IHRoZW1lSXRlbXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCdpbnB1dFt0eXBlPWNoZWNrYm94XTpjaGVja2VkJyk7XG4gICAgdGhlbWVJdGVtcy5mb3JFYWNoKHQgPT4ge1xuICAgICAgICB0aGVtZXMucHVzaCh0LmlkKTtcbiAgICB9KTtcbiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uICgpIHtcbiAgICAgICAgcGFyZW50LnBvc3RNZXNzYWdlKHsgcGx1Z2luTWVzc2FnZTogeyB0eXBlOiAnY3JlYXRlLXN0eWxlcycsIHRoZW1lcyB9IH0sICcqJyk7XG4gICAgfSwgMTAwKTtcbn07XG5kb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC10aGVtZScpLm9uY2xpY2sgPSAoKSA9PiB7XG4gICAgbGV0IGljb24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC10aGVtZScpLnF1ZXJ5U2VsZWN0b3IoJy5pY29uLWxvYWRlcicpO1xuICAgIGxldCB0ZXh0ID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N3YXAtdGhlbWUnKS5xdWVyeVNlbGVjdG9yKCcudGV4dCcpO1xuICAgIGljb24uc3R5bGUuZGlzcGxheSA9IFwiYmxvY2tcIjtcbiAgICB0ZXh0LnN0eWxlLmRpc3BsYXkgPSBcIm5vbmVcIjtcbiAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC12YWxpZGF0aW9uJykuY2xhc3NMaXN0LmFkZCgnaGlkZGVuJyk7XG4gICAgY29uc3QgbmV3VGhlbWVOYW1lID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RoZW1lcycpLnZhbHVlO1xuICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gKCkge1xuICAgICAgICBwYXJlbnQucG9zdE1lc3NhZ2UoeyBwbHVnaW5NZXNzYWdlOiB7IHR5cGU6ICdzd2FwLXRoZW1lJywgbmV3VGhlbWVOYW1lIH0gfSwgJyonKTtcbiAgICB9LCAxMDApO1xufTtcbmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjcmVhdGUtY3VzdG9tJykub25jbGljayA9ICgpID0+IHtcbiAgICBsZXQgaWNvbiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjcmVhdGUtY3VzdG9tJykucXVlcnlTZWxlY3RvcignLmljb24tbG9hZGVyJyk7XG4gICAgbGV0IHRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY3JlYXRlLWN1c3RvbScpLnF1ZXJ5U2VsZWN0b3IoJy50ZXh0Jyk7XG4gICAgaWNvbi5zdHlsZS5kaXNwbGF5ID0gXCJibG9ja1wiO1xuICAgIHRleHQuc3R5bGUuZGlzcGxheSA9IFwibm9uZVwiO1xuICAgIGNvbnN0IG5ld1RoZW1lID0gKGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjdXN0b20tdGhlbWUnKSk7XG4gICAgY29uc3QgbmV3VGhlbWVDb2RlID0gbmV3VGhlbWUudmFsdWU7XG4gICAgc2V0VGltZW91dChmdW5jdGlvbiAoKSB7XG4gICAgICAgIHBhcmVudC5wb3N0TWVzc2FnZSh7IHBsdWdpbk1lc3NhZ2U6IHsgdHlwZTogJ2NyZWF0ZS1jdXN0b20nLCBuZXdUaGVtZUNvZGUgfSB9LCAnKicpO1xuICAgIH0sIDEwMCk7XG59O1xuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2xvYWQtdGhlbWVzJykub25jbGljayA9ICgpID0+IHtcbiAgICBwYXJlbnQucG9zdE1lc3NhZ2UoeyBwbHVnaW5NZXNzYWdlOiB7IHR5cGU6ICdsb2FkLXRoZW1lcycgfSB9LCAnKicpO1xufTtcbmRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzZWxlY3QtYWxsJykub25jbGljayA9ICgpID0+IHtcbiAgICB0b2dnbGVDaGVja2JveGVzKCk7XG59O1xuY29uc3QgdGFiQnV0dG9uR2VuZXJhdGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGFiLWJ1dHRvbi1nZW5lcmF0ZScpO1xuY29uc3QgdGFiQnV0dG9uVGhlbWUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndGFiLWJ1dHRvbi10aGVtZScpO1xuY29uc3QgdGFiQnV0dG9uQ3JlYXRlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3RhYi1idXR0b24tY3JlYXRlJyk7XG5jb25zdCB0YWJDb250ZW50R2VuZXJhdGUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29udGVudEdlbmVyYXRlJyk7XG5jb25zdCB0YWJDb250ZW50VGhlbWUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnY29udGVudFRoZW1lJyk7XG5jb25zdCB0YWJDb250ZW50Q3JlYXRlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2NvbnRlbnRDcmVhdGUnKTtcbmZ1bmN0aW9uIGFkZEFjdGl2ZShidXR0b24sIGNvbnRlbnQpIHtcbiAgICBidXR0b24uY2xhc3NMaXN0LmFkZCgnYWN0aXZlJyk7XG4gICAgY29udGVudC5jbGFzc0xpc3QuYWRkKCdhY3RpdmUnKTtcbn1cbmZ1bmN0aW9uIHJlbW92ZUFjdGl2ZSgpIHtcbiAgICB2YXIgYWN0aXZlSXRlbXMgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yQWxsKCcuYWN0aXZlJyk7XG4gICAgW10uZm9yRWFjaC5jYWxsKGFjdGl2ZUl0ZW1zLCBmdW5jdGlvbiAoZWwpIHtcbiAgICAgICAgZWwuY2xhc3NMaXN0LnJlbW92ZSgnYWN0aXZlJyk7XG4gICAgfSk7XG59XG50YWJCdXR0b25HZW5lcmF0ZS5vbmNsaWNrID0gZnVuY3Rpb24gKCkge1xuICAgIHJlbW92ZUFjdGl2ZSgpO1xuICAgIGFkZEFjdGl2ZSh0YWJCdXR0b25HZW5lcmF0ZSwgdGFiQ29udGVudEdlbmVyYXRlKTtcbn07XG50YWJCdXR0b25UaGVtZS5vbmNsaWNrID0gZnVuY3Rpb24gKCkge1xuICAgIHJlbW92ZUFjdGl2ZSgpO1xuICAgIGFkZEFjdGl2ZSh0YWJCdXR0b25UaGVtZSwgdGFiQ29udGVudFRoZW1lKTtcbn07XG50YWJCdXR0b25DcmVhdGUub25jbGljayA9IGZ1bmN0aW9uICgpIHtcbiAgICByZW1vdmVBY3RpdmUoKTtcbiAgICBhZGRBY3RpdmUodGFiQnV0dG9uQ3JlYXRlLCB0YWJDb250ZW50Q3JlYXRlKTtcbn07XG50YWJCdXR0b25HZW5lcmF0ZS5jbGljaygpO1xuZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2xvYWQtdGhlbWVzJykuY2xpY2soKTtcbmxldCBkcm9wZG93biA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0aGVtZXMnKTtcbmxldCB2YWxpZGF0aW9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N3YXAtdmFsaWRhdGlvbicpO1xub25tZXNzYWdlID0gKGV2ZW50KSA9PiB7XG4gICAgY29uc3QgcGx1Z2luTWVzc2FnZSA9IGV2ZW50LmRhdGEucGx1Z2luTWVzc2FnZTtcbiAgICAvLyBsb2FkIHRoZW1lc1xuICAgIGlmIChwbHVnaW5NZXNzYWdlLnR5cGUgPT0gJ2xvYWRUaGVtZXMnKSB7XG4gICAgICAgIGxldCB0aGVtZU5hbWVzID0gcGx1Z2luTWVzc2FnZS50aGVtZU5hbWVzWzBdO1xuICAgICAgICBpZiAodGhlbWVOYW1lcy5sZW5ndGggPiAwKSB7XG4gICAgICAgICAgICAvLyBSZW1vdmUgcGxhY2Vob2xkZXIgaXRlbVxuICAgICAgICAgICAgZHJvcGRvd24ub3B0aW9uc1swXSA9IG51bGw7XG4gICAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC10aGVtZScpLmNsYXNzTGlzdC5yZW1vdmUoJ2Rpc2FibGVkJyk7XG4gICAgICAgICAgICB0aGVtZU5hbWVzLmZvckVhY2goKHQsIGluZGV4KSA9PiB7XG4gICAgICAgICAgICAgICAgLy8gYWRkIG9wdGlvbnMgdG8gc2VsZWN0IGRyb3Bkb3duXG4gICAgICAgICAgICAgICAgbGV0IG9wdGlvbiA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ29wdGlvbicpO1xuICAgICAgICAgICAgICAgIGxldCBuYW1lID0gdDtcbiAgICAgICAgICAgICAgICBuYW1lID0gbmFtZS5yZXBsYWNlKC8tKy9nLCAnICcpO1xuICAgICAgICAgICAgICAgIG5hbWUgPSBuYW1lLnJlcGxhY2UoL1xcYlxcdy9nLCAobCkgPT4gbC50b1VwcGVyQ2FzZSgpKTtcbiAgICAgICAgICAgICAgICBvcHRpb24udGV4dCA9IG5hbWU7XG4gICAgICAgICAgICAgICAgb3B0aW9uLnZhbHVlID0gdDtcbiAgICAgICAgICAgICAgICBkcm9wZG93bi5hZGQob3B0aW9uLCBpbmRleCk7XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgfVxuICAgIH1cbiAgICAvLyB3aGVuIHN3YXAgaXMgY29tcGxldGVcbiAgICBpZiAocGx1Z2luTWVzc2FnZS50eXBlID09PSAncmVsaW5rU3R5bGVzJyAmJiBwbHVnaW5NZXNzYWdlLmNvbXBsZXRlID09IHRydWUpIHtcbiAgICAgICAgbGV0IGljb24gPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC10aGVtZScpLnF1ZXJ5U2VsZWN0b3IoJy5pY29uLWxvYWRlcicpO1xuICAgICAgICBsZXQgdGV4dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzd2FwLXRoZW1lJykucXVlcnlTZWxlY3RvcignLnRleHQnKTtcbiAgICAgICAgaWNvbi5zdHlsZS5kaXNwbGF5ID0gXCJub25lXCI7XG4gICAgICAgIHRleHQuc3R5bGUuZGlzcGxheSA9IFwiYmxvY2tcIjtcbiAgICB9XG4gICAgLy8gd2hlbiBzd2FwIGlzIG1pc3Npbmcgc2VsZWN0aW9uXG4gICAgaWYgKHBsdWdpbk1lc3NhZ2UudHlwZSA9PT0gJ3JlbGlua1N0eWxlcycgJiYgcGx1Z2luTWVzc2FnZS5zZWxlY3Rpb25FbXB0eSA9PSB0cnVlKSB7XG4gICAgICAgIHZhbGlkYXRpb24uY2xhc3NMaXN0LnJlbW92ZSgnaGlkZGVuJyk7XG4gICAgICAgIGxldCBpY29uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3N3YXAtdGhlbWUnKS5xdWVyeVNlbGVjdG9yKCcuaWNvbi1sb2FkZXInKTtcbiAgICAgICAgbGV0IHRleHQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3dhcC10aGVtZScpLnF1ZXJ5U2VsZWN0b3IoJy50ZXh0Jyk7XG4gICAgICAgIGljb24uc3R5bGUuZGlzcGxheSA9IFwibm9uZVwiO1xuICAgICAgICB0ZXh0LnN0eWxlLmRpc3BsYXkgPSBcImJsb2NrXCI7XG4gICAgfVxufTtcbmZ1bmN0aW9uIHRvZ2dsZUNoZWNrYm94ZXMoKSB7XG4gICAgbGV0IGNoZWNrYm94ZXMgPSBkb2N1bWVudC5nZXRFbGVtZW50c0J5TmFtZSgnY2hlY2tib3gnKTtcbiAgICBsZXQgdG9nZ2xlQnV0dG9uID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3NlbGVjdC1hbGwnKTtcbiAgICBpZiAodG9nZ2xlQnV0dG9uLmNoZWNrZWQpIHtcbiAgICAgICAgY29uc29sZS5sb2coJ0NoZWNrIGV2ZXJ5dGhpbmcnKTtcbiAgICAgICAgY2hlY2tib3hlcy5mb3JFYWNoKGMgPT4ge1xuICAgICAgICAgICAgbGV0IGNoZWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoYy5pZCk7XG4gICAgICAgICAgICBjaGVjay5jaGVja2VkID0gdHJ1ZTtcbiAgICAgICAgfSk7XG4gICAgfVxuICAgIGVsc2Uge1xuICAgICAgICBjb25zb2xlLmxvZygnVW5jaGVjayBldmVyeXRoaW5nJyk7XG4gICAgICAgIGNoZWNrYm94ZXMuZm9yRWFjaChjID0+IHtcbiAgICAgICAgICAgIGxldCBjaGVjayA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKGMuaWQpO1xuICAgICAgICAgICAgY2hlY2suY2hlY2tlZCA9IGZhbHNlO1xuICAgICAgICB9KTtcbiAgICB9XG59XG4iXSwic291cmNlUm9vdCI6IiJ9 -------------------------------------------------------------------------------- /figma.d.ts: -------------------------------------------------------------------------------- 1 | // Global variable with Figma's plugin API. 2 | declare const figma: PluginAPI 3 | declare const __html__: string 4 | 5 | interface PluginAPI { 6 | readonly apiVersion: "1.0.0" 7 | readonly command: string 8 | readonly root: DocumentNode 9 | readonly viewport: ViewportAPI 10 | closePlugin(message?: string): void 11 | 12 | showUI(html: string, options?: ShowUIOptions): void 13 | readonly ui: UIAPI 14 | 15 | readonly clientStorage: ClientStorageAPI 16 | 17 | getNodeById(id: string): BaseNode | null 18 | getStyleById(id: string): BaseStyle | null 19 | 20 | currentPage: PageNode 21 | 22 | readonly mixed: symbol 23 | 24 | createRectangle(): RectangleNode 25 | createLine(): LineNode 26 | createEllipse(): EllipseNode 27 | createPolygon(): PolygonNode 28 | createStar(): StarNode 29 | createVector(): VectorNode 30 | createText(): TextNode 31 | createBooleanOperation(): BooleanOperationNode 32 | createFrame(): FrameNode 33 | createComponent(): ComponentNode 34 | createPage(): PageNode 35 | createSlice(): SliceNode 36 | 37 | createPaintStyle(): PaintStyle 38 | createTextStyle(): TextStyle 39 | createEffectStyle(): EffectStyle 40 | createGridStyle(): GridStyle 41 | 42 | importComponentByKeyAsync(key: string): Promise 43 | importStyleByKeyAsync(key: string): Promise 44 | 45 | listAvailableFontsAsync(): Promise 46 | loadFontAsync(fontName: FontName): Promise 47 | readonly hasMissingFont: boolean 48 | 49 | createNodeFromSvg(svg: string): FrameNode 50 | 51 | createImage(data: Uint8Array): Image 52 | getImageByHash(hash: string): Image 53 | 54 | group(nodes: ReadonlyArray, parent: BaseNode & ChildrenMixin, index?: number): FrameNode 55 | flatten(nodes: ReadonlyArray, parent?: BaseNode & ChildrenMixin, index?: number): VectorNode 56 | } 57 | 58 | interface ClientStorageAPI { 59 | getAsync(key: string): Promise 60 | setAsync(key: string, value: any): Promise 61 | } 62 | 63 | type ShowUIOptions = { 64 | visible?: boolean, 65 | width?: number, 66 | height?: number, 67 | } 68 | 69 | type UIPostMessageOptions = { 70 | targetOrigin?: string, 71 | } 72 | 73 | type OnMessageProperties = { 74 | sourceOrigin: string, 75 | } 76 | 77 | interface UIAPI { 78 | show(): void 79 | hide(): void 80 | resize(width: number, height: number): void 81 | close(): void 82 | 83 | postMessage(pluginMessage: any, options?: UIPostMessageOptions): void 84 | onmessage: ((pluginMessage: any, props: OnMessageProperties) => void) | undefined 85 | } 86 | 87 | interface ViewportAPI { 88 | center: { x: number, y: number } 89 | zoom: number 90 | scrollAndZoomIntoView(nodes: ReadonlyArray) 91 | } 92 | 93 | //////////////////////////////////////////////////////////////////////////////// 94 | // Datatypes 95 | 96 | type Transform = [ 97 | [number, number, number], 98 | [number, number, number] 99 | ] 100 | 101 | interface Vector { 102 | readonly x: number 103 | readonly y: number 104 | } 105 | 106 | interface RGB { 107 | readonly r: number 108 | readonly g: number 109 | readonly b: number 110 | } 111 | 112 | interface RGBA { 113 | readonly r: number 114 | readonly g: number 115 | readonly b: number 116 | readonly a: number 117 | } 118 | 119 | interface FontName { 120 | readonly family: string 121 | readonly style: string 122 | } 123 | 124 | type TextCase = "ORIGINAL" | "UPPER" | "LOWER" | "TITLE" 125 | 126 | type TextDecoration = "NONE" | "UNDERLINE" | "STRIKETHROUGH" 127 | 128 | interface ArcData { 129 | readonly startingAngle: number 130 | readonly endingAngle: number 131 | readonly innerRadius: number 132 | } 133 | 134 | interface ShadowEffect { 135 | readonly type: "DROP_SHADOW" | "INNER_SHADOW" 136 | readonly color: RGBA 137 | readonly offset: Vector 138 | readonly radius: number 139 | readonly visible: boolean 140 | readonly blendMode: BlendMode 141 | } 142 | 143 | interface BlurEffect { 144 | readonly type: "LAYER_BLUR" | "BACKGROUND_BLUR" 145 | readonly radius: number 146 | readonly visible: boolean 147 | } 148 | 149 | type Effect = ShadowEffect | BlurEffect 150 | 151 | type ConstraintType = "MIN" | "CENTER" | "MAX" | "STRETCH" | "SCALE" 152 | 153 | interface Constraints { 154 | readonly horizontal: ConstraintType 155 | readonly vertical: ConstraintType 156 | } 157 | 158 | interface ColorStop { 159 | readonly position: number 160 | readonly color: RGBA 161 | } 162 | 163 | interface ImageFilters { 164 | exposure?: number 165 | contrast?: number 166 | saturation?: number 167 | temperature?: number 168 | tint?: number 169 | highlights?: number 170 | shadows?: number 171 | } 172 | 173 | interface SolidPaint { 174 | readonly type: "SOLID" 175 | readonly color: RGB 176 | 177 | readonly visible?: boolean 178 | readonly opacity?: number 179 | readonly blendMode?: BlendMode 180 | } 181 | 182 | interface GradientPaint { 183 | readonly type: "GRADIENT_LINEAR" | "GRADIENT_RADIAL" | "GRADIENT_ANGULAR" | "GRADIENT_DIAMOND" 184 | readonly gradientTransform: Transform 185 | readonly gradientStops: ReadonlyArray 186 | 187 | readonly visible?: boolean 188 | readonly opacity?: number 189 | readonly blendMode?: BlendMode 190 | } 191 | 192 | interface ImagePaint { 193 | readonly type: "IMAGE" 194 | readonly scaleMode: "FILL" | "FIT" | "CROP" | "TILE" 195 | readonly imageHash: string | null 196 | readonly imageTransform?: Transform // setting for "CROP" 197 | readonly scalingFactor?: number // setting for "TILE" 198 | readonly filters?: ImageFilters 199 | 200 | readonly visible?: boolean 201 | readonly opacity?: number 202 | readonly blendMode?: BlendMode 203 | } 204 | 205 | type Paint = SolidPaint | GradientPaint | ImagePaint 206 | 207 | interface Guide { 208 | readonly axis: "X" | "Y" 209 | readonly offset: number 210 | } 211 | 212 | interface RowsColsLayoutGrid { 213 | readonly pattern: "ROWS" | "COLUMNS" 214 | readonly alignment: "MIN" | "MAX" | "STRETCH" | "CENTER" 215 | readonly gutterSize: number 216 | 217 | readonly count: number // Infinity when "Auto" is set in the UI 218 | readonly sectionSize?: number // Not set for alignment: "STRETCH" 219 | readonly offset?: number // Not set for alignment: "CENTER" 220 | 221 | readonly visible?: boolean 222 | readonly color?: RGBA 223 | } 224 | 225 | interface GridLayoutGrid { 226 | readonly pattern: "GRID" 227 | readonly sectionSize: number 228 | 229 | readonly visible?: boolean 230 | readonly color?: RGBA 231 | } 232 | 233 | type LayoutGrid = RowsColsLayoutGrid | GridLayoutGrid 234 | 235 | interface ExportSettingsConstraints { 236 | type: "SCALE" | "WIDTH" | "HEIGHT" 237 | value: number 238 | } 239 | 240 | interface ExportSettingsImage { 241 | format: "JPG" | "PNG" 242 | contentsOnly?: boolean // defaults to true 243 | suffix?: string 244 | constraint?: ExportSettingsConstraints 245 | } 246 | 247 | interface ExportSettingsSVG { 248 | format: "SVG" 249 | contentsOnly?: boolean // defaults to true 250 | suffix?: string 251 | svgOutlineText?: boolean // defaults to true 252 | svgIdAttribute?: boolean // defaults to false 253 | svgSimplifyStroke?: boolean // defaults to true 254 | } 255 | 256 | interface ExportSettingsPDF { 257 | format: "PDF" 258 | contentsOnly?: boolean // defaults to true 259 | suffix?: string 260 | } 261 | 262 | type ExportSettings = ExportSettingsImage | ExportSettingsSVG | ExportSettingsPDF 263 | 264 | type WindingRule = "NONZERO" | "EVENODD" 265 | 266 | interface VectorVertex { 267 | readonly x: number 268 | readonly y: number 269 | readonly strokeCap?: StrokeCap 270 | readonly strokeJoin?: StrokeJoin 271 | readonly cornerRadius?: number 272 | readonly handleMirroring?: HandleMirroring 273 | } 274 | 275 | interface VectorSegment { 276 | readonly start: number 277 | readonly end: number 278 | readonly tangentStart?: Vector // Defaults to { x: 0, y: 0 } 279 | readonly tangentEnd?: Vector // Defaults to { x: 0, y: 0 } 280 | } 281 | 282 | interface VectorRegion { 283 | readonly windingRule: WindingRule 284 | readonly loops: ReadonlyArray> 285 | } 286 | 287 | interface VectorNetwork { 288 | readonly vertices: ReadonlyArray 289 | readonly segments: ReadonlyArray 290 | readonly regions?: ReadonlyArray // Defaults to [] 291 | } 292 | 293 | interface VectorPath { 294 | readonly windingRule: WindingRule | "NONE" 295 | readonly data: string 296 | } 297 | 298 | type VectorPaths = ReadonlyArray 299 | 300 | type LetterSpacing = { 301 | readonly value: number 302 | readonly unit: "PIXELS" | "PERCENT" 303 | } 304 | 305 | type LineHeight = { 306 | readonly value: number 307 | readonly unit: "PIXELS" | "PERCENT" 308 | } | { 309 | readonly unit: "AUTO" 310 | } 311 | 312 | type BlendMode = 313 | "PASS_THROUGH" | 314 | "NORMAL" | 315 | "DARKEN" | 316 | "MULTIPLY" | 317 | "LINEAR_BURN" | 318 | "COLOR_BURN" | 319 | "LIGHTEN" | 320 | "SCREEN" | 321 | "LINEAR_DODGE" | 322 | "COLOR_DODGE" | 323 | "OVERLAY" | 324 | "SOFT_LIGHT" | 325 | "HARD_LIGHT" | 326 | "DIFFERENCE" | 327 | "EXCLUSION" | 328 | "HUE" | 329 | "SATURATION" | 330 | "COLOR" | 331 | "LUMINOSITY" 332 | 333 | interface Font { 334 | fontName: FontName 335 | } 336 | 337 | //////////////////////////////////////////////////////////////////////////////// 338 | // Mixins 339 | 340 | interface BaseNodeMixin { 341 | readonly id: string 342 | readonly parent: (BaseNode & ChildrenMixin) | null 343 | name: string // Note: setting this also sets \`autoRename\` to false on TextNodes 344 | readonly removed: boolean 345 | toString(): string 346 | remove(): void 347 | 348 | getPluginData(key: string): string 349 | setPluginData(key: string, value: string): void 350 | 351 | // Namespace is a string that must be at least 3 alphanumeric characters, and should 352 | // be a name related to your plugin. Other plugins will be able to read this data. 353 | getSharedPluginData(namespace: string, key: string): string 354 | setSharedPluginData(namespace: string, key: string, value: string): void 355 | } 356 | 357 | interface SceneNodeMixin { 358 | visible: boolean 359 | locked: boolean 360 | } 361 | 362 | interface ChildrenMixin { 363 | readonly children: ReadonlyArray 364 | 365 | appendChild(child: BaseNode): void 366 | insertChild(index: number, child: BaseNode): void 367 | 368 | findAll(callback?: (node: BaseNode) => boolean): ReadonlyArray 369 | findOne(callback: (node: BaseNode) => boolean): BaseNode | null 370 | } 371 | 372 | interface ConstraintMixin { 373 | constraints: Constraints 374 | } 375 | 376 | interface LayoutMixin { 377 | readonly absoluteTransform: Transform 378 | relativeTransform: Transform 379 | x: number 380 | y: number 381 | rotation: number // In degrees 382 | 383 | readonly width: number 384 | readonly height: number 385 | 386 | resize(width: number, height: number): void 387 | resizeWithoutConstraints(width: number, height: number): void 388 | } 389 | 390 | interface BlendMixin { 391 | opacity: number 392 | blendMode: BlendMode 393 | isMask: boolean 394 | effects: ReadonlyArray 395 | effectStyleId: string 396 | } 397 | 398 | interface FrameMixin { 399 | backgrounds: ReadonlyArray 400 | layoutGrids: ReadonlyArray 401 | clipsContent: boolean 402 | guides: ReadonlyArray 403 | gridStyleId: string 404 | backgroundStyleId: string 405 | } 406 | 407 | type StrokeCap = "NONE" | "ROUND" | "SQUARE" | "ARROW_LINES" | "ARROW_EQUILATERAL" 408 | type StrokeJoin = "MITER" | "BEVEL" | "ROUND" 409 | type HandleMirroring = "NONE" | "ANGLE" | "ANGLE_AND_LENGTH" 410 | 411 | interface GeometryMixin { 412 | fills: ReadonlyArray | symbol 413 | strokes: ReadonlyArray 414 | strokeWeight: number 415 | strokeAlign: "CENTER" | "INSIDE" | "OUTSIDE" 416 | strokeCap: StrokeCap | symbol 417 | strokeJoin: StrokeJoin | symbol 418 | dashPattern: ReadonlyArray 419 | fillStyleId: string | symbol 420 | strokeStyleId: string 421 | } 422 | 423 | interface CornerMixin { 424 | cornerRadius: number | symbol 425 | cornerSmoothing: number 426 | } 427 | 428 | interface ExportMixin { 429 | exportSettings: ExportSettings[] 430 | exportAsync(settings?: ExportSettings): Promise // Defaults to PNG format 431 | } 432 | 433 | interface DefaultShapeMixin extends 434 | BaseNodeMixin, SceneNodeMixin, 435 | BlendMixin, GeometryMixin, LayoutMixin, ExportMixin { 436 | } 437 | 438 | interface DefaultContainerMixin extends 439 | BaseNodeMixin, SceneNodeMixin, 440 | ChildrenMixin, FrameMixin, 441 | BlendMixin, ConstraintMixin, LayoutMixin, ExportMixin { 442 | } 443 | 444 | //////////////////////////////////////////////////////////////////////////////// 445 | // Nodes 446 | 447 | interface DocumentNode extends BaseNodeMixin, ChildrenMixin { 448 | readonly type: "DOCUMENT" 449 | } 450 | 451 | interface PageNode extends BaseNodeMixin, ChildrenMixin, ExportMixin { 452 | readonly type: "PAGE" 453 | clone(): PageNode 454 | 455 | guides: ReadonlyArray 456 | selection: ReadonlyArray 457 | } 458 | 459 | interface FrameNode extends DefaultContainerMixin { 460 | readonly type: "FRAME" | "GROUP" 461 | clone(): FrameNode 462 | } 463 | 464 | interface SliceNode extends BaseNodeMixin, SceneNodeMixin, LayoutMixin, ExportMixin { 465 | readonly type: "SLICE" 466 | clone(): SliceNode 467 | } 468 | 469 | interface RectangleNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 470 | readonly type: "RECTANGLE" 471 | clone(): RectangleNode 472 | topLeftRadius: number 473 | topRightRadius: number 474 | bottomLeftRadius: number 475 | bottomRightRadius: number 476 | } 477 | 478 | interface LineNode extends DefaultShapeMixin, ConstraintMixin { 479 | readonly type: "LINE" 480 | clone(): LineNode 481 | } 482 | 483 | interface EllipseNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 484 | readonly type: "ELLIPSE" 485 | clone(): EllipseNode 486 | arcData: ArcData 487 | } 488 | 489 | interface PolygonNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 490 | readonly type: "POLYGON" 491 | clone(): PolygonNode 492 | pointCount: number 493 | } 494 | 495 | interface StarNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 496 | readonly type: "STAR" 497 | clone(): StarNode 498 | pointCount: number 499 | innerRadius: number 500 | } 501 | 502 | interface VectorNode extends DefaultShapeMixin, ConstraintMixin, CornerMixin { 503 | readonly type: "VECTOR" 504 | clone(): VectorNode 505 | vectorNetwork: VectorNetwork 506 | vectorPaths: VectorPaths 507 | handleMirroring: HandleMirroring | symbol 508 | } 509 | 510 | interface TextNode extends DefaultShapeMixin, ConstraintMixin { 511 | readonly type: "TEXT" 512 | clone(): TextNode 513 | characters: string 514 | readonly hasMissingFont: boolean 515 | textAlignHorizontal: "LEFT" | "CENTER" | "RIGHT" | "JUSTIFIED" 516 | textAlignVertical: "TOP" | "CENTER" | "BOTTOM" 517 | textAutoResize: "NONE" | "WIDTH_AND_HEIGHT" | "HEIGHT" 518 | paragraphIndent: number 519 | paragraphSpacing: number 520 | autoRename: boolean 521 | 522 | textStyleId: string | symbol 523 | fontSize: number | symbol 524 | fontName: FontName | symbol 525 | textCase: TextCase | symbol 526 | textDecoration: TextDecoration | symbol 527 | letterSpacing: LetterSpacing | symbol 528 | lineHeight: LineHeight | symbol 529 | 530 | getRangeFontSize(start: number, end: number): number | symbol 531 | setRangeFontSize(start: number, end: number, value: number): void 532 | getRangeFontName(start: number, end: number): FontName | symbol 533 | setRangeFontName(start: number, end: number, value: FontName): void 534 | getRangeTextCase(start: number, end: number): TextCase | symbol 535 | setRangeTextCase(start: number, end: number, value: TextCase): void 536 | getRangeTextDecoration(start: number, end: number): TextDecoration | symbol 537 | setRangeTextDecoration(start: number, end: number, value: TextDecoration): void 538 | getRangeLetterSpacing(start: number, end: number): LetterSpacing | symbol 539 | setRangeLetterSpacing(start: number, end: number, value: LetterSpacing): void 540 | getRangeLineHeight(start: number, end: number): LineHeight | symbol 541 | setRangeLineHeight(start: number, end: number, value: LineHeight): void 542 | getRangeFills(start: number, end: number): Paint[] | symbol 543 | setRangeFills(start: number, end: number, value: Paint[]): void 544 | getRangeTextStyleId(start: number, end: number): string | symbol 545 | setRangeTextStyleId(start: number, end: number, value: string): void 546 | getRangeFillStyleId(start: number, end: number): string | symbol 547 | setRangeFillStyleId(start: number, end: number, value: string): void 548 | } 549 | 550 | interface ComponentNode extends DefaultContainerMixin { 551 | readonly type: "COMPONENT" 552 | clone(): ComponentNode 553 | 554 | createInstance(): InstanceNode 555 | description: string 556 | readonly remote: boolean 557 | readonly key: string // The key to use with "importComponentByKeyAsync" 558 | } 559 | 560 | interface InstanceNode extends DefaultContainerMixin { 561 | readonly type: "INSTANCE" 562 | clone(): InstanceNode 563 | masterComponent: ComponentNode 564 | } 565 | 566 | interface BooleanOperationNode extends DefaultShapeMixin, ChildrenMixin, CornerMixin { 567 | readonly type: "BOOLEAN_OPERATION" 568 | clone(): BooleanOperationNode 569 | booleanOperation: "UNION" | "INTERSECT" | "SUBTRACT" | "EXCLUDE" 570 | } 571 | 572 | type BaseNode = 573 | DocumentNode | 574 | PageNode | 575 | SceneNode 576 | 577 | type SceneNode = 578 | SliceNode | 579 | FrameNode | 580 | ComponentNode | 581 | InstanceNode | 582 | BooleanOperationNode | 583 | VectorNode | 584 | StarNode | 585 | LineNode | 586 | EllipseNode | 587 | PolygonNode | 588 | RectangleNode | 589 | TextNode 590 | 591 | type NodeType = 592 | "DOCUMENT" | 593 | "PAGE" | 594 | "SLICE" | 595 | "FRAME" | 596 | "GROUP" | 597 | "COMPONENT" | 598 | "INSTANCE" | 599 | "BOOLEAN_OPERATION" | 600 | "VECTOR" | 601 | "STAR" | 602 | "LINE" | 603 | "ELLIPSE" | 604 | "POLYGON" | 605 | "RECTANGLE" | 606 | "TEXT" 607 | 608 | //////////////////////////////////////////////////////////////////////////////// 609 | // Styles 610 | type StyleType = "PAINT" | "TEXT" | "EFFECT" | "GRID" 611 | 612 | interface BaseStyle { 613 | readonly id: string 614 | readonly type: StyleType 615 | name: string 616 | description: string 617 | remote: boolean 618 | readonly key: string // The key to use with "importStyleByKeyAsync" 619 | remove(): void 620 | } 621 | 622 | interface PaintStyle extends BaseStyle { 623 | type: "PAINT" 624 | paints: ReadonlyArray 625 | } 626 | 627 | interface TextStyle extends BaseStyle { 628 | type: "TEXT" 629 | fontSize: number 630 | textDecoration: TextDecoration 631 | fontName: FontName 632 | letterSpacing: LetterSpacing 633 | lineHeight: LineHeight 634 | paragraphIndent: number 635 | paragraphSpacing: number 636 | textCase: TextCase 637 | } 638 | 639 | interface EffectStyle extends BaseStyle { 640 | type: "EFFECT" 641 | effects: ReadonlyArray 642 | } 643 | 644 | interface GridStyle extends BaseStyle { 645 | type: "GRID" 646 | layoutGrids: ReadonlyArray 647 | } 648 | 649 | //////////////////////////////////////////////////////////////////////////////// 650 | // Other 651 | 652 | interface Image { 653 | readonly hash: string 654 | getBytesAsync(): Promise 655 | } 656 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Kaleidocode", 3 | "id": "736060893363678891", 4 | "api": "1.0.0", 5 | "main": "dist/code.js", 6 | "ui": "dist/ui.html" 7 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "watch": "webpack --mode=development --watch" 4 | }, 5 | "devDependencies": { 6 | "@types/node": "^12.6.8", 7 | "css-loader": "^3.1.0", 8 | "html-webpack-inline-source-plugin": "^0.0.10", 9 | "html-webpack-plugin": "^3.2.0", 10 | "json-loader": "^0.5.7", 11 | "json5-loader": "^3.0.0", 12 | "raw-loader": "^3.1.0", 13 | "style-loader": "^0.23.1", 14 | "ts-loader": "^6.0.4", 15 | "typescript": "^3.5.3", 16 | "url-loader": "^2.1.0", 17 | "webpack": "^4.37.0", 18 | "webpack-cli": "^3.3.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/code.js: -------------------------------------------------------------------------------- 1 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { 2 | return new (P || (P = Promise))(function (resolve, reject) { 3 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 4 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 5 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); } 6 | step((generator = generator.apply(thisArg, _arguments || [])).next()); 7 | }); 8 | }; 9 | import { createColorGuide } from "./color-guide"; 10 | figma.showUI(__html__, { width: 260, height: 200 }); 11 | const themeIndicator = '--'; 12 | const styleIndicator = '---'; 13 | const themes = []; 14 | const themeDark = require('../themes/dark.json5'); 15 | const themeLight = require('../themes/light.json5'); 16 | const themeAyuLight = require('../themes/ayu-light.json5'); 17 | const themeNord = require('../themes/nord.json5'); 18 | let styleThemes = []; 19 | figma.ui.onmessage = (msg) => __awaiter(this, void 0, void 0, function* () { 20 | const fonts = [ 21 | { family: 'Roboto', style: 'Regular' }, 22 | { family: 'Roboto', style: 'Medium' }, 23 | { family: 'Roboto Mono', style: 'Regular' }, 24 | { family: 'Roboto Mono', style: 'Bold' } 25 | ]; 26 | for (let f of fonts) { 27 | yield figma.loadFontAsync(f); 28 | } 29 | if (msg.type === 'create-styles') { 30 | if (msg.themes[0] === "all") { 31 | themes.push(themeDark, themeLight, themeAyuLight, themeNord); 32 | } 33 | else { 34 | delete themes[0]; // remove all item 35 | let cThemes = msg.themes; 36 | cThemes.forEach((c) => { 37 | if (c === "dark-plus") { 38 | themes.push(themeDark); 39 | } 40 | if (c === "light-plus") { 41 | themes.push(themeLight); 42 | } 43 | if (c === "ayu-light") { 44 | themes.push(themeAyuLight); 45 | } 46 | if (c === "nord") { 47 | themes.push(themeNord); 48 | } 49 | }); 50 | } 51 | themes.reverse(); 52 | themes.reverse().forEach((theme, themeI) => { 53 | const themeColors = theme.colors; 54 | // console.log(themeColors) 55 | console.log(theme); 56 | const colorThemeName = theme.name.toLowerCase(); 57 | // sort object 58 | let sortedObject = Object.keys(themeColors).sort(); 59 | // map sorted array to object 60 | let sortedColors = sortedObject.map(k => { 61 | return [k, themeColors[k]]; 62 | }); 63 | createColorGuide(colorThemeName, sortedColors, themeI); 64 | }); 65 | figma.closePlugin(); 66 | return; 67 | } 68 | if (msg.type === 'load-themes') { 69 | figma.currentPage.children.forEach(c => { 70 | if (c.name.startsWith(themeIndicator) && c.name.charAt(2) != "-") { 71 | let themeName = c.name.substr(2); 72 | styleThemes.push(themeName); 73 | } 74 | }); 75 | // send event to HTML page 76 | figma.ui.postMessage({ type: 'loadThemes', themeNames: [styleThemes] }); 77 | } 78 | if (msg.type === 'swap-theme') { 79 | // stop if there is no slection 80 | if (figma.currentPage.selection.length <= 0) { 81 | figma.ui.postMessage({ type: 'relinkStyles', selectionEmpty: true }); 82 | return; 83 | } 84 | // add current selection to relink que 85 | const objectsToRelink = []; 86 | function addToRelinkQueue(node) { 87 | if (node.children) { 88 | node.children.forEach(c => { 89 | addToRelinkQueue(c); 90 | if (c.name.startsWith(styleIndicator)) { 91 | objectsToRelink.push(c); 92 | } 93 | }); 94 | } 95 | } 96 | addToRelinkQueue(figma.currentPage.selection[0]); 97 | // save current theme info 98 | const theme = msg.newThemeName; 99 | let themeId = ''; 100 | let themeRef = []; 101 | for (let parent of figma.currentPage.children) { 102 | let parentName = parent.name.slice(2); 103 | if (parentName === theme) { 104 | themeId = parent.id; 105 | } 106 | } 107 | // if nodes have a style name in the layer, add to theme reference 108 | let parent = figma.getNodeById(themeId); 109 | let children = parent.children[0].findAll(); 110 | children.forEach(c => { 111 | if ((c.name.startsWith(styleIndicator) && c.type === "FRAME")) { 112 | c.findAll().forEach(c => { 113 | if (c.name.startsWith(theme)) { 114 | let cName = c.name; 115 | let cStyle = c.fillStyleId; 116 | themeRef[cName] = cStyle; 117 | } 118 | }); 119 | } 120 | }); 121 | // iterate through each item to be linked and match them with theme reference items 122 | objectsToRelink.forEach(node => { 123 | const unlinkedColorName = theme + ' / ' + node.name.slice(3); 124 | // if objects to be relinked exist in theme reference 125 | if (unlinkedColorName in themeRef) { 126 | if (node.type === "RECTANGLE") { 127 | let nodeToSwap = node; 128 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 129 | } 130 | else if (node.type === "FRAME") { 131 | let nodeToSwap = node; 132 | let childItems = nodeToSwap.children; 133 | childItems.forEach(c => { 134 | if (c.type === "VECTOR") { 135 | let nodeToSwap = c; 136 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 137 | } 138 | else if (c.type === "BOOLEAN_OPERATION") { 139 | let nodeToSwap = c; 140 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 141 | } 142 | else if (c.type === "GROUP") { 143 | let nodeToSwap = c; 144 | nodeToSwap.children.forEach(c => { 145 | if (c.type === "VECTOR") { 146 | let nodeToSwap = c; 147 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 148 | } 149 | else if (c.type === "BOOLEAN_OPERATION") { 150 | let nodeToSwap = c; 151 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 152 | } 153 | else if (c.type === "RECTANGLE") { 154 | let nodeToSwap = c; 155 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 156 | } 157 | }); 158 | } 159 | }); 160 | } 161 | else if (node.type === "VECTOR") { 162 | let nodeToSwap = node; 163 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 164 | } 165 | else if (node.type === "BOOLEAN_OPERATION") { 166 | let nodeToSwap = node; 167 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 168 | } 169 | else if (node.type === "TEXT") { 170 | let nodeToSwap = node; 171 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 172 | } 173 | else if (node.type === "ELLIPSE") { 174 | let nodeToSwap = node; 175 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName]; 176 | } 177 | else { 178 | console.log(node.type); 179 | } 180 | } 181 | }); 182 | figma.ui.postMessage({ type: 'relinkStyles', complete: true }); 183 | return; 184 | } 185 | if (msg.type === 'create-custom') { 186 | const newTheme = JSON.parse(msg.newThemeCode); 187 | themes.push(newTheme); 188 | themes.reverse().forEach((theme, themeI) => { 189 | const themeColors = theme.colors; 190 | const colorTheme = theme.name.replace(/\s+/g, '-').toLowerCase(); 191 | // sort object 192 | let sortedObject = Object.keys(themeColors).sort(); 193 | // map sorted array to object 194 | let sortedColors = sortedObject.map(k => { 195 | return [k, themeColors[k]]; 196 | }); 197 | createColorGuide(colorTheme, sortedColors, themeI); 198 | }); 199 | figma.closePlugin(); 200 | return; 201 | } 202 | }); 203 | -------------------------------------------------------------------------------- /src/code.ts: -------------------------------------------------------------------------------- 1 | import { createColorGuide } from "./color-guide"; 2 | 3 | figma.showUI(__html__, { width: 260, height: 200 }) 4 | 5 | const themeIndicator = '--' 6 | const styleIndicator = '---' 7 | 8 | const themes = [] 9 | 10 | const themeDark = require('../themes/dark.json5') 11 | const themeLight = require('../themes/light.json5') 12 | const themeAyuLight = require('../themes/ayu-light.json5') 13 | const themeNord = require('../themes/nord.json5') 14 | 15 | let styleThemes = [] 16 | 17 | figma.ui.onmessage = async msg => { 18 | const fonts = [ 19 | { family: 'Roboto', style: 'Regular' }, 20 | { family: 'Roboto', style: 'Medium' }, 21 | { family: 'Roboto Mono', style: 'Regular' }, 22 | { family: 'Roboto Mono', style: 'Bold' } 23 | ] 24 | 25 | for (let f of fonts) { 26 | await figma.loadFontAsync(f) 27 | } 28 | 29 | if (msg.type === 'create-styles') { 30 | 31 | if (msg.themes[0] === "all") { 32 | themes.push(themeDark, themeLight, themeAyuLight, themeNord) 33 | } else { 34 | delete themes[0] // remove all item 35 | let cThemes = msg.themes 36 | cThemes.forEach((c: any) => { 37 | if (c === "dark-plus") { 38 | themes.push(themeDark) 39 | } 40 | if (c === "light-plus") { 41 | themes.push(themeLight) 42 | } 43 | if (c === "ayu-light") { 44 | themes.push(themeAyuLight) 45 | } 46 | if (c === "nord") { 47 | themes.push(themeNord) 48 | } 49 | }) 50 | } 51 | 52 | 53 | themes.reverse() 54 | 55 | themes.reverse().forEach((theme, themeI) => { 56 | const themeColors = theme.colors 57 | // console.log(themeColors) 58 | console.log(theme) 59 | const colorThemeName = theme.name.toLowerCase() 60 | 61 | // sort object 62 | let sortedObject = Object.keys(themeColors).sort() 63 | 64 | // map sorted array to object 65 | let sortedColors = sortedObject.map(k => { 66 | return [k, themeColors[k]] 67 | }) 68 | 69 | createColorGuide(colorThemeName, sortedColors, themeI) 70 | }) 71 | 72 | let nodes = figma.currentPage.findAll(node => node.name.startsWith(themeIndicator)) 73 | figma.viewport.scrollAndZoomIntoView(nodes); 74 | figma.closePlugin() 75 | return 76 | } 77 | 78 | if (msg.type === 'load-themes') { 79 | figma.currentPage.children.forEach(c => { 80 | if (c.name.startsWith(themeIndicator) && c.name.charAt(2) != "-") { 81 | let themeName = c.name.substr(2) 82 | styleThemes.push(themeName) 83 | } 84 | }) 85 | 86 | // send event to HTML page 87 | figma.ui.postMessage({ type: 'loadThemes', themeNames: [styleThemes] }); 88 | } 89 | 90 | if (msg.type === 'swap-theme') { 91 | 92 | // stop if there is no slection 93 | if (figma.currentPage.selection.length <= 0) { 94 | figma.ui.postMessage({ type: 'relinkStyles', selectionEmpty: true }); 95 | return 96 | } 97 | 98 | // add current selection to relink que 99 | const objectsToRelink = [] 100 | function addToRelinkQueue(node: FrameNode) { 101 | if (node.children) { 102 | node.children.forEach(c => { 103 | addToRelinkQueue(c as any) 104 | if (c.name.startsWith(styleIndicator)) { 105 | objectsToRelink.push(c) 106 | } 107 | }) 108 | } 109 | } 110 | addToRelinkQueue(figma.currentPage.selection[0] as FrameNode) 111 | 112 | // save current theme info 113 | const theme = msg.newThemeName 114 | let themeId = '' 115 | let themeRef = [] 116 | 117 | for (let parent of figma.currentPage.children) { 118 | let parentName = parent.name.slice(2) 119 | 120 | if (parentName === theme) { 121 | themeId = parent.id 122 | } 123 | 124 | } 125 | 126 | // if nodes have a style name in the layer, add to theme reference 127 | let parent = (figma.getNodeById(themeId) as FrameNode) 128 | let children = (parent.children[0] as FrameNode).findAll() 129 | children.forEach(c => { 130 | if ((c.name.startsWith(styleIndicator) && c.type === "FRAME")) { 131 | (c as FrameNode).findAll().forEach(c => { 132 | if (c.name.startsWith(theme)) { 133 | let cName = c.name 134 | let cStyle = (c as RectangleNode).fillStyleId 135 | themeRef[cName] = cStyle; 136 | } 137 | }) 138 | } 139 | }) 140 | 141 | // iterate through each item to be linked and match them with theme reference items 142 | objectsToRelink.forEach(node => { 143 | const unlinkedColorName = theme + ' / ' + node.name.slice(3) 144 | 145 | // if objects to be relinked exist in theme reference 146 | if (unlinkedColorName in themeRef) { 147 | 148 | if (node.type === "RECTANGLE") { 149 | let nodeToSwap = (node as RectangleNode) 150 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 151 | } else if (node.type === "FRAME") { 152 | let nodeToSwap = (node as FrameNode) 153 | let childItems = nodeToSwap.children 154 | childItems.forEach(c => { 155 | if (c.type === "VECTOR") { 156 | let nodeToSwap = (c as VectorNode) 157 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 158 | } else if (c.type === "BOOLEAN_OPERATION") { 159 | let nodeToSwap = (c as BooleanOperationNode) 160 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 161 | } else if (c.type === "GROUP") { 162 | let nodeToSwap = (c as FrameNode) 163 | nodeToSwap.children.forEach(c => { 164 | if (c.type === "VECTOR") { 165 | let nodeToSwap = (c as VectorNode) 166 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 167 | } else if (c.type === "BOOLEAN_OPERATION") { 168 | let nodeToSwap = (c as BooleanOperationNode) 169 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 170 | } else if (c.type === "RECTANGLE") { 171 | let nodeToSwap = (c as RectangleNode) 172 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 173 | } 174 | }) 175 | 176 | } 177 | }) 178 | } else if (node.type === "VECTOR") { 179 | let nodeToSwap = (node as VectorNode) 180 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 181 | } else if (node.type === "BOOLEAN_OPERATION") { 182 | let nodeToSwap = (node as BooleanOperationNode) 183 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 184 | } else if (node.type === "TEXT") { 185 | let nodeToSwap = (node as TextNode) 186 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 187 | } else if (node.type === "ELLIPSE") { 188 | let nodeToSwap = (node as EllipseNode) 189 | nodeToSwap.fillStyleId = themeRef[unlinkedColorName] 190 | } else { 191 | console.log(node.type) 192 | } 193 | 194 | } 195 | }) 196 | 197 | figma.ui.postMessage({ type: 'relinkStyles', complete: true }); 198 | return 199 | } 200 | 201 | if (msg.type === 'create-custom') { 202 | const newTheme = JSON.parse(msg.newThemeCode) 203 | themes.push(newTheme) 204 | themes.reverse().forEach((theme, themeI) => { 205 | const themeColors = theme.colors 206 | const colorTheme = theme.name.replace(/\s+/g, '-').toLowerCase() 207 | 208 | // sort object 209 | let sortedObject = Object.keys(themeColors).sort() 210 | 211 | // map sorted array to object 212 | let sortedColors = sortedObject.map(k => { 213 | return [k, themeColors[k]] 214 | }) 215 | 216 | createColorGuide(colorTheme, sortedColors, themeI) 217 | 218 | }) 219 | 220 | figma.closePlugin() 221 | return 222 | } 223 | 224 | } -------------------------------------------------------------------------------- /src/color-guide.js: -------------------------------------------------------------------------------- 1 | const COMPONENT_WRAP_COUNT = 8; 2 | const colorGuideSpacing = 540; 3 | const rectHeight = 303; 4 | const hexFrameHeight = 46; 5 | const colorFrameWidth = 328; 6 | const labelFrameHeight = 71; 7 | const colorFrameHeight = rectHeight + hexFrameHeight + labelFrameHeight; 8 | const gap = 20; 9 | const borderSize = 192; 10 | const themeIndicator = '--'; 11 | const styleIndicator = '---'; 12 | export function createColorGuide(colorThemeName, sortedColors, n) { 13 | const guideFrameHeight = Math.ceil(sortedColors.length / COMPONENT_WRAP_COUNT) * (colorFrameHeight + gap) - gap; 14 | const guideFrameWidth = (colorFrameWidth + gap) * COMPONENT_WRAP_COUNT - gap; 15 | let xOffset = n * guideFrameWidth + (n - 1) * colorGuideSpacing; 16 | let stylesCount = []; 17 | let xLastStyle = 0; 18 | // when adding a single style, add to the end of guides 19 | if (n === 0) { 20 | figma.currentPage.children.forEach(c => { 21 | if (c.name.startsWith('--') && c.name.charAt(2) != "-") { 22 | stylesCount.push(c.id); 23 | } 24 | }); 25 | let stylesCountTotal = (stylesCount.length - 1); 26 | let lastStyleId = stylesCount[stylesCountTotal]; 27 | figma.currentPage.children.forEach(c => { 28 | if (c.id === lastStyleId) { 29 | // console.log('Last one is ' + c.name) 30 | xLastStyle = c.x; 31 | xOffset = (xOffset + guideFrameWidth + xLastStyle + colorGuideSpacing) + colorGuideSpacing; 32 | } 33 | }); 34 | } 35 | const borderFrame = createBorderFrame(colorThemeName, guideFrameWidth, guideFrameHeight, borderSize, xOffset); 36 | const innerGuideFrame = createInnerGuideFrame(borderFrame, borderSize, guideFrameWidth, guideFrameHeight); 37 | let colorFrameX = 0; 38 | let colorFrameY = 0; 39 | let groupCount = 0; 40 | const sortedColorsWithLeadingBlocks = []; 41 | let prevGroupName; 42 | sortedColors.forEach(sc => { 43 | const groupName = getColorNames(colorThemeName + ' / ' + sc[0]).groupName; 44 | if (groupName !== prevGroupName) { 45 | sortedColorsWithLeadingBlocks.push(groupName); 46 | } 47 | sortedColorsWithLeadingBlocks.push(sc); 48 | prevGroupName = groupName; 49 | }); 50 | sortedColorsWithLeadingBlocks.forEach((item, colorI) => { 51 | if (typeof item === 'string') { 52 | if (colorI !== 0) { 53 | colorFrameY += colorFrameHeight + gap * 10; 54 | colorFrameX = 0; 55 | } 56 | createGroupLeadingBlock(item, colorFrameWidth, colorFrameHeight, innerGuideFrame, 0, colorFrameY); 57 | colorFrameX += colorFrameWidth + gap; 58 | groupCount = 1; 59 | } 60 | else { 61 | const [fullColorName, colorValue] = item; 62 | groupCount++; 63 | //checking to see if we will need to change the group name. If we do and it isn't the first layer, then we add to the Y position, change the X position back to 0, and set layerCount to 0 64 | if ((groupCount - 1) % COMPONENT_WRAP_COUNT == 0) { 65 | colorFrameY += colorFrameHeight + gap; 66 | colorFrameX = 0; 67 | } 68 | const { groupName, colorName } = getColorNames(colorThemeName + ' / ' + fullColorName); 69 | const colorFrame = createColorFrame(styleIndicator + fullColorName, innerGuideFrame, colorFrameWidth, colorFrameHeight, colorFrameX, colorFrameY); 70 | const fillStyleId = createStyle(colorThemeName, fullColorName, colorValue); 71 | const solidColorRect = createSolidColorRect(colorFrame, fillStyleId, colorFrameWidth, rectHeight); 72 | const hexCodeFrame = createHEXCodeFrame(colorFrame, solidColorRect, hexFrameHeight); 73 | const hex = createHEXLabel(solidColorRect, hexCodeFrame); 74 | //label frame 75 | const labelFrame = createLabelFrame(colorFrame, solidColorRect, hexCodeFrame, labelFrameHeight); 76 | // The label 77 | const label = createLabel(labelFrame, fullColorName); 78 | //updating the x and y positions for next colorFrame 79 | colorFrameX += colorFrameWidth + gap; 80 | } 81 | }); 82 | borderFrame.resizeWithoutConstraints(guideFrameWidth + borderSize, colorFrameY + colorFrameHeight + borderSize); 83 | innerGuideFrame.resizeWithoutConstraints(guideFrameWidth, colorFrameY + colorFrameHeight); 84 | } 85 | // const foo = async msg => { 86 | // const fonts = [ 87 | // { family: 'Roboto', style: 'Regular' }, 88 | // { family: 'Roboto', style: 'Medium' }, 89 | // { family: 'Roboto Mono', style: 'Regular' }, 90 | // { family: 'Roboto Mono', style: 'Bold' } 91 | // ] 92 | // for (let f of fonts) { 93 | // await figma.loadFontAsync(f) 94 | // } 95 | // if (msg.type === 'create') { 96 | // const nodes = [] 97 | // function addToNodes(n: FrameNode | BaseNode) { 98 | // if ('children' in n) { 99 | // n.children.forEach(c => { 100 | // nodes.push(c) 101 | // addToNodes(c) 102 | // }) 103 | // } 104 | // } 105 | // figma.currentPage.selection.forEach(s => { 106 | // addToNodes(s) 107 | // }) 108 | // const COMPONENT_WRAP_COUNT = 8 109 | // let colorFrameX = 0 110 | // let colorFrameY = 0 111 | // let groupName 112 | // // Create overall frame 113 | // const borderFrame = createBorderFrame(guideFrameWidth, guideFrameHeight, borderSize) 114 | // const innerGuideFrame = createInnerGuideFrame( 115 | // borderFrame, 116 | // borderSize, 117 | // guideFrameWidth, 118 | // guideFrameHeight 119 | // ) 120 | // const allNodes = [] 121 | // let prevGroupName 122 | // nodes.forEach(n => { 123 | // const groupName = getColorNames(n.name).groupName 124 | // if (groupName !== prevGroupName) { 125 | // allNodes.push({ 126 | // type: 'LEAD_BLOCK', 127 | // groupName 128 | // }) 129 | // } 130 | // allNodes.push(n) 131 | // prevGroupName = groupName 132 | // }) 133 | // console.log(allNodes) 134 | // let groupCount = 0 135 | // // iterate through each selection 136 | // allNodes.forEach((node: BaseNode, nodeI) => { 137 | // if ((node.type as any) === 'LEAD_BLOCK') { 138 | // if (nodeI !== 0) { 139 | // colorFrameY += colorFrameHeight + gap * 10 140 | // colorFrameX = 0 141 | // } 142 | // createGroupLeadingBlock( 143 | // (node as any).groupName, 144 | // colorFrameWidth, 145 | // colorFrameHeight, 146 | // innerGuideFrame, 147 | // 0, 148 | // colorFrameY 149 | // ) 150 | // colorFrameX += colorFrameWidth + gap 151 | // groupCount = 1 152 | // console.log(nodeI, groupCount) 153 | // } else if (node.type == 'RECTANGLE') { 154 | // groupCount++ 155 | // //checking to see if we will need to change the group name. If we do and it isn't the first layer, then we add to the Y position, change the X position back to 0, and set layerCount to 0 156 | // if ((groupCount - 1) % COMPONENT_WRAP_COUNT == 0) { 157 | // console.log(nodeI, groupCount) 158 | // colorFrameY += colorFrameHeight + gap 159 | // colorFrameX = 0 160 | // } 161 | // groupName = getColorNames(node.name).groupName 162 | // //create a frame for the color token 163 | // const colorFrame = createColorFrame( 164 | // node.name, 165 | // innerGuideFrame, 166 | // colorFrameWidth, 167 | // colorFrameHeight, 168 | // colorFrameX, 169 | // colorFrameY 170 | // ) 171 | // const solidColorRect = createSolidColorRect( 172 | // colorFrame, 173 | // String(node.fillStyleId), 174 | // colorFrameWidth, 175 | // rectHeight 176 | // ) 177 | // const hexCodeFrame = createHEXCodeFrame(colorFrame, solidColorRect, hexFrameHeight) 178 | // const hex = createHEXLabel(solidColorRect, hexCodeFrame) 179 | // //label frame 180 | // const labelFrame = createLabelFrame( 181 | // colorFrame, 182 | // solidColorRect, 183 | // hexCodeFrame, 184 | // labelFrameHeight 185 | // ) 186 | // // The label 187 | // const label = createLabel(labelFrame, getColorNames(node.name).fullColorName) 188 | // //updating the x and y positions for next colorFrame 189 | // colorFrameX += colorFrameWidth + gap 190 | // } 191 | // }) 192 | // borderFrame.resizeWithoutConstraints( 193 | // guideFrameWidth + borderSize, 194 | // colorFrameY + colorFrameHeight + borderSize 195 | // ) 196 | // innerGuideFrame.resizeWithoutConstraints(guideFrameWidth, colorFrameY + colorFrameHeight) 197 | // // close plugin 198 | // figma.closePlugin() 199 | // } 200 | // } 201 | //create border frame 202 | function createBorderFrame(name, guideFrameWidth, guideFrameHeight, borderSize, x) { 203 | var borderFrame = figma.createFrame(); 204 | borderFrame.name = themeIndicator + name; 205 | borderFrame.resizeWithoutConstraints(guideFrameWidth + borderSize, guideFrameHeight + borderSize); 206 | borderFrame.backgrounds = [ 207 | { 208 | blendMode: 'NORMAL', 209 | color: { 210 | r: 0.8549019608, 211 | g: 0.8549019608, 212 | b: 0.8549019608 213 | }, 214 | opacity: 1, 215 | type: 'SOLID', 216 | visible: true 217 | } 218 | ]; 219 | borderFrame.x = x; 220 | return borderFrame; 221 | } 222 | //create guideFrame 223 | function createInnerGuideFrame(borderFrame, borderSize, guideFrameWidth, guideFrameHeight) { 224 | var guideFrame = figma.createFrame(); 225 | borderFrame.appendChild(guideFrame); 226 | guideFrame.x = borderSize / 2; 227 | guideFrame.y = borderSize / 2; 228 | guideFrame.resizeWithoutConstraints(guideFrameWidth, guideFrameHeight); 229 | // 0.8549019608 230 | guideFrame.backgrounds = [ 231 | { 232 | blendMode: 'PASS_THROUGH', 233 | color: { 234 | r: 0.8549019608, 235 | g: 0.8549019608, 236 | b: 0.8549019608 237 | }, 238 | opacity: 1, 239 | type: 'SOLID', 240 | visible: false 241 | } 242 | ]; 243 | return guideFrame; 244 | } 245 | //create colorFrame 246 | function createColorFrame(name, guideFrame, colorFrameWidth, colorFrameHeight, colorFrameX, colorFrameY) { 247 | var colorFrame = figma.createFrame(); 248 | colorFrame.name = name; 249 | guideFrame.appendChild(colorFrame); 250 | colorFrame.resizeWithoutConstraints(colorFrameWidth, colorFrameHeight); 251 | colorFrame.x = colorFrameX; 252 | colorFrame.y = colorFrameY; 253 | return colorFrame; 254 | } 255 | function createSolidColorRect(colorFrame, newStyleId, colorFrameWidth, rectHeight) { 256 | var rect = figma.createRectangle(); 257 | colorFrame.appendChild(rect); 258 | rect.name = figma.getStyleById(newStyleId).name.toString(); 259 | rect.x = 0; 260 | rect.fillStyleId = newStyleId; 261 | rect.resizeWithoutConstraints(colorFrameWidth, rectHeight); 262 | rect.constraints = { horizontal: 'STRETCH', vertical: 'STRETCH' }; 263 | //checking to see if the rect has a white fill and adding a border id it does 264 | if (rect.fills[0].color.r == 1 && rect.fills[0].color.g == 1 && rect.fills[0].color.b == 1) { 265 | rect.strokes = [ 266 | { 267 | color: { 268 | r: 0.8549019608, 269 | g: 0.8549019608, 270 | b: 0.8549019608 271 | }, 272 | type: 'SOLID' 273 | } 274 | ]; 275 | rect.strokeWeight = 0.5; 276 | rect.strokeAlign = 'INSIDE'; 277 | } 278 | return rect; 279 | } 280 | function createHEXCodeFrame(colorFrame, rect, hexFrameHeight) { 281 | var hexFrame = figma.createFrame(); 282 | colorFrame.appendChild(hexFrame); 283 | hexFrame.name = 'HEX code'; 284 | hexFrame.x = 0; 285 | hexFrame.y = rect.height + 1; 286 | hexFrame.resizeWithoutConstraints(colorFrame.width, hexFrameHeight); 287 | return hexFrame; 288 | } 289 | function createHEXLabel(rect, hexFrame) { 290 | var hex = findTheHEX(rect.fills[0].color.r, rect.fills[0].color.g, rect.fills[0].color.b); 291 | hex = hex.toUpperCase(); 292 | const hexCode = figma.createText(); 293 | hexFrame.appendChild(hexCode); 294 | hexCode.fontSize = 16; 295 | hexCode.textAlignHorizontal = 'RIGHT'; 296 | hexCode.x = hexFrame.width - 12; 297 | hexCode.y = 15; 298 | hexCode.characters = '#' + hex; 299 | return hex; 300 | } 301 | // creates the full hex code 302 | function findTheHEX(red, green, blue) { 303 | var redHEX = rgbToHex(red); 304 | var greenHEX = rgbToHex(green); 305 | var blueHEX = rgbToHex(blue); 306 | return redHEX + greenHEX + blueHEX; 307 | } 308 | //finds the HEX value for red, green, or blue 309 | var rgbToHex = function (rgb) { 310 | rgb = Math.floor(rgb * 255); 311 | var hex = Number(rgb).toString(16); 312 | if (hex.length < 2) { 313 | hex = '0' + hex; 314 | } 315 | return hex; 316 | }; 317 | //create labelFrame 318 | function createLabelFrame(colorFrame, rect, hexFrame, labelFrameHeight) { 319 | var labelFrame = figma.createFrame(); 320 | colorFrame.appendChild(labelFrame); 321 | labelFrame.name = 'Color Name'; 322 | labelFrame.x = 0; 323 | labelFrame.y = rect.height + hexFrame.height + 1; 324 | labelFrame.resizeWithoutConstraints(colorFrame.width, labelFrameHeight); 325 | labelFrame.backgrounds = [ 326 | { 327 | blendMode: 'NORMAL', 328 | color: { 329 | r: 0.9529411765, 330 | g: 0.9529411765, 331 | b: 0.9529411765 332 | }, 333 | type: 'SOLID' 334 | } 335 | ]; 336 | return labelFrame; 337 | } 338 | function createLabel(labelFrame, fullColorName) { 339 | let colorGroup, colorName; 340 | if (!fullColorName.includes('.')) { 341 | colorGroup = styleIndicator; 342 | colorName = fullColorName; 343 | } 344 | else { 345 | ; 346 | [colorGroup, colorName] = fullColorName.split('.'); 347 | } 348 | const colorGroupLabel = figma.createText(); 349 | labelFrame.appendChild(colorGroupLabel); 350 | colorGroupLabel.fontSize = 14; 351 | colorGroupLabel.y = 14; 352 | colorGroupLabel.x = 12; 353 | colorGroupLabel.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }]; 354 | colorGroupLabel.characters = colorGroup; 355 | colorGroupLabel.fontName = { family: 'Roboto Mono', style: 'Regular' }; 356 | const colorNameLabel = figma.createText(); 357 | labelFrame.appendChild(colorNameLabel); 358 | colorNameLabel.fontSize = 14; 359 | colorNameLabel.y = 35; 360 | colorNameLabel.x = 12; 361 | colorNameLabel.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }]; 362 | colorNameLabel.characters = colorName; 363 | colorNameLabel.fontName = { family: 'Roboto Mono', style: 'Bold' }; 364 | return colorGroupLabel; 365 | } 366 | function createGroupLeadingBlock(groupName, colorFrameWidth, colorFrameHeight, innerGuideFrame, x, y) { 367 | var groupTitleFrame = figma.createFrame(); 368 | innerGuideFrame.appendChild(groupTitleFrame); 369 | groupTitleFrame.resizeWithoutConstraints(colorFrameWidth, colorFrameHeight); 370 | groupTitleFrame.backgrounds = [ 371 | { 372 | blendMode: 'PASS_THROUGH', 373 | color: { 374 | r: 0.9529411765, 375 | g: 0.9529411765, 376 | b: 0.9529411765 377 | }, 378 | opacity: 1, 379 | type: 'SOLID', 380 | visible: true 381 | } 382 | ]; 383 | groupTitleFrame.x = x; 384 | groupTitleFrame.y = y; 385 | var groupTitle = figma.createText(); 386 | groupTitleFrame.appendChild(groupTitle); 387 | groupTitle.characters = groupName; 388 | groupTitle.fontName = { family: 'Roboto Mono', style: 'Regular' }; 389 | groupTitle.fontSize = 24; 390 | groupTitle.x = (groupTitleFrame.width - groupTitle.width) / 2; 391 | groupTitle.y = (groupTitleFrame.height - groupTitle.height) / 2; 392 | groupTitle.textAlignHorizontal = 'CENTER'; 393 | groupTitle.textAlignHorizontal = 'CENTER'; 394 | groupTitle.constraints = { horizontal: "CENTER", vertical: "CENTER" }; 395 | var charcter = ''; 396 | var lastCapital; 397 | if (groupTitle.characters.length >= 20) { 398 | for (var i = 0; i <= groupTitle.characters.length; i++) { 399 | var currentCharacter = groupTitle.characters.charAt(i); 400 | // console.log("Current Character: " + currentCharacter) 401 | if (currentCharacter == currentCharacter.toUpperCase() && currentCharacter != ' ' && currentCharacter != '') { 402 | // console.log("this is a capital letter") 403 | lastCapital = currentCharacter; 404 | } 405 | } 406 | return; 407 | } 408 | console.log(lastCapital); 409 | } 410 | function splitValue(value, index) { 411 | return value.substring(0, index) + "," + value.substring(index); 412 | } 413 | function getColorNames(fullName) { 414 | const [themeName, fullColorName] = fullName.split(' / '); 415 | let groupName, colorName; 416 | if (!fullColorName.includes('.')) { 417 | groupName = styleIndicator; 418 | colorName = fullColorName; 419 | } 420 | else { 421 | ; 422 | [groupName, colorName] = fullColorName.split('.'); 423 | } 424 | return { 425 | themeName, 426 | groupName, 427 | colorName, 428 | fullColorName 429 | }; 430 | } 431 | export function createStyle(colorThemeName, fullColorName, colorValue) { 432 | // convert color from hex => rgb 433 | const color = convertHexToRGBA(colorValue); 434 | // create new style 435 | const style = figma.createPaintStyle(); 436 | style.name = colorThemeName + ' / ' + fullColorName; 437 | const solidPaint = { 438 | type: 'SOLID', 439 | color: { 440 | r: color[0] / 255, 441 | g: color[1] / 255, 442 | b: color[2] / 255 443 | }, 444 | opacity: color[3] ? color[3] / 255 : 1 445 | }; 446 | style.paints = [solidPaint]; 447 | return style.id; 448 | } 449 | function convertHexToRGBA(hex) { 450 | 'use strict'; 451 | if (hex.charAt(0) === '#') { 452 | hex = hex.substr(1); 453 | } 454 | if (hex.length < 2 || hex.length > 8) { 455 | return false; 456 | } 457 | var values = hex.split(''), r, g, b, a; 458 | if (hex.length === 2) { 459 | r = parseInt(values[0].toString() + values[1].toString(), 16); 460 | g = r; 461 | b = r; 462 | } 463 | else if (hex.length === 3) { 464 | r = parseInt(values[0].toString() + values[0].toString(), 16); 465 | g = parseInt(values[1].toString() + values[1].toString(), 16); 466 | b = parseInt(values[2].toString() + values[2].toString(), 16); 467 | } 468 | else if (hex.length === 6) { 469 | r = parseInt(values[0].toString() + values[1].toString(), 16); 470 | g = parseInt(values[2].toString() + values[3].toString(), 16); 471 | b = parseInt(values[4].toString() + values[5].toString(), 16); 472 | } 473 | else if (hex.length === 8) { 474 | r = parseInt(values[0].toString() + values[1].toString(), 16); 475 | g = parseInt(values[2].toString() + values[3].toString(), 16); 476 | b = parseInt(values[4].toString() + values[5].toString(), 16); 477 | a = parseInt(values[6].toString() + values[7].toString(), 16); 478 | } 479 | else { 480 | return false; 481 | } 482 | return [r, g, b, a]; 483 | } 484 | -------------------------------------------------------------------------------- /src/color-guide.ts: -------------------------------------------------------------------------------- 1 | const COMPONENT_WRAP_COUNT = 8 2 | 3 | const colorGuideSpacing = 540 4 | const rectHeight = 303 5 | const hexFrameHeight = 46 6 | const colorFrameWidth = 328 7 | const labelFrameHeight = 71 8 | const colorFrameHeight = rectHeight + hexFrameHeight + labelFrameHeight 9 | const gap = 20 10 | const borderSize = 192 11 | const themeIndicator = '--' 12 | const styleIndicator = '---' 13 | 14 | export function createColorGuide(colorThemeName: string, sortedColors, n: number) { 15 | const guideFrameHeight = 16 | Math.ceil(sortedColors.length / COMPONENT_WRAP_COUNT) * (colorFrameHeight + gap) - gap 17 | const guideFrameWidth = (colorFrameWidth + gap) * COMPONENT_WRAP_COUNT - gap 18 | 19 | let xOffset = n * guideFrameWidth + (n - 1) * colorGuideSpacing 20 | 21 | let stylesCount = [] 22 | let xLastStyle = 0 23 | 24 | // when adding a single style, add to the end of guides 25 | if(n === 0){ 26 | figma.currentPage.children.forEach(c => { 27 | if (c.name.startsWith('--') && c.name.charAt(2) != "-") { 28 | stylesCount.push(c.id) 29 | } 30 | }) 31 | 32 | let stylesCountTotal = (stylesCount.length - 1) 33 | let lastStyleId = stylesCount[stylesCountTotal] 34 | 35 | figma.currentPage.children.forEach(c => { 36 | if (c.id === lastStyleId) { 37 | // console.log('Last one is ' + c.name) 38 | xLastStyle = (c as FrameNode).x 39 | xOffset = (xOffset + guideFrameWidth + xLastStyle + colorGuideSpacing) + colorGuideSpacing 40 | } 41 | }) 42 | } 43 | 44 | const borderFrame = createBorderFrame( 45 | colorThemeName, 46 | guideFrameWidth, 47 | guideFrameHeight, 48 | borderSize, 49 | xOffset 50 | ) 51 | const innerGuideFrame = createInnerGuideFrame( 52 | borderFrame, 53 | borderSize, 54 | guideFrameWidth, 55 | guideFrameHeight 56 | ) 57 | 58 | 59 | 60 | let colorFrameX = 0 61 | let colorFrameY = 0 62 | let groupCount = 0 63 | 64 | const sortedColorsWithLeadingBlocks = [] 65 | let prevGroupName 66 | sortedColors.forEach(sc => { 67 | const groupName = getColorNames(colorThemeName + ' / ' + sc[0]).groupName 68 | if (groupName !== prevGroupName) { 69 | sortedColorsWithLeadingBlocks.push(groupName) 70 | } 71 | sortedColorsWithLeadingBlocks.push(sc) 72 | prevGroupName = groupName 73 | }) 74 | 75 | sortedColorsWithLeadingBlocks.forEach((item, colorI) => { 76 | if (typeof item === 'string') { 77 | if (colorI !== 0) { 78 | colorFrameY += colorFrameHeight + gap * 10 79 | colorFrameX = 0 80 | } 81 | 82 | createGroupLeadingBlock(item, colorFrameWidth, colorFrameHeight, innerGuideFrame, 0, colorFrameY) 83 | colorFrameX += colorFrameWidth + gap 84 | groupCount = 1 85 | } else { 86 | const [fullColorName, colorValue] = item 87 | 88 | groupCount++ 89 | //checking to see if we will need to change the group name. If we do and it isn't the first layer, then we add to the Y position, change the X position back to 0, and set layerCount to 0 90 | if ((groupCount - 1) % COMPONENT_WRAP_COUNT == 0) { 91 | colorFrameY += colorFrameHeight + gap 92 | colorFrameX = 0 93 | } 94 | 95 | const { groupName, colorName } = getColorNames(colorThemeName + ' / ' + fullColorName) 96 | 97 | const colorFrame = createColorFrame( 98 | styleIndicator + fullColorName, 99 | innerGuideFrame, 100 | colorFrameWidth, 101 | colorFrameHeight, 102 | colorFrameX, 103 | colorFrameY 104 | ) 105 | 106 | const fillStyleId = createStyle(colorThemeName, fullColorName, colorValue) 107 | const solidColorRect = createSolidColorRect( 108 | colorFrame, 109 | fillStyleId, 110 | colorFrameWidth, 111 | rectHeight 112 | ) 113 | 114 | const hexCodeFrame = createHEXCodeFrame(colorFrame, solidColorRect, hexFrameHeight) 115 | const hex = createHEXLabel(solidColorRect, hexCodeFrame) 116 | 117 | //label frame 118 | const labelFrame = createLabelFrame( 119 | colorFrame, 120 | solidColorRect, 121 | hexCodeFrame, 122 | labelFrameHeight 123 | ) 124 | 125 | // The label 126 | const label = createLabel(labelFrame, fullColorName) 127 | 128 | //updating the x and y positions for next colorFrame 129 | colorFrameX += colorFrameWidth + gap 130 | } 131 | }) 132 | 133 | borderFrame.resizeWithoutConstraints( 134 | guideFrameWidth + borderSize, 135 | colorFrameY + colorFrameHeight + borderSize 136 | ) 137 | innerGuideFrame.resizeWithoutConstraints(guideFrameWidth, colorFrameY + colorFrameHeight) 138 | } 139 | 140 | // const foo = async msg => { 141 | // const fonts = [ 142 | // { family: 'Roboto', style: 'Regular' }, 143 | // { family: 'Roboto', style: 'Medium' }, 144 | // { family: 'Roboto Mono', style: 'Regular' }, 145 | // { family: 'Roboto Mono', style: 'Bold' } 146 | // ] 147 | 148 | // for (let f of fonts) { 149 | // await figma.loadFontAsync(f) 150 | // } 151 | 152 | // if (msg.type === 'create') { 153 | // const nodes = [] 154 | // function addToNodes(n: FrameNode | BaseNode) { 155 | // if ('children' in n) { 156 | // n.children.forEach(c => { 157 | // nodes.push(c) 158 | // addToNodes(c) 159 | // }) 160 | // } 161 | // } 162 | // figma.currentPage.selection.forEach(s => { 163 | // addToNodes(s) 164 | // }) 165 | 166 | // const COMPONENT_WRAP_COUNT = 8 167 | 168 | // let colorFrameX = 0 169 | // let colorFrameY = 0 170 | // let groupName 171 | 172 | // // Create overall frame 173 | // const borderFrame = createBorderFrame(guideFrameWidth, guideFrameHeight, borderSize) 174 | // const innerGuideFrame = createInnerGuideFrame( 175 | // borderFrame, 176 | // borderSize, 177 | // guideFrameWidth, 178 | // guideFrameHeight 179 | // ) 180 | 181 | // const allNodes = [] 182 | // let prevGroupName 183 | // nodes.forEach(n => { 184 | // const groupName = getColorNames(n.name).groupName 185 | // if (groupName !== prevGroupName) { 186 | // allNodes.push({ 187 | // type: 'LEAD_BLOCK', 188 | // groupName 189 | // }) 190 | // } 191 | // allNodes.push(n) 192 | // prevGroupName = groupName 193 | // }) 194 | 195 | // console.log(allNodes) 196 | 197 | // let groupCount = 0 198 | // // iterate through each selection 199 | // allNodes.forEach((node: BaseNode, nodeI) => { 200 | // if ((node.type as any) === 'LEAD_BLOCK') { 201 | // if (nodeI !== 0) { 202 | // colorFrameY += colorFrameHeight + gap * 10 203 | // colorFrameX = 0 204 | // } 205 | 206 | // createGroupLeadingBlock( 207 | // (node as any).groupName, 208 | // colorFrameWidth, 209 | // colorFrameHeight, 210 | // innerGuideFrame, 211 | // 0, 212 | // colorFrameY 213 | // ) 214 | // colorFrameX += colorFrameWidth + gap 215 | // groupCount = 1 216 | // console.log(nodeI, groupCount) 217 | // } else if (node.type == 'RECTANGLE') { 218 | // groupCount++ 219 | // //checking to see if we will need to change the group name. If we do and it isn't the first layer, then we add to the Y position, change the X position back to 0, and set layerCount to 0 220 | // if ((groupCount - 1) % COMPONENT_WRAP_COUNT == 0) { 221 | // console.log(nodeI, groupCount) 222 | // colorFrameY += colorFrameHeight + gap 223 | // colorFrameX = 0 224 | // } 225 | // groupName = getColorNames(node.name).groupName 226 | 227 | // //create a frame for the color token 228 | // const colorFrame = createColorFrame( 229 | // node.name, 230 | // innerGuideFrame, 231 | // colorFrameWidth, 232 | // colorFrameHeight, 233 | // colorFrameX, 234 | // colorFrameY 235 | // ) 236 | 237 | // const solidColorRect = createSolidColorRect( 238 | // colorFrame, 239 | // String(node.fillStyleId), 240 | // colorFrameWidth, 241 | // rectHeight 242 | // ) 243 | // const hexCodeFrame = createHEXCodeFrame(colorFrame, solidColorRect, hexFrameHeight) 244 | // const hex = createHEXLabel(solidColorRect, hexCodeFrame) 245 | 246 | // //label frame 247 | // const labelFrame = createLabelFrame( 248 | // colorFrame, 249 | // solidColorRect, 250 | // hexCodeFrame, 251 | // labelFrameHeight 252 | // ) 253 | 254 | // // The label 255 | // const label = createLabel(labelFrame, getColorNames(node.name).fullColorName) 256 | 257 | // //updating the x and y positions for next colorFrame 258 | // colorFrameX += colorFrameWidth + gap 259 | // } 260 | // }) 261 | 262 | // borderFrame.resizeWithoutConstraints( 263 | // guideFrameWidth + borderSize, 264 | // colorFrameY + colorFrameHeight + borderSize 265 | // ) 266 | // innerGuideFrame.resizeWithoutConstraints(guideFrameWidth, colorFrameY + colorFrameHeight) 267 | // // close plugin 268 | // figma.closePlugin() 269 | // } 270 | // } 271 | 272 | //create border frame 273 | function createBorderFrame(name, guideFrameWidth, guideFrameHeight, borderSize, x) { 274 | var borderFrame = figma.createFrame() 275 | borderFrame.name = themeIndicator + name 276 | borderFrame.resizeWithoutConstraints(guideFrameWidth + borderSize, guideFrameHeight + borderSize) 277 | borderFrame.backgrounds = [ 278 | { 279 | blendMode: 'NORMAL', 280 | color: { 281 | r: 0.8549019608, 282 | g: 0.8549019608, 283 | b: 0.8549019608 284 | }, 285 | opacity: 1, 286 | type: 'SOLID', 287 | visible: true 288 | } 289 | ] 290 | borderFrame.x = x 291 | return borderFrame 292 | } 293 | 294 | //create guideFrame 295 | function createInnerGuideFrame(borderFrame, borderSize, guideFrameWidth, guideFrameHeight) { 296 | var guideFrame = figma.createFrame() 297 | borderFrame.appendChild(guideFrame) 298 | guideFrame.x = borderSize / 2 299 | guideFrame.y = borderSize / 2 300 | guideFrame.resizeWithoutConstraints(guideFrameWidth, guideFrameHeight) 301 | // 0.8549019608 302 | guideFrame.backgrounds = [ 303 | { 304 | blendMode: 'PASS_THROUGH', 305 | color: { 306 | r: 0.8549019608, 307 | g: 0.8549019608, 308 | b: 0.8549019608 309 | }, 310 | opacity: 1, 311 | type: 'SOLID', 312 | visible: false 313 | } 314 | ] 315 | return guideFrame 316 | } 317 | 318 | //create colorFrame 319 | function createColorFrame( 320 | name, 321 | guideFrame, 322 | colorFrameWidth, 323 | colorFrameHeight, 324 | colorFrameX, 325 | colorFrameY 326 | ) { 327 | var colorFrame = figma.createFrame() 328 | colorFrame.name = name 329 | guideFrame.appendChild(colorFrame) 330 | colorFrame.resizeWithoutConstraints(colorFrameWidth, colorFrameHeight) 331 | colorFrame.x = colorFrameX 332 | colorFrame.y = colorFrameY 333 | return colorFrame 334 | } 335 | 336 | function createSolidColorRect(colorFrame, newStyleId: string, colorFrameWidth, rectHeight) { 337 | var rect = figma.createRectangle() 338 | colorFrame.appendChild(rect) 339 | rect.name = figma.getStyleById(newStyleId).name.toString() 340 | rect.x = 0 341 | rect.fillStyleId = newStyleId 342 | rect.resizeWithoutConstraints(colorFrameWidth, rectHeight) 343 | rect.constraints = { horizontal: 'STRETCH', vertical: 'STRETCH' } 344 | //checking to see if the rect has a white fill and adding a border id it does 345 | if (rect.fills[0].color.r == 1 && rect.fills[0].color.g == 1 && rect.fills[0].color.b == 1) { 346 | rect.strokes = [ 347 | { 348 | color: { 349 | r: 0.8549019608, 350 | g: 0.8549019608, 351 | b: 0.8549019608 352 | }, 353 | type: 'SOLID' 354 | } 355 | ] 356 | rect.strokeWeight = 0.5 357 | rect.strokeAlign = 'INSIDE' 358 | } 359 | return rect 360 | } 361 | 362 | function createHEXCodeFrame(colorFrame, rect, hexFrameHeight) { 363 | var hexFrame = figma.createFrame() 364 | colorFrame.appendChild(hexFrame) 365 | hexFrame.name = 'HEX code' 366 | hexFrame.x = 0 367 | hexFrame.y = rect.height + 1 368 | hexFrame.resizeWithoutConstraints(colorFrame.width, hexFrameHeight) 369 | 370 | return hexFrame 371 | } 372 | 373 | function createHEXLabel(rect, hexFrame) { 374 | var hex = findTheHEX(rect.fills[0].color.r, rect.fills[0].color.g, rect.fills[0].color.b) 375 | hex = hex.toUpperCase() 376 | const hexCode = figma.createText() 377 | hexFrame.appendChild(hexCode) 378 | hexCode.fontSize = 16 379 | hexCode.textAlignHorizontal = 'RIGHT' 380 | hexCode.x = hexFrame.width - 12 381 | hexCode.y = 15 382 | hexCode.characters = '#' + hex 383 | 384 | return hex 385 | } 386 | 387 | // creates the full hex code 388 | function findTheHEX(red, green, blue) { 389 | var redHEX = rgbToHex(red) 390 | var greenHEX = rgbToHex(green) 391 | var blueHEX = rgbToHex(blue) 392 | 393 | return redHEX + greenHEX + blueHEX 394 | } 395 | 396 | //finds the HEX value for red, green, or blue 397 | var rgbToHex = function(rgb) { 398 | rgb = Math.floor(rgb * 255) 399 | var hex = Number(rgb).toString(16) 400 | if (hex.length < 2) { 401 | hex = '0' + hex 402 | } 403 | return hex 404 | } 405 | 406 | //create labelFrame 407 | function createLabelFrame(colorFrame, rect, hexFrame, labelFrameHeight) { 408 | var labelFrame = figma.createFrame() 409 | colorFrame.appendChild(labelFrame) 410 | labelFrame.name = 'Color Name' 411 | labelFrame.x = 0 412 | labelFrame.y = rect.height + hexFrame.height + 1 413 | labelFrame.resizeWithoutConstraints(colorFrame.width, labelFrameHeight) 414 | labelFrame.backgrounds = [ 415 | { 416 | blendMode: 'NORMAL', 417 | color: { 418 | r: 0.9529411765, 419 | g: 0.9529411765, 420 | b: 0.9529411765 421 | }, 422 | type: 'SOLID' 423 | } 424 | ] 425 | return labelFrame 426 | } 427 | 428 | function createLabel(labelFrame, fullColorName: string) { 429 | let colorGroup: string, colorName: string 430 | if (!fullColorName.includes('.')) { 431 | colorGroup = styleIndicator 432 | colorName = fullColorName 433 | } else { 434 | ;[colorGroup, colorName] = fullColorName.split('.') 435 | } 436 | 437 | const colorGroupLabel = figma.createText() 438 | labelFrame.appendChild(colorGroupLabel) 439 | colorGroupLabel.fontSize = 14 440 | colorGroupLabel.y = 14 441 | colorGroupLabel.x = 12 442 | colorGroupLabel.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }] 443 | colorGroupLabel.characters = colorGroup 444 | colorGroupLabel.fontName = { family: 'Roboto Mono', style: 'Regular' } 445 | 446 | const colorNameLabel = figma.createText() 447 | labelFrame.appendChild(colorNameLabel) 448 | colorNameLabel.fontSize = 14 449 | colorNameLabel.y = 35 450 | colorNameLabel.x = 12 451 | colorNameLabel.fills = [{ type: 'SOLID', color: { r: 0, g: 0, b: 0 } }] 452 | colorNameLabel.characters = colorName 453 | colorNameLabel.fontName = { family: 'Roboto Mono', style: 'Bold' } 454 | 455 | return colorGroupLabel 456 | } 457 | 458 | function createGroupLeadingBlock( 459 | groupName, 460 | colorFrameWidth, 461 | colorFrameHeight, 462 | innerGuideFrame, 463 | x, 464 | y 465 | ) { 466 | var groupTitleFrame = figma.createFrame() 467 | innerGuideFrame.appendChild(groupTitleFrame) 468 | groupTitleFrame.resizeWithoutConstraints(colorFrameWidth, colorFrameHeight) 469 | groupTitleFrame.backgrounds = [ 470 | { 471 | blendMode: 'PASS_THROUGH', 472 | color: { 473 | r: 0.9529411765, 474 | g: 0.9529411765, 475 | b: 0.9529411765 476 | }, 477 | opacity: 1, 478 | type: 'SOLID', 479 | visible: true 480 | } 481 | ] 482 | 483 | groupTitleFrame.x = x 484 | groupTitleFrame.y = y 485 | 486 | var groupTitle = figma.createText() 487 | groupTitleFrame.appendChild(groupTitle) 488 | groupTitle.characters = groupName 489 | groupTitle.fontName = { family: 'Roboto Mono', style: 'Regular' } 490 | groupTitle.fontSize = 24 491 | groupTitle.x = (groupTitleFrame.width - groupTitle.width) / 2 492 | groupTitle.y = (groupTitleFrame.height - groupTitle.height) / 2 493 | groupTitle.textAlignHorizontal = 'CENTER' 494 | groupTitle.textAlignHorizontal = 'CENTER' 495 | groupTitle.constraints = {horizontal: "CENTER", vertical: "CENTER"} 496 | 497 | var charcter = '' 498 | var lastCapital 499 | var currentCharacter = '' 500 | 501 | if (groupTitle.characters.length >= 20){ 502 | for (var i = 0; i<= 20; i++){ 503 | currentCharacter = groupTitle.characters.charAt(i) 504 | // console.log("Current Character: " + currentCharacter) 505 | if (currentCharacter == currentCharacter.toUpperCase() && currentCharacter != ' ' && currentCharacter != '' ){ 506 | // console.log("this is a capital letter") 507 | lastCapital = currentCharacter 508 | } 509 | } 510 | // console.log(lastCapital) 511 | var sections = groupTitle.characters.split(lastCapital) 512 | // console.log(sections) 513 | // console.log(sections[0] + "\n" + lastCapital + sections[1]) 514 | groupTitle.characters = sections[0] + "\n" + lastCapital + sections[1] 515 | } 516 | 517 | 518 | } 519 | 520 | 521 | function getColorNames(fullName: string) { 522 | const [themeName, fullColorName] = fullName.split(' / ') 523 | 524 | let groupName: string, colorName: string 525 | if (!fullColorName.includes('.')) { 526 | groupName = styleIndicator 527 | colorName = fullColorName 528 | } else { 529 | ;[groupName, colorName] = fullColorName.split('.') 530 | } 531 | 532 | return { 533 | themeName, 534 | groupName, 535 | colorName, 536 | fullColorName 537 | } 538 | } 539 | 540 | 541 | export function createStyle(colorThemeName: string, fullColorName: string, colorValue: string) { 542 | // convert color from hex => rgb 543 | const color = convertHexToRGBA(colorValue) 544 | // create new style 545 | const style = figma.createPaintStyle() 546 | style.name = colorThemeName + ' / ' + fullColorName 547 | 548 | const solidPaint: SolidPaint = { 549 | type: 'SOLID', 550 | color: { 551 | r: color[0] / 255, 552 | g: color[1] / 255, 553 | b: color[2] / 255 554 | }, 555 | opacity: color[3] ? color[3] / 255 : 1 556 | } 557 | style.paints = [solidPaint] 558 | 559 | return style.id 560 | } 561 | 562 | function convertHexToRGBA(hex: any) { 563 | 'use strict' 564 | if (hex.charAt(0) === '#') { 565 | hex = hex.substr(1) 566 | } 567 | if (hex.length < 2 || hex.length > 8) { 568 | return false 569 | } 570 | var values = hex.split(''), 571 | r: any, 572 | g: any, 573 | b: any, 574 | a: any 575 | 576 | if (hex.length === 2) { 577 | r = parseInt(values[0].toString() + values[1].toString(), 16) 578 | g = r 579 | b = r 580 | } else if (hex.length === 3) { 581 | r = parseInt(values[0].toString() + values[0].toString(), 16) 582 | g = parseInt(values[1].toString() + values[1].toString(), 16) 583 | b = parseInt(values[2].toString() + values[2].toString(), 16) 584 | } else if (hex.length === 6) { 585 | r = parseInt(values[0].toString() + values[1].toString(), 16) 586 | g = parseInt(values[2].toString() + values[3].toString(), 16) 587 | b = parseInt(values[4].toString() + values[5].toString(), 16) 588 | } else if (hex.length === 8) { 589 | r = parseInt(values[0].toString() + values[1].toString(), 16) 590 | g = parseInt(values[2].toString() + values[3].toString(), 16) 591 | b = parseInt(values[4].toString() + values[5].toString(), 16) 592 | a = parseInt(values[6].toString() + values[7].toString(), 16) 593 | } else { 594 | return false 595 | } 596 | return [r, g, b, a] 597 | } 598 | -------------------------------------------------------------------------------- /src/ui.js: -------------------------------------------------------------------------------- 1 | document.getElementById('create-styles').onclick = () => { 2 | let icon = document.getElementById('create-styles').querySelector('.icon-loader'); 3 | let text = document.getElementById('create-styles').querySelector('.text'); 4 | icon.style.display = "block"; 5 | text.style.display = "none"; 6 | let themes = []; 7 | let themeItems = document.querySelectorAll('input[type=checkbox]:checked'); 8 | themeItems.forEach(t => { 9 | themes.push(t.id); 10 | }); 11 | setTimeout(function () { 12 | parent.postMessage({ pluginMessage: { type: 'create-styles', themes } }, '*'); 13 | }, 100); 14 | }; 15 | document.getElementById('swap-theme').onclick = () => { 16 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 17 | let text = document.getElementById('swap-theme').querySelector('.text'); 18 | icon.style.display = "block"; 19 | text.style.display = "none"; 20 | document.getElementById('swap-validation').classList.add('hidden'); 21 | const newThemeName = document.getElementById('themes').value; 22 | setTimeout(function () { 23 | parent.postMessage({ pluginMessage: { type: 'swap-theme', newThemeName } }, '*'); 24 | }, 100); 25 | }; 26 | document.getElementById('create-custom').onclick = () => { 27 | let icon = document.getElementById('create-custom').querySelector('.icon-loader'); 28 | let text = document.getElementById('create-custom').querySelector('.text'); 29 | icon.style.display = "block"; 30 | text.style.display = "none"; 31 | const newTheme = (document.getElementById('custom-theme')); 32 | const newThemeCode = newTheme.value; 33 | setTimeout(function () { 34 | parent.postMessage({ pluginMessage: { type: 'create-custom', newThemeCode } }, '*'); 35 | }, 100); 36 | }; 37 | document.getElementById('load-themes').onclick = () => { 38 | parent.postMessage({ pluginMessage: { type: 'load-themes' } }, '*'); 39 | }; 40 | document.getElementById('select-all').onclick = () => { 41 | toggleCheckboxes(); 42 | }; 43 | const tabButtonGenerate = document.getElementById('tab-button-generate'); 44 | const tabButtonTheme = document.getElementById('tab-button-theme'); 45 | const tabButtonCreate = document.getElementById('tab-button-create'); 46 | const tabContentGenerate = document.getElementById('contentGenerate'); 47 | const tabContentTheme = document.getElementById('contentTheme'); 48 | const tabContentCreate = document.getElementById('contentCreate'); 49 | function addActive(button, content) { 50 | button.classList.add('active'); 51 | content.classList.add('active'); 52 | } 53 | function removeActive() { 54 | var activeItems = document.querySelectorAll('.active'); 55 | [].forEach.call(activeItems, function (el) { 56 | el.classList.remove('active'); 57 | }); 58 | } 59 | tabButtonGenerate.onclick = function () { 60 | removeActive(); 61 | addActive(tabButtonGenerate, tabContentGenerate); 62 | }; 63 | tabButtonTheme.onclick = function () { 64 | removeActive(); 65 | addActive(tabButtonTheme, tabContentTheme); 66 | }; 67 | tabButtonCreate.onclick = function () { 68 | removeActive(); 69 | addActive(tabButtonCreate, tabContentCreate); 70 | }; 71 | tabButtonGenerate.click(); 72 | document.getElementById('load-themes').click(); 73 | let dropdown = document.getElementById('themes'); 74 | let validation = document.getElementById('swap-validation'); 75 | onmessage = (event) => { 76 | const pluginMessage = event.data.pluginMessage; 77 | // load themes 78 | if (pluginMessage.type == 'loadThemes') { 79 | let themeNames = pluginMessage.themeNames[0]; 80 | if (themeNames.length > 0) { 81 | // Remove placeholder item 82 | dropdown.options[0] = null; 83 | document.getElementById('swap-theme').classList.remove('disabled'); 84 | themeNames.forEach((t, index) => { 85 | // add options to select dropdown 86 | let option = document.createElement('option'); 87 | let name = t; 88 | name = name.replace(/-+/g, ' '); 89 | name = name.replace(/\b\w/g, (l) => l.toUpperCase()); 90 | option.text = name; 91 | option.value = t; 92 | dropdown.add(option, index); 93 | }); 94 | } 95 | } 96 | // when swap is complete 97 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.complete == true) { 98 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 99 | let text = document.getElementById('swap-theme').querySelector('.text'); 100 | icon.style.display = "none"; 101 | text.style.display = "block"; 102 | } 103 | // when swap is missing selection 104 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.selectionEmpty == true) { 105 | validation.classList.remove('hidden'); 106 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader'); 107 | let text = document.getElementById('swap-theme').querySelector('.text'); 108 | icon.style.display = "none"; 109 | text.style.display = "block"; 110 | } 111 | }; 112 | function toggleCheckboxes() { 113 | let checkboxes = document.getElementsByName('checkbox'); 114 | let toggleButton = document.getElementById('select-all'); 115 | if (toggleButton.checked) { 116 | console.log('Check everything'); 117 | checkboxes.forEach(c => { 118 | let check = document.getElementById(c.id); 119 | check.checked = true; 120 | }); 121 | } 122 | else { 123 | console.log('Uncheck everything'); 124 | checkboxes.forEach(c => { 125 | let check = document.getElementById(c.id); 126 | check.checked = false; 127 | }); 128 | } 129 | } 130 | -------------------------------------------------------------------------------- /src/ui.ts: -------------------------------------------------------------------------------- 1 | document.getElementById('create-styles').onclick = () => { 2 | let icon = document.getElementById('create-styles').querySelector('.icon-loader') 3 | let text = document.getElementById('create-styles').querySelector('.text') 4 | icon.style.display = "block" 5 | text.style.display = "none" 6 | 7 | let themes = [] 8 | let themeItems = document.querySelectorAll('input[type=checkbox]:checked'); 9 | themeItems.forEach(t => { 10 | themes.push(t.id) 11 | }) 12 | 13 | setTimeout(function(){ 14 | parent.postMessage({ pluginMessage: { type: 'create-styles', themes }}, '*') 15 | }, 100) 16 | } 17 | 18 | document.getElementById('swap-theme').onclick = () => { 19 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader') 20 | let text = document.getElementById('swap-theme').querySelector('.text') 21 | icon.style.display = "block" 22 | text.style.display = "none" 23 | document.getElementById('swap-validation').classList.add('hidden') 24 | const newThemeName = (document.getElementById('themes') as HTMLOptionElement).value 25 | setTimeout(function () { 26 | parent.postMessage({ pluginMessage: { type: 'swap-theme', newThemeName } }, '*') 27 | }, 100) 28 | } 29 | 30 | document.getElementById('create-custom').onclick = () => { 31 | let icon = document.getElementById('create-custom').querySelector('.icon-loader') 32 | let text = document.getElementById('create-custom').querySelector('.text') 33 | icon.style.display = "block" 34 | text.style.display = "none" 35 | const newTheme = (document.getElementById('custom-theme')) 36 | const newThemeCode = newTheme.value 37 | setTimeout(function () { 38 | parent.postMessage({ pluginMessage: { type: 'create-custom', newThemeCode } }, '*') 39 | }, 100) 40 | } 41 | 42 | document.getElementById('load-themes').onclick = () => { 43 | parent.postMessage({ pluginMessage: { type: 'load-themes' } }, '*') 44 | } 45 | 46 | document.getElementById('select-all').onclick = () => { 47 | toggleCheckboxes() 48 | } 49 | 50 | const tabButtonGenerate = document.getElementById('tab-button-generate') 51 | const tabButtonTheme = document.getElementById('tab-button-theme') 52 | const tabButtonCreate = document.getElementById('tab-button-create') 53 | 54 | const tabContentGenerate = document.getElementById('contentGenerate') 55 | const tabContentTheme = document.getElementById('contentTheme') 56 | const tabContentCreate = document.getElementById('contentCreate') 57 | 58 | function addActive(button:any, content:any) { 59 | button.classList.add('active') 60 | content.classList.add('active') 61 | } 62 | 63 | function removeActive() { 64 | var activeItems = document.querySelectorAll('.active'); 65 | [].forEach.call(activeItems, function (el:any) { 66 | el.classList.remove('active'); 67 | }); 68 | } 69 | 70 | tabButtonGenerate.onclick = function () { 71 | removeActive() 72 | addActive(tabButtonGenerate, tabContentGenerate) 73 | } 74 | 75 | tabButtonTheme.onclick = function () { 76 | removeActive() 77 | addActive(tabButtonTheme, tabContentTheme) 78 | } 79 | 80 | tabButtonCreate.onclick = function () { 81 | removeActive() 82 | addActive(tabButtonCreate, tabContentCreate) 83 | } 84 | 85 | tabButtonGenerate.click() 86 | document.getElementById('load-themes').click() 87 | 88 | let dropdown = document.getElementById('themes') 89 | let validation = document.getElementById('swap-validation') 90 | 91 | onmessage = (event) => { 92 | 93 | const pluginMessage = event.data.pluginMessage 94 | 95 | // load themes 96 | if (pluginMessage.type == 'loadThemes') { 97 | let themeNames = pluginMessage.themeNames[0] 98 | if (themeNames.length > 0) { 99 | // Remove placeholder item 100 | dropdown.options[0] = null 101 | document.getElementById('swap-theme').classList.remove('disabled') 102 | 103 | themeNames.forEach((t: any, index: number) => { 104 | // add options to select dropdown 105 | let option = document.createElement('option') 106 | let name = t 107 | name = name.replace(/-+/g, ' ') 108 | name = name.replace(/\b\w/g, (l: any) => l.toUpperCase()) 109 | option.text = name 110 | option.value = t 111 | dropdown.add(option, index); 112 | }) 113 | } 114 | 115 | } 116 | 117 | // when swap is complete 118 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.complete == true) { 119 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader') 120 | let text = document.getElementById('swap-theme').querySelector('.text') 121 | icon.style.display = "none" 122 | text.style.display = "block" 123 | } 124 | 125 | // when swap is missing selection 126 | if (pluginMessage.type === 'relinkStyles' && pluginMessage.selectionEmpty == true) { 127 | validation.classList.remove('hidden') 128 | let icon = document.getElementById('swap-theme').querySelector('.icon-loader') 129 | let text = document.getElementById('swap-theme').querySelector('.text') 130 | icon.style.display = "none" 131 | text.style.display = "block" 132 | } 133 | 134 | } 135 | 136 | function toggleCheckboxes() { 137 | let checkboxes = document.getElementsByName('checkbox') 138 | let toggleButton = document.getElementById('select-all') 139 | if(toggleButton.checked){ 140 | console.log('Check everything') 141 | checkboxes.forEach(c => { 142 | let check = document.getElementById(c.id); 143 | check.checked = true 144 | }) 145 | } else { 146 | console.log('Uncheck everything') 147 | checkboxes.forEach(c => { 148 | let check = document.getElementById(c.id); 149 | check.checked = false 150 | }) 151 | 152 | } 153 | } -------------------------------------------------------------------------------- /themes/ayu-light.json5: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ayu-Light", 3 | "type": "light", 4 | "colors": { 5 | "activityBar.background": "#fafafa", 6 | "activityBar.border": "#fafafa", 7 | "activityBar.foreground": "#959da6cc", 8 | "activityBarBadge.background": "#ff9940", 9 | "activityBarBadge.foreground": "#fafafa", 10 | "badge.background": "#ff9940", 11 | "badge.foreground": "#fafafa", 12 | "button.background": "#ff9940", 13 | "button.foreground": "#fafafa", 14 | "button.hoverBackground": "#f9943b", 15 | "debugExceptionWidget.background": "#ffffff", 16 | "debugExceptionWidget.border": "#959da61a", 17 | "debugToolBar.background": "#ffffff", 18 | "diffEditor.insertedTextBackground": "#86b30026", 19 | "diffEditor.removedTextBackground": "#ed936626", 20 | "dropdown.background": "#ffffff", 21 | "dropdown.border": "#dcdee1", 22 | "dropdown.foreground": "#959da6", 23 | "editor.background": "#fafafa", 24 | "editor.findMatchBackground": "#ff99400d", 25 | "editor.findMatchBorder": "#ff9940", 26 | "editor.findMatchHighlightBackground": "#ff99400d", 27 | "editor.findMatchHighlightBorder": "#ff994059", 28 | "editor.findRangeHighlightBackground": "#eff3f6", 29 | "editor.findRangeHighlightBorder": "#fafafa00", 30 | "editor.foreground": "#6c7680", 31 | "editor.inactiveSelectionBackground": "#eff3f6", 32 | "editor.lineHighlightBackground": "#959da61a", 33 | "editor.rangeHighlightBackground": "#959da61a", 34 | "editor.selectionBackground": "#e8eef4", 35 | "editor.selectionHighlightBackground": "#eff3f6", 36 | "editor.selectionHighlightBorder": "#dee8f1", 37 | "editor.wordHighlightBackground": "#eff3f6", 38 | "editor.wordHighlightStrongBackground": "#ff994033", 39 | "editorBracketMatch.background": "#959da64d", 40 | "editorBracketMatch.border": "#959da699", 41 | "editorCodeLens.foreground": "#abb0b6", 42 | "editorCursor.foreground": "#ff9940", 43 | "editorError.foreground": "#f51818", 44 | "editorGroup.background": "#ffffff", 45 | "editorGroup.border": "#959da61a", 46 | "editorGroupHeader.noTabsBackground": "#fafafa", 47 | "editorGroupHeader.tabsBackground": "#fafafa", 48 | "editorGroupHeader.tabsBorder": "#fafafa", 49 | "editorGutter.addedBackground": "#99bf4d99", 50 | "editorGutter.deletedBackground": "#f2798399", 51 | "editorGutter.modifiedBackground": "#709ecc99", 52 | "editorHoverWidget.background": "#ffffff", 53 | "editorHoverWidget.border": "#f0f0f0", 54 | "editorIndentGuide.activeBackground": "#959da6b3", 55 | "editorIndentGuide.background": "#959da64d", 56 | "editorLineNumber.activeForeground": "#959da6cc", 57 | "editorLineNumber.foreground": "#959da666", 58 | "editorLink.activeForeground": "#ff9940", 59 | "editorMarkerNavigation.background": "#ffffff", 60 | "editorOverviewRuler.addedForeground": "#99bf4d99", 61 | "editorOverviewRuler.border": "#959da61a", 62 | "editorOverviewRuler.deletedForeground": "#f2798399", 63 | "editorOverviewRuler.errorForeground": "#f51818", 64 | "editorOverviewRuler.modifiedForeground": "#709ecc99", 65 | "editorOverviewRuler.warningForeground": "#ff9940", 66 | "editorRuler.foreground": "#959da64d", 67 | "editorSuggestWidget.background": "#ffffff", 68 | "editorSuggestWidget.border": "#f0f0f0", 69 | "editorSuggestWidget.highlightForeground": "#ff9940", 70 | "editorSuggestWidget.selectedBackground": "#959da61a", 71 | "editorWarning.foreground": "#ff9940", 72 | "editorWhitespace.foreground": "#959da666", 73 | "editorWidget.background": "#ffffff", 74 | "extensionButton.prominentBackground": "#ff9940", 75 | "extensionButton.prominentForeground": "#fafafa", 76 | "extensionButton.prominentHoverBackground": "#f9943b", 77 | "focusBorder": "#bdc2c8", 78 | "foreground": "#959da6", 79 | "gitDecoration.conflictingResourceForeground": "#ff0000", 80 | "gitDecoration.deletedResourceForeground": "#f27983b3", 81 | "gitDecoration.ignoredResourceForeground": "#c8ccd0", 82 | "gitDecoration.modifiedResourceForeground": "#709eccb3", 83 | "gitDecoration.submoduleResourceForeground": "#a37accb3", 84 | "gitDecoration.untrackedResourceForeground": "#99bf4db3", 85 | "input.background": "#ffffff", 86 | "input.border": "#dcdee1", 87 | "input.foreground": "#6c7680", 88 | "input.placeholderForeground": "#b3b9bf", 89 | "inputOption.activeBorder": "#ff9940", 90 | "inputValidation.errorBackground": "#fafafa", 91 | "inputValidation.errorBorder": "#f51818", 92 | "inputValidation.infoBackground": "#fafafa", 93 | "inputValidation.infoBorder": "#55b4d4", 94 | "inputValidation.warningBackground": "#fafafa", 95 | "inputValidation.warningBorder": "#f2ae49", 96 | "list.activeSelectionBackground": "#959da61a", 97 | "list.activeSelectionForeground": "#959da6", 98 | "list.focusBackground": "#959da61a", 99 | "list.focusForeground": "#959da6", 100 | "list.highlightForeground": "#ff9940", 101 | "list.hoverBackground": "#959da61a", 102 | "list.hoverForeground": "#959da6", 103 | "list.inactiveSelectionBackground": "#959da61a", 104 | "list.inactiveSelectionForeground": "#959da6", 105 | "list.invalidItemForeground": "#b3b9bf", 106 | "panel.background": "#fafafa", 107 | "panel.border": "#959da61a", 108 | "panelTitle.activeBorder": "#ff9940", 109 | "panelTitle.activeForeground": "#6c7680", 110 | "panelTitle.inactiveForeground": "#959da6", 111 | "peekView.border": "#959da61a", 112 | "peekViewEditor.background": "#ffffff", 113 | "peekViewEditor.matchHighlightBackground": "#ff994033", 114 | "peekViewResult.background": "#ffffff", 115 | "peekViewResult.fileForeground": "#959da6", 116 | "peekViewResult.matchHighlightBackground": "#ff994033", 117 | "peekViewTitle.background": "#ffffff", 118 | "peekViewTitleDescription.foreground": "#959da6", 119 | "peekViewTitleLabel.foreground": "#959da6", 120 | "pickerGroup.border": "#959da61a", 121 | "pickerGroup.foreground": "#c8ccd0", 122 | "progressBar.background": "#ff9940", 123 | "scrollbar.shadow": "#959da61a", 124 | "scrollbarSlider.activeBackground": "#959da6b3", 125 | "scrollbarSlider.background": "#959da666", 126 | "scrollbarSlider.hoverBackground": "#959da699", 127 | "selection.background": "#e8eef4fd", 128 | "settings.headerForeground": "#6c7680", 129 | "settings.modifiedItemIndicator": "#709ecc", 130 | "sideBar.background": "#fafafa", 131 | "sideBar.border": "#fafafa", 132 | "sideBarSectionHeader.background": "#fafafa", 133 | "sideBarSectionHeader.foreground": "#959da6", 134 | "sideBarTitle.foreground": "#959da6", 135 | "statusBar.background": "#fafafa", 136 | "statusBar.border": "#fafafa", 137 | "statusBar.debuggingBackground": "#ed9366", 138 | "statusBar.debuggingForeground": "#fafafa", 139 | "statusBar.foreground": "#959da6", 140 | "statusBar.noFolderBackground": "#ffffff", 141 | "statusBarItem.activeBackground": "#00000050", 142 | "statusBarItem.hoverBackground": "#00000030", 143 | "statusBarItem.prominentBackground": "#959da61a", 144 | "statusBarItem.prominentHoverBackground": "#00000030", 145 | "tab.activeBackground": "#fafafa", 146 | "tab.activeBorder": "#ff9940", 147 | "tab.activeForeground": "#6c7680", 148 | "tab.border": "#fafafa", 149 | "tab.inactiveBackground": "#fafafa", 150 | "tab.inactiveForeground": "#959da6", 151 | "tab.unfocusedActiveBorder": "#959da6", 152 | "tab.unfocusedActiveForeground": "#959da6", 153 | "tab.unfocusedInactiveForeground": "#959da6", 154 | "terminal.ansiBlack": "#000000", 155 | "terminal.ansiBlue": "#3199e1", 156 | "terminal.ansiBrightBlack": "#686868", 157 | "terminal.ansiBrightBlue": "#399ee6", 158 | "terminal.ansiBrightCyan": "#4cbf99", 159 | "terminal.ansiBrightGreen": "#86b300", 160 | "terminal.ansiBrightMagenta": "#a37acc", 161 | "terminal.ansiBrightRed": "#f07171", 162 | "terminal.ansiBrightWhite": "#d1d1d1", 163 | "terminal.ansiBrightYellow": "#f2ae49", 164 | "terminal.ansiCyan": "#46ba94", 165 | "terminal.ansiGreen": "#99bf4d", 166 | "terminal.ansiMagenta": "#9e75c7", 167 | "terminal.ansiRed": "#ea6c6d", 168 | "terminal.ansiWhite": "#c7c7c7", 169 | "terminal.ansiYellow": "#eca944", 170 | "terminal.background": "#fafafa", 171 | "terminal.foreground": "#6c7680", 172 | "textBlockQuote.background": "#ffffff", 173 | "textLink.activeForeground": "#ff9940", 174 | "textLink.foreground": "#ff9940", 175 | "textPreformat.foreground": "#6c7680", 176 | "titleBar.activeBackground": "#fafafa", 177 | "titleBar.activeForeground": "#6c7680", 178 | "titleBar.border": "#fafafa", 179 | "titleBar.inactiveBackground": "#fafafa", 180 | "titleBar.inactiveForeground": "#959da6", 181 | "walkThrough.embeddedEditorBackground": "#ffffff", 182 | "widget.shadow": "#56606940", 183 | "activityBar.dropBackground": "#ffffff1f", 184 | "activityBar.inactiveForeground": "#959da67a", 185 | "breadcrumb.activeSelectionForeground": "#737d89", 186 | "breadcrumb.background": "#fafafa", 187 | "breadcrumb.focusForeground": "#737d89", 188 | "breadcrumb.foreground": "#959da6cc", 189 | "breadcrumbPicker.background": "#ffffff", 190 | "descriptionForeground": "#717171", 191 | "editor.focusedStackFrameHighlightBackground": "#cee7ce73", 192 | "editor.hoverHighlightBackground": "#add6ff26", 193 | "editor.lineHighlightBorder": "#eeeeee", 194 | "editor.snippetFinalTabstopHighlightBorder": "#0a326480", 195 | "editor.snippetTabstopHighlightBackground": "#0a326433", 196 | "editor.stackFrameHighlightBackground": "#ffff6673", 197 | "editorGroup.dropBackground": "#2677cb2e", 198 | "editorGutter.background": "#fafafa", 199 | "editorGutter.commentRangeForeground": "#c5c5c5", 200 | "editorHint.foreground": "#6c6c6c", 201 | "editorHoverWidget.statusBarBackground": "#f2f2f2", 202 | "editorInfo.foreground": "#75beff", 203 | "editorMarkerNavigationError.background": "#f51818", 204 | "editorMarkerNavigationInfo.background": "#75beff", 205 | "editorMarkerNavigationWarning.background": "#ff9940", 206 | "editorOverviewRuler.bracketMatchForeground": "#a0a0a0", 207 | "editorOverviewRuler.commonContentForeground": "#60606066", 208 | "editorOverviewRuler.currentContentForeground": "#40c8ae80", 209 | "editorOverviewRuler.findMatchForeground": "#d186167e", 210 | "editorOverviewRuler.incomingContentForeground": "#40a6ff80", 211 | "editorOverviewRuler.infoForeground": "#75beff", 212 | "editorOverviewRuler.rangeHighlightForeground": "#007acc99", 213 | "editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc", 214 | "editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc", 215 | "editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc", 216 | "editorPane.background": "#fafafa", 217 | "editorSuggestWidget.foreground": "#6c7680", 218 | "editorUnnecessaryCode.opacity": "#00000077", 219 | "editorWidget.border": "#c8c8c8", 220 | "editorWidget.foreground": "#959da6", 221 | "errorForeground": "#a1260d", 222 | "extensionBadge.remoteBackground": "#ff9940", 223 | "extensionBadge.remoteForeground": "#fafafa", 224 | "gitDecoration.addedResourceForeground": "#587c0c", 225 | "gitlens.gutterBackgroundColor": "#0000000c", 226 | "gitlens.gutterForegroundColor": "#747474", 227 | "gitlens.gutterUncommittedForegroundColor": "#00bcf299", 228 | "gitlens.lineHighlightBackgroundColor": "#00bcf233", 229 | "gitlens.lineHighlightOverviewRulerColor": "#00bcf299", 230 | "gitlens.trailingLineBackgroundColor": "#00000000", 231 | "gitlens.trailingLineForegroundColor": "#99999959", 232 | "imagePreview.border": "#80808059", 233 | "inputOption.activeBackground": "#bdc2c84d", 234 | "list.dropBackground": "#959da61a", 235 | "list.errorForeground": "#b01011", 236 | "list.warningForeground": "#855f00", 237 | "listFilterWidget.background": "#efc1ad", 238 | "listFilterWidget.noMatchesOutline": "#be1100", 239 | "listFilterWidget.outline": "#00000000", 240 | "menu.background": "#ffffff", 241 | "menu.foreground": "#959da6", 242 | "menu.selectionBackground": "#959da61a", 243 | "menu.selectionForeground": "#959da6", 244 | "menu.separatorBackground": "#888888", 245 | "menubar.selectionBackground": "#0000001a", 246 | "menubar.selectionForeground": "#6c7680", 247 | "merge.commonContentBackground": "#60606029", 248 | "merge.commonHeaderBackground": "#60606066", 249 | "merge.currentContentBackground": "#40c8ae33", 250 | "merge.currentHeaderBackground": "#40c8ae80", 251 | "merge.incomingContentBackground": "#40a6ff33", 252 | "merge.incomingHeaderBackground": "#40a6ff80", 253 | "minimap.findMatchHighlight": "#d18616", 254 | "notificationCenterHeader.background": "#f2f2f2", 255 | "notificationLink.foreground": "#ff9940", 256 | "notifications.background": "#ffffff", 257 | "notifications.border": "#f2f2f2", 258 | "notifications.foreground": "#959da6", 259 | "panel.dropBackground": "#2677cb2e", 260 | "panelInput.border": "#dddddd", 261 | "peekViewEditorGutter.background": "#ffffff", 262 | "peekViewResult.lineForeground": "#646465", 263 | "peekViewResult.selectionBackground": "#3399ff33", 264 | "peekViewResult.selectionForeground": "#6c6c6c", 265 | "quickInput.background": "#fafafa", 266 | "settings.checkboxBackground": "#ffffff", 267 | "settings.checkboxBorder": "#dcdee1", 268 | "settings.checkboxForeground": "#959da6", 269 | "settings.dropdownBackground": "#ffffff", 270 | "settings.dropdownBorder": "#dcdee1", 271 | "settings.dropdownForeground": "#959da6", 272 | "settings.dropdownListBorder": "#c8c8c8", 273 | "settings.numberInputBackground": "#ffffff", 274 | "settings.numberInputBorder": "#dcdee1", 275 | "settings.numberInputForeground": "#6c7680", 276 | "settings.textInputBackground": "#ffffff", 277 | "settings.textInputBorder": "#dcdee1", 278 | "settings.textInputForeground": "#6c7680", 279 | "sideBar.dropBackground": "#0000001a", 280 | "statusBar.debuggingBorder": "#fafafa", 281 | "statusBar.noFolderBorder": "#fafafa", 282 | "statusBar.noFolderForeground": "#959da6", 283 | "statusBarItem.prominentForeground": "#959da6", 284 | "statusBarItem.remoteBackground": "#ff9940", 285 | "statusBarItem.remoteForeground": "#fafafa", 286 | "tab.activeModifiedBorder": "#33aaee", 287 | "tab.inactiveModifiedBorder": "#33aaee80", 288 | "tab.unfocusedActiveBackground": "#fafafa", 289 | "tab.unfocusedActiveModifiedBorder": "#33aaeeb3", 290 | "tab.unfocusedInactiveModifiedBorder": "#33aaee40", 291 | "terminal.border": "#959da61a", 292 | "terminal.selectionBackground": "#00000040", 293 | "textBlockQuote.border": "#007acc80", 294 | "textCodeBlock.background": "#dcdcdc66", 295 | "textSeparator.foreground": "#0000002e", 296 | "tree.indentGuidesStroke": "#a9a9a9" 297 | }, 298 | "tokenColors": [ 299 | { 300 | "name": "Comment", 301 | "scope": [ 302 | "comment" 303 | ], 304 | "settings": { 305 | "fontStyle": "italic", 306 | "foreground": "#abb0b6" 307 | } 308 | }, 309 | { 310 | "name": "String", 311 | "scope": [ 312 | "string", 313 | "constant.other.symbol" 314 | ], 315 | "settings": { 316 | "foreground": "#86b300" 317 | } 318 | }, 319 | { 320 | "name": "Regular Expressions and Escape Characters", 321 | "scope": [ 322 | "string.regexp", 323 | "constant.character", 324 | "constant.other" 325 | ], 326 | "settings": { 327 | "foreground": "#4cbf99" 328 | } 329 | }, 330 | { 331 | "name": "Number", 332 | "scope": [ 333 | "constant.numeric" 334 | ], 335 | "settings": { 336 | "foreground": "#ff9940" 337 | } 338 | }, 339 | { 340 | "name": "Built-in constants", 341 | "scope": [ 342 | "constant.language" 343 | ], 344 | "settings": { 345 | "foreground": "#ff9940" 346 | } 347 | }, 348 | { 349 | "name": "Variable", 350 | "scope": [ 351 | "variable" 352 | ], 353 | "settings": { 354 | "foreground": "#6c7680" 355 | } 356 | }, 357 | { 358 | "name": "Member Variable", 359 | "scope": [ 360 | "variable.member" 361 | ], 362 | "settings": { 363 | "foreground": "#f07171" 364 | } 365 | }, 366 | { 367 | "name": "Language variable", 368 | "scope": [ 369 | "variable.language" 370 | ], 371 | "settings": { 372 | "fontStyle": "italic", 373 | "foreground": "#55b4d4" 374 | } 375 | }, 376 | { 377 | "name": "Storage", 378 | "scope": [ 379 | "storage" 380 | ], 381 | "settings": { 382 | "foreground": "#fa8d3e" 383 | } 384 | }, 385 | { 386 | "name": "Keyword", 387 | "scope": [ 388 | "keyword" 389 | ], 390 | "settings": { 391 | "foreground": "#fa8d3e" 392 | } 393 | }, 394 | { 395 | "name": "Operators", 396 | "scope": [ 397 | "keyword.operator" 398 | ], 399 | "settings": { 400 | "foreground": "#ed9366" 401 | } 402 | }, 403 | { 404 | "name": "Separators like ; or ,", 405 | "scope": [ 406 | "punctuation.separator", 407 | "punctuation.terminator" 408 | ], 409 | "settings": { 410 | "foreground": "#6c7680b3" 411 | } 412 | }, 413 | { 414 | "name": "Punctuation", 415 | "scope": [ 416 | "punctuation.section" 417 | ], 418 | "settings": { 419 | "foreground": "#6c7680" 420 | } 421 | }, 422 | { 423 | "name": "Accessor", 424 | "scope": [ 425 | "punctuation.accessor" 426 | ], 427 | "settings": { 428 | "foreground": "#ed9366" 429 | } 430 | }, 431 | { 432 | "name": "Types fixes", 433 | "scope": [ 434 | "source.java storage.type", 435 | "source.haskell storage.type", 436 | "source.c storage.type" 437 | ], 438 | "settings": { 439 | "foreground": "#399ee6" 440 | } 441 | }, 442 | { 443 | "name": "Inherited class type", 444 | "scope": [ 445 | "entity.other.inherited-class" 446 | ], 447 | "settings": { 448 | "foreground": "#55b4d4" 449 | } 450 | }, 451 | { 452 | "name": "Lambda arrow", 453 | "scope": [ 454 | "storage.type.function" 455 | ], 456 | "settings": { 457 | "foreground": "#fa8d3e" 458 | } 459 | }, 460 | { 461 | "name": "Java primitive variable types", 462 | "scope": [ 463 | "source.java storage.type.primitive" 464 | ], 465 | "settings": { 466 | "foreground": "#55b4d4" 467 | } 468 | }, 469 | { 470 | "name": "Function name", 471 | "scope": [ 472 | "entity.name.function" 473 | ], 474 | "settings": { 475 | "foreground": "#f2ae49" 476 | } 477 | }, 478 | { 479 | "name": "Function arguments", 480 | "scope": [ 481 | "variable.parameter", 482 | "meta.parameter" 483 | ], 484 | "settings": { 485 | "foreground": "#a37acc" 486 | } 487 | }, 488 | { 489 | "name": "Function call", 490 | "scope": [ 491 | "variable.function", 492 | "variable.annotation", 493 | "meta.function-call.generic", 494 | "support.function.go" 495 | ], 496 | "settings": { 497 | "foreground": "#f2ae49" 498 | } 499 | }, 500 | { 501 | "name": "Library function", 502 | "scope": [ 503 | "support.function", 504 | "support.macro" 505 | ], 506 | "settings": { 507 | "foreground": "#f07171" 508 | } 509 | }, 510 | { 511 | "name": "Imports and packages", 512 | "scope": [ 513 | "entity.name.import", 514 | "entity.name.package" 515 | ], 516 | "settings": { 517 | "foreground": "#86b300" 518 | } 519 | }, 520 | { 521 | "name": "Entity name", 522 | "scope": [ 523 | "entity.name" 524 | ], 525 | "settings": { 526 | "foreground": "#399ee6" 527 | } 528 | }, 529 | { 530 | "name": "Tag", 531 | "scope": [ 532 | "entity.name.tag", 533 | "meta.tag.sgml" 534 | ], 535 | "settings": { 536 | "foreground": "#55b4d4" 537 | } 538 | }, 539 | { 540 | "name": "Tag start/end", 541 | "scope": [ 542 | "punctuation.definition.tag.end", 543 | "punctuation.definition.tag.begin", 544 | "punctuation.definition.tag" 545 | ], 546 | "settings": { 547 | "foreground": "#55b4d480" 548 | } 549 | }, 550 | { 551 | "name": "Tag attribute", 552 | "scope": [ 553 | "entity.other.attribute-name" 554 | ], 555 | "settings": { 556 | "foreground": "#f2ae49" 557 | } 558 | }, 559 | { 560 | "name": "Library constant", 561 | "scope": [ 562 | "support.constant" 563 | ], 564 | "settings": { 565 | "fontStyle": "italic", 566 | "foreground": "#ed9366" 567 | } 568 | }, 569 | { 570 | "name": "Library class/type", 571 | "scope": [ 572 | "support.type", 573 | "support.class", 574 | "source.go storage.type" 575 | ], 576 | "settings": { 577 | "foreground": "#55b4d4" 578 | } 579 | }, 580 | { 581 | "name": "Decorators/annotation", 582 | "scope": [ 583 | "meta.decorator variable.other", 584 | "meta.decorator punctuation.decorator", 585 | "storage.type.annotation" 586 | ], 587 | "settings": { 588 | "foreground": "#e6ba7e" 589 | } 590 | }, 591 | { 592 | "name": "Invalid", 593 | "scope": [ 594 | "invalid" 595 | ], 596 | "settings": { 597 | "foreground": "#f51818" 598 | } 599 | }, 600 | { 601 | "name": "diff.header", 602 | "scope": [ 603 | "meta.diff", 604 | "meta.diff.header" 605 | ], 606 | "settings": { 607 | "foreground": "#c594c5" 608 | } 609 | }, 610 | { 611 | "name": "Ruby class methods", 612 | "scope": [ 613 | "source.ruby variable.other.readwrite" 614 | ], 615 | "settings": { 616 | "foreground": "#f2ae49" 617 | } 618 | }, 619 | { 620 | "name": "CSS tag names", 621 | "scope": [ 622 | "source.css entity.name.tag", 623 | "source.sass entity.name.tag", 624 | "source.scss entity.name.tag", 625 | "source.less entity.name.tag", 626 | "source.stylus entity.name.tag" 627 | ], 628 | "settings": { 629 | "foreground": "#399ee6" 630 | } 631 | }, 632 | { 633 | "name": "CSS browser prefix", 634 | "scope": [ 635 | "source.css support.type", 636 | "source.sass support.type", 637 | "source.scss support.type", 638 | "source.less support.type", 639 | "source.stylus support.type" 640 | ], 641 | "settings": { 642 | "foreground": "#abb0b6" 643 | } 644 | }, 645 | { 646 | "name": "CSS Properties", 647 | "scope": [ 648 | "support.type.property-name" 649 | ], 650 | "settings": { 651 | "fontStyle": "normal", 652 | "foreground": "#55b4d4" 653 | } 654 | }, 655 | { 656 | "name": "Search Results Nums", 657 | "scope": [ 658 | "constant.numeric.line-number.find-in-files - match" 659 | ], 660 | "settings": { 661 | "foreground": "#abb0b6" 662 | } 663 | }, 664 | { 665 | "name": "Search Results Match Nums", 666 | "scope": [ 667 | "constant.numeric.line-number.match" 668 | ], 669 | "settings": { 670 | "foreground": "#fa8d3e" 671 | } 672 | }, 673 | { 674 | "name": "Search Results Lines", 675 | "scope": [ 676 | "entity.name.filename.find-in-files" 677 | ], 678 | "settings": { 679 | "foreground": "#86b300" 680 | } 681 | }, 682 | { 683 | "scope": [ 684 | "message.error" 685 | ], 686 | "settings": { 687 | "foreground": "#f51818" 688 | } 689 | }, 690 | { 691 | "name": "Markup heading", 692 | "scope": [ 693 | "markup.heading", 694 | "markup.heading entity.name" 695 | ], 696 | "settings": { 697 | "fontStyle": "bold", 698 | "foreground": "#86b300" 699 | } 700 | }, 701 | { 702 | "name": "Markup links", 703 | "scope": [ 704 | "markup.underline.link", 705 | "string.other.link" 706 | ], 707 | "settings": { 708 | "foreground": "#55b4d4" 709 | } 710 | }, 711 | { 712 | "name": "Markup Italic", 713 | "scope": [ 714 | "markup.italic" 715 | ], 716 | "settings": { 717 | "fontStyle": "italic", 718 | "foreground": "#f07171" 719 | } 720 | }, 721 | { 722 | "name": "Markup Bold", 723 | "scope": [ 724 | "markup.bold" 725 | ], 726 | "settings": { 727 | "fontStyle": "bold", 728 | "foreground": "#f07171" 729 | } 730 | }, 731 | { 732 | "name": "Markup Bold/italic", 733 | "scope": [ 734 | "markup.italic markup.bold", 735 | "markup.bold markup.italic" 736 | ], 737 | "settings": { 738 | "fontStyle": "bold italic" 739 | } 740 | }, 741 | { 742 | "name": "Markup Code", 743 | "scope": [ 744 | "markup.raw" 745 | ], 746 | "settings": { 747 | "background": "#6c768005" 748 | } 749 | }, 750 | { 751 | "name": "Markup Code Inline", 752 | "scope": [ 753 | "markup.raw.inline" 754 | ], 755 | "settings": { 756 | "background": "#6c76800f" 757 | } 758 | }, 759 | { 760 | "name": "Markdown Separator", 761 | "scope": [ 762 | "meta.separator" 763 | ], 764 | "settings": { 765 | "fontStyle": "bold", 766 | "background": "#6c76800f", 767 | "foreground": "#abb0b6" 768 | } 769 | }, 770 | { 771 | "name": "Markup Blockquote", 772 | "scope": [ 773 | "markup.quote" 774 | ], 775 | "settings": { 776 | "foreground": "#4cbf99", 777 | "fontStyle": "italic" 778 | } 779 | }, 780 | { 781 | "name": "Markup List Bullet", 782 | "scope": [ 783 | "markup.list punctuation.definition.list.begin" 784 | ], 785 | "settings": { 786 | "foreground": "#f2ae49" 787 | } 788 | }, 789 | { 790 | "name": "Markup added", 791 | "scope": [ 792 | "markup.inserted" 793 | ], 794 | "settings": { 795 | "foreground": "#99bf4d" 796 | } 797 | }, 798 | { 799 | "name": "Markup modified", 800 | "scope": [ 801 | "markup.changed" 802 | ], 803 | "settings": { 804 | "foreground": "#709ecc" 805 | } 806 | }, 807 | { 808 | "name": "Markup removed", 809 | "scope": [ 810 | "markup.deleted" 811 | ], 812 | "settings": { 813 | "foreground": "#f27983" 814 | } 815 | }, 816 | { 817 | "name": "Markup Strike", 818 | "scope": [ 819 | "markup.strike" 820 | ], 821 | "settings": { 822 | "foreground": "#e6ba7e" 823 | } 824 | }, 825 | { 826 | "name": "Markup Table", 827 | "scope": [ 828 | "markup.table" 829 | ], 830 | "settings": { 831 | "background": "#6c76800f", 832 | "foreground": "#55b4d4" 833 | } 834 | }, 835 | { 836 | "name": "Markup Raw Inline", 837 | "scope": [ 838 | "text.html.markdown markup.inline.raw" 839 | ], 840 | "settings": { 841 | "foreground": "#ed9366" 842 | } 843 | }, 844 | { 845 | "name": "Markdown - Line Break", 846 | "scope": [ 847 | "text.html.markdown meta.dummy.line-break" 848 | ], 849 | "settings": { 850 | "background": "#abb0b6", 851 | "foreground": "#abb0b6" 852 | } 853 | }, 854 | { 855 | "name": "Markdown - Raw Block Fenced", 856 | "scope": [ 857 | "punctuation.definition.markdown" 858 | ], 859 | "settings": { 860 | "background": "#6c7680", 861 | "foreground": "#abb0b6" 862 | } 863 | }, 864 | { 865 | "scope": "token.info-token", 866 | "settings": { 867 | "foreground": "#316bcd" 868 | } 869 | }, 870 | { 871 | "scope": "token.warn-token", 872 | "settings": { 873 | "foreground": "#cd9731" 874 | } 875 | }, 876 | { 877 | "scope": "token.error-token", 878 | "settings": { 879 | "foreground": "#cd3131" 880 | } 881 | }, 882 | { 883 | "scope": "token.debug-token", 884 | "settings": { 885 | "foreground": "#800080" 886 | } 887 | } 888 | ] 889 | } -------------------------------------------------------------------------------- /themes/dark.json5: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "vscode://schemas/color-theme", 3 | "name": "dark-default", 4 | "type": "dark", 5 | "colors": { 6 | "activityBarBadge.background": "#007acc", 7 | "editor.background": "#1e1e1e", 8 | "editor.foreground": "#d4d4d4", 9 | "editor.inactiveSelectionBackground": "#3a3d41", 10 | "editor.selectionHighlightBackground": "#add6ff26", 11 | "editorIndentGuide.activeBackground": "#707070", 12 | "editorIndentGuide.background": "#404040", 13 | "input.placeholderForeground": "#a6a6a6", 14 | "list.dropBackground": "#383b3d", 15 | "menu.background": "#252526", 16 | "menu.foreground": "#cccccc", 17 | "settings.numberInputBackground": "#292929", 18 | "settings.textInputBackground": "#292929", 19 | "sideBarTitle.foreground": "#bbbbbb", 20 | "statusBarItem.remoteBackground": "#16825d", 21 | "statusBarItem.remoteForeground": "#ffffff", 22 | "activityBar.background": "#333333", 23 | "activityBar.dropBackground": "#ffffff1f", 24 | "activityBar.foreground": "#ffffff", 25 | "activityBar.inactiveForeground": "#ffffff99", 26 | "activityBarBadge.foreground": "#ffffff", 27 | "badge.background": "#4d4d4d", 28 | "badge.foreground": "#ffffff", 29 | "breadcrumb.activeSelectionForeground": "#e0e0e0", 30 | "breadcrumb.background": "#1e1e1e", 31 | "breadcrumb.focusForeground": "#e0e0e0", 32 | "breadcrumb.foreground": "#cccccccc", 33 | "breadcrumbPicker.background": "#252526", 34 | "button.background": "#0e639c", 35 | "button.foreground": "#ffffff", 36 | "button.hoverBackground": "#1177bb", 37 | "debugExceptionWidget.background": "#420b0d", 38 | "debugExceptionWidget.border": "#a31515", 39 | "debugToolBar.background": "#333333", 40 | "descriptionForeground": "#ccccccb3", 41 | "diffEditor.insertedTextBackground": "#9bb95533", 42 | "diffEditor.removedTextBackground": "#ff000033", 43 | "dropdown.background": "#3c3c3c", 44 | "dropdown.border": "#3c3c3c", 45 | "dropdown.foreground": "#f0f0f0", 46 | "editor.findMatchBackground": "#515c6a", 47 | "editor.findMatchHighlightBackground": "#ea5c0055", 48 | "editor.findRangeHighlightBackground": "#3a3d4166", 49 | "editor.focusedStackFrameHighlightBackground": "#7abd7a4d", 50 | "editor.hoverHighlightBackground": "#264f7840", 51 | "editor.lineHighlightBorder": "#282828", 52 | "editor.rangeHighlightBackground": "#ffffff0b", 53 | "editor.selectionBackground": "#264f78", 54 | "editor.snippetFinalTabstopHighlightBorder": "#525252", 55 | "editor.snippetTabstopHighlightBackground": "#7c7c7c4d", 56 | "editor.stackFrameHighlightBackground": "#ffff0033", 57 | "editor.wordHighlightBackground": "#575757b8", 58 | "editor.wordHighlightStrongBackground": "#004972b8", 59 | "editorActiveLineNumber.foreground": "#c6c6c6", 60 | "editorBracketMatch.background": "#0064001a", 61 | "editorBracketMatch.border": "#888888", 62 | "editorCodeLens.foreground": "#999999", 63 | "editorCursor.foreground": "#aeafad", 64 | "editorError.foreground": "#f48771", 65 | "editorGroup.border": "#444444", 66 | "editorGroup.dropBackground": "#53595d80", 67 | "editorGroupHeader.noTabsBackground": "#1e1e1e", 68 | "editorGroupHeader.tabsBackground": "#252526", 69 | "editorGutter.addedBackground": "#587c0c", 70 | "editorGutter.background": "#1e1e1e", 71 | "editorGutter.commentRangeForeground": "#c5c5c5", 72 | "editorGutter.deletedBackground": "#94151b", 73 | "editorGutter.modifiedBackground": "#0c7d9d", 74 | "editorHint.foreground": "#eeeeeeb3", 75 | "editorHoverWidget.background": "#252526", 76 | "editorHoverWidget.border": "#454545", 77 | "editorHoverWidget.statusBarBackground": "#2c2c2d", 78 | "editorInfo.foreground": "#75beff", 79 | "editorLineNumber.activeForeground": "#c6c6c6", 80 | "editorLineNumber.foreground": "#858585", 81 | "editorLink.activeForeground": "#4e94ce", 82 | "editorMarkerNavigation.background": "#2d2d30", 83 | "editorMarkerNavigationError.background": "#f48771", 84 | "editorMarkerNavigationInfo.background": "#75beff", 85 | "editorMarkerNavigationWarning.background": "#cca700", 86 | "editorOverviewRuler.addedForeground": "#007acc99", 87 | "editorOverviewRuler.border": "#7f7f7f4d", 88 | "editorOverviewRuler.bracketMatchForeground": "#a0a0a0", 89 | "editorOverviewRuler.commonContentForeground": "#60606066", 90 | "editorOverviewRuler.currentContentForeground": "#40c8ae80", 91 | "editorOverviewRuler.deletedForeground": "#007acc99", 92 | "editorOverviewRuler.errorForeground": "#ff1212b3", 93 | "editorOverviewRuler.findMatchForeground": "#d186167e", 94 | "editorOverviewRuler.incomingContentForeground": "#40a6ff80", 95 | "editorOverviewRuler.infoForeground": "#75beff", 96 | "editorOverviewRuler.modifiedForeground": "#007acc99", 97 | "editorOverviewRuler.rangeHighlightForeground": "#007acc99", 98 | "editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc", 99 | "editorOverviewRuler.warningForeground": "#cca700", 100 | "editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc", 101 | "editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc", 102 | "editorPane.background": "#1e1e1e", 103 | "editorRuler.foreground": "#5a5a5a", 104 | "editorSuggestWidget.background": "#252526", 105 | "editorSuggestWidget.border": "#454545", 106 | "editorSuggestWidget.foreground": "#d4d4d4", 107 | "editorSuggestWidget.highlightForeground": "#0097fb", 108 | "editorSuggestWidget.selectedBackground": "#062f4a", 109 | "editorUnnecessaryCode.opacity": "#000000aa", 110 | "editorWarning.foreground": "#cca700", 111 | "editorWhitespace.foreground": "#e3e4e229", 112 | "editorWidget.background": "#252526", 113 | "editorWidget.border": "#454545", 114 | "editorWidget.foreground": "#cccccc", 115 | "errorForeground": "#f48771", 116 | "extensionBadge.remoteBackground": "#007acc", 117 | "extensionBadge.remoteForeground": "#ffffff", 118 | "extensionButton.prominentBackground": "#327e36", 119 | "extensionButton.prominentForeground": "#ffffff", 120 | "extensionButton.prominentHoverBackground": "#28632b", 121 | "focusBorder": "#0e639ccc", 122 | "foreground": "#cccccc", 123 | "gitDecoration.addedResourceForeground": "#81b88b", 124 | "gitDecoration.conflictingResourceForeground": "#6c6cc4", 125 | "gitDecoration.deletedResourceForeground": "#c74e39", 126 | "gitDecoration.ignoredResourceForeground": "#8c8c8c", 127 | "gitDecoration.modifiedResourceForeground": "#e2c08d", 128 | "gitDecoration.submoduleResourceForeground": "#8db9e2", 129 | "gitDecoration.untrackedResourceForeground": "#73c991", 130 | "gitlens.gutterBackgroundColor": "#ffffff13", 131 | "gitlens.gutterForegroundColor": "#bebebe", 132 | "gitlens.gutterUncommittedForegroundColor": "#00bcf299", 133 | "gitlens.lineHighlightBackgroundColor": "#00bcf233", 134 | "gitlens.lineHighlightOverviewRulerColor": "#00bcf299", 135 | "gitlens.trailingLineBackgroundColor": "#00000000", 136 | "gitlens.trailingLineForegroundColor": "#99999959", 137 | "imagePreview.border": "#80808059", 138 | "input.background": "#3c3c3c", 139 | "input.foreground": "#cccccc", 140 | "inputOption.activeBackground": "#0e639c66", 141 | "inputOption.activeBorder": "#007acc00", 142 | "inputValidation.errorBackground": "#5a1d1d", 143 | "inputValidation.errorBorder": "#be1100", 144 | "inputValidation.infoBackground": "#063b49", 145 | "inputValidation.infoBorder": "#007acc", 146 | "inputValidation.warningBackground": "#352a05", 147 | "inputValidation.warningBorder": "#b89500", 148 | "list.activeSelectionBackground": "#094771", 149 | "list.activeSelectionForeground": "#ffffff", 150 | "list.errorForeground": "#f88070", 151 | "list.focusBackground": "#062f4a", 152 | "list.highlightForeground": "#0097fb", 153 | "list.hoverBackground": "#2a2d2e", 154 | "list.inactiveSelectionBackground": "#37373d", 155 | "list.invalidItemForeground": "#b89500", 156 | "list.warningForeground": "#cca700", 157 | "listFilterWidget.background": "#653723", 158 | "listFilterWidget.noMatchesOutline": "#be1100", 159 | "listFilterWidget.outline": "#00000000", 160 | "menu.selectionBackground": "#094771", 161 | "menu.selectionForeground": "#ffffff", 162 | "menu.separatorBackground": "#bbbbbb", 163 | "menubar.selectionBackground": "#ffffff1a", 164 | "menubar.selectionForeground": "#cccccc", 165 | "merge.commonContentBackground": "#60606029", 166 | "merge.commonHeaderBackground": "#60606066", 167 | "merge.currentContentBackground": "#40c8ae33", 168 | "merge.currentHeaderBackground": "#40c8ae80", 169 | "merge.incomingContentBackground": "#40a6ff33", 170 | "merge.incomingHeaderBackground": "#40a6ff80", 171 | "minimap.findMatchHighlight": "#d18616", 172 | "notificationCenterHeader.background": "#303031", 173 | "notificationLink.foreground": "#3794ff", 174 | "notifications.background": "#252526", 175 | "notifications.border": "#303031", 176 | "notifications.foreground": "#cccccc", 177 | "panel.background": "#1e1e1e", 178 | "panel.border": "#80808059", 179 | "panel.dropBackground": "#ffffff1f", 180 | "panelTitle.activeBorder": "#80808059", 181 | "panelTitle.activeForeground": "#e7e7e7", 182 | "panelTitle.inactiveForeground": "#e7e7e799", 183 | "peekView.border": "#007acc", 184 | "peekViewEditor.background": "#001f33", 185 | "peekViewEditor.matchHighlightBackground": "#ff8f0099", 186 | "peekViewEditorGutter.background": "#001f33", 187 | "peekViewResult.background": "#252526", 188 | "peekViewResult.fileForeground": "#ffffff", 189 | "peekViewResult.lineForeground": "#bbbbbb", 190 | "peekViewResult.matchHighlightBackground": "#ea5c004d", 191 | "peekViewResult.selectionBackground": "#3399ff33", 192 | "peekViewResult.selectionForeground": "#ffffff", 193 | "peekViewTitle.background": "#1e1e1e", 194 | "peekViewTitleDescription.foreground": "#ccccccb3", 195 | "peekViewTitleLabel.foreground": "#ffffff", 196 | "pickerGroup.border": "#3f3f46", 197 | "pickerGroup.foreground": "#3794ff", 198 | "progressBar.background": "#0e70c0", 199 | "quickInput.background": "#252526", 200 | "scrollbar.shadow": "#000000", 201 | "scrollbarSlider.activeBackground": "#bfbfbf66", 202 | "scrollbarSlider.background": "#79797966", 203 | "scrollbarSlider.hoverBackground": "#646464b3", 204 | "settings.checkboxBackground": "#3c3c3c", 205 | "settings.checkboxBorder": "#3c3c3c", 206 | "settings.checkboxForeground": "#f0f0f0", 207 | "settings.dropdownBackground": "#3c3c3c", 208 | "settings.dropdownBorder": "#3c3c3c", 209 | "settings.dropdownForeground": "#f0f0f0", 210 | "settings.dropdownListBorder": "#454545", 211 | "settings.headerForeground": "#e7e7e7", 212 | "settings.modifiedItemIndicator": "#0c7d9d", 213 | "settings.numberInputForeground": "#cccccc", 214 | "settings.textInputForeground": "#cccccc", 215 | "sideBar.background": "#252526", 216 | "sideBar.dropBackground": "#ffffff1f", 217 | "sideBarSectionHeader.background": "#80808033", 218 | "statusBar.background": "#007acc", 219 | "statusBar.debuggingBackground": "#cc6633", 220 | "statusBar.debuggingForeground": "#ffffff", 221 | "statusBar.foreground": "#ffffff", 222 | "statusBar.noFolderBackground": "#68217a", 223 | "statusBar.noFolderForeground": "#ffffff", 224 | "statusBarItem.activeBackground": "#ffffff2e", 225 | "statusBarItem.hoverBackground": "#ffffff1f", 226 | "statusBarItem.prominentBackground": "#00000080", 227 | "statusBarItem.prominentForeground": "#ffffff", 228 | "statusBarItem.prominentHoverBackground": "#0000004d", 229 | "tab.activeBackground": "#1e1e1e", 230 | "tab.activeForeground": "#ffffff", 231 | "tab.activeModifiedBorder": "#3399cc", 232 | "tab.border": "#252526", 233 | "tab.inactiveBackground": "#2d2d2d", 234 | "tab.inactiveForeground": "#ffffff80", 235 | "tab.inactiveModifiedBorder": "#3399cc80", 236 | "tab.unfocusedActiveBackground": "#1e1e1e", 237 | "tab.unfocusedActiveForeground": "#ffffff80", 238 | "tab.unfocusedActiveModifiedBorder": "#3399cc80", 239 | "tab.unfocusedInactiveForeground": "#ffffff40", 240 | "tab.unfocusedInactiveModifiedBorder": "#3399cc40", 241 | "terminal.ansiBlack": "#000000", 242 | "terminal.ansiBlue": "#2472c8", 243 | "terminal.ansiBrightBlack": "#666666", 244 | "terminal.ansiBrightBlue": "#3b8eea", 245 | "terminal.ansiBrightCyan": "#29b8db", 246 | "terminal.ansiBrightGreen": "#23d18b", 247 | "terminal.ansiBrightMagenta": "#d670d6", 248 | "terminal.ansiBrightRed": "#f14c4c", 249 | "terminal.ansiBrightWhite": "#e5e5e5", 250 | "terminal.ansiBrightYellow": "#f5f543", 251 | "terminal.ansiCyan": "#11a8cd", 252 | "terminal.ansiGreen": "#0dbc79", 253 | "terminal.ansiMagenta": "#bc3fbc", 254 | "terminal.ansiRed": "#cd3131", 255 | "terminal.ansiWhite": "#e5e5e5", 256 | "terminal.ansiYellow": "#e5e510", 257 | "terminal.background": "#1e1e1e", 258 | "terminal.border": "#80808059", 259 | "terminal.foreground": "#cccccc", 260 | "terminal.selectionBackground": "#ffffff40", 261 | "textBlockQuote.background": "#7f7f7f1a", 262 | "textBlockQuote.border": "#007acc80", 263 | "textCodeBlock.background": "#0a0a0a66", 264 | "textLink.activeForeground": "#3794ff", 265 | "textLink.foreground": "#3794ff", 266 | "textPreformat.foreground": "#d7ba7d", 267 | "textSeparator.foreground": "#ffffff2e", 268 | "titleBar.activeBackground": "#3c3c3c", 269 | "titleBar.activeForeground": "#cccccc", 270 | "titleBar.inactiveBackground": "#3c3c3c99", 271 | "titleBar.inactiveForeground": "#cccccc99", 272 | "tree.indentGuidesStroke": "#585858", 273 | "widget.shadow": "#000000" 274 | } 275 | } -------------------------------------------------------------------------------- /themes/light.json5: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "vscode://schemas/color-theme", 3 | "name": "light-default", 4 | "type": "light", 5 | "colors": { 6 | "activityBarBadge.background": "#007acc", 7 | "editor.background": "#ffffff", 8 | "editor.foreground": "#000000", 9 | "editor.inactiveSelectionBackground": "#e5ebf1", 10 | "editor.selectionHighlightBackground": "#add6ff80", 11 | "editorIndentGuide.activeBackground": "#939393", 12 | "editorIndentGuide.background": "#d3d3d3", 13 | "editorSuggestWidget.background": "#f3f3f3", 14 | "input.placeholderForeground": "#767676", 15 | "list.hoverBackground": "#e8e8e8", 16 | "settings.numberInputBorder": "#cecece", 17 | "settings.textInputBorder": "#cecece", 18 | "sideBarTitle.foreground": "#6f6f6f", 19 | "statusBarItem.remoteBackground": "#16825d", 20 | "statusBarItem.remoteForeground": "#ffffff", 21 | "activityBar.background": "#2c2c2c", 22 | "activityBar.dropBackground": "#ffffff1f", 23 | "activityBar.foreground": "#ffffff", 24 | "activityBar.inactiveForeground": "#ffffff99", 25 | "activityBarBadge.foreground": "#ffffff", 26 | "badge.background": "#c4c4c4", 27 | "badge.foreground": "#333333", 28 | "breadcrumb.activeSelectionForeground": "#4e4e4e", 29 | "breadcrumb.background": "#ffffff", 30 | "breadcrumb.focusForeground": "#4e4e4e", 31 | "breadcrumb.foreground": "#616161cc", 32 | "breadcrumbPicker.background": "#f3f3f3", 33 | "button.background": "#007acc", 34 | "button.foreground": "#ffffff", 35 | "button.hoverBackground": "#0062a3", 36 | "debugExceptionWidget.background": "#f1dfde", 37 | "debugExceptionWidget.border": "#a31515", 38 | "debugToolBar.background": "#f3f3f3", 39 | "descriptionForeground": "#717171", 40 | "diffEditor.insertedTextBackground": "#9bb95533", 41 | "diffEditor.removedTextBackground": "#ff000033", 42 | "dropdown.background": "#ffffff", 43 | "dropdown.border": "#cecece", 44 | "editor.findMatchBackground": "#a8ac94", 45 | "editor.findMatchHighlightBackground": "#ea5c0055", 46 | "editor.findRangeHighlightBackground": "#b4b4b44d", 47 | "editor.focusedStackFrameHighlightBackground": "#cee7ce73", 48 | "editor.hoverHighlightBackground": "#add6ff26", 49 | "editor.lineHighlightBorder": "#eeeeee", 50 | "editor.rangeHighlightBackground": "#fdff0033", 51 | "editor.selectionBackground": "#add6ff", 52 | "editor.snippetFinalTabstopHighlightBorder": "#0a326480", 53 | "editor.snippetTabstopHighlightBackground": "#0a326433", 54 | "editor.stackFrameHighlightBackground": "#ffff6673", 55 | "editor.wordHighlightBackground": "#57575740", 56 | "editor.wordHighlightStrongBackground": "#0e639c40", 57 | "editorActiveLineNumber.foreground": "#0b216f", 58 | "editorBracketMatch.background": "#0064001a", 59 | "editorBracketMatch.border": "#b9b9b9", 60 | "editorCodeLens.foreground": "#999999", 61 | "editorCursor.foreground": "#000000", 62 | "editorError.foreground": "#e51400", 63 | "editorGroup.border": "#e7e7e7", 64 | "editorGroup.dropBackground": "#2677cb2e", 65 | "editorGroupHeader.noTabsBackground": "#ffffff", 66 | "editorGroupHeader.tabsBackground": "#f3f3f3", 67 | "editorGutter.addedBackground": "#81b88b", 68 | "editorGutter.background": "#ffffff", 69 | "editorGutter.commentRangeForeground": "#c5c5c5", 70 | "editorGutter.deletedBackground": "#ca4b51", 71 | "editorGutter.modifiedBackground": "#66afe0", 72 | "editorHint.foreground": "#6c6c6c", 73 | "editorHoverWidget.background": "#f3f3f3", 74 | "editorHoverWidget.border": "#c8c8c8", 75 | "editorHoverWidget.statusBarBackground": "#e7e7e7", 76 | "editorInfo.foreground": "#75beff", 77 | "editorLineNumber.activeForeground": "#0b216f", 78 | "editorLineNumber.foreground": "#237893", 79 | "editorLink.activeForeground": "#0000ff", 80 | "editorMarkerNavigation.background": "#ffffff", 81 | "editorMarkerNavigationError.background": "#e51400", 82 | "editorMarkerNavigationInfo.background": "#75beff", 83 | "editorMarkerNavigationWarning.background": "#e9a700", 84 | "editorOverviewRuler.addedForeground": "#007acc99", 85 | "editorOverviewRuler.border": "#7f7f7f4d", 86 | "editorOverviewRuler.bracketMatchForeground": "#a0a0a0", 87 | "editorOverviewRuler.commonContentForeground": "#60606066", 88 | "editorOverviewRuler.currentContentForeground": "#40c8ae80", 89 | "editorOverviewRuler.deletedForeground": "#007acc99", 90 | "editorOverviewRuler.errorForeground": "#ff1212b3", 91 | "editorOverviewRuler.findMatchForeground": "#d186167e", 92 | "editorOverviewRuler.incomingContentForeground": "#40a6ff80", 93 | "editorOverviewRuler.infoForeground": "#75beff", 94 | "editorOverviewRuler.modifiedForeground": "#007acc99", 95 | "editorOverviewRuler.rangeHighlightForeground": "#007acc99", 96 | "editorOverviewRuler.selectionHighlightForeground": "#a0a0a0cc", 97 | "editorOverviewRuler.warningForeground": "#e9a700", 98 | "editorOverviewRuler.wordHighlightForeground": "#a0a0a0cc", 99 | "editorOverviewRuler.wordHighlightStrongForeground": "#c0a0c0cc", 100 | "editorPane.background": "#ffffff", 101 | "editorRuler.foreground": "#d3d3d3", 102 | "editorSuggestWidget.border": "#c8c8c8", 103 | "editorSuggestWidget.foreground": "#000000", 104 | "editorSuggestWidget.highlightForeground": "#0066bf", 105 | "editorSuggestWidget.selectedBackground": "#d6ebff", 106 | "editorUnnecessaryCode.opacity": "#00000077", 107 | "editorWarning.foreground": "#e9a700", 108 | "editorWhitespace.foreground": "#33333333", 109 | "editorWidget.background": "#f3f3f3", 110 | "editorWidget.border": "#c8c8c8", 111 | "editorWidget.foreground": "#616161", 112 | "errorForeground": "#a1260d", 113 | "extensionBadge.remoteBackground": "#007acc", 114 | "extensionBadge.remoteForeground": "#ffffff", 115 | "extensionButton.prominentBackground": "#327e36", 116 | "extensionButton.prominentForeground": "#ffffff", 117 | "extensionButton.prominentHoverBackground": "#28632b", 118 | "focusBorder": "#007acc66", 119 | "foreground": "#616161", 120 | "gitDecoration.addedResourceForeground": "#587c0c", 121 | "gitDecoration.conflictingResourceForeground": "#6c6cc4", 122 | "gitDecoration.deletedResourceForeground": "#ad0707", 123 | "gitDecoration.ignoredResourceForeground": "#8e8e90", 124 | "gitDecoration.modifiedResourceForeground": "#895503", 125 | "gitDecoration.submoduleResourceForeground": "#1258a7", 126 | "gitDecoration.untrackedResourceForeground": "#007100", 127 | "gitlens.gutterBackgroundColor": "#0000000c", 128 | "gitlens.gutterForegroundColor": "#747474", 129 | "gitlens.gutterUncommittedForegroundColor": "#00bcf299", 130 | "gitlens.lineHighlightBackgroundColor": "#00bcf233", 131 | "gitlens.lineHighlightOverviewRulerColor": "#00bcf299", 132 | "gitlens.trailingLineBackgroundColor": "#00000000", 133 | "gitlens.trailingLineForegroundColor": "#99999959", 134 | "imagePreview.border": "#80808059", 135 | "input.background": "#ffffff", 136 | "input.foreground": "#616161", 137 | "inputOption.activeBackground": "#007acc1f", 138 | "inputOption.activeBorder": "#007acc00", 139 | "inputValidation.errorBackground": "#f2dede", 140 | "inputValidation.errorBorder": "#be1100", 141 | "inputValidation.infoBackground": "#d6ecf2", 142 | "inputValidation.infoBorder": "#007acc", 143 | "inputValidation.warningBackground": "#f6f5d2", 144 | "inputValidation.warningBorder": "#b89500", 145 | "list.activeSelectionBackground": "#0074e8", 146 | "list.activeSelectionForeground": "#ffffff", 147 | "list.dropBackground": "#d6ebff", 148 | "list.errorForeground": "#b01011", 149 | "list.focusBackground": "#d6ebff", 150 | "list.highlightForeground": "#0066bf", 151 | "list.inactiveSelectionBackground": "#e4e6f1", 152 | "list.invalidItemForeground": "#b89500", 153 | "list.warningForeground": "#855f00", 154 | "listFilterWidget.background": "#efc1ad", 155 | "listFilterWidget.noMatchesOutline": "#be1100", 156 | "listFilterWidget.outline": "#00000000", 157 | "menu.background": "#ffffff", 158 | "menu.foreground": "#616161", 159 | "menu.selectionBackground": "#0074e8", 160 | "menu.selectionForeground": "#ffffff", 161 | "menu.separatorBackground": "#888888", 162 | "menubar.selectionBackground": "#0000001a", 163 | "menubar.selectionForeground": "#333333", 164 | "merge.commonContentBackground": "#60606029", 165 | "merge.commonHeaderBackground": "#60606066", 166 | "merge.currentContentBackground": "#40c8ae33", 167 | "merge.currentHeaderBackground": "#40c8ae80", 168 | "merge.incomingContentBackground": "#40a6ff33", 169 | "merge.incomingHeaderBackground": "#40a6ff80", 170 | "minimap.findMatchHighlight": "#d18616", 171 | "notificationCenterHeader.background": "#e7e7e7", 172 | "notificationLink.foreground": "#006ab1", 173 | "notifications.background": "#f3f3f3", 174 | "notifications.border": "#e7e7e7", 175 | "notifications.foreground": "#616161", 176 | "panel.background": "#ffffff", 177 | "panel.border": "#80808059", 178 | "panel.dropBackground": "#2677cb2e", 179 | "panelInput.border": "#dddddd", 180 | "panelTitle.activeBorder": "#80808059", 181 | "panelTitle.activeForeground": "#424242", 182 | "panelTitle.inactiveForeground": "#424242bf", 183 | "peekView.border": "#007acc", 184 | "peekViewEditor.background": "#f2f8fc", 185 | "peekViewEditor.matchHighlightBackground": "#f5d802de", 186 | "peekViewEditorGutter.background": "#f2f8fc", 187 | "peekViewResult.background": "#f3f3f3", 188 | "peekViewResult.fileForeground": "#1e1e1e", 189 | "peekViewResult.lineForeground": "#646465", 190 | "peekViewResult.matchHighlightBackground": "#ea5c004d", 191 | "peekViewResult.selectionBackground": "#3399ff33", 192 | "peekViewResult.selectionForeground": "#6c6c6c", 193 | "peekViewTitle.background": "#ffffff", 194 | "peekViewTitleDescription.foreground": "#6c6c6cb3", 195 | "peekViewTitleLabel.foreground": "#333333", 196 | "pickerGroup.border": "#cccedb", 197 | "pickerGroup.foreground": "#0066bf", 198 | "progressBar.background": "#0e70c0", 199 | "quickInput.background": "#f3f3f3", 200 | "scrollbar.shadow": "#dddddd", 201 | "scrollbarSlider.activeBackground": "#00000099", 202 | "scrollbarSlider.background": "#64646466", 203 | "scrollbarSlider.hoverBackground": "#646464b3", 204 | "settings.checkboxBackground": "#ffffff", 205 | "settings.checkboxBorder": "#cecece", 206 | "settings.dropdownBackground": "#ffffff", 207 | "settings.dropdownBorder": "#cecece", 208 | "settings.dropdownListBorder": "#c8c8c8", 209 | "settings.headerForeground": "#444444", 210 | "settings.modifiedItemIndicator": "#66afe0", 211 | "settings.numberInputBackground": "#ffffff", 212 | "settings.numberInputForeground": "#616161", 213 | "settings.textInputBackground": "#ffffff", 214 | "settings.textInputForeground": "#616161", 215 | "sideBar.background": "#f3f3f3", 216 | "sideBar.dropBackground": "#0000001a", 217 | "sideBarSectionHeader.background": "#80808033", 218 | "statusBar.background": "#007acc", 219 | "statusBar.debuggingBackground": "#cc6633", 220 | "statusBar.debuggingForeground": "#ffffff", 221 | "statusBar.foreground": "#ffffff", 222 | "statusBar.noFolderBackground": "#68217a", 223 | "statusBar.noFolderForeground": "#ffffff", 224 | "statusBarItem.activeBackground": "#ffffff2e", 225 | "statusBarItem.hoverBackground": "#ffffff1f", 226 | "statusBarItem.prominentBackground": "#00000080", 227 | "statusBarItem.prominentForeground": "#ffffff", 228 | "statusBarItem.prominentHoverBackground": "#0000004d", 229 | "tab.activeBackground": "#ffffff", 230 | "tab.activeForeground": "#333333", 231 | "tab.activeModifiedBorder": "#33aaee", 232 | "tab.border": "#f3f3f3", 233 | "tab.inactiveBackground": "#ececec", 234 | "tab.inactiveForeground": "#333333b3", 235 | "tab.inactiveModifiedBorder": "#33aaee80", 236 | "tab.unfocusedActiveBackground": "#ffffff", 237 | "tab.unfocusedActiveForeground": "#333333b3", 238 | "tab.unfocusedActiveModifiedBorder": "#33aaeeb3", 239 | "tab.unfocusedInactiveForeground": "#33333359", 240 | "tab.unfocusedInactiveModifiedBorder": "#33aaee40", 241 | "terminal.ansiBlack": "#000000", 242 | "terminal.ansiBlue": "#0451a5", 243 | "terminal.ansiBrightBlack": "#666666", 244 | "terminal.ansiBrightBlue": "#0451a5", 245 | "terminal.ansiBrightCyan": "#0598bc", 246 | "terminal.ansiBrightGreen": "#14ce14", 247 | "terminal.ansiBrightMagenta": "#bc05bc", 248 | "terminal.ansiBrightRed": "#cd3131", 249 | "terminal.ansiBrightWhite": "#a5a5a5", 250 | "terminal.ansiBrightYellow": "#b5ba00", 251 | "terminal.ansiCyan": "#0598bc", 252 | "terminal.ansiGreen": "#00bc00", 253 | "terminal.ansiMagenta": "#bc05bc", 254 | "terminal.ansiRed": "#cd3131", 255 | "terminal.ansiWhite": "#555555", 256 | "terminal.ansiYellow": "#949800", 257 | "terminal.background": "#ffffff", 258 | "terminal.border": "#80808059", 259 | "terminal.foreground": "#333333", 260 | "terminal.selectionBackground": "#00000040", 261 | "textBlockQuote.background": "#7f7f7f1a", 262 | "textBlockQuote.border": "#007acc80", 263 | "textCodeBlock.background": "#dcdcdc66", 264 | "textLink.activeForeground": "#006ab1", 265 | "textLink.foreground": "#006ab1", 266 | "textPreformat.foreground": "#a31515", 267 | "textSeparator.foreground": "#0000002e", 268 | "titleBar.activeBackground": "#dddddd", 269 | "titleBar.activeForeground": "#333333", 270 | "titleBar.inactiveBackground": "#dddddd99", 271 | "titleBar.inactiveForeground": "#33333399", 272 | "tree.indentGuidesStroke": "#a9a9a9", 273 | "widget.shadow": "#a8a8a8" 274 | } 275 | } 276 | -------------------------------------------------------------------------------- /themes/material-light.json5: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Material-Lighter", 3 | "type": "light", 4 | "colors": { 5 | "focusBorder": "#FFFFFF00", 6 | "editorCursor.foreground": "#272727", 7 | "editorRuler.foreground": "#B0BEC5", 8 | "scrollbar.shadow": "#FAFAFA00", 9 | "editorLink.activeForeground": "#90A4AE", 10 | "selection.background": "#80CBC4", 11 | "progressBar.background": "#80CBC4", 12 | "textLink.foreground": "#80CBC4", 13 | "textLink.activeForeground": "#90A4AE", 14 | "widget.shadow": "#00000020", 15 | "button.background": "#80CBC440", 16 | "debugToolBar.background": "#FAFAFA", 17 | "pickerGroup.foreground": "#80CBC4", 18 | "editorLineNumber.foreground": "#CFD8DC", 19 | "editorLineNumber.activeForeground": "#7E939E", 20 | "editorBracketMatch.border": "#27272750", 21 | "editorBracketMatch.background": "#FAFAFA", 22 | "editorWhitespace.foreground": "#90A4AE40", 23 | "editorOverviewRuler.findMatchForeground": "#80CBC4", 24 | "editorOverviewRuler.border": "#FAFAFA", 25 | "editorOverviewRuler.errorForeground": "#E5393540", 26 | "editorOverviewRuler.infoForeground": "#6182B840", 27 | "editorOverviewRuler.warningForeground": "#FFB62C40", 28 | "editorInfo.foreground": "#6182B870", 29 | "editorWarning.foreground": "#FFB62C70", 30 | "editorError.foreground": "#E5393570", 31 | "editorHoverWidget.background": "#FAFAFA", 32 | "editorHoverWidget.border": "#00000010", 33 | "editorIndentGuide.background": "#B0BEC570", 34 | "editorIndentGuide.activeBackground": "#B0BEC5", 35 | "editorGroupHeader.tabsBackground": "#FAFAFA", 36 | "editorGroup.border": "#00000020", 37 | "editorGutter.modifiedBackground": "#6182B860", 38 | "editorGutter.addedBackground": "#91B85960", 39 | "editorGutter.deletedBackground": "#E5393560", 40 | "editor.background": "#FAFAFA", 41 | "editor.foreground": "#90A4AE", 42 | "editor.lineHighlightBackground": "#CCD7DA50", 43 | "editor.selectionBackground": "#80CBC440", 44 | "editor.selectionHighlightBackground": "#27272720", 45 | "editor.findMatchBackground": "#00000020", 46 | "editor.findMatchHighlightBackground": "#00000010", 47 | "editor.findMatchBorder": "#80CBC4", 48 | "editor.findMatchHighlightBorder": "#00000030", 49 | "tab.activeBorder": "#80CBC4", 50 | "tab.activeModifiedBorder": "#7E939E", 51 | "tab.unfocusedActiveBorder": "#90A4AE", 52 | "tab.activeForeground": "#000000", 53 | "tab.inactiveForeground": "#7E939E", 54 | "tab.inactiveBackground": "#FAFAFA", 55 | "tab.unfocusedActiveForeground": "#90A4AE", 56 | "tab.border": "#FAFAFA", 57 | "statusBar.noFolderBackground": "#FAFAFA", 58 | "statusBar.border": "#FAFAFA60", 59 | "statusBar.background": "#FAFAFA", 60 | "statusBar.foreground": "#7E939E", 61 | "statusBar.debuggingBackground": "#7C4DFF", 62 | "statusBar.debuggingForeground": "#FFFFFF", 63 | "statusBarItem.hoverBackground": "#90A4AE20", 64 | "statusBarItem.remoteForeground": "#000000", 65 | "statusBarItem.remoteBackground": "#80CBC4", 66 | "activityBar.background": "#FAFAFA", 67 | "activityBar.border": "#FAFAFA60", 68 | "activityBar.foreground": "#90A4AE", 69 | "activityBarBadge.background": "#80CBC4", 70 | "activityBarBadge.foreground": "#000000", 71 | "titleBar.activeBackground": "#FAFAFA", 72 | "titleBar.activeForeground": "#90A4AE", 73 | "titleBar.inactiveBackground": "#FAFAFA", 74 | "titleBar.inactiveForeground": "#7E939E", 75 | "titleBar.border": "#FAFAFA60", 76 | "sideBar.background": "#FAFAFA", 77 | "sideBar.foreground": "#7E939E", 78 | "sideBar.border": "#FAFAFA60", 79 | "sideBarTitle.foreground": "#90A4AE", 80 | "sideBarSectionHeader.background": "#FAFAFA", 81 | "sideBarSectionHeader.border": "#FAFAFA60", 82 | "input.background": "#EEEEEE", 83 | "input.foreground": "#90A4AE", 84 | "input.placeholderForeground": "#90A4AE60", 85 | "input.border": "#00000010", 86 | "inputValidation.errorBorder": "#E5393550", 87 | "inputValidation.infoBorder": "#6182B850", 88 | "inputValidation.warningBorder": "#FFB62C50", 89 | "dropdown.background": "#FAFAFA", 90 | "dropdown.border": "#00000010", 91 | "list.hoverForeground": "#B1C7D3", 92 | "list.hoverBackground": "#FAFAFA", 93 | "list.activeSelectionBackground": "#FAFAFA", 94 | "list.activeSelectionForeground": "#80CBC4", 95 | "list.inactiveSelectionForeground": "#80CBC4", 96 | "list.inactiveSelectionBackground": "#CCD7DA50", 97 | "list.focusBackground": "#90A4AE20", 98 | "list.focusForeground": "#90A4AE", 99 | "list.highlightForeground": "#80CBC4", 100 | "terminal.ansiWhite": "#FFFFFF", 101 | "terminal.ansiBlack": "#000000", 102 | "terminal.ansiBlue": "#6182B8", 103 | "terminal.ansiCyan": "#39ADB5", 104 | "terminal.ansiGreen": "#91B859", 105 | "terminal.ansiMagenta": "#7C4DFF", 106 | "terminal.ansiRed": "#E53935", 107 | "terminal.ansiYellow": "#FFB62C", 108 | "terminal.ansiBrightWhite": "#FFFFFF", 109 | "terminal.ansiBrightBlack": "#90A4AE", 110 | "terminal.ansiBrightBlue": "#6182B8", 111 | "terminal.ansiBrightCyan": "#39ADB5", 112 | "terminal.ansiBrightGreen": "#91B859", 113 | "terminal.ansiBrightMagenta": "#7C4DFF", 114 | "terminal.ansiBrightRed": "#E53935", 115 | "terminal.ansiBrightYellow": "#FFB62C", 116 | "terminalCursor.foreground": "#FFB62C", 117 | "terminalCursor.background": "#000000", 118 | "scrollbarSlider.background": "#90A4AE20", 119 | "scrollbarSlider.hoverBackground": "#90A4AE10", 120 | "scrollbarSlider.activeBackground": "#80CBC4", 121 | "editorSuggestWidget.background": "#FAFAFA", 122 | "editorSuggestWidget.foreground": "#90A4AE", 123 | "editorSuggestWidget.highlightForeground": "#80CBC4", 124 | "editorSuggestWidget.selectedBackground": "#CCD7DA50", 125 | "editorSuggestWidget.border": "#00000010", 126 | "editorWidget.background": "#FAFAFA", 127 | "editorWidget.resizeBorder": "#80CBC4", 128 | "editorMarkerNavigation.background": "#90A4AE05", 129 | "panel.border": "#FAFAFA60", 130 | "panel.background": "#FAFAFA", 131 | "panel.dropBackground": "#90A4AE", 132 | "panelTitle.inactiveForeground": "#90A4AE", 133 | "panelTitle.activeForeground": "#000000", 134 | "panelTitle.activeBorder": "#80CBC4", 135 | "diffEditor.insertedTextBackground": "#91B85915", 136 | "diffEditor.removedTextBackground": "#E5393520", 137 | "notifications.background": "#FAFAFA", 138 | "notifications.foreground": "#90A4AE", 139 | "notificationLink.foreground": "#80CBC4", 140 | "badge.background": "#CCD7DA30", 141 | "badge.foreground": "#90A4AE", 142 | "extensionButton.prominentBackground": "#91B85990", 143 | "extensionButton.prominentHoverBackground": "#91B859", 144 | "peekView.border": "#00000020", 145 | "peekViewEditor.background": "#90A4AE05", 146 | "peekViewTitle.background": "#90A4AE05", 147 | "peekViewResult.background": "#90A4AE05", 148 | "peekViewEditorGutter.background": "#90A4AE05", 149 | "peekViewTitleDescription.foreground": "#90A4AE60", 150 | "peekViewResult.matchHighlightBackground": "#80CBC440", 151 | "peekViewEditor.matchHighlightBackground": "#80CBC440", 152 | "gitDecoration.deletedResourceForeground": "#E5393590", 153 | "gitDecoration.conflictingResourceForeground": "#FFB62C90", 154 | "gitDecoration.modifiedResourceForeground": "#6182B890", 155 | "gitDecoration.untrackedResourceForeground": "#91B85990", 156 | "gitDecoration.ignoredResourceForeground": "#7E939E90", 157 | "peekViewResult.selectionBackground": "#7E939E70", 158 | "breadcrumb.background": "#FAFAFA", 159 | "breadcrumb.foreground": "#7E939E", 160 | "breadcrumb.focusForeground": "#90A4AE", 161 | "breadcrumb.activeSelectionForeground": "#80CBC4", 162 | "breadcrumbPicker.background": "#FAFAFA", 163 | "menu.background": "#FAFAFA", 164 | "menu.foreground": "#90A4AE", 165 | "menu.selectionBackground": "#CCD7DA50", 166 | "menu.selectionForeground": "#80CBC4", 167 | "menu.selectionBorder": "#CCD7DA50", 168 | "menu.separatorBackground": "#90A4AE", 169 | "menubar.selectionBackground": "#CCD7DA50", 170 | "menubar.selectionForeground": "#80CBC4", 171 | "menubar.selectionBorder": "#CCD7DA50", 172 | "settings.dropdownForeground": "#90A4AE", 173 | "settings.dropdownBackground": "#FAFAFA", 174 | "settings.numberInputForeground": "#90A4AE", 175 | "settings.numberInputBackground": "#FAFAFA", 176 | "settings.textInputForeground": "#90A4AE", 177 | "settings.textInputBackground": "#FAFAFA", 178 | "settings.headerForeground": "#80CBC4", 179 | "settings.modifiedItemIndicator": "#80CBC4", 180 | "settings.checkboxBackground": "#FAFAFA", 181 | "settings.checkboxForeground": "#90A4AE", 182 | "listFilterWidget.background": "#CCD7DA50", 183 | "listFilterWidget.outline": "#CCD7DA50", 184 | "listFilterWidget.noMatchesOutline": "#CCD7DA50", 185 | "tree.indentGuidesStroke": "#B0BEC5" 186 | } 187 | } -------------------------------------------------------------------------------- /themes/monokai.json5: -------------------------------------------------------------------------------- 1 | { 2 | "name": "monokai", 3 | "type": "dark", 4 | "colors": { 5 | "dropdown.background": "#414339", 6 | "list.activeSelectionBackground": "#75715E", 7 | "list.focusBackground": "#414339", 8 | "dropdown.listBackground": "#1e1f1c", 9 | "settings.textInputBackground": "#32342d", 10 | "settings.numberInputBackground": "#32342d", 11 | "list.inactiveSelectionBackground": "#414339", 12 | "list.hoverBackground": "#3e3d32", 13 | "list.dropBackground": "#414339", 14 | "list.highlightForeground": "#f8f8f2", 15 | "button.background": "#75715E", 16 | "editor.background": "#272822", 17 | "editor.foreground": "#f8f8f2", 18 | "selection.background": "#ccccc7", 19 | "editor.selectionHighlightBackground": "#575b6180", 20 | "editor.selectionBackground": "#878b9180", 21 | "editor.wordHighlightBackground": "#4a4a7680", 22 | "editor.wordHighlightStrongBackground": "#6a6a9680", 23 | "editor.lineHighlightBackground": "#3e3d32", 24 | "editorLineNumber.activeForeground": "#c2c2bf", 25 | "editorCursor.foreground": "#f8f8f0", 26 | "editorWhitespace.foreground": "#464741", 27 | "editorIndentGuide.background": "#464741", 28 | "editorIndentGuide.activeBackground": "#767771", 29 | "editorGroupHeader.tabsBackground": "#1e1f1c", 30 | "editorGroup.dropBackground": "#41433980", 31 | "tab.inactiveBackground": "#34352f", 32 | "tab.border": "#1e1f1c", 33 | "tab.modifiedBorder": "#007acc", 34 | "tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused 35 | "widget.shadow": "#000000", 36 | "progressBar.background": "#75715E", 37 | "badge.background": "#75715E", 38 | "badge.foreground": "#f8f8f2", 39 | "editorLineNumber.foreground": "#90908a", 40 | "panelTitle.activeForeground": "#f8f8f2", 41 | "panelTitle.activeBorder": "#75715E", 42 | "panelTitle.inactiveForeground": "#75715E", 43 | "panel.border": "#414339", 44 | "titleBar.activeBackground": "#1e1f1c", 45 | "statusBar.background": "#414339", 46 | "statusBar.noFolderBackground": "#414339", 47 | "statusBar.debuggingBackground": "#75715E", 48 | "statusBarItem.remoteBackground": "#AC6218", 49 | "activityBar.background": "#272822", 50 | "activityBar.foreground": "#f8f8f2", 51 | "activityBar.dropBackground": "#414339", 52 | "sideBar.background": "#1e1f1c", 53 | "sideBarSectionHeader.background": "#272822", 54 | "menu.background": "#1e1f1c", 55 | "menu.foreground": "#cccccc", 56 | "pickerGroup.foreground": "#75715E", 57 | "input.background": "#414339", 58 | "inputOption.activeBorder": "#75715E", 59 | "focusBorder": "#75715E", 60 | "editorWidget.background": "#1e1f1c", 61 | "debugToolBar.background": "#1e1f1c", 62 | "diffEditor.insertedTextBackground": "#66852880", // middle of #272822 and #a6e22e 63 | "diffEditor.removedTextBackground": "#90274A80", // middle of #272822 and #f92672 64 | "inputValidation.errorBackground": "#90274A", // middle of #272822 and #f92672 65 | "inputValidation.errorBorder": "#f92672", 66 | "inputValidation.warningBackground": "#848528", // middle of #272822 and #e2e22e 67 | "inputValidation.warningBorder": "#e2e22e", 68 | "inputValidation.infoBackground": "#546190", // middle of #272822 and #819aff 69 | "inputValidation.infoBorder": "#819aff", 70 | "editorHoverWidget.background": "#414339", 71 | "editorHoverWidget.border": "#75715E", 72 | "editorSuggestWidget.background": "#272822", 73 | "editorSuggestWidget.border": "#75715E", 74 | "editorGroup.border": "#34352f", 75 | "peekView.border": "#75715E", 76 | "peekViewEditor.background": "#272822", 77 | "peekViewResult.background": "#1e1f1c", 78 | "peekViewTitle.background": "#1e1f1c", 79 | "peekViewResult.selectionBackground": "#414339", 80 | "peekViewResult.matchHighlightBackground": "#75715E", 81 | "peekViewEditor.matchHighlightBackground": "#75715E", 82 | "terminal.ansiBlack": "#333333", 83 | "terminal.ansiRed": "#C4265E", // the bright color with ~75% transparent on the background 84 | "terminal.ansiGreen": "#86B42B", 85 | "terminal.ansiYellow": "#B3B42B", 86 | "terminal.ansiBlue": "#6A7EC8", 87 | "terminal.ansiMagenta": "#8C6BC8", 88 | "terminal.ansiCyan": "#56ADBC", 89 | "terminal.ansiWhite": "#e3e3dd", 90 | "terminal.ansiBrightBlack": "#666666", 91 | "terminal.ansiBrightRed": "#f92672", 92 | "terminal.ansiBrightGreen": "#A6E22E", 93 | "terminal.ansiBrightYellow": "#e2e22e", // hue shifted #A6E22E 94 | "terminal.ansiBrightBlue": "#819aff", // hue shifted #AE81FF 95 | "terminal.ansiBrightMagenta": "#AE81FF", 96 | "terminal.ansiBrightCyan": "#66D9EF", 97 | "terminal.ansiBrightWhite": "#f8f8f2" 98 | }, 99 | "tokenColors": [ 100 | { 101 | "settings": { 102 | "background": "#272822", 103 | "foreground": "#F8F8F2" 104 | } 105 | }, 106 | { 107 | "scope": ["meta.embedded", "source.groovy.embedded"], 108 | "settings": { 109 | "background": "#272822", 110 | "foreground": "#F8F8F2" 111 | } 112 | }, 113 | { 114 | "name": "Comment", 115 | "scope": "comment", 116 | "settings": { 117 | "foreground": "#75715E" 118 | } 119 | }, 120 | { 121 | "name": "String", 122 | "scope": "string", 123 | "settings": { 124 | "foreground": "#E6DB74" 125 | } 126 | }, 127 | { 128 | "name": "Template Definition", 129 | "scope": ["punctuation.definition.template-expression", "punctuation.section.embedded"], 130 | "settings": { 131 | "foreground": "#F92672" 132 | } 133 | }, 134 | { 135 | "name": "Reset JavaScript string interpolation expression", 136 | "scope": ["meta.template.expression"], 137 | "settings": { 138 | "foreground": "#F8F8F2" 139 | } 140 | }, 141 | { 142 | "name": "Number", 143 | "scope": "constant.numeric", 144 | "settings": { 145 | "foreground": "#AE81FF" 146 | } 147 | }, 148 | { 149 | "name": "Built-in constant", 150 | "scope": "constant.language", 151 | "settings": { 152 | "foreground": "#AE81FF" 153 | } 154 | }, 155 | { 156 | "name": "User-defined constant", 157 | "scope": "constant.character, constant.other", 158 | "settings": { 159 | "foreground": "#AE81FF" 160 | } 161 | }, 162 | { 163 | "name": "Variable", 164 | "scope": "variable", 165 | "settings": { 166 | "fontStyle": "", 167 | "foreground": "#F8F8F2" 168 | } 169 | }, 170 | { 171 | "name": "Keyword", 172 | "scope": "keyword", 173 | "settings": { 174 | "foreground": "#F92672" 175 | } 176 | }, 177 | { 178 | "name": "Storage", 179 | "scope": "storage", 180 | "settings": { 181 | "fontStyle": "", 182 | "foreground": "#F92672" 183 | } 184 | }, 185 | { 186 | "name": "Storage type", 187 | "scope": "storage.type", 188 | "settings": { 189 | "fontStyle": "italic", 190 | "foreground": "#66D9EF" 191 | } 192 | }, 193 | { 194 | "name": "Class name", 195 | "scope": "entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution", 196 | "settings": { 197 | "fontStyle": "underline", 198 | "foreground": "#A6E22E" 199 | } 200 | }, 201 | { 202 | "name": "Inherited class", 203 | "scope": "entity.other.inherited-class", 204 | "settings": { 205 | "fontStyle": "italic underline", 206 | "foreground": "#A6E22E" 207 | } 208 | }, 209 | { 210 | "name": "Function name", 211 | "scope": "entity.name.function", 212 | "settings": { 213 | "fontStyle": "", 214 | "foreground": "#A6E22E" 215 | } 216 | }, 217 | { 218 | "name": "Function argument", 219 | "scope": "variable.parameter", 220 | "settings": { 221 | "fontStyle": "italic", 222 | "foreground": "#FD971F" 223 | } 224 | }, 225 | { 226 | "name": "Tag name", 227 | "scope": "entity.name.tag", 228 | "settings": { 229 | "fontStyle": "", 230 | "foreground": "#F92672" 231 | } 232 | }, 233 | { 234 | "name": "Tag attribute", 235 | "scope": "entity.other.attribute-name", 236 | "settings": { 237 | "fontStyle": "", 238 | "foreground": "#A6E22E" 239 | } 240 | }, 241 | { 242 | "name": "Library function", 243 | "scope": "support.function", 244 | "settings": { 245 | "fontStyle": "", 246 | "foreground": "#66D9EF" 247 | } 248 | }, 249 | { 250 | "name": "Library constant", 251 | "scope": "support.constant", 252 | "settings": { 253 | "fontStyle": "", 254 | "foreground": "#66D9EF" 255 | } 256 | }, 257 | { 258 | "name": "Library class/type", 259 | "scope": "support.type, support.class", 260 | "settings": { 261 | "fontStyle": "italic", 262 | "foreground": "#66D9EF" 263 | } 264 | }, 265 | { 266 | "name": "Library variable", 267 | "scope": "support.other.variable", 268 | "settings": { 269 | "fontStyle": "" 270 | } 271 | }, 272 | { 273 | "name": "Invalid", 274 | "scope": "invalid", 275 | "settings": { 276 | "background": "#F92672", 277 | "fontStyle": "", 278 | "foreground": "#F8F8F0" 279 | } 280 | }, 281 | { 282 | "name": "Invalid deprecated", 283 | "scope": "invalid.deprecated", 284 | "settings": { 285 | "background": "#AE81FF", 286 | "foreground": "#F8F8F0" 287 | } 288 | }, 289 | { 290 | "name": "JSON String", 291 | "scope": "meta.structure.dictionary.json string.quoted.double.json", 292 | "settings": { 293 | "foreground": "#CFCFC2" 294 | } 295 | }, 296 | { 297 | "name": "diff.header", 298 | "scope": "meta.diff, meta.diff.header", 299 | "settings": { 300 | "foreground": "#75715E" 301 | } 302 | }, 303 | { 304 | "name": "diff.deleted", 305 | "scope": "markup.deleted", 306 | "settings": { 307 | "foreground": "#F92672" 308 | } 309 | }, 310 | { 311 | "name": "diff.inserted", 312 | "scope": "markup.inserted", 313 | "settings": { 314 | "foreground": "#A6E22E" 315 | } 316 | }, 317 | { 318 | "name": "diff.changed", 319 | "scope": "markup.changed", 320 | "settings": { 321 | "foreground": "#E6DB74" 322 | } 323 | }, 324 | { 325 | "scope": "constant.numeric.line-number.find-in-files - match", 326 | "settings": { 327 | "foreground": "#AE81FFA0" 328 | } 329 | }, 330 | { 331 | "scope": "entity.name.filename.find-in-files", 332 | "settings": { 333 | "foreground": "#E6DB74" 334 | } 335 | }, 336 | { 337 | "name": "Markup Quote", 338 | "scope": "markup.quote", 339 | "settings": { 340 | "foreground": "#F92672" 341 | } 342 | }, 343 | { 344 | "name": "Markup Lists", 345 | "scope": "markup.list", 346 | "settings": { 347 | "foreground": "#E6DB74" 348 | } 349 | }, 350 | { 351 | "name": "Markup Styling", 352 | "scope": "markup.bold, markup.italic", 353 | "settings": { 354 | "foreground": "#66D9EF" 355 | } 356 | }, 357 | { 358 | "name": "Markup Inline", 359 | "scope": "markup.inline.raw", 360 | "settings": { 361 | "fontStyle": "", 362 | "foreground": "#FD971F" 363 | } 364 | }, 365 | { 366 | "name": "Markup Headings", 367 | "scope": "markup.heading", 368 | "settings": { 369 | "foreground": "#A6E22E" 370 | } 371 | }, 372 | { 373 | "name": "Markup Setext Header", 374 | "scope": "markup.heading.setext", 375 | "settings": { 376 | "fontStyle": "", 377 | "foreground": "#A6E22E" 378 | } 379 | }, 380 | { 381 | "scope": "token.info-token", 382 | "settings": { 383 | "foreground": "#6796e6" 384 | } 385 | }, 386 | { 387 | "scope": "token.warn-token", 388 | "settings": { 389 | "foreground": "#cd9731" 390 | } 391 | }, 392 | { 393 | "scope": "token.error-token", 394 | "settings": { 395 | "foreground": "#f44747" 396 | } 397 | }, 398 | { 399 | "scope": "token.debug-token", 400 | "settings": { 401 | "foreground": "#b267e6" 402 | } 403 | }, 404 | { 405 | "name": "this.self", 406 | "scope": "variable.language", 407 | "settings": { 408 | "foreground": "#FD971F" 409 | } 410 | } 411 | ] 412 | } 413 | -------------------------------------------------------------------------------- /themes/solarized-dark.json5: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solarized-dark", 3 | "tokenColors": [ 4 | { 5 | "settings": { 6 | "background": "#002B36", 7 | "foreground": "#93A1A1" 8 | } 9 | }, 10 | { 11 | "scope": ["meta.embedded", "source.groovy.embedded"], 12 | "settings": { 13 | "background": "#002B36", 14 | "foreground": "#93A1A1" 15 | } 16 | }, 17 | { 18 | "name": "Comment", 19 | "scope": "comment", 20 | "settings": { 21 | "fontStyle": "italic", 22 | "foreground": "#657B83" 23 | } 24 | }, 25 | { 26 | "name": "String", 27 | "scope": "string", 28 | "settings": { 29 | "foreground": "#2AA198" 30 | } 31 | }, 32 | { 33 | "name": "Regexp", 34 | "scope": "string.regexp", 35 | "settings": { 36 | "foreground": "#D30102" 37 | } 38 | }, 39 | { 40 | "name": "Number", 41 | "scope": "constant.numeric", 42 | "settings": { 43 | "foreground": "#D33682" 44 | } 45 | }, 46 | { 47 | "name": "Variable", 48 | "scope": [ 49 | "variable.language", 50 | "variable.other" 51 | ], 52 | "settings": { 53 | "foreground": "#268BD2" 54 | } 55 | }, 56 | { 57 | "name": "Keyword", 58 | "scope": "keyword", 59 | "settings": { 60 | "foreground": "#859900" 61 | } 62 | }, 63 | { 64 | "name": "Storage", 65 | "scope": "storage", 66 | "settings": { 67 | "fontStyle": "bold", 68 | "foreground": "#93A1A1" 69 | } 70 | }, 71 | { 72 | "name": "Class name", 73 | "scope": [ 74 | "entity.name.class", 75 | "entity.name.type", 76 | "entity.name.namespace", 77 | "entity.name.scope-resolution" 78 | ], 79 | "settings": { 80 | "fontStyle": "", 81 | "foreground": "#CB4B16" 82 | } 83 | }, 84 | { 85 | "name": "Function name", 86 | "scope": "entity.name.function", 87 | "settings": { 88 | "foreground": "#268BD2" 89 | } 90 | }, 91 | { 92 | "name": "Variable start", 93 | "scope": "punctuation.definition.variable", 94 | "settings": { 95 | "foreground": "#859900" 96 | } 97 | }, 98 | { 99 | "name": "Embedded code markers", 100 | "scope": [ 101 | "punctuation.section.embedded.begin", 102 | "punctuation.section.embedded.end" 103 | ], 104 | "settings": { 105 | "foreground": "#D30102" 106 | } 107 | }, 108 | { 109 | "name": "Built-in constant", 110 | "scope": [ 111 | "constant.language", 112 | "meta.preprocessor" 113 | ], 114 | "settings": { 115 | "foreground": "#B58900" 116 | } 117 | }, 118 | { 119 | "name": "Support.construct", 120 | "scope": [ 121 | "support.function.construct", 122 | "keyword.other.new" 123 | ], 124 | "settings": { 125 | "foreground": "#CB4B16" 126 | } 127 | }, 128 | { 129 | "name": "User-defined constant", 130 | "scope": [ 131 | "constant.character", 132 | "constant.other" 133 | ], 134 | "settings": { 135 | "foreground": "#CB4B16" 136 | } 137 | }, 138 | { 139 | "name": "Inherited class", 140 | "scope": "entity.other.inherited-class", 141 | "settings": { 142 | "foreground": "#6C71C4" 143 | } 144 | }, 145 | { 146 | "name": "Function argument", 147 | "scope": "variable.parameter", 148 | "settings": {} 149 | }, 150 | { 151 | "name": "Tag name", 152 | "scope": "entity.name.tag", 153 | "settings": { 154 | "foreground": "#268BD2" 155 | } 156 | }, 157 | { 158 | "name": "Tag start/end", 159 | "scope": "punctuation.definition.tag", 160 | "settings": { 161 | "foreground": "#657B83" 162 | } 163 | }, 164 | { 165 | "name": "Tag attribute", 166 | "scope": "entity.other.attribute-name", 167 | "settings": { 168 | "foreground": "#93A1A1" 169 | } 170 | }, 171 | { 172 | "name": "Library function", 173 | "scope": "support.function", 174 | "settings": { 175 | "foreground": "#268BD2" 176 | } 177 | }, 178 | { 179 | "name": "Continuation", 180 | "scope": "punctuation.separator.continuation", 181 | "settings": { 182 | "foreground": "#D30102" 183 | } 184 | }, 185 | { 186 | "name": "Library constant", 187 | "scope": "support.constant", 188 | "settings": {} 189 | }, 190 | { 191 | "name": "Library class/type", 192 | "scope": [ 193 | "support.type", 194 | "support.class" 195 | ], 196 | "settings": { 197 | "foreground": "#859900" 198 | } 199 | }, 200 | { 201 | "name": "Library Exception", 202 | "scope": "support.type.exception", 203 | "settings": { 204 | "foreground": "#CB4B16" 205 | } 206 | }, 207 | { 208 | "name": "Library variable", 209 | "scope": "support.other.variable", 210 | "settings": {} 211 | }, 212 | { 213 | "name": "Invalid", 214 | "scope": "invalid", 215 | "settings": {} 216 | }, 217 | { 218 | "name": "diff: header", 219 | "scope": [ 220 | "meta.diff", 221 | "meta.diff.header" 222 | ], 223 | "settings": { 224 | "background": "#b58900", 225 | "fontStyle": "italic", 226 | "foreground": "#E0EDDD" 227 | } 228 | }, 229 | { 230 | "name": "diff: deleted", 231 | "scope": "markup.deleted", 232 | "settings": { 233 | "background": "#eee8d5", 234 | "fontStyle": "", 235 | "foreground": "#dc322f" 236 | } 237 | }, 238 | { 239 | "name": "diff: changed", 240 | "scope": "markup.changed", 241 | "settings": { 242 | "background": "#eee8d5", 243 | "fontStyle": "", 244 | "foreground": "#cb4b16" 245 | } 246 | }, 247 | { 248 | "name": "diff: inserted", 249 | "scope": "markup.inserted", 250 | "settings": { 251 | "background": "#eee8d5", 252 | "foreground": "#219186" 253 | } 254 | }, 255 | { 256 | "name": "Markup Quote", 257 | "scope": "markup.quote", 258 | "settings": { 259 | "foreground": "#859900" 260 | } 261 | }, 262 | { 263 | "name": "Markup Lists", 264 | "scope": "markup.list", 265 | "settings": { 266 | "foreground": "#B58900" 267 | } 268 | }, 269 | { 270 | "name": "Markup Styling", 271 | "scope": [ 272 | "markup.bold", 273 | "markup.italic" 274 | ], 275 | "settings": { 276 | "foreground": "#D33682" 277 | } 278 | }, 279 | { 280 | "name": "Markup Inline", 281 | "scope": "markup.inline.raw", 282 | "settings": { 283 | "fontStyle": "", 284 | "foreground": "#2AA198" 285 | } 286 | }, 287 | { 288 | "name": "Markup Headings", 289 | "scope": "markup.heading", 290 | "settings": { 291 | "foreground": "#268BD2" 292 | } 293 | }, 294 | { 295 | "name": "Markup Setext Header", 296 | "scope": "markup.heading.setext", 297 | "settings": { 298 | "fontStyle": "", 299 | "foreground": "#268BD2" 300 | } 301 | } 302 | ], 303 | "colors": { 304 | 305 | // Base 306 | // "foreground": "", 307 | "focusBorder": "#2AA19899", 308 | // "contrastActiveBorder": "", 309 | // "contrastBorder": "", 310 | 311 | // "widget.shadow": "", 312 | 313 | "selection.background": "#2AA19899", 314 | 315 | "input.background": "#003847", 316 | "input.foreground": "#93A1A1", 317 | "input.placeholderForeground": "#93A1A1AA", 318 | // "input.border": "", 319 | 320 | "inputOption.activeBorder": "#2AA19899", 321 | "inputValidation.infoBorder": "#363b5f", 322 | "inputValidation.infoBackground": "#052730", 323 | "inputValidation.warningBackground": "#5d5938", 324 | "inputValidation.warningBorder": "#9d8a5e", 325 | "inputValidation.errorBackground": "#571b26", 326 | "inputValidation.errorBorder": "#a92049", 327 | 328 | "errorForeground": "#ffeaea", 329 | 330 | "badge.background": "#047aa6", 331 | "progressBar.background": "#047aa6", 332 | 333 | "dropdown.background": "#00212B", 334 | "dropdown.border": "#2AA19899", 335 | // "dropdown.foreground": "", 336 | 337 | "button.background": "#2AA19899", 338 | // "button.foreground": "", 339 | 340 | "list.activeSelectionBackground": "#005A6F", 341 | // "list.activeSelectionForeground": "", 342 | "list.focusBackground": "#005A6F", 343 | "list.hoverBackground": "#004454AA", 344 | "list.inactiveSelectionBackground": "#00445488", 345 | "list.dropBackground": "#00445488", 346 | "list.highlightForeground": "#1ebcc5", 347 | 348 | // "scrollbar.shadow": "", 349 | // "scrollbarSlider.activeBackground": "", 350 | // "scrollbarSlider.background": "", 351 | // "scrollbarSlider.hoverBackground": "", 352 | 353 | // Editor 354 | "editor.background": "#002B36", 355 | // "editor.foreground": "#6688cc", 356 | "editorWidget.background": "#00212B", 357 | "editorCursor.foreground": "#D30102", 358 | "editorWhitespace.foreground": "#93A1A180", 359 | "editor.lineHighlightBackground": "#073642", 360 | "editorLineNumber.activeForeground": "#949494", 361 | "editor.selectionBackground": "#274642", 362 | "editorIndentGuide.background": "#93A1A180", 363 | "editorIndentGuide.activeBackground": "#C3E1E180", 364 | "editorHoverWidget.background": "#004052", 365 | // "editorHoverWidget.border": "", 366 | // "editorLineNumber.foreground": "", 367 | // "editorMarkerNavigation.background": "", 368 | "editorMarkerNavigationError.background": "#AB395B", 369 | "editorMarkerNavigationWarning.background": "#5B7E7A", 370 | // "editorLink.activeForeground": "", 371 | // "editor.findMatchBackground": "", 372 | // "editor.findMatchHighlightBackground": "", 373 | // "editor.findRangeHighlightBackground": "", 374 | // "editor.hoverHighlightBackground": "", 375 | // "editor.inactiveSelectionBackground": "", 376 | // "editor.lineHighlightBorder": "", 377 | // "editor.rangeHighlightBackground": "", 378 | "editor.selectionHighlightBackground": "#005A6FAA", 379 | "editor.wordHighlightBackground": "#004454AA", 380 | "editor.wordHighlightStrongBackground": "#005A6FAA", 381 | 382 | // Editor: Suggest 383 | // "editorSuggestWidget.background": "", 384 | // "editorSuggestWidget.border": "", 385 | // "editorSuggestWidget.foreground": "", 386 | // "editorSuggestWidget.highlightForeground": "", 387 | // "editorSuggestWidget.selectedBackground": "", 388 | 389 | // Editor: Peek View 390 | "peekViewResult.background": "#00212B", 391 | // "peekViewResult.lineForeground": "", 392 | // "peekViewResult.selectionBackground": "", 393 | // "peekViewResult.selectionForeground": "", 394 | "peekViewEditor.background": "#10192c", 395 | "peekViewTitle.background": "#00212B", 396 | "peekView.border": "#2b2b4a", 397 | "peekViewEditor.matchHighlightBackground": "#7744AA40", 398 | // "peekViewResult.fileForeground": "", 399 | // "peekViewResult.matchHighlightBackground": "", 400 | // "peekViewTitleLabel.foreground": "", 401 | // "peekViewTitleDescription.foreground": "", 402 | 403 | // Editor: Diff 404 | // "diffEditor.insertedTextBackground": "", 405 | // "diffEditor.insertedTextBorder": "", 406 | // "diffEditor.removedTextBackground": "", 407 | // "diffEditor.removedTextBorder": "", 408 | 409 | // Workbench: Title 410 | "titleBar.activeBackground": "#002C39", 411 | // "titleBar.inactiveBackground": "", 412 | // "titleBar.activeForeground": "", 413 | // "titleBar.inactiveForeground": "", 414 | 415 | // Workbench: Editors 416 | // "editorGroupHeader.noTabsBackground": "", 417 | "editorGroup.border": "#00212B", 418 | "editorGroup.dropBackground": "#2AA19844", 419 | "editorGroupHeader.tabsBackground": "#004052", 420 | 421 | // Workbench: Tabs 422 | "tab.activeForeground": "#d6dbdb", 423 | "tab.activeBackground": "#002B37", 424 | "tab.inactiveForeground": "#93A1A1", 425 | "tab.inactiveBackground": "#004052", 426 | "tab.border": "#003847", 427 | "tab.modifiedBorder": "#268bd2", 428 | 429 | // Workbench: Activity Bar 430 | "activityBar.background": "#003847", 431 | // "activityBarBadge.background": "", 432 | // "activityBar.dropBackground": "", 433 | // "activityBar.foreground": "", 434 | // "activityBarBadge.foreground": "", 435 | 436 | // Workbench: Panel 437 | // "panel.background": "", 438 | "panel.border": "#2b2b4a", 439 | // "panelTitle.activeBorder": "", 440 | // "panelTitle.activeForeground": "", 441 | // "panelTitle.inactiveForeground": "", 442 | 443 | // Workbench: Side Bar 444 | "sideBar.background": "#00212B", 445 | "sideBarTitle.foreground": "#93A1A1", 446 | // "sideBarSectionHeader.background": "", 447 | 448 | // Workbench: Status Bar 449 | "statusBar.foreground": "#93A1A1", 450 | "statusBar.background": "#00212B", 451 | "statusBar.debuggingBackground": "#00212B", 452 | "statusBar.noFolderBackground": "#00212B", 453 | "statusBarItem.remoteBackground": "#2AA19899", 454 | "statusBarItem.prominentBackground": "#003847", 455 | "statusBarItem.prominentHoverBackground": "#003847", 456 | // "statusBarItem.activeBackground": "", 457 | // "statusBarItem.hoverBackground": "", 458 | 459 | // Workbench: Debug 460 | "debugToolBar.background": "#00212B", 461 | "debugExceptionWidget.background": "#00212B", 462 | "debugExceptionWidget.border": "#AB395B", 463 | 464 | // Workbench: Quick Open 465 | "pickerGroup.foreground": "#2AA19899", 466 | "pickerGroup.border": "#2AA19899", 467 | 468 | // Workbench: Terminal 469 | // Colors sourced from the official palette http://ethanschoonover.com/solarized 470 | "terminal.ansiBlack": "#073642", 471 | "terminal.ansiRed": "#dc322f", 472 | "terminal.ansiGreen": "#859900", 473 | "terminal.ansiYellow": "#b58900", 474 | "terminal.ansiBlue": "#268bd2", 475 | "terminal.ansiMagenta": "#d33682", 476 | "terminal.ansiCyan": "#2aa198", 477 | "terminal.ansiWhite": "#eee8d5", 478 | "terminal.ansiBrightBlack": "#586e75", 479 | "terminal.ansiBrightRed": "#cb4b16", 480 | "terminal.ansiBrightGreen": "#586e75", 481 | "terminal.ansiBrightYellow": "#657b83", 482 | "terminal.ansiBrightBlue": "#839496", 483 | "terminal.ansiBrightMagenta": "#6c71c4", 484 | "terminal.ansiBrightCyan": "#93a1a1", 485 | "terminal.ansiBrightWhite": "#fdf6e3" 486 | } 487 | } 488 | -------------------------------------------------------------------------------- /themes/solarized-light.json5: -------------------------------------------------------------------------------- 1 | { 2 | "name": "solarized-light", 3 | "tokenColors": [ 4 | { 5 | "settings": { 6 | "background": "#FDF6E3", 7 | "foreground": "#657B83" 8 | } 9 | }, 10 | { 11 | "scope": ["meta.embedded", "source.groovy.embedded"], 12 | "settings": { 13 | "background": "#FDF6E3", 14 | "foreground": "#657B83" 15 | } 16 | }, 17 | { 18 | "name": "Comment", 19 | "scope": "comment", 20 | "settings": { 21 | "fontStyle": "italic", 22 | "foreground": "#93A1A1" 23 | } 24 | }, 25 | { 26 | "name": "String", 27 | "scope": "string", 28 | "settings": { 29 | "foreground": "#2AA198" 30 | } 31 | }, 32 | { 33 | "name": "Regexp", 34 | "scope": "string.regexp", 35 | "settings": { 36 | "foreground": "#D30102" 37 | } 38 | }, 39 | { 40 | "name": "Number", 41 | "scope": "constant.numeric", 42 | "settings": { 43 | "foreground": "#D33682" 44 | } 45 | }, 46 | { 47 | "name": "Variable", 48 | "scope": [ 49 | "variable.language", 50 | "variable.other" 51 | ], 52 | "settings": { 53 | "foreground": "#268BD2" 54 | } 55 | }, 56 | { 57 | "name": "Keyword", 58 | "scope": "keyword", 59 | "settings": { 60 | "foreground": "#859900" 61 | } 62 | }, 63 | { 64 | "name": "Storage", 65 | "scope": "storage", 66 | "settings": { 67 | "fontStyle": "bold", 68 | "foreground": "#073642" 69 | } 70 | }, 71 | { 72 | "name": "Class name", 73 | "scope": [ 74 | "entity.name.class", 75 | "entity.name.type", 76 | "entity.name.namespace", 77 | "entity.name.scope-resolution" 78 | ], 79 | "settings": { 80 | "foreground": "#268BD2" 81 | } 82 | }, 83 | { 84 | "name": "Function name", 85 | "scope": "entity.name.function", 86 | "settings": { 87 | "foreground": "#268BD2" 88 | } 89 | }, 90 | { 91 | "name": "Variable start", 92 | "scope": "punctuation.definition.variable", 93 | "settings": { 94 | "foreground": "#859900" 95 | } 96 | }, 97 | { 98 | "name": "Embedded code markers", 99 | "scope": [ 100 | "punctuation.section.embedded.begin", 101 | "punctuation.section.embedded.end" 102 | ], 103 | "settings": { 104 | "foreground": "#D30102" 105 | } 106 | }, 107 | { 108 | "name": "Built-in constant", 109 | "scope": [ 110 | "constant.language", 111 | "meta.preprocessor" 112 | ], 113 | "settings": { 114 | "foreground": "#B58900" 115 | } 116 | }, 117 | { 118 | "name": "Support.construct", 119 | "scope": [ 120 | "support.function.construct", 121 | "keyword.other.new" 122 | ], 123 | "settings": { 124 | "foreground": "#D30102" 125 | } 126 | }, 127 | { 128 | "name": "User-defined constant", 129 | "scope": [ 130 | "constant.character", 131 | "constant.other" 132 | ], 133 | "settings": { 134 | "foreground": "#CB4B16" 135 | } 136 | }, 137 | { 138 | "name": "Inherited class", 139 | "scope": "entity.other.inherited-class", 140 | "settings": {} 141 | }, 142 | { 143 | "name": "Function argument", 144 | "scope": "variable.parameter", 145 | "settings": {} 146 | }, 147 | { 148 | "name": "Tag name", 149 | "scope": "entity.name.tag", 150 | "settings": { 151 | "foreground": "#268BD2" 152 | } 153 | }, 154 | { 155 | "name": "Tag start/end", 156 | "scope": [ 157 | "punctuation.definition.tag.begin", 158 | "punctuation.definition.tag.end" 159 | ], 160 | "settings": { 161 | "foreground": "#93A1A1" 162 | } 163 | }, 164 | { 165 | "name": "Tag attribute", 166 | "scope": "entity.other.attribute-name", 167 | "settings": { 168 | "foreground": "#93A1A1" 169 | } 170 | }, 171 | { 172 | "name": "Library function", 173 | "scope": "support.function", 174 | "settings": { 175 | "foreground": "#268BD2" 176 | } 177 | }, 178 | { 179 | "name": "Continuation", 180 | "scope": "punctuation.separator.continuation", 181 | "settings": { 182 | "foreground": "#D30102" 183 | } 184 | }, 185 | { 186 | "name": "Library constant", 187 | "scope": "support.constant", 188 | "settings": {} 189 | }, 190 | { 191 | "name": "Library class/type", 192 | "scope": [ 193 | "support.type", 194 | "support.class" 195 | ], 196 | "settings": { 197 | "foreground": "#859900" 198 | } 199 | }, 200 | { 201 | "name": "Library Exception", 202 | "scope": "support.type.exception", 203 | "settings": { 204 | "foreground": "#CB4B16" 205 | } 206 | }, 207 | { 208 | "name": "Library variable", 209 | "scope": "support.other.variable", 210 | "settings": {} 211 | }, 212 | { 213 | "name": "Invalid", 214 | "scope": "invalid", 215 | "settings": {} 216 | }, 217 | { 218 | "name": "diff: header", 219 | "scope": [ 220 | "meta.diff", 221 | "meta.diff.header" 222 | ], 223 | "settings": { 224 | "fontStyle": "italic", 225 | "foreground": "#268bd2" 226 | } 227 | }, 228 | { 229 | "name": "diff: deleted", 230 | "scope": "markup.deleted", 231 | "settings": { 232 | "fontStyle": "", 233 | "foreground": "#dc322f" 234 | } 235 | }, 236 | { 237 | "name": "diff: changed", 238 | "scope": "markup.changed", 239 | "settings": { 240 | "fontStyle": "", 241 | "foreground": "#cb4b16" 242 | } 243 | }, 244 | { 245 | "name": "diff: inserted", 246 | "scope": "markup.inserted", 247 | "settings": { 248 | "foreground": "#219186" 249 | } 250 | }, 251 | { 252 | "name": "Markup Quote", 253 | "scope": "markup.quote", 254 | "settings": { 255 | "foreground": "#859900" 256 | } 257 | }, 258 | { 259 | "name": "Markup Lists", 260 | "scope": "markup.list", 261 | "settings": { 262 | "foreground": "#B58900" 263 | } 264 | }, 265 | { 266 | "name": "Markup Styling", 267 | "scope": [ 268 | "markup.bold", 269 | "markup.italic" 270 | ], 271 | "settings": { 272 | "foreground": "#D33682" 273 | } 274 | }, 275 | { 276 | "name": "Markup Inline", 277 | "scope": "markup.inline.raw", 278 | "settings": { 279 | "fontStyle": "", 280 | "foreground": "#2AA198" 281 | } 282 | }, 283 | { 284 | "name": "Markup Headings", 285 | "scope": "markup.heading", 286 | "settings": { 287 | "foreground": "#268BD2" 288 | } 289 | }, 290 | { 291 | "name": "Markup Setext Header", 292 | "scope": "markup.heading.setext", 293 | "settings": { 294 | "fontStyle": "", 295 | "foreground": "#268BD2" 296 | } 297 | } 298 | ], 299 | "colors": { 300 | 301 | // Base 302 | // "foreground": "", 303 | "focusBorder": "#D3AF86", 304 | // "contrastActiveBorder": "", 305 | // "contrastBorder": "", 306 | 307 | // "widget.shadow": "", 308 | 309 | "input.background": "#DDD6C1", 310 | // "input.border": "", 311 | "input.foreground": "#586E75", 312 | "input.placeholderForeground": "#586E75AA", 313 | "inputOption.activeBorder": "#D3AF86", 314 | // "inputValidation.infoBorder": "", 315 | // "inputValidation.infoBackground": "", 316 | // "inputValidation.warningBackground": "", 317 | // "inputValidation.warningBorder": "", 318 | // "inputValidation.errorBackground": "", 319 | // "inputValidation.errorBorder": "", 320 | 321 | "badge.background": "#B58900AA", 322 | "progressBar.background": "#B58900", 323 | 324 | "dropdown.background": "#EEE8D5", 325 | // "dropdown.foreground": "", 326 | "dropdown.border": "#D3AF86", 327 | 328 | "button.background": "#AC9D57", 329 | // "button.foreground": "", 330 | 331 | "selection.background": "#CCC4B0", 332 | 333 | "list.activeSelectionBackground": "#DFCA88", 334 | "list.activeSelectionForeground": "#6C6C6C", 335 | "list.focusBackground": "#DFCA8866", 336 | "list.hoverBackground": "#DFCA8844", 337 | "list.inactiveSelectionBackground": "#D1CBB8", 338 | "list.highlightForeground": "#B58900", 339 | 340 | // "scrollbar.shadow": "", 341 | // "scrollbarSlider.activeBackground": "", 342 | // "scrollbarSlider.background": "", 343 | // "scrollbarSlider.hoverBackground": "", 344 | 345 | // Editor 346 | "editor.background": "#FDF6E3", 347 | // "editor.foreground": "#6688cc", 348 | "editorWidget.background": "#EEE8D5", 349 | "editorCursor.foreground": "#657B83", 350 | "editorWhitespace.foreground": "#586E7580", 351 | "editor.lineHighlightBackground": "#EEE8D5", 352 | "editor.selectionBackground": "#EEE8D5", 353 | "editorIndentGuide.background": "#586E7580", 354 | "editorIndentGuide.activeBackground": "#081E2580", 355 | "editorHoverWidget.background": "#CCC4B0", 356 | "editorLineNumber.activeForeground": "#567983", 357 | // "editorHoverWidget.border": "", 358 | // "editorLineNumber.foreground": "", 359 | // "editorMarkerNavigation.background": "", 360 | // "editorMarkerNavigationError.background": "", 361 | // "editorMarkerNavigationWarning.background": "", 362 | // "editorLink.activeForeground": "", 363 | // "editor.findMatchBackground": "", 364 | // "editor.findMatchHighlightBackground": "", 365 | // "editor.findRangeHighlightBackground": "", 366 | // "editor.hoverHighlightBackground": "", 367 | // "editor.inactiveSelectionBackground": "", 368 | // "editor.lineHighlightBorder": "", 369 | // "editor.rangeHighlightBackground": "", 370 | // "editor.selectionHighlightBackground": "", 371 | // "editor.wordHighlightBackground": "", 372 | // "editor.wordHighlightStrongBackground": "", 373 | 374 | // Editor: Suggest Widget 375 | // "editorSuggestWidget.background": "", 376 | // "editorSuggestWidget.border": "", 377 | // "editorSuggestWidget.foreground": "", 378 | // "editorSuggestWidget.highlightForeground": "", 379 | // "editorSuggestWidget.selectedBackground": "", 380 | 381 | // Editor: Peek View 382 | "peekViewResult.background": "#EEE8D5", 383 | // "peekViewResult.lineForeground": "", 384 | // "peekViewResult.selectionBackground": "", 385 | // "peekViewResult.selectionForeground": "", 386 | "peekViewEditor.background": "#FFFBF2", 387 | "peekViewTitle.background": "#EEE8D5", 388 | "peekView.border": "#B58900", 389 | "peekViewEditor.matchHighlightBackground": "#7744AA40", 390 | // "peekViewResult.fileForeground": "", 391 | // "peekViewResult.matchHighlightBackground": "", 392 | // "peekViewTitleLabel.foreground": "", 393 | // "peekViewTitleDescription.foreground": "", 394 | 395 | // Editor: Diff 396 | // "diffEditor.insertedTextBackground": "", 397 | // "diffEditor.insertedTextBorder": "", 398 | // "diffEditor.removedTextBackground": "", 399 | // "diffEditor.removedTextBorder": "", 400 | 401 | // Workbench: Title 402 | "titleBar.activeBackground": "#EEE8D5", 403 | // "titleBar.activeForeground": "", 404 | // "titleBar.inactiveBackground": "", 405 | // "titleBar.inactiveForeground": "", 406 | 407 | // Workbench: Editors 408 | // "editorGroupHeader.noTabsBackground": "", 409 | "editorGroup.border": "#DDD6C1", 410 | "editorGroup.dropBackground": "#DDD6C1AA", 411 | "editorGroupHeader.tabsBackground": "#D9D2C2", 412 | 413 | // Workbench: Tabs 414 | "tab.border": "#DDD6C1", 415 | "tab.activeBackground": "#FDF6E3", 416 | "tab.inactiveForeground": "#586E75", 417 | "tab.inactiveBackground": "#D3CBB7", 418 | "tab.activeModifiedBorder": "#cb4b16", 419 | // "tab.activeBackground": "", 420 | // "tab.activeForeground": "", 421 | // "tab.inactiveForeground": "", 422 | 423 | // Workbench: Activity Bar 424 | "activityBar.background": "#DDD6C1", 425 | "activityBar.foreground": "#584c27", 426 | "activityBar.dropBackground": "#EEE8D5", 427 | "activityBarBadge.background": "#B58900", 428 | // "activityBarBadge.foreground": "", 429 | 430 | // Workbench: Panel 431 | // "panel.background": "", 432 | "panel.border": "#DDD6C1", 433 | // "panelTitle.activeBorder": "", 434 | // "panelTitle.activeForeground": "", 435 | // "panelTitle.inactiveForeground": "", 436 | 437 | // Workbench: Side Bar 438 | "sideBar.background": "#EEE8D5", 439 | "sideBarTitle.foreground": "#586E75", 440 | // "sideBarSectionHeader.background": "", 441 | 442 | // Workbench: Status Bar 443 | "statusBar.foreground": "#586E75", 444 | "statusBar.background": "#EEE8D5", 445 | "statusBar.debuggingBackground": "#EEE8D5", 446 | "statusBar.noFolderBackground": "#EEE8D5", 447 | // "statusBar.foreground": "", 448 | "statusBarItem.remoteBackground": "#AC9D57", 449 | "statusBarItem.prominentBackground": "#DDD6C1", 450 | "statusBarItem.prominentHoverBackground": "#DDD6C199", 451 | // "statusBarItem.activeBackground": "", 452 | // "statusBarItem.hoverBackground": "", 453 | 454 | // Workbench: Debug 455 | "debugToolBar.background": "#DDD6C1", 456 | "debugExceptionWidget.background": "#DDD6C1", 457 | "debugExceptionWidget.border": "#AB395B", 458 | 459 | // Workbench: Quick Open 460 | "pickerGroup.border": "#2AA19899", 461 | "pickerGroup.foreground": "#2AA19899", 462 | 463 | // Extensions 464 | "extensionButton.prominentBackground": "#b58900", 465 | "extensionButton.prominentHoverBackground": "#584c27aa", 466 | 467 | // Workbench: Terminal 468 | // Colors sourced from the official palette http://ethanschoonover.com/solarized 469 | "terminal.ansiBlack": "#073642", 470 | "terminal.ansiRed": "#dc322f", 471 | "terminal.ansiGreen": "#859900", 472 | "terminal.ansiYellow": "#b58900", 473 | "terminal.ansiBlue": "#268bd2", 474 | "terminal.ansiMagenta": "#d33682", 475 | "terminal.ansiCyan": "#2aa198", 476 | "terminal.ansiWhite": "#eee8d5", 477 | "terminal.ansiBrightBlack": "#586e75", 478 | "terminal.ansiBrightRed": "#cb4b16", 479 | "terminal.ansiBrightGreen": "#586e75", 480 | "terminal.ansiBrightYellow": "#657b83", 481 | "terminal.ansiBrightBlue": "#839496", 482 | "terminal.ansiBrightMagenta": "#6c71c4", 483 | "terminal.ansiBrightCyan": "#93a1a1", 484 | "terminal.ansiBrightWhite": "#eee8d5", 485 | 486 | // Interactive Playground 487 | "walkThrough.embeddedEditorBackground": "#00000014" 488 | } 489 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es2015", 4 | "lib": [ 5 | "es2015", 6 | "dom" 7 | ] 8 | } 9 | } -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin') 2 | const HtmlWebpackPlugin = require('html-webpack-plugin') 3 | const path = require('path') 4 | 5 | module.exports = (env, argv) => ({ 6 | // This is necessary because Figma's 'eval' works differently than normal eval 7 | devtool: argv.mode === 'production' ? false : 'inline-source-map', 8 | 9 | entry: { 10 | ui: './src/ui.ts', // The entry point for your UI code 11 | code: './src/code.ts' // The entry point for your plugin code 12 | }, 13 | 14 | module: { 15 | rules: [ 16 | // Converts TypeScript code to JavaScript 17 | { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ }, 18 | 19 | // Enables including CSS by doing "import './file.css'" in your TypeScript code 20 | { test: /\.css$/, loader: [{ loader: 'style-loader' }, { loader: 'css-loader' }] }, 21 | 22 | // Allows you to use "<%= require('./file.svg') %>" in your HTML code to get a data URI 23 | { test: /\.(png|jpg|gif|webp|svg)$/, loader: [{ loader: 'url-loader' }] }, 24 | 25 | { test: /\.json5$/, loader: ['json5-loader'], include: path.resolve(__dirname, 'themes') } 26 | ] 27 | }, 28 | 29 | // Webpack tries these extensions for you if you omit the extension like "import './file'" 30 | resolve: { extensions: ['.tsx', '.ts', '.jsx', '.js'] }, 31 | 32 | output: { 33 | filename: '[name].js', 34 | path: path.resolve(__dirname, 'dist') // Compile into a folder called "dist" 35 | }, 36 | 37 | // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it 38 | plugins: [ 39 | new HtmlWebpackPlugin({ 40 | template: './src/ui.html', 41 | filename: 'ui.html', 42 | inlineSource: '.(js)$', 43 | chunks: ['ui'] 44 | }), 45 | new HtmlWebpackInlineSourcePlugin() 46 | ] 47 | }) 48 | --------------------------------------------------------------------------------