@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/.ai/guides/foundations-user-experience.md

@@ -0,0 +1,52 @@
+# User experience
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [User experience in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-user-experience--docs)
+
+We use heuristic guidelines to assess the usability and user-centred design quality of all Iress products.
+
+## System Feedback
+
+- Always show users where they are, what just happened, and what’s possible next.
+- Provide immediate visual and textual feedback for all actions and states.
+- Ensure feedback is clear, contextual, and proportionate to the importance of the action.
+
+## Language and Mental Models
+
+- Use user-centred language and avoid technical jargon.
+- Follow cultural and industry conventions for colour, iconography, terminology, and layout.
+- Align interaction patterns with real-world analogues wherever feasible.
+
+## Control and Forgiveness
+
+- Make actions reversible and provide undo where errors may occur.
+- Let users easily backtrack, edit inputs, or abandon flows.
+- Provide escape hatches from any process without penalty.
+
+## Standards and Consistency
+
+- Use consistent layout, labelling, iconography, and grammar.
+- Reinforce expectations by placing similar elements in predictable positions.
+- Apply colour, spacing, and visual patterns consistently across all screens.
+
+## Error Prevention and Recovery
+
+- Prevent errors by anticipating misuse and validating early.
+- Phrase error messages with clarity, empathy, and constructive suggestions.
+- Where errors occur, explain why and how they can be resolved.
+
+## Recognition Over Recall
+
+- Display necessary information at the point of decision.
+- Use visual grouping, spacing, and affordance to reveal hierarchy.
+- Prioritise visual clarity over novelty.
+
+## Simplicity and Minimalism
+
+- Remove unnecessary detail—every word, element, or feature should earn its place.
+- Design for clarity of purpose with visually distinct, semantically meaningful UI components.
+- Use whitespace, clean alignment, and simplified flows to reduce cognitive load.
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-user-experience--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-user-experience--docs)*

package/.ai/guides/foundations-visual-design.md

@@ -0,0 +1,41 @@
+# Visual Design Standards
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Visual Design Standards in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-visual-design-standards--docs)
+
+## Typography
+
+- Use systematic font sizing with heading scales (H1-H6)
+- Implement consistent line heights and font weights
+- Provide text colour hierarchies (primary, muted, success, warning, danger)
+- Support responsive typography scaling
+
+## Colour System
+
+- Maintain semantic colour meanings:
+  - **Primary**: Main call-to-action colour with high contrast
+  - **Success**: Positive outcomes and confirmations
+  - **Warning**: Caution and important notices
+  - **Danger**: Errors and destructive actions
+  - **Info**: Neutral information and guidance
+  - **Positive/Negative**: Financial context (buy/sell actions)
+- Ensure all colour combinations meet accessibility contrast requirements
+- Provide consistent hover and active state colours
+
+## Spacing and Layout
+
+- Use systematic spacing scale (xs, sm, md, lg, xl)
+- Apply consistent gutter systems for layout components
+- Implement responsive breakpoints for adaptive layouts
+- Maintain proper margin and padding relationships
+
+## Interactive States
+
+- Provide clear hover, focus, active, and disabled states
+- Use consistent transition timing and easing
+- Implement proper focus indicators for keyboard navigation
+- Show loading states for asynchronous operations
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-visual-design-standards--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-visual-design-standards--docs)*

package/.ai/guides/foundations-zindex.md

@@ -0,0 +1,22 @@
+# Z-index (stacking)
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Z-index (stacking) in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-z-index-stacking--docs)
+
+The z-index determines the stacking order of elements. Elements with a higher z-index always sit in front of elements with a lower z-index. Each index has been mapped to the appropriate elevation(s).
+
+## Reference
+
+[View "Reference" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_foundations-zindex--reference)
+
+---
+
+## For developers
+
+If you are using the IDS components, the z-indexes have already been mapped out to their respective components based on the usage above. They are hardcoded into the components, so you don't need to worry about them.
+
+The mapping is exported as `Z_INDEX` from the `@iress-oss/ids-components` package, in case you need to reference it in your own code.
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-z-index-stacking--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_foundations-z-index-stacking--docs)*

package/.ai/guides/get-started-develop.md

