@latte-macchiat-io/latte-vanilla-components 0.0.286 → 0.0.288

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.286",
+  "version": "0.0.288",
   "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,4 +1,4 @@
-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';
@@ -123,5 +123,9 @@ export const headerToggleNav = recipe(
   'header-toggle-nav'
 );
 
+globalStyle(`${headerRecipe} 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/components/Section/styles.css.ts

@@ -117,6 +117,8 @@ export const sectionRecipe = recipe(
       isDark: false,
       isFullHeight: false,
       isHeaderFixed: false,
+      withPaddingTop: true,
+      withPaddingBottom: true,
       variant: 'transparent',
     },
   },

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',