Amico
@@ -285,14 +285,15 @@ function MeetAmicoCard(props: { onStart: (prompt: string) => void }) {
gap: "10px",
"margin-top": "4px",
padding: "12px 22px",
- border: "none",
+ border: "1px solid var(--v2-icon-icon-accent)",
+ "box-sizing": "border-box",
"border-radius": "10px",
cursor: "pointer",
- background: "var(--v2-icon-icon-accent)",
- color: "var(--v2-background-bg-base, #000)",
+ background: "var(--v2-background-bg-accent)",
+ color: "#000",
"font-size": "15px",
"font-weight": "650",
- "box-shadow": "0 2px 10px color-mix(in srgb, var(--v2-icon-icon-accent) 35%, transparent)",
+ "box-shadow": "0 2px 10px color-mix(in srgb, var(--v2-background-bg-accent) 30%, transparent)",
}}
>
Open chat
@@ -596,8 +597,10 @@ function AboutYouCard(props: {
height: "44px",
"border-radius": "8px",
flex: "none",
- background: "var(--v2-icon-icon-accent)",
- color: "var(--v2-background-bg-base, #000)",
+ background: "var(--v2-background-bg-accent)",
+ color: "#000",
+ border: "1px solid var(--v2-icon-icon-accent)",
+ "box-sizing": "border-box",
"font-size": "15px",
"font-weight": "700",
"letter-spacing": "0.5px",
@@ -837,9 +840,10 @@ function AboutYouCard(props: {
disabled={saving() || resolvingLogo() > 0}
onClick={() => void save()}
style={{
- background: "var(--v2-icon-icon-accent)",
- color: "var(--v2-background-bg-base, #000)",
- border: "none",
+ background: "var(--v2-background-bg-accent)",
+ color: "#000",
+ border: "1px solid var(--v2-icon-icon-accent)",
+ "box-sizing": "border-box",
"border-radius": "6px",
padding: "4px 10px",
"font-size": "12px",
diff --git a/packages/ui/src/amicode/run-card.test.ts b/packages/ui/src/amicode/run-card.test.ts
index ff5c973756..63a80afb3a 100644
--- a/packages/ui/src/amicode/run-card.test.ts
+++ b/packages/ui/src/amicode/run-card.test.ts
@@ -36,7 +36,7 @@ describe("renderRunCardSvg", () => {
expect(svg).toContain("harmoniqs.ai")
expect(svg).toContain("AMICODE")
// 2 drives → 2 pulse paths (second at companion opacity)
- expect(svg.match(/stroke="#F2C94C" stroke-width="2\.5"/g)?.length).toBe(2)
+ expect(svg.match(/stroke="#FFF676" stroke-width="2\.5"/g)?.length).toBe(2)
expect(svg).toContain('opacity="0.55"')
})
test("pulse panel reads first (left column), convergence second", () => {
diff --git a/packages/ui/src/amicode/run-card.tsx b/packages/ui/src/amicode/run-card.tsx
index 50d5a58fa5..86057952b8 100644
--- a/packages/ui/src/amicode/run-card.tsx
+++ b/packages/ui/src/amicode/run-card.tsx
@@ -66,7 +66,7 @@ const PANEL = "#111624"
const LINE = "#2A3245"
const TEXT = "#E9ECF4"
const MUTED = "#8B94A9"
-const GOLD = "#F2C94C"
+const GOLD = "#FFF676" // the brand lemon — card bg is fixed-dark, where the true accent sings
const CURVE = "#7FD1FF"
const W = 1200
diff --git a/packages/ui/src/amicode/widget-tokens.test.ts b/packages/ui/src/amicode/widget-tokens.test.ts
index 9e2954fa7d..295a239dca 100644
--- a/packages/ui/src/amicode/widget-tokens.test.ts
+++ b/packages/ui/src/amicode/widget-tokens.test.ts
@@ -30,9 +30,10 @@ describe("resolveTokens", () => {
const tokens = resolveTokens((name) => (name === "--v2-text-text-base" ? " #fff " : ""), "normal")
expect(tokens["--amc-text"]).toBe("#fff")
expect(tokens["--amc-bg"]).toBe("#0B0E15") // fallback
- expect(tokens["--amc-accent"]).toBe("#F2C94C")
+ expect(tokens["--amc-accent"]).toBe("#FFF676")
+ expect(tokens["--amc-accent-fill"]).toBe("#FFF676") // brand fill fallback
expect(tokens["--amc-font-mono"]).toContain("monospace")
- expect(Object.keys(tokens)).toHaveLength(15) // 11 colors + 2 fonts + 2 pads
+ expect(Object.keys(tokens)).toHaveLength(16) // 12 colors + 2 fonts + 2 pads
})
test("padding tokens follow density", () => {
expect(resolveTokens(() => "", "normal")["--amc-pad"]).toBe("14px 16px")
diff --git a/packages/ui/src/amicode/widget-tokens.ts b/packages/ui/src/amicode/widget-tokens.ts
index 6602651c13..a168f440d8 100644
--- a/packages/ui/src/amicode/widget-tokens.ts
+++ b/packages/ui/src/amicode/widget-tokens.ts
@@ -38,7 +38,11 @@ const SOURCES: [amc: string, v2: string, fallback: string][] = [
["--amc-text", "--v2-text-text-base", "#E9ECF4"],
["--amc-text-muted", "--v2-text-text-muted", "#8B94A9"],
["--amc-text-faint", "--v2-text-text-faint", "#6A7286"],
- ["--amc-accent", "--v2-icon-icon-accent", "#F2C94C"],
+ ["--amc-accent", "--v2-icon-icon-accent", "#FFF676"],
+ // The brand FILL — true lemon on every theme (yellow is a fill, never an
+ // ink). Widgets pair it with black text and a 1px var(--amc-accent) edge:
+ // a dark hairline on light themes, invisible lemon-on-lemon on dark.
+ ["--amc-accent-fill", "--v2-background-bg-accent", "#FFF676"],
["--amc-success", "--v2-state-fg-success", "#5BC873"],
["--amc-warning", "--v2-state-fg-warning", "#E5B454"],
["--amc-danger", "--v2-state-fg-danger", "#E56A6A"],
diff --git a/packages/ui/src/theme/themes/oc-2.json b/packages/ui/src/theme/themes/oc-2.json
index 2325a14272..bd248a7bb8 100644
--- a/packages/ui/src/theme/themes/oc-2.json
+++ b/packages/ui/src/theme/themes/oc-2.json
@@ -167,14 +167,14 @@
"v2-text-text-faint": "var(--v2-grey-600)",
"v2-text-text-inverse": "var(--v2-grey-100)",
"v2-text-text-contrast": "var(--v2-grey-100)",
- "v2-text-text-accent": "#857A00",
- "v2-text-text-accent-hover": "#6B6200",
+ "v2-text-text-accent": "var(--v2-grey-1000)",
+ "v2-text-text-accent-hover": "var(--v2-grey-900)",
"v2-icon-icon-base": "var(--v2-grey-800)",
"v2-icon-icon-muted": "var(--v2-grey-600)",
"v2-icon-icon-inverse": "var(--v2-grey-100)",
"v2-icon-icon-contrast": "var(--v2-grey-200)",
- "v2-icon-icon-accent": "#857A00",
- "v2-icon-icon-accent-hover": "#6B6200",
+ "v2-icon-icon-accent": "var(--v2-grey-1000)",
+ "v2-icon-icon-accent-hover": "var(--v2-grey-900)",
"v2-border-border-muted": "var(--v2-alpha-dark-8)",
"v2-border-border-base": "var(--v2-alpha-dark-10)",
"v2-border-border-strong": "var(--v2-alpha-dark-20)",