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

package/dist/components/NavLegal/NavLegal.css.ts

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

package/dist/components/NavSocial/NavSocial.css.ts

@@ -0,0 +1,121 @@
+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 navSocialBase = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: themeContract.space.md,
+
+  '@media': {
+    [queries.md]: {
+      gap: themeContract.space.lg,
+    },
+  },
+});
+
+const navSocialLink = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  textDecoration: 'none',
+  color: 'inherit',
+  transition: 'all 0.3s ease-in-out',
+  borderRadius: themeContract.radii.full,
+  padding: themeContract.space.xs,
+
+  // ':hover': {
+  //   transform: 'translateY(-2px) scale(1.1)',
+  //   color: themeContract.colors.primary,
+  // },
+
+  // ':focus': {
+  //   outline: '2px solid',
+  //   outlineColor: themeContract.colors.primary,
+  //   outlineOffset: '2px',
+  // },
+
+  // ':active': {
+  //   transform: 'translateY(0) scale(1.05)',
+  // },
+});
+
+export const navSocialRecipe = recipe({
+  base: navSocialBase,
+
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: 'row',
+      },
+      vertical: {
+        flexDirection: 'column',
+      },
+    },
+    size: {
+      sm: {
+        gap: themeContract.space.sm,
+
+        // selectors: {
+        //   [`& .${navSocialLink}`]: {
+        //     padding: themeContract.space.xs,
+        //   },
+        // },
+      },
+      md: {
+        gap: themeContract.space.md,
+      },
+      lg: {
+        gap: themeContract.space.lg,
+
+        // selectors: {
+        //   [`& .${navSocialLink}`]: {
+        //     padding: themeContract.space.sm,
+        //   },
+        // },
+      },
+    },
+    variant: {
+      default: {},
+      rounded: {
+        // selectors: {
+        //   [`& .${navSocialLink}`]: {
+        //     backgroundColor: themeContract.colors.surface,
+        //     borderRadius: themeContract.radii.full,
+        //     width: '40px',
+        //     height: '40px',
+        //   },
+        //   [`& .${navSocialLink}:hover`]: {
+        //     backgroundColor: themeContract.colors.primary,
+        //     color: themeContract.colors.background,
+        //   },
+        // },
+      },
+      outlined: {
+        // selectors: {
+        //   [`& .${navSocialLink}`]: {
+        //     border: `1px solid ${themeContract.colors.border}`,
+        //     borderRadius: themeContract.radii.md,
+        //     width: '40px',
+        //     height: '40px',
+        //   },
+        //   [`& .${navSocialLink}:hover`]: {
+        //     borderColor: themeContract.colors.primary,
+        //     backgroundColor: themeContract.colors.primary,
+        //     color: themeContract.colors.background,
+        //   },
+        // },
+      },
+    },
+  },
+
+  defaultVariants: {
+    orientation: 'horizontal',
+    size: 'md',
+    variant: 'default',
+  },
+});
+
+export { navSocialLink };
+export type NavSocialVariants = RecipeVariants<typeof navSocialRecipe>;

package/dist/components/Section/Section.css.ts

@@ -0,0 +1,101 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../theme';
+
+const sectionBase = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  paddingTop: themeContract.section.paddingTop,
+  paddingBottom: themeContract.section.paddingBottom,
+  paddingLeft: themeContract.space.md,
+  paddingRight: themeContract.space.md,
+  maxWidth: themeContract.maxWidth,
+  margin: '0 auto',
+  position: 'relative',
+
+  '@media': {
+    'screen and (min-width: 768px)': {
+      paddingLeft: themeContract.space.lg,
+      paddingRight: themeContract.space.lg,
+    },
+    'screen and (min-width: 1024px)': {
+      paddingLeft: themeContract.space.xl,
+      paddingRight: themeContract.space.xl,
+    },
+  },
+});
+
+export const sectionRecipe = recipe({
+  base: sectionBase,
+
+  variants: {
+    align: {
+      left: {
+        textAlign: 'left',
+        alignItems: 'flex-start',
+      },
+      center: {
+        textAlign: 'center',
+        alignItems: 'center',
+      },
+      right: {
+        textAlign: 'right',
+        alignItems: 'flex-end',
+      },
+    },
+    isDark: {
+      true: {
+        backgroundColor: themeContract.colors.surface,
+        color: themeContract.colors.textLight,
+      },
+      false: {
+        backgroundColor: themeContract.colors.background,
+        color: themeContract.colors.text,
+      },
+    },
+    isFullHeight: {
+      true: {
+        minHeight: '100vh',
+        justifyContent: 'center',
+      },
+      false: {
+        minHeight: 'auto',
+        justifyContent: 'flex-start',
+      },
+    },
+    spacing: {
+      none: {
+        paddingTop: '0',
+        paddingBottom: '0',
+      },
+      sm: {
+        paddingTop: themeContract.space.md,
+        paddingBottom: themeContract.space.md,
+      },
+      md: {
+        paddingTop: themeContract.section.paddingTop,
+        paddingBottom: themeContract.section.paddingBottom,
+      },
+      lg: {
+        paddingTop: themeContract.space.xl,
+        paddingBottom: themeContract.space.xl,
+      },
+      xl: {
+        paddingTop: themeContract.space['2xl'],
+        paddingBottom: themeContract.space['2xl'],
+      },
+    },
+  },
+
+  defaultVariants: {
+    align: 'left',
+    isDark: false,
+    isFullHeight: false,
+    spacing: 'md',
+  },
+});
+
+export type SectionVariants = RecipeVariants<typeof sectionRecipe>;

