CSS Variables Reference
CSS variables (also known as custom properties) are a powerful feature of CSS that allow you to define reusable values throughout your stylesheets. They enable you to create a consistent design system and make it easier to manage and update your styles.
Variables
Typography
| Variable | Value(s) | Description |
|---|---|---|
--font-display | 'Segoe UI', 'SF Pro Text', 'Aria', 'sans-serif' | Main display font family |
--text-xxs | 0.625rem | Extra small text size |
Layout & Stacking
| Variable | Value(s) | Description |
|---|---|---|
--zindex-filter | 100 | Z-index level for filters |
--zindex-backdrop | 1000 | Z-index level for modal backdrop |
--zindex-drawer | 2000 | Z-index level for side drawers |
--zindex-tooltip | 3000 | Z-index level for tooltips |
--cdk-z-index-overlay | 5000 | Z-index for CDK overlays |
--panel-max-height | 100% | Maximum panel height |
Branding
| Variable | Value(s) | Description |
|---|---|---|
--logo-small | url('assets/logo/small.svg') | Path to small logo |
--logo-large | url('assets/logo/large.svg') | Path to large logo |
--logo-alt-text | 'Sinequa logo' | Alternative text for logo |
Colors - Base
| Variable | Value(s) | Description |
|---|---|---|
--color-background | #ffffff | Main background color |
--color-foreground | #23272e | Main text color |
--color-border | #f6f7f9 | Border color |
--color-input | #d5d9e2 | Input field color |
--color-ring | #1a73e8 | Focus ring color |
Colors - Components
| Variable | Value(s) | Description |
|---|---|---|
--color-card | #ffffff | Card background color |
--color-card-foreground | #1c1c1c | Card text color |
--color-popover | #ffffff | Popover background color |
--color-popover-foreground | #1c1c1c | Popover text color |
--color-backdrop | rgba(0, 0, 0, 0.4) | Semi-transparent backdrop color |
Colors - Interactive
| Variable | Value(s) | Description |
|---|---|---|
--color-primary | #0084ff | Primary color |
--color-primary-hover | #0056ff | Primary color hover state |
--color-primary-active | #0040bf | Primary color active state |
--color-primary-foreground | #ffffff | Text color on primary background |
--color-secondary | #526077 | Secondary color |
--color-secondary-hover | #434e61 | Secondary color hover state |
--color-secondary-active | #3a4252 | Secondary color active state |
--color-secondary-foreground | #ffffff | Text color on secondary background |
--color-muted | #f6f7f9 | Muted state color |
--color-muted-foreground | #8695aa | Muted text color |
--color-accent | #f2f2f2 | Accent color |
--color-accent-foreground | #1c1c1c | Text color on accent background |
Colors - Status
| Variable | Value(s) | Description |
|---|---|---|
--color-destructive | #ff2a1d | Color for destructive actions |
--color-destructive-hover | #c8180d | Destructive hover state |
--color-destructive-active | #a5180f | Destructive active state |
--color-destructive-disable | #ffc8c5 | Destructive disabled state |
--color-destructive-foreground | #ffffff | Text on destructive background |
--color-alert | #ff2a1d | Alert color |
--color-success | #2ed73f | Success color |
--color-highlight | #fff7ab | Highlight color |
Effects
| Variable | Value(s) | Description |
|---|---|---|
--drawer-box-shadow | -10px 0px 10px rgba(0, 0, 0, 0.1) | Shadow for side drawers |
--shadow-dropdown | 6px 4px 20px 0px rgba(0, 0, 0, 0.2) | Shadow for dropdowns |
--shadow-article | 4px 4px 12px 0px rgba(0, 0, 0, 0.15) | Shadow for articles |
--backdrop | rgba(0, 0, 0, 0.4) | Modal backdrop color |
--backdrop-filter | blur(2px) | Blur effect for modal backdrop |
--animate-progress | progress 5s linear infinite | Progress bar animation |
Chat Variables
| Variable | Value(s) | Description |
|---|---|---|
--ast-reference-expanded-hover-bg | #fff9 | Background color for expanded references on hover |
--ast-input-bg | white , #f8f8f8 | Background color for chat input area |
--ast-secondary-bg | #ffeab9 | Secondary background color for assistant messages |
--ast-user-font-weight | 600 | Font weight for user messages |
--ast-primary-bg | white | Primary background color for chat messages |
--ast-size-3 | 1.5rem | Base size for chat elements |
--text-xxs | 0.625rem | Extra small text size for chat interface |
--zindex-drawer-chat | 2500 | Z-index for chat drawer |
--color-primary | #0084ff | Primary color for interactive elements |
--color-primary-hover | #0056ff | Hover state for primary interactive elements |
--color-primary-foreground | #ffffff | Text color on primary background |
--color-muted | #f6f7f9 | Background color for muted elements |
--color-accent-foreground | #1c1c1c | Text color on accent background |