npm - @ropav/styles - Versions diffs - 0.3.0 → 0.4.0 - Mend

@ropav/styles 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (62) hide show

package/README.md +155 -19
package/dist/components/accordion.css +7 -0
package/dist/components/alert.css +8 -0
package/dist/components/autocomplete.css +8 -0
package/dist/components/avatar.css +9 -0
package/dist/components/badge.css +7 -0
package/dist/components/button.css +27 -0
package/dist/components/calendar-year-picker.css +1 -0
package/dist/components/calendar.css +8 -0
package/dist/components/card.css +21 -0
package/dist/components/chip.css +21 -0
package/dist/components/close-button.css +8 -0
package/dist/components/color-input-group.css +9 -0
package/dist/components/color-swatch-picker.css +11 -0
package/dist/components/date-input-group.css +9 -0
package/dist/components/dropdown/dropdown.styles.d.ts.map +1 -1
package/dist/components/dropdown/dropdown.styles.js +1 -1
package/dist/components/dropdown.css +16 -11
package/dist/components/input-group.css +9 -0
package/dist/components/input.css +10 -0
package/dist/components/menu.css +6 -0
package/dist/components/meter.css +12 -0
package/dist/components/number-field.css +8 -0
package/dist/components/pagination.css +4 -0
package/dist/components/progress-bar.css +12 -0
package/dist/components/progress-circle.css +12 -0
package/dist/components/radio.css +7 -0
package/dist/components/range-calendar.css +28 -0
package/dist/components/search-field.css +8 -0
package/dist/components/select.css +9 -0
package/dist/components/separator.css +18 -1
package/dist/components/skeleton.css +9 -0
package/dist/components/slider.css +61 -0
package/dist/components/surface.css +24 -0
package/dist/components/switch.css +30 -0
package/dist/components/table.css +8 -0
package/dist/components/tabs.css +28 -0
package/dist/components/tag.css +10 -0
package/dist/components/textarea.css +10 -0
package/dist/components/toggle-button.css +10 -0
package/dist/components/toolbar.css +7 -0
package/dist/components/typography.css +21 -0
package/dist/index.css +7 -2
package/dist/ropav.min.css +1 -1
package/dist/themes/airbnb.css +226 -0
package/dist/themes/all.css +16 -0
package/dist/themes/coinbase.css +226 -0
package/dist/themes/{default/variables.css → default.css} +12 -5
package/dist/themes/discord.css +226 -0
package/dist/themes/lavender.css +226 -0
package/dist/themes/mint.css +226 -0
package/dist/themes/netflix.css +226 -0
package/dist/themes/rabbit.css +226 -0
package/dist/themes/sky.css +226 -0
package/dist/themes/spotify.css +226 -0
package/dist/themes/uber.css +226 -0
package/dist/utilities/index.css +70 -0
package/dist/variants/index.css +5 -15
package/package.json +2 -3
package/src/components/dropdown/dropdown.styles.ts +3 -1
package/dist/themes/default/components/index.css +0 -6
package/dist/themes/default/index.css +0 -8

package/dist/themes/airbnb.css ADDED Viewed

