App.css
1 @import "tailwindcss"; 2 @import "tw-animate-css"; 3 4 @custom-variant dark (&:is(.dark *)); 5 6 @media (prefers-reduced-motion: no-preference) { 7 .App-logo { 8 animation: App-logo-spin infinite 20s linear; 9 } 10 } 11 12 :root { 13 --gray-light: #1b1d23; 14 --gray-dark: #131519; 15 --gray-darkest: #0d0f11; 16 --coal: #0f0d0e; 17 --charcoal: #231f20; 18 --gray: #262522; 19 --yellow: #fcba28; 20 --pink: #f38ba3; 21 --green: #0ba95b; 22 --purple: #7b5ea7; 23 --beige: #f9f4da; 24 --blue: #12b5e5; 25 --orange: #fc7428; 26 --red: #ed203d; 27 --white: #fff; 28 --black: var(--coal); 29 --accent: oklch(0.968 0.007 247.896); 30 --bg-alt: var(--charcoal); 31 --border-color: rgba(249, 244, 218, 0.2); 32 --color-muted: rgba(249, 244, 218, 0.5); 33 --radius: 0.625rem; 34 --background: oklch(1 0 0); 35 --foreground: oklch(0.129 0.042 264.695); 36 --card: oklch(1 0 0); 37 --card-foreground: oklch(0.129 0.042 264.695); 38 --popover: oklch(1 0 0); 39 --popover-foreground: oklch(0.129 0.042 264.695); 40 --primary: oklch(0.208 0.042 265.755); 41 --primary-foreground: oklch(0.984 0.003 247.858); 42 --secondary: oklch(0.968 0.007 247.896); 43 --secondary-foreground: oklch(0.208 0.042 265.755); 44 --muted: oklch(0.968 0.007 247.896); 45 --muted-foreground: oklch(0.554 0.046 257.417); 46 --accent-foreground: oklch(0.208 0.042 265.755); 47 --destructive: oklch(0.577 0.245 27.325); 48 --border: oklch(0.929 0.013 255.508); 49 --input: oklch(0.929 0.013 255.508); 50 --ring: oklch(0.704 0.04 256.788); 51 --chart-1: oklch(0.646 0.222 41.116); 52 --chart-2: oklch(0.6 0.118 184.704); 53 --chart-3: oklch(0.398 0.07 227.392); 54 --chart-4: oklch(0.828 0.189 84.429); 55 --chart-5: oklch(0.769 0.188 70.08); 56 --sidebar: oklch(0.984 0.003 247.858); 57 --sidebar-foreground: oklch(0.129 0.042 264.695); 58 --sidebar-primary: oklch(0.208 0.042 265.755); 59 --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 60 --sidebar-accent: oklch(0.968 0.007 247.896); 61 --sidebar-accent-foreground: oklch(0.208 0.042 265.755); 62 --sidebar-border: oklch(0.929 0.013 255.508); 63 --sidebar-ring: oklch(0.704 0.04 256.788); 64 } 65 66 .App-header { 67 background-color: #282c34; 68 min-height: 100vh; 69 display: flex; 70 flex-direction: column; 71 align-items: center; 72 justify-content: center; 73 font-size: calc(10px + 2vmin); 74 color: white; 75 } 76 77 .App-link { 78 color: #61dafb; 79 } 80 81 @theme inline { 82 --radius-sm: calc(var(--radius) - 4px); 83 --radius-md: calc(var(--radius) - 2px); 84 --radius-lg: var(--radius); 85 --radius-xl: calc(var(--radius) + 4px); 86 --color-background: var(--background); 87 --color-foreground: var(--foreground); 88 --color-card: var(--card); 89 --color-card-foreground: var(--card-foreground); 90 --color-popover: var(--popover); 91 --color-popover-foreground: var(--popover-foreground); 92 --color-primary: var(--primary); 93 --color-primary-foreground: var(--primary-foreground); 94 --color-secondary: var(--secondary); 95 --color-secondary-foreground: var(--secondary-foreground); 96 --color-muted: var(--muted); 97 --color-muted-foreground: var(--muted-foreground); 98 --color-accent: var(--accent); 99 --color-accent-foreground: var(--accent-foreground); 100 --color-destructive: var(--destructive); 101 --color-border: var(--border); 102 --color-input: var(--input); 103 --color-ring: var(--ring); 104 --color-chart-1: var(--chart-1); 105 --color-chart-2: var(--chart-2); 106 --color-chart-3: var(--chart-3); 107 --color-chart-4: var(--chart-4); 108 --color-chart-5: var(--chart-5); 109 --color-sidebar: var(--sidebar); 110 --color-sidebar-foreground: var(--sidebar-foreground); 111 --color-sidebar-primary: var(--sidebar-primary); 112 --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 113 --color-sidebar-accent: var(--sidebar-accent); 114 --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 115 --color-sidebar-border: var(--sidebar-border); 116 --color-sidebar-ring: var(--sidebar-ring); 117 } 118 119 .dark { 120 --background: oklch(0.129 0.042 264.695); 121 --foreground: oklch(0.984 0.003 247.858); 122 --card: oklch(0.208 0.042 265.755); 123 --card-foreground: oklch(0.984 0.003 247.858); 124 --popover: oklch(0.208 0.042 265.755); 125 --popover-foreground: oklch(0.984 0.003 247.858); 126 --primary: oklch(0.929 0.013 255.508); 127 --primary-foreground: oklch(0.208 0.042 265.755); 128 --secondary: oklch(0.279 0.041 260.031); 129 --secondary-foreground: oklch(0.984 0.003 247.858); 130 --muted: oklch(0.279 0.041 260.031); 131 --muted-foreground: oklch(0.704 0.04 256.788); 132 --accent: oklch(0.279 0.041 260.031); 133 --accent-foreground: oklch(0.984 0.003 247.858); 134 --destructive: oklch(0.704 0.191 22.216); 135 --border: oklch(1 0 0 / 10%); 136 --input: oklch(1 0 0 / 15%); 137 --ring: oklch(0.551 0.027 264.364); 138 --chart-1: oklch(0.488 0.243 264.376); 139 --chart-2: oklch(0.696 0.17 162.48); 140 --chart-3: oklch(0.769 0.188 70.08); 141 --chart-4: oklch(0.627 0.265 303.9); 142 --chart-5: oklch(0.645 0.246 16.439); 143 --sidebar: oklch(0.208 0.042 265.755); 144 --sidebar-foreground: oklch(0.984 0.003 247.858); 145 --sidebar-primary: oklch(0.488 0.243 264.376); 146 --sidebar-primary-foreground: oklch(0.984 0.003 247.858); 147 --sidebar-accent: oklch(0.279 0.041 260.031); 148 --sidebar-accent-foreground: oklch(0.984 0.003 247.858); 149 --sidebar-border: oklch(1 0 0 / 10%); 150 --sidebar-ring: oklch(0.551 0.027 264.364); 151 } 152 153 @layer base { 154 * { 155 @apply border-border outline-ring/50; 156 } 157 body { 158 @apply bg-background text-foreground; 159 } 160 }