Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add border tokens and use rems for widths #1147

Merged
merged 11 commits into from
Mar 29, 2024
Prev Previous commit
Next Next commit
Add docs
  • Loading branch information
alimpens committed Mar 27, 2024
commit 04a7db3cbff7d600905e1888988a6a15cbe81c7a
20 changes: 20 additions & 0 deletions storybook/src/docs/borders.docs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Meta } from "@storybook/blocks";

<Meta title="Docs/Design Guidelines/Borders" />

# Borders

## Widths

We have 4 border widths:

| Size | px | rem | Token name |
| ----------- | --- | ------ | ------------------- |
| Small | 1 | 0.0625 | ams.border.width.sm |
| Medium | 2 | 0.125 | ams.border.width.md |
| Large | 3 | 0.1875 | ams.border.width.lg |
| Extra-large | 4 | 0.25 | ams.border.width.xl |
alimpens marked this conversation as resolved.
Show resolved Hide resolved

Use these widths when defining borders,
`box-shadow`s that look like borders,
`text-decoration-thickness`, et cetera.