@umituz/web-design-system 6.16.0 → 6.18.0
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/dist/styles.css +1 -1
- package/package.json +1 -1
- package/src/__tests__/styles.util.test.ts +17 -0
- package/src/__tests__/theme-provider.test.tsx +3 -0
- package/src/infrastructure/themes/crimson.theme.ts +180 -0
- package/src/infrastructure/themes/index.ts +1 -0
- package/src/infrastructure/themes/ocean.theme.ts +137 -37
- package/src/infrastructure/themes/registry.ts +2 -0
- package/src/infrastructure/utils/index.ts +2 -0
- package/src/infrastructure/utils/styles.util.ts +5 -0
- package/src/styles/console.css +13854 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@umituz/web-design-system",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.18.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "Web Design System - Tailwind v4 authored, precompiled CSS shipped. Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications.",
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { describe, it, expect } from 'vitest';
|
|
2
|
+
import { createStyles } from '../infrastructure/utils/styles.util';
|
|
3
|
+
|
|
4
|
+
describe('createStyles utility', () => {
|
|
5
|
+
it('creates scoped class names matching prefix__property pattern', () => {
|
|
6
|
+
const styles = createStyles('LiveChat');
|
|
7
|
+
expect(styles.container).toBe('LiveChat__container');
|
|
8
|
+
expect(styles.message).toBe('LiveChat__message');
|
|
9
|
+
expect(styles['themeOption--selected']).toBe('LiveChat__themeOption--selected');
|
|
10
|
+
expect(styles.unknownKey).toBe('LiveChat__unknownKey');
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
it('handles empty property or symbol safely', () => {
|
|
14
|
+
const styles = createStyles('TestModule');
|
|
15
|
+
expect(styles['']).toBe('TestModule__');
|
|
16
|
+
});
|
|
17
|
+
});
|
|
@@ -16,6 +16,7 @@ import {
|
|
|
16
16
|
defaultTheme,
|
|
17
17
|
forestTheme,
|
|
18
18
|
fieldTheme,
|
|
19
|
+
crimsonTheme,
|
|
19
20
|
} from '../infrastructure/themes';
|
|
20
21
|
import type { ThemeConfig } from '../domain/types';
|
|
21
22
|
|
|
@@ -34,6 +35,8 @@ describe('Theme System and Provider', () => {
|
|
|
34
35
|
expect(getTheme('ocean').name).toBe('ocean');
|
|
35
36
|
expect(getTheme('forest').name).toBe('forest');
|
|
36
37
|
expect(getTheme('field').name).toBe('field');
|
|
38
|
+
expect(getTheme('crimson').name).toBe('crimson');
|
|
39
|
+
expect(crimsonTheme.mode).toBe('dark');
|
|
37
40
|
expect(getTheme('default').name).toBe('default');
|
|
38
41
|
expect(getTheme('non-existent').name).toBe('default');
|
|
39
42
|
});
|
|
@@ -0,0 +1,180 @@
|
|
|
1
|
+
import type { ThemeConfig } from '../../domain/types';
|
|
2
|
+
|
|
3
|
+
export const crimsonTheme: ThemeConfig = {
|
|
4
|
+
name: 'crimson',
|
|
5
|
+
mode: 'dark',
|
|
6
|
+
colors: {
|
|
7
|
+
background: '#0b0b0f',
|
|
8
|
+
foreground: '#f4f4f7',
|
|
9
|
+
card: '#16161d',
|
|
10
|
+
cardForeground: '#f4f4f7',
|
|
11
|
+
popover: '#1c1c25',
|
|
12
|
+
popoverForeground: '#f4f4f7',
|
|
13
|
+
primary: '#f43f6b',
|
|
14
|
+
primaryForeground: '#ffffff',
|
|
15
|
+
primarySoft: 'rgba(244, 63, 107, 0.14)',
|
|
16
|
+
secondary: '#1c1c25',
|
|
17
|
+
secondaryForeground: '#a6a6b3',
|
|
18
|
+
muted: '#1c1c25',
|
|
19
|
+
mutedForeground: '#71717d',
|
|
20
|
+
accent: '#22222d',
|
|
21
|
+
accentForeground: '#f4f4f7',
|
|
22
|
+
border: '#23232d',
|
|
23
|
+
input: '#23232d',
|
|
24
|
+
destructive: '#e02a58',
|
|
25
|
+
destructiveForeground: '#ffffff',
|
|
26
|
+
ring: 'rgba(244, 63, 107, 0.4)',
|
|
27
|
+
success: '#34d399',
|
|
28
|
+
successForeground: '#ffffff',
|
|
29
|
+
warning: '#fbbf24',
|
|
30
|
+
warningForeground: '#ffffff',
|
|
31
|
+
info: '#62aaf6',
|
|
32
|
+
infoForeground: '#ffffff',
|
|
33
|
+
violet: '#a78bfa',
|
|
34
|
+
violetForeground: '#ffffff',
|
|
35
|
+
},
|
|
36
|
+
darkColors: {
|
|
37
|
+
background: '#0b0b0f',
|
|
38
|
+
foreground: '#f4f4f7',
|
|
39
|
+
card: '#16161d',
|
|
40
|
+
cardForeground: '#f4f4f7',
|
|
41
|
+
popover: '#1c1c25',
|
|
42
|
+
popoverForeground: '#f4f4f7',
|
|
43
|
+
primary: '#f43f6b',
|
|
44
|
+
primaryForeground: '#ffffff',
|
|
45
|
+
primarySoft: 'rgba(244, 63, 107, 0.14)',
|
|
46
|
+
secondary: '#1c1c25',
|
|
47
|
+
secondaryForeground: '#a6a6b3',
|
|
48
|
+
muted: '#1c1c25',
|
|
49
|
+
mutedForeground: '#71717d',
|
|
50
|
+
accent: '#22222d',
|
|
51
|
+
accentForeground: '#f4f4f7',
|
|
52
|
+
border: '#23232d',
|
|
53
|
+
input: '#23232d',
|
|
54
|
+
destructive: '#e02a58',
|
|
55
|
+
destructiveForeground: '#ffffff',
|
|
56
|
+
ring: 'rgba(244, 63, 107, 0.4)',
|
|
57
|
+
success: '#34d399',
|
|
58
|
+
successForeground: '#ffffff',
|
|
59
|
+
warning: '#fbbf24',
|
|
60
|
+
warningForeground: '#ffffff',
|
|
61
|
+
info: '#62aaf6',
|
|
62
|
+
infoForeground: '#ffffff',
|
|
63
|
+
violet: '#a78bfa',
|
|
64
|
+
violetForeground: '#ffffff',
|
|
65
|
+
},
|
|
66
|
+
typography: {
|
|
67
|
+
fontSans: "ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
|
|
68
|
+
fontMono: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",
|
|
69
|
+
},
|
|
70
|
+
radii: {
|
|
71
|
+
xs: '4px',
|
|
72
|
+
sm: '8px',
|
|
73
|
+
md: '12px',
|
|
74
|
+
lg: '16px',
|
|
75
|
+
xl: '999px',
|
|
76
|
+
},
|
|
77
|
+
customVars: {
|
|
78
|
+
'bg': '#0b0b0f',
|
|
79
|
+
'bg-elevated': '#101016',
|
|
80
|
+
'surface': '#16161d',
|
|
81
|
+
'surface-hover': '#1c1c25',
|
|
82
|
+
'surface-active': '#22222d',
|
|
83
|
+
'border': '#23232d',
|
|
84
|
+
'border-strong': '#33333f',
|
|
85
|
+
'text': '#f4f4f7',
|
|
86
|
+
'text-primary': '#f4f4f7',
|
|
87
|
+
'text-secondary': '#a6a6b3',
|
|
88
|
+
'text-muted': '#71717d',
|
|
89
|
+
'accent': '#f43f6b',
|
|
90
|
+
'accent-strong': '#e02a58',
|
|
91
|
+
'accent-contrast': '#ffffff',
|
|
92
|
+
'accent-soft': 'rgba(244, 63, 107, 0.14)',
|
|
93
|
+
'accent-border': 'rgba(244, 63, 107, 0.4)',
|
|
94
|
+
'live': '#ff3b5c',
|
|
95
|
+
'live-soft': 'rgba(255, 59, 92, 0.16)',
|
|
96
|
+
'success': '#34d399',
|
|
97
|
+
'success-soft': 'rgba(52, 211, 153, 0.14)',
|
|
98
|
+
'warning': '#fbbf24',
|
|
99
|
+
'gold': '#f5b544',
|
|
100
|
+
'gold-soft': 'rgba(245, 181, 68, 0.12)',
|
|
101
|
+
'info': '#62aaf6',
|
|
102
|
+
'info-soft': 'rgba(98, 170, 246, 0.14)',
|
|
103
|
+
'violet': '#a78bfa',
|
|
104
|
+
'violet-soft': 'rgba(167, 139, 250, 0.14)',
|
|
105
|
+
'overlay': 'rgba(5, 5, 8, 0.72)',
|
|
106
|
+
'scrim': 'linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.55) 55%, rgba(8, 8, 12, 0) 100%)',
|
|
107
|
+
'focus': '#ff8aa6',
|
|
108
|
+
'space-1': '4px',
|
|
109
|
+
'space-2': '8px',
|
|
110
|
+
'space-3': '12px',
|
|
111
|
+
'space-4': '16px',
|
|
112
|
+
'space-5': '20px',
|
|
113
|
+
'space-6': '24px',
|
|
114
|
+
'space-8': '32px',
|
|
115
|
+
'space-10': '40px',
|
|
116
|
+
'space-12': '48px',
|
|
117
|
+
'space-16': '64px',
|
|
118
|
+
'radius-sm': '8px',
|
|
119
|
+
'radius-md': '12px',
|
|
120
|
+
'radius-lg': '16px',
|
|
121
|
+
'radius-full': '999px',
|
|
122
|
+
'leading-tight': '1.25',
|
|
123
|
+
'leading-normal': '1.45',
|
|
124
|
+
'weight-regular': '400',
|
|
125
|
+
'weight-medium': '500',
|
|
126
|
+
'weight-semibold': '600',
|
|
127
|
+
'weight-bold': '700',
|
|
128
|
+
'shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.35)',
|
|
129
|
+
'shadow-md': '0 4px 16px rgba(0, 0, 0, 0.35)',
|
|
130
|
+
'shadow-lg': '0 12px 40px rgba(0, 0, 0, 0.45)',
|
|
131
|
+
'sidebar-width': '240px',
|
|
132
|
+
'header-height': '56px',
|
|
133
|
+
'bottomnav-height': '60px',
|
|
134
|
+
'content-max': '1320px',
|
|
135
|
+
'chat-column': '356px',
|
|
136
|
+
'speed-fast': '140ms',
|
|
137
|
+
'speed': '200ms',
|
|
138
|
+
'speed-slow': '320ms',
|
|
139
|
+
'ease': 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
|
140
|
+
'z-sticky': '30',
|
|
141
|
+
'z-dropdown': '40',
|
|
142
|
+
'z-overlay': '50',
|
|
143
|
+
'z-toast': '60',
|
|
144
|
+
},
|
|
145
|
+
darkCustomVars: {
|
|
146
|
+
'bg': '#0b0b0f',
|
|
147
|
+
'bg-elevated': '#101016',
|
|
148
|
+
'surface': '#16161d',
|
|
149
|
+
'surface-hover': '#1c1c25',
|
|
150
|
+
'surface-active': '#22222d',
|
|
151
|
+
'border': '#23232d',
|
|
152
|
+
'border-strong': '#33333f',
|
|
153
|
+
'text': '#f4f4f7',
|
|
154
|
+
'text-primary': '#f4f4f7',
|
|
155
|
+
'text-secondary': '#a6a6b3',
|
|
156
|
+
'text-muted': '#71717d',
|
|
157
|
+
'accent': '#f43f6b',
|
|
158
|
+
'accent-strong': '#e02a58',
|
|
159
|
+
'accent-contrast': '#ffffff',
|
|
160
|
+
'accent-soft': 'rgba(244, 63, 107, 0.14)',
|
|
161
|
+
'accent-border': 'rgba(244, 63, 107, 0.4)',
|
|
162
|
+
'live': '#ff3b5c',
|
|
163
|
+
'live-soft': 'rgba(255, 59, 92, 0.16)',
|
|
164
|
+
'success': '#34d399',
|
|
165
|
+
'success-soft': 'rgba(52, 211, 153, 0.14)',
|
|
166
|
+
'warning': '#fbbf24',
|
|
167
|
+
'gold': '#f5b544',
|
|
168
|
+
'gold-soft': 'rgba(245, 181, 68, 0.12)',
|
|
169
|
+
'info': '#62aaf6',
|
|
170
|
+
'info-soft': 'rgba(98, 170, 246, 0.14)',
|
|
171
|
+
'violet': '#a78bfa',
|
|
172
|
+
'violet-soft': 'rgba(167, 139, 250, 0.14)',
|
|
173
|
+
'overlay': 'rgba(5, 5, 8, 0.72)',
|
|
174
|
+
'scrim': 'linear-gradient(to top, rgba(8, 8, 12, 0.92) 0%, rgba(8, 8, 12, 0.55) 55%, rgba(8, 8, 12, 0) 100%)',
|
|
175
|
+
'focus': '#ff8aa6',
|
|
176
|
+
'shadow-sm': '0 1px 2px rgba(0, 0, 0, 0.35)',
|
|
177
|
+
'shadow-md': '0 4px 16px rgba(0, 0, 0, 0.35)',
|
|
178
|
+
'shadow-lg': '0 12px 40px rgba(0, 0, 0, 0.45)',
|
|
179
|
+
},
|
|
180
|
+
};
|
|
@@ -4,6 +4,7 @@ export { midnightTheme } from './midnight.theme';
|
|
|
4
4
|
export { editorialTheme } from './editorial.theme';
|
|
5
5
|
export { forestTheme } from './forest.theme';
|
|
6
6
|
export { fieldTheme } from './field.theme';
|
|
7
|
+
export { crimsonTheme } from './crimson.theme';
|
|
7
8
|
export { createTheme } from './create-theme';
|
|
8
9
|
export type { ThemeOverrides } from './create-theme';
|
|
9
10
|
export { registerTheme, getTheme, hasTheme, listThemes } from './registry';
|
|
@@ -4,68 +4,168 @@ export const oceanTheme: ThemeConfig = {
|
|
|
4
4
|
name: 'ocean',
|
|
5
5
|
mode: 'light',
|
|
6
6
|
colors: {
|
|
7
|
-
background: '#
|
|
8
|
-
foreground: '#
|
|
7
|
+
background: '#edf1f3',
|
|
8
|
+
foreground: '#0a1e26',
|
|
9
9
|
card: '#ffffff',
|
|
10
|
-
cardForeground: '#
|
|
10
|
+
cardForeground: '#0a1e26',
|
|
11
11
|
popover: '#ffffff',
|
|
12
|
-
popoverForeground: '#
|
|
12
|
+
popoverForeground: '#0a1e26',
|
|
13
13
|
primary: '#0284c7',
|
|
14
14
|
primaryForeground: '#ffffff',
|
|
15
15
|
primarySoft: 'rgba(2, 132, 199, 0.1)',
|
|
16
|
-
secondary: '#
|
|
17
|
-
secondaryForeground: '#
|
|
18
|
-
muted: '#
|
|
19
|
-
mutedForeground: '#
|
|
20
|
-
accent: '#
|
|
21
|
-
accentForeground: '#
|
|
22
|
-
border: '#
|
|
23
|
-
input: '#
|
|
24
|
-
destructive: '#
|
|
16
|
+
secondary: '#f6f9fa',
|
|
17
|
+
secondaryForeground: '#35494f',
|
|
18
|
+
muted: '#eef4f6',
|
|
19
|
+
mutedForeground: '#5c7077',
|
|
20
|
+
accent: '#eefafc',
|
|
21
|
+
accentForeground: '#076a80',
|
|
22
|
+
border: '#d9e3e7',
|
|
23
|
+
input: '#afc2c9',
|
|
24
|
+
destructive: '#bf3b2b',
|
|
25
25
|
destructiveForeground: '#ffffff',
|
|
26
|
-
ring: 'rgba(
|
|
27
|
-
success: '#
|
|
26
|
+
ring: 'rgba(44, 192, 220, 0.35)',
|
|
27
|
+
success: '#0e8a5f',
|
|
28
28
|
successForeground: '#ffffff',
|
|
29
|
-
warning: '#
|
|
29
|
+
warning: '#a05e03',
|
|
30
30
|
warningForeground: '#ffffff',
|
|
31
|
-
info: '#
|
|
31
|
+
info: '#1f6fae',
|
|
32
32
|
infoForeground: '#ffffff',
|
|
33
|
+
violet: '#6d5bd0',
|
|
34
|
+
violetForeground: '#ffffff',
|
|
33
35
|
},
|
|
34
36
|
darkColors: {
|
|
35
|
-
background: '#
|
|
36
|
-
foreground: '#
|
|
37
|
-
card: '#
|
|
38
|
-
cardForeground: '#
|
|
39
|
-
popover: '#
|
|
40
|
-
popoverForeground: '#
|
|
37
|
+
background: '#041219',
|
|
38
|
+
foreground: '#e8f4f8',
|
|
39
|
+
card: '#071c26',
|
|
40
|
+
cardForeground: '#e8f4f8',
|
|
41
|
+
popover: '#071c26',
|
|
42
|
+
popoverForeground: '#e8f4f8',
|
|
41
43
|
primary: '#38bdf8',
|
|
42
|
-
primaryForeground: '#
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
44
|
+
primaryForeground: '#041219',
|
|
45
|
+
primarySoft: 'rgba(56, 189, 248, 0.15)',
|
|
46
|
+
secondary: '#092029',
|
|
47
|
+
secondaryForeground: '#9db9c4',
|
|
48
|
+
muted: '#0a2532',
|
|
49
|
+
mutedForeground: '#8298a0',
|
|
50
|
+
accent: 'rgba(11, 165, 196, 0.2)',
|
|
51
|
+
accentForeground: '#7ad7ea',
|
|
52
|
+
border: '#103344',
|
|
53
|
+
input: '#164458',
|
|
51
54
|
destructive: '#f87171',
|
|
52
55
|
destructiveForeground: '#ffffff',
|
|
53
|
-
ring: 'rgba(
|
|
56
|
+
ring: 'rgba(44, 192, 220, 0.5)',
|
|
54
57
|
success: '#34d399',
|
|
55
58
|
successForeground: '#ffffff',
|
|
56
59
|
warning: '#fbbf24',
|
|
57
60
|
warningForeground: '#ffffff',
|
|
58
61
|
info: '#38bdf8',
|
|
59
62
|
infoForeground: '#ffffff',
|
|
63
|
+
violet: '#a78bfa',
|
|
64
|
+
violetForeground: '#ffffff',
|
|
60
65
|
},
|
|
61
66
|
typography: {
|
|
62
|
-
fontSans: '
|
|
63
|
-
|
|
67
|
+
fontSans: "'Archivo', 'Segoe UI', system-ui, sans-serif",
|
|
68
|
+
fontDisplay: "'Saira Condensed', 'Saira', 'Archivo', sans-serif",
|
|
69
|
+
fontMono: "'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace",
|
|
64
70
|
},
|
|
65
71
|
radii: {
|
|
72
|
+
xs: '4px',
|
|
66
73
|
sm: '6px',
|
|
67
74
|
md: '8px',
|
|
68
|
-
lg: '
|
|
69
|
-
xl: '
|
|
75
|
+
lg: '10px',
|
|
76
|
+
xl: '12px',
|
|
77
|
+
},
|
|
78
|
+
customVars: {
|
|
79
|
+
'font-display': "'Saira Condensed', 'Saira', 'Archivo', sans-serif",
|
|
80
|
+
'font-head': "'Saira', 'Archivo', sans-serif",
|
|
81
|
+
'font-body': "'Archivo', 'Segoe UI', sans-serif",
|
|
82
|
+
'font-mono': "'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace",
|
|
83
|
+
'ink-950': '#041219',
|
|
84
|
+
'ink-900': '#071c26',
|
|
85
|
+
'ink-850': '#092029',
|
|
86
|
+
'ink-800': '#0a2532',
|
|
87
|
+
'ink-700': '#103344',
|
|
88
|
+
'ink-600': '#164458',
|
|
89
|
+
'ink-line': 'rgba(122, 215, 234, 0.14)',
|
|
90
|
+
bg: '#edf1f3',
|
|
91
|
+
surface: '#ffffff',
|
|
92
|
+
'surface-2': '#f6f9fa',
|
|
93
|
+
'surface-3': '#eef4f6',
|
|
94
|
+
line: '#d9e3e7',
|
|
95
|
+
'line-soft': '#e6edef',
|
|
96
|
+
'line-strong': '#afc2c9',
|
|
97
|
+
'text-900': '#0a1e26',
|
|
98
|
+
'text-700': '#35494f',
|
|
99
|
+
'text-500': '#5c7077',
|
|
100
|
+
'text-400': '#8298a0',
|
|
101
|
+
'text-inv': '#e8f4f8',
|
|
102
|
+
'text-inv-dim': '#9db9c4',
|
|
103
|
+
'aqua-700': '#076a80',
|
|
104
|
+
'aqua-600': '#0888a3',
|
|
105
|
+
'aqua-500': '#0ba5c4',
|
|
106
|
+
'aqua-400': '#2cc0dc',
|
|
107
|
+
'aqua-300': '#7ad7ea',
|
|
108
|
+
'aqua-100': '#d8f1f7',
|
|
109
|
+
'aqua-50': '#eefafc',
|
|
110
|
+
'aqua-glow': 'rgba(44, 192, 220, 0.35)',
|
|
111
|
+
ok: '#0e8a5f',
|
|
112
|
+
'ok-bg': '#e0f4ea',
|
|
113
|
+
'ok-line': '#b5e0c8',
|
|
114
|
+
warn: '#a05e03',
|
|
115
|
+
'warn-bg': '#fbf0dc',
|
|
116
|
+
'warn-line': '#ecd6a8',
|
|
117
|
+
danger: '#bf3b2b',
|
|
118
|
+
'danger-bg': '#fbe8e5',
|
|
119
|
+
'danger-line': '#f0c0b8',
|
|
120
|
+
info: '#1f6fae',
|
|
121
|
+
'info-bg': '#e3eff9',
|
|
122
|
+
'info-line': '#bcd6ec',
|
|
123
|
+
hold: '#5b7078',
|
|
124
|
+
'hold-bg': '#e8eeF0',
|
|
125
|
+
'hold-line': '#cdd9de',
|
|
126
|
+
violet: '#6d5bd0',
|
|
127
|
+
'violet-bg': '#ece9fb',
|
|
128
|
+
'violet-line': '#cdc6f1',
|
|
129
|
+
radius: '8px',
|
|
130
|
+
'radius-sm': '6px',
|
|
131
|
+
'radius-xs': '4px',
|
|
132
|
+
'shadow-1': '0 1px 2px rgba(10, 30, 38, 0.05), 0 1px 1px rgba(10, 30, 38, 0.03)',
|
|
133
|
+
'shadow-2': '0 4px 14px rgba(10, 30, 38, 0.08), 0 1px 3px rgba(10, 30, 38, 0.05)',
|
|
134
|
+
'shadow-3': '0 12px 34px rgba(7, 28, 38, 0.16), 0 4px 10px rgba(7, 28, 38, 0.08)',
|
|
135
|
+
'shadow-pop': '0 16px 44px rgba(7, 28, 38, 0.22)',
|
|
136
|
+
ease: 'cubic-bezier(0.32, 0.72, 0, 1)',
|
|
137
|
+
'ease-out': 'cubic-bezier(0.16, 1, 0.3, 1)',
|
|
138
|
+
'dur-1': '140ms',
|
|
139
|
+
'dur-2': '240ms',
|
|
140
|
+
'dur-3': '380ms',
|
|
141
|
+
'sidebar-w': '248px',
|
|
142
|
+
'topbar-h': '56px',
|
|
143
|
+
},
|
|
144
|
+
darkCustomVars: {
|
|
145
|
+
bg: '#041219',
|
|
146
|
+
surface: '#071c26',
|
|
147
|
+
'surface-2': '#092029',
|
|
148
|
+
'surface-3': '#0a2532',
|
|
149
|
+
line: '#103344',
|
|
150
|
+
'line-soft': '#0d2937',
|
|
151
|
+
'line-strong': '#164458',
|
|
152
|
+
'text-900': '#e8f4f8',
|
|
153
|
+
'text-700': '#9db9c4',
|
|
154
|
+
'text-500': '#8298a0',
|
|
155
|
+
'text-400': '#5c7077',
|
|
156
|
+
'text-inv': '#0a1e26',
|
|
157
|
+
'text-inv-dim': '#35494f',
|
|
158
|
+
'ok-bg': 'rgba(14, 138, 95, 0.2)',
|
|
159
|
+
'ok-line': '#166534',
|
|
160
|
+
'warn-bg': 'rgba(160, 94, 3, 0.2)',
|
|
161
|
+
'warn-line': '#854d0e',
|
|
162
|
+
'danger-bg': 'rgba(191, 59, 43, 0.2)',
|
|
163
|
+
'danger-line': '#991b1b',
|
|
164
|
+
'info-bg': 'rgba(31, 111, 174, 0.2)',
|
|
165
|
+
'info-line': '#1e40af',
|
|
166
|
+
'hold-bg': 'rgba(91, 112, 120, 0.2)',
|
|
167
|
+
'hold-line': '#374151',
|
|
168
|
+
'violet-bg': 'rgba(109, 91, 208, 0.2)',
|
|
169
|
+
'violet-line': '#5b21b6',
|
|
70
170
|
},
|
|
71
171
|
};
|
|
@@ -5,6 +5,7 @@ import { midnightTheme } from './midnight.theme';
|
|
|
5
5
|
import { editorialTheme } from './editorial.theme';
|
|
6
6
|
import { forestTheme } from './forest.theme';
|
|
7
7
|
import { fieldTheme } from './field.theme';
|
|
8
|
+
import { crimsonTheme } from './crimson.theme';
|
|
8
9
|
|
|
9
10
|
const themeRegistry = new Map<string, ThemeConfig>([
|
|
10
11
|
['default', defaultTheme],
|
|
@@ -13,6 +14,7 @@ const themeRegistry = new Map<string, ThemeConfig>([
|
|
|
13
14
|
['editorial', editorialTheme],
|
|
14
15
|
['forest', forestTheme],
|
|
15
16
|
['field', fieldTheme],
|
|
17
|
+
['crimson', crimsonTheme],
|
|
16
18
|
]);
|
|
17
19
|
|
|
18
20
|
export function registerTheme(theme: ThemeConfig): void {
|