@bstage-sdk/design 0.6.1 → 0.7.0

package/dist/user/index.d.cts

@@ -1,576 +0,0 @@
-import { TextStyleResult } from '../index.cjs';
-export { ColorPair, ShadowPair, TypographyValue } from '../index.cjs';
-
-/** 다크모드 대응 색 토큰 (light/dark 쌍) → --user-mode-* */
-declare const modeColors: {
-    readonly "bg/base": {
-        readonly dark: "#151515";
-        readonly light: "#ffffff";
-    };
-    readonly "bg/blue-grey": {
-        readonly dark: "#1f2023";
-        readonly light: "#eff1f7";
-    };
-    readonly "bg/elevated": {
-        readonly dark: "#232323";
-        readonly light: "#ffffff";
-    };
-    readonly "bg/grouped-strong": {
-        readonly dark: "#000000";
-        readonly light: "#f7f7f7";
-    };
-    readonly "bg/grouped-weak": {
-        readonly dark: "#111111";
-        readonly light: "#f7f7f7";
-    };
-    readonly "bg/grouped-weak-a": {
-        readonly dark: "#ffffff0f";
-        readonly light: "#0000000f";
-    };
-    readonly "bg/highlight": {
-        readonly dark: "#2f2f2f";
-        readonly light: "#e6e6e6";
-    };
-    readonly "bg/invert-weak-a": {
-        readonly dark: "#00000026";
-        readonly light: "#ffffff26";
-    };
-    readonly "border/blue": {
-        readonly dark: "#0090ff";
-        readonly light: "#148aff";
-    };
-    readonly "border/blue-weak-a": {
-        readonly dark: "#0090ff4d";
-        readonly light: "#148aff4d";
-    };
-    readonly "border/default-a": {
-        readonly dark: "#ffffff1a";
-        readonly light: "#0000001a";
-    };
-    readonly "border/divider-weaker": {
-        readonly dark: "#0d0d0d";
-        readonly light: "#f7f7f7";
-    };
-    readonly "border/green": {
-        readonly dark: "#0be06f";
-        readonly light: "#00b84d";
-    };
-    readonly "border/green-weak-a": {
-        readonly dark: "#0be06f4d";
-        readonly light: "#00b84d4d";
-    };
-    readonly "border/grey": {
-        readonly dark: "#b3b3b3";
-        readonly light: "#7a7a7a";
-    };
-    readonly "border/grey-weak-a": {
-        readonly dark: "#b3b3b34d";
-        readonly light: "#7a7a7a4d";
-    };
-    readonly "border/invert": {
-        readonly dark: "#0d0d0d";
-        readonly light: "#ffffff";
-    };
-    readonly "border/red": {
-        readonly dark: "#ff4747";
-        readonly light: "#ff4a40";
-    };
-    readonly "border/red-weak-a": {
-        readonly dark: "#ff47474d";
-        readonly light: "#ff4a404d";
-    };
-    readonly "border/strong-a": {
-        readonly dark: "#ffffff33";
-        readonly light: "#00000033";
-    };
-    readonly "border/stronger": {
-        readonly dark: "#eeeeee";
-        readonly light: "#454545";
-    };
-    readonly "border/weak-a": {
-        readonly dark: "#ffffff0a";
-        readonly light: "#0000000f";
-    };
-    readonly "border/yellow": {
-        readonly dark: "#f5b625";
-        readonly light: "#f29900";
-    };
-    readonly "border/yellow-weak-a": {
-        readonly dark: "#f5b6254d";
-        readonly light: "#f299004d";
-    };
-    readonly "icon/blue": {
-        readonly dark: "#0090ff";
-        readonly light: "#148aff";
-    };
-    readonly "icon/green": {
-        readonly dark: "#0be06f";
-        readonly light: "#00b84d";
-    };
-    readonly "icon/grey": {
-        readonly dark: "#b3b3b3";
-        readonly light: "#7a7a7a";
-    };
-    readonly "icon/invert": {
-        readonly dark: "#0d0d0d";
-        readonly light: "#ffffff";
-    };
-    readonly "icon/primary": {
-        readonly dark: "#ffffff";
-        readonly light: "#000000";
-    };
-    readonly "icon/quaternary-a": {
-        readonly dark: "#ffffff4d";
-        readonly light: "#0000004d";
-    };
-    readonly "icon/red": {
-        readonly dark: "#ff4747";
-        readonly light: "#ff4a40";
-    };
-    readonly "icon/secondary-a": {
-        readonly dark: "#ffffffba";
-        readonly light: "#000000ba";
-    };
-    readonly "icon/tertiary-a": {
-        readonly dark: "#ffffff80";
-        readonly light: "#00000080";
-    };
-    readonly "icon/yellow": {
-        readonly dark: "#f5b625";
-        readonly light: "#f29900";
-    };
-    readonly "overlay/hover-a": {
-        readonly dark: "#ffffff14";
-        readonly light: "#0000001a";
-    };
-    readonly "overlay/hover-grey-a": {
-        readonly dark: "#4545451a";
-        readonly light: "#4545451a";
-    };
-    readonly "overlay/press-a": {
-        readonly dark: "#ffffff33";
-        readonly light: "#00000026";
-    };
-    readonly "overlay/press-grey-a": {
-        readonly dark: "#45454526";
-        readonly light: "#45454526";
-    };
-    readonly "service/live": {
-        readonly dark: "#e51a42";
-        readonly light: "#e2012d";
-    };
-    readonly "service/live-weak-a": {
-        readonly dark: "#e51a4226";
-        readonly light: "#e2012d4d";
-    };
-    readonly "service/membership": {
-        readonly dark: "#ffbf00";
-        readonly light: "#ffb010";
-    };
-    readonly "service/membership-weak-a": {
-        readonly dark: "#ffbf001f";
-        readonly light: "#eb91001f";
-    };
-    readonly "service/noti": {
-        readonly dark: "#0c198b";
-        readonly light: "#020f81";
-    };
-    readonly "service/pop-bg": {
-        readonly dark: "linear-gradient(135deg, #3b3a2d 13.08%, #232732 87.56%)";
-        readonly light: "linear-gradient(135deg, #faf7de 13.08%, #e7edfd 87.56%)";
-    };
-    readonly "surface/card": {
-        readonly dark: "#232323";
-        readonly light: "#ffffff";
-    };
-    readonly "surface/display-bar-bottom": {
-        readonly dark: "#151515";
-        readonly light: "#fdfdfd";
-    };
-    readonly "surface/display-bar-top": {
-        readonly dark: "#151515";
-        readonly light: "#ffffff";
-    };
-    readonly "surface/display-lock": {
-        readonly dark: "#2f2f2f";
-        readonly light: "#bfbfbf";
-    };
-    readonly "surface/form-blue": {
-        readonly dark: "#0090ff";
-        readonly light: "#148aff";
-    };
-    readonly "surface/form-blue-weak-a": {
-        readonly dark: "#0f97ff1f";
-        readonly light: "#007aff26";
-    };
-    readonly "surface/form-gradient-h": {
-        readonly dark: "linear-gradient(90deg, #151515 0%, #15151500 100%)";
-        readonly light: "linear-gradient(90deg, #ffffff 0%, #ffffff00 100%)";
-    };
-    readonly "surface/form-green": {
-        readonly dark: "#00cc5f";
-        readonly light: "#00bf59";
-    };
-    readonly "surface/form-green-weak-a": {
-        readonly dark: "#0be06f14";
-        readonly light: "#00b84d26";
-    };
-    readonly "surface/form-grey": {
-        readonly dark: "#7a7a7a";
-        readonly light: "#999999";
-    };
-    readonly "surface/form-grey-weak-a": {
-        readonly dark: "#b3b3b314";
-        readonly light: "#6666661f";
-    };
-    readonly "surface/form-inverted": {
-        readonly dark: "#f7f7f7";
-        readonly light: "#151515";
-    };
-    readonly "surface/form-inverted-deep": {
-        readonly dark: "#ffffff";
-        readonly light: "#000000";
-    };
-    readonly "surface/form-primary-a": {
-        readonly dark: "#ffffff0f";
-        readonly light: "#0000000f";
-    };
-    readonly "surface/form-red": {
-        readonly dark: "#ff4747";
-        readonly light: "#ff4a40";
-    };
-    readonly "surface/form-red-weak-a": {
-        readonly dark: "#ff47471f";
-        readonly light: "#ff4a4026";
-    };
-    readonly "surface/form-secondary-a": {
-        readonly dark: "#ffffff0a";
-        readonly light: "#0000000a";
-    };
-    readonly "surface/form-yellow": {
-        readonly dark: "#f5b625";
-        readonly light: "#f29900";
-    };
-    readonly "surface/form-yellow-weak-a": {
-        readonly dark: "#f5b62514";
-        readonly light: "#f299001f";
-    };
-    readonly "text/blue": {
-        readonly dark: "#0090ff";
-        readonly light: "#148aff";
-    };
-    readonly "text/green": {
-        readonly dark: "#0be06f";
-        readonly light: "#00b84d";
-    };
-    readonly "text/grey": {
-        readonly dark: "#b3b3b3";
-        readonly light: "#666666";
-    };
-    readonly "text/invert-a": {
-        readonly dark: "#000000ed";
-        readonly light: "#ffffffed";
-    };
-    readonly "text/primary": {
-        readonly dark: "#eeeeee";
-        readonly light: "#151515";
-    };
-    readonly "text/primary-a": {
-        readonly dark: "#ffffffed";
-        readonly light: "#000000ed";
-    };
-    readonly "text/quaternary": {
-        readonly dark: "#777777";
-        readonly light: "#999999";
-    };
-    readonly "text/quaternary-a": {
-        readonly dark: "#ffffff80";
-        readonly light: "#00000080";
-    };
-    readonly "text/red": {
-        readonly dark: "#ff4747";
-        readonly light: "#ff4a40";
-    };
-    readonly "text/secondary": {
-        readonly dark: "#bababa";
-        readonly light: "#454545";
-    };
-    readonly "text/secondary-a": {
-        readonly dark: "#ffffffba";
-        readonly light: "#000000ba";
-    };
-    readonly "text/tertiary": {
-        readonly dark: "#999999";
-        readonly light: "#666666";
-    };
-    readonly "text/tertiary-a": {
-        readonly dark: "#ffffff99";
-        readonly light: "#00000099";
-    };
-    readonly "text/yellow": {
-        readonly dark: "#f5b625";
-        readonly light: "#f29900";
-    };
-};
-/** 테마 비의존 색 토큰 (always/auto/picker/pop) → --user-{group}-* */
-declare const flatColors: {
-    readonly "always/avatar-bg01": "#aa47bc";
-    readonly "always/avatar-bg02": "#7a1fa2";
-    readonly "always/avatar-bg03": "#7e57c2";
-    readonly "always/avatar-bg04": "#512da7";
-    readonly "always/avatar-bg05": "#5c6bc0";
-    readonly "always/avatar-bg06": "#0288d1";
-    readonly "always/avatar-bg07": "#00579c";
-    readonly "always/avatar-bg08": "#0098a6";
-    readonly "always/avatar-bg09": "#00887a";
-    readonly "always/avatar-bg10": "#689f39";
-    readonly "always/avatar-bg11": "#33691e";
-    readonly "always/avatar-bg12": "#004c3f";
-    readonly "always/avatar-bg13": "#ec407a";
-    readonly "always/avatar-bg14": "#c2175b";
-    readonly "always/avatar-bg15": "#bf360c";
-    readonly "always/avatar-bg16": "#f5511e";
-    readonly "always/avatar-bg17": "#ef6c00";
-    readonly "always/avatar-bg18": "#8c6e63";
-    readonly "always/avatar-bg19": "#5d4038";
-    readonly "always/avatar-bg20": "#78909c";
-    readonly "always/avatar-bg21": "#465a65";
-    readonly "always/black006-a": "#0000000f";
-    readonly "always/black010-a": "#0000001a";
-    readonly "always/black015-a": "#00000026";
-    readonly "always/black020-a": "#00000033";
-    readonly "always/black030-a": "#0000004d";
-    readonly "always/black050-a": "#00000080";
-    readonly "always/black060-a": "#00000099";
-    readonly "always/black080-a": "#000000cc";
-    readonly "always/black100": "#000000";
-    readonly "always/grey-strong": "#232323";
-    readonly "always/grey085": "#5c5c5c";
-    readonly "always/lightgrey006-a": "#9999990f";
-    readonly "always/lightgrey010-a": "#9999991a";
-    readonly "always/lightgrey015-a": "#99999926";
-    readonly "always/lightgrey020-a": "#99999933";
-    readonly "always/lightgrey030-a": "#9999994d";
-    readonly "always/lightgrey050-a": "#99999980";
-    readonly "always/lightgrey080-a": "#999999cc";
-    readonly "always/lightgrey100": "#999999";
-    readonly "always/palette05": "linear-gradient(135deg, #db2667 0%, #f4a368 100%)";
-    readonly "always/service-live-pop": "#df3868";
-    readonly "always/service-live-red": "#ff0000";
-    readonly "always/service-mnet": "#ff477f";
-    readonly "always/service-mnetapp": "#ff477f";
-    readonly "always/service-point": "linear-gradient(135deg, #1cac3c 0%, #1ca6bb 100%)";
-    readonly "always/service-pop-ing": "linear-gradient(135deg, #db2667 0%, #f4a368 100%)";
-    readonly "always/service-popgrey-weak-a": "#707ca00f";
-    readonly "always/service-post-thumb-a": "#aa89f5cc";
-    readonly "always/service-rankingpoll-thumb-a": "#FFADDD80";
-    readonly "always/service-red080-a": "#f5254acc";
-    readonly "always/service-survey": "#597eff";
-    readonly "always/service-survey-thumb-a": "#7192f5cc";
-    readonly "always/service-ticket": "#00bf59";
-    readonly "always/white006-a": "#ffffff0f";
-    readonly "always/white010-a": "#ffffff1a";
-    readonly "always/white015-a": "#ffffff26";
-    readonly "always/white020-a": "#ffffff33";
-    readonly "always/white030-a": "#ffffff4d";
-    readonly "always/white050-a": "#ffffff80";
-    readonly "always/white060-a": "#ffffff99";
-    readonly "always/white080-a": "#ffffffcc";
-    readonly "always/white100": "#ffffff";
-    readonly "auto/icon-primary-on-dark": "#ffffff";
-    readonly "auto/icon-primary-on-light": "#000000ed";
-    readonly "auto/icon-secondary-on-dark": "#ffffff";
-    readonly "auto/icon-secondary-on-light": "#000000ba";
-    readonly "auto/text-primary-on-dark": "#ffffff";
-    readonly "auto/text-primary-on-light": "#000000";
-    readonly "auto/text-secondary-on-dark": "#ffffffcc";
-    readonly "auto/text-secondary-on-light": "#000000cc";
-    readonly "picker/button": "#654bff";
-    readonly "picker/button-weak-a": "#654bff26";
-    readonly "picker/on-button": "#ffffff";
-    readonly "picker/star": "#7266ff";
-    readonly "pop/bg-tl01": "#c9d0ea";
-    readonly "pop/bg-tl02": "#f2de6f";
-    readonly "pop/bg-tl03": "#fca783";
-    readonly "pop/bg-tl04": "#a0dda6";
-    readonly "pop/bg-tl05": "#a2bce3";
-    readonly "pop/bg-tl06": "#f7b3cf";
-    readonly "pop/bg-tl07": "#bfa2e3";
-    readonly "pop/bg-tl08": "#fb8686";
-    readonly "pop/bg-tl09": "#eec2c2";
-    readonly "pop/bg-tl10": "#e2d1b0";
-    readonly "pop/bubble-tl01": "#7984b1";
-    readonly "pop/bubble-tl03": "#e3703f";
-    readonly "pop/bubble-tl04": "#5fac70";
-    readonly "pop/bubble-tl05": "#587ab1";
-    readonly "pop/bubble-tl06": "#ca7094";
-    readonly "pop/bubble-tl07": "#8067b5";
-    readonly "pop/bubble-tl08": "#cb4e4e";
-    readonly "pop/bubble-tl09": "#cb8181";
-    readonly "pop/bubble-tl1": "#a79272";
-    readonly "pop/item-gradient01": "linear-gradient(135deg, #fbf3ac 0%, #ffe1fc 100%)";
-    readonly "pop/item-gradient02": "linear-gradient(135deg, #cbe6ff 0%, #d5ffdf 100%)";
-    readonly "pop/item-gradient03": "linear-gradient(135deg, #e4ceff 0%, #ffe4cc 100%)";
-    readonly "pop/item-gradient04": "linear-gradient(135deg, #ffdcb3 0%, #c9f8ff 100%)";
-    readonly "pop/item-gradient05": "linear-gradient(135deg, #ffd0ec 0%, #d3fcff 100%)";
-    readonly "pop/item-gradient06": "linear-gradient(135deg, #feb5b5 0%, #d6fee1 100%)";
-};
-/** 그림자 토큰 → --user-mode-shadow-* */
-declare const shadowTokens: {
-    readonly "shadow/default-large": {
-        readonly dark: "0px 1px 2px 0px #00000033, 0px 8px 48px 0px #00000099";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a26";
-    };
-    readonly "shadow/default-medium": {
-        readonly dark: "0px 1px 2px 0px #00000033, 0px 4px 24px 0px #00000066";
-        readonly light: "0px 1px 2px 0px #00000005, 0px 4px 24px 0px #1a1a1a1a";
-    };
-    readonly "shadow/default-small": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000066";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a1a";
-    };
-    readonly "shadow/default-xlarge": {
-        readonly dark: "0px 1px 2px 0px #00000033, 0px 16px 72px 0px #00000099";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a26";
-    };
-    readonly "shadow/default-xsmall": {
-        readonly dark: "0px 1px 2px 0px #00000033, 0px 0px 4px 0px #00000066";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a26";
-    };
-    readonly "shadow/weak-large": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 8px 48px 0px #00000066";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 8px 48px 0px #1a1a1a1f";
-    };
-    readonly "shadow/weak-medium": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 4px 24px 0px #00000033";
-        readonly light: "0px 1px 2px 0px #00000005, 0px 4px 20px 0px #1a1a1a14";
-    };
-    readonly "shadow/weak-small": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 2px 8px 0px #00000033";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 2px 8px 0px #1a1a1a14";
-    };
-    readonly "shadow/weak-xlarge": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 16px 72px 0px #00000066";
-        readonly light: "0px 1px 2px 0px #1a1a1a05, 0px 16px 72px 0px #1a1a1a1f";
-    };
-    readonly "shadow/weak-xsmall": {
-        readonly dark: "0px 1px 2px 0px #0000001a, 0px 0px 4px 0px #00000033";
-        readonly light: "0px 1px 1px 0px #1a1a1a05, 0px 0px 4px 0px #1a1a1a14";
-    };
-};
-/** 타이포그래피 토큰 */
-declare const typographyTokens: {
-    readonly "10/caption": {
-        readonly fontSize: "0.625rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "0.75rem";
-    };
-    readonly "11/caption": {
-        readonly fontSize: "0.6875rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "0.875rem";
-    };
-    readonly "12/caption": {
-        readonly fontSize: "0.75rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1rem";
-    };
-    readonly "13/body": {
-        readonly fontSize: "0.8125rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.125rem";
-    };
-    readonly "14/body": {
-        readonly fontSize: "0.875rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.25rem";
-    };
-    readonly "15/body": {
-        readonly fontSize: "0.9375rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.375rem";
-    };
-    readonly "15/title": {
-        readonly fontSize: "0.9375rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.25rem";
-    };
-    readonly "16/title": {
-        readonly fontSize: "1rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.375rem";
-    };
-    readonly "17/body": {
-        readonly fontSize: "1.0625rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.625rem";
-    };
-    readonly "17/body28": {
-        readonly fontSize: "1.0625rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "1.75rem";
-    };
-    readonly "18/title": {
-        readonly fontSize: "1.125rem";
-        readonly letterSpacing: "-0.5%";
-        readonly lineHeight: "1.375rem";
-    };
-    readonly "20/title": {
-        readonly fontSize: "1.25rem";
-        readonly letterSpacing: "-0.5%";
-        readonly lineHeight: "1.5rem";
-    };
-    readonly "24/title": {
-        readonly fontSize: "1.5rem";
-        readonly letterSpacing: "-0.5%";
-        readonly lineHeight: "1.75rem";
-    };
-    readonly "28/title": {
-        readonly fontSize: "28px";
-        readonly letterSpacing: "-1.5%";
-        readonly lineHeight: "34px";
-    };
-    readonly "32/title": {
-        readonly fontSize: "32px";
-        readonly letterSpacing: "-1.5%";
-        readonly lineHeight: "38px";
-    };
-    readonly "40/title": {
-        readonly fontSize: "40px";
-        readonly letterSpacing: "-1.5%";
-        readonly lineHeight: "48px";
-    };
-    readonly "9/caption": {
-        readonly fontSize: "0.5625rem";
-        readonly letterSpacing: "0%";
-        readonly lineHeight: "0.625rem";
-    };
-};
-/** font-weight 이름 → 숫자 */
-declare const fontWeightMap: {
-    readonly med: 500;
-    readonly reg: 400;
-    readonly semibold: 600;
-};
-/** 폰트 패밀리 스택 */
-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.secondary` === `'var(--user-mode-text-secondary)'` */
-declare const color: Record<string, Record<string, string>>;
-/** 그림자 — 예: `shadow['default-large']` === `'var(--user-mode-shadow-default-large)'` */
-declare const shadow: Record<string, string>;
-type UserColorSlug = keyof typeof modeColors | keyof typeof flatColors;
-type UserTypographyToken = keyof typeof typographyTokens;
-type UserFontWeight = keyof typeof fontWeightMap;
-/** slug → `var(--user-...)` (타입 안전). 예: `cssVar('text/secondary')` */
-declare function cssVar(slug: UserColorSlug): string;
-/** 타이포그래피 → 인라인 스타일. 예: `textStyle('16/title/semibold')` */
-declare function textStyle(token: `${UserTypographyToken & string}/${UserFontWeight & string}`): TextStyleResult;
-/**
- * dev fallback CSS (`:root`-scoped, light + dark).
- * build-css 및 `bstage dev`의 호스트 `:root` 주입에 사용된다.
- * 프로덕션 번들에는 포함하지 않는다.
- */
-declare function renderCss(): string;
-
-export { TextStyleResult, type UserColorSlug, type UserFontWeight, type UserTypographyToken, color, cssVar, flatColors, fontFamily, fontWeightMap, modeColors, renderCss, shadow, shadowTokens, textStyle, typographyTokens };