# 색상

TDS의 색은 이름(토큰)으로 정해져 있다. 서비스(Mordy, Morit)가 바뀌어도 이름은 같고 HEX 값만 바뀐다. 코드에는 HEX 값이 아니라 토큰 이름을 쓴다.
웹에서는 CSS 변수 `--tds-{이름}`(예: `--tds-primary`)으로 쓴다. 값 전체: https://developers.moring.co/tds/tokens.json, https://developers.moring.co/tds/tokens.css

- Mordy 값 출처: `apps/mobile/src/ui/tokens.ts` (Mordy 저장소 60df633)
- Morit 값 출처: `lib/core/morit_theme.dart` (Moring_Morit 저장소 e50d1ee)
- "웹 확장" 토큰은 앱 코드에는 없고, 웹에서 글자 대비를 맞추려고 TDS가 더한 토큰이다.

## 배경과 면

화면, 패널, 입력 칸처럼 넓은 면에 쓰는 색이다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `bg` | `--tds-bg` | `#FCFCFD` | `#0B0F17` | `#F7F8FA` | `#1C2327` | 화면 배경. 화면 맨 뒤 배경이다. Screen 컴포넌트의 기본 배경이다. |
| `canvas` | `--tds-canvas` | `#F4F6FA` | `#0B0F17` | `#F7F8FA` | `#1C2327` | 회색 바탕. 흰 패널(Panel) 아래에 까는 옅은 회색 바탕이다. 시험 계획과 리포트 화면이 쓴다. |
| `surface` | `--tds-surface` | `#FFFFFF` | `#141A25` | `#FBFDFC` | `#242C30` | 흰 면. 패널, 시트, 대화상자, 탭 바, 선택 전 보기 칸의 배경이다. |
| `well` | `--tds-well` | `#F6F8FB` | `#1A2130` | `#F2F4F6` | `#2C353A` | 홈. 패널 안에서 행을 감싸는 옅은 홈이다. WellRow 배경과 시트 닫기 버튼 배경이다. |
| `card` | `--tds-card` | `#F3F7FE` | `#18202E` | `#F3FBF8` | `#283837` | 카드. 주색을 옅게 깐 카드 배경이다. Card의 기본 색이고 메뉴 목록 배경이다. |
| `cardStrong` | `--tds-card-strong` | `#EAF2FD` | `#1D2839` | `#EAF8F4` | `#2C433D` | 진한 카드. card보다 한 단계 진한 틴트다. 온보딩에서 선택된 타일과 다크 모드 토스트의 배경이다. |
| `selected` | `--tds-selected` | `#F4F8FF` | `#15233C` | `#F3FBF8` | `#2A3D3A` | 선택됨. 선택된 항목의 배경이다. ChoiceCard, WellRow, FilterPill이 선택되면 이 색을 깐다. |
| `field` | `--tds-field` | `#F4F7FB` | `#1A2130` | `#F2F4F6` | `#2C353A` | 입력 칸. Field의 기본 배경이다. 포커스를 받으면 surface로 바뀐다. |
| `muted` | `--tds-muted` | `#F2F5F9` | `#1A2130` | `#F0F3F2` | `#2C353A` | 보조 면. 누르지 않는 보조 면이다. 표 머리글, 작은 태그, 이전·다음 둥근 버튼, 모임 커버 자리의 배경이다. |
| `pressed` | `--tds-pressed` | `#F5F8FC` | `#1B2230` | `#F0F3F2` | `#343F44` | 누름. 행을 누르는 동안의 배경이다. SettingsRow와 메뉴 행이 쓴다. |
| `photo` | `--tds-photo` | `#F1F3F7` | `#10151F` | `#F2F4F6` | `#191F23` | 사진 자리. 사진을 불러오기 전이나 사진이 없을 때 깔리는 색이다. Avatar, SourceCrop, ImageBlock이 쓴다. |
| `skeleton` | `--tds-skeleton` | `#EAF0F8` | `#1C2433` | `#E8EAED` | `#343F44` | 로딩 막대. Skeleton의 막대 색이다. |
| `track` | `--tds-track` | `#E6ECF5` | `#253043` | `#E8EAED` | `#3D494F` | 빈 막대. 진행 막대, 슬라이더 레일, 차트 막대의 비어 있는 부분이다. |

## 선

