@relements/core 0.3.0 → 0.4.1

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 (3) hide show
  1. package/dist/themes/renascent.css +1 -1
  2. package/package.json +1 -1
  3. package/src/themes/renascent.css +219 -163
package/dist/themes/renascent.css CHANGED
@@ -1 +1 @@
1
- :root{--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;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-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;--re-color-accent-600:#3c83f6;--re-color-accent-700:#2563eb;--re-color-accent-800:#1d4ed8;--re-color-accent-900:#1e3a8a;--re-color-link:#3c83f6;--re-color-link-hover:#60a5fa;--re-color-link-visited:#a78bfa;--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--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-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;--re-color-text-danger:#f87171;--re-color-border-danger:#ef4444;--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--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%)}.theme-renascent,.theme-renascent-dark{--lightningcss-light: ;--lightningcss-dark:initial;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:#fff;--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-color-info-surface:color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));--re-color-info-border:#60a5fa;--re-color-info-text:#93c3fd;--re-color-success-surface:color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));--re-color-success-border:#2fe9d0;--re-color-success-text:#2fe9d0;--re-color-warning-surface:color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));--re-color-warning-border:#f9cf53;--re-color-warning-text:#f9cf53;--re-color-danger-surface:color-mix(in oklab, #ef4444 20%, var(--re-color-bg));--re-color-danger-border:#ef4444;--re-color-danger-text:#f87171;--re-focus-ring-offset:0px;--re-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-color-selection-bg:#3c83f64d;--re-color-selection-text:#f8fafc;background-color:var(--re-color-bg);color:var(--re-color-text)}@media (prefers-color-scheme:light){:root,.theme-renascent{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--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);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c}}.theme-renascent-light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:#f6f8fc;--re-color-bg-subtle:#eef2f8;--re-color-bg-muted:#e3e9f2;--re-color-surface:#fff;--re-color-text:#0f131a;--re-color-text-muted:#475569;--re-color-text-subtle:#64748b;--re-color-text-on-accent:#fff;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-text-danger:#b91c1c;--re-color-border:#d7dfea;--re-color-border-strong:#c0cad9;--re-color-border-danger:#dc2626;--re-color-link:#2563eb;--re-color-link-hover:#1d4ed8;--re-color-link-visited:#7c3aed;--re-color-focus-ring:#3c83f6;--re-color-selection-bg:#3c83f62e;--re-color-selection-text:#0f131a;--re-focus-ring-offset:2px;--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);--re-color-info-surface:color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));--re-color-info-border:#3c83f6;--re-color-info-text:#2563eb;--re-color-success-surface:color-mix(in oklab, var(--re-color-success-500) 12%, var(--re-color-bg));--re-color-success-border:#0fd4bb;--re-color-success-text:#0f766e;--re-color-warning-surface:color-mix(in oklab, var(--re-color-warning-500) 12%, var(--re-color-bg));--re-color-warning-border:#f0b929;--re-color-warning-text:#b45309;--re-color-danger-surface:color-mix(in oklab, var(--re-color-danger-500) 12%, var(--re-color-bg));--re-color-danger-border:#dc2626;--re-color-danger-text:#b91c1c;background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
1
+ :root{--re-rn-dark-bg:#0f131a;--re-rn-dark-bg-subtle:#171c26;--re-rn-dark-bg-muted:#1f2430;--re-rn-dark-surface:#171c26;--re-rn-dark-text:#f8fafc;--re-rn-dark-text-muted:#97a3b4;--re-rn-dark-text-subtle:#6b7a90;--re-rn-dark-text-danger:#f87171;--re-rn-dark-border:#29303d;--re-rn-dark-border-strong:#353d4d;--re-rn-dark-border-danger:#ef4444;--re-rn-dark-link:#3c83f6;--re-rn-dark-link-hover:#60a5fa;--re-rn-dark-link-visited:#a78bfa;--re-rn-dark-selection-bg:#3c83f64d;--re-rn-dark-selection-text:#f8fafc;--re-rn-dark-focus-ring-offset:0px;--re-rn-dark-shadow-focus:0 0 0 2px var(--re-color-focus-ring);--re-rn-dark-info-surface:oklab(27.3825% -.00852493 -.0491423);--re-rn-dark-info-border:#60a5fa;--re-rn-dark-info-text:#93c3fd;--re-rn-dark-success-surface:oklab(31.6968% -.0306542 -.0128758);--re-rn-dark-success-border:#2fe9d0;--re-rn-dark-success-text:#2fe9d0;--re-rn-dark-warning-surface:oklab(32.2476% -.00189379 .0168638);--re-rn-dark-warning-border:#f9cf53;--re-rn-dark-warning-text:#f9cf53;--re-rn-dark-danger-surface:oklab(27.6095% .0357271 .00536118);--re-rn-dark-danger-border:#ef4444;--re-rn-dark-danger-text:#f87171;--re-rn-dark-accent-600:#2563eb;--re-rn-dark-accent-700:#1d4ed8;--re-rn-dark-accent-800:#1e40af;--re-rn-light-bg:#f6f8fc;--re-rn-light-bg-subtle:#eef2f8;--re-rn-light-bg-muted:#e3e9f2;--re-rn-light-surface:#fff;--re-rn-light-text:#0f131a;--re-rn-light-text-muted:#475569;--re-rn-light-text-subtle:#64748b;--re-rn-light-text-danger:#b91c1c;--re-rn-light-border:#d7dfea;--re-rn-light-border-strong:#c0cad9;--re-rn-light-border-danger:#dc2626;--re-rn-light-link:#2563eb;--re-rn-light-link-hover:#1d4ed8;--re-rn-light-link-visited:#7c3aed;--re-rn-light-selection-bg:#3c83f62e;--re-rn-light-selection-text:#0f131a;--re-rn-light-focus-ring-offset:2px;--re-rn-light-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);--re-rn-light-info-surface:oklab(93.6354% -.0044884 -.0270548);--re-rn-light-info-border:#3c83f6;--re-rn-light-info-text:#2563eb;--re-rn-light-success-surface:oklab(96.224% -.0177659 -.0052949);--re-rn-light-success-border:#0fd4bb;--re-rn-light-success-text:#0f766e;--re-rn-light-warning-surface:oklab(96.5544% -.000509714 .0125489);--re-rn-light-warning-border:#f0b929;--re-rn-light-warning-text:#b45309;--re-rn-light-danger-surface:oklab(93.7716% .0220628 .00564731);--re-rn-light-danger-border:#dc2626;--re-rn-light-danger-text:#b91c1c;--re-rn-light-accent-600:#2563eb;--re-rn-light-accent-700:#1d4ed8;--re-rn-light-accent-800:#1e40af;--lightningcss-light: ;--lightningcss-dark:initial;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:var(--re-rn-dark-bg);--re-color-bg-subtle:var(--re-rn-dark-bg-subtle);--re-color-bg-muted:var(--re-rn-dark-bg-muted);--re-color-surface:var(--re-rn-dark-surface);--re-color-text:var(--re-rn-dark-text);--re-color-text-muted:var(--re-rn-dark-text-muted);--re-color-text-subtle:var(--re-rn-dark-text-subtle);--re-color-border:var(--re-rn-dark-border);--re-color-border-strong:var(--re-rn-dark-border-strong);--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;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-accent-800:#1e40af;--re-color-accent-900:#1e3a8a;--re-color-link:var(--re-rn-dark-link);--re-color-link-hover:var(--re-rn-dark-link-hover);--re-color-link-visited:var(--re-rn-dark-link-visited);--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--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-color-info-surface:var(--re-rn-dark-info-surface);--re-color-info-border:var(--re-rn-dark-info-border);--re-color-info-text:var(--re-rn-dark-info-text);--re-color-success-surface:var(--re-rn-dark-success-surface);--re-color-success-border:var(--re-rn-dark-success-border);--re-color-success-text:var(--re-rn-dark-success-text);--re-color-warning-surface:var(--re-rn-dark-warning-surface);--re-color-warning-border:var(--re-rn-dark-warning-border);--re-color-warning-text:var(--re-rn-dark-warning-text);--re-color-danger-surface:var(--re-rn-dark-danger-surface);--re-color-danger-border:var(--re-rn-dark-danger-border);--re-color-danger-text:var(--re-rn-dark-danger-text);--re-focus-ring-offset:var(--re-rn-dark-focus-ring-offset);--re-shadow-focus:var(--re-rn-dark-shadow-focus);--re-color-selection-bg:var(--re-rn-dark-selection-bg);--re-color-selection-text:var(--re-rn-dark-selection-text);--re-color-text-danger:var(--re-rn-dark-text-danger);--re-color-border-danger:var(--re-rn-dark-border-danger);--re-color-phoenix:#f3753f;--re-color-phoenix-light:#f9a07a;--re-color-phoenix-dark:#d45a26;--re-color-purple:#a855f7;--re-color-purple-light:#c084fc;--re-color-purple-dark:#7c3aed;--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%)}.theme-renascent,.theme-renascent-dark{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--re-color-bg:var(--re-rn-dark-bg);--re-color-bg-subtle:var(--re-rn-dark-bg-subtle);--re-color-bg-muted:var(--re-rn-dark-bg-muted);--re-color-surface:var(--re-rn-dark-surface);--re-color-text:var(--re-rn-dark-text);--re-color-text-muted:var(--re-rn-dark-text-muted);--re-color-text-subtle:var(--re-rn-dark-text-subtle);--re-color-border:var(--re-rn-dark-border);--re-color-border-strong:var(--re-rn-dark-border-strong);--re-color-accent-500:#3c83f6;--re-color-accent-600:#2563eb;--re-color-accent-700:#1d4ed8;--re-color-link:var(--re-rn-dark-link);--re-color-link-hover:var(--re-rn-dark-link-hover);--re-color-focus-ring:#3c83f6;--re-color-text-on-accent:#fff;--re-color-text-danger:var(--re-rn-dark-text-danger);--re-color-border-danger:var(--re-rn-dark-border-danger);--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-color-info-surface:var(--re-rn-dark-info-surface);--re-color-info-border:var(--re-rn-dark-info-border);--re-color-info-text:var(--re-rn-dark-info-text);--re-color-success-surface:var(--re-rn-dark-success-surface);--re-color-success-border:var(--re-rn-dark-success-border);--re-color-success-text:var(--re-rn-dark-success-text);--re-color-warning-surface:var(--re-rn-dark-warning-surface);--re-color-warning-border:var(--re-rn-dark-warning-border);--re-color-warning-text:var(--re-rn-dark-warning-text);--re-color-danger-surface:var(--re-rn-dark-danger-surface);--re-color-danger-border:var(--re-rn-dark-danger-border);--re-color-danger-text:var(--re-rn-dark-danger-text);--re-focus-ring-offset:var(--re-rn-dark-focus-ring-offset);--re-shadow-focus:var(--re-rn-dark-shadow-focus);--re-color-selection-bg:var(--re-rn-dark-selection-bg);--re-color-selection-text:var(--re-rn-dark-selection-text);background-color:var(--re-color-bg);color:var(--re-color-text)}@media (prefers-color-scheme:light){:root,.theme-renascent{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:var(--re-rn-light-bg);--re-color-bg-subtle:var(--re-rn-light-bg-subtle);--re-color-bg-muted:var(--re-rn-light-bg-muted);--re-color-surface:var(--re-rn-light-surface);--re-color-text:var(--re-rn-light-text);--re-color-text-muted:var(--re-rn-light-text-muted);--re-color-text-subtle:var(--re-rn-light-text-subtle);--re-color-text-on-accent:#fff;--re-color-accent-600:var(--re-rn-light-accent-600);--re-color-accent-700:var(--re-rn-light-accent-700);--re-color-accent-800:var(--re-rn-light-accent-800);--re-color-text-danger:var(--re-rn-light-text-danger);--re-color-border:var(--re-rn-light-border);--re-color-border-strong:var(--re-rn-light-border-strong);--re-color-border-danger:var(--re-rn-light-border-danger);--re-color-link:var(--re-rn-light-link);--re-color-link-hover:var(--re-rn-light-link-hover);--re-color-link-visited:var(--re-rn-light-link-visited);--re-color-focus-ring:#3c83f6;--re-color-selection-bg:var(--re-rn-light-selection-bg);--re-color-selection-text:var(--re-rn-light-selection-text);--re-focus-ring-offset:var(--re-rn-light-focus-ring-offset);--re-shadow-focus:var(--re-rn-light-shadow-focus);--re-color-info-surface:var(--re-rn-light-info-surface);--re-color-info-border:var(--re-rn-light-info-border);--re-color-info-text:var(--re-rn-light-info-text);--re-color-success-surface:var(--re-rn-light-success-surface);--re-color-success-border:var(--re-rn-light-success-border);--re-color-success-text:var(--re-rn-light-success-text);--re-color-warning-surface:var(--re-rn-light-warning-surface);--re-color-warning-border:var(--re-rn-light-warning-border);--re-color-warning-text:var(--re-rn-light-warning-text);--re-color-danger-surface:var(--re-rn-light-danger-surface);--re-color-danger-border:var(--re-rn-light-danger-border);--re-color-danger-text:var(--re-rn-light-danger-text)}}.theme-renascent-light{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--re-color-bg:var(--re-rn-light-bg);--re-color-bg-subtle:var(--re-rn-light-bg-subtle);--re-color-bg-muted:var(--re-rn-light-bg-muted);--re-color-surface:var(--re-rn-light-surface);--re-color-text:var(--re-rn-light-text);--re-color-text-muted:var(--re-rn-light-text-muted);--re-color-text-subtle:var(--re-rn-light-text-subtle);--re-color-text-on-accent:#fff;--re-color-accent-600:var(--re-rn-light-accent-600);--re-color-accent-700:var(--re-rn-light-accent-700);--re-color-accent-800:var(--re-rn-light-accent-800);--re-color-text-danger:var(--re-rn-light-text-danger);--re-color-border:var(--re-rn-light-border);--re-color-border-strong:var(--re-rn-light-border-strong);--re-color-border-danger:var(--re-rn-light-border-danger);--re-color-link:var(--re-rn-light-link);--re-color-link-hover:var(--re-rn-light-link-hover);--re-color-link-visited:var(--re-rn-light-link-visited);--re-color-focus-ring:#3c83f6;--re-color-selection-bg:var(--re-rn-light-selection-bg);--re-color-selection-text:var(--re-rn-light-selection-text);--re-focus-ring-offset:var(--re-rn-light-focus-ring-offset);--re-shadow-focus:var(--re-rn-light-shadow-focus);--re-color-info-surface:var(--re-rn-light-info-surface);--re-color-info-border:var(--re-rn-light-info-border);--re-color-info-text:var(--re-rn-light-info-text);--re-color-success-surface:var(--re-rn-light-success-surface);--re-color-success-border:var(--re-rn-light-success-border);--re-color-success-text:var(--re-rn-light-success-text);--re-color-warning-surface:var(--re-rn-light-warning-surface);--re-color-warning-border:var(--re-rn-light-warning-border);--re-color-warning-text:var(--re-rn-light-warning-text);--re-color-danger-surface:var(--re-rn-light-danger-surface);--re-color-danger-border:var(--re-rn-light-danger-border);--re-color-danger-text:var(--re-rn-light-danger-text);background-color:var(--re-color-bg);color:var(--re-color-text)}.re-button[data-variant=phoenix]{background:var(--re-gradient-phoenix);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=phoenix]:hover{filter:brightness(1.12)}.re-button[data-variant=phoenix]:active{filter:brightness(.9)}.re-button[data-variant=phoenix]:focus-visible{border-color:#0000}.re-button[data-variant=phoenix]:disabled,.re-button[data-variant=phoenix][aria-disabled=true]{filter:none;opacity:.55}.re-button[data-variant=brand]{background:var(--re-gradient-brand);color:#fff;background-origin:border-box;border-color:#0000}.re-button[data-variant=brand]:hover{filter:brightness(1.12)}.re-button[data-variant=brand]:active{filter:brightness(.9)}.re-button[data-variant=brand]:focus-visible{border-color:#0000}.re-button[data-variant=brand]:disabled,.re-button[data-variant=brand][aria-disabled=true]{filter:none;opacity:.55}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@relements/core",
3
- "version": "0.3.0",
3
+ "version": "0.4.1",
4
4
  "description": "HTML-first design system core: tokens, styles, and progressive enhancement.",
5
5
  "repository": {
6
6
  "type": "git",
package/src/themes/renascent.css CHANGED
@@ -14,6 +14,93 @@
14
14
  * Consumer overrides still win because this file is un-layered.
15
15
  */
16
16
 
17
+ /* ============================================================
18
+ Per-scheme brand palette (concrete values, always available)
19
+
20
+ These --re-rn-{dark,light}-* custom properties expose the
21
+ Renascent palette as concrete values regardless of the active
22
+ scheme, so consumers can map them onto their own theme
23
+ mechanism. The scheme blocks below reference these instead of
24
+ repeating literals — single source of truth, no duplication.
25
+ Computed values are identical to the originals.
26
+ ============================================================ */
27
+ :root {
28
+ /* ----- DARK palette --------------------------------------- */
29
+ --re-rn-dark-bg: #0f131a;
30
+ --re-rn-dark-bg-subtle: #171c26;
31
+ --re-rn-dark-bg-muted: #1f2430;
32
+ --re-rn-dark-surface: #171c26;
33
+ --re-rn-dark-text: #f8fafc;
34
+ --re-rn-dark-text-muted: #97a3b4;
35
+ --re-rn-dark-text-subtle: #6b7a90;
36
+ --re-rn-dark-text-danger: #f87171;
37
+ --re-rn-dark-border: #29303d;
38
+ --re-rn-dark-border-strong: #353d4d;
39
+ --re-rn-dark-border-danger: #ef4444;
40
+ --re-rn-dark-link: #3c83f6;
41
+ --re-rn-dark-link-hover: #60a5fa;
42
+ --re-rn-dark-link-visited: #a78bfa;
43
+ --re-rn-dark-selection-bg: rgba(60, 131, 246, 0.3);
44
+ --re-rn-dark-selection-text: #f8fafc;
45
+ --re-rn-dark-focus-ring-offset: 0px;
46
+ --re-rn-dark-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
47
+ --re-rn-dark-info-surface: color-mix(in oklab, #3c83f6 20%, #0f131a);
48
+ --re-rn-dark-info-border: #60a5fa;
49
+ --re-rn-dark-info-text: #93c3fd;
50
+ --re-rn-dark-success-surface: color-mix(in oklab, #2fe9d0 20%, #0f131a);
51
+ --re-rn-dark-success-border: #2fe9d0;
52
+ --re-rn-dark-success-text: #2fe9d0;
53
+ --re-rn-dark-warning-surface: color-mix(in oklab, #f9cf53 20%, #0f131a);
54
+ --re-rn-dark-warning-border: #f9cf53;
55
+ --re-rn-dark-warning-text: #f9cf53;
56
+ --re-rn-dark-danger-surface: color-mix(in oklab, #ef4444 20%, #0f131a);
57
+ --re-rn-dark-danger-border: #ef4444;
58
+ --re-rn-dark-danger-text: #f87171;
59
+ /* Interactive accent steps (button base/hover/active) for dark. */
60
+ --re-rn-dark-accent-600: #2563eb;
61
+ --re-rn-dark-accent-700: #1d4ed8;
62
+ --re-rn-dark-accent-800: #1e40af;
63
+
64
+ /* ----- LIGHT palette -------------------------------------- */
65
+ --re-rn-light-bg: #f6f8fc;
66
+ --re-rn-light-bg-subtle: #eef2f8;
67
+ --re-rn-light-bg-muted: #e3e9f2;
68
+ --re-rn-light-surface: #ffffff;
69
+ --re-rn-light-text: #0f131a;
70
+ --re-rn-light-text-muted: #475569;
71
+ --re-rn-light-text-subtle: #64748b;
72
+ --re-rn-light-text-danger: #b91c1c;
73
+ --re-rn-light-border: #d7dfea;
74
+ --re-rn-light-border-strong: #c0cad9;
75
+ --re-rn-light-border-danger: #dc2626;
76
+ --re-rn-light-link: #2563eb;
77
+ --re-rn-light-link-hover: #1d4ed8;
78
+ --re-rn-light-link-visited: #7c3aed;
79
+ --re-rn-light-selection-bg: rgba(60, 131, 246, 0.18);
80
+ --re-rn-light-selection-text: #0f131a;
81
+ --re-rn-light-focus-ring-offset: 2px;
82
+ --re-rn-light-shadow-focus:
83
+ 0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
84
+ 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);
85
+ --re-rn-light-info-surface: color-mix(in oklab, #3c83f6 12%, #f6f8fc);
86
+ --re-rn-light-info-border: #3c83f6;
87
+ --re-rn-light-info-text: #2563eb;
88
+ --re-rn-light-success-surface: color-mix(in oklab, #2fe9d0 12%, #f6f8fc);
89
+ --re-rn-light-success-border: #0fd4bb;
90
+ --re-rn-light-success-text: #0f766e;
91
+ --re-rn-light-warning-surface: color-mix(in oklab, #f9cf53 12%, #f6f8fc);
92
+ --re-rn-light-warning-border: #f0b929;
93
+ --re-rn-light-warning-text: #b45309;
94
+ --re-rn-light-danger-surface: color-mix(in oklab, #ef4444 12%, #f6f8fc);
95
+ --re-rn-light-danger-border: #dc2626;
96
+ --re-rn-light-danger-text: #b91c1c;
97
+ /* On light bg, white-on-accent buttons need accent-600 = #2563eb
98
+ (white 5.17:1); the dark #3c83f6 only reaches 3.64:1. */
99
+ --re-rn-light-accent-600: #2563eb;
100
+ --re-rn-light-accent-700: #1d4ed8;
101
+ --re-rn-light-accent-800: #1e40af;
102
+ }
103
+
17
104
  /* ============================================================
18
105
  Global dark theme (matches the renascentelements.hu design)
19
106
  ============================================================ */
@@ -21,38 +108,40 @@
21
108
  color-scheme: dark;
22
109
 
23
110
  /* ----- Backgrounds ---------------------------------------- */
24
- --re-color-bg: #0f131a; /* hsl(220 27% 8%) — page background */
25
- --re-color-bg-subtle: #171c26; /* hsl(220 25% 12%) — card / surface */
26
- --re-color-bg-muted: #1f2430; /* hsl(220 20% 15%) — muted section */
27
- --re-color-surface: #171c26;
111
+ --re-color-bg: var(--re-rn-dark-bg); /* hsl(220 27% 8%) — page background */
112
+ --re-color-bg-subtle: var(--re-rn-dark-bg-subtle); /* hsl(220 25% 12%) — card / surface */
113
+ --re-color-bg-muted: var(--re-rn-dark-bg-muted); /* hsl(220 20% 15%) — muted section */
114
+ --re-color-surface: var(--re-rn-dark-surface);
28
115
 
29
116
  /* ----- Text ----------------------------------------------- */
30
- --re-color-text: #f8fafc; /* hsl(210 40% 98%) — primary text */
31
- --re-color-text-muted: #97a3b4; /* hsl(215 16% 65%) — secondary text */
32
- --re-color-text-subtle: #6b7a90; /* dimmer tertiary text */
117
+ --re-color-text: var(--re-rn-dark-text); /* hsl(210 40% 98%) — primary text */
118
+ --re-color-text-muted: var(--re-rn-dark-text-muted); /* hsl(215 16% 65%) — secondary text */
119
+ --re-color-text-subtle: var(--re-rn-dark-text-subtle); /* dimmer tertiary text */
33
120
 
34
121
  /* ----- Border --------------------------------------------- */
35
- --re-color-border: #29303d; /* hsl(220 20% 20%) */
36
- --re-color-border-strong: #353d4d;
122
+ --re-color-border: var(--re-rn-dark-border); /* hsl(220 20% 20%) */
123
+ --re-color-border-strong: var(--re-rn-dark-border-strong);
37
124
 
38
125
  /* ----- Brand: electric blue (primary interactive) ---------
39
- Their --primary is hsl(217 91% 60%) = #3c83f6.
40
- Buttons use accent-600 as their base, so we anchor 600 = primary. */
126
+ The brand --primary is #3c83f6, but white text on it is only ~3.6:1
127
+ (below WCAG AA). Buttons use accent-600 as their base + white text, so
128
+ 600 is anchored to #2563eb (white 5.17:1) — matching the light theme and
129
+ the forced-dark class. #3c83f6 stays the brand tint/gradient color. */
41
130
  --re-color-accent-50: #eff6ff;
42
131
  --re-color-accent-100: #dbeafe;
43
132
  --re-color-accent-200: #bdd6fe;
44
133
  --re-color-accent-300: #93c3fd;
45
134
  --re-color-accent-400: #60a5fa;
46
135
  --re-color-accent-500: #60a5fa; /* tint — for backgrounds, indicators */
47
- --re-color-accent-600: #3c83f6; /* hsl(217 91% 60%) — button base */
48
- --re-color-accent-700: #2563eb; /* hover */
49
- --re-color-accent-800: #1d4ed8; /* active / pressed */
136
+ --re-color-accent-600: #2563eb; /* button base (white text AA-safe) */
137
+ --re-color-accent-700: #1d4ed8; /* hover */
138
+ --re-color-accent-800: #1e40af; /* active / pressed */
50
139
  --re-color-accent-900: #1e3a8a;
51
140
 
52
141
  /* ----- Semantic role colors ------------------------------- */
53
- --re-color-link: #3c83f6;
54
- --re-color-link-hover: #60a5fa;
55
- --re-color-link-visited: #a78bfa;
142
+ --re-color-link: var(--re-rn-dark-link);
143
+ --re-color-link-hover: var(--re-rn-dark-link-hover);
144
+ --re-color-link-visited: var(--re-rn-dark-link-visited);
56
145
  --re-color-focus-ring: #3c83f6;
57
146
  /* White on accent-600 (#2563eb) = 5.17:1; the dark navy used elsewhere
58
147
  only reaches 3.6:1 on the blue/red button fills, below WCAG AA. */
@@ -80,34 +169,34 @@
80
169
  color-mix captured the light-mode bg → light alert surfaces
81
170
  under dark-section body text (≈1.05:1). White body text on
82
171
  these 20%/dark mixes clears AA (≥4.5:1). */
83
- --re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
84
- --re-color-info-border: #60a5fa;
85
- --re-color-info-text: #93c3fd;
86
- --re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
87
- --re-color-success-border: #2fe9d0;
88
- --re-color-success-text: #2fe9d0;
89
- --re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
90
- --re-color-warning-border: #f9cf53;
91
- --re-color-warning-text: #f9cf53;
92
- --re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
93
- --re-color-danger-border: #ef4444;
94
- --re-color-danger-text: #f87171;
172
+ --re-color-info-surface: var(--re-rn-dark-info-surface);
173
+ --re-color-info-border: var(--re-rn-dark-info-border);
174
+ --re-color-info-text: var(--re-rn-dark-info-text);
175
+ --re-color-success-surface: var(--re-rn-dark-success-surface);
176
+ --re-color-success-border: var(--re-rn-dark-success-border);
177
+ --re-color-success-text: var(--re-rn-dark-success-text);
178
+ --re-color-warning-surface: var(--re-rn-dark-warning-surface);
179
+ --re-color-warning-border: var(--re-rn-dark-warning-border);
180
+ --re-color-warning-text: var(--re-rn-dark-warning-text);
181
+ --re-color-danger-surface: var(--re-rn-dark-danger-surface);
182
+ --re-color-danger-border: var(--re-rn-dark-danger-border);
183
+ --re-color-danger-text: var(--re-rn-dark-danger-text);
95
184
 
96
185
  /* ----- Focus ring on dark background ----------------------
97
186
  Remove the offset gap: the "white gap" trick is for light
98
187
  themes. On dark bg, offset + border = double blue line. */
99
- --re-focus-ring-offset: 0px;
100
- --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
188
+ --re-focus-ring-offset: var(--re-rn-dark-focus-ring-offset);
189
+ --re-shadow-focus: var(--re-rn-dark-shadow-focus);
101
190
 
102
191
  /* ----- Selection ------------------------------------------ */
103
- --re-color-selection-bg: rgba(60, 131, 246, 0.3);
104
- --re-color-selection-text: #f8fafc;
192
+ --re-color-selection-bg: var(--re-rn-dark-selection-bg);
193
+ --re-color-selection-text: var(--re-rn-dark-selection-text);
105
194
 
106
195
  /* ----- Text danger for validation messages ---------------- */
107
- --re-color-text-danger: #f87171; /* lighter red for dark backgrounds */
196
+ --re-color-text-danger: var(--re-rn-dark-text-danger); /* lighter red for dark backgrounds */
108
197
 
109
198
  /* ----- Border danger -------------------------------------- */
110
- --re-color-border-danger: #ef4444;
199
+ --re-color-border-danger: var(--re-rn-dark-border-danger);
111
200
  }
112
201
 
113
202
  /* ============================================================
@@ -136,24 +225,24 @@
136
225
  .theme-renascent-dark {
137
226
  color-scheme: dark;
138
227
 
139
- --re-color-bg: #0f131a;
140
- --re-color-bg-subtle: #171c26;
141
- --re-color-bg-muted: #1f2430;
142
- --re-color-surface: #171c26;
143
- --re-color-text: #f8fafc;
144
- --re-color-text-muted: #97a3b4;
145
- --re-color-text-subtle: #6b7a90;
146
- --re-color-border: #29303d;
147
- --re-color-border-strong: #353d4d;
228
+ --re-color-bg: var(--re-rn-dark-bg);
229
+ --re-color-bg-subtle: var(--re-rn-dark-bg-subtle);
230
+ --re-color-bg-muted: var(--re-rn-dark-bg-muted);
231
+ --re-color-surface: var(--re-rn-dark-surface);
232
+ --re-color-text: var(--re-rn-dark-text);
233
+ --re-color-text-muted: var(--re-rn-dark-text-muted);
234
+ --re-color-text-subtle: var(--re-rn-dark-text-subtle);
235
+ --re-color-border: var(--re-rn-dark-border);
236
+ --re-color-border-strong: var(--re-rn-dark-border-strong);
148
237
  --re-color-accent-500: #3c83f6;
149
238
  --re-color-accent-600: #2563eb;
150
239
  --re-color-accent-700: #1d4ed8;
151
- --re-color-link: #3c83f6;
152
- --re-color-link-hover: #60a5fa;
240
+ --re-color-link: var(--re-rn-dark-link);
241
+ --re-color-link-hover: var(--re-rn-dark-link-hover);
153
242
  --re-color-focus-ring: #3c83f6;
154
243
  --re-color-text-on-accent: #ffffff;
155
- --re-color-text-danger: #f87171;
156
- --re-color-border-danger: #ef4444;
244
+ --re-color-text-danger: var(--re-rn-dark-text-danger);
245
+ --re-color-border-danger: var(--re-rn-dark-border-danger);
157
246
  --re-color-success-500: #2fe9d0;
158
247
  --re-color-success-600: #0fd4bb;
159
248
  --re-color-success-700: #0ab8a2;
@@ -163,22 +252,22 @@
163
252
  --re-color-danger-500: #ef4444;
164
253
  --re-color-danger-600: #dc2626;
165
254
  --re-color-danger-700: #b91c1c;
166
- --re-color-info-surface: color-mix(in oklab, #3c83f6 20%, var(--re-color-bg));
167
- --re-color-info-border: #60a5fa;
168
- --re-color-info-text: #93c3fd;
169
- --re-color-success-surface: color-mix(in oklab, #2fe9d0 20%, var(--re-color-bg));
170
- --re-color-success-border: #2fe9d0;
171
- --re-color-success-text: #2fe9d0;
172
- --re-color-warning-surface: color-mix(in oklab, #f9cf53 20%, var(--re-color-bg));
173
- --re-color-warning-border: #f9cf53;
174
- --re-color-warning-text: #f9cf53;
175
- --re-color-danger-surface: color-mix(in oklab, #ef4444 20%, var(--re-color-bg));
176
- --re-color-danger-border: #ef4444;
177
- --re-color-danger-text: #f87171;
178
- --re-focus-ring-offset: 0px;
179
- --re-shadow-focus: 0 0 0 2px var(--re-color-focus-ring);
180
- --re-color-selection-bg: rgba(60, 131, 246, 0.3);
181
- --re-color-selection-text: #f8fafc;
255
+ --re-color-info-surface: var(--re-rn-dark-info-surface);
256
+ --re-color-info-border: var(--re-rn-dark-info-border);
257
+ --re-color-info-text: var(--re-rn-dark-info-text);
258
+ --re-color-success-surface: var(--re-rn-dark-success-surface);
259
+ --re-color-success-border: var(--re-rn-dark-success-border);
260
+ --re-color-success-text: var(--re-rn-dark-success-text);
261
+ --re-color-warning-surface: var(--re-rn-dark-warning-surface);
262
+ --re-color-warning-border: var(--re-rn-dark-warning-border);
263
+ --re-color-warning-text: var(--re-rn-dark-warning-text);
264
+ --re-color-danger-surface: var(--re-rn-dark-danger-surface);
265
+ --re-color-danger-border: var(--re-rn-dark-danger-border);
266
+ --re-color-danger-text: var(--re-rn-dark-danger-text);
267
+ --re-focus-ring-offset: var(--re-rn-dark-focus-ring-offset);
268
+ --re-shadow-focus: var(--re-rn-dark-shadow-focus);
269
+ --re-color-selection-bg: var(--re-rn-dark-selection-bg);
270
+ --re-color-selection-text: var(--re-rn-dark-selection-text);
182
271
 
183
272
  background-color: var(--re-color-bg);
184
273
  color: var(--re-color-text);
@@ -189,115 +278,82 @@
189
278
  :root,
190
279
  .theme-renascent {
191
280
  color-scheme: light;
192
- --re-color-bg: #f6f8fc;
193
- --re-color-bg-subtle: #eef2f8;
194
- --re-color-bg-muted: #e3e9f2;
195
- --re-color-surface: #ffffff;
196
- --re-color-text: #0f131a;
197
- --re-color-text-muted: #475569;
198
- --re-color-text-subtle: #64748b;
281
+ --re-color-bg: var(--re-rn-light-bg);
282
+ --re-color-bg-subtle: var(--re-rn-light-bg-subtle);
283
+ --re-color-bg-muted: var(--re-rn-light-bg-muted);
284
+ --re-color-surface: var(--re-rn-light-surface);
285
+ --re-color-text: var(--re-rn-light-text);
286
+ --re-color-text-muted: var(--re-rn-light-text-muted);
287
+ --re-color-text-subtle: var(--re-rn-light-text-subtle);
199
288
  --re-color-text-on-accent: #ffffff;
200
- /* On light bg, white-on-accent buttons need accent-600 = #2563eb
201
- (white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
202
- --re-color-accent-600: #2563eb;
203
- --re-color-accent-700: #1d4ed8;
204
- --re-color-accent-800: #1e40af;
205
- --re-color-text-danger: #b91c1c;
206
- --re-color-border: #d7dfea;
207
- --re-color-border-strong: #c0cad9;
208
- --re-color-border-danger: #dc2626;
209
- --re-color-link: #2563eb;
210
- --re-color-link-hover: #1d4ed8;
211
- --re-color-link-visited: #7c3aed;
289
+ --re-color-accent-600: var(--re-rn-light-accent-600);
290
+ --re-color-accent-700: var(--re-rn-light-accent-700);
291
+ --re-color-accent-800: var(--re-rn-light-accent-800);
292
+ --re-color-text-danger: var(--re-rn-light-text-danger);
293
+ --re-color-border: var(--re-rn-light-border);
294
+ --re-color-border-strong: var(--re-rn-light-border-strong);
295
+ --re-color-border-danger: var(--re-rn-light-border-danger);
296
+ --re-color-link: var(--re-rn-light-link);
297
+ --re-color-link-hover: var(--re-rn-light-link-hover);
298
+ --re-color-link-visited: var(--re-rn-light-link-visited);
212
299
  --re-color-focus-ring: #3c83f6;
213
- --re-color-selection-bg: rgba(60, 131, 246, 0.18);
214
- --re-color-selection-text: #0f131a;
215
- --re-focus-ring-offset: 2px;
216
- --re-shadow-focus:
217
- 0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
218
- 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width))
219
- var(--re-color-focus-ring);
220
- --re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
221
- --re-color-info-border: #3c83f6;
222
- --re-color-info-text: #2563eb;
223
- --re-color-success-surface: color-mix(
224
- in oklab,
225
- var(--re-color-success-500) 12%,
226
- var(--re-color-bg)
227
- );
228
- --re-color-success-border: #0fd4bb;
229
- --re-color-success-text: #0f766e;
230
- --re-color-warning-surface: color-mix(
231
- in oklab,
232
- var(--re-color-warning-500) 12%,
233
- var(--re-color-bg)
234
- );
235
- --re-color-warning-border: #f0b929;
236
- --re-color-warning-text: #b45309;
237
- --re-color-danger-surface: color-mix(
238
- in oklab,
239
- var(--re-color-danger-500) 12%,
240
- var(--re-color-bg)
241
- );
242
- --re-color-danger-border: #dc2626;
243
- --re-color-danger-text: #b91c1c;
300
+ --re-color-selection-bg: var(--re-rn-light-selection-bg);
301
+ --re-color-selection-text: var(--re-rn-light-selection-text);
302
+ --re-focus-ring-offset: var(--re-rn-light-focus-ring-offset);
303
+ --re-shadow-focus: var(--re-rn-light-shadow-focus);
304
+ --re-color-info-surface: var(--re-rn-light-info-surface);
305
+ --re-color-info-border: var(--re-rn-light-info-border);
306
+ --re-color-info-text: var(--re-rn-light-info-text);
307
+ --re-color-success-surface: var(--re-rn-light-success-surface);
308
+ --re-color-success-border: var(--re-rn-light-success-border);
309
+ --re-color-success-text: var(--re-rn-light-success-text);
310
+ --re-color-warning-surface: var(--re-rn-light-warning-surface);
311
+ --re-color-warning-border: var(--re-rn-light-warning-border);
312
+ --re-color-warning-text: var(--re-rn-light-warning-text);
313
+ --re-color-danger-surface: var(--re-rn-light-danger-surface);
314
+ --re-color-danger-border: var(--re-rn-light-danger-border);
315
+ --re-color-danger-text: var(--re-rn-light-danger-text);
244
316
  }
245
317
  }
246
318
 
247
319
  /* LIGHT — forced regardless of OS. */
248
320
  .theme-renascent-light {
249
321
  color-scheme: light;
250
- --re-color-bg: #f6f8fc;
251
- --re-color-bg-subtle: #eef2f8;
252
- --re-color-bg-muted: #e3e9f2;
253
- --re-color-surface: #ffffff;
254
- --re-color-text: #0f131a;
255
- --re-color-text-muted: #475569;
256
- --re-color-text-subtle: #64748b;
322
+ --re-color-bg: var(--re-rn-light-bg);
323
+ --re-color-bg-subtle: var(--re-rn-light-bg-subtle);
324
+ --re-color-bg-muted: var(--re-rn-light-bg-muted);
325
+ --re-color-surface: var(--re-rn-light-surface);
326
+ --re-color-text: var(--re-rn-light-text);
327
+ --re-color-text-muted: var(--re-rn-light-text-muted);
328
+ --re-color-text-subtle: var(--re-rn-light-text-subtle);
257
329
  --re-color-text-on-accent: #ffffff;
258
- /* On light bg, white-on-accent buttons need accent-600 = #2563eb
259
- (white 5.17:1). The global #3c83f6 only reaches 3.64:1. */
260
- --re-color-accent-600: #2563eb;
261
- --re-color-accent-700: #1d4ed8;
262
- --re-color-accent-800: #1e40af;
263
- --re-color-text-danger: #b91c1c;
264
- --re-color-border: #d7dfea;
265
- --re-color-border-strong: #c0cad9;
266
- --re-color-border-danger: #dc2626;
267
- --re-color-link: #2563eb;
268
- --re-color-link-hover: #1d4ed8;
269
- --re-color-link-visited: #7c3aed;
330
+ --re-color-accent-600: var(--re-rn-light-accent-600);
331
+ --re-color-accent-700: var(--re-rn-light-accent-700);
332
+ --re-color-accent-800: var(--re-rn-light-accent-800);
333
+ --re-color-text-danger: var(--re-rn-light-text-danger);
334
+ --re-color-border: var(--re-rn-light-border);
335
+ --re-color-border-strong: var(--re-rn-light-border-strong);
336
+ --re-color-border-danger: var(--re-rn-light-border-danger);
337
+ --re-color-link: var(--re-rn-light-link);
338
+ --re-color-link-hover: var(--re-rn-light-link-hover);
339
+ --re-color-link-visited: var(--re-rn-light-link-visited);
270
340
  --re-color-focus-ring: #3c83f6;
271
- --re-color-selection-bg: rgba(60, 131, 246, 0.18);
272
- --re-color-selection-text: #0f131a;
273
- --re-focus-ring-offset: 2px;
274
- --re-shadow-focus:
275
- 0 0 0 var(--re-focus-ring-offset) var(--re-color-bg),
276
- 0 0 0 calc(var(--re-focus-ring-offset) + var(--re-focus-ring-width)) var(--re-color-focus-ring);
277
- --re-color-info-surface: color-mix(in oklab, #3c83f6 12%, var(--re-color-bg));
278
- --re-color-info-border: #3c83f6;
279
- --re-color-info-text: #2563eb;
280
- --re-color-success-surface: color-mix(
281
- in oklab,
282
- var(--re-color-success-500) 12%,
283
- var(--re-color-bg)
284
- );
285
- --re-color-success-border: #0fd4bb;
286
- --re-color-success-text: #0f766e;
287
- --re-color-warning-surface: color-mix(
288
- in oklab,
289
- var(--re-color-warning-500) 12%,
290
- var(--re-color-bg)
291
- );
292
- --re-color-warning-border: #f0b929;
293
- --re-color-warning-text: #b45309;
294
- --re-color-danger-surface: color-mix(
295
- in oklab,
296
- var(--re-color-danger-500) 12%,
297
- var(--re-color-bg)
298
- );
299
- --re-color-danger-border: #dc2626;
300
- --re-color-danger-text: #b91c1c;
341
+ --re-color-selection-bg: var(--re-rn-light-selection-bg);
342
+ --re-color-selection-text: var(--re-rn-light-selection-text);
343
+ --re-focus-ring-offset: var(--re-rn-light-focus-ring-offset);
344
+ --re-shadow-focus: var(--re-rn-light-shadow-focus);
345
+ --re-color-info-surface: var(--re-rn-light-info-surface);
346
+ --re-color-info-border: var(--re-rn-light-info-border);
347
+ --re-color-info-text: var(--re-rn-light-info-text);
348
+ --re-color-success-surface: var(--re-rn-light-success-surface);
349
+ --re-color-success-border: var(--re-rn-light-success-border);
350
+ --re-color-success-text: var(--re-rn-light-success-text);
351
+ --re-color-warning-surface: var(--re-rn-light-warning-surface);
352
+ --re-color-warning-border: var(--re-rn-light-warning-border);
353
+ --re-color-warning-text: var(--re-rn-light-warning-text);
354
+ --re-color-danger-surface: var(--re-rn-light-danger-surface);
355
+ --re-color-danger-border: var(--re-rn-light-danger-border);
356
+ --re-color-danger-text: var(--re-rn-light-danger-text);
301
357
 
302
358
  background-color: var(--re-color-bg);
303
359
  color: var(--re-color-text);