@troychaplin/parlour-ui 0.1.0

package/dist/styles/parlour-tokens.css

@@ -0,0 +1,129 @@
+/* Auto-generated by component2block — do not edit manually */
+
+:root {
+  /* Colors */
+  --parlour--color-black: #191919;
+  --parlour--color-white: #ffffff;
+  --parlour--color-accent-primary: #a34f3e;
+  --parlour--color-accent-secondary: #ca2135;
+  --parlour--color-neutral-50: #f9f7f3;
+  --parlour--color-neutral-100: #f2f0ea;
+  --parlour--color-neutral-200: #efeae2;
+  --parlour--color-neutral-300: #e0d6c8;
+  --parlour--color-neutral-400: #d8d5cf;
+  --parlour--color-neutral-500: #8d7661;
+  --parlour--color-neutral-600: #766051;
+  --parlour--color-neutral-700: #5e4c42;
+  --parlour--color-neutral-800: #51413a;
+  --parlour--color-neutral-900: #473a35;
+  --parlour--color-neutral-950: #271f1c;
+  --parlour--color-info: #2571eb;
+  --parlour--color-success: #16a34a;
+  --parlour--color-warning: #fff154;
+  --parlour--color-error: #dc2626;
+  --parlour--color-linkedin: #0A66C2;
+  --parlour--color-facebook: #1877F2;
+  --parlour--color-bluesky: #1185FE;
+  --parlour--color-twitter: #000000;
+  --parlour--color-instagram: #E4405F;
+  --parlour--color-youtube: #FF0000;
+  --parlour--color-tiktok: #010101;
+
+  /* Gradients */
+  --parlour--gradient-white-to-neutral-50: linear-gradient(135deg,rgb(250,250,250) 0%,rgb(249, 247, 243) 90%);
+
+  /* Spacing */
+  --parlour--spacing-3-x-small: 0.175rem;
+  --parlour--spacing-2-x-small: 0.25rem;
+  --parlour--spacing-x-small: 0.5rem;
+  --parlour--spacing-small: clamp(0.625rem, 0.625rem + ((1vw - 0.2rem) * 0.240), 0.75rem);
+  --parlour--spacing-normal: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.361), 1rem);
+  --parlour--spacing-medium: clamp(0.9375rem, 0.9375rem + ((1vw - 0.2rem) * 0.601), 1.25rem);
+  --parlour--spacing-large: clamp(1.0625rem, 1.0625rem + ((1vw - 0.2rem) * 0.841), 1.5rem);
+  --parlour--spacing-x-large: clamp(1.1875rem, 1.1875rem + ((1vw - 0.2rem) * 1.563), 2rem);
+  --parlour--spacing-2-x-large: clamp(1.3125rem, 1.3125rem + ((1vw - 0.2rem) * 2.284), 2.5rem);
+  --parlour--spacing-3-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 3.005), 3rem);
+  --parlour--spacing-4-x-large: clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 4.567), 4rem);
+  --parlour--spacing-5-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 6.250), 5rem);
+
+  /* Font Families */
+  --parlour--font-family-inter-tight: 'Inter Tight', system-ui, 'Segoe UI', roboto, sans-serif;
+  --parlour--font-family-source-serif-4: 'Source Serif 4', ui-serif, georgia, serif;
+  --parlour--font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Font Sizes */
+  --parlour--font-size-2-x-small: clamp(0.6875rem, 0.6875rem + ((1vw - 0.2rem) * 0.12), 0.75rem);
+  --parlour--font-size-x-small: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.12), 0.875rem);
+  --parlour--font-size-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.24), 1rem);
+  --parlour--font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.481), 1.25rem);
+  --parlour--font-size-large: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 1.082), 2rem);
+  --parlour--font-size-2-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.803), 2.6875rem);
+  --parlour--font-size-3-x-large: clamp(2.0625rem, 2.0625rem + ((1vw - 0.2rem) * 2.885), 3.5625rem);
+  --parlour--font-size-4-x-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 4.327), 4.75rem);
+  --parlour--font-size-5-x-large: clamp(2.375rem, 2.375rem + ((1vw - 0.2rem) * 6.418), 5.7125rem);
+  --parlour--font-size-hero: clamp(3.5625rem, 3.5625rem + ((1vw - 0.2rem) * 9.375), 8.4375rem);
+  --parlour--font-size-heading-small: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-heading-medium: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.962), 1.75rem);
+  --parlour--font-size-heading-large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.442), 2.25rem);
+  --parlour--font-size-heading-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.442), 2.5rem);
+  --parlour--font-size-heading-primary: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.404), 3rem);
+
+  /* Shadows */
+  --parlour--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
+  --parlour--shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
+  --parlour--shadow-crisp: 6px 6px 0px rgb(0, 0, 0);
+
+  /* Font Weights */
+  --parlour--font-weight-thin: 100;
+  --parlour--font-weight-extra-light: 200;
+  --parlour--font-weight-light: 300;
+  --parlour--font-weight-normal: 400;
+  --parlour--font-weight-medium: 500;
+  --parlour--font-weight-semibold: 600;
+  --parlour--font-weight-bold: 700;
+  --parlour--font-weight-extra-bold: 800;
+  --parlour--font-weight-black: 900;
+
+  /* Line Heights */
+  --parlour--line-height-tight: 1.3;
+  --parlour--line-height-normal: 1.6;
+  --parlour--line-height-loose: 1.8;
+
+  /* Border Radius */
+  --parlour--radius-sm: 2px;
+  --parlour--radius-md: 4px;
+  --parlour--radius-lg: 8px;
+  --parlour--radius-xl: 12px;
+  --parlour--radius-full: 9999px;
+
+  /* Transitions */
+  --parlour--transition-fast: 150ms ease;
+  --parlour--transition-base: 250ms ease;
+
+  /* Z-Index */
+  --parlour--z-100: 100;
+  --parlour--z-200: 200;
+  --parlour--z-500: 500;
+
+  /* Layout */
+  --parlour--layout-content-size: 768px;
+  --parlour--layout-wide-size: 1152px;
+  --parlour--layout-small-size: 600px;
+  --parlour--layout-full-size: 100vw;
+
+  /* Viewport */
+  --parlour--viewport-mobile: 600px;
+  --parlour--viewport-tablet: 768px;
+
+  /* Root Spacing */
+  --parlour--root-padding-x: var(--parlour--spacing-x-large);
+  --parlour--root-padding-y: 0;
+  --parlour--root-padding-top: var(--parlour--root-padding-y);
+  --parlour--root-padding-right: var(--parlour--root-padding-x);
+  --parlour--root-padding-bottom: var(--parlour--root-padding-y);
+  --parlour--root-padding-left: var(--parlour--root-padding-x);
+  --parlour--root-block-gap: 0;
+}

