Skip to content

Commit b6bfd17

Browse files
szuperazszuperaz
authored
Merge pull request #83 from GetStream/channel-list-poc
feat: Theme v2 build process, channel list example
2 parents c5c5710 + f7f7f65 commit b6bfd17

12 files changed

+283
-3
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,3 +102,5 @@ dist
102102

103103
# TernJS port file
104104
.tern-port
105+
106+
dist-v2

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,10 @@
99
"private": false,
1010
"style": "dist/css/index.css",
1111
"scripts": {
12-
"build": "rm -rf dist && mkdir -p dist && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
13-
"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'",
12+
"build": "rm -rf dist && mkdir -p dist && rm -rf dist-v2 && mkdir -p dist-v2 && yarn bundle-sass && yarn copy-assets && yarn copy-styles",
13+
"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'",
1414
"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'",
15-
"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'",
15+
"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'",
1616
"lint": "stylelint '**/*.scss' --max-warnings 0",
1717
"build:ci": "yarn && yarn lint && yarn build",
1818
"start": "yarn build && sass --watch src/styles/index.scss dist/css/index.css"

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.str-chat__avatar {
2+
.str-chat__avatar-fallback {
3+
text-align: center;
4+
}
5+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@use '../utils';
2+
3+
.str-chat {
4+
--str-chat__avatar-font-family: var(--str-chat__font-family);
5+
--str-chat__avatar-border-radius: var(--str-chat__border-radius-circle);
6+
--str-chat__avatar-color: var(--str-chat__on-primary-color);
7+
--str-chat__avatar-background-color: var(--str-chat__primary-color);
8+
--str-chat__avatar-border-block-start: none;
9+
--str-chat__avatar-border-block-end: none;
10+
--str-chat__avatar-border-inline-start: none;
11+
--str-chat__avatar-border-inline-end: none;
12+
--str-chat__avatar-box-shadow: none;
13+
}
14+
15+
.str-chat__avatar {
16+
.str-chat__avatar-image {
17+
@include utils.component-layer-overrides('avatar');
18+
}
19+
20+
.str-chat__avatar-fallback {
21+
@include utils.component-layer-overrides('avatar');
22+
text-transform: uppercase;
23+
}
24+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.str-chat-channel-list {
2+
height: 100%;
3+
overflow-y: auto;
4+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@use '../utils';
2+
3+
.str-chat {
4+
--str-chat__channel-list-font-family: var(--str-chat__font-family);
5+
--str-chat__channel-list-border-radius: 0;
6+
--str-chat__channel-list-color: var(--str-chat__text-color);
7+
--str-chat__channel-list-background-color: var(--str-chat__secondary-background-color);
8+
--str-chat__channel-list-box-shadow: none;
9+
--str-chat__channel-list-border-block-start: none;
10+
--str-chat__channel-list-border-block-end: none;
11+
--str-chat__channel-list-border-inline-start: none;
12+
--str-chat__channel-list-border-inline-end: 1px solid var(--str-chat__surface-color);
13+
}
14+
15+
.str-chat-channel-list {
16+
@include utils.component-layer-overrides('channel-list');
17+
}

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@use '../utils';
2+
3+
.str-chat__channel-preview {
4+
display: flex;
5+
column-gap: var(--str-chat__spacing-2);
6+
align-items: center;
7+
justify-content: flex-start;
8+
width: 100%;
9+
cursor: pointer;
10+
padding: var(--str-chat__spacing-2);
11+
text-align: start;
12+
13+
.str-chat__channel-preview-end {
14+
overflow: hidden; // need this for ellipsis text to work
15+
display: flex;
16+
flex-direction: column;
17+
gap: var(--str-chat__spacing-0_5);
18+
19+
.str-chat__channel-preview-messenger--name,
20+
.str-chat__channel-preview-messenger--last-message {
21+
@include utils.ellipsis-text;
22+
}
23+
}
24+
}

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use '../utils';
2+
3+
.str-chat {
4+
--str-chat__channel-preview-font-family: var(--str-chat__font-family);
5+
--str-chat__channel-preview-border-radius: 0;
6+
--str-chat__channel-preview-color: var(--str-chat__text-color);
7+
--str-chat__channel-preview-background-color: transparent;
8+
--str-chat__channel-preview-border-radius: 0;
9+
--str-chat__channel-preview-border-block-start: none;
10+
--str-chat__channel-preview-border-block-end: none;
11+
--str-chat__channel-preview-border-inline-start: none;
12+
--str-chat__channel-preview-border-inline-end: none;
13+
--str-chat__channel-preview-active-background-color: var(--str-chat__surface-color);
14+
--str-chat__channel-preview-hover-background-color: var(--str-chat__secondary-surface-color);
15+
--str-chat__channel-preview-latest-message-secondary-color: var(
16+
--str-chat__text-low-emphasis-color
17+
);
18+
}
19+
20+
.str-chat__channel-preview {
21+
@include utils.component-layer-overrides('channel-preview');
22+
23+
&--active {
24+
background-color: var(--str-chat__channel-preview-active-background-color);
25+
}
26+
27+
&:hover {
28+
background-color: var(--str-chat__channel-preview-hover-background-color);
29+
}
30+
31+
.str-chat__channel-preview-messenger--name {
32+
font-size: 1rem;
33+
line-height: 1.25rem;
34+
font-weight: 500;
35+
}
36+
37+
.str-chat__channel-preview-messenger--last-message {
38+
font-size: 0.875rem;
39+
line-height: 1rem;
40+
color: var(--str-chat__channel-preview-latest-message-inactive-color);
41+
font-weight: 400;
42+
}
43+
44+
&--active,
45+
&:hover {
46+
.str-chat__channel-preview-messenger--last-message {
47+
color: var(--str-chat__channel-preview-color);
48+
}
49+
}
50+
}

‎src-v2/styles/_theme-variables.scss

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
.str-chat {
2+
// used for elements where sizing is necessary (such as icons, avatar)
3+
--str-chat__spacing-px: 1px;
4+
// used for margins, padding
5+
--str-chat__spacing-0_5: 0.125rem;
6+
--str-chat__spacing-1: 0.25rem;
7+
--str-chat__spacing-1_5: 0.375rem;
8+
--str-chat__spacing-2: 0.5rem;
9+
--str-chat__spacing-2_5: 0.625rem;
10+
--str-chat__spacing-3: 0.75rem;
11+
--str-chat__spacing-3_5: 0.875rem;
12+
--str-chat__spacing-4: 1rem;
13+
--str-chat__spacing-5: 1.25rem;
14+
--str-chat__spacing-6: 1.5rem;
15+
--str-chat__spacing-7: 1.75rem;
16+
--str-chat__spacing-8: 2rem;
17+
--str-chat__spacing-9: 2.25rem;
18+
--str-chat__spacing-10: 2.5rem;
19+
--str-chat__spacing-11: 2.75rem;
20+
--str-chat__spacing-12: 3rem;
21+
--str-chat__spacing-14: 3.5rem;
22+
--str-chat__spacing-16: 4rem;
23+
24+
--str-chat__blue900: #00163d;
25+
--str-chat__blue800: #002666;
26+
--str-chat__blue700: #003999;
27+
--str-chat__blue600: #004ccc;
28+
--str-chat__blue500: #005fff;
29+
--str-chat__blue400: #337eff;
30+
--str-chat__blue300: #669fff;
31+
--str-chat__blue200: #ccdfff;
32+
--str-chat__blue100: #e0f0ff;
33+
34+
--str-chat__grey950: #000000;
35+
--str-chat__grey900: #121416;
36+
--str-chat__grey800: #1c1e22;
37+
--str-chat__grey700: #272a30;
38+
--str-chat__grey600: #4c525c;
39+
--str-chat__grey500: #72767e;
40+
--str-chat__grey400: #b4b7bb;
41+
--str-chat__grey300: #dbdde1;
42+
--str-chat__grey200: #e9eaed;
43+
--str-chat__grey100: #f7f7f8;
44+
--str-chat__grey50: #ffffff;
45+
46+
--str-chat__red900: #330003;
47+
--str-chat__red800: #660006;
48+
--str-chat__red700: #990008;
49+
--str-chat__red600: #cc000b;
50+
--str-chat__red500: #ff000e;
51+
--str-chat__red400: #ff3742;
52+
--str-chat__red300: #ff666e;
53+
--str-chat__red200: #ff999f;
54+
--str-chat__red100: #ffe5e7;
55+
56+
--str-chat__green900: #062d16;
57+
--str-chat__green800: #0d592c;
58+
--str-chat__green700: #138643;
59+
--str-chat__green600: #19b359;
60+
--str-chat__green500: #20e070;
61+
--str-chat__green400: #4ce68c;
62+
--str-chat__green300: #79eca9;
63+
--str-chat__green200: #a6f2c6;
64+
--str-chat__green100: #e9f1ff;
65+
66+
--str-chat__yellow900: #332500;
67+
--str-chat__yellow800: #664900;
68+
--str-chat__yellow700: #996e00;
69+
--str-chat__yellow600: #cc9200;
70+
--str-chat__yellow500: #ffb700;
71+
--str-chat__yellow400: #ffd466;
72+
--str-chat__yellow300: #ffe299;
73+
--str-chat__yellow200: #fff1cc;
74+
--str-chat__yellow100: #fff8e5;
75+
76+
--str-chat__border-radius-sm: 16px;
77+
--str-chat__border-radius-md: 20px;
78+
--str-chat__border-radius-circle: 999px;
79+
80+
// https://systemfontstack.com/
81+
--str-chat__font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu,
82+
Cantarell, Helvetica Neue, sans-serif;
83+
}
84+
85+
.str-chat,
86+
.str-chat__theme-light {
87+
--str-chat__primary-color: var(--str-chat__blue500);
88+
--str-chat__active-primary-color: var(--str-chat__blue600);
89+
--str-chat__on-primary-color: var(--str-chat__grey50);
90+
--str-chat__background-color: var(--str-chat__grey50);
91+
--str-chat__secondary-background-color: var(--str-chat__grey50);
92+
--str-chat__primary-surface-color: var(--str-chat__blue100);
93+
--str-chat__surface-color: var(--str-chat__grey300);
94+
--str-chat__secondary-surface-color: var(--str-chat__grey200);
95+
--str-chat__text-color: var(--str-chat__grey950);
96+
--str-chat__text-low-emphasis-color: var(--str-chat__grey500);
97+
--str-chat__disabled-color: var(--str-chat__grey400);
98+
--str-chat__on-disabled-color: var(--str-chat__grey5);
99+
--str-chat__danger-color: var(--str-chat__red600);
100+
--str-chat__online-indicator-color: var(--str-chat__green500);
101+
--str-chat__message-highlight-color: var(--str-chat__yellow100);
102+
--str-chat__unread-badge-color: var(--str-chat__red600);
103+
--str-chat__on-unread-badge-color: var(--str-chat__grey50);
104+
--str-chat__overlay-color: rgba(252, 252, 252, 0.9);
105+
}
106+
107+
.str-chat__theme-dark {
108+
--str-chat__primary-color: var(--str-chat__blue400);
109+
--str-chat__active-primary-color: var(--str-chat__blue600);
110+
--str-chat__on-primary-color: var(--str-chat__grey50);
111+
--str-chat__background-color: var(--str-chat__grey950);
112+
--str-chat__secondary-background-color: var(--str-chat__grey900);
113+
--str-chat__primary-surface-color: var(--str-chat__blue900);
114+
--str-chat__surface-color: var(--str-chat__grey700);
115+
--str-chat__secondary-surface-color: var(--str-chat__grey800);
116+
--str-chat__text-color: var(--str-chat__grey50);
117+
--str-chat__text-low-emphasis-color: var(--str-chat__grey500);
118+
--str-chat__disabled-color: var(--str-chat__grey600);
119+
--str-chat__on-disabled-color: var(--str-chat__grey50);
120+
--str-chat__danger-color: var(--str-chat__red600);
121+
--str-chat__online-indicator-color: var(--str-chat__green500);
122+
--str-chat__message-highlight-color: var(--str-chat__yellow900);
123+
--str-chat__unread-badge-color: var(--str-chat__red600);
124+
--str-chat__on-unread-badge-color: var(--str-chat__grey50);
125+
--str-chat__overlay-color: rgba(77, 26, 26, 0.9);
126+
}

‎src-v2/styles/_utils.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@mixin ellipsis-text {
2+
white-space: nowrap;
3+
overflow: hidden;
4+
text-overflow: ellipsis;
5+
}
6+
7+
@mixin component-layer-overrides($component-name) {
8+
background-color: var(--str-chat__#{$component-name}-background-color);
9+
color: var(--str-chat__#{$component-name}-color);
10+
font-family: var(--str-chat__#{$component-name}-font-family);
11+
box-shadow: var(--str-chat__#{$component-name}-box-shadow);
12+
border-radius: var(--str-chat__#{$component-name}-border-radius);
13+
border-block-start: var(--str-chat__#{$component-name}-border-block-start);
14+
border-block-end: var(--str-chat__#{$component-name}-border-block-end);
15+
border-inline-start: var(--str-chat__#{$component-name}-border-inline-start);
16+
border-inline-end: var(--str-chat__#{$component-name}-border-inline-end);
17+
}

0 commit comments

Comments
 (0)