@@ -0,0 +1,47 @@
+# Develop
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Develop in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_get-started-develop--docs)
+
+Set up your environment to use the latest version of the Iress Design System (IDS). You can use this library to build React applications that align to IDS, and ensure a consistent and modern look and feel across all Iress products.
+
+## Requirements
+
+- [React 17 or later](https://reactjs.org/)
+
+## Set up
+
+1. Install using the command line:
+   ```sh
+   yarn add @iress-oss/ids-components
+   ```
+2. Import the styles:
+   ```tsx
+   import '@iress-oss/ids-components/dist/style.css';
+   ```
+3. Import the components. The provider is optional, but recommended for most applications. It sets up the design system and provides a consistent container for components like modals, slideouts, and toasts.
+   ```tsx
+      ```
+4. Use the components:
+
+   ```tsx
+   const App = () => {
+     const { success } = useToaster();
+
+     return (
+       <IressButton onClick={() => success({ children: 'Toast triggered' })}>
+         Trigger toast
+       </IressButton>
+     );
+   };
+
+   ReactDOM.createRoot(document.getElementById('root')!).render(
+     <IressProvider>
+       <App />
+     </IressProvider>,
+   );
+   ```
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_get-started-develop--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_get-started-develop--docs)*

package/.ai/guides/migration-guides-v5.md

