Skip to content

Commit 731eb58

Browse files
echobtechobt
committed
fix(ui): pixel-perfect sidebar primitives to match Figma specs
- CortexTreeItem: selected bg rgba(255,255,255,0.05), border-radius 2px, text color #E9E9EA (non-selected) / #FCFCFC (selected), font-size 16px, font-family Figtree fallback - CortexVibeToggle: font-weight 500 → 400 (Figma 14px regular) - CortexOpenProjectDropdown: font-weight 500 → 400, open state text/chevron color var(--cortex-open-project-open-text, #1C1C1D) - CortexConfigBadge: conditional label rendering with Show, font-weight 400, font-family Figtree fallback, remove unused displayLabel/labelStyle - CortexStartPause: pause rect rx 0.5 → 1 (Figma borderRadius 1px) - cortex-tokens.css: --cortex-open-project-open-text #000000 → #1C1C1D - Update CortexTreeItem test assertion for new selected bg value
1 parent efaf31e commit 731eb58

7 files changed

Lines changed: 28 additions & 25 deletions

File tree

‎src/components/cortex/primitives/CortexConfigBadge.tsx‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ export const CortexConfigBadge: Component<CortexConfigBadgeProps> = (props) => {
3131

3232
const [hovered, setHovered] = createSignal(false);
3333

34-
const displayLabel = () => local.label ?? "config";
3534
const effectiveVariant = () => local.variant ?? "default";
3635

3736
const getBackground = (): string => {
@@ -62,16 +61,6 @@ export const CortexConfigBadge: Component<CortexConfigBadgeProps> = (props) => {
6261
...local.style,
6362
});
6463

65-
const labelStyle = (): JSX.CSSProperties => ({
66-
"font-family": "var(--cortex-font-sans)",
67-
"font-size": "16px",
68-
"font-weight": "500",
69-
"line-height": "1em",
70-
color: "var(--cortex-text-primary)",
71-
"white-space": "nowrap",
72-
"user-select": "none",
73-
});
74-
7564
const handleMouseEnter = () => {
7665
setHovered(true);
7766
};
@@ -96,7 +85,20 @@ export const CortexConfigBadge: Component<CortexConfigBadgeProps> = (props) => {
9685
{...others}
9786
>
9887
<CortexIcon name="gear" size={16} />
99-
<span style={labelStyle()}>{displayLabel()}</span>
88+
<Show when={local.label}>
89+
<span
90+
style={{
91+
"font-family": "var(--cortex-font-sans, 'Figtree', sans-serif)",
92+
"font-size": "16px",
93+
"font-weight": "400",
94+
"line-height": "1em",
95+
color: "var(--cortex-text-primary, #FCFCFC)",
96+
"white-space": "nowrap",
97+
}}
98+
>
99+
{local.label}
100+
</span>
101+
</Show>
100102
<CortexIcon
101103
name={local.isOpen ? "chevron-up" : "chevron-down"}
102104
size={20}

‎src/components/cortex/primitives/CortexOpenProjectDropdown.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ export const CortexOpenProjectDropdown: Component<CortexOpenProjectDropdownProps
4747
const labelStyle = (): JSX.CSSProperties => ({
4848
"font-family": "var(--cortex-font-sans)",
4949
"font-size": "16px",
50-
"font-weight": "500",
50+
"font-weight": "400",
5151
"line-height": "1em",
52-
color: local.isOpen ? "var(--cortex-accent-text)" : "var(--cortex-text-secondary)",
52+
color: local.isOpen ? "var(--cortex-open-project-open-text, #1C1C1D)" : "var(--cortex-text-secondary)",
5353
"white-space": "nowrap",
5454
"user-select": "none",
5555
});
@@ -81,7 +81,7 @@ export const CortexOpenProjectDropdown: Component<CortexOpenProjectDropdownProps
8181
<CortexIcon
8282
name={local.isOpen ? "chevron-up" : "chevron-down"}
8383
size={16}
84-
color={local.isOpen ? "var(--cortex-accent-text)" : "var(--cortex-text-primary)"}
84+
color={local.isOpen ? "var(--cortex-open-project-open-text, #1C1C1D)" : "var(--cortex-text-primary)"}
8585
/>
8686
</button>
8787
<Show when={local.isOpen && local.children}>

‎src/components/cortex/primitives/CortexStartPause.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ export const CortexStartPause: Component<CortexStartPauseProps> = (props) => {
8989
fill="none"
9090
xmlns="http://www.w3.org/2000/svg"
9191
>
92-
<rect x="3" y="1" width="3" height="14" rx="0.5" fill="var(--cortex-pause-color)" />
93-
<rect x="10" y="1" width="3" height="14" rx="0.5" fill="var(--cortex-pause-color)" />
92+
<rect x="3" y="1" width="3" height="14" rx="1" fill="var(--cortex-pause-color)" />
93+
<rect x="10" y="1" width="3" height="14" rx="1" fill="var(--cortex-pause-color)" />
9494
</svg>
9595
</Show>
9696
</button>

‎src/components/cortex/primitives/CortexTreeItem.tsx‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,11 @@ export const CortexTreeItem: Component<CortexTreeItemProps> = (props) => {
9999
gap: "4px",
100100
cursor: "pointer",
101101
background: local.isSelected
102-
? "var(--cortex-accent-muted, rgba(191,255,0,0.1))"
102+
? "rgba(255, 255, 255, 0.05)"
103103
: isHovered()
104104
? "var(--cortex-bg-hover, rgba(255,255,255,0.05))"
105105
: "transparent",
106+
"border-radius": local.isSelected ? "2px" : "0",
106107
transition: "background var(--cortex-transition-fast, 100ms ease)",
107108
...local.style,
108109
});
@@ -131,11 +132,11 @@ export const CortexTreeItem: Component<CortexTreeItemProps> = (props) => {
131132

132133
const textStyle = (): JSX.CSSProperties => ({
133134
flex: "1",
134-
"font-family": "var(--cortex-font-sans)",
135-
"font-size": "14px",
135+
"font-family": "var(--cortex-font-sans, 'Figtree', sans-serif)",
136+
"font-size": "16px",
136137
color: local.isSelected
137-
? "var(--cortex-text-primary, var(--cortex-text-primary))"
138-
: "var(--cortex-text-secondary, var(--cortex-text-secondary))",
138+
? "var(--cortex-text-primary, #FCFCFC)"
139+
: "#E9E9EA",
139140
"white-space": "nowrap",
140141
overflow: "hidden",
141142
"text-overflow": "ellipsis",

‎src/components/cortex/primitives/CortexVibeToggle.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export const CortexVibeToggle: Component<CortexVibeToggleProps> = (props) => {
6464
padding: "0",
6565
"font-family": "var(--cortex-font-sans)",
6666
"font-size": "14px",
67-
"font-weight": "500",
67+
"font-weight": "400",
6868
"line-height": "1em",
6969
color: isActive ? "var(--cortex-text-on-surface)" : "var(--cortex-text-secondary)",
7070
transition: "all 200ms ease",

‎src/components/cortex/primitives/__tests__/CortexTreeItem.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ describe("CortexTreeItem", () => {
191191
<CortexTreeItem item={item} isSelected />
192192
));
193193
const row = container.firstChild as HTMLElement;
194-
expect(row.style.background).toContain("cortex-accent-muted");
194+
expect(row.style.background).toContain("rgba(255, 255, 255, 0.05)");
195195
});
196196

197197
it("applies transparent background when not selected", () => {

‎src/styles/cortex-tokens.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -626,7 +626,7 @@
626626
/* ===========================================================================
627627
FIGMA COMPONENT STATE COLORS
628628
=========================================================================== */
629-
--cortex-open-project-open-text: #000000; /* Text on open project bg */
629+
--cortex-open-project-open-text: #1C1C1D; /* Text on open project bg */
630630
--cortex-config-selected-bg: #252628; /* Config selected state */
631631
--cortex-config-variant-bg: #1C1C1D; /* Config variant bg */
632632

0 commit comments

Comments
 (0)