@amedia/brick-mcp 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/components/brick-alt-teaser.md +9 -4
- package/data/components/brick-button.md +3 -2
- package/data/components/brick-byline.md +138 -0
- package/data/components/brick-carousel.md +8 -6
- package/data/components/brick-classnames.md +19 -14
- package/data/components/brick-dialog.md +3 -3
- package/data/components/brick-expand.md +129 -0
- package/data/components/brick-illustrations.md +6 -5
- package/data/components/brick-pill.md +9 -7
- package/data/components/brick-player.md +6 -3
- package/data/components/brick-share.md +5 -2
- package/data/components/brick-skip-link.md +78 -0
- package/data/components/brick-stepper.md +2 -2
- package/data/components/brick-teaser.md +8 -7
- package/data/components/brick-tokens.md +12 -8
- package/data/components-metadata.json +41 -29
- package/data/tokens-documentation.json +4 -5
- package/data/tokens.json +8 -0
- package/dist/data/components/brick-alt-teaser.md +9 -4
- package/dist/data/components/brick-button.md +3 -2
- package/dist/data/components/brick-byline.md +138 -0
- package/dist/data/components/brick-carousel.md +8 -6
- package/dist/data/components/brick-classnames.md +19 -14
- package/dist/data/components/brick-dialog.md +3 -3
- package/dist/data/components/brick-expand.md +129 -0
- package/dist/data/components/brick-illustrations.md +6 -5
- package/dist/data/components/brick-pill.md +9 -7
- package/dist/data/components/brick-player.md +6 -3
- package/dist/data/components/brick-share.md +5 -2
- package/dist/data/components/brick-skip-link.md +78 -0
- package/dist/data/components/brick-stepper.md +2 -2
- package/dist/data/components/brick-teaser.md +8 -7
- package/dist/data/components/brick-tokens.md +12 -8
- package/dist/data/components-metadata.json +41 -29
- package/dist/data/tokens-documentation.json +4 -5
- package/dist/data/tokens.json +8 -0
- package/package.json +34 -34
- package/scripts/check-docs-versions.js +121 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: brick-skip-link
|
|
3
|
+
version: 0.0.1
|
|
4
|
+
selector: brick-skip-link-v0
|
|
5
|
+
category: Navigation
|
|
6
|
+
tags: [accessibility, a11y, skip-link, navigation, focus, keyboard, bypass]
|
|
7
|
+
use_cases: [main-navigation, header, keyboard-navigation, accessibility-improvement, bypass-blocks]
|
|
8
|
+
related: []
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Brick Skip Link
|
|
12
|
+
|
|
13
|
+
A component that allows keyboard users to bypass blocks of repetitive content, such as navigation menus.
|
|
14
|
+
|
|
15
|
+
## Key Capabilities
|
|
16
|
+
|
|
17
|
+
- Provides a "skip to content" link for improved keyboard navigation.
|
|
18
|
+
- Becomes visible only when it receives focus via keyboard tabbing.
|
|
19
|
+
- Helps users meet WCAG 2.4.1 (Bypass Blocks).
|
|
20
|
+
- Renders a semantic `<a>` tag for accessibility and SEO.
|
|
21
|
+
- Customizable link text and target element ID.
|
|
22
|
+
- Server-side rendering support for immediate availability.
|
|
23
|
+
|
|
24
|
+
## Props/Attributes
|
|
25
|
+
|
|
26
|
+
| Attribute | Type | Default | Required | Description |
|
|
27
|
+
| ----------- | ------ | ----------------------- | -------- | ---------------------------------------------------- |
|
|
28
|
+
| `data-href` | string | - | yes | The selector for the target element (e.g., `#main`). |
|
|
29
|
+
| `data-text` | string | "Skip to main content" | no | The accessible text for the link. |
|
|
30
|
+
|
|
31
|
+
## Usage
|
|
32
|
+
|
|
33
|
+
### Server-side rendering (preferred)
|
|
34
|
+
|
|
35
|
+
Import the render function from the `/template` submodule and call it to produce an HTML string.
|
|
36
|
+
|
|
37
|
+
```ts
|
|
38
|
+
import { renderBrickSkipLink } from '@amedia/brick-skip-link/template';
|
|
39
|
+
|
|
40
|
+
const html = renderBrickSkipLink({
|
|
41
|
+
dataHref: '#main-content',
|
|
42
|
+
dataText: 'Hopp til hovedinnhold'
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
// Include CSS file
|
|
46
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-skip-link/v0/css/styles.css">
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Client-side (declarative HTML)
|
|
50
|
+
|
|
51
|
+
Use the custom element directly in HTML
|
|
52
|
+
|
|
53
|
+
```html
|
|
54
|
+
<script type="module" src="https://assets.acdn.no/pkg/@amedia/brick-skip-link/v0/brick-skip-link.js"></script>
|
|
55
|
+
|
|
56
|
+
<brick-skip-link-v0 data-href="#main-content" data-text="Hopp til hovedinnhold"></brick-skip-link-v0>
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
## Accessibility
|
|
60
|
+
|
|
61
|
+
This component is a fundamental accessibility feature.
|
|
62
|
+
|
|
63
|
+
- **Bypass Blocks**: It directly addresses WCAG 2.4.1 by providing a mechanism to bypass blocks of content that are repeated on multiple Web pages.
|
|
64
|
+
- **Focus Management**: The component is designed to be visually hidden until it receives keyboard focus, making it unobtrusive for mouse users but available for keyboard and screen reader users.
|
|
65
|
+
- **Semantic HTML**: It renders a native `<a>` element with a valid `href`, ensuring it is correctly identified as a link by assistive technologies.
|
|
66
|
+
|
|
67
|
+
## Technical Details
|
|
68
|
+
|
|
69
|
+
- **Package version**: `0.0.1`
|
|
70
|
+
- **Custom Element tag**: `brick-skip-link-v0`
|
|
71
|
+
- **Dependencies**:
|
|
72
|
+
- `@amedia/brick-template`
|
|
73
|
+
- `@amedia/brick-tokens`
|
|
74
|
+
|
|
75
|
+
## Important Notes
|
|
76
|
+
|
|
77
|
+
- For the skip link to be effective, it should be one of the very first focusable elements in the page's DOM, ideally right after the `<body>` tag.
|
|
78
|
+
- The value of `data-href` must be a valid CSS selector that points to a single, existing element on the page (e.g., `#main-content`). The target element should have a corresponding `id`.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: brick-stepper
|
|
3
|
-
version: 1.
|
|
3
|
+
version: 1.1.9
|
|
4
4
|
selector: brick-stepper-v1
|
|
5
5
|
category: Navigation
|
|
6
6
|
tags: [stepper, progress, steps, wizard, multi-step, process, indicator, accessibility]
|
|
@@ -316,4 +316,4 @@ function CheckoutFlow() {
|
|
|
316
316
|
|
|
317
317
|
## Version
|
|
318
318
|
|
|
319
|
-
Current version: 1.
|
|
319
|
+
Current version: 1.1.9
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: brick-teaser
|
|
3
|
-
version:
|
|
3
|
+
version: 22.2.9
|
|
4
4
|
selector: brick-teaser-v22
|
|
5
5
|
category: Data Display
|
|
6
6
|
tags: [teaser, card, article, content, preview, link, image, metadata]
|
|
7
7
|
use_cases: [article-listings, content-grids, news-feeds, content-previews, homepage, front-page]
|
|
8
|
-
related: [brick-image, brick-avatar, brick-countdown, brick-icon, brick-pill, brick-player, brick-button]
|
|
8
|
+
related: [brick-image, brick-avatar, brick-countdown, brick-icon, brick-pill, brick-teaser-player, brick-button]
|
|
9
9
|
---
|
|
10
10
|
|
|
11
11
|
# Brick Teaser
|
|
@@ -19,7 +19,7 @@ A comprehensive content teaser/card component for displaying article previews wi
|
|
|
19
19
|
- Avatar support for authors/publications
|
|
20
20
|
- Countdown timer integration
|
|
21
21
|
- Premium content indicators (pill badges)
|
|
22
|
-
- Video player
|
|
22
|
+
- Video teaser support (inline playback via brick-teaser-player)
|
|
23
23
|
- Breaking news styling
|
|
24
24
|
- Commercial/sponsored content support
|
|
25
25
|
- Analytics (ADP) integration
|
|
@@ -62,7 +62,7 @@ The component supports multiple content types:
|
|
|
62
62
|
|
|
63
63
|
### Interactive Elements
|
|
64
64
|
- Clickable teaser links
|
|
65
|
-
- Video player
|
|
65
|
+
- Video teaser support (inline playback via brick-teaser-player)
|
|
66
66
|
- Countdown timers for live events
|
|
67
67
|
- Action buttons
|
|
68
68
|
|
|
@@ -246,12 +246,13 @@ The component integrates with ADP (Amedia Data Platform):
|
|
|
246
246
|
|
|
247
247
|
## Important Notes
|
|
248
248
|
|
|
249
|
-
- Version
|
|
249
|
+
- Version 22.2.9 is the current stable version (mature component)
|
|
250
250
|
- Supports complex teaser configurations with many optional features
|
|
251
251
|
- Integrates deeply with Amedia's content management system (ACP)
|
|
252
252
|
- The component is highly configurable for different content types
|
|
253
253
|
- Breaking news, premium, and commercial content have special styling
|
|
254
|
-
-
|
|
254
|
+
- **Breaking change in v22.0.0**: Removed `playOnFront` attribute and inline video playback functionality. Use `brick-teaser-player` for teasers that play videos
|
|
255
|
+
- Video teasers now require `brick-teaser-player` wrapper for inline playback
|
|
255
256
|
- Gallery teasers show image count
|
|
256
257
|
- Countdown timers for live events
|
|
257
258
|
- The component generates custom-elements.json for IDE autocomplete
|
|
@@ -259,4 +260,4 @@ The component integrates with ADP (Amedia Data Platform):
|
|
|
259
260
|
|
|
260
261
|
## Version
|
|
261
262
|
|
|
262
|
-
Current version:
|
|
263
|
+
Current version: 22.2.9
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: brick-tokens
|
|
3
|
-
version: 6.
|
|
3
|
+
version: 6.2.1
|
|
4
4
|
selector: N/A
|
|
5
5
|
category: Utilities
|
|
6
6
|
tags: [design-tokens, css, styling, themes, colors, spacing, typography, shadows]
|
|
@@ -106,11 +106,11 @@ Load the theme CSS file and set the corresponding class on a container (e.g. `<b
|
|
|
106
106
|
|
|
107
107
|
```html
|
|
108
108
|
<!-- Load theme CSS from Eik CDN -->
|
|
109
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
110
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
111
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
112
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
113
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
109
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alfa/styles.css" crossorigin="anonymous" />
|
|
110
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/bravo/styles.css" crossorigin="anonymous" />
|
|
111
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/charlie/styles.css" crossorigin="anonymous" />
|
|
112
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/nettavisen/styles.css" crossorigin="anonymous" />
|
|
113
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alt/styles.css" crossorigin="anonymous" />
|
|
114
114
|
|
|
115
115
|
<!-- Apply theme class to a container -->
|
|
116
116
|
<body class="themeAlfa">...</body>
|
|
@@ -128,7 +128,7 @@ The package provides multiple formats:
|
|
|
128
128
|
|
|
129
129
|
```html
|
|
130
130
|
<!-- Load theme CSS (one per page) -->
|
|
131
|
-
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.
|
|
131
|
+
<link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.2.1/css/alfa/styles.css" crossorigin="anonymous" />
|
|
132
132
|
```
|
|
133
133
|
|
|
134
134
|
## Common Token Examples
|
|
@@ -188,10 +188,14 @@ npm run validate # Validate CSS files
|
|
|
188
188
|
|
|
189
189
|
## Important Notes
|
|
190
190
|
|
|
191
|
-
- Version 6.
|
|
191
|
+
- Version 6.2.1 is the current stable version
|
|
192
192
|
- Tokens are generated from Figma via Tokens Studio + Style Dictionary
|
|
193
193
|
- CSS custom properties use `--brick-{category}-{tokenName}` prefix (e.g. `--brick-colors-baseFg`, `--brick-space-x1`)
|
|
194
194
|
- Theme CSS files are scoped to a class (e.g. `.themeAlfa`) — apply the class to a container element
|
|
195
195
|
- There is no single `tokens.css` — CSS is per-theme: `dist/css/{theme}/styles.css`
|
|
196
196
|
- The package is used by all Brick components for consistent styling
|
|
197
197
|
- `sroStyle` is a utility class export for screen-reader-only visually hidden content
|
|
198
|
+
- Brand accent colors available since v6.2.0: `custom-one`, `custom-two`, `custom-three`, and `opinion` with `surface`, `surface-subtle`, and `text` variants
|
|
199
|
+
- Brand-specific publication colors available since v6.1.0 via CDN:
|
|
200
|
+
- CSS: `https://assets.acdn.no/pkg/@amedia/brick-tokens/v6/brand/css/{publication-key}/styles.css`
|
|
201
|
+
- JSON: `https://assets.acdn.no/pkg/@amedia/brick-tokens/v6/brand/mobile/{publication-key}/colors.json`
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
[
|
|
2
2
|
{
|
|
3
3
|
"name": "brick-alt-teaser",
|
|
4
|
-
"version": "8.1.
|
|
4
|
+
"version": "8.1.23",
|
|
5
5
|
"selector": "brick-alt-teaser-v8",
|
|
6
6
|
"category": "Display",
|
|
7
7
|
"tags": [
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "brick-avatar",
|
|
14
|
-
"version": "0.2.
|
|
14
|
+
"version": "0.2.60",
|
|
15
15
|
"selector": "brick-avatar-v0",
|
|
16
16
|
"description": "brick-avatar component",
|
|
17
17
|
"category": "Display",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
{
|
|
25
25
|
"name": "brick-button",
|
|
26
|
-
"version": "9.4.
|
|
26
|
+
"version": "9.4.18",
|
|
27
27
|
"selector": "brick-button-v9",
|
|
28
28
|
"category": "Forms",
|
|
29
29
|
"tags": [
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
"name": "brick-byline",
|
|
38
|
-
"version": "1.0.
|
|
38
|
+
"version": "1.0.22",
|
|
39
39
|
"selector": "brick-byline-v1",
|
|
40
40
|
"description": "brick-byline component",
|
|
41
41
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-byline",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
"name": "brick-card",
|
|
46
|
-
"version": "7.3.
|
|
46
|
+
"version": "7.3.32",
|
|
47
47
|
"selector": "brick-card-v7",
|
|
48
48
|
"category": "Layout",
|
|
49
49
|
"tags": [
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
},
|
|
55
55
|
{
|
|
56
56
|
"name": "brick-carousel",
|
|
57
|
-
"version": "2.3.
|
|
57
|
+
"version": "2.3.5",
|
|
58
58
|
"selector": "brick-carousel-v2",
|
|
59
59
|
"description": "Simple carousel for any content passed to it.",
|
|
60
60
|
"category": "Display",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
},
|
|
79
79
|
{
|
|
80
80
|
"name": "brick-countdown",
|
|
81
|
-
"version": "3.0.
|
|
81
|
+
"version": "3.0.7",
|
|
82
82
|
"selector": "brick-countdown-v3",
|
|
83
83
|
"description": "brick-countdown component",
|
|
84
84
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-countdown",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
},
|
|
87
87
|
{
|
|
88
88
|
"name": "brick-dialog",
|
|
89
|
-
"version": "2.1.
|
|
89
|
+
"version": "2.1.15",
|
|
90
90
|
"selector": "brick-dialog-v2",
|
|
91
91
|
"description": "brick-dialog component",
|
|
92
92
|
"category": "Feedback",
|
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
},
|
|
99
99
|
{
|
|
100
100
|
"name": "brick-expand",
|
|
101
|
-
"version": "0.0.
|
|
101
|
+
"version": "0.0.27",
|
|
102
102
|
"selector": "brick-expand-v0",
|
|
103
103
|
"description": "brick-expand component",
|
|
104
104
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-expand",
|
|
@@ -117,7 +117,7 @@
|
|
|
117
117
|
},
|
|
118
118
|
{
|
|
119
119
|
"name": "brick-helloworld",
|
|
120
|
-
"version": "2.0.
|
|
120
|
+
"version": "2.0.28",
|
|
121
121
|
"selector": "brick-helloworld-v2",
|
|
122
122
|
"description": "Brick Hello World component",
|
|
123
123
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-helloworld",
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
},
|
|
126
126
|
{
|
|
127
127
|
"name": "brick-icon",
|
|
128
|
-
"version": "2.3.
|
|
128
|
+
"version": "2.3.24",
|
|
129
129
|
"selector": "brick-icon-v2",
|
|
130
130
|
"category": "Display",
|
|
131
131
|
"tags": [
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
},
|
|
144
144
|
{
|
|
145
145
|
"name": "brick-image",
|
|
146
|
-
"version": "6.0.
|
|
146
|
+
"version": "6.0.27",
|
|
147
147
|
"selector": "brick-image-v6",
|
|
148
148
|
"category": "Display",
|
|
149
149
|
"tags": [
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
},
|
|
155
155
|
{
|
|
156
156
|
"name": "brick-input",
|
|
157
|
-
"version": "4.0.
|
|
157
|
+
"version": "4.0.7",
|
|
158
158
|
"selector": "brick-input-v4",
|
|
159
159
|
"description": "brick-input component",
|
|
160
160
|
"category": "Forms",
|
|
@@ -167,14 +167,14 @@
|
|
|
167
167
|
},
|
|
168
168
|
{
|
|
169
169
|
"name": "brick-pill",
|
|
170
|
-
"version": "10.1.
|
|
170
|
+
"version": "10.1.6",
|
|
171
171
|
"selector": "brick-pill-v10",
|
|
172
172
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-pill",
|
|
173
173
|
"mainJsFile": "brick-pill.js"
|
|
174
174
|
},
|
|
175
175
|
{
|
|
176
176
|
"name": "brick-player",
|
|
177
|
-
"version": "2.3
|
|
177
|
+
"version": "2.4.3",
|
|
178
178
|
"selector": "brick-player-v2",
|
|
179
179
|
"description": "Component for playing video and audio files",
|
|
180
180
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-player",
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
},
|
|
183
183
|
{
|
|
184
184
|
"name": "brick-published",
|
|
185
|
-
"version": "4.0.
|
|
185
|
+
"version": "4.0.23",
|
|
186
186
|
"selector": "brick-published-v4",
|
|
187
187
|
"description": "brick-published",
|
|
188
188
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-published",
|
|
@@ -190,15 +190,27 @@
|
|
|
190
190
|
},
|
|
191
191
|
{
|
|
192
192
|
"name": "brick-share",
|
|
193
|
-
"version": "0.3
|
|
193
|
+
"version": "0.4.3",
|
|
194
194
|
"selector": "brick-share-v0",
|
|
195
195
|
"description": "brick-share component",
|
|
196
196
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-share",
|
|
197
197
|
"mainJsFile": "brick-share.js"
|
|
198
198
|
},
|
|
199
|
+
{
|
|
200
|
+
"name": "brick-skip-link",
|
|
201
|
+
"version": "0.0.2",
|
|
202
|
+
"selector": "brick-skip-link-v0",
|
|
203
|
+
"description": "brick-skip-link component",
|
|
204
|
+
"category": "Navigation",
|
|
205
|
+
"tags": [
|
|
206
|
+
"navigation"
|
|
207
|
+
],
|
|
208
|
+
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-skip-link",
|
|
209
|
+
"mainJsFile": "brick-skip-link.js"
|
|
210
|
+
},
|
|
199
211
|
{
|
|
200
212
|
"name": "brick-stepper",
|
|
201
|
-
"version": "1.1.
|
|
213
|
+
"version": "1.1.9",
|
|
202
214
|
"selector": "brick-stepper-v1",
|
|
203
215
|
"description": "brick-stepper component",
|
|
204
216
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-stepper",
|
|
@@ -206,7 +218,7 @@
|
|
|
206
218
|
},
|
|
207
219
|
{
|
|
208
220
|
"name": "brick-tab",
|
|
209
|
-
"version": "0.1.
|
|
221
|
+
"version": "0.1.30",
|
|
210
222
|
"selector": "brick-tab-v0",
|
|
211
223
|
"description": "brick-tab component",
|
|
212
224
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tab",
|
|
@@ -214,7 +226,7 @@
|
|
|
214
226
|
},
|
|
215
227
|
{
|
|
216
228
|
"name": "brick-tabs",
|
|
217
|
-
"version": "0.1.
|
|
229
|
+
"version": "0.1.31",
|
|
218
230
|
"selector": "brick-tabs-v0",
|
|
219
231
|
"description": "brick-tabs component handling tablist, tabs and tabpanel",
|
|
220
232
|
"category": "Navigation",
|
|
@@ -226,7 +238,7 @@
|
|
|
226
238
|
},
|
|
227
239
|
{
|
|
228
240
|
"name": "brick-tag",
|
|
229
|
-
"version": "0.0.
|
|
241
|
+
"version": "0.0.30",
|
|
230
242
|
"selector": "brick-tag-v0",
|
|
231
243
|
"description": "brick-tag component",
|
|
232
244
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tag",
|
|
@@ -234,7 +246,7 @@
|
|
|
234
246
|
},
|
|
235
247
|
{
|
|
236
248
|
"name": "brick-teaser",
|
|
237
|
-
"version": "22.
|
|
249
|
+
"version": "22.2.9",
|
|
238
250
|
"selector": "brick-teaser-v22",
|
|
239
251
|
"description": "Teaser component.",
|
|
240
252
|
"category": "Display",
|
|
@@ -246,7 +258,7 @@
|
|
|
246
258
|
},
|
|
247
259
|
{
|
|
248
260
|
"name": "brick-teaser-player",
|
|
249
|
-
"version": "1.1.
|
|
261
|
+
"version": "1.1.20",
|
|
250
262
|
"selector": "brick-teaser-player-v1",
|
|
251
263
|
"description": "brick-video-teaser component",
|
|
252
264
|
"category": "Display",
|
|
@@ -258,7 +270,7 @@
|
|
|
258
270
|
},
|
|
259
271
|
{
|
|
260
272
|
"name": "brick-teaser-reels",
|
|
261
|
-
"version": "0.4.
|
|
273
|
+
"version": "0.4.22",
|
|
262
274
|
"selector": "brick-teaser-reels-v0",
|
|
263
275
|
"description": "brick-teaser-reels component",
|
|
264
276
|
"category": "Display",
|
|
@@ -270,7 +282,7 @@
|
|
|
270
282
|
},
|
|
271
283
|
{
|
|
272
284
|
"name": "brick-textarea",
|
|
273
|
-
"version": "2.0.
|
|
285
|
+
"version": "2.0.26",
|
|
274
286
|
"selector": "brick-textarea-v2",
|
|
275
287
|
"description": "brick-textarea component",
|
|
276
288
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-textarea",
|
|
@@ -286,7 +298,7 @@
|
|
|
286
298
|
},
|
|
287
299
|
{
|
|
288
300
|
"name": "brick-toast",
|
|
289
|
-
"version": "0.1.
|
|
301
|
+
"version": "0.1.44",
|
|
290
302
|
"selector": "brick-toast-v0",
|
|
291
303
|
"description": "brick-toast component",
|
|
292
304
|
"category": "Feedback",
|
|
@@ -298,7 +310,7 @@
|
|
|
298
310
|
},
|
|
299
311
|
{
|
|
300
312
|
"name": "brick-toggle",
|
|
301
|
-
"version": "3.1.
|
|
313
|
+
"version": "3.1.32",
|
|
302
314
|
"selector": "brick-toggle-v3",
|
|
303
315
|
"description": "brick-toggle component",
|
|
304
316
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toggle",
|
|
@@ -306,7 +318,7 @@
|
|
|
306
318
|
},
|
|
307
319
|
{
|
|
308
320
|
"name": "brick-tokens",
|
|
309
|
-
"version": "6.
|
|
321
|
+
"version": "6.2.1",
|
|
310
322
|
"selector": "brick-tokens-v6",
|
|
311
323
|
"description": "Tokens package",
|
|
312
324
|
"category": "Utilities",
|
|
@@ -318,7 +330,7 @@
|
|
|
318
330
|
},
|
|
319
331
|
{
|
|
320
332
|
"name": "brick-tooltip",
|
|
321
|
-
"version": "1.0.
|
|
333
|
+
"version": "1.0.33",
|
|
322
334
|
"selector": "brick-tooltip-v1",
|
|
323
335
|
"description": "brick-tooltip component",
|
|
324
336
|
"assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tooltip",
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
{
|
|
2
|
-
"anOverview": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport Code from './assets/code-brackets.svg';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"
|
|
3
|
-
"formats": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"
|
|
4
|
-
"naming": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\nimport Repo from './assets/repo.svg';\nimport Open from './assets/open.svg';\n\n<Meta title=\"
|
|
5
|
-
"themes": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"
|
|
6
|
-
"usage": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Brick Tokens/Documentation/Usage\" />\n<brick-style></brick-style>\n\n# Usage\n\nUsage may differ between technoloies. The examples below are focusing on web.\n\n#### Existing Brick Components\n\nWhenever possible, leverage or enhance existing brick components within your web app.\n\n#### Use Design Tokens for styling\n\nStyling with this approach facilitates the automatic adaptation of variable values based on the theme.\n\nRead more about the different [formats](?path=/docs/brick-tokens-documentation-formats--documentation), the tokens available at the [tokens pages](?path=/story/brick-tokens-tokens--space), and how to use [themes](?path=/docs/brick-tokens-documentation-themes--documentation).\n\n<div class=\"note\">\n\n#### Need help?\n\nIn a perfect scenario, it is clear wich token names to use.\nIf you find yourself wondering what token to use, reach out at the [#designsystem](https://app.slack.com/client/T02568FUD/C01PVHPQMRN) channel, or at [GitHub discussion](https://github.com/amedia/brick/discussions/new?category=brick-tokens).\nYou'll likely encounter things that don't seem right, or are missing. Please share your experiences, or ideas.\n\n</div>\n\n#### Usage and implementation\n\n- The consuming page of your web app should load the appropriate theme file and apply the corresponding theme class to the container (e.g., the body tag).\n- It is important to note that the variables are scoped to the theme class, ensuring encapsulation and consistency within the designated theme.\n\nThe CSS variables are prefixed with `--brick`, and then the category, i.ei `-colors-`, before the name, i.e. `utilityPrimaryBg`.\n\n#### Example of css variables for theme Alfa:\n\n<Source\n language=\"html\"\n dark=\"true\"\n code={`\n https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alfa.css\n `}\n/>\n\nAn example use case could be that you wish to use spacing tokens to add some spacing:\n\n<Source\n language=\"css\"\n dark=\"true\"\n code={`\n .my-awesome-selector {\n padding: var(--brick-space-x1)\n }\n `}\n/>\n\nAnother use case could be that you need to apply color to an element:\n\n<Source\n language=\"html\"\n dark=\"true\"\n code={`<html>\n <head><link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alfa.css\" /></head>\n <style>\n .my-awesome-selector {\n color: var(--brick-colors-baseFg);\n }\n </style>\n\n <body class=\"themeAlfa\">\n <div class=\"my-awesome-selector\">\n The color will be the value of the theme Alfa css variable named '--brick-colors-baseFg'\n </div>\n </body>\n</html>\n\n`}\n/>\n\n<iframe\n height=\"300\"\n style={{ width: '100%' }}\n scrolling=\"no\"\n title=\"Brick theming\"\n src=\"https://codepen.io/renatewr/embed/preview/MWRemoj?default-tab=css%2Cresult&editable=true\"\n loading=\"lazy\"\n allowtransparency=\"true\"\n allowFullScreen={true}\n>\n See the Pen{' '}\n <a href=\"https://codepen.io/renatewr/pen/MWRemoj\">Brick Theming</a> by Renate\n Winther Ravnaas (<a href=\"https://codepen.io/renatewr\">@renatewr</a>) on{' '}\n <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\n### iOS\n\nOn build time, the correct theme file for the specific token category can be loaded.\n\n- Swift files with radii and spacing tokens\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/alfa/ios/Radius.swift`\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/alfa/ios/Spacing.swift`\n\n- JSON files with colors:\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/bravo/ios/colors.json`\n\nhttps://github.com/amedia/brick/tree/master/packages/brick-tokens/build/style-dictionary/alfa/ios\n\n### Javascript/typescript\n\nEx:\n\nhttps://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/bravo/web/borderWidths.ts\n\n### CSS-in-JS\n\nbrick-tokens also exports `{css}` for using CSS-in-JS\n\nAt **the time of writing**, brick is using CSS-in-JS with Stitches under the hood.\nThis way you can style your custom components with the confidence that your styles should never clash.\nThere are pros and cons using CSS-in-JS and vanilla CSS, but that is out of scope of this documentation page.\n\n```css-in-js\nconst buttonCss = css({\n background-color: '$buttonPrimaryBackground';\n borderWidth: '1px', //token missing, talk to your designer\n borderStyle: 'solid',\n borderColor: '$buttonPrimaryBorder',\n ..\n '&:hover': {\n backgroundColor: '$buttonPrimaryBackgroundHover',\n color: '$buttonPrimaryTextHover',\n borderColor: '$buttonPrimaryBorderHover',\n },\n variants: {\n version: {\n secondary: {\n backgroundColor: '$buttonSecondaryBackground',\n '&:hover': {\n backgroundColor: '$buttonSecondaryBackgroundHover',\n },\n }\n },\n size: {\n large: {\n fontSize: 'clamp($mainButtonS, 0.4vw + 1rem, $mainButtonL)',\n }\n }\n\n }\n defaultVariants: {\n version: 'secondary',\n size: 'large'\n },\n compoundVariants: [\n {\n variant: 'secondary',\n size: 'small',\n css: {\n backgroundColor: '$someOtherToken',\n },\n },\n ],\n});\n})\n\n\n```\n\n#### Apply the css classname\n\n```css-in-js\n<div class=\"${getThemeByDesign('bravo')}\"> //main container\n...\n<button class=\"${buttonStyle({variant: 'primary'})}\">Primary</button>\n<button class=\"${buttonStyle({variant: 'secondary', outlined: true, size: 'large'})}\">Secondary Outlined</button>\n...\n</div>\n```\n\n#### Utils/shorthands\n\nUtils are like custom CSS properties, but allows us to group certain multiple CSS properties, or make shorthands.\nThe util takes one argument - the designtoken you normally would use on all the properties, excluding the '$' prefix.\n\nExample of the `fontstyle` util:\n\n```js\nconst myElementClass = css({\n fontstyle: 'titleXl',\n});\n```\n\nResult:\n\n```js\nconst myElementClass = css({\n fontFamily: `$titleXl`,\n fontSize: `$titleXl`,\n fontWeight: `$titleXl`,\n lineHeight: `$titleXl`,\n letterSpacing: `$titleXl`,\n }),\n\n```\n\n#### Utility classes\n\n`brick-tokens` have a few utility classes that can be used in any app or component that uses brick-tokens.\nThe purpose of these classes is to have easily accessible, reusable, and consistent naming for styling that would otherwise get repeated in multiple places.\n\nSome of these you can find in the `utility` object in **stitches.ts** and can be used directly through the [css](https://stitches.dev/docs/api#css) method.\nOthers are exported outside this object and needs to be imported alongside css, for example like this: \n`import {css, sroStyle} from '@amedia/brick-tokens'`\n\nAnd you would use it like this: \n`<div class\"${sroStyle()}\"></div> `\n"
|
|
2
|
+
"anOverview": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport Code from './assets/code-brackets.svg';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Design Tokens/Documentation/Overview\" />\n<brick-style></brick-style>\n\n# brick-tokens\n\nThe purpose of brick-tokens is to convert data from Figma into design tokens in different formats.\nModifications made in Figma will seamless translate into updates to your styles, ensuring design consistency and flexibility.\n\nThese design tokens serve as the source for design values.\n\n### What are design tokens?\n\n<div class=\"tip\">\n Design tokens are a tech-agnostic way to manage design values and decisions.\n</div>\n\nThese values are atomic design attributes such as colors, fonts, spacing, shadows, and even animation. Design tokens serve as the foundation for building user interface (UI) components and products.\n\nBy utilizing tokens instead of hardcoded values, we ensure uniformity across\nvarious platforms and themes, fostering a consistent user experience.\n\n## Index\n\n- [Formats](?path=/docs/brick-tokens-documentation-formats--documentation)\n - [CSS custom properties](?path=/docs/brick-tokens-documentation-formats--documentation#css-custom-properties)\n - [CSS-in-JS](?path=/docs/brick-tokens-documentation-formats--documentation#css-in-js)\n - [iOS](?path=/docs/brick-tokens-documentation-formats--documentation#ios)\n - [JS/TS](?path=/docs/brick-tokens-documentation-formats--documentation#javascripttypescript)\n- [Naming](?path=/docs/brick-tokens-documentation-naming--documentation)\n- [Themes](?path=/docs/brick-tokens-documentation-themes--documentation)\n- [Tokens](?path=/story/brick-tokens-tokens--space)\n- [Usage](?path=/docs/brick-tokens-documentation-usage--documentation)\n\n We add new tokens every so often when there’s a semantic purpose that can exist across multiple products.\n\n<div class=\"note\">\n\n#### Need a token that doesn't exist?\n\nIf you think you have a need for a new token, post it at the [#designsystem](https://app.slack.com/client/T02568FUD/C01PVHPQMRN) channel, or at [GitHub discussion](https://github.com/amedia/brick/discussions/new?category=brick-tokens).\nYou'll likely encounter things that don't seem right, or are missing. Please share your experiences.\n\n</div>\n\n## External tools\n\n### Design tokens in Figma\n\nUsing the plugin [\"Tokens Studio\"](https://github.com/tokens-studio/figma-plugin) we can manage the design tokens in Figma. This plugin allows us to create, edit, and manage design tokens directly within the Figma interface.\n\nyou can export design tokens from Figma to JSON format. This plugin is used by the designers to export the tokens.\n\nThe plugin aims to be W3C compatiple using the standard from [W3C Design Tokens Community Group](https://github.com/design-tokens/community-group).\n\nThe tools involved to get the tokens from Figma to the final product are:\n\n- [@tokens-studio/sd-transform](https://www.npmjs.com/package/@tokens-studio/sd-transforms) Custom transforms when using Style Dictionary to work with the tokens.\n- [`style-dictonary`](https://amzn.github.io/style-dictionary/#/) A tool for transforming design tokens into usable code for different platforms.\n- [@stitches/core]() CSS-in-JS for managing themes and component variants\n\n## assets.acdn.no\n\nbrick-tokens are published to `npm` and to our `assets.acdn.no` server:\nhttps://assets.acdn.no/pkg/@amedia/brick-tokens\n\n<a\n className=\"link-item\"\n href=\"https://github.com/amedia/brick/blob/master/stories/brickTokensAnOverview.mdx\"\n target=\"_blank\"\n>\n <svg\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n aria-hidden=\"true\"\n >\n <g>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 2C6.475 2 2 6.475 2 12C2 16.425 4.8625 20.1625 8.8375 21.4875C9.3375 21.575 9.525 21.275 9.525 21.0125C9.525 20.775 9.5125 19.9875 9.5125 19.15C7 19.6125 6.35 18.5375 6.15 17.975C6.0375 17.6875 5.55 16.8 5.125 16.5625C4.775 16.375 4.275 15.9125 5.1125 15.9C5.9 15.8875 6.4625 16.625 6.65 16.925C7.55 18.4375 8.9875 18.0125 9.5625 17.75C9.65 17.1 9.9125 16.6625 10.2 16.4125C7.975 16.1625 5.65 15.3 5.65 11.475C5.65 10.3875 6.0375 9.4875 6.675 8.7875C6.575 8.5375 6.225 7.5125 6.775 6.1375C6.775 6.1375 7.6125 5.875 9.525 7.1625C10.325 6.9375 11.175 6.825 12.025 6.825C12.875 6.825 13.725 6.9375 14.525 7.1625C16.4375 5.8625 17.275 6.1375 17.275 6.1375C17.825 7.5125 17.475 8.5375 17.375 8.7875C18.0125 9.4875 18.4 10.375 18.4 11.475C18.4 15.3125 16.0625 16.1625 13.8375 16.4125C14.2 16.725 14.5125 17.325 14.5125 18.2625C14.5125 19.6 14.5 20.675 14.5 21.0125C14.5 21.275 14.6875 21.5875 15.1875 21.4875C19.1375 20.1625 22 16.4125 22 12C22 6.475 17.525 2 12 2Z\"\n fill=\"#202C3D\"\n ></path>\n </g>\n </svg>\n <span>Edit this page on GitHub</span>\n</a>\n",
|
|
3
|
+
"formats": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Design Tokens/Documentation/Formats\" />\n<brick-style></brick-style>\n\n# Formats\n\nThese are the formats that exists today.\nOther formats or naming conventions can easily be built.\n\n## CSS Custom Properties\n\nUtilizing CSS custom properties, also known as CSS variables, is the recommended approach for styling a web product.\nThe CSS variables are prefixed with `--brick`, and then the category, i.ei `-colors-`, before the name, i.e. `utilityPrimaryBg`.\n\nRead more about [usage here](?path=/docs/brick-tokens-documentation-usage--documentation) and [themes](?path=/docs/brick-tokens-documentation-themes--documentation).\n\n## iOS\n\nOn build time, the correct [theme](?path=/docs/brick-tokens-documentation-themes--documentation) file for the specific token category can be loaded.\n\n- Swift files with radii and spacing tokens\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/alfa/ios/Radius.swift`\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/alfa/ios/Spacing.swift`\n\n- JSON files with colors:\n\n `https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/bravo/ios/colors.json`\n\nhttps://github.com/amedia/brick/tree/master/packages/brick-tokens/build/style-dictionary/alfa/ios\n\n## Javascript/typescript\n\nEx:\n\nhttps://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/theme/bravo/web/borderWidths.ts\n\n## CSS-in-JS\n\nbrick-tokens also exports `{css}` for using CSS-in-JS\n\nAt **the time of writing**, brick is using CSS-in-JS with Stitches under the hood.\nThis way you can style your custom components with the confidence that your styles should never clash.\nThere are pros and cons using CSS-in-JS and vanilla CSS, but that is out of scope of this documentation page.\n",
|
|
4
|
+
"naming": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\nimport Repo from './assets/repo.svg';\nimport Open from './assets/open.svg';\n\n<Meta title=\"Design Tokens/Documentation/Naming\" />\n\n<brick-style></brick-style>\n\n# Naming\n\nA design token name in Figma can be transformed into different shapes based on the format.\nSee all the tokens available at the [tokens pages](?path=/story/brick-tokens-tokens--space)\n\n## Naming Conventions and examples\n\nDue to varying naming conventions and requirements across technologies, the naming format in **code** can differ.\n\nBelow are two examples illustrating the transformation of names into different formats:\n\n### Figma names:\n\n- `color.utility.primary.bg`\n- `spacing.x1`\n\n### CSS variable\n\n<Source\n language=\"css\"\n dark=\"true\"\n code={`\ncolor: var(--brick-colors-utilityPrimaryBg);\npadding: var(--brick-spacing-x1);\n `}\n/>\n\n### CSS-in-JS\n\nDeprecated - use css variables instead\n\n<Source\n language=\"javascript\"\n dark=\"true\"\n code={`\nconst heading = css({\n color: '$utilityPrimaryBg', //translates to 'var(--brick-colors-primaryBg)'\n padding:'$x1' //translates to 'var(--brick-spacing-x1)''\n})\n `}\n/>\n\n### For iOS\n\n**Spacing.swift**\n\n<Source\n language=\"other\"\n dark=\"true\"\n code={`\n //Example of name/value in the Spacing.swift file\nstruct Spacing {\n\tstatic let x1 : CGFloat = 5\n }\n `}\n/>\n\n**colors.json**\n\n<Source\n language=\"other\"\n dark=\"true\"\n code={`\n //Example of name/value in the colors.json file\n{\n \"color_utility_primary_fg\": \"#292827\",\n}\n `}\n/>\n\n## The taxonomy behind the names in themes\n\nWe need names that makes it as easy as possible to understand what the token should be used for, and when.\n\nGood names are predictable, unique, and understandable across disciplines.\n\nWhat is semantic to one, might not be semantic to a coworker. We need to agree on a common vocabulary.\n\nIn our themes, the design tokens are made up of semantic attributes that together form the token name. This ensures scalability and consistency. It covers both simple and more complex naming.\n\n<div className=\"token-name-steps\">\n <span className=\"step\">\n <strong>Scope*</strong>\n </span>\n <span>─</span>\n <span className=\"step\">\n <strong>[Context]</strong>\n </span>\n <span>─</span>\n <span className=\"step\">\n <strong>[Prominence]</strong>\n </span>\n <span>─</span>\n <span className=\"step\">\n <strong>[Sentiment]</strong>\n </span>\n <span>─</span>\n <span className=\"step\">\n <strong>[State]</strong>\n </span>\n <span></span>\n <span className=\"step\">\n <strong>Usage*</strong>\n </span>\n</div>\n*required parts. The optional parts are enclosed in brackets [].{' '}\n\n<div class=\"token-name-parts\">\n<div class=\"token-name-part\">\n **Scope**: \"Omfang\" The broadest category of the token, indicating its general\n purpose.\n Definerer hvilket \"navnerom\" tokenet tilhører.\n <ul>\n <li>\n <code>base</code>: General scope.\n </li>\n <li>\n <code>utility</code>: Interaction colors used for status messages and alerts.\n </li>\n <li>\n <code>supportive</code>: Supportive colors used in a theme on different elements\n </li>\n <li>\n <code>button</code>, <code>article</code>, <code>expand</code>:\n Component specific scope.\n </li>\n </ul>\n</div>\n\n<div class=\"token-name-part\">\n **[Context]**: Optional. Further refines the scope by specifying the\n particular area or genre the token applies to.\n <ul>\n <li>\n <code>opinion</code>, <code>reel</code>, <code>finance</code>,\n <code>lifestyle</code>\n </li>\n </ul>\n</div>\n\n<div class=\"token-name-part\">\n **[Prominence]** (Visuell Vekt) Optional. Describes the visual importance or\n emphasis of the element.\n <ul>\n <li>\n <code>primary</code>, <code>secondary</code>, <code>subtle</code>\n </li>\n </ul>\n</div>\n\n<div class=\"token-name-part\">\n **[Sentiment]**[ (Budskap/Status) Optional. Describes the emotional tone or\n status\n <ul>\n <li>\n <code>success</code>, <code>error</code>, <code>warning</code>,\n <code>breaking</code>, <code>live</code>, <code>beta</code>,\n <code>new</code>\n </li>\n </ul>\n</div>\n\n<div class=\"token-name-part\">\n **[State]** (Tilstand) Optional. Describes the interaction state of the\n element.\n <ul>\n <li>\n <code>hover</code>, <code>active</code>, <code>focus</code>,\n <code>disabled</code>\n </li>\n </ul>\n</div>\n\n<div class=\"token-name-part\">\n**Usage** (Bruk) Obligatorisk. Describing what the design decision applies to. If it is a color, it might be \"bg\", but if it is typography it might be \"body-s\" or \"heading-m\", including size to be responsive.\n <ul>\n <li>\n <code>bg</code>, <code>fg</code>, <code>border</code>, <code>body-s</code>, <code>heading-xl</code>\n </li>\n </ul>\n\n</div>\n</div>\n\n<div className=\"token-taxonomy-table\">\n <div>Token Navn</div>\n <div>Scope</div>\n <div>Context</div>\n <div>Prominence</div>\n <div>Sentiment</div>\n <div>State</div>\n <div>Usage</div>\n <div>Forklaring</div>\n\n<div>\n <strong>\n <code>base-page-bg</code>\n </strong>\n</div>\n<div>\n <code>base</code>\n</div>\n<div>-</div>\n<div>-</div>\n<div>-</div>\n<div>-</div>\n<div>\n <code>page-bg</code>\n</div>\n<div>Sidebakgrunn</div>\n\n<div>\n <strong>\n <code>button-primary-bg</code>\n </strong>\n</div>\n<div>\n <code>button</code>\n</div>\n<div>-</div>\n<div>\n <code>primary</code>\n</div>\n<div>-</div>\n<div>-</div>\n<div>\n <code>bg</code>\n</div>\n<div>Bakgrunn på knapp</div>\n\n<div>\n <strong>\n <code>button-primary-fg</code>\n </strong>\n</div>\n<div>\n <code>button</code>\n</div>\n<div>-</div>\n<div>\n <code>primary</code>\n</div>\n<div>-</div>\n<div>-</div>\n<div>\n <code>fg</code>\n</div>\n<div>Tekst/Ikon på knapp</div>\n<div>\n <strong>\n <code>utility-success-fg</code>\n </strong>\n</div>\n<div>\n <code>utility</code>\n</div>\n<div>-</div>\n<div>-</div>\n<div>\n <code>success</code>\n</div>\n<div>-</div>\n<div>\n <code>fg</code>\n</div>\n<div>Tekstfarge for suksess</div>\n\n<div><strong><code>utility-success-hover-bg</code></strong></div>\n<div><code>utility</code></div>\n<div>-</div>\n<div>-</div>\n<div><code>success</code></div>\n<div><code>hover</code></div>\n<div><code>bg</code></div>\n<div>Bakgrunn ved hover</div>{' '}\n<div><strong><code>article-opinion-body-s</code></strong></div>\n <div><code>article</code></div>\n <div><code>opinion</code></div>\n <div>-</div>\n <div>-</div>\n <div>-</div>\n <div><code>body-s</code></div>\n <div>Brødtekst for opinion artikler i liten størrelse for mindre skjermer</div>\n</div>\n",
|
|
5
|
+
"themes": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Design Tokens/Documentation/Themes\" />\n\n<brick-style></brick-style>\n\n## Themes\n\nStyles are themeable using CSS Custom Properties.\n\nBrick ships currently 5 pre-built themes:\n\n- [Alfa](https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alfa.css)\n- [Bravo](https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-bravo.css)\n- [Charlie](https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-charlie.css)\n- [Nettavisen](https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-nettavisen.css)\n- [Alt](https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alt.css)\n\nThemes are collections of design tokens, and the CSS Properties are scoped to a theme class. The design tokens **names** are the same across themes, but the value is unique for each theme.\n\nThis very page is using brick-tokens, and the theme Alfa!\n\n#### Example:\n\n<Source\n language=\"css\"\n dark=\"true\"\n code={`\n//Example\n.themeAlfa {\n --brick-colors-accesibilityFocusOutline:rgb(49, 111, 209);\n --brick-colors-baseBg:rgb(229, 229, 229);\n --brick-colors-baseDivider:rgb(89, 89, 89);\n --brick-colors-baseFg:rgb(41, 40, 39);\n }\n.themeOther {\n --brick-colors-accesibilityFocusOutline:hotpink;\n --brick-colors-baseBg:red;\n --brick-colors-baseDivider:black;\n --brick-colors-baseFg:purple;\n }\n `}\n/>\n\n### Usage\n\nUsing Brick’s themes is pretty straightforward.\n\nTo get started, add one of the following link tags to the `<head>` of your application:\n\n```\n<!-- Alfa theme -->\n<link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alfa.css\" crossorigin=\"anonymous\" />\n<!-- Bravo theme -->\n<link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-bravo.css\" crossorigin=\"anonymous\" />\n<!-- Charlie theme -->\n<link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-charlie.css\" crossorigin=\"anonymous\" />\n<!-- Nettavisen theme -->\n<link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-nettavisen.css\" crossorigin=\"anonymous\" />\n<!-- ALT theme -->\n<link rel=\"stylesheet\" href=\"https://assets.acdn.no/pkg/@amedia/brick-tokens/5.7.2/css/theme-alt.css\" crossorigin=\"anonymous\" />\n```\n\n### How does it work?\n\nWhen the theme css file is loaded, you need to set the theme classname on a container, i.e the _body_ tag, since the theme is scoped to a classname.\n\nIt enables the use of multiple themes on the same page, even if there is one main theme for one page.\n\n<iframe\n height=\"300\"\n style={{ width: '100%' }}\n scrolling=\"no\"\n title=\"Untitled\"\n src=\"https://codepen.io/renatewr/embed/preview/MWRemoj?default-tab=html%2Cresult&editable=true\"\n loading=\"lazy\"\n allowtransparency=\"true\"\n allowFullScreen={true}\n>\n See the Pen <a href=\"https://codepen.io/renatewr/pen/MWRemoj\">Untitled</a> by\n Renate Winther Ravnaas (<a href=\"https://codepen.io/renatewr\">@renatewr</a>)\n on <a href=\"https://codepen.io\">CodePen</a>.\n</iframe>\n\n#### How to set correct theme classname?\n\n[brick-classnames](https://github.com/amedia/brick/tree/master/packages/brick-classnames) is a utility module to create CSS-safe strings from design names.\n\n### iOS\n\nFor use in iOS, the correct theme file can be loaded from `https://assets.acdn.no/pkg/@amedia/brick-tokens` for colors,spacing and radii.\nMore details at the [Formats page](?path=/docs/brick-tokens-documentation-formats--documentation#ios)\n"
|
|
7
6
|
}
|
package/dist/data/tokens.json
CHANGED
|
@@ -203,6 +203,14 @@
|
|
|
203
203
|
"description": "Foreground color for links in text on hover",
|
|
204
204
|
"cssVariable": "var(--brick-colors-articleLinkHoverFg)"
|
|
205
205
|
},
|
|
206
|
+
{
|
|
207
|
+
"path": "color.article.divider",
|
|
208
|
+
"name": "articleDivider",
|
|
209
|
+
"type": "color",
|
|
210
|
+
"value": "rgb(230, 230, 230)",
|
|
211
|
+
"description": "Border color to separate or contain elements (e.g. byline).",
|
|
212
|
+
"cssVariable": "var(--brick-colors-articleDivider)"
|
|
213
|
+
},
|
|
206
214
|
{
|
|
207
215
|
"path": "color.article.gradient",
|
|
208
216
|
"name": "articleGradient",
|