From c0f3349b2d46f76482b71675e8c11e421955818e Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Fri, 12 Apr 2024 15:06:58 +0200 Subject: [PATCH] feat(angular): remove theme-v1 from Angular SDK (#289) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### 🎯 Goal The Angular SDK is about to remove support for theme-v1, so any reference to that is removed from the docs. Since stream-chat-angular v4 and v5 are maintained in parallel the CSS docs feature code snippets for both versions. React docs is unchanged. ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs --- .../component-variables.template.mdx | 12 +-- doc-templates/global-variables.template.mdx | 11 +-- doc-templates/palette-variables.template.mdx | 12 +-- docs/theming/introduction.mdx | 92 ++++++++----------- 4 files changed, 51 insertions(+), 76 deletions(-) diff --git a/doc-templates/component-variables.template.mdx b/doc-templates/component-variables.template.mdx index 6d48546a..e3337061 100644 --- a/doc-templates/component-variables.template.mdx +++ b/doc-templates/component-variables.template.mdx @@ -8,18 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, component variables] import SDKSpecific from './SDKSpecific'; import V2Warning from './V2Warning'; -:::info + - - - +:::info - - - + ::: + + CSS variables are the easiest way to customize the theme. The variables are organized into two layers: - Global diff --git a/doc-templates/global-variables.template.mdx b/doc-templates/global-variables.template.mdx index 6d0be5ec..0ba57b9c 100644 --- a/doc-templates/global-variables.template.mdx +++ b/doc-templates/global-variables.template.mdx @@ -8,17 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, global variables] import SDKSpecific from './SDKSpecific'; import V2Warning from './V2Warning'; + + :::info - - - + - - - ::: + + CSS variables are the easiest way to customize the theme. The variables are organized into two layers: - Global diff --git a/doc-templates/palette-variables.template.mdx b/doc-templates/palette-variables.template.mdx index 33b6c2fc..3782c486 100644 --- a/doc-templates/palette-variables.template.mdx +++ b/doc-templates/palette-variables.template.mdx @@ -8,18 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, palette variables] import SDKSpecific from './SDKSpecific'; import V2Warning from './V2Warning'; -:::info + - - - +:::info - - - + ::: + + A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx). [//]: # '#SLOT-autogenerated-palette-variables' diff --git a/docs/theming/introduction.mdx b/docs/theming/introduction.mdx index 5694eb06..1f12f9e1 100644 --- a/docs/theming/introduction.mdx +++ b/docs/theming/introduction.mdx @@ -18,46 +18,38 @@ import MessageCustomColor2Screenshot from '../assets/stream-chat-css-message-col import ChatUiSquareThemeScreenshot from '../assets/stream-chat-css-square-theme-screenshot.png'; import ChatUiRtlScreenshot from '../assets/stream-chat-css-rtl-layout-screenshot.png'; + + The SDK has a new theming and customization system. This page contains information about the new version (refered to as version 2 or v2). The most significant improvements of the new version: - Refreshed design - Better customization through CSS variables - Support for RTL layout - - -The [old theme](../concepts/theming-and-css.mdx) (also refered to as version 1 or v1) can still be used with the latest SDK versions, but it's now deprecated, won't be receiving further updates and will be removed in a future major release. +The [old theme](../customization/css-and-theming.mdx) (also refered to as version 1 or v1) can still be used with the latest SDK versions, but it's now deprecated, won't be receiving further updates and will be removed in a future major release. -The [old theme](../customization/css-and-theming.mdx) (also refered to as version 1 or v1) can still be used with the latest SDK versions, but it's now deprecated, won't be receiving further updates and will be removed in a future major release. - - - New theming system (v2) utilises updated markup and new class names in certain components which are being rendered based on which of the two systems you use. Most of the new components (and/or markup) aren't available in the old version (v1) due to compatibility reasons. - - -To use the new theme, please upgrade [`stream-chat-angular`](https://www.npmjs.com/package/stream-chat-angular) to version 4 and follow the instructions below. - - - - - To use the new theme, please upgrade [`stream-chat-react`](https://www.npmjs.com/package/stream-chat-react) to version `10.0.2` and follow the instructions below. -## Using theme-v2 +## Importing the stylesheet If you're using SCSS: ```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss'; +// stream-chat-angular@5 +@import 'stream-chat-angular/src/assets/styles/scss/index.scss'; + +// stream-chat-angular@4 +@import 'stream-chat-angular/src/assets/styles/v2/scss/index.scss'; ``` @@ -75,7 +67,11 @@ If you're using CSS: ```css -@import '~stream-chat-angular/src/assets/styles/v2/css/index.css'; +// stream-chat-angular@5 +@import 'stream-chat-angular/src/assets/styles/css/index.css'; + +// stream-chat-angular@4 +@import 'stream-chat-angular/src/assets/styles/v2/css/index.css'; ``` @@ -111,14 +107,6 @@ Here is the default chat UI: Here is how you can customize global variables: - - -```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss'; -``` - - - ```scss @@ -231,14 +219,6 @@ To solve this we also have to set the text color for the link attachment compone If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS: - - -```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss'; -``` - - - ```scss @@ -261,11 +241,19 @@ If you're using SCSS it's also possible to import component stylesheets separate ```scss +// stream-chat-angular@5 // Use default theme for channel list and channel preview components -@import '~stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss'; -@import '~stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss'; -@import '~stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss'; -@import '~stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss'; +@import 'stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-layout.scss'; +@import 'stream-chat-angular/src/assets/styles/scss/ChannelList/ChannelList-theme.scss'; +@import 'stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-layout.scss'; +@import 'stream-chat-angular/src/assets/styles/scss/ChannelPreview/ChannelPreview-theme.scss'; + +// stream-chat-angular@4 +// Use default theme for channel list and channel preview components +@import 'stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-layout.scss'; +@import 'stream-chat-angular/src/assets/styles/v2/scss/ChannelList/ChannelList-theme.scss'; +@import 'stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-layout.scss'; +@import 'stream-chat-angular/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss'; ``` @@ -297,7 +285,11 @@ Here is how you can import the layout stylesheet: ```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss'; +// stream-chat-angular@5 +@import 'stream-chat-angular/src/assets/styles/scss/index.layout.scss'; + +// stream-chat-angular@4 +@import 'stream-chat-angular/src/assets/styles/v2/scss/index.layout.scss'; ``` @@ -315,7 +307,11 @@ or if you're using CSS: ```css -@import '~stream-chat-angular/src/assets/styles/v2/css/index.layout.css'; +// stream-chat-angular@5 +@import 'stream-chat-angular/src/assets/styles/css/index.layout.css'; + +// stream-chat-angular@4 +@import 'stream-chat-angular/src/assets/styles/v2/css/index.layout.css'; ``` @@ -407,14 +403,6 @@ The `str-chat__theme-dark`/`str-chat__theme-light` class is applied to the [Chan Here is how you can provide different color configurations for the dark and light themes: - - -```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss'; -``` - - - ```scss @@ -459,14 +447,6 @@ It's possible to extend the existing themes with your own themes. Here is an example creating 'round' and 'square' themes: - - -```scss -@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss'; -``` - - - ```scss