@qdesignsystems/theme-myra 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/dist/index.d.mts +202 -0
- package/dist/index.d.ts +202 -0
- package/dist/index.js +1101 -0
- package/dist/index.mjs +1073 -0
- package/dist/styles.css +363 -0
- package/package.json +38 -0
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme configuration types matching Figma structure
|
|
3
|
+
*/
|
|
4
|
+
type Mode = 'light' | 'dark';
|
|
5
|
+
interface OpacityScale {
|
|
6
|
+
10: string;
|
|
7
|
+
20: string;
|
|
8
|
+
30: string;
|
|
9
|
+
40: string;
|
|
10
|
+
50: string;
|
|
11
|
+
60: string;
|
|
12
|
+
}
|
|
13
|
+
interface ThemeColors {
|
|
14
|
+
background: string;
|
|
15
|
+
'background-dark': string;
|
|
16
|
+
foreground: string;
|
|
17
|
+
'foreground-dark': string;
|
|
18
|
+
card: string;
|
|
19
|
+
'card-dark': string;
|
|
20
|
+
'card-foreground': string;
|
|
21
|
+
'card-foreground-dark': string;
|
|
22
|
+
popover: string;
|
|
23
|
+
'popover-dark': string;
|
|
24
|
+
'popover-foreground': string;
|
|
25
|
+
'popover-foreground-dark': string;
|
|
26
|
+
primary: string;
|
|
27
|
+
'primary-dark': string;
|
|
28
|
+
'primary-foreground': string;
|
|
29
|
+
'primary-foreground-dark': string;
|
|
30
|
+
secondary: string;
|
|
31
|
+
'secondary-dark': string;
|
|
32
|
+
'secondary-foreground': string;
|
|
33
|
+
'secondary-foreground-dark': string;
|
|
34
|
+
muted: string;
|
|
35
|
+
'muted-dark': string;
|
|
36
|
+
'muted-foreground': string;
|
|
37
|
+
'muted-foreground-dark': string;
|
|
38
|
+
accent: string;
|
|
39
|
+
'accent-dark': string;
|
|
40
|
+
'accent-foreground': string;
|
|
41
|
+
'accent-foreground-dark': string;
|
|
42
|
+
destructive: string;
|
|
43
|
+
'destructive-dark': string;
|
|
44
|
+
info: string;
|
|
45
|
+
'info-dark': string;
|
|
46
|
+
success: string;
|
|
47
|
+
'success-dark': string;
|
|
48
|
+
warning: string;
|
|
49
|
+
'warning-dark': string;
|
|
50
|
+
border: string;
|
|
51
|
+
'border-dark': string;
|
|
52
|
+
input: string;
|
|
53
|
+
'input-dark': string;
|
|
54
|
+
ring: string;
|
|
55
|
+
'ring-dark': string;
|
|
56
|
+
'chart-1': string;
|
|
57
|
+
'chart-1-dark': string;
|
|
58
|
+
'chart-2': string;
|
|
59
|
+
'chart-2-dark': string;
|
|
60
|
+
'chart-3': string;
|
|
61
|
+
'chart-3-dark': string;
|
|
62
|
+
'chart-4': string;
|
|
63
|
+
'chart-4-dark': string;
|
|
64
|
+
'chart-5': string;
|
|
65
|
+
'chart-5-dark': string;
|
|
66
|
+
sidebar?: string;
|
|
67
|
+
'sidebar-dark'?: string;
|
|
68
|
+
'sidebar-background'?: string;
|
|
69
|
+
'sidebar-background-dark'?: string;
|
|
70
|
+
'sidebar-foreground': string;
|
|
71
|
+
'sidebar-foreground-dark': string;
|
|
72
|
+
'sidebar-primary-foreground': string;
|
|
73
|
+
'sidebar-primary-foreground-dark': string;
|
|
74
|
+
'sidebar-accent': string;
|
|
75
|
+
'sidebar-accent-dark': string;
|
|
76
|
+
'sidebar-accent-foreground': string;
|
|
77
|
+
'sidebar-accent-foreground-dark': string;
|
|
78
|
+
'sidebar-border': string;
|
|
79
|
+
'sidebar-border-dark': string;
|
|
80
|
+
'sidebar-ring': string;
|
|
81
|
+
'sidebar-ring-dark': string;
|
|
82
|
+
brand: string;
|
|
83
|
+
'brand-dark': string;
|
|
84
|
+
/** Optional: sidebar primary color (Figma export may include --theme-sidebar-primary) */
|
|
85
|
+
'sidebar-primary'?: string;
|
|
86
|
+
'sidebar-primary-dark'?: string;
|
|
87
|
+
}
|
|
88
|
+
interface OpacityTokens {
|
|
89
|
+
primary: OpacityScale;
|
|
90
|
+
secondary: OpacityScale;
|
|
91
|
+
accent: OpacityScale;
|
|
92
|
+
success: OpacityScale;
|
|
93
|
+
info: OpacityScale;
|
|
94
|
+
warning: OpacityScale;
|
|
95
|
+
destructive: OpacityScale;
|
|
96
|
+
neutral: OpacityScale;
|
|
97
|
+
'primary-dark': OpacityScale;
|
|
98
|
+
}
|
|
99
|
+
interface TypographyTokens {
|
|
100
|
+
h1: {
|
|
101
|
+
fontSize: string;
|
|
102
|
+
lineHeight: string;
|
|
103
|
+
fontWeight: string;
|
|
104
|
+
};
|
|
105
|
+
h2: {
|
|
106
|
+
fontSize: string;
|
|
107
|
+
lineHeight: string;
|
|
108
|
+
fontWeight: string;
|
|
109
|
+
};
|
|
110
|
+
h3: {
|
|
111
|
+
fontSize: string;
|
|
112
|
+
lineHeight: string;
|
|
113
|
+
fontWeight: string;
|
|
114
|
+
};
|
|
115
|
+
h4: {
|
|
116
|
+
fontSize: string;
|
|
117
|
+
lineHeight: string;
|
|
118
|
+
fontWeight: string;
|
|
119
|
+
};
|
|
120
|
+
paragraph: {
|
|
121
|
+
fontSize: string;
|
|
122
|
+
lineHeight: string;
|
|
123
|
+
fontWeight: string;
|
|
124
|
+
};
|
|
125
|
+
blockquote: {
|
|
126
|
+
fontSize: string;
|
|
127
|
+
lineHeight: string;
|
|
128
|
+
fontWeight: string;
|
|
129
|
+
};
|
|
130
|
+
list: {
|
|
131
|
+
fontSize: string;
|
|
132
|
+
lineHeight: string;
|
|
133
|
+
fontWeight: string;
|
|
134
|
+
};
|
|
135
|
+
'inline-code': {
|
|
136
|
+
fontSize: string;
|
|
137
|
+
lineHeight: string;
|
|
138
|
+
fontWeight: string;
|
|
139
|
+
};
|
|
140
|
+
lead: {
|
|
141
|
+
fontSize: string;
|
|
142
|
+
lineHeight: string;
|
|
143
|
+
fontWeight: string;
|
|
144
|
+
};
|
|
145
|
+
large: {
|
|
146
|
+
fontSize: string;
|
|
147
|
+
lineHeight: string;
|
|
148
|
+
fontWeight: string;
|
|
149
|
+
};
|
|
150
|
+
small: {
|
|
151
|
+
fontSize: string;
|
|
152
|
+
lineHeight: string;
|
|
153
|
+
fontWeight: string;
|
|
154
|
+
};
|
|
155
|
+
muted: {
|
|
156
|
+
fontSize: string;
|
|
157
|
+
lineHeight: string;
|
|
158
|
+
fontWeight: string;
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
interface BorderRadiusTokens {
|
|
162
|
+
none: string;
|
|
163
|
+
xs: string;
|
|
164
|
+
sm: string;
|
|
165
|
+
md: string;
|
|
166
|
+
lg: string;
|
|
167
|
+
xl: string;
|
|
168
|
+
rounded: string;
|
|
169
|
+
}
|
|
170
|
+
interface CustomTokens {
|
|
171
|
+
transparent: string;
|
|
172
|
+
'backdrop-overlay': string;
|
|
173
|
+
shadow: string;
|
|
174
|
+
'background-input-30': string;
|
|
175
|
+
'input-dark': string;
|
|
176
|
+
'alpha-50': string;
|
|
177
|
+
glass: string;
|
|
178
|
+
}
|
|
179
|
+
interface ThemeConfig {
|
|
180
|
+
name: string;
|
|
181
|
+
mode: Mode;
|
|
182
|
+
colors: ThemeColors;
|
|
183
|
+
opacity: OpacityTokens;
|
|
184
|
+
fontFamily: {
|
|
185
|
+
'font-sans': string;
|
|
186
|
+
'font-serif': string;
|
|
187
|
+
'font-mono': string;
|
|
188
|
+
};
|
|
189
|
+
borderRadius: BorderRadiusTokens;
|
|
190
|
+
custom: CustomTokens;
|
|
191
|
+
typography: TypographyTokens;
|
|
192
|
+
/** Optional: shadow CSS variables for :root (keys without --) */
|
|
193
|
+
shadowVars?: Record<string, string>;
|
|
194
|
+
/** Optional: shadow CSS variables for .dark (keys without --) */
|
|
195
|
+
shadowVarsDark?: Record<string, string>;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
declare const myraTheme: ThemeConfig;
|
|
199
|
+
|
|
200
|
+
declare const themeCSS: string;
|
|
201
|
+
|
|
202
|
+
export { type ThemeConfig, myraTheme, themeCSS };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Theme configuration types matching Figma structure
|
|
3
|
+
*/
|
|
4
|
+
type Mode = 'light' | 'dark';
|
|
5
|
+
interface OpacityScale {
|
|
6
|
+
10: string;
|
|
7
|
+
20: string;
|
|
8
|
+
30: string;
|
|
9
|
+
40: string;
|
|
10
|
+
50: string;
|
|
11
|
+
60: string;
|
|
12
|
+
}
|
|
13
|
+
interface ThemeColors {
|
|
14
|
+
background: string;
|
|
15
|
+
'background-dark': string;
|
|
16
|
+
foreground: string;
|
|
17
|
+
'foreground-dark': string;
|
|
18
|
+
card: string;
|
|
19
|
+
'card-dark': string;
|
|
20
|
+
'card-foreground': string;
|
|
21
|
+
'card-foreground-dark': string;
|
|
22
|
+
popover: string;
|
|
23
|
+
'popover-dark': string;
|
|
24
|
+
'popover-foreground': string;
|
|
25
|
+
'popover-foreground-dark': string;
|
|
26
|
+
primary: string;
|
|
27
|
+
'primary-dark': string;
|
|
28
|
+
'primary-foreground': string;
|
|
29
|
+
'primary-foreground-dark': string;
|
|
30
|
+
secondary: string;
|
|
31
|
+
'secondary-dark': string;
|
|
32
|
+
'secondary-foreground': string;
|
|
33
|
+
'secondary-foreground-dark': string;
|
|
34
|
+
muted: string;
|
|
35
|
+
'muted-dark': string;
|
|
36
|
+
'muted-foreground': string;
|
|
37
|
+
'muted-foreground-dark': string;
|
|
38
|
+
accent: string;
|
|
39
|
+
'accent-dark': string;
|
|
40
|
+
'accent-foreground': string;
|
|
41
|
+
'accent-foreground-dark': string;
|
|
42
|
+
destructive: string;
|
|
43
|
+
'destructive-dark': string;
|
|
44
|
+
info: string;
|
|
45
|
+
'info-dark': string;
|
|
46
|
+
success: string;
|
|
47
|
+
'success-dark': string;
|
|
48
|
+
warning: string;
|
|
49
|
+
'warning-dark': string;
|
|
50
|
+
border: string;
|
|
51
|
+
'border-dark': string;
|
|
52
|
+
input: string;
|
|
53
|
+
'input-dark': string;
|
|
54
|
+
ring: string;
|
|
55
|
+
'ring-dark': string;
|
|
56
|
+
'chart-1': string;
|
|
57
|
+
'chart-1-dark': string;
|
|
58
|
+
'chart-2': string;
|
|
59
|
+
'chart-2-dark': string;
|
|
60
|
+
'chart-3': string;
|
|
61
|
+
'chart-3-dark': string;
|
|
62
|
+
'chart-4': string;
|
|
63
|
+
'chart-4-dark': string;
|
|
64
|
+
'chart-5': string;
|
|
65
|
+
'chart-5-dark': string;
|
|
66
|
+
sidebar?: string;
|
|
67
|
+
'sidebar-dark'?: string;
|
|
68
|
+
'sidebar-background'?: string;
|
|
69
|
+
'sidebar-background-dark'?: string;
|
|
70
|
+
'sidebar-foreground': string;
|
|
71
|
+
'sidebar-foreground-dark': string;
|
|
72
|
+
'sidebar-primary-foreground': string;
|
|
73
|
+
'sidebar-primary-foreground-dark': string;
|
|
74
|
+
'sidebar-accent': string;
|
|
75
|
+
'sidebar-accent-dark': string;
|
|
76
|
+
'sidebar-accent-foreground': string;
|
|
77
|
+
'sidebar-accent-foreground-dark': string;
|
|
78
|
+
'sidebar-border': string;
|
|
79
|
+
'sidebar-border-dark': string;
|
|
80
|
+
'sidebar-ring': string;
|
|
81
|
+
'sidebar-ring-dark': string;
|
|
82
|
+
brand: string;
|
|
83
|
+
'brand-dark': string;
|
|
84
|
+
/** Optional: sidebar primary color (Figma export may include --theme-sidebar-primary) */
|
|
85
|
+
'sidebar-primary'?: string;
|
|
86
|
+
'sidebar-primary-dark'?: string;
|
|
87
|
+
}
|
|
88
|
+
interface OpacityTokens {
|
|
89
|
+
primary: OpacityScale;
|
|
90
|
+
secondary: OpacityScale;
|
|
91
|
+
accent: OpacityScale;
|
|
92
|
+
success: OpacityScale;
|
|
93
|
+
info: OpacityScale;
|
|
94
|
+
warning: OpacityScale;
|
|
95
|
+
destructive: OpacityScale;
|
|
96
|
+
neutral: OpacityScale;
|
|
97
|
+
'primary-dark': OpacityScale;
|
|
98
|
+
}
|
|
99
|
+
interface TypographyTokens {
|
|
100
|
+
h1: {
|
|
101
|
+
fontSize: string;
|
|
102
|
+
lineHeight: string;
|
|
103
|
+
fontWeight: string;
|
|
104
|
+
};
|
|
105
|
+
h2: {
|
|
106
|
+
fontSize: string;
|
|
107
|
+
lineHeight: string;
|
|
108
|
+
fontWeight: string;
|
|
109
|
+
};
|
|
110
|
+
h3: {
|
|
111
|
+
fontSize: string;
|
|
112
|
+
lineHeight: string;
|
|
113
|
+
fontWeight: string;
|
|
114
|
+
};
|
|
115
|
+
h4: {
|
|
116
|
+
fontSize: string;
|
|
117
|
+
lineHeight: string;
|
|
118
|
+
fontWeight: string;
|
|
119
|
+
};
|
|
120
|
+
paragraph: {
|
|
121
|
+
fontSize: string;
|
|
122
|
+
lineHeight: string;
|
|
123
|
+
fontWeight: string;
|
|
124
|
+
};
|
|
125
|
+
blockquote: {
|
|
126
|
+
fontSize: string;
|
|
127
|
+
lineHeight: string;
|
|
128
|
+
fontWeight: string;
|
|
129
|
+
};
|
|
130
|
+
list: {
|
|
131
|
+
fontSize: string;
|
|
132
|
+
lineHeight: string;
|
|
133
|
+
fontWeight: string;
|
|
134
|
+
};
|
|
135
|
+
'inline-code': {
|
|
136
|
+
fontSize: string;
|
|
137
|
+
lineHeight: string;
|
|
138
|
+
fontWeight: string;
|
|
139
|
+
};
|
|
140
|
+
lead: {
|
|
141
|
+
fontSize: string;
|
|
142
|
+
lineHeight: string;
|
|
143
|
+
fontWeight: string;
|
|
144
|
+
};
|
|
145
|
+
large: {
|
|
146
|
+
fontSize: string;
|
|
147
|
+
lineHeight: string;
|
|
148
|
+
fontWeight: string;
|
|
149
|
+
};
|
|
150
|
+
small: {
|
|
151
|
+
fontSize: string;
|
|
152
|
+
lineHeight: string;
|
|
153
|
+
fontWeight: string;
|
|
154
|
+
};
|
|
155
|
+
muted: {
|
|
156
|
+
fontSize: string;
|
|
157
|
+
lineHeight: string;
|
|
158
|
+
fontWeight: string;
|
|
159
|
+
};
|
|
160
|
+
}
|
|
161
|
+
interface BorderRadiusTokens {
|
|
162
|
+
none: string;
|
|
163
|
+
xs: string;
|
|
164
|
+
sm: string;
|
|
165
|
+
md: string;
|
|
166
|
+
lg: string;
|
|
167
|
+
xl: string;
|
|
168
|
+
rounded: string;
|
|
169
|
+
}
|
|
170
|
+
interface CustomTokens {
|
|
171
|
+
transparent: string;
|
|
172
|
+
'backdrop-overlay': string;
|
|
173
|
+
shadow: string;
|
|
174
|
+
'background-input-30': string;
|
|
175
|
+
'input-dark': string;
|
|
176
|
+
'alpha-50': string;
|
|
177
|
+
glass: string;
|
|
178
|
+
}
|
|
179
|
+
interface ThemeConfig {
|
|
180
|
+
name: string;
|
|
181
|
+
mode: Mode;
|
|
182
|
+
colors: ThemeColors;
|
|
183
|
+
opacity: OpacityTokens;
|
|
184
|
+
fontFamily: {
|
|
185
|
+
'font-sans': string;
|
|
186
|
+
'font-serif': string;
|
|
187
|
+
'font-mono': string;
|
|
188
|
+
};
|
|
189
|
+
borderRadius: BorderRadiusTokens;
|
|
190
|
+
custom: CustomTokens;
|
|
191
|
+
typography: TypographyTokens;
|
|
192
|
+
/** Optional: shadow CSS variables for :root (keys without --) */
|
|
193
|
+
shadowVars?: Record<string, string>;
|
|
194
|
+
/** Optional: shadow CSS variables for .dark (keys without --) */
|
|
195
|
+
shadowVarsDark?: Record<string, string>;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
declare const myraTheme: ThemeConfig;
|
|
199
|
+
|
|
200
|
+
declare const themeCSS: string;
|
|
201
|
+
|
|
202
|
+
export { type ThemeConfig, myraTheme, themeCSS };
|