@seed-design/css 0.0.34 → 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 +84 -16
  2. package/all.min.css +1 -1
  3. package/base.css +9 -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;
@@ -151,6 +159,7 @@
151
159
  }
152
160
 
153
161
  .seed-box:is(:active, [data-active]) {
162
+ --seed-box-background--active: var(--seed-box-background);
154
163
  background-color: var(--seed-box-background--active);
155
164
  }
156
165
 
@@ -876,6 +885,22 @@
876
885
  flex-grow: var(--seed-box-flex-grow);
877
886
  --seed-box-min-width: initial;
878
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);
879
904
  border: none;
880
905
  justify-content: center;
881
906
  align-items: center;
@@ -1062,6 +1087,33 @@
1062
1087
  background: var(--seed-color-bg-layer-default);
1063
1088
  }
1064
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
+
1065
1117
  .seed-action-button--size_xsmall {
1066
1118
  height: var(--seed-dimension-x8);
1067
1119
  border-radius: var(--seed-radius-full);
@@ -1104,58 +1156,74 @@
1104
1156
 
1105
1157
  .seed-action-button--size_xsmall-layout_withText {
1106
1158
  gap: var(--seed-dimension-x1);
1107
- padding-inline: var(--seed-dimension-x3_5);
1108
- 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);
1109
1163
  font-size: var(--seed-font-size-t4);
1110
1164
  line-height: var(--seed-line-height-t4);
1111
1165
  }
1112
1166
 
1113
1167
  .seed-action-button--size_xsmall-layout_iconOnly {
1114
1168
  min-width: var(--seed-dimension-x8);
1115
- padding-inline: var(--seed-dimension-x1_5);
1116
- 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);
1117
1173
  }
1118
1174
 
1119
1175
  .seed-action-button--size_small-layout_withText {
1120
1176
  gap: var(--seed-dimension-x1);
1121
- padding-inline: var(--seed-dimension-x3_5);
1122
- 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);
1123
1181
  font-size: var(--seed-font-size-t4);
1124
1182
  line-height: var(--seed-line-height-t4);
1125
1183
  }
1126
1184
 
1127
1185
  .seed-action-button--size_small-layout_iconOnly {
1128
1186
  min-width: var(--seed-dimension-x9);
1129
- padding-inline: var(--seed-dimension-x2);
1130
- 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);
1131
1191
  }
1132
1192
 
1133
1193
  .seed-action-button--size_medium-layout_withText {
1134
1194
  gap: var(--seed-dimension-x1);
1135
- padding-inline: var(--seed-dimension-x4);
1136
- 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);
1137
1199
  font-size: var(--seed-font-size-t4);
1138
1200
  line-height: var(--seed-line-height-t4);
1139
1201
  }
1140
1202
 
1141
1203
  .seed-action-button--size_medium-layout_iconOnly {
1142
1204
  min-width: var(--seed-dimension-x10);
1143
- padding-inline: var(--seed-dimension-x2_5);
1144
- 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);
1145
1209
  }
1146
1210
 
1147
1211
  .seed-action-button--size_large-layout_withText {
1148
1212
  gap: var(--seed-dimension-x2);
1149
- padding-inline: var(--seed-dimension-x5);
1150
- 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);
1151
1217
  font-size: var(--seed-font-size-t6);
1152
1218
  line-height: var(--seed-line-height-t6);
1153
1219
  }
1154
1220
 
1155
1221
  .seed-action-button--size_large-layout_iconOnly {
1156
1222
  min-width: var(--seed-dimension-x13);
1157
- padding-inline: var(--seed-dimension-x3_5);
1158
- 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);
1159
1227
  }
1160
1228
 
1161
1229
  .seed-toggle-button {