@latte-macchiat-io/latte-vanilla-components 0.0.166 → 0.0.168

package/src/components/ConsentCookie/ConsentCookie.css.ts

@@ -0,0 +1,167 @@
+import { keyframes, style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme/contract.css';
+
+const fadeIn = keyframes({
+  from: { opacity: '0' },
+  to: { opacity: '1' },
+});
+
+const slideUp = keyframes({
+  from: {
+    opacity: '0',
+    transform: 'translateY(100%)',
+  },
+  to: {
+    opacity: '1',
+    transform: 'translateY(0)',
+  },
+});
+
+const consentOverlay = style({
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 100,
+  animation: `${fadeIn} 0.3s ease-out`,
+
+  '::before': {
+    content: '""',
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    backdropFilter: 'blur(2px)',
+    opacity: 0.8,
+  },
+});
+
+const consentContent = style({
+  // position: 'fixed',
+  bottom: themeContract.space.md,
+  right: themeContract.space.md,
+  zIndex: 20,
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: themeContract.colors.background,
+  border: `1px solid ${themeContract.colors.border}`,
+  borderRadius: themeContract.radii.lg,
+  boxShadow: themeContract.shadows.xl,
+  padding: themeContract.space.lg,
+  width: '300px',
+  maxWidth: 'calc(100vw - 32px)',
+  animation: `${slideUp} 0.3s ease-out`,
+
+  '@media': {
+    [queries.sm]: {
+      width: '400px',
+    },
+    [queries.md]: {
+      width: '500px',
+      padding: themeContract.space.xl,
+    },
+  },
+});
+
+const consentActions = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-end',
+  gap: themeContract.space.md,
+  marginTop: themeContract.space.lg,
+  flexWrap: 'wrap',
+
+  '@media': {
+    [queries.sm]: {
+      flexWrap: 'nowrap',
+    },
+  },
+});
+
+export const consentRecipe = recipe({
+  base: consentOverlay,
+
+  variants: {
+    // position: {
+    //   'bottom-right': {},
+    //   'bottom-left': {
+    //     // selectors: {
+    //     //   '& > div': {
+    //     //     left: themeContract.space.md,
+    //     //     right: 'auto',
+    //     //   },
+    //     // },
+    //   },
+    //   'bottom-center': {
+    //     // selectors: {
+    //     //   '& > div': {
+    //     //     left: '50%',
+    //     //     right: 'auto',
+    //     //     transform: 'translateX(-50%)',
+    //     //   },
+    //     // },
+    //   },
+    //   'top-right': {
+    //     // selectors: {
+    //     //   '& > div': {
+    //     //     top: themeContract.space.md,
+    //     //     bottom: 'auto',
+    //     //   },
+    //     // },
+    //   },
+    //   'top-left': {
+    //     // selectors: {
+    //     //   '& > div': {
+    //     //     top: themeContract.space.md,
+    //     //     bottom: 'auto',
+    //     //     left: themeContract.space.md,
+    //     //     right: 'auto',
+    //     //   },
+    //     // },
+    //   },
+    //   'top-center': {
+    //     // selectors: {
+    //     //   '& > div': {
+    //     //     top: themeContract.space.md,
+    //     //     bottom: 'auto',
+    //     //     left: '50%',
+    //     //     right: 'auto',
+    //     //     transform: 'translateX(-50%)',
+    //     //   },
+    //     // },
+    //   },
+    // },
+    variant: {
+      modal: {},
+      banner: {
+        '::before': {
+          display: 'none',
+        },
+
+        // selectors: {
+        //   '& > div': {
+        //     position: 'static',
+        //     width: '100%',
+        //     maxWidth: 'none',
+        //     borderRadius: 0,
+        //     bottom: 'auto',
+        //     right: 'auto',
+        //   },
+        // },
+      },
+    },
+  },
+
+  defaultVariants: {
+    // position: 'bottom-right',
+    variant: 'modal',
+  },
+});
+
+export { consentContent, consentActions };
+export type ConsentCookieVariants = RecipeVariants<typeof consentRecipe>;

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

