feat(foundation): update theme (#1506)

* feat(foundation): add txt-black-pure

* feat(foundation): add grey800_90 color

* feat(dark-theme): change reference color of bg-lounge from grey900_90 to grey800_90

* chore(changeset): add changeset

Author: sungik-choi

.changeset/tidy-scissors-melt.md

@@ -0,0 +1,6 @@
+---
+"@channel.io/bezier-react": minor
+---
+
+- Add semantic color `txt-black-pure`
+- Add palette `grey800_80` and modify `bg-lounge` color to reference it

packages/bezier-react/src/foundation/Colors/Palette/index.ts

@@ -119,6 +119,7 @@ type BaseColorfulPaletteKey300_20 = `${BaseColorfulPaletteKey300}_20`
 type AlphaGreyKey =
   | `${BasePaletteKey.Grey}900_90`
   | `${BasePaletteKey.Grey}850_80`
+  | `${BasePaletteKey.Grey}800_90`
   | `${BasePaletteKey.Grey}800_80`
   | `${BasePaletteKey.Grey}700_80`
   | `${BasePaletteKey.Grey}200_80`
@@ -256,6 +257,7 @@ export const Palette: PaletteType = {
   // Alpha Grey
   grey900_90: getAlphaHex(PaletteWithoutAlpha.grey900, 90),
   grey850_80: getAlphaHex(PaletteWithoutAlpha.grey850, 80),
+  grey800_90: getAlphaHex(PaletteWithoutAlpha.grey800, 90),
   grey800_80: getAlphaHex(PaletteWithoutAlpha.grey800, 80),
   grey700_80: getAlphaHex(PaletteWithoutAlpha.grey700, 80),
   grey200_80: getAlphaHex(PaletteWithoutAlpha.grey200, 80),

packages/bezier-react/src/foundation/Colors/Theme/presets/DarkTheme.ts

@@ -12,7 +12,7 @@ const DarkTheme: ThemeType = {
   'bg-navi': Palette.grey800_80,
   'bg-header': Palette.grey800,
   'bg-header-float': Palette.grey800_80,
-  'bg-lounge': Palette.grey900_90,
+  'bg-lounge': Palette.grey800_90,
 
   // Mono Background
   'bg-black-darkest': Palette.white_60,
@@ -99,6 +99,7 @@ const DarkTheme: ThemeType = {
   'bgtxt-navy-lightest': Palette.navy300_20,
 
   // Text
+  'txt-black-pure': Palette.white,
   'txt-black-darkest': Palette.white_80,
   'txt-black-darker': Palette.white_60,
   'txt-black-dark': Palette.white_40,

packages/bezier-react/src/foundation/Colors/Theme/presets/LightTheme.ts

@@ -100,6 +100,7 @@ const LightTheme: ThemeType = {
   'bgtxt-navy-lightest': Palette.navy400_10,
 
   // Text
+  'txt-black-pure': Palette.black,
   'txt-black-darkest': Palette.black_85,
   'txt-black-darker': Palette.black_60,
   'txt-black-dark': Palette.black_40,

packages/bezier-react/src/foundation/Colors/Theme/types/SemanticNames.ts

@@ -28,6 +28,7 @@ type ElevationBackgroundColor =
   | 'bg-white-low'
 
 type TextColor =
+  | `txt-${BasePaletteKey.Black}-pure`
   | `txt-${BasePaletteKey.Black}-darkest`
   | `txt-${BasePaletteKey.Black}-darker`
   | `txt-${BasePaletteKey.Black}-dark`