@oicl/openbridge-webcomponents 0.0.4

package/postcss.config.cjs

@@ -0,0 +1,124 @@
+const path = require('path');
+
+function colors({
+  style,
+  state,
+  psudoClass,
+  className,
+  visibleWrapperClass,
+  otherParameters,
+}) {
+  let selector = '&';
+  if (psudoClass != null) {
+    selector += `:${psudoClass}`;
+  }
+  if (className) {
+    selector = `${selector}.${className}`;
+  }
+  if (visibleWrapperClass) {
+    selector = `${selector} ${visibleWrapperClass}`;
+  }
+  return {
+    [selector]: {
+      'border-color': `var(--${style}-${state}-border-color)`,
+      'background-color': `var(--${style}-${state}-background-color)`,
+      ...otherParameters,
+    },
+  };
+}
+
+// Split the params by space and equal sign
+// style=primary wrapperClass=wrapperClass => { style: "primary",  wrapperClass: "wrapperClass" }
+function parseParams(params) {
+  const paramsArray = params.split(' ');
+  const paramsObject = {};
+  paramsArray.forEach((param) => {
+    const [key, value] = param.split('=');
+    if (value === undefined) return;
+    paramsObject[key] = value;
+  });
+  if (!paramsObject.style) {
+    throw new Error('style is required');
+  }
+  return {
+    style: paramsObject.style,
+    visibleWrapperClass: paramsObject.visibleWrapperClass,
+  };
+}
+
+// use mixin @mixin style=normal visibleWrapperClass=.visibleWrapperClass"
+const styleMixin = (data) => {
+  const params = parseParams(data.params);
+
+  let focusVisibleWrapper = '&:focus-visible';
+  if (params.visibleWrapperClass) {
+    focusVisibleWrapper = `${focusVisibleWrapper} ${params.visibleWrapperClass}`;
+  }
+
+  const result = {
+    '&': {
+      cursor: 'pointer',
+    },
+    '&:focus': {
+      outline: 'none',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'activated',
+      className: 'activated',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'enabled',
+      otherParameters: {
+        'border-width': '1px',
+        'border-style': 'solid',
+        cursor: 'pointer',
+      },
+    }),
+    [focusVisibleWrapper]: {
+      'outline-color': 'hsla(211, 100%, 44%, 0.3)',
+      'outline-width': '4px',
+      'outline-style': 'solid',
+    },
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'hover',
+      psudoClass: 'hover',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'pressed',
+      psudoClass: 'active',
+    }),
+    ...colors({
+      ...params,
+      style: params.style,
+      state: 'disabled',
+      psudoClass: 'disabled',
+      otherParameters: {
+        cursor: 'not-allowed',
+        color: `var(--on-${params.style}-disabled-color)`,
+      },
+    }),
+  };
+  return result;
+};
+
+module.exports = (ctx) => ({
+  parser: ctx.parser ? 'sugarss' : false,
+  map: ctx.env === 'development' ? ctx.map : false,
+  plugins: {
+    'postcss-mixins': {
+      mixinsDir: path.join(__dirname, 'src', 'mixins'),
+      mixins: {
+        style: styleMixin,
+      },
+    },
+    'postcss-nesting': {},
+  },
+});

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/script/download-icons.ts

