@uniai-fe/uds-foundation 0.0.1

package/README.md

@@ -0,0 +1,72 @@
+# @uniai-fe/uds-foundation
+
+UNIAI 서비스 전반에서 공유하는 디자인 토큰과 폰트 자산을 CSS 변수 형태로 제공하는 패키지입니다. 색상·여백·레이아웃·타이포그래피·폰트 정의를 모두 포함하며, 다른 패키지(`@uniai-fe/uds-primitives`, `@uniai-fe/uds-templates`)의 기초가 됩니다.
+
+## 설치
+
+```bash
+pnpm add @uniai-fe/uds-foundation
+```
+
+## 사용법 요약
+
+### 1) CSS 변수 주입
+
+```ts
+import "@uniai-fe/uds-foundation";
+```
+
+CSS 파일만 직접 사용하려면:
+
+```ts
+import "@uniai-fe/uds-foundation/css";
+```
+
+```css
+.button-primary {
+  color: var(--color-primary-default);
+  padding: var(--spacing-padding-6);
+  border-radius: var(--theme-radius-medium-1);
+  font: var(--font-body-medium-weight) var(--font-body-medium-size) /
+    var(--font-body-medium-line-height) var(--theme-font-family-pretendard);
+}
+```
+
+### 2) 토큰 데이터(JSON)
+
+```ts
+import { themeTokens } from "@uniai-fe/uds-foundation/data/tokens";
+
+console.log(themeTokens.color.primitive.blue_55);
+```
+
+### 3) 타입스크립트 헬퍼
+
+```ts
+import {
+  colorPrimitiveVar,
+  spacingPaddingPx,
+} from "@uniai-fe/uds-foundation/helpers";
+
+const primaryBg = colorPrimitiveVar("blue_55");
+const mediumGap = spacingPaddingPx("padding_6");
+```
+
+### 4) Next.js `localFont`
+
+```ts
+import localFont from "next/font/local";
+import {
+  pretendardLocalFont,
+  interLocalFont,
+} from "@uniai-fe/uds-foundation/typography/fonts";
+
+export const pretendard = localFont(pretendardLocalFont);
+export const inter = localFont(interLocalFont);
+```
+
+### 5) 패키지 스크립트
+
+- `pnpm build`: 타입 검사 + CSS/폰트 산출
+- `pnpm dev`: watch 모드
+- `pnpm tokens:doc`: 토큰 스냅샷 생성

package/dist/data/color.d.ts

@@ -0,0 +1,10 @@
+import { ThemeColorPrimitive, ThemeColorSemanticSection } from '../types/theme-tokens.js';
+
+/**
+ * /_context/** 추출본을 참고해 수동으로 동기화한 컬러 토큰이다.
+ * SCSS 값과 어긋나면 이 객체를 함께 수정해 문서/검증에 활용한다.
+ */
+declare const color_primitive: ThemeColorPrimitive;
+declare const color_semantic: ThemeColorSemanticSection;
+
+export { color_primitive, color_semantic };

package/dist/data/color.js