구분선과 테두리에 쓰는 색이다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `line` | `--tds-line` | `#E8EDF5` | `#232C3C` | `#EEF1F0` | `#3A464A` | 기본 선. 구분선과 기본 테두리다. 두께는 1px(또는 헤어라인)이다. |
| `lineStrong` | `--tds-line-strong` | `#D9E1EC` | `#2F394C` | `#D8E1DE` | `#5E6D6D` | 진한 선. 선택 전 체크 원, 라디오 테두리, 시트 손잡이처럼 눈에 띄어야 하는 선이다. |
| `cardBorder` | `--tds-card-border` | `#EDF1F6` | `#212A3A` | `#E2E9E7` | `#3A464A` | 카드 테두리. ChoiceCard 테두리이고, 다크 모드에서는 Panel 테두리다. |
| `selectedLine` (앱 미사용) | `--tds-selected-line` | `#DCE8FB` | `#284B82` | `#D5EBE6` | `#42625C` | 선택 테두리. 선택된 항목의 옅은 테두리로 정의되어 있다. 앱 코드에서는 아직 읽지 않는다. |

## 글자

글자와 아이콘에 쓰는 색이다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `text` | `--tds-text` | `#141B2D` | `#ECF0F7` | `#17211F` | `#DCE3E4` | 본문. 제목과 본문 글자다. 흰 면 위에서 가장 진한 글자다. |
| `textSecondary` | `--tds-text-secondary` | `#737B8F` | `#9AA4B8` | `#65717D` | `#ACBABD` | 보조 글자. 날짜, 설명, 개수처럼 본문 아래에 놓는 보조 글자다. |
| `textTertiary` | `--tds-text-tertiary` | `#9AA3B5` | `#667085` | `#8B95A1` | `#82948F` | 약한 글자. 입력 칸 안내 문구와 쓸 수 없는 상태의 글자다. 읽어야 하는 내용에는 쓰지 않는다. |
| `tabInactive` | `--tds-tab-inactive` | `#6F7486` | `#7C8699` | `#65717D` | `#ACBABD` | 선택 안 된 탭. 하단 탭 바에서 선택되지 않은 아이콘과 이름이다. |
| `slate` | `--tds-slate` | `#4B5A74` | `#AAB5C8` | `#4E5A57` | `#A5BEC4` | 슬레이트. 선택되지 않은 달력 날짜 숫자, 노트 카드의 종류 이름, 선택되지 않은 알림 선택지의 글자다. |
| `navy` | `--tds-navy` | `#0B1F56` | `#DCE7FF` | `#173D34` | `#BAE7D6` | 네이비. 워드마크 글자와 PillTabs의 선택된 칸 색이다. 다크 모드의 PillTabs는 navy 대신 primary를 쓴다. |
| `textSecondaryInk` (웹 확장) | `--tds-text-secondary-ink` | `#6A7184` | `#9AA4B8` | `#65717D` | `#ACBABD` | 보조 글자(웹). 웹에서 작은 보조 글자를 쓸 때 쓴다. textSecondary를 흰 면에서 4.5:1이 되도록 진하게 만든 값이다. |

## 주색

서비스마다 값이 가장 크게 달라지는 색이다. 버튼, 링크, 선택 표시에 쓴다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `primary` | `--tds-primary` | `#1F7BFF` | `#3D8BFF` | `#00856A` | `#79C7AF` | 주색. 주 행동, 링크, 선택 표시, 진행 막대의 색이다. 앱 코드에서 가장 많이 쓰이는 색이다. |
| `primaryStrong` | `--tds-primary-strong` | `#0C70FC` | `#2F80FF` | `#00856A` | `#326C59` | 진한 주색. 색이 채워진 둥근 표식에 쓴다. 오늘 날짜 원과 중앙 버튼 그림자가 이 색이다. |
| `primarySoft` | `--tds-primary-soft` | `#E8F1FD` | `#172A4A` | `#EAF8F4` | `#2F4D43` | 옅은 주색. 선택 타일, D-Day 칩, 부드러운 버튼, 안내(Notice) 배경이다. |
| `primaryLine` | `--tds-primary-line` | `#9CC3FF` | `#35609E` | `#88D6BA` | `#286B55` | 주색 테두리. SecondaryButton의 테두리와 켜진 FilterPill의 테두리다. |
| `gradientFrom` | `--tds-gradient-from` | `#3A93FF` | `#3A93FF` | `#00856A` | `#326C59` | 그라데이션 시작. 주 버튼, 중앙 버튼, 진행 막대, 아바타 바탕의 그라데이션 시작 색(왼쪽 또는 위)이다. |
| `gradientTo` | `--tds-gradient-to` | `#0A70FF` | `#0A70FF` | `#00856A` | `#326C59` | 그라데이션 끝. 그라데이션의 끝 색(오른쪽 또는 아래)이다. |
| `onPrimary` (웹 확장) | `--tds-on-primary` | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | `#132F25` | primary 위 글자(웹). primary로 채운 면 위에 놓는 글자와 아이콘 색이다. 앱 코드에서는 white를 쓴다. |
| `onPrimaryStrong` (웹 확장) | `--tds-on-primary-strong` | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | `#EDF4EF` | primaryStrong·그라데이션 위 글자(웹). primaryStrong 또는 gradient로 채운 면 위에 놓는 글자와 아이콘 색이다. 앱 코드에서는 white를 쓴다. |
| `primaryInk` (웹 확장) | `--tds-primary-ink` | `#1A69D9` | `#4590FF` | `#007E65` | `#79C7AF` | 주색 글자(웹). 웹에서 작은 글자를 주색으로 쓸 때 쓴다. primary를 흰 면에서 4.5:1이 되도록 진하게 만든 값이다. |

