feat: Theme v2 build process, channel list example

.gitignore

@@ -102,3 +102,5 @@ dist
 
 # TernJS port file
 .tern-port
+
+dist-v2

package.json

@@ -9,10 +9,10 @@
   "private": false,
   "style": "dist/css/index.css",
   "scripts": {
-    "build": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
-    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
+    "build": "rm -rf dist && mkdir -p dist && rm -rf dist-v2 && mkdir -p dist-v2 && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
+    "bundle-sass": "echo '\u001b[34mℹ\u001b[0m Compiling scss files to css bundle' && sass src/styles/index.scss dist/css/index.css --style compressed && sass src-v2/styles/index.scss dist-v2/css/index.css --style compressed && sass src-v2/styles/index.layout.scss dist-v2/css/index.layout.css --style compressed && echo '\u001b[32m✓\u001b[0m Finished bundling css'",
     "copy-assets": "echo '\u001b[34mℹ\u001b[0m Copying assets to distributed directory' && cp -R src/assets dist/assets && echo '\u001b[32m✓\u001b[0m Finished copying assets'",
-    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss  && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
+    "copy-styles": "echo '\u001b[34mℹ\u001b[0m Copying scss files to distributed directory' && cp -R src/styles dist/scss && cp -R src-v2/styles dist-v2/scss  && echo '\u001b[32m✓\u001b[0m Finished copying styles'",
     "lint": "stylelint '**/*.scss' --max-warnings 0",
     "build:ci": "yarn && yarn lint && yarn build",
     "start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"

src-v2/styles/Avatar/Avatar-layout.scss

@@ -0,0 +1,5 @@
+.str-chat__avatar {
+  .str-chat__avatar-fallback {
+    text-align: center;
+  }
+}

src-v2/styles/Avatar/Avatar-theme.scss

@@ -0,0 +1,24 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__avatar-font-family: var(--str-chat__font-family);
+  --str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
+  --str-chat__avatar-color: var(--str-chat__on-primary-color);
+  --str-chat__avatar-background-color: var(--str-chat__primary-color);
+  --str-chat__avatar-border-block-start: none;
+  --str-chat__avatar-border-block-end: none;
+  --str-chat__avatar-border-inline-start: none;
+  --str-chat__avatar-border-inline-end: none;
+  --str-chat__avatar-box-shadow: none;
+}
+
+.str-chat__avatar {
+  .str-chat__avatar-image {
+    @include utils.component-layer-overrides('avatar');
+  }
+
+  .str-chat__avatar-fallback {
+    @include utils.component-layer-overrides('avatar');
+    text-transform: uppercase;
+  }
+}

src-v2/styles/ChannelList/ChannelList-layout.scss

@@ -0,0 +1,4 @@
+.str-chat-channel-list {
+  height: 100%;
+  overflow-y: auto;
+}

src-v2/styles/ChannelList/ChannelList-theme.scss

@@ -0,0 +1,17 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__channel-list-font-family: var(--str-chat__font-family);
+  --str-chat__channel-list-border-radius: 0;
+  --str-chat__channel-list-color: var(--str-chat__text-color);
+  --str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
+  --str-chat__channel-list-box-shadow: none;
+  --str-chat__channel-list-border-block-start: none;
+  --str-chat__channel-list-border-block-end: none;
+  --str-chat__channel-list-border-inline-start: none;
+  --str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
+}
+
+.str-chat-channel-list {
+  @include utils.component-layer-overrides('channel-list');
+}

src-v2/styles/ChannelPreview/ChannelPreview-layout.scss

@@ -0,0 +1,24 @@
+@use '../utils';
+
+.str-chat__channel-preview {
+  display: flex;
+  column-gap: var(--str-chat__spacing-2);
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  cursor: pointer;
+  padding: var(--str-chat__spacing-2);
+  text-align: start;
+
+  .str-chat__channel-preview-end {
+    overflow: hidden; // need this for ellipsis text to work
+    display: flex;
+    flex-direction: column;
+    gap: var(--str-chat__spacing-0_5);
+
+    .str-chat__channel-preview-messenger--name,
+    .str-chat__channel-preview-messenger--last-message {
+      @include utils.ellipsis-text;
+    }
+  }
+}

src-v2/styles/ChannelPreview/ChannelPreview-theme.scss