package/dist/styles/parlour-tokens.d.ts

@@ -0,0 +1,19 @@
+/* Auto-generated by component2block — do not edit manually */
+
+export declare const parlourTokens: Record<string, Record<string, string>>;
+export declare const parlourTokenKeys: {
+    readonly color: { readonly black: 'black'; readonly white: 'white'; readonly 'accent-primary': 'accent-primary'; readonly 'accent-secondary': 'accent-secondary'; readonly 'neutral-50': 'neutral-50'; readonly 'neutral-100': 'neutral-100'; readonly 'neutral-200': 'neutral-200'; readonly 'neutral-300': 'neutral-300'; readonly 'neutral-400': 'neutral-400'; readonly 'neutral-500': 'neutral-500'; readonly 'neutral-600': 'neutral-600'; readonly 'neutral-700': 'neutral-700'; readonly 'neutral-800': 'neutral-800'; readonly 'neutral-900': 'neutral-900'; readonly 'neutral-950': 'neutral-950'; readonly info: 'info'; readonly success: 'success'; readonly warning: 'warning'; readonly error: 'error'; readonly linkedin: 'linkedin'; readonly facebook: 'facebook'; readonly bluesky: 'bluesky'; readonly twitter: 'twitter'; readonly instagram: 'instagram'; readonly youtube: 'youtube'; readonly tiktok: 'tiktok' };
+    readonly gradient: { readonly 'white-to-neutral-50': 'white-to-neutral-50' };
+    readonly spacing: { readonly '3-x-small': '3-x-small'; readonly '2-x-small': '2-x-small'; readonly 'x-small': 'x-small'; readonly small: 'small'; readonly normal: 'normal'; readonly medium: 'medium'; readonly large: 'large'; readonly 'x-large': 'x-large'; readonly '2-x-large': '2-x-large'; readonly '3-x-large': '3-x-large'; readonly '4-x-large': '4-x-large'; readonly '5-x-large': '5-x-large' };
+    readonly fontFamily: { readonly 'inter-tight': 'inter-tight'; readonly 'source-serif-4': 'source-serif-4'; readonly 'jetbrains-mono': 'jetbrains-mono' };
+    readonly fontSize: { readonly '2-x-small': '2-x-small'; readonly 'x-small': 'x-small'; readonly small: 'small'; readonly medium: 'medium'; readonly large: 'large'; readonly 'x-large': 'x-large'; readonly '2-x-large': '2-x-large'; readonly '3-x-large': '3-x-large'; readonly '4-x-large': '4-x-large'; readonly '5-x-large': '5-x-large'; readonly hero: 'hero'; readonly 'heading-small': 'heading-small'; readonly 'heading-medium': 'heading-medium'; readonly 'heading-large': 'heading-large'; readonly 'heading-x-large': 'heading-x-large'; readonly 'heading-primary': 'heading-primary' };
+    readonly shadow: { readonly natural: 'natural'; readonly deep: 'deep'; readonly sharp: 'sharp'; readonly outlined: 'outlined'; readonly crisp: 'crisp' };
+    readonly fontWeight: { readonly thin: 'thin'; readonly 'extra-light': 'extra-light'; readonly light: 'light'; readonly normal: 'normal'; readonly medium: 'medium'; readonly semibold: 'semibold'; readonly bold: 'bold'; readonly 'extra-bold': 'extra-bold'; readonly black: 'black' };
+    readonly lineHeight: { readonly tight: 'tight'; readonly normal: 'normal'; readonly loose: 'loose' };
+    readonly radius: { readonly sm: 'sm'; readonly md: 'md'; readonly lg: 'lg'; readonly xl: 'xl'; readonly full: 'full' };
+    readonly transition: { readonly fast: 'fast'; readonly base: 'base' };
+    readonly z: { readonly '100': '100'; readonly '200': '200'; readonly '500': '500' };
+    readonly layout: { readonly 'content-size': 'content-size'; readonly 'wide-size': 'wide-size'; readonly 'small-size': 'small-size'; readonly 'full-size': 'full-size' };
+    readonly viewport: { readonly mobile: 'mobile'; readonly tablet: 'tablet' };
+};
+export default parlourTokens;

