@dryui/ui 3.0.0 → 4.0.0

package/src/themes/component-defaults.css

@@ -0,0 +1,47 @@
+/*
+ * Component defaults — opt-in.
+ *
+ * Mirrors the toggle and beam component tokens that ship inline in
+ * `default.css` / `dark.css` / `aurora.css`. Importing this file directly
+ * is only useful for consumers building a custom theme without
+ * `default.css`; otherwise the rules below are already loaded through the
+ * standard theme files.
+ */
+
+:root {
+	/* ─── Component: Toggle ─────────────────────────────────────────
+	   Derived from semantic tokens so brand overrides (e.g. a consumer
+	   retheming --dry-color-fill-brand) flow through to toggles too.
+	   Thumb bg is intentionally a neutral literal — it's a surface knob,
+	   not a brand-tinted element. */
+	--dry-toggle-track-bg: var(--dry-color-fill-brand-weak);
+	--dry-toggle-track-stroke: var(--dry-color-stroke-strong);
+	--dry-toggle-selected-bg: var(--dry-color-fill-brand);
+	--dry-toggle-selected-stroke: var(--dry-color-fill-brand);
+	--dry-toggle-thumb-bg: #ffffff;
+	--dry-toggle-disabled-fill: var(--dry-color-stroke-weak);
+	--dry-toggle-disabled-stroke: var(--dry-color-stroke-weak);
+	--dry-toggle-label-color: var(--dry-color-text-strong);
+	--dry-toggle-label-disabled-color: var(--dry-color-text-disabled);
+
+	/* ─── Component: Beam ─────────────────────────────────────────── */
+	--dry-beam-default-blend: multiply;
+}
+
+/* Dark-mode overrides: thumb is a dark surface knob, beam blend is
+   `screen` so the bloom adds rather than subtracts. Aurora-dark inherits
+   here too because it shares the dark surface story. */
+[data-theme='dark'],
+[data-theme='aurora-dark'] {
+	--dry-toggle-thumb-bg: #292b33;
+	--dry-beam-default-blend: screen;
+}
+
+.theme-auto:not([data-theme='light']) {
+	@media (prefers-color-scheme: dark) {
+		& {
+			--dry-toggle-thumb-bg: #292b33;
+			--dry-beam-default-blend: screen;
+		}
+	}
+}

package/src/themes/dark.css

