tailwind-preset-mantine 3.0.2 → 3.0.3

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/generate.js +2 -0
  3. package/src/index.css +14 -0
  4. package/src/theme.css +14 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tailwind-preset-mantine",
3
- "version": "3.0.2",
3
+ "version": "3.0.3",
4
4
  "description": "Integrate Mantine with Tailwind CSS",
5
5
  "keywords": [
6
6
  "mantine",
package/src/generate.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // for reference:
2
2
  // https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineCssVariables/default-css-variables-resolver.ts
3
+ // https://github.com/mantinedev/mantine/blob/master/packages/%40mantine/core/src/core/MantineProvider/MantineCssVariables/get-css-color-variables.ts
3
4
  // https://tailwindcss.com/docs/theme#default-theme-variable-reference
4
5
 
5
6
  import { DEFAULT_THEME } from "@mantine/core";
@@ -173,6 +174,7 @@ ${
173
174
  ${Object.keys(theme.colors ?? {})
174
175
  .map((key) =>
175
176
  `
177
+ --color-${key}-text: var(--mantine-color-${key}-text);
176
178
  --color-${key}-filled: var(--mantine-color-${key}-filled);
177
179
  --color-${key}-filled-hover: var(--mantine-color-${key}-filled-hover);
178
180
  --color-${key}-light: var(--mantine-color-${key}-light);
package/src/index.css CHANGED
@@ -298,6 +298,7 @@
298
298
 
299
299
  /* colors - variant specific */
300
300
 
301
+ --color-dark-text: var(--mantine-color-dark-text);
301
302
  --color-dark-filled: var(--mantine-color-dark-filled);
302
303
  --color-dark-filled-hover: var(--mantine-color-dark-filled-hover);
303
304
  --color-dark-light: var(--mantine-color-dark-light);
@@ -306,6 +307,7 @@
306
307
  --color-dark-outline: var(--mantine-color-dark-outline);
307
308
  --color-dark-outline-hover: var(--mantine-color-dark-outline-hover);
308
309
 
310
+ --color-gray-text: var(--mantine-color-gray-text);
309
311
  --color-gray-filled: var(--mantine-color-gray-filled);
310
312
  --color-gray-filled-hover: var(--mantine-color-gray-filled-hover);
311
313
  --color-gray-light: var(--mantine-color-gray-light);
@@ -314,6 +316,7 @@
314
316
  --color-gray-outline: var(--mantine-color-gray-outline);
315
317
  --color-gray-outline-hover: var(--mantine-color-gray-outline-hover);
316
318
 
319
+ --color-red-text: var(--mantine-color-red-text);
317
320
  --color-red-filled: var(--mantine-color-red-filled);
318
321
  --color-red-filled-hover: var(--mantine-color-red-filled-hover);
319
322
  --color-red-light: var(--mantine-color-red-light);
@@ -322,6 +325,7 @@
322
325
  --color-red-outline: var(--mantine-color-red-outline);
323
326
  --color-red-outline-hover: var(--mantine-color-red-outline-hover);
324
327
 
328
+ --color-pink-text: var(--mantine-color-pink-text);
325
329
  --color-pink-filled: var(--mantine-color-pink-filled);
326
330
  --color-pink-filled-hover: var(--mantine-color-pink-filled-hover);
327
331
  --color-pink-light: var(--mantine-color-pink-light);
@@ -330,6 +334,7 @@
330
334
  --color-pink-outline: var(--mantine-color-pink-outline);
331
335
  --color-pink-outline-hover: var(--mantine-color-pink-outline-hover);
332
336
 
337
+ --color-grape-text: var(--mantine-color-grape-text);
333
338
  --color-grape-filled: var(--mantine-color-grape-filled);
334
339
  --color-grape-filled-hover: var(--mantine-color-grape-filled-hover);
335
340
  --color-grape-light: var(--mantine-color-grape-light);
@@ -338,6 +343,7 @@
338
343
  --color-grape-outline: var(--mantine-color-grape-outline);
339
344
  --color-grape-outline-hover: var(--mantine-color-grape-outline-hover);
340
345
 
346
+ --color-violet-text: var(--mantine-color-violet-text);
341
347
  --color-violet-filled: var(--mantine-color-violet-filled);
342
348
  --color-violet-filled-hover: var(--mantine-color-violet-filled-hover);
343
349
  --color-violet-light: var(--mantine-color-violet-light);
@@ -346,6 +352,7 @@
346
352
  --color-violet-outline: var(--mantine-color-violet-outline);
347
353
  --color-violet-outline-hover: var(--mantine-color-violet-outline-hover);
348
354
 
355
+ --color-indigo-text: var(--mantine-color-indigo-text);
349
356
  --color-indigo-filled: var(--mantine-color-indigo-filled);
350
357
  --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover);
351
358
  --color-indigo-light: var(--mantine-color-indigo-light);
@@ -354,6 +361,7 @@
354
361
  --color-indigo-outline: var(--mantine-color-indigo-outline);
355
362
  --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover);
356
363
 
364
+ --color-blue-text: var(--mantine-color-blue-text);
357
365
  --color-blue-filled: var(--mantine-color-blue-filled);
358
366
  --color-blue-filled-hover: var(--mantine-color-blue-filled-hover);
359
367
  --color-blue-light: var(--mantine-color-blue-light);
@@ -362,6 +370,7 @@
362
370
  --color-blue-outline: var(--mantine-color-blue-outline);
363
371
  --color-blue-outline-hover: var(--mantine-color-blue-outline-hover);
364
372
 
373
+ --color-cyan-text: var(--mantine-color-cyan-text);
365
374
  --color-cyan-filled: var(--mantine-color-cyan-filled);
366
375
  --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover);
367
376
  --color-cyan-light: var(--mantine-color-cyan-light);
@@ -370,6 +379,7 @@
370
379
  --color-cyan-outline: var(--mantine-color-cyan-outline);
371
380
  --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover);
372
381
 
382
+ --color-teal-text: var(--mantine-color-teal-text);
373
383
  --color-teal-filled: var(--mantine-color-teal-filled);
374
384
  --color-teal-filled-hover: var(--mantine-color-teal-filled-hover);
375
385
  --color-teal-light: var(--mantine-color-teal-light);
@@ -378,6 +388,7 @@
378
388
  --color-teal-outline: var(--mantine-color-teal-outline);
379
389
  --color-teal-outline-hover: var(--mantine-color-teal-outline-hover);
380
390
 
391
+ --color-green-text: var(--mantine-color-green-text);
381
392
  --color-green-filled: var(--mantine-color-green-filled);
382
393
  --color-green-filled-hover: var(--mantine-color-green-filled-hover);
383
394
  --color-green-light: var(--mantine-color-green-light);
@@ -386,6 +397,7 @@
386
397
  --color-green-outline: var(--mantine-color-green-outline);
387
398
  --color-green-outline-hover: var(--mantine-color-green-outline-hover);
388
399
 
400
+ --color-lime-text: var(--mantine-color-lime-text);
389
401
  --color-lime-filled: var(--mantine-color-lime-filled);
390
402
  --color-lime-filled-hover: var(--mantine-color-lime-filled-hover);
391
403
  --color-lime-light: var(--mantine-color-lime-light);
@@ -394,6 +406,7 @@
394
406
  --color-lime-outline: var(--mantine-color-lime-outline);
395
407
  --color-lime-outline-hover: var(--mantine-color-lime-outline-hover);
396
408
 
409
+ --color-yellow-text: var(--mantine-color-yellow-text);
397
410
  --color-yellow-filled: var(--mantine-color-yellow-filled);
398
411
  --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover);
399
412
  --color-yellow-light: var(--mantine-color-yellow-light);
@@ -402,6 +415,7 @@
402
415
  --color-yellow-outline: var(--mantine-color-yellow-outline);
403
416
  --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover);
404
417
 
418
+ --color-orange-text: var(--mantine-color-orange-text);
405
419
  --color-orange-filled: var(--mantine-color-orange-filled);
406
420
  --color-orange-filled-hover: var(--mantine-color-orange-filled-hover);
407
421
  --color-orange-light: var(--mantine-color-orange-light);
package/src/theme.css CHANGED
@@ -291,6 +291,7 @@
291
291
 
292
292
  /* colors - variant specific */
293
293
 
294
+ --color-dark-text: var(--mantine-color-dark-text);
294
295
  --color-dark-filled: var(--mantine-color-dark-filled);
295
296
  --color-dark-filled-hover: var(--mantine-color-dark-filled-hover);
296
297
  --color-dark-light: var(--mantine-color-dark-light);
@@ -299,6 +300,7 @@
299
300
  --color-dark-outline: var(--mantine-color-dark-outline);
300
301
  --color-dark-outline-hover: var(--mantine-color-dark-outline-hover);
301
302
 
303
+ --color-gray-text: var(--mantine-color-gray-text);
302
304
  --color-gray-filled: var(--mantine-color-gray-filled);
303
305
  --color-gray-filled-hover: var(--mantine-color-gray-filled-hover);
304
306
  --color-gray-light: var(--mantine-color-gray-light);
@@ -307,6 +309,7 @@
307
309
  --color-gray-outline: var(--mantine-color-gray-outline);
308
310
  --color-gray-outline-hover: var(--mantine-color-gray-outline-hover);
309
311
 
312
+ --color-red-text: var(--mantine-color-red-text);
310
313
  --color-red-filled: var(--mantine-color-red-filled);
311
314
  --color-red-filled-hover: var(--mantine-color-red-filled-hover);
312
315
  --color-red-light: var(--mantine-color-red-light);
@@ -315,6 +318,7 @@
315
318
  --color-red-outline: var(--mantine-color-red-outline);
316
319
  --color-red-outline-hover: var(--mantine-color-red-outline-hover);
317
320
 
321
+ --color-pink-text: var(--mantine-color-pink-text);
318
322
  --color-pink-filled: var(--mantine-color-pink-filled);
319
323
  --color-pink-filled-hover: var(--mantine-color-pink-filled-hover);
320
324
  --color-pink-light: var(--mantine-color-pink-light);
@@ -323,6 +327,7 @@
323
327
  --color-pink-outline: var(--mantine-color-pink-outline);
324
328
  --color-pink-outline-hover: var(--mantine-color-pink-outline-hover);
325
329
 
330
+ --color-grape-text: var(--mantine-color-grape-text);
326
331
  --color-grape-filled: var(--mantine-color-grape-filled);
327
332
  --color-grape-filled-hover: var(--mantine-color-grape-filled-hover);
328
333
  --color-grape-light: var(--mantine-color-grape-light);
@@ -331,6 +336,7 @@
331
336
  --color-grape-outline: var(--mantine-color-grape-outline);
332
337
  --color-grape-outline-hover: var(--mantine-color-grape-outline-hover);
333
338
 
339
+ --color-violet-text: var(--mantine-color-violet-text);
334
340
  --color-violet-filled: var(--mantine-color-violet-filled);
335
341
  --color-violet-filled-hover: var(--mantine-color-violet-filled-hover);
336
342
  --color-violet-light: var(--mantine-color-violet-light);
@@ -339,6 +345,7 @@
339
345
  --color-violet-outline: var(--mantine-color-violet-outline);
340
346
  --color-violet-outline-hover: var(--mantine-color-violet-outline-hover);
341
347
 
348
+ --color-indigo-text: var(--mantine-color-indigo-text);
342
349
  --color-indigo-filled: var(--mantine-color-indigo-filled);
343
350
  --color-indigo-filled-hover: var(--mantine-color-indigo-filled-hover);
344
351
  --color-indigo-light: var(--mantine-color-indigo-light);
@@ -347,6 +354,7 @@
347
354
  --color-indigo-outline: var(--mantine-color-indigo-outline);
348
355
  --color-indigo-outline-hover: var(--mantine-color-indigo-outline-hover);
349
356
 
357
+ --color-blue-text: var(--mantine-color-blue-text);
350
358
  --color-blue-filled: var(--mantine-color-blue-filled);
351
359
  --color-blue-filled-hover: var(--mantine-color-blue-filled-hover);
352
360
  --color-blue-light: var(--mantine-color-blue-light);
@@ -355,6 +363,7 @@
355
363
  --color-blue-outline: var(--mantine-color-blue-outline);
356
364
  --color-blue-outline-hover: var(--mantine-color-blue-outline-hover);
357
365
 
366
+ --color-cyan-text: var(--mantine-color-cyan-text);
358
367
  --color-cyan-filled: var(--mantine-color-cyan-filled);
359
368
  --color-cyan-filled-hover: var(--mantine-color-cyan-filled-hover);
360
369
  --color-cyan-light: var(--mantine-color-cyan-light);
@@ -363,6 +372,7 @@
363
372
  --color-cyan-outline: var(--mantine-color-cyan-outline);
364
373
  --color-cyan-outline-hover: var(--mantine-color-cyan-outline-hover);
365
374
 
375
+ --color-teal-text: var(--mantine-color-teal-text);
366
376
  --color-teal-filled: var(--mantine-color-teal-filled);
367
377
  --color-teal-filled-hover: var(--mantine-color-teal-filled-hover);
368
378
  --color-teal-light: var(--mantine-color-teal-light);
@@ -371,6 +381,7 @@
371
381
  --color-teal-outline: var(--mantine-color-teal-outline);
372
382
  --color-teal-outline-hover: var(--mantine-color-teal-outline-hover);
373
383
 
384
+ --color-green-text: var(--mantine-color-green-text);
374
385
  --color-green-filled: var(--mantine-color-green-filled);
375
386
  --color-green-filled-hover: var(--mantine-color-green-filled-hover);
376
387
  --color-green-light: var(--mantine-color-green-light);
@@ -379,6 +390,7 @@
379
390
  --color-green-outline: var(--mantine-color-green-outline);
380
391
  --color-green-outline-hover: var(--mantine-color-green-outline-hover);
381
392
 
393
+ --color-lime-text: var(--mantine-color-lime-text);
382
394
  --color-lime-filled: var(--mantine-color-lime-filled);
383
395
  --color-lime-filled-hover: var(--mantine-color-lime-filled-hover);
384
396
  --color-lime-light: var(--mantine-color-lime-light);
@@ -387,6 +399,7 @@
387
399
  --color-lime-outline: var(--mantine-color-lime-outline);
388
400
  --color-lime-outline-hover: var(--mantine-color-lime-outline-hover);
389
401
 
402
+ --color-yellow-text: var(--mantine-color-yellow-text);
390
403
  --color-yellow-filled: var(--mantine-color-yellow-filled);
391
404
  --color-yellow-filled-hover: var(--mantine-color-yellow-filled-hover);
392
405
  --color-yellow-light: var(--mantine-color-yellow-light);
@@ -395,6 +408,7 @@
395
408
  --color-yellow-outline: var(--mantine-color-yellow-outline);
396
409
  --color-yellow-outline-hover: var(--mantine-color-yellow-outline-hover);
397
410
 
411
+ --color-orange-text: var(--mantine-color-orange-text);
398
412
  --color-orange-filled: var(--mantine-color-orange-filled);
399
413
  --color-orange-filled-hover: var(--mantine-color-orange-filled-hover);
400
414
  --color-orange-light: var(--mantine-color-orange-light);