package/dist/styles/parlour-tokens.js

@@ -0,0 +1,148 @@
+/* Auto-generated by component2block — do not edit manually */
+
+export const parlourTokens = {
+    color: {
+        black: '#191919',
+        white: '#ffffff',
+        accentPrimary: '#a34f3e',
+        accentSecondary: '#ca2135',
+        neutral50: '#f9f7f3',
+        neutral100: '#f2f0ea',
+        neutral200: '#efeae2',
+        neutral300: '#e0d6c8',
+        neutral400: '#d8d5cf',
+        neutral500: '#8d7661',
+        neutral600: '#766051',
+        neutral700: '#5e4c42',
+        neutral800: '#51413a',
+        neutral900: '#473a35',
+        neutral950: '#271f1c',
+        info: '#2571eb',
+        success: '#16a34a',
+        warning: '#fff154',
+        error: '#dc2626',
+        linkedin: '#0A66C2',
+        facebook: '#1877F2',
+        bluesky: '#1185FE',
+        twitter: '#000000',
+        instagram: '#E4405F',
+        youtube: '#FF0000',
+        tiktok: '#010101'
+    },
+    gradient: {
+        whiteToNeutral50: 'linear-gradient(135deg,rgb(250,250,250) 0%,rgb(249, 247, 243) 90%)'
+    },
+    spacing: {
+        x3Small: '0.175rem',
+        x2Small: '0.25rem',
+        xSmall: '0.5rem',
+        small: 'clamp(0.625rem, 0.625rem + ((1vw - 0.2rem) * 0.240), 0.75rem)',
+        normal: 'clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.361), 1rem)',
+        medium: 'clamp(0.9375rem, 0.9375rem + ((1vw - 0.2rem) * 0.601), 1.25rem)',
+        large: 'clamp(1.0625rem, 1.0625rem + ((1vw - 0.2rem) * 0.841), 1.5rem)',
+        xLarge: 'clamp(1.1875rem, 1.1875rem + ((1vw - 0.2rem) * 1.563), 2rem)',
+        x2Large: 'clamp(1.3125rem, 1.3125rem + ((1vw - 0.2rem) * 2.284), 2.5rem)',
+        x3Large: 'clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 3.005), 3rem)',
+        x4Large: 'clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 4.567), 4rem)',
+        x5Large: 'clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 6.250), 5rem)'
+    },
+    fontFamily: {
+        interTight: '\'Inter Tight\', system-ui, \'Segoe UI\', roboto, sans-serif',
+        sourceSerif4: '\'Source Serif 4\', ui-serif, georgia, serif',
+        jetbrainsMono: '\'JetBrains Mono\', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \'Liberation Mono\', \'Courier New\', monospace'
+    },
+    fontSize: {
+        x2Small: 'clamp(0.6875rem, 0.6875rem + ((1vw - 0.2rem) * 0.12), 0.75rem)',
+        xSmall: 'clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.12), 0.875rem)',
+        small: 'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.24), 1rem)',
+        medium: 'clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.481), 1.25rem)',
+        large: 'clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem)',
+        xLarge: 'clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 1.082), 2rem)',
+        x2Large: 'clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.803), 2.6875rem)',
+        x3Large: 'clamp(2.0625rem, 2.0625rem + ((1vw - 0.2rem) * 2.885), 3.5625rem)',
+        x4Large: 'clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 4.327), 4.75rem)',
+        x5Large: 'clamp(2.375rem, 2.375rem + ((1vw - 0.2rem) * 6.418), 5.7125rem)',
+        hero: 'clamp(3.5625rem, 3.5625rem + ((1vw - 0.2rem) * 9.375), 8.4375rem)',
+        headingSmall: 'clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem)',
+        headingMedium: 'clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.962), 1.75rem)',
+        headingLarge: 'clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.442), 2.25rem)',
+        headingXLarge: 'clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.442), 2.5rem)',
+        headingPrimary: 'clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.404), 3rem)'
+    },
+    shadow: {
+        natural: '6px 6px 9px rgba(0, 0, 0, 0.2)',
+        deep: '12px 12px 50px rgba(0, 0, 0, 0.4)',
+        sharp: '6px 6px 0px rgba(0, 0, 0, 0.2)',
+        outlined: '6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0)',
+        crisp: '6px 6px 0px rgb(0, 0, 0)'
+    },
+    fontWeight: {
+        thin: '100',
+        extraLight: '200',
+        light: '300',
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+        extraBold: '800',
+        black: '900'
+    },
+    lineHeight: {
+        tight: '1.3',
+        normal: '1.6',
+        loose: '1.8'
+    },
+    radius: {
+        sm: '2px',
+        md: '4px',
+        lg: '8px',
+        xl: '12px',
+        full: '9999px'
+    },
+    transition: {
+        fast: '150ms ease',
+        base: '250ms ease'
+    },
+    z: {
+        '100': '100',
+        '200': '200',
+        '500': '500'
+    },
+    layout: {
+        contentSize: '768px',
+        wideSize: '1152px',
+        smallSize: '600px',
+        fullSize: '100vw'
+    },
+    viewport: {
+        mobile: '600px',
+        tablet: '768px'
+    },
+    root: {
+        paddingX: 'var(--parlour--spacing-x-large)',
+        paddingY: '0',
+        paddingTop: 'var(--parlour--root-padding-y)',
+        paddingRight: 'var(--parlour--root-padding-x)',
+        paddingBottom: 'var(--parlour--root-padding-y)',
+        paddingLeft: 'var(--parlour--root-padding-x)',
+        blockGap: '0'
+    }
+};
+
+export const parlourTokenKeys = {
+    color: { black: 'black', white: 'white', 'accent-primary': 'accent-primary', 'accent-secondary': 'accent-secondary', 'neutral-50': 'neutral-50', 'neutral-100': 'neutral-100', 'neutral-200': 'neutral-200', 'neutral-300': 'neutral-300', 'neutral-400': 'neutral-400', 'neutral-500': 'neutral-500', 'neutral-600': 'neutral-600', 'neutral-700': 'neutral-700', 'neutral-800': 'neutral-800', 'neutral-900': 'neutral-900', 'neutral-950': 'neutral-950', info: 'info', success: 'success', warning: 'warning', error: 'error', linkedin: 'linkedin', facebook: 'facebook', bluesky: 'bluesky', twitter: 'twitter', instagram: 'instagram', youtube: 'youtube', tiktok: 'tiktok' },
+    gradient: { 'white-to-neutral-50': 'white-to-neutral-50' },
+    spacing: { '3-x-small': '3-x-small', '2-x-small': '2-x-small', 'x-small': 'x-small', small: 'small', normal: 'normal', medium: 'medium', large: 'large', 'x-large': 'x-large', '2-x-large': '2-x-large', '3-x-large': '3-x-large', '4-x-large': '4-x-large', '5-x-large': '5-x-large' },
+    fontFamily: { 'inter-tight': 'inter-tight', 'source-serif-4': 'source-serif-4', 'jetbrains-mono': 'jetbrains-mono' },
+    fontSize: { '2-x-small': '2-x-small', 'x-small': 'x-small', small: 'small', medium: 'medium', large: 'large', 'x-large': 'x-large', '2-x-large': '2-x-large', '3-x-large': '3-x-large', '4-x-large': '4-x-large', '5-x-large': '5-x-large', hero: 'hero', 'heading-small': 'heading-small', 'heading-medium': 'heading-medium', 'heading-large': 'heading-large', 'heading-x-large': 'heading-x-large', 'heading-primary': 'heading-primary' },
+    shadow: { natural: 'natural', deep: 'deep', sharp: 'sharp', outlined: 'outlined', crisp: 'crisp' },
+    fontWeight: { thin: 'thin', 'extra-light': 'extra-light', light: 'light', normal: 'normal', medium: 'medium', semibold: 'semibold', bold: 'bold', 'extra-bold': 'extra-bold', black: 'black' },
+    lineHeight: { tight: 'tight', normal: 'normal', loose: 'loose' },
+    radius: { sm: 'sm', md: 'md', lg: 'lg', xl: 'xl', full: 'full' },
+    transition: { fast: 'fast', base: 'base' },
+    z: { '100': '100', '200': '200', '500': '500' },
+    layout: { 'content-size': 'content-size', 'wide-size': 'wide-size', 'small-size': 'small-size', 'full-size': 'full-size' },
+    viewport: { mobile: 'mobile', tablet: 'tablet' }
+};
+
+export default parlourTokens;

