@oicl/openbridge-webcomponents 0.0.9 → 0.0.10

package/src/palettes/variables.css

@@ -17,8 +17,9 @@
     --border-edge-color: rgba(0, 0, 0, .050);
     --border-solid-color: rgb(51, 51, 51);
     --border-icon-outline-color: rgba(0, 0, 0, .500);
+    --border-silhouette-color: rgb(255, 255, 255);
     --instrument-enhanced-primary-color: rgb(26, 45, 255);
-    --instrument-enhanced-secondary-color: rgb(46, 79, 138);
+    --instrument-enhanced-secondary-color: rgb(37, 76, 147);
     --instrument-enhanced-tertiary-color: rgba(46, 79, 138, .300);
     --instrument-regular-primary-color: rgb(13, 13, 13);
     --instrument-regular-secondary-color: rgb(89, 89, 89);
@@ -122,13 +123,13 @@
     --on-flat-active-color: rgb(13, 13, 13);
     --on-flat-neutral-color: rgba(0, 0, 0, .650);
     --on-flat-disabled-color: rgba(0, 0, 0, .300);
-    --selected-enabled-background-color: rgb(46, 79, 138);
+    --selected-enabled-background-color: rgb(37, 76, 147);
     --selected-enabled-border-color: rgba(0, 0, 0, .00);
-    --selected-hover-background-color: rgb(33, 57, 99);
+    --selected-hover-background-color: rgb(27, 55, 106);
     --selected-hover-border-color: rgba(0, 0, 0, .00);
-    --selected-pressed-background-color: rgb(20, 35, 61);
+    --selected-pressed-background-color: rgb(16, 34, 65);
     --selected-pressed-border-color: rgba(0, 0, 0, .00);
-    --selected-focused-background-color: rgb(46, 79, 138);
+    --selected-focused-background-color: rgb(37, 76, 147);
     --selected-focused-border-color: rgba(0, 110, 225, .300);
     --selected-disabled-background-color: rgba(0, 0, 0, .200);
     --selected-disabled-border-color: rgba(0, 0, 0, .00);
@@ -174,6 +175,19 @@
     --on-device-active-color: rgb(255, 255, 255);
     --on-device-neutral-color: rgba(0, 0, 0, .450);
     --on-device-disabled-color: rgb(179, 179, 179);
+    --notification-enabled-background-color: rgb(26, 45, 255);
+    --notification-enabled-border-color: rgba(0, 0, 0, .300);
+    --notification-hover-background-color: rgb(0, 19, 229);
+    --notification-hover-border-color: rgba(0, 0, 0, .300);
+    --notification-pressed-background-color: rgb(0, 15, 178);
+    --notification-pressed-border-color: rgba(0, 0, 0, .500);
+    --notification-focused-background-color: rgb(26, 45, 255);
+    --notification-focused-border-color: rgba(37, 76, 147, .500);
+    --notification-disabled-background-color: rgb(26, 45, 255);
+    --notification-disabled-border-color: rgba(0, 0, 0, .00);
+    --on-notification-active-color: rgb(255, 255, 255);
+    --on-notification-neutral-color: rgba(255, 255, 255, .600);
+    --on-notification-disabled-color: rgba(255, 255, 255, .300);
     --running-enabled-background-color: rgb(0, 138, 23);
     --running-enabled-border-color: rgba(0, 0, 0, .100);
     --running-hover-background-color: rgb(27, 111, 27);
@@ -318,7 +332,7 @@
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="    M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(0, 0, 0, .650)"/></svg>');
 
   }
