Color System
Versatile color palette and themable colors ready for your next project.
Our color system is divided into three categories:
- Tailwind CSS Defaults: The default colors provided by Tailwind CSS.
- Wedges Palette: A set of core colors that are consistent across all themes.
- Themable Colors: Configurable colors that adapt and change based on the active theme.
Wedges Palette
When using the Wedges color palette, you need to prefix color names with wg-, for example: bg-wg-gray-500. The default Tailwind CSS colors are available without the prefix.
Example
<div class="bg-yellow-400">Easy</div> // Tailwind color
<div class="bg-wg-yellow-400">Peasy</div> // Wedges color
<div class="bg-wg-yellow">Lemon Squeezy</div> // uses yellow.DEFAULT colorColor Scale
Similar to Tailwind CSS, the Wedges color palette utilizes a 10-step, graded color scale, along with a DEFAULT value. This default value is applied when no specific grade is provided through a class, such as in bg-wg-blue.
interface ColorScale {
50: string;
100: string;
200: string;
300: string;
400: string;
500: string;
600: string;
700: string;
800: string;
900: string;
DEFAULT: string;
}for example:
import type { ColorScale } from "wedges-vue";
const wg_blue: ColorScale = {
50: "#F0FAFF",
100: "#DBF3FF",
200: "#ADE4FF",
300: "#70D1FF",
400: "#38BEFF",
500: "#00ACFF",
600: "#0090D6",
700: "#0075AD",
800: "#005985",
900: "#003E5C",
DEFAULT: "#00ACFF",
};Customization
These colors can be customized under the colors key in the theme section of your tailwind.config.ts file:
const config: Config = {
// ...
theme: {
extend: {
colors: {
"wg-red": {
DEFAULT: "#ff0000",
500: "#ff0000",
},
},
},
},
// ...
};
export default config;Themable Colors
Themable colors are configurable and can adapt with multiple themes. By default, themable colors will adapt to dark and light themes, but you can easily add more themes to your project.
The following themable colors are available:
By default, background and foreground colors are applied to the <html> element.
Example
Toggle between light and dark mode to preview each theme.
Color Scale
Themable color scale is more flexible than Wedges Palette color scale, it is defined like this:
type ThemableColorScale = Partial<ColorScale> | string;
interface ThemableColors {
background: string;
foreground: string;
primary: ThemableColorScale;
secondary: ThemableColorScale;
surface: ThemableColorScale;
destructive: ThemableColorScale;
}This structure allows for a wide range of customization options, adapting to various design needs.
Default Values
The default themable colors are defined as follows:
const themableColorsLight: ThemableColors = {
background: "#FFFFFF",
foreground: palette.gray[900],
primary: {
...palette.purple, // `palette` is the Wedges Palette
DEFAULT: palette.purple[500],
},
secondary: {
...palette.gray,
DEFAULT: palette.gray[900],
},
surface: {
...palette.gray,
DEFAULT: palette.gray[50],
},
destructive: {
...palette.red,
},
};
const themableColorsDark: ThemableColors = {
background: palette.gray[900],
foreground: "#FFFFFF",
primary: {
...palette.purple,
DEFAULT: palette.purple[400],
600: palette.purple[500],
},
secondary: {
...palette.white,
900: palette.gray[900],
DEFAULT: palette.white[900],
},
surface: {
50: "rgba(255,255,255, 0.1)",
100: "rgba(255,255,255, 0.2)",
200: "rgba(255,255,255, 0.3)",
300: "rgba(255,255,255, 0.4)",
400: "rgba(255,255,255, 0.5)",
500: "rgba(255,255,255, 0.5)",
600: "rgba(255,255,255, 0.7)",
700: "rgba(255,255,255, 0.8)",
800: "rgba(255,255,255, 0.9)",
900: "#FFFFFF",
DEFAULT: "rgba(255,255,255, 0.1)",
},
destructive: palette.red,
};Customization
For optimal results, we suggest creating a ten-step graded color scale for your custom colors. You may find these online tools helpful in generating custom color scales: Palettte and Eva Design System.
Themable colors can be customized by adding options to the wedgesTW plugin in your tailwind.config.ts file. For instance, to use yellow as the primary color for dark theme only, you can set it like this:"
import { wedgesTW } from "wedges-vue";
import type { Config } from "tailwindcss";
const config: Config = {
// Other Tailwind CSS options...
plugins: [
wedgesTW({
themes: {
dark: {
colors: {
primary: {
50: "#FFF9EB",
100: "#FFF3D6",
200: "#FFE7AD",
300: "#FFDA85",
400: "#FFCE5C",
500: "#FFC233",
600: "#FAAF00",
700: "#C28800",
800: "#8A6100",
900: "#523900",
DEFAULT: "#FFC233",
},
},
},
light: {
colors: {
// Define colors for `light` theme here...
},
},
},
}),
],
};
export default config;If you want to use one of the Wedges Color Palette colors, wedgesPalette can be imported from wedges-vue, for example:
import { wedgesPalette, wedgesTW } from "wedges-vue";
import type { Config } from "tailwindcss";
const config: Config = {
// Other Tailwind CSS options...
plugins: [
wedgesTW({
themes: {
dark: {
colors: {
primary: wedgesPalette.yellow,
},
},
},
}),
],
};
export default config;This will set all ten steps of the yellow color scale as the primary color for the dark theme.