Skip to content

Commit c20ebdf

Browse files
author
Factory Bot
committed
refactor: update UI components to use Figma tokens directly
- Card: use --figma-bg-primary, --figma-border-default, --figma-radius-* - Button: use --figma-accent-primary, --figma-font-sans, --figma-transition-fast - Badge: use --figma-accent-primary/text, --figma-radius-full - Input: use --figma-bg-primary, --figma-border-default, --figma-accent-primary focus - Modal: use --figma-bg-primary, --figma-border-default, --figma-radius-xl - Remove legacy variable mapping from figma-tokens.css
1 parent 60bba58 commit c20ebdf

File tree

5 files changed

+552
-492
lines changed

5 files changed

+552
-492
lines changed

‎cortex-gui/src/components/ui/Badge.tsx‎

Lines changed: 94 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,107 @@
1-
import { JSX, splitProps, ParentProps } from "solid-js";
2-
3-
export interface BadgeProps extends ParentProps {
4-
variant?: "default" | "primary" | "success" | "warning" | "error";
5-
size?: "sm" | "md";
6-
style?: JSX.CSSProperties;
7-
}
8-
9-
export function Badge(props: BadgeProps) {
10-
const [local, rest] = splitProps(props, ["variant", "size", "style", "children"]);
11-
12-
const variant = () => local.variant || "default";
13-
const size = () => local.size || "sm";
14-
15-
const sizeStyles: Record<string, JSX.CSSProperties> = {
16-
sm: { "font-size": "10px", padding: "1px 6px" },
17-
md: { "font-size": "11px", padding: "2px 8px" },
18-
};
19-
1+
/**
2+
* Badge - Figma Design System Badge Component
3+
*
4+
* Figma specs:
5+
* - Default accent: #B2FF22 bg, #000000 text
6+
* - Border radius: pill (9999px)
7+
* - Padding: 2px 6px (sm), 2px 8px (md)
8+
*/
9+
import { JSX, splitProps, ParentProps } from "solid-js";
10+
11+
export interface BadgeProps extends ParentProps {
12+
variant?: "default" | "accent" | "success" | "warning" | "error" | "muted";
13+
size?: "sm" | "md";
14+
style?: JSX.CSSProperties;
15+
}
16+
17+
export function Badge(props: BadgeProps) {
18+
const [local, rest] = splitProps(props, ["variant", "size", "style", "children"]);
19+
20+
const variant = () => local.variant || "default";
21+
const size = () => local.size || "sm";
22+
23+
const sizeStyles: Record<string, JSX.CSSProperties> = {
24+
sm: { "font-size": "10px", padding: "1px 6px" },
25+
md: { "font-size": "11px", padding: "2px 8px" },
26+
};
27+
2028
const variantStyles: Record<string, JSX.CSSProperties> = {
2129
default: {
22-
background: "var(--surface-hover)",
23-
color: "var(--text-primary)",
30+
background: "var(--figma-bg-hover)",
31+
color: "var(--figma-text-primary)",
2432
},
25-
primary: {
26-
background: "var(--surface-hover)",
27-
color: "var(--text-title)",
33+
accent: {
34+
background: "var(--figma-accent-primary)",
35+
color: "var(--figma-accent-text)",
2836
},
2937
success: {
30-
background: "color-mix(in srgb, var(--state-success) 20%, transparent)",
31-
color: "var(--state-success)",
38+
background: "var(--figma-success-bg)",
39+
color: "var(--figma-success)",
3240
},
3341
warning: {
34-
background: "color-mix(in srgb, var(--state-warning) 20%, transparent)",
35-
color: "var(--state-warning)",
42+
background: "var(--figma-warning-bg)",
43+
color: "var(--figma-warning)",
3644
},
3745
error: {
38-
background: "color-mix(in srgb, var(--state-error) 20%, transparent)",
39-
color: "var(--state-error)",
46+
background: "var(--figma-error-bg)",
47+
color: "var(--figma-error)",
48+
},
49+
muted: {
50+
background: "var(--figma-bg-primary)",
51+
color: "var(--figma-text-inactive)",
4052
},
4153
};
42-
43-
const baseStyle: JSX.CSSProperties = {
44-
display: "inline-flex",
45-
"align-items": "center",
46-
"justify-content": "center",
47-
"border-radius": "var(--jb-radius-sm)",
48-
"font-weight": "500",
49-
"white-space": "nowrap",
50-
"flex-shrink": "0",
51-
};
52-
53-
const computedStyle = (): JSX.CSSProperties => ({
54-
...baseStyle,
55-
...sizeStyles[size()],
56-
...variantStyles[variant()],
57-
...local.style,
58-
});
59-
60-
return <span style={computedStyle()}>{local.children}</span>;
61-
}
62-
63-
export interface StatusDotProps {
64-
status: "idle" | "active" | "success" | "warning" | "error";
65-
size?: "sm" | "md";
66-
style?: JSX.CSSProperties;
67-
}
68-
69-
export function StatusDot(props: StatusDotProps) {
70-
const size = () => props.size || "sm";
71-
72-
const sizeMap: Record<string, string> = {
73-
sm: "6px",
74-
md: "8px",
75-
};
76-
54+
55+
const baseStyle: JSX.CSSProperties = {
56+
display: "inline-flex",
57+
"align-items": "center",
58+
"justify-content": "center",
59+
"border-radius": "var(--figma-radius-full)",
60+
"font-weight": "500",
61+
"white-space": "nowrap",
62+
"flex-shrink": "0",
63+
};
64+
65+
const computedStyle = (): JSX.CSSProperties => ({
66+
...baseStyle,
67+
...sizeStyles[size()],
68+
...variantStyles[variant()],
69+
...local.style,
70+
});
71+
72+
return <span style={computedStyle()}>{local.children}</span>;
73+
}
74+
75+
export interface StatusDotProps {
76+
status: "idle" | "active" | "success" | "warning" | "error";
77+
size?: "sm" | "md";
78+
style?: JSX.CSSProperties;
79+
}
80+
81+
export function StatusDot(props: StatusDotProps) {
82+
const size = () => props.size || "sm";
83+
84+
const sizeMap: Record<string, string> = {
85+
sm: "6px",
86+
md: "8px",
87+
};
88+
7789
const colorMap: Record<string, string> = {
78-
idle: "var(--surface-active)",
79-
active: "var(--accent-primary)",
80-
success: "var(--state-success)",
81-
warning: "var(--state-warning)",
82-
error: "var(--state-error)",
90+
idle: "var(--figma-bg-active)",
91+
active: "var(--figma-accent-primary)",
92+
success: "var(--figma-success)",
93+
warning: "var(--figma-warning)",
94+
error: "var(--figma-error)",
95+
};
96+
97+
const style: JSX.CSSProperties = {
98+
width: sizeMap[size()],
99+
height: sizeMap[size()],
100+
"border-radius": "50%",
101+
background: colorMap[props.status],
102+
"flex-shrink": "0",
103+
...props.style,
83104
};
84-
85-
const style: JSX.CSSProperties = {
86-
width: sizeMap[size()],
87-
height: sizeMap[size()],
88-
"border-radius": "50%",
89-
background: colorMap[props.status],
90-
"flex-shrink": "0",
91-
...props.style,
92-
};
93-
94-
return <span style={style} />;
95-
}
105+
106+
return <span style={style} />;
107+
}

0 commit comments

Comments
 (0)