@seed-design/css 0.1.5 → 0.1.7

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 (11) hide show
  1. package/all.css +79 -13
  2. package/all.min.css +1 -1
  3. package/base.css +2 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +1 -1
  7. package/recipes/text-field.css +61 -3
  8. package/vars/component/action-button.d.ts +1 -1
  9. package/vars/component/action-button.mjs +1 -1
  10. package/vars/gradient.d.ts +2 -1
  11. package/vars/gradient.mjs +2 -1
package/all.css CHANGED
@@ -452,6 +452,7 @@
452
452
  --seed-gradient-glow-magic-pressed: #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%;
453
453
  --seed-gradient-shimmer-neutral: #fff0 0%, #fff6 46%, #fff6 54%, #fff0 100%;
454
454
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
455
+ --seed-gradient-highlight-magic-pressed: #e14f00 20%, #ae58bf 100%;
455
456
  }
456
457
 
457
458
  :root[data-seed-color-mode="system"][data-seed-user-color-scheme="dark"], :root[data-seed-color-mode="dark-only"], :root [data-seed-color-mode="dark-only"] {
@@ -626,6 +627,7 @@
626
627
  --seed-gradient-glow-magic-pressed: #3e333e 0%, #51453e 80%, #434242 100%;
627
628
  --seed-gradient-shimmer-neutral: #fff0 0%, #ffffff1a 46%, #ffffff1a 54%, #fff0 100%;
628
629
  --seed-gradient-highlight-magic: #f60 20%, #d25aca 100%;
630
+ --seed-gradient-highlight-magic-pressed: #ff9e65 20%, #e89bee 100%;
629
631
  }
630
632
 
631
633
  .seed-avatar__root {
@@ -1237,7 +1239,7 @@
1237
1239
  }
1238
1240
 
1239
1241
  .seed-action-button--size_medium-layout_withText {
1240
- gap: var(--seed-dimension-x1);
1242
+ gap: var(--seed-dimension-x1_5);
1241
1243
  --seed-box-padding-left: var(--seed-dimension-x4);
1242
1244
  --seed-box-padding-right: var(--seed-dimension-x4);
1243
1245
  --seed-box-padding-top: var(--seed-dimension-x2_5);
@@ -4968,6 +4970,7 @@
4968
4970
  border-color: var(--seed-color-stroke-field);
4969
4971
  align-items: center;
4970
4972
  display: flex;
4973
+ overflow: hidden;
4971
4974
  }
4972
4975
 
4973
4976
  .seed-text-field__field:not([data-readonly]):is(:focus, [data-focus]) {
@@ -5110,35 +5113,56 @@
5110
5113
  border-radius: var(--seed-radius-r2_5);
5111
5114
  gap: var(--seed-dimension-x2);
5112
5115
  min-height: 56px;
5113
- padding-inline: var(--seed-dimension-x4);
5114
5116
  }
5115
5117
 
5116
5118
  .seed-text-field__value--size_xlarge {
5117
5119
  padding-block: var(--seed-dimension-x3);
5118
- font-size: var(--seed-font-size-t6);
5119
- line-height: var(--seed-line-height-t6);
5120
5120
  }
5121
5121
 
5122
- .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 {
5123
5131
  font-size: var(--seed-font-size-t6);
5124
5132
  line-height: var(--seed-line-height-t6);
5125
5133
  }
5126
5134
 
5135
+ .seed-text-field__prefixText--size_xlarge:first-child {
5136
+ margin-inline-start: var(--seed-dimension-x4);
5137
+ }
5138
+
5127
5139
  .seed-text-field__prefixIcon--size_xlarge {
5128
5140
  width: var(--seed-dimension-x5);
5129
5141
  height: var(--seed-dimension-x5);
5130
5142
  }
5131
5143
 
5144
+ .seed-text-field__prefixIcon--size_xlarge:first-child {
5145
+ margin-inline-start: var(--seed-dimension-x4);
5146
+ }
5147
+
5132
5148
  .seed-text-field__suffixText--size_xlarge {
5133
5149
  font-size: var(--seed-font-size-t6);
5134
5150
  line-height: var(--seed-line-height-t6);
5135
5151
  }
5136
5152
 
5153
+ .seed-text-field__suffixText--size_xlarge:last-child {
5154
+ margin-inline-end: var(--seed-dimension-x4);
5155
+ }
5156
+
5137
5157
  .seed-text-field__suffixIcon--size_xlarge {
5138
5158
  width: var(--seed-dimension-x5);
5139
5159
  height: var(--seed-dimension-x5);
5140
5160
  }
5141
5161
 
