Skip to content

Commit b8228ce

Browse files
author
Factory Bot
committed
refactor: migrate 17 components to Figma Design System tokens
- Phase 1: Figma components (FigmaChatPanel, FigmaConversationView, etc.) - Phase 2: UI components (ContextMenu, Radio, Toggle) - Phase 3: Main components (SettingsDialog, FormComponents, TasksPanel, etc.) Replace all hardcoded hex colors with --figma-* CSS variables
1 parent c20ebdf commit b8228ce

17 files changed

+156
-149
lines changed

‎cortex-gui/src/components/SettingsDialog.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,7 @@ function SettingSourceBadge(props: { source: SettingSource; hasOverride?: boolea
262262
if (props.source === "workspace") {
263263
return {
264264
background: "rgba(168, 85, 247, 0.2)",
265-
color: "#a855f7",
265+
color: "var(--figma-info)",
266266
border: "1px solid rgba(168, 85, 247, 0.3)",
267267
};
268268
}
@@ -841,8 +841,8 @@ export function SettingsDialog(props: SettingsDialogProps) {
841841
"border-bottom": "1px solid rgba(168, 85, 247, 0.2)",
842842
}}>
843843
<div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
844-
<Icon name="folder" style={{ width: "12px", height: "12px", color: "#a855f7" }} />
845-
<Text size="xs" style={{ color: "#a855f7" }}>
844+
<Icon name="folder" style={{ width: "12px", height: "12px", color: "var(--figma-info)" }} />
845+
<Text size="xs" style={{ color: "var(--figma-info)" }}>
846846
Editing workspace settings for <strong>{workspaceName()}</strong>
847847
</Text>
848848
<Text size="xs" style={{ color: "rgba(168, 85, 247, 0.6)" }}>
@@ -1007,7 +1007,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
10071007
width: "8px",
10081008
height: "8px",
10091009
"border-radius": "50%",
1010-
background: "#a855f7",
1010+
background: "var(--figma-info)",
10111011
}} />
10121012
</Show>
10131013
</div>
@@ -1024,7 +1024,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
10241024
variant="ghost"
10251025
size="sm"
10261026
icon={<Icon name="rotate-left" style={{ width: "12px", height: "12px" }} />}
1027-
style={{ color: "#a855f7" }}
1027+
style={{ color: "var(--figma-info)" }}
10281028
>
10291029
Reset to user theme
10301030
</UIButton>
@@ -1058,7 +1058,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
10581058
width: "8px",
10591059
height: "8px",
10601060
"border-radius": "50%",
1061-
background: "#a855f7",
1061+
background: "var(--figma-info)",
10621062
}} />
10631063
</Show>
10641064
</div>
@@ -1071,7 +1071,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
10711071
variant="ghost"
10721072
size="sm"
10731073
icon={<Icon name="rotate-left" style={{ width: "12px", height: "12px" }} />}
1074-
style={{ color: "#a855f7" }}
1074+
style={{ color: "var(--figma-info)" }}
10751075
>
10761076
Reset to user setting
10771077
</UIButton>
@@ -1090,7 +1090,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
10901090
</div>
10911091
<Show when={hasWorkspace()}>
10921092
<div style={{ display: "flex", "align-items": "center", gap: "8px" }}>
1093-
<Text size="xs" style={{ width: "64px", color: "#a855f7" }}>Workspace:</Text>
1093+
<Text size="xs" style={{ width: "64px", color: "var(--figma-info)" }}>Workspace:</Text>
10941094
<Text size="xs" style={{ color: "var(--jb-text-muted-color)", opacity: "0.8", "font-family": "monospace" }}>.cortex/settings.json</Text>
10951095
</div>
10961096
</Show>
@@ -1148,7 +1148,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
11481148
variant="ghost"
11491149
size="sm"
11501150
icon={<Icon name="rotate-left" style={{ width: "12px", height: "12px" }} />}
1151-
style={{ color: "#a855f7", "margin-top": "8px" }}
1151+
style={{ color: "var(--figma-info)", "margin-top": "8px" }}
11521152
>
11531153
Reset to user setting
11541154
</UIButton>
@@ -1179,7 +1179,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
11791179
variant="ghost"
11801180
size="sm"
11811181
icon={<Icon name="rotate-left" style={{ width: "12px", height: "12px" }} />}
1182-
style={{ color: "#a855f7" }}
1182+
style={{ color: "var(--figma-info)" }}
11831183
>
11841184
Reset to user setting
11851185
</UIButton>
@@ -1343,7 +1343,7 @@ export function SettingsDialog(props: SettingsDialogProps) {
13431343
width: "8px",
13441344
height: "8px",
13451345
"border-radius": "50%",
1346-
background: "#a855f7",
1346+
background: "var(--figma-info)",
13471347
}} />
13481348
</Show>
13491349
</div>
@@ -1848,3 +1848,4 @@ export function SettingsDialog(props: SettingsDialogProps) {
18481848

18491849
// Re-export helper components for use in sub-panels
18501850
export { SettingSourceBadge, WorkspaceOverrideIndicator, SettingRow };
1851+

‎cortex-gui/src/components/debugger/BreakpointsView.tsx‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,10 +42,10 @@ function BreakpointIcon(props: {
4242
// Enabled colors by type
4343
switch (props.type) {
4444
case "standard": return "var(--debug-icon-breakpoint-foreground)";
45-
case "conditional": return "#f59e0b"; // Orange
45+
case "conditional": return "var(--figma-warning)"; // Orange
4646
case "function": return "var(--debug-icon-breakpoint-foreground)";
47-
case "data": return "#a855f7"; // Purple
48-
case "log": return "#60a5fa"; // Blue
47+
case "data": return "var(--figma-info)"; // Purple
48+
case "log": return "var(--figma-info)"; // Blue
4949
}
5050
};
5151

@@ -412,11 +412,11 @@ export function BreakpointsView() {
412412
const getAccessTypeColor = (accessType: DataBreakpointAccessType): string => {
413413
switch (accessType) {
414414
case "read":
415-
return "#22c55e"; // green
415+
return "var(--figma-success)"; // green
416416
case "write":
417-
return "#ef4444"; // red
417+
return "var(--figma-error)"; // red
418418
case "readWrite":
419-
return "#a855f7"; // purple
419+
return "var(--figma-info)"; // purple
420420
}
421421
};
422422

@@ -691,7 +691,7 @@ export function BreakpointsView() {
691691
style={{
692692
width: "14px",
693693
height: "14px",
694-
color: bp.enabled ? "#10b981" : "#6b7280",
694+
color: bp.enabled ? "var(--figma-success)" : "var(--figma-text-inactive)",
695695
}}
696696
title={bp.enabled ? "Triggered breakpoint (active)" : "Triggered breakpoint (waiting for trigger)"}
697697
>
@@ -711,8 +711,8 @@ export function BreakpointsView() {
711711
"margin-left": "0.5em",
712712
padding: "0 4px",
713713
"border-radius": "3px",
714-
background: "#ef444420",
715-
color: "#ef4444",
714+
background: "var(--figma-error)20",
715+
color: "var(--figma-error)",
716716
"font-size": "10px",
717717
}}
718718
title={`Inline breakpoint at column ${bp.column}`}
@@ -727,7 +727,7 @@ export function BreakpointsView() {
727727
style={{
728728
opacity: "0.7",
729729
"margin-left": "0.9em",
730-
color: "#f59e0b",
730+
color: "var(--figma-warning)",
731731
}}
732732
>
733733
when: {bp.condition}
@@ -739,7 +739,7 @@ export function BreakpointsView() {
739739
style={{
740740
opacity: "0.7",
741741
"margin-left": "0.9em",
742-
color: "#60a5fa",
742+
color: "var(--figma-info)",
743743
}}
744744
title={bp.logMessage}
745745
>
@@ -762,7 +762,7 @@ export function BreakpointsView() {
762762
style={{
763763
opacity: "0.7",
764764
"margin-left": "0.9em",
765-
color: "#f59e0b",
765+
color: "var(--figma-warning)",
766766
}}
767767
>
768768
{bp.message}
@@ -775,8 +775,8 @@ export function BreakpointsView() {
775775
"margin-left": "0.5em",
776776
padding: "0 4px",
777777
"border-radius": "3px",
778-
background: "#22c55e20",
779-
color: "#22c55e",
778+
background: "var(--figma-success)20",
779+
color: "var(--figma-success)",
780780
"font-size": "10px",
781781
}}
782782
title={`Break when hit count ${bp.hitCondition}`}
@@ -795,8 +795,8 @@ export function BreakpointsView() {
795795
"margin-left": "0.5em",
796796
padding: "0 4px",
797797
"border-radius": "3px",
798-
background: bp.enabled ? "#10b98120" : "#6b728020",
799-
color: bp.enabled ? "#10b981" : "#6b7280",
798+
background: bp.enabled ? "var(--figma-success)20" : "var(--figma-text-inactive)20",
799+
color: bp.enabled ? "var(--figma-success)" : "var(--figma-text-inactive)",
800800
"font-size": "10px",
801801
display: "inline-flex",
802802
"align-items": "center",
@@ -880,7 +880,7 @@ export function BreakpointsView() {
880880
e.stopPropagation();
881881
handleEditHitCount(bp);
882882
}}
883-
style={{ opacity: "0", color: bp.hitCondition ? "#22c55e" : undefined }}
883+
style={{ opacity: "0", color: bp.hitCondition ? "var(--figma-success)" : undefined }}
884884
class="group-hover:opacity-100"
885885
tooltip="Edit hit count condition"
886886
>
@@ -900,7 +900,7 @@ export function BreakpointsView() {
900900
handleShowTriggeredByPicker(bp);
901901
}
902902
}}
903-
style={{ opacity: "0", color: bp.triggeredBy ? "#10b981" : undefined }}
903+
style={{ opacity: "0", color: bp.triggeredBy ? "var(--figma-success)" : undefined }}
904904
class="group-hover:opacity-100"
905905
tooltip={bp.triggeredBy ? "Clear triggered by (make independent)" : "Set triggered by (make dependent on another breakpoint)"}
906906
>
@@ -971,14 +971,14 @@ export function BreakpointsView() {
971971
if (e.key === "Escape") handleCancelLogMessageEdit();
972972
}}
973973
placeholder="Log message (e.g., Value is {x})"
974-
style={{ flex: "1", border: "1px solid #60a5fa" }}
974+
style={{ flex: "1", border: "1px solid var(--figma-info)" }}
975975
autofocus
976976
/>
977977
<Button
978978
variant="primary"
979979
size="sm"
980980
onClick={handleSaveLogMessage}
981-
style={{ background: "#60a5fa" }}
981+
style={{ background: "var(--figma-info)" }}
982982
>
983983
Save
984984
</Button>
@@ -1007,7 +1007,7 @@ export function BreakpointsView() {
10071007
style={{
10081008
background: "var(--surface-sunken)",
10091009
color: "var(--text-base)",
1010-
border: "1px solid #22c55e",
1010+
border: "1px solid var(--figma-success)",
10111011
}}
10121012
>
10131013
<option value="=">=</option>
@@ -1027,7 +1027,7 @@ export function BreakpointsView() {
10271027
placeholder="e.g., 5"
10281028
style={{
10291029
flex: "1",
1030-
border: "1px solid #22c55e",
1030+
border: "1px solid var(--figma-success)",
10311031
"max-width": "80px",
10321032
}}
10331033
autofocus
@@ -1036,7 +1036,7 @@ export function BreakpointsView() {
10361036
variant="primary"
10371037
size="sm"
10381038
onClick={handleSaveHitCount}
1039-
style={{ background: "#22c55e" }}
1039+
style={{ background: "var(--figma-success)" }}
10401040
>
10411041
Save
10421042
</Button>
@@ -1387,7 +1387,7 @@ export function BreakpointsView() {
13871387
<div class="flex-1 min-w-0 truncate" title={bp.name}>
13881388
<Text>{bp.name}</Text>
13891389
<Show when={bp.condition}>
1390-
<Text variant="muted" style={{ "margin-left": "0.5rem", opacity: "0.7", color: "#f59e0b" }}>
1390+
<Text variant="muted" style={{ "margin-left": "0.5rem", opacity: "0.7", color: "var(--figma-warning)" }}>
13911391
when: {bp.condition}
13921392
</Text>
13931393
</Show>
@@ -1511,7 +1511,7 @@ export function BreakpointsView() {
15111511
variant="primary"
15121512
size="sm"
15131513
onClick={handleAddDataBreakpoint}
1514-
style={{ background: "#a855f7" }}
1514+
style={{ background: "var(--figma-info)" }}
15151515
>
15161516
Add
15171517
</Button>
@@ -1580,7 +1580,7 @@ export function BreakpointsView() {
15801580
</Text>
15811581
</Show>
15821582
<Show when={bp.verified === false}>
1583-
<Text variant="muted" size="xs" style={{ "margin-left": "0.25rem", "font-style": "italic", color: "#f59e0b" }}>
1583+
<Text variant="muted" size="xs" style={{ "margin-left": "0.25rem", "font-style": "italic", color: "var(--figma-warning)" }}>
15841584
(unverified)
15851585
</Text>
15861586
</Show>
@@ -1658,7 +1658,7 @@ export function BreakpointsView() {
16581658
<IconButton
16591659
size="sm"
16601660
onClick={() => handleToggleExceptionBreakpoint(eb)}
1661-
style={{ color: eb.enabled ? "#f59e0b" : undefined }}
1661+
style={{ color: eb.enabled ? "var(--figma-warning)" : undefined }}
16621662
tooltip={eb.enabled ? "Disable exception breakpoint" : "Enable exception breakpoint"}
16631663
>
16641664
<Show
@@ -1672,7 +1672,7 @@ export function BreakpointsView() {
16721672
>
16731673
<div
16741674
class="w-3.5 h-3.5 rounded flex items-center justify-center"
1675-
style={{ background: "#f59e0b" }}
1675+
style={{ background: "var(--figma-warning)" }}
16761676
>
16771677
<Icon name="check" style={{ width: "10px", height: "10px", color: "white" }} />
16781678
</div>
@@ -1694,7 +1694,7 @@ export function BreakpointsView() {
16941694
<Show when={eb.condition}>
16951695
<div
16961696
class="text-xs truncate"
1697-
style={{ color: "#60a5fa" }}
1697+
style={{ color: "var(--figma-info)" }}
16981698
title={`Condition: ${eb.condition}`}
16991699
>
17001700
when: {eb.condition}
@@ -1737,14 +1737,14 @@ export function BreakpointsView() {
17371737
if (e.key === "Escape") handleCancelExceptionConditionEdit();
17381738
}}
17391739
placeholder="Enter condition"
1740-
style={{ flex: "1", border: "1px solid #60a5fa" }}
1740+
style={{ flex: "1", border: "1px solid var(--figma-info)" }}
17411741
autofocus
17421742
/>
17431743
<Button
17441744
variant="primary"
17451745
size="sm"
17461746
onClick={handleSaveExceptionCondition}
1747-
style={{ background: "#60a5fa" }}
1747+
style={{ background: "var(--figma-info)" }}
17481748
>
17491749
Save
17501750
</Button>
@@ -1834,7 +1834,7 @@ export function BreakpointsView() {
18341834
</Text>
18351835
<Text variant="muted" size="xs" as="div">
18361836
Line {bp.line}{bp.column !== undefined ? `:${bp.column}` : ""}
1837-
{bp.condition && <Text style={{ "margin-left": "0.25rem", color: "#f59e0b" }}>• conditional</Text>}
1837+
{bp.condition && <Text style={{ "margin-left": "0.25rem", color: "var(--figma-warning)" }}>• conditional</Text>}
18381838
</Text>
18391839
</div>
18401840
</Button>
@@ -1929,3 +1929,4 @@ export function BreakpointsView() {
19291929
</div>
19301930
);
19311931
}
1932+

0 commit comments

Comments
 (0)