style(tailwind): simplify CSS with dynamic color tokens

Color System:
- Remove hardcoded @theme color definitions (rely on Go-injected palette)
- Remove hardcoded .dark class color overrides
- Use dynamic CSS custom properties throughout
- Keep only :root dynamic token mappings

Toast Styles:
- Remove border-radius (sharp corners)
- Unify success/error/info variants to use CSS custom properties
- Remove variant-specific color overrides for light/dark themes
- Apply consistent --toast-bg, --toast-text, --toast-border tokens

Omnibox Styles:
- Update border width from 2px to 1px
- Remove border-radius for sharp corners throughout
- Apply consistent dynamic color tokens

Findbar:
- Remove border-radius from buttons for consistency

commit: 926c7d2682a28bef3328713f5f8c70d7cf533481
author: bamen · 12mo ago · 2025-10-06 17:06 UTC
committer: bamen · 12mo ago · 2025-10-06 19:56 UTC
parent: e4d5fcf
signature: unsigned

1 file · +9 -59

M gui/src/styles/tailwind.css +9 -59

@@ -1,17 +1,5 @@
1	1		@import "tailwindcss";
2	2
3		-	/* Define custom theme colors for v4 */
4		-	@theme {
5		-	/* Light theme colors (default) */
6		-	--color-browser-bg: rgb(253 252 250);
7		-	--color-browser-surface: rgb(245 245 240);
8		-	--color-browser-surface-variant: rgb(253 250 245);
9		-	--color-browser-text: rgb(17 24 39);
10		-	--color-browser-muted: rgb(107 114 128);
11		-	--color-browser-accent: rgb(59 130 246);
12		-	--color-browser-border: rgb(229 231 235);
13		-	}
14		-
15	3		/* Dynamic theme switching via CSS variables */
16	4		:root {
17	5		--dynamic-bg: var(--color-browser-bg);

@@ -23,17 +11,6 @@
23	11		--dynamic-border: var(--color-browser-border);
24	12		}
25	13
26		-	/* Dark theme colors (applied via .dark class from GTK) */
27		-	.dark {
28		-	--dynamic-bg: rgb(17 24 39);
29		-	--dynamic-surface-variant: rgb(21 30 50);
30		-	--dynamic-surface: rgb(31 41 55);
31		-	--dynamic-text: rgb(243 244 246);
32		-	--dynamic-muted: rgb(156 163 175);
33		-	--dynamic-accent: rgb(96 165 250);
34		-	--dynamic-border: rgb(55 65 81);
35		-	}
36		-
37	14		/* Base styles for browser UI components */
38	15		.browser-ui {
39	16		background-color: var(--dynamic-bg);

@@ -44,7 +21,7 @@
44	21
45	22		/* Toast notification styles */
46	23		.toast-base {
47		-	border-radius: 0.375rem; /* rounded-md */
	24	+	border-radius: 0;
48	25		box-shadow:
49	26		0 10px 15px -3px rgb(0 0 0 / 0.1),
50	27		0 4px 6px -4px rgb(0 0 0 / 0.1);

@@ -56,47 +33,19 @@
56	33		border: 1px solid var(--dynamic-border);
57	34		}
58	35
59		-	.toast-success {
60		-	background-color: rgb(240 253 244);
61		-	color: rgb(22 163 74);
62		-	border: 1px solid rgb(187 247 208);
63		-	}
64		-
65		-	.dark .toast-success {
66		-	background-color: rgb(22 163 74 / 0.2);
67		-	color: rgb(187 247 208);
68		-	border-color: rgb(22 163 74);
69		-	}
70		-
71		-	.toast-error {
72		-	background-color: rgb(254 242 242);
73		-	color: rgb(220 38 38);
74		-	border: 1px solid rgb(254 202 202);
75		-	}
76		-
77		-	.dark .toast-error {
78		-	background-color: rgb(220 38 38 / 0.2);
79		-	color: rgb(254 202 202);
80		-	border-color: rgb(220 38 38);
81		-	}
82		-
	36	+	.toast-success,
	37	+	.toast-error,
83	38		.toast-info {
84		-	background-color: rgb(239 246 255);
85		-	color: rgb(59 130 246);
86		-	border: 1px solid rgb(191 219 254);
87		-	}
88		-
89		-	.dark .toast-info {
90		-	background-color: rgb(59 130 246 / 0.2);
91		-	color: rgb(191 219 254);
92		-	border-color: rgb(59 130 246);
	39	+	background-color: var(--toast-bg, var(--dynamic-surface));
	40	+	color: var(--toast-text, var(--dynamic-text));
	41	+	border: 1px solid var(--toast-border, var(--dynamic-border));
93	42		}
94	43
95	44		/* Omnibox/Find bar styles */
96	45		.omnibox-base {
97	46		background-color: var(--dynamic-bg);
98	47		color: var(--dynamic-text);
99		-	border: 2px solid var(--dynamic-border);
	48	+	border: 1px solid var(--dynamic-border);
100	49		box-shadow:
101	50		0 4px 6px -1px rgb(0 0 0 / 0.1),
102	51		0 2px 4px -2px rgb(0 0 0 / 0.1);

@@ -123,7 +72,7 @@
123	72		.omnibox-results {
124	73		background-color: var(--dynamic-bg);
125	74		border: 1px solid var(--dynamic-border);
126		-	border-radius: 0.375rem;
	75	+	border-radius: 0;
127	76		box-shadow:
128	77		0 10px 15px -3px rgb(0 0 0 / 0.1),
129	78		0 4px 6px -4px rgb(0 0 0 / 0.1);

@@ -171,6 +120,7 @@
171	120
172	121		.findbar-button {
173	122		padding: 0.25rem 0.5rem;
	123	+	border-radius: 0;
174	124		color: var(--dynamic-muted);
175	125		transition: colors 150ms;
176	126		font-size: 0.875rem;

 @import "tailwindcss";
-/* Define custom theme colors for v4 */
-@theme {
-  /* Light theme colors (default) */
-  --color-browser-bg: rgb(253 252 250);
-  --color-browser-surface: rgb(245 245 240);
-  --color-browser-surface-variant: rgb(253 250 245);
-  --color-browser-text: rgb(17 24 39);
-  --color-browser-muted: rgb(107 114 128);
-  --color-browser-accent: rgb(59 130 246);
-  --color-browser-border: rgb(229 231 235);
-}
 /* Dynamic theme switching via CSS variables */
 :root {
   --dynamic-bg: var(--color-browser-bg);
   --dynamic-border: var(--color-browser-border);
 }
-/* Dark theme colors (applied via .dark class from GTK) */
-.dark {
-  --dynamic-bg: rgb(17 24 39);
-  --dynamic-surface-variant: rgb(21 30 50);
-  --dynamic-surface: rgb(31 41 55);
-  --dynamic-text: rgb(243 244 246);
-  --dynamic-muted: rgb(156 163 175);
-  --dynamic-accent: rgb(96 165 250);
-  --dynamic-border: rgb(55 65 81);
-}
 /* Base styles for browser UI components */
 .browser-ui {
   background-color: var(--dynamic-bg);
 /* Toast notification styles */
 .toast-base {
-  border-radius: 0.375rem; /* rounded-md */
+  border-radius: 0;
   box-shadow:
     0 10px 15px -3px rgb(0 0 0 / 0.1),
     0 4px 6px -4px rgb(0 0 0 / 0.1);
   border: 1px solid var(--dynamic-border);
 }
-.toast-success {
+.toast-success,
-  background-color: rgb(240 253 244);
+.toast-error,
-  color: rgb(22 163 74);
-  border: 1px solid rgb(187 247 208);
-}
-.dark .toast-success {
-  background-color: rgb(22 163 74 / 0.2);
-  color: rgb(187 247 208);
-  border-color: rgb(22 163 74);
-}
-.toast-error {
-  background-color: rgb(254 242 242);
-  color: rgb(220 38 38);
-  border: 1px solid rgb(254 202 202);
-}
-.dark .toast-error {
-  background-color: rgb(220 38 38 / 0.2);
-  color: rgb(254 202 202);
-  border-color: rgb(220 38 38);
-}
 .toast-info {
-  background-color: rgb(239 246 255);
+  background-color: var(--toast-bg, var(--dynamic-surface));
-  color: rgb(59 130 246);
+  color: var(--toast-text, var(--dynamic-text));
-  border: 1px solid rgb(191 219 254);
+  border: 1px solid var(--toast-border, var(--dynamic-border));
-}
-.dark .toast-info {
-  background-color: rgb(59 130 246 / 0.2);
-  color: rgb(191 219 254);
-  border-color: rgb(59 130 246);
 }
 /* Omnibox/Find bar styles */
 .omnibox-base {
   background-color: var(--dynamic-bg);
   color: var(--dynamic-text);
-  border: 2px solid var(--dynamic-border);
+  border: 1px solid var(--dynamic-border);
   box-shadow:
     0 4px 6px -1px rgb(0 0 0 / 0.1),
     0 2px 4px -2px rgb(0 0 0 / 0.1);
 .omnibox-results {
   background-color: var(--dynamic-bg);
   border: 1px solid var(--dynamic-border);
-  border-radius: 0.375rem;
+  border-radius: 0;
   box-shadow:
     0 10px 15px -3px rgb(0 0 0 / 0.1),
     0 4px 6px -4px rgb(0 0 0 / 0.1);
 .findbar-button {
   padding: 0.25rem 0.5rem;
+  border-radius: 0;
   color: var(--dynamic-muted);
   transition: colors 150ms;
   font-size: 0.875rem;