SCSS Variables | UltraViolet

code UltraViolet SCSS Architecture & Theme Variables

UltraViolet ships with a layered Sass architecture that blends Bootstrap 5.3, HUI utilities, and the theme’s cyber-aesthetic components. This guide highlights the variables and files you will touch most often when customizing the dashboard.

info Quick Start: Most theme updates happen in resources/sass/_ultraviolet-tokens.scss (compile-time Sass variables) and resources/sass/_ultraviolet-theme.scss (runtime CSS custom properties). Rebuild assets with npm run build or npm run dev after making changes.

account_tree Main Entry Point: admin-vertical.scss

resources/sass/admin-vertical.scss orchestrates the vertical layout build. It loads Bootstrap primitives first, then UltraViolet tokens, theme variables, shared components, and layout-specific extras.

Import Order & Purpose

// --- Framework & Theme Imports ---
@import 'bs535/_functions.scss';     // Bootstrap functions
@import 'bs535/_mixins.scss';        // Bootstrap mixins
@import 'ultraviolet-tokens';        // Core UltraViolet Sass variables
@import 'bs535/_variables.scss';     // Bootstrap variables, fed by our tokens
@import 'thirdparty/hui-core';       // Base HUI component styles
@import 'thirdparty/hui-glass';      // Frosted glass utilities
@import 'ultraviolet-theme';         // CSS custom properties (light/dark)
@import 'admin-shared';              // Global admin styles and utilities
@import 'thirdparty/hui-vertical-menu'; // Sidebar + navigation system
@import 'ultraviolet-extras';        // HUD, cyber cards, and specialty UI

functions Bootstrap Functions & Mixins

Provides math, color, and responsive helpers leveraged across tokens and components.

palette UltraViolet Tokens

Defines brand colors, typography, spacing, and Bootstrap overrides via Sass variables.

contrast Theme Variables

Injects semantic CSS custom properties for light and dark modes.

style Shared & Extra Components

Bundles the reusable admin styles, HUI menu, and UltraViolet HUD extras.

palette Color System: Sass Tokens & CSS Variables

UltraViolet separates compile-time Sass tokens (for Bootstrap and mixins) from runtime CSS variables (for instant theme switching). Update both layers to keep the light and dark palettes in sync.

File: _ultraviolet-tokens.scss

Gray Scale Tokens

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #170229 !default;
$black: #000 !default;

CSS Custom Properties (Light Mode Defaults)

Softer tints tuned for readability on pale backgrounds.

:root,
[data-bs-theme="light"] {
  --uv-blue: #7cc5f9;
  --uv-indigo: #9959f6;
  --uv-purple: #a180d7;
  --uv-pink: #ec83cf;
  --uv-red: #e9858c;
  --uv-orange: #fdbb7d;
  --uv-yellow: #ffd954;
  --uv-green: #86f5af;
  --uv-teal: #7eaec5;
  --uv-cyan: #00b09d;
  --uv-primary: #a180d7;
  --uv-secondary: #00b09d;
  --uv-accent: #fdbb7d;
}

CSS Custom Properties (Dark Mode Palette)

High-contrast, saturated hues that punch through deep backgrounds.

[data-bs-theme="dark"] {
  --uv-blue: #1ba2f6;
  --uv-indigo: #6610f2;
  --uv-purple: #6f42c1;
  --uv-pink: #e634b3;
  --uv-red: #e0454e;
  --uv-orange: #f89317;
  --uv-yellow: #ffc107;
  --uv-green: #3cf281;
  --uv-teal: #3f81a2;
  --uv-cyan: #32fbe2;
  --uv-primary: #6f42c1;
  --uv-secondary: #32fbe2;
  --uv-accent: #f89317;
}

Compile-Time Brand Map

Used by Bootstrap mixins and component calculations.

$blue: #1ba2f6 !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e634b3 !default;
$red: #e0454e !default;
$orange: #f89317 !default;
$yellow: #ffc107 !default;
$green: #3cf281 !default;
$teal: #3f81a2 !default;
$cyan: #32fbe2 !default;

$primary: $purple !default;
$secondary: $cyan !default;
$success: $green !default;
$info: $blue !default;
$warning: $yellow !default;
$danger: $red !default;
$light: #8ce7ef !default;
$dark: $gray-900 !default;