-  
+
   :root[data-obc-theme=day] {
     --element-active-color: rgb(26, 26, 26);
     --element-neutral-color: rgba(0, 0, 0, .590);
@@ -364,24 +378,20 @@
     --alert-warning-color: rgb(246, 148, 0);
     --alert-alarm-color: rgb(223, 27, 27);
     --alert-critical-alarm-color: rgb(229, 0, 229);
-    --alert-limit-primary-color: rgba(0, 0, 0, .100);
-    --alert-limit-secondary-color: rgba(0, 0, 0, .100);
+    --alert-limit-primary-color: rgba(0, 0, 0, .080);
+    --alert-limit-secondary-color: rgba(0, 0, 0, .080);
     --automation-device-primary-color: rgb(255, 255, 255);
     --automation-device-secondary-color: rgb(112, 112, 112);
     --automation-device-tertiary-color: rgb(0, 0, 0);
     --automation-device-primary-inverted-color: rgb(15, 15, 15);
     --automation-device-secondary-inverted-color: rgb(102, 102, 102);
     --automation-device-tertiary-inverted-color: rgb(128, 128, 128);
-    --automation-button-primary-color: rgb(255, 255, 255);
-    --automation-button-tertiary-color: rgba(0, 0, 0, .200);
-    --automation-button-primary-inverted-color: rgb(224, 224, 224);
-    --automation-button-tertiary-inverted-color: rgba(0, 0, 0, .100);
     --automation-pipe-primary-color: rgb(255, 255, 255);
-    --automation-pipe-secondary-color: rgba(0, 0, 0, .200);
-    --automation-pipe-tertiary-color: rgba(0, 0, 0, .590);
+    --automation-pipe-secondary-color: rgb(143, 143, 143);
+    --automation-pipe-tertiary-color: rgb(51, 51, 51);
     --automation-pipe-primary-inverted-color: rgb(224, 224, 224);
-    --automation-pipe-secondary-inverted-color: rgba(0, 0, 0, .100);
-    --automation-pipe-tertiary-inverted-color: rgba(0, 0, 0, .420);
+    --automation-pipe-secondary-inverted-color: rgb(179, 179, 179);
+    --automation-pipe-tertiary-inverted-color: rgb(143, 143, 143);
     --automation-pipe-overlay-color: rgba(0, 0, 0, .200);
     --automation-pipe-disabled-color: rgba(0, 0, 0, .100);
     --automation-acid-alkalis: rgb(231, 193, 244);
@@ -423,7 +433,7 @@
     --raised-disabled-border-color: rgba(0, 0, 0, .100);
     --on-raised-active-color: rgb(255, 255, 255);
     --on-raised-neutral-color: rgba(255, 255, 255, .700);
-    --on-raised-disabled-color: rgba(0, 0, 0, .200);
+    --on-raised-disabled-color: rgba(0, 0, 0, .300);
     --indent-enabled-background-color: rgba(0, 0, 0, .050);
     --indent-enabled-border-color: rgba(0, 0, 0, .050);
     --indent-hover-background-color: rgba(0, 0, 0, .100);
@@ -444,7 +454,7 @@
     --flat-pressed-background-color: rgba(0, 0, 0, .120);
     --flat-pressed-border-color: rgba(0, 0, 0, .00);
     --flat-focused-background-color: rgba(0, 0, 0, .00);
-    --flat-focused-border-color: rgba(0, 110, 225, .300);
+    --flat-focused-border-color: rgb(153, 206, 255);
     --flat-disabled-background-color: rgba(0, 0, 0, .00);
     --flat-disabled-border-color: rgba(0, 0, 0, .00);
     --flat-activated-background-color: rgba(0, 0, 0, .050);
@@ -593,17 +603,20 @@
     --font-ui-overline-size: 12px;
     --font-ui-overline-weight: semibold;
     --font-ui-overline-line-height: 24px;
+    --font-ui-overline-new-size: 16px;
+    --font-ui-overline-new-weight: semibold;
+    --font-ui-overline-new-line-height: 24px;
     --font-ui-button-size: 16px;
-    --font-ui-button-weight: semibold;
+    --font-ui-button-weight: Medium;
     --font-ui-button-line-height: 24px;
     --font-ui-body-active-size: 16px;
-    --font-ui-body-active-weight: bold;
+    --font-ui-body-active-weight: semibold;
     --font-ui-body-active-line-height: 24px;
     --font-ui-body-size: 16px;
     --font-ui-body-weight: regular;
     --font-ui-body-line-height: 24px;
     --font-ui-label-active-size: 12px;
-    --font-ui-label-active-weight: bold;
+    --font-ui-label-active-weight: semibold;
     --font-ui-label-active-line-height: 16px;
     --font-ui-label-size: 12px;
     --font-ui-label-weight: regular;
@@ -617,6 +630,15 @@
     --font-instrument-label-l-size: 64px;
     --font-instrument-label-l-weight: regular;
     --font-instrument-label-l-line-height: 80px;
+    --font-instrument-value-regular-size: 16px;
+    --font-instrument-value-regular-weight: Medium;
+    --font-instrument-value-regular-line-height: 24px;
+    --font-instrument-value-enhanced-size: 36px;
+    --font-instrument-value-enhanced-weight: Medium;
+    --font-instrument-value-enhanced-line-height: 48px;
+    --font-instrument-value-double-size: 72px;
+    --font-instrument-value-double-weight: Medium;
+    --font-instrument-value-double-line-height: 96px;
     --font-instrument-value-s-size: 16px;
     --font-instrument-value-s-weight: semibold;
     --font-instrument-value-s-line-height: 24px;
@@ -658,12 +680,11 @@
     --shadow-floating: 0px 4px 16px 0px rgba(0, 0, 0, .300);
     --shadow-overlay: 0px 8px 32px 0px rgba(0, 0, 0, .400);
     --shadow-focused: 0px 0px 0px 4px rgb(0, 59, 148);
-
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(0, 0, 0, 0.55)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(0, 0, 0, 0.55)"/></svg>');
 
   }
