@latte-macchiat-io/latte-vanilla-components 0.0.256 → 0.0.258

package/package.json

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

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

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
 import { themeContract } from '../..';
 import { queries } from '../../styles/mediaqueries';
@@ -31,3 +31,7 @@ export const footerRecipe = style([
     },
   },
 ]);
+
+globalStyle(`${footerRecipe} a `, {
+  color: themeContract.footer.linkColor,
+});

package/src/components/Footer/theme.ts

@@ -39,6 +39,7 @@ const themeFooterBase = {
 export const themeFooterLight = {
   footer: {
     ...themeFooterBase.footer,
+    linkColor: '#FF7377',
     backgroundColor: '#FF7377',
   },
 };
@@ -46,6 +47,7 @@ export const themeFooterLight = {
 export const themeFooterDark = {
   footer: {
     ...themeFooterBase.footer,
+    linkColor: '#FF7377',
     backgroundColor: '#FF7377',
   },
 };

package/src/components/Header/HeaderToggleNav/index.tsx

@@ -1,7 +1,7 @@
 import { clsx } from 'clsx';
 
 import { ReactNode } from 'react';
-import { bar, toggleNavButton } from './styles.css';
+import { bar, toggleNavButton, toggleNavButtonMenu } from './styles.css';
 
 export type HeaderToggleNavProps = React.HTMLAttributes<HTMLDivElement> & {
   isOpen?: boolean;
@@ -13,11 +13,11 @@ export const HeaderToggleNav = ({ isOpen, onClick, children, className }: Header
   return (
     <button onClick={onClick} aria-label="Toggle navigation" className={clsx(toggleNavButton(), className)}>
       {children || (
-        <>
+        <span className={toggleNavButtonMenu()}>
           <span className={clsx(bar, isOpen && 'open')} />
           <span className={clsx(bar, isOpen && 'open')} />
           <span className={clsx(bar, isOpen && 'open')} />
-        </>
+        </span>
       )}
     </button>
   );

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

@@ -4,18 +4,26 @@ import { recipe } from '@vanilla-extract/recipes';
 export const toggleNavButton = recipe(
   {
     base: {
-      background: 'transparent',
+      padding: 0,
       border: 'none',
       cursor: 'pointer',
+      background: 'transparent',
+    },
+  },
+  'toggle-nav-button'
+);
+
+export const toggleNavButtonMenu = recipe(
+  {
+    base: {
+      width: '24px',
+      height: '18px',
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'space-between',
-      width: '24px',
-      height: '18px',
-      padding: 0,
     },
   },
-  'toggle-nav-button'
+  'toggle-nav-button-menu'
 );
 
 export const bar = style(

package/src/theme/contract.css.ts

@@ -189,6 +189,7 @@ export const themeContract = createGlobalThemeContract({
   },
   footer: {
     fontSize: 'latte-footer-fontSize',
+    linkColor: 'latte-footer-linkColor',
     backgroundColor: 'latte-footer-backgroundColor',
     height: {
       mobile: 'latte-footer-height-mobile',