@@ -0,0 +1,226 @@
+/**
+ * Airbnb theme — GENERATED, do not edit by hand.
+ *
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+ * Seed values: lightness 0.6579, chroma 0.2309, hue 17.07, base 0.
+ *
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
+ * `layer()` wrapper:
+ *
+ *   @import "@ropav/styles";
+ *   @import "@ropav/styles/themes/airbnb.css";
+ *
+ * Light is the default; dark needs the `dark` class alongside the attribute:
+ *   <html data-theme="airbnb">               light
+ *   <html data-theme="airbnb" class="dark">  dark
+ */
+@layer theme {
+  [data-theme="airbnb"] {
+    color-scheme: light;
+    --field-radius: 0.75rem;
+    --radius: 0.5rem;
+    /* Base Colors */
+    --background: oklch(97.02% 0 17.07);
+    --foreground: oklch(21.03% 0 17.07);
+    /* Surfaces */
+    --overlay: oklch(100% 0 17.07);
+    --overlay-foreground: oklch(21.03% 0 17.07);
+    --surface: oklch(100% 0 17.07);
+    --surface-foreground: oklch(21.03% 0 17.07);
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --surface-secondary: oklch(95.24% 0 17.07);
+    --surface-secondary-foreground: oklch(21.03% 0 17.07);
+    --surface-tertiary: oklch(93.73% 0 17.07);
+    --surface-tertiary-foreground: oklch(21.03% 0 17.07);
+    /* Muted and scrollbar */
+    --muted: oklch(51.6% 0 17.07);
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    /* Default */
+    --default: oklch(94% 0 17.07);
+    --default-foreground: oklch(21.03% 0.0059 17.07);
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+    /* Accent */
+    --accent: oklch(65.79% 0.2309 17.07);
+    --accent-foreground: oklch(0.9911 0 0);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+    --focus: oklch(65.79% 0.2309 17.07);
+    /* Form Fields */
+    --field-background: oklch(100% 0 17.07);
+    --field-border: transparent;
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-foreground: oklch(21.03% 0 17.07);
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-placeholder: oklch(51.6% 0 17.07);
+    /* Status Colors */
+    --danger: oklch(0.5392 0.1816 33.72);
+    --danger-foreground: oklch(0.9911 0 0);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+    --success: oklch(0.5573 0.0947 199.48);
+    --success-foreground: oklch(0.9911 0 0);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+    --warning: oklch(0.6904 0.1972 38.75);
+    --warning-foreground: oklch(0.9911 0 0);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+    /* Component Colors */
+    --link: var(--foreground);
+    --segment: oklch(100% 0 17.07);
+    --segment-foreground: oklch(21.03% 0 17.07);
+    /* Borders and separators */
+    --border: oklch(90% 0 17.07);
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+    --separator: oklch(92% 0 17.07);
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+    /* Other */
+    --background-inverse: var(--foreground);
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  }
+  [data-theme="airbnb"].dark,
+  .dark [data-theme="airbnb"] {
+    color-scheme: dark;
+    /* Base Colors */
+    --background: oklch(12% 0 17.07);
+    --foreground: oklch(99.11% 0 17.07);
+    /* Surfaces */
+    --overlay: oklch(21.03% 0 17.07);
+    --overlay-foreground: oklch(99.11% 0 17.07);
+    --surface: oklch(21.03% 0 17.07);
+    --surface-foreground: oklch(99.11% 0 17.07);
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --surface-secondary: oklch(25.7% 0 17.07);
+    --surface-secondary-foreground: oklch(99.11% 0 17.07);
+    --surface-tertiary: oklch(27.21% 0 17.07);
+    --surface-tertiary-foreground: oklch(99.11% 0 17.07);
+    /* Muted and scrollbar */
+    --muted: oklch(70.5% 0 17.07);
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    /* Default */
+    --default: oklch(27.4% 0 17.07);
+    --default-foreground: oklch(99.11% 0 0);
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+    /* Accent */
+    --accent: oklch(65.79% 0.2309 17.07);
+    --accent-foreground: oklch(0.9911 0 0);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+    --focus: oklch(65.79% 0.2309 17.07);
+    /* Form Fields */
+    --field-background: oklch(21.03% 0 17.07);
+    --field-border: transparent;
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-foreground: oklch(99.11% 0 17.07);
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-placeholder: oklch(70.5% 0 17.07);
+    /* Status Colors */
+    --danger: oklch(0.5392 0.1816 33.72);
+    --danger-foreground: oklch(0.9911 0 0);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+    --success: oklch(0.652 0.114864 185.0749);
+    --success-foreground: oklch(0.9911 0 0);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+    --warning: oklch(0.8197 0.170602 78.4658);
+    --warning-foreground: oklch(15% 0.05 78.47);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+    /* Component Colors */
+    --link: var(--foreground);
+    --segment: oklch(39.64% 0 17.07);
+    --segment-foreground: oklch(99.11% 0 17.07);
+    /* Borders and separators */
+    --border: oklch(28% 0 17.07);
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+    --separator: oklch(25% 0 17.07);
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+    /* Other */
+    --background-inverse: var(--foreground);
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  }
+}

package/dist/themes/all.css ADDED Viewed