## 탭과 구분 컨트롤

탭, 칩, 구분 컨트롤의 바탕에 쓰는 색이다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `segment` | `--tds-segment` | `#4B5A74` | `#3A4A66` | `#4E5A57` | `#30434C` | 구분 컨트롤 선택. 촬영 검토 화면에서 선택된 필터 칩의 배경이다. |
| `segmentTrack` | `--tds-segment-track` | `#F1F4F8` | `#1A2130` | `#F2F4F6` | `#2C353A` | 구분 컨트롤 바탕. 중립 대화상자 버튼, 시간 선택 띠, AiMark 칩의 배경이다. |
| `tabTrack` | `--tds-tab-track` | `#E9EDF3` | `#1A2130` | `#E8EAED` | `#2C353A` | 탭 바탕. PillTabs의 바탕 띠다. |

## 상태

성공, 주의, 오류를 알리는 색이다. 색만으로 알리지 않고 아이콘과 글자를 함께 쓴다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `success` | `--tds-success` | `#0E9057` | `#2FBF7E` | `#00856A` | `#79C7AF` | 성공. 정답, 완료, 성공 토스트의 아이콘 색이다. |
| `successSoft` | `--tds-success-soft` | `#ECF8F2` | `#11281E` | `#EAF8F4` | `#2F4D43` | 성공 면. 정답 보기와 FeedbackCard(correct)의 배경이다. |
| `successText` | `--tds-success-text` | `#1F724D` | `#7EDDB0` | `#173D34` | `#BAE7D6` | 성공 글자. successSoft 위에 놓는 글자 색이다. |
| `mint` | `--tds-mint` | `#2DC48D` | `#33C891` | `#00A884` | `#79C7AF` | 민트. 학습 목표선, 학습 완료 표시, 차트의 세 번째 선 색, 올라간 수치의 배경이다. |
| `mintText` | `--tds-mint-text` | `#17A673` | `#4FD6A2` | `#00856A` | `#79C7AF` | 민트 글자. 이번 주 달성 목표 수치와 올라간 수치의 글자와 아이콘이다. |
| `amber` | `--tds-amber` | `#F8A434` | `#F8A434` | `#E3A008` | `#D5BD8E` | 주의. 복습 추천 버튼(AmberButton)과 경고 표시 색이다. |
| `amberSoft` | `--tds-amber-soft` | `#FCF6E9` | `#2A2215` | `#FFF8D6` | `#4B4231` | 주의 면. Notice(warn)와 복습 추천 카드의 배경이다. |
| `amberText` | `--tds-amber-text` | `#8A5A12` | `#F5C576` | `#6D5429` | `#E9D5AC` | 주의 글자. amberSoft 위에 놓는 글자 색이다. |
| `orange` | `--tds-orange` | `#F59A3C` | `#F59A3C` | `#E3A008` | `#D5BD8E` | 주황. 연속 학습일을 나타내는 불꽃 아이콘의 색이다. |
| `danger` | `--tds-danger` | `#E5213A` | `#FF5A6E` | `#C43C42` | `#EBA6A4` | 오류. 오류 글자, 오답 표시, 삭제 버튼, D-Day 임박 점의 색이다. |
| `dangerSoft` | `--tds-danger-soft` | `#FFEFF2` | `#321820` | `#FFF1F1` | `#513638` | 오류 면. Notice(error), 오답 보기, 삭제 행 아이콘 타일의 배경이다. |
| `dangerLine` | `--tds-danger-line` | `#F6C3CB` | `#6A2A36` | `#ECC4C6` | `#645153` | 오류 테두리. 오류 면 위의 옅은 테두리다. 문제 번호 격자와 단원 카드에 쓴다. |
| `onDanger` (웹 확장) | `--tds-on-danger` | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | `#441C1C` | 오류 위 글자(웹). danger 위에 놓는 글자 색이다. 앱 코드에서는 white를 쓴다. |

