@jarllyng/nostromo 3.1.0

package/dist/lib/performance.d.cts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+interface PerformanceMetrics {
+    renderTime: number;
+    componentName: string;
+    timestamp: number;
+}
+interface PerformanceOptions {
+    enabled?: boolean;
+    logToConsole?: boolean;
+    onMetric?: (metric: PerformanceMetrics) => void;
+    threshold?: number;
+}
+/**
+ * Hook for monitoring component render performance
+ * Measures actual render/commit time using React's performance API
+ */
+declare function usePerformanceMonitor(componentName: string, options?: PerformanceOptions): {
+    renderCount: number;
+    isMonitoring: boolean;
+};
+/**
+ * Higher-order component for performance monitoring
+ */
+declare function withPerformanceMonitoring<P extends object>(Component: React.ComponentType<P>, componentName?: string, options?: PerformanceOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<unknown>>;
+/**
+ * Hook for monitoring memory usage (development only)
+ */
+declare function useMemoryMonitor(): {
+    usedJSHeapSize: number;
+    totalJSHeapSize: number;
+    jsHeapSizeLimit: number;
+} | null;
+/**
+ * Performance optimization utilities
+ */
+declare const performanceUtils: {
+    /**
+     * Debounce function for performance optimization
+     */
+    debounce: <T extends (...args: unknown[]) => unknown>(func: T, wait: number) => ((...args: Parameters<T>) => void);
+    /**
+     * Throttle function for performance optimization
+     */
+    throttle: <T extends (...args: unknown[]) => unknown>(func: T, limit: number) => ((...args: Parameters<T>) => void);
+    /**
+     * Memoize expensive calculations
+     */
+    memoize: <T extends (...args: unknown[]) => unknown>(fn: T) => T;
+};
+
+export { performanceUtils, useMemoryMonitor, usePerformanceMonitor, withPerformanceMonitoring };

package/dist/lib/performance.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+
+interface PerformanceMetrics {
+    renderTime: number;
+    componentName: string;
+    timestamp: number;
+}
+interface PerformanceOptions {
+    enabled?: boolean;
+    logToConsole?: boolean;
+    onMetric?: (metric: PerformanceMetrics) => void;
+    threshold?: number;
+}
+/**
+ * Hook for monitoring component render performance
+ * Measures actual render/commit time using React's performance API
+ */
+declare function usePerformanceMonitor(componentName: string, options?: PerformanceOptions): {
+    renderCount: number;
+    isMonitoring: boolean;
+};
+/**
+ * Higher-order component for performance monitoring
+ */
+declare function withPerformanceMonitoring<P extends object>(Component: React.ComponentType<P>, componentName?: string, options?: PerformanceOptions): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<unknown>>;
+/**
+ * Hook for monitoring memory usage (development only)
+ */
+declare function useMemoryMonitor(): {
+    usedJSHeapSize: number;
+    totalJSHeapSize: number;
+    jsHeapSizeLimit: number;
+} | null;
+/**
+ * Performance optimization utilities
+ */
+declare const performanceUtils: {
+    /**
+     * Debounce function for performance optimization
+     */
+    debounce: <T extends (...args: unknown[]) => unknown>(func: T, wait: number) => ((...args: Parameters<T>) => void);
+    /**
+     * Throttle function for performance optimization
+     */
+    throttle: <T extends (...args: unknown[]) => unknown>(func: T, limit: number) => ((...args: Parameters<T>) => void);
+    /**
+     * Memoize expensive calculations
+     */
+    memoize: <T extends (...args: unknown[]) => unknown>(fn: T) => T;
+};
+
+export { performanceUtils, useMemoryMonitor, usePerformanceMonitor, withPerformanceMonitoring };

package/dist/lib/performance.js

@@ -0,0 +1,2 @@
+export{d as performanceUtils,c as useMemoryMonitor,a as usePerformanceMonitor,b as withPerformanceMonitoring}from'../chunk-3BNGK67W.js';//# sourceMappingURL=performance.js.map
+//# sourceMappingURL=performance.js.map

package/dist/lib/performance.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"performance.js"}

package/dist/tailwind.css

