0.3.6 • Published 1 month ago
unocss-preset-palette v0.3.6
UNOCSS-PRESET-PALETTE
Install
// npm
npm i unocss-preset-palette
// yarn
yarn add unocss-preset-palette
// pnpm
pnpm add unocss-preset-palette
Usage
import { defineConfig, presetUno } from "unocss";
import presetPalette from "unocss-preset-palette";
export default defineConfig({
presets: [
presetUno(),
presetPalette({
// hsl | rgb
colorFormat: "hsl",
themeColors: {
// [hue, saturation, lightness]
primary: [100, "100%", "50%"],
tertiary: "#0000ff",
secondary: {
// dark theme
dark: "#ff0000",
// light theme
default: "#00ff00",
}
},
}),
],
});
<div class="text-primary/72"></div>
<div class="bg-primary/36"></div>
.text-primary\/72 {
// hsla
color: hsla(var(--un-palette-primary-color-hsl) / 0.72);
// rgba
// color: rgba(var(--un-palette-primary-color-rgb) / 0.72);
}
.bg-primary\/36 {
// hsla
background-color: hsla(var(--un-palette-primary-color-hsl) / 0.36);
// rgba
// background-color: rgba(var(--un-palette-primary-color-rgb) / 0.36);
}
Type Declarations
export type ThemeColors = Record<string, string | (string | number)[] | Record<string, string | (string | number)[]>>;
export interface CssVarName {
(name: string): string
prefix?: string
suffix?: string
}
export interface PaletteOptions {
/**
* define theme colors
*/
themeColors?: ThemeColors
/**
* @deprecated
*/
colors?: ThemeColors
/**
* @see "@vueuse/core/useColorMode"
*/
colorMode?: {
/**
* @default ':root'
*/
selector?: string
/**
* @default 'class'
*/
attribute?: string
/**
* @default 'light'
*/
defaultValue?: string
}
/**
* use opacity variable
*
* ```css
* .text-primary {
* --un-text-opacity: 1;
* color: rgb(var(--un-palette-primary-rgb) / var(--un-text-opacity));
* }
* ```
* @default true
*/
useOpacityVariable?: boolean
/**
* @default --un-palette-[name]-color
*/
cssVarName?: CssVarName
colorFormat?: "rgb" | "hsl"
}
License
MIT License © 2022-PRESENT Chizukicn
0.3.6
1 month ago
0.3.5
4 months ago
0.3.4
5 months ago
0.3.3
5 months ago
0.3.0
7 months ago
0.3.2
7 months ago
0.3.1
7 months ago
0.1.0
10 months ago
0.2.1
9 months ago
0.2.0
10 months ago
0.2.3
8 months ago
0.2.2
8 months ago
0.0.6
10 months ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago