IMBENJI.NET/Garage-SDKs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a design system for Claude Design, generated from garage_ui

Browse Source 
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the
components are CSS on top of them, and the cards cover foundations,
components and whole hub and Arcs & Angles screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
This commit is contained in:
ImBenji
2026-09-23 23:19:02 +01:00
co-authored by Claude Opus 5.5
parent 572c09039f
commit b5e5ed5b75
25 changed files with 3381 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design_system/tokens.json
+256
View File
@@ -0,0 +1,256 @@
{
"_generated": "by garage_ui/tool/export_design_tokens_test.dart - dont edit by hand",
"fonts": {
"sans": "Geist",
"mono": "Geist Mono"
},
"weights": {
"body": 300,
"control": 400,
"medium": 500,
"semibold": 600
},
"schemes": {
"carbon": {
"background": "#0d0d0d",
"foreground": "#f2f2f2",
"chrome": "#010101",
"surface-sunken": "#0a0a0a",
"card": "#1b1b1b",
"muted": "#0f0f0f",
"muted-foreground": "#8f8f8f",
"row-text": "#c2c2c2",
"row-hovered": "#222222",
"popover": "#000000",
"popover-border": "#1c1c1c",
"popover-item-hovered": "#1f1f1f",
"tooltip-background": "#080808",
"tooltip-border": "#1f1f1f",
"primary": "#e8e8e8",
"primary-hovered": "#fefefe",
"primary-foreground": "#000000",
"secondary": "#303030",
"secondary-hovered": "#424242",
"secondary-foreground": "#f2f2f2",
"destructive": "#c43333",
"control-fill": "#080808",
"control-fill-hovered": "#070707",
"control-fill-focused": "#000000",
"control-border": "#2a2a2a",
"switch-track-inactive": "#0f0f0f",
"border": "#010101",
"divider": "#202020",
"panel-border": "#222222",
"panel-border-highlighted": "#3a3a3a",
"properties-section-border": "#272727",
"ring": "#ffffff",
"chart-1": "#f45b69",
"chart-2": "#86d957",
"chart-3": "#62a7ff",
"chart-4": "#ffc857",
"chart-5": "#ff8c42"
},
"dark": {
"background": "#303030",
"foreground": "#e6e6e6",
"chrome": "#171717",
"surface-sunken": "#272727",
"card": "#3d3d3d",
"muted": "#1d1d1d",
"muted-foreground": "#999999",
"row-text": "#c1c1c1",
"row-hovered": "#474747",
"popover": "#191919",
"popover-border": "#2d2d2d",
"popover-item-hovered": "#424242",
"tooltip-background": "#1d1d1d",
"tooltip-border": "#303030",
"primary": "#4772b3",
"primary-hovered": "#6b8fc4",
"primary-foreground": "#ffffff",
"secondary": "#565656",
"secondary-hovered": "#676767",
"secondary-foreground": "#e6e6e6",
"destructive": "#a9575f",
"control-fill": "#1d1d1d",
"control-fill-hovered": "#222222",
"control-fill-focused": "#1a1a1a",
"control-border": "#353535",
"switch-track-inactive": "#1d1d1d",
"border": "#171717",
"divider": "#454545",
"panel-border": "#464646",
"panel-border-highlighted": "#606060",
"properties-section-border": "#4c4c4c",
"ring": "#6592d7",
"chart-1": "#ff3352",
"chart-2": "#8bdc00",
"chart-3": "#2890ff",
"chart-4": "#edba18",
"chart-5": "#ed5700"
},
"light": {
"background": "#f2f2f4",
"foreground": "#1a1a1c",
"chrome": "#cdcdd5",
"surface-sunken": "#e7e7ea",
"card": "#fefeff",
"muted": "#d7d7de",
"muted-foreground": "#65656d",
"row-text": "#3b3b40",
"row-hovered": "#fefeff",
"popover": "#d1d1d8",
"popover-border": "#ededf0",
"popover-item-hovered": "#fefeff",
"tooltip-background": "#d7d7de",
"tooltip-border": "#f2f2f4",
"primary": "#3a63a1",
"primary-hovered": "#537fc1",
"primary-foreground": "#ffffff",
"secondary": "#fefeff",
"secondary-hovered": "#fefeff",
"secondary-foreground": "#1a1a1c",
"destructive": "#b3474f",
"control-fill": "#d7d7de",
"control-fill-hovered": "#e0e0e4",
"control-fill-focused": "#d3d3d9",
"control-border": "#f9f9fa",
"switch-track-inactive": "#d7d7de",
"border": "#cdcdd5",
"divider": "#d8d8de",
"panel-border": "#d7d7dd",
"panel-border-highlighted": "#fefeff",
"properties-section-border": "#eaeaff",
"ring": "#4880d5",
"chart-1": "#ff3352",
"chart-2": "#8bdc00",
"chart-3": "#2890ff",
"chart-4": "#edba18",
"chart-5": "#ed5700"
}
},
"densities": {
"compact": {
"font-size": 10.0,
"line-height": 1.1,
"line-box": 11.0,
"control-height": 23.0,
"control-padding-x": 10.0,
"control-padding-y": 6.0,
"control-gap": 4.0,
"control-border-width": 1.0,
"menu-row-height": 20.0,
"popup-row-height": 20.0,
"explorer-row-height": 22.0,
"chrome-bar-height": 31.0,
"property-row-height": 28.0,
"label-column-height": 26.0,
"properties-section-gap": 6.0,
"explorer-row-base-padding": 4.0,
"explorer-row-end-padding": 10.0,
"list-row-indent": 6.0,
"container-gap": 8.0,
"container-padding": 16.0,
"gap-xxs": 2.0,
"gap-xs": 4.0,
"gap-sm": 6.0,
"gap-md": 8.0,
"gap-lg": 12.0,
"gap-xl": 16.0,
"gap-xxl": 24.0,
"text-xxs": 9.0,
"text-xs": 11.0,
"text-sm": 14.0,
"text-lg": 18.0,
"icon-sm": 10.0,
"icon-md": 20.0,
"icon-lg": 24.0
},
"normal": {
"font-size": 10.0,
"line-height": 1.1,
"line-box": 11.0,
"control-height": 27.0,
"control-padding-x": 12.0,
"control-padding-y": 8.0,
"control-gap": 5.0,
"control-border-width": 1.0,
"menu-row-height": 26.0,
"popup-row-height": 26.0,
"explorer-row-height": 30.0,
"chrome-bar-height": 37.0,
"property-row-height": 30.0,
"label-column-height": 26.0,
"properties-section-gap": 15.0,
"explorer-row-base-padding": 8.0,
"explorer-row-end-padding": 14.0,
"list-row-indent": 12.0,
"container-gap": 10.0,
"container-padding": 20.0,
"gap-xxs": 3.0,
"gap-xs": 5.0,
"gap-sm": 8.0,
"gap-md": 10.0,
"gap-lg": 15.0,
"gap-xl": 20.0,
"gap-xxl": 30.0,
"text-xxs": 9.0,
"text-xs": 11.0,
"text-sm": 14.0,
"text-lg": 18.0,
"icon-sm": 10.0,
"icon-md": 20.0,
"icon-lg": 24.0
},
"product": {
"font-size": 12.0,
"line-height": 1.25,
"line-box": 15.0,
"control-height": 33.0,
"control-padding-x": 10.0,
"control-padding-y": 9.0,
"control-gap": 5.0,
"control-border-width": 1.0,
"menu-row-height": 33.0,
"popup-row-height": 33.0,
"explorer-row-height": 29.0,
"chrome-bar-height": 43.0,
"property-row-height": 36.0,
"label-column-height": 31.0,
"properties-section-gap": 15.0,
"explorer-row-base-padding": 8.0,
"explorer-row-end-padding": 12.0,
"list-row-indent": 10.0,
"container-gap": 10.0,
"container-padding": 20.0,
"gap-xxs": 3.0,
"gap-xs": 5.0,
"gap-sm": 8.0,
"gap-md": 10.0,
"gap-lg": 15.0,
"gap-xl": 20.0,
"gap-xxl": 30.0,
"text-xxs": 11.0,
"text-xs": 13.0,
"text-sm": 17.0,
"text-lg": 22.0,
"icon-sm": 12.0,
"icon-md": 20.0,
"icon-lg": 24.0
}
},
"shape": {
"radius-xs": 2.0,
"radius-sm": 4.0,
"radius-md": 6.0,
"radius-lg": 8.0,
"radius-xl": 10.0,
"radius-xxl": 12.0,
"panel-radius": 10.0,
"panel-gap": 5.0,
"panel-border-width": 1.15,
"property-split": 0.4,
"property-label-gap": 10,
"dialog-max-width": 350
}
}