@@ -0,0 +1,317 @@
+[data-theme='dark'] {
+	/* ─── Public aliases (dark) ────────────────────────────────────── */
+	--dry-color-primary: hsl(230, 100%, 82%);
+	--dry-color-primary-hover: hsl(230, 100%, 75%);
+	--dry-color-text: hsla(0, 0%, 100%, 1);
+	--dry-color-text-secondary: hsla(0, 0%, 100%, 0.78);
+	--dry-color-muted: hsla(0, 0%, 100%, 0.12);
+	--dry-color-warning: hsl(40, 75%, 52%);
+	--dry-color-success: hsl(145, 55%, 48%);
+	--dry-color-danger: hsl(0, 65%, 55%);
+	--dry-color-border: hsla(0, 0%, 100%, 0.12);
+	--dry-color-border-hover: hsla(0, 0%, 100%, 0.6);
+
+	/* ─── Neutral ─────────────────────────────────────────────────── */
+	--dry-color-icon: hsla(0, 0%, 100%, 0.85);
+	--dry-color-fill: hsla(0, 0%, 100%, 0.06);
+	--dry-color-fill-hover: hsla(0, 0%, 100%, 0.1);
+	--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
+
+	/* ─── Brand dark overrides ────────────────────────────────────── */
+	--dry-color-fill-brand-active: hsl(230, 100%, 70%);
+	--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
+	--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
+	--dry-color-stroke-brand-strong: hsla(230, 100%, 82%, 0.8);
+	--dry-color-on-brand: hsl(233, 18%, 9%);
+	--dry-color-focus-ring: hsla(230, 100%, 82%, 0.4);
+
+	/* ─── Backgrounds ─────────────────────────────────────────────── */
+	--dry-color-bg-base: hsl(233, 18%, 9%);
+	--dry-color-bg-raised: hsl(233, 13%, 13%);
+	--dry-color-bg-overlay: hsl(234, 11%, 18%);
+
+	/* ─── Semantic parity extensions ──────────────────────────────── */
+	--dry-color-text-inverse: hsla(230, 100%, 15%, 0.9);
+	--dry-color-text-inverse-weak: hsla(230, 100%, 20%, 0.65);
+	--dry-color-text-inverse-disabled: hsla(230, 100%, 20%, 0.1);
+
+	--dry-color-stroke-focus: var(--dry-color-brand);
+	--dry-color-stroke-selected: var(--dry-color-brand);
+	--dry-color-stroke-disabled: var(--dry-color-stroke-weak);
+	--dry-color-stroke-inverse: hsla(230, 100%, 20%, 0.45);
+	--dry-color-stroke-inverse-weak: hsla(230, 100%, 20%, 0.1);
+
+	--dry-color-fill-weak: var(--dry-color-fill);
+	--dry-color-fill-weaker: hsla(0, 0%, 100%, 0.03);
+	--dry-color-fill-selected: var(--dry-color-fill-brand);
+	--dry-color-fill-disabled: var(--dry-color-stroke-weak);
+	--dry-color-fill-inverse: var(--dry-color-text-inverse);
+	--dry-color-fill-inverse-weak: hsla(230, 100%, 25%, 0.04);
+	--dry-color-fill-yellow: #fec62e;
+
+	--dry-color-bg-sunken: #000000;
+	--dry-color-bg-alternate: var(--dry-color-bg-sunken);
+	--dry-color-bg-inverse: #ffffff;
+
+	/* ─── Image edge ring (dark) ─────────────────────────────────── */
+	--dry-image-edge: rgba(255, 255, 255, 0.1);
+
+	/* ─── Component: Toggle (dark thumb override) ─────────────────── */
+	--dry-toggle-thumb-bg: #292b33;
+
+	/* ─── Component: Beam ─────────────────────────────────────────
+	   `screen` lifts the bloom on dark surfaces; `multiply` (light
+	   default) would darken instead. */
+	--dry-beam-default-blend: screen;
+
+	/* ─── Status: Error ───────────────────────────────────────────── */
+	--dry-color-text-error: hsl(0, 60%, 70%);
+	--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+	--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
+	--dry-color-stroke-error: hsl(0, 45%, 55%);
+	--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
+	--dry-color-on-error: #ffffff;
+
+	/* ─── Status: Warning ─────────────────────────────────────────── */
+	--dry-color-text-warning: hsl(40, 80%, 65%);
+	--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
+	--dry-color-stroke-warning: hsl(40, 55%, 55%);
+	--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
+	--dry-color-on-warning: hsl(40, 80%, 15%);
+
+	/* ─── Status: Success ─────────────────────────────────────────── */
+	--dry-color-text-success: hsl(145, 55%, 65%);
+	--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
+	--dry-color-stroke-success: hsl(145, 45%, 55%);
+	--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
+	--dry-color-on-success: #ffffff;
+
+	/* ─── Status: Info ────────────────────────────────────────────── */
+	--dry-color-text-info: hsl(210, 65%, 70%);
+	--dry-color-fill-info: hsl(210, 65%, 55%);
+	--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
+	--dry-color-stroke-info: hsl(210, 45%, 55%);
+	--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+
+	/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+	--dry-color-fill-accent: hsl(25, 85%, 68%);
+	--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
+	--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
+	--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+
+	/* ─── Purple semantic palette (badge / tag purple variants) ───── */
+	--dry-color-text-purple: hsl(280, 75%, 78%);
+	--dry-color-fill-purple: hsl(280, 75%, 70%);
+	--dry-color-fill-purple-weak: hsla(280, 75%, 70%, 0.12);
+	--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
+	--dry-color-on-purple: hsl(233, 18%, 9%);
+
+	/* ─── Extended surface depth ──────────────────────────────────── */
+	--dry-color-bg-floating: hsl(234, 8%, 26%);
+
+	/* ─── Semantic shadows ────────────────────────────────────────── */
+	--dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
+	--dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
+	--dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
+
+	/* ─── Tinted shadows ──────────────────────────────────────────── */
+
+	/* ─── Utility shadows (dark) — edge reads white, layers stay ink ── */
+	--dry-shadow-sm:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.4),
+		0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+	--dry-shadow-md:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.45),
+		0px 4px 8px -2px rgba(0, 0, 0, 0.3);
+	--dry-shadow-lg:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.5),
+		0px 8px 20px -4px rgba(0, 0, 0, 0.4);
+	--dry-shadow-xl:
+		0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.55),
+		0px 20px 40px -8px rgba(0, 0, 0, 0.5);
+
+	/* ─── Overlay backdrops ───────────────────────────────────────── */
+	--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
+	--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
+
+	/* Dark-mode enhancements — intentional. Light mode relies on component-level handling. */
+
+	/* ─── Scrollbar ───────────────────────────────────────────────── */
+	--dry-scrollbar-thumb: var(--dry-color-stroke-weak);
+	--dry-scrollbar-thumb-hover: var(--dry-color-stroke-strong);
+
+	/* ─── Glass surface ───────────────────────────────────────────── */
+	--dry-color-glass-tint: var(--dry-color-bg-raised);
+	--dry-glass-tint: var(--dry-color-glass-tint);
+	--dry-glass-saturation: 120%;
+
+	/* ─── Glow extensions ─────────────────────────────────────────── */
+
+	/* ─── Gradient palette ────────────────────────────────────────── */
+
+	/* ─── Grain / noise texture ───────────────────────────────────── */
+	--dry-grain-opacity: 0.06;
+}
+
+/* When `.theme-auto` is combined with `data-theme="light"`, the explicit
+   `data-theme` wins — do NOT apply dark tokens under that combo, even on a
+   dark-preferring OS. Without this guard, `<html class="theme-auto" data-theme="light">`
+   on a dark OS would still resolve to dark tokens because the media query
+   below fires regardless of the attribute. Explicit `data-theme="dark"` is
+   already handled by the rule above; this class only drives the system-aware
+   auto behaviour when no explicit override is present (or when the override is
+   explicitly dark). */
+.theme-auto:not([data-theme='light']) {
+	@media (prefers-color-scheme: dark) {
+		& {
+			/* ─── Public aliases (auto dark) ────────────────────────────── */
+			--dry-color-primary: hsl(230, 100%, 82%);
+			--dry-color-primary-hover: hsl(230, 100%, 75%);
+			--dry-color-text: hsla(0, 0%, 100%, 1);
+			--dry-color-text-secondary: hsla(0, 0%, 100%, 0.78);
+			--dry-color-muted: hsla(0, 0%, 100%, 0.12);
+			--dry-color-warning: hsl(40, 75%, 52%);
+			--dry-color-success: hsl(145, 55%, 48%);
+			--dry-color-danger: hsl(0, 65%, 55%);
+			--dry-color-border: hsla(0, 0%, 100%, 0.12);
+			--dry-color-border-hover: hsla(0, 0%, 100%, 0.6);
+
+			/* ─── Neutral ─────────────────────────────────────────────────── */
+			--dry-color-icon: hsla(0, 0%, 100%, 0.85);
+			--dry-color-fill: hsla(0, 0%, 100%, 0.06);
+			--dry-color-fill-hover: hsla(0, 0%, 100%, 0.1);
+			--dry-color-fill-active: hsla(0, 0%, 100%, 0.14);
+
+			/* ─── Brand dark overrides ────────────────────────────────────── */
+			--dry-color-fill-brand-active: hsl(230, 100%, 70%);
+			--dry-color-fill-brand-weak: hsla(230, 100%, 82%, 0.06);
+			--dry-color-stroke-brand: hsla(230, 100%, 82%, 0.5);
+			--dry-color-stroke-brand-strong: hsla(230, 100%, 82%, 0.8);
+			--dry-color-on-brand: hsl(233, 18%, 9%);
+			--dry-color-focus-ring: hsla(230, 100%, 82%, 0.4);
+
+			/* ─── Backgrounds ─────────────────────────────────────────────── */
+			--dry-color-bg-base: hsl(233, 18%, 9%);
+			--dry-color-bg-raised: hsl(233, 13%, 13%);
+			--dry-color-bg-overlay: hsl(234, 11%, 18%);
+
+			/* ─── Semantic parity extensions ──────────────────────────────── */
+			--dry-color-text-inverse: hsla(230, 100%, 15%, 0.9);
+			--dry-color-text-inverse-weak: hsla(230, 100%, 20%, 0.65);
+			--dry-color-text-inverse-disabled: hsla(230, 100%, 20%, 0.1);
+
+			--dry-color-stroke-focus: var(--dry-color-brand);
+			--dry-color-stroke-selected: var(--dry-color-brand);
+			--dry-color-stroke-disabled: var(--dry-color-stroke-weak);
+			--dry-color-stroke-inverse: hsla(230, 100%, 20%, 0.45);
+			--dry-color-stroke-inverse-weak: hsla(230, 100%, 20%, 0.1);
+
+			--dry-color-fill-weak: var(--dry-color-fill);
+			--dry-color-fill-weaker: hsla(0, 0%, 100%, 0.03);
+			--dry-color-fill-selected: var(--dry-color-fill-brand);
+			--dry-color-fill-disabled: var(--dry-color-stroke-weak);
+			--dry-color-fill-inverse: var(--dry-color-text-inverse);
+			--dry-color-fill-inverse-weak: hsla(230, 100%, 25%, 0.04);
+			--dry-color-fill-yellow: #fec62e;
+
+			--dry-color-bg-sunken: #000000;
+			--dry-color-bg-alternate: var(--dry-color-bg-sunken);
+			--dry-color-bg-inverse: #ffffff;
+
+			/* ─── Image edge ring (dark) ─────────────────────────────────── */
+			--dry-image-edge: rgba(255, 255, 255, 0.1);
+
+			/* ─── Component: Toggle (dark thumb) + Beam (`screen` blend) ── */
+			--dry-toggle-thumb-bg: #292b33;
+			--dry-beam-default-blend: screen;
+
+			/* ─── Status: Error ───────────────────────────────────────────── */
+			--dry-color-text-error: hsl(0, 60%, 70%);
+			--dry-color-fill-error-hover: hsl(0, 65%, 48%);
+			--dry-color-fill-error-weak: hsla(0, 60%, 60%, 0.15);
+			--dry-color-stroke-error: hsl(0, 45%, 55%);
+			--dry-color-stroke-error-strong: hsla(0, 65%, 55%, 0.8);
+			--dry-color-on-error: #ffffff;
+
+			/* ─── Status: Warning ─────────────────────────────────────────── */
+			--dry-color-text-warning: hsl(40, 80%, 65%);
+			--dry-color-fill-warning-weak: hsla(40, 75%, 60%, 0.15);
+			--dry-color-stroke-warning: hsl(40, 55%, 55%);
+			--dry-color-stroke-warning-strong: hsla(40, 75%, 52%, 0.8);
+			--dry-color-on-warning: hsl(40, 80%, 15%);
+
+			/* ─── Status: Success ─────────────────────────────────────────── */
+			--dry-color-text-success: hsl(145, 55%, 65%);
+			--dry-color-fill-success-weak: hsla(145, 55%, 60%, 0.15);
+			--dry-color-stroke-success: hsl(145, 45%, 55%);
+			--dry-color-stroke-success-strong: hsla(145, 55%, 48%, 0.8);
+			--dry-color-on-success: #ffffff;
+
+			/* ─── Status: Info ────────────────────────────────────────────── */
+			--dry-color-text-info: hsl(210, 65%, 70%);
+			--dry-color-fill-info: hsl(210, 65%, 55%);
+			--dry-color-fill-info-weak: hsla(210, 60%, 65%, 0.15);
+			--dry-color-stroke-info: hsl(210, 45%, 55%);
+			--dry-color-stroke-info-strong: hsla(210, 65%, 55%, 0.8);
+
+			/* ─── Accent tone (warm counterpoint to brand) ───────────────── */
+			--dry-color-fill-accent: hsl(25, 85%, 68%);
+			--dry-color-fill-accent-weak: hsla(25, 85%, 68%, 0.1);
+			--dry-color-stroke-accent: hsla(25, 85%, 68%, 0.5);
+			--dry-color-stroke-accent-strong: hsla(25, 85%, 68%, 0.8);
+
+			/* ─── Purple semantic palette (badge / tag purple variants) ───── */
+			--dry-color-text-purple: hsl(280, 75%, 78%);
+			--dry-color-fill-purple: hsl(280, 75%, 70%);
+			--dry-color-fill-purple-weak: hsla(280, 75%, 70%, 0.12);
+			--dry-color-stroke-purple: hsla(280, 75%, 70%, 0.5);
+			--dry-color-on-purple: hsl(233, 18%, 9%);
+
+			/* ─── Extended surface depth ──────────────────────────────────── */
+			--dry-color-bg-floating: hsl(234, 8%, 26%);
+
+			/* ─── Semantic shadows ────────────────────────────────────────── */
+			--dry-shadow-raised: 0 1px 3px hsla(230, 30%, 5%, 0.4), 0 1px 2px hsla(230, 30%, 5%, 0.3);
+			--dry-shadow-overlay: 0 8px 24px hsla(230, 30%, 5%, 0.5), 0 2px 8px hsla(230, 30%, 5%, 0.4);
+			--dry-shadow-sunken: inset 0 1px 4px hsla(230, 30%, 5%, 0.3);
+
+			/* ─── Tinted shadows ──────────────────────────────────────────── */
+
+			/* ─── Utility shadows (dark auto) ─────────────────────────────── */
+			--dry-shadow-sm:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.06), 0px 1px 2px -1px rgba(0, 0, 0, 0.4),
+				0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+			--dry-shadow-md:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.07), 0px 2px 4px -1px rgba(0, 0, 0, 0.45),
+				0px 4px 8px -2px rgba(0, 0, 0, 0.3);
+			--dry-shadow-lg:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 4px 8px -2px rgba(0, 0, 0, 0.5),
+				0px 8px 20px -4px rgba(0, 0, 0, 0.4);
+			--dry-shadow-xl:
+				0px 0px 0px 1px rgba(255, 255, 255, 0.08), 0px 8px 16px -4px rgba(0, 0, 0, 0.55),
+				0px 20px 40px -8px rgba(0, 0, 0, 0.5);
+
+			/* ─── Overlay backdrops ───────────────────────────────────────── */
+			--dry-color-overlay-backdrop: hsla(0, 0%, 0%, 0.6);
+			--dry-color-overlay-backdrop-strong: hsla(0, 0%, 0%, 0.75);
+
+			/* Dark-mode enhancements — intentional. Light mode relies on component-level handling. */
+
+			/* ─── Scrollbar ───────────────────────────────────────────────── */
+			--dry-scrollbar-thumb: var(--dry-color-stroke-weak);
+			--dry-scrollbar-thumb-hover: var(--dry-color-stroke-strong);
+
+			/* ─── Glass surface ───────────────────────────────────────────── */
+			--dry-color-glass-tint: var(--dry-color-bg-raised);
+			--dry-glass-tint: var(--dry-color-glass-tint);
+			--dry-glass-saturation: 120%;
+
+			/* ─── Glow extensions ─────────────────────────────────────────── */
+
+			/* ─── Gradient palette ────────────────────────────────────────── */
+
+			/* ─── Grain / noise texture ───────────────────────────────────── */
+			--dry-grain-opacity: 0.06;
+		}
+	}
+}