@indico-data/design-system 3.2.1 → 3.4.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.
- package/lib/index.css +279 -407
- package/lib/index.esm.css +279 -407
- package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
- package/package.json +1 -1
- package/src/components/badge/styles/Badge.scss +3 -20
- package/src/components/button/styles/_variables.scss +11 -11
- package/src/components/card/styles/Card.scss +8 -29
- package/src/components/floatUI/styles/FloatUI.scss +3 -4
- package/src/components/forms/date/datePicker/styles/DatePicker.scss +19 -16
- package/src/components/menu/styles/Menu.scss +9 -11
- package/src/components/tanstackTable/components/NoResults/NoResults.scss +2 -2
- package/src/components/tanstackTable/styles/table.scss +24 -26
- package/src/styles/_colors.scss +1 -1
- package/src/styles/globals.scss +48 -59
- package/src/styles/variables/_borders.scss +1 -1
- package/src/styles/variables/_colors.scss +60 -77
- package/src/styles/variables/_dropshadows.scss +4 -3
- package/src/stylesAndAnimations/colors/BaseColorPalette.mdx +56 -0
- package/src/stylesAndAnimations/colors/Colors.tsx +34 -9
- package/src/stylesAndAnimations/colors/constants.ts +211 -351
- package/src/stylesAndAnimations/utilityClasses/UtilityClassesData.ts +11 -1
- package/src/components/floatUI/styles/_variables.scss +0 -18
- package/src/components/menu/styles/_variables.scss +0 -20
- package/src/components/tanstackTable/styles/_variables.scss +0 -41
- package/src/stylesAndAnimations/colors/Colors.mdx +0 -32
package/lib/index.css
CHANGED
|
@@ -34,21 +34,21 @@
|
|
|
34
34
|
|
|
35
35
|
:root {
|
|
36
36
|
/** BASE COLORS **/
|
|
37
|
-
--pf-blue-color: #
|
|
38
|
-
--pf-blue-color-50: #
|
|
39
|
-
--pf-blue-color-100: #
|
|
40
|
-
--pf-blue-color-150: #
|
|
41
|
-
--pf-blue-color-200: #
|
|
42
|
-
--pf-blue-color-250: #
|
|
43
|
-
--pf-blue-color-300: #
|
|
44
|
-
--pf-blue-color-400: #
|
|
45
|
-
--pf-blue-color-450: #
|
|
46
|
-
--pf-blue-color-500: #
|
|
47
|
-
--pf-blue-color-550: #
|
|
48
|
-
--pf-blue-color-600: #
|
|
49
|
-
--pf-blue-color-700: #
|
|
50
|
-
--pf-blue-color-800: #
|
|
51
|
-
--pf-blue-color-900: #
|
|
37
|
+
--pf-blue-color: #2989ff;
|
|
38
|
+
--pf-blue-color-50: #f6fafd;
|
|
39
|
+
--pf-blue-color-100: #eef4fc;
|
|
40
|
+
--pf-blue-color-150: #e5effa;
|
|
41
|
+
--pf-blue-color-200: #d8e9fd;
|
|
42
|
+
--pf-blue-color-250: #bbd8fb;
|
|
43
|
+
--pf-blue-color-300: #9ec7fa;
|
|
44
|
+
--pf-blue-color-400: #2989ff;
|
|
45
|
+
--pf-blue-color-450: #0070f5;
|
|
46
|
+
--pf-blue-color-500: #005ccc;
|
|
47
|
+
--pf-blue-color-550: #0054b8;
|
|
48
|
+
--pf-blue-color-600: #004599;
|
|
49
|
+
--pf-blue-color-700: #06356f;
|
|
50
|
+
--pf-blue-color-800: #082345;
|
|
51
|
+
--pf-blue-color-900: #061323;
|
|
52
52
|
--pf-gray-color: #808080;
|
|
53
53
|
--pf-gray-color-50: #ffffff;
|
|
54
54
|
--pf-gray-color-100: #f7f7f7;
|
|
@@ -94,42 +94,42 @@
|
|
|
94
94
|
--pf-pink-color-700: #4c2935;
|
|
95
95
|
--pf-pink-color-800: #321b23;
|
|
96
96
|
--pf-pink-color-900: #1b0e13;
|
|
97
|
-
--pf-orange-color: #
|
|
98
|
-
--pf-orange-color-50: #
|
|
97
|
+
--pf-orange-color: #994733;
|
|
98
|
+
--pf-orange-color-50: #fffbfa;
|
|
99
99
|
--pf-orange-color-100: #faf2f0;
|
|
100
|
-
--pf-orange-color-150: #
|
|
101
|
-
--pf-orange-color-200: #
|
|
102
|
-
--pf-orange-color-250: #
|
|
103
|
-
--pf-orange-color-300: #
|
|
104
|
-
--pf-orange-color-400: #
|
|
105
|
-
--pf-orange-color-450: #
|
|
106
|
-
--pf-orange-color-500: #
|
|
100
|
+
--pf-orange-color-150: #f7ebe8;
|
|
101
|
+
--pf-orange-color-200: #f7e3de;
|
|
102
|
+
--pf-orange-color-250: #f4ccc2;
|
|
103
|
+
--pf-orange-color-300: #f5b4a3;
|
|
104
|
+
--pf-orange-color-400: #ea603e;
|
|
105
|
+
--pf-orange-color-450: #c44e31;
|
|
106
|
+
--pf-orange-color-500: #994733;
|
|
107
107
|
--pf-orange-color-550: #863f2a;
|
|
108
|
-
--pf-orange-color-600: #
|
|
109
|
-
--pf-orange-color-700: #
|
|
110
|
-
--pf-orange-color-800: #
|
|
108
|
+
--pf-orange-color-600: #6b3a2e;
|
|
109
|
+
--pf-orange-color-700: #522d23;
|
|
110
|
+
--pf-orange-color-800: #321f1b;
|
|
111
111
|
--pf-orange-color-900: #1b110e;
|
|
112
|
-
--pf-yellow-color: #
|
|
112
|
+
--pf-yellow-color: #ad871f;
|
|
113
113
|
--pf-yellow-color-50: #fdfbf7;
|
|
114
|
-
--pf-yellow-color-100: #
|
|
115
|
-
--pf-yellow-color-150: #
|
|
116
|
-
--pf-yellow-color-200: #
|
|
117
|
-
--pf-yellow-color-250: #
|
|
118
|
-
--pf-yellow-color-300: #
|
|
119
|
-
--pf-yellow-color-400: #
|
|
120
|
-
--pf-yellow-color-450: #
|
|
121
|
-
--pf-yellow-color-500: #
|
|
114
|
+
--pf-yellow-color-100: #fcf8ee;
|
|
115
|
+
--pf-yellow-color-150: #faf5e5;
|
|
116
|
+
--pf-yellow-color-200: #f9f1dc;
|
|
117
|
+
--pf-yellow-color-250: #f4e7c2;
|
|
118
|
+
--pf-yellow-color-300: #f0dda8;
|
|
119
|
+
--pf-yellow-color-400: #eabc3e;
|
|
120
|
+
--pf-yellow-color-450: #dca818;
|
|
121
|
+
--pf-yellow-color-500: #ad871f;
|
|
122
122
|
--pf-yellow-color-550: #976f00;
|
|
123
|
-
--pf-yellow-color-600: #
|
|
124
|
-
--pf-yellow-color-700: #
|
|
125
|
-
--pf-yellow-color-800: #
|
|
123
|
+
--pf-yellow-color-600: #826517;
|
|
124
|
+
--pf-yellow-color-700: #58481d;
|
|
125
|
+
--pf-yellow-color-800: #322c1b;
|
|
126
126
|
--pf-yellow-color-900: #1b160e;
|
|
127
127
|
--pf-green-color: #14b869;
|
|
128
128
|
--pf-green-color-50: #f7fdfa;
|
|
129
129
|
--pf-green-color-100: #effbf5;
|
|
130
130
|
--pf-green-color-150: #e7f9f0;
|
|
131
131
|
--pf-green-color-200: #def7eb;
|
|
132
|
-
--pf-green-color-250: #
|
|
132
|
+
--pf-green-color-250: #c2f4db;
|
|
133
133
|
--pf-green-color-300: #a8f0cd;
|
|
134
134
|
--pf-green-color-400: #3eea97;
|
|
135
135
|
--pf-green-color-450: #18dc7e;
|
|
@@ -146,7 +146,7 @@
|
|
|
146
146
|
--pf-teal-color-200: #dcf9f9;
|
|
147
147
|
--pf-teal-color-250: #bff8f8;
|
|
148
148
|
--pf-teal-color-300: #a3f5f5;
|
|
149
|
-
--pf-teal-color-400: #
|
|
149
|
+
--pf-teal-color-400: #4edada;
|
|
150
150
|
--pf-teal-color-450: #25d0d0;
|
|
151
151
|
--pf-teal-color-500: #29a3a3;
|
|
152
152
|
--pf-teal-color-550: #267373;
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
--pf-black-color-80: rgba(0, 0, 0, 0.8);
|
|
200
200
|
--pf-black-color-90: rgba(0, 0, 0, 0.9);
|
|
201
201
|
--pf-black-color-100: rgba(0, 0, 0, 1);
|
|
202
|
-
/**
|
|
202
|
+
/** COLOR FAMILIES **/
|
|
203
203
|
--pf-primary-color: #50647c;
|
|
204
204
|
--pf-primary-color-50: #f9fafb;
|
|
205
205
|
--pf-primary-color-100: #f3f5f7;
|
|
@@ -215,21 +215,21 @@
|
|
|
215
215
|
--pf-primary-color-700: #192534;
|
|
216
216
|
--pf-primary-color-800: #111b28;
|
|
217
217
|
--pf-primary-color-900: #0c141d;
|
|
218
|
-
--pf-secondary-color:
|
|
219
|
-
--pf-secondary-color-50:
|
|
220
|
-
--pf-secondary-color-100:
|
|
221
|
-
--pf-secondary-color-150:
|
|
222
|
-
--pf-secondary-color-200:
|
|
223
|
-
--pf-secondary-color-250:
|
|
224
|
-
--pf-secondary-color-300:
|
|
225
|
-
--pf-secondary-color-400:
|
|
226
|
-
--pf-secondary-color-450:
|
|
227
|
-
--pf-secondary-color-500:
|
|
228
|
-
--pf-secondary-color-550:
|
|
229
|
-
--pf-secondary-color-600:
|
|
230
|
-
--pf-secondary-color-700:
|
|
231
|
-
--pf-secondary-color-800:
|
|
232
|
-
--pf-secondary-color-900:
|
|
218
|
+
--pf-secondary-color: #1474b8;
|
|
219
|
+
--pf-secondary-color-50: #f8fafc;
|
|
220
|
+
--pf-secondary-color-100: #f1f5f9;
|
|
221
|
+
--pf-secondary-color-150: #e8f1f7;
|
|
222
|
+
--pf-secondary-color-200: #deedf7;
|
|
223
|
+
--pf-secondary-color-250: #c6dff1;
|
|
224
|
+
--pf-secondary-color-300: #add1eb;
|
|
225
|
+
--pf-secondary-color-400: #3ea2ea;
|
|
226
|
+
--pf-secondary-color-450: #188bdc;
|
|
227
|
+
--pf-secondary-color-500: #1474b8;
|
|
228
|
+
--pf-secondary-color-550: #1268a5;
|
|
229
|
+
--pf-secondary-color-600: #0f578a;
|
|
230
|
+
--pf-secondary-color-700: #1d4058;
|
|
231
|
+
--pf-secondary-color-800: #132939;
|
|
232
|
+
--pf-secondary-color-900: #0e151b;
|
|
233
233
|
--pf-tertiary-color: #6a7798;
|
|
234
234
|
--pf-tertiary-color-50: #f8fafb;
|
|
235
235
|
--pf-tertiary-color-100: #f4f7f9;
|
|
@@ -245,21 +245,6 @@
|
|
|
245
245
|
--pf-tertiary-color-700: #4b5364;
|
|
246
246
|
--pf-tertiary-color-800: #2c303a;
|
|
247
247
|
--pf-tertiary-color-900: #111317;
|
|
248
|
-
--pf-brand-color: #2989ff;
|
|
249
|
-
--pf-brand-color-50: #f6fafd;
|
|
250
|
-
--pf-brand-color-100: #eef4fc;
|
|
251
|
-
--pf-brand-color-150: #e5effa;
|
|
252
|
-
--pf-brand-color-200: #d8e9fd;
|
|
253
|
-
--pf-brand-color-250: #bbd8fb;
|
|
254
|
-
--pf-brand-color-300: #9ec7fa;
|
|
255
|
-
--pf-brand-color-400: #2989ff;
|
|
256
|
-
--pf-brand-color-450: #0070f5;
|
|
257
|
-
--pf-brand-color-500: #005ccc;
|
|
258
|
-
--pf-brand-color-550: #0054b8;
|
|
259
|
-
--pf-brand-color-600: #004599;
|
|
260
|
-
--pf-brand-color-700: #06356f;
|
|
261
|
-
--pf-brand-color-800: #082345;
|
|
262
|
-
--pf-brand-color-900: #061323;
|
|
263
248
|
/** UTILITY COLORS **/
|
|
264
249
|
--pf-error-color: var(--pf-red-color-450);
|
|
265
250
|
--pf-error-color-dark: var(--pf-red-color-500);
|
|
@@ -276,9 +261,9 @@
|
|
|
276
261
|
--pf-info-color: var(--pf-secondary-color-450);
|
|
277
262
|
--pf-info-color-dark: var(--pf-secondary-color-550);
|
|
278
263
|
--pf-info-color-light: var(--pf-secondary-color-400);
|
|
279
|
-
--pf-brand-color: var(--pf-
|
|
280
|
-
--pf-brand-color-dark: var(--pf-
|
|
281
|
-
--pf-brand-color-light: var(--pf-
|
|
264
|
+
--pf-brand-color: var(--pf-blue-color-450);
|
|
265
|
+
--pf-brand-color-dark: var(--pf-blue-color-550);
|
|
266
|
+
--pf-brand-color-light: var(--pf-blue-color-300);
|
|
282
267
|
--pf-pending-color: var(--pf-pink-color-500);
|
|
283
268
|
--pf-pending-color-dark: var(--pf-pink-color-600);
|
|
284
269
|
--pf-pending-color-light: var(--pf-pink-color-300);
|
|
@@ -314,7 +299,7 @@
|
|
|
314
299
|
--pf-border-color-secondary: var(--pf-gray-color-250);
|
|
315
300
|
--pf-border-hover-color: var(--pf-gray-color-400);
|
|
316
301
|
--pf-border-color-soft: var(--pf-secondary-color-450);
|
|
317
|
-
--pf-border-color-accent: var(--pf-
|
|
302
|
+
--pf-border-color-accent: var(--pf-blue-color-450);
|
|
318
303
|
--pf-border-color-error: var(--pf-error-color);
|
|
319
304
|
--pf-border-color-warning: var(--pf-warning-color);
|
|
320
305
|
--pf-border-color-info: var(--pf-info-color);
|
|
@@ -439,8 +424,10 @@
|
|
|
439
424
|
:root,
|
|
440
425
|
:root [data-theme=light],
|
|
441
426
|
:root [data-theme=dark] {
|
|
442
|
-
--pf-
|
|
443
|
-
--pf-
|
|
427
|
+
--pf-shadow-1: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
|
|
428
|
+
--pf-shadow-2: 5px 0 10px rgba(0, 0, 0, 0.3);
|
|
429
|
+
--pf-shadow-3: 0px 4px 12px rgba(0, 0, 0, 0.15);
|
|
430
|
+
--pf-focus-alignment: 0px 0px 0px 4px;
|
|
444
431
|
}
|
|
445
432
|
|
|
446
433
|
.cursor--pointer {
|
|
@@ -2615,172 +2602,172 @@ p,
|
|
|
2615
2602
|
background-color: var(--pf-teal-color-1000);
|
|
2616
2603
|
}
|
|
2617
2604
|
|
|
2618
|
-
.color-
|
|
2619
|
-
color: var(--pf-
|
|
2605
|
+
.color-blue {
|
|
2606
|
+
color: var(--pf-blue-color);
|
|
2620
2607
|
}
|
|
2621
2608
|
|
|
2622
|
-
.bg-
|
|
2623
|
-
background-color: var(--pf-
|
|
2609
|
+
.bg-blue {
|
|
2610
|
+
background-color: var(--pf-blue-color);
|
|
2624
2611
|
}
|
|
2625
2612
|
|
|
2626
|
-
.color-
|
|
2627
|
-
color: var(--pf-
|
|
2613
|
+
.color-blue-50 {
|
|
2614
|
+
color: var(--pf-blue-color-50);
|
|
2628
2615
|
}
|
|
2629
2616
|
|
|
2630
|
-
.bg-
|
|
2631
|
-
background-color: var(--pf-
|
|
2617
|
+
.bg-blue-50 {
|
|
2618
|
+
background-color: var(--pf-blue-color-50);
|
|
2632
2619
|
}
|
|
2633
2620
|
|
|
2634
|
-
.color-
|
|
2635
|
-
color: var(--pf-
|
|
2621
|
+
.color-blue-100 {
|
|
2622
|
+
color: var(--pf-blue-color-100);
|
|
2636
2623
|
}
|
|
2637
2624
|
|
|
2638
|
-
.bg-
|
|
2639
|
-
background-color: var(--pf-
|
|
2625
|
+
.bg-blue-100 {
|
|
2626
|
+
background-color: var(--pf-blue-color-100);
|
|
2640
2627
|
}
|
|
2641
2628
|
|
|
2642
|
-
.color-
|
|
2643
|
-
color: var(--pf-
|
|
2629
|
+
.color-blue-150 {
|
|
2630
|
+
color: var(--pf-blue-color-150);
|
|
2644
2631
|
}
|
|
2645
2632
|
|
|
2646
|
-
.bg-
|
|
2647
|
-
background-color: var(--pf-
|
|
2633
|
+
.bg-blue-150 {
|
|
2634
|
+
background-color: var(--pf-blue-color-150);
|
|
2648
2635
|
}
|
|
2649
2636
|
|
|
2650
|
-
.color-
|
|
2651
|
-
color: var(--pf-
|
|
2637
|
+
.color-blue-200 {
|
|
2638
|
+
color: var(--pf-blue-color-200);
|
|
2652
2639
|
}
|
|
2653
2640
|
|
|
2654
|
-
.bg-
|
|
2655
|
-
background-color: var(--pf-
|
|
2641
|
+
.bg-blue-200 {
|
|
2642
|
+
background-color: var(--pf-blue-color-200);
|
|
2656
2643
|
}
|
|
2657
2644
|
|
|
2658
|
-
.color-
|
|
2659
|
-
color: var(--pf-
|
|
2645
|
+
.color-blue-250 {
|
|
2646
|
+
color: var(--pf-blue-color-250);
|
|
2660
2647
|
}
|
|
2661
2648
|
|
|
2662
|
-
.bg-
|
|
2663
|
-
background-color: var(--pf-
|
|
2649
|
+
.bg-blue-250 {
|
|
2650
|
+
background-color: var(--pf-blue-color-250);
|
|
2664
2651
|
}
|
|
2665
2652
|
|
|
2666
|
-
.color-
|
|
2667
|
-
color: var(--pf-
|
|
2653
|
+
.color-blue-300 {
|
|
2654
|
+
color: var(--pf-blue-color-300);
|
|
2668
2655
|
}
|
|
2669
2656
|
|
|
2670
|
-
.bg-
|
|
2671
|
-
background-color: var(--pf-
|
|
2657
|
+
.bg-blue-300 {
|
|
2658
|
+
background-color: var(--pf-blue-color-300);
|
|
2672
2659
|
}
|
|
2673
2660
|
|
|
2674
|
-
.color-
|
|
2675
|
-
color: var(--pf-
|
|
2661
|
+
.color-blue-350 {
|
|
2662
|
+
color: var(--pf-blue-color-350);
|
|
2676
2663
|
}
|
|
2677
2664
|
|
|
2678
|
-
.bg-
|
|
2679
|
-
background-color: var(--pf-
|
|
2665
|
+
.bg-blue-350 {
|
|
2666
|
+
background-color: var(--pf-blue-color-350);
|
|
2680
2667
|
}
|
|
2681
2668
|
|
|
2682
|
-
.color-
|
|
2683
|
-
color: var(--pf-
|
|
2669
|
+
.color-blue-400 {
|
|
2670
|
+
color: var(--pf-blue-color-400);
|
|
2684
2671
|
}
|
|
2685
2672
|
|
|
2686
|
-
.bg-
|
|
2687
|
-
background-color: var(--pf-
|
|
2673
|
+
.bg-blue-400 {
|
|
2674
|
+
background-color: var(--pf-blue-color-400);
|
|
2688
2675
|
}
|
|
2689
2676
|
|
|
2690
|
-
.color-
|
|
2691
|
-
color: var(--pf-
|
|
2677
|
+
.color-blue-450 {
|
|
2678
|
+
color: var(--pf-blue-color-450);
|
|
2692
2679
|
}
|
|
2693
2680
|
|
|
2694
|
-
.bg-
|
|
2695
|
-
background-color: var(--pf-
|
|
2681
|
+
.bg-blue-450 {
|
|
2682
|
+
background-color: var(--pf-blue-color-450);
|
|
2696
2683
|
}
|
|
2697
2684
|
|
|
2698
|
-
.color-
|
|
2699
|
-
color: var(--pf-
|
|
2685
|
+
.color-blue-500 {
|
|
2686
|
+
color: var(--pf-blue-color-500);
|
|
2700
2687
|
}
|
|
2701
2688
|
|
|
2702
|
-
.bg-
|
|
2703
|
-
background-color: var(--pf-
|
|
2689
|
+
.bg-blue-500 {
|
|
2690
|
+
background-color: var(--pf-blue-color-500);
|
|
2704
2691
|
}
|
|
2705
2692
|
|
|
2706
|
-
.color-
|
|
2707
|
-
color: var(--pf-
|
|
2693
|
+
.color-blue-550 {
|
|
2694
|
+
color: var(--pf-blue-color-550);
|
|
2708
2695
|
}
|
|
2709
2696
|
|
|
2710
|
-
.bg-
|
|
2711
|
-
background-color: var(--pf-
|
|
2697
|
+
.bg-blue-550 {
|
|
2698
|
+
background-color: var(--pf-blue-color-550);
|
|
2712
2699
|
}
|
|
2713
2700
|
|
|
2714
|
-
.color-
|
|
2715
|
-
color: var(--pf-
|
|
2701
|
+
.color-blue-600 {
|
|
2702
|
+
color: var(--pf-blue-color-600);
|
|
2716
2703
|
}
|
|
2717
2704
|
|
|
2718
|
-
.bg-
|
|
2719
|
-
background-color: var(--pf-
|
|
2705
|
+
.bg-blue-600 {
|
|
2706
|
+
background-color: var(--pf-blue-color-600);
|
|
2720
2707
|
}
|
|
2721
2708
|
|
|
2722
|
-
.color-
|
|
2723
|
-
color: var(--pf-
|
|
2709
|
+
.color-blue-650 {
|
|
2710
|
+
color: var(--pf-blue-color-650);
|
|
2724
2711
|
}
|
|
2725
2712
|
|
|
2726
|
-
.bg-
|
|
2727
|
-
background-color: var(--pf-
|
|
2713
|
+
.bg-blue-650 {
|
|
2714
|
+
background-color: var(--pf-blue-color-650);
|
|
2728
2715
|
}
|
|
2729
2716
|
|
|
2730
|
-
.color-
|
|
2731
|
-
color: var(--pf-
|
|
2717
|
+
.color-blue-700 {
|
|
2718
|
+
color: var(--pf-blue-color-700);
|
|
2732
2719
|
}
|
|
2733
2720
|
|
|
2734
|
-
.bg-
|
|
2735
|
-
background-color: var(--pf-
|
|
2721
|
+
.bg-blue-700 {
|
|
2722
|
+
background-color: var(--pf-blue-color-700);
|
|
2736
2723
|
}
|
|
2737
2724
|
|
|
2738
|
-
.color-
|
|
2739
|
-
color: var(--pf-
|
|
2725
|
+
.color-blue-750 {
|
|
2726
|
+
color: var(--pf-blue-color-750);
|
|
2740
2727
|
}
|
|
2741
2728
|
|
|
2742
|
-
.bg-
|
|
2743
|
-
background-color: var(--pf-
|
|
2729
|
+
.bg-blue-750 {
|
|
2730
|
+
background-color: var(--pf-blue-color-750);
|
|
2744
2731
|
}
|
|
2745
2732
|
|
|
2746
|
-
.color-
|
|
2747
|
-
color: var(--pf-
|
|
2733
|
+
.color-blue-800 {
|
|
2734
|
+
color: var(--pf-blue-color-800);
|
|
2748
2735
|
}
|
|
2749
2736
|
|
|
2750
|
-
.bg-
|
|
2751
|
-
background-color: var(--pf-
|
|
2737
|
+
.bg-blue-800 {
|
|
2738
|
+
background-color: var(--pf-blue-color-800);
|
|
2752
2739
|
}
|
|
2753
2740
|
|
|
2754
|
-
.color-
|
|
2755
|
-
color: var(--pf-
|
|
2741
|
+
.color-blue-850 {
|
|
2742
|
+
color: var(--pf-blue-color-850);
|
|
2756
2743
|
}
|
|
2757
2744
|
|
|
2758
|
-
.bg-
|
|
2759
|
-
background-color: var(--pf-
|
|
2745
|
+
.bg-blue-850 {
|
|
2746
|
+
background-color: var(--pf-blue-color-850);
|
|
2760
2747
|
}
|
|
2761
2748
|
|
|
2762
|
-
.color-
|
|
2763
|
-
color: var(--pf-
|
|
2749
|
+
.color-blue-900 {
|
|
2750
|
+
color: var(--pf-blue-color-900);
|
|
2764
2751
|
}
|
|
2765
2752
|
|
|
2766
|
-
.bg-
|
|
2767
|
-
background-color: var(--pf-
|
|
2753
|
+
.bg-blue-900 {
|
|
2754
|
+
background-color: var(--pf-blue-color-900);
|
|
2768
2755
|
}
|
|
2769
2756
|
|
|
2770
|
-
.color-
|
|
2771
|
-
color: var(--pf-
|
|
2757
|
+
.color-blue-950 {
|
|
2758
|
+
color: var(--pf-blue-color-950);
|
|
2772
2759
|
}
|
|
2773
2760
|
|
|
2774
|
-
.bg-
|
|
2775
|
-
background-color: var(--pf-
|
|
2761
|
+
.bg-blue-950 {
|
|
2762
|
+
background-color: var(--pf-blue-color-950);
|
|
2776
2763
|
}
|
|
2777
2764
|
|
|
2778
|
-
.color-
|
|
2779
|
-
color: var(--pf-
|
|
2765
|
+
.color-blue-1000 {
|
|
2766
|
+
color: var(--pf-blue-color-1000);
|
|
2780
2767
|
}
|
|
2781
2768
|
|
|
2782
|
-
.bg-
|
|
2783
|
-
background-color: var(--pf-
|
|
2769
|
+
.bg-blue-1000 {
|
|
2770
|
+
background-color: var(--pf-blue-color-1000);
|
|
2784
2771
|
}
|
|
2785
2772
|
|
|
2786
2773
|
.color-success {
|
|
@@ -5361,68 +5348,12 @@ p,
|
|
|
5361
5348
|
transform: rotate(360deg);
|
|
5362
5349
|
}
|
|
5363
5350
|
}
|
|
5364
|
-
:root [data-theme=light] {
|
|
5365
|
-
--pf-white-color: #ffffff;
|
|
5366
|
-
--pf-black-color: #000000;
|
|
5367
|
-
--pf-page-background-color: var(--pf-gray-color-100);
|
|
5368
|
-
--pf-background-color-primary: var(--pf-gray-color-150);
|
|
5369
|
-
--pf-background-color-secondary: var(--pf-gray-color-50);
|
|
5370
|
-
--pf-background-color-tertiary: var(--pf-gray-color-200);
|
|
5371
|
-
--pf-background-color-quaternary: var(--pf-gray-color-250);
|
|
5372
|
-
--pf-background-color-accent: var(--pf-secondary-color-200);
|
|
5373
|
-
--pf-background-color-highlight: var(--pf-brand-color-250);
|
|
5374
|
-
--pf-background-brand-solid: var(--pf-brand-color-500);
|
|
5375
|
-
--pf-background-brand-hover: var(--pf-brand-color-600);
|
|
5376
|
-
--pf-background-color-inverted: var(--pf-tertiary-color-900);
|
|
5377
|
-
--pf-font-color: var(--pf-gray-color-900);
|
|
5378
|
-
--pf-font-color-inverted: var(--pf-gray-color-50);
|
|
5379
|
-
--pf-font-color-soft: var(--pf-gray-color-700);
|
|
5380
|
-
--pf-font-color-muted: var(--pf-gray-color-800);
|
|
5381
|
-
--pf-font-color-placeholder: var(--pf-gray-color-450);
|
|
5382
|
-
--pf-font-color-accent: var(--pf-brand-color-500);
|
|
5383
|
-
--pf-font-color-disabled: var(--pf-gray-color-400);
|
|
5384
|
-
--pf-font-color-error: var(--pf-error-color);
|
|
5385
|
-
--pf-font-color-warning: var(--pf-warning-color);
|
|
5386
|
-
--pf-font-color-info: var(--pf-info-color);
|
|
5387
|
-
--pf-font-color-success: var(--pf-success-color);
|
|
5388
|
-
--pf-font-color-neutral: var(--pf-neutral-color);
|
|
5389
|
-
--pf-font-color-pending: var(--pf-pending-color);
|
|
5390
|
-
--pf-font-color-brand: var(--pf-brand-color);
|
|
5391
|
-
--pf-link-color: var(--pf-brand-color-500);
|
|
5392
|
-
--pf-link-hover-color: var(--pf-brand-color-600);
|
|
5393
|
-
--pf-secondary-link-color: var(--pf-tertiary-color-700);
|
|
5394
|
-
--pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
|
|
5395
|
-
--pf-active-link-color: var(--pf-brand-color-500);
|
|
5396
|
-
--pf-line-chart-color-one: #2b97af;
|
|
5397
|
-
--pf-line-chart-color-two: #3ca7bd;
|
|
5398
|
-
--pf-line-chart-color-three: #4db8cb;
|
|
5399
|
-
--pf-line-chart-color-four: #67c4d5;
|
|
5400
|
-
--pf-line-chart-color-five: #81d1df;
|
|
5401
|
-
--pf-line-chart-color-six: #b5e4ec;
|
|
5402
|
-
--pf-line-chart-color-seven: #c6eaf1;
|
|
5403
|
-
--pf-line-chart-color-eight: #d7f1f6;
|
|
5404
|
-
}
|
|
5405
|
-
|
|
5406
|
-
:root [data-theme=dark],
|
|
5407
5351
|
:root {
|
|
5352
|
+
--pf-shadow-surface: var(--pf-shadow-1);
|
|
5353
|
+
--pf-shadow-elevated: var(--pf-shadow-2);
|
|
5354
|
+
--pf-shadow-floating: var(--pf-shadow-3);
|
|
5408
5355
|
--pf-white-color: #ffffff;
|
|
5409
5356
|
--pf-black-color: #000000;
|
|
5410
|
-
--pf-page-background-color: var(--pf-primary-color-700);
|
|
5411
|
-
--pf-background-color-primary: var(--pf-primary-color-900);
|
|
5412
|
-
--pf-background-color-secondary: var(--pf-primary-color-800);
|
|
5413
|
-
--pf-background-color-tertiary: var(--pf-primary-color-600);
|
|
5414
|
-
--pf-background-color-quaternary: var(--pf-primary-color-500);
|
|
5415
|
-
--pf-background-color-accent: var(--pf-brand-color-800);
|
|
5416
|
-
--pf-background-color-highlight: var(--pf-brand-color-700);
|
|
5417
|
-
--pf-background-brand-solid: var(--pf-secondary-color-450);
|
|
5418
|
-
--pf-background-brand-hover: var(--pf-secondary-color-600);
|
|
5419
|
-
--pf-background-color-inverted: var(--pf-tertiary-color-50);
|
|
5420
|
-
--pf-font-color: var(--pf-gray-color-50);
|
|
5421
|
-
--pf-font-color-inverted: var(--pf-gray-color-900);
|
|
5422
|
-
--pf-font-color-soft: var(--pf-tertiary-color-300);
|
|
5423
|
-
--pf-font-color-placeholder: var(--pf-tertiary-color-500);
|
|
5424
|
-
--pf-font-color-accent: var(--pf-secondary-color-400);
|
|
5425
|
-
--pf-font-color-disabled: var(--pf-primary-color-500);
|
|
5426
5357
|
--pf-font-color-error: var(--pf-error-color);
|
|
5427
5358
|
--pf-font-color-warning: var(--pf-warning-color);
|
|
5428
5359
|
--pf-font-color-info: var(--pf-info-color);
|
|
@@ -5485,6 +5416,59 @@ p,
|
|
|
5485
5416
|
--pf-item-teal-3-color: var(--pf-teal-color-550);
|
|
5486
5417
|
--pf-item-teal-4-color: var(--pf-teal-color-600);
|
|
5487
5418
|
--pf-item-teal-5-color: var(--pf-teal-color-700);
|
|
5419
|
+
}
|
|
5420
|
+
|
|
5421
|
+
:root [data-theme=light] {
|
|
5422
|
+
--pf-page-background-color: var(--pf-gray-color-100);
|
|
5423
|
+
--pf-background-color-primary: var(--pf-gray-color-150);
|
|
5424
|
+
--pf-background-color-secondary: var(--pf-gray-color-50);
|
|
5425
|
+
--pf-background-color-tertiary: var(--pf-gray-color-200);
|
|
5426
|
+
--pf-background-color-quaternary: var(--pf-gray-color-250);
|
|
5427
|
+
--pf-background-color-accent: var(--pf-secondary-color-200);
|
|
5428
|
+
--pf-background-color-highlight: var(--pf-blue-color-250);
|
|
5429
|
+
--pf-background-brand-solid: var(--pf-blue-color-500);
|
|
5430
|
+
--pf-background-brand-hover: var(--pf-blue-color-600);
|
|
5431
|
+
--pf-background-color-inverted: var(--pf-tertiary-color-900);
|
|
5432
|
+
--pf-font-color: var(--pf-gray-color-900);
|
|
5433
|
+
--pf-font-color-inverted: var(--pf-gray-color-50);
|
|
5434
|
+
--pf-font-color-soft: var(--pf-gray-color-700);
|
|
5435
|
+
--pf-font-color-muted: var(--pf-gray-color-800);
|
|
5436
|
+
--pf-font-color-placeholder: var(--pf-gray-color-450);
|
|
5437
|
+
--pf-font-color-accent: var(--pf-blue-color-500);
|
|
5438
|
+
--pf-font-color-disabled: var(--pf-gray-color-400);
|
|
5439
|
+
--pf-link-color: var(--pf-blue-color-500);
|
|
5440
|
+
--pf-link-hover-color: var(--pf-blue-color-600);
|
|
5441
|
+
--pf-secondary-link-color: var(--pf-tertiary-color-700);
|
|
5442
|
+
--pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
|
|
5443
|
+
--pf-active-link-color: var(--pf-blue-color-500);
|
|
5444
|
+
--pf-line-chart-color-one: #2b97af;
|
|
5445
|
+
--pf-line-chart-color-two: #3ca7bd;
|
|
5446
|
+
--pf-line-chart-color-three: #4db8cb;
|
|
5447
|
+
--pf-line-chart-color-four: #67c4d5;
|
|
5448
|
+
--pf-line-chart-color-five: #81d1df;
|
|
5449
|
+
--pf-line-chart-color-six: #b5e4ec;
|
|
5450
|
+
--pf-line-chart-color-seven: #c6eaf1;
|
|
5451
|
+
--pf-line-chart-color-eight: #d7f1f6;
|
|
5452
|
+
}
|
|
5453
|
+
|
|
5454
|
+
:root [data-theme=dark],
|
|
5455
|
+
:root {
|
|
5456
|
+
--pf-page-background-color: var(--pf-primary-color-700);
|
|
5457
|
+
--pf-background-color-primary: var(--pf-primary-color-900);
|
|
5458
|
+
--pf-background-color-secondary: var(--pf-primary-color-800);
|
|
5459
|
+
--pf-background-color-tertiary: var(--pf-primary-color-600);
|
|
5460
|
+
--pf-background-color-quaternary: var(--pf-primary-color-500);
|
|
5461
|
+
--pf-background-color-accent: var(--pf-blue-color-800);
|
|
5462
|
+
--pf-background-color-highlight: var(--pf-blue-color-700);
|
|
5463
|
+
--pf-background-brand-solid: var(--pf-secondary-color-450);
|
|
5464
|
+
--pf-background-brand-hover: var(--pf-secondary-color-600);
|
|
5465
|
+
--pf-background-color-inverted: var(--pf-tertiary-color-50);
|
|
5466
|
+
--pf-font-color: var(--pf-gray-color-50);
|
|
5467
|
+
--pf-font-color-inverted: var(--pf-gray-color-900);
|
|
5468
|
+
--pf-font-color-soft: var(--pf-tertiary-color-300);
|
|
5469
|
+
--pf-font-color-placeholder: var(--pf-tertiary-color-500);
|
|
5470
|
+
--pf-font-color-accent: var(--pf-secondary-color-400);
|
|
5471
|
+
--pf-font-color-disabled: var(--pf-primary-color-500);
|
|
5488
5472
|
--pf-link-color: var(--pf-secondary-color-400);
|
|
5489
5473
|
--pf-link-hover-color: var(--pf-secondary-color-400);
|
|
5490
5474
|
--pf-secondary-link-color: var(--pf-tertiary-color-450);
|
|
@@ -5557,16 +5541,16 @@ a:hover,
|
|
|
5557
5541
|
}
|
|
5558
5542
|
|
|
5559
5543
|
:root [data-theme=light] {
|
|
5560
|
-
--pf-button-solid-background-color: var(--pf-
|
|
5544
|
+
--pf-button-solid-background-color: var(--pf-blue-color-500);
|
|
5561
5545
|
--pf-button-solid-color: var(--pf-white-color);
|
|
5562
|
-
--pf-button-solid-hover-background-color: var(--pf-
|
|
5563
|
-
--pf-button-solid-focus-background-color: var(--pf-
|
|
5546
|
+
--pf-button-solid-hover-background-color: var(--pf-blue-color-600);
|
|
5547
|
+
--pf-button-solid-focus-background-color: var(--pf-blue-color-600);
|
|
5564
5548
|
--pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
|
|
5565
5549
|
--pf-button-solid-disabled-color: var(--pf-gray-color-500);
|
|
5566
|
-
--pf-button-outline-color: var(--pf-
|
|
5567
|
-
--pf-button-outline-border-color: var(--pf-
|
|
5568
|
-
--pf-button-outline-hover-color: var(--pf-
|
|
5569
|
-
--pf-button-outline-hover-background-color: var(--pf-
|
|
5550
|
+
--pf-button-outline-color: var(--pf-blue-color-500);
|
|
5551
|
+
--pf-button-outline-border-color: var(--pf-blue-color-500);
|
|
5552
|
+
--pf-button-outline-hover-color: var(--pf-blue-color-500);
|
|
5553
|
+
--pf-button-outline-hover-background-color: var(--pf-blue-color-100);
|
|
5570
5554
|
--pf-button-outline-disabled-color: var(--pf-gray-color-250);
|
|
5571
5555
|
--pf-button-link-color: var(--pf-link-color);
|
|
5572
5556
|
--pf-button-link-hover-color: var(--pf-link-hover-color);
|
|
@@ -5586,11 +5570,11 @@ a:hover,
|
|
|
5586
5570
|
--pf-button-destructive-focus-color: var(--pf-white-color);
|
|
5587
5571
|
--pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
|
|
5588
5572
|
--pf-button-destructive-disabled-color: var(--pf-white-color);
|
|
5589
|
-
--pf-button-soft-color: var(--pf-
|
|
5573
|
+
--pf-button-soft-color: var(--pf-blue-color-500);
|
|
5590
5574
|
--pf-button-soft-border-color: transparent;
|
|
5591
|
-
--pf-button-soft-hover-color: var(--pf-
|
|
5592
|
-
--pf-button-soft-hover-background-color: var(--pf-
|
|
5593
|
-
--pf-button-soft-focus-color: var(--pf-
|
|
5575
|
+
--pf-button-soft-hover-color: var(--pf-blue-color-500);
|
|
5576
|
+
--pf-button-soft-hover-background-color: var(--pf-blue-color-150);
|
|
5577
|
+
--pf-button-soft-focus-color: var(--pf-blue-color-500);
|
|
5594
5578
|
--pf-button-soft-focus-border-color: transparent;
|
|
5595
5579
|
--pf-button-soft-disabled-color: var(--pf-gray-color-500);
|
|
5596
5580
|
--pf-button-soft-disabled-border-color: transparent;
|
|
@@ -6808,82 +6792,43 @@ body div[class*=select__single-value] {
|
|
|
6808
6792
|
}
|
|
6809
6793
|
}
|
|
6810
6794
|
|
|
6811
|
-
:root {
|
|
6812
|
-
--pf-card-rounded: var(--pf-rounded);
|
|
6813
|
-
--pf-card-box-shadow: 1px 2px 4px 0px rgba(0, 0, 0, 0.1);
|
|
6814
|
-
}
|
|
6815
|
-
|
|
6816
|
-
:root [data-theme=light] {
|
|
6817
|
-
--pf-card-background-color: var(--pf-page-background-color);
|
|
6818
|
-
--pf-card-border-color: var(--pf-border-color-secondary);
|
|
6819
|
-
--pf-card-heading-color: var(--pf-font-color-soft);
|
|
6820
|
-
--pf-card-font-color: var(--pf-font-color);
|
|
6821
|
-
}
|
|
6822
|
-
|
|
6823
|
-
:root [data-theme=dark],
|
|
6824
|
-
:root {
|
|
6825
|
-
--pf-card-background-color: var(--pf-page-background-color);
|
|
6826
|
-
--pf-card-border-color: var(--pf-border-color-secondary);
|
|
6827
|
-
--pf-card-heading-color: var(--pf-font-color-soft);
|
|
6828
|
-
--pf-card-font-color: var(--pf-font-color);
|
|
6829
|
-
}
|
|
6830
|
-
|
|
6831
6795
|
.card {
|
|
6832
6796
|
border-radius: var(--pf-rounded-lg);
|
|
6833
6797
|
padding: var(--pf-padding-3);
|
|
6834
|
-
background: var(--pf-
|
|
6798
|
+
background: var(--pf-page-background-color);
|
|
6835
6799
|
box-sizing: border-box;
|
|
6836
|
-
color: var(--pf-
|
|
6837
|
-
border: var(--pf-border-thin) solid var(--pf-
|
|
6838
|
-
box-shadow: var(--pf-
|
|
6800
|
+
color: var(--pf-font-color);
|
|
6801
|
+
border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
|
|
6802
|
+
box-shadow: var(--pf-shadow-surface);
|
|
6839
6803
|
}
|
|
6840
6804
|
|
|
6841
6805
|
.card__header {
|
|
6842
6806
|
margin-bottom: var(--pf-margin-2);
|
|
6843
|
-
color: var(--pf-
|
|
6807
|
+
color: var(--pf-font-color-soft);
|
|
6844
6808
|
}
|
|
6845
6809
|
.card__header p {
|
|
6846
|
-
color: var(--pf-
|
|
6810
|
+
color: var(--pf-font-color);
|
|
6847
6811
|
font-size: var(--pf-font-size-subtitle2);
|
|
6848
6812
|
}
|
|
6849
6813
|
|
|
6850
6814
|
.card__content hr {
|
|
6851
|
-
border: var(--pf-border-thin) solid var(--pf-
|
|
6815
|
+
border: var(--pf-border-thin) solid var(--pf-border-color-secondary);
|
|
6852
6816
|
border-bottom: none;
|
|
6853
6817
|
margin-bottom: var(--pf-margin-3);
|
|
6854
6818
|
margin-top: var(--pf-margin-3);
|
|
6855
6819
|
}
|
|
6856
6820
|
|
|
6857
6821
|
.card--box-shadow {
|
|
6858
|
-
box-shadow: var(--pf-
|
|
6859
|
-
}
|
|
6860
|
-
|
|
6861
|
-
:root {
|
|
6862
|
-
--pf-menu-rounded: var(--pf-rounded);
|
|
6863
|
-
}
|
|
6864
|
-
|
|
6865
|
-
:root [data-theme=light] {
|
|
6866
|
-
--pf-menu-item-hover-color: var(--pf-background-color-highlight);
|
|
6867
|
-
--pf-menu-item-background-color: var(--pf-background-color-secondary);
|
|
6868
|
-
--pf-menu-item-color: var(--pf-font-color);
|
|
6869
|
-
--pf-menu-item-focus-color: var(--pf-background-color-accent);
|
|
6870
|
-
}
|
|
6871
|
-
|
|
6872
|
-
:root [data-theme=dark],
|
|
6873
|
-
:root {
|
|
6874
|
-
--pf-menu-item-hover-color: var(--pf-background-color-highlight);
|
|
6875
|
-
--pf-menu-item-background-color: var(--pf-background-color-secondary);
|
|
6876
|
-
--pf-menu-item-color: var(--pf-font-color);
|
|
6877
|
-
--pf-menu-item-focus-color: var(--pf-background-color-accent);
|
|
6822
|
+
box-shadow: var(--pf-shadow-elevated);
|
|
6878
6823
|
}
|
|
6879
6824
|
|
|
6880
6825
|
.menu {
|
|
6881
|
-
border-radius: var(--pf-
|
|
6826
|
+
border-radius: var(--pf-rounded);
|
|
6882
6827
|
}
|
|
6883
6828
|
.menu .menu-item {
|
|
6884
6829
|
width: 100%;
|
|
6885
|
-
background: var(--pf-
|
|
6886
|
-
color: var(--pf-
|
|
6830
|
+
background: var(--pf-background-color-secondary);
|
|
6831
|
+
color: var(--pf-font-color);
|
|
6887
6832
|
display: block;
|
|
6888
6833
|
width: 100%;
|
|
6889
6834
|
text-align: left;
|
|
@@ -6892,34 +6837,18 @@ body div[class*=select__single-value] {
|
|
|
6892
6837
|
box-shadow: none;
|
|
6893
6838
|
}
|
|
6894
6839
|
.menu .menu-item:first-child {
|
|
6895
|
-
border-top-left-radius: var(--pf-
|
|
6896
|
-
border-top-right-radius: var(--pf-
|
|
6840
|
+
border-top-left-radius: var(--pf-rounded);
|
|
6841
|
+
border-top-right-radius: var(--pf-rounded);
|
|
6897
6842
|
}
|
|
6898
6843
|
.menu .menu-item:last-child {
|
|
6899
|
-
border-bottom-left-radius: var(--pf-
|
|
6900
|
-
border-bottom-right-radius: var(--pf-
|
|
6844
|
+
border-bottom-left-radius: var(--pf-rounded);
|
|
6845
|
+
border-bottom-right-radius: var(--pf-rounded);
|
|
6901
6846
|
}
|
|
6902
6847
|
.menu .menu-item:hover {
|
|
6903
|
-
background: var(--pf-
|
|
6848
|
+
background: var(--pf-background-color-highlight);
|
|
6904
6849
|
}
|
|
6905
6850
|
.menu .menu-item:focus {
|
|
6906
|
-
background-color: var(--pf-
|
|
6907
|
-
}
|
|
6908
|
-
|
|
6909
|
-
:root {
|
|
6910
|
-
--pf-floatui-border-radius: var(--pf-rounded);
|
|
6911
|
-
--pf-floatui-box-shadow: var(--pf-dropshadow);
|
|
6912
|
-
--pf-floatui-border: none;
|
|
6913
|
-
--pf-floatui-border-color: var(--pf-border-color-secondary);
|
|
6914
|
-
}
|
|
6915
|
-
|
|
6916
|
-
:root [data-theme=light] {
|
|
6917
|
-
--pf-floatui-background-color: var(--pf-background-color-secondary);
|
|
6918
|
-
}
|
|
6919
|
-
|
|
6920
|
-
:root [data-theme=dark],
|
|
6921
|
-
:root {
|
|
6922
|
-
--pf-floatui-background-color: var(--pf-background-color-secondary);
|
|
6851
|
+
background-color: var(--pf-background-color-accent);
|
|
6923
6852
|
}
|
|
6924
6853
|
|
|
6925
6854
|
.floatui-container {
|
|
@@ -6928,30 +6857,17 @@ body div[class*=select__single-value] {
|
|
|
6928
6857
|
|
|
6929
6858
|
.floatui-content {
|
|
6930
6859
|
border: solid var(--pf-border-thin) var(--pf-border-color-secondary);
|
|
6931
|
-
border-radius: var(--pf-
|
|
6932
|
-
box-shadow: var(--pf-
|
|
6933
|
-
background: var(--pf-
|
|
6860
|
+
border-radius: var(--pf-rounded);
|
|
6861
|
+
box-shadow: var(--pf-shadow-floating);
|
|
6862
|
+
background: var(--pf-background-color-secondary);
|
|
6934
6863
|
}
|
|
6935
6864
|
|
|
6936
|
-
:root [data-theme=light] {
|
|
6937
|
-
--pf-date-picker-background-color: var(--pf-background-color-secondary);
|
|
6938
|
-
--pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
|
|
6939
|
-
--pf-date-picker-selected-date-font-color: var(--pf-font-color-inverted);
|
|
6940
|
-
--pf-date-picker-today-background-color: var(--pf-background-color-highlight);
|
|
6941
|
-
}
|
|
6942
6865
|
:root [data-theme=light] .rdp-root {
|
|
6943
6866
|
--rdp-accent-color: var(--pf-link-color);
|
|
6944
6867
|
--rdp-font-family: var(--pf-font-family-base);
|
|
6945
6868
|
--rdp-range_middle-background-color: var(--pf-page-background-color);
|
|
6946
6869
|
}
|
|
6947
6870
|
|
|
6948
|
-
:root [data-theme=dark],
|
|
6949
|
-
:root {
|
|
6950
|
-
--pf-date-picker-background-color: var(--pf-background-color-secondary);
|
|
6951
|
-
--pf-date-picker-selected-date-background-color: var(--pf-background-brand-solid);
|
|
6952
|
-
--pf-date-picker-selected-date-font-color: var(--pf-font-color);
|
|
6953
|
-
--pf-date-picker-today-background-color: var(--pf-background-color-highlight);
|
|
6954
|
-
}
|
|
6955
6871
|
:root [data-theme=dark] .rdp-root,
|
|
6956
6872
|
:root .rdp-root {
|
|
6957
6873
|
--rdp-accent-color: var(--pf-link-color);
|
|
@@ -6965,7 +6881,7 @@ body div[class*=select__single-value] {
|
|
|
6965
6881
|
|
|
6966
6882
|
.rdp-months {
|
|
6967
6883
|
color: var(--pf-font-color);
|
|
6968
|
-
background-color: var(--pf-
|
|
6884
|
+
background-color: var(--pf-background-color-secondary);
|
|
6969
6885
|
padding: var(--pf-padding-3);
|
|
6970
6886
|
border-radius: var(--pf-rounded);
|
|
6971
6887
|
border: solid var(--pf-border-thin) var(--pf-border-color-primary);
|
|
@@ -6986,13 +6902,12 @@ body div[class*=select__single-value] {
|
|
|
6986
6902
|
border: none;
|
|
6987
6903
|
}
|
|
6988
6904
|
.rdp-day.rdp-today .rdp-day_button {
|
|
6989
|
-
background-color: var(--pf-
|
|
6990
|
-
color: var(--pf-
|
|
6905
|
+
background-color: var(--pf-background-color-highlight);
|
|
6906
|
+
color: var(--pf-font-color-inverted);
|
|
6991
6907
|
border: none;
|
|
6992
6908
|
}
|
|
6993
6909
|
.rdp-day.rdp-selected .rdp-day_button {
|
|
6994
|
-
background-color: var(--pf-
|
|
6995
|
-
color: var(--pf-date-picker-selected-date-font-color);
|
|
6910
|
+
background-color: var(--pf-background-brand-solid);
|
|
6996
6911
|
border: none;
|
|
6997
6912
|
}
|
|
6998
6913
|
.rdp-day.rdp-range_middle .rdp-day_button {
|
|
@@ -7000,6 +6915,15 @@ body div[class*=select__single-value] {
|
|
|
7000
6915
|
background-color: transparent;
|
|
7001
6916
|
}
|
|
7002
6917
|
|
|
6918
|
+
:root [data-theme=light] .rdp-day.rdp-selected .rdp-day_button {
|
|
6919
|
+
color: var(--pf-font-color-inverted);
|
|
6920
|
+
}
|
|
6921
|
+
|
|
6922
|
+
:root [data-theme=dark] .rdp-day.rdp-selected .rdp-day_button,
|
|
6923
|
+
:root .rdp-day.rdp-selected .rdp-day_button {
|
|
6924
|
+
color: var(--pf-font-color);
|
|
6925
|
+
}
|
|
6926
|
+
|
|
7003
6927
|
.time-picker-wrapper {
|
|
7004
6928
|
margin-bottom: var(--pf-margin-3);
|
|
7005
6929
|
width: 348px;
|
|
@@ -7011,34 +6935,19 @@ body div[class*=select__single-value] {
|
|
|
7011
6935
|
padding: var(--pf-padding-2);
|
|
7012
6936
|
border-radius: var(--pf-rounded);
|
|
7013
6937
|
width: 200px;
|
|
7014
|
-
box-shadow: var(--pf-
|
|
6938
|
+
box-shadow: var(--pf-shadow-elevated);
|
|
7015
6939
|
font-size: var(--pf-font-size-overline);
|
|
7016
6940
|
}
|
|
7017
6941
|
|
|
7018
|
-
:root [data-theme=light] {
|
|
7019
|
-
--pf-badge-background-color: var(--pf-page-background-color);
|
|
7020
|
-
--pf-badge-font-color: var(--pf-font-color);
|
|
7021
|
-
--pf-badge-rounded: var(--pf-rounded);
|
|
7022
|
-
--pf-badge-border-color: var(--pf-border-color-secondary);
|
|
7023
|
-
}
|
|
7024
|
-
|
|
7025
|
-
:root [data-theme=dark],
|
|
7026
|
-
:root {
|
|
7027
|
-
--pf-badge-background-color: var(--pf-page-background-color);
|
|
7028
|
-
--pf-badge-font-color: var(--pf-font-color);
|
|
7029
|
-
--pf-badge-rounded: var(--pf-rounded);
|
|
7030
|
-
--pf-badge-border-color: var(--pf-border-color-secondary);
|
|
7031
|
-
}
|
|
7032
|
-
|
|
7033
6942
|
.badge {
|
|
7034
|
-
border: var(--pf-border-sm) solid var(--pf-
|
|
6943
|
+
border: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7035
6944
|
border-radius: var(--pf-rounded-lg);
|
|
7036
6945
|
padding: var(--pf-padding-3);
|
|
7037
|
-
background: var(--pf-
|
|
6946
|
+
background: var(--pf-page-background-color);
|
|
7038
6947
|
box-sizing: border-box;
|
|
7039
6948
|
width: -moz-fit-content;
|
|
7040
6949
|
width: fit-content;
|
|
7041
|
-
color: var(--pf-
|
|
6950
|
+
color: var(--pf-font-color);
|
|
7042
6951
|
}
|
|
7043
6952
|
.badge--xs {
|
|
7044
6953
|
padding: var(--pf-padding-1);
|
|
@@ -7208,43 +7117,6 @@ body div[class*=select__single-value] {
|
|
|
7208
7117
|
border-color: var(--pf-error-color);
|
|
7209
7118
|
}
|
|
7210
7119
|
|
|
7211
|
-
:root [data-theme=light] {
|
|
7212
|
-
--pf-tanstack-table-background-color: var(--pf-page-background-color);
|
|
7213
|
-
--pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
|
|
7214
|
-
--pf-tanstack-table-font-color: var(--pf-font-color);
|
|
7215
|
-
--pf-tanstack-table-border-color: var(--pf-border-color-secondary);
|
|
7216
|
-
--pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
|
|
7217
|
-
--pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
|
|
7218
|
-
--pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
|
|
7219
|
-
--pf-tanstack-table-checked-color: var(--pf-background-color-accent);
|
|
7220
|
-
--pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
|
|
7221
|
-
--pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
|
|
7222
|
-
--pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
|
|
7223
|
-
0 4px 8px rgba(0, 0, 0, 0.1);
|
|
7224
|
-
--pf-tanstack-table-font-size: var(--pf-font-size-body2);
|
|
7225
|
-
--pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
|
|
7226
|
-
--pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
|
|
7227
|
-
}
|
|
7228
|
-
|
|
7229
|
-
:root [data-theme=dark],
|
|
7230
|
-
:root {
|
|
7231
|
-
--pf-tanstack-table-background-color: var(--pf-page-background-color);
|
|
7232
|
-
--pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
|
|
7233
|
-
--pf-tanstack-table-font-color: var(--pf-font-color);
|
|
7234
|
-
--pf-tanstack-table-border-color: var(--pf-border-color-secondary);
|
|
7235
|
-
--pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
|
|
7236
|
-
--pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
|
|
7237
|
-
--pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
|
|
7238
|
-
--pf-tanstack-table-checked-color: var(--pf-background-color-accent);
|
|
7239
|
-
--pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
|
|
7240
|
-
--pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
|
|
7241
|
-
--pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
|
|
7242
|
-
0 4px 8px rgba(0, 0, 0, 0.1);
|
|
7243
|
-
--pf-tanstack-table-font-size: var(--pf-font-size-body2);
|
|
7244
|
-
--pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
|
|
7245
|
-
--pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
|
|
7246
|
-
}
|
|
7247
|
-
|
|
7248
7120
|
.tanstack-table__action-bar {
|
|
7249
7121
|
position: fixed;
|
|
7250
7122
|
bottom: 170px;
|
|
@@ -7285,10 +7157,10 @@ body div[class*=select__single-value] {
|
|
|
7285
7157
|
.tanstack-table__no-results__text {
|
|
7286
7158
|
font-size: var(--pf-line-height-md);
|
|
7287
7159
|
font-weight: var(--pf-font-weight-medium);
|
|
7288
|
-
color: var(--pf-
|
|
7160
|
+
color: var(--pf-font-color);
|
|
7289
7161
|
}
|
|
7290
7162
|
.tanstack-table__no-results__text span {
|
|
7291
|
-
color: var(--pf-
|
|
7163
|
+
color: var(--pf-font-color);
|
|
7292
7164
|
cursor: pointer;
|
|
7293
7165
|
}
|
|
7294
7166
|
.tanstack-table__no-results__text span:hover {
|
|
@@ -7310,13 +7182,13 @@ body div[class*=select__single-value] {
|
|
|
7310
7182
|
grid-template-columns: 1fr;
|
|
7311
7183
|
overflow-x: auto;
|
|
7312
7184
|
overflow-y: auto;
|
|
7313
|
-
background-color: var(--pf-
|
|
7185
|
+
background-color: var(--pf-page-background-color);
|
|
7314
7186
|
border-radius: var(--pf-rounded-lg);
|
|
7315
|
-
border-left: var(--pf-border-sm) solid var(--pf-
|
|
7316
|
-
border-right: var(--pf-border-sm) solid var(--pf-
|
|
7317
|
-
border-bottom: var(--pf-border-sm) solid var(--pf-
|
|
7187
|
+
border-left: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7188
|
+
border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7189
|
+
border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7318
7190
|
scrollbar-width: thin;
|
|
7319
|
-
scrollbar-color: var(--pf-
|
|
7191
|
+
scrollbar-color: var(--pf-border-color-secondary) var(--pf-page-background-color);
|
|
7320
7192
|
}
|
|
7321
7193
|
.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar {
|
|
7322
7194
|
width: var(--pf-size-2);
|
|
@@ -7324,12 +7196,12 @@ body div[class*=select__single-value] {
|
|
|
7324
7196
|
cursor: pointer;
|
|
7325
7197
|
}
|
|
7326
7198
|
.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-track {
|
|
7327
|
-
background: var(--pf-
|
|
7199
|
+
background: var(--pf-page-background-color);
|
|
7328
7200
|
border-radius: var(--pf-rounded);
|
|
7329
7201
|
cursor: pointer;
|
|
7330
7202
|
}
|
|
7331
7203
|
.tanstack-table__outer-container .tanstack-table__container::-webkit-scrollbar-thumb {
|
|
7332
|
-
background: var(--pf-
|
|
7204
|
+
background: var(--pf-border-color-secondary);
|
|
7333
7205
|
border-radius: var(--pf-rounded);
|
|
7334
7206
|
cursor: pointer;
|
|
7335
7207
|
}
|
|
@@ -7349,14 +7221,14 @@ body div[class*=select__single-value] {
|
|
|
7349
7221
|
padding: var(--pf-padding-2) var(--pf-padding-3);
|
|
7350
7222
|
}
|
|
7351
7223
|
.tanstack-table.is-striped .tanstack-table__tbody tr:nth-child(odd) td {
|
|
7352
|
-
background-color: var(--pf-
|
|
7224
|
+
background-color: var(--pf-background-color-secondary);
|
|
7353
7225
|
}
|
|
7354
7226
|
.tanstack-table__thead {
|
|
7355
7227
|
position: sticky;
|
|
7356
7228
|
top: 0;
|
|
7357
7229
|
z-index: 3;
|
|
7358
7230
|
box-sizing: border-box;
|
|
7359
|
-
background-color: var(--pf-
|
|
7231
|
+
background-color: var(--pf-background-color-primary);
|
|
7360
7232
|
}
|
|
7361
7233
|
.tanstack-table__thead tr:first-child th:first-child {
|
|
7362
7234
|
border-left: none;
|
|
@@ -7365,14 +7237,14 @@ body div[class*=select__single-value] {
|
|
|
7365
7237
|
border-right: none;
|
|
7366
7238
|
}
|
|
7367
7239
|
.tanstack-table__thead__th {
|
|
7368
|
-
color: var(--pf-
|
|
7369
|
-
background: var(--pf-
|
|
7370
|
-
font-size: var(--pf-
|
|
7240
|
+
color: var(--pf-font-color);
|
|
7241
|
+
background: var(--pf-background-color-primary);
|
|
7242
|
+
font-size: var(--pf-font-size-body2);
|
|
7371
7243
|
font-weight: var(--pf-font-weight-medium);
|
|
7372
7244
|
box-sizing: border-box;
|
|
7373
|
-
border-top: var(--pf-border-sm) solid var(--pf-
|
|
7374
|
-
border-bottom: var(--pf-border-sm) solid var(--pf-
|
|
7375
|
-
border-right: var(--pf-border-sm) solid var(--pf-
|
|
7245
|
+
border-top: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7246
|
+
border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7247
|
+
border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7376
7248
|
-webkit-user-select: none;
|
|
7377
7249
|
-moz-user-select: none;
|
|
7378
7250
|
user-select: none;
|
|
@@ -7400,22 +7272,22 @@ body div[class*=select__single-value] {
|
|
|
7400
7272
|
border-right: none;
|
|
7401
7273
|
}
|
|
7402
7274
|
.tanstack-table__tbody__tr.is-selected td {
|
|
7403
|
-
background: var(--pf-
|
|
7275
|
+
background: var(--pf-background-color-accent) !important;
|
|
7404
7276
|
}
|
|
7405
7277
|
.tanstack-table__tbody__tr.show-hover:hover td {
|
|
7406
|
-
background-color: var(--pf-
|
|
7278
|
+
background-color: var(--pf-background-color-tertiary) !important;
|
|
7407
7279
|
cursor: pointer;
|
|
7408
7280
|
}
|
|
7409
7281
|
.tanstack-table__tbody__tr.is-clicked td {
|
|
7410
|
-
background-color: var(--pf-
|
|
7282
|
+
background-color: var(--pf-background-color-highlight) !important;
|
|
7411
7283
|
}
|
|
7412
7284
|
.tanstack-table__tbody__td {
|
|
7413
7285
|
font-size: var(--pf-font-size-base);
|
|
7414
7286
|
font-weight: var(--pf-font-weight-medium);
|
|
7415
|
-
color: var(--pf-
|
|
7416
|
-
background: var(--pf-
|
|
7417
|
-
border-right: var(--pf-border-sm) solid var(--pf-
|
|
7418
|
-
border-bottom: var(--pf-border-sm) solid var(--pf-
|
|
7287
|
+
color: var(--pf-font-color);
|
|
7288
|
+
background: var(--pf-page-background-color);
|
|
7289
|
+
border-right: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7290
|
+
border-bottom: var(--pf-border-sm) solid var(--pf-border-color-secondary);
|
|
7419
7291
|
box-sizing: border-box;
|
|
7420
7292
|
overflow: hidden;
|
|
7421
7293
|
text-overflow: ellipsis;
|
|
@@ -7446,8 +7318,8 @@ body div[class*=select__single-value] {
|
|
|
7446
7318
|
.table__pagination {
|
|
7447
7319
|
padding-bottom: var(--pf-padding-4);
|
|
7448
7320
|
padding-top: var(--pf-padding-4);
|
|
7449
|
-
color: var(--pf-
|
|
7450
|
-
background-color: var(--pf-
|
|
7321
|
+
color: var(--pf-font-color);
|
|
7322
|
+
background-color: var(--pf-page-background-color);
|
|
7451
7323
|
padding-left: var(--pf-padding-4);
|
|
7452
7324
|
}
|
|
7453
7325
|
|