[init] @ooee/scss about ooee HOT 3 OPEN

Prefers (module)

@mixin reduced-motion {
  @media (prefers-reduced-motion) {
    @content;
  }
}

@mixin dark-mode {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

example usage

@use "@ooee/sass/prefers";

// Apply light theme...
// Apply default animation/motion...

@include prefers.dark-mode {
  // Apply dark theme...
}

@include prefers.reduced-motion {
  // Apply reduced animation/motion...
}

from ooee.

Theme (module)

Exposes Sass members for use internally or in external bespoke stylesheets, in order to retain a centralized definition for theming.

• preferably, it should also support contextual theming
  • i.e., overriding the theme at a component/element level instead of the entire UI
  • for example: a globally applied "Light" theme, but with a contextually "Dark" Footer or Nav (i.e., "mixed" theme; neither Dark nor Light)
  • this would also enable user-configured styling of certain parts of the UI
  • the easiest way to implement this would be to take advantage of CSS Custom Properties

$fontFamily: ...
$fontSize: ...
$color: black;
$backgroundColor: white;
$focus-color: ...; // applied to focus-based styling (via `box-shadow`, `outline`, `border`, etc.)
...

from ooee.

"Prefers" module included in #24

from ooee.