From f7f7f65ade88a4b95babcb9ff97f96702ee7ceb8 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Mon, 9 May 2022 14:33:54 +0200 Subject: [PATCH] feat: Theme v2 build process, channel list example --- .gitignore | 2 + package.json | 6 +- src-v2/styles/Avatar/Avatar-layout.scss | 5 + src-v2/styles/Avatar/Avatar-theme.scss | 24 ++++ .../ChannelList/ChannelList-layout.scss | 4 + .../styles/ChannelList/ChannelList-theme.scss | 17 +++ .../ChannelPreview/ChannelPreview-layout.scss | 24 ++++ .../ChannelPreview/ChannelPreview-theme.scss | 50 +++++++ src-v2/styles/_theme-variables.scss | 126 ++++++++++++++++++ src-v2/styles/_utils.scss | 17 +++ src-v2/styles/index.layout.scss | 5 + src-v2/styles/index.scss | 6 + 12 files changed, 283 insertions(+), 3 deletions(-) create mode 100644 src-v2/styles/Avatar/Avatar-layout.scss create mode 100644 src-v2/styles/Avatar/Avatar-theme.scss create mode 100644 src-v2/styles/ChannelList/ChannelList-layout.scss create mode 100644 src-v2/styles/ChannelList/ChannelList-theme.scss create mode 100644 src-v2/styles/ChannelPreview/ChannelPreview-layout.scss create mode 100644 src-v2/styles/ChannelPreview/ChannelPreview-theme.scss create mode 100644 src-v2/styles/_theme-variables.scss create mode 100644 src-v2/styles/_utils.scss create mode 100755 src-v2/styles/index.layout.scss create mode 100644 src-v2/styles/index.scss diff --git a/.gitignore b/.gitignore index 67045665..194f198a 100644 --- a/.gitignore +++ b/.gitignore @@ -102,3 +102,5 @@ dist # TernJS port file .tern-port + +dist-v2 diff --git a/package.json b/package.json index 9fe5b295..e775f686 100644 --- a/package.json +++ b/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" diff --git a/src-v2/styles/Avatar/Avatar-layout.scss b/src-v2/styles/Avatar/Avatar-layout.scss new file mode 100644 index 00000000..bc9c18b4 --- /dev/null +++ b/src-v2/styles/Avatar/Avatar-layout.scss @@ -0,0 +1,5 @@ +.str-chat__avatar { + .str-chat__avatar-fallback { + text-align: center; + } +} diff --git a/src-v2/styles/Avatar/Avatar-theme.scss b/src-v2/styles/Avatar/Avatar-theme.scss new file mode 100644 index 00000000..e33664f5 --- /dev/null +++ b/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; + } +} diff --git a/src-v2/styles/ChannelList/ChannelList-layout.scss b/src-v2/styles/ChannelList/ChannelList-layout.scss new file mode 100644 index 00000000..b59909a1 --- /dev/null +++ b/src-v2/styles/ChannelList/ChannelList-layout.scss @@ -0,0 +1,4 @@ +.str-chat-channel-list { + height: 100%; + overflow-y: auto; +} diff --git a/src-v2/styles/ChannelList/ChannelList-theme.scss b/src-v2/styles/ChannelList/ChannelList-theme.scss new file mode 100644 index 00000000..65344f7b --- /dev/null +++ b/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'); +} diff --git a/src-v2/styles/ChannelPreview/ChannelPreview-layout.scss b/src-v2/styles/ChannelPreview/ChannelPreview-layout.scss new file mode 100644 index 00000000..e556667b --- /dev/null +++ b/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; + } + } +} diff --git a/src-v2/styles/ChannelPreview/ChannelPreview-theme.scss b/src-v2/styles/ChannelPreview/ChannelPreview-theme.scss new file mode 100644 index 00000000..0c7713e7 --- /dev/null +++ b/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); + } + } +} diff --git a/src-v2/styles/_theme-variables.scss b/src-v2/styles/_theme-variables.scss new file mode 100644 index 00000000..61e65805 --- /dev/null +++ b/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); +} diff --git a/src-v2/styles/_utils.scss b/src-v2/styles/_utils.scss new file mode 100644 index 00000000..91c375ef --- /dev/null +++ b/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); +} diff --git a/src-v2/styles/index.layout.scss b/src-v2/styles/index.layout.scss new file mode 100755 index 00000000..0df60ef7 --- /dev/null +++ b/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'; diff --git a/src-v2/styles/index.scss b/src-v2/styles/index.scss new file mode 100644 index 00000000..6acddd1e --- /dev/null +++ b/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';