chore(docs): support shadow TokenLit

Author: junghyeonsu

docs/components/token-cell.tsx

@@ -36,13 +36,39 @@ function renderGradientWithTokens(gradient: AST.GradientLit) {
   );
 }
 
+function renderShadowWithTokens(shadow: AST.ShadowLit) {
+  return (
+    <span>
+      {shadow.layers.map((layer, index) => (
+        <Fragment key={index}>
+          {layer.offsetX.value}
+          {layer.offsetX.unit} {layer.offsetY.value}
+          {layer.offsetY.unit} {layer.blur.value}
+          {layer.blur.unit} {layer.spread.value}
+          {layer.spread.unit}{" "}
+          {layer.color.kind === "TokenLit" ? (
+            <TokenLink id={layer.color.identifier} />
+          ) : (
+            layer.color.value
+          )}
+          {index < shadow.layers.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");
 
+  const isShadowWithTokens =
+    resolvedValue.kind === "ShadowLit" &&
+    resolvedValue.layers.some((layer) => layer.color.kind === "TokenLit");
+
   return (
     <div className="flex justify-between" aria-expanded={isExpanded}>
       <div className="flex flex-col gap-1">
@@ -51,7 +77,9 @@ export function TokenCell(props: TokenCellProps) {
             <Fragment key={item.ref}>
               <div className="flex items-center gap-2">
                 <TypeIndicator value={resolvedValue} />{" "}
-                {index === values.length - 1 && isGradientWithTokens ? (
+                {index === values.length - 1 && isShadowWithTokens ? (
+                  renderShadowWithTokens(resolvedValue as AST.ShadowLit)
+                ) : index === values.length - 1 && isGradientWithTokens ? (
                   renderGradientWithTokens(resolvedValue as AST.GradientLit)
                 ) : item.ref.startsWith("$") ? (
                   <TokenLink id={item.ref} description={item.description} />
@@ -69,7 +97,9 @@ export function TokenCell(props: TokenCellProps) {
         ) : (
           <div className="flex items-center gap-2">
             <TypeIndicator value={resolvedValue} />{" "}
-            {isGradientWithTokens ? (
+            {isShadowWithTokens ? (
+              renderShadowWithTokens(resolvedValue as AST.ShadowLit)
+            ) : isGradientWithTokens ? (
               renderGradientWithTokens(resolvedValue as AST.GradientLit)
             ) : values[0].ref.startsWith("$") ? (
               <TokenLink id={values[0].ref} description={values[0].description} />