@amedia/brick-mcp 0.0.2 → 0.1.1

package/data/components-metadata.json

@@ -1,14 +1,14 @@
 [
   {
     "name": "brick-alt-teaser",
-    "version": "8.0.67",
+    "version": "8.0.69",
     "selector": "brick-alt-teaser-v8",
     "category": "Display",
     "tags": ["display"]
   },
   {
     "name": "brick-avatar",
-    "version": "0.2.38",
+    "version": "0.2.40",
     "selector": "brick-avatar-v0",
     "description": "brick-avatar component",
     "category": "Display",
@@ -16,21 +16,27 @@
   },
   {
     "name": "brick-button",
-    "version": "9.3.3",
+    "version": "9.3.5",
     "selector": "brick-button-v9",
     "category": "Forms",
     "tags": ["forms", "interactive"]
   },
+  {
+    "name": "brick-byline",
+    "version": "1.0.0",
+    "selector": "brick-byline-v1",
+    "description": "brick-byline component"
+  },
   {
     "name": "brick-card",
-    "version": "7.3.10",
+    "version": "7.3.12",
     "selector": "brick-card-v7",
     "category": "Layout",
     "tags": ["layout"]
   },
   {
     "name": "brick-carousel",
-    "version": "2.0.12",
+    "version": "2.2.1",
     "selector": "brick-carousel-v2",
     "description": "Simple carousel for any content passed to it.",
     "category": "Display",
@@ -46,13 +52,13 @@
   },
   {
     "name": "brick-countdown",
-    "version": "2.0.11",
+    "version": "2.0.13",
     "selector": "brick-countdown-v2",
     "description": "brick-countdown component"
   },
   {
     "name": "brick-dialog",
-    "version": "2.0.15",
+    "version": "2.0.17",
     "selector": "brick-dialog-v2",
     "description": "brick-dialog component",
     "category": "Feedback",
@@ -60,7 +66,7 @@
   },
   {
     "name": "brick-expand",
-    "version": "0.0.1",
+    "version": "0.0.3",
     "selector": "brick-expand-v0",
     "description": "brick-expand component"
   },
@@ -74,13 +80,13 @@
   },
   {
     "name": "brick-helloworld",
-    "version": "2.0.4",
+    "version": "2.0.6",
     "selector": "brick-helloworld-v2",
     "description": "Brick Hello World component"
   },
   {
     "name": "brick-icon",
-    "version": "2.3.3",
+    "version": "2.3.5",
     "selector": "brick-icon-v2",
     "category": "Display",
     "tags": ["display"]
@@ -93,14 +99,14 @@
   },
   {
     "name": "brick-image",
-    "version": "6.0.7",
+    "version": "6.0.9",
     "selector": "brick-image-v6",
     "category": "Display",
     "tags": ["display"]
   },
   {
     "name": "brick-input",
-    "version": "3.0.11",
+    "version": "3.0.13",
     "selector": "brick-input-v3",
     "description": "brick-input component",
     "category": "Forms",
@@ -114,42 +120,42 @@
   },
   {
     "name": "brick-pill",
-    "version": "9.0.4",
+    "version": "9.0.6",
     "selector": "brick-pill-v9"
   },
   {
     "name": "brick-player",
-    "version": "1.27.19",
+    "version": "1.27.21",
     "selector": "brick-player-v1",
     "description": "Component for playing video and audio files"
   },
   {
     "name": "brick-published",
-    "version": "4.0.3",
+    "version": "4.0.5",
     "selector": "brick-published-v4",
     "description": "brick-published"
   },
   {
     "name": "brick-share",
-    "version": "0.3.6",
+    "version": "0.3.8",
     "selector": "brick-share-v0",
     "description": "brick-share component"
   },
   {
     "name": "brick-stepper",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "selector": "brick-stepper-v1",
     "description": "brick-stepper component"
   },
   {
     "name": "brick-tab",
-    "version": "0.1.10",
+    "version": "0.1.12",
     "selector": "brick-tab-v0",
     "description": "brick-tab component"
   },
   {
     "name": "brick-tabs",
-    "version": "0.1.11",
+    "version": "0.1.13",
     "selector": "brick-tabs-v0",
     "description": "brick-tabs component handling tablist, tabs and tabpanel",
     "category": "Navigation",
@@ -157,21 +163,21 @@
   },
   {
     "name": "brick-tag",
-    "version": "0.0.10",
+    "version": "0.0.12",
     "selector": "brick-tag-v0",
     "description": "brick-tag component"
   },
   {
     "name": "brick-teaser",
-    "version": "19.2.7",
-    "selector": "brick-teaser-v19",
+    "version": "20.0.1",
+    "selector": "brick-teaser-v20",
     "description": "Teaser component.",
     "category": "Display",
     "tags": ["display"]
   },
   {
     "name": "brick-teaser-player",
-    "version": "1.0.24",
+    "version": "1.0.27",
     "selector": "brick-teaser-player-v1",
     "description": "brick-video-teaser component",
     "category": "Display",
@@ -179,7 +185,7 @@
   },
   {
     "name": "brick-teaser-reels",
-    "version": "0.2.31",
+    "version": "0.4.1",
     "selector": "brick-teaser-reels-v0",
     "description": "brick-teaser-reels component",
     "category": "Display",
@@ -187,7 +193,7 @@
   },
   {
     "name": "brick-textarea",
-    "version": "2.0.6",
+    "version": "2.0.8",
     "selector": "brick-textarea-v2",
     "description": "brick-textarea component"
   },
