fix(styles): custom themes work without !important; fix(calendar): standardize date format

[nipsysdev]

Summary

This PR includes two fixes that improve the user experience and ensure consistent behavior across systems:

1. Theme system fix: Custom themes now work naturally without requiring !important
2. Calendar fix: Date attributes now use ISO 8601 format for cross-system consistency

---

Fix 1: Custom Themes Work Without !important

Problem

Custom themes were being overridden by LSD's default theme variables, requiring users to add !important to every CSS variable - which violates CSS best practices.

/* User's css - didn't work */
[data-theme="my-theme"] {
  --lsd-primary: #8b5cf6;  /* ❌ Overridden by LSD's defaults */
}

/* Only workaround - bad practice */
[data-theme="my-theme"] {
  --lsd-primary: #8b5cf6 !important;  /* Works but ugly */
}

Solution

Reorganized theme variable definitions in core.css:

Before:

:root, .light {
  --lsd-primary: #000;
  --primary: var(--lsd-primary);  /* Mappings here too */
}

.dark {
  --lsd-primary: #fff;
  --primary: var(--lsd-primary);  /* Duplicate mappings */
}

After:

/* Variable mappings - ALWAYS defined on :root */
:root {
  --primary: var(--lsd-primary);
  --foreground: var(--lsd-text-primary);
  /* ... all mappings */
}

/* Default values - ONLY when no data-theme */
:root:not([data-theme]):not([data-theme*=""]) {
  --lsd-primary: #000;
}

/* Default dark mode - ONLY when no data-theme */
.dark:not([data-theme]):not([data-theme*=""]) {
  --lsd-primary: #fff;
}

Key Benefit

Users can define custom themes anywhere in their CSS (before OR after importing LSD) and it works the same:

/* Option 1: Before import */
[data-theme="my-theme"] { --lsd-primary: #8b5cf6; }
@import "@nipsys/lsd/css";

/* Option 2: After import */
@import "@nipsys/lsd/css";
[data-theme="my-theme"] { --lsd-primary: #8b5cf6; }

Both work identically! When data-theme is set, LSD's default selectors don't match, so custom themes win through natural CSS cascade.

Usage

/* globals.css */
@import "@nipsys/lsd/css";

[data-theme="my-brand"] {
  --lsd-primary: #8b5cf6;
  --lsd-text-primary: #4c1d95;
  --lsd-surface: #f5f3ff;
}

document.documentElement.setAttribute('data-theme', 'my-brand');

---

Fix 2: Calendar Date Format Standardization

Problem

The calendar component was using toLocaleDateString() without specifying a locale, which made the data-day attribute format system-dependent:

• US systems: "1/15/2025"
• European systems: "15/1/2025" or "15.01.2025"

This caused test failures and inconsistent behavior across different environments.

Solution

Changed to ISO 8601 format (YYYY-MM-DD), which is:

• System-independent
• Internationally recognized
• Sortable (string comparison works for date ordering)

Packages/lsd/src/components/ui/calendar/CalendarDayButton.tsx:

// Before (system-dependent)
data-day={day.date.toLocaleDateString()}

// After (consistent)
data-day={day.date.toISOString().split('T')[0]}

Packages/lsd/src/components/ui/calendar/tests/calendar.test.tsx:

// Before
expect(button).toHaveAttribute('data-day', '1/15/2025');

// After
expect(button).toHaveAttribute('data-day', '2025-01-15');