From 2dd80e2c013991fba693a4189ca4321a91704cc1 Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Sun, 16 Mar 2025 11:04:24 +0900
Subject: [PATCH 1/3] wip: setup structure

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/provider.tsx             |  65 +++++
 packages/tailwindcss-plugin/krds-plugin.js | 285 ---------------------
 2 files changed, 65 insertions(+), 285 deletions(-)
 create mode 100644 packages/core/lib/provider.tsx

diff --git a/packages/core/lib/provider.tsx b/packages/core/lib/provider.tsx
new file mode 100644
index 0000000..5e6db8f
--- /dev/null
+++ b/packages/core/lib/provider.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+
+export type ThemeMode = 'light' | 'dark' | 'high-contrast' | 'system';
+
+export type PrimitiveToken = {};
+
+export type SemanticToken = {};
+
+export type ComponentToken = {};
+
+export type Locale = 'ko' | 'en';
+
+export type TextSize = 'small' | 'medium' | 'large';
+
+export type DesignToken = {
+  primitive: PrimitiveToken;
+  semantic: SemanticToken;
+  component: ComponentToken;
+};
+
+export type DesignTokenProps = {
+  primitive?: Partial<PrimitiveToken>;
+  semantic?: Partial<SemanticToken>;
+  component?: Partial<ComponentToken>;
+};
+
+export type ContextProps = {
+  token: DesignToken;
+  mode: ThemeMode;
+  locale: Locale;
+  textSize: TextSize;
+
+  setThemeMode: (mode: ThemeMode) => void;
+  setLocale: (locale: Locale) => void;
+  setTextSize: (textSize: TextSize) => void;
+};
+
+export const Context = React.createContext<ContextProps>({} as ContextProps);
+
+export const ContextProvider: React.FC<{
+  token: DesignTokenProps;
+  children: React.ReactNode;
+}> = ({ token, children }) => {
+  const [themeMode, setThemeMode] = useState<ThemeMode>('system');
+  const [locale, setLocale] = useState<Locale>('ko');
+  const [textSize, setTextSize] = useState<TextSize>('medium');
+
+  const context: ContextProps = {
+    token: { ...token },
+    mode: themeMode,
+    locale: locale,
+    textSize: textSize,
+    setThemeMode: (mode) => setThemeMode(mode),
+    setLocale: (locale) => setLocale(locale),
+    setTextSize: (textSize) => setTextSize(textSize),
+  };
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+};
+
+export const useContext = () => {
+  return React.useContext(Context);
+};
+
+export default ContextProvider;
diff --git a/packages/tailwindcss-plugin/krds-plugin.js b/packages/tailwindcss-plugin/krds-plugin.js
index 782df9b..056ec22 100644
--- a/packages/tailwindcss-plugin/krds-plugin.js
+++ b/packages/tailwindcss-plugin/krds-plugin.js
@@ -5,7 +5,6 @@ module.exports = plugin(
   {
     theme: {
       screens: {
-        // If you need more info about this, check https://uiux.egovframe.go.kr/guide/style/style_05.html
         // ~600px: mobile
         mobile: '360px',
         // 601px ~ 1024px: tablet
@@ -126,290 +125,6 @@ module.exports = plugin(
             80: '#0C1F4D',
             90: '#040A1A',
           },
-          navy: {
-            5: '#F1F1F9',
-            10: '#D3D5ED',
-            20: '#A7AEDA',
-            30: '#7B82C8',
-            40: '#4F57B5',
-            50: '#232EA3',
-            60: '#1C25B2',
-            70: '#151C62',
-            80: '#0E1241',
-            90: '#070921',
-          },
-          blue: {
-            5: '#F0F3FF',
-            10: '#D2DCFE',
-            20: '#A4B8FE',
-            30: '#7795FD',
-            40: '#4A71FC',
-            50: '#1C4EFC',
-            60: '#163ECA',
-            70: '#112F97',
-            80: '#0B1F65',
-            90: '#061032',
-          },
-          'royal-blue': {
-            5: '#EBF5FF',
-            10: '#C7E3FF',
-            20: '#8FC8FF',
-            30: '#56ACFF',
-            40: '#0D76AE',
-            50: '#0D76AE',
-            60: '#0A5AA6',
-            70: '#04407F',
-            80: '#002B55',
-            90: '#00152A',
-          },
-          'sky-blue': {
-            5: '#F0F8FF',
-            10: '#D4F3FE',
-            20: '#A9E6FC',
-            30: '#7DDAFB',
-            40: '#52CDFA',
-            50: '#27C1F8',
-            60: '#1F9AC6',
-            70: '#177495',
-            80: '#0F4D63',
-            90: '#082732',
-          },
-          aqua: {
-            5: '#E7FDFD',
-            10: '#CEFBFB',
-            20: '#9CF6F6',
-            30: '#6BF2F2',
-            40: '#39EDED',
-            50: '#08E8E8',
-            60: '#06BABA',
-            70: '#058C8C',
-            80: '#035D5D',
-            90: '#022F2F',
-          },
-          teal: {
-            5: '#EDF8F8',
-            10: '#CEEEED',
-            20: '#9DD7D7',
-            30: '#6DC3C3',
-            40: '#3CAEAE',
-            50: '#0B9B98',
-            60: '#097C7C',
-            70: '#075D5D',
-            80: '#043E3E',
-            90: '#021F1F',
-          },
-          green: {
-            5: '#EEF7EE',
-            10: '#CCE6CC',
-            20: '#99CC99',
-            30: '#66B366',
-            40: '#339933',
-            50: '#008000',
-            60: '#006600',
-            70: '#004D00',
-            80: '#003300',
-            90: '#001A00',
-          },
-          'lime-green': {
-            5: '#F3FCF3',
-            10: '#D6F5D6',
-            20: '#ADEBAD',
-            30: '#84E184',
-            40: '#5BD75B',
-            50: '#32CD32',
-            60: '#28A428',
-            70: '#1E7B1E',
-            80: '#145214',
-            90: '#0A290A',
-          },
-          lime: {
-            5: '#F7FFEA',
-            10: '#EEFEDA',
-            20: '#DCFFAB',
-            30: '#CEFE83',
-            40: '#BCF95D',
-            50: '#A1F524',
-            60: '#8BD013',
-            70: '#6A9B16',
-            80: '#476912',
-            90: '#23570D',
-          },
-          olive: {
-            5: '#F8F8ED',
-            10: '#EBEBCC',
-            20: '#D6D699',
-            30: '#C2C266',
-            40: '#ADAD33',
-            50: '#999900',
-            60: '#7A7A00',
-            70: '#5C5C00',
-            80: '#3D3D00',
-            90: '#1F1F00',
-          },
-          yellow: {
-            5: '#FFFBE5',
-            10: '#FFF4CC',
-            20: '#FFEE99',
-            30: '#FFE566',
-            40: '#FFD033',
-            50: '#FFD400',
-            60: '#CCA300',
-            70: '#A38200',
-            80: '#665200',
-            90: '#332900',
-          },
-          gold: {
-            5: '#FDF7E9',
-            10: '#FAEFD3',
-            20: '#F5DFA7',
-            30: '#F1CF7A',
-            40: '#ECBF4E',
-            50: '#E7AF22',
-            60: '#B98C1B',
-            70: '#8B6915',
-            80: '#5C460E',
-            90: '#2E2307',
-          },
-          'saddle-brown': {
-            5: '#F8F2ED',
-            10: '#ECDCCD',
-            20: '#D9B99C',
-            30: '#C6966A',
-            40: '#B37439',
-            50: '#A05107',
-            60: '#804106',
-            70: '#603104',
-            80: '#402003',
-            90: '#201001',
-          },
-          brown: {
-            5: '#F9F2F0',
-            10: '#EED8D3',
-            20: '#DCB0A7',
-            30: '#CB897C',
-            40: '#B96150',
-            50: '#A83A24',
-            60: '#862E1D',
-            70: '#652316',
-            80: '#43170E',
-            90: '#220C07',
-          },
-          'dark-red': {
-            5: '#FAEFF0',
-            10: '#F1CED0',
-            20: '#E39D9F',
-            30: '#D56C6F',
-            40: '#C73A3F',
-            50: '#B9090F',
-            60: '#94070C',
-            70: '#6F0509',
-            80: '#4A0306',
-            90: '#250203',
-          },
-          red: {
-            5: '#FEF1F1',
-            10: '#FCCBCC',
-            20: '#F99999',
-            30: '#F56666',
-            40: '#F23B3B',
-            50: '#EE0000',
-            60: '#BE0000',
-            70: '#8F0000',
-            80: '#5F0000',
-            90: '#300000',
-          },
-          orange: {
-            5: '#FFF4F0',
-            10: '#FFD4CC',
-            20: '#FFB899',
-            30: '#FF9C66',
-            40: '#FF8033',
-            50: '#FF6400',
-            60: '#CC5000',
-            70: '#993C00',
-            80: '#662800',
-            90: '#331400',
-          },
-          coral: {
-            5: '#FFF8F5',
-            10: '#FFE6DC',
-            20: '#FFCDB8',
-            30: '#FFB495',
-            40: '#FF9B71',
-            50: '#FE8052',
-            60: '#CB6642',
-            70: '#984D31',
-            80: '#663321',
-            90: '#331A10',
-          },
-          salmon: {
-            5: '#FFF1F0',
-            10: '#FFE3E0',
-            20: '#FFCBC1',
-            30: '#FEACA3',
-            40: '#FE9184',
-            50: '#FD7565',
-            60: '#CA5E51',
-            70: '#97463D',
-            80: '#652F28',
-            90: '#321714',
-          },
-          'hot-pink': {
-            5: '#FFF5FC',
-            10: '#FFE3F5',
-            20: '#FFC4EC',
-            30: '#FFAAE2',
-            40: '#FF8DD9',
-            50: '#FF6FCE',
-            60: '#CC59A5',
-            70: '#99437C',
-            80: '#662C53',
-            90: '#331629',
-          },
-          pink: {
-            5: '#FFF0F8',
-            10: '#FFD0E9',
-            20: '#FFA1D4',
-            30: '#FF72BE',
-            40: '#FF43A9',
-            50: '#FF1493',
-            60: '#CC1076',
-            70: '#990C58',
-            80: '#66083B',
-            90: '#33041D',
-          },
-          fuchsia: {
-            5: '#FDF2FD',
-            10: '#F901F9',
-            20: '#F2A3F2',
-            30: '#EC75EC',
-            40: '#E547E5',
-            50: '#DF19DF',
-          },
-          purple: {
-            5: '#F5EEF7',
-            10: '#E1CCE6',
-            20: '#C499CC',
-            30: '#A666B3',
-            40: '#893399',
-            50: '#600080',
-            60: '#4D0066',
-            70: '#3A004D',
-            80: '#260033',
-            90: '#13001A',
-          },
-          'blue-violet': {
-            5: '#F4EFFA',
-            10: '#DED1F1',
-            20: '#BDA2E3',
-            30: '#9B74D4',
-            40: '#7A45C6',
-            50: '#5917B8',
-            60: '#471293',
-            70: '#350E6E',
-            80: '#24094A',
-            90: '#120525',
-          },
         },
         fontSize: {
           'display-l': ['66px', { lineHeight: '150%', letterSpacing: '1px' }],

From 25779eacbedc3db6e5cb7817ed60bd0547a64948 Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Sun, 16 Mar 2025 15:16:17 +0900
Subject: [PATCH 2/3] feat: apply color 1.0

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/colors/color.ts          | 802 ++++++++++++---------
 packages/core/lib/colors/color.type.ts     | 223 ------
 packages/core/lib/components/Body.tsx      |   5 +-
 packages/core/lib/components/Detail.tsx    |   5 +-
 packages/core/lib/components/Display.tsx   |   5 +-
 packages/core/lib/components/Heading.tsx   |   5 +-
 packages/core/lib/components/Label.tsx     |   6 +-
 packages/core/lib/components/Link.tsx      |   6 +-
 packages/core/lib/components/Spinner.tsx   |  11 +-
 packages/core/lib/components/Title.tsx     |   5 +-
 packages/core/lib/provider.tsx             |  30 +-
 packages/tailwindcss-plugin/krds-plugin.js | 520 ++++++-------
 stories/core/color.stories.tsx             | 648 ++++++-----------
 13 files changed, 981 insertions(+), 1290 deletions(-)
 delete mode 100644 packages/core/lib/colors/color.type.ts

diff --git a/packages/core/lib/colors/color.ts b/packages/core/lib/colors/color.ts
index f173b65..2eaec57 100644
--- a/packages/core/lib/colors/color.ts
+++ b/packages/core/lib/colors/color.ts
@@ -1,368 +1,464 @@
-export const colors = {
-  primary: '#246BEB',
-  primary0: '#FFFFFF',
-  primary5: '#EFF5FF',
-  primary10: '#D3E1FB',
-  primary20: '#A7C4F7',
-  primary30: '#7CA6F3',
-  primary40: '#5089EF',
-  primary50: '#246BEB',
-  primary60: '#1D56BC',
-  primary70: '#16408D',
-  primary80: '#0E2B5E',
-  primary90: '#07152F',
-  primary100: '#000000',
-
-  secondary: '#003675',
-  secondary0: '#FFFFFF',
-  secondary5: '#EDF1F5',
-  secondary10: '#CDD7E4',
-  secondary20: '#B4C4D6',
-  secondary30: '#99B0CB',
-  secondary40: '#2A5C96',
-  secondary50: '#003675',
-  secondary60: '#002B5E',
-  secondary70: '#002046',
-  secondary80: '#00162F',
-  secondary90: '#000B17',
-  secondary100: '#000000',
-
-  gray0: '#FFFFFF',
-  gray5: '#F8F8F8',
-  gray10: '#F0F0F0',
-  gray20: '#E4E4E4',
-  gray30: '#D8D8D8',
-  gray40: '#C6C6C6',
-  gray50: '#8E8E8E',
-  gray60: '#717171',
-  gray70: '#555555',
-  gray80: '#2D2D2D',
-  gray90: '#1D1D1D',
-  gray100: '#000000',
-
-  point: '#E71825',
-  point0: '#FFFFFF',
-  point5: '#FDF2F3',
-  point10: '#FBD6D8',
-  point20: '#F5A3A8',
-  point30: '#F1747C',
-  point40: '#EC4651',
-  point50: '#E71825',
-  point60: '#B9131E',
-  point70: '#8B0E16',
-  point80: '#5C0A0F',
-  point90: '#2E0507',
-  point100: '#000000',
-
-  danger: '#EB003B',
-  danger5: '#FEECF0',
-  danger10: '#FCD4DE',
-  danger20: '#F799B1',
-  danger30: '#F36689',
-  danger40: '#EF3E5E',
-  danger50: '#EB003B',
-  danger60: '#D50136',
-  danger70: '#8D0023',
-  danger80: '#5E0018',
-  danger90: '#2F000C',
-
-  warning: '#FFB724',
-  warning5: '#FFF8E9',
-  warning10: '#FFEAC1',
-  warning20: '#FFE2A7',
-  warning30: '#FFD47C',
-  warning40: '#FFC550',
-  warning50: '#FFB724',
-  warning60: '#98690A',
-  warning70: '#66490E',
-  warning80: '#4D370B',
-  warning90: '#332507',
-
-  success: '#008A1E',
-  success5: '#EEF7F0',
-  success10: '#CEE9D4',
-  success20: '#B2DCBB',
-  success30: '#8CCA99',
-  success40: '#33A14B',
-  success50: '#008A1E',
-  success60: '#006E18',
-  success70: '#005312',
-  success80: '#00370C',
-  success90: '#002207',
-
-  info: '#2768FF',
-  info5: '#E9F0FF',
-  info10: '#D4E1FF',
-  info20: '#A9C3FF',
-  info30: '#7DA4FF',
-  info40: '#5286FF',
-  info50: '#2768FF',
-  info60: '#1F53CC',
-  info70: '#173E99',
-  info80: '#0C1F4D',
-  info90: '#040A1A',
-
-  navy5: '#F1F1F9',
-  navy10: '#D3D5ED',
-  navy20: '#A7AEDA',
-  navy30: '#7B82C8',
-  navy40: '#4F57B5',
-  navy50: '#232EA3',
-  navy60: '#1C25B2',
-  navy70: '#151C62',
-  navy80: '#0E1241',
-  navy90: '#070921',
-
-  blue5: '#F0F3FF',
-  blue10: '#D2DCFE',
-  blue20: '#A4B8FE',
-  blue30: '#7795FD',
-  blue40: '#4A71FC',
-  blue50: '#1C4EFC',
-  blue60: '#163ECA',
-  blue70: '#112F97',
-  blue80: '#0B1F65',
-  blue90: '#061032',
-
-  royalBlue5: '#EBF5FF',
-  royalBlue10: '#C7E3FF',
-  royalBlue20: '#8FC8FF',
-  royalBlue30: '#56ACFF',
-  royalBlue40: '#0D76AE',
-  royalBlue50: '#0D76AE',
-  royalBlue60: '#0A5AA6',
-  royalBlue70: '#04407F',
-  royalBlue80: '#002B55',
-  royalBlue90: '#00152A',
+// Color definitions for light and 'high-contrast' modes
+export type ColorThemeMode = 'light' | 'high-contrast';
 
-  skyBlue5: '#F0F8FF',
-  skyBlue10: '#D4F3FE',
-  skyBlue20: '#A9E6FC',
-  skyBlue30: '#7DDAFB',
-  skyBlue40: '#52CDFA',
-  skyBlue50: '#27C1F8',
-  skyBlue60: '#1F9AC6',
-  skyBlue70: '#177495',
-  skyBlue80: '#0F4D63',
-  skyBlue90: '#082732',
-
-  aqua5: '#E7FDFD',
-  aqua10: '#CEFBFB',
-  aqua20: '#9CF6F6',
-  aqua30: '#6BF2F2',
-  aqua40: '#39EDED',
-  aqua50: '#08E8E8',
-  aqua60: '#06BABA',
-  aqua70: '#058C8C',
-  aqua80: '#035D5D',
-  aqua90: '#022F2F',
-
-  teal5: '#EDF8F8',
-  teal10: '#CEEEED',
-  teal20: '#9DD7D7',
-  teal30: '#6DC3C3',
-  teal40: '#3CAEAE',
-  teal50: '#0B9B98',
-  teal60: '#097C7C',
-  teal70: '#075D5D',
-  teal80: '#043E3E',
-  teal90: '#021F1F',
-
-  green5: '#EEF7EE',
-  green10: '#CCE6CC',
-  green20: '#99CC99',
-  green30: '#66B366',
-  green40: '#339933',
-  green50: '#008000',
-  green60: '#006600',
-  green70: '#004D00',
-  green80: '#003300',
-  green90: '#001A00',
-
-  limeGreen5: '#F3FCF3',
-  limeGreen10: '#D6F5D6',
-  limeGreen20: '#ADEBAD',
-  limeGreen30: '#84E184',
-  limeGreen40: '#5BD75B',
-  limeGreen50: '#32CD32',
-  limeGreen60: '#28A428',
-  limeGreen70: '#1E7B1E',
-  limeGreen80: '#145214',
-  limeGreen90: '#0A290A',
-
-  lime5: '#F7FEA',
-  lime10: '#EEFEDA',
-  lime20: '#DCFFAB',
-  lime30: '#CEFE83',
-  lime40: '#BCF95D',
-  lime50: '#A1F524',
-  lime60: '#8BD013',
-  lime70: '#6A9B16',
-  lime80: '#476912',
-  lime90: '#23570D',
-
-  olive5: '#F8F8ED',
-  olive10: '#EBEBCC',
-  olive20: '#D6D699',
-  olive30: '#C2C266',
-  olive40: '#ADAD33',
-  olive50: '#999900',
-  olive60: '#7A7A00',
-  olive70: '#5C5C00',
-  olive80: '#3D3D00',
-  olive90: '#1F1F00',
-
-  yellow5: '#FFFBE5',
-  yellow10: '#FFF4CC',
-  yellow20: '#FFEE99',
-  yellow30: '#FFE566',
-  yellow40: '#FFD033',
-  yellow50: '#FFD400',
-  yellow60: '#CCA300',
-  yellow70: '#A38200',
-  yellow80: '#665200',
-  yellow90: '#332900',
+// Define all available color variables
+export const colors = {
+  'primary-5': {
+    light: '#ecf2fe',
+    'high-contrast': '#ecf2fe',
+  },
+  'primary-10': {
+    light: '#d8e5fd',
+    'high-contrast': '#d8e5fd',
+  },
+  'primary-20': {
+    light: '#b1cefb',
+    'high-contrast': '#b1cefb',
+  },
+  'primary-30': {
+    light: '#86aff9',
+    'high-contrast': '#86aff9',
+  },
+  'primary-40': {
+    light: '#4c87f6',
+    'high-contrast': '#4c87f6',
+  },
+  'primary-50': {
+    light: '#256ef4',
+    'high-contrast': '#256ef4',
+  },
+  'primary-60': {
+    light: '#0b50d0',
+    'high-contrast': '#0b50d0',
+  },
+  'primary-70': {
+    light: '#083891',
+    'high-contrast': '#083891',
+  },
+  'primary-80': {
+    light: '#052561',
+    'high-contrast': '#052561',
+  },
+  'primary-90': {
+    light: '#03163a',
+    'high-contrast': '#03163a',
+  },
+  'primary-95': {
+    light: '#020f27',
+    'high-contrast': '#020f27',
+  },
 
-  gold5: '#FDF7E9',
-  gold10: '#FAEFD3',
-  gold20: '#F5DFA7',
-  gold30: '#F1CF7A',
-  gold40: '#ECBF4E',
-  gold50: '#E7AF22',
-  gold60: '#B98C1B',
-  gold70: '#8B6915',
-  gold80: '#5C460E',
-  gold90: '#2E2307',
+  'secondary-5': {
+    light: '#eef2f7',
+    'high-contrast': '#edf6f8',
+  },
+  'secondary-10': {
+    light: '#d6e0eb',
+    'high-contrast': '#d5ebf1',
+  },
+  'secondary-20': {
+    light: '#bacbde',
+    'high-contrast': '#abd8e3',
+  },
+  'secondary-30': {
+    light: '#90b0d5',
+    'high-contrast': '#75c0d1',
+  },
+  'secondary-40': {
+    light: '#6b96c7',
+    'high-contrast': '#3d9fb8',
+  },
+  'secondary-50': {
+    light: '#346fb2',
+    'high-contrast': '#268097',
+  },
+  'secondary-60': {
+    light: '#1c589c',
+    'high-contrast': '#1f687a',
+  },
+  'secondary-70': {
+    light: '#063a74',
+    'high-contrast': '#17505e',
+  },
+  'secondary-80': {
+    light: '#052b57',
+    'high-contrast': '#113b45',
+  },
+  'secondary-90': {
+    light: '#031f3f',
+    'high-contrast': '#0e3139',
+  },
+  'secondary-95': {
+    light: '#02162c',
+    'high-contrast': '#091f25',
+  },
 
-  saddleBrown5: '#F8F2ED',
-  saddleBrown10: '#ECDCCD',
-  saddleBrown20: '#D9B99C',
-  saddleBrown30: '#C6966A',
-  saddleBrown40: '#B37439',
-  saddleBrown50: '#A05107',
-  saddleBrown60: '#804106',
-  saddleBrown70: '#603104',
-  saddleBrown80: '#402003',
-  saddleBrown90: '#201001',
+  'gray-0': {
+    light: '#ffffff',
+    'high-contrast': '#ffffff',
+  },
+  'gray-5': {
+    light: '#f4f5f6',
+    'high-contrast': '#f4f5f6',
+  },
+  'gray-10': {
+    light: '#e6e8ea',
+    'high-contrast': '#e6e8ea',
+  },
+  'gray-20': {
+    light: '#cdd1d5',
+    'high-contrast': '#cdd1d5',
+  },
+  'gray-30': {
+    light: '#b1b8be',
+    'high-contrast': '#b1b8be',
+  },
+  'gray-40': {
+    light: '#8a949e',
+    'high-contrast': '#8a949e',
+  },
+  'gray-50': {
+    light: '#6d7882',
+    'high-contrast': '#6d7882',
+  },
+  'gray-60': {
+    light: '#58616a',
+    'high-contrast': '#58616a',
+  },
+  'gray-70': {
+    light: '#464c53',
+    'high-contrast': '#464c53',
+  },
+  'gray-80': {
+    light: '#33363d',
+    'high-contrast': '#33363d',
+  },
+  'gray-90': {
+    light: '#1e2124',
+    'high-contrast': '#1e2124',
+  },
+  'gray-95': {
+    light: '#131416',
+    'high-contrast': '#131416',
+  },
+  'gray-100': {
+    light: '#000000',
+    'high-contrast': '#000000',
+  },
 
-  brown5: '#F9F2F0',
-  brown10: '#EED8D3',
-  brown20: '#DCB0A7',
-  brown30: '#CB897C',
-  brown40: '#B96150',
-  brown50: '#A83A24',
-  brown60: '#862E1D',
-  brown70: '#652316',
-  brown80: '#43170E',
-  brown90: '#220C07',
+  'alpha-black100': {
+    light: '#000000',
+    'high-contrast': '#000000',
+  },
+  'alpha-black75': {
+    light: '#000000bf',
+    'high-contrast': '#000000bf',
+  },
+  'alpha-black50': {
+    light: '#00000080',
+    'high-contrast': '#00000080',
+  },
+  'alpha-black25': {
+    light: '#00000040',
+    'high-contrast': '#00000040',
+  },
+  'alpha-black10': {
+    light: '#0000001a',
+    'high-contrast': '#0000001a',
+  },
+  'alpha-black0': {
+    light: '#00000000',
+    'high-contrast': '#00000000',
+  },
+  'alpha-white100': {
+    light: '#ffffff',
+    'high-contrast': '#ffffff',
+  },
+  'alpha-white75': {
+    light: '#ffffffbf',
+    'high-contrast': '#ffffffbf',
+  },
+  'alpha-white50': {
+    light: '#ffffff80',
+    'high-contrast': '#ffffff80',
+  },
+  'alpha-white25': {
+    light: '#ffffff40',
+    'high-contrast': '#ffffff40',
+  },
+  'alpha-white10': {
+    light: '#ffffff1a',
+    'high-contrast': '#ffffff1a',
+  },
+  'alpha-white0': {
+    light: '#ffffff00',
+    'high-contrast': '#ffffff00',
+  },
 
-  darkRed5: '#FAEFF0',
-  darkRed10: '#F1CED0',
-  darkRed20: '#E39D9F',
-  darkRed30: '#D56C6F',
-  darkRed40: '#C73A3F',
-  darkRed50: '#B9090F',
-  darkRed60: '#94070C',
-  darkRed70: '#6F0509',
-  darkRed80: '#4A0306',
-  darkRed90: '#250203',
+  'danger-5': {
+    light: '#fdefec',
+    'high-contrast': '#fdefec',
+  },
+  'danger-10': {
+    light: '#fcdfd9',
+    'high-contrast': '#fcdfd9',
+  },
+  'danger-20': {
+    light: '#f7afa1',
+    'high-contrast': '#f7afa1',
+  },
+  'danger-30': {
+    light: '#f48771',
+    'high-contrast': '#f48771',
+  },
+  'danger-40': {
+    light: '#f05f42',
+    'high-contrast': '#f05f42',
+  },
+  'danger-50': {
+    light: '#de3412',
+    'high-contrast': '#de3412',
+  },
+  'danger-60': {
+    light: '#bd2c0f',
+    'high-contrast': '#bd2c0f',
+  },
+  'danger-70': {
+    light: '#8a240f',
+    'high-contrast': '#8a240f',
+  },
+  'danger-80': {
+    light: '#5c180a',
+    'high-contrast': '#5c180a',
+  },
+  'danger-90': {
+    light: '#390d05',
+    'high-contrast': '#390d05',
+  },
+  'danger-95': {
+    light: '#260903',
+    'high-contrast': '#260903',
+  },
 
-  red5: '#FEF1F1',
-  red10: '#FCCBCC',
-  red20: '#F99999',
-  red30: '#F56666',
-  red40: '#F23B3B',
-  red50: '#EE0000',
-  red60: '#BE0000',
-  red70: '#8F0000',
-  red80: '#5F0000',
-  red90: '#300000',
+  'information-5': {
+    light: '#e7f4fe',
+    'high-contrast': '#e7f4fe',
+  },
+  'information-10': {
+    light: '#d3ebfd',
+    'high-contrast': '#d3ebfd',
+  },
+  'information-20': {
+    light: '#9ed2fa',
+    'high-contrast': '#9ed2fa',
+  },
+  'information-30': {
+    light: '#5fb5f7',
+    'high-contrast': '#5fb5f7',
+  },
+  'information-40': {
+    light: '#2098f3',
+    'high-contrast': '#2098f3',
+  },
+  'information-50': {
+    light: '#0b78cb',
+    'high-contrast': '#0b78cb',
+  },
+  'information-60': {
+    light: '#096ab3',
+    'high-contrast': '#096ab3',
+  },
+  'information-70': {
+    light: '#085691',
+    'high-contrast': '#085691',
+  },
+  'information-80': {
+    light: '#053961',
+    'high-contrast': '#053961',
+  },
+  'information-90': {
+    light: '#03253f',
+    'high-contrast': '#03253f',
+  },
+  'information-95': {
+    light: '#021a2c',
+    'high-contrast': '#021a2c',
+  },
 
-  orange5: '#FFF4F0',
-  orange10: '#FFD4CC',
-  orange20: '#FFB899',
-  orange30: '#FF9C66',
-  orange40: '#FF8033',
-  orange50: '#FF6400',
-  orange60: '#CC5000',
-  orange70: '#993C00',
-  orange80: '#662800',
-  orange90: '#331400',
+  'warning-5': {
+    light: '#fff3db',
+    'high-contrast': '#fff3db',
+  },
+  'warning-10': {
+    light: '#ffe0a3',
+    'high-contrast': '#ffe0a3',
+  },
+  'warning-20': {
+    light: '#ffc95c',
+    'high-contrast': '#ffc95c',
+  },
+  'warning-30': {
+    light: '#ffb114',
+    'high-contrast': '#ffb114',
+  },
+  'warning-40': {
+    light: '#c78500',
+    'high-contrast': '#c78500',
+  },
+  'warning-50': {
+    light: '#9e6a00',
+    'high-contrast': '#9e6a00',
+  },
+  'warning-60': {
+    light: '#8a5c00',
+    'high-contrast': '#8a5c00',
+  },
+  'warning-70': {
+    light: '#614100',
+    'high-contrast': '#614100',
+  },
+  'warning-80': {
+    light: '#422c00',
+    'high-contrast': '#422c00',
+  },
+  'warning-90': {
+    light: '#2e1f00',
+    'high-contrast': '#2e1f00',
+  },
+  'warning-95': {
+    light: '#241800',
+    'high-contrast': '#241800',
+  },
 
-  coral5: '#FFF8F5',
-  coral10: '#FFE6DC',
-  coral20: '#FFCDB8',
-  coral30: '#FFB495',
-  coral40: '#FF9B71',
-  coral50: '#FE8052',
-  coral60: '#CB6642',
-  coral70: '#984D31',
-  coral80: '#663321',
-  coral90: '#331A10',
+  'success-5': {
+    light: '#eaf6ec',
+    'high-contrast': '#eaf6ec',
+  },
+  'success-10': {
+    light: '#d8eedd',
+    'high-contrast': '#d8eedd',
+  },
+  'success-20': {
+    light: '#a9dab4',
+    'high-contrast': '#a9dab4',
+  },
+  'success-30': {
+    light: '#7ec88e',
+    'high-contrast': '#7ec88e',
+  },
+  'success-40': {
+    light: '#3fa654',
+    'high-contrast': '#3fa654',
+  },
+  'success-50': {
+    light: '#228738',
+    'high-contrast': '#228738',
+  },
+  'success-60': {
+    light: '#267337',
+    'high-contrast': '#267337',
+  },
+  'success-70': {
+    light: '#285d33',
+    'high-contrast': '#285d33',
+  },
+  'success-80': {
+    light: '#1f4727',
+    'high-contrast': '#1f4727',
+  },
+  'success-90': {
+    light: '#122b18',
+    'high-contrast': '#122b18',
+  },
+  'success-95': {
+    light: '#0e2012',
+    'high-contrast': '#0e2012',
+  },
 
-  salmon5: '#FFF1F0',
-  salmon10: '#FFE3E0',
-  salmon20: '#FFCBC1',
-  salmon30: '#FEACA3',
-  salmon40: '#FE9184',
-  salmon50: '#FD7565',
-  salmon60: '#CA5E51',
-  salmon70: '#97463D',
-  salmon80: '#652F28',
-  salmon90: '#321714',
+  'point-5': {
+    light: '#fbeff0',
+    'high-contrast': '#fbeff0',
+  },
+  'point-10': {
+    light: '#f5d6d9',
+    'high-contrast': '#f5d6d9',
+  },
+  'point-20': {
+    light: '#ebadb2',
+    'high-contrast': '#ebadb2',
+  },
+  'point-30': {
+    light: '#e0858c',
+    'high-contrast': '#e0858c',
+  },
+  'point-40': {
+    light: '#d65c66',
+    'high-contrast': '#d65c66',
+  },
+  'point-50': {
+    light: '#d63d4a',
+    'high-contrast': '#d63d4a',
+  },
+  'point-60': {
+    light: '#ab2b36',
+    'high-contrast': '#ab2b36',
+  },
+  'point-70': {
+    light: '#7a1f26',
+    'high-contrast': '#7a1f26',
+  },
+  'point-80': {
+    light: '#521419',
+    'high-contrast': '#521419',
+  },
+  'point-90': {
+    light: '#310c0f',
+    'high-contrast': '#310c0f',
+  },
+  'point-95': {
+    light: '#21080a',
+    'high-contrast': '#21080a',
+  },
 
-  hotPink5: '#FFF5FC',
-  hotPink10: '#FFE3F5',
-  hotPink20: '#FFC4EC',
-  hotPink30: '#FFAAE2',
-  hotPink40: '#FF8DD9',
-  hotPink50: '#FF6FCE',
-  hotPink60: '#CC59A5',
-  hotPink70: '#99437C',
-  hotPink80: '#662C53',
-  hotPink90: '#331629',
+  'graphic-10': {
+    light: '#e5ecf9',
+    'high-contrast': '#e5ecf9',
+  },
+  'graphic-30': {
+    light: '#98acc5',
+    'high-contrast': '#98acc5',
+  },
+  'graphic-50': {
+    light: '#61758f',
+    'high-contrast': '#61758f',
+  },
+  'graphic-70': {
+    light: '#39506c',
+    'high-contrast': '#39506c',
+  },
+  'graphic-90': {
+    light: '#223a58',
+    'high-contrast': '#223a58',
+  },
+};
 
-  pink5: '#FFF0F8',
-  pink10: '#FFD0E9',
-  pink20: '#FFA1D4',
-  pink30: '#FF72BE',
-  pink40: '#FF43A9',
-  pink50: '#FF1493',
-  pink60: '#CC1076',
-  pink70: '#990C58',
-  pink80: '#66083B',
-  pink90: '#33041D',
+// Helper function to get color by mode
+export const getColor = (
+  colorName: keyof typeof colors,
+  mode: ColorThemeMode = 'light',
+): string => {
+  return colors[colorName][mode];
+};
 
-  fuchsia5: '#FDF2FD',
-  fuchsia10: '#F9D1F9',
-  fuchsia20: '#F2A3F2',
-  fuchsia30: '#EC75EC',
-  fuchsia40: '#E547E5',
-  fuchsia50: '#DF19DF',
-  fuchsia60: '#B214B2',
-  fuchsia70: '#8B0F8B',
-  fuchsia80: '#590A59',
-  fuchsia90: '#2D052D',
+// Helper to get all colors for a specified mode
+export const getThemeColors = (
+  mode: ColorThemeMode = 'light',
+): Record<string, string> => {
+  const themeColors: Record<string, string> = {};
 
-  purple5: '#F5EEF7',
-  purple10: '#E1CCE6',
-  purple20: '#C499CC',
-  purple30: '#A666B3',
-  purple40: '#893399',
-  purple50: '#600080',
-  purple60: '#4D0066',
-  purple70: '#3A004D',
-  purple80: '#260033',
-  purple90: '#13001A',
+  Object.entries(colors).forEach(([colorName, modeValues]) => {
+    themeColors[colorName] = modeValues[mode];
+  });
 
-  blueViolet5: '#F4EFFA',
-  blueViolet10: '#DED1F1',
-  blueViolet20: '#BDA2E3',
-  blueViolet30: '#9B74D4',
-  blueViolet40: '#7A45C6',
-  blueViolet50: '#5917B8',
-  blueViolet60: '#471293',
-  blueViolet70: '#350E6E',
-  blueViolet80: '#24094A',
-  blueViolet90: '#120525',
+  return themeColors;
 };
diff --git a/packages/core/lib/colors/color.type.ts b/packages/core/lib/colors/color.type.ts
deleted file mode 100644
index b2bcdc3..0000000
--- a/packages/core/lib/colors/color.type.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-type PrimaryColors =
-  | 'primary'
-  | 'primary-0'
-  | 'primary-5'
-  | 'primary-10'
-  | 'primary-20'
-  | 'primary-30'
-  | 'primary-40'
-  | 'primary-50'
-  | 'primary-60'
-  | 'primary-70'
-  | 'primary-80'
-  | 'primary-90'
-  | 'primary-100';
-
-type SecondaryColors =
-  | 'secondary'
-  | 'secondary-0'
-  | 'secondary-5'
-  | 'secondary-10'
-  | 'secondary-20'
-  | 'secondary-30'
-  | 'secondary-40'
-  | 'secondary-50'
-  | 'secondary-60'
-  | 'secondary-70'
-  | 'secondary-80'
-  | 'secondary-90'
-  | 'secondary-100';
-
-type GrayColors =
-  | 'gray-0'
-  | 'gray-5'
-  | 'gray-10'
-  | 'gray-20'
-  | 'gray-30'
-  | 'gray-40'
-  | 'gray-50'
-  | 'gray-60'
-  | 'gray-70'
-  | 'gray-80'
-  | 'gray-90'
-  | 'gray-100';
-
-type PointColors =
-  | 'point'
-  | 'point-0'
-  | 'point-5'
-  | 'point-10'
-  | 'point-20'
-  | 'point-30'
-  | 'point-40'
-  | 'point-50'
-  | 'point-60'
-  | 'point-70'
-  | 'point-80'
-  | 'point-90'
-  | 'point-100';
-
-type DangerColors =
-  | 'danger'
-  | 'danger-5'
-  | 'danger-10'
-  | 'danger-20'
-  | 'danger-30'
-  | 'danger-40'
-  | 'danger-50'
-  | 'danger-60'
-  | 'danger-70'
-  | 'danger-80'
-  | 'danger-90';
-
-type WarningColors =
-  | 'warning'
-  | 'warning-5'
-  | 'warning-10'
-  | 'warning-20'
-  | 'warning-30'
-  | 'warning-40'
-  | 'warning-50'
-  | 'warning-60'
-  | 'warning-70'
-  | 'warning-80'
-  | 'warning-90';
-
-type SuccessColors =
-  | 'success'
-  | 'success-5'
-  | 'success-10'
-  | 'success-20'
-  | 'success-30'
-  | 'success-40'
-  | 'success-50'
-  | 'success-60'
-  | 'success-70'
-  | 'success-80'
-  | 'success-90';
-
-type InfoColors =
-  | 'info'
-  | 'info-5'
-  | 'info-10'
-  | 'info-20'
-  | 'info-30'
-  | 'info-40'
-  | 'info-50'
-  | 'info-60'
-  | 'info-70'
-  | 'info-80'
-  | 'info-90';
-
-export type Color =
-  | PrimaryColors
-  | SecondaryColors
-  | GrayColors
-  | PointColors
-  | DangerColors
-  | WarningColors
-  | SuccessColors
-  | InfoColors;
-
-export const getTextColorClassname = (color: Color): string => {
-  const colorClassMap = {
-    primary: 'text-primary',
-    'primary-0': 'text-primary-0',
-    'primary-5': 'text-primary-5',
-    'primary-10': 'text-primary-10',
-    'primary-20': 'text-primary-20',
-    'primary-30': 'text-primary-30',
-    'primary-40': 'text-primary-40',
-    'primary-50': 'text-primary-50',
-    'primary-60': 'text-primary-60',
-    'primary-70': 'text-primary-70',
-    'primary-80': 'text-primary-80',
-    'primary-90': 'text-primary-90',
-    'primary-100': 'text-primary-100',
-    secondary: 'text-secondary',
-    'secondary-0': 'text-secondary-0',
-    'secondary-5': 'text-secondary-5',
-    'secondary-10': 'text-secondary-10',
-    'secondary-20': 'text-secondary-20',
-    'secondary-30': 'text-secondary-30',
-    'secondary-40': 'text-secondary-40',
-    'secondary-50': 'text-secondary-50',
-    'secondary-60': 'text-secondary-60',
-    'secondary-70': 'text-secondary-70',
-    'secondary-80': 'text-secondary-80',
-    'secondary-90': 'text-secondary-90',
-    'secondary-100': 'text-secondary-100',
-    gray: 'text-gray',
-    'gray-0': 'text-gray-0',
-    'gray-5': 'text-gray-5',
-    'gray-10': 'text-gray-10',
-    'gray-20': 'text-gray-20',
-    'gray-30': 'text-gray-30',
-    'gray-40': 'text-gray-40',
-    'gray-50': 'text-gray-50',
-    'gray-60': 'text-gray-60',
-    'gray-70': 'text-gray-70',
-    'gray-80': 'text-gray-80',
-    'gray-90': 'text-gray-90',
-    'gray-100': 'text-gray-100',
-    point: 'text-point',
-    'point-0': 'text-point-0',
-    'point-5': 'text-point-5',
-    'point-10': 'text-point-10',
-    'point-20': 'text-point-20',
-    'point-30': 'text-point-30',
-    'point-40': 'text-point-40',
-    'point-50': 'text-point-50',
-    'point-60': 'text-point-60',
-    'point-70': 'text-point-70',
-    'point-80': 'text-point-80',
-    'point-90': 'text-point-90',
-    'point-100': 'text-point-100',
-    danger: 'text-danger',
-    'danger-5': 'text-danger-5',
-    'danger-10': 'text-danger-10',
-    'danger-20': 'text-danger-20',
-    'danger-30': 'text-danger-30',
-    'danger-40': 'text-danger-40',
-    'danger-50': 'text-danger-50',
-    'danger-60': 'text-danger-60',
-    'danger-70': 'text-danger-70',
-    'danger-80': 'text-danger-80',
-    'danger-90': 'text-danger-90',
-    warning: 'text-warning',
-    'warning-5': 'text-warning-5',
-    'warning-10': 'text-warning-10',
-    'warning-20': 'text-warning-20',
-    'warning-30': 'text-warning-30',
-    'warning-40': 'text-warning-40',
-    'warning-50': 'text-warning-50',
-    'warning-60': 'text-warning-60',
-    'warning-70': 'text-warning-70',
-    'warning-80': 'text-warning-80',
-    'warning-90': 'text-warning-90',
-    success: 'text-success',
-    'success-5': 'text-success-5',
-    'success-10': 'text-success-10',
-    'success-20': 'text-success-20',
-    'success-30': 'text-success-30',
-    'success-40': 'text-success-40',
-    'success-50': 'text-success-50',
-    'success-60': 'text-success-60',
-    'success-70': 'text-success-70',
-    'success-80': 'text-success-80',
-    'success-90': 'text-success-90',
-    info: 'text-info',
-    'info-5': 'text-info-5',
-    'info-10': 'text-info-10',
-    'info-20': 'text-info-20',
-    'info-30': 'text-info-30',
-    'info-40': 'text-info-40',
-    'info-50': 'text-info-50',
-    'info-60': 'text-info-60',
-    'info-70': 'text-info-70',
-    'info-80': 'text-info-80',
-    'info-90': 'text-info-90',
-  };
-
-  return colorClassMap[color];
-};
diff --git a/packages/core/lib/components/Body.tsx b/packages/core/lib/components/Body.tsx
index 7eb479f..ea4cda9 100644
--- a/packages/core/lib/components/Body.tsx
+++ b/packages/core/lib/components/Body.tsx
@@ -1,9 +1,6 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type BodyProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's';
   weight?: 'regular' | 'bold';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -26,7 +23,7 @@ export const Body = <E extends React.ElementType = 'p'>({
     regular: 'font-regular',
     bold: 'font-bold',
   }[weight];
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <p
diff --git a/packages/core/lib/components/Detail.tsx b/packages/core/lib/components/Detail.tsx
index a25b0b3..5ebc646 100644
--- a/packages/core/lib/components/Detail.tsx
+++ b/packages/core/lib/components/Detail.tsx
@@ -1,9 +1,6 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type DetailProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's';
   weight?: 'regular' | 'bold';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -26,7 +23,7 @@ export const Detail = <E extends React.ElementType = 'span'>({
     regular: 'font-regular',
     bold: 'font-bold',
   }[weight];
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <span
diff --git a/packages/core/lib/components/Display.tsx b/packages/core/lib/components/Display.tsx
index c3afd82..d11b1bd 100644
--- a/packages/core/lib/components/Display.tsx
+++ b/packages/core/lib/components/Display.tsx
@@ -1,8 +1,5 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type DisplayProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -20,7 +17,7 @@ export const Display = <E extends React.ElementType = 'h1'>({
     s: 'text-display-s-mobile sm:text-display-s',
   }[size];
   const weightClass = 'font-bold';
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <h1
diff --git a/packages/core/lib/components/Heading.tsx b/packages/core/lib/components/Heading.tsx
index dba8e27..bb3dea8 100644
--- a/packages/core/lib/components/Heading.tsx
+++ b/packages/core/lib/components/Heading.tsx
@@ -1,8 +1,5 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type HeadingProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -20,7 +17,7 @@ export const Heading = <E extends React.ElementType = 'h2'>({
     s: 'text-heading-s-mobile sm:text-heading-s',
   }[size];
   const weightClass = 'font-bold';
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <h2
diff --git a/packages/core/lib/components/Label.tsx b/packages/core/lib/components/Label.tsx
index 87a3c30..7cbaaf6 100644
--- a/packages/core/lib/components/Label.tsx
+++ b/packages/core/lib/components/Label.tsx
@@ -1,9 +1,6 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type LabelProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's' | 'xs';
   weight?: 'regular' | 'bold';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -11,7 +8,6 @@ export type LabelProps<E extends React.ElementType> = {
 export const Label = <E extends React.ElementType = 'label'>({
   size = 'm',
   weight = 'regular',
-  color = 'gray-90',
   children,
   className = '',
   ...props
@@ -27,7 +23,7 @@ export const Label = <E extends React.ElementType = 'label'>({
     regular: 'font-regular',
     bold: 'font-bold',
   }[weight];
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <label
diff --git a/packages/core/lib/components/Link.tsx b/packages/core/lib/components/Link.tsx
index 2397b5c..75711ac 100644
--- a/packages/core/lib/components/Link.tsx
+++ b/packages/core/lib/components/Link.tsx
@@ -1,9 +1,6 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type LinkProps<E extends React.ElementType> = {
   size?: 'l' | 'm' | 's';
   weight?: 'regular' | 'bold';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
   title?: string;
@@ -12,7 +9,6 @@ export type LinkProps<E extends React.ElementType> = {
 export const Link = <E extends React.ElementType = 'a'>({
   size = 'm',
   weight = 'regular',
-  color = 'gray-90',
   children,
   className = '',
   title,
@@ -28,7 +24,7 @@ export const Link = <E extends React.ElementType = 'a'>({
     regular: 'font-regular',
     bold: 'font-bold',
   }[weight];
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <a
diff --git a/packages/core/lib/components/Spinner.tsx b/packages/core/lib/components/Spinner.tsx
index d47704e..1265ab2 100644
--- a/packages/core/lib/components/Spinner.tsx
+++ b/packages/core/lib/components/Spinner.tsx
@@ -1,16 +1,9 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type SpinnerProps = {
   size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
-  color?: Color;
   className?: string;
 };
 
-export const Spinner = ({
-  size = 'medium',
-  color,
-  className = '',
-}: SpinnerProps) => {
+export const Spinner = ({ size = 'medium', className = '' }: SpinnerProps) => {
   const sizeStyles: { style: string; fontSize: 'l' | 'm' | 's' | 'xs' } = {
     'x-small': {
       style: 'w-4 h-4',
@@ -34,7 +27,7 @@ export const Spinner = ({
     },
   }[size];
 
-  const colorStyles = color ? getTextColorClassname(color) : '';
+  const colorStyles = '';
 
   const spinnerStyles = `
     ${sizeStyles.style} 
diff --git a/packages/core/lib/components/Title.tsx b/packages/core/lib/components/Title.tsx
index c0069f8..a86cf92 100644
--- a/packages/core/lib/components/Title.tsx
+++ b/packages/core/lib/components/Title.tsx
@@ -1,8 +1,5 @@
-import { Color, getTextColorClassname } from '../colors/color.type';
-
 export type TitleProps<E extends React.ElementType> = {
   size?: 'xxl' | 'xl' | 'l' | 'm' | 's' | 'xs';
-  color?: Color;
   children: React.ReactNode;
   className?: string;
 } & React.ComponentPropsWithoutRef<E>;
@@ -23,7 +20,7 @@ export const Title = <E extends React.ElementType = 'h3'>({
     xs: 'text-title-xs-mobile sm:text-title-xs',
   }[size];
   const weightClass = 'font-bold';
-  const textColorClass = getTextColorClassname(color);
+  const textColorClass = '';
 
   return (
     <h3
diff --git a/packages/core/lib/provider.tsx b/packages/core/lib/provider.tsx
index 5e6db8f..6b9b3b8 100644
--- a/packages/core/lib/provider.tsx
+++ b/packages/core/lib/provider.tsx
@@ -45,12 +45,38 @@ export const ContextProvider: React.FC<{
   const [locale, setLocale] = useState<Locale>('ko');
   const [textSize, setTextSize] = useState<TextSize>('medium');
 
+  const changeTheme = (mode: ThemeMode) => {
+    switch (mode) {
+      case 'system': {
+        // get system theme
+        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+          .matches
+          ? 'high-contrast'
+          : 'light';
+        document.documentElement.setAttribute('data-theme', systemTheme);
+        break;
+      }
+
+      case 'dark':
+      case 'high-contrast': {
+        document.documentElement.setAttribute('data-theme', 'high-contrast');
+        break;
+      }
+
+      case 'light': {
+        document.documentElement.setAttribute('data-theme', 'light');
+        break;
+      }
+    }
+    setThemeMode(mode);
+  };
+
   const context: ContextProps = {
-    token: { ...token },
+    token: { primitive: {}, semantic: {}, component: {} },
     mode: themeMode,
     locale: locale,
     textSize: textSize,
-    setThemeMode: (mode) => setThemeMode(mode),
+    setThemeMode: changeTheme,
     setLocale: (locale) => setLocale(locale),
     setTextSize: (textSize) => setTextSize(textSize),
   };
diff --git a/packages/tailwindcss-plugin/krds-plugin.js b/packages/tailwindcss-plugin/krds-plugin.js
index 056ec22..f219e7c 100644
--- a/packages/tailwindcss-plugin/krds-plugin.js
+++ b/packages/tailwindcss-plugin/krds-plugin.js
@@ -1,246 +1,280 @@
 const plugin = require('tailwindcss/plugin');
 
-module.exports = plugin(
-  function({ addBase, addUtilities, addComponents, theme }) {},
-  {
-    theme: {
-      screens: {
-        // ~600px: mobile
-        mobile: '360px',
-        // 601px ~ 1024px: tablet
-        tablet: '601px',
-        // 1025px ~: desktop
-        desktop: '1025px',
-      },
-      extend: {
-        colors: {
-          primary: {
-            DEFAULT: '#246BEB',
-            0: '#FFFFFF',
-            5: '#EFF5FF',
-            10: '#D3E1FB',
-            20: '#A7C4F7',
-            30: '#7CA6F3',
-            40: '#5089EF',
-            50: '#246BEB',
-            60: '#1D56BC',
-            70: '#16408D',
-            80: '#0E2B5E',
-            90: '#07152F',
-            100: '#000000',
-          },
-          secondary: {
-            DEFAULT: '#003675',
-            0: '#FFFFFF',
-            5: '#EDF1F5',
-            10: '#CDD7E4',
-            20: '#B4C4D6',
-            30: '#99B0CB',
-            40: '#2A5C96',
-            50: '#003675',
-            60: '#002B5E',
-            70: '#002046',
-            80: '#00162F',
-            90: '#000B17',
-            100: '#000000',
-          },
-          gray: {
-            0: '#FFFFFF',
-            5: '#F8F8F8',
-            10: '#F0F0F0',
-            20: '#E4E4E4',
-            30: '#D8D8D8',
-            40: '#C6C6C6',
-            50: '#8E8E8E',
-            60: '#717171',
-            70: '#555555',
-            80: '#2D2D2D',
-            90: '#1D1D1D',
-            100: '#000000',
-          },
-          point: {
-            DEFAULT: '#E71825',
-            0: '#FFFFFF',
-            5: 'FDF2F3',
-            10: 'FBD6D8',
-            20: 'F5A3A8',
-            30: 'F1747C',
-            40: 'EC4651',
-            50: 'E71825',
-            60: 'B9131E',
-            70: '8B0E16',
-            80: '5C0A0F',
-            90: '2E0507',
-            100: '#000000',
-          },
-          danger: {
-            DEFAULT: '#EB003B',
-            5: '#FEECF0',
-            10: '#FCD4DE',
-            20: '#F799B1',
-            30: '#F36689',
-            40: '#EF3E5E',
-            50: '#EB003B',
-            60: '#D50136',
-            70: '#8D0023',
-            80: '#5E0018',
-            90: '#2F000C',
-          },
-          warning: {
-            DEFAULT: '#FFB724',
-            5: '#FFF8E9',
-            10: '#FFEAC1',
-            20: '#FFE2A7',
-            30: '#FFD47C',
-            40: '#FFC550',
-            50: '#FFB724',
-            60: '#98690A',
-            70: '#66490E',
-            80: '#4D370B',
-            90: '#332507',
-          },
-          success: {
-            DEFAULT: '#008A1E',
-            5: '#EEF7F0',
-            10: '#CEE9D4',
-            20: '#B2DCBB',
-            30: '#8CCA99',
-            40: '#33A14B',
-            50: '#008A1E',
-            60: '#006E18',
-            70: '#005312',
-            80: '#00370C',
-            90: '#002207',
-          },
-          info: {
-            DEFAULT: '#2768FF',
-            5: '#E9F0FF',
-            10: '#D4E1FF',
-            20: '#A9C3FF',
-            30: '#7DA4FF',
-            40: '#5286FF',
-            50: '#2768FF',
-            60: '#1F53CC',
-            70: '#173E99',
-            80: '#0C1F4D',
-            90: '#040A1A',
-          },
-        },
-        fontSize: {
-          'display-l': ['66px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'display-m': ['50px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'display-s': ['40px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'display-l-mobile': [
-            '40px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-          'display-m-mobile': [
-            '32px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-          'display-s-mobile': [
-            '25px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-
-          // Heading
-          'heading-l': ['50px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'heading-m': ['40px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'heading-s': ['32px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'heading-l-mobile': [
-            '40px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-          'heading-m-mobile': [
-            '32px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-          'heading-s-mobile': [
-            '25px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-
-          // Title
-          'title-xxl': ['32px', { lineHeight: '150%', letterSpacing: '1px' }],
-          'title-xl': ['25px', { lineHeight: '150%' }],
-          'title-l': ['21px', { lineHeight: '150%' }],
-          'title-m': ['19px', { lineHeight: '150%' }],
-          'title-s': ['17px', { lineHeight: '150%' }],
-          'title-xs': ['15px', { lineHeight: '150%' }],
-          'title-xxl-mobile': [
-            '25px',
-            { lineHeight: '150%', letterSpacing: '1px' },
-          ],
-          'title-xl-mobile': ['25px', { lineHeight: '150%' }],
-          'title-l-mobile': ['21px', { lineHeight: '150%' }],
-          'title-m-mobile': ['19px', { lineHeight: '150%' }],
-          'title-s-mobile': ['17px', { lineHeight: '150%' }],
-          'title-xs-mobile': ['15px', { lineHeight: '150%' }],
-
-          // Body
-          'body-l': ['19px', { lineHeight: '150%' }],
-          'body-m': ['17px', { lineHeight: '150%' }],
-          'body-s': ['15px', { lineHeight: '150%' }],
-          'body-l-mobile': ['19px', { lineHeight: '150%' }],
-          'body-m-mobile': ['17px', { lineHeight: '150%' }],
-          'body-s-mobile': ['15px', { lineHeight: '150%' }],
-
-          // Detail
-          'detail-l': ['17px', { lineHeight: '150%' }],
-          'detail-m': ['15px', { lineHeight: '150%' }],
-          'detail-s': ['13px', { lineHeight: '150%' }],
-          'detail-l-mobile': ['17px', { lineHeight: '150%' }],
-          'detail-m-mobile': ['15px', { lineHeight: '150%' }],
-          'detail-s-mobile': ['13px', { lineHeight: '150%' }],
-
-          // Label
-          'label-l': ['19px', { lineHeight: '150%' }],
-          'label-m': ['17px', { lineHeight: '150%' }],
-          'label-s': ['15px', { lineHeight: '150%' }],
-          'label-xs': ['13px', { lineHeight: '150%' }],
-          'label-l-mobile': ['19px', { lineHeight: '150%' }],
-          'label-m-mobile': ['17px', { lineHeight: '150%' }],
-          'label-s-mobile': ['15px', { lineHeight: '150%' }],
-          'label-xs-mobile': ['13px', { lineHeight: '150%' }],
-
-          // Link
-          'link-l': ['19px', { lineHeight: '150%' }],
-          'link-m': ['17px', { lineHeight: '150%' }],
-          'link-s': ['15px', { lineHeight: '150%' }],
-          'link-l-mobile': ['19px', { lineHeight: '150%' }],
-          'link-m-mobile': ['17px', { lineHeight: '150%' }],
-          'link-s-mobile': ['15px', { lineHeight: '150%' }],
-        },
-        fontWeight: {
-          regular: 400,
-          bold: 700,
-        },
-        spacing: {
-          0: '0px',
-          1: '2px',
-          2: '4px',
-          3: '8px',
-          4: '12px',
-          5: '16px',
-          6: '20px',
-          7: '24px',
-          8: '32px',
-          9: '40px',
-          10: '48px',
-        },
-        borderRadius: {
-          0: '0',
-          1: '2px',
-          2: '4px',
-          3: '6px',
-          4: '8px',
-          5: '12px',
-          6: '16px',
-          7: '20px',
-          8: '24px',
-          9: '40px',
-        },
-      },
+module.exports = plugin(function({
+  addBase,
+  addUtilities,
+  addComponents,
+  theme,
+}) {
+  addBase({
+    ':root': {
+      '--krds-color-primary-5': '#ecf2fe',
+      '--krds-color-primary-10': '#d8e5fd',
+      '--krds-color-primary-20': '#b1cefb',
+      '--krds-color-primary-30': '#86aff9',
+      '--krds-color-primary-40': '#4c87f6',
+      '--krds-color-primary-50': '#256ef4',
+      '--krds-color-primary-60': '#0b50d0',
+      '--krds-color-primary-70': '#083891',
+      '--krds-color-primary-80': '#052561',
+      '--krds-color-primary-90': '#03163a',
+      '--krds-color-primary-95': '#020f27',
+
+      '--krds-color-secondary-5': '#eef2f7',
+      '--krds-color-secondary-10': '#d6e0eb',
+      '--krds-color-secondary-20': '#bacbde',
+      '--krds-color-secondary-30': '#90b0d5',
+      '--krds-color-secondary-40': '#6b96c7',
+      '--krds-color-secondary-50': '#346fb2',
+      '--krds-color-secondary-60': '#1c589c',
+      '--krds-color-secondary-70': '#063a74',
+      '--krds-color-secondary-80': '#052b57',
+      '--krds-color-secondary-90': '#031f3f',
+      '--krds-color-secondary-95': '#02162c',
+
+      '--krds-color-gray-0': '#ffffff',
+      '--krds-color-gray-5': '#f4f5f6',
+      '--krds-color-gray-10': '#e6e8ea',
+      '--krds-color-gray-20': '#cdd1d5',
+      '--krds-color-gray-30': '#b1b8be',
+      '--krds-color-gray-40': '#8a949e',
+      '--krds-color-gray-50': '#6d7882',
+      '--krds-color-gray-60': '#58616a',
+      '--krds-color-gray-70': '#464c53',
+      '--krds-color-gray-80': '#33363d',
+      '--krds-color-gray-90': '#1e2124',
+      '--krds-color-gray-95': '#131416',
+      '--krds-color-gray-100': '#000000',
+
+      '--krds-color-alpha-black100': '#000000',
+      '--krds-color-alpha-black75': '#000000bf',
+      '--krds-color-alpha-black50': '#00000080',
+      '--krds-color-alpha-black25': '#00000040',
+      '--krds-color-alpha-black10': '#0000001a',
+      '--krds-color-alpha-black0': '#00000000',
+      '--krds-color-alpha-white100': '#ffffff',
+      '--krds-color-alpha-white75': '#ffffffbf',
+      '--krds-color-alpha-white50': '#ffffff80',
+      '--krds-color-alpha-white25': '#ffffff40',
+      '--krds-color-alpha-white10': '#ffffff1a',
+      '--krds-color-alpha-white0': '#ffffff00',
+
+      '--krds-color-danger-5': '#fdefec',
+      '--krds-color-danger-10': '#fcdfd9',
+      '--krds-color-danger-20': '#f7afa1',
+      '--krds-color-danger-30': '#f48771',
+      '--krds-color-danger-40': '#f05f42',
+      '--krds-color-danger-50': '#de3412',
+      '--krds-color-danger-60': '#bd2c0f',
+      '--krds-color-danger-70': '#8a240f',
+      '--krds-color-danger-80': '#5c180a',
+      '--krds-color-danger-90': '#390d05',
+      '--krds-color-danger-95': '#260903',
+
+      '--krds-color-information-5': '#e7f4fe',
+      '--krds-color-information-10': '#d3ebfd',
+      '--krds-color-information-20': '#9ed2fa',
+      '--krds-color-information-30': '#5fb5f7',
+      '--krds-color-information-40': '#2098f3',
+      '--krds-color-information-50': '#0b78cb',
+      '--krds-color-information-60': '#096ab3',
+      '--krds-color-information-70': '#085691',
+      '--krds-color-information-80': '#053961',
+      '--krds-color-information-90': '#03253f',
+      '--krds-color-information-95': '#021a2c',
+
+      '--krds-color-warning-5': '#fff3db',
+      '--krds-color-warning-10': '#ffe0a3',
+      '--krds-color-warning-20': '#ffc95c',
+      '--krds-color-warning-30': '#ffb114',
+      '--krds-color-warning-40': '#c78500',
+      '--krds-color-warning-50': '#9e6a00',
+      '--krds-color-warning-60': '#8a5c00',
+      '--krds-color-warning-70': '#614100',
+      '--krds-color-warning-80': '#422c00',
+      '--krds-color-warning-90': '#2e1f00',
+      '--krds-color-warning-95': '#241800',
+
+      '--krds-color-success-5': '#eaf6ec',
+      '--krds-color-success-10': '#d8eedd',
+      '--krds-color-success-20': '#a9dab4',
+      '--krds-color-success-30': '#7ec88e',
+      '--krds-color-success-40': '#3fa654',
+      '--krds-color-success-50': '#228738',
+      '--krds-color-success-60': '#267337',
+      '--krds-color-success-70': '#285d33',
+      '--krds-color-success-80': '#1f4727',
+      '--krds-color-success-90': '#122b18',
+      '--krds-color-success-95': '#0e2012',
+
+      '--krds-color-point-5': '#fbeff0',
+      '--krds-color-point-10': '#f5d6d9',
+      '--krds-color-point-20': '#ebadb2',
+      '--krds-color-point-30': '#e0858c',
+      '--krds-color-point-40': '#d65c66',
+      '--krds-color-point-50': '#d63d4a',
+      '--krds-color-point-60': '#ab2b36',
+      '--krds-color-point-70': '#7a1f26',
+      '--krds-color-point-80': '#521419',
+      '--krds-color-point-90': '#310c0f',
+      '--krds-color-point-95': '#21080a',
+
+      '--krds-color-graphic-10': '#e5ecf9',
+      '--krds-color-graphic-30': '#98acc5',
+      '--krds-color-graphic-50': '#61758f',
+      '--krds-color-graphic-70': '#39506c',
+      '--krds-color-graphic-90': '#223a58',
+
+      // other variables
+      '--krds-typo-font-weight-regular': '400',
+      '--krds-typo-font-weight-bold': '700',
+
+      '--krds-typo-letter-spacing-0': '0rem',
+      '--krds-typo-letter-spacing-1': '0.1rem',
+
+      '--krds-number-0': '0rem',
+      '--krds-number-1': '0.1rem',
+      '--krds-number-2': '0.2rem',
+      '--krds-number-3': '0.4rem',
+      '--krds-number-4': '0.6rem',
+      '--krds-number-5': '0.8rem',
+      '--krds-number-6': '1rem',
+      '--krds-number-7': '1.2rem',
+      '--krds-number-8': '1.6rem',
+      '--krds-number-9': '2rem',
+      '--krds-number-10': '2.4rem',
+      '--krds-number-11': '2.8rem',
+      '--krds-number-12': '3.2rem',
+      '--krds-number-13': '3.6rem',
+      '--krds-number-14': '4rem',
+      '--krds-number-15': '4.4rem',
+      '--krds-number-16': '4.8rem',
+      '--krds-number-17': '5.6rem',
+      '--krds-number-18': '6.4rem',
+      '--krds-number-19': '7.2rem',
+      '--krds-number-20': '8rem',
+      '--krds-number-21': '9.6rem',
+      '--krds-number-max': '100rem',
+    },
+    // dark or high-contrast mode
+    '[data-theme="high-contrast"]': {
+      '--krds-color-primary-5': '#ecf2fe',
+      '--krds-color-primary-10': '#d8e5fd',
+      '--krds-color-primary-20': '#b1cefb',
+      '--krds-color-primary-30': '#86aff9',
+      '--krds-color-primary-40': '#4c87f6',
+      '--krds-color-primary-50': '#256ef4',
+      '--krds-color-primary-60': '#0b50d0',
+      '--krds-color-primary-70': '#083891',
+      '--krds-color-primary-80': '#052561',
+      '--krds-color-primary-90': '#03163a',
+      '--krds-color-primary-95': '#020f27',
+
+      '--krds-color-secondary-5': '#edf6f8',
+      '--krds-color-secondary-10': '#d5ebf1',
+      '--krds-color-secondary-20': '#abd8e3',
+      '--krds-color-secondary-30': '#75c0d1',
+      '--krds-color-secondary-40': '#3d9fb8',
+      '--krds-color-secondary-50': '#268097',
+      '--krds-color-secondary-60': '#1f687a',
+      '--krds-color-secondary-70': '#17505e',
+      '--krds-color-secondary-80': '#113b45',
+      '--krds-color-secondary-90': '#0e3139',
+      '--krds-color-secondary-95': '#091f25',
+
+      '--krds-color-gray-0': '#ffffff',
+      '--krds-color-gray-5': '#f4f5f6',
+      '--krds-color-gray-10': '#e6e8ea',
+      '--krds-color-gray-20': '#cdd1d5',
+      '--krds-color-gray-30': '#b1b8be',
+      '--krds-color-gray-40': '#8a949e',
+      '--krds-color-gray-50': '#6d7882',
+      '--krds-color-gray-60': '#58616a',
+      '--krds-color-gray-70': '#464c53',
+      '--krds-color-gray-80': '#33363d',
+      '--krds-color-gray-90': '#1e2124',
+      '--krds-color-gray-95': '#131416',
+      '--krds-color-gray-100': '#000000',
+
+      '--krds-color-alpha-black100': '#000000',
+      '--krds-color-alpha-black75': '#000000bf',
+      '--krds-color-alpha-black50': '#00000080',
+      '--krds-color-alpha-black25': '#00000040',
+      '--krds-color-alpha-black10': '#0000001a',
+      '--krds-color-alpha-black0': '#00000000',
+      '--krds-color-alpha-white100': '#ffffff',
+      '--krds-color-alpha-white75': '#ffffffbf',
+      '--krds-color-alpha-white50': '#ffffff80',
+      '--krds-color-alpha-white25': '#ffffff40',
+      '--krds-color-alpha-white10': '#ffffff1a',
+      '--krds-color-alpha-white0': '#ffffff00',
+
+      '--krds-color-danger-5': '#fdefec',
+      '--krds-color-danger-10': '#fcdfd9',
+      '--krds-color-danger-20': '#f7afa1',
+      '--krds-color-danger-30': '#f48771',
+      '--krds-color-danger-40': '#f05f42',
+      '--krds-color-danger-50': '#de3412',
+      '--krds-color-danger-60': '#bd2c0f',
+      '--krds-color-danger-70': '#8a240f',
+      '--krds-color-danger-80': '#5c180a',
+      '--krds-color-danger-90': '#390d05',
+      '--krds-color-danger-95': '#260903',
+
+      '--krds-color-information-5': '#e7f4fe',
+      '--krds-color-information-10': '#d3ebfd',
+      '--krds-color-information-20': '#9ed2fa',
+      '--krds-color-information-30': '#5fb5f7',
+      '--krds-color-information-40': '#2098f3',
+      '--krds-color-information-50': '#0b78cb',
+      '--krds-color-information-60': '#096ab3',
+      '--krds-color-information-70': '#085691',
+      '--krds-color-information-80': '#053961',
+      '--krds-color-information-90': '#03253f',
+      '--krds-color-information-95': '#021a2c',
+
+      '--krds-color-warning-5': '#fff3db',
+      '--krds-color-warning-10': '#ffe0a3',
+      '--krds-color-warning-20': '#ffc95c',
+      '--krds-color-warning-30': '#ffb114',
+      '--krds-color-warning-40': '#c78500',
+      '--krds-color-warning-50': '#9e6a00',
+      '--krds-color-warning-60': '#8a5c00',
+      '--krds-color-warning-70': '#614100',
+      '--krds-color-warning-80': '#422c00',
+      '--krds-color-warning-90': '#2e1f00',
+      '--krds-color-warning-95': '#241800',
+
+      '--krds-color-success-5': '#eaf6ec',
+      '--krds-color-success-10': '#d8eedd',
+      '--krds-color-success-20': '#a9dab4',
+      '--krds-color-success-30': '#7ec88e',
+      '--krds-color-success-40': '#3fa654',
+      '--krds-color-success-50': '#228738',
+      '--krds-color-success-60': '#267337',
+      '--krds-color-success-70': '#285d33',
+      '--krds-color-success-80': '#1f4727',
+      '--krds-color-success-90': '#122b18',
+      '--krds-color-success-95': '#0e2012',
+
+      '--krds-color-point-5': '#fbeff0',
+      '--krds-color-point-10': '#f5d6d9',
+      '--krds-color-point-20': '#ebadb2',
+      '--krds-color-point-30': '#e0858c',
+      '--krds-color-point-40': '#d65c66',
+      '--krds-color-point-50': '#d63d4a',
+      '--krds-color-point-60': '#ab2b36',
+      '--krds-color-point-70': '#7a1f26',
+      '--krds-color-point-80': '#521419',
+      '--krds-color-point-90': '#310c0f',
+      '--krds-color-point-95': '#21080a',
+
+      '--krds-color-graphic-10': '#e5ecf9',
+      '--krds-color-graphic-30': '#98acc5',
+      '--krds-color-graphic-50': '#61758f',
+      '--krds-color-graphic-70': '#39506c',
+      '--krds-color-graphic-90': '#223a58',
     },
-  },
-);
+  });
+},
+{});
diff --git a/stories/core/color.stories.tsx b/stories/core/color.stories.tsx
index 565e094..f6628cf 100644
--- a/stories/core/color.stories.tsx
+++ b/stories/core/color.stories.tsx
@@ -1,461 +1,249 @@
-import React from 'react';
-import { colors } from '../../packages/core/lib'; // Assuming the colors object is exported from a separate file
+import React, { useState } from 'react';
+import { colors } from '../../packages/core/lib';
 
-const ColorSwatch = ({ colorName, colorValue }) => (
-  <div
-    style={{
-      width: '100%',
-      height: '40px',
-      backgroundColor: colorValue,
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: '0 10px',
-      color: parseInt(colorName.split('-')[1]) > 50 ? 'white' : 'black',
-      fontSize: '14px',
-    }}
-  >
-    <span>{colorName}</span>
-    <span>{colorValue.toUpperCase()}</span>
-  </div>
-);
+const ColorSwatch = ({ colorName, colorValue, mode }) => {
+  // Extract numeric part from colorName (e.g., "primary-50" -> 50)
+  const numberMatch = colorName.match(/-(\d+)/);
+  const colorNumber = numberMatch ? parseInt(numberMatch[1]) : 0;
 
-const ColorGroup = ({ title, colors }) => (
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '40px',
+        backgroundColor: colorValue,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 10px',
+        color: colorNumber > 50 ? 'white' : 'black',
+        fontSize: '14px',
+      }}
+    >
+      <span>{colorName}</span>
+      <span>{colorValue.toUpperCase()}</span>
+    </div>
+  );
+};
+
+const ColorGroup = ({ title, colorEntries, mode }) => (
   <div
     style={{
       width: 'calc(16.666% - 10px)',
       margin: '5px',
-      backgroundColor: 'white',
+      backgroundColor: mode === 'high-contrast' ? '#000000' : '#ffffff',
       borderRadius: '8px',
       overflow: 'hidden',
       boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
     }}
   >
-    <div style={{ padding: '10px', fontWeight: 'bold' }}>{title}</div>
-    {Object.entries(colors).map(([name, value]) => (
-      <ColorSwatch key={name} colorName={name} colorValue={value} />
+    <div
+      style={{
+        padding: '10px',
+        fontWeight: 'bold',
+        color: mode === 'high-contrast' ? '#ffffff' : '#000000',
+      }}
+    >
+      {title}
+    </div>
+    {colorEntries.map(([name, key]) => (
+      <ColorSwatch
+        key={name}
+        colorName={name}
+        colorValue={colors[key][mode]}
+        mode={mode}
+      />
     ))}
   </div>
 );
 
 const ColorPalette = () => {
+  const [mode, setMode] = useState('light');
+
+  // Set background color based on mode
+  const backgroundColor = mode === 'high-contrast' ? '#000000' : '#f5f5f5';
+  const headerColor = mode === 'high-contrast' ? '#ffffff' : '#000000';
+
+  // Define color groups mapping
   const colorGroups = {
-    Primary: {
-      primary: colors.primary,
-      'primary-0': colors.primary0,
-      'primary-5': colors.primary5,
-      'primary-10': colors.primary10,
-      'primary-20': colors.primary20,
-      'primary-30': colors.primary30,
-      'primary-40': colors.primary40,
-      'primary-50': colors.primary50,
-      'primary-60': colors.primary60,
-      'primary-70': colors.primary70,
-      'primary-80': colors.primary80,
-      'primary-90': colors.primary90,
-      'primary-100': colors.primary100,
-    },
-    Secondary: {
-      secondary: colors.secondary,
-      'secondary-0': colors.secondary0,
-      'secondary-5': colors.secondary5,
-      'secondary-10': colors.secondary10,
-      'secondary-20': colors.secondary20,
-      'secondary-30': colors.secondary30,
-      'secondary-40': colors.secondary40,
-      'secondary-50': colors.secondary50,
-      'secondary-60': colors.secondary60,
-      'secondary-70': colors.secondary70,
-      'secondary-80': colors.secondary80,
-      'secondary-90': colors.secondary90,
-      'secondary-100': colors.secondary100,
-    },
-    Gray: {
-      'gray-0': colors.gray0,
-      'gray-5': colors.gray5,
-      'gray-10': colors.gray10,
-      'gray-20': colors.gray20,
-      'gray-30': colors.gray30,
-      'gray-40': colors.gray40,
-      'gray-50': colors.gray50,
-      'gray-60': colors.gray60,
-      'gray-70': colors.gray70,
-      'gray-80': colors.gray80,
-      'gray-90': colors.gray90,
-      'gray-100': colors.gray100,
-    },
-    point: {
-      point: colors.point,
-      'point-0': colors.point0,
-      'point-5': colors.point5,
-      'point-10': colors.point10,
-      'point-20': colors.point20,
-      'point-30': colors.point30,
-      'point-40': colors.point40,
-      'point-50': colors.point50,
-      'point-60': colors.point60,
-      'point-70': colors.point70,
-      'point-80': colors.point80,
-      'point-90': colors.point90,
-      'point-100': colors.point100,
-    },
-    Danger: {
-      danger: colors.danger,
-      'danger-5': colors.danger5,
-      'danger-10': colors.danger10,
-      'danger-20': colors.danger20,
-      'danger-30': colors.danger30,
-      'danger-40': colors.danger40,
-      'danger-50': colors.danger50,
-      'danger-60': colors.danger60,
-      'danger-70': colors.danger70,
-      'danger-80': colors.danger80,
-      'danger-90': colors.danger90,
-    },
-    Warning: {
-      warning: colors.warning,
-      'warning-5': colors.warning5,
-      'warning-10': colors.warning10,
-      'warning-20': colors.warning20,
-      'warning-30': colors.warning30,
-      'warning-40': colors.warning40,
-      'warning-50': colors.warning50,
-      'warning-60': colors.warning60,
-      'warning-70': colors.warning70,
-      'warning-80': colors.warning80,
-      'warning-90': colors.warning90,
-    },
-    Success: {
-      success: colors.success,
-      'success-5': colors.success5,
-      'success-10': colors.success10,
-      'success-20': colors.success20,
-      'success-30': colors.success30,
-      'success-40': colors.success40,
-      'success-50': colors.success50,
-      'success-60': colors.success60,
-      'success-70': colors.success70,
-      'success-80': colors.success80,
-      'success-90': colors.success90,
-    },
-    Info: {
-      info: colors.info,
-      'info-5': colors.info5,
-      'info-10': colors.info10,
-      'info-20': colors.info20,
-      'info-30': colors.info30,
-      'info-40': colors.info40,
-      'info-50': colors.info50,
-      'info-60': colors.info60,
-      'info-70': colors.info70,
-      'info-80': colors.info80,
-      'info-90': colors.info90,
-    },
-    Navy: {
-      'navy-5': colors.navy5,
-      'navy-10': colors.navy10,
-      'navy-20': colors.navy20,
-      'navy-30': colors.navy30,
-      'navy-40': colors.navy40,
-      'navy-50': colors.navy50,
-      'navy-60': colors.navy60,
-      'navy-70': colors.navy70,
-      'navy-80': colors.navy80,
-      'navy-90': colors.navy90,
-    },
-    Blue: {
-      'blue-5': colors.blue5,
-      'blue-10': colors.blue10,
-      'blue-20': colors.blue20,
-      'blue-30': colors.blue30,
-      'blue-40': colors.blue40,
-      'blue-50': colors.blue50,
-      'blue-60': colors.blue60,
-      'blue-70': colors.blue70,
-      'blue-80': colors.blue80,
-      'blue-90': colors.blue90,
-    },
-    'Royal Blue': {
-      'royalBlue-5': colors.royalBlue5,
-      'royalBlue-10': colors.royalBlue10,
-      'royalBlue-20': colors.royalBlue20,
-      'royalBlue-30': colors.royalBlue30,
-      'royalBlue-40': colors.royalBlue40,
-      'royalBlue-50': colors.royalBlue50,
-      'royalBlue-60': colors.royalBlue60,
-      'royalBlue-70': colors.royalBlue70,
-      'royalBlue-80': colors.royalBlue80,
-      'royalBlue-90': colors.royalBlue90,
-    },
-    'Sky Blue': {
-      'skyBlue-5': colors.skyBlue5,
-      'skyBlue-10': colors.skyBlue10,
-      'skyBlue-20': colors.skyBlue20,
-      'skyBlue-30': colors.skyBlue30,
-      'skyBlue-40': colors.skyBlue40,
-      'skyBlue-50': colors.skyBlue50,
-      'skyBlue-60': colors.skyBlue60,
-      'skyBlue-70': colors.skyBlue70,
-      'skyBlue-80': colors.skyBlue80,
-      'skyBlue-90': colors.skyBlue90,
-    },
-    Aqua: {
-      'aqua-5': colors.aqua5,
-      'aqua-10': colors.aqua10,
-      'aqua-20': colors.aqua20,
-      'aqua-30': colors.aqua30,
-      'aqua-40': colors.aqua40,
-      'aqua-50': colors.aqua50,
-      'aqua-60': colors.aqua60,
-      'aqua-70': colors.aqua70,
-      'aqua-80': colors.aqua80,
-      'aqua-90': colors.aqua90,
-    },
-    Teal: {
-      'teal-5': colors.teal5,
-      'teal-10': colors.teal10,
-      'teal-20': colors.teal20,
-      'teal-30': colors.teal30,
-      'teal-40': colors.teal40,
-      'teal-50': colors.teal50,
-      'teal-60': colors.teal60,
-      'teal-70': colors.teal70,
-      'teal-80': colors.teal80,
-      'teal-90': colors.teal90,
-    },
-    Green: {
-      'green-5': colors.green5,
-      'green-10': colors.green10,
-      'green-20': colors.green20,
-      'green-30': colors.green30,
-      'green-40': colors.green40,
-      'green-50': colors.green50,
-      'green-60': colors.green60,
-      'green-70': colors.green70,
-      'green-80': colors.green80,
-      'green-90': colors.green90,
-    },
-    'Lime Green': {
-      'limeGreen-5': colors.limeGreen5,
-      'limeGreen-10': colors.limeGreen10,
-      'limeGreen-20': colors.limeGreen20,
-      'limeGreen-30': colors.limeGreen30,
-      'limeGreen-40': colors.limeGreen40,
-      'limeGreen-50': colors.limeGreen50,
-      'limeGreen-60': colors.limeGreen60,
-      'limeGreen-70': colors.limeGreen70,
-      'limeGreen-80': colors.limeGreen80,
-      'limeGreen-90': colors.limeGreen90,
-    },
-    Lime: {
-      'lime-5': colors.lime5,
-      'lime-10': colors.lime10,
-      'lime-20': colors.lime20,
-      'lime-30': colors.lime30,
-      'lime-40': colors.lime40,
-      'lime-50': colors.lime50,
-      'lime-60': colors.lime60,
-      'lime-70': colors.lime70,
-      'lime-80': colors.lime80,
-      'lime-90': colors.lime90,
-    },
-    Olive: {
-      'olive-5': colors.olive5,
-      'olive-10': colors.olive10,
-      'olive-20': colors.olive20,
-      'olive-30': colors.olive30,
-      'olive-40': colors.olive40,
-      'olive-50': colors.olive50,
-      'olive-60': colors.olive60,
-      'olive-70': colors.olive70,
-      'olive-80': colors.olive80,
-      'olive-90': colors.olive90,
-    },
-    Yellow: {
-      'yellow-5': colors.yellow5,
-      'yellow-10': colors.yellow10,
-      'yellow-20': colors.yellow20,
-      'yellow-30': colors.yellow30,
-      'yellow-40': colors.yellow40,
-      'yellow-50': colors.yellow50,
-      'yellow-60': colors.yellow60,
-      'yellow-70': colors.yellow70,
-      'yellow-80': colors.yellow80,
-      'yellow-90': colors.yellow90,
-    },
-    Gold: {
-      'gold-5': colors.gold5,
-      'gold-10': colors.gold10,
-      'gold-20': colors.gold20,
-      'gold-30': colors.gold30,
-      'gold-40': colors.gold40,
-      'gold-50': colors.gold50,
-      'gold-60': colors.gold60,
-      'gold-70': colors.gold70,
-      'gold-80': colors.gold80,
-      'gold-90': colors.gold90,
-    },
-    'Saddle Brown': {
-      'saddleBrown-5': colors.saddleBrown5,
-      'saddleBrown-10': colors.saddleBrown10,
-      'saddleBrown-20': colors.saddleBrown20,
-      'saddleBrown-30': colors.saddleBrown30,
-      'saddleBrown-40': colors.saddleBrown40,
-      'saddleBrown-50': colors.saddleBrown50,
-      'saddleBrown-60': colors.saddleBrown60,
-      'saddleBrown-70': colors.saddleBrown70,
-      'saddleBrown-80': colors.saddleBrown80,
-      'saddleBrown-90': colors.saddleBrown90,
-    },
-    Brown: {
-      'brown-5': colors.brown5,
-      'brown-10': colors.brown10,
-      'brown-20': colors.brown20,
-      'brown-30': colors.brown30,
-      'brown-40': colors.brown40,
-      'brown-50': colors.brown50,
-      'brown-60': colors.brown60,
-      'brown-70': colors.brown70,
-      'brown-80': colors.brown80,
-      'brown-90': colors.brown90,
-    },
-    'Dark Red': {
-      'darkRed-5': colors.darkRed5,
-      'darkRed-10': colors.darkRed10,
-      'darkRed-20': colors.darkRed20,
-      'darkRed-30': colors.darkRed30,
-      'darkRed-40': colors.darkRed40,
-      'darkRed-50': colors.darkRed50,
-      'darkRed-60': colors.darkRed60,
-      'darkRed-70': colors.darkRed70,
-      'darkRed-80': colors.darkRed80,
-      'darkRed-90': colors.darkRed90,
-    },
-    Red: {
-      'red-5': colors.red5,
-      'red-10': colors.red10,
-      'red-20': colors.red20,
-      'red-30': colors.red30,
-      'red-40': colors.red40,
-      'red-50': colors.red50,
-      'red-60': colors.red60,
-      'red-70': colors.red70,
-      'red-80': colors.red80,
-      'red-90': colors.red90,
-    },
-    Orange: {
-      'orange-5': colors.orange5,
-      'orange-10': colors.orange10,
-      'orange-20': colors.orange20,
-      'orange-30': colors.orange30,
-      'orange-40': colors.orange40,
-      'orange-50': colors.orange50,
-      'orange-60': colors.orange60,
-      'orange-70': colors.orange70,
-      'orange-80': colors.orange80,
-      'orange-90': colors.orange90,
-    },
-    Coral: {
-      'coral-5': colors.coral5,
-      'coral-10': colors.coral10,
-      'coral-20': colors.coral20,
-      'coral-30': colors.coral30,
-      'coral-40': colors.coral40,
-      'coral-50': colors.coral50,
-      'coral-60': colors.coral60,
-      'coral-70': colors.coral70,
-      'coral-80': colors.coral80,
-      'coral-90': colors.coral90,
-    },
-    Salmon: {
-      'salmon-5': colors.salmon5,
-      'salmon-10': colors.salmon10,
-      'salmon-20': colors.salmon20,
-      'salmon-30': colors.salmon30,
-      'salmon-40': colors.salmon40,
-      'salmon-50': colors.salmon50,
-      'salmon-60': colors.salmon60,
-      'salmon-70': colors.salmon70,
-      'salmon-80': colors.salmon80,
-      'salmon-90': colors.salmon90,
-    },
-    'Hot Pink': {
-      'hotPink-5': colors.hotPink5,
-      'hotPink-10': colors.hotPink10,
-      'hotPink-20': colors.hotPink20,
-      'hotPink-30': colors.hotPink30,
-      'hotPink-40': colors.hotPink40,
-      'hotPink-50': colors.hotPink50,
-      'hotPink-60': colors.hotPink60,
-      'hotPink-70': colors.hotPink70,
-      'hotPink-80': colors.hotPink80,
-      'hotPink-90': colors.hotPink90,
-    },
-    Pink: {
-      'pink-5': colors.pink5,
-      'pink-10': colors.pink10,
-      'pink-20': colors.pink20,
-      'pink-30': colors.pink30,
-      'pink-40': colors.pink40,
-      'pink-50': colors.pink50,
-      'pink-60': colors.pink60,
-      'pink-70': colors.pink70,
-      'pink-80': colors.pink80,
-      'pink-90': colors.pink90,
-    },
-    Fuchsia: {
-      'fuchsia-5': colors.fuchsia5,
-      'fuchsia-10': colors.fuchsia10,
-      'fuchsia-20': colors.fuchsia20,
-      'fuchsia-30': colors.fuchsia30,
-      'fuchsia-40': colors.fuchsia40,
-      'fuchsia-50': colors.fuchsia50,
-      'fuchsia-60': colors.fuchsia60,
-      'fuchsia-70': colors.fuchsia70,
-      'fuchsia-80': colors.fuchsia80,
-      'fuchsia-90': colors.fuchsia90,
-    },
-    Purple: {
-      'purple-5': colors.purple5,
-      'purple-10': colors.purple10,
-      'purple-20': colors.purple20,
-      'purple-30': colors.purple30,
-      'purple-40': colors.purple40,
-      'purple-50': colors.purple50,
-      'purple-60': colors.purple60,
-      'purple-70': colors.purple70,
-      'purple-80': colors.purple80,
-      'purple-90': colors.purple90,
-    },
-    'Blue Violet': {
-      'blueViolet-5': colors.blueViolet5,
-      'blueViolet-10': colors.blueViolet10,
-      'blueViolet-20': colors.blueViolet20,
-      'blueViolet-30': colors.blueViolet30,
-      'blueViolet-40': colors.blueViolet40,
-      'blueViolet-50': colors.blueViolet50,
-      'blueViolet-60': colors.blueViolet60,
-      'blueViolet-70': colors.blueViolet70,
-      'blueViolet-80': colors.blueViolet80,
-      'blueViolet-90': colors.blueViolet90,
-    },
+    Primary: [
+      ['primary-5', 'primary-5'],
+      ['primary-10', 'primary-10'],
+      ['primary-20', 'primary-20'],
+      ['primary-30', 'primary-30'],
+      ['primary-40', 'primary-40'],
+      ['primary-50', 'primary-50'],
+      ['primary-60', 'primary-60'],
+      ['primary-70', 'primary-70'],
+      ['primary-80', 'primary-80'],
+      ['primary-90', 'primary-90'],
+      ['primary-95', 'primary-95'],
+    ],
+    Secondary: [
+      ['secondary-5', 'secondary-5'],
+      ['secondary-10', 'secondary-10'],
+      ['secondary-20', 'secondary-20'],
+      ['secondary-30', 'secondary-30'],
+      ['secondary-40', 'secondary-40'],
+      ['secondary-50', 'secondary-50'],
+      ['secondary-60', 'secondary-60'],
+      ['secondary-70', 'secondary-70'],
+      ['secondary-80', 'secondary-80'],
+      ['secondary-90', 'secondary-90'],
+      ['secondary-95', 'secondary-95'],
+    ],
+    Gray: [
+      ['gray-0', 'gray-0'],
+      ['gray-5', 'gray-5'],
+      ['gray-10', 'gray-10'],
+      ['gray-20', 'gray-20'],
+      ['gray-30', 'gray-30'],
+      ['gray-40', 'gray-40'],
+      ['gray-50', 'gray-50'],
+      ['gray-60', 'gray-60'],
+      ['gray-70', 'gray-70'],
+      ['gray-80', 'gray-80'],
+      ['gray-90', 'gray-90'],
+      ['gray-95', 'gray-95'],
+      ['gray-100', 'gray-100'],
+    ],
+    Alpha: [
+      ['alpha-black100', 'alpha-black100'],
+      ['alpha-black75', 'alpha-black75'],
+      ['alpha-black50', 'alpha-black50'],
+      ['alpha-black25', 'alpha-black25'],
+      ['alpha-black10', 'alpha-black10'],
+      ['alpha-black0', 'alpha-black0'],
+      ['alpha-white100', 'alpha-white100'],
+      ['alpha-white75', 'alpha-white75'],
+      ['alpha-white50', 'alpha-white50'],
+      ['alpha-white25', 'alpha-white25'],
+      ['alpha-white10', 'alpha-white10'],
+      ['alpha-white0', 'alpha-white0'],
+    ],
+    Danger: [
+      ['danger-5', 'danger-5'],
+      ['danger-10', 'danger-10'],
+      ['danger-20', 'danger-20'],
+      ['danger-30', 'danger-30'],
+      ['danger-40', 'danger-40'],
+      ['danger-50', 'danger-50'],
+      ['danger-60', 'danger-60'],
+      ['danger-70', 'danger-70'],
+      ['danger-80', 'danger-80'],
+      ['danger-90', 'danger-90'],
+      ['danger-95', 'danger-95'],
+    ],
+    Information: [
+      ['information-5', 'information-5'],
+      ['information-10', 'information-10'],
+      ['information-20', 'information-20'],
+      ['information-30', 'information-30'],
+      ['information-40', 'information-40'],
+      ['information-50', 'information-50'],
+      ['information-60', 'information-60'],
+      ['information-70', 'information-70'],
+      ['information-80', 'information-80'],
+      ['information-90', 'information-90'],
+      ['information-95', 'information-95'],
+    ],
+    Warning: [
+      ['warning-5', 'warning-5'],
+      ['warning-10', 'warning-10'],
+      ['warning-20', 'warning-20'],
+      ['warning-30', 'warning-30'],
+      ['warning-40', 'warning-40'],
+      ['warning-50', 'warning-50'],
+      ['warning-60', 'warning-60'],
+      ['warning-70', 'warning-70'],
+      ['warning-80', 'warning-80'],
+      ['warning-90', 'warning-90'],
+      ['warning-95', 'warning-95'],
+    ],
+    Success: [
+      ['success-5', 'success-5'],
+      ['success-10', 'success-10'],
+      ['success-20', 'success-20'],
+      ['success-30', 'success-30'],
+      ['success-40', 'success-40'],
+      ['success-50', 'success-50'],
+      ['success-60', 'success-60'],
+      ['success-70', 'success-70'],
+      ['success-80', 'success-80'],
+      ['success-90', 'success-90'],
+      ['success-95', 'success-95'],
+    ],
+    Point: [
+      ['point-5', 'point-5'],
+      ['point-10', 'point-10'],
+      ['point-20', 'point-20'],
+      ['point-30', 'point-30'],
+      ['point-40', 'point-40'],
+      ['point-50', 'point-50'],
+      ['point-60', 'point-60'],
+      ['point-70', 'point-70'],
+      ['point-80', 'point-80'],
+      ['point-90', 'point-90'],
+      ['point-95', 'point-95'],
+    ],
+    Graphic: [
+      ['graphic-10', 'graphic-10'],
+      ['graphic-30', 'graphic-30'],
+      ['graphic-50', 'graphic-50'],
+      ['graphic-70', 'graphic-70'],
+      ['graphic-90', 'graphic-90'],
+    ],
   };
+
   return (
     <div
       style={{
         padding: '24px',
-        backgroundColor: '#f5f5f5',
+        backgroundColor: backgroundColor,
         minHeight: '100vh',
       }}
     >
-      <h1
-        style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: '24px' }}
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '24px',
+        }}
       >
-        Color Palette
-      </h1>
+        <h1
+          style={{
+            fontSize: '24px',
+            fontWeight: 'bold',
+            margin: 0,
+            color: headerColor,
+          }}
+        >
+          Color Palette
+        </h1>
+        <div>
+          <label style={{ marginRight: '10px', color: headerColor }}>
+            Theme Mode:{' '}
+          </label>
+          <select
+            value={mode}
+            onChange={(e) => setMode(e.target.value)}
+            style={{ padding: '8px', borderRadius: '4px' }}
+          >
+            <option value="light">Light</option>
+            <option value="high-contrast">High Contrast</option>
+          </select>
+        </div>
+      </div>
+
       <div style={{ display: 'flex', flexWrap: 'wrap', margin: '-5px' }}>
         {Object.entries(colorGroups).map(([title, groupColors]) => (
-          <ColorGroup key={title} title={title} colors={groupColors} />
+          <ColorGroup
+            key={title}
+            title={title}
+            colorEntries={groupColors}
+            mode={mode}
+          />
         ))}
       </div>
     </div>

From 4fc57a8023aa0a964a7cde97bc4020063be66185 Mon Sep 17 00:00:00 2001
From: "Lukas.J.Han" <lukas.j.han@gmail.com>
Date: Sun, 16 Mar 2025 15:22:40 +0900
Subject: [PATCH 3/3] fix: build

Signed-off-by: Lukas.J.Han <lukas.j.han@gmail.com>
---
 packages/core/lib/components/Badge.tsx        | 43 ++++++-------------
 packages/core/lib/components/Button.tsx       | 17 +-------
 .../core/lib/components/CriticalAlert.tsx     | 22 +---------
 packages/core/lib/components/LinkButton.tsx   |  5 ---
 packages/core/lib/components/Masthead.tsx     |  3 +-
 packages/core/lib/provider.tsx                |  6 ++-
 6 files changed, 22 insertions(+), 74 deletions(-)

diff --git a/packages/core/lib/components/Badge.tsx b/packages/core/lib/components/Badge.tsx
index 92af472..d3b8773 100644
--- a/packages/core/lib/components/Badge.tsx
+++ b/packages/core/lib/components/Badge.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Label } from './Label';
-import { Color } from '../colors/color.type';
 
 export type BadgeProps = {
   label: string;
@@ -13,41 +12,29 @@ export type BadgeProps = {
 const variantStyles: Record<
   NonNullable<BadgeProps['variant']>,
   {
-    fill: { style: string; color: Color };
-    stroke: { style: string; color: Color };
+    fill: { style: string };
+    stroke: { style: string };
   }
 > = {
   default: {
-    fill: { style: 'bg-gray-10', color: 'gray-70' },
-    stroke: { style: 'bg-transparent border border-gray-30', color: 'gray-70' },
+    fill: { style: 'bg-gray-10' },
+    stroke: { style: 'bg-transparent border border-gray-30' },
   },
   primary: {
-    fill: { style: 'bg-primary-10', color: 'primary-70' },
-    stroke: {
-      style: 'bg-transparent border border-primary-30',
-      color: 'primary-70',
-    },
+    fill: { style: 'bg-primary-10' },
+    stroke: { style: 'bg-transparent border border-primary-30' },
   },
   success: {
-    fill: { style: 'bg-success-10', color: 'success-70' },
-    stroke: {
-      style: 'bg-transparent border border-success-30',
-      color: 'success-70',
-    },
+    fill: { style: 'bg-success-10' },
+    stroke: { style: 'bg-transparent border border-success-30' },
   },
   warning: {
-    fill: { style: 'bg-warning-10', color: 'warning-70' },
-    stroke: {
-      style: 'bg-transparent border border-warning-30',
-      color: 'warning-70',
-    },
+    fill: { style: 'bg-warning-10' },
+    stroke: { style: 'bg-transparent border border-warning-30' },
   },
   danger: {
-    fill: { style: 'bg-danger-10', color: 'danger-70' },
-    stroke: {
-      style: 'bg-transparent border border-danger-30',
-      color: 'danger-70',
-    },
+    fill: { style: 'bg-danger-10' },
+    stroke: { style: 'bg-transparent border border-danger-30' },
   },
 };
 
@@ -71,7 +58,7 @@ export const Badge: React.FC<BadgeProps> = ({
   const variantStyle = variantStyles[variant][appearance];
   const { padding, fontSize } = sizeStyles[size];
 
-  const { style, color } = variantStyle;
+  const { style } = variantStyle;
 
   return (
     <span
@@ -79,9 +66,7 @@ export const Badge: React.FC<BadgeProps> = ({
       role="status"
       aria-label={label}
     >
-      <Label color={color} size={fontSize}>
-        {label}
-      </Label>
+      <Label size={fontSize}>{label}</Label>
     </span>
   );
 };
diff --git a/packages/core/lib/components/Button.tsx b/packages/core/lib/components/Button.tsx
index 99aab2c..10b25f0 100644
--- a/packages/core/lib/components/Button.tsx
+++ b/packages/core/lib/components/Button.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Label } from './Label';
-import { Color } from '../colors/color.type';
 
 export type ButtonProps<E extends React.ElementType> = {
   variant?: 'primary' | 'secondary' | 'tertiary' | 'text';
@@ -23,33 +22,23 @@ export const Button = <E extends React.ElementType = 'button'>({
 
   const variantStyles: {
     style: string;
-    color: Color;
     disabledStyle: string;
-    disabledColor: Color;
   } = {
     primary: {
       style: 'bg-primary hover:bg-primary-60',
-      color: 'gray-0' as Color,
       disabledStyle: 'bg-primary-20',
-      disabledColor: 'gray-0' as Color,
     },
     secondary: {
       style: 'bg-gray-0 hover:bg-primary-5 border border-primary',
-      color: 'primary' as Color,
       disabledStyle: 'bg-gray-0 border border-primary-30',
-      disabledColor: 'primary-30' as Color,
     },
     tertiary: {
       style: 'bg-gray-0 hover:bg-gray-5 border border-gray-90',
-      color: 'gray-90' as Color,
       disabledStyle: 'bg-gray-0 border border-gray-40',
-      disabledColor: 'gray-40' as Color,
     },
     text: {
       style: 'bg-transparent',
-      color: 'gray-90' as Color,
       disabledStyle: 'bg-transparent',
-      disabledColor: 'gray-40' as Color,
     },
   }[variant];
 
@@ -105,11 +94,7 @@ export const Button = <E extends React.ElementType = 'button'>({
       disabled={disabled}
       {...props}
     >
-      <Label
-        color={disabled ? variantStyles.disabledColor : variantStyles.color}
-        size={sizeStyles.fontSize}
-        className={labelStyles}
-      >
+      <Label size={sizeStyles.fontSize} className={labelStyles}>
         {children}
       </Label>
     </button>
diff --git a/packages/core/lib/components/CriticalAlert.tsx b/packages/core/lib/components/CriticalAlert.tsx
index 040c81f..e3f6980 100644
--- a/packages/core/lib/components/CriticalAlert.tsx
+++ b/packages/core/lib/components/CriticalAlert.tsx
@@ -1,5 +1,3 @@
-import { colors } from '../colors/color';
-import { Color } from '../colors/color.type';
 import { Label } from './Label';
 import { LinkButton } from './LinkButton';
 
@@ -20,23 +18,6 @@ const ALERT_TAG_MAP: Record<AlertVariant, string> = {
   info: '안내',
 } as const;
 
-const variantStyles: Record<
-  NonNullable<CriticalAlertProps['variant']>,
-  {
-    fill: { backgroundColor: string; color: Color };
-  }
-> = {
-  info: {
-    fill: { backgroundColor: colors.primary70, color: 'gray-90' },
-  },
-  ok: {
-    fill: { backgroundColor: colors.success, color: 'success-70' },
-  },
-  danger: {
-    fill: { backgroundColor: colors.danger, color: 'danger-70' },
-  },
-};
-
 export const CriticalAlert = ({
   text,
   variant,
@@ -92,7 +73,6 @@ export const CriticalAlert = ({
 };
 
 const UrgentBadge = ({ variant }: { variant: AlertVariant }) => {
-  const { backgroundColor } = variantStyles[variant].fill;
   const tag = ALERT_TAG_MAP[variant];
 
   return (
@@ -105,7 +85,7 @@ const UrgentBadge = ({ variant }: { variant: AlertVariant }) => {
             gap-1      
         `}
       style={{
-        backgroundColor,
+        backgroundColor: '', // TODO: fix
         width: '78px',
         height: '48px',
       }}
diff --git a/packages/core/lib/components/LinkButton.tsx b/packages/core/lib/components/LinkButton.tsx
index 4a10d20..84e6b0b 100644
--- a/packages/core/lib/components/LinkButton.tsx
+++ b/packages/core/lib/components/LinkButton.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Color } from '../colors/color.type';
 import { Link } from './Link';
 
 export type LinkButtonProps<E extends React.ElementType> = {
@@ -25,17 +24,14 @@ export const LinkButton = <E extends React.ElementType = 'a'>({
 
   const variantStyles: {
     style: string;
-    color: Color;
     weight: 'regular' | 'bold';
   } = {
     accent: {
       style: 'hover:bg-secondary-5',
-      color: 'primary' as Color,
       weight: 'bold' as const,
     },
     default: {
       style: 'hover:bg-secondary-5',
-      color: 'gray-90' as Color,
       weight: 'regular' as const,
     },
   }[variant];
@@ -50,7 +46,6 @@ export const LinkButton = <E extends React.ElementType = 'a'>({
     <Link
       className={`${baseStyles} ${variantStyles.style} ${className}`}
       size={linkSize}
-      color={variantStyles.color}
       href={link}
       role="link"
       weight={variantStyles.weight}
diff --git a/packages/core/lib/components/Masthead.tsx b/packages/core/lib/components/Masthead.tsx
index a9641b7..92fa75a 100644
--- a/packages/core/lib/components/Masthead.tsx
+++ b/packages/core/lib/components/Masthead.tsx
@@ -1,4 +1,3 @@
-import { colors } from '../colors/color';
 import { Label } from './Label';
 
 export type MastheadProps<E extends React.ElementType> = {
@@ -20,7 +19,7 @@ export const Masthead = <E extends React.ElementType = 'div'>({
       <div
         className="w-full flex flex-row items-center px-4 gap-5 py-2"
         style={{
-          backgroundColor: colors.secondary5,
+          backgroundColor: '', // TODO: fix
         }}
       >
         <RepublicOfKoreaFlagIcon style={flagStyle} />
diff --git a/packages/core/lib/provider.tsx b/packages/core/lib/provider.tsx
index 6b9b3b8..7fb79ce 100644
--- a/packages/core/lib/provider.tsx
+++ b/packages/core/lib/provider.tsx
@@ -72,7 +72,11 @@ export const ContextProvider: React.FC<{
   };
 
   const context: ContextProps = {
-    token: { primitive: {}, semantic: {}, component: {} },
+    token: {
+      primitive: { ...token.primitive },
+      semantic: { ...token.semantic },
+      component: { ...token.component },
+    },
     mode: themeMode,
     locale: locale,
     textSize: textSize,