├── Variables Import & Export Icon.png
├── Variables Import & Export Banner.png
├── manifest.json
├── export.html
├── import.html
└── code.js


/Variables Import & Export Icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jake-figma/variables-import-export/HEAD/Variables Import & Export Icon.png


--------------------------------------------------------------------------------
/Variables Import & Export Banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jake-figma/variables-import-export/HEAD/Variables Import & Export Banner.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Variables Import Export",
 3 |   "id": "1225498390710809905",
 4 |   "api": "1.0.0",
 5 |   "editorType": ["figma"],
 6 |   "permissions": [],
 7 |   "main": "code.js",
 8 |   "menu": [
 9 |     { "command": "import", "name": "Import Variables" },
10 |     { "command": "export", "name": "Export Variables" }
11 |   ],
12 |   "ui": { "import": "import.html", "export": "export.html" }
13 | }
14 | 


--------------------------------------------------------------------------------
/export.html:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   :root {
 3 |     --spacing: 0.8rem;
 4 |   }
 5 | 
 6 |   * {
 7 |     box-sizing: border-box;
 8 |   }
 9 | 
10 |   body {
11 |     background-color: var(--figma-color-bg);
12 |     color: var(--figma-color-text);
13 |     margin: 0;
14 |     padding: var(--spacing);
15 |   }
16 | 
17 |   html,
18 |   body,
19 |   main {
20 |     height: 100%;
21 |   }
22 | 
23 |   main {
24 |     display: flex;
25 |     flex-direction: column;
26 |     gap: var(--spacing);
27 |   }
28 | 
29 |   button {
30 |     appearance: none;
31 |     border-radius: 4px;
32 |     padding: var(--spacing);
33 |   }
34 | 
35 |   textarea {
36 |     background-color: var(--figma-color-bg-secondary);
37 |     border: 2px solid var(--figma-color-border);
38 |     color: var(--figma-color-text-secondary);
39 |     flex: 1;
40 |     font-family: Andale Mono, monospace;
41 |     font-size: 0.9rem;
42 |     overflow: auto;
43 |     padding: var(--spacing);
44 |     white-space: pre;
45 |   }
46 |   textarea:focus {
47 |     border-color: var(--figma-color-border-selected);
48 |     outline: none;
49 |   }
50 | 
51 |   button,
52 |   textarea {
53 |     display: block;
54 |     width: 100%;
55 |   }
56 | 
57 |   button {
58 |     background-color: var(--figma-color-bg-brand);
59 |     border: none;
60 |     color: var(--figma-color-text-onbrand);
61 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
62 |       Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
63 |       sans-serif;
64 |     font-weight: bold;
65 |   }
66 | 
67 |   #export {
68 |     background-color: var(--figma-color-bg-component);
69 |   }
70 | </style>
71 | <main>
72 |   <button id="export" type="button">Export Variables</button>
73 |   <textarea
74 |     placeholder="Exported variables will render here..."
75 |     readonly
76 |   ></textarea>
77 | </main>
78 | <script>
79 |   window.onmessage = ({ data: { pluginMessage } }) => {
80 |     if (pluginMessage.type === "EXPORT_RESULT") {
81 |       document.querySelector("textarea").innerHTML = pluginMessage.files
82 |         .map(
83 |           ({ fileName, body }) =>
84 |             `/* ${fileName} */\n\n${JSON.stringify(body, null, 2)}`
85 |         )
86 |         .join("\n\n\n");
87 |     }
88 |   };
89 |   document.getElementById("export").addEventListener("click", () => {
90 |     parent.postMessage({ pluginMessage: { type: "EXPORT" } }, "*");
91 |   });
92 | </script>
93 | 


