/** * NextSportz Web — Design Token CSS Variables * Design System: Variant 7 — NextSportzV2 Brand Variant (2026) * * Source of truth: tournament.web/designs/config/ * - app_palette.dart → Raw color primitives * - theme_variants.dart → Variant 7 semantic mappings * * Usage: * - Reference these variables anywhere in .razor component CSS * - Used automatically when you use the Tailwind utilities from tailwind.config.js * - Dark mode: add class="dark" to element * * Include this file in your _Host.cshtml or App.razor : * */ /* ============================================================ PRIMITIVE TOKENS — AppPalette Do not use these directly in components. Use semantic tokens. ============================================================ */ :root { /* Gray Scale */ --ns-gray-100: #FFFFFF; --ns-gray-150: #F6F6F6; --ns-gray-200: #F6F8FB; --ns-gray-300: #E8ECFD; --ns-gray-400: #919AA8; --ns-gray-500: #5C6170; --ns-gray-600: #424B60; --ns-gray-700: #2D3750; --ns-gray-800: #23252A; --ns-gray-850: #16181A; --ns-gray-900: #101316; /* Brand (Primary) */ --ns-brand-100: #DDE7FE; --ns-brand-200: #BDD2FD; --ns-brand-300: #9BB6F9; --ns-brand-400: #819FF3; --ns-brand-500: #5A7CED; --ns-brand-600: #415ECA; --ns-brand-700: #2D45A9; --ns-brand-800: #1C2E88; --ns-brand-900: #111E72; /* Brand Secondary */ --ns-brand-sec-100: #FDEBDB; --ns-brand-sec-200: #D76A48; --ns-brand-sec-300: #670E12; /* Semantic */ --ns-success: #00C951; --ns-success-bg: #EEFBEE; --ns-success-dark:#004D2E; --ns-warning: #FE9900; --ns-warning-bg: #FEFBF2; --ns-warning-dark:#613300; --ns-danger: #F73C2F; --ns-danger-bg: #FEF8F4; --ns-danger-dark: #5F0B13; } /* ============================================================ SEMANTIC TOKENS — Variant 7 Light Mode (default) Maps design roles to palette primitives ============================================================ */ :root { /* Backgrounds */ --ns-bg-primary: var(--ns-gray-200); /* Page background */ --ns-bg-secondary: var(--ns-gray-100); /* Panel / section */ --ns-bg-card: var(--ns-gray-100); /* Card surface */ --ns-bg-surface: var(--ns-gray-200); /* Input fill, surface tint */ --ns-bg-surface-medium: var(--ns-brand-200); /* Selected / active state */ /* Accent */ --ns-accent: var(--ns-brand-500); /* #5A7CED — primary */ --ns-accent-sec: var(--ns-brand-sec-200); /* #D76A48 — secondary */ /* Text */ --ns-text-primary: var(--ns-gray-900); /* Headings, body copy */ --ns-text-secondary: var(--ns-gray-500); /* Hints, captions */ /* UI */ --ns-grey: var(--ns-gray-500); /* Muted icons */ --ns-grey-light: var(--ns-gray-300); /* Dividers, subtle borders */ --ns-border: var(--ns-gray-300); /* Component borders */ /* Gradient — v7PrimaryGradient */ --ns-gradient-brand: linear-gradient(to right, var(--ns-brand-500), var(--ns-brand-sec-200)); --ns-gradient-brand-v: linear-gradient(to bottom, var(--ns-brand-500), var(--ns-brand-sec-200)); --ns-gradient-card: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.12)); /* Shadows */ --ns-shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06); --ns-shadow-accent: 0 4px 14px rgba(90, 124, 237, 0.4); /* Border radius */ --ns-radius-card: 12px; --ns-radius-button: 30px; --ns-radius-input: 30px; --ns-radius-badge: 9999px; } /* ============================================================ SEMANTIC TOKENS — Variant 7 Dark Mode Applied when ============================================================ */ html.dark { --ns-bg-primary: var(--ns-gray-900); /* #101316 */ --ns-bg-secondary: var(--ns-gray-800); /* #23252A */ --ns-bg-card: var(--ns-gray-850); /* #16181A */ --ns-bg-surface: var(--ns-gray-800); /* Input fill */ --ns-bg-surface-medium: var(--ns-gray-700); /* Selected state */ --ns-text-primary: var(--ns-gray-100); /* #FFFFFF */ --ns-text-secondary: var(--ns-gray-400); /* #919AA8 */ --ns-grey: var(--ns-gray-400); --ns-grey-light: var(--ns-gray-600); --ns-border: var(--ns-gray-700); /* #2D3750 */ --ns-shadow-card: 0 1px 6px rgba(0, 0, 0, 0.4); } /* ============================================================ UTILITY CLASSES These can be used directly in Razor components as class="..." ============================================================ */ /* Backgrounds */ .ns-bg-primary { background-color: var(--ns-bg-primary); } .ns-bg-secondary { background-color: var(--ns-bg-secondary); } .ns-bg-card { background-color: var(--ns-bg-card); } .ns-bg-surface { background-color: var(--ns-bg-surface); } .ns-bg-surface-medium { background-color: var(--ns-bg-surface-medium); } .ns-bg-accent { background-color: var(--ns-accent); } .ns-bg-accent-sec { background-color: var(--ns-accent-sec); } /* Text */ .ns-text-primary { color: var(--ns-text-primary); } .ns-text-secondary { color: var(--ns-text-secondary); } .ns-text-accent { color: var(--ns-accent); } .ns-text-accent-sec{ color: var(--ns-accent-sec); } /* Borders */ .ns-border { border: 1px solid var(--ns-border); } .ns-border-accent { border: 1px solid var(--ns-accent); } /* Gradients */ .ns-gradient-brand { background-image: var(--ns-gradient-brand); } .ns-gradient-brand-v { background-image: var(--ns-gradient-brand-v); } .ns-gradient-card { background-image: var(--ns-gradient-card); } /* Shadows */ .ns-shadow-card { box-shadow: var(--ns-shadow-card); } .ns-shadow-accent { box-shadow: var(--ns-shadow-accent); } /* Radii */ .ns-radius-card { border-radius: var(--ns-radius-card); } .ns-radius-button { border-radius: var(--ns-radius-button); } .ns-radius-input { border-radius: var(--ns-radius-input); } .ns-radius-badge { border-radius: var(--ns-radius-badge); } /* ============================================================ COMPONENT BASE STYLES Override or extend with Tailwind utilities as needed ============================================================ */ /* Card */ .ns-card { background-color: var(--ns-bg-card); border: 1px solid var(--ns-border); border-radius: var(--ns-radius-card); padding: 1rem; box-shadow: var(--ns-shadow-card); } /* Button — Primary (gradient) */ .ns-btn-primary { background-image: var(--ns-gradient-brand); color: #FFFFFF; border: none; border-radius: var(--ns-radius-button); padding: 0.75rem 1.5rem; font-weight: 700; font-size: 1rem; cursor: pointer; box-shadow: var(--ns-shadow-accent); transition: opacity 0.2s ease; } .ns-btn-primary:hover { opacity: 0.9; } .ns-btn-primary:active { opacity: 0.8; } /* Button — Secondary (outlined) */ .ns-btn-secondary { background-color: transparent; color: var(--ns-text-primary); border: 1.5px solid var(--ns-border); border-radius: var(--ns-radius-button); padding: 0.75rem 1.5rem; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background-color 0.2s ease; } .ns-btn-secondary:hover { background-color: var(--ns-bg-surface); } /* Button — Text / Ghost */ .ns-btn-ghost { background-color: transparent; color: var(--ns-accent); border: none; border-radius: var(--ns-radius-button); padding: 0.5rem 1rem; font-weight: 700; font-size: 0.875rem; cursor: pointer; transition: background-color 0.2s ease; } .ns-btn-ghost:hover { background-color: var(--ns-brand-100, #DDE7FE); } /* Input */ .ns-input { background-color: var(--ns-bg-surface); color: var(--ns-text-primary); border: none; border-radius: var(--ns-radius-input); padding: 0.75rem 1rem; width: 100%; font-size: 0.875rem; outline: none; transition: box-shadow 0.2s ease; } .ns-input::placeholder { color: var(--ns-text-secondary); } .ns-input:focus { box-shadow: 0 0 0 2px var(--ns-accent); } .ns-input.invalid { outline: 1px solid var(--ns-danger); } .ns-input.valid { outline: 1px solid var(--ns-success); } /* Badge */ .ns-badge { display: inline-flex; align-items: center; border-radius: var(--ns-radius-badge); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 600; } .ns-badge-accent { background-color: var(--ns-brand-100, #DDE7FE); color: var(--ns-accent); } .ns-badge-success { background-color: var(--ns-success-bg); color: var(--ns-success); } .ns-badge-warning { background-color: var(--ns-warning-bg); color: var(--ns-warning); } .ns-badge-danger { background-color: var(--ns-danger-bg); color: var(--ns-danger); } /* Divider */ .ns-divider { border: none; border-top: 1px solid var(--ns-border); margin: 1rem 0; } /* Validation messages — matches Blazor defaults */ .validation-message { color: var(--ns-danger); font-size: 0.75rem; margin-top: 0.25rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid var(--ns-success); } .invalid { outline: 1px solid var(--ns-danger); }