@amedia/brick-mcp 0.1.8 → 1.0.0

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.
Files changed (6) hide show
  1. package/data/components/brick-tokens.md +65 -155
  2. package/data/components-metadata.json +96 -33
  3. package/dist/data/components/brick-tokens.md +65 -155
  4. package/dist/data/components-metadata.json +96 -33
  5. package/package.json +4 -1
  6. package/scripts/generate-data.js +13 -0
package/data/components/brick-tokens.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-tokens
3
- version: 6.0.0
3
+ version: 6.0.11
4
4
  selector: N/A
5
5
  category: Utilities
6
6
  tags: [design-tokens, css, styling, themes, colors, spacing, typography, shadows]
@@ -10,14 +10,13 @@ related: [brick-themes, brick-template, brick-classnames]
10
10
 
11
11
  # Brick Tokens
12
12
 
13
- The foundational design tokens package providing colors, spacing, typography, shadows, and other design primitives for the Brick design system, with Stitches CSS-in-JS integration and theme support.
13
+ The foundational design tokens package providing colors, spacing, typography, shadows, and other design primitives for the Brick design system.
14
14
 
15
15
  ## Key Capabilities
16
16
 
17
17
  - Comprehensive design token system (colors, spacing, typography, shadows, borders)
18
- - Multiple publication themes (Alfa, Bergen, BT, etc.)
18
+ - Multiple publication themes (Alfa, Bravo, Charlie, Nettavisen, Alt)
19
19
  - CSS custom properties generation
20
- - Stitches CSS-in-JS integration
21
20
  - Style Dictionary based token transformation
22
21
  - TypeScript type definitions
23
22
  - CDN distribution via Eik
@@ -63,186 +62,103 @@ The foundational design tokens package providing colors, spacing, typography, sh
63
62
 
64
63
  ## Examples
65
64
 
66
- ### Using with Stitches (CSS-in-JS)
67
-
68
- ```javascript
69
- import { css } from '@amedia/brick-tokens';
70
-
71
- const button = css({
72
- color: '$supportiveBlackText',
73
- backgroundColor: '$supportiveBlackBg',
74
- padding: '$spacing-m',
75
- borderRadius: '$radii-button',
76
- fontSize: '$fontSize-body',
77
- });
78
- ```
79
-
80
65
  ### Using CSS Custom Properties
81
66
 
82
67
  ```css
83
68
  .my-component {
84
- color: var(--brick-colors-textPrimary);
85
- background-color: var(--brick-colors-bgPrimary);
86
- padding: var(--brick-spacing-m);
69
+ color: var(--brick-colors-baseFg);
70
+ background-color: var(--brick-colors-baseBg);
71
+ padding: var(--brick-space-x4);
87
72
  border-radius: var(--brick-radii-button);
88
- font-size: var(--brick-fontSize-body);
89
73
  }
90
74
  ```
91
75
 
92
- ### Importing Theme Styles
93
-
94
- ```javascript
95
- // Import base tokens
96
- import '@amedia/brick-tokens';
76
+ ## Token Access Patterns
97
77
 
98
- // Import specific theme
99
- import '@amedia/brick-tokens/dist/themes/bergen/index.js';
100
- ```
78
+ ```css
79
+ .my-element {
80
+ color: var(--brick-colors-baseFg);
81
+ padding: var(--brick-space-x3);
82
+ }
101
83
 
102
- ### Using in Components
103
-
104
- ```typescript
105
- import { css } from '@amedia/brick-tokens';
106
- import { BrickElement, defineCustomElement } from '@amedia/brick-template';
107
-
108
- const titleClass = css({
109
- color: '$textPrimary',
110
- fontSize: '$fontSize-heading-l',
111
- fontWeight: '$fontWeight-bold',
112
- marginBottom: '$spacing-l',
113
- });
114
-
115
- @defineCustomElement({
116
- selector: 'my-component',
117
- })
118
- class MyComponent extends BrickElement {
119
- get HTML() {
120
- return `<h1 class="${titleClass}">Hello</h1>`;
121
- }
84
+ .custom-button {
85
+ background: var(--brick-colors-buttonPrimaryBg);
86
+ color: var(--brick-colors-buttonPrimaryFg);
87
+ padding: var(--brick-space-x2) var(--brick-space-x4);
122
88
  }
123
89
  ```
124
90
 
125
- ## Token Access Patterns
91
+ ## Theme System
126
92
 
127
- ### Via Stitches
93
+ Brick tokens ships 5 pre-built themes:
128
94
 
129
- ```javascript
130
- import { css, theme } from '@amedia/brick-tokens';
95
+ - **alfa** — `.themeAlfa`
96
+ - **bravo** — `.themeBravo`
97
+ - **charlie** — `.themeCharlie`
98
+ - **nettavisen** — `.themeNettavisen`
99
+ - **alt** — `.themeAlt`
131
100
 
132
- // Using in css function
133
- const styles = css({
134
- color: '$textPrimary',
135
- padding: '$spacing-m',
136
- });
101
+ Each theme provides publication-specific CSS custom properties scoped to its theme class. Token **names** are the same across themes; only the values differ.
137
102
 
138
- // Accessing token values
139
- const primaryColor = theme.colors.textPrimary;
140
- ```
103
+ ### Applying a theme via CSS
141
104
 
142
- ### Via CSS Variables
105
+ Load the theme CSS file and set the corresponding class on a container (e.g. `<body>`):
143
106
 
144
107
  ```html
145
- <style>
146
- .custom-button {
147
- background: var(--brick-colors-buttonPrimaryBg);
148
- color: var(--brick-colors-buttonPrimaryFg);
149
- padding: var(--brick-spacing-s) var(--brick-spacing-m);
150
- }
151
- </style>
108
+ <!-- Load theme CSS from Eik CDN -->
109
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
110
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/bravo/styles.css" crossorigin="anonymous" />
111
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/charlie/styles.css" crossorigin="anonymous" />
112
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/nettavisen/styles.css" crossorigin="anonymous" />
113
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alt/styles.css" crossorigin="anonymous" />
114
+
115
+ <!-- Apply theme class to a container -->
116
+ <body class="themeAlfa">...</body>
152
117
  ```
153
118
 
154
- ## Theme System
155
-
156
- Brick tokens supports multiple publication themes:
157
-
158
- ```javascript
159
- // Available themes
160
- import '@amedia/brick-tokens/dist/themes/alfa/index.js';
161
- import '@amedia/brick-tokens/dist/themes/bergen/index.js';
162
- import '@amedia/brick-tokens/dist/themes/bt/index.js';
163
- // ... and more
164
- ```
165
-
166
- Each theme provides:
167
- - Publication-specific color palettes
168
- - Brand colors
169
- - Typography settings
170
- - Spacing overrides (if needed)
171
-
172
119
  ## Build Output
173
120
 
174
121
  The package provides multiple formats:
175
122
 
176
- - **ES Modules**: `dist/index.mjs`
177
- - **Stitches**: `dist/stitches.js`
178
- - **CSS**: `dist/css/**`
179
- - **Themes**: `dist/themes/*`
123
+ - **CSS per theme**: `dist/css/{alfa,bravo,charlie,nettavisen,alt}/styles.css`
180
124
  - **Style Dictionary**: `build/style-dictionary/**`
181
125
  - **TypeScript Types**: `dist/index.d.ts`
182
126
 
183
- ## CDN Usage
127
+ ## CDN Usage (Eik)
184
128
 
185
129
  ```html
186
- <!-- Load tokens via Eik CDN -->
187
- <script src="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/brick-tokens.js" type="module"></script>
188
-
189
- <!-- Load specific theme -->
190
- <script src="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/themes/bergen/index.js" type="module"></script>
191
-
192
- <!-- Load CSS variables -->
193
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/css/tokens.css">
130
+ <!-- Load theme CSS (one per page) -->
131
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
194
132
  ```
195
133
 
196
134
  ## Common Token Examples
197
135
 
198
136
  ### Spacing Tokens
199
137
 
200
- ```javascript
201
- const spacing = {
202
- xs: '$spacing-xs', // Extra small
203
- s: '$spacing-s', // Small
204
- m: '$spacing-m', // Medium
205
- l: '$spacing-l', // Large
206
- xl: '$spacing-xl', // Extra large
207
- };
208
- ```
209
-
210
- ### Color Tokens
138
+ Spacing tokens use an `x{n}` scale (multiples of ~5px):
211
139
 
212
- ```javascript
213
- const colors = {
214
- // Text
215
- textPrimary: '$textPrimary',
216
- textSecondary: '$textSecondary',
217
-
218
- // Backgrounds
219
- bgPrimary: '$bgPrimary',
220
- bgSecondary: '$bgSecondary',
221
-
222
- // Utilities
223
- success: '$utilitySuccessBg',
224
- error: '$utilityErrorBg',
225
- warning: '$utilityWarningBg',
226
- };
140
+ ```css
141
+ /* CSS variables — note: category is "space", not "spacing" */
142
+ padding: var(--brick-space-x1); /* 0.3125rem (5px) */
143
+ padding: var(--brick-space-x2); /* 0.625rem (10px) */
144
+ padding: var(--brick-space-x3); /* 0.9375rem (15px) */
145
+ padding: var(--brick-space-x4); /* 1.25rem (20px) */
146
+ padding: var(--brick-space-x6); /* 1.875rem (30px) */
147
+ padding: var(--brick-space-x8); /* 2.5rem (40px) */
227
148
  ```
228
149
 
229
- ### Typography Tokens
230
-
231
- ```javascript
232
- const typography = {
233
- // Font sizes
234
- headingL: '$fontSize-heading-l',
235
- headingM: '$fontSize-heading-m',
236
- body: '$fontSize-body',
150
+ ### Color Tokens
237
151
 
238
- // Font weights
239
- bold: '$fontWeight-bold',
240
- regular: '$fontWeight-regular',
152
+ Color tokens follow the pattern: `{scope}-[context]-[prominence]-[sentiment]-[state]-{usage}`
241
153
 
242
- // Line heights
243
- tight: '$lineHeight-tight',
244
- normal: '$lineHeight-normal',
245
- };
154
+ ```css
155
+ /* CSS variables */
156
+ color: var(--brick-colors-baseFg);
157
+ background: var(--brick-colors-baseBg);
158
+ color: var(--brick-colors-buttonPrimaryFg);
159
+ background: var(--brick-colors-buttonPrimaryBg);
160
+ color: var(--brick-colors-utilitySuccessFg);
161
+ background: var(--brick-colors-utilityErrorBg);
246
162
  ```
247
163
 
248
164
  ## Development
@@ -263,25 +179,19 @@ npm run validate # Validate CSS files
263
179
 
264
180
  ## Technical Details
265
181
 
266
- - **Package Type**: Design tokens and CSS-in-JS utilities
182
+ - **Package Type**: Design tokens
267
183
  - **Token Format**: Style Dictionary compatible
268
- - **CSS-in-JS**: Stitches integration
269
184
  - **TypeScript**: Full type definitions
270
185
  - **Dependencies**:
271
186
  - @amedia/brick-classnames (utility classes)
272
187
  - @amedia/brick-themes (theme definitions)
273
- - @stitches/core (CSS-in-JS runtime)
274
188
 
275
189
  ## Important Notes
276
190
 
277
- - Version 6.0.0 is the current stable version
278
- - Tokens are generated from Figma via tokens-studio
279
- - All tokens follow consistent naming conventions
280
- - CSS custom properties use `--brick-*` prefix
281
- - Stitches tokens use `$` prefix
282
- - Themes override base tokens with publication-specific values
191
+ - Version 6.0.11 is the current stable version
192
+ - Tokens are generated from Figma via Tokens Studio + Style Dictionary
193
+ - CSS custom properties use `--brick-{category}-{tokenName}` prefix (e.g. `--brick-colors-baseFg`, `--brick-space-x1`)
194
+ - Theme CSS files are scoped to a class (e.g. `.themeAlfa`) — apply the class to a container element
195
+ - There is no single `tokens.css` — CSS is per-theme: `dist/css/{theme}/styles.css`
283
196
  - The package is used by all Brick components for consistent styling
284
-
285
- ## Version
286
-
287
- Current version: 6.0.0
197
+ - `sroStyle` is a utility class export for screen-reader-only visually hidden content
package/data/components-metadata.json CHANGED
@@ -6,7 +6,8 @@
6
6
  "category": "Display",
7
7
  "tags": [
8
8
  "display"
9
- ]
9
+ ],
10
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-alt-teaser"
10
11
  },
