@beeq/tailwindcss 1.1.0 → 1.3.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 (10) hide show
  1. package/index.cjs.js +17 -16
  2. package/index.esm.d.ts +2 -0
  3. package/index.esm.js +18 -351
  4. package/package.json +1 -2
  5. package/src/index.d.ts +1 -0
  6. package/src/theme/colors/declarative.d.ts +1 -0
  7. package/src/theme/default/dark.d.ts +4 -4
  8. package/src/theme/default/light.d.ts +3 -3
  9. package/src/theme/endava/dark.d.ts +4 -4
  10. package/src/theme/endava/light.d.ts +5 -5
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)',
@@ -300,21 +258,17 @@ const DECLARATIVE_COLORS = {
300
258
  tertiary: 'var(--bq-stroke--tertiary)',
301
259
  inverse: 'var(--bq-stroke--inverse)',
302
260
  brand: 'var(--bq-stroke--brand)',
261
+ alt: 'var(--bq-stroke--alt)',
303
262
  success: 'var(--bq-stroke--success)',
304
263
  warning: 'var(--bq-stroke--warning)',
305
264
  danger: 'var(--bq-stroke--danger)'
306
265
  },
307
266
  text: {
308
- /** Primary */
309
267
  primary: 'var(--bq-text--primary)',
310
268
  alt: 'var(--bq-text--alt)',
311
- /** Secondary */
312
269
  secondary: 'var(--bq-text--secondary)',
313
- /** Inverse */
314
270
  inverse: 'var(--bq-text--inverse)',
315
- /** Brand */
316
271
  brand: 'var(--bq-text--brand)',
317
- /** Feedback */
318
272
  info: 'var(--bq-text--info)',
319
273
  success: 'var(--bq-text--success)',
320
274
  warning: 'var(--bq-text--warning)',
@@ -337,10 +291,6 @@ const DECLARATIVE_COLORS = {
337
291
  }
338
292
  };
339
293
 
