From 3ffbb11552c9a34524ea04024e502f426de26141 Mon Sep 17 00:00:00 2001 From: CC Worker Date: Sun, 31 May 2026 21:15:13 +0000 Subject: [PATCH] fix: restore design-system files accidentally reverted in prior commit Commit 669a661 had a stale staged deletion of cc-design-system.css and reverted three other CSS-variable files. This commit restores them to the state from cd37771 (adopt --cc-* CSS variable system). --- src/index.css | 4 +- .../CCLiveTranscriptionShapeUtil.tsx | 4 +- src/utils/tldraw/cc-design-system.css | 976 ++++++++++++++++++ src/utils/tldraw/tldraw.css | 2 +- 4 files changed, 981 insertions(+), 5 deletions(-) create mode 100644 src/utils/tldraw/cc-design-system.css diff --git a/src/index.css b/src/index.css index dd25258..350d41f 100644 --- a/src/index.css +++ b/src/index.css @@ -152,10 +152,10 @@ body { .login-role-header { font-weight: 600 !important; - color: #1976d2 !important; + color: var(--cc-action-primary) !important; margin-bottom: 24px !important; padding-bottom: 8px !important; - border-bottom: 2px solid #1976d2 !important; + border-bottom: 2px solid var(--cc-action-primary) !important; width: fit-content !important; } diff --git a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx index cdc2509..a197080 100644 --- a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx +++ b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx @@ -83,7 +83,7 @@ export class CCLiveTranscriptionShapeUtil extends CCBaseShapeUtil {isRecording ? 'Recording...' : 'Ready'} diff --git a/src/utils/tldraw/cc-design-system.css b/src/utils/tldraw/cc-design-system.css new file mode 100644 index 0000000..a5f4555 --- /dev/null +++ b/src/utils/tldraw/cc-design-system.css @@ -0,0 +1,976 @@ +/* ============================================================ + CLASSROOM COPILOT — DESIGN SYSTEM + Aesthetic Direction: Technical Editorial / Industrial Utilitarian + + Philosophy: Drafting table discipline. Every element earns + its place. Tone contrast over shadow depth. Grid over flow. + ============================================================ */ + +/* ─── TYPOGRAPHY IMPORTS ───────────────────────────────────── */ +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); + +/* ─── ROOT TOKENS — LIGHT MODE ─────────────────────────────── */ +:root { + /* Typography */ + --cc-font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif; + --cc-font-mono: 'IBM Plex Mono', 'Fira Code', 'Cascadia Code', monospace; + + --cc-text-xs: 0.6875rem; /* 11px */ + --cc-text-sm: 0.75rem; /* 12px */ + --cc-text-base: 0.875rem; /* 14px */ + --cc-text-md: 1rem; /* 16px */ + --cc-text-lg: 1.125rem; /* 18px */ + --cc-text-xl: 1.25rem; /* 20px */ + + --cc-weight-normal: 400; + --cc-weight-medium: 500; + --cc-weight-semibold: 600; + + --cc-leading-tight: 1.2; + --cc-leading-normal: 1.5; + --cc-leading-loose: 1.7; + + --cc-tracking-tight: -0.01em; + --cc-tracking-normal: 0; + --cc-tracking-wide: 0.04em; + --cc-tracking-widest: 0.12em; + + /* ── Color Primitives ── */ + --cc-navy-950: #0D1117; + --cc-navy-900: #14191F; + --cc-navy-800: #1C2330; + --cc-navy-700: #263040; + --cc-navy-600: #344256; + --cc-navy-500: #435470; + --cc-navy-400: #5A6E8A; + --cc-navy-300: #7A8FA8; + --cc-navy-200: #A4B4C8; + --cc-navy-100: #D2DCE8; + --cc-navy-50: #EBF0F5; + + --cc-parchment-950: #2A2519; + --cc-parchment-900: #3D3626; + --cc-parchment-800: #5C5238; + --cc-parchment-700: #7A6E4E; + --cc-parchment-600: #9A8C6A; + --cc-parchment-500: #B8A882; + --cc-parchment-400: #CEC0A0; + --cc-parchment-300: #DED2BA; + --cc-parchment-200: #EDE5D4; + --cc-parchment-100: #F5F2ED; + --cc-parchment-50: #FAF8F5; + + --cc-amber-700: #8A5C1A; + --cc-amber-600: #A8711F; + --cc-amber-500: #C9882A; + --cc-amber-400: #D9A24E; + --cc-amber-300: #E6BC78; + --cc-amber-200: #F0D4A8; + --cc-amber-100: #F8EDDA; + + --cc-sage-700: #2E3E36; + --cc-sage-600: #3A5046; + --cc-sage-500: #4A5E52; + --cc-sage-400: #607A6C; + --cc-sage-300: #7E9688; + --cc-sage-200: #A8BDB4; + --cc-sage-100: #D2DDD9; + + --cc-crimson-600: #8B1A1A; + --cc-crimson-500: #A82828; + --cc-crimson-400: #C44040; + --cc-crimson-100: #F5DADA; + + --cc-signal-green-600: #1A5C36; + --cc-signal-green-500: #246B42; + --cc-signal-green-400: #347A52; + --cc-signal-green-100: #D4EDE0; + + /* ── Semantic Color Assignments — Light ── */ + + /* Surfaces */ + --cc-bg-canvas: var(--cc-parchment-100); + --cc-bg-panel: var(--cc-parchment-50); + --cc-bg-panel-alt: #FFFFFF; + --cc-bg-shape: #FFFFFF; + --cc-bg-shape-hover: var(--cc-parchment-100); + --cc-bg-overlay: rgba(13, 17, 23, 0.48); + --cc-bg-code: var(--cc-navy-900); + + /* Shape / card header tones */ + --cc-header-default: var(--cc-navy-700); + --cc-header-accent: var(--cc-amber-500); + --cc-header-sage: var(--cc-sage-600); + --cc-header-dim: var(--cc-navy-500); + + /* Text */ + --cc-text-primary: var(--cc-navy-900); + --cc-text-secondary: var(--cc-navy-500); + --cc-text-tertiary: var(--cc-navy-300); + --cc-text-inverse: var(--cc-parchment-100); + --cc-text-accent: var(--cc-amber-500); + --cc-text-code: var(--cc-parchment-200); + --cc-text-link: var(--cc-amber-600); + + /* Borders */ + --cc-border: var(--cc-navy-100); + --cc-border-strong: var(--cc-navy-200); + --cc-border-accent: var(--cc-amber-500); + --cc-border-focus: var(--cc-amber-400); + --cc-border-error: var(--cc-crimson-500); + --cc-border-success: var(--cc-signal-green-500); + + /* Interactive */ + --cc-action-primary: var(--cc-amber-500); + --cc-action-primary-hover: var(--cc-amber-400); + --cc-action-primary-active: var(--cc-amber-600); + --cc-action-secondary: var(--cc-navy-700); + --cc-action-secondary-hover: var(--cc-navy-600); + --cc-action-danger: var(--cc-crimson-500); + --cc-action-success: var(--cc-signal-green-500); + + /* States */ + --cc-selected: var(--cc-amber-100); + --cc-hover: var(--cc-parchment-200); + --cc-active: var(--cc-parchment-300); + --cc-disabled: var(--cc-navy-100); + + /* Recording / live indicator */ + --cc-recording-active: var(--cc-crimson-500); + --cc-recording-idle: var(--cc-signal-green-500); + + /* ── Geometry ── */ + --cc-radius-none: 0; + --cc-radius-xs: 1px; + --cc-radius-sm: 2px; /* maximum for shapes */ + --cc-radius-md: 4px; /* panels, menus */ + --cc-radius-full: 9999px; + + /* ── Spacing scale (8pt grid) ── */ + --cc-space-0: 0; + --cc-space-px: 1px; + --cc-space-0_5: 2px; + --cc-space-1: 4px; + --cc-space-2: 8px; + --cc-space-3: 12px; + --cc-space-4: 16px; + --cc-space-5: 20px; + --cc-space-6: 24px; + --cc-space-8: 32px; + --cc-space-10: 40px; + --cc-space-12: 48px; + --cc-space-16: 64px; + + /* ── Shape dimensions ── */ + --cc-shape-header-h: 32px; + --cc-shape-header-pad: var(--cc-space-2); + --cc-shape-content-pad: var(--cc-space-2); + --cc-shape-min-w: 120px; + --cc-shape-min-h: 80px; + + /* ── Panel dimensions ── */ + --cc-panel-w: 280px; + --cc-panel-header-h: 44px; + --cc-panel-handle-w: 20px; + + /* ── Borders ── */ + --cc-border-width: 1px; + --cc-border-width-thick: 2px; + + /* No blurry box shadows. Depth through tone. */ + --cc-shadow-none: none; + --cc-shadow-edge: 1px 0 0 0 var(--cc-border); + --cc-shadow-crisp: 2px 2px 0 0 var(--cc-navy-200); + --cc-shadow-raised: 3px 3px 0 0 var(--cc-navy-200); + + /* ── Z-index system ── */ + --cc-z-canvas: 0; + --cc-z-shape: 1; + --cc-z-panel: 200; + --cc-z-toolbar: 300; + --cc-z-menu: 400; + --cc-z-modal: 500; + --cc-z-toast: 600; + + /* ── Motion ── */ + --cc-transition-snap: 80ms linear; + --cc-transition-quick: 120ms ease-out; + --cc-transition-base: 200ms ease-out; + --cc-transition-slow: 320ms ease-out; +} + +/* ─── DARK MODE TOKENS ──────────────────────────────────────── */ +[data-color-mode="dark"] { + /* Surfaces */ + --cc-bg-canvas: var(--cc-navy-950); + --cc-bg-panel: var(--cc-navy-900); + --cc-bg-panel-alt: var(--cc-navy-800); + --cc-bg-shape: var(--cc-navy-800); + --cc-bg-shape-hover: var(--cc-navy-700); + --cc-bg-overlay: rgba(13, 17, 23, 0.72); + --cc-bg-code: var(--cc-navy-950); + + /* Shape headers get slightly brighter in dark */ + --cc-header-default: var(--cc-navy-600); + --cc-header-accent: var(--cc-amber-600); + --cc-header-sage: var(--cc-sage-500); + --cc-header-dim: var(--cc-navy-700); + + /* Text */ + --cc-text-primary: var(--cc-parchment-100); + --cc-text-secondary: var(--cc-navy-200); + --cc-text-tertiary: var(--cc-navy-300); + --cc-text-inverse: var(--cc-navy-900); + --cc-text-accent: var(--cc-amber-400); + --cc-text-code: var(--cc-parchment-300); + --cc-text-link: var(--cc-amber-400); + + /* Borders */ + --cc-border: var(--cc-navy-700); + --cc-border-strong: var(--cc-navy-600); + --cc-border-accent: var(--cc-amber-500); + --cc-border-focus: var(--cc-amber-300); + --cc-border-error: var(--cc-crimson-400); + --cc-border-success: var(--cc-signal-green-400); + + /* Interactive */ + --cc-action-primary: var(--cc-amber-500); + --cc-action-primary-hover: var(--cc-amber-300); + --cc-action-primary-active: var(--cc-amber-600); + --cc-action-secondary: var(--cc-navy-400); + --cc-action-secondary-hover: var(--cc-navy-300); + + /* States */ + --cc-selected: rgba(201, 136, 42, 0.15); + --cc-hover: var(--cc-navy-800); + --cc-active: var(--cc-navy-700); + --cc-disabled: var(--cc-navy-700); + + /* Shadows become tone dividers in dark */ + --cc-shadow-edge: 1px 0 0 0 var(--cc-navy-700); + --cc-shadow-crisp: 2px 2px 0 0 var(--cc-navy-950); + --cc-shadow-raised: 3px 3px 0 0 var(--cc-navy-950); +} + +/* ─── BASE RESET (minimal — respects tldraw's own base) ────── */ +.cc-root * { + box-sizing: border-box; + font-family: var(--cc-font-sans); +} + +.cc-root code, +.cc-root pre, +.cc-mono { + font-family: var(--cc-font-mono); +} + +/* ─── SHAPE CARD SYSTEM ─────────────────────────────────────── */ + +/* + .cc-shape-container + └── .cc-shape-header + └── .cc-shape-content +*/ + +.cc-shape-container { + display: grid; + grid-template-rows: var(--cc-shape-header-h) 1fr; + width: 100%; + height: 100%; + background: var(--cc-bg-shape); + border: var(--cc-border-width) solid var(--cc-border); + border-radius: var(--cc-radius-sm); + overflow: hidden; + /* Flat depth — no blur */ + box-shadow: var(--cc-shadow-crisp); + transition: box-shadow var(--cc-transition-quick); +} + +.cc-shape-container:hover { + box-shadow: var(--cc-shadow-raised); +} + +.cc-shape-container--locked { + opacity: 0.72; + cursor: not-allowed; +} + +/* Header strip — the primary identification band */ +.cc-shape-header { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + padding: 0 var(--cc-shape-header-pad); + height: var(--cc-shape-header-h); + background: var(--cc-header-default); + color: var(--cc-text-inverse); + /* Hairline rule below header, not shadow */ + border-bottom: var(--cc-border-width) solid rgba(255,255,255,0.12); + cursor: move; + user-select: none; +} + +/* Accent variant headers */ +.cc-shape-header--accent { background: var(--cc-header-accent); color: var(--cc-navy-900); } +.cc-shape-header--sage { background: var(--cc-header-sage); } +.cc-shape-header--dim { background: var(--cc-header-dim); } + +.cc-shape-header__title { + font-size: var(--cc-text-sm); + font-weight: var(--cc-weight-semibold); + letter-spacing: var(--cc-tracking-wide); + text-transform: uppercase; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.cc-shape-header__actions { + display: flex; + align-items: center; + gap: var(--cc-space-1); +} + +/* Toolbar buttons inside shape headers */ +.cc-shape-btn { + display: flex; + align-items: center; + justify-content: center; + width: 20px; + height: 20px; + padding: 0; + border: none; + border-radius: var(--cc-radius-xs); + background: transparent; + color: inherit; + opacity: 0.65; + cursor: pointer; + font-size: 12px; + line-height: 1; + touch-action: none; + transition: + opacity var(--cc-transition-snap), + background var(--cc-transition-snap); +} + +.cc-shape-btn:hover { + opacity: 1; + background: rgba(255,255,255,0.15); +} + +.cc-shape-btn:active { + background: rgba(255,255,255,0.25); + transform: scale(0.92); +} + +.cc-shape-btn--active { + opacity: 1; + background: rgba(255,255,255,0.2); +} + +/* Content area */ +.cc-shape-content { + padding: var(--cc-shape-content-pad); + overflow: auto; + background: var(--cc-bg-shape); + color: var(--cc-text-primary); + font-size: var(--cc-text-base); + line-height: var(--cc-leading-normal); + /* Hide scrollbar visually, keep functionality */ + scrollbar-width: thin; + scrollbar-color: var(--cc-border-strong) transparent; +} + +.cc-shape-content::-webkit-scrollbar { + width: 4px; +} + +.cc-shape-content::-webkit-scrollbar-thumb { + background: var(--cc-border-strong); + border-radius: var(--cc-radius-xs); +} + +.cc-shape-content::-webkit-scrollbar-track { + background: transparent; +} + +/* ─── PANEL SYSTEM ──────────────────────────────────────────── */ + +/* + .cc-panel + └── .cc-panel-header + └── .cc-panel-content +*/ + +.cc-panel { + display: grid; + grid-template-rows: var(--cc-panel-header-h) 1fr; + width: var(--cc-panel-w); + height: 100%; + background: var(--cc-bg-panel); + border-right: var(--cc-border-width) solid var(--cc-border); + overflow: hidden; + position: absolute; + left: 0; + top: 0; + z-index: var(--cc-z-panel); +} + +.cc-panel-header { + display: grid; + grid-template-columns: 1fr auto; + align-items: center; + gap: var(--cc-space-2); + padding: 0 var(--cc-space-2); + height: var(--cc-panel-header-h); + background: var(--cc-bg-panel); + border-bottom: var(--cc-border-width) solid var(--cc-border-strong); + /* Left accent stripe — the editorial mark */ + box-shadow: inset 2px 0 0 0 var(--cc-border-accent); +} + +.cc-panel-content { + overflow-y: auto; + padding: var(--cc-space-2); + scrollbar-width: thin; + scrollbar-color: var(--cc-border) transparent; +} + +.cc-panel-content::-webkit-scrollbar { + width: 3px; +} + +.cc-panel-content::-webkit-scrollbar-thumb { + background: var(--cc-border-strong); +} + +/* Panel tab / type selector */ +.cc-panel-selector { + display: flex; + align-items: center; + gap: var(--cc-space-1); + padding: var(--cc-space-1) var(--cc-space-2); + background: transparent; + border: var(--cc-border-width) solid var(--cc-border); + border-radius: var(--cc-radius-sm); + color: var(--cc-text-primary); + font-family: var(--cc-font-sans); + font-size: var(--cc-text-sm); + font-weight: var(--cc-weight-medium); + cursor: pointer; + transition: + border-color var(--cc-transition-quick), + background var(--cc-transition-quick); + white-space: nowrap; +} + +.cc-panel-selector:hover { + border-color: var(--cc-border-strong); + background: var(--cc-hover); +} + +.cc-panel-selector__icon { + width: 14px; + height: 14px; + opacity: 0.7; + flex-shrink: 0; +} + +.cc-panel-selector__chevron { + margin-left: auto; + opacity: 0.5; + transition: transform var(--cc-transition-quick); +} + +.cc-panel-selector[aria-expanded="true"] .cc-panel-selector__chevron { + transform: rotate(180deg); +} + +/* Panel collapse handle */ +.cc-panel-handle { + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + display: flex; + align-items: center; + justify-content: center; + width: var(--cc-panel-handle-w); + height: 40px; + background: var(--cc-bg-panel); + border: var(--cc-border-width) solid var(--cc-border); + border-left: none; + border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; + color: var(--cc-text-tertiary); + font-size: 10px; + cursor: pointer; + z-index: var(--cc-z-panel); + transition: + color var(--cc-transition-quick), + background var(--cc-transition-quick); +} + +.cc-panel-handle:hover { + background: var(--cc-hover); + color: var(--cc-text-primary); +} + +/* Pin button */ +.cc-pin-btn { + display: flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: none; + border-radius: var(--cc-radius-sm); + background: transparent; + color: var(--cc-text-tertiary); + cursor: pointer; + transition: + color var(--cc-transition-quick), + background var(--cc-transition-quick); +} + +.cc-pin-btn:hover { + background: var(--cc-hover); + color: var(--cc-text-primary); +} + +.cc-pin-btn--active { + color: var(--cc-action-primary); +} + +/* ─── PANEL MENU / DROPDOWN ─────────────────────────────────── */ + +.cc-menu { + position: absolute; + background: var(--cc-bg-panel-alt); + border: var(--cc-border-width) solid var(--cc-border-strong); + border-radius: var(--cc-radius-md); + padding: var(--cc-space-1) 0; + min-width: 200px; + z-index: var(--cc-z-menu); + /* Hard-edged drop — no blur */ + box-shadow: 4px 4px 0 0 var(--cc-navy-200); +} + +[data-color-mode="dark"] .cc-menu { + box-shadow: 4px 4px 0 0 var(--cc-navy-950); +} + +.cc-menu-item { + display: grid; + grid-template-columns: 20px 1fr; + align-items: start; + gap: var(--cc-space-2); + padding: var(--cc-space-2) var(--cc-space-3); + color: var(--cc-text-primary); + cursor: pointer; + border: none; + background: transparent; + width: 100%; + text-align: left; + font-family: var(--cc-font-sans); + font-size: var(--cc-text-sm); + transition: background var(--cc-transition-snap); +} + +.cc-menu-item:hover { + background: var(--cc-hover); +} + +.cc-menu-item--selected { + background: var(--cc-selected); + color: var(--cc-text-accent); +} + +.cc-menu-item__icon { + color: var(--cc-text-secondary); + transition: color var(--cc-transition-snap); +} + +.cc-menu-item:hover .cc-menu-item__icon, +.cc-menu-item--selected .cc-menu-item__icon { + color: var(--cc-action-primary); +} + +.cc-menu-item__label { + font-weight: var(--cc-weight-medium); + line-height: var(--cc-leading-tight); +} + +.cc-menu-item__desc { + font-size: var(--cc-text-xs); + color: var(--cc-text-secondary); + line-height: var(--cc-leading-normal); + margin-top: 1px; +} + +.cc-menu-divider { + height: var(--cc-border-width); + background: var(--cc-border); + margin: var(--cc-space-1) 0; +} + +/* ─── BUTTONS ────────────────────────────────────────────────── */ + +.cc-btn { + display: inline-grid; + place-items: center; + padding: var(--cc-space-1) var(--cc-space-3); + border: var(--cc-border-width) solid transparent; + border-radius: var(--cc-radius-sm); + font-family: var(--cc-font-sans); + font-size: var(--cc-text-sm); + font-weight: var(--cc-weight-medium); + letter-spacing: var(--cc-tracking-wide); + text-transform: uppercase; + cursor: pointer; + white-space: nowrap; + transition: + background var(--cc-transition-quick), + border-color var(--cc-transition-quick), + transform var(--cc-transition-snap), + box-shadow var(--cc-transition-snap); +} + +.cc-btn:active { + transform: translate(1px, 1px); +} + +.cc-btn--primary { + background: var(--cc-action-primary); + color: var(--cc-navy-900); + border-color: var(--cc-amber-600); + box-shadow: 2px 2px 0 0 var(--cc-amber-700); +} + +.cc-btn--primary:hover { + background: var(--cc-action-primary-hover); + box-shadow: 3px 3px 0 0 var(--cc-amber-700); +} + +.cc-btn--primary:active { + box-shadow: none; + background: var(--cc-action-primary-active); +} + +.cc-btn--secondary { + background: transparent; + color: var(--cc-text-primary); + border-color: var(--cc-border-strong); +} + +.cc-btn--secondary:hover { + background: var(--cc-hover); + border-color: var(--cc-navy-300); +} + +.cc-btn--danger { + background: transparent; + color: var(--cc-action-danger); + border-color: var(--cc-border-error); +} + +.cc-btn--danger:hover { + background: var(--cc-crimson-100); +} + +.cc-btn--icon { + width: 28px; + height: 28px; + padding: 0; + border-radius: var(--cc-radius-sm); + border-color: transparent; + background: transparent; + color: var(--cc-text-secondary); +} + +.cc-btn--icon:hover { + background: var(--cc-hover); + color: var(--cc-text-primary); +} + +/* ─── INPUT / FORM ELEMENTS ─────────────────────────────────── */ + +.cc-input { + display: block; + width: 100%; + padding: var(--cc-space-1) var(--cc-space-2); + background: var(--cc-bg-panel-alt); + border: var(--cc-border-width) solid var(--cc-border-strong); + border-radius: var(--cc-radius-sm); + color: var(--cc-text-primary); + font-family: var(--cc-font-sans); + font-size: var(--cc-text-base); + line-height: var(--cc-leading-normal); + transition: border-color var(--cc-transition-quick); + outline: none; +} + +.cc-input::placeholder { + color: var(--cc-text-tertiary); +} + +.cc-input:focus { + border-color: var(--cc-border-focus); + box-shadow: 0 0 0 2px rgba(201,136,42,0.18); +} + +.cc-input:disabled { + background: var(--cc-disabled); + color: var(--cc-text-tertiary); + cursor: not-allowed; +} + +/* ─── RECORDING / LIVE INDICATOR ────────────────────────────── */ + +.cc-record-btn { + display: grid; + place-items: center; + width: 44px; + height: 44px; + border: none; + border-radius: 50%; + cursor: pointer; + font-size: 20px; + transition: + background var(--cc-transition-quick), + transform var(--cc-transition-snap), + box-shadow var(--cc-transition-quick); +} + +.cc-record-btn--idle { + background: var(--cc-recording-idle); + color: #fff; + box-shadow: 2px 2px 0 0 var(--cc-signal-green-600); +} + +.cc-record-btn--idle:hover { + background: var(--cc-signal-green-400); + box-shadow: 3px 3px 0 0 var(--cc-signal-green-600); +} + +.cc-record-btn--active { + background: var(--cc-recording-active); + color: #fff; + box-shadow: 2px 2px 0 0 var(--cc-crimson-600); + /* Pulsing border — CSS-only, no JS */ + animation: cc-record-pulse 1.6s ease-in-out infinite; +} + +@keyframes cc-record-pulse { + 0%,100% { box-shadow: 2px 2px 0 0 var(--cc-crimson-600), 0 0 0 0 rgba(168,40,40,0.4); } + 50% { box-shadow: 2px 2px 0 0 var(--cc-crimson-600), 0 0 0 6px rgba(168,40,40,0); } +} + +.cc-record-btn--active:active { + transform: scale(0.94); +} + +/* Status text accompanying record button */ +.cc-record-status { + font-family: var(--cc-font-mono); + font-size: var(--cc-text-sm); + font-weight: var(--cc-weight-medium); + letter-spacing: var(--cc-tracking-wide); + text-transform: uppercase; +} + +.cc-record-status--idle { color: var(--cc-recording-idle); } +.cc-record-status--active { color: var(--cc-recording-active); } + +/* ─── TRANSCRIPT SEGMENTS ───────────────────────────────────── */ + +.cc-transcript-segment { + padding: var(--cc-space-2); + border-left: 2px solid var(--cc-border); + margin-bottom: var(--cc-space-1); + transition: border-color var(--cc-transition-quick); +} + +.cc-transcript-segment:hover { + border-color: var(--cc-border-accent); +} + +.cc-transcript-segment--current { + border-color: var(--cc-action-primary); + background: var(--cc-selected); +} + +.cc-transcript-timestamp { + font-family: var(--cc-font-mono); + font-size: var(--cc-text-xs); + color: var(--cc-text-tertiary); + letter-spacing: var(--cc-tracking-wide); + margin-bottom: var(--cc-space-0_5); +} + +.cc-transcript-text { + font-size: var(--cc-text-base); + color: var(--cc-text-primary); + line-height: var(--cc-leading-normal); +} + +/* ─── GRAPH NODE CARDS ──────────────────────────────────────── */ + +.cc-graph-node { + display: grid; + grid-template-rows: var(--cc-shape-header-h) 1fr; + border: var(--cc-border-width) solid var(--cc-border); + border-radius: var(--cc-radius-sm); + overflow: hidden; + background: var(--cc-bg-shape); + box-shadow: var(--cc-shadow-crisp); + transition: box-shadow var(--cc-transition-quick); +} + +.cc-graph-node:hover { + box-shadow: var(--cc-shadow-raised); +} + +/* Node type label pill */ +.cc-node-type-tag { + display: inline-block; + padding: 1px var(--cc-space-1); + border: var(--cc-border-width) solid currentColor; + border-radius: var(--cc-radius-xs); + font-family: var(--cc-font-mono); + font-size: var(--cc-text-xs); + font-weight: var(--cc-weight-medium); + letter-spacing: var(--cc-tracking-widest); + text-transform: uppercase; + opacity: 0.75; +} + +/* ─── SECTION / DIVIDER TYPOGRAPHY ─────────────────────────── */ + +.cc-section-label { + font-size: var(--cc-text-xs); + font-weight: var(--cc-weight-semibold); + letter-spacing: var(--cc-tracking-widest); + text-transform: uppercase; + color: var(--cc-text-tertiary); + padding-bottom: var(--cc-space-1); + border-bottom: var(--cc-border-width) solid var(--cc-border); + margin-bottom: var(--cc-space-2); +} + +.cc-divider { + height: var(--cc-border-width); + background: var(--cc-border); + margin: var(--cc-space-2) 0; +} + +/* ─── LOADING STATES ─────────────────────────────────────────── */ + +.cc-spinner { + display: inline-block; + width: 16px; + height: 16px; + border: 2px solid var(--cc-border-strong); + border-top-color: var(--cc-action-primary); + border-radius: 50%; + animation: cc-spin 0.7s linear infinite; +} + +@keyframes cc-spin { + to { transform: rotate(360deg); } +} + +.cc-skeleton { + background: linear-gradient( + 90deg, + var(--cc-border) 25%, + var(--cc-hover) 50%, + var(--cc-border) 75% + ); + background-size: 200% 100%; + animation: cc-shimmer 1.4s ease-in-out infinite; + border-radius: var(--cc-radius-xs); +} + +@keyframes cc-shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +/* ─── TOASTS / ALERTS ────────────────────────────────────────── */ + +.cc-alert { + display: grid; + grid-template-columns: auto 1fr auto; + align-items: start; + gap: var(--cc-space-2); + padding: var(--cc-space-2) var(--cc-space-3); + border: var(--cc-border-width) solid; + border-radius: var(--cc-radius-sm); + font-size: var(--cc-text-sm); +} + +.cc-alert--error { + background: var(--cc-crimson-100); + border-color: var(--cc-border-error); + color: var(--cc-crimson-600); +} + +.cc-alert--success { + background: var(--cc-signal-green-100); + border-color: var(--cc-border-success); + color: var(--cc-signal-green-600); +} + +[data-color-mode="dark"] .cc-alert--error { + background: rgba(168,40,40,0.12); + color: var(--cc-crimson-400); +} + +[data-color-mode="dark"] .cc-alert--success { + background: rgba(36,107,66,0.12); + color: var(--cc-signal-green-400); +} + +/* ─── UTILITY CLASSES ────────────────────────────────────────── */ + +.cc-font-mono { font-family: var(--cc-font-mono); } +.cc-text-xs { font-size: var(--cc-text-xs); } +.cc-text-sm { font-size: var(--cc-text-sm); } +.cc-text-base { font-size: var(--cc-text-base); } + +.cc-text-primary { color: var(--cc-text-primary); } +.cc-text-secondary { color: var(--cc-text-secondary); } +.cc-text-tertiary { color: var(--cc-text-tertiary); } +.cc-text-accent { color: var(--cc-text-accent); } + +.cc-uppercase { text-transform: uppercase; letter-spacing: var(--cc-tracking-wide); } + +.cc-border-accent { border-left: 2px solid var(--cc-border-accent); } +.cc-border-top { border-top: var(--cc-border-width) solid var(--cc-border); } +.cc-border-bottom { border-bottom: var(--cc-border-width) solid var(--cc-border); } + +.cc-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0,0,0,0); + white-space: nowrap; + border: 0; +} + +/* ─── GRID LAYOUT HELPERS ────────────────────────────────────── */ + +.cc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cc-space-2); } +.cc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cc-space-2); } +.cc-stack { display: grid; gap: var(--cc-space-2); } +.cc-stack-sm { display: grid; gap: var(--cc-space-1); } + +/* ─── FOCUS VISIBLE ──────────────────────────────────────────── */ +:focus-visible { + outline: 2px solid var(--cc-border-focus); + outline-offset: 2px; + border-radius: var(--cc-radius-xs); +} diff --git a/src/utils/tldraw/tldraw.css b/src/utils/tldraw/tldraw.css index dc70105..c32e4b4 100644 --- a/src/utils/tldraw/tldraw.css +++ b/src/utils/tldraw/tldraw.css @@ -1,2 +1,2 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"); @import url("@tldraw/tldraw/tldraw.css"); +@import url('./cc-design-system.css');