@@ -0,0 +1,108 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme/contract.css';
+
+const footerBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  flexDirection: 'column',
+  backgroundColor: themeContract.colors.background,
+  color: themeContract.colors.text,
+  zIndex: 20,
+  paddingLeft: themeContract.space.md,
+  paddingRight: themeContract.space.md,
+  paddingTop: themeContract.space.lg,
+  paddingBottom: themeContract.space.lg,
+  gap: themeContract.space.md,
+  fontSize: themeContract.fontSizes.sm,
+  borderTop: `1px solid ${themeContract.colors.border}`,
+
+  '@media': {
+    [queries.md]: {
+      paddingLeft: themeContract.space.lg,
+      paddingRight: themeContract.space.lg,
+      gap: themeContract.space.lg,
+    },
+    [queries.lg]: {
+      flexDirection: 'row',
+      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 footerRecipe = recipe({
+  base: footerBase,
+
+  variants: {
+    variant: {
+      default: {
+        backgroundColor: themeContract.colors.background,
+        borderTop: `1px solid ${themeContract.colors.border}`,
+      },
+      dark: {
+        backgroundColor: themeContract.colors.surface,
+        color: themeContract.colors.textLight,
+        borderTop: `1px solid ${themeContract.colors.border}`,
+      },
+      minimal: {
+        backgroundColor: 'transparent',
+        borderTop: 'none',
+      },
+    },
+    size: {
+      sm: {
+        paddingTop: themeContract.space.md,
+        paddingBottom: themeContract.space.md,
+        fontSize: themeContract.fontSizes.xs,
+      },
+      md: {
+        paddingTop: themeContract.space.lg,
+        paddingBottom: themeContract.space.lg,
+        fontSize: themeContract.fontSizes.sm,
+      },
+      lg: {
+        paddingTop: themeContract.space.xl,
+        paddingBottom: themeContract.space.xl,
+        fontSize: themeContract.fontSizes.md,
+      },
+    },
+    layout: {
+      stacked: {
+        flexDirection: 'column',
+        textAlign: 'center',
+      },
+      horizontal: {
+        '@media': {
+          [queries.sm]: {
+            flexDirection: 'row',
+            textAlign: 'left',
+          },
+        },
+      },
+    },
+  },
+
+  defaultVariants: {
+    variant: 'default',
+    size: 'md',
+    layout: 'horizontal',
+  },
+});
+
+export type FooterVariants = RecipeVariants<typeof footerRecipe>;

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

@@ -0,0 +1,64 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../theme';
+
+const formBase = style({
+  width: '100%',
+  backgroundColor: 'transparent',
+});
+
+export const formRecipe = recipe({
+  base: formBase,
+
+  variants: {
+    spacing: {
+      none: {
+        gap: 0,
+      },
+      sm: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: themeContract.space.sm,
+      },
+      md: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: themeContract.space.md,
+      },
+      lg: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: themeContract.space.lg,
+      },
+      xl: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: themeContract.space.xl,
+      },
+    },
+    layout: {
+      stacked: {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      inline: {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'flex-end',
+      },
+      grid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+        gap: themeContract.space.md,
+      },
+    },
+  },
+
+  defaultVariants: {
+    spacing: 'md',
+    layout: 'stacked',
+  },
+});
+
+export type FormVariants = RecipeVariants<typeof formRecipe>;

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

@@ -0,0 +1,70 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../theme/contract.css';
+
+const rowBase = style({
+  display: 'flex',
+  width: '100%',
+});
+
+export const rowRecipe = recipe({
+  base: rowBase,
+
+  variants: {
+    align: {
+      left: {
+        justifyContent: 'flex-start',
+        textAlign: 'left',
+      },
+      center: {
+        justifyContent: 'center',
+        textAlign: 'center',
+      },
+      right: {
+        justifyContent: 'flex-end',
+        textAlign: 'right',
+      },
+    },
+    variant: {
+      default: {
+        flexDirection: 'column',
+        gap: themeContract.space.sm,
+      },
+      actions: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: themeContract.space.md,
+        marginTop: themeContract.space.lg,
+      },
+      message: {
+        flexDirection: 'column',
+        padding: themeContract.space.md,
+        backgroundColor: themeContract.colors.surface,
+        borderRadius: themeContract.radii.md,
+        border: `1px solid ${themeContract.colors.border}`,
+      },
+    },
+    spacing: {
+      none: {
+        gap: 0,
+      },
+      sm: {
+        gap: themeContract.space.sm,
+      },
+      md: {
+        gap: themeContract.space.md,
+      },
+      lg: {
+        gap: themeContract.space.lg,
+      },
+    },
+  },
+
+  defaultVariants: {
+    align: 'left',
+    variant: 'default',
+    spacing: 'sm',
+  },
+});
+
+export type RowVariants = RecipeVariants<typeof rowRecipe>;

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

@@ -0,0 +1,106 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../../../theme/contract.css';
+
+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,
+  //   },
+  //   // WebKit autofill styles
+  //   '&:-webkit-autofill': {
+  //     WebkitTextFillColor: themeContract.colors.text,
+  //     WebkitBoxShadow: `0 0 0px 1000px ${themeContract.colors.background} inset`,
+  //   },
+  // },
+});
+
+export const inputRecipe = recipe({
+  base: inputBase,
+
+  variants: {
+    size: {
+      sm: {
+        fontSize: themeContract.fontSizes.xs,
+        padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
+      },
+      md: {},
+      lg: {
+        fontSize: themeContract.fontSizes.md,
+        padding: `${themeContract.space.md} ${themeContract.space.lg}`,
+      },
+    },
+    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',
+        // },
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+});
+
+export type InputVariants = RecipeVariants<typeof inputRecipe>;

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>;