package/dist/components/Video/Video.css.ts

@@ -0,0 +1,210 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../theme/contract.css';
+
+const videoBase = style({
+  position: 'relative',
+  overflow: 'hidden',
+  backgroundColor: themeContract.colors.background,
+});
+
+const videoElement = style({
+  top: '50%',
+  left: '50%',
+  width: 'auto',
+  minWidth: '100%',
+  minHeight: '100%',
+  position: 'absolute',
+  transform: 'translate(-50%, -50%)',
+});
+
+const videoPoster = style({
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  position: 'absolute',
+  opacity: 1,
+  transition: 'opacity 0.3s ease-in-out',
+  pointerEvents: 'auto',
+
+  // selectors: {
+  //   '&[data-playing="true"]': {
+  //     opacity: 0,
+  //     pointerEvents: 'none',
+  //   },
+  // },
+});
+
+const posterImage = style({
+  width: '100%',
+  height: '100%',
+  minWidth: '100%',
+  minHeight: '100%',
+  objectFit: 'cover',
+});
+
+const playButton = style({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  border: 'none',
+  borderRadius: themeContract.radii.full,
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  color: themeContract.colors.background,
+  cursor: 'pointer',
+  transition: 'all 0.3s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  opacity: 1,
+  pointerEvents: 'auto',
+
+  ':hover': {
+    backgroundColor: 'rgba(0, 0, 0, 0.9)',
+    transform: 'translate(-50%, -50%) scale(1.1)',
+  },
+
+  ':focus': {
+    outline: '2px solid',
+    outlineColor: themeContract.colors.primary,
+    outlineOffset: '2px',
+  },
+
+  // selectors: {
+  //   '&[data-playing="true"]': {
+  //     opacity: 0,
+  //     pointerEvents: 'none',
+  //   },
+  //   '&[data-hidden="true"]': {
+  //     display: 'none',
+  //   },
+  // },
+});
+
+const controlButton = style({
+  position: 'absolute',
+  border: 'none',
+  borderRadius: themeContract.radii.md,
+  backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  color: themeContract.colors.background,
+  cursor: 'pointer',
+  transition: 'all 0.3s ease-in-out',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+
+  // ':hover': {
+  //   backgroundColor: 'rgba(0, 0, 0, 0.9)',
+  // },
+
+  // ':focus': {
+  //   outline: '2px solid',
+  //   outlineColor: themeContract.colors.primary,
+  //   outlineOffset: '2px',
+  // },
+});
+
+const closeButton = style([
+  controlButton,
+  {
+    top: themeContract.space.md,
+    right: themeContract.space.md,
+    width: '40px',
+    height: '40px',
+
+    '@media': {
+      'screen and (min-width: 768px)': {
+        width: '48px',
+        height: '48px',
+        top: themeContract.space.lg,
+        right: themeContract.space.lg,
+      },
+    },
+  },
+]);
+
+const pauseButton = style([
+  controlButton,
+  {
+    bottom: themeContract.space.md,
+    right: '80px',
+    width: '40px',
+    height: '40px',
+
+    '@media': {
+      'screen and (min-width: 768px)': {
+        width: '48px',
+        height: '48px',
+        bottom: themeContract.space.lg,
+        right: '100px',
+      },
+    },
+  },
+]);
+
+const soundButton = style([
+  controlButton,
+  {
+    bottom: themeContract.space.md,
+    right: themeContract.space.md,
+    width: '40px',
+    height: '40px',
+
+    '@media': {
+      'screen and (min-width: 768px)': {
+        width: '48px',
+        height: '48px',
+        bottom: themeContract.space.lg,
+        right: themeContract.space.lg,
+      },
+    },
+  },
+]);
+
+export const videoRecipe = recipe({
+  base: videoBase,
+
+  variants: {
+    size: {
+      sm: {
+        width: '300px',
+        height: '200px',
+      },
+      md: {
+        width: '500px',
+        height: '300px',
+      },
+      lg: {
+        width: '800px',
+        height: '450px',
+      },
+      fullWidth: {
+        width: '100vw',
+        height: 0,
+        paddingBottom: '56.25%', // 16:9 aspect ratio
+        position: 'relative',
+      },
+    },
+    aspectRatio: {
+      '16:9': {
+        aspectRatio: '16/9',
+      },
+      '4:3': {
+        aspectRatio: '4/3',
+      },
+      '1:1': {
+        aspectRatio: '1/1',
+      },
+    },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    aspectRatio: '16:9',
+  },
+});
+
+export { videoElement, videoPoster, posterImage, playButton, closeButton, pauseButton, soundButton };
+export type VideoVariants = RecipeVariants<typeof videoRecipe>;

