@seed-design/css 0.0.35 → 0.0.39

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 (18) hide show
  1. package/all.css +136 -37
  2. package/all.min.css +1 -1
  3. package/base.css +56 -16
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +74 -19
  7. package/recipes/action-button.d.ts +1 -1
  8. package/recipes/action-button.mjs +2 -1
  9. package/recipes/progress-circle.css +1 -1
  10. package/recipes/toggle-button.css +1 -1
  11. package/vars/color/palette.d.ts +17 -1
  12. package/vars/color/palette.mjs +17 -1
  13. package/vars/component/action-button.d.ts +53 -3
  14. package/vars/component/action-button.mjs +53 -3
  15. package/vars/component/progress-circle.d.ts +1 -1
  16. package/vars/component/progress-circle.mjs +1 -1
  17. package/vars/component/toggle-button.d.ts +1 -1
  18. package/vars/component/toggle-button.mjs +1 -1
package/all.css CHANGED
@@ -89,6 +89,14 @@
89
89
  padding-bottom: var(--seed-box-padding-bottom);
90
90
  padding-left: var(--seed-box-padding-left);
91
91
  padding-right: var(--seed-box-padding-right);
92
+ --seed-box-bleed-bottom: initial;
93
+ --seed-box-bleed-top: initial;
94
+ --seed-box-bleed-left: initial;
95
+ --seed-box-bleed-right: initial;
96
+ margin-top: calc(var(--seed-box-bleed-top) * -1);
97
+ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
98
+ margin-left: calc(var(--seed-box-bleed-left) * -1);
99
+ margin-right: calc(var(--seed-box-bleed-right) * -1);
92
100
  --seed-box-min-height: initial;
93
101
  --seed-box-max-height: initial;
94
102
  --seed-box-height: initial;
@@ -324,11 +332,27 @@
324
332
  --seed-color-palette-red-1000: #4a1209;
325
333
  --seed-color-palette-static-black: #000;
326
334
  --seed-color-palette-static-white: #fff;
327
- --seed-color-palette-static-black-alpha-50: #0000000d;
328
- --seed-color-palette-static-black-alpha-200: #0003;
329
- --seed-color-palette-static-black-alpha-500: #00000080;
330
- --seed-color-palette-static-white-alpha-200: #fff3;
331
- --seed-color-palette-static-white-alpha-800: #fffc;
335
+ --seed-color-palette-static-black-alpha-100: #00000007;
336
+ --seed-color-palette-static-black-alpha-200: #0000000c;
337
+ --seed-color-palette-static-black-alpha-300: #00000010;
338
+ --seed-color-palette-static-black-alpha-400: #00000021;
339
+ --seed-color-palette-static-black-alpha-500: #0000002c;
340
+ --seed-color-palette-static-black-alpha-600: #0000004c;
341
+ --seed-color-palette-static-black-alpha-700: #00000074;
342
+ --seed-color-palette-static-black-alpha-800: #000000a2;
343
+ --seed-color-palette-static-black-alpha-900: #000000d0;
344
+ --seed-color-palette-static-black-alpha-1000: #000000e3;
345
+ --seed-color-palette-static-white-alpha-50: #ffffff0d;
346
+ --seed-color-palette-static-white-alpha-100: #ffffff17;
347
+ --seed-color-palette-static-white-alpha-200: #ffffff20;
348
+ --seed-color-palette-static-white-alpha-300: #ffffff2e;
349
+ --seed-color-palette-static-white-alpha-400: #ffffff3d;
350
+ --seed-color-palette-static-white-alpha-500: #ffffff60;
351
+ --seed-color-palette-static-white-alpha-600: #ffffff8b;
352
+ --seed-color-palette-static-white-alpha-700: #ffffffb3;
353
+ --seed-color-palette-static-white-alpha-800: #ffffffde;
354
+ --seed-color-palette-static-white-alpha-900: #ffffffea;
355
+ --seed-color-palette-static-white-alpha-1000: #fffffff4;
332
356
  --seed-color-palette-yellow-100: #fff7de;
333
357
  --seed-color-palette-yellow-200: #fdefb9;
334
358
  --seed-color-palette-yellow-300: #fbdc65;
@@ -356,7 +380,7 @@
356
380
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
357
381
  --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
358
382
  --seed-color-bg-disabled: var(--seed-color-palette-gray-200);
359
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
383
+ --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
360
384
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-600);
361
385
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-700);
362
386
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-700);
@@ -384,7 +408,7 @@
384
408
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-800);
385
409
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-900);
386
410
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-300);
387
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
411
+ --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
388
412
  --seed-color-bg-positive-solid: var(--seed-color-palette-green-700);
389
413
  --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
390
414
  --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-800);
