Modification of @radix-ui/colors that works without classes, adapted from radix-ui/colors#27.
npm i radixui-colors-classlesspnpm add radixui-colors-classlessyarn add radixui-colors-classless<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> 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
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");