/**
* Collabstr Design System
* =======================
*
* This is the main entry point for the design system.
* Import this file to get all design system styles.
*
* Usage in Django templates:
*
*
* Or import specific parts as needed:
* @import './tokens/_colors.css';
* @import './components/buttons/_button.css';
*
* Structure:
* 1. Tokens - Design tokens (colors, typography, spacing, etc.)
* 2. Foundations - Base styles and utilities
* 3. Layouts - Grid systems, containers, flexbox utilities
* 4. Components - Reusable UI components
*/
/* ==========================================================================
TOKENS
Design tokens define the visual language: colors, typography, spacing, etc.
These MUST be loaded first as other files depend on them.
========================================================================== */
/* --- ./tokens/_index.css --- */
/**
* Design System Tokens
* ====================
*
* Design tokens define the visual language of the design system.
* These are the foundational values that all components build upon.
*
* IMPORTANT: Tokens must be loaded before any other design system files.
*/
/* --- ./_colors.css --- */
/**
* Design System - Color Tokens
*
* This file imports all color tokens from the organized color modules.
* For direct imports, use the individual files in the colors/ directory.
*
* Structure:
* - colors/_legacy.css - Backwards compatibility aliases
* - colors/_primitives.css - Raw color scales
* - colors/_platforms.css - Social media brand colors
* - colors/_semantic.css - Purpose-based semantic tokens
*/
/* --- ./colors/_index.css --- */
/**
* Design System - Color Tokens Index
*
* Imports all color token files in the correct order.
*
* Load Order:
* 1. Legacy - Old variable names for backwards compatibility
* 2. Primitives - Raw color scales (must be loaded before semantic)
* 3. Platforms - Social media brand colors
* 4. Semantic - Purpose-based tokens that reference primitives
*/
/* --- ./_legacy.css --- */
/**
* Design System - Legacy Color Tokens
*
* Backwards compatibility aliases for existing codebase.
* These map old variable names to new token values.
*
* DEPRECATION NOTICE: These are maintained for compatibility.
* New code should use the semantic tokens from _semantic.css
*/
:root {
/* ==========================================================================
LEGACY BASIC COLORS
========================================================================== */
--black: #222;
--lightGray: rgb(151, 163, 197);
--green: #d6efe2;
--red: #feedf2;
--orange: #fbebd9;
--blue: #eaeeff;
--collabstrDark: #FF899B;
/* ==========================================================================
LEGACY GRAY SCALE (PascalCase)
Maps to new kebab-case tokens
========================================================================== */
--Gray-100: var(--gray-100);
--Gray-200: var(--gray-200);
--Gray-300: var(--gray-300);
--Gray-400: var(--gray-400);
--Gray-500: var(--gray-500);
--Gray-600: var(--gray-600);
--Gray-700: var(--gray-700);
--Gray-800: var(--gray-800);
/* ==========================================================================
LEGACY INDIGO
========================================================================== */
--Indigo-50: var(--indigo-50);
/* ==========================================================================
LEGACY STATUS
========================================================================== */
--Success-500: var(--green-500);
/* Error with -main suffix (legacy inconsistency) */
--error-600-main: var(--red-600);
/* ==========================================================================
LEGACY BRAND COLORS
These are now defined in _primitives.css, aliased here for reference
========================================================================== */
/* ==========================================================================
LEGACY GRADIENT
========================================================================== */
--gradientText: linear-gradient(
90deg,
rgb(255 132 160) 0%,
rgb(251 102 157) 20%,
rgb(179 45 194) 95%,
rgb(136, 95, 183) 100%
);
}
/* --- ./_primitives.css --- */
/**
* Design System - Primitive Color Tokens
*
* Raw color scales that define the color palette.
* These are the building blocks for semantic tokens.
*/
:root {
/* ==========================================================================
BRAND PRIMARY (Pink)
========================================================================== */
--pink-25: #FFF8F6;
--pink-50: #FFF2F0;
--pink-100: #FFE7E6;
--pink-200: #FDC7D3;
--pink-300: #FFA8B6;
--pink-400: #FF84A0;
--pink-500: #FB669D;
--pink-600: #FF4C8E;
--pink-700: #FF2A79;
--pink-800: #FF0471;
--pink-900: #FF0091;
/* ==========================================================================
BRAND SECONDARY (Purple)
========================================================================== */
--brand-purple-400: #885FB7;
--brand-purple-500: #B32DC2;
--brand-purple-600: #9A25A6;
/* ==========================================================================
GRAY SCALE
========================================================================== */
--gray-25: #FDFDFD;
--gray-50: #FAFAFA;
--gray-100: #F5F5F5;
--gray-200: #E9EAEB;
--gray-300: #D5D7DA;
--gray-400: #A4A7AE;
--gray-500: #717680;
--gray-600: #535862;
--gray-700: #414651;
--gray-800: #252B37;
--gray-900: #181D27;
/* ==========================================================================
YELLOW
========================================================================== */
--yellow-25: #FFF9D5;
--yellow-50: #FEF3AA;
--yellow-100: #FFF29A;
--yellow-200: #FEED80;
--yellow-300: #FEE880;
--yellow-400: #FEE480;
--yellow-500: #FEDD80;
--yellow-600: #FED164;
--yellow-700: #FFC02D;
--yellow-800: #F8B20E;
--yellow-900: #E5A000;
/* ==========================================================================
BLUE
========================================================================== */
--blue-25: #F5FAFF;
--blue-50: #EFF8FF;
--blue-100: #D1E9FF;
--blue-200: #B2DDFF;
--blue-300: #84CAFF;
--blue-400: #53B1FD;
--blue-500: #2E90FA;
--blue-600: #1570EF;
--blue-700: #175CD3;
--blue-800: #1849A9;
--blue-900: #194185;
/* ==========================================================================
INDIGO
========================================================================== */
--indigo-25: #F5F8FF;
--indigo-50: #EEF4FF;
--indigo-100: #E0EAFF;
--indigo-200: #C7D7FE;
--indigo-300: #A4BCFD;
--indigo-400: #8098F9;
--indigo-500: #6172F3;
--indigo-600: #444CE7;
--indigo-700: #3538CD;
--indigo-800: #2D31A6;
--indigo-900: #2D3282;
/* ==========================================================================
PURPLE
========================================================================== */
--purple-25: #FAFAFF;
--purple-50: #F4F3FF;
--purple-100: #EBE9FE;
--purple-200: #D9D6FE;
--purple-300: #BDB4FE;
--purple-400: #9B8AFB;
--purple-500: #7A5AF8;
--purple-600: #6938EF;
--purple-700: #5925DC;
--purple-800: #4A1FB8;
--purple-900: #3E1C96;
/* ==========================================================================
GREEN
========================================================================== */
--green-25: #F6FEF9;
--green-50: #ECFDF3;
--green-100: #D1FADF;
--green-200: #A6F4C5;
--green-300: #6CE9A6;
--green-400: #32D583;
--green-500: #12B76A;
--green-600: #039855;
--green-700: #027A48;
--green-800: #05603A;
--green-900: #054F31;
/* ==========================================================================
ORANGE
========================================================================== */
--orange-25: #FFFAF5;
--orange-50: #FFF6ED;
--orange-100: #FFEAD5;
--orange-200: #FDDCAB;
--orange-300: #FEB273;
--orange-400: #FD853A;
--orange-500: #FB6514;
--orange-600: #EC4A0A;
--orange-700: #C4320A;
--orange-800: #9C2A10;
--orange-900: #7E2410;
/* ==========================================================================
RED
========================================================================== */
--red-25: #FFFBFA;
--red-50: #FEF3F2;
--red-100: #FEE4E2;
--red-200: #FECDCA;
--red-300: #FDA29B;
--red-400: #F97066;
--red-500: #F04438;
--red-600: #D92D20;
--red-700: #B42318;
--red-800: #912018;
--red-900: #7A271A;
/* ==========================================================================
BLACK & WHITE
========================================================================== */
--bw-black: #333;
--bw-white: #FFF;
}
/* --- ./_platforms.css --- */
/**
* Design System - Platform Color Tokens
*
* Brand colors for social media and third-party platforms.
*/
:root {
/* ==========================================================================
SOCIAL MEDIA PLATFORMS
========================================================================== */
--instagram: #d756ff;
--tiktok: #ff5fa3;
--youtube: #ff3232;
--twitter: #1DA1F2;
--twitch: #9146FF;
--amazon: #FF9900;
--ugc: #222;
/* ==========================================================================
SEMANTIC PLATFORM ALIASES (--color-platform-* prefix)
========================================================================== */
--color-platform-instagram: var(--instagram);
--color-platform-tiktok: var(--tiktok);
--color-platform-youtube: var(--youtube);
--color-platform-twitter: var(--twitter);
--color-platform-twitch: var(--twitch);
--color-platform-amazon: var(--amazon);
--color-platform-ugc: var(--ugc);
}
/* --- ./_semantic.css --- */
/**
* Design System - Semantic Color Tokens
*
* Purpose-based color tokens that reference primitives.
* Use these in components for consistent theming.
*/
:root {
/* ==========================================================================
SEMANTIC COLOR ALIASES (--color-* prefix)
Canonical naming pattern: --color-{category}-{variant}
========================================================================== */
/* Brand Colors */
--color-brand-25: var(--pink-25);
--color-brand-50: var(--pink-50);
--color-brand-100: var(--pink-100);
--color-brand-200: var(--pink-200);
--color-brand-300: var(--pink-300);
--color-brand-400: var(--pink-400);
--color-brand-500: var(--pink-500);
--color-brand-600: var(--pink-600);
--color-brand-700: var(--pink-700);
--color-brand-800: var(--pink-800);
--color-brand-900: var(--pink-900);
--color-brand-gradient: var(--gradientText);
/* Brand Purple */
--color-brand-purple-400: var(--brand-purple-400);
--color-brand-purple-500: var(--brand-purple-500);
--color-brand-purple-600: var(--brand-purple-600);
/* Neutral (Gray) */
--color-neutral-50: var(--gray-50);
--color-neutral-100: var(--gray-100);
--color-neutral-200: var(--gray-200);
--color-neutral-300: var(--gray-300);
--color-neutral-400: var(--gray-400);
--color-neutral-500: var(--gray-500);
--color-neutral-600: var(--gray-600);
--color-neutral-700: var(--gray-700);
--color-neutral-800: var(--gray-800);
--color-neutral-900: var(--gray-900);
/* Text */
--color-text-default: var(--bw-black);
--color-text-subtle: var(--gray-600);
--color-text-subtlest: var(--gray-500);
--color-text-placeholder: var(--gray-400);
--color-text-disabled: var(--gray-300);
--color-text-inverse: var(--bw-white);
--color-text-brand: var(--pink-500);
--color-text-success: var(--green-700);
--color-text-error: var(--red-600);
--color-text-warning: var(--orange-600);
--color-text-info: var(--blue-700);
/* Background */
--color-bg-primary: var(--bw-white);
--color-bg-secondary: var(--gray-100);
--color-bg-tertiary: var(--gray-200);
--color-bg-inverse: var(--bw-black);
--color-bg-brand: var(--pink-500);
--color-bg-brand-subtle: var(--pink-50);
--color-bg-success: color-mix(in srgb, var(--green-700) 8%, transparent);
--color-bg-error: color-mix(in srgb, var(--red-600) 8%, transparent);
--color-bg-warning: color-mix(in srgb, var(--orange-600) 8%, transparent);
--color-bg-info: color-mix(in srgb, var(--blue-700) 8%, transparent);
/* Border */
--color-border-default: var(--gray-300);
--color-border-subtle: var(--gray-200);
--color-border-strong: var(--gray-700);
--color-border-brand: var(--pink-400);
--color-border-error: var(--red-600);
--color-border-success: var(--green-700);
--color-border-warning: var(--orange-300);
--color-border-info: var(--blue-300);
/* Error */
--color-error-25: var(--red-25);
--color-error-50: var(--red-50);
--color-error-100: var(--red-100);
--color-error-200: var(--red-200);
--color-error-300: var(--red-300);
--color-error-400: var(--red-400);
--color-error-500: var(--red-500);
--color-error-600: var(--red-600);
--color-error-700: var(--red-700);
--color-error-800: var(--red-800);
--color-error-900: var(--red-900);
/* Success */
--color-success-25: var(--green-25);
--color-success-50: var(--green-50);
--color-success-100: var(--green-100);
--color-success-200: var(--green-200);
--color-success-300: var(--green-300);
--color-success-400: var(--green-400);
--color-success-500: var(--green-500);
--color-success-600: var(--green-600);
--color-success-700: var(--green-700);
--color-success-800: var(--green-800);
--color-success-900: var(--green-900);
/* Warning */
--color-warning-25: var(--orange-25);
--color-warning-50: var(--orange-50);
--color-warning-100: var(--orange-100);
--color-warning-200: var(--orange-200);
--color-warning-300: var(--orange-300);
--color-warning-400: var(--orange-400);
--color-warning-500: var(--orange-500);
--color-warning-600: var(--orange-600);
--color-warning-700: var(--orange-700);
--color-warning-800: var(--orange-800);
--color-warning-900: var(--orange-900);
/* Info */
--color-info-25: var(--blue-25);
--color-info-50: var(--blue-50);
--color-info-100: var(--blue-100);
--color-info-200: var(--blue-200);
--color-info-300: var(--blue-300);
--color-info-400: var(--blue-400);
--color-info-500: var(--blue-500);
--color-info-600: var(--blue-600);
--color-info-700: var(--blue-700);
--color-info-800: var(--blue-800);
--color-info-900: var(--blue-900);
/* ==========================================================================
ICON COLORS
Semantic colors for icon elements across contexts
========================================================================== */
--color-icon-primary: var(--gray-700);
--color-icon-secondary: var(--gray-500);
--color-icon-tertiary: var(--gray-400);
--color-icon-inverse: var(--bw-white);
--color-icon-brand: var(--pink-500);
--color-icon-success: var(--green-600);
--color-icon-warning: var(--orange-600);
--color-icon-error: var(--red-600);
--color-icon-info: var(--blue-700);
/* ==========================================================================
INTERACTIVE STATE COLORS
Colors for hover, active, and selected states on interactive elements
========================================================================== */
--color-interactive-hover: var(--gray-50);
--color-interactive-active: var(--gray-100);
--color-interactive-selected: var(--pink-50);
--color-interactive-selected-hover: var(--pink-100);
/* ==========================================================================
OVERLAY COLORS
Colors for modal backdrops and overlay layers
========================================================================== */
--color-overlay: rgba(0, 0, 0, 0.5);
--color-overlay-light: rgba(0, 0, 0, 0.2);
/* ==========================================================================
COMPONENT TOKENS
Per-component semantic variables so colors can be overridden at theme level.
Reference these in component CSS instead of hardcoding color values.
========================================================================== */
/* Cards */
--card-bg: var(--bw-white);
--card-bg-footer: var(--color-bg-secondary);
--card-border: var(--color-border-default);
--card-shadow: var(--shadow-md);
/* Modals */
--modal-bg: var(--bw-white);
--modal-backdrop: var(--color-overlay);
--modal-shadow: var(--shadow-xl);
/* Inputs */
--input-bg: var(--bw-white);
--input-border: var(--color-border-default);
--input-border-focus: var(--color-border-strong);
--input-color: var(--color-text-default);
--input-placeholder: var(--color-text-placeholder);
--input-bg-disabled: var(--color-neutral-100);
--input-border-error: var(--color-border-error);
--input-border-success: var(--color-border-success);
--input-border-disabled: var(--color-border-subtle);
/* Toasts */
--toast-bg: var(--bw-white);
--toast-shadow: var(--shadow-xl);
/* Navigation */
--nav-bg: var(--color-bg-primary);
--nav-item-color: var(--color-text-subtle);
--nav-item-color-active: var(--color-text-default);
--nav-item-bg-hover: var(--color-bg-secondary);
--nav-item-bg-active: var(--color-bg-brand-subtle);
--nav-item-border-active: var(--color-brand-500);
/* Tables */
--table-bg: var(--color-bg-primary);
--table-bg-header: var(--color-bg-secondary);
--table-bg-row-hover: var(--color-bg-secondary);
--table-bg-row-stripe: var(--gray-50);
--table-border: var(--color-border-subtle);
--table-text-header: var(--color-text-subtlest);
/* Dropdowns */
--dropdown-bg: var(--color-bg-primary);
--dropdown-border: var(--color-border-default);
--dropdown-shadow: var(--shadow-lg);
--dropdown-item-color: var(--color-text-default);
--dropdown-item-bg-hover: var(--color-bg-secondary);
--dropdown-item-bg-active:var(--color-bg-secondary);
/* Tooltips */
--tooltip-bg: var(--gray-900);
--tooltip-color: var(--bw-white);
--tooltip-shadow: var(--shadow-md);
/* Tabs */
--tab-color: var(--color-text-subtle);
--tab-color-active: var(--color-text-default);
--tab-border-active: var(--color-brand-500);
--tab-bg-hover: var(--color-bg-secondary);
}
/* --- ./_typography.css --- */
/**
* Design System - Typography Tokens
*
* This file defines all typography tokens for the Collabstr design system.
*/
:root {
/* ==========================================================================
FONT FAMILY
========================================================================== */
--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-family-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Consolas', monospace;
/* ==========================================================================
FONT SIZE
Using a modular scale (1.125 ratio) with 16px base
========================================================================== */
--font-size-2xs: 0.625rem; /* 10px */
--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.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 3.75rem; /* 60px */
--font-size-7xl: 4.5rem; /* 72px */
/* ==========================================================================
FONT WEIGHT
========================================================================== */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
/* ==========================================================================
LINE HEIGHT
========================================================================== */
--line-height-none: 1;
--line-height-tight: 1.25;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 2;
/* ==========================================================================
LETTER SPACING
========================================================================== */
--letter-spacing-tighter: -0.05em;
--letter-spacing-tight: -0.025em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.025em;
--letter-spacing-wider: 0.05em;
--letter-spacing-widest: 0.1em;
/* ==========================================================================
TYPOGRAPHY PRESETS
Combine size, weight, and line-height for common text styles
========================================================================== */
/* Display - Large hero text */
--text-display-lg: var(--font-weight-bold) var(--font-size-6xl)/var(--line-height-tight) var(--font-family-base);
--text-display-md: var(--font-weight-bold) var(--font-size-5xl)/var(--line-height-tight) var(--font-family-base);
--text-display-sm: var(--font-weight-bold) var(--font-size-4xl)/var(--line-height-tight) var(--font-family-base);
/* Headings */
--text-heading-xl: var(--font-weight-semibold) var(--font-size-3xl)/var(--line-height-tight) var(--font-family-base);
--text-heading-lg: var(--font-weight-semibold) var(--font-size-2xl)/var(--line-height-tight) var(--font-family-base);
--text-heading-md: var(--font-weight-semibold) var(--font-size-xl)/var(--line-height-snug) var(--font-family-base);
--text-heading-sm: var(--font-weight-semibold) var(--font-size-lg)/var(--line-height-snug) var(--font-family-base);
--text-heading-xs: var(--font-weight-semibold) var(--font-size-base)/var(--line-height-snug) var(--font-family-base);
/* Body */
--text-body-lg: var(--font-weight-normal) var(--font-size-lg)/var(--line-height-relaxed) var(--font-family-base);
--text-body-md: var(--font-weight-normal) var(--font-size-base)/var(--line-height-relaxed) var(--font-family-base);
--text-body-sm: var(--font-weight-normal) var(--font-size-sm)/var(--line-height-normal) var(--font-family-base);
/* Labels & Captions */
--text-label-lg: var(--font-weight-medium) var(--font-size-sm)/var(--line-height-normal) var(--font-family-base);
--text-label-md: var(--font-weight-medium) var(--font-size-xs)/var(--line-height-normal) var(--font-family-base);
--text-label-sm: var(--font-weight-medium) var(--font-size-2xs)/var(--line-height-normal) var(--font-family-base);
--text-caption: var(--font-weight-normal) var(--font-size-xs)/var(--line-height-normal) var(--font-family-base);
}
/* --- ./_spacing.css --- */
/**
* Design System - Spacing Tokens
*
* This file defines all spacing tokens for the Collabstr design system.
* Based on a 4px base unit for consistent vertical rhythm.
*/
:root {
/* ==========================================================================
SPACING SCALE
Base unit: 4px (0.25rem)
========================================================================== */
--space-0: 0;
--space-px: 1px;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px */
--space-2: 0.5rem; /* 8px */
--space-2-5: 0.625rem; /* 10px */
--space-3: 0.75rem; /* 12px */
--space-3-5: 0.875rem; /* 14px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-7: 1.75rem; /* 28px */
--space-8: 2rem; /* 32px */
--space-9: 2.25rem; /* 36px */
--space-10: 2.5rem; /* 40px */
--space-11: 2.75rem; /* 44px */
--space-12: 3rem; /* 48px */
--space-14: 3.5rem; /* 56px */
--space-16: 4rem; /* 64px */
--space-18: 4.5rem; /* 72px */
--space-19: 4.75rem; /* 76px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--space-28: 7rem; /* 112px */
--space-32: 8rem; /* 128px */
--space-36: 9rem; /* 144px */
--space-40: 10rem; /* 160px */
--space-44: 11rem; /* 176px */
--space-48: 12rem; /* 192px */
--space-52: 13rem; /* 208px */
--space-56: 14rem; /* 224px */
--space-60: 15rem; /* 240px */
--space-64: 16rem; /* 256px */
--space-72: 18rem; /* 288px */
--space-80: 20rem; /* 320px */
--space-96: 24rem; /* 384px */
/* ==========================================================================
SEMANTIC SPACING
Named tokens for common use cases
========================================================================== */
/* Component internal padding */
--space-component-xs: var(--space-1); /* 4px - tight elements */
--space-component-sm: var(--space-2); /* 8px - small components */
--space-component-md: var(--space-3); /* 12px - medium components */
--space-component-lg: var(--space-4); /* 16px - large components */
--space-component-xl: var(--space-6); /* 24px - extra large components */
/* Section spacing */
--space-section-xs: var(--space-8); /* 32px */
--space-section-sm: var(--space-12); /* 48px */
--space-section-md: var(--space-16); /* 64px */
--space-section-lg: var(--space-24); /* 96px */
--space-section-xl: var(--space-32); /* 128px */
/* Gap between elements */
--space-gap-xs: var(--space-1); /* 4px */
--space-gap-sm: var(--space-2); /* 8px */
--space-gap-md: var(--space-4); /* 16px */
--space-gap-lg: var(--space-6); /* 24px */
--space-gap-xl: var(--space-8); /* 32px */
/* ==========================================================================
SIZING
Common width/height values
========================================================================== */
--size-0: 0;
--size-px: 1px;
--size-0-5: 0.125rem; /* 2px */
--size-1: 0.25rem; /* 4px */
--size-2: 0.5rem; /* 8px */
--size-3: 0.75rem; /* 12px */
--size-4: 1rem; /* 16px */
--size-5: 1.25rem; /* 20px */
--size-6: 1.5rem; /* 24px */
--size-8: 2rem; /* 32px */
--size-10: 2.5rem; /* 40px */
--size-12: 3rem; /* 48px */
--size-14: 3.5rem; /* 56px */
--size-16: 4rem; /* 64px */
--size-20: 5rem; /* 80px */
--size-24: 6rem; /* 96px */
--size-32: 8rem; /* 128px */
--size-40: 10rem; /* 160px */
--size-48: 12rem; /* 192px */
--size-56: 14rem; /* 224px */
--size-64: 16rem; /* 256px */
/* Percentage sizes */
--size-1-2: 50%;
--size-1-3: 33.333333%;
--size-2-3: 66.666667%;
--size-1-4: 25%;
--size-3-4: 75%;
--size-full: 100%;
--size-screen: 100vw;
--size-min: min-content;
--size-max: max-content;
--size-fit: fit-content;
}
/* --- ./_shadows.css --- */
/**
* Design System - Shadow Tokens
*
* This file defines all shadow/elevation tokens for the Collabstr design system.
* Legacy shadow names are preserved for backwards compatibility.
*/
:root {
/* ==========================================================================
LEGACY SHADOWS (preserved for backwards compatibility)
========================================================================== */
--lightBoxShadow: rgba(120, 120, 170, 0.15) 0 2px 16px 0;
--mediumBoxShadow: rgba(120, 120, 170, 0.2) 0 2px 10px 0;
--darkBoxShadow: rgba(120, 120, 170, 0.3) 0 2px 10px 0;
/* ==========================================================================
NEW SHADOW TOKENS
Semantic elevation scale from subtle to pronounced
========================================================================== */
/* No shadow */
--shadow-none: none;
/* Extra small - Subtle depth for small interactive elements */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
/* Small - Buttons, input focus states */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
0 1px 2px -1px rgba(0, 0, 0, 0.1);
/* Medium - Cards, dropdowns (maps to legacy lightBoxShadow) */
--shadow-md: var(--lightBoxShadow);
/* Large - Elevated cards, popovers */
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
/* Extra large - Modals, dialogs */
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* 2XL - Highest elevation (toasts, notifications) */
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Inner shadow - For inset effects */
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
/* ==========================================================================
COLORED SHADOWS
Brand-colored shadows for special emphasis
========================================================================== */
--shadow-brand-sm: 0 1px 3px 0 rgba(251, 102, 157, 0.2),
0 1px 2px -1px rgba(251, 102, 157, 0.2);
--shadow-brand-md: 0 4px 6px -1px rgba(251, 102, 157, 0.2),
0 2px 4px -2px rgba(251, 102, 157, 0.2);
--shadow-brand-lg: 0 10px 15px -3px rgba(251, 102, 157, 0.2),
0 4px 6px -4px rgba(251, 102, 157, 0.2);
/* ==========================================================================
FOCUS RINGS
Accessible focus indicators
========================================================================== */
--ring-offset-width: 2px;
--ring-offset-color: var(--bw-white);
--ring-width: 2px;
--ring-color: rgba(251, 102, 157, 0.5);
/* Focus ring shadow (combine with box-shadow) */
--shadow-focus-ring: 0 0 0 var(--ring-offset-width) var(--ring-offset-color),
0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) var(--ring-color);
--shadow-focus-ring-brand: 0 0 0 var(--ring-offset-width) var(--ring-offset-color),
0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) rgba(251, 102, 157, 0.5);
--shadow-focus-ring-error: 0 0 0 var(--ring-offset-width) var(--ring-offset-color),
0 0 0 calc(var(--ring-offset-width) + var(--ring-width)) rgba(239, 68, 68, 0.5);
}
/* --- ./_borders.css --- */
/**
* Design System - Border Tokens
*
* This file defines all border-related tokens for the Collabstr design system.
*/
:root {
/* ==========================================================================
BORDER RADIUS
========================================================================== */
--radius-none: 0;
--radius-xs: 0.125rem; /* 2px */
--radius-sm: 0.25rem; /* 4px */
--radius-md: 0.5rem; /* 8px - Default for most components */
--radius-lg: 0.75rem; /* 12px */
--radius-xl: 1rem; /* 16px */
--radius-2xl: 1.5rem; /* 24px */
--radius-3xl: 2rem; /* 32px */
--radius-full: 9999px; /* Fully rounded (pills, circles) */
/* ==========================================================================
BORDER WIDTH
========================================================================== */
--border-width-0: 0;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-4: 4px;
--border-width-8: 8px;
/* Semantic border widths */
--border-width-thin: var(--border-width-1);
--border-width-medium: var(--border-width-2);
--border-width-thick: var(--border-width-4);
/* ==========================================================================
BORDER STYLES (as complete border shorthand)
========================================================================== */
/* Default borders */
--border-default: var(--border-width-1) solid var(--gray-300);
--border-subtle: var(--border-width-1) solid var(--gray-200);
--border-strong: var(--border-width-1) solid var(--gray-400);
/* Brand borders */
--border-brand: var(--border-width-1) solid var(--pink-500);
--border-brand-strong: var(--border-width-2) solid var(--pink-500);
/* Status borders */
--border-success: var(--border-width-1) solid var(--green-500);
--border-warning: var(--border-width-1) solid var(--orange-500);
--border-error: var(--border-width-1) solid var(--red-500);
--border-info: var(--border-width-1) solid var(--info-500);
/* Focus/active borders */
--border-focus: var(--border-width-2) solid var(--pink-500);
/* ==========================================================================
OUTLINE
========================================================================== */
--outline-none: none;
--outline-default: 2px solid var(--gray-400);
--outline-brand: 2px solid var(--pink-500);
--outline-offset: 2px;
/* ==========================================================================
DIVIDER
========================================================================== */
--divider-color: var(--gray-200);
--divider-width: 1px;
}
/* --- ./_breakpoints.css --- */
/**
* Design System - Breakpoint Tokens
*
* This file defines responsive breakpoints for the Collabstr design system.
* Note: CSS custom properties can't be used in media queries directly,
* but these values serve as documentation and can be used in JavaScript.
*
* For actual media queries, use these values directly:
* @media (min-width: 640px) { ... } // sm
* @media (min-width: 768px) { ... } // md
* @media (min-width: 1024px) { ... } // lg
* @media (min-width: 1280px) { ... } // xl
* @media (min-width: 1536px) { ... } // 2xl
*/
:root {
/* ==========================================================================
BREAKPOINT VALUES
Mobile-first approach: styles apply from this width and up
========================================================================== */
/* Extra small (default) - 0px to 639px */
--breakpoint-xs: 0px;
/* Small - 640px and up (landscape phones, small tablets) */
--breakpoint-sm: 640px;
/* Medium - 768px and up (tablets) */
--breakpoint-md: 768px;
/* Large - 1024px and up (laptops, small desktops) */
--breakpoint-lg: 1024px;
/* Extra large - 1280px and up (desktops) */
--breakpoint-xl: 1280px;
/* 2X large - 1536px and up (large desktops) */
--breakpoint-2xl: 1536px;
/* ==========================================================================
CONTAINER MAX WIDTHS
Maximum width of content containers at each breakpoint
========================================================================== */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Default max content width (matches existing #content max-width) */
--container-max: 1600px;
/* ==========================================================================
CONTENT WIDTHS
Common content area widths
========================================================================== */
/* Narrow content (forms, auth pages) */
--content-narrow: 480px;
/* Medium content (articles, detail pages) */
--content-medium: 720px;
/* Wide content (dashboards, listings) */
--content-wide: 1200px;
/* Full content (max width) */
--content-full: var(--container-max);
}
/* ==========================================================================
MEDIA QUERY REFERENCE
Copy these for use in your stylesheets
==========================================================================
Mobile first (min-width):
--------------------------
@media (min-width: 640px) { } sm - Small devices
@media (min-width: 768px) { } md - Medium devices
@media (min-width: 1024px) { } lg - Large devices
@media (min-width: 1280px) { } xl - Extra large devices
@media (min-width: 1536px) { } 2xl - 2X large devices
Desktop first (max-width):
--------------------------
@media (max-width: 1535px) { } Below 2xl
@media (max-width: 1279px) { } Below xl
@media (max-width: 1023px) { } Below lg
@media (max-width: 767px) { } Below md
@media (max-width: 639px) { } Below sm (mobile only)
Legacy breakpoint (existing in codebase):
-----------------------------------------
@media (max-width: 800px) { } Mobile breakpoint
*/
/* --- ./_animations.css --- */
/**
* Design System - Animation Tokens
*
* This file defines all animation-related tokens for the Collabstr design system.
*/
:root {
/* ==========================================================================
DURATION
========================================================================== */
--duration-0: 0ms;
--duration-75: 75ms;
--duration-100: 100ms;
--duration-150: 150ms;
--duration-200: 200ms;
--duration-300: 300ms;
--duration-500: 500ms;
--duration-700: 700ms;
--duration-1000: 1000ms;
/* Semantic durations */
--duration-instant: var(--duration-75);
--duration-fast: var(--duration-150);
--duration-normal: var(--duration-300);
--duration-slow: var(--duration-500);
--duration-slower: var(--duration-700);
/* ==========================================================================
EASING FUNCTIONS
========================================================================== */
/* Linear */
--ease-linear: linear;
/* Standard easing */
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
/* Emphasized easing (more dramatic) */
--ease-in-emphasized: cubic-bezier(0.3, 0, 0.8, 0.15);
--ease-out-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
--ease-in-out-emphasized: cubic-bezier(0.83, 0, 0.17, 1);
/* Bounce/Spring */
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
/* Default (matches existing transition-duration: 0.3s in base.css) */
--ease-default: var(--ease-out);
/* ==========================================================================
TRANSITION PRESETS
Complete transition shorthand values
========================================================================== */
/* All properties */
--transition-all-fast: all var(--duration-fast) var(--ease-out);
--transition-all-normal: all var(--duration-normal) var(--ease-out);
--transition-all-slow: all var(--duration-slow) var(--ease-out);
/* Specific properties */
--transition-opacity: opacity var(--duration-normal) var(--ease-out);
--transition-transform: transform var(--duration-normal) var(--ease-out);
--transition-colors: background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
--transition-shadow: box-shadow var(--duration-fast) var(--ease-out);
/* Combined (common use cases) */
--transition-button: background-color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
--transition-input: border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
--transition-card: box-shadow var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out);
--transition-modal: opacity var(--duration-normal) var(--ease-out),
transform var(--duration-normal) var(--ease-out-emphasized);
}
/* ==========================================================================
KEYFRAME ANIMATIONS
========================================================================== */
/* Fade animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
/* Slide animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Scale animations */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes scaleOut {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.95);
}
}
/* Spin animation (loaders) */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Pulse animation */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Bounce animation */
@keyframes bounce {
0%, 100% {
transform: translateY(-5%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: translateY(0);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
/* Shake animation (errors) */
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
/* Shimmer animation (skeleton loading) */
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Ping animation (notifications) */
@keyframes ping {
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
:root {
/* Animation shorthand references */
--animate-fade-in: fadeIn var(--duration-normal) var(--ease-out);
--animate-fade-out: fadeOut var(--duration-normal) var(--ease-out);
--animate-slide-in-up: slideInUp var(--duration-normal) var(--ease-out);
--animate-slide-in-down: slideInDown var(--duration-normal) var(--ease-out);
--animate-scale-in: scaleIn var(--duration-normal) var(--ease-out);
--animate-scale-out: scaleOut var(--duration-normal) var(--ease-out);
--animate-spin: spin 1s linear infinite;
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
--animate-bounce: bounce 1s infinite;
--animate-shake: shake 0.5s ease-in-out;
--animate-shimmer: shimmer 1.5s infinite;
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* ==========================================================================
REDUCED MOTION
Respects the user's OS-level motion preference.
Collapses all durations to near-zero so transitions complete instantly
rather than removing them entirely, preserving state changes.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* --- ./_z-index.css --- */
/**
* Z-Index Tokens
* ==============
*
* Standardized z-index scale for consistent layering across the application.
* Use these tokens instead of arbitrary z-index values to prevent stacking conflicts.
*
* Scale:
* - Base (0-50): Default content, cards, relative positioning
* - Dropdown (100): Dropdowns, select menus, autocomplete
* - Sticky (200): Sticky headers, floating elements
* - Fixed (300): Fixed navigation, sidebars
* - Modal Backdrop (400): Modal overlays, dimmed backgrounds
* - Modal (500): Modal dialogs, drawers
* - Popover (600): Popovers, floating panels
* - Tooltip (700): Tooltips, hints
* - Toast (800): Toast notifications, snackbars
* - Max (9999): Reserved for edge cases
*
* Usage:
* .my-dropdown { z-index: var(--ds-z-dropdown); }
* .my-modal { z-index: var(--ds-z-modal); }
*/
:root {
/* ==========================================================================
Z-Index Scale
========================================================================== */
/* Base level - default stacking */
--ds-z-base: 0;
--ds-z-raised: 10;
/* Dropdown level - menus, selects, autocomplete */
--ds-z-dropdown: 100;
/* Sticky level - sticky headers, floating action buttons */
--ds-z-sticky: 200;
/* Fixed level - fixed navigation, persistent sidebars */
--ds-z-fixed: 300;
/* Modal backdrop - overlay behind modals */
--ds-z-modal-backdrop: 400;
/* Modal level - modal dialogs, drawers, bottom sheets */
--ds-z-modal: 500;
/* Popover level - popovers, floating panels, date pickers */
--ds-z-popover: 600;
/* Tooltip level - tooltips, hints */
--ds-z-tooltip: 700;
/* Toast level - notifications, snackbars, alerts */
--ds-z-toast: 800;
/* Maximum level - use sparingly for edge cases */
--ds-z-max: 9999;
/* ==========================================================================
Legacy Aliases (for backwards compatibility)
========================================================================== */
--zIndexDropdown: var(--ds-z-dropdown);
--zIndexSticky: var(--ds-z-sticky);
--zIndexFixed: var(--ds-z-fixed);
--zIndexModalBackdrop: var(--ds-z-modal-backdrop);
--zIndexModal: var(--ds-z-modal);
--zIndexPopover: var(--ds-z-popover);
--zIndexTooltip: var(--ds-z-tooltip);
--zIndexToast: var(--ds-z-toast);
}
/* ==========================================================================
FOUNDATIONS
Base styles and CSS reset. These establish baseline styling.
========================================================================== */
/* --- ./foundations/_index.css --- */
/**
* Design System Foundations
* =========================
*
* Base styles and utilities that establish baseline styling.
* These build upon tokens and provide foundational CSS.
*
* Contents:
* - Reset: CSS normalization (optional, uncomment if needed)
* - Base: Default element styling (headings, body text)
* - Utilities: Helper classes for common patterns
*/
/* Optional: Uncomment if you want the full CSS reset */
/* @import './_reset.css'; */
/* --- ./_base.css --- */
/**
* Design System - Base Element Styles
*
* Default styling for HTML elements using design tokens.
* These are optional enhancements - the existing base.css handles core styles.
*/
/* ==========================================================================
TYPOGRAPHY - HEADINGS
========================================================================== */
h1, .h1 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--color-text-default);
}
h2, .h2 {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text-default);
}
h3, .h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
color: var(--color-text-default);
}
h4, .h4 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-snug);
color: var(--color-text-default);
}
h5, .h5 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
color: var(--color-text-default);
}
h6, .h6 {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-normal);
color: var(--color-text-default);
}
/* ==========================================================================
TYPOGRAPHY - BODY TEXT
========================================================================== */
p {
color: var(--color-text-subtle);
line-height: var(--line-height-relaxed);
}
.lead {
font-size: var(--font-size-lg);
color: var(--color-text-subtle);
line-height: var(--line-height-relaxed);
}
small, .small {
font-size: var(--font-size-sm);
}
.text-xs {
font-size: var(--font-size-xs);
}
strong, b {
font-weight: var(--font-weight-semibold);
}
/* ==========================================================================
LINKS
========================================================================== */
a {
/* color: var(--color-brand-500); */
/* text-decoration: none; */
transition: var(--transition-colors);
}
a:hover {
/* color: var(--color-brand-600); */
}
a:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Muted links */
.link-muted {
color: var(--color-text-subtle);
}
.link-muted:hover {
color: var(--color-text-default);
}
/* ==========================================================================
LISTS
========================================================================== */
ul, ol {
padding-left: var(--space-6);
color: var(--color-text-subtle);
}
li {
margin-bottom: var(--space-2);
}
li::marker {
color: var(--color-neutral-400);
}
/* Unstyled list */
.list-none {
list-style: none;
padding-left: 0;
}
/* ==========================================================================
CODE
========================================================================== */
code {
font-family: var(--font-family-mono);
font-size: 0.875em;
background: var(--color-neutral-100);
padding: var(--space-0-5) var(--space-1);
border-radius: var(--radius-sm);
color: var(--color-brand-600);
}
pre {
font-family: var(--font-family-mono);
font-size: var(--font-size-sm);
background: var(--color-neutral-800);
color: var(--color-neutral-100);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
}
pre code {
background: transparent;
padding: 0;
color: inherit;
}
/* ==========================================================================
BLOCKQUOTE
========================================================================== */
blockquote {
border-left: 4px solid var(--color-brand-500);
padding-left: var(--space-4);
margin-left: 0;
font-style: italic;
color: var(--color-text-subtle);
}
/* ==========================================================================
HORIZONTAL RULE
========================================================================== */
hr {
border: none;
height: 1px;
background: var(--divider-color);
margin: var(--space-8) 0;
}
/* ==========================================================================
SELECTION
========================================================================== */
/* ::selection {
background: var(--color-brand-500);
color: white;
} */
/* ==========================================================================
FOCUS STYLES
========================================================================== */
:focus {
outline: none;
}
:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
}
/* ==========================================================================
GRADIENT TEXT UTILITY
(matches legacy gradientText variable)
========================================================================== */
.gradient-text {
background: var(--gradientText);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* --- ./_utilities.css --- */
/**
* Design System - Utility Classes
*
* Single-purpose utility classes for common styling needs.
* Use these for quick adjustments without writing custom CSS.
*/
/* ==========================================================================
DISPLAY
========================================================================== */
.hidden { display: none !important; }
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
/* ==========================================================================
FLEXBOX
========================================================================== */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.items-stretch { align-items: stretch; }
.items-baseline { align-items: baseline; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }
.flex-grow { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }
/* ==========================================================================
GAP
========================================================================== */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
/* ==========================================================================
MARGIN
========================================================================== */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
/* Margin - All sides */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-6 { margin: var(--space-6); }
.m-8 { margin: var(--space-8); }
/* Margin - Top */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
/* Margin - Right */
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
/* Margin - Bottom */
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
/* Margin - Left */
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }
/* ==========================================================================
PADDING
========================================================================== */
.p-0 { padding: 0; }
/* Padding - All sides */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-8 { padding: var(--space-8); }
/* Padding - Horizontal */
.px-1 { padding-left: var(--space-1); padding-right: var(--space-1); }
.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }
.px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
/* Padding - Vertical */
.py-1 { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-6 { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
/* ==========================================================================
WIDTH & HEIGHT
========================================================================== */
.w-full { width: 100%; }
.w-screen { width: 100vw; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.max-w-full { max-width: 100%; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.min-h-screen { min-height: 100vh; }
/* ==========================================================================
TEXT ALIGNMENT
========================================================================== */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }
/* ==========================================================================
TEXT SIZE
========================================================================== */
.text-2xs { font-size: var(--font-size-2xs); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-4xl { font-size: var(--font-size-4xl); }
.text-5xl { font-size: var(--font-size-5xl); }
/* ==========================================================================
FONT WEIGHT
========================================================================== */
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
/* ==========================================================================
TEXT COLOR
========================================================================== */
.text-primary { color: var(--color-text-default); }
.text-secondary { color: var(--color-text-subtle); }
.text-tertiary { color: var(--color-text-subtlest); }
.text-brand { color: var(--color-brand-500); }
.text-success { color: var(--color-success-500); }
.text-warning { color: var(--color-warning-500); }
.text-error { color: var(--color-error-500); }
.text-info { color: var(--color-info-500); }
.text-white { color: white; }
/* ==========================================================================
BACKGROUND COLOR
========================================================================== */
.bg-white { background-color: white; }
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-brand { background-color: var(--color-brand-500); }
.bg-brand-subtle { background-color: var(--color-bg-brand-subtle); }
.bg-success { background-color: var(--color-bg-success); }
.bg-warning { background-color: var(--color-bg-warning); }
.bg-error { background-color: var(--color-bg-error); }
.bg-info { background-color: var(--color-bg-info); }
.bg-transparent { background-color: transparent; }
/* ==========================================================================
BORDER RADIUS
========================================================================== */
.rounded-none { border-radius: var(--radius-none); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
/* ==========================================================================
SHADOWS
========================================================================== */
.shadow-none { box-shadow: var(--shadow-none); }
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
/* ==========================================================================
OVERFLOW
========================================================================== */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
/* ==========================================================================
POSITION
========================================================================== */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.static { position: static; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
/* ==========================================================================
Z-INDEX
========================================================================== */
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-auto { z-index: auto; }
/* ==========================================================================
CURSOR
========================================================================== */
.cursor-auto { cursor: auto; }
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.cursor-wait { cursor: wait; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }
/* ==========================================================================
POINTER EVENTS
========================================================================== */
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
/* ==========================================================================
USER SELECT
========================================================================== */
.select-none { user-select: none; }
.select-text { user-select: text; }
.select-all { user-select: all; }
.select-auto { user-select: auto; }
/* ==========================================================================
OPACITY
========================================================================== */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }
/* ==========================================================================
TRANSITIONS
========================================================================== */
.transition { transition: var(--transition-all-normal); }
.transition-fast { transition: var(--transition-all-fast); }
.transition-slow { transition: var(--transition-all-slow); }
.transition-none { transition: none; }
/* ==========================================================================
ANIMATIONS
========================================================================== */
.animate-spin { animation: var(--animate-spin); }
.animate-pulse { animation: var(--animate-pulse); }
.animate-bounce { animation: var(--animate-bounce); }
.animate-fade-in { animation: var(--animate-fade-in); }
/* ==========================================================================
TEXT UTILITIES
========================================================================== */
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.line-clamp-1 {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.line-clamp-3 {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.whitespace-normal { white-space: normal; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre { white-space: pre; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.break-words { word-wrap: break-word; overflow-wrap: break-word; }
.break-all { word-break: break-all; }
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }
/* ==========================================================================
BORDERS
========================================================================== */
.border { border: var(--border-default); }
.border-0 { border: none; }
.border-t { border-top: var(--border-default); }
.border-r { border-right: var(--border-default); }
.border-b { border-bottom: var(--border-default); }
.border-l { border-left: var(--border-default); }
.border-subtle { border-color: var(--Gray-200); }
.border-strong { border-color: var(--Gray-400); }
.border-brand { border-color: var(--pink-500); }
/* ==========================================================================
VISIBILITY
========================================================================== */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
/* ==========================================================================
SCREEN READER
========================================================================== */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.not-sr-only {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* ==========================================================================
TOOLTIP
========================================================================== */
/* tooltip */
.tooltip{
position: relative;
display: flex;
align-items: center;
cursor: pointer;
}
.tooltip .tooltip-txt{
visibility: hidden;
width: 230px;
background-color: var(--black);
color: white;
font-weight: 400;
text-align: center;
border-radius: 6px;
padding: 8px;
position: absolute;
z-index: 1;
top: 20px;
left: -115px;
font-size: 12px;
box-shadow: var(--lightBoxShadow);
}
.tooltip:hover .tooltip-txt{
visibility: visible;
}
.tooltip-img{
width: 12px;
height: 12px;
margin-left: 4px;
filter: brightness(0);
opacity: 0.7;
}
.no-fee{
color: #00a700;
}
.no-fee span{
color: #B0AFAF;
text-decoration: line-through;
margin-right: 5px;
}
/* ==========================================================================
LAYOUTS
Grid systems, containers, and layout utilities.
========================================================================== */
/* --- ./layouts/_index.css --- */
/**
* Design System Layouts
* =====================
*
* Layout utilities for page structure and component arrangement.
*
* Contents:
* - Container: Width-constrained content wrappers
* - Grid: CSS Grid-based layout system
* - Flex: Flexbox utilities
*/
/* --- ./_container.css --- */
/**
* Design System - Container Layout
*
* Content containers with max-width constraints.
* Compatible with existing #content styles.
*/
/* ==========================================================================
BASE CONTAINER
========================================================================== */
.ds-container {
width: 100%;
max-width: var(--container-max, 1600px);
margin-left: auto;
margin-right: auto;
padding-left: var(--space-4);
padding-right: var(--space-4);
}
/* ==========================================================================
CONTAINER SIZES
========================================================================== */
.ds-container--xs {
max-width: 480px;
}
.ds-container--sm {
max-width: 640px;
}
.ds-container--md {
max-width: 768px;
}
.ds-container--lg {
max-width: 1024px;
}
.ds-container--xl {
max-width: 1280px;
}
.ds-container--2xl {
max-width: 1536px;
}
.ds-container--full {
max-width: none;
}
/* ==========================================================================
CONTAINER PADDING VARIANTS
========================================================================== */
.ds-container--flush {
padding-left: 0;
padding-right: 0;
}
.ds-container--tight {
padding-left: var(--space-2);
padding-right: var(--space-2);
}
.ds-container--relaxed {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.ds-container--spacious {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
/* ==========================================================================
RESPONSIVE CONTAINER PADDING
========================================================================== */
@media (min-width: 640px) {
.ds-container {
padding-left: var(--space-6);
padding-right: var(--space-6);
}
}
@media (min-width: 1024px) {
.ds-container {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
}
/* ==========================================================================
SECTION CONTAINER
For full-width sections with centered content
========================================================================== */
.ds-section {
width: 100%;
padding-top: var(--space-section-md);
padding-bottom: var(--space-section-md);
}
.ds-section--sm {
padding-top: var(--space-section-sm);
padding-bottom: var(--space-section-sm);
}
.ds-section--lg {
padding-top: var(--space-section-lg);
padding-bottom: var(--space-section-lg);
}
.ds-section--xl {
padding-top: var(--space-section-xl);
padding-bottom: var(--space-section-xl);
}
/* Section backgrounds */
.ds-section--gray {
background: var(--color-bg-secondary);
}
.ds-section--dark {
background: var(--color-neutral-800);
color: white;
}
.ds-section--brand {
background: var(--color-brand-500);
color: white;
}
.ds-section--gradient {
background: var(--gradientText);
color: white;
}
/* ==========================================================================
PAGE WRAPPER
========================================================================== */
.ds-page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.ds-page__header {
flex-shrink: 0;
}
.ds-page__main {
flex: 1;
}
.ds-page__footer {
flex-shrink: 0;
}
/* ==========================================================================
CONTENT AREA
For the main content within a page
========================================================================== */
.ds-content {
padding-top: var(--space-6);
padding-bottom: var(--space-12);
}
.ds-content--flush {
padding-top: 0;
padding-bottom: 0;
}
/* ==========================================================================
PROSE / ARTICLE CONTAINER
Optimized for reading long-form content
========================================================================== */
.ds-prose {
max-width: 65ch;
margin-left: auto;
margin-right: auto;
}
.ds-prose > * + * {
margin-top: var(--space-4);
}
.ds-prose > h1 + *,
.ds-prose > h2 + *,
.ds-prose > h3 + * {
margin-top: var(--space-3);
}
.ds-prose > * + h1,
.ds-prose > * + h2,
.ds-prose > * + h3 {
margin-top: var(--space-8);
}
/* ==========================================================================
CENTERED CONTENT
========================================================================== */
.ds-center {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ds-center--horizontal {
flex-direction: row;
justify-content: center;
}
.ds-center--both {
justify-content: center;
}
/* --- ./_grid.css --- */
/**
* Design System - Grid Layout
*
* CSS Grid utilities for page layouts.
*/
/* ==========================================================================
GRID CONTAINER
========================================================================== */
.ds-grid {
display: grid;
gap: var(--space-4);
}
/* ==========================================================================
GRID COLUMNS
========================================================================== */
.ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ds-grid--cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
/* Auto-fill columns */
.ds-grid--auto-fit {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.ds-grid--auto-fill {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
/* Custom min widths for auto-fill */
.ds-grid--auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.ds-grid--auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ds-grid--auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
/* ==========================================================================
GRID GAP
========================================================================== */
.ds-grid--gap-0 { gap: 0; }
.ds-grid--gap-1 { gap: var(--space-1); }
.ds-grid--gap-2 { gap: var(--space-2); }
.ds-grid--gap-3 { gap: var(--space-3); }
.ds-grid--gap-4 { gap: var(--space-4); }
.ds-grid--gap-5 { gap: var(--space-5); }
.ds-grid--gap-6 { gap: var(--space-6); }
.ds-grid--gap-8 { gap: var(--space-8); }
.ds-grid--gap-10 { gap: var(--space-10); }
.ds-grid--gap-12 { gap: var(--space-12); }
/* Separate row/column gaps */
.ds-grid--gap-x-4 { column-gap: var(--space-4); }
.ds-grid--gap-x-6 { column-gap: var(--space-6); }
.ds-grid--gap-x-8 { column-gap: var(--space-8); }
.ds-grid--gap-y-4 { row-gap: var(--space-4); }
.ds-grid--gap-y-6 { row-gap: var(--space-6); }
.ds-grid--gap-y-8 { row-gap: var(--space-8); }
/* ==========================================================================
GRID ITEM SPAN
========================================================================== */
.ds-col-span-1 { grid-column: span 1 / span 1; }
.ds-col-span-2 { grid-column: span 2 / span 2; }
.ds-col-span-3 { grid-column: span 3 / span 3; }
.ds-col-span-4 { grid-column: span 4 / span 4; }
.ds-col-span-5 { grid-column: span 5 / span 5; }
.ds-col-span-6 { grid-column: span 6 / span 6; }
.ds-col-span-full { grid-column: 1 / -1; }
.ds-row-span-1 { grid-row: span 1 / span 1; }
.ds-row-span-2 { grid-row: span 2 / span 2; }
.ds-row-span-3 { grid-row: span 3 / span 3; }
.ds-row-span-full { grid-row: 1 / -1; }
/* ==========================================================================
GRID ALIGNMENT
========================================================================== */
/* Align items */
.ds-grid--items-start { align-items: start; }
.ds-grid--items-center { align-items: center; }
.ds-grid--items-end { align-items: end; }
.ds-grid--items-stretch { align-items: stretch; }
/* Justify items */
.ds-grid--justify-start { justify-items: start; }
.ds-grid--justify-center { justify-items: center; }
.ds-grid--justify-end { justify-items: end; }
.ds-grid--justify-stretch { justify-items: stretch; }
/* Place items (shorthand) */
.ds-grid--place-center { place-items: center; }
/* ==========================================================================
RESPONSIVE GRID
========================================================================== */
/* Medium screens and up (768px) */
@media (min-width: 768px) {
.md\:ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.md\:ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md\:ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.md\:ds-col-span-1 { grid-column: span 1 / span 1; }
.md\:ds-col-span-2 { grid-column: span 2 / span 2; }
.md\:ds-col-span-3 { grid-column: span 3 / span 3; }
.md\:ds-col-span-4 { grid-column: span 4 / span 4; }
}
/* Large screens and up (1024px) */
@media (min-width: 1024px) {
.lg\:ds-grid--cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.lg\:ds-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg\:ds-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lg\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lg\:ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lg\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lg\:ds-col-span-1 { grid-column: span 1 / span 1; }
.lg\:ds-col-span-2 { grid-column: span 2 / span 2; }
.lg\:ds-col-span-3 { grid-column: span 3 / span 3; }
.lg\:ds-col-span-4 { grid-column: span 4 / span 4; }
}
/* Extra large screens (1280px) */
@media (min-width: 1280px) {
.xl\:ds-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xl\:ds-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.xl\:ds-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ==========================================================================
COMMON GRID LAYOUTS
========================================================================== */
/* Sidebar layout */
.ds-grid--sidebar {
grid-template-columns: 280px 1fr;
}
.ds-grid--sidebar-right {
grid-template-columns: 1fr 280px;
}
@media (max-width: 1023px) {
.ds-grid--sidebar,
.ds-grid--sidebar-right {
grid-template-columns: 1fr;
}
}
/* Holy grail layout */
.ds-grid--holy-grail {
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
}
/* Dashboard layout */
.ds-grid--dashboard {
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr;
min-height: 100vh;
}
@media (max-width: 1023px) {
.ds-grid--dashboard {
grid-template-columns: 1fr;
}
}
/* --- ./_flex.css --- */
/**
* Design System - Flexbox Utilities
*
* Flexbox-based layout utilities for common patterns.
*/
/* ==========================================================================
FLEX CONTAINER
========================================================================== */
.ds-flex {
display: flex;
}
.ds-inline-flex {
display: inline-flex;
}
/* ==========================================================================
FLEX DIRECTION
========================================================================== */
.ds-flex--row { flex-direction: row; }
.ds-flex--row-reverse { flex-direction: row-reverse; }
.ds-flex--col { flex-direction: column; }
.ds-flex--col-reverse { flex-direction: column-reverse; }
/* ==========================================================================
FLEX WRAP
========================================================================== */
.ds-flex--wrap { flex-wrap: wrap; }
.ds-flex--nowrap { flex-wrap: nowrap; }
.ds-flex--wrap-reverse { flex-wrap: wrap-reverse; }
/* ==========================================================================
JUSTIFY CONTENT
========================================================================== */
.ds-flex--justify-start { justify-content: flex-start; }
.ds-flex--justify-center { justify-content: center; }
.ds-flex--justify-end { justify-content: flex-end; }
.ds-flex--justify-between { justify-content: space-between; }
.ds-flex--justify-around { justify-content: space-around; }
.ds-flex--justify-evenly { justify-content: space-evenly; }
/* ==========================================================================
ALIGN ITEMS
========================================================================== */
.ds-flex--items-start { align-items: flex-start; }
.ds-flex--items-center { align-items: center; }
.ds-flex--items-end { align-items: flex-end; }
.ds-flex--items-stretch { align-items: stretch; }
.ds-flex--items-baseline { align-items: baseline; }
/* ==========================================================================
ALIGN CONTENT
========================================================================== */
.ds-flex--content-start { align-content: flex-start; }
.ds-flex--content-center { align-content: center; }
.ds-flex--content-end { align-content: flex-end; }
.ds-flex--content-between { align-content: space-between; }
.ds-flex--content-around { align-content: space-around; }
/* ==========================================================================
GAP
========================================================================== */
.ds-flex--gap-0 { gap: 0; }
.ds-flex--gap-1 { gap: var(--space-1); }
.ds-flex--gap-2 { gap: var(--space-2); }
.ds-flex--gap-3 { gap: var(--space-3); }
.ds-flex--gap-4 { gap: var(--space-4); }
.ds-flex--gap-5 { gap: var(--space-5); }
.ds-flex--gap-6 { gap: var(--space-6); }
.ds-flex--gap-8 { gap: var(--space-8); }
.ds-flex--gap-10 { gap: var(--space-10); }
.ds-flex--gap-12 { gap: var(--space-12); }
/* ==========================================================================
FLEX ITEM PROPERTIES
========================================================================== */
.ds-flex-1 { flex: 1 1 0%; }
.ds-flex-auto { flex: 1 1 auto; }
.ds-flex-initial { flex: 0 1 auto; }
.ds-flex-none { flex: none; }
.ds-flex-grow { flex-grow: 1; }
.ds-flex-grow-0 { flex-grow: 0; }
.ds-flex-shrink { flex-shrink: 1; }
.ds-flex-shrink-0 { flex-shrink: 0; }
/* ==========================================================================
SELF ALIGNMENT
========================================================================== */
.ds-self-auto { align-self: auto; }
.ds-self-start { align-self: flex-start; }
.ds-self-center { align-self: center; }
.ds-self-end { align-self: flex-end; }
.ds-self-stretch { align-self: stretch; }
/* ==========================================================================
ORDER
========================================================================== */
.ds-order-first { order: -9999; }
.ds-order-last { order: 9999; }
.ds-order-none { order: 0; }
.ds-order-1 { order: 1; }
.ds-order-2 { order: 2; }
.ds-order-3 { order: 3; }
/* ==========================================================================
RESPONSIVE FLEX
========================================================================== */
@media (min-width: 768px) {
.md\:ds-flex--row { flex-direction: row; }
.md\:ds-flex--col { flex-direction: column; }
.md\:ds-flex--justify-start { justify-content: flex-start; }
.md\:ds-flex--justify-between { justify-content: space-between; }
.md\:ds-flex--items-center { align-items: center; }
.md\:ds-flex--gap-4 { gap: var(--space-4); }
.md\:ds-flex--gap-6 { gap: var(--space-6); }
}
@media (min-width: 1024px) {
.lg\:ds-flex--row { flex-direction: row; }
.lg\:ds-flex--col { flex-direction: column; }
.lg\:ds-flex--justify-between { justify-content: space-between; }
.lg\:ds-flex--gap-8 { gap: var(--space-8); }
}
/* ==========================================================================
COMMON FLEX PATTERNS
========================================================================== */
/* Stack - Vertical flex with gap */
.ds-stack {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.ds-stack--xs { gap: var(--space-1); }
.ds-stack--sm { gap: var(--space-2); }
.ds-stack--md { gap: var(--space-4); }
.ds-stack--lg { gap: var(--space-6); }
.ds-stack--xl { gap: var(--space-8); }
/* Cluster - Horizontal flex with wrap */
.ds-cluster {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
}
.ds-cluster--xs { gap: var(--space-1); }
.ds-cluster--sm { gap: var(--space-2); }
.ds-cluster--md { gap: var(--space-4); }
.ds-cluster--lg { gap: var(--space-6); }
/* Split - Two elements pushed to opposite ends */
.ds-split {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
}
/* Center - Perfectly centered content */
.ds-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
/* Inline - Horizontal inline elements with gap */
.ds-inline {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ds-inline--xs { gap: var(--space-1); }
.ds-inline--sm { gap: var(--space-2); }
.ds-inline--md { gap: var(--space-3); }
.ds-inline--lg { gap: var(--space-4); }
/* ==========================================================================
SPACER
Flexible spacer for pushing elements
========================================================================== */
.ds-spacer {
flex: 1 1 auto;
}
.ds-spacer--fixed-sm { flex: 0 0 var(--space-4); }
.ds-spacer--fixed-md { flex: 0 0 var(--space-8); }
.ds-spacer--fixed-lg { flex: 0 0 var(--space-12); }
/* ==========================================================================
COMPONENTS
Reusable UI components.
========================================================================== */
/* --- ./components/_index.css --- */
/**
* Design System Components
* ========================
*
* Reusable UI components built with design tokens.
* Each component is self-contained and follows the ds- naming convention.
*
* Components:
* - Buttons: Primary actions, secondary actions, ghost buttons
* - Inputs: Text fields, textareas, selects, checkboxes
* - Cards: Content containers with variants
* - Badges: Status indicators, labels
* - Tags: Compact category/filter chips (removable)
* - Alerts: Feedback messages (success, error, warning, info)
* - Modals: Dialog overlays
* - Avatars: User profile images with status indicators
* - Loaders: Spinners, skeletons, progress bars
* - Tables: Data display
* - Navigation: Breadcrumbs, pagination, steps
* - Tabs: View-switching tab bars (underline, pills, enclosed)
* - Disclosure: Accordions, collapsible sections
* - Dividers: Horizontal/vertical separators
* - Dropdowns: Contextual action menus
* - Tooltips: Hover/focus informational overlays
* - Popovers: Rich contextual overlays with interactive content
*/
/* Buttons */
/* --- ./buttons/_button.css --- */
/**
* Design System - Button Component
*
* A flexible button component with multiple variants, sizes, and states.
* Backwards compatible with existing .btn class in base.css.
*/
/* ==========================================================================
BASE BUTTON
Extends the existing .btn class from base.css
========================================================================== */
.ds-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
line-height: 1.25;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
border: var(--border-width-1) solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
user-select: none;
transition: var(--transition-button);
}
.ds-btn:hover {
transform: scale(1.03);
}
.ds-btn:active {
transform: scale(0.98);
}
.ds-btn:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring-brand);
}
.ds-btn:disabled,
.ds-btn--disabled {
cursor: not-allowed;
pointer-events: none;
}
/* ==========================================================================
VARIANTS
========================================================================== */
/* Primary - Main call to action */
.ds-btn--primary {
background: var(--bw-black);
color: white;
box-shadow: var(--shadow-sm);
}
.ds-btn--primary:hover {
background: var(--gray-700);
box-shadow: var(--shadow-md);
}
.ds-btn--primary:active {
background: var(--gray-900);
box-shadow: var(--shadow-xs);
}
/* Secondary - Less prominent action */
.ds-btn--secondary {
background: var(--btn-secondary);
color: var(--bw-black);
border-color: var(--color-border-default);
}
.ds-btn--secondary:hover {
background: var(--gray-200);
border: var(--border-width-1) solid #333;
}
.ds-btn--secondary:active {
background: var(--gray-200);
border-color: #333;
}
/* Ghost - Minimal visual weight */
.ds-btn--ghost {
background: transparent;
color: var(--color-text-subtle);
}
.ds-btn--ghost:hover {
background: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-btn--ghost:active {
background: var(--color-neutral-200);
}
/* Outline Brand - Outlined with brand color */
.ds-btn--outline-brand {
background: transparent;
border-color: var(--color-brand-500);
color: var(--color-brand-500);
}
.ds-btn--outline-brand:hover {
background: var(--color-bg-brand-subtle);
}
.ds-btn--outline-brand:active {
background: var(--color-brand-100);
}
/* Danger - Destructive actions */
.ds-btn--danger {
background: var(--color-error-500);
color: white;
}
.ds-btn--danger:hover {
background: var(--color-error-600);
}
.ds-btn--danger:active {
background: var(--color-error-700);
}
.ds-btn--danger:focus-visible {
box-shadow: var(--shadow-focus-ring-error);
}
/* Danger Outline */
.ds-btn--danger-outline {
background: transparent;
color: var(--color-error-500);
border-color: var(--color-error-500);
}
.ds-btn--danger-outline:hover {
background: var(--color-error-50);
}
/* Success */
.ds-btn--success {
background: var(--color-success-500);
color: white;
}
.ds-btn--success:hover {
background: var(--color-success-600);
}
/* Inverse - for use on dark backgrounds */
.ds-btn--inverse {
background: var(--bw-white);
color: var(--bw-black);
border-color: transparent;
}
.ds-btn--inverse:hover {
background: var(--gray-100);
}
.ds-btn--inverse:active {
background: var(--gray-200);
}
.ds-btn--inverse-outline {
background: transparent;
color: var(--bw-white);
border-color: rgba(255, 255, 255, 0.4);
}
.ds-btn--inverse-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.7);
}
.ds-btn--inverse-ghost {
background: transparent;
color: var(--bw-white);
border-color: transparent;
}
.ds-btn--inverse-ghost:hover {
background: rgba(255, 255, 255, 0.1);
}
/* Link style */
.ds-btn--link {
background: transparent;
color: var(--color-brand-500);
padding-left: 0;
padding-right: 0;
border-radius: 0;
text-decoration: underline;
}
.ds-btn--link:hover {
text-decoration: underline;
}
/* ==========================================================================
SIZES
========================================================================== */
.ds-btn--xs {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
gap: var(--space-1);
}
.ds-btn--sm {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
}
/* Default size is already defined in .ds-btn */
.ds-btn--lg {
padding: var(--space-4) var(--space-8);
font-size: var(--font-size-base);
}
.ds-btn--xl {
padding: var(--space-5) var(--space-10);
font-size: var(--font-size-lg);
}
/* ==========================================================================
STATES
========================================================================== */
/* Disabled */
.ds-btn:disabled,
.ds-btn--disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Loading */
.ds-btn--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.ds-btn--loading::after {
content: '';
position: absolute;
width: var(--size-4);
height: var(--size-4);
border: var(--border-width-2) solid currentColor;
border-right-color: transparent;
border-radius: var(--radius-full);
animation: var(--animate-spin);
}
.ds-btn--loading.ds-btn--primary::after,
.ds-btn--loading.ds-btn--danger::after,
.ds-btn--loading.ds-btn--success::after {
border-color: white;
border-right-color: transparent;
}
/* ==========================================================================
WIDTHS
========================================================================== */
.ds-btn--full {
width: 100%;
}
.ds-btn--auto {
width: auto;
}
/* ==========================================================================
ICON BUTTONS
========================================================================== */
.ds-btn--icon {
padding: var(--space-3);
aspect-ratio: 1;
}
.ds-btn--icon.ds-btn--xs {
padding: var(--space-1-5);
}
.ds-btn--icon.ds-btn--sm {
padding: var(--space-2);
}
.ds-btn--icon.ds-btn--lg {
padding: var(--space-4);
}
/* ==========================================================================
BUTTON ELEMENTS
========================================================================== */
.ds-btn__icon {
flex-shrink: 0;
width: 1em;
height: 1em;
}
.ds-btn__icon--left {
margin-right: var(--space-1);
}
.ds-btn__icon--right {
margin-left: var(--space-1);
}
/* ==========================================================================
BUTTON GROUP
========================================================================== */
.ds-btn-group {
display: inline-flex;
}
.ds-btn-group > .ds-btn {
border-radius: 0;
}
.ds-btn-group > .ds-btn:first-child {
border-top-left-radius: var(--radius-md);
border-bottom-left-radius: var(--radius-md);
}
.ds-btn-group > .ds-btn:last-child {
border-top-right-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
}
.ds-btn-group > .ds-btn:not(:first-child) {
margin-left: -1px;
}
.ds-btn-group > .ds-btn:hover,
.ds-btn-group > .ds-btn:focus {
z-index: 1;
}
/* Form Elements */
/* --- ./inputs/_input.css --- */
/**
* Design System - Form Input Components
*
* Form controls including text inputs, textareas, selects, checkboxes, and radios.
* Backwards compatible with existing .input and .textarea classes.
*/
/* ==========================================================================
FORM FIELD WRAPPER
========================================================================== */
.ds-form-field {
margin-bottom: var(--space-4);
}
.ds-form-field--inline {
display: flex;
align-items: center;
gap: var(--space-3);
}
/* ==========================================================================
LABELS
========================================================================== */
.ds-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-default);
margin-bottom: var(--space-2);
}
.ds-label--required::after {
content: ' *';
color: var(--color-error-500);
}
/* ==========================================================================
TEXT INPUT
========================================================================== */
.ds-input {
display: block;
width: stretch;
padding: var(--space-3) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: 1.5;
color: var(--input-color);
background-color: var(--input-bg);
border: var(--border-width-2) solid var(--input-border);
border-radius: var(--radius-md);
transition: var(--transition-input);
appearance: none;
}
.ds-input::placeholder {
color: var(--color-text-placeholder);
}
.ds-input:hover:not(:disabled):not(:focus) {
border-color: var(--color-border-strong);
}
.ds-input:focus {
outline: none;
border-color: var(--color-border-strong);
}
.ds-input:disabled {
background-color: var(--color-neutral-100);
color: var(--color-text-disabled);
cursor: not-allowed;
}
/* Input Sizes */
.ds-input--sm {
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
}
.ds-input--lg {
padding: var(--space-4) var(--space-5);
font-size: var(--font-size-lg);
}
/* Input States */
.ds-input--error {
border-color: var(--color-error-500);
}
.ds-input--error:focus {
border-color: var(--color-error-500);
}
.ds-input--success {
border-color: var(--color-success-500);
}
/* ==========================================================================
TEXTAREA
========================================================================== */
.ds-textarea {
display: block;
width: stretch;
min-height: 120px;
padding: var(--space-3) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text-default);
background-color: white;
border: var(--border-width-1) solid var(--color-border-default);
border-radius: var(--radius-md);
resize: vertical;
transition: var(--transition-input);
}
.ds-textarea::placeholder {
color: var(--color-text-placeholder);
}
.ds-textarea:focus {
outline: none;
border-color: var(--color-border-strong);
}
.ds-textarea:disabled {
background-color: var(--color-neutral-100);
cursor: not-allowed;
}
.ds-textarea--error {
border-color: var(--color-error-500);
}
/* ==========================================================================
SELECT
========================================================================== */
.ds-select {
display: block;
width: 100%;
padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--color-text-default);
background-color: white;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23717680' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 16px;
border: var(--border-width-1) solid var(--color-border-default);
border-radius: var(--radius-md);
cursor: pointer;
appearance: none;
transition: var(--transition-input);
}
.ds-select:focus {
outline: none;
border-color: var(--color-border-strong);
}
.ds-select:disabled {
background-color: var(--color-neutral-100);
cursor: not-allowed;
}
.ds-select option {
background-color: var(--color-bg-primary);
color: var(--color-text-default);
padding: var(--space-2) var(--space-3);
}
.ds-select option:checked {
background-color: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-select--error {
border-color: var(--color-error-500);
}
/* ==========================================================================
CHECKBOX
========================================================================== */
.ds-checkbox {
display: inline-flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
.ds-checkbox__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-checkbox__box {
flex-shrink: 0;
width: 20px;
height: 20px;
background: white;
border: var(--border-width-2) solid var(--color-border-default);
border-radius: var(--radius-sm);
transition: var(--transition-all-fast);
display: flex;
align-items: center;
justify-content: center;
}
.ds-checkbox__box::after {
content: '';
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg) scale(0);
transition: transform var(--duration-fast) var(--ease-out);
}
.ds-checkbox__input:checked + .ds-checkbox__box {
background: var(--color-brand-500);
border-color: var(--color-brand-500);
}
.ds-checkbox__input:checked + .ds-checkbox__box::after {
transform: rotate(45deg) scale(1);
}
.ds-checkbox__input:focus-visible + .ds-checkbox__box {
box-shadow: var(--shadow-focus-ring-brand);
}
.ds-checkbox__input:disabled + .ds-checkbox__box {
background: var(--color-neutral-100);
border-color: var(--color-neutral-300);
cursor: not-allowed;
}
.ds-checkbox__label {
font-size: var(--font-size-sm);
color: var(--color-text-default);
line-height: 1.5;
}
/* ==========================================================================
RADIO
========================================================================== */
.ds-radio {
display: inline-flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
user-select: none;
}
.ds-radio__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-radio__circle {
flex-shrink: 0;
width: 20px;
height: 20px;
background: white;
border: var(--border-width-2) solid var(--color-border-default);
border-radius: var(--radius-full);
transition: var(--transition-all-fast);
display: flex;
align-items: center;
justify-content: center;
}
.ds-radio__circle::after {
content: '';
width: 8px;
height: 8px;
background: white;
border-radius: var(--radius-full);
transform: scale(0);
transition: transform var(--duration-fast) var(--ease-out);
}
.ds-radio__input:checked + .ds-radio__circle {
background: var(--color-brand-500);
border-color: var(--color-brand-500);
}
.ds-radio__input:checked + .ds-radio__circle::after {
transform: scale(1);
}
.ds-radio__input:focus-visible + .ds-radio__circle {
box-shadow: var(--shadow-focus-ring-brand);
}
.ds-radio__label {
font-size: var(--font-size-sm);
color: var(--color-text-default);
}
/* ==========================================================================
TOGGLE / SWITCH
========================================================================== */
.ds-toggle {
display: inline-flex;
align-items: center;
gap: var(--space-3);
cursor: pointer;
}
.ds-toggle__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.ds-toggle__track {
position: relative;
width: 44px;
height: 24px;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
transition: background var(--duration-fast) var(--ease-out);
}
.ds-toggle__thumb {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: white;
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
transition: transform var(--duration-fast) var(--ease-out);
}
.ds-toggle__input:checked + .ds-toggle__track {
background: var(--color-brand-500);
}
.ds-toggle__input:checked + .ds-toggle__track .ds-toggle__thumb {
transform: translateX(20px);
}
.ds-toggle__input:focus-visible + .ds-toggle__track {
box-shadow: var(--shadow-focus-ring-brand);
}
/* ==========================================================================
HELPER & ERROR TEXT
========================================================================== */
.ds-helper {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-subtlest);
margin-top: var(--space-2);
}
.ds-error {
display: block;
font-size: var(--font-size-sm);
color: var(--color-error-500);
margin-top: var(--space-2);
}
.ds-error::before {
content: '⚠ ';
}
/* ==========================================================================
INPUT GROUP (with icons or addons)
========================================================================== */
.ds-input-group {
position: relative;
display: flex;
}
.ds-input-group .ds-input {
flex: 1;
}
.ds-input-group__icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: var(--color-text-subtlest);
pointer-events: none;
}
.ds-input-group__icon--left {
left: var(--space-4);
}
.ds-input-group__icon--right {
right: var(--space-4);
}
.ds-input-group--icon-left .ds-input {
padding-left: var(--space-12);
}
.ds-input-group--icon-right .ds-input {
padding-right: var(--space-12);
}
/* Addon */
.ds-input-group__addon {
display: flex;
align-items: center;
padding: 0 var(--space-4);
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
background: var(--color-neutral-100);
border: var(--border-width-1) solid var(--color-border-default);
}
.ds-input-group__addon--left {
border-right: none;
border-radius: var(--radius-md) 0 0 var(--radius-md);
}
.ds-input-group__addon--left + .ds-input {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ds-input-group__addon--right {
border-left: none;
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ds-input + .ds-input-group__addon--right {
border-left: none;
}
.ds-input-group .ds-input:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
/* Content Containers */
/* --- ./cards/_card.css --- */
/**
* Design System - Card Component
*
* Flexible card component for displaying content in contained boxes.
*/
/* ==========================================================================
BASE CARD
========================================================================== */
.ds-card {
position: relative;
display: flex;
flex-direction: column;
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition-card);
}
/* ==========================================================================
CARD VARIANTS
========================================================================== */
/* Outlined - No shadow, just border */
.ds-card--outlined {
box-shadow: none;
border: var(--border-default);
}
/* Flat - No shadow or border */
.ds-card--flat {
box-shadow: none;
background: var(--color-bg-secondary);
}
/* Elevated - More pronounced shadow */
.ds-card--elevated {
box-shadow: var(--shadow-lg);
}
/* Interactive - Hoverable */
.ds-card--interactive {
cursor: pointer;
}
.ds-card--interactive:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.ds-card--interactive:active {
transform: translateY(0);
}
/* Featured - Brand accent */
.ds-card--featured {
border-top: 3px solid var(--color-brand-500);
}
/* ==========================================================================
CARD SECTIONS
========================================================================== */
.ds-card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
border-bottom: var(--border-subtle);
}
.ds-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin: 0;
}
.ds-card__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin-top: var(--space-1);
}
.ds-card__actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ds-card__body {
flex: 1;
padding: var(--space-6);
}
.ds-card__body--compact {
padding: var(--space-4);
}
.ds-card__body--flush {
padding: 0;
}
.ds-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-4) var(--space-6);
border-top: var(--border-subtle);
background: var(--color-bg-secondary);
}
.ds-card__footer--centered {
justify-content: center;
}
/* ==========================================================================
CARD MEDIA
========================================================================== */
.ds-card__media {
position: relative;
overflow: hidden;
}
.ds-card__media img,
.ds-card__media video {
width: 100%;
height: auto;
display: block;
}
.ds-card__media--top {
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.ds-card__media--cover {
aspect-ratio: 16 / 9;
}
.ds-card__media--cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ds-card__media--square {
aspect-ratio: 1;
}
.ds-card__media-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-4);
color: white;
}
/* ==========================================================================
CARD SIZES
========================================================================== */
.ds-card--sm .ds-card__header,
.ds-card--sm .ds-card__footer {
padding: var(--space-3) var(--space-4);
}
.ds-card--sm .ds-card__body {
padding: var(--space-4);
}
.ds-card--lg .ds-card__header,
.ds-card--lg .ds-card__footer {
padding: var(--space-6) var(--space-8);
}
.ds-card--lg .ds-card__body {
padding: var(--space-8);
}
/* ==========================================================================
CARD GRID
========================================================================== */
.ds-card-grid {
display: grid;
gap: var(--space-6);
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ds-card-grid--2 {
grid-template-columns: repeat(2, 1fr);
}
.ds-card-grid--3 {
grid-template-columns: repeat(3, 1fr);
}
.ds-card-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
.ds-card-grid--2,
.ds-card-grid--3,
.ds-card-grid--4 {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
STAT CARD (for metrics/stats)
========================================================================== */
.ds-stat-card {
padding: var(--space-6);
background: var(--card-bg);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.ds-stat-card__label {
font-size: var(--font-size-sm);
color: var(--color-text-subtlest);
margin-bottom: var(--space-1);
}
.ds-stat-card__value {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-default);
}
.ds-stat-card__change {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-size: var(--font-size-sm);
margin-top: var(--space-2);
}
.ds-stat-card__change--up {
color: var(--color-success-500);
}
.ds-stat-card__change--down {
color: var(--color-error-500);
}
/* ==========================================================================
LINK SPANNER (clickable card overlay)
Compatible with existing .link-spanner class
========================================================================== */
.ds-card__link {
position: absolute;
inset: 0;
z-index: 1;
}
/* Ensure interactive elements above the link */
.ds-card__actions,
.ds-card [role="button"],
.ds-card button,
.ds-card a:not(.ds-card__link) {
position: relative;
z-index: 2;
}
/* --- ./option-cards/_option-card.css --- */
/**
* Design System - Option Card Component
*
* Visually rich selectable cards for single-select (radio) or
* multi-select (checkbox) choice inputs.
*
* Usage:
*
*
* Variants: --row (horizontal icon+text), --tile (vertical stacked)
* Single-select: use type="radio" on the input
*/
/* ==========================================================================
BASE
========================================================================== */
.ds-option-card {
position: relative;
display: flex;
align-items: center;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
background: var(--color-bg-primary);
border: 2px solid var(--color-border-default);
border-radius: var(--radius-lg);
cursor: pointer;
user-select: none;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.ds-option-card:hover {
border-color: var(--color-border-strong);
background: var(--color-bg-subtle);
}
.ds-option-card.is-selected {
border-color: var(--bw-black);
background: var(--color-bg-subtle);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--bw-black) 8%, transparent);
}
/* Hidden native input */
.ds-option-card__input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* ==========================================================================
ICON
========================================================================== */
.ds-option-card__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
background: var(--color-bg-subtle);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-subtle);
transition: background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ds-option-card.is-selected .ds-option-card__icon {
background: var(--color-bg-tertiary);
color: var(--color-text-default);
}
.ds-option-card__icon svg {
width: 20px;
height: 20px;
}
/* ==========================================================================
BODY
========================================================================== */
.ds-option-card__body {
flex: 1;
min-width: 0;
}
.ds-option-card__label {
display: block;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
line-height: 1.3;
}
.ds-option-card__sub {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-subtlest);
margin-top: var(--space-1);
line-height: 1.4;
}
/* ==========================================================================
CHECK INDICATOR
========================================================================== */
.ds-option-card__check {
flex-shrink: 0;
width: 22px;
height: 22px;
border: 2px solid var(--color-border-default);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
color: transparent;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.ds-option-card__check svg {
width: 12px;
height: 12px;
}
.ds-option-card.is-selected .ds-option-card__check {
background: var(--bw-black);
border-color: var(--bw-black);
color: var(--bw-white);
}
/* ==========================================================================
SINGLE-SELECT (RADIO) — round indicator
========================================================================== */
.ds-option-card--radio .ds-option-card__check {
border-radius: var(--radius-full);
}
/* Radio inner dot instead of checkmark */
.ds-option-card--radio .ds-option-card__check svg {
display: none;
}
.ds-option-card--radio.is-selected .ds-option-card__check::after {
content: '';
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--bw-white);
}
/* ==========================================================================
MULTI-SELECT (CHECKBOX) — square indicator (default, explicit modifier)
========================================================================== */
.ds-option-card--checkbox .ds-option-card__check {
border-radius: var(--radius-sm);
}
/* ==========================================================================
TILE VARIANT — vertical stacked (icon on top, check in corner)
========================================================================== */
.ds-option-card--tile {
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--space-3);
padding: var(--space-5);
}
.ds-option-card--tile .ds-option-card__check {
position: absolute;
top: var(--space-3);
right: var(--space-3);
}
.ds-option-card--tile .ds-option-card__icon {
width: 48px;
height: 48px;
}
/* ==========================================================================
SIZES
========================================================================== */
.ds-option-card--sm {
padding: var(--space-3) var(--space-4);
gap: var(--space-3);
}
.ds-option-card--sm .ds-option-card__icon {
width: 36px;
height: 36px;
}
.ds-option-card--sm .ds-option-card__icon svg {
width: 16px;
height: 16px;
}
.ds-option-card--sm .ds-option-card__label {
font-size: var(--font-size-sm);
}
/* ==========================================================================
PILL VARIANT — horizontal compact filter chips
========================================================================== */
.ds-option-card--pill {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-default);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
/* reset base styles */
width: auto;
box-shadow: none;
}
.ds-option-card--pill:hover {
border-color: var(--color-border-strong);
background: var(--color-bg-subtle);
}
.ds-option-card--pill.is-selected {
background: var(--bw-black);
border-color: var(--bw-black);
color: var(--bw-white);
box-shadow: none;
}
.ds-option-card--pill .ds-option-card__icon {
width: 18px;
height: 18px;
background: none;
border-radius: 0;
color: inherit;
flex-shrink: 0;
}
.ds-option-card--pill .ds-option-card__icon svg {
width: 15px;
height: 15px;
}
.ds-option-card--pill .ds-option-card__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: inherit;
line-height: 1;
}
.ds-option-card--pill .ds-option-card__dismiss {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: var(--radius-full);
background: rgba(255, 255, 255, 0.2);
color: inherit;
margin-left: var(--space-1);
flex-shrink: 0;
cursor: pointer;
border: none;
padding: 0;
line-height: 1;
}
.ds-option-card--pill .ds-option-card__dismiss svg {
width: 10px;
height: 10px;
}
/* Hide dismiss button when not selected */
.ds-option-card--pill .ds-option-card__dismiss {
display: none;
}
.ds-option-card--pill.is-selected .ds-option-card__dismiss {
display: inline-flex;
}
/* Pill group wrapper */
.ds-option-card-pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* ==========================================================================
GRID LAYOUT HELPER
========================================================================== */
.ds-option-card-grid {
display: grid;
gap: var(--space-3);
}
.ds-option-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-option-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-option-card-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
/* Feedback & Status */
/* --- ./badges/_badge.css --- */
/**
* Design System - Badge Component
*
* Small labels for status indicators, categories, and tags.
*/
/* ==========================================================================
BASE BADGE
========================================================================== */
.ds-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border: 1px solid transparent;
border-radius: 10px;
white-space: nowrap;
background: var(--color-neutral-100);
color: var(--color-text-subtle);
}
.ds-badge::before {
content: none;
}
/* ==========================================================================
BADGE VARIANTS
========================================================================== */
/* Brand / Primary */
.ds-badge--brand {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.ds-badge--brand-solid {
background: var(--color-brand-500);
color: white;
}
/* Success */
.ds-badge--success {
border: none;
background: var(--color-success-600);
color: white;
}
.ds-badge--success-outline {
border-color: var(--color-success-600);
background: transparent;
color: var(--color-success-600);
}
.ds-badge--success-light {
border: none;
background: var(--color-bg-success);
color: var(--color-success-700);
font-weight: var(--font-weight-semibold);
}
/* Warning */
.ds-badge--warning {
border: none;
background: var(--color-warning-500);
color: white;
}
.ds-badge--warning-outline {
border-color: var(--color-warning-500);
background: transparent;
color: var(--color-warning-500);
}
.ds-badge--warning-light {
border: none;
background: var(--color-bg-warning);
color: var(--color-warning-600);
font-weight: var(--font-weight-semibold);
}
/* Error / Danger */
.ds-badge--error {
border: none;
background: var(--color-error-500);
color: white;
}
.ds-badge--error-outline {
border-color: var(--color-error-600);
background: transparent;
color: var(--color-error-600);
}
.ds-badge--error-light {
border: none;
background: var(--color-bg-error);
color: var(--color-error-600);
font-weight: var(--font-weight-semibold);
}
/* Info */
.ds-badge--info {
border: none;
background: var(--color-info-500);
color: white;
}
.ds-badge--info-outline {
border-color: var(--color-info-500);
background: transparent;
color: var(--color-info-500);
}
.ds-badge--info-light {
border: none;
background: var(--color-bg-info);
color: var(--color-info-700);
font-weight: var(--font-weight-semibold);
}
/* Neutral */
.ds-badge--neutral {
border: none;
background: var(--bw-black);
color: white;
}
.ds-badge--neutral-outline {
border-color: var(--bw-black);
background: transparent;
color: var(--bw-black);
}
.ds-badge--neutral-light {
border: none;
background: color-mix(in srgb, var(--bw-black) 8%, transparent);
color: var(--color-text-default);
}
/* ==========================================================================
PLATFORM BADGES
========================================================================== */
.platform-badge {
cursor: pointer;
position: relative;
display: flex;
align-items: center;
margin: 0 12px 4px 0;
padding: 4px 7px;
border-radius: 10px;
border: 1px solid var(--lightGray);
box-shadow: var(--lightBoxShadow);
width: fit-content;
}
.platform-badge > img {
width: 16px;
margin-right: 5px;
}
.platform-badge a {
color: cornflowerblue;
text-decoration: none;
font-size: 78%;
font-weight: var(--font-weight-semibold);
}
.platform-badge a > span {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
.ds-badge--instagram {
background: var(--instagram);
color: white;
}
.ds-badge--tiktok {
background: var(--tiktok);
color: white;
}
.ds-badge--youtube {
background: var(--youtube);
color: white;
}
.ds-badge--twitter {
background: var(--twitter);
color: white;
}
.ds-badge--twitch {
background: var(--twitch);
color: white;
}
.ds-badge--amazon {
background: var(--amazon);
color: white;
}
.ds-badge--ugc {
background: var(--ugc);
color: white;
}
/* ==========================================================================
Other BADGES
========================================================================== */
.profile-listing-badge-holder{
position: absolute;
top: 10px;
left: 8px;
z-index: 99;
display: flex;
}
.profile-listing-badge {
display: flex;
align-items: end;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
padding: 5px;
margin-right: 5px;
box-shadow: var(--darkBoxShadow);
border: 1px solid white;
}
.profile-listing-badge-img {
width: 13px;
margin-right: 3px;
}
.profile-listing-badge-title {
font-weight: 600;
font-size: 70%;
color: white;
}
/* ==========================================================================
BADGE SIZES
========================================================================== */
.ds-badge--xs {
padding: var(--space-0-5) var(--space-2);
font-size: var(--font-size-2xs);
}
.ds-badge--sm {
padding: var(--space-1) var(--space-2);
font-size: var(--font-size-xs);
}
/* Default size is already defined in .ds-badge */
.ds-badge--lg {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-sm);
}
/* ==========================================================================
BADGE SHAPES
========================================================================== */
/* Rounded (default is full/pill) */
.ds-badge--rounded {
border-radius: var(--radius-md);
}
/* Square */
.ds-badge--square {
border-radius: var(--radius-sm);
}
/* ==========================================================================
BADGE WITH DOT
========================================================================== */
.ds-badge--dot {
padding-left: var(--space-2);
}
.ds-badge--dot::before {
content: '';
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
}
/* ==========================================================================
BADGE WITH ICON
========================================================================== */
.ds-badge__icon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
/* ==========================================================================
REMOVABLE BADGE
========================================================================== */
.ds-badge--removable {
padding-right: var(--space-1);
}
.ds-badge__remove {
display: flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin-left: var(--space-1);
background: transparent;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
opacity: 0.6;
transition: opacity var(--duration-fast) var(--ease-out);
}
.ds-badge__remove:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
}
/* ==========================================================================
BADGE GROUP
========================================================================== */
.ds-badge-group {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* ==========================================================================
COUNT/NUMBER BADGE
========================================================================== */
.ds-badge--count {
min-width: 20px;
height: 20px;
padding: 0 var(--space-1-5);
border-radius: var(--radius-full);
text-align: center;
}
.ds-badge--count.ds-badge--sm {
min-width: 16px;
height: 16px;
font-size: var(--font-size-2xs);
}
/* ==========================================================================
NOTIFICATION DOT
Compatible with existing .notification class
========================================================================== */
.ds-dot {
width: 10px;
height: 10px;
background: var(--color-brand-500);
border-radius: var(--radius-full);
}
.ds-dot--animated {
animation: var(--animate-pulse);
}
.ds-dot--success { background: var(--color-success-500); }
.ds-dot--warning { background: var(--color-warning-500); }
.ds-dot--error { background: var(--color-error-500); }
/* --- ./tags/_tag.css --- */
/**
* Design System - Tag/Chip Component
*
* Compact labels for categorization, status indicators, or filtering.
* Use .ds-tag--removable with a .ds-tag__remove button for interactive chips.
*/
/* ==========================================================================
BASE TAG
========================================================================== */
.ds-tag {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-2) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
border-radius: var(--radius-full);
border: var(--border-width-1) solid transparent;
white-space: nowrap;
vertical-align: middle;
}
/* ==========================================================================
VARIANTS
========================================================================== */
.ds-tag--neutral {
background: var(--color-neutral-100);
color: var(--color-neutral-700);
border-color: var(--color-neutral-200);
}
.ds-tag--brand {
background: var(--color-brand-50);
color: var(--color-brand-700);
border-color: var(--color-brand-200);
}
.ds-tag--success {
background: var(--color-success-50);
color: var(--color-success-700);
border-color: var(--color-success-200);
}
.ds-tag--warning {
background: var(--color-warning-50);
color: var(--color-warning-700);
border-color: var(--color-warning-200);
}
.ds-tag--error {
background: var(--color-error-50);
color: var(--color-error-700);
border-color: var(--color-error-200);
}
.ds-tag--info {
background: var(--color-info-50);
color: var(--color-info-700);
border-color: var(--color-info-200);
}
/* ==========================================================================
SIZES
========================================================================== */
.ds-tag--sm {
font-size: 11px;
padding: 2px var(--space-2);
}
.ds-tag--lg {
font-size: var(--font-size-sm);
padding: var(--space-1) var(--space-3);
}
/* ==========================================================================
REMOVABLE TAG
========================================================================== */
.ds-tag--removable {
padding-right: var(--space-2);
}
.ds-tag__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: none;
border-radius: var(--radius-full);
cursor: pointer;
color: currentColor;
opacity: 0.6;
padding: 0;
transition: opacity var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
flex-shrink: 0;
}
.ds-tag__remove:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
}
.ds-tag__remove:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring);
opacity: 1;
}
/* ==========================================================================
TAG ICON
========================================================================== */
.ds-tag__icon {
flex-shrink: 0;
width: 12px;
height: 12px;
}
.ds-tag--lg .ds-tag__icon {
width: 14px;
height: 14px;
}
/* --- ./alerts/_alert.css --- */
/**
* Design System - Alert Component
*
* Contextual feedback messages for user actions.
*/
/* ==========================================================================
BASE ALERT
========================================================================== */
.ds-alert {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-sm);
border-left: 4px solid;
background: var(--color-neutral-100);
border-left-color: var(--color-neutral-400);
}
/* ==========================================================================
ALERT VARIANTS
========================================================================== */
/* Tip — inline hint, no border, soft background */
.ds-alert--tip {
background: var(--color-bg-info);
border-left: none;
border-radius: var(--radius-md);
align-items: center;
padding: var(--space-3) var(--space-4);
}
.ds-alert--tip .ds-alert__icon {
color: var(--color-text-subtle);
}
.ds-alert--tip .ds-alert__text {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
}
.ds-alert--tip a {
color: var(--color-text-subtle);
text-decoration: underline;
}
/* Info */
.ds-alert--info {
background: var(--color-info-50);
border-left-color: var(--color-info-500);
}
.ds-alert--info .ds-alert__icon {
color: var(--color-info-500);
}
/* Success */
.ds-alert--success {
background: var(--color-bg-success);
border-left-color: var(--color-success-500);
}
.ds-alert--success .ds-alert__icon {
color: var(--color-success-500);
}
/* Warning */
.ds-alert--warning {
background: var(--color-bg-warning);
border-left-color: var(--color-warning-500);
}
.ds-alert--warning .ds-alert__icon {
color: var(--color-warning-500);
}
/* Error */
.ds-alert--error {
background: var(--color-bg-error);
border-left-color: var(--color-error-500);
}
.ds-alert--error .ds-alert__icon {
color: var(--color-error-500);
}
/* ==========================================================================
ALERT ELEMENTS
========================================================================== */
.ds-alert__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
}
.ds-alert__content {
flex: 1;
min-width: 0;
}
.ds-alert__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin-bottom: var(--space-1);
}
.ds-alert__message {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin: 0;
}
.ds-alert__actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-3);
}
.ds-alert__close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: calc(var(--space-1) * -1);
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-text-subtlest);
cursor: pointer;
transition: var(--transition-colors);
}
.ds-alert__close svg {
width: 16px;
height: 16px;
}
.ds-alert__close:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--color-text-default);
}
/* ==========================================================================
ALERT VARIANTS - FILLED
========================================================================== */
.ds-alert--filled {
border-left: none;
color: white;
}
.ds-alert--filled.ds-alert--info {
background: var(--color-info-500);
}
.ds-alert--filled.ds-alert--success {
background: var(--color-success-500);
}
.ds-alert--filled.ds-alert--warning {
background: var(--color-warning-500);
color: var(--color-text-default);
}
.ds-alert--filled.ds-alert--error {
background: var(--color-error-500);
}
.ds-alert--filled .ds-alert__icon,
.ds-alert--filled .ds-alert__title,
.ds-alert--filled .ds-alert__message {
color: inherit;
}
.ds-alert--filled .ds-alert__close {
color: inherit;
opacity: 0.7;
}
.ds-alert--filled .ds-alert__close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.1);
}
/* ==========================================================================
TOAST (Floating alert)
========================================================================== */
.ds-toast {
position: fixed;
z-index: 9999;
display: flex;
align-items: flex-start;
gap: var(--space-3);
min-width: 300px;
max-width: 420px;
padding: var(--space-4);
background: var(--toast-bg);
border-radius: var(--radius-sm);
box-shadow: var(--toast-shadow);
animation: var(--animate-slide-in-up);
}
/* Toast positions */
.ds-toast--top-right {
top: var(--space-4);
right: var(--space-4);
}
.ds-toast--top-left {
top: var(--space-4);
left: var(--space-4);
}
.ds-toast--bottom-right {
bottom: var(--space-4);
right: var(--space-4);
}
.ds-toast--bottom-left {
bottom: var(--space-4);
left: var(--space-4);
}
.ds-toast--top-center {
top: var(--space-4);
left: 50%;
transform: translateX(-50%);
}
.ds-toast--bottom-center {
bottom: var(--space-4);
left: 50%;
transform: translateX(-50%);
}
/* Toast inner layout */
.ds-toast__icon {
flex-shrink: 0;
stroke-width: 1.2;
width: 20px;
height: 20px;
margin-top: 1px;
}
.ds-toast__body {
flex: 1;
min-width: 0;
}
.ds-toast__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
line-height: 1.4;
}
.ds-toast__message {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin-top: var(--space-0-5);
line-height: 1.4;
}
.ds-toast__close {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
background: color-mix(in srgb, currentColor 10%, transparent);
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
color: inherit;
opacity: 0.75;
transition: opacity var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
margin-top: -2px;
}
.ds-toast__close svg {
width: 16px;
height: 16px;
}
.ds-toast__close:hover {
opacity: 1;
background: color-mix(in srgb, currentColor 18%, transparent);
}
/* Dense variant — compact single-line toast */
.ds-toast--dense {
padding: var(--space-2-5) var(--space-4);
min-width: 0;
align-items: center;
}
.ds-toast--dense .ds-toast__icon {
width: 16px;
height: 16px;
margin-top: 0;
}
.ds-toast--dense .ds-toast__body {
display: flex;
align-items: center;
}
.ds-toast--dense .ds-toast__title {
font-size: var(--font-size-sm);
}
.ds-toast--dense .ds-toast__message {
display: none;
}
.ds-toast--dense .ds-toast__close {
margin-top: 0;
width: 24px;
height: 24px;
}
/* ==========================================================================
TOAST SEVERITY VARIANTS
========================================================================== */
/* --- Text (subtle) --- */
.ds-toast--normal { color: var(--color-text-default); }
.ds-toast--info { color: var(--color-info-700); }
.ds-toast--success{ color: var(--color-success-700); }
.ds-toast--warning{ color: var(--color-warning-600); }
.ds-toast--error { color: var(--color-error-600); }
/* --- Outlined --- */
.ds-toast--normal-outlined {
border: 1px solid var(--color-border-default);
color: var(--color-text-default);
}
.ds-toast--info-outlined {
border: 1px solid var(--color-info-500);
color: var(--color-info-700);
}
.ds-toast--success-outlined {
border: 1px solid var(--color-success-500);
color: var(--color-success-700);
}
.ds-toast--warning-outlined {
border: 1px solid var(--color-warning-500);
color: var(--color-warning-600);
}
.ds-toast--error-outlined {
border: 1px solid var(--color-error-500);
color: var(--color-error-600);
}
/* --- Filled --- */
.ds-toast--normal-filled {
background: var(--bw-black);
color: white;
box-shadow: var(--shadow-lg);
}
.ds-toast--info-filled {
background: var(--color-info-500);
color: white;
box-shadow: var(--shadow-lg);
}
.ds-toast--success-filled {
background: var(--color-success-600);
color: white;
box-shadow: var(--shadow-lg);
}
.ds-toast--warning-filled {
background: var(--color-warning-500);
color: white;
box-shadow: var(--shadow-lg);
}
.ds-toast--error-filled {
background: var(--color-error-500);
color: white;
box-shadow: var(--shadow-lg);
}
/* Filled variants: override text colors for inner elements */
.ds-toast--normal-filled .ds-toast__title,
.ds-toast--info-filled .ds-toast__title,
.ds-toast--success-filled .ds-toast__title,
.ds-toast--warning-filled .ds-toast__title,
.ds-toast--error-filled .ds-toast__title {
color: white;
}
.ds-toast--normal-filled .ds-toast__message,
.ds-toast--info-filled .ds-toast__message,
.ds-toast--success-filled .ds-toast__message,
.ds-toast--warning-filled .ds-toast__message,
.ds-toast--error-filled .ds-toast__message {
color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
TOAST CONTAINER (for stacking)
========================================================================== */
.ds-toast-container {
position: fixed;
z-index: 9999;
display: flex;
flex-direction: column;
gap: var(--space-3);
pointer-events: none;
}
.ds-toast-container > * {
pointer-events: auto;
}
.ds-toast-container--top-right {
top: var(--space-4);
right: var(--space-4);
}
.ds-toast-container--bottom-right {
bottom: var(--space-4);
right: var(--space-4);
flex-direction: column-reverse;
}
/* ==========================================================================
INLINE MESSAGE (simpler, inline feedback)
========================================================================== */
.ds-message {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
font-size: var(--font-size-sm);
border-radius: var(--radius-md);
}
.ds-message--success {
background: var(--color-bg-success);
color: var(--color-success-700);
}
.ds-message--error {
background: var(--color-bg-error);
color: var(--color-error-700);
}
.ds-message--warning {
background: var(--color-bg-warning);
color: var(--color-warning-700);
}
.ds-message--info {
background: var(--color-bg-info);
color: var(--color-info-700);
}
/* Overlays */
/* --- ./modals/_modal.css --- */
/**
* Design System - Modal Component
*
* Dialog boxes and overlays for focused interactions.
* Backwards compatible with existing modal styles.
*/
/* ==========================================================================
MODAL BACKDROP
========================================================================== */
.ds-modal-backdrop {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
background: var(--modal-backdrop);
backdrop-filter: blur(4px);
animation: fadeIn var(--duration-normal) var(--ease-out);
}
.ds-modal-backdrop--transparent {
background: transparent;
backdrop-filter: none;
}
/* ==========================================================================
MODAL CONTAINER
========================================================================== */
.ds-modal {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px;
max-height: 90vh;
background: var(--modal-bg);
border-radius: var(--radius-xl);
box-shadow: var(--modal-shadow);
overflow: hidden;
animation: scaleIn var(--duration-normal) var(--ease-out-emphasized);
}
/* ==========================================================================
MODAL SIZES
========================================================================== */
.ds-modal--xs {
max-width: 320px;
}
.ds-modal--sm {
max-width: 400px;
}
/* Default is 500px */
.ds-modal--md {
max-width: 600px;
}
.ds-modal--lg {
max-width: 800px;
}
.ds-modal--xl {
max-width: 1000px;
}
.ds-modal--full {
max-width: none;
max-height: none;
width: 100%;
height: 100%;
border-radius: 0;
}
/* ==========================================================================
MODAL SECTIONS
========================================================================== */
.ds-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) var(--space-6);
border-bottom: var(--border-subtle);
flex-shrink: 0;
}
.ds-modal__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin: 0;
}
.ds-modal__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin-top: var(--space-1);
}
.ds-modal__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin: calc(var(--space-2) * -1);
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-text-subtlest);
cursor: pointer;
transition: var(--transition-colors);
}
.ds-modal__close svg {
width: 18px;
height: 18px;
}
.ds-modal__close:hover {
background: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-modal__close:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
}
.ds-modal__body {
flex: 1;
padding: var(--space-6);
overflow-y: auto;
}
.ds-modal__body--flush {
padding: 0;
}
.ds-modal__footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--space-3);
padding: var(--space-4) var(--space-6);
border-top: var(--border-subtle);
background: var(--color-bg-secondary);
flex-shrink: 0;
}
.ds-modal__footer--left {
justify-content: flex-start;
}
.ds-modal__footer--center {
justify-content: center;
}
.ds-modal__footer--between {
justify-content: space-between;
}
/* ==========================================================================
MODAL VARIANTS
========================================================================== */
/* Centered modal (vertical center with explicit height) */
.ds-modal--centered {
margin: auto;
}
/* Drawer - Slides from side */
.ds-modal--drawer-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
max-width: 400px;
max-height: none;
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
animation: slideInRight var(--duration-normal) var(--ease-out);
}
.ds-modal--drawer-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
max-width: 400px;
max-height: none;
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
animation: slideInLeft var(--duration-normal) var(--ease-out);
}
/* Bottom sheet (mobile-friendly) */
.ds-modal--sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
max-width: none;
max-height: 90vh;
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
animation: slideInUp var(--duration-normal) var(--ease-out);
}
.ds-modal--sheet .ds-modal__header {
position: relative;
}
.ds-modal--sheet .ds-modal__header::before {
content: '';
position: absolute;
top: calc(var(--space-2) * -1);
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 4px;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
}
/* ==========================================================================
CONFIRMATION DIALOG
========================================================================== */
.ds-dialog {
text-align: center;
max-width: 400px;
}
.ds-dialog .ds-modal__body {
padding: var(--space-8) var(--space-6);
}
.ds-dialog__icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-4);
}
.ds-dialog__icon--success { color: var(--color-success-500); }
.ds-dialog__icon--warning { color: var(--color-warning-500); }
.ds-dialog__icon--error { color: var(--color-error-500); }
.ds-dialog__icon--info { color: var(--color-info-500); }
.ds-dialog__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin-bottom: var(--space-2);
}
.ds-dialog__message {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin: 0;
}
.ds-dialog .ds-modal__footer {
justify-content: center;
}
/* ==========================================================================
MODAL UTILITIES
========================================================================== */
/* Prevent body scroll when modal is open */
.ds-modal-open {
overflow: hidden;
}
/* Hide modal visually but keep accessible */
.ds-modal[aria-hidden="true"] {
display: none;
}
/* --- ./tooltips/_tooltip.css --- */
/**
* Design System - Tooltip Component
*
* Small informational overlays on hover or focus.
* CSS-driven show/hide via :hover and :focus-within.
* Use aria-label or aria-describedby on the trigger for screen readers.
*/
/* ==========================================================================
TOOLTIP WRAPPER
========================================================================== */
.ds-tooltip {
position: relative;
display: inline-flex;
}
/* ==========================================================================
TOOLTIP CONTENT
========================================================================== */
.ds-tooltip__content {
position: absolute;
z-index: var(--ds-z-tooltip);
padding: var(--space-2) var(--space-3);
font-family: var(--font-family-base);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: 1.4;
color: var(--color-text-inverse);
background: var(--bw-black);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-lg);
max-width: none;
white-space: nowrap;
pointer-events: none;
/* Hidden by default */
opacity: 0;
visibility: hidden;
transition: opacity var(--duration-fast) var(--ease-out),
visibility var(--duration-fast) var(--ease-out);
}
/* Tooltip arrow */
.ds-tooltip__content::before {
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
/* ==========================================================================
POSITIONS
========================================================================== */
/* Top (default) */
.ds-tooltip__content,
.ds-tooltip__content--top {
bottom: calc(100% + var(--space-2));
left: 50%;
transform: translateX(-50%);
}
.ds-tooltip__content::before,
.ds-tooltip__content--top::before {
top: 100%;
left: 50%;
transform: translateX(-50%);
border-top-color: var(--gray-900);
}
/* Bottom */
.ds-tooltip__content--bottom {
top: calc(100% + var(--space-2));
bottom: auto;
left: 50%;
transform: translateX(-50%);
}
.ds-tooltip__content--bottom::before {
bottom: 100%;
top: auto;
left: 50%;
transform: translateX(-50%);
border-top-color: transparent;
border-bottom-color: var(--gray-900);
}
/* Left */
.ds-tooltip__content--left {
right: calc(100% + var(--space-2));
bottom: auto;
left: auto;
top: 50%;
transform: translateY(-50%);
}
.ds-tooltip__content--left::before {
left: 100%;
top: 50%;
transform: translateY(-50%);
border-top-color: transparent;
border-left-color: var(--gray-900);
}
/* Right */
.ds-tooltip__content--right {
left: calc(100% + var(--space-2));
bottom: auto;
right: auto;
top: 50%;
transform: translateY(-50%);
}
.ds-tooltip__content--right::before {
right: 100%;
left: auto;
top: 50%;
transform: translateY(-50%);
border-top-color: transparent;
border-left-color: transparent;
border-right-color: var(--gray-900);
}
/* ==========================================================================
SHOW STATE
========================================================================== */
.ds-tooltip:hover .ds-tooltip__content,
.ds-tooltip:focus-within .ds-tooltip__content,
.ds-tooltip__content.is-visible {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
LIGHT VARIANT
========================================================================== */
.ds-tooltip__content--light {
color: var(--color-text-default);
background: var(--color-bg-primary);
border: var(--border-width-1) solid var(--color-border-default);
box-shadow: var(--shadow-xl);
}
.ds-tooltip__content--light::before {
display: none;
}
/* --- ./popovers/_popover.css --- */
/**
* Design System - Popover Component
*
* Rich contextual overlays with structured content.
* Unlike tooltips, popovers can hold interactive content (buttons, forms).
* Toggle .is-open on .ds-popover__content via JS.
* JS is responsible for positioning, focus management, and Escape key handling.
*/
/* ==========================================================================
POPOVER WRAPPER
========================================================================== */
.ds-popover {
position: relative;
display: inline-flex;
}
/* ==========================================================================
POPOVER CONTENT
========================================================================== */
.ds-popover__content {
position: absolute;
z-index: var(--ds-z-popover);
background: var(--color-bg-primary);
border: var(--border-width-1) solid var(--color-border-default);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-xl);
/* Hidden by default */
opacity: 0;
visibility: hidden;
transform: scale(0.97) translateY(-4px);
transform-origin: top left;
transition: opacity var(--duration-fast) var(--ease-out),
visibility var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out-emphasized);
}
.ds-popover__content.is-open {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
/* ==========================================================================
POSITIONING VARIANTS
========================================================================== */
.ds-popover__content--bottom,
.ds-popover__content:not([class*="--top"]):not([class*="--bottom-right"]):not([class*="--bottom-center"]) {
top: calc(100% + var(--space-2));
left: 0;
transform-origin: top left;
}
.ds-popover__content--bottom-right {
top: calc(100% + var(--space-2));
right: 0;
left: auto;
transform-origin: top right;
}
.ds-popover__content--bottom-center {
top: calc(100% + var(--space-2));
left: 50%;
transform: scale(0.97) translateX(-50%) translateY(-4px);
transform-origin: top center;
}
.ds-popover__content--bottom-center.is-open {
transform: scale(1) translateX(-50%) translateY(0);
}
.ds-popover__content--top {
bottom: calc(100% + var(--space-2));
top: auto;
left: 0;
transform-origin: bottom left;
transform: scale(0.97) translateY(4px);
}
.ds-popover__content--top.is-open {
transform: scale(1) translateY(0);
}
/* ==========================================================================
POPOVER SECTIONS
========================================================================== */
.ds-popover__header {
padding: var(--space-4) var(--space-4) var(--space-3);
border-bottom: var(--border-subtle);
}
.ds-popover__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin: 0;
}
.ds-popover__body {
padding: var(--space-4);
}
.ds-popover__footer {
padding: var(--space-3) var(--space-4);
border-top: var(--border-subtle);
display: flex;
justify-content: flex-end;
gap: var(--space-2);
}
/* ==========================================================================
SIZES
========================================================================== */
.ds-popover__content--sm {
width: 240px;
}
.ds-popover__content--md {
width: 320px;
}
.ds-popover__content--lg {
width: 400px;
}
/* ==========================================================================
ARROW
========================================================================== */
.ds-popover__arrow {
position: absolute;
width: 10px;
height: 10px;
background: var(--color-bg-primary);
border-left: var(--border-width-1) solid var(--color-border-default);
border-top: var(--border-width-1) solid var(--color-border-default);
transform: rotate(45deg);
}
.ds-popover__content--bottom .ds-popover__arrow,
.ds-popover__content--bottom-right .ds-popover__arrow,
.ds-popover__content:not([class*="--top"]):not([class*="--bottom-right"]):not([class*="--bottom-center"]) .ds-popover__arrow {
top: -6px;
left: var(--space-4);
}
.ds-popover__content--bottom-center .ds-popover__arrow {
top: -6px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
.ds-popover__content--top .ds-popover__arrow {
bottom: -6px;
left: var(--space-4);
transform: rotate(225deg);
}
/* ==========================================================================
DARK VARIANT (tour/onboarding)
========================================================================== */
.ds-popover__content--dark {
background: var(--bw-black);
border-color: transparent;
color: var(--bw-white);
}
.ds-popover__content--dark .ds-popover__title {
color: var(--bw-white);
}
.ds-popover__content--dark .ds-popover__body {
color: var(--color-neutral-300);
}
.ds-popover__content--dark .ds-popover__header {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
.ds-popover__content--dark .ds-popover__footer {
border-top-color: rgba(255, 255, 255, 0.1);
}
.ds-popover__content--dark .ds-popover__arrow {
background: var(--bw-black);
border-color: transparent;
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.ds-popover__content {
transition: opacity var(--duration-fast) var(--ease-out),
visibility var(--duration-fast) var(--ease-out);
transform: none !important;
}
.ds-popover__content--bottom-center,
.ds-popover__content--bottom-center.is-open {
transform: translateX(-50%) !important;
}
}
/* Menus */
/* --- ./dropdowns/_dropdown.css --- */
/**
* Design System - Dropdown Component
*
* Contextual menus triggered by a button action.
* Toggle .is-open on .ds-dropdown__menu via JS.
* JS is also responsible for keyboard navigation (arrow keys, Escape, Home/End).
*/
/* ==========================================================================
DROPDOWN WRAPPER
========================================================================== */
.ds-dropdown {
position: relative;
display: inline-flex;
}
/* ==========================================================================
DROPDOWN MENU
========================================================================== */
.ds-dropdown__menu {
position: absolute;
z-index: var(--ds-z-dropdown);
min-width: 200px;
padding: var(--space-1) 0;
background: var(--color-bg-primary);
border: var(--border-width-1) solid var(--color-border-default);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
/* Hidden by default */
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity var(--duration-fast) var(--ease-out),
visibility var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
}
.ds-dropdown__menu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Positioning variants */
.ds-dropdown__menu--bottom-left,
.ds-dropdown__menu:not([class*="--top"]):not([class*="--bottom-right"]) {
top: calc(100% + var(--space-1));
left: 0;
}
.ds-dropdown__menu--bottom-right {
top: calc(100% + var(--space-1));
right: 0;
left: auto;
}
.ds-dropdown__menu--top-left {
bottom: calc(100% + var(--space-1));
top: auto;
left: 0;
transform: translateY(4px);
}
.ds-dropdown__menu--top-left.is-open {
transform: translateY(0);
}
.ds-dropdown__menu--top-right {
bottom: calc(100% + var(--space-1));
top: auto;
right: 0;
left: auto;
transform: translateY(4px);
}
.ds-dropdown__menu--top-right.is-open {
transform: translateY(0);
}
/* ==========================================================================
DROPDOWN ITEM
========================================================================== */
.ds-dropdown__item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
color: var(--color-text-default);
background: transparent;
border: none;
cursor: pointer;
text-align: left;
text-decoration: none;
white-space: nowrap;
transition: background var(--duration-instant) var(--ease-out);
}
.ds-dropdown__item:hover {
background: var(--color-interactive-hover);
}
.ds-dropdown__item:focus-visible {
outline: none;
background: var(--color-interactive-active);
}
.ds-dropdown__item--active {
background: var(--color-interactive-selected);
color: var(--color-brand-600);
font-weight: var(--font-weight-medium);
}
.ds-dropdown__item--disabled {
color: var(--color-text-disabled);
cursor: not-allowed;
pointer-events: none;
}
.ds-dropdown__item--danger {
color: var(--color-error-600);
}
.ds-dropdown__item--danger:hover {
background: var(--color-bg-error);
}
/* Item icon */
.ds-dropdown__item-icon {
flex-shrink: 0;
width: 16px;
height: 16px;
color: var(--color-icon-secondary);
}
.ds-dropdown__item--danger .ds-dropdown__item-icon {
color: var(--color-error-500);
}
/* ==========================================================================
DROPDOWN DIVIDER
========================================================================== */
.ds-dropdown__divider {
height: 1px;
margin: var(--space-1) 0;
background: var(--color-border-subtle);
border: none;
}
/* ==========================================================================
DROPDOWN SECTION HEADER
========================================================================== */
.ds-dropdown__header {
padding: var(--space-2) var(--space-4) var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-subtlest);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
/* ==========================================================================
SIZES
========================================================================== */
.ds-dropdown__menu--sm {
min-width: 160px;
}
.ds-dropdown__menu--sm .ds-dropdown__item {
padding: var(--space-1-5) var(--space-3);
font-size: var(--font-size-xs);
}
.ds-dropdown__menu--lg {
min-width: 260px;
}
/* Data Display */
/* --- ./avatars/_avatar.css --- */
/**
* Design System - Avatar Component
*
* User profile images and placeholders.
*/
/* ==========================================================================
BASE AVATAR
========================================================================== */
.ds-avatar {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: var(--radius-full);
background: var(--color-neutral-200);
color: var(--color-text-subtle);
font-weight: var(--font-weight-medium);
overflow: hidden;
flex-shrink: 0;
}
.ds-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
AVATAR SIZES
========================================================================== */
.ds-avatar--2xs {
width: 20px;
height: 20px;
font-size: var(--font-size-2xs);
}
.ds-avatar--xs {
width: 24px;
height: 24px;
font-size: var(--font-size-xs);
}
.ds-avatar--sm {
width: 32px;
height: 32px;
font-size: var(--font-size-sm);
}
/* Default is 40px */
.ds-avatar--md {
width: 48px;
height: 48px;
font-size: var(--font-size-base);
}
.ds-avatar--lg {
width: 64px;
height: 64px;
font-size: var(--font-size-lg);
}
.ds-avatar--xl {
width: 96px;
height: 96px;
font-size: var(--font-size-xl);
}
.ds-avatar--2xl {
width: 128px;
height: 128px;
font-size: var(--font-size-2xl);
}
/* ==========================================================================
AVATAR VARIANTS
========================================================================== */
/* Square avatar */
.ds-avatar--square {
border-radius: var(--radius-md);
}
/* Rounded square */
.ds-avatar--rounded {
border-radius: var(--radius-lg);
}
/* With border */
.ds-avatar--bordered {
border: 2px solid white;
box-shadow: var(--shadow-sm);
}
/* ==========================================================================
AVATAR PLACEHOLDER (initials)
========================================================================== */
.ds-avatar--placeholder {
background: var(--color-brand-100);
color: var(--color-brand-600);
}
/* Color variants for placeholders */
.ds-avatar--blue {
background: var(--color-info-100);
color: var(--color-info-600);
}
.ds-avatar--green {
background: var(--color-success-100);
color: var(--color-success-600);
}
.ds-avatar--yellow {
background: var(--color-warning-100);
color: var(--color-warning-600);
}
.ds-avatar--red {
background: var(--color-error-100);
color: var(--color-error-600);
}
/* ==========================================================================
AVATAR STATUS INDICATOR
========================================================================== */
.ds-avatar-wrapper {
position: relative;
display: inline-block;
}
.ds-avatar-status {
position: absolute;
bottom: 0;
right: 0;
width: 12px;
height: 12px;
background: var(--color-neutral-400);
border: 2px solid white;
border-radius: var(--radius-full);
}
.ds-avatar-status--online {
background: var(--color-success-500);
}
.ds-avatar-status--offline {
background: var(--color-neutral-400);
}
.ds-avatar-status--busy {
background: var(--color-error-500);
}
.ds-avatar-status--away {
background: var(--color-warning-500);
}
/* Status sizes based on avatar size */
.ds-avatar--sm + .ds-avatar-status,
.ds-avatar--xs + .ds-avatar-status {
width: 8px;
height: 8px;
}
.ds-avatar--lg + .ds-avatar-status,
.ds-avatar--xl + .ds-avatar-status {
width: 14px;
height: 14px;
}
/* ==========================================================================
AVATAR GROUP
========================================================================== */
.ds-avatar-group {
display: inline-flex;
flex-direction: row-reverse;
}
.ds-avatar-group .ds-avatar {
border: 2px solid white;
margin-left: -8px;
}
.ds-avatar-group .ds-avatar:last-child {
margin-left: 0;
}
/* Hover to show full avatars */
.ds-avatar-group:hover .ds-avatar {
margin-left: var(--space-1);
}
/* Count indicator for extra avatars */
.ds-avatar--count {
background: var(--color-neutral-200);
color: var(--color-text-subtle);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
/* ==========================================================================
AVATAR WITH BADGE
========================================================================== */
.ds-avatar-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
line-height: 18px;
text-align: center;
color: white;
background: var(--color-brand-500);
border: 2px solid white;
border-radius: var(--radius-full);
}
/* ==========================================================================
AVATAR ACTION (clickable)
========================================================================== */
.ds-avatar--action {
cursor: pointer;
transition: var(--transition-all-fast);
}
.ds-avatar--action:hover {
transform: scale(1.05);
}
.ds-avatar--action:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: 2px;
}
/* Upload avatar */
.ds-avatar--upload {
cursor: pointer;
border: 2px dashed var(--color-border-default);
background: var(--color-bg-secondary);
}
.ds-avatar--upload:hover {
border-color: var(--color-brand-500);
background: var(--color-brand-50);
}
.ds-avatar--upload:hover .ds-avatar__upload-icon {
color: var(--color-brand-500);
}
.ds-avatar__upload-icon {
color: var(--color-text-subtlest);
transition: color var(--duration-fast) var(--ease-out);
}
/* --- ./tables/_table.css --- */
/**
* Design System - Table Component
*
* Data tables with sorting, selection, and responsive behavior.
*/
/* ==========================================================================
TABLE WRAPPER
========================================================================== */
.ds-table-wrapper {
width: 100%;
overflow-x: auto;
border-radius: var(--radius-lg);
background: white;
box-shadow: var(--shadow-md);
}
.ds-table-wrapper--bordered {
box-shadow: none;
border: var(--border-default);
}
/* ==========================================================================
BASE TABLE
========================================================================== */
.ds-table {
width: 100%;
border-collapse: collapse;
font-size: var(--font-size-sm);
}
/* ==========================================================================
TABLE HEADER
========================================================================== */
.ds-table thead {
background: var(--color-bg-secondary);
}
.ds-table th {
padding: var(--space-3) var(--space-4);
text-align: left;
font-weight: var(--font-weight-semibold);
color: var(--color-text-subtle);
border-bottom: var(--border-default);
white-space: nowrap;
}
/* Sortable header */
.ds-table th[data-sortable] {
cursor: pointer;
user-select: none;
}
.ds-table th[data-sortable]:hover {
background: var(--color-neutral-200);
}
.ds-table__sort-icon {
display: inline-flex;
margin-left: var(--space-1);
opacity: 0.3;
}
.ds-table th[data-sorted] .ds-table__sort-icon {
opacity: 1;
}
/* ==========================================================================
TABLE BODY
========================================================================== */
.ds-table td {
padding: var(--space-3) var(--space-4);
border-bottom: var(--border-subtle);
color: var(--color-text-default);
vertical-align: middle;
}
.ds-table tbody tr:last-child td {
border-bottom: none;
}
/* Row hover */
.ds-table tbody tr:hover {
background: var(--color-bg-secondary);
}
/* Selected row */
.ds-table tbody tr.ds-table__row--selected {
background: var(--color-brand-50);
}
/* Clickable row */
.ds-table tbody tr.ds-table__row--clickable {
cursor: pointer;
}
/* ==========================================================================
TABLE VARIANTS
========================================================================== */
/* Striped */
.ds-table--striped tbody tr:nth-child(even) {
background: var(--color-bg-secondary);
}
/* Compact */
.ds-table--compact th,
.ds-table--compact td {
padding: var(--space-2) var(--space-3);
}
/* Borderless */
.ds-table--borderless th,
.ds-table--borderless td {
border: none;
}
/* ==========================================================================
TABLE CELL VARIANTS
========================================================================== */
/* Numeric data (right-aligned) */
.ds-table td.ds-table__cell--numeric,
.ds-table th.ds-table__cell--numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Actions cell */
.ds-table td.ds-table__cell--actions {
text-align: right;
white-space: nowrap;
}
/* Minimal width cell */
.ds-table th.ds-table__cell--fit,
.ds-table td.ds-table__cell--fit {
width: 1%;
white-space: nowrap;
}
/* Truncate long content */
.ds-table td.ds-table__cell--truncate {
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ==========================================================================
TABLE ELEMENTS
========================================================================== */
/* User cell (avatar + name) */
.ds-table__user {
display: flex;
align-items: center;
gap: var(--space-3);
}
.ds-table__user-info {
display: flex;
flex-direction: column;
}
.ds-table__user-name {
font-weight: var(--font-weight-medium);
color: var(--color-text-default);
}
.ds-table__user-email {
font-size: var(--font-size-xs);
color: var(--color-text-subtlest);
}
/* ==========================================================================
TABLE CHECKBOX
========================================================================== */
.ds-table__checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.ds-table th:first-child:has(.ds-table__checkbox),
.ds-table td:first-child:has(.ds-table__checkbox) {
width: 48px;
text-align: center;
}
/* ==========================================================================
TABLE FOOTER
========================================================================== */
.ds-table tfoot {
background: var(--color-bg-secondary);
font-weight: var(--font-weight-medium);
}
.ds-table tfoot td {
border-top: var(--border-default);
border-bottom: none;
}
/* ==========================================================================
TABLE CAPTION
========================================================================== */
.ds-table caption {
padding: var(--space-4);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
text-align: left;
caption-side: top;
}
/* ==========================================================================
PAGINATION
========================================================================== */
.ds-table-pagination {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-3) var(--space-4);
border-top: var(--border-subtle);
background: var(--color-bg-secondary);
font-size: var(--font-size-sm);
}
.ds-table-pagination__info {
color: var(--color-text-subtle);
}
.ds-table-pagination__controls {
display: flex;
align-items: center;
gap: var(--space-2);
}
.ds-table-pagination__btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: white;
border: var(--border-default);
border-radius: var(--radius-md);
color: var(--color-text-subtle);
cursor: pointer;
transition: var(--transition-all-fast);
}
.ds-table-pagination__btn:hover:not(:disabled) {
background: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-table-pagination__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ds-table-pagination__pages {
display: flex;
gap: var(--space-1);
}
.ds-table-pagination__page {
display: flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 var(--space-2);
background: transparent;
border: none;
border-radius: var(--radius-md);
color: var(--color-text-subtle);
cursor: pointer;
transition: var(--transition-all-fast);
}
.ds-table-pagination__page:hover {
background: var(--color-neutral-100);
}
.ds-table-pagination__page--active {
background: var(--color-brand-500);
color: white;
}
.ds-table-pagination__page--active:hover {
background: var(--color-brand-600);
}
/* ==========================================================================
RESPONSIVE TABLE
========================================================================== */
@media (max-width: 768px) {
.ds-table--responsive {
display: block;
}
.ds-table--responsive thead {
display: none;
}
.ds-table--responsive tbody,
.ds-table--responsive tr,
.ds-table--responsive td {
display: block;
}
.ds-table--responsive tr {
padding: var(--space-4);
border-bottom: var(--border-default);
}
.ds-table--responsive td {
display: flex;
justify-content: space-between;
padding: var(--space-2) 0;
border: none;
}
.ds-table--responsive td::before {
content: attr(data-label);
font-weight: var(--font-weight-semibold);
color: var(--color-text-subtle);
}
}
/* ==========================================================================
EMPTY TABLE STATE
========================================================================== */
.ds-table__empty {
padding: var(--space-12) var(--space-6);
text-align: center;
color: var(--color-text-subtlest);
}
.ds-table__empty td {
border: none;
}
/* Loading States */
/* --- ./loaders/_loader.css --- */
/**
* Design System - Loader Components
*
* Loading indicators and skeleton screens.
*/
/* ==========================================================================
SPINNER
========================================================================== */
.ds-spinner {
display: inline-block;
width: var(--size-6);
height: var(--size-6);
border: 3px solid var(--color-neutral-200);
border-top-color: var(--color-brand-500);
border-radius: var(--radius-full);
animation: spin 0.8s linear infinite;
}
/* Spinner Sizes */
.ds-spinner--xs {
width: var(--size-3);
height: var(--size-3);
border-width: var(--border-width-2);
}
.ds-spinner--sm {
width: var(--size-4);
height: var(--size-4);
border-width: var(--border-width-2);
}
/* Default is 24px (--size-6) */
.ds-spinner--md {
width: var(--size-8);
height: var(--size-8);
border-width: 3px;
}
.ds-spinner--lg {
width: var(--size-10);
height: var(--size-10);
border-width: var(--border-width-4);
}
.ds-spinner--xl {
width: var(--size-12);
height: var(--size-12);
border-width: var(--border-width-4);
}
/* Spinner Colors */
.ds-spinner--white {
border-color: rgba(255, 255, 255, 0.3);
border-top-color: white;
}
.ds-spinner--dark {
border-color: var(--color-neutral-300);
border-top-color: var(--color-neutral-700);
}
/* ==========================================================================
DOTS LOADER
========================================================================== */
.ds-dots {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.ds-dots__dot {
width: var(--size-2);
height: var(--size-2);
background: var(--color-brand-500);
border-radius: var(--radius-full);
animation: dotPulse 1.4s ease-in-out infinite;
}
.ds-dots__dot:nth-child(1) { animation-delay: 0s; }
.ds-dots__dot:nth-child(2) { animation-delay: 0.2s; }
.ds-dots__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotPulse {
0%, 80%, 100% {
transform: scale(0.6);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Dots Sizes */
.ds-dots--sm .ds-dots__dot {
width: 6px;
height: 6px;
}
.ds-dots--lg .ds-dots__dot {
width: 10px;
height: 10px;
}
/* ==========================================================================
PROGRESS BAR
========================================================================== */
.ds-progress {
width: 100%;
height: var(--size-2);
background: var(--color-neutral-200);
border-radius: var(--radius-full);
overflow: hidden;
}
.ds-progress__bar {
height: 100%;
background: var(--color-brand-500);
border-radius: var(--radius-full);
transition: width var(--duration-normal) var(--ease-out);
}
/* Indeterminate progress */
.ds-progress--indeterminate .ds-progress__bar {
width: 30%;
animation: indeterminate 1.5s ease-in-out infinite;
}
@keyframes indeterminate {
0% { transform: translateX(-100%); }
100% { transform: translateX(400%); }
}
/* Progress Sizes */
.ds-progress--sm {
height: 4px;
}
.ds-progress--lg {
height: 12px;
}
/* Progress Colors */
.ds-progress--success .ds-progress__bar { background: var(--color-success-500); }
.ds-progress--warning .ds-progress__bar { background: var(--color-warning-500); }
.ds-progress--error .ds-progress__bar { background: var(--color-error-500); }
/* ==========================================================================
SKELETON LOADING
========================================================================== */
.ds-skeleton {
background: linear-gradient(
90deg,
var(--color-neutral-200) 25%,
var(--color-neutral-100) 50%,
var(--color-neutral-200) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-md);
}
/* Skeleton Text */
.ds-skeleton--text {
height: var(--size-4);
width: 100%;
margin-bottom: var(--space-2);
}
.ds-skeleton--text-sm {
height: var(--size-3);
}
.ds-skeleton--text-lg {
height: var(--size-5);
}
/* Skeleton Heading */
.ds-skeleton--heading {
height: var(--space-7);
width: 60%;
margin-bottom: var(--space-4);
}
/* Skeleton Avatar */
.ds-skeleton--avatar {
width: var(--size-10);
height: var(--size-10);
border-radius: var(--radius-full);
}
.ds-skeleton--avatar-sm {
width: var(--size-8);
height: var(--size-8);
}
.ds-skeleton--avatar-lg {
width: var(--size-14);
height: var(--size-14);
}
/* Skeleton Image */
.ds-skeleton--image {
width: 100%;
aspect-ratio: 16 / 9;
}
.ds-skeleton--image-square {
aspect-ratio: 1;
}
/* Skeleton Button */
.ds-skeleton--button {
width: 100px;
height: 40px;
}
/* Skeleton Card */
.ds-skeleton--card {
height: 200px;
width: 100%;
}
/* ==========================================================================
SKELETON LAYOUTS
========================================================================== */
/* Card skeleton */
.ds-skeleton-card {
padding: var(--space-4);
background: white;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
}
.ds-skeleton-card__image {
height: 160px;
margin: calc(var(--space-4) * -1);
margin-bottom: var(--space-4);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
/* List item skeleton */
.ds-skeleton-list-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) 0;
}
.ds-skeleton-list-item__content {
flex: 1;
}
/* ==========================================================================
LOADING OVERLAY
========================================================================== */
.ds-loading-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
z-index: 10;
}
.ds-loading-overlay--dark {
background: rgba(0, 0, 0, 0.5);
}
/* ==========================================================================
LOADING STATE FOR ELEMENTS
========================================================================== */
.ds-loading {
position: relative;
pointer-events: none;
}
.ds-loading::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
/* ==========================================================================
EMPTY STATE
========================================================================== */
.ds-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-12);
text-align: center;
}
.ds-empty__icon {
width: var(--size-16);
height: var(--size-16);
margin-bottom: var(--space-4);
color: var(--color-neutral-400);
}
.ds-empty__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text-default);
margin-bottom: var(--space-2);
}
.ds-empty__message {
font-size: var(--font-size-sm);
color: var(--color-text-subtle);
margin-bottom: var(--space-6);
max-width: 400px;
}
/* Navigation */
/* --- ./navigation/_nav.css --- */
/**
* Design System - Navigation Components
*
* Tabs, breadcrumbs, pagination, and navigation patterns.
*/
/* ==========================================================================
TABS
========================================================================== */
.ds-tabs {
display: flex;
border-bottom: var(--border-default);
gap: var(--space-1);
}
.ds-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-subtle);
background: transparent;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
cursor: pointer;
transition: var(--transition-all-fast);
}
.ds-tab:hover {
color: var(--color-text-default);
background: var(--color-neutral-50);
}
.ds-tab--active {
color: var(--color-brand-500);
border-bottom-color: var(--color-brand-500);
}
.ds-tab:focus-visible {
outline: 2px solid var(--color-brand-500);
outline-offset: -2px;
}
.ds-tab:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Tab with badge/count */
.ds-tab__badge {
padding: var(--space-0-5) var(--space-2);
font-size: var(--font-size-xs);
background: var(--color-neutral-200);
border-radius: var(--radius-full);
}
.ds-tab--active .ds-tab__badge {
background: var(--color-brand-100);
color: var(--color-brand-600);
}
/* Tabs Variants */
.ds-tabs--pills {
border-bottom: none;
gap: var(--space-2);
}
.ds-tabs--pills .ds-tab {
border-radius: var(--radius-full);
border-bottom: none;
margin-bottom: 0;
}
.ds-tabs--pills .ds-tab--active {
background: var(--color-brand-500);
color: white;
}
.ds-tabs--pills .ds-tab--active .ds-tab__badge {
background: rgba(255, 255, 255, 0.2);
color: white;
}
/* Tabs - Contained */
.ds-tabs--contained {
background: var(--color-neutral-100);
border-radius: var(--radius-lg);
border-bottom: none;
padding: var(--space-1);
}
.ds-tabs--contained .ds-tab {
border-radius: var(--radius-md);
border-bottom: none;
margin-bottom: 0;
}
.ds-tabs--contained .ds-tab--active {
background: white;
color: var(--color-text-default);
box-shadow: var(--shadow-sm);
}
/* ==========================================================================
TAB PANELS
========================================================================== */
.ds-tab-panels {
padding-top: var(--space-4);
}
.ds-tab-panel {
display: none;
}
.ds-tab-panel--active {
display: block;
animation: var(--animate-fade-in);
}
/* ==========================================================================
BREADCRUMBS
========================================================================== */
.ds-breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
font-size: var(--font-size-sm);
}
.ds-breadcrumb {
display: inline-flex;
align-items: center;
color: var(--color-text-subtle);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.ds-breadcrumb:hover {
color: var(--color-brand-500);
}
.ds-breadcrumb--current {
color: var(--color-text-default);
font-weight: var(--font-weight-medium);
pointer-events: none;
}
.ds-breadcrumb__separator {
color: var(--color-neutral-400);
margin: 0 var(--space-1);
}
.ds-breadcrumb__icon {
width: 16px;
height: 16px;
margin-right: var(--space-1);
}
/* ==========================================================================
PAGINATION
========================================================================== */
.ds-pagination {
display: flex;
align-items: center;
gap: var(--space-1);
}
.ds-pagination__btn {
display: flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 var(--space-2);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-subtle);
background: transparent;
border: var(--border-default);
border-radius: var(--radius-md);
cursor: pointer;
transition: var(--transition-all-fast);
}
.ds-pagination__btn:hover:not(:disabled) {
background: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-pagination__btn--active {
background: var(--color-brand-500);
border-color: var(--color-brand-500);
color: white;
}
.ds-pagination__btn--active:hover {
background: var(--color-brand-600);
color: white;
}
.ds-pagination__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.ds-pagination__ellipsis {
padding: 0 var(--space-2);
color: var(--color-text-subtlest);
}
/* Pagination - Simple (prev/next only) */
.ds-pagination--simple {
justify-content: space-between;
}
.ds-pagination--simple .ds-pagination__btn {
gap: var(--space-2);
}
/* ==========================================================================
NAV LINKS (vertical navigation)
========================================================================== */
.ds-nav {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.ds-nav-item {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-subtle);
text-decoration: none;
border-radius: var(--radius-md);
transition: var(--transition-all-fast);
}
.ds-nav-item:hover {
background: var(--color-neutral-100);
color: var(--color-text-default);
}
.ds-nav-item--active {
background: var(--color-brand-50);
color: var(--color-brand-600);
}
.ds-nav-item--active:hover {
background: var(--color-brand-100);
}
.ds-nav-item__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.ds-nav-item__badge {
margin-left: auto;
padding: var(--space-0-5) var(--space-2);
font-size: var(--font-size-xs);
background: var(--color-neutral-200);
border-radius: var(--radius-full);
}
.ds-nav-item--active .ds-nav-item__badge {
background: var(--color-brand-100);
}
/* Nav group */
.ds-nav-group {
margin-bottom: var(--space-4);
}
.ds-nav-group__title {
padding: var(--space-2) var(--space-4);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-subtlest);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
/* ==========================================================================
STEPS / STEPPER
========================================================================== */
.ds-steps {
display: flex;
align-items: flex-start;
}
.ds-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.ds-step::before {
content: '';
position: absolute;
top: 16px;
left: calc(50% + 20px);
right: calc(-50% + 20px);
height: 2px;
background: var(--color-neutral-300);
}
.ds-step:last-child::before {
display: none;
}
.ds-step--completed::before {
background: var(--color-brand-500);
}
.ds-step__indicator {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-subtlest);
background: var(--color-neutral-200);
border-radius: var(--radius-full);
position: relative;
z-index: 1;
}
.ds-step--active .ds-step__indicator {
background: var(--color-brand-500);
color: white;
}
.ds-step--completed .ds-step__indicator {
background: var(--color-brand-500);
color: white;
}
.ds-step__content {
margin-top: var(--space-3);
text-align: center;
}
.ds-step__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-default);
}
.ds-step__description {
font-size: var(--font-size-xs);
color: var(--color-text-subtlest);
margin-top: var(--space-1);
}
/* Vertical steps */
.ds-steps--vertical {
flex-direction: column;
gap: 0;
}
.ds-steps--vertical .ds-step {
flex-direction: row;
align-items: flex-start;
gap: var(--space-4);
padding-bottom: var(--space-6);
}
.ds-steps--vertical .ds-step::before {
top: 32px;
left: 15px;
right: auto;
bottom: 0;
width: 2px;
height: auto;
}
.ds-steps--vertical .ds-step__content {
text-align: left;
margin-top: 0;
}
/* --- ./tabs/_tab.css --- */
/**
* Design System - Tabs Component
*
* Navigation tabs for switching between related views.
* Use role="tablist", role="tab", role="tabpanel" for accessibility.
*/
/* ==========================================================================
TAB CONTAINER
========================================================================== */
.ds-tabs {
width: 100%;
}
/* ==========================================================================
TAB LIST
========================================================================== */
.ds-tabs__list {
display: flex;
gap: 0;
border-bottom: var(--border-width-1) solid var(--color-border-default);
overflow-x: auto;
scrollbar-width: none;
}
.ds-tabs__list::-webkit-scrollbar {
display: none;
}
/* ==========================================================================
TAB ITEM
========================================================================== */
.ds-tab {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
font-family: var(--font-family-base);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-subtle);
background: transparent;
border: none;
border-bottom: var(--border-width-2) solid transparent;
margin-bottom: -1px;
cursor: pointer;
white-space: nowrap;
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.ds-tab:hover {
color: var(--color-text-default);
}
.ds-tab--active,
.ds-tab[aria-selected="true"] {
color: var(--color-brand-500);
border-bottom-color: var(--color-brand-500);
font-weight: var(--font-weight-semibold);
}
.ds-tab:focus-visible {
outline: none;
box-shadow: var(--shadow-focus-ring-brand);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.ds-tab:disabled,
.ds-tab--disabled {
color: var(--color-text-disabled);
cursor: not-allowed;
pointer-events: none;
}
/* Tab count badge */
.ds-tab__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
background: var(--color-neutral-200);
color: var(--color-text-subtle);
border-radius: var(--radius-full);
transition: background var(--duration-fast) var(--ease-out);
}
.ds-tab--active .ds-tab__badge,
.ds-tab[aria-selected="true"] .ds-tab__badge {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
/* ==========================================================================
VARIANTS
========================================================================== */
/* Pills variant - contained, rounded tabs on a background track */
.ds-tabs--pills .ds-tabs__list {
border-bottom: none;
gap: var(--space-1);
padding: var(--space-1);
background: var(--color-neutral-100);
border-radius: var(--radius-lg);
display: inline-flex;
}
.ds-tabs--pills .ds-tab {
border-bottom: none;
border-radius: var(--radius-md);
margin-bottom: 0;
}
.ds-tabs--pills .ds-tab--active,
.ds-tabs--pills .ds-tab[aria-selected="true"] {
background: var(--color-bg-primary);
color: var(--color-text-default);
box-shadow: var(--shadow-sm);
}
/* Enclosed variant - bordered tabs that connect to panel border */
.ds-tabs--enclosed .ds-tabs__list {
border-bottom: none;
gap: 0;
}
.ds-tabs--enclosed .ds-tab {
border: var(--border-width-1) solid transparent;
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
margin-bottom: 0;
}
.ds-tabs--enclosed .ds-tab--active,
.ds-tabs--enclosed .ds-tab[aria-selected="true"] {
background: var(--color-bg-primary);
border-color: var(--color-border-default);
color: var(--color-text-default);
border-bottom-color: var(--color-bg-primary);
position: relative;
z-index: 1;
}
/* ==========================================================================
TAB PANEL
========================================================================== */
.ds-tab-panel {
padding-top: var(--space-4);
}
.ds-tab-panel[hidden] {
display: none;
}
/* Disclosure */
/* --- ./accordions/_accordion.css --- */
/**
* Design System - Accordion Component
*
* Expandable/collapsible content panels.
*
* Usage:
*
*/
/* ==========================================================================
BASE
========================================================================== */
.ds-accordion {
width: 100%;
}
/* ==========================================================================
ITEM
========================================================================== */
.ds-accordion__item {
margin-bottom: 4%;
padding-bottom: 2%;
cursor: pointer;
border-bottom: 1px solid rgba(0, 0, 0, .1);
}
/* ==========================================================================
HEADER
========================================================================== */
.ds-accordion__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0;
border: none;
background: none;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
}
.ds-accordion__header:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
border-radius: 2px;
}
/* ==========================================================================
TITLE
========================================================================== */
.ds-accordion__title {
font-weight: 600;
font-size: 112%;
margin: 0;
}
/* ==========================================================================
ICON
========================================================================== */
.ds-accordion__icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.ds-accordion__item.is-open .ds-accordion__icon {
transform: rotate(180deg);
}
/* ==========================================================================
BODY
========================================================================== */
.ds-accordion__body {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease;
}
.ds-accordion__item.is-open .ds-accordion__body {
grid-template-rows: 1fr;
}
.ds-accordion__content {
overflow: hidden;
min-height: 0;
margin-top: 0;
font-weight: 300;
font-size: 95%;
transition: margin-top 0.3s ease, padding-bottom 0.3s ease;
}
.ds-accordion__item.is-open .ds-accordion__content {
margin-top: 2%;
padding-bottom: 2%;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media only screen and (max-width: 800px) {
.ds-accordion__item {
margin-bottom: 10%;
padding-bottom: 4%;
}
.ds-accordion__title {
font-size: 100%;
}
}
/* Layout Aids */
/* --- ./dividers/_divider.css --- */
/**
* Design System - Divider Component
*
* Visual separator between content sections.
* Use
for semantic separators or in non-list contexts.
*/
/* ==========================================================================
HORIZONTAL DIVIDER
========================================================================== */
.ds-divider {
display: block;
width: 100%;
height: 1px;
background: var(--color-border-subtle);
border: none;
margin: var(--space-4) 0;
}
.ds-divider--subtle {
background: var(--color-neutral-100);
}
.ds-divider--strong {
background: var(--color-border-strong);
}
/* ==========================================================================
VERTICAL DIVIDER
========================================================================== */
.ds-divider--vertical {
display: inline-block;
width: 1px;
height: 1em;
background: var(--color-border-subtle);
border: none;
vertical-align: middle;
margin: 0 var(--space-2);
}
/* ==========================================================================
DIVIDER WITH CENTERED TEXT
========================================================================== */
.ds-divider--text {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
margin: var(--space-4) 0;
background: transparent;
height: auto;
}
.ds-divider--text::before,
.ds-divider--text::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border-subtle);
}
.ds-divider__label {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-subtlest);
white-space: nowrap;
}
/* ==========================================================================
SPACING VARIANTS
========================================================================== */
.ds-divider--xs { margin: var(--space-2) 0; }
.ds-divider--sm { margin: var(--space-3) 0; }
.ds-divider--lg { margin: var(--space-6) 0; }
.ds-divider--xl { margin: var(--space-8) 0; }
.ds-divider--none { margin: 0; }