Merge branch '54-foundations-color-system' into new-design-system

services/xdesign-story/src/foundations/Color/Color.ts

@@ -0,0 +1,8 @@
+import { Palette } from './Palette';
+import { lightTheme, darkTheme } from './Theme';
+
+export const color = {
+    Palette,
+    lightTheme,
+    darkTheme,
+} as const;

services/xdesign-story/src/foundations/Color/Palette/Palette.stories.mdx

@@ -0,0 +1,128 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { Palette } from './Palette';
+
+<Meta title="FOUNDATIONS/Colors/Palette" />
+
+# Palette
+
+<ColorPalette>
+    <ColorItem title="black" subtitle="Black" colors={[Palette.black]} />
+    <ColorItem title="white" subtitle="White" colors={[Palette.white]} />
+    <ColorItem
+        title="Palette.primary[0 ~ 100]"
+        subtitle="Primary"
+        colors={[
+            Palette.primary0,
+            Palette.primary10,
+            Palette.primary20,
+            Palette.primary30,
+            Palette.primary40,
+            Palette.primary50,
+            Palette.primary60,
+            Palette.primary70,
+            Palette.primary80,
+            Palette.primary90,
+            Palette.primary95,
+            Palette.primary99,
+            Palette.primary100,
+        ]}
+    />
+    <ColorItem
+        title="Palette.secondary[0 ~ 100]"
+        subtitle="Secondary"
+        colors={[
+            Palette.secondary0,
+            Palette.secondary10,
+            Palette.secondary20,
+            Palette.secondary30,
+            Palette.secondary40,
+            Palette.secondary50,
+            Palette.secondary60,
+            Palette.secondary70,
+            Palette.secondary80,
+            Palette.secondary90,
+            Palette.secondary95,
+            Palette.secondary99,
+            Palette.secondary100,
+        ]}
+    />
+    <ColorItem
+        title="Palette.tertiary[0 ~ 100]"
+        subtitle="Tertiary"
+        colors={[
+            Palette.tertiary0,
+            Palette.tertiary10,
+            Palette.tertiary20,
+            Palette.tertiary30,
+            Palette.tertiary40,
+            Palette.tertiary50,
+            Palette.tertiary60,
+            Palette.tertiary70,
+            Palette.tertiary80,
+            Palette.tertiary90,
+            Palette.tertiary95,
+            Palette.tertiary99,
+            Palette.tertiary100,
+        ]}
+    />
+    <ColorItem
+        title="Palette.error[0 ~ 100]"
+        subtitle="Error"
+        colors={[
+            Palette.error0,
+            Palette.error10,
+            Palette.error20,
+            Palette.error30,
+            Palette.error40,
+            Palette.error50,
+            Palette.error60,
+            Palette.error70,
+            Palette.error80,
+            Palette.error90,
+            Palette.error95,
+            Palette.error99,
+            Palette.error100,
+
+        ]}
+    />
+    <ColorItem
+        title="Palette.neutral[0 ~ 100]"
+        subtitle="Neutral"
+        colors={[
+            Palette.neutral0,
+            Palette.neutral10,
+            Palette.neutral20,
+            Palette.neutral30,
+            Palette.neutral40,
+            Palette.neutral50,
+            Palette.neutral60,
+            Palette.neutral70,
+            Palette.neutral80,
+            Palette.neutral90,
+            Palette.neutral95,
+            Palette.neutral99,
+            Palette.neutral100,
+
+        ]}
+    />
+    <ColorItem
+        title="Palette.neutral_variant[0 ~ 100]"
+        subtitle="Neutral Variant"
+        colors={[
+            Palette.neutral_variant0,
+            Palette.neutral_variant10,
+            Palette.neutral_variant20,
+            Palette.neutral_variant30,
+            Palette.neutral_variant40,
+            Palette.neutral_variant50,
+            Palette.neutral_variant60,
+            Palette.neutral_variant70,
+            Palette.neutral_variant80,
+            Palette.neutral_variant90,
+            Palette.neutral_variant95,
+            Palette.neutral_variant99,
+            Palette.neutral_variant100,
+        ]}
+    />
+
+</ColorPalette>

services/xdesign-story/src/foundations/Color/Palette/Palette.ts

