/* 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; }