Skip to content

Commit 6f01f9a

Browse files
bogdaniculaebogdaniculae
authored
Bcc tokens 2.0 (#347)
* Restructure docs and update with correct token values - Reorganize into Getting Started, Core Concepts, Assets sections - Add PrimeVue, Tailwind, CSS setup guides - Fix spacing scale, colors, shadows, typography from bcc-tokens - Add CDN usage, JS imports, light/dark theme imports - Remove IBM Plex Serif (only Archivo font) * Create README.md
1 parent 54f6289 commit 6f01f9a

18 files changed

Lines changed: 706 additions & 390 deletions

File tree

‎docs/README.md‎

Lines changed: 10 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,39 @@
11
---
2-
sectionTitle: Design
2+
sectionTitle: BCC Tokens 2.0
33
---
44

5-
# BCC Design System
5+
# BCC Tokens 2.0
66

7-
Build consistent BCC applications with design tokens and components.
7+
Design tokens for building consistent BCC applications.
88

99
## Quick Start
1010

11-
Install the package:
12-
1311
```bash
1412
npm install @bcc-code/design-tokens
1513
```
1614

17-
Import in your CSS:
18-
1915
```css
2016
@import "@bcc-code/design-tokens/tailwind";
2117
```
2218

23-
Use in your HTML:
24-
2519
```html
2620
<div class="bg-elevation-surface-default text-default p-200 radius-md">
2721
Your content
2822
</div>
2923
```
3024

31-
That's it. You now have access to all BCC design tokens as Tailwind classes.
32-
33-
## Packages
34-
35-
| Package | What it does | Install |
36-
|---------|--------------|---------|
37-
| [@bcc-code/design-tokens](./tokens/) | Colors, typography, spacing as CSS/Tailwind | `npm i @bcc-code/design-tokens` |
38-
| [@bcc-code/icons-vue](./assets/icons/) | 200+ Vue 3 icon components | `npm i @bcc-code/icons-vue` |
39-
| [Logo assets](./assets/logos.md) | CDN-hosted BCC logos | No install needed |
40-
41-
## Common Examples
42-
43-
### Card with proper spacing
44-
45-
```html
46-
<div class="bg-elevation-surface-default p-300 radius-lg shadow-sm">
47-
<h2 class="text-heading-md text-default">Card Title</h2>
48-
<p class="text-body-md text-secondary mt-100">Card content goes here.</p>
49-
</div>
50-
```
51-
52-
### Button with brand colors
53-
54-
```html
55-
<button class="bg-interactive-brand text-on-interactive px-300 py-100 radius-md">
56-
Click me
57-
</button>
58-
```
59-
60-
### Using an icon
61-
62-
```vue
63-
<script setup>
64-
import { HomeIcon } from '@bcc-code/icons-vue'
65-
</script>
66-
67-
<template>
68-
<HomeIcon class="w-6 h-6 text-default" />
69-
</template>
70-
```
71-
72-
## Next Steps
25+
## Documentation
7326

74-
- **[Design Tokens](./tokens/)** - Full token reference and setup options
75-
- **[Guidelines](./tokens/guidelines.md)** - Do's and don'ts for using the system
76-
- **[Icons](./assets/icons/)** - Browse available icons
27+
| Section | Description |
28+
|---------|-------------|
29+
| [Getting Started](./getting-started/) | Installation and setup guides |
30+
| [Core Concepts](./core-concepts/) | Colors, spacing, typography, dark mode |
31+
| [Assets](./assets/) | Icons and logos |
7732

7833
## Resources
7934

8035
| Resource | Link |
8136
|----------|------|
82-
| Figma tokens | [BCC Foundation - Master](https://www.figma.com/file/jtWn3ebee6bJnWpfZrJzq1/BCC-Foundation---Master) |
37+
| Figma | [BCC Foundation - Master](https://www.figma.com/file/jtWn3ebee6bJnWpfZrJzq1/BCC-Foundation---Master) |
8338
| npm | [@bcc-code/design-tokens](https://www.npmjs.com/package/@bcc-code/design-tokens) |
8439
| GitHub | [bcc-code/bcc-design](https://github.com/bcc-code/bcc-design) |

‎docs/assets/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
---
22
sectionTitle: Assets
3-
sectionOrder: 40
3+
sectionOrder: 30
44
---
55

66
# Assets
77

8-
Brand assets for BCC applications.
8+
Visual assets for BCC applications.
99

10-
- [Icons](./icons/) - SVG icons based on Material Symbols
11-
- [Logos](./logos.md) - CDN-hosted logo assets
10+
- [Icons](./icons.md) - SVG icon library
11+
- [Logos](./logos.md) - CDN-hosted logo files

docs/assets/icons/README.md renamed to docs/assets/icons.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
title: Icons
3+
order: 1
4+
---
5+
16
# Icons
27

38
SVG icons based on [Material Symbols](https://fonts.google.com/icons) with **Weight 400**, **Grade 0**, **Size 24**.

‎docs/assets/logos.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
---
2+
title: Logos
3+
order: 2
4+
---
5+
16
# Logos
27

38
## Quickstart
@@ -28,7 +33,7 @@ https://design.bcc.no/logos/organisation-name_logo_color_size.png
2833
|:------------------ |:--------------------------------------------------------- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
2934
| bcc_logo_primary | [[svg]](https://design.bcc.no/logos/bcc_logo_primary.svg) | [[32]](https://design.bcc.no/logos/bcc_logo_primary_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_primary_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_primary_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_primary_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc_logo_primary_white_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_primary_white_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_primary_white_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_primary_white_72.png) |
3035
| bcc_logo_secondary | [[svg]](https://design.bcc.no/logos/bcc_logo_secondary.svg) | [[32]](https://design.bcc.no/logos/bcc_logo_secondary_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_secondary_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_secondary_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_secondary_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc_logo_secondary_white_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_secondary_white_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_secondary_white_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_secondary_white_72.png) |
31-
| bcc_logo_full | [[svg]](https://design.bcc.no/logos/bcc_logo_full.svg) | [[32]](https://design.bcc.no/logos/bcc_logo_full_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_full_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_full_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_full_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc_logo_full_white_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_full_white_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_full_white_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_full_white_72.png) |
36+
| bcc_logo_full | [[svg]](https://design.bcc.no/logos/bcc_logo_full.svg) | [[32]](https://design.bcc.no/logos/bcc_logo_full_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_full_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_full_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_full_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc_logo_full_white_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_full_white_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_full_white_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_full_white_72.png) |
3237
| bcc_logo_symbol | [[svg]](https://design.bcc.no/logos/bcc_logo_symbol.svg) | [[32]](https://design.bcc.no/logos/bcc_logo_symbol_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_symbol_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_symbol_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_symbol_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc_logo_symbol_white_32.png) - [[48]](https://design.bcc.no/logos/bcc_logo_symbol_white_48.png) - [[64]](https://design.bcc.no/logos/bcc_logo_symbol_white_64.png) - [[72]](https://design.bcc.no/logos/bcc_logo_symbol_white_72.png) |
3338
3439
| **Organisation** | **SVG** | **PNG - Dark green** | **PNG - White** |
@@ -68,4 +73,3 @@ https://design.bcc.no/logos/organisation-name_logo_color_size.png
6873
| **Organisation** | **SVG** | **PNG - Dark green** | **PNG - White** |
6974
|:------------------ |:--------------------------------------------------------- |:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
7075
| bcc-norge | [[svg]](https://design.bcc.no/logos/bcc-norge_logo.svg) | [[32]](https://design.bcc.no/logos/bcc-norge_logo_dark-green_32.png) - [[48]](https://design.bcc.no/logos/bcc-norge_logo_dark-green_48.png) - [[64]](https://design.bcc.no/logos/bcc-norge_logo_dark-green_64.png) - [[72]](https://design.bcc.no/logos/bcc-norge_logo_dark-green_72.png) | [[32]](https://design.bcc.no/logos/bcc-norge_logo_white_32.png) - [[48]](https://design.bcc.no/logos/bcc-norge_logo_white_48.png) - [[64]](https://design.bcc.no/logos/bcc-norge_logo_white_64.png) - [[72]](https://design.bcc.no/logos/bcc-norge_logo_white_72.png) |
71-

‎docs/core-concepts/README.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
sectionTitle: Core Concepts
3+
sectionOrder: 20
4+
---
5+
6+
# Core Concepts
7+
8+
Learn how to use BCC design tokens effectively.
9+
10+
- [Colors](./colors.md) - Semantic color tokens
11+
- [Spacing](./spacing.md) - Consistent spacing scale
12+
- [Typography](./typography.md) - Fonts and text styles
13+
- [Dark Mode](./dark-mode.md) - Theme switching
14+
- [Guidelines](./guidelines.md) - Do's and don'ts

‎docs/core-concepts/colors.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
title: Colors
3+
order: 1
4+
---
5+
6+
# Colors
7+
8+
Use semantic color tokens instead of hardcoded values. Semantic tokens automatically adapt to light and dark modes.
9+
10+
## Text Colors
11+
12+
| Token | CSS Variable | Tailwind Class |
13+
|-------|--------------|----------------|
14+
| Default | `--color-text-default` | `text-default` |
15+
| Subtle | `--color-text-subtle` | `text-subtle` |
16+
| Subtlest | `--color-text-subtlest` | `text-subtlest` |
17+
| Disabled | `--color-text-disabled` | `text-disabled` |
18+
| Inverse | `--color-text-inverse` | `text-inverse` |
19+
| Brand | `--color-text-brand-default` | `text-brand-default` |
20+
| Success | `--color-text-success` | `text-success` |
21+
| Danger | `--color-text-danger` | `text-danger` |
22+
| Warning | `--color-text-warning-default` | `text-warning-default` |
23+
| Information | `--color-text-information` | `text-information` |
24+
25+
## Background Colors
26+
27+
| Token | CSS Variable | Tailwind Class |
28+
|-------|--------------|----------------|
29+
| Surface Default | `--color-elevation-surface-default` | `bg-elevation-surface-default` |
30+
| Surface Raised | `--color-elevation-surface-raised` | `bg-elevation-surface-raised` |
31+
| Surface Overlay | `--color-elevation-surface-overlay` | `bg-elevation-surface-overlay` |
32+
| Surface Sunken | `--color-elevation-surface-sunken` | `bg-elevation-surface-sunken` |
33+
34+
## Border Colors
35+
36+
| Token | CSS Variable | Tailwind Class |
37+
|-------|--------------|----------------|
38+
| Default | `--color-border-default` | `border-default` |
39+
| Subtle | `--color-border-subtle` | `border-subtle` |
40+
| Bold | `--color-border-bold` | `border-bold` |
41+
42+
## Interactive Colors
43+
44+
| Token | CSS Variable | Tailwind Class |
45+
|-------|--------------|----------------|
46+
| Primary | `--color-interactive-primary` | `bg-interactive-primary` |
47+
| Primary Hover | `--color-interactive-primary-hover` | `bg-interactive-primary-hover` |
48+
| On Interactive | `--color-text-on-interactive` | `text-on-interactive` |
49+
50+
## Example
51+
52+
```html
53+
<div class="bg-elevation-surface-default border border-default text-default p-200">
54+
<p class="text-subtle">Secondary text</p>
55+
<button class="bg-interactive-primary text-on-interactive px-200 py-100 rounded-md">
56+
Action
57+
</button>
58+
</div>
59+
```
60+
61+
## Do's and Don'ts
62+
63+
| Do | Don't | Why |
64+
|----|-------|-----|
65+
| `text-default` | `text-gray-900` | Adapts to dark mode |
66+
| `text-subtle` | `text-gray-600` | Maintains contrast |
67+
| `bg-elevation-surface-default` | `bg-white` | Theme-aware |
68+
| `border-default` | `border-gray-200` | Consistent |
69+
70+
## Accent Colors
71+
72+
For specific accent needs, semantic accent tokens are available:
73+
74+
- `text-accent-gray-default`, `text-accent-gray-bold`
75+
- `text-accent-blue-default`, `text-accent-blue-bold`
76+
- `text-accent-teal-default`, `text-accent-teal-bold`
77+
- `text-accent-green-default`, `text-accent-green-bold`
78+
- `text-accent-yellow-default`, `text-accent-yellow-bold`
79+
- `text-accent-orange-default`, `text-accent-orange-bold`
80+
- `text-accent-red-default`, `text-accent-red-bold`
81+
- `text-accent-magenta-default`, `text-accent-magenta-bold`
82+
- `text-accent-purple-default`, `text-accent-purple-bold`

‎docs/core-concepts/dark-mode.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
title: Dark Mode
3+
order: 4
4+
---
5+
6+
# Dark Mode
7+
8+
All semantic tokens automatically adapt to dark mode. No additional configuration needed.
9+
10+
## Enable Dark Mode
11+
12+
Add the `dark` class to your HTML element:
13+
14+
```html
15+
<html class="dark">
16+
```
17+
18+
## Toggle Programmatically
19+
20+
```js
21+
// Toggle dark mode
22+
document.documentElement.classList.toggle("dark");
23+
24+
// Check current mode
25+
const isDark = document.documentElement.classList.contains("dark");
26+
```
27+
28+
## PrimeVue Setup
29+
30+
If using PrimeVue, configure the dark mode selector:
31+
32+
```js
33+
app.use(PrimeVue, {
34+
theme: {
35+
preset: BCCPreset,
36+
options: { darkModeSelector: ".dark" },
37+
},
38+
});
39+
```
40+
41+
## Testing
42+
43+
Always test components in both light and dark modes. Hardcoded colors break dark mode.
44+
45+
```html
46+
<!-- Wrong: breaks in dark mode -->
47+
<div class="bg-white text-black shadow-lg">
48+
49+
<!-- Right: works in both modes -->
50+
<div class="bg-elevation-surface-raised text-default shadow-md">
51+
```

‎docs/core-concepts/guidelines.md‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
---
2+
title: Guidelines
3+
order: 5
4+
---
5+
6+
# Guidelines
7+
8+
Best practices for using BCC Design Tokens.
9+
10+
## Components
11+
12+
Use PrimeVue with the BCC preset. Building from scratch creates inconsistency.
13+
14+
| Do | Don't |
15+
|----|-------|
16+
| Use PrimeVue components | Build custom components from scratch |
17+
| Apply BCC preset first | Start with unstyled components |
18+
| Extend existing components | Fork and modify component source |
19+
| Override specific tokens | Override all component styles |
20+
21+
## Common Mistakes
22+
23+
### Mixing Token Systems
24+
25+
Never mix BCC tokens with default Tailwind classes.
26+
27+
```html
28+
<!-- Wrong: mixing systems -->
29+
<div class="p-4 text-default bg-white border-gray-200">
30+
31+
<!-- Right: all BCC tokens -->
32+
<div class="p-200 text-default bg-elevation-surface-default border-default">
33+
```
34+
35+
### Hardcoding Colors in CSS
36+
37+
Use CSS custom properties instead of hex values.
38+
39+
```css
40+
/* Wrong */
41+
.card {
42+
background: #ffffff;
43+
color: #1a1a1a;
44+
}
45+
46+
/* Right */
47+
.card {
48+
background: var(--color-elevation-surface-default);
49+
color: var(--color-text-default);
50+
}
51+
```
52+
53+
## When to Use Custom Values
54+
55+
Custom values are acceptable in specific situations.
56+
57+
| Situation | Approach | Example |
58+
|-----------|----------|---------|
59+
| One-off layout dimensions | Tailwind arbitrary values | `w-[347px]` |
60+
| Animation timing | Define in component styles | `transition: 200ms` |
61+
| Third-party library | Match their API, wrap with tokens | Use tokens for colors |
62+
63+
If using the same custom value more than twice, request it as a token.
64+
65+
## Checklist
66+
67+
Before submitting code:
68+
69+
- [ ] No hardcoded color values (`#fff`, `white`, `gray-900`)
70+
- [ ] No default Tailwind spacing (`p-4`, `m-2`, `gap-6`)
71+
- [ ] All colors use semantic tokens (`text-default`, `bg-elevation-*`)
72+
- [ ] Component works in dark mode
73+
- [ ] Using PrimeVue components where available

0 commit comments

Comments
 (0)