experiments in a post-browser web
feat: add theme-aware surface border tokens, use in navbar/card/cmd
Add --theme-surface-border and --theme-surface-ring CSS custom properties
to both themes (peek, basic) with light/dark variants. Components now
reference these tokens instead of hardcoding border styles, ensuring
consistent floating-surface appearance across navbar, cards, and cmd bar.
+32
-3
+2
-1
app/components/peek-card.js
+2
-1
app/components/peek-card.js
···
78
78
79
79
/* Bordered — only when attribute is present and not "false" */
80
80
:host([bordered]:not([bordered="false"])) .card {
81
-
border: 1px solid var(--peek-card-border, var(--theme-border, #e0e0e0));
81
+
border: var(--theme-surface-border, 1px solid var(--peek-card-border, var(--theme-border, #e0e0e0)));
82
+
box-shadow: var(--theme-surface-ring, none);
82
83
}
83
84
84
85
/* Elevated */
+2
extensions/cmd/panel.html
+2
extensions/cmd/panel.html
···
31
31
padding: 6px 10px;
32
32
box-sizing: border-box;
33
33
background-color: rgba(40, 44, 52, 0.95);
34
+
border: var(--theme-surface-border, 1px solid rgba(255, 255, 255, 0.2));
35
+
box-shadow: var(--theme-surface-ring, 0 0 0 1px rgba(0, 0, 0, 0.5));
34
36
border-radius: 8px;
35
37
margin: 5px 10px;
36
38
width: calc(100% - 20px);
+13
themes/basic/variables.css
+13
themes/basic/variables.css
···
43
43
--theme-warning: var(--base0A);
44
44
--theme-danger: var(--base08);
45
45
46
+
/* Surface — floating panels on transparent/layered backgrounds */
47
+
--theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
48
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
49
+
46
50
/* Typography - system-ui has 96%+ support (caniuse.com/font-family-system-ui) */
47
51
--theme-font-sans: system-ui, sans-serif;
48
52
--theme-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Mono", monospace;
···
70
74
--base0D: #0a84ff; /* Blue */
71
75
--base0E: #bf5af2; /* Purple */
72
76
--base0F: #ac8e68; /* Brown */
77
+
78
+
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
79
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
73
80
}
74
81
}
75
82
···
92
99
--base0D: #0066cc;
93
100
--base0E: #6f42c1;
94
101
--base0F: #8b4513;
102
+
103
+
--theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
104
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
95
105
}
96
106
97
107
/* ========== Forced Dark Mode ========== */
···
113
123
--base0D: #0a84ff;
114
124
--base0E: #bf5af2;
115
125
--base0F: #ac8e68;
126
+
127
+
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
128
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
116
129
}
+13
themes/peek/variables.css
+13
themes/peek/variables.css
···
58
58
--theme-warning: var(--base0A);
59
59
--theme-danger: var(--base08);
60
60
61
+
/* Surface — floating panels on transparent/layered backgrounds */
62
+
--theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
63
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
64
+
61
65
/* Typography */
62
66
--theme-font-sans: "ServerMono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace;
63
67
--theme-font-mono: "ServerMono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, monospace;
···
85
89
--base0D: #0a84ff; /* Blue */
86
90
--base0E: #bf5af2; /* Purple */
87
91
--base0F: #ac8e68; /* Brown */
92
+
93
+
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
94
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
88
95
}
89
96
}
90
97
···
107
114
--base0D: #007aff;
108
115
--base0E: #af52de;
109
116
--base0F: #8b4513;
117
+
118
+
--theme-surface-border: 1px solid rgba(0, 0, 0, 0.12);
119
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.08);
110
120
}
111
121
112
122
/* ========== Forced Dark Mode ========== */
···
128
138
--base0D: #0a84ff;
129
139
--base0E: #bf5af2;
130
140
--base0F: #ac8e68;
141
+
142
+
--theme-surface-border: 1px solid rgba(255, 255, 255, 0.2);
143
+
--theme-surface-ring: 0 0 0 1px rgba(0, 0, 0, 0.5);
131
144
}