Effects

Box Shadow Color

Utilities for sets the shadow color to an element.

Class

Usage

<!-- Example -->
<y class="shadow-lg-red-400 ... bg-white h-32 w-32"></y>

v1.1.0 Set auto dark theme enabled to an element with added (dark) prefix.

<!-- Example -->
<y class="shadow-lg-red-400 ... (dark)shadow-lg-red-100 ... bg-white h-32 w-32">
  ...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
  $class: 'shadow-md-gray',
  $property: box-shadow,
  $modifier: (
    100: 0 0 6px #262626,
    200: 0 0 6px #252525
    //...
  )
);

// Add Variants
@include yogurt(
  $class: 'shadow-md-gray',
  $property: box-shadow,
  $modifier: (
    100: 0 0 6px #262626,
    200: 0 0 6px #252525
    //...
  ),
  $variant: (
    'dark-mode',
    'focus-within', 'focus-visible'
    //...
  )
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.