@bstage-sdk/design 0.1.0

package/dist/admin/index.d.ts

@@ -0,0 +1,642 @@
+import { TextStyleResult } from '../index.js';
+export { ColorPair, ShadowPair, TypographyValue } from '../index.js';
+
+/** 다크모드 대응 색 토큰 (light/dark 쌍) → --admin-mode-* */
+declare const modeColors: {
+    readonly "bg/base": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "bg/bstage-admin": {
+        readonly dark: "#f5f6f8";
+        readonly light: "#f5f6f8";
+    };
+    readonly "bg/elevated": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "bg/grouped-blue": {
+        readonly dark: "#f5f8ff";
+        readonly light: "#f5f8ff";
+    };
+    readonly "bg/grouped-default": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "bg/grouped-strong": {
+        readonly dark: "#f5f6f8";
+        readonly light: "#f5f6f8";
+    };
+    readonly "bg/grouped-strong-weak": {
+        readonly dark: "#f9fafb";
+        readonly light: "#f9fafb";
+    };
+    readonly "border/blue": {
+        readonly dark: "#397af6";
+        readonly light: "#397af6";
+    };
+    readonly "border/blue-weak-a": {
+        readonly dark: "#397af61a";
+        readonly light: "#397af61a";
+    };
+    readonly "border/bstage": {
+        readonly dark: "#343d46";
+        readonly light: "#343d46";
+    };
+    readonly "border/bstage-strong": {
+        readonly dark: "#1a1e23";
+        readonly light: "#1a1e23";
+    };
+    readonly "border/bstage-weak": {
+        readonly dark: "#71777e";
+        readonly light: "#71777e";
+    };
+    readonly "border/default-a": {
+        readonly dark: "#59667226";
+        readonly light: "#59667226";
+    };
+    readonly "border/divider-a": {
+        readonly dark: "#5966721a";
+        readonly light: "#5966721a";
+    };
+    readonly "border/divider-weak-a": {
+        readonly dark: "#5966720d";
+        readonly light: "#5966720d";
+    };
+    readonly "border/eraser": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "border/green": {
+        readonly dark: "#32b27c";
+        readonly light: "#32b27c";
+    };
+    readonly "border/green-weak-a": {
+        readonly dark: "#32b27c1a";
+        readonly light: "#32b27c1a";
+    };
+    readonly "border/red": {
+        readonly dark: "#f41616";
+        readonly light: "#f41616";
+    };
+    readonly "border/red-weak-a": {
+        readonly dark: "#f416161a";
+        readonly light: "#f416161a";
+    };
+    readonly "border/strong-a": {
+        readonly dark: "#5966724d";
+        readonly light: "#5966724d";
+    };
+    readonly "border/stronger-a": {
+        readonly dark: "#59667280";
+        readonly light: "#59667280";
+    };
+    readonly "border/yellow": {
+        readonly dark: "#f29900";
+        readonly light: "#f29900";
+    };
+    readonly "border/yellow-weak-a": {
+        readonly dark: "#ff99001a";
+        readonly light: "#ff99001a";
+    };
+    readonly "bstagein/plan-essential": {
+        readonly dark: "#fdaffd";
+        readonly light: "#fdaffd";
+    };
+    readonly "bstagein/plan-plus": {
+        readonly dark: "#151515";
+        readonly light: "#151515";
+    };
+    readonly "bstagein/plan-standard": {
+        readonly dark: "#3067ec";
+        readonly light: "#3067ec";
+    };
+    readonly "chart/default": {
+        readonly dark: "#595eff";
+        readonly light: "#595eff";
+    };
+    readonly "chart/green": {
+        readonly dark: "#11ce8c";
+        readonly light: "#11ce8c";
+    };
+    readonly "chart/grey": {
+        readonly dark: "#bdbdbd";
+        readonly light: "#bdbdbd";
+    };
+    readonly "chart/orange": {
+        readonly dark: "#ff8057";
+        readonly light: "#ff8057";
+    };
+    readonly "chart/red": {
+        readonly dark: "#ff505a";
+        readonly light: "#ff505a";
+    };
+    readonly "chart/sky": {
+        readonly dark: "#54c1fb";
+        readonly light: "#54c1fb";
+    };
+    readonly "chart/strong": {
+        readonly dark: "#5055e6";
+        readonly light: "#5055e6";
+    };
+    readonly "chart/stronger": {
+        readonly dark: "#2c30b0";
+        readonly light: "#2c30b0";
+    };
+    readonly "chart/weak": {
+        readonly dark: "#cdcfff";
+        readonly light: "#cdcfff";
+    };
+    readonly "chart/yellow": {
+        readonly dark: "#ffce50";
+        readonly light: "#ffce50";
+    };
+    readonly "icon/blue": {
+        readonly dark: "#397af6";
+        readonly light: "#397af6";
+    };
+    readonly "icon/green": {
+        readonly dark: "#32b27c";
+        readonly light: "#32b27c";
+    };
+    readonly "icon/indigo": {
+        readonly dark: "#5754f5";
+        readonly light: "#5754f5";
+    };
+    readonly "icon/primary": {
+        readonly dark: "#3a424a";
+        readonly light: "#3a424a";
+    };
+    readonly "icon/red": {
+        readonly dark: "#f41616";
+        readonly light: "#f41616";
+    };
+    readonly "icon/secondary-a": {
+        readonly dark: "#596672d9";
+        readonly light: "#596672d9";
+    };
+    readonly "icon/tertiary-a": {
+        readonly dark: "#5966724d";
+        readonly light: "#5966724d";
+    };
+    readonly "icon/yellow": {
+        readonly dark: "#f29900";
+        readonly light: "#f29900";
+    };
+    readonly "overlay/dim-a": {
+        readonly dark: "#00000080";
+        readonly light: "#00000080";
+    };
+    readonly "overlay/dim-weak-a": {
+        readonly dark: "#0000001a";
+        readonly light: "#0000001a";
+    };
+    readonly "overlay/hover-a": {
+        readonly dark: "#0000001a";
+        readonly light: "#0000001a";
+    };
+    readonly "overlay/hover-blue-a": {
+        readonly dark: "#397af61a";
+        readonly light: "#397af61a";
+    };
+    readonly "overlay/hover-blue-weak-a": {
+        readonly dark: "#397af60d";
+        readonly light: "#397af60d";
+    };
+    readonly "overlay/hover-red-a": {
+        readonly dark: "#f416161a";
+        readonly light: "#f416161a";
+    };
+    readonly "overlay/hover-weak-a": {
+        readonly dark: "#3453700d";
+        readonly light: "#3453700d";
+    };
+    readonly "surface/avatar-default-a": {
+        readonly dark: "#3453700d";
+        readonly light: "#3453700d";
+    };
+    readonly "surface/avatar-random-01": {
+        readonly dark: "#fa8a8a";
+        readonly light: "#fa8a8a";
+    };
+    readonly "surface/avatar-random-02": {
+        readonly dark: "#ffcc80";
+        readonly light: "#ffcc80";
+    };
+    readonly "surface/avatar-random-03": {
+        readonly dark: "#5bc196";
+        readonly light: "#5bc196";
+    };
+    readonly "surface/avatar-random-04": {
+        readonly dark: "#4dbecd";
+        readonly light: "#4dbecd";
+    };
+    readonly "surface/avatar-random-05": {
+        readonly dark: "#7976f7";
+        readonly light: "#7976f7";
+    };
+    readonly "surface/avatar-random-06": {
+        readonly dark: "#aba9fa";
+        readonly light: "#aba9fa";
+    };
+    readonly "surface/avatar-random-07": {
+        readonly dark: "#9c6beb";
+        readonly light: "#9c6beb";
+    };
+    readonly "surface/display-blue": {
+        readonly dark: "#397af6";
+        readonly light: "#397af6";
+    };
+    readonly "surface/display-blue-weak-a": {
+        readonly dark: "#397af61a";
+        readonly light: "#397af61a";
+    };
+    readonly "surface/display-blue-weakest-a": {
+        readonly dark: "#397af608";
+        readonly light: "#397af608";
+    };
+    readonly "surface/display-bstage": {
+        readonly dark: "#343d46";
+        readonly light: "#343d46";
+    };
+    readonly "surface/display-default": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "surface/display-green": {
+        readonly dark: "#32b27c";
+        readonly light: "#32b27c";
+    };
+    readonly "surface/display-green-weak-a": {
+        readonly dark: "#32b27c1a";
+        readonly light: "#32b27c1a";
+    };
+    readonly "surface/display-grey-a": {
+        readonly dark: "#3453701a";
+        readonly light: "#3453701a";
+    };
+    readonly "surface/display-grey-weak-a": {
+        readonly dark: "#3453700d";
+        readonly light: "#3453700d";
+    };
+    readonly "surface/display-red": {
+        readonly dark: "#f41616";
+        readonly light: "#f41616";
+    };
+    readonly "surface/display-red-weak-a": {
+        readonly dark: "#f416161a";
+        readonly light: "#f416161a";
+    };
+    readonly "surface/display-toast": {
+        readonly dark: "#0a1116";
+        readonly light: "#0a1116";
+    };
+    readonly "surface/display-tooltip": {
+        readonly dark: "#596672";
+        readonly light: "#596672";
+    };
+    readonly "surface/display-yellow": {
+        readonly dark: "#ff9900";
+        readonly light: "#ff9900";
+    };
+    readonly "surface/display-yellow-weak-a": {
+        readonly dark: "#ff99001a";
+        readonly light: "#ff99001a";
+    };
+    readonly "surface/form-base": {
+        readonly dark: "#ffffff";
+        readonly light: "#ffffff";
+    };
+    readonly "surface/form-blue": {
+        readonly dark: "#397af6";
+        readonly light: "#397af6";
+    };
+    readonly "surface/form-blue-weak-a": {
+        readonly dark: "#397af626";
+        readonly light: "#397af626";
+    };
+    readonly "surface/form-bstage": {
+        readonly dark: "#343d46";
+        readonly light: "#343d46";
+    };
+    readonly "surface/form-bstage-strong": {
+        readonly dark: "#1a1e23";
+        readonly light: "#1a1e23";
+    };
+    readonly "surface/form-bstage-weak": {
+        readonly dark: "#71777e";
+        readonly light: "#71777e";
+    };
+    readonly "surface/form-default": {
+        readonly dark: "#ebeef1";
+        readonly light: "#ebeef1";
+    };
+    readonly "surface/form-default-a": {
+        readonly dark: "#3453701a";
+        readonly light: "#3453701a";
+    };
+    readonly "surface/form-green-weak-a": {
+        readonly dark: "#32b27c1a";
+        readonly light: "#32b27c1a";
+    };
+    readonly "surface/form-red": {
+        readonly dark: "#f41616";
+        readonly light: "#f41616";
+    };
+    readonly "surface/form-red-weak-a": {
+        readonly dark: "#f4161626";
+        readonly light: "#f4161626";
+    };
+    readonly "surface/form-strong-a": {
+        readonly dark: "#34537033";
+        readonly light: "#34537033";
+    };
+    readonly "surface/form-toggle": {
+        readonly dark: "#3453704d";
+        readonly light: "#3453704d";
+    };
+    readonly "surface/form-weak-a": {
+        readonly dark: "#3453700d";
+        readonly light: "#3453700d";
+    };
+    readonly "surface/form-yellow-weak-a": {
+        readonly dark: "#f299001a";
+        readonly light: "#f299001a";
+    };
+    readonly "text/blue": {
+        readonly dark: "#397af6";
+        readonly light: "#397af6";
+    };
+    readonly "text/green": {
+        readonly dark: "#32b27c";
+        readonly light: "#32b27c";
+    };
+    readonly "text/indigo": {
+        readonly dark: "#5754f5";
+        readonly light: "#5754f5";
+    };
+    readonly "text/primary": {
+        readonly dark: "#2a2b2f";
+        readonly light: "#2a2b2f";
+    };
+    readonly "text/purple": {
+        readonly dark: "#8346e7";
+        readonly light: "#8346e7";
+    };
+    readonly "text/red": {
+        readonly dark: "#f41616";
+        readonly light: "#f41616";
+    };
+    readonly "text/secondary": {
+        readonly dark: "#676d72";
+        readonly light: "#676d72";
+    };
+    readonly "text/sub-a": {
+        readonly dark: "#596672b3";
+        readonly light: "#596672b3";
+    };
+    readonly "text/tertiary-a": {
+        readonly dark: "#596672b3";
+        readonly light: "#596672b3";
+    };
+    readonly "text/yellow": {
+        readonly dark: "#f29900";
+        readonly light: "#f29900";
+    };
+};
+/** 테마 비의존 색 토큰 (always/auto/picker/pop) → --admin-{group}-* */
+declare const flatColors: {
+    readonly "always/black005-a": "#0000000d";
+    readonly "always/black010-a": "#0000001a";
+    readonly "always/black030-a": "#0000004d";
+    readonly "always/black050-a": "#00000080";
+    readonly "always/black060-a": "#00000099";
+    readonly "always/black100-a": "#000000";
+    readonly "always/green100": "#32b27c";
+    readonly "always/grey135": "#243a4e";
+    readonly "always/indigo100": "#5754f5";
+    readonly "always/overlay-hover-white010-a": "#ffffff1a";
+    readonly "always/purple100": "#8346e7";
+    readonly "always/red085": "#f74444";
+    readonly "always/service-rankingpoll-thumb-a": "#ffadddcc";
+    readonly "always/white010-a": "#ffffff1a";
+    readonly "always/white015-a": "#ffffff26";
+    readonly "always/white025-a": "#ffffff40";
+    readonly "always/white050-a": "#ffffff80";
+    readonly "always/white060-a": "#ffffff99";
+    readonly "always/white070-a": "#ffffffb3";
+    readonly "always/white080-a": "#ffffffcc";
+    readonly "always/white100": "#ffffff";
+    readonly "always/yellow100": "#ff9900";
+    readonly "auto/border-divider-on-dark": "#ffffff26";
+    readonly "auto/border-divider-on-light": "#0000000f";
+    readonly "auto/icon-primary-on-dark": "#ffffff";
+    readonly "auto/icon-primary-on-light": "#00000099";
+    readonly "auto/icon-secondary-on-dark": "#ffffff80";
+    readonly "auto/icon-secondary-on-light": "#0000004d";
+    readonly "auto/overlay-hover-on-dark": "#ffffff1a";
+    readonly "auto/overlay-hover-on-light": "#0000001a";
+    readonly "auto/text-primary-on-dark": "#ffffff";
+    readonly "auto/text-primary-on-light": "#000000";
+    readonly "auto/text-secondary-on-dark": "#ffffff80";
+    readonly "auto/text-secondary-on-light": "#00000080";
+};
+/** 그림자 토큰 → --admin-mode-shadow-* */
+declare const shadowTokens: {
+    readonly "shadow/default-large": {
+        readonly dark: "0px 16px 36px -4px #1a1a1a33, 0px 0px 1px 0px #1a1a1a2e";
+        readonly light: "0px 16px 36px -4px #1a1a1a33, 0px 0px 1px 0px #1a1a1a2e";
+    };
+    readonly "shadow/default-medium": {
+        readonly dark: "0px 8px 32px -2px #1a1a1a29, 0px 0px 1px 0px #00000026";
+        readonly light: "0px 8px 32px -2px #1a1a1a29, 0px 0px 1px 0px #00000026";
+    };
+    readonly "shadow/default-small": {
+        readonly dark: "0px 4px 8px -1px #1a1a1a1f, 0px 0px 1px 0px #1a1a1a1f";
+        readonly light: "0px 4px 8px -1px #1a1a1a1f, 0px 0px 1px 0px #1a1a1a1f";
+    };
+    readonly "shadow/default-xsmall": {
+        readonly dark: "0px 1px 1px 0px #1a1a1a1a, 0px 0px 1px 0px #1a1a1a1a";
+        readonly light: "0px 1px 1px 0px #1a1a1a1a, 0px 0px 1px 0px #1a1a1a1a";
+    };
+};
+/** 타이포그래피 토큰 */
+declare const typographyTokens: {
+    readonly "11/title/med": {
+        readonly fontSize: "11px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "12px";
+    };
+    readonly "11/title/reg": {
+        readonly fontSize: "11px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "12px";
+    };
+    readonly "11/title/reg-strike": {
+        readonly fontSize: "11px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "12px";
+    };
+    readonly "12/body/bold": {
+        readonly fontSize: "12px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "16px";
+    };
+    readonly "12/body/med": {
+        readonly fontSize: "12px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "16px";
+    };
+    readonly "12/body/med-link": {
+        readonly fontSize: "12px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "16px";
+    };
+    readonly "12/body/reg": {
+        readonly fontSize: "12px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "16px";
+    };
+    readonly "12/body/reg-strike": {
+        readonly fontSize: "12px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "16px";
+    };
+    readonly "13/body/bold": {
+        readonly fontSize: "13px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "13/body/med": {
+        readonly fontSize: "13px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "13/body/med-link": {
+        readonly fontSize: "13px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "13/body/reg": {
+        readonly fontSize: "13px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "13/body/reg-strike": {
+        readonly fontSize: "13px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "14/title/bold": {
+        readonly fontSize: "14px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "14/title/med": {
+        readonly fontSize: "14px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "18px";
+    };
+    readonly "15/body/reg": {
+        readonly fontSize: "15px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "24px";
+    };
+    readonly "16/title/bold": {
+        readonly fontSize: "16px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "22px";
+    };
+    readonly "16/title/med": {
+        readonly fontSize: "16px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "22px";
+    };
+    readonly "16/title/reg": {
+        readonly fontSize: "16px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "22px";
+    };
+    readonly "20/title/bold": {
+        readonly fontSize: "20px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "26px";
+    };
+    readonly "20/title/med": {
+        readonly fontSize: "20px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "26px";
+    };
+    readonly "24/title/med": {
+        readonly fontSize: "24px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "34px";
+    };
+    readonly "26title/me/med": {
+        readonly fontSize: "26px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "36px";
+    };
+    readonly "28/title/bold": {
+        readonly fontSize: "28px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "36px";
+    };
+    readonly "28/title/reg": {
+        readonly fontSize: "28px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "36px";
+    };
+    readonly "32/title/bold": {
+        readonly fontSize: "32px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "44px";
+    };
+    readonly "32/title/med": {
+        readonly fontSize: "32px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "44px";
+    };
+    readonly "40/body/bold": {
+        readonly fontSize: "40px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "56px";
+    };
+    readonly "40/title/bold": {
+        readonly fontSize: "40px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "48px";
+    };
+    readonly "64/title/bold": {
+        readonly fontSize: "64px";
+        readonly letterSpacing: "0%";
+        readonly lineHeight: "78px";
+    };
+};
+/** font-weight 이름 → 숫자 */
+declare const fontWeightMap: {
+    readonly bold: 700;
+    readonly med: 500;
+    readonly reg: 400;
+};
+/** 폰트 패밀리 스택 */
+declare const 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'";
+
+/** 색 토큰 — 카테고리별 중첩. 예: `color.text.primary` === `'var(--admin-mode-text-primary)'` */
+declare const color: Record<string, Record<string, string>>;
+/** 그림자 — 예: `shadow['default-large']` === `'var(--admin-mode-shadow-default-large)'` */
+declare const shadow: Record<string, string>;
+type AdminColorSlug = keyof typeof modeColors | keyof typeof flatColors;
+/** 어드민 타이포 토큰 — 3-part 키 `{size}/{role}/{weight}` */
+type AdminTypographyToken = keyof typeof typographyTokens;
+/** slug → `var(--admin-...)` (타입 안전). 예: `cssVar('text/primary')` */
+declare function cssVar(slug: AdminColorSlug): string;
+/** 타이포그래피 → 인라인 스타일. 예: `textStyle('16/title/med')` */
+declare function textStyle(token: AdminTypographyToken & string): TextStyleResult;
+/**
+ * dev fallback CSS (`:root`-scoped, light 전용 — 어드민은 다크모드 없음).
+ * build-css 및 `bstage dev`의 호스트 `:root` 주입에 사용된다.
+ */
+declare function renderCss(): string;
+
+export { type AdminColorSlug, type AdminTypographyToken, TextStyleResult, color, cssVar, flatColors, fontFamily, fontWeightMap, modeColors, renderCss, shadow, shadowTokens, textStyle, typographyTokens };