85 lines
2.3 KiB
Markdown
85 lines
2.3 KiB
Markdown
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
|
|
|
|
import {
|
|
Examples,
|
|
Example,
|
|
Note,
|
|
Title,
|
|
VariantsTable,
|
|
VariantColumn,
|
|
RowTitles,
|
|
CustomArgsTable,
|
|
} from "@calcom/storybook/components";
|
|
|
|
import { Tooltip } from "../tooltip";
|
|
import { FiPlus, FiX } from "../icon";
|
|
|
|
<Meta title="Layout/Spacing" />
|
|
|
|
<Title title="Spacing" suffix="Brief" subtitle="Version 2.0 — Last Update: 15 Feb 2023" />
|
|
|
|
## Definition
|
|
|
|
Defines the spacing guide used in Cal.coms design system
|
|
|
|
## Structure
|
|
|
|
<Examples title="Spacing">
|
|
<TooltipPrimitive.Provider>
|
|
<>
|
|
<Example title="0"></Example>
|
|
<Example title="px">
|
|
<Tooltip content="1px">
|
|
<div className="h-4 w-px bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="0.5">
|
|
<Tooltip content="2px">
|
|
<div className="h-4 w-0.5 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="1">
|
|
<Tooltip content="4px">
|
|
<div className="h-4 w-1 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="2">
|
|
<Tooltip content="8px">
|
|
<div className="h-4 w-2 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="3">
|
|
<Tooltip content="12px">
|
|
<div className="h-4 w-3 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="4">
|
|
<Tooltip content="16px">
|
|
<div className="h-4 w-4 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="5">
|
|
<Tooltip content="20px">
|
|
<div className="h-4 w-5 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="6">
|
|
<Tooltip content="24px">
|
|
<div className="h-4 w-6 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="8">
|
|
<Tooltip content="32px">
|
|
<div className="h-4 w-8 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
<Example title="10">
|
|
<Tooltip content="48px">
|
|
<div className="h-4 w-10 bg-gray-900 rounded-sm"> </div>
|
|
</Tooltip>
|
|
</Example>
|
|
</>
|
|
</TooltipPrimitive.Provider>
|
|
</Examples>
|