Functions

Fusion provides a set of functions to help you style your components.

Sprinkle Functions

Atomic styling functions called “sprinkles” can be used for common CSS properties.

MyComponent.css.ts


import {
  background,
  padding,
  text,
} from "@codedazur/fusion-ui/style/sprinkles";
import { style } from "@vanilla-extract/css";
 
export const myClass = style([
  background({ color: "primary.base" }),
  padding({
    horizontal: 400,
    top: 300,
    bottom: 300,
  }),
  text({
    color: "primary.base",
    size: 300,
    weight: 700,
  }),
]);

Responsive Sprinkles

Most sprinkles support responsive styles out of the box. You can use the object syntax to apply different styles at different breakpoints. Responsive and non-responsive properties can be mixed and matched.


padding({
  horizontal: { small: 200, medium: 300, large: 400 },
  vertical: 300,
});

Inline Sprinkles

You can also use the sprinkle functions directly in the className of your components. This saves you the hassle of having to create a separate file and come up with names for the classes, without any additional runtime overhead.

MyComponent.tsx


import { classNames, text, padding, border } from "@codedazur/fusion-ui/style";
 
function MyComponent() {
  return (
    <div
      className={classNames([
        text({
          color: "primary.base",
          fontFamily: 1,
        }),
        padding(100),
        border({ radius: 100 }),
      ])}
    >
      Content styled with sprinkle functions
    </div>
  );
}

Responsive Utility

Besides the sprinkles, Fusion UI also provides a responsive() utility to apply the standard media queries to properties. This is useful for custom properties that are not supported by the sprinkles.

MyComponent.css.ts


import { responsive } from "@codedazur/fusion-ui/style/utilities/responsive";
import { tokens } from "@codedazur/fusion-ui/style";
 
const myClass = style({
  transform: responsive({
    small: "scale(0.8)",
    medium: "scale(0.9)",
    large: "scale(1)",
  }),
  gridTemplateColumns: responsive({
    small: "1fr",
    medium: "1fr 1fr",
    large: "1fr 1fr 1fr",
  }),
});