1. Úvod
  2. Developer
  3. Standards
  4. Styles Structure
  5. Global Variables
Modifiers ›

Global Variables

Verze:

29. 01. 2026

Zodpovědná osoba:

Dominik Šlechta

Poslední aktualizace:

29. 01. 2026, rafael.quinterosv@gmail.com

This document defines REQUIRED rules for using global SCSS variables, mixins, and design tokens.All components MUST reuse predefined variables and mixins instead of hard-coded values in orderto ensure visual consistency, responsive behavior, and long-term maintainability across the project.

Introduction

This projects uses a centralized set of SCSS variables and mixins to ensure visual consistency, scalability, and easier maintenance across all components and modules.

All variables are defined globally and must be reused whenever possible instead of hard-coded values.

Media queries & responsiveness

A unified set of breakpoint variables defines the responsive behavior of the layout:

  • $min, $tiny, $small, $medium, $large, $xlarge, $max
    Standard breakpoints used across the project.

  • $content, $content__medium, $content__small
    Maximum content widths including page offsets.

Reusable mixins are provided for responsive styles:

  • @mixin media($query) – applies styles from a given minimum width.

  • @mixin media-hover($query) – applies hover styles only when hover is supported.

  • @mixin hover() – limits hover effects to desktop and hover-capable devices.

Utility mixins

Common reusable helpers are defined to reduce repetition and improve consistency:

  • @mixin pseudo() – standardized base styles for pseudo-elements (::before, ::after).

  • Hover-related mixins prevent unnecessary hover styles on touch devices.

Colors

Colors are grouped by purpose and usage:

Base colors

  • Primary, secondary, and grayscale color definitions used as the foundation of the design system.

Application colors

  • Background variants (light, dark, blue, pink, red).

  • Text colors (default, dark, light).

  • UI elements (buttons, links, borders, menus, tables).

  • Status colors (warning, danger, new, star).

All brand-related colors reference the primary color to maintain consistency.

Typography

Font families

  • $font__title – used for headings.

  • $font__text – used for body text.

  • $font__icon – icon font reference.

Font sizes

  • Dedicated variables for headings (h1–h5), text, buttons, and small text.

  • Responsive font sizes are defined using calc() for fluid typography where needed.

Line heights

  • Standardized values for large and small text blocks.

Spacing & layout units

A modular spacing system defines all margins, paddings, and offsets:

  • Base units: $unit__min → $unit__max

  • Offset variants for pages, sections, blocks, elements, titles, and text

  • Separate mobile and desktop spacing where necessary

This ensures consistent spacing across layouts and components.

Radius & visual depth

  • Border-radius variables define rounding levels from small to extra-large.

  • Shadow variables define consistent elevation and depth across UI elements.

Animation & transitions

Standardized easing values are used for transitions and animations:

  • $ease – default interaction timing

  • $ease__long – longer transitions

  • $ease__cubic – emphasized cubic-bezier easing

Icons

  • Centralized SVG icon path defined via $icons

  • Used consistently for icon-related components and utilities

Modifiers ›