@relements/core 0.1.0

package/src/themes/renascent.css

@@ -0,0 +1,198 @@
+/**
+ * Renascent Elements brand theme.
+ *
+ * Sourced from renascentelements.hu — dark navy palette with electric blue,
+ * purple accent, and the signature "phoenix" orange.
+ *
+ * Usage (global dark):
+ *   <link rel="stylesheet" href="/packages/core/src/index.css" />
+ *   <link rel="stylesheet" href="/packages/core/src/themes/renascent.css" />
+ *
+ * Usage (scoped to a subtree):
+ *   <div class="theme-renascent">…</div>
+ *
+ * Consumer overrides still win because this file is un-layered.
+ */
+
+/* ============================================================
+   Global dark theme (matches the renascentelements.hu design)
+   ============================================================ */
+:root {
+  color-scheme: dark;
+
+  /* ----- Backgrounds ---------------------------------------- */
+  --re-color-bg: #0f131a; /* hsl(220 27% 8%)  — page background  */
+  --re-color-bg-subtle: #171c26; /* hsl(220 25% 12%) — card / surface   */
+  --re-color-bg-muted: #1f2430; /* hsl(220 20% 15%) — muted section    */
+  --re-color-surface: #171c26;
+
+  /* ----- Text ----------------------------------------------- */
+  --re-color-text: #f8fafc; /* hsl(210 40% 98%) — primary text     */
+  --re-color-text-muted: #97a3b4; /* hsl(215 16% 65%) — secondary text   */
+  --re-color-text-subtle: #6b7a90; /* dimmer tertiary text                */
+
+  /* ----- Border --------------------------------------------- */
+  --re-color-border: #29303d; /* hsl(220 20% 20%) */
+  --re-color-border-strong: #353d4d;
+
+  /* ----- Brand: electric blue (primary interactive) ---------
+     Their --primary is hsl(217 91% 60%) = #3c83f6.
+     Buttons use accent-600 as their base, so we anchor 600 = primary.  */
+  --re-color-accent-50: #eff6ff;
+  --re-color-accent-100: #dbeafe;
+  --re-color-accent-200: #bdd6fe;
+  --re-color-accent-300: #93c3fd;
+  --re-color-accent-400: #60a5fa;
+  --re-color-accent-500: #60a5fa; /* tint — for backgrounds, indicators  */
+  --re-color-accent-600: #3c83f6; /* hsl(217 91% 60%) — button base      */
+  --re-color-accent-700: #2563eb; /* hover                               */
+  --re-color-accent-800: #1d4ed8; /* active / pressed                    */
+  --re-color-accent-900: #1e3a8a;
+
+  /* ----- Semantic role colors ------------------------------- */
+  --re-color-link: #3c83f6;
+  --re-color-link-hover: #60a5fa;
+  --re-color-link-visited: #a78bfa;
+  --re-color-focus-ring: #3c83f6;
+  --re-color-text-on-accent: #0f131a;
+
+  /* ----- Semantic feedback ---------------------------------- */
+  /* Success: teal (hsl(172 81% 55%) — their --success)        */
+  --re-color-success-500: #2fe9d0;
+  --re-color-success-600: #0fd4bb;
+  --re-color-success-700: #0ab8a2;
+
+  /* Warning: amber (hsl(45 93% 65%) — their --warning)        */
+  --re-color-warning-500: #f9cf53;
+  --re-color-warning-600: #f0b929;
+  --re-color-warning-700: #d4a020;
+
+  /* Danger: red (hsl(0 84% 60%) — their --destructive)        */
+  --re-color-danger-500: #ef4444;
+  --re-color-danger-600: #dc2626;
+  --re-color-danger-700: #b91c1c;
+
+  /* ----- Focus ring on dark background ----------------------
+     Remove the offset gap: the "white gap" trick is for light
+     themes. On dark bg, offset + border = double blue line.     */
+  --re-focus-ring-offset: 0px;
+  --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
+
+  /* ----- Selection ------------------------------------------ */
+  --re-color-selection-bg: rgba(60, 131, 246, 0.3);
+  --re-color-selection-text: #f8fafc;
+
+  /* ----- Text danger for validation messages ---------------- */
+  --re-color-text-danger: #f87171; /* lighter red for dark backgrounds */
+
+  /* ----- Border danger -------------------------------------- */
+  --re-color-border-danger: #ef4444;
+}
+
+/* ============================================================
+   Brand extras: phoenix orange + purple accent
+   Use these for decorative highlights, badges, gradients.
+   ============================================================ */
+:root {
+  --re-color-phoenix: #f3753f; /* hsl(18 88% 60%)  — brand orange   */
+  --re-color-phoenix-light: #f9a07a;
+  --re-color-phoenix-dark: #d45a26;
+
+  --re-color-purple: #a855f7; /* hsl(271 91% 65%) — their --accent */
+  --re-color-purple-light: #c084fc;
+  --re-color-purple-dark: #7c3aed;
+
+  /* Gradients as custom properties (for use in CSS backgrounds) */
+  --re-gradient-brand: linear-gradient(135deg, #3c83f6, #a855f7);
+  --re-gradient-phoenix: linear-gradient(135deg, #f3753f, #f9cf53);
+  --re-gradient-hero: linear-gradient(135deg, #3c83f6 0%, #a855f7 50%, #f3753f 100%);
+}
+
+/* ============================================================
+   Scoped class — apply on any container instead of :root
+   ============================================================ */
+.theme-renascent {
+  color-scheme: dark;
+
+  --re-color-bg: #0f131a;
+  --re-color-bg-subtle: #171c26;
+  --re-color-bg-muted: #1f2430;
+  --re-color-surface: #171c26;
+  --re-color-text: #f8fafc;
+  --re-color-text-muted: #97a3b4;
+  --re-color-text-subtle: #6b7a90;
+  --re-color-border: #29303d;
+  --re-color-border-strong: #353d4d;
+  --re-color-accent-500: #3c83f6;
+  --re-color-accent-600: #2563eb;
+  --re-color-accent-700: #1d4ed8;
+  --re-color-link: #3c83f6;
+  --re-color-link-hover: #60a5fa;
+  --re-color-focus-ring: #3c83f6;
+  --re-color-text-on-accent: #0f131a;
+  --re-color-text-danger: #f87171;
+  --re-color-border-danger: #ef4444;
+  --re-color-success-500: #2fe9d0;
+  --re-color-success-600: #0fd4bb;
+  --re-color-success-700: #0ab8a2;
+  --re-color-warning-500: #f9cf53;
+  --re-color-warning-600: #f0b929;
+  --re-color-warning-700: #d4a020;
+  --re-color-danger-500: #ef4444;
+  --re-color-danger-600: #dc2626;
+  --re-color-danger-700: #b91c1c;
+  --re-focus-ring-offset: 0px;
+  --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
+  --re-color-selection-bg: rgba(60, 131, 246, 0.3);
+  --re-color-selection-text: #f8fafc;
+
+  background-color: var(--re-color-bg);
+  color: var(--re-color-text);
+}
+
+/* ============================================================
+   Gradient button variants
+   Use data-variant="phoenix" or data-variant="brand" on .re-button.
+   Full hover / active / disabled / focus states included.
+   ============================================================ */
+.re-button[data-variant="phoenix"] {
+  background: var(--re-gradient-phoenix);
+  color: #fff;
+  border-color: transparent;
+}
+.re-button[data-variant="phoenix"]:hover {
+  filter: brightness(1.12);
+  background: var(--re-gradient-phoenix);
+}
+.re-button[data-variant="phoenix"]:active {
+  filter: brightness(0.9);
+}
+.re-button[data-variant="phoenix"]:focus-visible {
+  border-color: transparent;
+}
+.re-button[data-variant="phoenix"]:disabled,
+.re-button[data-variant="phoenix"][aria-disabled="true"] {
+  filter: none;
+  opacity: 0.55;
+}
+
+.re-button[data-variant="brand"] {
+  background: var(--re-gradient-brand);
+  color: #fff;
+  border-color: transparent;
+}
+.re-button[data-variant="brand"]:hover {
+  filter: brightness(1.12);
+  background: var(--re-gradient-brand);
+}
+.re-button[data-variant="brand"]:active {
+  filter: brightness(0.9);
+}
+.re-button[data-variant="brand"]:focus-visible {
+  border-color: transparent;
+}
+.re-button[data-variant="brand"]:disabled,
+.re-button[data-variant="brand"][aria-disabled="true"] {
+  filter: none;
+  opacity: 0.55;
+}

package/src/tokens.css

@@ -0,0 +1,196 @@
+/**
+ * Relements design tokens.
+ *
+ * All tokens are exposed as CSS custom properties under the `--re-` prefix.
+ * Consumers override at `:root` (global) or any subtree (scoped theme).
+ *
+ * Naming: --re-<category>-<name>-<modifier>
+ *   color:    --re-color-{role}-{step}      e.g. --re-color-text, --re-color-bg-subtle
+ *   space:    --re-space-{step}             e.g. --re-space-2 (8 = 0.5rem)
+ *   font:     --re-font-{name}              e.g. --re-font-sans
+ *   size:     --re-size-{name}              e.g. --re-size-text-md
+ *   radius:   --re-radius-{name}            e.g. --re-radius-md
+ *   border:   --re-border-{name}            e.g. --re-border-default
+ *   shadow:   --re-shadow-{name}            e.g. --re-shadow-focus
+ *   duration: --re-duration-{name}          e.g. --re-duration-fast
+ *   z:        --re-z-{name}                 e.g. --re-z-overlay
+ */
+
+@layer re.tokens {
+  :root {
+    /* ----- Color: neutral scale (light) ---------------------------------- */
+    --re-color-neutral-0: #ffffff;
+    --re-color-neutral-50: #f8fafc;
+    --re-color-neutral-100: #f1f5f9;
+    --re-color-neutral-200: #e2e8f0;
+    --re-color-neutral-300: #cbd5e1;
+    --re-color-neutral-400: #94a3b8;
+    --re-color-neutral-500: #64748b;
+    --re-color-neutral-600: #475569;
+    --re-color-neutral-700: #334155;
+    --re-color-neutral-800: #1e293b;
+    --re-color-neutral-900: #0f172a;
+    --re-color-neutral-950: #020617;
+
+    /* ----- Color: accent (brand) ---------------------------------------- */
+    --re-color-accent-50: #eff6ff;
+    --re-color-accent-100: #dbeafe;
+    --re-color-accent-200: #bfdbfe;
+    --re-color-accent-300: #93c5fd;
+    --re-color-accent-400: #60a5fa;
+    --re-color-accent-500: #3b82f6;
+    --re-color-accent-600: #2563eb;
+    --re-color-accent-700: #1d4ed8;
+    --re-color-accent-800: #1e40af;
+    --re-color-accent-900: #1e3a8a;
+
+    /* ----- Color: semantic --------------------------------------------- */
+    --re-color-danger-500: #ef4444;
+    --re-color-danger-600: #dc2626;
+    --re-color-danger-700: #b91c1c;
+    --re-color-success-500: #10b981;
+    --re-color-success-600: #059669;
+    --re-color-success-700: #047857;
+    --re-color-warning-500: #f59e0b;
+    --re-color-warning-600: #d97706;
+    --re-color-warning-700: #b45309;
+
+    /* ----- Color: roles (resolve to neutral/accent above) -------------- */
+    --re-color-bg: var(--re-color-neutral-0);
+    --re-color-bg-subtle: var(--re-color-neutral-50);
+    --re-color-bg-muted: var(--re-color-neutral-100);
+    --re-color-surface: var(--re-color-neutral-0);
+    --re-color-text: var(--re-color-neutral-900);
+    --re-color-text-muted: var(--re-color-neutral-600);
+    --re-color-text-subtle: var(--re-color-neutral-500);
+    --re-color-text-on-accent: var(--re-color-neutral-0);
+    --re-color-text-danger: var(--re-color-danger-700);
+    --re-color-border: var(--re-color-neutral-200);
+    --re-color-border-strong: var(--re-color-neutral-300);
+    --re-color-border-danger: var(--re-color-danger-500);
+    --re-color-link: var(--re-color-accent-700);
+    --re-color-link-hover: var(--re-color-accent-800);
+    --re-color-link-visited: var(--re-color-accent-800);
+    --re-color-focus-ring: var(--re-color-accent-500);
+    --re-color-selection-bg: var(--re-color-accent-100);
+    --re-color-selection-text: var(--re-color-neutral-900);
+
+    /* ----- Typography -------------------------------------------------- */
+    --re-font-sans:
+      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+    --re-font-mono:
+      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+
+    --re-size-text-xs: 0.75rem; /* 12 */
+    --re-size-text-sm: 0.875rem; /* 14 */
+    --re-size-text-md: 1rem; /* 16 */
+    --re-size-text-lg: 1.125rem; /* 18 */
+    --re-size-text-xl: 1.25rem; /* 20 */
+    --re-size-text-2xl: 1.5rem; /* 24 */
+    --re-size-text-3xl: 1.875rem; /* 30 */
+    --re-size-text-4xl: 2.25rem; /* 36 */
+
+    --re-line-height-tight: 1.2;
+    --re-line-height-snug: 1.35;
+    --re-line-height-normal: 1.5;
+    --re-line-height-relaxed: 1.65;
+
+    --re-font-weight-regular: 400;
+    --re-font-weight-medium: 500;
+    --re-font-weight-semibold: 600;
+    --re-font-weight-bold: 700;
+
+    /* ----- Spacing (4px scale) ----------------------------------------- */
+    --re-space-0: 0;
+    --re-space-1: 0.25rem; /* 4 */
+    --re-space-2: 0.5rem; /* 8 */
+    --re-space-3: 0.75rem; /* 12 */
+    --re-space-4: 1rem; /* 16 */
+    --re-space-5: 1.25rem; /* 20 */
+    --re-space-6: 1.5rem; /* 24 */
+    --re-space-8: 2rem; /* 32 */
+    --re-space-10: 2.5rem; /* 40 */
+    --re-space-12: 3rem; /* 48 */
+    --re-space-16: 4rem; /* 64 */
+
+    /* ----- Radii ------------------------------------------------------- */
+    --re-radius-none: 0;
+    --re-radius-sm: 0.25rem;
+    --re-radius-md: 0.375rem;
+    --re-radius-lg: 0.5rem;
+    --re-radius-xl: 0.75rem;
+    --re-radius-pill: 9999px;
+
+    /* ----- Borders ----------------------------------------------------- */
+    --re-border-width: 1px;
+    --re-border-width-strong: 2px;
+    --re-border-default: var(--re-border-width) solid var(--re-color-border);
+    --re-border-strong: var(--re-border-width-strong) solid var(--re-color-border-strong);
+    --re-border-danger: var(--re-border-width) solid var(--re-color-border-danger);
+
+    /* ----- Focus ring -------------------------------------------------- */
+    --re-focus-ring-width: 2px;
+    --re-focus-ring-offset: 2px;
+    --re-focus-ring-color: var(--re-color-focus-ring);
+    --re-shadow-focus:
+      0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
+      0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width))
+        var(--re-color-focus-ring);
+
+    /* ----- Elevation --------------------------------------------------- */
+    --re-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
+    --re-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
+    --re-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.12);
+
+    /* ----- Motion ------------------------------------------------------ */
+    --re-duration-instant: 0ms;
+    --re-duration-fast: 120ms;
+    --re-duration-normal: 200ms;
+    --re-duration-slow: 320ms;
+    --re-easing-standard: cubic-bezier(0.2, 0, 0, 1);
+    --re-easing-emphasized: cubic-bezier(0.3, 0, 0, 1);
+
+    /* ----- z-index ----------------------------------------------------- */
+    --re-z-base: 0;
+    --re-z-overlay: 100;
+    --re-z-popover: 200;
+    --re-z-dialog: 300;
+    --re-z-toast: 400;
+
+    /* ----- Layout sizing ---------------------------------------------- */
+    --re-control-height-sm: 1.75rem; /* 28 */
+    --re-control-height-md: 2.25rem; /* 36 */
+    --re-control-height-lg: 2.75rem; /* 44 — touch target */
+    --re-control-padding-x: var(--re-space-3);
+    --re-control-padding-y: var(--re-space-2);
+  }
+
+  /* Dark-scheme overrides: opt-in by setting `color-scheme: dark` on a
+     subtree, or trust the user-agent via prefers-color-scheme below. */
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --re-color-bg: var(--re-color-neutral-950);
+      --re-color-bg-subtle: var(--re-color-neutral-900);
+      --re-color-bg-muted: var(--re-color-neutral-800);
+      --re-color-surface: var(--re-color-neutral-900);
+      --re-color-text: var(--re-color-neutral-50);
+      --re-color-text-muted: var(--re-color-neutral-300);
+      --re-color-text-subtle: var(--re-color-neutral-400);
+      --re-color-text-on-accent: var(--re-color-neutral-0);
+      --re-color-text-danger: var(--re-color-danger-500);
+      --re-color-border: var(--re-color-neutral-700);
+      --re-color-border-strong: var(--re-color-neutral-600);
+      --re-color-link: var(--re-color-accent-300);
+      --re-color-link-hover: var(--re-color-accent-200);
+      --re-color-link-visited: var(--re-color-accent-200);
+      --re-color-focus-ring: var(--re-color-accent-400);
+      --re-color-selection-bg: var(--re-color-accent-900);
+      --re-color-selection-text: var(--re-color-neutral-50);
+
+      /* On dark backgrounds the offset gap is invisible, so the border and
+         the outer ring appear as two separate blue lines. Remove the gap. */
+      --re-focus-ring-offset: 0px;
+      --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
+    }
+  }
+}