@latte-macchiat-io/latte-vanilla-components 0.0.481 → 0.0.483

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/ExpandCollapse/Item/styles.css.ts +25 -16
  3. package/src/components/ExpandCollapse/theme.ts +127 -1
  4. package/src/theme/contract.css.ts +124 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.481",
3
+ "version": "0.0.483",
4
4
  "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
5
5
  "type": "module",
6
6
  "main": "./src/index.ts",
package/src/components/ExpandCollapse/Item/styles.css.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import { globalStyle, style } from '@vanilla-extract/css';
2
+
2
3
  import { themeContract } from '../../../theme/contract.css';
3
4
  import { generateResponsiveMedia } from '../../../utils/generateResponsiveMedia';
4
5
 
@@ -13,7 +14,10 @@ export const collapseExpandItem = style({
13
14
  backgroundColor: themeContract.expandCollapse.item.backgroundColor,
14
15
 
15
16
  '@media': generateResponsiveMedia({
16
- padding: themeContract.expandCollapse.item.padding,
17
+ paddingTop: themeContract.expandCollapse.item.content.paddingTop,
18
+ paddingRight: themeContract.expandCollapse.item.content.paddingRight,
19
+ paddingLeft: themeContract.expandCollapse.item.content.paddingLeft,
20
+ paddingBottom: themeContract.expandCollapse.item.content.paddingBottom,
17
21
  }),
18
22
  });
19
23
 
@@ -27,22 +31,22 @@ export const collapseExpandItemTitle = style({
27
31
  display: 'flex',
28
32
  cursor: 'pointer',
29
33
 
30
- // '@media': generateResponsiveMedia({
31
- // gap: breakpointMapper([15, 15, 20, 20, 30, 30]),
32
- // paddingTop: breakpointMapper([10, 10, 10, 10, 15, 15]),
33
- // paddingLeft: breakpointMapper([10, 10, 10, 10, 30, 30]),
34
- // paddingRight: breakpointMapper([10, 10, 10, 10, 30, 30]),
35
- // paddingBottom: breakpointMapper([10, 10, 10, 10, 15, 15]),
36
- // }),
34
+ '@media': generateResponsiveMedia({
35
+ gap: themeContract.expandCollapse.item.title.gap,
36
+ paddingTop: themeContract.expandCollapse.item.title.paddingTop,
37
+ paddingLeft: themeContract.expandCollapse.item.title.paddingLeft,
38
+ paddingRight: themeContract.expandCollapse.item.title.paddingRight,
39
+ paddingBottom: themeContract.expandCollapse.item.title.paddingBottom,
40
+ }),
37
41
  });
38
42
 
39
43
  export const collapseExpandTitleIcon = style({
40
44
  margin: 0,
41
45
  transition: 'transform 0.3s ease-out',
42
46
 
43
- // '@media': generateResponsiveMedia({
44
- // marginTop: breakpointMapper([5, 5, 5, 5, 5, 5]),
45
- // }),
47
+ '@media': generateResponsiveMedia({
48
+ marginTop: themeContract.expandCollapse.item.title.icon.marginTop,
49
+ }),
46
50
  });
47
51
 
