@getmicdrop/svelte-components 5.20.2 → 5.21.1

package/dist/tokens/typography-base.css

@@ -26,27 +26,27 @@
    * ========================================================================== */
 
   h1 {
-    @apply text-2xl font-semibold text-gray-900 dark:text-white leading-tight;
+    @apply text-2xl font-semibold text-text-primary leading-tight;
   }
 
   h2 {
-    @apply text-xl font-semibold text-gray-900 dark:text-white leading-tight;
+    @apply text-xl font-semibold text-text-primary leading-tight;
   }
 
   h3 {
-    @apply text-lg font-semibold text-gray-900 dark:text-white leading-tight;
+    @apply text-lg font-semibold text-text-primary leading-tight;
   }
 
   h4 {
-    @apply text-base font-semibold text-gray-900 dark:text-white leading-tight;
+    @apply text-base font-semibold text-text-primary leading-tight;
   }
 
   h5 {
-    @apply text-sm font-semibold text-gray-900 dark:text-white leading-tight;
+    @apply text-sm font-semibold text-text-primary leading-tight;
   }
 
   h6 {
-    @apply text-xs font-semibold text-gray-900 dark:text-white leading-tight uppercase tracking-wide;
+    @apply text-xs font-semibold text-text-primary leading-tight uppercase tracking-wide;
   }
 
   /* ==========================================================================
@@ -57,7 +57,7 @@
    * ========================================================================== */
 
   p {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
+    @apply text-base text-text-secondary leading-relaxed;
   }
 
   /* ==========================================================================
@@ -67,7 +67,7 @@
    * ========================================================================== */
 
   label {
-    @apply text-sm font-medium text-gray-900 dark:text-white;
+    @apply text-sm font-medium text-text-primary;
   }
 
   /* ==========================================================================
@@ -76,7 +76,7 @@
    * ========================================================================== */
 
   a {
-    @apply text-blue-600 dark:text-blue-400 hover:underline;
+    @apply text-brand-primary hover:underline;
   }
 
   /* ==========================================================================
@@ -98,7 +98,7 @@
    * ========================================================================== */
 
   small {
-    @apply text-sm text-gray-500 dark:text-gray-400;
+    @apply text-sm text-muted-foreground;
   }
 
   /* ==========================================================================
@@ -107,7 +107,7 @@
    * ========================================================================== */
 
   ul, ol {
-    @apply text-base text-gray-600 dark:text-gray-300 leading-relaxed;
+    @apply text-base text-text-secondary leading-relaxed;
   }
 
   li {
@@ -120,7 +120,7 @@
    * ========================================================================== */
 
   blockquote {
-    @apply pl-4 border-l-4 border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-300 italic;
+    @apply pl-4 border-l-4 border-border text-text-secondary italic;
   }
 
   /* ==========================================================================
@@ -129,11 +129,11 @@
    * ========================================================================== */
 
   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;
+    @apply font-mono text-sm bg-muted px-1.5 py-0.5 rounded text-text-primary;
   }
 
   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;
+    @apply font-mono text-sm bg-muted p-4 rounded-lg overflow-x-auto text-text-primary;
   }
 
   pre code {
@@ -146,7 +146,7 @@
    * ========================================================================== */
 
   mark {
-    @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded;
+    @apply bg-yellow-200 px-1 rounded;
   }
 }
 
@@ -155,7 +155,7 @@
  *
  * 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).
+ * 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';

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",
 };

package/dist/tokens/utilities.css