@@ -0,0 +1,29 @@
+/* Nostromo UI - Tailwind v4 entry point
+ *
+ * Single import that pulls in Tailwind, the theme bridge and the base layer in
+ * the right order. Consumers add one theme on top:
+ *
+ *   @import "@jarllyng/nostromo/tailwind.css";
+ *   @import "@jarllyng/nostromo/themes/nostromo.css";
+ *
+ * Owning the order here is deliberate - the bridge has to be registered before
+ * the base layer uses the tokens, and leaving that to consumers is how the
+ * ordering bugs crept in previously.
+ */
+
+@import "tailwindcss";
+
+/* Tailwind v4 skips node_modules when scanning for class names, so the
+   library has to point at its own compiled output explicitly. Paths are
+   relative to this file's location in dist/. */
+@source "./**/*.js";
+
+/* Unlayered: @theme / @utility are Tailwind at-rules and it handles their
+   layering itself. */
+@import "./tokens.css";
+
+/* The reset and base typography go into Tailwind's `base` layer. Left
+   unlayered they would outrank every layered rule in the document - including
+   utility classes - and a blanket `* { margin: 0 }` beating utilities is not
+   something a consumer can work around. */
+@import "./base.css" layer(base);

package/dist/themes/__tests__/themes.test.ts

@@ -0,0 +1,46 @@
+import { describe, it, expect } from "vitest";
+import { readFileSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+describe("Theme CSS Files", () => {
+  const themesDir = join(__dirname, "..");
+  const themes = ["nostromo", "mother", "lv-426", "sulaco"];
+
+  themes.forEach((theme) => {
+    it(`should have ${theme} theme file`, () => {
+      const themePath = join(themesDir, `${theme}.css`);
+      const css = readFileSync(themePath, "utf-8");
+      expect(css).toBeTruthy();
+      expect(css.length).toBeGreaterThan(0);
+    });
+
+    it(`should have ${theme} theme data-theme selector`, () => {
+      const themePath = join(themesDir, `${theme}.css`);
+      const css = readFileSync(themePath, "utf-8");
+      expect(css).toContain(`[data-theme="${theme}"]`);
+    });
+
+    it(`should have ${theme} theme semantic color tokens`, () => {
+      const themePath = join(themesDir, `${theme}.css`);
+      const css = readFileSync(themePath, "utf-8");
+      // Tokens live in the private --nostromo-* namespace; --color-* is owned by
+      // Tailwind v4 and reserving it here would create a circular reference.
+      expect(css).toContain("--nostromo-color-background");
+      expect(css).toContain("--nostromo-color-foreground");
+      expect(css).toContain("--nostromo-color-primary");
+      expect(css).toContain("--nostromo-color-muted");
+    });
+
+    it(`should have ${theme} theme HSL color format`, () => {
+      const themePath = join(themesDir, `${theme}.css`);
+      const css = readFileSync(themePath, "utf-8");
+      // Check for HSL pattern: number number% number%
+      const hslPattern = /\d+\s+\d+%\s+\d+%/;
+      expect(css).toMatch(hslPattern);
+    });
+  });
+});

package/dist/themes/index.ts

@@ -0,0 +1,50 @@
+// Theme exports
+export * from './utils';
+
+// Theme CSS imports (for bundlers that support CSS imports)
+import './nostromo.css';
+import './mother.css';
+import './lv-426.css';
+import './sulaco.css';
+
+// Theme names and descriptions
+export const themeInfo = {
+  nostromo: {
+    name: 'Nostromo',
+    description: 'Classic space industrial theme inspired by the USCSS Nostromo',
+    colors: {
+      primary: 'Purple/Blue',
+      secondary: 'Dark Gray',
+      accent: 'Green'
+    }
+  },
+  mother: {
+    name: 'Mother',
+    description: 'Cold, clinical AI aesthetic inspired by the ship\'s computer',
+    colors: {
+      primary: 'Cold Blue/Cyan',
+      secondary: 'Clinical White',
+      accent: 'Green'
+    }
+  },
+  'lv-426': {
+    name: 'LV-426',
+    description: 'Warm, rusty atmosphere inspired by the planet LV-426',
+    colors: {
+      primary: 'Warm Orange/Rust',
+      secondary: 'Earth Tones',
+      accent: 'Green'
+    }
+  },
+  sulaco: {
+    name: 'Sulaco',
+    description: 'Modern, military-inspired aesthetic from the USS Sulaco',
+    colors: {
+      primary: 'Military Blue/Gray',
+      secondary: 'Steel Tones',
+      accent: 'Green'
+    }
+  }
+} as const;
+
+export type ThemeInfo = typeof themeInfo;

package/dist/themes/lv-426.css

@@ -0,0 +1,342 @@
+/* LV-426 Theme - Warm, rusty atmosphere inspired by the planet LV-426 from Alien */
+
+[data-theme="lv-426"] {
+  /* Brand Colors - Warm orange/rust inspired by the planet's atmosphere */
+  --nostromo-color-brand-50: 25 95% 95%;
+  --nostromo-color-brand-100: 25 95% 90%;
+  --nostromo-color-brand-200: 25 95% 80%;
+  --nostromo-color-brand-300: 25 95% 70%;
+  --nostromo-color-brand-400: 25 95% 60%;
+  --nostromo-color-brand-500: 25 95% 50%;
+  --nostromo-color-brand-600: 25 95% 40%;
+  --nostromo-color-brand-700: 25 95% 30%;
+  --nostromo-color-brand-800: 25 95% 20%;
+  --nostromo-color-brand-900: 25 95% 10%;
+  --nostromo-color-brand-950: 25 95% 5%;
+
+  /* Neutral Colors - Warm earth tones */
+  --nostromo-color-neutral-50: 30 20% 98%;
+  --nostromo-color-neutral-100: 30 20% 95%;
+  --nostromo-color-neutral-200: 30 20% 90%;
+  --nostromo-color-neutral-300: 30 20% 80%;
+  --nostromo-color-neutral-400: 30 20% 60%;
+  --nostromo-color-neutral-500: 30 20% 40%;
+  --nostromo-color-neutral-600: 30 20% 30%;
+  --nostromo-color-neutral-700: 30 20% 20%;
+  --nostromo-color-neutral-800: 30 20% 15%;
+  --nostromo-color-neutral-900: 30 20% 10%;
+  --nostromo-color-neutral-950: 30 20% 5%;
+
+  /* Success Colors - Green for life/vegetation */
+  --nostromo-color-success-50: 120 60% 95%;
+  --nostromo-color-success-100: 120 60% 90%;
+  --nostromo-color-success-200: 120 60% 80%;
+  --nostromo-color-success-300: 120 60% 70%;
+  --nostromo-color-success-400: 120 60% 60%;
+  --nostromo-color-success-500: 120 60% 40%;
+  --nostromo-color-success-600: 120 60% 30%;
+  --nostromo-color-success-700: 120 60% 20%;
+  --nostromo-color-success-800: 120 60% 15%;
+  --nostromo-color-success-900: 120 60% 10%;
+  --nostromo-color-success-950: 120 60% 5%;
+
+  /* Warning Colors - Amber for danger alerts */
+  --nostromo-color-warning-50: 45 100% 95%;
+  --nostromo-color-warning-100: 45 100% 90%;
+  --nostromo-color-warning-200: 45 100% 80%;
+  --nostromo-color-warning-300: 45 100% 70%;
+  --nostromo-color-warning-400: 45 100% 60%;
+  --nostromo-color-warning-500: 45 100% 50%;
+  --nostromo-color-warning-600: 45 100% 40%;
+  --nostromo-color-warning-700: 45 100% 30%;
+  --nostromo-color-warning-800: 45 100% 20%;
+  --nostromo-color-warning-900: 45 100% 10%;
+  --nostromo-color-warning-950: 45 100% 5%;
+
+  /* Error Colors - Deep red for critical danger */
+  --nostromo-color-error-50: 0 80% 95%;
+  --nostromo-color-error-100: 0 80% 90%;
+  --nostromo-color-error-200: 0 80% 80%;
+  --nostromo-color-error-300: 0 80% 70%;
+  --nostromo-color-error-400: 0 80% 60%;
+  --nostromo-color-error-500: 0 80% 50%;
+  --nostromo-color-error-600: 0 80% 40%;
+  --nostromo-color-error-700: 0 80% 30%;
+  --nostromo-color-error-800: 0 80% 20%;
+  --nostromo-color-error-900: 0 80% 10%;
+  --nostromo-color-error-950: 0 80% 5%;
+
+  /* Info Colors - Blue for information */
+  --nostromo-color-info-50: 210 80% 95%;
+  --nostromo-color-info-100: 210 80% 90%;
+  --nostromo-color-info-200: 210 80% 80%;
+  --nostromo-color-info-300: 210 80% 70%;
+  --nostromo-color-info-400: 210 80% 60%;
+  --nostromo-color-info-500: 210 80% 50%;
+  --nostromo-color-info-600: 210 80% 40%;
+  --nostromo-color-info-700: 210 80% 30%;
+  --nostromo-color-info-800: 210 80% 20%;
+  --nostromo-color-info-900: 210 80% 10%;
+  --nostromo-color-info-950: 210 80% 5%;
+
+  /* Semantic Colors */
+  --nostromo-color-background: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-muted: hsl(var(--nostromo-color-neutral-100));
+  --nostromo-color-muted-foreground: hsl(var(--nostromo-color-neutral-600));
+  --nostromo-color-popover: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-popover-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-card: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-card-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-border: hsl(var(--nostromo-color-neutral-200));
+  --nostromo-color-input: hsl(var(--nostromo-color-neutral-200));
+  /* Contrast validated: primary-foreground/primary 4.52:1 */
+  --nostromo-color-primary: hsl(var(--nostromo-color-brand-500));
+  --nostromo-color-primary-foreground: hsl(
+    0 0% 100%
+  ); /* White for better contrast */
+  --nostromo-color-secondary: hsl(var(--nostromo-color-neutral-100));
+  --nostromo-color-secondary-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-accent: hsl(var(--nostromo-color-brand-100));
+  --nostromo-color-accent-foreground: hsl(var(--nostromo-color-brand-900));
+  --nostromo-color-destructive: hsl(var(--nostromo-color-error-500));
+  --nostromo-color-destructive-foreground: hsl(
+    var(--nostromo-color-neutral-50)
+  );
+  --nostromo-color-success-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-warning-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-error-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-info-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-ring: hsl(var(--nostromo-color-brand-500));
+
+  /* Typography */
+  --nostromo-font-sans:
+    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+  --nostromo-font-mono:
+    "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro",
+    monospace;
+  --nostromo-font-heading:
+    "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, sans-serif;
+
+  /* Spacing */
+  --nostromo-spacing-xs: 0.25rem;
+  --nostromo-spacing-sm: 0.5rem;
+  --nostromo-spacing-md: 1rem;
+  --nostromo-spacing-lg: 1.5rem;
+  --nostromo-spacing-xl: 2rem;
+  --nostromo-spacing-2xl: 3rem;
+  --nostromo-spacing-3xl: 4rem;
+
+  /* Border Radius */
+  --nostromo-radius-sm: 0.25rem;
+  --nostromo-radius-md: 0.375rem;
+  --nostromo-radius-lg: 0.5rem;
+  --nostromo-radius-xl: 0.75rem;
+  --nostromo-radius-2xl: 1rem;
+  --nostromo-radius-full: 9999px;
+
+  /* Shadows */
+  --nostromo-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --nostromo-shadow-md:
+    0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --nostromo-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+  /* Transitions */
+  --nostromo-transition-fast: 150ms ease-in-out;
+  --nostromo-transition-normal: 250ms ease-in-out;
+  --nostromo-transition-slow: 350ms ease-in-out;
+
+  /* Z-Index */
+  --nostromo-z-dropdown: 1000;
+  --nostromo-z-sticky: 1020;
+  --nostromo-z-fixed: 1030;
+  --nostromo-z-modal-backdrop: 1040;
+  --nostromo-z-modal: 1050;
+  --nostromo-z-popover: 1060;
+  --nostromo-z-tooltip: 1070;
+  --nostromo-z-toast: 1080;
+}
+
+/* Dark mode overrides for LV-426 theme */
+[data-theme="lv-426"][data-color-scheme="dark"] {
+  --nostromo-color-background: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-muted: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-muted-foreground: hsl(var(--nostromo-color-neutral-400));
+  --nostromo-color-popover: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-popover-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-card: hsl(var(--nostromo-color-neutral-800));
+  --nostromo-color-card-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-border: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-input: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-primary: hsl(var(--nostromo-color-brand-400));
+  --nostromo-color-primary-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-secondary: hsl(var(--nostromo-color-neutral-700));
+  --nostromo-color-secondary-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-accent: hsl(var(--nostromo-color-brand-800));
+  --nostromo-color-accent-foreground: hsl(var(--nostromo-color-brand-100));
+  --nostromo-color-destructive: hsl(var(--nostromo-color-error-400));
+  --nostromo-color-destructive-foreground: hsl(
+    var(--nostromo-color-neutral-900)
+  );
+  --nostromo-color-success-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-warning-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-error-foreground: hsl(var(--nostromo-color-neutral-900));
+  --nostromo-color-info-foreground: hsl(var(--nostromo-color-neutral-50));
+  --nostromo-color-ring: hsl(var(--nostromo-color-brand-400));
+}
+
+/* LV-426 theme specific styles */
+[data-theme="lv-426"] {
+  /* Warm, earthy aesthetic */
+  font-family: var(--nostromo-font-sans);
+  line-height: 1.6;
+  color: var(--nostromo-color-foreground);
+  background-color: var(--nostromo-color-background);
+}
+
+[data-theme="lv-426"] .font-mono {
+  font-family: var(--nostromo-font-mono);
+}
+
+[data-theme="lv-426"] .font-heading {
+  font-family: var(--nostromo-font-heading);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+}
+
+/* LV-426 theme component overrides */
+[data-theme="lv-426"] .btn {
+  border-radius: var(--nostromo-radius-md);
+  transition: all var(--nostromo-transition-fast);
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-primary),
+    hsl(var(--nostromo-color-brand-600))
+  );
+}
+
+[data-theme="lv-426"] .btn:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--nostromo-shadow-lg);
+  background: linear-gradient(
+    135deg,
+    hsl(var(--nostromo-color-brand-600)),
+    hsl(var(--nostromo-color-brand-700))
+  );
+}
+
+[data-theme="lv-426"] .card {
+  border-radius: var(--nostromo-radius-lg);
+  border: 1px solid var(--nostromo-color-border);
+  background-color: var(--nostromo-color-card);
+  box-shadow: var(--nostromo-shadow-md);
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-card),
+    hsl(var(--nostromo-color-neutral-100))
+  );
+}
+
+[data-theme="lv-426"] .input {
+  border-radius: var(--nostromo-radius-md);
+  border: 1px solid var(--nostromo-color-input);
+  transition: all var(--nostromo-transition-fast);
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-background),
+    hsl(var(--nostromo-color-neutral-100))
+  );
+}
+
+[data-theme="lv-426"] .input:focus {
+  border-color: var(--nostromo-color-primary);
+  box-shadow: 0 0 0 3px hsl(var(--nostromo-color-primary) / 0.2);
+  background: var(--nostromo-color-background);
+}
+
+/* LV-426 theme animations */
+[data-theme="lv-426"] .animate-pulse {
+  animation: lv426-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes lv426-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.8;
+    transform: scale(1.02);
+  }
+}
+
+[data-theme="lv-426"] .animate-spin {
+  animation: lv426-spin 1s linear infinite;
+}
+
+@keyframes lv426-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* LV-426 theme special effects */
+[data-theme="lv-426"] .btn-primary {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-primary),
+    hsl(var(--nostromo-color-brand-600))
+  );
+  border: 1px solid hsl(var(--nostromo-color-brand-700));
+  box-shadow: 0 4px 14px 0 hsl(var(--nostromo-color-brand-500) / 0.3);
+}
+
+[data-theme="lv-426"] .btn-primary:hover {
+  background: linear-gradient(
+    135deg,
+    hsl(var(--nostromo-color-brand-600)),
+    hsl(var(--nostromo-color-brand-700))
+  );
+  box-shadow: 0 6px 20px 0 hsl(var(--nostromo-color-brand-500) / 0.4);
+}
+
+[data-theme="lv-426"] .card-elevated {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-card),
+    hsl(var(--nostromo-color-neutral-100))
+  );
+  box-shadow: var(--nostromo-shadow-xl);
+  border: 1px solid hsl(var(--nostromo-color-brand-200));
+}
+
+/* LV-426 theme text effects */
+[data-theme="lv-426"] .text-gradient {
+  background: linear-gradient(
+    135deg,
+    var(--nostromo-color-primary),
+    hsl(var(--nostromo-color-brand-600))
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+[data-theme="lv-426"] .text-warm {
+  color: hsl(var(--nostromo-color-brand-600));
+}
+
+[data-theme="lv-426"] .text-earth {
+  color: hsl(var(--nostromo-color-neutral-600));
+}