feat: 새로운 컬러 토큰을 추가한다

pedaling · Sep 24, 2024 · 5307703 · 5307703
1 parent 4b04717
commit 5307703
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 0 deletions.
diff --git a/packages/vibrant-theme/src/lib/theme/darkModeColors.ts b/packages/vibrant-theme/src/lib/theme/darkModeColors.ts
@@ -30,6 +30,10 @@ export const darkModeColors: Colors = {
   surface3: palettes.globalBlack,
   surface4: palettes.neutral['40'],
   surfaceOnMedia: `${palettes.neutral['50']}66`,
+  surfaceUltraThin: `${palettes.neutral['20']}66`,
+  surfaceThin: `${palettes.neutral['20']}99`,
+  surfaceRegular: `${palettes.neutral['15']}bf`,
+  surfaceThick: `${palettes.neutral['10']}cc`,
   disable: palettes.whiteAlpha['15'],
   outline1: palettes.whiteAlpha['8'],
   outline2: palettes.whiteAlpha['15'],

diff --git a/packages/vibrant-theme/src/lib/theme/lightModeColors.ts b/packages/vibrant-theme/src/lib/theme/lightModeColors.ts
@@ -29,6 +29,10 @@ export const lightModeColors: Colors = {
   surface2: palettes.globalWhite,
   surface3: palettes.globalWhite,
   surface4: palettes.neutral['80'],
+  surfaceUltraThin: `${palettes.neutral['90']}66`,
+  surfaceThin: `${palettes.neutral['90']}99`,
+  surfaceRegular: `${palettes.neutral['95']}cc`,
+  surfaceThick: `${palettes.neutral['95']}f2`,
   surfaceOnMedia: `${palettes.neutral['50']}33`,
   disable: palettes.blackAlpha['10'],
   outline1: palettes.blackAlpha['5'],

diff --git a/packages/vibrant-theme/src/types/Colors.ts b/packages/vibrant-theme/src/types/Colors.ts
@@ -26,6 +26,10 @@ export const colorTokens = [
   'surface3',
   'surface4',
   'surfaceOnMedia',
+  'surfaceUltraThin',
+  'surfaceThin',
+  'surfaceRegular',
+  'surfaceThick',
   'disable',
   'outline1',
   'outline2',
@@ -94,6 +98,10 @@ export const BaseColorOnColorMap: { [color in BaseColorToken]: OnColorToken } =
   surface3: 'onView1',
   surface4: 'onView1',
   surfaceOnMedia: 'onView1',
+  surfaceUltraThin: 'onView1',
+  surfaceThin: 'onView1',
+  surfaceRegular: 'onView1',
+  surfaceThick: 'onView1',
   disable: 'onView3',
   background: 'onView1',
   inverseSurface: 'onInverseSurface',