## 덮개와 고정색

화면을 덮거나, 어떤 서비스에서도 바뀌지 않는 색이다.

| 토큰 | CSS 변수 | Mordy 라이트 | Mordy 다크 | Morit 라이트 | Morit 다크 | 용도 |
| --- | --- | --- | --- | --- | --- | --- |
| `scrim` | `--tds-scrim` | `rgba(12, 18, 34, 0.45)` | `rgba(0, 0, 0, 0.62)` | `rgba(12, 18, 34, 0.45)` | `rgba(0, 0, 0, 0.62)` | 어둠막. 대화상자와 시트 뒤를 어둡게 덮는 반투명 색이다. |
| `veil` | `--tds-veil` | `rgba(255, 255, 255, 0.55)` | `rgba(11, 15, 23, 0.55)` | `rgba(255, 255, 255, 0.55)` | `rgba(11, 15, 23, 0.55)` | 베일. 촬영 검토 화면에서 사진 위를 흐리게 덮는 반투명 흰색이다. |
| `white` | `--tds-white` | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | `#FFFFFF` | 흰색. 색이 채워진 면 위의 글자와 아이콘이다. 모든 모드와 서비스에서 #FFFFFF다. |
| `black` (앱 미사용) | `--tds-black` | `#000000` | `#000000` | `#000000` | `#000000` | 검정. 정의되어 있지만 앱 코드에서는 아직 쓰지 않는다. |

## 과목 팔레트

과목을 구분하는 8가지 색이다. 데이터를 구분하는 색이라 모든 서비스에서 값이 같다.

| 이름 | 글리프 라이트 | 글리프 다크 | 옅은 면 라이트 | 옅은 면 다크 | 채움 시작 | 채움 끝 | 막대 | 기본 과목 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| blue | #3B82F6 | #5B9BFF | #E9F3FD | rgba(91, 155, 255, 0.16) | #7DB4FF | #4C8DFB | #5B9BFF | 수학 |
| green | #18A865 | #35C483 | #E6F7EE | rgba(53, 196, 131, 0.16) | #6FD7A0 | #3DBE7C | #7CD0A4 | 영어 |
| orange | #F08A24 | #FFA24A | #FFF3E6 | rgba(255, 162, 74, 0.16) | #FFC07A | #F59A3C | #FCC470 | 사회 |
| red | #F25C5C | #FF7676 | #FFECEF | rgba(255, 118, 118, 0.16) | #FF8F8F | #F25C5C | #FC8C64 | 한국사 |
| purple | #7B61FF | #9C86FF | #F0EBFF | rgba(156, 134, 255, 0.16) | #B3A2FF | #8B72FF | #A897FF | — |
| teal | #14A89A | #2EC7B5 | #E0F8F0 | rgba(46, 199, 181, 0.16) | #6ADBC6 | #1FB58A | #6ACFB8 | 과학 |
| yellow | #E0A100 | #F2BE2E | #FFF7DD | rgba(242, 190, 46, 0.16) | #FFD96B | #F1B81C | #F6D36B | — |
| gray | #6B7A99 | #98A5BD | #F1F4F8 | rgba(152, 165, 189, 0.16) | #AAB4C7 | #8391AA | #AAB4C7 | 국어, 기타 |

## Morit 값의 출처

Morit은 Flutter Material 3 색 체계를 쓴다. 코드 값은 코드(또는 실행해서 읽은 colorScheme 역할)에서 그대로 가져온 값, 계산은 코드 값 둘을 섞어 만든 값, 공통은 Mordy와 같은 값이다. Morit에서는 `success`와 `primary`가 같은 초록이므로 성공은 항상 체크 아이콘과 글자를 함께 쓴다.

