Skip to content

Commit 6408bfe

Browse files
echobtechobt
committed
feat(design-system): pixel-perfect Figma match for CortexHeaderItem, CortexDropdown, and dropdown primitives
Update dropdown-related components to exactly match Figma node 0-141 Components section. CortexHeaderItem (20:2695): - Default: text #8C8D8F, transparent bg, no border-radius - Hover/Active: text #FCFCFC, bg #1C1C1D, border-radius 8px - Font: Figtree 16px/500, line-height 1em, padding 8px 10px, gap 10px CortexDropdown container: - bg #1C1C1D, border 1px solid #2E2F31, padding 4px, elevation-3 shadow - Items: Figtree 12px/400, text #FCFCFC, hover bg #252628 with 4px radius TitleBarDropdownMenu (20:2841): - Container: bg #1C1C1D, border #2E2F31, radius 8px, min-width 243px - Items: Figtree 12px/400, color #FCFCFC, hover bg #252628 - Shortcuts: Figtree 12px/400, color #8C8D8F - Separators: padding 4px 0, 1px line #2E2F31 CortexDropdownMenu: padding 4px, added elevation-3 box-shadow CortexDropdownItem: non-recent-file font-size 12px, weight 400 cortex-tokens.css: --cortex-dropdown-bg #1C1C1D, --cortex-dropdown-border #2E2F31
1 parent dee23a9 commit 6408bfe

File tree

6 files changed

+84
-49
lines changed

6 files changed

+84
-49
lines changed

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -267,12 +267,10 @@ export const CortexDropdown: Component<CortexDropdownProps> = (props) => {
267267
bottom: pos.showAbove ? `${window.innerHeight - pos.y + 4}px` : undefined,
268268
width: `${pos.width}px`,
269269
"min-width": "160px",
270-
"max-height": `${maxHeight()}px`,
271-
background: "var(--cortex-dropdown-bg, #252628)",
272-
border: "1px solid var(--cortex-dropdown-border, #3C3D40)",
273-
"border-radius": "8px",
274-
padding: "4px 0px",
275-
"box-shadow": "var(--cortex-shadow-lg, 0 8px 24px rgba(0,0,0,0.4))",
270+
background: "#1C1C1D",
271+
border: "1px solid #2E2F31",
272+
padding: "4px",
273+
"box-shadow": "0 8px 16px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.4)",
276274
"z-index": "var(--cortex-z-dropdown, 600)",
277275
overflow: "hidden",
278276
};
@@ -289,15 +287,18 @@ export const CortexDropdown: Component<CortexDropdownProps> = (props) => {
289287
index === highlightedIndex()
290288
? "#252628"
291289
: opt.value === local.value
292-
? "var(--cortex-interactive-selected, rgba(255,255,255,0.08))"
290+
? "rgba(255,255,255,0.08)"
293291
: "transparent",
294292
"border-radius": index === highlightedIndex() ? "4px" : "0",
295293
color:
296294
opt.value === local.value
297295
? "var(--cortex-accent-primary)"
298-
: "var(--cortex-text-primary)",
299-
"font-size": "14px",
300-
transition: "background var(--cortex-transition-fast, 100ms ease)",
296+
: "#FCFCFC",
297+
"font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
298+
"font-size": "12px",
299+
"font-weight": "400",
300+
"line-height": "1.167em",
301+
transition: "background 100ms ease",
301302
});
302303

303304
return (
@@ -445,4 +446,4 @@ export const CortexDropdown: Component<CortexDropdownProps> = (props) => {
445446
);
446447
};
447448

448-
export default CortexDropdown;
449+
export default CortexDropdown;

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ export const CortexDropdownItem: Component<CortexDropdownItemProps> = (props) =>
7272

