@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.45 → 2.0.0-next.49

package/script/download-alert-icons.ts

@@ -0,0 +1,193 @@
+import {Api} from 'figma-api';
+import type {
+  CanvasNode,
+  FrameNode,
+  GetFileResponse,
+  Style,
+  SubcanvasNode,
+} from '@figma/rest-api-spec';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import {
+  IconRef,
+  getCssColorIcon,
+  getStylesForNode,
+  kebabToUpperCamelCase,
+} from './convert-icons.js';
+
+dotenv.config();
+
+const documentId = 'TPoHGyeEtlcpnNekOa4lY3';
+
+const useCache = false;
+
+const iconMapUrl: {url: string; name: string; typeA: boolean}[] = [
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47442&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47508&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-unack',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47481&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47505&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-alarm-silenced',
+    typeA: false,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47445&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: true,
+  },
+  {
+    url: 'https://www.figma.com/file/TPoHGyeEtlcpnNekOa4lY3/OpenBridge-CAM?type=design&node-id=850-47475&mode=design&t=QA1ohadrbRZxW1ss-4',
+    name: '14-warning-unack',
+    typeA: false,
+  },
+];
+
+const iconMap: {id: string; name: string; typeA: boolean}[] = iconMapUrl.map(
+  (icon) => {
+    let id = icon.url.match(/node-id=([0-9/-]+)/)![1];
+    // replace - with :
+    id = id.replace(/-/g, ':');
+    return {id, name: icon.name, typeA: icon.typeA};
+  }
+);
+
+const iconDir = './src/components/alert-icon/icons';
+const cacheDir = './script/.cache/alert-icons';
+
+export async function main() {
+  // delete all icons
+
+  if (fs.existsSync(iconDir)) {
+    const files = fs.readdirSync(iconDir);
+    for (const file of files) {
+      fs.unlinkSync(`${iconDir}/${file}`);
+    }
+  } else {
+    fs.mkdirSync(iconDir);
+  }
+
+  if (!fs.existsSync(cacheDir)) {
+    fs.mkdirSync(cacheDir, {recursive: true});
+  }
+
+  const api_token = process.env.FIGMA_TOKEN;
+  if (!api_token) {
+    throw new Error('FIGMA_TOKEN is not set, please set it in the .env file');
+  }
+
+  const api = new Api({
+    personalAccessToken: api_token,
+  });
+
+  const cachepath = './script/.cache-figma-alert.json';
+  let file: GetFileResponse;
+  if (fs.existsSync(cachepath) && useCache) {
+    file = JSON.parse(fs.readFileSync(cachepath, 'utf8'));
+  } else {
+    file = await api.getFile({file_key: documentId}, {ids: '850:47441'});
+    // save to cache
+    fs.writeFileSync(cachepath, JSON.stringify(file, null, 2));
+  }
+  console.log('Got page');
+  const page = file.document.children.find(
+    (p) => p.name === 'Icons'
+  ) as CanvasNode;
+  const frames = page.children.filter(
+    (child) => child.name === 'Frame 3'
+  ) as FrameNode[];
+  const styles: {[styleId: string]: Style} = file.styles;
+
+  const knownIds = iconMap.map((icon) => icon.id);
+  let icons = frames.flatMap((frame): IconRef[] => {
+    return frame.children
+      .filter((child) => knownIds.includes(child.id))
+      .map((child) => {
+        const icon = iconMap.find((icon) => icon.id === child.id);
+        const name = icon!.name + (icon!.typeA ? '-a' : '-b');
+        const javascriptName = 'svg' + kebabToUpperCamelCase(name);
+        return {
+          name: name,
+          id: child.id,
+          javascriptName: javascriptName,
+          styles: getStylesForNode(child as SubcanvasNode, styles),
+        };
+      });
+  });
+
+  // remove duplicate icon names
+  const seen = new Set();
+  icons = icons.filter((icon) => {
+    const duplicate = seen.has(icon.javascriptName);
+    seen.add(icon.javascriptName);
+    if (duplicate) {
+      console.log('Duplicate icon name', icon.name);
+    }
+    return !duplicate;
+  });
+
+  // download all icons
+  if (!useCache) {
+    const split = 50;
+    for (let i = 0; i < icons.length; i += split) {
+      console.log('Got images', i);
+      const iconChunks = icons.slice(i, i + split);
+      const images = await api.getImages(
+        {file_key: documentId},
+        {
+          ids: iconChunks.map((icon) => icon.id).join(','),
+          scale: 1,
+          format: 'svg',
+        }
+      );
+
+      // write icons to disk
+      await Promise.all(
+        Object.keys(images.images).map(async (nodeId) => {
+          const icon = icons.find((icon) => icon.id === nodeId);
+          const imageUrl = images.images[nodeId];
+          if (icon && imageUrl) {
+            // download icons
+            const request = await fetch(imageUrl);
+            const imageData = await request.text();
+            fs.writeFileSync(`${cacheDir}/${icon.name}.svg`, imageData);
+          }
+        })
+      );
+    }
+  }
+
+  const fileImport: string[] = [];
+  for (const icon of icons) {
+    const imageData = fs.readFileSync(`${cacheDir}/${icon.name}.svg`, 'utf8');
+    const cssColorIcon = getCssColorIcon(imageData, icon);
+
+    // convert icon.name from kebab case to upper cammel case
+    const name = icon.name.toLowerCase();
+
+    const component = `import {svg} from 'lit';
+export const ${icon.javascriptName} = svg\`${cssColorIcon}\`;
+`;
+    fs.writeFileSync(`${iconDir}/icon-${name}.ts`, component);
+    fileImport.push(
+      `import {${icon.javascriptName}} from './icons/icon-${name}';`
+    );
+  }
+
+  fileImport.sort();
+  console.log(fileImport.join('\n'));
+  console.log('done');
+}
+
+main();

