CSS Variables

Prismane provides a set of global CSS variables that facilitate seamless theme integration into your applications. With Prismane's global CSS variables, you can achieve consistent theming across your entire application, making it effortless to create a cohesive and personalized user experience.

When you provide a theme to <PrismaneProvider/>, it will automatically transpile the passed object and generate a set of CSS variables, which would then be applied to the root element.

For example:

const theme = {
  colors: {
    primary: {
      50: "#fafafa",
      100: "#f7f7f7",
    },
  },
};

Will be transpiled into this:

:root {
  ...other theme CSS variables
  --prismane-colors-primary-50: "#fafafa";
  --prismane-colors-primary-100: "#f7f7f7";
}

Prismane's CSS variables can be used in CSS stylesheet files, as well as in components.

// index.css

.some-component-class {
  background-color: var(--prismane-colors-primary-500);
}

.some-other-component-class {
  font-size: calc(var(--prismane-spacing) * 4);
}

import { Box } from "@prismane/core";

const Page = () => {
  return (
    <Box
      style={{
        backgroundColor: "var(--primane-colors-primary-500)",
      }}
    >
      Hello, world
    </Box>
  );
};

export default Page;

This is a list of all CSS variables that Prismane adds to your app: