Skip to content

Commit

Permalink
Explicitly deprecate SCSS and CSS variables.
Browse files Browse the repository at this point in the history
  • Loading branch information
@GerardasB
GerardasB committed Sep 13, 2024
1 parent 8787aab commit 3c6fdf9
Show file tree
Hide file tree
Showing 2 changed files with 103 additions and 13 deletions.
101 changes: 96 additions & 5 deletions docs/changehistory/NextVersion.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,102 @@

Table of contents:

- [@itwin/core-react](#itwincore-react)
- [Deprecations](#deprecations)
- [@itwin/appui-react](#itwinappui-react)
- [Changes](#changes)
- [@itwin/components-react](#itwincomponents-react)
- [Deprecations](#deprecations-1)
- [Additions](#additions)
- [Deprecations](#deprecations)

## @itwin/core-react

### Deprecations

- All `SCSS` and `CSS` variables are deprecated in all of AppUI packages. Applications should use [iTwinUI variables](https://itwinui.bentley.com/docs/variables) instead. In the table below you can find the replacements for commonly used variables:

| Variable | Replacement |
| ------------------------------------------- | --------------------------------------------------------------- |
| `--buic-accessory-hollow` | `--iui-color-white` |
| `--buic-accessory-primary` | `--iui-color-background-accent-hover` or `rgb(000, 139, 225)` |
| `--buic-accessory-success` | `--iui-color-background-positive-hover` or `rgb(083, 162, 026)` |
| `--buic-accessory-alert` | `--iui-color-background-negative-hover` or `rgb(211, 010, 010)` |
| `--buic-accessory-warning` | `--iui-color-background-warning-hover` or `rgb(241, 139, 018)` |
| `--buic-accessory-primary-tint` | `--iui-color-border-informational` or `rgb(165, 215, 245)` |
| `--buic-accessory-success-tint` | `--iui-color-border-positive` or `rgb(195, 225, 175)` |
| `--buic-accessory-alert-tint` | `--iui-color-border-negative` or `rgb(239, 169, 169)` |
| `--buic-accessory-warning-tint` | `--iui-color-border-warning` or `rgb(249, 215, 171)` |
| `--buic-background-1` | `--iui-color-background` |
| `--buic-background-2` | `--iui-color-background-hover` |
| `--buic-background-3` | `--iui-color-background-backdrop` |
| `--buic-background-4` | `--iui-color-background-backdrop-hover` |
| `--buic-background-5` | `--iui-color-background-disabled` |
| `--buic-background-editable` | `--iui-color-background` |
| `--buic-background-primary` | `--iui-color-background-accent` |
| `--buic-background-tooltip` | `hsl(var(--iui-color-background-hsl) / 0.9)` |
| `--buic-background-scrollbar` | `hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4))` |
| `--buic-background-scrollbar-hover` | `hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-3))` |
| `--buic-foreground-body-rgb` | `--iui-color-foreground-hsl` |
| `--buic-foreground-body` | `--iui-color-text` |
| `--buic-foreground-body-reverse-rgb` | `--iui-color-foreground-hsl` |
| `--buic-foreground-body-reverse` | `hsl(var(--iui-color-background-hsl) / var(--iui-opacity-2))` |
| `--buic-foreground-muted` | `--iui-color-text-muted` |
| `--buic-foreground-disabled` | `--iui-color-text-disabled` |
| `--buic-foreground-activehover` | `--iui-color-text` |
| `--buic-inputs-border` | `hsl(var(--iui-color-foreground-hsl) / var(--iui-opacity-4))` |
| `--buic-inputs-boxshadow` | `--iui-focus-box-shadow` |
| `--buic-popup-boxshadow` | `--buic-inputs-boxshadow` |
| `--buic-foreground-primary` | `--iui-color-icon-accent` |
| `--buic-foreground-primary-tone` | `--iui-color-text-accent-hover` |
| `--buic-foreground-focus` | `--iui-color-text-accent-hover` |
| `--buic-foreground-focus-border` | `--buic-inputs-border` |
| `--buic-focus-boxshadow` | `hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-4))` |
| `--buic-focus-boxshadow-gradient1` | `hsl(var(--buic-foreground-primary-tone-rgb) / 0)` |
| `--buic-focus-boxshadow-gradient2` | `hsl(var(--buic-foreground-primary-rgb) / 0.65)` |
| `--buic-foreground-accessory` | `--iui-color-white` |
| `--buic-foreground-success` | `--iui-color-text-positive` |
| `--buic-foreground-positive` | `--iui-color-text-positive` |
| `--buic-foreground-positive-rgb` | `--iui-color-positive-hsl` |
| `--buic-foreground-alert` | `--iui-color-text-negative` |
| `--buic-foreground-negative` | `--iui-color-text-negative` |
| `--buic-foreground-negative-rgb` | `--iui-color-negative-hsl` |
| `--buic-foreground-warning` | `--iui-color-text-warning` |
| `--buic-foreground-warning-rgb` | `--iui-color-warning-hsl` |
| `--buic-background-focus-overlay` | `hsl(var(--iui-opacity-6))` |
| `--buic-background-hover-overlay` | `hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5))` |
| `--buic-background-active-overlay` | `hsl(var(--iui-color-accent-hsl) / var(--iui-opacity-5))` |
| `--buic-background-pressed-overlay` | `hsl(var(--iui-color-accent-hsl) / 0.3)` |
| `--buic-background-card` | `hsl(var(--iui-color-background-hsl) / 0.9)` |
| `--buic-background-striped_row` | `hsl(var(--iui-color-foreground-hsl) / 0.03)` |
| `--buic-background-titlebar` | `--iui-color-background-disabled` |
| `--buic-background-dialog-stroke` | `--iui-color-background-disabled` |
| `--buic-background-widget-stroke` | `--iui-color-background-disabled` |
| `--buic-background-control-stroke` | `--iui-color-background-disabled` |
| `--buic-background-panel-stroke` | `--iui-color-background-disabled` |
| `--buic-background-toolbutton-stroke` | `--iui-color-background-disabled` |
| `--buic-background-titlebar-outoffocus` | `--iui-color-background-backdrop-hover` |
| `--buic-background-divider` | `--iui-color-background-backdrop-hover` |
| `--buic-background-widget-element-stroke` | `--iui-color-background-backdrop-hover` |
| `--buic-background-statusbar` | `--iui-color-background-backdrop-hover` |
| `--buic-background-table-header` | `--iui-color-background-backdrop-hover` |
| `--buic-background-control-stroke-disabled` | `--iui-color-background-backdrop-hover` |
| `--buic-background-tab-inactive` | `--iui-color-background-backdrop` |
| `--buic-background-toolbutton-inactive` | `--iui-color-background-backdrop` |
| `--buic-background-context-menu` | `--iui-color-background-backdrop` |
| `--buic-background-widget-panel` | `--iui-color-background-backdrop` |
| `--buic-background-placeholder` | `--iui-color-background-backdrop` |
| `--buic-background-control-disabled` | `--iui-color-background-backdrop` |
| `--buic-background-tab-active` | `--iui-color-background-hover` |
| `--buic-background-dialog` | `--iui-color-background-hover` |
| `--buic-background-widget` | `--iui-color-background-hover` |
| `--buic-background-window` | `--iui-color-background-hover` |
| `--buic-background-toolbar` | `--iui-color-background-hover` |
| `--buic-background-panel` | `--iui-color-background-hover` |
| `--buic-background-control` | `--iui-color-background` |
| `--buic-row-selection` | `--iui-color-background-accent-muted` |
| `--buic-row-hover` | `--iui-color-background-hover` |
| `--buic-button-gradient1` | `rgba(var(--iui-color-foreground-body-invert-rgb), 0)` |
| `--buic-button-gradient2` | `rgba(var(--iui-color-foreground-body-invert-rgb), 0.25)` |

## @itwin/appui-react

Expand All @@ -16,10 +107,10 @@ Table of contents:

## @itwin/components-react

### Additions

- Added `useDefaultPropertyFilterBuilderRuleValidator` hook to get default validator for rules in `PropertyFilterBuilder` component. [#1000](https://github.com/iTwin/appui/pull/1000)

### Deprecations

- Deprecated `defaultPropertyFilterBuilderRuleValidator`. Newly added `useDefaultPropertyFilterBuilderRuleValidator` should be used instead. [#1000](https://github.com/iTwin/appui/pull/1000)

### Additions

- Added `useDefaultPropertyFilterBuilderRuleValidator` hook to get default validator for rules in `PropertyFilterBuilder` component. [#1000](https://github.com/iTwin/appui/pull/1000)
15 changes: 7 additions & 8 deletions ui/appui-react/src/appui-react/theme/ThemeManager.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,15 @@ interface ThemeManagerProps {
theme?: ThemeId;
}

/** ThemeManager handles setting color themes and element opacity management. Note that this component will
* affect the entire application by setting the data-theme attribute to the html element.
* It also sets an iTwinUI `ThemeProvider` element locally, so all elements
* within the AppUI tree will have the same theme, and should be using iTwinUI 2.x or later.
* A `ColorTheme` enum values will configure iTwinUI `ThemeProvider` accordingly.
* Any other string will only apply the `data-theme` attribute to the `html` element
/** `ThemeManager` handles setting color themes. Note that this component will
* affect the entire application by setting the internal `data-theme` attribute.
* Component children are wrapped with `v2` and `v3` iTwinUI `ThemeProvider` components, so all nodes within the tree will have the same theme, and should be using iTwinUI 2.x or later.
* Specified `ThemeId` will be mapped to iTwinUI `theme` accordingly.
* Any other string will only apply the `data-theme` attribute to the underlying `html` element
* and `ThemeProvider` theme will be set to `inherit`, in this case the application is
* responsible for setting the theme by overriding iTwinUI css variables.
* responsible for setting the theme, i.e. by using iTwinUI css variables.
*
* This React component should wrap {@link ConfigurableUiContent}.
* This component should wrap {@link ConfigurableUiContent}.
*
* ```tsx
* <ThemeManager>
Expand Down

0 comments on commit 3c6fdf9

Please sign in to comment.