package/script/download-icons.ts

@@ -0,0 +1,314 @@
+import {Api} from 'figma-api';
+import type {
+  CanvasNode,
+  ComponentNode,
+  FrameNode,
+  GetFileResponse,
+  Style,
+  SubcanvasNode,
+  TextNode,
+} from '@figma/rest-api-spec';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import {
+  getCssColorIcon,
+  getSingleColorIcon,
+  getStylesForNode,
+  kebabToUpperCamelCase,
+} from './convert-icons.js';
+
+dotenv.config();
+
+interface IconRef {
+  name: string;
+  id: string;
+  javascriptName: string;
+  styles: {[colorCode: string]: {cssClass: string}};
+  categories: string[];
+}
+const documentId = 'IkDwOtza6OdjLbIdWA7mI7';
+
+const useCache = false;
+
+function recursiveFindNodeByPath(
+  node: CanvasNode | FrameNode,
+  path: string[]
+): SubcanvasNode | null {
+  const oldPath = [...path];
+  const name = path.shift();
+  for (const child of node.children) {
+    if (child.name === name) {
+      if (path.length === 0) {
+        return child;
+      }
+      if (child.type === 'FRAME') {
+        return recursiveFindNodeByPath(child, path);
+      }
+      return null;
+    }
+  }
+  for (const child of node.children) {
+    if (child.type === 'FRAME') {
+      const found = recursiveFindNodeByPath(child, oldPath);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+}
+
+function findIconsInPage(
+  node: CanvasNode,
+  styles: {[styleName: string]: Style}
+): IconRef[] {
+  const icons: IconRef[] = [];
+  const pageName = node.name.substring(3); // remove id from name
+  for (const card of node.children) {
+    if (card.type !== 'FRAME') {
+      continue;
+    }
+    if (card.name === '.Navigation-bar') {
+      continue;
+    }
+    if (card.name === 'filter') {
+      continue;
+    }
+    if (
+      ['3420:28660', '3420:31035', '3420:32585', '3427:38428'].includes(card.id)
+    ) {
+      // Scip "Intro cards"
+      continue;
+    }
+    const sectionTitle = recursiveFindNodeByPath(card, [
+      'Icon section title',
+      'Text container',
+      'Title',
+    ]) as FrameNode | null;
+    if (!sectionTitle) {
+      console.error(
+        'No section title found. Page: ' + pageName + ' Card: ' + card.name
+      );
+      continue;
+    }
+    const sectionTitleText = sectionTitle.children[1] as TextNode;
+    const title = sectionTitleText.characters;
+    const newIcons = recursiveFindIcons(card, [pageName, title], styles);
+    console.log(
+      'Found ' +
+        newIcons.map((icon) => icon.name).join(', ') +
+        ' icons in section: ' +
+        title +
+        ' on page: ' +
+        pageName
+    );
+    icons.push(...newIcons);
+  }
+  return icons;
+}
+
+function recursiveFindIcons(
+  node: FrameNode,
+  categories: string[],
+  styles: {[styleName: string]: Style}
+): IconRef[] {
+  const icons = node.children
+    .filter(
+      (child): child is ComponentNode =>
+        child.type === 'COMPONENT' &&
+        !['01-illustration', '0-illustration'].includes(child.name)
+    )
+    .map((icon) => createIconRef(icon, styles, categories));
+  const frames = node.children.filter(
+    (child): child is FrameNode => child.type === 'FRAME'
+  );
+  for (const frame of frames) {
+    icons.push(...recursiveFindIcons(frame, categories, styles));
+  }
+  return icons;
+}
+
+export async function main() {
+  // delete all icons
+  const iconDir = './src/icons';
+  if (fs.existsSync(iconDir)) {
+    const files = fs.readdirSync(iconDir);
+    for (const file of files.filter((file) => file !== 'icon.ts')) {
+      fs.unlinkSync(`${iconDir}/${file}`);
+    }
+  } else {
+    fs.mkdirSync(iconDir);
+  }
+
+  const api_token = process.env.FIGMA_TOKEN;
+  if (!api_token) {
+    throw new Error('FIGMA_TOKEN is not set, please set it in the .env file');
+  }
+
+  const api = new Api({
+    personalAccessToken: api_token,
+  });
+
+  const cachepath = './script/.cache-figma.json';
+  let file: GetFileResponse;
+  const cacheExists = fs.existsSync(cachepath);
+  const cacheIsOld =
+    cacheExists &&
+    fs.statSync(cachepath).mtime.getTime() < Date.now() - 1000 * 60 * 60;
+  if (cacheExists && useCache && !cacheIsOld) {
+    file = JSON.parse(fs.readFileSync(cachepath, 'utf8'));
+  } else {
+    file = await api.getFile({file_key: documentId});
+    // save to cache
+    fs.writeFileSync(cachepath, JSON.stringify(file));
+  }
+
+  const pages = file.document.children.filter(
+    (p) => !['3512:9655', '3597:122', '3427:38027'].includes(p.id)
+  );
+  const styles = file.styles;
+
+  let icons: IconRef[] = [];
+
+  for (const page of pages) {
+    icons.push(...findIconsInPage(page as CanvasNode, styles));
+  }
+
+  // remove duplicate icon names
+  const seen = new Set();
+  icons = icons.filter((icon) => {
+    const duplicate = seen.has(icon.javascriptName);
+    seen.add(icon.javascriptName);
+    if (duplicate) {
+      console.log('Duplicate icon name', icon.name);
+    }
+    return !duplicate;
+  });
+
+  const iconsToDownload = useCache
+    ? icons.filter((icon) => {
+        return !fs.existsSync(`./script/.cache/icons/${icon.name}.svg`);
+      })
+    : icons;
+
+  // download icons
+
+  const split = 50;
+  for (let i = 0; i < iconsToDownload.length; i += split) {
+    console.log('Got images', i);
+    const iconChunks = iconsToDownload.slice(i, i + split);
+    const images = await api.getImages(
+      {file_key: documentId},
+      {
+        ids: iconChunks.map((icon) => icon.id).join(','),
+        scale: 1,
+        format: 'svg',
+      }
+    );
+
+    // write icons to disk
+    await Promise.all(
+      Object.keys(images.images).map(async (nodeId) => {
+        const icon = icons.find((icon) => icon.id === nodeId);
+        const imageUrl = images.images[nodeId];
+        if (icon && imageUrl) {
+          // download icons
+          const request = await fetch(imageUrl);
+          const imageData = await request.text();
+          fs.writeFileSync(`./script/.cache/icons/${icon.name}.svg`, imageData);
+        }
+      })
+    );
+  }
+
+  const scriptMapping: string[] = [];
+  const fileImport: string[] = [];
+  for (const icon of icons) {
+    const imageData = fs.readFileSync(
+      `./script/.cache/icons/${icon.name}.svg`,
+      'utf8'
+    );
+    const cssColorIcon = getCssColorIcon(imageData, icon);
+    const singleColorIcon = getSingleColorIcon(imageData, icon);
+
+    // convert icon.name from kebab case to upper cammel case
+    const upperCammelCaseName = kebabToUpperCamelCase(icon.name);
+    const name = icon.name.toLowerCase();
+
+    const component = `import {LitElement, html, css, svg} from 'lit';
+import {property} from 'lit/decorators.js';
+import {customElement} from '../decorator.js';
+
+@customElement('obi-${name}')
+export class Obi${upperCammelCaseName} extends LitElement {
+  @property({type: Boolean}) useCssColor = false;
+
+  private icon = svg\`${singleColorIcon}\`;
+
+  private iconCss = svg\`${cssColorIcon}\`;
+
+  override render() {
+    return html\`
+      <div class="wrapper">\${this.useCssColor ? this.iconCss : this.icon}</div>
+    \`;
+  }
+
+
+  static override styles = css\`
+  .wrapper {
+    height: 100%;
+    width: 100%;
+    line-height: 0;
+  }
+  .wrapper > * {
+      height: 100%;
+      width: 100%;
+    }
+  \`;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obi-${name}': Obi${upperCammelCaseName};
+  }
+}`;
+    fs.writeFileSync(`./src/icons/icon-${name}.ts`, component);
+    fileImport.push(`import './icon-${name}.js';`);
+
+    scriptMapping.push(`'${icon.name}': ['${icon.categories.join("', '")}']`);
+  }
+
+  // write script
+  const script = `export const iconIds: Record<string, string[]> = {
+    ${scriptMapping.sort().join(',\n')}
+};
+`;
+  fs.writeFileSync('./src/icons/names.ts', script);
+  fileImport.sort();
+  fileImport.push('export { ObiIcon } from "./icon.js";');
+  fs.writeFileSync('./src/icons/index.ts', fileImport.join('\n'));
+  console.log('done');
+}
+
+main();
+function createIconRef(
+  child: ComponentNode,
+  styles: {[styleName: string]: Style},
+  categories: string[] = []
+): IconRef {
+  const name = child.name
+    .toLocaleLowerCase()
+    .replace(/æ/g, 'ae')
+    .replace(/ø/g, 'oe')
+    .replace(/å/g, 'aa')
+    .replace(/ /g, '')
+    .replace(/%/g, '');
+  const javascriptName = 'svg' + name.replace(/[^a-zA-Z0-9]/g, '');
+  return {
+    name: name,
+    id: child.id,
+    javascriptName: javascriptName,
+    styles: getStylesForNode(child, styles),
+    categories: categories,
+  };
+}

package/script/figmavariables.json

@@ -0,0 +1,139 @@
+{
+  "VariableID:1b39a46721c3451d87c9b07292b9fef6ae86b874/27539:50": "border-outline-color",
+  "VariableID:12d856ec4be56c9428e360d289d1b27048893dc3/27539:228": "automation-device-tertiary-inverted-color",
+  "VariableID:b188d8bb01ab018e9472eb2b71b6df846fa0b80e/27539:225": "automation-device-tertiary-color",
+  "VariableID:1dc272bd7d84b93d2f356c26f1e99c3f5c6fadb2/27539:223": "automation-device-primary-color",
+  "VariableID:3f19014afa97397dfb54ae295c580a41a0b96f54/27539:68": "alert-alarm-color",
+  "VariableID:04ae28536959a8c36d4412f7c25e27c2ab26cf5f/27539:414": "alert-alarm-outline-color",
+  "VariableID:ba05439bbd06c4f8ff0beb10a2d95a53254be2ca/27539:71": "on-alarm-color",
+  "VariableID:dcd704e2dcb29496b7ec52bf1b9ae2285391fdda/27539:214": "on-alarm-active-color",
+  "VariableID:3c2fba1b9d8d6c8f8df87dbaa11a941a87dff69e/27539:69": "alert-warning-color",
+  "VariableID:028a6015d864bf94d8ca7d2917be854b87900e69/27539:325": "alert-warning-outline-color",
+  "VariableID:37074b7dccecb7d93c4f989d3cf156c319fac32d/27539:211": "on-warning-active-color",
+  "VariableID:8639304f251cc403fa6886b8c3652e4ef3795d6c/27539:78": "alert-running-color",
+  "VariableID:f5ea9b3d63742557e8ad8331b352e851c7ca04bc/27539:317": "on-running-active-color",
+  "VariableID:66712a120176392fb4f3229ddfa4b9feb1f489c1/27539:70": "alert-caution-color",
+  "VariableID:85fbc997d1f2213fafb26798f95e66e7f44fd0dc/27539:324": "alert-caution-outline-color",
+  "VariableID:7947ce7f6fe244fd57d473dfed7d1adc7933bb64/27539:208": "on-caution-active-color",
+  "VariableID:d97299ff03540d70ef100f2bc71618ee65760666/27539:195": "indent-enabled-background-color",
+  "VariableID:bdc3858e7ec77df8164471d55c165a8bb165a319/27539:196": "indent-enabled-border-color",
+  "VariableID:e1180c439049346db7bf1bffc0a848f21dc90d69/27539:43": "element-neutral-color",
+  "VariableID:0fbed0fce14adf342e3004730ed5563681147068/27539:74": "element-active-inverted-color",
+  "VariableID:971117b0dddce7e8b6326d986c384e7d7375c87a/27539:183": "data-weather-sun-primary-color",
+  "VariableID:40666ac8e01d54159d7eaa8935c426a80789ac21/27539:184": "data-weather-sun-secondary-color",
+  "VariableID:d8cfac56a2a220455295dc0628385e942e8c46ab/27539:185": "data-weather-cloud-light-primary-color",
+  "VariableID:7badfeb3d88a66838f8cb7d4b115bf70e35c3e84/27539:186": "data-weather-cloud-light-seconday-color",
+  "VariableID:778aa43d12101e8aab99f0258191b8a2d258f0b5/27539:221": "data-weather-cloud-primary-color",
+  "VariableID:4ce6619ec54c1f6d80c9e5fb6c68349363402c66/27539:220": "data-weather-cloud-seconday-color",
+  "VariableID:152bfe36b2e029763836d9997634e1431f793fab/27539:192": "data-weather-rain-primary-color",
+  "VariableID:fad3f7c9335c9c30cf318c4b0937db1b2f2799c0/27539:187": "data-weather-cloud-rain-primary-color",
+  "VariableID:ad5f861a79e6705713ab94a85944a491334bc9af/27539:188": "data-weather-cloud-rain-secondary-color",
+  "VariableID:a7a0997bbb102160d04b582aa4ea7409409132ff/27539:190": "data-weather-cloud-heavy-primary-color",
+  "VariableID:b49c7f446bb89bc9315113cc7c455fd37d8178e5/27539:189": "data-weather-cloud-heavy-secondary-color",
+  "VariableID:745adc5453dc04b30e6263b876b57b15ad7cbad8/27539:193": "data-weather-lightning-primary-color",
+  "VariableID:af5e0ab99006df951da2a87d494e101dfdd245f1/27539:191": "data-weather-snow-primary-color",
+  "VariableID:ee68310f2c297c0cfdf7eaaf563b70589bf89cd5/27539:194": "data-weather-moon-primary-color",
+  "VariableID:1e5e649fcf32a3d37c17dfb6b47624db51998ebe/27539:61": "instrument-tick-mark-secondary-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/27539:226": "automation-device-primary-inverted-color",
+  "VariableID:45c59cee99f65610be0052ca4f056343a68db215/27539:285": "automation-pipe-primary-color",
+  "VariableID:38f5e367af8c33083d86f11a32c887a35a99f574/27539:287": "automation-pipe-tertiary-color",
+  "VariableID:6936f32a01f07189d16fe2925a6db067e5da4b01/27539:150": "navigation-light-yellow-color",
+  "VariableID:bc6744610e304d3527fdcbc339272f690dbac331/27539:149": "navigation-light-red-color",
+  "VariableID:8e3473b6a468663b814d3cbc8ba21441099a6522/27539:148": "navigation-light-green-color",
+  "VariableID:8da084358336f923a341e5ebf490ca7440a1595e/27539:45": "element-disabled-color",
+  "VariableID:52957003cecd36ac7cfef85a6eb615644ab157fb/27539:47": "container-background-color",
+  "VariableID:66712a120176392fb4f3229ddfa4b9feb1f489c1/26029:960": "alert-caution-color",
+  "VariableID:5f95286e7464c24855fd5968136fc446fdd7fd75/26029:963": "on-caution-color",
+  "VariableID:f9f95a44a756439f6cc70f7384bd184932714bf9/27539:224": "automation-device-secondary-color",
+  "VariableID:9e87ee011b9e69609351ed65156519e5c1cd61a1/20358:1244": "on-indent-neutral-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/27539:42": "element-active-color",
+  "VariableID:f9f0737e0ae154a81b9defc2a3e8180e7ff73527/1180:8": "active-text",
+  "VariableID:f0e04b849b5b3118f8a2cdc5019ffe26b6969ee7/20358:304": "base-cyan-100",
+  "VariableID:70464ca2671a0c8873a63874890228c2b3e83cec/20358:1241": "on-normal-neutral-color",
+  "VariableID:a36dd8a3bfb87cbfede2a2e0cca5990b155a4947/20358:134": "on-warning-color",
+  "VariableID:c0bd5311474512cc976c304aea390a01f3dfb663/20358:288": "on-running-color",
+  "VariableID:4adefb0a443c39e9e48c98ea96dbefe5e39ccb03/20546:22": "container-section-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/25623:784": "element-active-color",
+  "VariableID:23e14f7dd8a9a2a5e35e0cb1e26a4c8ff820c197/20358:223": "warning-enabled-background-color",
+  "VariableID:5cebb65b885cfc047ae8ac8781dd44644dbfcde8/20358:1262": "on-indent-active-color",
+  "VariableID:fcdf82685406e2fd5689411671980ac76428f6e7/20358:275": "on-alarm-neutral-color",
+  "VariableID:1dc272bd7d84b93d2f356c26f1e99c3f5c6fadb2/24272:183": "automation-device-primary-color",
+  "VariableID:38f5e367af8c33083d86f11a32c887a35a99f574/8048:692": "automation-pipe-tertiary-color",
+  "VariableID:f041eb0e7a839819ea5b173a176a3d38ca501455/20546:5": "container-global-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/26029:932": "element-active-color",
+  "VariableID:b188d8bb01ab018e9472eb2b71b6df846fa0b80e/24272:185": "automation-device-tertiary-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/24272:186": "automation-device-primary-inverted-color",
+  "VariableID:12d856ec4be56c9428e360d289d1b27048893dc3/24272:188": "automation-device-tertiary-inverted-color",
+  "VariableID:f9f95a44a756439f6cc70f7384bd184932714bf9/24272:184": "automation-device-secondary-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/26029:1115": "automation-device-primary-inverted-color",
+  "VariableID:f9f95a44a756439f6cc70f7384bd184932714bf9/26029:1113": "automation-device-secondary-color",
+  "VariableID:e1180c439049346db7bf1bffc0a848f21dc90d69/3040:838": "element-neutral-color",
+  "VariableID:1b39a46721c3451d87c9b07292b9fef6ae86b874/3040:664": "border-outline-color",
+  "VariableID:1b39a46721c3451d87c9b07292b9fef6ae86b874/20546:146": "border-outline-color",
+  "VariableID:45c59cee99f65610be0052ca4f056343a68db215/26029:1307": "automation-pipe-primary-color",
+  "VariableID:38f5e367af8c33083d86f11a32c887a35a99f574/26029:1309": "automation-pipe-tertiary-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/24272:2": "element-active-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/20358:1257": "element-active-color",
+  "VariableID:12d856ec4be56c9428e360d289d1b27048893dc3/20594:0": "automation-device-tertiary-inverted-color",
+  "VariableID:b188d8bb01ab018e9472eb2b71b6df846fa0b80e/20413:11": "automation-device-tertiary-color",
+  "VariableID:1dc272bd7d84b93d2f356c26f1e99c3f5c6fadb2/20413:9": "automation-device-primary-color",
+  "VariableID:f9f95a44a756439f6cc70f7384bd184932714bf9/20413:10": "automation-device-secondary-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/5881:138": "element-active-color",
+  "VariableID:3f19014afa97397dfb54ae295c580a41a0b96f54/20358:130": "alert-alarm-color",
+  "VariableID:04ae28536959a8c36d4412f7c25e27c2ab26cf5f/20358:793": "alert-alarm-outline-color",
+  "VariableID:ba05439bbd06c4f8ff0beb10a2d95a53254be2ca/20546:145": "on-alarm-color",
+  "VariableID:dcd704e2dcb29496b7ec52bf1b9ae2285391fdda/20546:141": "on-alarm-active-color",
+  "VariableID:3c2fba1b9d8d6c8f8df87dbaa11a941a87dff69e/20358:131": "alert-warning-color",
+  "VariableID:028a6015d864bf94d8ca7d2917be854b87900e69/20358:370": "alert-warning-outline-color",
+  "VariableID:37074b7dccecb7d93c4f989d3cf156c319fac32d/20358:271": "on-warning-active-color",
+  "VariableID:8639304f251cc403fa6886b8c3652e4ef3795d6c/20358:140": "alert-running-color",
+  "VariableID:f5ea9b3d63742557e8ad8331b352e851c7ca04bc/20546:142": "on-running-active-color",
+  "VariableID:66712a120176392fb4f3229ddfa4b9feb1f489c1/20358:132": "alert-caution-color",
+  "VariableID:85fbc997d1f2213fafb26798f95e66e7f44fd0dc/20358:369": "alert-caution-outline-color",
+  "VariableID:7947ce7f6fe244fd57d473dfed7d1adc7933bb64/20358:268": "on-caution-active-color",
+  "VariableID:d97299ff03540d70ef100f2bc71618ee65760666/20546:24": "indent-enabled-background-color",
+  "VariableID:bdc3858e7ec77df8164471d55c165a8bb165a319/20358:1148": "indent-enabled-border-color",
+  "VariableID:e1180c439049346db7bf1bffc0a848f21dc90d69/20358:1239": "element-neutral-color",
+  "VariableID:0fbed0fce14adf342e3004730ed5563681147068/20358:136": "element-active-inverted-color",
+  "VariableID:971117b0dddce7e8b6326d986c384e7d7375c87a/20358:243": "data-weather-sun-primary-color",
+  "VariableID:40666ac8e01d54159d7eaa8935c426a80789ac21/20358:244": "data-weather-sun-secondary-color",
+  "VariableID:d8cfac56a2a220455295dc0628385e942e8c46ab/20508:31": "data-weather-cloud-light-primary-color",
+  "VariableID:7badfeb3d88a66838f8cb7d4b115bf70e35c3e84/20508:32": "data-weather-cloud-light-seconday-color",
+  "VariableID:778aa43d12101e8aab99f0258191b8a2d258f0b5/20508:45": "data-weather-cloud-primary-color",
+  "VariableID:4ce6619ec54c1f6d80c9e5fb6c68349363402c66/20508:44": "data-weather-cloud-seconday-color",
+  "VariableID:152bfe36b2e029763836d9997634e1431f793fab/20508:38": "data-weather-rain-primary-color",
+  "VariableID:fad3f7c9335c9c30cf318c4b0937db1b2f2799c0/20508:33": "data-weather-cloud-rain-primary-color",
+  "VariableID:ad5f861a79e6705713ab94a85944a491334bc9af/20508:34": "data-weather-cloud-rain-secondary-color",
+  "VariableID:a7a0997bbb102160d04b582aa4ea7409409132ff/20508:36": "data-weather-cloud-heavy-primary-color",
+  "VariableID:b49c7f446bb89bc9315113cc7c455fd37d8178e5/20508:35": "data-weather-cloud-heavy-secondary-color",
+  "VariableID:745adc5453dc04b30e6263b876b57b15ad7cbad8/20508:39": "data-weather-lightning-primary-color",
+  "VariableID:af5e0ab99006df951da2a87d494e101dfdd245f1/20508:37": "data-weather-snow-primary-color",
+  "VariableID:ee68310f2c297c0cfdf7eaaf563b70589bf89cd5/20508:40": "data-weather-moon-primary-color",
+  "VariableID:1e5e649fcf32a3d37c17dfb6b47624db51998ebe/20546:4": "instrument-tick-mark-secondary-color",
+  "VariableID:4adefb0a443c39e9e48c98ea96dbefe5e39ccb03/27539:48": "container-section-color",
+  "VariableID:12d856ec4be56c9428e360d289d1b27048893dc3/25146:860": "automation-device-tertiary-inverted-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/25146:858": "automation-device-primary-inverted-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/20413:12": "automation-device-primary-inverted-color",
+  "VariableID:12d856ec4be56c9428e360d289d1b27048893dc3/25990:2991": "automation-device-tertiary-inverted-color",
+  "VariableID:da6590ed7619907bed81207a16c3a1aaa8997c60/25990:1733": "automation-device-primary-inverted-color",
+  "VariableID:45c59cee99f65610be0052ca4f056343a68db215/20413:16": "automation-pipe-primary-color",
+  "VariableID:38f5e367af8c33083d86f11a32c887a35a99f574/20413:18": "automation-pipe-tertiary-color",
+  "VariableID:6936f32a01f07189d16fe2925a6db067e5da4b01/20508:27": "navigation-light-yellow-color",
+  "VariableID:bc6744610e304d3527fdcbc339272f690dbac331/20508:26": "navigation-light-red-color",
+  "VariableID:8e3473b6a468663b814d3cbc8ba21441099a6522/20508:25": "navigation-light-green-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/3040:832": "element-active-color",
+  "VariableID:8da084358336f923a341e5ebf490ca7440a1595e/20358:1133": "element-disabled-color",
+  "VariableID:52957003cecd36ac7cfef85a6eb615644ab157fb/20358:109": "container-background-color",
+  "VariableID:fcdf82685406e2fd5689411671980ac76428f6e7/27539:215": "on-alarm-neutral-color",
+  "VariableID:5f95286e7464c24855fd5968136fc446fdd7fd75/27539:73": "on-caution-color",
+  "VariableID:23e14f7dd8a9a2a5e35e0cb1e26a4c8ff820c197/27539:163": "warning-enabled-background-color",
+  "VariableID:f041eb0e7a839819ea5b173a176a3d38ca501455/27539:46": "container-global-color",
+  "VariableID:f9f0737e0ae154a81b9defc2a3e8180e7ff73527/1358:1": "active-text",
+  "VariableID:f0e04b849b5b3118f8a2cdc5019ffe26b6969ee7/27539:257": "base-cyan-100",
+  "VariableID:70464ca2671a0c8873a63874890228c2b3e83cec/27539:104": "on-normal-neutral-color",
+  "VariableID:a36dd8a3bfb87cbfede2a2e0cca5990b155a4947/27539:72": "on-warning-color",
+  "VariableID:c0bd5311474512cc976c304aea390a01f3dfb663/27539:229": "on-running-color",
+  "VariableID:5cebb65b885cfc047ae8ac8781dd44644dbfcde8/28770:94": "on-indent-active-color",
+  "VariableID:9e87ee011b9e69609351ed65156519e5c1cd61a1/28770:96": "on-indent-neutral-color",
+  "VariableID:e3ac1ca4108adbc16e84057f77a9b318f3497f5d/33216:2576": "element-active-color"
+}