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

package/dist/components/LanguageSwitcher/LanguageSwitcher.css.ts

@@ -1,120 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-const languageSwitcherBase = style({
-  position: 'relative',
-  display: 'inline-flex',
-  alignItems: 'center',
-});
-
-const languageSwitcherSelect = style({
-  appearance: 'none',
-  background: 'transparent',
-  border: `1px solid ${themeContract.colors.border}`,
-  borderRadius: themeContract.radii.md,
-  padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-  paddingRight: themeContract.space.xl,
-  fontSize: themeContract.fontSizes.sm,
-  fontFamily: themeContract.fonts.body,
-  color: themeContract.colors.text,
-  cursor: 'pointer',
-  transition: 'all 0.3s ease-in-out',
-  minWidth: '120px',
-
-  // ':hover': {
-  //   borderColor: themeContract.colors.primary,
-  //   backgroundColor: themeContract.colors.surface,
-  // },
-
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  //   borderColor: themeContract.colors.primary,
-  // },
-
-  // ':disabled': {
-  //   opacity: '0.5',
-  //   cursor: 'not-allowed',
-  // },
-});
-
-const languageSwitcherIcon = style({
-  position: 'absolute',
-  right: themeContract.space.sm,
-  top: '50%',
-  transform: 'translateY(-50%)',
-  pointerEvents: 'none',
-  color: themeContract.colors.textSecondary,
-  transition: 'transform 0.2s ease-in-out',
-
-  // selectors: {
-  //   [`${languageSwitcherSelect}:focus + &`]: {
-  //     color: themeContract.colors.primary,
-  //     transform: 'translateY(-50%) rotate(180deg)',
-  //   },
-  // },
-});
-
-export const languageSwitcherRecipe = recipe({
-  base: languageSwitcherBase,
-
-  variants: {
-    variant: {
-      default: {},
-      minimal: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     border: 'none',
-        //     borderRadius: 0,
-        //     borderBottom: `1px solid ${themeContract.colors.border}`,
-        //     paddingLeft: 0,
-        //     paddingRight: themeContract.space.lg,
-        //     backgroundColor: 'transparent',
-        //   },
-        // },
-      },
-      outlined: {},
-      filled: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     backgroundColor: themeContract.colors.surface,
-        //     border: 'none',
-        //   },
-        // },
-      },
-    },
-    size: {
-      sm: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-        //     paddingRight: themeContract.space.lg,
-        //     fontSize: themeContract.fontSizes.xs,
-        //     minWidth: '100px',
-        //   },
-        // },
-      },
-      md: {},
-      lg: {
-        // selectors: {
-        //   [`& .${languageSwitcherSelect}`]: {
-        //     padding: `${themeContract.space.md} ${themeContract.space.lg}`,
-        //     paddingRight: '48px',
-        //     fontSize: themeContract.fontSizes.md,
-        //     minWidth: '140px',
-        //   },
-        // },
-      },
-    },
-  },
-
-  defaultVariants: {
-    variant: 'default',
-    size: 'md',
-  },
-});
-
-export { languageSwitcherSelect, languageSwitcherIcon };
-export type LanguageSwitcherVariants = RecipeVariants<typeof languageSwitcherRecipe>;

package/dist/components/Logo/Logo.css.ts

