@latte-macchiat-io/latte-vanilla-components 0.0.302 → 0.0.304

package/package.json

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

package/src/components/NavLegal/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 { themeContract } from '../../theme/contract.css';
@@ -21,3 +21,14 @@ export const navLegalRecipe = recipe(
   },
   'nav-legal'
 );
+
+export const navLegalLink = style({}, 'nav-social-link');
+
+globalStyle(`${navLegalLink} svg path`, {
+  transition: themeContract.navLegal.transition,
+  fill: themeContract.navLegal.colors.default,
+});
+
+globalStyle(`${navLegalLink}:hover svg path`, {
+  fill: themeContract.navLegal.colors.defaultHover,
+});

package/src/components/NavLegal/theme.ts

@@ -1,5 +1,6 @@
 const themeNavLegalBase = {
   navLegal: {
+    transition: 'all 0.5s ease-in-out',
     gap: {
       mobile: '5px',
       sm: '5px',
@@ -14,11 +15,19 @@ const themeNavLegalBase = {
 export const themeNavLegalLight = {
   navLegal: {
     ...themeNavLegalBase.navLegal,
+    colors: {
+      default: '#FF7377',
+      defaultHover: '#000000',
+    },
   },
 };
 
 export const themeNavLegalDark = {
   navLegal: {
     ...themeNavLegalBase.navLegal,
+    colors: {
+      default: '#FF7377',
+      defaultHover: '#000000',
+    },
   },
 };

package/src/components/NavSocial/index.tsx

@@ -6,10 +6,11 @@ import { Icon } from '../Icon';
 import icons from '../Icon/path';
 
 export type NavSocialProps = React.HTMLAttributes<HTMLDivElement> & {
+  size: number;
   navSocial: { name: Social; link: string }[];
 };
 
-export const NavSocial = ({ navSocial, className }: NavSocialProps) => (
+export const NavSocial = ({ size = 24, navSocial, className }: NavSocialProps) => (
   <div className={clsx(navSocialRecipe(), className)}>
     {navSocial?.map(({ name, link }, index) => {
       const capitalized = name[0].toUpperCase() + name.slice(1);
@@ -17,7 +18,7 @@ export const NavSocial = ({ navSocial, className }: NavSocialProps) => (
       return (
         <div key={`navSocialItem-${index}`} className={navSocialLink}>
           <a target="_blank" rel="noopener noreferrer" aria-label={name} href={link}>
-            <Icon icon={`social${capitalized}` as keyof typeof icons} />
+            <Icon size={size} icon={`social${capitalized}` as keyof typeof icons} />
           </a>
         </div>
       );

package/src/theme/contract.css.ts

@@ -650,6 +650,11 @@ export const themeContract = createGlobalThemeContract({
   },
 
   navLegal: {
+    transition: 'latte-navLegal-transition',
+    colors: {
+      default: 'latte-navLegal-colors-default',
+      defaultHover: 'latte-navLegal-colors-defaultHover',
+    },
     gap: {
       mobile: 'latte-navLegal-gap-mobile',
       sm: 'latte-navLegal-gap-sm',