@amedia/brick-mcp 0.1.0 → 0.1.2

package/data/components-metadata.json

@@ -1,40 +1,57 @@
 [
   {
     "name": "brick-alt-teaser",
-    "version": "8.0.68",
+    "version": "8.0.70",
     "selector": "brick-alt-teaser-v8",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-avatar",
-    "version": "0.2.39",
+    "version": "0.2.42",
     "selector": "brick-avatar-v0",
     "description": "brick-avatar component",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-button",
-    "version": "9.3.4",
+    "version": "9.3.6",
     "selector": "brick-button-v9",
     "category": "Forms",
-    "tags": ["forms", "interactive"]
+    "tags": [
+      "forms",
+      "interactive"
+    ]
+  },
+  {
+    "name": "brick-byline",
+    "version": "1.0.2",
+    "selector": "brick-byline-v1",
+    "description": "brick-byline component"
   },
   {
     "name": "brick-card",
-    "version": "7.3.11",
+    "version": "7.3.13",
     "selector": "brick-card-v7",
     "category": "Layout",
-    "tags": ["layout"]
+    "tags": [
+      "layout"
+    ]
   },
   {
     "name": "brick-carousel",
-    "version": "2.0.13",
+    "version": "2.2.2",
     "selector": "brick-carousel-v2",
     "description": "Simple carousel for any content passed to it.",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-classnames",
@@ -42,25 +59,29 @@
     "selector": "brick-classnames-v2",
     "description": "Utility method to create a safe string from a design name",
     "category": "Utilities",
-    "tags": ["utilities"]
+    "tags": [
+      "utilities"
+    ]
   },
   {
     "name": "brick-countdown",
-    "version": "2.0.12",
+    "version": "2.0.14",
     "selector": "brick-countdown-v2",
     "description": "brick-countdown component"
   },
   {
     "name": "brick-dialog",
-    "version": "2.0.16",
+    "version": "2.0.18",
     "selector": "brick-dialog-v2",
     "description": "brick-dialog component",
     "category": "Feedback",
-    "tags": ["feedback"]
+    "tags": [
+      "feedback"
+    ]
   },
   {
     "name": "brick-expand",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "selector": "brick-expand-v0",
     "description": "brick-expand component"
   },
@@ -70,20 +91,24 @@
     "selector": "brick-fonts-v2",
     "description": "Distribution of font files",
     "category": "Utilities",
-    "tags": ["utilities"]
+    "tags": [
+      "utilities"
+    ]
   },
   {
     "name": "brick-helloworld",
-    "version": "2.0.5",
+    "version": "2.0.7",
     "selector": "brick-helloworld-v2",
     "description": "Brick Hello World component"
   },
   {
     "name": "brick-icon",
-    "version": "2.3.4",
+    "version": "2.3.6",
     "selector": "brick-icon-v2",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-illustrations",
@@ -93,18 +118,23 @@
   },
   {
     "name": "brick-image",
-    "version": "6.0.8",
+    "version": "6.0.10",
     "selector": "brick-image-v6",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-input",
-    "version": "3.0.12",
+    "version": "3.0.14",
     "selector": "brick-input-v3",
     "description": "brick-input component",
     "category": "Forms",
-    "tags": ["forms", "interactive"]
+    "tags": [
+      "forms",
+      "interactive"
+    ]
   },
   {
     "name": "brick-nifs",
@@ -114,80 +144,88 @@
   },
   {
     "name": "brick-pill",
-    "version": "9.0.5",
+    "version": "9.0.7",
     "selector": "brick-pill-v9"
   },
   {
     "name": "brick-player",
-    "version": "1.27.20",
+    "version": "1.27.22",
     "selector": "brick-player-v1",
     "description": "Component for playing video and audio files"
   },
   {
     "name": "brick-published",
-    "version": "4.0.4",
+    "version": "4.0.6",
     "selector": "brick-published-v4",
     "description": "brick-published"
   },
   {
     "name": "brick-share",
-    "version": "0.3.7",
+    "version": "0.3.9",
     "selector": "brick-share-v0",
     "description": "brick-share component"
   },
   {
     "name": "brick-stepper",
-    "version": "1.0.14",
+    "version": "1.0.16",
     "selector": "brick-stepper-v1",
     "description": "brick-stepper component"
   },
   {
     "name": "brick-tab",
-    "version": "0.1.11",
+    "version": "0.1.13",
     "selector": "brick-tab-v0",
     "description": "brick-tab component"
   },
   {
     "name": "brick-tabs",
-    "version": "0.1.12",
+    "version": "0.1.14",
     "selector": "brick-tabs-v0",
     "description": "brick-tabs component handling tablist, tabs and tabpanel",
     "category": "Navigation",
-    "tags": ["navigation"]
+    "tags": [
+      "navigation"
+    ]
   },
   {
     "name": "brick-tag",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "selector": "brick-tag-v0",
     "description": "brick-tag component"
   },
   {
     "name": "brick-teaser",
-    "version": "19.2.8",
-    "selector": "brick-teaser-v19",
+    "version": "20.1.0",
+    "selector": "brick-teaser-v20",
     "description": "Teaser component.",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-teaser-player",
-    "version": "1.0.25",
+    "version": "1.0.28",
     "selector": "brick-teaser-player-v1",
     "description": "brick-video-teaser component",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-teaser-reels",
-    "version": "0.2.32",
+    "version": "0.4.2",
     "selector": "brick-teaser-reels-v0",
     "description": "brick-teaser-reels component",
     "category": "Display",
-    "tags": ["display"]
+    "tags": [
+      "display"
+    ]
   },
   {
     "name": "brick-textarea",
-    "version": "2.0.7",
+    "version": "2.0.9",
     "selector": "brick-textarea-v2",
     "description": "brick-textarea component"
   },
@@ -199,30 +237,34 @@
   },
   {
     "name": "brick-toast",
-    "version": "0.1.23",
+    "version": "0.1.25",
     "selector": "brick-toast-v0",
     "description": "brick-toast component",
     "category": "Feedback",
-    "tags": ["feedback"]
+    "tags": [
+      "feedback"
+    ]
   },
   {
     "name": "brick-toggle",
-    "version": "3.1.10",
+    "version": "3.1.12",
     "selector": "brick-toggle-v3",
     "description": "brick-toggle component"
   },
   {
     "name": "brick-tokens",
-    "version": "5.19.9",
+    "version": "5.21.0",
     "selector": "brick-tokens-v5",
     "description": "Tokens package",
     "category": "Utilities",
-    "tags": ["utilities"]
+    "tags": [
+      "utilities"
+    ]
   },
   {
     "name": "brick-tooltip",
-    "version": "1.0.13",
+    "version": "1.0.15",
     "selector": "brick-tooltip-v1",
     "description": "brick-tooltip component"
   }
-]
+]

package/data/tokens-documentation.json

@@ -4,4 +4,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=\"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"
-}
+}