@quarkly/theme

Component for creating and using themes with @quarkly/atomize In Quarkly, themes are based on CSS variables.

The key feature of Quarkly themes is that variables from themes can be reused. To use variables from a theme, just describe the property in the theme and call this property using the prefix "--".

Demo

• Codesandbox
• Quarkly

Install and Usage

Themes are used together with atomize.

npm i @quarkly/atomize

npm i styled-components

The variables can be used both in JSX:

const theme = {
    colors: {
        dark: "#04080C",
    },
};
export const MyComp = () => (
    <Theme>
        <Box bgc="--colors-dark" height="100px" width="100px" />
    </Theme>
);

And in the theme:

const theme = {
    colors: {
        dark: "#04080C",
    },
    borders: {
        dark: "5px solid --colors-dark",
    },
};
export const MyComp = () => (
    <Theme>
        <Box border="--borders-dark" height="100px" width="100px" />
    </Theme>
);

Shorter syntax is used for colors in jsx markup:

const theme = {
    colors: {
        dark: "#04080C",
    },
};
export const MyComp = () => (
    <Theme>
        <Box bgc="--dark" height="100px" width="100px" />
    </Theme>
);

Themes have breakpoints for working with media expressions:

Any property can be prefixed with a breakpoint key name

const theme = {
    breakpoints: {
        sm: [{ type: "max-width", value: 576 }],
        md: [{ type: "max-width", value: 768 }],
        lg: [{ type: "max-width", value: 992 }],
    },
    colors: {
        dark: "#04080C",
    },
    borders: {
        dark: "5px solid --colors-dark",
    },
};
export const MyComp = () => (
    <Theme>
        <Box
            md-bgc="--dark"
            border="--borders-dark"
            height="100px"
            width="100px"
        />
    </Theme>
);

Advanced usage

• styles for a theme component
• CSS variables for components

Styles for a Theme Component

There is a mechanism for styling components directly from the theme. The key is the name property when creating a component in atomize:

const Box = atomize.div({ name: "Box" });
const theme = {
    Box: {
        width: "100px",
        height: "100px",
    },
};
export const MyComp = () => (
    <Theme>
        <Box bgc="yellow" />
    </Theme>
);

CSS Variables for Components

In some cases, it is necessary to specify the reused styles for one or a group of components.

For using such variables, specify the prefix "--cmp"

const Box = atomize.div({});
const theme = {
    components: {
        box: {
            height: {
                default: "100px",
            },
            width: {
                default: "100px",
            },
        },
    },
};
export const MyComp = () => (
    <Theme>
        <Box
            height="--cmp-box-height-default"
            witdh="--cmp-box-witdh-default"
            bgc="yellow"
        />
    </Theme>
);