Skip to content

Commit

Permalink
feat(angular): remove theme-v1 from Angular SDK (#289)
Browse files Browse the repository at this point in the history
### 🎯 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
  • Loading branch information
szuperaz committed Apr 12, 2024
1 parent 20e8993 commit c0f3349
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 76 deletions.
12 changes: 5 additions & 7 deletions doc-templates/component-variables.template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, component variables]
import SDKSpecific from './SDKSpecific';
import V2Warning from './V2Warning';

:::info
<SDKSpecific name='react'>

<SDKSpecific name='angular'>
<V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>
:::info

<SDKSpecific name='react'>
<V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>
<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
Expand Down
11 changes: 5 additions & 6 deletions doc-templates/global-variables.template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, global variables]
import SDKSpecific from './SDKSpecific';
import V2Warning from './V2Warning';

<SDKSpecific name='react'>

:::info

<SDKSpecific name='angular'>
<V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>
<V2Warning themingAndCSSPath='../../customization/css_and_theming' />

<SDKSpecific name='react'>
<V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>
:::

</SDKSpecific>

CSS variables are the easiest way to customize the theme. The variables are organized into two layers:

- Global
Expand Down
12 changes: 5 additions & 7 deletions doc-templates/palette-variables.template.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,16 @@ keywords: [v2, theme-v2, theming-v2, theming, palette variables]
import SDKSpecific from './SDKSpecific';
import V2Warning from './V2Warning';

:::info
<SDKSpecific name='react'>

<SDKSpecific name='angular'>
<V2Warning themingAndCSSPath='../../concepts/themeing' />
</SDKSpecific>
:::info

<SDKSpecific name='react'>
<V2Warning themingAndCSSPath='../../customization/css_and_theming' />
</SDKSpecific>
<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'
Expand Down
92 changes: 36 additions & 56 deletions docs/theming/introduction.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

<SDKSpecific name="react">

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

<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.
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>

<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>
Expand All @@ -75,7 +67,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>
Expand Down Expand Up @@ -111,14 +107,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
Expand Down Expand Up @@ -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:

<SDKSpecific name="angular">

```scss
@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
```

</SDKSpecific>

<SDKSpecific name="react">

```scss
Expand All @@ -261,11 +241,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>
Expand Down Expand Up @@ -297,7 +285,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>
Expand All @@ -315,7 +307,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>
Expand Down Expand Up @@ -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:

<SDKSpecific name="angular">

```scss
@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
```

</SDKSpecific>

<SDKSpecific name="react">

```scss
Expand Down Expand Up @@ -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:

<SDKSpecific name="angular">

```scss
@import '~stream-chat-angular/src/assets/styles/v2/scss/index.scss';
```

</SDKSpecific>

<SDKSpecific name="react">

```scss
Expand Down

0 comments on commit c0f3349

Please sign in to comment.