Skip to content

Refactor (packages/ui/src/theme/v2/mapping.ts:34): Found 64 lines of similar code in 2 locations #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
relghali wants to merge 4 commits into
base: main
Choose a base branch
from
+175 −144
Open

Refactor (packages/ui/src/theme/v2/mapping.ts:34): Found 64 lines of similar code in 2 locations #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9f7213f
Added devcontainer Configuration
relghali Aug 29, 2026
b351a9b
Remove duplicated light/dark token tables in v2 mapping
relghali Sep 4, 2026
a39dcdd
Add tests covering v2 semantic token resolution
relghali Sep 4, 2026
d0c5b50
Add curl, xz-utils, git, and gh to dev container
relghali Sep 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .devcontainer/devcontainer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Build Checkpoint",
"image": "oven/bun:1.3",
"postCreateCommand": "apt-get update && apt-get install -y python3 make g++ curl xz-utils ca-certificates git && curl -fsSL https://qlty.sh | bash"
}
67 changes: 67 additions & 0 deletions packages/ui/src/theme/v2/mapping.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { describe, expect, test } from "bun:test"
import { mapV2Semantics, mergeV2Tokens } from "./mapping"

const light = mapV2Semantics(false)
const dark = mapV2Semantics(true)

describe("mapV2Semantics", () => {
test("selects the light map when isDark is false", () => {
expect(light["v2-background-bg-base"]).toBe("var(--v2-grey-100)")
})

test("selects the dark map when isDark is true", () => {
expect(dark["v2-background-bg-base"]).toBe("var(--v2-grey-1000)")
})

test("light and dark define exactly the same tokens", () => {
expect(Object.keys(light).sort()).toEqual(Object.keys(dark).sort())
})

test("resolves paired values independently per theme", () => {
// Tokens whose two halves differ: guards against one theme
// being derived from the other's column.
expect(light["v2-text-text-accent"]).toBe("var(--v2-blue-600)")
expect(dark["v2-text-text-accent"]).toBe("var(--v2-blue-400)")
expect(light["v2-border-border-muted"]).toBe("var(--v2-alpha-dark-8)")
expect(dark["v2-border-border-muted"]).toBe("var(--v2-alpha-light-8)")
})

test("preserves tokens that are intentionally identical across themes", () => {
expect(light["v2-background-bg-layer-03"]).toBe(dark["v2-background-bg-layer-03"])
expect(light["v2-elevation-elements"]).toBe(dark["v2-elevation-elements"])
})

test("includes literal (non-var) values verbatim", () => {
expect(light["v2-overlay-simple-tab-scrim"]).toBe("#fafafa00")
expect(dark["v2-overlay-simple-tab-scrim"]).toBe("#08080800")
expect(light["v2-agent-plan-border"]).toBe("rgba(200, 61, 139, 0.20)")
})

test("merges agent and avatar token layers into both themes", () => {
expect(light["v2-agent-writer-solid"]).toBe("var(--v2-purple-700)")
expect(dark["v2-agent-writer-solid"]).toBe("var(--v2-purple-400)")
expect(light["v2-avatar-bg-orange"]).toBe("#ee7330ff")
expect(dark["v2-avatar-bg-orange"]).toBe("#723d22ff")
})

test("preserves long composite shadow values", () => {
expect(light["v2-elevation-raised"]).toBe(
"0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
)
})

test("defines every token as a non-empty string", () => {
for (const [token, value] of Object.entries({ ...light, ...dark })) {
expect(typeof value, token).toBe("string")
expect(value.length, token).toBeGreaterThan(0)
}
})
})

describe("mergeV2Tokens", () => {
test("applies later layers over earlier ones", () => {
const merged = mergeV2Tokens(light, { "v2-background-bg-base": "#000000ff" })
expect(merged["v2-background-bg-base"]).toBe("#000000ff")
expect(merged["v2-text-text-accent"]).toBe(light["v2-text-text-accent"])
})
})
247 changes: 103 additions & 144 deletions packages/ui/src/theme/v2/mapping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,162 +3,121 @@ import { V2_AVATAR_DARK, V2_AVATAR_LIGHT } from "./avatar"