package/dist/components/VideoFullWidth/VideoFullWidth.css.ts

@@ -0,0 +1,50 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { themeContract } from '../../theme/contract.css';
+
+const videoFullWidthBase = style({
+  height: 0,
+  width: '100vw',
+  overflow: 'hidden',
+  position: 'relative',
+  paddingBottom: '56.25%', // 16:9 aspect ratio
+  backgroundColor: themeContract.colors.background,
+
+  // Break out of container padding
+  marginLeft: `calc(-50vw + 50%)`,
+  marginRight: `calc(-50vw + 50%)`,
+
+  '@media': {
+    'screen and (min-width: 768px)': {
+      marginLeft: `calc(-50vw + 50%)`,
+      marginRight: `calc(-50vw + 50%)`,
+    },
+  },
+});
+
+export const videoFullWidthRecipe = recipe({
+  base: videoFullWidthBase,
+
+  variants: {
+    aspectRatio: {
+      '16:9': {
+        paddingBottom: '56.25%',
+      },
+      '4:3': {
+        paddingBottom: '75%',
+      },
+      '1:1': {
+        paddingBottom: '100%',
+      },
+      '21:9': {
+        paddingBottom: '42.86%',
+      },
+    },
+  },
+
+  defaultVariants: {
+    aspectRatio: '16:9',
+  },
+});
+
+export type VideoFullWidthVariants = RecipeVariants<typeof videoFullWidthRecipe>;

package/dist/styles/sprinkles.css.ts

@@ -0,0 +1,82 @@
+import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
+import { queries } from './mediaqueries';
+import { themeContract } from '../theme';
+
+const responsiveProperties = defineProperties({
+  conditions: {
+    mobile: {},
+    sm: { '@media': queries.sm },
+    md: { '@media': queries.md },
+    lg: { '@media': queries.lg },
+    xl: { '@media': queries.xl },
+    '2xl': { '@media': queries['2xl'] },
+  },
+  defaultCondition: 'mobile',
+
+  properties: {
+    // Spacing
+    padding: themeContract.space,
+    paddingTop: themeContract.space,
+    paddingBottom: themeContract.space,
+    paddingLeft: themeContract.space,
+    paddingRight: themeContract.space,
+    margin: themeContract.space,
+    marginTop: themeContract.space,
+    marginBottom: themeContract.space,
+    marginLeft: themeContract.space,
+    marginRight: themeContract.space,
+    gap: themeContract.space,
+
+    // Layout
+    display: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid'],
+    flexDirection: ['row', 'column', 'row-reverse', 'column-reverse'],
+    // alignItems: ['stretch', 'flex-start', 'center', 'flex-end', 'baseline'],
+    justifyContent: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
+    flexWrap: ['nowrap', 'wrap', 'wrap-reverse'],
+    flex: ['1', 'auto', 'initial', 'none'],
+
+    // Dimensions
+    width: ['auto', '100%', '50%', '33.333333%', '25%', 'fit-content', 'min-content', 'max-content'],
+    height: ['auto', '100%', '100vh', 'fit-content', 'min-content', 'max-content'],
+    minWidth: ['0', '100%', 'fit-content', 'min-content', 'max-content'],
+    maxWidth: [themeContract.maxWidth],
+    minHeight: ['0', '100%', '100vh'],
+
+    // Position
+    position: ['static', 'relative', 'absolute', 'fixed', 'sticky'],
+    top: themeContract.space,
+    bottom: themeContract.space,
+    left: themeContract.space,
+    right: themeContract.space,
+    zIndex: [0, 10, 20, 30, 40, 50],
+
+    // Typography
+    fontSize: themeContract.fontSizes,
+    fontFamily: themeContract.fonts,
+    lineHeight: themeContract.lineHeights,
+    textAlign: ['left', 'center', 'right', 'justify'],
+    fontWeight: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
+
+    // Colors
+    color: themeContract.colors,
+    backgroundColor: themeContract.colors,
+
+    // Border
+    borderRadius: themeContract.radii,
+    borderWidth: ['0', '1px', '2px', '4px'],
+    borderStyle: ['none', 'solid', 'dashed', 'dotted'],
+    borderColor: themeContract.colors,
+
+    // Effects
+    boxShadow: themeContract.shadows,
+    opacity: ['0', '0.25', '0.5', '0.75', '1'],
+
+    // Overflow
+    overflow: ['visible', 'hidden', 'scroll', 'auto'],
+    overflowX: ['visible', 'hidden', 'scroll', 'auto'],
+    overflowY: ['visible', 'hidden', 'scroll', 'auto'],
+  },
+});
+
+export const sprinkles = createSprinkles(responsiveProperties);
+export type Sprinkles = Parameters<typeof sprinkles>[0];