branch-commit-compare
Version:
Git branch comparison tool
134 lines (105 loc) • 4.36 kB
CSS
/**
* Playful Geometric Design Tokens
* Punchy, High-Saturation Palette with Hard Shadows
*/
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap");
:root {
/* ========== Colors - Playful Geometric ========== */
/* Base Surface */
--color-bg: #fffdf5; /* Warm Cream/Off-White (Paper feel) */
/* Text Colors - WCAG Compliant */
--color-fg: #1e293b; /* Slate 800 (Softer than black) - AAA */
--color-muted: #64748b; /* Slate 500 - AA */
/* Accent Colors - Playful Palette */
--color-accent: #8b5cf6; /* Vivid Violet (Primary Brand) */
--color-accent-light: #a78bfa; /* Lighter violet for hover */
--color-secondary: #f472b6; /* Hot Pink (Playful pop) */
--color-tertiary: #fbbf24; /* Amber/Yellow (Optimism) */
--color-quaternary: #34d399; /* Emerald/Mint (Freshness) */
/* Semantic Colors */
--color-success: #34d399;
--color-warning: #fbbf24;
--color-danger: #f472b6;
--color-info: #8b5cf6;
/* Neutral Colors */
--color-border: #e2e8f0; /* Slate 200 */
--color-card: #ffffff; /* White */
--color-input: #ffffff; /* White */
/* ========== Shadows - Hard "Pop" Shadows ========== */
/* The "Pop" Shadow (Hard Shadow) - No blur, solid offset */
--shadow-pop: 4px 4px 0px 0px var(--color-fg);
--shadow-pop-hover: 6px 6px 0px 0px var(--color-fg);
--shadow-pop-active: 2px 2px 0px 0px var(--color-fg);
/* Card Shadows - Colored for different states */
--shadow-card: 8px 8px 0px 0px var(--color-border);
--shadow-card-hover: 10px 10px 0px 0px var(--color-border);
--shadow-card-success: 8px 8px 0px 0px var(--color-success);
--shadow-card-warning: 8px 8px 0px 0px var(--color-warning);
--shadow-card-accent: 8px 8px 0px 0px var(--color-accent);
/* Small Shadows */
--shadow-small: 2px 2px 0px 0px var(--color-fg);
--shadow-small-hover: 3px 3px 0px 0px var(--color-fg);
/* ========== Border Radius - Playful & Varied ========== */
--radius-sm: 8px; /* Small elements */
--radius-md: 16px; /* Medium elements */
--radius-lg: 24px; /* Large elements */
--radius-xl: 32px; /* Extra large containers */
--radius-full: 9999px; /* Pills and circles */
/* ========== Typography ========== */
--font-display: "Outfit", system-ui, sans-serif; /* Geometric, friendly headings */
--font-body: "Plus Jakarta Sans", system-ui, sans-serif; /* Legible, modern body */
--font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", monospace;
/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* Font Sizes - Balanced scale (Major Third 1.25) */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.563rem; /* 25px */
--font-size-3xl: 1.953rem; /* 31px */
--font-size-4xl: 2.441rem; /* 39px */
--font-size-5xl: 3.052rem; /* 49px */
/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;
/* ========== Spacing ========== */
--spacing-1: 0.25rem; /* 4px */
--spacing-2: 0.5rem; /* 8px */
--spacing-3: 0.75rem; /* 12px */
--spacing-4: 1rem; /* 16px */
--spacing-5: 1.25rem; /* 20px */
--spacing-6: 1.5rem; /* 24px */
--spacing-8: 2rem; /* 32px */
--spacing-10: 2.5rem; /* 40px */
--spacing-12: 3rem; /* 48px */
--spacing-16: 4rem; /* 64px */
--spacing-20: 5rem; /* 80px */
--spacing-24: 6rem; /* 96px */
/* ========== Borders ========== */
--border-width: 2px; /* Chunky borders by default */
--border-color: var(--color-fg);
/* ========== Transitions - Bouncy & Elastic ========== */
--transition-fast: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-base: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
--transition-slow: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
/* ========== Z-Index ========== */
--z-base: 1;
--z-dropdown: 10;
--z-sticky: 20;
--z-fixed: 30;
--z-modal-backdrop: 40;
--z-modal: 50;
--z-tooltip: 60;
/* ========== Breakpoints (for reference) ========== */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
}