@principal-ade/industry-theme 0.1.5 → 0.1.6
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/package.json +16 -3
- package/src/ThemeShowcase.stories.tsx +110 -0
- package/src/defaultThemes.ts +18 -18
- package/src/index.ts +0 -1
- package/src/landingPageTheme.ts +22 -22
- package/src/themes.ts +57 -58
- package/src/glassmorphismTheme.ts +0 -216
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ade/industry-theme",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Theme components and styles for industry-themed markdown",
|
|
6
6
|
"main": "./dist/cjs/index.js",
|
|
@@ -27,7 +27,9 @@
|
|
|
27
27
|
"lint:fix": "eslint . --ext .ts,.tsx --fix",
|
|
28
28
|
"format": "prettier --write .",
|
|
29
29
|
"format:check": "prettier --check .",
|
|
30
|
-
"clean": "rm -rf dist"
|
|
30
|
+
"clean": "rm -rf dist",
|
|
31
|
+
"storybook": "storybook dev -p 6006",
|
|
32
|
+
"build-storybook": "storybook build"
|
|
31
33
|
},
|
|
32
34
|
"keywords": [
|
|
33
35
|
"markdown",
|
|
@@ -37,17 +39,28 @@
|
|
|
37
39
|
"author": "Principal ADE Team",
|
|
38
40
|
"license": "MIT",
|
|
39
41
|
"devDependencies": {
|
|
42
|
+
"@chromatic-com/storybook": "^4.1.3",
|
|
40
43
|
"@eslint/js": "^9.32.0",
|
|
44
|
+
"@storybook/addon-docs": "^10.1.2",
|
|
45
|
+
"@storybook/addon-links": "^10.1.2",
|
|
46
|
+
"@storybook/addon-onboarding": "^10.1.2",
|
|
47
|
+
"@storybook/react-vite": "^10.1.2",
|
|
41
48
|
"@types/bun": "latest",
|
|
42
49
|
"@types/react": "^19.1.12",
|
|
50
|
+
"@types/react-dom": "^19.0.0",
|
|
51
|
+
"@vitejs/plugin-react": "^4.3.4",
|
|
43
52
|
"eslint": "^9.32.0",
|
|
44
53
|
"eslint-config-prettier": "^10.1.8",
|
|
45
54
|
"eslint-import-resolver-typescript": "^4.4.4",
|
|
46
55
|
"eslint-plugin-import": "^2.32.0",
|
|
56
|
+
"eslint-plugin-storybook": "^10.1.2",
|
|
47
57
|
"prettier": "^3.6.2",
|
|
48
58
|
"react": ">=19.0.0",
|
|
59
|
+
"react-dom": ">=19.0.0",
|
|
60
|
+
"storybook": "^10.1.2",
|
|
49
61
|
"typescript": "^5.0.4",
|
|
50
|
-
"typescript-eslint": "^8.38.0"
|
|
62
|
+
"typescript-eslint": "^8.38.0",
|
|
63
|
+
"vite": "^6.0.7"
|
|
51
64
|
},
|
|
52
65
|
"peerDependencies": {
|
|
53
66
|
"react": ">=19.0.0"
|
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { ThemeShowcase } from './ThemeShowcase';
|
|
3
|
+
import {
|
|
4
|
+
terminalTheme,
|
|
5
|
+
regalTheme,
|
|
6
|
+
matrixTheme,
|
|
7
|
+
slateTheme,
|
|
8
|
+
landingPageTheme,
|
|
9
|
+
landingPageLightTheme,
|
|
10
|
+
} from './themes';
|
|
11
|
+
|
|
12
|
+
const meta: Meta<typeof ThemeShowcase> = {
|
|
13
|
+
title: 'Themes/ThemeShowcase',
|
|
14
|
+
component: ThemeShowcase,
|
|
15
|
+
parameters: {
|
|
16
|
+
layout: 'fullscreen',
|
|
17
|
+
},
|
|
18
|
+
argTypes: {
|
|
19
|
+
theme: {
|
|
20
|
+
control: false,
|
|
21
|
+
},
|
|
22
|
+
title: {
|
|
23
|
+
control: 'text',
|
|
24
|
+
},
|
|
25
|
+
showValues: {
|
|
26
|
+
control: 'boolean',
|
|
27
|
+
},
|
|
28
|
+
sections: {
|
|
29
|
+
control: 'check',
|
|
30
|
+
options: ['colors', 'typography', 'spacing', 'shadows', 'radii'],
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
export default meta;
|
|
36
|
+
type Story = StoryObj<typeof ThemeShowcase>;
|
|
37
|
+
|
|
38
|
+
export const Terminal: Story = {
|
|
39
|
+
args: {
|
|
40
|
+
theme: terminalTheme,
|
|
41
|
+
title: 'Terminal Theme',
|
|
42
|
+
showValues: true,
|
|
43
|
+
},
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
export const Regal: Story = {
|
|
47
|
+
args: {
|
|
48
|
+
theme: regalTheme,
|
|
49
|
+
title: 'Regal Theme',
|
|
50
|
+
showValues: true,
|
|
51
|
+
},
|
|
52
|
+
};
|
|
53
|
+
|
|
54
|
+
export const Matrix: Story = {
|
|
55
|
+
args: {
|
|
56
|
+
theme: matrixTheme,
|
|
57
|
+
title: 'Matrix Theme',
|
|
58
|
+
showValues: true,
|
|
59
|
+
},
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export const Slate: Story = {
|
|
63
|
+
args: {
|
|
64
|
+
theme: slateTheme,
|
|
65
|
+
title: 'Slate Theme',
|
|
66
|
+
showValues: true,
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
export const LandingPageDark: Story = {
|
|
71
|
+
args: {
|
|
72
|
+
theme: landingPageTheme,
|
|
73
|
+
title: 'Landing Page Theme (Dark)',
|
|
74
|
+
showValues: true,
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export const LandingPageLight: Story = {
|
|
79
|
+
args: {
|
|
80
|
+
theme: landingPageLightTheme,
|
|
81
|
+
title: 'Landing Page Theme (Light)',
|
|
82
|
+
showValues: true,
|
|
83
|
+
},
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
export const ColorsOnly: Story = {
|
|
87
|
+
args: {
|
|
88
|
+
theme: terminalTheme,
|
|
89
|
+
title: 'Colors Section Only',
|
|
90
|
+
showValues: true,
|
|
91
|
+
sections: ['colors'],
|
|
92
|
+
},
|
|
93
|
+
};
|
|
94
|
+
|
|
95
|
+
export const TypographyOnly: Story = {
|
|
96
|
+
args: {
|
|
97
|
+
theme: terminalTheme,
|
|
98
|
+
title: 'Typography Section Only',
|
|
99
|
+
showValues: true,
|
|
100
|
+
sections: ['typography'],
|
|
101
|
+
},
|
|
102
|
+
};
|
|
103
|
+
|
|
104
|
+
export const WithoutValues: Story = {
|
|
105
|
+
args: {
|
|
106
|
+
theme: terminalTheme,
|
|
107
|
+
title: 'Theme Showcase (Without Values)',
|
|
108
|
+
showValues: false,
|
|
109
|
+
},
|
|
110
|
+
};
|
package/src/defaultThemes.ts
CHANGED
|
@@ -53,23 +53,23 @@ export const defaultMarkdownTheme: Theme = {
|
|
|
53
53
|
primary: '#007acc',
|
|
54
54
|
secondary: '#005a9e',
|
|
55
55
|
accent: '#1a1a1a',
|
|
56
|
-
highlight: '
|
|
56
|
+
highlight: '#e6f4fb',
|
|
57
57
|
muted: '#f0f0f0',
|
|
58
58
|
success: '#28a745',
|
|
59
59
|
warning: '#ffc107',
|
|
60
60
|
error: '#dc3545',
|
|
61
61
|
info: '#17a2b8',
|
|
62
|
-
border: '
|
|
62
|
+
border: '#e6e6e6',
|
|
63
63
|
backgroundSecondary: '#f8f9fa',
|
|
64
64
|
backgroundTertiary: '#e9ecef',
|
|
65
|
-
backgroundLight: '
|
|
66
|
-
backgroundHover: '
|
|
65
|
+
backgroundLight: '#f7f7f7',
|
|
66
|
+
backgroundHover: '#f2f2f2',
|
|
67
67
|
surface: '#ffffff',
|
|
68
68
|
textSecondary: '#555555',
|
|
69
69
|
textTertiary: '#888888',
|
|
70
70
|
textMuted: '#aaaaaa',
|
|
71
|
-
highlightBg: '
|
|
72
|
-
highlightBorder: '
|
|
71
|
+
highlightBg: '#fff9c4',
|
|
72
|
+
highlightBorder: '#fff389',
|
|
73
73
|
|
|
74
74
|
// Text on primary background
|
|
75
75
|
textOnPrimary: '#ffffff', // White text on blue primary
|
|
@@ -177,23 +177,23 @@ export const defaultTerminalTheme: Theme = {
|
|
|
177
177
|
primary: '#ffc107',
|
|
178
178
|
secondary: '#ffb300',
|
|
179
179
|
accent: '#ffffff',
|
|
180
|
-
highlight: '
|
|
180
|
+
highlight: '#1a1301',
|
|
181
181
|
muted: '#1a1a1a',
|
|
182
182
|
success: '#4caf50',
|
|
183
183
|
warning: '#ff9800',
|
|
184
184
|
error: '#f44336',
|
|
185
185
|
info: '#2196f3',
|
|
186
|
-
border: '
|
|
186
|
+
border: '#332701',
|
|
187
187
|
backgroundSecondary: '#0a0a0a',
|
|
188
188
|
backgroundTertiary: '#111111',
|
|
189
|
-
backgroundLight: '
|
|
190
|
-
backgroundHover: '
|
|
189
|
+
backgroundLight: '#080600',
|
|
190
|
+
backgroundHover: '#0d0a00',
|
|
191
191
|
surface: '#050505',
|
|
192
192
|
textSecondary: '#e0e0e0',
|
|
193
193
|
textTertiary: '#b0b0b0',
|
|
194
194
|
textMuted: '#808080',
|
|
195
|
-
highlightBg: '
|
|
196
|
-
highlightBorder: '
|
|
195
|
+
highlightBg: '#332701',
|
|
196
|
+
highlightBorder: '#664d03',
|
|
197
197
|
|
|
198
198
|
// Text on primary background
|
|
199
199
|
textOnPrimary: '#000000', // Black text on amber primary
|
|
@@ -302,23 +302,23 @@ export const defaultEditorTheme: Theme = {
|
|
|
302
302
|
primary: '#569cd6',
|
|
303
303
|
secondary: '#408ac9',
|
|
304
304
|
accent: '#c586c0',
|
|
305
|
-
highlight: '
|
|
305
|
+
highlight: '#242b30',
|
|
306
306
|
muted: '#2a2a2a',
|
|
307
307
|
success: '#6a9955',
|
|
308
308
|
warning: '#d18616',
|
|
309
309
|
error: '#f44747',
|
|
310
310
|
info: '#569cd6',
|
|
311
|
-
border: '
|
|
311
|
+
border: '#343434',
|
|
312
312
|
backgroundSecondary: '#252526',
|
|
313
313
|
backgroundTertiary: '#333333',
|
|
314
|
-
backgroundLight: '
|
|
315
|
-
backgroundHover: '
|
|
314
|
+
backgroundLight: '#252525',
|
|
315
|
+
backgroundHover: '#292929',
|
|
316
316
|
surface: '#252526',
|
|
317
317
|
textSecondary: '#cccccc',
|
|
318
318
|
textTertiary: '#999999',
|
|
319
319
|
textMuted: '#666666',
|
|
320
|
-
highlightBg: '
|
|
321
|
-
highlightBorder: '
|
|
320
|
+
highlightBg: '#4b4724',
|
|
321
|
+
highlightBorder: '#78702a',
|
|
322
322
|
|
|
323
323
|
// Text on primary background
|
|
324
324
|
textOnPrimary: '#ffffff', // White text on blue primary
|
package/src/index.ts
CHANGED
package/src/landingPageTheme.ts
CHANGED
|
@@ -59,7 +59,7 @@ export const landingPageTheme: Theme = {
|
|
|
59
59
|
primary: '#00C2FF', // Bright cyan - main brand color
|
|
60
60
|
secondary: '#0098CC', // Darker cyan for secondary actions
|
|
61
61
|
accent: '#0066FF', // Blue accent
|
|
62
|
-
highlight: '
|
|
62
|
+
highlight: '#001d26', // Dark cyan highlight
|
|
63
63
|
muted: '#1a1a1a', // Very dark gray
|
|
64
64
|
|
|
65
65
|
// Status colors
|
|
@@ -69,19 +69,19 @@ export const landingPageTheme: Theme = {
|
|
|
69
69
|
info: '#2196f3', // Blue
|
|
70
70
|
|
|
71
71
|
// Additional semantic colors
|
|
72
|
-
border: '
|
|
72
|
+
border: '#002733', // Dark cyan border
|
|
73
73
|
backgroundSecondary: '#0a1628', // Deep blue-black
|
|
74
74
|
backgroundTertiary: '#0f1c2e', // Lighter blue-black
|
|
75
|
-
backgroundLight: '
|
|
76
|
-
backgroundHover: '
|
|
77
|
-
surface: '
|
|
75
|
+
backgroundLight: '#00080a', // Very subtle cyan tint
|
|
76
|
+
backgroundHover: '#00131a', // Subtle cyan hover
|
|
77
|
+
surface: '#000000', // Black for overlays
|
|
78
78
|
textSecondary: '#d1d5db', // Light gray for secondary text
|
|
79
79
|
textTertiary: '#9ca3af', // Medium gray for tertiary text
|
|
80
80
|
textMuted: '#6b7280', // Darker gray for muted text
|
|
81
81
|
|
|
82
82
|
// Search highlight colors
|
|
83
|
-
highlightBg: '
|
|
84
|
-
highlightBorder: '
|
|
83
|
+
highlightBg: '#403b0f', // Yellow highlight
|
|
84
|
+
highlightBorder: '#80761e', // Stronger yellow for border
|
|
85
85
|
|
|
86
86
|
// Text on primary background
|
|
87
87
|
textOnPrimary: '#000000', // Black text on cyan primary
|
|
@@ -114,13 +114,13 @@ export const landingPageTheme: Theme = {
|
|
|
114
114
|
bg: 'transparent',
|
|
115
115
|
borderWidth: 1,
|
|
116
116
|
borderStyle: 'solid',
|
|
117
|
-
borderColor: '
|
|
117
|
+
borderColor: '#003a4d',
|
|
118
118
|
padding: '8px 16px',
|
|
119
119
|
fontSize: 14,
|
|
120
120
|
fontWeight: 600,
|
|
121
121
|
cursor: 'pointer',
|
|
122
122
|
'&:hover': {
|
|
123
|
-
bg: '
|
|
123
|
+
bg: '#00131a',
|
|
124
124
|
borderColor: '#00C2FF',
|
|
125
125
|
},
|
|
126
126
|
},
|
|
@@ -134,7 +134,7 @@ export const landingPageTheme: Theme = {
|
|
|
134
134
|
cursor: 'pointer',
|
|
135
135
|
'&:hover': {
|
|
136
136
|
color: '#00D9FF',
|
|
137
|
-
bg: '
|
|
137
|
+
bg: '#00131a',
|
|
138
138
|
},
|
|
139
139
|
},
|
|
140
140
|
},
|
|
@@ -166,9 +166,9 @@ export const landingPageTheme: Theme = {
|
|
|
166
166
|
borderRadius: 4,
|
|
167
167
|
},
|
|
168
168
|
secondary: {
|
|
169
|
-
bg: '
|
|
169
|
+
bg: '#000a0d',
|
|
170
170
|
border: '1px solid',
|
|
171
|
-
borderColor: '
|
|
171
|
+
borderColor: '#002733',
|
|
172
172
|
borderRadius: 4,
|
|
173
173
|
},
|
|
174
174
|
},
|
|
@@ -185,7 +185,7 @@ export const landingPageLightTheme: Theme = {
|
|
|
185
185
|
primary: '#0098CC', // Slightly darker cyan for better contrast
|
|
186
186
|
secondary: '#00C2FF', // Lighter cyan for hover
|
|
187
187
|
accent: '#0066FF', // Blue accent
|
|
188
|
-
highlight: '
|
|
188
|
+
highlight: '#e6f5fa', // Light cyan highlight
|
|
189
189
|
muted: '#f0f0f0', // Light gray
|
|
190
190
|
|
|
191
191
|
// Status colors
|
|
@@ -195,19 +195,19 @@ export const landingPageLightTheme: Theme = {
|
|
|
195
195
|
info: '#2196f3', // Blue
|
|
196
196
|
|
|
197
197
|
// Additional semantic colors
|
|
198
|
-
border: '
|
|
198
|
+
border: '#cceaf5', // Light cyan border
|
|
199
199
|
backgroundSecondary: '#f8f9fa', // Very light gray
|
|
200
200
|
backgroundTertiary: '#e9ecef', // Light gray
|
|
201
|
-
backgroundLight: '
|
|
202
|
-
backgroundHover: '
|
|
203
|
-
surface: '
|
|
201
|
+
backgroundLight: '#f7fcfd', // Very subtle cyan tint
|
|
202
|
+
backgroundHover: '#f2fafc', // Subtle cyan hover
|
|
203
|
+
surface: '#ffffff', // White
|
|
204
204
|
textSecondary: '#555555', // Dark gray for secondary text
|
|
205
205
|
textTertiary: '#888888', // Medium gray for tertiary text
|
|
206
206
|
textMuted: '#aaaaaa', // Light gray for muted text
|
|
207
207
|
|
|
208
208
|
// Search highlight colors
|
|
209
|
-
highlightBg: '
|
|
210
|
-
highlightBorder: '
|
|
209
|
+
highlightBg: '#fff9c4', // Yellow highlight
|
|
210
|
+
highlightBorder: '#fff389', // Stronger yellow for border
|
|
211
211
|
|
|
212
212
|
// Text on primary background
|
|
213
213
|
textOnPrimary: '#ffffff', // White text on cyan primary
|
|
@@ -231,13 +231,13 @@ export const landingPageLightTheme: Theme = {
|
|
|
231
231
|
bg: 'transparent',
|
|
232
232
|
borderWidth: 1,
|
|
233
233
|
borderStyle: 'solid',
|
|
234
|
-
borderColor: '
|
|
234
|
+
borderColor: '#b2e0f0',
|
|
235
235
|
padding: '8px 16px',
|
|
236
236
|
fontSize: 14,
|
|
237
237
|
fontWeight: 600,
|
|
238
238
|
cursor: 'pointer',
|
|
239
239
|
'&:hover': {
|
|
240
|
-
bg: '
|
|
240
|
+
bg: '#f2fafc',
|
|
241
241
|
borderColor: '#0098CC',
|
|
242
242
|
},
|
|
243
243
|
},
|
|
@@ -251,7 +251,7 @@ export const landingPageLightTheme: Theme = {
|
|
|
251
251
|
cursor: 'pointer',
|
|
252
252
|
'&:hover': {
|
|
253
253
|
color: '#007aa8',
|
|
254
|
-
bg: '
|
|
254
|
+
bg: '#f2fafc',
|
|
255
255
|
},
|
|
256
256
|
},
|
|
257
257
|
},
|
package/src/themes.ts
CHANGED
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
import { Theme } from './index';
|
|
6
|
-
export { glassmorphismTheme } from './glassmorphismTheme';
|
|
7
6
|
export { defaultMarkdownTheme, defaultEditorTheme, defaultTerminalTheme } from './defaultThemes';
|
|
8
7
|
export { landingPageTheme, landingPageLightTheme } from './landingPageTheme';
|
|
9
8
|
|
|
@@ -61,7 +60,7 @@ export const regalTheme: Theme = {
|
|
|
61
60
|
primary: '#d4a574', // Warm amber gold
|
|
62
61
|
secondary: '#e0b584', // Lighter amber on hover
|
|
63
62
|
accent: '#c9b8a3', // Muted gold
|
|
64
|
-
highlight: '
|
|
63
|
+
highlight: '#363338', // Amber highlight
|
|
65
64
|
muted: '#8b7968', // Faded bronze
|
|
66
65
|
|
|
67
66
|
// Status colors - Jewel tones
|
|
@@ -71,19 +70,19 @@ export const regalTheme: Theme = {
|
|
|
71
70
|
info: '#d4a574', // Using primary amber
|
|
72
71
|
|
|
73
72
|
// Additional semantic colors
|
|
74
|
-
border: '
|
|
73
|
+
border: '#3f3a3c', // Gold border
|
|
75
74
|
backgroundSecondary: '#212738', // Slightly lighter navy
|
|
76
75
|
backgroundTertiary: '#2d3446', // Tertiary dark blue
|
|
77
|
-
backgroundLight: '
|
|
78
|
-
backgroundHover: '
|
|
76
|
+
backgroundLight: '#292a34', // Very light amber
|
|
77
|
+
backgroundHover: '#363338', // Amber hover
|
|
79
78
|
surface: '#212738', // Dark navy surface
|
|
80
79
|
textSecondary: '#c9b8a3', // Muted gold
|
|
81
80
|
textTertiary: '#8b7968', // Faded bronze
|
|
82
81
|
textMuted: '#8b7968', // Faded bronze
|
|
83
82
|
|
|
84
83
|
// Search highlight colors
|
|
85
|
-
highlightBg: '
|
|
86
|
-
highlightBorder: '
|
|
84
|
+
highlightBg: '#534724', // Amber/yellow highlight
|
|
85
|
+
highlightBorder: '#8c701a', // Stronger amber for border
|
|
87
86
|
|
|
88
87
|
// Text on primary background
|
|
89
88
|
textOnPrimary: '#1a1f2e', // Dark text on warm amber primary
|
|
@@ -193,16 +192,16 @@ export const terminalTheme: Theme = {
|
|
|
193
192
|
],
|
|
194
193
|
zIndices: [0, 1, 10, 20, 30, 40, 50],
|
|
195
194
|
|
|
196
|
-
// Colors - Dark terminal theme
|
|
195
|
+
// Colors - Dark terminal theme
|
|
197
196
|
colors: {
|
|
198
|
-
// Base colors - Dark terminal inspired
|
|
197
|
+
// Base colors - Dark terminal inspired
|
|
199
198
|
text: '#e4e4e4', // Light gray
|
|
200
|
-
background: '
|
|
199
|
+
background: '#0a0a0a', // Almost black
|
|
201
200
|
primary: '#66b3ff', // Bright terminal blue
|
|
202
201
|
secondary: '#80c4ff', // Lighter blue
|
|
203
202
|
accent: '#66ff99', // Bright terminal green
|
|
204
|
-
highlight: '
|
|
205
|
-
muted: '
|
|
203
|
+
highlight: '#18283d', // Dark blue highlight
|
|
204
|
+
muted: '#1a1a1a', // Dark gray
|
|
206
205
|
|
|
207
206
|
// Status colors - Terminal inspired
|
|
208
207
|
success: '#66ff99', // Bright green
|
|
@@ -210,20 +209,20 @@ export const terminalTheme: Theme = {
|
|
|
210
209
|
error: '#ff6666', // Bright red
|
|
211
210
|
info: '#66b3ff', // Bright blue
|
|
212
211
|
|
|
213
|
-
// Additional semantic colors
|
|
214
|
-
border: '
|
|
215
|
-
backgroundSecondary: '
|
|
216
|
-
backgroundTertiary: '
|
|
217
|
-
backgroundLight: '
|
|
218
|
-
backgroundHover: '
|
|
219
|
-
surface: '
|
|
220
|
-
textSecondary: '
|
|
221
|
-
textTertiary: '
|
|
222
|
-
textMuted: '
|
|
212
|
+
// Additional semantic colors
|
|
213
|
+
border: '#1a1a1a', // Dark border
|
|
214
|
+
backgroundSecondary: '#0f0f0f', // Slightly lighter black
|
|
215
|
+
backgroundTertiary: '#141414', // Even lighter black
|
|
216
|
+
backgroundLight: '#0d0d0d', // Very subtle lighter
|
|
217
|
+
backgroundHover: '#0d1520', // Subtle blue-tinted hover
|
|
218
|
+
surface: '#0f0f0f', // Dark surface
|
|
219
|
+
textSecondary: '#b3b3b3', // 70% white
|
|
220
|
+
textTertiary: '#808080', // 50% white
|
|
221
|
+
textMuted: '#666666', // 40% white
|
|
223
222
|
|
|
224
223
|
// Search highlight colors
|
|
225
|
-
highlightBg: '
|
|
226
|
-
highlightBorder: '
|
|
224
|
+
highlightBg: '#40391e', // Yellow highlight
|
|
225
|
+
highlightBorder: '#7f7530', // Stronger yellow for border
|
|
227
226
|
|
|
228
227
|
// Text on primary background
|
|
229
228
|
textOnPrimary: '#ffffff', // White text on blue primary
|
|
@@ -232,14 +231,14 @@ export const terminalTheme: Theme = {
|
|
|
232
231
|
// Light mode for terminal theme
|
|
233
232
|
modes: {
|
|
234
233
|
light: {
|
|
235
|
-
// Base colors - Light terminal
|
|
234
|
+
// Base colors - Light terminal
|
|
236
235
|
text: '#1a1a1a', // Almost black
|
|
237
|
-
background: '
|
|
236
|
+
background: '#ffffff', // White
|
|
238
237
|
primary: '#0066cc', // Classic terminal blue
|
|
239
238
|
secondary: '#0052a3', // Darker blue
|
|
240
239
|
accent: '#00cc88', // Terminal green
|
|
241
|
-
highlight: '
|
|
242
|
-
muted: '
|
|
240
|
+
highlight: '#e6f2ff', // Very light blue highlight
|
|
241
|
+
muted: '#f5f5f5', // Light gray
|
|
243
242
|
|
|
244
243
|
// Status colors - Terminal inspired
|
|
245
244
|
success: '#00cc88', // Green
|
|
@@ -247,20 +246,20 @@ export const terminalTheme: Theme = {
|
|
|
247
246
|
error: '#ff3333', // Red
|
|
248
247
|
info: '#0066cc', // Blue
|
|
249
248
|
|
|
250
|
-
// Additional semantic colors
|
|
251
|
-
border: '
|
|
252
|
-
backgroundSecondary: '
|
|
253
|
-
backgroundTertiary: '
|
|
254
|
-
backgroundLight: '
|
|
255
|
-
backgroundHover: '
|
|
256
|
-
surface: '
|
|
257
|
-
textSecondary: '
|
|
258
|
-
textTertiary: '
|
|
259
|
-
textMuted: '
|
|
249
|
+
// Additional semantic colors
|
|
250
|
+
border: '#e6e6e6', // Light border
|
|
251
|
+
backgroundSecondary: '#fafafa', // Very light gray
|
|
252
|
+
backgroundTertiary: '#f5f5f5', // Light gray
|
|
253
|
+
backgroundLight: '#fafafa', // Very subtle lighter
|
|
254
|
+
backgroundHover: '#f5f9fd', // Very subtle blue hover
|
|
255
|
+
surface: '#ffffff', // White surface
|
|
256
|
+
textSecondary: '#666666', // 60% black
|
|
257
|
+
textTertiary: '#999999', // 40% black
|
|
258
|
+
textMuted: '#b3b3b3', // 30% black
|
|
260
259
|
|
|
261
260
|
// Search highlight colors
|
|
262
|
-
highlightBg: '
|
|
263
|
-
highlightBorder: '
|
|
261
|
+
highlightBg: '#fff9c4', // Light yellow highlight
|
|
262
|
+
highlightBorder: '#fff389', // Stronger yellow for border
|
|
264
263
|
},
|
|
265
264
|
},
|
|
266
265
|
|
|
@@ -380,7 +379,7 @@ export const matrixTheme: Theme = {
|
|
|
380
379
|
primary: '#00d835', // Softer Matrix green for primary actions
|
|
381
380
|
secondary: '#00a828', // Darker softer green for secondary
|
|
382
381
|
accent: '#00d835', // Softer Matrix green accent
|
|
383
|
-
highlight: '
|
|
382
|
+
highlight: '#002008', // Dark green highlight
|
|
384
383
|
muted: '#0a0a0a', // Very dark gray
|
|
385
384
|
|
|
386
385
|
// Status colors - More variety while keeping Matrix feel
|
|
@@ -390,19 +389,19 @@ export const matrixTheme: Theme = {
|
|
|
390
389
|
info: '#00a8d6', // Softer cyan for info
|
|
391
390
|
|
|
392
391
|
// Additional semantic colors
|
|
393
|
-
border: '
|
|
392
|
+
border: '#002b0b', // Subtle green border
|
|
394
393
|
backgroundSecondary: '#0a0a0a', // Very dark gray
|
|
395
394
|
backgroundTertiary: '#111111', // Slightly lighter dark gray
|
|
396
|
-
backgroundLight: '
|
|
397
|
-
backgroundHover: '
|
|
395
|
+
backgroundLight: '#000602', // Very faint green glow
|
|
396
|
+
backgroundHover: '#001104', // Subtle green hover
|
|
398
397
|
surface: '#050505', // Almost black
|
|
399
398
|
textSecondary: '#808080', // Even softer gray for secondary text
|
|
400
399
|
textTertiary: '#606060', // Much softer medium gray
|
|
401
400
|
textMuted: '#484848', // Much softer darker gray
|
|
402
401
|
|
|
403
402
|
// Search highlight colors
|
|
404
|
-
highlightBg: '
|
|
405
|
-
highlightBorder: '
|
|
403
|
+
highlightBg: '#00360d', // Green highlight
|
|
404
|
+
highlightBorder: '#006c1b', // Stronger green for border
|
|
406
405
|
|
|
407
406
|
// Text on primary background
|
|
408
407
|
textOnPrimary: '#000000', // Black text on green primary
|
|
@@ -524,7 +523,7 @@ export const matrixMinimalTheme: Theme = {
|
|
|
524
523
|
primary: '#b8b8b8', // Much softer off-white for primary
|
|
525
524
|
secondary: '#909090', // Much softer light gray for secondary
|
|
526
525
|
accent: '#00d835', // Softer Matrix green for accents only
|
|
527
|
-
highlight: '
|
|
526
|
+
highlight: '#001605', // Very subtle green highlight
|
|
528
527
|
muted: '#0a0a0a', // Very dark gray
|
|
529
528
|
|
|
530
529
|
// Status colors - Practical colors
|
|
@@ -534,19 +533,19 @@ export const matrixMinimalTheme: Theme = {
|
|
|
534
533
|
info: '#00a8d6', // Softer cyan for info
|
|
535
534
|
|
|
536
535
|
// Additional semantic colors
|
|
537
|
-
border: '
|
|
536
|
+
border: '#121212', // Subtle off-white border
|
|
538
537
|
backgroundSecondary: '#0a0a0a', // Very dark gray
|
|
539
538
|
backgroundTertiary: '#111111', // Slightly lighter dark gray
|
|
540
|
-
backgroundLight: '
|
|
541
|
-
backgroundHover: '
|
|
539
|
+
backgroundLight: '#040404', // Very faint off-white glow
|
|
540
|
+
backgroundHover: '#000b03', // Very subtle green hover
|
|
542
541
|
surface: '#050505', // Almost black
|
|
543
542
|
textSecondary: '#808080', // Even softer gray for secondary text
|
|
544
543
|
textTertiary: '#606060', // Much softer medium gray
|
|
545
544
|
textMuted: '#484848', // Much softer darker gray
|
|
546
545
|
|
|
547
546
|
// Search highlight colors
|
|
548
|
-
highlightBg: '
|
|
549
|
-
highlightBorder: '
|
|
547
|
+
highlightBg: '#002b0b', // Green highlight for search
|
|
548
|
+
highlightBorder: '#005615', // Stronger green for border
|
|
550
549
|
|
|
551
550
|
// Text on primary background
|
|
552
551
|
textOnPrimary: '#000000', // Black text on off-white primary
|
|
@@ -668,7 +667,7 @@ export const slateTheme: Theme = {
|
|
|
668
667
|
primary: '#d1d5db', // Light grey for primary
|
|
669
668
|
secondary: '#6b7280', // Medium grey for secondary
|
|
670
669
|
accent: '#f59e0b', // Vibrant amber
|
|
671
|
-
highlight: '
|
|
670
|
+
highlight: '#353838', // Light grey highlight
|
|
672
671
|
muted: '#2d3134', // Dark grey
|
|
673
672
|
|
|
674
673
|
// Status colors - Vibrant and practical
|
|
@@ -678,19 +677,19 @@ export const slateTheme: Theme = {
|
|
|
678
677
|
info: '#3b82f6', // Blue
|
|
679
678
|
|
|
680
679
|
// Additional semantic colors - Grey palette
|
|
681
|
-
border: '
|
|
680
|
+
border: '#2d3034', // Subtle grey border
|
|
682
681
|
backgroundSecondary: '#22252a', // Slightly lighter dark grey
|
|
683
682
|
backgroundTertiary: '#2d3134', // Even lighter dark grey
|
|
684
|
-
backgroundLight: '
|
|
685
|
-
backgroundHover: '
|
|
683
|
+
backgroundLight: '#202325', // Very faint grey
|
|
684
|
+
backgroundHover: '#27292c', // Subtle grey hover
|
|
686
685
|
surface: '#1f2124', // Near-black surface
|
|
687
686
|
textSecondary: '#e5e7eb', // Light grey for important text (closer to white)
|
|
688
687
|
textTertiary: '#6b7280', // Darker grey
|
|
689
688
|
textMuted: '#4b5563', // Even darker grey
|
|
690
689
|
|
|
691
690
|
// Search highlight colors
|
|
692
|
-
highlightBg: '
|
|
693
|
-
highlightBorder: '
|
|
691
|
+
highlightBg: '#513c19', // Amber highlight
|
|
692
|
+
highlightBorder: '#875d14', // Stronger amber for border
|
|
694
693
|
|
|
695
694
|
// Text on primary background
|
|
696
695
|
textOnPrimary: '#1a1c1e', // Dark text on light grey primary
|
|
@@ -1,216 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Glassmorphism theme - Showcasing transparency and blur effects
|
|
3
|
-
* Designed to work over gradient or image backgrounds
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { Theme } from './index';
|
|
7
|
-
|
|
8
|
-
export const glassmorphismTheme: Theme = {
|
|
9
|
-
// Spacing scale
|
|
10
|
-
space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
|
|
11
|
-
|
|
12
|
-
// Typography - Modern sans-serif
|
|
13
|
-
fonts: {
|
|
14
|
-
body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
15
|
-
heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
16
|
-
monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
|
|
20
|
-
|
|
21
|
-
fontScale: 1.0,
|
|
22
|
-
|
|
23
|
-
fontWeights: {
|
|
24
|
-
body: 400,
|
|
25
|
-
heading: 600,
|
|
26
|
-
bold: 700,
|
|
27
|
-
light: 300,
|
|
28
|
-
medium: 500,
|
|
29
|
-
semibold: 600,
|
|
30
|
-
},
|
|
31
|
-
|
|
32
|
-
lineHeights: {
|
|
33
|
-
body: 1.6,
|
|
34
|
-
heading: 1.3,
|
|
35
|
-
tight: 1.4,
|
|
36
|
-
relaxed: 1.8,
|
|
37
|
-
},
|
|
38
|
-
|
|
39
|
-
// Layout
|
|
40
|
-
breakpoints: ['640px', '768px', '1024px', '1280px'],
|
|
41
|
-
sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
|
|
42
|
-
radii: [0, 8, 12, 16, 20, 24, 32, 40],
|
|
43
|
-
shadows: [
|
|
44
|
-
'none',
|
|
45
|
-
'0 8px 32px 0 rgba(31, 38, 135, 0.15)',
|
|
46
|
-
'0 12px 40px 0 rgba(31, 38, 135, 0.2)',
|
|
47
|
-
'0 16px 48px 0 rgba(31, 38, 135, 0.25)',
|
|
48
|
-
'0 20px 56px 0 rgba(31, 38, 135, 0.3)',
|
|
49
|
-
'0 24px 64px 0 rgba(31, 38, 135, 0.35)',
|
|
50
|
-
],
|
|
51
|
-
zIndices: [0, 1, 10, 20, 30, 40, 50],
|
|
52
|
-
|
|
53
|
-
// Colors - Heavy use of transparency for glass effect
|
|
54
|
-
colors: {
|
|
55
|
-
// Base colors with transparency
|
|
56
|
-
text: 'rgba(255, 255, 255, 0.95)', // Nearly opaque white
|
|
57
|
-
background: 'rgba(255, 255, 255, 0.1)', // Very transparent white
|
|
58
|
-
primary: 'rgba(99, 102, 241, 0.9)', // Semi-transparent indigo
|
|
59
|
-
secondary: 'rgba(139, 92, 246, 0.9)', // Semi-transparent purple
|
|
60
|
-
accent: 'rgba(236, 72, 153, 0.9)', // Semi-transparent pink
|
|
61
|
-
highlight: 'rgba(99, 102, 241, 0.2)', // Transparent indigo
|
|
62
|
-
muted: 'rgba(255, 255, 255, 0.05)', // Barely visible white
|
|
63
|
-
|
|
64
|
-
// Status colors with transparency
|
|
65
|
-
success: 'rgba(34, 197, 94, 0.9)', // Semi-transparent green
|
|
66
|
-
warning: 'rgba(251, 146, 60, 0.9)', // Semi-transparent orange
|
|
67
|
-
error: 'rgba(239, 68, 68, 0.9)', // Semi-transparent red
|
|
68
|
-
info: 'rgba(59, 130, 246, 0.9)', // Semi-transparent blue
|
|
69
|
-
|
|
70
|
-
// Glass effect colors
|
|
71
|
-
border: 'rgba(255, 255, 255, 0.18)', // Transparent white border
|
|
72
|
-
backgroundSecondary: 'rgba(255, 255, 255, 0.15)', // Slightly more opaque
|
|
73
|
-
backgroundTertiary: 'rgba(255, 255, 255, 0.2)', // Even more opaque
|
|
74
|
-
backgroundLight: 'rgba(255, 255, 255, 0.08)', // Very light overlay
|
|
75
|
-
backgroundHover: 'rgba(255, 255, 255, 0.25)', // Hover state
|
|
76
|
-
surface: 'rgba(255, 255, 255, 0.12)', // Surface panels
|
|
77
|
-
textSecondary: 'rgba(255, 255, 255, 0.8)', // Slightly transparent text
|
|
78
|
-
textTertiary: 'rgba(255, 255, 255, 0.6)', // More transparent text
|
|
79
|
-
textMuted: 'rgba(255, 255, 255, 0.5)', // Half transparent text
|
|
80
|
-
|
|
81
|
-
// Search highlight colors
|
|
82
|
-
highlightBg: 'rgba(251, 191, 36, 0.3)', // Transparent yellow
|
|
83
|
-
highlightBorder: 'rgba(251, 191, 36, 0.5)', // Stronger yellow border
|
|
84
|
-
|
|
85
|
-
// Text on primary background
|
|
86
|
-
textOnPrimary: '#ffffff', // White text on indigo primary
|
|
87
|
-
},
|
|
88
|
-
|
|
89
|
-
// Dark mode with different transparency levels
|
|
90
|
-
modes: {
|
|
91
|
-
dark: {
|
|
92
|
-
// Dark glass colors
|
|
93
|
-
text: 'rgba(255, 255, 255, 0.95)',
|
|
94
|
-
background: 'rgba(0, 0, 0, 0.3)', // Semi-transparent black
|
|
95
|
-
primary: 'rgba(129, 140, 248, 0.9)', // Lighter indigo
|
|
96
|
-
secondary: 'rgba(167, 139, 250, 0.9)', // Lighter purple
|
|
97
|
-
accent: 'rgba(244, 114, 182, 0.9)', // Lighter pink
|
|
98
|
-
highlight: 'rgba(129, 140, 248, 0.25)',
|
|
99
|
-
muted: 'rgba(0, 0, 0, 0.15)',
|
|
100
|
-
|
|
101
|
-
success: 'rgba(74, 222, 128, 0.9)',
|
|
102
|
-
warning: 'rgba(251, 191, 36, 0.9)',
|
|
103
|
-
error: 'rgba(248, 113, 113, 0.9)',
|
|
104
|
-
info: 'rgba(96, 165, 250, 0.9)',
|
|
105
|
-
|
|
106
|
-
border: 'rgba(255, 255, 255, 0.15)',
|
|
107
|
-
backgroundSecondary: 'rgba(0, 0, 0, 0.4)',
|
|
108
|
-
backgroundTertiary: 'rgba(0, 0, 0, 0.5)',
|
|
109
|
-
backgroundLight: 'rgba(0, 0, 0, 0.2)',
|
|
110
|
-
backgroundHover: 'rgba(255, 255, 255, 0.1)',
|
|
111
|
-
surface: 'rgba(0, 0, 0, 0.35)',
|
|
112
|
-
textSecondary: 'rgba(255, 255, 255, 0.8)',
|
|
113
|
-
textTertiary: 'rgba(255, 255, 255, 0.6)',
|
|
114
|
-
textMuted: 'rgba(255, 255, 255, 0.4)',
|
|
115
|
-
|
|
116
|
-
highlightBg: 'rgba(251, 191, 36, 0.35)',
|
|
117
|
-
highlightBorder: 'rgba(251, 191, 36, 0.6)',
|
|
118
|
-
},
|
|
119
|
-
|
|
120
|
-
// Frosted mode - maximum blur effect
|
|
121
|
-
frosted: {
|
|
122
|
-
text: 'rgba(31, 41, 55, 0.95)', // Dark text for light backgrounds
|
|
123
|
-
background: 'rgba(255, 255, 255, 0.3)', // More opaque white
|
|
124
|
-
primary: 'rgba(79, 70, 229, 0.95)', // Solid indigo
|
|
125
|
-
secondary: 'rgba(124, 58, 237, 0.95)', // Solid purple
|
|
126
|
-
accent: 'rgba(219, 39, 119, 0.95)', // Solid pink
|
|
127
|
-
highlight: 'rgba(79, 70, 229, 0.15)',
|
|
128
|
-
muted: 'rgba(255, 255, 255, 0.4)',
|
|
129
|
-
|
|
130
|
-
success: 'rgba(16, 185, 129, 0.95)',
|
|
131
|
-
warning: 'rgba(245, 158, 11, 0.95)',
|
|
132
|
-
error: 'rgba(220, 38, 38, 0.95)',
|
|
133
|
-
info: 'rgba(37, 99, 235, 0.95)',
|
|
134
|
-
|
|
135
|
-
border: 'rgba(255, 255, 255, 0.5)',
|
|
136
|
-
backgroundSecondary: 'rgba(255, 255, 255, 0.4)',
|
|
137
|
-
backgroundTertiary: 'rgba(255, 255, 255, 0.5)',
|
|
138
|
-
backgroundLight: 'rgba(255, 255, 255, 0.25)',
|
|
139
|
-
backgroundHover: 'rgba(255, 255, 255, 0.6)',
|
|
140
|
-
surface: 'rgba(255, 255, 255, 0.35)',
|
|
141
|
-
textSecondary: 'rgba(31, 41, 55, 0.8)',
|
|
142
|
-
textTertiary: 'rgba(31, 41, 55, 0.6)',
|
|
143
|
-
textMuted: 'rgba(31, 41, 55, 0.5)',
|
|
144
|
-
|
|
145
|
-
highlightBg: 'rgba(251, 191, 36, 0.4)',
|
|
146
|
-
highlightBorder: 'rgba(251, 191, 36, 0.7)',
|
|
147
|
-
},
|
|
148
|
-
},
|
|
149
|
-
|
|
150
|
-
// Component variants
|
|
151
|
-
buttons: {
|
|
152
|
-
primary: {
|
|
153
|
-
color: 'white',
|
|
154
|
-
bg: 'primary',
|
|
155
|
-
borderWidth: 1,
|
|
156
|
-
borderStyle: 'solid',
|
|
157
|
-
borderColor: 'rgba(255, 255, 255, 0.2)',
|
|
158
|
-
'&:hover': {
|
|
159
|
-
bg: 'secondary',
|
|
160
|
-
},
|
|
161
|
-
},
|
|
162
|
-
secondary: {
|
|
163
|
-
color: 'text',
|
|
164
|
-
bg: 'rgba(255, 255, 255, 0.1)',
|
|
165
|
-
borderWidth: 1,
|
|
166
|
-
borderStyle: 'solid',
|
|
167
|
-
borderColor: 'rgba(255, 255, 255, 0.2)',
|
|
168
|
-
'&:hover': {
|
|
169
|
-
bg: 'rgba(255, 255, 255, 0.2)',
|
|
170
|
-
},
|
|
171
|
-
},
|
|
172
|
-
ghost: {
|
|
173
|
-
color: 'text',
|
|
174
|
-
bg: 'transparent',
|
|
175
|
-
borderWidth: 1,
|
|
176
|
-
borderStyle: 'solid',
|
|
177
|
-
borderColor: 'transparent',
|
|
178
|
-
'&:hover': {
|
|
179
|
-
borderColor: 'rgba(255, 255, 255, 0.2)',
|
|
180
|
-
bg: 'rgba(255, 255, 255, 0.05)',
|
|
181
|
-
},
|
|
182
|
-
},
|
|
183
|
-
},
|
|
184
|
-
|
|
185
|
-
text: {
|
|
186
|
-
heading: {
|
|
187
|
-
fontFamily: 'heading',
|
|
188
|
-
fontWeight: 'heading',
|
|
189
|
-
lineHeight: 'heading',
|
|
190
|
-
},
|
|
191
|
-
body: {
|
|
192
|
-
fontFamily: 'body',
|
|
193
|
-
fontWeight: 'body',
|
|
194
|
-
lineHeight: 'body',
|
|
195
|
-
},
|
|
196
|
-
caption: {
|
|
197
|
-
fontSize: 1,
|
|
198
|
-
color: 'textSecondary',
|
|
199
|
-
},
|
|
200
|
-
},
|
|
201
|
-
|
|
202
|
-
cards: {
|
|
203
|
-
primary: {
|
|
204
|
-
bg: 'surface',
|
|
205
|
-
border: '1px solid',
|
|
206
|
-
borderColor: 'border',
|
|
207
|
-
borderRadius: 3,
|
|
208
|
-
},
|
|
209
|
-
secondary: {
|
|
210
|
-
bg: 'backgroundSecondary',
|
|
211
|
-
border: '1px solid',
|
|
212
|
-
borderColor: 'border',
|
|
213
|
-
borderRadius: 3,
|
|
214
|
-
},
|
|
215
|
-
},
|
|
216
|
-
};
|