@latte-macchiat-io/latte-vanilla-components 0.0.317 → 0.0.319

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 +20 -10
  3. package/src/components/Carousel/theme.ts +8 -0
  4. package/src/theme/contract.css.ts +8 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.317",
3
+ "version": "0.0.319",
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
@@ -5,6 +5,7 @@ import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
5
5
  import { queries } from '../../styles/mediaqueries';
6
6
  import { themeContract } from '../../theme/contract.css';
7
7
 
8
+ import { combineResponsive } from '../../utils/combineResponsive';
8
9
  import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
9
10
 
10
11
  export const carouselRecipe = recipe(
@@ -85,14 +86,6 @@ export const carouselItem = style(
85
86
  'carousel-item'
86
87
  );
87
88
 
88
- // globalStyle(`${carouselItem} > div`, {
89
- // '@media': {
90
- // ...generateResponsiveMedia({
91
- // marginBottom: combineResponsive(themeContract.carousel.bullet.height, themeContract.carousel.bullet.bottom),
92
- // }),
93
- // },
94
- // });
95
-
96
89
  export const carouselNav = recipe(
97
90
  {
98
91
  base: {
@@ -127,7 +120,24 @@ export const carouselNav = recipe(
127
120
 
128
121
  navPositionVertical: {
129
122
  top: {
130
- bottom: '100%',
123
+ [queries.mobile]: {
124
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.mobile}px)`,
125
+ },
126
+ [queries.sm]: {
127
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.sm}px)`,
128
+ },
129
+ [queries.md]: {
130
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.md}px)`,
131
+ },
132
+ [queries.lg]: {
133
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.lg}px)`,
134
+ },
135
+ [queries.xl]: {
136
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset.xl}px)`,
137
+ },
138
+ [queries['2xl']]: {
139
+ top: `calc(100% + ${themeContract.carousel.nav.positionVerticalOffset['2xl']}px)`,
140
+ },
131
141
  },
132
142
  center: {
133
143
  top: '50%',
@@ -185,6 +195,7 @@ export const carouselNavButton = style(
185
195
  export const carouselBullets = style({
186
196
  left: 0,
187
197
  right: 0,
198
+ top: '100%',
188
199
  display: 'flex',
189
200
  alignItems: 'center',
190
201
  position: 'absolute',
@@ -193,7 +204,6 @@ export const carouselBullets = style({
193
204
  '@media': {
194
205
  ...generateResponsiveMedia({
195
206
  gap: themeContract.carousel.bullet.gap,
196
- bottom: themeContract.carousel.bullet.bottom,
197
207
  }),
198
208
 
199
209
  [queries.lg]: {},
package/src/components/Carousel/theme.ts CHANGED
@@ -26,6 +26,14 @@ const themeCarouselBase = {
26
26
  xl: '50',
27
27
  '2xl': '50',
28
28
  },
29
+ positionVerticalOffset: {
30
+ mobile: '15',
31
+ sm: '15',
32
+ md: '30',
33
+ lg: '30',
34
+ xl: '50',
35
+ '2xl': '50',
36
+ },
29
37
  },
30
38
  bullet: {
31
39
  borderRadius: '1000px',
package/src/theme/contract.css.ts CHANGED
@@ -813,6 +813,14 @@ export const themeContract = createGlobalThemeContract({
813
813
  border: 'latte-carousel-nav-border',
814
814
  borderRadius: 'latte-carousel-nav-borderRadius',
815
815
  backgroundColor: 'latte-carousel-nav-backgroundColor',
816
+ positionVerticalOffset: {
817
+ mobile: 'latte-carousel-nav-positionVerticalOffset-mobile',
818
+ sm: 'latte-carousel-nav-positionVerticalOffset-sm',
819
+ md: 'latte-carousel-nav-positionVerticalOffset-md',
820
+ lg: 'latte-carousel-nav-positionVerticalOffset-lg',
821
+ xl: 'latte-carousel-nav-positionVerticalOffset-xl',
822
+ '2xl': 'latte-carousel-nav-positionVerticalOffset-2xl',
823
+ },
816
824
  gap: {
817
825
  mobile: 'latte-carousel-nav-gap-mobile',
818
826
  sm: 'latte-carousel-nav-gap-sm',
@@ -843,14 +851,6 @@ export const themeContract = createGlobalThemeContract({
843
851
  borderRadius: 'latte-carousel-bullet-borderRadius',
844
852
  backgroundColor: 'latte-carousel-bullet-backgroundColor',
845
853
  activeBackgroundColor: 'latte-carousel-bullet-active-backgroundColor',
846
- bottom: {
847
- mobile: 'latte-carousel-bullet-bottom-mobile',
848
- sm: 'latte-carousel-bullet-bottom-sm',
849
- md: 'latte-carousel-bullet-bottom-md',
850
- lg: 'latte-carousel-bullet-bottom-lg',
851
- xl: 'latte-carousel-bullet-bottom-xl',
852
- '2xl': 'latte-carousel-bullet-bottom-2xl',
853
- },
854
854
 
855
855
  gap: {
856
856
  mobile: 'latte-carousel-bullet-gap-mobile',