package/dist/styles/parlour-tokens.scss

@@ -0,0 +1,129 @@
+/* Auto-generated by component2block — do not edit manually */
+
+:root {
+  /* Colors */
+  --parlour--color-black: #191919;
+  --parlour--color-white: #ffffff;
+  --parlour--color-accent-primary: #a34f3e;
+  --parlour--color-accent-secondary: #ca2135;
+  --parlour--color-neutral-50: #f9f7f3;
+  --parlour--color-neutral-100: #f2f0ea;
+  --parlour--color-neutral-200: #efeae2;
+  --parlour--color-neutral-300: #e0d6c8;
+  --parlour--color-neutral-400: #d8d5cf;
+  --parlour--color-neutral-500: #8d7661;
+  --parlour--color-neutral-600: #766051;
+  --parlour--color-neutral-700: #5e4c42;
+  --parlour--color-neutral-800: #51413a;
+  --parlour--color-neutral-900: #473a35;
+  --parlour--color-neutral-950: #271f1c;
+  --parlour--color-info: #2571eb;
+  --parlour--color-success: #16a34a;
+  --parlour--color-warning: #fff154;
+  --parlour--color-error: #dc2626;
+  --parlour--color-linkedin: #0A66C2;
+  --parlour--color-facebook: #1877F2;
+  --parlour--color-bluesky: #1185FE;
+  --parlour--color-twitter: #000000;
+  --parlour--color-instagram: #E4405F;
+  --parlour--color-youtube: #FF0000;
+  --parlour--color-tiktok: #010101;
+
+  /* Gradients */
+  --parlour--gradient-white-to-neutral-50: linear-gradient(135deg,rgb(250,250,250) 0%,rgb(249, 247, 243) 90%);
+
+  /* Spacing */
+  --parlour--spacing-3-x-small: 0.175rem;
+  --parlour--spacing-2-x-small: 0.25rem;
+  --parlour--spacing-x-small: 0.5rem;
+  --parlour--spacing-small: clamp(0.625rem, 0.625rem + ((1vw - 0.2rem) * 0.240), 0.75rem);
+  --parlour--spacing-normal: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.361), 1rem);
+  --parlour--spacing-medium: clamp(0.9375rem, 0.9375rem + ((1vw - 0.2rem) * 0.601), 1.25rem);
+  --parlour--spacing-large: clamp(1.0625rem, 1.0625rem + ((1vw - 0.2rem) * 0.841), 1.5rem);
+  --parlour--spacing-x-large: clamp(1.1875rem, 1.1875rem + ((1vw - 0.2rem) * 1.563), 2rem);
+  --parlour--spacing-2-x-large: clamp(1.3125rem, 1.3125rem + ((1vw - 0.2rem) * 2.284), 2.5rem);
+  --parlour--spacing-3-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 3.005), 3rem);
+  --parlour--spacing-4-x-large: clamp(1.625rem, 1.625rem + ((1vw - 0.2rem) * 4.567), 4rem);
+  --parlour--spacing-5-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 6.250), 5rem);
+
+  /* Font Families */
+  --parlour--font-family-inter-tight: 'Inter Tight', system-ui, 'Segoe UI', roboto, sans-serif;
+  --parlour--font-family-source-serif-4: 'Source Serif 4', ui-serif, georgia, serif;
+  --parlour--font-family-jetbrains-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+
+  /* Font Sizes */
+  --parlour--font-size-2-x-small: clamp(0.6875rem, 0.6875rem + ((1vw - 0.2rem) * 0.12), 0.75rem);
+  --parlour--font-size-x-small: clamp(0.8125rem, 0.8125rem + ((1vw - 0.2rem) * 0.12), 0.875rem);
+  --parlour--font-size-small: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.24), 1rem);
+  --parlour--font-size-medium: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.481), 1.25rem);
+  --parlour--font-size-large: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-x-large: clamp(1.4375rem, 1.4375rem + ((1vw - 0.2rem) * 1.082), 2rem);
+  --parlour--font-size-2-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.803), 2.6875rem);
+  --parlour--font-size-3-x-large: clamp(2.0625rem, 2.0625rem + ((1vw - 0.2rem) * 2.885), 3.5625rem);
+  --parlour--font-size-4-x-large: clamp(2.5rem, 2.5rem + ((1vw - 0.2rem) * 4.327), 4.75rem);
+  --parlour--font-size-5-x-large: clamp(2.375rem, 2.375rem + ((1vw - 0.2rem) * 6.418), 5.7125rem);
+  --parlour--font-size-hero: clamp(3.5625rem, 3.5625rem + ((1vw - 0.2rem) * 9.375), 8.4375rem);
+  --parlour--font-size-heading-small: clamp(1rem, 1rem + ((1vw - 0.2rem) * 0.962), 1.5rem);
+  --parlour--font-size-heading-medium: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 0.962), 1.75rem);
+  --parlour--font-size-heading-large: clamp(1.5rem, 1.5rem + ((1vw - 0.2rem) * 1.442), 2.25rem);
+  --parlour--font-size-heading-x-large: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 1.442), 2.5rem);
+  --parlour--font-size-heading-primary: clamp(1.75rem, 1.75rem + ((1vw - 0.2rem) * 2.404), 3rem);
+
+  /* Shadows */
+  --parlour--shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
+  --parlour--shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
+  --parlour--shadow-outlined: 6px 6px 0px -3px rgb(255, 255, 255), 6px 6px rgb(0, 0, 0);
+  --parlour--shadow-crisp: 6px 6px 0px rgb(0, 0, 0);
+
+  /* Font Weights */
+  --parlour--font-weight-thin: 100;
+  --parlour--font-weight-extra-light: 200;
+  --parlour--font-weight-light: 300;
+  --parlour--font-weight-normal: 400;
+  --parlour--font-weight-medium: 500;
+  --parlour--font-weight-semibold: 600;
+  --parlour--font-weight-bold: 700;
+  --parlour--font-weight-extra-bold: 800;
+  --parlour--font-weight-black: 900;
+
+  /* Line Heights */
+  --parlour--line-height-tight: 1.3;
+  --parlour--line-height-normal: 1.6;
+  --parlour--line-height-loose: 1.8;
+
+  /* Border Radius */
+  --parlour--radius-sm: 2px;
+  --parlour--radius-md: 4px;
+  --parlour--radius-lg: 8px;
+  --parlour--radius-xl: 12px;
+  --parlour--radius-full: 9999px;
+
+  /* Transitions */
+  --parlour--transition-fast: 150ms ease;
+  --parlour--transition-base: 250ms ease;
+
+  /* Z-Index */
+  --parlour--z-100: 100;
+  --parlour--z-200: 200;
+  --parlour--z-500: 500;
+
+  /* Layout */
+  --parlour--layout-content-size: 768px;
+  --parlour--layout-wide-size: 1152px;
+  --parlour--layout-small-size: 600px;
+  --parlour--layout-full-size: 100vw;
+
+  /* Viewport */
+  --parlour--viewport-mobile: 600px;
+  --parlour--viewport-tablet: 768px;
+
+  /* Root Spacing */
+  --parlour--root-padding-x: var(--parlour--spacing-x-large);
+  --parlour--root-padding-y: 0;
+  --parlour--root-padding-top: var(--parlour--root-padding-y);
+  --parlour--root-padding-right: var(--parlour--root-padding-x);
+  --parlour--root-padding-bottom: var(--parlour--root-padding-y);
+  --parlour--root-padding-left: var(--parlour--root-padding-x);
+  --parlour--root-block-gap: 0;
+}

