@x-plat/design-system 0.5.50 → 0.5.51

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.
Files changed (8) hide show
  1. package/dist/components/Button/index.css +6 -3
  2. package/dist/components/DatePicker/index.css +14 -7
  3. package/dist/components/Input/index.css +8 -4
  4. package/dist/components/Select/index.css +10 -5
  5. package/dist/components/TextArea/index.css +3 -0
  6. package/dist/components/index.css +27 -12
  7. package/dist/index.css +27 -12
  8. package/package.json +1 -1
package/dist/components/Button/index.css CHANGED
@@ -15,17 +15,20 @@
15
15
  .lib-xplat-button.sm {
16
16
  height: var(--spacing-control-height-sm);
17
17
  padding: 0 var(--spacing-space-3);
18
- font-size: 14px;
18
+ font-size: var(--semantic-typo-label-2-m-size);
19
+ line-height: var(--semantic-typo-label-2-m-lh);
19
20
  }
20
21
  .lib-xplat-button.md {
21
22
  height: var(--spacing-control-height-md);
22
23
  padding: 0 var(--spacing-space-4);
23
- font-size: 16px;
24
+ font-size: var(--semantic-typo-label-1-m-size);
25
+ line-height: var(--semantic-typo-label-1-m-lh);
24
26
  }
25
27
  .lib-xplat-button.lg {
26
28
  height: var(--spacing-control-height-lg);
27
29
  padding: 0 var(--spacing-space-6);
28
- font-size: 18px;
30
+ font-size: var(--semantic-typo-body-1-m-size);
31
+ line-height: var(--semantic-typo-body-1-m-lh);
29
32
  }
30
33
  .lib-xplat-button:disabled {
31
34
  cursor: not-allowed;
package/dist/components/DatePicker/index.css CHANGED
@@ -15,17 +15,20 @@
15
15
  .lib-xplat-button.sm {
16
16
  height: var(--spacing-control-height-sm);
17
17
  padding: 0 var(--spacing-space-3);
18
- font-size: 14px;
18
+ font-size: var(--semantic-typo-label-2-m-size);
19
+ line-height: var(--semantic-typo-label-2-m-lh);
19
20
  }
20
21
  .lib-xplat-button.md {
21
22
  height: var(--spacing-control-height-md);
22
23
  padding: 0 var(--spacing-space-4);
23
- font-size: 16px;
24
+ font-size: var(--semantic-typo-label-1-m-size);
25
+ line-height: var(--semantic-typo-label-1-m-lh);
24
26
  }
25
27
  .lib-xplat-button.lg {
26
28
  height: var(--spacing-control-height-lg);
27
29
  padding: 0 var(--spacing-space-6);
28
- font-size: 18px;
30
+ font-size: var(--semantic-typo-body-1-m-size);
31
+ line-height: var(--semantic-typo-body-1-m-lh);
29
32
  }
30
33
  .lib-xplat-button:disabled {
31
34
  cursor: not-allowed;
@@ -121,15 +124,18 @@
121
124
  }
122
125
  .lib-xplat-input-wrap .lib-xplat-input.sm {
123
126
  height: var(--spacing-control-height-sm);
124
- font-size: 14px;
127
+ font-size: var(--semantic-typo-label-2-m-size);
128
+ line-height: var(--semantic-typo-label-2-m-lh);
125
129
  }
126
130
  .lib-xplat-input-wrap .lib-xplat-input.md {
127
131
  height: var(--spacing-control-height-md);
128
- font-size: 16px;
132
+ font-size: var(--semantic-typo-label-1-m-size);
133
+ line-height: var(--semantic-typo-label-1-m-lh);
129
134
  }
130
135
  .lib-xplat-input-wrap .lib-xplat-input.lg {
131
136
  height: var(--spacing-control-height-lg);
132
- font-size: 18px;
137
+ font-size: var(--semantic-typo-body-1-m-size);
138
+ line-height: var(--semantic-typo-body-1-m-lh);
133
139
  }
134
140
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
135
141
  background-color: var(--semantic-surface-neutral-disabled);
@@ -169,7 +175,8 @@
169
175
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
170
176
  display: flex;
171
177
  gap: var(--spacing-space-1);
172
- font-size: 12px;
178
+ font-size: var(--semantic-typo-caption-2-r-size);
179
+ line-height: var(--semantic-typo-caption-2-r-lh);
173
180
  align-items: center;
174
181
  user-select: none;
175
182
  }
