General

variables

prefix

$prefix: fi- !default;

Description

CSS variable prefix for all custom properties.

Type

String

Used by

rootPrefix

$rootPrefix: --#{$prefix} !default;

Description

Root prefix for CSS custom properties (derived from $prefix).

Type

String

Used by

header-height

$header-height: 3.5rem !default;

Description

Default header height.

Type

Length

admonition-color-map

$admonition-color-map: (
  note: (
    color: #448aff,
    bg-color: rgba(68, 138, 255, 0.1),
  ),
  abstract: (
    color: #00b0ff,
    bg-color: rgba(0, 176, 255, 0.1),
  ),
  info: (
    color: #00b8d4,
    bg-color: rgba(0, 184, 212, 0.1),
  ),
  todo: (
    color: #5e9aff,
    bg-color: rgba(94, 154, 255, 0.1),
  ),
  tip: (
    color: #00bfa5,
    bg-color: rgba(0, 191, 165, 0.1),
  ),
  success: (
    color: #00c853,
    bg-color: rgba(0, 200, 83, 0.1),
  ),
  question: (
    color: #ffbd67,
    bg-color: rgba(255, 190, 0, 0.1),
  ),
  warning: (
    color: #ff9100,
    bg-color: rgba(255, 145, 0, 0.1),
  ),
  failure: (
    color: #ff5252,
    bg-color: rgba(255, 82, 82, 0.1),
  ),
  danger: (
    color: #ff1744,
    bg-color: rgba(255, 23, 68, 0.1),
  ),
  bug: (
    color: #f50057,
    bg-color: rgba(245, 0, 87, 0.1),
  ),
  example: (
    color: #651fff,
    bg-color: rgba(101, 31, 255, 0.1),
  ),
  quote: (
    color: #9e9e9e,
    bg-color: rgba(159, 159, 159, 0.1),
  ),
) !default;

Description

Color map of admonitions.

Type

Map

alert-color-map

$alert-color-map: (
  note: (
    border-color: #0969da,
    color: #0969da,
  ),
  tip: (
    border-color: #1a7f37,
    color: #1a7f37,
  ),
  important: (
    border-color: #8250df,
    color: #8250df,
  ),
  warning: (
    border-color: #bf8700,
    color: #9a6700,
  ),
  caution: (
    border-color: #cf222e,
    color: #d1242f,
  ),
) !default;

Description

Color map of GitHub-style alerts (light theme).

Type

Map

alert-color-map-dark

$alert-color-map-dark: (
  note: (
    border-color: #316dca,
    color: #478be6,
  ),
  tip: (
    border-color: #347d39,
    color: #57ab5a,
  ),
  important: (
    border-color: #8256d0,
    color: #986ee2,
  ),
  warning: (
    border-color: #966600,
    color: #c69026,
  ),
  caution: (
    border-color: #c93c37,
    color: #e5534b,
  ),
) !default;

Description

Color map of GitHub-style alerts (dark theme).

Type

Map

chroma-lexers

