[Feat/#7] - Colors 및 Font 세팅 #8
Conversation
📝 WalkthroughWalkthroughIntelliJ IDEA 프로젝트 설정 파일들을 추가하고, 디자인 시스템을 위한 색상 팔레트(라이트/다크 모드), 타이포그래피 스타일, 의미론적 색상 속성 및 테마를 정의하며, 메인 활동 레이아웃을 업데이트합니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks❌ Failed checks (1 inconclusive)
✅ Passed checks (5 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
presentation/src/main/res/values/typography.xml (1)
4-158: 타이포그래피 네이밍에 대한 참고사항현재 iOS 스타일의 네이밍(LargeTitle, Caption1 등)을 사용하고 있습니다. Figma에서 가져온 이름이므로 디자인 시스템 일관성을 위해 유지하는 것이 맞지만, Android Material Design은 일반적으로 headline1-6, body1-2 등의 네이밍을 사용합니다. 향후 Material 3 통합 시 고려해볼 수 있습니다.
presentation/src/main/res/layout/activity_main.xml (1)
18-18: 테마 속성 사용으로 전환 계획을 추적하세요.현재
@color/neutral100,@color/primary100등을 직접 참조하고 있습니다. PR 설명에서 언급하신 대로?attr/해결 문제가 수정되면, 다크/라이트 모드 전환이 제대로 동작하도록 테마 속성(?attr/colorBackgroundSemantic등)을 사용하도록 전환해야 합니다.이슈 트래킹을 위해 TODO 주석을 추가하거나 별도 이슈를 생성하는 것을 권장합니다.
테마 속성 전환을 위한 별도 이슈를 생성하거나 TODO 주석을 추가하시겠습니까?
Also applies to: 27-28, 40-40
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
presentation/src/main/res/font/pretendard_bold.ttfis excluded by!**/*.ttfpresentation/src/main/res/font/pretendard_regular.ttfis excluded by!**/*.ttf
📒 Files selected for processing (11)
.idea/deploymentTargetSelector.xml.idea/kotlinc.xml.idea/markdown.xml.idea/vcs.xmlpresentation/src/main/res/layout/activity_main.xmlpresentation/src/main/res/values-night/colors.xmlpresentation/src/main/res/values-night/themes.xmlpresentation/src/main/res/values/attrs.xmlpresentation/src/main/res/values/colors.xmlpresentation/src/main/res/values/themes.xmlpresentation/src/main/res/values/typography.xml
🔇 Additional comments (13)
.idea/kotlinc.xml (1)
1-6: IDE 설정 파일의 버전 관리 포함에 대한 확인이 파일은 IntelliJ IDEA에 의해 자동으로 생성되는 IDE 설정 파일입니다. 일반적으로 프로젝트에서
.idea/디렉토리의 파일들을 버전 관리에 포함시킬지 여부는 팀 정책에 따라 달라집니다. 파일 자체의 구문이나 내용에는 문제가 없으나, 이 파일이 PR #8의 핵심 목표인 디자인 시스템 설정(colors.xml, typography.xml 등)과는 직접적인 관련이 없어 보입니다..idea/deploymentTargetSelector.xml (1)
1-10: IDE 자동 생성 설정 파일이 파일은 IntelliJ IDEA의 배포 대상 선택기 설정으로, IDE에 의해 자동으로 생성되는 파일입니다. 파일의 내용 자체에는 문제가 없으나, PR #8의 주요 목표인 디자인 시스템 색상 및 타이포그래피 설정과는 무관합니다.
.idea/vcs.xml (1)
1-6: IDE VCS 설정 파일이 파일은 IntelliJ IDEA의 버전 관리 시스템 매핑 설정으로, 저장소 루트를 Git과 연결하는 표준 IDE 설정입니다. 파일의 내용 자체에는 문제가 없으나, PR #8의 핵심 목표인 디자인 시스템(colors.xml, typography.xml, attrs.xml, themes.xml 등)과는 직접적인 관련이 없습니다.
주의: 제공된 파일 중 PR 목표에서 언급된 presentation 모듈의 디자인 시스템 리소스 파일들(values/colors.xml, values-night/colors.xml, values/typography.xml, values/attrs.xml, values/themes.xml 등)이 포함되지 않았습니다. 이 파일들에 대한 상세한 리뷰는 해당 파일들이 제공될 때 가능합니다.
.idea/markdown.xml (1)
1-8: IntelliJ IDEA 설정 파일입니다.마크다운 미리보기를 Compose (experimental)로 설정하는 IDE 설정 파일입니다. 프로젝트 빌드에는 영향을 주지 않으며, 팀 내 IDE 설정 통일을 위한 파일입니다.
presentation/src/main/res/values/colors.xml (4)
7-15: Primary 컬러 팔레트가 잘 정의되었습니다.100부터 900까지 완전한 범위의 primary 컬러가 일관성 있게 정의되어 있습니다.
18-26: Accent 컬러 팔레트가 적절합니다.Orange 계열의 accent 컬러가 100-900 범위로 완전하게 정의되어 있습니다.
29-38: Neutral 컬러 팔레트가 잘 구성되었습니다.000(white)부터 900(dark)까지 완전한 grayscale 팔레트가 정의되어 있으며, themes.xml에서 semantic 컬러로 활용됩니다.
41-59: Semantic 컬러는 특정 shade만 정의되어 있습니다.Success, Warning, Danger 컬러가 100, 300, 500, 700, 900 shade만 정의되어 있습니다 (200, 400, 600, 800 생략). Figma 디자인 시스템에서 이렇게 정의되었다면 문제없지만, 필요한 shade가 누락되지 않았는지 확인해주세요.
presentation/src/main/res/values/attrs.xml (1)
3-7: Semantic 컬러 속성이 올바르게 정의되었습니다.5개의 semantic 컬러 속성(Background, Border, TextPrimary, TextSecondary, TextDisablePlaceholder)이 적절하게 정의되어 themes.xml과 연동됩니다.
PR 설명에서 언급하신
?attr/사용 시 빌드 실패 이슈는 attrs.xml 파일 자체의 문제가 아니라 레이아웃에서 속성을 참조하는 방식의 문제일 가능성이 높습니다. 이 파일 정의는 올바릅니다.presentation/src/main/res/values/themes.xml (1)
6-10: Light 모드 semantic 컬러 매핑이 적절합니다.Neutral 컬러를 활용한 semantic 속성 매핑이 잘 되어 있습니다:
- Background: neutral100 (밝은 배경)
- Text Primary: neutral800 (어두운 텍스트)
이 조합은 좋은 대비를 제공합니다. Night 모드에서는 이 값들이 반대로 매핑될 것으로 예상됩니다.
presentation/src/main/res/values/typography.xml (2)
83-158: Bold 타이포그래피 스타일이 Regular 스타일과 완벽하게 일관성 있게 정의되었습니다.각 Regular 스타일에 대응하는 Bold 변형이 정의되어 있으며, textSize와 lineHeight가 정확하게 일치합니다.
@font/pretendard_bold폰트 파일도 정상적으로 존재합니다.
4-79: 타이포그래피 스타일이 올바르게 정의되었습니다.10개의 Regular 스타일이 크기 순으로 체계적으로 정의되어 있으며, 다음을 확인했습니다:
@font/pretendard_regular폰트 파일이res/font/디렉토리에 존재합니다.lineHeight속성은 프로젝트의androidx.appcompat과androidx.core.ktx의존성으로 인해 API 24+ 에서도 정상 작동합니다.- 앱이
AppCompatActivity를 상속하여 스타일 호환성이 보장됩니다.코드 변경이 필요하지 않습니다.
presentation/src/main/res/values-night/themes.xml (1)
3-7: 다크 모드용 시맨틱 컬러 속성 매핑을 확인하세요.
values/themes.xml에 정의된 시맨틱 컬러 속성들(colorBackgroundSemantic,colorTextPrimarySemantic등)이 다크 모드에서 올바른 색상(values-night/colors.xml의 색상)을 참조하는지 확인이 필요합니다.Material3의 DayNight 테마가 자동으로 night qualifier 리소스를 선택하므로 동작할 수 있지만, 명시적으로 night 테마에서 시맨틱 속성을 오버라이드하지 않으면 라이트 모드 색상 매핑이 그대로 사용될 수 있습니다.
| <Button | ||
| android:layout_width="wrap_content" | ||
| android:layout_height="wrap_content" | ||
| android:text="test Button" | ||
| android:textAppearance="@style/Caption1" | ||
| android:backgroundTint="@color/primary100" | ||
| android:textColor="@color/neutral800" | ||
| android:layout_marginTop="20dp" | ||
| app:layout_constraintStart_toStartOf="parent" | ||
| app:layout_constraintEnd_toEndOf="parent" | ||
| app:layout_constraintTop_toTopOf="parent" | ||
| /> |
There was a problem hiding this comment.
테스트용 버튼을 프로덕션 레이아웃에서 제거하세요.
"test Button"은 디자인 시스템을 테스트하기 위한 것으로 보입니다. 프로덕션 코드에 머지하기 전에 제거하거나, 데모 목적이라면 주석으로 명확히 표시해주세요.
🤖 Prompt for AI Agents
presentation/src/main/res/layout/activity_main.xml lines 22-33: 해당 레이아웃에 남아 있는
"test Button" 테스트용 버튼은 프로덕션 레이아웃에서 제거해야 합니다; 파일에서 해당 <Button> 블록을 삭제하거나 실제로 데모
목적이라면 삭제 대신 명확한 주석(예: <!-- DEMO ONLY: ... -->)으로 표시하고, 디자인 시스템 테스트용이라면 임시 플래그나
별도 샘플 레이아웃으로 옮겨 배포에서 포함되지 않도록 조치하세요.
| <color name="primary100">#1B2964</color> | ||
| <color name="primary200">#243684</color> | ||
| <color name="primary300">#3149B5</color> | ||
| <color name="primary400">#3656D8</color> | ||
| <color name="primary500">#4264F0</color> | ||
| <color name="primary600">#617FFF</color> | ||
| <color name="primary700">#94A6FF</color> | ||
| <color name="primary800">#C2CEFF</color> | ||
| <color name="primary900">#DBE2FF</color> | ||
|
|
||
|
|
||
| <color name="accent100">#6B2A00</color> | ||
| <color name="accent200">#993C00</color> | ||
| <color name="accent300">#C74E00</color> | ||
| <color name="accent400">#E05700</color> | ||
| <color name="accent500">#F56000</color> | ||
| <color name="accent600">#FF7924</color> | ||
| <color name="accent700">#FFA266</color> | ||
| <color name="accent800">#FFCAA8</color> | ||
| <color name="accent900">#FFEDE0</color> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Find and examine the night mode colors file
find . -path "*/presentation/src/main/res/values-night/colors.xml" -type fRepository: UMC-PRODUCT/umc-product-android
Length of output: 206
🏁 Script executed:
# Also find the light mode colors file for comparison
find . -path "*/presentation/src/main/res/values/colors.xml" -type fRepository: UMC-PRODUCT/umc-product-android
Length of output: 120
🏁 Script executed:
# List files in the colors directory to understand the structure
find . -path "*/presentation/src/main/res/values*/colors.xml" -type fRepository: UMC-PRODUCT/umc-product-android
Length of output: 172
🏁 Script executed:
cat -n ./presentation/src/main/res/values/colors.xmlRepository: UMC-PRODUCT/umc-product-android
Length of output: 2591
🏁 Script executed:
cat -n ./presentation/src/main/res/values-night/colors.xmlRepository: UMC-PRODUCT/umc-product-android
Length of output: 2599
🏁 Script executed:
python3 << 'EOF'
def hex_to_rgb(hex_color):
hex_color = hex_color.lstrip('#')
return tuple(int(hex_color[i:i+2], 16) for i in (0, 2, 4))
def luminance(rgb):
r, g, b = [x / 255.0 for x in rgb]
r = r / 12.92 if r <= 0.03928 else ((r + 0.055) / 1.055) ** 2.4
g = g / 12.92 if g <= 0.03928 else ((g + 0.055) / 1.055) ** 2.4
b = b / 12.92 if b <= 0.03928 else ((b + 0.055) / 1.055) ** 2.4
return 0.2126 * r + 0.7152 * g + 0.0722 * b
def contrast_ratio(hex1, hex2):
l1 = luminance(hex_to_rgb(hex1))
l2 = luminance(hex_to_rgb(hex2))
lighter = max(l1, l2)
darker = min(l1, l2)
return (lighter + 0.05) / (darker + 0.05)
# Night mode colors
neutral000_night = "#121212" # dark background
neutral800_night = "#EBEDEF" # light text
primary500_night = "#4264F0"
primary700_night = "#94A6FF"
primary900_night = "#DBE2FF"
accent500_night = "#F56000"
accent700_night = "#FFA266"
accent900_night = "#FFEDE0"
# Light mode colors (for comparison)
neutral000_light = "#FFFFFF"
neutral900_light = "#1F2124"
primary500_light = "#4869F0"
accent500_light = "#FF6400"
print("=== DARK MODE CONTRAST RATIOS ===")
print(f"neutral000 vs primary500: {contrast_ratio(neutral000_night, primary500_night):.2f}:1")
print(f"neutral000 vs primary700: {contrast_ratio(neutral000_night, primary700_night):.2f}:1")
print(f"neutral000 vs primary900: {contrast_ratio(neutral000_night, primary900_night):.2f}:1")
print(f"neutral000 vs accent500: {contrast_ratio(neutral000_night, accent500_night):.2f}:1")
print(f"neutral000 vs accent700: {contrast_ratio(neutral000_night, accent700_night):.2f}:1")
print(f"neutral000 vs accent900: {contrast_ratio(neutral000_night, accent900_night):.2f}:1")
print(f"neutral000 vs neutral800: {contrast_ratio(neutral000_night, neutral800_night):.2f}:1")
print("\n=== LIGHT MODE CONTRAST RATIOS (for comparison) ===")
print(f"neutral000 vs primary500: {contrast_ratio(neutral000_light, primary500_light):.2f}:1")
print(f"neutral000 vs accent500: {contrast_ratio(neutral000_light, accent500_light):.2f}:1")
print(f"neutral900 vs primary500: {contrast_ratio(neutral900_light, primary500_light):.2f}:1")
print(f"neutral900 vs accent500: {contrast_ratio(neutral900_light, accent500_light):.2f}:1")
print("\n=== WCAG AA STANDARDS ===")
print("Normal text (body): 4.5:1")
print("Large text (18pt+): 3:1")
print("Graphics/UI components: 3:1")
print("\n=== BRAND CONSISTENCY CHECK ===")
print(f"Primary500 Light (#4869F0) vs Dark (#4264F0): Similar? {contrast_ratio('#4869F0', '#4264F0') < 1.1}")
print(f"Accent500 Light (#FF6400) vs Dark (#F56000): Similar? {contrast_ratio('#FF6400', '#F56000') < 1.1}")
EOFRepository: UMC-PRODUCT/umc-product-android
Length of output: 161
🏁 Script executed:
python3 << 'EOF'
# Simplified WCAG contrast calculation
def contrast(hex1, hex2):
hex1 = hex1.lstrip('#')
hex2 = hex2.lstrip('#')
r1, g1, b1 = int(hex1[0:2], 16), int(hex1[2:4], 16), int(hex1[4:6], 16)
r2, g2, b2 = int(hex2[0:2], 16), int(hex2[2:4], 16), int(hex2[4:6], 16)
def lum(r, g, b):
rgb = [r/255, g/255, b/255]
rgb = [x/12.92 if x <= 0.03928 else ((x+0.055)/1.055)**2.4 for x in rgb]
return 0.2126*rgb[0] + 0.7152*rgb[1] + 0.0722*rgb[2]
l1, l2 = lum(r1, g1, b1), lum(r2, g2, b2)
lighter = max(l1, l2)
darker = min(l1, l2)
return round((lighter + 0.05) / (darker + 0.05), 2)
bg = "#121212"
colors = {
"primary500": "#4264F0",
"primary700": "#94A6FF",
"primary900": "#DBE2FF",
"accent500": "#F56000",
"accent700": "#FFA266",
"accent900": "#FFEDE0",
"neutral800": "#EBEDEF"
}
print("Dark Mode Contrast (neutral000 bg):")
for name, color in colors.items():
ratio = contrast(bg, color)
status = "✓ AA" if ratio >= 4.5 else ("✓ Large" if ratio >= 3 else "✗ Fail")
print(f"{name:15} {color}: {ratio}:1 {status}")
EOFRepository: UMC-PRODUCT/umc-product-android
Length of output: 375
Primary 컬러의 접근성 확인이 필요합니다.
다크 모드용 Primary와 Accent 컬러의 접근성을 검증했습니다:
WCAG AA 대비 비율 결과:
primary500(#4264F0): 3.85:1 - 대형 텍스트만 적합 (일반 텍스트는 4.5:1 필요)primary700이상: 모두 충족 (8.17:1 이상)- 모든
accent색상: 모두 충족 (5.85:1 이상)
브랜드 일관성: 라이트 모드와 다크 모드의 Primary/Accent 색상이 일관되게 유지됩니다.
권장사항:
- 일반 본문 텍스트는
primary700(#94A6FF) 이상 사용 primary500은 큰 텍스트(18pt+)나 UI 컴포넌트에만 사용- 다양한 다크 모드 배경에서 실제 UI 가독성 테스트 수행
🤖 Prompt for AI Agents
presentation/src/main/res/values-night/colors.xml lines 7-26: primary500
(#4264F0) does not meet WCAG AA for normal text and must not be used for body
copy; update the codebase to replace usages of primary500 for regular text with
primary700 (#94A6FF) or darker tokens, restrict primary500 to large text (18pt+)
or non-body UI components only, add a brief XML comment in this file documenting
the accessibility guidance (which tokens are safe for body vs. large text), and
run visual QA across common dark-mode backgrounds to verify contrast after the
changes.
| <color name="neutral000">#121212</color> | ||
| <color name="neutral100">#28292F</color> | ||
| <color name="neutral200">#3A3F46</color> | ||
| <color name="neutral300">#626C75</color> | ||
| <color name="neutral400">#7C8792</color> | ||
| <color name="neutral500">#A6ADB5</color> | ||
| <color name="neutral600">#C2C7CC</color> | ||
| <color name="neutral700">#DCDDE0</color> | ||
| <color name="neutral800">#EBEDEF</color> | ||
| <color name="neutral900">#F7F7F7</color> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check light mode neutral colors
echo "=== Light mode neutral colors ==="
if [ -f "presentation/src/main/res/values/colors.xml" ]; then
cat "presentation/src/main/res/values/colors.xml" | grep -E 'neutral[0-9]+'
else
find . -name "colors.xml" -type f ! -path "*/values-night/*" | head -5
fi
echo -e "\n=== Dark mode neutral colors ==="
if [ -f "presentation/src/main/res/values-night/colors.xml" ]; then
cat "presentation/src/main/res/values-night/colors.xml" | grep -E 'neutral[0-9]+'
fiRepository: UMC-PRODUCT/umc-product-android
Length of output: 1042
의미론적 색상 네이밍 일관성 문제 수정 필요
다크 모드와 라이트 모드의 neutral 색상 스케일이 의미론적으로 일관성이 없습니다.
- 라이트 모드: neutral000 = #FFFFFF (가장 밝음) → neutral900 = #1F2124 (가장 어두움)
- 다크 모드: neutral000 = #121212 (가장 어두움) → neutral900 = #F7F7F7 (가장 밝음)
같은 이름(neutral000)이 모드별로 정반대의 의미를 가지므로, 같은 색상 이름이 두 모드에서 같은 의미론적 역할을 하도록 수정해야 합니다. 예를 들어 neutral000은 양쪽 모드에서 주 배경색으로 사용되어야 합니다.
| <color name="success100">#044836</color> | ||
| <color name="success300">#076E51</color> | ||
| <color name="success500">#0B9D71</color> | ||
| <color name="success700">#87DEC4</color> | ||
| <color name="success900">#D4F7EB</color> | ||
|
|
||
|
|
||
| <color name="warning100">#9E6500</color> | ||
| <color name="warning300">#C77E00</color> | ||
| <color name="warning500">#FFA500</color> | ||
| <color name="warning700">#FFCD75</color> | ||
| <color name="warning900">#FFF4BD</color> | ||
|
|
||
|
|
||
| <color name="danger100">#751A1A</color> | ||
| <color name="danger300">#A82424</color> | ||
| <color name="danger500">#E03131</color> | ||
| <color name="danger700">#F29B9B</color> | ||
| <color name="danger900">#FDECEC</color> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
Material Design 3 semantic color scale success warning danger levels
💡 Result:
Short answer
- Material Design 3 (M3) officially defines an Error semantic color family with four roles: error, on‑error, error‑container, on‑error‑container (and the same 1°/container/on roles for primary/secondary/tertiary/surface). (developer.android.com)
- M3 does not ship built‑in success/warning/danger (named “success”/“warning”/“danger”) token families in the core spec; implementers create those semantic families following the same pattern as Error (e.g., success, on‑success, success‑container, on‑success‑container; warning, on‑warning, warning‑container, on‑warning‑container). Many design systems and M3 implementations follow that convention. (designbusan.ai.kr)
Recommended token set (follow M3 naming/roles)
- {role} — filled/strong color (e.g., success / warning / danger).
- on-{role} — content color placed on {role}.
- {role}-container — softer background/container variant.
- on-{role}-container — content color on the container variant.
Usage rules (brief)
- Use the filled token for badges, icons, filled buttons and high‑attention UI.
- Use the container token for backgrounds, toasts, panels, input borders.
- Always provide matching on‑ tokens to guarantee accessible contrast. Follow the same contrast and accessibility rules used by M3 for Error tokens. (developer.android.com)
If you want, I can:
- generate a concrete 4‑token set (hex values) for success/warning/danger that follows M3 contrast guidance, or
- produce CSS/SCSS variable names and examples for using them in light/dark modes.
Citations:
- 1: https://developer.android.com/design/ui/wear/guides/styles/color/roles-tokens?utm_source=openai
- 2: https://designbusan.ai.kr/topics/art/material-design-3-%EC%83%89%EC%83%81-%EC%97%AD%ED%95%A0%EB%B2%88%EC%97%AD/?utm_source=openai
- 3: https://developer.android.com/design/ui/wear/guides/styles/color/roles-tokens?utm_source=openai
🌐 Web query:
Android Material Design color system tonal palette semantic colors
💡 Result:
Summary — Material (Android) color system: tonal palettes & semantic colors
-
Tonal palettes: Material 3 (Material You) expands each key color into a tonal palette of 13 tones (tones are lightness/ luminance steps generated using HCT/CAM-based utilities). The system uses five key tonal palettes (accent1/2/3, neutral1/2), producing 5 × 13 = 65 tonal values used across the UI. [1][2]
-
Key colors → roles: The five key palettes correspond to the core accents and neutrals (primary, secondary, tertiary, neutral, neutral-variant). Components pick specific tones from those palettes (e.g., primary/primaryContainer, surface roles) rather than fixed hex values, which enables accessible light/dark variants and dynamic theming. [1][2]
-
Semantic colors: Semantic (role) colors are color tokens with specific meaning (Error, OnPrimary, Surface, etc.). They are derived from tonal palettes (selected tones) so semantic roles maintain contrast and accessibility automatically; apps can also define custom semantic colors and harmonize them with dynamic palettes. [1][3]
-
Dynamic color & generation: On Android (Material You), a single source color (wallpaper or chosen color) is converted by Material Color Utilities into the five tonal palettes with specified hue/chroma modifications; Android exposes theme APIs (65 color attributes) and Theme Builder/Material Theme Builder tools to generate tokens for Compose/Views. [2][3]
Sources
- Android Developers — Material 3 / Color scheme & dynamic color. [1]
- Android Developers — Android color system (HCT, tonal palettes, semantic/surface roles). [2]
- Android Open Source Project — Material You dynamic color / tonal palette generation (accent1–3, neutral1–2 → 13 tones each = 65 colors). [3]
Would you like examples (palette tone numbers, sample hex outputs, or Compose code showing colorScheme usage)?
🌐 Web query:
Material Design 3 tonal palette 13 tones color tokens structure
💡 Result:
Summary — Material Design 3 (M3) tonal palette & token structure
-
Tonal palettes: M3 generates a tonal palette for each key color. There are six palettes used by the system: primary, secondary, tertiary, error, neutral, and neutral-variant. Each tonal palette contains 13 tones. [1][2]
-
The 13 tones (named by “tone” / lightness) are: 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100 (0 = black, 100 = white). [2][4]
-
Color tokens (semantic roles) pick specific tones from the appropriate tonal palette. Common mappings (light mode) — examples:
- primary = Primary40; onPrimary = Primary100; primaryContainer = Primary90; onPrimaryContainer = Primary10.
- secondary = Secondary40; onSecondary = Secondary100; secondaryContainer = Secondary90; onSecondaryContainer = Secondary10.
- tertiary = Tertiary40; onTertiary = Tertiary100; tertiaryContainer = Tertiary90; onTertiaryContainer = Tertiary10.
- error = Error40; onError = Error100; errorContainer = Error90; onErrorContainer = Error10.
- background = Neutral99; onBackground = Neutral10; surface = Neutral99; onSurface = Neutral10.
- surfaceVariant = NeutralVariant90; onSurfaceVariant = NeutralVariant30; outline = NeutralVariant50. [1][3]
-
Light vs dark: the same tonal palettes are used for both modes but the token-to-tone assignments change (e.g., primary uses a darker mid-tone in light mode and a lighter mid-tone in dark mode), so components pick different tones per mode while staying within the same palette. [1][2]
Sources
- Material 3 in Compose / Color scheme overview — Android Developers. [1]
- Dynamic color / tonal palettes (Android Open Source Project). [2]
- Practical token→tone mappings and tone list (M3 specification/examples). [3][4]
🌐 Web query:
Android material-color-utilities tonal palette generation levels
💡 Result:
Short answer — how levels work:
-
material-color-utilities (TonalPalette) generates colors by HCT tone values in the range 0–100 (tone = lightness). The API accepts a tone (0..100) to produce an ARGB color. [1]
-
Material You / Material 3 expands a single seed into five tonal palettes (accent1/2/3, neutral1/2). Each tonal palette contains 13 named levels (the Material/Android palette “stops”). Android’s dynamic-color resource set exposes 13 entries per palette; the platform documentation shows these indices and mapping conventions. [2][5]
-
Note about scales/units: Material tonal tones are 0..100 (0 = black, 100 = white). Android’s resource indices for dynamic palettes are often expressed as 0, 10, 50, 100, 200, ... 900, 1000 (Android historically uses 0..1000 ordering), so client code/platform maps between the two representations when generating resources. [2][3]
References
- TonalPalette (material-color-utilities) docs. [1]
- Android / Material You dynamic color & tonal-palette description (13 colors per palette; indices). [2]
- Chromium note on Material tonal scale vs Android 0..1000 scale. [3]
Material Design 3 시맨틱 컬러 패턴을 따르지 않습니다.
Material Design 3 표준에서는 시맨틱 컬러(Success, Warning, Danger)를 다음과 같이 정의해야 합니다:
{role}(filled color)on-{role}(content color on filled background){role}-container(soft background variant)on-{role}-container(content color on container)
현재 구현은 success100, success300 등의 5단계 인덱스 방식을 사용하고 있어, 필수적인 on-success, success-container, on-success-container 역할이 누락되어 있습니다. 이는 접근성 대비 보장과 컴포넌트 테마 일관성에 영향을 미칩니다. M3 의미론적 컬러 구조를 따르도록 수정하세요.
🤖 Prompt for AI Agents
In presentation/src/main/res/values-night/colors.xml around lines 41-59, the
file uses numeric shade tokens (success100/300/500/700/900 etc.) instead of
Material 3 semantic color roles; replace those groups with the M3 semantic
entries for each role: {role} (filled), on-{role} (content on filled),
{role}-container (container/background), and on-{role}-container (content on
container). For success, warning, and danger add lines defining success,
on-success, success-container, on-success-container; warning, on-warning,
warning-container, on-warning-container; danger, on-danger, danger-container,
on-danger-container, using colors that preserve the current visual palette (map
existing hexes to the closest semantic roles) and ensure on-* colors meet
contrast requirements (e.g., use white or dark text as appropriate). Keep or
move the numeric shade values into a separate legacy token section if you need
them for components, but ensure all components are switched to the new semantic
names.
#️⃣ 이슈 번호
📝 작업 내용
📸 스크린샷 (선택 사항)
🚩 리뷰 요구사항
일단 typography.xml에서 name을 피그마에 있는 형태로 그대로 사용했습니다. 혹시 더 좋은 네이밍이 있으면 추천 부탁드립니다.
색상 정의 후 테스트 중, attrs로 정의한 부분을 이용해 backgraound 및 textColor 정의 시java.lang.UnsupportedOperationException: Failed to resolve attribute오류로 빌드에 실패하는 문제가 발생했습니다. 해결을 위해 다양한 방법을 시도했지만, 현재 오류 해결에 실패하여, 임시적으로?attrs/사용을 제외한 상태로 테스트를 진행했습니다. 최대한 빨리 원인을 찾도록 하겠습니다.오류를 발견해 수정했습니다. 다만 presentation 디렉토리의 themes.xml를 정의한 결과 다크모드에서는 정상적 작동 / 라이트 모드는 튕기는 문제가 발생하였는데, 추가로 app(최상위) 디렉토리의 themes.xml에 내용을 정의한 결과 둘 다 정상적으로 작동되는 것을 확인했습니다. -> 문제 없음
🏁 체크리스트
Summary by CodeRabbit
릴리스 노트
✏️ Tip: You can customize this high-level summary in your review settings.