@texturehq/edges 1.23.2 → 1.23.3

package/dist/styles/responsive-typography.css

@@ -0,0 +1,84 @@
+/**
+ * Responsive Typography Scale
+ *
+ * Font sizes scale down on mobile for better readability on small screens.
+ * Desktop values match the canonical design tokens.
+ *
+ * Strategy: Keep xs/sm/base standard for legibility, compress hierarchy from lg upward.
+ *
+ * Note: Tailwind 4 uses --text-* variables (e.g., --text-4xl) for its utility classes,
+ * so we override those here. The --font-size-* variables are also overridden for
+ * any code that references them directly.
+ */
+
+@layer base {
+  :root {
+    /* MOBILE scale (keep sm/base standard for legibility) */
+
+    /* Tailwind 4 utility variables (--text-*) */
+    --text-xs: 0.75rem; /* 12px */
+    --text-sm: 0.875rem; /* 14px */
+    --text-base: 1rem; /* 16px */
+    --text-lg: 1rem; /* 16px (was 18px desktop) */
+    --text-xl: 1.125rem; /* 18px */
+    --text-2xl: 1.25rem; /* 20px */
+    --text-3xl: 1.5rem; /* 24px */
+    --text-4xl: 1.875rem; /* 30px */
+    --text-5xl: 2.25rem; /* 36px */
+    --text-6xl: 3rem; /* 48px */
+    --text-7xl: 3.5rem; /* 56px */
+    --text-8xl: 4rem; /* 64px */
+    --text-9xl: 4.5rem; /* 72px */
+
+    /* Design token variables (--font-size-*) for direct references */
+    --font-size-xs: 0.75rem; /* 12px */
+    --font-size-sm: 0.875rem; /* 14px */
+    --font-size-base: 1rem; /* 16px */
+    --font-size-lg: 1rem; /* 16px (was 18px desktop) */
+    --font-size-xl: 1.125rem; /* 18px */
+    --font-size-2xl: 1.25rem; /* 20px */
+    --font-size-3xl: 1.5rem; /* 24px */
+    --font-size-4xl: 1.875rem; /* 30px */
+    --font-size-5xl: 2.25rem; /* 36px */
+    --font-size-6xl: 3rem; /* 48px */
+    --font-size-7xl: 3.5rem; /* 56px */
+    --font-size-8xl: 4rem; /* 64px */
+    --font-size-9xl: 4.5rem; /* 72px */
+  }
+
+  @media (min-width: 768px) {
+    :root {
+      /* DESKTOP scale (canonical token values) */
+
+      /* Tailwind 4 utility variables (--text-*) */
+      --text-xs: 0.75rem; /* 12px */
+      --text-sm: 0.875rem; /* 14px */
+      --text-base: 1rem; /* 16px */
+      --text-lg: 1.125rem; /* 18px */
+      --text-xl: 1.25rem; /* 20px */
+      --text-2xl: 1.5rem; /* 24px */
+      --text-3xl: 1.875rem; /* 30px */
+      --text-4xl: 2.25rem; /* 36px */
+      --text-5xl: 3rem; /* 48px */
+      --text-6xl: 3.75rem; /* 60px */
+      --text-7xl: 4.5rem; /* 72px */
+      --text-8xl: 6rem; /* 96px */
+      --text-9xl: 8rem; /* 128px */
+
+      /* Design token variables (--font-size-*) for direct references */
+      --font-size-xs: 0.75rem; /* 12px */
+      --font-size-sm: 0.875rem; /* 14px */
+      --font-size-base: 1rem; /* 16px */
+      --font-size-lg: 1.125rem; /* 18px */
+      --font-size-xl: 1.25rem; /* 20px */
+      --font-size-2xl: 1.5rem; /* 24px */
+      --font-size-3xl: 1.875rem; /* 30px */
+      --font-size-4xl: 2.25rem; /* 36px */
+      --font-size-5xl: 3rem; /* 48px */
+      --font-size-6xl: 3.75rem; /* 60px */
+      --font-size-7xl: 4.5rem; /* 72px */
+      --font-size-8xl: 6rem; /* 96px */
+      --font-size-9xl: 8rem; /* 128px */
+    }
+  }
+}

