색상·서체 연결

/* design-system/kjun.css — 적용 프로젝트에서 관리 */
:root {
  --kjun-brand: var(--app-brand);
  --kjun-brand-hover: var(--app-brand-hover);
  --kjun-brand-active: var(--app-brand-active);
  --kjun-background: var(--app-background);
  --kjun-surface: var(--app-surface);
  --kjun-secondary: var(--app-secondary);
  --kjun-hover: var(--app-hover);
  --kjun-active: var(--app-active);
  --kjun-button-secondary: var(--app-button-secondary);
  --kjun-button-secondary-hover: var(--app-button-secondary-hover);
  --kjun-button-secondary-active: var(--app-button-secondary-active);
  --kjun-text: var(--app-text);
  --kjun-text-secondary: var(--app-text-secondary);
  --kjun-text-tertiary: var(--app-text-tertiary);
  --kjun-text-disabled: var(--app-text-disabled);
  --kjun-inverse: var(--app-inverse);
  --kjun-border: var(--app-border);
  --kjun-focus-ring: var(--app-focus-ring);
  --kjun-danger: var(--app-danger);
  --kjun-danger-active: var(--app-danger-active);
  --kjun-success: var(--app-success);
  --kjun-success-active: var(--app-success-active);
  --kjun-warning: var(--app-warning);
  --kjun-warning-active: var(--app-warning-active);
  --kjun-info: var(--app-info);
  --kjun-overlay: var(--app-overlay);
  --kjun-shadow: var(--app-shadow);
  --kjun-font: var(--app-font);
}

import "@kjun/react/styles.css";
import "./design-system/kjun.css";

<KjunProvider>
  <DsButton variant="primary">저장</DsButton>
</KjunProvider>

/* design-system/kjun.ts — 적용 프로젝트에서 관리 */
import type { KjunColors } from "@kjun/tokens";
import type { ColorValue } from "react-native";
import { colors, fonts } from "./tokens";

export const appColors = {
  brand: colors.brand,
  brandHover: colors.brandHover,
  brandActive: colors.brandActive,
  background: colors.background,
  surface: colors.surface,
  secondary: colors.secondary,
  hover: colors.hover,
  active: colors.active,
  buttonSecondary: colors.buttonSecondary,
  buttonSecondaryHover: colors.buttonSecondaryHover,
  buttonSecondaryActive: colors.buttonSecondaryActive,
  text: colors.text,
  textSecondary: colors.textSecondary,
  textTertiary: colors.textTertiary,
  textDisabled: colors.textDisabled,
  inverse: colors.inverse,
  border: colors.border,
  focusRing: colors.focusRing,
  danger: colors.danger,
  dangerActive: colors.dangerActive,
  success: colors.success,
  successActive: colors.successActive,
  warning: colors.warning,
  warningActive: colors.warningActive,
  info: colors.info,
  overlay: colors.overlay,
  shadow: colors.shadow,
} satisfies KjunColors<ColorValue>;

export const appFont = fonts.body;

<KjunProvider colors={appColors} fontFamily={appFont}>
  <App />
</KjunProvider>

/* 웹: 프로젝트의 기존 토큰에 연결 */
--kjun-price-up: var(--app-price-up);
--kjun-price-up-light: var(--app-price-up-light);
--kjun-price-up-bg: var(--app-price-up-bg);
--kjun-price-up-bg-strong: var(--app-price-up-bg-strong);
--kjun-price-down: var(--app-price-down);
--kjun-price-down-light: var(--app-price-down-light);
--kjun-price-down-bg: var(--app-price-down-bg);
--kjun-price-down-bg-strong: var(--app-price-down-bg-strong);
--kjun-price-neutral: var(--app-price-neutral);
--kjun-price-neutral-bg: var(--app-price-neutral-bg);
--kjun-favorite: var(--app-favorite);
--kjun-favorite-hover: var(--app-favorite-hover);
--kjun-interest: var(--app-interest);

// Native
<KjunProvider colors={appColors} domainColors={appDomainColors}
  fontFamily={appFont} numericFontFamily={appNumericFont}>
  <App />
</KjunProvider>