@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/tokens/variants.d.ts

@@ -11,55 +11,55 @@
  * Pattern: text color + background color with dark mode support.
  */
 export declare const badgeColorVariants: {
-    readonly success: "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
-    readonly warning: "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
-    readonly error: "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
-    readonly danger: "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
-    readonly info: "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
-    readonly neutral: "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
-    readonly red: "text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300";
-    readonly blue: "text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300";
-    readonly purple: "text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300";
-    readonly green: "text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300";
-    readonly orange: "text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300";
-    readonly yellow: "text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300";
-    readonly gray: "text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300";
-    readonly pink: "text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300";
-    readonly indigo: "text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300";
-    readonly cyan: "text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300";
-    readonly notification: "text-white bg-red-500 dark:bg-red-600";
+    readonly success: "text-status-success-text bg-status-success-bg";
+    readonly warning: "text-status-warning-text bg-status-warning-bg";
+    readonly error: "text-status-error-text bg-status-error-bg";
+    readonly danger: "text-status-error-text bg-status-error-bg";
+    readonly info: "text-status-info-text bg-status-info-bg";
+    readonly neutral: "text-text-primary bg-muted";
+    readonly red: "text-status-error-text bg-status-error-bg";
+    readonly blue: "text-status-info-text bg-status-info-bg";
+    readonly purple: "text-brand-primary bg-status-info-bg";
+    readonly green: "text-status-success-text bg-status-success-bg";
+    readonly orange: "text-status-warning-text bg-status-warning-bg";
+    readonly yellow: "text-status-warning-text bg-status-warning-bg";
+    readonly gray: "text-text-primary bg-muted";
+    readonly pink: "text-accent-danger bg-status-error-bg";
+    readonly indigo: "text-brand-primary bg-status-info-bg";
+    readonly cyan: "text-status-info-text bg-status-info-bg";
+    readonly notification: "text-white bg-accent-danger";
 };
 export type BadgeColorVariant = keyof typeof badgeColorVariants;
 /**
  * Alert color variants - slightly different pattern (uses bg-*-50).
  */
 export declare const alertColorVariants: {
-    readonly info: "text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800";
-    readonly success: "text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800";
-    readonly warning: "text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-700";
-    readonly danger: "text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800";
+    readonly info: "text-status-info-text border border-status-info-border bg-status-info-bg";
+    readonly success: "text-status-success-text border border-status-success-border bg-status-success-bg";
+    readonly warning: "text-status-warning-text border border-status-warning-border bg-status-warning-bg";
+    readonly danger: "text-status-error-text border border-status-error-border bg-status-error-bg";
 };
 export type AlertColorVariant = keyof typeof alertColorVariants;
 /**
  * Alert close button color variants - specific hover states per type.
  */
 export declare const alertCloseButtonVariants: {
-    readonly info: "bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700";
-    readonly success: "bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700";
-    readonly warning: "bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700";
-    readonly danger: "bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700";
+    readonly info: "bg-status-info-bg text-brand-primary hover:bg-status-info-bg/80";
+    readonly success: "bg-status-success-bg text-accent-success hover:bg-status-success-bg/80";
+    readonly warning: "bg-status-warning-bg text-accent-warning hover:bg-status-warning-bg/80";
+    readonly danger: "bg-status-error-bg text-accent-danger hover:bg-status-error-bg/80";
 };
 /**
  * Spinner fill color variants.
  */
 export declare const spinnerColorVariants: {
-    readonly blue: "fill-blue-600";
-    readonly gray: "fill-gray-600 dark:fill-gray-300";
-    readonly green: "fill-green-500";
-    readonly red: "fill-red-600";
-    readonly yellow: "fill-yellow-400";
-    readonly pink: "fill-pink-600";
-    readonly purple: "fill-purple-600";
+    readonly blue: "fill-brand-primary";
+    readonly gray: "fill-muted-foreground";
+    readonly green: "fill-accent-success";
+    readonly red: "fill-accent-danger";
+    readonly yellow: "fill-accent-warning";
+    readonly pink: "fill-accent-danger";
+    readonly purple: "fill-brand-primary";
     readonly white: "fill-white";
 };
 export type SpinnerColorVariant = keyof typeof spinnerColorVariants;

package/dist/tokens/variants.js

