@webmate-studio/builder 0.2.156 → 0.2.157

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/design-tokens-v2-css.js +19 -1
  3. package/src/design-tokens-v2.js +24 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@webmate-studio/builder",
3
- "version": "0.2.156",
3
+ "version": "0.2.157",
4
4
  "type": "module",
5
5
  "description": "Webmate Studio Component Builder",
6
6
  "keywords": [
package/src/design-tokens-v2-css.js CHANGED
@@ -616,6 +616,8 @@ function addButtonVariantVars(lines, prefix, variant, t) {
616
616
  const shadowActiveCSS = resolveShadowToCSS(variant.shadowActive, t);
617
617
  if (shadowActiveCSS !== 'none') lines.push(` --${prefix}-shadow-active: ${shadowActiveCSS};`);
618
618
  if (variant.focusRingColor) lines.push(` --${prefix}-focus-ring: ${resolveColorRef(variant.focusRingColor, t)};`);
619
+ if (variant.paddingX != null) lines.push(` --${prefix}-padding-x: ${variant.paddingX};`);
620
+ if (variant.paddingY != null) lines.push(` --${prefix}-padding-y: ${variant.paddingY};`);
619
621
  if (variant.fontFamily) {
620
622
  const fontDef = t.typography?.fonts?.find(f => f.name === variant.fontFamily);
621
623
  const fallback = fontDef?.fallback || 'sans-serif';
@@ -684,7 +686,9 @@ function generateButtonClasses(t) {
684
686
  const s = t.buttons.sizes?.[size];
685
687
  if (!s) continue;
686
688
  css += `\n.btn-${size} {
687
- padding: var(--btn-${size}-padding-y) var(--btn-${size}-padding-x);
689
+ --btn-padding-x: var(--btn-${size}-padding-x);
690
+ --btn-padding-y: var(--btn-${size}-padding-y);
691
+ padding: var(--btn-padding-y) var(--btn-padding-x);
688
692
  font-size: calc(var(--btn-${size}-font-size) * var(--btn-font-scale, 1));
689
693
  font-weight: var(--btn-${size}-font-weight);
690
694
  line-height: var(--btn-${size}-line-height);
@@ -739,6 +743,13 @@ function generateVariantNormalCSS(variant, v, t) {
739
743
  if (v.normal.textDecoration) {
740
744
  css += `\n text-decoration: ${v.normal.textDecoration};`;
741
745
  }
746
+ // Padding overrides (variant overrides size)
747
+ if (v.normal.paddingX != null) {
748
+ css += `\n --btn-padding-x: var(--${p}-padding-x);`;
749
+ }
750
+ if (v.normal.paddingY != null) {
751
+ css += `\n --btn-padding-y: var(--${p}-padding-y);`;
752
+ }
742
753
  // Typography overrides
743
754
  if (v.normal.fontFamily) {
744
755
  css += `\n font-family: var(--${p}-font-family);`;
@@ -845,6 +856,13 @@ function generateVariantOnSurfaceCSS(variant, v, t) {
845
856
  if (v.onSurface.textDecoration) {
846
857
  css += `\n text-decoration: ${v.onSurface.textDecoration};`;
847
858
  }
859
+ // Padding overrides (variant overrides size)
860
+ if (v.onSurface.paddingX != null) {
861
+ css += `\n --btn-padding-x: var(--${osp}-padding-x);`;
862
+ }
863
+ if (v.onSurface.paddingY != null) {
864
+ css += `\n --btn-padding-y: var(--${osp}-padding-y);`;
865
+ }
848
866
  // Typography overrides
849
867
  if (v.onSurface.fontFamily) {
850
868
  css += `\n font-family: var(--${osp}-font-family);`;
package/src/design-tokens-v2.js CHANGED
@@ -1039,6 +1039,8 @@ export const defaultDesignTokensV2 = {
1039
1039
  hoverY: 0,
1040
1040
  activeScale: 0.97,
1041
1041
  activeY: 0,
1042
+ paddingX: null,
1043
+ paddingY: null,
1042
1044
  fontFamily: null,
1043
1045
  fontSizeScale: 1,
1044
1046
  fontWeight: null,
@@ -1064,6 +1066,8 @@ export const defaultDesignTokensV2 = {
1064
1066
  hoverY: 0,
1065
1067
  activeScale: 0.97,
1066
1068
  activeY: 0,
1069
+ paddingX: null,
1070
+ paddingY: null,
1067
1071
  fontFamily: null,
1068
1072
  fontSizeScale: 1,
1069
1073
  fontWeight: null,
@@ -1090,6 +1094,8 @@ export const defaultDesignTokensV2 = {
1090
1094
  hoverY: 0,
1091
1095
  activeScale: 0.97,
1092
1096
  activeY: 0,
1097
+ paddingX: null,
1098
+ paddingY: null,
1093
1099
  fontFamily: null,
1094
1100
  fontSizeScale: 1,
1095
1101
  fontWeight: null,
@@ -1115,6 +1121,8 @@ export const defaultDesignTokensV2 = {
1115
1121
  hoverY: 0,
1116
1122
  activeScale: 0.97,
1117
1123
  activeY: 0,
1124
+ paddingX: null,
1125
+ paddingY: null,
1118
1126
  fontFamily: null,
1119
1127
  fontSizeScale: 1,
1120
1128
  fontWeight: null,
@@ -1141,6 +1149,8 @@ export const defaultDesignTokensV2 = {
1141
1149
  hoverY: 0,
1142
1150
  activeScale: 0.97,
1143
1151
  activeY: 0,
1152
+ paddingX: null,
1153
+ paddingY: null,
1144
1154
  fontFamily: null,
1145
1155
  fontSizeScale: 1,
1146
1156
  fontWeight: null,
@@ -1166,6 +1176,8 @@ export const defaultDesignTokensV2 = {
1166
1176
  hoverY: 0,
1167
1177
  activeScale: 0.97,
1168
1178
  activeY: 0,
1179
+ paddingX: null,
1180
+ paddingY: null,
1169
1181
  fontFamily: null,
1170
1182
  fontSizeScale: 1,
1171
1183
  fontWeight: null,
@@ -1192,6 +1204,8 @@ export const defaultDesignTokensV2 = {
1192
1204
  hoverY: 0,
1193
1205
  activeScale: 0.97,
1194
1206
  activeY: 0,
1207
+ paddingX: null,
1208
+ paddingY: null,
1195
1209
  fontFamily: null,
1196
1210
  fontSizeScale: 1,
1197
1211
  fontWeight: null,
@@ -1217,6 +1231,8 @@ export const defaultDesignTokensV2 = {
1217
1231
  hoverY: 0,
1218
1232
  activeScale: 0.97,
1219
1233
  activeY: 0,
1234
+ paddingX: null,
1235
+ paddingY: null,
1220
1236
  fontFamily: null,
1221
1237
  fontSizeScale: 1,
1222
1238
  fontWeight: null,
@@ -1243,6 +1259,8 @@ export const defaultDesignTokensV2 = {
1243
1259
  hoverY: 0,
1244
1260
  activeScale: 0.97,
1245
1261
  activeY: 0,
1262
+ paddingX: '0rem',
1263
+ paddingY: null,
1246
1264
  fontFamily: null,
1247
1265
  fontSizeScale: 1,
1248
1266
  fontWeight: null,
@@ -1270,6 +1288,8 @@ export const defaultDesignTokensV2 = {
1270
1288
  hoverY: 0,
1271
1289
  activeScale: 0.97,
1272
1290
  activeY: 0,
1291
+ paddingX: '0rem',
1292
+ paddingY: null,
1273
1293
  fontFamily: null,
1274
1294
  fontSizeScale: 1,
1275
1295
  fontWeight: null,
@@ -1298,6 +1318,8 @@ export const defaultDesignTokensV2 = {
1298
1318
  hoverY: 0,
1299
1319
  activeScale: 0.97,
1300
1320
  activeY: 0,
1321
+ paddingX: null,
1322
+ paddingY: null,
1301
1323
  fontFamily: null,
1302
1324
  fontSizeScale: 1,
1303
1325
  fontWeight: null,
@@ -1323,6 +1345,8 @@ export const defaultDesignTokensV2 = {
1323
1345
  hoverY: 0,
1324
1346
  activeScale: 0.97,
1325
1347
  activeY: 0,
1348
+ paddingX: null,
1349
+ paddingY: null,
1326
1350
  fontFamily: null,
1327
1351
  fontSizeScale: 1,
1328
1352
  fontWeight: null,