Files
dss/admin-ui/design-tokens.json
Digital Production Factory 276ed71f31 Initial commit: Clean DSS implementation
Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved
2025-12-09 18:45:48 -03:00

243 lines
8.7 KiB
JSON

{
"$schema": "https://design-tokens.github.io/community-group/format/",
"$version": "1.0.0",
"design-system": {
"name": "DSS Admin UI",
"version": "1.0.0",
"description": "Design System Swarm - Admin UI Design Tokens"
},
"color": {
"primary": {
"$type": "color",
"$value": "hsl(220, 14%, 10%)",
"$description": "Primary brand color",
"h": { "$type": "number", "$value": 220 },
"s": { "$type": "number", "$value": "14%" },
"l": { "$type": "number", "$value": "10%" },
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
}
},
"secondary": {
"$type": "color",
"$value": "hsl(220, 9%, 46%)",
"h": { "$type": "number", "$value": 220 },
"s": { "$type": "number", "$value": "9%" },
"l": { "$type": "number", "$value": "46%" },
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
}
},
"accent": {
"$type": "color",
"$value": "hsl(220, 9%, 96%)",
"h": { "$type": "number", "$value": 220 },
"s": { "$type": "number", "$value": "9%" },
"l": { "$type": "number", "$value": "96%" },
"foreground": {
"$type": "color",
"$value": "hsl(220, 14%, 10%)"
}
},
"background": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
},
"foreground": {
"$type": "color",
"$value": "hsl(220, 14%, 10%)"
},
"surface": {
"0": { "$type": "color", "$value": "hsl(0, 0%, 100%)" },
"1": { "$type": "color", "$value": "hsl(220, 14%, 98%)" },
"2": { "$type": "color", "$value": "hsl(220, 9%, 96%)" },
"3": { "$type": "color", "$value": "hsl(220, 9%, 94%)" }
},
"muted": {
"$type": "color",
"$value": "hsl(220, 9%, 96%)",
"foreground": {
"$type": "color",
"$value": "hsl(220, 9%, 46%)"
}
},
"border": {
"$type": "color",
"$value": "hsl(220, 9%, 89%)",
"strong": {
"$type": "color",
"$value": "hsl(220, 9%, 80%)"
}
},
"state": {
"success": {
"$type": "color",
"$value": "hsl(142, 76%, 36%)",
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
}
},
"warning": {
"$type": "color",
"$value": "hsl(38, 92%, 50%)",
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 0%)"
}
},
"error": {
"$type": "color",
"$value": "hsl(0, 84%, 60%)",
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
}
},
"info": {
"$type": "color",
"$value": "hsl(199, 89%, 48%)",
"foreground": {
"$type": "color",
"$value": "hsl(0, 0%, 100%)"
}
}
},
"ring": {
"$type": "color",
"$value": "hsl(220, 14%, 10%)"
}
},
"spacing": {
"0": { "$type": "dimension", "$value": "0" },
"px": { "$type": "dimension", "$value": "1px" },
"0.5": { "$type": "dimension", "$value": "0.125rem" },
"1": { "$type": "dimension", "$value": "0.25rem" },
"1.5": { "$type": "dimension", "$value": "0.375rem" },
"2": { "$type": "dimension", "$value": "0.5rem" },
"2.5": { "$type": "dimension", "$value": "0.625rem" },
"3": { "$type": "dimension", "$value": "0.75rem" },
"3.5": { "$type": "dimension", "$value": "0.875rem" },
"4": { "$type": "dimension", "$value": "1rem" },
"5": { "$type": "dimension", "$value": "1.25rem" },
"6": { "$type": "dimension", "$value": "1.5rem" },
"7": { "$type": "dimension", "$value": "1.75rem" },
"8": { "$type": "dimension", "$value": "2rem" },
"9": { "$type": "dimension", "$value": "2.25rem" },
"10": { "$type": "dimension", "$value": "2.5rem" },
"11": { "$type": "dimension", "$value": "2.75rem" },
"12": { "$type": "dimension", "$value": "3rem" },
"14": { "$type": "dimension", "$value": "3.5rem" },
"16": { "$type": "dimension", "$value": "4rem" },
"20": { "$type": "dimension", "$value": "5rem" },
"24": { "$type": "dimension", "$value": "6rem" }
},
"font": {
"size": {
"xs": { "$type": "dimension", "$value": "0.75rem" },
"sm": { "$type": "dimension", "$value": "0.875rem" },
"base": { "$type": "dimension", "$value": "1rem" },
"lg": { "$type": "dimension", "$value": "1.125rem" },
"xl": { "$type": "dimension", "$value": "1.25rem" },
"2xl": { "$type": "dimension", "$value": "1.5rem" },
"3xl": { "$type": "dimension", "$value": "1.875rem" },
"4xl": { "$type": "dimension", "$value": "2.25rem" },
"5xl": { "$type": "dimension", "$value": "3rem" }
},
"weight": {
"thin": { "$type": "number", "$value": 100 },
"extralight": { "$type": "number", "$value": 200 },
"light": { "$type": "number", "$value": 300 },
"normal": { "$type": "number", "$value": 400 },
"medium": { "$type": "number", "$value": 500 },
"semibold": { "$type": "number", "$value": 600 },
"bold": { "$type": "number", "$value": 700 },
"extrabold": { "$type": "number", "$value": 800 },
"black": { "$type": "number", "$value": 900 }
},
"lineHeight": {
"none": { "$type": "number", "$value": 1 },
"tight": { "$type": "number", "$value": 1.25 },
"snug": { "$type": "number", "$value": 1.375 },
"normal": { "$type": "number", "$value": 1.5 },
"relaxed": { "$type": "number", "$value": 1.625 },
"loose": { "$type": "number", "$value": 2 }
},
"letterSpacing": {
"tighter": { "$type": "dimension", "$value": "-0.05em" },
"tight": { "$type": "dimension", "$value": "-0.025em" },
"normal": { "$type": "dimension", "$value": "0" },
"wide": { "$type": "dimension", "$value": "0.025em" },
"wider": { "$type": "dimension", "$value": "0.05em" },
"widest": { "$type": "dimension", "$value": "0.1em" }
},
"family": {
"sans": {
"$type": "fontFamily",
"$value": ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"]
},
"serif": {
"$type": "fontFamily",
"$value": ["Georgia", "Cambria", "Times New Roman", "Times", "serif"]
},
"mono": {
"$type": "fontFamily",
"$value": ["ui-monospace", "SFMono-Regular", "SF Mono", "Menlo", "Consolas", "Liberation Mono", "monospace"]
}
}
},
"radius": {
"none": { "$type": "dimension", "$value": "0" },
"sm": { "$type": "dimension", "$value": "0.125rem" },
"md": { "$type": "dimension", "$value": "0.375rem" },
"lg": { "$type": "dimension", "$value": "0.5rem" },
"xl": { "$type": "dimension", "$value": "0.75rem" },
"2xl": { "$type": "dimension", "$value": "1rem" },
"full": { "$type": "dimension", "$value": "9999px" }
},
"shadow": {
"xs": { "$type": "shadow", "$value": "0 1px 2px 0 rgb(0 0 0 / 0.05)" },
"sm": { "$type": "shadow", "$value": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)" },
"md": { "$type": "shadow", "$value": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)" },
"lg": { "$type": "shadow", "$value": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)" },
"xl": { "$type": "shadow", "$value": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)" },
"2xl": { "$type": "shadow", "$value": "0 25px 50px -12px rgb(0 0 0 / 0.25)" },
"inner": { "$type": "shadow", "$value": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)" },
"none": { "$type": "shadow", "$value": "0 0 #0000" }
},
"transition": {
"duration": {
"fast": { "$type": "duration", "$value": "150ms" },
"normal": { "$type": "duration", "$value": "200ms" },
"slow": { "$type": "duration", "$value": "300ms" },
"slower": { "$type": "duration", "$value": "500ms" }
},
"timing": {
"linear": { "$type": "cubicBezier", "$value": [0, 0, 1, 1] },
"in": { "$type": "cubicBezier", "$value": [0.4, 0, 1, 1] },
"out": { "$type": "cubicBezier", "$value": [0, 0, 0.2, 1] },
"inOut": { "$type": "cubicBezier", "$value": [0.4, 0, 0.2, 1] }
}
},
"zIndex": {
"0": { "$type": "number", "$value": 0 },
"10": { "$type": "number", "$value": 10 },
"20": { "$type": "number", "$value": 20 },
"30": { "$type": "number", "$value": 30 },
"40": { "$type": "number", "$value": 40 },
"50": { "$type": "number", "$value": 50 },
"auto": { "$type": "number", "$value": "auto" }
},
"app": {
"header": {
"height": { "$type": "dimension", "$value": "60px" }
},
"sidebar": {
"width": { "$type": "dimension", "$value": "240px" },
"widthTablet": { "$type": "dimension", "$value": "200px" }
}
}
}