Skip to content

Commit 0da42c4

Browse files
steverstever
committed
Theme changes
1 parent d21c662 commit 0da42c4

6 files changed

Lines changed: 81 additions & 32 deletions

File tree

‎apps/web/src/components/ProjectEditor.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export function ProjectEditor() {
157157
<Button
158158
label={t("actions.play")}
159159
icon="pi pi-play"
160-
className={clsx("mt-2 mr-2", isMobile && "ml-2")}
160+
className={clsx("zx-run mt-2 mr-2", isMobile && "ml-2")}
161161
onClick={() => {
162162
dashboardLock();
163163
showLoading();

‎packages/i18n/LanguageSwitcher.jsx‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,36 @@ import {Dropdown} from 'primereact/dropdown';
44
import {SUPPORTED_LANGUAGES} from './languages';
55

66
// Language picker built on primereact's Dropdown so it inherits the site theme
7-
// (both apps already ship primereact). A leading globe icon marks it as the
8-
// language control. Apps pass className/style to fit their own chrome.
7+
// (both apps already ship primereact). Collapsed it shows a compact rainbow
8+
// mark plus the uppercase language code; the open list shows full names. Apps
9+
// pass className/style to fit their own chrome.
910
export function LanguageSwitcher({className, style}) {
1011
const {i18n, t} = useTranslation();
1112
const active = (i18n.resolvedLanguage || i18n.language || 'en').split('-')[0];
1213
const value = SUPPORTED_LANGUAGES.some((l) => l.code === active) ? active : 'en';
1314

14-
const selectedTemplate = (option) => {
15-
const label =
16-
option?.label ??
17-
SUPPORTED_LANGUAGES.find((l) => l.code === value)?.label ??
18-
'';
19-
return (
20-
<span className="flex align-items-center gap-2">
21-
<i className="pi pi-globe" />
22-
<span>{label}</span>
23-
</span>
24-
);
25-
};
15+
const selectedTemplate = () => (
16+
<span className="flex align-items-center gap-2">
17+
<span
18+
aria-hidden="true"
19+
style={{
20+
width: '16px',
21+
height: '11px',
22+
borderRadius: '2px',
23+
flex: 'none',
24+
background:
25+
'linear-gradient(90deg,#D8222A 0 25%,#E8C400 25% 50%,#2FC04B 50% 75%,#2BD4D4 75% 100%)',
26+
}}
27+
/>
28+
<span>{value.toUpperCase()}</span>
29+
</span>
30+
);
2631

2732
return (
2833
<Dropdown
2934
aria-label={t('language')}
3035
className={className}
31-
style={{width: '11rem', ...style}}
36+
style={{width: '6.25rem', ...style}}
3237
value={value}
3338
options={SUPPORTED_LANGUAGES}
3439
optionLabel="label"

‎packages/ui/Nav.scss‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@
1010
border: 0;
1111
border-radius: 0;
1212
background: linear-gradient(var(--zx-surface), #1B1714);
13-
padding: 0 1rem;
1413
min-height: 56px;
1514
gap: 0.5rem;
15+
// No padding on the bar itself: primeflex ships an !important padding
16+
// utility layer that collapses it to 0 anyway, and we want the bar
17+
// background plus the rainbow rule to stay full-bleed. The page gutter
18+
// is applied to the brand and the end slot instead (our own elements,
19+
// which nothing else targets).
1620
}
1721

18-
.p-menubar-start { display: flex; align-items: center; }
22+
.p-menubar-start { display: flex; align-items: center; margin-left: 1rem; }
1923

2024
// brand: rainbow mark + wordmark, doubles as the home control
2125
.zx-brand {
@@ -52,8 +56,11 @@
5256
white-space: nowrap;
5357
}
5458

55-
// top-level menu items: uppercase, letterspaced, quiet until hover
59+
// top-level menu items: uppercase, letterspaced, quiet until hover.
60+
// Tighter horizontal padding than the theme's 1rem so the bar reads dense
61+
// and deliberate rather than airy.
5662
.p-menubar-root-list > .p-menuitem > .p-menuitem-link {
63+
padding: 0.6rem 0.75rem;
5764
border-radius: 6px;
5865
.p-menuitem-text {
5966
text-transform: uppercase;
@@ -67,8 +74,19 @@
6774
&:hover .p-menuitem-icon { color: var(--zx-text); }
6875
}
6976

70-
.zx-deck-end { display: flex; align-items: center; gap: 0.5rem; }
71-
.zx-lang .p-dropdown { background: var(--zx-ground); }
77+
.zx-deck-end { display: flex; align-items: center; gap: 0.5rem; margin-right: 1rem; }
78+
79+
// Language picker reads as part of the header: transparent so the bar shows
80+
// through, with the theme's border defining the pill. (zx-lang is applied
81+
// to the .p-dropdown element itself, not a parent.)
82+
.p-dropdown.zx-lang {
83+
background: transparent;
84+
}
85+
86+
// Search is a deliberately recessed field, distinct from the flush header.
87+
.p-inputtext {
88+
background: var(--zx-ground);
89+
}
7290

7391
.zx-rule {
7492
height: 3px;

‎packages/ui/build-theme.mjs‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,23 @@ const OUT = join(here, "theme.css");
2727
const CYAN_HEX = "#2BD4D4";
2828
const CYAN_RGB = "43, 212, 212";
2929

30+
// The theme hardcodes Roboto on every control. We strip the bundled Roboto
31+
// @font-face below, so that literal stack falls through fonts that mostly do
32+
// not exist (Helvetica Neue Light, Lucida Grande), landing on a fallback whose
33+
// vertical metrics ride text high in fixed-height controls. Remap it to the
34+
// system stack so control text matches the body and sits on its true centre.
35+
const SYS_FONT =
36+
'system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
37+
const ROBOTO_STACK =
38+
/Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif/g;
39+
3040
let css = readFileSync(SRC, "utf8");
3141

3242
// Drop the bundled Roboto @font-face blocks: they reference ./fonts/* relative
33-
// to the source file, which would 404 from the package, and both apps use the
34-
// system font stack anyway.
43+
// to the source file, which would 404 from the package, and we use the system
44+
// font stack anyway.
3545
css = css.replace(/@font-face\s*\{[^}]*\}/g, "");
46+
css = css.replace(ROBOTO_STACK, SYS_FONT);
3647

3748
// Remap the primary palette.
3849
css = css.replace(/#9fa8da/gi, CYAN_HEX);

‎packages/ui/theme.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
--text-color-secondary:rgba(255, 255, 255, 0.6);
1212
--primary-color:#2BD4D4;
1313
--primary-color-text:#121212;
14-
--font-family:Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
14+
--font-family:system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
1515
--surface-0: #121212;
1616
--surface-50: #2a2a2a;
1717
--surface-100: #414141;
@@ -60,7 +60,7 @@
6060
}
6161

6262
.p-component {
63-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
63+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
6464
font-size: 1rem;
6565
font-weight: normal;
6666
}
@@ -93,7 +93,7 @@
9393

9494
.p-link {
9595
font-size: 1rem;
96-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
96+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
9797
border-radius: 4px;
9898
}
9999
.p-link:focus {
@@ -272,7 +272,7 @@
272272
padding: 0.5rem 0;
273273
}
274274
.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
275-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
275+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
276276
font-size: 1rem;
277277
color: rgba(255, 255, 255, 0.87);
278278
padding: 0;
@@ -722,7 +722,7 @@
722722
padding: 0.5rem 0;
723723
}
724724
.p-chips .p-chips-multiple-container .p-chips-input-token input {
725-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
725+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
726726
font-size: 1rem;
727727
color: rgba(255, 255, 255, 0.87);
728728
padding: 0;
@@ -1087,7 +1087,7 @@
10871087
}
10881088

10891089
.p-inputtext {
1090-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
1090+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10911091
font-size: 1rem;
10921092
color: rgba(255, 255, 255, 0.87);
10931093
background: #1e1e1e;
@@ -6167,7 +6167,7 @@
61676167
}
61686168
.p-terminal .p-terminal-input {
61696169
font-size: 1rem;
6170-
font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
6170+
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
61716171
}
61726172

61736173
.p-badge {

‎packages/ui/theme.scss‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,22 @@
7676
border-color: var(--zx-cyan);
7777
}
7878

79-
// Primary buttons read as "go": the accent fill with dark text.
80-
.p-button:not(.p-button-secondary):not(.p-button-text):not(.p-button-outlined) {
79+
.p-button {
8180
font-weight: 600;
8281
}
82+
83+
// Run / play actions use the Spectrum green (go), with dark text, per the
84+
// functional colour code. Apply `zx-run` to the button.
85+
.p-button.zx-run {
86+
background: var(--zx-green);
87+
border-color: var(--zx-green);
88+
color: #06210D;
89+
90+
.p-button-icon { color: #06210D; }
91+
92+
&:enabled:hover {
93+
background: #43D65F;
94+
border-color: #43D65F;
95+
color: #06210D;
96+
}
97+
}

0 commit comments

Comments
 (0)