Color

누를 수 있는 요소는 누르는 동안 표면 색이 바뀐다. 눌린 색은 역할 색 안의 -pressed 토큰으로 정한다.

색은 누름을 알리는 가장 기본적인 방법이다. 표면 색이 바뀌는 것만으로 사용자는 자신이 누른 곳이 어디인지, 입력이 요소에 닿았는지를 바로 안다.

저장기본bg-brand-solid

저장눌림bg-brand-solid-pressed

기본과 눌림 — 표면 색만 bg-brand-solid 에서 bg-brand-solid-pressed 로 바뀌고 글자 색은 그대로다

색이 이 역할을 맡는 것은 어떤 환경에서도 일어나기 때문이다. 크기는 기기의 동작 줄이기에 따라 일어나지 않고 햅틱은 기기에 따라 전해지지 않지만, 색 전환은 설정의 영향을 받지 않는다. 그래서 색을 누를 수 있는 모든 요소에 쓰고, 다른 요소를 그 위에 더한다.

눌린 색은 토큰으로 정한다

역할 색에는 -pressed 가 붙은 짝이 있고, 컴포넌트마다 눌렸을 때 쓸 토큰을 정해 둔다. 채움 버튼은 평소 bg-brand-solid, 누르는 동안 bg-brand-solid-pressed 를 쓴다.

색은 표면에서만 바뀐다

고정

복사해 새로 쓰기

수정

이렇게 — 표면 색만 바뀌고 글자 · 아이콘 색은 그대로다

고정

복사해 새로 쓰기

수정

이렇게 하지 않는다 — 글자 · 아이콘까지 흐려지면 다른 요소로 바뀐 것처럼 읽힌다

색 전환은 요소의 표면에서 일어난다. 표면이 있는 요소에서는 그 위에 놓인 글자와 아이콘의 색이 누름에 반응하지 않는다. 표면과 글자 색이 함께 바뀌면 요소 전체가 다른 요소로 바뀐 것처럼 읽힌다. 그래서 글자용 pressed 토큰은 두지 않는다.

직접 만드는 요소에 적용할 때

제공하지 않는 컴포넌트에 눌린 색을 정할 때는 세 가지를 차례로 확인한다.

1. 기본 색의 pressed 짝 찾기

눌린 색은 새로 만들지 않고 이미 있는 토큰에서 고른다. 기본 상태에 쓰는 토큰 이름 뒤에 -pressed 가 붙은 토큰이 그 짝이다. 배경이 bg-neutral-weak 라면 누르는 동안에는 bg-neutral-weak-pressed 를 쓴다.

2. 평소 배경이 없을 때

라이트

화면 위

기본눌림

bg-layer-default-pressed

떠 있는 표면(메뉴 · 플로팅 버튼) 위

기본눌림

bg-layer-floating-pressed

다크

화면 위

기본눌림

bg-layer-default-pressed

떠 있는 표면(메뉴 · 플로팅 버튼) 위

기본눌림

bg-layer-floating-pressed

평소 배경이 없는 ghost 버튼 — 누르는 동안 표면이 생긴다. 다크에서는 놓인 층에 따라 눌림 색이 다르다

평소 배경이 없는 요소도 누르는 동안에는 표면이 생긴다. ghost 버튼이 여기 든다. 평소에는 글자만 보이지만 누르는 동안 배경이 나타나 눌린 자리를 드러낸다.

화면 위에 놓이면 bg-layer-default-pressed 를 쓴다.
플로팅 버튼 · 메뉴처럼 떠 있는 표면 위에 놓이면 bg-layer-floating-pressed 를 쓴다.
모서리 반경은 공통 값을 두지 않고 컴포넌트가 정한다.
SEED 는 투명도가 있는 transparent-pressed 를 쓴다. groo 는 검사기가 투명도 있는 색을 받지 않아 층마다 불투명한 짝을 둔다.

3. 색을 쓰지 않는 경우인지 확인하기

기본

눌림

Switch — 켜짐 색 그대로

지출

수입

이체

기본

지출

수입

이체

눌림

Tabs — 선택 표시 그대로

