openbridge-webcomponents-legacy/packages/openbridge-webcomponents/src/palettes/variables.css at main · Blue-Water-Autonomy/openbridge-webcomponents-legacy · GitHub

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
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
.obc-component-size-regular {
  --global-size-spacing-touch-target-min: 48px;
  --global-size-spacing-visual-target-min: 32px;
  --global-size-spacing-icon-icon-size-regular: 24px;
  --ui-components-button-label-spacing: 8px;
  --ui-components-button-padding-horizontal: 4px;
  --global-size-spacing-selection-size-min: 24px;
  --ui-components-button-stroke-weight: 1px;
  --global-size-spacing-target-padding: 4px;
  --ui-components-toggle-switch-thumb-size: 12px;
  --ui-components-toggle-switch-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-toggle-switch-selection-padding: 6px;
  --ui-components-toggle-switch-selection-width: 48px;
  --global-size-spacing-border-weight-focusframe: 2px;
  --ui-components-toggle-switch-item-border-radius: var(
    --border-radius-br-round
  );
  --global-typography-button-font-size: var(--font-size-100);
  --global-typography-button-line-height: var(--line-height-100);
  --global-typography-button-font-weight: var(--font-weight-semibold);
  --global-typography-label-font-size: var(--font-size-075);
  --global-typography-label-line-height: var(--line-height-075);
  --global-typography-label-font-weight: var(--font-weight-regular);
  --global-typography-body-font-size: var(--font-size-100);
  --global-typography-body-line-height: var(--line-height-100);
  --global-typography-body-font-weight: var(--font-weight-regular);
  --global-typography-body-active-font-size: var(--font-size-100);
  --global-typography-body-active-line-height: var(--line-height-100);
  --global-typography-body-active-font-weight: var(--font-weight-bold);
  --ui-components-checkbox-visual-target-size: var(
    --global-size-spacing-selection-size-min
  );
  --ui-components-checkbox-border-radius: var(
    --global-border-radius-border-radius-check
  );
  --ui-components-checkbox-label-spacing: 8px;
  --ui-components-checkbox-nested-item-padding-left: 32px;
  --ui-components-app-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-app-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-app-button-border-radius: var(
    --global-border-radius-border-radius-round
  );
  --ui-components-app-button-padding-vertical: 4px;
  --alert-components-badge-icon-size: 12px;
  --alert-components-badge-label-spacing: 2px;
  --alert-components-badge-border-radius: var(--border-radius-br-2);
  --alert-components-alert-frame-border-radius: var(
    --ui-components-button-border-radius
  );
  --menu-navigation-components-navigation-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --menu-navigation-components-navigation-item-label-spacing: 8px;
  --menu-navigation-components-navigation-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-navigation-item-padding-horizontal: var(
    --global-size-spacing-list-item-menu-padding-horizonal-list-item
  );
  --menu-navigation-components-navigation-item-margin-horizontal-icon-button: var(
    --global-size-spacing-list-item-menu-margin-horizontal-context-menu
  );
  --ui-components-checkbox-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-toggle-switch-item-label-spacing: 8px;
  --ui-components-toggle-switch-selection-height: var(
    --global-size-spacing-selection-size-min
  );
  --ui-components-icon-button-label-spacing: 0;
  --ui-components-icon-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-icon-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-app-button-label-spacing: 0;
  --ui-components-card-label-spacing: 8px;
  --alert-components-alert-frame-icon-size: var(
    --global-size-spacing-icon-icon-size-xsmall
  );
  --alert-components-alert-frame-padding-horizontal: 4px;
  --alert-components-alert-frame-padding-vertical: 2px;
  --alert-components-alert-frame-small-flip-border-radius: var(
    --alert-components-badge-border-radius
  );
  --global-typography-overline-font-size: var(--font-size-100);
  --global-typography-overline-line-height: var(--line-height-100);
  --global-typography-overline-font-weight: var(--font-weight-semibold);
  --global-typography-overline-letter-spacing: 0.15000000596046448px;
  --global-typography-label-active-font-size: var(--font-size-075);
  --global-typography-label-active-line-height: var(--line-height-075);
  --global-typography-label-active-font-weight: var(--font-weight-bold);
  --alert-components-badge-padding: 2px;
  --menu-navigation-components-navigation-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-radio-button-label-spacing: 8px;
  --ui-components-radio-button-selection-size: var(
    --global-size-spacing-selection-size-min
  );
  --ui-components-radio-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-checkbox-padding-horizontal: var(
    --global-size-spacing-list-item-menu-padding-horizonal-list-item
  );
  --ui-components-toggle-switch-item-padding-horizontal: 8px;
  --ui-components-radio-button-thumb-size: 8px;
  --ui-components-toggle-switch-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-radio-button-padding-horizontal: var(
    --global-size-spacing-list-item-menu-padding-horizonal-list-item
  );
  --ui-components-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-context-menu-menu-width: 200px;
  --ui-components-accordion-label-spacing: 8px;
  --ui-components-accordion-padding-horizontal: 8px;
  --ui-components-accordion-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-accordion-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-accordion-border-radius: var(--border-radius-br-6);
  --ui-components-icon-button-padding-vertical: 4px;
  --ui-components-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-card-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-card-border-radius-regular: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-radio-button-selection-border-radius: var(
    --global-border-radius-border-radius-round
  );
  --ui-components-card-border-radius-expanded: var(
    --global-border-radius-border-radius-floating
  );
  --global-size-spacing-icon-icon-size-xsmall: 12px;
  --ui-components-icon-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --global-border-radius-border-radius-base: var(--border-radius-br-6);
  --ui-components-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-icon-button-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --global-border-radius-border-radius-check: var(--border-radius-br-4);
  --global-border-radius-border-radius-round: var(--border-radius-br-round);
  --ui-components-app-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --global-border-radius-border-radius-floating: var(--border-radius-br-12);
  --alert-components-alert-frame-large-flip-padding: var(
    --alert-components-badge-border-radius
  );
  --alert-components-alert-frame-large-flip-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --global-size-spacing-touch-target-min-two-story: 56px;
  --ui-components-slide-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-slide-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --global-size-spacing-border-weight-alertframe: 4px;
  --global-size-spacing-list-item-menu-padding-horizonal-list-item: 12px;
  --global-size-spacing-list-item-menu-margin-horizontal-list-item: 0;
  --ui-components-radio-button-margin: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --ui-components-radio-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-card-padding-horizontal: 16px;
  --ui-components-elevated-card-margin-horizontal: 16px;
  --ui-components-elevated-card-padding-vertical: 8px;
  --ui-components-card-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-slide-button-padding-horizontal: 4px;
  --ui-components-state-toggle-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-state-toggle-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-state-toggle-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-state-toggle-selection-width: 48px;
  --ui-components-state-toggle-padding-vertical: 4px;
  --ui-components-start-stop-switch-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-start-stop-switch-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-start-stop-switch-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-start-stop-switch-padding-top: 4px;
  --ui-components-start-stop-switch-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-state-toggle-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-start-stop-switch-description-spacing: 0;
  --ui-components-start-stop-switch-padding-bottom: 4px;
  --ui-components-start-stop-switch-label-spacing: 8px;
  --ui-components-check-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-check-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-check-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-check-button-label-spacing: 8px;
  --ui-components-check-button-padding-horizontal: 4px;
  --ui-components-check-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-icon-check-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-icon-check-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-icon-check-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-icon-check-button-label-spacing: 0;
  --ui-components-icon-check-button-padding-horizontal: 4px;
  --ui-components-icon-check-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-toggle-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-toggle-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-toggle-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-toggle-button-label-spacing: 0;
  --ui-components-toggle-button-padding-horizontal: 4px;
  --ui-components-toggle-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-toggle-button-stroke-width: 1px;
  --ui-components-icon-button-padding-left: var(--icon-button-padding-left);
  --ui-components-icon-button-padding-right: var(--icon-button-padding-right);
  --ui-components-icon-button-padding-horizontal: 8px;
  --ui-components-elevated-card-graphics-height: 80px;
  --ui-components-elevated-card-graphics-width: 80px;
  --ui-components-text-input-field-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-text-input-field-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-text-input-field-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-text-input-field-label-spacing: 8px;
  --ui-components-text-input-field-padding-vertical: 4px;
  --ui-components-text-input-field-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --global-border-radius-border-radius-input-field: var(--border-radius-br-4);
  --ui-components-elevated-card-label-spacing: 8px;
  --ui-components-button-border-radius-top-left: var(
    --button-border-radius-top-left
  );
  --ui-components-button-border-radius-top-right: var(
    --button-border-radius-top-right
  );
  --ui-components-button-border-radius-bottom-left: var(
    --button-border-radius-bottom-left
  );
  --ui-components-button-border-radius-bottom-right: var(
    --button-border-radius-bottom-right
  );
  --ui-components-text-input-field-border-radius-top-left: var(
    --input-field-border-radius-top-left
  );
  --ui-components-text-input-field-border-radius-top-right: var(
    --input-field-border-radius-top-right
  );
  --ui-components-text-input-field-border-radius-bottom-left: var(
    --input-field-border-radius-bottom-left
  );
  --ui-components-text-input-field-border-radius-bottom-right: var(
    --input-field-border-radius-bottom-right
  );
  --ui-components-text-input-field-stroke-weight: 1px;
  --ui-components-toggle-button-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-toggle-button-item-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-toggle-button-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-toggle-button-item-label-spacing: 8px;
  --ui-components-toggle-button-item-padding-horizontal: 4px;
  --ui-components-toggle-button-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-toggle-button-item-description-spacing: 0;
  --ui-components-text-input-field-padding-horizontal: 8px;
  --ui-components-text-input-field-button-margin: 8px;
  --ui-components-button-stroke-weight-left: var(--button-stroke-weight-left);
  --ui-components-button-stroke-weight-top: var(--button-stroke-weight-top);
  --ui-components-button-stroke-weight-right: var(--button-stroke-weight-right);
  --ui-components-button-stroke-weight-bottom: var(
    --button-stroke-weight-bottom
  );
  --ui-components-text-input-field-stroke-weight-bottom: var(
    --input-field-stroke-weight-bottom
  );
  --ui-components-text-input-field-stroke-weight-left: var(
    --input-field-stroke-weight-left
  );
  --ui-components-text-input-field-stroke-weight-top: var(
    --input-field-stroke-weight-top
  );
  --ui-components-text-input-field-stroke-weight-right: var(
    --input-field-stroke-weight-right
  );
  --ui-components-text-input-field-padding-right: var(
    --input-field-padding-right
  );
  --ui-components-text-input-field-padding-left: var(
    --input-field-padding-left
  );
  --app-components-topbar-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-topbar-padding-horizontal: 8px;
  --menu-navigation-components-table-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-table-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --menu-navigation-components-table-item-label-spacing: 8px;
  --menu-navigation-components-table-item-padding-horizontal: var(
    --global-size-spacing-list-item-menu-padding-horizonal-list-item
  );
  --menu-navigation-components-table-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --menu-navigation-components-table-item-badge-spacing: 4px;
  --menu-navigation-components-navigation-item-visual-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-navigation-menu-border-radius: 12px;
  --ui-components-slider-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-slider-regular-thumb-height: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-slider-slider-spacing: 8px;
  --ui-components-slider-padding-horizontal: 20px;
  --ui-components-slider-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-slider-regular-track-height: 4px;
  --menu-navigation-components-branch-touch-target-size-height: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-branch-width: 32px;
  --menu-navigation-components-table-item-padding-top: 12px;
  --ui-components-context-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --global-size-spacing-list-item-menu-margin-vertical-context-menu: 4px;
  --ui-components-context-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-context-menu
  );
  --ui-components-checkbox-margin: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --ui-components-checkbox-list-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-dropdown-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --global-typography-button-two-line-font-size: var(--font-size-075);
  --global-typography-button-two-line-line-height: var(--line-height-050);
  --global-typography-button-two-line-font-weight: var(--font-weight-bold);
  --global-typography-button-two-line-letter-spacing: 0.30000001192092896px;
  --ui-components-keyboard-nummeric-button-size-min: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-keyboard-nummeric-button-spacing: 8px;
  --ui-components-keyboard-nummeric-section-spacing: 16px;
  --ui-components-slider-regular-thumb-width: 8px;
  --ui-components-slider-enhanced-track-height: 32px;
  --ui-components-slider-enhanced-thumb-height: 32px;
  --ui-components-slider-enhanced-thumb-width: 12px;
  --ui-components-keyboard-nummeric-top-bar-height: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-icon-toggle-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-icon-toggle-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-icon-toggle-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-icon-toggle-button-label-spacing: 8px;
  --ui-components-icon-toggle-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-icon-toggle-button-description-spacing: 0;
  --ui-components-context-menu-title-label-spacing: 16px;
  --ui-components-slider-regular-thumb-indicator-height: 16px;
  --ui-components-slider-regular-thumb-indicator-width: 4px;
  --ui-components-slider-regular-thumb-padding: 4px;
  --ui-components-slider-regular-thumb-margin: 4px;
  --ui-components-slider-button-thumb-height: 32px;
  --ui-components-slider-button-thumb-width: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-slider-button-track-height: 32px;
  --ui-components-slider-indicator-thumb-height: 6px;
  --ui-components-slider-indicator-thumb-width: 6px;
  --ui-components-slider-indicator-track-height: 4px;
  --menu-navigation-components-navigation-item-command-icon-size: var(
    --global-size-spacing-icon-icon-size-small
  );
  --menu-navigation-components-navigation-item-touch-target-size-large: 64px;
  --menu-navigation-components-navigation-item-flyout-icon-container-size: 16px;
  --menu-navigation-components-navigation-item-margin-vertical-icon-button: var(
    --global-size-spacing-list-item-menu-margin-vertical-context-menu
  );
  --alert-components-badge-icon-size-flat: 16px;
  --alert-components-badge-icon-size-flat-border-weight: 1px;
  --ui-components-elevated-card-bording-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-keyboard-nummeric-action-button-width: 96px;
  --ui-components-keyboard-nummeric-component-height-min: 360px;
  --ui-components-keyboard-nummeric-component-width-min: 304px;
  --ui-components-keyboard-nummeric-keys-section-width-min: 160px;
  --ui-components-keyboard-button-size-min: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-keyboard-button-spacing: 8px;
  --ui-components-keyboard-section-spacing: 16px;
  --ui-components-keyboard-top-bar-height: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-keyboard-action-button-width: 96px;
  --ui-components-keyboard-component-height: 416px;
  --ui-components-keyboard-component-width-min: 696px;
  --ui-components-keyboard-keys-section-width-min: 160px;
  --ui-components-keyboard-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-keyboard-nummeric-padding-spacer: 28px;
  --ui-components-keyboard-nummeric-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --menu-navigation-components-branch-icon-size-mask: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-app-button-border-radius-container: var(
    --global-border-radius-border-radius-base
  );
  --app-components-clock-label-spacing: 4px;
  --app-components-clock-padding-horizontal: 8px;
  --app-components-clock-vertical-stack-spacing: 0;
  --app-components-clock-colon-size: 3px;
  --app-components-clock-colon-spacing: 3px;
  --app-components-clock-margin-horizontal: 4px;
  --app-components-clock-touch-target: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-clock-visual-target: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-clock-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --app-components-clock-digit-spacing: 2px;
  --app-components-topbar-label-spacing: 8px;
  --app-components-topbar-label-padding: 4px;
  --app-components-alert-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-alert-button-padding-counter-right: 2px;
  --app-components-alert-button-counter-spacing: 2px;
  --app-components-notification-message-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-notification-message-visual-target: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-notification-message-label-spacing: 8px;
  --app-components-notification-message-touch-target: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-notification-message-touch-target-size-double: 64px;
  --app-components-notification-message-visual-target-size-double: 56px;
  --app-components-notification-message-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --app-components-notification-message-border-radius-top-left: var(
    --button-border-radius-top-left
  );
  --app-components-notification-message-border-radius-top-right: var(
    --button-border-radius-top-right
  );
  --app-components-notification-message-border-radius-bottom-left: var(
    --button-border-radius-bottom-left
  );
  --app-components-notification-message-border-radius-bottom-right: var(
    --button-border-radius-bottom-right
  );
  --app-components-notification-message-stroke-weight: 1px;
  --app-components-notification-message-stroke-weight-left: var(
    --notification-message-stroke-weight-left
  );
  --app-components-notification-message-stroke-weight-top: var(
    --notification-message-stroke-weight-top
  );
  --app-components-notification-message-stroke-weight-right: var(
    --notification-message-stroke-weight-right
  );
  --app-components-notification-message-stroke-weight-bottom: var(
    --notification-message-stroke-weight-bottom
  );
  --app-components-notification-message-padding-horizontal: 8px;
  --app-components-notification-message-label-spacing-vertical: 4px;
  --global-size-spacing-state-container-stroke-weight: 1px;
  --global-size-spacing-state-container-stroke-weight-left: var(
    --state-container-stroke-weight-left
  );
  --global-size-spacing-state-container-stroke-weight-top: var(
    --state-container-stroke-weight-top
  );
  --global-size-spacing-state-container-stroke-weight-right: var(
    --state-container-stroke-weight-right
  );
  --global-size-spacing-state-container-stroke-weight-bottom: var(
    --state-container-stroke-weight-bottom
  );
  --global-size-spacing-state-container-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --global-size-spacing-state-container-border-radius-top-left: var(
    --state-container-border-radius-top-left
  );
  --global-size-spacing-state-container-border-radius-top-right: var(
    --state-container-border-radius-top-right
  );
  --global-size-spacing-state-container-border-radius-bottom-right: var(
    --state-container-border-radius-bottom-right
  );
  --global-size-spacing-state-container-border-radius-bottom-left: var(
    --state-container-border-radius-bottom-left
  );
  --app-components-alert-button-stack-spacing: 8px;
  --app-components-alert-button-margin-horizontal: 8px;
  --menu-navigation-components-tree-navigation-item-padding-horizontal: 8px;
  --menu-navigation-components-tree-navigation-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --menu-navigation-components-tree-navigation-item-touch-target: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-system-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-system-button-padding-divider: 8px;
  --app-components-system-button-icon-spacing: 4px;
  --app-components-system-button-visual-target: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-system-button-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --app-components-system-button-margin: 8px;
  --app-components-system-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-system-button-label-spacing: 8px;
  --app-components-command-button-label-spacing: 8px;
  --global-size-spacing-icon-icon-size-small: 16px;
  --app-components-breadcrumb-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-breadcrumb-item-label-spacing: 4px;
  --app-components-breadcrumb-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-breadcrumb-item-chevron-container-size: 16px;
  --app-components-breadcrumb-item-padding-horizontal: 4px;
  --app-components-breadcrumb-item-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-breadcrumb-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-chip-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-chip-padding-horizontal: 8px;
  --ui-components-chip-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-chip-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-icon-check-button-border-radius-2: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-icon-check-button-border-radius-3: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-icon-check-button-border-radius-4: var(
    --global-border-radius-border-radius-base
  );
  --ui-components-chip-border-radius: var(--border-radius-br-24);
  --ui-components-chip-label-spacing: 4px;
  --app-components-alert-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-alert-button-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-alert-button-padding-vertical: 4px;
  --app-components-clock-touch-target-size-double: 64px;
  --app-components-clock-visual-target-size-double: 56px;
  --app-components-system-button-divider-height: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-topbar-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-topbar-height-large: 64px;
  --app-components-topbar-padding-left-inactive: 12px;
  --app-components-topbar-margin-global: 4px;
  --app-components-system-button-padding: 4px;
  --app-components-topbar-padding-left-small: 16px;
  --app-components-topbar-height-double: 96px;
  --app-components-tool-bar-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-tool-bar-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-tool-bar-margin-global: 4px;
  --app-components-vendor-button-padding-badge: 8px;
  --app-components-navigation-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-context-menu
  );
  --app-components-app-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --ui-components-accordion-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-accordion-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-accordion-item-label-spacing: 8px;
  --ui-components-accordion-item-padding-horizontal: 8px;
  --ui-components-accordion-item-border-radius: var(--border-radius-br-6);
  --ui-components-accordion-item-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --menu-navigation-components-scroll-bar-container-size-regular: 16px;
  --menu-navigation-components-scroll-bar-visual-target-size-regular: 16px;
  --menu-navigation-components-scroll-bar-visual-target-size-large: var(
    --global-size-spacing-visual-target-min
  );
  --menu-navigation-components-scroll-bar-touch-target-size-large: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-scroll-bar-container-size-thin: 4px;
  --menu-navigation-components-scroll-bar-visual-target-size-thin: 4px;
  --menu-navigation-components-scroll-bar-border-radius: var(
    --global-border-radius-border-radius-round
  );
  --menu-navigation-components-scroll-bar-spacing-vertical-regular: 8px;
  --app-components-app-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --menu-navigation-components-pivot-item-icon-pivot-item-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-pivot-item-icon-pivot-item-visual-target-size: var(
    --global-size-spacing-visual-target-min
  );
  --menu-navigation-components-pivot-item-icon-pivot-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --menu-navigation-components-pivot-item-icon-pivot-item-padding-horizontal: 8px;
  --menu-navigation-components-pivot-item-icon-pivot-item-margin-horizontal: 8px;
  --menu-navigation-components-pivot-item-icon-pivot-item-label-spacing: 8px;
  --menu-navigation-components-pivot-item-icon-pivot-item-border-radius: var(
    --global-border-radius-border-radius-base
  );
  --menu-navigation-components-pivot-item-icon-pivot-item-border-radius-active-tab: 2px;
  --menu-navigation-components-pivot-item-icon-pivot-item-size-active-tab: 2px;
  --ui-components-toggle-switch-item-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --menu-navigation-components-pivot-row-padding-horizontal: 4px;
  --menu-navigation-components-pivot-row-padding-horizontal-divider: 12px;
  --ui-components-toggle-switch-item-touch-target-size-two-story: var(
    --global-size-spacing-touch-target-min-two-story
  );
  --ui-components-app-button-touch-target-size-enhanced: 72px;
  --ui-components-app-button-visual-size-enhanced: 64px;
  --ui-components-app-button-icon-size-enhanced: 48px;
  --ui-components-app-button-padding-vertical-enhanced: 8px;
  --app-components-app-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-app-menu-label-spacing: 8px;
  --app-components-dimming-menu-icon-size: 48px;
  --app-components-dimming-menu-padding-vertical: 8px;
  --app-components-dimming-menu-padding-horizontal: 8px;
  --app-components-dimming-menu-label-spacing: 8px;
  --app-components-dimming-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --menu-navigation-components-page-indicator-indicator-size: 8px;
  --menu-navigation-components-page-indicator-indicator-spacing: 8px;
  --app-components-alert-list-item-padding-horizontal: 24px;
  --menu-navigation-components-table-item-padding-icon: 4px;
  --menu-navigation-components-terminal-padding-aggregated-icon: 4px;
  --menu-navigation-components-table-item-icon-size-large: var(
    --global-size-spacing-icon-icon-size-large
  );
  --alert-components-badge-icon-size-large: 20px;
  --alert-components-badge-label-spacing-large: 2px;
  --app-components-notification-list-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-notification-list-item-visual-target: var(
    --global-size-spacing-visual-target-min
  );
  --app-components-notification-list-item-label-spacing: 8px;
  --app-components-notification-list-item-padding-horizontal: var(
    --app-components-alert-list-item-padding-horizontal
  );
  --app-components-notification-list-item-touch-target: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-notification-list-item-icon-size-large: var(
    --global-size-spacing-icon-icon-size-large
  );
  --menu-navigation-components-table-row-margin: var(
    --global-size-spacing-list-item-menu-margin-horizontal-context-menu
  );
  --menu-navigation-components-table-row-first-column-width: 320px;
  --ui-components-slider-discrete-track-height: 4px;
  --ui-components-slider-discrete-thumb-margin: 4px;
  --ui-components-slider-discrete-thumb-indicator-width: 4px;
  --ui-components-slider-discrete-thumb-indicator-height: 16px;
  --ui-components-slider-discrete-thumb-width: 8px;
  --ui-components-slider-discrete-thumb-padding: 4px;
  --ui-components-slider-discrete-thumb-height: 24px;
  --app-components-alert-menu-padding-horizontal: 8px;
  --app-components-alert-menu-title-container-height: 64px;
  --app-components-alert-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-notification-menu-padding-horizontal: 8px;
  --app-components-notification-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-notification-menu-title-container-height: var(
    --app-components-alert-menu-title-container-height
  );
  --app-components-alert-list-item-icon-size: var(
    --global-size-spacing-icon-icon-size-large
  );
  --app-components-alert-list-item-label-spacing: 16px;
  --app-components-alert-list-item-touch-target-min: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-alert-list-item-button-size: 96px;
  --app-components-alert-menu-button-size: var(
    --app-components-alert-list-item-button-size
  );
  --app-components-alert-list-item-padding-vertical: 8px;
  --app-components-alert-list-item-chevron-container-size: 32px;
  --ui-components-slider-regular-tick-height: 6px;
  --app-components-notification-menu-button-size: var(
    --app-components-alert-list-item-button-size
  );
  --ui-components-slider-discrete-leading-icon-padding: 8px;
  --app-components-notification-list-item-padding-vertical: 8px;
  --ui-components-slider-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-slider-thumb-boder-raduis: var(
    --global-border-radius-border-radius-round
  );
  --app-components-notification-list-item-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-notification-floating-item-icon-size: var(
    --global-size-spacing-icon-icon-size-large
  );
  --global-size-spacing-icon-icon-size-large: 32px;
  --app-components-notification-floating-item-label-spacing: 8px;
  --app-components-notification-floating-item-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-notification-floating-item-padding-horizontal: 24px;
  --app-components-notification-floating-item-padding-vertical-single: 8px;
  --app-components-notification-floating-item-padding-vertical-multi: 12px;
  --app-components-alert-floating-item-app-icon-size: var(
    --global-size-spacing-icon-icon-size-xlarge
  );
  --app-components-alert-floating-item-label-spacing: 8px;
  --app-components-alert-floating-item-padding-horizontal: 24px;
  --app-components-alert-floating-item-padding-vertical-single: 8px;
  --app-components-alert-floating-item-padding-vertical-multi: 12px;
  --app-components-alert-floating-item-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-alert-floating-item-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --app-components-alert-floating-item-icon-container-size: 48px;
  --global-size-spacing-icon-icon-size-xlarge: 40px;
  --app-components-alert-floating-item-icon-size-large: var(
    --global-size-spacing-icon-icon-size-large
  );
  --app-components-alert-floating-item-button-width: var(
    --app-components-alert-list-item-button-size
  );
  --ui-components-slider-thumb-gap-stroke: 4px;
  --ui-components-slider-discrete-value-padding: 8px;
  --ui-components-slider-discrete-value-container-size: 32px;
  --ui-components-slider-discrete-padding-horizontal-right: 8px;
  --ui-components-slider-discrete-icon-container-width: 8px;
  --ui-components-slider-regular-icon-container-width: 24px;
  --app-components-user-menu-padding-vertical: 8px;
  --app-components-user-menu-padding-horizontal: 8px;
  --app-components-user-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --ui-components-slider-enhanced-icon-container-width: 24px;
  --ui-components-slider-button-icon-container-width: 24px;
  --ui-components-slider-indicator-icon-container-width: 8px;
  --ui-components-user-button-touch-target-size: var(
    --global-size-spacing-touch-target-min
  );
  --ui-components-user-button-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --ui-components-user-button-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-user-button-label-spacing: 0;
  --ui-components-user-button-border-radius: var(
    --global-border-radius-border-radius-round
  );
  --ui-components-user-button-padding-vertical: 4px;
  --ui-components-user-button-touch-target-size-enhanced: 72px;
  --ui-components-user-button-visual-size-enhanced: 64px;
  --ui-components-user-button-icon-size-enhanced: 48px;
  --ui-components-user-button-padding-vertical-enhanced: 8px;
  --ui-components-user-button-border-radius-container: var(
    --global-border-radius-border-radius-base
  );
  --app-components-alert-button-padding-horizontal: 4px;
  --app-components-alert-button-alert-button-width: 56px;
  --alert-components-badge-min-size-large: 24px;
  --ui-components-context-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-context-menu
  );
  --ui-components-toggle-switch-touch-target: var(
    --global-size-spacing-touch-target-min
  );
  --menu-navigation-components-tree-navigation-item-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --global-size-spacing-list-item-menu-margin-horizontal-context-menu: 4px;
  --menu-navigation-components-navigation-item-margin-horizontal-list-item: var(
    --global-size-spacing-list-item-menu-margin-horizontal-list-item
  );
  --app-components-alert-list-item-icon-spacing: 4px;
  --menu-navigation-components-table-item-icon-spacing: 4px;
  --global-size-spacing-list-item-menu-margin-vertical-menu: 16px;
  --global-size-spacing-list-item-menu-margin-horizontal-menu: 16px;
  --global-size-spacing-icon-n: 0;
  --app-components-app-menu-app-button-spacing: 8px;
  --app-components-app-menu-padding-vertical: 8px;
  --app-components-app-menu-padding-horizontal: 8px;
  --app-components-app-menu-margin-scroll-bar: 4px;
  --app-components-dimming-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-dimming-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --app-components-user-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --app-components-user-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-user-menu-button-spacing: 8px;
  --app-components-user-menu-button-width: 128px;
  --ui-components-progressbars-progress-bar--linear-bar-height: 8px;
  --ui-components-progressbars-progress-bar--linear-padding-vertical: 4px;
  --ui-components-progressbars-progress-bar--linear-padding-horizontal: 8px;
  --app-components-clock-icon-size: var(
    --global-size-spacing-icon-icon-size-regular
  );
  --ui-components-progressbars-progress-bar--linear-label-spacing: 2px;
  --ui-components-progressbars-progress-bar--circular-bar-weight: 4px;
  --ui-components-progressbars-progress-button--linear-bar-height: 4px;
  --ui-components-progressbars-progress-button--linear-padding-vertical-bar: 2px;
  --ui-components-progressbars-progress-button--linear-padding-horizontal-bar: 0;
  --ui-components-progressbars-progress-button--circular-bar-weight: 4px;
  --app-components-modal-margin-vertical: 24px;
  --app-components-modal-title-container-height: var(
    --global-size-spacing-touch-target-min
  );
  --app-components-modal-button-spacing: 8px;
  --app-components-modal-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-modal-padding-vertical-button-container: 8px;
  --app-components-modal-padding-divider: 4px;
  --menu-navigation-components-pivot-item-icon-pivot-item-padding-bottom-active-tab: 4px;
  --menu-navigation-components-pivot-item-icon-pivot-item-margin-active-tab: 8px;
  --app-components-system-menu-padding-horizontal: 8px;
  --app-components-system-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --app-components-system-menu-spacing-large: 16px;
  --app-components-system-menu-border-radius: var(
    --global-border-radius-border-radius-floating
  );
  --app-components-alert-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --app-components-alert-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-notification-menu-margin-vertical: var(
    --global-size-spacing-list-item-menu-margin-vertical-menu
  );
  --app-components-notification-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-system-menu-margin-horizontal: var(
    --global-size-spacing-list-item-menu-margin-horizontal-menu
  );
  --app-components-system-menu-icon-size: 48px;
  --app-components-system-menu-spacing: 8px;
  --app-components-system-menu-padding-vertical: 8px;
  --ui-components-audio-visual-height: 24px;
  --ui-components-audio-visual-width: 12px;
  --ui-components-audio-visual-spacing: 8px;
  --menu-navigation-components-page-indicator-date-item-visual-size: var(
    --global-size-spacing-visual-target-min
  );
  --menu-navigation-components-page-indicator-date-item-padding-horizontal: 8px;
  --menu-navigation-components-page-indicator-date-item-padding-vertical: 8px;