11
12
  {
12
13
  "name": "brick-avatar",
@@ -16,7 +17,9 @@
16
17
  "category": "Display",
17
18
  "tags": [
18
19
  "display"
19
- ]
20
+ ],
21
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-avatar",
22
+ "mainJsFile": "brick-avatar.js"
20
23
  },
21
24
  {
22
25
  "name": "brick-button",
@@ -26,13 +29,17 @@
26
29
  "tags": [
27
30
  "forms",
28
31
  "interactive"
29
- ]
32
+ ],
33
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-button",
34
+ "mainJsFile": "brick-button.js"
30
35
  },
31
36
  {
32
37
  "name": "brick-byline",
33
38
  "version": "1.0.17",
34
39
  "selector": "brick-byline-v1",
35
- "description": "brick-byline component"
40
+ "description": "brick-byline component",
41
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-byline",
42
+ "mainJsFile": "brick-byline.js"
36
43
  },
37
44
  {
38
45
  "name": "brick-card",
@@ -41,7 +48,9 @@
41
48
  "category": "Layout",
42
49
  "tags": [
43
50
  "layout"
44
- ]
51
+ ],
52
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-card",
53
+ "mainJsFile": "brick-card.js"
45
54
  },
46
55
  {
47
56
  "name": "brick-carousel",
@@ -51,7 +60,9 @@
51
60
  "category": "Display",
52
61
  "tags": [
53
62
  "display"
54
- ]
63
+ ],
64
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-carousel",
65
+ "mainJsFile": "brick-carousel.js"
55
66
  },
56
67
  {
57
68
  "name": "brick-classnames",
@@ -61,13 +72,17 @@
61
72
  "category": "Utilities",
62
73
  "tags": [
63
74
  "utilities"
64
- ]
75
+ ],
76
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-classnames",
77
+ "mainJsFile": "brick-classnames.js"
65
78
  },
66
79
  {
67
80
  "name": "brick-countdown",
68
81
  "version": "3.0.2",
69
82
  "selector": "brick-countdown-v3",
70
- "description": "brick-countdown component"
83
+ "description": "brick-countdown component",
84
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-countdown",
85
+ "mainJsFile": "brick-countdown.js"
71
86
  },
72
87
  {
73
88
  "name": "brick-dialog",
@@ -77,13 +92,17 @@
77
92
  "category": "Feedback",
78
93
  "tags": [
79
94
  "feedback"
80
- ]
95
+ ],
96
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-dialog",
97
+ "mainJsFile": "brick-dialog.js"
81
98
  },
82
99
  {
83
100
  "name": "brick-expand",
84
101
  "version": "0.0.22",
85
102
  "selector": "brick-expand-v0",
86
- "description": "brick-expand component"
103
+ "description": "brick-expand component",
104
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-expand",
105
+ "mainJsFile": "brick-expand.js"
87
106
  },
88
107
  {
89
108
  "name": "brick-fonts",
@@ -93,13 +112,16 @@
93
112
  "category": "Utilities",
94
113
  "tags": [
95
114
  "utilities"
96
- ]
115
+ ],
116
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-fonts"
97
117
  },
98
118
  {
99
119
  "name": "brick-helloworld",
100
120
  "version": "2.0.20",
101
121
  "selector": "brick-helloworld-v2",
102
- "description": "Brick Hello World component"
122
+ "description": "Brick Hello World component",
123
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-helloworld",
124
+ "mainJsFile": "brick-helloworld.js"
103
125
  },
104
126
  {
105
127
  "name": "brick-icon",
@@ -108,13 +130,16 @@
108
130
  "category": "Display",
109
131
  "tags": [
110
132
  "display"
111
- ]
133
+ ],
134
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-icon",
135
+ "mainJsFile": "brick-icon.js"
112
136
  },
113
137
  {
114
138
  "name": "brick-illustrations",
115
139
  "version": "1.3.0",
116
140
  "selector": "brick-illustrations-v1",
117
- "description": "brick-illustrations"
141
+ "description": "brick-illustrations",
142
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-illustrations"
118
143
  },
119
144
  {
120
145
  "name": "brick-image",
@@ -123,7 +148,9 @@
123
148
  "category": "Display",
124
149
  "tags": [
125
150
  "display"
126
- ]
151
+ ],
152
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-image",
153
+ "mainJsFile": "brick-image.js"
127
154
  },
128
155
  {
129
156
  "name": "brick-input",
@@ -134,42 +161,56 @@
134
161
  "tags": [
135
162
  "forms",
136
163
  "interactive"
137
- ]
164
+ ],
165
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-input",
166
+ "mainJsFile": "brick-input.js"
138
167
  },
139
168
  {
140
169
  "name": "brick-pill",
141
170
  "version": "10.1.1",
142
- "selector": "brick-pill-v10"
171
+ "selector": "brick-pill-v10",
172
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-pill",
173
+ "mainJsFile": "brick-pill.js"
143
174
  },
