chore: exclude generated files from git tracking
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
Some checks failed
DSS Project Analysis / dss-context-update (push) Has been cancelled
- Remove .dss/data/, .dss/components/, generated stories from tracking - Update .gitignore to exclude all runtime/generated content - Keep only reference files (.dss/config/, .dss/core/, .dss/skins/, .dss/themes/, .dss/schema/) Generated files are now created on /dss-init and not committed. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,371 +0,0 @@
|
|||||||
{
|
|
||||||
"file_key": "evCZlaeZrP7X20NIViSJbl",
|
|
||||||
"component_count": 73,
|
|
||||||
"components": [
|
|
||||||
{
|
|
||||||
"name": "Accordion Trigger",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Alert",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Alert Dialog",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Avatar",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Avatar Stack",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Badge",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Button Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Button Group Icon Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Card",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Carousel",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Carousel with Image",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Checkbox",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Checkbox Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Rich Checkbox Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Command Item",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Table Header",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Table Cell",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Date Picker",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Date Picker / Day",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Date Picker Input",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Date Picker / Header",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Dialog",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Dialog Header",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Dialog Footer",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Vertical Field",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Horizontal Field",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Icon Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input File",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input OTP",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Label",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Link Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Loading Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Pagination",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Pagination Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Progress",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Radio",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Radio Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Rich Radio Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Resizable",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Scrollbar",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Select & Combobox",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Select & Combobox Right Decoration",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Menu",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Menu Item",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Select Menu Group Label",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Select Menu Overflow",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Select Left Decoration",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Separator",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sheet",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sidebar Item / Collapsed",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sidebar Item / Expanded / 1st Level",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sidebar Item / Expanded / 2nd Level",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sidebar Group Label",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Sidebar Mini Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Slider Horizontal",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Slider Vertical",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": ".Marker",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sonner",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sonner Content",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Spinner",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Switch",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Switch Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Rich Switch Group",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Basic Table Header",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Basic Table Cell",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tab",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tabs",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Textarea",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Toggle Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Toggle Icon Button",
|
|
||||||
"classification": "primitive_component",
|
|
||||||
"variant_count": 0
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tooltip",
|
|
||||||
"classification": "composite_component",
|
|
||||||
"variant_count": 0
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,837 +0,0 @@
|
|||||||
{
|
|
||||||
"_meta": {
|
|
||||||
"description": "shadcn/ui Component Registry - All 59 components with variants and tokens",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"source": "https://ui.shadcn.com/docs/components",
|
|
||||||
"lastUpdated": "2025-12-10"
|
|
||||||
},
|
|
||||||
|
|
||||||
"components": {
|
|
||||||
"accordion": {
|
|
||||||
"name": "Accordion",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "A vertically stacked set of interactive headings that reveal content sections",
|
|
||||||
"radixPrimitive": "@radix-ui/react-accordion",
|
|
||||||
"variants": {},
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-border)",
|
|
||||||
"text": "var(--color-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"alert": {
|
|
||||||
"name": "Alert",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Displays a callout for user attention",
|
|
||||||
"variants": {
|
|
||||||
"variant": ["default", "destructive"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-border)",
|
|
||||||
"foreground": "var(--color-foreground)",
|
|
||||||
"destructive": "var(--color-destructive)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"alert-dialog": {
|
|
||||||
"name": "Alert Dialog",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "A modal dialog that interrupts user flow with important information",
|
|
||||||
"radixPrimitive": "@radix-ui/react-alert-dialog",
|
|
||||||
"tokens": {
|
|
||||||
"overlay": "var(--color-background)/80",
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"aspect-ratio": {
|
|
||||||
"name": "Aspect Ratio",
|
|
||||||
"category": "layout",
|
|
||||||
"description": "Displays content with a desired aspect ratio",
|
|
||||||
"radixPrimitive": "@radix-ui/react-aspect-ratio"
|
|
||||||
},
|
|
||||||
|
|
||||||
"avatar": {
|
|
||||||
"name": "Avatar",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "An image element with a fallback for user profile images",
|
|
||||||
"radixPrimitive": "@radix-ui/react-avatar",
|
|
||||||
"variants": {
|
|
||||||
"size": ["sm", "md", "lg"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-muted)",
|
|
||||||
"fallback": "var(--color-muted-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"badge": {
|
|
||||||
"name": "Badge",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Displays a badge or label",
|
|
||||||
"variants": {
|
|
||||||
"variant": ["default", "secondary", "destructive", "outline"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"default": {
|
|
||||||
"background": "var(--color-primary)",
|
|
||||||
"text": "var(--color-primary-foreground)"
|
|
||||||
},
|
|
||||||
"secondary": {
|
|
||||||
"background": "var(--color-secondary)",
|
|
||||||
"text": "var(--color-secondary-foreground)"
|
|
||||||
},
|
|
||||||
"destructive": {
|
|
||||||
"background": "var(--color-destructive)",
|
|
||||||
"text": "var(--color-destructive-foreground)"
|
|
||||||
},
|
|
||||||
"outline": {
|
|
||||||
"border": "var(--color-border)",
|
|
||||||
"text": "var(--color-foreground)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"breadcrumb": {
|
|
||||||
"name": "Breadcrumb",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Displays the path to the current page in a hierarchy",
|
|
||||||
"tokens": {
|
|
||||||
"text": "var(--color-muted-foreground)",
|
|
||||||
"active": "var(--color-foreground)",
|
|
||||||
"separator": "var(--color-muted-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"button": {
|
|
||||||
"name": "Button",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Displays a button or a component that looks like a button",
|
|
||||||
"variants": {
|
|
||||||
"variant": ["default", "destructive", "outline", "secondary", "ghost", "link"],
|
|
||||||
"size": ["default", "sm", "lg", "icon", "icon-sm", "icon-lg"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"default": {
|
|
||||||
"background": "var(--color-primary)",
|
|
||||||
"text": "var(--color-primary-foreground)",
|
|
||||||
"hover": "var(--color-primary)/90"
|
|
||||||
},
|
|
||||||
"destructive": {
|
|
||||||
"background": "var(--color-destructive)",
|
|
||||||
"text": "var(--color-destructive-foreground)",
|
|
||||||
"hover": "var(--color-destructive)/90"
|
|
||||||
},
|
|
||||||
"outline": {
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"hover": "var(--color-accent)"
|
|
||||||
},
|
|
||||||
"secondary": {
|
|
||||||
"background": "var(--color-secondary)",
|
|
||||||
"text": "var(--color-secondary-foreground)",
|
|
||||||
"hover": "var(--color-secondary)/80"
|
|
||||||
},
|
|
||||||
"ghost": {
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"hover": "var(--color-accent)"
|
|
||||||
},
|
|
||||||
"link": {
|
|
||||||
"text": "var(--color-primary)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"sizing": {
|
|
||||||
"default": { "height": "2.5rem", "px": "1rem", "py": "0.5rem" },
|
|
||||||
"sm": { "height": "2rem", "px": "0.75rem" },
|
|
||||||
"lg": { "height": "3rem", "px": "2rem" },
|
|
||||||
"icon": { "size": "2.5rem" },
|
|
||||||
"icon-sm": { "size": "2rem" },
|
|
||||||
"icon-lg": { "size": "2.75rem" }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"button-group": {
|
|
||||||
"name": "Button Group",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Groups multiple buttons together",
|
|
||||||
"tokens": {
|
|
||||||
"gap": "var(--spacing-1)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"calendar": {
|
|
||||||
"name": "Calendar",
|
|
||||||
"category": "form",
|
|
||||||
"description": "A date picker component with monthly/yearly views",
|
|
||||||
"dependencies": ["react-day-picker"],
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"selected": "var(--color-primary)",
|
|
||||||
"today": "var(--color-accent)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"card": {
|
|
||||||
"name": "Card",
|
|
||||||
"category": "layout",
|
|
||||||
"description": "Displays a card with header, content, and footer",
|
|
||||||
"subComponents": ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-card)",
|
|
||||||
"foreground": "var(--color-card-foreground)",
|
|
||||||
"border": "var(--color-border)",
|
|
||||||
"shadow": "var(--shadow-sm)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"carousel": {
|
|
||||||
"name": "Carousel",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "A carousel with embla-carousel",
|
|
||||||
"dependencies": ["embla-carousel-react"],
|
|
||||||
"tokens": {
|
|
||||||
"button": "var(--color-background)",
|
|
||||||
"indicator": "var(--color-muted)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"chart": {
|
|
||||||
"name": "Chart",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Beautiful charts using Recharts",
|
|
||||||
"dependencies": ["recharts"],
|
|
||||||
"tokens": {
|
|
||||||
"colors": ["var(--chart-1)", "var(--chart-2)", "var(--chart-3)", "var(--chart-4)", "var(--chart-5)"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"checkbox": {
|
|
||||||
"name": "Checkbox",
|
|
||||||
"category": "form",
|
|
||||||
"description": "A control that allows toggling between checked and unchecked",
|
|
||||||
"radixPrimitive": "@radix-ui/react-checkbox",
|
|
||||||
"tokens": {
|
|
||||||
"border": "var(--color-primary)",
|
|
||||||
"checked": "var(--color-primary)",
|
|
||||||
"checkmark": "var(--color-primary-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"collapsible": {
|
|
||||||
"name": "Collapsible",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "An interactive component that expands/collapses content",
|
|
||||||
"radixPrimitive": "@radix-ui/react-collapsible"
|
|
||||||
},
|
|
||||||
|
|
||||||
"combobox": {
|
|
||||||
"name": "Combobox",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Autocomplete input with command palette",
|
|
||||||
"composedOf": ["command", "popover"],
|
|
||||||
"tokens": {
|
|
||||||
"input": "var(--color-input)",
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"command": {
|
|
||||||
"name": "Command",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Command palette with search and filtering",
|
|
||||||
"dependencies": ["cmdk"],
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)",
|
|
||||||
"separator": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"context-menu": {
|
|
||||||
"name": "Context Menu",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Right-click context menu with keyboard support",
|
|
||||||
"radixPrimitive": "@radix-ui/react-context-menu",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)",
|
|
||||||
"hover": "var(--color-accent)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"data-table": {
|
|
||||||
"name": "Data Table",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Powerful table with sorting, filtering, pagination",
|
|
||||||
"dependencies": ["@tanstack/react-table"],
|
|
||||||
"composedOf": ["table", "dropdown-menu", "button", "input"],
|
|
||||||
"tokens": {
|
|
||||||
"header": "var(--color-muted)",
|
|
||||||
"row": "var(--color-background)",
|
|
||||||
"rowHover": "var(--color-muted)/50",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"date-picker": {
|
|
||||||
"name": "Date Picker",
|
|
||||||
"category": "form",
|
|
||||||
"description": "A date picker built with calendar and popover",
|
|
||||||
"composedOf": ["calendar", "popover", "button"],
|
|
||||||
"tokens": {
|
|
||||||
"input": "var(--color-input)",
|
|
||||||
"background": "var(--color-popover)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"dialog": {
|
|
||||||
"name": "Dialog",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "A modal dialog for content display",
|
|
||||||
"radixPrimitive": "@radix-ui/react-dialog",
|
|
||||||
"subComponents": ["DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription"],
|
|
||||||
"tokens": {
|
|
||||||
"overlay": "var(--color-background)/80",
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"drawer": {
|
|
||||||
"name": "Drawer",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "A drawer component extending dialog",
|
|
||||||
"dependencies": ["vaul"],
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"handle": "var(--color-muted)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"dropdown-menu": {
|
|
||||||
"name": "Dropdown Menu",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Menu displayed on trigger interaction",
|
|
||||||
"radixPrimitive": "@radix-ui/react-dropdown-menu",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)",
|
|
||||||
"hover": "var(--color-accent)",
|
|
||||||
"separator": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"empty": {
|
|
||||||
"name": "Empty",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Empty state display",
|
|
||||||
"tokens": {
|
|
||||||
"icon": "var(--color-muted-foreground)",
|
|
||||||
"text": "var(--color-muted-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"field": {
|
|
||||||
"name": "Field",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Form field wrapper with label and error",
|
|
||||||
"composedOf": ["label", "input"],
|
|
||||||
"tokens": {
|
|
||||||
"label": "var(--color-foreground)",
|
|
||||||
"error": "var(--color-destructive)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"form": {
|
|
||||||
"name": "Form",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Form component with react-hook-form integration",
|
|
||||||
"dependencies": ["react-hook-form", "@hookform/resolvers", "zod"],
|
|
||||||
"tokens": {
|
|
||||||
"label": "var(--color-foreground)",
|
|
||||||
"description": "var(--color-muted-foreground)",
|
|
||||||
"error": "var(--color-destructive)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"hover-card": {
|
|
||||||
"name": "Hover Card",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Content appearing on hover",
|
|
||||||
"radixPrimitive": "@radix-ui/react-hover-card",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"input": {
|
|
||||||
"name": "Input",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Text input field",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"placeholder": "var(--color-muted-foreground)",
|
|
||||||
"focus": "var(--color-ring)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"input-group": {
|
|
||||||
"name": "Input Group",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Group of inputs with addons",
|
|
||||||
"tokens": {
|
|
||||||
"addon": "var(--color-muted)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"input-otp": {
|
|
||||||
"name": "Input OTP",
|
|
||||||
"category": "form",
|
|
||||||
"description": "One-time password input",
|
|
||||||
"dependencies": ["input-otp"],
|
|
||||||
"tokens": {
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"focus": "var(--color-ring)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"item": {
|
|
||||||
"name": "Item",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Generic list item component"
|
|
||||||
},
|
|
||||||
|
|
||||||
"kbd": {
|
|
||||||
"name": "Kbd",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Keyboard key display",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-muted)",
|
|
||||||
"text": "var(--color-muted-foreground)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"label": {
|
|
||||||
"name": "Label",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Text label for form elements",
|
|
||||||
"radixPrimitive": "@radix-ui/react-label",
|
|
||||||
"tokens": {
|
|
||||||
"text": "var(--color-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"menubar": {
|
|
||||||
"name": "Menubar",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Horizontal menu with dropdowns",
|
|
||||||
"radixPrimitive": "@radix-ui/react-menubar",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"hover": "var(--color-accent)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"native-select": {
|
|
||||||
"name": "Native Select",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Native HTML select element with styling",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"text": "var(--color-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"navigation-menu": {
|
|
||||||
"name": "Navigation Menu",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Website navigation with mega menus",
|
|
||||||
"radixPrimitive": "@radix-ui/react-navigation-menu",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"hover": "var(--color-accent)",
|
|
||||||
"indicator": "var(--color-primary)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"pagination": {
|
|
||||||
"name": "Pagination",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Page navigation with previous/next",
|
|
||||||
"tokens": {
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"active": "var(--color-primary)",
|
|
||||||
"disabled": "var(--color-muted-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"popover": {
|
|
||||||
"name": "Popover",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Floating content panel",
|
|
||||||
"radixPrimitive": "@radix-ui/react-popover",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"progress": {
|
|
||||||
"name": "Progress",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Progress indicator bar",
|
|
||||||
"radixPrimitive": "@radix-ui/react-progress",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-secondary)",
|
|
||||||
"indicator": "var(--color-primary)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"radio-group": {
|
|
||||||
"name": "Radio Group",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Set of mutually exclusive options",
|
|
||||||
"radixPrimitive": "@radix-ui/react-radio-group",
|
|
||||||
"tokens": {
|
|
||||||
"border": "var(--color-primary)",
|
|
||||||
"checked": "var(--color-primary)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"resizable": {
|
|
||||||
"name": "Resizable",
|
|
||||||
"category": "layout",
|
|
||||||
"description": "Resizable panel groups",
|
|
||||||
"dependencies": ["react-resizable-panels"],
|
|
||||||
"tokens": {
|
|
||||||
"handle": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"scroll-area": {
|
|
||||||
"name": "Scroll Area",
|
|
||||||
"category": "layout",
|
|
||||||
"description": "Custom scrollbar styling",
|
|
||||||
"radixPrimitive": "@radix-ui/react-scroll-area",
|
|
||||||
"tokens": {
|
|
||||||
"thumb": "var(--color-border)",
|
|
||||||
"track": "var(--color-muted)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"select": {
|
|
||||||
"name": "Select",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Custom select dropdown",
|
|
||||||
"radixPrimitive": "@radix-ui/react-select",
|
|
||||||
"tokens": {
|
|
||||||
"trigger": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"text": "var(--color-foreground)"
|
|
||||||
},
|
|
||||||
"content": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)"
|
|
||||||
},
|
|
||||||
"item": {
|
|
||||||
"hover": "var(--color-accent)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"separator": {
|
|
||||||
"name": "Separator",
|
|
||||||
"category": "layout",
|
|
||||||
"description": "Visual divider",
|
|
||||||
"radixPrimitive": "@radix-ui/react-separator",
|
|
||||||
"variants": {
|
|
||||||
"orientation": ["horizontal", "vertical"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"color": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"sheet": {
|
|
||||||
"name": "Sheet",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Side panel overlay",
|
|
||||||
"radixPrimitive": "@radix-ui/react-dialog",
|
|
||||||
"variants": {
|
|
||||||
"side": ["top", "right", "bottom", "left"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"overlay": "var(--color-background)/80",
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"sidebar": {
|
|
||||||
"name": "Sidebar",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Application sidebar with collapsible sections",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-sidebar-background)",
|
|
||||||
"text": "var(--color-sidebar-foreground)",
|
|
||||||
"hover": "var(--color-sidebar-accent)",
|
|
||||||
"border": "var(--color-sidebar-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"skeleton": {
|
|
||||||
"name": "Skeleton",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Loading placeholder",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-muted)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"slider": {
|
|
||||||
"name": "Slider",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Range slider input",
|
|
||||||
"radixPrimitive": "@radix-ui/react-slider",
|
|
||||||
"tokens": {
|
|
||||||
"track": "var(--color-secondary)",
|
|
||||||
"range": "var(--color-primary)",
|
|
||||||
"thumb": "var(--color-background)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"sonner": {
|
|
||||||
"name": "Sonner",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Toast notifications with sonner",
|
|
||||||
"dependencies": ["sonner"],
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"spinner": {
|
|
||||||
"name": "Spinner",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Loading spinner animation",
|
|
||||||
"tokens": {
|
|
||||||
"color": "var(--color-primary)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"switch": {
|
|
||||||
"name": "Switch",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Toggle switch control",
|
|
||||||
"radixPrimitive": "@radix-ui/react-switch",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-input)",
|
|
||||||
"checked": "var(--color-primary)",
|
|
||||||
"thumb": "var(--color-background)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"table": {
|
|
||||||
"name": "Table",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Styled HTML table",
|
|
||||||
"subComponents": ["TableHeader", "TableBody", "TableFooter", "TableRow", "TableHead", "TableCell", "TableCaption"],
|
|
||||||
"tokens": {
|
|
||||||
"header": "var(--color-muted)",
|
|
||||||
"row": "var(--color-background)",
|
|
||||||
"rowHover": "var(--color-muted)/50",
|
|
||||||
"border": "var(--color-border)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"tabs": {
|
|
||||||
"name": "Tabs",
|
|
||||||
"category": "navigation",
|
|
||||||
"description": "Tabbed interface",
|
|
||||||
"radixPrimitive": "@radix-ui/react-tabs",
|
|
||||||
"tokens": {
|
|
||||||
"list": "var(--color-muted)",
|
|
||||||
"trigger": "var(--color-muted-foreground)",
|
|
||||||
"triggerActive": "var(--color-foreground)",
|
|
||||||
"content": "var(--color-background)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"textarea": {
|
|
||||||
"name": "Textarea",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Multi-line text input",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"border": "var(--color-input)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"placeholder": "var(--color-muted-foreground)",
|
|
||||||
"focus": "var(--color-ring)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"toast": {
|
|
||||||
"name": "Toast",
|
|
||||||
"category": "feedback",
|
|
||||||
"description": "Toast notification component",
|
|
||||||
"radixPrimitive": "@radix-ui/react-toast",
|
|
||||||
"variants": {
|
|
||||||
"variant": ["default", "destructive"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-background)",
|
|
||||||
"text": "var(--color-foreground)",
|
|
||||||
"border": "var(--color-border)",
|
|
||||||
"destructive": "var(--color-destructive)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"toggle": {
|
|
||||||
"name": "Toggle",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Two-state button",
|
|
||||||
"radixPrimitive": "@radix-ui/react-toggle",
|
|
||||||
"variants": {
|
|
||||||
"variant": ["default", "outline"],
|
|
||||||
"size": ["default", "sm", "lg"]
|
|
||||||
},
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-transparent)",
|
|
||||||
"hover": "var(--color-muted)",
|
|
||||||
"active": "var(--color-accent)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"toggle-group": {
|
|
||||||
"name": "Toggle Group",
|
|
||||||
"category": "form",
|
|
||||||
"description": "Group of toggle buttons",
|
|
||||||
"radixPrimitive": "@radix-ui/react-toggle-group",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-muted)",
|
|
||||||
"active": "var(--color-background)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"tooltip": {
|
|
||||||
"name": "Tooltip",
|
|
||||||
"category": "overlay",
|
|
||||||
"description": "Informative popup on hover",
|
|
||||||
"radixPrimitive": "@radix-ui/react-tooltip",
|
|
||||||
"tokens": {
|
|
||||||
"background": "var(--color-popover)",
|
|
||||||
"text": "var(--color-popover-foreground)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"typography": {
|
|
||||||
"name": "Typography",
|
|
||||||
"category": "data-display",
|
|
||||||
"description": "Text styling components",
|
|
||||||
"subComponents": ["H1", "H2", "H3", "H4", "P", "Lead", "Large", "Small", "Muted", "Blockquote", "InlineCode"],
|
|
||||||
"tokens": {
|
|
||||||
"heading": "var(--color-foreground)",
|
|
||||||
"body": "var(--color-foreground)",
|
|
||||||
"muted": "var(--color-muted-foreground)",
|
|
||||||
"code": "var(--color-foreground)"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"categories": {
|
|
||||||
"form": {
|
|
||||||
"name": "Form Components",
|
|
||||||
"description": "Input controls and form elements",
|
|
||||||
"components": ["button", "button-group", "calendar", "checkbox", "combobox", "command", "date-picker", "field", "form", "input", "input-group", "input-otp", "label", "native-select", "radio-group", "select", "slider", "switch", "textarea", "toggle", "toggle-group"]
|
|
||||||
},
|
|
||||||
"data-display": {
|
|
||||||
"name": "Data Display",
|
|
||||||
"description": "Components for displaying data",
|
|
||||||
"components": ["accordion", "avatar", "badge", "carousel", "chart", "collapsible", "data-table", "item", "kbd", "table", "typography"]
|
|
||||||
},
|
|
||||||
"feedback": {
|
|
||||||
"name": "Feedback",
|
|
||||||
"description": "User feedback components",
|
|
||||||
"components": ["alert", "empty", "progress", "skeleton", "sonner", "spinner", "toast"]
|
|
||||||
},
|
|
||||||
"navigation": {
|
|
||||||
"name": "Navigation",
|
|
||||||
"description": "Navigation components",
|
|
||||||
"components": ["breadcrumb", "menubar", "navigation-menu", "pagination", "sidebar", "tabs"]
|
|
||||||
},
|
|
||||||
"overlay": {
|
|
||||||
"name": "Overlay",
|
|
||||||
"description": "Modal and overlay components",
|
|
||||||
"components": ["alert-dialog", "context-menu", "dialog", "drawer", "dropdown-menu", "hover-card", "popover", "sheet", "tooltip"]
|
|
||||||
},
|
|
||||||
"layout": {
|
|
||||||
"name": "Layout",
|
|
||||||
"description": "Layout and structure components",
|
|
||||||
"components": ["aspect-ratio", "card", "resizable", "scroll-area", "separator"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
"dependencies": {
|
|
||||||
"core": ["class-variance-authority", "clsx", "tailwind-merge"],
|
|
||||||
"radix": [
|
|
||||||
"@radix-ui/react-accordion",
|
|
||||||
"@radix-ui/react-alert-dialog",
|
|
||||||
"@radix-ui/react-aspect-ratio",
|
|
||||||
"@radix-ui/react-avatar",
|
|
||||||
"@radix-ui/react-checkbox",
|
|
||||||
"@radix-ui/react-collapsible",
|
|
||||||
"@radix-ui/react-context-menu",
|
|
||||||
"@radix-ui/react-dialog",
|
|
||||||
"@radix-ui/react-dropdown-menu",
|
|
||||||
"@radix-ui/react-hover-card",
|
|
||||||
"@radix-ui/react-label",
|
|
||||||
"@radix-ui/react-menubar",
|
|
||||||
"@radix-ui/react-navigation-menu",
|
|
||||||
"@radix-ui/react-popover",
|
|
||||||
"@radix-ui/react-progress",
|
|
||||||
"@radix-ui/react-radio-group",
|
|
||||||
"@radix-ui/react-scroll-area",
|
|
||||||
"@radix-ui/react-select",
|
|
||||||
"@radix-ui/react-separator",
|
|
||||||
"@radix-ui/react-slider",
|
|
||||||
"@radix-ui/react-switch",
|
|
||||||
"@radix-ui/react-tabs",
|
|
||||||
"@radix-ui/react-toast",
|
|
||||||
"@radix-ui/react-toggle",
|
|
||||||
"@radix-ui/react-toggle-group",
|
|
||||||
"@radix-ui/react-tooltip"
|
|
||||||
],
|
|
||||||
"additional": [
|
|
||||||
"cmdk",
|
|
||||||
"embla-carousel-react",
|
|
||||||
"input-otp",
|
|
||||||
"react-day-picker",
|
|
||||||
"react-hook-form",
|
|
||||||
"@hookform/resolvers",
|
|
||||||
"react-resizable-panels",
|
|
||||||
"recharts",
|
|
||||||
"sonner",
|
|
||||||
"vaul",
|
|
||||||
"zod",
|
|
||||||
"@tanstack/react-table"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,30 +0,0 @@
|
|||||||
# DSS Core Structure Hashes
|
|
||||||
# Generated: 2025-12-12T07:46:35-03:00
|
|
||||||
# Source: Figma sync pipeline
|
|
||||||
# DO NOT EDIT MANUALLY
|
|
||||||
|
|
||||||
# Format: SHA256 filepath
|
|
||||||
7738ad7d749558ef8e4a9337b3d14ab851bee8b4b241037e2db0a5b33c61c79e .dss/schema/api.schema.json
|
|
||||||
e41f535f7a226d37574b880164f338388b52623ccc14af7b2013ef6ab634e318 .dss/schema/components.schema.json
|
|
||||||
aa5a73c08390433b04ec1f96288cfac573fd5397a2d51774c211db2b8876faf9 .dss/schema/guardrails.schema.json
|
|
||||||
0d168d0ec2f2c8ab373b02cc42169df45ef5f41e6575493350a5ca4ff6f9797e .dss/schema/skin-contract.json
|
|
||||||
144642ab5d7b89f73138a9176c65fe8ca05ccf9af1e25b3f9589df37c04c8d70 .dss/schema/tokens.schema.json
|
|
||||||
57a08fcb06fc9f23617875ec5a28190cae6e5a4b1c66a89072f581405b53d135 .dss/schema/workflows.schema.json
|
|
||||||
ccc17aa88f182490792a09db9676a0ff17f96a675a0386cc4a01030e0e00a626 dss-claude-plugin/core/skins/base.json
|
|
||||||
faa776ce958698f0a6a887baa65cab35cf9e9d6ded84930a3900d82f1c1eef6b dss-claude-plugin/core/skins/classic.json
|
|
||||||
cd6289fed900da096b865bf91e940ff572df868391b31e25d222c055b9e56724 dss-claude-plugin/core/skins/workbench.json
|
|
||||||
3242ccb81ca30197e78251453f4594c271afe02502204900329f03ee92a9b7a3 dss/core_tokens/tokens.json
|
|
||||||
5f53ea1f4ea459b292c95f6b0ec25bec30fe2a2517299e009633ea77dd1dc977 .dss/data/_system/analysis-admin-ui.json
|
|
||||||
5af8976bc84012bf8cba9261c354dfd4b0ab68da00c00b687d8893397ad1f07e .dss/data/_system/analysis-storybook.json
|
|
||||||
75ecdaeee10d7b0c4383f08b26384fbdf0ac381c99f89cd21ea6b3e4895e3b9d .dss/data/_system/style-dictionary.config.json
|
|
||||||
6187f0ed1785119fd6f5708be82ed1d2ca2b8160d309dbc8490d4a07ff7a7e6d .dss/data/_system/figma-components.json
|
|
||||||
f31e1c18143dd0eabac99f3a53aa5a4b3ed2b91743a035e7b7f4723fd4e25789 .dss/data/_system/components.json
|
|
||||||
891df6be8321f7dc00766fc6b95f5a9821f34e08f7e70e54d2e6dc8edab86351 .dss/data/_system/styles.json
|
|
||||||
4321119e41b6763a49d654978161b02dead66116ecca6c7f215e021cacfeeab1 .dss/data/_system/ds.config.json
|
|
||||||
b9beb00ffd505a040543051544895fd47bfc948cb39f8c7827656872ab236501 .dss/data/_system/themes/_tokens.scss
|
|
||||||
76a0bead01ab199680ec88e06e2ebc17e1962dc7bca8b288a62c3922f9d9e9a7 .dss/data/_system/themes/tokens.css
|
|
||||||
b5e5f0c1fa400c0b681caca5aacbfc9e67f44054549af3a43baddf864255b764 .dss/data/_system/themes/tokens.json
|
|
||||||
b654a964534cfd2778c4b89e0bccd2a71171d1f756481519ef7cfeffecdc9811 .dss/data/_system/tokens/figma-tokens.json
|
|
||||||
44a2427219935b46dc954b35964344fd682300dc434dfa63d4764702521dd6ae .dss/data/_system/tokens/base.json
|
|
||||||
d7db4b470e8221757c71b2b1c4ce76a8a28c20010735fc0521b2de71abeab0f4 .dss/data/_system/tokens/resolved-meta.json
|
|
||||||
9175c3bf0581b652d10704a2d85f1ec9fc68809e90850c01d9acd1d571618a6a .dss/data/_system/tokens/tokens.json
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"target":"admin-ui","analyzed_at":"2025-12-12T07:14:34-03:00","stats":{"js": 36,"css": 41,"html": 4},"status":"analyzed"}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
{"target":"storybook","analyzed_at":"2025-12-12T07:14:35-03:00","stats":{"stories": 14,"mdx": 0},"status":"analyzed"}
|
|
||||||
@@ -1,373 +0,0 @@
|
|||||||
[
|
|
||||||
{
|
|
||||||
"name": "Accordion",
|
|
||||||
"key": "842:49174",
|
|
||||||
"description": "Component page: Accordion",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Alert",
|
|
||||||
"key": "842:44439",
|
|
||||||
"description": "Component page: Alert",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Alert Dialog",
|
|
||||||
"key": "842:51942",
|
|
||||||
"description": "Component page: Alert Dialog",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Aspect Ratio",
|
|
||||||
"key": "842:52053",
|
|
||||||
"description": "Component page: Aspect Ratio",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Avatar",
|
|
||||||
"key": "842:44440",
|
|
||||||
"description": "Component page: Avatar",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Badge",
|
|
||||||
"key": "842:44441",
|
|
||||||
"description": "Component page: Badge",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Breadcrumb",
|
|
||||||
"key": "842:51940",
|
|
||||||
"description": "Component page: Breadcrumb",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Button",
|
|
||||||
"key": "842:44442",
|
|
||||||
"description": "Component page: Button",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Button Group",
|
|
||||||
"key": "842:44448",
|
|
||||||
"description": "Component page: Button Group",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Card",
|
|
||||||
"key": "842:49175",
|
|
||||||
"description": "Component page: Card",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Carousel",
|
|
||||||
"key": "842:52056",
|
|
||||||
"description": "Component page: Carousel",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Charts",
|
|
||||||
"key": "842:52058",
|
|
||||||
"description": "Component page: Charts",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Checkbox",
|
|
||||||
"key": "842:49183",
|
|
||||||
"description": "Component page: Checkbox",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Command",
|
|
||||||
"key": "842:52048",
|
|
||||||
"description": "Component page: Command",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Data Table",
|
|
||||||
"key": "842:49179",
|
|
||||||
"description": "Component page: Data Table",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Date Picker",
|
|
||||||
"key": "842:49186",
|
|
||||||
"description": "Component page: Date Picker",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Dialog",
|
|
||||||
"key": "842:51941",
|
|
||||||
"description": "Component page: Dialog",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Drawer",
|
|
||||||
"key": "842:52050",
|
|
||||||
"description": "Component page: Drawer",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Empty",
|
|
||||||
"key": "842:44451",
|
|
||||||
"description": "Component page: Empty",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Field",
|
|
||||||
"key": "842:49181",
|
|
||||||
"description": "Component page: Field",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Hover Card",
|
|
||||||
"key": "842:52051",
|
|
||||||
"description": "Component page: Hover Card",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Icon Button",
|
|
||||||
"key": "842:44443",
|
|
||||||
"description": "Component page: Icon Button",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input",
|
|
||||||
"key": "842:49172",
|
|
||||||
"description": "Component page: Input",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input File",
|
|
||||||
"key": "842:49173",
|
|
||||||
"description": "Component page: Input File",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input Group",
|
|
||||||
"key": "885:2",
|
|
||||||
"description": "Component page: Input Group",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Input OTP",
|
|
||||||
"key": "842:49177",
|
|
||||||
"description": "Component page: Input OTP",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Item",
|
|
||||||
"key": "885:3081",
|
|
||||||
"description": "Component page: Item",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Kbd",
|
|
||||||
"key": "842:49171",
|
|
||||||
"description": "Component page: Kbd",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Label",
|
|
||||||
"key": "842:49170",
|
|
||||||
"description": "Component page: Label",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Link Button",
|
|
||||||
"key": "842:44446",
|
|
||||||
"description": "Component page: Link Button",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Loading Button",
|
|
||||||
"key": "842:44444",
|
|
||||||
"description": "Component page: Loading Button",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Navigation Menu",
|
|
||||||
"key": "842:51938",
|
|
||||||
"description": "Component page: Navigation Menu",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Pagination",
|
|
||||||
"key": "842:51939",
|
|
||||||
"description": "Component page: Pagination",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Progress",
|
|
||||||
"key": "842:49187",
|
|
||||||
"description": "Component page: Progress",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Radio",
|
|
||||||
"key": "842:49182",
|
|
||||||
"description": "Component page: Radio",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Resizable",
|
|
||||||
"key": "842:52055",
|
|
||||||
"description": "Component page: Resizable",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Scroll Area",
|
|
||||||
"key": "842:52054",
|
|
||||||
"description": "Component page: Scroll Area",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Select & Combobox",
|
|
||||||
"key": "842:49185",
|
|
||||||
"description": "Component page: Select & Combobox",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Separator",
|
|
||||||
"key": "842:49137",
|
|
||||||
"description": "Component page: Separator",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sheet",
|
|
||||||
"key": "842:52049",
|
|
||||||
"description": "Component page: Sheet",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sidebar",
|
|
||||||
"key": "842:51929",
|
|
||||||
"description": "Component page: Sidebar",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Skeleton",
|
|
||||||
"key": "842:52052",
|
|
||||||
"description": "Component page: Skeleton",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Slider",
|
|
||||||
"key": "842:49188",
|
|
||||||
"description": "Component page: Slider",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Sonner",
|
|
||||||
"key": "842:51943",
|
|
||||||
"description": "Component page: Sonner",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Spinner",
|
|
||||||
"key": "842:44445",
|
|
||||||
"description": "Component page: Spinner",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Switch",
|
|
||||||
"key": "842:49184",
|
|
||||||
"description": "Component page: Switch",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Table",
|
|
||||||
"key": "842:49176",
|
|
||||||
"description": "Component page: Table",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tabs",
|
|
||||||
"key": "842:50580",
|
|
||||||
"description": "Component page: Tabs",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Textarea",
|
|
||||||
"key": "842:49180",
|
|
||||||
"description": "Component page: Textarea",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Toggle & Toggle Group",
|
|
||||||
"key": "842:44447",
|
|
||||||
"description": "Component page: Toggle & Toggle Group",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Tooltip",
|
|
||||||
"key": "842:44449",
|
|
||||||
"description": "Component page: Tooltip",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Screen examples",
|
|
||||||
"key": "683:34149",
|
|
||||||
"description": "Component page: Screen examples",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "Internal Components",
|
|
||||||
"key": "842:44452",
|
|
||||||
"description": "Component page: Internal Components",
|
|
||||||
"properties": {},
|
|
||||||
"variants": []
|
|
||||||
}
|
|
||||||
]
|
|
||||||
@@ -1,33 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "dss-system",
|
|
||||||
"version": "1.0.0",
|
|
||||||
"description": "DSS internal design system (dogfooding)",
|
|
||||||
"skin": "base",
|
|
||||||
"base_theme": "light",
|
|
||||||
"targets": [
|
|
||||||
{
|
|
||||||
"name": "admin-ui",
|
|
||||||
"path": "./admin-ui",
|
|
||||||
"type": "web-app",
|
|
||||||
"framework": "vanilla"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "storybook",
|
|
||||||
"path": "./storybook",
|
|
||||||
"type": "documentation",
|
|
||||||
"framework": "storybook"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"output": {
|
|
||||||
"tokens_dir": "./.dss/data/_system/tokens",
|
|
||||||
"themes_dir": "./.dss/data/_system/themes",
|
|
||||||
"components_dir": "./.dss/data/_system/components",
|
|
||||||
"formats": ["css", "scss", "json"]
|
|
||||||
},
|
|
||||||
"figma": {
|
|
||||||
"files": [],
|
|
||||||
"auto_sync": false
|
|
||||||
},
|
|
||||||
"created_at": "$(date -Iseconds)",
|
|
||||||
"updated_at": "$(date -Iseconds)"
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,20 +0,0 @@
|
|||||||
{
|
|
||||||
"source": ["tokens/tokens.json"],
|
|
||||||
"platforms": {
|
|
||||||
"css": {
|
|
||||||
"transformGroup": "css",
|
|
||||||
"buildPath": "themes/",
|
|
||||||
"files": [{"destination": "tokens.css", "format": "css/variables"}]
|
|
||||||
},
|
|
||||||
"scss": {
|
|
||||||
"transformGroup": "scss",
|
|
||||||
"buildPath": "themes/",
|
|
||||||
"files": [{"destination": "_tokens.scss", "format": "scss/variables"}]
|
|
||||||
},
|
|
||||||
"json": {
|
|
||||||
"transformGroup": "js",
|
|
||||||
"buildPath": "themes/",
|
|
||||||
"files": [{"destination": "tokens.json", "format": "json/flat"}]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,408 +0,0 @@
|
|||||||
{
|
|
||||||
"all": [
|
|
||||||
{
|
|
||||||
"name": "heading 1",
|
|
||||||
"key": "6:83",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 2",
|
|
||||||
"key": "6:84",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "7:129",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/bold",
|
|
||||||
"key": "22:7579",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 3",
|
|
||||||
"key": "6:85",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/bold",
|
|
||||||
"key": "22:7578",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/regular",
|
|
||||||
"key": "6:87",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/regular",
|
|
||||||
"key": "19:5809",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 4",
|
|
||||||
"key": "6:86",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "monospaced",
|
|
||||||
"key": "199:32930",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/medium",
|
|
||||||
"key": "869:27329",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/medium",
|
|
||||||
"key": "869:27330",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/bold",
|
|
||||||
"key": "22:9520",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/medium",
|
|
||||||
"key": "869:27331",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-sm",
|
|
||||||
"key": "9:772",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-lg",
|
|
||||||
"key": "14:1579",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-2xs",
|
|
||||||
"key": "16:1667",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xs",
|
|
||||||
"key": "16:1668",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-md",
|
|
||||||
"key": "16:1669",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xl",
|
|
||||||
"key": "16:1670",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-2xl",
|
|
||||||
"key": "16:1671",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring",
|
|
||||||
"key": "147:11610",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring error",
|
|
||||||
"key": "176:25107",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring sidebar",
|
|
||||||
"key": "653:49231",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/medium",
|
|
||||||
"key": "363:28805",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "363:28952",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/bold",
|
|
||||||
"key": "862:71716",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/bold",
|
|
||||||
"key": "862:71791",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/regular",
|
|
||||||
"key": "862:73098",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xs",
|
|
||||||
"key": "862:73052",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/bold",
|
|
||||||
"key": "862:73054",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "862:71752",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-sm",
|
|
||||||
"key": "862:71996",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"by_type": {
|
|
||||||
"TEXT": [
|
|
||||||
{
|
|
||||||
"name": "heading 1",
|
|
||||||
"key": "6:83",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 2",
|
|
||||||
"key": "6:84",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "7:129",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/bold",
|
|
||||||
"key": "22:7579",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 3",
|
|
||||||
"key": "6:85",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/bold",
|
|
||||||
"key": "22:7578",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/regular",
|
|
||||||
"key": "6:87",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/regular",
|
|
||||||
"key": "19:5809",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "heading 4",
|
|
||||||
"key": "6:86",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "monospaced",
|
|
||||||
"key": "199:32930",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/medium",
|
|
||||||
"key": "869:27329",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/medium",
|
|
||||||
"key": "869:27330",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/bold",
|
|
||||||
"key": "22:9520",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/medium",
|
|
||||||
"key": "869:27331",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/medium",
|
|
||||||
"key": "363:28805",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "363:28952",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph/bold",
|
|
||||||
"key": "862:71716",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/bold",
|
|
||||||
"key": "862:71791",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph mini/regular",
|
|
||||||
"key": "862:73098",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/bold",
|
|
||||||
"key": "862:73054",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "paragraph small/regular",
|
|
||||||
"key": "862:71752",
|
|
||||||
"type": "TEXT",
|
|
||||||
"properties": {}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"FILL": [],
|
|
||||||
"EFFECT": [
|
|
||||||
{
|
|
||||||
"name": "shadow-sm",
|
|
||||||
"key": "9:772",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-lg",
|
|
||||||
"key": "14:1579",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-2xs",
|
|
||||||
"key": "16:1667",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xs",
|
|
||||||
"key": "16:1668",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-md",
|
|
||||||
"key": "16:1669",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xl",
|
|
||||||
"key": "16:1670",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-2xl",
|
|
||||||
"key": "16:1671",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring",
|
|
||||||
"key": "147:11610",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring error",
|
|
||||||
"key": "176:25107",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "focus ring sidebar",
|
|
||||||
"key": "653:49231",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-xs",
|
|
||||||
"key": "862:73052",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"name": "shadow-sm",
|
|
||||||
"key": "862:71996",
|
|
||||||
"type": "EFFECT",
|
|
||||||
"properties": {}
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"GRID": []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
|
|
||||||
// Do not edit directly, this file was auto-generated.
|
|
||||||
|
|
||||||
$color-background: #ffffff;
|
|
||||||
$color-foreground: #09090b;
|
|
||||||
$color-card: #ffffff;
|
|
||||||
$color-card-foreground: #09090b;
|
|
||||||
$color-popover: #ffffff;
|
|
||||||
$color-popover-foreground: #09090b;
|
|
||||||
$color-primary: #18181b; // zinc-900 - brand primary
|
|
||||||
$color-primary-foreground: #fafafa; // zinc-50
|
|
||||||
$color-secondary: #f4f4f5;
|
|
||||||
$color-secondary-foreground: #18181b;
|
|
||||||
$color-muted: #f4f4f5;
|
|
||||||
$color-muted-foreground: #71717a;
|
|
||||||
$color-accent: #f4f4f5;
|
|
||||||
$color-accent-foreground: #18181b;
|
|
||||||
$color-destructive: #ef4444;
|
|
||||||
$color-destructive-foreground: #fafafa;
|
|
||||||
$color-border: #e4e4e7;
|
|
||||||
$color-input: #e4e4e7;
|
|
||||||
$color-ring: #18181b; // matches primary
|
|
||||||
$color-dark-background: #09090b;
|
|
||||||
$color-dark-foreground: #fafafa;
|
|
||||||
$color-dark-card: #09090b;
|
|
||||||
$color-dark-card-foreground: #fafafa;
|
|
||||||
$color-dark-popover: #09090b;
|
|
||||||
$color-dark-popover-foreground: #fafafa;
|
|
||||||
$color-dark-primary: #fafafa;
|
|
||||||
$color-dark-primary-foreground: #18181b;
|
|
||||||
$color-dark-secondary: #27272a;
|
|
||||||
$color-dark-secondary-foreground: #fafafa;
|
|
||||||
$color-dark-muted: #27272a;
|
|
||||||
$color-dark-muted-foreground: #a1a1aa;
|
|
||||||
$color-dark-accent: #27272a;
|
|
||||||
$color-dark-accent-foreground: #fafafa;
|
|
||||||
$color-dark-destructive: #7f1d1d;
|
|
||||||
$color-dark-destructive-foreground: #fafafa;
|
|
||||||
$color-dark-border: #27272a;
|
|
||||||
$color-dark-input: #27272a;
|
|
||||||
$color-dark-ring: #d4d4d8;
|
|
||||||
$radius-sm: 0.125rem;
|
|
||||||
$radius-md: 0.375rem;
|
|
||||||
$radius-lg: 0.5rem; // default border radius for cards
|
|
||||||
$radius-xl: 0.75rem;
|
|
||||||
$radius-full: 9999px;
|
|
||||||
$effect-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
$effect-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
$effect-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
||||||
$effect-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
||||||
$effect-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
||||||
$effect-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
$effect-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
|
||||||
$spacing-0: 0;
|
|
||||||
$spacing-1: 0.25rem;
|
|
||||||
$spacing-2: 0.5rem;
|
|
||||||
$spacing-3: 0.75rem;
|
|
||||||
$spacing-4: 1rem;
|
|
||||||
$spacing-5: 1.25rem;
|
|
||||||
$spacing-6: 1.5rem;
|
|
||||||
$spacing-8: 2rem;
|
|
||||||
$spacing-10: 2.5rem;
|
|
||||||
$spacing-12: 3rem;
|
|
||||||
$spacing-16: 4rem;
|
|
||||||
$typography-heading-1-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-heading-1-font-weight: 700;
|
|
||||||
$typography-heading-1-font-size: 3rem;
|
|
||||||
$typography-heading-1-line-height: 1;
|
|
||||||
$typography-heading-1-letter-spacing: -0.025em;
|
|
||||||
$typography-heading-2-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-heading-2-font-weight: 600;
|
|
||||||
$typography-heading-2-font-size: 1.875rem;
|
|
||||||
$typography-heading-2-line-height: 1.2;
|
|
||||||
$typography-heading-2-letter-spacing: -0.025em;
|
|
||||||
$typography-heading-3-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-heading-3-font-weight: 600;
|
|
||||||
$typography-heading-3-font-size: 1.5rem;
|
|
||||||
$typography-heading-3-line-height: 1.3;
|
|
||||||
$typography-heading-3-letter-spacing: -0.025em;
|
|
||||||
$typography-heading-4-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-heading-4-font-weight: 600;
|
|
||||||
$typography-heading-4-font-size: 1.25rem;
|
|
||||||
$typography-heading-4-line-height: 1.4;
|
|
||||||
$typography-heading-4-letter-spacing: 0;
|
|
||||||
$typography-paragraph-regular-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-paragraph-regular-font-weight: 400;
|
|
||||||
$typography-paragraph-regular-font-size: 1rem;
|
|
||||||
$typography-paragraph-regular-line-height: 1.5;
|
|
||||||
$typography-paragraph-regular-letter-spacing: 0;
|
|
||||||
$typography-paragraph-bold-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-paragraph-bold-font-weight: 500;
|
|
||||||
$typography-paragraph-bold-font-size: 1rem;
|
|
||||||
$typography-paragraph-bold-line-height: 1.5;
|
|
||||||
$typography-paragraph-bold-letter-spacing: 0;
|
|
||||||
$typography-paragraph-small-regular-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
$typography-paragraph-small-regular-font-weight: 400;
|
|
||||||
$typography-paragraph-small-regular-font-size: 0.875rem;
|
|
||||||
$typography-paragraph-small-regular-line-height: 1.5;
|
|
||||||
$typography-paragraph-small-regular-letter-spacing: 0;
|
|
||||||
@@ -1,102 +0,0 @@
|
|||||||
/**
|
|
||||||
* Do not edit directly, this file was auto-generated.
|
|
||||||
*/
|
|
||||||
|
|
||||||
:root {
|
|
||||||
--color-background: #ffffff;
|
|
||||||
--color-foreground: #09090b;
|
|
||||||
--color-card: #ffffff;
|
|
||||||
--color-card-foreground: #09090b;
|
|
||||||
--color-popover: #ffffff;
|
|
||||||
--color-popover-foreground: #09090b;
|
|
||||||
--color-primary: #18181b; /** zinc-900 - brand primary */
|
|
||||||
--color-primary-foreground: #fafafa; /** zinc-50 */
|
|
||||||
--color-secondary: #f4f4f5;
|
|
||||||
--color-secondary-foreground: #18181b;
|
|
||||||
--color-muted: #f4f4f5;
|
|
||||||
--color-muted-foreground: #71717a;
|
|
||||||
--color-accent: #f4f4f5;
|
|
||||||
--color-accent-foreground: #18181b;
|
|
||||||
--color-destructive: #ef4444;
|
|
||||||
--color-destructive-foreground: #fafafa;
|
|
||||||
--color-border: #e4e4e7;
|
|
||||||
--color-input: #e4e4e7;
|
|
||||||
--color-ring: #18181b; /** matches primary */
|
|
||||||
--color-dark-background: #09090b;
|
|
||||||
--color-dark-foreground: #fafafa;
|
|
||||||
--color-dark-card: #09090b;
|
|
||||||
--color-dark-card-foreground: #fafafa;
|
|
||||||
--color-dark-popover: #09090b;
|
|
||||||
--color-dark-popover-foreground: #fafafa;
|
|
||||||
--color-dark-primary: #fafafa;
|
|
||||||
--color-dark-primary-foreground: #18181b;
|
|
||||||
--color-dark-secondary: #27272a;
|
|
||||||
--color-dark-secondary-foreground: #fafafa;
|
|
||||||
--color-dark-muted: #27272a;
|
|
||||||
--color-dark-muted-foreground: #a1a1aa;
|
|
||||||
--color-dark-accent: #27272a;
|
|
||||||
--color-dark-accent-foreground: #fafafa;
|
|
||||||
--color-dark-destructive: #7f1d1d;
|
|
||||||
--color-dark-destructive-foreground: #fafafa;
|
|
||||||
--color-dark-border: #27272a;
|
|
||||||
--color-dark-input: #27272a;
|
|
||||||
--color-dark-ring: #d4d4d8;
|
|
||||||
--radius-sm: 0.125rem;
|
|
||||||
--radius-md: 0.375rem;
|
|
||||||
--radius-lg: 0.5rem; /** default border radius for cards */
|
|
||||||
--radius-xl: 0.75rem;
|
|
||||||
--radius-full: 9999px;
|
|
||||||
--effect-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
||||||
--effect-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
||||||
--effect-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
||||||
--effect-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
||||||
--effect-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
||||||
--effect-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
||||||
--effect-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
|
||||||
--spacing-0: 0;
|
|
||||||
--spacing-1: 0.25rem;
|
|
||||||
--spacing-2: 0.5rem;
|
|
||||||
--spacing-3: 0.75rem;
|
|
||||||
--spacing-4: 1rem;
|
|
||||||
--spacing-5: 1.25rem;
|
|
||||||
--spacing-6: 1.5rem;
|
|
||||||
--spacing-8: 2rem;
|
|
||||||
--spacing-10: 2.5rem;
|
|
||||||
--spacing-12: 3rem;
|
|
||||||
--spacing-16: 4rem;
|
|
||||||
--typography-heading-1-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-heading-1-font-weight: 700;
|
|
||||||
--typography-heading-1-font-size: 3rem;
|
|
||||||
--typography-heading-1-line-height: 1;
|
|
||||||
--typography-heading-1-letter-spacing: -0.025em;
|
|
||||||
--typography-heading-2-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-heading-2-font-weight: 600;
|
|
||||||
--typography-heading-2-font-size: 1.875rem;
|
|
||||||
--typography-heading-2-line-height: 1.2;
|
|
||||||
--typography-heading-2-letter-spacing: -0.025em;
|
|
||||||
--typography-heading-3-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-heading-3-font-weight: 600;
|
|
||||||
--typography-heading-3-font-size: 1.5rem;
|
|
||||||
--typography-heading-3-line-height: 1.3;
|
|
||||||
--typography-heading-3-letter-spacing: -0.025em;
|
|
||||||
--typography-heading-4-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-heading-4-font-weight: 600;
|
|
||||||
--typography-heading-4-font-size: 1.25rem;
|
|
||||||
--typography-heading-4-line-height: 1.4;
|
|
||||||
--typography-heading-4-letter-spacing: 0;
|
|
||||||
--typography-paragraph-regular-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-paragraph-regular-font-weight: 400;
|
|
||||||
--typography-paragraph-regular-font-size: 1rem;
|
|
||||||
--typography-paragraph-regular-line-height: 1.5;
|
|
||||||
--typography-paragraph-regular-letter-spacing: 0;
|
|
||||||
--typography-paragraph-bold-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-paragraph-bold-font-weight: 500;
|
|
||||||
--typography-paragraph-bold-font-size: 1rem;
|
|
||||||
--typography-paragraph-bold-line-height: 1.5;
|
|
||||||
--typography-paragraph-bold-letter-spacing: 0;
|
|
||||||
--typography-paragraph-small-regular-font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
|
||||||
--typography-paragraph-small-regular-font-weight: 400;
|
|
||||||
--typography-paragraph-small-regular-font-size: 0.875rem;
|
|
||||||
--typography-paragraph-small-regular-line-height: 1.5;
|
|
||||||
--typography-paragraph-small-regular-letter-spacing: 0;
|
|
||||||
}
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
{
|
|
||||||
"ColorBackground": "#ffffff",
|
|
||||||
"ColorForeground": "#09090b",
|
|
||||||
"ColorCard": "#ffffff",
|
|
||||||
"ColorCardForeground": "#09090b",
|
|
||||||
"ColorPopover": "#ffffff",
|
|
||||||
"ColorPopoverForeground": "#09090b",
|
|
||||||
"ColorPrimary": "#18181b",
|
|
||||||
"ColorPrimaryForeground": "#fafafa",
|
|
||||||
"ColorSecondary": "#f4f4f5",
|
|
||||||
"ColorSecondaryForeground": "#18181b",
|
|
||||||
"ColorMuted": "#f4f4f5",
|
|
||||||
"ColorMutedForeground": "#71717a",
|
|
||||||
"ColorAccent": "#f4f4f5",
|
|
||||||
"ColorAccentForeground": "#18181b",
|
|
||||||
"ColorDestructive": "#ef4444",
|
|
||||||
"ColorDestructiveForeground": "#fafafa",
|
|
||||||
"ColorBorder": "#e4e4e7",
|
|
||||||
"ColorInput": "#e4e4e7",
|
|
||||||
"ColorRing": "#18181b",
|
|
||||||
"ColorDarkBackground": "#09090b",
|
|
||||||
"ColorDarkForeground": "#fafafa",
|
|
||||||
"ColorDarkCard": "#09090b",
|
|
||||||
"ColorDarkCardForeground": "#fafafa",
|
|
||||||
"ColorDarkPopover": "#09090b",
|
|
||||||
"ColorDarkPopoverForeground": "#fafafa",
|
|
||||||
"ColorDarkPrimary": "#fafafa",
|
|
||||||
"ColorDarkPrimaryForeground": "#18181b",
|
|
||||||
"ColorDarkSecondary": "#27272a",
|
|
||||||
"ColorDarkSecondaryForeground": "#fafafa",
|
|
||||||
"ColorDarkMuted": "#27272a",
|
|
||||||
"ColorDarkMutedForeground": "#a1a1aa",
|
|
||||||
"ColorDarkAccent": "#27272a",
|
|
||||||
"ColorDarkAccentForeground": "#fafafa",
|
|
||||||
"ColorDarkDestructive": "#7f1d1d",
|
|
||||||
"ColorDarkDestructiveForeground": "#fafafa",
|
|
||||||
"ColorDarkBorder": "#27272a",
|
|
||||||
"ColorDarkInput": "#27272a",
|
|
||||||
"ColorDarkRing": "#d4d4d8",
|
|
||||||
"RadiusSm": "0.125rem",
|
|
||||||
"RadiusMd": "0.375rem",
|
|
||||||
"RadiusLg": "0.5rem",
|
|
||||||
"RadiusXl": "0.75rem",
|
|
||||||
"RadiusFull": "9999px",
|
|
||||||
"EffectShadowXs": "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
|
|
||||||
"EffectShadowSm": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
|
|
||||||
"EffectShadowMd": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
|
||||||
"EffectShadowLg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
|
|
||||||
"EffectShadowXl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
|
|
||||||
"EffectShadow2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
|
|
||||||
"EffectFocusRing": "0 0 0 3px rgba(59, 130, 246, 0.5)",
|
|
||||||
"Spacing0": "0",
|
|
||||||
"Spacing1": "0.25rem",
|
|
||||||
"Spacing2": "0.5rem",
|
|
||||||
"Spacing3": "0.75rem",
|
|
||||||
"Spacing4": "1rem",
|
|
||||||
"Spacing5": "1.25rem",
|
|
||||||
"Spacing6": "1.5rem",
|
|
||||||
"Spacing8": "2rem",
|
|
||||||
"Spacing10": "2.5rem",
|
|
||||||
"Spacing12": "3rem",
|
|
||||||
"Spacing16": "4rem",
|
|
||||||
"TypographyHeading1FontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyHeading1FontWeight": "700",
|
|
||||||
"TypographyHeading1FontSize": "3rem",
|
|
||||||
"TypographyHeading1LineHeight": "1",
|
|
||||||
"TypographyHeading1LetterSpacing": "-0.025em",
|
|
||||||
"TypographyHeading2FontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyHeading2FontWeight": "600",
|
|
||||||
"TypographyHeading2FontSize": "1.875rem",
|
|
||||||
"TypographyHeading2LineHeight": "1.2",
|
|
||||||
"TypographyHeading2LetterSpacing": "-0.025em",
|
|
||||||
"TypographyHeading3FontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyHeading3FontWeight": "600",
|
|
||||||
"TypographyHeading3FontSize": "1.5rem",
|
|
||||||
"TypographyHeading3LineHeight": "1.3",
|
|
||||||
"TypographyHeading3LetterSpacing": "-0.025em",
|
|
||||||
"TypographyHeading4FontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyHeading4FontWeight": "600",
|
|
||||||
"TypographyHeading4FontSize": "1.25rem",
|
|
||||||
"TypographyHeading4LineHeight": "1.4",
|
|
||||||
"TypographyHeading4LetterSpacing": "0",
|
|
||||||
"TypographyParagraphRegularFontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyParagraphRegularFontWeight": "400",
|
|
||||||
"TypographyParagraphRegularFontSize": "1rem",
|
|
||||||
"TypographyParagraphRegularLineHeight": "1.5",
|
|
||||||
"TypographyParagraphRegularLetterSpacing": "0",
|
|
||||||
"TypographyParagraphBoldFontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyParagraphBoldFontWeight": "500",
|
|
||||||
"TypographyParagraphBoldFontSize": "1rem",
|
|
||||||
"TypographyParagraphBoldLineHeight": "1.5",
|
|
||||||
"TypographyParagraphBoldLetterSpacing": "0",
|
|
||||||
"TypographyParagraphSmallRegularFontFamily": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
|
||||||
"TypographyParagraphSmallRegularFontWeight": "400",
|
|
||||||
"TypographyParagraphSmallRegularFontSize": "0.875rem",
|
|
||||||
"TypographyParagraphSmallRegularLineHeight": "1.5",
|
|
||||||
"TypographyParagraphSmallRegularLetterSpacing": "0"
|
|
||||||
}
|
|
||||||
@@ -1,4 +0,0 @@
|
|||||||
{
|
|
||||||
"_meta": {"version": "1.0.0", "status": "empty"},
|
|
||||||
"tokens": {}
|
|
||||||
}
|
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -1,11 +0,0 @@
|
|||||||
{
|
|
||||||
"resolved_at": "2025-12-12T07:46:34.899061",
|
|
||||||
"skin": "shadcn",
|
|
||||||
"theme": "default",
|
|
||||||
"token_count": 68,
|
|
||||||
"layers": [
|
|
||||||
"core/primitives",
|
|
||||||
"skins/shadcn",
|
|
||||||
"themes/default"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,320 +0,0 @@
|
|||||||
{
|
|
||||||
"color": {
|
|
||||||
"background": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"foreground": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"card": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"card-foreground": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"popover": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"popover-foreground": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"primary": {
|
|
||||||
"value": "#18181b",
|
|
||||||
"comment": "zinc-900 - brand primary"
|
|
||||||
},
|
|
||||||
"primary-foreground": {
|
|
||||||
"value": "#fafafa",
|
|
||||||
"comment": "zinc-50"
|
|
||||||
},
|
|
||||||
"secondary": {
|
|
||||||
"value": "#f4f4f5"
|
|
||||||
},
|
|
||||||
"secondary-foreground": {
|
|
||||||
"value": "#18181b"
|
|
||||||
},
|
|
||||||
"muted": {
|
|
||||||
"value": "#f4f4f5"
|
|
||||||
},
|
|
||||||
"muted-foreground": {
|
|
||||||
"value": "#71717a"
|
|
||||||
},
|
|
||||||
"accent": {
|
|
||||||
"value": "#f4f4f5"
|
|
||||||
},
|
|
||||||
"accent-foreground": {
|
|
||||||
"value": "#18181b"
|
|
||||||
},
|
|
||||||
"destructive": {
|
|
||||||
"value": "#ef4444"
|
|
||||||
},
|
|
||||||
"destructive-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"border": {
|
|
||||||
"value": "#e4e4e7"
|
|
||||||
},
|
|
||||||
"input": {
|
|
||||||
"value": "#e4e4e7"
|
|
||||||
},
|
|
||||||
"ring": {
|
|
||||||
"value": "#18181b",
|
|
||||||
"comment": "matches primary"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color-dark": {
|
|
||||||
"background": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"card": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"card-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"popover": {
|
|
||||||
"value": "#09090b"
|
|
||||||
},
|
|
||||||
"popover-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"primary": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"primary-foreground": {
|
|
||||||
"value": "#18181b"
|
|
||||||
},
|
|
||||||
"secondary": {
|
|
||||||
"value": "#27272a"
|
|
||||||
},
|
|
||||||
"secondary-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"muted": {
|
|
||||||
"value": "#27272a"
|
|
||||||
},
|
|
||||||
"muted-foreground": {
|
|
||||||
"value": "#a1a1aa"
|
|
||||||
},
|
|
||||||
"accent": {
|
|
||||||
"value": "#27272a"
|
|
||||||
},
|
|
||||||
"accent-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"destructive": {
|
|
||||||
"value": "#7f1d1d"
|
|
||||||
},
|
|
||||||
"destructive-foreground": {
|
|
||||||
"value": "#fafafa"
|
|
||||||
},
|
|
||||||
"border": {
|
|
||||||
"value": "#27272a"
|
|
||||||
},
|
|
||||||
"input": {
|
|
||||||
"value": "#27272a"
|
|
||||||
},
|
|
||||||
"ring": {
|
|
||||||
"value": "#d4d4d8"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"radius": {
|
|
||||||
"sm": {
|
|
||||||
"value": "0.125rem"
|
|
||||||
},
|
|
||||||
"md": {
|
|
||||||
"value": "0.375rem"
|
|
||||||
},
|
|
||||||
"lg": {
|
|
||||||
"value": "0.5rem",
|
|
||||||
"comment": "default border radius for cards"
|
|
||||||
},
|
|
||||||
"xl": {
|
|
||||||
"value": "0.75rem"
|
|
||||||
},
|
|
||||||
"full": {
|
|
||||||
"value": "9999px"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"effect": {
|
|
||||||
"shadow-xs": {
|
|
||||||
"value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)"
|
|
||||||
},
|
|
||||||
"shadow-sm": {
|
|
||||||
"value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)"
|
|
||||||
},
|
|
||||||
"shadow-md": {
|
|
||||||
"value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
|
|
||||||
},
|
|
||||||
"shadow-lg": {
|
|
||||||
"value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)"
|
|
||||||
},
|
|
||||||
"shadow-xl": {
|
|
||||||
"value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
|
|
||||||
},
|
|
||||||
"shadow-2xl": {
|
|
||||||
"value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
|
|
||||||
},
|
|
||||||
"focus-ring": {
|
|
||||||
"value": "0 0 0 3px rgba(59, 130, 246, 0.5)"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"spacing": {
|
|
||||||
"0": {
|
|
||||||
"value": "0"
|
|
||||||
},
|
|
||||||
"1": {
|
|
||||||
"value": "0.25rem"
|
|
||||||
},
|
|
||||||
"2": {
|
|
||||||
"value": "0.5rem"
|
|
||||||
},
|
|
||||||
"3": {
|
|
||||||
"value": "0.75rem"
|
|
||||||
},
|
|
||||||
"4": {
|
|
||||||
"value": "1rem"
|
|
||||||
},
|
|
||||||
"5": {
|
|
||||||
"value": "1.25rem"
|
|
||||||
},
|
|
||||||
"6": {
|
|
||||||
"value": "1.5rem"
|
|
||||||
},
|
|
||||||
"8": {
|
|
||||||
"value": "2rem"
|
|
||||||
},
|
|
||||||
"10": {
|
|
||||||
"value": "2.5rem"
|
|
||||||
},
|
|
||||||
"12": {
|
|
||||||
"value": "3rem"
|
|
||||||
},
|
|
||||||
"16": {
|
|
||||||
"value": "4rem"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"typography": {
|
|
||||||
"heading-1": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "700"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "3rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "-0.025em"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"heading-2": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "600"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "1.875rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.2"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "-0.025em"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"heading-3": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "600"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "1.5rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.3"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "-0.025em"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"heading-4": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "600"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "1.25rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.4"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"paragraph-regular": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "400"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "1rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.5"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"paragraph-bold": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "500"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "1rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.5"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"paragraph-small-regular": {
|
|
||||||
"font-family": {
|
|
||||||
"value": "Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"
|
|
||||||
},
|
|
||||||
"font-weight": {
|
|
||||||
"value": "400"
|
|
||||||
},
|
|
||||||
"font-size": {
|
|
||||||
"value": "0.875rem"
|
|
||||||
},
|
|
||||||
"line-height": {
|
|
||||||
"value": "1.5"
|
|
||||||
},
|
|
||||||
"letter-spacing": {
|
|
||||||
"value": "0"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1 +0,0 @@
|
|||||||
61719
|
|
||||||
@@ -1,28 +0,0 @@
|
|||||||
{
|
|
||||||
"mode": "server",
|
|
||||||
"figma": {
|
|
||||||
"token": "***configured***",
|
|
||||||
"configured": true
|
|
||||||
},
|
|
||||||
"services": {
|
|
||||||
"storybook": {
|
|
||||||
"enabled": false,
|
|
||||||
"port": 6006,
|
|
||||||
"url": ""
|
|
||||||
},
|
|
||||||
"chromatic": {
|
|
||||||
"enabled": false,
|
|
||||||
"project_token": ""
|
|
||||||
},
|
|
||||||
"github": {
|
|
||||||
"enabled": false,
|
|
||||||
"repo": ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"features": {
|
|
||||||
"visual_qa": false,
|
|
||||||
"token_sync": false,
|
|
||||||
"code_gen": true,
|
|
||||||
"ai_advisor": false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
47
.gitignore
vendored
47
.gitignore
vendored
@@ -12,6 +12,7 @@ build/
|
|||||||
node_modules/
|
node_modules/
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
# Environment
|
# Environment
|
||||||
.env
|
.env
|
||||||
@@ -47,12 +48,6 @@ coverage/
|
|||||||
# Cache
|
# Cache
|
||||||
.cache/
|
.cache/
|
||||||
.dss-temp/
|
.dss-temp/
|
||||||
.dss/cache/
|
|
||||||
|
|
||||||
# Temp files (exclude all except README and .gitkeep)
|
|
||||||
.dss/temp/**/*
|
|
||||||
!.dss/temp/.gitkeep
|
|
||||||
!.dss/temp/README.md
|
|
||||||
|
|
||||||
# Backups
|
# Backups
|
||||||
*.backup
|
*.backup
|
||||||
@@ -62,11 +57,45 @@ coverage/
|
|||||||
archive/
|
archive/
|
||||||
test_output/
|
test_output/
|
||||||
|
|
||||||
# Build
|
# Build outputs
|
||||||
dist/
|
dist/
|
||||||
.next/
|
.next/
|
||||||
out/
|
out/
|
||||||
storybook-static/
|
storybook-static/
|
||||||
venv/
|
|
||||||
# Local MCP config (generated by ./scripts/setup-mcp.sh)
|
# Local MCP config (generated by dss-init.sh)
|
||||||
|
.mcp.json
|
||||||
.claude/mcp.json
|
.claude/mcp.json
|
||||||
|
|
||||||
|
# =============================================================================
|
||||||
|
# DSS GENERATED FILES - Created by /dss-init, not committed
|
||||||
|
# =============================================================================
|
||||||
|
|
||||||
|
# DSS runtime data (created on init)
|
||||||
|
.dss/data/
|
||||||
|
.dss/cache/
|
||||||
|
.dss/logs/
|
||||||
|
.dss/dss.db
|
||||||
|
.dss/dss.pid
|
||||||
|
.dss/components/
|
||||||
|
.dss/runtime-config.json
|
||||||
|
|
||||||
|
# DSS generated hashes (regenerated on init)
|
||||||
|
.dss/core-hashes.sha256
|
||||||
|
|
||||||
|
# Generated Storybook stories (created from tokens)
|
||||||
|
admin-ui/src/stories/
|
||||||
|
|
||||||
|
# admin-ui build output
|
||||||
|
admin-ui/dist/
|
||||||
|
|
||||||
|
# =============================================================================
|
||||||
|
# DSS REFERENCE FILES - These ARE committed (source of truth)
|
||||||
|
# =============================================================================
|
||||||
|
# Keep these in git:
|
||||||
|
# - .dss/config/ # Figma credentials, project config
|
||||||
|
# - .dss/core/ # Core primitives (immutable reference)
|
||||||
|
# - .dss/skins/ # Skin definitions (reference)
|
||||||
|
# - .dss/themes/ # Theme definitions (reference)
|
||||||
|
# - .dss/schema/ # Contracts and schemas (reference)
|
||||||
|
# - dss-claude-plugin/core/skins/ # Plugin skin references
|
||||||
|
|||||||
@@ -1,884 +0,0 @@
|
|||||||
/**
|
|
||||||
* Color Primitives - Foundation
|
|
||||||
* Full Tailwind color palette organized by category
|
|
||||||
* @generated 2025-12-12T07:46:35.099020
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Colors/Primitives',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Core color primitives from Tailwind palette. Organized into Base, Neutral, and Semantic scales.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.color-container { font-family: system-ui, sans-serif; }
|
|
||||||
.color-section { margin-bottom: 3rem; }
|
|
||||||
.color-section h2 { font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
|
||||||
.swatch-row { display: flex; flex-wrap: wrap; gap: 1rem; }
|
|
||||||
.color-swatch { text-align: center; }
|
|
||||||
.swatch { width: 80px; height: 80px; border-radius: 8px; margin-bottom: 0.5rem; }
|
|
||||||
.label { font-weight: 500; font-size: 0.875rem; }
|
|
||||||
.value { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
|
||||||
.palette-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
|
|
||||||
.color-palette { min-width: 140px; }
|
|
||||||
.color-palette h3 { margin: 0 0 0.5rem; text-transform: capitalize; font-size: 0.875rem; font-weight: 600; }
|
|
||||||
.shades { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; }
|
|
||||||
.shade { padding: 0.5rem 0.75rem; font-family: monospace; font-size: 0.65rem; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const AllColors = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="color-container">
|
|
||||||
|
|
||||||
<div class="color-section">
|
|
||||||
<h2>Base</h2>
|
|
||||||
<div class="swatch-row">
|
|
||||||
<div class="color-swatch">
|
|
||||||
<div class="swatch" style="background: #ffffff; border: 1px solid #e5e7eb;"></div>
|
|
||||||
<div class="label">white</div>
|
|
||||||
<div class="value">#ffffff</div>
|
|
||||||
</div>
|
|
||||||
<div class="color-swatch">
|
|
||||||
<div class="swatch" style="background: #000000; "></div>
|
|
||||||
<div class="label">black</div>
|
|
||||||
<div class="value">#000000</div>
|
|
||||||
</div>
|
|
||||||
<div class="color-swatch">
|
|
||||||
<div class="swatch" style="background: transparent; border: 1px solid #e5e7eb;"></div>
|
|
||||||
<div class="label">transparent</div>
|
|
||||||
<div class="value">transparent</div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="color-section">
|
|
||||||
<h2>Neutral Scales</h2>
|
|
||||||
<div class="palette-grid">
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>slate</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f8fafc; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f1f5f9; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e2e8f0; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #cbd5e1; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #94a3b8; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #64748b; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #475569; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #334155; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1e293b; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0f172a; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #020617; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>gray</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f9fafb; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f3f4f6; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e5e7eb; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d1d5db; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #9ca3af; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #6b7280; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4b5563; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #374151; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1f2937; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #111827; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #030712; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>zinc</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fafafa; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f4f4f5; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e4e4e7; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d4d4d8; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a1a1aa; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #71717a; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #52525b; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #3f3f46; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #27272a; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #18181b; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #09090b; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>neutral</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fafafa; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f5f5f5; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e5e5e5; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d4d4d4; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a3a3a3; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #737373; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #525252; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #404040; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #262626; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #171717; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0a0a0a; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>stone</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fafaf9; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f5f5f4; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e7e5e4; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d6d3d1; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a8a29e; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #78716c; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #57534e; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #44403c; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #292524; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1c1917; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0c0a09; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="color-section">
|
|
||||||
<h2>Semantic Scales</h2>
|
|
||||||
<div class="palette-grid">
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>red</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fef2f2; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fee2e2; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fecaca; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fca5a5; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f87171; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ef4444; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #dc2626; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #b91c1c; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #991b1b; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #7f1d1d; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #450a0a; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>orange</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fff7ed; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ffedd5; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fed7aa; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fdba74; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fb923c; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f97316; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ea580c; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #c2410c; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #9a3412; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #7c2d12; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #431407; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>amber</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fffbeb; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fef3c7; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fde68a; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fcd34d; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fbbf24; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f59e0b; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d97706; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #b45309; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #92400e; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #78350f; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #451a03; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>yellow</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fefce8; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fef9c3; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fef08a; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fde047; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #facc15; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #eab308; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ca8a04; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a16207; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #854d0e; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #713f12; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #422006; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>lime</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f7fee7; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ecfccb; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d9f99d; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #bef264; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a3e635; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #84cc16; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #65a30d; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4d7c0f; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #3f6212; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #365314; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1a2e05; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>green</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f0fdf4; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #dcfce7; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #bbf7d0; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #86efac; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4ade80; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #22c55e; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #16a34a; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #15803d; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #166534; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #14532d; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #052e16; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>emerald</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #ecfdf5; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d1fae5; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a7f3d0; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #6ee7b7; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #34d399; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #10b981; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #059669; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #047857; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #065f46; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #064e3b; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #022c22; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>teal</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f0fdfa; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ccfbf1; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #99f6e4; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #5eead4; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #2dd4bf; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #14b8a6; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0d9488; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0f766e; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #115e59; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #134e4a; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #042f2e; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>cyan</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #ecfeff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #cffafe; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a5f3fc; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #67e8f9; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #22d3ee; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #06b6d4; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0891b2; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0e7490; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #155e75; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #164e63; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #083344; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>sky</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f0f9ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e0f2fe; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #bae6fd; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #7dd3fc; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #38bdf8; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0ea5e9; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0284c7; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0369a1; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #075985; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #0c4a6e; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #082f49; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>blue</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #eff6ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #dbeafe; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #bfdbfe; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #93c5fd; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #60a5fa; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #3b82f6; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #2563eb; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1d4ed8; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1e40af; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1e3a8a; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #172554; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>indigo</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #eef2ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e0e7ff; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #c7d2fe; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a5b4fc; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #818cf8; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #6366f1; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4f46e5; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4338ca; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #3730a3; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #312e81; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #1e1b4b; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>violet</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #f5f3ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ede9fe; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ddd6fe; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #c4b5fd; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a78bfa; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #8b5cf6; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #7c3aed; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #6d28d9; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #5b21b6; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4c1d95; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #2e1065; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>purple</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #faf5ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f3e8ff; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e9d5ff; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d8b4fe; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #c084fc; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a855f7; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #9333ea; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #7e22ce; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #6b21a8; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #581c87; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #3b0764; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>fuchsia</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fdf4ff; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fae8ff; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f5d0fe; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f0abfc; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e879f9; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #d946ef; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #c026d3; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #a21caf; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #86198f; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #701a75; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4a044e; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>pink</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fdf2f8; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fce7f3; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fbcfe8; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f9a8d4; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f472b6; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ec4899; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #db2777; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #be185d; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #9d174d; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #831843; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #500724; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="color-palette">
|
|
||||||
<h3>rose</h3>
|
|
||||||
<div class="shades">
|
|
||||||
<div class="shade" style="background: #fff1f2; color: #000;">
|
|
||||||
<span>50</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #ffe4e6; color: #000;">
|
|
||||||
<span>100</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fecdd3; color: #000;">
|
|
||||||
<span>200</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fda4af; color: #000;">
|
|
||||||
<span>300</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #fb7185; color: #000;">
|
|
||||||
<span>400</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #f43f5e; color: #fff;">
|
|
||||||
<span>500</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #e11d48; color: #fff;">
|
|
||||||
<span>600</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #be123c; color: #fff;">
|
|
||||||
<span>700</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #9f1239; color: #fff;">
|
|
||||||
<span>800</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #881337; color: #fff;">
|
|
||||||
<span>900</span>
|
|
||||||
</div>
|
|
||||||
<div class="shade" style="background: #4c0519; color: #fff;">
|
|
||||||
<span>950</span>
|
|
||||||
</div></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,164 +0,0 @@
|
|||||||
/**
|
|
||||||
* Data Display
|
|
||||||
* Components for displaying data
|
|
||||||
* @generated 2025-12-12T07:46:35.099955
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Data Display',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Components for displaying data'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Accordion</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-accordion</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">A vertically stacked set of interactive headings that reveal content sections</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Avatar</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-avatar</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">An image element with a fallback for user profile images</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">size:</span> <span class="badge">sm</span> <span class="badge">md</span> <span class="badge">lg</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Badge</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays a badge or label</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">secondary</span> <span class="badge">destructive</span> <span class="badge">outline</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Carousel</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">A carousel with embla-carousel</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: embla-carousel-react</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Chart</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Beautiful charts using Recharts</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: recharts</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Collapsible</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-collapsible</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">An interactive component that expands/collapses content</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Data Table</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Powerful table with sorting, filtering, pagination</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: @tanstack/react-table</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Item</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Generic list item component</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Kbd</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Keyboard key display</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Table</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Styled HTML table</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Typography</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Text styling components</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,128 +0,0 @@
|
|||||||
/**
|
|
||||||
* Feedback
|
|
||||||
* User feedback components
|
|
||||||
* @generated 2025-12-12T07:46:35.100070
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Feedback',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'User feedback components'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Alert</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays a callout for user attention</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Empty</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Empty state display</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Progress</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-progress</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Progress indicator bar</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Skeleton</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Loading placeholder</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Sonner</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Toast notifications with sonner</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: sonner</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Spinner</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Loading spinner animation</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Toast</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-toast</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Toast notification component</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,254 +0,0 @@
|
|||||||
/**
|
|
||||||
* Form Components
|
|
||||||
* Input controls and form elements
|
|
||||||
* @generated 2025-12-12T07:46:35.099811
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Form Components',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Input controls and form elements'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Button</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays a button or a component that looks like a button</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">destructive</span> <span class="badge">outline</span> <span class="badge">secondary</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span> <span class="badge">icon</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Button Group</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Groups multiple buttons together</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Calendar</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">A date picker component with monthly/yearly views</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: react-day-picker</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Checkbox</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-checkbox</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">A control that allows toggling between checked and unchecked</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Combobox</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Autocomplete input with command palette</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Command</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Command palette with search and filtering</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: cmdk</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Date Picker</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">A date picker built with calendar and popover</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Field</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Form field wrapper with label and error</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Form</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Form component with react-hook-form integration</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: react-hook-form, @hookform/resolvers, zod</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Input</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Text input field</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Input Group</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Group of inputs with addons</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Input OTP</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">One-time password input</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: input-otp</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Label</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-label</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Text label for form elements</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Native Select</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Native HTML select element with styling</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Radio Group</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-radio-group</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Set of mutually exclusive options</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Select</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-select</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Custom select dropdown</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Slider</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-slider</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Range slider input</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Switch</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-switch</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Toggle switch control</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Textarea</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Multi-line text input</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Toggle</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-toggle</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Two-state button</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">variant:</span> <span class="badge">default</span> <span class="badge">outline</span></div><div class="variant-row"><span class="var-name">size:</span> <span class="badge">default</span> <span class="badge">sm</span> <span class="badge">lg</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Toggle Group</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-toggle-group</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Group of toggle buttons</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,110 +0,0 @@
|
|||||||
/**
|
|
||||||
* Layout
|
|
||||||
* Layout and structure components
|
|
||||||
* @generated 2025-12-12T07:46:35.100368
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Layout',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Layout and structure components'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Aspect Ratio</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-aspect-ratio</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays content with a desired aspect ratio</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Card</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays a card with header, content, and footer</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Resizable</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Resizable panel groups</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: react-resizable-panels</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Scroll Area</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-scroll-area</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Custom scrollbar styling</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Separator</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-separator</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Visual divider</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">orientation:</span> <span class="badge">horizontal</span> <span class="badge">vertical</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,119 +0,0 @@
|
|||||||
/**
|
|
||||||
* Navigation
|
|
||||||
* Navigation components
|
|
||||||
* @generated 2025-12-12T07:46:35.100163
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Navigation',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Navigation components'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Breadcrumb</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Displays the path to the current page in a hierarchy</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Menubar</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-menubar</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Horizontal menu with dropdowns</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Navigation Menu</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-navigation-menu</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Website navigation with mega menus</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Pagination</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Page navigation with previous/next</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Sidebar</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">Application sidebar with collapsible sections</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Tabs</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-tabs</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Tabbed interface</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,146 +0,0 @@
|
|||||||
/**
|
|
||||||
* Overlay
|
|
||||||
* Modal and overlay components
|
|
||||||
* @generated 2025-12-12T07:46:35.100264
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Components/Overlay',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Modal and overlay components'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.component-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; }
|
|
||||||
.component-card {
|
|
||||||
border: 1px solid #e5e7eb;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 1rem;
|
|
||||||
background: white;
|
|
||||||
}
|
|
||||||
.card-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
.card-header h3 { margin: 0; font-size: 1rem; }
|
|
||||||
.radix-badge {
|
|
||||||
font-size: 0.6rem;
|
|
||||||
background: #dbeafe;
|
|
||||||
color: #1d4ed8;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
.description { font-size: 0.8rem; color: #6b7280; margin: 0 0 0.75rem; }
|
|
||||||
.variants { margin-bottom: 0.5rem; }
|
|
||||||
.variant-row { font-size: 0.7rem; margin-bottom: 0.25rem; }
|
|
||||||
.var-name { font-weight: 500; margin-right: 0.25rem; }
|
|
||||||
.badge {
|
|
||||||
display: inline-block;
|
|
||||||
background: #f3f4f6;
|
|
||||||
padding: 0.125rem 0.375rem;
|
|
||||||
border-radius: 4px;
|
|
||||||
margin-right: 0.25rem;
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.65rem;
|
|
||||||
}
|
|
||||||
.deps { font-size: 0.65rem; color: #9ca3af; font-family: monospace; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Overview = {
|
|
||||||
name: 'Component Catalog',
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="component-grid">
|
|
||||||
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Alert Dialog</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-alert-dialog</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">A modal dialog that interrupts user flow with important information</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Context Menu</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-context-menu</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Right-click context menu with keyboard support</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Dialog</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">A modal dialog for content display</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Drawer</h3>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<p class="description">A drawer component extending dialog</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
<div class="deps">deps: vaul</div>
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Dropdown Menu</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-dropdown-menu</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Menu displayed on trigger interaction</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Hover Card</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-hover-card</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Content appearing on hover</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Popover</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-popover</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Floating content panel</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Sheet</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-dialog</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Side panel overlay</p>
|
|
||||||
<div class="variants"><div class="variant-row"><span class="var-name">side:</span> <span class="badge">top</span> <span class="badge">right</span> <span class="badge">bottom</span> <span class="badge">left</span></div></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<div class="component-card">
|
|
||||||
<div class="card-header">
|
|
||||||
<h3>Tooltip</h3>
|
|
||||||
<span class="radix-badge">@radix-ui/react-tooltip</span>
|
|
||||||
</div>
|
|
||||||
<p class="description">Informative popup on hover</p>
|
|
||||||
<div class="variants"></div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
/**
|
|
||||||
* Effects - Design Tokens
|
|
||||||
* Shadows and focus rings
|
|
||||||
* @generated 2025-12-10T19:56:03.054416
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Effects',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Shadow and focus ring effects extracted from Figma.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.effects-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; }
|
|
||||||
.effect-card {
|
|
||||||
width: 150px;
|
|
||||||
height: 100px;
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.name { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Shadows = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="effects-grid">
|
|
||||||
|
|
||||||
<div class="effect-card" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);">
|
|
||||||
<span class="name">shadow-xs</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);">
|
|
||||||
<span class="name">shadow-sm</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);">
|
|
||||||
<span class="name">shadow-md</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);">
|
|
||||||
<span class="name">shadow-lg</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);">
|
|
||||||
<span class="name">shadow-xl</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);">
|
|
||||||
<span class="name">shadow-2xl</span>
|
|
||||||
</div>
|
|
||||||
<div class="effect-card" style="box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);">
|
|
||||||
<span class="name">focus-ring</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,94 +0,0 @@
|
|||||||
/**
|
|
||||||
* Design System Overview
|
|
||||||
* @generated 2025-12-12T07:46:35.098779
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Overview',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'DSS Design System - Token documentation and component library'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.overview { max-width: 800px; font-family: system-ui, sans-serif; }
|
|
||||||
.overview h1 { font-size: 2rem; margin-bottom: 0.5rem; }
|
|
||||||
.overview .subtitle { color: #6b7280; margin-bottom: 2rem; }
|
|
||||||
.overview h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
||||||
.overview ul { padding-left: 1.5rem; }
|
|
||||||
.overview li { margin: 0.5rem 0; }
|
|
||||||
.overview code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; }
|
|
||||||
.layer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; margin: 0.5rem 0; }
|
|
||||||
.layer-num { width: 24px; height: 24px; background: #18181b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
|
|
||||||
.stats { display: flex; gap: 1rem; margin: 1rem 0; }
|
|
||||||
.stat { background: #f9fafb; padding: 1rem; border-radius: 8px; text-align: center; }
|
|
||||||
.stat-value { font-size: 2rem; font-weight: 700; color: #18181b; }
|
|
||||||
.stat-label { font-size: 0.75rem; color: #6b7280; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Introduction = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="overview">
|
|
||||||
<h1>DSS Design System</h1>
|
|
||||||
<p class="subtitle">Token-driven design system with 3-layer architecture</p>
|
|
||||||
|
|
||||||
<div class="stats">
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-value">22</div>
|
|
||||||
<div class="stat-label">Color Scales</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-value">59</div>
|
|
||||||
<div class="stat-label">Components</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-value">6</div>
|
|
||||||
<div class="stat-label">Categories</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Architecture</h2>
|
|
||||||
<div class="layer">
|
|
||||||
<span class="layer-num">1</span>
|
|
||||||
<strong>Core Primitives</strong> - Raw Tailwind values (colors, spacing, fonts)
|
|
||||||
</div>
|
|
||||||
<div class="layer">
|
|
||||||
<span class="layer-num">2</span>
|
|
||||||
<strong>Skin</strong> - Semantic mapping (primary, secondary, etc.)
|
|
||||||
</div>
|
|
||||||
<div class="layer">
|
|
||||||
<span class="layer-num">3</span>
|
|
||||||
<strong>Theme</strong> - Brand overrides
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h2>Navigation</h2>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Foundation</strong> - Core primitives (colors, spacing, typography, radius, shadows)</li>
|
|
||||||
<li><strong>Tokens</strong> - Semantic design tokens from skin</li>
|
|
||||||
<li><strong>Components</strong> - 59 shadcn/ui components organized by category</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Component Categories</h2>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Form</strong> - Button, Input, Select, Checkbox, etc.</li>
|
|
||||||
<li><strong>Data Display</strong> - Table, Badge, Avatar, Chart, etc.</li>
|
|
||||||
<li><strong>Feedback</strong> - Alert, Toast, Progress, Spinner, etc.</li>
|
|
||||||
<li><strong>Navigation</strong> - Tabs, Breadcrumb, Sidebar, etc.</li>
|
|
||||||
<li><strong>Overlay</strong> - Dialog, Sheet, Dropdown, Tooltip, etc.</li>
|
|
||||||
<li><strong>Layout</strong> - Card, Separator, Scroll Area, etc.</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<h2>Usage</h2>
|
|
||||||
<p>Import tokens CSS in your project:</p>
|
|
||||||
<pre><code>import '.dss/data/_system/themes/tokens.css';</code></pre>
|
|
||||||
<p>Use CSS variables in your styles:</p>
|
|
||||||
<pre><code>color: var(--color-primary);
|
|
||||||
background: var(--color-background);</code></pre>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,87 +0,0 @@
|
|||||||
/**
|
|
||||||
* Border Radius - Foundation
|
|
||||||
* @generated 2025-12-12T07:46:35.099454
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Radius',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Border radius scale for consistent rounded corners.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.radius-grid { display: flex; flex-wrap: wrap; gap: 2rem; }
|
|
||||||
.radius-item { text-align: center; }
|
|
||||||
.box { width: 80px; height: 80px; background: var(--color-primary, #18181b); margin-bottom: 0.5rem; }
|
|
||||||
.name { font-weight: 500; font-size: 0.875rem; }
|
|
||||||
.value { font-family: monospace; font-size: 0.75rem; color: #6b7280; }
|
|
||||||
.comment { font-size: 0.65rem; color: #9ca3af; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const RadiusScale = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="radius-grid">
|
|
||||||
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0;"></div>
|
|
||||||
<div class="name">none</div>
|
|
||||||
<div class="value">0</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0.125rem;"></div>
|
|
||||||
<div class="name">sm</div>
|
|
||||||
<div class="value">0.125rem</div>
|
|
||||||
<div class="comment">2px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0.25rem;"></div>
|
|
||||||
<div class="name">default</div>
|
|
||||||
<div class="value">0.25rem</div>
|
|
||||||
<div class="comment">4px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0.375rem;"></div>
|
|
||||||
<div class="name">md</div>
|
|
||||||
<div class="value">0.375rem</div>
|
|
||||||
<div class="comment">6px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0.5rem;"></div>
|
|
||||||
<div class="name">lg</div>
|
|
||||||
<div class="value">0.5rem</div>
|
|
||||||
<div class="comment">8px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 0.75rem;"></div>
|
|
||||||
<div class="name">xl</div>
|
|
||||||
<div class="value">0.75rem</div>
|
|
||||||
<div class="comment">12px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 1rem;"></div>
|
|
||||||
<div class="name">2xl</div>
|
|
||||||
<div class="value">1rem</div>
|
|
||||||
<div class="comment">16px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 1.5rem;"></div>
|
|
||||||
<div class="name">3xl</div>
|
|
||||||
<div class="value">1.5rem</div>
|
|
||||||
<div class="comment">24px</div>
|
|
||||||
</div>
|
|
||||||
<div class="radius-item">
|
|
||||||
<div class="box" style="border-radius: 9999px;"></div>
|
|
||||||
<div class="name">full</div>
|
|
||||||
<div class="value">9999px</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,178 +0,0 @@
|
|||||||
/**
|
|
||||||
* Semantic Colors - Design Tokens
|
|
||||||
* Resolved color tokens for light theme
|
|
||||||
* @generated 2025-12-12T07:46:35.099688
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Tokens/Semantic Colors',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Semantic color tokens mapped from primitives. Use these in components via CSS variables.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.semantic-colors { display: flex; flex-direction: column; gap: 2rem; }
|
|
||||||
.token-group h3 { margin: 0 0 1rem; font-size: 1rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
|
|
||||||
.token-row { display: flex; flex-wrap: wrap; gap: 1rem; }
|
|
||||||
.token-card { text-align: center; }
|
|
||||||
.swatch { width: 80px; height: 60px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 0.5rem; }
|
|
||||||
.name { font-size: 0.75rem; font-weight: 500; }
|
|
||||||
.value { font-family: monospace; font-size: 0.65rem; color: #6b7280; }
|
|
||||||
.comment { font-size: 0.6rem; color: #9ca3af; max-width: 80px; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const LightTheme = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="semantic-colors">
|
|
||||||
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Surface</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #ffffff;"></div>
|
|
||||||
<div class="name">background</div>
|
|
||||||
<div class="value">#ffffff</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #09090b;"></div>
|
|
||||||
<div class="name">foreground</div>
|
|
||||||
<div class="value">#09090b</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #ffffff;"></div>
|
|
||||||
<div class="name">card</div>
|
|
||||||
<div class="value">#ffffff</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #09090b;"></div>
|
|
||||||
<div class="name">card-foreground</div>
|
|
||||||
<div class="value">#09090b</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #ffffff;"></div>
|
|
||||||
<div class="name">popover</div>
|
|
||||||
<div class="value">#ffffff</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #09090b;"></div>
|
|
||||||
<div class="name">popover-foreground</div>
|
|
||||||
<div class="value">#09090b</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #fafafa;"></div>
|
|
||||||
<div class="name">primary-foreground</div>
|
|
||||||
<div class="value">#fafafa</div>
|
|
||||||
<div class="comment">zinc-50</div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #18181b;"></div>
|
|
||||||
<div class="name">secondary-foreground</div>
|
|
||||||
<div class="value">#18181b</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #71717a;"></div>
|
|
||||||
<div class="name">muted-foreground</div>
|
|
||||||
<div class="value">#71717a</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #18181b;"></div>
|
|
||||||
<div class="name">accent-foreground</div>
|
|
||||||
<div class="value">#18181b</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #fafafa;"></div>
|
|
||||||
<div class="name">destructive-foreground</div>
|
|
||||||
<div class="value">#fafafa</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Primary</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #18181b;"></div>
|
|
||||||
<div class="name">primary</div>
|
|
||||||
<div class="value">#18181b</div>
|
|
||||||
<div class="comment">zinc-900 - brand primary</div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Secondary</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
|
||||||
<div class="name">secondary</div>
|
|
||||||
<div class="value">#f4f4f5</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Accent</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
|
||||||
<div class="name">accent</div>
|
|
||||||
<div class="value">#f4f4f5</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Muted</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #f4f4f5;"></div>
|
|
||||||
<div class="name">muted</div>
|
|
||||||
<div class="value">#f4f4f5</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Destructive</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #ef4444;"></div>
|
|
||||||
<div class="name">destructive</div>
|
|
||||||
<div class="value">#ef4444</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-group">
|
|
||||||
<h3>Other</h3>
|
|
||||||
<div class="token-row">
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #e4e4e7;"></div>
|
|
||||||
<div class="name">border</div>
|
|
||||||
<div class="value">#e4e4e7</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #e4e4e7;"></div>
|
|
||||||
<div class="name">input</div>
|
|
||||||
<div class="value">#e4e4e7</div>
|
|
||||||
<div class="comment"></div>
|
|
||||||
</div>
|
|
||||||
<div class="token-card">
|
|
||||||
<div class="swatch" style="background: #18181b;"></div>
|
|
||||||
<div class="name">ring</div>
|
|
||||||
<div class="value">#18181b</div>
|
|
||||||
<div class="comment">matches primary</div>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,108 +0,0 @@
|
|||||||
/**
|
|
||||||
* Shadows - Foundation
|
|
||||||
* Box shadow scale
|
|
||||||
* @generated 2025-12-12T07:46:35.099557
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Effects/Shadows',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Box shadow tokens for elevation and depth.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.shadows-grid { display: flex; flex-wrap: wrap; gap: 2rem; padding: 2rem; background: #f9fafb; }
|
|
||||||
.shadow-card { text-align: center; }
|
|
||||||
.box { width: 120px; height: 80px; background: white; border-radius: 8px; margin-bottom: 0.5rem; }
|
|
||||||
.name { font-size: 0.75rem; font-weight: 500; }
|
|
||||||
.value { font-size: 0.6rem; color: #6b7280; font-family: monospace; max-width: 120px; word-wrap: break-word; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const AllShadows = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="shadows-grid">
|
|
||||||
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: none;"></div>
|
|
||||||
<div class="name">none</div>
|
|
||||||
<div class="value">none</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
||||||
<div class="name">xs</div>
|
|
||||||
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">sm</div>
|
|
||||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">default</div>
|
|
||||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">md</div>
|
|
||||||
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">lg</div>
|
|
||||||
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">xl</div>
|
|
||||||
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
|
||||||
<div class="name">2xl</div>
|
|
||||||
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
||||||
<div class="name">inner</div>
|
|
||||||
<div class="value">inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);"></div>
|
|
||||||
<div class="name">shadow-xs</div>
|
|
||||||
<div class="value">0 1px 2px 0 rgba(0, 0, 0, 0.05)</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">shadow-sm</div>
|
|
||||||
<div class="value">0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgb...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">shadow-md</div>
|
|
||||||
<div class="value">0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px ...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">shadow-lg</div>
|
|
||||||
<div class="value">0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4p...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);"></div>
|
|
||||||
<div class="name">shadow-xl</div>
|
|
||||||
<div class="value">0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6...</div>
|
|
||||||
</div>
|
|
||||||
<div class="shadow-card">
|
|
||||||
<div class="box" style="box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);"></div>
|
|
||||||
<div class="name">shadow-2xl</div>
|
|
||||||
<div class="value">0 25px 50px -12px rgba(0, 0, 0, 0.25)</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,314 +0,0 @@
|
|||||||
/**
|
|
||||||
* Spacing Primitives - Foundation
|
|
||||||
* @generated 2025-12-12T07:46:35.099156
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Spacing',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Spacing scale based on 4px grid. Use for margins, padding, and gaps.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.spacing-grid { display: flex; flex-direction: column; gap: 0.25rem; max-width: 600px; }
|
|
||||||
.spacing-item { display: flex; align-items: center; gap: 1rem; }
|
|
||||||
.bar { height: 20px; background: var(--color-primary, #18181b); border-radius: 2px; min-width: 2px; }
|
|
||||||
.info { display: flex; gap: 1rem; font-family: monospace; font-size: 0.75rem; }
|
|
||||||
.name { font-weight: 600; min-width: 32px; }
|
|
||||||
.value { color: #6b7280; min-width: 80px; }
|
|
||||||
.comment { color: #9ca3af; font-size: 0.65rem; }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const SpacingScale = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="spacing-grid">
|
|
||||||
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 1px;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">px</span>
|
|
||||||
<span class="value">1px</span>
|
|
||||||
<span class="comment"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">0</span>
|
|
||||||
<span class="value">0</span>
|
|
||||||
<span class="comment"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.125rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">0.5</span>
|
|
||||||
<span class="value">0.125rem</span>
|
|
||||||
<span class="comment">2px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.25rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">1</span>
|
|
||||||
<span class="value">0.25rem</span>
|
|
||||||
<span class="comment">4px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.375rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">1.5</span>
|
|
||||||
<span class="value">0.375rem</span>
|
|
||||||
<span class="comment">6px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.5rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">2</span>
|
|
||||||
<span class="value">0.5rem</span>
|
|
||||||
<span class="comment">8px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.625rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">2.5</span>
|
|
||||||
<span class="value">0.625rem</span>
|
|
||||||
<span class="comment">10px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.75rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">3</span>
|
|
||||||
<span class="value">0.75rem</span>
|
|
||||||
<span class="comment">12px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 0.875rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">3.5</span>
|
|
||||||
<span class="value">0.875rem</span>
|
|
||||||
<span class="comment">14px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 1rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">4</span>
|
|
||||||
<span class="value">1rem</span>
|
|
||||||
<span class="comment">16px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 1.25rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">5</span>
|
|
||||||
<span class="value">1.25rem</span>
|
|
||||||
<span class="comment">20px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 1.5rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">6</span>
|
|
||||||
<span class="value">1.5rem</span>
|
|
||||||
<span class="comment">24px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 1.75rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">7</span>
|
|
||||||
<span class="value">1.75rem</span>
|
|
||||||
<span class="comment">28px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 2rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">8</span>
|
|
||||||
<span class="value">2rem</span>
|
|
||||||
<span class="comment">32px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 2.25rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">9</span>
|
|
||||||
<span class="value">2.25rem</span>
|
|
||||||
<span class="comment">36px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 2.5rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">10</span>
|
|
||||||
<span class="value">2.5rem</span>
|
|
||||||
<span class="comment">40px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 2.75rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">11</span>
|
|
||||||
<span class="value">2.75rem</span>
|
|
||||||
<span class="comment">44px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 3rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">12</span>
|
|
||||||
<span class="value">3rem</span>
|
|
||||||
<span class="comment">48px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 3.5rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">14</span>
|
|
||||||
<span class="value">3.5rem</span>
|
|
||||||
<span class="comment">56px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 4rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">16</span>
|
|
||||||
<span class="value">4rem</span>
|
|
||||||
<span class="comment">64px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 5rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">20</span>
|
|
||||||
<span class="value">5rem</span>
|
|
||||||
<span class="comment">80px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 6rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">24</span>
|
|
||||||
<span class="value">6rem</span>
|
|
||||||
<span class="comment">96px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 7rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">28</span>
|
|
||||||
<span class="value">7rem</span>
|
|
||||||
<span class="comment">112px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 8rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">32</span>
|
|
||||||
<span class="value">8rem</span>
|
|
||||||
<span class="comment">128px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 9rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">36</span>
|
|
||||||
<span class="value">9rem</span>
|
|
||||||
<span class="comment">144px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 10rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">40</span>
|
|
||||||
<span class="value">10rem</span>
|
|
||||||
<span class="comment">160px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 11rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">44</span>
|
|
||||||
<span class="value">11rem</span>
|
|
||||||
<span class="comment">176px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 12rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">48</span>
|
|
||||||
<span class="value">12rem</span>
|
|
||||||
<span class="comment">192px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 13rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">52</span>
|
|
||||||
<span class="value">13rem</span>
|
|
||||||
<span class="comment">208px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 14rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">56</span>
|
|
||||||
<span class="value">14rem</span>
|
|
||||||
<span class="comment">224px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 15rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">60</span>
|
|
||||||
<span class="value">15rem</span>
|
|
||||||
<span class="comment">240px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 16rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">64</span>
|
|
||||||
<span class="value">16rem</span>
|
|
||||||
<span class="comment">256px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 18rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">72</span>
|
|
||||||
<span class="value">18rem</span>
|
|
||||||
<span class="comment">288px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 20rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">80</span>
|
|
||||||
<span class="value">20rem</span>
|
|
||||||
<span class="comment">320px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="spacing-item">
|
|
||||||
<div class="bar" style="width: 24rem;"></div>
|
|
||||||
<div class="info">
|
|
||||||
<span class="name">96</span>
|
|
||||||
<span class="value">24rem</span>
|
|
||||||
<span class="comment">384px</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
@@ -1,284 +0,0 @@
|
|||||||
/**
|
|
||||||
* Typography - Foundation
|
|
||||||
* Font families, sizes, weights, and composed styles
|
|
||||||
* @generated 2025-12-12T07:46:35.099319
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
title: 'Foundation/Typography',
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component: 'Typography primitives and composed text styles.'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const styles = `
|
|
||||||
.typo-container { font-family: system-ui, sans-serif; }
|
|
||||||
.section { margin-bottom: 3rem; }
|
|
||||||
.section h2 { font-size: 1.25rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
|
|
||||||
.font-sample { margin-bottom: 1.5rem; }
|
|
||||||
.sample-text { font-size: 1.5rem; margin-bottom: 0.25rem; }
|
|
||||||
.meta { font-size: 0.75rem; font-family: monospace; }
|
|
||||||
.meta .name { font-weight: 600; margin-right: 1rem; }
|
|
||||||
.meta .value { color: #6b7280; }
|
|
||||||
.size-grid, .weight-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }
|
|
||||||
.size-sample, .weight-sample { text-align: center; min-width: 60px; }
|
|
||||||
.size-sample .text { display: block; margin-bottom: 0.25rem; }
|
|
||||||
.weight-sample .text { display: block; margin-bottom: 0.25rem; font-size: 1.5rem; }
|
|
||||||
.name { font-size: 0.75rem; font-weight: 500; display: block; }
|
|
||||||
.value { font-size: 0.65rem; color: #6b7280; font-family: monospace; }
|
|
||||||
.props { color: #6b7280; font-family: monospace; }
|
|
||||||
.style-sample { margin-bottom: 1rem; border-bottom: 1px solid #f3f4f6; padding-bottom: 1rem; }
|
|
||||||
.style-sample .text { margin-bottom: 0.25rem; color: var(--color-foreground, #18181b); }
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const FontFamilies = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="typo-container">
|
|
||||||
<div class="section">
|
|
||||||
<h2>Font Families</h2>
|
|
||||||
|
|
||||||
<div class="font-sample">
|
|
||||||
<div class="sample-text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
|
||||||
The quick brown fox jumps over the lazy dog
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">sans</span>
|
|
||||||
<span class="value">Inter, ui-sans-serif, system-ui, -apple-...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-sample">
|
|
||||||
<div class="sample-text" style="font-family: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;">
|
|
||||||
The quick brown fox jumps over the lazy dog
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">serif</span>
|
|
||||||
<span class="value">ui-serif, Georgia, Cambria, 'Times New R...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-sample">
|
|
||||||
<div class="sample-text" style="font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;">
|
|
||||||
The quick brown fox jumps over the lazy dog
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">mono</span>
|
|
||||||
<span class="value">ui-monospace, SFMono-Regular, 'SF Mono',...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FontSizes = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="typo-container">
|
|
||||||
<div class="section">
|
|
||||||
<h2>Font Sizes</h2>
|
|
||||||
<div class="size-grid">
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 0.75rem;">Aa</span>
|
|
||||||
<span class="name">xs</span>
|
|
||||||
<span class="value">0.75rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 0.875rem;">Aa</span>
|
|
||||||
<span class="name">sm</span>
|
|
||||||
<span class="value">0.875rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 1rem;">Aa</span>
|
|
||||||
<span class="name">base</span>
|
|
||||||
<span class="value">1rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 1.125rem;">Aa</span>
|
|
||||||
<span class="name">lg</span>
|
|
||||||
<span class="value">1.125rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 1.25rem;">Aa</span>
|
|
||||||
<span class="name">xl</span>
|
|
||||||
<span class="value">1.25rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 1.5rem;">Aa</span>
|
|
||||||
<span class="name">2xl</span>
|
|
||||||
<span class="value">1.5rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 1.875rem;">Aa</span>
|
|
||||||
<span class="name">3xl</span>
|
|
||||||
<span class="value">1.875rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 2.25rem;">Aa</span>
|
|
||||||
<span class="name">4xl</span>
|
|
||||||
<span class="value">2.25rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 3rem;">Aa</span>
|
|
||||||
<span class="name">5xl</span>
|
|
||||||
<span class="value">3rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 3.75rem;">Aa</span>
|
|
||||||
<span class="name">6xl</span>
|
|
||||||
<span class="value">3.75rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 4.5rem;">Aa</span>
|
|
||||||
<span class="name">7xl</span>
|
|
||||||
<span class="value">4.5rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 6rem;">Aa</span>
|
|
||||||
<span class="name">8xl</span>
|
|
||||||
<span class="value">6rem</span>
|
|
||||||
</div>
|
|
||||||
<div class="size-sample">
|
|
||||||
<span class="text" style="font-size: 8rem;">Aa</span>
|
|
||||||
<span class="name">9xl</span>
|
|
||||||
<span class="value">8rem</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FontWeights = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="typo-container">
|
|
||||||
<div class="section">
|
|
||||||
<h2>Font Weights</h2>
|
|
||||||
<div class="weight-grid">
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 100;">Aa</span>
|
|
||||||
<span class="name">thin</span>
|
|
||||||
<span class="value">100</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 200;">Aa</span>
|
|
||||||
<span class="name">extralight</span>
|
|
||||||
<span class="value">200</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 300;">Aa</span>
|
|
||||||
<span class="name">light</span>
|
|
||||||
<span class="value">300</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 400;">Aa</span>
|
|
||||||
<span class="name">normal</span>
|
|
||||||
<span class="value">400</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 500;">Aa</span>
|
|
||||||
<span class="name">medium</span>
|
|
||||||
<span class="value">500</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 600;">Aa</span>
|
|
||||||
<span class="name">semibold</span>
|
|
||||||
<span class="value">600</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 700;">Aa</span>
|
|
||||||
<span class="name">bold</span>
|
|
||||||
<span class="value">700</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 800;">Aa</span>
|
|
||||||
<span class="name">extrabold</span>
|
|
||||||
<span class="value">800</span>
|
|
||||||
</div>
|
|
||||||
<div class="weight-sample">
|
|
||||||
<span class="text" style="font-weight: 900;">Aa</span>
|
|
||||||
<span class="name">black</span>
|
|
||||||
<span class="value">900</span>
|
|
||||||
</div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
|
|
||||||
export const TextStyles = {
|
|
||||||
render: () => `
|
|
||||||
<style>${styles}</style>
|
|
||||||
<div class="typo-container">
|
|
||||||
<div class="section">
|
|
||||||
<h2>Composed Text Styles</h2>
|
|
||||||
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 3rem; font-weight: 700; line-height: 1;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">heading-1</span>
|
|
||||||
<span class="props">3rem / 700</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.875rem; font-weight: 600; line-height: 1.2;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">heading-2</span>
|
|
||||||
<span class="props">1.875rem / 600</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.5rem; font-weight: 600; line-height: 1.3;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">heading-3</span>
|
|
||||||
<span class="props">1.5rem / 600</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem; font-weight: 600; line-height: 1.4;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">heading-4</span>
|
|
||||||
<span class="props">1.25rem / 600</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.5;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">paragraph-regular</span>
|
|
||||||
<span class="props">1rem / 400</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.5;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">paragraph-bold</span>
|
|
||||||
<span class="props">1rem / 500</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="style-sample">
|
|
||||||
<div class="text" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 0.875rem; font-weight: 400; line-height: 1.5;">
|
|
||||||
The quick brown fox
|
|
||||||
</div>
|
|
||||||
<div class="meta">
|
|
||||||
<span class="name">paragraph-small-regular</span>
|
|
||||||
<span class="props">0.875rem / 400</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user