mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-09 06:55:07 +00:00
1aa35048a5
* feat(v4): update home page * fix * fix: cards * feat(v4): charts page * feat: update pages * feat: colors * fix * feat: add docs * feat: mdx work * fix * fix * fix: sidebar * fix: lint * feat: updates * feat: update components * feat: fix docs * fix: responsive * feat: implement cmdk * fix: update navigation menu demo * fix: code style * fix: themes * feat: implement blocks page * fix: docs config * refactor * fix: outputFileTracingIncludes * fix * fix: output * fix * fix: registry * refactor: move docs * debug: docs * debug * revert * fix: mjs * deps: pin fumadocs * debug * fix: downgrade next * fix: index page * refactor: move mdx components * fix: remove copy button * fix * was it zod * yes it was * remove copy page * fix: color page * fix: colors page * fix: meta colors * fix: copy button * feat: sync registry * fix: registry build script * feat: update port * feat: clean up examples * fix * fix: mobile nav * fix: blur for mobile * fix: sidebar nav * feat: update examples * fix: build scripts * feat: update components * feat: restyle * fix: types * fix: styles * fix: margins * fix: screenshots * fix * feat: update theme * fix: charts nav * fix: image * feat: optimize images * fix: menu * fix: card * fix: border * check * feat: implement charts page * fix: charts * fix: og images * feat: extend touch * fix: static * fix: sizing * fix: mobile screenshots * fix: page nav * fix * feat: update favicon * fix: theme selector * fix: feedback * fix: sink * docs: update * fix: styles * chore: update registry * fix: command * fix * fix: minor updates * fix: typography on smaller devices * fix: format * fix: remove unused icon * feat: update favicon * fix: typography * docs: typography page * fix: steps
266 lines
7.6 KiB
CSS
266 lines
7.6 KiB
CSS
.theme-default .theme-container {
|
|
--chart-1: var(--color-blue-300);
|
|
--chart-2: var(--color-blue-500);
|
|
--chart-3: var(--color-blue-600);
|
|
--chart-4: var(--color-blue-700);
|
|
--chart-5: var(--color-blue-800);
|
|
}
|
|
|
|
.theme-blue .theme-container {
|
|
--primary: var(--color-blue-600);
|
|
--primary-foreground: var(--color-blue-50);
|
|
--ring: var(--color-blue-400);
|
|
--sidebar-primary: var(--color-blue-600);
|
|
--sidebar-primary-foreground: var(--color-blue-50);
|
|
--sidebar-ring: var(--color-blue-400);
|
|
--chart-1: var(--color-blue-300);
|
|
--chart-2: var(--color-blue-500);
|
|
--chart-3: var(--color-blue-600);
|
|
--chart-4: var(--color-blue-700);
|
|
--chart-5: var(--color-blue-800);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-blue-500);
|
|
--primary-foreground: var(--color-blue-50);
|
|
--ring: var(--color-blue-900);
|
|
--sidebar-primary: var(--color-blue-500);
|
|
--sidebar-primary-foreground: var(--color-blue-50);
|
|
--sidebar-ring: var(--color-blue-900);
|
|
}
|
|
}
|
|
|
|
.theme-green .theme-container {
|
|
--primary: var(--color-lime-600);
|
|
--primary-foreground: var(--color-lime-50);
|
|
--ring: var(--color-lime-400);
|
|
--chart-1: var(--color-green-300);
|
|
--chart-2: var(--color-green-500);
|
|
--chart-3: var(--color-green-600);
|
|
--chart-4: var(--color-green-700);
|
|
--chart-5: var(--color-green-800);
|
|
--sidebar-primary: var(--color-lime-600);
|
|
--sidebar-primary-foreground: var(--color-lime-50);
|
|
--sidebar-ring: var(--color-lime-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-lime-600);
|
|
--primary-foreground: var(--color-lime-50);
|
|
--ring: var(--color-lime-900);
|
|
--sidebar-primary: var(--color-lime-500);
|
|
--sidebar-primary-foreground: var(--color-lime-50);
|
|
--sidebar-ring: var(--color-lime-900);
|
|
}
|
|
}
|
|
|
|
.theme-amber .theme-container {
|
|
--primary: var(--color-amber-600);
|
|
--primary-foreground: var(--color-amber-50);
|
|
--ring: var(--color-amber-400);
|
|
--chart-1: var(--color-amber-300);
|
|
--chart-2: var(--color-amber-500);
|
|
--chart-3: var(--color-amber-600);
|
|
--chart-4: var(--color-amber-700);
|
|
--chart-5: var(--color-amber-800);
|
|
--sidebar-primary: var(--color-amber-600);
|
|
--sidebar-primary-foreground: var(--color-amber-50);
|
|
--sidebar-ring: var(--color-amber-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-amber-500);
|
|
--primary-foreground: var(--color-amber-50);
|
|
--ring: var(--color-amber-900);
|
|
--sidebar-primary: var(--color-amber-500);
|
|
--sidebar-primary-foreground: var(--color-amber-50);
|
|
--sidebar-ring: var(--color-amber-900);
|
|
}
|
|
}
|
|
|
|
.theme-rose .theme-container {
|
|
--primary: var(--color-rose-600);
|
|
--primary-foreground: var(--color-rose-50);
|
|
--ring: var(--color-rose-400);
|
|
--chart-1: var(--color-rose-300);
|
|
--chart-2: var(--color-rose-500);
|
|
--chart-3: var(--color-rose-600);
|
|
--chart-4: var(--color-rose-700);
|
|
--chart-5: var(--color-rose-800);
|
|
--sidebar-primary: var(--color-rose-600);
|
|
--sidebar-primary-foreground: var(--color-rose-50);
|
|
--sidebar-ring: var(--color-rose-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-rose-500);
|
|
--primary-foreground: var(--color-rose-50);
|
|
--ring: var(--color-rose-900);
|
|
--sidebar-primary: var(--color-rose-500);
|
|
--sidebar-primary-foreground: var(--color-rose-50);
|
|
--sidebar-ring: var(--color-rose-900);
|
|
}
|
|
}
|
|
|
|
.theme-purple .theme-container {
|
|
--primary: var(--color-purple-600);
|
|
--primary-foreground: var(--color-purple-50);
|
|
--ring: var(--color-purple-400);
|
|
--chart-1: var(--color-purple-300);
|
|
--chart-2: var(--color-purple-500);
|
|
--chart-3: var(--color-purple-600);
|
|
--chart-4: var(--color-purple-700);
|
|
--chart-5: var(--color-purple-800);
|
|
--sidebar-primary: var(--color-purple-600);
|
|
--sidebar-primary-foreground: var(--color-purple-50);
|
|
--sidebar-ring: var(--color-purple-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-purple-500);
|
|
--primary-foreground: var(--color-purple-50);
|
|
--ring: var(--color-purple-900);
|
|
--sidebar-primary: var(--color-purple-500);
|
|
--sidebar-primary-foreground: var(--color-purple-50);
|
|
--sidebar-ring: var(--color-purple-900);
|
|
}
|
|
}
|
|
|
|
.theme-orange .theme-container {
|
|
--primary: var(--color-orange-600);
|
|
--primary-foreground: var(--color-orange-50);
|
|
--ring: var(--color-orange-400);
|
|
--chart-1: var(--color-orange-300);
|
|
--chart-2: var(--color-orange-500);
|
|
--chart-3: var(--color-orange-600);
|
|
--chart-4: var(--color-orange-700);
|
|
--chart-5: var(--color-orange-800);
|
|
--sidebar-primary: var(--color-orange-600);
|
|
--sidebar-primary-foreground: var(--color-orange-50);
|
|
--sidebar-ring: var(--color-orange-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-orange-500);
|
|
--primary-foreground: var(--color-orange-50);
|
|
--ring: var(--color-orange-900);
|
|
--sidebar-primary: var(--color-orange-500);
|
|
--sidebar-primary-foreground: var(--color-orange-50);
|
|
--sidebar-ring: var(--color-orange-900);
|
|
}
|
|
}
|
|
|
|
.theme-teal .theme-container {
|
|
--primary: var(--color-teal-600);
|
|
--primary-foreground: var(--color-teal-50);
|
|
--chart-1: var(--color-teal-300);
|
|
--chart-2: var(--color-teal-500);
|
|
--chart-3: var(--color-teal-600);
|
|
--chart-4: var(--color-teal-700);
|
|
--chart-5: var(--color-teal-800);
|
|
--sidebar-primary: var(--color-teal-600);
|
|
--sidebar-primary-foreground: var(--color-teal-50);
|
|
--sidebar-ring: var(--color-teal-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-teal-500);
|
|
--primary-foreground: var(--color-teal-50);
|
|
--sidebar-primary: var(--color-teal-500);
|
|
--sidebar-primary-foreground: var(--color-teal-50);
|
|
--sidebar-ring: var(--color-teal-900);
|
|
}
|
|
}
|
|
|
|
.theme-mono .theme-container {
|
|
--font-sans: var(--font-mono);
|
|
--primary: var(--color-stone-600);
|
|
--primary-foreground: var(--color-stone-50);
|
|
--chart-1: var(--color-stone-300);
|
|
--chart-2: var(--color-stone-500);
|
|
--chart-3: var(--color-stone-600);
|
|
--chart-4: var(--color-stone-700);
|
|
--chart-5: var(--color-stone-800);
|
|
--sidebar-primary: var(--color-stone-600);
|
|
--sidebar-primary-foreground: var(--color-stone-50);
|
|
--sidebar-ring: var(--color-stone-400);
|
|
|
|
@variant dark {
|
|
--primary: var(--color-stone-500);
|
|
--primary-foreground: var(--color-stone-50);
|
|
--sidebar-primary: var(--color-stone-500);
|
|
--sidebar-primary-foreground: var(--color-stone-50);
|
|
--sidebar-ring: var(--color-stone-900);
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
--font-sans: var(--font-mono);
|
|
--radius: 0.45em;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.1rem;
|
|
--text-2xl: 1.2rem;
|
|
--text-3xl: 1.3rem;
|
|
--text-4xl: 1.4rem;
|
|
--text-5xl: 1.5rem;
|
|
--text-6xl: 1.6rem;
|
|
--text-7xl: 1.7rem;
|
|
--text-8xl: 1.8rem;
|
|
--text-base: 0.85rem;
|
|
--text-sm: 0.8rem;
|
|
--spacing: 0.222222rem;
|
|
}
|
|
|
|
.rounded-xs,
|
|
.rounded-sm,
|
|
.rounded-md,
|
|
.rounded-lg,
|
|
.rounded-xl {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.shadow-xs,
|
|
.shadow-sm,
|
|
.shadow-md,
|
|
.shadow-lg,
|
|
.shadow-xl {
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-slot="toggle-group"],
|
|
[data-slot="toggle-group-item"] {
|
|
@apply !rounded-none !shadow-none;
|
|
}
|
|
}
|
|
|
|
.theme-scaled .theme-container {
|
|
--chart-1: var(--color-blue-300);
|
|
--chart-2: var(--color-blue-500);
|
|
--chart-3: var(--color-blue-600);
|
|
--chart-4: var(--color-blue-700);
|
|
--chart-5: var(--color-blue-800);
|
|
|
|
@media (min-width: 1024px) {
|
|
--radius: 0.45em;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.1rem;
|
|
--text-2xl: 1.2rem;
|
|
--text-3xl: 1.3rem;
|
|
--text-4xl: 1.4rem;
|
|
--text-5xl: 1.5rem;
|
|
--text-6xl: 1.6rem;
|
|
--text-7xl: 1.7rem;
|
|
--text-8xl: 1.8rem;
|
|
--text-base: 0.85rem;
|
|
--text-sm: 0.8rem;
|
|
--spacing: 0.2rem;
|
|
}
|
|
|
|
[data-slot="select-trigger"],
|
|
[data-slot="toggle-group-item"] {
|
|
--spacing: 0.2rem;
|
|
}
|
|
|
|
[data-slot="card"] {
|
|
border-radius: var(--radius);
|
|
padding-block: calc(var(--spacing) * 4);
|
|
gap: calc(var(--spacing) * 2);
|
|
}
|
|
|
|
[data-slot="card"].pb-0 {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|