340
- /* -------------------------------------------------------------------------- */
341
- /* BEEQ primitive colors for Tailwind config */
342
- /* -------------------------------------------------------------------------- */
343
-
344
294
  const PRIMITIVE_COLORS = {
345
295
  blue: {
346
296
  100: 'var(--bq-blue-100)',
@@ -555,9 +505,6 @@ const PRIMITIVE_COLORS = {
555
505
  };
556
506
 
557
507
  const DefaultDarkTheme = {
558
- /* -------------------------------------------------------------------------- */
559
- /* Background colors */
560
- /* -------------------------------------------------------------------------- */
561
508
  'bq-background--primary': 'var(--bq-neutral-1000)',
562
509
  'bq-background--secondary': 'var(--bq-neutral-950)',
563
510
  'bq-background--tertiary': 'var(--bq-neutral-800)',
@@ -565,102 +512,54 @@ const DefaultDarkTheme = {
565
512
  'bq-background--inverse': 'var(--bq-neutral-600)',
566
513
  'bq-background--brand': 'var(--bq-brand)',
567
514
  'bq-background--overlay': 'var(--bq-neutral-900)',
568
- // with opacity: 60%
569
- /* -------------------------------------------------------------------------- */
570
- /* Icons colors */
571
- /* -------------------------------------------------------------------------- */
572
- /** Primary */
573
515
  'bq-icon--primary': 'var(--bq-neutral-100)',
574
- '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 */
519
+ 'bq-icon--alt': 'var(--bq-white)',
582
520
  'bq-icon--info': 'var(--bq-brand)',
583
521
  'bq-icon--success': 'var(--bq-success)',
584
522
  'bq-icon--warning': 'var(--bq-warning)',
585
523
  'bq-icon--danger': 'var(--bq-danger)',
586
- /* -------------------------------------------------------------------------- */
587
- /* Stroke colors */
588
- /* -------------------------------------------------------------------------- */
589
- /** Primary */
590
524
  'bq-stroke--primary': 'var(--bq-neutral-900)',
591
- '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 */
529
+ 'bq-stroke--alt': 'var(--bq-neutral-1000)',
601
530
  'bq-stroke--success': 'var(--bq-success)',
602
- /** Warning */
603
531
  'bq-stroke--warning': 'var(--bq-warning)',
604
- /** Danger */
605
532
  'bq-stroke--danger': 'var(--bq-danger)',
606
- /** Info */
607
533
  'bq-stroke--info': 'var(--bq-brand)',
608
- /* -------------------------------------------------------------------------- */
609
- /* Text colors */
610
- /* -------------------------------------------------------------------------- */
611
- /** Primary */
612
534
  'bq-text--primary': 'var(--bq-neutral-100)',
613
- '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 */
538
+ 'bq-text--alt': 'var(--bq-white)',
621
539
  'bq-text--info': 'var(--bq-brand)',
622
540
  'bq-text--success': 'var(--bq-success)',
623
541
  'bq-text--warning': 'var(--bq-warning)',
624
542
  'bq-text--danger': 'var(--bq-danger)',
625
- /* -------------------------------------------------------------------------- */
626
- /* UI colors */
627
- /* -------------------------------------------------------------------------- */
628
- /** Primary */
629
543
  'bq-ui--primary': 'var(--bq-neutral-900)',
630
- '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 */
549
+ 'bq-ui--alt': 'var(--bq-neutral-950)',
641
550
  'bq-ui--success': 'var(--bq-success)',
642
551
  'bq-ui--success-alt': 'var(--bq-success-dark)',
643
- /** Warning */
644
552
  'bq-ui--warning': 'var(--bq-warning)',
645
553
  'bq-ui--warning-alt': 'var(--bq-warning-dark)',
646
- /** Danger */
647
554
  'bq-ui--danger': 'var(--bq-danger)',
648
555
  'bq-ui--danger-alt': 'var(--bq-danger-dark)',
649
- /** Info */
650
556
  'bq-ui--info': 'var(--bq-brand)',
651
557
  '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
558
  'bq-hover': '#444546',
657
559
  'bq-active': '#1F2026'
658
560
  };
659
561
 
660
562
  const DefaultLightTheme = {
661
- /* -------------------------------------------------------------------------- */
662
- /* Background colors */
663
- /* -------------------------------------------------------------------------- */
664
563
  'bq-background--primary': 'var(--bq-white)',
665
564
  'bq-background--secondary': 'var(--bq-neutral-100)',
666
565
  'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -668,94 +567,49 @@ const DefaultLightTheme = {
668
567
  'bq-background--inverse': 'var(--bq-neutral-900)',
669
568
  'bq-background--brand': 'var(--bq-brand)',
670
569
  'bq-background--overlay': 'var(--bq-neutral-900)',
671
- // with opacity: 60%
672
- /* -------------------------------------------------------------------------- */
673
- /* Icons colors */
674
- /* -------------------------------------------------------------------------- */
675
- /** Primary */
676
570
  'bq-icon--primary': 'var(--bq-neutral-800)',
677
571
  'bq-icon--alt': 'var(--bq-white)',
678
- /** Secondary */
679
572
  'bq-icon--secondary': 'var(--bq-neutral-600)',
680
- /** Inverse */
681
573
  'bq-icon--inverse': 'var(--bq-neutral-50)',
682
- /** Brand */
683
574
  'bq-icon--brand': 'var(--bq-brand)',
684
- /** Feedback */
685
575
  'bq-icon--info': 'var(--bq-brand)',
686
576
  'bq-icon--success': 'var(--bq-success)',
687
577
  'bq-icon--warning': 'var(--bq-warning)',
688
578
  'bq-icon--danger': 'var(--bq-danger)',
689
- /* -------------------------------------------------------------------------- */
690
- /* Stroke colors */
691
- /* -------------------------------------------------------------------------- */
692
- /** Primary */
693
579
  'bq-stroke--primary': 'var(--bq-neutral-200)',
694
- '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 */
584
+ 'bq-stroke--alt': 'var(--bq-neutral-50)',
704
585
  'bq-stroke--success': 'var(--bq-success)',
705
- /** Warning */
706
586
  'bq-stroke--warning': 'var(--bq-warning)',
707
- /** Danger */
708
587
  'bq-stroke--danger': 'var(--bq-danger)',
709
- /** Info */
710
588
  'bq-stroke--info': 'var(--bq-brand)',
711
- /* -------------------------------------------------------------------------- */
712
- /* Text colors */
713
- /* -------------------------------------------------------------------------- */
714
- /** Primary */
715
589
  'bq-text--primary': 'var(--bq-neutral-800)',
716
- '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 */
593
+ 'bq-text--alt': 'var(--bq-white)',
724
594
  'bq-text--info': 'var(--bq-brand)',
725
595
  'bq-text--success': 'var(--bq-success)',
726
596
  'bq-text--warning': 'var(--bq-warning)',
727
597
  'bq-text--danger': 'var(--bq-danger)',
728
- /* -------------------------------------------------------------------------- */
729
- /* UI colors */
730
- /* -------------------------------------------------------------------------- */
731
- /** Primary */
732
598
  'bq-ui--primary': 'var(--bq-white)',
733
- '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 */
604
+ 'bq-ui--alt': 'var(--bq-neutral-50)',
744
605
  'bq-ui--success': 'var(--bq-success)',
745
606
  'bq-ui--success-alt': 'var(--bq-success-light)',
746
- /** Warning */
747
607
  'bq-ui--warning': 'var(--bq-warning)',
748
608
  'bq-ui--warning-alt': 'var(--bq-warning-light)',
749
- /** Danger */
750
609
  'bq-ui--danger': 'var(--bq-danger)',
751
610
  'bq-ui--danger-alt': 'var(--bq-danger-light)',
752
- /** Info */
753
611
  'bq-ui--info': 'var(--bq-brand)',
754
612
  '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
613
  'bq-hover': '#bcbfc5',
760
614
  'bq-active': '#444546'
761
615
  };
@@ -763,7 +617,6 @@ const DefaultLightTheme = {
763
617
  const DefaultRootTheme = {
764
618
  'bq-white': '#ffffff',
765
619
  'bq-black': '#060708',
766
- // Neutrals
767
620
  'bq-neutral-50': 'var(--bq-grey-50)',
768
621
  'bq-neutral-100': 'var(--bq-grey-100)',
769
622
  'bq-neutral-200': 'var(--bq-grey-200)',
@@ -776,33 +629,25 @@ const DefaultRootTheme = {
776
629
  'bq-neutral-900': 'var(--bq-grey-900)',
777
630
  'bq-neutral-950': 'var(--bq-grey-950)',
778
631
  'bq-neutral-1000': 'var(--bq-grey-1000)',
779
- // Brand
780
632
  'bq-brand-light': 'var(--bq-iris-100)',
781
633
  'bq-brand': 'var(--bq-iris-600)',
782
634
  'bq-brand-dark': 'var(--bq-iris-1000)',
783
- // Accent
784
635
  'bq-accent-light': 'var(--bq-purple-100)',
785
636
  'bq-accent': 'var(--bq-purple-600)',
786
637
  'bq-accent-dark': 'var(--bq-purple-1000)',
787
- // Success
788
638
  'bq-success-light': 'var(--bq-teal-100)',
789
639
  'bq-success': 'var(--bq-teal-600)',
790
640
  'bq-success-dark': 'var(--bq-teal-1000)',
791
- // Danger
792
641
  'bq-danger-light': 'var(--bq-red-100)',
793
642
  'bq-danger': 'var(--bq-red-600)',
794
643
  'bq-danger-dark': 'var(--bq-red-1000)',
795
- // Warning
796
644
  'bq-warning-light': 'var(--bq-gold-100)',
797
645
  'bq-warning': 'var(--bq-gold-600)',
798
646
  'bq-warning-dark': 'var(--bq-gold-1000)',
799
- // Info
800
647
  'bq-info-light': 'var(--bq-iris-100)',
801
648
  'bq-info': 'var(--bq-iris-600)',
802
649
  'bq-info-dark': 'var(--bq-iris-1000)',
803
- // Focus
804
650
  'bq-focus': 'var(--bq-iris-600)',
805
- // Data
806
651
  'bq-data-01': 'var(--bq-brand)',
807
652
  'bq-data-02': 'var(--bq-purple-600)',
808
653
  'bq-data-03': 'var(--bq-magenta-600)',
@@ -815,47 +660,28 @@ const DefaultRootTheme = {
815
660
  'bq-data-10': 'var(--bq-grey-600)',
816
661
  'bq-data-11': 'var(--bq-black)',
817
662
  'bq-data-12': 'var(--bq-white)',
818
- // Border Radius
819
663
  'bq-radius--none': '0',
820
- // 0px
821
664
  'bq-radius--xs2': '0.125rem',
822
- // 2px
823
665
  'bq-radius--xs': '0.25rem',
824
- // 4px
825
666
  'bq-radius--s': '0.5rem',
826
- // 8px
827
667
  'bq-radius--m': '0.75rem',
828
- // 12px
829
668
  'bq-radius--l': '1.5rem',
830
- // 24px
831
669
  'bq-radius--full': '9999px',
832
- // Box Shadow
833
670
  'bq-box-shadow--xs': '0 2px 0 rgba(0, 0, 0, 0.016)',
834
671
  'bq-box-shadow--s': '0 8px 24px rgba(0, 0, 0, 0.04)',
835
672
  'bq-box-shadow--m': '0 10px 48px -16px rgba(0, 0, 0, 0.12)',
836
673
  'bq-box-shadow--l': '0 20px 58px -16px rgba(0, 0, 0, 0.16)',
837
- // Fonts
838
674
  'bq-font-family': "'Outfit', sans-serif",
839
675
  'bq-font-size--xs': '0.75rem',
840
- // 12px
841
676
  'bq-font-size--s': '0.875rem',
842
- // 14px
843
677
  'bq-font-size--m': '1rem',
844
- // 16px
845
678
  'bq-font-size--l': '1.125rem',
846
- // 18px
847
679
  'bq-font-size--xl': '1.5rem',
848
- // 24px
849
680
  'bq-font-size--xxl': '2rem',
850
- // 32px
851
681
  'bq-font-size--xxl2': '2.5rem',
852
- // 40px
853
682
  'bq-font-size--xxl3': '3rem',
854
- // 48px
855
683
  'bq-font-size--xxl4': '3.5rem',
856
- // 56px
857
684
  'bq-font-size--xxl5': '4rem',
858
- // 64px
859
685
  'bq-font-weight--thin': '100',
860
686
  'bq-font-weight--light': '300',
861
687
  'bq-font-weight--regular': '400',
@@ -865,34 +691,20 @@ const DefaultRootTheme = {
865
691
  'bq-font-line-height--small': '1.2',
866
692
  'bq-font-line-height--regular': '1.5',
867
693
  'bq-font-line-height--large': '1.5',
868
- // Spacing
869
694
  'bq-spacing-xs3': '0.125rem',
870
- // 2px
871
695
  'bq-spacing-xs2': '0.25rem',
872
- // 4px
873
696
  'bq-spacing-xs': '0.5rem',
874
- // 8px
875
697
  'bq-spacing-s': '0.75rem',
876
- // 12px
877
698
  'bq-spacing-m': '1rem',
878
- // 16px
879
699
  'bq-spacing-l': '1.5rem',
880
- // 24px
881
700
  'bq-spacing-xl': '2rem',
882
- // 32px
883
701
  'bq-spacing-xxl': '2.5rem',
884
- // 40px
885
702
  'bq-spacing-xxl2': '3.5rem',
886
- // 56px
887
703
  'bq-spacing-xxl3': '4rem',
888
- // 64px
889
- 'bq-spacing-xxl4': '4.5rem' // 72px
704
+ 'bq-spacing-xxl4': '4.5rem'
890
705
  };
891
706
 
892
707
  const EndavaDarkTheme = {
893
- /* -------------------------------------------------------------------------- */
894
- /* Background colors */
895
- /* -------------------------------------------------------------------------- */
896
708
  'bq-background--primary': 'var(--bq-neutral-1000)',
897
709
  'bq-background--secondary': 'var(--bq-neutral-900)',
898
710
  'bq-background--tertiary': 'var(--bq-neutral-800)',
@@ -900,103 +712,55 @@ const EndavaDarkTheme = {
900
712
  'bq-background--inverse': 'var(--bq-neutral-600)',
901
713
  'bq-background--brand': 'var(--bq-brand)',
902
714
  'bq-background--overlay': 'var(--bq-neutral-900)',
903
- // with opacity: 60%
904
- /* -------------------------------------------------------------------------- */
905
- /* Icons colors */
906
- /* -------------------------------------------------------------------------- */
907
- /** Primary */
908
715
  'bq-icon--primary': 'var(--bq-neutral-100)',
909
- '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 */
719
+ 'bq-icon--alt': 'var(--bq-white)',
917
720
  'bq-icon--info': 'var(--bq-info)',
918
721
  'bq-icon--success': 'var(--bq-success)',
919
722
  'bq-icon--warning': 'var(--bq-warning)',
920
723
  'bq-icon--danger': 'var(--bq-danger)',
921
- /* -------------------------------------------------------------------------- */
922
- /* Stroke colors */
923
- /* -------------------------------------------------------------------------- */
924
- /** Primary */
925
724
  'bq-stroke--primary': 'var(--bq-neutral-900)',
926
- '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 */
730
+ 'bq-stroke--alt': 'var(--bq-neutral-1000)',
937
731
  'bq-stroke--success': 'var(--bq-success)',
938
- /** Warning */
939
732
  'bq-stroke--warning': 'var(--bq-warning)',
940
- /** Danger */
941
733
  'bq-stroke--danger': 'var(--bq-danger)',
942
- /** Info */
943
734
  'bq-stroke--info': 'var(--bq-info)',
944
- /* -------------------------------------------------------------------------- */
945
- /* Text colors */
946
- /* -------------------------------------------------------------------------- */
947
- /** Primary */
948
735
  'bq-text--primary': 'var(--bq-neutral-100)',
949
- '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 */
739
+ 'bq-text--alt': 'var(--bq-neutral-white)',
957
740
  'bq-text--info': 'var(--bq-info)',
958
741
  'bq-text--success': 'var(--bq-success)',
959
742
  'bq-text--warning': 'var(--bq-warning)',
960
743
  'bq-text--danger': 'var(--bq-danger)',
961
- /* -------------------------------------------------------------------------- */
962
- /* UI colors */
963
- /* -------------------------------------------------------------------------- */
964
- /** Primary */
965
744
  'bq-ui--primary': 'var(--bq-neutral-900)',
966
- '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 */
750
+ 'bq-ui--alt': 'var(--bq-neutral-950)',
977
751
  'bq-ui--success': 'var(--bq-success)',
978
752
  'bq-ui--success-alt': 'var(--bq-success-dark)',
979
- /** Warning */
980
753
  'bq-ui--warning': 'var(--bq-warning)',
981
754
  'bq-ui--warning-alt': 'var(--bq-warning-dark)',
982
- /** Danger */
983
755
  'bq-ui--danger': 'var(--bq-danger)',
984
756
  'bq-ui--danger-alt': 'var(--bq-danger-dark)',
985
- /** Info */
986
757
  'bq-ui--info': 'var(--bq-info)',
987
758
  '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
759
  'bq-hover': '#444546',
993
760
  'bq-active': '#1F2026'
994
761
  };
995
762
 
996
763
  const EndavaLightTheme = {
997
- /* -------------------------------------------------------------------------- */
998
- /* Background colors */
999
- /* -------------------------------------------------------------------------- */
1000
764
  'bq-background--primary': 'var(--bq-white)',
1001
765
  'bq-background--secondary': 'var(--bq-neutral-100)',
1002
766
  'bq-background--tertiary': 'var(--bq-neutral-200)',
@@ -1004,105 +768,58 @@ const EndavaLightTheme = {
1004
768
  'bq-background--inverse': 'var(--bq-neutral-900)',
1005
769
  'bq-background--brand': 'var(--bq-brand)',
1006
770
  'bq-background--overlay': 'var(--bq-neutral-900)',
1007
- // with opacity: 60%
1008
- /* -------------------------------------------------------------------------- */
1009
- /* Icons colors */
1010
- /* -------------------------------------------------------------------------- */
1011
- /** Primary */
1012
771
  'bq-icon--primary': 'var(--bq-neutral-800)',
1013
- '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 */
775
+ 'bq-icon--alt': 'var(--bq-white)',
1021
776
  'bq-icon--info': 'var(--bq-info)',
1022
777
  'bq-icon--success': 'var(--bq-success)',
1023
778
  'bq-icon--warning': 'var(--bq-warning)',
1024
779
  'bq-icon--danger': 'var(--bq-danger)',
1025
- /* -------------------------------------------------------------------------- */
1026
- /* Stroke colors */
1027
- /* -------------------------------------------------------------------------- */
1028
- /** Primary */
1029
780
  'bq-stroke--primary': 'var(--bq-neutral-200)',
1030
- '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)',
785
+ 'bq-stroke--alt': 'var(--bq-neutral-50)',
1039
786
  'bq-stroke--brand-alt': 'var(--bq-brand-light)',
1040
- /** Success */
1041
787
  'bq-stroke--success': 'var(--bq-success)',
1042
- /** Warning */
1043
788
  'bq-stroke--warning': 'var(--bq-warning)',
1044
- /** Danger */
1045
789
  'bq-stroke--danger': 'var(--bq-danger)',
1046
- /** Info */
1047
790
  'bq-stroke--info': 'var(--bq-info)',
1048
- /* -------------------------------------------------------------------------- */
1049
- /* Text colors */
1050
- /* -------------------------------------------------------------------------- */
1051
- /** Primary */
1052
791
  'bq-text--primary': 'var(--bq-neutral-800)',
1053
- '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 */
795
+ 'bq-text--alt': 'var(--bq-white)',
1061
796
  'bq-text--info': 'var(--bq-info)',
1062
797
  'bq-text--success': 'var(--bq-success)',
1063
798
  'bq-text--warning': 'var(--bq-warning)',
1064
799
  'bq-text--danger': 'var(--bq-danger)',
1065
- /* -------------------------------------------------------------------------- */
1066
- /* UI colors */
1067
- /* -------------------------------------------------------------------------- */
1068
- /** Primary */
1069
800
  'bq-ui--primary': 'var(--bq-white)',
1070
- '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
- 'bq-ui--brand': 'var(--bq-brand)',
804
+ 'bq-ui--alt': 'var(--bq-neutral-50)',
1079
805
  'bq-ui--brand-alt': 'var(--bq-brand-light)',
1080
- /** Success */
806
+ 'bq-ui--brand': 'var(--bq-brand)',
1081
807
  'bq-ui--success': 'var(--bq-success)',
1082
808
  'bq-ui--success-alt': 'var(--bq-success-light)',
1083
- /** Warning */
1084
809
  'bq-ui--warning': 'var(--bq-warning)',
1085
810
  'bq-ui--warning-alt': 'var(--bq-warning-light)',
1086
- /** Danger */
1087
811
  'bq-ui--danger': 'var(--bq-danger)',
1088
812
  'bq-ui--danger-alt': 'var(--bq-danger-light)',
1089
- /** Info */
1090
813
  'bq-ui--info': 'var(--bq-info)',
1091
814
  '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
815
  'bq-hover': '#444546',
1097
816
  'bq-active': '#1F2026'
1098
817
  };
1099
818
 
1100
819
  const EndavaRootTheme = {
1101
- // Fonts
1102
820
  'bq-font-family': "'Poppins', sans-serif",
1103
821
  'bq-white': '#fafbfb',
1104
822
  'bq-black': '#030406',
1105
- // Neutrals
1106
823
  'bq-neutral-50': 'var(--bq-endava-grey-50)',
1107
824
  'bq-neutral-100': 'var(--bq-endava-grey-100)',
1108
825
  'bq-neutral-200': 'var(--bq-endava-grey-200)',
@@ -1115,33 +832,25 @@ const EndavaRootTheme = {
1115
832
  'bq-neutral-900': 'var(--bq-endava-grey-900)',
1116
833
  'bq-neutral-950': 'var(--bq-endava-grey-950)',
1117
834
  'bq-neutral-1000': 'var(--bq-endava-grey-1000)',
1118
- // Brand
1119
835
  'bq-brand-light': 'var(--bq-endava-orange-100)',
1120
836
  'bq-brand': 'var(--bq-endava-orange-600)',
1121
837
  'bq-brand-dark': 'var(--bq-endava-orange-1000)',
1122
- // Accent
1123
838
  'bq-accent-light': 'var(--bq-endava-orange-100)',
1124
839
  'bq-accent': 'var(--bq-endava-orange-600)',
1125
840
  'bq-accent-dark': 'var(--bq-endava-orange-1000)',
1126
- // Success
1127
841
  'bq-success-light': 'var(--bq-green-100)',
1128
842
  'bq-success': 'var(--bq-green-600)',
1129
843
  'bq-success-dark': 'var(--bq-green-1000)',
1130
- // Danger
1131
844
  'bq-danger-light': 'var(--bq-corai-100)',
1132
845
  'bq-danger': 'var(--bq-corai-600)',
1133
846
  'bq-danger-dark': 'var(--bq-corai-1000)',
1134
- // Warning
1135
847
  'bq-warning-light': 'var(--bq-yellow-100)',
1136
848
  'bq-warning': 'var(--bq-yellow-600)',
1137
849
  'bq-warning-dark': 'var(--bq-yellow-1000)',
1138
- // Info
1139
850
  'bq-info-light': 'var(--bq-blue-100)',
1140
851
  'bq-info': 'var(--bq-blue-600)',
1141
852
  'bq-info-dark': 'var(--bq-blue-1000)',
1142
- // Focus
1143
853
  'bq-focus': 'var(--bq-endava-orange-600)',
1144
- // Data
1145
854
  'bq-data-01': 'var(--bq-brand)',
1146
855
  'bq-data-02': '#af0cd8',
1147
856
  'bq-data-03': '#0ca8d8',
@@ -1156,32 +865,23 @@ const EndavaRootTheme = {
1156
865
  'bq-data-12': 'var(--bq-white)'
1157
866
  };
1158
867
 
1159
- /* -------------------------------------------------------------------------- */
1160
- /* BEEQ's opinionated reset for TailwindCSS */
1161
- /* -------------------------------------------------------------------------- */
1162
-
1163
868
  const reset = {
1164
- /* Box sizing rules */
1165
869
  '*, *::before, *::after': {
1166
870
  'box-sizing': 'border-box'
1167
871
  },
1168
- /* Remove default margin and inherit font styles */
1169
872
  '*': {
1170
873
  margin: '0',
1171
874
  font: 'inherit'
1172
875
  },
1173
- /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
1174
876
  'ul[role="list"], ol[role="list"]': {
1175
877
  'list-style-type': 'none'
1176
878
  },
1177
- /* Set core root defaults */
1178
879
  html: {
1179
880
  'font-size': 'var(--bq-font-size--m)'
1180
881
  },
1181
882
  'html:focus-within': {
1182
883
  'scroll-behavior': 'smooth'
1183
884
  },
1184
- /* Set core body defaults */
1185
885
  body: {
1186
886
  '-webkit-font-smoothing': 'antialiased',
1187
887
  '-moz-osx-font-smoothing': 'grayscale',
@@ -1192,24 +892,19 @@ const reset = {
1192
892
  'min-height': '100vh',
1193
893
  'text-rendering': 'optimizeSpeed'
1194
894
  },
1195
- /* A elements that don't have a class get default styles */
1196
895
  'a:not([class])': {
1197
896
  'text-decoration-skip-ink': 'auto'
1198
897
  },
1199
- /* Make images easier to work with */
1200
898
  'img, picture, video, canvas, svg': {
1201
899
  'max-width': '100%',
1202
900
  display: 'block'
1203
901
  },
1204
- /* Inherit fonts for inputs and buttons */
1205
902
  'input, button, select, textarea': {
1206
903
  font: 'inherit'
1207
904
  },
1208
- /* Avoid text overflows */
1209
905
  'p, h1, h2, h3, h4, h5, h6': {
1210
906
  'overflow-wrap': 'break-word'
1211
907
  },
1212
- /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
1213
908
  '@media (prefers-reduced-motion: reduce)': {
1214
909
  'html:focus-within': {
1215
910
  'scroll-behavior': 'auto'
@@ -1312,19 +1007,12 @@ const TYPOGRAPHY_DEFAULT = {
1312
1007
  }
1313
1008
  };
1314
1009
 
1315
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
1316
1010
  var index = {
1317
1011
  theme: {
1318
1012
  colors: {
1319
1013
  current: 'currentColor',
1320
1014
  transparent: 'transparent',
1321
- /* -------------------------------------------------------------------------- */
1322
- /* Default Theme (Declarative) */
1323
- /* -------------------------------------------------------------------------- */
1324
1015
  ...DECLARATIVE_COLORS,
1325
- /* -------------------------------------------------------------------------- */
1326
- /* Extended colors (Primitive) */
1327
- /* -------------------------------------------------------------------------- */
1328
1016
  ...PRIMITIVE_COLORS
1329
1017
  },
1330
1018
  borderRadius: {
@@ -1374,7 +1062,6 @@ var index = {
1374
1062
  },
1375
1063
  extend: {
1376
1064
  height: {
1377
- // Details: https://web.dev/viewport-units/#the-need-for-new-viewport-units
1378
1065
  'dynamic-vh': '100dvh'
1379
1066
  },
1380
1067
  content: {
@@ -1402,61 +1089,41 @@ var index = {
1402
1089
  theme
1403
1090
  }) {
1404
1091
  addBase({
1405
- // CSS variables
1406
1092
  ':root, ::backdrop': {
1407
1093
  ...CSS_COLORS
1408
1094
  },
1409
- // CSS reset
1410
1095
  ...reset
1411
1096
  });
1412
1097
  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
1098
  '.focus': {
1426
1099
  outline: `var(--bq-ring-width, 2px) solid var(--bq-ring-color-focus, ${String(theme('colors.focus'))})`,
1427
1100
  outlineOffset: 'var(--bq-ring-offset-width, 1px)'
1428
1101
  }
1429
1102
  });
1430
1103
  matchUtilities({
1431
- // Background `hover` state blend color
1432
1104
  'bg-hover': value => blendColor({
1433
1105
  color: value,
1434
1106
  base: 'var(--bq-hover)'
1435
1107
  }),
1436
- // Background `active` state blend color
1437
1108
  'bg-active': value => blendColor({
1438
1109
  color: value,
1439
1110
  base: 'var(--bq-active)'
1440
1111
  }),
1441
- // Border `hover` state blend color
1442
1112
  'border-hover': value => blendColor({
1443
1113
  color: value,
1444
1114
  base: 'var(--bq-hover)',
1445
1115
  property: 'border-color'
1446
1116
  }),
1447
- // Border `active` state blend color
1448
1117
  'border-active': value => blendColor({
1449
1118
  color: value,
1450
1119
  base: 'var(--bq-active)',
1451
1120
  property: 'border-color'
1452
1121
  }),
1453
- // Text `hover` state blend color
1454
1122
  'text-hover': value => blendColor({
1455
1123
  color: value,
1456
1124
  base: 'var(--bq-hover)',
1457
1125
  property: 'color'
1458
1126
  }),
1459
- // Text `active` state blend color
1460
1127
  'text-active': value => blendColor({
1461
1128
  color: value,
1462
1129
  base: 'var(--bq-active)',