@profpowell/vb-design-system 0.1.0

package/src/web-components/theme-export/theme-css-parse.js

@@ -0,0 +1,93 @@
+/**
+ * Tiny CSS parser for VB theme files.
+ *
+ * Pulls token declarations out of the `:root[data-theme~="{slug}"]` and
+ * the dark-mode override block from a single theme CSS file. Used by
+ * the build (Phase 2) to emit DTCG artifacts and by the round-trip
+ * regression tests.
+ *
+ * No DOM, no css parser dep. Walks braces to find block boundaries;
+ * uses a small regex over the block body for `--name: value;`
+ * declarations. Doesn't resolve `var()`, doesn't expand `light-dark()` —
+ * preserves the source-literal form which is exactly what DTCG export
+ * wants (the literal goes into $extensions, the resolved form into
+ * $value).
+ */
+
+/**
+ * Extract the body of `:root[data-theme~="{slug}"]` (without the dark-mode
+ * variant). Walks braces so nested rules don't confuse the boundary.
+ * Returns '' if no matching block is found.
+ *
+ * @param {string} css
+ * @param {string} slug
+ * @returns {string}
+ */
+export function extractBaseBlock(css, slug) {
+  return findBlock(css, `data-theme~="${slug}"]`, { excludeMode: true });
+}
+
+/**
+ * Extract the body of `[data-theme~="{slug}"][data-mode="dark"]` if present.
+ * Returns '' if no dark override block exists.
+ *
+ * @param {string} css
+ * @param {string} slug
+ * @returns {string}
+ */
+export function extractDarkBlock(css, slug) {
+  return findBlock(css, `data-theme~="${slug}"][data-mode="dark"]`, {});
+}
+
+/**
+ * Pull `--name: value;` declarations out of a CSS block body.
+ * Stops a value at the next `;`, `{`, or `}` so nested rules are skipped
+ * cleanly. Brand themes don't nest token declarations; extreme themes
+ * occasionally do — this handles both.
+ *
+ * @param {string} blockBody
+ * @returns {Array<[string, string]>}
+ */
+export function parseDeclarations(blockBody) {
+  /** @type {[string, string][]} */
+  const out = [];
+  const re = /(--[\w-]+)\s*:\s*([^;{}]+);/g;
+  let m;
+  while ((m = re.exec(blockBody)) !== null) {
+    out.push([m[1], m[2].trim()]);
+  }
+  return out;
+}
+
+/* ---------- internals ---------- */
+
+function findBlock(css, selectorPattern, { excludeMode = false } = {}) {
+  let searchFrom = 0;
+  while (searchFrom < css.length) {
+    const idx = css.indexOf(selectorPattern, searchFrom);
+    if (idx === -1) return '';
+
+    // When extracting the base block, skip variants like
+    // [data-theme~="x"][data-mode="dark"] and any other compound selector.
+    if (excludeMode) {
+      const after = css.slice(idx + selectorPattern.length, idx + selectorPattern.length + 3);
+      if (after.startsWith('[')) {
+        searchFrom = idx + selectorPattern.length;
+        continue;
+      }
+    }
+
+    const braceStart = css.indexOf('{', idx);
+    if (braceStart === -1) return '';
+
+    let depth = 1;
+    let pos = braceStart + 1;
+    while (pos < css.length && depth > 0) {
+      if (css[pos] === '{') depth++;
+      else if (css[pos] === '}') depth--;
+      pos++;
+    }
+    return css.slice(braceStart + 1, pos - 1);
+  }
+  return '';
+}