@@ -199,7 +205,7 @@
   },
   {
     "name": "brick-toast",
-    "version": "0.1.22",
+    "version": "0.1.24",
     "selector": "brick-toast-v0",
     "description": "brick-toast component",
     "category": "Feedback",
@@ -207,13 +213,13 @@
   },
   {
     "name": "brick-toggle",
-    "version": "3.1.9",
+    "version": "3.1.11",
     "selector": "brick-toggle-v3",
     "description": "brick-toggle component"
   },
   {
     "name": "brick-tokens",
-    "version": "5.19.8",
+    "version": "5.20.0",
     "selector": "brick-tokens-v5",
     "description": "Tokens package",
     "category": "Utilities",
@@ -221,7 +227,7 @@
   },
   {
     "name": "brick-tooltip",
-    "version": "1.0.12",
+    "version": "1.0.14",
     "selector": "brick-tooltip-v1",
     "description": "brick-tooltip component"
   }

package/data/tokens-documentation.json

@@ -1,7 +1,7 @@
 {
   "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=\"Brick 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",
   "formats": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Brick 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",
-  "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=\"Brick 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\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### In Javascript/Typescript\n\nUsed to generate CSS Custom Properties.\n\n#### Examples:\n\n**/build/style-dictionary/**[theme]**/web/color.ts**\n\n<Source\n  language=\"javascript\"\n  dark=\"true\"\n  code={`\n  //Example of value\nexport const utilityPrimaryBg = 'rgb(41, 40, 39)';\n  `}\n/>\n\n**/build/style-dictionary/**[theme]**/web/space.ts**\n\n<Source\n  language=\"javascript\"\n  dark=\"true\"\n  code={`\n  //Example of value\nexport const x1 = '0.3125rem';\n  `}\n/>\n\n## Naming a design token\n\nWe want to avoid token names describing the value, or specific component names.\n\nWe must aim to have clear semantic names that makes it as easy as possible to understand what the token should be used for.\n\nIn Figma the token name is always scoped to the \"category\", starting with i.e \"color\" for color properties.\n",
+  "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=\"Brick 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",
   "themes": "import { Meta, Canvas, Source } from '@storybook/addon-docs/blocks';\nimport { BrickStyle } from './brickStyle.js';\n\n<Meta title=\"Brick 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",
   "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"
 }