lmin/zmo-cli
1
0
Fork 0
Code Issues Pull Requests Actions 6 Packages Projects Releases Wiki Activity

fix(ui): migrate to --v2-font-family-sans variable and improve home empty state (#29552)

Browse Source
This commit is contained in:
Brendan Allan
2026-05-27 17:18:52 +08:00
committed by GitHub
parent e1581183ff
commit e2dc89c6f3
31 changed files with 152 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/ui/src/v2/components/accordion-v2.css
View File

@@ -15,7 +15,7 @@
box-shadow: 0 0 0 0.5px var(--accordion-v2-border);
overflow: hidden;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
color: var(--accordion-v2-fg);
-webkit-font-smoothing: antialiased;

2
packages/ui/src/v2/components/accordion-v2.stories.tsx
View File

@@ -32,7 +32,7 @@ export default {
},
}
const frame = { width: "346px", "font-family": "var(--font-family-sans)", "font-size": "13px" } as const
const frame = { width: "346px", "font-family": "var(--v2-font-family-sans)", "font-size": "13px" } as const
export const Basic = {
render: () => (

2
packages/ui/src/v2/components/avatar-v2.css
View File

@@ -14,7 +14,7 @@
height: 28px;
border-radius: var(--avatar-radius);
border: 0.5px solid var(--v2-border-border-base);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-weight: 530;
font-size: var(--avatar-font-size);
line-height: 1;

2
packages/ui/src/v2/components/badge-v2.css
View File

@@ -13,7 +13,7 @@
border: 0.5px solid var(--border-border-base);
background: var(--background-bg-layer-02);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 11px;

2
packages/ui/src/v2/components/basic-tool-v2.css
View File

@@ -21,7 +21,7 @@
gap: 8px;
min-width: 0;
width: 100%;
font-family: var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
[data-slot="basic-tool-v2-trigger"] {

2
packages/ui/src/v2/components/button-v2.css
View File

@@ -11,7 +11,7 @@
justify-content: center;
gap: 6px;
border-radius: 6px;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 13px;

6
packages/ui/src/v2/components/checkbox-v2.css
View File

@@ -10,7 +10,7 @@
[data-slot="checkbox-v2-error"] {
color: var(--state-fg-danger);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@@ -90,7 +90,7 @@
display: inline-flex;
user-select: none;
color: inherit;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-variant-numeric: tabular-nums;
@@ -109,7 +109,7 @@
[data-slot="checkbox-v2-description"] {
color: var(--text-text-muted);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1;

2
packages/ui/src/v2/components/checkbox-v2.stories.tsx
View File

@@ -49,7 +49,7 @@ export const Controlled = {
label="Controlled checkbox"
description="Toggled from Storybook state."
/>
<div style={{ "font-family": "var(--font-family-sans)", "font-size": "12px", color: "#808080" }}>
<div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
Checked: {String(checked())}
</div>
</div>

4
packages/ui/src/v2/components/dialog-v2.css
View File

@@ -64,7 +64,7 @@
[data-slot="dialog-title"] {
margin: 0;
font-family: "Inter", var(--font-family-sans);
font-family: "Inter", var(--v2-font-family-sans);
font-weight: 530;
font-size: 15px;
line-height: 100%;
@@ -74,7 +74,7 @@
}
[data-slot="dialog-description"] {
font-family: "Inter", var(--font-family-sans);
font-family: "Inter", var(--v2-font-family-sans);
font-weight: 440;
font-size: 13px;
line-height: 100%;

2
packages/ui/src/v2/components/diff-changes-v2.css
View File

@@ -6,7 +6,7 @@
[data-slot="diff-changes-additions"],
[data-slot="diff-changes-deletions"] {
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-style: normal;
font-weight: 440;

4
packages/ui/src/v2/components/field-v2.css
View File

@@ -17,7 +17,7 @@
margin: 0;
padding: 0;
border: 0;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 530;
font-size: 13px;
@@ -76,7 +76,7 @@
align-self: stretch;
width: 100%;
min-height: 11px;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 11px;

4
packages/ui/src/v2/components/inline-input-v2.css
View File

@@ -81,7 +81,7 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;
@@ -138,7 +138,7 @@
border: 0;
background: transparent;
outline: none;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

2
packages/ui/src/v2/components/inline-input-v2.stories.tsx
View File

@@ -86,7 +86,7 @@ export const Controlled = {
/>
<div
style={{
"font-family": "var(--font-family-sans)",
"font-family": "var(--v2-font-family-sans)",
"font-size": "12px",
color: "var(--text-text-faint)",
}}

4
packages/ui/src/v2/components/keybind-v2.css
View File

@@ -6,7 +6,7 @@
[data-component="keybind-v2"] {
box-sizing: border-box;
font-family: var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
display: inline-flex;
flex-direction: row;
@@ -53,7 +53,7 @@
padding: 0px;
flex: 1 1 auto;
align-self: stretch;
font-family: "Inter", var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: "Inter", var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-style: normal;
font-weight: 530;
font-size: 11px;

2
packages/ui/src/v2/components/line-comment-v2.css
View File

@@ -6,7 +6,7 @@
[data-component="line-comment-v2"] {
box-sizing: border-box;
font-family: var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
min-width: 0;
width: 100%;

18
packages/ui/src/v2/components/menu-v2.css
View File

@@ -6,12 +6,12 @@
padding: 2px;
min-width: 160px;
background: var(--background-bg-layer-01);
background: var(--v2-background-bg-layer-01);
border-radius: 6px;
box-shadow: var(--elevation-floating);
box-shadow: var(--v2-elevation-floating);
outline: none;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -31,9 +31,9 @@
--menu-v2-fg-subtle: var(--text-text-muted);
--menu-v2-icon: var(--icon-icon-base);
--menu-v2-accent: var(--text-text-accent);
--menu-v2-badge-bg: var(--background-bg-layer-02);
--menu-v2-badge-border: var(--border-border-base);
--menu-v2-hover: var(--overlay-simple-overlay-hover);
--menu-v2-badge-bg: var(--v2-background-bg-layer-02);
--menu-v2-badge-border: var(--v2-border-border-base);
--menu-v2-hover: var(--v2-overlay-simple-overlay-hover);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@@ -52,7 +52,7 @@
cursor: default;
user-select: none;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
font-variation-settings: "slnt" 0;
font-variant-numeric: tabular-nums;
color: var(--menu-v2-fg);
@@ -153,7 +153,7 @@
height: 1px;
width: calc(100% + 4px);
margin: 2px -2px;
background: var(--border-border-muted);
background: var(--v2-border-border-muted);
border: none;
}
@@ -164,7 +164,7 @@
height: 28px;
padding: 0 12px;
font-family: var(--font-family-sans), "Inter", system-ui, sans-serif;
font-family: var(--v2-font-family-sans), "Inter", system-ui, sans-serif;
font-size: 11px;
font-weight: 530;
line-height: 100%;

2
packages/ui/src/v2/components/menu-v2.stories.tsx
View File

@@ -179,7 +179,7 @@ export const Context = {
border: "1px dashed rgba(0, 0, 0, 0.2)",
color: "#5c5c5c",
"font-size": "13px",
"font-family": "var(--font-family-sans)",
"font-family": "var(--v2-font-family-sans)",
"user-select": "none",
}}
>

10
packages/ui/src/v2/components/radio-v2.css
View File

@@ -9,7 +9,7 @@
align-items: center;
user-select: none;
color: var(--text-text-faint);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-style: normal;
font-weight: 440;
@@ -20,7 +20,7 @@
[data-slot="radio-v2-description"] {
color: var(--text-text-faint);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1.2;
@@ -35,7 +35,7 @@
[data-slot="radio-v2-error"] {
color: var(--state-fg-danger);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);
@@ -167,7 +167,7 @@
display: inline-flex;
user-select: none;
color: inherit;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-variant-numeric: tabular-nums;
@@ -186,7 +186,7 @@
[data-slot="radio-v2-item-description"] {
color: var(--text-text-muted);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-weight: 440;
line-height: 1;

2
packages/ui/src/v2/components/radio-v2.stories.tsx
View File

@@ -50,7 +50,7 @@ export const Controlled = {
<RadioItemV2 value="weekly" label="Weekly" />
<RadioItemV2 value="never" label="Never" />
</RadioGroupV2>
<div style={{ "font-family": "var(--font-family-sans)", "font-size": "12px", color: "#808080" }}>
<div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
Selected: {value()}
</div>
</div>

2
packages/ui/src/v2/components/segmented-control-v2.css
View File

@@ -34,7 +34,7 @@
background: transparent;
box-shadow: none;
cursor: pointer;
font-family: var(--font-family-sans), var(--sans);
font-family: var(--v2-font-family-sans), var(--sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

4
packages/ui/src/v2/components/segmented-control-v2.stories.tsx
View File

@@ -56,7 +56,7 @@ export const Controlled = {
<SegmentedControlItemV2 value="b">Grid</SegmentedControlItemV2>
<SegmentedControlItemV2 value="c">Board</SegmentedControlItemV2>
</SegmentedControlV2>
<div style={{ "font-family": "var(--font-family-sans)", "font-size": "12px", color: "#808080" }}>
<div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
Value: {value()}
</div>
</div>
@@ -74,7 +74,7 @@ export const AllowDeselect = {
<SegmentedControlItemV2 value="b">B</SegmentedControlItemV2>
<SegmentedControlItemV2 value="c">C</SegmentedControlItemV2>
</SegmentedControlV2>
<div style={{ "font-family": "var(--font-family-sans)", "font-size": "12px", color: "#808080" }}>
<div style={{ "font-family": "var(--v2-font-family-sans)", "font-size": "12px", color: "#808080" }}>
Value: {value() === null ? "none" : value()}
</div>
</div>

2
packages/ui/src/v2/components/select-v2.css
View File

@@ -110,7 +110,7 @@
background: transparent;
outline: none;
text-align: left;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

4
packages/ui/src/v2/components/switch-v2.css
View File

@@ -65,7 +65,7 @@
height: 16px;
user-select: none;
color: var(--text-text-faint);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 11px;
font-style: normal;
font-weight: 440;
@@ -76,7 +76,7 @@
[data-slot="switch-error"] {
color: var(--state-fg-danger);
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-size: 12px;
font-weight: var(--font-weight-regular);
line-height: var(--line-height-normal);

2
packages/ui/src/v2/components/tabs-v2.css
View File

@@ -9,7 +9,7 @@
height: 100%;
display: flex;
overflow: clip;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
}
[data-component="tabs-v2"][data-orientation="horizontal"] {

2
packages/ui/src/v2/components/text-input-v2.css
View File

@@ -67,7 +67,7 @@
border: 0;
background: transparent;
outline: none;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

2
packages/ui/src/v2/components/text-input-v2.stories.tsx
View File

@@ -85,7 +85,7 @@ export const Controlled = {
<TextInputV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
<div
style={{
"font-family": "var(--font-family-sans)",
"font-family": "var(--v2-font-family-sans)",
"font-size": "12px",
color: "var(--text-text-faint)",
}}

2
packages/ui/src/v2/components/textarea-v2.css
View File

@@ -53,7 +53,7 @@
background: transparent;
outline: none;
resize: vertical;
font-family: var(--font-family-sans);
font-family: var(--v2-font-family-sans);
font-style: normal;
font-weight: 440;
font-size: 13px;

2
packages/ui/src/v2/components/textarea-v2.stories.tsx
View File

@@ -66,7 +66,7 @@ export const Controlled = {
<TextareaV2 value={value()} onInput={(e) => setValue(e.currentTarget.value)} placeholder="Type here…" />
<div
style={{
"font-family": "var(--font-family-sans)",
"font-family": "var(--v2-font-family-sans)",
"font-size": "12px",
color: "var(--text-text-faint)",
}}

2
packages/ui/src/v2/components/tool-error-card-v2.css
View File

@@ -16,7 +16,7 @@
padding: 0 0 0 10px;
gap: 8px;
border-left: 2px solid var(--tec-border);
font-family: var(--font-family-sans), var(--sans), system-ui, sans-serif;
font-family: var(--v2-font-family-sans), var(--sans), system-ui, sans-serif;
font-variant-numeric: tabular-nums;
[data-slot="tool-error-card-trigger"] {

1
packages/ui/src/v2/styles/theme.css
View File

@@ -94,6 +94,7 @@
--v2-illustration-illustration-layer-03: var(--v2-grey-500);
--font-family-text: "Inter", sans-serif;
--v2-font-family-sans: "Inter", sans-serif;
}
/* OS preference fallback (no JS needed) */