@uniai-fe/uds-foundation 0.0.2 → 0.0.4

package/src/init/reset.scss

@@ -0,0 +1,306 @@
+// 기본 Reset 규칙을 theme.init 레이어에 정의
+@layer theme.init {
+  :root {
+    -webkit-tap-highlight-color: transparent;
+    text-size-adjust: none;
+    overflow-wrap: break-word;
+    word-break: break-word;
+  }
+
+  *,
+  *::before,
+  *::after {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    box-sizing: border-box;
+  }
+
+  * {
+    letter-spacing: -0.05em;
+    flex-shrink: 0;
+    overscroll-behavior-y: none;
+  }
+
+  *:focus,
+  *:focus-within,
+  *:focus-visible {
+    outline: none;
+  }
+
+  html {
+    width: 100%;
+    font-size: 10px;
+    font-family: var(--font-family-sans);
+    background-color: #fff;
+    touch-action: manipulation;
+  }
+
+  body {
+    width: 100%;
+    position: relative;
+    background: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    padding: 0;
+    font-weight: 500;
+    line-height: 1em;
+  }
+
+  strong,
+  b {
+    font-weight: 700;
+    line-height: 1em;
+  }
+
+  p,
+  span,
+  i,
+  sup,
+  sub,
+  del,
+  ins,
+  s {
+    margin: 0;
+    padding: 0;
+    line-height: 1em;
+    word-break: keep-all;
+  }
+
+  i,
+  address,
+  cite,
+  em,
+  q {
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  blockquote,
+  abbr,
+  dfn {
+    font-weight: 400;
+  }
+
+  pre,
+  code,
+  samp,
+  kbd,
+  var {
+    font-family:
+      "Consolas", "Monaco", "Menlo", "DejaVu Sans Mono", SFMono-Regular,
+      "Liberation Mono", "Courier New", monospace;
+  }
+
+  blockquote,
+  q {
+    quotes: none;
+  }
+
+  blockquote::before,
+  blockquote::after,
+  q::before,
+  q::after {
+    content: "";
+  }
+
+  img,
+  svg {
+    max-width: 100%;
+    object-fit: contain;
+    perspective: 1;
+  }
+
+  li,
+  dt,
+  dd {
+    list-style: none;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    table-layout: fixed;
+  }
+
+  label {
+    display: block;
+  }
+
+  legend,
+  caption {
+    display: none;
+  }
+
+  article,
+  aside,
+  footer,
+  header,
+  main,
+  nav,
+  section,
+  time,
+  audio,
+  canvas,
+  figure,
+  figcaption,
+  video,
+  meter,
+  progress,
+  details,
+  summary {
+    display: block;
+  }
+
+  figure {
+    position: relative;
+    width: fit-content;
+    height: fit-content;
+    font-size: 0;
+  }
+
+  a {
+    display: block;
+    color: #333;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  input,
+  select,
+  button,
+  textarea {
+    display: block;
+    max-width: 100%;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    outline: none;
+    caret-color: transparent;
+    appearance: none;
+  }
+
+  button {
+    cursor: pointer;
+    font-family: inherit;
+    user-select: none;
+  }
+
+  textarea {
+    resize: none;
+  }
+
+  select {
+    user-select: none;
+  }
+
+  select::-ms-expand {
+    opacity: 0;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1;
+    color: #959595;
+  }
+
+  input:focus::placeholder,
+  textarea:focus::placeholder {
+    color: transparent;
+  }
+
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    appearance: button;
+  }
+
+  [type="search"] {
+    appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  :-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  ::-webkit-search-decoration,
+  ::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    appearance: button;
+  }
+
+  input[type="date"],
+  input[type="number"] {
+    appearance: none;
+  }
+
+  input[type="date"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    display: none;
+  }
+
+  input[type="date"]::-webkit-calendar-picker-indicator,
+  input[type="number"]::-webkit-calendar-picker-indicator {
+    opacity: 0;
+  }
+
+  input[type="date"]::-webkit-clear-button,
+  input[type="number"]::-webkit-clear-button {
+    display: none;
+  }
+
+  input[type="date"]::-ms-clear,
+  input[type="number"]::-ms-clear {
+    display: none;
+  }
+
+  input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+  }
+
+  input[type="checkbox"] {
+    appearance: checkbox;
+  }
+
+  button:disabled {
+    cursor: default;
+  }
+
+  progress {
+    appearance: none;
+    border: 1px solid #e1e1e1;
+  }
+
+  progress::-webkit-progress-bar {
+    background-color: #fff;
+  }
+
+  progress::-webkit-progress-value {
+    background-color: grey;
+  }
+
+  @media (orientation: landscape) {
+    html.mobile-device {
+      font-size: 1vw;
+    }
+  }
+
+  @media (orientation: portrait) {
+    html.mobile-device {
+      font-size: 1vw;
+    }
+  }
+}