--------------------------------------------------------------------------------
/import.html:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   :root {
  3 |     --spacing: 0.8rem;
  4 |   }
  5 | 
  6 |   * {
  7 |     box-sizing: border-box;
  8 |   }
  9 | 
 10 |   body {
 11 |     background-color: var(--figma-color-bg);
 12 |     color: var(--figma-color-text);
 13 |     margin: 0;
 14 |     padding: var(--spacing);
 15 |   }
 16 | 
 17 |   html,
 18 |   body {
 19 |     height: 100%;
 20 |   }
 21 | 
 22 |   form {
 23 |     display: flex;
 24 |     flex-direction: column;
 25 |     gap: var(--spacing);
 26 |     height: 100%;
 27 |   }
 28 | 
 29 |   button {
 30 |     appearance: none;
 31 |     border-radius: 4px;
 32 |     padding: var(--spacing);
 33 |   }
 34 | 
 35 |   select,
 36 |   input,
 37 |   textarea {
 38 |     font-family: Andale Mono, monospace;
 39 |     font-size: 0.9rem;
 40 |     padding: var(--spacing);
 41 |   }
 42 | 
 43 |   textarea {
 44 |     flex: 1;
 45 |     white-space: pre;
 46 |   }
 47 | 
 48 |   form>* {
 49 |     display: block;
 50 |     width: 100%;
 51 |   }
 52 | 
 53 |   button {
 54 |     background-color: var(--figma-color-bg-brand);
 55 |     border: none;
 56 |     color: var(--figma-color-text-onbrand);
 57 |     font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
 58 |       Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
 59 |       sans-serif;
 60 |     font-weight: bold;
 61 |   }
 62 | 
 63 |   select,
 64 |   input,
 65 |   textarea {
 66 |     background-color: var(--figma-color-bg-secondary);
 67 |     color: var(--figma-color-text-secondary);
 68 |     border: 2px solid var(--figma-color-border);
 69 |   }
 70 | 
 71 |   input:focus,
 72 |   textarea:focus {
 73 |     border-color: var(--figma-color-border-selected);
 74 |     outline: none;
 75 |   }
 76 | 
 77 |   select,
 78 |   input {
 79 |     flex: 1;
 80 |   }
 81 | 
 82 |   form .row {
 83 |     display: flex;
 84 |     gap: 0.5rem;
 85 |   }
 86 | </style>
 87 | <form>
 88 |   <div class="row">
 89 |     <select id="collectionSelect"></select>
 90 |     <input placeholder="Collection Name" required type="text" id="collectionInput" />
 91 |   </div>
 92 | 
 93 |   <div class="row">
 94 |     <select id="modeSelect"></select>
 95 |     <input placeholder="Mode Name" required type="text" id="modeInput" />
 96 |   </div>
 97 | 
 98 |   <textarea required placeholder="Tokens JSON">
 99 | {
100 |   "color": {
101 |     "grouptyped": {
102 |       "$type": "color",
103 |       "brown": { "$value": "#a2845e" },
104 |       "danger-deep": { "$value": "{color.valuetyped.danger}" }
105 |     },
106 |     "valuetyped": {
107 |       "red": {
108 |         "$value": "{color.deep.deep.deep.deep.deep}"
109 |       },
110 |       "danger": { "$value": "{color.valuetyped.red}" }
111 |     },
112 |     "deep": {"deep": {"deep": {"deep": {"deep": {"$type": "color", "$value": "#FF0000" }}}}}
113 |   },
114 |   "spacing": {
115 |     "$type": "number",
116 |     "some numbers": {
117 |       "spacer0": {"$value": 0},
118 |       "spacerXs": {"$value": 4},
119 |       "spacerS": {"$value": 8},
120 |       "spacerM": {"$value": 16},
121 |       "spacerX": {"$value": 24},
122 |       "spacerXl": {"$value": 32},
123 |       "spacerXxl": {"$value": 40},
124 |       "spacex": {
125 |         "funniness": {"$value": 0},
126 |         "cleverness": {"$value": 1}
127 |       }
128 |     }
129 |   }
130 | }
131 | </textarea>
132 |   <button type="submit">Import Variables</button>
133 | </form>
134 | 
135 | <script>
136 |   const NEW_VALUE = "new";
137 |   let collections = {};
138 |   const collectionSelect = document.getElementById("collectionSelect");
139 |   const collectionInput = document.getElementById("collectionInput");
140 |   const modeSelect = document.getElementById("modeSelect");
141 |   const modeInput = document.getElementById("modeInput");
142 | 
143 |   function renderOptions(select, newName, options = []) {
144 |     options = [{ name: `+ New ${newName}`, value: NEW_VALUE }, ...options];
145 |     select.innerHTML = options
146 |       .map(
147 |         ({ name, value = name }) => `<option value="${value}">${name}</option>`
148 |       )
149 |       .join("");
150 |     select.value = NEW_VALUE;
151 |   }
152 | 
153 |   window.onmessage = (event) => {
154 |     let message = event.data.pluginMessage;
155 |     let collectionOptions = [];
156 | 
157 |     if (message.type === "LOAD_COLLECTIONS") {
158 |       collections = {};
159 |       const options = [];
160 |       Object.entries(message.collections).forEach(([name, collection]) => {
161 |         collections[collection.id] = collection;
162 |         options.push({
163 |           name,
164 |           value: collection.id,
165 |         });
166 |       });
167 | 
168 |       renderOptions(collectionSelect, "Collection", options);
169 |       handleCollectionChange();
170 |     }
171 | 
172 |     collectionSelect.append(...collectionOptions);
173 |   };
174 | 
175 |   function hideInputElement(inputElement, value) {
176 |     inputElement.style.display = "none";
177 |     // handle the case if it's an existing mode
178 |     inputElement.value = value;
179 |     // disable input
180 |     inputElement.disabled = true;
181 |   }
182 | 
183 |   function showInputElement(inputElement) {
184 |     inputElement.style.display = "block";
185 |     inputElement.disabled = false;
186 |     inputElement.value = "";
187 |   }
188 | 
189 |   function handleCollectionChange() {
190 |     // handle the case if it's a new Collection
191 |     const currentCollection = collections[collectionSelect.value];
192 |     // enable input
193 |     if (collectionSelect.value === NEW_VALUE) {
194 |       showInputElement(collectionInput);
195 |       renderOptions(modeSelect, "Mode");
196 |       handleModeChange();
197 |       collectionInput.focus();
198 |     } else {
199 |       hideInputElement(collectionInput, collectionSelect.value);
200 |       renderOptions(
201 |         modeSelect,
202 |         "Mode",
203 |         currentCollection.modes.map(({ modeId, name }) => ({
204 |           name,
205 |           value: modeId,
206 |         }))
207 |       );
208 |       // set to default mode on collection change
209 |       modeSelect.value = currentCollection.defaultModeId || "new";
210 |       handleModeChange();
211 |     }
212 |   }
213 | 
214 |   function handleModeChange() {
215 |     // enable input
216 |     if (modeSelect.value === NEW_VALUE) {
217 |       showInputElement(modeInput);
218 |       modeInput.focus();
219 |     } else {
220 |       hideInputElement(modeInput, modeSelect.value);
221 |     }
222 |   }
223 | 
224 |   collectionSelect.addEventListener("change", handleCollectionChange);
225 |   modeSelect.addEventListener("change", handleModeChange);
226 | 
227 |   document.querySelector("form").addEventListener("submit", (e) => {
228 |     const selectedCollection = {
229 |       name: collectionInput.value.trim(),
230 |       id: collectionSelect.value === NEW_VALUE ? null : collectionSelect.value,
231 |     };
232 |     const selectedMode = {
233 |       name: modeInput.value.trim(),
234 |       id: modeSelect.value === NEW_VALUE ? null : modeSelect.value,
235 |     };
236 |     const body = document.querySelector("textarea").value.trim();
237 |     e.preventDefault();
238 |     if (isValidJSON(body) && selectedCollection.name) {
239 |       parent.postMessage(
240 |         {
241 |           pluginMessage: {
242 |             selectedCollection,
243 |             selectedMode,
244 |             body,
245 |             type: "IMPORT",
246 |           },
247 |         },
248 |         "*"
249 |       );
250 |     } else {
251 |       alert("Invalid filename or JSON");
252 |     }
253 |   });
254 | 
255 |   function isValidJSON(body) {
256 |     try {
257 |       JSON.parse(body);
258 |       return true;
259 |     } catch (e) {
260 |       return false;
261 |     }
262 |   }
263 | </script>
264 | 


