1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
|
@use '../../sass-utilities' as *;
@include pf-root($button) {
--#{$button}--Display: inline-flex;
--#{$button}--AlignItems: baseline;
--#{$button}--JustifyContent: center;
--#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$button}--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
--#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
--#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
--#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
--#{$button}--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
--#{$button}--Color: var(--pf-t--global--text--color--regular);
--#{$button}--LineHeight: var(--pf-t--global--font--line-height--body);
--#{$button}--FontWeight: var(--pf-t--global--font--weight--body--default);
--#{$button}--FontSize: var(--pf-t--global--font--size--body--default);
--#{$button}--BackgroundColor: transparent;
--#{$button}--BorderColor: transparent;
--#{$button}--BorderWidth: var(--pf-t--global--border--width--action--default);
--#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
--#{$button}--TextDecorationLine: none;
--#{$button}--TextDecorationStyle: none;
--#{$button}--TextDecorationColor: currentcolor;
--#{$button}--TransitionDelay: 0s;
--#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
--#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
--#{$button}--TransitionProperty: color, background, border-color;
--#{$button}--ScaleX: 1;
--#{$button}--ScaleY: 1;
--#{$button}--border--offset: 0;
// Hover
--#{$button}--hover--BackgroundColor: transparent;
--#{$button}--hover--BorderColor: transparent;
--#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
--#{$button}--hover--TextDecorationLine: none;
--#{$button}--hover--TextDecorationStyle: none;
--#{$button}--hover--TextDecorationColor: currentcolor;
--#{$button}--hover--ScaleX: 1;
--#{$button}--hover--ScaleY: 1;
// Clicked
--#{$button}--m-clicked--BackgroundColor: transparent;
--#{$button}--m-clicked--BorderColor: transparent;
--#{$button}--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
// Primary
--#{$button}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
--#{$button}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
--#{$button}--m-primary__icon--Color: var(--pf-t--global--icon--color--on-brand--default);
--#{$button}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
--#{$button}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
--#{$button}--m-primary--hover__icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
--#{$button}--m-primary--m-clicked--Color: var(--pf-t--global--text--color--on-brand--clicked);
--#{$button}--m-primary--m-clicked--BackgroundColor: var(--pf-t--global--color--brand--clicked);
--#{$button}--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
// Secondary
--#{$button}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
--#{$button}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
--#{$button}--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
--#{$button}--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
--#{$button}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
--#{$button}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
--#{$button}--m-secondary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
--#{$button}--m-secondary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
--#{$button}--m-secondary--m-clicked--BorderColor: var(--pf-t--global--border--color--brand--clicked);
--#{$button}--m-secondary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
--#{$button}--m-secondary--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
--#{$button}--m-secondary--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
--#{$button}--m-secondary--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
--#{$button}--m-secondary--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
--#{$button}--m-secondary--m-danger--hover--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
--#{$button}--m-secondary--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--danger--hover);
--#{$button}--m-secondary--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
--#{$button}--m-secondary--m-danger--m-clicked--BorderColor: var(--pf-t--global--border--color--status--danger--clicked);
--#{$button}--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
// Tertiary
--#{$button}--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
--#{$button}--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
--#{$button}--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
--#{$button}--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
--#{$button}--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
--#{$button}--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
--#{$button}--m-tertiary--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
--#{$button}--m-tertiary--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
--#{$button}--m-tertiary--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
--#{$button}--m-tertiary--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
// Link
--#{$button}--m-link--BorderRadius: var(--pf-t--global--border--radius--small);
--#{$button}--m-link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
--#{$button}--m-link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
--#{$button}--m-link--Color: var(--pf-t--global--text--color--brand--default);
--#{$button}--m-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
--#{$button}--m-link__icon--Color: var(--pf-t--global--icon--color--brand--default);
--#{$button}--m-link--hover--Color: var(--pf-t--global--text--color--brand--hover);
--#{$button}--m-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
--#{$button}--m-link--hover__icon--Color: var(--pf-t--global--text--color--brand--hover);
--#{$button}--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
--#{$button}--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
--#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
--#{$button}--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
--#{$button}--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
--#{$button}--m-link--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
--#{$button}--m-link--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
--#{$button}--m-link--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
--#{$button}--m-link--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$button}--m-link--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$button}--m-link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
// Link danger
--#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
--#{$button}--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
--#{$button}--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
--#{$button}--m-link--m-danger--hover--Color: var(--pf-t--global--text--color--status--danger--hover);
--#{$button}--m-link--m-danger--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
--#{$button}--m-link--m-danger--hover__icon--Color: var(--pf-t--global--text--color--status--danger--hover);
--#{$button}--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
--#{$button}--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
--#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
// Link inline
--#{$button}--m-link--m-inline--Display: inline-flex;
--#{$button}--m-link--m-inline--JustifyContent: flex-start;
--#{$button}--m-link--m-inline--FontSize: initial;
--#{$button}--m-link--m-inline--LineHeight: initial;
--#{$button}--m-link--m-inline--FontWeight: initial;
--#{$button}--m-link--m-inline--PaddingBlockStart: 0;
--#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
--#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
--#{$button}--m-link--m-inline--PaddingInlineStart: 0;
--#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
--#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
--#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
--#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
--#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
--#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
--#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
--#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
--#{$button}--span--m-link--m-inline--Display: inline;
--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
--#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
--#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
--#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
--#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
--#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
--#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
// Plain
--#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
--#{$button}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
--#{$button}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
--#{$button}--m-plain--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-plain__icon--Color: var(--pf-t--global--text--color--regular);
--#{$button}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
--#{$button}--m-plain--hover--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
--#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
--#{$button}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
--#{$button}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
--#{$button}--m-plain--disabled--BackgroundColor: transparent;
--#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
--#{$button}--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
--#{$button}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
--#{$button}--m-plain--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
--#{$button}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
--#{$button}--m-plain--BorderColor: transparent;
--#{$button}--m-plain--m-clicked--BorderColor: var(--pf-t--global--border--color--high-contrast);
--#{$button}--m-plain--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
// Plain no padding
--#{$button}--m-plain--m-no-padding--MinWidth: auto;
--#{$button}--m-plain--m-no-padding--PaddingBlockStart: 0;
--#{$button}--m-plain--m-no-padding--PaddingInlineEnd: 0;
--#{$button}--m-plain--m-no-padding--PaddingBlockEnd: 0;
--#{$button}--m-plain--m-no-padding--PaddingInlineStart: 0;
--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
--#{$button}--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
--#{$button}--m-plain--m-no-padding--BackgroundColor: transparent;
--#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-plain--m-no-padding--hover--BackgroundColor: transparent;
--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
--#{$button}--m-plain--m-no-padding--border--offset: calc(#{pf-size-prem(2px)} * -1);
// Control
--#{$button}--m-control--BorderRadius: var(--pf-t--global--border--radius--small);
--#{$button}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}--m-control--Color: var(--pf-t--global--text--color--regular);
--#{$button}--m-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-control--BorderColor: var(--pf-t--global--border--color--default);
--#{$button}--m-control--BorderWidth: var(--pf-t--global--border--width--control--default);
--#{$button}--m-control__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-control--hover--Color: var(--pf-t--global--text--color--regular);
--#{$button}--m-control--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-control--hover--BorderColor: var(--pf-t--global--border--color--hover);
--#{$button}--m-control--hover--BorderWidth: var(--pf-t--global--border--width--control--hover);
--#{$button}--m-control--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-control--m-clicked--Color: var(--pf-t--global--text--color--regular);
--#{$button}--m-control--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
--#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
--#{$button}--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
--#{$button}--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
// Stateful
--#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
--#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
--#{$button}--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
// Read
--#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-read--BorderColor: var(--pf-t--global--border--color--default);
--#{$button}--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-read--hover--BorderColor: var(--pf-t--global--border--color--hover);
--#{$button}--m-read--m-clicked--BackgroundColor: var(--pf-t--global--background--color--control--default);
--#{$button}--m-read--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
// Unread
--#{$button}--m-unread--Color: var(--pf-t--global--text--color--status--unread--on-default--default);
--#{$button}--m-unread--BackgroundColor: var(--pf-t--global--color--status--unread--default);
--#{$button}--m-unread__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--default);
--#{$button}--m-unread--hover--Color: var(--pf-t--global--text--color--status--unread--on-default--hover);
--#{$button}--m-unread--hover--BackgroundColor: var(--pf-t--global--color--status--unread--hover);
--#{$button}--m-unread--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--hover);
--#{$button}--m-unread--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-default--clicked);
--#{$button}--m-unread--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--clicked);
--#{$button}--m-unread--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-default--clicked);
// Attention
--#{$button}--m-attention--Color: var(--pf-t--global--text--color--status--unread--on-attention--default);
--#{$button}--m-attention--BackgroundColor: var(--pf-t--global--color--status--unread--attention--default);
--#{$button}--m-attention__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--default);
--#{$button}--m-attention--hover--Color: var(--pf-t--global--text--color--status--unread--on-attention--hover);
--#{$button}--m-attention--hover--BackgroundColor: var(--pf-t--global--color--status--unread--attention--hover);
--#{$button}--m-attention--hover__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--hover);
--#{$button}--m-attention--m-clicked--Color: var(--pf-t--global--text--color--status--unread--on-attention--clicked);
--#{$button}--m-attention--m-clicked--BackgroundColor: var(--pf-t--global--color--status--unread--attention--clicked);
--#{$button}--m-attention--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--unread--on-attention--clicked);
// Warning
--#{$button}--m-warning--Color: var(--pf-t--global--text--color--status--on-warning--default);
--#{$button}--m-warning--BackgroundColor: var(--pf-t--global--color--status--warning--default);
--#{$button}--m-warning__icon--Color: var(--pf-t--global--icon--color--status--on-warning--default);
--#{$button}--m-warning--hover--Color: var(--pf-t--global--text--color--status--on-warning--hover);
--#{$button}--m-warning--hover--BackgroundColor: var(--pf-t--global--color--status--warning--hover);
--#{$button}--m-warning--hover__icon--Color: var(--pf-t--global--icon--color--status--on-warning--hover);
--#{$button}--m-warning--m-clicked--Color: var(--pf-t--global--text--color--status--on-warning--clicked);
--#{$button}--m-warning--m-clicked--BackgroundColor: var(--pf-t--global--color--status--warning--clicked);
--#{$button}--m-warning--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-warning--clicked);
// Danger
--#{$button}--m-danger--Color: var(--pf-t--global--text--color--status--on-danger--default);
--#{$button}--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
--#{$button}--m-danger__icon--Color: var(--pf-t--global--icon--color--status--on-danger--default);
--#{$button}--m-danger--hover--Color: var(--pf-t--global--text--color--status--on-danger--hover);
--#{$button}--m-danger--hover--BackgroundColor: var(--pf-t--global--color--status--danger--hover);
--#{$button}--m-danger--hover__icon--Color: var(--pf-t--global--icon--color--status--on-danger--hover);
--#{$button}--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--on-danger--clicked);
--#{$button}--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--color--status--danger--clicked);
--#{$button}--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--on-danger--clicked);
// CTA
--#{$button}--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--spacious);
--#{$button}--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
--#{$button}--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
--#{$button}--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
--#{$button}--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
--#{$button}--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--lg);
// Small
--#{$button}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
--#{$button}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
--#{$button}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
--#{$button}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
// Disabled
--#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
--#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
--#{$button}--disabled--TextDecorationColor: currentcolor;
--#{$button}--disabled--BorderColor: transparent;
--#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
// Icon
--#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
--#{$button}__icon--MarginInlineStart: 0;
--#{$button}__icon--MarginInlineEnd: 0;
--#{$button}__icon--m-start--MarginInlineEnd: 0;
--#{$button}__icon--m-end--MarginInlineStart: 0;
--#{$button}--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
--#{$button}--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
--#{$button}__icon--TransitionDelay: 0s;
--#{$button}__icon--TransitionTimingFunction: auto;
--#{$button}__icon--TransitionDuration: 0s;
--#{$button}__icon--TransitionProperty: none;
--#{$button}__icon--Rotate: 0deg;
--#{$button}--hover__icon--TransitionTimingFunction: auto;
--#{$button}--hover__icon--TransitionDuration: 0s;
--#{$button}--hover__icon--TransitionProperty: none;
--#{$button}--hover__icon--Rotate: 0deg;
--#{$button}__icon--ScaleX: 1;
--#{$button}__icon--ScaleY: 1;
--#{$button}--hover__icon--ScaleX: 1;
--#{$button}--hover__icon--ScaleY: 1;
// Favorite button
--#{$button}--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
--#{$button}--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
--#{$button}--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
--#{$button}--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
--#{$button}--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
--#{$button}--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--default);
--#{$button}__icon--favorite--Opacity: 1;
--#{$button}__icon--favorited--Opacity: 0;
--#{$button}--m-favorited__icon--favorite--Opacity: 0;
--#{$button}--m-favorited__icon--favorited--Opacity: 1;
--#{$button}__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
// Progress
--#{$button}__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
--#{$button}__progress--Opacity: 0;
--#{$button}__progress--TranslateY: -50%;
--#{$button}__progress--TranslateX: 0;
--#{$button}__progress--InsetBlockStart: 50%;
--#{$button}__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}__progress--Color: var(--#{$button}__icon--Color);
--#{$button}--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
--#{$button}--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width) / 2);
--#{$button}--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
--#{$button}--m-in-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--#{$button}__progress--width));
--#{$button}--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
--#{$button}--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
--#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
// Settings
--#{$button}--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
--#{$button}--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
--#{$button}--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
--#{$button}--m-settings--hover__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
--#{$button}--m-settings--hover__icon--Rotate: 60deg;
// Count
--#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--alt);
// Block
--#{$button}--m-block--Display: flex;
--#{$button}--m-block--Width: 100%;
// Hamburger
--#{$button}--hamburger-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
--#{$button}--hamburger-icon--TransitionDuration: var(--pf-t--global--motion--duration--md);
--#{$button}--hamburger-icon--top--path--base: path("M1,1 L9,1");
--#{$button}--hamburger-icon--middle--path--base: path("M1,5 L9,5");
--#{$button}--hamburger-icon--arrow--path--base: path("M1,5 L1,5 L1,5");
--#{$button}--hamburger-icon--bottom--path--base: path("M9,9 L1,9");
--#{$button}--hamburger-icon--top--path: var(--#{$button}--hamburger-icon--top--path--base);
--#{$button}--hamburger-icon--middle--path: var(--#{$button}--hamburger-icon--middle--path--base);
--#{$button}--hamburger-icon--arrow--path: var(--#{$button}--hamburger-icon--arrow--path--base);
--#{$button}--hamburger-icon--bottom--path: var(--#{$button}--hamburger-icon--bottom--path--base);
--#{$button}--hamburger-icon--top--collapse--path: path("M5,1 L9,1");
--#{$button}--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
--#{$button}--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
--#{$button}--m-hamburger__icon--m-expand--ScaleX: -1;
}
.#{$button} {
position: relative;
display: var(--#{$button}--Display);
gap: var(--#{$button}--Gap);
align-items: var(--#{$button}--AlignItems);
justify-content: var(--#{$button}--JustifyContent);
min-width: var(--#{$button}--MinWidth);
padding-block-start: var(--#{$button}--PaddingBlockStart);
padding-block-end: var(--#{$button}--PaddingBlockEnd);
padding-inline-start: var(--#{$button}--PaddingInlineStart);
padding-inline-end: var(--#{$button}--PaddingInlineEnd);
font-size: var(--#{$button}--FontSize, inherit);
font-weight: var(--#{$button}--FontWeight, inherit);
line-height: var(--#{$button}--LineHeight, inherit);
color: var(--#{$button}--Color);
text-align: center;
text-decoration-line: var(--#{$button}--TextDecorationLine);
text-decoration-style: var(--#{$button}--TextDecorationStyle);
text-decoration-color: var(--#{$button}--TextDecorationColor);
white-space: nowrap;
cursor: pointer; // needed for when a button does not use <button> - eg, <span>
// stylelint-disable property-no-vendor-prefix
-webkit-user-select: none;
user-select: none;
// stylelint-enable property-no-vendor-prefix
background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
border: 0;
border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
border-end-start-radius: var(--#{$button}--BorderEndStartRadius, var(--#{$button}--BorderRadius));
border-end-end-radius: var(--#{$button}--BorderEndEndRadius, var(--#{$button}--BorderRadius));
transition-delay: var(--#{$button}--TransitionDelay);
transition-timing-function: var(--#{$button}--TransitionTimingFunction);
transition-duration: var(--#{$button}--TransitionDuration);
transition-property: var(--#{$button}--TransitionProperty);
scale: var(--#{$button}--ScaleX) var(--#{$button}--ScaleY);
&::after {
position: absolute;
inset: var(--#{$button}--border--offset);
pointer-events: none;
content: "";
border: var(--#{$button}--BorderWidth) solid;
border-color: var(--#{$button}--BorderColor);
border-radius: inherit;
transition: inherit;
}
// Primary
&.pf-m-primary {
--#{$button}--Color: var(--#{$button}--m-primary--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-primary--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-primary__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-primary--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-primary--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-primary--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-primary--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-primary--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-primary--m-clicked__icon--Color);
.#{$badge}.pf-m-unread {
--#{$badge}--BorderColor: var(--#{$button}--m-primary__c-badge--BorderColor);
}
}
// Secondary
&.pf-m-secondary {
--#{$button}--Color: var(--#{$button}--m-secondary--Color);
--#{$button}--BorderColor: var(--#{$button}--m-secondary--BorderColor);
--#{$button}--TransitionDuration: var(--#{$button}--m-secondary--TransitionDuration);
--#{$button}__icon--Color: var(--#{$button}--m-secondary__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-secondary--hover--Color);
--#{$button}--hover--BorderColor: var(--#{$button}--m-secondary--hover--BorderColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-secondary--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-secondary--m-clicked--Color);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-clicked--BorderColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-clicked__icon--Color);
--#{$button}--m-danger--Color: var(--#{$button}--m-secondary--m-danger--Color);
--#{$button}--m-danger__icon--Color: var(--#{$button}--m-secondary--m-danger__icon--Color);
--#{$button}--m-danger--hover--Color: var(--#{$button}--m-secondary--m-danger--hover--Color);
--#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-secondary--m-danger--hover__icon--Color);
--#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-secondary--m-danger--m-clicked--Color);
--#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-secondary--m-danger--m-clicked__icon--Color);
&.pf-m-danger {
--#{$button}--m-secondary--BorderColor: var(--#{$button}--m-secondary--m-danger--BorderColor);
--#{$button}--m-secondary--hover--BorderColor: var(--#{$button}--m-secondary--m-danger--hover--BorderColor);
--#{$button}--m-secondary--m-clicked--BorderColor: var(--#{$button}--m-secondary--m-danger--m-clicked--BorderColor);
--#{$button}--m-danger--BackgroundColor: transparent;
--#{$button}--m-danger--hover--BackgroundColor: transparent;
--#{$button}--m-danger--m-clicked--BackgroundColor: transparent;
}
}
// Tertiary
&.pf-m-tertiary {
--#{$button}--Color: var(--#{$button}--m-tertiary--Color);
--#{$button}--BorderColor: var(--#{$button}--m-tertiary--BorderColor);
--#{$button}--TransitionDuration: var(--#{$button}--m-tertiary--TransitionDuration);
--#{$button}__icon--Color: var(--#{$button}--m-tertiary__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-tertiary--hover--Color);
--#{$button}--hover--BorderColor: var(--#{$button}--m-tertiary--hover--BorderColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-tertiary--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-tertiary--m-clicked--Color);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-tertiary--m-clicked--BorderColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-tertiary--m-clicked__icon--Color);
}
// Link
&.pf-m-link {
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--PaddingInlineEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-link--PaddingInlineStart);
--#{$button}--Color: var(--#{$button}--m-link--Color);
--#{$button}--BorderWidth: var(--#{$button}--m-link--BorderWidth);
--#{$button}--hover--BorderColor: var(--#{$button}--m-link--hover--BorderColor);
--#{$button}--hover--BorderWidth: var(--#{$button}--m-link--hover--BorderWidth);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-link--m-clicked--BorderColor);
--#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-link--m-clicked--BorderWidth);
--#{$button}--BorderColor: var(--#{$button}--m-link--BorderColor);
--#{$button}--BorderRadius: var(--#{$button}--m-link--BorderRadius);
--#{$button}--BackgroundColor: var(--#{$button}--m-link--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-link__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-link--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-link--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-link--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
&.pf-m-inline {
@at-root span#{&} {
--#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
--#{$button}__icon--m-start--MarginInlineEnd: var(--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
--#{$button}__icon--m-end--MarginInlineStart: var(--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart);
}
--#{$button}--Display: var(--#{$button}--m-link--m-inline--Display);
--#{$button}--JustifyContent: var(--#{$button}--m-link--m-inline--JustifyContent);
--#{$button}--FontSize: var(--#{$button}--m-link--m-inline--FontSize);
--#{$button}--LineHeight: var(--#{$button}--m-link--m-inline--LineHeight);
--#{$button}--FontWeight: var(--#{$button}--m-link--m-inline--FontWeight);
--#{$button}--PaddingBlockStart: var(--#{$button}--m-link--m-inline--PaddingBlockStart);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
--#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
--#{$button}--BackgroundColor: transparent;
--#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
--#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
--#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
--#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
--#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
--#{$button}--hover--BackgroundColor: transparent;
--#{$button}--m-clicked--BackgroundColor: transparent;
--#{$button}--disabled--BackgroundColor: transparent;
--#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
--#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
--#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
--#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
--#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
--#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
--#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
--#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
--#{$button}--BorderWidth: 0;
--#{$button}--hover--BorderWidth: 0;
--#{$button}--m-clicked--BorderWidth: 0;
text-align: start;
white-space: normal;
background: transparent; // don't show the ripple effect for inline links
outline-offset: #{pf-size-prem(2px)};
}
&.pf-m-danger {
--#{$button}--m-danger--Color: var(--#{$button}--m-link--m-danger--Color);
--#{$button}--m-danger--BackgroundColor: var(--#{$button}--m-link--m-danger--BackgroundColor);
--#{$button}--m-danger__icon--Color: var(--#{$button}--m-link--m-danger__icon--Color);
--#{$button}--m-danger--hover--Color: var(--#{$button}--m-link--m-danger--hover--Color);
--#{$button}--m-danger--hover--BackgroundColor: var(--#{$button}--m-link--m-danger--hover--BackgroundColor);
--#{$button}--m-danger--hover__icon--Color: var(--#{$button}--m-link--m-danger--hover__icon--Color);
--#{$button}--m-danger--m-clicked--Color: var(--#{$button}--m-link--m-danger--m-clicked--Color);
--#{$button}--m-danger--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-danger--m-clicked--BackgroundColor);
--#{$button}--m-danger--m-clicked__icon--Color: var(--#{$button}--m-link--m-danger--m-clicked__icon--Color);
}
&.pf-m-display-lg {
--#{$button}--FontSize: var(--#{$button}--m-link--m-display-lg--FontSize);
}
}
// Warning
&.pf-m-warning {
--#{$button}--Color: var(--#{$button}--m-warning--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-warning--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-warning__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-warning--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-warning--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-warning--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-warning--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-warning--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-warning--m-clicked__icon--Color);
}
// Danger
&.pf-m-danger {
--#{$button}--Color: var(--#{$button}--m-danger--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-danger--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-danger__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-danger--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-danger--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-danger--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-danger--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-danger--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-danger--m-clicked__icon--Color);
}
// Control
&.pf-m-control {
--#{$button}--BorderRadius: var(--#{$button}--m-control--BorderRadius);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-control--PaddingInlineStart);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-control--PaddingInlineEnd);
--#{$button}--Color: var(--#{$button}--m-control--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-control--BackgroundColor);
--#{$button}--BorderColor: var(--#{$button}--m-control--BorderColor);
--#{$button}--BorderWidth: var(--#{$button}--m-control--BorderWidth);
--#{$button}__icon--Color: var(--#{$button}--m-control__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-control--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-control--hover--BackgroundColor);
--#{$button}--hover--BorderColor: var(--#{$button}--m-control--hover--BorderColor);
--#{$button}--hover--BorderWidth: var(--#{$button}--m-control--hover--BorderWidth);
--#{$button}--hover__icon--Color: var(--#{$button}--m-control--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-control--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-control--m-clicked--BackgroundColor);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-control--m-clicked--BorderColor);
--#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-control--m-clicked--BorderWidth);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-control--m-small--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-control--m-small--PaddingInlineStart);
}
// Stateful
&.pf-m-stateful {
--#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-stateful--PaddingInlineStart);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-stateful--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-stateful--m-small--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-stateful--m-small--PaddingInlineStart);
}
// Read
&.pf-m-read {
--#{$button}--BackgroundColor: var(--#{$button}--m-read--BackgroundColor);
--#{$button}--BorderColor: var(--#{$button}--m-read--BorderColor);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-read--hover--BackgroundColor);
--#{$button}--hover--BorderColor: var(--#{$button}--m-read--hover--BorderColor);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-read--m-clicked--BackgroundColor);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-read--m-clicked--BorderColor);
}
// Unread
&.pf-m-unread {
--#{$button}--Color: var(--#{$button}--m-unread--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-unread--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-unread__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-unread--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-unread--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-unread--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-unread--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-unread--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-unread--m-clicked__icon--Color);
}
// Attention
&.pf-m-attention {
--#{$button}--Color: var(--#{$button}--m-attention--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-attention--BackgroundColor);
--#{$button}__icon--Color: var(--#{$button}--m-attention__icon--Color);
--#{$button}--hover--Color: var(--#{$button}--m-attention--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-attention--hover--BackgroundColor);
--#{$button}--hover__icon--Color: var(--#{$button}--m-attention--hover__icon--Color);
--#{$button}--m-clicked--Color: var(--#{$button}--m-attention--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-attention--m-clicked--BackgroundColor);
--#{$button}--m-clicked__icon--Color: var(--#{$button}--m-attention--m-clicked__icon--Color);
}
// Icon buttons
&.pf-m-plain {
--#{$button}--BorderWidth: var(--#{$button}--m-plain--BorderWidth);
--#{$button}--hover--BorderColor: var(--#{$button}--m-plain--hover--BorderColor);
--#{$button}--hover--BorderWidth: var(--#{$button}--m-plain--hover--BorderWidth);
--#{$button}--m-clicked--BorderColor: var(--#{$button}--m-plain--m-clicked--BorderColor);
--#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-plain--m-clicked--BorderWidth);
--#{$button}--BorderColor: var(--#{$button}--m-plain--BorderColor);
--#{$button}--BorderRadius: var(--#{$button}--m-plain--BorderRadius);
--#{$button}--Color: var(--#{$button}--m-plain--Color);
--#{$button}__icon--Color: var(--#{$button}--m-plain__icon--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-plain--BackgroundColor);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--PaddingInlineEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--PaddingInlineStart);
--#{$button}__progress--Color: var(--#{$button}--m-in-progress--m-plain--Color);
--#{$button}--hover--Color: var(--#{$button}--m-plain--hover--Color);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--hover--BackgroundColor);
--#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
--#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
--#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
--#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-small--PaddingInlineStart);
&.pf-m-no-padding {
--#{$button}__icon--Color: var(--#{$button}--m-plain--m-no-padding__icon--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--BackgroundColor);
--#{$button}--hover--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--hover--BackgroundColor);
--#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
--#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
--#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
--#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
--#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
--#{$button}--border--offset: var(--#{$button}--m-plain--m-no-padding--border--offset);
min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
background: var(--#{$button}--BackgroundColor); // override the ripple background
}
}
&.pf-m-block {
--#{$button}--Display: var(--#{$button}--m-block--Display);
width: var(--#{$button}--m-block--Width);
}
&.pf-m-small {
--#{$button}--PaddingBlockStart: var(--#{$button}--m-small--PaddingBlockStart);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-small--PaddingInlineEnd);
--#{$button}--PaddingBlockEnd: var(--#{$button}--m-small--PaddingBlockEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-small--PaddingInlineStart);
}
&.pf-m-display-lg {
--#{$button}--PaddingBlockStart: var(--#{$button}--m-display-lg--PaddingBlockStart);
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-display-lg--PaddingInlineEnd);
--#{$button}--PaddingBlockEnd: var(--#{$button}--m-display-lg--PaddingBlockEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-display-lg--PaddingInlineStart);
--#{$button}--FontSize: var(--#{$button}--m-display-lg--FontSize);
}
&.pf-m-favorite .#{$button}__icon {
display: grid;
transition-timing-function: var(--#{$button}--m-favorite__icon--TransitionTimingFunction);
transition-duration: var(--#{$button}--m-favorite__icon--TransitionDuration);
transition-property: color;
}
// Favorite button when favorited
&.pf-m-favorited {
--#{$button}__icon--Color: var(--#{$button}--m-favorited__icon--Color);
--#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-favorited__icon--Color);
--#{$button}--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
--#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--#{$button}--m-favorited--hover__icon--Color);
--#{$button}__icon--favorite--Opacity: var(--#{$button}--m-favorited__icon--favorite--Opacity);
--#{$button}__icon--favorited--Opacity: var(--#{$button}--m-favorited__icon--favorited--Opacity);
}
// Favorite button will run an animation when favorited
&.pf-m-favorited .#{$button}__icon {
animation-name: #{$button}-icon-favorited;
animation-duration: var(--#{$button}--m-favorited__icon--AnimationDuration);
animation-timing-function: var(--#{$button}--m-favorited__icon--AnimationTimingFunction);
}
&.pf-m-settings {
--#{$button}__icon--TransitionProperty: rotate;
--#{$button}__icon--TransitionDuration: var(--#{$button}--m-settings__icon--TransitionDuration);
--#{$button}__icon--TransitionTimingFunction: var(--#{$button}--m-settings__icon--TransitionTimingFunction);
--#{$button}--hover__icon--TransitionProperty: rotate;
--#{$button}--hover__icon--TransitionDuration: var(--#{$button}--m-settings--hover__icon--TransitionDuration);
--#{$button}--hover__icon--TransitionTimingFunction: var(--#{$button}--m-settings--hover__icon--TransitionTimingFunction);
--#{$button}--hover__icon--Rotate: var(--#{$button}--m-settings--hover__icon--Rotate);
}
&.pf-m-hamburger {
--#{$button}__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
--#{$button}__icon--TransitionDuration: 0s;
--#{$button}__icon--TransitionProperty: scale;
--#{$button}--hover__icon--TransitionDelay: var(--#{$button}--hamburger-icon--TransitionDuration);
--#{$button}--hover__icon--TransitionDuration: 0s;
--#{$button}--hover__icon--TransitionProperty: scale;
&.pf-m-expand {
@include pf-v6-hamburger;
}
&.pf-m-collapse {
@include pf-v6-hamburger($collapse: true);
}
}
&:hover,
&:focus {
--#{$button}--Color: var(--#{$button}--hover--Color);
--#{$button}--BackgroundColor: var(--#{$button}--hover--BackgroundColor);
--#{$button}--BorderColor: var(--#{$button}--hover--BorderColor);
--#{$button}--BorderWidth: var(--#{$button}--hover--BorderWidth);
--#{$button}--ScaleX: var(--#{$button}--hover--ScaleX);
--#{$button}--ScaleY: var(--#{$button}--hover--ScaleY);
--#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
--#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
--#{$button}__icon--TransitionTimingFunction: var(--#{$button}--hover__icon--TransitionTimingFunction);
--#{$button}__icon--TransitionDuration: var(--#{$button}--hover__icon--TransitionDuration);
--#{$button}__icon--TransitionProperty: var(--#{$button}--hover__icon--TransitionProperty);
--#{$button}__icon--Rotate: var(--#{$button}--hover__icon--Rotate);
--#{$button}__icon--ScaleX: var(--#{$button}--hover__icon--ScaleX);
--#{$button}__icon--ScaleY: var(--#{$button}--hover__icon--ScaleY);
text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
outline-offset: var(--pf-t--global--focus-ring--position--offset);
}
&:active,
&.pf-m-clicked {
--#{$button}--Color: var(--#{$button}--m-clicked--Color);
--#{$button}--BackgroundColor: var(--#{$button}--m-clicked--BackgroundColor);
--#{$button}--BorderWidth: var(--#{$button}--m-clicked--BorderWidth);
--#{$button}--BorderColor: var(--#{$button}--m-clicked--BorderColor);
--#{$button}__icon--Color: var(--#{$button}--m-clicked__icon--Color);
}
&:active {
background-size: 100% 100%; // apply the background surface for ripple
transition-duration: 0s; // transition immediately
}
// Disabled buttons
// These styles need to go after the button types because they need to override some of the type styling
&:disabled,
&.pf-m-disabled {
pointer-events: none;
}
&:disabled,
&.pf-m-disabled,
&.pf-m-aria-disabled {
color: var(--#{$button}--disabled--Color);
text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
background: var(--#{$button}--disabled--BackgroundColor);
&::after {
border-color: transparent;
}
.#{$button}__icon {
color: var(--#{$button}--disabled__icon--Color);
}
}
&.pf-m-aria-disabled {
--#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--#{$button}--TextDecorationLine);
--#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--#{$button}--TextDecorationStyle);
cursor: default;
}
&.pf-m-progress {
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-progress--PaddingInlineEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-progress--PaddingInlineStart);
}
&.pf-m-in-progress {
--#{$button}--m-link--m-inline--PaddingInlineStart: var(--#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart);
&:not(.pf-m-plain) {
--#{$button}--PaddingInlineEnd: var(--#{$button}--m-in-progress--PaddingInlineEnd);
--#{$button}--PaddingInlineStart: var(--#{$button}--m-in-progress--PaddingInlineStart);
}
&.pf-m-plain {
--#{$button}__progress--InsetInlineStart: var(--#{$button}--m-in-progress--m-plain__progress--InsetInlineStart);
--#{$button}__progress--TranslateX: var(--#{$button}--m-in-progress--m-plain__progress--TranslateX);
> :not(.#{$button}__progress) {
opacity: 0;
}
}
}
&.pf-m-notify .#{$button}__icon {
animation-name: #{$button}-icon-notify;
animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
}
}
.#{$button}__icon {
margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
color: var(--#{$button}__icon--Color);
transition-delay: var(--#{$button}__icon--TransitionDelay);
transition-timing-function: var(--#{$button}__icon--TransitionTimingFunction);
transition-duration: var(--#{$button}__icon--TransitionDuration);
transition-property: var(--#{$button}__icon--TransitionProperty);
rotate: var(--#{$button}__icon--Rotate);
scale: var(--#{$button}__icon--ScaleX) var(--#{$button}__icon--ScaleY);
&.pf-m-start {
--#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
}
&.pf-m-end {
--#{$button}__icon--MarginInlineStart: var(--#{$button}__icon--m-end--MarginInlineStart);
}
}
.#{$button}__icon-favorite,
.#{$button}__icon-favorited {
grid-area: 1 / 1 / 1 / 1;
transition-duration: var(--#{$button}__icon--favorite--TransitionDuration);
transition-property: opacity;
}
.#{$button}__icon-favorite {
opacity: var(--#{$button}__icon--favorite--Opacity);
}
.#{$button}__icon-favorited {
opacity: var(--#{$button}__icon--favorited--Opacity);
}
.#{$button}__progress {
position: absolute;
inset-block-start: var(--#{$button}__progress--InsetBlockStart);
inset-inline-start: var(--#{$button}__progress--InsetInlineStart);
line-height: 1;
color: var(--#{$button}__progress--Color);
transform: translate(var(--#{$button}__progress--TranslateX), var(--#{$button}__progress--TranslateY));
.#{$spinner} {
--#{$spinner}--Color: currentcolor;
}
}
// enable inline link to have underline when used with truncate
.#{$button}__text {
// stylelint-disable property-disallowed-list
text-decoration: inherit;
// stylelint-enable property-disallowed-list
}
.#{$button}__count {
display: inline-flex;
align-items: center;
}
.#{$button}--hamburger-icon {
path {
fill: none;
stroke: currentcolor;
stroke-linecap: round;
stroke-linejoin: round;
transition: d var(--#{$button}--hamburger-icon--TransitionDuration) var(--#{$button}--hamburger-icon--TransitionTimingFunction);
}
}
.#{$button}--hamburger-icon--top {
d: var(--#{$button}--hamburger-icon--top--path);
}
.#{$button}--hamburger-icon--middle {
d: var(--#{$button}--hamburger-icon--middle--path);
}
.#{$button}--hamburger-icon--arrow {
d: var(--#{$button}--hamburger-icon--arrow--path);
}
.#{$button}--hamburger-icon--bottom {
d: var(--#{$button}--hamburger-icon--bottom--path);
}
@keyframes #{$button}-icon-notify {
33% {
transform: rotate(30deg);
}
66% {
transform: rotate(-60deg);
}
}
@keyframes #{$button}-icon-favorited {
50% {
scale: 1.5;
}
}
|
