Skip to content

Commit 2d6b8c0

Browse files
dshafikdshafik
committed
feat: Upgrade to Tailwind v4
1 parent c126940 commit 2d6b8c0

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+5253
-5336
lines changed

‎docs/.vitepress/theme/Frontpage.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const toggleAppearance = inject('toggle-appearance', () => {
1212
</script>
1313
<template>
1414
<header
15-
class="h-screen flex items-center bg-gradient-to-br from-green-400 via-blue-500 to-blue-600 dark:from-green-800 dark:via-blue-800 dark:to-blue-900 shadow"
15+
class="h-screen flex items-center bg-linear-to-br from-green-400 via-blue-500 to-blue-600 dark:from-green-800 dark:via-blue-800 dark:to-blue-900 shadow-sm"
1616
>
1717
<div class="mx-auto px-4 py-8 text-center w-11/12 md:w-3/4">
1818
<svg
@@ -148,7 +148,7 @@ const toggleAppearance = inject('toggle-appearance', () => {
148148
<section class="dark:bg-neutral-900 w-full" ref="content">
149149
<div class="mx-auto px-4 py-12 prose dark:prose-invert text-center">
150150
<h2
151-
class="text-4xl font-bold mb-4 bg-gradient-to-br text-transparent bg-clip-text inline-block from-green-400 via-blue-500 to-blue-600 dark:from-green-800 dark:via-blue-800 dark:to-blue-900"
151+
class="text-4xl font-bold mb-4 bg-linear-to-br text-transparent bg-clip-text inline-block from-green-400 via-blue-500 to-blue-600 dark:from-green-800 dark:via-blue-800 dark:to-blue-900"
152152
>
153153
What is Beacon?
154154
</h2>

‎docs/.vitepress/theme/tailwind.postcss

+1-156
Original file line numberDiff line numberDiff line change
@@ -1,156 +1 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
@layer base {
6-
:root {
7-
--background: 0 0% 100%;
8-
--foreground: 240 10% 3.9%;
9-
--card: 0 0% 100%;
10-
--card-foreground: 240 10% 3.9%;
11-
--popover: 0 0% 100%;
12-
--popover-foreground: 240 10% 3.9%;
13-
--primary: 240 5.9% 10%;
14-
--primary-foreground: 0 0% 98%;
15-
--secondary: 240 4.8% 95.9%;
16-
--secondary-foreground: 240 5.9% 10%;
17-
--muted: 240 4.8% 95.9%;
18-
--muted-foreground: 240 3.8% 46.1%;
19-
--accent: 240 4.8% 95.9%;
20-
--accent-foreground: 240 5.9% 10%;
21-
--destructive: 0 84.2% 60.2%;
22-
--destructive-foreground: 0 0% 98%;
23-
--border: 240 5.9% 90%;
24-
--input: 240 5.9% 90%;
25-
--ring: 240 5.9% 10%;
26-
--radius: 1rem;
27-
--chart-1: 173 58% 39%;
28-
--chart-1-color: hsl(173 58% 39%);
29-
--chart-2: 12 76% 61%;
30-
--chart-2-color: hsl(12 76% 61%);
31-
--chart-3: 197 37% 24%;
32-
--chart-3-color: hsl(197 37% 24%);
33-
--chart-4: 43 74% 66%;
34-
--chart-4-color: hsl(43 74% 66%);
35-
--chart-5: 27 87% 67%;
36-
--chart-5-color: hsl(27 87% 67%);
37-
--sidebar-background: 0 0% 98%;
38-
--sidebar-background-color: hsl(0 0% 98%);
39-
--sidebar-foreground: 240 5.3% 26.1%;
40-
--sidebar-foreground-color: hsl(240 5.3% 26.1%);
41-
--sidebar-primary: 240 5.9% 10%;
42-
--sidebar-primary-color: hsl(240 5.9% 10%);
43-
--sidebar-primary-foreground: 172.5 20% 82%;
44-
--sidebar-primary-foreground-color: hsl(172.5 20% 82%);
45-
--sidebar-accent: 240 4.8% 95.9%;
46-
--sidebar-accent-color: hsl(240 4.8% 95.9%);
47-
--sidebar-accent-foreground: 240 5.9% 10%;
48-
--sidebar-accent-foreground-color: hsl(240 5.9% 10%);
49-
--sidebar-border: 220 13% 91%;
50-
--sidebar-border-color: hsl(220 13% 91%);
51-
--sidebar-ring: 217.2 91.2% 59.8%;
52-
--sidebar-ring-color: hsl(217.2 91.2% 59.8%);
53-
--sidebar-tooltip-bg: 328.6 85.5% 70.2%;
54-
--sidebar-tooltip-bg-color: hsl(328.6 85.5% 70.2%);
55-
--sidebar-tooltip-color: var(--sidebar-accent)
56-
}
57-
58-
.dark {
59-
--background: 240 10% 3.9%;
60-
--foreground: 0 0% 98%;
61-
--card: 240 10% 3.9%;
62-
--card-foreground: 0 0% 98%;
63-
--popover: 240 10% 3.9%;
64-
--popover-foreground: 0 0% 98%;
65-
--primary: 0 0% 98%;
66-
--primary-foreground: 240 5.9% 10%;
67-
--secondary: 240 3.7% 15.9%;
68-
--secondary-foreground: 0 0% 98%;
69-
--muted: 240 3.7% 15.9%;
70-
--muted-foreground: 240 5% 64.9%;
71-
--accent: 240 3.7% 15.9%;
72-
--accent-foreground: 0 0% 98%;
73-
--destructive: 0 62.8% 30.6%;
74-
--destructive-foreground: 0 0% 98%;
75-
--border: 240 3.7% 15.9%;
76-
--input: 240 3.7% 15.9%;
77-
--ring: 240 4.9% 83.9%;
78-
--chart-1: 220 70% 50%;
79-
--chart-1-color: hsl(220 70% 50%);
80-
--chart-5: 160 60% 45%;
81-
--chart-5-color: hsl(160 60% 45%);
82-
--chart-3: 30 80% 55%;
83-
--chart-3-color: hsl(30 80% 55%);
84-
--chart-4: 280 65% 60%;
85-
--chart-4-color: hsl(280 65% 60%);
86-
--chart-2: 340 75% 55%;
87-
--chart-2-color: hsl(340 75% 55%);
88-
--sidebar-background: 240 5.9% 10%;
89-
--sidebar-background-color: hsl(240 5.9% 10%);
90-
--sidebar-foreground: 240 4.8% 95.9%;
91-
--sidebar-foreground-color: hsl(240 4.8% 95.9%);
92-
--sidebar-primary: 224.3 76.3% 48%;
93-
--sidebar-primary-color: hsl(224.3 76.3% 48%);
94-
--sidebar-primary-foreground: 172.5 20% 50%;
95-
--sidebar-primary-foreground-color: hsl(172.5 20% 50%);
96-
--sidebar-accent: 240 3.7% 15.9%;
97-
--sidebar-accent-color: hsl(240 3.7% 15.9%);
98-
--sidebar-accent-foreground: 240 4.8% 95.9%;
99-
--sidebar-accent-foreground-color: hsl(240 4.8% 95.9%);
100-
--sidebar-border: 240 3.7% 15.9%;
101-
--sidebar-border-color: hsl(240 3.7% 15.9%);
102-
--sidebar-ring: 217.2 91.2% 59.8%;
103-
--sidebar-ring-color: hsl(217.2 91.2% 59.8%);
104-
}
105-
}
106-
107-
:root {
108-
--vp-font-family-base: "Source Sans 3", sans-serif;
109-
--vp-font-family-mono: "Source Code Pro", monospace;
110-
--vp-nav-logo-height: 64px;
111-
--vp-code-line-highlight-color: var(--vp-badge-tip-bg);
112-
}
113-
114-
header .title span {
115-
font-size: 32px;
116-
font-family: var(--vp-font-family-mono), monospace;
117-
}
118-
119-
header .title img {
120-
padding: 8px;
121-
}
122-
123-
code {
124-
white-space: pre;
125-
}
126-
127-
.mermaid rect, .mermaid polygon {
128-
fill: var(--vp-c-default-soft) !important;
129-
stroke: var(--vp-c-default-1) !important;
130-
}
131-
132-
.mermaid-start > rect {
133-
fill: var(--vp-c-indigo-soft) !important;
134-
stroke: var(--vp-c-indigo-1) !important;
135-
}
136-
137-
.mermaid-decision > polygon {
138-
fill: var(--vp-c-yellow-soft) !important;
139-
stroke: var(--vp-c-yellow-1) !important;
140-
}
141-
142-
.mermaid-conditional > rect {
143-
fill: var(--vp-c-purple-soft) !important;
144-
stroke: var(--vp-c-purple-1) !important;
145-
}
146-
147-
.mermaid-error > rect {
148-
fill: var(--vp-c-danger-soft) !important;
149-
stroke: var(--vp-c-danger-1) !important;
150-
151-
}
152-
153-
.mermaid-end > rect {
154-
fill: var(--vp-c-success-soft) !important;
155-
stroke: var(--vp-c-success-1) !important;
156-
}
1+
@import '../../../resources/css/app.css';

0 commit comments

Comments
 (0)