/
Alex_Ural
/
opencode
Обзор
Документация
Войти
/
Alex_Ural
/
opencode
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
dev
packages/ui/src/theme/v2/mapping.ts
170 строк
9 KB
usrnk1
feat(feat): align sub-agent task rows with v2 design (#35167)
09 июл 2026, 11:07
Не верифицирован
09 июл 2026, 11:07
5c860d4
Код
Авторство
О чём код?
import type { V2ColorValue } from "../types" 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"), } 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 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": "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 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 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 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 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": "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 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"), } 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, ...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"), } export function mapV2Semantics(isDark: boolean): Record<string, V2ColorValue> { return isDark ? dark : light } export function mergeV2Tokens(...layers: Record<string, V2ColorValue>[]): Record<string, V2ColorValue> { return Object.assign({}, ...layers) }