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

package/dist/Nav.css.ts

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

package/dist/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/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/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/dist/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/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>;