diff --git a/src/index.css b/src/index.css index 75bfbe1..dd25258 100644 --- a/src/index.css +++ b/src/index.css @@ -3,8 +3,6 @@ @tailwind components; @tailwind utilities; -@import './utils/tldraw/cc-design-system.css'; - /* Base styles */ html, body { diff --git a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx index 24a2e03..7f0b8a3 100644 --- a/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx +++ b/src/utils/tldraw/cc-base/CCBaseShapeUtil.tsx @@ -72,7 +72,7 @@ export abstract class CCBaseShapeUtil extends BaseBoxShap zIndex: 1, }} > - {shape.props.title} + {shape.props.title}
{toolbarItems.map((item) => (
))} - {isLocked && 🔒} + {isLocked && 🔒} {/* Content */} diff --git a/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx b/src/utils/tldraw/cc-base/cc-transcription/CCLiveTranscriptionShapeUtil.tsx index a197080..cdc2509 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 deleted file mode 100644 index a5f4555..0000000 --- a/src/utils/tldraw/cc-design-system.css +++ /dev/null @@ -1,976 +0,0 @@ -/* ============================================================ - 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 f52fc2b..dc70105 100644 --- a/src/utils/tldraw/tldraw.css +++ b/src/utils/tldraw/tldraw.css @@ -1,2 +1,2 @@ -@import './cc-design-system.css'; +@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap"); @import url("@tldraw/tldraw/tldraw.css");