@epicbagel/saas-kit 0.0.0-stage → 1.1.0

package/src/styles/tokens/forms.css

@@ -0,0 +1,61 @@
+/* Disable iOS Safari's text autosizing.
+ * Without this, the OS silently inflates body/input text in narrow
+ * single-column layouts — making the same primitive render at a
+ * different size across apps depending on viewport width. Lives in
+ * the kit so every consumer is protected by default. */
+@layer base {
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+}
+
+/* Form control font size: 14px, tracking the control baseline (see the
+ * tailwind-preset fontSize), so inputs match the surrounding body text.
+ * On iOS Safari the unlayered @supports rule in tokens/theme.css keeps a
+ * 16px floor on compact viewports instead, because a sub-16px field makes
+ * Safari zoom on focus; being unlayered, it wins over these base rules. */
+@layer base {
+  @media (max-width: 768px) {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    input[type="tel"],
+    input[type="number"],
+    input[type="search"],
+    input[type="url"],
+    input:not([type]),
+    textarea,
+    select {
+      font-size: max(14px, 0.875rem);
+    }
+
+    /* Ensure our input components respect this too */
+    .input,
+    [data-input] {
+      font-size: max(14px, 0.875rem);
+    }
+  }
+
+  /* Desktop - track the 14px control baseline (see tailwind-preset fontSize) */
+  @media (min-width: 769px) {
+    input[type="text"],
+    input[type="email"],
+    input[type="password"],
+    input[type="tel"],
+    input[type="number"],
+    input[type="search"],
+    input[type="url"],
+    input:not([type]),
+    textarea,
+    select {
+      font-size: 14px;
+    }
+
+    /* Ensure our input components respect this too */
+    .input,
+    [data-input] {
+      font-size: 14px;
+    }
+  }
+}

package/src/styles/tokens/theme.css

@@ -0,0 +1,93 @@
+/* The @theme token map (fonts, type scale, semantic colours, radius scale),
+ * class-based dark mode and the compact-viewport type scale. Part of
+ * tokens.css. The palette values these read come from palette.gen.css. */
+
+/* Class-based dark mode — themes toggle `.dark` on :root. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --default-font-family: var(--font-sans);
+  --default-mono-font-family: var(--font-mono);
+  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas,
+    "Liberation Mono", Menlo, monospace;
+
+  /* Rem-based product type scale: 14px mobile root, 16px desktop root. */
+  --text-xs: 0.75rem;   --text-xs--line-height: 1rem;
+  --text-sm: 0.875rem;  --text-sm--line-height: 1.25rem;
+  --text-base: 1rem;    --text-base--line-height: 1.8rem;
+  --leading-relaxed: 1.8rem;
+  --text-lg: 1.125rem;  --text-lg--line-height: 1.75rem;
+  --text-xl: 1.25rem;   --text-xl--line-height: 1.875rem;
+  --text-2xl: 1.5rem;   --text-2xl--line-height: 2rem;
+  --text-3xl: 1.875rem; --text-3xl--line-height: 2.375rem;
+  --text-4xl: 2.25rem;  --text-4xl--line-height: 2.75rem;
+  --text-5xl: 3rem;     --text-5xl--line-height: 3.5rem;
+  --text-6xl: 3.75rem;  --text-6xl--line-height: 4.25rem;
+
+  /* Semantic tokens map onto the HSL CSS vars set per-theme below. */
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --color-sidebar: hsl(var(--sidebar-background));
+  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
+  --color-sidebar-primary: hsl(var(--sidebar-primary));
+  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
+  --color-sidebar-accent: hsl(var(--sidebar-accent));
+  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
+  --color-sidebar-border: hsl(var(--sidebar-border));
+  --color-sidebar-ring: hsl(var(--sidebar-ring));
+
+  /* Every radius derives from --radius so one var moves the whole system. */
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+}
+
+/* Compact viewports use a smaller root scale, reducing rem-based typography,
+ * spacing and control dimensions together. Desktop keeps the 16px baseline. */
+@media (max-width: 47.999rem) {
+  :root,
+  :host {
+    font-size: 87.5%;
+  }
+
+  /* Keep entered form text at the iOS-safe 16px floor while letting quieter
+   * placeholder copy follow the compact viewport's 14px base scale. */
+  input::placeholder,
+  textarea::placeholder {
+    font-size: 1rem;
+  }
+}
+
+/* A sub-16px form field makes iOS Safari zoom the viewport on focus. Preserve
+ * the compact body scale without introducing that disruptive interaction. */
+@supports (-webkit-touch-callout: none) {
+  @media (max-width: 47.999rem) {
+    input,
+    textarea,
+    select {
+      font-size: max(16px, 1em);
+    }
+  }
+}

package/src/styles/tokens.css

@@ -0,0 +1,17 @@
+/* The kit's design tokens, for a host that brings its own Tailwind:
+ *
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "<kit>/styles/tokens.css";
+ *   @import "<kit>/styles/utilities.css";
+ *   @import "<kit>/styles/source.css";
+ *
+ * The neutral palette (generated), the @theme token map, dark mode, the
+ * base-layer rules and the container utility. No private palettes and no
+ * @source line — source.css (or the host's own @source for the kit's
+ * dist) registers the kit's classes. */
+@import "./palette.gen.css";
+@import "./tokens/theme.css";
+@import "./tokens/base.css";
+@import "./tokens/container.css";
+@import "./tokens/forms.css";

package/src/styles/utilities.css

@@ -0,0 +1,10 @@
+/* Palette-free utilities and component classes: shadcn's data-* variants,
+ * no-scrollbar, scroll-fade and shimmer; the cn-attachment, cn-bubble,
+ * cn-marker, cn-message and cn-message-scroller classes; and the kit's
+ * keyframes. Defines no palette and no @source.
+ * The component classes @apply the semantic colours (bg-muted,
+ * text-muted-foreground, ring-ring, …), so the host's @theme must define
+ * them — tokens.css does. */
+@import "./shadcn.css";
+@import "./components.css";
+@import "./keyframes.css";