ColorField

Data Input

디자인 토큰 스와치와 hex 피커로 색상을 고르는 필드.

Usage

배경·텍스트 색을 디자인 토큰 스와치 또는 직접 입력한 hex 값 중에서 고를 때

import

import { ColorField } from '@mildang/design-system/unofficial/ColorField';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

ColorField Props

Prop

Type

Default

onChange

필수

(value: string) => void

지정 안 함

value

필수

string

지정 안 함

className

string

지정 안 함

disabled

boolean

false

label

string

지정 안 함

libraryLabel

string

지정 안 함

pageColors

readonly string[]

지정 안 함

swatches

readonly string[]

지정 안 함

SystemStyleObject

지정 안 함

예제

기본 사용

디자인 토큰 스와치와 hex 피커를 팝오버로 열어 배경색을 고르는 기본형입니다.

코드

import { useState } from 'react';
import { ColorField } from '@mildang/design-system/unofficial/ColorField';
import { css } from '@mildang/styled-system/css';

// 스토리 데모용 토큰 스와치(실제 사용처는 entities의 COLOR_TOKEN_PALETTE를 넘긴다).
const DEMO_SWATCHES = [
  'neutral.surface.low',
  'brand.surface.base',
  'positive.surface.base',
  'warning.surface.base',
  'critical.surface.base',
  'info.surface.base',
  'neutral.text.base',
  'brand.text.base',
  'positive.text.base',
  'critical.text.base',
  'neutral.border.base',
  'brand.border.base',
];

const storySubjectStyle = css({ width: '[calc(token(spacing.80)*3)]', margin: '80' });

const ColorFieldDefaultExample = function DefaultStory() {
    const [value, setValue] = useState('positive.surface.base');
    return (
      <div data-testid="story-subject" className={storySubjectStyle}>
        <ColorField
          value={value}
          onChange={setValue}
          swatches={DEMO_SWATCHES}
          libraryLabel="Learning 토큰"
          label="배경색"
        />
      </div>
    );
  };

export default ColorFieldDefaultExample;