@x-plat/design-system 0.5.52 → 0.5.53

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.
@@ -109,8 +109,8 @@
109
109
  max-height: 200px;
110
110
  overflow-y: auto;
111
111
  padding: 4px 0;
112
- font-size: 16px;
113
- line-height: 24px;
112
+ font-size: var(--semantic-typo-label-1-m-size);
113
+ line-height: var(--semantic-typo-label-1-m-lh);
114
114
  color: var(--semantic-text-strong);
115
115
  background: transparent;
116
116
  }
@@ -24,10 +24,16 @@
24
24
  height: var(--spacing-space-6);
25
25
  }
26
26
  .lib-xplat-checkbox.sm > .label {
27
- font-size: 14px;
27
+ font-size: var(--semantic-typo-label-2-m-size);
28
+ line-height: var(--semantic-typo-label-2-m-lh);
29
+ }
30
+ .lib-xplat-checkbox.md > .label {
31
+ font-size: var(--semantic-typo-label-1-m-size);
32
+ line-height: var(--semantic-typo-label-1-m-lh);
28
33
  }
29
34
  .lib-xplat-checkbox.lg > .label {
30
- font-size: 18px;
35
+ font-size: var(--semantic-typo-body-1-m-size);
36
+ line-height: var(--semantic-typo-body-1-m-lh);
31
37
  }
32
38
  .lib-xplat-checkbox > .checkbox {
33
39
  display: flex;
@@ -193,7 +193,7 @@
193
193
  color: var(--semantic-text-error);
194
194
  }
195
195
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
196
- font-size: 16px;
196
+ font-size: var(--semantic-typo-label-1-m-size);
197
197
  }
198
198
 
199
199
  /* src/components/Modal/modal.scss */
@@ -96,5 +96,5 @@
96
96
  color: var(--semantic-text-error);
97
97
  }
98
98
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
99
- font-size: 16px;
99
+ font-size: var(--semantic-typo-label-1-m-size);
100
100
  }
@@ -19,12 +19,17 @@
19
19
  height: var(--spacing-space-2);
20
20
  }
21
21
  .lib-xplat-radio.sm > span {
22
- font-size: 14px;
22
+ font-size: var(--semantic-typo-label-2-m-size);
23
+ line-height: var(--semantic-typo-label-2-m-lh);
23
24
  }
24
25
  .lib-xplat-radio.md > .circle {
25
26
  width: var(--spacing-space-5);
26
27
  height: var(--spacing-space-5);
27
28
  }
29
+ .lib-xplat-radio.md > span {
30
+ font-size: var(--semantic-typo-label-1-m-size);
31
+ line-height: var(--semantic-typo-label-1-m-lh);
32
+ }
28
33
  .lib-xplat-radio.lg > .circle {
29
34
  width: var(--spacing-space-6);
30
35
  height: var(--spacing-space-6);
@@ -34,7 +39,8 @@
34
39
  height: var(--spacing-space-4);
35
40
  }
36
41
  .lib-xplat-radio.lg > span {
37
- font-size: 18px;
42
+ font-size: var(--semantic-typo-body-1-m-size);
43
+ line-height: var(--semantic-typo-body-1-m-lh);
38
44
  }
39
45
  .lib-xplat-radio > .circle {
40
46
  border: 2px solid var(--semantic-border-strong);
@@ -102,7 +102,7 @@
102
102
  transform: rotate(180deg);
103
103
  }
104
104
  .lib-xplat-select .select-trigger .select-trigger-icon svg {
105
- font-size: 20px;
105
+ font-size: var(--semantic-typo-body-1-m-size);
106
106
  }
107
107
  .lib-xplat-select-content {
108
108
  position: fixed;
@@ -141,7 +141,8 @@
141
141
  }
142
142
  .lib-xplat-select-content .select-item {
143
143
  padding: var(--spacing-space-2) var(--spacing-space-3);
144
- font-size: 14px;
144
+ font-size: var(--semantic-typo-label-1-m-size);
145
+ line-height: var(--semantic-typo-label-1-m-lh);
145
146
  cursor: pointer;
146
147
  transition: background-color 0.15s ease;
147
148
  outline: none;
@@ -2668,8 +2668,8 @@
2668
2668
  max-height: 200px;
2669
2669
  overflow-y: auto;
2670
2670
  padding: 4px 0;
2671
- font-size: 16px;
2672
- line-height: 24px;
2671
+ font-size: var(--semantic-typo-label-1-m-size);
2672
+ line-height: var(--semantic-typo-label-1-m-lh);
2673
2673
  color: var(--semantic-text-strong);
2674
2674
  background: transparent;
2675
2675
  }