package/dist/components/Input/index.css CHANGED
@@ -27,15 +27,18 @@
27
27
  }
28
28
  .lib-xplat-input-wrap .lib-xplat-input.sm {
29
29
  height: var(--spacing-control-height-sm);
30
- font-size: 14px;
30
+ font-size: var(--semantic-typo-label-2-m-size);
31
+ line-height: var(--semantic-typo-label-2-m-lh);
31
32
  }
32
33
  .lib-xplat-input-wrap .lib-xplat-input.md {
33
34
  height: var(--spacing-control-height-md);
34
- font-size: 16px;
35
+ font-size: var(--semantic-typo-label-1-m-size);
36
+ line-height: var(--semantic-typo-label-1-m-lh);
35
37
  }
36
38
  .lib-xplat-input-wrap .lib-xplat-input.lg {
37
39
  height: var(--spacing-control-height-lg);
38
- font-size: 18px;
40
+ font-size: var(--semantic-typo-body-1-m-size);
41
+ line-height: var(--semantic-typo-body-1-m-lh);
39
42
  }
40
43
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
41
44
  background-color: var(--semantic-surface-neutral-disabled);
@@ -75,7 +78,8 @@
75
78
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
76
79
  display: flex;
77
80
  gap: var(--spacing-space-1);
78
- font-size: 12px;
81
+ font-size: var(--semantic-typo-caption-2-r-size);
82
+ line-height: var(--semantic-typo-caption-2-r-lh);
79
83
  align-items: center;
80
84
  user-select: none;
81
85
  }
package/dist/components/Select/index.css CHANGED
@@ -11,25 +11,30 @@
11
11
  .lib-xplat-select.sm .select-trigger {
12
12
  min-height: var(--spacing-control-height-sm);
13
13
  padding: var(--spacing-space-1) var(--spacing-space-2);
14
- font-size: 12px;
14
+ font-size: var(--semantic-typo-label-2-m-size);
15
+ line-height: var(--semantic-typo-label-2-m-lh);
15
16
  }
16
17
  .lib-xplat-select.md .select-trigger {
17
18
  min-height: var(--spacing-control-height-md);
18
19
  padding: var(--spacing-space-2) var(--spacing-space-3);
19
- font-size: 14px;
20
+ font-size: var(--semantic-typo-label-1-m-size);
21
+ line-height: var(--semantic-typo-label-1-m-lh);
20
22
  }
21
23
  .lib-xplat-select.lg .select-trigger {
22
24
  min-height: var(--spacing-control-height-lg);
23
25
  padding: var(--spacing-space-2) var(--spacing-space-4);
24
- font-size: 16px;
26
+ font-size: var(--semantic-typo-body-1-m-size);
27
+ line-height: var(--semantic-typo-body-1-m-lh);
25
28
  }
26
29
  .lib-xplat-select.sm .select-content .select-item {
27
30
  padding: var(--spacing-space-2) var(--spacing-space-2);
28
- font-size: 12px;
31
+ font-size: var(--semantic-typo-label-2-m-size);
32
+ line-height: var(--semantic-typo-label-2-m-lh);
29
33
  }
30
34
  .lib-xplat-select.lg .select-content .select-item {
31
35
  padding: var(--spacing-space-2) var(--spacing-space-4);
32
- font-size: 16px;
36
+ font-size: var(--semantic-typo-body-1-m-size);
37
+ line-height: var(--semantic-typo-body-1-m-lh);
33
38
  }