@@ -0,0 +1,50 @@
+@use '../utils';
+
+.str-chat {
+  --str-chat__channel-preview-font-family: var(--str-chat__font-family);
+  --str-chat__channel-preview-border-radius: 0;
+  --str-chat__channel-preview-color: var(--str-chat__text-color);
+  --str-chat__channel-preview-background-color: transparent;
+  --str-chat__channel-preview-border-radius: 0;
+  --str-chat__channel-preview-border-block-start: none;
+  --str-chat__channel-preview-border-block-end: none;
+  --str-chat__channel-preview-border-inline-start: none;
+  --str-chat__channel-preview-border-inline-end: none;
+  --str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
+  --str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
+  --str-chat__channel-preview-latest-message-secondary-color: var(
+    --str-chat__text-low-emphasis-color
+  );
+}
+
+.str-chat__channel-preview {
+  @include utils.component-layer-overrides('channel-preview');
+
+  &--active {
+    background-color: var(--str-chat__channel-preview-active-background-color);
+  }
+
+  &:hover {
+    background-color: var(--str-chat__channel-preview-hover-background-color);
+  }
+
+  .str-chat__channel-preview-messenger--name {
+    font-size: 1rem;
+    line-height: 1.25rem;
+    font-weight: 500;
+  }
+
+  .str-chat__channel-preview-messenger--last-message {
+    font-size: 0.875rem;
+    line-height: 1rem;
+    color: var(--str-chat__channel-preview-latest-message-inactive-color);
+    font-weight: 400;
+  }
+
+  &--active,
+  &:hover {
+    .str-chat__channel-preview-messenger--last-message {
+      color: var(--str-chat__channel-preview-color);
+    }
+  }
+}

src-v2/styles/_theme-variables.scss

