@seed-design/css 0.1.6 → 0.1.8

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 (6) hide show
  1. package/all.css +96 -32
  2. package/all.min.css +1 -1
  3. package/base.css +20 -20
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/text-field.css +61 -3
package/all.css CHANGED
@@ -235,32 +235,32 @@
235
235
  --seed-duration-d4: .2s;
236
236
  --seed-duration-d5: .25s;
237
237
  --seed-duration-d6: .3s;
238
- --seed-font-size-t1: calc(.6875rem * var(--seed-font-size-multiplier));
239
- --seed-font-size-t2: calc(.75rem * var(--seed-font-size-multiplier));
240
- --seed-font-size-t3: calc(.8125rem * var(--seed-font-size-multiplier));
241
- --seed-font-size-t4: calc(.875rem * var(--seed-font-size-multiplier));
242
- --seed-font-size-t5: calc(1rem * var(--seed-font-size-multiplier));
243
- --seed-font-size-t6: calc(1.125rem * var(--seed-font-size-multiplier));
244
- --seed-font-size-t7: calc(1.25rem * var(--seed-font-size-multiplier));
245
- --seed-font-size-t8: calc(1.375rem * var(--seed-font-size-multiplier));
246
- --seed-font-size-t9: calc(1.5rem * var(--seed-font-size-multiplier));
247
- --seed-font-size-t10: calc(1.625rem * var(--seed-font-size-multiplier));
238
+ --seed-font-size-t1: clamp(8.8px, calc(.6875rem * var(--seed-font-size-multiplier)), 13.98px);
239
+ --seed-font-size-t2: clamp(9.6px, calc(.75rem * var(--seed-font-size-multiplier)), 15.25px);
240
+ --seed-font-size-t3: clamp(10.4px, calc(.8125rem * var(--seed-font-size-multiplier)), 16.52px);
241
+ --seed-font-size-t4: clamp(11.2px, calc(.875rem * var(--seed-font-size-multiplier)), 17.79px);
242
+ --seed-font-size-t5: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
243
+ --seed-font-size-t6: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
244
+ --seed-font-size-t7: clamp(16px, calc(1.25rem * var(--seed-font-size-multiplier)), 25.41px);
245
+ --seed-font-size-t8: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
246
+ --seed-font-size-t9: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
247
+ --seed-font-size-t10: clamp(20.8px, calc(1.625rem * var(--seed-font-size-multiplier)), 33.04px);
248
248
  --seed-font-size-t2-static: 12px;
249
249
  --seed-font-size-t5-static: 16px;
250
250
  --seed-font-size-t6-static: 18px;
251
251
  --seed-font-weight-regular: 400;
252
252
  --seed-font-weight-medium: 500;
253
253
  --seed-font-weight-bold: 700;
254
- --seed-line-height-t1: calc(.9375rem * var(--seed-font-size-multiplier));
255
- --seed-line-height-t2: calc(1rem * var(--seed-font-size-multiplier));
256
- --seed-line-height-t3: calc(1.125rem * var(--seed-font-size-multiplier));
257
- --seed-line-height-t4: calc(1.1875rem * var(--seed-font-size-multiplier));
258
- --seed-line-height-t5: calc(1.375rem * var(--seed-font-size-multiplier));
259
- --seed-line-height-t6: calc(1.5rem * var(--seed-font-size-multiplier));
260
- --seed-line-height-t7: calc(1.6875rem * var(--seed-font-size-multiplier));
261
- --seed-line-height-t8: calc(1.875rem * var(--seed-font-size-multiplier));
262
- --seed-line-height-t9: calc(2rem * var(--seed-font-size-multiplier));
263
- --seed-line-height-t10: calc(2.1875rem * var(--seed-font-size-multiplier));
254
+ --seed-line-height-t1: clamp(12px, calc(.9375rem * var(--seed-font-size-multiplier)), 19.06px);
255
+ --seed-line-height-t2: clamp(12.8px, calc(1rem * var(--seed-font-size-multiplier)), 20.33px);
256
+ --seed-line-height-t3: clamp(14.4px, calc(1.125rem * var(--seed-font-size-multiplier)), 22.87px);
257
+ --seed-line-height-t4: clamp(15.2px, calc(1.1875rem * var(--seed-font-size-multiplier)), 24.14px);
258
+ --seed-line-height-t5: clamp(17.6px, calc(1.375rem * var(--seed-font-size-multiplier)), 27.95px);
259
+ --seed-line-height-t6: clamp(19.2px, calc(1.5rem * var(--seed-font-size-multiplier)), 30.49px);
260
+ --seed-line-height-t7: clamp(21.6px, calc(1.6875rem * var(--seed-font-size-multiplier)), 34.31px);
261
+ --seed-line-height-t8: clamp(24px, calc(1.875rem * var(--seed-font-size-multiplier)), 38.12px);
262
+ --seed-line-height-t9: clamp(25.6px, calc(2rem * var(--seed-font-size-multiplier)), 40.66px);
263
+ --seed-line-height-t10: clamp(28px, calc(2.1875rem * var(--seed-font-size-multiplier)), 44.47px);
264
264
  --seed-radius-r0_5: 2px;
