Skip to content

Commit 1dc4f9f

Browse files
pallyoungpallyoung
committed
style: normalize workspace panel typography
1 parent 4430072 commit 1dc4f9f

3 files changed

Lines changed: 37 additions & 12 deletions

File tree

‎packages/web/src/features/workspace/views/shared/search-panel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -491,7 +491,7 @@ export const SearchPanel: FC<SearchPanelProps> = ({
491491
{isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
492492
</span>
493493
<span className="workspace-search-panel__group-copy">
494-
<strong className="workspace-search-panel__group-name">{file.name}</strong>
494+
<span className="workspace-search-panel__group-name">{file.name}</span>
495495
{renderFilePathMeta(file.path, file.name)}
496496
</span>
497497
<span className="workspace-search-panel__group-count" aria-hidden="true">

‎packages/web/src/styles/components.css‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16194,9 +16194,9 @@ body.is-dragging-pane .session-action-btn-drag {
1619416194
.workspace-open-editors__title,
1619516195
.git-panel-section-toggle {
1619616196
color: var(--text-secondary);
16197-
font-size: 13px;
16198-
line-height: 1.35;
16199-
font-weight: var(--font-bold);
16197+
font-size: var(--type-body-6-size);
16198+
line-height: var(--type-body-6-line-height);
16199+
font-weight: var(--type-body-6-weight);
1620016200
letter-spacing: 0.06em;
1620116201
text-transform: uppercase;
1620216202
}
@@ -16208,6 +16208,9 @@ body.is-dragging-pane .session-action-btn-drag {
1620816208
gap: var(--gap-compact);
1620916209
margin: 0;
1621016210
min-width: 0;
16211+
font-size: var(--type-body-6-size);
16212+
line-height: var(--type-body-6-line-height);
16213+
font-weight: var(--type-body-6-weight);
1621116214
}
1621216215

1621316216
.git-panel-section-toggle {
@@ -16350,7 +16353,7 @@ body.is-dragging-pane .session-action-btn-drag {
1635016353

1635116354
.file-tree-shell .tree-label,
1635216355
.git-panel .git-row-name {
16353-
font-weight: var(--font-bold);
16356+
font-weight: var(--type-body-3-weight);
1635416357
}
1635516358

1635616359
.file-tree-shell .tree-icon--gitignored,
@@ -16914,7 +16917,8 @@ body.is-dragging-pane .session-action-btn-drag {
1691416917
padding: 0;
1691516918
border-radius: var(--radius-pill);
1691616919
font-size: 12px;
16917-
font-weight: var(--font-bold);
16920+
line-height: 1.4;
16921+
font-weight: var(--type-body-6-weight);
1691816922
}
1691916923

1692016924
.git-status-badge.untracked {

‎packages/web/src/styles/components.theme.test.ts‎

Lines changed: 27 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3273,7 +3273,8 @@ describe("components.css theme-sensitive surfaces", () => {
32733273
const section = getLastGroupedRuleBlock(
32743274
/\.git-panel-section,\s*\.git-panel-section-header,\s*\.git-panel-section-body\s*\{([^}]*)\}/g
32753275
);
3276-
const toggle = getLastRuleBlock(".git-panel-section-toggle");
3276+
const toggle = getRuleBlocksFrom(stylesheet, ".git-panel-section-toggle").join("\n");
3277+
const sectionCount = getLastRuleBlock(".git-panel-section-count");
32773278
const desktopPanel = getLastRuleBlock(".git-panel--desktop");
32783279

32793280
expect(section).toContain("min-width: 0");
@@ -3282,6 +3283,12 @@ describe("components.css theme-sensitive surfaces", () => {
32823283
expect(toggle).toContain("flex: 1 1 auto");
32833284
expect(toggle).toContain("width: 100%");
32843285
expect(toggle).toContain("justify-content: flex-start");
3286+
expect(toggle).toContain("font-size: var(--type-body-6-size)");
3287+
expect(toggle).toContain("line-height: var(--type-body-6-line-height)");
3288+
expect(toggle).toContain("font-weight: var(--type-body-6-weight)");
3289+
expect(sectionCount).toContain("font-size: var(--type-body-6-size)");
3290+
expect(sectionCount).toContain("line-height: var(--type-body-6-line-height)");
3291+
expect(sectionCount).toContain("font-weight: var(--type-body-6-weight)");
32853292
expect(desktopPanel).toContain("height: auto");
32863293
});
32873294

@@ -3295,6 +3302,8 @@ describe("components.css theme-sensitive surfaces", () => {
32953302
const rowSelected = getLastRuleBlock(".file-tree-shell .tree-item.selected");
32963303
const rowActionsBase = getLastRuleBlock(".file-tree-shell .tree-item-actions");
32973304
const rowActionsDesktop = getLastRuleBlock(".file-tree-shell--desktop .tree-item-actions");
3305+
const fileTreeLabel = getLastRuleBlock(".file-tree-shell .tree-label");
3306+
const gitRowName = getLastRuleBlock(".git-panel .git-row-name");
32983307

32993308
expect(search).toContain("gap: var(--gap-default)");
33003309
expect(search).toContain("margin: var(--space-default) var(--inset-control-inline)");
@@ -3321,6 +3330,8 @@ describe("components.css theme-sensitive surfaces", () => {
33213330
expect(rowSelected).toContain("color: var(--text-primary)");
33223331
expect(rowActionsBase).toContain("gap: var(--gap-compact)");
33233332
expect(rowActionsDesktop).toContain("opacity: 0");
3333+
expect(fileTreeLabel).toContain("font-weight: var(--type-body-3-weight)");
3334+
expect(gitRowName).toContain("font-weight: var(--type-body-3-weight)");
33243335
});
33253336

33263337
it("keeps workspace search and quick open on compact editor-search chrome", () => {
@@ -3329,6 +3340,8 @@ describe("components.css theme-sensitive surfaces", () => {
33293340
const quickJumpSearch = getLastRuleBlock(".workspace-quick-jump__search");
33303341
const workspaceSection = getLastRuleBlock(".workspace-sidebar-section");
33313342
const workspaceSectionHeader = getLastRuleBlock(".workspace-sidebar-section__header");
3343+
const workspaceSectionTitle = getLastRuleBlock(".workspace-sidebar-section__title");
3344+
const workspaceSectionCount = getLastRuleBlock(".workspace-sidebar-section__count");
33323345
const openEditorsHeader = getLastRuleBlock(".workspace-open-editors__header");
33333346
const openEditorsHeaderMain = getLastRuleBlock(".workspace-open-editors__header-main");
33343347
const openEditorsTitle = getLastRuleBlock(".workspace-open-editors__title");
@@ -3408,6 +3421,12 @@ describe("components.css theme-sensitive surfaces", () => {
34083421
expect(workspaceSection).not.toContain("border:");
34093422
expect(workspaceSection).not.toContain("border-radius:");
34103423
expect(workspaceSectionHeader).toContain("margin-bottom: var(--sp-2)");
3424+
expect(workspaceSectionTitle).toContain("font-size: var(--type-body-6-size)");
3425+
expect(workspaceSectionTitle).toContain("line-height: var(--type-body-6-line-height)");
3426+
expect(workspaceSectionTitle).toContain("font-weight: var(--type-body-6-weight)");
3427+
expect(workspaceSectionCount).toContain("font-size: var(--type-body-6-size)");
3428+
expect(workspaceSectionCount).toContain("line-height: var(--type-body-6-line-height)");
3429+
expect(workspaceSectionCount).toContain("font-weight: var(--type-body-6-weight)");
34113430
expect(openEditorsRow).toContain("grid-template-columns: minmax(0, 1fr) auto");
34123431
expect(openEditorsItemHover).toContain("background: var(--surface-hover)");
34133432
expect(openEditorsItemActiveHover).toContain("background: var(--state-selected-bg)");
@@ -3429,6 +3448,7 @@ describe("components.css theme-sensitive surfaces", () => {
34293448
expect(searchFilter).toContain("border-left: 1px solid");
34303449
expect(searchFilter).toContain("min-width: 21px");
34313450
expect(searchFilter).toContain("font-size: 10px");
3451+
expect(searchFilter).toContain("font-weight: var(--font-normal)");
34323452
expect(searchFilterActive).toContain(
34333453
"background: color-mix(in srgb, var(--status-info-fg) 1%, transparent)"
34343454
);
@@ -3443,6 +3463,7 @@ describe("components.css theme-sensitive surfaces", () => {
34433463
expect(searchDetailHeading).toContain("min-height: 20px");
34443464
expect(searchDetailHeading).toContain("padding-inline-end: 0");
34453465
expect(searchDetailLabel).toContain("font-size: 10px");
3466+
expect(searchDetailLabel).toContain("font-weight: var(--font-normal)");
34463467
expect(searchResults).toContain("padding: 0");
34473468
expect(openEditorsItem).toContain("display: flex");
34483469
expect(openEditorsItem).toContain("overflow: hidden");
@@ -3481,7 +3502,7 @@ describe("components.css theme-sensitive surfaces", () => {
34813502
"box-shadow: inset 0 0 0 var(--state-focus-ring-width)"
34823503
);
34833504
expect(searchLine).toContain("text-align: left");
3484-
expect(searchLine).toContain("font-weight: var(--font-bold)");
3505+
expect(searchLine).toContain("font-weight: var(--type-body-3-weight)");
34853506

34863507
expect(quickJumpSearch).toContain("border-radius: var(--radius-md)");
34873508
expect(quickOpen).toContain("border: 1px solid var(--surface-overlay-border)");
@@ -3748,10 +3769,10 @@ describe("components.css theme-sensitive surfaces", () => {
37483769
const key = getLastRuleBlock(".mobile-terminal-input-bar__key");
37493770
const ctrlKey = getLastRuleBlock(".mobile-terminal-input-bar__ctrl");
37503771
const shiftKey = getLastRuleBlock(".mobile-terminal-input-bar__shift");
3751-
const escapeKey = getLastRuleBlock('.mobile-terminal-input-bar__key[aria-label="Escape"]');
3752-
const tabKey = getLastRuleBlock('.mobile-terminal-input-bar__key[aria-label="Tab"]');
3753-
const enterKey = getLastRuleBlock('.mobile-terminal-input-bar__key[aria-label="Enter"]');
3754-
const upArrowKey = getLastRuleBlock('.mobile-terminal-input-bar__key[aria-label="Up arrow"]');
3772+
const escapeKey = getLastRuleBlock('.mobile-terminal-input-bar__key[data-key-id="escape"]');
3773+
const tabKey = getLastRuleBlock('.mobile-terminal-input-bar__key[data-key-id="tab"]');
3774+
const enterKey = getLastRuleBlock('.mobile-terminal-input-bar__key[data-key-id="enter"]');
3775+
const upArrowKey = getLastRuleBlock('.mobile-terminal-input-bar__key[data-key-id="arrow_up"]');
37553776
const ctrlLocked = getLastRuleBlock(
37563777
'.mobile-terminal-input-bar__ctrl[data-ctrl-mode="locked"]'
37573778
);

0 commit comments

Comments
 (0)