> Customization

Customization

The framework can be customized by editing the values of some CSS variables (custom properties) defined in the distribution file. They are located at the top making them easily accessible.

Contents

> Lengths

> Rounded corners

> Font

> Color palette

Lengths

To update the base length used throughout utility and component classes, update the value of the following CSS custom property located near the top of the distribution file.

CSS

--ox-base-length: 8px;

Rounded corners

Border radius has a global factor that can adjust rounded corners, even turn them off completely. You can do so by updating the value of the following CSS custom property near the top of the distribution file.

CSS

--ox-round-factor: 1;

Font

The following CSS custom properties control font size and font weight of utility and component classes. Update their values to customize.

CSS

html {
    font-size: 0.625rem;
}

body {
    font-size: 1.8rem;

    --ox-f-size-sm: 1.6rem;
    --ox-f-size-md: 1.8rem;
    --ox-f-size-lg: 2.2rem;
    --ox-f-size-xl: 2.6rem;
    --ox-f-size-2xl: 3.2rem;

    --ox-f-weight-sm: 400;
    --ox-f-weight-md: 400;
    --ox-f-weight-lg: 500;
    --ox-f-weight-xl: 600;
    --ox-f-weight-2xl: 700;
}

Color palette

Hues and corresponding chromas can be customized for both: dark and light color schemes.

CSS

/* Dark color scheme */
@media (prefers-color-scheme: dark) {
    body {
        color-scheme: dark;

        --ox-neutral-1: oklch(78% 0 0);
        --ox-neutral-2: oklch(20% 0 0);
        --ox-neutral-3: oklch(16% 0 0);

        --ox-a-1: oklch(78% 0.09 224);
        --ox-a-2: oklch(20% 0.02 224);
        --ox-a-3: oklch(16% 0.015 224);

        --ox-b-1: oklch(78% 0.09 108);
        --ox-b-2: oklch(20% 0.02 108);
        --ox-b-3: oklch(16% 0.015 108);

        --ox-c-1: oklch(78% 0.09 347);
        --ox-c-2: oklch(20% 0.02 348);
        --ox-c-3: oklch(16% 0.015 348);

        --ox-d-1: oklch(78% 0.09 160);
        --ox-d-2: oklch(20% 0.02 160);
        --ox-d-3: oklch(16% 0.015 160);

        --ox-background: oklch(0% 0 0);
    }
}

/* Light color scheme */
@media (prefers-color-scheme: light) {
    body {
         color-scheme: light;

         --ox-neutral-1: oklch(30% 0 0);
         --ox-neutral-2: oklch(88% 0 0);
         --ox-neutral-3: oklch(93% 0 0);

         --ox-a-1: oklch(30% 0.09 224);
         --ox-a-2: oklch(88% 0.035 224);
         --ox-a-3: oklch(93% 0.02 224);

         --ox-b-1: oklch(30% 0.09 108);
         --ox-b-2: oklch(88% 0.035 108);
         --ox-b-3: oklch(93% 0.02 108);

         --ox-c-1: oklch(30% 0.15 347);
         --ox-c-2: oklch(88% 0.035 347);
         --ox-c-3: oklch(93% 0.02 347);

         --ox-d-1: oklch(30% 0.09 160);
         --ox-d-2: oklch(88% 0.035 160);
         --ox-d-3: oklch(93% 0.02 160);

         --ox-background: oklch(100% 0 0);
    }
}