Errors

WovenUI core fails the compile instead of emitting broken CSS. A value that is not a configured key, a color that does not exist or a modifier in the wrong place stops Sass with a message, and every message names the valid options.

What core checks:

• Mixins, called directly or through apply(): keys, units, keywords and counts.
• apply() modifiers: unknown states and breakpoints, and more than one of each per item.
• Configuration maps passed with with(): see Configuration.
• Theme maps ($light-theme, $dark-theme and the high-contrast maps): see Theming.
• token() and get-color(): see Tokens.

What core does not check: class names in your markup. A class that matches no rule, such as class="p-7", produces no CSS and no message, because core never reads your HTML.

Every message below was produced by compiling the input with Dart Sass and is copied as printed. A list of valid options longer than one line is shortened with .... The key lists come from your configuration, so they change when you pass your own maps.

Scale keys and units

A unitless number in a scale mixin is a configuration key, never a raw value. Write a unit for a custom value.

Input	Message	Fix
p(7)	p: 7 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (7px, 7rem).	Use a key (p(6), p(8)) or a unit (p(1.75rem))
width(300)	width: 300 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (300px, 300rem).	width(300px)
rounded(8)	rounded: 8 is not a configured key. Valid keys: xs, sm, md, lg, xl, 2xl, full, none. Write a unit for a custom value (8px, 8rem).	rounded(lg) or rounded(8px)
font-size(17)	font-size: 17 is not a configured key. Valid keys: xs, sm, md, base, lg, xl, 2xl, 3xl, 4xl. Write a unit for a custom value (17px, 17rem).	font-size(lg) or font-size(17px)
p(-4)	p: negative key -4 is not allowed here. Negative keys work for margin, inset, offsets, translate and space only.	Padding is never negative; use m(-4) for a negative margin
p(-1rem)	p: negative value -1rem is not allowed here. Negative values work for margin, inset, offsets, translate and space only.	Same as above: m(-1rem)
p(auto)	p: auto is not a valid padding value.	Use a key or a length; auto belongs to margin (mx-auto)
gap(auto)	gap: unknown value auto. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a value with a CSS unit, calc(), var() or a keyword (normal, inherit, initial, unset, revert, revert-layer).	gap(normal) or gap(0)
width(3xl)	width: 3xl is not a sizing key. Use a spacing key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a percentage key (...), a breakpoint name (xs, sm, md, lg, xl, 2xl), a keyword (auto, min-content, max-content, fit-content) or a value with a length unit.	A breakpoint name (width(xl)) or a length
top(40p)	top: 40p is not a fraction key. Use 25p, 33p, 50p, 66p, 75p, 100p (or a negated key such as -25p), a spacing key or a value with a unit.	top(40%) or a fraction key
tracking(2)	tracking(2): use a key (tighter, tight, normal, wide, wider, widest), 0, a value with a unit, calc() or var().	tracking(wide) or tracking(0.02em)
opacity(0.5)	opacity(0.5): use a $opacities key (0, 5, 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90, 100) such as 50 for var(--wu-opacity-50), a percentage (50%), calc() or var().	opacity(50)
translate-x(7)	translate-x: 7 is not a spacing key. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a fraction key (25p, 33p, 50p, 66p, 75p, 100p) or a value with a unit.	translate-x(8) or translate-x(1.75rem)
rotate(30)	rotate: 30 has no unit. Write a unit (30deg).	rotate(30deg); rotate(45) is a key (45deg)
elevation(7)	elevation(7): use a level from 1 to 5.	elevation(5)
border-style(groove)	Unknown border style: groove. Use one of solid, dashed, dotted, double, none, a CSS-wide keyword (inherit, initial, unset, revert, revert-layer) or var().	One of the listed styles
p(4px 8px)	p: unknown value 4px 8px. Use a key (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64), a value with a CSS unit, calc(), var() or a keyword (inherit, initial, unset, revert, revert-layer).	One value per mixin: py(4px), px(8px)

Colors

Color words match the class names: bg(surface) is .bg-surface. Roles are brand, success, danger, warning and info; there is no primary.

Input	Message	Fix
bg(primary)	bg(primary): unknown color. Use a role (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink), a theme word (base, surface, alternate, raised, hover, selected, disabled), a hex color, a CSS color name, a color function (...), a keyword (...) or var().	bg(brand)
bg(bg-surface)	bg(bg-surface): unknown color. Use a role (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink), a theme word (base, surface, alternate, raised, hover, selected, disabled), a hex color, a CSS color name, a color function (...), a keyword (...) or var().	bg(surface): do not repeat the family
bg(red, 450)	bg(red, 450): invalid shade. Valid shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.	bg(red, 400) or bg(red, 500)
shadow(huge)	Shadow size 'huge' not found in config-shadow.$shadow-sizes map	A size: sm, md, lg, xl, hero, monster
shadow(md, blue)	Shadow color 'blue' not found in config-shadow.$shadow-colors map	A shadow color: default, dark, darker, darkest; or shadow-base() for a custom shadow
get-color(nope)	get-color(nope): unknown color. Use a semantic name (brand, success, danger, warning, info), a palette name (gray, red, blue, green, yellow, purple, pink) or a color value.	A role, a palette name or a color value
get-color(var(--x))	get-color(var(--x)): a CSS variable has no compile time color. Use the variable directly, or a color name or value.	Write var(--x) in the declaration; get-color() returns a fixed color for Sass math
get-color("#ggg")	Invalid hex character: g in #ggg.	A valid hex color