-  
+
   :root[data-obc-theme=dusk] {
     --element-active-color: rgb(242, 242, 242);
     --element-neutral-color: rgba(255, 255, 255, .550);
@@ -684,7 +705,7 @@
     --border-silhouette-color: rgb(0, 0, 0);
     --border-icon-outline-color: rgba(0, 0, 0, .500);
     --border-solid-color: rgb(51, 51, 51);
-    --instrument-enhanced-primary-color: rgb(129, 223, 254);
+    --instrument-enhanced-primary-color: rgb(94, 213, 253);
     --instrument-enhanced-secondary-color: rgb(86, 150, 199);
     --instrument-enhanced-tertiary-color: rgba(92, 139, 193, .200);
     --instrument-regular-primary-color: rgb(230, 230, 230);
@@ -841,6 +862,19 @@
     --on-device-active-color: rgb(255, 255, 255);
     --on-device-neutral-color: rgb(123, 123, 123);
     --on-device-disabled-color: rgb(84, 84, 84);
+    --notification-enabled-background-color: rgb(94, 213, 253);
+    --notification-enabled-border-color: rgba(0, 0, 0, .500);
+    --notification-hover-background-color: rgb(154, 229, 254);
+    --notification-hover-border-color: rgba(0, 0, 0, .100);
+    --notification-pressed-background-color: rgb(17, 163, 212);
+    --notification-pressed-border-color: rgba(0, 0, 0, .200);
+    --notification-focused-background-color: rgb(94, 213, 253);
+    --notification-focused-border-color: rgb(247, 247, 247);
+    --notification-disabled-background-color: rgb(94, 213, 253);
+    --notification-disabled-border-color: rgba(0, 0, 0, .00);
+    --on-notification-active-color: rgb(0, 0, 0);
+    --on-notification-neutral-color: rgba(0, 0, 0, .600);
+    --on-notification-disabled-color: rgba(0, 0, 0, .200);
     --running-enabled-background-color: rgb(19, 138, 0);
     --running-enabled-border-color: rgba(0, 0, 0, .100);
     --running-hover-background-color: rgb(23, 168, 0);
@@ -906,19 +940,6 @@
     --on-critical-alarm-active-color: rgb(255, 255, 255);
     --on-critical-alarm-neutral-color: rgba(255, 255, 255, .700);
     --on-critical-alarm-disabled-color: rgba(255, 255, 255, .300);
-    --notification-enabled-background-color: rgb(129, 212, 254);
-    --notification-enabled-border-color: rgba(0, 0, 0, .500);
-    --notification-hover-background-color: rgb(90, 191, 242);
-    --notification-hover-border-color: rgba(0, 0, 0, .100);
-    --notification-pressed-background-color: rgb(60, 167, 221);
-    --notification-pressed-border-color: rgba(0, 0, 0, .200);
-    --notification-focused-background-color: rgb(129, 212, 254);
-    --notification-focused-border-color: rgb(247, 247, 247);
-    --notification-disabled-background-color: rgb(129, 212, 254);
-    --notification-disabled-border-color: rgba(0, 0, 0, .00);
-    --on-notification-active-color: rgb(0, 0, 0);
-    --on-notification-neutral-color: rgba(0, 0, 0, .600);
-    --on-notification-disabled-color: rgba(0, 0, 0, .200);
     --font-ui-title-size: 24px;
     --font-ui-title-weight: bold;
     --font-ui-title-line-height: 32px;
@@ -996,7 +1017,7 @@
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgba(255, 255, 255, .550)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgba(255, 255, 255, .550)"/></svg>');
   }