@@ -0,0 +1,308 @@
+const color_common = {
+  common_100: "#fff",
+  common_0: "#000"
+};
+const color_neutral = {
+  neutral_10: "#1a1a1a",
+  neutral_20: "#333333",
+  neutral_30: "#4d4d4d",
+  neutral_40: "#666666",
+  neutral_45: "#737373",
+  neutral_50: "#808080",
+  neutral_55: "#8c8c8c",
+  neutral_60: "#999999",
+  neutral_70: "#b3b3b3",
+  neutral_80: "#cccccc",
+  neutral_90: "#e6e6e6",
+  neutral_95: "#f2f2f2",
+  neutral_99: "#fcfcfc"
+};
+const color_cool_gray = {
+  cool_gray_10: "#18191b",
+  cool_gray_20: "#313235",
+  cool_gray_25: "#3d3f43",
+  cool_gray_30: "#494b50",
+  cool_gray_35: "#55585e",
+  cool_gray_40: "#61656b",
+  cool_gray_45: "#6d7178",
+  cool_gray_50: "#797e86",
+  cool_gray_55: "#878b92",
+  cool_gray_60: "#94989e",
+  cool_gray_65: "#a1a5aa",
+  cool_gray_70: "#afb1b6",
+  cool_gray_75: "#bcbec2",
+  cool_gray_80: "#cacbce",
+  cool_gray_85: "#d7d8db",
+  cool_gray_90: "#e4e5e7",
+  cool_gray_95: "#f2f2f3",
+  cool_gray_99: "#fcfcfd"
+};
+const color_blue = {
+  blue_10: "#001233",
+  blue_20: "#002466",
+  blue_30: "#003699",
+  blue_40: "#0047cc",
+  blue_45: "#0050e5",
+  blue_50: "#0059ff",
+  blue_55: "#1a6aff",
+  blue_60: "#337aff",
+  blue_70: "#669cff",
+  blue_80: "#99bdff",
+  blue_90: "#ccdeff",
+  blue_95: "#e5eeff",
+  blue_99: "#fafcff"
+};
+const color_purple = {
+  purple_10: "#120033",
+  purple_20: "#240066",
+  purple_30: "#360099",
+  purple_40: "#4800cc",
+  purple_45: "#5200e5",
+  purple_50: "#5b00ff",
+  purple_55: "#6c1bff",
+  purple_60: "#7b33ff",
+  purple_70: "#9c66ff",
+  purple_80: "#bd99ff",
+  purple_90: "#deccff",
+  purple_95: "#efe5ff",
+  purple_99: "#fcfaff"
+};
+const color_magenta = {
+  magenta_10: "#32012e",
+  magenta_20: "#64025b",
+  magenta_30: "#950489",
+  magenta_40: "#c705b6",
+  magenta_45: "#e005cd",
+  magenta_50: "#f906e4",
+  magenta_55: "#fa1fe7",
+  magenta_60: "#fa38e9",
+  magenta_70: "#fb6aef",
+  magenta_80: "#fd9bf4",
+  magenta_90: "#fecdfa",
+  magenta_95: "#fee6fc",
+  magenta_99: "#fffafe"
+};
+const color_pink = {
+  pink_10: "#320116",
+  pink_20: "#63032b",
+  pink_30: "#950441",
+  pink_40: "#c70556",
+  pink_45: "#e00661",
+  pink_50: "#f8076c",
+  pink_55: "#f91f7a",
+  pink_60: "#fa3889",
+  pink_70: "#fb6aa7",
+  pink_80: "#fc9cc4",
+  pink_90: "#fecde2",
+  pink_95: "#fee6f0",
+  pink_99: "#fffafc"
+};
+const color_red = {
+  red_10: "#310602",
+  red_20: "#610d05",
+  red_30: "#921307",
+  red_40: "#c21a0a",
+  red_45: "#da1d0b",
+  red_50: "#f2200d",
+  red_55: "#f43625",
+  red_60: "#f54d3d",
+  red_70: "#f7796e",
+  red_80: "#faa69e",
+  red_90: "#fcd2cf",
+  red_95: "#fde8e7",
+  red_99: "#fffafa"
+};
+const color_orange = {
+  orange_10: "#331100",
+  orange_20: "#662200",
+  orange_30: "#993300",
+  orange_40: "#cc4400",
+  orange_45: "#e54d00",
+  orange_50: "#ff5500",
+  orange_55: "#ff661a",
+  orange_60: "#ff7733",
+  orange_70: "#ff9966",
+  orange_80: "#ffbb99",
+  orange_90: "#ffddcc",
+  orange_95: "#ffeee5",
+  orange_99: "#fffcfa"
+};
+const color_yellow = {
+  yellow_10: "#302903",
+  yellow_20: "#615205",
+  yellow_30: "#917a08",
+  yellow_40: "#c2a30a",
+  yellow_45: "#dab80b",
+  yellow_50: "#f2cc0d",
+  yellow_55: "#f4d125",
+  yellow_60: "#f5d63d",
+  yellow_70: "#f7e06e",
+  yellow_80: "#faeb9e",
+  yellow_90: "#fcf5cf",
+  yellow_95: "#fefae7",
+  yellow_99: "#fffefa"
+};
+const color_lime = {
+  lime_10: "#2b3300",
+  lime_20: "#556600",
+  lime_30: "#809900",
+  lime_40: "#aacc00",
+  lime_45: "#bfe500",
+  lime_50: "#d5ff00",
+  lime_55: "#d9ff1a",
+  lime_60: "#ddff33",
+  lime_70: "#e6ff66",
+  lime_80: "#eeff99",
+  lime_90: "#f7ffcc",
+  lime_95: "#fbffe5",
+  lime_99: "#fefffa"
+};
+const color_green = {
+  green_10: "#062d13",
+  green_20: "#0d5926",
+  green_30: "#138639",
+  green_40: "#1ab24d",
+  green_45: "#1dc956",
+  green_50: "#20df60",
+  green_55: "#36e270",
+  green_60: "#4de580",
+  green_70: "#79ec9f",
+  green_80: "#a6f2bf",
+  green_90: "#d2f9df",
+  green_95: "#e9fcef",
+  green_99: "#fbfefc"
+};
+const color_bright_green = {
+  bright_green_10: "#213003",
+  bright_green_20: "#426105",
+  bright_green_30: "#639108",
+  bright_green_40: "#84c10b",
+  bright_green_45: "#95da0c",
+  bright_green_50: "#a5f20d",
+  bright_green_55: "#aef325",
+  bright_green_60: "#b7f43e",
+  bright_green_70: "#c9f76e",
+  bright_green_80: "#dbfa9e",
+  bright_green_90: "#edfccf",
+  bright_green_95: "#f6fee7",
+  bright_green_99: "#fdfffa"
+};
+const color_teal = {
+  teal_10: "#062d20",
+  teal_20: "#0d5940",
+  teal_30: "#13865f",
+  teal_40: "#1ab27f",
+  teal_45: "#1dc98f",
+  teal_50: "#20df9f",
+  teal_55: "#36e2a9",
+  teal_60: "#4de5b2",
+  teal_70: "#79ecc5",
+  teal_80: "#a6f2d9",
+  teal_90: "#d2f9ec",
+  teal_95: "#e9fcf5",
+  teal_99: "#fbfefd"
+};
+const color_cyan = {
+  cyan_10: "#002f33",
+  cyan_20: "#005e66",
+  cyan_30: "#008c99",
+  cyan_40: "#00bbcc",
+  cyan_45: "#00d2e5",
+  cyan_50: "#00eaff",
+  cyan_55: "#1aecff",
+  cyan_60: "#33eeff",
+  cyan_70: "#66f2ff",
+  cyan_80: "#99f7ff",
+  cyan_90: "#ccfbff",
+  cyan_95: "#e5fdff",
+  cyan_99: "#faffff"
+};
+const color_primitive = {
+  ...color_common,
+  ...color_neutral,
+  ...color_cool_gray,
+  ...color_blue,
+  ...color_purple,
+  ...color_magenta,
+  ...color_pink,
+  ...color_red,
+  ...color_orange,
+  ...color_yellow,
+  ...color_lime,
+  ...color_green,
+  ...color_bright_green,
+  ...color_teal,
+  ...color_cyan
+};
+const color_semantic = {
+  primary: {
+    default: color_primitive.blue_55,
+    strong: color_primitive.blue_45,
+    heavy: color_primitive.blue_30
+  },
+  secondary: {
+    default: color_primitive.blue_95,
+    strong: color_primitive.blue_90,
+    heavy: color_primitive.blue_80
+  },
+  tertiary: {
+    default: color_primitive.cool_gray_95,
+    strong: color_primitive.cool_gray_90,
+    heavy: color_primitive.cool_gray_80
+  },
+  label: {
+    strong: color_primitive.cool_gray_10,
+    standard: color_primitive.cool_gray_20,
+    neutral: color_primitive.cool_gray_50,
+    alternative: color_primitive.cool_gray_70,
+    assistive: color_primitive.cool_gray_80,
+    disabled: color_primitive.cool_gray_80
+  },
+  border: {
+    standard: {
+      cool_gray: color_primitive.cool_gray_90,
+      blue: color_primitive.blue_90,
+      strong: color_primitive.cool_gray_75,
+      heavy: color_primitive.cool_gray_20,
+      alternative: color_primitive.cool_gray_80,
+      assistive: color_primitive.cool_gray_90
+    }
+  },
+  background: {
+    standard: {
+      cool_gray: color_primitive.cool_gray_99,
+      neutral: color_primitive.neutral_99
+    },
+    alternative: {
+      cool_gray: color_primitive.cool_gray_95,
+      neutral: color_primitive.neutral_95
+    }
+  },
+  surface: {
+    static: {
+      white: color_primitive.common_100,
+      cool_gray: color_primitive.cool_gray_99,
+      blue: color_primitive.blue_95
+    },
+    neutral: color_primitive.neutral_95,
+    standard: color_primitive.cool_gray_95,
+    strong: color_primitive.neutral_80,
+    heavy: color_primitive.cool_gray_20
+  },
+  interaction: {
+    static: color_primitive.common_100,
+    disabled: color_primitive.cool_gray_95
+  },
+  feedback: {
+    danger: color_primitive.red_40,
+    error: color_primitive.red_45,
+    warning: color_primitive.yellow_50,
+    success: color_primitive.green_40,
+    information: color_primitive.blue_60,
+    new: color_primitive.red_50
+  }
+};
+export {
+  color_primitive,
+  color_semantic
+};

