@x-plat/design-system 0.5.44 → 0.5.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/index.css +69 -43
- package/dist/index.css +69 -43
- package/dist/layout/index.css +69 -43
- package/package.json +1 -1
|
@@ -438,6 +438,7 @@
|
|
|
438
438
|
--semantic-text-subtle: var(--brand-neutral-700);
|
|
439
439
|
--semantic-text-muted: var(--brand-neutral-500);
|
|
440
440
|
--semantic-text-brand: var(--brand-primary-700);
|
|
441
|
+
--semantic-text-brand-secondary: var(--brand-secondary-700);
|
|
441
442
|
--semantic-text-disabled: var(--brand-neutral-400);
|
|
442
443
|
--semantic-text-inverse: var(--brand-base-white);
|
|
443
444
|
--semantic-text-success: var(--system-success-700);
|
|
@@ -455,6 +456,9 @@
|
|
|
455
456
|
--semantic-surface-brand-subtle: var(--brand-primary-50);
|
|
456
457
|
--semantic-surface-brand-default: var(--brand-primary-600);
|
|
457
458
|
--semantic-surface-brand-strong: var(--brand-primary-700);
|
|
459
|
+
--semantic-surface-brand-secondary-subtle: var(--brand-secondary-50);
|
|
460
|
+
--semantic-surface-brand-secondary-default: var(--brand-secondary-600);
|
|
461
|
+
--semantic-surface-brand-secondary-strong: var(--brand-secondary-700);
|
|
458
462
|
--semantic-surface-success-subtle: var(--system-success-50);
|
|
459
463
|
--semantic-surface-success-default: var(--system-success-400);
|
|
460
464
|
--semantic-surface-success-strong: var(--system-success-700);
|
|
@@ -472,6 +476,7 @@
|
|
|
472
476
|
--semantic-border-strong: var(--brand-neutral-400);
|
|
473
477
|
--semantic-border-disabled: var(--brand-neutral-300);
|
|
474
478
|
--semantic-border-brand: var(--brand-primary-600);
|
|
479
|
+
--semantic-border-brand-secondary: var(--brand-secondary-600);
|
|
475
480
|
--semantic-border-success: var(--system-success-300);
|
|
476
481
|
--semantic-border-error: var(--system-error-300);
|
|
477
482
|
--semantic-border-warning: var(--system-warning-300);
|
|
@@ -480,12 +485,14 @@
|
|
|
480
485
|
--semantic-icon-subtle: var(--brand-neutral-500);
|
|
481
486
|
--semantic-icon-inverse: var(--brand-base-white);
|
|
482
487
|
--semantic-icon-brand: var(--brand-primary-600);
|
|
488
|
+
--semantic-icon-brand-secondary: var(--brand-secondary-600);
|
|
483
489
|
--semantic-icon-success: var(--system-success-600);
|
|
484
490
|
--semantic-icon-error: var(--system-error-600);
|
|
485
491
|
--semantic-icon-warning: var(--system-warning-600);
|
|
486
492
|
--semantic-icon-info: var(--system-info-600);
|
|
487
493
|
--semantic-icon-disabled: var(--brand-neutral-300);
|
|
488
494
|
--semantic-emphasis-brand: var(--brand-primary-800);
|
|
495
|
+
--semantic-emphasis-brand-secondary: var(--brand-secondary-800);
|
|
489
496
|
--semantic-emphasis-success: var(--system-success-800);
|
|
490
497
|
--semantic-emphasis-error: var(--system-error-800);
|
|
491
498
|
--semantic-emphasis-warning: var(--system-warning-800);
|
|
@@ -600,6 +607,47 @@
|
|
|
600
607
|
--typo-ls-tight: -0.02em;
|
|
601
608
|
--typo-ls-normal: 0;
|
|
602
609
|
--typo-ls-wide: 0.02em;
|
|
610
|
+
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
611
|
+
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
612
|
+
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
613
|
+
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
614
|
+
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
615
|
+
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
616
|
+
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
617
|
+
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
618
|
+
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
619
|
+
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
620
|
+
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
621
|
+
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
622
|
+
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
623
|
+
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
624
|
+
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
625
|
+
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
626
|
+
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
627
|
+
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
628
|
+
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
629
|
+
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
630
|
+
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
631
|
+
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
632
|
+
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
633
|
+
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
634
|
+
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
635
|
+
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
636
|
+
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
637
|
+
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
638
|
+
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
639
|
+
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
640
|
+
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
641
|
+
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
642
|
+
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
643
|
+
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
644
|
+
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
645
|
+
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
646
|
+
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
647
|
+
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
648
|
+
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
649
|
+
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
650
|
+
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
603
651
|
}
|
|
604
652
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
605
653
|
:root {
|
|
@@ -719,49 +767,6 @@
|
|
|
719
767
|
--typo-ls-wide: 0.02em;
|
|
720
768
|
}
|
|
721
769
|
}
|
|
722
|
-
:root {
|
|
723
|
-
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
724
|
-
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
725
|
-
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
726
|
-
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
727
|
-
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
728
|
-
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
729
|
-
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
730
|
-
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
731
|
-
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
732
|
-
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
733
|
-
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
734
|
-
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
735
|
-
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
736
|
-
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
737
|
-
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
738
|
-
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
739
|
-
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
740
|
-
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
741
|
-
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
742
|
-
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
743
|
-
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
744
|
-
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
745
|
-
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
746
|
-
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
747
|
-
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
748
|
-
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
749
|
-
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
750
|
-
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
751
|
-
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
752
|
-
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
753
|
-
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
754
|
-
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
755
|
-
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
756
|
-
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
757
|
-
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
758
|
-
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
759
|
-
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
760
|
-
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
761
|
-
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
762
|
-
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
763
|
-
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
764
|
-
}
|
|
765
770
|
:root {
|
|
766
771
|
--semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
|
|
767
772
|
--semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
|
|
@@ -1052,6 +1057,9 @@
|
|
|
1052
1057
|
.semantic-text-brand {
|
|
1053
1058
|
--ds-color: var(--semantic-text-brand);
|
|
1054
1059
|
}
|
|
1060
|
+
.semantic-text-brand-secondary {
|
|
1061
|
+
--ds-color: var(--semantic-text-brand-secondary);
|
|
1062
|
+
}
|
|
1055
1063
|
.semantic-text-disabled {
|
|
1056
1064
|
--ds-color: var(--semantic-text-disabled);
|
|
1057
1065
|
}
|
|
@@ -1103,6 +1111,15 @@
|
|
|
1103
1111
|
.semantic-surface-brand-strong {
|
|
1104
1112
|
--ds-color: var(--semantic-surface-brand-strong);
|
|
1105
1113
|
}
|
|
1114
|
+
.semantic-surface-brand-secondary-subtle {
|
|
1115
|
+
--ds-color: var(--semantic-surface-brand-secondary-subtle);
|
|
1116
|
+
}
|
|
1117
|
+
.semantic-surface-brand-secondary-default {
|
|
1118
|
+
--ds-color: var(--semantic-surface-brand-secondary-default);
|
|
1119
|
+
}
|
|
1120
|
+
.semantic-surface-brand-secondary-strong {
|
|
1121
|
+
--ds-color: var(--semantic-surface-brand-secondary-strong);
|
|
1122
|
+
}
|
|
1106
1123
|
.semantic-surface-success-subtle {
|
|
1107
1124
|
--ds-color: var(--semantic-surface-success-subtle);
|
|
1108
1125
|
}
|
|
@@ -1154,6 +1171,9 @@
|
|
|
1154
1171
|
.semantic-border-brand {
|
|
1155
1172
|
--ds-color: var(--semantic-border-brand);
|
|
1156
1173
|
}
|
|
1174
|
+
.semantic-border-brand-secondary {
|
|
1175
|
+
--ds-color: var(--semantic-border-brand-secondary);
|
|
1176
|
+
}
|
|
1157
1177
|
.semantic-border-success {
|
|
1158
1178
|
--ds-color: var(--semantic-border-success);
|
|
1159
1179
|
}
|
|
@@ -1178,6 +1198,9 @@
|
|
|
1178
1198
|
.semantic-icon-brand {
|
|
1179
1199
|
--ds-color: var(--semantic-icon-brand);
|
|
1180
1200
|
}
|
|
1201
|
+
.semantic-icon-brand-secondary {
|
|
1202
|
+
--ds-color: var(--semantic-icon-brand-secondary);
|
|
1203
|
+
}
|
|
1181
1204
|
.semantic-icon-success {
|
|
1182
1205
|
--ds-color: var(--semantic-icon-success);
|
|
1183
1206
|
}
|
|
@@ -1196,6 +1219,9 @@
|
|
|
1196
1219
|
.semantic-emphasis-brand {
|
|
1197
1220
|
--ds-color: var(--semantic-emphasis-brand);
|
|
1198
1221
|
}
|
|
1222
|
+
.semantic-emphasis-brand-secondary {
|
|
1223
|
+
--ds-color: var(--semantic-emphasis-brand-secondary);
|
|
1224
|
+
}
|
|
1199
1225
|
.semantic-emphasis-success {
|
|
1200
1226
|
--ds-color: var(--semantic-emphasis-success);
|
|
1201
1227
|
}
|
package/dist/index.css
CHANGED
|
@@ -438,6 +438,7 @@
|
|
|
438
438
|
--semantic-text-subtle: var(--brand-neutral-700);
|
|
439
439
|
--semantic-text-muted: var(--brand-neutral-500);
|
|
440
440
|
--semantic-text-brand: var(--brand-primary-700);
|
|
441
|
+
--semantic-text-brand-secondary: var(--brand-secondary-700);
|
|
441
442
|
--semantic-text-disabled: var(--brand-neutral-400);
|
|
442
443
|
--semantic-text-inverse: var(--brand-base-white);
|
|
443
444
|
--semantic-text-success: var(--system-success-700);
|
|
@@ -455,6 +456,9 @@
|
|
|
455
456
|
--semantic-surface-brand-subtle: var(--brand-primary-50);
|
|
456
457
|
--semantic-surface-brand-default: var(--brand-primary-600);
|
|
457
458
|
--semantic-surface-brand-strong: var(--brand-primary-700);
|
|
459
|
+
--semantic-surface-brand-secondary-subtle: var(--brand-secondary-50);
|
|
460
|
+
--semantic-surface-brand-secondary-default: var(--brand-secondary-600);
|
|
461
|
+
--semantic-surface-brand-secondary-strong: var(--brand-secondary-700);
|
|
458
462
|
--semantic-surface-success-subtle: var(--system-success-50);
|
|
459
463
|
--semantic-surface-success-default: var(--system-success-400);
|
|
460
464
|
--semantic-surface-success-strong: var(--system-success-700);
|
|
@@ -472,6 +476,7 @@
|
|
|
472
476
|
--semantic-border-strong: var(--brand-neutral-400);
|
|
473
477
|
--semantic-border-disabled: var(--brand-neutral-300);
|
|
474
478
|
--semantic-border-brand: var(--brand-primary-600);
|
|
479
|
+
--semantic-border-brand-secondary: var(--brand-secondary-600);
|
|
475
480
|
--semantic-border-success: var(--system-success-300);
|
|
476
481
|
--semantic-border-error: var(--system-error-300);
|
|
477
482
|
--semantic-border-warning: var(--system-warning-300);
|
|
@@ -480,12 +485,14 @@
|
|
|
480
485
|
--semantic-icon-subtle: var(--brand-neutral-500);
|
|
481
486
|
--semantic-icon-inverse: var(--brand-base-white);
|
|
482
487
|
--semantic-icon-brand: var(--brand-primary-600);
|
|
488
|
+
--semantic-icon-brand-secondary: var(--brand-secondary-600);
|
|
483
489
|
--semantic-icon-success: var(--system-success-600);
|
|
484
490
|
--semantic-icon-error: var(--system-error-600);
|
|
485
491
|
--semantic-icon-warning: var(--system-warning-600);
|
|
486
492
|
--semantic-icon-info: var(--system-info-600);
|
|
487
493
|
--semantic-icon-disabled: var(--brand-neutral-300);
|
|
488
494
|
--semantic-emphasis-brand: var(--brand-primary-800);
|
|
495
|
+
--semantic-emphasis-brand-secondary: var(--brand-secondary-800);
|
|
489
496
|
--semantic-emphasis-success: var(--system-success-800);
|
|
490
497
|
--semantic-emphasis-error: var(--system-error-800);
|
|
491
498
|
--semantic-emphasis-warning: var(--system-warning-800);
|
|
@@ -600,6 +607,47 @@
|
|
|
600
607
|
--typo-ls-tight: -0.02em;
|
|
601
608
|
--typo-ls-normal: 0;
|
|
602
609
|
--typo-ls-wide: 0.02em;
|
|
610
|
+
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
611
|
+
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
612
|
+
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
613
|
+
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
614
|
+
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
615
|
+
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
616
|
+
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
617
|
+
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
618
|
+
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
619
|
+
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
620
|
+
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
621
|
+
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
622
|
+
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
623
|
+
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
624
|
+
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
625
|
+
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
626
|
+
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
627
|
+
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
628
|
+
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
629
|
+
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
630
|
+
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
631
|
+
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
632
|
+
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
633
|
+
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
634
|
+
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
635
|
+
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
636
|
+
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
637
|
+
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
638
|
+
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
639
|
+
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
640
|
+
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
641
|
+
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
642
|
+
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
643
|
+
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
644
|
+
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
645
|
+
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
646
|
+
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
647
|
+
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
648
|
+
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
649
|
+
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
650
|
+
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
603
651
|
}
|
|
604
652
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
605
653
|
:root {
|
|
@@ -719,49 +767,6 @@
|
|
|
719
767
|
--typo-ls-wide: 0.02em;
|
|
720
768
|
}
|
|
721
769
|
}
|
|
722
|
-
:root {
|
|
723
|
-
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
724
|
-
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
725
|
-
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
726
|
-
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
727
|
-
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
728
|
-
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
729
|
-
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
730
|
-
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
731
|
-
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
732
|
-
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
733
|
-
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
734
|
-
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
735
|
-
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
736
|
-
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
737
|
-
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
738
|
-
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
739
|
-
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
740
|
-
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
741
|
-
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
742
|
-
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
743
|
-
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
744
|
-
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
745
|
-
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
746
|
-
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
747
|
-
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
748
|
-
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
749
|
-
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
750
|
-
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
751
|
-
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
752
|
-
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
753
|
-
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
754
|
-
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
755
|
-
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
756
|
-
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
757
|
-
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
758
|
-
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
759
|
-
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
760
|
-
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
761
|
-
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
762
|
-
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
763
|
-
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
764
|
-
}
|
|
765
770
|
:root {
|
|
766
771
|
--semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
|
|
767
772
|
--semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
|
|
@@ -1052,6 +1057,9 @@
|
|
|
1052
1057
|
.semantic-text-brand {
|
|
1053
1058
|
--ds-color: var(--semantic-text-brand);
|
|
1054
1059
|
}
|
|
1060
|
+
.semantic-text-brand-secondary {
|
|
1061
|
+
--ds-color: var(--semantic-text-brand-secondary);
|
|
1062
|
+
}
|
|
1055
1063
|
.semantic-text-disabled {
|
|
1056
1064
|
--ds-color: var(--semantic-text-disabled);
|
|
1057
1065
|
}
|
|
@@ -1103,6 +1111,15 @@
|
|
|
1103
1111
|
.semantic-surface-brand-strong {
|
|
1104
1112
|
--ds-color: var(--semantic-surface-brand-strong);
|
|
1105
1113
|
}
|
|
1114
|
+
.semantic-surface-brand-secondary-subtle {
|
|
1115
|
+
--ds-color: var(--semantic-surface-brand-secondary-subtle);
|
|
1116
|
+
}
|
|
1117
|
+
.semantic-surface-brand-secondary-default {
|
|
1118
|
+
--ds-color: var(--semantic-surface-brand-secondary-default);
|
|
1119
|
+
}
|
|
1120
|
+
.semantic-surface-brand-secondary-strong {
|
|
1121
|
+
--ds-color: var(--semantic-surface-brand-secondary-strong);
|
|
1122
|
+
}
|
|
1106
1123
|
.semantic-surface-success-subtle {
|
|
1107
1124
|
--ds-color: var(--semantic-surface-success-subtle);
|
|
1108
1125
|
}
|
|
@@ -1154,6 +1171,9 @@
|
|
|
1154
1171
|
.semantic-border-brand {
|
|
1155
1172
|
--ds-color: var(--semantic-border-brand);
|
|
1156
1173
|
}
|
|
1174
|
+
.semantic-border-brand-secondary {
|
|
1175
|
+
--ds-color: var(--semantic-border-brand-secondary);
|
|
1176
|
+
}
|
|
1157
1177
|
.semantic-border-success {
|
|
1158
1178
|
--ds-color: var(--semantic-border-success);
|
|
1159
1179
|
}
|
|
@@ -1178,6 +1198,9 @@
|
|
|
1178
1198
|
.semantic-icon-brand {
|
|
1179
1199
|
--ds-color: var(--semantic-icon-brand);
|
|
1180
1200
|
}
|
|
1201
|
+
.semantic-icon-brand-secondary {
|
|
1202
|
+
--ds-color: var(--semantic-icon-brand-secondary);
|
|
1203
|
+
}
|
|
1181
1204
|
.semantic-icon-success {
|
|
1182
1205
|
--ds-color: var(--semantic-icon-success);
|
|
1183
1206
|
}
|
|
@@ -1196,6 +1219,9 @@
|
|
|
1196
1219
|
.semantic-emphasis-brand {
|
|
1197
1220
|
--ds-color: var(--semantic-emphasis-brand);
|
|
1198
1221
|
}
|
|
1222
|
+
.semantic-emphasis-brand-secondary {
|
|
1223
|
+
--ds-color: var(--semantic-emphasis-brand-secondary);
|
|
1224
|
+
}
|
|
1199
1225
|
.semantic-emphasis-success {
|
|
1200
1226
|
--ds-color: var(--semantic-emphasis-success);
|
|
1201
1227
|
}
|
package/dist/layout/index.css
CHANGED
|
@@ -436,6 +436,7 @@
|
|
|
436
436
|
--semantic-text-subtle: var(--brand-neutral-700);
|
|
437
437
|
--semantic-text-muted: var(--brand-neutral-500);
|
|
438
438
|
--semantic-text-brand: var(--brand-primary-700);
|
|
439
|
+
--semantic-text-brand-secondary: var(--brand-secondary-700);
|
|
439
440
|
--semantic-text-disabled: var(--brand-neutral-400);
|
|
440
441
|
--semantic-text-inverse: var(--brand-base-white);
|
|
441
442
|
--semantic-text-success: var(--system-success-700);
|
|
@@ -453,6 +454,9 @@
|
|
|
453
454
|
--semantic-surface-brand-subtle: var(--brand-primary-50);
|
|
454
455
|
--semantic-surface-brand-default: var(--brand-primary-600);
|
|
455
456
|
--semantic-surface-brand-strong: var(--brand-primary-700);
|
|
457
|
+
--semantic-surface-brand-secondary-subtle: var(--brand-secondary-50);
|
|
458
|
+
--semantic-surface-brand-secondary-default: var(--brand-secondary-600);
|
|
459
|
+
--semantic-surface-brand-secondary-strong: var(--brand-secondary-700);
|
|
456
460
|
--semantic-surface-success-subtle: var(--system-success-50);
|
|
457
461
|
--semantic-surface-success-default: var(--system-success-400);
|
|
458
462
|
--semantic-surface-success-strong: var(--system-success-700);
|
|
@@ -470,6 +474,7 @@
|
|
|
470
474
|
--semantic-border-strong: var(--brand-neutral-400);
|
|
471
475
|
--semantic-border-disabled: var(--brand-neutral-300);
|
|
472
476
|
--semantic-border-brand: var(--brand-primary-600);
|
|
477
|
+
--semantic-border-brand-secondary: var(--brand-secondary-600);
|
|
473
478
|
--semantic-border-success: var(--system-success-300);
|
|
474
479
|
--semantic-border-error: var(--system-error-300);
|
|
475
480
|
--semantic-border-warning: var(--system-warning-300);
|
|
@@ -478,12 +483,14 @@
|
|
|
478
483
|
--semantic-icon-subtle: var(--brand-neutral-500);
|
|
479
484
|
--semantic-icon-inverse: var(--brand-base-white);
|
|
480
485
|
--semantic-icon-brand: var(--brand-primary-600);
|
|
486
|
+
--semantic-icon-brand-secondary: var(--brand-secondary-600);
|
|
481
487
|
--semantic-icon-success: var(--system-success-600);
|
|
482
488
|
--semantic-icon-error: var(--system-error-600);
|
|
483
489
|
--semantic-icon-warning: var(--system-warning-600);
|
|
484
490
|
--semantic-icon-info: var(--system-info-600);
|
|
485
491
|
--semantic-icon-disabled: var(--brand-neutral-300);
|
|
486
492
|
--semantic-emphasis-brand: var(--brand-primary-800);
|
|
493
|
+
--semantic-emphasis-brand-secondary: var(--brand-secondary-800);
|
|
487
494
|
--semantic-emphasis-success: var(--system-success-800);
|
|
488
495
|
--semantic-emphasis-error: var(--system-error-800);
|
|
489
496
|
--semantic-emphasis-warning: var(--system-warning-800);
|
|
@@ -598,6 +605,47 @@
|
|
|
598
605
|
--typo-ls-tight: -0.02em;
|
|
599
606
|
--typo-ls-normal: 0;
|
|
600
607
|
--typo-ls-wide: 0.02em;
|
|
608
|
+
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
609
|
+
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
610
|
+
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
611
|
+
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
612
|
+
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
613
|
+
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
614
|
+
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
615
|
+
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
616
|
+
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
617
|
+
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
618
|
+
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
619
|
+
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
620
|
+
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
621
|
+
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
622
|
+
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
623
|
+
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
624
|
+
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
625
|
+
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
626
|
+
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
627
|
+
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
628
|
+
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
629
|
+
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
630
|
+
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
631
|
+
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
632
|
+
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
633
|
+
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
634
|
+
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
635
|
+
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
636
|
+
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
637
|
+
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
638
|
+
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
639
|
+
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
640
|
+
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
641
|
+
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
642
|
+
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
643
|
+
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
644
|
+
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
645
|
+
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
646
|
+
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
647
|
+
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
648
|
+
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
601
649
|
}
|
|
602
650
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
603
651
|
:root {
|
|
@@ -717,49 +765,6 @@
|
|
|
717
765
|
--typo-ls-wide: 0.02em;
|
|
718
766
|
}
|
|
719
767
|
}
|
|
720
|
-
:root {
|
|
721
|
-
--typo-brand-font-family-font: var(--typo-font-family-sans);
|
|
722
|
-
--typo-brand-size-display-1: var(--typo-size-display-1);
|
|
723
|
-
--typo-brand-size-display-2: var(--typo-size-display-2);
|
|
724
|
-
--typo-brand-size-title-1: var(--typo-size-title-1);
|
|
725
|
-
--typo-brand-size-title-2: var(--typo-size-title-2);
|
|
726
|
-
--typo-brand-size-heading-1: var(--typo-size-heading-1);
|
|
727
|
-
--typo-brand-size-heading-2: var(--typo-size-heading-2);
|
|
728
|
-
--typo-brand-size-body-1: var(--typo-size-default-body-1);
|
|
729
|
-
--typo-brand-size-body-2: var(--typo-size-default-body-2);
|
|
730
|
-
--typo-brand-size-label-1: var(--typo-size-default-label-1);
|
|
731
|
-
--typo-brand-size-label-2: var(--typo-size-default-label-2);
|
|
732
|
-
--typo-brand-size-caption-1: var(--typo-size-default-caption-1);
|
|
733
|
-
--typo-brand-size-caption-2: var(--typo-size-default-caption-2);
|
|
734
|
-
--typo-brand-line-height-display-1: var(--typo-lh-display-1);
|
|
735
|
-
--typo-brand-line-height-display-2: var(--typo-lh-display-2);
|
|
736
|
-
--typo-brand-line-height-title-1: var(--typo-lh-title-1);
|
|
737
|
-
--typo-brand-line-height-title-2: var(--typo-lh-title-2);
|
|
738
|
-
--typo-brand-line-height-heading-1: var(--typo-lh-default-heading-1);
|
|
739
|
-
--typo-brand-line-height-heading-2: var(--typo-lh-default-heading-2);
|
|
740
|
-
--typo-brand-line-height-body-1: var(--typo-lh-default-body-1);
|
|
741
|
-
--typo-brand-line-height-body-2: var(--typo-lh-default-body-2);
|
|
742
|
-
--typo-brand-line-height-label-1: var(--typo-lh-default-label-1);
|
|
743
|
-
--typo-brand-line-height-label-2: var(--typo-lh-default-label-2);
|
|
744
|
-
--typo-brand-line-height-caption-1: var(--typo-lh-default-caption-1);
|
|
745
|
-
--typo-brand-line-height-caption-2: var(--typo-lh-default-caption-2);
|
|
746
|
-
--typo-brand-weight-regular: var(--typo-weight-regular);
|
|
747
|
-
--typo-brand-weight-medium: var(--typo-weight-medium);
|
|
748
|
-
--typo-brand-weight-semibold: var(--typo-weight-semibold);
|
|
749
|
-
--typo-brand-weight-bold: var(--typo-weight-bold);
|
|
750
|
-
--typo-brand-letter-spacing-display-1: var(--typo-ls-tight);
|
|
751
|
-
--typo-brand-letter-spacing-display-2: var(--typo-ls-tight);
|
|
752
|
-
--typo-brand-letter-spacing-title-1: var(--typo-ls-tight);
|
|
753
|
-
--typo-brand-letter-spacing-title-2: var(--typo-ls-tight);
|
|
754
|
-
--typo-brand-letter-spacing-heading-1: var(--typo-ls-tight);
|
|
755
|
-
--typo-brand-letter-spacing-heading-2: var(--typo-ls-tight);
|
|
756
|
-
--typo-brand-letter-spacing-body-1: var(--typo-ls-normal);
|
|
757
|
-
--typo-brand-letter-spacing-body-2: var(--typo-ls-normal);
|
|
758
|
-
--typo-brand-letter-spacing-label-1: var(--typo-ls-normal);
|
|
759
|
-
--typo-brand-letter-spacing-label-2: var(--typo-ls-wide);
|
|
760
|
-
--typo-brand-letter-spacing-caption-1: var(--typo-ls-wide);
|
|
761
|
-
--typo-brand-letter-spacing-caption-2: var(--typo-ls-wide);
|
|
762
|
-
}
|
|
763
768
|
:root {
|
|
764
769
|
--semantic-typo-display-1-b-font: var(--typo-brand-font-family-font);
|
|
765
770
|
--semantic-typo-display-1-b-size: var(--typo-brand-size-display-1);
|
|
@@ -1050,6 +1055,9 @@
|
|
|
1050
1055
|
.semantic-text-brand {
|
|
1051
1056
|
--ds-color: var(--semantic-text-brand);
|
|
1052
1057
|
}
|
|
1058
|
+
.semantic-text-brand-secondary {
|
|
1059
|
+
--ds-color: var(--semantic-text-brand-secondary);
|
|
1060
|
+
}
|
|
1053
1061
|
.semantic-text-disabled {
|
|
1054
1062
|
--ds-color: var(--semantic-text-disabled);
|
|
1055
1063
|
}
|
|
@@ -1101,6 +1109,15 @@
|
|
|
1101
1109
|
.semantic-surface-brand-strong {
|
|
1102
1110
|
--ds-color: var(--semantic-surface-brand-strong);
|
|
1103
1111
|
}
|
|
1112
|
+
.semantic-surface-brand-secondary-subtle {
|
|
1113
|
+
--ds-color: var(--semantic-surface-brand-secondary-subtle);
|
|
1114
|
+
}
|
|
1115
|
+
.semantic-surface-brand-secondary-default {
|
|
1116
|
+
--ds-color: var(--semantic-surface-brand-secondary-default);
|
|
1117
|
+
}
|
|
1118
|
+
.semantic-surface-brand-secondary-strong {
|
|
1119
|
+
--ds-color: var(--semantic-surface-brand-secondary-strong);
|
|
1120
|
+
}
|
|
1104
1121
|
.semantic-surface-success-subtle {
|
|
1105
1122
|
--ds-color: var(--semantic-surface-success-subtle);
|
|
1106
1123
|
}
|
|
@@ -1152,6 +1169,9 @@
|
|
|
1152
1169
|
.semantic-border-brand {
|
|
1153
1170
|
--ds-color: var(--semantic-border-brand);
|
|
1154
1171
|
}
|
|
1172
|
+
.semantic-border-brand-secondary {
|
|
1173
|
+
--ds-color: var(--semantic-border-brand-secondary);
|
|
1174
|
+
}
|
|
1155
1175
|
.semantic-border-success {
|
|
1156
1176
|
--ds-color: var(--semantic-border-success);
|
|
1157
1177
|
}
|
|
@@ -1176,6 +1196,9 @@
|
|
|
1176
1196
|
.semantic-icon-brand {
|
|
1177
1197
|
--ds-color: var(--semantic-icon-brand);
|
|
1178
1198
|
}
|
|
1199
|
+
.semantic-icon-brand-secondary {
|
|
1200
|
+
--ds-color: var(--semantic-icon-brand-secondary);
|
|
1201
|
+
}
|
|
1179
1202
|
.semantic-icon-success {
|
|
1180
1203
|
--ds-color: var(--semantic-icon-success);
|
|
1181
1204
|
}
|
|
@@ -1194,6 +1217,9 @@
|
|
|
1194
1217
|
.semantic-emphasis-brand {
|
|
1195
1218
|
--ds-color: var(--semantic-emphasis-brand);
|
|
1196
1219
|
}
|
|
1220
|
+
.semantic-emphasis-brand-secondary {
|
|
1221
|
+
--ds-color: var(--semantic-emphasis-brand-secondary);
|
|
1222
|
+
}
|
|
1197
1223
|
.semantic-emphasis-success {
|
|
1198
1224
|
--ds-color: var(--semantic-emphasis-success);
|
|
1199
1225
|
}
|