feat: prepare for removal of legacy styles from stream-chat-react

.github/workflows/pr.yml

@@ -0,0 +1,20 @@
+name: Test
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+      - name: Build
+        run: >
+          yarn run build:ci
+      - name: Generate docs
+        run: >
+          yarn run generate-docs

README.md

@@ -31,3 +31,15 @@ We've recently closed a [$38 million Series B funding round](https://techcrunch.
 Our APIs are used by more than a billion end-users, and you'll have a chance to make a huge impact on the product within a team of the strongest engineers all over the world.
 
 Check out our current openings and apply via [Stream's website](https://getstream.io/team/#jobs).
+
+## Icons - for Stream Developers
+
+- The icons for the UI components can be exported from [Figma](https://www.figma.com/files/project/42134328/SDK-Teams-support-files?fuid=1038443988589634784)
+- Icons are used as fonts, the font files are located in `src/assets/icons`
+- If you need to change icons you have to regenerate the icon fonts:
+
+1. Go to [https://fontello.com/](https://fontello.com/)
+2. Upload the `svg` font from `src/assets/icons`
+3. Edit the font
+4. Set the font name to `stream-chat-icons` and the CSS prefix to `str-chat__icon--`
+5. Download the font, and copy the content of the `font` folder to `src/assets/icons`, and copy the mapping from `css/stream-chat-icons.css` to `src/v2/Icon/Icon-layout.scss`

doc-templates/component-variables.template.mdx

@@ -5,21 +5,6 @@ title: Component variables
 keywords: [v2, theme-v2, theming-v2, theming, component variables]
 ---
 
-import SDKSpecific from './SDKSpecific';
-import V2Warning from './V2Warning';
-
-:::info
-
-<SDKSpecific name='angular'>
-  <V2Warning themingAndCSSPath='../../concepts/themeing' />
-</SDKSpecific>
-
-<SDKSpecific name='react'>
-  <V2Warning themingAndCSSPath='../../customization/css_and_theming' />
-</SDKSpecific>
-
-:::
-
 CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
 
 - Global

doc-templates/global-variables.template.mdx

@@ -5,19 +5,6 @@ title: Global variables
 keywords: [v2, theme-v2, theming-v2, theming, global variables]
 ---
 
-import SDKSpecific from './SDKSpecific';
-import V2Warning from './V2Warning';
-
-:::info
-
-<SDKSpecific name='angular'>
-  <V2Warning themingAndCSSPath='../../concepts/themeing' />
-</SDKSpecific>
-
-<SDKSpecific name='react'>
-  <V2Warning themingAndCSSPath='../../customization/css_and_theming' />
-</SDKSpecific>
-:::
 
 CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
 

doc-templates/palette-variables.template.mdx

@@ -5,23 +5,8 @@ title: Palette variables
 keywords: [v2, theme-v2, theming-v2, theming, palette variables]
 ---
 
-import SDKSpecific from './SDKSpecific';
-import V2Warning from './V2Warning';
-
-:::info
-
-<SDKSpecific name='angular'>
-  <V2Warning themingAndCSSPath='../../concepts/themeing' />
-</SDKSpecific>
-
-<SDKSpecific name='react'>
-  <V2Warning themingAndCSSPath='../../customization/css_and_theming' />
-</SDKSpecific>
-
-:::
-
 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'
 
-Palette variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/\_palette-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_palette-variables.scss)
+Palette variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/\_palette-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/_palette-variables.scss)

docs/theming/introduction.mdx

@@ -2,7 +2,7 @@
 id: themingv2
 sidebar_position: 1
 title: Introduction
-keywords: [v2, theme-v2, theming-v2, theming, introduction]
+keywords: [v2, theme-v2, theming-v2, theme, theming, introduction]
 ---
 
 import SDKSpecific from './SDKSpecific';
@@ -18,46 +18,21 @@ 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:
+The SDK provides default CSS, which can be overridden by the integrators.
 
-- Refreshed design
-- Better customization through CSS variables
-- Support for RTL layout
 
-<SDKSpecific name="angular">
-
-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.
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-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.
-
-</SDKSpecific>
-
-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.
-
-<SDKSpecific name="angular">
-
-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.
-
-</SDKSpecific>
-
-<SDKSpecific name="react">
-
-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.
-
-</SDKSpecific>
-
-## Using theme-v2
+## Importing the stylesheet
 
 If you're using SCSS:
 
 <SDKSpecific name="angular">
 
 ```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';
 ```
 
 </SDKSpecific>
@@ -75,7 +50,11 @@ If you're using CSS:
 <SDKSpecific name="angular">
 
 ```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';
 ```
 
 </SDKSpecific>
@@ -111,14 +90,6 @@ Here is the default chat UI:
 
 Here is how you can customize global variables:
 
-<SDKSpecific name="angular">
-
-```scss
-@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
-```
-
-</SDKSpecific>
-
 <SDKSpecific name="react">
 
 ```scss
@@ -227,18 +198,82 @@ To solve this we also have to set the text color for the link attachment compone
 
 <img src={MessageCustomColor2Screenshot} width='500' />
 
-### CSS overrides
-
-If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS:
 
 <SDKSpecific name="angular">
+### Custom icons
+
+#### From CSS
+
+Starting from stream-chat-angular@5 it's possible to customize icons from CSS.
+
+Here is an example using the [Google Material Icon library](https://fonts.google.com/icons) to override the send icon:
 
 ```scss
-@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
+// Import the icon library you want to use
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+// Override the send icon
+.str-chat__icon--send::before {
+  font-family: 'Material Symbols Outlined';
+  content: '\e163';
+}
+```
+
+It's also possible to use image files for icons:
+
+```scss
+.str-chat__icon--send {
+  &::before {
+    display: none;
+  }
+  // Link to your image file, or encode the image inline
+  content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjQiPjxwYXRoIGQ9Ik0xMjAtMTYwdi02NDBsNzYwIDMyMC03NjAgMzIwWm04MC0xMjAgNDc0LTIwMC00NzQtMjAwdjE0MGwyNDAgNjAtMjQwIDYwdjE0MFptMCAwdi00MDAgNDAwWiIvPjwvc3ZnPg==');
+}
+```
+
+The full list of icons used by the SDK can be found [here](https://github.com/GetStream/stream-chat-css/blob/main/src/v2/styles/Icon/Icon-layout.scss).
+
+You can also change the size and color of the icons:
+
+```scss
+.str-chat__icon--attach {
+  --str-chat-icon-color: green; // Only works for font icons
+  --str-chat-icon-height: 60px;
+}
+```
+
+#### From HTML template
+
+If you're using stream-chat-angular@4 or an older version, or CSS customizations are not enough, you can completely replace the built-in icon component with your own using the [`CustomTemplatesService`](../../services/CustomTemplatesService/#icontemplate).
+
+You can find a working example in the [customization sample app](https://github.com/GetStream/stream-chat-angular/blob/master/projects/customizations-example/src/app/icon/icon.component.ts).
+
+If the default rules set by the stream-chat-angular stylesheets not enough to set the size and color of your custom icons, you can rely on the `--str-chat-icon-color`, `--str-chat-icon-height` and `--str-chat-icon-width` variables:
+
+```
+.my-custom-send-icon {
+  svg {
+    height: var(--str-chat-icon-height);
+    width: var(--str-chat-icon-width);
+
+    path {
+      fill: var(--str-chat-icon-color);
+    }
+  }
+}
 ```
 
 </SDKSpecific>
 
+<SDKSpecific name="todo-react">
+### Custom icons
+
+</SDKSpecific>
+
+### CSS overrides
+
+If you'd like to add customizations that are not supported by CSS variables, you can override parts of the default CSS:
+
 <SDKSpecific name="react">
 
 ```scss
@@ -261,11 +296,19 @@ If you're using SCSS it's also possible to import component stylesheets separate
 <SDKSpecific name="angular">
 
 ```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';
 ```
 
 </SDKSpecific>
@@ -297,7 +340,11 @@ Here is how you can import the layout stylesheet:
 <SDKSpecific name="angular">
 
 ```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';
 ```
 
 </SDKSpecific>
@@ -315,7 +362,11 @@ or if you're using CSS:
 <SDKSpecific name="angular">
 
 ```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';
 ```
 
 </SDKSpecific>
@@ -407,14 +458,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:
 
-<SDKSpecific name="angular">
-
-```scss
-@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
-```
-
-</SDKSpecific>
-
 <SDKSpecific name="react">
 
 ```scss
@@ -459,14 +502,6 @@ It's possible to extend the existing themes with your own themes.
 
 Here is an example creating 'round' and 'square' themes:
 
-<SDKSpecific name="angular">
-
-```scss
-@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
-```
-
-</SDKSpecific>
-
 <SDKSpecific name="react">
 
 ```scss

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/stream-chat-css",
-  "version": "4.0.0-rc.5",
+  "version": "5.0.0-rc.1",
   "main": "dist/css/index.css",
   "description": "Bundled CSS for Stream Chat web SDKs",
   "repository": "git@github.com:GetStream/stream-chat-css.git",