$chroma-lexers: (
  "🔥": "Mojo",
  "1s": "OnesEnterprise",
  "1s\\:enterprise": "OnesEnterprise",
  "abap": "ABAP",
  "abl": "OpenEdge ABL",
  "abnf": "ABNF",
  "aconf": "ApacheConf",
  "actionscript": "ActionScript",
  "actionscript3": "ActionScript 3",
  "ada": "Ada",
  "ada2005": "Ada",
  "ada95": "Ada",
  "agda": "Agda",
  "ahk": "AutoHotkey",
  "al": "AL",
  "alloy": "Alloy",
  "ampl": "AMPL",
  "ansible": "YAML+Jinja",
  "antlr": "ANTLR",
  "apache": "ApacheConf",
  "apacheconf": "ApacheConf",
  "apl": "APL",
  "applescript": "AppleScript",
  "aql": "ArangoDB AQL",
  "arduino": "Arduino",
  "arexx": "Rexx",
  "armasm": "ArmAsm",
  "art": "Arturo",
  "arturo": "Arturo",
  "as": "ActionScript",
  "as3": "ActionScript 3",
  "asm": "GAS",
  "astro": "Astro",
  "atl": "ATL",
  "autohotkey": "AutoHotkey",
  "autoit": "AutoIt",
  "awk": "Awk",
  "b3d": "BlitzBasic",
  "ballerina": "Ballerina",
  "bash": "Bash",
  "bash-session": "Bash Session",
  "basic": "QBasic",
  "bat": "Batchfile",
  "batch": "Batchfile",
  "beef": "Beef",
  "bf": "Brainfuck",
  "bib": "BibTeX",
  "bibtex": "BibTeX",
  "bicep": "Bicep",
  "bind": "Dns",
  "blitzbasic": "BlitzBasic",
  "bnf": "BNF",
  "bplus": "BlitzBasic",
  "bqn": "BQN",
  "brainfuck": "Brainfuck",
  "bsdmake": "Makefile",
  "c": "C",
  "c\\#": "C#",
  "c\\+\\+": "C++",
  "c3": "C3",
  "caddy": "Caddyfile",
  "caddy-d": "Caddyfile Directives",
  "caddyfile": "Caddyfile",
  "caddyfile-d": "Caddyfile Directives",
  "caddyfile-directives": "Caddyfile Directives",
  "capnp": "Cap'n Proto",
  "cassandra": "Cassandra CQL",
  "cassette": "VHS",
  "ceylon": "Ceylon",
  "cf3": "CFEngine3",
  "cfengine3": "CFEngine3",
  "cfg": "INI",
  "cfs": "Cfstatement",
  "chai": "ChaiScript",
  "chaiscript": "ChaiScript",
  "chapel": "Chapel",
  "cheetah": "Cheetah",
  "chpl": "Chapel",
  "cl": "Common Lisp",
  "clj": "Clojure",
  "clojure": "Clojure",
  "cmake": "CMake",
  "cobol": "COBOL",
  "coffee": "CoffeeScript",
  "coffee-script": "CoffeeScript",
  "coffeescript": "CoffeeScript",
  "common-lisp": "Common Lisp",
  "console": "Bash Session",
  "containerfile": "Docker",
  "coq": "Coq",
  "core": "Core",
  "cpp": "C++",
  "cql": "Cassandra CQL",
  "cr": "Crystal",
  "crystal": "Crystal",
  "csh": "Tcsh",
  "csharp": "C#",
  "css": "CSS",
  "csv": "CSV",
  "cucumber": "Gherkin",
  "cue": "CUE",
  "cython": "Cython",
  "d": "D",
  "dart": "Dart",
  "dax": "Dax",
  "desktop": "Desktop file",
  "desktop_entry": "Desktop file",
  "devicetree": "Devicetree",
  "diff": "Diff",
  "django": "Django/Jinja",
  "docker": "Docker",
  "dockerfile": "Docker",
  "dosbatch": "Batchfile",
  "dosini": "INI",
  "dtd": "DTD",
  "dts": "Devicetree",
  "duby": "Ruby",
  "dylan": "Dylan",
  "ebnf": "EBNF",
  "edn": "Clojure",
  "elisp": "EmacsLisp",
  "elixir": "Elixir",
  "elm": "Elm",
  "emacs": "EmacsLisp",
  "emacs-lisp": "EmacsLisp",
  "erb": "ERB",
  "erlang": "Erlang",
  "ex": "Elixir",
  "exs": "Elixir",
  "f90": "Fortran",
  "factor": "Factor",
  "fennel": "Fennel",
  "fish": "Fish",
  "fishshell": "Fish",
  "fnl": "Fennel",
  "forth": "Forth",
  "fortran": "Fortran",
  "fortranfixed": "FortranFixed",
  "fsharp": "FSharp",
  "gas": "GAS",
  "gawk": "Awk",
  "gd": "GDScript",
  "gd3": "GDScript3",
  "gdscript": "GDScript",
  "gdscript3": "GDScript3",
  "gemfile-lock": "Gemfile.lock",
  "gemfilelock": "Gemfile.lock",
  "gemini": "Gemtext",
  "gemtext": "Gemtext",
  "genshi": "Genshi",
  "genshitext": "Genshi Text",
  "gherkin": "Gherkin",
  "gleam": "Gleam",
  "glsl": "GLSL",
  "gmi": "Gemtext",
  "gmni": "Gemtext",
  "gnuplot": "Gnuplot",
  "go": "Go",
  "go-template": "Go Template",
  "golang": "Go",
  "gql": "GraphQL",
  "graphql": "GraphQL",
  "graphqls": "GraphQL",
  "groff": "Groff",
  "groovy": "Groovy",
  "gsed": "Sed",
  "handlebars": "Handlebars",
  "hare": "Hare",
  "haskell": "Haskell",
  "haxe": "Haxe",
  "hbs": "Handlebars",
  "hcl": "Terraform",
  "hexdump": "Hexdump",
  "hlb": "HLB",
  "hlsl": "HLSL",
  "holyc": "HolyC",
  "hs": "Haskell",
  "html": "HTML",
  "html\\+erb": "ERB",
  "html\\+genshi": "Genshi HTML",
  "html\\+kid": "Genshi HTML",
  "html\\+ruby": "ERB",
  "http": "HTTP",
  "hurl": "Hurl",
  "hx": "Haxe",
  "hxsl": "Haxe",
  "hylang": "Hy",
  "hypr": "Hyprlang",
  "hyprlang": "Hyprlang",
  "idr": "Idris",
  "idris": "Idris",
  "igor": "Igor",
  "igorpro": "Igor",
  "ini": "INI",
  "io": "Io",
  "iscdhcpd": "ISCdhcpd",
  "j": "J",
  "janet": "Janet",
  "java": "Java",
  "java-properties": "Properties",
  "javascript": "JavaScript",
  "jinja": "Django/Jinja",
  "jl": "Julia",
  "jq": "JQ",
  "js": "JavaScript",
  "json": "JSON",
  "jsonata": "JSONata",
  "jsonl": "JSON",
  "jsonnet": "Jsonnet",
  "jsx": "React",
  "julia": "Julia",
  "jungle": "Jungle",
  "kak": "Kakoune",
  "kakoune": "Kakoune",
  "kakrc": "Kakoune",
  "kakscript": "Kakoune",
  "kdl": "KDL",
  "kid": "Genshi",
  "kotlin": "Kotlin",
  "ksh": "Bash",
  "lateralus": "Lateralus",
  "latex": "TeX",
  "lean": "Lean4",
  "lean4": "Lean4",
  "lighttpd": "Lighttpd configuration file",
  "lighty": "Lighttpd configuration file",
  "lilypond": "LilyPond",
  "lisp": "Common Lisp",
  "llvm": "LLVM",
  "ltl": "Lateralus",
  "lua": "Lua",
  "luau": "Luau",
  "m2": "Modula-2",
  "make": "Makefile",
  "makefile": "Makefile",
  "mako": "Mako",
  "man": "Groff",
  "mariadb": "MySQL",
  "mason": "Mason",
  "materialize": "Materialize SQL dialect",
  "mathematica": "Mathematica",
  "matlab": "Matlab",
  "mawk": "Awk",
  "mbt": "MoonBit",
  "mcf": "MCFunction",
  "mcfunction": "MCFunction",
  "md": "Markdown",
  "meson": "Meson",
  "meson\\.build": "Meson",
  "mess": "Markless",
  "metal": "Metal",
  "mf": "Makefile",
  "minizinc": "MiniZinc",
  "mkd": "Markdown",
  "mlir": "MLIR",
  "mma": "Mathematica",
  "modelica": "Modelica",
  "modula2": "Modula-2",
  "mojo": "Mojo",
  "monkeyc": "MonkeyC",
  "moon": "MoonScript",
  "moonbit": "MoonBit",
  "moonscript": "MoonScript",
  "morrowind": "MorrowindScript",
  "mwscript": "MorrowindScript",
  "myghty": "Myghty",
  "mysql": "MySQL",
  "mzn": "MiniZinc",
  "mzsql": "Materialize SQL dialect",
  "nasm": "NASM",
  "natural": "Natural",
  "nawk": "Awk",
  "nb": "Mathematica",
  "ndisasm": "NDISASM",
  "newspeak": "Newspeak",
  "ng2": "Angular2",
  "nginx": "Nginx configuration file",
  "nim": "Nim",
  "nimrod": "Nim",
  "nix": "Nix",
  "nixos": "Nix",
  "no-highlight": "Plaintext",
  "nroff": "Groff",
  "nsh": "NSIS",
  "nsi": "NSIS",
  "nsis": "NSIS",
  "nu": "Nu",
  "obj-c": "Objective-C",
  "objc": "Objective-C",
  "objective-c": "Objective-C",
  "objectivec": "Objective-C",
  "objectpascal": "ObjectPascal",
  "ocaml": "OCaml",
  "octave": "Octave",
  "odin": "Odin",
  "ones": "OnesEnterprise",
  "onesenterprise": "OnesEnterprise",
  "openedge": "OpenEdge ABL",
  "openedgeabl": "OpenEdge ABL",
  "openscad": "OpenSCAD",
  "org": "Org Mode",
  "orgmode": "Org Mode",
  "pacmanconf": "PacmanConf",
  "perl": "Perl",
  "perl6": "Raku",
  "php": "PHP",
  "php3": "PHP",
  "php4": "PHP",
  "php5": "PHP",
  "phtml": "PHTML",
  "pig": "Pig",
  "pkgconfig": "PkgConfig",
  "pl": "Perl",
  "pl6": "Raku",
  "plain": "Plaintext",
  "plc": "Plutus Core",
  "plpgsql": "PL/pgSQL",
  "plutus-core": "Plutus Core",
  "po": "Gettext",
  "pony": "Pony",
  "posh": "PowerShell",
  "postgres": "PostgreSQL SQL dialect",
  "postgresql": "PostgreSQL SQL dialect",
  "postscr": "PostScript",
  "postscript": "PostScript",
  "pot": "Gettext",
  "pov": "POVRay",
  "powerquery": "PowerQuery",
  "powershell": "PowerShell",
  "pq": "PowerQuery",
  "progress": "OpenEdge ABL",
  "prolog": "Prolog",
  "promela": "Promela",
  "promql": "PromQL",
  "proto": "Protocol Buffer",
  "protobuf": "Protocol Buffer",
  "prql": "PRQL",
  "ps1": "PowerShell",
  "psd1": "PowerShell",
  "psl": "PSL",
  "psm1": "PowerShell",
  "puppet": "Puppet",
  "pwsh": "PowerShell",
  "py": "Python",
  "py2": "Python 2",
  "py3": "Python",
  "pyrex": "Cython",
  "python": "Python",
  "python2": "Python 2",
  "python3": "Python",
  "pyx": "Cython",
  "qbasic": "QBasic",
  "qbs": "QML",
  "qml": "QML",
  "r": "R",
  "racket": "Racket",
  "ragel": "Ragel",
  "raku": "Raku",
  "rb": "Ruby",
  "react": "React",
  "reason": "ReasonML",
  "reasonml": "ReasonML",
  "registry": "Reg",
  "rego": "Rego",
  "rest": "ReStructuredText",
  "restructuredtext": "ReStructuredText",
  "rexx": "Rexx",
  "rgbasm": "RGBDS Assembly",
  "rhtml": "ERB",
  "ring": "Ring",
  "rkt": "Racket",
  "rs": "Rust",
  "rst": "ReStructuredText",
  "ruby": "Ruby",
  "rust": "Rust",
  "s": "R",
  "sage": "Python",
  "salt": "YAML+Jinja",
  "sas": "SAS",
  "sass": "Sass",
  "scala": "Scala",
  "scdoc": "Scdoc",
  "scheme": "Scheme",
  "scilab": "Scilab",
  "scm": "Scheme",
  "scss": "SCSS",
  "sed": "Sed",
  "sh": "Bash",
  "shell": "Bash",
  "shell-session": "Bash Session",
  "sieve": "Sieve",
  "sls": "YAML+Jinja",
  "smali": "Smali",
  "smalltalk": "Smalltalk",
  "smarty": "Smarty",
  "sml": "Standard ML",
  "snbt": "SNBT",
  "snobol": "Snobol",
  "sol": "Solidity",
  "solidity": "Solidity",
  "sp": "SourcePawn",
  "spade": "Spade",
  "sparql": "SPARQL",
  "spec": "RPMSpec",
  "spitfire": "Cheetah",
  "splus": "R",
  "sql": "SQL",
  "sqlrpgle": "RPGLE",
  "squeak": "Smalltalk",
  "squid": "SquidConf",
  "squid\\.conf": "SquidConf",
  "squidconf": "SquidConf",
  "ssed": "Sed",
  "st": "Smalltalk",
  "starlark": "Python",
  "stylus": "Stylus",
  "sv": "Systemverilog",
  "svelte": "Svelte",
  "swift": "Swift",
  "systemd": "SYSTEMD",
  "systemverilog": "Systemverilog",
  "t-sql": "Transact-SQL",
  "tablegen": "TableGen",
  "tal": "Tal",
  "tape": "VHS",
  "tasm": "TASM",
  "tcl": "Tcl",
  "tcsh": "Tcsh",
  "templ": "Templ",
  "termcap": "Termcap",
  "terminfo": "Terminfo",
  "terraform": "Terraform",
  "tex": "TeX",
  "text": "Plaintext",
  "tf": "Terraform",
  "thrift": "Thrift",
  "toml": "TOML",
  "tradingview": "TradingView",
  "ts": "TypeScript",
  "tsql": "Transact-SQL",
  "tsx": "TypeScript",
  "turing": "Turing",
  "turtle": "Turtle",
  "tv": "TradingView",
  "twig": "Twig",
  "txtpb": "Protocol Buffer Text Format",
  "typescript": "TypeScript",
  "typoscript": "TypoScript",
  "typoscriptcssdata": "TypoScriptCssData",
  "typoscripthtmldata": "TypoScriptHtmlData",
  "typst": "Typst",
  "udiff": "Diff",
  "uxntal": "Tal",
  "v": "V",
  "vala": "Vala",
  "vapi": "Vala",
  "vb\\.net": "VB.net",
  "vbnet": "VB.net",
  "verilog": "Verilog",
  "vhdl": "VHDL",
  "vhs": "VHS",
  "vim": "VimL",
  "vlang": "V",
  "vsh": "V shell",
  "vshell": "V shell",
  "vtt": "WebVTT",
  "vue": "Vue",
  "vuejs": "Vue",
  "wast": "WebAssembly Text Format",
  "wat": "WebAssembly Text Format",
  "wgsl": "WebGPU Shading Language",
  "whiley": "Whiley",
  "winbatch": "Batchfile",
  "xml": "XML",
  "xml\\+genshi": "Genshi",
  "xml\\+kid": "Genshi",
  "xorg\\.conf": "Xorg",
  "yaml": "YAML",
  "yaml\\+jinja": "YAML+Jinja",
  "yang": "YANG",
  "z80": "Z80 Assembly",
  "zed": "Zed",
  "zig": "Zig",
  "zone": "Dns",
  "zsh": "Bash",
  "µcad": "Microcad",
  // Custom code type
  "go-html-template": "Go HTML Template",
  "markdown": "Markdown",
  "yml": "YAML"
) !default;