@@ -401,7 +425,7 @@
401
425
  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
402
426
  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
403
427
  --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
404
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
428
+ --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
405
429
  --seed-color-manner-temp-l1-bg: #eff0f1;
406
430
  --seed-color-manner-temp-l1-text: #62666a;
407
431
  --seed-color-manner-temp-l2-bg: #e7f2fc;
@@ -481,11 +505,27 @@
481
505
  --seed-color-palette-red-1000: #fdf2f2;
482
506
  --seed-color-palette-static-black: #000;
483
507
  --seed-color-palette-static-white: #fff;
484
- --seed-color-palette-static-black-alpha-50: #0000000d;
485
- --seed-color-palette-static-black-alpha-200: #0003;
486
- --seed-color-palette-static-black-alpha-500: #00000080;
487
- --seed-color-palette-static-white-alpha-200: #fff3;
488
- --seed-color-palette-static-white-alpha-800: #fffc;
508
+ --seed-color-palette-static-black-alpha-100: #00000007;
509
+ --seed-color-palette-static-black-alpha-200: #0000000c;
510
+ --seed-color-palette-static-black-alpha-300: #00000010;
511
+ --seed-color-palette-static-black-alpha-400: #00000021;
512
+ --seed-color-palette-static-black-alpha-500: #0000002c;
513
+ --seed-color-palette-static-black-alpha-600: #0000004c;
514
+ --seed-color-palette-static-black-alpha-700: #00000074;
515
+ --seed-color-palette-static-black-alpha-800: #000000a2;
516
+ --seed-color-palette-static-black-alpha-900: #000000d0;
517
+ --seed-color-palette-static-black-alpha-1000: #000000e3;
518
+ --seed-color-palette-static-white-alpha-50: #ffffff0d;
519
+ --seed-color-palette-static-white-alpha-100: #ffffff17;
520
+ --seed-color-palette-static-white-alpha-200: #ffffff20;
521
+ --seed-color-palette-static-white-alpha-300: #ffffff2e;
522
+ --seed-color-palette-static-white-alpha-400: #ffffff3d;
523
+ --seed-color-palette-static-white-alpha-500: #ffffff60;
524
+ --seed-color-palette-static-white-alpha-600: #ffffff8b;
525
+ --seed-color-palette-static-white-alpha-700: #ffffffb3;
526
+ --seed-color-palette-static-white-alpha-800: #ffffffde;
527
+ --seed-color-palette-static-white-alpha-900: #ffffffea;
528
+ --seed-color-palette-static-white-alpha-1000: #fffffff4;
489
529
  --seed-color-palette-yellow-100: #302819;
490
530
  --seed-color-palette-yellow-200: #413218;
491
531
  --seed-color-palette-yellow-300: #543e15;
@@ -513,7 +553,7 @@
513
553
  --seed-color-fg-positive-contrast: var(--seed-color-palette-green-900);
514
554
  --seed-color-fg-warning-contrast: var(--seed-color-palette-yellow-900);
515
555
  --seed-color-bg-disabled: var(--seed-color-palette-gray-300);
516
- --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-500);
556
+ --seed-color-bg-overlay: var(--seed-color-palette-static-black-alpha-700);
517
557
  --seed-color-bg-brand-solid: var(--seed-color-palette-carrot-700);
518
558
  --seed-color-bg-brand-solid-pressed: var(--seed-color-palette-carrot-800);
519
559
  --seed-color-bg-critical-solid: var(--seed-color-palette-red-600);
@@ -541,7 +581,7 @@
541
581
  --seed-color-bg-neutral-solid-muted: var(--seed-color-palette-gray-400);
542
582
  --seed-color-bg-neutral-solid-muted-pressed: var(--seed-color-palette-gray-500);
543
583
  --seed-color-bg-neutral-weak-pressed: var(--seed-color-palette-gray-400);
544
- --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-200);
584
+ --seed-color-bg-overlay-muted: var(--seed-color-palette-static-black-alpha-500);
545
585
  --seed-color-bg-positive-solid: var(--seed-color-palette-green-500);
546
586
  --seed-color-bg-positive-weak: var(--seed-color-palette-green-100);
547
587
  --seed-color-bg-positive-solid-pressed: var(--seed-color-palette-green-500);
@@ -558,7 +598,7 @@
558
598
  --seed-color-stroke-positive: var(--seed-color-palette-green-300);
559
599
  --seed-color-stroke-field-focused: var(--seed-color-palette-gray-800);
560
600
  --seed-color-stroke-neutral-muted: var(--seed-color-palette-gray-200);
561
- --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-50);
601
+ --seed-color-stroke-on-image: var(--seed-color-palette-static-black-alpha-200);
562
602
  --seed-color-manner-temp-l1-bg: #222226;