-  
+
 
   :root[data-obc-theme=night] {
     --element-active-color: rgb(71, 71, 0);
@@ -1254,7 +1275,7 @@
     --on-critical-alarm-neutral-color: rgba(0, 0, 0, .700);
     --on-critical-alarm-disabled-color: rgba(0, 0, 0, .300);
     --font-ui-title-size: 24px;
-    --font-ui-title-weight: Bold;
+    --font-ui-title-weight: bold;
     --font-ui-title-line-height: 32px;
     --font-ui-subtitle-size: 24px;
     --font-ui-subtitle-weight: regular;
@@ -1266,13 +1287,13 @@
     --font-ui-button-weight: semibold;
     --font-ui-button-line-height: 24px;
     --font-ui-body-active-size: 16px;
-    --font-ui-body-active-weight: Bold;
+    --font-ui-body-active-weight: bold;
     --font-ui-body-active-line-height: 24px;
     --font-ui-body-size: 16px;
     --font-ui-body-weight: regular;
     --font-ui-body-line-height: 24px;
     --font-ui-label-active-size: 12px;
-    --font-ui-label-active-weight: Bold;
+    --font-ui-label-active-weight: bold;
     --font-ui-label-active-line-height: 16px;
     --font-ui-label-size: 12px;
     --font-ui-label-weight: regular;
@@ -1329,5 +1350,5 @@
 
     --icon-02-chevron-up: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 14.0002L7.41 15.4102L12 10.8302L16.59 15.4102L18 14.0002L12 8.00016L6 14.0002Z" fill="rgb(51, 51, 0)"/></svg>');
     --icon-02-chevron-down: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M18 9.41L16.59 8L12 12.58L7.41 8L6 9.41L12 15.41L18 9.41Z" fill="rgb(51, 51, 0)"/></svg>');
-   
-}
+
+  }

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

@@ -1,246 +0,0 @@
-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

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

package/script/svg-instruments/exports.ts

@@ -1,82 +0,0 @@
-export interface ExportDef {
-  name: string;
-  path: string[]; // Array of subpath for targeting the svg export in Figma
-  outputFolder: string; // sub folder of ./gen
-  nonScaling?: boolean;
-}
-
-const staticExportComponents: ExportDef[] = [];
-
-function tickMarks(): ExportDef[] {
-  const circleDegrees = ['0', '1', '2', '5', '9', '10', '30', '45', '90'];
-  const tickType = ['Primary', 'Secondary', 'Tertiary'];
-  const circleTickMarks: ExportDef[] = [];
-
-  for (const degree of circleDegrees) {
-    for (const tick of tickType) {
-      const def: ExportDef = {
-        name: `${tick}Tickmark${degree}`,
-        path: [
-          'P2 Building blocks',
-          'Watchface elements',
-          'Tickmarks - Compass',
-          `Degree=${degree}°, Tick size=${tick}`,
-        ],
-        outputFolder: 'Tickmarks',
-        nonScaling: true,
-      };
-      circleTickMarks.push(def);
-    }
-  }
-
-  const size = ['Medium', 'Large'];
-  const toplines: ExportDef[] = size.map((s) => ({
-    name: `Topline${s}`,
-    path: [
-      'P2 Building blocks',
-      'Watchface',
-      'Azimuth watchface',
-      `Size=${s}, Tickmarks=90°, Labels=False, Detailed=False, PORT / STBD=False`,
-      'watchface',
-      'top-line',
-    ],
-    outputFolder: 'Tickmarks',
-  }));
-  return [...circleTickMarks, ...toplines];
-}
-
-function watchface(): ExportDef[] {
-  const watchface: ExportDef[] = [];
-  const types = [
-    {name: 'Regular', tag: 'Regular'},
-    {name: 'PORT STBD', tag: 'PORT_STBD'},
-    {name: 'Positive / Negative', tag: 'Positive_Negative'},
-    {name: 'Off', tag: 'Off'},
-    {name: 'Bar', tag: 'Bar'},
-  ];
-  const size = ['Small', 'Medium', 'Large'];
-
-  for (const type of types) {
-    for (const s of size) {
-      const def: ExportDef = {
-        name: `${type.tag}Watchface${s}`,
-        path: [
-          'P2 Building blocks',
-          'Watchface elements',
-          'Watchface circle',
-          `Size=${s}, Type=${type.name}, Condensed=False, Arc=Off`,
-        ],
-        outputFolder: 'Watchface',
-      };
-      watchface.push(def);
-    }
-  }
-
-  return watchface;
-}
-
-export const exportComponents = [
-  ...staticExportComponents,
-  ...tickMarks(),
-  ...watchface(),
-];