Description

Map of code identifiers/languages to Chroma supported languages. This file is auto-generated by pnpm gen:lexers, do not edit manually. See: https://github.com/hugo-fixit/FixIt/tree/main/packages/chroma-lexers

theme-colors

$theme-colors: (
  'primary': #1677ff,
  'secondary': #8b949e,
  'success': #52c41a,
  'info': #13c2c2,
  'warning': #faad14,
  'danger': #ff4d4f
) !default;

Description

Theme semantic color tokens.

Type

Map

Used by

breakpoints

$breakpoints: (
  'xs': null,
  'sm': 680px,
  'md': 960px,
  'lg': 1200px,
  'xl': 1440px,
) !default;

Description

Responsive breakpoints map for the media mixin.

Type

Map

Used by

theme-switch-animation-duration

$theme-switch-animation-duration: 0.5s !default;

Description

Duration of the theme-switch icon animation.

Type

Time

Used by

theme-switch-animation-easing

$theme-switch-animation-easing: cubic-bezier(0.22, 1, 0.36, 1) !default;

Description

Easing function for the theme-switch icon animation.

Type

String

Used by

z-indexes

$z-indexes: (
  "hide": -1,
  "auto": auto,
  "base": 1,
  "loading": 10,
  "sticky": 100,
  "fixed": 200
) !default;

