feat: implement color mixing simplification and enhance gradient handling in styles

Author: Justineo

packages/extension/mcp/tools/code/index.ts

@@ -4,6 +4,7 @@ import { MCP_MAX_PAYLOAD_BYTES } from '@tempad-dev/mcp-shared'
 
 import { activePlugin } from '@/ui/state'
 import { stringifyComponent } from '@/utils/component'
+import { simplifyColorMixToRgba } from '@/utils/css'
 
 import type { CodeLanguage, RenderContext } from './render'
 
@@ -183,6 +184,7 @@ export async function handleGetCode(
       canonicalById
     )
     code = replaceTokensWithValues(code, resolvedByFinal)
+    code = simplifyColorMixToRgba(code)
     if (code.length > MAX_CODE_CHARS) {
       code = code.slice(0, MAX_CODE_CHARS)
       truncated = true

packages/extension/mcp/tools/code/styles/background.ts

@@ -3,7 +3,8 @@ import {
   formatHexAlpha,
   parseBackgroundShorthand,
   preprocessCssValue,
-  stripFallback
+  stripFallback,
+  normalizeFigmaVarName
 } from '@/utils/css'
 
 const BG_URL_LIGHTGRAY_RE = /url\(.*?\)\s+lightgray/i
@@ -19,6 +20,12 @@ export function cleanFigmaSpecificStyles(
     const bgValue = processed.background
     const normalized = stripFallback(preprocessCssValue(bgValue)).trim()
 
+    const gradient = resolveGradientWithOpacity(normalized, node)
+    if (gradient) {
+      processed.background = gradient
+      return processed
+    }
+
     if (isSolidBackground(normalized)) {
       processed['background-color'] = normalized
       delete processed.background
@@ -62,6 +69,131 @@ export function cleanFigmaSpecificStyles(
   return processed
 }
 
+function resolveGradientWithOpacity(value: string, node: SceneNode): string | null {
+  if (!value) return null
+  if (!/gradient\(/i.test(value)) return null
+  if (!('fills' in node) || !Array.isArray(node.fills)) return null
+
+  const fill = node.fills.find((f) => f && f.visible !== false && f.type === 'GRADIENT_LINEAR') as
+    | GradientPaint
+    | undefined
+  if (!fill || !Array.isArray(fill.gradientStops)) return null
+
+  const fillOpacity = typeof fill.opacity === 'number' ? fill.opacity : 1
+  const hasStopAlpha = fill.gradientStops.some((stop) => (stop.color?.a ?? 1) < 1)
+  if (fillOpacity >= 0.99 && !hasStopAlpha) return null
+
+  const parsed = parseGradient(value)
+  if (!parsed) return null
+
+  const angle = parsed.args[0]?.trim()
+  const hasAngle =
+    !!angle &&
+    (angle.endsWith('deg') ||
+      angle.endsWith('rad') ||
+      angle.endsWith('turn') ||
+      angle.startsWith('to '))
+  const stops = fill.gradientStops.map((stop) => {
+    const pct = formatPercent(stop.position)
+    const color = formatGradientStopColor(stop, fillOpacity)
+    return `${color} ${pct}`
+  })
+
+  const args = hasAngle ? [angle, ...stops] : stops
+  return `${parsed.fn}(${args.join(', ')})`
+}
+
+function parseGradient(value: string): { fn: string; args: string[] } | null {
+  const match = value.match(/(linear-gradient|radial-gradient|conic-gradient)\s*\(/i)
+  if (!match || match.index == null) return null
+  const fn = match[1]
+  const start = value.indexOf('(', match.index)
+  if (start < 0) return null
+
+  let depth = 0
+  let end = -1
+  for (let i = start; i < value.length; i += 1) {
+    const ch = value[i]
+    if (ch === '(') depth += 1
+    else if (ch === ')') {
+      depth -= 1
+      if (depth === 0) {
+        end = i
+        break
+      }
+    }
+  }
+  if (end < 0) return null
+
+  const inner = value.slice(start + 1, end)
+  return { fn, args: splitTopLevel(inner) }
+}
+
+function splitTopLevel(input: string): string[] {
+  const out: string[] = []
+  let depth = 0
+  let quote: '"' | "'" | null = null
+  let buf = ''
+
+  for (let i = 0; i < input.length; i += 1) {
+    const ch = input[i]
+
+    if (quote) {
+      if (ch === '\\') {
+        buf += ch
+        i += 1
+        if (i < input.length) buf += input[i]
+        continue
+      }
+      if (ch === quote) quote = null
+      buf += ch
+      continue
+    }
+
+    if (ch === '"' || ch === "'") {
+      quote = ch
+      buf += ch
+      continue
+    }
+
+    if (ch === '(') depth += 1
+    if (ch === ')') depth = Math.max(0, depth - 1)
+
+    if (ch === ',' && depth === 0) {
+      out.push(buf.trim())
+      buf = ''
+      continue
+    }
+
+    buf += ch
+  }
+
+  if (buf.trim()) out.push(buf.trim())
+  return out
+}
+
+function formatPercent(pos: number): string {
+  const pct = Math.round(pos * 10000) / 100
+  return `${pct}%`
+}
+
+function formatGradientStopColor(stop: ColorStop, fillOpacity: number): string {
+  const baseAlpha = stop.color?.a ?? 1
+  const alpha = Math.max(0, Math.min(1, baseAlpha * fillOpacity))
+
+  const bound = stop.boundVariables?.color
+  if (bound && typeof bound === 'object' && 'id' in bound && bound.id) {
+    const v = figma.variables.getVariableById(bound.id)
+    const name = normalizeFigmaVarName(v?.name ?? '')
+    const expr = `var(${name})`
+    if (alpha >= 0.99) return expr
+    const pct = Math.round(alpha * 10000) / 100
+    return `color-mix(in srgb, ${expr} ${pct}%, transparent)`
+  }
+
+  return formatHexAlpha(stop.color, alpha)
+}
+
 function isSolidBackground(value: string): boolean {
   if (!value) return false
   const trimmed = value.trim()

packages/extension/mcp/tools/token/mapping.ts

@@ -26,6 +26,7 @@ export function normalizeStyleVars(
   if (!mappings) return used
 
   const syntaxMap = buildCodeSyntaxIndex(mappings.variableIds)
+  const replaceMap = buildReplaceMap(mappings.variableIds)
 
   for (const style of styles.values()) {
     for (const [prop, raw] of Object.entries(style)) {
@@ -37,19 +38,18 @@ export function normalizeStyleVars(
       if (rewrite) {
         style[prop] = `var(${rewrite.canonical})`
         used.add(rewrite.id)
+        continue
       }
-    }
-
-    for (const [prop, raw] of Object.entries(style)) {
-      if (!raw) continue
-      const value = raw.trim()
-      if (!value) continue
 
       const matched = syntaxMap.get(value)
-      if (!matched) continue
+      if (matched) {
+        used.add(matched)
+        style[prop] = `var(${normalizeFigmaVarName(value)})`
+        continue
+      }
 
-      used.add(matched)
-      style[prop] = `var(${normalizeFigmaVarName(value)})`
+      const replaced = replaceKnownNames(raw, replaceMap, used)
+      if (replaced !== raw) style[prop] = replaced
     }
   }
 
@@ -69,6 +69,69 @@ function buildCodeSyntaxIndex(variableIds: Set<string>): Map<string, string> {
   return map
 }
 
+type ReplaceEntry = { name: string; normalized: string; id: string }
+
+function buildReplaceMap(variableIds: Set<string>): ReplaceEntry[] {
+  const entries: ReplaceEntry[] = []
+  for (const id of variableIds) {
+    const v = figma.variables.getVariableById(id)
+    if (!v) continue
+
+    const normalizedName = normalizeFigmaVarName(v.name ?? '')
+    if (normalizedName && normalizedName !== '--unnamed') {
+      entries.push({ name: normalizedName, normalized: normalizedName, id })
+    }
+
+    const cs = v.codeSyntax?.WEB?.trim()
+    if (cs) {
+      const normalized = normalizeFigmaVarName(cs)
+      if (normalized && normalized !== '--unnamed') {
+        entries.push({ name: cs, normalized, id })
+      }
+    }
+  }
+
+  entries.sort((a, b) => b.name.length - a.name.length)
+  return entries
+}
+
+function replaceKnownNames(value: string, entries: ReplaceEntry[], used: Set<string>): string {
+  if (!value || !entries.length) return value
+
+  const placeholders: string[] = []
+  let out = replaceVarFunctions(value, ({ full }) => {
+    const token = `__VAR_${placeholders.length}__`
+    placeholders.push(full)
+    return token
+  })
+
+  let changed = false
+
+  for (const entry of entries) {
+    const escaped = entry.name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+    const re = new RegExp(`(^|[^A-Za-z0-9_-])(${escaped})(?=[^A-Za-z0-9_-]|$)`, 'g')
+    out = out.replace(re, (_match, prefix: string, _name: string, offset: number, str: string) => {
+      const start = offset + prefix.length
+      const left = str.slice(0, start).replace(/\s+$/, '')
+      if (left.toLowerCase().endsWith('var(')) {
+        return _match
+      }
+      used.add(entry.id)
+      changed = true
+      return `${prefix}var(${entry.normalized})`
+    })
+  }
+
+  if (placeholders.length) {
+    out = out.replace(/__VAR_(\d+)__/g, (_match, index: string) => {
+      const i = Number(index)
+      return Number.isFinite(i) ? placeholders[i] : _match
+    })
+  }
+
+  return changed ? out : value
+}
+
 export async function applyPluginTransforms(
   markup: string,
   pluginCode: string | undefined,

packages/extension/utils/css.ts

@@ -322,6 +322,42 @@ export function normalizeStyleValues(
   return normalized
 }
 
+export function simplifyColorMixToRgba(input: string): string {
+  if (!input || !input.includes('color-mix(')) return input
+
+  return input.replace(
+    /color-mix\(\s*in\s+srgb\s*,\s*(#[0-9a-fA-F]{3,8})\s+([0-9.]+)%\s*,\s*transparent\s*\)/g,
+    (_match, hex: string, pct: string) => {
+      const parsed = parseHexColor(hex)
+      if (!parsed) return _match
+      const weight = Number(pct) / 100
+      if (!Number.isFinite(weight)) return _match
+      const alpha = toDecimalPlace(parsed.a * weight, 3)
+      return `rgba(${parsed.r}, ${parsed.g}, ${parsed.b}, ${alpha})`
+    }
+  )
+}
+
+function parseHexColor(input: string): { r: number; g: number; b: number; a: number } | null {
+  let hex = input.trim().replace(/^#/, '')
+  if (![3, 4, 6, 8].includes(hex.length)) return null
+
+  if (hex.length === 3 || hex.length === 4) {
+    hex = hex
+      .split('')
+      .map((c) => c + c)
+      .join('')
+  }
+
+  const r = parseInt(hex.slice(0, 2), 16)
+  const g = parseInt(hex.slice(2, 4), 16)
+  const b = parseInt(hex.slice(4, 6), 16)
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1
+
+  if (![r, g, b, a].every((v) => Number.isFinite(v))) return null
+  return { r, g, b, a }
+}
+
 function parseBorderShorthand(normalized: string): {
   width?: string
   style?: string