144
175
  {
145
176
  "name": "brick-player",
146
177
  "version": "2.3.2",
147
178
  "selector": "brick-player-v2",
148
- "description": "Component for playing video and audio files"
179
+ "description": "Component for playing video and audio files",
180
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-player",
181
+ "mainJsFile": "brick-player.js"
149
182
  },
150
183
  {
151
184
  "name": "brick-published",
152
185
  "version": "4.0.18",
153
186
  "selector": "brick-published-v4",
154
- "description": "brick-published"
187
+ "description": "brick-published",
188
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-published",
189
+ "mainJsFile": "brick-published.js"
155
190
  },
156
191
  {
157
192
  "name": "brick-share",
158
193
  "version": "0.3.23",
159
194
  "selector": "brick-share-v0",
160
- "description": "brick-share component"
195
+ "description": "brick-share component",
196
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-share",
197
+ "mainJsFile": "brick-share.js"
161
198
  },
162
199
  {
163
200
  "name": "brick-stepper",
164
201
  "version": "1.1.4",
165
202
  "selector": "brick-stepper-v1",
166
- "description": "brick-stepper component"
203
+ "description": "brick-stepper component",
204
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-stepper",
205
+ "mainJsFile": "brick-stepper.js"
167
206
  },
168
207
  {
169
208
  "name": "brick-tab",
170
209
  "version": "0.1.25",
171
210
  "selector": "brick-tab-v0",
172
- "description": "brick-tab component"
211
+ "description": "brick-tab component",
212
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tab",
213
+ "mainJsFile": "brick-tab.js"
173
214
  },
174
215
  {
175
216
  "name": "brick-tabs",
@@ -179,13 +220,17 @@
179
220
  "category": "Navigation",
180
221
  "tags": [
181
222
  "navigation"
182
- ]
223
+ ],
224
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tabs",
225
+ "mainJsFile": "brick-tabs.js"
183
226
  },
184
227
  {
185
228
  "name": "brick-tag",
186
229
  "version": "0.0.25",
187
230
  "selector": "brick-tag-v0",
188
- "description": "brick-tag component"
231
+ "description": "brick-tag component",
232
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tag",
233
+ "mainJsFile": "brick-tag.js"
189
234
  },
190
235
  {
191
236
  "name": "brick-teaser",
@@ -195,7 +240,9 @@
195
240
  "category": "Display",
196
241
  "tags": [
197
242
  "display"
198
- ]
243
+ ],
244
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser",
245
+ "mainJsFile": "brick-teaser.js"
199
246
  },
200
247
  {
201
248
  "name": "brick-teaser-player",
@@ -205,7 +252,9 @@
205
252
  "category": "Display",
206
253
  "tags": [
207
254
  "display"
208
- ]
255
+ ],
256
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser-player",
257
+ "mainJsFile": "brick-teaser-player.js"
209
258
  },
210
259
  {
211
260
  "name": "brick-teaser-reels",
@@ -215,19 +264,25 @@
215
264
  "category": "Display",
216
265
  "tags": [
217
266
  "display"
218
- ]
267
+ ],
268
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser-reels",
269
+ "mainJsFile": "brick-teaser-reels.js"
219
270
  },
220
271
  {
221
272
  "name": "brick-textarea",
222
273
  "version": "2.0.21",
223
274
  "selector": "brick-textarea-v2",
224
- "description": "brick-textarea component"
275
+ "description": "brick-textarea component",
276
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-textarea",
277
+ "mainJsFile": "brick-textarea.js"
225
278
  },
226
279
  {
227
280
  "name": "brick-themes",
228
281
  "version": "1.0.2",
229
282
  "selector": "brick-themes-v1",
230
- "description": "Brick theme names"
283
+ "description": "Brick theme names",
284
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-themes",
285
+ "mainJsFile": "brick-themes.js"
231
286
  },
232
287
  {
233
288
  "name": "brick-toast",
@@ -237,13 +292,17 @@
237
292
  "category": "Feedback",
238
293
  "tags": [
239
294
  "feedback"
240
- ]
295
+ ],
296
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toast",
297
+ "mainJsFile": "brick-toast.js"
241
298
  },
242
299
  {
243
300
  "name": "brick-toggle",
244
301
  "version": "3.1.25",
245
302
  "selector": "brick-toggle-v3",
246
- "description": "brick-toggle component"
303
+ "description": "brick-toggle component",
304
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toggle",
305
+ "mainJsFile": "brick-toggle.js"
247
306
  },
248
307
  {
249
308
  "name": "brick-tokens",
@@ -253,12 +312,16 @@
253
312
  "category": "Utilities",
254
313
  "tags": [
255
314
  "utilities"
256
- ]
315
+ ],
316
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tokens",
317
+ "mainJsFile": "brick-tokens.js"
257
318
  },
258
319
  {
259
320
  "name": "brick-tooltip",
260
321
  "version": "1.0.28",
261
322
  "selector": "brick-tooltip-v1",
262
- "description": "brick-tooltip component"
323
+ "description": "brick-tooltip component",
324
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tooltip",
325
+ "mainJsFile": "brick-tooltip.js"
263
326
  }
264
327
  ]
package/dist/data/components/brick-tokens.md CHANGED
@@ -1,6 +1,6 @@
1
1
  ---
2
2
  name: brick-tokens
3
- version: 6.0.0
3
+ version: 6.0.11
4
4
  selector: N/A
5
5
  category: Utilities
6
6
  tags: [design-tokens, css, styling, themes, colors, spacing, typography, shadows]
@@ -10,14 +10,13 @@ related: [brick-themes, brick-template, brick-classnames]
10
10
 
11
11
  # Brick Tokens
12
12
 
13
- The foundational design tokens package providing colors, spacing, typography, shadows, and other design primitives for the Brick design system, with Stitches CSS-in-JS integration and theme support.
13
+ The foundational design tokens package providing colors, spacing, typography, shadows, and other design primitives for the Brick design system.
14
14
 
15
15
  ## Key Capabilities
16
16
 