package/src/layout/breakpoint.scss

@@ -0,0 +1,8 @@
+@layer theme.tokens.layout {
+  :root {
+    --theme-breakpoint-xsmall-start: 0px;
+    --theme-breakpoint-small-start: 768px;
+    --theme-breakpoint-medium-start: 992px;
+    --theme-breakpoint-large-start: 1200px;
+  }
+}

package/src/layout/radius.scss

@@ -0,0 +1,32 @@
+@layer theme.tokens.layout {
+  :root {
+    // radius (by size)
+    --theme-radius-4x4: 1px;
+    --theme-radius-8x8: 2px;
+    --theme-radius-12x12: 2px;
+    --theme-radius-16x16: 2px;
+    --theme-radius-20x20: 4px;
+    --theme-radius-24x24: 4px;
+    --theme-radius-32x32: 4px;
+    --theme-radius-40x40: 6px;
+    --theme-radius-48x48: 6px;
+    --theme-radius-56x56: 8px;
+    --theme-radius-64x64: 10px;
+    --theme-radius-72x72: 12px;
+    --theme-radius-80x80: 16px;
+    --theme-radius-96x96: 16px;
+    --theme-radius-120x120: 16px;
+
+    // radius (by level)
+    --theme-radius-xxsmall: 1px;
+    --theme-radius-xsmall: 2px;
+    --theme-radius-small: 4px;
+    --theme-radius-medium-1: 6px;
+    --theme-radius-medium-2: 6px;
+    --theme-radius-medium-3: 8px;
+    --theme-radius-medium-4: 10px;
+    --theme-radius-large-1: 12px;
+    --theme-radius-large-2: 16px;
+    --theme-radius-xlarge: 16px;
+  }
+}

package/src/layout/size.scss

@@ -0,0 +1,19 @@
+@layer theme.tokens.layout {
+  :root {
+    --theme-size-xxsmall: 4px;
+    --theme-size-xsmall-1: 8px;
+    --theme-size-xsmall-2: 12px;
+    --theme-size-xsmall-3: 16px;
+    --theme-size-small-1: 20px;
+    --theme-size-small-2: 24px;
+    --theme-size-small-3: 32px;
+    --theme-size-medium-1: 40px;
+    --theme-size-medium-2: 48px;
+    --theme-size-medium-3: 56px;
+    --theme-size-medium-4: 64px;
+    --theme-size-large-1: 72px;
+    --theme-size-large-2: 80px;
+    --theme-size-xlarge-1: 96px;
+    --theme-size-xlarge-2: 120px;
+  }
+}

package/src/spacing/gap.scss

@@ -0,0 +1,19 @@
+@layer theme.tokens.spacing {
+  :root {
+    --spacing-gap-1: 2px;
+    --spacing-gap-2: 4px;
+    --spacing-gap-3: 6px;
+    --spacing-gap-4: 8px;
+    --spacing-gap-5: 12px;
+    --spacing-gap-6: 16px;
+    --spacing-gap-7: 20px;
+    --spacing-gap-8: 24px;
+    --spacing-gap-9: 28px;
+    --spacing-gap-10: 32px;
+    --spacing-gap-11: 36px;
+    --spacing-gap-12: 40px;
+    --spacing-gap-13: 48px;
+    --spacing-gap-14: 64px;
+    --spacing-gap-15: 80px;
+  }
+}

package/src/spacing/padding.scss

@@ -0,0 +1,15 @@
+@layer theme.tokens.spacing {
+  :root {
+    --spacing-padding-1: 2px;
+    --spacing-padding-2: 4px;
+    --spacing-padding-3: 6px;
+    --spacing-padding-4: 8px;
+    --spacing-padding-5: 12px;
+    --spacing-padding-6: 16px;
+    --spacing-padding-7: 20px;
+    --spacing-padding-8: 24px;
+    --spacing-padding-9: 28px;
+    --spacing-padding-10: 32px;
+    --spacing-padding-11: 40px;
+  }
+}

package/src/types/theme-tokens.ts

