@latte-macchiat-io/latte-vanilla-components 0.0.167 → 0.0.169

package/src/components/Form/TextField/Label/Label.css.ts

@@ -0,0 +1,58 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../../theme/contract.css';
+
+const labelBase = style({
+  fontFamily: themeContract.fonts.body,
+  fontSize: themeContract.fontSizes.sm,
+  fontWeight: themeContract.fontWeights.medium,
+  color: themeContract.colors.text,
+  lineHeight: themeContract.lineHeights.tight,
+  width: '100%',
+  textAlign: 'left',
+  paddingBottom: themeContract.space.xs,
+
+  // selectors: {
+  //   '&[data-required="true"]': {
+  //     selectors: {
+  //       '&::after': {
+  //         content: ' *',
+  //         color: themeContract.colors.error,
+  //       },
+  //     },
+  //   },
+  // },
+});
+
+export const labelRecipe = recipe({
+  base: labelBase,
+
+  variants: {
+    size: {
+      sm: {
+        fontSize: themeContract.fontSizes.xs,
+        paddingBottom: themeContract.space.xs,
+      },
+      md: {},
+      lg: {
+        fontSize: themeContract.fontSizes.md,
+        paddingBottom: themeContract.space.sm,
+      },
+    },
+    variant: {
+      default: {},
+      inline: {
+        display: 'inline-block',
+        marginRight: themeContract.space.sm,
+        paddingBottom: 0,
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+});
+
+export type LabelVariants = RecipeVariants<typeof labelRecipe>;

package/src/components/Form/TextField/TextField.css.ts

@@ -0,0 +1,139 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../theme/contract.css';
+
+const textFieldBase = style({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  gap: themeContract.space.xs,
+});
+
+const labelBase = style({
+  fontFamily: themeContract.fonts.body,
+  fontSize: themeContract.fontSizes.sm,
+  fontWeight: themeContract.fontWeights.medium,
+  color: themeContract.colors.text,
+  lineHeight: themeContract.lineHeights.tight,
+
+  // selectors: {
+  //   '&[data-required="true"]': {
+  //     selectors: {
+  //       '&::after': {
+  //         content: ' *',
+  //         color: themeContract.colors.error,
+  //       },
+  //     },
+  //   },
+  // },
+});
+
+const inputBase = style({
+  appearance: 'none',
+  backgroundColor: themeContract.colors.background,
+  border: `1px solid ${themeContract.colors.border}`,
+  borderRadius: themeContract.radii.md,
+  color: themeContract.colors.text,
+  fontFamily: themeContract.fonts.body,
+  fontSize: themeContract.fontSizes.sm,
+  lineHeight: themeContract.lineHeights.normal,
+  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
+  transition: 'all 0.2s ease-in-out',
+  width: '100%',
+
+  '::placeholder': {
+    color: themeContract.colors.textSecondary,
+  },
+
+  ':hover': {
+    borderColor: themeContract.colors.primary,
+  },
+
+  ':focus': {
+    outline: '2px solid',
+    outlineColor: themeContract.colors.primary,
+    outlineOffset: '2px',
+    borderColor: themeContract.colors.primary,
+  },
+
+  ':disabled': {
+    backgroundColor: themeContract.colors.surface,
+    color: themeContract.colors.textSecondary,
+    cursor: 'not-allowed',
+    opacity: '0.6',
+  },
+
+  // selectors: {
+  //   '&[data-error="true"]': {
+  //     borderColor: themeContract.colors.error,
+  //   },
+  //   '&[data-error="true"]:focus': {
+  //     outlineColor: themeContract.colors.error,
+  //     borderColor: themeContract.colors.error,
+  //   },
+  // },
+});
+
+const textareaBase = style([
+  inputBase,
+  {
+    resize: 'vertical',
+    minHeight: '80px',
+  },
+]);
+
+const messageContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: themeContract.space.xs,
+});
+
+const errorMessage = style({
+  color: themeContract.colors.error,
+  fontSize: themeContract.fontSizes.xs,
+  lineHeight: themeContract.lineHeights.tight,
+  fontFamily: themeContract.fonts.body,
+});
+
+export const textFieldRecipe = recipe({
+  base: textFieldBase,
+
+  variants: {
+    size: {
+      sm: {
+        gap: themeContract.space.xs,
+
+        // selectors: {
+        //   [`& .${labelBase}`]: {
+        //     fontSize: themeContract.fontSizes.xs,
+        //   },
+        //   [`& .${inputBase}`]: {
+        //     fontSize: themeContract.fontSizes.xs,
+        //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
+        //   },
+        // },
+      },
+      md: {},
+      lg: {
+        gap: themeContract.space.sm,
+
+        // selectors: {
+        //   [`& .${labelBase}`]: {
+        //     fontSize: themeContract.fontSizes.md,
+        //   },
+        //   [`& .${inputBase}`]: {
+        //     fontSize: themeContract.fontSizes.md,
+        //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
+        //   },
+        // },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+export { labelBase, inputBase, textareaBase, messageContainer, errorMessage };
+export type TextFieldVariants = RecipeVariants<typeof textFieldRecipe>;

package/src/components/Form/TextField/Textarea/Textarea.css.ts

@@ -0,0 +1,121 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../../theme/contract.css';
+
+const textareaBase = style({
+  appearance: 'none',
+  backgroundColor: themeContract.colors.background,
+  border: `1px solid ${themeContract.colors.border}`,
+  borderRadius: themeContract.radii.md,
+  color: themeContract.colors.text,
+  fontFamily: themeContract.fonts.body,
+  fontSize: themeContract.fontSizes.sm,
+  lineHeight: themeContract.lineHeights.normal,
+  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
+  transition: 'all 0.2s ease-in-out',
+  width: '100%',
+  resize: 'vertical',
+  minHeight: '80px',
+
+  '::placeholder': {
+    color: themeContract.colors.textSecondary,
+  },
+
+  ':hover': {
+    borderColor: themeContract.colors.primary,
+  },
+
+  ':focus': {
+    outline: '2px solid',
+    outlineColor: themeContract.colors.primary,
+    outlineOffset: '2px',
+    borderColor: themeContract.colors.primary,
+  },
+
+  ':disabled': {
+    backgroundColor: themeContract.colors.surface,
+    color: themeContract.colors.textSecondary,
+    cursor: 'not-allowed',
+    opacity: '0.6',
+    resize: 'none',
+  },
+
+  selectors: {
+    '&[data-error="true"]': {
+      borderColor: themeContract.colors.error,
+    },
+    '&[data-error="true"]:focus': {
+      outlineColor: themeContract.colors.error,
+      borderColor: themeContract.colors.error,
+    },
+  },
+});
+
+export const textareaRecipe = recipe({
+  base: textareaBase,
+
+  variants: {
+    size: {
+      sm: {
+        fontSize: themeContract.fontSizes.xs,
+        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
+        minHeight: '60px',
+      },
+      md: {},
+      lg: {
+        fontSize: themeContract.fontSizes.md,
+        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
+        minHeight: '100px',
+      },
+    },
+    variant: {
+      default: {},
+      filled: {
+        backgroundColor: themeContract.colors.surface,
+        border: 'none',
+
+        ':focus': {
+          backgroundColor: themeContract.colors.background,
+          border: `1px solid ${themeContract.colors.primary}`,
+        },
+      },
+      outlined: {
+        backgroundColor: 'transparent',
+      },
+      underlined: {
+        backgroundColor: 'transparent',
+        border: 'none',
+        borderBottom: `1px solid ${themeContract.colors.border}`,
+        borderRadius: 0,
+        padding: `${themeContract.space.sm} 0`,
+
+        ':focus': {
+          borderBottom: `2px solid ${themeContract.colors.primary}`,
+          outline: 'none',
+        },
+      },
+    },
+    resize: {
+      vertical: {
+        resize: 'vertical',
+      },
+      horizontal: {
+        resize: 'horizontal',
+      },
+      both: {
+        resize: 'both',
+      },
+      none: {
+        resize: 'none',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+    resize: 'vertical',
+  },
+});
+
+export type TextareaVariants = RecipeVariants<typeof textareaRecipe>;

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

@@ -0,0 +1,111 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme';
+
+const headerBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  height: themeContract.header.height,
+  backgroundColor: themeContract.colors.background,
+  color: themeContract.colors.text,
+  zIndex: 30,
+  paddingLeft: themeContract.space.md,
+  paddingRight: themeContract.space.md,
+  paddingTop: themeContract.space.sm,
+  paddingBottom: themeContract.space.sm,
+  gap: themeContract.space.md,
+
+  '@media': {
+    [queries.md]: {
+      paddingLeft: themeContract.space.lg,
+      paddingRight: themeContract.space.lg,
+      gap: themeContract.space.lg,
+    },
+    [queries.lg]: {
+      paddingLeft: themeContract.space.xl,
+      paddingRight: themeContract.space.xl,
+      gap: themeContract.space.xl,
+    },
+  },
+
+  // selectors: {
+  //   '& a': {
+  //     transition: 'all 0.3s ease-in-out',
+  //     textDecoration: 'none',
+  //     color: 'inherit',
+  //   },
+  //   '& a:hover': {
+  //     opacity: '0.7',
+  //     transform: 'translateY(-1px)',
+  //   },
+  // },
+});
+
+export const headerRecipe = recipe({
+  base: headerBase,
+
+  variants: {
+    // position: {
+    //   relative: {
+    //     position: 'relative',
+    //   },
+    //   fixed: {
+    //     position: 'fixed',
+    //     top: 0,
+    //     left: 0,
+    //     right: 0,
+    //   },
+    //   sticky: {
+    //     position: 'sticky',
+    //     top: 0,
+    //   },
+    // },
+    variant: {
+      default: {
+        backgroundColor: themeContract.colors.background,
+        borderBottom: `1px solid ${themeContract.colors.border}`,
+      },
+      transparent: {
+        backgroundColor: 'transparent',
+        borderBottom: 'none',
+      },
+      dark: {
+        backgroundColor: themeContract.colors.surface,
+        color: themeContract.colors.textLight,
+      },
+    },
+    size: {
+      sm: {
+        height: '60px',
+        paddingTop: themeContract.space.xs,
+        paddingBottom: themeContract.space.xs,
+      },
+      md: {
+        height: themeContract.header.height,
+        paddingTop: themeContract.space.sm,
+        paddingBottom: themeContract.space.sm,
+      },
+      lg: {
+        height: '100px',
+        paddingTop: themeContract.space.md,
+        paddingBottom: themeContract.space.md,
+      },
+    },
+  },
+
+  defaultVariants: {
+    // position: 'relative',
+    variant: 'default',
+    size: 'md',
+  },
+});
+
+export const headerPlaceholder = style({
+  height: themeContract.header.height,
+  width: '100%',
+});
+
+export type HeaderVariants = RecipeVariants<typeof headerRecipe>;

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

@@ -0,0 +1,33 @@
+import { createVar, style, CSSProperties } from '@vanilla-extract/css';
+import { mq } from '../../../assets/styles/mediaqueries';
+
+export const vars = {
+  overlayBottom: createVar(),
+  overlayTransform: createVar(),
+};
+
+export const headerOverlayStyle = style({
+  top: 0,
+  left: 0,
+  zIndex: 40,
+  width: '100vw',
+  display: 'flex',
+  height: '100vh',
+  position: 'fixed',
+  overflow: 'hidden',
+  textAlign: 'center',
+  alignItems: 'center',
+  flexDirection: 'column',
+  transformOrigin: '0% 0%',
+  justifyContent: 'center',
+  gap: 'var(--overlayGap, 20px)', // valeur par défaut, à remplacer via assignInlineVars si nécessaire
+  bottom: vars.overlayBottom,
+  transform: vars.overlayTransform,
+  transition: 'transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0)',
+
+  '@media': {
+    [mq[0]]: { gap: 'var(--overlayGap0, 20px)' },
+    [mq[1]]: { gap: 'var(--overlayGap1, 30px)' },
+    [mq[2]]: { gap: 'var(--overlayGap2, 40px)' },
+  },
+});

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

@@ -0,0 +1,40 @@
+import { createVar, style, globalStyle } from '@vanilla-extract/css';
+
+export const vars = {
+  displayOnDesktop: createVar(),
+};
+
+export const toggleNavStyle = style({
+  border: 0,
+  width: '25px',
+  height: '12px',
+  zIndex: 60,
+  marginLeft: 0,
+  cursor: 'pointer',
+  position: 'relative',
+
+  '@media': {
+    'screen and (min-width: 1024px)': {
+      display: vars.displayOnDesktop,
+    },
+  },
+});
+
+export const toggleNavBarStyle = style({
+  height: '2px',
+  width: '25px',
+  marginBottom: '8px',
+  display: 'block',
+  position: 'relative',
+  transformOrigin: 'center center',
+  transition: 'all 0.5s ease-in-out',
+});
+
+// Style dynamique pour chaque ligne via data attribute
+globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(1)`, {
+  transform: 'rotate(45deg) translate(4px, 3px)',
+});
+
+globalStyle(`${toggleNavBarStyle}[data-open="true"]:nth-of-type(2)`, {
+  transform: 'rotate(-45deg) translate(4px, -3px)',
+});

package/src/components/Icon/Icon.css.ts

@@ -0,0 +1,102 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../theme';
+
+const iconBase = style({
+  display: 'inline-block',
+  verticalAlign: 'middle',
+  fill: 'currentColor',
+  flexShrink: 0,
+  transition: 'all 0.3s ease-in-out',
+});
+
+const iconPath = style({
+  transition: 'fill 0.3s ease-in-out',
+});
+
+export const iconRecipe = recipe({
+  base: iconBase,
+
+  variants: {
+    size: {
+      xs: {
+        width: '12px',
+        height: '12px',
+      },
+      sm: {
+        width: '16px',
+        height: '16px',
+      },
+      md: {
+        width: '24px',
+        height: '24px',
+      },
+      lg: {
+        width: '32px',
+        height: '32px',
+      },
+      xl: {
+        width: '48px',
+        height: '48px',
+      },
+      '2xl': {
+        width: '64px',
+        height: '64px',
+      },
+    },
+    // color: {
+    //   current: {
+    //     fill: 'currentColor',
+    //   },
+    //   primary: {
+    //     fill: themeContract.colors.primary,
+    //   },
+    //   secondary: {
+    //     fill: themeContract.colors.secondary,
+    //   },
+    //   accent: {
+    //     fill: themeContract.colors.accent,
+    //   },
+    //   text: {
+    //     fill: themeContract.colors.text,
+    //   },
+    //   textSecondary: {
+    //     fill: themeContract.colors.textSecondary,
+    //   },
+    //   error: {
+    //     fill: themeContract.colors.error,
+    //   },
+    //   success: {
+    //     fill: themeContract.colors.success,
+    //   },
+    //   warning: {
+    //     fill: themeContract.colors.warning,
+    //   },
+    //   info: {
+    //     fill: themeContract.colors.info,
+    //   },
+    // },
+    interactive: {
+      true: {
+        cursor: 'pointer',
+        ':hover': {
+          transform: 'scale(1.1)',
+          opacity: 0.8,
+        },
+        ':active': {
+          transform: 'scale(0.95)',
+        },
+      },
+      false: {},
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    // color: 'current',
+    interactive: false,
+  },
+});
+
+export { iconPath };
+export type IconVariants = RecipeVariants<typeof iconRecipe>;