Accessibility mixins

Mixins for handling user preferences and accessibility.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. The A to Z index lists every public mixin and function.

Source: tools/_accessibility.scss

Mixins

prefers-dark dark-mode reduced-motion high-contrast

prefers-dark mixin

Wraps styles in a prefers-color-scheme: dark media query, following the OS setting only (data-theme is ignored).

@mixin prefers-dark

Content block

Styles to apply when the OS prefers a dark color scheme

Example

.logo {
  @include prefers-dark {
    filter: invert(1);
  }
}

Compiled CSS

@media (prefers-color-scheme: dark) {
  .logo {
    filter: invert(1);
  }
}

See also: dark-mode. Source: tools/_accessibility.scss:30

dark-mode mixin

Applies styles where the dark theme tokens resolve: on and under the elements a dark-valued theme block matches (data-theme="dark", data-theme="inverse" on a light page, a nested inverse section, and :root without data-theme when the OS is dark), stopping at a nested data-theme section that resolves light.

Uses CSS @scope (Chrome 118, Safari 17.4, Firefox 146); a browser without @scope ignores the dark-mode styles.

@mixin dark-mode

Content block

Styles to apply in dark mode

Output

One @scope rule per color scheme condition, rooted at the elements whose theme tokens are dark and bounded by nested data-theme sections. Nothing when $enable-dark-mode is false. At the top level the content applies to those dark elements, and rules nested in it to their descendants

Example

.card {
  @include dark-mode {
    box-shadow: none;
  }
}

Compiled CSS

@media not all and (prefers-color-scheme: dark) {
  @scope ([data-theme="dark"], [data-theme="inverse"]:not([data-theme="dark"] *, [data-theme="inverse"] *), [data-theme="dark"] [data-theme="inverse"] [data-theme="inverse"]) to ([data-theme="light"], [data-theme="dark"], [data-theme="inverse"]) {
    .card:scope, .card:is(:scope *) {
      box-shadow: none;
    }
  }
}
@media (prefers-color-scheme: dark) {
  @scope ([data-theme="dark"], :root:not([data-theme]), :root:not([data-theme]) [data-theme="inverse"] [data-theme="inverse"], [data-theme="inverse"]:not([data-theme="dark"] *, [data-theme="inverse"] *, :root:not([data-theme]) *), [data-theme="dark"] [data-theme="inverse"] [data-theme="inverse"]:not(:root:not([data-theme]) *)) to ([data-theme="light"], [data-theme="dark"], [data-theme="inverse"]) {
    .card:scope, .card:is(:scope *) {
      box-shadow: none;
    }
  }
}

See also: prefers-dark, dark-theme. Source: tools/_accessibility.scss:49

reduced-motion mixin

Wraps styles in a prefers-reduced-motion: reduce media query.

@mixin reduced-motion

Content block

Styles to apply when the user asks for reduced motion

Example

.spinner {
  @include reduced-motion {
    animation: none;
  }
}

Compiled CSS

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
  }
}

Source: tools/_accessibility.scss:89

high-contrast mixin

Wraps styles in a forced-colors: active media query (Windows high contrast and other forced color modes).

@mixin high-contrast

Content block

Styles to apply when the browser forces a limited color palette

Example

.button {
  @include high-contrast {
    border: 1px solid ButtonText;
  }
}

Compiled CSS

@media (forced-colors: active) {
  .button {
    border: 1px solid ButtonText;
  }
}

Source: tools/_accessibility.scss:103