@latte-macchiat-io/latte-vanilla-components 0.0.176 → 0.0.177

package/dist/components/ConsentCookie/ConsentCookie.css.ts

@@ -1,167 +0,0 @@
-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/dist/components/Footer/Footer.css.ts

@@ -1,108 +0,0 @@
-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/dist/components/Form/Form.css.ts

@@ -1,64 +0,0 @@
-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/dist/components/Form/Row/Row.css.ts

@@ -1,70 +0,0 @@
-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/dist/components/Form/TextField/Input/Input.css.ts

@@ -1,106 +0,0 @@
-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/dist/components/Form/TextField/Label/Label.css.ts

@@ -1,58 +0,0 @@
-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>;