const ref = (name: string): V2ColorValue => `var(--${name})`

const lightAgentTokens: Record<string, V2ColorValue> = {
"v2-agent-plan-solid": ref("v2-pink-800"),
"v2-agent-plan-border": "rgba(200, 61, 139, 0.20)",
"v2-agent-plan-background": "rgba(253, 236, 243, 0.10)",
"v2-agent-build-solid": ref("v2-blue-800"),
"v2-agent-build-border": "rgba(44, 71, 200, 0.20)",
"v2-agent-build-background": "rgba(236, 241, 254, 0.10)",
"v2-agent-explore-solid": ref("v2-yellow-900"),
"v2-agent-explore-border": "rgba(203, 159, 52, 0.20)",
"v2-agent-explore-background": "rgba(254, 250, 236, 0.1)",
"v2-agent-review-solid": ref("v2-green-800"),
"v2-agent-writer-solid": ref("v2-purple-700"),
}
/** A token's value in the light theme paired with its value in the dark theme. */
type V2Pair = readonly [light: V2ColorValue, dark: V2ColorValue]

const darkAgentTokens: Record<string, V2ColorValue> = {
"v2-agent-plan-solid": ref("v2-pink-400"),
"v2-agent-plan-border": "rgba(247, 153, 198, 0.20)",
"v2-agent-plan-background": "rgba(170, 53, 118, 0.05)",
"v2-agent-build-solid": ref("v2-blue-300"),
"v2-agent-build-border": "rgba(162, 188, 255, 0.20)",
"v2-agent-build-background": "rgba(38, 63, 169, 0.05)",
"v2-agent-explore-solid": ref("v2-yellow-300"),
"v2-agent-explore-border": "rgba(243, 218, 155, 0.20)",
"v2-agent-explore-background": "rgba(172, 136, 51, 0.05)",
"v2-agent-review-solid": ref("v2-green-300"),
"v2-agent-writer-solid": ref("v2-purple-400"),
}
const pick = (table: Record<string, V2Pair>, index: 0 | 1): Record<string, V2ColorValue> =>
Object.fromEntries(Object.entries(table).map(([token, pair]) => [token, pair[index]]))

