feat: fix color in core and add color to storybook (#44)

Signed-off-by: Lukas.J Han <[email protected]>
KRDS-community · Aug 7, 2024 · f1f6b1b · f1f6b1b
1 parent 23025c5
commit f1f6b1b
Show file tree

Hide file tree

Showing 9 changed files with 499 additions and 11 deletions.
diff --git a/packages/core/lib/colors/color.ts b/packages/core/lib/colors/color.ts
@@ -42,16 +42,16 @@ export const colors = {
 
   point: '#E71825',
   point0: '#FFFFFF',
-  point5: 'FDF2F3',
-  point10: 'FBD6D8',
-  point20: 'F5A3A8',
-  point30: 'F1747C',
-  point40: 'EC4651',
-  point50: 'E71825',
-  point60: 'B9131E',
-  point70: '8B0E16',
-  point80: '5C0A0F',
-  point90: '2E0507',
+  point5: '#FDF2F3',
+  point10: '#FBD6D8',
+  point20: '#F5A3A8',
+  point30: '#F1747C',
+  point40: '#EC4651',
+  point50: '#E71825',
+  point60: '#B9131E',
+  point70: '#8B0E16',
+  point80: '#5C0A0F',
+  point90: '#2E0507',
   point100: '#000000',
 
   danger: '#EB003B',
@@ -334,11 +334,15 @@ export const colors = {
   pink90: '#33041D',
 
   fuchsia5: '#FDF2FD',
-  fuchsia10: '#F901F9',
+  fuchsia10: '#F9D1F9',
   fuchsia20: '#F2A3F2',
   fuchsia30: '#EC75EC',
   fuchsia40: '#E547E5',
   fuchsia50: '#DF19DF',
+  fuchsia60: '#B214B2',
+  fuchsia70: '#8B0F8B',
+  fuchsia80: '#590A59',
+  fuchsia90: '#2D052D',
 
   purple5: '#F5EEF7',
   purple10: '#E1CCE6',

diff --git a/stories/core/Body.stories.ts b/stories/core/Body.stories.ts
@@ -31,6 +31,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Detail.stories.ts b/stories/core/Detail.stories.ts
@@ -31,6 +31,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Display.stories.ts b/stories/core/Display.stories.ts
@@ -31,6 +31,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Heading.stories.ts b/stories/core/Heading.stories.ts
@@ -31,6 +31,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Label.stories.ts b/stories/core/Label.stories.ts
@@ -32,6 +32,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Link.stories.ts b/stories/core/Link.stories.ts
@@ -31,6 +31,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args

diff --git a/stories/core/Title.stories.ts b/stories/core/Title.stories.ts
@@ -34,6 +34,8 @@ const meta = {
   argTypes: {
     color: {
       control: { type: 'text' },
+      description:
+        'Primary, Secondary, Gray, Point, Danger, Warning, Success, Info 컬러 지원',
     },
   },
   // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args