@uniai-fe/uds-foundation 0.1.2 → 0.1.4

package/README.md

@@ -10,6 +10,11 @@ pnpm add @uniai-fe/uds-foundation
 
 ## 사용법 요약
 
+### 최근 업데이트
+
+- `--color-label-standard` 값을 Figma 최신 스펙(`#4f5258`)으로 맞추고 disabled/interaction 계열 토큰도 함께 재검증했다. npm 배포 전 `pnpm --filter @uniai-fe/uds-foundation build`를 수행해 CSS/SCSS와 `docs/theme-tokens.{md,json}` 스냅샷까지 동기화한다.
+- Sass 소비자는 `@use "@uniai-fe/uds-foundation/css.scss";` 경로를 사용해야 하며, CSS-only 프로젝트는 기존대로 `import "@uniai-fe/uds-foundation/css";`로 토큰을 주입한다.
+
 ### 1) CSS 변수 주입
 
 ```ts
@@ -32,6 +37,27 @@ import "@uniai-fe/uds-foundation/css";
 }
 ```
 
+### Sass 유틸리티
+
+Sass 소비자는 `@use "@uniai-fe/uds-foundation/scss";`로 전체 토큰을, `@use "@uniai-fe/uds-foundation/scss/functions" as style;`로 스타일 계산 함수를, `@use "@uniai-fe/uds-foundation/scss/responsive" as responsive;`로 반응형 rem 믹스인을 사용할 수 있다. alias(`as style`)를 지정하면 `style.padding()`처럼 짧은 이름으로 접근할 수 있다.
+
+```scss
+@use "@uniai-fe/uds-foundation/scss" as foundation;
+@use "@uniai-fe/uds-foundation/scss/functions" as style;
+@use "@uniai-fe/uds-foundation/scss/responsive" as responsive;
+
+:root {
+  @include foundation.foundation-layout-radius();
+  @include responsive.base();
+}
+
+@include responsive.queries();
+
+.panel {
+  @include style.padding("rem", 16);
+}
+```
+
 ### 2) 토큰 데이터(JSON)
 
 ```ts

package/dist/index.css

@@ -17,7 +17,7 @@
     box-sizing: border-box;
   }
   * {
-    letter-spacing: -0.05em;
+    letter-spacing: -0.02em;
     flex-shrink: 0;
     overscroll-behavior-y: none;
     font-family: var(--font-family-sans, "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable", "Pretendard", "Inter", sans-serif);
@@ -712,5 +712,48 @@
     --font-caption-medium-line-height: 1.5em;
     --font-caption-medium-letter-spacing: 0px;
     --font-caption-medium-weight: 500;
+    --responsive-axis-min: min(0.520833vw, 0.925926vh);
+    --responsive-size: clamp(7px, var(--responsive-axis-min), 14px);
+    --dpi-factor: 1;
+    --aspect-factor: 1;
+    --responsive-standard: calc(
+      var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor)
+    );
+    font-size: var(--responsive-standard);
+  }
+  @media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
+    :root {
+      --dpi-factor: 0.96;
+    }
+  }
+  @media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {
+    :root {
+      --dpi-factor: 0.92;
+    }
+  }
+  @media (min-width: 2560px) and (min-height: 1440px) {
+    :root {
+      --responsive-size: clamp(9px, var(--responsive-axis-min), 15px);
+    }
+  }
+  @media (min-width: 3200px) and (min-height: 1800px) {
+    :root {
+      --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px);
+    }
+  }
+  @media (min-width: 3840px) and (min-height: 2160px) {
+    :root {
+      --responsive-size: clamp(11px, var(--responsive-axis-min), 16px);
+    }
+  }
+  @media (min-aspect-ratio: 21/9) and (min-width: 2560px) {
+    :root {
+      --aspect-factor: 1.04;
+    }
+  }
+  @media (max-aspect-ratio: 16/10) and (max-width: 1920px) {
+    :root {
+      --aspect-factor: 0.98;
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-foundation",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "UNIAI Design System; Design Foundation Package",
   "type": "module",
   "private": false,
@@ -79,7 +79,10 @@
       "import": "./dist/types/theme-tokens.js",
       "default": "./dist/types/theme-tokens.js"
     },
-    "./css": "./dist/index.css"
+    "./css": "./dist/index.css",
+    "./scss": "./css.scss",
+    "./scss/functions": "./src/scss/functions.scss",
+    "./scss/responsive": "./src/scss/responsive.scss"
   },
   "scripts": {
     "format": "prettier --write .",

package/src/index.scss

@@ -7,6 +7,7 @@
 @use "./layout/breakpoint.scss" as layoutBreakpoint;
 @use "./layout/size.scss" as layoutSize;
 @use "./layout/radius.scss" as layoutRadius;
+@use "./scss/responsive.scss" as responsiveScale;
 @use "./typography/fonts/font-face.scss" as typoFontFace;
 @use "./typography/fonts/font-family.scss" as typoFontFamily;
 @use "./typography/styles/display.scss" as typoDisplay;
@@ -37,5 +38,9 @@
     @include typoBody.foundation-typography-body();
     @include typoLabel.foundation-typography-label();
     @include typoCaption.foundation-typography-caption();
+    @include responsiveScale.base();
   }
+
+  // 반응형 rem 보정은 단일 믹스인으로 media query를 출력한다.
+  @include responsiveScale.queries();
 }

package/src/init/reset.scss

@@ -17,7 +17,7 @@
   }
 
   * {
-    letter-spacing: -0.05em;
+    letter-spacing: -0.02em;
     flex-shrink: 0;
     overscroll-behavior-y: none;
     font-family: var(

package/src/scss/functions.scss

@@ -0,0 +1,161 @@
+@use "sass:list";
+@use "sass:math";
+@use "sass:string";
+
+// CSS-in-JS 스타일링 도구(styleRem/styleBaseSize/styleSpacingSize)를 Sass로 옮긴다.
+// - styleRemAmount, styleBaseSize, styleSpacingSize와 동일한 계산 규칙을 유지한다.
+// - @use alias(`as style`)를 붙이면 style.base-size(...)처럼 짧게 호출할 수 있다.
+$style-rem-amount: 10 !default;
+
+// rem: px 수치를 rem으로 환산한다.
+// - module.ts styleRem과 동일하게 10px 기준 단위를 사용한다.
+// - 단위가 이미 붙어 있는 값은 그대로 반환해 중복 환산을 방지한다.
+@function rem($value) {
+  @if type-of($value) != "number" {
+    // number가 아니면 CSS-in-JS 버전과 동일하게 경고 후 원본을 돌려준다.
+    @warn "rem: number만 전달할 수 있습니다.";
+    @return $value;
+  }
+
+  @if not math.is-unitless($value) {
+    // px 같은 단위가 이미 붙어 있으면 그대로 사용한다.
+    @return $value;
+  }
+
+  // 10px 기준 rem 길이를 계산한다.
+  @return math.div($value, $style-rem-amount) * 1rem;
+}
+
+// base-size: px/rem/string 값을 유효한 CSS 길이로 변환한다.
+// - styleBaseSize의 unit/number/string/alt 분기와 동일하게 동작한다.
+// - alt까지 유효 값이 없으면 auto를 반환하고, 허용 단위(px/rem)가 아니면 px로 강제한다.
+@function base-size($unit, $value, $alt: null) {
+  $unit: string.to-lower-case(string.unquote(#{$unit}));
+
+  @if $unit != "px" and $unit != "rem" {
+    // 허용되지 않은 단위가 들어오면 px 강제 후 동일 경고를 남긴다.
+    @warn "base-size: #{$unit}는 px/rem만 허용되어 px로 대체합니다.";
+    $unit: "px";
+  }
+
+  @if type-of($value) == "number" {
+    // px 단위가 붙은 number면 그대로 통과한다.
+    @if math.is-unitless($value) == false {
+      @return $value;
+    }
+
+    // rem을 요청한 경우 rem 함수를 통해 환산한다.
+    @if $unit == "rem" {
+      @return rem($value);
+    }
+
+    // px 요청이면 px 단위를 붙인다.
+    @return $value * 1px;
+  }
+
+  // 빈 문자열이 아닌 string이면 그대로 사용한다.
+  @if type-of($value) == "string" and string.length($value) > 0 {
+    @return $value;
+  }
+
+  // alt 값이 설정돼 있으면 동일 규칙으로 재귀 호출한다.
+  @if $alt != null {
+    @return base-size($unit, $alt);
+  }
+
+  // 값이 완전히 비어 있으면 auto를 기본값으로 사용한다.
+  @if $value == null {
+    @return auto;
+  }
+
+  // 마지막으로 남은 경우 그대로 문자열로 되돌린다.
+  @return $value;
+}
+
+// spacing-array: padding/margin 리스트를 공백 문자열로 결합한다.
+// - styleSpacingArray 문서의 파라미터 패턴[상하좌우/상하,좌우/... ]과 동일한 순서를 유지한다.
+@function spacing-array($unit, $values) {
+  @if type-of($values) != "list" {
+    // 리스트가 아니면 단일 값으로 간주한다.
+    @return base-size($unit, $values);
+  }
+
+  $result: ();
+
+  @for $index from 1 through list.length($values) {
+    $entry: list.nth($values, $index);
+    // 각 항목을 base-size로 정규화한 뒤 공백으로 결합한다.
+    $result: list.append($result, base-size($unit, $entry), "space");
+  }
+
+  @return $result;
+}
+
+// spacing-size: padding/margin 입력을 CSS 길이 값으로 정규화한다.
+// - styleSpacingSize 분기 그대로: undefined→alt/0, number|string→base-size, array→spacing-array.
+@function spacing-size($unit, $spacing: null, $alt: null) {
+  @if $spacing == null {
+    @if $alt == null {
+      // spacing/alt 모두 없으면 0을 기본값으로 사용한다.
+      @return 0;
+    }
+
+    @if type-of($alt) == "list" {
+      // alt가 리스트인 경우 spacing-array 규칙을 그대로 적용한다.
+      @return spacing-array($unit, $alt);
+    }
+
+    // alt가 number|string이면 base-size로 정규화한다.
+    @return base-size($unit, $alt);
+  }
+
+  @if type-of($spacing) ==
+    "number" or
+    (type-of($spacing) == "string" and string.length($spacing) > 0)
+  {
+    // number/string 입력은 base-size에서 처리한다.
+    @return base-size($unit, $spacing);
+  }
+
+  @if type-of($spacing) == "list" {
+    // 리스트 입력은 spacing-array로 전달한다.
+    @return spacing-array($unit, $spacing);
+  }
+
+  // 배열/문자열/숫자 외 타입은 문자열로 강제한다.
+  @return $spacing;
+}
+
+// padding-size: spacing-size를 감싸 padding 맥락을 명확히 한다.
+@function padding-size($unit, $padding: null, $alt: null) {
+  @return spacing-size($unit, $padding, $alt);
+}
+
+// margin-size: spacing-size를 감싸 margin 맥락을 명확히 한다.
+@function margin-size($unit, $margin: null, $alt: null) {
+  @return spacing-size($unit, $margin, $alt);
+}
+
+// spacing: padding/margin 선언 반복을 줄이는 믹스인.
+// - property 파라미터로 padding/margin 외 확장도 가능하다.
+// - $important 인자로 !important 여부를 제어한다.
+@mixin spacing($property, $unit, $value: null, $alt: null, $important: false) {
+  $result: spacing-size($unit, $value, $alt);
+
+  @if $important {
+    // !important 플래그가 true인 경우.
+    #{$property}: #{$result} !important;
+  } @else {
+    #{$property}: #{$result};
+  }
+}
+
+// padding: spacing 믹스인을 padding 속성으로 고정한 래퍼.
+@mixin padding($unit, $value: null, $alt: null, $important: false) {
+  @include spacing(padding, $unit, $value, $alt, $important);
+}
+
+// margin: spacing 믹스인을 margin 속성으로 고정한 래퍼.
+@mixin margin($unit, $value: null, $alt: null, $important: false) {
+  @include spacing(margin, $unit, $value, $alt, $important);
+}

package/src/scss/responsive.scss

@@ -0,0 +1,91 @@
+// 반응형 폰트 사이즈
+// - 기준 해상도: 1920x1080 (FHD) → 10px 고정
+// - FHD 미만: 높이/너비 중 더 작은 축을 기준으로 축소
+// - FHD 초과: 너무 작아 보이지 않도록 완만하게 확대 (상한 적용)
+// - Windows 노트북(디스플레이 배율 125%/150%)에서 과대 확대를 보정하기 위한 DPI 계수 적용
+
+// base: :root 안에서 responsive rem 기본 변수를 정의한다(ui-legacy responsive.scss와 동일 로직).
+@mixin base() {
+  // 10px @ 1920x1080 기준 스케일
+  // 너비 기준: 10px = (10 / 1920) * 100vw = 0.520833vw
+  // 높이 기준: 10px = (10 / 1080) * 100vh = 0.925926vh
+  // 더 작은 축을 기준으로 스케일(노트북 저해상도/낮은 세로 해상도 환경 보정)
+  --responsive-axis-min: min(0.520833vw, 0.925926vh);
+
+  // 기본 크기 범위(하한/상한): FHD 미만에서 너무 커지는 문제 방지(하한 ↓),
+  // QHD 이상에서 너무 작아 보이는 문제 완화(상한 ↑). 필요 시 수치 미세 조정.
+  --responsive-size: clamp(7px, var(--responsive-axis-min), 14px);
+
+  // DPI 보정 계수: Windows + 125%/150% 배율에서 커지는 현상 완화용
+  // 기본 1.0 → 높은 배율에서 소폭 감소
+  --dpi-factor: 1;
+
+  // 화면 비율 보정 계수(울트라와이드/세로 확장형 등)
+  --aspect-factor: 1;
+
+  // 최종 표준 값: 설계상 기준 rem(=10px @ FHD)을 유지하되, 해상도/배율 보정 적용
+  --responsive-standard: calc(
+    var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor)
+  );
+
+  font-size: var(--responsive-standard);
+}
+
+// queries: ui-legacy responsive.scss의 media 규칙을 그대로 내보낸다.
+@mixin queries() {
+  // 고배율(배율 125% 이상 추정) 보정: 소폭 축소
+  // DPI 보정: Mac Retina(2dppx)에는 영향이 없도록 범위를 제한
+  @media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
+    :root {
+      --dpi-factor: 0.96;
+    }
+  }
+
+  @media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {
+    :root {
+      --dpi-factor: 0.92;
+    }
+  }
+
+  // QHD 이상에서 상한을 점진적으로 상향해 4K와의 구분감 확보
+  @media (min-width: 2560px) and (min-height: 1440px) {
+    :root {
+      --responsive-size: clamp(9px, var(--responsive-axis-min), 15px);
+    }
+  }
+
+  @media (min-width: 3200px) and (min-height: 1800px) {
+    :root {
+      --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px);
+    }
+  }
+
+  @media (min-width: 3840px) and (min-height: 2160px) {
+    :root {
+      --responsive-size: clamp(11px, var(--responsive-axis-min), 16px);
+    }
+  }
+
+  // 울트라와이드(21:9 이상)에서 UI가 상대적으로 작아보이는 현상 완화
+  @media (min-aspect-ratio: 21 / 9) and (min-width: 2560px) {
+    :root {
+      --aspect-factor: 1.04;
+    }
+  }
+
+  // 세로 확장형(16:10 이하)에서 과도한 확대 방지
+  @media (max-aspect-ratio: 16 / 10) and (max-width: 1920px) {
+    :root {
+      --aspect-factor: 0.98;
+    }
+  }
+}
+
+// responsive: base + queries를 한 번에 출력하는 편의 믹스인.
+@mixin responsive() {
+  :root {
+    @include base();
+  }
+
+  @include queries();
+}