@@ -123,37 +123,37 @@
 
   /* Page title - largest heading */
   .text-heading-xl {
-    @apply text-2xl font-bold text-gray-900 dark:text-white;
+    @apply text-2xl font-bold text-text-primary;
   }
 
   /* Section heading */
   .text-heading-lg {
-    @apply text-xl font-semibold text-gray-900 dark:text-white;
+    @apply text-xl font-semibold text-text-primary;
   }
 
   /* Card/subsection heading */
   .text-heading-md {
-    @apply text-lg font-semibold text-gray-900 dark:text-white;
+    @apply text-lg font-semibold text-text-primary;
   }
 
   /* Small heading */
   .text-heading-sm {
-    @apply text-base font-semibold text-gray-900 dark:text-white;
+    @apply text-base font-semibold text-text-primary;
   }
 
   /* Form labels, table headers */
   .text-label {
-    @apply text-sm font-medium text-gray-700 dark:text-gray-300;
+    @apply text-sm font-medium text-text-secondary;
   }
 
   /* Helper text, timestamps, metadata */
   .text-muted {
-    @apply text-sm text-gray-500 dark:text-gray-400;
+    @apply text-sm text-muted-foreground;
   }
 
   /* Very small helper text */
   .text-caption {
-    @apply text-xs text-gray-500 dark:text-gray-400;
+    @apply text-xs text-muted-foreground;
   }
 
   /* ==========================================================================
@@ -163,22 +163,22 @@
 
   /* Base card - white bg, border, rounded corners */
   .card-base {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
+    @apply bg-card border border-border rounded-lg;
   }
 
   /* Standard card with padding */
   .card {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-4;
+    @apply bg-card border border-border rounded-lg p-4;
   }
 
   /* Elevated card with shadow */
   .card-elevated {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow;
+    @apply bg-card border border-border rounded-lg shadow;
   }
 
   /* Compact card with less padding */
   .card-compact {
-    @apply bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3;
+    @apply bg-card border border-border rounded-lg p-3;
   }
 
   /* ==========================================================================
@@ -188,12 +188,12 @@
 
   /* Standard border color */
   .border-default {
-    @apply border-gray-200 dark:border-gray-700;
+    @apply border-border;
   }
 
   /* Divider/separator line */
   .border-separator {
-    @apply border-t border-gray-200 dark:border-gray-700;
+    @apply border-t border-border;
   }
 
   /* ==========================================================================
@@ -203,17 +203,17 @@
 
   /* Base table row */
   .table-row-base {
-    @apply border-b border-gray-200 dark:border-gray-700;
+    @apply border-b border-border;
   }
 
   /* Clickable table row with hover */
   .table-row-clickable {
-    @apply border-b border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors;
+    @apply border-b border-border hover:bg-bg-secondary cursor-pointer transition-colors;
   }
 
   /* Selected table row */
   .table-row-selected {
-    @apply bg-blue-50 dark:bg-blue-900/20 border-b border-gray-200 dark:border-gray-700;
+    @apply bg-status-info-bg border-b border-border;
   }
 
   /* ==========================================================================
@@ -228,27 +228,27 @@
 
   /* Success/green badge */
   .badge-success {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-success-bg text-status-success-text;
   }
 
   /* Error/red badge */
   .badge-error {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-error-bg text-status-error-text;
   }
 
   /* Warning/yellow badge */
   .badge-warning {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-warning-bg text-status-warning-text;
   }
 
   /* Info/blue badge */
   .badge-info {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-status-info-bg text-status-info-text;
   }
 
   /* Neutral/gray badge */
   .badge-neutral {
-    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300;
+    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-text-primary;
   }
 
   /* ==========================================================================
@@ -258,7 +258,7 @@
 
   /* Base input styling */
   .input-base {
-    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 focus:outline-hidden focus:ring-2 focus:ring-blue-500 focus:border-transparent;
+    @apply w-full px-3 py-2 border border-stroke-primary rounded-lg bg-card text-text-primary placeholder-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-focus-ring focus:border-transparent;
   }
 
   /* Base button styling */
@@ -268,12 +268,12 @@
 
   /* Primary button */
   .btn-primary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-brand-primary text-white hover:bg-brand-primary focus:ring-focus-ring;
   }
 
   /* Secondary/outline button */
   .btn-secondary {
-    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 focus:ring-gray-500;
+    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed bg-card text-text-secondary border border-stroke-primary hover:bg-bg-secondary focus:ring-focus-ring;
   }
 
   /* ==========================================================================
@@ -283,17 +283,17 @@
 
   /* Dropdown container */
   .dropdown-base {
-    @apply absolute z-10 mt-1 w-full bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg;
+    @apply absolute z-10 mt-1 w-full bg-card border border-border rounded-lg shadow-lg;
   }
 
   /* Dropdown item */
   .dropdown-item {
-    @apply px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer;
+    @apply px-4 py-2 text-sm text-text-secondary hover:bg-muted cursor-pointer;
   }
 
   /* Dropdown item active/selected */
   .dropdown-item-active {
-    @apply px-4 py-2 text-sm bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300;
+    @apply px-4 py-2 text-sm bg-status-info-bg text-brand-primary;
   }
 
   /* ==========================================================================
@@ -303,17 +303,17 @@
 
   /* Hover effect for clickable items */
   .interactive-hover {
-    @apply hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors;
+    @apply hover:bg-bg-secondary transition-colors;
   }
 
   /* Press/active effect */
   .interactive-press {
-    @apply active:bg-gray-100 dark:active:bg-gray-700;
+    @apply active:bg-muted:bg-bg-secondary;
   }
 
   /* Combined interactive states */
   .interactive {
-    @apply hover:bg-gray-50 dark:hover:bg-gray-800 active:bg-gray-100 dark:active:bg-gray-700 transition-colors cursor-pointer;
+    @apply hover:bg-bg-secondary active:bg-muted:bg-bg-secondary transition-colors cursor-pointer;
   }
 
   /* ==========================================================================
@@ -366,23 +366,11 @@
     animation: skeleton-shimmer 2.5s ease-in-out infinite;
     background: linear-gradient(
       90deg,
-      #e5e7eb 0%,
-      #e5e7eb 40%,
-      #f3f4f6 50%,
-      #e5e7eb 60%,
-      #e5e7eb 100%
-    );
-    background-size: 200% 100%;
-  }
-
-  .dark .skeleton-loading {
-    background: linear-gradient(
-      90deg,
-      #374151 0%,
-      #374151 40%,
-      #4b5563 50%,
-      #374151 60%,
-      #374151 100%
+      hsl(var(--bg-tertiary)) 0%,
+      hsl(var(--bg-tertiary)) 40%,
+      hsl(var(--bg-secondary)) 50%,
+      hsl(var(--bg-tertiary)) 60%,
+      hsl(var(--bg-tertiary)) 100%
     );
     background-size: 200% 100%;
   }