[{"data":1,"prerenderedAt":1491},["ShallowReactive",2],{"search-sections-en-[object Object]":3,"navigation-components_en-en":1400,"collection-components_en-\u002Fcomponents\u002Fbuttons\u002Fbutton":1419},[4,10,16,22,27,32,37,42,47,53,58,63,68,73,77,81,86,91,95,100,105,110,115,120,124,128,132,136,141,146,151,156,161,166,171,176,181,186,191,196,201,206,211,216,221,226,231,236,240,245,249,253,258,263,267,272,277,281,286,290,294,299,304,308,313,318,323,328,333,338,342,347,352,357,361,366,371,376,381,386,391,396,401,406,410,414,418,423,428,433,438,443,448,453,458,463,468,473,478,481,485,488,492,497,502,507,512,517,522,527,531,535,539,544,549,554,559,563,567,571,575,580,585,589,594,598,602,606,610,615,619,624,629,633,638,642,647,651,655,660,664,668,672,676,680,684,688,692,697,701,706,709,714,719,724,728,733,737,741,745,749,753,757,760,763,768,773,778,783,788,793,797,802,805,808,812,817,821,824,828,831,835,840,845,849,854,859,863,868,871,875,878,883,888,893,898,903,907,912,917,922,927,932,937,942,947,951,956,961,966,971,975,979,983,986,989,993,998,1003,1008,1013,1018,1022,1027,1030,1034,1037,1041,1045,1050,1054,1059,1064,1068,1072,1077,1082,1087,1092,1097,1102,1107,1112,1117,1122,1127,1132,1137,1142,1147,1152,1156,1161,1166,1171,1176,1181,1186,1191,1196,1201,1206,1211,1216,1221,1226,1231,1236,1240,1245,1250,1255,1260,1265,1270,1275,1280,1285,1290,1295,1300,1305,1310,1315,1320,1325,1329,1333,1337,1342,1347,1352,1357,1362,1367,1372,1377,1382,1387,1392,1396],{"id":5,"title":6,"titles":7,"content":8,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Finstallation","Installation",[],"Welcome to our design system! This guide covers the installation of our Vue components and how to integrate the Figma library to get your project started. Learn how to quickly set up our Vue component library and connect with our Figma assets.",1,{"id":11,"title":12,"titles":13,"content":14,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Finstallation#vue-setup","Vue setup",[6],"Visual idea: Decision tree to select which type of application \u002F installation should be done (because the installation steps differ here):Components only (plain Vue library)Nuxt moduleDocumentation templateVue Blueprint (for Schwarz internal users) Before you begin, ensure you have a basic Vue or Nuxt project set up. If you're starting from scratch, follow their official documentation to initialize your app, then return here to complete the integration.",2,{"id":17,"title":18,"titles":19,"content":20,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Finstallation#vue-only","Vue only",[6,12],"This is the basic setup for installing our design system in any Vue application. Skip ahead to the Nuxt guide for a simplified installation with our Nuxt module. Install the library via your favorite package manager: To get started, import the styles and initialize the Vue plugin. This enables global configuration, Vue Router support, and additional core features: import { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\n\nimport \"sit-onyx\u002Fstyle.css\";\n\n\u002F\u002F by default, no styles will have side affects on your global application styles like \u003Cbody> etc.\n\u002F\u002F when building a whole application with our design system, we recommend also importing the following global styles\n\u002F\u002F which will apply the correct application background color, font styles etc.:\n\u002F\u002F import \"sit-onyx\u002Fglobal.css\";\n\nconst onyx = createOnyx({\n  \u002F\u002F if you are using Vue Router, make sure to pass it here be enable the router integration\n  \u002F\u002F router: createRouter(),\n});\n\nconst app = createApp(App);\napp.use(onyx);",3,{"id":23,"title":24,"titles":25,"content":26,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Finstallation#nuxt-users","Nuxt users",[6,12],"Simply install our Nuxt module to automate the entire configuration process: Register the module in your Nuxt application: export default defineNuxtConfig({\n  modules: [\"@sit-onyx\u002Fnuxt\"],\n  onyx: {\n    \u002F\u002F optional module options here...\n  },\n}); For more details, see the Nuxt module documentation.",{"id":28,"title":29,"titles":30,"content":31,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Finstallation#figma-setup","Figma setup",[6],"Our Figma library is currently available exclusively to Schwarz Group employees and their official partners. Before proceeding, ensure you have a Figma design file ready. If you need help creating one, refer to the Figma documentation.To use our components and styles, add our library to your file following the standard Figma process. For more details, see the Figma library documentation. html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":33,"title":34,"titles":35,"content":36,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps","First steps",[],"Find key principles and essential first steps for building a new application. Even if you have used our design system before, consider this a checklist for a consistent setup with every new project. Find essential principles and setup steps below. This guide serves as a recurring checklist for both new and experienced users starting a new application. This page is basically a summary \u002F checklist about advanced onyx topics (layouts, grid, theming etc.) where one simple action is required from the user immediately for a new project. But the full principle is documented on a dedicated sub page (Read more link). Is there a nice way to visualize this?",{"id":38,"title":39,"titles":40,"content":41,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#layout","Layout",[34],"Our layout components manage the application's structural complexity, including scroll behavior and navigation positioning. We highly recommend adopting these layouts to avoid manual implementation and maintain system standards.",{"id":43,"title":44,"titles":45,"content":46,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#app-layout","App layout",[34,39],"Positioned at the root of your application, the App Layout serves as the shell for global navigation and main content. It also acts as a functional provider for system-level components like toasts and notifications. Example implementation for App.vue for plain Vue and app\u002Fapp.vue for Nuxt that includes a basic navigation bar and renders the current page :",{"id":48,"title":49,"titles":50,"content":51,"level":52},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#vue","Vue",[34,39,44],"\u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\nimport { RouterView } from \"vue-router\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Example app\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003CRouterView \u002F>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",4,{"id":54,"title":55,"titles":56,"content":57,"level":52},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#nuxt","Nuxt",[34,39,44],"\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"Example app\">\n        \u003COnyxNavItem label=\"Page 1\" link=\"\u002Fpage-1\" \u002F>\n        \u003COnyxNavItem label=\"Page 2\" link=\"\u002Fpage-2\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003CNuxtRouteAnnouncer \u002F>\n\n    \u003CNuxtLayout>\n      \u003CNuxtPage \u002F>\n    \u003C\u002FNuxtLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate> For further information, available slots, customization etc., please visit the app layout documentation.",{"id":59,"title":60,"titles":61,"content":62,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#page-layout","Page layout",[34,39],"Implement the Page Layout on every page to ensure standardized spacing and scroll handling. It provides dedicated slots for easily integrating sidebars, footers, and main content. \u003Cscript lang=\"ts\" setup>\nimport { OnyxHeadline, OnyxPageLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxPageLayout>\n    \u003COnyxHeadline is=\"h1\">Hello World\u003C\u002FOnyxHeadline>\n  \u003C\u002FOnyxPageLayout>\n\u003C\u002Ftemplate> For recurring elements like sidebars or footers, wrap the PageLayout in a reusable component or Nuxt layout. This allows you to apply your custom layout globally to individual pages. Refer to the page layout documentation for API details and customization options.",{"id":64,"title":65,"titles":66,"content":67,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#grid","Grid",[34],"Another key step is configuring your application's layout grid. While we won't cover the technical details here, you can find everything you need to know in our grid documentation. We recommend defining your content's maximum width and alignment early on. On very large screens, stretching content across the entire width often degrades the user experience. Our standard recommendation is to cap the content at 1920px (the lg breakpoint) and use center alignment, as shown in the example below. \u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003C!-- you can also use the \"onyx-grid-max-md\" class or none to not limit the width at all -->\n  \u003COnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n    \u003C!-- your app content here... -->\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>",{"id":69,"title":70,"titles":71,"content":72,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#typography","Typography",[34],"Our design system does not bundle any font families by default, giving you full flexibility in your choice of typography. Unless you have specific requirements, we recommend using 'Source Sans 3' as the primary font and 'Source Code Pro' for monospace content. For further information, please visit our typography documentation. When using one of our build-in themes you don't need to setup the fonts manually since they will be included in the corresponding theme. Install the recommended font packages: Import the fonts into your entry point (e.g., main.ts):",{"id":74,"title":49,"titles":75,"content":76,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#vue-1",[34,70],"import \"@fontsource-variable\u002Fsource-code-pro\";\nimport \"@fontsource-variable\u002Fsource-sans-3\";",{"id":78,"title":55,"titles":79,"content":80,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#nuxt-1",[34,70],"export default defineNuxtConfig({\n  css: [\"@fontsource-variable\u002Fsource-code-pro\", \"@fontsource-variable\u002Fsource-sans-3\"],\n});",{"id":82,"title":83,"titles":84,"content":85,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#theming","Theming",[34],"The design system includes a default theme with a pre-configured color palette. For custom branding, you can either select one of our pre-defined themes](\u002Fintroduction\u002Ffoundation\u002Fcolors) or create your own. A dedicated generator is planned for the future. For now, please refer to our color documentation to manually override the theme variables.",{"id":87,"title":88,"titles":89,"content":90,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#custom-styles","Custom styles",[34],"In my opinion, that does not belong here. Maybe we can make a \"How-Tos\" or \"Tutorials\" section where we explain such things? Can move it to \"Support?\" Most use cases are covered by built-in component properties. For unique styling requirements, you can easily override our CSS. Use the browser's developer tools to inspect the component's structure and define your custom overrides accordingly. \u003Cscript lang=\"ts\" setup>\nimport { OnyxInput } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxInput label=\"Example label\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cstyle scoped>\n:deep(.onyx-form-element__label) {\n  color: red;\n}\n\u003C\u002Fstyle> The :deep() selector is necessary when using scoped styles to target child components. While removing scoped allows you to omit :deep(), be aware that your CSS will become global and may cause unintended side effects across your application. For a deep dive, see Vue’s documentation on deep selectors.",{"id":92,"title":29,"titles":93,"content":94,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffirst-steps#figma-setup",[34],"Migrate content from the existing Figma Onboarding file. Enable the \"Thumbnail Library - UX Schwarz IT\".Apply the project thumbnail to your file.Structure your pages using flows and the \"Screenflow Cover\".Set the \"Appearance\" to your required Onyx theme and density.Insert a Full HD frame (1920 x 1080px).Apply onyx\u002Fcolor\u002Fbase\u002Fbackground\u002Ftinted as the fill color.Enable the layout grid. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":96,"title":97,"titles":98,"content":99,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Fbrowser-support","Browser Support",[],"Our design system is built for the modern web and supports current browser versions.",{"id":101,"title":102,"titles":103,"content":104,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Fbrowser-support#overview","Overview",[97],"We perform extensive end-to-end (E2E) testing against the following browsers to ensure the best possible support.While older versions might function, we do not guarantee full compatibility. TODO: show supported browsers here: Chrome, Firefox, and Safari - which versions? If you need to support specific older browser versions, use lightningcss with @vitejs\u002Fplugin-legacy or nuxt-vite-legacy for Nuxt applications. These tools provide polyfills and syntax lowering to ensure compatibility. import { defineNuxtConfig } from \"nuxt\u002Fconfig\";\n\nexport default defineNuxtConfig({\n  \u002F\u002F Use `lightningcss` to support syntax lowering for modern CSS features\n  vite: {\n    build: {\n      cssMinify: \"lightningcss\",\n    },\n    css: {\n      lightningcss: {\n        targets: {\n          chrome: 120,\n        },\n      },\n    },\n  },\n\n  \u002F\u002F Use the `nuxt-vite-legacy` module to inject polyfills for relevant user agents\n  legacy: {\n    targets: [\"chrome >= 120\"],\n  },\n  modules: [\"nuxt-vite-legacy\"],\n}); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":106,"title":107,"titles":108,"content":109,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies","Technologies",[],"Querverweise auf unsere Technologien oder Ecosysteme verweisen: Blueprint + Nuxt, etc Wäre mMn sinnvoll das Router Kapitel auch in foundation zu packen. Ist für mich equivalent zum i18n thema.",{"id":111,"title":112,"titles":113,"content":114,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#vue-router-integration","Vue Router integration",[107],"The onyx design system integrates with Vue Router but also functions independently. When you use it with Vue Router, it includes the following features: When you pass links to components like the OnyxLink or OnyxNavBar components, the system opens internal links (such as \u002Fmy-page) through the provided Vue router.The system uses native browser behavior for external links, internal links with target=\"_blank\", or instances where no router is provided.The system automatically sets the active state of navigation and menu items based on the current route.Mobile flyouts for the navigation bar, such as the burger and context menus, close automatically when the current route changes. This happens, for example, when a user clicks a navigation item.",{"id":116,"title":117,"titles":118,"content":119,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#setup","Setup",[107],"If you use the Nuxt module, the router setup is already configured. To enable the Vue Router integration, pass your router instance when you create the plugin using createOnyx(). import { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\nimport { createRouter } from \"vue-router\";\n\nconst router = createRouter({\n  \u002F\u002F Router options\n});\n\nconst onyx = createOnyx({ router });\n\nconst app = createApp(App);\napp.use(router).use(onyx); Use the onyx components to ensure that links are handled correctly.\nAll button-like components, including navigation items, can function as either a link or a button.\nTo implement this, set the link attributes using the link property. \u003COnyxButton label=\"Schwarz Digits IT\" link=\"https:\u002F\u002Fschwarz-digits.de\u002F\" \u002F> Consider using one of these components: OnyxButtonOnyxIconButtonOnyxSystemButtonOnyxMenuItemOnyxNavItem For more advanced use cases, use the headless alternatives: You can implement the unstyled OnyxRouterLink or the useLink composable to build a custom link component. \u003Cscript lang=\"ts\" setup>\nimport { useLink } from \"@sit-onyx\";\n\nconst { navigate, isActive } = useLink();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Ca\n    :href=\"props.href\"\n    :target=\"props.target\"\n    :aria-current=\"isActive(props.href) ? true : undefined\"\n    @click=\"navigate($event, props.href)\"\n  >\n    \u003Cslot>\u003C\u002Fslot>\n  \u003C\u002Fa>\n\u003C\u002Ftemplate>",{"id":121,"title":107,"titles":122,"content":123,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#technologies",[],"Querverweise auf unsere Technologien oder Ecosysteme verweisen: Blueprint + Nuxt, etc",{"id":125,"title":112,"titles":126,"content":127,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#vue-router-integration-1",[107],"onyx nicely integrates with the Vue Router of your application. This brings the following features: when passing links to components (e.g. OnyxLink or OnyxNavBar), internal links like \u002Fmy-page or opened via the provided Vue router. External links, internal links with target=\"_blank\" or if no router is provided, will be opened using browser-native behavior.the active state of the OnyxNavItem and OnyxMenuItem will be automatically set depending on the current routemobile flyouts of the OnyxNavBar (burger and context menu) will automatically be closed when the current route changes (e.g. because the user has clicked a nav item)",{"id":129,"title":117,"titles":130,"content":131,"level":21},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#setup-1",[107,112],"",{"id":133,"title":55,"titles":134,"content":135,"level":52},"\u002Fintroduction\u002Fgetting-started\u002Ftechnologies#nuxt",[107,112,117],"If you are using the onyx Nuxt module, the router setup is already configured for you. To enable the Vue Router integration with onyx, simply pass your router instance when creating the onyx plugin via createOnyx(): import { createApp } from \"vue\";\nimport { createOnyx } from \"sit-onyx\";\nimport { createRouter } from \"vue-router\";\n\nconst router = createRouter({\n  \u002F\u002F your router options\n});\n\nconst onyx = createOnyx({ router });\n\nconst app = createApp(App);\napp.use(router).use(onyx); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":137,"title":138,"titles":139,"content":140,"level":9},"\u002Fintroduction\u002Fgetting-started\u002Ffigma-library","Figma library",[],"Explores how our design system bridges the gap between design and implementation through an automated, token-driven pipeline that ensures a Single Source of Truth.",{"id":142,"title":143,"titles":144,"content":145,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffigma-library#description","Description",[138],"Our design system is far more than a collection of UI components; it is the shared language between UX design and software engineering. We are committed to a Single Source of Truth, ensuring that every design decision made in Figma translates directly into code without information loss or manual overhead.",{"id":147,"title":148,"titles":149,"content":150,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffigma-library#workflow","Workflow",[138],"By deeply integrating our Figma libraries with automated figma-utils, we have replaced traditional \"hand-offs\" with a synchronized pipeline: Automation: Design tokens and variables are extracted directly from Figma and transformed into production-ready code assets.Integrity: Designers work within a secure network using validated components, eliminating UI inconsistencies at the root.Efficiency: Developers can pull these updates into their applications at the push of a button, drastically reducing \"Design-to-Code\" lead times.",{"id":152,"title":153,"titles":154,"content":155,"level":15},"\u002Fintroduction\u002Fgetting-started\u002Ffigma-library#value","Value",[138],"This synergy allows us to scale a consistent, accessible (WCAG-compliant), and high-performance brand experience across our entire digital ecosystem. We provide the technological foundation for rapid product development without compromising on design quality.",{"id":157,"title":158,"titles":159,"content":160,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fcolors","Colors & Themes",[],"We use semantic colors and multiple themes - such as light and dark mode - to ensure a consistent and accessible visual experience across all platforms. Colors enhance the visual appeal and user experience of an interface. They serve as tools to convey information, establish hierarchy and evoke emotions. A consistent color scheme guides users, highlights important elements and creates a cohesive design. Color choices influence how users perceive and interact with the interface.",{"id":162,"title":163,"titles":164,"content":165,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fcolors#themes","Themes",[158],"We include a free and Open Source theme out-of-the-box which supports light and dark mode. It is applied automatically without manual setup required. Light modetintedblankDark modetintedblank",{"id":167,"title":168,"titles":169,"content":170,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fcolors#colors","Colors",[158],"We offer a wide variety of pre-defined color palettes that can be used universally for different use cases and adapt automatically when switched between light and dark mode. We strongly recommend to always the CSS or Figma variables shown below when using colors instead of hard-coding the actual color values. This ensures that the application maintains themeable and adjust correctly between light and dark mode. For more information, refer to our variables documentation.",{"id":172,"title":173,"titles":174,"content":175,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fcolors#brand-colors","Brand colors",[158,168],"Implement brand colors as minimalist identifiers rather than decorative elements.",{"id":177,"title":178,"titles":179,"content":180,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#primary","Primary",[158,168,173],"The primary brand color serves as the core identifier in every theme. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintenseboldStatesWe support specific colors for certain states such as borders or focus \u002F outlines to maintain a consistent usage across the design system.ctacta-hoverborderborder-hoverfocus",{"id":182,"title":183,"titles":184,"content":185,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#secondary","Secondary",[158,168,173],"Use the secondary brand color only for predefined accent occasions to maintain system stability. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintensebold",{"id":187,"title":188,"titles":189,"content":190,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#neutral","Neutral",[158,168,173],"Used for backgrounds, borders and secondary actions. They provide a subtle contrast that allows the primary colors to stand out. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintenseinvertedStatesWe support specific colors for certain states such as borders or focus \u002F outlines to maintain a consistent usage across the design system.cta-disabledborder-neutralborder-disabledfocus-neutral",{"id":192,"title":193,"titles":194,"content":195,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fcolors#system-colors","System colors",[158,168],"Use system colors to communicate functional status and provide immediate semantic feedback. These colors are reserved for specific states and must not be used for decorative branding.",{"id":197,"title":198,"titles":199,"content":200,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#danger","Danger",[158,168,193],"The danger variant indicates that urgent intervention is required. Use this variant for critical alerts, destructive actions such as deletions or blocking errors. It signals high-priority risks to help prevent data loss. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintenseboldStatesWe support specific colors for certain states such as borders or focus \u002F outlines to maintain a consistent usage across the design system.ctacta-hoverborderborder-hoverfocus",{"id":202,"title":203,"titles":204,"content":205,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#warning","Warning",[158,168,193],"The warning variant indicates a medium-priority caution for scenarios such as security prompts, non-blocking errors or potential consequences. Use this variant to alert the user to proceed with caution. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintensebold",{"id":207,"title":208,"titles":209,"content":210,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#success","Success",[158,168,193],"The success variant confirms positive outcomes, such as task completion, \"Saved\" status or healthy system processes. Use this variant to provide reinforcement and task closure. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintenseboldStatesWe support specific colors for certain states such as borders or focus \u002F outlines to maintain a consistent usage across the design system.borderborder-hoverfocus",{"id":212,"title":213,"titles":214,"content":215,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#info","Info",[158,168,193],"The info variant provides objective, neutral information including general updates, tips and straightforward guidance. Use this variant to provide clarity without creating alarm. BaseBase colors represent a universal color palette that can be used as needed.100200300400500600700800900Text & IconsText and icon colors should exclusively be applied to text and icons.softmediumintensebold",{"id":217,"title":218,"titles":219,"content":220,"level":52},"\u002Fintroduction\u002Ffoundation\u002Fcolors#quantitative-colors","Quantitative colors",[158,168,193],"Use the quantitative palette exclusively for data visualization to ensure clarity and professional data storytelling. ApplicationUse only for infographics such as bar charts, pie graphs and data-heavy dashboards to distinguish between distinct data segments.ConstraintDo not use these colors for standard UI elements (buttons, backgrounds etc.). They are intentionally decoupled from the brand palette to avoid semantic confusion.GoalQuantitative colors maximize legibility and ensure that complex datasets remain easy to interpret through high-contrast, distinct hues. 100200300400500600700800900100011001200",{"id":222,"title":223,"titles":224,"content":225,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fcolors#backgrounds","Backgrounds",[158,168],"Tinted background should be applied to the page background itself while individual UI components should maintain a blank background.\nRead our layout guide on how to create a basic app and page layout. tintedblank",{"id":227,"title":228,"titles":229,"content":230,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fcolors#backdrops","Backdrops",[158,168],"Backdrops are applied to the whole page when an overlay is currently visible such as modals. We recommend using our OnyxModal component. mediumsoft",{"id":232,"title":233,"titles":234,"content":235,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fcolors#usage","Usage",[158],"To switch between light and dark mode, define the color-scheme CSS property on any element that you want to apply the theme to. You can define the property either globally for the whole application or only for specific components.:root {\n  color-scheme: dark;\n}\nTo also support older tools and libraries, we additionally support applying the dark mode using a .dark CSS class but using the color-scheme CSS property is recommended instead.Automatic light\u002Fdark modeTo support a better user experience, we recommend to support automatically applying the light and dark mode depending on the users preferences \u002F system settings. See below on how to implement this using Vue or Nuxt. Additionally, you can use our OnyxColorSchemeMenuItem or OnyxColorSchemeDialog inside your nav bar to let the user interactively adjust the theme between auto, light and dark mode.Install VueUseIf not already done, install the VueUse npm package:Enable automatic light\u002Fdark modeAdd the useColorMode() composable from VueUse to easily support the automatic light\u002Fdark mode detection:\u003Cscript setup lang=\"ts\">\nimport { useColorMode } from \"@vueuse\u002Fcore\";\nimport { useThemeTransition } from \"sit-onyx\";\n\nconst { store: colorScheme } = useColorMode({ disableTransition: false });\nuseThemeTransition(colorScheme);\n\u003C\u002Fscript>\nInstall Nuxt moduleIf not already done, install the @nuxtjs\u002Fcolor-mode module:Enable automatic light\u002Fdark modeAdd the @nuxtjs\u002Fcolor-mode module to your Nuxt config to easily support the automatic light\u002Fdark mode detection:export default defineNuxtConfig({\n  modules: [\"@nuxtjs\u002Fcolor-mode\"],\n});\nTo change the theme in Figma, use the mode selection on the page, frame, layer or component that you want the theme to be applied to and select the desired theme under \"Appearance\". html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":237,"title":70,"titles":238,"content":239,"level":9},"\u002Fintroduction\u002Ffoundation\u002Ftypography",[],"Typography is the heart of our user interface—it’s the voice of our digital products. It provides structure, establishes clear visual hierarchies, and ensures accessible communication across our entire ecosystem.",{"id":241,"title":242,"titles":243,"content":244,"level":15},"\u002Fintroduction\u002Ffoundation\u002Ftypography#font-families","Font families",[70],"Our design system utilizes only a few different font families to avoid \"font fatigue\": One sans-serif and a monospace font family. We achieve contrast through strategic variations in font weight and size rather than mixing multiple font families. By default, the following Open Source and free typefaces are used, specifically optimized for legibility on digital displays: Default: Source Sans 3 Clear, modern and approachable. Check it out on Google Fonts.Monospace: Source Code ProPrecise and rhythmic. Designed for data-heavy environments and code blocks. Check it out on Google Fonts. To support the diverse identities, brands and themes, we utilize a flexible variable architecture so e.g. font families can easily be customized. See the custom font families section below for further information.",{"id":246,"title":233,"titles":247,"content":248,"level":15},"\u002Fintroduction\u002Ffoundation\u002Ftypography#usage",[70],"Instead of defining arbitrary pixel values, we follow a semantic logic by defining roles that describe the functional intent of the text. Find an overview of available text styles below. Whenever possible, we strongly recommend to use one of our components to apply headlines, links and other texts. HeadlinesUse our OnyxHeadline component for applying headlines.The headline styles h5 and h6 are only supported for technical semantic reasons but are not part of our design system. Therefore, they are styled the same as h4.Hello WorldHello WorldHello WorldHello WorldHello WorldHello WorldLinksUse our OnyxLink component for applying links.Hello WorldHello WorldParagraphsUse regular text for applying paragraphs and apply the corresponding Figma style \u002F CSS class if needed.Hello WorldHello WorldHello WorldFont familiesFont families can be applied to any component using the corresponding Figma style \u002F CSS class.Hello WorldHello WorldTruncationTruncation defines how text should be handled if it is too long to fit inside its parent container. While \"multiline\" is technically the default, we still provide a custom CSS class for optimizing edge cases and hyphenation.Hello WorldHello World Hello World Hello World Hello World Hello World Hello World",{"id":250,"title":6,"titles":251,"content":252,"level":15},"\u002Fintroduction\u002Ffoundation\u002Ftypography#installation",[70],"We do not bundle \u002F include any font families in our design system itself to support better build-time asset optimizations and to maintain a smaller bundle size.\nTherefore, it is mandatory that you manually install your desired font families. Otherwise the application will fallback to browser default font families.Install font familiesWe recommend installing the fonts using Fontsource:Add importsFinally, add imports for the font families so they are ready to be used by your application:import \"@fontsource-variable\u002Fsource-sans-3\";\nimport \"@fontsource-variable\u002Fsource-code-pro\";\nexport default defineNuxtConfig({\n  css: [\"@fontsource-variable\u002Fsource-sans-3\", \"@fontsource-variable\u002Fsource-code-pro\"],\n});\nCustom font familiesTo use custom font families instead of our recommended ones, follow the steps below:Install custom font familiesFollow the same installation instructions above to install your custom font families.Override default font familiesWhen installed, override our default font families with your custom ones to apply them throughout the whole design system. Make sure to replace the \"Font family name\" with the exact name of your sans-serif and monospace font.:root {\n  --onyx-font-family-Source-Sans-3-Variable: \"Font family name\", sans-serif;\n  --onyx-font-family-Source-Code-Pro-Variable: \"Font family name\", monospace;\n}\nOur recommended font families need to be installed in Figma before they can be used by our or your custom components.Its strongly recommended to upload the font families to your Figma organization so all members and projects automatically have access to them. Follow this Figma guide for further instructions. html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":254,"title":255,"titles":256,"content":257,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fdensity","Density",[],"Density adjusts the vertical space of components to optimize layouts for various screen sizes and improve data scannability.",{"id":259,"title":260,"titles":261,"content":262,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fdensity#introduction","Introduction",[255],"Density refers to the amount of vertical white space within a component and the height of its primary interactive element. To provide a flexible toolkit for various user preferences and device capabilities, this design system offers three density levels: Compact, Default and Cozy. These levels use fixed base heights of 32px, 40px and 48px. Compact High-density layouts maximize information density and optimize limited screen space for expert interfaces, data-heavy dashboards, and complex data grids.Default The standard baseline balances scannability with visual comfort across all devices for most enterprise and general-purpose applications.Cozy Content-focused layouts utilize spacious white space to increase readability and reduce cognitive load for touch-friendly interfaces and simplified workflows.",{"id":264,"title":233,"titles":265,"content":266,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fdensity#usage",[255],"When selecting a density, it will apply to the selected component as well as to all nested components unless they explicitly define another density. You can change the density using the density property of supported components or by applying the below CSS classes to any elements of your application.\n  .onyx-density-compact\n  .onyx-density-default\n  .onyx-density-cozy\u003Ctemplate>\n  \u003COnyxButton label=\"Button\" density=\"compact\" \u002F>\n  \u003C!-- or -->\n  \u003Cdiv class=\"onyx-density-compact\">Your custom component\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nTo change the density in Figma, use the mode selection on the page, frame, layer or component that you want the density to be applied to. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":268,"title":269,"titles":270,"content":271,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fvariables","Variables",[],"Design variables are key-value pairs that serve as the single source of truth for visual properties, ensuring cross-platform consistency through a semantic naming structure and a unique prefix. Design variables are fundamental, reusable key-value pairs that represent specific design attributes such as color, typography, or spacing. They ensure consistency and streamline development across all platforms. Variables must be preferred over plain values to e.g. ensure that colors adapt automatically between light and dark mode or spacings are updated depending on the selected density. Design variables are used by both developers and designers to ensure customizability while maintaining a unified visual identity.",{"id":273,"title":274,"titles":275,"content":276,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fvariables#architecture","Architecture",[269],"Our variable system uses a three-layer architecture though only the semantic variables are relevant \u002F accessed directly during application development. Global variablesGlobal variables provide a context-free foundation for the design language by systematically storing plain values — such as colors and spacing. They are NOT intended to be used directly in custom components or applications.Semantic variables Semantic variables map global variables to fundamental contexts\u002F use cases and automatically adapt between light and dark mode. They allow developers and designers to build (custom) components with a clear usage intent and guaranteed theme switching.Component variablesComponent variables are restricted to the design system maintainers to manage unique overrides and exceptions within specific components, such as a primary button's hover state. They are NOT intended to be used directly in custom components or applications.",{"id":278,"title":233,"titles":279,"content":280,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fvariables#usage",[269],"For a full overview of available variables, please refer to the following pages: We use a strict naming convention for all variables to ensure clarity and avoid conflicts with custom application variables. Therefore, all our variables are prefixed with \"onyx\". Due to technical reasons, variables are separated by dashes in development and by slashes in Figma - meaning these usages refer to the same variable: --onyx-color-text-icons-neutral-intense (development) and onyx\u002Fcolor\u002Ftext\u002Ficons\u002Fneutral\u002Fintense (Figma). All our variables are represented by CSS custom properties so they can easily be used in CSS using the var() function:.my-component {\n  color: var(--onyx-color-text-icons-neutral-intense);\n}\nUse Figma's variable menu and select \"Libraries\" to see and apply available variables. For further information, please refer to the Figma documentation. html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":282,"title":283,"titles":284,"content":285,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid","Breakpoints & Grid",[],"Breakpoints and our grid system work together to create responsive layouts that fluidly adapt to different screen sizes and device orientations. Our design system utilizes column grids to establish structured layouts that organize content, components, and UI elements into a cohesive hierarchy. This framework ensures consistent alignment and distribution across all applications. By acting as the foundation for responsive behavior, the grid enables seamless adaptation across various screen sizes and resolutions, ultimately enhancing usability and the overall user experience. Visit our interactive Grid Playground to see our grid system in action.",{"id":287,"title":65,"titles":288,"content":289,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid#grid",[283],"Our grid system is basically build out of the following three main building blocks: ColumnsThe available width (either the whole screen or only a specific section \u002F element) is divided into up to 12 columns.\nEach element inside the grid can then define how many columns it should span. The grid will then take care of positioning the elements accordingly and wrap them into new rows if they exceed the available columns.The maximum number of available columns per row will adapt dynamically based on the screen \u002F container breakpoint.\nThis adaptive approach ensures out-of-the-box responsive behavior of the elements and a consistent width of elements across different screen sizes, pages and applications. See the breakpoints below for an overview of the available breakpoints and their maximum grid columns.Gutters \u002F GapsElements placed inside the grid are automatically spaced with pre-defined gutters \u002F gaps.MarginsOptionally, unified margins can be placed around the grid which is particularly useful when applied to the whole page content so every page has consistent and dynamic spacing around the page content so it does not \"stick\" to the screen borders.",{"id":291,"title":233,"titles":292,"content":293,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid#usage",[283,65],"To create a new grid container, simply add the onyx-grid CSS class to any element. We support the following CSS classes to define how many columns an element should span. Multiple classes can be combined to achieve optimized responsiveness.Specific number of columnsUse the onyx-grid-span-\u003Cnumber> CSS class to define that an element should always span exactly \u003Cnumber> of columns. Replace \u003Cnumber> with the actual number of columns:\u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-4\">Grid element\u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nFull widthTo make an element full width (span all available columns), regardless of the current breakpoint, use the onyx-grid-span-full class:\u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-full\">Grid element\u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nSpecific breakpointsIt might sometimes be useful to change the number of columns for specific breakpoints for optimized responsive behavior. To achieve this, use the onyx-grid-\u003Cbreakpoint>-span-\u003Cnumber> CSS class and replace \u003Cnumber> with the desired number of columns and \u003Cbreakpoint> with the desired breakpoint. The element will then span \u003Cnumber> of columns for the given \u003Cbreakpoint> and larger.Breakpoints specific grid spans are usually combined with one default onyx-grid-span-\u003Cnumber> class. See the breakpoints below for an overview of the available breakpoints.\u003Ctemplate>\n  \u003Cdiv class=\"onyx-grid\">\n    \u003COnyxCard class=\"onyx-grid-span-4 onyx-grid-md-span-6\">\n      \u003C!-- will span 4 columns for smaller than md breakpoint and 6 columns for md and larger -->\n      Grid element\n    \u003C\u002FOnyxCard>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\nCustom containerOur grid system is build using CSS container queries which means that each grid refers to its nearest container to evaluate the current breakpoint.When using our OnyxPageLayout, OnyxAppLayout or OnyxSidebar component, the container is automatically defined.You can define a custom container by setting the container-type CSS property on any element. This is particularly useful when e.g. using the grid inside the OnyxModal or custom components so the actual component width is used to determine the number of columns etc.\u003Cscript lang=\"ts\" setup>\nimport { OnyxModal } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxModal class=\"modal\" label=\"Example grid modal\">\n    \u003Cdiv class=\"onyx-grid\">\n      \u003Cdiv class=\"onyx-grid-span-2\">Grid element\u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002FOnyxModal>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\" scoped>\n.modal {\n  width: 32rem;\n  container-type: inline-size;\n}\n\u003C\u002Fstyle>\nGrid marginThe outer grid margin is already applied by our OnyxPageLayout component. If you still need to implement it manually, simply use the .onyx-grid-layout CSS class:\u003Ctemplate>\n\u003COnyxPageLayout no-padding>\n  \u003C!-- place e.g. full width content like a hero here...  -->\n\n  \u003Cdiv class=\"onyx-grid-layout\">\n    \u003C!-- place your page content here -->\n  \u003C\u002Fdiv>\n\u003C\u002FOnyxPageLayout>\n\u003C\u002Ftemplate>\nApply a layout grid to your frame \u002F page by selecting on of our pre-defined grid layouts in the \"Layout guide\" menu.\nEnsure to select to correct grid size depending on the size of your frame \u002F breakpoint.",{"id":295,"title":296,"titles":297,"content":298,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid#customization","Customization",[283,65],"You can customize the grid in several ways as shown below. Simply set the corresponding CSS classes on the root element of your application. Max widthBy default, components can take up the whole available screen width. Since content can be overwhelming for users with larger screens such as 2k and beyond, you can limit the overall grid content width of the application. Grid usages and components such as the OnyxNavBar or OnyxBottomBar will adapt automatically.To limit the width, apply one of the following options to your root application element:AlignmentThe grid alignment is only relevant when you have set a max width (see above). In this case you can decide whether the grid should be left or center aligned when the users screens exceeds the max width:Max columnsThe grid is limited to 12 columns by default. To make use of extra space available on larger screens such as 4k monitors, you can optionally increase the maximum number of columns to either 16 or 20. Note that the extra columns are only available for the lg breakpoint and above. \u003COnyxAppLayout class=\"onyx-grid-max-lg onyx-grid-center\">\n  \u003C!-- your application content... -->\n\u003C\u002FOnyxAppLayout>",{"id":300,"title":301,"titles":302,"content":303,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid#breakpoints","Breakpoints",[283],"Breakpoints are specific widths where the page or component layout automatically changes into a different layout so its stays readable on a smaller or larger device. Our design system defines the following breakpoints: Our smallest supported breakpoints is 320px which means that we do not guarantee optimized layouts for smaller screens.",{"id":305,"title":233,"titles":306,"content":307,"level":21},"\u002Fintroduction\u002Ffoundation\u002Fbreakpoints-and-grid#usage-1",[283,301],"When using custom layouts or components, you can use our SCSS mixins to easily apply styles when either the whole screen or an container \u002F element width matches a specific min\u002Fmax breakpoint:Media queriesTo apply styles only when the whole screen has a specific min or max width, use our breakpoints.screen() SCSS mixin that applies CSS media queries.@use \"sit-onyx\u002Fbreakpoints.scss\";\n\n.some-class {\n  @include breakpoints.screen(max, sm) {\n    \u002F\u002F your styles for md screens and smaller\n  }\n\n  @include breakpoints.screen(min, md) {\n    \u002F\u002F your styles for md screens and larger\n  }\n}\nContainer queriesTo apply styles only when a single element has a specific min or max width, use our breakpoints.container() SCSS mixin that applies CSS container queries. Before applying the container queries, ensure the add the container-type CSS property.The breakpoint is considered inclusively so when defining min and max for the same breakpoint, make sure to add an offset for one of them.@use \"sit-onyx\u002Fbreakpoints.scss\";\n\n.some-class {\n  container-type: size;\n\n  @include breakpoints.container(max, md) {\n    \u002F\u002F your styles for md containers and smaller\n  }\n\n  @include breakpoints.container(min, md, $offset: 1) {\n    \u002F\u002F your styles for containers larger than md\n  }\n}\nUsage in codeTo access the breakpoints programmatically (e.g. inside a ResizeObserver), use the ONYX_BREAKPOINTS object:import { ONYX_BREAKPOINTS } from \"sit-onyx\";\n\nconsole.log(`Width for sm breakpoint is: ${ONYX_BREAKPOINTS.sm}px`);\nUsing individual breakpoints directly is not relevant for Figma designs. Instead, refer to the grid usage for how to apply grids in Figma. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":309,"title":310,"titles":311,"content":312,"level":9},"\u002Fintroduction\u002Ffoundation\u002Faccessibility","Accessibility",[],"Web accessibility guidelines and laws are crucial for ensuring that the digital content is inclusive and accessible to individuals with disabilities. Our design system is aiming to be level AA (WCAG 2.2) compliant.",{"id":314,"title":315,"titles":316,"content":317,"level":15},"\u002Fintroduction\u002Ffoundation\u002Faccessibility#our-commitment","Our commitment",[310],"To make sure products are accessible to everyone, we are committed to being compliant with level AA for all of our components. The Web Content Accessibility Guidelines (WCAG) 2.2 developed by the Web Accessibility Initiative (WAI), are a set of guidelines which purpose is to provide a comprehensive framework for making web content more accessible: Level AAddresses the most critical barriers—such as basic keyboard operability—without which navigation would be impossible for many users.Level AA This level optimizes readability and interaction reliability for the general public and meets the legal requirements for digital products.Level AAAThe highest tier with specialized requirements, such as sign language interpretation, typically relevant for specific government agencies or dedicated target groups.",{"id":319,"title":320,"titles":321,"content":322,"level":15},"\u002Fintroduction\u002Ffoundation\u002Faccessibility#what-accessibility-means-for-us","What accessibility means for us",[310],"Among other things, we mainly focus on the following key principles for our design system: ARIA PatternsIf applicable, our components are implemented following their official ARIA Pattern. This ensures that known and established design and functional patterns are used that the user is already familiar with.Assistive technologyWe guarantee keyboard support for all our components and provide additional context for screen readers where needed. Accessibility and descriptive properties are required, not optional.Color contrastWe are aiming to use only high contrast colors so text is well readable in any condition and components are clearly visible. To learn more, please visit our Colors & Themes documentation.",{"id":324,"title":325,"titles":326,"content":327,"level":15},"\u002Fintroduction\u002Ffoundation\u002Faccessibility#how-we-ensure-accessibility","How we ensure accessibility",[310],"To ensure that our components are accessible to everyone, we perform automated accessibility testing for all our components across all component variations and states.",{"id":329,"title":330,"titles":331,"content":332,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fi18n","Internationalization",[],"Our design system supports commonly used languages out-of-the-box. These include translations that are used by our components like texts for cancel \u002F confirm buttons, \"No data\" scenarios and more.",{"id":334,"title":335,"titles":336,"content":337,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fi18n#available-languages","Available languages",[330],"While English (en-US) is the default language, additional languages need to be registered manually before they are ready to use.\nAfterwards, the application language is detected and the onyx language is synched automatically so there is no need to manually change it. All listed languages are continuously kept up to date. The English and German translations are created manually by native (or near-native) speakers.\nBased on them, the other languages are generated using Artificial Intelligence (AI) but might have been (partially) reviewed or adjusted by native or neat-native speakers afterwards.",{"id":339,"title":6,"titles":340,"content":341,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fi18n#installation",[330],"Integrate your existing vue-i18n setup with our translation by passing in your applications locale to the onyx plugin and defining additional languages if needed:import { createOnyx } from \"sit-onyx\";\nimport onyxDE from \"sit-onyx\u002Flocales\u002Fde-DE.json\";\nimport { createI18n } from \"vue-i18n\";\n\nconst i18n = createI18n({\n  \u002F\u002F your existing vue-i18n setup...\n});\n\nconst onyx = createOnyx({\n  i18n: {\n    locale: i18n.global.locale,\n    \u002F\u002F the messages locale name here (e.g. \"de-DE\") MUST be exactly the same as you defined them in your vue-i18n setup (createI18n())\n    messages: { \"de-DE\": onyxDE },\n  },\n});\n\ncreateApp(App).use(i18n).use(onyx);\nWhenever you change your applications locale using vue-i18n, the onyx language will be updated automatically.When using Nuxt with our @sit-onyx\u002Fnuxt module, it will detect which locales you are using in your application and register the corresponding onyx languages automatically.Only if you are NOT using 4-digit BCP 47 language codes, you need to make sure that all your locales define the language property correctly:export default defineNuxtConfig({\n  modules: [\"@sit-onyx\u002Fnuxt\", \"@nuxtjs\u002Fi18n\"],\n  i18n: {\n    locales: [\n      { code: \"de-DE\" },\n      \u002F\u002F using only \"es\" as code here, so we need to define the full language manually\n      { code: \"es\", language: \"es-ES\" },\n    ],\n  },\n}); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":343,"title":344,"titles":345,"content":346,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fimages","Images",[],"Images are essential visual elements that convey information, enhance aesthetics and improve the overall user experience. Follow our fundamental recommendations to make sure images are used effectively.",{"id":348,"title":349,"titles":350,"content":351,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fimages#principles","Principles",[344],"Images are powerful tools for conveying messages and information quickly. They can communicate concepts, emotions, and information more effectively than text alone. We recommend following the below key principles when using images: Color gamutSelect images where a single primary hue (e.g., blue, green, or red) dominates the composition.\nChoose images with a harmonious, monochromatic, or analogous color profile.\n\nDon't use images with a high-saturation mix of multiple competing primary colors.\nTip: Use varying color gamuts across different pages to provide users with subtle visual cues for navigation and orientation.Natural lightingPrioritize soft, authentic light sources to maintain a grounded and realistic aesthetic.\nEnsure the light is naturally balanced and the subjects appear evenly lit.\n\nDon't use images with harsh highlights, deep shadows, or high-contrast studio lighting, especially on faces.\nTip: Avoid over-processing or applying highly stylized filters that make the image look artificial.Authentic snapshotsChoose \"candid\" imagery that feels like a captured moment in time rather than a staged production.\nLook for natural movements and genuine human interactions.\n\nDon't use images with forced expressions, \"stock-photo\" smiles, or clearly rehearsed poses.\nTip: Every photo should feel like a real-life snapshot of a normal, unscripted action.Visual simplicityFocus on minimalist compositions that emphasize a single, clear message.\nLook for images with generous \"negative space\" or clean backgrounds.\n\nDon't select cluttered scenes or images with too many competing focal points.\nTip: Simple images reduce visual noise and make the visual statement immediate and clear.Direct authenticityUse \"pure\" photography that has not been digitally manipulated or constructed.\nUse images with naturally placed content.\n\nDon't use images on which text, graphics, or 3D elements were placed afterwards or that were created completely in 3D.\nTip: Every asset must feel captured by a camera, never constructed on a computer.Technical qualityVerify that every asset meets high-fidelity technical standards before implementation. Additionally, the image resolution should be optimized for its usage since adding high resolution 4k image with a large file size that is displayed very small, leads to unnecessary high loading times and requires higher data volume (especially for cellular connections).Also prefer modern file formats such as WebP for reducing the file size.\nUse high-resolution files that remain sharp on all screen types.\n\nDon't accept assets with visible pixelation, compression artifacts or motion blur.\nTip: If individual pixels are visible, the image is not fit for use.",{"id":353,"title":354,"titles":355,"content":356,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fimages#sources","Sources",[344],"In general you are free to use any image source. But pay attention on the licensing for those images. We are not responsible for any kind of license or legal violations. To prevent this, we recommend to use either your own copyright images or royalty free sources like:",{"id":358,"title":310,"titles":359,"content":360,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fimages#accessibility",[344],"Images must have a descriptive alternative text to be accessible for all users. This ensures that users with visual impairments or those using screen readers can still understand the content conveyed by the image. It can only be provided technically and must not necessarily be displayed visually. The alternative text is also used when the image can not be loaded.",{"id":362,"title":363,"titles":364,"content":365,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fimages#technical-usage","Technical usage",[344],"We recommend using our OnyxImage component for displaying images. It supports\u002Frequires accessible properties out-of-the-box and includes additional convenient features.",{"id":367,"title":368,"titles":369,"content":370,"level":9},"\u002Fintroduction\u002Ffoundation\u002Flayouts","Layouts",[],"Different layouts are the best way to focus the users attention and create hierarchy. Additionally, a well chosen layout serves as a guiding hand for the user to work with the application. Our recommended way to create both an attractive and accessible layout is to follow the principles below.",{"id":372,"title":373,"titles":374,"content":375,"level":15},"\u002Fintroduction\u002Ffoundation\u002Flayouts#core-principles","Core principles",[368],"The following fundamental principles are recommended for every layout: ResponsiveLayouts must be adaptive, ensuring structural integrity and usability across all devices and screen sizes.Content-drivenThe layout must be dictated by the content, not the other way around. Prioritize the structural needs of information before selecting a layout pattern. We strongly recommend using our grid system for ensuring responsive and consistent layouts.",{"id":377,"title":378,"titles":379,"content":380,"level":15},"\u002Fintroduction\u002Ffoundation\u002Flayouts#page-anatomy","Page anatomy",[368],"This section defines the global regions of an application. In its most comprehensive form, a typical page consists of four regions: Main navigationProvides access to top-level pages and global interactions. This region is persistent (fixed at the top or left) and independent of the scroll container. See our OnyxNavBar component for the technical usage.SidebarFacilitates navigation within a master-detail structure or provides secondary interactions. It remains fixed to the side of the screen (left or right). See our OnyxSidebar component for the technical usage.Page contentThe primary area for displaying information. This section is flexible, governed by our grid system and serves as the main scroll container of the interface. See our OnyxPageLayout component for the technical usage.Bottom barA global region at the bottom of the screen for triggering confirmations or status updates. It is independent of scrolling and can be applied to specific objects or the entire page. See our OnyxBottomBar component for the technical usage. All available options regarding content alignment and max-width can be found in our grid documentation. For easy technical usage, we strongly recommend using our OnyxAppLayout and OnyxPageLayout components. Here is an example of a basic app layout to get started:\u003Cscript lang=\"ts\" setup>\nimport { OnyxAppLayout, OnyxPageLayout, OnyxNavBar, OnyxNavItem } from \"sit-onyx\";\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxAppLayout>\n    \u003Ctemplate #navBar>\n      \u003COnyxNavBar app-name=\"App name\" logo-url=\"\u002Flogo.svg\">\n        \u003COnyxNavItem label=\"Home\" link=\"\u002F\" \u002F>\n      \u003C\u002FOnyxNavBar>\n    \u003C\u002Ftemplate>\n\n    \u003COnyxPageLayout> Page content... \u003C\u002FOnyxPageLayout>\n  \u003C\u002FOnyxAppLayout>\n\u003C\u002Ftemplate>\nFollow the steps below to create a new Figma frame for a page layout:Create new frameFirst, create a new frame. We recommend to use the \"Desktop => Wireframes\" size (1440x1024px) if you don't have any other requirements.Define background fillSelect the frame that you have just created and set its \"Fill\" to the onyx\u002Fcolor\u002Fbase\u002Fbackground\u002Ftinted variable using the \"Libraries\" menu. This ensures that the frame background is set correctly and updates accordingly between light and dark mode.Add componentsThe frame is now ready to be used. Add your required components (e.g. nav bar, sidebar etc.) to the frame and manually adjust their width \u002F height if needed.",{"id":382,"title":383,"titles":384,"content":385,"level":15},"\u002Fintroduction\u002Ffoundation\u002Flayouts#component-layout","Component layout",[368],"Internal component structures are always left-aligned. The only exception to this rule is within table columns, which may utilize center or right alignment for specific data types. Left align the content within components.Don't use center or right alignments within components. Exceptions like table columns might still exist.",{"id":387,"title":388,"titles":389,"content":390,"level":15},"\u002Fintroduction\u002Ffoundation\u002Flayouts#visual-rhythm-grouping","Visual Rhythm & Grouping",[368],"To establish a sense of structure, we focus on the visual and functional connection between elements: Proportion & BalanceMaintaining balanced proportions across content sections ensures a smooth, professional appearance.Spatial GroupingObjects sharing similar functionality or content should be visually clustered. We use open space (white space), typography, and dividers to distinguish these groups and reduce cognitive load. html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":392,"title":393,"titles":394,"content":395,"level":9},"\u002Fintroduction\u002Ffoundation\u002Fanimations","Animations",[],"Use purposeful animations to guide focus and provide functional feedback. Ensure transitions are smooth and do not disrupt the user task. Currently, we only include basic animations and transitions in certain components such as loading indicators or toasts. Full animation support is still on our roadmap and is not implemented in all components or in full extend yet.",{"id":397,"title":398,"titles":399,"content":400,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fanimations#less-is-more","Less is more",[393],"The user should not be distracted by elaborate animations. Instead, they should support the user in his workflow, provide feedback and make the entire application easier to understand.",{"id":402,"title":403,"titles":404,"content":405,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fanimations#durations","Durations",[393],"In general, you are free to use any duration for your animations and transitions. However, we provide a set of default recommended durations that ensure consistent timing across multiple components and applications.",{"id":407,"title":310,"titles":408,"content":409,"level":15},"\u002Fintroduction\u002Ffoundation\u002Fanimations#accessibility",[393],"Animations can be uncomfortable for users with vestibular motion disorders.\nTherefore, users can configure their browser to prefer reduced motion which is provided to the application. Developers should consider this user preference and disable the animations and transitions in this case.",{"id":411,"title":412,"titles":413,"content":131,"level":9},"\u002Fintroduction\u002Fchangelog","Changelog",[],{"id":415,"title":260,"titles":416,"content":417,"level":9},"\u002Fintroduction",[],"Welcome to the documentation of the onyx design system! We are very delighted, that you decided to work with onyx! First things first. User experience is key to us, so we developed 10 commandments to follow. If you stick to those, very happy end users will be the result. So please, feel free to explore whole documentation of onyx!",{"id":419,"title":420,"titles":421,"content":422,"level":15},"\u002Fintroduction#_10-guidelines-for-excellent-user-experience","10 Guidelines for excellent user experience",[260],"Expand the boxes to discover more details.",{"id":424,"title":425,"titles":426,"content":427,"level":21},"\u002Fintroduction#_01-clarity-and-simplicity","01 Clarity and simplicity",[260,420],"Strive for simplicity in design to facilitate a user experience that is both intuitive and efficient. Prioritize clarity by employing straightforward language, eliminating unnecessary elements, and ensuring that each visual component serves a distinct purpose. Maintain a clean and uncluttered layout to enhance comprehension, allowing users to navigate with ease and focus on essential information.",{"id":429,"title":430,"titles":431,"content":432,"level":21},"\u002Fintroduction#_02-consistency","02 Consistency",[260,420],"Consistency is paramount for creating a visually cohesive and harmonious interface. By adhering to consistent design elements, users experience a sense of familiarity, reducing cognitive friction and reinforcing the brand's visual identity.",{"id":434,"title":435,"titles":436,"content":437,"level":21},"\u002Fintroduction#_03-recognizable-calls-to-action","03 Recognizable calls to action",[260,420],"Craft compelling calls to action that stand out prominently within the interface. Clearly communicate the desired user action using concise and action-oriented language. Draw attention to CTAs and place them strategically in areas where users naturally focus their attention to guide them through the intended user journey.",{"id":439,"title":440,"titles":441,"content":442,"level":21},"\u002Fintroduction#_04-user-feedback","04 User feedback",[260,420],"Enhance user engagement by providing immediate and informative feedback for their actions. Implement visual cues, such as hover effects or subtle animations, to signify interactive elements. Offer clear feedback messages, confirming successful actions or providing guidance in the event of errors. Feedback should be timely, reinforcing user confidence and fostering a responsive and dynamic user interface.",{"id":444,"title":445,"titles":446,"content":447,"level":21},"\u002Fintroduction#_05-efficient-navigation","05 Efficient navigation",[260,420],"Design an intuitive navigation structure that guides users seamlessly through the interface. Group related items logically and label navigation elements clearly. Prioritize ease of use by organizing content hierarchically and providing straightforward pathways for users to find information. Implement intuitive navigation patterns to reduce cognitive load and enhance overall usability.",{"id":449,"title":450,"titles":451,"content":452,"level":21},"\u002Fintroduction#_06-accessibility","06 Accessibility",[260,420],"Prioritize accessibility to ensure an inclusive experience for users with diverse abilities. Opt for color contrasts that meet accessibility standards, choose readable fonts and provide alternative text for images. Consider the use of WCAG attributes and ensure compatibility with screen readers and other assistive technologies. An accessible interface promotes equal access to information and functionality for all users.",{"id":454,"title":455,"titles":456,"content":457,"level":21},"\u002Fintroduction#_07-form-follows-function","07 Form follows function",[260,420],"While the layout undoubtedly plays a pivotal role, a nuanced approach emphasizes that the layout must seamlessly harmonize with the content it encapsulates. Recognizing the diverse nature of data and content is paramount, as each necessitates a unique treatment of layout and UI elements.\nEmphasizing content and its call to actions as the focal point is key. By prioritizing content, designers shape layouts that not only look visually appealing but also meet functional needs effectively.",{"id":459,"title":460,"titles":461,"content":462,"level":21},"\u002Fintroduction#_08-minimize-cognitive-load","08 Minimize cognitive load",[260,420],"Reduce cognitive load by presenting information in a structured and easily digestible manner. Break down complex tasks into manageable steps, allowing users to focus on one task at a time. Prioritize content hierarchy, placing essential information prominently. Avoid unnecessary details that may overwhelm users, fostering a design that encourages seamless comprehension and decision-making.",{"id":464,"title":465,"titles":466,"content":467,"level":21},"\u002Fintroduction#_09-flexibility-and-responsiveness","09 Flexibility and responsiveness",[260,420],"Design with flexibility to accommodate various devices and screen sizes. Utilize responsive design principles to ensure that the UI adapts gracefully to different platforms. Implement fluid layouts, scalable images, and adaptive design techniques. Consider the interface across multiple devices to guarantee a consistent and enjoyable user experience, regardless of the user's chosen device.",{"id":469,"title":470,"titles":471,"content":472,"level":21},"\u002Fintroduction#_10-progressive-disclosures","10 Progressive disclosures",[260,420],"Embrace progressive disclosure to guide users through the interface progressively. Present information gradually, revealing details as users move through the user journey. Prioritize essential information initially, avoiding information overload. Use intuitive design elements, such as accordions or tooltips, to provide additional information when requested. By progressively disclosing information, the interface maintains user engagement while preventing overwhelming users with unnecessary details.",{"id":474,"title":475,"titles":476,"content":477,"level":15},"\u002Fintroduction#topics-to-explore","Topics to explore",[260],"AccessibilityBreakpoints & GridColorsComponent statesDensityElevationIconographyImagesInfographicsLayoutMotionTruncationTypographyUnits",{"id":479,"title":44,"titles":480,"content":131,"level":9},"\u002Fresources\u002Ftemplates\u002Fapp-layout",[],{"id":482,"title":483,"titles":484,"content":131,"level":9},"\u002Fresources\u002Ftemplates","Templates",[],{"id":486,"title":60,"titles":487,"content":131,"level":9},"\u002Fresources\u002Ftemplates\u002Fpage-layout",[],{"id":489,"title":490,"titles":491,"content":131,"level":9},"\u002Fresources\u002Ficons","Icons",[],{"id":493,"title":494,"titles":495,"content":496,"level":21},"\u002Fresources\u002Ficons#attention","Attention",[490],"Check out the whole icon palette in the resources documentation.\nFeel free to browse through all the assets there. Our system icons are designed to be simple with a touch of detail. They are characteristic, yet easy to understand.",{"id":498,"title":499,"titles":500,"content":501,"level":15},"\u002Fresources\u002Ficons#grid-and-keylines","Grid and keylines",[490],"The square format with the 1px grid is the foundation for all of our system icons. This ensures the look of the set in terms of thickness, proportion, shape and weight are the same. The grid helps to design a unified set of icons and still be as flexible as possible.",{"id":503,"title":504,"titles":505,"content":506,"level":15},"\u002Fresources\u002Ficons#basic-layout","Basic layout",[490],"The icons are created on a base grid of 32x32px and then reduced or enlarged to the appropriate size. The grid comes with a padding of 2px. The padding should only be exceeded if it is necessary to give additional visual weighting or if a certain element is required to give the icon its characteristic or meaning. The keylines ensure a certain consistency in shape and proportion in the overall icon set. In exceptional cases and if the design of the icon does not allow otherwise, the design can go beyond the shape.",{"id":508,"title":509,"titles":510,"content":511,"level":15},"\u002Fresources\u002Ficons#stroke","Stroke",[490],"The weighting of different icons should be the same as possible and should not look heavier or lighter. To make this possible, only a 2px stroke is used. The distance between parallel strokes is at least 2px. There are a few exceptions which occurs when the icon is complex or has a certain density of line.",{"id":513,"title":514,"titles":515,"content":516,"level":15},"\u002Fresources\u002Ficons#angles","Angles",[490],"The basic angle is 45°. If necessary, the increments of 15° and 5° are the next steps.",{"id":518,"title":519,"titles":520,"content":521,"level":15},"\u002Fresources\u002Ficons#corners","Corners",[490],"Unified corner radius ensure the element is recognizable and in harmony with the set. 2px is the standard radius and can be increased in further steps of two.",{"id":523,"title":524,"titles":525,"content":526,"level":15},"\u002Fresources\u002Ficons#sizes","Sizes",[490],"All icons are created as vector graphics and due to the base unit, the icons are limited to specific sizes. The default size is 24x24px, but we also use a smaller and a larger variant based on the system patterns. NameSize2xs12px squarexs16px squaresm24px squaremd32px squarelg48px squarexl64px square2xl96px square For a full list of icons, please take a look at the icon resources.",{"id":528,"title":490,"titles":529,"content":530,"level":9},"\u002Fresources\u002Ficons#icons",[],"onyx includes a set of well-crafted SVG icons that are free to use. If you want to download the icons as SVG, please head over to our GitHub repository. A full changelog can be found here.",{"id":532,"title":6,"titles":533,"content":534,"level":15},"\u002Fresources\u002Ficons#installation",[490],"To get started, install the npm package with your corresponding package manager: Afterwards, you can import and use icons as needed. Please see the OnyxIcon for the technical documentation.",{"id":536,"title":233,"titles":537,"content":538,"level":15},"\u002Fresources\u002Ficons#usage",[490],"There are two different ways of using \u002F importing icons from this package:",{"id":540,"title":541,"titles":542,"content":543,"level":21},"\u002Fresources\u002Ficons#option-1-javascript-import-recommended","Option 1: JavaScript import (recommended)",[490,233],"For the best developer experience, it is recommended to use JavaScript imports. This approach also supports IDE intellisense, so you can e.g. just start typing \"icon\" in your editor and all available icons will be suggested to you. import { iconPlaceholder } from \"@sit-onyx\u002Ficons\";\n\n\u002F\u002F or to import all icons (note: no tree-shaking will be supported then):\n\u002F\u002F import * as ALL_ICONS from \"@sit-onyx\u002Ficons\";",{"id":545,"title":546,"titles":547,"content":548,"level":21},"\u002Fresources\u002Ficons#option-2-import-from-svg-file","Option 2: Import from SVG file",[490,233],"Alternatively, you can import the icon from the raw SVG file: \u002F\u002F Note that \"?raw\" is needed to import the SVG content instead of a path to the file itself.\n\u002F\u002F ?raw will be resolved by the bundler (e.g. Vite).\n\u002F\u002F if you want to import the path to the icon instead of the content, you can omit the \"?raw\" part\nimport iconPlaceholder from \"@sit-onyx\u002Ficons\u002Fplaceholder.svg?raw\";",{"id":550,"title":551,"titles":552,"content":553,"level":15},"\u002Fresources\u002Ficons#available-icons","Available icons",[490],"You can hover over an icon to see its name. Click on it or press enter when selecting it via keyboard to copy the import statement for the selected icon. html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":555,"title":556,"titles":557,"content":558,"level":9},"\u002Fresources\u002Fflags","Flags",[],"onyx includes a set of well-crafted SVG flags that are free to use. If you want to download the flags as SVG, please head over to our GitHub repository. A full changelog can be found here.",{"id":560,"title":6,"titles":561,"content":562,"level":15},"\u002Fresources\u002Fflags#installation",[556],"To get started, install the npm package with your corresponding package manager: Afterwards, you can import and use flags as needed. Please see the OnyxIcon for the technical documentation. Technically, flags are used the same way as icons in onyx. This means that also flags can be passed for all components that support icons.",{"id":564,"title":233,"titles":565,"content":566,"level":15},"\u002Fresources\u002Fflags#usage",[556],"There are two different ways of using \u002F importing flags from this package:",{"id":568,"title":541,"titles":569,"content":570,"level":21},"\u002Fresources\u002Fflags#option-1-javascript-import-recommended",[556,233],"For the best developer experience, it is recommended to use JavaScript imports. This approach also supports IDE intellisense, so you can e.g. just start typing \"flag\" in your editor and all available flags will be suggested to you. import { flagDE } from \"@sit-onyx\u002Fflags\";\n\n\u002F\u002F or to import all flags (note: no tree-shaking will be supported then):\n\u002F\u002F import * as ALL_FLAGS from \"@sit-onyx\u002Fflags\";",{"id":572,"title":546,"titles":573,"content":574,"level":21},"\u002Fresources\u002Fflags#option-2-import-from-svg-file",[556,233],"Alternatively, you can import the icon from the raw SVG file: \u002F\u002F Note that \"?raw\" is needed to import the SVG content instead of a path to the file itself.\n\u002F\u002F ?raw will be resolved by the bundler (e.g. Vite).\n\u002F\u002F if you want to import the path to the flag instead of the content, you can omit the \"?raw\" part\nimport flagDE from \"@sit-onyx\u002Fflags\u002FDE.svg?raw\";",{"id":576,"title":577,"titles":578,"content":579,"level":15},"\u002Fresources\u002Fflags#country-names","Country names",[556],"You can get the country name of a flag in several languages using JavaScript's Intl.DisplayNames API. Here is an example on how to use it (together with vue-i18n):",{"id":581,"title":582,"titles":583,"content":584,"level":21},"\u002Fresources\u002Fflags#expand-code-snippet","Expand code snippet",[556,577],"import { useI18n } from \"vue-i18n\";\n\nconst { locale } = useI18n();\n\nconst countryNames = computed(() => new Intl.DisplayNames(locale.value, { type: \"region\" }));\nconst germany = computed(() => countryNames.value.of(\"DE\"));\n\u002F\u002F Output (depending on the locale):\n\u002F\u002F \"Germany\" if locale is EN\n\u002F\u002F \"Deutschland\" if locale is DE\n\u002F\u002F ... Alternatively, there is also metadata available for each flag exported from the @sit-onyx\u002Fflags package:",{"id":586,"title":582,"titles":587,"content":588,"level":21},"\u002Fresources\u002Fflags#expand-code-snippet-1",[556,577],"import { FLAG_METADATA } from \"@sit-onyx\u002Fflags\u002Futils\";\n\nconsole.log(FLAG_METADATA.DE);\n\u002F\u002F Output: { internationalName: \"Germany\", continent: \"Europe\" }",{"id":590,"title":591,"titles":592,"content":593,"level":15},"\u002Fresources\u002Fflags#available-flags","Available flags",[556],"You can hover over a flag to see its name. Click on it or press enter when selecting it via keyboard to copy the import statement for the selected flag. html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}",{"id":595,"title":596,"titles":597,"content":131,"level":9},"\u002Fresources\u002Fdemo-application","Demo application",[],{"id":599,"title":600,"titles":601,"content":131,"level":9},"\u002Fresources\u002Fplaygrounds\u002Fcode","Code playground",[],{"id":603,"title":604,"titles":605,"content":131,"level":9},"\u002Fresources\u002Fplaygrounds\u002Fgrid","Grid playground",[],{"id":607,"title":608,"titles":609,"content":131,"level":9},"\u002Fresources\u002Fvue-blueprint","Vue Blueprint",[],{"id":611,"title":612,"titles":613,"content":614,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fappearance","Appearance",[],"onyx supports a dark and a light theme as well as custom color themes. The options how to set up the theme for your application are described on this page. To learn more about the theming concept of onyx, take a look at our colors documentation warning Schwarz internal themes\nonyx includes build-in themes for brands of the Schwarz group that are only accessible for internal employees. If you are an Schwarz employee and want to access one the following themes, please refer to the Vue Blueprint documentation: Schwarz DigitsKauflandLidlPreZeroSchwarz group and Schwarz corporate solutionsTailwind If you have any other questions or need support, please get in touch with the team.",{"id":616,"title":163,"titles":617,"content":618,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fappearance#themes",[612],"To use a different theme, add the corresponding imports to your main.ts file (example a theme called \"my-theme\"): \u002F\u002F import \"sit-onyx\u002Fstyles.css\";\n\u002F\u002F make sure to import the theme AFTER the general \"sit-onyx\u002Fstyles.css\" file!\nimport \".\u002Fmy-theme.css\"; or if you are using Nuxt, then import them in your nuxt.config.ts: export default defineNuxtConfig({\n  css: [\"~\u002Fassets\u002Fcss\u002Fmy-theme.css\"],\n});",{"id":620,"title":621,"titles":622,"content":623,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fappearance#dark-mode","Dark mode",[612],"Per default, onyx will be displayed in light mode. In order to use the dark mode, simply set the class dark once on the root of your application, e.g. on \u003Chtml> or \u003Cbody>.",{"id":625,"title":626,"titles":627,"content":628,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fappearance#let-the-user-decide","Let the user decide",[612,621],"In order to let the user switch between light, dark and auto mode, we recommend to use the pre-built OnyxColorSchemeMenuItem component inside the nav bar together with the @vueuse\u002Fcore library. Additionally, to enable a smooth transition when switching between color modes, you can use the useThemeTransition composable. This ensures a visually appealing effect during theme changes.\nBelow is an example implementation: \u003Cscript setup lang=\"ts\">\nimport { useColorMode } from \"@vueuse\u002Fcore\";\nimport { OnyxNavBar, OnyxUserMenu, OnyxColorSchemeMenuItem } from \"sit-onyx\";\nimport { ref } from \"vue\";\n\nconst { store: colorScheme } = useColorMode({ disableTransition: false });\nuseThemeTransition(colorScheme);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003COnyxNavBar app-name=\"Example app\">\n    \u003Ctemplate #contextArea>\n      \u003COnyxUserMenu full-name=\"John Doe\">\n        \u003COnyxColorSchemeMenuItem v-model=\"colorScheme\" \u002F>\n      \u003C\u002FOnyxUserMenu>\n    \u003C\u002Ftemplate>\n  \u003C\u002FOnyxNavBar>\n\u003C\u002Ftemplate> Alternatively, you can use the OnyxColorSchemeDialog component to build your own custom component. html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":630,"title":631,"titles":632,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fchartjs","Chart.js plugin",[],{"id":634,"title":635,"titles":636,"content":637,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#sit-onyxchartjs-plugin","@sit-onyx\u002Fchartjs-plugin",[],". Please visit the Chart.js documentation for further information how to implement charts.",{"id":639,"title":412,"titles":640,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#changelog",[635],"A full changelog can be found here.",{"id":643,"title":644,"titles":645,"content":646,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#features","Features",[635],"The following features are included in this plugin: Set default colors\u002Fstyles for charts, labels, borders etc.Update chart when switched between light\u002Fdark modeDefault dataset colors based on the onyx color palette colorsUtility to set the dataset color to one of the onyx color palette colors",{"id":648,"title":6,"titles":649,"content":650,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#installation",[635],"Install the npm package with your corresponding package manager:",{"id":652,"title":233,"titles":653,"content":654,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#usage",[635],"import { Chart, registerables } from \"chart.js\";\nimport { registerOnyxPlugin } from \"@sit-onyx\u002Fchartjs-plugin\";\nimport \"sit-onyx\u002Fstyle.css\";\n\n\u002F\u002F register default Chart.js plugins\nChart.register(...registerables);\n\n\u002F\u002F register custom onyx plugin\nregisterOnyxPlugin(Chart);",{"id":656,"title":657,"titles":658,"content":659,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#example-charts","Example charts",[635],"The source code for the chart examples below can be found on GitHub. The following examples assume you have also installed vue-chartjs.",{"id":661,"title":662,"titles":663,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#bar","Bar",[635,657],{"id":665,"title":666,"titles":667,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#bubble","Bubble",[635,657],{"id":669,"title":670,"titles":671,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#doughnut","Doughnut",[635,657],{"id":673,"title":674,"titles":675,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#line","Line",[635,657],{"id":677,"title":678,"titles":679,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#pie","Pie",[635,657],{"id":681,"title":682,"titles":683,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#polar-area","Polar area",[635,657],{"id":685,"title":686,"titles":687,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#radar","Radar",[635,657],{"id":689,"title":690,"titles":691,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#scatter","Scatter",[635,657],{"id":693,"title":694,"titles":695,"content":696,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fchartjs#custom-dataset-colors","Custom dataset colors",[635],"By default, the dataset colors will be automatically set in order based on the onyx quantitative colors. If you want to set a specific color for a dataset, you can use the getDatasetColors utility. For example to use the primary color for a line chart: const chartData: ChartData\u003C\"line\"> = {\n  labels: [\"A\", \"B\", \"C\"],\n  datasets: [\n    {\n      label: \"Dataset A\",\n      data: [1, 2, 3],\n      ...getDatasetColors(\"primary\"),\n    },\n  ],\n}; html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":698,"title":699,"titles":700,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils","Figma utilities",[],{"id":702,"title":703,"titles":704,"content":705,"level":9},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#sit-onyxfigma-utils","@sit-onyx\u002Ffigma-utils",[],".",{"id":707,"title":412,"titles":708,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#changelog",[703],{"id":710,"title":711,"titles":712,"content":713,"level":15},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#use-as-cli-recommended","Use as CLI (recommended)",[703],"For a list of supported commands and options, run: npx @sit-onyx\u002Ffigma-utils --help",{"id":715,"title":716,"titles":717,"content":718,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#usage-in-ci","Usage in CI",[703,711],"If you are using the CLI in CI (e.g. via GitHub actions or Azure pipelines), we recommend that you specify the major version that you want to\nuse to prevent possible future breaking changes that might disrupt your pipeline. Example: npx @sit-onyx\u002Ffigma-utils@1 --help",{"id":720,"title":721,"titles":722,"content":723,"level":15},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#use-as-npm-package","Use as npm package",[703],"If you don't want to use the CLI, this package also provides utility functions for importing data from the Figma API.\nThis is useful if you want to further customize the CLI commands to have full control over the output. Install the npm package with your corresponding package manager:",{"id":725,"title":726,"titles":727,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#import-variables-as-css","Import variables as CSS",[703,721],{"id":729,"title":730,"titles":731,"content":732,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#cli-command","CLI command",[703,721],"Importing variables is also supported via CLI. For more information, run: npx @sit-onyx\u002Ffigma-utils import-variables --help Alternatively, you can implement it manually for full control and customization: import fs from \"node:fs\";\nimport path from \"node:path\";\nimport { fetchFigmaVariables, generateAsCSS, parseFigmaVariables } from \"@sit-onyx\u002Ffigma-utils\";\n\nconst FILE_KEY = \"your-figma-file-key\";\nconst FIGMA_TOKEN = \"your-figma-access-token\";\n\n\u002F\u002F fetch variables from Figma API\nconst data = await fetchFigmaVariables(FILE_KEY, FIGMA_TOKEN);\n\n\u002F\u002F parse variables into a readable and normalized format\n\u002F\u002F note: variables and collections that are set to \"Hide from publishing\" in Figma\n\u002F\u002F will not be parsed. If you face missing variables, please ask your UX designer\n\u002F\u002F to check the Figma settings\nconst parsedVariables = parseFigmaVariables(data);\n\n\u002F\u002F generate .css files for every Figma mode\nparsedVariables.forEach((mode) => {\n  \u002F\u002F get .css file content\n  const fileContent = generateAsCSS(mode);\n\n  \u002F\u002F write content as a file\n  const filename = mode.modeName ? `variables-${mode.modeName}.css` : \"variables.css\";\n  const fullPath = path.join(process.cwd(), filename);\n  fs.writeFileSync(fullPath, fileContent);\n});",{"id":734,"title":735,"titles":736,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#import-icons","Import icons",[703,721],{"id":738,"title":730,"titles":739,"content":740,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#cli-command-1",[703,721],"Importing icons is also supported via CLI. For more information, run: npx @sit-onyx\u002Ffigma-utils import-icons --help Alternatively, you can implement it manually for full control and customization: import fs from \"node:fs\";\nimport path from \"node:path\";\nimport {\n  fetchFigmaComponents,\n  optimizeSvg,\n  parseComponentsToIcons,\n  fetchFigmaSVGs,\n  writeIconMetadata,\n} from \"@sit-onyx\u002Ffigma-utils\";\n\nconst FILE_KEY = \"your-figma-file-key\";\nconst FIGMA_TOKEN = \"your-figma-access-token\";\nconst ICON_PAGE_ID = \"your-page-id-that-contains-the-icons\"; \u002F\u002F e.g. \"1:345\"\n\n\u002F\u002F fetch icon components from Figma API\nconst data = await fetchFigmaComponents(FILE_KEY, FIGMA_TOKEN);\n\n\u002F\u002F parse components into a normalized format\nconst parsedIcons = parseComponentsToIcons({\n  components: data.meta.components,\n  pageId: ICON_PAGE_ID,\n});\n\n\u002F\u002F fetch actual SVG content of the icons\nconst svgContents = await fetchFigmaSVGs(\n  FILE_KEY,\n  parsedIcons.map(({ id }) => id),\n  FIGMA_TOKEN,\n);\n\nconst outputDirectory = process.cwd();\n\n\u002F\u002F write .svg files for all icons\nawait Promise.all(\n  parsedIcons.map((icon) => {\n    const content = optimizeSvg(svgContents[icon.id]);\n    const fullPath = path.join(outputDirectory, `${icon.name}.svg`);\n    return writeFile(fullPath, content, \"utf-8\");\n  }),\n);\n\n\u002F\u002F optionally write file with metadata (categories, alias names etc.)\nawait writeIconMetadata(path.join(outputDirectory, \"metadata.json\"), parsedIcons);",{"id":742,"title":743,"titles":744,"content":131,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#import-flags","Import flags",[703,721],{"id":746,"title":730,"titles":747,"content":748,"level":21},"\u002Fresources\u002Fnpm-packages\u002Ffigma-utils#cli-command-2",[703,721],"Importing flags is also supported via CLI. For more information, run: npx @sit-onyx\u002Ffigma-utils import-flags --help Alternatively, you can implement it manually for full control and customization: import fs from \"node:fs\";\nimport path from \"node:path\";\nimport {\n  fetchFigmaComponents,\n  optimizeSvg,\n  parseComponentsToFlags,\n  fetchFigmaSVGs,\n  writeFlagMetadata,\n} from \"@sit-onyx\u002Ffigma-utils\";\n\nconst FILE_KEY = \"your-figma-file-key\";\nconst FIGMA_TOKEN = \"your-figma-access-token\";\nconst FLAG_PAGE_ID = \"your-page-id-that-contains-the-flags\"; \u002F\u002F e.g. \"1:345\"\n\n\u002F\u002F fetch flag components from Figma API\nconst data = await fetchFigmaComponents(FILE_KEY, FIGMA_TOKEN);\n\n\u002F\u002F parse components into a normalized format\nconst parsedFlags = parseComponentsToFlags({\n  components: data.meta.components,\n  pageId: FLAG_PAGE_ID,\n});\n\n\u002F\u002F fetch actual SVG content of the flags\nconst svgContents = await fetchFigmaSVGs(\n  FILE_KEY,\n  parsedFlags.map(({ id }) => id),\n  FIGMA_TOKEN,\n);\n\nconst outputDirectory = process.cwd();\n\n\u002F\u002F write .svg files for all flags\nawait Promise.all(\n  parsedFlags.map((flag) => {\n    const content = optimizeSvg(svgContents[icon.id], \"image\");\n    const fullPath = path.join(outputDirectory, `${flag.code}.svg`);\n    return writeFile(fullPath, content, \"utf-8\");\n  }),\n);\n\n\u002F\u002F optionally write file with metadata (country name, continent etc.)\nawait writeFlagMetadata(path.join(outputDirectory, \"metadata.json\"), parsedFlags); html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"id":750,"title":751,"titles":752,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics","GitHub metrics",[],{"id":754,"title":755,"titles":756,"content":705,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#sit-onyxgithub-metrics","@sit-onyx\u002Fgithub-metrics",[],{"id":758,"title":412,"titles":759,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#changelog",[755],{"id":761,"title":6,"titles":762,"content":650,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#installation",[755],{"id":764,"title":765,"titles":766,"content":767,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#create-a-client","Create a client",[755],"Since your GitHub project might be set up differently than the ones of other users, this package is designed to be flexible so it is able to work for any project setup. Before you can start calculation metrics for your project, you need to create and configure a client so it understands the setup of your GitHub project.\nBelow is an example configuration, adjust it to fit your specific project. import { createClient } from \"@sit-onyx\u002Fgithub-metrics\";\n\nconst client = createClient({\n  organization: \"SchwarzIT\",\n  projectId: 5,\n  \u002F\u002F see below for how to get a GitHub token\n  authToken: \"your-github-token\",\n  fields: {\n    effort: \"Effort (d)\",\n    iteration: \"Sprint\",\n    status: {\n      fieldName: \"Status\",\n      options: {\n        finished: \"Done\",\n      },\n    },\n  },\n});",{"id":769,"title":770,"titles":771,"content":772,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#github-token","GitHub token",[755,765],"The GitHub GraphQL API for accessing projects requires authentication using an personal access token. To get a new token, go to https:\u002F\u002Fgithub.com\u002Fsettings\u002Ftokens and create a new personal access token.\nIn the permissions section, select \"read:project\" Copy the generated token and pass it to the client via the authToken option when calling createClient() (see above). It is recommended to e.g. use an environment variable for this.",{"id":774,"title":775,"titles":776,"content":777,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#metrics","Metrics",[755],"Below you can find a list of available metrics that you can easily collect using this package. If you haven't already, create a client first.",{"id":779,"title":780,"titles":781,"content":782,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#mean-story-size","Mean story size",[755,775],"Calculates the mean \u002F average story size of an item in the given iteration. import { getMeanStorySize } from \"@sit-onyx\u002Fgithub-metrics\";\n\nconst data = await getMeanStorySize({\n  client,\n  \u002F\u002F by default, the current iteration (today) will be used.\n  \u002F\u002F to get data for another iteration, simply pass any date that is in your desired iteration\n  \u002F\u002F iteration: new Date(2025, 9, 23),\n});",{"id":784,"title":785,"titles":786,"content":787,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#bug-fixing-ratio","Bug fixing ratio",[755,775],"Calculates the bug fixing ratio in the given iteration (how much time is spend on bugs in relation to other stories). import { getBugFixingRatio } from \"@sit-onyx\u002Fgithub-metrics\";\n\nconst data = await getBugFixingRatio({\n  client,\n  \u002F\u002F by default, the current iteration (today) will be used.\n  \u002F\u002F to get data for another iteration, simply pass any date that is in your desired iteration\n  \u002F\u002F iteration: new Date(2025, 9, 23),\n});",{"id":789,"title":790,"titles":791,"content":792,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fgithub-metrics#throughput","Throughput",[755,775],"Calculates the throughput in the given iteration (amount of items with status \"finished\"). import { getThroughput } from \"@sit-onyx\u002Fgithub-metrics\";\n\nconst data = await getThroughput({\n  client,\n  \u002F\u002F by default, the current iteration (today) will be used.\n  \u002F\u002F to get data for another iteration, simply pass any date that is in your desired iteration\n  \u002F\u002F iteration: new Date(2025, 9, 23),\n}); html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":794,"title":795,"titles":796,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fheadless","Headless",[],{"id":798,"title":799,"titles":800,"content":801,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fheadless#sit-onyxheadless","@sit-onyx\u002Fheadless",[],". Inspired by Melt UI.",{"id":803,"title":412,"titles":804,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fheadless#changelog",[799],{"id":806,"title":6,"titles":807,"content":650,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fheadless#installation",[799],{"id":809,"title":810,"titles":811,"content":131,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fheadless#composables","Composables",[799],{"id":813,"title":814,"titles":815,"content":816,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fheadless#usecombobox","useComboBox",[799,810],"\u003Cscript lang=\"ts\" setup>\nimport { createCombobox } from \"@sit-onyx\u002Fheadless\";\n\nconst {\n  elements: {\n    ...\n  }\n } = createCombobox();\n\u003C\u002Fscript> html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":818,"title":819,"titles":820,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages","Npm packages",[],{"id":822,"title":55,"titles":823,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fnuxt",[],{"id":825,"title":826,"titles":827,"content":705,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#sit-onyxnuxt","@sit-onyx\u002Fnuxt",[],{"id":829,"title":412,"titles":830,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#changelog",[826],{"id":832,"title":644,"titles":833,"content":834,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#features",[826],"Auto import of all onyx componentsAutomatic setup of global stylesAutomatic integration with @nuxtjs\u002Fi18nAutomatic integration with Nuxt routingsupports Nuxt 4",{"id":836,"title":837,"titles":838,"content":839,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#quick-setup","Quick Setup",[826],"Install the module in your Nuxt application with one command: npx nuxi module add @sit-onyx\u002Fnuxt If you are also using the @nuxtjs\u002Fi18n module, make sure to move @sit-onyx\u002Fnuxt before @nuxtjs\u002Fi18n. Afterwards you're able to just use all onyx components inside your app and the global styles will automatically be set up for you.",{"id":841,"title":842,"titles":843,"content":844,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#integration-with-nuxtjsi18n","Integration with @nuxtjs\u002Fi18n",[826],"onyx features built in translations and the Nuxt module extends on that by offering an out of the box integration with @nuxtjs\u002Fi18n.\nIf your Nuxt project uses both modules, onyx will automatically detect it and use @nuxtjs\u002Fi18n to handle all the translations. This gives you all the bells and whistles of vue-i18n like lazy loading of translations. Also, the onyx locales will automatically be registered depending on which locales you are using \u002F defining in your project. warning\nYou must register the @sit-onyx\u002Fnuxt before @nuxtjs\u002Fi18n. Otherwise the translations for onyx won't be picked up by @nuxtjs\u002Fi18n.",{"id":846,"title":117,"titles":847,"content":848,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#setup",[826,842],"In order for the onyx module to detect which locales to register, you must define your locales either by defining the code as IETF's BCP47 name (e.g. en-US, de-DE etc.) or by providing the language property. So any of the following configs will work correctly: export default defineNuxtConfig({\n  modules: [\"@sit-onyx\u002Fnuxt\", \"@nuxtjs\u002Fi18n\"],\n  i18n: {\n    defaultLocale: \"en-US\",\n    locales: [\n      { code: \"en-US\", file: \"en-US.json\", name: \"English\" },\n      \u002F\u002F in the \"de\" example, the langauge property is necessary because the \"de\" code is not a valid IETF's BCP47 code\n      \u002F\u002F alternatively, you could remove the language property and change to code to \"de-DE\"\n      { code: \"de\", language: \"de-DE\", file: \"de-DE.json\", name: \"Deutsch\" },\n    ],\n  },\n});",{"id":850,"title":851,"titles":852,"content":853,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#customizing-onyx-translations","Customizing onyx translations",[826,842],"It might happen that a certain translation provided by onyx doesn't fit your project. As project specific translations will always overwrite the defaults from onyx, you can easily provide your own. Just define the key of the onyx translation inside your own messages scoped to the key \"onyx\". E.g. this example will remove the default brackets around the translation for \"optional\": {\n  \"foo\": \"bar\",\n  \"onyx\": {\n    \"optional\": \"optional\"\n  }\n} For all available translations \u002F keys please see: i18n",{"id":855,"title":856,"titles":857,"content":858,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt#extending-onyx-translations","Extending onyx translations",[826,842],"Maybe your project requires a language not supported by onyx. In this case you may provide translations for the keys within the \"onyx\" scope of your messages. In case you'd like to use the messages of an existing onyx language, you can import it into your messages and overwrite them as you wish: import enUS from \"sit-onyx\u002Flocales\u002Fen-US.json\";\n\nexport default {\n  foo: \"bar\",\n  onyx: { ...enUS, optional: \"Custom optional\" },\n}; For more examples on how to customize your projects languages with support for onyx, feel free to take a look at one of our tests: @sit-onyx\u002Fnuxt i18n test fixture Onyx is open source, so if you're missing translations for a language feel free to contribute them so other projects can benefit from it as well. html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":860,"title":861,"titles":862,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs","Nuxt Docs",[],{"id":864,"title":865,"titles":866,"content":867,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#sit-onyxnuxt-docs","@sit-onyx\u002Fnuxt-docs",[],"Nuxt layer\u002Ftemplate for creating documentations with the onyx design system. You can easily write markdown files and they will be rendered with pre-defined layouts and onyx components. Fully flexible and customizable. . warning Work in progress\nThis package is work in progress. More features will be added in the future.",{"id":869,"title":412,"titles":870,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#changelog",[865],{"id":872,"title":644,"titles":873,"content":874,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#features",[865],"The package includes the following features: pre-defined page layouts (default, sidebar etc.)pre-configured Nuxt content module to render markdown pages with onyx components.custom user friendly error page for 404, unexpected errors etc.supports Nuxt 4integration with Nuxt i18nauto generated global search for searching any markdown content",{"id":876,"title":6,"titles":877,"content":131,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#installation",[865],{"id":879,"title":880,"titles":881,"content":882,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-1-create-a-basic-nuxt-project","Step 1: Create a basic Nuxt project",[865,6],"To get started, you need a basic Nuxt project. You can check out the Nuxt documentation for this. warning app.vue\nImportant!\nIf your Nuxt project has a app\u002Fapp.vue file, delete it. Otherwise the whole documentation template will be overridden and not work correctly.",{"id":884,"title":885,"titles":886,"content":887,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-2-configure-pnpm","Step 2: Configure pnpm",[865,6],"If you are using pnpm, make sure to create the following pnpm-workspace-yaml and .npmrc file. Otherwise the Nuxt layer will not work correctly.\nWhen using another package manager, you can skip this step. # needed to correctly install the Nuxt content and Nuxt image module\nonlyBuiltDependencies:\n  - better-sqlite3 # \"shamefully-hoist\" is the default config from Nuxt for layers\n# It is currently needed to correctly install the peerDependencies from Nuxt layers\nshamefully-hoist=true",{"id":889,"title":890,"titles":891,"content":892,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-3-install-the-onyx-documentation-template","Step 3: Install the onyx documentation template",[865,6],"Install the onyx documentation layer by running",{"id":894,"title":895,"titles":896,"content":897,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-4-enable-the-nuxt-layer","Step 4: Enable the Nuxt layer",[865,6],"Now, just extend your application with the onyx layer. You can check the Nuxt documentation for further information. export default defineNuxtConfig({\n  extends: [\"@sit-onyx\u002Fnuxt-docs\"],\n}); Done! You can now start to write markdown files and see the renderer output in your application.",{"id":899,"title":900,"titles":901,"content":902,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-5-create-your-first-page","Step 5: Create your first page",[865,6],"Finally create your first content page by creating a content\u002Fen\u002Findex.md file which will be the home\u002Flanding page of your documentation.\nFor more information about writing markdown\u002Fcontent, see the Write markdown section. # Hello World\n\nThis is an example page using the [onyx documentation template](https:\u002F\u002Fonyx.schwarz\u002Fdevelopment\u002Fpackages\u002Fnuxt-docs.html) for Nuxt. info\nBy default, the content\u002Fen folder is used to provide the content so all files must be placed inside this folder. If you want to add other languages or change the default language, refer to thr i18n section.",{"id":904,"title":296,"titles":905,"content":906,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#customization",[865],"Due to the nature of Nuxt layers, almost every part of the default config and components can be overridden or customized if needed. tip Layer exports\nAll components, pages, composables etc. from the @sit-onyx\u002Fnuxt-docs layer can be imported from #layers\u002Fonyx\u002F*. This is especially useful when customizing existing components (see example below). To override or customize a component provided by @sit-onyx\u002Fnuxt-docs, you first need to create new component in your project with the same name as the one that you want to customize. In this example, we will add nav items to the default nav bar. By default, Nuxt will prioritize project-specific components over the ones provided by Nuxt layers (thats what @sit-onyx\u002Fnuxt-docs is) so in this example, the default nav bar would be replaced completely. While this can be useful for certain use cases, in this example we only want to extend \u002F customize the default nav bar instead of replacing it completely so we can still benefit from the default nav bar features. Therefore, we will import the default nav bar from #layers\u002Fonyx and use its supported slots to add nav items. You could also e.g. change props at this point. \u003Cscript lang=\"ts\" setup>\nimport NavBar from \"#layers\u002Fonyx\u002Fapp\u002Fcomponents\u002FNavBar.vue\";\n\n\u002F\u002F localePath from Nuxt i18n is used here to ensure correct links depending on the current locale and i18n routing strategy\n\u002F\u002F e.g. for a \"de\" locale, the paths might be prefixed with \"\u002Fde\"\nconst localePath = useLocalePath();\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CNavBar>\n    \u003COnyxNavItem label=\"Home\" :link=\"localePath('\u002F')\" \u002F>\n    \u003COnyxNavItem label=\"Foo\" :link=\"localePath('\u002Ffoo')\" \u002F>\n    \u003COnyxNavItem label=\"Does not exist\" :link=\"localePath('\u002Fdoes-not-exist')\" \u002F>\n  \u003C\u002FNavBar>\n\u003C\u002Ftemplate> Thats it! The application will now show the nav items that we just passed while keeping all the default features from the nav bar like language and dark\u002Flight mode switch.",{"id":908,"title":909,"titles":910,"content":911,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#write-markdown","Write markdown",[865],"This documentation layer uses the official Nuxt content module. So to create pages\u002Fcontent with markdown, simply create a file inside the content folder of your application. # Hello World\n\nThis is an example page using the [onyx documentation template](https:\u002F\u002Fonyx.schwarz\u002Fdevelopment\u002Fpackages\u002Fnuxt-docs.html) for Nuxt. Nuxt content will automatically create a route for every markdown file. In this example, the page will be available on \u002Fhello-world.",{"id":913,"title":914,"titles":915,"content":916,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#i18n","I18n",[865],"The Nuxt documentation template is integrated with Nuxt i18n so you can easily provide content in multiple languages. When using multiple languages, the nav bar will automatically show a language switch where the user can switch the current language. By default, en is used as default locale so you need to place all markdown files inside the content\u002Fen folder so they are picked up correctly.\nIf you only plan to use English, you don't need to do anything and are good to go. For further information about the Nuxt i18n integration with the Nuxt content module, read the official Nuxt content documentation.",{"id":918,"title":919,"titles":920,"content":921,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#add-language","Add language",[865,914],"To add other languages, follow the steps below.",{"id":923,"title":924,"titles":925,"content":926,"level":52},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-1-add-locale-to-nuxt-config","Step 1: Add locale to Nuxt config",[865,914,919],"First, register all your desired locales in the nuxt.config.ts file so the Nuxt i18n module is aware of them. export default defineNuxtConfig({\n  i18n: {\n    locales: [\n      \u002F\u002F make sure to also add the language property\n      { code: \"en\", language: \"en-US\", name: \"English\" },\n      { code: \"de\", language: \"de-DE\", name: \"Deutsch\" },\n    ],\n  },\n});",{"id":928,"title":929,"titles":930,"content":931,"level":52},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-2-configure-nuxt-content-module","Step 2: Configure Nuxt content module",[865,914,919],"Now you need to configure the Nuxt content module so it knows where to find the files \u002F content for your languages. import { defineCollection, defineContentConfig } from \"@nuxt\u002Fcontent\";\n\nexport default defineContentConfig({\n  collections: {\n    \u002F\u002F content_en is registered by default in @sit-onyx\u002Fnuxt-docs so there is no need to register it manually here\n    \u002F\u002F define a new collection for every additional language here\n    content_de: defineCollection({\n      type: \"page\",\n      source: { include: \"de\u002F**\", prefix: \"\u002F\" },\n    }),\n  },\n}); You can now place content in the content\u002Fde folder to serve German content.",{"id":933,"title":934,"titles":935,"content":936,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#change-default-locale","Change default locale",[865,914],"If you want to change the default locale to something other than English (e.g. if you don't want to offer English content), follow the steps below.",{"id":938,"title":939,"titles":940,"content":941,"level":52},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-1-add-default-locale","Step 1: Add default locale",[865,914,934],"Follow the same steps as described in the Add language section to register your new language.",{"id":943,"title":944,"titles":945,"content":946,"level":52},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#step-2-change-default-locale","Step 2: Change default locale",[865,914,934],"To change the default locale used by Nuxt i18n, just update the nuxt.config.ts accordingly (see Nuxt i18n docs for further information). export default defineNuxtConfig({\n  i18n: {\n    defaultLocale: \"de\",\n  },\n});",{"id":948,"title":368,"titles":949,"content":950,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#layouts",[865],"This documentation layer supports several pre-build layouts that are used by default. You can change the layout per page or add your own layouts if the existing ones do not fit your needs.",{"id":952,"title":953,"titles":954,"content":955,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#default-layout","Default layout",[865,368],"Plain \u002F blank OnyxPageLayout. Can be used to build fully custom pages.",{"id":957,"title":958,"titles":959,"content":960,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#sidebar-layout","Sidebar layout",[865,368],"Used as default for rendering markdown \u002F content pages. Will automatically generate a sidebar with (nested) nav items, depending on your content structure. The sidebar layout can be customized on folder-level by creating a .navigation.yml inside the corresponding folder. This allows to e.g. set the initial accordion collapsed state or define multiple roots so you can have multiple sections in your application where each section have their own sidebar hierarchy. title: About\nsidebar:\n  # initially collapse the accordion \u002F child items\u002Fpages\n  # collapsed: true\n\n  # define this folder as standalone root so when any child page is opened, the sidebar navigation will start from this folder\n  # and hide any parent navigation\n  # root: true",{"id":962,"title":963,"titles":964,"content":965,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#components","Components",[865],"There are also several components included in the documentation layer that you can optionally use to easily build e.g. team pages.",{"id":967,"title":968,"titles":969,"content":970,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fnuxt-docs#npminstallcodetabs","NpmInstallCodeTabs",[865,963],"The NpmInstallCodeTabs can be used to display a command for installing one or multiple npm packages with common package managers (pnpm, npm, yarn or bun). :NpmInstallCodeTabs{packages=\"sit-onyx @sit-onyx\u002Ficons\"}\n\n:NpmInstallCodeTabs{packages=\"typescript\" dev} html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sq-ep, html code.shiki .sq-ep{--shiki-default:#005CC5;--shiki-default-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold}html pre.shiki code .svl0z, html code.shiki .svl0z{--shiki-default:#032F62;--shiki-default-text-decoration:underline;--shiki-dark:#DBEDFF;--shiki-dark-text-decoration:underline}html pre.shiki code .s2frl, html code.shiki .s2frl{--shiki-default:#24292E;--shiki-default-text-decoration:underline;--shiki-dark:#E1E4E8;--shiki-dark-text-decoration:underline}",{"id":972,"title":973,"titles":974,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fplaywright","Playwright",[],{"id":976,"title":977,"titles":978,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fstorybook","Storybook",[],{"id":980,"title":981,"titles":982,"content":705,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#sit-onyxstorybook-utils","@sit-onyx\u002Fstorybook-utils",[],{"id":984,"title":412,"titles":985,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#changelog",[981],{"id":987,"title":6,"titles":988,"content":650,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#installation",[981],{"id":990,"title":991,"titles":992,"content":131,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#utilities","Utilities",[981],{"id":994,"title":995,"titles":996,"content":997,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#createpreview","createPreview",[981,991],"Creates a default Storybook preview configuration for a project that uses onyx. Includes the following features: Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)Setup for dark mode (including docs page). Requires addon @vueless\u002Fstorybook-dark-mode (maintenance form of previous storybook-dark-mode) to be enabled in .storybook\u002Fmain.ts fileCustom Storybook theme using onyx colors (light and dark mode)Configure viewports \u002F breakpoints as defined by onyxLogs Vue emits as Storybook actionsSource code transformer that formats the code snippets with prettier and adds imports for used icons, flags and onyx components import { createPreview } from \"@sit-onyx\u002Fstorybook-utils\";\nimport \"@sit-onyx\u002Fstorybook-utils\u002Fstyle.css\";\n\nconst preview = {\n  \u002F\u002F we need to destructure here because as of Storybook 7.6\n  \u002F\u002F it can not statically analyze that the `preview` variable is an object\n  ...createPreview({\n    \u002F\u002F optional overrides...\n  }),\n};\n\nexport default preview; import type { StorybookConfig } from \"@storybook\u002Fvue3-vite\";\n\nconst config: StorybookConfig = {\n  addons: [\"@vueless\u002Fstorybook-dark-mode\"],\n  \u002F\u002F ...\n};\n\nexport default config;",{"id":999,"title":1000,"titles":1001,"content":1002,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#withvmodeldecorator","withVModelDecorator",[981,991],"Defines a custom decorator that will implement event handlers for all v-models.\nSo the Storybook controls are updated live when the user interacts with the component. import { withVModelDecorator } from \"@sit-onyx\u002Fstorybook-utils\";\n\nexport default {\n  decorators: [withVModelDecorator()],\n};",{"id":1004,"title":1005,"titles":1006,"content":1007,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#createtheme","createTheme",[981,991],"Creates a custom theme for Storybook that uses onyx colors.\nSee the Storybook Theming docs for further information. tip\nIf you are using createPreview(), the custom light and dark theme will already be set up for you. import { createTheme } from \"@sit-onyx\u002Fstorybook-utils\";\nimport { addons } from \"storybook\u002Fmanager-api\";\n\naddons.setConfig({\n  theme: createTheme({\n    base: \"light\", \u002F\u002F choose whether you want a light or dark theme\n  }),\n}); import { createTheme } from \"@sit-onyx\u002Fstorybook-utils\";\nimport type { Preview } from \"@storybook\u002Fvue3-vite\";\n\nconst preview: Preview = {\n  parameters: {\n    docs: {\n      theme: createTheme({\n        base: \"light\", \u002F\u002F choose whether you want a light or dark theme\n      }),\n    },\n  },\n};\n\nexport default preview;",{"id":1009,"title":1010,"titles":1011,"content":1012,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#withnativeeventlogging","withNativeEventLogging",[981,991],"Allows logging and documentation for the passed native event listeners in Storybook.\nThese will be documented in a extra \"Relevant HTML events\" section in the Storybook documentation. import { withNativeEventLogging } from \"@sit-onyx\u002Fstorybook-utils\";\n\nconst meta: Meta\u003Ctypeof OnyxButton> = {\n  title: \"Buttons\u002FButton\",\n  component: OnyxButton,\n  argTypes: {\n    somethingElse: { ...someOtherArgType },\n    ...withNativeEventLogging([\"onClick\"]),\n  },\n};",{"id":1014,"title":1015,"titles":1016,"content":1017,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fstorybook#createactionloggerwrapper","createActionLoggerWrapper",[981,991],"Wraps the original component and adds Storybook action logging.\nThis is useful for slotted child components that emit relevant events. Returns a wrapped component, which can be used in place of the original component. import { createActionLoggerWrapper } from \"@sit-onyx\u002Fstorybook-utils\";\nimport _ChildComponent from \".\u002F_ChildComponent.vue\";\n\n\u002F\u002F Usual story setup...\n\n\u002F**\n * Wrapped child component\n *\u002F\nconst ChildComponent = createActionLoggerWrapper(_ChildComponent, [\"onChildEmit\"]);\n\n\u002F**\n * Use in a story like you usually would:\n *\u002F\nexport const Default = {\n  args: {\n    propName: 'Value'\n    someSlot: () => h(ChildComponent, { label: \"Item 1\" }),\n  },\n} satisfies Story; html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":1019,"title":1020,"titles":1021,"content":131,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fvitepress","VitePress",[],{"id":1023,"title":1024,"titles":1025,"content":1026,"level":9},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#sit-onyxvitepress-theme","@sit-onyx\u002Fvitepress-theme",[],"Custom VitePress theme that uses the onyx brand colors (which are currently the same as the Schwarz Digits brand colors). info\nThe theme doesn't currently use the entire onyx framework but will be updated in the future. The very documentation you are reading here is also using this exact custom Vitepress theme. It extends the default VitePress theme so you can use the same config that you are already familiar with (which includes search, sidebar etc.).",{"id":1028,"title":412,"titles":1029,"content":641,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#changelog",[1024],{"id":1031,"title":644,"titles":1032,"content":1033,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#features",[1024],"The theme includes the following features: light and dark theme that matches the onyx designcolored gradient logo background on the home pageFont families matching the onyx typography system",{"id":1035,"title":6,"titles":1036,"content":131,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#installation",[1024],{"id":1038,"title":233,"titles":1039,"content":1040,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#usage",[1024],"You can check the VitePress documentation for further information. import OnyxTheme from \"@sit-onyx\u002Fvitepress-theme\";\n\n\u002F\u002F if you use\u002Foverride custom styles, they must be imported after the theme, e.g.\n\u002F\u002F import \".\u002Fstyles.css\";\n\nexport default OnyxTheme;",{"id":1042,"title":991,"titles":1043,"content":1044,"level":15},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#utilities",[1024],"This package also includes some VitePress utilities that you can use on-demand.",{"id":1046,"title":1047,"titles":1048,"content":1049,"level":21},"\u002Fresources\u002Fnpm-packages\u002Fvitepress#breakpoint-scss-mixin","Breakpoint SCSS mixin",[1024,991],"Applies CSS only to the given VitePress breakpoint. details Available VitePress breakpoints Breakpoint nameValuexs375pxs640pxm768pxl960pxxl1280pxxxl1440px @use \"@sit-onyx\u002Fvitepress-theme\u002Fmixins.scss\";\n\n.some-class {\n  @include mixins.breakpoint(max, m) {\n    \u002F\u002F your styles for m breakpoint and smaller\n  }\n\n  @include mixins.breakpoint(min, m) {\n    \u002F\u002F your styles for m breakpoint and larger\n  }\n\n  \u002F\u002F the breakpoint is inclusive so if you e.g. want to use\n  \u002F\u002F min and max for the same breakpoint you should\n  \u002F\u002F define an offset for either min or max\n  @include mixins.breakpoint(max, xl) {\n    \u002F\u002F your styles for smaller and equal xl breakpoint\n  }\n\n  @include mixins.breakpoint(min, xl, 1) {\n    \u002F\u002F your styles for greater than xl breakpoint (exclusive)\n  }\n} html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"id":1051,"title":1052,"titles":1053,"content":131,"level":9},"\u002Fresources","Resources",[],{"id":1055,"title":1056,"titles":1057,"content":1058,"level":9},"\u002Fsupport\u002Fteam","Team",[],"Komplett optimieren und schön machen!!",{"id":1060,"title":1061,"titles":1062,"content":1063,"level":15},"\u002Fsupport\u002Fteam#meet-the-team","Meet the team 👋",[1056],"onyx is maintained by a dedicated team at Schwarz IT. Below you will find the core members of our team.\n\nAre you looking for a bug report or feature request?\n\nThen please use our GitHub issues.\nFor general Q&A, announcements and polls feel free to visit our community space via GitHub discussions.",{"id":1065,"title":1066,"titles":1067,"content":131,"level":15},"\u002Fsupport\u002Fteam#thank-you-to-all-contributors","Thank you to all contributors 🙏",[1056],{"id":1069,"title":1070,"titles":1071,"content":131,"level":15},"\u002Fsupport\u002Fteam#our-hardworking-bots","Our hardworking bots 🤖",[1056],{"id":1073,"title":1074,"titles":1075,"content":1076,"level":9},"\u002Fsupport\u002Fphilosophy","Philosophy",[],"We practice a well-structured and principle-based way of working",{"id":1078,"title":1079,"titles":1080,"content":1081,"level":15},"\u002Fsupport\u002Fphilosophy#agility","Agility",[1074],"We adapt quickly to changes and divide our tasks into smaller parts in order to work on them in short sprints. This allows us to maintain an overview and adapt our plans accordingly - depending on the current situation.",{"id":1083,"title":1084,"titles":1085,"content":1086,"level":15},"\u002Fsupport\u002Fphilosophy#the-community","The community",[1074],"We value our community and love to get in touch with you all. That's why we use GitHub as a platform that allows us to exchange ideas with you and gather feedback. Your input shapes our work and improves the product.",{"id":1088,"title":1089,"titles":1090,"content":1091,"level":15},"\u002Fsupport\u002Fphilosophy#flexibility","Flexibility",[1074],"We design and create our components according to the latest web standards. This means they can be used in all kinds of projects and are super versatile.",{"id":1093,"title":1094,"titles":1095,"content":1096,"level":15},"\u002Fsupport\u002Fphilosophy#quality","Quality",[1074],"From planning to the final stages of implementation, we put our knowledge and skills into our design system at the highest level. We want it to work smoothly for all our end users alike.",{"id":1098,"title":1099,"titles":1100,"content":1101,"level":15},"\u002Fsupport\u002Fphilosophy#collaboration","Collaboration",[1074],"The skills and expertise of everyone are involved in our decisions by working closely together. We take everyone's skills and input into account and rely on each other.",{"id":1103,"title":1104,"titles":1105,"content":1106,"level":9},"\u002Fsupport\u002Fphilosophy#definition-of-ready-dor","Definition of Ready (DoR)",[],"The described definitions on this page show the focus on guidelines for working with tickets in the onyx team. A component ticket must fulfil the following aspects to be considered ready: DescriptionUX\u002FUIDEVPOThe design is linked🧑‍🎨-🧑‍💼The acceptance criteria are defined ****r => AC has specific steps\u002Finteractions defined--🧑‍💼Dependencies are defined and completed--🧑‍💼Implementation details are noted-🧑‍💻-Comparable implementations are linked-🧑‍💻-Matching ARIA patterns are linked, if applicable🧑‍🎨🧑‍💻🧑‍💼No open questions and ToDos🧑‍🎨🧑‍💻🧑‍💼Ticket was estimated🧑‍🎨🧑‍💻🧑‍💼",{"id":1108,"title":1109,"titles":1110,"content":1111,"level":9},"\u002Fsupport\u002Fphilosophy#definition-of-done-dod","Definition of Done (DoD)",[],"The described definitions on this page show the focus on guidelines for working with tickets in the onyx team. A component ticket must fulfil the following aspects to be considered done: DescriptionUX\u002FUIDEVPOThe acceptance criteria are fulfilled🧑‍🎨🧑‍💻-The features are covered by component tests ****r => Screenshot tests are updated-🧑‍💻-Known open points are either fixed or a ticket was created-🧑‍💻🧑‍💼The onyx version was updated and the documentation is deployed ****r => Docs approved by DEV-🧑‍💻-StoryBook can show the feature ****r => approved by UX\u002FUI🧑‍🎨🧑‍💻-Our guidelines were followed🧑‍🎨🧑‍💻-",{"id":1113,"title":1114,"titles":1115,"content":1116,"level":9},"\u002Fsupport\u002Fphilosophy#ticket-naming-convention","Ticket naming convention",[],"We use a naming convention to make it easier to understand the scope \u002F responsible party on our tickets.",{"id":1118,"title":1119,"titles":1120,"content":1121,"level":15},"\u002Fsupport\u002Fphilosophy#ux-tickets","UX Tickets",[1114],"\"Concept...\" for UX\"Adjust...\" or \"Redesign…\" for UX bugs\"Research...\" for UX Research",{"id":1123,"title":1124,"titles":1125,"content":1126,"level":15},"\u002Fsupport\u002Fphilosophy#dev-tickets","Dev Tickets",[1114],"\"Implement...\" for Devs\"Fix...\" for Dev bugs\"Define...\" for Dev POCs",{"id":1128,"title":1129,"titles":1130,"content":1131,"level":15},"\u002Fsupport\u002Fphilosophy#generic-tickets","Generic Tickets",[1114],"\"Onboard...\" for UX\u002FDev Sharing info \u002F POC",{"id":1133,"title":1134,"titles":1135,"content":1136,"level":9},"\u002Fsupport\u002Fphilosophy#component-quality-stages","Component quality stages",[],"This page describes which perspective must be taken into consideration when creating components in onyx.",{"id":1138,"title":1139,"titles":1140,"content":1141,"level":15},"\u002Fsupport\u002Fphilosophy#essentials-concept-handover","Essentials: Concept handover",[1134],"DescriptionUX\u002FUIDEVDefined responsive behavior for all breakpoints🧑‍🎨-Defined architectural structure of component🧑‍🎨-Neutral color theme is used🧑‍🎨-Defined density behavior: compact, default, cozy🧑‍🎨-Defined slots and functions🧑‍🎨🧑‍💻Defined states: hover \u002F disabled \u002F active \u002F...🧑‍🎨🧑‍💻Component design fits our principles🧑‍🎨🧑‍💻Design variables are used🧑‍🎨🧑‍💻Considers darkmode \u002F lightmode-🧑‍💻Defined basic layout in figma design-🧑‍💻Market research \u002F internal experience exchange was performed-🧑‍💻Component API fits our technical guidelines-🧑‍💻",{"id":1143,"title":1144,"titles":1145,"content":1146,"level":15},"\u002Fsupport\u002Fphilosophy#essentials-mvp-component-release","Essentials: MVP component release",[1134],"DescriptionUX\u002FUIDEVDefined keyboard interactivity🧑‍🎨-Other light + dark color themes are applied🧑‍🎨-Provided textual documentation + property description (in Storybook)🧑‍🎨-Classification into component groups🧑‍🎨-Functional figma component is created in library🧑‍🎨-UX approval of coded component🧑‍🎨-A11y level A \u002F barrier free🧑‍🎨🧑‍💻DEV + UX aligned the naming🧑‍🎨🧑‍💻Verify keyboard interactivity-🧑‍💻Prime behavior covered by playwright-🧑‍💻Screenshot tests (dark + light) were created-🧑‍💻Component is fully documented (props, slots, ...) in Storybook-🧑‍💻Used clean SCSS naming (BEM)-🧑‍💻Verified HTML standards (tag names, prop names, behavior, ...)-🧑‍💻Used clean code-🧑‍💻",{"id":1148,"title":1149,"titles":1150,"content":1151,"level":15},"\u002Fsupport\u002Fphilosophy#final-expansion-stage-of-a-component","Final expansion stage of a component",[1134],"DescriptionUX\u002FUIDEVFigma library clean-up + sorting🧑‍🎨-Provided images and visualization inside documentation🧑‍🎨-Created tags for components🧑‍🎨-Special packages for special use-cases (e.g. gloves optimized)🧑‍🎨-Documentation of patterns (cooperation between multiple components)🧑‍🎨-All variants of a component are defined🧑‍🎨-Component fulfills least a11y level AA🧑‍🎨🧑‍💻Provide touchscreen support (tested in dev-tools)-🧑‍💻Mobile breakpoint optimized-🧑‍💻Verified behavior for the WAWI-🧑‍💻Implemented all density specialties :br(e.g. cozy for glove usage or compact for very small screens)-🧑‍💻",{"id":1153,"title":1154,"titles":1155,"content":131,"level":9},"\u002Fsupport\u002Fpricing","Pricing",[],{"id":1157,"title":1158,"titles":1159,"content":1160,"level":9},"\u002Fsupport\u002Fcontribuition-guide","Contribution guide",[],"Sollte eigtl zusammen mit allem in Guidelines zu lesen sein…",{"id":1162,"title":1163,"titles":1164,"content":1165,"level":9},"\u002Fsupport\u002Fcontribuition-guide#contribution-guide","Contribution Guide",[],"When contributing to onyx, please respect the Schwarz IT Code of Conduct and our technical guidelines. info Target audience\nThis document is directed at people that are developing for onyx.\nIt gives tips and guidelines on what should or must be considered when working with onyx.",{"id":1167,"title":1168,"titles":1169,"content":1170,"level":15},"\u002Fsupport\u002Fcontribuition-guide#prerequisites-setup","Prerequisites \u002F Setup",[1163],"Install [Node.js](\u003C\u003C\u003Chttps:\u002F\u002Fnodejs.org\u002Fen&#x29&#x3E&#x3E>;;; version . \nWe recommend using fnm for managing your node versions which will automatically use the correct node version when working in the onyx repo. tip Tip: Let fnm automatically choose the right version Run corepack enable onceAdd eval $(fnm env --use-on-cd --version-file-strategy=recursive --corepack-enabled --resolve-engines) to your shell startup file (e.g. ~\u002F.bash_profile, ~\u002F.zshrc ) Install the pnpm package manager with a compatible version to ^{{ packageManager.replace(\"pnpm@\", \"\") }}",{"id":1172,"title":1173,"titles":1174,"content":1175,"level":21},"\u002Fsupport\u002Fcontribuition-guide#recommended-ide-setup","Recommended IDE Setup",[1163,1168],"We follow the official Vue recommendation for IDE setup which is VSCode with the Vue - Official extension.",{"id":1177,"title":1178,"titles":1179,"content":1180,"level":15},"\u002Fsupport\u002Fcontribuition-guide#global-scripts","Global scripts",[1163],"Depending on which package you want to contribute, there are different scripts available. A full list can be found in the package.json file of the corresponding package.\nHere is a list of the most commonly used global scripts that you can run in the monorepo root folder. pnpm install # install all dependencies\npnpm lint:fix:all # lint and fix all packages with eslint\npnpm format:all # format all files with prettier\npnpm dev \u003Cpackage-name> # run dev mode for the given `\u003Cpackage-name>`, e.g. \"pnpm dev sit-onyx\"",{"id":1182,"title":1183,"titles":1184,"content":1185,"level":15},"\u002Fsupport\u002Fcontribuition-guide#create-new-component","Create new component",[1163],"To create and contribute a new component to onyx, follow the steps as described below.",{"id":1187,"title":1188,"titles":1189,"content":1190,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-1-get-the-code","Step 1: Get the code",[1163,1183],"First, you need to get access to the code. Onyx is Open Source and available on GitHub. Just create a fork of the repository to get started. info Access for employees of the Schwarz group\nIf you are an employee at the Schwarz group you can also get direct access to the onyx GitHub repository so you can create branches in there without needing to fork it. Just contact one of the team members \u002F engineers.",{"id":1192,"title":1193,"titles":1194,"content":1195,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-2-install-dependencies","Step 2: Install dependencies",[1163,1183],"If you haven't already, install the dependencies of the monorepo by running: pnpm install",{"id":1197,"title":1198,"titles":1199,"content":1200,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-3-run-storybook-locally","Step 3: Run Storybook locally",[1163,1183],"We are using Storybook to develop and document onyx components. The Storybook is also deployed on storybook.onyx.schwarz. To start it locally for development, just run the following command in the monorepo root folder. Afterwards, you can access Storybook on localhost:6006 pnpm dev sit-onyx",{"id":1202,"title":1203,"titles":1204,"content":1205,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-4-create-vue-file","Step 4: Create .vue file",[1163,1183],"Now, create a new Vue file for your component. All onyx components are located in the packages\u002Fsit-onyx\u002Fsrc\u002Fcomponents folder. Create a new folder with the name of your component and place a .vue file with your component name in it. For the rest of this guide, we assume that we want to create a component named OnyxExampleComponent. So you should place it inside packages\u002Fsit-onyx\u002Fsrc\u002Fcomponent\u002FOnyxExampleComponent\u002FOnyxExampleComponent.vue. You can\u002Fshould use the following boilerplate code to start your component: \u003Cscript lang=\"ts\" setup>\nimport type { OnyxExampleComponentProps } from \".\u002Ftypes\";\nimport { useDensity } from \"..\u002F..\u002Fcomposables\u002Fdensity\";\n\nconst props = defineProps\u003COnyxExampleComponentProps>();\n\nconst { densityClass } = useDensity(props);\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv :class=\"['onyx-component', 'onyx-example-component', densityClass]\">\n    Place your component HTML here...\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle lang=\"scss\">\n@use \"..\u002F..\u002Fstyles\u002Fmixins\u002Flayers.scss\";\n\n.onyx-example-component {\n  @include layers.component() {\n    \u002F\u002F component styles here...\n    font-family: var(--onyx-font-family-paragraph);\n  }\n}\n\u003C\u002Fstyle> A few notes on the code snippet above: Every onyx component must have the onyx-component CSS class set on its root. This is used\u002Fneeded for normalizing CSS styles, such as remove default margins from HTML elements etc.The densityClass must also be bind to the component root. To learn more about onyx densities, please refer to our density basics.We use CSS layers to allow users to easily override all styles. You must place all your component styles inside @include layers.component() { \u002F\u002F your styles... }All component styles are global, so you must use BEM for naming your classes. All nested classes must start with the prefix of your component to avoid global side effects, e.g. .onyx-example-component__label.",{"id":1207,"title":1208,"titles":1209,"content":1210,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-5-create-types-for-properties","Step 5: Create types for properties",[1163,1183],"To define your component props, create a new types.ts file in the component folder and type the properties as needed for your component.\nNote: The type name must start with your component name (see code snippet below) and extend the DensityProp so the density can be set for the component. import type { DensityProp } from \"..\u002F..\u002Fcomposables\u002Fdensity\";\n\nexport type OnyxExampleComponentProps = DensityProp & {\n  \u002F\u002F your component props, e.g.:\n  \u002F\u002F label: string;\n};",{"id":1212,"title":1213,"titles":1214,"content":1215,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-6-create-stories-file","Step 6: Create stories file",[1163,1183],"To develop, preview and document the component, you need to create a stories file so the component appear in the Storybook UI. tip Story title\nPlease make sure to adjust the Story title to use the category that your component fits in. We use \"Basic\" here but you can see a list of existing categories on storybook.onyx.schwarz. Also make sure to remove the \"Onyx\" prefix for the title. import type { Meta, StoryObj } from \"@storybook\u002Fvue3-vite\";\nimport OnyxExampleComponent from \".\u002FOnyxExampleComponent.vue\";\n\nconst meta: Meta\u003Ctypeof OnyxExampleComponent> = {\n  title: \"Basic\u002FExampleComponent\",\n  component: OnyxExampleComponent,\n};\n\nexport default meta;\ntype Story = StoryObj\u003Ctypeof OnyxExampleComponent>;\n\nexport const Default = {\n  args: {\n    \u002F\u002F you can define component props and slots here to create your component examples, e.g.:\n    \u002F\u002F label: \"Hello World\",\n  },\n} satisfies Story;",{"id":1217,"title":1218,"titles":1219,"content":1220,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-7-export-component","Step 7: Export component",[1163,1183],"Last but not least, export the component and its types from the library so other users can actually use\u002Fimport it once the component is released.\nPlease place the import alphabetically sorted by the component name. export { default as OnyxExampleComponent } from \".\u002Fcomponents\u002FOnyxExampleComponent\u002FOnyxExampleComponent.vue\";\nexport * from \".\u002Fcomponents\u002FOnyxExampleComponent\u002Ftypes\";",{"id":1222,"title":1223,"titles":1224,"content":1225,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-8-create-pull-request","Step 8: Create pull request",[1163,1183],"Once you are done with your changes, create a pull request and describe the changes that you did.\nPlease consider our technical guidelines when contributing to onyx. If you are contributing multiple components, features or your contributing is big, please split up the contribution and create multiple PRs! tip Draft PRs\nDon't worry if your PR is not completely done yet because you have open questions etc.\nYou can also create a draft pull request so the onyx team can help you out or finalize the PR for you. When your PR gets approved, you can expect a pre-release immediately after it is merged. Production releases are planned to be published every 2 weeks after the release of version 1.0.0. tip Screenshot tests\nComponent screenshot tests using Playwright will only be performed in our GitHub workflows to ensure consistency of the resulting images which vary on different operating systems. If you made visual changes to components, you can use this Workflow to update the screenshots on your branch.",{"id":1227,"title":1228,"titles":1229,"content":1230,"level":21},"\u002Fsupport\u002Fcontribuition-guide#step-9-create-changeset","Step 9: Create changeset",[1163,1183],"If your changes affect the user and need to be released (e.g. added a new component or feature), you need to add a changeset. With this, the onyx changelog and versioning is managed automatically. In the monorepo root, run: npx changeset add and follow the interactive CLI there. Please describe your changes in perspective of the user since this will end up in the changelog.",{"id":1232,"title":1233,"titles":1234,"content":1235,"level":15},"\u002Fsupport\u002Fcontribuition-guide#further-reading","Further reading",[1163],"Here you can find more details about: 📚 Writing stories🎨 Creating styles🎭 Implementing tests",{"id":1237,"title":977,"titles":1238,"content":1239,"level":9},"\u002Fsupport\u002Fcontribuition-guide#storybook",[],"For development and API documentation we make use of Storybook. A Story is a specific scenario or state of a component that showcases its functionality, appearance, or behavior. It helps developers and designers visualize and test different variations of a component in isolation. All stories for a single component are kept in a neighboring \u003Ccomponent>.stories.ts file. info\nThe next sections describe the content of a *.stories.ts file in more detail.\nFeel free to skip to the end to see the complete example and a TL;DR.",{"id":1241,"title":1242,"titles":1243,"content":1244,"level":15},"\u002Fsupport\u002Fcontribuition-guide#meta-section","Meta section",[977],"First off we have the Meta object.\nHere the component is described and documented.\nUsing tsdoc, a general description is added above the meta constant. The title attribute defines where in the storybook the component is placed and what its title is. Categories and the title are separated by slashes (\"\u002F\").component sets the Component that will be used for all Stories in this file. The documentation for all properties will be extracted from its types and their tsdoc block.With the argTypes attribute the components property documentation can be extended and overwritten.\nUsually this is not necessary as Storybook infers the properties, their types and description from the component types.\nHowever as shown in the example below, it can be useful to overwrite Storybooks input element using the control property.To highlight useful native DOM events, the withNativeEventLogging utility can be used. It enables logging and documentation for the defined DOM events. Make sure to export meta as default so Storybook can find the Story. \u003C\u003C\u003C .\u002Fstories-example.ts#meta",{"id":1246,"title":1247,"titles":1248,"content":1249,"level":15},"\u002Fsupport\u002Fcontribuition-guide#actual-stories","Actual Stories",[977],"Every non-default export represents a Story, where the export name is also the name of the story.\nThe first story is usually called Default. The description of the story object is done via tsdoc.We use StoryObj\u003Ctypeof OnyxComponent> to enable typed code completion.A story must define args which represents the props that are passed to component. To add further stories, add more named exports.\nConsider reusing the Default stories args. \u003C\u003C\u003C .\u002Fstories-example.ts#story",{"id":1251,"title":1252,"titles":1253,"content":1254,"level":15},"\u002Fsupport\u002Fcontribuition-guide#slots","Slots",[977],"Storybook treats Slots like props, therefore they are also configured via the args.\nA slot and its content are defined using Render Functions.\nA Render Functions must return a VNode or an array of VNodes. \u003C\u003C\u003C .\u002Fstories-example.ts#slot",{"id":1256,"title":1257,"titles":1258,"content":1259,"level":15},"\u002Fsupport\u002Fcontribuition-guide#tldr","TL;DR",[977],"tip TL;DR Descriptions and types are extracted by Storybook from the components types and tsdocMeta details are configured via a default export with type Meta\u003Ctypeof OnyxComponent>Stories are defined as Named Exports with type StoryObj\u003Ctypeof OnyxComponent>Props and slot content for a Story are passed with the args propertySlots are defined using Render Functions Complete example: \u003C\u003C\u003C .\u002Fstories-example.ts",{"id":1261,"title":1262,"titles":1263,"content":1264,"level":9},"\u002Fsupport\u002Fcontribuition-guide#styling","Styling",[],"We use SCSS as CSS preprocessor.\nAny valid CSS is also valid SCSS, that should make it easy to get started. All our design variables are provided as CSS custom properties.\nAn overview can be found here. For a general overview of our (S)CSS guidelines refer to our CSS Principles.",{"id":1266,"title":1267,"titles":1268,"content":1269,"level":15},"\u002Fsupport\u002Fcontribuition-guide#css-layers","CSS Layers",[1262],"We make use of Cascade Layers to simplify how different style sources are combined.\nBy putting all our styles into layers they can also be easily overwritten by users. Therefore, the @include layers.component() mixin must be used.\nIt will put the contained rules into the onyx.component layer and normalize stylings. \u003C\u003C\u003C .\u002Fstyling-example.vue#screenshot-testing {scss}",{"id":1271,"title":1272,"titles":1273,"content":1274,"level":15},"\u002Fsupport\u002Fcontribuition-guide#custom-density-styles","Custom density styles",[1262],"For most cases, the CSS variables for densities will already support that the component adjusts its spacings based on the current density.\nIn exceptional cases it might be necessary to apply special style rules for the densities, for which the default spacings do not work. You can use our density mixins in this case: \u003C\u003C\u003C .\u002Fstyling-example.vue#densities {scss}",{"id":1276,"title":1277,"titles":1278,"content":1279,"level":9},"\u002Fsupport\u002Fcontribuition-guide#testing","Testing",[],"We require every component to be thoroughly tested.\nonyx uses Playwright and Vitest for testing.",{"id":1281,"title":1282,"titles":1283,"content":1284,"level":15},"\u002Fsupport\u002Fcontribuition-guide#component-tests","Component tests",[1277],"Generally playwright component tests (kept in .ct.tsx-files) suffice to test a component. Component tests must include screenshot tests to ensure that any style changes happen intentionally and can be approved by our UX.\nTo easily generate and test screenshots for all main states the executeMatrixScreenshotTest utility is to be used. \u003C\u003C\u003C .\u002Ftesting-example.ct.tsx#executeMatrixScreenshotTest The utility creates a screenshot for every combination of rows and columns.\nThese are then combined in into grid and saves a single screenshot of it.\nHere is an example for the OnyxButton: warning\nChoose the columns and rows carefully, as the number of combination grows quadratically. It might be preferable to create a new screenshot matrix instead of adding more columns\u002Frows. Accessibility tests (using axe-core) are also run for every combination. For standalone tests or more complicated setups, toHaveScreenshot can be used directly: \u003C\u003C\u003C .\u002Ftesting-example.ct.tsx#toHaveScreenshot",{"id":1286,"title":1287,"titles":1288,"content":1289,"level":21},"\u002Fsupport\u002Fcontribuition-guide#development","Development",[1277,1282],"In our monorepo component tests are run non-interactively using the pnpm test:playwright script. To use Playwright interactively run pnpm exec playwright test --ui (add the --headed flag to open the see the- browsers) in the package directory.",{"id":1291,"title":1292,"titles":1293,"content":1294,"level":21},"\u002Fsupport\u002Fcontribuition-guide#ci","CI",[1277,1282],"To investigate failing playwright tests from the CI locally:\nYou can run pnpm gh:show-report in the root, which will Download the `html-report--attempt-x` artifact after the pipeline has finished.Unzip the archivecd into the package you want to see the report forRun pnpm dlx playwright show-report",{"id":1296,"title":1297,"titles":1298,"content":1299,"level":21},"\u002Fsupport\u002Fcontribuition-guide#vscode","VSCode",[1277,1282],"We highly recommend to use the Playwright Test for VSCode extension for running component tests in development.\nIt allows to build and run specific tests interactively, directly from the IDE (see annotation 3 in screenshot beneath).\nIf you encounter any issues please make sure to run the pnpm build script at least once for the packageto only select the playwright config file for the current package your are testingto run Run global teardown, Close All Browsers and Clear Cache You find the playwright VSCode extension settings (see annotation 2 in screenshot beneath) in the Testing section of VSCode (annotation 1).",{"id":1301,"title":1302,"titles":1303,"content":1304,"level":15},"\u002Fsupport\u002Fcontribuition-guide#unit-tests","Unit tests",[1277],"For self-contained logic, excluding Vue components, unit tests (kept in .spec.ts-files) can be written using Vitest. In our monorepo unit tests are run using the pnpm test script.",{"id":1306,"title":1307,"titles":1308,"content":1309,"level":9},"\u002Fsupport\u002Fcontribuition-guide#patterns","Patterns",[],"This page explains which common patterns we follow when developing onyx and how to use them.\nThese patterns are implemented through composables and enforced through linting rules, where possible.",{"id":1311,"title":1312,"titles":1313,"content":1314,"level":15},"\u002Fsupport\u002Fcontribuition-guide#root-attribute-forwarding","Root Attribute Forwarding",[1307],"For implementing necessary layout, styling and ARIA requirements, it is often necessary to wrap interactive HTML elements.\nTo enable the developers to be able to set custom attributes and event-listeners on these, we forward most attributes to the relevant (e.g. input or button) element.\nThe only attributes that are not forwarded are style and class with the assumption being, that these are only useful and intended to be set on the root element of the component. \u003C\u003C\u003C ..\u002F..\u002F..\u002F..\u002F..\u002Fpackages\u002Fsit-onyx\u002Fsrc\u002Futils\u002Fattrs.ts#docs",{"id":1316,"title":1317,"titles":1318,"content":1319,"level":15},"\u002Fsupport\u002Fcontribuition-guide#shared-child-props-forwarding","(Shared) Child Props Forwarding",[1307],"When a parent component is a wrapper for another (support) component, the parent usually extends all or a subset of the child's properties.\nThe relevant child props need then to be forwarded to the child component.\nThis can easily be achieved by using v-bind, e.g. \u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003CParentProps & ChildProps>();\n\u003C\u002Fscript>\n\u003Ctemplate>\n  \u003C!-- ⚠️ Don't do this -->\n  \u003CChildComponent v-bind=\"props\" \u002F>\n\u003C\u002Ftemplate> Unfortunately this has the unwanted side-effect of all extraneous props being applied as attributes.\nSo when the parent defines props which do not exist on the child component, they are treated as fallthrough attributes.\nBesides cluttering the HTML with irrelevant attributes this also can have disruptive side-effects when the prop name accidentally matches a valid html attribute (e.g. inert or hidden). Which might look like this in the DOM tree: \u003Cdiv class=\"child-component\" parent-prop-1=\"parent-prop-value-1\" parent-prop-2=\"[object Object]\">\n  \u003C!-- ... -->\n\u003C\u002Fdiv> To avoid this, our useForwardProps composable can be used: \u003C\u003C\u003C ..\u002F..\u002F..\u002F..\u002F..\u002Fpackages\u002Fsit-onyx\u002Fsrc\u002Futils\u002Fprops.ts#docs",{"id":1321,"title":1322,"titles":1323,"content":1324,"level":15},"\u002Fsupport\u002Fcontribuition-guide#state-control","State Control",[1307],"We want to give the user maximum control of component state, which is achieved by providing props with two-way binding support via Vue's v-model.\nTo not require the developer to declare refs for state they do not care about, the state will be stored internally if left undefined by the user. Unfortunately the Vue native defineModel compiler macro behaves not as expected, as it will prefer internal state updates over external, unchanged state (e.g. \u003CComp :open=\"true\" \u002F> will not be considered anymore after an update:open with value false). Therefore we created a custom composable useVModel, which will prefer the external state: \u003C\u003C\u003C ..\u002F..\u002F..\u002F..\u002F..\u002Fpackages\u002Fsit-onyx\u002Fsrc\u002Fcomposables\u002FuseVModel.ts#docs html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"id":1326,"title":1327,"titles":1328,"content":131,"level":9},"\u002Fsupport\u002Fmigration-guide","Migration guide",[],{"id":1330,"title":1331,"titles":1332,"content":131,"level":9},"\u002Fsupport\u002Fstatus","Status",[],{"id":1334,"title":1335,"titles":1336,"content":131,"level":9},"\u002Fsupport\u002Ffaq","FAQ",[],{"id":1338,"title":1339,"titles":1340,"content":1341,"level":9},"\u002Fsupport\u002Fguidelines","Guidelines",[],"Our technical guidelines describes the goals and rules that contributors and we (the development team of onyx) must adhere to.",{"id":1343,"title":1344,"titles":1345,"content":1346,"level":15},"\u002Fsupport\u002Fguidelines#global-architecture","Global Architecture",[1339],"📜 onyxdoes not have direct dependencies, only a limited amount of peer- and dev-dependencies.\npeer-dependencies: we allow a wide range of versions (e.g. >= 3).We use third-party dependencies sparingly. The need for each dependency must be well justified and documented in this wiki.📜 We rely on browser \u002F native features as much as possible.📜 Frequently used code is extracted into utils \u002F composables.📜 We provide custom eslint rules for principles and best practices where needed.",{"id":1348,"title":1349,"titles":1350,"content":1351,"level":15},"\u002Fsupport\u002Fguidelines#pull-requests","Pull Requests",[1339],"📜 Every PR that affects the public API of any published npm libraries must include a changeset.📜 A PR must consist of one (preferable) or multiple self-contained changes.📜 An \"Implement\" ticket can and will usually be split up over multiple PRs, so a single PR doesn't have to include all feature facets.\n❗️ These PRs should be sliced reasonably, as a set of changes that belong together.This enables us to do faster Code Reviews.",{"id":1353,"title":1354,"titles":1355,"content":1356,"level":15},"\u002Fsupport\u002Fguidelines#documentation","Documentation",[1339],"📜 Everything we publish (features, packages, ...) must be documented📜 The documentation explains everything the users need to know and do not expect implicit knowledge. E.g. all variants that a component offers are showcased and explained when they are used📜 We have a well written changelog which includes all relevant information on the usage of the changes",{"id":1358,"title":1359,"titles":1360,"content":1361,"level":15},"\u002Fsupport\u002Fguidelines#usability","Usability",[1339],"📜 The DX (Developer Experience) of our users is our top priority📜 We offer excellent typing support📜 We only support modern technologies (ES202x)\u002FESM📜 onyxcomponents must work in the three big browser (engines): Chromium, Firefox and Safari\nSupport is limited to versions up to one year old📜 We only use Web APIs that match our browserlist",{"id":1363,"title":1364,"titles":1365,"content":1366,"level":15},"\u002Fsupport\u002Fguidelines#component-interface","Component Interface",[1339],"📜 Component variants that differ in regards to their aria pattern are separate components📜 When Prop\u002FAttr names of the (wrapped) native element are being used for component properties,\nthey must mirror or extend the expected behavior of the native attributethey may limit the natives attribute accepted values (e.g. type property of the input could be limited to only support type text and password)📜 Fallthrough attributes should be passed to the relevant (interactive) native element of the component. (See Root Attribute Forwarding documentation)\nwe use the useRootAttrs composable📜 All boolean properties default to false (falsy)📜 We prevent complex conditions due to big union modelValue types.\nWe either offer specialized components (e.g. separating a number input from a text input)Alternatively, we can make use of generic components📜 We provide translations for standard texts inside components, e.g. \"OK\", \"Cancel\" etc. and allow to override them.\nCommunity contributions to our translations are most welcome!📜 We support common navigation patterns, e.g. keyboard shortcuts📜 We strife to keep the parity between Figma and the implementation as high as possible.\nWe use a shared domain language between UX and DEV.📜 All components can be used standalone in a project without affecting styles of the whole application (so they can be used together with other component libraries). Therefore, we provide two CSS files:\nComponent styles: Required. Defines the styles of the components, no side effects on globals.Global styles: Optional. Applies global styles to the whole application (e.g. color \u002F background color on body, \u003Ca> etc.)",{"id":1368,"title":1369,"titles":1370,"content":1371,"level":21},"\u002Fsupport\u002Fguidelines#naming-conventions","Naming conventions",[1339,1364],"📜 All (public) components are prefixed with Onyx, e.g. OnyxButton📜 We use v-model for two-way-data-binding wherever possible📜 Component variants are named after what they are, not where they are used (e.g. a link variant \"fullWidth\" instead of \"sideBar\")📜 All CSS class names are prefixed with onyx-📜 All CSS variables are prefixed with --onyx-",{"id":1373,"title":1374,"titles":1375,"content":1376,"level":15},"\u002Fsupport\u002Fguidelines#component-implementation","Component Implementation",[1339],"📜 We don't clone DOM nodes. Instead, we can place slots in different places depending on the breakpoint📜 We only use as much JavaScript as necessary (e.g. prefer CSS solutions over JavaScript)📜 Property types are declared and exported as standalone type and referenced in the definePropsthe property type can still be declared (and exported) inside the component file to which it belongs📜 We always use the notation props.foo instead of accessing foo directly in the \u003Ctemplate> section📜 We structure the component code in the following manner:\ntypespropsemitsslots... everything else grouped by responsibilitydefineExpose",{"id":1378,"title":1379,"titles":1380,"content":1381,"level":21},"\u002Fsupport\u002Fguidelines#a11y-accessibility","A11y (Accessibility)",[1339,1374],"📜 We use semantic HTML📜 We keep the DOM tree as flat as possible📜 We follow A11y best practices (level AA)📜 We define aria relevant properties as requirede.g. the alt property of the OnyxImage component is required",{"id":1383,"title":1384,"titles":1385,"content":1386,"level":21},"\u002Fsupport\u002Fguidelines#typescript","Typescript",[1339,1374],"📜 We use types instead of interfaces📜 We don't use typescript enums📜 We use strict undefined\u002Fnull checks when implementing the onyx ecosystem",{"id":1388,"title":1389,"titles":1390,"content":1391,"level":21},"\u002Fsupport\u002Fguidelines#css","CSS",[1339,1374],"📜 Instead of using scoped\u002Fmodule for \u003Cstyle>, we rely on meaningful class structures\nwe use BEM to provide semantic and structured class namesall styles related to a component are bundled inside one component class,\ne.g. the component OnyxInput has one class onyx-input which groups all styles of that component📜 We don't use !important📜 We define only as little style as needed\nInstead of copying Figma styles, we evaluate what is needed📜 Component styles are limited to the component internals\nWe don't set opinionated margins on the components that define how they are spaced in the page layout.📜 We avoid writing styles on a parent component that are applied to children that are placed in a slot\nException: When the alternative would over-complicate the interface, e.g. by requiring extra properties📜 We prefer styles that don't rely on :not()📜 We use rem for everything. This includes borders, font-sizes etc.",{"id":1393,"title":1277,"titles":1394,"content":1395,"level":21},"\u002Fsupport\u002Fguidelines#testing",[1339,1374],"📜 Each (public) component is covered by at least 1 screenshot test (via Playwright)📜 All defined component behavior is covered by a playwright test (.ct.tsx file)📜 Utils and composables are covered by Vitest tests (.spec.ts file)📜 We structure our tests by using the arrange-act-assert pattern:br\n\u002F\u002F ARRANGE\n\u002F\u002F ACT\n\u002F\u002F ASSERT html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"id":1397,"title":1398,"titles":1399,"content":131,"level":9},"\u002Fsupport","Support",[],[1401],{"title":963,"sidebar":1402,"path":1404,"stem":1405,"children":1406,"page":1418},{"root":1403},true,"\u002Fcomponents","components",[1407],{"title":1408,"path":1409,"stem":1410,"children":1411,"page":1418},"Buttons","\u002Fcomponents\u002Fbuttons","components\u002F01.buttons",[1412],{"title":1413,"path":1414,"stem":1415,"children":1416},"Button","\u002Fcomponents\u002Fbuttons\u002Fbutton","components\u002F01.buttons\u002Fbutton\u002Findex",[1417],{"title":1413,"path":1414,"stem":1415},false,{"id":1420,"title":1413,"body":1421,"componentName":1486,"description":1427,"extension":1487,"meta":1488,"navigation":1403,"path":1414,"seo":1489,"stem":1415,"__hash__":1490},"components_en\u002Fcomponents\u002F01.buttons\u002Fbutton\u002Findex.md",{"type":1422,"value":1423,"toc":1477},"minimark",[1424,1428,1433,1437,1440,1443,1446,1449,1451,1454,1457,1459,1462,1465,1467,1471,1474],[1425,1426,1427],"p",{},"Buttons serve as fundamental components in UI design, acting as gateways for user interactions and pivotal points for initiating actions within an interface. Whether prompting users to submit forms, navigate through pages, or trigger specific functionalities, buttons play a pivotal role in guiding users through their digital journey.",[1429,1430,1432],"h2",{"id":1431},"examples","Examples",[1434,1435,178],"h3",{"id":1436},"primary",[1425,1438,1439],{},"Use primary buttons for the most relevant actions for the current workflow such as \"Save\" or \"Submit\" actions.",[1441,1442],"component-example",{"name":178},[1434,1444,188],{"id":1445},"neutral",[1425,1447,1448],{},"Neutral buttons are used for secondary actions such as \"Cancel\" actions.",[1441,1450],{"name":188},[1434,1452,198],{"id":1453},"danger",[1425,1455,1456],{},"Use danger buttons for destructive actions such as \"Delete\".",[1441,1458],{"name":198},[1434,1460,490],{"id":1461},"icons",[1425,1463,1464],{},"An optional icon can be placed on either the left or the right side of the label.",[1441,1466],{"name":490},[1434,1468,1470],{"id":1469},"loading-skeleton","Loading & Skeleton",[1425,1472,1473],{},"The loading state is used after a user interaction to indicate that the triggered action is currently loading \u002F in progress. On the other hand, the skeleton should be used on initial page load when the data for the page \u002F button is initially loaded.",[1441,1475],{"name":1476},"Loading",{"title":131,"searchDepth":15,"depth":15,"links":1478},[1479],{"id":1431,"depth":15,"text":1432,"children":1480},[1481,1482,1483,1484,1485],{"id":1436,"depth":21,"text":178},{"id":1445,"depth":21,"text":188},{"id":1453,"depth":21,"text":198},{"id":1461,"depth":21,"text":490},{"id":1469,"depth":21,"text":1470},"OnyxButton","md",{},{"title":1413,"description":1427},"5CHD7XsE011MNzxOlS6b5K1FxlVaSJwZcJh18GyRrkY",1778682810450]