17
17
  - Comprehensive design token system (colors, spacing, typography, shadows, borders)
18
- - Multiple publication themes (Alfa, Bergen, BT, etc.)
18
+ - Multiple publication themes (Alfa, Bravo, Charlie, Nettavisen, Alt)
19
19
  - CSS custom properties generation
20
- - Stitches CSS-in-JS integration
21
20
  - Style Dictionary based token transformation
22
21
  - TypeScript type definitions
23
22
  - CDN distribution via Eik
@@ -63,186 +62,103 @@ The foundational design tokens package providing colors, spacing, typography, sh
63
62
 
64
63
  ## Examples
65
64
 
66
- ### Using with Stitches (CSS-in-JS)
67
-
68
- ```javascript
69
- import { css } from '@amedia/brick-tokens';
70
-
71
- const button = css({
72
- color: '$supportiveBlackText',
73
- backgroundColor: '$supportiveBlackBg',
74
- padding: '$spacing-m',
75
- borderRadius: '$radii-button',
76
- fontSize: '$fontSize-body',
77
- });
78
- ```
79
-
80
65
  ### Using CSS Custom Properties
81
66
 
82
67
  ```css
83
68
  .my-component {
84
- color: var(--brick-colors-textPrimary);
85
- background-color: var(--brick-colors-bgPrimary);
86
- padding: var(--brick-spacing-m);
69
+ color: var(--brick-colors-baseFg);
70
+ background-color: var(--brick-colors-baseBg);
71
+ padding: var(--brick-space-x4);
87
72
  border-radius: var(--brick-radii-button);
88
- font-size: var(--brick-fontSize-body);
89
73
  }
90
74
  ```
91
75
 
