Effects

Box shadow

Prefix: shadow. Property: box-shadow. Not responsive.

Generated from the $shadows map in _config.scss.

Override or extend the scale in your config — the class names follow the map keys:

$shadows: (
  'sm': 0 1px 2px rgb(0 0 0 / 5%),
  'md': 0 4px 6px -1px rgb(0 0 0 / 10%),
  'lg': 0 10px 15px -3px rgb(0 0 0 / 10%),
  'xl': 0 20px 25px -5px rgb(0 0 0 / 10%),
  'inner': inset 0 2px 4px rgb(0 0 0 / 5%),
  'none': none
);
// → adds .shadow-inner

Safe to pair with .rounded-* — since 3.0.0 those classes no longer set overflow: hidden, so shadows are not clipped on rounded elements.

Filter

Prefix: filter. Property: filter. Not responsive.

Opacity

Prefix: opacity. Property: opacity. Not responsive.

Cursor

Prefix: cursor. Property: cursor. Not responsive.

Z-index

Prefix: z. Property: z-index. Responsive.

Generated from $z-index: -1, 0, 1, 2, 10, 20, 50, 100.

For named stacking (behind, dropdown, modal, …) use the z() helper with $z-layers instead of a magic number.

Responsive pattern: .z-{bp}-{value}

.z-md-10   → z-index: 10  (min-width: 768px)
.z-lg-50   → z-index: 50  (min-width: 1024px)

Transform

Prefixes: translate-x, translate-y, scale, rotate. Responsive.

These emit the standalone translate / rotate / scale properties, not the transform shorthand. That is the whole point: they are three separate properties, so .rotate-45 .scale-110 keeps both. A transform-based family would have the second class silently overwrite the first.

Translate steps are -100, -50, 0, 50, 100 (percent of the element's own box) on each axis; rotate steps are -180, -90, -45, 0, 45, 90, 180. Coarse on purpose — a transform step is a design decision, not a spectrum, and every value costs six rules once responsive variants are counted.

<!-- composes: both apply -->
<div class="rotate-45 scale-110">…</div>

Individual transform properties apply before transform, so stacking .rotate-45 onto .absolute-center (which uses transform: translate3d(…)) works — the element rotates, then gets centered.

Transition classes

Ready-made utility classes. Not responsive. Each uses the default 250ms duration and ease-in-out-quint easing from the transition mixin below.

All four animating classes are wrapped in @media (prefers-reduced-motion: no-preference), so they emit nothing for visitors whose system asks for reduced motion. .transition-none sits outside the query and always applies — turning motion off is safe regardless of the preference.

These complement the SCSS transition mixin documented below.

Transition mixin (SCSS API)

Defined in src/core/utils/_generators.scss. Use in your own SCSS — no utility class is emitted.

@use 'sulphuris/core/utils/generators';

.my-element {
  @include generators.transition(opacity);
}
// → transition: opacity 250ms cubic-bezier(0.86, 0, 0.07, 1)

Signature

@mixin transition(
  $properties,                                    // string or space-separated list
  $durations: config.$default-transition-duration, // default: 250ms
  $easings:   config.$default-transition-easing    // default: 'ease-in-out-quint'
)

Multiple properties with per-property duration and easing:

@include generators.transition(
  (opacity, transform),
  (200ms, 300ms),
  ('ease-in-out-quint', ease-out)
);
// → transition: opacity 200ms cubic-bezier(0.86, 0, 0.07, 1), transform 300ms ease-out

Custom easings

Defined in $custom-easings in _config.scss. Pass the name as a string; get-transition-fn resolves it to the cubic-bezier value.

Any standard CSS easing keyword (ease, ease-in, ease-out, linear, etc.) passes through unchanged.

Override defaults in your config:

$default-transition-duration: 200ms;
$default-transition-easing: ease-out;