@juligc99/loro-ui 0.0.1

package/design-tokens/loro-theme.scss

@@ -0,0 +1,376 @@
+:root {
+  color-scheme: light;
+
+  --loro-font-brand: 'Manrope', 'Inter', system-ui, sans-serif;
+  --loro-font-fallback: 'Inter', system-ui, sans-serif;
+
+  --loro-primary-900: #2e176a;
+  --loro-primary-700: #5b33d6;
+  --loro-primary-500: #6c3cff;
+  --loro-primary-200: #ede9fe;
+  --loro-accent-yellow: #ffb703;
+
+  --loro-background: #f6f4fb;
+  --loro-surface: #ffffff;
+  --loro-surface-soft: rgba(255, 255, 255, 0.78);
+  --loro-surface-elevated: rgba(255, 255, 255, 0.88);
+  --loro-surface-overlay: rgba(255, 255, 255, 0.72);
+  --loro-surface-muted: #f2eefb;
+  --loro-surface-tinted: rgba(244, 240, 255, 0.92);
+  --loro-text: #2b2350;
+  --loro-text-strong: #20193f;
+  --loro-text-inverse: rgba(255, 255, 255, 0.94);
+  --loro-text-inverse-soft: rgba(255, 255, 255, 0.72);
+  --loro-muted: #7a7297;
+  --loro-muted-strong: #625882;
+  --loro-border-soft: rgba(108, 60, 255, 0.1);
+  --loro-border-subtle: rgba(43, 35, 80, 0.08);
+  --loro-border-strong: rgba(108, 60, 255, 0.22);
+  --loro-border-contrast: rgba(255, 255, 255, 0.22);
+  --loro-focus-ring: rgba(108, 60, 255, 0.26);
+
+  --loro-shadow-soft: 0 10px 30px rgba(34, 25, 73, 0.07);
+  --loro-shadow-panel: 0 24px 60px rgba(40, 26, 92, 0.12);
+  --loro-shadow-button: 0 12px 24px rgba(91, 51, 214, 0.18);
+  --loro-shadow-brand: 0 18px 44px rgba(46, 23, 106, 0.22), 0 2px 10px rgba(31, 10, 102, 0.1);
+
+  --loro-radius-card: 1.5rem;
+  --loro-radius-card-lg: 2rem;
+  --loro-radius-input: 1rem;
+  --loro-radius-pill: 999px;
+
+  --loro-space-1: 0.25rem;
+  --loro-space-2: 0.5rem;
+  --loro-space-3: 0.75rem;
+  --loro-space-4: 1rem;
+  --loro-space-5: 1.5rem;
+  --loro-space-6: 2rem;
+  --loro-space-7: 3rem;
+
+  --loro-brand-start: #5b33d6;
+  --loro-brand-end: #2e176a;
+  --loro-brand-soft-start: #6c3cff;
+  --loro-brand-soft-end: #5b33d6;
+  --loro-brand-surface: rgba(248, 244, 255, 0.96);
+  --loro-brand-mark-text: #4c27c3;
+  --loro-brand-tint-strong: rgba(108, 60, 255, 0.14);
+  --loro-brand-tint-soft: rgba(108, 60, 255, 0.05);
+  --loro-brand-tint-surface: rgba(108, 60, 255, 0.08);
+  --loro-warning: #f5a800;
+  --loro-danger-surface: #fff0f1;
+  --loro-danger-text: #b0223b;
+
+  --loro-page-background:
+    radial-gradient(circle at 14% 12%, rgba(108, 60, 255, 0.1), transparent 24%),
+    radial-gradient(circle at 86% 18%, rgba(91, 51, 214, 0.06), transparent 22%),
+    #f6f4fb;
+  --loro-shell-background: rgba(255, 255, 255, 0.3);
+  --loro-shell-surface: rgba(255, 255, 255, 0.78);
+  --loro-shell-header-surface: rgba(255, 255, 255, 0.86);
+  --loro-shell-border: rgba(255, 255, 255, 0.56);
+  --loro-shell-shadow: 0 24px 60px rgba(40, 26, 92, 0.12);
+
+  --loro-nav-desktop-width: 16rem;
+  --loro-nav-mobile-max-width: 30rem;
+  --loro-nav-desktop-offset: 1.5rem;
+  --loro-nav-mobile-offset: 0.75rem;
+  --loro-nav-surface-radius: 1.5rem;
+  --loro-nav-mobile-radius: 1.375rem;
+  --loro-nav-item-radius: 1rem;
+  --loro-nav-mobile-item-radius: 1rem;
+  --loro-nav-desktop-padding: 1rem;
+  --loro-nav-blur: 18px;
+  --loro-nav-surface-background: #4d28c9;
+  --loro-nav-background-start: #5c31dc;
+  --loro-nav-background-end: #34168f;
+  --loro-nav-background-soft-start: #7a50ff;
+  --loro-nav-background-soft-end: #5c31dc;
+  --loro-nav-text: rgba(255, 255, 255, 0.96);
+  --loro-nav-text-soft: rgba(255, 255, 255, 0.96);
+  --loro-nav-border: rgba(255, 255, 255, 0.12);
+  --loro-nav-shadow: 0 24px 48px rgba(46, 23, 106, 0.28);
+  --loro-nav-hover-bg: rgba(255, 255, 255, 0.045);
+  --loro-nav-active-bg: rgba(152, 113, 255, 0.42);
+  --loro-nav-active-border: rgba(255, 255, 255, 0.1);
+  --loro-nav-active-shadow: 0 8px 20px rgba(45, 16, 133, 0.16);
+  --loro-nav-mobile-active-bg: rgba(108, 60, 255, 0.12);
+  --loro-nav-mobile-active-shadow: 0 12px 24px rgba(108, 60, 255, 0.14);
+  --loro-nav-mobile-surface: rgba(255, 255, 255, 0.76);
+  --loro-nav-mobile-glass-surface: rgba(255, 255, 255, 0.66);
+  --loro-nav-mobile-glass-blur: 24px;
+  --loro-nav-mobile-expanded-width: 24.9rem;
+  --loro-nav-mobile-compact-width: 19.25rem;
+  --loro-nav-mobile-border: rgba(255, 255, 255, 0.62);
+  --loro-nav-mobile-icon: #2b2350;
+  --loro-nav-mobile-indicator: rgba(216, 220, 229, 0.72);
+  --loro-nav-mobile-indicator-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.7),
+    0 1px 5px rgba(21, 28, 42, 0.06);
+  --loro-nav-mobile-surface-shadow:
+    0 10px 30px rgba(28, 32, 48, 0.14),
+    0 2px 10px rgba(28, 32, 48, 0.05),
+    inset 0 1px 0 rgba(255, 255, 255, 0.78);
+  --loro-nav-divider: rgba(43, 35, 80, 0.08);
+  --loro-nav-brand-bg: rgba(108, 60, 255, 0.04);
+  --loro-nav-brand-border: rgba(108, 60, 255, 0.08);
+  --loro-nav-brand-mark-bg: #6c3cff;
+  --loro-nav-brand-mark-shadow: 0 14px 26px rgba(108, 60, 255, 0.22);
+  --loro-nav-desktop-surface: rgba(255, 255, 255, 0.88);
+  --loro-nav-desktop-border: rgba(43, 35, 80, 0.08);
+  --loro-nav-desktop-shadow: 0 24px 60px rgba(40, 26, 92, 0.12);
+  --loro-nav-button-text: var(--loro-primary-900);
+  --loro-nav-button-hover-text: var(--loro-primary-700);
+  --loro-nav-button-background: transparent;
+  --loro-nav-button-border: transparent;
+  --loro-nav-button-hover-bg: rgba(244, 240, 255, 0.92);
+  --loro-nav-button-hover-border: rgba(108, 60, 255, 0.14);
+  --loro-nav-button-shadow: none;
+  --loro-nav-button-hover-shadow:
+    inset 0 0 0 1px rgba(108, 60, 255, 0.04),
+    0 8px 18px rgba(40, 26, 92, 0.07);
+  --loro-nav-button-active-bg: rgba(244, 240, 255, 0.98);
+  --loro-nav-button-active-border: rgba(108, 60, 255, 0.18);
+  --loro-nav-button-active-text: var(--loro-primary-500);
+  --loro-nav-button-active-shadow:
+    inset 0.35rem 0 0 var(--loro-primary-500),
+    inset 0 0 0 1px rgba(108, 60, 255, 0.04);
+  --loro-nav-button-danger-bg: rgba(255, 240, 241, 0.92);
+  --loro-nav-button-danger-border: rgba(176, 34, 59, 0.08);
+  --loro-nav-button-danger-text: var(--loro-danger-text);
+  --loro-nav-button-danger-hover-bg: rgba(255, 236, 239, 0.98);
+  --loro-nav-button-danger-hover-shadow:
+    inset 0 0 0 1px rgba(176, 34, 59, 0.04),
+    0 8px 18px rgba(176, 34, 59, 0.08);
+
+  --loro-header-desktop-min-height: 2.5rem;
+
+  /* Layout shell tokens */
+  --loro-layout-mobile-gutter: clamp(1rem, 4vw, 1.5rem);
+  --loro-layout-mobile-header-bar-height: 3.45rem;
+  --loro-layout-mobile-header-height: calc(
+    var(--loro-layout-mobile-header-bar-height) + env(safe-area-inset-top, 0px)
+  );
+  --loro-layout-mobile-nav-height: 3.95rem;
+  --loro-layout-mobile-nav-offset: max(0.08rem, calc(env(safe-area-inset-bottom, 0px) * 0.18));
+  --loro-layout-mobile-nav-clearance: calc(
+    var(--loro-layout-mobile-nav-height) + var(--loro-layout-mobile-nav-offset) + 0.32rem
+  );
+  --loro-layout-header-action-size: 2.35rem;
+  --loro-layout-header-icon-size: 22px;
+  --loro-layout-header-back-icon-size: 28px;
+  --loro-layout-desktop-nav-width: 17.5rem;
+  --loro-layout-desktop-header-height: max(3rem, var(--loro-header-desktop-min-height, 0.5rem));
+  --loro-layout-notification-popover-width: min(26rem, calc(100vw - var(--loro-layout-desktop-nav-width) - 4rem));
+
+  --loro-dashboard-card-media-size: 5rem;
+  --loro-dashboard-card-content-min-height: 5.25rem;
+  --loro-dashboard-card-title-min-height: 1.375rem;
+  --loro-dashboard-card-description-min-height: 3.25rem;
+  --loro-dashboard-card-gap: 1rem;
+  --loro-dashboard-card-min-height: 14.5rem;
+  --loro-dashboard-card-row-min-height: 6.75rem;
+  --loro-dashboard-grid-card-min-height: 6.75rem;
+  --loro-home-hero-border: rgba(43, 35, 80, 0.08);
+  --loro-home-hero-bg:
+    radial-gradient(circle at 100% 0%, rgba(198, 180, 255, 0.16) 0%, transparent 34%),
+    rgba(255, 255, 255, 0.94);
+  --loro-home-hero-text: var(--loro-primary-900);
+  --loro-home-hero-subtitle: rgba(79, 88, 112, 0.9);
+  --loro-home-avatar-bg: rgba(243, 237, 255, 0.92);
+  --loro-home-avatar-color: var(--loro-primary-700);
+  --loro-home-card-border: rgba(43, 35, 80, 0.08);
+  --loro-home-card-bg:
+    radial-gradient(circle at 100% 0%, rgba(208, 191, 255, 0.14) 0%, transparent 34%),
+    rgba(255, 255, 255, 0.94);
+  --loro-home-card-title: var(--loro-primary-900);
+  --loro-home-card-description: rgba(79, 88, 112, 0.9);
+  --loro-home-card-icon-bg: rgb(240 230 255 / 96%);
+  --loro-home-card-icon-color: #6c3cff;
+  --loro-home-card-icon-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.72),
+    0 8px 18px rgba(40, 26, 92, 0.08);
+  --loro-home-card-arrow-bg: rgba(255, 255, 255, 0.94);
+  --loro-home-card-arrow-color: var(--loro-primary-700);
+  --loro-home-card-hover-border: rgba(108, 60, 255, 0.16);
+  --loro-home-card-shadow:
+    0 10px 30px rgba(34, 25, 73, 0.07),
+    inset 0 1px 0 rgba(255, 255, 255, 0.82);
+  --loro-home-card-hover-shadow:
+    0 18px 42px rgba(40, 26, 92, 0.12),
+    inset 0 1px 0 rgba(255, 255, 255, 0.86);
+  --loro-home-card-backdrop-blur: 18px;
+  --loro-home-card-glow: radial-gradient(circle at 86% 14%, rgba(210, 193, 255, 0.16) 0%, transparent 34%);
+  --loro-home-card-sheen: none;
+
+  --color-primary: var(--loro-primary-500);
+  --color-primary-dark: var(--loro-primary-900);
+  --color-secondary: var(--loro-primary-700);
+  --color-secondary-dark: #4d22d8;
+  --color-card-bg: rgba(108, 60, 255, 0.08);
+}
+
+html[data-theme='dark'] {
+  color-scheme: dark;
+
+  --loro-primary-900: #d8c2ff;
+  --loro-primary-700: #b58cff;
+  --loro-primary-500: #9763f1;
+  --loro-primary-200: #1e293b;
+  --loro-background: #111418;
+  --loro-surface: #181c20;
+  --loro-surface-soft: rgba(24, 28, 32, 0.78);
+  --loro-surface-elevated: rgba(30, 34, 39, 0.88);
+  --loro-surface-overlay: rgba(17, 20, 24, 0.78);
+  --loro-surface-muted: #21262d;
+  --loro-surface-tinted: rgba(48, 37, 72, 0.74);
+  --loro-text: #d4d4d4;
+  --loro-text-strong: #ffffff;
+  --loro-text-inverse: rgba(255, 255, 255, 0.96);
+  --loro-text-inverse-soft: rgba(212, 212, 212, 0.78);
+  --loro-muted: #9da7b3;
+  --loro-muted-strong: #c5ced8;
+  --loro-border-soft: rgba(255, 255, 255, 0.06);
+  --loro-border-subtle: rgba(255, 255, 255, 0.08);
+  --loro-border-strong: rgba(181, 140, 255, 0.3);
+  --loro-border-contrast: rgba(255, 255, 255, 0.12);
+  --loro-focus-ring: rgba(181, 140, 255, 0.34);
+
+  --loro-shadow-soft: 0 14px 36px rgba(0, 0, 0, 0.28);
+  --loro-shadow-panel: 0 26px 72px rgba(0, 0, 0, 0.34);
+  --loro-shadow-button: 0 14px 28px rgba(0, 0, 0, 0.32);
+  --loro-shadow-brand: 0 18px 48px rgba(4, 3, 15, 0.38), 0 2px 10px rgba(3, 2, 10, 0.22);
+
+  --loro-brand-start: #b58cff;
+  --loro-brand-end: #7b4cff;
+  --loro-brand-soft-start: #d8c2ff;
+  --loro-brand-soft-end: #9763f1;
+  --loro-brand-surface: rgba(58, 44, 88, 0.74);
+  --loro-brand-mark-text: #eaf2ff;
+  --loro-brand-tint-strong: rgba(181, 140, 255, 0.18);
+  --loro-brand-tint-soft: rgba(181, 140, 255, 0.08);
+  --loro-brand-tint-surface: rgba(181, 140, 255, 0.12);
+  --loro-warning: #ffd166;
+  --loro-danger-surface: rgba(248, 113, 113, 0.14);
+  --loro-danger-text: #fca5a5;
+
+  --loro-page-background:
+    radial-gradient(circle at 18% 14%, rgba(181, 140, 255, 0.08), transparent 22%),
+    radial-gradient(circle at 84% 16%, rgba(151, 99, 241, 0.06), transparent 20%),
+    #111418;
+  --loro-shell-background: rgba(255, 255, 255, 0.03);
+  --loro-shell-surface: rgba(24, 28, 32, 0.96);
+  --loro-shell-header-surface: rgba(17, 20, 24, 0.96);
+  --loro-shell-border: rgba(255, 255, 255, 0.1);
+  --loro-shell-shadow: 0 24px 72px rgba(0, 0, 0, 0.34);
+
+  /* Layout shell tokens */
+  --loro-layout-notification-popover-width: min(26rem, calc(100vw - var(--loro-layout-desktop-nav-width) - 4rem));
+
+  --loro-nav-surface-background: #1b1f27;
+  --loro-nav-background-start: rgba(31, 41, 55, 0.98);
+  --loro-nav-background-end: rgba(22, 27, 34, 0.98);
+  --loro-nav-background-soft-start: rgba(43, 56, 74, 0.94);
+  --loro-nav-background-soft-end: rgba(27, 34, 45, 0.94);
+  --loro-nav-text: var(--loro-text-inverse);
+  --loro-nav-text-soft: var(--loro-text-inverse);
+  --loro-nav-border: rgba(255, 255, 255, 0.12);
+  --loro-nav-shadow: 0 18px 48px rgba(4, 3, 15, 0.38);
+  --loro-nav-hover-bg: rgba(255, 255, 255, 0.045);
+  --loro-nav-active-bg: rgba(181, 140, 255, 0.18);
+  --loro-nav-active-border: rgba(255, 255, 255, 0.16);
+  --loro-nav-active-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
+  --loro-nav-mobile-active-bg: rgba(181, 140, 255, 0.14);
+  --loro-nav-mobile-active-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
+  --loro-nav-mobile-surface: rgba(24, 28, 32, 0.76);
+  --loro-nav-mobile-glass-surface: rgba(15, 19, 25, 0.6);
+  --loro-nav-mobile-glass-blur: 26px;
+  --loro-nav-mobile-expanded-width: 24.9rem;
+  --loro-nav-mobile-compact-width: 19.25rem;
+  --loro-nav-mobile-border: rgba(255, 255, 255, 0.14);
+  --loro-nav-mobile-icon: rgba(238, 242, 247, 0.9);
+  --loro-nav-mobile-indicator: rgba(72, 78, 89, 0.72);
+  --loro-nav-mobile-indicator-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.12),
+    0 1px 6px rgba(0, 0, 0, 0.2);
+  --loro-nav-mobile-surface-shadow:
+    0 12px 32px rgba(0, 0, 0, 0.38),
+    0 2px 12px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.11);
+  --loro-nav-divider: rgba(255, 255, 255, 0.1);
+  --loro-nav-brand-bg: rgba(255, 255, 255, 0.06);
+  --loro-nav-brand-border: rgba(255, 255, 255, 0.1);
+  --loro-nav-brand-mark-bg: #9763f1;
+  --loro-nav-brand-mark-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
+  --loro-nav-desktop-surface: rgba(24, 28, 32, 0.9);
+  --loro-nav-desktop-border: rgba(255, 255, 255, 0.08);
+  --loro-nav-desktop-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
+  --loro-nav-button-text: rgba(238, 242, 247, 0.92);
+  --loro-nav-button-hover-text: #ffffff;
+  --loro-nav-button-background: transparent;
+  --loro-nav-button-border: transparent;
+  --loro-nav-button-hover-bg: rgba(181, 140, 255, 0.08);
+  --loro-nav-button-hover-border: rgba(181, 140, 255, 0.18);
+  --loro-nav-button-shadow: none;
+  --loro-nav-button-hover-shadow:
+    inset 0 0 0 1px rgba(181, 140, 255, 0.06),
+    0 12px 24px rgba(0, 0, 0, 0.2);
+  --loro-nav-button-active-bg: rgba(181, 140, 255, 0.12);
+  --loro-nav-button-active-border: rgba(181, 140, 255, 0.18);
+  --loro-nav-button-active-text: var(--loro-primary-900);
+  --loro-nav-button-active-shadow:
+    inset 0.35rem 0 0 var(--loro-primary-500),
+    inset 0 0 0 1px rgba(181, 140, 255, 0.08);
+  --loro-nav-button-danger-bg: rgba(248, 113, 113, 0.1);
+  --loro-nav-button-danger-border: rgba(252, 165, 165, 0.12);
+  --loro-nav-button-danger-text: var(--loro-danger-text);
+  --loro-nav-button-danger-hover-bg: rgba(248, 113, 113, 0.14);
+  --loro-nav-button-danger-hover-shadow:
+    inset 0 0 0 1px rgba(252, 165, 165, 0.06),
+    0 12px 24px rgba(0, 0, 0, 0.18);
+  --loro-home-hero-border: rgba(255, 255, 255, 0.08);
+  --loro-home-hero-bg:
+    radial-gradient(circle at 100% 0%, rgba(191, 150, 255, 0.14) 0%, transparent 34%),
+    rgba(26, 29, 35, 0.98);
+  --loro-home-hero-text: #f8f4ff;
+  --loro-home-hero-subtitle: rgba(231, 220, 255, 0.8);
+  --loro-home-avatar-bg: rgba(58, 44, 88, 0.68);
+  --loro-home-avatar-color: #d9c3ff;
+  --loro-home-card-border: rgba(255, 255, 255, 0.08);
+  --loro-home-card-bg:
+    radial-gradient(circle at 100% 0%, rgba(186, 150, 255, 0.1) 0%, transparent 34%),
+    rgba(26, 29, 35, 0.98);
+  --loro-home-card-title: #fbf7ff;
+  --loro-home-card-description: rgba(231, 220, 255, 0.76);
+  --loro-home-card-icon-bg: rgba(42, 46, 57, 0.96);
+  --loro-home-card-icon-color: #cdb4ff;
+  --loro-home-card-icon-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 10px 22px rgba(0, 0, 0, 0.2);
+  --loro-home-card-arrow-bg: rgba(255, 255, 255, 0.96);
+  --loro-home-card-arrow-color: #5b33d6;
+  --loro-home-card-hover-border: rgba(205, 180, 255, 0.18);
+  --loro-home-card-shadow:
+    0 14px 36px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  --loro-home-card-hover-shadow:
+    0 22px 42px rgba(0, 0, 0, 0.36),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+  --loro-home-card-backdrop-blur: 18px;
+  --loro-home-card-glow: radial-gradient(circle at 86% 14%, rgba(197, 166, 255, 0.14) 0%, transparent 34%);
+  --loro-home-card-sheen: none;
+
+  --color-secondary-dark: #7b4cff;
+  --color-card-bg: rgba(181, 140, 255, 0.1);
+}
+
+html[data-font-scale='small'] {
+  font-size: 14px;
+}
+
+html[data-font-scale='normal'] {
+  font-size: 16px;
+}
+
+html[data-font-scale='large'] {
+  font-size: 18px;
+}