@getmicdrop/svelte-components 5.21.0 → 5.21.2

package/dist/tokens/typography-base.css

@@ -1,163 +1,163 @@
-/**
- * Typography Base Styles
- *
- * These base styles apply default typography to semantic HTML elements.
- * Import this file in your app's CSS to get consistent typography without
- * needing to add classes to every heading and paragraph.
- *
- * Usage in app.css:
- *   @import '@getmicdrop/svelte-components/tokens/typography-base.css';
- *
- * After importing, these elements will have consistent styling:
- *   <h1>Page Title</h1>        - No classes needed
- *   <h2>Section Title</h2>     - No classes needed
- *   <p>Body text</p>           - No classes needed
- *
- * Override when needed:
- *   <h1 class="text-3xl">Larger Title</h1>
- *   <p class="text-sm text-muted">Smaller muted text</p>
- */
-
-@layer base {
-  /* ==========================================================================
-   * HEADINGS
-   * Semantic heading hierarchy with consistent sizing, weight, and colors.
-   * Uses semibold weight for all headings to maintain visual hierarchy.
-   * ========================================================================== */
-
-  h1 {
-    @apply text-2xl font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h2 {
-    @apply text-xl font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h3 {
-    @apply text-lg font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h4 {
-    @apply text-base font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h5 {
-    @apply text-sm font-semibold text-gray-900 dark:text-white leading-tight;
-  }
-
-  h6 {
-    @apply text-xs font-semibold text-gray-900 dark:text-white leading-tight uppercase tracking-wide;
-  }
-
-  /* ==========================================================================
-   * BODY TEXT
-   * Default paragraph styling with comfortable reading line height.
-   * Uses secondary color (gray-600/gray-300) for body text to create
-   * visual hierarchy with headings.
-   * ========================================================================== */
-
-  p {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
-  }
-
-  /* ==========================================================================
-   * FORM LABELS
-   * Form labels are slightly smaller than body text with medium weight
-   * to distinguish them from regular text.
-   * ========================================================================== */
-
-  label {
-    @apply text-sm font-medium text-gray-900 dark:text-white;
-  }
-
-  /* ==========================================================================
-   * LINKS
-   * Blue links with hover underline for clear affordance.
-   * ========================================================================== */
-
-  a {
-    @apply text-blue-600 dark:text-blue-400 hover:underline;
-  }
-
-  /* ==========================================================================
-   * EMPHASIS
-   * Strong and emphasis elements inherit color but add weight/style.
-   * ========================================================================== */
-
-  strong, b {
-    @apply font-semibold;
-  }
-
-  em, i {
-    @apply italic;
-  }
-
-  /* ==========================================================================
-   * SMALL TEXT
-   * For fine print, captions, and secondary information.
-   * ========================================================================== */
-
-  small {
-    @apply text-sm text-gray-500 dark:text-gray-400;
-  }
-
-  /* ==========================================================================
-   * LISTS
-   * Consistent list styling that matches body text.
-   * ========================================================================== */
-
-  ul, ol {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
-  }
-
-  li {
-    @apply mb-1;
-  }
-
-  /* ==========================================================================
-   * BLOCKQUOTE
-   * Indented with left border for quoted content.
-   * ========================================================================== */
-
-  blockquote {
-    @apply pl-4 border-l-4 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 italic;
-  }
-
-  /* ==========================================================================
-   * CODE
-   * Monospace font with subtle background for inline code.
-   * ========================================================================== */
-
-  code {
-    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-gray-900 dark:text-gray-100;
-  }
-
-  pre {
-    @apply font-mono text-sm bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-gray-900 dark:text-gray-100;
-  }
-
-  pre code {
-    @apply bg-transparent p-0;
-  }
-
-  /* ==========================================================================
-   * MARK/HIGHLIGHT
-   * Yellow highlight for marked/highlighted text.
-   * ========================================================================== */
-
-  mark {
-    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
-  }
-}
-
-/* ==========================================================================
- * NOTE ON UTILITY CLASSES
- *
- * This file intentionally does NOT define utility classes like .text-muted,
- * .text-primary, etc. These are defined in individual app's app.css files
- * because they reference app-specific CSS custom properties (e.g., --Text-Tartiary).
- *
- * For typography utilities, import and use tokens from typography.ts:
- *   import { typography } from '@getmicdrop/svelte-components';
- *   <span class={typography.smMuted}>Helper text</span>
- * ========================================================================== */
+/**
+ * Typography Base Styles
+ *
+ * These base styles apply default typography to semantic HTML elements.
+ * Import this file in your app's CSS to get consistent typography without
+ * needing to add classes to every heading and paragraph.
+ *
+ * Usage in app.css:
+ *   @import '@getmicdrop/svelte-components/tokens/typography-base.css';
+ *
+ * After importing, these elements will have consistent styling:
+ *   <h1>Page Title</h1>        - No classes needed
+ *   <h2>Section Title</h2>     - No classes needed
+ *   <p>Body text</p>           - No classes needed
+ *
+ * Override when needed:
+ *   <h1 class="text-3xl">Larger Title</h1>
+ *   <p class="text-sm text-muted">Smaller muted text</p>
+ */
+
+@layer base {
+  /* ==========================================================================
+   * HEADINGS
+   * Semantic heading hierarchy with consistent sizing, weight, and colors.
+   * Uses semibold weight for all headings to maintain visual hierarchy.
+   * ========================================================================== */
+
+  h1 {
+    @apply text-2xl font-semibold text-text-primary leading-tight;
+  }
+
+  h2 {
+    @apply text-xl font-semibold text-text-primary leading-tight;
+  }
+
+  h3 {
+    @apply text-lg font-semibold text-text-primary leading-tight;
+  }
+
+  h4 {
+    @apply text-base font-semibold text-text-primary leading-tight;
+  }
+
+  h5 {
+    @apply text-sm font-semibold text-text-primary leading-tight;
+  }
+
+  h6 {
+    @apply text-xs font-semibold text-text-primary leading-tight uppercase tracking-wide;
+  }
+
+  /* ==========================================================================
+   * BODY TEXT
+   * Default paragraph styling with comfortable reading line height.
+   * Uses secondary color (gray-600/gray-300) for body text to create
+   * visual hierarchy with headings.
+   * ========================================================================== */
+
+  p {
+    @apply text-base text-text-secondary leading-relaxed;
+  }
+
+  /* ==========================================================================
+   * FORM LABELS
+   * Form labels are slightly smaller than body text with medium weight
+   * to distinguish them from regular text.
+   * ========================================================================== */
+
+  label {
+    @apply text-sm font-medium text-text-primary;
+  }
+
+  /* ==========================================================================
+   * LINKS
+   * Blue links with hover underline for clear affordance.
+   * ========================================================================== */
+
+  a {
+    @apply text-brand-primary hover:underline;
+  }
+
+  /* ==========================================================================
+   * EMPHASIS
+   * Strong and emphasis elements inherit color but add weight/style.
+   * ========================================================================== */
+
+  strong, b {
+    @apply font-semibold;
+  }
+
+  em, i {
+    @apply italic;
+  }
+
+  /* ==========================================================================
+   * SMALL TEXT
+   * For fine print, captions, and secondary information.
+   * ========================================================================== */
+
+  small {
+    @apply text-sm text-muted-foreground;
+  }
+
+  /* ==========================================================================
+   * LISTS
+   * Consistent list styling that matches body text.
+   * ========================================================================== */
+
+  ul, ol {
+    @apply text-base text-text-secondary leading-relaxed;
+  }
+
+  li {
+    @apply mb-1;
+  }
+
+  /* ==========================================================================
+   * BLOCKQUOTE
+   * Indented with left border for quoted content.
+   * ========================================================================== */
+
+  blockquote {
+    @apply pl-4 border-l-4 border-border text-text-secondary italic;
+  }
+
+  /* ==========================================================================
+   * CODE
+   * Monospace font with subtle background for inline code.
+   * ========================================================================== */
+
+  code {
+    @apply font-mono text-sm bg-muted px-1.5 py-0.5 rounded text-text-primary;
+  }
+
+  pre {
+    @apply font-mono text-sm bg-muted p-4 rounded-lg overflow-x-auto text-text-primary;
+  }
+
+  pre code {
+    @apply bg-transparent p-0;
+  }
+
+  /* ==========================================================================
+   * MARK/HIGHLIGHT
+   * Yellow highlight for marked/highlighted text.
+   * ========================================================================== */
+
+  mark {
+    @apply bg-yellow-200 px-1 rounded;
+  }
+}
+
+/* ==========================================================================
+ * NOTE ON UTILITY CLASSES
+ *
+ * This file intentionally does NOT define utility classes like .text-muted,
+ * .text-primary, etc. These are defined in individual app's app.css files
+ * because they reference app-specific CSS custom properties (e.g., --text-tertiary).
+ *
+ * For typography utilities, import and use tokens from typography.ts:
+ *   import { typography } from '@getmicdrop/svelte-components';
+ *   <span class={typography.smMuted}>Helper text</span>
+ * ========================================================================== */

package/dist/tokens/typography.d.ts

@@ -17,65 +17,65 @@
  */
 export declare const typography: {
     /** Page title - 2xl semibold */
-    readonly h1: "text-2xl font-semibold text-gray-900 dark:text-white";
+    readonly h1: "text-2xl font-semibold text-text-primary";
     /** Section title - xl semibold */
-    readonly h2: "text-xl font-semibold text-gray-900 dark:text-white";
+    readonly h2: "text-xl font-semibold text-text-primary";
     /** Subsection title - lg semibold */
-    readonly h3: "text-lg font-semibold text-gray-900 dark:text-white";
+    readonly h3: "text-lg font-semibold text-text-primary";
     /** Card/group title - base semibold */
-    readonly h4: "text-base font-semibold text-gray-900 dark:text-white";
+    readonly h4: "text-base font-semibold text-text-primary";
     /** Small title - sm semibold */
-    readonly h5: "text-sm font-semibold text-gray-900 dark:text-white";
+    readonly h5: "text-sm font-semibold text-text-primary";
     /** Micro title - xs semibold */
-    readonly h6: "text-xs font-semibold text-gray-900 dark:text-white";
+    readonly h6: "text-xs font-semibold text-text-primary";
     /** Standard body text */
-    readonly body: "text-base text-gray-900 dark:text-white leading-relaxed";
+    readonly body: "text-base text-text-primary leading-relaxed";
     /** Body text - muted/secondary */
-    readonly bodyMuted: "text-base text-gray-500 dark:text-gray-400 leading-relaxed";
+    readonly bodyMuted: "text-base text-muted-foreground leading-relaxed";
     /** Small body text */
-    readonly sm: "text-sm text-gray-900 dark:text-white";
+    readonly sm: "text-sm text-text-primary";
     /** Small text - muted/secondary */
-    readonly smMuted: "text-sm text-gray-500 dark:text-gray-400";
+    readonly smMuted: "text-sm text-muted-foreground";
     /** Extra small text */
-    readonly xs: "text-xs text-gray-900 dark:text-white";
+    readonly xs: "text-xs text-text-primary";
     /** Extra small text - muted */
-    readonly xsMuted: "text-xs text-gray-500 dark:text-gray-400";
+    readonly xsMuted: "text-xs text-muted-foreground";
     /** Muted text color only (no size) - for applying to elements with other size classes */
-    readonly textMuted: "text-gray-500 dark:text-gray-400";
+    readonly textMuted: "text-muted-foreground";
     /** Muted icon color - same as textMuted, for semantic clarity */
-    readonly iconMuted: "text-gray-500 dark:text-gray-400";
+    readonly iconMuted: "text-muted-foreground";
     /** Form field label */
-    readonly label: "text-sm font-medium text-gray-900 dark:text-white";
+    readonly label: "text-sm font-medium text-text-primary";
     /** Form field label - with standard spacing */
-    readonly labelSpaced: "text-sm font-medium text-gray-900 dark:text-white mb-2";
+    readonly labelSpaced: "text-sm font-medium text-text-primary mb-2";
     /** Helper/description text below inputs */
-    readonly helper: "text-sm text-gray-500 dark:text-gray-400";
+    readonly helper: "text-sm text-muted-foreground";
     /** Placeholder-style text */
-    readonly placeholder: "text-sm text-gray-400 dark:text-gray-500";
+    readonly placeholder: "text-sm text-muted-foreground";
     /** Error message text */
-    readonly error: "text-sm text-red-500 dark:text-red-400";
+    readonly error: "text-sm text-accent-danger";
     /** Success message text */
-    readonly success: "text-sm text-green-600 dark:text-green-400";
+    readonly success: "text-sm text-accent-success";
     /** Warning message text */
-    readonly warning: "text-sm text-yellow-600 dark:text-yellow-400";
+    readonly warning: "text-sm text-accent-warning";
     /** Info message text */
-    readonly info: "text-sm text-blue-600 dark:text-blue-400";
+    readonly info: "text-sm text-brand-primary";
     /** Standard link */
-    readonly link: "text-sm text-blue-700 dark:text-blue-500 hover:underline";
+    readonly link: "text-sm text-brand-primary hover:underline";
     /** Muted/subtle link */
-    readonly linkMuted: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300";
+    readonly linkMuted: "text-sm text-muted-foreground hover:text-text-secondary";
     /** Price/currency display */
-    readonly price: "text-lg font-semibold text-gray-900 dark:text-white";
+    readonly price: "text-lg font-semibold text-text-primary";
     /** Large price display */
-    readonly priceLg: "text-2xl font-bold text-gray-900 dark:text-white";
+    readonly priceLg: "text-2xl font-bold text-text-primary";
     /** Badge/tag text */
     readonly badge: "text-xs font-medium";
     /** Table header */
-    readonly tableHeader: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider";
+    readonly tableHeader: "text-xs font-semibold text-muted-foreground uppercase tracking-wider";
     /** Code/monospace */
-    readonly code: "text-sm font-mono text-gray-900 dark:text-white";
+    readonly code: "text-sm font-mono text-text-primary";
     /** Muted code */
-    readonly codeMuted: "text-xs font-mono text-gray-500 dark:text-gray-400";
+    readonly codeMuted: "text-xs font-mono text-muted-foreground";
 };
 export type TypographyToken = keyof typeof typography;
 //# sourceMappingURL=typography.d.ts.map

package/dist/tokens/typography.js

@@ -20,78 +20,78 @@ export const typography = {
     // HEADINGS
     // ==========================================================================
     /** Page title - 2xl semibold */
-    h1: "text-2xl font-semibold text-gray-900 dark:text-white",
+    h1: "text-2xl font-semibold text-text-primary",
     /** Section title - xl semibold */
-    h2: "text-xl font-semibold text-gray-900 dark:text-white",
+    h2: "text-xl font-semibold text-text-primary",
     /** Subsection title - lg semibold */
-    h3: "text-lg font-semibold text-gray-900 dark:text-white",
+    h3: "text-lg font-semibold text-text-primary",
     /** Card/group title - base semibold */
-    h4: "text-base font-semibold text-gray-900 dark:text-white",
+    h4: "text-base font-semibold text-text-primary",
     /** Small title - sm semibold */
-    h5: "text-sm font-semibold text-gray-900 dark:text-white",
+    h5: "text-sm font-semibold text-text-primary",
     /** Micro title - xs semibold */
-    h6: "text-xs font-semibold text-gray-900 dark:text-white",
+    h6: "text-xs font-semibold text-text-primary",
     // ==========================================================================
     // BODY TEXT
     // ==========================================================================
     /** Standard body text */
-    body: "text-base text-gray-900 dark:text-white leading-relaxed",
+    body: "text-base text-text-primary leading-relaxed",
     /** Body text - muted/secondary */
-    bodyMuted: "text-base text-gray-500 dark:text-gray-400 leading-relaxed",
+    bodyMuted: "text-base text-muted-foreground leading-relaxed",
     /** Small body text */
-    sm: "text-sm text-gray-900 dark:text-white",
+    sm: "text-sm text-text-primary",
     /** Small text - muted/secondary */
-    smMuted: "text-sm text-gray-500 dark:text-gray-400",
+    smMuted: "text-sm text-muted-foreground",
     /** Extra small text */
-    xs: "text-xs text-gray-900 dark:text-white",
+    xs: "text-xs text-text-primary",
     /** Extra small text - muted */
-    xsMuted: "text-xs text-gray-500 dark:text-gray-400",
+    xsMuted: "text-xs text-muted-foreground",
     /** Muted text color only (no size) - for applying to elements with other size classes */
-    textMuted: "text-gray-500 dark:text-gray-400",
+    textMuted: "text-muted-foreground",
     /** Muted icon color - same as textMuted, for semantic clarity */
-    iconMuted: "text-gray-500 dark:text-gray-400",
+    iconMuted: "text-muted-foreground",
     // ==========================================================================
     // LABELS & FORM TEXT
     // ==========================================================================
     /** Form field label */
-    label: "text-sm font-medium text-gray-900 dark:text-white",
+    label: "text-sm font-medium text-text-primary",
     /** Form field label - with standard spacing */
-    labelSpaced: "text-sm font-medium text-gray-900 dark:text-white mb-2",
+    labelSpaced: "text-sm font-medium text-text-primary mb-2",
     /** Helper/description text below inputs */
-    helper: "text-sm text-gray-500 dark:text-gray-400",
+    helper: "text-sm text-muted-foreground",
     /** Placeholder-style text */
-    placeholder: "text-sm text-gray-400 dark:text-gray-500",
+    placeholder: "text-sm text-muted-foreground",
     // ==========================================================================
     // STATUS & FEEDBACK
     // ==========================================================================
     /** Error message text */
-    error: "text-sm text-red-500 dark:text-red-400",
+    error: "text-sm text-accent-danger",
     /** Success message text */
-    success: "text-sm text-green-600 dark:text-green-400",
+    success: "text-sm text-accent-success",
     /** Warning message text */
-    warning: "text-sm text-yellow-600 dark:text-yellow-400",
+    warning: "text-sm text-accent-warning",
     /** Info message text */
-    info: "text-sm text-blue-600 dark:text-blue-400",
+    info: "text-sm text-brand-primary",
     // ==========================================================================
     // LINKS
     // ==========================================================================
     /** Standard link */
-    link: "text-sm text-blue-700 dark:text-blue-500 hover:underline",
+    link: "text-sm text-brand-primary hover:underline",
     /** Muted/subtle link */
-    linkMuted: "text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300",
+    linkMuted: "text-sm text-muted-foreground hover:text-text-secondary",
     // ==========================================================================
     // SPECIAL CASES
     // ==========================================================================
     /** Price/currency display */
-    price: "text-lg font-semibold text-gray-900 dark:text-white",
+    price: "text-lg font-semibold text-text-primary",
     /** Large price display */
-    priceLg: "text-2xl font-bold text-gray-900 dark:text-white",
+    priceLg: "text-2xl font-bold text-text-primary",
     /** Badge/tag text */
     badge: "text-xs font-medium",
     /** Table header */
-    tableHeader: "text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider",
+    tableHeader: "text-xs font-semibold text-muted-foreground uppercase tracking-wider",
     /** Code/monospace */
-    code: "text-sm font-mono text-gray-900 dark:text-white",
+    code: "text-sm font-mono text-text-primary",
     /** Muted code */
-    codeMuted: "text-xs font-mono text-gray-500 dark:text-gray-400",
+    codeMuted: "text-xs font-mono text-muted-foreground",
 };