Description

Z-index scale for consistent layering across the theme.

Type

Map

Used by

functions

fi-rgba

@function fi-rgba($color, $alpha: 1) { ... }

Description

Build an rgba-like color from any source color expression.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Source color, supports CSS vars such as fi-var(secondary).

Color or String none
$alpha

Alpha channel value in range 0..1.

Number1

Example

color: fi-rgba(fi-var(secondary), 0.2);

fi-var

@function fi-var($name, $fallback) { ... }

Description

Get CSS variable with prefix

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

CSS variable name (without prefix)

String none
$fallback

Optional fallback value

Any none

Returns

String

Complete CSS variable reference

Example

color: fi-var(global-font-color);
background: fi-var(custom-bg, #fff);

Requires

Used by

mixins

admonition

@mixin admonition($type, $color, $bg, $bg-collapsed: color.adjust($bg, $alpha: 0.15)) { ... }

Description

Define an admonition type with CSS custom properties

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$type

Admonition type name (empty string for default type)

String none
$color

Text/border color

Color none
$bg

Background color

Color none
$bg-collapsed

Collapsed title background color

Colorcolor.adjust($bg, $alpha: 0.15)

Example

// Define the default admonition type
@include admonition('', #1677ff, rgba(22, 119, 255, 0.1));

// Define a custom admonition type
@include admonition(custom, #9b59b6, rgba(155, 89, 182, 0.1));

// Define with explicit collapsed background color
@include admonition(important, #e91e63, rgba(233, 30, 99, 0.1), rgba(233, 30, 99, 0.25));

Requires

bold-dark

@mixin bold-dark($color) { ... }

Description

Make text bold and apply an extra text color in dark mode. The light theme keeps its original inherited color.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Bold text color used in dark mode

Color none

border-radius

@mixin border-radius($value, $radius) { ... }

Description

Mixin to set border-radius

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

The value of the border-radius, position (top, bottom, start, end) or keyword (full)

String or Number or List none
$radius

The radius of the border (only for position)

Number none

Example

@include border-radius;
@include border-radius(full);
@include border-radius(top);
@include border-radius(start);
@include border-radius(top, 10px);
@include border-radius(10px 20px 10px 20px);

Used by

box-shadow

@mixin box-shadow($when, $shadow) { ... }

Description

Mixin to apply box-shadow with timing control

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$when

When to show shadow: always | hover | never (default: always)

String none
$shadow

The box-shadow value

List none

Example

@include box-shadow;
@include box-shadow(hover);
@include box-shadow(never);
@include box-shadow(always, 0 4px 8px rgba(0, 0, 0, 0.15));

Requires

overflow-wrap

@mixin overflow-wrap($value) { ... }

Description

Apply word-wrap and overflow-wrap for cross-browser compatibility. TODO Superseded by text-wrap: wrap; in modern browsers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$value

Wrap value (e.g. break-word)

String none

Used by

scroll-state-query

@mixin scroll-state-query($container-name, $container-condition, $fallback-selector) { ... }

Description

Apply styles only when scroll-state container queries are supported. Unsupported browsers skip the container branch, and can optionally reuse the same styles through a fallback selector.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$container-name

Optional container name

String or Null none
$container-condition

Container query condition (without outer parentheses)

String none
$fallback-selector

Optional selector used as a fallback

String or Null none

Example

@include scroll-state-query('scroller', 'scroll-state(scrollable: top)') {
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
}
@include scroll-state-query('scroller', 'scroll-state(scrollable: top)', '&') {
  backdrop-filter: saturate(1.2) blur(10px);
}

focus-visible-ring

@mixin focus-visible-ring($size: $size: 1.3em, $offset: $offset: 0.2rem) { ... }

Description

Apply a focus-visible ring outline using a pseudo-element.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$size

Size of the focus ring

Length$size: 1.3em
$offset

Offset from the element

Length$offset: 0.2rem

inline-code

@mixin inline-code() { ... }

Description

Shared inline code styles using theme CSS variables.

Parameters

None.

Requires

loading

@mixin loading() { ... }

Description

Loading pseudo-element styles for async content.

Parameters

None.

Requires

media

@mixin media($target, $direction) { ... }

Description

Apply styles within a named media target.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$target

Target name: xs | sm | md | lg | xl | print | reduce-motion

String none
$direction

Range direction: only | up | down [default: only]

String none

Example

// xs: < 680px
@include media('xs') { ... }
// sm: 680px – 959.9px
@include media('sm') { ... }
// md and above: ≥ 960px
@include media('md', 'up') { ... }
// lg and below: ≤ 1199.9px
@include media('lg', 'down') { ... }
// print media
@include media('print') { ... }
// reduced motion
@include media('reduce-motion') { ... }

Requires

Used by

page-style

@mixin page-style($variant) { ... }

Description

Page style helper for setting responsive content width.

This mixin has two modes: 1) Default mode (no arguments): emits the base page-style rules for all built-in targets. 2) Variant mode (pass $variant): emits rules under [data-page-style='$variant'] for the same targets.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$variant

Variant name (e.g. wide/narrow/custom). When null, emit defaults.

String or Null none

Example

// Theme internal: emit default rules
@include page-style;

// Theme internal: emit a built-in variant
@include page-style('wide') { ... }
@include page-style('narrow') { ... }

// User custom: add a custom variant without caring about internal selectors
@include page-style('custom') {
  @include media('xl') { width: ROUND(70%, 2px); }
}

Requires

scrollbar-width

@mixin scrollbar-width($width: $width: thin, $widthLegacy: $widthLegacy: 12px) { ... }

Description

Set scrollbar width CSS custom properties.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$width

Scrollbar width value

String$width: thin
$widthLegacy

Legacy scrollbar width

Length$widthLegacy: 12px

Requires

sticky-top-offset

@mixin sticky-top-offset($transition) { ... }

Description

Apply the shared sticky top offset used by TOC, collections, and code headers.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$transition

Whether to include the transition for top changes (default: true).

Top offset rules:

  • Base: keep space for the breadcrumb bar when no sticky header override applies.
  • Desktop auto: offset by header height while the header is visible.
  • Desktop auto hidden: reset to 0 when the auto header has faded out.
  • Desktop/mobile sticky: offset by header height plus breadcrumb height.
Boolean none

Requires

task-icon

@mixin task-icon($color) { ... }

Description

Set task list icon color and allow custom styles via @content

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Icon color (optional) Usage: @include task-icon(fi-var(secondary)) { opacity: 0.8; }

Color or Null none

Requires

task-text

@mixin task-text($color) { ... }

Description

Set task list text color and allow custom styles via @content

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$color

Text color (optional) Usage: @include task-text(fi-var(secondary)) { text-decoration: line-through fi-var(secondary); }

Color or Null none

Requires

theme-switch-mode

@mixin theme-switch-mode($mode, $icon) { ... }

Description

Bind a theme mode selector to an icon glyph and its matching animation.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$mode

Theme mode name: auto | light | dark

String none
$icon

Optional Font Awesome glyph code assigned to --fa

String or Null none

Example

@include theme-switch-mode('auto');
@include theme-switch-mode('light', '\f185');

Requires

theme-switch-keyframes

@mixin theme-switch-keyframes($name, $from-rotate, $from-scale, $from-opacity, $mid-step, $mid-rotate, $mid-scale) { ... }

Description

Generate one theme-switch keyframes block from a compact parameter list. The final state is intentionally shared so all modes settle on the same resting pose.

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

Animation suffix used in the generated keyframes name

String none
$from-rotate

Initial rotation angle

Angle none
$from-scale

Initial icon scale

Number none
$from-opacity

Initial icon opacity

Number none
$mid-step

Intermediate keyframe percentage such as 55% or 60%

String none
$mid-rotate

Intermediate rotation angle

Angle none
$mid-scale

Intermediate icon scale

Number none

Requires

set-fi-var

@mixin set-fi-var($name, $value) { ... }

Description

Set a single CSS variable

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$name

CSS variable name (without prefix)

String none
$value

Variable value

Any none

Example

@include set-fi-var(custom-color, #ff0000);

Requires

Used by

set-fi-vars

@mixin set-fi-vars($vars) { ... }

Description

Batch set CSS variables

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$vars

Variable map, key is CSS variable name (without prefix), value is variable value

Map none

Example

@include set-fi-vars((
  custom-color: #ff0000,
  custom-bg: #00ff00,
));

Requires

Used by

light-mode

@mixin light-mode() { ... }

Description

Light mode content wrapper

  • Explicit light mode: [data-theme-mode='light']
  • Auto mode with system light preference: [data-theme-mode='auto'] + prefers-color-scheme

Parameters

None.

dark-mode

@mixin dark-mode() { ... }

Description

Dark mode content wrapper

  • Explicit dark mode: [data-theme-mode='dark']
  • Auto mode with system dark preference: [data-theme-mode='auto'] + prefers-color-scheme

Parameters

None.

set-theme-colors

@mixin set-theme-colors() { ... }

Description

Batch set theme color variables using global $theme-colors Values are emitted via light-dark() and switched by CSS color-scheme.

Parameters

None.

Requires

define-theme-vars

@mixin define-theme-vars($vars) { ... }

Description

Define dual-theme variables with light-dark()

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$vars

Variable map, key is CSS variable name, value is Map(light: $light-val, dark: $dark-val)

Map none

Example

@include define-theme-vars((
  global-background-color: (light: $global-background-color, dark: $global-background-color-dark)
));

Requires

z-index

@mixin z-index($key, $diff) { ... }

Description

Mixin to set z-index

Parameters

parameter Nameparameter Descriptionparameter Typeparameter Default value
$key

The key of the z-index map or a raw number

String or Number none
$diff

The difference to add to the z-index

Number none

Example

@include z-index(base);
@include z-index(base, 1);

Requires

Used by