5162
+ .seed-text-field__suffixIcon--size_xlarge:last-child {
5163
+ margin-inline-end: var(--seed-dimension-x4);
5164
+ }
5165
+
5142
5166
  .seed-text-field__footer--size_xlarge {
5143
5167
  gap: var(--seed-dimension-x3_5);
5144
5168
  padding-top: var(--seed-dimension-x2);
@@ -5175,35 +5199,56 @@
5175
5199
  border-radius: var(--seed-radius-r2_5);
5176
5200
  gap: var(--seed-dimension-x2);
5177
5201
  min-height: 52px;
5178
- padding-inline: var(--seed-dimension-x4);
5179
5202
  }
5180
5203
 
5181
5204
  .seed-text-field__value--size_large {
5182
5205
  padding-block: var(--seed-dimension-x3);
5183
- font-size: var(--seed-font-size-t5);
5184
- line-height: var(--seed-line-height-t5);
5185
5206
  }
5186
5207
 
5187
- .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 {
5188
5217
  font-size: var(--seed-font-size-t5);
5189
5218
  line-height: var(--seed-line-height-t5);
5190
5219
  }
5191
5220
 
5221
+ .seed-text-field__prefixText--size_large:first-child {
5222
+ margin-inline-start: var(--seed-dimension-x4);
5223
+ }
5224
+
5192
5225
  .seed-text-field__prefixIcon--size_large {
5193
5226
  width: var(--seed-dimension-x5);
5194
5227
  height: var(--seed-dimension-x5);
5195
5228
  }
5196
5229
 
5230
+ .seed-text-field__prefixIcon--size_large:first-child {
5231
+ margin-inline-start: var(--seed-dimension-x4);
5232
+ }
5233
+
5197
5234
  .seed-text-field__suffixText--size_large {
5198
5235
  font-size: var(--seed-font-size-t5);
5199
5236
  line-height: var(--seed-line-height-t5);
5200
5237
  }
5201
5238
 
5239
+ .seed-text-field__suffixText--size_large:last-child {
5240
+ margin-inline-end: var(--seed-dimension-x4);
5241
+ }
5242
+
5202
5243
  .seed-text-field__suffixIcon--size_large {
5203
5244
  width: var(--seed-dimension-x5);
5204
5245
  height: var(--seed-dimension-x5);
5205
5246
  }
5206
5247
 
5248
+ .seed-text-field__suffixIcon--size_large:last-child {
5249
+ margin-inline-end: var(--seed-dimension-x4);
5250
+ }
5251
+
5207
5252
  .seed-text-field__footer--size_large {
5208
5253
  gap: var(--seed-dimension-x3_5);
5209
5254
  padding-top: var(--seed-dimension-x2);
@@ -5239,35 +5284,56 @@
5239
5284
  border-radius: var(--seed-radius-r2);
5240
5285
  gap: var(--seed-dimension-x1_5);
5241
5286
  min-height: 40px;
5242
- padding-inline: var(--seed-dimension-x3_5);
5243
5287
  }
5244
5288
 
5245
5289
  .seed-text-field__value--size_medium {
5246
5290
  padding-block: var(--seed-dimension-x2_5);
5247
- font-size: var(--seed-font-size-t4);
5248
- line-height: var(--seed-line-height-t4);
5249
5291
  }
5250
5292
 
5251
- .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 {
5252
5302
  font-size: var(--seed-font-size-t4);
5253
5303
  line-height: var(--seed-line-height-t4);
5254
5304
  }
5255
5305
 
5306
+ .seed-text-field__prefixText--size_medium:first-child {
5307
+ margin-inline-start: var(--seed-dimension-x3_5);
5308
+ }
5309
+
5256
5310
  .seed-text-field__prefixIcon--size_medium {
5257
5311
  width: var(--seed-dimension-x4);
5258
5312
  height: var(--seed-dimension-x4);
5259
5313
  }
5260
5314
 
5315
+ .seed-text-field__prefixIcon--size_medium:first-child {
5316
+ margin-inline-start: var(--seed-dimension-x3_5);
5317
+ }
5318
+
5261
5319
  .seed-text-field__suffixText--size_medium {
5262
5320
  font-size: var(--seed-font-size-t4);
5263
5321
  line-height: var(--seed-line-height-t4);
5264
5322
  }
5265
5323
 
5324
+ .seed-text-field__suffixText--size_medium:last-child {
5325
+ margin-inline-end: var(--seed-dimension-x3_5);
5326
+ }
5327
+
5266
5328
  .seed-text-field__suffixIcon--size_medium {
5267
5329
  width: var(--seed-dimension-x4);
5268
5330
  height: var(--seed-dimension-x4);
5269
5331
  }
5270
5332
 
5333
+ .seed-text-field__suffixIcon--size_medium:last-child {
5334
+ margin-inline-end: var(--seed-dimension-x3_5);
5335
+ }
5336
+
5271
5337
  .seed-text-field__footer--size_medium {
5272
5338
  gap: var(--seed-dimension-x3_5);
5273
5339
  padding-top: var(--seed-dimension-x2);