CSS Utilities

Core styles are what you need to write your custom css. They include custom properties, custom media queries and utilities.

Media queries

Inside the core style, we provide a set of breakpoints which you can use while building components and applications. To use them you have to import the relative file:

@import "@lualtek/react-components/core/utils/media.css";

Here the complete list of the available custom media queries you can use:

Viewport

@media (--from-extra-small);
/* min-width: 30em => 480px */
 
@media (--from-small);
/* (min-width: 48em) => 768px */
 
@media (--from-medium);
/* (min-width: 60em) => 960px */
 
@media (--from-large);
/* (min-width: 80em) => 1280px */
 
@media (--from-extra-large);
/* (min-width: 100em) => 1600px */

Orientation

@media (--portrait);
/* (orientation: portrait) */
 
@media (--landscape);
/* (orientation: landscape) */

System preferences

@media (--dark-scheme);
/* (prefers-color-scheme: dark) */
 
@media (--light-scheme);
/* (prefers-color-scheme: light) */
 
@media (--motion);
/* (prefers-reduced-motion: no-preference) */
 
@media (--reduced-motion);
/* (prefers-reduced-motion: reduce) */
 
@media (--opacity);
/* (prefers-reduced-transparency: no-preference) */
 
@media (--reduce-opacity);
/* (prefers-reduced-transparency: reduce) */
 
@media (--high-contrast);
/* (prefers-contrast: high) */
 
@media (--low-contrast);
/* (prefers-contrast: low) */

Pointers

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

Effects

The components come with a built-in react hook used to apply shared styles to the components. The hook is called useStyles and you can import it directly from @lualtek/react-components

Usage

import { useStyles } from "@lualtek/react-components";
 
const MyComponent = (props) => {
  const { vibrancy } = useStyles();
 
  return (
    <div {...vibrancy.attributes}>
      Apply default vibrancy style and add elevation shadow
    </div>
  );
};

Advanced Usage

This hook provides attributes for elevation and vibrancy, but elevation requires also custom properties to apply the shadow. You can use elevation.style to spread the custom properties inside the style attribute.

import { useStyles } from "@lualtek/react-components";
 
const MyComponent = (props) => {
  /**
   * You can pass an object to override the default values
   */
  const { vibrancy, elevation } = useStyles({
    elevation: {
      resting: 2,
      onHover: 4,
    },
    vibrancy: {
      color: "soft",
      saturation: "high",
    },
  });
 
  return (
    <div
      style={{ ...elevation.style }}
      {...elevation.attributes}
      {...vibrancy.attributes}
    >
      Apply default vibrancy style and add elevation shadow
    </div>
  );
};