package/dist/data/layout.d.ts

@@ -0,0 +1,37 @@
+import { ThemeTokens } from '../types/theme-tokens.js';
+
+declare const layout_breakpoint: ThemeTokens["layout"]["breakpoint"];
+declare const layout_size: ThemeTokens["layout"]["size"];
+declare const layout_radius: {
+    readonly size: {
+        readonly size_4x4: 1;
+        readonly size_8x8: 2;
+        readonly size_12x12: 2;
+        readonly size_16x16: 2;
+        readonly size_20x20: 4;
+        readonly size_24x24: 4;
+        readonly size_32x32: 4;
+        readonly size_40x40: 6;
+        readonly size_48x48: 6;
+        readonly size_56x56: 8;
+        readonly size_64x64: 10;
+        readonly size_72x72: 12;
+        readonly size_80x80: 16;
+        readonly size_96x96: 16;
+        readonly size_120x120: 16;
+    };
+    readonly level: {
+        readonly xxsmall: 1;
+        readonly xsmall: 2;
+        readonly small: 4;
+        readonly medium_1: 6;
+        readonly medium_2: 6;
+        readonly medium_3: 8;
+        readonly medium_4: 10;
+        readonly large_1: 12;
+        readonly large_2: 16;
+        readonly xlarge: 16;
+    };
+};
+
+export { layout_breakpoint, layout_radius, layout_size };

