npm version patch   # 1.0.0 → 1.0.1 (버그픽스)
npm version minor   # 1.0.0 → 1.1.0 (기능 추가)
npm version major   # 1.0.0 → 2.0.0 (Breaking Change)

# 스코프 패키지 (@insystem/atoms 같은 경우)
npm publish --access public

insystem-atoms

사내 React 아토믹 디자인 컴포넌트 라이브러리. SI 프로젝트 간 UI 일관성과 유지보수성 향상을 위해 설계되었습니다.

설치

npm install insystem-atoms styled-components

peerDependencies: react >= 18, react-dom >= 18, styled-components >= 6

빠른 시작

import { IsButton, Input, Checkbox } from "insystem-atoms";

function App() {
  return (
    <>
      <IsButton variant="solid" color="primary" onClick={handleSave}>
        저장
      </IsButton>
      <Input label="이름" required placeholder="홍길동" />
      <Checkbox label="동의합니다" checked={agreed} onChange={setAgreed} />
    </>
  );
}

디자인 토큰 커스터마이징

이 라이브러리의 모든 색상 / 폰트 / 사이즈 / 간격은 src/styles/tokens.ts의 중앙 토큰을 참조합니다. 소비자는 토큰을 상속(오버라이드) 해서 브랜드에 맞게 바꿀 수 있고, 컴포넌트는 렌더 시점에 변경값을 자동으로 반영합니다.

1. 빠른 시작 — 브랜드 컬러 & 폰트 변경

앱 진입점(main.tsx / App.tsx) 최상단에서 렌더링 전에 한 번만 configureTokens()를 호출합니다.

// main.tsx
import { configureTokens } from "insystem-atoms";

configureTokens({
  semantic: {
    primary: {
      normal: "#a44945", // 기본 Primary 컬러
      strong: "#8a3d3a", // hover / pressed 강조
      heavy: "#7a3535", // 최강조
    },
    status: {
      negative: "#E53935", // 에러 컬러
    },
  },
  typography: {
    fontFamily: "'NanumSquareNeo', 'Apple SD Gothic Neo', sans-serif",
  },
  spacing: {
    radius: { md: 10 }, // px — number 값
  },
});

부분 오버라이드입니다. 넣지 않은 키는 기본값을 유지합니다.

2. 기본값(defaultTokens) 전체 목록

아래가 configureTokens()로 오버라이드하지 않았을 때의 현재 값입니다. Figma Light 테마 기준.

값 타입: 색상은 #RRGGBB / rgba(...) 문자열, 사이즈 · 간격 · 폰트사이즈는 숫자(자동 px), lineHeight는 숫자(자동 em), fontFamily · transition · shadow는 CSS 문자열.

semantic.primary — Primary 컬러

| Key | Value | 용도 | | -------- | --------- | --------------- | | normal | #0066FF | Primary 기본 | | strong | #005EEB | hover / pressed | | heavy | #0054D1 | 최강조 |

semantic.label — 텍스트

| Key | Value | 용도 | | ------------- | ------------------------ | -------------------- | | normal | #171719 | 라벨 최고 강도 | | strong | #000000 | 최강조 텍스트 | | neutral | rgba(46, 47, 51, 0.88) | 컴포넌트 기본 텍스트 | | alternative | rgba(55, 56, 60, 0.61) | hint / muted / icon | | assistive | rgba(55, 56, 60, 0.28) | placeholder | | disable | rgba(55, 56, 60, 0.16) | disabled |

semantic.background — 배경

| Key | Value | | -------------------- | --------------------------- | | normal | #FFFFFF | | alternative | #F7F7F8 | | elevated | #FFFFFF | | elevatedAlt | #F7F7F8 | | transparentNormal | rgba(255, 255, 255, 0.08) | | transparentAlt | rgba(255, 255, 255, 0.28) | | transparentPrimary | rgba(0, 102, 255, 0.08) |

semantic.interaction — 인터랙션

| Key | Value | | ---------- | --------- | | inactive | #989BA2 | | disable | #F4F4F5 |

semantic.line — 테두리

