363 lines
8.3 KiB
CSS
363 lines
8.3 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* ============================================================
|
|
Design tokens — auto-generated from @bytelyst/design-tokens
|
|
Source: packages/design-tokens/generated/notelett.css
|
|
DO NOT EDIT — regenerate with: npx tsx packages/design-tokens/scripts/generate.ts
|
|
============================================================ */
|
|
|
|
:root {
|
|
--nl-bg-canvas: #06070A;
|
|
--nl-bg-elevated: #0E1118;
|
|
--nl-surface-card: #121725;
|
|
--nl-surface-muted: #1A2335;
|
|
--nl-border-default: rgba(255,255,255,0.12);
|
|
--nl-border-strong: rgba(255,255,255,0.22);
|
|
--nl-text-primary: #EFF4FF;
|
|
--nl-text-secondary: #A5B1C7;
|
|
--nl-text-tertiary: #6C7C98;
|
|
--nl-accent-primary: #5A8CFF;
|
|
--nl-accent-secondary: #2EE6D6;
|
|
--nl-success: #34D399;
|
|
--nl-warning: #F59E0B;
|
|
--nl-danger: #FF6E6E;
|
|
--nl-focus-ring: rgba(90,140,255,0.45);
|
|
--nl-overlay-scrim: rgba(5,8,18,0.72);
|
|
|
|
/* notelett product colors */
|
|
--nl-agent-action: #A66BFF;
|
|
--nl-draft-note: #FFD166;
|
|
--nl-linked-note: #2EE6D6;
|
|
--nl-task-pending: #F59E0B;
|
|
--nl-task-complete: #34D399;
|
|
|
|
--nl-font-display: var(--font-display), "Space Grotesk", "SF Pro Display", sans-serif;
|
|
--nl-font-body: var(--font-body), "DM Sans", "SF Pro Text", sans-serif;
|
|
--nl-font-mono: var(--font-mono), "IBM Plex Mono", "SF Mono", monospace;
|
|
|
|
--nl-fs-xs: 12px;
|
|
--nl-fs-sm: 14px;
|
|
--nl-fs-md: 16px;
|
|
--nl-fs-lg: 18px;
|
|
--nl-fs-xl: 22px;
|
|
--nl-fs-2xl: 28px;
|
|
--nl-fs-3xl: 36px;
|
|
|
|
--nl-space-0: 0;
|
|
--nl-space-1: 4px;
|
|
--nl-space-2: 8px;
|
|
--nl-space-3: 12px;
|
|
--nl-space-4: 16px;
|
|
--nl-space-5: 20px;
|
|
--nl-space-6: 24px;
|
|
--nl-space-7: 28px;
|
|
--nl-space-8: 32px;
|
|
--nl-space-10: 40px;
|
|
--nl-space-12: 48px;
|
|
--nl-space-16: 64px;
|
|
|
|
--nl-radius-xs: 8px;
|
|
--nl-radius-sm: 12px;
|
|
--nl-radius-md: 16px;
|
|
--nl-radius-lg: 20px;
|
|
--nl-radius-xl: 24px;
|
|
--nl-radius-pill: 999px;
|
|
|
|
--nl-elevation-sm: 0 4px 12px rgba(0,0,0,0.12);
|
|
--nl-elevation-md: 0 12px 28px rgba(0,0,0,0.18);
|
|
--nl-elevation-lg: 0 20px 48px rgba(0,0,0,0.24);
|
|
|
|
--nl-motion-fast: 140ms;
|
|
--nl-motion-base: 220ms;
|
|
--nl-motion-slow: 320ms;
|
|
--nl-easing-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--nl-bg-canvas: #F6F8FC;
|
|
--nl-bg-elevated: #EEF2FA;
|
|
--nl-surface-card: #FFFFFF;
|
|
--nl-surface-muted: #F3F5FA;
|
|
--nl-border-default: rgba(14,19,32,0.12);
|
|
--nl-border-strong: rgba(14,19,32,0.24);
|
|
--nl-text-primary: #0E1320;
|
|
--nl-text-secondary: #55637A;
|
|
--nl-success: #13956A;
|
|
--nl-warning: #B87504;
|
|
--nl-danger: #D24242;
|
|
--nl-focus-ring: rgba(90,140,255,0.35);
|
|
--nl-overlay-scrim: rgba(10,13,23,0.5);
|
|
}
|
|
|
|
/* === END design tokens === */
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
background: var(--nl-bg-canvas);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, var(--nl-bg-canvas) 0%, #0b1020 100%);
|
|
color: var(--nl-text-primary);
|
|
font-family: var(--nl-font-body);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
textarea,
|
|
select {
|
|
font: inherit;
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.app-shell {
|
|
min-height: 100vh;
|
|
display: grid;
|
|
grid-template-columns: 280px 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: 1px solid var(--nl-border-default);
|
|
background: rgba(12, 17, 31, 0.82);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
|
|
.main-panel {
|
|
min-width: 0;
|
|
padding: var(--nl-space-8);
|
|
}
|
|
|
|
.surface-card {
|
|
border: 1px solid var(--nl-border-default);
|
|
border-radius: var(--nl-radius-md);
|
|
background: rgba(18, 23, 37, 0.86);
|
|
box-shadow: var(--nl-elevation-md);
|
|
}
|
|
|
|
.surface-muted {
|
|
border: 1px solid var(--nl-border-default);
|
|
border-radius: var(--nl-radius-sm);
|
|
background: rgba(26, 35, 53, 0.72);
|
|
}
|
|
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-radius: var(--nl-radius-pill);
|
|
padding: 6px 10px;
|
|
background: rgba(90, 140, 255, 0.14);
|
|
color: var(--nl-text-primary);
|
|
font-size: var(--nl-fs-sm);
|
|
}
|
|
|
|
.input-shell {
|
|
width: 100%;
|
|
border: 1px solid var(--nl-border-default);
|
|
border-radius: var(--nl-radius-sm);
|
|
background: rgba(10, 15, 28, 0.88);
|
|
color: var(--nl-text-primary);
|
|
padding: 12px 14px;
|
|
}
|
|
|
|
.page-grid {
|
|
display: grid;
|
|
gap: var(--nl-space-6);
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.app-shell {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar {
|
|
border-right: 0;
|
|
border-bottom: 1px solid var(--nl-border-default);
|
|
}
|
|
}
|
|
|
|
/* Focus-visible — keyboard accessibility */
|
|
*:focus-visible {
|
|
outline: 2px solid var(--nl-accent-primary, #5A8CFF);
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
*:focus:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
|
|
/* Screen-reader only utility */
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Interactive hover/active states */
|
|
button, [role="button"], a {
|
|
transition: opacity 0.15s ease, background-color 0.15s ease;
|
|
}
|
|
button:hover:not(:disabled), [role="button"]:hover:not(:disabled) {
|
|
opacity: 0.85;
|
|
}
|
|
button:active:not(:disabled), [role="button"]:active:not(:disabled) {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Skip-to-content link (keyboard accessibility) */
|
|
.skip-to-content {
|
|
position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 9999;
|
|
}
|
|
.skip-to-content:focus {
|
|
position: fixed; top: 8px; left: 8px; width: auto; height: auto;
|
|
padding: 12px 24px; background: var(--nl-bg-elevated); color: var(--nl-accent);
|
|
border: 2px solid var(--nl-accent); border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none;
|
|
}
|
|
|
|
/* Responsive sidebar */
|
|
@media (max-width: 768px) {
|
|
.app-sidebar {
|
|
position: fixed !important;
|
|
left: -280px !important;
|
|
top: 0 !important;
|
|
z-index: 40;
|
|
width: 260px !important;
|
|
height: 100vh !important;
|
|
transition: left 0.2s ease;
|
|
overflow-y: auto;
|
|
}
|
|
.app-sidebar.open { left: 0 !important; }
|
|
.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,0.5); }
|
|
.sidebar-overlay.open { display: block; }
|
|
.sidebar-toggle {
|
|
display: flex; align-items: center; justify-content: center;
|
|
position: fixed; top: 12px; left: 12px; z-index: 38;
|
|
width: 40px; height: 40px; border-radius: 8px;
|
|
border: 1px solid var(--nl-border-default, #2a2a4a);
|
|
background: var(--nl-bg-elevated, #12151c);
|
|
color: var(--nl-text-primary, #fff);
|
|
cursor: pointer; font-size: 20px; line-height: 1;
|
|
}
|
|
}
|
|
@media (min-width: 769px) {
|
|
.sidebar-toggle { display: none !important; }
|
|
.sidebar-overlay { display: none !important; }
|
|
}
|
|
|
|
/* Respect user motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*, *::before, *::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* Respect OS dark/light preference */
|
|
@media (prefers-color-scheme: light) {
|
|
:root:not([data-theme="dark"]) {
|
|
--nl-bg-canvas: #F8FAFC;
|
|
--nl-bg-elevated: #FFFFFF;
|
|
--nl-surface-card: #FFFFFF;
|
|
--nl-surface-muted: #F1F5F9;
|
|
--nl-text-primary: #0F172A;
|
|
--nl-text-secondary: #475569;
|
|
--nl-text-tertiary: #94A3B8;
|
|
}
|
|
}
|
|
|
|
/* ── Responsive Sidebar ──────────────────────────────────────── */
|
|
|
|
.app-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.app-sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100vh;
|
|
z-index: 40;
|
|
transition: transform 0.22s ease;
|
|
}
|
|
|
|
.app-sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
z-index: 39;
|
|
}
|
|
|
|
.app-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.app-sidebar {
|
|
transform: translateX(-100%);
|
|
}
|
|
.app-sidebar[data-open="true"] {
|
|
transform: translateX(0);
|
|
}
|
|
.app-sidebar-overlay[data-open="true"] {
|
|
display: block;
|
|
}
|
|
.app-main {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.app-sidebar {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.mobile-menu-btn {
|
|
display: none;
|
|
position: fixed;
|
|
top: 12px;
|
|
left: 12px;
|
|
z-index: 38;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mobile-menu-btn {
|
|
display: flex;
|
|
}
|
|
}
|