@x-plat/design-system 0.5.60 → 0.5.62
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.
|
@@ -14,10 +14,12 @@
|
|
|
14
14
|
.lib-xplat-checkbox.sm > .checkbox {
|
|
15
15
|
width: var(--spacing-space-4);
|
|
16
16
|
height: var(--spacing-space-4);
|
|
17
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
17
18
|
}
|
|
18
19
|
.lib-xplat-checkbox.md > .checkbox {
|
|
19
20
|
width: var(--spacing-space-5);
|
|
20
21
|
height: var(--spacing-space-5);
|
|
22
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
21
23
|
}
|
|
22
24
|
.lib-xplat-checkbox.lg > .checkbox {
|
|
23
25
|
width: var(--spacing-space-6);
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
.lib-xplat-radio.sm > .circle {
|
|
13
13
|
width: var(--spacing-space-4);
|
|
14
14
|
height: var(--spacing-space-4);
|
|
15
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
15
16
|
border-width: 1.5px;
|
|
16
17
|
}
|
|
17
18
|
.lib-xplat-radio.sm > .circle > .inner-circle {
|
|
@@ -25,6 +26,7 @@
|
|
|
25
26
|
.lib-xplat-radio.md > .circle {
|
|
26
27
|
width: var(--spacing-space-5);
|
|
27
28
|
height: var(--spacing-space-5);
|
|
29
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
28
30
|
}
|
|
29
31
|
.lib-xplat-radio.md > span {
|
|
30
32
|
font-size: var(--semantic-typo-label-2-m-size);
|
|
@@ -304,6 +304,41 @@
|
|
|
304
304
|
--spacing-stroke-xl: var(--spacing-brand-stroke-xl);
|
|
305
305
|
--spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
|
|
306
306
|
}
|
|
307
|
+
:root {
|
|
308
|
+
--effects-opacity-0: 0;
|
|
309
|
+
--effects-opacity-5: 0.05;
|
|
310
|
+
--effects-opacity-10: 0.1;
|
|
311
|
+
--effects-opacity-20: 0.2;
|
|
312
|
+
--effects-opacity-40: 0.4;
|
|
313
|
+
--effects-opacity-60: 0.6;
|
|
314
|
+
--effects-opacity-80: 0.8;
|
|
315
|
+
--effects-opacity-100: 1;
|
|
316
|
+
--effects-shadow-none: none;
|
|
317
|
+
--effects-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
|
|
318
|
+
--effects-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
|
|
319
|
+
--effects-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
|
|
320
|
+
--effects-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
|
|
321
|
+
--effects-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
|
|
322
|
+
--effects-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
|
|
323
|
+
}
|
|
324
|
+
:root {
|
|
325
|
+
--effects-brand-opacity-disabled: var(--effects-opacity-40);
|
|
326
|
+
--effects-brand-opacity-hover: var(--effects-opacity-80);
|
|
327
|
+
--effects-brand-opacity-overlay: var(--effects-opacity-60);
|
|
328
|
+
--effects-brand-shadow-sm: var(--effects-shadow-sm);
|
|
329
|
+
--effects-brand-shadow-md: var(--effects-shadow-md);
|
|
330
|
+
--effects-brand-shadow-lg: var(--effects-shadow-lg);
|
|
331
|
+
--effects-brand-shadow-overlay: var(--effects-shadow-xl);
|
|
332
|
+
}
|
|
333
|
+
:root {
|
|
334
|
+
--semantic-opacity-disabled: var(--effects-brand-opacity-disabled);
|
|
335
|
+
--semantic-opacity-hover: var(--effects-brand-opacity-hover);
|
|
336
|
+
--semantic-opacity-overlay: var(--effects-brand-opacity-overlay);
|
|
337
|
+
--semantic-shadow-sm: var(--effects-brand-shadow-sm);
|
|
338
|
+
--semantic-shadow-md: var(--effects-brand-shadow-md);
|
|
339
|
+
--semantic-shadow-lg: var(--effects-brand-shadow-lg);
|
|
340
|
+
--semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
|
|
341
|
+
}
|
|
307
342
|
:root {
|
|
308
343
|
--brand-primary-50: var(--primitive-blue-50);
|
|
309
344
|
--brand-primary-100: var(--primitive-blue-100);
|
|
@@ -2697,10 +2732,12 @@
|
|
|
2697
2732
|
.lib-xplat-checkbox.sm > .checkbox {
|
|
2698
2733
|
width: var(--spacing-space-4);
|
|
2699
2734
|
height: var(--spacing-space-4);
|
|
2735
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
2700
2736
|
}
|
|
2701
2737
|
.lib-xplat-checkbox.md > .checkbox {
|
|
2702
2738
|
width: var(--spacing-space-5);
|
|
2703
2739
|
height: var(--spacing-space-5);
|
|
2740
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
2704
2741
|
}
|
|
2705
2742
|
.lib-xplat-checkbox.lg > .checkbox {
|
|
2706
2743
|
width: var(--spacing-space-6);
|
|
@@ -4097,6 +4134,7 @@
|
|
|
4097
4134
|
.lib-xplat-radio.sm > .circle {
|
|
4098
4135
|
width: var(--spacing-space-4);
|
|
4099
4136
|
height: var(--spacing-space-4);
|
|
4137
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
4100
4138
|
border-width: 1.5px;
|
|
4101
4139
|
}
|
|
4102
4140
|
.lib-xplat-radio.sm > .circle > .inner-circle {
|
|
@@ -4110,6 +4148,7 @@
|
|
|
4110
4148
|
.lib-xplat-radio.md > .circle {
|
|
4111
4149
|
width: var(--spacing-space-5);
|
|
4112
4150
|
height: var(--spacing-space-5);
|
|
4151
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
4113
4152
|
}
|
|
4114
4153
|
.lib-xplat-radio.md > span {
|
|
4115
4154
|
font-size: var(--semantic-typo-label-2-m-size);
|
package/dist/index.css
CHANGED
|
@@ -304,6 +304,41 @@
|
|
|
304
304
|
--spacing-stroke-xl: var(--spacing-brand-stroke-xl);
|
|
305
305
|
--spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
|
|
306
306
|
}
|
|
307
|
+
:root {
|
|
308
|
+
--effects-opacity-0: 0;
|
|
309
|
+
--effects-opacity-5: 0.05;
|
|
310
|
+
--effects-opacity-10: 0.1;
|
|
311
|
+
--effects-opacity-20: 0.2;
|
|
312
|
+
--effects-opacity-40: 0.4;
|
|
313
|
+
--effects-opacity-60: 0.6;
|
|
314
|
+
--effects-opacity-80: 0.8;
|
|
315
|
+
--effects-opacity-100: 1;
|
|
316
|
+
--effects-shadow-none: none;
|
|
317
|
+
--effects-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
|
|
318
|
+
--effects-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
|
|
319
|
+
--effects-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
|
|
320
|
+
--effects-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
|
|
321
|
+
--effects-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
|
|
322
|
+
--effects-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
|
|
323
|
+
}
|
|
324
|
+
:root {
|
|
325
|
+
--effects-brand-opacity-disabled: var(--effects-opacity-40);
|
|
326
|
+
--effects-brand-opacity-hover: var(--effects-opacity-80);
|
|
327
|
+
--effects-brand-opacity-overlay: var(--effects-opacity-60);
|
|
328
|
+
--effects-brand-shadow-sm: var(--effects-shadow-sm);
|
|
329
|
+
--effects-brand-shadow-md: var(--effects-shadow-md);
|
|
330
|
+
--effects-brand-shadow-lg: var(--effects-shadow-lg);
|
|
331
|
+
--effects-brand-shadow-overlay: var(--effects-shadow-xl);
|
|
332
|
+
}
|
|
333
|
+
:root {
|
|
334
|
+
--semantic-opacity-disabled: var(--effects-brand-opacity-disabled);
|
|
335
|
+
--semantic-opacity-hover: var(--effects-brand-opacity-hover);
|
|
336
|
+
--semantic-opacity-overlay: var(--effects-brand-opacity-overlay);
|
|
337
|
+
--semantic-shadow-sm: var(--effects-brand-shadow-sm);
|
|
338
|
+
--semantic-shadow-md: var(--effects-brand-shadow-md);
|
|
339
|
+
--semantic-shadow-lg: var(--effects-brand-shadow-lg);
|
|
340
|
+
--semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
|
|
341
|
+
}
|
|
307
342
|
:root {
|
|
308
343
|
--brand-primary-50: var(--primitive-blue-50);
|
|
309
344
|
--brand-primary-100: var(--primitive-blue-100);
|
|
@@ -2697,10 +2732,12 @@
|
|
|
2697
2732
|
.lib-xplat-checkbox.sm > .checkbox {
|
|
2698
2733
|
width: var(--spacing-space-4);
|
|
2699
2734
|
height: var(--spacing-space-4);
|
|
2735
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
2700
2736
|
}
|
|
2701
2737
|
.lib-xplat-checkbox.md > .checkbox {
|
|
2702
2738
|
width: var(--spacing-space-5);
|
|
2703
2739
|
height: var(--spacing-space-5);
|
|
2740
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
2704
2741
|
}
|
|
2705
2742
|
.lib-xplat-checkbox.lg > .checkbox {
|
|
2706
2743
|
width: var(--spacing-space-6);
|
|
@@ -4097,6 +4134,7 @@
|
|
|
4097
4134
|
.lib-xplat-radio.sm > .circle {
|
|
4098
4135
|
width: var(--spacing-space-4);
|
|
4099
4136
|
height: var(--spacing-space-4);
|
|
4137
|
+
margin-top: calc((var(--semantic-typo-caption-1-r-lh) - var(--spacing-space-4)) / 2);
|
|
4100
4138
|
border-width: 1.5px;
|
|
4101
4139
|
}
|
|
4102
4140
|
.lib-xplat-radio.sm > .circle > .inner-circle {
|
|
@@ -4110,6 +4148,7 @@
|
|
|
4110
4148
|
.lib-xplat-radio.md > .circle {
|
|
4111
4149
|
width: var(--spacing-space-5);
|
|
4112
4150
|
height: var(--spacing-space-5);
|
|
4151
|
+
margin-top: calc((var(--semantic-typo-label-2-m-lh) - var(--spacing-space-5)) / 2);
|
|
4113
4152
|
}
|
|
4114
4153
|
.lib-xplat-radio.md > span {
|
|
4115
4154
|
font-size: var(--semantic-typo-label-2-m-size);
|
package/dist/layout/index.css
CHANGED
|
@@ -302,6 +302,41 @@
|
|
|
302
302
|
--spacing-stroke-xl: var(--spacing-brand-stroke-xl);
|
|
303
303
|
--spacing-stroke-2xl: var(--spacing-brand-stroke-2xl);
|
|
304
304
|
}
|
|
305
|
+
:root {
|
|
306
|
+
--effects-opacity-0: 0;
|
|
307
|
+
--effects-opacity-5: 0.05;
|
|
308
|
+
--effects-opacity-10: 0.1;
|
|
309
|
+
--effects-opacity-20: 0.2;
|
|
310
|
+
--effects-opacity-40: 0.4;
|
|
311
|
+
--effects-opacity-60: 0.6;
|
|
312
|
+
--effects-opacity-80: 0.8;
|
|
313
|
+
--effects-opacity-100: 1;
|
|
314
|
+
--effects-shadow-none: none;
|
|
315
|
+
--effects-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
|
|
316
|
+
--effects-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.06);
|
|
317
|
+
--effects-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.06);
|
|
318
|
+
--effects-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
|
|
319
|
+
--effects-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);
|
|
320
|
+
--effects-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
|
|
321
|
+
}
|
|
322
|
+
:root {
|
|
323
|
+
--effects-brand-opacity-disabled: var(--effects-opacity-40);
|
|
324
|
+
--effects-brand-opacity-hover: var(--effects-opacity-80);
|
|
325
|
+
--effects-brand-opacity-overlay: var(--effects-opacity-60);
|
|
326
|
+
--effects-brand-shadow-sm: var(--effects-shadow-sm);
|
|
327
|
+
--effects-brand-shadow-md: var(--effects-shadow-md);
|
|
328
|
+
--effects-brand-shadow-lg: var(--effects-shadow-lg);
|
|
329
|
+
--effects-brand-shadow-overlay: var(--effects-shadow-xl);
|
|
330
|
+
}
|
|
331
|
+
:root {
|
|
332
|
+
--semantic-opacity-disabled: var(--effects-brand-opacity-disabled);
|
|
333
|
+
--semantic-opacity-hover: var(--effects-brand-opacity-hover);
|
|
334
|
+
--semantic-opacity-overlay: var(--effects-brand-opacity-overlay);
|
|
335
|
+
--semantic-shadow-sm: var(--effects-brand-shadow-sm);
|
|
336
|
+
--semantic-shadow-md: var(--effects-brand-shadow-md);
|
|
337
|
+
--semantic-shadow-lg: var(--effects-brand-shadow-lg);
|
|
338
|
+
--semantic-shadow-overlay: var(--effects-brand-shadow-overlay);
|
|
339
|
+
}
|
|
305
340
|
:root {
|
|
306
341
|
--brand-primary-50: var(--primitive-blue-50);
|
|
307
342
|
--brand-primary-100: var(--primitive-blue-100);
|