@@ -2707,10 +2707,16 @@
2707
2707
  height: var(--spacing-space-6);
2708
2708
  }
2709
2709
  .lib-xplat-checkbox.sm > .label {
2710
- font-size: 14px;
2710
+ font-size: var(--semantic-typo-label-2-m-size);
2711
+ line-height: var(--semantic-typo-label-2-m-lh);
2712
+ }
2713
+ .lib-xplat-checkbox.md > .label {
2714
+ font-size: var(--semantic-typo-label-1-m-size);
2715
+ line-height: var(--semantic-typo-label-1-m-lh);
2711
2716
  }
2712
2717
  .lib-xplat-checkbox.lg > .label {
2713
- font-size: 18px;
2718
+ font-size: var(--semantic-typo-body-1-m-size);
2719
+ line-height: var(--semantic-typo-body-1-m-lh);
2714
2720
  }
2715
2721
  .lib-xplat-checkbox > .checkbox {
2716
2722
  display: flex;
@@ -2929,7 +2935,7 @@
2929
2935
  color: var(--semantic-text-error);
2930
2936
  }
2931
2937
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
2932
- font-size: 16px;
2938
+ font-size: var(--semantic-typo-label-1-m-size);
2933
2939
  }
2934
2940
 
2935
2941
  /* src/components/Modal/modal.scss */
@@ -4096,12 +4102,17 @@
4096
4102
  height: var(--spacing-space-2);
4097
4103
  }
4098
4104
  .lib-xplat-radio.sm > span {
4099
- font-size: 14px;
4105
+ font-size: var(--semantic-typo-label-2-m-size);
4106
+ line-height: var(--semantic-typo-label-2-m-lh);
4100
4107
  }
4101
4108
  .lib-xplat-radio.md > .circle {
4102
4109
  width: var(--spacing-space-5);
4103
4110
  height: var(--spacing-space-5);
4104
4111
  }
4112
+ .lib-xplat-radio.md > span {
4113
+ font-size: var(--semantic-typo-label-1-m-size);
4114
+ line-height: var(--semantic-typo-label-1-m-lh);
4115
+ }
4105
4116
  .lib-xplat-radio.lg > .circle {
4106
4117
  width: var(--spacing-space-6);
4107
4118
  height: var(--spacing-space-6);
@@ -4111,7 +4122,8 @@
4111
4122
  height: var(--spacing-space-4);
4112
4123
  }
4113
4124
  .lib-xplat-radio.lg > span {
4114
- font-size: 18px;
4125
+ font-size: var(--semantic-typo-body-1-m-size);
4126
+ line-height: var(--semantic-typo-body-1-m-lh);
4115
4127
  }
4116
4128
  .lib-xplat-radio > .circle {
4117
4129
  border: 2px solid var(--semantic-border-strong);
@@ -4276,7 +4288,7 @@
4276
4288
  transform: rotate(180deg);
4277
4289
  }
4278
4290
  .lib-xplat-select .select-trigger .select-trigger-icon svg {
4279
- font-size: 20px;
4291
+ font-size: var(--semantic-typo-body-1-m-size);
4280
4292
  }
4281
4293
  .lib-xplat-select-content {
4282
4294
  position: fixed;
@@ -4315,7 +4327,8 @@
4315
4327
  }
4316
4328
  .lib-xplat-select-content .select-item {
4317
4329
  padding: var(--spacing-space-2) var(--spacing-space-3);
4318
- font-size: 14px;
4330
+ font-size: var(--semantic-typo-label-1-m-size);
4331
+ line-height: var(--semantic-typo-label-1-m-lh);
4319
4332
  cursor: pointer;
4320
4333
  transition: background-color 0.15s ease;
4321
4334
  outline: none;
package/dist/index.css CHANGED
@@ -2668,8 +2668,8 @@
2668
2668
  max-height: 200px;
2669
2669
  overflow-y: auto;
2670
2670
  padding: 4px 0;
2671
- font-size: 16px;
2672
- line-height: 24px;
2671
+ font-size: var(--semantic-typo-label-1-m-size);
2672
+ line-height: var(--semantic-typo-label-1-m-lh);
2673
2673
  color: var(--semantic-text-strong);
2674
2674
  background: transparent;
2675
2675
  }