@@ -0,0 +1,16 @@
+/**
+ * Every bundled theme — GENERATED, do not edit by hand.
+ *
+ * Convenience for docs and playgrounds. Apps should import only the themes they offer.
+ * Import without a `layer()` wrapper.
+ */
+@import "./sky.css";
+@import "./lavender.css";
+@import "./mint.css";
+@import "./netflix.css";
+@import "./uber.css";
+@import "./spotify.css";
+@import "./coinbase.css";
+@import "./airbnb.css";
+@import "./discord.css";
+@import "./rabbit.css";

package/dist/themes/coinbase.css ADDED Viewed

@@ -0,0 +1,226 @@
+/**
+ * Coinbase theme — GENERATED, do not edit by hand.
+ *
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+ * Seed values: lightness 0.5282, chroma 0.2628, hue 262.87, base 0.002.
+ *
+ * The `theme` layer is declared inside this file, so it can be imported with or without a
+ * `layer()` wrapper:
+ *
+ *   @import "@ropav/styles";
+ *   @import "@ropav/styles/themes/coinbase.css";
+ *
+ * Light is the default; dark needs the `dark` class alongside the attribute:
+ *   <html data-theme="coinbase">               light
+ *   <html data-theme="coinbase" class="dark">  dark
+ */
+@layer theme {
+  [data-theme="coinbase"] {
+    color-scheme: light;
+    --field-radius: 0.125rem;
+    --radius: 0.5rem;
+    /* Base Colors */
+    --background: oklch(97.02% 0.002 262.87);
+    --foreground: oklch(21.03% 0.002 262.87);
+    /* Surfaces */
+    --overlay: oklch(100% 0.0006 262.87);
+    --overlay-foreground: oklch(21.03% 0.002 262.87);
+    --surface: oklch(100% 0.001 262.87);
+    --surface-foreground: oklch(21.03% 0.002 262.87);
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --surface-secondary: oklch(95.24% 0.0016 262.87);
+    --surface-secondary-foreground: oklch(21.03% 0.002 262.87);
+    --surface-tertiary: oklch(93.73% 0.0016 262.87);
+    --surface-tertiary-foreground: oklch(21.03% 0.002 262.87);
+    /* Muted and scrollbar */
+    --muted: oklch(51.6% 0.004 262.87);
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    /* Default */
+    --default: oklch(94% 0.002 262.87);
+    --default-foreground: oklch(21.03% 0.0059 262.87);
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+    /* Accent */
+    --accent: oklch(52.82% 0.2628 262.87);
+    --accent-foreground: oklch(99.11% 0 0);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
+    --focus: oklch(52.82% 0.2628 262.87);
+    /* Form Fields */
+    --field-background: oklch(100% 0.001 262.87);
+    --field-border: transparent;
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-foreground: oklch(21.03% 0.002 262.87);
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-placeholder: oklch(51.6% 0.004 262.87);
+    /* Status Colors */
+    --danger: oklch(0.5507 0.2062 24);
+    --danger-foreground: oklch(98% 0.02 24);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+    --success: oklch(0.5438 0.1268 157.17);
+    --success-foreground: oklch(98% 0.0127 157.17);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
+    --warning: oklch(0.8095 0.1119 61.69);
+    --warning-foreground: oklch(15% 0.0336 61.69);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
+    /* Component Colors */
+    --link: var(--foreground);
+    --segment: oklch(100% 0.002 262.87);
+    --segment-foreground: oklch(21.03% 0.002 262.87);
+    /* Borders and separators */
+    --border: oklch(90% 0.002 262.87);
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+    --separator: oklch(92% 0.002 262.87);
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+    /* Other */
+    --background-inverse: var(--foreground);
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  }
+  [data-theme="coinbase"].dark,
+  .dark [data-theme="coinbase"] {
+    color-scheme: dark;
+    /* Base Colors */
+    --background: oklch(12% 0.002 262.87);
+    --foreground: oklch(99.11% 0.002 262.87);
+    /* Surfaces */
+    --overlay: oklch(21.03% 0.004 262.87);
+    --overlay-foreground: oklch(99.11% 0.002 262.87);
+    --surface: oklch(21.03% 0.004 262.87);
+    --surface-foreground: oklch(99.11% 0.002 262.87);
+    --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%);
+    --surface-secondary: oklch(25.7% 0.003 262.87);
+    --surface-secondary-foreground: oklch(99.11% 0.002 262.87);
+    --surface-tertiary: oklch(27.21% 0.003 262.87);
+    --surface-tertiary-foreground: oklch(99.11% 0.002 262.87);
+    /* Muted and scrollbar */
+    --muted: oklch(70.5% 0.004 262.87);
+    --scrollbar: var(--scrollbar-thumb);
+    --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
+    /* Default */
+    --default: oklch(27.4% 0.002 262.87);
+    --default-foreground: oklch(99.11% 0 0);
+    --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%);
+    --default-soft: color-mix(in oklab, var(--default) 50%, transparent);
+    --default-soft-foreground: var(--default-foreground);
+    --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
+    /* Accent */
+    --accent: oklch(52.82% 0.2628 262.87);
+    --accent-foreground: oklch(99.11% 0 0);
+    --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%);
+    --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%);
+    --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent);
+    --focus: oklch(52.82% 0.2628 262.87);
+    /* Form Fields */
+    --field-background: oklch(21.03% 0.004 262.87);
+    --field-border: transparent;
+    --field-border-focus: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 74%,
+      var(--field-foreground, var(--foreground)) 22%
+    );
+    --field-border-hover: color-mix(
+      in oklab,
+      var(--field-border, var(--border)) 88%,
+      var(--field-foreground, var(--foreground)) 10%
+    );
+    --field-focus: var(--field-background, var(--default));
+    --field-foreground: oklch(99.11% 0.002 262.87);
+    --field-hover: color-mix(
+      in oklab,
+      var(--field-background, var(--default)) 90%,
+      var(--field-foreground, var(--foreground)) 2%
+    );
+    --field-placeholder: oklch(70.5% 0.004 262.87);
+    /* Status Colors */
+    --danger: oklch(0.6545 0.2145 22.31);
+    --danger-foreground: oklch(15% 0.05 22.31);
+    --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%);
+    --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
+    --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%);
+    --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent);
+    --success: oklch(0.7574 0.180554 156.931);
+    --success-foreground: oklch(15% 0.05 156.93);
+    --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%);
+    --success-soft: color-mix(in oklab, var(--success) 12%, transparent);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%);
+    --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent);
+    --warning: oklch(0.8095 0.1119 61.69);
+    --warning-foreground: oklch(15% 0.0336 61.69);
+    --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%);
+    --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent);
+    --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%);
+    --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent);
+    /* Component Colors */
+    --link: var(--foreground);
+    --segment: oklch(39.64% 0.002 262.87);
+    --segment-foreground: oklch(99.11% 0.002 262.87);
+    /* Borders and separators */
+    --border: oklch(28% 0.002 262.87);
+    --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%);
+    --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%);
+    --separator: oklch(25% 0.002 262.87);
+    --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);
+    --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%);
+    /* Other */
+    --background-inverse: var(--foreground);
+    --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%);
+    --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%);
+  }
+}