92
- ### Importing Theme Styles
93
-
94
- ```javascript
95
- // Import base tokens
96
- import '@amedia/brick-tokens';
76
+ ## Token Access Patterns
97
77
 
98
- // Import specific theme
99
- import '@amedia/brick-tokens/dist/themes/bergen/index.js';
100
- ```
78
+ ```css
79
+ .my-element {
80
+ color: var(--brick-colors-baseFg);
81
+ padding: var(--brick-space-x3);
82
+ }
101
83
 
102
- ### Using in Components
103
-
104
- ```typescript
105
- import { css } from '@amedia/brick-tokens';
106
- import { BrickElement, defineCustomElement } from '@amedia/brick-template';
107
-
108
- const titleClass = css({
109
- color: '$textPrimary',
110
- fontSize: '$fontSize-heading-l',
111
- fontWeight: '$fontWeight-bold',
112
- marginBottom: '$spacing-l',
113
- });
114
-
115
- @defineCustomElement({
116
- selector: 'my-component',
117
- })
118
- class MyComponent extends BrickElement {
119
- get HTML() {
120
- return `<h1 class="${titleClass}">Hello</h1>`;
121
- }
84
+ .custom-button {
85
+ background: var(--brick-colors-buttonPrimaryBg);
86
+ color: var(--brick-colors-buttonPrimaryFg);
87
+ padding: var(--brick-space-x2) var(--brick-space-x4);
122
88
  }
123
89
  ```
124
90
 
125
- ## Token Access Patterns
91
+ ## Theme System
126
92
 
127
- ### Via Stitches
93
+ Brick tokens ships 5 pre-built themes:
128
94
 
129
- ```javascript
130
- import { css, theme } from '@amedia/brick-tokens';
95
+ - **alfa** — `.themeAlfa`
96
+ - **bravo** — `.themeBravo`
97
+ - **charlie** — `.themeCharlie`
98
+ - **nettavisen** — `.themeNettavisen`
99
+ - **alt** — `.themeAlt`
131
100
 
132
- // Using in css function
133
- const styles = css({
134
- color: '$textPrimary',
135
- padding: '$spacing-m',
136
- });
101
+ Each theme provides publication-specific CSS custom properties scoped to its theme class. Token **names** are the same across themes; only the values differ.
137
102
 
138
- // Accessing token values
139
- const primaryColor = theme.colors.textPrimary;
140
- ```
103
+ ### Applying a theme via CSS
141
104
 
142
- ### Via CSS Variables
105
+ Load the theme CSS file and set the corresponding class on a container (e.g. `<body>`):
143
106
 
144
107
  ```html
145
- <style>
146
- .custom-button {
147
- background: var(--brick-colors-buttonPrimaryBg);
148
- color: var(--brick-colors-buttonPrimaryFg);
149
- padding: var(--brick-spacing-s) var(--brick-spacing-m);
150
- }
151
- </style>
108
+ <!-- Load theme CSS from Eik CDN -->
109
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
110
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/bravo/styles.css" crossorigin="anonymous" />
111
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/charlie/styles.css" crossorigin="anonymous" />
112
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/nettavisen/styles.css" crossorigin="anonymous" />
113
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alt/styles.css" crossorigin="anonymous" />
114
+
115
+ <!-- Apply theme class to a container -->
116
+ <body class="themeAlfa">...</body>
152
117
  ```
153
118
 
154
- ## Theme System
155
-
156
- Brick tokens supports multiple publication themes:
157
-
158
- ```javascript
159
- // Available themes
160
- import '@amedia/brick-tokens/dist/themes/alfa/index.js';
161
- import '@amedia/brick-tokens/dist/themes/bergen/index.js';
162
- import '@amedia/brick-tokens/dist/themes/bt/index.js';
163
- // ... and more
164
- ```
165
-
166
- Each theme provides:
167
- - Publication-specific color palettes
168
- - Brand colors
169
- - Typography settings
170
- - Spacing overrides (if needed)
171
-
172
119
  ## Build Output
173
120
 
174
121
  The package provides multiple formats:
175
122
 
176
- - **ES Modules**: `dist/index.mjs`
177
- - **Stitches**: `dist/stitches.js`
178
- - **CSS**: `dist/css/**`
179
- - **Themes**: `dist/themes/*`
123
+ - **CSS per theme**: `dist/css/{alfa,bravo,charlie,nettavisen,alt}/styles.css`
180
124
  - **Style Dictionary**: `build/style-dictionary/**`
181
125
  - **TypeScript Types**: `dist/index.d.ts`
182
126
 
183
- ## CDN Usage
127
+ ## CDN Usage (Eik)
184
128
 
185
129
  ```html
186
- <!-- Load tokens via Eik CDN -->
187
- <script src="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/brick-tokens.js" type="module"></script>
188
-
189
- <!-- Load specific theme -->
190
- <script src="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/themes/bergen/index.js" type="module"></script>
191
-
192
- <!-- Load CSS variables -->
193
- <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.0/css/tokens.css">
130
+ <!-- Load theme CSS (one per page) -->
131
+ <link rel="stylesheet" href="https://assets.acdn.no/pkg/@amedia/brick-tokens/6.0.11/css/alfa/styles.css" crossorigin="anonymous" />
194
132
  ```
195
133
 
196
134
  ## Common Token Examples
197
135
 
198
136
  ### Spacing Tokens
199
137
 
200
- ```javascript
201
- const spacing = {
202
- xs: '$spacing-xs', // Extra small
203
- s: '$spacing-s', // Small
204
- m: '$spacing-m', // Medium
205
- l: '$spacing-l', // Large
206
- xl: '$spacing-xl', // Extra large
207
- };
208
- ```
209
-
210
- ### Color Tokens
138
+ Spacing tokens use an `x{n}` scale (multiples of ~5px):
211
139
 
212
- ```javascript
213
- const colors = {
214
- // Text
215
- textPrimary: '$textPrimary',
216
- textSecondary: '$textSecondary',
217
-
218
- // Backgrounds
219
- bgPrimary: '$bgPrimary',
220
- bgSecondary: '$bgSecondary',
221
-
222
- // Utilities
223
- success: '$utilitySuccessBg',
224
- error: '$utilityErrorBg',
225
- warning: '$utilityWarningBg',
226
- };
140
+ ```css
141
+ /* CSS variables — note: category is "space", not "spacing" */
142
+ padding: var(--brick-space-x1); /* 0.3125rem (5px) */
143
+ padding: var(--brick-space-x2); /* 0.625rem (10px) */
144
+ padding: var(--brick-space-x3); /* 0.9375rem (15px) */
145
+ padding: var(--brick-space-x4); /* 1.25rem (20px) */
146
+ padding: var(--brick-space-x6); /* 1.875rem (30px) */
147
+ padding: var(--brick-space-x8); /* 2.5rem (40px) */
227
148
  ```
228
149
 
229
- ### Typography Tokens
230
-
231
- ```javascript
232
- const typography = {
233
- // Font sizes
234
- headingL: '$fontSize-heading-l',
235
- headingM: '$fontSize-heading-m',
236
- body: '$fontSize-body',
150
+ ### Color Tokens
237
151
 
238
- // Font weights
239
- bold: '$fontWeight-bold',
240
- regular: '$fontWeight-regular',
152
+ Color tokens follow the pattern: `{scope}-[context]-[prominence]-[sentiment]-[state]-{usage}`
241
153
 
242
- // Line heights
243
- tight: '$lineHeight-tight',
244
- normal: '$lineHeight-normal',
245
- };
154
+ ```css
155
+ /* CSS variables */
156
+ color: var(--brick-colors-baseFg);
157
+ background: var(--brick-colors-baseBg);
158
+ color: var(--brick-colors-buttonPrimaryFg);
159
+ background: var(--brick-colors-buttonPrimaryBg);
160
+ color: var(--brick-colors-utilitySuccessFg);
161
+ background: var(--brick-colors-utilityErrorBg);
246
162
  ```
247
163
 
248
164
  ## Development
@@ -263,25 +179,19 @@ npm run validate # Validate CSS files
263
179
 
264
180
  ## Technical Details
265
181
 
266
- - **Package Type**: Design tokens and CSS-in-JS utilities
182
+ - **Package Type**: Design tokens
267
183
  - **Token Format**: Style Dictionary compatible
268
- - **CSS-in-JS**: Stitches integration
269
184
  - **TypeScript**: Full type definitions
270
185
  - **Dependencies**:
271
186
  - @amedia/brick-classnames (utility classes)
272
187
  - @amedia/brick-themes (theme definitions)
273
- - @stitches/core (CSS-in-JS runtime)
274
188
 
275
189
  ## Important Notes
276
190
 
277
- - Version 6.0.0 is the current stable version
278
- - Tokens are generated from Figma via tokens-studio
279
- - All tokens follow consistent naming conventions
280
- - CSS custom properties use `--brick-*` prefix
281
- - Stitches tokens use `$` prefix
282
- - Themes override base tokens with publication-specific values
191
+ - Version 6.0.11 is the current stable version
192
+ - Tokens are generated from Figma via Tokens Studio + Style Dictionary
193
+ - CSS custom properties use `--brick-{category}-{tokenName}` prefix (e.g. `--brick-colors-baseFg`, `--brick-space-x1`)
194
+ - Theme CSS files are scoped to a class (e.g. `.themeAlfa`) — apply the class to a container element
195
+ - There is no single `tokens.css` — CSS is per-theme: `dist/css/{theme}/styles.css`
283
196
  - The package is used by all Brick components for consistent styling
284
-
285
- ## Version
286
-
287
- Current version: 6.0.0
197
+ - `sroStyle` is a utility class export for screen-reader-only visually hidden content
package/dist/data/components-metadata.json CHANGED
@@ -6,7 +6,8 @@
6
6
  "category": "Display",
7
7
  "tags": [
8
8
  "display"
9
- ]
9
+ ],
10
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-alt-teaser"
10
11
  },
