@beeq/tailwindcss 1.1.0 → 1.2.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.
Files changed (3) hide show
  1. package/index.esm.d.ts +2 -0
  2. package/index.esm.js +1 -335
  3. package/package.json +1 -2
package/index.esm.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./src/index";
2
+ export { default } from "./src/index";
package/index.esm.js CHANGED
@@ -2,15 +2,6 @@ import flattenColorPalette from 'tailwindcss/lib/util/flattenColorPalette';
2
2
  import plugin from 'tailwindcss/plugin';
3
3
  import ThemeSwapper from 'tailwindcss-theme-swapper';
4
4
 
5
- /**
6
- * Blend color with base color and percentage
7
- *
8
- * @param {Object} opt - The blendColor options object
9
- * @param {string} opt.color - The color to blend
10
- * @param {string} opt.base - The base color layer to blend with
11
- * @param {number} opt.percentage - The percentage to blend
12
- * @param {string} [opt.property ='background-color'] - The CSS property to blend (e.g: 'background-color', 'color')
13
- */
14
5
  const blendColor = ({
15
6
  color,
16
7
  base,
@@ -20,12 +11,7 @@ const blendColor = ({
20
11
  [property]: `color-mix(in srgb, ${color}, ${base} ${percentage}%)`
21
12
  });
22
13
 
23
- /* -------------------------------------------------------------------------- */
24
- /* BEEQ CSS Colors */
25
- /* -------------------------------------------------------------------------- */
26
-
27
14
  const CSS_COLORS = {
28
- /** Blue */
29
15
  '--bq-blue-100': '#e7f0fd',
30
16
  '--bq-blue-200': '#d0e2fb',
31
17
  '--bq-blue-300': '#a1c5f7',
@@ -36,7 +22,6 @@ const CSS_COLORS = {
36
22
  '--bq-blue-800': '#0d428d',
37
23
  '--bq-blue-900': '#082c5e',
38
24
  '--bq-blue-1000': '#04162f',
39
- /** Corai */
40
25
  '--bq-corai-100': '#fff2f2',
41
26
  '--bq-corai-200': '#ffe6e6',
42
27
  '--bq-corai-300': '#ffccce',
@@ -47,7 +32,6 @@ const CSS_COLORS = {
47
32
  '--bq-corai-800': '#994d4f',
48
33
  '--bq-corai-900': '#663335',
49
34
  '--bq-corai-1000': '#331a1a',
50
- /** Cyan */
51
35
  '--bq-cyan-100': '#e8f7fb',
52
36
  '--bq-cyan-200': '#d2f0f8',
53
37
  '--bq-cyan-300': '#a5e1f1',
@@ -58,7 +42,6 @@ const CSS_COLORS = {
58
42
  '--bq-cyan-800': '#126b83',
59
43
  '--bq-cyan-900': '#0c4858',
60
44
  '--bq-cyan-1000': '#06242c',
61
- /** Gold */
62
45
  '--bq-gold-100': '#fbf4ec',
63
46
  '--bq-gold-200': '#f7e9da',
64
47
  '--bq-gold-300': '#f0d3b6',
@@ -69,7 +52,6 @@ const CSS_COLORS = {
69
52
  '--bq-gold-800': '#82562b',
70
53
  '--bq-gold-900': '#573a1d',
71
54
  '--bq-gold-1000': '#2b1d0e',
72
- /** Green */
73
55
  '--bq-green-100': '#e8f8ef',
74
56
  '--bq-green-200': '#d2f1e0',
75
57
  '--bq-green-300': '#a5e3c1',
@@ -80,7 +62,6 @@ const CSS_COLORS = {
80
62
  '--bq-green-800': '#126f3b',
81
63
  '--bq-green-900': '#0c4a28',
82
64
  '--bq-green-1000': '#062514',
83
- /** Grey */
84
65
  '--bq-grey-100': '#f1f2f4',
85
66
  '--bq-grey-200': '#e7e8eb',
86
67
  '--bq-grey-300': '#caccd2',
@@ -93,7 +74,6 @@ const CSS_COLORS = {
93
74
  '--bq-grey-900': '#1c1d23',
94
75
  '--bq-grey-950': '#15161a',
95
76
  '--bq-grey-1000': '#0d0e11',
96
- /** Indigo */
97
77
  '--bq-indigo-100': '#edecfc',
98
78
  '--bq-indigo-200': '#dcdafa',
99
79
  '--bq-indigo-300': '#b9b5f5',
@@ -104,7 +84,6 @@ const CSS_COLORS = {
104
84
  '--bq-indigo-800': '#2f2a89',
105
85
  '--bq-indigo-900': '#201c5c',
106
86
  '--bq-indigo-1000': '#100e2e',
107
- /** Iris */
108
87
  '--bq-iris-100': '#e9f0ff',
109
88
  '--bq-iris-200': '#d6e0ff',
110
89
  '--bq-iris-300': '#b2c0fe',
@@ -115,7 +94,6 @@ const CSS_COLORS = {
115
94
  '--bq-iris-800': '#332e95',
116
95
  '--bq-iris-900': '#26216d',
117
96
  '--bq-iris-1000': '#181545',
118
- /** Lime */
119
97
  '--bq-lime-100': '#f5fae8',
120
98
  '--bq-lime-200': '#ecf6d2',
121
99
  '--bq-lime-300': '#d9eda5',
@@ -126,7 +104,6 @@ const CSS_COLORS = {
126
104
  '--bq-lime-800': '#5f7d13',
127
105
  '--bq-lime-900': '#40540c',
128
106
  '--bq-lime-1000': '#202a06',
129
- /** Magenta */
130
107
  '--bq-magenta-100': '#fce7f4',
131
108
  '--bq-magenta-200': '#f9cfea',
132
109
  '--bq-magenta-300': '#f39fd6',
@@ -137,10 +114,8 @@ const CSS_COLORS = {
137
114
  '--bq-magenta-800': '#850c59',
138
115
  '--bq-magenta-900': '#58083c',
139
116
  '--bq-magenta-1000': '#2c041e',
140
- /** Neutral */
141
117
  '--bq-neutral-white': '#fbfbfc',
142
118
  '--bq-neutral-black': '#060708',
143
- /** Orange */
144
119
  '--bq-orange-100': '#fbf0e9',
145
120
  '--bq-orange-200': '#f8e1d4',
146
121
  '--bq-orange-300': '#f1c2a8',
@@ -151,7 +126,6 @@ const CSS_COLORS = {
151
126
  '--bq-orange-800': '#843e17',
152
127
  '--bq-orange-900': '#58290f',
153
128
  '--bq-orange-1000': '#2c1508',
154
- /** Purple */
155
129
  '--bq-purple-100': '#efebf8',
156
130
  '--bq-purple-200': '#e0d7f2',
157
131
  '--bq-purple-300': '#c1afe5',
@@ -162,7 +136,6 @@ const CSS_COLORS = {
162
136
  '--bq-purple-800': '#3d2272',
163
137
  '--bq-purple-900': '#28164c',
164
138
  '--bq-purple-1000': '#140b26',
165
- /** Red */
166
139
  '--bq-red-100': '#fce7ea',
167
140
  '--bq-red-200': '#f9d1d5',
168
141
  '--bq-red-300': '#f3a2ac',
@@ -173,7 +146,6 @@ const CSS_COLORS = {
173
146
  '--bq-red-800': '#870e1c',
174
147
  '--bq-red-900': '#5a0913',
175
148
  '--bq-red-1000': '#2d0509',
176
- /** Sky */
177
149
  '--bq-sky-100': '#eff4fb',
178
150
  '--bq-sky-200': '#dfeaf8',
179
151
  '--bq-sky-300': '#bfd5f1',
@@ -184,7 +156,6 @@ const CSS_COLORS = {
184
156
  '--bq-sky-800': '#385b83',
185
157
  '--bq-sky-900': '#263c58',
186
158
  '--bq-sky-1000': '#131e2c',
187
- /** Teal */
188
159
  '--bq-teal-100': '#e5f7f5',
189
160
  '--bq-teal-200': '#ccf0eb',
190
161
  '--bq-teal-300': '#99e1d8',
@@ -195,7 +166,6 @@ const CSS_COLORS = {
195
166
  '--bq-teal-800': '#006c5e',
196
167
  '--bq-teal-900': '#00483f',
197
168
  '--bq-teal-1000': '#00241f',
198
- /** Volcano */
199
169
  '--bq-volcano-100': '#feede7',
200
170
  '--bq-volcano-200': '#fddbd1',
201
171
  '--bq-volcano-300': '#fbb8a3',
@@ -206,7 +176,6 @@ const CSS_COLORS = {
206
176
  '--bq-volcano-800': '#942e0e',
207
177
  '--bq-volcano-900': '#621f0a',
208
178
  '--bq-volcano-1000': '#310f05',
209
- /** Yellow */
210
179
  '--bq-yellow-100': '#fefbe7',
211
180
  '--bq-yellow-200': '#fcf6d0',
212
181
  '--bq-yellow-300': '#faeea0',
@@ -217,11 +186,6 @@ const CSS_COLORS = {
217
186
  '--bq-yellow-800': '#917f0b',
218
187
  '--bq-yellow-900': '#615507',
219
188
  '--bq-yellow-1000': '#302a04',
220
- /* -------------------------------------------------------------------------- */
221
- /* These groups are exclusive for the Endava theme */
222
- /* -------------------------------------------------------------------------- */
223
-
224
- /** Endava Grey */
225
189
  '--bq-endava-grey-50': '#f7f7f8',
226
190
  '--bq-endava-grey-100': '#e4e6e7',
227
191
  '--bq-endava-grey-200': '#b5babe',
@@ -234,10 +198,8 @@ const CSS_COLORS = {
234
198
  '--bq-endava-grey-900': '#192b37',
235
199
  '--bq-endava-grey-950': '#151b1e',
236
200
  '--bq-endava-grey-1000': '#0f1316',
237
- /** Endava Neutral */
238
201
  '--bq-endava-neutral-white': '#fafbfb',
239
202
  '--bq-endava-neutral-black': '#060708',
240
- /** Endava Orange */
241
203
  '--bq-endava-orange-100': '#fef3f1',
242
204
  '--bq-endava-orange-200': '#fbd6d1',
243
205
  '--bq-endava-orange-300': '#fab7af',
@@ -250,10 +212,6 @@ const CSS_COLORS = {
250
212
  '--bq-endava-orange-1000': '#471e19'
251
213
  };
252
214
 
253
- /* -------------------------------------------------------------------------- */
254
- /* BEEQ declarative colors for Tailwind config */
255
- /* -------------------------------------------------------------------------- */
256
-
257
215
  const DECLARATIVE_COLORS = {
258
216
  bg: {
259
217
  primary: 'var(--bq-background--primary)',
@@ -305,16 +263,11 @@ const DECLARATIVE_COLORS = {
305
263
  danger: 'var(--bq-stroke--danger)'
306
264
  },
307
265
  text: {
308
- /** Primary */
309
266
  primary: 'var(--bq-text--primary)',
310
267
  alt: 'var(--bq-text--alt)',
311
- /** Secondary */
312
268
  secondary: 'var(--bq-text--secondary)',
313
- /** Inverse */
314
269
  inverse: 'var(--bq-text--inverse)',
315
- /** Brand */
316
270
  brand: 'var(--bq-text--brand)',
317
- /** Feedback */
318
271
  info: 'var(--bq-text--info)',
319
272
  success: 'var(--bq-text--success)',
320
273
  warning: 'var(--bq-text--warning)',
@@ -337,10 +290,6 @@ const DECLARATIVE_COLORS = {
337
290
  }
338
291
  };
339
292
 
340
- /* -------------------------------------------------------------------------- */
341
- /* BEEQ primitive colors for Tailwind config */
342
- /* -------------------------------------------------------------------------- */
343
-
344
293
  const PRIMITIVE_COLORS = {
345
294
  blue: {
346
295
  100: 'var(--bq-blue-100)',
@@ -555,9 +504,6 @@ const PRIMITIVE_COLORS = {
555
504
  };
556
505
 
557
506
  const DefaultDarkTheme = {
558
- /* -------------------------------------------------------------------------- */
559
- /* Background colors */
560
- /* -------------------------------------------------------------------------- */
561
507
  'bq-background--primary': 'var(--bq-neutral-1000)',
562
508
  'bq-background--secondary': 'var(--bq-neutral-950)',
563
509
  'bq-background--tertiary': 'var(--bq-neutral-800)',
@@ -565,102 +511,54 @@ const DefaultDarkTheme = {
565
511
  'bq-background--inverse': 'var(--bq-neutral-600)',
566
512
  'bq-background--brand': 'var(--bq-brand)',
567
513
  'bq-background--overlay': 'var(--bq-neutral-900)',
568
- // with opacity: 60%
569
- /* -------------------------------------------------------------------------- */
570
- /* Icons colors */
571
- /* -------------------------------------------------------------------------- */
572
- /** Primary */
573
514
  'bq-icon--primary': 'var(--bq-neutral-100)',
574
515
  'bq-icon--alt': 'var(--bq-white)',
575
- /** Secondary */
576
516
  'bq-icon--secondary': 'var(--bq-neutral-400)',
577
- /** Inverse */
578
517
  'bq-icon--inverse': 'var(--bq-neutral-800)',
579
- /** Brand */
580
518
  'bq-icon--brand': 'var(--bq-brand)',
581
- /** Feedback */
582
519
  'bq-icon--info': 'var(--bq-brand)',
583
520
  'bq-icon--success': 'var(--bq-success)',
584
521
  'bq-icon--warning': 'var(--bq-warning)',
585
522
  'bq-icon--danger': 'var(--bq-danger)',
586
- /* -------------------------------------------------------------------------- */
587
- /* Stroke colors */
588
- /* -------------------------------------------------------------------------- */
589
- /** Primary */
590
523
  'bq-stroke--primary': 'var(--bq-neutral-900)',
591
524
  'bq-stroke--alt': 'var(--bq-neutral-1000)',
592
- /** Secondary */
593
525
  'bq-stroke--secondary': 'var(--bq-neutral-700)',
594
- /** Tertiary */
595
526
  'bq-stroke--tertiary': 'var(--bq-neutral-400)',
596
- /** Inverse */
597
527
  'bq-stroke--inverse': 'var(--bq-neutral-950)',
598
- /** Brand */
599
528
  'bq-stroke--brand': 'var(--bq-brand)',
600
- /** Success */
601
529
  'bq-stroke--success': 'var(--bq-success)',
602
- /** Warning */
603
530
  'bq-stroke--warning': 'var(--bq-warning)',
604
- /** Danger */
605
531
  'bq-stroke--danger': 'var(--bq-danger)',
606
- /** Info */
607
532
  'bq-stroke--info': 'var(--bq-brand)',
608
- /* -------------------------------------------------------------------------- */
609
- /* Text colors */
610
- /* -------------------------------------------------------------------------- */
611
- /** Primary */
612
533
  'bq-text--primary': 'var(--bq-neutral-100)',
613
534
  'bq-text--alt': 'var(--bq-white)',
614
- /** Secondary */
615
535
  'bq-text--secondary': 'var(--bq-neutral-400)',
616
- /** Inverse */
617
536
  'bq-text--inverse': 'var(--bq-neutral-800)',
618
- /** Brand */
619
537
  'bq-text--brand': 'var(--bq-brand)',
620
- /** Feedback */
621
538
  'bq-text--info': 'var(--bq-brand)',
622
539
  'bq-text--success': 'var(--bq-success)',
623
540
  'bq-text--warning': 'var(--bq-warning)',
624
541
  'bq-text--danger': 'var(--bq-danger)',
625
- /* -------------------------------------------------------------------------- */
626
- /* UI colors */
627
- /* -------------------------------------------------------------------------- */
628
- /** Primary */
629
542
  'bq-ui--primary': 'var(--bq-neutral-900)',
630
543
  'bq-ui--alt': 'var(--bq-neutral-950)',
631
- /** Secondary */
632
544
  'bq-ui--secondary': 'var(--bq-neutral-800)',
633
- /** Tertiary */
634
545
  'bq-ui--tertiary': 'var(--bq-neutral-700)',
635
- /** Inverse */
636
546
  'bq-ui--inverse': 'var(--bq-neutral-100)',
637
- /** Brand */
638
547
  'bq-ui--brand': 'var(--bq-brand)',
639
548
  'bq-ui--brand-alt': 'var(--bq-brand-dark)',
640
- /** Success */
641
549
  'bq-ui--success': 'var(--bq-success)',
642
550
  'bq-ui--success-alt': 'var(--bq-success-dark)',
643
- /** Warning */
644
551
  'bq-ui--warning': 'var(--bq-warning)',
645
552
  'bq-ui--warning-alt': 'var(--bq-warning-dark)',
646
- /** Danger */
647
553
  'bq-ui--danger': 'var(--bq-danger)',
648
554
  'bq-ui--danger-alt': 'var(--bq-danger-dark)',
649
- /** Info */
650
555
  'bq-ui--info': 'var(--bq-brand)',
651
556
  'bq-ui--info-alt': 'var(--bq-brand-dark)',
652
- /* -------------------------------------------------------------------------- */
653
- /* States: */
654
- /* -------------------------------------------------------------------------- */
655
- // !Note: these tokens are only used as base to create the states colors
656
557
  'bq-hover': '#444546',
657
558
  'bq-active': '#1F2026'
658
559
  };
659
560
 
660
561
  const DefaultLightTheme = {
661
- /* -------------------------------------------------------------------------- */
662
- /* Background colors */
663
- /* -------------------------------------------------------------------------- */
664
562
  'bq-background--primary': 'var(--bq-white)',
665
563
  'bq-background--secondary': 'var(--bq-neutral-100)',
666
564
  'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -668,94 +566,49 @@ const DefaultLightTheme = {
668
566
  'bq-background--inverse': 'var(--bq-neutral-900)',
669
567
  'bq-background--brand': 'var(--bq-brand)',
670
568
  'bq-background--overlay': 'var(--bq-neutral-900)',
671
- // with opacity: 60%
672
- /* -------------------------------------------------------------------------- */
673
- /* Icons colors */
674
- /* -------------------------------------------------------------------------- */
675
- /** Primary */
676
569
  'bq-icon--primary': 'var(--bq-neutral-800)',
677
570
  'bq-icon--alt': 'var(--bq-white)',
678
- /** Secondary */
679
571
  'bq-icon--secondary': 'var(--bq-neutral-600)',
680
- /** Inverse */
681
572
  'bq-icon--inverse': 'var(--bq-neutral-50)',
682
- /** Brand */
683
573
  'bq-icon--brand': 'var(--bq-brand)',
684
- /** Feedback */
685
574
  'bq-icon--info': 'var(--bq-brand)',
686
575
  'bq-icon--success': 'var(--bq-success)',
687
576
  'bq-icon--warning': 'var(--bq-warning)',
688
577
  'bq-icon--danger': 'var(--bq-danger)',
689
- /* -------------------------------------------------------------------------- */
690
- /* Stroke colors */
691
- /* -------------------------------------------------------------------------- */
692
- /** Primary */
693
578
  'bq-stroke--primary': 'var(--bq-neutral-200)',
694
579
  'bq-stroke--alt': 'var(--bq-neutral-50)',
695
- /** Secondary */
696
580
  'bq-stroke--secondary': 'var(--bq-neutral-600)',
697
- /** Tertiary */
698
581
  'bq-stroke--tertiary': 'var(--bq-neutral-900)',
699
- /** Inverse */
700
582
  'bq-stroke--inverse': 'var(--bq-white)',
701
- /** Brand */
702
583
  'bq-stroke--brand': 'var(--bq-brand)',
703
- /** Success */
704
584
  'bq-stroke--success': 'var(--bq-success)',
705
- /** Warning */
706
585
  'bq-stroke--warning': 'var(--bq-warning)',
707
- /** Danger */
708
586
  'bq-stroke--danger': 'var(--bq-danger)',
709
- /** Info */
710
587
  'bq-stroke--info': 'var(--bq-brand)',
711
- /* -------------------------------------------------------------------------- */
712
- /* Text colors */
713
- /* -------------------------------------------------------------------------- */
714
- /** Primary */
715
588
  'bq-text--primary': 'var(--bq-neutral-800)',
716
589
  'bq-text--alt': 'var(--bq-white)',
717
- /** Secondary */
718
590
  'bq-text--secondary': 'var(--bq-neutral-600)',
719
- /** Inverse */
720
591
  'bq-text--inverse': 'var(--bq-neutral-50)',
721
- /** Brand */
722
592
  'bq-text--brand': 'var(--bq-brand)',
723
- /** Feedback */
724
593
  'bq-text--info': 'var(--bq-brand)',
725
594
  'bq-text--success': 'var(--bq-success)',
726
595
  'bq-text--warning': 'var(--bq-warning)',
727
596
  'bq-text--danger': 'var(--bq-danger)',
728
- /* -------------------------------------------------------------------------- */
729
- /* UI colors */
730
- /* -------------------------------------------------------------------------- */
731
- /** Primary */
732
597
  'bq-ui--primary': 'var(--bq-white)',
733
598
  'bq-ui--alt': 'var(--bq-neutral-50)',
734
- /** Secondary */
735
599
  'bq-ui--secondary': 'var(--bq-neutral-200)',
736
- /** Tertiary */
737
600
  'bq-ui--tertiary': 'var(--bq-neutral-500)',
738
- /** Inverse */
739
601
  'bq-ui--inverse': 'var(--bq-neutral-900)',
740
- /** Brand */
741
602
  'bq-ui--brand': 'var(--bq-brand)',
742
603
  'bq-ui--brand-alt': 'var(--bq-brand-light)',
743
- /** Success */
744
604
  'bq-ui--success': 'var(--bq-success)',
745
605
  'bq-ui--success-alt': 'var(--bq-success-light)',
746
- /** Warning */
747
606
  'bq-ui--warning': 'var(--bq-warning)',
748
607
  'bq-ui--warning-alt': 'var(--bq-warning-light)',
749
- /** Danger */
750
608
  'bq-ui--danger': 'var(--bq-danger)',
751
609
  'bq-ui--danger-alt': 'var(--bq-danger-light)',
752
- /** Info */
753
610
  'bq-ui--info': 'var(--bq-brand)',
754
611
  'bq-ui--info-alt': 'var(--bq-brand-light)',
755
- /* -------------------------------------------------------------------------- */
756
- /* States: */
757
- /* -------------------------------------------------------------------------- */
758
- // !Note: these tokens are only used as base to create the states colors
759
612
  'bq-hover': '#bcbfc5',
760
613
  'bq-active': '#444546'
761
614
  };
@@ -763,7 +616,6 @@ const DefaultLightTheme = {
763
616
  const DefaultRootTheme = {
764
617
  'bq-white': '#ffffff',
765
618
  'bq-black': '#060708',
766
- // Neutrals
767
619
  'bq-neutral-50': 'var(--bq-grey-50)',
768
620
  'bq-neutral-100': 'var(--bq-grey-100)',
769
621
  'bq-neutral-200': 'var(--bq-grey-200)',
@@ -776,33 +628,25 @@ const DefaultRootTheme = {
776
628
  'bq-neutral-900': 'var(--bq-grey-900)',
777
629
  'bq-neutral-950': 'var(--bq-grey-950)',
778
630
  'bq-neutral-1000': 'var(--bq-grey-1000)',
779
- // Brand
780
631
  'bq-brand-light': 'var(--bq-iris-100)',
781
632
  'bq-brand': 'var(--bq-iris-600)',
782
633
  'bq-brand-dark': 'var(--bq-iris-1000)',
783
- // Accent
784
634
  'bq-accent-light': 'var(--bq-purple-100)',
785
635
  'bq-accent': 'var(--bq-purple-600)',
786
636
  'bq-accent-dark': 'var(--bq-purple-1000)',
787
- // Success
788
637
  'bq-success-light': 'var(--bq-teal-100)',
789
638
  'bq-success': 'var(--bq-teal-600)',
790
639
  'bq-success-dark': 'var(--bq-teal-1000)',
791
- // Danger
792
640
  'bq-danger-light': 'var(--bq-red-100)',
793
641
  'bq-danger': 'var(--bq-red-600)',
794
642
  'bq-danger-dark': 'var(--bq-red-1000)',
795
- // Warning
796
643
  'bq-warning-light': 'var(--bq-gold-100)',
797
644
  'bq-warning': 'var(--bq-gold-600)',
798
645
  'bq-warning-dark': 'var(--bq-gold-1000)',
799
- // Info
800
646
  'bq-info-light': 'var(--bq-iris-100)',
801
647
  'bq-info': 'var(--bq-iris-600)',
802
648
  'bq-info-dark': 'var(--bq-iris-1000)',
803
- // Focus
804
649
  'bq-focus': 'var(--bq-iris-600)',
805
- // Data
806
650
  'bq-data-01': 'var(--bq-brand)',
807
651
  'bq-data-02': 'var(--bq-purple-600)',
808
652
  'bq-data-03': 'var(--bq-magenta-600)',
@@ -815,47 +659,28 @@ const DefaultRootTheme = {
815
659
  'bq-data-10': 'var(--bq-grey-600)',
816
660
  'bq-data-11': 'var(--bq-black)',
817
661
  'bq-data-12': 'var(--bq-white)',
818
- // Border Radius
819
662
  'bq-radius--none': '0',
820
- // 0px
821
663
  'bq-radius--xs2': '0.125rem',
822
- // 2px
823
664
  'bq-radius--xs': '0.25rem',
824
- // 4px
825
665
  'bq-radius--s': '0.5rem',
826
- // 8px
827
666
  'bq-radius--m': '0.75rem',
828
- // 12px
829
667
  'bq-radius--l': '1.5rem',
830
- // 24px
831
668
  'bq-radius--full': '9999px',
832
- // Box Shadow
833
669
  'bq-box-shadow--xs': '0 2px 0 rgba(0, 0, 0, 0.016)',
834
670
  'bq-box-shadow--s': '0 8px 24px rgba(0, 0, 0, 0.04)',
835
671
  'bq-box-shadow--m': '0 10px 48px -16px rgba(0, 0, 0, 0.12)',
836
672
  'bq-box-shadow--l': '0 20px 58px -16px rgba(0, 0, 0, 0.16)',
837
- // Fonts
838
673
  'bq-font-family': "'Outfit', sans-serif",
839
674
  'bq-font-size--xs': '0.75rem',
840
- // 12px
841
675
  'bq-font-size--s': '0.875rem',
842
- // 14px
843
676
  'bq-font-size--m': '1rem',
844
- // 16px
845
677
  'bq-font-size--l': '1.125rem',
846
- // 18px
847
678
  'bq-font-size--xl': '1.5rem',
848
- // 24px
849
679
  'bq-font-size--xxl': '2rem',
850
- // 32px
851
680
  'bq-font-size--xxl2': '2.5rem',
852
- // 40px
853
681
  'bq-font-size--xxl3': '3rem',
854
- // 48px
855
682
  'bq-font-size--xxl4': '3.5rem',
856
- // 56px
857
683
  'bq-font-size--xxl5': '4rem',
858
- // 64px
859
684
  'bq-font-weight--thin': '100',
860
685
  'bq-font-weight--light': '300',
861
686
  'bq-font-weight--regular': '400',
@@ -865,34 +690,20 @@ const DefaultRootTheme = {
865
690
  'bq-font-line-height--small': '1.2',
866
691
  'bq-font-line-height--regular': '1.5',
867
692
  'bq-font-line-height--large': '1.5',
868
- // Spacing
869
693
  'bq-spacing-xs3': '0.125rem',
870
- // 2px
871
694
  'bq-spacing-xs2': '0.25rem',
872
- // 4px
873
695
  'bq-spacing-xs': '0.5rem',
874
- // 8px
875
696
  'bq-spacing-s': '0.75rem',
876
- // 12px
877
697
  'bq-spacing-m': '1rem',
878
- // 16px
879
698
  'bq-spacing-l': '1.5rem',
880
- // 24px
881
699
  'bq-spacing-xl': '2rem',
882
- // 32px
883
700
  'bq-spacing-xxl': '2.5rem',
884
- // 40px
885
701
  'bq-spacing-xxl2': '3.5rem',
886
- // 56px
887
702
  'bq-spacing-xxl3': '4rem',
888
- // 64px
889
- 'bq-spacing-xxl4': '4.5rem' // 72px
703
+ 'bq-spacing-xxl4': '4.5rem'
890
704
  };
891
705
 
892
706
  const EndavaDarkTheme = {
893
- /* -------------------------------------------------------------------------- */
894
- /* Background colors */
895
- /* -------------------------------------------------------------------------- */
896
707
  'bq-background--primary': 'var(--bq-neutral-1000)',
897
708
  'bq-background--secondary': 'var(--bq-neutral-900)',
898
709
  'bq-background--tertiary': 'var(--bq-neutral-800)',
@@ -900,103 +711,55 @@ const EndavaDarkTheme = {
900
711
  'bq-background--inverse': 'var(--bq-neutral-600)',
901
712
  'bq-background--brand': 'var(--bq-brand)',
902
713
  'bq-background--overlay': 'var(--bq-neutral-900)',
903
- // with opacity: 60%
904
- /* -------------------------------------------------------------------------- */
905
- /* Icons colors */
906
- /* -------------------------------------------------------------------------- */
907
- /** Primary */
908
714
  'bq-icon--primary': 'var(--bq-neutral-100)',
909
715
  'bq-icon--alt': 'var(--bq-white)',
910
- /** Secondary */
911
716
  'bq-icon--secondary': 'var(--bq-neutral-400)',
912
- /** Inverse */
913
717
  'bq-icon--inverse': 'var(--bq-neutral-800)',
914
- /** Brand */
915
718
  'bq-icon--brand': 'var(--bq-brand)',
916
- /** Feedback */
917
719
  'bq-icon--info': 'var(--bq-info)',
918
720
  'bq-icon--success': 'var(--bq-success)',
919
721
  'bq-icon--warning': 'var(--bq-warning)',
920
722
  'bq-icon--danger': 'var(--bq-danger)',
921
- /* -------------------------------------------------------------------------- */
922
- /* Stroke colors */
923
- /* -------------------------------------------------------------------------- */
924
- /** Primary */
925
723
  'bq-stroke--primary': 'var(--bq-neutral-900)',
926
724
  'bq-stroke--alt': 'var(--bq-neutral-1000)',
927
- /** Secondary */
928
725
  'bq-stroke--secondary': 'var(--bq-neutral-700)',
929
- /** Tertiary */
930
726
  'bq-stroke--tertiary': 'var(--bq-neutral-400)',
931
- /** Inverse */
932
727
  'bq-stroke--inverse': 'var(--bq-neutral-950)',
933
- /** Brand */
934
728
  'bq-stroke--brand': 'var(--bq-brand)',
935
729
  'bq-stroke--brand-alt': 'var(--bq-brand-dark)',
936
- /** Success */
937
730
  'bq-stroke--success': 'var(--bq-success)',
938
- /** Warning */
939
731
  'bq-stroke--warning': 'var(--bq-warning)',
940
- /** Danger */
941
732
  'bq-stroke--danger': 'var(--bq-danger)',
942
- /** Info */
943
733
  'bq-stroke--info': 'var(--bq-info)',
944
- /* -------------------------------------------------------------------------- */
945
- /* Text colors */
946
- /* -------------------------------------------------------------------------- */
947
- /** Primary */
948
734
  'bq-text--primary': 'var(--bq-neutral-100)',
949
735
  'bq-text--alt': 'var(--bq-neutral-white)',
950
- /** Secondary */
951
736
  'bq-text--secondary': 'var(--bq-neutral-400)',
952
- /** Inverse */
953
737
  'bq-text--inverse': 'var(--bq-neutral-800)',
954
- /** Brand */
955
738
  'bq-text--brand': 'var(--bq-brand)',
956
- /** Feedback */
957
739
  'bq-text--info': 'var(--bq-info)',
958
740
  'bq-text--success': 'var(--bq-success)',
959
741
  'bq-text--warning': 'var(--bq-warning)',
960
742
  'bq-text--danger': 'var(--bq-danger)',
961
- /* -------------------------------------------------------------------------- */
962
- /* UI colors */
963
- /* -------------------------------------------------------------------------- */
964
- /** Primary */
965
743
  'bq-ui--primary': 'var(--bq-neutral-900)',
966
744
  'bq-ui--alt': 'var(--bq-neutral-950)',
967
- /** Secondary */
968
745
  'bq-ui--secondary': 'var(--bq-neutral-800)',
969
- /** Tertiary */
970
746
  'bq-ui--tertiary': 'var(--bq-neutral-700)',
971
- /** Inverse */
972
747
  'bq-ui--inverse': 'var(--bq-neutral-100)',
973
- /** Brand */
974
748
  'bq-ui--brand': 'var(--bq-brand)',
975
749
  'bq-ui--brand-alt': 'var(--bq-brand-dark)',
976
- /** Success */
977
750
  'bq-ui--success': 'var(--bq-success)',
978
751
  'bq-ui--success-alt': 'var(--bq-success-dark)',
979
- /** Warning */
980
752
  'bq-ui--warning': 'var(--bq-warning)',
981
753
  'bq-ui--warning-alt': 'var(--bq-warning-dark)',
982
- /** Danger */
983
754
  'bq-ui--danger': 'var(--bq-danger)',
984
755
  'bq-ui--danger-alt': 'var(--bq-danger-dark)',
985
- /** Info */
986
756
  'bq-ui--info': 'var(--bq-info)',
987
757
  'bq-ui--info-alt': 'var(--bq-info-dark)',
988
- /* -------------------------------------------------------------------------- */
989
- /* States: */
990
- /* -------------------------------------------------------------------------- */
991
- // !Note: these tokens are only used as base to create the states colors
992
758
  'bq-hover': '#444546',
993
759
  'bq-active': '#1F2026'
994
760
  };
995
761
 
996
762
  const EndavaLightTheme = {
997
- /* -------------------------------------------------------------------------- */
998
- /* Background colors */
999
- /* -------------------------------------------------------------------------- */
1000
763
  'bq-background--primary': 'var(--bq-white)',
1001
764
  'bq-background--secondary': 'var(--bq-neutral-100)',
1002
765
  'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -1004,105 +767,58 @@ const EndavaLightTheme = {
1004
767
  'bq-background--inverse': 'var(--bq-neutral-900)',
1005
768
  'bq-background--brand': 'var(--bq-brand)',
1006
769
  'bq-background--overlay': 'var(--bq-neutral-900)',
1007
- // with opacity: 60%
1008
- /* -------------------------------------------------------------------------- */
1009
- /* Icons colors */
1010
- /* -------------------------------------------------------------------------- */
1011
- /** Primary */
1012
770
  'bq-icon--primary': 'var(--bq-neutral-800)',
1013
771
  'bq-icon--alt': 'var(--bq-white)',
1014
- /** Secondary */
1015
772
  'bq-icon--secondary': 'var(--bq-neutral-600)',
1016
- /** Inverse */
1017
773
  'bq-icon--inverse': 'var(--bq-neutral-50)',
1018
- /** Brand */
1019
774
  'bq-icon--brand': 'var(--bq-brand)',
1020
- /** Feedback */
1021
775
  'bq-icon--info': 'var(--bq-info)',
1022
776
  'bq-icon--success': 'var(--bq-success)',
1023
777
  'bq-icon--warning': 'var(--bq-warning)',
1024
778
  'bq-icon--danger': 'var(--bq-danger)',
1025
- /* -------------------------------------------------------------------------- */
1026
- /* Stroke colors */
1027
- /* -------------------------------------------------------------------------- */
1028
- /** Primary */
1029
779
  'bq-stroke--primary': 'var(--bq-neutral-200)',
1030
780
  'bq-stroke--alt': 'var(--bq-neutral-50)',
1031
- /** Secondary */
1032
781
  'bq-stroke--secondary': 'var(--bq-neutral-600)',
1033
- /** Tertiary */
1034
782
  'bq-stroke--tertiary': 'var(--bq-neutral-900)',
1035
- /** Inverse */
1036
783
  'bq-stroke--inverse': 'var(--bq-white)',
1037
- /** Brand */
1038
784
  'bq-stroke--brand': 'var(--bq-brand)',
1039
785
  'bq-stroke--brand-alt': 'var(--bq-brand-light)',
1040
- /** Success */
1041
786
  'bq-stroke--success': 'var(--bq-success)',
1042
- /** Warning */
1043
787
  'bq-stroke--warning': 'var(--bq-warning)',
1044
- /** Danger */
1045
788
  'bq-stroke--danger': 'var(--bq-danger)',
1046
- /** Info */
1047
789
  'bq-stroke--info': 'var(--bq-info)',
1048
- /* -------------------------------------------------------------------------- */
1049
- /* Text colors */
1050
- /* -------------------------------------------------------------------------- */
1051
- /** Primary */
1052
790
  'bq-text--primary': 'var(--bq-neutral-800)',
1053
791
  'bq-text--alt': 'var(--bq-white)',
1054
- /** Secondary */
1055
792
  'bq-text--secondary': 'var(--bq-neutral-600)',
1056
- /** Inverse */
1057
793
  'bq-text--inverse': 'var(--bq-neutral-50)',
1058
- /** Brand */
1059
794
  'bq-text--brand': 'var(--bq-brand)',
1060
- /** Feedback */
1061
795
  'bq-text--info': 'var(--bq-info)',
1062
796
  'bq-text--success': 'var(--bq-success)',
1063
797
  'bq-text--warning': 'var(--bq-warning)',
1064
798
  'bq-text--danger': 'var(--bq-danger)',
1065
- /* -------------------------------------------------------------------------- */
1066
- /* UI colors */
1067
- /* -------------------------------------------------------------------------- */
1068
- /** Primary */
1069
799
  'bq-ui--primary': 'var(--bq-white)',
1070
800
  'bq-ui--alt': 'var(--bq-neutral-50)',
1071
- /** Secondary */
1072
801
  'bq-ui--secondary': 'var(--bq-neutral-200)',
1073
- /** Tertiary */
1074
802
  'bq-ui--tertiary': 'var(--bq-neutral-500)',
1075
- /** Inverse */
1076
803
  'bq-ui--inverse': 'var(--bq-neutral-900)',
1077
- /** Brand */
1078
804
  'bq-ui--brand': 'var(--bq-brand)',
1079
805
  'bq-ui--brand-alt': 'var(--bq-brand-light)',
1080
- /** Success */
1081
806
  'bq-ui--success': 'var(--bq-success)',
1082
807
  'bq-ui--success-alt': 'var(--bq-success-light)',
1083
- /** Warning */
1084
808
  'bq-ui--warning': 'var(--bq-warning)',
1085
809
  'bq-ui--warning-alt': 'var(--bq-warning-light)',
1086
- /** Danger */
1087
810
  'bq-ui--danger': 'var(--bq-danger)',
1088
811
  'bq-ui--danger-alt': 'var(--bq-danger-light)',
1089
- /** Info */
1090
812
  'bq-ui--info': 'var(--bq-info)',
1091
813
  'bq-ui--info-alt': 'var(--bq-info-light)',
1092
- /* -------------------------------------------------------------------------- */
1093
- /* States: */
1094
- /* -------------------------------------------------------------------------- */
1095
- // !Note: these tokens are only used as base to create the states colors
1096
814
  'bq-hover': '#444546',
1097
815
  'bq-active': '#1F2026'
1098
816
  };
1099
817
 
1100
818
  const EndavaRootTheme = {
1101
- // Fonts
1102
819
  'bq-font-family': "'Poppins', sans-serif",
1103
820
  'bq-white': '#fafbfb',
1104
821
  'bq-black': '#030406',
1105
- // Neutrals
1106
822
  'bq-neutral-50': 'var(--bq-endava-grey-50)',
1107
823
  'bq-neutral-100': 'var(--bq-endava-grey-100)',
1108
824
  'bq-neutral-200': 'var(--bq-endava-grey-200)',
@@ -1115,33 +831,25 @@ const EndavaRootTheme = {
1115
831
  'bq-neutral-900': 'var(--bq-endava-grey-900)',
1116
832
  'bq-neutral-950': 'var(--bq-endava-grey-950)',
1117
833
  'bq-neutral-1000': 'var(--bq-endava-grey-1000)',
1118
- // Brand
1119
834
  'bq-brand-light': 'var(--bq-endava-orange-100)',
1120
835
  'bq-brand': 'var(--bq-endava-orange-600)',
1121
836
  'bq-brand-dark': 'var(--bq-endava-orange-1000)',
1122
- // Accent
1123
837
  'bq-accent-light': 'var(--bq-endava-orange-100)',
1124
838
  'bq-accent': 'var(--bq-endava-orange-600)',
1125
839
  'bq-accent-dark': 'var(--bq-endava-orange-1000)',
1126
- // Success
1127
840
  'bq-success-light': 'var(--bq-green-100)',
1128
841
  'bq-success': 'var(--bq-green-600)',
1129
842
  'bq-success-dark': 'var(--bq-green-1000)',
1130
- // Danger
1131
843
  'bq-danger-light': 'var(--bq-corai-100)',
1132
844
  'bq-danger': 'var(--bq-corai-600)',
1133
845
  'bq-danger-dark': 'var(--bq-corai-1000)',
1134
- // Warning
1135
846
  'bq-warning-light': 'var(--bq-yellow-100)',
1136
847
  'bq-warning': 'var(--bq-yellow-600)',
1137
848
  'bq-warning-dark': 'var(--bq-yellow-1000)',
1138
- // Info
1139
849
  'bq-info-light': 'var(--bq-blue-100)',
1140
850
  'bq-info': 'var(--bq-blue-600)',
1141
851
  'bq-info-dark': 'var(--bq-blue-1000)',
1142
- // Focus
1143
852
  'bq-focus': 'var(--bq-endava-orange-600)',
1144
- // Data
1145
853
  'bq-data-01': 'var(--bq-brand)',
1146
854
  'bq-data-02': '#af0cd8',
1147
855
  'bq-data-03': '#0ca8d8',
@@ -1156,32 +864,23 @@ const EndavaRootTheme = {
1156
864
  'bq-data-12': 'var(--bq-white)'
1157
865
  };
1158
866
 
1159
- /* -------------------------------------------------------------------------- */
1160
- /* BEEQ's opinionated reset for TailwindCSS */
1161
- /* -------------------------------------------------------------------------- */
1162
-
1163
867
  const reset = {
1164
- /* Box sizing rules */
1165
868
  '*, *::before, *::after': {
1166
869
  'box-sizing': 'border-box'
1167
870
  },
1168
- /* Remove default margin and inherit font styles */
1169
871
  '*': {
1170
872
  margin: '0',
1171
873
  font: 'inherit'
1172
874
  },
1173
- /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
1174
875
  'ul[role="list"], ol[role="list"]': {
1175
876
  'list-style-type': 'none'
1176
877
  },
1177
- /* Set core root defaults */
1178
878
  html: {
1179
879
  'font-size': 'var(--bq-font-size--m)'
1180
880
  },
1181
881
  'html:focus-within': {
1182
882
  'scroll-behavior': 'smooth'
1183
883
  },
1184
- /* Set core body defaults */
1185
884
  body: {
1186
885
  '-webkit-font-smoothing': 'antialiased',
1187
886
  '-moz-osx-font-smoothing': 'grayscale',
@@ -1192,24 +891,19 @@ const reset = {
1192
891
  'min-height': '100vh',
1193
892
  'text-rendering': 'optimizeSpeed'
1194
893
  },
1195
- /* A elements that don't have a class get default styles */
1196
894
  'a:not([class])': {
1197
895
  'text-decoration-skip-ink': 'auto'
1198
896
  },
1199
- /* Make images easier to work with */
1200
897
  'img, picture, video, canvas, svg': {
1201
898
  'max-width': '100%',
1202
899
  display: 'block'
1203
900
  },
1204
- /* Inherit fonts for inputs and buttons */
1205
901
  'input, button, select, textarea': {
1206
902
  font: 'inherit'
1207
903
  },
1208
- /* Avoid text overflows */
1209
904
  'p, h1, h2, h3, h4, h5, h6': {
1210
905
  'overflow-wrap': 'break-word'
1211
906
  },
1212
- /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
1213
907
  '@media (prefers-reduced-motion: reduce)': {
1214
908
  'html:focus-within': {
1215
909
  'scroll-behavior': 'auto'
@@ -1312,19 +1006,12 @@ const TYPOGRAPHY_DEFAULT = {
1312
1006
  }
1313
1007
  };
1314
1008
 
1315
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1316
1009
  var index = {
1317
1010
  theme: {
1318
1011
  colors: {
1319
1012
  current: 'currentColor',
1320
1013
  transparent: 'transparent',
1321
- /* -------------------------------------------------------------------------- */
1322
- /* Default Theme (Declarative) */
1323
- /* -------------------------------------------------------------------------- */
1324
1014
  ...DECLARATIVE_COLORS,
1325
- /* -------------------------------------------------------------------------- */
1326
- /* Extended colors (Primitive) */
1327
- /* -------------------------------------------------------------------------- */
1328
1015
  ...PRIMITIVE_COLORS
1329
1016
  },
1330
1017
  borderRadius: {
@@ -1374,7 +1061,6 @@ var index = {
1374
1061
  },
1375
1062
  extend: {
1376
1063
  height: {
1377
- // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units
1378
1064
  'dynamic-vh': '100dvh'
1379
1065
  },
1380
1066
  content: {
@@ -1402,61 +1088,41 @@ var index = {
1402
1088
  theme
1403
1089
  }) {
1404
1090
  addBase({
1405
- // CSS variables
1406
1091
  ':root, ::backdrop': {
1407
1092
  ...CSS_COLORS
1408
1093
  },
1409
- // CSS reset
1410
1094
  ...reset
1411
1095
  });
1412
1096
  addComponents({
1413
- /**
1414
- * Common `FOCUS` state that should be used within `focus-visible` Tailwind CSS utility
1415
- * Examples of usage:
1416
- *
1417
- * class="focus-visible:focus"
1418
- *
1419
- * @apply focus-visible:focus
1420
- *
1421
- * &:focus-visible {
1422
- * @apply focus;
1423
- * }
1424
- */
1425
1097
  '.focus': {
1426
1098
  outline: `var(--bq-ring-width, 2px) solid var(--bq-ring-color-focus, ${String(theme('colors.focus'))})`,
1427
1099
  outlineOffset: 'var(--bq-ring-offset-width, 1px)'
1428
1100
  }
1429
1101
  });
1430
1102
  matchUtilities({
1431
- // Background `hover` state blend color
1432
1103
  'bg-hover': value => blendColor({
1433
1104
  color: value,
1434
1105
  base: 'var(--bq-hover)'
1435
1106
  }),
1436
- // Background `active` state blend color
1437
1107
  'bg-active': value => blendColor({
1438
1108
  color: value,
1439
1109
  base: 'var(--bq-active)'
1440
1110
  }),
1441
- // Border `hover` state blend color
1442
1111
  'border-hover': value => blendColor({
1443
1112
  color: value,
1444
1113
  base: 'var(--bq-hover)',
1445
1114
  property: 'border-color'
1446
1115
  }),
1447
- // Border `active` state blend color
1448
1116
  'border-active': value => blendColor({
1449
1117
  color: value,
1450
1118
  base: 'var(--bq-active)',
1451
1119
  property: 'border-color'
1452
1120
  }),
1453
- // Text `hover` state blend color
1454
1121
  'text-hover': value => blendColor({
1455
1122
  color: value,
1456
1123
  base: 'var(--bq-hover)',
1457
1124
  property: 'color'
1458
1125
  }),
1459
- // Text `active` state blend color
1460
1126
  'text-active': value => blendColor({
1461
1127
  color: value,
1462
1128
  base: 'var(--bq-active)',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@beeq/tailwindcss",
3
- "version": "1.1.0",
3
+ "version": "1.2.0",
4
4
  "license": "Apache-2.0",
5
5
  "description": "BEEQ's opinionated TailwindCSS configuration",
6
6
  "main": "./index.cjs.js",
@@ -16,7 +16,6 @@
16
16
  },
17
17
  "publishConfig": {
18
18
  "access": "public",
19
- "provenance": true,
20
19
  "registry": "https://registry.npmjs.org"
21
20
  },
22
21
  "exports": {