@@ -0,0 +1,126 @@
+.str-chat {
+  // used for elements where sizing is necessary (such as icons, avatar)
+  --str-chat__spacing-px: 1px;
+  // used for margins, padding
+  --str-chat__spacing-0_5: 0.125rem;
+  --str-chat__spacing-1: 0.25rem;
+  --str-chat__spacing-1_5: 0.375rem;
+  --str-chat__spacing-2: 0.5rem;
+  --str-chat__spacing-2_5: 0.625rem;
+  --str-chat__spacing-3: 0.75rem;
+  --str-chat__spacing-3_5: 0.875rem;
+  --str-chat__spacing-4: 1rem;
+  --str-chat__spacing-5: 1.25rem;
+  --str-chat__spacing-6: 1.5rem;
+  --str-chat__spacing-7: 1.75rem;
+  --str-chat__spacing-8: 2rem;
+  --str-chat__spacing-9: 2.25rem;
+  --str-chat__spacing-10: 2.5rem;
+  --str-chat__spacing-11: 2.75rem;
+  --str-chat__spacing-12: 3rem;
+  --str-chat__spacing-14: 3.5rem;
+  --str-chat__spacing-16: 4rem;
+
+  --str-chat__blue900: #00163d;
+  --str-chat__blue800: #002666;
+  --str-chat__blue700: #003999;
+  --str-chat__blue600: #004ccc;
+  --str-chat__blue500: #005fff;
+  --str-chat__blue400: #337eff;
+  --str-chat__blue300: #669fff;
+  --str-chat__blue200: #ccdfff;
+  --str-chat__blue100: #e0f0ff;
+
+  --str-chat__grey950: #000000;
+  --str-chat__grey900: #121416;
+  --str-chat__grey800: #1c1e22;
+  --str-chat__grey700: #272a30;
+  --str-chat__grey600: #4c525c;
+  --str-chat__grey500: #72767e;
+  --str-chat__grey400: #b4b7bb;
+  --str-chat__grey300: #dbdde1;
+  --str-chat__grey200: #e9eaed;
+  --str-chat__grey100: #f7f7f8;
+  --str-chat__grey50: #ffffff;
+
+  --str-chat__red900: #330003;
+  --str-chat__red800: #660006;
+  --str-chat__red700: #990008;
+  --str-chat__red600: #cc000b;
+  --str-chat__red500: #ff000e;
+  --str-chat__red400: #ff3742;
+  --str-chat__red300: #ff666e;
+  --str-chat__red200: #ff999f;
+  --str-chat__red100: #ffe5e7;
+
+  --str-chat__green900: #062d16;
+  --str-chat__green800: #0d592c;
+  --str-chat__green700: #138643;
+  --str-chat__green600: #19b359;
+  --str-chat__green500: #20e070;
+  --str-chat__green400: #4ce68c;
+  --str-chat__green300: #79eca9;
+  --str-chat__green200: #a6f2c6;
+  --str-chat__green100: #e9f1ff;
+
+  --str-chat__yellow900: #332500;
+  --str-chat__yellow800: #664900;
+  --str-chat__yellow700: #996e00;
+  --str-chat__yellow600: #cc9200;
+  --str-chat__yellow500: #ffb700;
+  --str-chat__yellow400: #ffd466;
+  --str-chat__yellow300: #ffe299;
+  --str-chat__yellow200: #fff1cc;
+  --str-chat__yellow100: #fff8e5;
+
+  --str-chat__border-radius-sm: 16px;
+  --str-chat__border-radius-md: 20px;
+  --str-chat__border-radius-circle: 999px;
+
+  // https://systemfontstack.com/
+  --str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, Helvetica Neue, sans-serif;
+}
+
+.str-chat,
+.str-chat__theme-light {
+  --str-chat__primary-color: var(--str-chat__blue500);
+  --str-chat__active-primary-color: var(--str-chat__blue600);
+  --str-chat__on-primary-color: var(--str-chat__grey50);
+  --str-chat__background-color: var(--str-chat__grey50);
+  --str-chat__secondary-background-color: var(--str-chat__grey50);
+  --str-chat__primary-surface-color: var(--str-chat__blue100);
+  --str-chat__surface-color: var(--str-chat__grey300);
+  --str-chat__secondary-surface-color: var(--str-chat__grey200);
+  --str-chat__text-color: var(--str-chat__grey950);
+  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
+  --str-chat__disabled-color: var(--str-chat__grey400);
+  --str-chat__on-disabled-color: var(--str-chat__grey5);
+  --str-chat__danger-color: var(--str-chat__red600);
+  --str-chat__online-indicator-color: var(--str-chat__green500);
+  --str-chat__message-highlight-color: var(--str-chat__yellow100);
+  --str-chat__unread-badge-color: var(--str-chat__red600);
+  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
+  --str-chat__overlay-color: rgba(252, 252, 252, 0.9);
+}
+
+.str-chat__theme-dark {
+  --str-chat__primary-color: var(--str-chat__blue400);
+  --str-chat__active-primary-color: var(--str-chat__blue600);
+  --str-chat__on-primary-color: var(--str-chat__grey50);
+  --str-chat__background-color: var(--str-chat__grey950);
+  --str-chat__secondary-background-color: var(--str-chat__grey900);
+  --str-chat__primary-surface-color: var(--str-chat__blue900);
+  --str-chat__surface-color: var(--str-chat__grey700);
+  --str-chat__secondary-surface-color: var(--str-chat__grey800);
+  --str-chat__text-color: var(--str-chat__grey50);
+  --str-chat__text-low-emphasis-color: var(--str-chat__grey500);
+  --str-chat__disabled-color: var(--str-chat__grey600);
+  --str-chat__on-disabled-color: var(--str-chat__grey50);
+  --str-chat__danger-color: var(--str-chat__red600);
+  --str-chat__online-indicator-color: var(--str-chat__green500);
+  --str-chat__message-highlight-color: var(--str-chat__yellow900);
+  --str-chat__unread-badge-color: var(--str-chat__red600);
+  --str-chat__on-unread-badge-color: var(--str-chat__grey50);
+  --str-chat__overlay-color: rgba(77, 26, 26, 0.9);
+}

src-v2/styles/_utils.scss

@@ -0,0 +1,17 @@
+@mixin ellipsis-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin component-layer-overrides($component-name) {
+  background-color: var(--str-chat__#{$component-name}-background-color);
+  color: var(--str-chat__#{$component-name}-color);
+  font-family: var(--str-chat__#{$component-name}-font-family);
+  box-shadow: var(--str-chat__#{$component-name}-box-shadow);
+  border-radius: var(--str-chat__#{$component-name}-border-radius);
+  border-block-start: var(--str-chat__#{$component-name}-border-block-start);
+  border-block-end: var(--str-chat__#{$component-name}-border-block-end);
+  border-inline-start: var(--str-chat__#{$component-name}-border-inline-start);
+  border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
+}

src-v2/styles/index.layout.scss

@@ -0,0 +1,5 @@
+@use 'theme-variables';
+
+@use 'ChannelList/ChannelList-layout';
+@use 'ChannelPreview/ChannelPreview-layout';
+@use 'Avatar/Avatar-layout';

src-v2/styles/index.scss

@@ -0,0 +1,6 @@
+@use 'theme-variables';
+
+@use 'index.layout.scss';
+@use 'ChannelList/ChannelList-theme';
+@use 'ChannelPreview/ChannelPreview-theme';
+@use 'Avatar/Avatar-theme';