| Key | Value | 용도 | | ------------------- | --------------------------- | -------------------- | | normalNormal | rgba(112, 115, 124, 0.22) | 기본 alpha border | | normalNeutral | rgba(112, 115, 124, 0.16) | neutral alpha border | | normalAlternative | rgba(112, 115, 124, 0.08) | alt alpha border | | normalStrong | rgba(112, 115, 124, 0.52) | 강조 alpha border | | solidNormal | #E1E2E4 | solid normal | | solidNeutral | #EAEBEC | 인풋 기본 테두리 | | solidAlternative | #F4F4F5 | solid alt | | solidStrong | #AEB0B6 | solid 강조 |

semantic.fill — 보조 배경

| Key | Value | 용도 | | ------------- | --------------------------- | ------------------ | | normal | rgba(112, 115, 124, 0.08) | secondary 배경 | | strong | rgba(112, 115, 124, 0.16) | secondary hover | | alternative | rgba(112, 115, 124, 0.05) | chip inactive 배경 |

semantic.status — 상태 컬러

| Key | Value | 용도 | | ------------ | ------------------------ | ----------- | | positive | #00BF40 | 성공 | | cautionary | #FF9200 | 경고 | | negative | #FF4242 | 에러 | | complete | #00BDDE | 완료 / info | | default | rgba(55, 56, 60, 0.61) | 기본 |

semantic.staticColor / material / inverse

| Path | Value | | -------------------- | ------------------------ | | staticColor.white | #FFFFFF | | staticColor.black | #000000 | | material.dimmer | rgba(23, 23, 25, 0.52) | | inverse.primary | #3385FF | | inverse.background | #1B1C1E | | inverse.label | #F7F7F8 |

sizing.height — 컴포넌트 높이 (px)

| xs | sm | md | lg | xl | | --- | --- | --- | --- | --- | | 26 | 32 | 40 | 48 | 56 |

spacing.paddingX — 좌우 패딩 (px)

| xs | sm | md | lg | xl | 2xl | 3xl | | --- | --- | --- | --- | --- | --- | --- | | 4 | 8 | 11 | 12 | 14 | 20 | 28 |

spacing.paddingY — 상하 패딩 (px)

| 2xs | xs | sm | md | lg | xl | 2xl | | --- | --- | --- | --- | --- | --- | --- | | 3 | 4 | 6 | 8 | 10 | 12 | 16 |

spacing.gap / icon / radius (px)

| Path | xs | sm | md | | -------- | --- | --- | --- | | gap | 4 | 6 | 8 | | icon | — | 16 | 20 | | radius | — | 4 | 8 |

typography

| Key | Value | | ------------ | --------------------------------------------------------------------------------------------- | | fontFamily | 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif | | fontSize | xs 12 / sm 13 / md 14 / lg 15 / xl 16 (px) | | lineHeight | xs 1.334 / sm 1.385 / md 1.429 / lg 1.467 / xl 1.5 (em 배수) | | fontWeight | medium 500 / semibold 600 |

transition

| Key | Value | | ------ | ------------ | | fast | 0.15s ease | | base | 0.2s ease | | slow | 0.3s ease |

shadow

| Key | Value | | ------- | ---------------------------------------------------------------------------------- | | sm | 0 1px 2px 0 rgba(0,0,0,0.05) | | md | 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10) | | lg | 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10) | | popup | 0px 4px 6px -1px rgba(23, 23, 23, 0.06), 0px 2px 4px -2px rgba(23, 23, 23, 0.06) | | knob | 0px 3px 1px 0px rgba(0, 0, 0, 0.06), 0px 3px 8px 0px rgba(0, 0, 0, 0.15) |

원본 정의는 src/styles/tokens.ts의 defaultTokens에서 확인 가능합니다.

3. 자주 쓰는 레시피

// 컴팩트 UI — 모든 컴포넌트 높이를 2px씩 줄이기
configureTokens({
  sizing: { height: { xs: 24, sm: 30, md: 38, lg: 46, xl: 54 } },
});

// 본문 폰트 사이즈 업
configureTokens({
  typography: { fontSize: { md: 15, lg: 16, xl: 17 } },
});

// 모서리 둥글게
configureTokens({
  spacing: { radius: { sm: 6, md: 12 } },
});

// 에러 / 성공 / 경고 컬러 전체 교체
configureTokens({
  semantic: {
    status: {
      positive: "#16A34A",
      cautionary: "#F59E0B",
      negative: "#DC2626",
      complete: "#0891B2",
      default: "rgba(55, 56, 60, 0.61)",
    },
  },
});

