From 06de37870ddbc68cd789938af4ac30eb8fa000bd Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Thu, 28 Jul 2022 11:09:50 +0200 Subject: [PATCH] feat: Use font variables inside channel search --- .../ChannelSearch/ChannelSearch-theme.scss | 54 +++++++++---------- src/v2/styles/_theme-variables.scss | 3 ++ 2 files changed, 28 insertions(+), 29 deletions(-) diff --git a/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss b/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss index 99ac4d4e..b763dd09 100644 --- a/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss +++ b/src/v2/styles/ChannelSearch/ChannelSearch-theme.scss @@ -1,5 +1,6 @@ @use '../utils'; +/* Only available in React SDK. */ .str-chat { /* The text/icon color of the component */ --str-chat__channel-search-input-color: var(--str-chat__text-color); @@ -22,7 +23,6 @@ /* Right (left in RTL layout) borhe component */ --str-chat__channel-search-input-border-inline-end: none; - /* The border radius used for the borders of the component */ --str-chat__channel-search-input-wrapper-border-radius: var(--str-chat__border-radius-lg); @@ -30,16 +30,20 @@ --str-chat__channel-search-input-wrapper-background-color: transparent; /* Top border of the component */ - --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px solid; + --str-chat__channel-search-input-wrapper-border-block-start: var(--str-chat__surface-color) 1px + solid; /* Bottom border of the component */ - --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px solid; + --str-chat__channel-search-input-wrapper-border-block-end: var(--str-chat__surface-color) 1px + solid; /* Left (right in RTL layout) border of the component */ - --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px solid; + --str-chat__channel-search-input-wrapper-border-inline-start: var(--str-chat__surface-color) 1px + solid; /* Right (left in RTL layout) border of the component */ - --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px solid; + --str-chat__channel-search-input-wrapper-border-inline-end: var(--str-chat__surface-color) 1px + solid; /* The border radius used for the borders of the component */ --str-chat__channel-search-input-wrapper-active-border-radius: var(--str-chat__border-radius-lg); @@ -48,19 +52,20 @@ --str-chat__channel-search-input-wrapper-active-background-color: transparent; /* Top border of the component */ - --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color) 1px solid; + --str-chat__channel-search-input-wrapper-active-border-block-start: var(--str-chat__primary-color) + 1px solid; /* Bottom border of the component */ - --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color) 1px solid; + --str-chat__channel-search-input-wrapper-active-border-block-end: var(--str-chat__primary-color) + 1px solid; /* Left (right in RTL layout) border of the component */ - --str-chat__channel-search-input-wrapper-active-border-inline-start: var(--str-chat__primary-color) 1px solid; + --str-chat__channel-search-input-wrapper-active-border-inline-start: var(--str-chat__primary-color) + 1px solid; /* Right (left in RTL layout) border of the component */ - --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color) 1px solid; - - /* The font used in the component displaying channel search result */ - --str-chat__channel-search-result-font-family: var(--str-chat__font-family); + --str-chat__channel-search-input-wrapper-active-border-inline-end: var(--str-chat__primary-color) + 1px solid; /* The background applied to channel search result */ --str-chat__channel-search-result-background-color: transparent; @@ -78,10 +83,9 @@ --str-chat__channel-search-result-border-inline-end: none; /* Background color used for the search result hover / focused state */ - --str-chat__channel-search-result-hover-background-color: var(--str-chat__secondary-surface-color); - - /* The font used in the search results header */ - --str-chat__channel-search-results-header-font-family: var(--str-chat__font-family); + --str-chat__channel-search-result-hover-background-color: var( + --str-chat__secondary-surface-color + ); /* The font color used in the search results header */ --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color); @@ -93,7 +97,8 @@ --str-chat__channel-search-results-header-border-block-start: none; /* Bottom border of the component */ - --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px solid; + --str-chat__channel-search-results-header-border-block-end: var(--str-chat__surface-color) 1px + solid; /* Left (right in RTL layout) border of the component */ --str-chat__channel-search-results-header-border-inline-start: none; @@ -101,9 +106,6 @@ /* Right (left in RTL layout) border of the component */ --str-chat__channel-search-results-header-border-inline-end: none; - /* The font used in the empty search results indicator */ - --str-chat__channel-search-results-empty-font-family: var(--str-chat__font-family); - /* The font color used in the empty search results indicator */ --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color); @@ -132,8 +134,7 @@ input { @include utils.component-layer-overrides('channel-search-input'); outline: none; - font-size: 1rem; - line-height: 1rem; + font: var(--str-chat__subtitle-text); } .str-chat__channel-search-input--clear-button svg path { @@ -155,16 +156,13 @@ .str-chat__channel-search-results-header { @include utils.component-layer-overrides('channel-search-results-header'); - font-size: 1rem; - line-height: 1.25rem; + font: var(--str-chat__subtitle-text); } .str-chat__channel-search-result-list { .str-chat__channel-search-container-empty { @include utils.component-layer-overrides('channel-search-results-empty'); - font-weight: 500; - font-size: 1.25rem; - line-height: 1.5rem; + font: var(--str-chat__subtitle2-medium-text); svg path { fill: var(--str-chat__channel-search-results-empty-icon-color); @@ -188,5 +186,3 @@ background-color: var(--str-chat__channel-search-result-hover-background-color); } } - - diff --git a/src/v2/styles/_theme-variables.scss b/src/v2/styles/_theme-variables.scss index 65238c68..e61d3a56 100644 --- a/src/v2/styles/_theme-variables.scss +++ b/src/v2/styles/_theme-variables.scss @@ -106,6 +106,9 @@ /* The font used for subtitle texts */ --str-chat__subtitle2-text: 1.25rem/1.5rem var(--str-chat__font-family); + /* The font used for subtitle texts with emphasize */ + --str-chat__subtitle2-medium-text: 500 1.25rem/1.5rem var(--str-chat__font-family); + /* The font used for headline texts */ --str-chat__headline-text: 1.5rem/1.5rem var(--str-chat__font-family);