@@ -12,55 +12,55 @@
  */
 export const badgeColorVariants = {
     // Semantic variants
-    success: 'text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300',
-    warning: 'text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300',
-    error: 'text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300',
-    danger: 'text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300',
-    info: 'text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300',
-    neutral: 'text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300',
+    success: 'text-status-success-text bg-status-success-bg',
+    warning: 'text-status-warning-text bg-status-warning-bg',
+    error: 'text-status-error-text bg-status-error-bg',
+    danger: 'text-status-error-text bg-status-error-bg',
+    info: 'text-status-info-text bg-status-info-bg',
+    neutral: 'text-text-primary bg-muted',
     // Color variants
-    red: 'text-red-800 bg-red-100 dark:bg-red-900 dark:text-red-300',
-    blue: 'text-blue-800 bg-blue-100 dark:bg-blue-900 dark:text-blue-300',
-    purple: 'text-purple-800 bg-purple-100 dark:bg-purple-900 dark:text-purple-300',
-    green: 'text-green-800 bg-green-100 dark:bg-green-900 dark:text-green-300',
-    orange: 'text-orange-800 bg-orange-100 dark:bg-orange-900 dark:text-orange-300',
-    yellow: 'text-yellow-800 bg-yellow-100 dark:bg-yellow-900 dark:text-yellow-300',
-    gray: 'text-gray-800 bg-gray-100 dark:bg-gray-700 dark:text-gray-300',
-    pink: 'text-pink-800 bg-pink-100 dark:bg-pink-900 dark:text-pink-300',
-    indigo: 'text-indigo-800 bg-indigo-100 dark:bg-indigo-900 dark:text-indigo-300',
-    cyan: 'text-cyan-800 bg-cyan-100 dark:bg-cyan-900 dark:text-cyan-300',
+    red: 'text-status-error-text bg-status-error-bg',
+    blue: 'text-status-info-text bg-status-info-bg',
+    purple: 'text-brand-primary bg-status-info-bg',
+    green: 'text-status-success-text bg-status-success-bg',
+    orange: 'text-status-warning-text bg-status-warning-bg',
+    yellow: 'text-status-warning-text bg-status-warning-bg',
+    gray: 'text-text-primary bg-muted',
+    pink: 'text-accent-danger bg-status-error-bg',
+    indigo: 'text-brand-primary bg-status-info-bg',
+    cyan: 'text-status-info-text bg-status-info-bg',
     // Special variants
-    notification: 'text-white bg-red-500 dark:bg-red-600',
+    notification: 'text-white bg-accent-danger',
 };
 /**
  * Alert color variants - slightly different pattern (uses bg-*-50).
  */
 export const alertColorVariants = {
-    info: 'text-blue-800 border border-blue-300 bg-blue-50 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-800',
-    success: 'text-green-800 border border-green-300 bg-green-50 dark:bg-gray-800 dark:text-green-400 dark:border-green-800',
-    warning: 'text-yellow-800 border border-yellow-300 bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300 dark:border-yellow-700',
-    danger: 'text-red-800 border border-red-300 bg-red-50 dark:bg-gray-800 dark:text-red-400 dark:border-red-800',
+    info: 'text-status-info-text border border-status-info-border bg-status-info-bg',
+    success: 'text-status-success-text border border-status-success-border bg-status-success-bg',
+    warning: 'text-status-warning-text border border-status-warning-border bg-status-warning-bg',
+    danger: 'text-status-error-text border border-status-error-border bg-status-error-bg',
 };
 /**
  * Alert close button color variants - specific hover states per type.
  */
 export const alertCloseButtonVariants = {
-    info: 'bg-blue-50 text-blue-500 hover:bg-blue-200 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700',
-    success: 'bg-green-50 text-green-500 hover:bg-green-200 dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700',
-    warning: 'bg-yellow-50 text-yellow-500 hover:bg-yellow-200 dark:bg-gray-800 dark:text-yellow-300 dark:hover:bg-gray-700',
-    danger: 'bg-red-50 text-red-500 hover:bg-red-200 dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700',
+    info: 'bg-status-info-bg text-brand-primary hover:bg-status-info-bg/80',
+    success: 'bg-status-success-bg text-accent-success hover:bg-status-success-bg/80',
+    warning: 'bg-status-warning-bg text-accent-warning hover:bg-status-warning-bg/80',
+    danger: 'bg-status-error-bg text-accent-danger hover:bg-status-error-bg/80',
 };
 /**
  * Spinner fill color variants.
  */
 export const spinnerColorVariants = {
-    blue: 'fill-blue-600',
-    gray: 'fill-gray-600 dark:fill-gray-300',
-    green: 'fill-green-500',
-    red: 'fill-red-600',
-    yellow: 'fill-yellow-400',
-    pink: 'fill-pink-600',
-    purple: 'fill-purple-600',
+    blue: 'fill-brand-primary',
+    gray: 'fill-muted-foreground',
+    green: 'fill-accent-success',
+    red: 'fill-accent-danger',
+    yellow: 'fill-accent-warning',
+    pink: 'fill-accent-danger',
+    purple: 'fill-brand-primary',
     white: 'fill-white',
 };
 /**

package/dist/utils/utils/utils.spec.js

@@ -26,7 +26,7 @@ import {
 
 describe('cn (classNames merge)', () => {
   test('merges class names', () => {
-    expect(cn('bg-red-500', 'text-white')).toBe('bg-red-500 text-white');
+    expect(cn('bg-accent-danger', 'text-white')).toBe('bg-accent-danger text-white');
   });
 
   test('handles empty inputs', () => {
@@ -39,7 +39,7 @@ describe('cn (classNames merge)', () => {
 
   test('merges conflicting tailwind classes', () => {
     // twMerge should handle conflicts
-    expect(cn('bg-red-500', 'bg-blue-500')).toBe('bg-blue-500');
+    expect(cn('bg-accent-danger', 'bg-brand-primary')).toBe('bg-brand-primary');
   });
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getmicdrop/svelte-components",
-  "version": "5.20.2",
+  "version": "5.21.1",
   "description": "Shared component library for Micdrop applications",
   "type": "module",
   "main": "./dist/index.js",