Skip to content

Commit 500d894

Browse files
bogdaniculaebogdaniculae
committed
Reorganize foundations into separate token pages
1 parent a0a9297 commit 500d894

File tree

6 files changed

+157
-71
lines changed

6 files changed

+157
-71
lines changed

‎docs/foundations/README.md‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,11 @@ Design tokens and visual styles that form the base of the design system.
1616
| Page | Description |
1717
| ----------------------------- | ------------------------------------------------ |
1818
| [Tokens](./tokens.md) | Semantic color tokens (text, background, border) |
19+
| [Spacing](./spacing.md) | Padding, margin, gap values |
1920
| [Colors](./colors.md) | Primitive color palette |
2021
| [Typography](./typography.md) | Font family, sizes, weights, headings |
21-
| [Spacing](./spacing.md) | Spacing scale, radius, shadows |
22-
| [Icons](./icons.md) | Icon library |
23-
| [Logos](./logos.md) | Logo assets (CDN) |
22+
| [Icons](./icons.md) | Icon library and sizes |
23+
| [Logos](./logos.md) | Logo assets |
24+
| [Elevation](./elevation.md) | Shadows |
25+
| [Border](./border.md) | Border width |
26+
| [Radius](./radius.md) | Border radius |

‎docs/foundations/border.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
sectionTitle: Foundations
3+
sectionOrder: 20
4+
title: Border
5+
order: 9
6+
---
7+
8+
# Border
9+
10+
Border tokens define the thickness of element edges. Use consistent width values for visual harmony.
11+
12+
## Width
13+
14+
| Token | Tailwind | CSS | Value |
15+
| ---------------- | ---------- | ------------------ | ----- |
16+
| `border.width.0` | `border-0` | `--border-width-0` | 0 |
17+
| `border.width.1` | `border-1` | `--border-width-1` | 1px |
18+
| `border.width.2` | `border-2` | `--border-width-2` | 2px |
19+
20+
## When to Use
21+
22+
- **0**: Remove borders (e.g., borderless inputs)
23+
- **1**: Default for most borders (cards, inputs, dividers)
24+
- **2**: Emphasis borders (active states, focus rings)
25+
26+
For border colors, see [Tokens](./tokens.md#border).

‎docs/foundations/elevation.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
sectionTitle: Foundations
3+
sectionOrder: 20
4+
title: Elevation
5+
order: 8
6+
---
7+
8+
# Elevation
9+
10+
Elevation creates visual hierarchy through shadows. Use shadows to show depth and separate content layers.
11+
12+
## Shadow
13+
14+
Shadows indicate elevation level. Higher elements cast larger shadows.
15+
16+
| Token | Tailwind | CSS | Use for |
17+
| ----------------- | ----------------- | ------------------- | --------------------------- |
18+
| `shadow.raised` | `shadow-raised` | `--shadow-raised` | Cards, subtle elevation |
19+
| `shadow.overlay` | `shadow-overlay` | `--shadow-overlay` | Modals, dropdowns, popovers |
20+
| `shadow.overflow` | `shadow-overflow` | `--shadow-overflow` | Scroll indicators |
21+
22+
### When to Use
23+
24+
- **raised**: Default for cards and interactive elements that need subtle lift
25+
- **overlay**: Floating elements that appear above the page (modals, menus, tooltips)
26+
- **overflow**: Indicate scrollable content has more items

‎docs/foundations/icons.md‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,19 +42,22 @@ Icons use PascalCase naming with an `Icon` suffix.
4242
| Menu | `MenuIcon` |
4343
| Settings | `SettingsIcon` |
4444

45-
### Sizing and Color
45+
### Sizing
4646

47-
Style icons with Tailwind utility classes:
47+
Use icon size tokens for consistent sizing:
4848

49-
```vue
50-
<!-- Small, gray icon -->
51-
<SearchIcon class="h-4 w-4 text-neutral-500" />
52-
53-
<!-- Medium, primary color -->
54-
<SearchIcon class="h-6 w-6 text-primary" />
49+
| Token | Tailwind | CSS | Value |
50+
| -------------- | --------- | ---------------- | ----- |
51+
| `icon.size.xs` | `icon-xs` | `--icon-size-xs` | 12px |
52+
| `icon.size.sm` | `icon-sm` | `--icon-size-sm` | 16px |
53+
| `icon.size.md` | `icon-md` | `--icon-size-md` | 20px |
54+
| `icon.size.lg` | `icon-lg` | `--icon-size-lg` | 24px |
55+
| `icon.size.xl` | `icon-xl` | `--icon-size-xl` | 32px |
5556

56-
<!-- Large, custom color -->
57-
<SearchIcon class="h-8 w-8 text-blue-600" />
57+
```vue
58+
<SearchIcon class="icon-sm text-subtle" />
59+
<SearchIcon class="icon-md text-default" />
60+
<SearchIcon class="icon-lg text-brand-default" />
5861
```
5962

6063
## Browse Available Icons

‎docs/foundations/radius.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
sectionTitle: Foundations
3+
sectionOrder: 20
4+
title: Radius
5+
order: 10
6+
---
7+
8+
# Radius
9+
10+
Rounded corners soften elements and create visual consistency. Use radius tokens to maintain uniform shapes across components.
11+
12+
## Scale
13+
14+
| Token | Tailwind | CSS | Value |
15+
| ------------- | -------------- | --------------- | -------------- |
16+
| `radius.none` | `rounded-none` | `--radius-none` | 0 |
17+
| `radius.2xs` | `rounded-2xs` | `--radius-2xs` | 0.125rem (2px) |
18+
| `radius.xs` | `rounded-xs` | `--radius-xs` | 0.25rem (4px) |
19+
| `radius.sm` | `rounded-sm` | `--radius-sm` | 0.375rem (6px) |
20+
| `radius.md` | `rounded-md` | `--radius-md` | 0.5rem (8px) |
21+
| `radius.lg` | `rounded-lg` | `--radius-lg` | 0.75rem (12px) |
22+
| `radius.xl` | `rounded-xl` | `--radius-xl` | 1rem (16px) |
23+
| `radius.2xl` | `rounded-2xl` | `--radius-2xl` | 1.5rem (24px) |
24+
| `radius.3xl` | `rounded-3xl` | `--radius-3xl` | 2rem (32px) |
25+
| `radius.4xl` | `rounded-4xl` | `--radius-4xl` | 3rem (48px) |
26+
| `radius.full` | `rounded-full` | `--radius-full` | 999px |
27+
28+
## When to Use
29+
30+
- **Small (2xs-sm)**: Buttons, inputs, badges, chips
31+
- **Medium (md-lg)**: Cards, containers, dialogs
32+
- **Large (xl-4xl)**: Modals, images, feature sections
33+
- **Full**: Avatars, pills, circular buttons

‎docs/foundations/spacing.md‎

Lines changed: 53 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ order: 3
77

88
# Spacing
99

10-
::: warning Work in Progress
11-
This section is under development.
12-
:::
10+
Consistent spacing creates visual harmony and helps users understand relationships between elements. Use spacing tokens instead of arbitrary pixel values.
1311

14-
**Always use design token spacing** (`p-spacing-100`, `m-spacing-200`) for consistent design. Standard Tailwind spacing (`p-2`, `m-4`) is available as a fallback for edge cases only.
12+
## Base Unit
1513

16-
## Spacing Scale
14+
The spacing scale is built on an **8px base unit**. Token values are multiples of this base (e.g., `spacing.100` = 1× = 8px, `spacing.200` = 2× = 16px).
15+
16+
## Scale
1717

1818
Use the `*-spacing-{value}` pattern where `*` = `p`, `m`, `gap`, `px`, `py`, `mx`, `my`, etc.
1919

@@ -34,58 +34,53 @@ Use the `*-spacing-{value}` pattern where `*` = `p`, `m`, `gap`, `px`, `py`, `mx
3434
| `spacing.800` | `*-spacing-800` | `--spacing-800` | 4rem (64px) |
3535
| `spacing.1000` | `*-spacing-1000` | `--spacing-1000` | 5rem (80px) |
3636

37+
## When to Use Each Size
38+
39+
### Small (2-8px)
40+
41+
Use for tight, related elements:
42+
43+
- Gap between icon and text
44+
- Padding inside compact components
45+
- Spacing between form label and input
46+
47+
### Medium (12-24px)
48+
49+
Use for component-level spacing:
50+
51+
- Padding inside buttons and cards
52+
- Gap between list items
53+
- Spacing between related form fields
54+
55+
### Large (32-80px)
56+
57+
Use for layout and sections:
58+
59+
- Margins between page sections
60+
- Padding around main content areas
61+
- Spacing between unrelated groups
62+
3763
## Negative Spacing
3864

39-
| Token | Tailwind | CSS | Value |
40-
| ---------------------- | ----------------- | ------------------------ | ---------------- |
41-
| `spacing.negative.25` | `-*-spacing-25` | `--spacing-negative-25` | -0.125rem (-2px) |
42-
| `spacing.negative.50` | `-*-spacing-50` | `--spacing-negative-50` | -0.25rem (-4px) |
43-
| `spacing.negative.75` | `-*-spacing-75` | `--spacing-negative-75` | -0.375rem (-6px) |
44-
| `spacing.negative.100` | `-*-spacing-100` | `--spacing-negative-100` | -0.5rem (-8px) |
45-
| `spacing.negative.150` | `-*-spacing-150` | `--spacing-negative-150` | -0.75rem (-12px) |
46-
| `spacing.negative.200` | `-*-spacing-200` | `--spacing-negative-200` | -1rem (-16px) |
47-
| `spacing.negative.250` | `-*-spacing-250` | `--spacing-negative-250` | -1.25rem (-20px) |
48-
| `spacing.negative.300` | `-*-spacing-300` | `--spacing-negative-300` | -1.5rem (-24px) |
49-
| `spacing.negative.400` | `-*-spacing-400` | `--spacing-negative-400` | -2rem (-32px) |
50-
51-
## Border Radius
52-
53-
| Token | Tailwind | CSS | Value |
54-
| ------------- | -------------- | --------------- | -------------- |
55-
| `radius.none` | `rounded-none` | `--radius-none` | 0 |
56-
| `radius.2xs` | `rounded-2xs` | `--radius-2xs` | 0.125rem (2px) |
57-
| `radius.xs` | `rounded-xs` | `--radius-xs` | 0.25rem (4px) |
58-
| `radius.sm` | `rounded-sm` | `--radius-sm` | 0.375rem (6px) |
59-
| `radius.md` | `rounded-md` | `--radius-md` | 0.5rem (8px) |
60-
| `radius.lg` | `rounded-lg` | `--radius-lg` | 0.75rem (12px) |
61-
| `radius.xl` | `rounded-xl` | `--radius-xl` | 1rem (16px) |
62-
| `radius.2xl` | `rounded-2xl` | `--radius-2xl` | 1.5rem (24px) |
63-
| `radius.3xl` | `rounded-3xl` | `--radius-3xl` | 2rem (32px) |
64-
| `radius.4xl` | `rounded-4xl` | `--radius-4xl` | 3rem (48px) |
65-
| `radius.full` | `rounded-full` | `--radius-full` | 999px |
66-
67-
## Border Width
68-
69-
| Token | Tailwind | CSS | Value |
70-
| ---------------- | ---------- | ------------------- | ----- |
71-
| `border.width.0` | `border-0` | `--border-width-0` | 0 |
72-
| `border.width.1` | `border-1` | `--border-width-1` | 1px |
73-
| `border.width.2` | `border-2` | `--border-width-2` | 2px |
74-
75-
## Shadow
76-
77-
| Token | Tailwind | CSS | Description |
78-
| ----------------- | ----------------- | ------------------- | --------------------------- |
79-
| `shadow.raised` | `shadow-raised` | `--shadow-raised` | Subtle elevation for cards |
80-
| `shadow.overlay` | `shadow-overlay` | `--shadow-overlay` | Modals, dropdowns, popovers |
81-
| `shadow.overflow` | `shadow-overflow` | `--shadow-overflow` | Scroll indicators |
82-
83-
## Icon Size
84-
85-
| Token | Tailwind | CSS | Value |
86-
| -------------- | --------- | ---------------- | ----- |
87-
| `icon.size.xs` | `icon-xs` | `--icon-size-xs` | 12px |
88-
| `icon.size.sm` | `icon-sm` | `--icon-size-sm` | 16px |
89-
| `icon.size.md` | `icon-md` | `--icon-size-md` | 20px |
90-
| `icon.size.lg` | `icon-lg` | `--icon-size-lg` | 24px |
91-
| `icon.size.xl` | `icon-xl` | `--icon-size-xl` | 32px |
65+
Use negative values to pull elements closer or overlap containers. Common for breaking out of parent padding.
66+
67+
| Token | Tailwind | CSS | Value |
68+
| ---------------------- | ---------------- | ------------------------ | ---------------- |
69+
| `spacing.negative.25` | `-*-spacing-25` | `--spacing-negative-25` | -0.125rem (-2px) |
70+
| `spacing.negative.50` | `-*-spacing-50` | `--spacing-negative-50` | -0.25rem (-4px) |
71+
| `spacing.negative.75` | `-*-spacing-75` | `--spacing-negative-75` | -0.375rem (-6px) |
72+
| `spacing.negative.100` | `-*-spacing-100` | `--spacing-negative-100` | -0.5rem (-8px) |
73+
| `spacing.negative.150` | `-*-spacing-150` | `--spacing-negative-150` | -0.75rem (-12px) |
74+
| `spacing.negative.200` | `-*-spacing-200` | `--spacing-negative-200` | -1rem (-16px) |
75+
| `spacing.negative.250` | `-*-spacing-250` | `--spacing-negative-250` | -1.25rem (-20px) |
76+
| `spacing.negative.300` | `-*-spacing-300` | `--spacing-negative-300` | -1.5rem (-24px) |
77+
| `spacing.negative.400` | `-*-spacing-400` | `--spacing-negative-400` | -2rem (-32px) |
78+
79+
## Guidelines
80+
81+
| Do | Don't |
82+
| ----------------------------------------------- | ------------------------------------------ |
83+
| Use spacing tokens (`p-spacing-100`) | Use arbitrary values (`p-[7px]`) |
84+
| Group related items with smaller spacing | Use the same spacing everywhere |
85+
| Increase spacing to separate unrelated sections | Cram elements together to save space |
86+
| Be consistent within similar components | Mix different spacing for the same purpose |

0 commit comments

Comments
 (0)