Add a design system for Claude Design, generated from garage_ui
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
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
572c09039f
commit
b5e5ed5b75
@@ -0,0 +1,259 @@
|
||||
/* garage_ui design tokens. Generated by garage_ui/tool/export_design_tokens_test.dart
|
||||
- dont edit by hand, rerun the export.
|
||||
Scheme: data-scheme="carbon" (default) | "dark" | "light"
|
||||
Density: data-density="product" (default) | "normal" | "compact" */
|
||||
|
||||
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap");
|
||||
|
||||
:root {
|
||||
--font-sans: "Geist", system-ui, sans-serif;
|
||||
--font-mono: "Geist Mono", ui-monospace, monospace;
|
||||
--weight-body: 300;
|
||||
--weight-control: 400;
|
||||
--weight-medium: 500;
|
||||
--weight-semibold: 600;
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--radius-xl: 10px;
|
||||
--radius-xxl: 12px;
|
||||
--panel-radius: 10px;
|
||||
--panel-gap: 5px;
|
||||
--panel-border-width: 1.15px;
|
||||
--property-split: 0.4;
|
||||
--property-label-gap: 10px;
|
||||
--dialog-max-width: 350px;
|
||||
}
|
||||
|
||||
:root, [data-scheme="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;
|
||||
}
|
||||
|
||||
[data-scheme="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;
|
||||
}
|
||||
|
||||
[data-scheme="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;
|
||||
}
|
||||
|
||||
:root, [data-density="product"] {
|
||||
--font-size: 12px;
|
||||
--line-height: 1.25;
|
||||
--line-box: 15px;
|
||||
--control-height: 33px;
|
||||
--control-padding-x: 10px;
|
||||
--control-padding-y: 9px;
|
||||
--control-gap: 5px;
|
||||
--control-border-width: 1px;
|
||||
--menu-row-height: 33px;
|
||||
--popup-row-height: 33px;
|
||||
--explorer-row-height: 29px;
|
||||
--chrome-bar-height: 43px;
|
||||
--property-row-height: 36px;
|
||||
--label-column-height: 31px;
|
||||
--properties-section-gap: 15px;
|
||||
--explorer-row-base-padding: 8px;
|
||||
--explorer-row-end-padding: 12px;
|
||||
--list-row-indent: 10px;
|
||||
--container-gap: 10px;
|
||||
--container-padding: 20px;
|
||||
--gap-xxs: 3px;
|
||||
--gap-xs: 5px;
|
||||
--gap-sm: 8px;
|
||||
--gap-md: 10px;
|
||||
--gap-lg: 15px;
|
||||
--gap-xl: 20px;
|
||||
--gap-xxl: 30px;
|
||||
--text-xxs: 11px;
|
||||
--text-xs: 13px;
|
||||
--text-sm: 17px;
|
||||
--text-lg: 22px;
|
||||
--icon-sm: 12px;
|
||||
--icon-md: 20px;
|
||||
--icon-lg: 24px;
|
||||
}
|
||||
|
||||
[data-density="compact"] {
|
||||
--font-size: 10px;
|
||||
--line-height: 1.1;
|
||||
--line-box: 11px;
|
||||
--control-height: 23px;
|
||||
--control-padding-x: 10px;
|
||||
--control-padding-y: 6px;
|
||||
--control-gap: 4px;
|
||||
--control-border-width: 1px;
|
||||
--menu-row-height: 20px;
|
||||
--popup-row-height: 20px;
|
||||
--explorer-row-height: 22px;
|
||||
--chrome-bar-height: 31px;
|
||||
--property-row-height: 28px;
|
||||
--label-column-height: 26px;
|
||||
--properties-section-gap: 6px;
|
||||
--explorer-row-base-padding: 4px;
|
||||
--explorer-row-end-padding: 10px;
|
||||
--list-row-indent: 6px;
|
||||
--container-gap: 8px;
|
||||
--container-padding: 16px;
|
||||
--gap-xxs: 2px;
|
||||
--gap-xs: 4px;
|
||||
--gap-sm: 6px;
|
||||
--gap-md: 8px;
|
||||
--gap-lg: 12px;
|
||||
--gap-xl: 16px;
|
||||
--gap-xxl: 24px;
|
||||
--text-xxs: 9px;
|
||||
--text-xs: 11px;
|
||||
--text-sm: 14px;
|
||||
--text-lg: 18px;
|
||||
--icon-sm: 10px;
|
||||
--icon-md: 20px;
|
||||
--icon-lg: 24px;
|
||||
}
|
||||
|
||||
[data-density="normal"] {
|
||||
--font-size: 10px;
|
||||
--line-height: 1.1;
|
||||
--line-box: 11px;
|
||||
--control-height: 27px;
|
||||
--control-padding-x: 12px;
|
||||
--control-padding-y: 8px;
|
||||
--control-gap: 5px;
|
||||
--control-border-width: 1px;
|
||||
--menu-row-height: 26px;
|
||||
--popup-row-height: 26px;
|
||||
--explorer-row-height: 30px;
|
||||
--chrome-bar-height: 37px;
|
||||
--property-row-height: 30px;
|
||||
--label-column-height: 26px;
|
||||
--properties-section-gap: 15px;
|
||||
--explorer-row-base-padding: 8px;
|
||||
--explorer-row-end-padding: 14px;
|
||||
--list-row-indent: 12px;
|
||||
--container-gap: 10px;
|
||||
--container-padding: 20px;
|
||||
--gap-xxs: 3px;
|
||||
--gap-xs: 5px;
|
||||
--gap-sm: 8px;
|
||||
--gap-md: 10px;
|
||||
--gap-lg: 15px;
|
||||
--gap-xl: 20px;
|
||||
--gap-xxl: 30px;
|
||||
--text-xxs: 9px;
|
||||
--text-xs: 11px;
|
||||
--text-sm: 14px;
|
||||
--text-lg: 18px;
|
||||
--icon-sm: 10px;
|
||||
--icon-md: 20px;
|
||||
--icon-lg: 24px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user