Color
Color (색상)
색상 시스템과 테마에서의 적용을 이해하는 문서예요.
출처: 문서
본문
Radix Themes는 여러 색상 스케일을 제공하며, 각각은 라이트, 다크, 알파 변형을 갖고 있어요. 내부적으로 색상 시스템은 Radix Colors를 기반으로 동작해요.
Accents
Accent 색상은 테마에서 가장 지배적인 색상이에요. 기본 버튼, 링크, 그 외 상호작용 요소에 사용돼요. accentColor는 Theme 컴포넌트에 직접 지정해요.
<Theme accentColor="indigo">
<MyApp />
</Theme>
사용 가능한 accent 색상
고를 수 있는 accent 색상의 범위는 다음과 같아요.
Gray
Gold
Bronze
Brown
Yellow
Amber
Orange
Tomato
Red
Ruby
Crimson
Pink
Plum
Purple
Violet
Iris
Indigo
Blue
Cyan
Teal
Jade
Green
Grass
Lime
Mint
Sky
Accent 스케일 구조 (Accent scale anatomy)
각 accent는 12단계 스케일이며, 각 색상의 채워진(solid) 변형과 투명(transparent) 변형을 포함해요. 예를 들어 다음은 indigo 색상 스케일이에요.
1
2
3
4
5
6
7
8
9
10
11
12
Accent 스케일 토큰
Accent 색상 토큰은 CSS 변수로 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면 접근성 있고 테마의 나머지 부분과 일관된 모습을 유지할 수 있어요.
/* Backgrounds */
var(--accent-1);
var(--accent-2);
/* Interactive components */
var(--accent-3);
var(--accent-4);
var(--accent-5);
/* Borders and separators */
var(--accent-6);
var(--accent-7);
var(--accent-8);
/* Solid colors */
var(--accent-9);
var(--accent-10);
/* Accessible text */
var(--accent-11);
var(--accent-12);
/* Functional colors */
var(--accent-surface);
var(--accent-indicator);
var(--accent-track);
var(--accent-contrast);
Grays
순수 회색이나 여러 가지 틴트가 들어간 회색 중에서 고를 수 있어요. accent 색상은 이를 보완하는 회색 음영과 자동으로 짝지어져요. 물론 Theme 컴포넌트에 커스텀 grayColor를 직접 지정할 수도 있어요.
<Theme grayColor="mauve">
<MyApp />
</Theme>
사용 가능한 gray 색상
고를 수 있는 회색은 6가지예요. 그 차이는 미묘해 보일 수 있지만, 텍스트가 많은 페이지나 밀도가 높은 UI에서 특히 영향력이 커요.
Gray
Mauve
Slate
Sage
Olive
Sand
Gray 스케일 구조 (Gray scale anatomy)
회색은 각 색상의 채워진(solid) 변형과 투명(transparent) 변형을 포함한 동일한 12단계 색상 스케일을 기반으로 해요. 예를 들어 다음은 slate 색상 스케일이에요.
1
2
3
4
5
6
7
8
9
10
11
12
Gray 스케일 토큰
Gray 색상 토큰은 CSS 변수로 접근할 수 있어요. 이 토큰들을 사용해 커스텀 컴포넌트를 스타일링하면 접근성 있고 테마의 나머지 부분과 일관된 모습을 유지할 수 있어요.
/* Backgrounds */
var(--gray-1);
var(--gray-2);
/* Interactive components */
var(--gray-3);
var(--gray-4);
var(--gray-5);
/* Borders and separators */
var(--gray-6);
var(--gray-7);
var(--gray-8);
/* Solid colors */
var(--gray-9);
var(--gray-10);
/* Accessible text */
var(--gray-11);
var(--gray-12);
/* Functional colors */
var(--gray-surface);
var(--gray-indicator);
var(--gray-track);
var(--gray-contrast);
색상 오버라이드 (Color overrides)
가능하다면 컴포넌트의 color prop을 사용해 테마 accent를 덮어쓸 수 있어요. 중첩된 컴포넌트는 자동으로 새로운 accent 색상을 상속받아요.
<Theme accentColor="indigo">
<Flex align="start" direction={{ initial: "column", sm: "row" }} gap="4">
<Callout.Root>
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
<Flex as="span" align="center" gap="4">
<Text>There are new commits.</Text>
<Button variant="surface" size="1" my="-2">
Refresh
</Button>
</Flex>
</Callout.Text>
</Callout.Root>
<Callout.Root color="gray">
<Callout.Icon>
<InfoCircledIcon />
</Callout.Icon>
<Callout.Text>
<Flex as="span" align="center" gap="4">
<Text>There are new commits.</Text>
<Button variant="surface" size="1" my="-2">
Refresh
</Button>
</Flex>
</Callout.Text>
</Callout.Root>
</Flex>
</Theme>
개별 색상 토큰
개별 색상은 대응하는 이름의 비슷한 CSS 변수로 직접 접근할 수 있어요. 예를 들어 red 계열은 --red-1, --red-2처럼 최대 --red-12까지 접근돼요.
고대비 (High contrast)
대부분 color prop이 있는 컴포넌트는 배경 위에서 돋보이는 모습을 만들어 주는 highContrast 옵션도 제공해요.
<Flex gap="4">
<Button variant="classic" color="gray">
Edit profile
</Button>
<Button variant="classic" color="gray" highContrast>
Edit profile
</Button>
</Flex>
포커스와 선택 (Focus and selection)
Radix Themes는 현재 컴포넌트의 accent 색상에 따라 포커스와 선택 색상을 자동으로 조절해요. 대부분의 경우 color prop을 설정하면 충돌하는 색조가 어긋나지 않도록 포커스·선택 색상도 지능적으로 바뀌어요.
<Theme accentColor="indigo">
<Flex direction="column" gap="4">
<Text>
Complete your account setup in <Link href="#">settings</Link>
</Text>
<Text color="gray">
Complete your account setup in <Link href="#">settings</Link>
</Text>
<Text color="red">
Complete your account setup in <Link href="#">settings</Link>
</Text>
</Flex>
</Theme>
Focus 스케일 토큰
Focus 색상 토큰은 다른 스케일과 비슷한 명명 구조의 CSS 변수로 접근할 수 있어요. 예를 들어 --focus-1, --focus-2처럼 최대 --focus-12까지요.
대부분의 컴포넌트는 포커스 아웃라인 색상으로 --focus-8을 사용해요.
알파 색상 (Alpha colors)
모든 색상에는 페이지 배경 위에 놓았을 때 시각적으로 동일하게 보이도록 설계된 알파 변형이 있어요. 이는 색상을 다른 배경 위에 겹칠 때 자연스럽게 보이게 하는 강력한 도구예요. 모든 숫자 색상 단계에는 대응하는 알파 변형이 있어요.
/* Solid colors */
var(--red-1);
var(--red-2);
...
var(--red-12);
/* Alpha colors */
var(--red-a1);
var(--red-a2);
...
var(--red-a12);
알파 색상은 Radix Themes 컴포넌트 안에서 자동으로 사용되며, 추가 설정이 필요 없어요.
배경색 (Backgrounds)
Radix Themes UI에 시각적 계층감을 만들기 위해 여러 배경색이 사용돼요. 이 색상들은 배경, 카드, 그 외 표면에 사용돼요.
/* Page background */
var(--color-background);
/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */
var(--color-panel-solid);
var(--color-panel-translucent);
/* Form component backgrounds, such as text fields, checkboxes, select, etc. */
var(--color-surface);
/* Dialog overlays */
var(--color-overlay);
패널 배경 (Panel background)
panelBackground prop은 패널 요소가 채워진(solid) 배경색을 쓸지 투명(translucent) 배경색을 쓸지를 제어해요. 기본 translucent 값은 은은한 오버레이 효과를 만들어요.
<Theme panelBackground="translucent">
<MyApp />
</Theme>
Sign up
Email address
Enter your email
PasswordForgot password?
Enter your password
반면 solid는 정보를 가리지 않고 제시하고 싶을 때 유용해요.
<Theme panelBackground="solid">
<MyApp />
</Theme>
Sign up
Email address
Enter your email
PasswordForgot password?
Enter your password
커스터마이징 (Customization)
Radix Themes 색상은 토큰 시스템의 대응 CSS 변수를 덮어써서 커스터마이징할 수 있어요. 색상 토큰의 전체 목록은 소스 코드를 참고해 주세요.
CSS가 Radix Themes 스타일보다 나중에 적용되어 우선순위를 가지도록 해야 해요.
브랜드 색상 (Brand color)
특정 색상을 대응하는 토큰을 다시 매핑해 브랜드 색상으로 바꿀 수 있어요. 보통 테마 accent로 사용하는 스케일의 9단계를 덮어쓰면 돼요.
.radix-themes {
--my-brand-color: #3052f6;
--indigo-9: var(--my-brand-color);
--indigo-a9: var(--my-brand-color);
}
이 예시에서, 채워진(solid) 색상의 indigo 컴포넌트를 사용하면 이제 커스텀 색상을 참조하게 돼요.
커스텀 팔레트 (Custom palette)
custom color palette tool을 사용해 기준이 되는 몇 가지 색상만으로 커스텀 팔레트를 만들 수 있어요. 결과가 마음에 들면 생성된 CSS를 프로젝트에 붙여넣으면 돼요. 생성된 색상을 테마에서 사용할 accent에 맞게 이름을 바꿀 수도 있어요.
다크 테마 색상을 생성하려면 다크 테마를 사용하도록 appearance를 전환해 주세요. 생성된 CSS를 라이트 테마 색상 오버라이드 뒤에 붙여넣어야 해요.
색상 별칭 (Color aliasing)
사용하고 싶은 색조를 가리킬 때 일반적인 색상 이름을 쓰는 편이 나을 수 있어요. 예를 들어 crimson, jade, indigo를 각각 red, green, blue로 부르는 게 흔하죠.
이 경우 Radix Themes 토큰을 서로 재매핑해 사용하고 싶은 색상 이름을 되찾을 수 있어요.
.radix-themes {
--red-1: var(--ruby-1);
--red-2: var(--ruby-2);
--red-3: var(--ruby-3);
--red-4: var(--ruby-4);
--red-5: var(--ruby-5);
--red-6: var(--ruby-6);
--red-7: var(--ruby-7);
--red-8: var(--ruby-8);
--red-9: var(--ruby-9);
--red-10: var(--ruby-10);
--red-11: var(--ruby-11);
--red-12: var(--ruby-12);
--red-a1: var(--ruby-a1);
--red-a2: var(--ruby-a2);
--red-a3: var(--ruby-a3);
--red-a4: var(--ruby-a4);
--red-a5: var(--ruby-a5);
--red-a6: var(--ruby-a6);
--red-a7: var(--ruby-a7);
--red-a8: var(--ruby-a8);
--red-a9: var(--ruby-a9);
--red-a10: var(--ruby-a10);
--red-a11: var(--ruby-a11);
--red-a12: var(--ruby-a12);
--red-surface: var(--ruby-surface);
--red-indicator: var(--ruby-indicator);
--red-track: var(--ruby-track);
--red-contrast: var(--ruby-contrast);
}
이 예시에서 Radix Themes 컴포넌트와 토큰에 red 색상을 사용하면 이제 원래 ruby 스케일을 참조하게 돼요.
개별 CSS 파일 (Individual CSS files)
색상 정의는 Radix Themes가 제공하는 전체 CSS 크기의 약 20%를 차지해요.
CSS 번들 크기를 줄이고 사용하는 색상에만 접근하고 싶다면 각 색상 모듈의 개별 CSS 파일을 import할 수 있어요. 다음은 예시 설정이에요.
// Base theme tokens
import "@radix-ui/themes/tokens/base.css";
// Include just the colors you use, for example `ruby`, `teal`, and `slate`.
// Remember to import the gray tint that matches your theme setting.
import "@radix-ui/themes/tokens/colors/ruby.css";
import "@radix-ui/themes/tokens/colors/teal.css";
import "@radix-ui/themes/tokens/colors/slate.css";
// Rest of the CSS
import "@radix-ui/themes/components.css";
import "@radix-ui/themes/utilities.css";
import하지 않은 색상도 React의 color prop에서는 계속 받아들여진다는 점을 유의해 주세요. 또한 개발 도구가 import된 CSS 파일의 순서를 보존하도록 해야 해요.
더 알아보기 (Learn more)
- 색상 토큰은 12단계 스케일(
--accent-1~--accent-12)과 알파 변형(--red-a1등)을 제공하며, 브랜드 색상 대체에 활용할 수 있어요.