#4201: variables-theme.scss

site/_sass/uikit/variables-theme.scss

Path: site/_sass/uikit/variables-theme.scss · Type: SCSS — UIkit theme variable overrides

Purpose: Defines theme-specific SCSS variables that customize the visual appearance of all UIkit components — brand colors, border radii, typography scales, component sizing. Overrides the core variables.scss (#4091) defaults with ProjectForge's brand identity.

Source: GitHub

1093 lines · 1093 code · 0 comments · 0 blank

SCSS variable override system

Commit	Message
`ac75fabf3`	Github pages migrated to Asciidoc
`acb790ad2`	Fix various typos

UIkit uses a two-layer variable architecture:

File	Role	When imported
`variables.scss` (#4091)	Core framework defaults — breakpoints, grid, z-indices, base colors	First
`variables-theme.scss` (this file)	ProjectForge brand overrides — colors, fonts, component-specific styling	Second (overrides core)

Because SCSS uses "last definition wins" semantics, every variable defined here that also exists in the core variables.scss overrides the core value. Variables defined only here are new additions for the theme. This file is the primary customization point — to change the website's look, edit this file, not the core variables.

What's typically customized here

Category	Variables	Effect on ProjectForge site
Brand colors	`$global-primary-background`, `$global-secondary-background`	Button colors, link colors, active tab underline, focus rings
Typography	`$global-font-family`, `$base-heading-*`	Font stack (system fonts for speed), heading sizes for documentation readability
Spacing	`$global-margin`, `$global-gutter`	Consistent spacing scale for cards, sections, nav
Components	`$navbar-`, `$card-`, `$button-*`	Component-specific defaults for the most-used components

Import chain: uikit-theme.scss (#4090) imports variables.scss first → then this file → then all component files. This ensures theme overrides are available to every component.