@uniai-fe/uds-primitives 0.0.1

package/src/theme/index.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider } from "./ThemeProvider";
+export type { ThemeOptions, ThemeProviderProps } from "./config";
+export { defaultThemeOptions } from "./config";

package/src/theme/overrides.scss

@@ -0,0 +1,215 @@
+@use "@uniai-fe/uds-foundation/css";
+
+/**
+ * Radix Theme가 사용하는 CSS 변수에 foundation 토큰을 연결하기 위한 placeholder.
+ * - 추후 토큰 매핑이 확정되면, 실제 색상/타이포/간격 값을 아래에 정의한다.
+ */
+/* ThemeProvider 기본 className(theme-root)와 Radix Theme 루트(.radix-themes)에 scope 지정 */
+:where(.radix-themes, .theme-root, :root) {
+  /* Foundation 기본 폰트로 통일 */
+  --default-font-family: var(--font-body-medium-family, "Pretendard");
+
+  /* 서피스/라벨/피드백 계층을 foundation 시멘틱 토큰으로 변환 */
+  --color-background: var(--color-bg-surface-static-white);
+  --color-panel-solid: var(--color-bg-surface-static-white);
+  --color-panel-translucent: var(--color-bg-surface-neutral);
+  --color-surface: var(--color-bg-surface-standard);
+  --color-overlay: var(--color-border-standard-heavy);
+  --color-interaction-static: var(--color-interaction-static);
+  --color-interaction-disabled: var(--color-interaction-disabled);
+  --color-border: var(--color-border-standard-cool-gray);
+  --color-border-strong: var(--color-border-standard-strong);
+  --color-border-heavy: var(--color-border-standard-heavy);
+
+  /* Primary(blue) 팔레트를 foundation blue 단계로 재정의 */
+  --blue-1: var(--color-blue-99);
+  --blue-2: var(--color-blue-95);
+  --blue-3: var(--color-blue-90);
+  --blue-4: var(--color-blue-80);
+  --blue-5: var(--color-blue-70);
+  --blue-6: var(--color-blue-60);
+  --blue-7: var(--color-blue-55);
+  --blue-8: var(--color-blue-50);
+  --blue-9: var(--color-blue-45);
+  --blue-10: var(--color-blue-40);
+  --blue-11: var(--color-blue-30);
+  --blue-12: var(--color-blue-20);
+  --blue-contrast: var(--color-common-100);
+  --blue-surface: var(--color-bg-surface-static-blue);
+  --blue-indicator: var(--color-primary-default);
+  --blue-track: var(--color-secondary-strong);
+
+  /* Secondary(sky) 팔레트 → foundation secondary 토큰 */
+  --sky-1: var(--color-blue-99);
+  --sky-2: var(--color-blue-95);
+  --sky-3: var(--color-blue-90);
+  --sky-4: var(--color-blue-80);
+  --sky-5: var(--color-blue-70);
+  --sky-6: var(--color-blue-60);
+  --sky-7: var(--color-blue-55);
+  --sky-8: var(--color-blue-50);
+  --sky-9: var(--color-secondary-strong);
+  --sky-10: var(--color-secondary-heavy);
+  --sky-11: var(--color-secondary-default);
+  --sky-12: var(--color-blue-45);
+  --sky-contrast: var(--color-primary-heavy);
+  --sky-surface: var(--color-bg-surface-static-blue);
+  --sky-indicator: var(--color-secondary-strong);
+  --sky-track: var(--color-secondary-heavy);
+
+  /* Tertiary(gray) 팔레트 → cool gray 단계 */
+  --gray-1: var(--color-cool-gray-99);
+  --gray-2: var(--color-cool-gray-95);
+  --gray-3: var(--color-cool-gray-90);
+  --gray-4: var(--color-cool-gray-85);
+  --gray-5: var(--color-cool-gray-80);
+  --gray-6: var(--color-cool-gray-75);
+  --gray-7: var(--color-cool-gray-70);
+  --gray-8: var(--color-cool-gray-65);
+  --gray-9: var(--color-cool-gray-60);
+  --gray-10: var(--color-cool-gray-55);
+  --gray-11: var(--color-cool-gray-45);
+  --gray-12: var(--color-cool-gray-20);
+  --gray-contrast: var(--color-label-strong);
+  --gray-surface: var(--color-bg-surface-standard);
+  --gray-indicator: var(--color-label-neutral);
+  --gray-track: var(--color-label-assistive);
+
+  /* 공간 단위(spacing)는 foundation gap/padding 토큰으로 재정의 */
+  --space-1: var(--spacing-gap-1);
+  --space-2: var(--spacing-gap-2);
+  --space-3: var(--spacing-gap-3);
+  --space-4: var(--spacing-gap-4);
+  --space-5: var(--spacing-gap-8);
+  --space-6: var(--spacing-gap-10);
+  --space-7: var(--spacing-gap-11);
+  --space-8: var(--spacing-gap-12);
+  --space-9: var(--spacing-gap-14);
+
+  /* 글꼴 스케일을 foundation 타이포 토큰으로 매핑 */
+  --font-size-1: var(--font-caption-large-size);
+  --font-size-2: var(--font-label-medium-size);
+  --font-size-3: var(--font-label-large-size);
+  --font-size-4: var(--font-heading-xsmall-size);
+  --font-size-5: var(--font-heading-small-size);
+  --font-size-6: var(--font-heading-medium-size);
+  --font-size-7: var(--font-heading-large-size);
+  --font-size-8: var(--font-heading-xlarge-size);
+  --font-size-9: var(--font-display-large-size);
+
+  --line-height-1: var(--font-caption-large-line-height);
+  --line-height-2: var(--font-label-medium-line-height);
+  --line-height-3: var(--font-label-large-line-height);
+  --line-height-4: var(--font-heading-xsmall-line-height);
+  --line-height-5: var(--font-heading-small-line-height);
+  --line-height-6: var(--font-heading-medium-line-height);
+  --line-height-7: var(--font-heading-large-line-height);
+  --line-height-8: var(--font-heading-xlarge-line-height);
+  --line-height-9: var(--font-display-large-line-height);
+
+  --letter-spacing-1: var(--font-caption-large-letter-spacing);
+  --letter-spacing-2: var(--font-label-medium-letter-spacing);
+  --letter-spacing-3: var(--font-label-large-letter-spacing);
+  --letter-spacing-4: var(--font-heading-xsmall-letter-spacing);
+  --letter-spacing-5: var(--font-heading-small-letter-spacing);
+  --letter-spacing-6: var(--font-heading-medium-letter-spacing);
+  --letter-spacing-7: var(--font-heading-large-letter-spacing);
+  --letter-spacing-8: var(--font-heading-xlarge-letter-spacing);
+  --letter-spacing-9: var(--font-display-large-letter-spacing);
+
+  --font-weight-light: var(--font-label-small-weight);
+  --font-weight-regular: var(--font-body-small-weight);
+  --font-weight-medium: var(--font-body-medium-weight);
+  --font-weight-bold: var(--font-display-large-weight);
+
+  --default-font-family: var(--font-body-medium-family, "Pretendard");
+  --default-font-size: var(--font-body-medium-size);
+  --default-font-style: normal;
+  --default-font-weight: var(--font-body-medium-weight);
+  --default-line-height: var(--font-body-medium-line-height);
+  --default-letter-spacing: var(--font-body-medium-letter-spacing);
+  --default-leading-trim-start: 0.42em;
+  --default-leading-trim-end: 0.36em;
+
+  --heading-font-family: var(--font-body-medium-family, "Pretendard");
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: var(--font-heading-small-letter-spacing);
+  --heading-line-height-1: var(--font-heading-xxsmall-line-height);
+  --heading-line-height-2: var(--font-heading-xsmall-line-height);
+  --heading-line-height-3: var(--font-heading-small-line-height);
+  --heading-line-height-4: var(--font-heading-medium-line-height);
+  --heading-line-height-5: var(--font-heading-large-line-height);
+  --heading-line-height-6: var(--font-heading-xlarge-line-height);
+  --heading-line-height-7: var(--font-display-small-line-height, 1.4em);
+  --heading-line-height-8: var(--font-display-medium-line-height);
+  --heading-line-height-9: var(--font-display-large-line-height);
+
+  --code-font-family:
+    "Menlo", "Consolas", "Bitstream Vera Sans Mono", monospace;
+  --code-font-style: normal;
+  --code-letter-spacing: -0.007em;
+  --strong-font-family: var(--font-body-medium-family, "Pretendard");
+  --strong-font-weight: var(--font-display-medium-weight, 700);
+  --em-font-family: "Times New Roman", "Times", serif;
+  --quote-font-family: "Times New Roman", "Times", serif;
+  --tab-active-letter-spacing: var(--font-label-medium-letter-spacing);
+  --tab-inactive-letter-spacing: var(--font-label-medium-letter-spacing);
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+
+  /* 입력/텍스트 요소에서 커서 컬러는 본문 텍스트와 동일하게 유지한다. */
+  input,
+  textarea {
+    caret-color: var(--color-label-strong);
+  }
+
+  /* 커서/컨테이너 기본값 */
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: default;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+  --container-1: 448px;
+  --container-2: 688px;
+  --container-3: 880px;
+  --container-4: 1136px;
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+  --segmented-control-transition-duration: 100ms;
+  --spinner-animation-duration: 800ms;
+  --spinner-opacity: 0.65;
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: var(--gray-12);
+}
+
+/* Radix Themes reset(`.rt-reset`)이 foundation reset보다 우선하지 않도록 기본 박스 모델 재정의 */
+:where(.radix-themes, .theme-root)
+  :is(.rt-reset, .rt-reset::before, .rt-reset::after) {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}

package/src/types/index.ts

@@ -0,0 +1,4 @@
+/**
+ * shared types placeholder: variant/slot 타입을 정의하고 각 카테고리에서 import한다.
+ */
+export {};

package/src/utils/index.ts

@@ -0,0 +1,4 @@
+/**
+ * shared utils placeholder: 토큰 매핑 및 className 헬퍼를 정의한다.
+ */
+export {};