设计系统Token颜色变量定义

By 13967706423, 8 May, 2026
角色
user
content

"{\n \"tokens\": {\n \"colors\": {\n \"text\": \"#111827\",\n \"muted\": \"#6B7280\",\n \"border\": \"#E5E7EB\",\n \"surface\": \"#FFFFFF\",\n \"background\": \"#F9FAFB\"\n },\n \"typography\": {\n \"title\": { \"fontSize\": \"16px\", \"fontWeight\": \"500\" },\n \"body\": { \"fontSize\": \"14px\", \"fontWeight\": \"400\" },\n \"caption\": { \"fontSize\": \"12px\", \"fontWeight\": \"400\" }\n },\n \"rounded\": {\n \"md\": \"8px\"\n },\n \"spacing\": {\n \"sm\": \"8px\",\n \"md\": \"12px\",\n \"lg\": \"16px\"\n }\n },\n \"component\": \"TravelPage\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"backgroundColor\": \"{colors.background}\" },\n \"padding\": \"{spacing.lg}\",\n \"children\": [\n {\n \"component\": \"Header\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\", \"paddingBottom\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"探索世界\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Image\",\n \"src\": \"placeholder\",\n \"width\": \"24px\",\n \"height\": \"24px\",\n \"borderRadius\": \"50%\"\n }\n ]\n },\n {\n \"component\": \"DestinationHero\",\n \"layout\": { \"marginBottom\": \"{spacing.lg}\" },\n \"children\": [\n {\n \"component\": \"Image\",\n \"src\": \"placeholder\",\n \"aspectRatio\": \"16/9\",\n \"objectFit\": \"cover\",\n \"borderRadius\": \"{rounded.md}\"\n },\n {\n \"component\": \"DestinationInfo\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.lg}\",\n \"layout\": { \"marginTop\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"东京·日本\",\n \"style\": {\n \"fontSize\": \"16px\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"2026.12.15 - 12.24\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"¥9000\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Section\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"已经走过\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\",\n \"marginBottom\": \"{spacing.sm}\"\n }\n },\n {\n \"component\": \"TravelHistoryList\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"TravelHistoryItem\",\n \"layout\": { \"display\": \"flex\", \"alignItems\": \"center\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Image\",\n \"src\": \"placeholder\",\n \"width\": \"24px\",\n \"height\": \"24px\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"台湾·高雄\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"2026.5.1 - 5.5\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"TravelHistoryItem\",\n \"layout\": { \"display\": \"flex\", \"alignItems\": \"center\", \"gap\": \"{spacing.sm}\" },\n \"children\": [\n {\n \"component\": \"Image\",\n \"src\": \"placeholder\",\n \"width\": \"24px\",\n \"height\": \"24px\"\n },\n {\n \"component\": \"Text\",\n \"content\": \"香港·湾仔区\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"2026.4.5 - 4.15\",\n \"style\": {\n \"fontSize\": \"{typography.caption.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Section\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"还想去\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"fontWeight\": \"500\",\n \"color\": \"{colors.text}\",\n \"marginBottom\": \"{spacing.sm}\",\n \"marginTop\": \"{spacing.lg}\"\n }\n },\n {\n \"component\": \"TravelWishlistList\",\n \"layout\": { \"display\": \"flex\", \"flexDirection\": \"column\", \"gap\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"TravelWishlistItem\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"山东·青岛\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"出发\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n },\n {\n \"component\": \"TravelWishlistItem\",\n \"backgroundColor\": \"{colors.surface}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"layout\": { \"display\": \"flex\", \"justifyContent\": \"space-between\", \"alignItems\": \"center\" },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"杭州·西湖\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"出发\",\n \"style\": {\n \"fontSize\": \"{typography.body.fontSize}\",\n \"color\": \"{colors.text}\"\n }\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}"

total_tokens
0
uiParsing
开启