@@ -0,0 +1,39 @@
+export interface ThemeTypographyVariant {
+  readonly size: number;
+  readonly line_height: string;
+  readonly letter_spacing: number;
+  readonly font_weight: number;
+}
+
+export type ThemeColorPrimitive = Record<string, string>;
+export interface ThemeColorSemanticSection {
+  readonly [token: string]: string | ThemeColorSemanticSection;
+}
+export type ThemeSpacingScale = Record<string, number>;
+export type ThemeLayoutSizes = Record<string, number>;
+export type ThemeTypographyCategory = Record<string, ThemeTypographyVariant>;
+
+export interface ThemeTokens {
+  readonly color: {
+    readonly primitive: ThemeColorPrimitive;
+    readonly semantic: ThemeColorSemanticSection;
+  };
+  readonly spacing: {
+    readonly padding: ThemeSpacingScale;
+    readonly gap: ThemeSpacingScale;
+  };
+  readonly layout: {
+    readonly breakpoint: Record<
+      "xsmall" | "small" | "medium" | "large",
+      number
+    >;
+    readonly size: ThemeLayoutSizes;
+    readonly radius: {
+      readonly size: ThemeLayoutSizes;
+      readonly level: ThemeLayoutSizes;
+    };
+  };
+  readonly typography: {
+    readonly [category: string]: ThemeTypographyCategory;
+  };
+}

package/src/typography/fonts/font-family.scss

@@ -0,0 +1,28 @@
+@layer theme.tokens.typography {
+  :root {
+    // Pretendard 계열 기본 스택
+    --font-family-pretendard:
+      "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
+      "Pretendard", "Noto Sans KR", "-apple-system", "BlinkMacSystemFont",
+      "Apple SD Gothic Neo", "Segoe UI", "Roboto", "Helvetica",
+      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
+      "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
+
+    // Inter 계열 기본 스택
+    --font-family-inter:
+      "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont",
+      "Segoe UI", "Roboto", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움",
+      "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
+
+    // 시스템 기본 산세리프 스택
+    --font-family-system:
+      "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
+      "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji",
+      "Segoe UI Symbol", "Malgun Gothic", "맑은 고딕", "돋움", "dotum",
+      "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
+
+    --font-family-sans: var(--font-family-pretendard);
+  }
+}

package/src/typography/fonts/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export * from "./pretendard";
+export * from "./inter";

package/src/typography/fonts/inter.ts

@@ -0,0 +1,33 @@
+import { createLocalFontOptions, type ThemeFontDefinition } from "./types";
+
+const INTER_SRC = "../../fonts/inter/InterVariable.woff2";
+
+export const interFont: ThemeFontDefinition = {
+  name: "InterVariable",
+  family: "InterVariable",
+  cssVariable: "--theme-font-family-inter",
+  fallbacks: [
+    "Inter",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Roboto",
+    "Helvetica Neue",
+    "Arial",
+    "sans-serif",
+  ],
+  display: "swap",
+  preload: false,
+  sources: [
+    {
+      filename: INTER_SRC,
+      weight: "100 900",
+      style: "normal",
+    },
+  ],
+};
+
+export const interLocalFont = createLocalFontOptions(
+  interFont,
+  import.meta.url,
+);

package/src/typography/fonts/pretendard.ts

@@ -0,0 +1,35 @@
+import { createLocalFontOptions, type ThemeFontDefinition } from "./types";
+
+const PRETENDARD_SRC = "../../fonts/pretendard-jp/PretendardJPVariable.woff2";
+
+export const pretendardFont: ThemeFontDefinition = {
+  name: "PretendardJPVariable",
+  family: "Pretendard JP Variable",
+  cssVariable: "--theme-font-family-pretendard",
+  fallbacks: [
+    "Pretendard Variable",
+    "Pretendard",
+    "Inter",
+    "-apple-system",
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Apple SD Gothic Neo",
+    "Noto Sans KR",
+    "Malgun Gothic",
+    "sans-serif",
+  ],
+  display: "swap",
+  preload: true,
+  sources: [
+    {
+      filename: PRETENDARD_SRC,
+      weight: "100 900",
+      style: "normal",
+    },
+  ],
+};
+
+export const pretendardLocalFont = createLocalFontOptions(
+  pretendardFont,
+  import.meta.url,
+);

package/src/typography/fonts/types.ts

