@latte-macchiat-io/latte-vanilla-components 0.0.312 → 0.0.314

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/Carousel/styles.css.ts +6 -4
  3. package/src/components/Carousel/theme.ts +10 -0
  4. package/src/theme/contract.css.ts +9 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.312",
3
+ "version": "0.0.314",
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/Carousel/styles.css.ts CHANGED
@@ -104,9 +104,11 @@ export const carouselNav = recipe(
104
104
  pointerEvents: 'none',
105
105
  justifyContent: 'flex-end',
106
106
 
107
- gap: themeContract.space.sm,
108
- padding: themeContract.space.md,
109
- maxWidth: themeContract.maxWidth,
107
+ '@media': {
108
+ ...generateResponsiveMedia({
109
+ gap: themeContract.carousel.nav.gap,
110
+ }),
111
+ },
110
112
  },
111
113
 
112
114
  variants: {
@@ -150,7 +152,6 @@ export const carouselNav = recipe(
150
152
 
151
153
  export const carouselNavButton = style(
152
154
  {
153
- border: 'none',
154
155
  display: 'flex',
155
156
  cursor: 'pointer',
156
157
  alignItems: 'center',
@@ -158,6 +159,7 @@ export const carouselNavButton = style(
158
159
  justifyContent: 'center',
159
160
  transition: 'all 0.3s ease-in-out',
160
161
 
162
+ border: themeContract.carousel.nav.border,
161
163
  borderRadius: themeContract.carousel.nav.borderRadius,
162
164
  backgroundColor: themeContract.carousel.nav.backgroundColor,
163
165
 
package/src/components/Carousel/theme.ts CHANGED
@@ -2,6 +2,14 @@ const themeCarouselBase = {
2
2
  carousel: {
3
3
  nav: {
4
4
  borderRadius: '1000px',
5
+ gap: {
6
+ mobile: '15',
7
+ sm: '15',
8
+ md: '30',
9
+ lg: '30',
10
+ xl: '50',
11
+ '2xl': '50',
12
+ },
5
13
  width: {
6
14
  mobile: '15',
7
15
  sm: '15',
@@ -64,6 +72,7 @@ export const themeCarouselLight = {
64
72
 
65
73
  nav: {
66
74
  ...themeCarouselBase.carousel.nav,
75
+ border: '1px solid #000',
67
76
  backgroundColor: '#FF7377',
68
77
  },
69
78
 
@@ -82,6 +91,7 @@ export const themeCarouselDark = {
82
91
 
83
92
  nav: {
84
93
  ...themeCarouselBase.carousel.nav,
94
+ border: '1px solid #000',
85
95
  backgroundColor: '#FF7377',
86
96
  },
87
97
 
package/src/theme/contract.css.ts CHANGED
@@ -810,8 +810,17 @@ export const themeContract = createGlobalThemeContract({
810
810
  },
811
811
 
812
812
  nav: {
813
+ border: 'latte-carousel-nav-border',
813
814
  borderRadius: 'latte-carousel-nav-borderRadius',
814
815
  backgroundColor: 'latte-carousel-nav-backgroundColor',
816
+ gap: {
817
+ mobile: 'latte-carousel-nav-gap-mobile',
818
+ sm: 'latte-carousel-nav-gap-sm',
819
+ md: 'latte-carousel-nav-gap-md',
820
+ lg: 'latte-carousel-nav-gap-lg',
821
+ xl: 'latte-carousel-nav-gap-xl',
822
+ '2xl': 'latte-carousel-nav-gap-2xl',
823
+ },
815
824
  width: {
816
825
  mobile: 'latte-carousel-nav-width-mobile',
817
826
  sm: 'latte-carousel-nav-width-sm',