package/dist/styles/parlour-typography.css

@@ -0,0 +1,29 @@
+/* Auto-generated by component2block — do not edit manually */
+
+.is-layout-constrained > * + h1 {
+  margin-block-start: var(--parlour--spacing-large);
+}
+
+.is-layout-constrained > * + h2 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h3 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h4 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h5 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h6 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-block-start: var(--parlour--spacing-small);
+}

package/dist/styles/parlour-typography.scss

@@ -0,0 +1,29 @@
+/* Auto-generated by component2block — do not edit manually */
+
+.is-layout-constrained > * + h1 {
+  margin-block-start: var(--parlour--spacing-large);
+}
+
+.is-layout-constrained > * + h2 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h3 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h4 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h5 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > * + h6 {
+  margin-block-start: var(--parlour--spacing-medium);
+}
+
+.is-layout-constrained > :is(h1, h2, h3, h4, h5, h6) + * {
+  margin-block-start: var(--parlour--spacing-small);
+}

package/dist/utils/propClasses.d.ts

@@ -0,0 +1,101 @@
+export declare const maxWidthClasses: {
+    alignsmall: string;
+    aligncontent: string;
+    alignwide: string;
+    alignfull: string;
+};
+export declare const elementClasses: {
+    div: string;
+    section: string;
+    header: string;
+    main: string;
+    footer: string;
+    article: string;
+    nav: string;
+    aside: string;
+    ul: string;
+    ol: string;
+};
+export declare const gridColumnClasses: {
+    '1': string;
+    '2': string;
+    '3': string;
+    '4': string;
+    '1/3': string;
+    '2/3': string;
+};
+export declare const colorClasses: {
+    black: "black";
+    white: "white";
+    'accent-primary': "accent-primary";
+    'accent-secondary': "accent-secondary";
+    'neutral-50': "neutral-50";
+    'neutral-100': "neutral-100";
+    'neutral-200': "neutral-200";
+    'neutral-300': "neutral-300";
+    'neutral-400': "neutral-400";
+    'neutral-500': "neutral-500";
+    'neutral-600': "neutral-600";
+    'neutral-700': "neutral-700";
+    'neutral-800': "neutral-800";
+    'neutral-900': "neutral-900";
+    'neutral-950': "neutral-950";
+    info: "info";
+    success: "success";
+    warning: "warning";
+    error: "error";
+    linkedin: "linkedin";
+    facebook: "facebook";
+    bluesky: "bluesky";
+    twitter: "twitter";
+    instagram: "instagram";
+    youtube: "youtube";
+    tiktok: "tiktok";
+};
+export declare const spacingClasses: {
+    '3-x-small': "3-x-small";
+    '2-x-small': "2-x-small";
+    'x-small': "x-small";
+    small: "small";
+    normal: "normal";
+    medium: "medium";
+    large: "large";
+    'x-large': "x-large";
+    '2-x-large': "2-x-large";
+    '3-x-large': "3-x-large";
+    '4-x-large': "4-x-large";
+    '5-x-large': "5-x-large";
+    none: string;
+};
+export declare const borderRadiusClasses: {
+    sm: "sm";
+    md: "md";
+    lg: "lg";
+    xl: "xl";
+    full: "full";
+    none: string;
+};
+export declare const justifyClasses: {
+    start: string;
+    end: string;
+    center: string;
+};
+export declare const flexJustifyClasses: {
+    start: string;
+    center: string;
+    end: string;
+    'space-between': string;
+};
+export declare const flexAlignClasses: {
+    start: string;
+    center: string;
+    end: string;
+    stretch: string;
+};
+export declare const backgroundColorClasses: {
+    light: string;
+    medium: string;
+    dark: string;
+    white: string;
+};
+//# sourceMappingURL=propClasses.d.ts.map

package/dist/utils/propClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"propClasses.d.ts","sourceRoot":"","sources":["../../src/utils/propClasses.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe;;;;;CAK3B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;CAW1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;CAO7B,CAAC;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAExB,CAAC;AAEF,eAAO,MAAM,cAAc;;;;;;;;;;;;;;CAG1B,CAAC;AAEF,eAAO,MAAM,mBAAmB;;;;;;;CAG/B,CAAC;AAEF,eAAO,MAAM,cAAc;;;;CAI1B,CAAC;AAIF,eAAO,MAAM,kBAAkB;;;;;CAK9B,CAAC;AAGF,eAAO,MAAM,gBAAgB;;;;;CAK5B,CAAC;AAIF,eAAO,MAAM,sBAAsB;;;;;CAKlC,CAAC"}