34
39
  .lib-xplat-select .select-trigger {
35
40
  cursor: pointer;
package/dist/components/TextArea/index.css CHANGED
@@ -39,6 +39,9 @@
39
39
  color: var(--semantic-text-subtle);
40
40
  resize: none;
41
41
  height: 1.5em;
42
+ font-size: var(--semantic-typo-label-1-m-size);
43
+ line-height: var(--semantic-typo-label-1-m-lh);
44
+ font-family: inherit;
42
45
  }
43
46
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
44
47
  cursor: not-allowed;
package/dist/components/index.css CHANGED
@@ -1994,17 +1994,20 @@
1994
1994
  .lib-xplat-button.sm {
1995
1995
  height: var(--spacing-control-height-sm);
1996
1996
  padding: 0 var(--spacing-space-3);
1997
- font-size: 14px;
1997
+ font-size: var(--semantic-typo-label-2-m-size);
1998
+ line-height: var(--semantic-typo-label-2-m-lh);
1998
1999
  }
1999
2000
  .lib-xplat-button.md {
2000
2001
  height: var(--spacing-control-height-md);
2001
2002
  padding: 0 var(--spacing-space-4);
2002
- font-size: 16px;
2003
+ font-size: var(--semantic-typo-label-1-m-size);
2004
+ line-height: var(--semantic-typo-label-1-m-lh);
2003
2005
  }
2004
2006
  .lib-xplat-button.lg {
2005
2007
  height: var(--spacing-control-height-lg);
2006
2008
  padding: 0 var(--spacing-space-6);
2007
- font-size: 18px;
2009
+ font-size: var(--semantic-typo-body-1-m-size);
2010
+ line-height: var(--semantic-typo-body-1-m-lh);
2008
2011
  }
2009
2012
  .lib-xplat-button:disabled {
2010
2013
  cursor: not-allowed;
@@ -2857,15 +2860,18 @@
2857
2860
  }
2858
2861
  .lib-xplat-input-wrap .lib-xplat-input.sm {
2859
2862
  height: var(--spacing-control-height-sm);
2860
- font-size: 14px;
2863
+ font-size: var(--semantic-typo-label-2-m-size);
2864
+ line-height: var(--semantic-typo-label-2-m-lh);
2861
2865
  }
2862
2866
  .lib-xplat-input-wrap .lib-xplat-input.md {
2863
2867
  height: var(--spacing-control-height-md);
2864
- font-size: 16px;
2868
+ font-size: var(--semantic-typo-label-1-m-size);
2869
+ line-height: var(--semantic-typo-label-1-m-lh);
2865
2870
  }
2866
2871
  .lib-xplat-input-wrap .lib-xplat-input.lg {
2867
2872
  height: var(--spacing-control-height-lg);
2868
- font-size: 18px;
2873
+ font-size: var(--semantic-typo-body-1-m-size);
2874
+ line-height: var(--semantic-typo-body-1-m-lh);
2869
2875
  }
2870
2876
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
2871
2877
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2905,7 +2911,8 @@
2905
2911
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
2906
2912
  display: flex;
2907
2913
  gap: var(--spacing-space-1);
2908
- font-size: 12px;
2914
+ font-size: var(--semantic-typo-caption-2-r-size);
2915
+ line-height: var(--semantic-typo-caption-2-r-lh);
2909
2916
  align-items: center;
2910
2917
  user-select: none;
2911
2918
  }
@@ -4178,25 +4185,30 @@
4178
4185
  .lib-xplat-select.sm .select-trigger {
4179
4186
  min-height: var(--spacing-control-height-sm);
4180
4187
  padding: var(--spacing-space-1) var(--spacing-space-2);
4181
- font-size: 12px;
4188
+ font-size: var(--semantic-typo-label-2-m-size);
4189
+ line-height: var(--semantic-typo-label-2-m-lh);
4182
4190
  }
