mirror of
https://github.com/amitwh/markdown-converter.git
synced 2026-08-02 18:10:18 +05:30
amitwh
fe4d634163
- Add src/styles/tokens.css with comprehensive design tokens - Define color tokens (primary, secondary, accent, destructive, etc.) - Add spacing, typography, shadow, and transition tokens - Include dark mode token overrides - Add utility classes (btn, badge, input variants) - Add skip-link for keyboard navigation - Update index.html to include tokens.css This enables consistent theming and easier future UI updates. Amit Haridas
348 lines
8.5 KiB
CSS
348 lines
8.5 KiB
CSS
/**
|
|
* Design Tokens - Shadcn/ui Compatible
|
|
*
|
|
* This file provides CSS custom properties (design tokens) following
|
|
* the Shadcn/ui convention. These tokens enable consistent theming
|
|
* and easy theme switching between light and dark modes.
|
|
*
|
|
* Usage:
|
|
* color: hsl(var(--primary));
|
|
* background: hsl(var(--background));
|
|
*
|
|
* @version 4.1.0
|
|
*/
|
|
|
|
:root {
|
|
/* ============================================
|
|
* Base Colors - Light Mode
|
|
* ============================================ */
|
|
|
|
/* Background and foreground */
|
|
--background: 0 0% 100%;
|
|
--foreground: 222.2 84% 4.9%;
|
|
|
|
/* Card */
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 222.2 84% 4.9%;
|
|
|
|
/* Popover/Dropdown */
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 222.2 84% 4.9%;
|
|
|
|
/* Primary - Brand color (ConcreteInfo blue-purple) */
|
|
--primary: 227 44% 52%;
|
|
--primary-foreground: 210 40% 98%;
|
|
|
|
/* Secondary */
|
|
--secondary: 210 40% 96.1%;
|
|
--secondary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
/* Muted - Subtle backgrounds */
|
|
--muted: 210 40% 96.1%;
|
|
--muted-foreground: 215.4 16.3% 46.9%;
|
|
|
|
/* Accent - Highlight color */
|
|
--accent: 210 40% 96.1%;
|
|
--accent-foreground: 222.2 47.4% 11.2%;
|
|
|
|
/* Destructive - Error/danger states */
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
/* Success - Positive states */
|
|
--success: 142 76% 36%;
|
|
--success-foreground: 210 40% 98%;
|
|
|
|
/* Warning - Caution states */
|
|
--warning: 38 92% 50%;
|
|
--warning-foreground: 0 0% 0%;
|
|
|
|
/* Info - Informational states */
|
|
--info: 199 89% 48%;
|
|
--info-foreground: 210 40% 98%;
|
|
|
|
/* Border and input */
|
|
--border: 214.3 31.8% 91.4%;
|
|
--input: 214.3 31.8% 91.4%;
|
|
|
|
/* Focus ring */
|
|
--ring: 227 44% 52%;
|
|
|
|
/* ============================================
|
|
* Spacing & Sizing
|
|
* ============================================ */
|
|
|
|
--radius: 0.5rem;
|
|
--radius-sm: calc(var(--radius) - 4px);
|
|
--radius-md: calc(var(--radius) - 2px);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) + 4px);
|
|
|
|
/* Spacing unit (4px base) */
|
|
--spacing-1: 0.25rem;
|
|
--spacing-2: 0.5rem;
|
|
--spacing-3: 0.75rem;
|
|
--spacing-4: 1rem;
|
|
--spacing-5: 1.25rem;
|
|
--spacing-6: 1.5rem;
|
|
--spacing-8: 2rem;
|
|
--spacing-10: 2.5rem;
|
|
--spacing-12: 3rem;
|
|
|
|
/* ============================================
|
|
* Typography
|
|
* ============================================ */
|
|
|
|
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, 'Courier New', monospace;
|
|
|
|
--text-xs: 0.75rem;
|
|
--text-sm: 0.875rem;
|
|
--text-base: 1rem;
|
|
--text-lg: 1.125rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.5rem;
|
|
--text-3xl: 1.875rem;
|
|
|
|
--font-normal: 400;
|
|
--font-medium: 500;
|
|
--font-semibold: 600;
|
|
--font-bold: 700;
|
|
|
|
--leading-tight: 1.25;
|
|
--leading-normal: 1.5;
|
|
--leading-relaxed: 1.625;
|
|
|
|
/* ============================================
|
|
* Shadows
|
|
* ============================================ */
|
|
|
|
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
|
--shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
|
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
|
|
/* ============================================
|
|
* Transitions
|
|
* ============================================ */
|
|
|
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
/* ============================================
|
|
* Z-Index Scale
|
|
* ============================================ */
|
|
|
|
--z-dropdown: 50;
|
|
--z-sticky: 100;
|
|
--z-modal: 200;
|
|
--z-popover: 300;
|
|
--z-tooltip: 400;
|
|
--z-toast: 500;
|
|
}
|
|
|
|
/* ============================================
|
|
* Dark Mode
|
|
* ============================================ */
|
|
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
/* Background and foreground */
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
|
|
/* Card */
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
|
|
/* Popover/Dropdown */
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
|
|
/* Primary */
|
|
--primary: 227 44% 52%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
|
|
/* Secondary */
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
|
|
/* Muted */
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
|
|
/* Accent */
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
|
|
/* Destructive */
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
|
|
/* Success */
|
|
--success: 142 76% 26%;
|
|
--success-foreground: 210 40% 98%;
|
|
|
|
/* Warning */
|
|
--warning: 38 92% 40%;
|
|
--warning-foreground: 0 0% 100%;
|
|
|
|
/* Info */
|
|
--info: 199 89% 38%;
|
|
--info-foreground: 210 40% 98%;
|
|
|
|
/* Border and input */
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
|
|
/* Focus ring */
|
|
--ring: 227 44% 52%;
|
|
}
|
|
|
|
/* ============================================
|
|
* Semantic Color Classes
|
|
* ============================================ */
|
|
|
|
.bg-background { background-color: hsl(var(--background)); }
|
|
.bg-foreground { background-color: hsl(var(--foreground)); }
|
|
.bg-card { background-color: hsl(var(--card)); }
|
|
.bg-primary { background-color: hsl(var(--primary)); }
|
|
.bg-secondary { background-color: hsl(var(--secondary)); }
|
|
.bg-muted { background-color: hsl(var(--muted)); }
|
|
.bg-accent { background-color: hsl(var(--accent)); }
|
|
.bg-destructive { background-color: hsl(var(--destructive)); }
|
|
|
|
.text-foreground { color: hsl(var(--foreground)); }
|
|
.text-primary { color: hsl(var(--primary)); }
|
|
.text-secondary { color: hsl(var(--secondary-foreground)); }
|
|
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
|
|
.text-destructive { color: hsl(var(--destructive)); }
|
|
|
|
.border-border { border-color: hsl(var(--border)); }
|
|
.border-primary { border-color: hsl(var(--primary)); }
|
|
.border-input { border-color: hsl(var(--input)); }
|
|
|
|
/* ============================================
|
|
* Utility Classes
|
|
* ============================================ */
|
|
|
|
/* Focus ring */
|
|
.focus-ring:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Button base styles */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--spacing-2) var(--spacing-4);
|
|
font-size: var(--text-sm);
|
|
font-weight: var(--font-medium);
|
|
border-radius: var(--radius);
|
|
transition: all var(--transition-fast);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.btn:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: hsl(var(--primary) / 0.9);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: hsl(var(--secondary));
|
|
color: hsl(var(--secondary-foreground));
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: hsl(var(--secondary) / 0.8);
|
|
}
|
|
|
|
.btn-destructive {
|
|
background-color: hsl(var(--destructive));
|
|
color: hsl(var(--destructive-foreground));
|
|
}
|
|
|
|
.btn-destructive:hover {
|
|
background-color: hsl(var(--destructive) / 0.9);
|
|
}
|
|
|
|
.btn-ghost {
|
|
background-color: transparent;
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background-color: hsl(var(--accent));
|
|
}
|
|
|
|
.btn-outline {
|
|
background-color: transparent;
|
|
border: 1px solid hsl(var(--border));
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background-color: hsl(var(--accent));
|
|
color: hsl(var(--accent-foreground));
|
|
}
|
|
|
|
/* Badge styles */
|
|
.badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--spacing-1) var(--spacing-2);
|
|
font-size: var(--text-xs);
|
|
font-weight: var(--font-medium);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.badge-primary {
|
|
background-color: hsl(var(--primary));
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
.badge-secondary {
|
|
background-color: hsl(var(--secondary));
|
|
color: hsl(var(--secondary-foreground));
|
|
}
|
|
|
|
.badge-destructive {
|
|
background-color: hsl(var(--destructive));
|
|
color: hsl(var(--destructive-foreground));
|
|
}
|
|
|
|
/* Input styles */
|
|
.input {
|
|
display: flex;
|
|
width: 100%;
|
|
padding: var(--spacing-2) var(--spacing-3);
|
|
font-size: var(--text-sm);
|
|
border: 1px solid hsl(var(--input));
|
|
border-radius: var(--radius);
|
|
background-color: hsl(var(--background));
|
|
color: hsl(var(--foreground));
|
|
transition: border-color var(--transition-fast);
|
|
}
|
|
|
|
.input:focus-visible {
|
|
outline: 2px solid hsl(var(--ring));
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.input::placeholder {
|
|
color: hsl(var(--muted-foreground));
|
|
}
|