The fixed form of two errors above: p(7px) where p(7) failed, bg(brand) where bg(primary) failed

Compiles: 7px padding and the brand fill.

SCSS

@use "@wovenui/core" as *;

.notice {
  @include apply(p(7px), bg(brand), text-color(on-brand), rounded(md));
}

HTML

<div class="notice">Compiles: 7px padding and the brand fill.</div>

Compiled CSS

.notice {
  padding: 7px;
  background-color: var(--wu-brand);
  color: var(--wu-text-on-brand);
  border-radius: var(--wu-radius-md);
}

Tokens

token() takes the token name without the --wu- prefix and checks it against the emitted tokens.

Input	Message	Fix
token(text-mutd)	token(text-mutd): unknown token. Close matches: text-muted.	token(text-muted)
token(--wu-text-muted)	token(--wu-text-muted): pass the name without the prefix, e.g. token(text-muted).	token(text-muted)

apply() modifiers

Each apply() item is a mixin, then at most one state and one breakpoint, written after it. Some mistakes are caught by the Sass parser before core runs, so their message is the plain Sass one.

Input	Message	Fix
p(4) hovr	apply(p(4) hovr): unknown modifier hovr. Use a breakpoint (xs, sm, md, lg, xl, 2xl) or a state (...).	p(4) hover
p(4) md lg	apply(p(4) md lg): more than one breakpoint (md, lg). Use one breakpoint per item.	Two items: p(4) md, p(6) lg
p(4) hover focus	apply(p(4) hover focus): more than one state (hover, focus). Use one state per item.	Two items: p(4) hover, p(4) focus
hover:bg(gray, 100)	expected ")".	bg(gray, 100) hover: modifiers come after the utility

See apply() for the full item syntax.

Keyword scales

These mixins take a configured key, a keyword or a value of the right type.

Input	Message	Fix
leading(foo)	Unknown line height: foo. Use a $line-heights key (none, tight, snug, normal, relaxed, loose), a number, a length, calc(), var() or a keyword (normal, inherit, initial, unset, revert, revert-layer).	leading(tight)
ease(bounce)	Unknown timing function: bounce. Use a key (linear, in, out, in-out), cubic-bezier(), steps(), linear(), var() or a keyword (linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end).	ease(out) or a cubic-bezier()
duration(fast)	Unknown duration: fast. Use a key (0, 75, 100, 150, 200, 300, 500, 700, 1000), a time in s or ms, calc() or var().	duration(150) or duration(150ms)
z-index(top)	Unknown z-index: top. Use a key (auto, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 500, 1000), a level (base, hover, dropdown, sticky, fixed, overlay, drawer, modal, popover, tooltip, toast, max), an integer, auto, calc() or var().	A level: z-index(modal) or z-modal
font(heavy)	Unknown font weight: heavy. Use a key (thin, extralight, light, normal, medium, semibold, bold, extrabold, black) or a number from 1 to 1000.	font(black) or font(900)
cursor(foo)	cursor: unknown value foo. Use a cursor keyword (...), url() or var().	A CSS cursor keyword: cursor(pointer)

Grid and layout

Input	Message	Fix
cols(foo)	cols: foo is not a count. Use a whole number of 1 or more, calc() or var().	cols(3), or cols-custom() for a track list
cols(0)	cols: 0 is not a count. Use a whole number of 1 or more, calc() or var().	A count of 1 or more
col-span(full)	col-span: full is not a count. Use a whole number of 1 or more, calc() or var().	col-span(12)
auto-fit(4)	auto-fit: 4 is not a minimum width. Use a key (xs, sm, md, lg, xl), a length or percentage, calc() or var().	auto-fit(sm) or auto-fit(200px)
truncate-lines(1.5)	truncate-lines: 1.5 is not a line count. Use a whole number of 1 or more, calc() or var().	truncate-lines(2)
fill(0)	fill(0): use a whole number of columns from 1 to 12.	fill(1) to fill(12)
fill(1.5)	fill(1.5): use a whole number of columns from 1 to 12.	A whole number of columns
container(size)	container: size is not a display value. Use one of block, flex, grid, inline-block, inline-flex, inline-grid, flow-root, inherit, initial, unset, revert, revert-layer or var().	container(grid); for a query container use container-type(size)
aspect-ratio(video)	aspect-ratio: video is not a ratio. Use width and height (aspect-ratio(16, 9) or "16/9"), a positive number, auto, calc() or var().	aspect-ratio(16, 9)

Media and container queries

