@nurihaus/web-design-system 2.0.9 → 3.0.0

package/README.md

@@ -1 +1,50 @@
 # design-system-lab
+
+## 설치와 사용 (3.x)
+
+```bash
+npm i @nurihaus/web-design-system
+```
+
+CSS 는 JS 에 들어 있지 않다. 앱에서 한 번 가져온다.
+
+```ts
+// 토큰만 (CSS Modules 로 직접 화면을 짤 때). 가져와도 화면이 바뀌지 않는다.
+import '@nurihaus/web-design-system/tokens.css';
+
+// 토큰 + 글꼴 + 리셋 + 컴포넌트 스타일 (디자인 시스템 컴포넌트를 쓸 때)
+import '@nurihaus/web-design-system/styles.css';
+```
+
+```css
+/* CSS Modules 에서 */
+.card {
+  padding: var(--spacing-16);
+  border-radius: var(--radius-6);
+  background: var(--color-purple-50);
+  color: var(--color-purple-900);
+  font-size: var(--font-size-sm);
+}
+```
+
+어드민 화면은 의미 토큰을 어드민 세트로 갈아탄다.
+
+```html
+<html data-ds-theme="admin">
+```
+
+JS 토큰이 필요하면.
+
+```ts
+import { primitive, semanticApp } from '@nurihaus/web-design-system/tokens';
+```
+
+## 토큰 고치기
+
+원본은 `tokens/figma.json` 하나다. Tokens Studio 가 그 파일을 갱신하면 생성만 다시 돌린다.
+
+```bash
+npm run tokens   # figma.json → tokens/generated/{tokens.css, *.ts}
+```
+
+`tokens/generated/` 와 `styles/token/*.css` 를 손으로 고치지 않는다. 배경은 `docs/decisions/0001-tokens-in-ds-and-separate-css.md`.

package/dist/components/badge/option-badge.d.ts

@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
 import { colors } from '../../styles/token/colors';
 import { size } from './badge-props';
 import { CommonBadgeProps } from './badge-type';
-import './badge-style.css';
 export interface OptionBadgeProps extends Pick<CommonBadgeProps, 'asChild'> {
     borderColor?: keyof typeof colors;
     color?: keyof typeof colors;

package/dist/components/tabs/tabs.d.ts

@@ -1,7 +1,4 @@
 import type { TabsProps } from './tabs-type';
-import '../../styles/token/color.css';
-import '../../styles/token/font.css';
-import './tabs-style.css';
 declare const Tabs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;
 export type { TabsProps };

package/dist/components/text-field/base-text-field.d.ts

@@ -2,8 +2,8 @@ import React, { PropsWithChildren } from 'react';
 import { TextFieldHelperTextProps, TextFieldInputProps, TextFieldLabelProps, TextFieldRootProps } from './text-field-type';
 declare const TextFieldRoot: {
     (props: PropsWithChildren<TextFieldRootProps>): import("react/jsx-runtime").JSX.Element;
-    TextLabel: (props: TextFieldLabelProps) => number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    TextLabel: (props: TextFieldLabelProps) => number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
     InputField: React.ForwardRefExoticComponent<Omit<TextFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-    HelperText: (props: TextFieldHelperTextProps) => number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+    HelperText: (props: TextFieldHelperTextProps) => number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | null | undefined;
 };
 export default TextFieldRoot;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import './styles/index.css';
 export { default as Avatar } from './components/avatar/avatar';
 export { default as CTAButton } from './components/button/cta-button';
 export { default as OptionBadge } from './components/badge/option-badge';
@@ -14,4 +13,5 @@ export { default as Text } from './components/elements/text/text';
 export { default as Tooltip } from './components/tooltip/tooltip';
 export { default as ModalWithDoubleButton } from './components/modal/modal-with-double-button';
 export { Spinner, InlineLoading, OverlayLoading } from './components/loading';
-export { colors } from './styles/token/colors';
+export { colors, primitive, semanticApp, semanticAdmin } from './tokens/generated';
+export type { PrimitiveTokens, SemanticAppTokens, SemanticAdminTokens } from './tokens/generated';