├── LICENSE
├── code.js
├── index.html
└── manifest.json


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Jake
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
  1 | console.clear();
  2 | 
  3 | const CLIENT_STORAGE_KEY = "css-color-mix";
  4 | const SHAPE_HEIGHT = 50;
  5 | const SHAPE_WIDTH = 500;
  6 | const WINDOW_HEIGHT = 300;
  7 | const WINDOW_WIDTH_SMALL = 240;
  8 | const WINDOW_WIDTH_LARGE = 480;
  9 | 
 10 | initialize();
 11 | 
 12 | async function initialize() {
 13 |   const settings = await clientStorageRetrieveSettings();
 14 |   figma.showUI(__html__, {
 15 |     height: WINDOW_HEIGHT,
 16 |     width:
 17 |       settings && settings.preview === false
 18 |         ? WINDOW_WIDTH_SMALL
 19 |         : WINDOW_WIDTH_LARGE,
 20 |     themeColors: true,
 21 |   });
 22 | 
 23 |   figma.ui.onmessage = async (message) => {
 24 |     if (message.type === "RESIZE") {
 25 |       figma.ui.resize(message.width, message.height);
 26 |     } else if (message.type === "SETTINGS") {
 27 |       clientStorageSaveSettings(message.settings);
 28 |     } else if (message.type === "GRADIENT" || message.type === "FILL") {
 29 |       actionFillShapeWithColorOrGradient(message);
 30 |     } else if (message.type === "SWATCHES") {
 31 |       actionCreateSwatches(message);
 32 |     } else if (message.type === "VARIABLES") {
 33 |       actionCreateVariables(message);
 34 |     } else {
 35 |       console.log(message);
 36 |     }
 37 |   };
 38 | 
 39 |   figma.on("selectionchange", async () => {
 40 |     const fills = await getFillsFromCurrentSelection();
 41 |     if (fills.length) {
 42 |       figma.ui.postMessage({ type: "FILLS", fills });
 43 |     }
 44 |   });
 45 | 
 46 |   let collections = await getLocalVariableCollections();
 47 |   setInterval(async () => {
 48 |     const latestCollections = await getLocalVariableCollections();
 49 |     if (variableCollectionsHaveChanged(collections, latestCollections)) {
 50 |       collections = latestCollections;
 51 |       figma.ui.postMessage({ type: "COLLECTIONS", collections });
 52 |     }
 53 |   }, 1000);
 54 | 
 55 |   const fills = await getFillsFromCurrentSelection();
 56 |   figma.ui.postMessage({ type: "INITIALIZE", collections, fills, settings });
 57 | }
 58 | 
 59 | async function actionCreateSwatches({ payload }) {
 60 |   const { space, colorA, colorB, colors } = payload;
 61 |   const frame = figma.createFrame();
 62 |   frame.layoutMode = "HORIZONTAL";
 63 |   frame.resize(SHAPE_WIDTH, SHAPE_HEIGHT);
 64 |   frame.fills = [];
 65 |   frame.name = `color-mix(in ${space}, ${colorA}, ${colorB})`;
 66 | 
 67 |   const width = (1 / colors.length) * frame.width;
 68 |   colors.forEach(({ rgb, colorA, colorB, space }, i) => {
 69 |     const rect = figma.createRectangle();
 70 |     rect.resize(width, frame.height);
 71 |     rect.layoutGrow = 1;
 72 |     rect.name = `color-mix(in ${space}, ${colorA}, ${colorB} ${
 73 |       Math.round((i / (colors.length - 1)) * 100 * 100) / 100
 74 |     }%)`;
 75 |     rect.fills = [figmaSolidFromColor(rgb)];
 76 |     frame.appendChild(rect);
 77 |   });
 78 |   selectAndFocusViewportOnNode(frame);
 79 |   figma.notify("Generated swatches!");
 80 | }
 81 | 
 82 | async function actionCreateVariables({ payload, collection }) {
 83 |   const { colors } = payload;
 84 |   const variableCollection =
 85 |     collection === "__CREATE_NEW_COLLECTION__"
 86 |       ? figma.variables.createVariableCollection("CSS color-mix()")
 87 |       : await figma.variables.getVariableCollectionByIdAsync(collection);
 88 | 
 89 |   if (!variableCollection) {
 90 |     figma.notify(`No collection with id "${collection}"`, {
 91 |       error: true,
 92 |     });
 93 |     return;
 94 |   }
 95 | 
 96 |   try {
 97 |     colors.forEach(({ rgb, colorA, colorB, space }, i) => {
 98 |       const ratio = (i / (colors.length - 1)) * 100;
 99 |       const variable = figma.variables.createVariable(
100 |         `${colorA.replace("#", "")}-${colorB.replace(
101 |           "#",
102 |           ""
103 |         )}/in ${space}/${Math.round(ratio * 10)}`,
104 |         variableCollection,
105 |         "COLOR"
106 |       );
107 |       variable.description = relevantCSSForType(
108 |         "FILL",
109 |         space,
110 |         colorA,
111 |         colorB,
112 |         ratio
113 |       );
114 |       variable.setVariableCodeSyntax("WEB", variable.description);
115 |       variable.setValueForMode(
116 |         variableCollection.defaultModeId,
117 |         figmaRGBFromRGB(rgb)
118 |       );
119 |     });
120 |     figma.notify(`Created ${colors.length} variables!`);
121 |   } catch (e) {
122 |     figma.notify(`Error: ${e.message}`, { error: true });
123 |   }
124 | }
125 | 
126 | async function actionFillShapeWithColorOrGradient({ type, payload }) {
127 |   const { space, colorA, colorB, ratio, colors, color } = payload;
128 |   const shapeFromSelection = await getShapeForFillsFromSelection();
129 |   const shape = shapeFromSelection || figma.createFrame();
130 |   const newShape = !shapeFromSelection;
131 |   if (newShape) {
132 |     shape.resize(SHAPE_WIDTH, SHAPE_HEIGHT);
133 |   }
134 | 
135 |   if (newShape || nodeCanBeRenamedSafely(shape)) {
136 |     shape.name = relevantCSSForType(type, space, colorA, colorB, ratio);
137 |   }
138 | 
139 |   shape.fills = [
140 |     type === "GRADIENT"
141 |       ? figmaGradientFromColors(colors)
142 |       : figmaSolidFromColor(color),
143 |   ];
144 |   figma.notify(`Filled with ${type.toLowerCase()}!`);
145 |   if (newShape) {
146 |     selectAndFocusViewportOnNode(shape);
147 |   }
148 | }
149 | 
150 | async function clientStorageRetrieveSettings() {
151 |   return await figma.clientStorage.getAsync(CLIENT_STORAGE_KEY);
152 | }
153 | 
154 | async function clientStorageSaveSettings(args) {
155 |   return await figma.clientStorage.setAsync(CLIENT_STORAGE_KEY, args);
156 | }
157 | 
158 | function figmaGradientFromColors(colors) {
159 |   return {
160 |     type: "GRADIENT_LINEAR",
161 |     gradientTransform: [
162 |       [1, 0, 0],
163 |       [0, 1, 0],
164 |     ],
165 |     gradientStops: colors.map(({ rgb }, i) => ({
166 |       position: i / (colors.length - 1),
167 |       color: Object.assign(figmaRGBFromRGB(rgb), { a: 1 }),
168 |     })),
169 |   };
170 | }
171 | 
172 | function figmaRGBFromRGB({ r, g, b }) {
173 |   return {
174 |     r: r / 255,
175 |     g: g / 255,
176 |     b: b / 255,
177 |   };
178 | }
179 | 
180 | function figmaSolidFromColor(color) {
181 |   return {
182 |     type: "SOLID",
183 |     color: figmaRGBFromRGB(color),
184 |     opacity: 1,
185 |   };
186 | }
187 | 
188 | async function getFillsFromCurrentSelection() {
189 |   const fills = [];
190 |   if (figma.currentPage.selection.length === 2) {
191 |     const fillSolidA = figma.currentPage.selection[0].fills.find(
192 |       (fill) => fill.visible && fill.type === "SOLID"
193 |     );
194 |     const fillSolidB = figma.currentPage.selection[1].fills.find(
195 |       (fill) => fill.visible && fill.type === "SOLID"
196 |     );
197 |     if (fillSolidA && fillSolidB) {
198 |       fills.push(fillSolidA.color, fillSolidB.color);
199 |     }
200 |   }
201 |   const node = figma.currentPage.selection[0];
202 |   if (!fills.length && node) {
203 |     const fillSolid = node.fills.find(
204 |       (fill) => fill.visible && fill.type === "SOLID"
205 |     );
206 |     const fillGradient = node.fills.find(
207 |       (fill) => fill.visible && fill.type.startsWith("GRADIENT")
208 |     );
209 |     if (fillGradient) {
210 |       const stop1 = fillGradient.gradientStops[0];
211 |       const stop2 =
212 |         fillGradient.gradientStops[fillGradient.gradientStops.length - 1];
213 |       if (stop1 && stop2) {
214 |         fills.push(stop1.color, stop2.color);
215 |       }
216 |     }
217 |     if (!fills.length && fillSolid) {
218 |       fills.push(fillSolid.color);
219 |     }
220 |   }
221 |   return fills;
222 | }
223 | 
224 | async function getShapeForFillsFromSelection() {
225 |   const selection = figma.currentPage.selection;
226 |   if (selection.length !== 1) {
227 |     return;
228 |   }
229 |   const node = selection[0];
230 |   if (!("fills" in node)) {
231 |     return;
232 |   }
233 |   if (!("children" in node)) {
234 |     return;
235 |   }
236 |   if (node.children.length !== 0) {
237 |     return;
238 |   }
239 |   return node;
240 | }
241 | 
242 | async function getLocalVariableCollections() {
243 |   return (await figma.variables.getLocalVariableCollectionsAsync()).flatMap(
244 |     (collection) => {
245 |       if (collection.remote) {
246 |         return [];
247 |       }
248 |       return [
249 |         {
250 |           id: collection.id,
251 |           name: collection.name,
252 |           key: collection.id + "-" + collection.name,
253 |         },
254 |       ];
255 |     }
256 |   );
257 | }
258 | 
259 | function nodeCanBeRenamedSafely(node) {
260 |   if (node.type !== "FRAME") {
261 |     return false;
262 |   }
263 |   return (
264 |     node.name.startsWith("linear-gradient(") ||
265 |     node.name.startsWith("color-mix(")
266 |   );
267 | }
268 | 
269 | function relevantCSSForType(type, space, colorA, colorB, ratio) {
270 |   if (type === "GRADIENT") {
271 |     return `linear-gradient(90deg in ${space}, ${colorA}, ${colorB})`;
272 |   }
273 |   ratio = ratio === undefined ? "" : ` ${ratio}%`;
274 |   return `color-mix(in ${space}, ${colorA}, ${colorB}${ratio})`;
275 | }
276 | 
277 | function selectAndFocusViewportOnNode(node) {
278 |   figma.currentPage.selection = [node];
279 |   figma.viewport.scrollAndZoomIntoView(figma.currentPage.selection);
280 |   figma.viewport.zoom *= 0.6;
281 | }
282 | 
283 | function variableCollectionsHaveChanged(collections1, collections2) {
284 |   return (
285 |     collections1.map(({ key }) => key).join("-") !==
286 |     collections2.map(({ key }) => key).join("-")
287 |   );
288 | }
289 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |   <title>CSS color-mix()</title>
  8 |   <style>
  9 |     :root {
 10 |       --theme-color: var(--figma-color-text);
 11 |       --theme-color-secondary: var(--figma-color-text-secondary);
 12 |       --theme-background: var(--figma-color-bg);
 13 |       --theme-background-primary: var(--figma-color-bg-brand);
 14 |       --theme-text-onprimary: var(--figma-color-text-onbrand);
 15 |       --theme-border-radius: 0.3125rem;
 16 |       --theme-border-radius-large: 0.8125rem;
 17 |       --theme-font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 18 |       --theme-font-size: 0.6875rem;
 19 |       --theme-font-size-small: 0.5875rem;
 20 |       --theme-input-background: var(--figma-color-bg-secondary);
 21 |       --theme-input-border: var(--figma-color-bg);
 22 |       --theme-input-border-hover: var(--figma-color-border);
 23 |       --theme-input-border-focus: var(--figma-color-border-selected);
 24 |       --theme-input-height: 1.5rem;
 25 |       --theme-spacing-small: 0.125rem;
 26 |       --theme-spacing: 0.5rem;
 27 |       --theme-spacing-large: 0.75rem;
 28 |       --color-a: #FF0000;
 29 |       --color-b: #00FF00;
 30 |       --ratio: 50;
 31 |       --space: oklab;
 32 |       --computed: #fff;
 33 |       --color-thumb-opacity: 1;
 34 |     }
 35 | 
 36 |     * {
 37 |       box-sizing: border-box;
 38 |     }
 39 | 
 40 |     html,
 41 |     body {
 42 |       font-family: var(--theme-font-family);
 43 |       height: 100%;
 44 |       margin: 0;
 45 |     }
 46 | 
 47 |     body {
 48 |       --color: color-mix(in var(--space), var(--color-a), var(--color-b) calc(var(--ratio) * 1%));
 49 |       background: var(--color);
 50 |       color: var(--theme-color);
 51 |       display: flex;
 52 |       font-size: var(--theme-font-size);
 53 |     }
 54 | 
 55 |     a {
 56 |       color: var(--theme-color);
 57 |     }
 58 | 
 59 |     main,
 60 |     #element-preview {
 61 |       flex: 1;
 62 |       height: 100%;
 63 |     }
 64 | 
 65 |     main {
 66 |       background: var(--theme-background);
 67 |       color: var(--theme-color);
 68 |       display: flex;
 69 |     }
 70 | 
 71 |     #element-preview {
 72 |       background: var(--gradient);
 73 |       display: flex;
 74 |       flex-direction: column;
 75 |       font-family: monospace;
 76 |       font-size: var(--theme-font-size-small);
 77 |       justify-content: safe center;
 78 |       overflow: auto;
 79 | 
 80 | 
 81 |       >span {
 82 |         background: var(--color);
 83 |         display: block;
 84 |         font-weight: normal;
 85 |         padding: var(--theme-spacing);
 86 | 
 87 |         >span {
 88 |           color: var(--color);
 89 |           filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
 90 |           mix-blend-mode: luminosity;
 91 |           white-space: pre;
 92 |         }
 93 |       }
 94 |     }
 95 | 
 96 |     section {
 97 |       align-items: center;
 98 |       display: flex;
 99 |       flex: 1;
100 |       flex-direction: column;
101 |       gap: var(--theme-spacing);
102 |       padding: var(--theme-spacing-large);
103 | 
104 |       >div {
105 |         align-content: center;
106 |         display: flex;
107 |         flex-wrap: wrap;
108 |         gap: var(--theme-spacing-small);
109 |         width: 100%;
110 | 
111 |         >* {
112 |           flex: 1;
113 |         }
114 | 
115 |         >p {
116 |           color: var(--theme-color-secondary);
117 |           display: flex;
118 |           flex-basis: 100%;
119 |           font-weight: 500;
120 |           justify-content: space-between;
121 |           margin: 0;
122 |           width: 100%;
123 | 
124 |           >a {
125 |             text-decoration: none;
126 |           }
127 |         }
128 |       }
129 | 
130 |       >div#output-preview {
131 |         flex-direction: column;
132 |       }
133 |     }
134 | 
135 |     input[type="color"] {
136 |       aspect-ratio: 1/1;
137 |       flex: none;
138 |       padding: var(--theme-spacing-small);
139 |       width: auto;
140 |     }
141 | 
142 |     input[type="color" i]::-webkit-color-swatch-wrapper {
143 |       border: none;
144 |       padding: 0;
145 |     }
146 | 
147 |     input[type="color" i]::-webkit-color-swatch {
148 |       border: none;
149 |       border-radius: calc(var(--theme-border-radius) - var(--theme-spacing-small));
150 |       height: 100%;
151 |       width: 100%;
152 |     }
153 | 
154 |     input[type="color"],
155 |     input[type="range"] {
156 |       appearance: none;
157 |       border: none;
158 |     }
159 | 
160 |     input[type="range"] {
161 |       padding: var(--theme-spacing-small);
162 |     }
163 | 
164 |     input[type="range"]::-webkit-slider-runnable-track {
165 |       background: var(--gradient);
166 |       border-radius: calc(var(--theme-border-radius) - var(--theme-spacing-small));
167 |       height: 100%;
168 |       width: 100%;
169 |     }
170 | 
171 |     input[type="range"]::-moz-range-track {
172 |       background: var(--gradient);
173 |       border-radius: calc(var(--theme-border-radius) - var(--theme-spacing-small));
174 |       height: 100%;
175 |     }
176 | 
177 |     input[type="range"]::-webkit-slider-thumb {
178 |       appearance: none;
179 |       aspect-ratio: 1/1;
180 |       background: var(--color);
181 |       border-radius: var(--theme-border-radius);
182 |       box-shadow: 0 0 0 1px var(--theme-input-border-hover), 0px 1px 4px var(--theme-background);
183 |       height: 100%;
184 |       opacity: var(--color-thumb-opacity);
185 |       transform: scale(0.8);
186 |       width: auto;
187 |     }
188 | 
189 |     input[type="range"]::-moz-range-thumb {
190 |       aspect-ratio: 1/1;
191 |       background: var(--color);
192 |       border-radius: var(--theme-border-radius);
193 |       box-shadow: 0 0 0 1px var(--theme-input-border-hover), 0px 1px 4px var(--theme-background);
194 |       height: 100%;
195 |       opacity: var(--color-thumb-opacity);
196 |       transform: scale(0.8);
197 |       width: auto;
198 |     }
199 | 
200 |     button,
201 |     input,
202 |     select,
203 |     textarea {
204 |       background: var(--theme-input-background);
205 |       border: 1px solid var(--theme-input-border);
206 |       border-radius: var(--theme-border-radius);
207 |       color: var(--theme-color);
208 |       font-family: var(--theme-font-family);
209 |       font-size: var(--theme-font-size);
210 | 
211 |       &:hover {
212 |         border-color: var(--theme-input-border-hover);
213 |       }
214 | 
215 |       &:focus-visible {
216 |         outline: none;
217 |         border-color: var(--theme-input-border-focus);
218 |       }
219 |     }
220 | 
221 |     button,
222 |     input,
223 |     select {
224 |       height: var(--theme-input-height);
225 |       margin: 0;
226 |     }
227 | 
228 |     select {
229 |       overflow: hidden;
230 |       text-overflow: ellipsis;
231 |       white-space: nowrap;
232 |     }
233 | 
234 |     button,
235 |     input[type="color"] {
236 |       cursor: pointer;
237 |     }
238 | 
239 |     input::-webkit-outer-spin-button,
240 |     input::-webkit-inner-spin-button {
241 |       -webkit-appearance: none;
242 |       margin: 0;
243 |     }
244 | 
245 |     /* Firefox */
246 |     input[type=number] {
247 |       -moz-appearance: textfield;
248 |     }
249 | 
250 |     input {
251 |       width: auto;
252 |     }
253 | 
254 |     button {
255 |       background: var(--theme-background-primary);
256 |       color: var(--theme-text-onprimary);
257 |       width: auto;
258 |     }
259 | 
260 |     button#button-preview {
261 |       background: var(--figma-color-bg-secondary);
262 |       color: var(--theme-text-onsecondary);
263 |       flex: initial;
264 |     }
265 | 
266 |     input[type="text"] {
267 |       font-family: monospace;
268 |       flex: initial;
269 |       margin: 0;
270 |       width: 100%;
271 |     }
272 | 
273 |     #select-space,
274 |     #select-hue {
275 |       width: 50%;
276 |     }
277 | 
278 |     #select-collection {
279 |       flex: 3;
280 |       width: 75%;
281 |     }
282 | 
283 |     #select-type {
284 |       flex: 4;
285 |       flex-basis: 100%;
286 |       width: 100%;
287 |     }
288 | 
289 |     canvas {
290 |       background: color-mix(in var(--space), var(--color-a), var(--color-b) calc(var(--ratio) * 1%));
291 |       display: none;
292 |     }
293 | 
294 |     body.preview-hide {
295 |       #element-preview {
296 |         display: none;
297 |       }
298 |     }
299 | 
300 |     body.type-fill #stops-container {
301 |       display: none;
302 |     }
303 | 
304 |     body:not(.type-variables) #collection-container {
305 |       display: none;
306 |     }
307 | 
308 |     body.type-variables,
309 |     body.type-swatches {
310 |       --color-thumb-opacity: 0;
311 |     }
312 |   </style>
313 | </head>
314 | 
315 | <body>
316 | 
317 |   <main>
318 |     <section>
319 |       <div>
320 |         <p>Output Type</p>
321 |         <select id="select-type">
322 |           <option value="fill">Color Fill</option>
323 |           <option value="gradient">Gradient Fill</option>
324 |           <option value="variables">Variables</option>
325 |           <option value="swatches">Swatches</option>
326 |         </select>
327 |       </div>
328 | 
329 |       <div>
330 |         <p><span>Color A</span><span>Mix</span><span>Color B</span></p>
331 |         <input id="input-color-a" type="color" />
332 |         <input id="input-ratio" type="range" min="0" max="100" step="1" />
333 |         <input id="input-color-b" type="color" />
334 |       </div>
335 | 
336 |       <div>
337 |         <p>Color Blend</p>
338 |         <select id="select-space">
339 |           <optgroup label="Polar Color Spaces">
340 |             <option value="hsl">hsl</option>
341 |             <option value="hwb">hwb</option>
342 |             <option value="lch">lch</option>
343 |             <option selected value="oklch">oklch</option>
344 |           </optgroup>
345 |           <optgroup label="Rectangular Color Spaces">
346 |             <option value="srgb">srgb</option>
347 |             <option value="srgb-linear">srgb-linear</option>
348 |             <option value="lab">lab</option>
349 |             <option value="oklab">oklab</option>
350 |             <option value="xyz">xyz</option>
351 |           </optgroup>
352 |         </select>
353 |         <select id="select-hue">
354 |           <option selected value="shorter hue">shorter hue</option>
355 |           <option value="longer hue">longer hue</option>
356 |           <option value="increasing hue">increasing hue</option>
357 |           <option value="decreasing hue">decreasing hue</option>
358 |         </select>
359 |       </div>
360 | 
361 |       <div id="stops-container">
362 |         <p id="stops-label">Color Stops</p>
363 |         <input id="input-stops" title="stops" type="number" value="10" min="1" max="1000" step="1" />
364 |       </div>
365 | 
366 |       <div id="collection-container">
367 |         <p id="collection-label">Variable Collection</p>
368 |         <select id="select-collection"></select>
369 |       </div>
370 | 
371 |       <div style="margin-top: auto;">
372 |         <button id="button-generate">Generate</button>
373 |         <button id="button-preview">Preview</button>
374 |       </div>
375 |     </section>
376 |   </main>
377 | 
378 |   <div id="element-preview"></div>
379 | 
380 |   <script>
381 |     const WINDOW_HEIGHT = 300;
382 |     const WINDOW_WIDTH_SMALL = 240;
383 |     const WINDOW_WIDTH_LARGE = 480;
384 | 
385 |     const buttonGenerate = document.getElementById("button-generate");
386 |     const buttonPreview = document.getElementById("button-preview");
387 |     const elementPreview = document.getElementById("element-preview");
388 |     const inputColorA = document.getElementById("input-color-a");
389 |     const inputColorB = document.getElementById("input-color-b");
390 |     const inputRatio = document.getElementById("input-ratio");
391 |     const inputStops = document.getElementById("input-stops");
392 |     const selectCollection = document.getElementById("select-collection");
393 |     const selectHue = document.getElementById("select-hue");
394 |     const selectSpace = document.getElementById("select-space");
395 |     const selectType = document.getElementById("select-type");
396 | 
397 |     const polarColorSpaces = ["hsl", "hwb", "lch", "oklch"];
398 | 
399 |     const canvas = document.createElement("canvas");
400 |     const context = canvas.getContext("2d");
401 |     canvas.height = canvas.width = 4;
402 |     document.body.appendChild(canvas);
403 | 
404 |     let colors = [];
405 |     let color = { r: 0, g: 0, b: 0 };
406 | 
407 |     window.onmessage = ({ data: { pluginMessage }, }) => {
408 |       if (pluginMessage.type === "INITIALIZE") {
409 |         initialize(pluginMessage);
410 |       } else if (pluginMessage.type === "COLLECTIONS") {
411 |         handleCollectionsChange(pluginMessage.collections)
412 |         update();
413 |       } else if (pluginMessage.type === "FILLS") {
414 |         handleFillsInSelection(pluginMessage.fills)
415 |         update();
416 |       } else {
417 |         console.log({ pluginMessage })
418 |       }
419 |     }
420 | 
421 |     function initialize({ collections, fills, settings }) {
422 |       handleCollectionsChange(collections);
423 |       handleSettingsFromClientStorage(settings, fills)
424 |       handleTypeSelectChange()
425 | 
426 |       update();
427 | 
428 |       buttonGenerate.addEventListener("click", () => {
429 |         const type = selectType.value.toUpperCase();
430 |         parent.postMessage({
431 |           pluginMessage: {
432 |             payload: {
433 |               color,
434 |               colors,
435 |               ratio: inputRatio.value,
436 |               space: document.body.style.getPropertyValue("--space"),
437 |               colorA: inputColorA.value,
438 |               colorB: inputColorB.value
439 |             },
440 |             type,
441 |             collection: selectCollection.value
442 |           },
443 |         }, "*");
444 |       });
445 | 
446 |       selectType.addEventListener("change", () => { handleTypeSelectChange(); update() });
447 | 
448 |       inputColorA.addEventListener("input", update);
449 |       inputColorB.addEventListener("input", update);
450 |       inputRatio.addEventListener("input", update);
451 |       selectSpace.addEventListener("change", update);
452 |       selectHue.addEventListener("change", update);
453 |       inputStops.addEventListener("input", update);
454 | 
455 |       buttonPreview.addEventListener("click", (e) => {
456 |         e.preventDefault();
457 |         if (document.body.classList.contains("preview-hide")) {
458 |           performPreviewShow();
459 |         } else {
460 |           performPreviewHide();
461 |         }
462 |         performSaveSettings();
463 |       })
464 |     }
465 | 
466 |     function update() {
467 |       performSaveSettings();
468 | 
469 |       document.body.style.setProperty("--color-a", inputColorA.value);
470 |       document.body.style.setProperty("--color-b", inputColorB.value);
471 |       document.body.style.setProperty("--ratio", inputRatio.value);
472 |       document.body.style.setProperty(
473 |         "--ratio-a",
474 |         50 - Math.min(50, parseInt(inputRatio.value))
475 |       );
476 |       document.body.style.setProperty(
477 |         "--ratio-b",
478 |         100 - (Math.max(50, parseInt(inputRatio.value)) - 50)
479 |       );
480 | 
481 |       const isPolar = polarColorSpaces.includes(selectSpace.value);
482 |       selectHue.style.display = isPolar ? "inline" : "none";
483 |       const colorSpace = isPolar ? `${selectSpace.value} ${selectHue.value}` : selectSpace.value;
484 | 
485 |       const gradientArgs = [
486 |         `90deg in ${colorSpace}`,
487 |         "var(--color-a)",
488 |         "var(--color-b)"
489 |       ];
490 | 
491 |       document.body.style.setProperty("--space", colorSpace);
492 |       document.body.style.setProperty(
493 |         "--gradient",
494 |         `linear-gradient(${gradientArgs.join(",")})`
495 |       );
496 | 
497 |       const colorString = window.getComputedStyle(document.body).backgroundColor;
498 | 
499 |       document.body.style.setProperty(
500 |         "--computed",
501 |         colorString
502 |       );
503 | 
504 |       // Canvas magic to translate to rgb for Figma.
505 |       context.fillStyle = colorString;
506 |       context.fillRect(0, 0, canvas.width, canvas.height);
507 |       const { data } = context.getImageData(0, 0, 1, 1);
508 |       const [r, g, b] = data;
509 |       color = { r, g, b, }
510 | 
511 |       const count = parseInt(inputStops.value);
512 | 
513 |       colors = [];
514 |       for (let i = 0; i < count; i++) {
515 |         canvas.style.setProperty("--ratio", (i / (count - 1)) * 100);
516 |         context.fillStyle = window.getComputedStyle(canvas).backgroundColor;
517 |         context.fillRect(0, 0, 1, 1);
518 |         const {
519 |           data: [r, g, b, a]
520 |         } = context.getImageData(0, 0, 1, 1);
521 |         colors.push({
522 |           space: colorSpace,
523 |           colorA: inputColorA.value,
524 |           colorB: inputColorB.value,
525 |           percent: i,
526 |           rgb: { r, g, b },
527 |         });
528 |       }
529 | 
530 |       if (selectType.value === "fill") {
531 |         renderPreviewFill(colorSpace, colorString);
532 |       } else if (selectType.value === "gradient") {
533 |         renderPreviewGradient(colorSpace);
534 |       } else if (selectType.value === "variables" || selectType.value === "swatches") {
535 |         renderPreviewSwatches(colorSpace)
536 |       }
537 |     }
538 | 
539 |     function handleCollectionsChange(collections) {
540 |       const value = selectCollection.value || (collections.length ? collections[0].id : "__CREATE_NEW_COLLECTION__");
541 |       selectCollection.innerHTML = `<option value="__CREATE_NEW_COLLECTION__">+ New Variable Collection</option>${collections.map((collection) => `<option value="${collection.id}">${collection.name}</option>`).join("")}`
542 |       if (selectCollection.innerHTML.match(value)) {
543 |         selectCollection.value = value;
544 |       }
545 |     }
546 | 
547 |     function handleFillsInSelection(fills) {
548 |       if (fills.length) {
549 |         inputColorA.value = rgbToHex(fills[0])
550 |         if (fills[1]) {
551 |           inputColorB.value = rgbToHex(fills[1])
552 |         }
553 |       }
554 |     }
555 | 
556 |     function handleSettingsFromClientStorage(settings = {}, fills) {
557 |       inputColorA.value = fills[0] ? rgbToHex(fills[0]) : settings.colorA || "#FFFF00";
558 |       inputColorB.value = fills[1] ? rgbToHex(fills[1]) : settings.colorB || "#0000FF";
559 |       inputRatio.value = settings.ratio || "50";
560 |       selectSpace.value = settings.space || "hsl";
561 |       selectHue.value = settings.hue || "shorter hue";
562 |       selectType.value = settings.type || "swatches";
563 |       if (settings.preview) {
564 |         performPreviewShow();
565 |       } else {
566 |         performPreviewHide();
567 |       }
568 |     }
569 | 
570 |     function handleTypeSelectChange() {
571 |       document.body.className = document.body.className.replace(/type-[^ ]+/, "");
572 |       document.body.classList.add(`type-${selectType.value}`);
573 |       const text = Object.values(selectType.options).find(option => option.value === selectType.value).text;
574 |       buttonGenerate.innerHTML = `Create ${text}`;
575 |     }
576 | 
577 |     function performPreviewHide() {
578 |       document.body.classList.add("preview-hide");
579 |       parent.postMessage({
580 |         pluginMessage: {
581 |           type: "RESIZE",
582 |           height: WINDOW_HEIGHT,
583 |           width: WINDOW_WIDTH_SMALL
584 |         },
585 |       }, "*");
586 |     }
587 | 
588 |     function performPreviewShow() {
589 |       parent.postMessage({
590 |         pluginMessage: {
591 |           type: "RESIZE",
592 |           height: WINDOW_HEIGHT,
593 |           width: WINDOW_WIDTH_LARGE
594 |         },
595 |       }, "*");
596 |       document.body.classList.remove("preview-hide");
597 |     }
598 | 
599 |     function performSaveSettings() {
600 |       parent.postMessage({
601 |         pluginMessage: {
602 |           type: "SETTINGS",
603 |           settings: {
604 |             colorA: inputColorA.value,
605 |             colorB: inputColorB.value,
606 |             ratio: inputRatio.value,
607 |             space: selectSpace.value,
608 |             hue: selectHue.value,
609 |             type: selectType.value,
610 |             preview: !document.body.classList.contains("preview-hide")
611 |           },
612 |         },
613 |       }, "*");
614 |     }
615 | 
616 |     // Also in code.js
617 |     function relevantCSSForType(type, space, colorA, colorB, ratio) {
618 |       if (type === "GRADIENT") {
619 |         return `linear-gradient(90deg in ${space}, ${colorA}, ${colorB})`;
620 |       }
621 |       ratio = ratio === undefined ? "" : ` ${ratio}%`;
622 |       return `color-mix(in ${space}, ${colorA}, ${colorB}${ratio})`;
623 |     }
624 | 
625 |     function renderPreviewFill(colorSpace, computed) {
626 |       const colorA = inputColorA.value;
627 |       const colorB = inputColorB.value;
628 |       const ratio = inputRatio.value;
629 |       const [prefix, content, _] = computed.split(/[\(\)]/);
630 |       const computedFormatted = [`${prefix}(`, content.split(" ").map(a => `  ${a}`).join("\n"), ")"].join("\n");
631 |       elementPreview.innerHTML = [
632 |         [
633 |           `<span><span>color-mix(in ${colorSpace},`,
634 |           `  ${colorA}, ${colorB} ${ratio}%`,
635 |           `)</span></span>`
636 |         ].join("\n"),
637 |         [
638 |           `<span><span>/* computed */`,
639 |           `${computedFormatted}</span></span>`
640 |         ].join("\n")
641 |       ].join("")
642 |     }
643 | 
644 |     function renderPreviewGradient(colorSpace) {
645 |       const colorA = inputColorA.value;
646 |       const colorB = inputColorB.value;
647 |       elementPreview.innerHTML = [
648 |         `<span><span>linear-gradient(`,
649 |         `  90deg in ${colorSpace},`,
650 |         `  ${colorA}, ${colorB}`,
651 |         `)</span></span>`
652 |       ].join("\n")
653 |     }
654 | 
655 |     function renderPreviewSwatches(colorSpace) {
656 |       const colorA = inputColorA.value;
657 |       const colorB = inputColorB.value;
658 |       elementPreview.innerHTML = colors.map(({ percent }) => {
659 |         const ratio = percent / (colors.length - 1) * 100;
660 |         const color = relevantCSSForType("FILL", colorSpace, colorA, colorB, ratio);
661 |         return [
662 |           `<span style="--color: ${color};"><span>color-mix(in ${colorSpace},`,
663 |           `  ${colorA}, ${colorB} ${Math.round(ratio * 1000) / 1000}%`,
664 |           `)</span></span>`
665 |         ].join("\n")
666 |       }).join("\n")
667 |     }
668 | 
669 |     function rgbToHex({ r, g, b }) {
670 |       return "#" + [r, g, b].map(c => Math.round(c * 255).toString(16).padStart(2, "0")).join("")
671 |     }
672 |   </script>
673 | </body>
674 | 
675 | </html>


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "CSS color-mix()",
 3 |   "id": "1418382040312723873",
 4 |   "api": "1.0.0",
 5 |   "editorType": ["figma"],
 6 |   "permissions": [],
 7 |   "main": "code.js",
 8 |   "ui": "index.html",
 9 |   "documentAccess": "dynamic-page",
10 |   "networkAccess": {
11 |     "allowedDomains": ["none"]
12 |   }
13 | }
14 | 


--------------------------------------------------------------------------------