Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Allow theming and styling the workbench #110

Closed
simoneggler opened this issue Mar 13, 2019 · 0 comments
Closed

Allow theming and styling the workbench #110

simoneggler opened this issue Mar 13, 2019 · 0 comments
Labels
comp: workbench feature Workbench Layout
Milestone
2023-09

Comments

@simoneggler
Copy link
Collaborator

simoneggler commented Mar 13, 2019 •
edited by danielwiehl
Loading

Is your feature request related to a problem? Please describe.

The workbench does not support theming yet. It is possible to change its appearance by specifying some CSS selectors with higher precedence. However, the DOM structure is not public API and can break in upcoming releases.

Describe the solution you'd like

Instead, the workbench should provide some standardized way to apply a custom theme.

Similar to Angular Material theming, a theme should consist of one or more color palettes and additionally allow customizing some workbench parts like for instance the view tab height.

By default, the workbench should ship with a light and dark theme.
@danielwiehl danielwiehl changed the title Theming Allow theming the workbench Aug 2, 2019
@danielwiehl danielwiehl added this to the 2023-09 milestone Jun 8, 2023
@danielwiehl danielwiehl changed the title Allow theming the workbench Allow theming and styling the workbench Jun 8, 2023
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
2ced5e2 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in @scion/workbench SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed.
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must now add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
a1cb1b8 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
65e5d91 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
d842643 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
077be89 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
0b059c1 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
85fb7f1 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
77b77f7 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
02c8ac5 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 7, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
e5bcec5 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Support for custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 9, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
6ff5606 
SCION Workbench has a new tab design for improved user experience and a more modern and consistent look. Applications can control the look of the SCION Workbench using design tokens. Multiple themes are supported. Tokens can have different values per theme.

closes #110

BREAKING CHANGE: Custom styling of the SCION Workbench has introduced a breaking change.

To migrate:
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 9, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench…
05e0a8c 
… (FIXUP)

SCION Workbench has a new tab design for improved user experience and a modern and consistent look.

Applications can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported. A theme is a collection of design tokens, defining specific design aspects. A design token can have a different value per theme.

closes #110

BREAKING CHANGE: New tab design and styling of the SCION Workbench has introduced a breaking change.

To migrate:
- update @scion/components to version 16.2.0 or higher
- SCON Workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- The tab height has been changed to one line, not displaying the heading by default. You can change the tab height to two lines by setting the '--sci-workbench-tab-height' design token to '3.5rem'.
  ```scss
  :root {
    --sci-workbench-tab-height: 5rem;
  }
  ```
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- Contribution of custom tab component has changed:
  - Tab close button is now rendered separately and can be removed from the custom tab component.
  - To not overlap the tab close button, the custom tab component must add a right margin if rendered in the context of a tab or drag image.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
@danielwiehl danielwiehl mentioned this issue Oct 9, 2023
Merged
17 tasks
danielwiehl added a commit that referenced this issue Oct 9, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench…
0203f2e 
… (FIXUP)

SCION Workbench has a new tab design for improved user experience and a modern and consistent look.

Applications can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported. A theme is a collection of design tokens, defining specific design aspects. A design token can have a different value per theme.

closes #110

BREAKING CHANGE: The new tab design and theming capability of the SCION Workbench have introduced a breaking change.

To migrate:
- update @scion/components to version 16.2.0 or higher
- The workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- The tab height has changed from two to one line, not displaying the heading anymore. You can change the tab height back to two lines by setting the `--sci-workbench-tab-height` design token to `3.5rem`.
  ```scss
  :root {
    --sci-workbench-tab-height: 5rem;
  }
  ```
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- Contribution of custom tab component has changed:
  - Close button is now rendered separately and can be removed from the component.
  - Component should add a right margin if rendered in the context of a tab or drag image to not overlap the close button.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
danielwiehl added a commit that referenced this issue Oct 10, 2023
@danielwiehl
feat(workbench): rework tab design and styling of the SCION Workbench
2d8e45a 
SCION Workbench has a new tab design for improved user experience and a modern and consistent look.

Applications can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported. A theme is a collection of design tokens, defining specific design aspects. A design token can have a different value per theme.

closes #110

BREAKING CHANGE: The new tab design and theming of the SCION Workbench has introduced a breaking change.

To migrate:
- update @scion/components to version 16.2.0 or higher
- The workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- The tab height has changed from two to one line, not displaying the heading anymore. You can change the tab height back to two lines by setting the `--sci-workbench-tab-height` design token to `3.5rem`.
  ```scss
  :root {
    --sci-workbench-tab-height: 3.5rem;
  }
  ```
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- Contribution of custom tab component has changed:
  - Close button is now rendered separately and can be removed from the custom tab component.
  - Custom tab component should add a right margin if rendered in the context of a tab or drag image to not overlap the close button.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
Marcarrian pushed a commit that referenced this issue Oct 10, 2023
@danielwiehl @Marcarrian
feat(workbench): rework tab design and styling of the SCION Workbench
5cbd354 
SCION Workbench has a new tab design for improved user experience and a modern and consistent look.

Applications can define a custom theme to change the default look of the SCION Workbench. Multiple themes are supported. A theme is a collection of design tokens, defining specific design aspects. A design token can have a different value per theme.

closes #110

BREAKING CHANGE: The new tab design and theming of the SCION Workbench has introduced a breaking change.

To migrate:
- update @scion/components to version 16.2.0 or higher
- update @scion/workbench-client to version 1.0.0-beta.19 or higher
- The workbench can now be styled using well-defined design tokens instead of undocumented CSS selectors. See [How to theme SCION Workbench](https://github.com/SchweizerischeBundesbahnen/scion-workbench/blob/master/docs/site/howto/how-to-theme-workbench.md) for a list of supported tokens.
- The tab height has changed from two to one line, not displaying the heading anymore. You can change the tab height back to two lines by setting the `--sci-workbench-tab-height` design token to `3.5rem`.
  ```scss
  :root {
    --sci-workbench-tab-height: 3.5rem;
  }
  ```
- Custom icon font is now configured top-level in `@scion/workbench` SCSS module. Previously, a custom icon font was configured under the `$theme` map entry.
  ## Before:
  @use '@scion/workbench' with (
    $theme: (
      icon-font: (
        filename: 'custom-workbench-icons',
        version: '1.0.0'
      )
    )
  );

  ## After:
  @use '@scion/workbench' with (
    icon-font: (
      filename: 'custom-workbench-icons',
      version: '1.0.0'
    )
  );
- Contribution of custom tab component has changed:
  - Close button is now rendered separately and can be removed from the custom tab component.
  - Custom tab component should add a right margin if rendered in the context of a tab or drag image to not overlap the close button.
  - Inject current rendering context using `VIEW_TAB_RENDERING_CONTEXT` DI token instead of `VIEW_TAB_CONTEXT` DI token. Supported contexts are `tab`, `list-item` and `drag-image`.
@danielwiehl danielwiehl mentioned this issue Oct 26, 2023
Merged
17 tasks
@github-project-automation github-project-automation bot moved this to Done in SCION Aug 28, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
comp: workbench feature Workbench Layout
Projects
SCION
Status: Done
Milestone
2023-09
Development

No branches or pull requests
2 participants
@danielwiehl @simoneggler