@iress-oss/ids-mcp-server 5.15.0 → 6.0.0-alpha.0

package/generated/docs/introduction-docs.md

@@ -1,43 +1,87 @@
-[](#iress-design-system)Iress Design System
-===========================================
+Iress Design System
+===================
 
-5.15.0
+6.0.0-alpha.0
+
+The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
+
+[Start developing](/?path=/docs/get-started-develop--docs)[Read foundations](/?path=/docs/foundations-introduction--docs)
 
 * * *
 
-The Iress Design System (IDS) serves as a shared visual language, working code, design tools and resources, human interface guidelines, and a community of contributors. It supports designers and developers building digital products for both B2B (Financial Advisors, Paraplanners) and B2B2C (client customers) segments.
+Quick links
+-----------
+
+[
+
+Version 6
+---------
+
+Start developing with the latest version of the Iress Design System. Version 6 has had a complete styling overhaul to keep IDS modern.
+
+](https://docs.google.com/document/d/17K81rHBZjjF_tsrC8QFrSsmjrC0IJu_bpU4sB2N7PSQ/edit?usp=sharing)
+
+[
+
+Foundations
+-----------
+
+Core design principles, colors, typography, spacing, and visual guidelines that form the foundation of our design system.
+
+](/?path=/docs/foundations-introduction--docs)
+
+[
 
-[](#whats-new)What's new?
--------------------------
+Components
+----------
+
+Pre-built UI components like buttons, forms, tables, and navigation elements ready to use in your applications.
+
+](/?path=/docs/components-introduction--docs)
+
+[
+
+Design Tokens
+-------------
+
+Shared design values for colors, spacing, typography, and other visual properties that ensure consistency across products.
+
+](/?path=/docs/foundations-tokens-introduction--docs)
+
+[
 
 Patterns
 --------
 
-IDS has released our first pattern, `IressLoading`, allowing you to display loading feedback to users consistently across different applications no matter the scenario.
+Common UI patterns and layouts for forms and complex interations.
+
+](/?path=/docs/patterns-introduction--docs)
 
-It is available as of `5.10.0`.
+[
+
+Styling props
+-------------
 
-[Learn more](/?path=/docs/patterns-loading--docs)
+Safely customise any component in the design system using styling props to create engaging UIs.
 
-Theme components
-----------------
+](/?path=/docs/styling-props-reference--docs)
 
-You can now use `IressTheme` from the `@iress/ids-themes` package to quickly add a theme to your application. No more messing around with CDN urls, now you just need the name of the theme and you are good to go.
+[
 
-[Learn more](/?path=/docs/themes-introduction--docs)
+Themes
+------
 
-[](#ready-to-dive-in)Ready to dive in?
---------------------------------------
+IDS is white-labelled, allowing you to create custom themes tailored to your client's identity.
 
-Start shipping faster with IDS.
+](/?path=/docs/themes-introduction--docs)
 
 [
 
-Get started
+Resources
+---------
 
-](/?path=/docs/get-started-develop--docs)
+MCP server and other tools to help you make the most of the Iress Design System.
 
-On this page
+](/?path=/docs/resources-introduction--docs)
 
-*   [What's new?](#whats-new)
-*   [Ready to dive in?](#ready-to-dive-in)
+On this page

package/generated/docs/news-version-6-docs.md

@@ -0,0 +1,93 @@
+[](#version-6)Version 6
+=======================
+
+Version 6 will introduce a simplified design token system, enhancing consistency and maintainability across all Iress products.
+
+[](#vision)Vision
+-----------------
+
+Beautiful, user-friendly applications seamlessly align with client branding, delivering consistent, memorable experiences that embody the organisation’s identity
+
+[](#impact)Impact
+-----------------
+
+*   **Faster development**: The new design tokens and CSS-in-JS approach streamline application development, reducing code complexity.
+*   **Improved brand consistency**: Easier branding integration enhances professionalism and uniformity.
+*   **Enable no-code theming**: Non-developers can create and manage themes, reducing development resource demands.
+*   **Better collaboration**: With less design tokens, we can provide a unified language for designers and developers to work together more effectively.
+*   **Enhanced usability**: A modern UI improves user experience and satisfaction, as per the [aesthetic-usability effect](https://www.nngroup.com/articles/aesthetic-usability-effect).
+
+[](#goals)Goals
+---------------
+
+### [](#simplifying-tokens)Simplifying tokens
+
+A key challenge has been the complexity of the current design token structure. We are simplifying it by:
+
+*   **Flattening the token structure:** Reducing semantic naming conventions to minimise the number of tokens, making them easier to use across code and Figma.
+*   **Using composite tokens:** Merging related tokens (e.g. font-size and line-height) into a single token, reducing the number of tokens required.
+*   **Figma style guide:** Aligning design system tokens with a Figma guide for seamless designer-developer collaboration.
+
+### [](#modern-ui-out-of-the-box)Modern UI out-of-the-box
+
+We are refreshing the design system to ensure applications look modern and professional by default. Key updates will include:
+
+*   **A refined white-label theme**: More polished out-of-the-box design instead of a completely neutral theme.
+*   **Simplified variations:** Fewer and smarter variations to reduce complexity and improve consistency.
+*   **Increased use of animations and layering:** Enhancing accessibility and engagement beyond color-based differentiation.
+
+### [](#theme-management-system-styler)Theme management system (Styler)
+
+Styler will be updated to support the new token structure, enabling:
+
+*   **Complete token control:** Full customization of colors, typography, spacing, and more (even custom fonts!).
+*   **Sub-themes instead of view modes:** Allowing extensions of base themes for specific use cases (e.g. larger text without changing colors for mobile-first products).
+
+### [](#css-in-js-transition)CSS-in-JS Transition
+
+IDS is adopting [Panda CSS](https://pandacss.dev/), a lightweight, zero-runtime CSS-in-JS solution, offering:
+
+*   Smaller CSS bundles & faster performance.
+*   Type-safe styles that use the design tokens, removing the need for you to remember which `--iress-*` CSS variable to use when styling components. They will all automatically mapped instead (eg. `<IressBox px="spacing.600" />`).
+*   CSS layers for clear separation between IDS and application styles for easier overrides.
+*   Utilising Panda CSS recipes and utilities for streamlined styling.
+
+[](#other-questions)Other questions
+-----------------------------------
+
+### [](#how-can-i-make-it-easier-to-migrate-to-version-6)How can I make it easier to migrate to version 6?
+
+1.  **Good news!**: Some components will not require any changes on your side, but they will have all the good features of version 6. These are marked as `Updated` in Storybook, please tell us if there were any issues with these components.
+2.  **Use the new design tokens**: Use the new design tokens in your codebase. The new design tokens are available in the `@iress-oss/ids-tokens` package. You can import tokens as CSS variables by using `cssVars.elevation.raised.shadow`, or you can access the underlying metadata by using `designTokens.elevation.raised.shadow`.
+3.  **Provide feedback**: Reach out to the team if you have any concerns on our approach
+
+### [](#can-i-migrate-to-version-6-and-keep-the-same-look-and-feel-to-the-old-themes)Can I migrate to version 6 and keep the same look and feel to the old themes?
+
+Yes, the old themes will still be available in version 6 as we know that multiple products will need to be transitioned at the same time (such as Xplan). They will look mostly the same as they did in previous versions apart from a few things no longer living in design tokens, such as:
+
+*   **Border widths:** These are now hard coded in components and can no longer be customised at the theme level. Borders play a big part in usability hence they are now hard coded, with some being controlled at the component level such as `IressBox` and `IressTable`.
+*   **Animations/transitions:** These are now hard coded in components and can no longer be customised at the theme level. They play a big part in usability hence they are now hard coded.
+*   **Sizes:** These are now hard coded in components and can no longer be customised at the theme level. Some components such as `IressTable` and `IressButton` have variations that will re-size the component.
+
+[](#breaking-changes)Breaking Changes
+-------------------------------------
+
+[
+
+View the breaking changes document
+
+](https://docs.google.com/document/d/17K81rHBZjjF_tsrC8QFrSsmjrC0IJu_bpU4sB2N7PSQ/edit?tab=t.0#heading=h.z7kwtn6paey6)
+
+On this page
+
+*   [Vision](#vision)
+*   [Impact](#impact)
+*   [Goals](#goals)
+    *   [Simplifying tokens](#simplifying-tokens)
+    *   [Modern UI out-of-the-box](#modern-ui-out-of-the-box)
+    *   [Theme management system (Styler)](#theme-management-system-styler)
+    *   [CSS-in-JS Transition](#css-in-js-transition)
+*   [Other questions](#other-questions)
+    *   [How can I make it easier to migrate to version 6?](#how-can-i-make-it-easier-to-migrate-to-version-6)
+    *   [Can I migrate to version 6 and keep the same look and feel to the old themes?](#can-i-migrate-to-version-6-and-keep-the-same-look-and-feel-to-the-old-themes)
+*   [Breaking Changes](#breaking-changes)