@lumaui/tokens 0.1.0 → 0.1.2
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/build/luma-classes.js +75 -0
- package/build/luma-complete.css +21 -0
- package/package.json +8 -7
- package/src/components/badge/badge.dark.json +0 -11
- package/src/components/badge/badge.json +0 -36
- package/src/components/button/button.dark.json +0 -96
- package/src/components/button/button.json +0 -154
- package/src/components/card/card.dark.json +0 -81
- package/src/components/card/card.json +0 -111
- package/src/core/colors.dark.json +0 -154
- package/src/core/colors.json +0 -164
- package/src/core/spacing.json +0 -53
- package/src/core/transitions.json +0 -23
- package/src/core/typography.json +0 -64
- package/src/index.ts +0 -8
- package/src/luma-dark.css +0 -34
- package/src/luma.css +0 -273
- package/src/themes/dark.tokens.css +0 -55
- package/src/themes/light.tokens.css +0 -55
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Auto-generated manifest of classes used by @lumaui/angular components
|
|
3
|
+
* DO NOT EDIT - This file is regenerated during build
|
|
4
|
+
*
|
|
5
|
+
* This file exists so Tailwind can detect which classes are used
|
|
6
|
+
* without requiring @source directive in user's CSS
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
export const LUMA_COMPONENT_CLASSES = [
|
|
10
|
+
'active:lm-bg-button-danger-bg-active',
|
|
11
|
+
'active:lm-bg-button-primary-bg-active',
|
|
12
|
+
'bg-gradient-to-b',
|
|
13
|
+
'bg-transparent',
|
|
14
|
+
'border',
|
|
15
|
+
'disabled:cursor-not-allowed',
|
|
16
|
+
'disabled:opacity-50',
|
|
17
|
+
'focus-visible:lm-ring-button-focus',
|
|
18
|
+
'focus:outline-none',
|
|
19
|
+
'font-medium',
|
|
20
|
+
'hover:lm-bg-button-danger-bg-hover',
|
|
21
|
+
'hover:lm-bg-button-ghost-bg-hover',
|
|
22
|
+
'hover:lm-bg-button-outline-bg-hover',
|
|
23
|
+
'hover:lm-bg-button-primary-bg-hover',
|
|
24
|
+
'hover:lm-border-button-outline-border-hover',
|
|
25
|
+
'inline-flex',
|
|
26
|
+
'items-center',
|
|
27
|
+
'justify-center',
|
|
28
|
+
'leading-snug',
|
|
29
|
+
'lm-bg-button-danger-bg',
|
|
30
|
+
'lm-bg-button-ghost-bg',
|
|
31
|
+
'lm-bg-button-primary-bg',
|
|
32
|
+
'lm-bg-card-background',
|
|
33
|
+
'lm-bg-card-nested',
|
|
34
|
+
'lm-bg-card-preview',
|
|
35
|
+
'lm-bg-card-shadow',
|
|
36
|
+
'lm-border-button-outline-border',
|
|
37
|
+
'lm-border-card-nested',
|
|
38
|
+
'lm-border-card-preview',
|
|
39
|
+
'lm-border-card-shadow',
|
|
40
|
+
'lm-from-card-gradient-from',
|
|
41
|
+
'lm-p-card',
|
|
42
|
+
'lm-rounded-button',
|
|
43
|
+
'lm-rounded-card-nested',
|
|
44
|
+
'lm-rounded-card-preview',
|
|
45
|
+
'lm-rounded-card-shadow',
|
|
46
|
+
'lm-rounded-lg',
|
|
47
|
+
'lm-shadow-card',
|
|
48
|
+
'lm-shadow-card-shadow',
|
|
49
|
+
'lm-text-button-danger-text',
|
|
50
|
+
'lm-text-button-ghost-text',
|
|
51
|
+
'lm-text-button-outline-text',
|
|
52
|
+
'lm-text-button-primary-text',
|
|
53
|
+
'lm-text-primary',
|
|
54
|
+
'lm-text-secondary',
|
|
55
|
+
'lm-text-size-base',
|
|
56
|
+
'lm-to-card-gradient-to',
|
|
57
|
+
'mb-1',
|
|
58
|
+
'mb-5',
|
|
59
|
+
'p-[1px]',
|
|
60
|
+
'px-[var(--luma-button-padding-x-lg)]',
|
|
61
|
+
'px-[var(--luma-button-padding-x-md)]',
|
|
62
|
+
'px-[var(--luma-button-padding-x-sm)]',
|
|
63
|
+
'py-[var(--luma-button-padding-y-lg)]',
|
|
64
|
+
'py-[var(--luma-button-padding-y-md)]',
|
|
65
|
+
'py-[var(--luma-button-padding-y-sm)]',
|
|
66
|
+
'relative',
|
|
67
|
+
'rounded-[17px]',
|
|
68
|
+
'text-2xl',
|
|
69
|
+
'text-base',
|
|
70
|
+
'text-lg',
|
|
71
|
+
'text-sm',
|
|
72
|
+
'text-xs',
|
|
73
|
+
'transition-[color_var(--luma-button-transition-duration)_var(--luma-button-transition-timing)]',
|
|
74
|
+
'w-full'
|
|
75
|
+
];
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Luma Design System - Complete CSS
|
|
3
|
+
*
|
|
4
|
+
* This file includes:
|
|
5
|
+
* - All design tokens (colors, spacing, typography, etc.)
|
|
6
|
+
* - All Tailwind utilities for Luma components
|
|
7
|
+
* - Internal @source directive (no need to add @source in your project!)
|
|
8
|
+
*
|
|
9
|
+
* Usage in your styles.css:
|
|
10
|
+
* @import 'tailwindcss';
|
|
11
|
+
* @import '@lumaui/tokens';
|
|
12
|
+
*
|
|
13
|
+
* For dark theme support, also add:
|
|
14
|
+
* @import '@lumaui/tokens/dark.css';
|
|
15
|
+
*/
|
|
16
|
+
|
|
17
|
+
/* Tell Tailwind to scan the component class manifest */
|
|
18
|
+
@source "./luma-classes.js";
|
|
19
|
+
|
|
20
|
+
/* Import all tokens and utilities */
|
|
21
|
+
@import './luma.css';
|
package/package.json
CHANGED
|
@@ -1,24 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lumaui/tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Design tokens for Luma UI - Neo-Minimal design system",
|
|
5
5
|
"type": "module",
|
|
6
|
-
"main": "
|
|
7
|
-
"types": "src/index.ts",
|
|
6
|
+
"main": "./build/luma-complete.css",
|
|
8
7
|
"exports": {
|
|
9
|
-
".": "./
|
|
10
|
-
"./styles.css": "./build/luma.css",
|
|
8
|
+
".": "./build/luma-complete.css",
|
|
9
|
+
"./styles.css": "./build/luma-complete.css",
|
|
10
|
+
"./tokens": "./build/luma.css",
|
|
11
|
+
"./dark.css": "./build/luma-dark.css",
|
|
11
12
|
"./styles/dark.css": "./build/luma-dark.css"
|
|
12
13
|
},
|
|
13
14
|
"files": [
|
|
14
15
|
"build/",
|
|
15
|
-
"src/",
|
|
16
16
|
"README.md"
|
|
17
17
|
],
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "npm run build:light && npm run build:dark",
|
|
19
|
+
"build": "npm run build:light && npm run build:dark && npm run build:manifest",
|
|
20
20
|
"build:light": "style-dictionary build --config config.js",
|
|
21
21
|
"build:dark": "style-dictionary build --config config.dark.js",
|
|
22
|
+
"build:manifest": "npx ts-node --esm ../../tools/generate-class-manifest.ts",
|
|
22
23
|
"watch": "npm run build && npm run watch:light & npm run watch:dark",
|
|
23
24
|
"watch:light": "style-dictionary build --config config.js --watch",
|
|
24
25
|
"watch:dark": "style-dictionary build --config config.dark.js --watch"
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"luma": {
|
|
3
|
-
"badge": {
|
|
4
|
-
"color": {
|
|
5
|
-
"value": "{luma.color.primary.50}",
|
|
6
|
-
"type": "color",
|
|
7
|
-
"description": "Badge text color"
|
|
8
|
-
},
|
|
9
|
-
"bg": {
|
|
10
|
-
"value": "oklch(0.54 0.1 230 / 0.1)",
|
|
11
|
-
"type": "color",
|
|
12
|
-
"description": "Badge background color"
|
|
13
|
-
},
|
|
14
|
-
"padding-x": {
|
|
15
|
-
"value": "0.625rem",
|
|
16
|
-
"type": "dimension",
|
|
17
|
-
"description": "Badge horizontal padding"
|
|
18
|
-
},
|
|
19
|
-
"padding-y": {
|
|
20
|
-
"value": "0.25rem",
|
|
21
|
-
"type": "dimension",
|
|
22
|
-
"description": "Badge vertical padding"
|
|
23
|
-
},
|
|
24
|
-
"font-size": {
|
|
25
|
-
"value": "{luma.text.sm}",
|
|
26
|
-
"type": "dimension",
|
|
27
|
-
"description": "Badge font size"
|
|
28
|
-
},
|
|
29
|
-
"font-weight": {
|
|
30
|
-
"value": "{luma.font.weight.medium}",
|
|
31
|
-
"type": "fontWeight",
|
|
32
|
-
"description": "Badge font weight"
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
}
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"luma": {
|
|
3
|
-
"button": {
|
|
4
|
-
"primary": {
|
|
5
|
-
"bg": {
|
|
6
|
-
"value": "{luma.color.primary.50}",
|
|
7
|
-
"type": "color",
|
|
8
|
-
"description": "Primary button background (dark theme)"
|
|
9
|
-
},
|
|
10
|
-
"bg-hover": {
|
|
11
|
-
"value": "{luma.color.primary.70}",
|
|
12
|
-
"type": "color",
|
|
13
|
-
"description": "Primary button hover background (dark theme)"
|
|
14
|
-
},
|
|
15
|
-
"bg-active": {
|
|
16
|
-
"value": "{luma.color.primary.80}",
|
|
17
|
-
"type": "color",
|
|
18
|
-
"description": "Primary button active background (dark theme)"
|
|
19
|
-
},
|
|
20
|
-
"text": {
|
|
21
|
-
"value": "oklch(0.1 0 0)",
|
|
22
|
-
"type": "color",
|
|
23
|
-
"description": "Primary button text color (dark theme) - dark text on light bg"
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"outline": {
|
|
27
|
-
"border": {
|
|
28
|
-
"value": "{luma.color.neutral.60}",
|
|
29
|
-
"type": "color",
|
|
30
|
-
"description": "Outline button border color (dark theme)"
|
|
31
|
-
},
|
|
32
|
-
"border-hover": {
|
|
33
|
-
"value": "{luma.color.neutral.90}",
|
|
34
|
-
"type": "color",
|
|
35
|
-
"description": "Outline button hover border color (dark theme)"
|
|
36
|
-
},
|
|
37
|
-
"bg-hover": {
|
|
38
|
-
"value": "{luma.color.neutral.50}",
|
|
39
|
-
"type": "color",
|
|
40
|
-
"description": "Outline button hover background (dark theme)"
|
|
41
|
-
},
|
|
42
|
-
"text": {
|
|
43
|
-
"value": "{luma.color.text.primary}",
|
|
44
|
-
"type": "color",
|
|
45
|
-
"description": "Outline button text color (dark theme)"
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"ghost": {
|
|
49
|
-
"bg": {
|
|
50
|
-
"value": "transparent",
|
|
51
|
-
"type": "color",
|
|
52
|
-
"description": "Ghost button background (dark theme)"
|
|
53
|
-
},
|
|
54
|
-
"bg-hover": {
|
|
55
|
-
"value": "{luma.color.neutral.50}",
|
|
56
|
-
"type": "color",
|
|
57
|
-
"description": "Ghost button hover background (dark theme)"
|
|
58
|
-
},
|
|
59
|
-
"text": {
|
|
60
|
-
"value": "{luma.color.text.primary}",
|
|
61
|
-
"type": "color",
|
|
62
|
-
"description": "Ghost button text color (dark theme)"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
"danger": {
|
|
66
|
-
"bg": {
|
|
67
|
-
"value": "{luma.color.error.50}",
|
|
68
|
-
"type": "color",
|
|
69
|
-
"description": "Danger button background (dark theme)"
|
|
70
|
-
},
|
|
71
|
-
"bg-hover": {
|
|
72
|
-
"value": "{luma.color.error.70}",
|
|
73
|
-
"type": "color",
|
|
74
|
-
"description": "Danger button hover background (dark theme)"
|
|
75
|
-
},
|
|
76
|
-
"bg-active": {
|
|
77
|
-
"value": "{luma.color.error.80}",
|
|
78
|
-
"type": "color",
|
|
79
|
-
"description": "Danger button active background (dark theme)"
|
|
80
|
-
},
|
|
81
|
-
"text": {
|
|
82
|
-
"value": "oklch(0.1 0 0)",
|
|
83
|
-
"type": "color",
|
|
84
|
-
"description": "Danger button text color (dark theme) - dark text on light bg"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
"focus": {
|
|
88
|
-
"ring-color": {
|
|
89
|
-
"value": "{luma.focus.ring.color}",
|
|
90
|
-
"type": "color",
|
|
91
|
-
"description": "Button focus ring color (dark theme) - references global focus token"
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
}
|
|
@@ -1,154 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"luma": {
|
|
3
|
-
"button": {
|
|
4
|
-
"primary": {
|
|
5
|
-
"bg": {
|
|
6
|
-
"value": "{luma.color.primary.50}",
|
|
7
|
-
"type": "color",
|
|
8
|
-
"description": "Primary button background"
|
|
9
|
-
},
|
|
10
|
-
"bg-hover": {
|
|
11
|
-
"value": "{luma.color.primary.70}",
|
|
12
|
-
"type": "color",
|
|
13
|
-
"description": "Primary button hover background"
|
|
14
|
-
},
|
|
15
|
-
"bg-active": {
|
|
16
|
-
"value": "{luma.color.primary.80}",
|
|
17
|
-
"type": "color",
|
|
18
|
-
"description": "Primary button active background"
|
|
19
|
-
},
|
|
20
|
-
"text": {
|
|
21
|
-
"value": "oklch(1 0 0)",
|
|
22
|
-
"type": "color",
|
|
23
|
-
"description": "Primary button text color"
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"outline": {
|
|
27
|
-
"border": {
|
|
28
|
-
"value": "{luma.color.neutral.60}",
|
|
29
|
-
"type": "color",
|
|
30
|
-
"description": "Outline button border color"
|
|
31
|
-
},
|
|
32
|
-
"border-hover": {
|
|
33
|
-
"value": "{luma.color.neutral.90}",
|
|
34
|
-
"type": "color",
|
|
35
|
-
"description": "Outline button hover border color"
|
|
36
|
-
},
|
|
37
|
-
"bg-hover": {
|
|
38
|
-
"value": "{luma.color.neutral.50}",
|
|
39
|
-
"type": "color",
|
|
40
|
-
"description": "Outline button hover background"
|
|
41
|
-
},
|
|
42
|
-
"text": {
|
|
43
|
-
"value": "{luma.color.text.primary}",
|
|
44
|
-
"type": "color",
|
|
45
|
-
"description": "Outline button text color"
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
"ghost": {
|
|
49
|
-
"bg": {
|
|
50
|
-
"value": "transparent",
|
|
51
|
-
"type": "color",
|
|
52
|
-
"description": "Ghost button background"
|
|
53
|
-
},
|
|
54
|
-
"bg-hover": {
|
|
55
|
-
"value": "{luma.color.neutral.50}",
|
|
56
|
-
"type": "color",
|
|
57
|
-
"description": "Ghost button hover background"
|
|
58
|
-
},
|
|
59
|
-
"text": {
|
|
60
|
-
"value": "{luma.color.text.primary}",
|
|
61
|
-
"type": "color",
|
|
62
|
-
"description": "Ghost button text color"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
"danger": {
|
|
66
|
-
"bg": {
|
|
67
|
-
"value": "{luma.color.error.50}",
|
|
68
|
-
"type": "color",
|
|
69
|
-
"description": "Danger button background"
|
|
70
|
-
},
|
|
71
|
-
"bg-hover": {
|
|
72
|
-
"value": "{luma.color.error.70}",
|
|
73
|
-
"type": "color",
|
|
74
|
-
"description": "Danger button hover background"
|
|
75
|
-
},
|
|
76
|
-
"bg-active": {
|
|
77
|
-
"value": "{luma.color.error.80}",
|
|
78
|
-
"type": "color",
|
|
79
|
-
"description": "Danger button active background"
|
|
80
|
-
},
|
|
81
|
-
"text": {
|
|
82
|
-
"value": "oklch(1 0 0)",
|
|
83
|
-
"type": "color",
|
|
84
|
-
"description": "Danger button text color"
|
|
85
|
-
}
|
|
86
|
-
},
|
|
87
|
-
"padding": {
|
|
88
|
-
"x": {
|
|
89
|
-
"sm": {
|
|
90
|
-
"value": "1rem",
|
|
91
|
-
"type": "dimension",
|
|
92
|
-
"description": "Small button horizontal padding"
|
|
93
|
-
},
|
|
94
|
-
"md": {
|
|
95
|
-
"value": "1.5rem",
|
|
96
|
-
"type": "dimension",
|
|
97
|
-
"description": "Medium button horizontal padding"
|
|
98
|
-
},
|
|
99
|
-
"lg": {
|
|
100
|
-
"value": "2rem",
|
|
101
|
-
"type": "dimension",
|
|
102
|
-
"description": "Large button horizontal padding"
|
|
103
|
-
}
|
|
104
|
-
},
|
|
105
|
-
"y": {
|
|
106
|
-
"sm": {
|
|
107
|
-
"value": "0.5rem",
|
|
108
|
-
"type": "dimension",
|
|
109
|
-
"description": "Small button vertical padding"
|
|
110
|
-
},
|
|
111
|
-
"md": {
|
|
112
|
-
"value": "0.75rem",
|
|
113
|
-
"type": "dimension",
|
|
114
|
-
"description": "Medium button vertical padding"
|
|
115
|
-
},
|
|
116
|
-
"lg": {
|
|
117
|
-
"value": "1rem",
|
|
118
|
-
"type": "dimension",
|
|
119
|
-
"description": "Large button vertical padding"
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
},
|
|
123
|
-
"radius": {
|
|
124
|
-
"value": "{luma.radius.md}",
|
|
125
|
-
"type": "dimension",
|
|
126
|
-
"description": "Button border radius"
|
|
127
|
-
},
|
|
128
|
-
"transition": {
|
|
129
|
-
"duration": {
|
|
130
|
-
"value": "{luma.duration.base}",
|
|
131
|
-
"type": "duration",
|
|
132
|
-
"description": "Button transition duration"
|
|
133
|
-
},
|
|
134
|
-
"timing": {
|
|
135
|
-
"value": "ease-out",
|
|
136
|
-
"type": "string",
|
|
137
|
-
"description": "Button transition timing function"
|
|
138
|
-
}
|
|
139
|
-
},
|
|
140
|
-
"focus": {
|
|
141
|
-
"ring-width": {
|
|
142
|
-
"value": "{luma.focus.ring.width}",
|
|
143
|
-
"type": "dimension",
|
|
144
|
-
"description": "Button focus ring width - references global focus token"
|
|
145
|
-
},
|
|
146
|
-
"ring-color": {
|
|
147
|
-
"value": "{luma.focus.ring.color}",
|
|
148
|
-
"type": "color",
|
|
149
|
-
"description": "Button focus ring color - references global focus token"
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"luma": {
|
|
3
|
-
"card": {
|
|
4
|
-
"shadow": {
|
|
5
|
-
"background": {
|
|
6
|
-
"value": "oklch(0.18 0.005 265)",
|
|
7
|
-
"type": "color",
|
|
8
|
-
"description": "Shadow card background (dark theme)"
|
|
9
|
-
},
|
|
10
|
-
"border": {
|
|
11
|
-
"value": "{luma.color.neutral.60}",
|
|
12
|
-
"type": "color",
|
|
13
|
-
"description": "Shadow card border (dark theme)"
|
|
14
|
-
},
|
|
15
|
-
"shadow": {
|
|
16
|
-
"value": "0 8px 24px oklch(0 0 0 / 0.25)",
|
|
17
|
-
"type": "shadow",
|
|
18
|
-
"description": "Shadow card elevation (dark theme) - stronger for dark bg"
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
"nested": {
|
|
22
|
-
"background": {
|
|
23
|
-
"value": "{luma.color.neutral.50}",
|
|
24
|
-
"type": "color",
|
|
25
|
-
"description": "Nested card background (dark theme)"
|
|
26
|
-
},
|
|
27
|
-
"border": {
|
|
28
|
-
"value": "{luma.color.neutral.60}",
|
|
29
|
-
"type": "color",
|
|
30
|
-
"description": "Nested card border (dark theme)"
|
|
31
|
-
}
|
|
32
|
-
},
|
|
33
|
-
"preview": {
|
|
34
|
-
"background": {
|
|
35
|
-
"value": "{luma.color.neutral.50}",
|
|
36
|
-
"type": "color",
|
|
37
|
-
"description": "Preview container background (dark theme)"
|
|
38
|
-
},
|
|
39
|
-
"border": {
|
|
40
|
-
"value": "{luma.color.neutral.60}",
|
|
41
|
-
"type": "color",
|
|
42
|
-
"description": "Preview container border (dark theme)"
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
"gradient": {
|
|
46
|
-
"from": {
|
|
47
|
-
"value": "oklch(0.25 0.01 265 / 0.6)",
|
|
48
|
-
"type": "color",
|
|
49
|
-
"description": "Card gradient start color (dark theme legacy)"
|
|
50
|
-
},
|
|
51
|
-
"to": {
|
|
52
|
-
"value": "oklch(0.2 0.008 265 / 0.6)",
|
|
53
|
-
"type": "color",
|
|
54
|
-
"description": "Card gradient end color (dark theme legacy)"
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
"background": {
|
|
58
|
-
"value": "oklch(0.17 0.005 265)",
|
|
59
|
-
"type": "color",
|
|
60
|
-
"description": "Legacy card background (dark theme)"
|
|
61
|
-
},
|
|
62
|
-
"box-shadow": {
|
|
63
|
-
"value": "0px 2px 0 0px oklch(0 0 0 / 0.3)",
|
|
64
|
-
"type": "shadow",
|
|
65
|
-
"description": "Legacy card shadow (dark theme)"
|
|
66
|
-
}
|
|
67
|
-
},
|
|
68
|
-
"code": {
|
|
69
|
-
"background": {
|
|
70
|
-
"value": "oklch(0.08 0.005 265)",
|
|
71
|
-
"type": "color",
|
|
72
|
-
"description": "Code block background (dark theme) - even darker"
|
|
73
|
-
},
|
|
74
|
-
"border": {
|
|
75
|
-
"value": "oklch(0.20 0.008 265)",
|
|
76
|
-
"type": "color",
|
|
77
|
-
"description": "Code block border (dark theme)"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
}
|
|
81
|
-
}
|
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"luma": {
|
|
3
|
-
"card": {
|
|
4
|
-
"shadow": {
|
|
5
|
-
"background": {
|
|
6
|
-
"value": "oklch(1 0 0)",
|
|
7
|
-
"type": "color",
|
|
8
|
-
"description": "Shadow card background - white surface"
|
|
9
|
-
},
|
|
10
|
-
"border": {
|
|
11
|
-
"value": "{luma.color.neutral.60}",
|
|
12
|
-
"type": "color",
|
|
13
|
-
"description": "Shadow card border - subtle separator"
|
|
14
|
-
},
|
|
15
|
-
"shadow": {
|
|
16
|
-
"value": "0 8px 24px oklch(0.22 0.01 265 / 0.06)",
|
|
17
|
-
"type": "shadow",
|
|
18
|
-
"description": "Shadow card elevation - soft shadow with neutral-100 at 6% alpha"
|
|
19
|
-
},
|
|
20
|
-
"radius": {
|
|
21
|
-
"value": "16px",
|
|
22
|
-
"type": "dimension",
|
|
23
|
-
"description": "Shadow card border radius - generous for Neo-Minimal feel"
|
|
24
|
-
}
|
|
25
|
-
},
|
|
26
|
-
"nested": {
|
|
27
|
-
"background": {
|
|
28
|
-
"value": "{luma.color.neutral.50}",
|
|
29
|
-
"type": "color",
|
|
30
|
-
"description": "Nested card background - subtle surface differentiation"
|
|
31
|
-
},
|
|
32
|
-
"border": {
|
|
33
|
-
"value": "{luma.color.neutral.50}",
|
|
34
|
-
"type": "color",
|
|
35
|
-
"description": "Nested card border"
|
|
36
|
-
},
|
|
37
|
-
"radius": {
|
|
38
|
-
"value": "12px",
|
|
39
|
-
"type": "dimension",
|
|
40
|
-
"description": "Nested card border radius - slightly smaller than product"
|
|
41
|
-
}
|
|
42
|
-
},
|
|
43
|
-
"preview": {
|
|
44
|
-
"background": {
|
|
45
|
-
"value": "{luma.color.neutral.50}",
|
|
46
|
-
"type": "color",
|
|
47
|
-
"description": "Preview container background - for documentation examples"
|
|
48
|
-
},
|
|
49
|
-
"border": {
|
|
50
|
-
"value": "{luma.color.neutral.60}",
|
|
51
|
-
"type": "color",
|
|
52
|
-
"description": "Preview container border"
|
|
53
|
-
},
|
|
54
|
-
"radius": {
|
|
55
|
-
"value": "12px",
|
|
56
|
-
"type": "dimension",
|
|
57
|
-
"description": "Preview container border radius"
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
"gradient": {
|
|
61
|
-
"from": {
|
|
62
|
-
"value": "oklch(0.92 0.005 0 / 0.6)",
|
|
63
|
-
"type": "color",
|
|
64
|
-
"description": "Card gradient start color (legacy)"
|
|
65
|
-
},
|
|
66
|
-
"to": {
|
|
67
|
-
"value": "oklch(0.96 0.003 0 / 0.6)",
|
|
68
|
-
"type": "color",
|
|
69
|
-
"description": "Card gradient end color (legacy)"
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
"background": {
|
|
73
|
-
"value": "oklch(1 0 0)",
|
|
74
|
-
"type": "color",
|
|
75
|
-
"description": "Legacy card background - use product variant instead"
|
|
76
|
-
},
|
|
77
|
-
"padding": {
|
|
78
|
-
"value": "1.5rem",
|
|
79
|
-
"type": "dimension",
|
|
80
|
-
"description": "Default card padding"
|
|
81
|
-
},
|
|
82
|
-
"box-shadow": {
|
|
83
|
-
"value": "0px 2px 0 0px #e4e4e4",
|
|
84
|
-
"type": "shadow",
|
|
85
|
-
"description": "Legacy card shadow - use product.shadow instead"
|
|
86
|
-
}
|
|
87
|
-
},
|
|
88
|
-
"code": {
|
|
89
|
-
"background": {
|
|
90
|
-
"value": "oklch(0.12 0.005 265)",
|
|
91
|
-
"type": "color",
|
|
92
|
-
"description": "Code block background - dark editor style"
|
|
93
|
-
},
|
|
94
|
-
"text": {
|
|
95
|
-
"value": "oklch(0.9 0 0)",
|
|
96
|
-
"type": "color",
|
|
97
|
-
"description": "Code block text color"
|
|
98
|
-
},
|
|
99
|
-
"border": {
|
|
100
|
-
"value": "oklch(0.25 0.008 265)",
|
|
101
|
-
"type": "color",
|
|
102
|
-
"description": "Code block border"
|
|
103
|
-
},
|
|
104
|
-
"radius": {
|
|
105
|
-
"value": "8px",
|
|
106
|
-
"type": "dimension",
|
|
107
|
-
"description": "Code block border radius"
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
|
-
}
|