// 다크톤 Label 강도 조정
configureTokens({
  semantic: {
    label: {
      normal: "#0B0B0D",
      neutral: "rgba(20, 21, 24, 0.92)",
      assistive: "rgba(20, 21, 24, 0.32)",
    },
  },
});

4. t 접근자 — 같은 토큰을 내 컴포넌트에서도 쓰기

소비자 프로젝트에서 insystem-atoms의 토큰을 그대로 쓰고 싶다면 t 접근자를 import 해서 styled-components에 꽂으면 됩니다. configureTokens()로 오버라이드한 값이 자동 반영됩니다.

import styled from "styled-components";
import { t } from "insystem-atoms";

// styled-components 정적 위치 — 함수 참조 (괄호 없음)
const Card = styled.div`
  background: ${t.bgNormal};
  color: ${t.labelNeutral};
  font-family: ${t.fontFamily};
  border: 1px solid ${t.lineSolidNeutral};
  border-radius: ${t.radiusMd};
  padding: ${t.padYMd} ${t.padXLg};
`;

// prop/조건 안 — 명시 호출 (괄호 있음)
const StatusDot = styled.span<{ $ok: boolean }>`
  background: ${({ $ok }) => ($ok ? t.positive() : t.negative())};
`;

주요 접근자:

| 접근자 | 토큰 | | --------------------------------------------------------------------------------------------- | ------------- | | t.primary, t.primaryStrong, t.primaryHeavy | Primary 컬러 | | t.labelNormal, t.labelNeutral, t.labelAlternative, t.labelAssistive, t.labelDisable | 라벨(텍스트) | | t.bgNormal, t.bgAlternative, t.bgElevated | 배경 | | t.lineNormal, t.lineSolidNeutral, t.lineSolidAlternative | 테두리 | | t.fillNormal, t.fillStrong, t.fillAlternative | 보조 배경 | | t.positive, t.cautionary, t.negative, t.complete | 상태 | | t.heightXs ~ t.heightXl | 컴포넌트 높이 | | t.padXMd, t.padYMd, t.gapMd | 간격 | | t.radiusSm, t.radiusMd | 모서리 | | t.fontFamily, t.fontMd, t.lhMd, t.weightMedium, t.weightSemibold | 타이포 |

전체 목록은 src/styles/t.ts 참조.

5. 런타임에서 현재 값 읽기

import { tokens } from "insystem-atoms";

console.log(tokens.semantic.primary.normal); // 현재 Primary
console.log(tokens.spacing.radius.md); // 현재 radius md (number)

tokens는 configureTokens() 호출로 값이 변경되는 라이브 객체입니다. 저장해두지 말고 필요할 때마다 참조하세요.

6. 기본값 복원

import { resetTokens, defaultTokens } from "insystem-atoms";

resetTokens(); // 모든 토큰을 기본값으로 되돌림
console.log(defaultTokens); // 기본값을 읽기 전용으로 확인

7. 주의사항

• configureTokens()는 렌더링 전 한 번만 호출하세요. 런타임 중간에 바꿔도 반영되지만, 이미 렌더된 컴포넌트는 리렌더가 일어나야 새 값이 적용됩니다.

• 레이아웃 값(컴포넌트별 padding/height/gap의 상수 배치)은 각 Is* 컴포넌트의 FIGMA 상수에 남아있고, 중앙 토큰은 색상 · 폰트 · radius · 공통 사이즈 스케일만 관리합니다. 즉 IsButton md 사이즈를 40px이 아닌 44px로 바꾸고 싶다면 sizing.height.md를 바꾸면 됩니다.

• 오버라이드 값의 타입 안전성을 원한다면:

  import type { DeepPartial, Tokens } from "insystem-atoms";
  
  const brand: DeepPartial<Tokens> = {
    semantic: { primary: { normal: "#a44945" } },
  };
  configureTokens(brand);

컴포넌트

IsButton

Figma IsButton 스펙에 맞춘 버튼입니다. 색·타이포·패딩 등은 디자인 파일과 동일하게 고정되어 있으며, borderRadius / padding 같은 인라인 스타일 오버라이드 props는 제공하지 않습니다. (앱 전역 톤은 configureTokens로 조정.)

import { IsButton } from 'insystem-atoms';