package/dist/data/layout.js

@@ -0,0 +1,59 @@
+const layout_breakpoint = {
+  xsmall: 0,
+  small: 768,
+  medium: 992,
+  large: 1200
+};
+const layout_size = {
+  xxsmall: 4,
+  xsmall_1: 8,
+  xsmall_2: 12,
+  xsmall_3: 16,
+  small_1: 20,
+  small_2: 24,
+  small_3: 32,
+  medium_1: 40,
+  medium_2: 48,
+  medium_3: 56,
+  medium_4: 64,
+  large_1: 72,
+  large_2: 80,
+  xlarge_1: 96,
+  xlarge_2: 120
+};
+const layout_radius = {
+  size: {
+    size_4x4: 1,
+    size_8x8: 2,
+    size_12x12: 2,
+    size_16x16: 2,
+    size_20x20: 4,
+    size_24x24: 4,
+    size_32x32: 4,
+    size_40x40: 6,
+    size_48x48: 6,
+    size_56x56: 8,
+    size_64x64: 10,
+    size_72x72: 12,
+    size_80x80: 16,
+    size_96x96: 16,
+    size_120x120: 16
+  },
+  level: {
+    xxsmall: 1,
+    xsmall: 2,
+    small: 4,
+    medium_1: 6,
+    medium_2: 6,
+    medium_3: 8,
+    medium_4: 10,
+    large_1: 12,
+    large_2: 16,
+    xlarge: 16
+  }
+};
+export {
+  layout_breakpoint,
+  layout_radius,
+  layout_size
+};

package/dist/data/spacing.d.ts

@@ -0,0 +1,6 @@
+import { ThemeSpacingScale } from '../types/theme-tokens.js';
+
+declare const spacing_padding: ThemeSpacingScale;
+declare const spacing_gap: ThemeSpacingScale;
+
+export { spacing_gap, spacing_padding };

