@seed-design/css 0.0.35 → 0.0.38

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 (10) hide show
  1. package/all.css +83 -16
  2. package/all.min.css +1 -1
  3. package/base.css +8 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +71 -16
  7. package/recipes/action-button.d.ts +1 -1
  8. package/recipes/action-button.mjs +2 -1
  9. package/vars/component/action-button.d.ts +50 -0
  10. package/vars/component/action-button.mjs +50 -0
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;
@@ -877,6 +885,22 @@
877
885
  flex-grow: var(--seed-box-flex-grow);
878
886
  --seed-box-min-width: initial;
879
887
  min-width: var(--seed-box-min-width);
888
+ --seed-box-padding-bottom: initial;
889
+ --seed-box-padding-top: initial;
890
+ --seed-box-padding-left: initial;
891
+ --seed-box-padding-right: initial;
892
+ padding-top: var(--seed-box-padding-top);
893
+ padding-bottom: var(--seed-box-padding-bottom);
894
+ padding-left: var(--seed-box-padding-left);
895
+ padding-right: var(--seed-box-padding-right);
896
+ --seed-box-bleed-bottom: initial;
897
+ --seed-box-bleed-top: initial;
898
+ --seed-box-bleed-left: initial;
899
+ --seed-box-bleed-right: initial;
900
+ margin-top: calc(var(--seed-box-bleed-top) * -1);
901
+ margin-bottom: calc(var(--seed-box-bleed-bottom) * -1);
902
+ margin-left: calc(var(--seed-box-bleed-left) * -1);
903
+ margin-right: calc(var(--seed-box-bleed-right) * -1);
880
904
  border: none;
881
905
  justify-content: center;
882
906
  align-items: center;
@@ -1063,6 +1087,33 @@
1063
1087
  background: var(--seed-color-bg-layer-default);
1064
1088
  }
1065
1089
 
1090
+ .seed-action-button--variant_ghost {
1091
+ --seed-box-color: var(--seed-color-fg-neutral);
1092
+ color: var(--seed-box-color);
1093
+ --seed-prefix-icon-color: var(--seed-box-color);
1094
+ --seed-suffix-icon-color: var(--seed-box-color);
1095
+ --seed-icon-color: var(--seed-box-color);
1096
+ --track-color: var(--seed-color-palette-gray-500);
1097
+ --range-color: var(--seed-color-fg-neutral);
1098
+ background: #fff0;
1099
+ }
1100
+
1101
+ .seed-action-button--variant_ghost:is(:active, [data-active]) {
1102
+ background: var(--seed-color-bg-layer-default-pressed);
1103
+ }
1104
+
1105
+ .seed-action-button--variant_ghost:is(:disabled, [disabled], [data-disabled]) {
1106
+ color: var(--seed-color-fg-disabled);
1107
+ --seed-prefix-icon-color: var(--seed-color-fg-disabled);
1108
+ --seed-suffix-icon-color: var(--seed-color-fg-disabled);
1109
+ --seed-icon-color: var(--seed-color-fg-disabled);
1110
+ background: #fff0;
1111
+ }
1112
+
1113
+ .seed-action-button--variant_ghost[data-loading] {
1114
+ background: var(--seed-color-bg-layer-default-pressed);
1115
+ }
1116
+
1066
1117
  .seed-action-button--size_xsmall {
1067
1118
  height: var(--seed-dimension-x8);
1068
1119
  border-radius: var(--seed-radius-full);
@@ -1105,58 +1156,74 @@
1105
1156
 
1106
1157
  .seed-action-button--size_xsmall-layout_withText {
1107
1158
  gap: var(--seed-dimension-x1);
1108
- padding-inline: var(--seed-dimension-x3_5);
1109
- padding-block: var(--seed-dimension-x1_5);
1159
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1160
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1161
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
1162
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5);
1110
1163
  font-size: var(--seed-font-size-t4);
1111
1164
  line-height: var(--seed-line-height-t4);
1112
1165
  }
1113
1166
 
