@uniai-fe/uds-foundation 0.0.7 → 0.0.9

package/dist/index.css

@@ -1,5 +1,5 @@
 @charset "UTF-8";
-@layer theme.init {
+@layer foundation.reset {
   :root {
     -webkit-tap-highlight-color: transparent;
     -webkit-text-size-adjust: none;
@@ -27,14 +27,16 @@
   *:focus-visible {
     outline: none;
   }
-  html {
+  html,
+  .uds-theme-root {
     width: 100%;
     font-size: 10px;
     font-family: var(--font-family-sans);
     background-color: #fff;
     touch-action: manipulation;
   }
-  body {
+  body,
+  .uds-theme-root {
     width: 100%;
     position: relative;
     background: none;
@@ -287,8 +289,6 @@
       font-size: 1vw;
     }
   }
-}
-@layer theme.init {
   html,
   body {
     width: 100%;
@@ -300,7 +300,7 @@
     z-index: 0;
   }
 }
-@layer theme.tokens.color {
+@layer foundation.color {
   :root {
     --color-common-100: #fff;
     --color-common-0: #000;
@@ -491,11 +491,6 @@
     --color-cyan-90: #ccfbff;
     --color-cyan-95: #e5fdff;
     --color-cyan-99: #faffff;
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-primary-default: var(--color-blue-55);
     --color-primary-strong: var(--color-blue-45);
     --color-primary-heavy: var(--color-blue-30);
@@ -505,42 +500,22 @@
     --color-tertiary-default: var(--color-cool-gray-95);
     --color-tertiary-strong: var(--color-cool-gray-90);
     --color-tertiary-heavy: var(--color-cool-gray-80);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-label-strong: var(--color-cool-gray-10);
     --color-label-standard: var(--color-cool-gray-20);
     --color-label-neutral: var(--color-cool-gray-50);
     --color-label-alternative: var(--color-cool-gray-70);
     --color-label-assistive: var(--color-cool-gray-80);
     --color-label-disabled: var(--color-cool-gray-80);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-border-standard-cool-gray: var(--color-cool-gray-90);
     --color-border-standard-blue: var(--color-blue-90);
     --color-border-standard-strong: var(--color-cool-gray-75);
     --color-border-standard-heavy: var(--color-cool-gray-20);
     --color-border-standard-alternative: var(--color-cool-gray-80);
     --color-border-standard-assistive: var(--color-cool-gray-90);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-bg-standard-cool-gray: var(--color-cool-gray-99);
     --color-bg-alternative-cool-gray: var(--color-cool-gray-95);
     --color-bg-standard-neutral: var(--color-neutral-99);
     --color-bg-alternative-neutral: var(--color-neutral-95);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-bg-surface-static-white: var(--color-common-100);
     --color-bg-surface-static-cool-gray: var(--color-cool-gray-99);
     --color-bg-surface-static-blue: var(--color-blue-95);
@@ -548,18 +523,8 @@
     --color-bg-surface-standard: var(--color-cool-gray-95);
     --color-bg-surface-strong: var(--color-neutral-80);
     --color-bg-surface-heavy: var(--color-cool-gray-20);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-interaction-static: var(--color-common-100);
     --color-interaction-disabled: var(--color-cool-gray-95);
-  }
-}
-@layer theme.tokens.color {
-  :root,
-  .theme-light {
     --color-danger: var(--color-red-40);
     --color-error: var(--color-red-45);
     --color-warning: var(--color-yellow-50);
@@ -568,7 +533,7 @@
     --color-new: var(--color-red-50);
   }
 }
-@layer theme.tokens.spacing {
+@layer foundation.spacing {
   :root {
     --spacing-padding-1: 2px;
     --spacing-padding-2: 4px;
@@ -581,10 +546,6 @@
     --spacing-padding-9: 28px;
     --spacing-padding-10: 32px;
     --spacing-padding-11: 40px;
-  }
-}
-@layer theme.tokens.spacing {
-  :root {
     --spacing-gap-1: 2px;
     --spacing-gap-2: 4px;
     --spacing-gap-3: 6px;
@@ -602,16 +563,12 @@
     --spacing-gap-15: 80px;
   }
 }
-@layer theme.tokens.layout {
+@layer foundation.layout {
   :root {
     --theme-breakpoint-xsmall-start: 0px;
     --theme-breakpoint-small-start: 768px;
     --theme-breakpoint-medium-start: 992px;
     --theme-breakpoint-large-start: 1200px;
-  }
-}
-@layer theme.tokens.layout {
-  :root {
     --theme-size-xxsmall: 4px;
     --theme-size-xsmall-1: 8px;
     --theme-size-xsmall-2: 12px;
@@ -627,10 +584,6 @@
     --theme-size-large-2: 80px;
     --theme-size-xlarge-1: 96px;
     --theme-size-xlarge-2: 120px;
-  }
-}
-@layer theme.tokens.layout {
-  :root {
     --theme-radius-4x4: 1px;
     --theme-radius-8x8: 2px;
     --theme-radius-12x12: 2px;
@@ -658,7 +611,7 @@
     --theme-radius-xlarge: 16px;
   }
 }
-@layer theme.tokens.typography {
+@layer foundation.typography {
   @font-face {
     font-family: "Pretendard JP Variable";
     src: url("./fonts/pretendard-jp/PretendardJPVariable.woff2") format("woff2");
@@ -673,9 +626,7 @@
     font-style: normal;
     font-display: swap;
   }
-}
-@layer theme.tokens.typography {
-  :root {
+  :root :root {
     --font-family-pretendard:
       "Pretendard JP Variable", "Pretendard JP", "Pretendard Variable",
       "Pretendard", "InterVariable", "Inter", "Noto Sans KR", "-apple-system",
@@ -697,8 +648,6 @@
       "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", "sans-serif";
     --font-family-sans: var(--font-family-pretendard);
   }
-}
-@layer theme.tokens.typography {
   :root {
     --font-display-large-size: 60px;
     --font-display-large-line-height: 1.4em;
@@ -712,10 +661,6 @@
     --font-display-small-line-height: 1.4em;
     --font-display-small-letter-spacing: -0.2px;
     --font-display-small-weight: 600;
-  }
-}
-@layer theme.tokens.typography {
-  :root {
     --font-heading-xlarge-size: 40px;
     --font-heading-xlarge-line-height: 1.4em;
     --font-heading-xlarge-letter-spacing: -0.2px;
@@ -740,10 +685,6 @@
     --font-heading-xxsmall-line-height: 1.5em;
     --font-heading-xxsmall-letter-spacing: 0px;
     --font-heading-xxsmall-weight: 600;
-  }
-}
-@layer theme.tokens.typography {
-  :root {
     --font-body-large-size: 19px;
     --font-body-large-line-height: 1.5em;
     --font-body-large-letter-spacing: 0px;
@@ -764,10 +705,6 @@
     --font-body-xxsmall-line-height: 1.5em;
     --font-body-xxsmall-letter-spacing: 0px;
     --font-body-xxsmall-weight: 400;
-  }
-}
-@layer theme.tokens.typography {
-  :root {
     --font-label-large-size: 16px;
     --font-label-large-line-height: 1.5em;
     --font-label-large-letter-spacing: 0px;
@@ -780,10 +717,6 @@
     --font-label-small-line-height: 1.5em;
     --font-label-small-letter-spacing: 0px;
     --font-label-small-weight: 500;
-  }
-}
-@layer theme.tokens.typography {
-  :root {
     --font-caption-large-size: 12px;
     --font-caption-large-line-height: 1.5em;
     --font-caption-large-letter-spacing: 0px;

package/dist/index.d.ts

@@ -1,3 +1,6 @@
 export { NextLocalFontOptions, ThemeFontDefinition, ThemeFontDisplay, ThemeFontSource, ThemeFontStyle, createLocalFontOptions } from './typography/fonts/types.js';
 export { pretendardFont, pretendardLocalFont } from './typography/fonts/pretendard.js';
 export { interFont, interLocalFont } from './typography/fonts/inter.js';
+export { ThemeProvider, FoundationThemeProviderProps as ThemeProviderProps } from './provider/ThemeProvider.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/index.js

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

package/dist/provider/ThemeProvider.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PropsWithChildren } from 'react';
+
+type FoundationThemeProviderProps = {
+    className?: string;
+};
+/**
+ * Foundation Theme Provider — `.uds-theme-root` 클래스를 부여해
+ * CSS 변수 토큰이 적용될 루트를 명시한다.
+ */
+declare function ThemeProvider({ children, className, }: PropsWithChildren<FoundationThemeProviderProps>): react_jsx_runtime.JSX.Element;
+
+export { type FoundationThemeProviderProps, ThemeProvider };

package/dist/provider/ThemeProvider.js

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+function ThemeProvider({
+  children,
+  className
+}) {
+  const classNames = ["uds-theme-root"];
+  if (className) {
+    classNames.push(className);
+  }
+  return /* @__PURE__ */ jsx("div", { className: classNames.join(" "), children });
+}
+export {
+  ThemeProvider
+};

package/dist/provider/index.d.ts

@@ -0,0 +1,3 @@
+export { ThemeProvider, FoundationThemeProviderProps as ThemeProviderProps } from './ThemeProvider.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/provider/index.js

@@ -0,0 +1,4 @@
+import { ThemeProvider } from "./ThemeProvider";
+export {
+  ThemeProvider
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-foundation",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "UNIAI Design System; Design Foundation Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.26.1",
+  "packageManager": "pnpm@10.26.2",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -22,6 +22,9 @@
     "email": "yth4135@naver.com",
     "url": "https://github.com/GraffitoRyu"
   },
+  "peerDependencies": {
+    "react": ">=19"
+  },
   "files": [
     "dist",
     "src",
@@ -66,6 +69,11 @@
       "import": "./dist/helpers/index.js",
       "default": "./dist/helpers/index.js"
     },
+    "./provider": {
+      "types": "./dist/provider/index.d.ts",
+      "import": "./dist/provider/index.js",
+      "default": "./dist/provider/index.js"
+    },
     "./types/theme-tokens": {
       "types": "./dist/types/theme-tokens.d.ts",
       "import": "./dist/types/theme-tokens.js",
@@ -92,6 +100,8 @@
   },
   "devDependencies": {
     "@types/node": "^24.10.2",
+    "@types/react": "^19.2.7",
+    "react": "^19.2.0",
     "@uniai-fe/tsconfig": "workspace:*",
     "autoprefixer": "^10.4.23",
     "postcss": "^8.5.6",

package/src/color/index.scss

@@ -1,2 +1,7 @@
-@use "./primitives.scss";
-@use "./semantic/index.scss";
+@use "./primitives.scss" as colorPrimitives;
+@use "./semantic/index.scss" as colorSemantic;
+
+@mixin foundation-color-tokens() {
+  @include colorPrimitives.foundation-color-primitives();
+  @include colorSemantic.foundation-color-semantic();
+}