Colors

DDS 컬러 시스템은 시맨틱 토큰을 기반으로 라이트/다크 테마를 지원합니다.

Installation

Terminal

$ pnpm add @b1nd/dodam-design-system/colors

Usage

CSS

css

/* globals.css */
@import "@b1nd/dodam-design-system/colors/colors.css";

스타일링 방식과 상관없이 반드시 위와 같이 전역 CSS에 @b1nd/dodam-design-system/colors/colors.css 를 임포트해주셔야 합니다.

TypeScript

tsx

import { colors } from "@b1nd/dodam-design-system/colors";

const Text = () => (
  <p style={{ color: colors.text.primary }}>
    Hello World
  </p>
);

Tailwind CSS

tsx

// 사용 예시
<p className="text-text-primary">Hello World</p>
<div className="bg-background-surface border-border-normal">...</div>

Color Categories

Brand

브랜드 아이덴티티를 나타내는 핵심 색상입니다.

brand.primary

#0083F0

brand.secondary

#0083f0a6

Text

텍스트에 사용되는 색상 토큰입니다.

Token	Description	Preview
`text.primary`	주요 텍스트	Sample Text
`text.secondary`	보조 텍스트	Sample Text
`text.tertiary`	부가 텍스트	Sample Text
`text.placeholder`	플레이스홀더	Sample Text
`text.disabled`	비활성화 텍스트	Sample Text
`text.inverse`	반전 텍스트	Sample Text

Background

배경에 사용되는 색상 토큰입니다.

background.default

기본 배경색

background.surface

표면 배경색

Border

테두리에 사용되는 색상 토큰입니다.

border.normal

border.strong

border.subtle

border.disabled

Fill

채우기 색상 토큰입니다.

fill.primary

fill.secondary

fill.hover

fill.disabled

Status

상태를 나타내는 색상 토큰입니다.

status.success

#00BF40

status.error

#FF4242

status.warning

#FFC800

status.info

#0083F0

Static

테마에 영향 받지 않는 고정 색상입니다.

static.white

#FFFFFF

static.black

#121212

Theme Support

DDS 컬러는 CSS 변수 기반으로 라이트/다크 테마를 자동 지원합니다.

tsx

import { colors } from "@b1nd/dodam-design-system/colors";

// CSS 변수를 반환하므로 테마 변경 시 자동으로 색상이 변경됩니다.
console.log(colors.text.primary); // "var(--dds-color-text-primary)"

Raw Color Values

테마별 실제 색상값이 필요한 경우:

tsx

import { lightColors, darkColors } from "@b1nd/dodam-design-system/colors";

// Light theme
console.log(lightColors.text.primary); // "#0F0F10"

// Dark theme
console.log(darkColors.text.primary); // "#F5F5F5"

Examples

카드 컴포넌트

tsx

import { colors } from "@b1nd/dodam-design-system/colors";

const Card = ({ title, description }) => (
  <div
    style={{
      backgroundColor: colors.background.surface,
      border: `1px solid ${colors.border.normal}`,
      borderRadius: "12px",
      padding: "20px",
    }}
  >
    <h3 style={{ color: colors.text.primary }}>{title}</h3>
    <p style={{ color: colors.text.secondary }}>{description}</p>
  </div>
);

Card Title

Card description text

상태 표시

tsx

import { colors } from "@b1nd/dodam-design-system/colors";

const StatusBadge = ({ status }) => {
  const statusColors = {
    success: colors.status.success,
    error: colors.status.error,
    warning: colors.status.warning,
    info: colors.status.info,
  };

  return (
    <span style={{ color: statusColors[status] }}>
      ● {status}
    </span>
  );
};

● Success● Error● Warning● Info