From 3c6fdf99db36e16d7c717000c1e5f20f13f5f92b Mon Sep 17 00:00:00 2001 From: GerardasB <10091419+GerardasB@users.noreply.github.com> Date: Fri, 13 Sep 2024 09:38:16 +0300 Subject: [PATCH] Explicitly deprecate SCSS and CSS variables. --- docs/changehistory/NextVersion.md | 101 +++++++++++++++++- .../src/appui-react/theme/ThemeManager.tsx | 15 ++- 2 files changed, 103 insertions(+), 13 deletions(-) diff --git a/docs/changehistory/NextVersion.md b/docs/changehistory/NextVersion.md index c3e64dfbee7..dad31414b1e 100644 --- a/docs/changehistory/NextVersion.md +++ b/docs/changehistory/NextVersion.md @@ -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 @@ -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) diff --git a/ui/appui-react/src/appui-react/theme/ThemeManager.tsx b/ui/appui-react/src/appui-react/theme/ThemeManager.tsx index c84077b7f94..99b62bd3666 100644 --- a/ui/appui-react/src/appui-react/theme/ThemeManager.tsx +++ b/ui/appui-react/src/appui-react/theme/ThemeManager.tsx @@ -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 *