mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
395 lines
18 KiB
CSS
395 lines
18 KiB
CSS
/* Material 3 Expressive Design System Variables (2025) */
|
|
:root {
|
|
/* ================================================
|
|
SPACING SYSTEM - Optimized 4dp Grid Base for Compact Design
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive spacing tokens - more compact for desktop */
|
|
--cs-spacing-xs: 2px; /* 0.5 units - tighter for compact design */
|
|
--cs-spacing-sm: 4px; /* 1 unit - reduced base grid */
|
|
--cs-spacing-md: 8px; /* 2 units - more compact */
|
|
--cs-spacing-lg: 12px; /* 3 units - reduced from 24px */
|
|
--cs-spacing-xl: 16px; /* 4 units - more compact */
|
|
--cs-spacing-xxl: 24px; /* 6 units - significantly reduced */
|
|
|
|
/* ================================================
|
|
MATERIAL 3 EXPRESSIVE ELEVATION SYSTEM
|
|
================================================ */
|
|
|
|
/* Enhanced elevation shadows with more personality and depth */
|
|
--cs-elevation-0: none;
|
|
--cs-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
--cs-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-3: 0 3px 6px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-4: 0 4px 8px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
--cs-elevation-5: 0 6px 12px rgba(0, 0, 0, 0.12), 0 6px 18px rgba(0, 0, 0, 0.08);
|
|
|
|
/* Removed expressive shadow variants - rely on standard elevation system */
|
|
|
|
/* Surface container colors for elevation */
|
|
--cs-surface-container-lowest: var(--background-primary);
|
|
--cs-surface-container-low: var(--background-primary-alt);
|
|
--cs-surface-container: var(--background-secondary);
|
|
--cs-surface-container-high: var(--background-secondary-alt);
|
|
--cs-surface-container-highest: var(--background-modifier-cover);
|
|
|
|
/* ================================================
|
|
MATERIAL 3 EXPRESSIVE TYPOGRAPHY SCALE
|
|
================================================ */
|
|
|
|
/* Display - More expressive and compact for desktop use */
|
|
--cs-text-display-large: 44px; /* reduced from 56px */
|
|
--cs-text-display-medium: 36px; /* reduced from 45px */
|
|
--cs-text-display-small: 30px; /* reduced from 36px */
|
|
|
|
/* Headlines - Optimized for desktop density */
|
|
--cs-text-headline-large: 28px; /* reduced from 32px */
|
|
--cs-text-headline-medium: 24px; /* reduced from 28px */
|
|
--cs-text-headline-small: 20px; /* reduced from 24px */
|
|
|
|
/* Titles - Compact yet readable */
|
|
--cs-text-title-large: 18px; /* reduced from 22px */
|
|
--cs-text-title-medium: 14px; /* reduced from 16px */
|
|
--cs-text-title-small: 12px; /* reduced from 14px */
|
|
|
|
/* Body - Optimized for readability and compactness */
|
|
--cs-text-body-large: 14px; /* reduced from 16px */
|
|
--cs-text-body-medium: 12px; /* reduced from 14px */
|
|
--cs-text-body-small: 11px; /* slightly reduced */
|
|
|
|
/* Labels - Compact component text */
|
|
--cs-text-label-large: 12px; /* reduced from 14px */
|
|
--cs-text-label-medium: 11px; /* slightly reduced */
|
|
--cs-text-label-small: 10px; /* more compact */
|
|
|
|
/* Legacy typography for compatibility */
|
|
--cs-text-xs: var(--cs-text-label-small);
|
|
--cs-text-sm: var(--cs-text-label-medium);
|
|
--cs-text-base: var(--cs-text-body-medium);
|
|
--cs-text-md: var(--cs-text-body-large);
|
|
--cs-text-lg: var(--cs-text-title-medium);
|
|
--cs-text-xl: var(--cs-text-title-large);
|
|
--cs-text-2xl: var(--cs-text-headline-small);
|
|
|
|
/* ================================================
|
|
EXPRESSIVE BORDER RADIUS SYSTEM
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive corner radius tokens - more dynamic and personality-driven */
|
|
--cs-radius-xs: 2px; /* Extra small - more subtle */
|
|
--cs-radius-sm: 6px; /* Small - slightly more rounded */
|
|
--cs-radius-md: 10px; /* Medium - more organic feel */
|
|
--cs-radius-lg: 14px; /* Large - enhanced personality */
|
|
--cs-radius-xl: 20px; /* Extra large - more expressive */
|
|
--cs-radius-xxl: 28px; /* Extra extra large - bold expression */
|
|
--cs-radius-full: 50%; /* Full/pill - unchanged */
|
|
|
|
/* Removed expressive radius variations - keep consistent radius system */
|
|
|
|
/* ================================================
|
|
COMPACT COMPONENT SIZING
|
|
================================================ */
|
|
|
|
/* Touch targets - Optimized for desktop with compact design */
|
|
--cs-touch-target: 36px; /* Reduced from 48px for compactness */
|
|
--cs-touch-target-lg: 44px; /* Reduced from 56px */
|
|
--cs-touch-target-dense: 28px; /* More compact dense layouts */
|
|
|
|
/* Button heights - More compact for desktop */
|
|
--cs-button-height-sm: 24px; /* Reduced from 32px */
|
|
--cs-button-height-md: 32px; /* Reduced from 40px */
|
|
--cs-button-height-lg: var(--cs-touch-target);
|
|
|
|
/* Input heights - Compact but usable */
|
|
--cs-input-height-sm: 24px; /* Reduced from 32px */
|
|
--cs-input-height-md: 32px; /* Reduced from 40px */
|
|
--cs-input-height-lg: var(--cs-touch-target);
|
|
|
|
/* Icon sizes - Proportionally adjusted */
|
|
--cs-icon-sm: 14px; /* Reduced from 16px */
|
|
--cs-icon-md: 20px; /* Reduced from 24px */
|
|
--cs-icon-lg: 28px; /* Reduced from 32px */
|
|
|
|
/* ================================================
|
|
EXPRESSIVE MOTION PHYSICS SYSTEM
|
|
================================================ */
|
|
|
|
/* Material 3 Expressive motion tokens - enhanced with spatial springs */
|
|
--cs-motion-duration-instant: 25ms; /* Near-instant feedback */
|
|
--cs-motion-duration-short1: 75ms; /* Very quick interactions */
|
|
--cs-motion-duration-short2: 120ms; /* Quick interactions */
|
|
--cs-motion-duration-short3: 180ms; /* Standard interactions */
|
|
--cs-motion-duration-short4: 240ms; /* Slightly longer interactions */
|
|
--cs-motion-duration-medium1: 300ms; /* Medium duration */
|
|
--cs-motion-duration-medium2: 360ms; /* Medium-long duration */
|
|
--cs-motion-duration-medium3: 420ms; /* Longer interactions */
|
|
--cs-motion-duration-medium4: 480ms; /* Long interactions */
|
|
--cs-motion-duration-long1: 540ms; /* Very long interactions */
|
|
--cs-motion-duration-long2: 600ms; /* Extra long */
|
|
|
|
/* Enhanced easing curves for more natural, physics-based motion */
|
|
--cs-motion-easing-linear: cubic-bezier(0, 0, 1, 1);
|
|
--cs-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
--cs-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
|
--cs-motion-easing-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
|
--cs-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
|
--cs-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
|
--cs-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
|
|
|
/* Simplified motion system - keep only essential easing curves */
|
|
--cs-motion-easing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
|
|
|
|
/* Simplified transition tokens */
|
|
--cs-transition-instant: var(--cs-motion-duration-instant) var(--cs-motion-easing-standard);
|
|
--cs-transition-fast: var(--cs-motion-duration-short2) var(--cs-motion-easing-standard);
|
|
--cs-transition-normal: var(--cs-motion-duration-short3) var(--cs-motion-easing-spring);
|
|
--cs-transition-slow: var(--cs-motion-duration-medium1) var(--cs-motion-easing-emphasized);
|
|
|
|
/* ================================================
|
|
STATE SYSTEM
|
|
================================================ */
|
|
|
|
/* Opacity values for different states */
|
|
--cs-state-hover: 0.08;
|
|
--cs-state-focus: 0.12;
|
|
--cs-state-pressed: 0.16;
|
|
--cs-state-dragged: 0.16;
|
|
--cs-state-disabled: 0.38;
|
|
|
|
/* ================================================
|
|
Z-INDEX SYSTEM
|
|
================================================ */
|
|
|
|
/* Layer hierarchy for proper stacking */
|
|
--cs-z-base: 0;
|
|
--cs-z-sticky: 100;
|
|
--cs-z-fixed: 200;
|
|
--cs-z-overlay: 300;
|
|
--cs-z-dropdown: 1000;
|
|
--cs-z-tooltip: 2000;
|
|
--cs-z-modal: 3000;
|
|
--cs-z-notification: 4000;
|
|
|
|
/* Simplified Color System - Rely more on theme colors */
|
|
/* Only define colors when theme doesn't provide suitable alternatives */
|
|
|
|
/* Blue scale for notes and information */
|
|
--cs-blue-100: rgba(59, 130, 246, 0.1); /* Light blue background for scheduled tasks */
|
|
--cs-blue-300: var(--color-blue, #60a5fa);
|
|
--cs-blue-400: var(--color-blue, #3b82f6);
|
|
--cs-blue-500: var(--color-blue, #2563eb);
|
|
|
|
/* Purple scale for special items */
|
|
--cs-purple-100: rgba(139, 92, 246, 0.1); /* Light purple background for daily notes */
|
|
--cs-purple-300: var(--color-purple, #a78bfa);
|
|
--cs-purple-400: var(--color-purple, #8b5cf6);
|
|
--cs-purple-500: var(--color-purple, #7c3aed);
|
|
|
|
/* Use theme's muted colors */
|
|
--cs-gray-100: rgba(107, 114, 128, 0.1); /* Light gray background for archived tasks */
|
|
--cs-gray-300: var(--background-modifier-border);
|
|
--cs-gray-400: var(--background-modifier-border-hover);
|
|
--cs-gray-500: var(--text-muted);
|
|
--cs-gray-600: var(--text-faint);
|
|
|
|
/* Red and green gradient colors for due dates and completed tasks */
|
|
--cs-red-100: rgba(239, 68, 68, 0.1); /* Light red background for due tasks */
|
|
--cs-green-100: rgba(34, 197, 94, 0.1); /* Light green background for completed tasks */
|
|
|
|
/* Provider and calendar semantic colors */
|
|
--tn-color-google-calendar: var(--color-blue, #4285f4);
|
|
--tn-color-microsoft-calendar: var(--color-blue, #0078d4);
|
|
--tn-color-time-entry: var(--color-green, #10b981);
|
|
--tn-color-time-entry-text: var(--color-green, #059669);
|
|
--tn-color-time-entry-bg-soft: rgba(16, 185, 129, 0.08);
|
|
--tn-color-time-entry-bg-medium: rgba(16, 185, 129, 0.15);
|
|
|
|
/* Dark-mode fallbacks when Obsidian theme variables are unavailable */
|
|
--tn-color-time-entry-dark: var(--color-green, #34d399);
|
|
--tn-color-time-entry-text-dark: var(--color-green, #6ee7b7);
|
|
--tn-color-time-entry-bg-soft-dark: rgba(52, 211, 153, 0.1);
|
|
--tn-color-time-entry-bg-medium-dark: rgba(52, 211, 153, 0.18);
|
|
|
|
/* Fixed semantic usage for UI elements (not user-customizable) */
|
|
/* Notes heatmap - blue intensities for calendar */
|
|
--cs-color-notes-light: var(--cs-blue-300);
|
|
--cs-color-notes-medium: var(--cs-blue-400);
|
|
--cs-color-notes-heavy: var(--cs-blue-500);
|
|
|
|
/* Special item colors (daily notes, recurring) */
|
|
--cs-color-daily-note: var(--cs-purple-300);
|
|
--cs-color-recurring: var(--cs-purple-400);
|
|
|
|
/* Archived/inactive content */
|
|
--cs-color-archived: var(--cs-gray-500);
|
|
|
|
/* Note: Status and Priority colors are user-customizable via settings */
|
|
/* They are injected as CSS variables: --status-{value}-color and --priority-{value}-color */
|
|
/* Default fallbacks for when custom colors aren't loaded yet */
|
|
--cs-color-status-fallback: var(--text-muted);
|
|
--cs-color-priority-fallback: var(--text-muted);
|
|
|
|
/* Legacy component sizing - using updated values from above */
|
|
|
|
/* Z-index scale */
|
|
--cs-z-dropdown: 1000;
|
|
--cs-z-modal: 2000;
|
|
--cs-z-tooltip: 3000;
|
|
|
|
/* Shadow system */
|
|
--cs-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--cs-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
--cs-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
--cs-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
/* ================================================
|
|
TASKNOTES PLUGIN SCOPED VARIABLES
|
|
================================================ */
|
|
|
|
.tasknotes-plugin {
|
|
/* ================================================
|
|
SCOPED THEME INTEGRATION
|
|
================================================ */
|
|
|
|
/* Base & Text Colors - Map to Obsidian theme variables */
|
|
--tn-bg-primary: var(--background-primary);
|
|
--tn-bg-secondary: var(--background-secondary);
|
|
--tn-bg-primary-alt: var(--background-primary-alt, var(--background-primary));
|
|
--tn-bg-secondary-alt: var(--background-secondary-alt, var(--background-secondary));
|
|
--tn-text-normal: var(--text-normal);
|
|
--tn-text-muted: var(--text-muted);
|
|
--tn-text-faint: var(--text-faint);
|
|
--tn-text-accent: var(--interactive-accent);
|
|
|
|
/* Borders & Dividers - Map to Obsidian theme variables */
|
|
--tn-border-color: var(--background-modifier-border);
|
|
--tn-border-color-hover: var(--background-modifier-border-hover);
|
|
--tn-border-color-focus: var(--background-modifier-border-focus);
|
|
--tn-border-color-interactive: var(--interactive-accent);
|
|
|
|
/* Interactive States - Map to Obsidian theme variables */
|
|
--tn-interactive-normal: var(--interactive-normal);
|
|
--tn-interactive-hover: color-mix(in srgb, var(--tn-interactive-accent) 8%, transparent);
|
|
--tn-interactive-accent: var(--interactive-accent);
|
|
--tn-interactive-accent-hover: var(--interactive-accent-hover);
|
|
--tn-interactive-success: var(--interactive-success);
|
|
|
|
/* Semantic Colors - Use Obsidian's color palette when available */
|
|
--tn-color-success: var(--color-green, #00aa00);
|
|
--tn-color-warning: var(--color-yellow, #ffa500);
|
|
--tn-color-error: var(--color-red, #ff0000);
|
|
--tn-color-info: var(--color-blue, #0066cc);
|
|
--tn-color-overdue: var(--color-red, #ff0000);
|
|
|
|
/* ================================================
|
|
SCOPED SPACING SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-spacing-xs: var(--cs-spacing-xs);
|
|
--tn-spacing-sm: var(--cs-spacing-sm);
|
|
--tn-spacing-md: var(--cs-spacing-md);
|
|
--tn-spacing-lg: var(--cs-spacing-lg);
|
|
--tn-spacing-xl: var(--cs-spacing-xl);
|
|
--tn-spacing-xxl: var(--cs-spacing-xxl);
|
|
--tn-nested-task-indent: 24px;
|
|
--tn-nested-task-padding: 15px;
|
|
|
|
/* ================================================
|
|
SCOPED TYPOGRAPHY SYSTEM
|
|
================================================ */
|
|
|
|
--tn-font-size-base: var(--font-text-size, 16px);
|
|
--tn-font-size-xs: calc(var(--tn-font-size-base) * 0.625);
|
|
--tn-font-size-sm: calc(var(--tn-font-size-base) * 0.6875);
|
|
--tn-font-size-md: calc(var(--tn-font-size-base) * 0.75);
|
|
--tn-font-size-lg: calc(var(--tn-font-size-base) * 0.875);
|
|
--tn-font-size-xl: calc(var(--tn-font-size-base) * 0.875);
|
|
--tn-font-size-2xl: calc(var(--tn-font-size-base) * 1.125);
|
|
|
|
/* Typography weights and styles */
|
|
--tn-font-weight-normal: 400;
|
|
--tn-font-weight-medium: 500;
|
|
--tn-font-weight-semibold: 600;
|
|
--tn-font-weight-bold: 700;
|
|
|
|
/* ================================================
|
|
SCOPED BORDERS & SHADOWS (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-radius-xs: var(--cs-radius-xs);
|
|
--tn-radius-sm: var(--cs-radius-sm);
|
|
--tn-radius-md: var(--cs-radius-md);
|
|
--tn-radius-lg: var(--cs-radius-lg);
|
|
--tn-radius-xl: var(--cs-radius-xl);
|
|
--tn-radius-full: var(--cs-radius-full);
|
|
|
|
--tn-shadow-light: var(--cs-elevation-1);
|
|
--tn-shadow-medium: var(--cs-elevation-2);
|
|
--tn-shadow-strong: var(--cs-elevation-3);
|
|
--tn-shadow-hover: var(--cs-elevation-4);
|
|
|
|
/* ================================================
|
|
SCOPED MOTION SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-transition-fast: var(--cs-transition-fast);
|
|
--tn-transition-normal: var(--cs-transition-normal);
|
|
--tn-transition-slow: var(--cs-transition-slow);
|
|
|
|
/* ================================================
|
|
SCOPED COMPONENT SIZING (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-button-height-sm: var(--cs-button-height-sm);
|
|
--tn-button-height-md: var(--cs-button-height-md);
|
|
--tn-button-height-lg: var(--cs-button-height-lg);
|
|
|
|
--tn-input-height-sm: var(--cs-input-height-sm);
|
|
--tn-input-height-md: var(--cs-input-height-md);
|
|
--tn-input-height-lg: var(--cs-input-height-lg);
|
|
|
|
--tn-icon-sm: var(--cs-icon-sm);
|
|
--tn-icon-md: var(--cs-icon-md);
|
|
--tn-icon-lg: var(--cs-icon-lg);
|
|
|
|
/* ================================================
|
|
SCOPED Z-INDEX SYSTEM (inherit from design system)
|
|
================================================ */
|
|
|
|
--tn-z-base: var(--cs-z-base);
|
|
--tn-z-sticky: var(--cs-z-sticky);
|
|
--tn-z-dropdown: var(--cs-z-dropdown);
|
|
--tn-z-modal: var(--cs-z-modal);
|
|
--tn-z-tooltip: var(--cs-z-tooltip);
|
|
--tn-z-notification: var(--cs-z-notification);
|
|
|
|
/* ================================================
|
|
PLUGIN-SPECIFIC VARIABLES
|
|
================================================ */
|
|
|
|
/* Status & Priority colors are dynamically injected by StatusManager & PriorityManager */
|
|
/* These are fallbacks for when dynamic colors aren't loaded yet */
|
|
--tn-color-status-fallback: var(--tn-text-muted);
|
|
--tn-color-priority-fallback: var(--tn-text-muted);
|
|
|
|
/* Special component colors */
|
|
--tn-color-archived: var(--cs-color-archived);
|
|
--tn-color-daily-note: var(--cs-color-daily-note);
|
|
--tn-color-recurring: var(--cs-color-recurring);
|
|
|
|
/* Calendar and heatmap colors */
|
|
--tn-color-notes-light: var(--cs-color-notes-light);
|
|
--tn-color-notes-medium: var(--cs-color-notes-medium);
|
|
--tn-color-notes-heavy: var(--cs-color-notes-heavy);
|
|
}
|
|
|
|
body.is-mobile .tasknotes-plugin {
|
|
--tn-nested-task-indent: 12px;
|
|
--tn-nested-task-padding: 10px;
|
|
--tn-mobile-task-card-indicator-size: 24px;
|
|
--tn-mobile-task-card-menu-size: 32px;
|
|
--tn-mobile-task-card-dot-padding: 6px;
|
|
--tn-mobile-inline-indicator-size: 20px;
|
|
--tn-mobile-inline-menu-size: 24px;
|
|
}
|