Skip to content

Commit 3b97706

Browse files
bogdaniculaebogdaniculae
committed
Restructure docs to focus on design-tokens
1 parent 85056a3 commit 3b97706

10 files changed

Lines changed: 356 additions & 539 deletions

File tree

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/design-library/README.md‎

Lines changed: 199 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,205 @@
1-
# Getting Started
1+
---
2+
sectionTitle: Tokens
3+
sectionOrder: 30
4+
---
25

3-
::: warning DEPRECATED
4-
This design library is deprecated. Please use [@bcc-code/design-tokens](https://www.npmjs.com/package/@bcc-code/design-tokens) with [PrimeVue](https://primevue.org/) instead.
6+
# Design Tokens
7+
8+
The `@bcc-code/design-tokens` package provides CSS variables, Tailwind CSS v4 utilities, and a PrimeVue Aura preset for building applications with the BCC Design System.
9+
10+
::: tip Recommended
11+
For Vue 3 projects, we recommend using **PrimeVue** with `@bcc-code/design-tokens` for the best development experience and full component library.
512
:::
613

7-
The design system consists of a set of [guidelines](../guidelines.md), tokens and components. These are implemented in CSS and we offer a Vue wrapper around the CSS library as well.
14+
## Installation
15+
16+
```bash
17+
npm install @bcc-code/design-tokens
18+
```
19+
20+
## Quick Start
21+
22+
Choose your integration method:
23+
24+
| Method | Best For | Components |
25+
|--------|----------|------------|
26+
| **PrimeVue** (recommended) | Vue 3 apps needing full component library | Yes - full PrimeVue components |
27+
| **Tailwind v4** | Any project using Tailwind | No - utility classes only |
28+
| **CSS Variables** | Any project, quick prototypes | No - variables only |
29+
30+
## Usage
31+
32+
### CSS Variables
33+
34+
Import the CSS variables in your main stylesheet:
35+
36+
```css
37+
@import '@bcc-code/design-tokens/css';
38+
```
39+
40+
Use the variables in your CSS:
41+
42+
```css
43+
.card {
44+
background: var(--color-elevation-surface-default);
45+
color: var(--color-text-default);
46+
padding: var(--space-300);
47+
border-radius: var(--border-radius-md);
48+
}
49+
```
50+
51+
### Tailwind CSS v4
52+
53+
For Tailwind CSS v4 projects, import the utilities:
54+
55+
```css
56+
@import '@bcc-code/design-tokens/tailwind';
57+
```
58+
59+
Use utility classes:
60+
61+
```html
62+
<div class="bg-elevation-surface-default text-default p-300 radius-md">
63+
Content
64+
</div>
65+
```
66+
67+
### PrimeVue Integration
68+
69+
Install the required peer dependencies:
70+
71+
```bash
72+
npm install primevue @primeuix/themes
73+
```
74+
75+
Configure PrimeVue in your app:
76+
77+
```javascript
78+
import { createApp } from 'vue'
79+
import PrimeVue from 'primevue/config'
80+
import BCCPreset from '@bcc-code/design-tokens/primevue'
81+
import '@bcc-code/design-tokens/primevue/overrides'
82+
83+
const app = createApp(App)
84+
85+
app.use(PrimeVue, {
86+
theme: {
87+
preset: BCCPreset,
88+
options: {
89+
darkModeSelector: '.dark',
90+
cssLayer: {
91+
name: 'primevue',
92+
order: 'theme, base, primevue, custom'
93+
}
94+
}
95+
}
96+
})
97+
```
98+
99+
See the [PrimeVue documentation](https://primevue.org/) for the full component list.
8100

9-
- [Vue components](./vue-components.md) when using Vue 3
10-
- [CSS library](./css-library.md) when not using Vue 3.
101+
### CDN Usage
11102

12-
::: tip
13-
View interactive examples of the components [in Storybook](https://design-library.developer.bcc.no)
103+
For projects without npm, include the CSS directly:
104+
105+
```html
106+
<!-- CSS variables -->
107+
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/auto.css">
108+
109+
<!-- Tailwind utilities -->
110+
<link rel="stylesheet" href="https://unpkg.com/@bcc-code/design-tokens@latest/build/bcc/css/tailwind-auto.css">
111+
```
112+
113+
::: warning Version Pinning
114+
Pin to a specific version instead of `@latest` to avoid unexpected breaking changes.
14115
:::
116+
117+
## Dark Mode
118+
119+
Dark mode is activated by adding the `.dark` class to the `html` element:
120+
121+
```html
122+
<html class="dark">
123+
<!-- Dark mode active -->
124+
</html>
125+
```
126+
127+
Toggle dark mode with JavaScript:
128+
129+
```javascript
130+
document.documentElement.classList.toggle('dark');
131+
```
132+
133+
The `auto.css` file automatically responds to system preferences via `prefers-color-scheme`.
134+
135+
## Available Exports
136+
137+
### CSS
138+
- `@bcc-code/design-tokens/css` - Auto-switching (prefers-color-scheme)
139+
- `@bcc-code/design-tokens/css/light` - Light theme only
140+
- `@bcc-code/design-tokens/css/dark` - Dark theme only
141+
142+
### Tailwind CSS
143+
- `@bcc-code/design-tokens/tailwind` - Auto-switching utilities
144+
- `@bcc-code/design-tokens/tailwind/light` - Light utilities only
145+
- `@bcc-code/design-tokens/tailwind/dark` - Dark utilities only
146+
147+
### JavaScript
148+
- `@bcc-code/design-tokens/js/light` - Light theme tokens as JS objects
149+
- `@bcc-code/design-tokens/js/dark` - Dark theme tokens as JS objects
150+
151+
### PrimeVue
152+
- `@bcc-code/design-tokens/primevue` - Aura preset configuration
153+
- `@bcc-code/design-tokens/primevue/overrides` - Component CSS overrides
154+
155+
## Token Categories
156+
157+
### Colors
158+
- **Text**: `--color-text-default`, `--color-text-subtle`, `--color-text-success`, etc.
159+
- **Backgrounds**: `--color-background-*`
160+
- **Elevation**: `--color-elevation-surface-default`, `--color-elevation-surface-sunken`
161+
- **Borders**: `--color-border-default`, `--color-border-subtle`
162+
- **Interactive**: `--color-interactive-primary`, hover/active states
163+
164+
### Spacing
165+
166+
| Token | Value |
167+
|-------|-------|
168+
| 50 | 4px |
169+
| 100 | 8px |
170+
| 150 | 12px |
171+
| 200 | 16px |
172+
| 300 | 24px |
173+
| 400 | 32px |
174+
| 500 | 40px |
175+
| 600 | 48px |
176+
| 800 | 64px |
177+
| 1000 | 80px |
178+
179+
```html
180+
<div class="p-200">Padding 16px</div>
181+
<div class="m-300">Margin 24px</div>
182+
<div class="gap-100">Gap 8px</div>
183+
```
184+
185+
### Border Radius
186+
187+
```html
188+
<div class="radius-sm">Small</div>
189+
<div class="radius-md">Medium</div>
190+
<div class="radius-lg">Large</div>
191+
<div class="radius-full">Full (pill)</div>
192+
```
193+
194+
## Fonts
195+
196+
The design system uses two fonts:
197+
- [Archivo](https://fonts.google.com/specimen/Archivo) - Primary font for UI text
198+
- [IBM Plex Serif](https://fonts.google.com/specimen/IBM+Plex+Serif) - Serif font
199+
200+
Include them via Google Fonts:
201+
202+
```html
203+
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@200..900&display=swap" rel="stylesheet">
204+
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&display=swap" rel="stylesheet">
205+
```

‎docs/design-library/contributing.md‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎docs/design-library/contributing/storybook-custom-control.png‎

-20.6 KB
Binary file not shown.

‎docs/design-library/contributing/storybook-slot.png‎

-14.9 KB
Binary file not shown.

0 commit comments

Comments
 (0)