@umoa/saascfm-css 0.0.0-stage → 0.1.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/LICENSE +12 -0
- package/README.md +133 -2
- package/client.d.ts +1 -0
- package/dist/index.cjs +565 -0
- package/dist/index.d.cts +18 -0
- package/dist/index.d.ts +18 -0
- package/dist/index.js +534 -0
- package/package.json +57 -3
- package/templates/js/minimal/app.colors.js +25 -0
- package/templates/js/sectioned/app.colors.js +14 -0
- package/templates/js/sectioned/border.colors.js +7 -0
- package/templates/js/sectioned/navigation.colors.js +9 -0
- package/templates/js/sectioned/primitives.colors.js +32 -0
- package/templates/js/sectioned/status.colors.js +21 -0
- package/templates/js/sectioned/surface.colors.js +17 -0
- package/templates/js/single/app.colors.js +89 -0
- package/templates/ts/minimal/app.colors.ts +25 -0
- package/templates/ts/sectioned/app.colors.ts +14 -0
- package/templates/ts/sectioned/border.colors.ts +7 -0
- package/templates/ts/sectioned/navigation.colors.ts +9 -0
- package/templates/ts/sectioned/primitives.colors.ts +32 -0
- package/templates/ts/sectioned/status.colors.ts +21 -0
- package/templates/ts/sectioned/surface.colors.ts +17 -0
- package/templates/ts/single/app.colors.ts +89 -0
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export const PRIMITIVES = {
|
|
2
|
+
'brand-50': '#EFF4FF',
|
|
3
|
+
'brand-100': '#DBE6FE',
|
|
4
|
+
'brand-200': '#BFD3FE',
|
|
5
|
+
'brand-300': '#93B4FD',
|
|
6
|
+
'brand-400': '#6090FA',
|
|
7
|
+
'brand-500': '#3B6FF0',
|
|
8
|
+
'brand-600': '#2A55D6',
|
|
9
|
+
'brand-700': '#2344AD',
|
|
10
|
+
'brand-800': '#1F3B8A',
|
|
11
|
+
'brand-900': '#1B3170',
|
|
12
|
+
|
|
13
|
+
'neutral-50': '#FAFAF9',
|
|
14
|
+
'neutral-100': '#F4F4F2',
|
|
15
|
+
'neutral-200': '#E8E8E5',
|
|
16
|
+
'neutral-300': '#D6D6D2',
|
|
17
|
+
'neutral-400': '#A8A8A2',
|
|
18
|
+
'neutral-500': '#7C7C76',
|
|
19
|
+
'neutral-600': '#5C5C57',
|
|
20
|
+
'neutral-700': '#44443F',
|
|
21
|
+
'neutral-800': '#2C2C29',
|
|
22
|
+
'neutral-900': '#181816',
|
|
23
|
+
|
|
24
|
+
'white': '#FFFFFF',
|
|
25
|
+
'black': '#000000',
|
|
26
|
+
|
|
27
|
+
'red-100': '#FDECEC', 'red-500': '#D64545',
|
|
28
|
+
'green-100': '#E6F5EC', 'green-500': '#2F7A4C',
|
|
29
|
+
'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
|
|
30
|
+
'blue-100': '#DCEAF7', 'blue-500': '#2F6FA8',
|
|
31
|
+
'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
|
|
32
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export const STATUS_TOKENS = {
|
|
2
|
+
'text-status-error': 'red-500',
|
|
3
|
+
'bg-status-error': 'red-500',
|
|
4
|
+
'bg-status-error-subtle': 'red-100',
|
|
5
|
+
'border-status-error': 'red-500',
|
|
6
|
+
|
|
7
|
+
'text-status-success': 'green-500',
|
|
8
|
+
'bg-status-success': 'green-500',
|
|
9
|
+
'bg-status-success-subtle': 'green-100',
|
|
10
|
+
'border-status-success': 'green-500',
|
|
11
|
+
|
|
12
|
+
'text-status-warning': 'yellow-500',
|
|
13
|
+
'bg-status-warning': 'yellow-500',
|
|
14
|
+
'bg-status-warning-subtle': 'yellow-100',
|
|
15
|
+
'border-status-warning': 'yellow-500',
|
|
16
|
+
|
|
17
|
+
'text-status-info': 'blue-500',
|
|
18
|
+
'bg-status-info': 'blue-500',
|
|
19
|
+
'bg-status-info-subtle': 'blue-100',
|
|
20
|
+
'border-status-info': 'blue-500',
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const SURFACE_TOKENS = {
|
|
2
|
+
'text-primary': 'neutral-900',
|
|
3
|
+
'text-secondary': 'neutral-600',
|
|
4
|
+
'text-muted': 'neutral-500',
|
|
5
|
+
'text-disabled': 'neutral-400',
|
|
6
|
+
'text-inverse': 'white',
|
|
7
|
+
'text-brand': 'brand-500',
|
|
8
|
+
'text-link': 'brand-600',
|
|
9
|
+
|
|
10
|
+
'bg-page': 'neutral-50',
|
|
11
|
+
'bg-surface': 'white',
|
|
12
|
+
'bg-subtle': 'neutral-100',
|
|
13
|
+
'bg-header': 'white',
|
|
14
|
+
'bg-overlay': 'neutral-900',
|
|
15
|
+
'bg-brand': 'brand-500',
|
|
16
|
+
'bg-brand-subtle': 'brand-50',
|
|
17
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
export const PRIMITIVES = {
|
|
2
|
+
'brand-50': '#EFF4FF',
|
|
3
|
+
'brand-100': '#DBE6FE',
|
|
4
|
+
'brand-200': '#BFD3FE',
|
|
5
|
+
'brand-300': '#93B4FD',
|
|
6
|
+
'brand-400': '#6090FA',
|
|
7
|
+
'brand-500': '#3B6FF0',
|
|
8
|
+
'brand-600': '#2A55D6',
|
|
9
|
+
'brand-700': '#2344AD',
|
|
10
|
+
'brand-800': '#1F3B8A',
|
|
11
|
+
'brand-900': '#1B3170',
|
|
12
|
+
|
|
13
|
+
'neutral-50': '#FAFAF9',
|
|
14
|
+
'neutral-100': '#F4F4F2',
|
|
15
|
+
'neutral-200': '#E8E8E5',
|
|
16
|
+
'neutral-300': '#D6D6D2',
|
|
17
|
+
'neutral-400': '#A8A8A2',
|
|
18
|
+
'neutral-500': '#7C7C76',
|
|
19
|
+
'neutral-600': '#5C5C57',
|
|
20
|
+
'neutral-700': '#44443F',
|
|
21
|
+
'neutral-800': '#2C2C29',
|
|
22
|
+
'neutral-900': '#181816',
|
|
23
|
+
|
|
24
|
+
'white': '#FFFFFF',
|
|
25
|
+
'black': '#000000',
|
|
26
|
+
|
|
27
|
+
'red-100': '#FDECEC', 'red-500': '#D64545',
|
|
28
|
+
'green-100': '#E6F5EC', 'green-500': '#2F7A4C',
|
|
29
|
+
'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
|
|
30
|
+
'blue-100': '#DCEAF7', 'blue-500': '#2F6FA8',
|
|
31
|
+
'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export const TOKENS = {
|
|
35
|
+
// Text
|
|
36
|
+
'text-primary': 'neutral-900',
|
|
37
|
+
'text-secondary': 'neutral-600',
|
|
38
|
+
'text-muted': 'neutral-500',
|
|
39
|
+
'text-disabled': 'neutral-400',
|
|
40
|
+
'text-inverse': 'white',
|
|
41
|
+
'text-brand': 'brand-500',
|
|
42
|
+
'text-link': 'brand-600',
|
|
43
|
+
|
|
44
|
+
// Background
|
|
45
|
+
'bg-page': 'neutral-50',
|
|
46
|
+
'bg-surface': 'white',
|
|
47
|
+
'bg-subtle': 'neutral-100',
|
|
48
|
+
'bg-header': 'white',
|
|
49
|
+
'bg-overlay': 'neutral-900',
|
|
50
|
+
'bg-brand': 'brand-500',
|
|
51
|
+
'bg-brand-subtle': 'brand-50',
|
|
52
|
+
|
|
53
|
+
// Border
|
|
54
|
+
'border-default': 'neutral-200',
|
|
55
|
+
'border-muted': 'neutral-100',
|
|
56
|
+
'border-strong': 'neutral-300',
|
|
57
|
+
'border-brand': 'brand-500',
|
|
58
|
+
'border-focus': 'brand-400',
|
|
59
|
+
|
|
60
|
+
// Status
|
|
61
|
+
'text-status-error': 'red-500',
|
|
62
|
+
'bg-status-error': 'red-500',
|
|
63
|
+
'bg-status-error-subtle': 'red-100',
|
|
64
|
+
'border-status-error': 'red-500',
|
|
65
|
+
|
|
66
|
+
'text-status-success': 'green-500',
|
|
67
|
+
'bg-status-success': 'green-500',
|
|
68
|
+
'bg-status-success-subtle': 'green-100',
|
|
69
|
+
'border-status-success': 'green-500',
|
|
70
|
+
|
|
71
|
+
'text-status-warning': 'yellow-500',
|
|
72
|
+
'bg-status-warning': 'yellow-500',
|
|
73
|
+
'bg-status-warning-subtle': 'yellow-100',
|
|
74
|
+
'border-status-warning': 'yellow-500',
|
|
75
|
+
|
|
76
|
+
'text-status-info': 'blue-500',
|
|
77
|
+
'bg-status-info': 'blue-500',
|
|
78
|
+
'bg-status-info-subtle': 'blue-100',
|
|
79
|
+
'border-status-info': 'blue-500',
|
|
80
|
+
|
|
81
|
+
// Navigation (CSS vars only)
|
|
82
|
+
'nav-bg': 'neutral-50',
|
|
83
|
+
'nav-item-text': 'neutral-600',
|
|
84
|
+
'nav-item-active-bg': 'brand-50',
|
|
85
|
+
'nav-item-active-text': 'brand-600',
|
|
86
|
+
'nav-group-label': 'neutral-500',
|
|
87
|
+
'nav-children-border': 'neutral-200',
|
|
88
|
+
'nav-children-active-border': 'brand-500',
|
|
89
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export const PRIMITIVES = {
|
|
2
|
+
'brand-500': '#3B6FF0',
|
|
3
|
+
'neutral-50': '#FAFAF9',
|
|
4
|
+
'neutral-200': '#E8E8E5',
|
|
5
|
+
'neutral-600': '#5C5C57',
|
|
6
|
+
'neutral-900': '#181816',
|
|
7
|
+
'white': '#FFFFFF',
|
|
8
|
+
'red-500': '#D64545',
|
|
9
|
+
'green-500': '#2F7A4C',
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const TOKENS = {
|
|
13
|
+
'text-primary': 'neutral-900',
|
|
14
|
+
'text-secondary': 'neutral-600',
|
|
15
|
+
'text-inverse': 'white',
|
|
16
|
+
'text-brand': 'brand-500',
|
|
17
|
+
'bg-page': 'neutral-50',
|
|
18
|
+
'bg-surface': 'white',
|
|
19
|
+
'bg-brand': 'brand-500',
|
|
20
|
+
'border-default': 'neutral-200',
|
|
21
|
+
'text-status-error': 'red-500',
|
|
22
|
+
'bg-status-error': 'red-500',
|
|
23
|
+
'text-status-success': 'green-500',
|
|
24
|
+
'bg-status-success': 'green-500',
|
|
25
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { PRIMITIVES } from './primitives.colors'
|
|
2
|
+
import { SURFACE_TOKENS } from './surface.colors'
|
|
3
|
+
import { BORDER_TOKENS } from './border.colors'
|
|
4
|
+
import { STATUS_TOKENS } from './status.colors'
|
|
5
|
+
import { NAVIGATION_TOKENS } from './navigation.colors'
|
|
6
|
+
|
|
7
|
+
export { PRIMITIVES }
|
|
8
|
+
|
|
9
|
+
export const TOKENS = {
|
|
10
|
+
...SURFACE_TOKENS,
|
|
11
|
+
...BORDER_TOKENS,
|
|
12
|
+
...STATUS_TOKENS,
|
|
13
|
+
...NAVIGATION_TOKENS,
|
|
14
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export const NAVIGATION_TOKENS = {
|
|
2
|
+
'nav-bg': 'neutral-50',
|
|
3
|
+
'nav-item-text': 'neutral-600',
|
|
4
|
+
'nav-item-active-bg': 'brand-50',
|
|
5
|
+
'nav-item-active-text': 'brand-600',
|
|
6
|
+
'nav-group-label': 'neutral-500',
|
|
7
|
+
'nav-children-border': 'neutral-200',
|
|
8
|
+
'nav-children-active-border': 'brand-500',
|
|
9
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
export const PRIMITIVES = {
|
|
2
|
+
'brand-50': '#EFF4FF',
|
|
3
|
+
'brand-100': '#DBE6FE',
|
|
4
|
+
'brand-200': '#BFD3FE',
|
|
5
|
+
'brand-300': '#93B4FD',
|
|
6
|
+
'brand-400': '#6090FA',
|
|
7
|
+
'brand-500': '#3B6FF0',
|
|
8
|
+
'brand-600': '#2A55D6',
|
|
9
|
+
'brand-700': '#2344AD',
|
|
10
|
+
'brand-800': '#1F3B8A',
|
|
11
|
+
'brand-900': '#1B3170',
|
|
12
|
+
|
|
13
|
+
'neutral-50': '#FAFAF9',
|
|
14
|
+
'neutral-100': '#F4F4F2',
|
|
15
|
+
'neutral-200': '#E8E8E5',
|
|
16
|
+
'neutral-300': '#D6D6D2',
|
|
17
|
+
'neutral-400': '#A8A8A2',
|
|
18
|
+
'neutral-500': '#7C7C76',
|
|
19
|
+
'neutral-600': '#5C5C57',
|
|
20
|
+
'neutral-700': '#44443F',
|
|
21
|
+
'neutral-800': '#2C2C29',
|
|
22
|
+
'neutral-900': '#181816',
|
|
23
|
+
|
|
24
|
+
'white': '#FFFFFF',
|
|
25
|
+
'black': '#000000',
|
|
26
|
+
|
|
27
|
+
'red-100': '#FDECEC', 'red-500': '#D64545',
|
|
28
|
+
'green-100': '#E6F5EC', 'green-500': '#2F7A4C',
|
|
29
|
+
'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
|
|
30
|
+
'blue-100': '#DCEAF7', 'blue-500': '#2F6FA8',
|
|
31
|
+
'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
|
|
32
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export const STATUS_TOKENS = {
|
|
2
|
+
'text-status-error': 'red-500',
|
|
3
|
+
'bg-status-error': 'red-500',
|
|
4
|
+
'bg-status-error-subtle': 'red-100',
|
|
5
|
+
'border-status-error': 'red-500',
|
|
6
|
+
|
|
7
|
+
'text-status-success': 'green-500',
|
|
8
|
+
'bg-status-success': 'green-500',
|
|
9
|
+
'bg-status-success-subtle': 'green-100',
|
|
10
|
+
'border-status-success': 'green-500',
|
|
11
|
+
|
|
12
|
+
'text-status-warning': 'yellow-500',
|
|
13
|
+
'bg-status-warning': 'yellow-500',
|
|
14
|
+
'bg-status-warning-subtle': 'yellow-100',
|
|
15
|
+
'border-status-warning': 'yellow-500',
|
|
16
|
+
|
|
17
|
+
'text-status-info': 'blue-500',
|
|
18
|
+
'bg-status-info': 'blue-500',
|
|
19
|
+
'bg-status-info-subtle': 'blue-100',
|
|
20
|
+
'border-status-info': 'blue-500',
|
|
21
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export const SURFACE_TOKENS = {
|
|
2
|
+
'text-primary': 'neutral-900',
|
|
3
|
+
'text-secondary': 'neutral-600',
|
|
4
|
+
'text-muted': 'neutral-500',
|
|
5
|
+
'text-disabled': 'neutral-400',
|
|
6
|
+
'text-inverse': 'white',
|
|
7
|
+
'text-brand': 'brand-500',
|
|
8
|
+
'text-link': 'brand-600',
|
|
9
|
+
|
|
10
|
+
'bg-page': 'neutral-50',
|
|
11
|
+
'bg-surface': 'white',
|
|
12
|
+
'bg-subtle': 'neutral-100',
|
|
13
|
+
'bg-header': 'white',
|
|
14
|
+
'bg-overlay': 'neutral-900',
|
|
15
|
+
'bg-brand': 'brand-500',
|
|
16
|
+
'bg-brand-subtle': 'brand-50',
|
|
17
|
+
}
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
export const PRIMITIVES = {
|
|
2
|
+
'brand-50': '#EFF4FF',
|
|
3
|
+
'brand-100': '#DBE6FE',
|
|
4
|
+
'brand-200': '#BFD3FE',
|
|
5
|
+
'brand-300': '#93B4FD',
|
|
6
|
+
'brand-400': '#6090FA',
|
|
7
|
+
'brand-500': '#3B6FF0',
|
|
8
|
+
'brand-600': '#2A55D6',
|
|
9
|
+
'brand-700': '#2344AD',
|
|
10
|
+
'brand-800': '#1F3B8A',
|
|
11
|
+
'brand-900': '#1B3170',
|
|
12
|
+
|
|
13
|
+
'neutral-50': '#FAFAF9',
|
|
14
|
+
'neutral-100': '#F4F4F2',
|
|
15
|
+
'neutral-200': '#E8E8E5',
|
|
16
|
+
'neutral-300': '#D6D6D2',
|
|
17
|
+
'neutral-400': '#A8A8A2',
|
|
18
|
+
'neutral-500': '#7C7C76',
|
|
19
|
+
'neutral-600': '#5C5C57',
|
|
20
|
+
'neutral-700': '#44443F',
|
|
21
|
+
'neutral-800': '#2C2C29',
|
|
22
|
+
'neutral-900': '#181816',
|
|
23
|
+
|
|
24
|
+
'white': '#FFFFFF',
|
|
25
|
+
'black': '#000000',
|
|
26
|
+
|
|
27
|
+
'red-100': '#FDECEC', 'red-500': '#D64545',
|
|
28
|
+
'green-100': '#E6F5EC', 'green-500': '#2F7A4C',
|
|
29
|
+
'yellow-100': '#FBF0DC', 'yellow-500': '#C9821B',
|
|
30
|
+
'blue-100': '#DCEAF7', 'blue-500': '#2F6FA8',
|
|
31
|
+
'purple-100': '#F3EEF8', 'purple-500': '#8A5FB0',
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
export const TOKENS = {
|
|
35
|
+
// Text
|
|
36
|
+
'text-primary': 'neutral-900',
|
|
37
|
+
'text-secondary': 'neutral-600',
|
|
38
|
+
'text-muted': 'neutral-500',
|
|
39
|
+
'text-disabled': 'neutral-400',
|
|
40
|
+
'text-inverse': 'white',
|
|
41
|
+
'text-brand': 'brand-500',
|
|
42
|
+
'text-link': 'brand-600',
|
|
43
|
+
|
|
44
|
+
// Background
|
|
45
|
+
'bg-page': 'neutral-50',
|
|
46
|
+
'bg-surface': 'white',
|
|
47
|
+
'bg-subtle': 'neutral-100',
|
|
48
|
+
'bg-header': 'white',
|
|
49
|
+
'bg-overlay': 'neutral-900',
|
|
50
|
+
'bg-brand': 'brand-500',
|
|
51
|
+
'bg-brand-subtle': 'brand-50',
|
|
52
|
+
|
|
53
|
+
// Border
|
|
54
|
+
'border-default': 'neutral-200',
|
|
55
|
+
'border-muted': 'neutral-100',
|
|
56
|
+
'border-strong': 'neutral-300',
|
|
57
|
+
'border-brand': 'brand-500',
|
|
58
|
+
'border-focus': 'brand-400',
|
|
59
|
+
|
|
60
|
+
// Status
|
|
61
|
+
'text-status-error': 'red-500',
|
|
62
|
+
'bg-status-error': 'red-500',
|
|
63
|
+
'bg-status-error-subtle': 'red-100',
|
|
64
|
+
'border-status-error': 'red-500',
|
|
65
|
+
|
|
66
|
+
'text-status-success': 'green-500',
|
|
67
|
+
'bg-status-success': 'green-500',
|
|
68
|
+
'bg-status-success-subtle': 'green-100',
|
|
69
|
+
'border-status-success': 'green-500',
|
|
70
|
+
|
|
71
|
+
'text-status-warning': 'yellow-500',
|
|
72
|
+
'bg-status-warning': 'yellow-500',
|
|
73
|
+
'bg-status-warning-subtle': 'yellow-100',
|
|
74
|
+
'border-status-warning': 'yellow-500',
|
|
75
|
+
|
|
76
|
+
'text-status-info': 'blue-500',
|
|
77
|
+
'bg-status-info': 'blue-500',
|
|
78
|
+
'bg-status-info-subtle': 'blue-100',
|
|
79
|
+
'border-status-info': 'blue-500',
|
|
80
|
+
|
|
81
|
+
// Navigation (CSS vars only)
|
|
82
|
+
'nav-bg': 'neutral-50',
|
|
83
|
+
'nav-item-text': 'neutral-600',
|
|
84
|
+
'nav-item-active-bg': 'brand-50',
|
|
85
|
+
'nav-item-active-text': 'brand-600',
|
|
86
|
+
'nav-group-label': 'neutral-500',
|
|
87
|
+
'nav-children-border': 'neutral-200',
|
|
88
|
+
'nav-children-active-border': 'brand-500',
|
|
89
|
+
}
|