@pisodev/test-component-library 1.0.2 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -34
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +109 -4
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +110 -2
- package/dist/index.js.map +1 -1
- package/dist/theme/ThemeProvider.d.ts +12 -0
- package/dist/theme/defaultTheme.d.ts +2 -0
- package/dist/theme/index.d.ts +3 -0
- package/dist/theme/types.d.ts +23 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,61 +10,59 @@ npm install @pisodev/test-component-library
|
|
|
10
10
|
|
|
11
11
|
## 사용법
|
|
12
12
|
|
|
13
|
+
### 기본 사용
|
|
14
|
+
|
|
13
15
|
```tsx
|
|
14
|
-
import {
|
|
16
|
+
import { Anchor, ThemeProvider } from '@pisodev/test-component-library';
|
|
15
17
|
|
|
16
18
|
function App() {
|
|
17
19
|
return (
|
|
18
|
-
<
|
|
19
|
-
<p>컴포넌트 라이브러리 예시입니다.</p>
|
|
20
|
-
<Button variant="primary" onClick={() => alert('클릭!')}>
|
|
21
|
-
시작하기
|
|
22
|
-
</Button>
|
|
20
|
+
<ThemeProvider>
|
|
23
21
|
<Anchor
|
|
24
22
|
href="https://example.com"
|
|
25
23
|
rel="noopener noreferrer"
|
|
26
24
|
title="예시 사이트로 이동"
|
|
25
|
+
target="_blank"
|
|
27
26
|
>
|
|
28
|
-
|
|
27
|
+
외부 링크
|
|
29
28
|
</Anchor>
|
|
30
|
-
</
|
|
29
|
+
</ThemeProvider>
|
|
31
30
|
);
|
|
32
31
|
}
|
|
33
32
|
```
|
|
34
33
|
|
|
35
|
-
###
|
|
34
|
+
### 테마 커스터마이징
|
|
35
|
+
|
|
36
|
+
컬러 시스템을 커스터마이징하여 브랜드 컬러를 적용할 수 있습니다.
|
|
36
37
|
|
|
37
38
|
```tsx
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
39
|
+
import { ThemeProvider } from '@pisodev/test-component-library';
|
|
40
|
+
|
|
41
|
+
function App() {
|
|
42
|
+
return (
|
|
43
|
+
<ThemeProvider
|
|
44
|
+
colors={{
|
|
45
|
+
primary: {
|
|
46
|
+
600: '#ff6b6b', // 링크의 기본 색상
|
|
47
|
+
700: '#ee5a52', // hover 상태 색상
|
|
48
|
+
},
|
|
49
|
+
}}
|
|
50
|
+
>
|
|
51
|
+
<YourApp />
|
|
52
|
+
</ThemeProvider>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
41
55
|
```
|
|
42
56
|
|
|
43
|
-
|
|
44
|
-
- `variant`: `'primary'` | `'secondary'` | `'outline'` (기본값: `'primary'`)
|
|
45
|
-
- `size`: `'small'` | `'medium'` | `'large'` (기본값: `'medium'`)
|
|
46
|
-
- `disabled`: `boolean`
|
|
47
|
-
- `onClick`: `() => void`
|
|
57
|
+
**사용 가능한 컬러 스케일**: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
|
|
48
58
|
|
|
49
|
-
|
|
59
|
+
**기본 제공 컬러**: `primary`, `secondary`, `success`, `warning`, `danger`
|
|
50
60
|
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
subtitle="부제목"
|
|
55
|
-
variant="elevated"
|
|
56
|
-
footer={<button>액션</button>}
|
|
57
|
-
>
|
|
58
|
-
내용
|
|
59
|
-
</Card>
|
|
60
|
-
```
|
|
61
|
+
**컬러 변경 방법**:
|
|
62
|
+
- 일부 스케일만 변경: 필요한 스케일만 지정하면 나머지는 기본값 유지
|
|
63
|
+
- 새 컬러 추가: 원하는 이름으로 새로운 컬러 스케일 추가 가능
|
|
61
64
|
|
|
62
|
-
|
|
63
|
-
- `title`: `string`
|
|
64
|
-
- `subtitle`: `string`
|
|
65
|
-
- `variant`: `'default'` | `'elevated'` | `'outlined'` (기본값: `'default'`)
|
|
66
|
-
- `footer`: `React.ReactNode`
|
|
67
|
-
- `onClick`: `() => void`
|
|
65
|
+
## 컴포넌트
|
|
68
66
|
|
|
69
67
|
### Anchor
|
|
70
68
|
|
package/dist/index.d.ts
CHANGED
package/dist/index.esm.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { createContext, useMemo, useContext } from 'react';
|
|
2
2
|
|
|
3
3
|
function styleInject(css, ref) {
|
|
4
4
|
if ( ref === void 0 ) ref = {};
|
|
@@ -27,7 +27,7 @@ function styleInject(css, ref) {
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color
|
|
30
|
+
var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-primary-600,#2196f3);color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-primary-700,#1976d2)}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-secondary-600,#8e24aa);color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-secondary-700,#7b1fa2)}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid var(--color-primary-600,#2196f3);color:var(--color-primary-600,#2196f3)}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:var(--color-primary-600,#2196f3);color:#fff}";
|
|
31
31
|
var styles$2 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
|
|
32
32
|
styleInject(css_248z$2);
|
|
33
33
|
|
|
@@ -64,7 +64,7 @@ const Card = ({ children, title, subtitle, footer, variant = 'default', classNam
|
|
|
64
64
|
footer && React.createElement("div", { className: styles$1.footer }, footer)));
|
|
65
65
|
};
|
|
66
66
|
|
|
67
|
-
var css_248z = ".Anchor-module_anchor__uhpem{color
|
|
67
|
+
var css_248z = ".Anchor-module_anchor__uhpem{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:var(--color-primary-800,#1565c0)}.Anchor-module_anchor__uhpem:active{color:var(--color-primary-900,#0d47a1)}";
|
|
68
68
|
var styles = {"anchor":"Anchor-module_anchor__uhpem"};
|
|
69
69
|
styleInject(css_248z);
|
|
70
70
|
|
|
@@ -73,5 +73,110 @@ const Anchor = ({ children, href, rel, title, target = '_self', className = '',
|
|
|
73
73
|
return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: onClick }, children));
|
|
74
74
|
};
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
const defaultTheme = {
|
|
77
|
+
colors: {
|
|
78
|
+
primary: {
|
|
79
|
+
50: '#e3f2fd',
|
|
80
|
+
100: '#bbdefb',
|
|
81
|
+
200: '#90caf9',
|
|
82
|
+
300: '#64b5f6',
|
|
83
|
+
400: '#42a5f5',
|
|
84
|
+
500: '#2196f3',
|
|
85
|
+
600: '#1e88e5',
|
|
86
|
+
700: '#1976d2',
|
|
87
|
+
800: '#1565c0',
|
|
88
|
+
900: '#0d47a1',
|
|
89
|
+
},
|
|
90
|
+
secondary: {
|
|
91
|
+
50: '#f3e5f5',
|
|
92
|
+
100: '#e1bee7',
|
|
93
|
+
200: '#ce93d8',
|
|
94
|
+
300: '#ba68c8',
|
|
95
|
+
400: '#ab47bc',
|
|
96
|
+
500: '#9c27b0',
|
|
97
|
+
600: '#8e24aa',
|
|
98
|
+
700: '#7b1fa2',
|
|
99
|
+
800: '#6a1b9a',
|
|
100
|
+
900: '#4a148c',
|
|
101
|
+
},
|
|
102
|
+
success: {
|
|
103
|
+
50: '#e8f5e9',
|
|
104
|
+
100: '#c8e6c9',
|
|
105
|
+
200: '#a5d6a7',
|
|
106
|
+
300: '#81c784',
|
|
107
|
+
400: '#66bb6a',
|
|
108
|
+
500: '#4caf50',
|
|
109
|
+
600: '#43a047',
|
|
110
|
+
700: '#388e3c',
|
|
111
|
+
800: '#2e7d32',
|
|
112
|
+
900: '#1b5e20',
|
|
113
|
+
},
|
|
114
|
+
warning: {
|
|
115
|
+
50: '#fff3e0',
|
|
116
|
+
100: '#ffe0b2',
|
|
117
|
+
200: '#ffcc80',
|
|
118
|
+
300: '#ffb74d',
|
|
119
|
+
400: '#ffa726',
|
|
120
|
+
500: '#ff9800',
|
|
121
|
+
600: '#fb8c00',
|
|
122
|
+
700: '#f57c00',
|
|
123
|
+
800: '#ef6c00',
|
|
124
|
+
900: '#e65100',
|
|
125
|
+
},
|
|
126
|
+
danger: {
|
|
127
|
+
50: '#ffebee',
|
|
128
|
+
100: '#ffcdd2',
|
|
129
|
+
200: '#ef9a9a',
|
|
130
|
+
300: '#e57373',
|
|
131
|
+
400: '#ef5350',
|
|
132
|
+
500: '#f44336',
|
|
133
|
+
600: '#e53935',
|
|
134
|
+
700: '#d32f2f',
|
|
135
|
+
800: '#c62828',
|
|
136
|
+
900: '#b71c1c',
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
};
|
|
140
|
+
|
|
141
|
+
const ThemeContext = createContext(undefined);
|
|
142
|
+
function mergeColors(defaultColors, customColors) {
|
|
143
|
+
if (!customColors)
|
|
144
|
+
return defaultColors;
|
|
145
|
+
const merged = Object.assign({}, defaultColors);
|
|
146
|
+
Object.keys(customColors).forEach((colorKey) => {
|
|
147
|
+
const customColorScale = customColors[colorKey];
|
|
148
|
+
if (customColorScale) {
|
|
149
|
+
merged[colorKey] = Object.assign(Object.assign({}, defaultColors[colorKey]), customColorScale);
|
|
150
|
+
}
|
|
151
|
+
});
|
|
152
|
+
return merged;
|
|
153
|
+
}
|
|
154
|
+
const ThemeProvider = ({ children, colors, }) => {
|
|
155
|
+
const theme = useMemo(() => {
|
|
156
|
+
return {
|
|
157
|
+
colors: mergeColors(defaultTheme.colors, colors),
|
|
158
|
+
};
|
|
159
|
+
}, [colors]);
|
|
160
|
+
// CSS Variables를 설정
|
|
161
|
+
React.useEffect(() => {
|
|
162
|
+
const root = document.documentElement;
|
|
163
|
+
Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
|
|
164
|
+
if (colorScale) {
|
|
165
|
+
Object.entries(colorScale).forEach(([scale, value]) => {
|
|
166
|
+
root.style.setProperty(`--color-${colorName}-${scale}`, value);
|
|
167
|
+
});
|
|
168
|
+
}
|
|
169
|
+
});
|
|
170
|
+
}, [theme]);
|
|
171
|
+
return (React.createElement(ThemeContext.Provider, { value: { theme } }, children));
|
|
172
|
+
};
|
|
173
|
+
const useTheme = () => {
|
|
174
|
+
const context = useContext(ThemeContext);
|
|
175
|
+
if (!context) {
|
|
176
|
+
throw new Error('useTheme must be used within a ThemeProvider');
|
|
177
|
+
}
|
|
178
|
+
return context;
|
|
179
|
+
};
|
|
180
|
+
|
|
181
|
+
export { Anchor, Button, Card, ThemeProvider, defaultTheme, useTheme };
|
|
77
182
|
//# sourceMappingURL=index.esm.js.map
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx","../src/theme/defaultTheme.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n","import { Theme } from './types';\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: {\n 50: '#e3f2fd',\n 100: '#bbdefb',\n 200: '#90caf9',\n 300: '#64b5f6',\n 400: '#42a5f5',\n 500: '#2196f3',\n 600: '#1e88e5',\n 700: '#1976d2',\n 800: '#1565c0',\n 900: '#0d47a1',\n },\n secondary: {\n 50: '#f3e5f5',\n 100: '#e1bee7',\n 200: '#ce93d8',\n 300: '#ba68c8',\n 400: '#ab47bc',\n 500: '#9c27b0',\n 600: '#8e24aa',\n 700: '#7b1fa2',\n 800: '#6a1b9a',\n 900: '#4a148c',\n },\n success: {\n 50: '#e8f5e9',\n 100: '#c8e6c9',\n 200: '#a5d6a7',\n 300: '#81c784',\n 400: '#66bb6a',\n 500: '#4caf50',\n 600: '#43a047',\n 700: '#388e3c',\n 800: '#2e7d32',\n 900: '#1b5e20',\n },\n warning: {\n 50: '#fff3e0',\n 100: '#ffe0b2',\n 200: '#ffcc80',\n 300: '#ffb74d',\n 400: '#ffa726',\n 500: '#ff9800',\n 600: '#fb8c00',\n 700: '#f57c00',\n 800: '#ef6c00',\n 900: '#e65100',\n },\n danger: {\n 50: '#ffebee',\n 100: '#ffcdd2',\n 200: '#ef9a9a',\n 300: '#e57373',\n 400: '#ef5350',\n 500: '#f44336',\n 600: '#e53935',\n 700: '#d32f2f',\n 800: '#c62828',\n 900: '#b71c1c',\n },\n },\n};\n","import React, { createContext, useContext, useMemo } from 'react';\nimport { Theme, ThemeColors } from './types';\nimport { defaultTheme } from './defaultTheme';\n\ninterface ThemeContextValue {\n theme: Theme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n colors?: ThemeColors;\n}\n\nfunction mergeColors(\n defaultColors: ThemeColors,\n customColors?: ThemeColors\n): ThemeColors {\n if (!customColors) return defaultColors;\n\n const merged: ThemeColors = { ...defaultColors };\n\n Object.keys(customColors).forEach((colorKey) => {\n const customColorScale = customColors[colorKey];\n if (customColorScale) {\n merged[colorKey] = {\n ...defaultColors[colorKey],\n ...customColorScale,\n };\n }\n });\n\n return merged;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n colors,\n}) => {\n const theme = useMemo(() => {\n return {\n colors: mergeColors(defaultTheme.colors, colors),\n };\n }, [colors]);\n\n // CSS Variables를 설정\n React.useEffect(() => {\n const root = document.documentElement;\n\n Object.entries(theme.colors).forEach(([colorName, colorScale]) => {\n if (colorScale) {\n Object.entries(colorScale).forEach(([scale, value]) => {\n root.style.setProperty(`--color-${colorName}-${scale}`, value);\n });\n }\n });\n }, [theme]);\n\n return (\n <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|
package/dist/index.js
CHANGED
|
@@ -29,7 +29,7 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color
|
|
32
|
+
var css_248z$2 = ".Button-module_button__18Bed{border:none;border-radius:4px;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-weight:500;transition:all .3s ease}.Button-module_button__18Bed:disabled{cursor:not-allowed;opacity:.6}.Button-module_button__18Bed:not(:disabled):hover{box-shadow:0 4px 8px rgba(0,0,0,.15);transform:translateY(-1px)}.Button-module_button__18Bed:not(:disabled):active{transform:translateY(0)}.Button-module_button__18Bed.Button-module_small__zfmcP{font-size:14px;padding:6px 12px}.Button-module_button__18Bed.Button-module_medium__HYxwi{font-size:16px;padding:10px 20px}.Button-module_button__18Bed.Button-module_large__iWceB{font-size:18px;padding:14px 28px}.Button-module_button__18Bed.Button-module_primary__st6yY{background-color:var(--color-primary-600,#2196f3);color:#fff}.Button-module_button__18Bed.Button-module_primary__st6yY:not(:disabled):hover{background-color:var(--color-primary-700,#1976d2)}.Button-module_button__18Bed.Button-module_secondary__j-3rj{background-color:var(--color-secondary-600,#8e24aa);color:#fff}.Button-module_button__18Bed.Button-module_secondary__j-3rj:not(:disabled):hover{background-color:var(--color-secondary-700,#7b1fa2)}.Button-module_button__18Bed.Button-module_outline__TFr94{background-color:transparent;border:2px solid var(--color-primary-600,#2196f3);color:var(--color-primary-600,#2196f3)}.Button-module_button__18Bed.Button-module_outline__TFr94:not(:disabled):hover{background-color:var(--color-primary-600,#2196f3);color:#fff}";
|
|
33
33
|
var styles$2 = {"button":"Button-module_button__18Bed","small":"Button-module_small__zfmcP","medium":"Button-module_medium__HYxwi","large":"Button-module_large__iWceB","primary":"Button-module_primary__st6yY","secondary":"Button-module_secondary__j-3rj","outline":"Button-module_outline__TFr94"};
|
|
34
34
|
styleInject(css_248z$2);
|
|
35
35
|
|
|
@@ -66,7 +66,7 @@ const Card = ({ children, title, subtitle, footer, variant = 'default', classNam
|
|
|
66
66
|
footer && React.createElement("div", { className: styles$1.footer }, footer)));
|
|
67
67
|
};
|
|
68
68
|
|
|
69
|
-
var css_248z = ".Anchor-module_anchor__uhpem{color
|
|
69
|
+
var css_248z = ".Anchor-module_anchor__uhpem{color:var(--color-primary-600,#2196f3);cursor:pointer;position:relative;text-decoration:none;transition:all .2s ease}.Anchor-module_anchor__uhpem:hover{color:var(--color-primary-700,#1976d2);text-decoration:underline}.Anchor-module_anchor__uhpem:focus{outline:2px solid var(--color-primary-600,#2196f3);outline-offset:2px}.Anchor-module_anchor__uhpem:visited{color:var(--color-primary-800,#1565c0)}.Anchor-module_anchor__uhpem:active{color:var(--color-primary-900,#0d47a1)}";
|
|
70
70
|
var styles = {"anchor":"Anchor-module_anchor__uhpem"};
|
|
71
71
|
styleInject(css_248z);
|
|
72
72
|
|
|
@@ -75,7 +75,115 @@ const Anchor = ({ children, href, rel, title, target = '_self', className = '',
|
|
|
75
75
|
return (React.createElement("a", { href: href, rel: rel, title: title, target: target, className: anchorClasses, onClick: onClick }, children));
|
|
76
76
|
};
|
|
77
77
|
|
|
78
|
+
const defaultTheme = {
|
|
79
|
+
colors: {
|
|
80
|
+
primary: {
|
|
81
|
+
50: '#e3f2fd',
|
|
82
|
+
100: '#bbdefb',
|
|
83
|
+
200: '#90caf9',
|
|
84
|
+
300: '#64b5f6',
|
|
85
|
+
400: '#42a5f5',
|
|
86
|
+
500: '#2196f3',
|
|
87
|
+
600: '#1e88e5',
|
|
88
|
+
700: '#1976d2',
|
|
89
|
+
800: '#1565c0',
|
|
90
|
+
900: '#0d47a1',
|
|
91
|
+
},
|
|
92
|
+
secondary: {
|
|
93
|
+
50: '#f3e5f5',
|
|
94
|
+
100: '#e1bee7',
|
|
95
|
+
200: '#ce93d8',
|
|
96
|
+
300: '#ba68c8',
|
|
97
|
+
400: '#ab47bc',
|
|
98
|
+
500: '#9c27b0',
|
|
99
|
+
600: '#8e24aa',
|
|
100
|
+
700: '#7b1fa2',
|
|
101
|
+
800: '#6a1b9a',
|
|
102
|
+
900: '#4a148c',
|
|
103
|
+
},
|
|
104
|
+
success: {
|
|
105
|
+
50: '#e8f5e9',
|
|
106
|
+
100: '#c8e6c9',
|
|
107
|
+
200: '#a5d6a7',
|
|
108
|
+
300: '#81c784',
|
|
109
|
+
400: '#66bb6a',
|
|
110
|
+
500: '#4caf50',
|
|
111
|
+
600: '#43a047',
|
|
112
|
+
700: '#388e3c',
|
|
113
|
+
800: '#2e7d32',
|
|
114
|
+
900: '#1b5e20',
|
|
115
|
+
},
|
|
116
|
+
warning: {
|
|
117
|
+
50: '#fff3e0',
|
|
118
|
+
100: '#ffe0b2',
|
|
119
|
+
200: '#ffcc80',
|
|
120
|
+
300: '#ffb74d',
|
|
121
|
+
400: '#ffa726',
|
|
122
|
+
500: '#ff9800',
|
|
123
|
+
600: '#fb8c00',
|
|
124
|
+
700: '#f57c00',
|
|
125
|
+
800: '#ef6c00',
|
|
126
|
+
900: '#e65100',
|
|
127
|
+
},
|
|
128
|
+
danger: {
|
|
129
|
+
50: '#ffebee',
|
|
130
|
+
100: '#ffcdd2',
|
|
131
|
+
200: '#ef9a9a',
|
|
132
|
+
300: '#e57373',
|
|
133
|
+
400: '#ef5350',
|
|
134
|
+
500: '#f44336',
|
|
135
|
+
600: '#e53935',
|
|
136
|
+
700: '#d32f2f',
|
|
137
|
+
800: '#c62828',
|
|
138
|
+
900: '#b71c1c',
|
|
139
|
+
},
|
|
140
|
+
},
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
const ThemeContext = React.createContext(undefined);
|
|
144
|
+
function mergeColors(defaultColors, customColors) {
|
|
145
|
+
if (!customColors)
|
|
146
|
+
return defaultColors;
|
|
147
|
+
const merged = Object.assign({}, defaultColors);
|
|
148
|
+
Object.keys(customColors).forEach((colorKey) => {
|
|
149
|
+
const customColorScale = customColors[colorKey];
|
|
150
|
+
if (customColorScale) {
|
|
151
|
+
merged[colorKey] = Object.assign(Object.assign({}, defaultColors[colorKey]), customColorScale);
|
|
152
|
+
}
|
|
153
|
+
});
|
|
154
|
+
return merged;
|
|
155
|
+
}
|
|
156
|
+
const ThemeProvider = ({ children, colors, }) => {
|
|
157
|
+
const theme = React.useMemo(() => {
|
|
158
|
+
return {
|
|
159
|
+
colors: mergeColors(defaultTheme.colors, colors),
|
|
160
|
+
};
|
|
161
|
+
}, [colors]);
|
|
162
|
+
// CSS Variables를 설정
|
|
163
|
+
React.useEffect(() => {
|
|
164
|
+
const root = document.documentElement;
|
|
165
|
+
Object.entries(theme.colors).forEach(([colorName, colorScale]) => {
|
|
166
|
+
if (colorScale) {
|
|
167
|
+
Object.entries(colorScale).forEach(([scale, value]) => {
|
|
168
|
+
root.style.setProperty(`--color-${colorName}-${scale}`, value);
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
});
|
|
172
|
+
}, [theme]);
|
|
173
|
+
return (React.createElement(ThemeContext.Provider, { value: { theme } }, children));
|
|
174
|
+
};
|
|
175
|
+
const useTheme = () => {
|
|
176
|
+
const context = React.useContext(ThemeContext);
|
|
177
|
+
if (!context) {
|
|
178
|
+
throw new Error('useTheme must be used within a ThemeProvider');
|
|
179
|
+
}
|
|
180
|
+
return context;
|
|
181
|
+
};
|
|
182
|
+
|
|
78
183
|
exports.Anchor = Anchor;
|
|
79
184
|
exports.Button = Button;
|
|
80
185
|
exports.Card = Card;
|
|
186
|
+
exports.ThemeProvider = ThemeProvider;
|
|
187
|
+
exports.defaultTheme = defaultTheme;
|
|
188
|
+
exports.useTheme = useTheme;
|
|
81
189
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n"],"names":["styles"],"mappings":"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","x_google_ignoreList":[0]}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../node_modules/style-inject/dist/style-inject.es.js","../src/components/Button/Button.tsx","../src/components/Card/Card.tsx","../src/components/Anchor/Anchor.tsx","../src/theme/defaultTheme.ts","../src/theme/ThemeProvider.tsx"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n","import React from 'react';\nimport styles from './Button.module.scss';\n\nexport interface ButtonProps {\n children: React.ReactNode;\n variant?: 'primary' | 'secondary' | 'outline';\n size?: 'small' | 'medium' | 'large';\n onClick?: () => void;\n disabled?: boolean;\n type?: 'button' | 'submit' | 'reset';\n className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n children,\n variant = 'primary',\n size = 'medium',\n onClick,\n disabled = false,\n type = 'button',\n className = '',\n}) => {\n const buttonClasses = [\n styles.button,\n styles[variant],\n styles[size],\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <button\n className={buttonClasses}\n onClick={onClick}\n disabled={disabled}\n type={type}\n >\n {children}\n </button>\n );\n};\n","import React from 'react';\nimport styles from './Card.module.scss';\n\nexport interface CardProps {\n children: React.ReactNode;\n title?: string;\n subtitle?: string;\n footer?: React.ReactNode;\n variant?: 'default' | 'elevated' | 'outlined';\n className?: string;\n onClick?: () => void;\n}\n\nexport const Card: React.FC<CardProps> = ({\n children,\n title,\n subtitle,\n footer,\n variant = 'default',\n className = '',\n onClick,\n}) => {\n const cardClasses = [\n styles.card,\n styles[variant],\n onClick ? styles.clickable : '',\n className,\n ]\n .filter(Boolean)\n .join(' ');\n\n return (\n <div className={cardClasses} onClick={onClick}>\n {(title || subtitle) && (\n <div className={styles.header}>\n {title && <h3 className={styles.title}>{title}</h3>}\n {subtitle && <p className={styles.subtitle}>{subtitle}</p>}\n </div>\n )}\n <div className={styles.content}>{children}</div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n};\n","import React from 'react';\nimport styles from './Anchor.module.scss';\n\nexport interface AnchorProps {\n children: React.ReactNode;\n href: string;\n rel: string;\n title: string;\n target?: '_blank' | '_self' | '_parent' | '_top';\n className?: string;\n onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;\n}\n\nexport const Anchor: React.FC<AnchorProps> = ({\n children,\n href,\n rel,\n title,\n target = '_self',\n className = '',\n onClick,\n}) => {\n const anchorClasses = [styles.anchor, className].filter(Boolean).join(' ');\n\n return (\n <a\n href={href}\n rel={rel}\n title={title}\n target={target}\n className={anchorClasses}\n onClick={onClick}\n >\n {children}\n </a>\n );\n};\n","import { Theme } from './types';\n\nexport const defaultTheme: Theme = {\n colors: {\n primary: {\n 50: '#e3f2fd',\n 100: '#bbdefb',\n 200: '#90caf9',\n 300: '#64b5f6',\n 400: '#42a5f5',\n 500: '#2196f3',\n 600: '#1e88e5',\n 700: '#1976d2',\n 800: '#1565c0',\n 900: '#0d47a1',\n },\n secondary: {\n 50: '#f3e5f5',\n 100: '#e1bee7',\n 200: '#ce93d8',\n 300: '#ba68c8',\n 400: '#ab47bc',\n 500: '#9c27b0',\n 600: '#8e24aa',\n 700: '#7b1fa2',\n 800: '#6a1b9a',\n 900: '#4a148c',\n },\n success: {\n 50: '#e8f5e9',\n 100: '#c8e6c9',\n 200: '#a5d6a7',\n 300: '#81c784',\n 400: '#66bb6a',\n 500: '#4caf50',\n 600: '#43a047',\n 700: '#388e3c',\n 800: '#2e7d32',\n 900: '#1b5e20',\n },\n warning: {\n 50: '#fff3e0',\n 100: '#ffe0b2',\n 200: '#ffcc80',\n 300: '#ffb74d',\n 400: '#ffa726',\n 500: '#ff9800',\n 600: '#fb8c00',\n 700: '#f57c00',\n 800: '#ef6c00',\n 900: '#e65100',\n },\n danger: {\n 50: '#ffebee',\n 100: '#ffcdd2',\n 200: '#ef9a9a',\n 300: '#e57373',\n 400: '#ef5350',\n 500: '#f44336',\n 600: '#e53935',\n 700: '#d32f2f',\n 800: '#c62828',\n 900: '#b71c1c',\n },\n },\n};\n","import React, { createContext, useContext, useMemo } from 'react';\nimport { Theme, ThemeColors } from './types';\nimport { defaultTheme } from './defaultTheme';\n\ninterface ThemeContextValue {\n theme: Theme;\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined);\n\ninterface ThemeProviderProps {\n children: React.ReactNode;\n colors?: ThemeColors;\n}\n\nfunction mergeColors(\n defaultColors: ThemeColors,\n customColors?: ThemeColors\n): ThemeColors {\n if (!customColors) return defaultColors;\n\n const merged: ThemeColors = { ...defaultColors };\n\n Object.keys(customColors).forEach((colorKey) => {\n const customColorScale = customColors[colorKey];\n if (customColorScale) {\n merged[colorKey] = {\n ...defaultColors[colorKey],\n ...customColorScale,\n };\n }\n });\n\n return merged;\n}\n\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n children,\n colors,\n}) => {\n const theme = useMemo(() => {\n return {\n colors: mergeColors(defaultTheme.colors, colors),\n };\n }, [colors]);\n\n // CSS Variables를 설정\n React.useEffect(() => {\n const root = document.documentElement;\n\n Object.entries(theme.colors).forEach(([colorName, colorScale]) => {\n if (colorScale) {\n Object.entries(colorScale).forEach(([scale, value]) => {\n root.style.setProperty(`--color-${colorName}-${scale}`, value);\n });\n }\n });\n }, [theme]);\n\n return (\n <ThemeContext.Provider value={{ theme }}>{children}</ThemeContext.Provider>\n );\n};\n\nexport const useTheme = (): ThemeContextValue => {\n const context = useContext(ThemeContext);\n if (!context) {\n throw new Error('useTheme must be used within a ThemeProvider');\n }\n return context;\n};\n"],"names":["styles","createContext","useMemo","useContext"],"mappings":"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","x_google_ignoreList":[0]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Theme, ThemeColors } from './types';
|
|
3
|
+
interface ThemeContextValue {
|
|
4
|
+
theme: Theme;
|
|
5
|
+
}
|
|
6
|
+
interface ThemeProviderProps {
|
|
7
|
+
children: React.ReactNode;
|
|
8
|
+
colors?: ThemeColors;
|
|
9
|
+
}
|
|
10
|
+
export declare const ThemeProvider: React.FC<ThemeProviderProps>;
|
|
11
|
+
export declare const useTheme: () => ThemeContextValue;
|
|
12
|
+
export {};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export interface ColorScale {
|
|
2
|
+
50: string;
|
|
3
|
+
100: string;
|
|
4
|
+
200: string;
|
|
5
|
+
300: string;
|
|
6
|
+
400: string;
|
|
7
|
+
500: string;
|
|
8
|
+
600: string;
|
|
9
|
+
700: string;
|
|
10
|
+
800: string;
|
|
11
|
+
900: string;
|
|
12
|
+
}
|
|
13
|
+
export interface ThemeColors {
|
|
14
|
+
primary?: Partial<ColorScale>;
|
|
15
|
+
secondary?: Partial<ColorScale>;
|
|
16
|
+
success?: Partial<ColorScale>;
|
|
17
|
+
warning?: Partial<ColorScale>;
|
|
18
|
+
danger?: Partial<ColorScale>;
|
|
19
|
+
[key: string]: Partial<ColorScale> | undefined;
|
|
20
|
+
}
|
|
21
|
+
export interface Theme {
|
|
22
|
+
colors: ThemeColors;
|
|
23
|
+
}
|