--------------------------------------------------------------------------------
/code.js:
--------------------------------------------------------------------------------
  1 | console.clear();
  2 | 
  3 | function createCollection(selectedCollection, selectedMode) {
  4 |   // collection exists
  5 |   if (selectedCollection.id) {
  6 |     const collection = figma.variables.getVariableCollectionById(
  7 |       selectedCollection.id
  8 |     );
  9 |     let modeId = selectedMode.id;
 10 |     // mode exists
 11 |     if (modeId) {
 12 |       return { collection, modeId };
 13 |     }
 14 | 
 15 |     // otherwise create new mode
 16 |     const newMode = collection.addMode(selectedMode.name);
 17 |     return { collection, modeId: newMode };
 18 |   }
 19 | 
 20 |   // collection doesn't exist, so mode doesn't exist
 21 |   const collection = figma.variables.createVariableCollection(
 22 |     selectedCollection.name
 23 |   );
 24 |   const modeId = collection.modes[0].modeId;
 25 |   collection.renameMode(modeId, selectedMode.name);
 26 |   return { collection, modeId };
 27 | }
 28 | 
 29 | function createToken(variableMap, collection, modeId, type, name, value) {
 30 |   const existingCollection = variableMap[collection.id];
 31 |   let token = existingCollection ? existingCollection[name] : null;
 32 | 
 33 |   if (!token) {
 34 |     token = figma.variables.createVariable(name, collection.id, type);
 35 |   }
 36 |   token.setValueForMode(modeId, value);
 37 |   return token;
 38 | }
 39 | 
 40 | function createVariable(
 41 |   variableMap,
 42 |   collection,
 43 |   modeId,
 44 |   key,
 45 |   valueKey,
 46 |   tokens
 47 | ) {
 48 |   const token = tokens[valueKey];
 49 |   return createToken(variableMap, collection, modeId, token.resolvedType, key, {
 50 |     type: "VARIABLE_ALIAS",
 51 |     id: `${token.id}`,
 52 |   });
 53 | }
 54 | 
 55 | function getExistingCollectionsAndModes() {
 56 |   const collections = figma.variables
 57 |     .getLocalVariableCollections()
 58 |     .reduce((into, collection) => {
 59 |       into[collection.name] = {
 60 |         name: collection.name,
 61 |         id: collection.id,
 62 |         defaultModeId: collection.defaultModeId,
 63 |         modes: collection.modes,
 64 |       };
 65 |       return into;
 66 |     }, {});
 67 | 
 68 |   figma.ui.postMessage({
 69 |     type: "LOAD_COLLECTIONS",
 70 |     collections,
 71 |   });
 72 | }
 73 | 
 74 | function importJSONFile({ selectedCollection, selectedMode, body }) {
 75 |   const json = JSON.parse(body);
 76 |   console.log("IMPORT");
 77 |   const { collection, modeId } = createCollection(
 78 |     selectedCollection,
 79 |     selectedMode
 80 |   );
 81 |   const variableMap = loadExistingVariableMap();
 82 | 
 83 |   const aliases = {};
 84 |   const tokens = {};
 85 |   Object.entries(json).forEach(([key, object]) => {
 86 |     traverseToken({
 87 |       variableMap,
 88 |       collection,
 89 |       modeId,
 90 |       type: json.$type,
 91 |       key,
 92 |       object,
 93 |       tokens,
 94 |       aliases,
 95 |     });
 96 |   });
 97 |   processAliases({ variableMap, collection, modeId, aliases, tokens });
 98 | }
 99 | 