<IsButton variant="solid" color="primary">저장</IsButton>
<IsButton variant="outlined" color="primary" size="sm">취소</IsButton>
<IsButton variant="solid" color="secondary" loading>처리 중…</IsButton>
<IsButton variant="solid" color="primary" leftIconSlot={<PlusIcon />}>추가</IsButton>
<IsButton variant="solid" color="primary" iconOnly iconSlot={<SearchIcon />} aria-label="검색" />
<IsButton fullWidth>전체 너비</IsButton>
<IsButton width="200px">고정 너비</IsButton>

| Prop | 타입 | 기본값 | 설명 | | --------------- | ------------------------------------ | --------- | ----------------------------------------------- | | variant | solid | outlined | solid | Figma Variant | | color | primary | secondary | primary | Figma Color | | size | xs | sm | md | lg | xl | md | XSmall ~ XLarge | | loading | boolean | false | 로딩 스피너 | | disabled | boolean | false | 비활성 | | iconOnly | boolean | false | 아이콘만 표시 | | leftIconSlot | ReactNode | — | 좌측 아이콘 (넘기면 자동 표시) | | rightIconSlot | ReactNode | — | 우측 아이콘 (넘기면 자동 표시) | | iconSlot | ReactNode | — | iconOnly일 때 아이콘 (없으면 children 사용) | | interaction | boolean | true | 호버/포커스/프레스 오버레이 (Figma Interaction) | | fullWidth | boolean | false | width: 100% | | width | string \| number | — | 고정 너비 (200px, 50% 등. number는 px 변환) | | block | boolean | false | flex: 1로 남은 공간 채우기 |

허용 문자열 상수는 IS_BUTTON_PROP_VALUES export로 확인할 수 있습니다.

IsTextButton

Figma IsTextButton 스펙의 텍스트형 버튼입니다. 배경 없이 라벨·아이콘·로딩만 표시하며, 색·타이포·패딩·인터랙션 오버레이는 디자인 파일과 동일하게 고정되어 있습니다.

import { IsTextButton } from 'insystem-atoms';

<IsTextButton color="primary">더보기</IsTextButton>
<IsTextButton color="secondary" size="sm">취소</IsTextButton>
<IsTextButton color="primary" loading>처리 중…</IsTextButton>
<IsTextButton color="primary" leftIcon leftIconSlot={<PlusIcon />}>추가</IsTextButton>

