设计Token颜色系统：文本、边框与背景色方案

"{\n \"tokens\": {\n \"colors\": {\n \"text\": \"#333333\",\n \"muted\": \"#666666\",\n \"border\": \"#E0E0E0\",\n \"background\": \"#F5F5F5\",\n \"warning\": \"#FFD700\",\n \"alert\": \"#FF0000\",\n \"primary\": \"#1E88E5\",\n \"secondary\": \"#7E57C2\"\n },\n \"typography\": {\n \"title\": { \"fontSize\": \"20px\", \"fontWeight\": \"600\" },\n \"metricValue\": { \"fontSize\": \"24px\", \"fontWeight\": \"600\" },\n \"metricLabel\": { \"fontSize\": \"14px\", \"fontWeight\": \"400\" },\n \"caption\": { \"fontSize\": \"12px\", \"fontWeight\": \"400\" }\n },\n \"rounded\": {\n \"md\": \"8px\",\n \"full\": \"50%\"\n },\n \"spacing\": {\n \"sm\": \"8px\",\n \"md\": \"16px\",\n \"lg\": \"24px\"\n }\n },\n \"component\": \"Dashboard\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(12, 1fr)\", \"gap\": \"{spacing.lg}\" },\n \"padding\": \"{spacing.lg}\",\n \"backgroundColor\": \"{colors.background}\",\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"潮设运营数字化全景看板\",\n \"style\": {\n \"fontSize\": \"{typography.title.fontSize}\",\n \"fontWeight\": \"{typography.title.fontWeight}\",\n \"textAlign\": \"center\",\n \"gridColumn\": \"span 12\",\n \"marginBottom\": \"{spacing.md}\"\n }\n },\n {\n \"component\": \"GridRow\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(12, 1fr)\", \"gap\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"style\": { \"gridColumn\": \"span 4\" }\n },\n {\n \"component\": \"Grid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(3, 1fr)\", \"gap\": \"{spacing.sm}\" },\n \"style\": { \"gridColumn\": \"span 4\" },\n \"children\": [\n {\n \"component\": \"div\",\n \"style\": {\n \"backgroundColor\": \"{colors.background}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"textAlign\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"0.93%\",\n \"style\": {\n \"fontSize\": \"{typography.metricValue.fontSize}\",\n \"fontWeight\": \"{typography.metricValue.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"研发经费投入强度\",\n \"style\": {\n \"fontSize\": \"{typography.metricLabel.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": {\n \"backgroundColor\": \"{colors.background}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"textAlign\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"993.99\",\n \"style\": {\n \"fontSize\": \"{typography.metricValue.fontSize}\",\n \"fontWeight\": \"{typography.metricValue.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"利润总额 (万元)\",\n \"style\": {\n \"fontSize\": \"{typography.metricLabel.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": {\n \"backgroundColor\": \"{colors.background}\",\n \"borderRadius\": \"{rounded.md}\",\n \"border\": \"1px solid {colors.border}\",\n \"padding\": \"{spacing.md}\",\n \"textAlign\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"14.27%\",\n \"style\": {\n \"fontSize\": \"{typography.metricValue.fontSize}\",\n \"fontWeight\": \"{typography.metricValue.fontWeight}\",\n \"color\": \"{colors.text}\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"资产负债率\",\n \"style\": {\n \"fontSize\": \"{typography.metricLabel.fontSize}\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"Grid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(3, 1fr)\", \"gap\": \"{spacing.sm}\" },\n \"style\": { \"gridColumn\": \"span 4\" },\n \"children\": [\n {\n \"component\": \"div\",\n \"style\": { \"position\": \"relative\", \"width\": \"100%\", \"height\": \"100px\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"type\": \"ring\",\n \"style\": { \"width\": \"100%\", \"height\": \"100%\" }\n },\n {\n \"component\": \"Text\",\n \"content\": \"7456.41\",\n \"style\": {\n \"position\": \"absolute\",\n \"top\": \"50%\",\n \"left\": \"50%\",\n \"transform\": \"translate(-50%, -50%)\",\n \"fontSize\": \"16px\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"营业收入\",\n \"style\": {\n \"position\": \"absolute\",\n \"bottom\": \"10px\",\n \"width\": \"100%\",\n \"textAlign\": \"center\",\n \"fontSize\": \"12px\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": { \"position\": \"relative\", \"width\": \"100%\", \"height\": \"100px\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"type\": \"ring\",\n \"style\": { \"width\": \"100%\", \"height\": \"100%\" }\n },\n {\n \"component\": \"Text\",\n \"content\": \"7578.36\",\n \"style\": {\n \"position\": \"absolute\",\n \"top\": \"50%\",\n \"left\": \"50%\",\n \"transform\": \"translate(-50%, -50%)\",\n \"fontSize\": \"16px\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"回款金额\",\n \"style\": {\n \"position\": \"absolute\",\n \"bottom\": \"10px\",\n \"width\": \"100%\",\n \"textAlign\": \"center\",\n \"fontSize\": \"12px\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": { \"position\": \"relative\", \"width\": \"100%\", \"height\": \"100px\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"type\": \"ring\",\n \"style\": { \"width\": \"100%\", \"height\": \"100%\" }\n },\n {\n \"component\": \"Text\",\n \"content\": \"7578.36\",\n \"style\": {\n \"position\": \"absolute\",\n \"top\": \"50%\",\n \"left\": \"50%\",\n \"transform\": \"translate(-50%, -50%)\",\n \"fontSize\": \"16px\",\n \"fontWeight\": \"500\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"应收账款金额\",\n \"style\": {\n \"position\": \"absolute\",\n \"bottom\": \"10px\",\n \"width\": \"100%\",\n \"textAlign\": \"center\",\n \"fontSize\": \"12px\",\n \"color\": \"{colors.muted}\"\n }\n }\n ]\n }\n ]\n }\n ]\n },\n {\n \"component\": \"GridRow\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(12, 1fr)\", \"gap\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"style\": { \"gridColumn\": \"span 4\" }\n },\n {\n \"component\": \"ECharts\",\n \"style\": { \"gridColumn\": \"span 4\" }\n },\n {\n \"component\": \"ECharts\",\n \"style\": { \"gridColumn\": \"span 4\" }\n }\n ]\n },\n {\n \"component\": \"GridRow\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(12, 1fr)\", \"gap\": \"{spacing.md}\" },\n \"children\": [\n {\n \"component\": \"Grid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"repeat(2, 1fr)\", \"gap\": \"{spacing.md}\" },\n \"style\": { \"gridColumn\": \"span 4\" },\n \"children\": [\n {\n \"component\": \"div\",\n \"style\": {\n \"width\": \"100px\",\n \"height\": \"100px\",\n \"borderRadius\": \"{rounded.full}\",\n \"backgroundColor\": \"{colors.warning}\",\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\",\n \"justifyContent\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"200\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"bold\",\n \"color\": \"#000\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"警告\",\n \"style\": {\n \"fontSize\": \"16px\",\n \"color\": \"#000\"\n }\n }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": {\n \"width\": \"100px\",\n \"height\": \"100px\",\n \"borderRadius\": \"{rounded.full}\",\n \"backgroundColor\": \"{colors.alert}\",\n \"display\": \"flex\",\n \"flexDirection\": \"column\",\n \"alignItems\": \"center\",\n \"justifyContent\": \"center\"\n },\n \"children\": [\n {\n \"component\": \"Text\",\n \"content\": \"200\",\n \"style\": {\n \"fontSize\": \"24px\",\n \"fontWeight\": \"bold\",\n \"color\": \"#FFF\"\n }\n },\n {\n \"component\": \"Text\",\n \"content\": \"预警\",\n \"style\": {\n \"fontSize\": \"16px\",\n \"color\": \"#FFF\"\n }\n }\n ]\n }\n ]\n },\n {\n \"component\": \"ECharts\",\n \"style\": { \"gridColumn\": \"span 4\" }\n },\n {\n \"component\": \"Grid\",\n \"layout\": { \"display\": \"grid\", \"gridTemplateColumns\": \"1fr 1fr\", \"gap\": \"{spacing.sm}\" },\n \"style\": { \"gridColumn\": \"span 4\" },\n \"children\": [\n {\n \"component\": \"Table\",\n \"style\": { \"width\": \"100%\" },\n \"headers\": [\"创新研发\", \"实际\"],\n \"rows\": [\n { \"label\": \"发明专利\", \"value\": \"62\" },\n { \"label\": \"实用新型\", \"value\": \"8\" },\n { \"label\": \"外观设计\", \"value\": \"69\" },\n { \"label\": \"技术秘密\", \"value\": \"42\" }\n ]\n },\n {\n \"component\": \"div\",\n \"style\": { \"position\": \"relative\", \"width\": \"100%\", \"height\": \"150px\" },\n \"children\": [\n {\n \"component\": \"ECharts\",\n \"type\": \"pie\",\n \"style\": { \"width\": \"100%\", \"height\": \"100%\" }\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}"