@indico-data/design-system 3.3.0 → 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 +165 -180
- package/lib/index.esm.css +165 -180
- package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
- package/package.json +1 -1
- package/src/components/button/styles/_variables.scss +11 -11
- package/src/styles/_colors.scss +1 -1
- package/src/styles/globals.scss +9 -9
- package/src/styles/variables/_borders.scss +1 -1
- package/src/styles/variables/_colors.scss +60 -77
- 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/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);
|
|
@@ -2617,172 +2602,172 @@ p,
|
|
|
2617
2602
|
background-color: var(--pf-teal-color-1000);
|
|
2618
2603
|
}
|
|
2619
2604
|
|
|
2620
|
-
.color-
|
|
2621
|
-
color: var(--pf-
|
|
2605
|
+
.color-blue {
|
|
2606
|
+
color: var(--pf-blue-color);
|
|
2622
2607
|
}
|
|
2623
2608
|
|
|
2624
|
-
.bg-
|
|
2625
|
-
background-color: var(--pf-
|
|
2609
|
+
.bg-blue {
|
|
2610
|
+
background-color: var(--pf-blue-color);
|
|
2626
2611
|
}
|
|
2627
2612
|
|
|
2628
|
-
.color-
|
|
2629
|
-
color: var(--pf-
|
|
2613
|
+
.color-blue-50 {
|
|
2614
|
+
color: var(--pf-blue-color-50);
|
|
2630
2615
|
}
|
|
2631
2616
|
|
|
2632
|
-
.bg-
|
|
2633
|
-
background-color: var(--pf-
|
|
2617
|
+
.bg-blue-50 {
|
|
2618
|
+
background-color: var(--pf-blue-color-50);
|
|
2634
2619
|
}
|
|
2635
2620
|
|
|
2636
|
-
.color-
|
|
2637
|
-
color: var(--pf-
|
|
2621
|
+
.color-blue-100 {
|
|
2622
|
+
color: var(--pf-blue-color-100);
|
|
2638
2623
|
}
|
|
2639
2624
|
|
|
2640
|
-
.bg-
|
|
2641
|
-
background-color: var(--pf-
|
|
2625
|
+
.bg-blue-100 {
|
|
2626
|
+
background-color: var(--pf-blue-color-100);
|
|
2642
2627
|
}
|
|
2643
2628
|
|
|
2644
|
-
.color-
|
|
2645
|
-
color: var(--pf-
|
|
2629
|
+
.color-blue-150 {
|
|
2630
|
+
color: var(--pf-blue-color-150);
|
|
2646
2631
|
}
|
|
2647
2632
|
|
|
2648
|
-
.bg-
|
|
2649
|
-
background-color: var(--pf-
|
|
2633
|
+
.bg-blue-150 {
|
|
2634
|
+
background-color: var(--pf-blue-color-150);
|
|
2650
2635
|
}
|
|
2651
2636
|
|
|
2652
|
-
.color-
|
|
2653
|
-
color: var(--pf-
|
|
2637
|
+
.color-blue-200 {
|
|
2638
|
+
color: var(--pf-blue-color-200);
|
|
2654
2639
|
}
|
|
2655
2640
|
|
|
2656
|
-
.bg-
|
|
2657
|
-
background-color: var(--pf-
|
|
2641
|
+
.bg-blue-200 {
|
|
2642
|
+
background-color: var(--pf-blue-color-200);
|
|
2658
2643
|
}
|
|
2659
2644
|
|
|
2660
|
-
.color-
|
|
2661
|
-
color: var(--pf-
|
|
2645
|
+
.color-blue-250 {
|
|
2646
|
+
color: var(--pf-blue-color-250);
|
|
2662
2647
|
}
|
|
2663
2648
|
|
|
2664
|
-
.bg-
|
|
2665
|
-
background-color: var(--pf-
|
|
2649
|
+
.bg-blue-250 {
|
|
2650
|
+
background-color: var(--pf-blue-color-250);
|
|
2666
2651
|
}
|
|
2667
2652
|
|
|
2668
|
-
.color-
|
|
2669
|
-
color: var(--pf-
|
|
2653
|
+
.color-blue-300 {
|
|
2654
|
+
color: var(--pf-blue-color-300);
|
|
2670
2655
|
}
|
|
2671
2656
|
|
|
2672
|
-
.bg-
|
|
2673
|
-
background-color: var(--pf-
|
|
2657
|
+
.bg-blue-300 {
|
|
2658
|
+
background-color: var(--pf-blue-color-300);
|
|
2674
2659
|
}
|
|
2675
2660
|
|
|
2676
|
-
.color-
|
|
2677
|
-
color: var(--pf-
|
|
2661
|
+
.color-blue-350 {
|
|
2662
|
+
color: var(--pf-blue-color-350);
|
|
2678
2663
|
}
|
|
2679
2664
|
|
|
2680
|
-
.bg-
|
|
2681
|
-
background-color: var(--pf-
|
|
2665
|
+
.bg-blue-350 {
|
|
2666
|
+
background-color: var(--pf-blue-color-350);
|
|
2682
2667
|
}
|
|
2683
2668
|
|
|
2684
|
-
.color-
|
|
2685
|
-
color: var(--pf-
|
|
2669
|
+
.color-blue-400 {
|
|
2670
|
+
color: var(--pf-blue-color-400);
|
|
2686
2671
|
}
|
|
2687
2672
|
|
|
2688
|
-
.bg-
|
|
2689
|
-
background-color: var(--pf-
|
|
2673
|
+
.bg-blue-400 {
|
|
2674
|
+
background-color: var(--pf-blue-color-400);
|
|
2690
2675
|
}
|
|
2691
2676
|
|
|
2692
|
-
.color-
|
|
2693
|
-
color: var(--pf-
|
|
2677
|
+
.color-blue-450 {
|
|
2678
|
+
color: var(--pf-blue-color-450);
|
|
2694
2679
|
}
|
|
2695
2680
|
|
|
2696
|
-
.bg-
|
|
2697
|
-
background-color: var(--pf-
|
|
2681
|
+
.bg-blue-450 {
|
|
2682
|
+
background-color: var(--pf-blue-color-450);
|
|
2698
2683
|
}
|
|
2699
2684
|
|
|
2700
|
-
.color-
|
|
2701
|
-
color: var(--pf-
|
|
2685
|
+
.color-blue-500 {
|
|
2686
|
+
color: var(--pf-blue-color-500);
|
|
2702
2687
|
}
|
|
2703
2688
|
|
|
2704
|
-
.bg-
|
|
2705
|
-
background-color: var(--pf-
|
|
2689
|
+
.bg-blue-500 {
|
|
2690
|
+
background-color: var(--pf-blue-color-500);
|
|
2706
2691
|
}
|
|
2707
2692
|
|
|
2708
|
-
.color-
|
|
2709
|
-
color: var(--pf-
|
|
2693
|
+
.color-blue-550 {
|
|
2694
|
+
color: var(--pf-blue-color-550);
|
|
2710
2695
|
}
|
|
2711
2696
|
|
|
2712
|
-
.bg-
|
|
2713
|
-
background-color: var(--pf-
|
|
2697
|
+
.bg-blue-550 {
|
|
2698
|
+
background-color: var(--pf-blue-color-550);
|
|
2714
2699
|
}
|
|
2715
2700
|
|
|
2716
|
-
.color-
|
|
2717
|
-
color: var(--pf-
|
|
2701
|
+
.color-blue-600 {
|
|
2702
|
+
color: var(--pf-blue-color-600);
|
|
2718
2703
|
}
|
|
2719
2704
|
|
|
2720
|
-
.bg-
|
|
2721
|
-
background-color: var(--pf-
|
|
2705
|
+
.bg-blue-600 {
|
|
2706
|
+
background-color: var(--pf-blue-color-600);
|
|
2722
2707
|
}
|
|
2723
2708
|
|
|
2724
|
-
.color-
|
|
2725
|
-
color: var(--pf-
|
|
2709
|
+
.color-blue-650 {
|
|
2710
|
+
color: var(--pf-blue-color-650);
|
|
2726
2711
|
}
|
|
2727
2712
|
|
|
2728
|
-
.bg-
|
|
2729
|
-
background-color: var(--pf-
|
|
2713
|
+
.bg-blue-650 {
|
|
2714
|
+
background-color: var(--pf-blue-color-650);
|
|
2730
2715
|
}
|
|
2731
2716
|
|
|
2732
|
-
.color-
|
|
2733
|
-
color: var(--pf-
|
|
2717
|
+
.color-blue-700 {
|
|
2718
|
+
color: var(--pf-blue-color-700);
|
|
2734
2719
|
}
|
|
2735
2720
|
|
|
2736
|
-
.bg-
|
|
2737
|
-
background-color: var(--pf-
|
|
2721
|
+
.bg-blue-700 {
|
|
2722
|
+
background-color: var(--pf-blue-color-700);
|
|
2738
2723
|
}
|
|
2739
2724
|
|
|
2740
|
-
.color-
|
|
2741
|
-
color: var(--pf-
|
|
2725
|
+
.color-blue-750 {
|
|
2726
|
+
color: var(--pf-blue-color-750);
|
|
2742
2727
|
}
|
|
2743
2728
|
|
|
2744
|
-
.bg-
|
|
2745
|
-
background-color: var(--pf-
|
|
2729
|
+
.bg-blue-750 {
|
|
2730
|
+
background-color: var(--pf-blue-color-750);
|
|
2746
2731
|
}
|
|
2747
2732
|
|
|
2748
|
-
.color-
|
|
2749
|
-
color: var(--pf-
|
|
2733
|
+
.color-blue-800 {
|
|
2734
|
+
color: var(--pf-blue-color-800);
|
|
2750
2735
|
}
|
|
2751
2736
|
|
|
2752
|
-
.bg-
|
|
2753
|
-
background-color: var(--pf-
|
|
2737
|
+
.bg-blue-800 {
|
|
2738
|
+
background-color: var(--pf-blue-color-800);
|
|
2754
2739
|
}
|
|
2755
2740
|
|
|
2756
|
-
.color-
|
|
2757
|
-
color: var(--pf-
|
|
2741
|
+
.color-blue-850 {
|
|
2742
|
+
color: var(--pf-blue-color-850);
|
|
2758
2743
|
}
|
|
2759
2744
|
|
|
2760
|
-
.bg-
|
|
2761
|
-
background-color: var(--pf-
|
|
2745
|
+
.bg-blue-850 {
|
|
2746
|
+
background-color: var(--pf-blue-color-850);
|
|
2762
2747
|
}
|
|
2763
2748
|
|
|
2764
|
-
.color-
|
|
2765
|
-
color: var(--pf-
|
|
2749
|
+
.color-blue-900 {
|
|
2750
|
+
color: var(--pf-blue-color-900);
|
|
2766
2751
|
}
|
|
2767
2752
|
|
|
2768
|
-
.bg-
|
|
2769
|
-
background-color: var(--pf-
|
|
2753
|
+
.bg-blue-900 {
|
|
2754
|
+
background-color: var(--pf-blue-color-900);
|
|
2770
2755
|
}
|
|
2771
2756
|
|
|
2772
|
-
.color-
|
|
2773
|
-
color: var(--pf-
|
|
2757
|
+
.color-blue-950 {
|
|
2758
|
+
color: var(--pf-blue-color-950);
|
|
2774
2759
|
}
|
|
2775
2760
|
|
|
2776
|
-
.bg-
|
|
2777
|
-
background-color: var(--pf-
|
|
2761
|
+
.bg-blue-950 {
|
|
2762
|
+
background-color: var(--pf-blue-color-950);
|
|
2778
2763
|
}
|
|
2779
2764
|
|
|
2780
|
-
.color-
|
|
2781
|
-
color: var(--pf-
|
|
2765
|
+
.color-blue-1000 {
|
|
2766
|
+
color: var(--pf-blue-color-1000);
|
|
2782
2767
|
}
|
|
2783
2768
|
|
|
2784
|
-
.bg-
|
|
2785
|
-
background-color: var(--pf-
|
|
2769
|
+
.bg-blue-1000 {
|
|
2770
|
+
background-color: var(--pf-blue-color-1000);
|
|
2786
2771
|
}
|
|
2787
2772
|
|
|
2788
2773
|
.color-success {
|
|
@@ -5440,22 +5425,22 @@ p,
|
|
|
5440
5425
|
--pf-background-color-tertiary: var(--pf-gray-color-200);
|
|
5441
5426
|
--pf-background-color-quaternary: var(--pf-gray-color-250);
|
|
5442
5427
|
--pf-background-color-accent: var(--pf-secondary-color-200);
|
|
5443
|
-
--pf-background-color-highlight: var(--pf-
|
|
5444
|
-
--pf-background-brand-solid: var(--pf-
|
|
5445
|
-
--pf-background-brand-hover: var(--pf-
|
|
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);
|
|
5446
5431
|
--pf-background-color-inverted: var(--pf-tertiary-color-900);
|
|
5447
5432
|
--pf-font-color: var(--pf-gray-color-900);
|
|
5448
5433
|
--pf-font-color-inverted: var(--pf-gray-color-50);
|
|
5449
5434
|
--pf-font-color-soft: var(--pf-gray-color-700);
|
|
5450
5435
|
--pf-font-color-muted: var(--pf-gray-color-800);
|
|
5451
5436
|
--pf-font-color-placeholder: var(--pf-gray-color-450);
|
|
5452
|
-
--pf-font-color-accent: var(--pf-
|
|
5437
|
+
--pf-font-color-accent: var(--pf-blue-color-500);
|
|
5453
5438
|
--pf-font-color-disabled: var(--pf-gray-color-400);
|
|
5454
|
-
--pf-link-color: var(--pf-
|
|
5455
|
-
--pf-link-hover-color: var(--pf-
|
|
5439
|
+
--pf-link-color: var(--pf-blue-color-500);
|
|
5440
|
+
--pf-link-hover-color: var(--pf-blue-color-600);
|
|
5456
5441
|
--pf-secondary-link-color: var(--pf-tertiary-color-700);
|
|
5457
5442
|
--pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
|
|
5458
|
-
--pf-active-link-color: var(--pf-
|
|
5443
|
+
--pf-active-link-color: var(--pf-blue-color-500);
|
|
5459
5444
|
--pf-line-chart-color-one: #2b97af;
|
|
5460
5445
|
--pf-line-chart-color-two: #3ca7bd;
|
|
5461
5446
|
--pf-line-chart-color-three: #4db8cb;
|
|
@@ -5473,8 +5458,8 @@ p,
|
|
|
5473
5458
|
--pf-background-color-secondary: var(--pf-primary-color-800);
|
|
5474
5459
|
--pf-background-color-tertiary: var(--pf-primary-color-600);
|
|
5475
5460
|
--pf-background-color-quaternary: var(--pf-primary-color-500);
|
|
5476
|
-
--pf-background-color-accent: var(--pf-
|
|
5477
|
-
--pf-background-color-highlight: var(--pf-
|
|
5461
|
+
--pf-background-color-accent: var(--pf-blue-color-800);
|
|
5462
|
+
--pf-background-color-highlight: var(--pf-blue-color-700);
|
|
5478
5463
|
--pf-background-brand-solid: var(--pf-secondary-color-450);
|
|
5479
5464
|
--pf-background-brand-hover: var(--pf-secondary-color-600);
|
|
5480
5465
|
--pf-background-color-inverted: var(--pf-tertiary-color-50);
|
|
@@ -5556,16 +5541,16 @@ a:hover,
|
|
|
5556
5541
|
}
|
|
5557
5542
|
|
|
5558
5543
|
:root [data-theme=light] {
|
|
5559
|
-
--pf-button-solid-background-color: var(--pf-
|
|
5544
|
+
--pf-button-solid-background-color: var(--pf-blue-color-500);
|
|
5560
5545
|
--pf-button-solid-color: var(--pf-white-color);
|
|
5561
|
-
--pf-button-solid-hover-background-color: var(--pf-
|
|
5562
|
-
--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);
|
|
5563
5548
|
--pf-button-solid-disabled-background-color: var(--pf-gray-color-250);
|
|
5564
5549
|
--pf-button-solid-disabled-color: var(--pf-gray-color-500);
|
|
5565
|
-
--pf-button-outline-color: var(--pf-
|
|
5566
|
-
--pf-button-outline-border-color: var(--pf-
|
|
5567
|
-
--pf-button-outline-hover-color: var(--pf-
|
|
5568
|
-
--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);
|
|
5569
5554
|
--pf-button-outline-disabled-color: var(--pf-gray-color-250);
|
|
5570
5555
|
--pf-button-link-color: var(--pf-link-color);
|
|
5571
5556
|
--pf-button-link-hover-color: var(--pf-link-hover-color);
|
|
@@ -5585,11 +5570,11 @@ a:hover,
|
|
|
5585
5570
|
--pf-button-destructive-focus-color: var(--pf-white-color);
|
|
5586
5571
|
--pf-button-destructive-disabled-background-color: var(--pf-red-color-100);
|
|
5587
5572
|
--pf-button-destructive-disabled-color: var(--pf-white-color);
|
|
5588
|
-
--pf-button-soft-color: var(--pf-
|
|
5573
|
+
--pf-button-soft-color: var(--pf-blue-color-500);
|
|
5589
5574
|
--pf-button-soft-border-color: transparent;
|
|
5590
|
-
--pf-button-soft-hover-color: var(--pf-
|
|
5591
|
-
--pf-button-soft-hover-background-color: var(--pf-
|
|
5592
|
-
--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);
|
|
5593
5578
|
--pf-button-soft-focus-border-color: transparent;
|
|
5594
5579
|
--pf-button-soft-disabled-color: var(--pf-gray-color-500);
|
|
5595
5580
|
--pf-button-soft-disabled-border-color: transparent;
|