| 토큰 | 라이트 값 | 라이트 출처 | 다크 값 | 다크 출처 |
| --- | --- | --- | --- | --- |
| `bg` | `#F7F8FA` | 코드 값: colorScheme.surface | `#1C2327` | 코드 값: colorScheme.surface |
| `canvas` | `#F7F8FA` | 코드 값: colorScheme.surface | `#1C2327` | 코드 값: colorScheme.surface |
| `surface` | `#FBFDFC` | 코드 값: colorScheme.surfaceContainerLow (cardTheme.color) | `#242C30` | 코드 값: colorScheme.surfaceContainerLow (cardTheme.color) |
| `well` | `#F2F4F6` | 코드 값: colorScheme.surfaceContainer | `#2C353A` | 코드 값: colorScheme.surfaceContainer |
| `card` | `#F3FBF8` | 계산: primaryContainer 50% + surfaceContainerLow 50% | `#283837` | 계산: primaryContainer 35% + surfaceContainerLow 65% |
| `cardStrong` | `#EAF8F4` | 코드 값: colorScheme.primaryContainer | `#2C433D` | 계산: primaryContainer 70% + surfaceContainerLow 30% |
| `selected` | `#F3FBF8` | 계산: primaryContainer 50% + surfaceContainerLow 50% | `#2A3D3A` | 계산: primaryContainer 50% + surfaceContainerLow 50% |
| `field` | `#F2F4F6` | 코드 값: inputDecorationTheme.fillColor | `#2C353A` | 코드 값: inputDecorationTheme.fillColor |
| `muted` | `#F0F3F2` | 코드 값: colorScheme.surfaceContainerHigh | `#2C353A` | 코드 값: colorScheme.surfaceContainer |
| `pressed` | `#F0F3F2` | 코드 값: colorScheme.surfaceContainerHigh | `#343F44` | 코드 값: colorScheme.surfaceContainerHigh |
| `photo` | `#F2F4F6` | 코드 값: colorScheme.surfaceContainer | `#191F23` | 코드 값: colorScheme.surfaceContainerLowest |
| `skeleton` | `#E8EAED` | 코드 값: colorScheme.surfaceContainerHighest | `#343F44` | 코드 값: colorScheme.surfaceContainerHigh |
| `track` | `#E8EAED` | 코드 값: colorScheme.surfaceContainerHighest | `#3D494F` | 코드 값: colorScheme.surfaceContainerHighest |
| `line` | `#EEF1F0` | 코드 값: dividerTheme.color | `#3A464A` | 코드 값: dividerTheme.color |
| `lineStrong` | `#D8E1DE` | 코드 값: outlinedButtonTheme 테두리색 | `#5E6D6D` | 계산: outline 50% + outlineVariant 50% |
| `cardBorder` | `#E2E9E7` | 코드 값: _lightCardBorder | `#3A464A` | 코드 값: colorScheme.outlineVariant |
| `selectedLine` | `#D5EBE6` | 계산: primary 15% + surfaceContainerLow 85% | `#42625C` | 계산: primary 35% + surfaceContainerLow 65% |
| `text` | `#17211F` | 코드 값: colorScheme.onSurface | `#DCE3E4` | 코드 값: colorScheme.onSurface |
| `textSecondary` | `#65717D` | 코드 값: colorScheme.onSurfaceVariant | `#ACBABD` | 코드 값: colorScheme.onSurfaceVariant |
| `textTertiary` | `#8B95A1` | 코드 값: colorScheme.outline | `#82948F` | 코드 값: colorScheme.outline |
| `tabInactive` | `#65717D` | 코드 값: colorScheme.onSurfaceVariant | `#ACBABD` | 코드 값: colorScheme.onSurfaceVariant |
| `slate` | `#4E5A57` | 코드 값: listTileTheme.iconColor | `#A5BEC4` | 코드 값: colorScheme.secondary |
| `navy` | `#173D34` | 코드 값: colorScheme.onPrimaryContainer | `#BAE7D6` | 코드 값: colorScheme.onPrimaryContainer |
| `textSecondaryInk` | `#65717D` | 웹 확장: textSecondary를 surface·bg·canvas·well·card 위에서 4.5:1이 되도록 조정한 값 | `#ACBABD` | 웹 확장: textSecondary를 surface·bg·canvas·well·card 위에서 4.5:1이 되도록 조정한 값 |
| `primary` | `#00856A` | 코드 값: colorScheme.primary | `#79C7AF` | 코드 값: colorScheme.primary |
| `primaryStrong` | `#00856A` | 코드 값: filledButtonTheme 배경색 | `#326C59` | 코드 값: filledButtonTheme 배경색 |
| `primarySoft` | `#EAF8F4` | 코드 값: colorScheme.primaryContainer | `#2F4D43` | 코드 값: colorScheme.primaryContainer |
| `primaryLine` | `#88D6BA` | 코드 값: colorScheme.inversePrimary | `#286B55` | 코드 값: colorScheme.inversePrimary |
| `gradientFrom` | `#00856A` | 코드 값: filledButtonTheme 배경색 (Morit 버튼은 단색이라 시작과 끝이 같다) | `#326C59` | 코드 값: filledButtonTheme 배경색 (Morit 버튼은 단색이라 시작과 끝이 같다) |
| `gradientTo` | `#00856A` | 코드 값: filledButtonTheme 배경색 (Morit 버튼은 단색이라 시작과 끝이 같다) | `#326C59` | 코드 값: filledButtonTheme 배경색 (Morit 버튼은 단색이라 시작과 끝이 같다) |
| `onPrimary` | `#FFFFFF` | 코드 값: colorScheme.onPrimary | `#132F25` | 코드 값: colorScheme.onPrimary |
| `onPrimaryStrong` | `#FFFFFF` | 코드 값: filledButtonTheme 글자색 | `#EDF4EF` | 코드 값: filledButtonTheme 글자색 |
| `primaryInk` | `#007E65` | 웹 확장: primary를 surface·primarySoft·canvas·card·selected 위에서 4.5:1이 되도록 조정한 값 | `#79C7AF` | 웹 확장: primary를 surface·primarySoft·canvas·card·selected 위에서 4.5:1이 되도록 조정한 값 |
| `segment` | `#4E5A57` | 코드 값: listTileTheme.iconColor | `#30434C` | 코드 값: colorScheme.secondaryContainer |
| `segmentTrack` | `#F2F4F6` | 코드 값: colorScheme.surfaceContainer | `#2C353A` | 코드 값: colorScheme.surfaceContainer |
| `tabTrack` | `#E8EAED` | 코드 값: colorScheme.surfaceContainerHighest | `#2C353A` | 코드 값: colorScheme.surfaceContainer |
| `success` | `#00856A` | 코드 값: colorScheme.primary | `#79C7AF` | 코드 값: colorScheme.primary |
| `successSoft` | `#EAF8F4` | 코드 값: colorScheme.primaryContainer | `#2F4D43` | 코드 값: colorScheme.primaryContainer |
| `successText` | `#173D34` | 코드 값: colorScheme.onPrimaryContainer | `#BAE7D6` | 코드 값: colorScheme.onPrimaryContainer |
| `mint` | `#00A884` | 코드 값: seed | `#79C7AF` | 코드 값: colorScheme.primary |
| `mintText` | `#00856A` | 코드 값: colorScheme.primary | `#79C7AF` | 코드 값: colorScheme.primary |
| `amber` | `#E3A008` | 코드 값: colorScheme.tertiary | `#D5BD8E` | 코드 값: colorScheme.tertiary |
| `amberSoft` | `#FFF8D6` | 코드 값: colorScheme.tertiaryContainer | `#4B4231` | 코드 값: colorScheme.tertiaryContainer |
| `amberText` | `#6D5429` | 코드 값: colorScheme.onTertiaryContainer | `#E9D5AC` | 코드 값: colorScheme.onTertiaryContainer |
| `orange` | `#E3A008` | 코드 값: colorScheme.tertiary | `#D5BD8E` | 코드 값: colorScheme.tertiary |
| `danger` | `#C43C42` | 코드 값: colorScheme.error | `#EBA6A4` | 코드 값: colorScheme.error |
| `dangerSoft` | `#FFF1F1` | 코드 값: colorScheme.errorContainer | `#513638` | 코드 값: colorScheme.errorContainer |
| `dangerLine` | `#ECC4C6` | 계산: error 30% + surfaceContainerLowest 70% | `#645153` | 계산: error 35% + surface 65% |
| `onDanger` | `#FFFFFF` | 코드 값: colorScheme.onError | `#441C1C` | 코드 값: colorScheme.onError |
| `scrim` | `rgba(12, 18, 34, 0.45)` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 | `rgba(0, 0, 0, 0.62)` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 |
| `veil` | `rgba(255, 255, 255, 0.55)` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 | `rgba(11, 15, 23, 0.55)` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 |
| `white` | `#FFFFFF` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 | `#FFFFFF` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 |
| `black` | `#000000` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 | `#000000` | 공통: Morit 코드에 정한 값이 없어 Mordy와 같은 값을 쓴다 |