Add new palette & text specs (#1228)

* feat: add new Pallete & background colors

* feat: add new text specs

* chore: add changeset

* fix: lint typo error

* docs: add more details on changeset

Author: leejiwoo2002

.changeset/heavy-rivers-punch.md

@@ -0,0 +1,15 @@
+---
+"@channel.io/bezier-react": patch
+---
+
+add new text/palette specs
+- add 2 color palette
+  - grey50_80
+  - grey850_80
+- add 2 text specs
+  - size30
+  - size36
+- add 3 semantic colors
+  - bg-grey-dim-lightest
+  - light: grey50_80
+  - dark: grey850_80

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

@@ -115,11 +115,13 @@ type BaseColorfulPaletteKey300_20 = `${BaseColorfulPaletteKey300}_20`
 
 type AlphaGreyKey =
   | `${BasePaletteKey.Grey}900_90`
+  | `${BasePaletteKey.Grey}850_80`
   | `${BasePaletteKey.Grey}800_80`
   | `${BasePaletteKey.Grey}700_80`
   | `${BasePaletteKey.Grey}200_80`
   | `${BasePaletteKey.Grey}100_90`
   | `${BasePaletteKey.Grey}100_80`
+  | `${BasePaletteKey.Grey}50_80`
 
 type AlphaWhiteKey =
   | `${BasePaletteKey.White}_90`
@@ -250,11 +252,13 @@ export const Palette: PaletteType = {
 
   // Alpha Grey
   grey900_90: getAlphaHex(PaletteWithoutAlpha.grey900, 90),
+  grey850_80: getAlphaHex(PaletteWithoutAlpha.grey850, 80),
   grey800_80: getAlphaHex(PaletteWithoutAlpha.grey800, 80),
   grey700_80: getAlphaHex(PaletteWithoutAlpha.grey700, 80),
   grey200_80: getAlphaHex(PaletteWithoutAlpha.grey200, 80),
   grey100_90: getAlphaHex(PaletteWithoutAlpha.grey100, 90),
   grey100_80: getAlphaHex(PaletteWithoutAlpha.grey100, 80),
+  grey50_80: getAlphaHex(PaletteWithoutAlpha.grey50, 80),
 
   // Alpha White
   white_90: getAlphaHex(PaletteWithoutAlpha.white, 90),

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

@@ -24,10 +24,14 @@ const DarkTheme: ThemeType = {
   'bg-black-lightest': Palette.white_5,
 
   'bg-grey-dark': Palette.grey500,
+  'bg-grey-dim-lightest': Palette.grey850_80,
   'bg-grey-light': Palette.grey700,
   'bg-grey-lighter': Palette.grey800,
   'bg-grey-lightest': Palette.grey850,
 
+  'bg-white-dim-dark': Palette.black_60,
+  'bg-white-dim-light': Palette.black_20,
+
   // Colorful text and background
   'bgtxt-blue-dark': Palette.blue400,
   'bgtxt-blue-normal': Palette.blue300,

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

@@ -25,10 +25,14 @@ const LightTheme: ThemeType = {
 
   'bg-grey-darkest': Palette.grey900,
   'bg-grey-dark': Palette.grey500,
+  'bg-grey-dim-lightest': Palette.grey50_80,
   'bg-grey-light': Palette.grey200,
   'bg-grey-lighter': Palette.grey100,
   'bg-grey-lightest': Palette.grey50,
 
+  'bg-white-dim-dark': Palette.white_60,
+  'bg-white-dim-light': Palette.white_20,
+
   // Colorful text and background
   'bgtxt-blue-dark': Palette.blue500,
   'bgtxt-blue-normal': Palette.blue400,

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

@@ -8,6 +8,9 @@ type MonoBackgroundColor =
   | `bg-${BaseMonoPaletteKey}-light`
   | `bg-${BaseMonoPaletteKey}-lighter`
   | `bg-${BaseMonoPaletteKey}-lightest`
+  | `bg-${BasePaletteKey.Grey}-dim-lightest`
+  | `bg-${BasePaletteKey.White}-dim-dark`
+  | `bg-${BasePaletteKey.White}-dim-light`
 
 type LayoutBackgroundColor =
   | 'bg-gnb'

packages/bezier-react/src/foundation/Typography.ts

@@ -12,6 +12,8 @@ export enum TypoAbsoluteNumber {
   Typo18 = 1.8,
   Typo22 = 2.2,
   Typo24 = 2.4,
+  Typo30 = 3.0,
+  Typo36 = 3.6,
 }
 
 export enum LineHeightAbsoluteNumber {
@@ -22,6 +24,8 @@ export enum LineHeightAbsoluteNumber {
   Lh24 = 2.4,
   Lh28 = 2.8,
   Lh32 = 3.2,
+  Lh36 = 3.6,
+  Lh44 = 4.4,
 }
 
 const Size11 = css`
@@ -79,6 +83,18 @@ const Size24 = css`
   letter-spacing: -0.4px;
 `
 
+const Size30 = css`
+  font-size: ${TypoAbsoluteNumber.Typo30}rem;
+  line-height: ${LineHeightAbsoluteNumber.Lh36}rem;
+  letter-spacing: -0.4px;
+`
+
+const Size36 = css`
+  font-size: ${TypoAbsoluteNumber.Typo36}rem;
+  line-height: ${LineHeightAbsoluteNumber.Lh44}rem;
+  letter-spacing: -0.4px;
+`
+
 export type TypographyType = ReturnType<typeof css>
 
 export const Typography = {
@@ -92,4 +108,6 @@ export const Typography = {
   Size18,
   Size22,
   Size24,
+  Size30,
+  Size36,
 }