4183
4191
  .lib-xplat-select.md .select-trigger {
4184
4192
  min-height: var(--spacing-control-height-md);
4185
4193
  padding: var(--spacing-space-2) var(--spacing-space-3);
4186
- font-size: 14px;
4194
+ font-size: var(--semantic-typo-label-1-m-size);
4195
+ line-height: var(--semantic-typo-label-1-m-lh);
4187
4196
  }
4188
4197
  .lib-xplat-select.lg .select-trigger {
4189
4198
  min-height: var(--spacing-control-height-lg);
4190
4199
  padding: var(--spacing-space-2) var(--spacing-space-4);
4191
- font-size: 16px;
4200
+ font-size: var(--semantic-typo-body-1-m-size);
4201
+ line-height: var(--semantic-typo-body-1-m-lh);
4192
4202
  }
4193
4203
  .lib-xplat-select.sm .select-content .select-item {
4194
4204
  padding: var(--spacing-space-2) var(--spacing-space-2);
4195
- font-size: 12px;
4205
+ font-size: var(--semantic-typo-label-2-m-size);
4206
+ line-height: var(--semantic-typo-label-2-m-lh);
4196
4207
  }
4197
4208
  .lib-xplat-select.lg .select-content .select-item {
4198
4209
  padding: var(--spacing-space-2) var(--spacing-space-4);
4199
- font-size: 16px;
4210
+ font-size: var(--semantic-typo-body-1-m-size);
4211
+ line-height: var(--semantic-typo-body-1-m-lh);
4200
4212
  }
4201
4213
  .lib-xplat-select .select-trigger {
4202
4214
  cursor: pointer;
@@ -5136,6 +5148,9 @@
5136
5148
  color: var(--semantic-text-subtle);
5137
5149
  resize: none;
5138
5150
  height: 1.5em;
5151
+ font-size: var(--semantic-typo-label-1-m-size);
5152
+ line-height: var(--semantic-typo-label-1-m-lh);
5153
+ font-family: inherit;
5139
5154
  }
5140
5155
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
5141
5156
  cursor: not-allowed;
package/dist/index.css CHANGED
@@ -1994,17 +1994,20 @@
1994
1994
  .lib-xplat-button.sm {
1995
1995
  height: var(--spacing-control-height-sm);
1996
1996
  padding: 0 var(--spacing-space-3);
1997
- font-size: 14px;
1997
+ font-size: var(--semantic-typo-label-2-m-size);
1998
+ line-height: var(--semantic-typo-label-2-m-lh);
1998
1999
  }
1999
2000
  .lib-xplat-button.md {
2000
2001
  height: var(--spacing-control-height-md);
2001
2002
  padding: 0 var(--spacing-space-4);
2002
- font-size: 16px;
2003
+ font-size: var(--semantic-typo-label-1-m-size);
2004
+ line-height: var(--semantic-typo-label-1-m-lh);
2003
2005
  }
2004
2006
  .lib-xplat-button.lg {
2005
2007
  height: var(--spacing-control-height-lg);
2006
2008
  padding: 0 var(--spacing-space-6);
2007
- font-size: 18px;
2009
+ font-size: var(--semantic-typo-body-1-m-size);
2010
+ line-height: var(--semantic-typo-body-1-m-lh);
2008
2011
  }
2009
2012
  .lib-xplat-button:disabled {
2010
2013
  cursor: not-allowed;
@@ -2857,15 +2860,18 @@
2857
2860
  }
2858
2861
  .lib-xplat-input-wrap .lib-xplat-input.sm {
2859
2862
  height: var(--spacing-control-height-sm);
2860
- font-size: 14px;
2863
+ font-size: var(--semantic-typo-label-2-m-size);
2864
+ line-height: var(--semantic-typo-label-2-m-lh);
2861
2865
  }
