Radixui-colors-classless NPM

radixui-colors-classless

Modification of @radix-ui/colors that works without classes, adapted from https://github.com/radix-ui/colors/pull/27.

Installation

NPM

npm i radixui-colors-classless

PNPM

pnpm add radixui-colors-classless

Yarn

yarn add radixui-colors-classless

CDN (jsDelivr)

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-alpha.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark-alpha.css">
    ...
</head>

Usage

Regular:

@import "radixui-colors-classless/slate.css";
@import "radixui-colors-classless/slate-alpha.css";
@import "radixui-colors-classless/slate-dark.css";
@import "radixui-colors-classless/slate-dark-alpha.css";

With url():

@import url("radixui-colors-classless/slate.css");
@import url("radixui-colors-classless/slate-alpha.css");
@import url("radixui-colors-classless/slate-dark.css");
@import url("radixui-colors-classless/slate-dark-alpha.css");

From jsDelivr CDN:

@import "https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate.css";
@import "https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-alpha.css";
@import "https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark.css";
@import "https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark-alpha.css";

@import url("https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate.css");
@import url("https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-alpha.css");
@import url("https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark.css");
@import url("https://cdn.jsdelivr.net/npm/radixui-colors-classless@latest/slate-dark-alpha.css");

The variables are named in the following format:

--slate-1, --slate-2, ..., --slate-12
--slate-a1,--slate-a2, ..., --slate-a12

Example usage:

.button {
    background-color: var(--cyan-9);
    color: var(--slate-1);
}
.button:hover {
    background-color: var(--cyan-10);
}

See https://www.radix-ui.com/colors for documentation of the colors themselves.

By default, these color schemes respect prefers-color-scheme for dark theme. If you only import non-dark-theme files, their colors will be used. If you import only dark theme files but your prefers-color-scheme is light, no colors will be usable.

Forcing a color scheme:

<div data-theme="light">...</div>
<div data-theme="dark">...</div>

You can check the format of the CSS files used at https://www.npmjs.com/package/radixui-colors-classless?activeTab=code

Editor Integration

VSCode

Enable autocompletion for the CSS variables in VSCode by installing the CSS Var Complete extension and adding the following in a .vscode/settings.json file in the root of your project.

{
    "cssvar.files": [
        "node_modules/radixui-colors-classless/*.css"
    ],
    // Do not ignore css files in node_modules, which is ignored by default
    "cssvar.ignore": [],
}

Autocompletion for CSS file paths are blocked by vscode#869. In the meantime, it's possible to do:

@import "/node_modules/radixui-colors-classless/slate.css";
@import "/node_modules/radixui-colors-classless/slate-alpha.css";
@import "/node_modules/radixui-colors-classless/slate-dark.css";
@import "/node_modules/radixui-colors-classless/slate-dark-alpha.css";

@import url("/node_modules/radixui-colors-classless/slate.css");
@import url("/node_modules/radixui-colors-classless/slate-alpha.css");
@import url("/node_modules/radixui-colors-classless/slate-dark.css");
@import url("/node_modules/radixui-colors-classless/slate-dark-alpha.css");

radix-ui colors classless css

@radix-ui/colors

@everything-registry/sub-chunk-2522

4 months ago

4 months ago

4 months ago

4 months ago