@latte-macchiat-io/latte-vanilla-components 0.0.175 → 0.0.176

package/dist/types/theme/baseThemeValues.d.ts

@@ -0,0 +1,158 @@
+export declare const baseLightTheme: {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+        textLight: string;
+        border: string;
+        error: string;
+        warning: string;
+        success: string;
+        info: string;
+    };
+    space: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeights: {
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    maxWidth: string;
+    section: {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    header: {
+        height: string;
+    };
+    footer: {
+        height: string;
+    };
+};
+export declare const baseDarkTheme: {
+    colors: {
+        primary: string;
+        secondary: string;
+        accent: string;
+        background: string;
+        surface: string;
+        text: string;
+        textSecondary: string;
+        textLight: string;
+        border: string;
+        error: string;
+        warning: string;
+        success: string;
+        info: string;
+    };
+    space: {
+        none: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+    };
+    radii: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    fonts: {
+        body: string;
+        heading: string;
+        mono: string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+    };
+    fontWeights: {
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+    };
+    lineHeights: {
+        tight: string;
+        normal: string;
+        relaxed: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    maxWidth: string;
+    section: {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    header: {
+        height: string;
+    };
+    footer: {
+        height: string;
+    };
+};

package/dist/types/theme/contract.css.d.ts

@@ -0,0 +1,79 @@
+export declare const themeContract: {
+    colors: {
+        primary: `var(--${string})`;
+        secondary: `var(--${string})`;
+        accent: `var(--${string})`;
+        background: `var(--${string})`;
+        surface: `var(--${string})`;
+        text: `var(--${string})`;
+        textSecondary: `var(--${string})`;
+        textLight: `var(--${string})`;
+        border: `var(--${string})`;
+        error: `var(--${string})`;
+        warning: `var(--${string})`;
+        success: `var(--${string})`;
+        info: `var(--${string})`;
+    };
+    space: {
+        none: `var(--${string})`;
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+    };
+    radii: {
+        none: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        full: `var(--${string})`;
+    };
+    fonts: {
+        body: `var(--${string})`;
+        heading: `var(--${string})`;
+        mono: `var(--${string})`;
+    };
+    fontSizes: {
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+        '3xl': `var(--${string})`;
+        '4xl': `var(--${string})`;
+    };
+    fontWeights: {
+        light: `var(--${string})`;
+        normal: `var(--${string})`;
+        medium: `var(--${string})`;
+        semibold: `var(--${string})`;
+        bold: `var(--${string})`;
+    };
+    lineHeights: {
+        tight: `var(--${string})`;
+        normal: `var(--${string})`;
+        relaxed: `var(--${string})`;
+    };
+    shadows: {
+        none: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+    };
+    maxWidth: `var(--${string})`;
+    section: {
+        paddingTop: `var(--${string})`;
+        paddingBottom: `var(--${string})`;
+    };
+    header: {
+        height: `var(--${string})`;
+    };
+    footer: {
+        height: `var(--${string})`;
+    };
+};

package/dist/types/theme/index.d.ts

@@ -0,0 +1,3 @@
+export { themeContract } from './contract.css';
+export { baseLightTheme, baseDarkTheme } from './baseThemeValues';
+export { createThemeOverride, getThemeContract, getThemeValues, toggleTheme, setTheme, getCurrentTheme, type ThemeValues } from './utils';

package/dist/types/theme/utils.d.ts

@@ -0,0 +1,86 @@
+import { baseLightTheme } from './baseThemeValues';
+export type ThemeValues = typeof baseLightTheme;
+export declare const createThemeOverride: (overrides: Partial<ThemeValues>) => ThemeValues;
+export declare const getThemeContract: () => {
+    colors: {
+        primary: `var(--${string})`;
+        secondary: `var(--${string})`;
+        accent: `var(--${string})`;
+        background: `var(--${string})`;
+        surface: `var(--${string})`;
+        text: `var(--${string})`;
+        textSecondary: `var(--${string})`;
+        textLight: `var(--${string})`;
+        border: `var(--${string})`;
+        error: `var(--${string})`;
+        warning: `var(--${string})`;
+        success: `var(--${string})`;
+        info: `var(--${string})`;
+    };
+    space: {
+        none: `var(--${string})`;
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+    };
+    radii: {
+        none: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        full: `var(--${string})`;
+    };
+    fonts: {
+        body: `var(--${string})`;
+        heading: `var(--${string})`;
+        mono: `var(--${string})`;
+    };
+    fontSizes: {
+        xs: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+        '2xl': `var(--${string})`;
+        '3xl': `var(--${string})`;
+        '4xl': `var(--${string})`;
+    };
+    fontWeights: {
+        light: `var(--${string})`;
+        normal: `var(--${string})`;
+        medium: `var(--${string})`;
+        semibold: `var(--${string})`;
+        bold: `var(--${string})`;
+    };
+    lineHeights: {
+        tight: `var(--${string})`;
+        normal: `var(--${string})`;
+        relaxed: `var(--${string})`;
+    };
+    shadows: {
+        none: `var(--${string})`;
+        sm: `var(--${string})`;
+        md: `var(--${string})`;
+        lg: `var(--${string})`;
+        xl: `var(--${string})`;
+    };
+    maxWidth: `var(--${string})`;
+    section: {
+        paddingTop: `var(--${string})`;
+        paddingBottom: `var(--${string})`;
+    };
+    header: {
+        height: `var(--${string})`;
+    };
+    footer: {
+        height: `var(--${string})`;
+    };
+};
+export declare const getThemeValues: (isDark?: boolean) => ThemeValues;
+export declare const toggleTheme: () => boolean;
+export declare const setTheme: (theme: "light" | "dark") => void;
+export declare const getCurrentTheme: () => "light" | "dark";

package/package.json

@@ -1,29 +1,33 @@
 {
   "name": "@latte-macchiat-io/latte-vanilla-components",
-  "version": "0.0.175",
+  "version": "0.0.176",
   "description": "Beautiful components for amazing projects, with a touch of Vanilla 🥤",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/types/index.d.ts",
   "sideEffects": false,
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
     },
     "./css": {
-      "types": "./dist/css/index.d.ts",
-      "import": "./dist/css/index.js"
+      "types": "./dist/types/css/index.d.ts",
+      "import": "./dist/css/index.js",
+      "require": "./dist/css/index.cjs"
     },
-    "./themes/*": {
-      "types": "./dist/themes/*.d.ts",
-      "import": "./dist/themes/*.js"
-    },
-    "./*.css.ts": "./src/*.css.ts"
+    "./*.css.ts": "./src/*.css.ts",
+    "./src/*": "./src/*",
+    "./dist/*": "./dist/*"
   },
   "files": [
     "dist",
-    "src/**/*.css.ts"
+    "src/**/*.css.ts",
+    "src/**/*.ts",
+    "!src/**/*.stories.ts",
+    "!src/**/*.test.ts"
   ],
   "peerDependencies": {
     "@vanilla-extract/css": "^1.17.4",

package/src/assets/styles/default-theme.ts

@@ -0,0 +1,312 @@
+import { Theme } from '@/types/theme';
+
+const brandFont = '"Goudy Bookletter 1911", sans-serif';
+const defaultFont = '"Gill Sans", sans-serif';
+
+const brandColorTerracotta = '#FF7377';
+
+const brandColorBeigeDark = '#C8AE96';
+const brandColorBeigeLight = '#FCEFE6';
+
+const brandColorGrey = '#2E2E2E';
+const brandColorGreyLight = '#CCCCCC';
+const brandColorGreyMedium = ' #888888';
+const brandColorBlack = '#000000';
+
+const brandColor = brandColorTerracotta;
+
+export const defaultTheme: Theme = {
+  global: {
+    maxWidth: 1200,
+    paddingLeft: [15, 15, 30, 30],
+    paddingRight: [15, 15, 30, 30],
+
+    brandFont: brandFont,
+    defaultFont: defaultFont,
+  },
+
+  colors: {
+    defaultText: brandColorBlack,
+    defaultLightText: brandColorBeigeLight,
+    defaultTitle: '',
+    defaultLink: brandColorBlack,
+    defaultIcon: brandColorBlack,
+  },
+
+  backgroundColors: {
+    modal: brandColorBeigeLight,
+    modalOverlay: 'rgba(0, 0, 0, 0.6)',
+    cookieConsent: brandColorBeigeLight,
+  },
+
+  borders: {
+    hr: `1px solid ${brandColorBeigeDark}`,
+    cookieConsent: `2px solid ${brandColorBlack}`,
+  },
+
+  borderRadius: {
+    modal: 30,
+    input: 30,
+    cookieConsent: 30,
+  },
+
+  widthSizes: {
+    modal: 600,
+    cookieConsent: 500,
+  },
+
+  transitions: {
+    global: 'all 0.3s ease-in-out',
+  },
+
+  actions: {
+    gap: [15, 15, 30, 30],
+    paddingTop: [15, 15, 30, 30],
+    paddingBottom: [15, 15, 30, 30],
+  },
+
+  button: {
+    minWidth: 80,
+    fontWeight: 400,
+    letterSpacing: 0.1,
+    color: {
+      primary: brandColorBeigeLight,
+      secondary: brandColorGrey,
+      disabled: brandColorGreyMedium,
+    },
+    backgroundColor: {
+      primary: brandColor,
+      secondary: brandColorBeigeDark,
+      disabled: brandColorGreyLight,
+    },
+    border: {
+      width: 2,
+      style: 'solid',
+      color: {
+        primary: brandColor,
+        secondary: brandColorBeigeDark,
+        disabled: brandColorGreyLight,
+      },
+    },
+    borderRadius: 50,
+    paddingTop: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingBottom: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingLeft: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    paddingRight: {
+      small: [5, 5, 10, 10, 15, 15],
+      medium: [10, 10, 15, 15, 20, 20],
+      large: [15, 15, 20, 20, 25, 25],
+    },
+    transition: 'all 0.3s ease-in-out',
+  },
+
+  columns: {
+    gap: 30,
+  },
+
+  keyNumber: {
+    paddingBottom: [5, 5, 10, 10, 15, 15],
+  },
+
+  form: {
+    width: 800,
+    padding: ['15px', '30px'],
+    backgroundColor: '',
+
+    row: {
+      gap: [30, 60],
+      padding: ['15px', '30px'],
+    },
+
+    label: {
+      font: brandFont,
+      fontWeight: 500,
+      color: brandColor,
+      paddingBottom: 5,
+    },
+
+    input: {
+      color: '',
+      borderRadius: 0,
+      padding: [5, 10],
+      font: defaultFont,
+      backgroundColor: '',
+      placeholder: {
+        color: '',
+        opacity: 1,
+      },
+      border: `2px solid ${brandColorBlack}`,
+    },
+
+    textarea: {
+      color: '',
+      borderRadius: 0,
+      padding: [5, 10],
+      font: defaultFont,
+      backgroundColor: '',
+      placeholder: {
+        color: '',
+        opacity: 1,
+      },
+      border: `2px solid ${brandColorBlack}`,
+    },
+
+    error: {
+      color: brandColorTerracotta,
+    },
+  },
+
+  header: {
+    gap: [15, 15, 15, 15],
+    height: [60, 60, 120, 120],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+
+    overlayGap: [15, 15, 15, 15],
+    overlayBackgroundColor: brandColorBeigeLight,
+
+    toggleNavColor: brandColorBlack,
+    toggleNavOpenColor: brandColorBlack,
+    toggleNavBorderRadius: 5,
+  },
+
+  main: {
+    minHeight: '45vh',
+    backgroundColor: brandColorBeigeLight,
+  },
+
+  section: {
+    paddingTop: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  footer: {
+    gap: [15, 15, 15, 15],
+    height: [60, 60, 120, 120],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  modal: {
+    border: '',
+    borderRadius: 0,
+    width: [50, 50, 75, 75],
+    backgroundColor: brandColorBeigeLight,
+
+    overlayBlur: 0,
+    overlayOpacity: 0.5,
+    overlayBackgroundColor: brandColorBlack,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  languageSwitcher: {
+    border: '',
+    borderRadius: 0,
+    color: brandColorBlack,
+    width: [150, 150, 200, 200],
+    backgroundColor: brandColorBeigeLight,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+  },
+
+  carousel: {
+    gap: [0, 0, 30, 60],
+    bullet: {
+      borderRadius: 0,
+      width: [12, 12, 12, 12],
+      height: [12, 12, 12, 12],
+      backgroundColor: brandColorBeigeLight,
+    },
+  },
+
+  video: {
+    playButton: {
+      border: '',
+      borderRadius: 0,
+      width: [50, 50, 75, 75],
+      height: [50, 50, 75, 75],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    pauseButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    soundButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+    closeButton: {
+      border: '',
+      borderRadius: 0,
+      width: [40, 40, 50, 50],
+      height: [40, 40, 50, 50],
+      color: brandColorBlack,
+      backgroundColor: brandColorBeigeLight,
+    },
+  },
+
+  consentCookie: {
+    borders: 0,
+    borderRadius: 0,
+    width: [50, 50, 75, 75],
+    backgroundColor: brandColorBeigeLight,
+
+    overlayBlur: 0,
+    overlayOpacity: 0.5,
+    overlayBackgroundColor: brandColorBlack,
+
+    paddingTop: [15, 30, 50, 100],
+    paddingLeft: [15, 30, 50, 100],
+    paddingRight: [15, 30, 50, 100],
+    paddingBottom: [15, 30, 50, 100],
+
+    actionsGap: 30,
+    actionsPaddingTop: [15, 100, 100, 100],
+  },
+
+  nav: {
+    gap: [15, 15, 15, 15],
+  },
+
+  navSocial: {
+    gap: [15, 15, 15, 15],
+  },
+
+  navLegal: {
+    gap: [15, 15, 15, 15],
+  },
+};