@latte-macchiat-io/latte-vanilla-components 0.0.248 → 0.0.250

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.248",
+  "version": "0.0.250",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/Header/theme.ts

@@ -1,5 +1,6 @@
 const themeHeaderBase = {
   header: {
+    isFixed: 'true',
     fontSize: '1.2em',
     height: {
       mobile: '15px',

package/src/components/Section/styles.css.ts

@@ -1,9 +1,8 @@
 import { style } from '@vanilla-extract/css';
-import { calc } from '@vanilla-extract/css-utils';
 import { recipe, type RecipeVariants } from '@vanilla-extract/recipes';
 
 import { themeContract } from '../../theme/contract.css';
-import { generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
+import { calcResponsiveSubtract, generateResponsiveMedia } from '../../utils/generateResponsiveMedia';
 
 export const sectionRecipe = recipe(
   {
@@ -71,7 +70,11 @@ export const sectionRecipe = recipe(
       },
       isHeaderFixed: {
         true: {
-          // minHeight: calc.subtract('100vh', themeContract.header.height),
+          '@media': {
+            ...generateResponsiveMedia({
+              minHeight: calcResponsiveSubtract('100vh', themeContract.header.height),
+            }),
+          },
         },
         false: {
           minHeight: '100vh',
@@ -103,6 +106,7 @@ export const sectionRecipe = recipe(
       align: 'left',
       isDark: false,
       isFullHeight: false,
+      isHeaderFixed: themeContract.header.isFixed ? true : false,
       withPaddingTop: true,
       withPaddingBottom: true,
       variant: 'transparent',

package/src/components/Video/theme.ts

@@ -3,6 +3,14 @@ const themeVideoBase = {
     playButton: {
       border: 'none',
       borderRadius: '1000px',
+      iconSize: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
       iconColor: '#FF7377',
       backgroundColor: '#FF7377',
       width: {
@@ -25,6 +33,14 @@ const themeVideoBase = {
     pauseButton: {
       border: 'none',
       borderRadius: '1000px',
+      iconSize: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
       iconColor: '#FF7377',
       backgroundColor: '#FF7377',
       width: {
@@ -47,6 +63,14 @@ const themeVideoBase = {
     soundButton: {
       border: 'none',
       borderRadius: '1000px',
+      iconSize: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
       iconColor: '#FF7377',
       backgroundColor: '#FF7377',
       width: {
@@ -69,6 +93,14 @@ const themeVideoBase = {
     closeButton: {
       border: 'none',
       borderRadius: '1000px',
+      iconSize: {
+        mobile: '50px',
+        sm: '50px',
+        md: '50px',
+        lg: '75px',
+        xl: '75px',
+        '2xl': '75px',
+      },
       iconColor: '#FF7377',
       backgroundColor: '#FF7377',
       width: {

package/src/theme/contract.css.ts

@@ -149,6 +149,7 @@ export const themeContract = createGlobalThemeContract({
     },
   },
   header: {
+    isFixed: 'latte-header-isFixed',
     fontSize: 'latte-header-fontSize',
     backgroundColor: 'latte-header-backgroundColor',
     height: {

package/src/utils/generateResponsiveMedia.ts

@@ -1,19 +1,102 @@
-import { Breakpoints, queries } from '../styles/mediaqueries';
+// utils/generateResponsiveMedia.ts
+import { queries } from '../styles/mediaqueries';
 
-type ResponsiveProps = Record<string, Record<Breakpoints, string>>;
+/**
+ * Breakpoint keys you support (should match your queries object).
+ */
+type BreakpointKey = 'mobile' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+const BPS: BreakpointKey[] = ['mobile', 'sm', 'md', 'lg', 'xl', '2xl'];
 
-export function generateResponsiveMedia(properties: ResponsiveProps) {
+/**
+ * Responsive values can be a plain string/number or anything with a toString().
+ */
+type ResponsiveValue = string | number | { toString(): string };
+type BreakpointMap = Partial<Record<BreakpointKey, ResponsiveValue>>;
+
+/**
+ * Generate responsive media queries for a set of CSS properties.
+ *
+ * Example:
+ * generateResponsiveMedia({
+ *   width: { mobile: '100%', md: '50%' },
+ *   padding: '20px'
+ * })
+ *
+ * => {
+ *   '@media (min-width:...)': { width: '50%', padding: '20px' },
+ *   ...
+ * }
+ */
+export function generateResponsiveMedia(properties: Record<string, ResponsiveValue | BreakpointMap>) {
   const result: Record<string, Record<string, string>> = {};
 
-  Object.entries(properties).forEach(([cssProp, breakpointsMap]) => {
-    Object.entries(breakpointsMap).forEach(([bp, token]) => {
-      const key = bp as Breakpoints;
-      const mediaQuery = queries[key];
+  const toCssValue = (v: ResponsiveValue) => {
+    const s = String(v);
+    // if it's a CSS variable token, wrap with var(...)
+    return s.startsWith('--') ? `var(${s})` : s;
+  };
+
+  for (const [cssProp, valOrMap] of Object.entries(properties)) {
+    const isMapLike =
+      valOrMap && typeof valOrMap === 'object' && !Array.isArray(valOrMap) && Object.keys(valOrMap).some((k) => BPS.includes(k as BreakpointKey));
 
-      if (!result[mediaQuery]) result[mediaQuery] = {};
-      result[mediaQuery][cssProp] = token.startsWith('--') ? `var(${token})` : token;
-    });
-  });
+    if (isMapLike) {
+      const map = valOrMap as BreakpointMap;
+      for (const bp of BPS) {
+        const token = map[bp];
+        if (token === undefined) continue;
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(token);
+      }
+    } else {
+      // single value => apply to all breakpoints
+      const token = valOrMap as ResponsiveValue;
+      for (const bp of BPS) {
+        const media = queries[bp as keyof typeof queries];
+        if (!result[media]) result[media] = {};
+        result[media][cssProp] = toCssValue(token);
+      }
+    }
+  }
 
   return result;
 }
+
+/**
+ * Generate a responsive calc() subtraction: calc(base - other).
+ *
+ * - base: static value (string/number), e.g. "100vh"
+ * - other: either a single value or a BreakpointMap
+ *
+ * Example:
+ * calcResponsiveSubtract('100vh', { mobile: '50px', md: '80px' })
+ *
+ * => {
+ *   mobile: "calc(100vh - 50px)",
+ *   md: "calc(100vh - 80px)"
+ * }
+ */
+export function calcResponsiveSubtract(base: ResponsiveValue, other: ResponsiveValue | BreakpointMap): BreakpointMap {
+  const build = (otherVal: ResponsiveValue) => `calc(${String(base)} - ${String(otherVal)})`;
+
+  const out: BreakpointMap = {};
+
+  const isMapLike = other && typeof other === 'object' && !Array.isArray(other) && Object.keys(other).some((k) => BPS.includes(k as BreakpointKey));
+
+  if (isMapLike) {
+    const map = other as BreakpointMap;
+    for (const bp of BPS) {
+      const token = map[bp];
+      if (token === undefined) continue;
+      out[bp] = build(token);
+    }
+  } else {
+    const token = other as ResponsiveValue;
+    for (const bp of BPS) {
+      out[bp] = build(token);
+    }
+  }
+
+  return out;
+}