@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/tokens/__tests__/typography.test.js

@@ -0,0 +1,156 @@
+import { describe, it, expect } from 'vitest';
+import { typography } from '../typography';
+describe('Typography Headings', () => {
+    it('h1 has 2xl size and semibold weight', () => {
+        expect(typography.h1).toContain('text-2xl');
+        expect(typography.h1).toContain('font-semibold');
+        expect(typography.h1).toContain('text-gray-900');
+        expect(typography.h1).toContain('dark:text-white');
+    });
+    it('h2 has xl size and semibold weight', () => {
+        expect(typography.h2).toContain('text-xl');
+        expect(typography.h2).toContain('font-semibold');
+    });
+    it('h3 has lg size and semibold weight', () => {
+        expect(typography.h3).toContain('text-lg');
+        expect(typography.h3).toContain('font-semibold');
+    });
+    it('h4 has base size and semibold weight', () => {
+        expect(typography.h4).toContain('text-base');
+        expect(typography.h4).toContain('font-semibold');
+    });
+    it('h5 has sm size and semibold weight', () => {
+        expect(typography.h5).toContain('text-sm');
+        expect(typography.h5).toContain('font-semibold');
+    });
+    it('h6 has xs size and semibold weight', () => {
+        expect(typography.h6).toContain('text-xs');
+        expect(typography.h6).toContain('font-semibold');
+    });
+});
+describe('Typography Body Text', () => {
+    it('body has base size and relaxed leading', () => {
+        expect(typography.body).toContain('text-base');
+        expect(typography.body).toContain('leading-relaxed');
+        expect(typography.body).toContain('text-gray-900');
+    });
+    it('bodyMuted has muted gray color', () => {
+        expect(typography.bodyMuted).toContain('text-gray-500');
+        expect(typography.bodyMuted).toContain('dark:text-gray-400');
+    });
+    it('sm has sm size', () => {
+        expect(typography.sm).toContain('text-sm');
+        expect(typography.sm).toContain('text-gray-900');
+    });
+    it('smMuted has sm size and muted color', () => {
+        expect(typography.smMuted).toContain('text-sm');
+        expect(typography.smMuted).toContain('text-gray-500');
+    });
+    it('xs has xs size', () => {
+        expect(typography.xs).toContain('text-xs');
+        expect(typography.xs).toContain('text-gray-900');
+    });
+    it('xsMuted has xs size and muted color', () => {
+        expect(typography.xsMuted).toContain('text-xs');
+        expect(typography.xsMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Muted Colors', () => {
+    it('textMuted has muted gray color', () => {
+        expect(typography.textMuted).toContain('text-gray-500');
+        expect(typography.textMuted).toContain('dark:text-gray-400');
+    });
+    it('iconMuted matches textMuted', () => {
+        expect(typography.iconMuted).toBe(typography.textMuted);
+    });
+});
+describe('Typography Labels', () => {
+    it('label has sm size and medium weight', () => {
+        expect(typography.label).toContain('text-sm');
+        expect(typography.label).toContain('font-medium');
+        expect(typography.label).toContain('text-gray-900');
+    });
+    it('labelSpaced includes bottom margin', () => {
+        expect(typography.labelSpaced).toContain('mb-2');
+        expect(typography.labelSpaced).toContain('text-sm');
+        expect(typography.labelSpaced).toContain('font-medium');
+    });
+    it('helper has muted color', () => {
+        expect(typography.helper).toContain('text-sm');
+        expect(typography.helper).toContain('text-gray-500');
+    });
+    it('placeholder has lighter muted color', () => {
+        expect(typography.placeholder).toContain('text-sm');
+        expect(typography.placeholder).toContain('text-gray-400');
+    });
+});
+describe('Typography Status Text', () => {
+    it('error has red color', () => {
+        expect(typography.error).toContain('text-sm');
+        expect(typography.error).toContain('text-red-500');
+        expect(typography.error).toContain('dark:text-red-400');
+    });
+    it('success has green color', () => {
+        expect(typography.success).toContain('text-sm');
+        expect(typography.success).toContain('text-green-600');
+    });
+    it('warning has yellow color', () => {
+        expect(typography.warning).toContain('text-sm');
+        expect(typography.warning).toContain('text-yellow-600');
+    });
+    it('info has blue color', () => {
+        expect(typography.info).toContain('text-sm');
+        expect(typography.info).toContain('text-blue-600');
+    });
+});
+describe('Typography Links', () => {
+    it('link has blue color and hover underline', () => {
+        expect(typography.link).toContain('text-blue-700');
+        expect(typography.link).toContain('hover:underline');
+    });
+    it('linkMuted has gray color and hover state', () => {
+        expect(typography.linkMuted).toContain('text-gray-500');
+        expect(typography.linkMuted).toContain('hover:text-gray-700');
+    });
+});
+describe('Typography Special Cases', () => {
+    it('price has lg size and semibold weight', () => {
+        expect(typography.price).toContain('text-lg');
+        expect(typography.price).toContain('font-semibold');
+    });
+    it('priceLg has 2xl size and bold weight', () => {
+        expect(typography.priceLg).toContain('text-2xl');
+        expect(typography.priceLg).toContain('font-bold');
+    });
+    it('badge has xs size and medium weight', () => {
+        expect(typography.badge).toContain('text-xs');
+        expect(typography.badge).toContain('font-medium');
+    });
+    it('tableHeader has uppercase tracking', () => {
+        expect(typography.tableHeader).toContain('text-xs');
+        expect(typography.tableHeader).toContain('uppercase');
+        expect(typography.tableHeader).toContain('tracking-wider');
+    });
+    it('code has mono font', () => {
+        expect(typography.code).toContain('font-mono');
+        expect(typography.code).toContain('text-sm');
+    });
+    it('codeMuted has mono font and muted color', () => {
+        expect(typography.codeMuted).toContain('font-mono');
+        expect(typography.codeMuted).toContain('text-gray-500');
+    });
+});
+describe('Typography Token Type', () => {
+    it('all tokens are strings', () => {
+        const tokens = ['h1', 'h2', 'body', 'label', 'error', 'link', 'code'];
+        tokens.forEach(token => {
+            expect(typeof typography[token]).toBe('string');
+        });
+    });
+    it('all tokens have dark mode variants where applicable', () => {
+        const tokensWithDarkMode = ['h1', 'body', 'sm', 'label', 'error'];
+        tokensWithDarkMode.forEach(token => {
+            expect(typography[token]).toContain('dark:');
+        });
+    });
+});

package/dist/tokens/__tests__/z-index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=z-index.test.d.ts.map

package/dist/tokens/__tests__/z-index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"z-index.test.d.ts","sourceRoot":"","sources":["../../../src/lib/tokens/__tests__/z-index.test.ts"],"names":[],"mappings":""}

package/dist/tokens/__tests__/z-index.test.js

@@ -0,0 +1,121 @@
+import { describe, it, expect } from 'vitest';
+import { zIndex, layers } from '../z-index';
+describe('Z-Index Tokens', () => {
+    it('has auto value', () => {
+        expect(zIndex.auto).toBe('auto');
+    });
+    it('has base 0 value', () => {
+        expect(zIndex['0']).toBe('0');
+    });
+    it('has 10 value', () => {
+        expect(zIndex['10']).toBe('10');
+    });
+    it('has 20 value', () => {
+        expect(zIndex['20']).toBe('20');
+    });
+    it('has 30 value', () => {
+        expect(zIndex['30']).toBe('30');
+    });
+    it('has 40 value', () => {
+        expect(zIndex['40']).toBe('40');
+    });
+    it('has 50 value', () => {
+        expect(zIndex['50']).toBe('50');
+    });
+    it('has 51 value for modal content', () => {
+        expect(zIndex['51']).toBe('51');
+    });
+    it('has 60 value', () => {
+        expect(zIndex['60']).toBe('60');
+    });
+    it('has 70 value', () => {
+        expect(zIndex['70']).toBe('70');
+    });
+    it('has 100 value for critical', () => {
+        expect(zIndex['100']).toBe('100');
+    });
+});
+describe('Layer Aliases', () => {
+    it('base is 0', () => {
+        expect(layers.base).toBe('0');
+        expect(layers.base).toBe(zIndex['0']);
+    });
+    it('sticky is 10', () => {
+        expect(layers.sticky).toBe('10');
+        expect(layers.sticky).toBe(zIndex['10']);
+    });
+    it('navigation is 20', () => {
+        expect(layers.navigation).toBe('20');
+        expect(layers.navigation).toBe(zIndex['20']);
+    });
+    it('dropdown is 30', () => {
+        expect(layers.dropdown).toBe('30');
+        expect(layers.dropdown).toBe(zIndex['30']);
+    });
+    it('overlay is 40', () => {
+        expect(layers.overlay).toBe('40');
+        expect(layers.overlay).toBe(zIndex['40']);
+    });
+    it('modal is 50', () => {
+        expect(layers.modal).toBe('50');
+        expect(layers.modal).toBe(zIndex['50']);
+    });
+    it('modalContent is 51 (above modal)', () => {
+        expect(layers.modalContent).toBe('51');
+        expect(layers.modalContent).toBe(zIndex['51']);
+    });
+    it('toast is 60', () => {
+        expect(layers.toast).toBe('60');
+        expect(layers.toast).toBe(zIndex['60']);
+    });
+    it('tooltip is 70', () => {
+        expect(layers.tooltip).toBe('70');
+        expect(layers.tooltip).toBe(zIndex['70']);
+    });
+    it('critical is 100', () => {
+        expect(layers.critical).toBe('100');
+        expect(layers.critical).toBe(zIndex['100']);
+    });
+});
+describe('Layer Stacking Order', () => {
+    it('layers stack in correct order', () => {
+        const order = [
+            parseInt(layers.base),
+            parseInt(layers.sticky),
+            parseInt(layers.navigation),
+            parseInt(layers.dropdown),
+            parseInt(layers.overlay),
+            parseInt(layers.modal),
+            parseInt(layers.modalContent),
+            parseInt(layers.toast),
+            parseInt(layers.tooltip),
+            parseInt(layers.critical),
+        ];
+        for (let i = 0; i < order.length - 1; i++) {
+            expect(order[i + 1]).toBeGreaterThanOrEqual(order[i]);
+        }
+    });
+    it('modal content is above modal', () => {
+        expect(parseInt(layers.modalContent)).toBeGreaterThan(parseInt(layers.modal));
+    });
+    it('toast is above overlay', () => {
+        expect(parseInt(layers.toast)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+    it('tooltip is above toast', () => {
+        expect(parseInt(layers.tooltip)).toBeGreaterThan(parseInt(layers.toast));
+    });
+    it('critical is highest', () => {
+        expect(parseInt(layers.critical)).toBeGreaterThanOrEqual(parseInt(layers.tooltip));
+    });
+});
+describe('Z-Index Semantic Meaning', () => {
+    it('dropdowns appear above navigation', () => {
+        expect(parseInt(layers.dropdown)).toBeGreaterThan(parseInt(layers.navigation));
+    });
+    it('overlays appear above dropdowns', () => {
+        expect(parseInt(layers.overlay)).toBeGreaterThan(parseInt(layers.dropdown));
+    });
+    it('modals appear above overlays', () => {
+        expect(parseInt(layers.modal)).toBeGreaterThan(parseInt(layers.overlay));
+    });
+});

package/dist/tokens/tokens.css

@@ -1,87 +1,87 @@
-:root {
-  --bg-primary: 0 0% 100%;
-  --bg-secondary: 220 7% 97%;
-  --bg-tertiary: 220 7% 94%;
-  --bg-quaternary: 220 6% 91%;
-
-  --text-primary: 221 50% 10%;
-  --text-secondary: 220 20% 18%;
-  --text-tertiary: 221 9% 44%;
-  --text-head: 221 9% 44%;
-
-  --brand-primary: 209 99% 50%;
-
-  --accent-warning: 28 100% 59%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 131 77% 35%;
-
-  --stroke-primary: 216 6% 84%;
-  --stroke-secondary: 216 6% 84%;
-  --border: 220 13% 91%;
-
-  --card: 0 0% 100%;
-  --card-foreground: 224 71.4% 4.1%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 224 71.4% 4.1%;
-  --muted: 220 14.3% 95.9%;
-  --muted-foreground: 220 8.9% 46.1%;
-  --hover-primary: 210 20% 96%;
-
-  --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 220 20% 18%;
-  --sidebar-border: 220 13% 91%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 221 50% 10%;
-
-  --BG-Primary: var(--bg-primary);
-  --BG-Secondary: var(--bg-secondary);
-  --BG-Tertiary: var(--bg-tertiary);
-  --BG-Quaternary: var(--bg-quaternary);
-  --Text-Primary: var(--text-primary);
-  --Text-Secondary: var(--text-secondary);
-  --Text-Tartiary: var(--text-tertiary);
-  --Text-Head: var(--text-head);
-  --Brand-Primary: var(--brand-primary);
-  --Accent-Warning: var(--accent-warning);
-  --Accent-Danger: var(--accent-danger);
-  --Accent-Success: var(--accent-success);
-  --Stroke-Primary: var(--stroke-primary);
-  --Stroke-Secondary: var(--stroke-secondary);
-}
-
-[data-theme="dark"],
-.dark {
-  --bg-primary: 220 20% 18%;
-  --bg-secondary: 221 50% 10%;
-  --bg-tertiary: 221 50% 6%;
-  --bg-quaternary: 0 0% 0%;
-
-  --text-primary: 220 7% 97%;
-  --text-secondary: 220 7% 94%;
-  --text-tertiary: 220 6% 91%;
-  --text-head: 220 9% 70%;
-
-  --brand-primary: 220 89% 63%;
-
-  --accent-warning: 30 100% 70%;
-  --accent-danger: 0 100% 70%;
-  --accent-success: 142 71% 45%;
-
-  --stroke-primary: 220 20% 28%;
-  --stroke-secondary: 220 20% 28%;
-  --border: 215 27.9% 16.9%;
-
-  --card: 224 20% 10%;
-  --card-foreground: 210 20% 98%;
-  --popover: 224 71.4% 4.1%;
-  --popover-foreground: 210 20% 98%;
-  --muted: 215 27.9% 16.9%;
-  --muted-foreground: 217.9 10.6% 64.9%;
-  --hover-primary: 222 10% 39%;
-
-  --sidebar-background: 220 20% 18%;
-  --sidebar-foreground: 220 7% 94%;
-  --sidebar-border: 215 20% 20%;
-  --sidebar-primary: 221 65% 54%;
-  --sidebar-primary-foreground: 220 7% 97%;
-}
+:root {
+  --bg-primary: 0 0% 100%;
+  --bg-secondary: 220 7% 97%;
+  --bg-tertiary: 220 7% 94%;
+  --bg-quaternary: 220 6% 91%;
+
+  --text-primary: 221 50% 10%;
+  --text-secondary: 220 20% 18%;
+  --text-tertiary: 221 9% 44%;
+  --text-head: 221 9% 44%;
+
+  --brand-primary: 209 99% 50%;
+
+  --accent-warning: 28 100% 59%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 131 77% 35%;
+
+  --stroke-primary: 216 6% 84%;
+  --stroke-secondary: 216 6% 84%;
+  --border: 220 13% 91%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 224 71.4% 4.1%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 224 71.4% 4.1%;
+  --muted: 220 14.3% 95.9%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --hover-primary: 210 20% 96%;
+
+  --sidebar-background: 0 0% 100%;
+  --sidebar-foreground: 220 20% 18%;
+  --sidebar-border: 220 13% 91%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 221 50% 10%;
+
+  --BG-Primary: var(--bg-primary);
+  --BG-Secondary: var(--bg-secondary);
+  --BG-Tertiary: var(--bg-tertiary);
+  --BG-Quaternary: var(--bg-quaternary);
+  --Text-Primary: var(--text-primary);
+  --Text-Secondary: var(--text-secondary);
+  --Text-Tartiary: var(--text-tertiary);
+  --Text-Head: var(--text-head);
+  --Brand-Primary: var(--brand-primary);
+  --Accent-Warning: var(--accent-warning);
+  --Accent-Danger: var(--accent-danger);
+  --Accent-Success: var(--accent-success);
+  --Stroke-Primary: var(--stroke-primary);
+  --Stroke-Secondary: var(--stroke-secondary);
+}
+
+[data-theme="dark"],
+.dark {
+  --bg-primary: 220 20% 18%;
+  --bg-secondary: 221 50% 10%;
+  --bg-tertiary: 221 50% 6%;
+  --bg-quaternary: 0 0% 0%;
+
+  --text-primary: 220 7% 97%;
+  --text-secondary: 220 7% 94%;
+  --text-tertiary: 220 6% 91%;
+  --text-head: 220 9% 70%;
+
+  --brand-primary: 220 89% 63%;
+
+  --accent-warning: 30 100% 70%;
+  --accent-danger: 0 100% 70%;
+  --accent-success: 142 71% 45%;
+
+  --stroke-primary: 220 20% 28%;
+  --stroke-secondary: 220 20% 28%;
+  --border: 215 27.9% 16.9%;
+
+  --card: 224 20% 10%;
+  --card-foreground: 210 20% 98%;
+  --popover: 224 71.4% 4.1%;
+  --popover-foreground: 210 20% 98%;
+  --muted: 215 27.9% 16.9%;
+  --muted-foreground: 217.9 10.6% 64.9%;
+  --hover-primary: 222 10% 39%;
+
+  --sidebar-background: 220 20% 18%;
+  --sidebar-foreground: 220 7% 94%;
+  --sidebar-border: 215 20% 20%;
+  --sidebar-primary: 221 65% 54%;
+  --sidebar-primary-foreground: 220 7% 97%;
+}

package/dist/tokens/typography-base.css

@@ -0,0 +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>
+ * ========================================================================== */