package/src/web-components/theme-import/api.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "theme-import",
+  "type": "web-component",
+  "description": "Apply a DTCG (Design Tokens Community Group, stable 2025.10) tokens.json file to a preview scope. Sibling of <theme-export>. Three input modes: paste, file, URL. Round-trip lossless for VB-authored DTCG via $extensions['com.vanilla-breeze'].",
+  "attributes": [
+    { "name": "target",      "kind": "host-api", "purpose": "config", "type": "string", "default": "#preview", "description": "CSS selector for the scope to apply tokens to. Tokens are written as inline custom properties on this element." },
+    { "name": "placeholder", "kind": "host-api", "purpose": "config", "type": "string", "description": "Textarea placeholder for the paste input." }
+  ],
+  "events": [
+    { "name": "theme-import:applied", "description": "Fired after tokens are applied. detail: { tokens, applied, ignored, source }" },
+    { "name": "theme-import:error",   "description": "Fired when parse / fetch / apply fails. detail: { error, phase }" }
+  ]
+}

package/src/web-components/theme-import/catalog/atlassian.tokens.json

@@ -0,0 +1,303 @@
+{
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0.3216,
+          0.8
+        ],
+        "hex": "#0052cc"
+      }
+    },
+    "primary-hover": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.0275,
+          0.2784,
+          0.651
+        ],
+        "hex": "#0747a6"
+      }
+    },
+    "primary-active": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.0196,
+          0.2275,
+          0.5451
+        ],
+        "hex": "#053a8b"
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.2588,
+          0.3216,
+          0.4314
+        ],
+        "hex": "#42526e"
+      }
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.3961,
+          0.3294,
+          0.7529
+        ],
+        "hex": "#6554c0"
+      }
+    },
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9804,
+          0.9843,
+          0.9882
+        ],
+        "hex": "#fafbfc"
+      }
+    },
+    "surface": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      }
+    },
+    "surface-raised": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9569,
+          0.9608,
+          0.9686
+        ],
+        "hex": "#f4f5f7"
+      }
+    },
+    "surface-sunken": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9216,
+          0.9255,
+          0.9412
+        ],
+        "hex": "#ebecf0"
+      }
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.8745,
+          0.8824,
+          0.902
+        ],
+        "hex": "#dfe1e6"
+      }
+    },
+    "border-subtle": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9216,
+          0.9255,
+          0.9412
+        ],
+        "hex": "#ebecf0"
+      }
+    },
+    "text": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.0902,
+          0.1686,
+          0.302
+        ],
+        "hex": "#172b4d"
+      }
+    },
+    "text-muted": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.3686,
+          0.4235,
+          0.5176
+        ],
+        "hex": "#5e6c84"
+      }
+    },
+    "text-on-primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      }
+    },
+    "error": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.8706,
+          0.2078,
+          0.0431
+        ],
+        "hex": "#de350b"
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0.5294,
+          0.3529
+        ],
+        "hex": "#00875a"
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.6706,
+          0
+        ],
+        "hex": "#ffab00"
+      }
+    },
+    "info": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0.3961,
+          1
+        ],
+        "hex": "#0065ff"
+      }
+    }
+  },
+  "typography": {
+    "family": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": [
+          "Charlie Display",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Inter",
+          "sans-serif"
+        ]
+      }
+    },
+    "size": {
+      "md": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.875,
+          "unit": "rem"
+        }
+      }
+    },
+    "lineHeight": {
+      "normal": {
+        "$type": "number",
+        "$value": 1.4286
+      }
+    }
+  },
+  "border": {
+    "radius": {
+      "xs": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.1875,
+          "unit": "rem"
+        }
+      },
+      "s": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.1875,
+          "unit": "rem"
+        }
+      },
+      "m": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.1875,
+          "unit": "rem"
+        }
+      },
+      "l": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.25,
+          "unit": "rem"
+        }
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
+      }
+    }
+  },
+  "$extensions": {
+    "com.vanilla-breeze": {
+      "spec": "2025.10",
+      "vbVersion": "catalog-2026-05-15",
+      "catalog": true,
+      "source": {
+        "name": "Atlassian Design Tokens",
+        "homepage": "https://atlassian.design/",
+        "tokenSource": "https://atlassian.design/components/tokens/",
+        "license": "Apache-2.0",
+        "attribution": "© Atlassian Pty Ltd. Atlassian Design System.",
+        "syncedAt": "2026-05-15"
+      }
+    }
+  }
+}