package/dist/data/spacing.js

@@ -0,0 +1,34 @@
+const spacing_padding = {
+  padding_1: 2,
+  padding_2: 4,
+  padding_3: 6,
+  padding_4: 8,
+  padding_5: 12,
+  padding_6: 16,
+  padding_7: 20,
+  padding_8: 24,
+  padding_9: 28,
+  padding_10: 32,
+  padding_11: 40
+};
+const spacing_gap = {
+  gap_1: 2,
+  gap_2: 4,
+  gap_3: 6,
+  gap_4: 8,
+  gap_5: 12,
+  gap_6: 16,
+  gap_7: 20,
+  gap_8: 24,
+  gap_9: 28,
+  gap_10: 32,
+  gap_11: 36,
+  gap_12: 40,
+  gap_13: 48,
+  gap_14: 64,
+  gap_15: 80
+};
+export {
+  spacing_gap,
+  spacing_padding
+};

package/dist/data/tokens.d.ts

@@ -0,0 +1,5 @@
+import { ThemeTokens } from '../types/theme-tokens.js';
+
+declare const themeTokens: ThemeTokens;
+
+export { themeTokens };

package/dist/data/tokens.js

@@ -0,0 +1,23 @@
+import { color_primitive, color_semantic } from "./color.js";
+import { spacing_gap, spacing_padding } from "./spacing.js";
+import { layout_breakpoint, layout_radius, layout_size } from "./layout.js";
+import { typography_tokens } from "./typography.js";
+const themeTokens = {
+  color: {
+    primitive: color_primitive,
+    semantic: color_semantic
+  },
+  spacing: {
+    padding: spacing_padding,
+    gap: spacing_gap
+  },
+  layout: {
+    breakpoint: layout_breakpoint,
+    size: layout_size,
+    radius: layout_radius
+  },
+  typography: typography_tokens
+};
+export {
+  themeTokens
+};

package/dist/data/typography.d.ts

@@ -0,0 +1,5 @@
+import { ThemeTokens } from '../types/theme-tokens.js';
+
+declare const typography_tokens: ThemeTokens["typography"];
+
+export { typography_tokens };

package/dist/data/typography.js

@@ -0,0 +1,123 @@
+const typography_tokens = {
+  display: {
+    large: {
+      size: 60,
+      line_height: "1.4em",
+      letter_spacing: -0.2,
+      font_weight: 700
+    },
+    medium: {
+      size: 44,
+      line_height: "1.4em",
+      letter_spacing: -0.2,
+      font_weight: 700
+    },
+    small: {
+      size: 36,
+      line_height: "1.4em",
+      letter_spacing: -0.2,
+      font_weight: 600
+    }
+  },
+  heading: {
+    xlarge: {
+      size: 40,
+      line_height: "1.4em",
+      letter_spacing: -0.2,
+      font_weight: 600
+    },
+    large: {
+      size: 32,
+      line_height: "1.4em",
+      letter_spacing: -0.2,
+      font_weight: 600
+    },
+    medium: {
+      size: 24,
+      line_height: "1.4em",
+      letter_spacing: 0,
+      font_weight: 600
+    },
+    small: {
+      size: 19,
+      line_height: "1.4em",
+      letter_spacing: 0,
+      font_weight: 600
+    },
+    xsmall: {
+      size: 17,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 600
+    },
+    xxsmall: {
+      size: 15,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 600
+    }
+  },
+  body: {
+    large: {
+      size: 19,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 600
+    },
+    medium: {
+      size: 17,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 500
+    },
+    small: {
+      size: 15,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 400
+    },
+    xsmall: {
+      size: 13,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 400
+    }
+  },
+  label: {
+    large: {
+      size: 16,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 400
+    },
+    medium: {
+      size: 14,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 400
+    },
+    small: {
+      size: 13,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 500
+    }
+  },
+  caption: {
+    large: {
+      size: 12,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 600
+    },
+    medium: {
+      size: 11,
+      line_height: "1.5em",
+      letter_spacing: 0,
+      font_weight: 500
+    }
+  }
+};
+export {
+  typography_tokens
+};