@@ -1,98 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-const logoBase = style({
-  display: 'inline-block',
-
-  // selectors: {
-  //   '& img': {
-  //     width: '100%',
-  //     height: 'auto',
-  //     maxWidth: '100%',
-  //     display: 'block',
-  //   },
-  //   '& svg': {
-  //     width: '100%',
-  //     height: 'auto',
-  //     maxWidth: '100%',
-  //     display: 'block',
-  //     fill: 'currentColor',
-  //   },
-  // },
-});
-
-export const logoRecipe = recipe({
-  base: logoBase,
-
-  variants: {
-    size: {
-      xs: {
-        width: '80px',
-        height: 'auto',
-      },
-      sm: {
-        width: '120px',
-        height: 'auto',
-      },
-      md: {
-        width: '160px',
-        height: 'auto',
-      },
-      lg: {
-        width: '200px',
-        height: 'auto',
-      },
-      xl: {
-        width: '240px',
-        height: 'auto',
-      },
-      auto: {
-        width: 'auto',
-        height: 'auto',
-      },
-    },
-    variant: {
-      default: {},
-      link: {
-        cursor: 'pointer',
-        transition: 'all 0.3s ease-in-out',
-
-        ':hover': {
-          opacity: '0.8',
-          transform: 'scale(1.05)',
-        },
-
-        ':focus': {
-          outline: '2px solid',
-          outlineColor: themeContract.colors.primary,
-          outlineOffset: '2px',
-          borderRadius: themeContract.radii.sm,
-        },
-      },
-    },
-    responsive: {
-      true: {
-        maxWidth: '100%',
-        height: 'auto',
-
-        // selectors: {
-        //   '& img, & svg': {
-        //     width: '100%',
-        //     height: 'auto',
-        //     maxWidth: '100%',
-        //   },
-        // },
-      },
-      false: {},
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    variant: 'default',
-    responsive: true,
-  },
-});
-
-export type LogoVariants = RecipeVariants<typeof logoRecipe>;

package/dist/components/Main/Main.css.ts

@@ -1,62 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { themeContract } from '../../theme';
-
-const mainBase = style({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  justifyContent: 'flex-start',
-  width: '100%',
-  minHeight: '100vh',
-  maxWidth: themeContract.maxWidth,
-  margin: '0 auto',
-  paddingTop: themeContract.header.height,
-  paddingBottom: themeContract.footer.height,
-  backgroundColor: themeContract.colors.background,
-  color: themeContract.colors.text,
-  fontFamily: themeContract.fonts.body,
-});
-
-export const mainRecipe = recipe({
-  base: mainBase,
-
-  variants: {
-    centered: {
-      true: {
-        justifyContent: 'center',
-        alignItems: 'center',
-      },
-      false: {
-        justifyContent: 'flex-start',
-        alignItems: 'stretch',
-      },
-    },
-    fullWidth: {
-      true: {
-        maxWidth: '100%',
-      },
-      false: {
-        maxWidth: themeContract.maxWidth,
-      },
-    },
-    noPadding: {
-      true: {
-        paddingTop: '0',
-        paddingBottom: '0',
-      },
-      false: {
-        paddingTop: themeContract.header.height,
-        paddingBottom: themeContract.footer.height,
-      },
-    },
-  },
-
-  defaultVariants: {
-    centered: false,
-    fullWidth: false,
-    noPadding: false,
-  },
-});
-
-export type MainVariants = RecipeVariants<typeof mainRecipe>;

package/dist/components/Modal/Modal.css.ts

@@ -1,203 +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';
-
-const fadeIn = keyframes({
-  from: { opacity: '0' },
-  to: { opacity: '1' },
-});
-
-const slideIn = keyframes({
-  from: {
-    opacity: '0',
-    transform: 'translate(-50%, -60%) scale(0.95)',
-  },
-  to: {
-    opacity: '1',
-    transform: 'translate(-50%, -50%) scale(1)',
-  },
-});
-
-const modalOverlay = style({
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: 50,
-  backgroundColor: 'rgba(0, 0, 0, 0.5)',
-  backdropFilter: 'blur(4px)',
-  animation: `${fadeIn} 0.2s ease-out`,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: themeContract.space.md,
-  overflowY: 'auto',
-});
-
-const modalContent = style({
-  position: 'relative',
-  backgroundColor: themeContract.colors.background,
-  borderRadius: themeContract.radii.lg,
-  boxShadow: themeContract.shadows.xl,
-  border: `1px solid ${themeContract.colors.border}`,
-  maxHeight: '90vh',
-  maxWidth: '90vw',
-  width: '100%',
-  overflowY: 'auto',
-  animation: `${slideIn} 0.3s ease-out`,
-
-  '@media': {
-    [queries.sm]: {
-      maxWidth: '500px',
-    },
-    [queries.md]: {
-      maxWidth: '600px',
-    },
-    [queries.lg]: {
-      maxWidth: '800px',
-    },
-  },
-});
-
-const modalCloseButton = style({
-  position: 'absolute',
-  top: themeContract.space.md,
-  right: themeContract.space.md,
-  zIndex: 10,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  width: '32px',
-  height: '32px',
-  border: 'none',
-  borderRadius: themeContract.radii.full,
-  backgroundColor: themeContract.colors.surface,
-  color: themeContract.colors.text,
-  cursor: 'pointer',
-  transition: 'all 0.2s ease-in-out',
-
-  // ':hover': {
-  //   backgroundColor: themeContract.colors.error,
-  //   color: themeContract.colors.background,
-  //   transform: 'scale(1.1)',
-  // },
-
-  // ':focus': {
-  //   outline: '2px solid',
-  //   outlineColor: themeContract.colors.primary,
-  //   outlineOffset: '2px',
-  // },
-});
-
-export const modalRecipe = recipe({
-  base: modalOverlay,
-
-  variants: {
-    size: {
-      sm: {},
-      md: {},
-      lg: {},
-      xl: {},
-      full: {
-        padding: 0,
-
-        // selectors: {
-        //   '& > div': {
-        //     width: '100vw',
-        //     height: '100vh',
-        //     maxWidth: 'none',
-        //     maxHeight: 'none',
-        //     borderRadius: 0,
-        //   },
-        // },
-      },
-    },
-    centered: {
-      true: {
-        alignItems: 'center',
-        justifyContent: 'center',
-      },
-      false: {
-        alignItems: 'flex-start',
-        justifyContent: 'center',
-        paddingTop: '5vh',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    centered: true,
-  },
-});
-
-export const modalContentRecipe = recipe({
-  base: modalContent,
-
-  variants: {
-    size: {
-      sm: {
-        padding: themeContract.space.md,
-        '@media': {
-          [queries.sm]: {
-            maxWidth: '400px',
-          },
-        },
-      },
-      md: {
-        padding: themeContract.space.lg,
-        '@media': {
-          [queries.sm]: {
-            maxWidth: '500px',
-          },
-        },
-      },
-      lg: {
-        padding: themeContract.space.xl,
-        '@media': {
-          [queries.md]: {
-            maxWidth: '700px',
-          },
-        },
-      },
-      xl: {
-        padding: themeContract.space.xl,
-        '@media': {
-          [queries.lg]: {
-            maxWidth: '900px',
-          },
-        },
-      },
-      full: {
-        width: '100vw',
-        height: '100vh',
-        maxWidth: 'none',
-        maxHeight: 'none',
-        borderRadius: 0,
-        padding: themeContract.space.xl,
-      },
-    },
-    align: {
-      left: {
-        textAlign: 'left',
-      },
-      center: {
-        textAlign: 'center',
-      },
-      right: {
-        textAlign: 'right',
-      },
-    },
-  },
-
-  defaultVariants: {
-    size: 'md',
-    align: 'left',
-  },
-});
-
-export { modalCloseButton };
-export type ModalVariants = RecipeVariants<typeof modalRecipe>;
-export type ModalContentVariants = RecipeVariants<typeof modalContentRecipe>;

package/dist/components/Nav/Nav.css.ts

@@ -1,123 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
-import { queries } from '../../styles/mediaqueries';
-import { themeContract } from '../../theme';
-
-const navBase = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: themeContract.space.md,
-  flexDirection: 'column',
-
-  '@media': {
-    [queries.md]: {
-      flexDirection: 'row',
-      gap: themeContract.space.lg,
-    },
-    [queries.lg]: {
-      gap: themeContract.space.xl,
-    },
-  },
-
-  // selectors: {
-  //   '& a': {
-  //     textDecoration: 'none',
-  //     color: 'inherit',
-  //     transition: 'all 0.3s ease-in-out',
-  //     display: 'block',
-  //     padding: `${themeContract.space.xs} ${themeContract.space.sm}`,
-  //     borderRadius: themeContract.radii.sm,
-  //   },
-  //   '& a:hover': {
-  //     backgroundColor: themeContract.colors.surface,
-  //     transform: 'translateY(-1px)',
-  //   },
-  //   '& a:focus': {
-  //     outline: '2px solid',
-  //     outlineColor: themeContract.colors.primary,
-  //     outlineOffset: '2px',
-  //   },
-  //   '& a[aria-current="page"]': {
-  //     backgroundColor: themeContract.colors.primary,
-  //     color: themeContract.colors.background,
-  //   },
-  // },
-});
-
-export const navRecipe = recipe({
-  base: navBase,
-
-  variants: {
-    orientation: {
-      horizontal: {
-        flexDirection: 'row',
-        alignItems: 'center',
-      },
-      vertical: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-      },
-      responsive: {
-        flexDirection: 'column',
-        alignItems: 'flex-start',
-
-        '@media': {
-          [queries.md]: {
-            flexDirection: 'row',
-            alignItems: 'center',
-          },
-        },
-      },
-    },
-    variant: {
-      default: {
-        gap: themeContract.space.md,
-      },
-      compact: {
-        gap: themeContract.space.sm,
-
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.xs} ${themeContract.space.xs}`,
-        //     fontSize: themeContract.fontSizes.sm,
-        //   },
-        // },
-      },
-      spacious: {
-        gap: themeContract.space.lg,
-
-        // selectors: {
-        //   '& a': {
-        //     padding: `${themeContract.space.sm} ${themeContract.space.md}`,
-        //     fontSize: themeContract.fontSizes.lg,
-        //   },
-        // },
-      },
-    },
-    justify: {
-      start: {
-        justifyContent: 'flex-start',
-      },
-      center: {
-        justifyContent: 'center',
-      },
-      end: {
-        justifyContent: 'flex-end',
-      },
-      between: {
-        justifyContent: 'space-between',
-      },
-      around: {
-        justifyContent: 'space-around',
-      },
-    },
-  },
-
-  defaultVariants: {
-    orientation: 'responsive',
-    variant: 'default',
-    justify: 'start',
-  },
-});
-
-export type NavVariants = RecipeVariants<typeof navRecipe>;