1114
1167
  .seed-action-button--size_xsmall-layout_iconOnly {
1115
1168
  min-width: var(--seed-dimension-x8);
1116
- padding-inline: var(--seed-dimension-x1_5);
1117
- padding-block: var(--seed-dimension-x1_5);
1169
+ --seed-box-padding-left: var(--seed-dimension-x1_5);
1170
+ --seed-box-padding-right: var(--seed-dimension-x1_5);
1171
+ --seed-box-padding-top: var(--seed-dimension-x1_5);
1172
+ --seed-box-padding-bottom: var(--seed-dimension-x1_5);
1118
1173
  }
1119
1174
 
1120
1175
  .seed-action-button--size_small-layout_withText {
1121
1176
  gap: var(--seed-dimension-x1);
1122
- padding-inline: var(--seed-dimension-x3_5);
1123
- padding-block: var(--seed-dimension-x2);
1177
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1178
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1179
+ --seed-box-padding-top: var(--seed-dimension-x2);
1180
+ --seed-box-padding-bottom: var(--seed-dimension-x2);
1124
1181
  font-size: var(--seed-font-size-t4);
1125
1182
  line-height: var(--seed-line-height-t4);
1126
1183
  }
1127
1184
 
1128
1185
  .seed-action-button--size_small-layout_iconOnly {
1129
1186
  min-width: var(--seed-dimension-x9);
1130
- padding-inline: var(--seed-dimension-x2);
1131
- padding-block: var(--seed-dimension-x2);
1187
+ --seed-box-padding-left: var(--seed-dimension-x2);
1188
+ --seed-box-padding-right: var(--seed-dimension-x2);
1189
+ --seed-box-padding-top: var(--seed-dimension-x2);
1190
+ --seed-box-padding-bottom: var(--seed-dimension-x2);
1132
1191
  }
1133
1192
 
1134
1193
  .seed-action-button--size_medium-layout_withText {
1135
1194
  gap: var(--seed-dimension-x1);
1136
- padding-inline: var(--seed-dimension-x4);
1137
- padding-block: var(--seed-dimension-x2_5);
1195
+ --seed-box-padding-left: var(--seed-dimension-x4);
1196
+ --seed-box-padding-right: var(--seed-dimension-x4);
1197
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
1198
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5);
1138
1199
  font-size: var(--seed-font-size-t4);
1139
1200
  line-height: var(--seed-line-height-t4);
1140
1201
  }
1141
1202
 
1142
1203
  .seed-action-button--size_medium-layout_iconOnly {
1143
1204
  min-width: var(--seed-dimension-x10);
1144
- padding-inline: var(--seed-dimension-x2_5);
1145
- padding-block: var(--seed-dimension-x2_5);
1205
+ --seed-box-padding-left: var(--seed-dimension-x2_5);
1206
+ --seed-box-padding-right: var(--seed-dimension-x2_5);
1207
+ --seed-box-padding-top: var(--seed-dimension-x2_5);
1208
+ --seed-box-padding-bottom: var(--seed-dimension-x2_5);
1146
1209
  }
1147
1210
 
1148
1211
  .seed-action-button--size_large-layout_withText {
1149
1212
  gap: var(--seed-dimension-x2);
1150
- padding-inline: var(--seed-dimension-x5);
1151
- padding-block: var(--seed-dimension-x3_5);
1213
+ --seed-box-padding-left: var(--seed-dimension-x5);
1214
+ --seed-box-padding-right: var(--seed-dimension-x5);
1215
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
1216
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1152
1217
  font-size: var(--seed-font-size-t6);
1153
1218
  line-height: var(--seed-line-height-t6);
1154
1219
  }
1155
1220
 
1156
1221
  .seed-action-button--size_large-layout_iconOnly {
1157
1222
  min-width: var(--seed-dimension-x13);
1158
- padding-inline: var(--seed-dimension-x3_5);
1159
- padding-block: var(--seed-dimension-x3_5);
1223
+ --seed-box-padding-left: var(--seed-dimension-x3_5);
1224
+ --seed-box-padding-right: var(--seed-dimension-x3_5);
1225
+ --seed-box-padding-top: var(--seed-dimension-x3_5);
1226
+ --seed-box-padding-bottom: var(--seed-dimension-x3_5);
1160
1227
  }
1161
1228
 
1162
1229
  .seed-toggle-button {