11
12
  {
12
13
  "name": "brick-avatar",
@@ -16,7 +17,9 @@
16
17
  "category": "Display",
17
18
  "tags": [
18
19
  "display"
19
- ]
20
+ ],
21
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-avatar",
22
+ "mainJsFile": "brick-avatar.js"
20
23
  },
21
24
  {
22
25
  "name": "brick-button",
@@ -26,13 +29,17 @@
26
29
  "tags": [
27
30
  "forms",
28
31
  "interactive"
29
- ]
32
+ ],
33
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-button",
34
+ "mainJsFile": "brick-button.js"
30
35
  },
31
36
  {
32
37
  "name": "brick-byline",
33
38
  "version": "1.0.17",
34
39
  "selector": "brick-byline-v1",
35
- "description": "brick-byline component"
40
+ "description": "brick-byline component",
41
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-byline",
42
+ "mainJsFile": "brick-byline.js"
36
43
  },
37
44
  {
38
45
  "name": "brick-card",
@@ -41,7 +48,9 @@
41
48
  "category": "Layout",
42
49
  "tags": [
43
50
  "layout"
44
- ]
51
+ ],
52
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-card",
53
+ "mainJsFile": "brick-card.js"
45
54
  },
46
55
  {
47
56
  "name": "brick-carousel",
@@ -51,7 +60,9 @@
51
60
  "category": "Display",
52
61
  "tags": [
53
62
  "display"
54
- ]
63
+ ],
64
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-carousel",
65
+ "mainJsFile": "brick-carousel.js"
55
66
  },
56
67
  {
57
68
  "name": "brick-classnames",
@@ -61,13 +72,17 @@
61
72
  "category": "Utilities",
62
73
  "tags": [
63
74
  "utilities"
64
- ]
75
+ ],
76
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-classnames",
77
+ "mainJsFile": "brick-classnames.js"
65
78
  },
66
79
  {
67
80
  "name": "brick-countdown",
68
81
  "version": "3.0.2",
69
82
  "selector": "brick-countdown-v3",
70
- "description": "brick-countdown component"
83
+ "description": "brick-countdown component",
84
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-countdown",
85
+ "mainJsFile": "brick-countdown.js"
71
86
  },
72
87
  {
73
88
  "name": "brick-dialog",
@@ -77,13 +92,17 @@
77
92
  "category": "Feedback",
78
93
  "tags": [
79
94
  "feedback"
80
- ]
95
+ ],
96
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-dialog",
97
+ "mainJsFile": "brick-dialog.js"
81
98
  },
82
99
  {
83
100
  "name": "brick-expand",
84
101
  "version": "0.0.22",
85
102
  "selector": "brick-expand-v0",
86
- "description": "brick-expand component"
103
+ "description": "brick-expand component",
104
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-expand",
105
+ "mainJsFile": "brick-expand.js"
87
106
  },
88
107
  {
89
108
  "name": "brick-fonts",
@@ -93,13 +112,16 @@
93
112
  "category": "Utilities",
94
113
  "tags": [
95
114
  "utilities"
96
- ]
115
+ ],
116
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-fonts"
97
117
  },
98
118
  {
99
119
  "name": "brick-helloworld",
100
120
  "version": "2.0.20",
101
121
  "selector": "brick-helloworld-v2",
102
- "description": "Brick Hello World component"
122
+ "description": "Brick Hello World component",
123
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-helloworld",
124
+ "mainJsFile": "brick-helloworld.js"
103
125
  },
104
126
  {
105
127
  "name": "brick-icon",
@@ -108,13 +130,16 @@
108
130
  "category": "Display",
109
131
  "tags": [
110
132
  "display"
111
- ]
133
+ ],
134
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-icon",
135
+ "mainJsFile": "brick-icon.js"
112
136
  },
113
137
  {
114
138
  "name": "brick-illustrations",
115
139
  "version": "1.3.0",
116
140
  "selector": "brick-illustrations-v1",
117
- "description": "brick-illustrations"
141
+ "description": "brick-illustrations",
142
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-illustrations"
118
143
  },
119
144
  {
120
145
  "name": "brick-image",
@@ -123,7 +148,9 @@
123
148
  "category": "Display",
124
149
  "tags": [
125
150
  "display"
126
- ]
151
+ ],
152
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-image",
153
+ "mainJsFile": "brick-image.js"
127
154
  },
128
155
  {
129
156
  "name": "brick-input",
@@ -134,42 +161,56 @@
134
161
  "tags": [
135
162
  "forms",
136
163
  "interactive"
137
- ]
164
+ ],
165
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-input",
166
+ "mainJsFile": "brick-input.js"
138
167
  },
139
168
  {
140
169
  "name": "brick-pill",
141
170
  "version": "10.1.1",
142
- "selector": "brick-pill-v10"
171
+ "selector": "brick-pill-v10",
172
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-pill",
173
+ "mainJsFile": "brick-pill.js"
143
174
  },
144
175
  {
145
176
  "name": "brick-player",
146
177
  "version": "2.3.2",
147
178
  "selector": "brick-player-v2",
148
- "description": "Component for playing video and audio files"
179
+ "description": "Component for playing video and audio files",
180
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-player",
181
+ "mainJsFile": "brick-player.js"
149
182
  },
150
183
  {
151
184
  "name": "brick-published",
152
185
  "version": "4.0.18",
153
186
  "selector": "brick-published-v4",
154
- "description": "brick-published"
187
+ "description": "brick-published",
188
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-published",
189
+ "mainJsFile": "brick-published.js"
155
190
  },
156
191
  {
157
192
  "name": "brick-share",
158
193
  "version": "0.3.23",
159
194
  "selector": "brick-share-v0",
160
- "description": "brick-share component"
195
+ "description": "brick-share component",
196
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-share",
197
+ "mainJsFile": "brick-share.js"
161
198
  },
162
199
  {
163
200
  "name": "brick-stepper",
164
201
  "version": "1.1.4",
165
202
  "selector": "brick-stepper-v1",
166
- "description": "brick-stepper component"
203
+ "description": "brick-stepper component",
204
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-stepper",
205
+ "mainJsFile": "brick-stepper.js"
167
206
  },
