@uniai-fe/uds-foundation 0.0.3 → 0.0.5

package/src/data/color.ts

@@ -0,0 +1,329 @@
+import type {
+  ThemeColorPrimitive,
+  ThemeColorSemanticSection,
+} from "../types/theme-tokens";
+
+const color_common: ThemeColorPrimitive = {
+  common_100: "#fff",
+  common_0: "#000",
+} as const;
+
+const color_neutral: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_cool_gray: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_blue: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_purple: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_magenta: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_pink: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_red: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_orange: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_yellow: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_lime: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_green: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_bright_green: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_teal: ThemeColorPrimitive = {
+  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",
+} as const;
+
+const color_cyan: ThemeColorPrimitive = {
+  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",
+} as const;
+
+/**
+ * /_context/** 추출본을 참고해 수동으로 동기화한 컬러 토큰이다.
+ * SCSS 값과 어긋나면 이 객체를 함께 수정해 문서/검증에 활용한다.
+ */
+export const color_primitive: ThemeColorPrimitive = {
+  ...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,
+};
+
+export const color_semantic: ThemeColorSemanticSection = {
+  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,
+  },
+};

package/src/data/layout.ts

@@ -0,0 +1,58 @@
+import type { ThemeTokens } from "../types/theme-tokens";
+
+export const layout_breakpoint: ThemeTokens["layout"]["breakpoint"] = {
+  xsmall: 0,
+  small: 768,
+  medium: 992,
+  large: 1200,
+};
+
+export const layout_size: ThemeTokens["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,
+};
+
+export 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,
+  },
+} as const;

package/src/data/spacing.ts

@@ -0,0 +1,33 @@
+import type { ThemeSpacingScale } from "../types/theme-tokens";
+
+export const spacing_padding: ThemeSpacingScale = {
+  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,
+};
+
+export const spacing_gap: ThemeSpacingScale = {
+  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,
+};

package/src/data/tokens.ts

@@ -0,0 +1,22 @@
+import type { ThemeTokens } from "../types/theme-tokens";
+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";
+
+export const themeTokens: 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,
+} as const;

package/src/data/typography.ts

@@ -0,0 +1,122 @@
+import type { ThemeTokens } from "../types/theme-tokens";
+
+export const typography_tokens: ThemeTokens["typography"] = {
+  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,
+    },
+  },
+};

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/helpers/index.ts

@@ -0,0 +1,83 @@
+import { themeTokens } from "../data/tokens.js";
+
+const tokens = themeTokens;
+
+const cssVar = (name: string) => `var(--${name})`;
+const kebab = (value: string) => value.replace(/_/g, "-");
+const dropPrefix = (value: string, prefix: string) =>
+  value.startsWith(`${prefix}_`) ? value.slice(prefix.length + 1) : value;
+
+export type ThemeColorPrimitiveKey = keyof typeof tokens.color.primitive;
+
+export function colorPrimitiveHex(key: ThemeColorPrimitiveKey): string {
+  return tokens.color.primitive[key];
+}
+
+export function colorPrimitiveVar(key: ThemeColorPrimitiveKey): string {
+  return cssVar(`color-${kebab(key)}`);
+}
+
+export type ThemeSpacingPaddingKey = keyof typeof tokens.spacing.padding;
+export type ThemeSpacingGapKey = keyof typeof tokens.spacing.gap;
+
+export function spacingPaddingPx(key: ThemeSpacingPaddingKey): number {
+  return tokens.spacing.padding[key];
+}
+
+export function spacingPaddingVar(key: ThemeSpacingPaddingKey): string {
+  const suffix = kebab(dropPrefix(key, "padding"));
+  return cssVar(`spacing-padding-${suffix}`);
+}
+
+export function spacingGapPx(key: ThemeSpacingGapKey): number {
+  return tokens.spacing.gap[key];
+}
+
+export function spacingGapVar(key: ThemeSpacingGapKey): string {
+  const suffix = kebab(dropPrefix(key, "gap"));
+  return cssVar(`spacing-gap-${suffix}`);
+}
+
+export type ThemeLayoutBreakpointKey = keyof typeof tokens.layout.breakpoint;
+export type ThemeLayoutSizeKey = keyof typeof tokens.layout.size;
+export type ThemeLayoutRadiusSizeKey = keyof typeof tokens.layout.radius.size;
+export type ThemeLayoutRadiusLevelKey = keyof typeof tokens.layout.radius.level;
+
+export function layoutBreakpointPx(key: ThemeLayoutBreakpointKey): number {
+  return tokens.layout.breakpoint[key];
+}
+
+export function layoutBreakpointVar(key: ThemeLayoutBreakpointKey): string {
+  return cssVar(`theme-breakpoint-${kebab(key)}-start`);
+}
+
+export function layoutSizePx(key: ThemeLayoutSizeKey): number {
+  return tokens.layout.size[key];
+}
+
+export function layoutSizeVar(key: ThemeLayoutSizeKey): string {
+  return cssVar(`theme-size-${kebab(key)}`);
+}
+
+export function layoutRadiusSizePx(key: ThemeLayoutRadiusSizeKey): number {
+  return tokens.layout.radius.size[key];
+}
+
+export function layoutRadiusSizeVar(key: ThemeLayoutRadiusSizeKey): string {
+  const suffix = kebab(dropPrefix(key, "size"));
+  return cssVar(`theme-radius-${suffix}`);
+}
+
+export function layoutRadiusLevelPx(key: ThemeLayoutRadiusLevelKey): number {
+  return tokens.layout.radius.level[key];
+}
+
+export function layoutRadiusLevelVar(key: ThemeLayoutRadiusLevelKey): string {
+  return cssVar(`theme-radius-${kebab(key)}`);
+}
+
+export type ThemeTypographyCategoryKey = keyof typeof tokens.typography;
+
+export function typographyVariants(category: ThemeTypographyCategoryKey) {
+  return tokens.typography[category];
+}

package/src/index.scss

@@ -0,0 +1,16 @@
+@use "./init/reset.scss";
+@use "./init/document.scss";
+
+// 각 @use 대상은 내부에서 @layer theme.tokens.* 으로 토큰을 정의한다.
+@use "./color/index.scss";
+@use "./spacing/padding.scss";
+@use "./spacing/gap.scss";
+@use "./layout/breakpoint.scss";
+@use "./layout/size.scss";
+@use "./layout/radius.scss";
+@use "./typography/fonts/font-family.scss";
+@use "./typography/styles/display.scss";
+@use "./typography/styles/heading.scss";
+@use "./typography/styles/body.scss";
+@use "./typography/styles/label.scss";
+@use "./typography/styles/caption.scss";

package/src/index.ts

@@ -0,0 +1,3 @@
+import "./index.scss";
+
+export * from "./typography/fonts";

package/src/init/document.scss

@@ -0,0 +1,13 @@
+// 문서 루트 영역 기본 레이아웃을 정의
+@layer theme.init {
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    overflow: auto;
+    z-index: 0;
+  }
+}