@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.
Files changed (6) hide show
  1. package/dist/index.d.mts +202 -0
  2. package/dist/index.d.ts +202 -0
  3. package/dist/index.js +1101 -0
  4. package/dist/index.mjs +1073 -0
  5. package/dist/styles.css +363 -0
  6. package/package.json +38 -0
package/dist/styles.css ADDED
@@ -0,0 +1,363 @@
1
+ :root {
2
+ --background: 40 18% 96%;
3
+ --foreground: 0 0% 0%;
4
+ --card: 0 0% 100%;
5
+ --card-foreground: 0 0% 4%;
6
+ --popover: 0 0% 98%;
7
+ --popover-foreground: 0 0% 0%;
8
+ --primary: 210 100% 47%;
9
+ --primary-foreground: 0 0% 98%;
10
+ --secondary: 40 18% 96%;
11
+ --secondary-foreground: 0 0% 9%;
12
+ --muted: 0 0% 92%;
13
+ --muted-foreground: 0 0% 51%;
14
+ --accent: 0 0% 93%;
15
+ --accent-foreground: 210 100% 47%;
16
+ --destructive: 358 100% 45%;
17
+ --info: 199 89% 48%;
18
+ --success: 142 76% 36%;
19
+ --warning: 38 92% 50%;
20
+ --border: 0 0% 88%;
21
+ --input: 0 0% 86%;
22
+ --ring: 38 100% 54%;
23
+ --chart-1: 210 100% 47%;
24
+ --chart-2: 96 98% 44%;
25
+ --chart-3: 196 99% 65%;
26
+ --chart-4: 298 100% 63%;
27
+ --chart-5: 38 100% 59%;
28
+ --sidebar: 0 0% 98%;
29
+ --sidebar-foreground: 0 0% 4%;
30
+ --sidebar-primary: 0 0% 9%;
31
+ --sidebar-primary-foreground: 0 0% 98%;
32
+ --sidebar-accent: 0 0% 96%;
33
+ --sidebar-accent-foreground: 210 100% 47%;
34
+ --sidebar-border: 0 0% 90%;
35
+ --sidebar-ring: 38 100% 54%;
36
+ --brand: 29 73% 56%;
37
+ --primary-opacity-10: #007FEF19;
38
+ --primary-opacity-20: #007FEF33;
39
+ --primary-opacity-30: #007FEF4C;
40
+ --primary-opacity-40: #007FEF66;
41
+ --primary-opacity-50: #007FEF7F;
42
+ --primary-opacity-60: #007FEF99;
43
+ --secondary-opacity-10: #F4F4F519;
44
+ --secondary-opacity-20: #F4F4F533;
45
+ --secondary-opacity-30: #F4F4F54C;
46
+ --secondary-opacity-40: #F4F4F566;
47
+ --secondary-opacity-50: #F4F4F57F;
48
+ --secondary-opacity-60: #F4F4F599;
49
+ --accent-opacity-10: #F4F4F519;
50
+ --accent-opacity-20: #F4F4F533;
51
+ --accent-opacity-30: #F4F4F54C;
52
+ --accent-opacity-40: #F4F4F566;
53
+ --accent-opacity-50: #F4F4F57F;
54
+ --accent-opacity-60: #F4F4F599;
55
+ --success-opacity-10: #16A34A19;
56
+ --success-opacity-20: #16A34A33;
57
+ --success-opacity-30: #16A34A4C;
58
+ --success-opacity-40: #16A34A66;
59
+ --success-opacity-50: #16A34A7F;
60
+ --success-opacity-60: #16A34A99;
61
+ --info-opacity-10: #0284C719;
62
+ --info-opacity-20: #0284C733;
63
+ --info-opacity-30: #0284C74C;
64
+ --info-opacity-40: #0284C766;
65
+ --info-opacity-50: #0284C77F;
66
+ --info-opacity-60: #0284C799;
67
+ --warning-opacity-10: #E3921919;
68
+ --warning-opacity-20: #D9770633;
69
+ --warning-opacity-30: #D977064C;
70
+ --warning-opacity-40: #D9770666;
71
+ --warning-opacity-50: #D977067F;
72
+ --warning-opacity-60: #D9770699;
73
+ --destructive-opacity-10: #E0343419;
74
+ --destructive-opacity-20: #E0343433;
75
+ --destructive-opacity-30: #E034344C;
76
+ --destructive-opacity-40: #E0343466;
77
+ --destructive-opacity-50: #E034347F;
78
+ --destructive-opacity-60: #DC262699;
79
+ --neutral-opacity-10: #47485719;
80
+ --neutral-opacity-20: #47485733;
81
+ --neutral-opacity-30: #4748574C;
82
+ --neutral-opacity-40: #47485766;
83
+ --neutral-opacity-50: #4748577F;
84
+ --neutral-opacity-60: #47485799;
85
+ --primary-dark-opacity-10: #1EB8CE19;
86
+ --primary-dark-opacity-20: #1EB8CE33;
87
+ --primary-dark-opacity-30: #1EB8CE4C;
88
+ --primary-dark-opacity-40: #1EB8CE66;
89
+ --primary-dark-opacity-50: #1EB8CE7F;
90
+ --primary-dark-opacity-60: #1EB8CE99;
91
+ --radius-none: 0;
92
+ --radius-xs: 8px;
93
+ --radius-sm: 12px;
94
+ --radius-md: 16px;
95
+ --radius-lg: 24px;
96
+ --radius-xl: 33px;
97
+ --radius-rounded: 9999px;
98
+ --font-sans: Switzer Variable;
99
+ --font-serif: Switzer Variable;
100
+ --font-mono: Roboto Mono;
101
+ --transparent: #FFFFFF00;
102
+ --backdrop-overlay: #3C3A4099;
103
+ --shadow: #00000019;
104
+ --background-input-30: rgba(246, 245, 243, 0.3);
105
+ --input-dark: #FFFFFF00;
106
+ --alpha-50: #FFFFFF7F;
107
+ --glass: #FFFFFF3D;
108
+ --radius: 24px;
109
+ --shadow-2xs-offset-x: 0;
110
+ --shadow-2xs-offset-y: 1;
111
+ --shadow-2xs-blur-radius: 8;
112
+ --shadow-2xs-spread-radius: 0;
113
+ --shadow-2xs-color: #00000002;
114
+ --shadow-xs-offset-x: 0;
115
+ --shadow-xs-offset-y: 1;
116
+ --shadow-xs-blur-radius: 14;
117
+ --shadow-xs-spread-radius: 0;
118
+ --shadow-xs-color: #00000002;
119
+ --shadow-sm-1-offset-x: 0;
120
+ --shadow-sm-1-offset-y: 1;
121
+ --shadow-sm-1-blur-radius: 3;
122
+ --shadow-sm-1-spread-radius: 0;
123
+ --shadow-sm-1-color: #00000002;
124
+ --shadow-sm-2-offset-x: 0;
125
+ --shadow-sm-2-offset-y: 1;
126
+ --shadow-sm-2-blur-radius: 2;
127
+ --shadow-sm-2-spread-radius: -1;
128
+ --shadow-sm-2-color: #00000002;
129
+ --shadow-md-1-offset-x: 0;
130
+ --shadow-md-1-offset-y: 1;
131
+ --shadow-md-1-blur-radius: 3;
132
+ --shadow-md-1-spread-radius: 0;
133
+ --shadow-md-1-color: #00000002;
134
+ --shadow-md-2-offset-x: 0;
135
+ --shadow-md-2-offset-y: 2;
136
+ --shadow-md-2-blur-radius: 4;
137
+ --shadow-md-2-spread-radius: -1;
138
+ --shadow-md-2-color: #00000002;
139
+ --shadow-lg-1-offset-x: 0;
140
+ --shadow-lg-1-offset-y: 1;
141
+ --shadow-lg-1-blur-radius: 3;
142
+ --shadow-lg-1-spread-radius: 0;
143
+ --shadow-lg-1-color: #00000002;
144
+ --shadow-lg-2-offset-x: 0;
145
+ --shadow-lg-2-offset-y: 4;
146
+ --shadow-lg-2-blur-radius: 6;
147
+ --shadow-lg-2-spread-radius: -1;
148
+ --shadow-lg-2-color: #00000002;
149
+ --shadow-xl-1-offset-x: 0;
150
+ --shadow-xl-1-offset-y: 1;
151
+ --shadow-xl-1-blur-radius: 3;
152
+ --shadow-xl-1-spread-radius: 0;
153
+ --shadow-xl-1-color: #00000002;
154
+ --shadow-xl-2-offset-x: 0;
155
+ --shadow-xl-2-offset-y: 8;
156
+ --shadow-xl-2-blur-radius: 10;
157
+ --shadow-xl-2-spread-radius: -1;
158
+ --shadow-xl-2-color: #00000002;
159
+ --shadow-2xl-offset-x: 0;
160
+ --shadow-2xl-offset-y: 1;
161
+ --shadow-2xl-blur-radius: 24;
162
+ --shadow-2xl-spread-radius: 0;
163
+ --shadow-2xl-color: #00000007;
164
+ --shadow-sm-offset-x: 0;
165
+ --shadow-sm-offset-y: 0;
166
+ --shadow-sm-blur-radius: 0;
167
+ --shadow-sm-spread-radius: 0;
168
+ --shadow-sm-color: #FFFFFF;
169
+ --shadow-md-offset-x: 0;
170
+ --shadow-md-offset-y: 0;
171
+ --shadow-md-blur-radius: 0;
172
+ --shadow-md-spread-radius: 0;
173
+ --shadow-md-color: #FFFFFF;
174
+ --shadow-lg-offset-x: 0;
175
+ --shadow-lg-offset-y: 0;
176
+ --shadow-lg-blur-radius: 0;
177
+ --shadow-lg-spread-radius: 0;
178
+ --shadow-lg-color: #FFFFFF;
179
+ --shadow-xl-offset-x: 0;
180
+ --shadow-xl-offset-y: 0;
181
+ --shadow-xl-blur-radius: 0;
182
+ --shadow-xl-spread-radius: 0;
183
+ --shadow-xl-color: #FFFFFF;
184
+ --shadow-tw-2xs: 0px 1px 8px 0px #00000002;
185
+ --shadow-tw-xs: 0px 1px 14px 0px #00000002;
186
+ --shadow-tw-sm: 0px 1px 3px 0px #00000002, 0px 1px 2px -1px #00000002;
187
+ --shadow-tw-md: 0px 1px 3px 0px #00000002, 0px 2px 4px -1px #00000002;
188
+ --shadow-tw-lg: 0px 1px 3px 0px #00000002, 0px 4px 6px -1px #00000002;
189
+ --shadow-tw-xl: 0px 1px 3px 0px #00000002, 0px 8px 10px -1px #00000002;
190
+ --shadow-tw-2xl: 0px 1px 24px 0px #00000007;
191
+ }
192
+
193
+ .dark {
194
+ --background: 60 1% 11%;
195
+ --foreground: 0 0% 98%;
196
+ --card: 0 0% 12%;
197
+ --card-foreground: 0 0% 98%;
198
+ --popover: 0 0% 9%;
199
+ --popover-foreground: 0 0% 98%;
200
+ --primary: 210 100% 47%;
201
+ --primary-foreground: 0 0% 98%;
202
+ --secondary: 60 1% 11%;
203
+ --secondary-foreground: 0 0% 98%;
204
+ --muted: 0 0% 15%;
205
+ --muted-foreground: 0 0% 63%;
206
+ --accent: 0 0% 15%;
207
+ --accent-foreground: 0 0% 98%;
208
+ --destructive: 0 75% 60%;
209
+ --info: 199 89% 48%;
210
+ --success: 142 76% 36%;
211
+ --warning: 38 92% 50%;
212
+ --border: 231 12% 27%;
213
+ --input: 0 0% 100%;
214
+ --ring: 0 0% 45%;
215
+ --chart-1: 210 100% 47%;
216
+ --chart-2: 96 98% 44%;
217
+ --chart-3: 196 99% 65%;
218
+ --chart-4: 298 100% 63%;
219
+ --chart-5: 38 100% 59%;
220
+ --sidebar: 0 0% 9%;
221
+ --sidebar-foreground: 0 0% 98%;
222
+ --sidebar-primary: 226 79% 49%;
223
+ --sidebar-primary-foreground: 226 79% 49%;
224
+ --sidebar-accent: 0 0% 15%;
225
+ --sidebar-accent-foreground: 0 0% 96%;
226
+ --sidebar-border: 0 0% 100%;
227
+ --sidebar-ring: 38 100% 54%;
228
+ --brand: 30 14% 89%;
229
+ --primary-opacity-10: #007FEF19;
230
+ --primary-opacity-20: #007FEF33;
231
+ --primary-opacity-30: #007FEF4C;
232
+ --primary-opacity-40: #007FEF66;
233
+ --primary-opacity-50: #007FEF7F;
234
+ --primary-opacity-60: #007FEF99;
235
+ --secondary-opacity-10: #F4F4F519;
236
+ --secondary-opacity-20: #F4F4F533;
237
+ --secondary-opacity-30: #F4F4F54C;
238
+ --secondary-opacity-40: #F4F4F566;
239
+ --secondary-opacity-50: #F4F4F57F;
240
+ --secondary-opacity-60: #F4F4F599;
241
+ --accent-opacity-10: #F4F4F519;
242
+ --accent-opacity-20: #F4F4F533;
243
+ --accent-opacity-30: #F4F4F54C;
244
+ --accent-opacity-40: #F4F4F566;
245
+ --accent-opacity-50: #F4F4F57F;
246
+ --accent-opacity-60: #F4F4F599;
247
+ --success-opacity-10: #16A34A19;
248
+ --success-opacity-20: #16A34A33;
249
+ --success-opacity-30: #16A34A4C;
250
+ --success-opacity-40: #16A34A66;
251
+ --success-opacity-50: #16A34A7F;
252
+ --success-opacity-60: #16A34A99;
253
+ --info-opacity-10: #0284C719;
254
+ --info-opacity-20: #0284C733;
255
+ --info-opacity-30: #0284C74C;
256
+ --info-opacity-40: #0284C766;
257
+ --info-opacity-50: #0284C77F;
258
+ --info-opacity-60: #0284C799;
259
+ --warning-opacity-10: #E3921919;
260
+ --warning-opacity-20: #D9770633;
261
+ --warning-opacity-30: #D977064C;
262
+ --warning-opacity-40: #D9770666;
263
+ --warning-opacity-50: #D977067F;
264
+ --warning-opacity-60: #D9770699;
265
+ --destructive-opacity-10: #E0343419;
266
+ --destructive-opacity-20: #E0343433;
267
+ --destructive-opacity-30: #E034344C;
268
+ --destructive-opacity-40: #E0343466;
269
+ --destructive-opacity-50: #E034347F;
270
+ --destructive-opacity-60: #DC262699;
271
+ --neutral-opacity-10: #47485719;
272
+ --neutral-opacity-20: #47485733;
273
+ --neutral-opacity-30: #4748574C;
274
+ --neutral-opacity-40: #47485766;
275
+ --neutral-opacity-50: #4748577F;
276
+ --neutral-opacity-60: #47485799;
277
+ --primary-dark-opacity-10: #1EB8CE19;
278
+ --primary-dark-opacity-20: #1EB8CE33;
279
+ --primary-dark-opacity-30: #1EB8CE4C;
280
+ --primary-dark-opacity-40: #1EB8CE66;
281
+ --primary-dark-opacity-50: #1EB8CE7F;
282
+ --primary-dark-opacity-60: #1EB8CE99;
283
+ --radius-none: 0;
284
+ --radius-xs: 8px;
285
+ --radius-sm: 12px;
286
+ --radius-md: 16px;
287
+ --radius-lg: 24px;
288
+ --radius-xl: 33px;
289
+ --radius-rounded: 9999px;
290
+ --font-sans: Switzer Variable;
291
+ --font-serif: Switzer Variable;
292
+ --font-mono: Roboto Mono;
293
+ --transparent: #FFFFFF00;
294
+ --backdrop-overlay: #3C3A4099;
295
+ --shadow: #00000019;
296
+ --background-input-30: rgba(246, 245, 243, 0.3);
297
+ --input-dark: #FFFFFF00;
298
+ --alpha-50: #FFFFFF7F;
299
+ --glass: #FFFFFF3D;
300
+ --radius: 24px;
301
+ --shadow-2xs-offset-x: 0;
302
+ --shadow-2xs-offset-y: 1;
303
+ --shadow-2xs-blur-radius: 8;
304
+ --shadow-2xs-spread-radius: 0;
305
+ --shadow-2xs-color: #00000002;
306
+ --shadow-xs-offset-x: 0;
307
+ --shadow-xs-offset-y: 1;
308
+ --shadow-xs-blur-radius: 14;
309
+ --shadow-xs-spread-radius: 0;
310
+ --shadow-xs-color: #00000002;
311
+ --shadow-sm-1-offset-x: 0;
312
+ --shadow-sm-1-offset-y: 1;
313
+ --shadow-sm-1-blur-radius: 3;
314
+ --shadow-sm-1-spread-radius: 0;
315
+ --shadow-sm-1-color: #00000002;
316
+ --shadow-sm-2-offset-x: 0;
317
+ --shadow-sm-2-offset-y: 1;
318
+ --shadow-sm-2-blur-radius: 2;
319
+ --shadow-sm-2-spread-radius: -1;
320
+ --shadow-sm-2-color: #00000002;
321
+ --shadow-md-1-offset-x: 0;
322
+ --shadow-md-1-offset-y: 1;
323
+ --shadow-md-1-blur-radius: 3;
324
+ --shadow-md-1-spread-radius: 0;
325
+ --shadow-md-1-color: #00000002;
326
+ --shadow-md-2-offset-x: 0;
327
+ --shadow-md-2-offset-y: 2;
328
+ --shadow-md-2-blur-radius: 4;
329
+ --shadow-md-2-spread-radius: -1;
330
+ --shadow-md-2-color: #00000002;
331
+ --shadow-lg-1-offset-x: 0;
332
+ --shadow-lg-1-offset-y: 1;
333
+ --shadow-lg-1-blur-radius: 3;
334
+ --shadow-lg-1-spread-radius: 0;
335
+ --shadow-lg-1-color: #00000002;
336
+ --shadow-lg-2-offset-x: 0;
337
+ --shadow-lg-2-offset-y: 4;
338
+ --shadow-lg-2-blur-radius: 6;
339
+ --shadow-lg-2-spread-radius: -1;
340
+ --shadow-lg-2-color: #00000002;
341
+ --shadow-xl-1-offset-x: 0;
342
+ --shadow-xl-1-offset-y: 1;
343
+ --shadow-xl-1-blur-radius: 3;
344
+ --shadow-xl-1-spread-radius: 0;
345
+ --shadow-xl-1-color: #00000002;
346
+ --shadow-xl-2-offset-x: 0;
347
+ --shadow-xl-2-offset-y: 8;
348
+ --shadow-xl-2-blur-radius: 10;
349
+ --shadow-xl-2-spread-radius: -1;
350
+ --shadow-xl-2-color: #00000002;
351
+ --shadow-2xl-offset-x: 0;
352
+ --shadow-2xl-offset-y: 1;
353
+ --shadow-2xl-blur-radius: 24;
354
+ --shadow-2xl-spread-radius: 0;
355
+ --shadow-2xl-color: #00000007;
356
+ --shadow-tw-2xs: 0px 1px 8px 0px #00000002;
357
+ --shadow-tw-xs: 0px 1px 14px 0px #00000002;
358
+ --shadow-tw-sm: 0px 1px 3px 0px #00000002, 0px 1px 2px -1px #00000002;
359
+ --shadow-tw-md: 0px 1px 3px 0px #00000002, 0px 2px 4px -1px #00000002;
360
+ --shadow-tw-lg: 0px 1px 3px 0px #00000002, 0px 4px 6px -1px #00000002;
361
+ --shadow-tw-xl: 0px 1px 3px 0px #00000002, 0px 8px 10px -1px #00000002;
362
+ --shadow-tw-2xl: 0px 1px 24px 0px #00000007;
363
+ }
package/package.json ADDED
@@ -0,0 +1,38 @@
1
+ {
2
+ "name": "@qdesignsystems/theme-myra",
3
+ "version": "0.1.2",
4
+ "publishConfig": {
5
+ "access": "public",
6
+ "registry": "https://registry.npmjs.org"
7
+ },
8
+ "description": "MYRA theme for Q Design System",
9
+ "main": "./dist/index.js",
10
+ "module": "./dist/index.mjs",
11
+ "types": "./dist/index.d.ts",
12
+ "exports": {
13
+ ".": {
14
+ "import": "./dist/index.mjs",
15
+ "require": "./dist/index.js",
16
+ "types": "./dist/index.d.ts"
17
+ },
18
+ "./styles.css": "./dist/styles.css",
19
+ "./package.json": "./package.json"
20
+ },
21
+ "sideEffects": [
22
+ "**/*.css"
23
+ ],
24
+ "files": [
25
+ "dist"
26
+ ],
27
+ "scripts": {
28
+ "build": "tsup && node scripts/generate-css.cjs",
29
+ "dev": "tsup --watch",
30
+ "type-check": "tsc --noEmit",
31
+ "clean": "rm -rf dist"
32
+ },
33
+ "devDependencies": {
34
+ "@q/design-system-themes": "workspace:*",
35
+ "tsup": "^8.0.1",
36
+ "typescript": "^5.3.3"
37
+ }
38
+ }