package/dist/styles.css

@@ -440,19 +440,6 @@
   --font-family-brand: 'TT Firs Neue', 'Helvetica Neue', Arial, system-ui, sans-serif;
   --font-family-serif: Merriweather, serif;
   --font-family-mono: 'Fira Code', monospace;
-  --font-size-xs: 0.75rem;
-  --font-size-sm: 0.875rem;
-  --font-size-base: 1rem;
-  --font-size-lg: 1.125rem;
-  --font-size-xl: 1.25rem;
-  --font-size-2xl: 1.5rem;
-  --font-size-3xl: 1.875rem;
-  --font-size-4xl: 2.25rem;
-  --font-size-5xl: 3rem;
-  --font-size-6xl: 3.75rem;
-  --font-size-7xl: 4.5rem;
-  --font-size-8xl: 6rem;
-  --font-size-9xl: 8rem;
   --font-weight-thin: 100;
   --font-weight-extralight: 200;
   --font-weight-light: 300;
@@ -703,6 +690,66 @@
   --color-skeleton-highlight: #4b5563;
   --color-skeleton-wave: rgba(255, 255, 255, 0.15);
 }
+@layer base {
+  :root {
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1rem;
+    --text-xl: 1.125rem;
+    --text-2xl: 1.25rem;
+    --text-3xl: 1.5rem;
+    --text-4xl: 1.875rem;
+    --text-5xl: 2.25rem;
+    --text-6xl: 3rem;
+    --text-7xl: 3.5rem;
+    --text-8xl: 4rem;
+    --text-9xl: 4.5rem;
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.875rem;
+    --font-size-base: 1rem;
+    --font-size-lg: 1rem;
+    --font-size-xl: 1.125rem;
+    --font-size-2xl: 1.25rem;
+    --font-size-3xl: 1.5rem;
+    --font-size-4xl: 1.875rem;
+    --font-size-5xl: 2.25rem;
+    --font-size-6xl: 3rem;
+    --font-size-7xl: 3.5rem;
+    --font-size-8xl: 4rem;
+    --font-size-9xl: 4.5rem;
+  }
+  @media (min-width: 768px) {
+    :root {
+      --text-xs: 0.75rem;
+      --text-sm: 0.875rem;
+      --text-base: 1rem;
+      --text-lg: 1.125rem;
+      --text-xl: 1.25rem;
+      --text-2xl: 1.5rem;
+      --text-3xl: 1.875rem;
+      --text-4xl: 2.25rem;
+      --text-5xl: 3rem;
+      --text-6xl: 3.75rem;
+      --text-7xl: 4.5rem;
+      --text-8xl: 6rem;
+      --text-9xl: 8rem;
+      --font-size-xs: 0.75rem;
+      --font-size-sm: 0.875rem;
+      --font-size-base: 1rem;
+      --font-size-lg: 1.125rem;
+      --font-size-xl: 1.25rem;
+      --font-size-2xl: 1.5rem;
+      --font-size-3xl: 1.875rem;
+      --font-size-4xl: 2.25rem;
+      --font-size-5xl: 3rem;
+      --font-size-6xl: 3.75rem;
+      --font-size-7xl: 4.5rem;
+      --font-size-8xl: 6rem;
+      --font-size-9xl: 8rem;
+    }
+  }
+}
 :root {
   --color-viz-default: #0082ff;
   --color-viz-categorical-1: #a3eae4;
@@ -1628,6 +1675,9 @@
   .-mt-px {
     margin-top: -1px;
   }
+  .mt-0 {
+    margin-top: var(--spacing-0);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -1664,6 +1714,9 @@
   .mr-3 {
     margin-right: var(--spacing-3);
   }
+  .-mb-2 {
+    margin-bottom: calc(var(--spacing-2) * -1);
+  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -1835,9 +1888,6 @@
   .h-\[60px\] {
     height: 60px;
   }
-  .h-\[70vh\] {
-    height: 70vh;
-  }
   .h-\[100dvh\] {
     height: 100dvh;
   }
@@ -2127,10 +2177,6 @@
   .max-w-\[600px\] {
     max-width: 600px;
   }
-  .max-w-fit {
-    max-width: -moz-fit-content;
-    max-width: fit-content;
-  }
   .max-w-full {
     max-width: 100%;
   }
@@ -2779,6 +2825,10 @@
     border-top-left-radius: var(--radius-none);
     border-top-right-radius: var(--radius-none);
   }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
   .rounded-l-sm {
     border-top-left-radius: var(--radius-sm);
     border-bottom-left-radius: var(--radius-sm);
@@ -5569,6 +5619,21 @@
       grid-column: 1 / -1;
     }
   }
+  .sm\:mx-4 {
+    @media (width >= 40rem) {
+      margin-inline: var(--spacing-4);
+    }
+  }
+  .sm\:mt-4 {
+    @media (width >= 40rem) {
+      margin-top: var(--spacing-4);
+    }
+  }
+  .sm\:-mb-0 {
+    @media (width >= 40rem) {
+      margin-bottom: calc(var(--spacing-0) * -1);
+    }
+  }
   .sm\:block {
     @media (width >= 40rem) {
       display: block;
@@ -5609,6 +5674,11 @@
       max-width: var(--container-sm);
     }
   }
+  .sm\:auto-rows-fr {
+    @media (width >= 40rem) {
+      grid-auto-rows: minmax(0, 1fr);
+    }
+  }
   .sm\:grid-cols-1 {
     @media (width >= 40rem) {
       grid-template-columns: repeat(1, minmax(0, 1fr));
@@ -5689,6 +5759,27 @@
       justify-content: space-between;
     }
   }
+  .sm\:overflow-visible {
+    @media (width >= 40rem) {
+      overflow: visible;
+    }
+  }
+  .sm\:rounded-xl {
+    @media (width >= 40rem) {
+      border-radius: var(--radius-xl);
+    }
+  }
+  .sm\:border {
+    @media (width >= 40rem) {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+  }
+  .sm\:border-border-default {
+    @media (width >= 40rem) {
+      border-color: var(--color-border-default);
+    }
+  }
   .sm\:p-2 {
     @media (width >= 40rem) {
       padding: var(--spacing-2);
@@ -5699,6 +5790,11 @@
       padding: var(--spacing-4);
     }
   }
+  .sm\:pb-0 {
+    @media (width >= 40rem) {
+      padding-bottom: var(--spacing-0);
+    }
+  }
   .md\:relative {
     @media (width >= 48rem) {
       position: relative;

package/dist/theme.css

@@ -13,6 +13,10 @@
 @import "./generated/tailwind-tokens-light.css";
 @import "./generated/tailwind-tokens-dark.css";
 
+/* Layer 1b: Responsive Typography
+   Overrides font-size tokens with responsive values (smaller on mobile, larger on desktop) */
+@import "./styles/responsive-typography.css";
+
 /* Data visualization colors loaded separately due to Tailwind 4 @theme filtering
    See: https://github.com/tailwindlabs/tailwindcss/issues/XXXXX
    These variables are also in tailwind-tokens-light.css but Tailwind strips them

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.23.2",
-  "generatedAt": "2025-11-25T23:02:10.040Z",
+  "version": "1.23.3",
+  "generatedAt": "2025-11-27T15:41:27.560Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like breakpoints, debouncing, local storage, and media queries",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.23.2",
+  "version": "1.23.3",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",

package/scripts/copy-assets.js

@@ -14,6 +14,7 @@ try {
     "src/styles/animations.css",
     "src/styles/computed.css",
     "src/styles/utilities.css",
+    "src/styles/responsive-typography.css",
   ];
 
   // Create styles directory in dist