265
265
  --seed-radius-r1: 4px;
266
266
  --seed-radius-r1_5: 6px;
@@ -4970,6 +4970,7 @@
4970
4970
  border-color: var(--seed-color-stroke-field);
4971
4971
  align-items: center;
4972
4972
  display: flex;
4973
+ overflow: hidden;
4973
4974
  }
4974
4975
 
4975
4976
  .seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
@@ -5112,35 +5113,56 @@
5112
5113
  border-radius: var(--seed-radius-r2_5);
5113
5114
  gap: var(--seed-dimension-x2);
5114
5115
  min-height: 56px;
5115
- padding-inline: var(--seed-dimension-x4);
5116
5116
  }
5117
5117
 
5118
5118
  .seed-text-field__value--size_xlarge {
5119
5119
  padding-block: var(--seed-dimension-x3);
5120
- font-size: var(--seed-font-size-t6);
5121
- line-height: var(--seed-line-height-t6);
5122
5120
  }
5123
5121
 
5124
- .seed-text-field__prefixText--size_xlarge {
5122
+ .seed-text-field__value--size_xlarge:first-child {
5123
+ padding-inline-start: var(--seed-dimension-x4);
5124
+ }
5125
+
5126
+ .seed-text-field__value--size_xlarge:last-child {
5127
+ padding-inline-end: var(--seed-dimension-x4);
5128
+ }
5129
+
5130
+ .seed-text-field__value--size_xlarge, .seed-text-field__prefixText--size_xlarge {
5125
5131
  font-size: var(--seed-font-size-t6);
5126
5132
  line-height: var(--seed-line-height-t6);
5127
5133
  }
5128
5134
 
5135
+ .seed-text-field__prefixText--size_xlarge:first-child {
5136
+ margin-inline-start: var(--seed-dimension-x4);
5137
+ }
5138
+
5129
5139
  .seed-text-field__prefixIcon--size_xlarge {
5130
5140
  width: var(--seed-dimension-x5);
5131
5141
  height: var(--seed-dimension-x5);
5132
5142
  }
5133
5143
 
5144
+ .seed-text-field__prefixIcon--size_xlarge:first-child {
5145
+ margin-inline-start: var(--seed-dimension-x4);
5146
+ }
5147
+
5134
5148
  .seed-text-field__suffixText--size_xlarge {
5135
5149
  font-size: var(--seed-font-size-t6);
5136
5150
  line-height: var(--seed-line-height-t6);
5137
5151
  }
5138
5152
 
5153
+ .seed-text-field__suffixText--size_xlarge:last-child {
5154
+ margin-inline-end: var(--seed-dimension-x4);
5155
+ }
5156
+
5139
5157
  .seed-text-field__suffixIcon--size_xlarge {
5140
5158
  width: var(--seed-dimension-x5);
5141
5159
  height: var(--seed-dimension-x5);
5142
5160
  }
5143
5161
 
5162
+ .seed-text-field__suffixIcon--size_xlarge:last-child {
5163
+ margin-inline-end: var(--seed-dimension-x4);
5164
+ }
5165
+
5144
5166
  .seed-text-field__footer--size_xlarge {
5145
5167
  gap: var(--seed-dimension-x3_5);
5146
5168
  padding-top: var(--seed-dimension-x2);
@@ -5177,35 +5199,56 @@
5177
5199
  border-radius: var(--seed-radius-r2_5);
5178
5200
  gap: var(--seed-dimension-x2);
5179
5201
  min-height: 52px;
5180
- padding-inline: var(--seed-dimension-x4);
5181
5202
  }
5182
5203
 
5183
5204
  .seed-text-field__value--size_large {
5184
5205
  padding-block: var(--seed-dimension-x3);
5185
- font-size: var(--seed-font-size-t5);
5186
- line-height: var(--seed-line-height-t5);
5187
5206
  }
5188
5207
 
5189
- .seed-text-field__prefixText--size_large {
5208
+ .seed-text-field__value--size_large:first-child {
5209
+ padding-inline-start: var(--seed-dimension-x4);
5210
+ }
5211
+
5212
+ .seed-text-field__value--size_large:last-child {
5213
+ padding-inline-end: var(--seed-dimension-x4);
5214
+ }
5215
+
5216
+ .seed-text-field__value--size_large, .seed-text-field__prefixText--size_large {
5190
5217
  font-size: var(--seed-font-size-t5);
5191
5218
  line-height: var(--seed-line-height-t5);
5192
5219
  }
5193
5220
 
5221
+ .seed-text-field__prefixText--size_large:first-child {
5222
+ margin-inline-start: var(--seed-dimension-x4);
5223
+ }
5224
+
5194
5225
  .seed-text-field__prefixIcon--size_large {
5195
5226
  width: var(--seed-dimension-x5);
5196
5227
  height: var(--seed-dimension-x5);
5197
5228
  }
5198
5229
 
5230
+ .seed-text-field__prefixIcon--size_large:first-child {
5231
+ margin-inline-start: var(--seed-dimension-x4);
5232
+ }
5233
+
5199
5234
  .seed-text-field__suffixText--size_large {
5200
5235
  font-size: var(--seed-font-size-t5);
5201
5236
  line-height: var(--seed-line-height-t5);
5202
5237
  }
5203
5238
 
5239
+ .seed-text-field__suffixText--size_large:last-child {
5240
+ margin-inline-end: var(--seed-dimension-x4);
5241
+ }
5242
+
5204
5243
  .seed-text-field__suffixIcon--size_large {
5205
5244
  width: var(--seed-dimension-x5);
5206
5245
  height: var(--seed-dimension-x5);
5207
5246
  }
5208
5247
 
5248
+ .seed-text-field__suffixIcon--size_large:last-child {
5249
+ margin-inline-end: var(--seed-dimension-x4);
5250
+ }
5251
+
5209
5252
  .seed-text-field__footer--size_large {
5210
5253
  gap: var(--seed-dimension-x3_5);
5211
5254
  padding-top: var(--seed-dimension-x2);
@@ -5241,35 +5284,56 @@
5241
5284
  border-radius: var(--seed-radius-r2);
5242
5285
  gap: var(--seed-dimension-x1_5);
5243
5286
  min-height: 40px;
5244
- padding-inline: var(--seed-dimension-x3_5);
5245
5287
  }
5246
5288
 
5247
5289
  .seed-text-field__value--size_medium {
5248
5290
  padding-block: var(--seed-dimension-x2_5);
5249
- font-size: var(--seed-font-size-t4);
5250
- line-height: var(--seed-line-height-t4);
5251
5291
  }
5252
5292
 
5253
- .seed-text-field__prefixText--size_medium {
5293
+ .seed-text-field__value--size_medium:first-child {
5294
+ padding-inline-start: var(--seed-dimension-x3_5);
5295
+ }
5296
+
5297
+ .seed-text-field__value--size_medium:last-child {
5298
+ padding-inline-end: var(--seed-dimension-x3_5);
5299
+ }
5300
+
5301
+ .seed-text-field__value--size_medium, .seed-text-field__prefixText--size_medium {
5254
5302
  font-size: var(--seed-font-size-t4);
5255
5303
  line-height: var(--seed-line-height-t4);
5256
5304
  }
5257
5305
 
5306
+ .seed-text-field__prefixText--size_medium:first-child {
5307
+ margin-inline-start: var(--seed-dimension-x3_5);
5308
+ }
5309
+
5258
5310
  .seed-text-field__prefixIcon--size_medium {
5259
5311
  width: var(--seed-dimension-x4);
5260
5312
  height: var(--seed-dimension-x4);
5261
5313
  }
5262
5314
 
5315
+ .seed-text-field__prefixIcon--size_medium:first-child {
5316
+ margin-inline-start: var(--seed-dimension-x3_5);
5317
+ }
5318
+
5263
5319
  .seed-text-field__suffixText--size_medium {
5264
5320
  font-size: var(--seed-font-size-t4);
5265
5321
  line-height: var(--seed-line-height-t4);
5266
5322
  }
5267
5323
 
5324
+ .seed-text-field__suffixText--size_medium:last-child {
5325
+ margin-inline-end: var(--seed-dimension-x3_5);
5326
+ }
5327
+
5268
5328
  .seed-text-field__suffixIcon--size_medium {
5269
5329
  width: var(--seed-dimension-x4);
5270
5330
  height: var(--seed-dimension-x4);
5271
5331
  }
5272
5332
 
5333
+ .seed-text-field__suffixIcon--size_medium:last-child {
5334
+ margin-inline-end: var(--seed-dimension-x3_5);
5335
+ }
5336
+
5273
5337
  .seed-text-field__footer--size_medium {
5274
5338
  gap: var(--seed-dimension-x3_5);
5275
5339
  padding-top: var(--seed-dimension-x2);