@@ -0,0 +1,247 @@
+# Migration from v4 to v5
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Migration from v4 to v5 in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_resources-migration-guides-migration-from-v4-to-v5--docs)
+
+This is a step-by-step guide for upgrading your application from IDS v4 to v5.
+
+## Updating your dependencies
+
+### Upgrade IDS and themes
+
+Update your dependencies in your `package.json` file to the following:
+
+```json
+"dependencies": {
+  "@iress-oss/ids-components": "^5.0.0",
+  "@iress/themes": "^5.0.0"
+}
+```
+
+or run:
+
+```
+yarn add @iress-oss/ids-components@^5.0.0 @iress/themes@^5.0.0
+```
+
+### Upgrade React
+
+The minimum required version of React is 17. If you are using an older version of React, you will need to update it.
+
+## Updating imports
+
+### Changing components
+
+Update your imports to the new package name:
+
+[View "ComponentsImport" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--components-import)
+
+You can run both packages together, so you can migrate components one by one.
+
+[View "MigrateComponentsOneByOne" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--migrate-components-one-by-one)
+
+### Importing component styles
+
+IDS v5 no longer injects CSS into the DOM. You will need to import the stylesheet directly into your application.
+
+```ts
+import '@iress-oss/ids-components/dist/style.css';
+```
+
+## Update Jest configuration
+
+If you are using Jest, you will need to update your Jest configuration to add the new IDS package to your `transformIgnorePatterns`.
+
+**Note:** If you are using version 4 and version 5 in parallel, you will need to keep the old IDS packages in your `transformIgnorePatterns` until you have completely migrated over your components.
+
+```json
+"transformIgnorePatterns": [
+  "/node_modules/(?!@iress-oss/ids-components)"
+]
+```
+
+If you are mocking CSS files for your tests, you'll also need to make sure the new stylesheet is matched by your `moduleNameMapper`:
+
+[View "JestModuleNameMapper" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--jest-module-name-mapper)
+
+## Handling breaking changes
+
+### Components
+
+Since the move to React, the majority of the components have been simplified to improve developer experience. We have listed the changes in this google doc by component, so you can attend to each component separately.
+
+[{`Google doc`}](https://docs.google.com/document/d/1H3-zFDftCHDjwaFkwFxVo1uziPsOj8qJn7p3NFG3aUg/edit)
+
+### Testing
+
+Components are no longer loaded asynchronously, so you can test them as you would any other React component. The testing utilities have been removed from the package, so you will need to update your tests to use [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/) or another testing library.
+
+Below is an example of a changed test using React Testing Library.
+
+```tsx
+<Iressv5 allowModeChange />
+```
+
+[View "TestDiff" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--test-diff)
+
+#### Component specific testing
+
+Some components have additional testing requirements. The changed testing requirements will be listed on each component's docs page.
+
+These include:
+
+- [Form](/docs/components-form--docs#testing)
+- [Modal](/docs/components-modal--docs#testing)
+- [Slideout](/docs/components-slideout--docs#testing)
+
+### Styling
+
+The original CSS framework used for IDS was based on the Stencil library. It was lightly scoped (no shadow DOM) using CSS classes like: `sc-iress-radio-h sc-iress-radio-s`.
+
+These classes have been removed from version 5. If you are targeting components using these classes, it will be good for you review if you should adapt the CSS in a different way (ie. using design tokens/CSS variables instead, which should work no matter the class name, or adding custom classes to the IDS components). If targeting elements is still required, the new classes will be formatted as: `.ids-radio-${ids-version}`, and nested elements will use a modified BEM naming convention: `.ids-radio--label-${ids-version}`. The version number will be exposed; you can import it via Javascript, SASS and CSS module values to make future upgrades easier.
+
+#### Option 1: Use design tokens and custom classes
+
+This is the recommended approach. You can use design tokens and custom classes to style the components.
+
+```css
+.custom-radio {
+  --iress-text-color: red;
+  align-self: center;
+}
+```
+
+```tsx
+<IressRadio className="custom-radio" />
+```
+
+#### Option 2: Target the new classes
+
+This option is **not recommended** and should be used as a last resort, as the class names can change in future, in which case your stylesheet will no longer have any effect. It is recommended to use design tokens or custom classes instead.
+
+```scss
+@use '@iress-oss/ids-components/dist/constants/index.scss' as *;
+
+.ids-radio-#{$ids-version} {
+  align-self: center;
+}
+
+.ids-radio--label-#{$ids-version} {
+  color: red;
+}
+```
+
+### Theme tokens
+
+There are a few token changes that have changed (though this has been relatively minor). The version 5 themes have been updated to use the new design tokens, however if you are using version 4 in parallel with version 5, you may notice that the version 4 styles can no longer find the removed/changed tokens.
+
+To fix this issue, please backfill the tokens in your application until you have finished your migration.
+
+```scss
+/* TODO: Will be removed once we have moved to IDS version 5 */
+/* Change to the name(s) of the themes you want to back fill. */
+.iress-theme-light {
+  --iress-alert-error-text-color: var(--iress-alert-danger-text-color);
+  --iress-alert-error-background-color: var(
+    --iress-alert-danger-background-color
+  );
+  --iress-alert-error-border-color: var(--iress-alert-danger-border-color);
+  --iress-alert-error-heading-icon-text-color: var(
+    --iress-alert-danger-heading-icon-text-color
+  );
+
+  --iress-button-margin-right: var(--iress-g-spacing-xs);
+
+  --iress-combobox-option-meta-font-weight: var(
+    --iress-a-muted-font-weight,
+    var(--iress-g-font-weight, normal)
+  );
+  --iress-combobox-option-meta-text-color: var(
+    --iress-g-muted-text-color,
+    var(--iress-default-text-color--light)
+  );
+
+  --iress-filter-option-meta-font-weight: var(
+    --iress-a-muted-font-weight,
+    var(--iress-g-font-weight, normal)
+  );
+  --iress-filter-option-meta-text-color: var(
+    --iress-g-muted-text-color,
+    var(--iress-default-text-color--light)
+  );
+
+  --iress-form-field-margin-bottom: var(
+    --iress-a-vertical-spacing-lg,
+    var(--iress-g-spacing-lg)
+  );
+
+  --iress-table-cell-buy-text-color: var(
+    --iress-table-cell-positive-text-color
+  );
+  --iress-table-cell-sell-text-color: var(
+    --iress-table-cell-negative-text-color
+  );
+  --iress-table-cell-selected-buy-text-color: var(
+    --iress-table-cell-selected-positive-text-color
+  );
+  --iress-table-cell-selected-sell-text-color: var(
+    --iress-table-cell-selected-negative-text-color
+  );
+
+  --iress-validation-message-error-text-color: var(
+    --iress-validation-message-danger-text-color
+  );
+}
+```
+
+## AG grid theme
+
+As of version 5, we only support the lite AG grid theme, which is used in conjunction with the default alpine theme. In version 5, its imports have changed slightly.
+
+Run the following command to install the AG grid lite theme:
+
+```
+yarn add @iress/ag-grid-theme@^5.0.0
+```
+
+Then you can import the AG Grid theme CSS, import the relevant IDS theme, and hook up the styles by setting a class of ag-theme-alpine ag-theme-iress-lite on your grid wrapper.
+
+```tsx
+<Iressv5 allowModeChange />
+```
+
+[View "AgGridTheme" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--ag-grid-theme)
+
+## Removing version 4
+
+Version 5 and version 4 can be run in parallel, but it is recommended to remove version 4 to avoid any conflicts once you have completely migrated over your components.
+
+Run the following to remove version 4 and its related packages:
+
+```
+yarn remove @iress/components @iress/components-react @iress/components-react-custom-elements @iress/ids-react-test-utils
+```
+
+### Remove `global.css`
+
+The `global.css` file has been removed, it is now recommended to include the Roboto font directly using Google Fonts.
+
+[View "RemoveGlobalCss" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--remove-global-css)
+
+### Remove from Jest configuration
+
+If you are using Jest, you will need to update your Jest configuration to remove the old IDS packages from your `transformIgnorePatterns`.
+
+[View "RemoveFromJestTransforms" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--remove-from-jest-transforms)
+
+You can also remove the `mockLazyLoadedComponents` function from your Jest setup.
+
+[View "RemoveFromJestSetup" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--remove-from-jest-setup)
+
+You should also be able to remove the style mocks from your Jest configuration's `moduleNameMapper`, unless you are using CSS-in-JS, as IDS no longer injects CSS into the DOM.
+
+[View "RemoveFromJestModuleMapper" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_resources-migration-guides-v5--remove-from-jest-module-mapper)
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_resources-migration-guides-migration-from-v4-to-v5--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_resources-migration-guides-migration-from-v4-to-v5--docs)*

package/.ai/guides/styling-props-accessibility.md

@@ -0,0 +1,48 @@
+# Accessibility
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Accessibility in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-accessibility--docs)
+
+These are all styling props related to screen readers and accessibility. They allow you to hide content from visual users while still providing context for screen reader users, ensuring an inclusive experience for all users.
+
+## `focusable`
+
+The `focusable` prop allows you to set the focus state of a component. This is useful for components that need to be interactive via keyboard, but are not necessarily a button or input.
+
+It can be set to `true` to enable focus styles when the element is focused using keyboard navigation, or `within` to show focus styles when an element within is focused.
+
+```tsx
+<IressAccessibility focusable tabIndex={0}>
+  This element will have focus styles applied when it is focused. This is useful for accessibility and keyboard navigation.
+</IressAccessibility>
+```
+
+[View "focusable" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_styling-props-accessibility--focusable)
+
+## `srOnly`
+
+The `srOnly` prop allows you to set a component to be only visible on screen readers. It is used to ensure the screen reader has context of the screen to help the user understand the tasks required of them.
+
+```tsx
+<IressAccessibility srOnly>
+  Hello screen readers
+</IressAccessibility>
+```
+
+[View "srOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_styling-props-accessibility--sr-only)
+
+### Responsive
+
+The `srOnly` prop is responsive, allowing you to show content on larger screens and hiding them on smaller ones, enabling screen readers to have the same context as larger screens as they are not limited by device size.
+
+```tsx
+<IressAccessibility>
+  This content is visible on large screens and screen readers
+</IressAccessibility>
+```
+
+[View "srOnlyResponsive" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_styling-props-accessibility--sr-only-responsive)
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-accessibility--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-accessibility--docs)*

package/.ai/guides/styling-props-colour.md

@@ -0,0 +1,139 @@
+# Colour
+
+> **Guide:** `@iress-oss/ids-components`
+> **Storybook:** [Colour in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-colour--docs)
+
+These are all styling props related to changing the foreground and background
+colours of a component.
+
+## Background (`bg`)
+
+The `bg` prop allows you to change the background of any component to the value of a colour token. It should be used sparingly, and usually alongside the `color` prop to ensure accessibility.
+
+Below is an example of a component using `bg` and `color` to create a featured panel that changes colour depending on the theme.
+
+```tsx
+<IressColour bg="colour.primary.fill" color="colour.primary.onFill" />
+```
+
+[View "bg" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_styling-props-colour--bg)
+
+## Foreground (`color`)
+
+The `color` prop allows you to change the foreground of any component to the value of a colour token. It should be used sparingly, and usually alongside the `bg` prop to ensure accessibility.
+
+Below is an example of using the `color` prop to highlight text throughout a component.
+
+[View "color" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_styling-props-colour--color)
+
+---
+
+## Best Practices
+
+When applying colors to components, always use design tokens instead of hardcoded values. This ensures theme compatibility, accessibility, and consistency across your application.
+
+### ✅ DO: Use semantic color tokens
+
+Semantic color tokens like `colour.primary.text`, `colour.primary.fill`, and `colour.system.success.text` automatically adapt to theme changes and maintain proper contrast ratios.
+
+```tsx
+// ✅ CORRECT - Semantic color tokens
+<IressText color="colour.primary.text">Primary text</IressText>
+<IressPanel bg="colour.primary.fill" color="colour.primary.onFill">
+  Featured content
+</IressPanel>
+<IressText color="colour.system.success.text">Success message</IressText>
+```
+
+### ✅ DO: Use the special "alt" value for alternate backgrounds
+
+The special value `"alt"` provides an alternate background color that adapts to the current theme context.
+
+```tsx
+// ✅ CORRECT - Using "alt" for alternate backgrounds
+<IressPanel bg="alt">Content with alternate background</IressPanel>
+```
+
+### ✅ DO: Pair `bg` and `color` props together for accessibility
+
+When setting a background color, always pair it with an appropriate foreground color to ensure proper contrast and accessibility.
+
+```tsx
+// ✅ CORRECT - Paired bg and color for accessibility
+<IressPanel bg="colour.primary.fill" color="colour.primary.onFill">
+  Accessible content with proper contrast
+</IressPanel>
+
+<IressPanel bg="colour.system.success.fill" color="colour.system.success.onFill">
+  Success message with guaranteed contrast
+</IressPanel>
+```
+
+### ❌ DON'T: Use hardcoded hex values
+
+Hardcoded hex values don't respond to theme changes and may violate accessibility standards.
+
+```tsx
+// ❌ INCORRECT - Hardcoded hex values
+<IressText style={{ color: '#000000' }}>Text</IressText>
+<IressPanel style={{ backgroundColor: '#13213F', color: '#FFFFFF' }}>
+  Content
+</IressPanel>
+
+// ✅ CORRECT - Semantic tokens
+<IressText color="colour.primary.text">Text</IressText>
+<IressPanel bg="colour.primary.fill" color="colour.primary.onFill">
+  Content
+</IressPanel>
+```
+
+### ✅ DO: Use `cssVars` for CSS-in-JS
+
+If you're using a CSS-in-JS library, use `cssVars` from `@iress-oss/ids-tokens` to reference color tokens.
+
+```tsx
+
+// ✅ CORRECT - Using cssVars for colors in CSS-in-JS
+const StyledPanel = styled.div`
+  background-color: ${cssVars.colour.primary.fill};
+  color: ${cssVars.colour.primary.onFill};
+`;
+
+const SuccessText = styled.span`
+  color: ${cssVars.colour.system.success.text};
+`;
+```
+
+### ❌ DON'T: Use inline styles for colors
+
+Inline styles bypass the design system and prevent theme adaptation.
+
+```tsx
+// ❌ INCORRECT - Inline styles
+<IressPanel style={{ backgroundColor: '#F5F5F5', color: '#333333' }}>
+  Content
+</IressPanel>
+
+// ✅ CORRECT - Styling props
+<IressPanel bg="colour.neutral.10" color="colour.neutral.80">
+  Content
+</IressPanel>
+```
+
+## Token Reference
+
+For a complete reference of all available color tokens, including WCAG contrast ratios and allowed foreground/background combinations, see the tokens documentation.
+
+**Most commonly used color tokens:**
+
+- `colour.primary.fill`, `colour.primary.onFill` - Primary brand colors with guaranteed contrast
+- `colour.primary.text`, `colour.primary.surface` - Primary text and surface colors
+- `colour.neutral.10`, `colour.neutral.20`, `colour.neutral.80` - Neutral grays for backgrounds and text
+- `colour.system.success.text`, `colour.system.danger.text`, `colour.system.warning.text` - System status colors
+- `"alt"` - Special value for alternate backgrounds
+
+[View Full Colour Token Reference](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/tokens_colour--docs)
+
+---
+
+*View in Storybook: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-colour--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-colour--docs)*