7373
const labelStyle = (): JSX.CSSProperties => ({
7474
"font-family": "'Figtree', var(--cortex-font-sans, Inter, sans-serif)",
75-
"font-size": local.isRecentFile ? "16px" : "14px",
76-
"font-weight": "500",
75+
"font-size": local.isRecentFile ? "16px" : "12px",
76+
"font-weight": local.isRecentFile ? "500" : "400",
7777
"line-height": "1em",
7878
color: "var(--cortex-text-primary, #FCFCFC)",
7979
"white-space": "nowrap",
@@ -83,8 +83,8 @@ export const CortexDropdownItem: Component<CortexDropdownItemProps> = (props) =>
8383

8484
const shortcutStyle = (): JSX.CSSProperties => ({
8585
"font-family": "'Figtree', var(--cortex-font-sans, Inter, sans-serif)",
86-
"font-size": "14px",
87-
"font-weight": "500",
86+
"font-size": "12px",
87+
"font-weight": "400",
8888
"line-height": "1em",
8989
color: "#8C8D8F",
9090
"white-space": "nowrap",
@@ -124,4 +124,4 @@ export const CortexDropdownItem: Component<CortexDropdownItemProps> = (props) =>
124124
);
125125
};
126126

127-
export default CortexDropdownItem;
127+
export default CortexDropdownItem;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ export const CortexDropdownMenu: Component<CortexDropdownMenuProps> = (props) =>
2727
"flex-direction": "column",
2828
position: "absolute",
2929
width: `${menuWidth()}px`,
30-
padding: "4px 0",
30+
padding: "4px",
31+
"box-shadow": "0 8px 16px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.4)",
3132
background: "var(--cortex-dropdown-bg)",
3233
border: "1px solid var(--cortex-dropdown-border)",
3334
"border-radius": "8px",

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
/**
22
* CortexHeaderItem - Pixel-perfect header menu item for Cortex UI Design System
3-
* Figma "Header item": menu bar items with hover/active states
3+
* Figma "Header item" (20:2695): menu bar items with Default, Hover, Dropdown open states
4+
*
5+
* Figma specs:
6+
* Layout: row, justify center, align center, gap 10px, padding 8px 10px
7+
* Font: Figtree 16px weight 500, line-height 1em
8+
* Default: text #8C8D8F, bg transparent, no border-radius
9+
* Hover/Active: text #FCFCFC, bg #1C1C1D, border-radius 8px
410
*/
511

612
import { Component, JSX, splitProps, createSignal } from "solid-js";
@@ -35,15 +41,15 @@ export const CortexHeaderItem: Component<CortexHeaderItemProps> = (props) => {
3541
padding: "8px 10px",
3642
gap: "10px",
3743
border: "none",
38-
background: isHighlighted() ? "var(--cortex-bg-secondary)" : "transparent",
39-
"border-radius": isHighlighted() ? "var(--cortex-radius-md)" : "0",
44+
background: isHighlighted() ? "#1C1C1D" : "transparent",
45+
"border-radius": isHighlighted() ? "8px" : "0",
4046
color: isHighlighted() ? "#FCFCFC" : "#8C8D8F",
41-
"font-family": "var(--cortex-font-sans)",
47+
"font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
4248
"font-size": "16px",
4349
"font-weight": "500",
4450
"line-height": "1em",
4551
cursor: "pointer",
46-
transition: "all var(--cortex-transition-normal, 150ms ease)",
52+
transition: "all 150ms ease",
4753
"white-space": "nowrap",
4854
"user-select": "none",
4955
...local.style,
@@ -77,4 +83,4 @@ export const CortexHeaderItem: Component<CortexHeaderItemProps> = (props) => {
7783
);
7884
};
7985

80-
export default CortexHeaderItem;
86+
export default CortexHeaderItem;

‎src/components/cortex/titlebar/TitleBarDropdownMenu.tsx‎

Lines changed: 51 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,20 @@
1+
/**
2+
* TitleBarDropdownMenu - Pixel-perfect dropdown menu for Cortex title bar
3+
* Figma "Dropdown Menu" (20:2841):
4+
* Container: bg #1C1C1D, border 1px solid #2E2F31, border-radius 8px, padding 4px
5+
* Width: 243px (min), column layout
6+
* Shadow: elevation-3
7+
*
8+
* Figma "Dropdown Item" (20:2748 / 20:2832):
9+
* Layout: row, space-between, center, gap 8px, padding 4px 8px
10+
* Left frame: row, center, gap 8px (icon 14×14 + label)
11+
* Label: Figtree 12px weight 400, color #FCFCFC
12+
* Shortcut: Figtree 12px weight 400, color #8C8D8F
13+
* Hover: bg #252628, border-radius 4px (fill_KPHMD8 = #2E2F31 per Figma hover variant)
14+
*
15+
* Divider (20:2794): padding 4px 0px, inner line 1px height, fill width
16+
*/
17+
118
import { Component, JSX, For, Show, createSignal } from "solid-js";
219
import type { MenuItem } from "./defaultMenus";
320

@@ -17,26 +34,31 @@ export const TitleBarDropdownMenu: Component<TitleBarDropdownMenuProps> = (props
1734
position: "absolute",
1835
top: "100%",
1936
left: "0",
20-
"min-width": "220px",
37+
"min-width": "243px",
2138
"max-width": "280px",
22-
background: "var(--cortex-bg-secondary)",
23-
"border-radius": "var(--cortex-radius-md)",
24-
border: "1px solid var(--cortex-border-default)",
25-
padding: "var(--cortex-space-1) 0",
26-
"box-shadow": "var(--cortex-elevation-3)",
27-
"z-index": "var(--cortex-z-max)",
28-
"margin-top": "var(--cortex-space-1)",
39+
background: "#1C1C1D",
40+
"border-radius": "8px",
41+
border: "1px solid #2E2F31",
42+
padding: "4px",
43+
"box-shadow": "0 8px 16px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.4)",
44+
"z-index": "9999",
45+
"margin-top": "0",
2946
}}>
3047
<For each={props.items}>
3148
{(item) => (
3249
<Show
3350
when={!item.separator}
3451
fallback={
3552
<div style={{
36-
height: "1px",
37-
background: "var(--cortex-border-default)",
38-
margin: "var(--cortex-space-1) 0",
39-
}} />
53+
padding: "4px 0px",
54+
width: "100%",
55+
}}>
56+
<div style={{
57+
height: "1px",
58+
width: "100%",
59+
background: "#2E2F31",
60+
}} />
61+
</div>
4062
}
4163
>
4264
<DropdownMenuItem item={item} onClick={() => props.onItemClick(item)} />
@@ -51,21 +73,22 @@ const DropdownMenuItem: Component<{ item: MenuItem; onClick: () => void }> = (pr
5173
const [hovered, setHovered] = createSignal(false);
5274

5375
const style = (): JSX.CSSProperties => ({
54-
width: "calc(100% - var(--cortex-space-2))",
76+
width: "100%",
5577
display: "flex",
5678
"align-items": "center",
5779
"justify-content": "space-between",
58-
padding: "var(--cortex-space-1) var(--cortex-space-2)",
59-
background: hovered() ? "var(--cortex-bg-hover)" : "transparent",
80+
gap: "8px",
81+
padding: "4px 8px",
82+
background: hovered() ? "#252628" : "transparent",
6083
border: "none",
6184
cursor: "pointer",
62-
"font-size": "var(--cortex-text-sm)",
63-
"font-family": "var(--cortex-font-sans)",
64-
"font-weight": "var(--cortex-font-medium)",
65-
color: "var(--cortex-text-primary)",
85+
"font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
86+
"font-size": "12px",
87+
"font-weight": "400",
88+
"line-height": "1.167em",
89+
color: "#FCFCFC",
6690
"text-align": "left",
67-
"border-radius": "var(--cortex-radius-xs)",
68-
margin: "0 var(--cortex-space-1)",
91+
"border-radius": hovered() ? "4px" : "0",
6992
"box-sizing": "border-box",
7093
});
7194

@@ -79,9 +102,13 @@ const DropdownMenuItem: Component<{ item: MenuItem; onClick: () => void }> = (pr
79102
<span>{props.item.label}</span>
80103
<Show when={props.item.shortcut}>
81104
<span style={{
82-
color: "var(--cortex-text-secondary)",
83-
"font-size": "var(--cortex-text-xs)",
84-
"margin-left": "var(--cortex-space-6)",
105+
color: "#8C8D8F",
106+
"font-family": "'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
107+
"font-size": "12px",
108+
"font-weight": "400",
109+
"line-height": "1.167em",
110+
"white-space": "nowrap",
111+
"flex-shrink": "0",
85112
}}>
86113
{props.item.shortcut}
87114
</span>

‎src/styles/cortex-tokens.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -454,8 +454,8 @@
454454
/* ===========================================================================
455455
COMPONENT TOKENS: DROPDOWN
456456
=========================================================================== */
457-
--cortex-dropdown-bg: #252628;
458-
--cortex-dropdown-border: #3C3D40;
457+
--cortex-dropdown-bg: #1C1C1D;
458+
--cortex-dropdown-border: #2E2F31;
459459
--cortex-dropdown-radius: var(--cortex-radius-md);
460460
--cortex-dropdown-shadow: var(--cortex-elevation-3);
461461
--cortex-dropdown-item-hover: var(--cortex-bg-hover);

0 commit comments

Comments
 (0)