563
603
  --seed-color-manner-temp-l1-text: #b1b5b9;
564
604
  --seed-color-manner-temp-l2-bg: #16212b;
@@ -877,6 +917,22 @@
877
917
  flex-grow: var(--seed-box-flex-grow);
878
918
  --seed-box-min-width: initial;
879
919
  min-width: var(--seed-box-min-width);
920
+ --seed-box-padding-bottom: initial;
921
+ --seed-box-padding-top: initial;
922
+ --seed-box-padding-left: initial;
923
+ --seed-box-padding-right: initial;
924
+ padding-top: var(--seed-box-padding-top);
925
+ padding-bottom: var(--seed-box-padding-bottom);
926
+ padding-left: var(--seed-box-padding-left);
927
+ padding-right: var(--seed-box-padding-right);
928
+ --seed-box-bleed-bottom: initial;
929
+ --seed-box-bleed-top: initial;
930
+ --seed-box-bleed-left: initial;
931
+ --seed-box-bleed-right: initial;
932
+ margin-top: calc(var(--seed-box-bleed-top) * -1);
933
+ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
934
+ margin-left: calc(var(--seed-box-bleed-left) * -1);
935
+ margin-right: calc(var(--seed-box-bleed-right) * -1);
880
936
  border: none;
881
937
  justify-content: center;
882
938
  align-items: center;
@@ -905,7 +961,7 @@
905
961
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
906
962
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
907
963
  --seed-icon-color: var(--seed-color-palette-static-white);
908
- --track-color: var(--seed-color-palette-static-white-alpha-200);
964
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
909
965
  --range-color: var(--seed-color-palette-static-white);
910
966
  }
911
967
 
@@ -931,7 +987,7 @@
931
987
  --seed-prefix-icon-color: var(--seed-color-fg-neutral-inverted);
932
988
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-inverted);
933
989
  --seed-icon-color: var(--seed-color-fg-neutral-inverted);
934
- --track-color: var(--seed-color-palette-static-white-alpha-200);
990
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
935
991
  --range-color: var(--seed-color-palette-static-white);
936
992
  }
937
993
 
@@ -983,7 +1039,7 @@
983
1039
  --seed-prefix-icon-color: var(--seed-color-palette-static-white);
984
1040
  --seed-suffix-icon-color: var(--seed-color-palette-static-white);
985
1041
  --seed-icon-color: var(--seed-color-palette-static-white);
986
- --track-color: var(--seed-color-palette-static-white-alpha-200);
1042
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
987
1043
  --range-color: var(--seed-color-palette-static-white);
988
1044
  }
989
1045
 
@@ -1063,6 +1119,33 @@
1063
1119
  background: var(--seed-color-bg-layer-default);
1064
1120
  }
1065
1121
 
1122
+ .seed-action-button--variant_ghost {
1123
+ --seed-box-color: var(--seed-color-fg-neutral);
1124
+ color: var(--seed-box-color);
1125
+ --seed-prefix-icon-color: var(--seed-box-color);
1126
+ --seed-suffix-icon-color: var(--seed-box-color);
1127
+ --seed-icon-color: var(--seed-box-color);
1128
+ --track-color: var(--seed-color-palette-gray-500);
1129
+ --range-color: var(--seed-color-fg-neutral);
1130
+ background: #fff0;
1131
+ }
1132
+
1133
+ .seed-action-button--variant_ghost:is(:active, [data-active]) {
1134
+ background: var(--seed-color-bg-layer-default-pressed);
1135
+ }
1136
+
1137
+ .seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
1138
+ color: var(--seed-color-fg-disabled);
1139
+ --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1140
+ --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1141
+ --seed-icon-color: var(--seed-color-fg-disabled);
1142
+ background: #fff0;
1143
+ }
1144
+
1145
+ .seed-action-button--variant_ghost[data-loading] {
1146
+ background: var(--seed-color-bg-layer-default-pressed);
1147
+ }
1148
+
1066
1149
  .seed-action-button--size_xsmall {
1067
1150
  height: var(--seed-dimension-x8);
1068
1151
  border-radius: var(--seed-radius-full);
@@ -1105,58 +1188,74 @@
1105
1188
 
1106
1189
  .seed-action-button--size_xsmall-layout_withText {
1107
1190
  gap: var(--seed-dimension-x1);
1108
- padding-inline: var(--seed-dimension-x3_5);
1109
- padding-block: var(--seed-dimension-x1_5);
1191
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1192
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1193
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
1194
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5);
1110
1195
  font-size: var(--seed-font-size-t4);
1111
1196
  line-height: var(--seed-line-height-t4);
1112
1197
  }
