chore(docs): support TokenLit

Author: junghyeonsu

docs/components/rootage.ts

@@ -17,13 +17,15 @@ export function stringifyTokenLit(token: AST.TokenLit): AST.TokenRef {
 }
 
 export function stringifyValueLit(lit: AST.ValueLit): string {
+  const tokenReference = (token: AST.TokenLit) => stringifyTokenLit(token);
+
   switch (lit.kind) {
     case "DimensionLit":
       return lit.unit === "rem"
-        ? `${css.staticStringifier.value(lit)} (${lit.value * 16}px)`
-        : css.staticStringifier.value(lit);
+        ? `${css.staticStringifier.value(lit, tokenReference)} (${lit.value * 16}px)`
+        : css.staticStringifier.value(lit, tokenReference);
     default:
-      return css.staticStringifier.value(lit);
+      return css.staticStringifier.value(lit, tokenReference);
   }
 }
 

docs/components/token-cell.tsx

@@ -19,9 +19,30 @@ export interface TokenCellProps {
   resolvedValue: AST.ValueLit;
 }
 
+function renderGradientWithTokens(gradient: AST.GradientLit) {
+  return (
+    <span>
+      {gradient.stops.map((stop, index) => (
+        <Fragment key={index}>
+          {stop.color.kind === "TokenLit" ? (
+            <TokenLink id={stop.color.identifier} />
+          ) : (
+            stop.color.value
+          )}{" "}
+          {(stop.position.value * 100).toFixed(1)}%{index < gradient.stops.length - 1 ? ", " : ""}
+        </Fragment>
+      ))}
+    </span>
+  );
+}
+
 export function TokenCell(props: TokenCellProps) {
   const { isExpanded, values, resolvedValue } = props;
 
+  const isGradientWithTokens =
+    resolvedValue.kind === "GradientLit" &&
+    resolvedValue.stops.some((stop) => stop.color.kind === "TokenLit");
+
   return (
     <div className="flex justify-between" aria-expanded={isExpanded}>
       <div className="flex flex-col gap-1">
@@ -30,7 +51,9 @@ export function TokenCell(props: TokenCellProps) {
             <Fragment key={item.ref}>
               <div className="flex items-center gap-2">
                 <TypeIndicator value={resolvedValue} />{" "}
-                {item.ref.startsWith("$") ? (
+                {index === values.length - 1 && isGradientWithTokens ? (
+                  renderGradientWithTokens(resolvedValue as AST.GradientLit)
+                ) : item.ref.startsWith("$") ? (
                   <TokenLink id={item.ref} description={item.description} />
                 ) : (
                   item.ref
@@ -46,7 +69,9 @@ export function TokenCell(props: TokenCellProps) {
         ) : (
           <div className="flex items-center gap-2">
             <TypeIndicator value={resolvedValue} />{" "}
-            {values[0].ref.startsWith("$") ? (
+            {isGradientWithTokens ? (
+              renderGradientWithTokens(resolvedValue as AST.GradientLit)
+            ) : values[0].ref.startsWith("$") ? (
               <TokenLink id={values[0].ref} description={values[0].description} />
             ) : (
               values[0].ref

docs/components/type-indicator.tsx

@@ -5,15 +5,24 @@ import { IconLayers, IconRuler, IconSpline } from "./icons";
 // Gradient를 CSS linear-gradient로 변환하는 유틸리티 함수
 function gradientToCss(gradient: AST.GradientLit): string {
   const stops = gradient.stops
-    .map((stop) => `${stop.color.value} ${(stop.position.value * 100).toFixed(1)}%`)
+    .map((stop) => {
+      const color =
+        stop.color.kind === "ColorHexLit"
+          ? stop.color.value
+          : `var(--seed-${stop.color.identifier.replace(/\$/g, "").replace(/\./g, "-")})`;
+      return `${color} ${(stop.position.value * 100).toFixed(1)}%`;
+    })
     .join(", ");
   return `linear-gradient(to right, ${stops})`;
 }
 
 // Gradient 정보를 텍스트로 변환하는 함수
 function gradientToText(gradient: AST.GradientLit): string {
   const stops = gradient.stops
-    .map((stop) => `${stop.color.value} at ${(stop.position.value * 100).toFixed(1)}%`)
+    .map((stop) => {
+      const color = stop.color.kind === "ColorHexLit" ? stop.color.value : stop.color.identifier;
+      return `${color} at ${(stop.position.value * 100).toFixed(1)}%`;
+    })
     .join(", ");
   return `Gradient: ${stops}`;
 }