|
1 | | -@tailwind base; |
2 | | -@tailwind components; |
3 | | -@tailwind utilities; |
| 1 | +@import 'tailwindcss'; |
4 | 2 |
|
5 | | -:root { |
6 | | - color-scheme: light; |
7 | | - --font-sans: "Camera Plain Variable", ui-sans-serif, system-ui, sans-serif; |
| 3 | +@theme { |
| 4 | + --shadow-lattice: 0 24px 80px rgba(2, 6, 23, 0.18); |
| 5 | + |
| 6 | + --font-sans: |
| 7 | + Inter Variable, Inter, SF Pro Display, -apple-system, system-ui, Segoe UI, |
| 8 | + Roboto, Helvetica Neue, Arial, sans-serif; |
8 | 9 | --font-mono: |
9 | | - "SFMono-Regular", ui-monospace, Menlo, Monaco, monospace; |
10 | | - |
11 | | - --bg-page: #f7f4ed; |
12 | | - --bg-panel: rgba(247, 244, 237, 0.96); |
13 | | - --bg-surface: rgba(28, 28, 28, 0.03); |
14 | | - --bg-surface-hover: rgba(28, 28, 28, 0.04); |
15 | | - --bg-input: #f7f4ed; |
16 | | - --bg-button-ghost: transparent; |
17 | | - --bg-button-subtle: rgba(28, 28, 28, 0.04); |
18 | | - --bg-primary: #1c1c1c; |
19 | | - --bg-primary-hover: rgba(28, 28, 28, 0.92); |
20 | | - --text-primary: #1c1c1c; |
21 | | - --text-secondary: rgba(28, 28, 28, 0.83); |
22 | | - --text-tertiary: #5f5f5d; |
23 | | - --text-quaternary: rgba(28, 28, 28, 0.4); |
24 | | - --text-inverse: #fcfbf8; |
25 | | - --border-subtle: #eceae4; |
26 | | - --border-standard: rgba(28, 28, 28, 0.4); |
27 | | - --border-strong: rgba(28, 28, 28, 0.4); |
28 | | - --ring: rgba(59, 130, 246, 0.5); |
29 | | - --shadow-panel: none; |
30 | | - --shadow-elevated: none; |
31 | | - --shadow-inset: |
32 | | - rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset, |
33 | | - rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, |
34 | | - rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; |
35 | | - --scrollbar-thumb: rgba(28, 28, 28, 0.18); |
36 | | - --scrollbar-track: transparent; |
37 | | - --selection: rgba(28, 28, 28, 0.1); |
38 | | - --page-glow: |
39 | | - radial-gradient(circle at 18% 12%, rgba(230, 188, 145, 0.18), transparent 26%), |
40 | | - radial-gradient(circle at 82% 10%, rgba(146, 174, 216, 0.12), transparent 22%), |
41 | | - radial-gradient(circle at 50% 72%, rgba(240, 214, 185, 0.1), transparent 26%); |
| 10 | + Berkeley Mono, ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace; |
42 | 11 | } |
43 | 12 |
|
44 | | -html[data-theme="dark"] { |
45 | | - color-scheme: dark; |
46 | | - --bg-page: #151210; |
47 | | - --bg-panel: rgba(21, 18, 16, 0.96); |
48 | | - --bg-surface: rgba(247, 244, 237, 0.03); |
49 | | - --bg-surface-hover: rgba(247, 244, 237, 0.05); |
50 | | - --bg-input: rgba(247, 244, 237, 0.02); |
51 | | - --bg-button-ghost: transparent; |
52 | | - --bg-button-subtle: rgba(247, 244, 237, 0.06); |
53 | | - --bg-primary: #f7f4ed; |
54 | | - --bg-primary-hover: #fcfbf8; |
55 | | - --text-primary: #f7f4ed; |
56 | | - --text-secondary: rgba(247, 244, 237, 0.82); |
57 | | - --text-tertiary: rgba(247, 244, 237, 0.68); |
58 | | - --text-quaternary: rgba(247, 244, 237, 0.42); |
59 | | - --text-inverse: #1c1c1c; |
60 | | - --border-subtle: rgba(247, 244, 237, 0.08); |
61 | | - --border-standard: rgba(247, 244, 237, 0.24); |
62 | | - --border-strong: rgba(247, 244, 237, 0.24); |
63 | | - --ring: rgba(96, 165, 250, 0.5); |
64 | | - --shadow-panel: none; |
65 | | - --shadow-elevated: none; |
66 | | - --shadow-inset: |
67 | | - rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset, |
68 | | - rgba(0, 0, 0, 0.18) 0px 0px 0px 0.5px inset, |
69 | | - rgba(0, 0, 0, 0.08) 0px 1px 2px 0px; |
70 | | - --scrollbar-thumb: rgba(247, 244, 237, 0.2); |
71 | | - --scrollbar-track: transparent; |
72 | | - --selection: rgba(247, 244, 237, 0.16); |
73 | | - --page-glow: none; |
74 | | -} |
| 13 | +/* |
| 14 | + The default border color has changed to `currentcolor` in Tailwind CSS v4, |
| 15 | + so we've added these compatibility styles to make sure everything still |
| 16 | + looks the same as it did with Tailwind CSS v3. |
75 | 17 |
|
76 | | -html { |
77 | | - min-height: 100%; |
78 | | - background: |
79 | | - var(--page-glow), |
80 | | - linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page) 100%); |
81 | | -} |
| 18 | + If we ever want to remove these styles, we need to add an explicit border |
| 19 | + color utility to any element that depends on these defaults. |
| 20 | +*/ |
| 21 | +@layer base { |
| 22 | + button:not(:disabled), |
| 23 | + [role="button"]:not(:disabled) { |
| 24 | + cursor: pointer; |
| 25 | + } |
82 | 26 |
|
83 | | -body { |
84 | | - min-height: 100vh; |
85 | | - margin: 0; |
86 | | - color: var(--text-primary); |
87 | | - font-family: var(--font-sans); |
88 | | - text-rendering: optimizeLegibility; |
89 | | - background: |
90 | | - linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), |
91 | | - transparent; |
| 27 | + *, |
| 28 | + ::after, |
| 29 | + ::before, |
| 30 | + ::backdrop, |
| 31 | + ::file-selector-button { |
| 32 | + border-color: var(--color-gray-200, currentcolor); |
| 33 | + } |
92 | 34 | } |
93 | 35 |
|
94 | | -* { |
95 | | - box-sizing: border-box; |
96 | | - scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); |
97 | | - scrollbar-width: thin; |
98 | | -} |
| 36 | +@layer base { |
| 37 | + :root { |
| 38 | + color-scheme: light; |
| 39 | + --font-sans: "Camera Plain Variable", ui-sans-serif, system-ui, sans-serif; |
| 40 | + --font-mono: |
| 41 | + "SFMono-Regular", ui-monospace, Menlo, Monaco, monospace; |
| 42 | + |
| 43 | + --bg-page: #f7f4ed; |
| 44 | + --bg-panel: rgba(247, 244, 237, 0.96); |
| 45 | + --bg-surface: rgba(28, 28, 28, 0.03); |
| 46 | + --bg-surface-hover: rgba(28, 28, 28, 0.04); |
| 47 | + --bg-input: #f7f4ed; |
| 48 | + --bg-button-ghost: transparent; |
| 49 | + --bg-button-subtle: rgba(28, 28, 28, 0.04); |
| 50 | + --bg-primary: #1c1c1c; |
| 51 | + --bg-primary-hover: rgba(28, 28, 28, 0.92); |
| 52 | + --text-primary: #1c1c1c; |
| 53 | + --text-secondary: rgba(28, 28, 28, 0.83); |
| 54 | + --text-tertiary: #5f5f5d; |
| 55 | + --text-quaternary: rgba(28, 28, 28, 0.4); |
| 56 | + --text-inverse: #fcfbf8; |
| 57 | + --border-subtle: #eceae4; |
| 58 | + --border-standard: rgba(28, 28, 28, 0.4); |
| 59 | + --border-strong: rgba(28, 28, 28, 0.4); |
| 60 | + --ring: rgba(59, 130, 246, 0.5); |
| 61 | + --shadow-panel: none; |
| 62 | + --shadow-elevated: none; |
| 63 | + --shadow-inset: |
| 64 | + rgba(255, 255, 255, 0.2) 0px 0.5px 0px 0px inset, |
| 65 | + rgba(0, 0, 0, 0.2) 0px 0px 0px 0.5px inset, |
| 66 | + rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; |
| 67 | + --scrollbar-thumb: rgba(28, 28, 28, 0.18); |
| 68 | + --scrollbar-track: transparent; |
| 69 | + --selection: rgba(28, 28, 28, 0.1); |
| 70 | + --page-glow: |
| 71 | + radial-gradient(circle at 18% 12%, rgba(230, 188, 145, 0.18), transparent 26%), |
| 72 | + radial-gradient(circle at 82% 10%, rgba(146, 174, 216, 0.12), transparent 22%), |
| 73 | + radial-gradient(circle at 50% 72%, rgba(240, 214, 185, 0.1), transparent 26%); |
| 74 | + } |
| 75 | + |
| 76 | + html[data-theme="dark"] { |
| 77 | + color-scheme: dark; |
| 78 | + --bg-page: #151210; |
| 79 | + --bg-panel: rgba(21, 18, 16, 0.96); |
| 80 | + --bg-surface: rgba(247, 244, 237, 0.03); |
| 81 | + --bg-surface-hover: rgba(247, 244, 237, 0.05); |
| 82 | + --bg-input: rgba(247, 244, 237, 0.02); |
| 83 | + --bg-button-ghost: transparent; |
| 84 | + --bg-button-subtle: rgba(247, 244, 237, 0.06); |
| 85 | + --bg-primary: #f7f4ed; |
| 86 | + --bg-primary-hover: #fcfbf8; |
| 87 | + --text-primary: #f7f4ed; |
| 88 | + --text-secondary: rgba(247, 244, 237, 0.82); |
| 89 | + --text-tertiary: rgba(247, 244, 237, 0.68); |
| 90 | + --text-quaternary: rgba(247, 244, 237, 0.42); |
| 91 | + --text-inverse: #1c1c1c; |
| 92 | + --border-subtle: rgba(247, 244, 237, 0.08); |
| 93 | + --border-standard: rgba(247, 244, 237, 0.24); |
| 94 | + --border-strong: rgba(247, 244, 237, 0.24); |
| 95 | + --ring: rgba(96, 165, 250, 0.5); |
| 96 | + --shadow-panel: none; |
| 97 | + --shadow-elevated: none; |
| 98 | + --shadow-inset: |
| 99 | + rgba(255, 255, 255, 0.3) 0px 0.5px 0px 0px inset, |
| 100 | + rgba(0, 0, 0, 0.18) 0px 0px 0px 0.5px inset, |
| 101 | + rgba(0, 0, 0, 0.08) 0px 1px 2px 0px; |
| 102 | + --scrollbar-thumb: rgba(247, 244, 237, 0.2); |
| 103 | + --scrollbar-track: transparent; |
| 104 | + --selection: rgba(247, 244, 237, 0.16); |
| 105 | + --page-glow: none; |
| 106 | + } |
| 107 | + |
| 108 | + html { |
| 109 | + min-height: 100%; |
| 110 | + background: |
| 111 | + var(--page-glow), |
| 112 | + linear-gradient(180deg, var(--bg-page) 0%, var(--bg-page) 100%); |
| 113 | + } |
99 | 114 |
|
100 | | -*::-webkit-scrollbar { |
101 | | - width: 0.75rem; |
102 | | - height: 0.75rem; |
103 | | -} |
| 115 | + body { |
| 116 | + min-height: 100vh; |
| 117 | + margin: 0; |
| 118 | + color: var(--text-primary); |
| 119 | + font-family: var(--font-sans); |
| 120 | + text-rendering: optimizeLegibility; |
| 121 | + background: |
| 122 | + linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)), |
| 123 | + transparent; |
| 124 | + } |
104 | 125 |
|
105 | | -*::-webkit-scrollbar-track, |
106 | | -*::-webkit-scrollbar-track:hover, |
107 | | -*::-webkit-scrollbar-track:active { |
108 | | - background: var(--scrollbar-track); |
109 | | -} |
| 126 | + * { |
| 127 | + box-sizing: border-box; |
| 128 | + scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); |
| 129 | + scrollbar-width: thin; |
| 130 | + } |
110 | 131 |
|
111 | | -*::-webkit-scrollbar-thumb, |
112 | | -*::-webkit-scrollbar-thumb:hover, |
113 | | -*::-webkit-scrollbar-thumb:active { |
114 | | - background-color: var(--scrollbar-thumb); |
115 | | - border: 0.25rem solid transparent; |
116 | | - border-radius: 9999px; |
117 | | - background-clip: content-box; |
118 | | -} |
| 132 | + *::-webkit-scrollbar { |
| 133 | + width: 0.75rem; |
| 134 | + height: 0.75rem; |
| 135 | + } |
119 | 136 |
|
120 | | -button, |
121 | | -input, |
122 | | -textarea { |
123 | | - font: inherit; |
124 | | -} |
| 137 | + *::-webkit-scrollbar-track, |
| 138 | + *::-webkit-scrollbar-track:hover, |
| 139 | + *::-webkit-scrollbar-track:active { |
| 140 | + background: var(--scrollbar-track); |
| 141 | + } |
| 142 | + |
| 143 | + *::-webkit-scrollbar-thumb, |
| 144 | + *::-webkit-scrollbar-thumb:hover, |
| 145 | + *::-webkit-scrollbar-thumb:active { |
| 146 | + background-color: var(--scrollbar-thumb); |
| 147 | + border: 0.25rem solid transparent; |
| 148 | + border-radius: 9999px; |
| 149 | + background-clip: content-box; |
| 150 | + } |
| 151 | + |
| 152 | + button, |
| 153 | + input, |
| 154 | + textarea { |
| 155 | + font: inherit; |
| 156 | + } |
| 157 | + |
| 158 | + ::selection { |
| 159 | + background: var(--selection); |
| 160 | + } |
125 | 161 |
|
126 | | -::selection { |
127 | | - background: var(--selection); |
128 | 162 | } |
129 | 163 |
|
130 | 164 | @layer base { |
|
0 commit comments