CopilotKit/examples/showcases/banking/src/app/globals.css at main · samuelson-chen/CopilotKit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
@import "tailwindcss";
@import "tw-animate-css";

/* Banking app uses a class-based dark mode (`.dark` / `.light` on <html>). In
   Tailwind v4 the default dark variant is `prefers-color-scheme`; the
   `@custom-variant` directive below re-enables the class-based behavior so
   utilities like `dark:bg-neutral-800` continue to work. */
@custom-variant dark (&:where(.dark, .dark *));

/* Map the legacy shadcn-style CSS variables into Tailwind's v4 `@theme` so
   any `bg-background` / `text-foreground` / `rounded-lg|md|sm` utilities
   resolve the same way they did under the v3 JS config. */
@theme inline {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    color-scheme: dark;
  }

  .light {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    color-scheme: light;
  }
}

.prefix-arrow::before {
  content: "↑ ";
}

.dark body {
  background-color: #121212;
  color: #e0e0e0;
}

.dark header,
.dark .border-b,
.dark .border-r {
  border-color: #333;
}

.dark .bg-gray-900 {
  background-color: #1a1a1a;
}