48
52
  globalStyle(`${collapseExpandItemOpen} .${collapseExpandTitleIcon}`, {
@@ -65,10 +69,12 @@ globalStyle(`${collapseExpandContent} > div`, {
65
69
  opacity: 0,
66
70
  padding: 0,
67
71
  minHeight: 0,
68
- borderRadius: 20,
69
72
  visibility: 'hidden',
70
- // backgroundColor: brandColorWhite,
71
73
  transition: 'visibility 0.2s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out 0.2s',
74
+
75
+ border: themeContract.expandCollapse.item.content.border,
76
+ borderRadius: themeContract.expandCollapse.item.content.borderRadius,
77
+ backgroundColor: themeContract.expandCollapse.item.content.backgroundColor,
72
78
  });
73
79
 
74
80
  export const collapseExpandContentOpen = style({
@@ -81,7 +87,10 @@ globalStyle(`${collapseExpandContentOpen} > div`, {
81
87
  transition: 'visibility 0.2s ease-out, opacity 0.3s ease-out',
82
88
  transitionDelay: '0.1s',
83
89
 
84
- // '@media': generateResponsiveMedia({
85
- // padding: breakpointMapper([15, 15, 20, 20, 30, 30]),
86
- // }),
90
+ '@media': generateResponsiveMedia({
91
+ paddingTop: themeContract.expandCollapse.item.content.paddingTop,
92
+ paddingRight: themeContract.expandCollapse.item.content.paddingRight,
93
+ paddingLeft: themeContract.expandCollapse.item.content.paddingLeft,
94
+ paddingBottom: themeContract.expandCollapse.item.content.paddingBottom,
95
+ }),
87
96
  });
package/src/components/ExpandCollapse/theme.ts CHANGED
@@ -32,7 +32,7 @@ const themeExpandCollapseBase = {
32
32
  xl: '50px',
33
33
  '2xl': '50px',
34
34
  },
35
- padding: {
35
+ paddingTop: {
36
36
  mobile: '15px',
37
37
  sm: '15px',
38
38
  md: '30px',
@@ -40,6 +40,122 @@ const themeExpandCollapseBase = {
40
40
  xl: '50px',
41
41
  '2xl': '50px',
42
42
  },
43
+ paddingBottom: {
44
+ mobile: '15px',
45
+ sm: '15px',
46
+ md: '30px',
47
+ lg: '30px',
48
+ xl: '50px',
49
+ '2xl': '50px',
50
+ },
51
+ paddingLeft: {
52
+ mobile: '15px',
53
+ sm: '15px',
54
+ md: '30px',
55
+ lg: '30px',
56
+ xl: '50px',
57
+ '2xl': '50px',
58
+ },
59
+ paddingRight: {
60
+ mobile: '15px',
61
+ sm: '15px',
62
+ md: '30px',
63
+ lg: '30px',
64
+ xl: '50px',
65
+ '2xl': '50px',
66
+ },
67
+
68
+ title: {
69
+ gap: {
70
+ mobile: '15px',
71
+ sm: '15px',
72
+ md: '30px',
73
+ lg: '30px',
74
+ xl: '50px',
75
+ '2xl': '50px',
76
+ },
77
+ paddingTop: {
78
+ mobile: '15px',
79
+ sm: '15px',
80
+ md: '30px',
81
+ lg: '30px',
82
+ xl: '50px',
83
+ '2xl': '50px',
84
+ },
85
+ paddingBottom: {
86
+ mobile: '15px',
87
+ sm: '15px',
88
+ md: '30px',
89
+ lg: '30px',
90
+ xl: '50px',
91
+ '2xl': '50px',
92
+ },
93
+ paddingLeft: {
94
+ mobile: '15px',
95
+ sm: '15px',
96
+ md: '30px',
97
+ lg: '30px',
98
+ xl: '50px',
99
+ '2xl': '50px',
100
+ },
101
+ paddingRight: {
102
+ mobile: '15px',
103
+ sm: '15px',
104
+ md: '30px',
105
+ lg: '30px',
106
+ xl: '50px',
107
+ '2xl': '50px',
108
+ },
109
+
110
+ icon: {
111
+ marginTop: {
112
+ mobile: '15px',
113
+ sm: '15px',
114
+ md: '30px',
115
+ lg: '30px',
116
+ xl: '50px',
117
+ '2xl': '50px',
118
+ },
119
+ },
120
+ },
121
+
122
+ content: {
123
+ border: '',
124
+ borderRadius: '',
125
+
126
+ paddingTop: {
127
+ mobile: '15px',
128
+ sm: '15px',
129
+ md: '30px',
130
+ lg: '30px',
131
+ xl: '50px',
132
+ '2xl': '50px',
133
+ },
134
+ paddingBottom: {
135
+ mobile: '15px',
136
+ sm: '15px',
137
+ md: '30px',
138
+ lg: '30px',
139
+ xl: '50px',
140
+ '2xl': '50px',
141
+ },
142
+ paddingLeft: {
143
+ mobile: '15px',
144
+ sm: '15px',
145
+ md: '30px',
146
+ lg: '30px',
147
+ xl: '50px',
148
+ '2xl': '50px',
149
+ },
150
+ paddingRight: {
151
+ mobile: '15px',
152
+ sm: '15px',
153
+ md: '30px',
154
+ lg: '30px',
155
+ xl: '50px',
156
+ '2xl': '50px',
157
+ },
158
+ },
43
159
  },
44
160
  },
45
161
  };
@@ -50,6 +166,11 @@ export const themeExpandCollapseLight = {
50
166
  item: {
51
167
  ...themeExpandCollapseBase.expandCollapse.item,
52
168
  backgroundColor: '',
169
+
170
+ content: {
171
+ ...themeExpandCollapseBase.expandCollapse.item.content,
172
+ backgroundColor: '',
173
+ },
53
174
  },
54
175
  },
55
176
  };
@@ -60,6 +181,11 @@ export const themeExpandCollapseDark = {
60
181
  item: {
61
182
  ...themeExpandCollapseBase.expandCollapse.item,
62
183
  backgroundColor: '',
184
+
185
+ content: {
186
+ ...themeExpandCollapseBase.expandCollapse.item.content,
187
+ backgroundColor: '',
188
+ },
63
189
  },
64
190
  },
65
191
  };
package/src/theme/contract.css.ts CHANGED
@@ -1294,13 +1294,37 @@ export const themeContract = createGlobalThemeContract({
1294
1294
  borderRadius: 'latte-expandCollapse-item-borderRadius',
1295
1295
  backgroundColor: 'latte-expandCollapse-item-backgroundColor',
1296
1296
 
1297
- padding: {
1298
- mobile: 'latte-expandCollapse-item-padding-mobile',
1299
- sm: 'latte-expandCollapse-item-padding-sm',
1300
- md: 'latte-expandCollapse-item-padding-md',
1301
- lg: 'latte-expandCollapse-item-padding-lg',
1302
- xl: 'latte-expandCollapse-item-padding-xl',
1303
- '2xl': 'latte-expandCollapse-item-padding-2xl',
1297
+ paddingTop: {
1298
+ mobile: 'latte-expandCollapse-item-paddingTop-mobile',
1299
+ sm: 'latte-expandCollapse-item-paddingTop-sm',
1300
+ md: 'latte-expandCollapse-item-paddingTop-md',
1301
+ lg: 'latte-expandCollapse-item-paddingTop-lg',
1302
+ xl: 'latte-expandCollapse-item-paddingTop-xl',
1303
+ '2xl': 'latte-expandCollapse-item-paddingTop-2xl',
1304
+ },
1305
+ paddingLeft: {
1306
+ mobile: 'latte-expandCollapse-item-paddingLeft-mobile',
1307
+ sm: 'latte-expandCollapse-item-paddingLeft-sm',
1308
+ md: 'latte-expandCollapse-item-paddingLeft-md',
1309
+ lg: 'latte-expandCollapse-item-paddingLeft-lg',
1310
+ xl: 'latte-expandCollapse-item-paddingLeft-xl',
1311
+ '2xl': 'latte-expandCollapse-item-paddingLeft-2xl',
1312
+ },
1313
+ paddingRight: {
1314
+ mobile: 'latte-expandCollapse-item-paddingRight-mobile',
1315
+ sm: 'latte-expandCollapse-item-paddingRight-sm',
1316
+ md: 'latte-expandCollapse-item-paddingRight-md',
1317
+ lg: 'latte-expandCollapse-item-paddingRight-lg',
1318
+ xl: 'latte-expandCollapse-item-paddingRight-xl',
1319
+ '2xl': 'latte-expandCollapse-item-paddingRight-2xl',
1320
+ },
1321
+ paddingBottom: {
1322
+ mobile: 'latte-expandCollapse-item-paddingBottom-mobile',
1323
+ sm: 'latte-expandCollapse-item-paddingBottom-sm',
1324
+ md: 'latte-expandCollapse-item-paddingBottom-md',
1325
+ lg: 'latte-expandCollapse-item-paddingBottom-lg',
1326
+ xl: 'latte-expandCollapse-item-paddingBottom-xl',
1327
+ '2xl': 'latte-expandCollapse-item-paddingBottom-2xl',
1304
1328
  },
1305
1329
 
1306
1330
  gap: {
@@ -1311,6 +1335,99 @@ export const themeContract = createGlobalThemeContract({
1311
1335
  xl: 'latte-expandCollapse-item-gap-xl',
1312
1336
  '2xl': 'latte-expandCollapse-item-gap-2xl',
1313
1337
  },
1338
+
1339
+ title: {
1340
+ gap: {
1341
+ mobile: 'latte-expandCollapse-item-title-gap-mobile',
1342
+ sm: 'latte-expandCollapse-item-title-gap-sm',
1343
+ md: 'latte-expandCollapse-item-title-gap-md',
1344
+ lg: 'latte-expandCollapse-item-title-gap-lg',
1345
+ xl: 'latte-expandCollapse-item-title-gap-xl',
1346
+ '2xl': 'latte-expandCollapse-item-title-gap-2xl',
1347
+ },
1348
+ paddingTop: {
1349
+ mobile: 'latte-expandCollapse-item-title-paddingTop-mobile',
1350
+ sm: 'latte-expandCollapse-item-title-paddingTop-sm',
1351
+ md: 'latte-expandCollapse-item-title-paddingTop-md',
1352
+ lg: 'latte-expandCollapse-item-title-paddingTop-lg',
1353
+ xl: 'latte-expandCollapse-item-title-paddingTop-xl',
1354
+ '2xl': 'latte-expandCollapse-item-title-paddingTop-2xl',
1355
+ },
1356
+ paddingLeft: {
1357
+ mobile: 'latte-expandCollapse-item-title-paddingLeft-mobile',
1358
+ sm: 'latte-expandCollapse-item-title-paddingLeft-sm',
1359
+ md: 'latte-expandCollapse-item-title-paddingLeft-md',
1360
+ lg: 'latte-expandCollapse-item-title-paddingLeft-lg',
1361
+ xl: 'latte-expandCollapse-item-title-paddingLeft-xl',
1362
+ '2xl': 'latte-expandCollapse-item-title-paddingLeft-2xl',
1363
+ },
1364
+ paddingRight: {
1365
+ mobile: 'latte-expandCollapse-item-title-paddingRight-mobile',
1366
+ sm: 'latte-expandCollapse-item-title-paddingRight-sm',
1367
+ md: 'latte-expandCollapse-item-title-paddingRight-md',
1368
+ lg: 'latte-expandCollapse-item-title-paddingRight-lg',
1369
+ xl: 'latte-expandCollapse-item-title-paddingRight-xl',
1370
+ '2xl': 'latte-expandCollapse-item-title-paddingRight-2xl',
1371
+ },
1372
+ paddingBottom: {
1373
+ mobile: 'latte-expandCollapse-item-title-paddingBottom-mobile',
1374
+ sm: 'latte-expandCollapse-item-title-paddingBottom-sm',
1375
+ md: 'latte-expandCollapse-item-title-paddingBottom-md',
1376
+ lg: 'latte-expandCollapse-item-title-paddingBottom-lg',
1377
+ xl: 'latte-expandCollapse-item-title-paddingBottom-xl',
1378
+ '2xl': 'latte-expandCollapse-item-title-paddingBottom-2xl',
1379
+ },
1380
+
1381
+ icon: {
1382
+ marginTop: {
1383
+ mobile: 'latte-expandCollapse-item-title-icon-marginTop-mobile',
1384
+ sm: 'latte-expandCollapse-item-title-icon-marginTop-sm',
1385
+ md: 'latte-expandCollapse-item-title-icon-marginTop-md',
1386
+ lg: 'latte-expandCollapse-item-title-icon-marginTop-lg',
1387
+ xl: 'latte-expandCollapse-item-title-icon-marginTop-xl',
1388
+ '2xl': 'latte-expandCollapse-item-title-icon-marginTop-2xl',
1389
+ },
1390
+ },
1391
+ },
1392
+
1393
+ content: {
1394
+ border: 'latte-expandCollapse-item-content-border',
1395
+ borderRadius: 'latte-expandCollapse-item-content-borderRadius',
1396
+ backgroundColor: 'latte-expandCollapse-item-content-backgroundColor',
1397
+
1398
+ paddingTop: {
1399
+ mobile: 'latte-expandCollapse-item-content-paddingTop-mobile',
1400
+ sm: 'latte-expandCollapse-item-content-paddingTop-sm',
1401
+ md: 'latte-expandCollapse-item-content-paddingTop-md',
1402
+ lg: 'latte-expandCollapse-item-content-paddingTop-lg',
1403
+ xl: 'latte-expandCollapse-item-content-paddingTop-xl',
1404
+ '2xl': 'latte-expandCollapse-item-content-paddingTop-2xl',
1405
+ },
1406
+ paddingLeft: {
1407
+ mobile: 'latte-expandCollapse-item-content-paddingLeft-mobile',
1408
+ sm: 'latte-expandCollapse-item-content-paddingLeft-sm',
1409
+ md: 'latte-expandCollapse-item-content-paddingLeft-md',
1410
+ lg: 'latte-expandCollapse-item-content-paddingLeft-lg',
1411
+ xl: 'latte-expandCollapse-item-content-paddingLeft-xl',
1412
+ '2xl': 'latte-expandCollapse-item-content-paddingLeft-2xl',
1413
+ },
1414
+ paddingRight: {
1415
+ mobile: 'latte-expandCollapse-item-content-paddingRight-mobile',
1416
+ sm: 'latte-expandCollapse-item-content-paddingRight-sm',
1417
+ md: 'latte-expandCollapse-item-content-paddingRight-md',
1418
+ lg: 'latte-expandCollapse-item-content-paddingRight-lg',
1419
+ xl: 'latte-expandCollapse-item-content-paddingRight-xl',
1420
+ '2xl': 'latte-expandCollapse-item-content-paddingRight-2xl',
1421
+ },
1422
+ paddingBottom: {
1423
+ mobile: 'latte-expandCollapse-item-content-paddingBottom-mobile',
1424
+ sm: 'latte-expandCollapse-item-content-paddingBottom-sm',
1425
+ md: 'latte-expandCollapse-item-content-paddingBottom-md',
1426
+ lg: 'latte-expandCollapse-item-content-paddingBottom-lg',
1427
+ xl: 'latte-expandCollapse-item-content-paddingBottom-xl',
1428
+ '2xl': 'latte-expandCollapse-item-content-paddingBottom-2xl',
1429
+ },
1430
+ },
1314
1431
  },
1315
1432
  },
1316
1433
  });