@slyxup/ui 2.0.0 → 2.3.0

package/dist/styles.js

@@ -10,6 +10,7 @@ export const CSS = `
   --slx-accent: #5b5bd6;
   --slx-accent-hover: #4c4cc4;
   --slx-accent-soft: rgba(91, 91, 214, 0.12);
+  --slx-accent-2: #8b5cf6;
   --slx-bg: #ffffff;
   --slx-bg-subtle: #f7f7fb;
   --slx-bg-page: #e9eaf6;
@@ -41,7 +42,7 @@ export const CSS = `
   font-feature-settings: "cv11", "ss01";
 }
 @media (prefers-color-scheme: dark) {
-  .slyxup-root:not(.slyxup-light) {
+  .slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']):not([data-slyxup-theme='light']) {
     --slx-accent: #8484f2;
     --slx-accent-hover: #9696f5;
     --slx-accent-soft: rgba(132, 132, 242, 0.16);
@@ -97,7 +98,7 @@ export const CSS = `
   box-sizing: border-box;
   animation: slx-rise .38s cubic-bezier(.22,.9,.32,1) both;
 }
-.slyxup-root:not(.slyxup-light) .slx-card,
+.slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-card,
 .slx-card { color: var(--slx-ink); }
 .slx-card-error { animation: slx-shake .45s cubic-bezier(.36,.07,.19,.97) both; }
 
@@ -105,7 +106,7 @@ export const CSS = `
 .slx-mark {
   width: 46px; height: 46px; border-radius: 13px;
   display: flex; align-items: center; justify-content: center;
-  background: linear-gradient(140deg, var(--slx-accent) 0%, #8b5cf6 100%);
+  background: linear-gradient(140deg, var(--slx-accent) 0%, var(--slx-accent-2) 100%);
   box-shadow:
     inset 0 1px 0 rgba(255,255,255,.28),
     0 6px 16px -6px rgba(91,91,214,.55);
@@ -165,14 +166,14 @@ export const CSS = `
   border-radius: var(--slx-radius-sm);
   padding: 9px 11px; margin: 0 0 16px;
 }
-.slyxup-root:not(.slyxup-light) .slx-setup-note {
+.slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-setup-note {
   color: #f5d878; background: rgba(250,204,21,.07); border-color: rgba(250,204,21,.25);
 }
 .slx-setup-note code {
   font-family: var(--slx-mono); font-size: 11px;
   background: rgba(0,0,0,.05); border-radius: 4px; padding: 1px 4px;
 }
-.slyxup-root:not(.slyxup-light) .slx-setup-note code { background: rgba(255,255,255,.08); }
+.slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-setup-note code { background: rgba(255,255,255,.08); }
 
 /* ── Primary button ── */
 .slx-btn {
@@ -190,19 +191,19 @@ export const CSS = `
 .slx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3.5px rgba(10,10,15,.16), 0 0 0 1.5px #0a0a0f; }
 .slx-btn[disabled] { opacity: .55; cursor: not-allowed; }
 @media (prefers-color-scheme: dark) {
-  .slyxup-root:not(.slyxup-light) .slx-btn {
+  .slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-btn {
     background: linear-gradient(180deg, #ffffff 0%, #ececf1 100%);
     color: #0a0a0f; border-color: #ececf1;
     box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
   }
-  .slyxup-root:not(.slyxup-light) .slx-btn:hover { filter: brightness(.94); }
+  .slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-btn:hover { filter: brightness(.94); }
 }
 .slx-spinner {
   width: 15px; height: 15px; flex: none;
   border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
   border-radius: 50%; animation: slx-spin .7s linear infinite;
 }
-.slyxup-root:not(.slyxup-light) .slx-spinner { border-color: rgba(10,10,15,.25); border-top-color: #0a0a0f; }
+.slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-spinner { border-color: rgba(10,10,15,.25); border-top-color: #0a0a0f; }
 
 /* ── Social ── */
 .slx-social { display: grid; gap: 9px; margin-bottom: 4px; }
@@ -263,7 +264,7 @@ export const CSS = `
   border: 1px solid var(--slx-border); cursor: pointer;
   display: flex; align-items: center; justify-content: center;
   font-size: 14px; font-weight: 650; color: #fff;
-  background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  background: linear-gradient(135deg, var(--slx-accent), var(--slx-accent-2));
   padding: 0; overflow: hidden;
   transition: box-shadow .15s, transform .06s;
 }
@@ -307,7 +308,7 @@ export const CSS = `
 .slx-badge-ok { color: var(--slx-success); background: color-mix(in srgb, var(--slx-success) 9%, transparent); border-color: color-mix(in srgb, var(--slx-success) 30%, transparent); }
 .slx-badge-warn { color: #b45309; background: color-mix(in srgb, #f59e0b 10%, transparent); border-color: color-mix(in srgb, #f59e0b 30%, transparent); }
 .slx-badge-accent { color: var(--slx-accent); background: var(--slx-accent-soft); border-color: color-mix(in srgb, var(--slx-accent) 30%, transparent); }
-.slyxup-root:not(.slyxup-light) .slx-badge-warn { color: #fbbf24; }
+.slyxup-root:not(.slyxup-light):not([data-slyxup-theme='light']) .slx-badge-warn { color: #fbbf24; }
 
 /* ── Modal overlay ── */
 .slx-overlay {
@@ -415,7 +416,7 @@ export const CSS = `
   flex-shrink: 0;
   display: flex; align-items: center; justify-content: center;
   font-size: 24px; font-weight: 700; color: #fff;
-  background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  background: linear-gradient(135deg, var(--slx-accent), var(--slx-accent-2));
   overflow: hidden;
   box-shadow: 0 2px 8px rgba(91,91,214,.3);
 }
@@ -522,7 +523,7 @@ export const CSS = `
 .slx-plan-badge {
   position: absolute; top: -10px; right: 12px;
   font-size: 10px; font-weight: 700; letter-spacing: .05em;
-  color: #fff; background: linear-gradient(135deg, var(--slx-accent), #8b5cf6);
+  color: #fff; background: linear-gradient(135deg, var(--slx-accent), var(--slx-accent-2));
   padding: 3px 8px; border-radius: 999px;
 }
 .slx-plan-name { font-size: 14px; font-weight: 600; color: var(--slx-ink-strong); margin: 0 0 6px; }
@@ -578,6 +579,230 @@ export const CSS = `
   .slx-pagination .slx-btn-secondary { font-size: 12px; padding: 4px 10px; }
   .slx-invoice-row { flex-wrap: wrap; gap: 6px; }
 }
+/* ── Explicit theme mode (wins over OS preference) ── */
+.slyxup-root[data-slyxup-theme='dark'] {
+  --slx-accent: #8484f2;
+  --slx-accent-hover: #9696f5;
+  --slx-accent-soft: rgba(132, 132, 242, 0.16);
+  --slx-bg: #17171f;
+  --slx-bg-subtle: #1e1e28;
+  --slx-bg-page: #101016;
+  --slx-ink: #f0f0f4;
+  --slx-ink-strong: #ffffff;
+  --slx-muted: #9a9aa6;
+  --slx-border: #292935;
+  --slx-border-strong: #343442;
+  --slx-danger: #f0737d;
+  --slx-success: #4ade80;
+  --slx-shadow-card:
+    0 1px 2px rgba(0,0,0,.25),
+    0 12px 32px -8px rgba(0,0,0,.5),
+    0 32px 72px -20px rgba(0,0,0,.55);
+  --slx-shadow-pop:
+    0 4px 12px rgba(0,0,0,.4),
+    0 24px 56px -12px rgba(0,0,0,.6);
+}
+.slyxup-root[data-slyxup-theme='dark'] .slx-btn {
+  background: linear-gradient(180deg, #ffffff 0%, #ececf1 100%);
+  color: #0a0a0f; border-color: #ececf1;
+  box-shadow: 0 1px 2px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.9);
+}
+.slyxup-root[data-slyxup-theme='dark'] .slx-btn:hover { filter: brightness(.94); }
+.slyxup-root[data-slyxup-theme='dark'] .slx-spinner { border-color: rgba(10,10,15,.25); border-top-color: #0a0a0f; }
+.slyxup-root[data-slyxup-theme='dark'] .slx-setup-note {
+  color: #f5d878; background: rgba(250,204,21,.07); border-color: rgba(250,204,21,.25);
+}
+.slyxup-root[data-slyxup-theme='dark'] .slx-setup-note code { background: rgba(255,255,255,.08); }
+.slyxup-root[data-slyxup-theme='dark'] .slx-badge-warn { color: #fbbf24; }
+.slyxup-root[data-slyxup-theme='light'] {
+  --slx-bg: #ffffff;
+  --slx-bg-subtle: #f7f7fb;
+  --slx-bg-page: #e9eaf6;
+  --slx-ink: #16161d;
+  --slx-ink-strong: #0c0c12;
+  --slx-muted: #6f6f7b;
+  --slx-border: #e3e3ee;
+  --slx-border-strong: #d3d3e2;
+  --slx-danger: #d64550;
+  --slx-success: #1f9d55;
+}
+
+/* ── Accent presets (applyTheme or data-slyxup-accent) ── */
+.slyxup-root[data-slyxup-accent='violet'] { --slx-accent: #5b5bd6; --slx-accent-hover: #4c4cc4; --slx-accent-soft: rgba(91,91,214,.12); --slx-accent-2: #8b5cf6; }
+.slyxup-root[data-slyxup-accent='blue'] { --slx-accent: #2563eb; --slx-accent-hover: #1d4ed8; --slx-accent-soft: rgba(37,99,235,.12); --slx-accent-2: #60a5fa; }
+.slyxup-root[data-slyxup-accent='emerald'] { --slx-accent: #059669; --slx-accent-hover: #047857; --slx-accent-soft: rgba(5,150,105,.12); --slx-accent-2: #34d399; }
+.slyxup-root[data-slyxup-accent='amber'] { --slx-accent: #d97706; --slx-accent-hover: #b45309; --slx-accent-soft: rgba(217,119,6,.14); --slx-accent-2: #fbbf24; }
+.slyxup-root[data-slyxup-accent='rose'] { --slx-accent: #e11d48; --slx-accent-hover: #be123c; --slx-accent-soft: rgba(225,29,72,.12); --slx-accent-2: #fb7185; }
+.slyxup-root[data-slyxup-accent='cyan'] { --slx-accent: #0891b2; --slx-accent-hover: #0e7490; --slx-accent-soft: rgba(8,145,178,.12); --slx-accent-2: #22d3ee; }
+
+/* ── Accent primary button (alternative to the default ink button) ── */
+.slx-btn-accent {
+  background: linear-gradient(180deg, var(--slx-accent-hover) 0%, var(--slx-accent) 100%);
+  border-color: var(--slx-accent);
+  color: #fff;
+  box-shadow: 0 1px 2px rgba(18,18,28,.3), inset 0 1px 0 rgba(255,255,255,.18);
+}
+.slx-btn-accent:hover { filter: brightness(1.07); }
+.slx-btn-accent:active { transform: scale(.985); filter: brightness(.95); }
+.slx-btn-accent:focus-visible { outline: none; box-shadow: 0 0 0 3.5px var(--slx-accent-soft); }
+.slx-btn-accent .slx-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
+
+/* ── Primary buttons in brand accent (opt-in via data-slyxup-primary='accent') ── */
+.slyxup-root[data-slyxup-primary='accent'] .slx-btn {
+  background: linear-gradient(180deg, var(--slx-accent-hover) 0%, var(--slx-accent) 100%);
+  border-color: var(--slx-accent);
+  color: #fff;
+  box-shadow: 0 1px 2px rgba(18, 18, 28, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
+}
+.slyxup-root[data-slyxup-primary='accent'] .slx-btn:hover { filter: brightness(1.07); }
+.slyxup-root[data-slyxup-primary='accent'] .slx-btn:active { filter: brightness(0.95); }
+.slyxup-root[data-slyxup-primary='accent'] .slx-btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3.5px var(--slx-accent-soft);
+}
+.slyxup-root[data-slyxup-primary='accent'] .slx-btn .slx-spinner {
+  border-color: rgba(255, 255, 255, 0.35);
+  border-top-color: #fff;
+}
+
+/* ── Auth layouts: centered (default) / split / minimal ── */
+.slx-form-full { display: contents; }
+.slx-card.slx-layout-split {
+  max-width: 780px;
+  padding: 0;
+  display: grid;
+  grid-template-columns: 1fr 1.05fr;
+  overflow: hidden;
+}
+.slx-split-brand {
+  background: linear-gradient(150deg, var(--slx-accent) 0%, var(--slx-accent-2) 130%);
+  color: #fff;
+  padding: 40px 36px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0;
+  position: relative;
+  overflow: hidden;
+}
+.slx-split-brand::after {
+  content: '';
+  position: absolute;
+  width: 280px;
+  height: 280px;
+  right: -90px;
+  bottom: -90px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.09);
+  pointer-events: none;
+}
+.slx-split-mark {
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 22px;
+}
+.slx-split-title {
+  font-family: var(--slx-display);
+  font-size: 26px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1.15;
+  margin: 0 0 10px;
+}
+.slx-split-sub { font-size: 14px; line-height: 1.6; opacity: 0.85; margin: 0 0 24px; }
+.slx-split-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
+.slx-split-points li {
+  font-size: 13.5px;
+  font-weight: 500;
+  padding-left: 28px;
+  position: relative;
+  line-height: 1.45;
+}
+.slx-split-points li::before {
+  content: '✓';
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.18);
+  font-size: 11px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.slx-split-form { padding: 36px 36px 32px; min-width: 0; }
+.slx-card.slx-layout-minimal {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 10px 6px;
+  max-width: 380px;
+  animation: none;
+}
+.slx-card.slx-layout-minimal .slx-mark { width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px; }
+.slx-card.slx-layout-minimal .slx-subtitle { margin-bottom: 20px; }
+.slx-card.slx-layout-minimal .slx-input { background: var(--slx-bg); }
+@media (max-width: 680px) {
+  .slx-card.slx-layout-split { grid-template-columns: 1fr; max-width: 440px; }
+  .slx-split-brand { padding: 26px 24px; }
+  .slx-split-brand::after { display: none; }
+  .slx-split-title { font-size: 21px; }
+  .slx-split-sub { margin-bottom: 0; }
+  .slx-split-points { display: none; }
+  .slx-split-form { padding: 26px 22px 24px; }
+}
+
+/* ── Password field with reveal toggle ── */
+.slx-input-wrap { position: relative; }
+.slx-input-wrap .slx-input { padding-right: 42px; }
+.slx-pw-toggle {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  color: var(--slx-muted);
+  cursor: pointer;
+  transition: background 0.12s, color 0.12s;
+}
+.slx-pw-toggle:hover { color: var(--slx-ink); background: color-mix(in srgb, var(--slx-ink) 5%, transparent); }
+.slx-pw-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--slx-accent-soft); }
+
+/* ── Compact density (opt-in via data-slyxup-density='compact') ── */
+.slyxup-root[data-slyxup-density='compact'] .slx-card { padding: 24px 24px 20px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-mark { width: 38px; height: 38px; margin-bottom: 14px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-title { font-size: 19px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-subtitle { margin-bottom: 16px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-field { margin-bottom: 10px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-input { padding: 8px 11px; font-size: 13.5px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-btn { padding: 9px 14px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-divider { margin: 14px 0; }
+.slyxup-root[data-slyxup-density='compact'] .slx-footer { margin-top: 16px; }
+.slyxup-root[data-slyxup-density='compact'] .slx-split-form { padding: 24px; }
+
+/* ── Small-screen polish for auth cards & menus ── */
+@media (max-width: 460px) {
+  .slx-card { padding: 26px 22px 24px; border-radius: var(--slx-radius-lg); }
+  .slx-title { font-size: 19px; }
+  .slx-menu { min-width: 210px; max-width: calc(100vw - 32px); }
+  .slx-social-btn { font-size: 13px; padding: 11px 12px; }
+}
 @media (max-width: 380px) {
   .slx-profile-content { padding: 12px; }
   .slx-profile-head { padding: 12px 12px 10px; }

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AAE5B,MAAM,CAAC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmkBlB,CAAC;AAEF,IAAI,QAAQ,GAAG,KAAK,CAAC;AAErB,qFAAqF;AACrF,MAAM,UAAU,YAAY;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC5C,oEAAoE;IACpE,6DAA6D;IAC7D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAC3D,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAChD,QAAQ,CAAC,GAAG,GAAG,YAAY,CAAC;YAC5B,QAAQ,CAAC,IAAI;gBACX,+KAA+K,CAAC;YAClL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;QACD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAC5C,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACjC,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;AACH,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,cAAc;IAC5B,OAAO,QAAQ,CAAC;AAClB,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,EAAE,CAAC;AAE5B,MAAM,CAAC,MAAM,GAAG,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoyBlB,CAAC;AAEF,IAAI,QAAQ,GAAG,KAAK,CAAC;AAErB,qFAAqF;AACrF,MAAM,UAAU,YAAY;IAC1B,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO;IAC5C,oEAAoE;IACpE,6DAA6D;IAC7D,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACtD,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,6BAA6B,CAAC,EAAE,CAAC;QAC3D,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,uBAAuB,CAAC,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;YAChD,QAAQ,CAAC,GAAG,GAAG,YAAY,CAAC;YAC5B,QAAQ,CAAC,IAAI;gBACX,+KAA+K,CAAC;YAClL,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QACtC,CAAC;QACD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC9C,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QAC5C,KAAK,CAAC,WAAW,GAAG,GAAG,CAAC;QACxB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QACjC,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;SAAM,CAAC;QACN,QAAQ,GAAG,IAAI,CAAC;IAClB,CAAC;AACH,CAAC;AAED,8CAA8C;AAC9C,MAAM,UAAU,cAAc;IAC5B,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,74 @@
+/**
+ * SlyxUp UI — runtime theme system.
+ *
+ * Three ways to theme, in order of precedence:
+ *  1. `applyTheme({...})` — sets data attributes + CSS variables (JS API).
+ *  2. Data attributes directly: `data-slyxup-theme`, `data-slyxup-accent`.
+ *  3. Raw CSS variables (`--slx-*`) — always win, set them yourself.
+ *
+ * Scoping: pass a container element to style one subtree (e.g. a preview
+ * panel) instead of the whole document. The container must carry the
+ * `slyxup-root` class (added automatically).
+ */
+export type ThemeMode = 'light' | 'dark' | 'auto';
+/** Auth page layouts — 3 professional variants, same logic underneath. */
+export type AuthLayout = 'centered' | 'split' | 'minimal';
+/** Primary button treatment. 'ink' (default) = near-black/white button, 'accent' = brand gradient. */
+export type PrimaryStyle = 'ink' | 'accent';
+/** Spacing density. 'comfortable' (default) or 'compact' for dense dialogs. */
+export type Density = 'comfortable' | 'compact';
+export type AccentName = 'violet' | 'blue' | 'emerald' | 'amber' | 'rose' | 'cyan';
+export interface AccentDef {
+    label: string;
+    /** Primary accent (links, focus rings, badges, avatar gradients). */
+    accent: string;
+    /** Hover state for accent text/links. */
+    accentHover: string;
+    /** Soft tint for focus rings + highlighted surfaces. */
+    accentSoft: string;
+    /** Second stop of accent gradients (marks, avatars, popular badges). */
+    gradientTo: string;
+}
+export declare const ACCENTS: Record<AccentName, AccentDef>;
+export interface FontDef {
+    label: string;
+    body: string;
+    display: string;
+    mono?: string;
+    /** Google Fonts stylesheet to load (skipped when absent). */
+    href?: string;
+}
+export declare const FONTS: Record<string, FontDef>;
+export interface CustomFont {
+    body?: string;
+    display?: string;
+    mono?: string;
+    /** Optional stylesheet URL for a custom webfont. */
+    href?: string;
+}
+export interface SlyxUpTheme {
+    /** 'auto' follows the OS (default). 'light'/'dark' force a mode. */
+    mode?: ThemeMode;
+    /** Preset name or any custom CSS color for full control. */
+    accent?: AccentName | (string & {});
+    /** Font preset name or a custom stack. Default: inherit the host app. */
+    font?: keyof typeof FONTS | CustomFont;
+    /** Base corner radius in px — sm/lg scale from it. Default 10. */
+    radius?: number;
+    /** Primary buttons: 'ink' (default, near-black/white) or 'accent' (brand gradient). */
+    primary?: PrimaryStyle;
+    /** Spacing density: 'comfortable' (default) or 'compact'. */
+    density?: Density;
+}
+/**
+ * Apply a theme. Targets `document.documentElement` by default — pass a
+ * container to scope the theme to one subtree (it gets `slyxup-root` added).
+ * Returns a cleanup function restoring previous values.
+ */
+export declare function applyTheme(theme: SlyxUpTheme, root?: HTMLElement): () => void;
+/** Read the currently applied theme from an element (default: document root). */
+export declare function getTheme(root?: HTMLElement): Required<Omit<SlyxUpTheme, 'font' | 'radius'>> & {
+    font: string;
+    radius: string;
+};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;AAElD,0EAA0E;AAC1E,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;AAE1D,sGAAsG;AACtG,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC;AAE5C,+EAA+E;AAC/E,MAAM,MAAM,OAAO,GAAG,aAAa,GAAG,SAAS,CAAC;AAEhD,MAAM,MAAM,UAAU,GAClB,QAAQ,GACR,MAAM,GACN,SAAS,GACT,OAAO,GACP,MAAM,GACN,MAAM,CAAC;AAEX,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,MAAM,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,EAAE,MAAM,CAAC;IACpB,wDAAwD;IACxD,UAAU,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,UAAU,EAAE,SAAS,CA2CjD,CAAC;AAEF,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAKD,eAAO,MAAM,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAmBzC,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACpC,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,OAAO,KAAK,GAAG,UAAU,CAAC;IACvC,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uFAAuF;IACvF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAwBD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,MAAM,IAAI,CAmG7E;AAED,iFAAiF;AACjF,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,GAAG,QAAQ,CACpD,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,CAAC,CACrC,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB,CAwBA"}

package/dist/theme.js

@@ -0,0 +1,238 @@
+/**
+ * SlyxUp UI — runtime theme system.
+ *
+ * Three ways to theme, in order of precedence:
+ *  1. `applyTheme({...})` — sets data attributes + CSS variables (JS API).
+ *  2. Data attributes directly: `data-slyxup-theme`, `data-slyxup-accent`.
+ *  3. Raw CSS variables (`--slx-*`) — always win, set them yourself.
+ *
+ * Scoping: pass a container element to style one subtree (e.g. a preview
+ * panel) instead of the whole document. The container must carry the
+ * `slyxup-root` class (added automatically).
+ */
+import { injectStyles } from './styles';
+export const ACCENTS = {
+    violet: {
+        label: 'Violet',
+        accent: '#5b5bd6',
+        accentHover: '#4c4cc4',
+        accentSoft: 'rgba(91, 91, 214, 0.12)',
+        gradientTo: '#8b5cf6',
+    },
+    blue: {
+        label: 'Blue',
+        accent: '#2563eb',
+        accentHover: '#1d4ed8',
+        accentSoft: 'rgba(37, 99, 235, 0.12)',
+        gradientTo: '#60a5fa',
+    },
+    emerald: {
+        label: 'Emerald',
+        accent: '#059669',
+        accentHover: '#047857',
+        accentSoft: 'rgba(5, 150, 105, 0.12)',
+        gradientTo: '#34d399',
+    },
+    amber: {
+        label: 'Amber',
+        accent: '#d97706',
+        accentHover: '#b45309',
+        accentSoft: 'rgba(217, 119, 6, 0.14)',
+        gradientTo: '#fbbf24',
+    },
+    rose: {
+        label: 'Rose',
+        accent: '#e11d48',
+        accentHover: '#be123c',
+        accentSoft: 'rgba(225, 29, 72, 0.12)',
+        gradientTo: '#fb7185',
+    },
+    cyan: {
+        label: 'Cyan',
+        accent: '#0891b2',
+        accentHover: '#0e7490',
+        accentSoft: 'rgba(8, 145, 178, 0.12)',
+        gradientTo: '#22d3ee',
+    },
+};
+const SYSTEM_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif";
+export const FONTS = {
+    default: {
+        label: 'Default (inherit host)',
+        body: 'inherit',
+        display: 'inherit',
+    },
+    system: { label: 'System', body: SYSTEM_STACK, display: SYSTEM_STACK },
+    dm: {
+        label: 'DM Sans + Space Grotesk',
+        body: "'DM Sans', sans-serif",
+        display: "'Space Grotesk', sans-serif",
+        href: 'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Space+Grotesk:wght@400;500;600;700&display=swap',
+    },
+    inter: {
+        label: 'Inter',
+        body: "'Inter', sans-serif",
+        display: "'Inter', sans-serif",
+        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
+    },
+};
+const VAR_ACCENT = '--slx-accent';
+const VAR_ACCENT_HOVER = '--slx-accent-hover';
+const VAR_ACCENT_SOFT = '--slx-accent-soft';
+const VAR_ACCENT_2 = '--slx-accent-2';
+function isBrowser() {
+    return typeof document !== 'undefined';
+}
+function loadFontHref(href) {
+    if (!isBrowser() || !href)
+        return;
+    if (document.querySelector(`link[href="${href}"]`))
+        return;
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = href;
+    document.head.appendChild(link);
+}
+function isAccentName(a) {
+    return typeof a === 'string' && a in ACCENTS;
+}
+/**
+ * Apply a theme. Targets `document.documentElement` by default — pass a
+ * container to scope the theme to one subtree (it gets `slyxup-root` added).
+ * Returns a cleanup function restoring previous values.
+ */
+export function applyTheme(theme, root) {
+    if (!isBrowser())
+        return () => { };
+    injectStyles();
+    const el = root ?? document.documentElement;
+    el.classList.add('slyxup-root');
+    const prev = {
+        mode: el.getAttribute('data-slyxup-theme'),
+        accent: el.getAttribute('data-slyxup-accent'),
+        primary: el.getAttribute('data-slyxup-primary'),
+        density: el.getAttribute('data-slyxup-density'),
+        vars: [
+            VAR_ACCENT,
+            VAR_ACCENT_HOVER,
+            VAR_ACCENT_SOFT,
+            VAR_ACCENT_2,
+            '--slx-font',
+            '--slx-display',
+            '--slx-mono',
+            '--slx-radius',
+            '--slx-radius-sm',
+            '--slx-radius-lg',
+        ].map((v) => [v, el.style.getPropertyValue(v)]),
+    };
+    // ── Mode ──
+    if (theme.mode && theme.mode !== 'auto') {
+        el.setAttribute('data-slyxup-theme', theme.mode);
+    }
+    else {
+        el.removeAttribute('data-slyxup-theme');
+    }
+    // ── Accent ──
+    if (theme.accent !== undefined) {
+        if (isAccentName(theme.accent)) {
+            el.setAttribute('data-slyxup-accent', theme.accent);
+            el.style.removeProperty(VAR_ACCENT);
+            el.style.removeProperty(VAR_ACCENT_HOVER);
+            el.style.removeProperty(VAR_ACCENT_SOFT);
+            el.style.removeProperty(VAR_ACCENT_2);
+        }
+        else if (typeof theme.accent === 'string' && theme.accent.trim()) {
+            const hex = theme.accent.trim();
+            el.removeAttribute('data-slyxup-accent');
+            el.style.setProperty(VAR_ACCENT, hex);
+            el.style.setProperty(VAR_ACCENT_HOVER, hex);
+            el.style.setProperty(VAR_ACCENT_SOFT, `color-mix(in srgb, ${hex} 12%, transparent)`);
+            el.style.setProperty(VAR_ACCENT_2, hex);
+        }
+    }
+    // ── Primary button style ──
+    if (theme.primary !== undefined) {
+        if (theme.primary === 'accent')
+            el.setAttribute('data-slyxup-primary', 'accent');
+        else
+            el.removeAttribute('data-slyxup-primary');
+    }
+    // ── Density ──
+    if (theme.density !== undefined) {
+        if (theme.density === 'compact')
+            el.setAttribute('data-slyxup-density', 'compact');
+        else
+            el.removeAttribute('data-slyxup-density');
+    }
+    // ── Font ──
+    if (theme.font !== undefined) {
+        const def = typeof theme.font === 'string'
+            ? (FONTS[theme.font] ?? FONTS.default)
+            : theme.font;
+        if (def.href)
+            loadFontHref(def.href);
+        if (def.body)
+            el.style.setProperty('--slx-font', def.body);
+        if (def.display)
+            el.style.setProperty('--slx-display', def.display);
+        if (def.mono)
+            el.style.setProperty('--slx-mono', def.mono);
+    }
+    // ── Radius ──
+    if (typeof theme.radius === 'number' && Number.isFinite(theme.radius)) {
+        const r = Math.max(0, Math.min(24, theme.radius));
+        el.style.setProperty('--slx-radius', `${r}px`);
+        el.style.setProperty('--slx-radius-sm', `${Math.max(2, r - 2)}px`);
+        el.style.setProperty('--slx-radius-lg', `${r + 4}px`);
+    }
+    return () => {
+        if (prev.mode === null)
+            el.removeAttribute('data-slyxup-theme');
+        else
+            el.setAttribute('data-slyxup-theme', prev.mode);
+        if (prev.accent === null)
+            el.removeAttribute('data-slyxup-accent');
+        else
+            el.setAttribute('data-slyxup-accent', prev.accent);
+        if (prev.primary === null)
+            el.removeAttribute('data-slyxup-primary');
+        else
+            el.setAttribute('data-slyxup-primary', prev.primary);
+        if (prev.density === null)
+            el.removeAttribute('data-slyxup-density');
+        else
+            el.setAttribute('data-slyxup-density', prev.density);
+        for (const [v, val] of prev.vars) {
+            if (!val)
+                el.style.removeProperty(v);
+            else
+                el.style.setProperty(v, val);
+        }
+    };
+}
+/** Read the currently applied theme from an element (default: document root). */
+export function getTheme(root) {
+    const fallback = {
+        mode: 'auto',
+        accent: 'violet',
+        primary: 'ink',
+        density: 'comfortable',
+        font: '',
+        radius: '',
+    };
+    if (!isBrowser())
+        return fallback;
+    const el = root ?? document.documentElement;
+    const cs = window.getComputedStyle(el);
+    return {
+        mode: el.getAttribute('data-slyxup-theme') || 'auto',
+        accent: el.getAttribute('data-slyxup-accent') ||
+            cs.getPropertyValue(VAR_ACCENT).trim() ||
+            'violet',
+        primary: el.getAttribute('data-slyxup-primary') || 'ink',
+        density: el.getAttribute('data-slyxup-density') || 'comfortable',
+        font: cs.getPropertyValue('--slx-font').trim(),
+        radius: cs.getPropertyValue('--slx-radius').trim(),
+    };
+}
+//# sourceMappingURL=theme.js.map