1113
1198
 
1114
1199
  .seed-action-button--size_xsmall-layout_iconOnly {
1115
1200
  min-width: var(--seed-dimension-x8);
1116
- padding-inline: var(--seed-dimension-x1_5);
1117
- padding-block: var(--seed-dimension-x1_5);
1201
+ --seed-box-padding-left: var(--seed-dimension-x1_5);
1202
+ --seed-box-padding-right: var(--seed-dimension-x1_5);
1203
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
1204
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5);
1118
1205
  }
1119
1206
 
1120
1207
  .seed-action-button--size_small-layout_withText {
1121
1208
  gap: var(--seed-dimension-x1);
1122
- padding-inline: var(--seed-dimension-x3_5);
1123
- padding-block: var(--seed-dimension-x2);
1209
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1210
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1211
+ --seed-box-padding-top: var(--seed-dimension-x2);
1212
+ --seed-box-padding-bottom: var(--seed-dimension-x2);
1124
1213
  font-size: var(--seed-font-size-t4);
1125
1214
  line-height: var(--seed-line-height-t4);
1126
1215
  }
1127
1216
 
1128
1217
  .seed-action-button--size_small-layout_iconOnly {
1129
1218
  min-width: var(--seed-dimension-x9);
1130
- padding-inline: var(--seed-dimension-x2);
1131
- padding-block: var(--seed-dimension-x2);
1219
+ --seed-box-padding-left: var(--seed-dimension-x2);
1220
+ --seed-box-padding-right: var(--seed-dimension-x2);
1221
+ --seed-box-padding-top: var(--seed-dimension-x2);
1222
+ --seed-box-padding-bottom: var(--seed-dimension-x2);
1132
1223
  }
1133
1224
 
1134
1225
  .seed-action-button--size_medium-layout_withText {
1135
1226
  gap: var(--seed-dimension-x1);
1136
- padding-inline: var(--seed-dimension-x4);
1137
- padding-block: var(--seed-dimension-x2_5);
1227
+ --seed-box-padding-left: var(--seed-dimension-x4);
1228
+ --seed-box-padding-right: var(--seed-dimension-x4);
1229
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
1230
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5);
1138
1231
  font-size: var(--seed-font-size-t4);
1139
1232
  line-height: var(--seed-line-height-t4);
1140
1233
  }
1141
1234
 
1142
1235
  .seed-action-button--size_medium-layout_iconOnly {
1143
1236
  min-width: var(--seed-dimension-x10);
1144
- padding-inline: var(--seed-dimension-x2_5);
1145
- padding-block: var(--seed-dimension-x2_5);
1237
+ --seed-box-padding-left: var(--seed-dimension-x2_5);
1238
+ --seed-box-padding-right: var(--seed-dimension-x2_5);
1239
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
1240
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5);
1146
1241
  }
1147
1242
 
1148
1243
  .seed-action-button--size_large-layout_withText {
1149
1244
  gap: var(--seed-dimension-x2);
1150
- padding-inline: var(--seed-dimension-x5);
1151
- padding-block: var(--seed-dimension-x3_5);
1245
+ --seed-box-padding-left: var(--seed-dimension-x5);
1246
+ --seed-box-padding-right: var(--seed-dimension-x5);
1247
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
1248
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1152
1249
  font-size: var(--seed-font-size-t6);
1153
1250
  line-height: var(--seed-line-height-t6);
1154
1251
  }
1155
1252
 
1156
1253
  .seed-action-button--size_large-layout_iconOnly {
1157
1254
  min-width: var(--seed-dimension-x13);
1158
- padding-inline: var(--seed-dimension-x3_5);
1159
- padding-block: var(--seed-dimension-x3_5);
1255
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1256
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1257
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
1258
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1160
1259
  }
1161
1260
 
1162
1261
  .seed-toggle-button {
@@ -1193,7 +1292,7 @@
1193
1292
  .seed-toggle-button--variant_brandSolid {
1194
1293
  background: var(--seed-color-bg-brand-solid);
1195
1294
  color: var(--seed-color-palette-static-white);
1196
- --track-color: var(--seed-color-palette-static-white-alpha-200);
1295
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
1197
1296
  --range-color: var(--seed-color-palette-static-white);
1198
1297
  }
1199
1298
 
@@ -3647,7 +3746,7 @@
3647
3746
  }
3648
3747
 
3649
3748
  .seed-progress-circle__root--tone_staticWhite {
3650
- --track-color: var(--seed-color-palette-static-white-alpha-200);
3749
+ --track-color: var(--seed-color-palette-static-white-alpha-300);
3651
3750
  --range-color: var(--seed-color-palette-static-white);
3652
3751
  }
3653
3752