@bstage-sdk/design 0.1.0

package/dist/admin/index.js

@@ -0,0 +1,753 @@
+// src/admin/tokens.generated.ts
+var modeColors = {
+  "bg/base": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "bg/bstage-admin": {
+    "dark": "#f5f6f8",
+    "light": "#f5f6f8"
+  },
+  "bg/elevated": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "bg/grouped-blue": {
+    "dark": "#f5f8ff",
+    "light": "#f5f8ff"
+  },
+  "bg/grouped-default": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "bg/grouped-strong": {
+    "dark": "#f5f6f8",
+    "light": "#f5f6f8"
+  },
+  "bg/grouped-strong-weak": {
+    "dark": "#f9fafb",
+    "light": "#f9fafb"
+  },
+  "border/blue": {
+    "dark": "#397af6",
+    "light": "#397af6"
+  },
+  "border/blue-weak-a": {
+    "dark": "#397af61a",
+    "light": "#397af61a"
+  },
+  "border/bstage": {
+    "dark": "#343d46",
+    "light": "#343d46"
+  },
+  "border/bstage-strong": {
+    "dark": "#1a1e23",
+    "light": "#1a1e23"
+  },
+  "border/bstage-weak": {
+    "dark": "#71777e",
+    "light": "#71777e"
+  },
+  "border/default-a": {
+    "dark": "#59667226",
+    "light": "#59667226"
+  },
+  "border/divider-a": {
+    "dark": "#5966721a",
+    "light": "#5966721a"
+  },
+  "border/divider-weak-a": {
+    "dark": "#5966720d",
+    "light": "#5966720d"
+  },
+  "border/eraser": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "border/green": {
+    "dark": "#32b27c",
+    "light": "#32b27c"
+  },
+  "border/green-weak-a": {
+    "dark": "#32b27c1a",
+    "light": "#32b27c1a"
+  },
+  "border/red": {
+    "dark": "#f41616",
+    "light": "#f41616"
+  },
+  "border/red-weak-a": {
+    "dark": "#f416161a",
+    "light": "#f416161a"
+  },
+  "border/strong-a": {
+    "dark": "#5966724d",
+    "light": "#5966724d"
+  },
+  "border/stronger-a": {
+    "dark": "#59667280",
+    "light": "#59667280"
+  },
+  "border/yellow": {
+    "dark": "#f29900",
+    "light": "#f29900"
+  },
+  "border/yellow-weak-a": {
+    "dark": "#ff99001a",
+    "light": "#ff99001a"
+  },
+  "bstagein/plan-essential": {
+    "dark": "#fdaffd",
+    "light": "#fdaffd"
+  },
+  "bstagein/plan-plus": {
+    "dark": "#151515",
+    "light": "#151515"
+  },
+  "bstagein/plan-standard": {
+    "dark": "#3067ec",
+    "light": "#3067ec"
+  },
+  "chart/default": {
+    "dark": "#595eff",
+    "light": "#595eff"
+  },
+  "chart/green": {
+    "dark": "#11ce8c",
+    "light": "#11ce8c"
+  },
+  "chart/grey": {
+    "dark": "#bdbdbd",
+    "light": "#bdbdbd"
+  },
+  "chart/orange": {
+    "dark": "#ff8057",
+    "light": "#ff8057"
+  },
+  "chart/red": {
+    "dark": "#ff505a",
+    "light": "#ff505a"
+  },
+  "chart/sky": {
+    "dark": "#54c1fb",
+    "light": "#54c1fb"
+  },
+  "chart/strong": {
+    "dark": "#5055e6",
+    "light": "#5055e6"
+  },
+  "chart/stronger": {
+    "dark": "#2c30b0",
+    "light": "#2c30b0"
+  },
+  "chart/weak": {
+    "dark": "#cdcfff",
+    "light": "#cdcfff"
+  },
+  "chart/yellow": {
+    "dark": "#ffce50",
+    "light": "#ffce50"
+  },
+  "icon/blue": {
+    "dark": "#397af6",
+    "light": "#397af6"
+  },
+  "icon/green": {
+    "dark": "#32b27c",
+    "light": "#32b27c"
+  },
+  "icon/indigo": {
+    "dark": "#5754f5",
+    "light": "#5754f5"
+  },
+  "icon/primary": {
+    "dark": "#3a424a",
+    "light": "#3a424a"
+  },
+  "icon/red": {
+    "dark": "#f41616",
+    "light": "#f41616"
+  },
+  "icon/secondary-a": {
+    "dark": "#596672d9",
+    "light": "#596672d9"
+  },
+  "icon/tertiary-a": {
+    "dark": "#5966724d",
+    "light": "#5966724d"
+  },
+  "icon/yellow": {
+    "dark": "#f29900",
+    "light": "#f29900"
+  },
+  "overlay/dim-a": {
+    "dark": "#00000080",
+    "light": "#00000080"
+  },
+  "overlay/dim-weak-a": {
+    "dark": "#0000001a",
+    "light": "#0000001a"
+  },
+  "overlay/hover-a": {
+    "dark": "#0000001a",
+    "light": "#0000001a"
+  },
+  "overlay/hover-blue-a": {
+    "dark": "#397af61a",
+    "light": "#397af61a"
+  },
+  "overlay/hover-blue-weak-a": {
+    "dark": "#397af60d",
+    "light": "#397af60d"
+  },
+  "overlay/hover-red-a": {
+    "dark": "#f416161a",
+    "light": "#f416161a"
+  },
+  "overlay/hover-weak-a": {
+    "dark": "#3453700d",
+    "light": "#3453700d"
+  },
+  "surface/avatar-default-a": {
+    "dark": "#3453700d",
+    "light": "#3453700d"
+  },
+  "surface/avatar-random-01": {
+    "dark": "#fa8a8a",
+    "light": "#fa8a8a"
+  },
+  "surface/avatar-random-02": {
+    "dark": "#ffcc80",
+    "light": "#ffcc80"
+  },
+  "surface/avatar-random-03": {
+    "dark": "#5bc196",
+    "light": "#5bc196"
+  },
+  "surface/avatar-random-04": {
+    "dark": "#4dbecd",
+    "light": "#4dbecd"
+  },
+  "surface/avatar-random-05": {
+    "dark": "#7976f7",
+    "light": "#7976f7"
+  },
+  "surface/avatar-random-06": {
+    "dark": "#aba9fa",
+    "light": "#aba9fa"
+  },
+  "surface/avatar-random-07": {
+    "dark": "#9c6beb",
+    "light": "#9c6beb"
+  },
+  "surface/display-blue": {
+    "dark": "#397af6",
+    "light": "#397af6"
+  },
+  "surface/display-blue-weak-a": {
+    "dark": "#397af61a",
+    "light": "#397af61a"
+  },
+  "surface/display-blue-weakest-a": {
+    "dark": "#397af608",
+    "light": "#397af608"
+  },
+  "surface/display-bstage": {
+    "dark": "#343d46",
+    "light": "#343d46"
+  },
+  "surface/display-default": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "surface/display-green": {
+    "dark": "#32b27c",
+    "light": "#32b27c"
+  },
+  "surface/display-green-weak-a": {
+    "dark": "#32b27c1a",
+    "light": "#32b27c1a"
+  },
+  "surface/display-grey-a": {
+    "dark": "#3453701a",
+    "light": "#3453701a"
+  },
+  "surface/display-grey-weak-a": {
+    "dark": "#3453700d",
+    "light": "#3453700d"
+  },
+  "surface/display-red": {
+    "dark": "#f41616",
+    "light": "#f41616"
+  },
+  "surface/display-red-weak-a": {
+    "dark": "#f416161a",
+    "light": "#f416161a"
+  },
+  "surface/display-toast": {
+    "dark": "#0a1116",
+    "light": "#0a1116"
+  },
+  "surface/display-tooltip": {
+    "dark": "#596672",
+    "light": "#596672"
+  },
+  "surface/display-yellow": {
+    "dark": "#ff9900",
+    "light": "#ff9900"
+  },
+  "surface/display-yellow-weak-a": {
+    "dark": "#ff99001a",
+    "light": "#ff99001a"
+  },
+  "surface/form-base": {
+    "dark": "#ffffff",
+    "light": "#ffffff"
+  },
+  "surface/form-blue": {
+    "dark": "#397af6",
+    "light": "#397af6"
+  },
+  "surface/form-blue-weak-a": {
+    "dark": "#397af626",
+    "light": "#397af626"
+  },
+  "surface/form-bstage": {
+    "dark": "#343d46",
+    "light": "#343d46"
+  },
+  "surface/form-bstage-strong": {
+    "dark": "#1a1e23",
+    "light": "#1a1e23"
+  },
+  "surface/form-bstage-weak": {
+    "dark": "#71777e",
+    "light": "#71777e"
+  },
+  "surface/form-default": {
+    "dark": "#ebeef1",
+    "light": "#ebeef1"
+  },
+  "surface/form-default-a": {
+    "dark": "#3453701a",
+    "light": "#3453701a"
+  },
+  "surface/form-green-weak-a": {
+    "dark": "#32b27c1a",
+    "light": "#32b27c1a"
+  },
+  "surface/form-red": {
+    "dark": "#f41616",
+    "light": "#f41616"
+  },
+  "surface/form-red-weak-a": {
+    "dark": "#f4161626",
+    "light": "#f4161626"
+  },
+  "surface/form-strong-a": {
+    "dark": "#34537033",
+    "light": "#34537033"
+  },
+  "surface/form-toggle": {
+    "dark": "#3453704d",
+    "light": "#3453704d"
+  },
+  "surface/form-weak-a": {
+    "dark": "#3453700d",
+    "light": "#3453700d"
+  },
+  "surface/form-yellow-weak-a": {
+    "dark": "#f299001a",
+    "light": "#f299001a"
+  },
+  "text/blue": {
+    "dark": "#397af6",
+    "light": "#397af6"
+  },
+  "text/green": {
+    "dark": "#32b27c",
+    "light": "#32b27c"
+  },
+  "text/indigo": {
+    "dark": "#5754f5",
+    "light": "#5754f5"
+  },
+  "text/primary": {
+    "dark": "#2a2b2f",
+    "light": "#2a2b2f"
+  },
+  "text/purple": {
+    "dark": "#8346e7",
+    "light": "#8346e7"
+  },
+  "text/red": {
+    "dark": "#f41616",
+    "light": "#f41616"
+  },
+  "text/secondary": {
+    "dark": "#676d72",
+    "light": "#676d72"
+  },
+  "text/sub-a": {
+    "dark": "#596672b3",
+    "light": "#596672b3"
+  },
+  "text/tertiary-a": {
+    "dark": "#596672b3",
+    "light": "#596672b3"
+  },
+  "text/yellow": {
+    "dark": "#f29900",
+    "light": "#f29900"
+  }
+};
+var flatColors = {
+  "always/black005-a": "#0000000d",
+  "always/black010-a": "#0000001a",
+  "always/black030-a": "#0000004d",
+  "always/black050-a": "#00000080",
+  "always/black060-a": "#00000099",
+  "always/black100-a": "#000000",
+  "always/green100": "#32b27c",
+  "always/grey135": "#243a4e",
+  "always/indigo100": "#5754f5",
+  "always/overlay-hover-white010-a": "#ffffff1a",
+  "always/purple100": "#8346e7",
+  "always/red085": "#f74444",
+  "always/service-rankingpoll-thumb-a": "#ffadddcc",
+  "always/white010-a": "#ffffff1a",
+  "always/white015-a": "#ffffff26",
+  "always/white025-a": "#ffffff40",
+  "always/white050-a": "#ffffff80",
+  "always/white060-a": "#ffffff99",
+  "always/white070-a": "#ffffffb3",
+  "always/white080-a": "#ffffffcc",
+  "always/white100": "#ffffff",
+  "always/yellow100": "#ff9900",
+  "auto/border-divider-on-dark": "#ffffff26",
+  "auto/border-divider-on-light": "#0000000f",
+  "auto/icon-primary-on-dark": "#ffffff",
+  "auto/icon-primary-on-light": "#00000099",
+  "auto/icon-secondary-on-dark": "#ffffff80",
+  "auto/icon-secondary-on-light": "#0000004d",
+  "auto/overlay-hover-on-dark": "#ffffff1a",
+  "auto/overlay-hover-on-light": "#0000001a",
+  "auto/text-primary-on-dark": "#ffffff",
+  "auto/text-primary-on-light": "#000000",
+  "auto/text-secondary-on-dark": "#ffffff80",
+  "auto/text-secondary-on-light": "#00000080"
+};
+var shadowTokens = {
+  "shadow/default-large": {
+    "dark": "0px 16px 36px -4px #1a1a1a33, 0px 0px 1px 0px #1a1a1a2e",
+    "light": "0px 16px 36px -4px #1a1a1a33, 0px 0px 1px 0px #1a1a1a2e"
+  },
+  "shadow/default-medium": {
+    "dark": "0px 8px 32px -2px #1a1a1a29, 0px 0px 1px 0px #00000026",
+    "light": "0px 8px 32px -2px #1a1a1a29, 0px 0px 1px 0px #00000026"
+  },
+  "shadow/default-small": {
+    "dark": "0px 4px 8px -1px #1a1a1a1f, 0px 0px 1px 0px #1a1a1a1f",
+    "light": "0px 4px 8px -1px #1a1a1a1f, 0px 0px 1px 0px #1a1a1a1f"
+  },
+  "shadow/default-xsmall": {
+    "dark": "0px 1px 1px 0px #1a1a1a1a, 0px 0px 1px 0px #1a1a1a1a",
+    "light": "0px 1px 1px 0px #1a1a1a1a, 0px 0px 1px 0px #1a1a1a1a"
+  }
+};
+var typographyTokens = {
+  "11/title/med": {
+    "fontSize": "11px",
+    "letterSpacing": "0%",
+    "lineHeight": "12px"
+  },
+  "11/title/reg": {
+    "fontSize": "11px",
+    "letterSpacing": "0%",
+    "lineHeight": "12px"
+  },
+  "11/title/reg-strike": {
+    "fontSize": "11px",
+    "letterSpacing": "0%",
+    "lineHeight": "12px"
+  },
+  "12/body/bold": {
+    "fontSize": "12px",
+    "letterSpacing": "0%",
+    "lineHeight": "16px"
+  },
+  "12/body/med": {
+    "fontSize": "12px",
+    "letterSpacing": "0%",
+    "lineHeight": "16px"
+  },
+  "12/body/med-link": {
+    "fontSize": "12px",
+    "letterSpacing": "0%",
+    "lineHeight": "16px"
+  },
+  "12/body/reg": {
+    "fontSize": "12px",
+    "letterSpacing": "0%",
+    "lineHeight": "16px"
+  },
+  "12/body/reg-strike": {
+    "fontSize": "12px",
+    "letterSpacing": "0%",
+    "lineHeight": "16px"
+  },
+  "13/body/bold": {
+    "fontSize": "13px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "13/body/med": {
+    "fontSize": "13px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "13/body/med-link": {
+    "fontSize": "13px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "13/body/reg": {
+    "fontSize": "13px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "13/body/reg-strike": {
+    "fontSize": "13px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "14/title/bold": {
+    "fontSize": "14px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "14/title/med": {
+    "fontSize": "14px",
+    "letterSpacing": "0%",
+    "lineHeight": "18px"
+  },
+  "15/body/reg": {
+    "fontSize": "15px",
+    "letterSpacing": "0%",
+    "lineHeight": "24px"
+  },
+  "16/title/bold": {
+    "fontSize": "16px",
+    "letterSpacing": "0%",
+    "lineHeight": "22px"
+  },
+  "16/title/med": {
+    "fontSize": "16px",
+    "letterSpacing": "0%",
+    "lineHeight": "22px"
+  },
+  "16/title/reg": {
+    "fontSize": "16px",
+    "letterSpacing": "0%",
+    "lineHeight": "22px"
+  },
+  "20/title/bold": {
+    "fontSize": "20px",
+    "letterSpacing": "0%",
+    "lineHeight": "26px"
+  },
+  "20/title/med": {
+    "fontSize": "20px",
+    "letterSpacing": "0%",
+    "lineHeight": "26px"
+  },
+  "24/title/med": {
+    "fontSize": "24px",
+    "letterSpacing": "0%",
+    "lineHeight": "34px"
+  },
+  "26title/me/med": {
+    "fontSize": "26px",
+    "letterSpacing": "0%",
+    "lineHeight": "36px"
+  },
+  "28/title/bold": {
+    "fontSize": "28px",
+    "letterSpacing": "0%",
+    "lineHeight": "36px"
+  },
+  "28/title/reg": {
+    "fontSize": "28px",
+    "letterSpacing": "0%",
+    "lineHeight": "36px"
+  },
+  "32/title/bold": {
+    "fontSize": "32px",
+    "letterSpacing": "0%",
+    "lineHeight": "44px"
+  },
+  "32/title/med": {
+    "fontSize": "32px",
+    "letterSpacing": "0%",
+    "lineHeight": "44px"
+  },
+  "40/body/bold": {
+    "fontSize": "40px",
+    "letterSpacing": "0%",
+    "lineHeight": "56px"
+  },
+  "40/title/bold": {
+    "fontSize": "40px",
+    "letterSpacing": "0%",
+    "lineHeight": "48px"
+  },
+  "64/title/bold": {
+    "fontSize": "64px",
+    "letterSpacing": "0%",
+    "lineHeight": "78px"
+  }
+};
+var fontWeightMap = {
+  "bold": 700,
+  "med": 500,
+  "reg": 400
+};
+var fontFamily = "'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'";
+
+// src/shared/generator.ts
+function cssVarName(slug, prefix, kind) {
+  const s = slug.replace(/\//g, "-");
+  return kind === "mode" ? `--${prefix}-mode-${s}` : `--${prefix}-${s}`;
+}
+function cssVarRef(slug, prefix, kind) {
+  return `var(${cssVarName(slug, prefix, kind)})`;
+}
+function buildColorTree(modeColors2, flatColors2, prefix) {
+  const tree = {};
+  const add = (slug, kind) => {
+    const [cat, ...rest] = slug.split("/");
+    const leaf = rest.join("/").replace(/\//g, "-") || cat;
+    (tree[cat] ?? (tree[cat] = {}))[leaf] = cssVarRef(slug, prefix, kind);
+  };
+  for (const slug of Object.keys(modeColors2)) add(slug, "mode");
+  for (const slug of Object.keys(flatColors2)) add(slug, "flat");
+  return tree;
+}
+function buildShadowRefs(shadowTokens2, prefix) {
+  const out = {};
+  for (const slug of Object.keys(shadowTokens2)) {
+    const leaf = slug.replace(/^shadow\//, "");
+    out[leaf] = cssVarRef(slug, prefix, "mode");
+  }
+  return out;
+}
+function colorLines(t, prefix, mode) {
+  return [
+    ...Object.entries(t.modeColors).map(
+      ([slug, pair]) => `  ${cssVarName(slug, prefix, "mode")}: ${pair[mode]};`
+    ),
+    ...Object.entries(t.shadowTokens).map(
+      ([slug, pair]) => `  ${cssVarName(slug, prefix, "mode")}: ${pair[mode]};`
+    )
+  ].join("\n");
+}
+function renderFallbackCss(t, opts) {
+  const p = opts.prefix;
+  const flat = Object.entries(t.flatColors).map(([slug, v]) => `  ${cssVarName(slug, p, "flat")}: ${v};`).join("\n");
+  const lightColors = colorLines(t, p, "light");
+  let css = `/* ================================================================
+ * bstage \uB514\uC790\uC778 \uD1A0\uD070 \u2014 dev fallback (${p})
+ * @bstage-sdk/design \uC0DD\uC131\uBB3C. \uAC1C\uBC1C/\uBBF8\uB9AC\uBCF4\uAE30 \uC804\uC6A9(:root fallback).
+ * \uBC30\uD3EC \uC2DC\uC5D4 \uD50C\uB7AB\uD3FC :root \uAC12\uC744 \uC0C1\uC18D\uD558\uBA70 \uC774 \uD30C\uC77C\uC740 \uBC88\uB4E4\uB418\uC9C0 \uC54A\uB294\uB2E4.
+ * ================================================================ */
+
+:root {
+${lightColors}
+
+${flat}
+
+  --${p}-font-family: ${t.fontFamily};
+}
+`;
+  if (opts.dark) {
+    const darkColors = colorLines(t, p, "dark");
+    css += `
+@media (prefers-color-scheme: dark) {
+  :root:not([data-bspoke="light"]) {
+${darkColors.replace(/^ {2}/gm, "    ")}
+  }
+}
+
+:root[data-bspoke="dark"],
+:root.dark {
+${darkColors}
+}
+`;
+  }
+  return css;
+}
+
+// src/shared/devWarn.ts
+var warned = /* @__PURE__ */ new Set();
+function devWarnOnce(dedupeKey, message) {
+  if (warned.has(dedupeKey)) return;
+  warned.add(dedupeKey);
+  console.warn(`[bstage-design] ${message}`);
+}
+
+// src/shared/text-style.ts
+function resolveTextStyle(typographyTokens2, fontWeightMap2, token) {
+  const lastSlash = token.lastIndexOf("/");
+  const base = token.slice(0, lastSlash);
+  const weight = token.slice(lastSlash + 1);
+  const typo = typographyTokens2[token] ?? typographyTokens2[base];
+  if (!typo) {
+    throw new Error(
+      `[bstage-design] \uC54C \uC218 \uC5C6\uB294 \uD0C0\uC774\uD3EC\uADF8\uB798\uD53C \uD1A0\uD070: "${token}". \uC0AC\uC6A9 \uAC00\uB2A5: ${Object.keys(typographyTokens2).join(", ")}`
+    );
+  }
+  const weightBase = weight.split("-")[0];
+  const resolvedWeight = fontWeightMap2[weight] ?? fontWeightMap2[weightBase];
+  if (resolvedWeight === void 0 && process.env.NODE_ENV !== "production") {
+    devWarnOnce(
+      `textStyle:weight:${weight}`,
+      `\uC54C \uC218 \uC5C6\uB294 font weight: "${weight}" (\uD1A0\uD070 "${token}"). 400\uC73C\uB85C \uB300\uCCB4\uD569\uB2C8\uB2E4. \uC0AC\uC6A9 \uAC00\uB2A5: ${Object.keys(fontWeightMap2).join(", ")}`
+    );
+  }
+  return {
+    fontSize: typo.fontSize,
+    lineHeight: typo.lineHeight,
+    fontWeight: resolvedWeight ?? 400,
+    letterSpacing: typo.letterSpacing
+  };
+}
+
+// src/admin/index.ts
+var PREFIX = "admin";
+var color = buildColorTree(modeColors, flatColors, PREFIX);
+var shadow = buildShadowRefs(shadowTokens, PREFIX);
+function cssVar(slug) {
+  return slug in modeColors ? cssVarRef(slug, PREFIX, "mode") : cssVarRef(slug, PREFIX, "flat");
+}
+function textStyle(token) {
+  return resolveTextStyle(typographyTokens, fontWeightMap, token);
+}
+function renderCss() {
+  return renderFallbackCss(
+    { modeColors, flatColors, shadowTokens, fontFamily },
+    { prefix: PREFIX, dark: false }
+  );
+}
+export {
+  color,
+  cssVar,
+  flatColors,
+  fontFamily,
+  fontWeightMap,
+  modeColors,
+  renderCss,
+  shadow,
+  shadowTokens,
+  textStyle,
+  typographyTokens
+};