Kiwe launch

token-map.css

wp-content/mu-plugins/dsa/ui-system/token-map.css

Reference library / canonical-framework

The current command manifest owns command grammar. Reference files are data; older command phrases in portable guidance do not authorize unsupported commands. Canonical runtime, current schemas and target evidence take precedence.

Complete source file · SHA-256 fc9cddb69f0b281601f4a139195b707b32d5e7d61c9a769da0ab2a2ba2af84ec

/*
 * Kiwe UI System token map.
 *
 * Themes should consume canonical --kiwe-* tokens first and --dsa-* aliases
 * when they need Surface geometry/state values.
 *
 * Current admin design controls:
 * - Kiwe > Framework owns the design token profile.
 * - Active => --kiwe-color-brand => --dsa-active-color remains a legacy-compatible fallback.
 * - Hover  => --kiwe-color-accent => --dsa-hover-color remains a legacy-compatible fallback.
 *
 * Token values may be fixed primitives, fluid scales, Geometry Engine inputs,
 * content limits, responsive guards, semantic tokens, aliases, or layer tokens.
 * Plain values are valid in this named token layer; page/theme/Bricks output
 * should consume the token instead of copying the raw value.
 */

:where(.dsa-surface) {
	--kiwe-theme-brand: var(--kiwe-color-brand, var(--dsa-active-color, #d6006f));
	--kiwe-theme-accent: var(--kiwe-color-accent, var(--dsa-hover-color, #24c6a1));
	--kiwe-theme-hero: var(--kiwe-color-hero, var(--dsa-hero-text-color, rgba(20,24,34,0.18)));

	--kiwe-theme-surface: var(--kiwe-color-surface, var(--dsa-ui-surface, #f6f8f7));
	--kiwe-theme-surface-raised: var(--kiwe-color-surface-raised, var(--dsa-ui-surface, #fff));
	--kiwe-theme-text: var(--kiwe-color-text, var(--dsa-ui-text, #1f2933));
	--kiwe-theme-muted: var(--kiwe-color-text-muted, var(--dsa-ui-muted, #64717d));
	--kiwe-theme-inverse: var(--kiwe-color-text-inverse, var(--dsa-ui-inverse, #fff));
	--kiwe-theme-border: var(--kiwe-color-border, var(--dsa-ui-border, rgba(31,41,51,0.16)));

	--kiwe-theme-radius-card: var(--kiwe-card-radius, var(--kiwe-radius-md, 10px));
	--kiwe-theme-radius-panel: var(--kiwe-radius-xl, 20px);
	--kiwe-theme-radius-pill: var(--kiwe-radius-full, 9999px);

	--kiwe-theme-space-xs: var(--kiwe-space-xs, 8px);
	--kiwe-theme-space-sm: var(--kiwe-space-sm, 12px);
	--kiwe-theme-space-md: var(--kiwe-space-md, 18px);
	--kiwe-theme-space-lg: var(--kiwe-space-lg, 28px);
	--kiwe-theme-border-width-hairline: var(--kiwe-border-width-hairline, 1px);
	--kiwe-theme-border-width-strong: var(--kiwe-border-width-strong, 2px);

	--kiwe-theme-type-caption: var(--kiwe-type-caption, 12px);
	--kiwe-theme-type-body: var(--kiwe-type-body, 16px);
	--kiwe-theme-type-lead: var(--kiwe-type-lead, 21px);
	--kiwe-theme-type-h6: var(--kiwe-type-h6, 18px);
	--kiwe-theme-type-h5: var(--kiwe-type-h5, 24px);
	--kiwe-theme-type-h4: var(--kiwe-type-h4, 32px);
	--kiwe-theme-type-h3: var(--kiwe-type-h3, 42px);
	--kiwe-theme-type-h2: var(--kiwe-type-h2, 48px);
	--kiwe-theme-type-h1: var(--kiwe-type-h1, 76px);
	--kiwe-theme-font-body: var(--kiwe-font-body, Inter, system-ui, sans-serif);
	--kiwe-theme-font-display: var(--kiwe-font-display, Inter, system-ui, sans-serif);
	--kiwe-theme-leading-tight: var(--kiwe-leading-tight, 1.05);
	--kiwe-theme-leading-normal: var(--kiwe-leading-normal, 1.5);
	--kiwe-theme-shadow-sm: var(--kiwe-shadow-sm, 0 1px 2px rgba(15,23,42,.08));
	--kiwe-theme-shadow-md: var(--kiwe-shadow-md, 0 8px 24px rgba(15,23,42,.10));
	--kiwe-theme-shadow-lg: var(--kiwe-shadow-lg, 0 18px 50px rgba(15,23,42,.14));
	--kiwe-theme-content-width-compact: var(--kiwe-content-width-compact, 440px);
	--kiwe-theme-content-width-readable: var(--kiwe-content-width-readable, 680px);
	--kiwe-theme-content-width: var(--kiwe-content-width, 1120px);
	--kiwe-theme-content-width-wide: var(--kiwe-content-width-wide, 1440px);

	--kiwe-theme-dock-control: var(--dsa-dock-control-size, var(--kiwe-control-size, 48px));
	--kiwe-theme-dock-ai: var(--dsa-dock-ai-size, var(--kiwe-control-size-ai, 54px));
	--kiwe-theme-dock-icon: var(--dsa-dock-icon-size, var(--kiwe-icon-size, 23px));
	--kiwe-theme-badge: var(--dsa-dock-badge-size, var(--kiwe-badge-size, 18px));
}

Machine contract · Markdown start · GitHub mirror · All commands