@@ -0,0 +1,318 @@
+import * as Figma from 'figma-api';
+import * as dotenv from 'dotenv';
+import * as fs from 'fs';
+import {GetFileResult} from 'figma-api/lib/api-types';
+
+dotenv.config();
+
+interface IconRef {
+  name: string;
+  id: string;
+  javascriptName: string;
+  styles: {[colorCode: string]: {cssClass: string}};
+}
+const documentId = '97IQwfn2ybi9Cas78ei8BE';
+const pageId = '3861-87027';
+
+const useCache = true;
+
+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) {
+      fs.unlinkSync(`${iconDir}/${file}`);
+    }
+  } else {
+    fs.mkdirSync(iconDir);
+  }
+
+  const api = new Figma.Api({
+    personalAccessToken: process.env.FIGMA_TOKEN as string,
+  });
+
+  const cachepath = './script/.cache-figma.json';
+  let file: GetFileResult;
+  if (fs.existsSync(cachepath) && useCache) {
+    file = JSON.parse(fs.readFileSync(cachepath, 'utf8'));
+  } else {
+    file = await api.getFile(documentId, {ids: [pageId]});
+    // save to cache
+    fs.writeFileSync(cachepath, JSON.stringify(file));
+  }
+  console.log('Got page');
+  const page = file.document.children.find(
+    (child) => child.name === 'I1 Icons and lines'
+  ) as Figma.Node<'CANVAS'>;
+  const styles = file.styles;
+
+  // filter all frames with name starting with two digits
+  const frames = page!.children.filter(
+    (child) =>
+      child.name.match(/^\d{2}/) &&
+      child.name !== '01 App documentation template'
+  ) as Figma.Node<'FRAME'>[];
+  let icons = frames.flatMap((frame): IconRef[] => {
+    return frame.children.map((child) => {
+      const name = child.name.replace(/ /g, '');
+      const javascriptName = 'svg' + name.replace(/[^a-zA-Z0-9]/g, '');
+      return {
+        name: name,
+        id: child.id,
+        javascriptName: javascriptName,
+        styles: getStylesForNode(child, 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.getImage(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 {customElement, property} from 'lit/decorators.js';
+
+@customElement('obi-${name}')
+export class Obi${upperCammelCaseName} extends LitElement {
+  @property({type: Boolean, attribute: 'use-css-color'}) 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 = unsafeCSS(css)\`
+  .wrapper {
+    height: 100%;
+    width: 100%;
+  }
+  .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}';`);
+
+    scriptMapping.push(`'${icon.name}'`);
+  }
+
+  // write script
+  const script = `export const iconIds: string[] = [
+    ${scriptMapping.sort().join(',\n')}
+];
+`;
+  fs.writeFileSync('./src/icons/names.ts', script);
+  fileImport.sort();
+  fs.writeFileSync('./src/icons/index.ts', fileImport.join('\n'));
+  console.log('done');
+}
+
+function getSingleColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="[^"]+"/g;
+  const replace = 'fill="currentColor"';
+  let imageDataNew = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageDataNew = imageDataNew.replace(fillOpacityRegex, '');
+
+  return imageDataNew;
+}
+
+function getCssColorIcon(imageData: string, icon: IconRef): string {
+  // replace fill color with currentColor
+  const fillRegex = /fill="([^"]+)"/g;
+
+  const replace = (match: string, color: string) => {
+    const cssClass = icon.styles[color];
+    if (cssClass === undefined) {
+      if (color === 'black') return 'fill="currentColor"';
+      if (color === 'none') return 'fill="none"';
+      if (color === 'white') return 'fill="none"';
+      console.warn(
+        'No css class for color',
+        color,
+        icon.name,
+        Object.keys(icon.styles)
+      );
+      return 'fill="currentColor"';
+    }
+    return `style="fill: var(--${cssClass.cssClass})"`;
+  };
+  imageData = imageData.replace(fillRegex, replace);
+
+  // remove fillOpacity
+  const fillOpacityRegex = /fill-opacity="[^"]+"/g;
+  imageData = imageData.replace(fillOpacityRegex, '');
+
+  return imageData;
+}
+
+function kebabToUpperCamelCase(kebabCase: string): string {
+  const words = kebabCase.replace(/ /g, '').split('-');
+  const upperCamelCase = words
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join('');
+  return upperCamelCase;
+}
+
+function getStylesForNode(
+  node: Figma.Node,
+  styles: {[styleId: string]: Figma.Style}
+): {[colorCode: string]: {cssClass: string}} {
+  let out = {};
+
+  if ('children' in node) {
+    for (const child of node.children) {
+      out = {...out, ...getStylesForNode(child, styles)};
+      if ('fills' in child && 'styles' in child) {
+        let fils: string | undefined;
+        child.fills.forEach((fill) => {
+          if (fill.type === 'SOLID') {
+            if (fils !== undefined) {
+              console.warn(
+                'Multiple fills',
+                fils,
+                rgbaToHexOrColorName(fill.color!)
+              );
+            }
+            fils = rgbaToHexOrColorName(fill.color!);
+          }
+        });
+        if (fils !== undefined && child.styles && 'fill' in child.styles) {
+          const styleId = child.styles.fill as string;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[fils] = {cssClass: cssClass};
+        }
+      }
+      if ('strokes' in child && 'styles' in child) {
+        let strokes: string;
+        child.strokes.forEach((fill) => {
+          if (fill.type === 'SOLID') {
+            if (strokes !== undefined) {
+              console.warn(
+                'Multiple strokes',
+                strokes,
+                rgbaToHexOrColorName(fill.color!)
+              );
+            }
+            strokes = rgbaToHexOrColorName(fill.color!);
+          }
+        });
+        if (strokes !== undefined && child.styles?.stroke) {
+          const styleId = child.styles.stroke;
+          const figmaStyle = styles[styleId];
+          const cssClass = styleToCssClass(figmaStyle);
+          out[strokes] = {cssClass: cssClass};
+        }
+      }
+      if ('fillOverrideTable' in child) {
+        for (const fill of Object.values(child.fillOverrideTable)) {
+          if (fill === null) continue;
+          if (!('inheritFillStyleId' in fill)) continue;
+          const styleId = fill.inheritFillStyleId;
+          const figmaStyle = styles[styleId];
+          const color = rgbaToHexOrColorName(fill.fills[0].color!);
+          const cssClass = styleToCssClass(figmaStyle);
+          out[color] = {cssClass: cssClass};
+        }
+      }
+    }
+  }
+  return out;
+}
+
+function decimalToHex(d: number): string {
+  const v = Math.round(d * 255).toString(16);
+  return v.length === 1 ? `0${v}` : v;
+}
+
+function rgbaToHexOrColorName(rgba: Figma.Color): string {
+  const isBlack = rgba.r === 0 && rgba.g === 0 && rgba.b === 0 && rgba.a === 1;
+  const isWhite = rgba.r === 1 && rgba.g === 1 && rgba.b === 1 && rgba.a === 1;
+  if (isBlack) {
+    return 'black';
+  } else if (isWhite) {
+    return 'white';
+  } else {
+    return `#${decimalToHex(rgba.r)}${decimalToHex(rgba.g)}${decimalToHex(
+      rgba.b
+    )}`.toUpperCase();
+  }
+}
+
+function styleToCssClass(style: Figma.Style): string {
+  return style.name.replace(/[\/ ]/g, '-').toLocaleLowerCase();
+}
+
+main();