package/dist/themes/{default/variables.css → default.css} RENAMED Viewed

@@ -1,5 +1,12 @@
-@layer base {
-  /* Ropav Default Theme */
+/**
+ * Ropav default theme — hand-written.
+ *
+ * Also the base layer every other theme sits on: the structural tokens declared here
+ * (`--spacing`, `--radius`, `--cursor-*`, the primitives, the shadows, `--backdrop`) are
+ * not repeated by the generated themes, which only swap colours. `:root` and `.dark` keep
+ * matching an element that carries a `data-theme`, so those tokens still come through.
+ */
+@layer theme {
   :root,
   .light,
   .default,
@@ -54,7 +61,7 @@
     --overlay: var(--white);
     --overlay-foreground: var(--foreground);
-    --muted: oklch(0.5517 0.0138 285.94);
+    --muted: oklch(0.516 0.0138 285.94);
     --scrollbar: var(--scrollbar-thumb);
     --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent);
@@ -133,7 +140,7 @@
     --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent);
     --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent);
-    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%);
+    --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 45%);
     --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent);
     --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent);
@@ -145,7 +152,7 @@
     --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent);
     --success-soft: color-mix(in oklab, var(--success) 15%, transparent);
-    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%);
+    --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 75%);
     --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent);
     --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%);