feat: Use font variables inside channel search

GetStream · Jul 28, 2022 · 06de378 · 06de378
1 parent e64897a
commit 06de378
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 29 deletions.
diff --git 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,24 +23,27 @@
   /* 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);
 
   /* The background color of the component */
   --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,17 +97,15 @@
   --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;
 
   /* 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
@@ -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);