@latte-macchiat-io/latte-vanilla-components 0.0.328 → 0.0.330

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 +11 -3
  3. package/src/components/Carousel/theme.ts +8 -0
  4. package/src/theme/contract.css.ts +4 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@latte-macchiat-io/latte-vanilla-components",
3
- "version": "0.0.328",
3
+ "version": "0.0.330",
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
@@ -1,4 +1,4 @@
1
- import { style } from '@vanilla-extract/css';
1
+ import { globalStyle, style } from '@vanilla-extract/css';
2
2
  import { calc } from '@vanilla-extract/css-utils';
3
3
  import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
4
4
 
@@ -172,8 +172,8 @@ export const carouselNavButton = style(
172
172
 
173
173
  ':hover': {
174
174
  transform: 'scale(1.1)',
175
- color: themeContract.colors.background,
176
- backgroundColor: themeContract.colors.primary,
175
+ border: themeContract.carousel.nav.borderHover,
176
+ backgroundColor: themeContract.carousel.nav.backgroundColorHover,
177
177
  },
178
178
 
179
179
  ':disabled': {
@@ -190,6 +190,14 @@ export const carouselNavButton = style(
190
190
  'carousel-nav-button'
191
191
  );
192
192
 
193
+ globalStyle(`${carouselNavButton} svg path`, {
194
+ fill: themeContract.carousel.nav.color,
195
+ });
196
+
197
+ globalStyle(`${carouselNavButton}:hover svg path`, {
198
+ fill: themeContract.carousel.nav.colorHover,
199
+ });
200
+
193
201
  export const carouselBullets = style({
194
202
  left: 0,
195
203
  right: 0,
package/src/components/Carousel/theme.ts CHANGED
@@ -88,8 +88,12 @@ export const themeCarouselLight = {
88
88
 
89
89
  nav: {
90
90
  ...themeCarouselBase.carousel.nav,
91
+ color: '#000',
92
+ colorHover: '#FF7377',
91
93
  border: '1px solid #000',
92
94
  backgroundColor: '#FF7377',
95
+ borderHover: '1px solid #000',
96
+ backgroundColorHover: '#FF7377',
93
97
  },
94
98
 
95
99
  bullet: {
@@ -107,8 +111,12 @@ export const themeCarouselDark = {
107
111
 
108
112
  nav: {
109
113
  ...themeCarouselBase.carousel.nav,
114
+ color: '#000',
115
+ colorHover: '#FF7377',
110
116
  border: '1px solid #000',
111
117
  backgroundColor: '#FF7377',
118
+ borderHover: '1px solid #000',
119
+ backgroundColorHover: '#FF7377',
112
120
  },
113
121
 
114
122
  bullet: {
package/src/theme/contract.css.ts CHANGED
@@ -810,9 +810,13 @@ export const themeContract = createGlobalThemeContract({
810
810
  },
811
811
 
812
812
  nav: {
813
+ color: 'latte-carousel-nav-color',
814
+ colorHover: 'latte-carousel-nav-colorHover',
813
815
  border: 'latte-carousel-nav-border',
816
+ borderHover: 'latte-carousel-nav-borderHover',
814
817
  borderRadius: 'latte-carousel-nav-borderRadius',
815
818
  backgroundColor: 'latte-carousel-nav-backgroundColor',
819
+ backgroundColorHover: 'latte-carousel-nav-backgroundColorHover',
816
820
  positionVerticalOffset: {
817
821
  mobile: 'latte-carousel-nav-positionVerticalOffset-mobile',
818
822
  sm: 'latte-carousel-nav-positionVerticalOffset-sm',