lightbulb Tip: Reach for var(--uv-blue) in CSS for theme-aware colors, and use Sass tokens such as $blue when piping values through Bootstrap functions like shade-color().

dashboard_customize Layout & Sizing Controls

File: _admin-shared.scss

Layout-Specific CSS Variables

Adjusts structural measurements for the admin shell.

:root {
  --navbar-size: 70px;
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 70px;
  // Theme colors (sidebar/action bar) are defined in _ultraviolet-theme.scss
}

Spacing & Radii

Defined in the tokens file so Bootstrap picks them up.

$spacer: 2rem !default; // Base spacing (32px)

$border-width: 1px !default;
$border-radius: .25rem !default;
$border-radius-sm: .15rem !default;
$border-radius-lg: .5rem !default;
$border-radius-pill: 50rem !default;
$border-color: rgba($gray-500, .1) !default;

Component States

$component-active-bg: $pink !default;
$transition-base: all 0.15s ease-in-out !default;
$transition-fade: opacity 0.15s linear !default;
$transition-collapse: height 0.35s ease !default;

info Customization Tip: Update --sidebar-width for structural changes and tweak $spacer to scale application spacing globally.

text_fields Typography Tokens

File: _ultraviolet-tokens.scss

Font Families

$font-family-sans-serif: "Space Grotesk",
  -apple-system,
  BlinkMacSystemFont,
  "Segoe UI",
  Roboto,
  "Helvetica Neue",
  Arial,
  sans-serif,
  "Apple Color Emoji",
  "Segoe UI Emoji",
  "Segoe UI Symbol" !default;

$font-family-monospaced: "Ubuntu Sans Mono" !default;
$font-family-headings: "Orbitron" !default;
$headings-font-weight: 700 !default;

font_download Font Stack: Space Grotesk handles body copy, while Orbitron powers tech-forward headings and UI labels.

smart_button Buttons & Form Controls

File: _ultraviolet-tokens.scss

Button Sizing & Shadows

$input-btn-padding-y: .75rem !default;
$input-btn-padding-x: 1.5rem !default;
$input-btn-padding-y-sm: 0.375rem !default;
$input-btn-padding-x-sm: 0.75rem !default;
$input-btn-padding-y-lg: 1rem !default;
$input-btn-padding-x-lg: 1.5rem !default;

$btn-box-shadow: $box-shadow !default;
$btn-font-family: $font-family-headings;

Theme-Aware Form Controls

$input-bg: var(--form-control-bg, $gray-900) !default;
$input-disabled-bg: var(--form-control-disabled-bg, rgba($white, .1)) !default;
$input-color: var(--form-control-color, $white) !default;
$input-border-color: var(--form-control-border, $gray-800) !default;
$input-focus-border-color: $primary !default;
$input-focus-box-shadow: 0 0 0 0.25rem rgba($primary, 0.25) !default;
$input-placeholder-color: var(--form-control-placeholder, $text-muted) !default;
$form-select-bg: var(--form-select-bg, $gray-800) !default;
$input-group-addon-bg: var(--input-group-addon-bg, $gray-700) !default;

web_asset Cards, Shadows & Effects

File: _ultraviolet-tokens.scss

Card & Surface Defaults

$card-border-width: 2px !default;
$card-spacer-y: 1.75rem !default;
$card-spacer-x: 1rem !default;
$card-border-color: $border-color !default;
$card-cap-bg: transparent !default;
$card-cap-color: $white !default;
$card-color: $white !default;
$card-bg: transparent !default;

Atmospherics

$box-shadow: 1px 3px 24px -1px rgba($black, .15) !default;
$box-shadow-sm: 0 1px 1px rgba($black, .1) !default;
$hudbtn-letter-spacing: 0.3125rem !default;
$hudbtn-border: 4px solid !default;

admin_panel_settings Admin Shell Highlights

File: _ultraviolet-tokens.scss

Action Bar & Sidebar Defaults

$action-bar-color: #d5d5d5 !default;
$action-bar-bg: $gray-900 !default;
$main-menu-bg: $gray-900 !default;
$main-menu-color: $gray-100 !default;

info Note: These Sass defaults seed Bootstrap and HUI components. Final runtime colors come from the CSS variables set in _ultraviolet-theme.scss.

quick_reference Quick Reference: Common Customizations

Change Primary Brand Color

File: _ultraviolet-tokens.scss

$primary: $purple !default;

