diff --git a/packages/shadcn/src/shadcn.css b/packages/shadcn/src/shadcn.css index 9e47047..df23e80 100644 --- a/packages/shadcn/src/shadcn.css +++ b/packages/shadcn/src/shadcn.css @@ -8,131 +8,77 @@ @custom-variant dark (&:is(.dark *)); :root { - --background: oklch(0.9779 0.0042 56.3756); - --foreground: oklch(0.2178 0 0); - --card: oklch(0.9779 0.0042 56.3756); - --card-foreground: oklch(0.2178 0 0); - --popover: oklch(0.9779 0.0042 56.3756); - --popover-foreground: oklch(0.2178 0 0); - --primary: oklch(0.465 0.147 24.9381); - --primary-foreground: oklch(1 0 0); - --secondary: oklch(0.9625 0.0385 89.0943); - --secondary-foreground: oklch(0.4847 0.1022 75.1153); - --muted: oklch(0.9431 0.0068 53.4442); - --muted-foreground: oklch(0.4444 0.0096 73.639); - --accent: oklch(0.9619 0.058 95.6174); - --accent-foreground: oklch(0.3958 0.1331 25.723); - --destructive: oklch(0.4437 0.1613 26.8994); - --destructive-foreground: oklch(1 0 0); - --border: oklch(0.9355 0.0324 80.9937); - --input: oklch(0.9355 0.0324 80.9937); - --ring: oklch(0.465 0.147 24.9381); - --chart-1: oklch(0.5054 0.1905 27.5181); - --chart-2: oklch(0.465 0.147 24.9381); - --chart-3: oklch(0.3958 0.1331 25.723); - --chart-4: oklch(0.5553 0.1455 48.9975); - --chart-5: oklch(0.4732 0.1247 46.2007); - --sidebar: oklch(0.9431 0.0068 53.4442); - --sidebar-foreground: oklch(0.2178 0 0); - --sidebar-primary: oklch(0.465 0.147 24.9381); - --sidebar-primary-foreground: oklch(1 0 0); - --sidebar-accent: oklch(0.9619 0.058 95.6174); - --sidebar-accent-foreground: oklch(0.3958 0.1331 25.723); - --sidebar-border: oklch(0.9355 0.0324 80.9937); - --sidebar-ring: oklch(0.465 0.147 24.9381); - --font-sans: Poppins, sans-serif; - --font-serif: Libre Baskerville, serif; - --font-mono: IBM Plex Mono, monospace; - --radius: 0.375rem; - --shadow-x: 1px; - --shadow-y: 1px; - --shadow-blur: 16px; - --shadow-spread: -2px; - --shadow-opacity: 0.12; - --shadow-color: hsl(0 63% 18%); - --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); - --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); - --shadow-sm: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 1px 2px -3px hsl(0 63% 18% / 0.12); - --shadow: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 1px 2px -3px hsl(0 63% 18% / 0.12); - --shadow-md: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 2px 4px -3px hsl(0 63% 18% / 0.12); - --shadow-lg: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 4px 6px -3px hsl(0 63% 18% / 0.12); - --shadow-xl: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 8px 10px -3px hsl(0 63% 18% / 0.12); - --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3); - --tracking-normal: 0em; - --spacing: 0.25rem; + --background: hsl(51, 76%, 97%); + --foreground: hsl(240 10% 3.9%); + --card: hsl(0 0% 100%); + --card-foreground: hsl(240 10% 3.9%); + --popover: hsl(0 0% 100%); + --popover-foreground: hsl(240 10% 3.9%); + --primary: hsl(17, 86%, 45%); + --primary-foreground: hsl(355.7 100% 97.3%); + --secondary: hsl(240 4.8% 95.9%); + --secondary-foreground: hsl(240 5.9% 10%); + --muted: hsl(240 4.8% 95.9%); + --muted-foreground: hsl(240, 2%, 31%); + --accent: hsl(240 4.8% 95.9%); + --accent-foreground: hsl(240 5.9% 10%); + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(0 0% 98%); + --border: hsl(240 5.9% 90%); + --input: hsl(240 5.9% 90%); + --ring: hsl(3, 85%, 32%); + --radius: 0.7rem; + --chart-1: hsl(12 76% 61%); + --chart-2: hsl(173 58% 39%); + --chart-3: hsl(197 37% 24%); + --chart-4: hsl(43 74% 66%); + --chart-5: hsl(27 87% 67%); + --sidebar-background: hsl(27, 92%, 90%); + --sidebar-foreground: hsl(0, 0%, 1%); + --sidebar-primary: hsl(240 5.9% 10%); + --sidebar-primary-foreground: hsl(0 0% 98%); + --sidebar-accent: hsl(24, 82%, 67%); + --sidebar-accent-foreground: hsl(240 5.9% 10%); + --sidebar-border: hsl(20, 13%, 91%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); + --sidebar: hsl(0 0% 98%); } .dark { - --background: oklch(0.2161 0.0061 56.0434); - --foreground: oklch(0.9699 0.0013 106.4238); - --card: oklch(0.2685 0.0063 34.2976); - --card-foreground: oklch(0.9699 0.0013 106.4238); - --popover: oklch(0.2685 0.0063 34.2976); - --popover-foreground: oklch(0.9699 0.0013 106.4238); - --primary: oklch(0.5054 0.1905 27.5181); - --primary-foreground: oklch(0.9779 0.0042 56.3756); - --secondary: oklch(0.4732 0.1247 46.2007); - --secondary-foreground: oklch(0.9619 0.058 95.6174); - --muted: oklch(0.2291 0.006 56.0708); - --muted-foreground: oklch(0.8687 0.0043 56.366); - --accent: oklch(0.5553 0.1455 48.9975); - --accent-foreground: oklch(0.9619 0.058 95.6174); - --destructive: oklch(0.6368 0.2078 25.3313); - --destructive-foreground: oklch(1 0 0); - --border: oklch(0.3741 0.0087 67.5582); - --input: oklch(0.3741 0.0087 67.5582); - --ring: oklch(0.5054 0.1905 27.5181); - --chart-1: oklch(0.7106 0.1661 22.2162); - --chart-2: oklch(0.6368 0.2078 25.3313); - --chart-3: oklch(0.5771 0.2152 27.325); - --chart-4: oklch(0.8369 0.1644 84.4286); - --chart-5: oklch(0.7686 0.1647 70.0804); - --sidebar: oklch(0.2161 0.0061 56.0434); - --sidebar-foreground: oklch(0.9699 0.0013 106.4238); - --sidebar-primary: oklch(0.5054 0.1905 27.5181); - --sidebar-primary-foreground: oklch(0.9779 0.0042 56.3756); - --sidebar-accent: oklch(0.5553 0.1455 48.9975); - --sidebar-accent-foreground: oklch(0.9619 0.058 95.6174); - --sidebar-border: oklch(0.3741 0.0087 67.5582); - --sidebar-ring: oklch(0.5054 0.1905 27.5181); - --font-sans: Poppins, sans-serif; - --font-serif: Libre Baskerville, serif; - --font-mono: IBM Plex Mono, monospace; - --radius: 0.375rem; - --shadow-x: 1px; - --shadow-y: 1px; - --shadow-blur: 16px; - --shadow-spread: -2px; - --shadow-opacity: 0.12; - --shadow-color: hsl(0 63% 18%); - --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); - --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06); - --shadow-sm: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 1px 2px -3px hsl(0 63% 18% / 0.12); - --shadow: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 1px 2px -3px hsl(0 63% 18% / 0.12); - --shadow-md: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 2px 4px -3px hsl(0 63% 18% / 0.12); - --shadow-lg: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 4px 6px -3px hsl(0 63% 18% / 0.12); - --shadow-xl: - 1px 1px 16px -2px hsl(0 63% 18% / 0.12), - 1px 8px 10px -3px hsl(0 63% 18% / 0.12); - --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.3); + --background: hsl(20 14.3% 4.1%); + --foreground: hsl(0 0% 95%); + --card: hsl(240 5.9% 10%); + --card-foreground: hsl(0 0% 95%); + --popover: hsl(0 0% 9%); + --popover-foreground: hsl(0 0% 95%); + --primary: hsl(3, 85%, 32%); + --primary-foreground: hsl(180, 33%, 99%); + --secondary: hsl(240 3.7% 15.9%); + --secondary-foreground: hsl(0 0% 98%); + --muted: hsl(0 0% 15%); + --muted-foreground: hsl(240 5% 64.9%); + --accent: hsl(12 6.5% 15.1%); + --accent-foreground: hsl(0 0% 98%); + --destructive: hsl(0 62.8% 30.6%); + --destructive-foreground: hsl(0 85.7% 97.3%); + --border: hsl(240 3.7% 15.9%); + --input: hsl(240 3.7% 15.9%); + --ring: hsl(3, 85%, 32%); + /* --chart-1: hsl(220 70% 50%); */ + --chart-1: hsl(22 70% 50%); + --chart-2: hsl(160 60% 45%); + --chart-3: hsl(30 80% 55%); + --chart-4: hsl(280 65% 60%); + --chart-5: hsl(340 75% 55%); + --sidebar-background: hsl(240 5.9% 10%); + --sidebar-foreground: hsl(240 4.8% 95.9%); + --sidebar-primary: hsl(224.3 76.3% 48%); + --sidebar-primary-foreground: hsl(0 0% 100%); + --sidebar-accent: hsl(240 3.7% 15.9%); + --sidebar-accent-foreground: hsl(240 4.8% 95.9%); + --sidebar-border: hsl(240 3.7% 15.9%); + --sidebar-ring: hsl(217.2 91.2% 59.8%); + --sidebar: hsl(240 5.9% 10%); } @theme inline { @@ -160,32 +106,72 @@ --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); - --color-sidebar: var(--sidebar); - --color-sidebar-foreground: var(--sidebar-foreground); - --color-sidebar-primary: var(--sidebar-primary); - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); - --color-sidebar-accent: var(--sidebar-accent); - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); - --color-sidebar-border: var(--sidebar-border); - --color-sidebar-ring: var(--sidebar-ring); - - --font-sans: var(--font-sans); - --font-mono: var(--font-mono); - --font-serif: var(--font-serif); - --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); + --color-sidebar-ring: var(--sidebar-ring); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar: var(--sidebar-background); + --animate-accordion-down: accordion-down 0.2s ease-out; + --animate-accordion-up: accordion-up 0.2s ease-out; - --shadow-2xs: var(--shadow-2xs); - --shadow-xs: var(--shadow-xs); - --shadow-sm: var(--shadow-sm); - --shadow: var(--shadow); - --shadow-md: var(--shadow-md); - --shadow-lg: var(--shadow-lg); - --shadow-xl: var(--shadow-xl); - --shadow-2xl: var(--shadow-2xl); + @keyframes accordion-down { + from { + height: 0; + } + to { + height: var(--radix-accordion-content-height); + } + } + + @keyframes accordion-up { + from { + height: var(--radix-accordion-content-height); + } + to { + height: 0; + } + } +} + +@layer base { + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground overscroll-none; + /* font-feature-settings: "rlig" 1, "calt" 1; */ + font-synthesis-weight: none; + text-rendering: optimizeLegibility; + } + + @supports (font: -apple-system-body) and (-webkit-appearance: none) { + [data-wrapper] { + @apply min-[1800px]:border-t; + } + } + + /* Custom scrollbar styling. Thanks @pranathiperii. */ + ::-webkit-scrollbar { + width: 5px; + } + ::-webkit-scrollbar-track { + background: transparent; + } + ::-webkit-scrollbar-thumb { + border-radius: 5px; + background: hsl(var(--border)); + } + * { + scrollbar-color: hsl(var(--border)) transparent; + scrollbar-width: thin; + } } @layer base {