Input	Message	Fix
media-up(800)	Invalid breakpoint: 800 is not a breakpoint name (xs, sm, md, lg, xl, 2xl). Write a unit for a custom width (800px).	media-up(800px) or media-up(md)
media-between(lg, sm)	media-between(lg, sm): the lower breakpoint (1024px) must be smaller than the upper one (640px).	media-between(sm, lg)
container-query(30)	Invalid breakpoint: 30 is not a breakpoint name (xs, sm, md, lg, xl, 2xl). Write a unit for a custom width (30px).	container-query(30rem) or container-query(sm)
supports(display)	supports(display): pass a declaration as a quoted string, such as "display: grid".	supports("display: grid")

Animations

Animation mixins take a map of options. Unknown keys and values without units are reported.

Input	Message	Fix
animate-spin((durration: 2s))	animate-spin(): unknown key durration. Valid keys: direction, duration, timing, iteration.	animate-spin((duration: 2s))
animate-fade((type: sideways))	animate-fade(): unknown type sideways. Use in, out, in-up or in-down.	animate-fade((type: in-up))
animate-shake((intensity: 8))	animate-shake(): intensity 8 has no unit. Write a length such as 8px or 8rem.	animate-shake((intensity: 8px))

Configuration and theme maps

These errors come from the with() block of the first @use. Theme map values are checked together, so one compile reports every bad value at once.

Input in with()	Message	Fix
$light-theme: ("bg-surfase": #fff)	$light-theme has unknown tokens: bg-surfase. Fix the typo, or add a custom token to both $light-theme and $dark-theme.	"bg-surface"
$light-theme: ("bg-base": brand600)	1 theme value problem(s). Scales: brand, success, danger, warning, info, gray, red, blue, green, yellow, purple, pink. Light theme (defaults merged with $light-theme), token 'bg-base' (set in $light-theme) has a malformed scale reference (brand600). Write name and stop unquoted, separated by a space, e.g. brand 600. Valid stops: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950.	brand 600
$light-theme: ("error": red 700)	$light-theme: 'error' cannot be set; error tokens follow danger; override danger-* instead.	"danger": red 700
$light-theme: ("space-4": 2rem) (custom key, in both maps)	$light-theme: custom token 'space-4' is already a palette, basic color or scale token (--wu-space-4). Choose another name.	Change the scale with $spacings, or pick a new token name
$light-theme: ("bg-card": gray 50) (custom key, light map only)	$light-theme has unknown tokens: bg-card. Fix the typo, or add a custom token to both $light-theme and $dark-theme.	Add "bg-card" to $dark-theme too
$light-theme: ("bg-base": "#ggg")	1 theme value problem(s). Scales: brand, success, danger, warning, info, gray, red, blue, green, yellow, purple, pink. Light theme (defaults merged with $light-theme), token 'bg-base' (set in $light-theme): "#ggg" is not a valid hex color (#rgb, #rgba, #rrggbb or #rrggbbaa).	A valid hex color or a name stop reference
$high-contrast-theme: (...)	This variable was not declared with !default in the @used module.	$high-contrast-light and $high-contrast-dark
$color-primitives with a "brand" hue	'brand' is both a role ($semantic-colors) and a palette hue ($color-primitives). Rename one of them.	Give the hue another name
$feature-flags: ("theme": false), then bg(brand)	bg(brand): color names give --wu-* tokens, which are not emitted because the theme feature flag is off. Use a color value, or get-color(brand) for a compile time color.	bg(#007bff) or bg(get-color(brand))
$z-index-levels without tooltip	Tooltips need the key tooltip in $z-index-levels. Configured keys: base, hover, dropdown, sticky, fixed, overlay, drawer, modal, popover, toast, max. Add tooltip back to $z-index-levels.	Keep the tooltip level, or turn the tooltips feature flag off

The $high-contrast-theme message is the plain Sass one: core does not declare the variable, so Sass rejects it before core runs.

Contrast warning

One theme check is a warning, not an error: the compile succeeds. When text-on-{role} is computed from a fill and neither text-regular nor text-inverted reaches 4.5:1 on it, core prints a warning for each theme.

@use "@wovenui/core" as * with (
  $light-theme: ("brand": #808080),
  $dark-theme: ("brand": #808080)
);

WARNING: text-on-brand ($light-theme): the better of text-regular and text-inverted reaches 4.41:1 on the brand fill (#808080), below 4.5:1. Point the fill at another stop or set text-on-brand in $light-theme.

Fix: point the fill at a darker or lighter stop ("brand": brand 700), or set "text-on-brand" explicitly in the same map.

Reading an error

Core messages follow one format: the mixin or function name, often with the input you passed (p: 7, bg(primary)), what is wrong, then the valid options from your configuration. Read the options list first: it usually holds the value you meant.

Below the message, Sass prints the stack trace. The last line points at your file and line:

Error: "p: 7 is not a configured key. Valid keys: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64. Write a unit for a custom value (7px, 7rem)."
  ...
  src/styles/card.scss 2:6  root stylesheet

The lines above it are core’s own files and the mixins the call went through (p(), apply()), which tells you which item of an apply() list failed.

Try any input from this page in the playground to see the message without setting up a project.

Related

• apply(): item syntax, states and breakpoints.
• Configuration: the maps and flags passed with with().
• Theming: theme maps, name stop references and contrast.
• Tokens: token names for token().