@@ -2707,10 +2707,16 @@
2707
2707
  height: var(--spacing-space-6);
2708
2708
  }
2709
2709
  .lib-xplat-checkbox.sm > .label {
2710
- font-size: 14px;
2710
+ font-size: var(--semantic-typo-label-2-m-size);
2711
+ line-height: var(--semantic-typo-label-2-m-lh);
2712
+ }
2713
+ .lib-xplat-checkbox.md > .label {
2714
+ font-size: var(--semantic-typo-label-1-m-size);
2715
+ line-height: var(--semantic-typo-label-1-m-lh);
2711
2716
  }
2712
2717
  .lib-xplat-checkbox.lg > .label {
2713
- font-size: 18px;
2718
+ font-size: var(--semantic-typo-body-1-m-size);
2719
+ line-height: var(--semantic-typo-body-1-m-lh);
2714
2720
  }
2715
2721
  .lib-xplat-checkbox > .checkbox {
2716
2722
  display: flex;
@@ -2929,7 +2935,7 @@
2929
2935
  color: var(--semantic-text-error);
2930
2936
  }
2931
2937
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
2932
- font-size: 16px;
2938
+ font-size: var(--semantic-typo-label-1-m-size);
2933
2939
  }
2934
2940
 
2935
2941
  /* src/components/Modal/modal.scss */
@@ -4096,12 +4102,17 @@
4096
4102
  height: var(--spacing-space-2);
4097
4103
  }
4098
4104
  .lib-xplat-radio.sm > span {
4099
- font-size: 14px;
4105
+ font-size: var(--semantic-typo-label-2-m-size);
4106
+ line-height: var(--semantic-typo-label-2-m-lh);
4100
4107
  }
4101
4108
  .lib-xplat-radio.md > .circle {
4102
4109
  width: var(--spacing-space-5);
4103
4110
  height: var(--spacing-space-5);
4104
4111
  }
4112
+ .lib-xplat-radio.md > span {
4113
+ font-size: var(--semantic-typo-label-1-m-size);
4114
+ line-height: var(--semantic-typo-label-1-m-lh);
4115
+ }
4105
4116
  .lib-xplat-radio.lg > .circle {
4106
4117
  width: var(--spacing-space-6);
4107
4118
  height: var(--spacing-space-6);
@@ -4111,7 +4122,8 @@
4111
4122
  height: var(--spacing-space-4);
4112
4123
  }
4113
4124
  .lib-xplat-radio.lg > span {
4114
- font-size: 18px;
4125
+ font-size: var(--semantic-typo-body-1-m-size);
4126
+ line-height: var(--semantic-typo-body-1-m-lh);
4115
4127
  }
4116
4128
  .lib-xplat-radio > .circle {
4117
4129
  border: 2px solid var(--semantic-border-strong);
@@ -4276,7 +4288,7 @@
4276
4288
  transform: rotate(180deg);
4277
4289
  }
4278
4290
  .lib-xplat-select .select-trigger .select-trigger-icon svg {
4279
- font-size: 20px;
4291
+ font-size: var(--semantic-typo-body-1-m-size);
4280
4292
  }
4281
4293
  .lib-xplat-select-content {
4282
4294
  position: fixed;
@@ -4315,7 +4327,8 @@
4315
4327
  }
4316
4328
  .lib-xplat-select-content .select-item {
4317
4329
  padding: var(--spacing-space-2) var(--spacing-space-3);
4318
- font-size: 14px;
4330
+ font-size: var(--semantic-typo-label-1-m-size);
4331
+ line-height: var(--semantic-typo-label-1-m-lh);
4319
4332
  cursor: pointer;
4320
4333
  transition: background-color 0.15s ease;
4321
4334
  outline: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.52",
3
+ "version": "0.5.53",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",