package/src/web-components/theme-import/catalog/bootstrap.tokens.json

@@ -0,0 +1,304 @@
+{
+  "color": {
+    "primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.051,
+          0.4314,
+          0.9922
+        ],
+        "hex": "#0d6efd"
+      }
+    },
+    "primary-hover": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.0431,
+          0.3686,
+          0.8431
+        ],
+        "hex": "#0b5ed7"
+      }
+    },
+    "primary-active": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.0392,
+          0.3451,
+          0.7922
+        ],
+        "hex": "#0a58ca"
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.4235,
+          0.4588,
+          0.4902
+        ],
+        "hex": "#6c757d"
+      }
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.4353,
+          0.2588,
+          0.7569
+        ],
+        "hex": "#6f42c1"
+      }
+    },
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      }
+    },
+    "surface": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      }
+    },
+    "surface-raised": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9725,
+          0.9765,
+          0.9804
+        ],
+        "hex": "#f8f9fa"
+      }
+    },
+    "surface-sunken": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9137,
+          0.9255,
+          0.9373
+        ],
+        "hex": "#e9ecef"
+      }
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.8706,
+          0.8863,
+          0.902
+        ],
+        "hex": "#dee2e6"
+      }
+    },
+    "border-subtle": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.9137,
+          0.9255,
+          0.9373
+        ],
+        "hex": "#e9ecef"
+      }
+    },
+    "text": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.1294,
+          0.1451,
+          0.1608
+        ],
+        "hex": "#212529"
+      }
+    },
+    "text-muted": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.4235,
+          0.4588,
+          0.4902
+        ],
+        "hex": "#6c757d"
+      }
+    },
+    "text-on-primary": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          1,
+          1
+        ],
+        "hex": "#ffffff"
+      }
+    },
+    "error": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.8627,
+          0.2078,
+          0.2706
+        ],
+        "hex": "#dc3545"
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.098,
+          0.5294,
+          0.3294
+        ],
+        "hex": "#198754"
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          1,
+          0.7569,
+          0.0275
+        ],
+        "hex": "#ffc107"
+      }
+    },
+    "info": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0.051,
+          0.7922,
+          0.9412
+        ],
+        "hex": "#0dcaf0"
+      }
+    }
+  },
+  "typography": {
+    "family": {
+      "sans": {
+        "$type": "fontFamily",
+        "$value": [
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "Roboto",
+          "sans-serif"
+        ]
+      }
+    },
+    "size": {
+      "md": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      }
+    },
+    "lineHeight": {
+      "normal": {
+        "$type": "number",
+        "$value": 1.5
+      }
+    }
+  },
+  "border": {
+    "radius": {
+      "xs": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.2,
+          "unit": "rem"
+        }
+      },
+      "s": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.25,
+          "unit": "rem"
+        }
+      },
+      "m": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.375,
+          "unit": "rem"
+        }
+      },
+      "l": {
+        "$type": "dimension",
+        "$value": {
+          "value": 0.5,
+          "unit": "rem"
+        }
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        }
+      }
+    }
+  },
+  "$extensions": {
+    "com.vanilla-breeze": {
+      "spec": "2025.10",
+      "vbVersion": "catalog-2026-05-15",
+      "catalog": true,
+      "source": {
+        "name": "Bootstrap defaults",
+        "homepage": "https://getbootstrap.com/",
+        "tokenSource": "https://getbootstrap.com/docs/5.3/customize/color/",
+        "license": "MIT",
+        "attribution": "Bootstrap — © The Bootstrap Authors.",
+        "syncedAt": "2026-05-15",
+        "note": "Bootstrap does not publish DTCG natively; this entry is hand-synthesized from _variables.scss."
+      }
+    }
+  }
+}