Theming v2

.github/workflows/workflow.yml

@@ -4,12 +4,14 @@ on:
     branches:
       - master
       - beta
+      - theming-v2
   pull_request:
     branches:
       - master
       - beta
+      - theming-v2
 jobs:
-  test:
+  workflow:
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -55,6 +57,8 @@ jobs:
           GH_TOKEN: ${{ secrets.GH_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: npx semantic-release
+      - name: Copy docs from stream-chat-css
+        run: npm run copy-css-docs
       - name: Generate docs
         run: |
           npm run generate-docs

.gitignore

@@ -44,6 +44,8 @@ testem.log
 temp-service-docs
 temp-component-docs
 docusaurus/docs/Angular/services/*.mdx
+docusaurus/docs/Angular/theming/*
+docusaurus/docs/Angular/assets/stream-chat-css*
 
 # System Files
 .DS_Store

copy-css-docs.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env bash
+
+usage() {
+  echo "Missing path to stream-chat-css directory"
+  echo "Usage: $(basename $0) <path_to_stream-chat-css_directory>"
+}
+
+main() {
+  if [ $# -eq 0 ]; then
+      usage
+      exit 0
+  fi
+
+  STREAM_CHAT_CSS_DOCS_PATH=$1;
+  cp -r "$STREAM_CHAT_CSS_DOCS_PATH"/* ./docusaurus/docs/Angular;
+}
+
+
+main $*
+exit 0

docusaurus/docs/Angular/basics/upgrade-v3.mdx

@@ -0,0 +1,48 @@
+---
+id: upgrade-v3
+title: Upgrade from v3
+---
+
+## About version 4
+
+Version 4 of stream-chat-angular brings a new and improved theming system. To use the new system please refer to our new [theming guide](../theming/introduction.mdx).
+
+## Theme-v1
+
+The old theme can still be used with the latest SDK versions however, you might need to update your custom CSS as some changes were introduced to theme-v1.
+
+Updating from theme-v1 to theme-v2 will require to rewrite your custom CSS code as the new theme has a new variable system, and all the components were restructured.
+
+Theme-v1 is now deprecated and will be removed in a future release.
+
+## Theard layout
+
+Previously you had to provide a selector for the message list and message input component projected inside the [thread component](../components/ThreadComponent.mdx).
+
+```html
+<stream-thread name="thread">
+  <stream-message-list
+    name="thread-message-list"
+    mode="thread"
+  ></stream-message-list>
+  <stream-message-input
+    mode="thread"
+    name="thread-message-input"
+  ></stream-message-input>
+</stream-thread>
+```
+
+You don't need to provide those selectors anymore, anything inside the content part of `stream-thread` HTML element will be projected inside the thread component:
+
+```html
+<stream-thread name="thread">
+  <stream-message-list mode="thread"></stream-message-list>
+  <stream-message-input mode="thread"></stream-message-input>
+</stream-thread>
+```
+
+Providing the selector won't cause a problem, but it's unnecessary.
+
+## `device-width` module was removed
+
+The `device-width` utility module was removed. If you rely on this code inside your chat application, you'll have to update your code.

docusaurus/docs/Angular/code-examples/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Code examples",
-  "position": 6
+  "position": 8
 }

docusaurus/docs/Angular/code-examples/channel-invites.mdx

@@ -50,7 +50,7 @@ We create a simplistic UI with an "Invite users" button that opens a [modal](../
 
 ### Styling
 
-We are using stream-chat theme variables to match the default chat theme. You can read more about theme variables in our [themeing guide](../concepts/themeing-and-css.mdx).
+We are using stream-chat theme variables to match the default chat theme. You can read more about theme variables in our [theming guide](../theming/introduction.mdx).
 
 ```scss
 .modal-content {
@@ -71,8 +71,13 @@ We are using stream-chat theme variables to match the default chat theme. You ca
     width: 200px;
     padding: 10px;
     border: none;
-    border-radius: var(--border-radius-md);
-    background-color: var(--grey-whisper);
+    background-color: var(--str-chat__message-textarea-background-color);
+    color: var(--str-chat__message-textarea-color);
+    border-radius: var(--str-chat__message-textarea-border-radius);
+    border-block-start: var(--str-chat__message-textarea-border-block-start);
+    border-block-end: var(--str-chat__message-textarea-border-block-end);
+    border-inline-start: var(--str-chat__message-textarea-border-inline-start);
+    border-inline-end: var(--str-chat__message-textarea-border-inline-end);
   }
 
   .invited-users {
@@ -89,10 +94,10 @@ We are using stream-chat theme variables to match the default chat theme. You ca
 }
 
 button {
-  background-color: var(--primary-color);
+  background-color: var(--str-chat__cta-button-background-color);
   border: none;
-  border-radius: var(--border-radius-md);
-  color: white;
+  border-radius: var(--str-chat__cta-button-border-radius);
+  color: var(--str-chat__cta-button-color);
   padding: 10px;
   cursor: pointer;
 }
@@ -391,13 +396,12 @@ Add this to your `app.component.html` file:
 Add a reference to the template in your `app.component.ts`:
 
 ```typescript
-@ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{
-    channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>;
+@ViewChild('inviteTemplate') private inviteTemplate!: TemplateRef<{channel: Channel<DefaultStreamChatGenerics> | ChannelResponse<DefaultStreamChatGenerics>}>;
 ```
 
 #### Displaying the invitations
 
-The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and display the invites in the `ngOnInit` method of the `app.component.ts`
+The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and [display the invites](../services/NotificationService.mdx) in the `ngOnInit` method of the `app.component.ts`
 
 ```typescript
 ngOnInit(): void {

docusaurus/docs/Angular/code-examples/emoji-picker.mdx

@@ -65,26 +65,52 @@ Your emoji picker component should have an input with the type `Subject<string>`
 
 We also defined an `isOpened` property that tells if the emoji picker should be opened or closed.
 
+The emoji picker will close on outside clicks.
+
 ```typescript
-import { Component, Input, OnInit } from "@angular/core";
-import { Subject } from "rxjs";
+import { Component, ElementRef, Input, ViewChild } from "@angular/core";
+import { Observable, Subject } from "rxjs";
+import { ThemeService } from "stream-chat-angular";
 
 @Component({
   selector: "app-emoji-picker",
   templateUrl: "./emoji-picker.component.html",
   styleUrls: ["./emoji-picker.component.scss"],
 })
-export class EmojiPickerComponent implements OnInit {
+export class EmojiPickerComponent {
   isOpened = false;
+  theme$: Observable<string>;
   @Input() emojiInput$: Subject<string> | undefined;
+  @ViewChild("container") container: ElementRef<HTMLElement> | undefined;
 
-  constructor() {}
-
-  ngOnInit(): void {}
+  constructor(themeService: ThemeService) {
+    this.theme$ = themeService.theme$;
+  }
 
   emojiSelected(event: any) {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     this.emojiInput$?.next(event.emoji.native);
   }
+
+  eventHandler = (event: Event) => {
+    // Watching for outside clicks
+    if (!this.container?.nativeElement.contains(event.target as Node)) {
+      this.isOpened = false;
+      window.removeEventListener("click", this.eventHandler);
+    }
+  };
+
+  toggled() {
+    if (!this.container) {
+      return;
+    }
+    this.isOpened = !this.isOpened;
+    if (this.isOpened) {
+      window.addEventListener("click", this.eventHandler);
+    } else {
+      window.removeEventListener("click", this.eventHandler);
+    }
+  }
 }
 ```
 
@@ -94,59 +120,81 @@ We create a button that can be used to toggle the emoji picker.
 
 The [`emoji-mart`](https://www.npmjs.com/package/@ctrl/ngx-emoji-mart) component has a lot of configuration options, feel free to explore those.
 
-We set the `color` input to the `primary-color` defined in the [stream-chat-css theme](https://github.com/GetStream/stream-chat-css/blob/develop/src/styles/_variables.scss).
+We set the `color` input to `--str-chat__primary-color` defined in the [stream-chat-css theme](../theming/global-variables.mdx).
 
 The [`ngIf`](https://angular.io/api/common/NgIf) directive is used to hide/show the emoji picker.
 
 The `emojiSelect` event is fired when a user selects an emoji, we emit the selected emoji using the `emojiSelected` method.
 
 ```html
-<button (click)="isOpened = !isOpened">
-  <svg
-    viewBox="0 0 28 28"
-    width="100%"
-    preserveAspectRatio="xMinYMin"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g clip-rule="evenodd" fill-rule="evenodd">
-      <path
-        d="M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z"
-      ></path>
-    </g>
-  </svg>
-</button>
-
-<emoji-mart
-  class="picker"
-  color="var(--primary-color)"
-  *ngIf="isOpened"
-  title="Pick your emoji…"
-  emoji="point_up"
-  (emojiSelect)="emojiSelected($event)"
-></emoji-mart>
+<div #container class="emoji-picker-container">
+  <button (click)="toggled()">
+    <svg
+      viewBox="0 0 28 28"
+      width="100%"
+      preserveAspectRatio="xMinYMin"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clip-rule="evenodd" fill-rule="evenodd">
+        <path
+          d="M14 4.4C8.6 4.4 4.4 8.6 4.4 14c0 5.4 4.2 9.6 9.6 9.6c5.4 0 9.6-4.2 9.6-9.6c0-5.4-4.2-9.6-9.6-9.6zM2 14c0-6.6 5.4-12 12-12s12 5.4 12 12s-5.4 12-12 12s-12-5.4-12-12zM12.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM18.8 11c0 1-.8 1.8-1.8 1.8s-1.8-.8-1.8-1.8s.8-1.8 1.8-1.8s1.8.8 1.8 1.8zM8.6 15.4c.6-.4 1.2-.2 1.6.2c.6.8 1.6 1.8 3 2c1.2.4 2.8.2 4.8-2c.4-.4 1.2-.6 1.6 0c.4.4.6 1.2 0 1.6c-2.2 2.6-4.8 3.4-7 3c-2-.4-3.6-1.8-4.4-3c-.4-.6-.2-1.2.4-1.8z"
+        ></path>
+      </g>
+    </svg>
+  </button>
+
+  <emoji-mart
+    class="picker"
+    color="var(--str-chat__primary-color)"
+    *ngIf="isOpened"
+    title="Pick your emoji…"
+    emoji="point_up"
+    (emojiSelect)="emojiSelected($event)"
+    [darkMode]="(theme$ | async) === 'dark'"
+  ></emoji-mart>
+</div>
 ```
 
 5. Component styles
 
-```scss
-button {
-  background-color: transparent;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-}
+If you want to match the color of the emoji picker toggle button to the other tool buttons in the message input, you can use the `--str-chat__message-input-tools-color` to do that as defined in the [stream-chat-css theme](../theming/global-variables.mdx)
 
-.picker {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  transform: scale(0.8);
-  transform-origin: 0% 100%;
-}
+```scss
+.emoji-picker-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+
+  button {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+
+    svg {
+      width: 24px;
+      height: 24px;
+
+      path {
+        fill: var(--str-chat__message-input-tools-color);
+      }
+    }
+  }
 
-@media only screen and (min-device-width: 1024px) {
   .picker {
-    transform: scale(1);
+    z-index: 3;
+    position: absolute;
+    bottom: 100%;
+    transform: scale(0.8);
+    right: 0;
+    transform-origin: bottom right;
+  }
+
+  @media only screen and (min-device-width: 1024px) {
+    .picker {
+      transform: scale(1);
+    }
   }
 }
 ```
@@ -230,3 +278,31 @@ export class AppComponent implements AfterViewInit {
 This is how our emoji picker looks like:
 
 <img src={Screenshot} width="500" />
+
+## Dark and light mode
+
+If your application supports dark and light themes, here how you can toggle the theme on the emoji input component:
+
+Add this to you emoji picker component class:
+
+```typescript
+theme$: Observable<string>;
+
+constructor(themeService: ThemeService) {
+  this.theme$ = themeService.theme$;
+}
+```
+
+And set the `darkMode` input on the `emoji-mart` component:
+
+```html
+<emoji-mart
+  class="picker"
+  color="var(--str-chat__primary-color)"
+  *ngIf="isOpened"
+  title="Pick your emoji…"
+  emoji="point_up"
+  (emojiSelect)="emojiSelected($event)"
+  [darkMode]="(theme$ | async) === 'dark'"
+></emoji-mart>
+```