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

package/src/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/src/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];

package/src/theme/contract.css.ts

@@ -0,0 +1,83 @@
+import { createThemeContract } from '@vanilla-extract/css';
+
+// Define a theme contract with design tokens
+// This contract can then be reused to create multiple themes or overrides on a global level
+export const themeContract = createThemeContract({
+  colors: {
+    primary: null,
+    secondary: null,
+    accent: null,
+    background: null,
+    surface: null,
+    text: null,
+    textSecondary: null,
+    textLight: null,
+    border: null,
+    error: null,
+    warning: null,
+    success: null,
+    info: null,
+  },
+  space: {
+    none: null,
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    '2xl': null,
+  },
+  radii: {
+    none: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    full: null,
+  },
+  fonts: {
+    body: null,
+    heading: null,
+    mono: null,
+  },
+  fontSizes: {
+    xs: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    '2xl': null,
+    '3xl': null,
+    '4xl': null,
+  },
+  fontWeights: {
+    light: null,
+    normal: null,
+    medium: null,
+    semibold: null,
+    bold: null,
+  },
+  lineHeights: {
+    tight: null,
+    normal: null,
+    relaxed: null,
+  },
+  shadows: {
+    none: null,
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+  },
+  maxWidth: null,
+  section: {
+    paddingTop: null,
+    paddingBottom: null,
+  },
+  header: {
+    height: null,
+  },
+  footer: {
+    height: null,
+  },
+});

package/src/theme/default.css.ts

@@ -0,0 +1,9 @@
+import { createGlobalTheme } from '@vanilla-extract/css';
+import { baseDarkTheme, baseLightTheme } from './baseThemeValues';
+import { themeContract } from './contract.css';
+
+// Create the default light theme at the root
+createGlobalTheme('html', themeContract, baseLightTheme);
+
+// Apply dark theme when data-theme="dark"
+createGlobalTheme('html[data-theme="dark"]', themeContract, baseDarkTheme);