2862
2866
  .lib-xplat-input-wrap .lib-xplat-input.md {
2863
2867
  height: var(--spacing-control-height-md);
2864
- font-size: 16px;
2868
+ font-size: var(--semantic-typo-label-1-m-size);
2869
+ line-height: var(--semantic-typo-label-1-m-lh);
2865
2870
  }
2866
2871
  .lib-xplat-input-wrap .lib-xplat-input.lg {
2867
2872
  height: var(--spacing-control-height-lg);
2868
- font-size: 18px;
2873
+ font-size: var(--semantic-typo-body-1-m-size);
2874
+ line-height: var(--semantic-typo-body-1-m-lh);
2869
2875
  }
2870
2876
  .lib-xplat-input-wrap .lib-xplat-input.disabled {
2871
2877
  background-color: var(--semantic-surface-neutral-disabled);
@@ -2905,7 +2911,8 @@
2905
2911
  .lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
2906
2912
  display: flex;
2907
2913
  gap: var(--spacing-space-1);
2908
- font-size: 12px;
2914
+ font-size: var(--semantic-typo-caption-2-r-size);
2915
+ line-height: var(--semantic-typo-caption-2-r-lh);
2909
2916
  align-items: center;
2910
2917
  user-select: none;
2911
2918
  }
@@ -4178,25 +4185,30 @@
4178
4185
  .lib-xplat-select.sm .select-trigger {
4179
4186
  min-height: var(--spacing-control-height-sm);
4180
4187
  padding: var(--spacing-space-1) var(--spacing-space-2);
4181
- font-size: 12px;
4188
+ font-size: var(--semantic-typo-label-2-m-size);
4189
+ line-height: var(--semantic-typo-label-2-m-lh);
4182
4190
  }
4183
4191
  .lib-xplat-select.md .select-trigger {
4184
4192
  min-height: var(--spacing-control-height-md);
4185
4193
  padding: var(--spacing-space-2) var(--spacing-space-3);
4186
- font-size: 14px;
4194
+ font-size: var(--semantic-typo-label-1-m-size);
4195
+ line-height: var(--semantic-typo-label-1-m-lh);
4187
4196
  }
4188
4197
  .lib-xplat-select.lg .select-trigger {
4189
4198
  min-height: var(--spacing-control-height-lg);
4190
4199
  padding: var(--spacing-space-2) var(--spacing-space-4);
4191
- font-size: 16px;
4200
+ font-size: var(--semantic-typo-body-1-m-size);
4201
+ line-height: var(--semantic-typo-body-1-m-lh);
4192
4202
  }
4193
4203
  .lib-xplat-select.sm .select-content .select-item {
4194
4204
  padding: var(--spacing-space-2) var(--spacing-space-2);
4195
- font-size: 12px;
4205
+ font-size: var(--semantic-typo-label-2-m-size);
4206
+ line-height: var(--semantic-typo-label-2-m-lh);
4196
4207
  }
4197
4208
  .lib-xplat-select.lg .select-content .select-item {
4198
4209
  padding: var(--spacing-space-2) var(--spacing-space-4);
4199
- font-size: 16px;
4210
+ font-size: var(--semantic-typo-body-1-m-size);
4211
+ line-height: var(--semantic-typo-body-1-m-lh);
4200
4212
  }
4201
4213
  .lib-xplat-select .select-trigger {
4202
4214
  cursor: pointer;
@@ -5136,6 +5148,9 @@
5136
5148
  color: var(--semantic-text-subtle);
5137
5149
  resize: none;
5138
5150
  height: 1.5em;
5151
+ font-size: var(--semantic-typo-label-1-m-size);
5152
+ line-height: var(--semantic-typo-label-1-m-lh);
5153
+ font-family: inherit;
5139
5154
  }
5140
5155
  .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {
5141
5156
  cursor: not-allowed;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@x-plat/design-system",
3
- "version": "0.5.50",
3
+ "version": "0.5.51",
4
4
  "description": "XPLAT UI Design System",
5
5
  "author": "XPLAT WOONG",
6
6
  "main": "dist/index.cjs",