@sproutsocial/seeds-theme 0.1.0

package/dist/source/theme-light.tokens.json

@@ -0,0 +1,1945 @@
+{
+  "breakpoints": {
+    "0": {
+      "$value": "900px",
+      "$type": "dimension"
+    },
+    "1": {
+      "$value": "1200px",
+      "$type": "dimension"
+    },
+    "2": {
+      "$value": "1500px",
+      "$type": "dimension"
+    },
+    "3": {
+      "$value": "1800px",
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": "640px",
+      "$type": "dimension"
+    },
+    "md": {
+      "$value": "768px",
+      "$type": "dimension"
+    },
+    "lg": {
+      "$value": "1024px",
+      "$type": "dimension"
+    },
+    "xl": {
+      "$value": "1280px",
+      "$type": "dimension"
+    },
+    "$extensions": {
+      "org.sproutsocial.seeds": {
+        "collection": "array"
+      }
+    }
+  },
+  "colors": {
+    "container": {
+      "background": {
+        "positive_sentiment": {
+          "$value": "{color.blue.500}",
+          "$type": "color"
+        },
+        "negative_sentiment": {
+          "$value": "{color.red.500}",
+          "$type": "color"
+        },
+        "neutral_sentiment": {
+          "$value": "{color.neutral.300}",
+          "$type": "color"
+        },
+        "ai_generated": {
+          "$type": "string",
+          "$value": "{colors.gradient.ai-subtle}, {colors.container.background.base}"
+        },
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        },
+        "success": {
+          "$value": "{color.green.100}",
+          "$type": "color"
+        },
+        "warning": {
+          "$value": "{color.yellow.100}",
+          "$type": "color"
+        },
+        "error": {
+          "$value": "{color.red.100}",
+          "$type": "color"
+        },
+        "info": {
+          "$value": "{color.blue.100}",
+          "$type": "color"
+        },
+        "opportunity": {
+          "$value": "{color.purple.100}",
+          "$type": "color"
+        },
+        "danger": {
+          "$value": "{color.red.100}",
+          "$type": "color"
+        },
+        "decorative": {
+          "green": {
+            "$value": "{color.green.100}",
+            "$type": "color"
+          },
+          "blue": {
+            "$value": "{color.blue.100}",
+            "$type": "color"
+          },
+          "purple": {
+            "$value": "{color.purple.100}",
+            "$type": "color"
+          },
+          "yellow": {
+            "$value": "{color.yellow.100}",
+            "$type": "color"
+          },
+          "orange": {
+            "$value": "{color.orange.100}",
+            "$type": "color"
+          },
+          "red": {
+            "$value": "{color.red.100}",
+            "$type": "color"
+          },
+          "neutral": {
+            "$value": "{color.neutral.100}",
+            "$type": "color"
+          },
+          "magenta": {
+            "$value": "{color.magenta.100}",
+            "$type": "color"
+          },
+          "pink": {
+            "$value": "{color.pink.100}",
+            "$type": "color"
+          },
+          "aqua": {
+            "$value": "{color.aqua.100}",
+            "$type": "color"
+          },
+          "teal": {
+            "$value": "{color.teal.100}",
+            "$type": "color"
+          }
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        }
+      },
+      "border": {
+        "success": {
+          "$value": "{color.green.500}",
+          "$type": "color"
+        },
+        "warning": {
+          "$value": "{color.yellow.600}",
+          "$type": "color"
+        },
+        "error": {
+          "$value": "{color.red.600}",
+          "$type": "color"
+        },
+        "danger": {
+          "$value": "{color.red.600}",
+          "$type": "color"
+        },
+        "info": {
+          "$value": "{color.blue.600}",
+          "$type": "color"
+        },
+        "opportunity": {
+          "$value": "{color.purple.500}",
+          "$type": "color"
+        },
+        "decorative": {
+          "green": {
+            "$value": "{color.green.500}",
+            "$type": "color"
+          },
+          "blue": {
+            "$value": "{color.blue.600}",
+            "$type": "color"
+          },
+          "purple": {
+            "$value": "{color.purple.500}",
+            "$type": "color"
+          },
+          "yellow": {
+            "$value": "{color.yellow.600}",
+            "$type": "color"
+          },
+          "orange": {
+            "$value": "{color.orange.600}",
+            "$type": "color"
+          },
+          "red": {
+            "$value": "{color.red.600}",
+            "$type": "color"
+          },
+          "neutral": {
+            "$value": "{color.neutral.600}",
+            "$type": "color"
+          },
+          "magenta": {
+            "$value": "{color.magenta.600}",
+            "$type": "color"
+          },
+          "pink": {
+            "$value": "{color.pink.600}",
+            "$type": "color"
+          },
+          "aqua": {
+            "$value": "{color.aqua.500}",
+            "$type": "color"
+          },
+          "teal": {
+            "$value": "{color.teal.500}",
+            "$type": "color"
+          }
+        },
+        "ai_generated": {
+          "$value": "{color.purple.700}",
+          "$type": "color"
+        },
+        "base": {
+          "$value": "{color.neutral.200}",
+          "$type": "color"
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        }
+      },
+      "$description": "Backgrounds and borders for containers, statuses, selections, and decorative containers."
+    },
+    "gradient": {
+      "ai-stop-3": {
+        "$value": "{color.magenta.400}",
+        "$type": "color"
+      },
+      "$description": "AI gradients and their individual color stops.",
+      "ai": {
+        "$type": "string",
+        "$value": "radial-gradient(circle at bottom left, {color.blue.700} 0%, {colors.gradient.ai-stop-2} 61%, {color.magenta.400} 100%)"
+      },
+      "ai-subtle": {
+        "$type": "string",
+        "$value": "radial-gradient(circle at bottom left, color-mix(in srgb, {color.blue.700}, transparent 80%) 0%, color-mix(in srgb, {colors.gradient.ai-stop-2}, transparent 80%) 61%, color-mix(in srgb, {color.magenta.400}, transparent 80%) 100%)"
+      },
+      "ai-stop-1": {
+        "$value": "{color.blue.700}",
+        "$type": "color"
+      },
+      "ai-stop-2": {
+        "$value": "#9747ff",
+        "$description": "Theme-owned AI gradient middle stop. No exact existing seeds-color primitive; preserved for compatibility. Other stops reference seeds-color.",
+        "$type": "color"
+      }
+    },
+    "button": {
+      "primary": {
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "background": {
+          "base": {
+            "$value": "{color.blue.700}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.blue.800}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.blue.900}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        }
+      },
+      "secondary": {
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.neutral.900}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        }
+      },
+      "pill": {
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.100}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.neutral.200}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.900}",
+            "$type": "color"
+          }
+        }
+      },
+      "destructive": {
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "background": {
+          "base": {
+            "$value": "{color.red.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.red.900}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.red.1000}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        }
+      },
+      "placeholder": {
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "{color.neutral.500}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.blue.700}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.blue.800}",
+            "$type": "color"
+          }
+        }
+      },
+      "unstyled": {
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.900}",
+            "$type": "color"
+          }
+        }
+      },
+      "ai-primary": {
+        "background": {
+          "base": {
+            "$value": "{colors.gradient.ai}",
+            "$type": "string"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        }
+      },
+      "ai-secondary": {
+        "background": {
+          "base": {
+            "$value": "{colors.gradient.ai-subtle}",
+            "$type": "string"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        }
+      },
+      "ai-outline": {
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "{colors.gradient.ai}",
+            "$type": "string"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        }
+      },
+      "$description": "Background, border, and text colors for historical button variants and interaction states.",
+      "overlay": {
+        "background": {
+          "base": {
+            "$value": "color-mix(in srgb, {color.neutral.1100}, transparent 40%)",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "color-mix(in srgb, {color.neutral.1100}, transparent 25%)",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        }
+      }
+    },
+    "icon": {
+      "positive_sentiment": {
+        "$value": "{color.blue.600}",
+        "$type": "color"
+      },
+      "negative_sentiment": {
+        "$value": "{color.red.600}",
+        "$type": "color"
+      },
+      "$description": "icon colors for emphasis, feedback, sentiment, and opportunity states.",
+      "base": {
+        "$value": "{color.neutral.800}",
+        "$type": "color"
+      },
+      "inverse": {
+        "$value": "{color.neutral.0}",
+        "$type": "color"
+      },
+      "success": {
+        "$value": "{color.green.900}",
+        "$type": "color"
+      },
+      "warning": {
+        "$value": "{color.yellow.900}",
+        "$type": "color"
+      },
+      "error": {
+        "$value": "{color.red.900}",
+        "$type": "color"
+      },
+      "danger": {
+        "$value": "{color.red.900}",
+        "$type": "color"
+      },
+      "info": {
+        "$value": "{color.blue.900}",
+        "$type": "color"
+      },
+      "opportunity": {
+        "$value": "{color.purple.800}",
+        "$type": "color"
+      },
+      "applied": {
+        "$value": "{color.blue.700}",
+        "$type": "color"
+      },
+      "neutral_sentiment": {
+        "$value": "{color.neutral.600}",
+        "$type": "color"
+      }
+    },
+    "form": {
+      "border": {
+        "error": {
+          "$value": "{color.red.600}",
+          "$type": "color"
+        },
+        "warning": {
+          "$value": "{color.yellow.600}",
+          "$type": "color"
+        },
+        "base": {
+          "$value": "{color.neutral.600}",
+          "$type": "color"
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        }
+      },
+      "$description": "Background, border, and placeholder colors for form controls.",
+      "background": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        }
+      },
+      "placeholder": {
+        "base": {
+          "$value": "{color.neutral.700}",
+          "$type": "color"
+        }
+      }
+    },
+    "listItem": {
+      "background": {
+        "base": {
+          "$value": "transparent",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.neutral.100}",
+          "$type": "color"
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        },
+        "active": {
+          "$value": "{color.neutral.400}",
+          "$type": "color"
+        }
+      },
+      "border": {
+        "base": {
+          "$value": "{color.neutral.600}",
+          "$type": "color"
+        }
+      },
+      "$description": "Background and border colors for list-item interaction states."
+    },
+    "nav": {
+      "navItem": {
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        },
+        "icon": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        },
+        "indicator": {
+          "notification": {
+            "base": {
+              "$value": "{color.pink.600}",
+              "$type": "color"
+            }
+          },
+          "userStatus": {
+            "online": {
+              "$value": "{color.green.500}",
+              "$type": "color"
+            },
+            "offline": {
+              "$value": "{color.red.600}",
+              "$type": "color"
+            },
+            "unavailable": {
+              "$value": "{color.neutral.800}",
+              "$type": "color"
+            }
+          }
+        },
+        "background": {
+          "base": {
+            "$value": "transparent",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.neutral.1100}",
+            "$type": "color"
+          },
+          "selected": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "hover": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          },
+          "active": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          },
+          "selected": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          }
+        }
+      },
+      "$description": "Colors for the historical shared navigation-item API."
+    },
+    "overlay": {
+      "text": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        }
+      },
+      "icon": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        }
+      },
+      "$description": "Background and foreground colors for content displayed in overlays.",
+      "background": {
+        "base": {
+          "$value": "color-mix(in srgb, {color.neutral.1000}, transparent 44%)",
+          "$type": "color"
+        },
+        "inverse": {
+          "$value": "color-mix(in srgb, {color.neutral.0}, transparent 30%)",
+          "$type": "color"
+        }
+      }
+    },
+    "illustration": {
+      "fill": {
+        "$value": "{color.blue.400}",
+        "$type": "color"
+      },
+      "$description": "Default fill and stroke colors for illustrations.",
+      "stroke": {
+        "$value": "{color.neutral.900}",
+        "$type": "color"
+      }
+    },
+    "dataviz": {
+      "map": {
+        "1": {
+          "$value": "{color.teal.500}",
+          "$type": "color"
+        },
+        "2": {
+          "$value": "{color.purple.700}",
+          "$type": "color"
+        },
+        "3": {
+          "$value": "{color.pink.700}",
+          "$type": "color"
+        },
+        "4": {
+          "$value": "{color.yellow.500}",
+          "$type": "color"
+        },
+        "5": {
+          "$value": "{color.blue.500}",
+          "$type": "color"
+        },
+        "6": {
+          "$value": "{color.magenta.500}",
+          "$type": "color"
+        },
+        "7": {
+          "$value": "{color.green.500}",
+          "$type": "color"
+        },
+        "8": {
+          "$value": "{color.orange.500}",
+          "$type": "color"
+        },
+        "9": {
+          "$value": "{color.red.700}",
+          "$type": "color"
+        },
+        "10": {
+          "$value": "{color.teal.900}",
+          "$type": "color"
+        },
+        "11": {
+          "$value": "{color.purple.400}",
+          "$type": "color"
+        },
+        "12": {
+          "$value": "{color.pink.900}",
+          "$type": "color"
+        },
+        "13": {
+          "$value": "{color.yellow.900}",
+          "$type": "color"
+        },
+        "14": {
+          "$value": "{color.blue.900}",
+          "$type": "color"
+        },
+        "15": {
+          "$value": "{color.magenta.900}",
+          "$type": "color"
+        },
+        "16": {
+          "$value": "{color.green.900}",
+          "$type": "color"
+        },
+        "17": {
+          "$value": "{color.orange.900}",
+          "$type": "color"
+        },
+        "18": {
+          "$value": "{color.red.400}",
+          "$type": "color"
+        },
+        "19": {
+          "$value": "{color.green.700}",
+          "$type": "color"
+        },
+        "20": {
+          "$value": "{color.yellow.800}",
+          "$type": "color"
+        }
+      },
+      "list": {
+        "0": {
+          "$value": "{color.teal.500}",
+          "$type": "color"
+        },
+        "1": {
+          "$value": "{color.purple.700}",
+          "$type": "color"
+        },
+        "2": {
+          "$value": "{color.pink.700}",
+          "$type": "color"
+        },
+        "3": {
+          "$value": "{color.yellow.500}",
+          "$type": "color"
+        },
+        "4": {
+          "$value": "{color.blue.500}",
+          "$type": "color"
+        },
+        "5": {
+          "$value": "{color.magenta.500}",
+          "$type": "color"
+        },
+        "6": {
+          "$value": "{color.green.500}",
+          "$type": "color"
+        },
+        "7": {
+          "$value": "{color.orange.500}",
+          "$type": "color"
+        },
+        "8": {
+          "$value": "{color.red.700}",
+          "$type": "color"
+        },
+        "9": {
+          "$value": "{color.teal.900}",
+          "$type": "color"
+        },
+        "10": {
+          "$value": "{color.purple.400}",
+          "$type": "color"
+        },
+        "11": {
+          "$value": "{color.pink.900}",
+          "$type": "color"
+        },
+        "12": {
+          "$value": "{color.yellow.900}",
+          "$type": "color"
+        },
+        "13": {
+          "$value": "{color.blue.900}",
+          "$type": "color"
+        },
+        "14": {
+          "$value": "{color.magenta.900}",
+          "$type": "color"
+        },
+        "15": {
+          "$value": "{color.green.900}",
+          "$type": "color"
+        },
+        "16": {
+          "$value": "{color.orange.900}",
+          "$type": "color"
+        },
+        "17": {
+          "$value": "{color.red.400}",
+          "$type": "color"
+        },
+        "18": {
+          "$value": "{color.green.700}",
+          "$type": "color"
+        },
+        "19": {
+          "$value": "{color.yellow.800}",
+          "$type": "color"
+        },
+        "$extensions": {
+          "org.sproutsocial.seeds": {
+            "collection": "array"
+          }
+        }
+      },
+      "$description": "Categorical series and placeholder colors for data visualizations.",
+      "placeholder": {
+        "$value": "{color.neutral.300}",
+        "$type": "color"
+      }
+    },
+    "DATAVIZ_COLORS_LIST": {
+      "0": {
+        "$value": "{color.teal.500}",
+        "$type": "color"
+      },
+      "1": {
+        "$value": "{color.purple.700}",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "{color.pink.700}",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "{color.yellow.500}",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "{color.blue.500}",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "{color.magenta.500}",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "{color.green.500}",
+        "$type": "color"
+      },
+      "7": {
+        "$value": "{color.orange.500}",
+        "$type": "color"
+      },
+      "8": {
+        "$value": "{color.red.700}",
+        "$type": "color"
+      },
+      "9": {
+        "$value": "{color.teal.900}",
+        "$type": "color"
+      },
+      "10": {
+        "$value": "{color.purple.400}",
+        "$type": "color"
+      },
+      "11": {
+        "$value": "{color.pink.900}",
+        "$type": "color"
+      },
+      "12": {
+        "$value": "{color.yellow.900}",
+        "$type": "color"
+      },
+      "13": {
+        "$value": "{color.blue.900}",
+        "$type": "color"
+      },
+      "14": {
+        "$value": "{color.magenta.900}",
+        "$type": "color"
+      },
+      "15": {
+        "$value": "{color.green.900}",
+        "$type": "color"
+      },
+      "16": {
+        "$value": "{color.orange.900}",
+        "$type": "color"
+      },
+      "17": {
+        "$value": "{color.red.400}",
+        "$type": "color"
+      },
+      "18": {
+        "$value": "{color.green.700}",
+        "$type": "color"
+      },
+      "19": {
+        "$value": "{color.yellow.800}",
+        "$type": "color"
+      },
+      "$extensions": {
+        "org.sproutsocial.seeds": {
+          "collection": "array"
+        }
+      },
+      "$description": "Deprecated array-shaped alias of the categorical data-visualization palette."
+    },
+    "DATAVIZ_COLORS_MAP": {
+      "1": {
+        "$value": "{color.teal.500}",
+        "$type": "color"
+      },
+      "2": {
+        "$value": "{color.purple.700}",
+        "$type": "color"
+      },
+      "3": {
+        "$value": "{color.pink.700}",
+        "$type": "color"
+      },
+      "4": {
+        "$value": "{color.yellow.500}",
+        "$type": "color"
+      },
+      "5": {
+        "$value": "{color.blue.500}",
+        "$type": "color"
+      },
+      "6": {
+        "$value": "{color.magenta.500}",
+        "$type": "color"
+      },
+      "7": {
+        "$value": "{color.green.500}",
+        "$type": "color"
+      },
+      "8": {
+        "$value": "{color.orange.500}",
+        "$type": "color"
+      },
+      "9": {
+        "$value": "{color.red.700}",
+        "$type": "color"
+      },
+      "10": {
+        "$value": "{color.teal.900}",
+        "$type": "color"
+      },
+      "11": {
+        "$value": "{color.purple.400}",
+        "$type": "color"
+      },
+      "12": {
+        "$value": "{color.pink.900}",
+        "$type": "color"
+      },
+      "13": {
+        "$value": "{color.yellow.900}",
+        "$type": "color"
+      },
+      "14": {
+        "$value": "{color.blue.900}",
+        "$type": "color"
+      },
+      "15": {
+        "$value": "{color.magenta.900}",
+        "$type": "color"
+      },
+      "16": {
+        "$value": "{color.green.900}",
+        "$type": "color"
+      },
+      "17": {
+        "$value": "{color.orange.900}",
+        "$type": "color"
+      },
+      "18": {
+        "$value": "{color.red.400}",
+        "$type": "color"
+      },
+      "19": {
+        "$value": "{color.green.700}",
+        "$type": "color"
+      },
+      "20": {
+        "$value": "{color.yellow.800}",
+        "$type": "color"
+      },
+      "$description": "Deprecated keyed alias of the categorical data-visualization palette."
+    },
+    "ai": {
+      "feature": {
+        "decorative": {
+          "primary": {
+            "$value": "{color.teal.800}",
+            "$type": "color"
+          },
+          "secondary": {
+            "$value": "{color.blue.900}",
+            "$type": "color"
+          }
+        },
+        "background": {
+          "primary": {
+            "$value": "{color.teal.800}",
+            "$type": "color"
+          },
+          "secondary": {
+            "$value": "{color.blue.900}",
+            "$type": "color"
+          },
+          "default": {
+            "primary": {
+              "$value": "{color.teal.800}",
+              "$type": "color"
+            },
+            "secondary": {
+              "$value": "{color.blue.900}",
+              "$type": "color"
+            }
+          },
+          "inverse": {
+            "primary": {
+              "$value": "{color.teal.100}",
+              "$type": "color"
+            },
+            "secondary": {
+              "$value": "{color.blue.200}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "$description": "Sprout product colors for AI feature containers."
+    },
+    "navigation": {
+      "settings": {
+        "listItem": {
+          "background": {
+            "base": {
+              "$value": "transparent",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.neutral.200}",
+              "$type": "color"
+            },
+            "selected": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "text": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        }
+      },
+      "icon": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        }
+      },
+      "listItem": {
+        "background": {
+          "selected": {
+            "$value": "{color.neutral.700}",
+            "$type": "color"
+          },
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.neutral.1000}",
+            "$type": "color"
+          }
+        }
+      },
+      "$description": "Sprout product colors for main, secondary, and settings navigation.",
+      "main": {
+        "background": {
+          "base": {
+            "$value": "{color.neutral.900}",
+            "$type": "color"
+          },
+          "overflowGradient": {
+            "$value": "{color.neutral.1000}",
+            "$type": "color"
+          }
+        },
+        "border": {
+          "base": {
+            "$value": "{color.neutral.1000}",
+            "$type": "color"
+          }
+        }
+      },
+      "secondary": {
+        "background": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        },
+        "widget": {
+          "background": {
+            "base": {
+              "$value": "{color.neutral.1000}",
+              "$type": "color"
+            }
+          }
+        },
+        "accordion": {
+          "background": {
+            "base": {
+              "$value": "{color.neutral.900}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    },
+    "datePicker": {
+      "comparison": {
+        "background": {
+          "base": {
+            "$value": "{color.neutral.400}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.800}",
+            "$type": "color"
+          }
+        }
+      },
+      "$description": "Sprout product colors for date-picker comparison ranges."
+    },
+    "listening": {
+      "chart": {
+        "indicator": {
+          "hover": {
+            "secondary": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            },
+            "primary": {
+              "$value": "{color.neutral.1000}",
+              "$type": "color"
+            }
+          },
+          "default": {
+            "primary": {
+              "$value": "{color.neutral.400}",
+              "$type": "color"
+            },
+            "secondary": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            }
+          }
+        },
+        "spike": {
+          "background": {
+            "base": {
+              "$value": "{color.teal.500}",
+              "$type": "color"
+            }
+          },
+          "icon": {
+            "base": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "topicTypes": {
+        "brandHealth": {
+          "$value": "{color.red.400}",
+          "$type": "color"
+        },
+        "industryInsights": {
+          "$value": "{color.green.400}",
+          "$type": "color"
+        },
+        "competitiveAnalysis": {
+          "$value": "{color.yellow.400}",
+          "$type": "color"
+        },
+        "campaignAnalysis": {
+          "$value": "{color.magenta.400}",
+          "$type": "color"
+        },
+        "eventMonitoring": {
+          "$value": "{color.aqua.400}",
+          "$type": "color"
+        },
+        "featuredTopic": {
+          "$value": "{color.green.400}",
+          "$type": "color"
+        },
+        "customTopic": {
+          "$value": "{color.blue.400}",
+          "$type": "color"
+        }
+      },
+      "worldMap": {
+        "empty": {
+          "$value": "{color.neutral.200}",
+          "$type": "color"
+        },
+        "q0": {
+          "$value": "{color.purple.200}",
+          "$type": "color"
+        },
+        "q1": {
+          "$value": "{color.purple.300}",
+          "$type": "color"
+        },
+        "q2": {
+          "$value": "{color.purple.400}",
+          "$type": "color"
+        },
+        "q3": {
+          "$value": "{color.purple.500}",
+          "$type": "color"
+        },
+        "q4": {
+          "$value": "{color.purple.600}",
+          "$type": "color"
+        },
+        "q5": {
+          "$value": "{color.purple.700}",
+          "$type": "color"
+        },
+        "q6": {
+          "$value": "{color.purple.800}",
+          "$type": "color"
+        },
+        "q7": {
+          "$value": "{color.purple.900}",
+          "$type": "color"
+        }
+      },
+      "$description": "Sprout product colors for Listening charts, topics, and maps."
+    },
+    "growth": {
+      "carousel": {
+        "indicator": {
+          "active": {
+            "$value": "{color.blue.600}",
+            "$type": "color"
+          },
+          "inactive": {
+            "$value": "{color.neutral.300}",
+            "$type": "color"
+          }
+        }
+      },
+      "education": {
+        "decorative": {
+          "aqua": {
+            "$value": "{color.aqua.600}",
+            "$type": "color"
+          },
+          "teal": {
+            "$value": "{color.teal.700}",
+            "$type": "color"
+          }
+        }
+      },
+      "opportunity": {
+        "background": {
+          "base": {
+            "$value": "{color.purple.700}",
+            "$type": "color"
+          },
+          "secondary": {
+            "$value": "{color.neutral.900}",
+            "$type": "color"
+          },
+          "hover": {
+            "$value": "{color.purple.300}",
+            "$type": "color"
+          }
+        },
+        "decorative": {
+          "green": {
+            "$value": "{color.green.700}",
+            "$type": "color"
+          },
+          "lightAqua": {
+            "$value": "{color.aqua.600}",
+            "$type": "color"
+          },
+          "darkAqua": {
+            "$value": "{color.aqua.1100}",
+            "$type": "color"
+          },
+          "purple": {
+            "$value": "{color.purple.700}",
+            "$type": "color"
+          }
+        },
+        "button": {
+          "primary": {
+            "base": {
+              "$value": "{color.purple.700}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.purple.800}",
+              "$type": "color"
+            }
+          }
+        },
+        "badge": {
+          "background": {
+            "base": {
+              "$value": "{color.purple.200}",
+              "$type": "color"
+            },
+            "active": {
+              "$value": "{color.purple.800}",
+              "$type": "color"
+            }
+          },
+          "icon": {
+            "base": {
+              "$value": "{color.purple.700}",
+              "$type": "color"
+            },
+            "active": {
+              "$value": "{color.purple.100}",
+              "$type": "color"
+            }
+          },
+          "text": {
+            "base": {
+              "$value": "{color.purple.700}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "darkModal": {
+        "background": {
+          "base": {
+            "$value": "{color.aqua.1100}",
+            "$type": "color"
+          }
+        },
+        "text": {
+          "base": {
+            "$value": "{color.neutral.0}",
+            "$type": "color"
+          }
+        },
+        "cards": {
+          "background": {
+            "base": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.purple.100}",
+              "$type": "color"
+            }
+          },
+          "text": {
+            "base": {
+              "$value": "{color.neutral.800}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.neutral.900}",
+              "$type": "color"
+            }
+          },
+          "border": {
+            "base": {
+              "$value": "{color.neutral.0}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.purple.700}",
+              "$type": "color"
+            }
+          }
+        }
+      },
+      "user": {
+        "status": {
+          "online": {
+            "$value": "{color.green.700}",
+            "$type": "color"
+          }
+        }
+      },
+      "$description": "Sprout product colors for Growth education, opportunity, demo, and modal experiences.",
+      "featuredDemo": {
+        "background": {
+          "primary": {
+            "base": {
+              "$value": "{color.blue.700}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.blue.900}",
+              "$type": "color"
+            }
+          },
+          "secondary": {
+            "base": {
+              "$value": "{color.purple.800}",
+              "$type": "color"
+            },
+            "hover": {
+              "$value": "{color.purple.800}",
+              "$type": "color"
+            }
+          }
+        }
+      }
+    },
+    "app": {
+      "$description": "Application-level background colors.",
+      "background": {
+        "base": {
+          "$value": "{color.neutral.100}",
+          "$type": "color"
+        }
+      }
+    },
+    "link": {
+      "$description": "Text colors for links and their interaction states.",
+      "base": {
+        "$value": "{color.blue.800}",
+        "$type": "color"
+      },
+      "hover": {
+        "$value": "{color.blue.900}",
+        "$type": "color"
+      }
+    },
+    "text": {
+      "$description": "text hierarchy, feedback, decorative, highlight, and selection colors.",
+      "headline": {
+        "$value": "{color.neutral.900}",
+        "$type": "color"
+      },
+      "subtext": {
+        "$value": "{color.neutral.700}",
+        "$type": "color"
+      },
+      "body": {
+        "$value": "{color.neutral.800}",
+        "$type": "color"
+      },
+      "inverse": {
+        "$value": "{color.neutral.0}",
+        "$type": "color"
+      },
+      "error": {
+        "$value": "{color.red.900}",
+        "$type": "color"
+      },
+      "background": {
+        "highlight": {
+          "$value": "{color.yellow.200}",
+          "$type": "color"
+        },
+        "selection": {
+          "$value": "{color.blue.300}",
+          "$type": "color"
+        }
+      },
+      "decorative": {
+        "green": {
+          "$value": "{color.green.900}",
+          "$type": "color"
+        },
+        "blue": {
+          "$value": "{color.blue.900}",
+          "$type": "color"
+        },
+        "purple": {
+          "$value": "{color.purple.800}",
+          "$type": "color"
+        },
+        "yellow": {
+          "$value": "{color.yellow.900}",
+          "$type": "color"
+        },
+        "orange": {
+          "$value": "{color.orange.900}",
+          "$type": "color"
+        },
+        "red": {
+          "$value": "{color.red.900}",
+          "$type": "color"
+        },
+        "neutral": {
+          "$value": "{color.neutral.900}",
+          "$type": "color"
+        },
+        "magenta": {
+          "$value": "{color.magenta.900}",
+          "$type": "color"
+        },
+        "pink": {
+          "$value": "{color.pink.900}",
+          "$type": "color"
+        },
+        "aqua": {
+          "$value": "{color.aqua.900}",
+          "$type": "color"
+        },
+        "teal": {
+          "$value": "{color.teal.900}",
+          "$type": "color"
+        }
+      },
+      "ai_generated": {
+        "$value": "{color.neutral.900}",
+        "$type": "color"
+      }
+    },
+    "menuItem": {
+      "$description": "Background colors for menu-item interaction states.",
+      "background": {
+        "active": {
+          "$value": "{color.neutral.400}",
+          "$type": "color"
+        }
+      }
+    },
+    "elevation": {
+      "$description": "Color used by container elevation shadows.",
+      "base": {
+        "$value": "rgb(from {color.neutral.900} r g b / calc(61 / 255))",
+        "$type": "color"
+      }
+    },
+    "userStatus": {
+      "$description": "Indicator colors for user availability states.",
+      "online": {
+        "$value": "{color.green.700}",
+        "$type": "color"
+      },
+      "offline": {
+        "$value": "{color.red.600}",
+        "$type": "color"
+      },
+      "unavailable": {
+        "$value": "{color.neutral.600}",
+        "$type": "color"
+      }
+    },
+    "analytics": {
+      "$description": "Sprout product colors for Analytics trends and overlays.",
+      "trend": {
+        "positive": {
+          "$value": "{color.teal.800}",
+          "$type": "color"
+        },
+        "neutral": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        },
+        "negative": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        }
+      },
+      "overlay": {
+        "background": {
+          "base": {
+            "$value": "color-mix(in srgb, {color.neutral.0}, transparent 20%)",
+            "$type": "color"
+          }
+        }
+      }
+    },
+    "cardControl": {
+      "$description": "Sprout product colors for card-control interaction states.",
+      "background": {
+        "base": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        },
+        "selected": {
+          "$value": "{color.neutral.800}",
+          "$type": "color"
+        },
+        "hover": {
+          "$value": "{color.neutral.100}",
+          "$type": "color"
+        }
+      },
+      "text": {
+        "selected": {
+          "$value": "{color.neutral.0}",
+          "$type": "color"
+        }
+      }
+    },
+    "tags": {
+      "$description": "Sprout product colors for collection tags.",
+      "collections": {
+        "background": {
+          "base": {
+            "$value": "{color.neutral.100}",
+            "$type": "color"
+          }
+        }
+      }
+    },
+    "PLACEHOLDER": {
+      "$value": "{color.neutral.300}",
+      "$type": "color"
+    }
+  },
+  "radii": {
+    "inner": {
+      "$value": "{border.radius.500}",
+      "$type": "dimension"
+    },
+    "outer": {
+      "$value": "{border.radius.600}",
+      "$type": "dimension"
+    },
+    "pill": {
+      "$value": "{border.radius.1000}",
+      "$type": "dimension"
+    }
+  },
+  "shadows": {
+    "low": {
+      "$value": "{elevation.level.100} {colors.elevation.base}",
+      "$type": "string"
+    },
+    "medium": {
+      "$value": "{elevation.level.300} {colors.elevation.base}",
+      "$type": "string"
+    },
+    "high": {
+      "$value": "{elevation.level.400} {colors.elevation.base}",
+      "$type": "string"
+    }
+  },
+  "mode": {
+    "$type": "string",
+    "$value": "light"
+  },
+  "css": {
+    "background": {
+      "$type": "color",
+      "$value": "{colors.app.background.base}",
+      "$description": "Background CSS alias for colors.app.background.base."
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": "{colors.text.body}",
+      "$description": "Foreground CSS alias for colors.text.body."
+    },
+    "card": {
+      "$type": "color",
+      "$value": "{colors.container.background.base}",
+      "$description": "Card CSS alias for colors.container.background.base."
+    },
+    "card-foreground": {
+      "$type": "color",
+      "$value": "{colors.text.headline}",
+      "$description": "Card foreground CSS alias for colors.text.headline."
+    },
+    "popover": {
+      "$type": "color",
+      "$value": "{colors.container.background.base}",
+      "$description": "Popover CSS alias for colors.container.background.base."
+    },
+    "popover-foreground": {
+      "$type": "color",
+      "$value": "{colors.text.body}",
+      "$description": "Popover foreground CSS alias for colors.text.body."
+    },
+    "primary": {
+      "$type": "color",
+      "$value": "{colors.button.primary.background.base}",
+      "$description": "Primary CSS alias for colors.button.primary.background.base."
+    },
+    "primary-foreground": {
+      "$type": "color",
+      "$value": "{colors.button.primary.text.base}",
+      "$description": "Primary foreground CSS alias for colors.button.primary.text.base."
+    },
+    "secondary": {
+      "$type": "color",
+      "$value": "{colors.container.border.base}",
+      "$description": "Secondary CSS alias for colors.container.border.base."
+    },
+    "secondary-foreground": {
+      "$type": "color",
+      "$value": "{colors.text.body}",
+      "$description": "Secondary foreground CSS alias for colors.text.body."
+    },
+    "muted": {
+      "$type": "color",
+      "$value": "{colors.container.background.decorative.neutral}",
+      "$description": "Muted CSS alias for colors.container.background.decorative.neutral."
+    },
+    "muted-foreground": {
+      "$type": "color",
+      "$value": "{colors.text.subtext}",
+      "$description": "Muted foreground CSS alias for colors.text.subtext."
+    },
+    "accent": {
+      "$type": "color",
+      "$value": "{colors.listItem.background.hover}",
+      "$description": "Accent CSS alias for colors.listItem.background.hover."
+    },
+    "accent-foreground": {
+      "$type": "color",
+      "$value": "{colors.text.body}",
+      "$description": "Accent foreground CSS alias for colors.text.body."
+    },
+    "destructive": {
+      "$type": "color",
+      "$value": "{colors.button.destructive.background.base}",
+      "$description": "Destructive CSS alias for colors.button.destructive.background.base."
+    },
+    "destructive-foreground": {
+      "$type": "color",
+      "$value": "{colors.button.destructive.text.base}",
+      "$description": "Destructive foreground CSS alias for colors.button.destructive.text.base."
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{colors.container.border.base}",
+      "$description": "Border CSS alias for colors.container.border.base."
+    },
+    "input": {
+      "$type": "color",
+      "$value": "{colors.form.border.base}",
+      "$description": "Input CSS alias for colors.form.border.base."
+    },
+    "ring": {
+      "$type": "color",
+      "$value": "{colors.form.border.selected}",
+      "$description": "Ring CSS alias for colors.form.border.selected."
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radii.inner}",
+      "$description": "Radius CSS alias for radii.inner."
+    },
+    "sidebar": {
+      "$type": "color",
+      "$value": "{colors.navigation.main.background.base}",
+      "$description": "Sidebar CSS alias for colors.navigation.main.background.base."
+    },
+    "sidebar-foreground": {
+      "$type": "color",
+      "$value": "{colors.navigation.text.base}",
+      "$description": "Sidebar foreground CSS alias for colors.navigation.text.base."
+    },
+    "sidebar-primary": {
+      "$type": "color",
+      "$value": "{colors.navigation.listItem.background.selected}",
+      "$description": "Sidebar primary CSS alias for colors.navigation.listItem.background.selected."
+    },
+    "sidebar-primary-foreground": {
+      "$type": "color",
+      "$value": "{colors.navigation.text.base}",
+      "$description": "Sidebar primary foreground CSS alias for colors.navigation.text.base."
+    },
+    "sidebar-accent": {
+      "$type": "color",
+      "$value": "{colors.navigation.listItem.background.hover}",
+      "$description": "Sidebar accent CSS alias for colors.navigation.listItem.background.hover."
+    },
+    "sidebar-accent-foreground": {
+      "$type": "color",
+      "$value": "{colors.navigation.text.hover}",
+      "$description": "Sidebar accent foreground CSS alias for colors.navigation.text.hover."
+    },
+    "sidebar-border": {
+      "$type": "color",
+      "$value": "{colors.navigation.main.border.base}",
+      "$description": "Sidebar border CSS alias for colors.navigation.main.border.base."
+    },
+    "sidebar-ring": {
+      "$type": "color",
+      "$value": "{colors.form.border.selected}",
+      "$description": "Sidebar ring CSS alias for colors.form.border.selected."
+    },
+    "chart-1": {
+      "$type": "color",
+      "$value": "{colors.dataviz.map.1}",
+      "$description": "Chart 1 CSS alias for colors.dataviz.map.1."
+    },
+    "chart-2": {
+      "$type": "color",
+      "$value": "{colors.dataviz.map.2}",
+      "$description": "Chart 2 CSS alias for colors.dataviz.map.2."
+    },
+    "chart-3": {
+      "$type": "color",
+      "$value": "{colors.dataviz.map.3}",
+      "$description": "Chart 3 CSS alias for colors.dataviz.map.3."
+    },
+    "chart-4": {
+      "$type": "color",
+      "$value": "{colors.dataviz.map.4}",
+      "$description": "Chart 4 CSS alias for colors.dataviz.map.4."
+    },
+    "chart-5": {
+      "$type": "color",
+      "$value": "{colors.dataviz.map.5}",
+      "$description": "Chart 5 CSS alias for colors.dataviz.map.5."
+    }
+  }
+}