@@ -0,0 +1,95 @@
+import { PaletteType } from './Palette.types';
+
+export const Palette: Readonly<PaletteType> = {
+    white: '#FFFFFF',
+    black: '#000000',
+    /* primary */
+    primary0: '#000000',
+    primary10: '#1D0D33',
+    primary20: '#35185C',
+    primary30: '#4D2485',
+    primary40: '#6532AD',
+    primary50: '#7E40D5',
+    primary60: '#9650FA',
+    primary70: '#AA71FB',
+    primary80: '#BE93FC',
+    primary90: '#D2B4FD',
+    primary95: '#E6D5FE',
+    primary99: '#FAF6FF',
+    primary100: '#FFFFFF',
+
+    /* secondary */
+    secondary0: '#000000',
+    secondary10: '#130C33',
+    secondary20: '#22175B',
+    secondary30: '#332382',
+    secondary40: '#4430A8',
+    secondary50: '#563ECC',
+    secondary60: '#684DF0',
+    secondary70: '#856FF3',
+    secondary80: '#A191F6',
+    secondary90: '#BEB3F9',
+    secondary95: '#DBD4FB',
+    secondary99: '#F8F6FE',
+    secondary100: '#FFFFFF',
+
+    /* tertiary */
+    tertiary0: '#000000',
+    tertiary10: '#121531',
+    tertiary20: '#212658',
+    tertiary30: '#30387D',
+    tertiary40: '#414BA2',
+    tertiary50: '#535EC6',
+    tertiary60: '#6572E9',
+    tertiary70: '#828DED',
+    tertiary80: '#A0A8F1',
+    tertiary90: '#BDC2F6',
+    tertiary95: '#DADDFA',
+    tertiary99: '#F7F8FE',
+    tertiary100: '#FFFFFF',
+
+    /* error */
+    error0: '#000000',
+    error10: '#410E0B',
+    error20: '#601410',
+    error30: '#8C1D18',
+    error40: '#B3261E',
+    error50: '#DC362E',
+    error60: '#E46962',
+    error70: '#EC928E',
+    error80: '#F2B8B5',
+    error90: '#F9DEDC',
+    error95: '#FCEEEE',
+    error99: '#FFFBF9',
+    error100: '#FFFFFF',
+
+    /* neutral */
+    neutral0: '#000000',
+    neutral10: '#1C1B1F',
+    neutral20: '#313033',
+    neutral30: '#484649',
+    neutral40: '#605D62',
+    neutral50: '#787579',
+    neutral60: '#939094',
+    neutral70: '#AEAAAE',
+    neutral80: '#C9C5CA',
+    neutral90: '#E6E1E5',
+    neutral95: '#F4EFF4',
+    neutral99: '#FFFBFE',
+    neutral100: '#FFFFFF',
+
+    /* neutral_variant */
+    neutral_variant0: '#000000',
+    neutral_variant10: '#1D1A22',
+    neutral_variant20: '#322F37',
+    neutral_variant30: '#49454F',
+    neutral_variant40: '#605D66',
+    neutral_variant50: '#79747E',
+    neutral_variant60: '#938F99',
+    neutral_variant70: '#AEA9B4',
+    neutral_variant80: '#CAC4D0',
+    neutral_variant90: '#E7E0EC',
+    neutral_variant95: '#F5EEFA',
+    neutral_variant99: '#FFFBFE',
+    neutral_variant100: '#FFFFFF',
+};

services/xdesign-story/src/foundations/Color/Palette/Palette.types.ts

@@ -0,0 +1,26 @@
+const knownColorGroupNames = [
+    'primary',
+    'secondary',
+    'tertiary',
+    'error',
+    'neutral',
+    'neutral_variant',
+] as const;
+
+export type KnownColorGroup = (typeof knownColorGroupNames)[number];
+type MakeTokenSet<
+    TGroup extends KnownColorGroup,
+    TLightness extends number[],
+> = `${TGroup}${TLightness[number]}`;
+
+export type ColorToken =
+    | 'white'
+    | 'black'
+    | MakeTokenSet<'primary', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>
+    | MakeTokenSet<'secondary', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>
+    | MakeTokenSet<'tertiary', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>
+    | MakeTokenSet<'error', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>
+    | MakeTokenSet<'neutral', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>
+    | MakeTokenSet<'neutral_variant', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 95, 99, 100]>;
+
+export type PaletteType = Record<ColorToken, string>;

services/xdesign-story/src/foundations/Color/Palette/index.ts

@@ -0,0 +1,2 @@
+export { Palette } from './Palette';
+export type { PaletteType, KnownColorGroup, ColorToken } from './Palette.types';