chore: base 디자인 토큰 세팅

packages/core/sds/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "exports": {
-    ".": "./src/index.ts"
+    ".": "./src/index.ts",
+    "./theme": "./src/theme/index.ts"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0"

packages/core/sds/src/index.ts

@@ -1,4 +1,3 @@
 export { Button } from './components/Button';
 export { Card } from './components/Card';
 export { Code } from './components/Code';
-export { colors } from './theme/colors';

packages/core/sds/src/theme/borderRadius.ts

@@ -0,0 +1,7 @@
+export const borderRadius = {
+  none: '0px',
+  xsmall: '4px',
+  small: '8px',
+  medium: '16px',
+  round: '100px',
+};

packages/core/sds/src/theme/colors.ts

@@ -1 +1,12 @@
-export const colors = {};
+export const colors = {
+  black: '#000000',
+  white: '#FFFFFF',
+  grey800: '#1F1F1F',
+  grey700: '#4B4B4B',
+  grey600: '#8E8E8E',
+  grey500: '#CACACA',
+  grey400: '#E1E1E1',
+  grey300: '#EEEEEE',
+  grey200: '#F5F5F5',
+  grey100: '#F5F5F5',
+};

packages/core/sds/src/theme/index.ts

@@ -0,0 +1,4 @@
+export { borderRadius } from './borderRadius';
+export { colors } from './colors';
+export { opacity } from './opacity';
+export { shadow } from './shadow';

packages/core/sds/src/theme/opacity.ts

@@ -0,0 +1,7 @@
+export const opacity = {
+  level1: '0%',
+  level2: '20%',
+  level3: '40%',
+  level4: '60%',
+  level5: '80%',
+};

packages/core/sds/src/theme/shadow.ts

@@ -0,0 +1,6 @@
+export const shadow = {
+  elevation1: '0px 2px 4px 0px rgba(0, 0, 0, 0.10)',
+  elevation2: '0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 2px 8px 0px rgba(0, 0, 0, 0.14)',
+  elevation3: '0px 1px 6px 0px rgba(0, 0, 0, 0.12), 0px 4px 12px 0px rgba(0, 0, 0, 0.20)',
+  elevation4: '0px 1px 8px 0px rgba(0, 0, 0, 0.12), 0px 8px 20px 0px rgba(0, 0, 0, 0.20)',
+};