Global

The single rule that ties theme tokens to the page: sets the html background and text colour from --kc-bg / --kc-fg, with literal fallbacks for environments where the theme hasn't loaded. Also emits the framework's default Windows High Contrast remap.

What it does

html { background-color: var(--kc-bg, #fff); color: var(--kc-fg, #27282b); } via the var-aware mixins: so theme switches propagate without a recompile.
Under @media (forced-colors: active), remaps the entire --kc-* token set to OS system colours (Canvas, CanvasText, LinkText, Highlight, HighlightText) so Windows High Contrast wins over the brand palette.

The forced-colors block is opt-out ($forced-colors-fallback: true by default). Set it to false if you'd rather author your own forced-colors handling per component.

Usage

@use '@adnap/krysalicss/base/global';

Enabled by default when you @use '@adnap/krysalicss';. Disable via the $feature-list flag list:

@use '@adnap/krysalicss' with ($feature-list: (
  // ... omit `base-global` if you set <html> bg/fg elsewhere
));

Variables

Variable	Default	Notes
`$background-fallback`	`#fff`	Used as the `var(--kc-bg, …)` fallback before any theme has loaded.
`$foreground-fallback`	`#27282b`	Used as the `var(--kc-fg, …)` fallback. Should clear AA against `$background-fallback`.
`$forced-colors-fallback`	`true`	Opt out of the framework's default `forced-colors: active` remap if you'd rather author your own.

Override example

@use '@adnap/krysalicss/base/global' with (
  $background-fallback: #f7f7f7,
  $foreground-fallback: #1a1a1a,
  $forced-colors-fallback: false, // author your own forced-colors block
);

Tokens consumed

Token	Used for
`--kc-bg`	Page background.
`--kc-fg`	Default text colour.

When to disable

You set <html> background and colour yourself (e.g. a CMS template that owns the document chrome).
You're embedding the framework in a shadow root: the host document already paints, and <html> styles inside the shadow tree have no effect.
You're authoring a CSS-modules build and don't want a global selector in the bundle.