168
207
  {
169
208
  "name": "brick-tab",
170
209
  "version": "0.1.25",
171
210
  "selector": "brick-tab-v0",
172
- "description": "brick-tab component"
211
+ "description": "brick-tab component",
212
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tab",
213
+ "mainJsFile": "brick-tab.js"
173
214
  },
174
215
  {
175
216
  "name": "brick-tabs",
@@ -179,13 +220,17 @@
179
220
  "category": "Navigation",
180
221
  "tags": [
181
222
  "navigation"
182
- ]
223
+ ],
224
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tabs",
225
+ "mainJsFile": "brick-tabs.js"
183
226
  },
184
227
  {
185
228
  "name": "brick-tag",
186
229
  "version": "0.0.25",
187
230
  "selector": "brick-tag-v0",
188
- "description": "brick-tag component"
231
+ "description": "brick-tag component",
232
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tag",
233
+ "mainJsFile": "brick-tag.js"
189
234
  },
190
235
  {
191
236
  "name": "brick-teaser",
@@ -195,7 +240,9 @@
195
240
  "category": "Display",
196
241
  "tags": [
197
242
  "display"
198
- ]
243
+ ],
244
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser",
245
+ "mainJsFile": "brick-teaser.js"
199
246
  },
200
247
  {
201
248
  "name": "brick-teaser-player",
@@ -205,7 +252,9 @@
205
252
  "category": "Display",
206
253
  "tags": [
207
254
  "display"
208
- ]
255
+ ],
256
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser-player",
257
+ "mainJsFile": "brick-teaser-player.js"
209
258
  },
210
259
  {
211
260
  "name": "brick-teaser-reels",
@@ -215,19 +264,25 @@
215
264
  "category": "Display",
216
265
  "tags": [
217
266
  "display"
218
- ]
267
+ ],
268
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-teaser-reels",
269
+ "mainJsFile": "brick-teaser-reels.js"
219
270
  },
220
271
  {
221
272
  "name": "brick-textarea",
222
273
  "version": "2.0.21",
223
274
  "selector": "brick-textarea-v2",
224
- "description": "brick-textarea component"
275
+ "description": "brick-textarea component",
276
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-textarea",
277
+ "mainJsFile": "brick-textarea.js"
225
278
  },
226
279
  {
227
280
  "name": "brick-themes",
228
281
  "version": "1.0.2",
229
282
  "selector": "brick-themes-v1",
230
- "description": "Brick theme names"
283
+ "description": "Brick theme names",
284
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-themes",
285
+ "mainJsFile": "brick-themes.js"
231
286
  },
232
287
  {
233
288
  "name": "brick-toast",
@@ -237,13 +292,17 @@
237
292
  "category": "Feedback",
238
293
  "tags": [
239
294
  "feedback"
240
- ]
295
+ ],
296
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toast",
297
+ "mainJsFile": "brick-toast.js"
241
298
  },
242
299
  {
243
300
  "name": "brick-toggle",
244
301
  "version": "3.1.25",
245
302
  "selector": "brick-toggle-v3",
246
- "description": "brick-toggle component"
303
+ "description": "brick-toggle component",
304
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-toggle",
305
+ "mainJsFile": "brick-toggle.js"
247
306
  },
248
307
  {
249
308
  "name": "brick-tokens",
@@ -253,12 +312,16 @@
253
312
  "category": "Utilities",
254
313
  "tags": [
255
314
  "utilities"
256
- ]
315
+ ],
316
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tokens",
317
+ "mainJsFile": "brick-tokens.js"
257
318
  },
258
319
  {
259
320
  "name": "brick-tooltip",
260
321
  "version": "1.0.28",
261
322
  "selector": "brick-tooltip-v1",
262
- "description": "brick-tooltip component"
323
+ "description": "brick-tooltip component",
324
+ "assetUrl": "https://assets.acdn.no/pkg/@amedia/brick-tooltip",
325
+ "mainJsFile": "brick-tooltip.js"
263
326
  }
264
327
  ]
package/package.json CHANGED
@@ -2,12 +2,15 @@
2
2
  "name": "@amedia/brick-mcp",
3
3
  "homepage": "https://github.com/amedia/brick.git",
4
4
  "author": "Amedia",
5
- "version": "0.1.8",
5
+ "version": "1.0.0",
6
6
  "description": "This is a MCP server for Brick",
7
7
  "license": "MIT",
8
8
  "type": "module",
9
9
  "main": "dist/index.js",
10
10
  "module": "dist/index.js",
11
+ "publishConfig": {
12
+ "access": "public"
13
+ },
11
14
  "bin": {
12
15
  "brick-mcp": "dist/index.js"
13
16
  },
package/scripts/generate-data.js CHANGED
@@ -109,6 +109,17 @@ async function generateComponentMetadata() {
109
109
  const category = categorizeComponent(componentName);
110
110
  const tags = extractTags(componentName, category);
111
111
 
112
+ // Extract eik CDN info
113
+ const eikServer = packageJson.eik?.server;
114
+ const eikFiles = packageJson.eik?.files;
115
+ const assetUrl = eikServer
116
+ ? `${eikServer}/pkg/${packageJson.name}`
117
+ : undefined;
118
+ const mainJsFile =
119
+ eikFiles && eikFiles[`${componentName}.js`]
120
+ ? `${componentName}.js`
121
+ : undefined;
122
+
112
123
  // Lightweight metadata (for list operations)
113
124
  const metadata = {
114
125
  name: componentName,
@@ -117,6 +128,8 @@ async function generateComponentMetadata() {
117
128
  description: packageJson.description,
118
129
  category,
119
130
  tags: tags.length > 0 ? tags : undefined,
131
+ assetUrl,
132
+ mainJsFile,
120
133
  };
121
134
 
122
135
  metadataList.push(metadata);