| Prop | 타입 | 기본값 | 설명 | | --------------- | ------------------------ | --------- | ------------------------------------------------------------------------------- | | color | primary | secondary | primary | Figma Color | | size | md | sm | md | Medium / Small | | loading | boolean | false | 로딩 스피너 | | disabled | boolean | false | 비활성 | | leftIcon | boolean | false | 좌측 아이콘 영역 + leftIconSlot | | rightIcon | boolean | false | 우측 아이콘 영역 + rightIconSlot | | leftIconSlot | ReactNode | — | 좌측 아이콘 | | rightIconSlot | ReactNode | — | 우측 아이콘 | | interaction | boolean | true | 호버/포커스/프레스 오버레이 (Primary는 #0066FF, Secondary는 #171719 레이어) |

허용 문자열은 IS_TEXT_BUTTON_PROP_VALUES로 확인할 수 있습니다.

IsChip

Figma IsChip 스펙의 칩(토글)입니다. Solid / Outlined, 네 가지 크기, Active·Disable·좌우 아이콘·Interaction 오버레이가 디자인 파일과 동일하게 고정되어 있습니다. (기존 Chip은 레거시·토큰 오버라이드용으로 남겨 두었습니다.)

import { IsChip } from 'insystem-atoms';

<IsChip variant="solid" size="md">필터</IsChip>
<IsChip variant="outlined" active>선택됨</IsChip>
<IsChip variant="solid" active disabled>비활성 선택</IsChip>
<IsChip variant="outlined" leftIcon leftIconSlot={<PlusIcon />}>추가</IsChip>

| Prop | 타입 | 기본값 | 설명 | | --------------- | ---------------------------- | ------- | ------------------------------- | | variant | solid | outlined | solid | Figma Variant | | size | xs | sm | md | lg | md | XSmall / Small / Medium / Large | | active | boolean | false | 선택(pressed) 상태 | | disabled | boolean | false | 비활성 | | leftIcon | boolean | false | 좌측 아이콘 + leftIconSlot | | rightIcon | boolean | false | 우측 아이콘 + rightIconSlot | | leftIconSlot | ReactNode | — | 좌측 아이콘 | | rightIconSlot | ReactNode | — | 우측 아이콘 | | interaction | boolean | true | 호버/포커스/프레스 오버레이 |

허용 문자열은 IS_CHIP_PROP_VALUES로 확인할 수 있습니다.

IsInputSearch

Figma IsInputSearch (178:244) 스펙의 검색 입력입니다. 크기·상태·라벨 위치·Prefix/Suffix/Clearable/Placeholder 표시는 디자인과 동일한 고정 토큰입니다.

import { IsInputSearch } from 'insystem-atoms';

<IsInputSearch size="md" suffix suffixSlot={<SearchIcon />} />
<IsInputSearch labelPosition="row" prefix prefixSlot={<SearchIcon />} suffix={false} />
<IsInputSearch clearable suffix suffixSlot={<SearchIcon />} defaultValue="검색" />
<IsInputSearch error="올바른 형식이 아닙니다." suffix suffixSlot={<SearchIcon />} />

| Prop | 타입 | 기본값 | Figma 대응 | | ------------------ | ---------------------------- | --------------- | ------------------------------------ | | size | xs | sm | md | lg | md | XSmall ~ Large | | labelPosition | column | row | column | Position | | labelShow | boolean | true | LabelShow | | label | string | Label | 라벨 텍스트 | | required | boolean | — | 라벨 * (선택) | | prefix | boolean | false | Prefix | | prefixSlot | ReactNode | — | 접두 아이콘 | | suffix | boolean | true | Suffix | | suffixSlot | ReactNode | — | 접미 아이콘 | | clearable | boolean | false | Clearable | | placeholderShown | boolean | true | Placeholder | | placeholder | string | 입력해주세요. | placeholder | | error | string | — | 에러 메시지(있으면 테두리 #FF4242) | | fullWidth | boolean | true | — | | width | string | number | — | 고정 너비 |

허용 문자열은 IS_INPUT_SEARCH_PROP_VALUES로 확인할 수 있습니다. 에러 문구 예시는 IS_INPUT_SEARCH_FIGMA_ERROR_MESSAGE와 동일합니다.

Input

import { Input } from 'insystem-atoms';

<Input label="이메일" required placeholder="[email protected]" />
<Input label="검색" prefix={<SearchIcon />} clearable />
<Input error="필수 입력값입니다" />
<Input hint="8자 이상 입력해주세요" />

| Prop | 타입 | 기본값 | 설명 | | ----------- | -------------------- | ------- | ------------------------- | | label | string | — | 레이블 | | required | boolean | — | 필수 표시(*) | | error | string | — | 에러 메시지 (빨간 테두리) | | hint | string | — | 힌트 텍스트 | | size | sm | md | lg | md | 크기 | | prefix | ReactNode | — | 좌측 장식 슬롯 | | suffix | ReactNode | — | 우측 장식 슬롯 | | clearable | boolean | false | X 버튼으로 초기화 | | fullWidth | boolean | true | 전체 너비 | | width | string \| number | — | 고정 너비 |

Checkbox

import { Checkbox } from 'insystem-atoms';

<Checkbox label="전체 동의" checked={all} onChange={handleAll} />
<Checkbox label="항목 1" indeterminate />
<Checkbox label="비활성" disabled />

| Prop | 타입 | 설명 | | --------------- | -------------------- | ------------------------- | | label | ReactNode | 레이블 | | size | sm | md | lg | 크기 | | indeterminate | boolean | 중간 선택 상태 | | error | boolean | 에러 테두리 | | checkColor | string | 체크 활성 색상 오버라이드 |

Radio / RadioGroup

import { RadioGroup } from 'insystem-atoms';

<RadioGroup
  name="gender"
  options={[
    { value: 'male', label: '남성' },
    { value: 'female', label: '여성' },
  ]}
  value={value}
  onChange={setValue}
/>

// 격자 배치
<RadioGroup
  name="plan"
  options={plans}
  direction="grid"
  gridColumns={3}
  value={value}
  onChange={setValue}
/>

| Prop | 타입 | 기본값 | 설명 | | ------------- | ------------------------------- | ------ | ---------- | | options | { value, label, disabled? }[] | — | 선택 항목 | | value | string | — | 선택된 값 | | onChange | (value: string) => void | — | 변경 콜백 | | direction | row | column | grid | row | 배치 방향 | | gridColumns | number | 3 | grid 열 수 |

Select

import { Select } from 'insystem-atoms';

<Select
  label="지역"
  options={[
    { value: 'seoul', label: '서울' },
    { value: 'busan', label: '부산' },
  ]}
  placeholder="선택해주세요"
/>
<Select variant="filled" options={options} />

| Prop | 타입 | 기본값 | 설명 | | ------------- | ----------------------------------- | --------- | ------------ | | options | { value, label, disabled? }[] | — | 선택 항목 | | placeholder | string | — | 플레이스홀더 | | variant | default | outlined | filled | default | 배경 스타일 | | label | string | — | 레이블 | | error | string | — | 에러 메시지 |

TextArea

import { TextArea } from 'insystem-atoms';

<TextArea label="내용" required maxLength={500} />
<TextArea resize="none" rows={6} />

Label

import { Label } from 'insystem-atoms';

<Label required htmlFor="name">이름</Label>
<Label optional>설명</Label>
<Label disabled>비활성</Label>

Badge

import { Badge } from 'insystem-atoms';

<Badge variant="success">활성</Badge>
<Badge variant="danger" outline>오류</Badge>
<Badge variant="primary" dot />   {/* 점 뱃지 */}

Chip

디자인 시스템 IsChip과 동일한 UI가 필요하면 IsChip을 사용하세요. 아래 Chip은 label·count·activeColor 등 토큰 기반 오버라이드가 필요한 기존 API입니다.

import { Chip } from 'insystem-atoms';

// 필터 그룹 예시
const [selected, setSelected] = useState('all');

<Chip label="전체" active={selected === 'all'} count={24} onClick={() => setSelected('all')} />
<Chip label="진행중" active={selected === 'active'} count={8} onClick={() => setSelected('active')} />

Loading

import { Loading } from 'insystem-atoms';

<Loading size="md" />
<Loading size="lg" text="데이터를 불러오는 중..." />
<Loading fullscreen text="처리 중..." />   {/* 전체 화면 오버레이 */}

Pagination

import { Pagination } from "insystem-atoms";

const [page, setPage] = useState(1);

<Pagination currentPage={page} totalPages={20} onPageChange={setPage} />;

Toast

import { Toast } from "insystem-atoms";

const [visible, setVisible] = useState(false);

{
  visible && (
    <Toast
      type="success"
      message="저장되었습니다."
      onClose={() => setVisible(false)}
    />
  );
}

| Prop | 타입 | 기본값 | 설명 | | ---------- | ---------------------------------------------------------------- | --------------- | ----------------------- | | message | string | — | 표시할 메시지 | | type | info | success | error | warning | info | 타입 | | duration | number | 3000 | 자동 닫힘 ms (0 = 수동) | | position | top-center | top-right | bottom-center | bottom-right | bottom-center | 위치 | | onClose | () => void | — | 닫기 콜백 |

스타일 오버라이드 Props

대부분의 컴포넌트에 아래 props로 인라인 스타일을 덮어쓸 수 있습니다. IsButton은 Figma 고정 스펙이라 해당 오버라이드를 지원하지 않습니다.

<Input borderColor="#7C3AED" borderRadius="8px" />
<Badge backgroundColor="#f0fdf4" textColor="#166534">커스텀</Badge>

| Prop | 컴포넌트 | 설명 | | ----------------- | ------------------------- | ------------------- | | borderRadius | Input, TextArea, Badge 등 | 모서리 반경 | | borderColor | Input, TextArea, Badge 등 | 테두리 색상 | | textColor | Input, TextArea, Badge 등 | 텍스트/전경 색상 | | backgroundColor | Input, TextArea, Badge 등 | 배경색 | | padding | Input, TextArea 등 | 내부 여백 | | checkColor | Checkbox, Radio | 체크/선택 활성 색상 | | activeColor | Chip, Pagination | 활성 상태 색상 |

TypeScript

모든 컴포넌트는 완전한 타입을 지원합니다.

import type {
  IsButtonProps,
  IsChipProps,
  IsInputSearchProps,
  IsTextButtonProps,
  InputProps,
  Size,
  Variant,
  // 토큰 오버라이드 타입
  Tokens,
  DeepPartial,
} from "insystem-atoms";

import {
  configureTokens, // 토큰 오버라이드
  resetTokens, // 기본값 복원
  defaultTokens, // 기본 토큰(읽기 전용 참고)
  tokens, // 현재 활성 토큰 (라이브)
  t, // styled-components용 지연 접근자
} from "insystem-atoms";

라이선스

MIT