diff --git a/.env.production b/.env.production index 5a404a70b..444091b70 100644 --- a/.env.production +++ b/.env.production @@ -1,4 +1,4 @@ -IX_REPO_BRANCH='@siemens/ix@5.1.0' +IX_REPO_BRANCH='main' IX_REPO_TYPE='branch' # For pull requests use "pull request" as value IX_REPO_PR='' diff --git a/docs/components/ai-message/code.mdx b/docs/components/ai-message/code.mdx new file mode 100644 index 000000000..b7895f30c --- /dev/null +++ b/docs/components/ai-message/code.mdx @@ -0,0 +1,15 @@ +--- +doc-type: 'tab-item' +description: 'Code examples and API documentation for AI message.' +--- + +import ChatAiMessagePlayground from '@site/docs/autogenerated/playground/chat-ai-message.mdx'; +import PropsApi from '@site/docs/autogenerated/api/ix-chat-ai-message/api.mdx'; + +# AI message - Code + +## Basic + + + + diff --git a/docs/components/ai-message/guide.md b/docs/components/ai-message/guide.md new file mode 100644 index 000000000..9391db2bd --- /dev/null +++ b/docs/components/ai-message/guide.md @@ -0,0 +1,36 @@ +--- +doc-type: 'tab-item' +description: 'Usage guide for AI message.' +--- + +# AI message - Usage + +AI messages display a single assistant response inside a conversational thread. We recommend using them for answers users need to read, review and act on. + +![AI message anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7959-520&t=8Rj3ErabF16Vm3lH-4) + +1. Content +2. Actions + +## Options + +- **Content:** Keep the response easy to scan by structuring it (see [content guidelines](../../guidelines/conversational-design/overview.md)). +- **Actions:** Add only message-level actions that users expect after reading, e.g. copy, rate response quality or regenerate. We recommend using subtle tertiary [icon buttons](../icon-button) so actions stay available without competing with the answer. +- **Sources:** If the response is grounded in files, web results or internal data, expose that provenance close to the message content. Only display if there are dedicated sources to show. + +## Behavior in context + +- **Responsiveness:** AI messages use from 45 to 80% of the chat's container width, depending on the viewport width. + +## Dos and Don’ts + +- Do show clear [loading indicators](../spinner/) while the assistant is generating responses (see [wording guidelines](../../guidelines/conversational-design/essentials/wording-terms.mdx#response-progress-indicator)) +- Do use the same actions for each AI message for consistency, but not more than 4 to avoid overloading users, e.g. copy, feedback, regenerate +- Do add thumbs up or down actions only if you are aligned with data protection guidelines + +## Related + +- [Chat](../chat) +- [User message](../user-message) +- [Chat input](../chat-input) +- [Conversational design guidelines](../../guidelines/conversational-design/overview.md) diff --git a/docs/components/ai-message/index.mdx b/docs/components/ai-message/index.mdx new file mode 100644 index 000000000..f64efa929 --- /dev/null +++ b/docs/components/ai-message/index.mdx @@ -0,0 +1,6 @@ +--- +doc-type: "tabs" +description: 'AI messages display a single response generated by AI in a conversational chat experience.' +title: 'AI message' +deprecated: +--- diff --git a/docs/components/chat-attachment/code.mdx b/docs/components/chat-attachment/code.mdx new file mode 100644 index 000000000..8fd0d1b6d --- /dev/null +++ b/docs/components/chat-attachment/code.mdx @@ -0,0 +1,15 @@ +--- +doc-type: 'tab-item' +description: 'Code examples and API documentation for chat attachment.' +--- + +import ChatAttachmentPlayground from '@site/docs/autogenerated/playground/chat-user-message.mdx'; +import PropsApi from '@site/docs/autogenerated/api/ix-chat-attachment/api.mdx'; + +# Chat attachment - Code + +## Basic + + + + diff --git a/docs/components/chat-attachment/guide.md b/docs/components/chat-attachment/guide.md new file mode 100644 index 000000000..945f27a85 --- /dev/null +++ b/docs/components/chat-attachment/guide.md @@ -0,0 +1,46 @@ +--- +doc-type: 'tab-item' +description: 'Usage guide for chat attachment.' +--- + +# Chat attachment - Usage + +Chat attachments display files that users have uploaded to a chat prompt. It is typically displayed when users are writing in the chat input [chat inputs](../chat-input) and in all sent [user messages](../user-message/). + +![Chat attachment anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7970-230&t=HrpSIFfB7yjzt741-4) + +1. File icon +2. File name +3. Remove button + +## Options + +- **File icon:** Show a recognizable file-type [icon](../../icons/icon-library) so users can identify attachments quickly, e.g. `pdf-document`. +- **File name:** Show the file name including the file extension. +- **Remove button:** Show remove buttons in a [chat input](../chat-input/) and hide it once an attachment is part of a submitted [message](../user-message/). +- **Preview supported:** Use only for supported files to show e.g. thumbnails. + +## Behavior in context + +- **Chat input context:** If attachments exceed the chat input's width, they overflow into a scrollable horizontal list. +- **User message context:** If attachments exceed the user message container's width, a more button is visible. +- **Text overflow:** If an attachment exceeds `20rem`, the file name is truncated at the end while preserving the file extension. A tooltip is shown on hover to display the full file name. + +## States + +Chat attachments have six states: default, hover, active, loading, focused and error. + +Chat attachments follow the [chip](../chip) interaction model, including hover, active and focused behavior. In an error state, attachments stay visible and show clear feedback so users can retry or remove files. + +## Dos and Don’ts + +- Do keep attachments visible in user messages so attachments stay traceable within context +- Don’t hide the remove action while users are still composing a prompt in the [chat input](../chat-input/) +- Don’t detach attachments from their related [user message](../user-message/) after sending + +## Related + +- [Chat](../chat) +- [Chat input](../chat-input) +- [Chip](../chip) +- [User message](../user-message) diff --git a/docs/components/chat-attachment/index.mdx b/docs/components/chat-attachment/index.mdx new file mode 100644 index 000000000..07c2dae32 --- /dev/null +++ b/docs/components/chat-attachment/index.mdx @@ -0,0 +1,6 @@ +--- +doc-type: "tabs" +description: 'Chat attachments are used to display a single attachment in chat experiences.' +title: 'Chat attachment' +deprecated: +--- diff --git a/docs/components/chat-input/code.mdx b/docs/components/chat-input/code.mdx new file mode 100644 index 000000000..12637b878 --- /dev/null +++ b/docs/components/chat-input/code.mdx @@ -0,0 +1,15 @@ +--- +doc-type: 'tab-item' +description: 'Code examples and API documentation for chat input.' +--- + +import ChatInputPlayground from '@site/docs/autogenerated/playground/chat-input.mdx'; +import PropsApi from '@site/docs/autogenerated/api/ix-chat-input/api.mdx'; + +# Chat input - Code + +## Basic + + + + diff --git a/docs/components/chat-input/guide.md b/docs/components/chat-input/guide.md new file mode 100644 index 000000000..1214a8433 --- /dev/null +++ b/docs/components/chat-input/guide.md @@ -0,0 +1,59 @@ +--- +doc-type: 'tab-item' +description: 'Usage guide for chat input.' +--- + +# Chat input - Usage + +In chat inputs users write and send messages . We recommend using them for quick, iterative exchanges, not for multi-step data entries. + +![Anatomy component](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7940-7427&t=mrtbkWj76QJhvNLI-11) + +1. Follow-up prompts +2. Attachments +3. Textarea +4. Start slot for secondary actions +5. Disclaimer +6. End slot for alternative input methods +7. Send button + +## Options + +- **Placeholder:** Use clear, contextual prompts, e.g. “Enter a command, question or topic…” (see [writing guidelines](../../guidelines/conversational-design/essentials/wording-terms)). +- **Follow-up slot:** Optionally include a slot for follow-up questions. We typically use tertiary outline [buttons](../button) or [icon buttons](../icon-button) for that purpose. +- **Attachment slot:** Optionally include a slot for [attachments](../chat-attachment/). +- **Start slot:** Add secondary actions. We recommend using tertiary outline [icon buttons](../icon-button) and trying to stick to one action. If you have more than one action, use [dropdown buttons](../dropdown-button/). +- **End slot:** Use this slot to add alternative input methods, e.g. voice input. +- **Disclaimer:** In AI contexts, we recommend including a visible disclaimer under the input instead of under each [AI message](../ai-message/). For Siemens AG products, find legal disclaimers [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/main/apps/documentation/src/pages/legal-disclaimers-copilots.md). +- **Character limit:** Set soft and hard character limits that either warn users or prevent further input. + +## Behavior in context + +- **Interaction:** Keep the input compact at start and let it grow to multiline while users type +- **Overflow:** + - On the follow-up actions: If the actions exceed max width, they break into multiple lines + - On the input: If the input reaches max height, the input shows a vertical scroll + - On the attachments: If the attachments reach max width, they show a horizontal scroll + +![Overflow behavior](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7940-7020&t=mrtbkWj76QJhvNLI-11) + +## States + +Chat inputs have four states: default, hover, focused and processing. + +![States](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7940-2809&t=mrtbkWj76QJhvNLI-4) + +## Dos and Don’ts + +- Do keep action labels verb-based and specific so users understand the outcome (see [guidelines for Siemens AG employees](https://www.figma.com/design/lqjt9c5IzzwQ4eJ4nqG7Kv/AI-Terminology?node-id=1-9&t=d5UkOPKJfj9qDmYM-1)) +- Don’t allow users to send empty input +- Don’t rely on color alone to communicate validation errors +- Don’t place AI disclaimers away from user input and messages + +## Related + +- [Chat](../chat) +- [AI message](../ai-message) +- [User message](../user-message) +- [Textarea](../textarea) +- [Conversational design guidelines](../../guidelines/conversational-design/getting-started) diff --git a/docs/components/chat-input/index.mdx b/docs/components/chat-input/index.mdx new file mode 100644 index 000000000..79482932f --- /dev/null +++ b/docs/components/chat-input/index.mdx @@ -0,0 +1,6 @@ +--- +doc-type: "tabs" +description: 'Chat inputs are used to write messages with attachments in a chat experience.' +title: 'Chat input' +deprecated: +--- diff --git a/docs/components/chat/code.mdx b/docs/components/chat/code.mdx new file mode 100644 index 000000000..b7e383fbe --- /dev/null +++ b/docs/components/chat/code.mdx @@ -0,0 +1,15 @@ +--- +doc-type: 'tab-item' +description: 'Code examples and API documentation for chat.' +--- + +import ChatPlayground from '@site/docs/autogenerated/playground/chat.mdx'; +import PropsApi from '@site/docs/autogenerated/api/ix-chat/api.mdx'; + +# Chat - Code + +## Basic + + + + diff --git a/docs/components/chat/guide.md b/docs/components/chat/guide.md new file mode 100644 index 000000000..af5b43a50 --- /dev/null +++ b/docs/components/chat/guide.md @@ -0,0 +1,35 @@ +--- +doc-type: 'tab-item' +description: 'Usage guide for chat.' +--- + +# Chat - Usage + +Chats are the outer containers that bring together the three building blocks of a conversational thread: [Chat input](../chat-input) at the bottom for writing and sending prompts, [user messages](../user-message) that show what users submitted and [AI messages](../ai-message) that display AI responses. + +![Chat anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7962-804&t=8Rj3ErabF16Vm3lH-4) + +1. [User message](../user-message) +2. [AI message](../ai-message) +3. [Chat input](../chat-input) + +## Behavior in context + +- **Placement:** We recommend placing the chat either in the main content or in panes depending on the user goals: + - [Main content](../content): Use when the chat is the main focus of the experience, e.g. standalone or workspace copilots + - [Panes](../panes): Use when the chat is a secondary feature, e.g. for contextual help +- **Responsiveness:** Chats will resize to a max-width of `45rem`. + +## Dos and Don’ts + +- Do enable auto-scroll when users are reading the current response, not when they are reading previous responses +- Don't add limits to how many messages are visible, instead always display full chat sessions + +## Related + +- [Chat input](../chat-input) +- [User message](../user-message) +- [AI message](../ai-message) +- [Conversational design guidelines](../../guidelines/conversational-design/getting-started) +- [SDL AI UX Guidelines](https://www.figma.com/design/KbgPxj7qLgngXkJfnDM4Ty/SDL-AI-UX-Guidelines?t=Kv2aR7JVmhNYuR1S-0) (Siemens AG internal resource) + diff --git a/docs/components/chat/index.mdx b/docs/components/chat/index.mdx new file mode 100644 index 000000000..04494db3f --- /dev/null +++ b/docs/components/chat/index.mdx @@ -0,0 +1,6 @@ +--- +doc-type: "tabs" +description: 'Chats are layout components for building conversational chatbot experiences.' +title: 'Chat' +deprecated: +--- diff --git a/docs/components/custom-field/code.mdx b/docs/components/custom-field/code.mdx index ced8573f3..b2e2f90fa 100644 --- a/docs/components/custom-field/code.mdx +++ b/docs/components/custom-field/code.mdx @@ -9,12 +9,16 @@ import PropsApi from '@site/docs/autogenerated/api/ix-custom-field/api.mdx'; # Custom field - Code -With the help of `ix-custom-field` you are able to create form fields that can host any component / markup, while still having access to all validation states as well as ascociated explanatory texts like `helper-text`, `valid-text`, `info-text`, `warning-text` or `invalid-text`. +With the help of `ix-custom-field` you are able to create form fields that can host any component / markup, while still having access to all validation states as well as associated explanatory texts like `helper-text`, `valid-text`, `info-text`, `warning-text` or `invalid-text`. The component will check if any of its children has one of these classes set: `ix-valid, ix-info, ix-warning or ix-invalid` If this is the case the custom field will display the corresponding text. -Custom fields can be used to migrate from the existing input validation (native inputs) to the new validation / froms concept. +Custom fields can be used to migrate from the existing input validation (native inputs) to the new validation / forms concept. + +:::info Legacy native input styles +The validation example uses the legacy `.ix-form-control` class. Import `@siemens/ix/css/legacy.css` while migrating existing native inputs. For new applications, prefer the dedicated form components or provide application-specific styles for custom native controls. +::: ## Basic diff --git a/docs/components/html-grid/code.mdx b/docs/components/html-grid/code.mdx index a826f429b..f014fa5fa 100644 --- a/docs/components/html-grid/code.mdx +++ b/docs/components/html-grid/code.mdx @@ -8,6 +8,12 @@ import HtmlTableStripedPlayground from '@site/docs/autogenerated/playground/html # HTML table - Code +The default stylesheet includes the `.ix-table` and `.ix-table-striped` classes used by these examples. If you load the foundation and a theme separately instead, import the utility stylesheet once in your application: + +```css +@import '@siemens/ix/css/utilities.css'; +``` + ## Basic diff --git a/docs/components/key-value-list/code.mdx b/docs/components/key-value-list/code.mdx index 8f33de976..a2153fa60 100644 --- a/docs/components/key-value-list/code.mdx +++ b/docs/components/key-value-list/code.mdx @@ -12,6 +12,10 @@ import KeyValueListStripedPlayground from '@site/docs/autogenerated/playground/k # Key value list - Code +:::info Legacy native input styles +The custom value example uses the legacy `.ix-form-control` class. Import `@siemens/ix/css/legacy.css` while migrating existing native inputs. For new applications, prefer an input component or provide application-specific styles for the slotted native control. +::: + ## Basic diff --git a/docs/components/key-value/code.mdx b/docs/components/key-value/code.mdx index 5d8adb539..3ca445c23 100644 --- a/docs/components/key-value/code.mdx +++ b/docs/components/key-value/code.mdx @@ -12,6 +12,10 @@ import KeyValueWithLabelLeftPlayground from '@site/docs/autogenerated/playground # Key value - Code +:::info Legacy native input styles +The custom value example uses the legacy `.ix-form-control` class. Import `@siemens/ix/css/legacy.css` while migrating existing native inputs. For new applications, prefer an input component or provide application-specific styles for the slotted native control. +::: + ## Basic diff --git a/docs/components/overview.md b/docs/components/overview.md index 5ddd13d35..82872272b 100644 --- a/docs/components/overview.md +++ b/docs/components/overview.md @@ -18,47 +18,52 @@ import { CategoryButton } from '@site/src/components/CategoryButton'; -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-249&t=gkh6VNlJun96I6Ac-4) +![Application frame](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-249&t=gkh6VNlJun96I6Ac-4) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-259&t=gkh6VNlJun96I6Ac-4) +![Navigation and hierarchy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-259&t=gkh6VNlJun96I6Ac-4) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-269&t=gkh6VNlJun96I6Ac-4) +![Containers and layouts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-269&t=gkh6VNlJun96I6Ac-4) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-283&t=gkh6VNlJun96I6Ac-4) +![Forms](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-283&t=gkh6VNlJun96I6Ac-4) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-298&t=gkh6VNlJun96I6Ac-11) +![Input fields and selections](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-298&t=gkh6VNlJun96I6Ac-11) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-305&t=gkh6VNlJun96I6Ac-11) +![Buttons and actions](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-305&t=gkh6VNlJun96I6Ac-11) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-332&t=gkh6VNlJun96I6Ac-11) +![System feedback and status](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-332&t=gkh6VNlJun96I6Ac-11) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-370&t=gkh6VNlJun96I6Ac-11) +![Data display](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-370&t=gkh6VNlJun96I6Ac-11) + + +![Chat](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7974-3280&t=HrpSIFfB7yjzt741-4) -![](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-387&t=gkh6VNlJun96I6Ac-11) +![Charts](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=5186-387&t=gkh6VNlJun96I6Ac-11) @@ -171,6 +176,16 @@ import { CategoryButton } from '@site/src/components/CategoryButton'; | [Key value list](./key-value-list/index.mdx) | Key value lists organize and list a series of key value pairs. | | [KPI](./kpi/index.mdx) | KPIs display measured values together with a status indicator to help users interpret data. | +## Chat + +| Component | Description | +| :--------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- | +| [Chat](./chat/index.mdx) | Chat component for building conversational chatbot experiences. | +| [Chat input](./chat-input/index.mdx) | Chat inputs are used to compose and submit messages, attachments and follow-up actions in a conversational AI thread. | +| [User message](./user-message/index.mdx) | User messages display messages authored by the user in a chat thread. | +| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chats. | +| [Chat attachment](./chat-attachment/index.mdx) | Chat attachments are files attached on chat inputs and user messages. | + ## Charts | Component | Description | diff --git a/docs/components/user-message/code.mdx b/docs/components/user-message/code.mdx new file mode 100644 index 000000000..a9625a7bc --- /dev/null +++ b/docs/components/user-message/code.mdx @@ -0,0 +1,14 @@ +--- +doc-type: 'tab-item' +description: 'Code examples and API documentation for user message.' +--- + +import ChatUserMessagePlayground from '@site/docs/autogenerated/playground/chat-user-message.mdx'; +import PropsApi from '@site/docs/autogenerated/api/ix-chat-user-message/api.mdx'; + +# User message - Code +## Basic + + + + diff --git a/docs/components/user-message/guide.md b/docs/components/user-message/guide.md new file mode 100644 index 000000000..1ce4405ad --- /dev/null +++ b/docs/components/user-message/guide.md @@ -0,0 +1,38 @@ +--- +doc-type: 'tab-item' +description: 'Usage guide for user message.' +--- + +# User message - Usage + +User messages display a single prompt submitted by users in a conversational thread. We recommend using them to preserve what users asked, attached or edited so follow-up answers maintain context. + +![User message anatomy](https://www.figma.com/design/wEptRgAezDU1z80Cn3eZ0o/iX-Documentation-illustrations?node-id=7959-1370&t=8Rj3ErabF16Vm3lH-4) + +1. Attachments +2. Message +3. Actions + +## Options + +- **Attachments:** When users attach files with their prompts, show those [attachments](../chat-attachment) with the message to maintain context even after multiple turns in the conversation. +- **Message:** Show the original user input as the main message content without alterations. +- **Actions:** Add only the few actions users need for their own prompt, e.g. copy, edit or open a compact overflow menu. We recommend using subtle tertiary [icon buttons](../icon-button) so actions stay secondary to the message. + +## Behavior in context + +- **Interaction:** User messages keep the sent prompts visible as a chat history of user input. +- **Actions:** Message actions are only shown when users hover over the message with a mouse, tap the message on touch devices or reach the message with the `Tab` key (for Siemens AG see the [AI UX terminology guide](https://www.figma.com/design/lqjt9c5IzzwQ4eJ4nqG7Kv/AI-Terminology?node-id=1-9&t=8g9VIGSar5B6wwtC-1) on labelling actions). +- **Placement:** User messages are always placed on the right side of the [chat](../chat/) to visually distinguish them from [AI messages](../ai-message) on the left side. +- **Responsiveness:** User messages take from 45 to 80% of the chat's container width, depending on the viewport width. + +## Dos and Don’ts + +- Do offer only the few actions users need after sending, e.g. copy or edit +- Do keep the messages and attachments visible as a continuous chat + +## Related + +- [Chat](../chat) +- [AI message](../ai-message) +- [Chat input](../chat-input) diff --git a/docs/components/user-message/index.mdx b/docs/components/user-message/index.mdx new file mode 100644 index 000000000..623f3f728 --- /dev/null +++ b/docs/components/user-message/index.mdx @@ -0,0 +1,6 @@ +--- +doc-type: "tabs" +description: 'User messages display a single message authored by the user in a chat thread, e.g. conversational AI.' +title: 'User message' +deprecated: +--- diff --git a/docs/home/installation/angular.md b/docs/home/installation/angular.md index 61b9b743b..92306890a 100644 --- a/docs/home/installation/angular.md +++ b/docs/home/installation/angular.md @@ -51,9 +51,11 @@ Install `@siemens/ix`, `@siemens/ix-angular` and `@siemens/ix-icons` using a pac Import the design system styling in your global stylesheet (e.g.: `src/styles.scss`): ```css -@import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +@import '@siemens/ix/css/default.css'; ``` +The default stylesheet includes the Classic theme, foundation and common utilities for button groups, links, table classes and typography. Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet does not include a reset, body margin reset, the complete utility layer or legacy native form styles. See [Global styles](/docs/styles/global-styles) for the optional entry points. + Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system. ```html diff --git a/docs/home/installation/blazor.md b/docs/home/installation/blazor.md index 3adb3371e..e6090e54c 100644 --- a/docs/home/installation/blazor.md +++ b/docs/home/installation/blazor.md @@ -64,3 +64,5 @@ Add required `CSS` and `Javascript` packages into the `index.html` file. ``` + +The Blazor package currently exposes the bundled `siemens-ix.css` asset. This asset remains compatible while the package maintainers add the split `default`, foundation, theme and optional global stylesheets. When the split assets become available, prefer the default stylesheet and add global styles only when your application needs them. diff --git a/docs/home/installation/javascript.md b/docs/home/installation/javascript.md index d5d5f2a64..41fbd2cf4 100644 --- a/docs/home/installation/javascript.md +++ b/docs/home/installation/javascript.md @@ -62,7 +62,7 @@ In the following section we will describe how you can build an application with `main.js` ```javascript -import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +import '@siemens/ix/css/default.css'; import { defineCustomElements } from '@siemens/ix/loader'; import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-icons/loader'; @@ -71,3 +71,5 @@ import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-i defineCustomElements(); })(); ``` + +The default stylesheet includes the Classic theme, foundation and common utilities for button groups, links, table classes and typography. Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet does not include a reset, body margin reset, the complete utility layer or legacy native form styles. See [Global styles](/docs/styles/global-styles) for the optional entry points. diff --git a/docs/home/installation/react.md b/docs/home/installation/react.md index a22e46db4..f19be513b 100644 --- a/docs/home/installation/react.md +++ b/docs/home/installation/react.md @@ -36,9 +36,11 @@ Install `@siemens/ix`, `@siemens/ix-react` and `@siemens/ix-icons` using a packa ## Apply theme ```css -@import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +@import '@siemens/ix/css/default.css'; ``` +The default stylesheet includes the Classic theme, foundation and common utilities for button groups, links, table classes and typography. Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet does not include a reset, body margin reset, the complete utility layer or legacy native form styles. See [Global styles](/docs/styles/global-styles) for the optional entry points. + Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system. ```html diff --git a/docs/home/installation/vue.md b/docs/home/installation/vue.md index 4d362a350..225b0b683 100644 --- a/docs/home/installation/vue.md +++ b/docs/home/installation/vue.md @@ -38,7 +38,7 @@ Install `@siemens/ix`, `@siemens/ix-vue` and `@siemens/ix-icons` using a package ## Usage ```ts -import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +import '@siemens/ix/css/default.css'; import { createApp } from 'vue'; import { ixPlugin } from '@siemens/ix-vue'; @@ -51,6 +51,8 @@ app.use(ixPlugin); app.mount('#root'); ``` +The default stylesheet includes the Classic theme, foundation and common utilities for button groups, links, table classes and typography. Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet does not include a reset, body margin reset, the complete utility layer or legacy native form styles. See [Global styles](/docs/styles/global-styles) for the optional entry points. + Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system. ```html diff --git a/docs/home/migration/6_0_0/index.md b/docs/home/migration/6_0_0/index.md new file mode 100644 index 000000000..1b17fa4dc --- /dev/null +++ b/docs/home/migration/6_0_0/index.md @@ -0,0 +1,72 @@ +--- +sidebar_position: 0 +sidebar_title: Upgrade to V6 +title: Upgrade to V6 +doc-type: banner +description: Upgrade global CSS and Sass imports from Siemens Industrial Experience V5 to V6. +--- + +# Upgrade to V6.0.0 + +## Global CSS and Sass + +Version 6 makes component styles self-contained and changes the default stylesheet to include the Classic theme, component foundation and common utilities for button groups, links, table classes and typography. Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet no longer normalizes native elements, resets the body margin or styles native form controls. + +Use the canonical default import for components: + +```css +@import '@siemens/ix/css/default.css'; +``` + +The existing `@siemens/ix/dist/siemens-ix/siemens-ix.css` import path remains available and resolves to the same default bundle. It includes the selected utilities and foundation defaults, but not the reset, body margin reset, complete utility layer or legacy native form styles. + +See [Global styles](/docs/styles/global-styles) to select reset, base, scoped scrollbar, complete utility and legacy styles individually. + +### Preserve previous global behavior + +Combine the default and legacy stylesheets while migrating an application that depends on the previous global behavior: + +```css +@import '@siemens/ix/css/default.css'; +@import '@siemens/ix/css/legacy.css'; +``` + +Applications that keep the existing distribution path can restore the same behavior with: + +```css +@import '@siemens/ix/dist/siemens-ix/siemens-ix.css'; +@import '@siemens/ix/css/legacy.css'; +``` + +The legacy stylesheet restores native form classes, utilities, reset and base styles. It does not include a theme or component foundation. + +### Opt into scrollbar styles + +Foundation styles document scrollbars automatically. Add `disable-scrollbar` to `body` to disable that behavior. The scoped scrollbar stylesheet can then enable themed scrollbars for a selected subtree: + +```css +@import '@siemens/ix/css/scrollbar.css'; +``` + +```html + +
+ +
+ +``` + +### Update Sass imports + +Use the supported purpose-based Sass entry points: + +```scss +@use '@siemens/ix/scss/default'; +@use '@siemens/ix/scss/globals'; +@use '@siemens/ix/scss/tokens/system' as system; +@use '@siemens/ix/scss/tokens/legacy' as legacy; +``` + +Use the legacy token entry point only while migrating styles that depend on the previous Sass constants. The `@siemens/ix/scss/misc/common-variables` path remains available during Version 6 for generated corporate themes. + +Other deep files below `@siemens/ix/scss/*` are no longer exported. `@siemens/ix/scss/deprecated/components` and selected public mixins remain available for compatibility. diff --git a/docs/styles/global-styles.md b/docs/styles/global-styles.md new file mode 100644 index 000000000..876517401 --- /dev/null +++ b/docs/styles/global-styles.md @@ -0,0 +1,80 @@ +--- +sidebar_label: Global styles +title: Global styles +doc-type: 'banner' +description: 'Siemens Industrial Experience components are self-contained. Applications can opt into reset, base, scoped scrollbar, complete utility and legacy global styles when needed.' +--- + +# + +The default stylesheet contains the Classic theme, component foundation and common utilities: + +```ts +import '@siemens/ix/css/default.css'; +``` + +Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default entry also styles button groups, links, table classes and typography. Add further global styles deliberately so their selectors and browser defaults do not affect more of your application than intended. + +## Entry points + +| CSS | Sass | Includes | Global effect | +| -------------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | +| `@siemens/ix/css/default.css` | `@siemens/ix/scss/default` | Foundation, Classic light and dark themes, and button group, link, table and typography utilities | Provides the recommended setup, including selected native element and utility styles | +| `@siemens/ix/css/foundation.css` | `@siemens/ix/scss/foundation` | Variables and foundation behavior required by components | Sets the theme font stack and applies body typography, color, background and document scrollbars | +| `@siemens/ix/css/reset.css` | `@siemens/ix/scss/reset` | Normalized browser defaults and `box-sizing` | Styles native HTML elements globally | +| `@siemens/ix/css/base.css` | `@siemens/ix/scss/base` | System primary text color and body margin reset | Sets color on `[data-ix-theme]` and resets the `body` margin | +| `@siemens/ix/css/scrollbar.css` | `@siemens/ix/scss/scrollbar` | Scoped themed scrollbar colors and dimensions | Styles scrollbars only on an element with `data-ix-scrollbars` and its descendants | +| `@siemens/ix/css/utilities.css` | `@siemens/ix/scss/utilities` | Default utilities plus shadows and input groups | Adds the complete utility layer | +| `@siemens/ix/css/globals.css` | `@siemens/ix/scss/globals` | Reset, base, scoped scrollbar and complete utilities | Adds all current global styles, but no legacy native form styling | +| `@siemens/ix/css/legacy.css` | `@siemens/ix/scss/legacy` | Previous reset, base, utilities and native form styles | Restores the remaining global behavior from earlier releases without adding a theme or foundation | + +## Import order + +We recommend this order: + +1. Foundation and theme +2. Optional global styles +3. Application styles and overrides + +For the standard setup with all current global styles: + +```ts +import '@siemens/ix/css/default.css'; +import '@siemens/ix/css/globals.css'; +import './app.css'; +``` + +Foundation styles document scrollbars automatically. Add `disable-scrollbar` to `body` to disable that behavior. Import the scoped scrollbar stylesheet to enable themed scrollbars for a selected subtree: + +```ts +import '@siemens/ix/css/scrollbar.css'; +``` + +```html + + +
+ + +``` + +Import additional layers after the default stylesheet when needed. The complete utility entry extends the selected utilities already in `default.css` with shadow and input-group styles: + +```ts +import '@siemens/ix/css/default.css'; +import '@siemens/ix/css/scrollbar.css'; +import '@siemens/ix/css/utilities.css'; +``` + +## Migrating existing applications + +The previous monolithic stylesheet applied global native element and form styles. To preserve that behavior during migration, combine the new default and legacy stylesheets: + +```ts +import '@siemens/ix/css/default.css'; +import '@siemens/ix/css/legacy.css'; +``` + +`legacy.css` does not include a theme or the component foundation. It keeps native form classes such as `.ix-form-control` and `.ix-form-label`; foundation provides the body and scrollbar defaults. + +Use the canonical `@siemens/ix/css/*` and `@siemens/ix/scss/*` entry points. Deep internal Sass partials are no longer exported. diff --git a/docs/styles/theming/usage-developers.md b/docs/styles/theming/usage-developers.md index c0e7fca3e..4062dc315 100644 --- a/docs/styles/theming/usage-developers.md +++ b/docs/styles/theming/usage-developers.md @@ -2,7 +2,7 @@ sidebar_label: Developing with themes title: Developing with themes doc-type: 'banner' -description: 'Siemens Industrial Experience supports theming for all of its components. Everyone can use the two embedded themes that already ship with Siemens Industrial Experience: Classic light (theme-classic-light) and Classic dark (theme-classic-dark). You can also create your own themes to customize the design system for your own brand. Siemens AG applications should utilize the exclusive Siemens AG Corporate Brand Theme.' +description: 'Siemens Industrial Experience supports theming for all of its components. Everyone can use the embedded Classic light and Classic dark themes. You can also create themes to customize the design system for your own brand. Siemens AG applications should utilize the exclusive Siemens AG Corporate Brand Theme.' --- import ThemeSwitcher from '@site/docs/autogenerated/playground/theme-switcher.mdx'; @@ -29,26 +29,60 @@ To choose a theme set the `data-ix-theme` attribute of the `` tag to the t ``` -## Applying only core functionalities without preloading themes +## Recommended setup -Importing `siemens-ix-core.css` will only load core related functionalities, without preloading any theme or bootstrap. +The default stylesheet combines the component foundation and common utilities with the Classic light and dark themes: -You can load a specific theme by importing the corresponding CSS file. +```ts +import '@siemens/ix/css/default.css'; +``` + +Foundation applies the SiemensSans Pro font stack to `[data-ix-theme]` and sets body typography, text color, background and document-wide scrollbar styles. The default stylesheet also includes utilities for button groups, links, table classes and typography. It does not include a reset, body margin reset, the complete utility layer or legacy native form styles. + +## Loading foundation and themes separately + +Import the foundation and theme files separately when you provide a custom theme or only need selected Classic color schemas: + +```ts +import '@siemens/ix/css/foundation.css'; + +import '@siemens/ix/css/theme/classic-light.css'; +import '@siemens/ix/css/theme/classic-dark.css'; +``` + +The Sass entry points provide the foundation and Classic themes separately: -**_Import CSS_** +```scss +@use '@siemens/ix/scss/foundation'; +@use '@siemens/ix/scss/theme/classic'; +``` + +Add `@siemens/ix/scss/utilities` when this custom composition also needs the utility layer. + +Use the light or dark Sass theme entry point when you only need one color schema: + +```scss +@use '@siemens/ix/scss/theme/classic/light'; +// or +@use '@siemens/ix/scss/theme/classic/dark'; +``` -```tsx -// Load 3rd Party libraries -import 'bootstrap/dist/css/bootstrap.css'; +System tokens are available through a stable Sass entry point: -// Load the core parts -import '@siemens/ix/dist/siemens-ix/siemens-ix-core.css'; +```scss +@use '@siemens/ix/scss/tokens/system' as system; -// Load theme -import '@siemens/ix/dist/siemens-ix/theme/classic-light.css'; -import '@siemens/ix/dist/siemens-ix/theme/classic-dark.css'; +.my-element { + color: system.$si-sys-text-primary; +} ``` +Use `@siemens/ix/scss/tokens/legacy` only when existing application styles still depend on legacy Sass constants. The previous `@siemens/ix/scss/misc/common-variables` path remains available during the Version 6 migration period for generated corporate themes. Other deep `misc/*` imports are not public API. + +Deep internal partials are not public API. Use the documented Sass entry points, `@siemens/ix/scss/deprecated/components` for retained compatibility or the supported mixins instead. + +See [Global styles](../global-styles.md) for reset, body, scrollbar, utility and legacy imports. + ## Working with themes during runtime diff --git a/docs/styles/typography/code.mdx b/docs/styles/typography/code.mdx index 22442d13a..c71dbe81c 100644 --- a/docs/styles/typography/code.mdx +++ b/docs/styles/typography/code.mdx @@ -8,36 +8,36 @@ import Api from '@site/docs/autogenerated/api/ix-typography/api.mdx'; ## Typography component -We use utility CSS classes to style text. Theme changes will apply to texts automatically (e.g. change color). The `ix-typography` component allows consistent formatting with easy to adapt properties. +The `ix-typography` component provides consistent text formatting without relying on utility classes. Theme changes apply to its text automatically. -## Mixins +## Utility classes -We provide additional SCSS mixins which can be used to create valid custom typography -classes. +The default stylesheet includes `.typography-*` classes for native HTML elements. If you load the foundation and a theme separately instead, import the utility stylesheet before using the classes: + +```css +@import '@siemens/ix/css/utilities.css'; +``` + +```html +Heading text +``` + +The Sass entry point generates the same utilities: ```scss -@import '@siemens/ix/scss/mixins/font'; +@use '@siemens/ix/scss/utilities'; +``` + +Use a supported font mixin when you need a custom class without generating all utilities: + +```scss +@use '@siemens/ix/scss/mixins/fonts'; .my-class-name { - @include typography-h3; + @include fonts.typography-h3; } ``` -```html - - Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat tristique. - Velit ipsum donec pulvinar erat donec turpis ultrices. Scelerisque pharetra - sed sapien diam lorem. Risus quis in faucibus tempor. Hendrerit at cursus - suspendisse neque adipiscing at at eu. - - - - - Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat tristique. - Velit ipsum donec pulvinar erat donec turpis ultrices. Scelerisque pharetra - sed sapien diam lorem. Risus quis in faucibus tempor. Hendrerit at cursus - suspendisse neque adipiscing at at eu. - -``` +See [Global styles](../global-styles.md) for the side effects of the complete utility layer. diff --git a/docusaurus.config.ts b/docusaurus.config.ts index d6835060e..48cc35fe9 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -54,10 +54,8 @@ function getSiemensSansFontFaceHeadTag() { }; } const customCss = [ - './node_modules/@siemens/ix/dist/siemens-ix/theme/classic-dark.css', - './node_modules/@siemens/ix/dist/siemens-ix/theme/classic-light.css', + require.resolve('@siemens/ix/css/default.css'), './src/scss/custom.scss', - './node_modules/@siemens/ix/scss/misc/_common-variables.scss', ]; let withBrandTheme = false; @@ -68,11 +66,9 @@ try { console.log('Found optionalDependency @siemens-ix/corporate-theme.'); customCss.push(path); customCss.push('./src/scss/prod.scss'); - customCss.push('./src/scss/classic-theme.scss'); withBrandTheme = true; } catch (e) { console.warn('optionalDependency @siemens-ix/corporate-theme not found!'); - customCss.push('./src/scss/classic-theme.scss'); } const brokenLinks = 'throw'; diff --git a/sidebars.ts b/sidebars.ts index 3f2669f88..a50d46459 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -66,6 +66,7 @@ const sidebars: SidebarsConfig = { className: 'doc-sidebar-item-bold', label: 'Migration and upgrade', items: [ + 'home/migration/6_0_0/index', 'home/migration/5_0_0/index', 'home/migration/4_0_0/index', 'home/migration/3_0_0/index', @@ -1147,6 +1148,85 @@ const sidebars: SidebarsConfig = { type: 'category', className: 'doc-sidebar-item-bold', + label: 'Chat', + items: [ + createTabItem({ + id: 'components/chat/index', + label: 'Chat', + items: [ + { + id: 'components/chat/guide', + label: 'Usage', + }, + { + id: 'components/chat/code', + label: 'Code', + }, + ], + }), + createTabItem({ + id: 'components/chat-input/index', + label: 'Chat input', + items: [ + { + id: 'components/chat-input/guide', + label: 'Usage', + }, + { + id: 'components/chat-input/code', + label: 'Code', + }, + ], + }), + createTabItem({ + id: 'components/user-message/index', + label: 'User message', + items: [ + { + id: 'components/user-message/guide', + label: 'Usage', + }, + { + id: 'components/user-message/code', + label: 'Code', + }, + ], + }), + createTabItem({ + id: 'components/ai-message/index', + label: 'AI message', + items: [ + { + id: 'components/ai-message/guide', + label: 'Usage', + }, + { + id: 'components/ai-message/code', + label: 'Code', + }, + ], + }), + createTabItem({ + id: 'components/chat-attachment/index', + label: 'Chat attachment', + items: [ + { + id: 'components/chat-attachment/guide', + label: 'Usage', + }, + { + id: 'components/chat-attachment/code', + label: 'Code', + }, + ], + }), + ], + collapsed: true, + }, + { + type: 'category', + className: 'doc-sidebar-item-bold', + label: 'Charts', items: [ { @@ -1267,6 +1347,7 @@ const sidebars: SidebarsConfig = { 'styles/shadows', 'styles/elevation', 'styles/animation', + 'styles/global-styles', { type: 'category', className: 'doc-sidebar-item-bold', diff --git a/src/lib/stackblitz-global-css.test.ts b/src/lib/stackblitz-global-css.test.ts new file mode 100644 index 000000000..384893f1f --- /dev/null +++ b/src/lib/stackblitz-global-css.test.ts @@ -0,0 +1,45 @@ +import assert from 'node:assert/strict'; +import test from 'node:test'; +import { prepareGlobalCss } from './stackblitz-global-css'; + +const generatedGlobalCss = `@import '@siemens/ix/css/default.css'; +@import '@siemens/ix/css/legacy.css'; + +html { + height: 100%; +} +`; + +test('#prepareGlobalCss removes generated IX style imports', () => { + assert.equal( + prepareGlobalCss(generatedGlobalCss, 'button'), + `html { + height: 100%; +} +` + ); +}); + +test('#prepareGlobalCss opts table examples into utilities', () => { + assert.equal( + prepareGlobalCss(generatedGlobalCss, 'html-table'), + `@import '@siemens/ix/css/utilities.css'; + +html { + height: 100%; +} +` + ); +}); + +test('#prepareGlobalCss opts native form examples into legacy styles', () => { + assert.equal( + prepareGlobalCss(generatedGlobalCss, 'custom-field-validation'), + `@import '@siemens/ix/css/legacy.css'; + +html { + height: 100%; +} +` + ); +}); diff --git a/src/lib/stackblitz-global-css.ts b/src/lib/stackblitz-global-css.ts new file mode 100644 index 000000000..1860ac1af --- /dev/null +++ b/src/lib/stackblitz-global-css.ts @@ -0,0 +1,26 @@ +const legacyStyleExamples = new Set([ + 'custom-field-validation', + 'key-value-list-with-custom-value', + 'key-value-with-custom-value', +]); + +const utilityStyleExamples = new Set(['html-table', 'html-table-striped']); + +export function prepareGlobalCss(globalCss: string, exampleName: string) { + const withoutIxStyles = globalCss + .replace( + /^@import\s+['"]@siemens\/ix\/(?:css\/(?:default|foundation|reset|base|scrollbar|utilities|globals|legacy)\.css|dist\/siemens-ix\/siemens-ix\.css)['"];\s*$/gm, + '' + ) + .trimStart(); + + if (legacyStyleExamples.has(exampleName)) { + return `@import '@siemens/ix/css/legacy.css';\n\n${withoutIxStyles}`; + } + + if (utilityStyleExamples.has(exampleName)) { + return `@import '@siemens/ix/css/utilities.css';\n\n${withoutIxStyles}`; + } + + return withoutIxStyles; +} diff --git a/src/lib/stackblitz.ts b/src/lib/stackblitz.ts index 6316b0a8f..dcfdab13a 100644 --- a/src/lib/stackblitz.ts +++ b/src/lib/stackblitz.ts @@ -17,6 +17,7 @@ import { } from './code-runtime'; import sdk from '@stackblitz/sdk'; import { docusaurusFetch } from './docusaurus-fetching'; +import { prepareGlobalCss } from './stackblitz-global-css'; function openProject( name: string, @@ -335,8 +336,9 @@ export async function openStackBlitz({ ); if (framework === 'react') { - const globalCss = await docusaurusFetch( - `${snippetBaseUrl}/react/global.css` + const globalCss = prepareGlobalCss( + await docusaurusFetch(`${snippetBaseUrl}/react/global.css`), + name ); sourceFiles['styles/global.css'] = globalCss; @@ -349,8 +351,9 @@ export async function openStackBlitz({ } if (framework === 'angular') { - const globalCss = await docusaurusFetch( - `${snippetBaseUrl}/angular/global.css` + const globalCss = prepareGlobalCss( + await docusaurusFetch(`${snippetBaseUrl}/angular/global.css`), + name ); sourceFiles['styles.css'] = globalCss; @@ -363,8 +366,9 @@ export async function openStackBlitz({ } if (framework === 'angular_standalone') { - const globalCss = await docusaurusFetch( - `${snippetBaseUrl}/angular/global.css` + const globalCss = prepareGlobalCss( + await docusaurusFetch(`${snippetBaseUrl}/angular/global.css`), + name ); sourceFiles['styles.css'] = globalCss; @@ -377,8 +381,9 @@ export async function openStackBlitz({ } if (framework === 'html') { - const globalCss = await docusaurusFetch( - `${snippetBaseUrl}/html/global.css` + const globalCss = prepareGlobalCss( + await docusaurusFetch(`${snippetBaseUrl}/html/global.css`), + name ); sourceFiles['styles/global.css'] = globalCss; @@ -391,7 +396,10 @@ export async function openStackBlitz({ } if (framework === 'vue') { - const globalCss = await docusaurusFetch(`${snippetBaseUrl}/vue/global.css`); + const globalCss = prepareGlobalCss( + await docusaurusFetch(`${snippetBaseUrl}/vue/global.css`), + name + ); sourceFiles['styles/global.css'] = globalCss; return openVueStackBlitz(runtimeBaseUrl, sourceFiles, name, libraryVersion); diff --git a/src/pages/index.tsx b/src/pages/index.tsx index a579b6b07..61a08e448 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,7 +4,6 @@ import BrowserOnly from '@docusaurus/BrowserOnly'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import { iconArrowRight, iconChevronDown, @@ -13,7 +12,7 @@ import { import { IxIcon } from '@siemens/ix-react'; import Layout from '@theme/Layout'; import clsx from 'clsx'; -import React, { useEffect } from 'react'; +import React from 'react'; import styles from './index.module.css'; import Link from '@docusaurus/Link'; @@ -102,15 +101,6 @@ function Headline({ } function Homepage() { - const context = useDocusaurusContext(); - - useEffect(() => { - const withBrandTheme = context.siteConfig.customFields.withBrandTheme; - document.body.className = withBrandTheme - ? 'theme-brand-dark' - : 'theme-classic-dark'; - }, [context]); - return (
diff --git a/src/scss/classic-theme.scss b/src/scss/classic-theme.scss deleted file mode 100644 index 43de5dfdd..000000000 --- a/src/scss/classic-theme.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* - * COPYRIGHT (c) Siemens AG 2018-2025 ALL RIGHTS RESERVED. - */ -@use '@siemens/ix/scss/theme/classic/light/variables' as light; -@use '@siemens/ix/scss/theme/classic/dark/variables' as dark; - -.color-table-classic-dark { - @include dark.setVars; -} - -.color-table-classic-light { - @include light.setVars; -} diff --git a/src/scss/components/_input.scss b/src/scss/components/_input.scss deleted file mode 100644 index 8db8cdad8..000000000 --- a/src/scss/components/_input.scss +++ /dev/null @@ -1,13 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2025 Siemens AG - * - * SPDX-License-Identifier: MIT - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ -@use '@siemens/ix/scss/mixins/input'; - -@include input.label(''); -@include input.form(''); -@include input.element-form(''); diff --git a/src/scss/custom.scss b/src/scss/custom.scss index a570abef0..d02392be3 100644 --- a/src/scss/custom.scss +++ b/src/scss/custom.scss @@ -3,9 +3,6 @@ * bundles Infima by default. Infima is a CSS framework designed to * work well for content-centric websites. */ -@use '@siemens/ix/scss/theme/core/common' as common; -@use '@siemens/ix/scss/theme/core/components' as components; - @use './overwrite/doc-sidebar'; @use './overwrite/navbar'; @use './overwrite/doc-generated-index-page'; @@ -22,7 +19,6 @@ @use './components/docsLayoutWrapper'; @use './components/apiTable'; @use './components/navLink'; -@use './components/input'; @use './components/sidebarItem'; @use './components/dosAndDonts'; @@ -32,11 +28,6 @@ $font-family: 'Siemens Sans', Arial, Helvetica, sans-serif; -body { - @include common.setVars; - @include components.setComponentVars; -} - #__docusaurus { color: var(--theme-color-std-text); diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4229.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4229.png index b47afb826..42f0078b4 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4229.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4229.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4231.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4231.png index 2de0d360d..e855b6489 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4231.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4231.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4233.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4233.png index 172206d91..69225990f 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4233.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4233.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4236.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4236.png index 5ddf7c3c5..e25a1ed62 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4236.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4236.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4239.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4239.png index 7c2d11d37..fad55fcdb 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4239.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4239.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4246.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4246.png index b607d1bc5..a4acb2af6 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4246.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4246.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4253.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4253.png index 95c7add87..9a3cd015e 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4253.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4253.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4256.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4256.png index 980452eda..7780beb63 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4256.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4256.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4259.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4259.png index 4bac3b4bb..a17d7553b 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4259.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4259.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4264.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4264.png index 9f644bcc8..8bba9a73b 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4264.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4264.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4269.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4269.png index be7d003fe..0fc1ba79d 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4269.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4269.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4276.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4276.png index ca1c992d8..6f06e25e4 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4276.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4276.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4279.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4279.png index 95247eed4..2d10f4d7f 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4279.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4279.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4282.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4282.png index ab5cfb3d5..834acbe3a 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4282.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4282.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4286.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4286.png index d41f5452c..6a3caea8c 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4286.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4286.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4288.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4288.png index 78ef959d0..bc070e99f 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4288.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4288.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4291.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4291.png index c5a845e2a..034f6df7f 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4291.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4291.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4294.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4294.png index 1507757b7..d56c485f6 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4294.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4294.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4297.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4297.png index 94094e8fc..adc7d984d 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4297.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4297.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4300.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4300.png index 97c911228..b735a0800 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4300.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4300.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4303.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4303.png index 0412df9d3..9ba9d5f27 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4303.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4303.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4306.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4306.png index c00acd55d..fc1894f91 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4306.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4306.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4309.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4309.png index 85c7895d1..fa2de045e 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4309.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4309.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4312.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4312.png index e27a43b85..510a33746 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4312.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4312.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4315.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4315.png index c7a099a44..cd29a9969 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4315.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4315.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4318.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4318.png index e124fe58b..10decdb70 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4318.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4318.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4327.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4327.png index dda2f61a2..dab1cd4c3 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4327.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4327.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4329.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4329.png index 0412df9d3..cb5f52b2b 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4329.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4329.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4332.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4332.png index 7338d60dc..9a8fd107f 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4332.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4332.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4341.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4341.png index 28b9ef48c..7facf9535 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4341.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4341.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4344.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4344.png index 626b20919..9dbb893d6 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4344.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4344.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4347.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4347.png index 42e940363..afad760ab 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4347.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4347.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4356.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4356.png index bc3b2702f..65dea81a3 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4356.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4356.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4359.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4359.png index daa9a7ecf..84c9a9b7e 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4359.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4359.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4361.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4361.png index d66c5bc57..381af48c0 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4361.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4361.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4363.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4363.png index f78ca41e5..b4d8f0ec4 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4363.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4363.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4365.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4365.png index 0f5ca39a0..54d465541 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4365.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4365.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4368.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4368.png index 30275ab27..b199b6d26 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4368.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4368.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4370.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4370.png index afc58eb1d..d60735c59 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4370.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4370.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4373.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4373.png index 3b70c8eab..e00cd5601 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4373.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4373.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4376.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4376.png index 2f8e9baea..64b005583 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4376.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4376.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4381.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4381.png index 7c08ba440..fac236a21 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4381.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4381.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4384.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4384.png index d2769ca13..aad44ef25 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4384.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4384.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4387.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4387.png index e8f826346..2db7bb4b8 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4387.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4387.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4390.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4390.png index 22de17c3b..65219736e 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4390.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4390.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4393.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4393.png index 22f416f6f..33ea20220 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4393.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4393.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4396.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4396.png index 4637d1be5..3e2f00f85 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4396.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4396.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4401.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4401.png index c00acd55d..6ce0ac775 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4401.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4401.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4404.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4404.png index 85c7895d1..ae8b29698 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4404.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4404.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4407.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4407.png index 800ea4fd8..1943ebee3 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4407.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4407.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4410.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4410.png index e74a4b30d..f8209e463 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4410.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4410.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4412.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4412.png index 46fc7eecc..96da9c5e2 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4412.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4412.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4414.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4414.png index b173cf7a0..246bbbfbb 100644 Binary files a/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4414.png and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_3218_4414.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_2809.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_2809.png new file mode 100644 index 000000000..7dec12c5f Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_2809.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7020.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7020.png new file mode 100644 index 000000000..8d29a8b80 Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7020.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7427.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7427.png new file mode 100644 index 000000000..e91a8f6a0 Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7940_7427.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_1370.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_1370.png new file mode 100644 index 000000000..efbf54259 Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_1370.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_520.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_520.png new file mode 100644 index 000000000..b7d75d6ea Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7959_520.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7962_804.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7962_804.png new file mode 100644 index 000000000..abbb8b66c Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7962_804.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7970_230.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7970_230.png new file mode 100644 index 000000000..ddf854eaf Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7970_230.png differ diff --git a/static/figma/wEptRgAezDU1z80Cn3eZ0o_7974_3280.png b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7974_3280.png new file mode 100644 index 000000000..a8c9ebbae Binary files /dev/null and b/static/figma/wEptRgAezDU1z80Cn3eZ0o_7974_3280.png differ diff --git a/static/runtime/angular-standalone/src/main.ts b/static/runtime/angular-standalone/src/main.ts index 60bf9f1b5..4f3dfc251 100644 --- a/static/runtime/angular-standalone/src/main.ts +++ b/static/runtime/angular-standalone/src/main.ts @@ -1,3 +1,4 @@ +import '@siemens/ix/css/default.css'; import { bootstrapApplication } from "@angular/platform-browser"; import { App } from "./app/app"; import { diff --git a/static/runtime/angular/src/main.ts b/static/runtime/angular/src/main.ts index c58dc05cb..317151e49 100644 --- a/static/runtime/angular/src/main.ts +++ b/static/runtime/angular/src/main.ts @@ -1,3 +1,4 @@ +import '@siemens/ix/css/default.css'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; diff --git a/static/runtime/html/src/main.js b/static/runtime/html/src/main.js index 35ae25fb5..1b26c9447 100644 --- a/static/runtime/html/src/main.js +++ b/static/runtime/html/src/main.js @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import '@siemens/ix/css/default.css'; import './styles/global.css'; import { defineCustomElements } from '@siemens/ix/loader'; import { defineCustomElements as defineIconsCustomElements } from '@siemens/ix-icons/loader'; diff --git a/static/runtime/react/src/main.tsx b/static/runtime/react/src/main.tsx index 3ec559fd7..219027625 100644 --- a/static/runtime/react/src/main.tsx +++ b/static/runtime/react/src/main.tsx @@ -1,3 +1,4 @@ +import '@siemens/ix/css/default.css'; import './styles/global.css'; import React from 'react'; diff --git a/static/runtime/vue/src/main.ts b/static/runtime/vue/src/main.ts index 95b0b18e9..6e41277d7 100644 --- a/static/runtime/vue/src/main.ts +++ b/static/runtime/vue/src/main.ts @@ -7,6 +7,7 @@ * LICENSE file in the root directory of this source tree. */ +import '@siemens/ix/css/default.css'; import './styles/global.css'; import { ixPlugin } from '@siemens/ix-vue';