package/script/svg-instruments/convert-svg.ts

@@ -0,0 +1,246 @@
+import {FrameNode, StyleDict, StyledNode} from './figma-types';
+import {DOMParser, XMLSerializer} from 'xmldom';
+
+function childNodes2Elements(nodes: NodeListOf<ChildNode>): Element[] {
+  const data = [];
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i];
+    if (node.nodeName === '#text') continue;
+    if (node.nodeName === 'defs') continue;
+    data.push(node as Element);
+  }
+  return data;
+}
+
+function getSvgId(svgNode: Element): string {
+  let svgId = (svgNode.getAttribute('id') as string).replace('°', '°');
+  const reDeg = /°/gi;
+  svgId = svgId.replace(reDeg, '°');
+  const re = new RegExp('_[0-9]+$');
+  if (svgId.match(re)) {
+    svgId = svgId.replace(re, '');
+  }
+  return svgId;
+}
+
+function replaceAll(string: string, search: string, replace: string): string {
+  return string.split(search).join(replace);
+}
+
+function makeid(): string {
+  let result = '';
+  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const charactersLength = characters.length;
+  for (let i = 0; i < 10; i++) {
+    result += characters.charAt(Math.floor(Math.random() * charactersLength));
+  }
+  return result;
+}
+
+export function convertSvg(
+  figmaElement: FrameNode,
+  svgString: string,
+  styles: StyleDict,
+  removeAttrs: boolean
+): string {
+  const svgDoc = new DOMParser().parseFromString(svgString, 'text/svg');
+  const root = svgDoc.firstChild;
+  if (root === null) return '';
+
+  for (const nd of childNodes2Elements(root.childNodes)) {
+    const svgId = getSvgId(nd);
+    const elementId = figmaElement.name;
+    if (svgId !== elementId) {
+      console.warn(
+        `Figma element id and svg id does not match (${elementId} !== ${svgId})`
+      );
+    }
+    parseNode(figmaElement as unknown as StyledNode, nd, styles, removeAttrs);
+  }
+  let out = new XMLSerializer().serializeToString(svgDoc);
+  const clipPrefix = makeid();
+  out = replaceAll(out, 'url(#clip', `url(#${clipPrefix}clip`);
+  out = replaceAll(out, 'clipPath id="clip', `clipPath id="${clipPrefix}clip`);
+  out = replaceAll(out, 'url(#path-', `url(#${clipPrefix}path-`);
+  out = replaceAll(out, 'mask id="path-', `mask id="${clipPrefix}path-`);
+  return out;
+}
+
+function findFigmaNode(
+  figmaElement: StyledNode,
+  svgNode: Element
+): StyledNode | undefined {
+  const path = getSvgPath(svgNode);
+  path.shift();
+  return searchFigmaNode(figmaElement, path);
+}
+
+/** Searching for figma node matching the svg id path.
+ *
+ * Supports figma nodes having same name.
+ * @param figmaElement
+ * @param svgIds
+ */
+function searchFigmaNode(
+  figmaElement: StyledNode,
+  svgIds: string[]
+): StyledNode | undefined {
+  if (svgIds.length === 0) return figmaElement;
+  if (figmaElement.children === undefined) return undefined;
+
+  const currentId = svgIds.shift();
+  const figmaNodes = figmaElement.children
+    .filter((f) => f.name === currentId && f.visible !== false)
+    .map((f) => {
+      const ids = [...svgIds];
+      return searchFigmaNode(f, ids);
+    })
+    .filter((value) => value !== undefined) as StyledNode[];
+  if (figmaNodes.length > 0) return figmaNodes[0];
+  else return undefined;
+}
+
+function getSvgPath(svgNode: Element): string[] {
+  if (svgNode.parentNode === null) return [];
+  const svgId = getSvgId(svgNode);
+
+  const ids = getSvgPath(svgNode.parentNode as Element);
+  if (svgId.length !== 0) {
+    ids.push(svgId);
+  }
+  return ids;
+}
+
+function parseNode(
+  figmaRoot: StyledNode,
+  svgNode: Element,
+  styles: StyleDict,
+  removeAttrs: boolean
+) {
+  const figmaNode = findFigmaNode(figmaRoot, svgNode);
+  if (figmaNode === undefined) {
+    console.warn(
+      `Missing figma node: ${svgNode.getAttribute('id')}. Skipping subnodes.`
+    );
+    return;
+  }
+
+  const cssClasses = [];
+  if (svgNode.hasAttribute('id')) {
+    if (
+      svgNode.hasAttribute('id') &&
+      figmaNode.styles &&
+      figmaNode.styles.stroke &&
+      svgNode.hasAttribute('stroke')
+    ) {
+      if (removeAttrs) {
+        svgNode.removeAttribute('stroke');
+        svgNode.removeAttribute('stroke-opacity');
+      }
+      const strokeStyleId = figmaNode.styles.stroke;
+      if (strokeStyleId !== undefined) {
+        const styleName = convertStyleName(
+          styles[strokeStyleId].name,
+          '-stroke'
+        );
+        cssClasses.push(styleName);
+      }
+    }
+
+    if (
+      svgNode.hasAttribute('id') &&
+      figmaNode.styles &&
+      figmaNode.styles.fill &&
+      svgNode.hasAttribute('fill')
+    ) {
+      if (removeAttrs) {
+        svgNode.removeAttribute('fill');
+      }
+      const strokeStyleId = figmaNode.styles.fill;
+      if (strokeStyleId !== undefined) {
+        const styleName = convertStyleName(styles[strokeStyleId].name, '-fill');
+        cssClasses.push(styleName);
+      }
+    }
+  } else if (figmaNode.styles) {
+    const hasBackground =
+      figmaNode.background && figmaNode.background.length === 1;
+    const svgHasFill = svgNode.hasAttribute('fill');
+    const hasStrokeInsideOrOutside =
+      figmaNode.strokeAlign &&
+      (figmaNode.strokeAlign === 'INSIDE' ||
+        figmaNode.strokeAlign === 'OUTSIDE');
+    const mask = svgNode.getAttribute('mask');
+    const hasMaskInsideOrOutside =
+      mask && (mask.match(/inside/) || mask.match(/outside/));
+    if (
+      svgHasFill &&
+      !hasMaskInsideOrOutside &&
+      ((hasBackground && figmaNode.styles.fills) || figmaNode.styles.fill)
+    ) {
+      // Special case for background fill for frame
+      if (removeAttrs) {
+        svgNode.removeAttribute('fill');
+      }
+
+      const strokeStyleId = figmaNode.styles.fills || figmaNode.styles.fill;
+      if (strokeStyleId !== undefined) {
+        const styleName = convertStyleName(styles[strokeStyleId].name, '-fill');
+        cssClasses.push(styleName);
+      }
+    }
+
+    if (
+      hasStrokeInsideOrOutside &&
+      hasMaskInsideOrOutside &&
+      svgHasFill &&
+      figmaNode.styles &&
+      figmaNode.styles.stroke
+    ) {
+      if (removeAttrs) {
+        svgNode.removeAttribute('fill');
+      }
+      const strokeStyleId = figmaNode.styles.stroke;
+      if (strokeStyleId !== undefined) {
+        const styleName = convertStyleName(styles[strokeStyleId].name, '-fill');
+        cssClasses.push(styleName);
+      }
+    }
+
+    const hasStroke = figmaNode.strokes && figmaNode.strokes.length === 1;
+    if (
+      hasStroke &&
+      svgNode.hasAttribute('stroke') &&
+      figmaNode.styles &&
+      figmaNode.styles.strokes
+    ) {
+      // Special case for stroke on frame
+      if (removeAttrs) {
+        svgNode.removeAttribute('stroke');
+      }
+      const strokeStyleId = figmaNode.styles.strokes;
+      if (strokeStyleId !== undefined) {
+        const styleName = convertStyleName(
+          styles[strokeStyleId].name,
+          '-stroke'
+        );
+        cssClasses.push(styleName);
+      }
+    }
+  }
+
+  if (cssClasses.length > 0) {
+    svgNode.setAttribute('class', cssClasses.join(' '));
+  }
+  const childSvgs = childNodes2Elements(svgNode.childNodes);
+  if (childSvgs.length > 0) {
+    for (let i = 0; i < childSvgs.length; i++) {
+      const svgNode = childSvgs[i];
+      parseNode(figmaRoot, svgNode, styles, removeAttrs);
+    }
+  }
+}
+
+function convertStyleName(str: string, suffix: string): string {
+  return 'ob-' + str.replace(/\//g, '-').toLowerCase() + suffix;
+}

package/script/svg-instruments/environment.d.ts

@@ -0,0 +1,7 @@
+declare namespace NodeJS {
+  export interface ProcessEnv {
+    FIGMA_TOKEN: string;
+    FIGMA_MAINFILE: string;
+    FIGMA_DOCSTYLE: string;
+  }
+}