@bstage-sdk/design 0.6.2 → 0.7.0

package/dist/admin/index.js

@@ -1,753 +0,0 @@
-// 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
-};