@snowcone-app/ui 0.1.43 → 0.2.1

package/src/styles/base.css

@@ -0,0 +1,380 @@
+/* =============================================================================
+ * base.css — Shared Base Styles for Snowcone Apps
+ *
+ * This file contains the semantic font system, link styles, code formatting,
+ * list styles, and utility classes shared across all apps. Import it from
+ * your app's globals.css:
+ *
+ *   @import "@merch/ui/styles/base.css";
+ *   (or relative path: ../../../packages/ui/src/styles/base.css)
+ *
+ * CASCADE STRATEGY:
+ * All rules live inside @layer base. In Tailwind v4, the cascade order is:
+ *   @layer theme < @layer base < @layer components < @layer utilities
+ *
+ * This means Tailwind utility classes (text-white, font-normal, etc.) will
+ * always override these defaults. This is the correct behavior — base.css
+ * provides sensible defaults, utilities provide explicit overrides.
+ *
+ * Rules that use !important (code fonts, fixed radius) still win because
+ * !important in @layer base beats normal declarations in @layer utilities.
+ * ============================================================================= */
+
+@layer base {
+
+/* =============================================================================
+ * Body Defaults
+ * ============================================================================= */
+
+body {
+  margin: 0;
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+  font-weight: var(--font-weight-body, 400);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* =============================================================================
+ * Semantic Font System
+ *
+ * Font roles and their CSS variables:
+ * - --font-heading: h1-h6, card titles, section headers
+ * - --font-body: paragraphs, default text
+ * - --font-label: form labels, field names
+ * - --font-button: button text, CTAs
+ * - --font-caption: small text, descriptions, helper text
+ * - --font-display: hero text, prices, prominent numbers
+ * - --font-accent: emphasis, blockquotes, pullquotes
+ *
+ * Weight variables:
+ * - --font-weight-body (400)
+ * - --font-weight-heading (600)
+ * - --font-weight-button (500)
+ * - --font-weight-label (500)
+ * - --font-weight-caption (400)
+ * - --font-weight-display (700)
+ * ============================================================================= */
+
+/* Apply body font to all elements except code */
+*:not(code):not(pre) {
+  font-family: var(--font-body, inherit);
+}
+
+/* Headings use --font-heading */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-heading, var(--font-body));
+  font-weight: var(--font-weight-heading, 600);
+  color: var(--color-heading, var(--color-foreground));
+}
+
+/* Large text sizes also use heading font */
+.text-xl,
+.text-2xl,
+.text-3xl,
+.text-4xl,
+.font-bold,
+.font-extrabold {
+  font-family: var(--font-heading, var(--font-body));
+  font-weight: var(--font-weight-heading, 600);
+}
+
+.font-semibold {
+  font-family: var(--font-heading, var(--font-body));
+  font-weight: var(--font-weight-heading, 600);
+}
+
+/* Buttons use --font-button + pointer cursor
+ * Tailwind v4 preflight resets cursor to 'default' on buttons.
+ * Restore pointer for all interactive button-like elements. */
+button:not(code):not(pre),
+.btn:not(code):not(pre),
+.button:not(code):not(pre),
+[role="button"]:not(code):not(pre),
+.font-button {
+  font-family: var(--font-button);
+  font-weight: var(--font-weight-button, 500);
+  cursor: pointer;
+}
+
+/* Option buttons should maintain body font for options */
+button[role="radio"],
+.floating-action-button {
+  font-family: var(--font-body, inherit);
+}
+
+/* Labels use --font-label */
+label,
+.label,
+.font-label {
+  font-family: var(--font-label, var(--font-body));
+  font-weight: var(--font-weight-label, 500);
+}
+
+/* Legend (fieldset captions) use heading font for hierarchy */
+legend {
+  font-family: var(--font-heading, var(--font-body));
+  font-weight: var(--font-weight-heading, 600);
+}
+
+/* Icons use theme stroke width — !important needed to override inline SVG attributes */
+svg,
+.icon,
+[data-lucide] {
+  stroke-width: var(--theme-icon-stroke-width, 1.5) !important;
+}
+
+/* =============================================================================
+ * Semantic Font Utility Classes
+ *
+ * Use these classes to apply specific font roles to elements:
+ * - .font-heading: Apply heading font
+ * - .font-body: Apply body font
+ * - .font-label: Apply label font (defined above with label selector)
+ * - .font-button: Apply button font (defined above with button selector)
+ * - .font-caption: Apply caption font
+ * - .font-display: Apply display font
+ * - .font-accent: Apply accent font
+ * ============================================================================= */
+
+.font-body {
+  font-family: var(--font-body, ui-sans-serif, system-ui, sans-serif);
+  font-weight: var(--font-weight-body, 400);
+}
+
+.font-heading {
+  font-family: var(--font-heading, var(--font-body));
+  font-weight: var(--font-weight-heading, 600);
+}
+
+.font-caption {
+  font-family: var(--font-caption, var(--font-body));
+  font-weight: var(--font-weight-caption, 400);
+}
+
+.font-display {
+  font-family: var(--font-display, var(--font-heading));
+  font-weight: var(--font-weight-display, 700);
+}
+
+.font-accent {
+  font-family: var(--font-accent, var(--font-heading));
+}
+
+/* =============================================================================
+ * Link Styles — only in content areas (bare <a> tags without classes)
+ * ============================================================================= */
+
+main a:not([class]),
+article a:not([class]),
+section a:not([class]),
+.prose a {
+  color: var(--color-primary);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: color-mix(
+    in srgb,
+    var(--color-primary) 40%,
+    transparent
+  );
+  text-underline-offset: 4px;
+  transition: text-decoration-color 0.2s ease;
+}
+
+main a:not([class]):hover,
+article a:not([class]):hover,
+section a:not([class]):hover,
+.prose a:hover {
+  text-decoration-color: var(--color-primary);
+}
+
+/* Code blocks and navigation shouldn't have link styling */
+code a,
+pre a,
+nav a,
+aside a,
+header a {
+  text-decoration: none;
+  font-weight: inherit;
+}
+
+/* =============================================================================
+ * Code Styling
+ * ============================================================================= */
+
+/* Inline code badges (not in pre blocks) */
+:not(pre) > code {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace !important;
+  font-size: 0.875em;
+  border-radius: 0.25rem;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Default styling for inline code */
+:not(pre) > code:not(.prop-name):not(.type-badge):not(.required-badge) {
+  padding: 0.2em 0.4em;
+  background-color: var(--color-code-bg) !important;
+  color: var(--color-code-fg) !important;
+  font-weight: 400 !important;
+}
+
+/* Long code paths that need horizontal scrolling */
+p > code,
+div > code {
+  overflow-x: auto;
+  max-width: 100%;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+/* Ensure code blocks use monospace font — !important needed to override theme fonts */
+pre,
+pre *,
+pre code,
+pre span,
+pre .line,
+.install-block,
+.install-block * {
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace !important;
+}
+
+/* Code block line numbers */
+.line {
+  display: inline-block;
+}
+
+.line::before {
+  content: attr(data-line);
+  display: inline-block;
+  width: 2rem;
+  margin-right: 1rem;
+  padding-left: 0.5rem;
+  text-align: right;
+  color: var(--color-muted-foreground);
+  opacity: 0.5;
+  user-select: none;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace !important;
+}
+
+/* Prevent code blocks from overflowing on mobile */
+pre.shiki {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* =============================================================================
+ * Code Badge Styles
+ * !important needed to override inherited inline code styling
+ * ============================================================================= */
+
+/* Prop name badges - bold monospace text, no background, accent color */
+code.prop-name {
+  font-weight: 600 !important;
+  padding: 0 !important;
+  background: none !important;
+  vertical-align: baseline !important;
+  color: var(--color-primary) !important;
+}
+
+/* Type badges - compact padding matching reference */
+code.type-badge {
+  padding: 0.125rem 0.375rem !important;
+  background-color: var(--color-code-bg) !important;
+  color: var(--color-code-fg) !important;
+  font-weight: 400 !important;
+  vertical-align: baseline !important;
+  position: relative;
+  top: -3px;
+}
+
+/* Required badges - compact padding matching reference, red color from Shiki theme */
+code.required-badge {
+  padding: 0.125rem 0.375rem !important;
+  background-color: var(--color-code-bg) !important;
+  color: var(--color-code-error) !important;
+  font-weight: 400 !important;
+  vertical-align: baseline !important;
+  position: relative;
+  top: -3px;
+}
+
+/* =============================================================================
+ * Ordered List Styles
+ * ============================================================================= */
+
+ol:not(.grid) {
+  list-style-position: outside;
+  padding-left: 1.5rem;
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
+ol:not(.grid) li {
+  padding-left: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+ol:not(.grid) li:last-child {
+  margin-bottom: 0;
+}
+
+/* =============================================================================
+ * text-on-primary Utility
+ *
+ * Dynamically calculated contrast color set by useTheme hook.
+ * Use for text on primary-colored backgrounds (buttons, badges, etc.)
+ * Example: <button className="bg-primary text-on-primary">Click me</button>
+ *
+ * !important needed to override any inherited color on primary backgrounds.
+ * ============================================================================= */
+.text-on-primary {
+  color: var(--color-primary-foreground) !important;
+}
+
+/* =============================================================================
+ * View Transitions API (for MagicUI theme toggler animation)
+ * ============================================================================= */
+
+::view-transition-old(root),
+::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* =============================================================================
+ * Fixed Radius Utilities
+ *
+ * Use when an element MUST maintain a specific radius regardless of theme:
+ * - Heart/favorite buttons that should always be circular
+ * - Avatar placeholders that must stay round in brutalist themes
+ * - Any element where the shape is functional, not aesthetic
+ *
+ * !important is intentional — these explicitly override theme radius.
+ * ============================================================================= */
+.rounded-fixed-full {
+  border-radius: 9999px !important;
+}
+
+.rounded-fixed-none {
+  border-radius: 0 !important;
+}
+
+.rounded-fixed-t-2xl {
+  border-top-left-radius: 1rem !important;
+  border-top-right-radius: 1rem !important;
+}
+
+} /* end @layer base */

package/src/styles/defaults.css

@@ -0,0 +1,280 @@
+/* =============================================================================
+ * defaults.css — Sensible Defaults for @snowcone-app/ui Components
+ *
+ * This file is the single source of truth for default design tokens used by
+ * any app consuming @snowcone-app/ui components. It provides a complete light theme
+ * on :root and a dark theme on .dark, using direct hex/pixel values with no
+ * external var() dependencies.
+ *
+ * HOW TO USE:
+ *   Import this file early in your app's CSS, before component styles:
+ *
+ *     @import "@merch/ui/styles/defaults.css";
+ *
+ * HOW TO OVERRIDE:
+ *   Declare your own values on :root (or .dark) in a stylesheet that loads
+ *   after this one. Any variable you set will take precedence:
+ *
+ *     :root {
+ *       --color-primary: #6366f1;
+ *       --font-heading: "Custom Font", sans-serif;
+ *     }
+ *
+ *   You can also override per-component or per-section with a scoped class.
+ *
+ * DESIGN:
+ *   - All color values are direct hex codes — no var() chains.
+ *   - Typography and radius values are direct px/rem — no var() chains.
+ *   - Legacy canvas aliases (--primary, --accent, etc.) reference the
+ *     --color-* versions via var(), which is safe because both live in the
+ *     same :root scope.
+ * ============================================================================= */
+
+/* =============================================================================
+ * LIGHT THEME (default)
+ * ============================================================================= */
+
+:root {
+  /* ---------------------------------------------------------------------------
+   * Colors — Core Palette
+   * ------------------------------------------------------------------------- */
+  --color-background: #f5f5f5;
+  --color-foreground: #0a0a0a;
+
+  --color-card: #ffffff;
+  --color-card-foreground: #0a0a0a;
+
+  --color-surface: #ffffff;
+  --color-surface-foreground: #0a0a0a;
+
+  --color-popover: #ffffff;
+  --color-popover-foreground: #0a0a0a;
+
+  --color-muted: #f4f4f5;
+  /* Darkened from zinc-500 (#71717a) so muted text clears WCAG AA 4.5:1 on the
+   * #f5f5f5 page background — #71717a only reached 4.43:1 (axe color-contrast). */
+  --color-muted-foreground: #6b6b73;
+
+  --color-primary: #000000;
+  --color-primary-foreground: #ffffff;
+
+  --color-secondary: #f4f4f5;
+  --color-secondary-foreground: #18181b;
+
+  --color-accent: #f4f4f5;
+  --color-accent-foreground: #18181b;
+
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+
+  --color-border: #e4e4e7;
+  --color-input: #e4e4e7;
+  --color-ring: #000000;
+  --color-focus: #000000;
+
+  --color-field: #ffffff;
+  /* On-surface variants — fields and raised elements inside a Surface/Card.
+   * Components reference these via bg-[var(--color-field-on-surface)] etc.
+   * (input, textarea, select, checkbox, radio, button hover states). They
+   * MUST be defined here: an undefined var() in an arbitrary utility
+   * resolves to transparent, which renders form fields invisible inside
+   * drawers and cards. Values match oklch-theme.ts. */
+  --color-field-on-surface: #f4f4f5;
+  --color-default-on-surface: #e4e4e7;
+
+  --color-default: #f0f0f1;
+  --color-default-foreground: #18181b;
+
+  --color-code-bg: #f5f5f5;
+  --color-code-fg: #0a0a0a;
+  /* Opaque code-block surface + border. White lifts the block off the #f5f5f5
+   * page so snippets read as a distinct surface instead of blending in. */
+  --color-code-bg-solid: #ffffff;
+  --color-code-border: #e4e4e7;
+
+  --color-accent-text-overlay: #fbbf24;
+
+  /* ---------------------------------------------------------------------------
+   * Colors — Status
+   * ------------------------------------------------------------------------- */
+  --success: #22c55e;
+  --success-foreground: #ffffff;
+  --warning: #f59e0b;
+  --warning-foreground: #000000;
+  --danger: #ef4444;
+  --danger-foreground: #ffffff;
+
+  /* ---------------------------------------------------------------------------
+   * Typography — Font Families
+   * ------------------------------------------------------------------------- */
+  --font-heading: ui-sans-serif, system-ui, sans-serif;
+  --font-body: ui-sans-serif, system-ui, sans-serif;
+
+  /* Semantic roles — cascade from core fonts */
+  --font-label: var(--font-body);
+  --font-button: var(--font-body);
+  --font-caption: var(--font-body);
+  --font-display: var(--font-heading);
+  --font-accent: var(--font-heading);
+
+  /* ---------------------------------------------------------------------------
+   * Typography — Font Weights
+   * ------------------------------------------------------------------------- */
+  --font-weight-body: 400;
+  --font-weight-heading: 600;
+  --font-weight-button: 500;
+  --font-weight-label: 500;
+  --font-weight-caption: 400;
+  --font-weight-display: 700;
+
+  /* ---------------------------------------------------------------------------
+   * Radius
+   * ------------------------------------------------------------------------- */
+  --radius-sm: 2px;
+  --radius-md: 4px;
+  --radius-lg: 6px;
+  --radius-xl: 8px;
+  --radius-2xl: 12px;
+  --radius-3xl: 20px;
+  --radius-4xl: 24px;
+  --radius-full: 9999px;
+
+  /* Semantic radius roles */
+  --radius-button: 4px;
+  --radius-input: 4px;
+  --radius-card: 6px;
+  --radius-modal: 8px;
+  --radius-badge: 9999px;
+  --radius-avatar: 9999px;
+  --radius-tooltip: 6px;
+  --radius-image: 4px;
+
+  /* ---------------------------------------------------------------------------
+   * Shadows
+   * ------------------------------------------------------------------------- */
+  --shadow-card: 0 2px 4px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.06);
+
+  /* ---------------------------------------------------------------------------
+   * Spacing
+   * ------------------------------------------------------------------------- */
+  --spacing-option-groups: 1rem;
+  --spacing-option-items: 0.5rem;
+
+  /* ---------------------------------------------------------------------------
+   * Legacy Canvas Aliases
+   *
+   * These use var() to reference the --color-* versions above, which is safe
+   * because both are declared in the same :root scope.
+   * ------------------------------------------------------------------------- */
+  --primary: var(--color-primary);
+  --primary-foreground: var(--color-primary-foreground);
+  --accent: var(--color-primary);
+  --accent-foreground: var(--color-primary-foreground);
+  --background: var(--color-background);
+  --foreground: var(--color-foreground);
+  --border: var(--color-border);
+  --muted-foreground: var(--color-muted-foreground);
+  --surface: var(--color-surface);
+  --surface-foreground: var(--color-surface-foreground);
+  --field: var(--color-field);
+  --focus: var(--color-focus);
+  --overlay: var(--color-popover);
+  --overlay-foreground: var(--color-popover-foreground);
+  --divider: var(--color-border);
+  --field-background: var(--color-field);
+  --field-foreground: var(--color-foreground);
+  --field-placeholder: var(--color-muted-foreground);
+  --default: var(--color-default);
+  --default-foreground: var(--color-default-foreground);
+
+  /* ---------------------------------------------------------------------------
+   * Canvas-Specific
+   * ------------------------------------------------------------------------- */
+  --color-canvas-bg: #f8f8f8;
+  --color-text-selection: color-mix(in srgb, var(--color-primary) 45%, transparent);
+  --color-spacing-indicator: #ff0000;
+  --color-accent-hover: var(--color-primary);
+  --color-accent-hover-border: var(--color-primary);
+}
+
+/* =============================================================================
+ * DARK THEME
+ * ============================================================================= */
+
+.dark {
+  /* ---------------------------------------------------------------------------
+   * Colors — Core Palette
+   * ------------------------------------------------------------------------- */
+  --color-background: #0a0a0a;
+  --color-foreground: #fafafa;
+
+  /* Card / Surface / Popover bumped from #18181b (≈oklch 0.22) to lifted
+   * values so surfaces read as clearly raised against the page (#0a0a0a)
+   * in dark mode. Old values sat too close to the page once backdrop-blur
+   * smeared bright underlying pixels into the surface edge, which made
+   * drawers, popovers, and dropdowns look flush with the page.
+   *
+   *   #2c2c2e  ≈ oklch 0.30  — surface / card (iOS-native sheet)
+   *   #353538  ≈ oklch 0.35  — popover (overlays clearly elevated)
+   */
+  --color-card: #2c2c2e;
+  --color-card-foreground: #fafafa;
+
+  --color-surface: #2c2c2e;
+  --color-surface-foreground: #fafafa;
+
+  --color-popover: #353538;
+  --color-popover-foreground: #fafafa;
+
+  --color-muted: #27272a;
+  --color-muted-foreground: #a1a1aa;
+
+  --color-primary: #ffffff;
+  --color-primary-foreground: #000000;
+
+  --color-secondary: #27272a;
+  --color-secondary-foreground: #fafafa;
+
+  --color-accent: #27272a;
+  --color-accent-foreground: #fafafa;
+
+  --color-destructive: #ef4444;
+  --color-destructive-foreground: #ffffff;
+
+  /* Border bumped from #3f3f46 (≈oklch 0.37) to #52525a (≈oklch 0.42)
+   * so it stays visible on the lifted --color-surface (oklch 0.30). At
+   * the old value, borders on cards and drawers were almost invisible
+   * (only ~0.07 lightness above the lifted surface). */
+  --color-border: #52525a;
+  --color-input: #27272a;
+  --color-ring: #ffffff;
+  --color-focus: #ffffff;
+
+  --color-field: #18181b;
+  /* On-surface variants (see light theme note). Field reads as an inset
+   * well against the lifted #2c2c2e surface; default-on-surface sits one
+   * step above it for ghost/outline hover visibility. */
+  --color-field-on-surface: #18181b;
+  --color-default-on-surface: #3f3f46;
+
+  --color-default: #27272a;
+  --color-default-foreground: #fafafa;
+
+  --color-code-bg: #1a1a1a;
+  --color-code-fg: #ededed;
+  /* Opaque code-block surface + border. #1a1a1a sits one step above the
+   * #0a0a0a page so snippets read as a raised surface in dark mode. */
+  --color-code-bg-solid: #1a1a1a;
+  --color-code-border: #27272a;
+
+  --color-accent-text-overlay: #fcd34d;
+
+  --shadow-card: none;
+
+  /* ---------------------------------------------------------------------------
+   * Canvas-Specific (dark)
+   * ------------------------------------------------------------------------- */
+  --color-canvas-bg: #1a1a1a;
+  --color-text-selection: color-mix(in srgb, var(--color-primary) 50%, transparent);
+  --field-background: var(--color-surface);
+}