@iress-oss/ids-mcp-server 0.0.1-dev.0

package/generated/docs/themes-introduction-docs.md

@@ -0,0 +1,121 @@
+[](#themes)Themes
+=================
+
+The Iress Design System is designed to be white-labelled, allowing you to change the look and feel of the components to match your brand. This is done by using a theme.
+
+* * *
+
+Beta
+
+New component
+
+This component is new, please provide feedback to the IDS team if you encounter any issues.
+
+[](#what-are-themes)What are themes?
+------------------------------------
+
+Themes are a collection of [design tokens](./?path=/docs/themes-tokens--docs) that are used to style the components to match a certain brand. These tokens are used to define the colours, typography, spacing, and other styles of the components.
+
+You can see the current themes available by using the theme switcher in the top left corner of this page.
+
+[](#using-a-theme)Using a theme
+-------------------------------
+
+To start using a theme in your own application, you can use the `IressTheme` component from the `@iress/ids-themes` package. This component takes the name of a theme and imports the theme CSS (via the Iress CDN) to display the components in that theme.
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+import { IressTheme } from '@iress/ids-themes';
+<IressTheme name\="iress-beta-theme-light" />;
+
+Copy
+
+If you cannot use the Iress CDN, you can also use the dynamic `IressThemeImport` component to import the theme CSS from your dependencies. It will import the theme CSS from the `@iress/ids-themes` package.
+
+**Note:** This component dynamically injects CSS into the document, and may throw errors in your tests. Please see the [Testing](#testing) section for more information.
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+import { IressThemeImport } from '@iress/ids-themes';
+<IressThemeImport
+  name\="iress-beta-theme-light"
+  fallback\={<IressSpinner screenReaderText\="Loading theme..." />}
+\>
+  <App />
+</IressThemeImport\>;
+
+Copy
+
+[](#testing)Testing
+-------------------
+
+Due to the CSS being loaded dynamically, you will need to set up your test configuration to handle the dynamic CSS loading.
+
+### [](#vitest)Vitest
+
+This will force the CSS from the `@iress/ids-themes` package to be loaded inline in the test environment.
+
+\[data-radix-scroll-area-viewport\] {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+\[data-radix-scroll-area-viewport\]::-webkit-scrollbar {
+  display: none;
+}
+:where(\[data-radix-scroll-area-viewport\]) {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+:where(\[data-radix-scroll-area-content\]) {
+  flex-grow: 1;
+}
+
+test: {
+  // the rest of your Vitest configuration here
+  server: {
+    deps: {
+      inline: \['@iress/ids-themes'\],
+    },
+  },
+},
+
+Copy
+
+On this page
+
+*   [What are themes?](#what-are-themes)
+*   [Using a theme](#using-a-theme)
+*   [Testing](#testing)
+    *   [Vitest](#vitest)