const light: Record<string, V2ColorValue> = {
"v2-background-bg-base": ref("v2-grey-100"),
"v2-background-bg-deep": ref("v2-grey-200"),
"v2-background-bg-layer-01": ref("v2-grey-300"),
"v2-background-bg-layer-02": ref("v2-grey-400"),
"v2-background-bg-layer-03": ref("v2-grey-500"),
"v2-background-bg-layer-04": ref("v2-grey-600"),
"v2-background-bg-inverse": ref("v2-grey-1000"),
"v2-background-bg-contrast": ref("v2-grey-900"),
"v2-background-bg-button-neutral": ref("v2-grey-100"),
"v2-background-bg-accent": ref("v2-blue-600"),
"v2-text-text-inverse": ref("v2-grey-100"),
"v2-text-text-contrast": ref("v2-grey-100"),
"v2-text-text-accent": ref("v2-blue-600"),
"v2-text-text-accent-hover": ref("v2-blue-700"),
"v2-text-text-code-accent": ref("v2-blue-900"),
"v2-border-border-muted": ref("v2-alpha-dark-8"),
"v2-border-border-base": ref("v2-alpha-dark-10"),
"v2-border-border-strong": ref("v2-alpha-dark-20"),
"v2-border-border-inverse": ref("v2-grey-1000"),
"v2-border-border-focus": ref("v2-blue-500"),
"v2-overlay-simple-overlay-hover": ref("v2-alpha-dark-4"),
"v2-overlay-simple-overlay-pressed": ref("v2-alpha-dark-8"),
"v2-overlay-simple-overlay-contrast-hover": ref("v2-alpha-light-12"),
"v2-overlay-simple-overlay-contrast-pressed": ref("v2-alpha-light-24"),
"v2-overlay-simple-overlay-scrim": ref("v2-alpha-dark-40"),
"v2-overlay-gradient-depth-overlay-depth-top": ref("v2-alpha-light-100"),
"v2-overlay-gradient-depth-overlay-depth-bot": ref("v2-alpha-light-0"),
"v2-overlay-simple-tab-active-scrim": "#fafafa00",
"v2-overlay-simple-tab-hover-scrim": "#eeeeee00",
"v2-overlay-simple-tab-scrim": "#fafafa00",
"v2-state-bg-success": ref("v2-green-100"),
"v2-state-fg-success": ref("v2-green-800"),
"v2-state-border-success": ref("v2-green-300"),
"v2-state-bg-warning": ref("v2-yellow-100"),
"v2-state-fg-warning": ref("v2-yellow-800"),
"v2-state-border-warning": ref("v2-yellow-300"),
"v2-state-bg-danger": ref("v2-red-100"),
"v2-state-fg-danger": ref("v2-red-800"),
"v2-state-border-danger": ref("v2-red-300"),
"v2-state-bg-info": ref("v2-blue-100"),
"v2-state-fg-info": ref("v2-blue-800"),
"v2-state-border-info": ref("v2-blue-300"),
...lightAgentTokens,
...V2_AVATAR_LIGHT,
"v2-elevation-raised":
const coreTokens = {
"v2-background-bg-base": [ref("v2-grey-100"), ref("v2-grey-1000")],
"v2-background-bg-deep": [ref("v2-grey-200"), ref("v2-grey-1100")],
"v2-background-bg-layer-01": [ref("v2-grey-300"), ref("v2-grey-800")],
"v2-background-bg-layer-02": [ref("v2-grey-400"), ref("v2-grey-600")],
"v2-background-bg-layer-03": [ref("v2-grey-500"), ref("v2-grey-500")],
"v2-background-bg-layer-04": [ref("v2-grey-600"), ref("v2-grey-400")],
"v2-background-bg-inverse": [ref("v2-grey-1000"), ref("v2-grey-100")],
"v2-background-bg-contrast": [ref("v2-grey-900"), ref("v2-grey-700")],
"v2-background-bg-button-neutral": [ref("v2-grey-100"), ref("v2-alpha-light-6")],
"v2-background-bg-accent": [ref("v2-blue-600"), ref("v2-blue-600")],
"v2-text-text-inverse": [ref("v2-grey-100"), ref("v2-grey-1000")],
"v2-text-text-contrast": [ref("v2-grey-100"), ref("v2-grey-100")],
"v2-text-text-accent": [ref("v2-blue-600"), ref("v2-blue-400")],
"v2-text-text-accent-hover": [ref("v2-blue-700"), ref("v2-blue-300")],
"v2-text-text-code-accent": [ref("v2-blue-900"), ref("v2-blue-400")],
"v2-border-border-muted": [ref("v2-alpha-dark-8"), ref("v2-alpha-light-8")],
"v2-border-border-base": [ref("v2-alpha-dark-10"), ref("v2-alpha-light-10")],
"v2-border-border-strong": [ref("v2-alpha-dark-20"), ref("v2-alpha-light-20")],
"v2-border-border-inverse": [ref("v2-grey-1000"), ref("v2-grey-100")],
"v2-border-border-focus": [ref("v2-blue-500"), ref("v2-blue-500")],
"v2-overlay-simple-overlay-hover": [ref("v2-alpha-dark-4"), ref("v2-alpha-light-6")],
"v2-overlay-simple-overlay-pressed": [ref("v2-alpha-dark-8"), ref("v2-alpha-light-10")],
"v2-overlay-simple-overlay-contrast-hover": [ref("v2-alpha-light-12"), ref("v2-alpha-dark-24")],
"v2-overlay-simple-overlay-contrast-pressed": [ref("v2-alpha-light-24"), ref("v2-alpha-dark-40")],
"v2-overlay-simple-overlay-scrim": [ref("v2-alpha-dark-40"), ref("v2-alpha-dark-60")],
"v2-overlay-gradient-depth-overlay-depth-top": [ref("v2-alpha-light-100"), ref("v2-alpha-light-100")],
"v2-overlay-gradient-depth-overlay-depth-bot": [ref("v2-alpha-light-0"), ref("v2-alpha-light-0")],
"v2-overlay-simple-tab-active-scrim": ["#fafafa00", "#24242400"],
"v2-overlay-simple-tab-hover-scrim": ["#eeeeee00", "#3a3a3a00"],
"v2-overlay-simple-tab-scrim": ["#fafafa00", "#08080800"],
"v2-state-bg-success": [ref("v2-green-100"), ref("v2-green-1200")],
"v2-state-fg-success": [ref("v2-green-800"), ref("v2-green-500")],
"v2-state-border-success": [ref("v2-green-300"), ref("v2-green-900")],
"v2-state-bg-warning": [ref("v2-yellow-100"), ref("v2-yellow-1200")],
"v2-state-fg-warning": [ref("v2-yellow-800"), ref("v2-yellow-500")],
"v2-state-border-warning": [ref("v2-yellow-300"), ref("v2-yellow-900")],
"v2-state-bg-danger": [ref("v2-red-100"), ref("v2-red-1200")],
"v2-state-fg-danger": [ref("v2-red-800"), ref("v2-red-500")],
"v2-state-border-danger": [ref("v2-red-300"), ref("v2-red-900")],
"v2-state-bg-info": [ref("v2-blue-100"), ref("v2-blue-1200")],
"v2-state-fg-info": [ref("v2-blue-800"), ref("v2-blue-500")],
"v2-state-border-info": [ref("v2-blue-300"), ref("v2-blue-900")],
} satisfies Record<string, V2Pair>

const agentTokens = {
"v2-agent-plan-solid": [ref("v2-pink-800"), ref("v2-pink-400")],
"v2-agent-plan-border": ["rgba(200, 61, 139, 0.20)", "rgba(247, 153, 198, 0.20)"],
"v2-agent-plan-background": ["rgba(253, 236, 243, 0.10)", "rgba(170, 53, 118, 0.05)"],
"v2-agent-build-solid": [ref("v2-blue-800"), ref("v2-blue-300")],
"v2-agent-build-border": ["rgba(44, 71, 200, 0.20)", "rgba(162, 188, 255, 0.20)"],
"v2-agent-build-background": ["rgba(236, 241, 254, 0.10)", "rgba(38, 63, 169, 0.05)"],
"v2-agent-explore-solid": [ref("v2-yellow-900"), ref("v2-yellow-300")],
"v2-agent-explore-border": ["rgba(203, 159, 52, 0.20)", "rgba(243, 218, 155, 0.20)"],
"v2-agent-explore-background": ["rgba(254, 250, 236, 0.1)", "rgba(172, 136, 51, 0.05)"],
"v2-agent-review-solid": [ref("v2-green-800"), ref("v2-green-300")],
"v2-agent-writer-solid": [ref("v2-purple-700"), ref("v2-purple-400")],
} satisfies Record<string, V2Pair>

const elevationTokens = {
"v2-elevation-raised": [
"0px 2px 4px 0px var(--v2-alpha-dark-4), 0px 1px 2px -1px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
"v2-elevation-floating":
"0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
],
"v2-elevation-floating": [
"0px 8px 16px 0px var(--v2-alpha-dark-4), 0px 4px 8px 0px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
"v2-elevation-overlay":
"0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 4px 8px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
],
"v2-elevation-overlay": [
"0px 16px 32px 0px var(--v2-alpha-dark-4), 0px 8px 16px 0px var(--v2-alpha-dark-8), 0px 0px 0px 0.5px var(--v2-alpha-dark-12), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
"v2-elevation-button-neutral":
"0px 16px 32px 0px var(--v2-alpha-dark-30), 0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
],
"v2-elevation-button-neutral": [
"0px 1px 1.5px 0px var(--v2-alpha-dark-10), 0px 0px 0px 0.5px var(--v2-alpha-dark-14), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
"v2-elevation-button-contrast":
"0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-20), 0px -0.5px 0px 0px var(--v2-alpha-light-10)",
],
"v2-elevation-button-contrast": [
"0px 1px 1.5px 0px var(--v2-alpha-dark-20), 0px 0px 0px 0.5px var(--v2-grey-800), inset 0px 1px 2px 0px var(--v2-alpha-light-14), inset 0px -1px 2px 0px var(--v2-alpha-dark-6), 0px 0px 0px 0px var(--v2-alpha-dark-0)",
"v2-elevation-elements": "0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
"v2-elevation-switch-off":
"0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-40), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0px var(--v2-alpha-light-0), 0px -0.5px 0px 0px var(--v2-alpha-light-30)",
],
"v2-elevation-elements": [
"0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
"0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
],
"v2-elevation-switch-off": [
"inset 0px 1px 1px 0px var(--v2-alpha-dark-8), inset 0px 0.5px 0.5px 0px var(--v2-alpha-dark-8), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-10)",
"v2-elevation-switch-on":
"inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
],
"v2-elevation-switch-on": [
"inset 0px 2px 2px 0px var(--v2-alpha-dark-10), inset 0px 1px 1px 0px var(--v2-alpha-dark-10), inset 0px 0px 0px 0.5px var(--v2-alpha-dark-20)",
"v2-illustration-illustration-layer-01": ref("v2-grey-300"),
"v2-illustration-illustration-layer-02": ref("v2-grey-400"),
"v2-illustration-illustration-layer-03": ref("v2-grey-500"),
"inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
],
"v2-illustration-illustration-layer-01": [ref("v2-grey-300"), ref("v2-grey-900")],
"v2-illustration-illustration-layer-02": [ref("v2-grey-400"), ref("v2-grey-800")],
"v2-illustration-illustration-layer-03": [ref("v2-grey-500"), ref("v2-grey-700")],
} satisfies Record<string, V2Pair>

const light: Record<string, V2ColorValue> = {
...pick(coreTokens, 0),
...pick(agentTokens, 0),
...V2_AVATAR_LIGHT,
...pick(elevationTokens, 0),
}

const dark: Record<string, V2ColorValue> = {
"v2-background-bg-base": ref("v2-grey-1000"),
"v2-background-bg-deep": ref("v2-grey-1100"),
"v2-background-bg-layer-01": ref("v2-grey-800"),
"v2-background-bg-layer-02": ref("v2-grey-600"),
"v2-background-bg-layer-03": ref("v2-grey-500"),
"v2-background-bg-layer-04": ref("v2-grey-400"),
"v2-background-bg-inverse": ref("v2-grey-100"),
"v2-background-bg-contrast": ref("v2-grey-700"),
"v2-background-bg-button-neutral": ref("v2-alpha-light-6"),
"v2-background-bg-accent": ref("v2-blue-600"),
"v2-text-text-inverse": ref("v2-grey-1000"),
"v2-text-text-contrast": ref("v2-grey-100"),
"v2-text-text-accent": ref("v2-blue-400"),
"v2-text-text-accent-hover": ref("v2-blue-300"),
"v2-text-text-code-accent": ref("v2-blue-400"),
"v2-border-border-muted": ref("v2-alpha-light-8"),
"v2-border-border-base": ref("v2-alpha-light-10"),
"v2-border-border-strong": ref("v2-alpha-light-20"),
"v2-border-border-inverse": ref("v2-grey-100"),
"v2-border-border-focus": ref("v2-blue-500"),
"v2-overlay-simple-overlay-hover": ref("v2-alpha-light-6"),
"v2-overlay-simple-overlay-pressed": ref("v2-alpha-light-10"),
"v2-overlay-simple-overlay-contrast-hover": ref("v2-alpha-dark-24"),
"v2-overlay-simple-overlay-contrast-pressed": ref("v2-alpha-dark-40"),
"v2-overlay-simple-overlay-scrim": ref("v2-alpha-dark-60"),
"v2-overlay-gradient-depth-overlay-depth-top": ref("v2-alpha-light-100"),
"v2-overlay-gradient-depth-overlay-depth-bot": ref("v2-alpha-light-0"),
"v2-overlay-simple-tab-active-scrim": "#24242400",
"v2-overlay-simple-tab-hover-scrim": "#3a3a3a00",
"v2-overlay-simple-tab-scrim": "#08080800",
"v2-state-bg-success": ref("v2-green-1200"),
"v2-state-fg-success": ref("v2-green-500"),
"v2-state-border-success": ref("v2-green-900"),
"v2-state-bg-warning": ref("v2-yellow-1200"),
"v2-state-fg-warning": ref("v2-yellow-500"),
"v2-state-border-warning": ref("v2-yellow-900"),
"v2-state-bg-danger": ref("v2-red-1200"),
"v2-state-fg-danger": ref("v2-red-500"),
"v2-state-border-danger": ref("v2-red-900"),
"v2-state-bg-info": ref("v2-blue-1200"),
"v2-state-fg-info": ref("v2-blue-500"),
"v2-state-border-info": ref("v2-blue-900"),
...darkAgentTokens,
...pick(coreTokens, 1),
...pick(agentTokens, 1),
...V2_AVATAR_DARK,
"v2-elevation-raised":
"0px 2px 4px 0px var(--v2-alpha-dark-30), 0px 1px 2px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
"v2-elevation-floating":
"0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 4px 8px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
"v2-elevation-overlay":
"0px 16px 32px 0px var(--v2-alpha-dark-30), 0px 8px 16px 0px var(--v2-alpha-dark-30), 0px 0px 0px 0.5px var(--v2-alpha-light-16), 0px -0.5px 0px 0px var(--v2-alpha-light-6)",
"v2-elevation-button-neutral":
"0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-20), 0px -0.5px 0px 0px var(--v2-alpha-light-10)",
"v2-elevation-button-contrast":
"0px 1px 2px 0px var(--v2-alpha-dark-40), 0px 0px 0px 0.5px var(--v2-alpha-light-40), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0px var(--v2-alpha-light-0), 0px -0.5px 0px 0px var(--v2-alpha-light-30)",
"v2-elevation-elements": "0px 0.5px 0.5px 0px var(--v2-alpha-dark-40)",
"v2-elevation-switch-off":
"inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
"v2-elevation-switch-on":
"inset 0px -0.5px 0px 0px var(--v2-alpha-light-10), inset 0px 0px 0px 0px var(--v2-alpha-light-0), inset 0px 0px 0px 0.5px var(--v2-alpha-light-16)",
"v2-illustration-illustration-layer-01": ref("v2-grey-900"),
"v2-illustration-illustration-layer-02": ref("v2-grey-800"),
"v2-illustration-illustration-layer-03": ref("v2-grey-700"),
...pick(elevationTokens, 1),
}

export function mapV2Semantics(isDark: boolean): Record<string, V2ColorValue> {
Expand All @@ -167,4 +126,4 @@ export function mapV2Semantics(isDark: boolean): Record<string, V2ColorValue> {

export function mergeV2Tokens(...layers: Record<string, V2ColorValue>[]): Record<string, V2ColorValue> {
return Object.assign({}, ...layers)
}
}
Loading