색이 이미 상태를 뜻하는 요소 — 누르는 동안 색은 그대로 두고 크기만 준다. 선택은 손을 뗀 뒤에 바뀐다

색이 이미 그 요소의 상태를 나타내면 누름에는 색을 쓰지 않는다. 스위치는 색으로 켜짐과 꺼짐을, 탭은 선택과 비선택을 나눈다. 이런 요소가 누르는 동안 색이 바뀌면 손을 떼기도 전에 상태가 바뀐 것처럼 보인다. 그래서 색은 그대로 두고 축소만으로 누름을 알린다.

Pressed 토큰

눌림 토큰	기본 짝	라이트 (기본 → 눌림)	다크 (기본 → 눌림)
`bg-layer-default-pressed`	`bg-layer-default`	`#FFFFFF` → `#F7F8FD`	`#242938` → `#353B4D`
`bg-layer-floating-pressed`	`bg-layer-floating`	`#FFFFFF` → `#F7F8FD`	`#2D3346` → `#353B4D`
`bg-neutral-weak-pressed`	`bg-neutral-weak`	`#F5F6FA` → `#EDEFF3`	`#353B4D` → `#404757`
`bg-neutral-weak-alpha-pressed`	`bg-neutral-weak-alpha`	`#0000000C` → `#00000010`	`#FFFFFF20` → `#FFFFFF2E`
`bg-neutral-inverted-pressed`	`bg-neutral-inverted`	`#1A1F2E` → `#535866`	`#F5F6FA` → `#B7BDCC`
`bg-critical-solid-pressed`	`bg-critical-solid`	`#D72323` → `#C01016`	`#CC0E17` → `#D82424`
`bg-critical-weak-pressed`	`bg-critical-weak`	`#FFEFEC` → `#FFDEDA`	`#532722` → `#722722`
`bg-positive-solid-pressed`	`bg-positive-solid`	`#167F3F` → `#026E33`	`#117539` → `#198140`
`bg-positive-weak-pressed`	`bg-positive-weak`	`#EAF5EC` → `#D8EADB`	`#223927` → `#20482B`
`bg-warning-solid-pressed`	`bg-warning-solid`	`#BE490D` → `#A53E0A`	`#B04209` → `#BF4A10`
`bg-warning-weak-pressed`	`bg-warning-weak`	`#FFEFE8` → `#FAE0D5`	`#4B2B1F` → `#65321D`
`bg-informative-solid-pressed`	`bg-informative-solid`	`#1D6EC9` → `#0F5FB3`	`#0F65BF` → `#1F70CB`
`bg-informative-weak-pressed`	`bg-informative-weak`	`#EAF3FE` → `#D7E6FB`	`#21344D` → `#204069`
`bg-brand-solid-pressed` Desk	`bg-brand-solid`	`#0147AD` → `#013D96`	`#1049A4` → `#1A5AC2`
`bg-brand-weak-pressed` Desk	`bg-brand-weak`	`#E8F1FE` → `#D7E5FC`	`#20314E` → `#1F3A69`
`bg-brand-solid-pressed` HR	`bg-brand-solid`	`#075B3C` → `#064F33`	`#1B583E` → `#0C6C49`
`bg-brand-weak-pressed` HR	`bg-brand-weak`	`#E8F3EC` → `#D6E8DE`	`#21352B` → `#214132`

구성과 일부 설명은 당근 SEED Design 의 Foundations 문서(Apache-2.0)를 바탕으로 했다. 값과 그림은 groo 것이다.

눌린 색은 토큰으로 정한다제목 링크 복사

색은 표면에서만 바뀐다제목 링크 복사

직접 만드는 요소에 적용할 때제목 링크 복사

1. 기본 색의 pressed 짝 찾기제목 링크 복사

2. 평소 배경이 없을 때제목 링크 복사

3. 색을 쓰지 않는 경우인지 확인하기제목 링크 복사

Pressed 토큰제목 링크 복사

이 페이지

눌린 색은 토큰으로 정한다

색은 표면에서만 바뀐다

직접 만드는 요소에 적용할 때

1. 기본 색의 pressed 짝 찾기

2. 평소 배경이 없을 때

3. 색을 쓰지 않는 경우인지 확인하기

Pressed 토큰