/* * $Id$ * * This file is part of the OpenLink Software Virtuoso Open-Source (VOS) * project. * * Copyright (C) 1998-2026 OpenLink Software * * This project is free software; you can redistribute it and/or modify it * under the terms of the GNU General Public License as published by the * Free Software Foundation; only version 2 of the License, dated June 1991. * * This program is distributed in the hope that it will be useful, but * WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU * General Public License for more details. * * You should have received a copy of the GNU General Public License along * with this program; if not, write to the Free Software Foundation, Inc., * 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA * */ /** * CSS Design Tokens for Faceted Browser * Modern design system with colors, typography, spacing, and effects */ :root { /* ======================================== COLOR SYSTEM ======================================== */ /* Primary Colors - Modern Blue Palette */ --color-primary-900: #1a365d; /* Deep blue - header background, dark elements */ --color-primary-800: #1e4976; /* Darker blue */ --color-primary-700: #2c5282; /* Medium blue - accents, hover states */ --color-primary-600: #2d6aa9; /* Standard blue */ --color-primary-500: #3182ce; /* Bright blue - primary actions, links */ --color-primary-400: #4a9fdb; /* Light blue */ --color-primary-300: #63b3ed; /* Lighter blue - hover backgrounds */ --color-primary-200: #90cdf4; /* Very light blue */ --color-primary-100: #bee3f8; /* Pale blue - selected states */ --color-primary-50: #ebf8ff; /* Subtle blue - light backgrounds */ /* Semantic Colors */ --color-success-700: #047857; /* Dark green */ --color-success-600: #059669; /* Green for success actions */ --color-success-500: #10b981; /* Bright green */ --color-success-100: #d1fae5; /* Light green background */ --color-success-50: #ecfdf5; /* Very light green background */ --color-error-700: #b91c1c; /* Dark red */ --color-error-600: #dc2626; /* Red for errors */ --color-error-500: #ef4444; /* Bright red */ --color-error-100: #fee2e2; /* Light red background */ --color-error-50: #fef2f2; /* Very light red background */ --color-warning-700: #b45309; /* Dark orange */ --color-warning-600: #d97706; /* Orange for warnings */ --color-warning-500: #f59e0b; /* Bright orange */ --color-warning-100: #fef3c7; /* Light orange background */ --color-warning-50: #fffbeb; /* Very light orange background */ --color-info-600: #0891b2; /* Cyan for info */ --color-info-100: #cffafe; /* Light cyan background */ /* Neutral Palette - Grays */ --color-neutral-900: #1f2937; /* Almost black - primary text */ --color-neutral-800: #1f2937; /* Very dark gray */ --color-neutral-700: #374151; /* Dark gray - secondary text */ --color-neutral-600: #4b5563; /* Medium-dark gray */ --color-neutral-500: #6b7280; /* Medium gray - muted text */ --color-neutral-400: #9ca3af; /* Light-medium gray */ --color-neutral-300: #d1d5db; /* Light gray - borders */ --color-neutral-200: #e5e7eb; /* Very light gray */ --color-neutral-100: #f3f4f6; /* Pale gray - light backgrounds */ --color-neutral-50: #f9fafb; /* Almost white - subtle backgrounds */ --color-white: #ffffff; /* Pure white */ /* ======================================== TYPOGRAPHY ======================================== */ /* Font Families */ --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font Sizes (rem-based, 16px root) */ --font-size-xs: 0.75rem; /* 12px - small labels, copyright */ --font-size-sm: 0.875rem; /* 14px - body text, navigation */ --font-size-base: 1rem; /* 16px - default body */ --font-size-lg: 1.125rem; /* 18px - larger text */ --font-size-xl: 1.25rem; /* 20px - h3, emphasis */ --font-size-2xl: 1.5rem; /* 24px - h2 */ --font-size-3xl: 1.875rem; /* 30px - h1 */ --font-size-4xl: 2.25rem; /* 36px - large headings */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --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-tight: -0.05em; --letter-spacing-normal: 0; --letter-spacing-wide: 0.025em; /* ======================================== SPACING SYSTEM (8px base) ======================================== */ --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-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* ======================================== SHADOWS ======================================== */ --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); --shadow-outline: 0 0 0 3px rgba(49, 130, 206, 0.1); --shadow-focus: 0 0 0 3px rgba(49, 130, 206, 0.3); /* ======================================== BORDER RADIUS ======================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Fully rounded */ /* ======================================== BORDERS ======================================== */ --border-width-0: 0; --border-width-1: 1px; --border-width-2: 2px; --border-width-4: 4px; /* ======================================== TRANSITIONS ======================================== */ --transition-fast: 0.15s ease-in-out; --transition-base: 0.2s ease-in-out; --transition-slow: 0.3s ease-in-out; --transition-slower: 0.5s ease-in-out; /* Easing functions */ --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); /* ======================================== Z-INDEX LAYERS ======================================== */ --z-base: 0; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; /* ======================================== LAYOUT BREAKPOINTS (for reference) ======================================== */ /* --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; --breakpoint-2xl: 1536px; */ /* ======================================== OPACITY ======================================== */ --opacity-0: 0; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-30: 0.3; --opacity-40: 0.4; --opacity-50: 0.5; --opacity-60: 0.6; --opacity-70: 0.7; --opacity-80: 0.8; --opacity-90: 0.9; --opacity-100: 1; }