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

package/dist/KeyNumber.css.ts

@@ -0,0 +1,158 @@
+import { style } from '@vanilla-extract/css';
+import { recipe, RecipeVariants } from '@vanilla-extract/recipes';
+import { queries } from '../../styles/mediaqueries';
+import { themeContract } from '../../theme';
+
+const keyNumberBase = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  color: themeContract.colors.text,
+});
+
+const keyNumberValue = style({
+  fontSize: themeContract.fontSizes.lg,
+  paddingBottom: themeContract.space.md,
+  fontWeight: '400',
+
+  '@media': {
+    [queries.lg]: {
+      paddingBottom: themeContract.space.lg,
+    },
+  },
+
+  // selectors: {
+  //   '& span': {
+  //     fontSize: themeContract.fontSizes['4xl'],
+  //     lineHeight: themeContract.lineHeights.tight,
+  //     fontWeight: 'bold',
+  //     display: 'inline-block',
+
+  //     '@media': {
+  //       [queries.md]: {
+  //         fontSize: '3rem',
+  //       },
+  //       [queries.lg]: {
+  //         fontSize: '4rem',
+  //       },
+  //     },
+  //   },
+  // },
+});
+
+const keyNumberLabel = style({
+  fontSize: themeContract.fontSizes.md,
+  color: themeContract.colors.textSecondary,
+  lineHeight: themeContract.lineHeights.normal,
+  margin: 0,
+
+  '@media': {
+    [queries.md]: {
+      fontSize: themeContract.fontSizes.lg,
+    },
+  },
+});
+
+export const keyNumberRecipe = recipe({
+  base: keyNumberBase,
+
+  variants: {
+    size: {
+      sm: {
+        // selectors: {
+        //   [`& .${keyNumberValue}`]: {
+        //     fontSize: themeContract.fontSizes.md,
+        //   },
+        //   [`& .${keyNumberValue} span`]: {
+        //     fontSize: themeContract.fontSizes['2xl'],
+        //   },
+        //   [`& .${keyNumberLabel}`]: {
+        //     fontSize: themeContract.fontSizes.sm,
+        //   },
+        // },
+      },
+      md: {},
+      lg: {
+        // selectors: {
+        //   [`& .${keyNumberValue}`]: {
+        //     fontSize: themeContract.fontSizes.xl,
+        //   },
+        //   [`& .${keyNumberValue} span`]: {
+        //     fontSize: '5rem',
+        //     '@media': {
+        //       [queries.lg]: {
+        //         fontSize: '6rem',
+        //       },
+        //     },
+        //   },
+        //   [`& .${keyNumberLabel}`]: {
+        //     fontSize: themeContract.fontSizes.xl,
+        //   },
+        // },
+      },
+    },
+    variant: {
+      default: {},
+      highlighted: {
+        padding: themeContract.space.lg,
+        backgroundColor: themeContract.colors.surface,
+        borderRadius: themeContract.radii.lg,
+        boxShadow: themeContract.shadows.md,
+      },
+      outlined: {
+        padding: themeContract.space.lg,
+        border: `2px solid ${themeContract.colors.border}`,
+        borderRadius: themeContract.radii.lg,
+      },
+    },
+    align: {
+      left: {
+        alignItems: 'flex-start',
+        textAlign: 'left',
+      },
+      center: {
+        alignItems: 'center',
+        textAlign: 'center',
+      },
+      right: {
+        alignItems: 'flex-end',
+        textAlign: 'right',
+      },
+    },
+    // color: {
+    //   default: {},
+    //   primary: {
+    //     // selectors: {
+    //     //   [`& .${keyNumberValue} span`]: {
+    //     //     color: themeContract.colors.primary,
+    //     //   },
+    //     // },
+    //   },
+    //   accent: {
+    //     // selectors: {
+    //     //   [`& .${keyNumberValue} span`]: {
+    //     //     color: themeContract.colors.accent,
+    //     //   },
+    //     // },
+    //   },
+    //   success: {
+    //     // selectors: {
+    //     //   [`& .${keyNumberValue} span`]: {
+    //     //     color: themeContract.colors.success,
+    //     //   },
+    //     // },
+    //   },
+    // },
+  },
+
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+    align: 'center',
+    // color: 'default',
+  },
+});
+
+export { keyNumberValue, keyNumberLabel };
+export type KeyNumberVariants = RecipeVariants<typeof keyNumberRecipe>;

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

package/dist/LanguageSwitcher.css.ts

@@ -0,0 +1,120 @@
+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/Logo.css.ts

@@ -0,0 +1,98 @@
+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/Main.css.ts

@@ -0,0 +1,62 @@
+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/Modal.css.ts

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