Swap in any token (e.g. $uv-aqua) or hex value.

Adjust Sidebar Width

File: _admin-shared.scss

:root {
  --sidebar-width: 300px;
}

Increase or decrease to fit your navigation needs.

Modify Dark Mode Accent

File: _ultraviolet-theme.scss

[data-bs-theme="dark"] {
  --uv-secondary: #3af0ff;
}

Update CSS variables for live theme switching.

Swap Font Stack

File: _ultraviolet-tokens.scss

$font-family-headings: "Your Heading Font" !default;

Remember to load the font via Vite first.

Global Spacing Scale

File: _ultraviolet-tokens.scss

$spacer: 1.5rem !default;

Tighten or loosen spacing across the entire UI.

Corner Radius Adjustments

File: _ultraviolet-tokens.scss

$border-radius: .5rem !default;

Blend cards and modals with your brand geometry.

build After Making Changes: Rebuild assets with npm run build (production) or keep npm run dev running to auto-refresh during development.

folder_open Sass File Overview

Key files in `resources/sass/`

File	Purpose	Key Content
`admin-vertical.scss`	Main entry point	Imports Bootstrap functions, UltraViolet tokens, shared styles, and extras
`_ultraviolet-tokens.scss`	Theme variables	Colors, spacing, typography, Bootstrap overrides
`_ultraviolet-theme.scss`	CSS custom properties	Light/dark semantic variables consumed at runtime
`_admin-shared.scss`	Admin layout utilities	Layout variables, global helpers, shared component styling
`_ultraviolet-components.scss`	Core component overrides	Buttons, forms, tables, navs tuned for both themes
`_ultraviolet-extras.scss`	HUD & dashboard extras	Cyber cards, modal HUD styling, offcanvas HUD controls
`bs535/`	Bootstrap 5.3.5	Framework functions, mixins, and component partials
`thirdparty/`	HUI ecosystem	Vertical menu, debugger, flexbox helpers, icon picker

check_circle Best Practices & Tips

check

Lean on CSS Variables

Use var(--uv-*) tokens in components for instant theme-switching support.

check

Centralize Overrides

Keep Sass changes inside _ultraviolet-tokens.scss so Bootstrap overrides remain predictable.

check

Respect !default

Preserve !default flags to make downstream overrides painless.

check

Test Both Themes

Flip the theme toggle to validate contrast, borders, and shadows in light and dark.

info

Avoid Hardcoded Hex

Route colors through tokens to keep the cyber aesthetic cohesive.

info

Leave Breadcrumbs

Document significant variable changes so future tweaks stay traceable.

Search

Quick Commands

Notifications

System Update Available

New User Registration

Backup Completed

Security Alert

Monthly Report Ready

Server Maintenance

Widgets & Cards

Mega Component

Dashboard Overview

Analytics

Performance

Customize

UI Elements

Forms & Tables

code UltraViolet SCSS Architecture & Theme Variables

account_tree Main Entry Point: admin-vertical.scss

Import Order & Purpose

functions Bootstrap Functions & Mixins

palette UltraViolet Tokens

contrast Theme Variables

style Shared & Extra Components

palette Color System: Sass Tokens & CSS Variables

File: _ultraviolet-tokens.scss

Gray Scale Tokens

CSS Custom Properties (Light Mode Defaults)

CSS Custom Properties (Dark Mode Palette)

Compile-Time Brand Map

dashboard_customize Layout & Sizing Controls

File: _admin-shared.scss

Layout-Specific CSS Variables

Spacing & Radii

Component States

text_fields Typography Tokens

File: _ultraviolet-tokens.scss

Font Families

smart_button Buttons & Form Controls

File: _ultraviolet-tokens.scss

Button Sizing & Shadows

Theme-Aware Form Controls

web_asset Cards, Shadows & Effects

File: _ultraviolet-tokens.scss

Card & Surface Defaults

Atmospherics

admin_panel_settings Admin Shell Highlights

File: _ultraviolet-tokens.scss

Action Bar & Sidebar Defaults

quick_reference Quick Reference: Common Customizations

Change Primary Brand Color

Adjust Sidebar Width

Modify Dark Mode Accent

Swap Font Stack

Global Spacing Scale

Corner Radius Adjustments

folder_open Sass File Overview

Key files in resources/sass/

check_circle Best Practices & Tips

Key files in `resources/sass/`