@wonderflow/react-components/core/utils/media.css

UI components from Wonderflow's Wanda design system

/** Breakpoints
  *  Conversion Table (base 16px)
  *  extra-small = 30em → 480px
  *  small = 48em → 768px
  *  medium = 60em → 960px
  *  large = 80em → 1280px
  *  extra-large = 100em → 1600px
  */

/* Mobile First Media Queries */

@custom-media --from-extra-small (min-width: token(--breakpoint-extra-small));
@custom-media --from-small      (min-width: token(--breakpoint-small));
@custom-media --from-medium     (min-width: token(--breakpoint-medium));
@custom-media --from-large      (min-width: token(--breakpoint-large));
@custom-media --from-extra-large (min-width: token(--breakpoint-extra-large));

/* Orientation Media Queries */

@custom-media --portrait        (orientation: portrait);
@custom-media --landscape       (orientation: landscape);

/* Color Scheme Media Queries */

@custom-media --dark-scheme     (prefers-color-scheme: dark);
@custom-media --light-scheme    (prefers-color-scheme: light);

/* Motion Media Queries */

@custom-media --motion          (prefers-reduced-motion: no-preference);
@custom-media --reduced-motion  (prefers-reduced-motion: reduce);

/* Opacity Media Queries */

@custom-media --opacity         (prefers-reduced-transparency: no-preference);
@custom-media --reduce-opacity  (prefers-reduced-transparency: reduce);

/* Contrast Media Queries */

@custom-media --high-contrast  (prefers-contrast: high);
@custom-media --low-contrast   (prefers-contrast: low);

/* Pointer Media Queries */

@custom-media --touch         (hover: none) and (pointer: coarse);
@custom-media --stylus        (hover: none) and (pointer: fine);
@custom-media --pointer       (hover) and (pointer: coarse);
@custom-media --mouse         (hover) and (pointer: fine);