100 | function loadExistingVariableMap() {
101 |   const variables = figma.variables.getLocalVariables();
102 |   const map = {};
103 |   variables.forEach((variable) => {
104 |     map[variable.variableCollectionId] =
105 |       map[variable.variableCollectionId] || {};
106 |     map[variable.variableCollectionId][variable.name] = variable;
107 |   });
108 |   return map;
109 | }
110 | 
111 | function processAliases({ variableMap, collection, modeId, aliases, tokens }) {
112 |   aliases = Object.values(aliases);
113 |   let generations = aliases.length;
114 |   while (aliases.length && generations > 0) {
115 |     for (let i = 0; i < aliases.length; i++) {
116 |       const { key, type, valueKey } = aliases[i];
117 |       const token = tokens[valueKey];
118 |       if (token) {
119 |         aliases.splice(i, 1);
120 |         tokens[key] = createVariable(
121 |           variableMap,
122 |           collection,
123 |           modeId,
124 |           key,
125 |           valueKey,
126 |           tokens
127 |         );
128 |       }
129 |     }
130 |     generations--;
131 |   }
132 | }
133 | 
134 | function isAlias(value) {
135 |   return value.toString().trim().charAt(0) === "{";
136 | }
137 | 
138 | function traverseToken({
139 |   variableMap,
140 |   collection,
141 |   modeId,
142 |   type,
143 |   key,
144 |   object,
145 |   tokens,
146 |   aliases,
147 | }) {
148 |   type = type || object.$type;
149 |   // if key is a meta field, move on
150 |   if (key.charAt(0) === "$") {
151 |     return;
152 |   }
153 |   if (object.$value !== undefined) {
154 |     if (isAlias(object.$value)) {
155 |       const valueKey = object.$value
156 |         .trim()
157 |         .replace(/\./g, "/")
158 |         .replace(/[\{\}]/g, "");
159 |       if (tokens[valueKey]) {
160 |         tokens[key] = createVariable(
161 |           variableMap,
162 |           collection,
163 |           modeId,
164 |           key,
165 |           valueKey,
166 |           tokens
167 |         );
168 |       } else {
169 |         aliases[key] = {
170 |           key,
171 |           type,
172 |           valueKey,
173 |         };
174 |       }
175 |     } else if (type === "color") {
176 |       tokens[key] = createToken(
177 |         variableMap,
178 |         collection,
179 |         modeId,
180 |         "COLOR",
181 |         key,
182 |         parseColor(object.$value)
183 |       );
184 |     } else if (type === "number") {
185 |       tokens[key] = createToken(
186 |         variableMap,
187 |         collection,
188 |         modeId,
189 |         "FLOAT",
190 |         key,
191 |         object.$value
192 |       );
193 |     } else {
194 |       console.log("unsupported type", type, object);
195 |     }
196 |   } else {
197 |     Object.entries(object).forEach(([key2, object2]) => {
198 |       if (key2.charAt(0) !== "$") {
199 |         traverseToken({
200 |           variableMap,
201 |           collection,
202 |           modeId,
203 |           type,
204 |           key: `${key}/${key2}`,
205 |           object: object2,
206 |           tokens,
207 |           aliases,
208 |         });
209 |       }
210 |     });
211 |   }
212 | }
213 | 
214 | function exportToJSON() {
215 |   const collections = figma.variables.getLocalVariableCollections();
216 |   const files = [];
217 |   collections.forEach((collection) =>
218 |     files.push(...processCollection(collection))
219 |   );
220 |   figma.ui.postMessage({ type: "EXPORT_RESULT", files });
221 | }
222 | 
223 | function processCollection({ name, modes, variableIds }) {
224 |   const files = [];
225 |   modes.forEach((mode) => {
226 |     const file = { fileName: `${name}.${mode.name}.tokens.json`, body: {} };
227 |     variableIds.forEach((variableId) => {
228 |       const { name, resolvedType, valuesByMode } =
229 |         figma.variables.getVariableById(variableId);
230 |       const value = valuesByMode[mode.modeId];
231 |       if (value !== undefined && ["COLOR", "FLOAT"].includes(resolvedType)) {
232 |         let obj = file.body;
233 |         name.split("/").forEach((groupName) => {
234 |           obj[groupName] = obj[groupName] || {};
235 |           obj = obj[groupName];
236 |         });
237 |         obj.$type = resolvedType === "COLOR" ? "color" : "number";
238 |         if (value.type === "VARIABLE_ALIAS") {
239 |           obj.$value = `{${figma.variables
240 |             .getVariableById(value.id)
241 |             .name.replace(/\//g, ".")}}`;
242 |         } else {
243 |           obj.$value = resolvedType === "COLOR" ? rgbToHex(value) : value;
244 |         }
245 |       }
246 |     });
247 |     files.push(file);
248 |   });
249 |   return files;
250 | }
251 | 
252 | figma.ui.onmessage = (e) => {
253 |   console.log("code received message", e);
254 |   if (e.type === "IMPORT") {
255 |     const { selectedCollection, selectedMode, body } = e;
256 |     importJSONFile({ selectedCollection, selectedMode, body });
257 |     getExistingCollectionsAndModes();
258 |   } else if (e.type === "EXPORT") {
259 |     exportToJSON();
260 |   }
261 | };
262 | if (figma.command === "import") {
263 |   figma.showUI(__uiFiles__["import"], {
264 |     width: 500,
265 |     height: 500,
266 |     themeColors: true,
267 |   });
268 |   getExistingCollectionsAndModes();
269 | } else if (figma.command === "export") {
270 |   figma.showUI(__uiFiles__["export"], {
271 |     width: 500,
272 |     height: 500,
273 |     themeColors: true,
274 |   });
275 | }
276 | 
277 | function rgbToHex({ r, g, b, a }) {
278 |   if (a !== 1) {
279 |     return `rgba(${[r, g, b]
280 |       .map((n) => Math.round(n * 255))
281 |       .join(", ")}, ${a.toFixed(4)})`;
282 |   }
283 |   const toHex = (value) => {
284 |     const hex = Math.round(value * 255).toString(16);
285 |     return hex.length === 1 ? "0" + hex : hex;
286 |   };
287 | 
288 |   const hex = [toHex(r), toHex(g), toHex(b)].join("");
289 |   return `#${hex}`;
290 | }
291 | 
292 | function parseColor(color) {
293 |   color = color.trim();
294 |   const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/;
295 |   const rgbaRegex =
296 |     /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([\d.]+)\s*\)$/;
297 |   const hslRegex = /^hsl\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*\)$/;
298 |   const hslaRegex =
299 |     /^hsla\(\s*(\d{1,3})\s*,\s*(\d{1,3})%\s*,\s*(\d{1,3})%\s*,\s*([\d.]+)\s*\)$/;
300 |   const hexRegex = /^#([A-Fa-f0-9]{3}){1,2}$/;
301 |   const floatRgbRegex =
302 |     /^\{\s*r:\s*[\d\.]+,\s*g:\s*[\d\.]+,\s*b:\s*[\d\.]+(,\s*opacity:\s*[\d\.]+)?\s*\}$/;
303 | 
304 |   if (rgbRegex.test(color)) {
305 |     const [, r, g, b] = color.match(rgbRegex);
306 |     return { r: parseInt(r) / 255, g: parseInt(g) / 255, b: parseInt(b) / 255 };
307 |   } else if (rgbaRegex.test(color)) {
308 |     const [, r, g, b, a] = color.match(rgbaRegex);
309 |     return {
310 |       r: parseInt(r) / 255,
311 |       g: parseInt(g) / 255,
312 |       b: parseInt(b) / 255,
313 |       a: parseFloat(a),
314 |     };
315 |   } else if (hslRegex.test(color)) {
316 |     const [, h, s, l] = color.match(hslRegex);
317 |     return hslToRgbFloat(parseInt(h), parseInt(s) / 100, parseInt(l) / 100);
318 |   } else if (hslaRegex.test(color)) {
319 |     const [, h, s, l, a] = color.match(hslaRegex);
320 |     return Object.assign(
321 |       hslToRgbFloat(parseInt(h), parseInt(s) / 100, parseInt(l) / 100),
322 |       { a: parseFloat(a) }
323 |     );
324 |   } else if (hexRegex.test(color)) {
325 |     const hexValue = color.substring(1);
326 |     const expandedHex =
327 |       hexValue.length === 3
328 |         ? hexValue
329 |             .split("")
330 |             .map((char) => char + char)
331 |             .join("")
332 |         : hexValue;
333 |     return {
334 |       r: parseInt(expandedHex.slice(0, 2), 16) / 255,
335 |       g: parseInt(expandedHex.slice(2, 4), 16) / 255,
336 |       b: parseInt(expandedHex.slice(4, 6), 16) / 255,
337 |     };
338 |   } else if (floatRgbRegex.test(color)) {
339 |     return JSON.parse(color);
340 |   } else {
341 |     throw new Error("Invalid color format");
342 |   }
343 | }
344 | 
345 | function hslToRgbFloat(h, s, l) {
346 |   const hue2rgb = (p, q, t) => {
347 |     if (t < 0) t += 1;
348 |     if (t > 1) t -= 1;
349 |     if (t < 1 / 6) return p + (q - p) * 6 * t;
350 |     if (t < 1 / 2) return q;
351 |     if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
352 |     return p;
353 |   };
354 | 
355 |   if (s === 0) {
356 |     return { r: l, g: l, b: l };
357 |   }
358 | 
359 |   const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
360 |   const p = 2 * l - q;
361 |   const r = hue2rgb(p, q, (h + 1 / 3) % 1);
362 |   const g = hue2rgb(p, q, h % 1);
363 |   const b = hue2rgb(p, q, (h - 1 / 3) % 1);
364 | 
365 |   return { r, g, b };
366 | }
367 | 


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