rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-02 17:08:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new base colors: mauve, olive, mist and taupe

Browse Source
This commit is contained in:
shadcn
2026-02-27 11:46:38 +04:00
parent c2f28e3ef5
commit da10396f2b
4 changed files with 316 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/fancy-points-argue.md Normal file
View File

@@ -0,0 +1,5 @@
---
"shadcn": major
---
add new base colors: mauve, olive, mist and taupe

11
apps/v4/registry/base-colors.ts
View File

@@ -1,7 +1,16 @@
import { THEMES } from "@/registry/themes"
export const BASE_COLORS = THEMES.filter((theme) =>
["neutral", "stone", "zinc", "gray"].includes(theme.name)
[
"neutral",
"stone",
"zinc",
"gray",
"mauve",
"olive",
"mist",
"taupe",
].includes(theme.name)
)
export type BaseColor = (typeof BASE_COLORS)[number]

296
apps/v4/registry/themes.ts
View File

@@ -297,6 +297,302 @@ export const THEMES: RegistryItem[] = [
},
},
},
{
name: "mauve",
title: "Mauve",
type: "registry:theme",
cssVars: {
light: {
background: "oklch(1 0 0)",
foreground: "oklch(0.145 0.008 326)",
card: "oklch(1 0 0)",
"card-foreground": "oklch(0.145 0.008 326)",
popover: "oklch(1 0 0)",
"popover-foreground": "oklch(0.145 0.008 326)",
primary: "oklch(0.212 0.019 322.12)",
"primary-foreground": "oklch(0.985 0 0)",
secondary: "oklch(0.96 0.003 325.6)",
"secondary-foreground": "oklch(0.212 0.019 322.12)",
muted: "oklch(0.96 0.003 325.6)",
"muted-foreground": "oklch(0.542 0.034 322.5)",
accent: "oklch(0.96 0.003 325.6)",
"accent-foreground": "oklch(0.212 0.019 322.12)",
destructive: "oklch(0.577 0.245 27.325)",
border: "oklch(0.922 0.005 325.62)",
input: "oklch(0.922 0.005 325.62)",
ring: "oklch(0.711 0.019 323.02)",
"chart-1": "oklch(0.646 0.222 41.116)",
"chart-2": "oklch(0.6 0.118 184.704)",
"chart-3": "oklch(0.398 0.07 227.392)",
"chart-4": "oklch(0.828 0.189 84.429)",
"chart-5": "oklch(0.769 0.188 70.08)",
radius: "0.625rem",
sidebar: "oklch(0.985 0 0)",
"sidebar-foreground": "oklch(0.145 0.008 326)",
"sidebar-primary": "oklch(0.212 0.019 322.12)",
"sidebar-primary-foreground": "oklch(0.985 0 0)",
"sidebar-accent": "oklch(0.96 0.003 325.6)",
"sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
"sidebar-border": "oklch(0.922 0.005 325.62)",
"sidebar-ring": "oklch(0.711 0.019 323.02)",
},
dark: {
background: "oklch(0.145 0.008 326)",
foreground: "oklch(0.985 0 0)",
card: "oklch(0.212 0.019 322.12)",
"card-foreground": "oklch(0.985 0 0)",
popover: "oklch(0.212 0.019 322.12)",
"popover-foreground": "oklch(0.985 0 0)",
primary: "oklch(0.922 0.005 325.62)",
"primary-foreground": "oklch(0.212 0.019 322.12)",
secondary: "oklch(0.263 0.024 320.12)",
"secondary-foreground": "oklch(0.985 0 0)",
muted: "oklch(0.263 0.024 320.12)",
"muted-foreground": "oklch(0.711 0.019 323.02)",
accent: "oklch(0.263 0.024 320.12)",
"accent-foreground": "oklch(0.985 0 0)",
destructive: "oklch(0.704 0.191 22.216)",
border: "oklch(1 0 0 / 10%)",
input: "oklch(1 0 0 / 15%)",
ring: "oklch(0.542 0.034 322.5)",
"chart-1": "oklch(0.488 0.243 264.376)",
"chart-2": "oklch(0.696 0.17 162.48)",
"chart-3": "oklch(0.769 0.188 70.08)",
"chart-4": "oklch(0.627 0.265 303.9)",
"chart-5": "oklch(0.645 0.246 16.439)",
sidebar: "oklch(0.212 0.019 322.12)",
"sidebar-foreground": "oklch(0.985 0 0)",
"sidebar-primary": "oklch(0.488 0.243 264.376)",
"sidebar-primary-foreground": "oklch(0.985 0 0)",
"sidebar-accent": "oklch(0.263 0.024 320.12)",
"sidebar-accent-foreground": "oklch(0.985 0 0)",
"sidebar-border": "oklch(1 0 0 / 10%)",
"sidebar-ring": "oklch(0.542 0.034 322.5)",
},
},
},
{
name: "olive",
title: "Olive",
type: "registry:theme",
cssVars: {
light: {
background: "oklch(1 0 0)",
foreground: "oklch(0.153 0.006 107.1)",
card: "oklch(1 0 0)",
"card-foreground": "oklch(0.153 0.006 107.1)",
popover: "oklch(1 0 0)",
"popover-foreground": "oklch(0.153 0.006 107.1)",
primary: "oklch(0.228 0.013 107.4)",
"primary-foreground": "oklch(0.988 0.003 106.5)",
secondary: "oklch(0.966 0.005 106.5)",
"secondary-foreground": "oklch(0.228 0.013 107.4)",
muted: "oklch(0.966 0.005 106.5)",
"muted-foreground": "oklch(0.58 0.031 107.3)",
accent: "oklch(0.966 0.005 106.5)",
"accent-foreground": "oklch(0.228 0.013 107.4)",
destructive: "oklch(0.577 0.245 27.325)",
border: "oklch(0.93 0.007 106.5)",
input: "oklch(0.93 0.007 106.5)",
ring: "oklch(0.737 0.021 106.9)",
"chart-1": "oklch(0.646 0.222 41.116)",
"chart-2": "oklch(0.6 0.118 184.704)",
"chart-3": "oklch(0.398 0.07 227.392)",
"chart-4": "oklch(0.828 0.189 84.429)",
"chart-5": "oklch(0.769 0.188 70.08)",
radius: "0.625rem",
sidebar: "oklch(0.988 0.003 106.5)",
"sidebar-foreground": "oklch(0.153 0.006 107.1)",
"sidebar-primary": "oklch(0.228 0.013 107.4)",
"sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
"sidebar-accent": "oklch(0.966 0.005 106.5)",
"sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
"sidebar-border": "oklch(0.93 0.007 106.5)",
"sidebar-ring": "oklch(0.737 0.021 106.9)",
},
dark: {
background: "oklch(0.153 0.006 107.1)",
foreground: "oklch(0.988 0.003 106.5)",
card: "oklch(0.228 0.013 107.4)",
"card-foreground": "oklch(0.988 0.003 106.5)",
popover: "oklch(0.228 0.013 107.4)",
"popover-foreground": "oklch(0.988 0.003 106.5)",
primary: "oklch(0.93 0.007 106.5)",
"primary-foreground": "oklch(0.228 0.013 107.4)",
secondary: "oklch(0.286 0.016 107.4)",
"secondary-foreground": "oklch(0.988 0.003 106.5)",
muted: "oklch(0.286 0.016 107.4)",
"muted-foreground": "oklch(0.737 0.021 106.9)",
accent: "oklch(0.286 0.016 107.4)",
"accent-foreground": "oklch(0.988 0.003 106.5)",
destructive: "oklch(0.704 0.191 22.216)",
border: "oklch(1 0 0 / 10%)",
input: "oklch(1 0 0 / 15%)",
ring: "oklch(0.58 0.031 107.3)",
"chart-1": "oklch(0.488 0.243 264.376)",
"chart-2": "oklch(0.696 0.17 162.48)",
"chart-3": "oklch(0.769 0.188 70.08)",
"chart-4": "oklch(0.627 0.265 303.9)",
"chart-5": "oklch(0.645 0.246 16.439)",
sidebar: "oklch(0.228 0.013 107.4)",
"sidebar-foreground": "oklch(0.988 0.003 106.5)",
"sidebar-primary": "oklch(0.488 0.243 264.376)",
"sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
"sidebar-accent": "oklch(0.286 0.016 107.4)",
"sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
"sidebar-border": "oklch(1 0 0 / 10%)",
"sidebar-ring": "oklch(0.58 0.031 107.3)",
},
},
},
{
name: "mist",
title: "Mist",
type: "registry:theme",
cssVars: {
light: {
background: "oklch(1 0 0)",
foreground: "oklch(0.148 0.004 228.8)",
card: "oklch(1 0 0)",
"card-foreground": "oklch(0.148 0.004 228.8)",
popover: "oklch(1 0 0)",
"popover-foreground": "oklch(0.148 0.004 228.8)",
primary: "oklch(0.218 0.008 223.9)",
"primary-foreground": "oklch(0.987 0.002 197.1)",
secondary: "oklch(0.963 0.002 197.1)",
"secondary-foreground": "oklch(0.218 0.008 223.9)",
muted: "oklch(0.963 0.002 197.1)",
"muted-foreground": "oklch(0.56 0.021 213.5)",
accent: "oklch(0.963 0.002 197.1)",
"accent-foreground": "oklch(0.218 0.008 223.9)",
destructive: "oklch(0.577 0.245 27.325)",
border: "oklch(0.925 0.005 214.3)",
input: "oklch(0.925 0.005 214.3)",
ring: "oklch(0.723 0.014 214.4)",
"chart-1": "oklch(0.646 0.222 41.116)",
"chart-2": "oklch(0.6 0.118 184.704)",
"chart-3": "oklch(0.398 0.07 227.392)",
"chart-4": "oklch(0.828 0.189 84.429)",
"chart-5": "oklch(0.769 0.188 70.08)",
radius: "0.625rem",
sidebar: "oklch(0.987 0.002 197.1)",
"sidebar-foreground": "oklch(0.148 0.004 228.8)",
"sidebar-primary": "oklch(0.218 0.008 223.9)",
"sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
"sidebar-accent": "oklch(0.963 0.002 197.1)",
"sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
"sidebar-border": "oklch(0.925 0.005 214.3)",
"sidebar-ring": "oklch(0.723 0.014 214.4)",
},
dark: {
background: "oklch(0.148 0.004 228.8)",
foreground: "oklch(0.987 0.002 197.1)",
card: "oklch(0.218 0.008 223.9)",
"card-foreground": "oklch(0.987 0.002 197.1)",
popover: "oklch(0.218 0.008 223.9)",
"popover-foreground": "oklch(0.987 0.002 197.1)",
primary: "oklch(0.925 0.005 214.3)",
"primary-foreground": "oklch(0.218 0.008 223.9)",
secondary: "oklch(0.275 0.011 216.9)",
"secondary-foreground": "oklch(0.987 0.002 197.1)",
muted: "oklch(0.275 0.011 216.9)",
"muted-foreground": "oklch(0.723 0.014 214.4)",
accent: "oklch(0.275 0.011 216.9)",
"accent-foreground": "oklch(0.987 0.002 197.1)",
destructive: "oklch(0.704 0.191 22.216)",
border: "oklch(1 0 0 / 10%)",
input: "oklch(1 0 0 / 15%)",
ring: "oklch(0.56 0.021 213.5)",
"chart-1": "oklch(0.488 0.243 264.376)",
"chart-2": "oklch(0.696 0.17 162.48)",
"chart-3": "oklch(0.769 0.188 70.08)",
"chart-4": "oklch(0.627 0.265 303.9)",
"chart-5": "oklch(0.645 0.246 16.439)",
sidebar: "oklch(0.218 0.008 223.9)",
"sidebar-foreground": "oklch(0.987 0.002 197.1)",
"sidebar-primary": "oklch(0.488 0.243 264.376)",
"sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
"sidebar-accent": "oklch(0.275 0.011 216.9)",
"sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
"sidebar-border": "oklch(1 0 0 / 10%)",
"sidebar-ring": "oklch(0.56 0.021 213.5)",
},
},
},
{
name: "taupe",
title: "Taupe",
type: "registry:theme",
cssVars: {
light: {
background: "oklch(1 0 0)",
foreground: "oklch(0.147 0.004 49.3)",
card: "oklch(1 0 0)",
"card-foreground": "oklch(0.147 0.004 49.3)",
popover: "oklch(1 0 0)",
"popover-foreground": "oklch(0.147 0.004 49.3)",
primary: "oklch(0.214 0.009 43.1)",
"primary-foreground": "oklch(0.986 0.002 67.8)",
secondary: "oklch(0.96 0.002 17.2)",
"secondary-foreground": "oklch(0.214 0.009 43.1)",
muted: "oklch(0.96 0.002 17.2)",
"muted-foreground": "oklch(0.547 0.021 43.1)",
accent: "oklch(0.96 0.002 17.2)",
"accent-foreground": "oklch(0.214 0.009 43.1)",
destructive: "oklch(0.577 0.245 27.325)",
border: "oklch(0.922 0.005 34.3)",
input: "oklch(0.922 0.005 34.3)",
ring: "oklch(0.714 0.014 41.2)",
"chart-1": "oklch(0.646 0.222 41.116)",
"chart-2": "oklch(0.6 0.118 184.704)",
"chart-3": "oklch(0.398 0.07 227.392)",
"chart-4": "oklch(0.828 0.189 84.429)",
"chart-5": "oklch(0.769 0.188 70.08)",
radius: "0.625rem",
sidebar: "oklch(0.986 0.002 67.8)",
"sidebar-foreground": "oklch(0.147 0.004 49.3)",
"sidebar-primary": "oklch(0.214 0.009 43.1)",
"sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
"sidebar-accent": "oklch(0.96 0.002 17.2)",
"sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
"sidebar-border": "oklch(0.922 0.005 34.3)",
"sidebar-ring": "oklch(0.714 0.014 41.2)",
},
dark: {
background: "oklch(0.147 0.004 49.3)",
foreground: "oklch(0.986 0.002 67.8)",
card: "oklch(0.214 0.009 43.1)",
"card-foreground": "oklch(0.986 0.002 67.8)",
popover: "oklch(0.214 0.009 43.1)",
"popover-foreground": "oklch(0.986 0.002 67.8)",
primary: "oklch(0.922 0.005 34.3)",
"primary-foreground": "oklch(0.214 0.009 43.1)",
secondary: "oklch(0.268 0.011 36.5)",
"secondary-foreground": "oklch(0.986 0.002 67.8)",
muted: "oklch(0.268 0.011 36.5)",
"muted-foreground": "oklch(0.714 0.014 41.2)",
accent: "oklch(0.268 0.011 36.5)",
"accent-foreground": "oklch(0.986 0.002 67.8)",
destructive: "oklch(0.704 0.191 22.216)",
border: "oklch(1 0 0 / 10%)",
input: "oklch(1 0 0 / 15%)",
ring: "oklch(0.547 0.021 43.1)",
"chart-1": "oklch(0.488 0.243 264.376)",
"chart-2": "oklch(0.696 0.17 162.48)",
"chart-3": "oklch(0.769 0.188 70.08)",
"chart-4": "oklch(0.627 0.265 303.9)",
"chart-5": "oklch(0.645 0.246 16.439)",
sidebar: "oklch(0.214 0.009 43.1)",
"sidebar-foreground": "oklch(0.986 0.002 67.8)",
"sidebar-primary": "oklch(0.488 0.243 264.376)",
"sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
"sidebar-accent": "oklch(0.268 0.011 36.5)",
"sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
"sidebar-border": "oklch(1 0 0 / 10%)",
"sidebar-ring": "oklch(0.547 0.021 43.1)",
},
},
},
{
name: "amber",
title: "Amber",

6
packages/shadcn/src/utils/preset.ts
View File

@@ -12,7 +12,7 @@
// Value arrays — order matters for backward compat. Never reorder, only append.
export const PRESET_BASES = ["radix", "base"] as const
export const PRESET_STYLES = ["nova", "vega", "maia", "lyra", "mira"] as const
export const PRESET_BASE_COLORS = ["neutral", "stone", "zinc", "gray"] as const
export const PRESET_BASE_COLORS = ["neutral", "stone", "zinc", "gray", "mauve", "olive", "mist", "taupe"] as const
export const PRESET_THEMES = [
"neutral",
"stone",
@@ -35,6 +35,10 @@ export const PRESET_THEMES = [
"teal",
"violet",
"yellow",
"mauve",
"olive",
"mist",
"taupe",
] as const
export const PRESET_ICON_LIBRARIES = [
"lucide",