@latte-macchiat-io/latte-vanilla-components 0.0.287 → 0.0.289

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.287",
+  "version": "0.0.289",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/styles.css.ts

@@ -1,35 +1,36 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
+
 import { queries, themeContract } from '../..';
 import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
+export const headerBase = style({
+  zIndex: 30,
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  position: 'relative',
+  justifyContent: 'space-between',
+
+  fontSize: themeContract.header.fontSize,
+  backgroundColor: themeContract.header.backgroundColor,
+
+  '@media': {
+    ...generateResponsiveMedia({
+      gap: themeContract.header.gap,
+      height: themeContract.header.height,
+      paddingTop: themeContract.header.paddingTop,
+      paddingLeft: themeContract.global.paddingLeft,
+      paddingRight: themeContract.global.paddingRight,
+      paddingBottom: themeContract.header.paddingBottom,
+    }),
+  },
+});
+
 export const headerRecipe = recipe(
   {
-    base: [
-      {
-        zIndex: 30,
-        width: '100%',
-        display: 'flex',
-        flexDirection: 'row',
-        alignItems: 'center',
-        position: 'relative',
-        justifyContent: 'space-between',
-
-        fontSize: themeContract.header.fontSize,
-        backgroundColor: themeContract.header.backgroundColor,
-
-        '@media': {
-          ...generateResponsiveMedia({
-            gap: themeContract.header.gap,
-            height: themeContract.header.height,
-            paddingTop: themeContract.header.paddingTop,
-            paddingLeft: themeContract.global.paddingLeft,
-            paddingRight: themeContract.global.paddingRight,
-            paddingBottom: themeContract.header.paddingBottom,
-          }),
-        },
-      },
-    ],
+    base: [headerBase],
 
     variants: {
       isFixed: {
@@ -123,5 +124,9 @@ export const headerToggleNav = recipe(
   'header-toggle-nav'
 );
 
+globalStyle(`${headerBase} a`, {
+  color: themeContract.header.linkColor,
+});
+
 export type HeaderToggleNavVariants = Parameters<typeof headerToggleNav>[0];
 export type HeaderOverlayVariants = Parameters<typeof headerOverlayRecipe>[0];

package/src/components/Header/theme.ts

@@ -41,6 +41,7 @@ const themeHeaderBase = {
 export const themeHeaderLight = {
   header: {
     ...themeHeaderBase.header,
+    linkColor: '#FF7377',
     backgroundColor: '#FF7377',
     overlayBackgroundColor: 'rgba(0,0,0,0.6)',
   },
@@ -49,6 +50,7 @@ export const themeHeaderLight = {
 export const themeHeaderDark = {
   header: {
     ...themeHeaderBase.header,
+    linkColor: '#FF7377',
     backgroundColor: '#FF7377',
     overlayBackgroundColor: 'rgba(0,0,0,0.6)',
   },

package/src/theme/contract.css.ts

@@ -150,6 +150,7 @@ export const themeContract = createGlobalThemeContract({
   },
   header: {
     fontSize: 'latte-header-fontSize',
+    linkColor: 'latte-header-linkColor',
     backgroundColor: 'latte-header-backgroundColor',
     overlayBackgroundColor: 'latte-header-overlayBackgroundColor',
     overlayBackgroundTransition: 'latte-header-overlayBackgroundTransition',