-
Notifications
You must be signed in to change notification settings - Fork 140
feat(core): eliminate global styles #2632
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
danielleroux
wants to merge
69
commits into
main
Choose a base branch
from
feat/remove-global-css
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 64 commits
Commits
Show all changes
69 commits
Select commit
Hold shift + click to select a range
5ac4f65
feat(core): remove global style dependencies
danielleroux 1bd62f0
fix styles
danielleroux 5cb76d0
centralize component design tokens
danielleroux 8ecabe9
update type file
danielleroux 5db4d3f
load component colors inside foundation layer
danielleroux 6331bdb
fix root missing issue
danielleroux 2fd31bd
add fallback variables
danielleroux b5389e5
use dark light switch
danielleroux aeff283
reduce card scss file into vars
danielleroux b61b3a0
fix: add new theme variables
danielleroux 53ecf70
update snapshots
danielleroux e26d05e
update aggrid snapshots
danielleroux 0abd2be
color adjustments
danielleroux db16e1a
test: update tokens
danielleroux 5f908f9
update input mixins
danielleroux 8d67a51
update to latest tokens
danielleroux 291c6ae
update tokens
danielleroux 7e8707b
update action-card
danielleroux 982c7ec
add missing component tokens
danielleroux 7ab18e2
update legacy tokens
danielleroux a344dad
migrate missing token matches
danielleroux d240d8d
refactor(core): migrate badge system tokens
danielleroux b48b52c
refactor(core): update component theme tokens
danielleroux c342766
add theme composition
danielleroux 90742ff
remove wrong migrated slider tokens
danielleroux ae6f515
fix blind colors same icon color then text
danielleroux 44c33ea
fix wrong named variables
danielleroux 622cda9
fix naming for all component colors
danielleroux 5beafa9
refactor(core): use purpose-based component token names
danielleroux ad1b859
fix blind critical color
danielleroux f57ded5
fix broken image
danielleroux 4ab1764
fix slider; update range images; fix step
danielleroux f228cec
update workflow snapshots
danielleroux 8ab3b47
inherit host styles to prevent accessibility overlaycheck
danielleroux 3325578
fix wrong text color of card
danielleroux 35c1bfc
update snaps
danielleroux 3f637b8
update typescript dyanmic values
danielleroux 5ae9f47
update message-bar
danielleroux 40d7d6f
add scss type safe sys tokens
danielleroux 4c8ed73
add storybook
danielleroux 54f0348
replace component tokens
danielleroux 8c845a9
remove --theme prefix
danielleroux 2329792
remove old theme tokens
danielleroux d9efd72
remove old theme tokens
danielleroux f82e3cd
simplyfy mixins folder
danielleroux 94fd439
refactoring scss folder
danielleroux a154875
Update aggrid theme
danielleroux d8eda1f
reapply scrollbar and font/color as global base styles
danielleroux bcb63d4
remove temp migration skill
danielleroux 75b038f
adjust changesets
danielleroux b31df5f
update snapshots after rebase main
danielleroux a229496
update ref tokens; typography tokens
danielleroux e1a597c
fix badge findings
danielleroux 77f1997
Merge origin/main into feat/remove-global-css
danielleroux d37e66a
refactor(core): normalize Sass token module names
danielleroux 2d4996a
remove legacy tokens from test-apps
danielleroux 00856ad
add testing for different entry point
danielleroux 4c52a05
Merge origin/main into feat/remove-global-css
danielleroux c15e20c
fix failing tests
danielleroux 017a1d9
fix issue of broken classic tokens
danielleroux d655283
review comment, remove prefix
danielleroux 44f714d
update snapshot
danielleroux b6657bf
update menu shadow effect to match sys tokens
danielleroux 39c7048
fix(menu): restore visual regression coverage
danielleroux 543dce2
refactor datepicker tokens
danielleroux e816dc8
update review comments
danielleroux 9223610
disable accessibility rule for menu scroll container
danielleroux ba5d295
Merge remote-tracking branch 'origin/main' into daniel-leroux-preview…
danielleroux 5b25518
update snapshots
danielleroux File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@siemens/ix-aggrid': patch | ||
| --- | ||
|
|
||
| Keep the IX AG Grid theme compatible with the updated IX design-token output by replacing removed component aliases with supported system and common tokens. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| --- | ||
| '@siemens/ix': major | ||
| --- | ||
|
|
||
| Change the default IX stylesheet to include the classic theme, foundation styles, and the button-group, link, table, and typography utilities. Native element normalization, the body margin reset, scoped scrollbars, utility shadows and input-group styles, and native form styles are no longer applied by default. Import `@siemens/ix/css/globals.css` for the complete supported global styles, or combine `@siemens/ix/css/default.css` with `@siemens/ix/css/legacy.css` to retain the previous behavior while migrating. | ||
|
|
||
| Replace deep Sass imports with the explicit foundation, global, theme, token, mixin, or deprecated compatibility entry points. Unsupported legacy component modules and implementation-specific mixins have been removed; migration guidance is available in `BREAKING_CHANGES/v6.md`. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@siemens/ix': minor | ||
| --- | ||
|
|
||
| Expose component-scoped `--ix-*` CSS custom properties for `ix-action-card`, `ix-chat-input`, `ix-chat-ai-message`, and `ix-chat-user-message`, allowing their appearance and interaction states to be customized without overriding internal selectors. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| '@siemens/ix-echarts': major | ||
| --- | ||
|
|
||
| `getComputedCSSProperty` no longer adds the `--theme-` prefix. Pass the complete CSS custom-property name, including the leading `--`, and replace legacy theme tokens with their SI Theme 6 system-token equivalents. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| --- | ||
| '@siemens/ix': major | ||
| --- | ||
|
|
||
| Rename Siemens system custom properties from `--theme-si-sys-*` to `--si-sys-*` and reference custom properties from `--theme-si-classic-ref-*` or `--theme-si-ref-*` to `--si-ref-*`. | ||
|
|
||
| Generated `--theme-<component>-*` aliases are no longer included in the standard IX styles and no longer customize migrated components. Replace component overrides with the corresponding scoped `--ix-*` custom properties. The `@siemens/ix/scss/deprecated/components` Sass mixin remains available for downstream styles that temporarily require the generated aliases. | ||
|
|
||
| Color-valued component properties, including `iconColor` and event-list `itemColor`, now require a complete CSS custom-property name such as `--si-sys-text-danger`. The exported `NotificationColor` values include the leading `--`. | ||
|
|
||
| Components now use the SI Theme 6 system mappings. Warning, critical, and neutral states and component shadows can therefore render differently. See `BREAKING_CHANGES/v6.md` for migration guidance. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,228 @@ | ||
| # Breaking Changes V6 | ||
|
|
||
| This document lists breaking changes introduced in Siemens Industrial Experience V6. | ||
|
|
||
| ## Siemens design token custom-property names | ||
|
|
||
| Siemens system and reference design tokens no longer use the `--theme-` prefix. | ||
| This applies to color, effects, shadows, and typography tokens. | ||
|
|
||
| | Before | After | | ||
| | ------------------------------------------ | ------------------------------------ | | ||
| | `--theme-si-sys-text-primary` | `--si-sys-text-primary` | | ||
| | `--theme-si-sys-typography-body` | `--si-sys-typography-body` | | ||
| | `--theme-si-ref-color-main-blue-500` | `--si-ref-color-main-blue-500` | | ||
| | `--theme-si-ref-typography-font-size-body` | `--si-ref-typography-font-size-body` | | ||
|
|
||
| No aliases are emitted for the old names. Replace direct CSS declarations, | ||
| references, and overrides: | ||
|
|
||
| ```css | ||
| /* Before */ | ||
| color: var(--theme-si-sys-text-primary); | ||
|
|
||
| /* After */ | ||
| color: var(--si-sys-text-primary); | ||
| ``` | ||
|
|
||
| The public Sass variable names remain unchanged: | ||
|
danielleroux marked this conversation as resolved.
Outdated
|
||
|
|
||
| ```scss | ||
| @use '@siemens/ix/scss/tokens/system' as sys; | ||
|
|
||
| color: sys.$si-sys-text-primary; | ||
| ``` | ||
|
|
||
| ## ECharts computed CSS properties | ||
|
|
||
| The `getComputedCSSProperty` helper exported by `@siemens/ix-echarts` no longer | ||
| adds the `--theme-` prefix to its argument. It now resolves the supplied CSS | ||
| custom-property name without modification. | ||
|
|
||
| Pass the complete SI Theme 6 system-token name, including the leading `--`: | ||
|
|
||
| ```ts | ||
| // Before: resolves --theme-color-primary | ||
| getComputedCSSProperty('color-primary'); | ||
|
|
||
| // After | ||
| getComputedCSSProperty('--si-sys-background-accent'); | ||
| ``` | ||
|
|
||
| Replace every legacy short token name with its mapped system token. Select the | ||
| appropriate background, border, or text token for conditional mappings based on | ||
| how ECharts renders the value. | ||
|
|
||
| ## Generated component token aliases | ||
|
|
||
| Standard IX foundation and theme CSS no longer emits generated | ||
| `--theme-<component>-*` custom properties such as | ||
| `--theme-btn-primary--background`. IX components and global style utilities now | ||
| declare scoped, purpose-based `--ix-*` properties where they are used. | ||
|
|
||
| Replace component overrides with the corresponding `--ix-*` property on the | ||
| component: | ||
|
|
||
| ```css | ||
| /* Before */ | ||
| [data-ix-theme] { | ||
| --theme-btn-primary--background: var(--si-sys-background-accent); | ||
| } | ||
|
|
||
| /* After */ | ||
| ix-button { | ||
| --ix-button-primary--background: var(--si-sys-background-accent); | ||
| } | ||
| ``` | ||
|
|
||
| The generated aliases remain available as a temporary, opt-in Sass layer for | ||
| downstream styles that still reference them: | ||
|
|
||
| ```scss | ||
| @use '@siemens/ix/scss/deprecated/components' as deprecated; | ||
|
|
||
| [data-ix-theme] { | ||
| @include deprecated.setComponentVars; | ||
| } | ||
| ``` | ||
|
|
||
| This deprecated mixin restores the alias declarations for downstream CSS. It | ||
| does not reconnect those aliases to migrated IX components; component | ||
| customization must use the component's `--ix-*` properties. | ||
|
|
||
| ## Global CSS and Sass entry points | ||
|
|
||
| The default `siemens-ix.css` stylesheet now contains the combined classic theme | ||
| and IX foundation. Foundation applies body typography, text color, background, | ||
| and document-wide scrollbar styles. It does not normalize native HTML elements, | ||
| reset the body margin, style native links or form controls, or provide utility | ||
| classes. | ||
|
|
||
| Use the canonical default import for self-contained IX 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 foundation | ||
| body and scrollbar defaults but not the previous reset, utility, or native form | ||
| styles. | ||
|
|
||
| Global application styles are available as explicit opt-ins: | ||
|
|
||
| | Import | Side effects | | ||
| | -------------------------------- | ------------------------------------------------------------ | | ||
| | `@siemens/ix/css/foundation.css` | Required variables, body presentation, and global scrollbars | | ||
| | `@siemens/ix/css/reset.css` | Native element normalization and box sizing | | ||
| | `@siemens/ix/css/base.css` | Theme font/color inheritance and body margin reset | | ||
| | `@siemens/ix/css/scrollbar.css` | Scoped scrollbars below `[data-ix-scrollbars]` | | ||
| | `@siemens/ix/css/utilities.css` | Typography, links, tables, groups, and shadows | | ||
| | `@siemens/ix/css/globals.css` | Reset, base, scrollbar, and utilities | | ||
| | `@siemens/ix/css/legacy.css` | Previous native form and global style behavior | | ||
|
|
||
| Import foundation before a separately selected theme: | ||
|
|
||
| ```css | ||
| @import '@siemens/ix/css/foundation.css'; | ||
| @import '@siemens/ix/css/theme/classic-light.css'; | ||
| ``` | ||
|
|
||
| To retain the previous aggregate behavior while migrating, combine the new | ||
| default and legacy bundles: | ||
|
|
||
| ```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'; | ||
| ``` | ||
|
|
||
| Foundation styles document scrollbars automatically. Add `disable-scrollbar` to | ||
|
danielleroux marked this conversation as resolved.
Outdated
|
||
| `body` to disable that behavior. The scoped scrollbar stylesheet can then | ||
| enable themed scrollbars for a selected subtree: | ||
|
|
||
| ```html | ||
| <body class="disable-scrollbar"> | ||
| <main data-ix-scrollbars> | ||
| <!-- Scrollable descendants use IX scrollbar styling. --> | ||
| </main> | ||
| </body> | ||
| ``` | ||
|
|
||
| The package no longer exports every file below `@siemens/ix/scss/*`. Supported | ||
| Sass entry points are now explicit and mirror the CSS bundles: | ||
|
|
||
| ```scss | ||
| @use '@siemens/ix/scss/default'; | ||
| @use '@siemens/ix/scss/globals'; | ||
| @use '@siemens/ix/scss/tokens/system' as sys; | ||
| ``` | ||
|
|
||
| Theme modules, retained public mixins, and | ||
| `@siemens/ix/scss/deprecated/components` remain explicitly exported. Replace | ||
| imports from internal `components`, `entries`, `legacy`, `misc`, and | ||
| `mixins/internal` folders with a supported public entry point or local styles. | ||
| The former `@siemens/ix/scss/misc/common-variables` path remains as a v6 | ||
| compatibility export for generated custom themes; new Sass code should use | ||
| `@siemens/ix/scss/tokens/legacy`. | ||
|
|
||
| ## Removed legacy Sass modules | ||
|
|
||
| The unused legacy Sass modules below have been removed: | ||
|
|
||
| - `@siemens/ix/scss/legacy/components/dropdown` | ||
| - `@siemens/ix/scss/legacy/components/modal` | ||
| - `@siemens/ix/scss/legacy/components/button-group` | ||
|
|
||
| These modules were not included in the compiled IX CSS. Remove direct imports | ||
| and use the corresponding IX components. For CSS class-based button groups, use | ||
| the supported `.ix-button-group` styles. | ||
|
|
||
| ## Removed Sass mixins | ||
|
|
||
| The following unused or implementation-specific Sass modules have been | ||
| removed: | ||
|
|
||
| - `@siemens/ix/scss/mixins/field` | ||
| - `@siemens/ix/scss/mixins/reduce-motion` | ||
| - `@siemens/ix/scss/mixins/shadows` | ||
| - `@siemens/ix/scss/mixins/internal/dropdown-item` | ||
| - `@siemens/ix/scss/mixins/shadow-dom/focus-visible` | ||
| - `@siemens/ix/scss/mixins/shadow-dom/host-disabled` | ||
| - `@siemens/ix/scss/mixins/shadow-dom/hover` | ||
|
|
||
| The unused `hover.host-focus`, `hover.host-focus-visible`, `input.label`, and | ||
| `input.element-form` mixins have also been removed. | ||
|
|
||
| Use `@siemens/ix/scss/mixins/hover` for retained interaction helpers. Replace | ||
| `shadows.box-shadow($level)` with | ||
| `box-shadow: var(--theme-shadow-#{$level})`. Reduced-motion timing overrides | ||
| remain part of the standard IX foundation CSS and no longer require a separate | ||
| mixin. | ||
|
|
||
| ## Icon and component color properties | ||
|
|
||
| `@siemens/ix-icons` now passes its `color` value directly to `var(...)`. | ||
| Properties that forward a color to an icon, and `ix-event-list-item.itemColor`, | ||
| therefore require the complete CSS custom-property name: | ||
|
|
||
| ```html | ||
| <!-- Before --> | ||
| <ix-icon color="si-sys-text-primary"></ix-icon> | ||
| <ix-icon-button icon-color="color-primary"></ix-icon-button> | ||
| <ix-event-list-item item-color="color-alarm"></ix-event-list-item> | ||
|
|
||
| <!-- After --> | ||
| <ix-icon color="--si-sys-text-primary"></ix-icon> | ||
| <ix-icon-button icon-color="--si-sys-text-accent"></ix-icon-button> | ||
| <ix-event-list-item item-color="--si-sys-background-danger"></ix-event-list-item> | ||
| ``` | ||
|
|
||
| The exported `NotificationColor` string literals now include the leading `--`. | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.