Skip to content

Latest commit

 

History

History
149 lines (112 loc) · 4.23 KB

README.md

File metadata and controls

149 lines (112 loc) · 4.23 KB
Raw

radixui-colors-classless

npm

Modification of @radix-ui/colors that works without classes, adapted from radix-ui/colors#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";

Or

@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";

Or

@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");