@@ -0,0 +1,53 @@
+export type ThemeFontStyle = "normal" | "italic";
+
+export type ThemeFontDisplay =
+  | "auto"
+  | "block"
+  | "swap"
+  | "fallback"
+  | "optional";
+
+export interface ThemeFontSource {
+  filename: string;
+  weight: string;
+  style: ThemeFontStyle;
+}
+
+export interface ThemeFontDefinition {
+  name: string;
+  family: string;
+  cssVariable: string;
+  fallbacks: string[];
+  display?: ThemeFontDisplay;
+  preload?: boolean;
+  sources: readonly ThemeFontSource[];
+}
+
+export interface NextLocalFontOptions {
+  variable: string;
+  display?: ThemeFontDisplay;
+  fallback: string[];
+  preload?: boolean;
+  src: ReadonlyArray<{
+    path: string;
+    weight: string;
+    style: ThemeFontStyle;
+  }>;
+}
+
+export function createLocalFontOptions(
+  font: ThemeFontDefinition,
+  metaUrl: string,
+): NextLocalFontOptions {
+  return {
+    variable: font.cssVariable,
+    display: font.display,
+    fallback: font.fallbacks,
+    preload: font.preload,
+    src: font.sources.map(source => ({
+      path: new URL(source.filename, metaUrl).pathname,
+      weight: source.weight,
+      style: source.style,
+    })),
+  };
+}

package/src/typography/styles/body.scss

@@ -0,0 +1,23 @@
+@layer theme.tokens.typography {
+  :root {
+    --font-body-large-size: 19px;
+    --font-body-large-line-height: 1.5em;
+    --font-body-large-letter-spacing: 0px;
+    --font-body-large-weight: 600;
+
+    --font-body-medium-size: 17px;
+    --font-body-medium-line-height: 1.5em;
+    --font-body-medium-letter-spacing: 0px;
+    --font-body-medium-weight: 500;
+
+    --font-body-small-size: 15px;
+    --font-body-small-line-height: 1.5em;
+    --font-body-small-letter-spacing: 0px;
+    --font-body-small-weight: 400;
+
+    --font-body-xsmall-size: 13px;
+    --font-body-xsmall-line-height: 1.5em;
+    --font-body-xsmall-letter-spacing: 0px;
+    --font-body-xsmall-weight: 400;
+  }
+}

package/src/typography/styles/caption.scss

@@ -0,0 +1,13 @@
+@layer theme.tokens.typography {
+  :root {
+    --font-caption-large-size: 12px;
+    --font-caption-large-line-height: 1.5em;
+    --font-caption-large-letter-spacing: 0px;
+    --font-caption-large-weight: 600;
+
+    --font-caption-medium-size: 11px;
+    --font-caption-medium-line-height: 1.5em;
+    --font-caption-medium-letter-spacing: 0px;
+    --font-caption-medium-weight: 500;
+  }
+}

package/src/typography/styles/display.scss

@@ -0,0 +1,18 @@
+@layer theme.tokens.typography {
+  :root {
+    --font-display-large-size: 60px;
+    --font-display-large-line-height: 1.4em;
+    --font-display-large-letter-spacing: -0.2px;
+    --font-display-large-weight: 700;
+
+    --font-display-medium-size: 44px;
+    --font-display-medium-line-height: 1.4em;
+    --font-display-medium-letter-spacing: -0.2px;
+    --font-display-medium-weight: 700;
+
+    --font-display-small-size: 36px;
+    --font-display-small-line-height: 1.4em;
+    --font-display-small-letter-spacing: -0.2px;
+    --font-display-small-weight: 600;
+  }
+}

package/src/typography/styles/heading.scss

@@ -0,0 +1,33 @@
+@layer theme.tokens.typography {
+  :root {
+    --font-heading-xlarge-size: 40px;
+    --font-heading-xlarge-line-height: 1.4em;
+    --font-heading-xlarge-letter-spacing: -0.2px;
+    --font-heading-xlarge-weight: 600;
+
+    --font-heading-large-size: 32px;
+    --font-heading-large-line-height: 1.4em;
+    --font-heading-large-letter-spacing: -0.2px;
+    --font-heading-large-weight: 600;
+
+    --font-heading-medium-size: 24px;
+    --font-heading-medium-line-height: 1.4em;
+    --font-heading-medium-letter-spacing: 0px;
+    --font-heading-medium-weight: 600;
+
+    --font-heading-small-size: 19px;
+    --font-heading-small-line-height: 1.4em;
+    --font-heading-small-letter-spacing: 0px;
+    --font-heading-small-weight: 600;
+
+    --font-heading-xsmall-size: 17px;
+    --font-heading-xsmall-line-height: 1.5em;
+    --font-heading-xsmall-letter-spacing: 0px;
+    --font-heading-xsmall-weight: 600;
+
+    --font-heading-xxsmall-size: 15px;
+    --font-heading-xxsmall-line-height: 1.5em;
+    --font-heading-xxsmall-letter-spacing: 0px;
+    --font-heading-xxsmall-weight: 600;
+  }
+}