feat: Rename theme variables to global variables, and separate them i…

…nto theme and layout groups

doc-templates/global-variables.template.mdx

@@ -0,0 +1,35 @@
+---
+id: global-variables
+sidebar_position: 2
+title: Global variables
+---
+
+import SDKSpecific from './SDKSpecific';
+
+CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
+
+- Global
+- Component
+
+This page contains information about the global variables.
+
+Global variables can be grouped into the following categories:
+
+- Theme: colors, typography and border radiuses
+- Layout: spacing (padding and margin) and sizing
+
+You can read about each category in detail in the tables below.
+
+## Theme variables
+
+[//]: # '#SLOT-autogenerated-theme-variables'
+
+All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/\_global-theme-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_global-theme-variables.scss)
+
+## Layout variables
+
+[//]: # '#SLOT-autogenerated-layout-variables'
+
+All global theme variables are defined in: [https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/\_global-layout-variables.scss](https://github.com/GetStream/stream-chat-css/blob/main/src-v2/styles/_global-layout-variables.scss)
+
+If you find that these variables are too high-level and you need more granular control, you also have the option to provide [component layer overrides](./component-variables.mdx).

doc-templates/palette-variables.template.mdx

@@ -6,7 +6,7 @@ title: Palette variables
 
 import SDKSpecific from './SDKSpecific';
 
-A color palette is defined inside the library that used to define default values for the [theme variables](./theme-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [theme variables](./theme-variables.mdx).
+A color palette is defined inside the library that used to define default values for the [global theme variables](./global-variables.mdx). If you want to work with the default theme but want to adjust the shades (for example, change `blue500` to a lighter color), you can update the palette variables. However, if you want to change the color scheme of the theme (for example, change the primary color from blue to green), you should take a look at [global theme variables](./global-variables.mdx).
 
 [//]: # '#SLOT-autogenerated-palette-variables'
 

docs/theming/introduction.mdx

@@ -86,25 +86,20 @@ Our theming system has various customization options allowing for both smaller a
 
 CSS variables are the easiest way to customize the theme. The variables are organized into two layers:
 
-- theme
+- global
 - component
 
-#### Theme variables
+#### Global variables
 
-You can use theme layer variables to apply changes to the whole chat UI (as opposed to changing the design of individual components). These variables can be grouped into four categories:
+You can use global variables to apply changes to the whole chat UI (as opposed to changing the design of individual components).
 
-- Colors
-- Fonts
-- Border radiuses
-- Spacing (makes the chat UI more spacious/compact)
-
-The [full list of theme variables](./theme-variables.mdx) can be found in our theme variables guide.
+The [full list of global variables](./global-variables.mdx) can be found in our global variables guide.
 
 Here is the default chat UI:
 
 <img src={ChatUiScreenshot} width='500' />
 
-Here is how you can customize theme variables:
+Here is how you can customize global variables:
 
 <SDKSpecific name="angular">
 
@@ -330,6 +325,8 @@ The result will be a minimalistic UI without
 - borders
 - shadows
 
+Please note that if you're only using the layout rules, you can only use the layout CSS variables.
+
 ## Dark and light themes
 
 The default theme has dark and light variants. Here is how you can switch between the different themes:

scripts/generate-docs.ts

@@ -1,12 +1,14 @@
 import * as fs from 'fs';
 import { extractVariables } from './parser';
-import { getComponentVariablesOutput, getPaletteVariablesOutput, getThemeVariablesOutput } from './output';
+import { getComponentVariablesOutput, getPaletteVariablesOutput, getGlobalVariablesOutput } from './output';
 
-const themeVariables = extractVariables('./src/v2/styles/_theme-variables.scss');
-const componentVariables = extractVariables('./src/v2/**/*-@(theme|layout).scss', themeVariables);
+const globalThemeVariables = extractVariables('./src/v2/styles/_global-theme-variables.scss');
+const globalLayoutVariables = extractVariables('./src/v2/styles/_global-layout-variables.scss');
+const componentVariables = extractVariables('./src/v2/**/*-@(theme|layout).scss', globalThemeVariables);
 const paletteVariables = extractVariables('./src/v2/styles/_palette-variables.scss');
 
-const themeVariablesOutput = getThemeVariablesOutput(themeVariables);
+const globalThemeVariablesOutput = getGlobalVariablesOutput(globalThemeVariables);
+const globalLayoutVariablesOutput = getGlobalVariablesOutput(globalLayoutVariables);
 const componentVariablesOutput = getComponentVariablesOutput(componentVariables);
 const paletteVariablesOutput = getPaletteVariablesOutput(paletteVariables);
 
@@ -29,12 +31,20 @@ updateAutogeneratedSlot(
 );
 
 updateAutogeneratedSlot(
-  `./doc-templates/theme-variables.template.mdx`,
+  `./doc-templates/global-variables.template.mdx`,
   `[//]: # '#SLOT-autogenerated-theme-variables'`,
-  themeVariablesOutput,
-  `./docs/theming/theme-variables.mdx`,
+  globalThemeVariablesOutput,
+  `./docs/theming/global-variables.mdx`,
 );
 
+updateAutogeneratedSlot(
+  `./docs/theming/global-variables.mdx`,
+  `[//]: # '#SLOT-autogenerated-layout-variables'`,
+  globalLayoutVariablesOutput,
+  `./docs/theming/global-variables.mdx`,
+);
+
+
 updateAutogeneratedSlot(
   `./doc-templates/component-variables.template.mdx`,
   `[//]: # '#SLOT-autogenerated-component-variables'`,

scripts/output.ts

@@ -11,7 +11,7 @@ const row = (v: VariableInfo, group: Group) => {
   return dedent`${group.columns.map(c => `| ${c.type === 'code' ? '\`' : ''}${info[c.key] || ''}${c.type === 'code' ? '\`' : ''}`).join('')}|`;
 };
 
-export const getThemeVariablesOutput = (data: Map<string, VariableInfo>) => {
+export const getGlobalVariablesOutput = (data: Map<string, VariableInfo>) => {
   const nameColumn: Column = {name: 'Name', key: 'name', type: 'code'};
   const valueColumn: Column = {name: 'Value', key: 'value', type: 'code'};
   const valueDarkColumn: Column = {name: 'Value (dark mode)', key: 'valueDarkMode', type: 'code'};
@@ -20,19 +20,20 @@ export const getThemeVariablesOutput = (data: Map<string, VariableInfo>) => {
 
   const groups = [
     {name: 'Colors', regexp: /color/, columns: [nameColumn, valueColumn, valueDarkColumn, descriptionColumn, usedInColumn]},
-    {name: 'Fonts', regexp: /(__font|-text)/, columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn]},
+    {name: 'Typography', regexp: /(__font|-text)/, columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn]},
     {name: 'Spacing', regexp: /spacing/, columns: [nameColumn, valueColumn, descriptionColumn]},
     {name: 'Radius', regexp: /__border-radius/, columns: [nameColumn, valueColumn, descriptionColumn, usedInColumn]},
     {name: 'Others', regexp: /.*/, columns: [nameColumn, valueColumn, descriptionColumn]}
   ]
 
   const variablesByGroups: Map<Group, string[]> = new Map();
 
-  groups.forEach(g => variablesByGroups.set(g, []));
-
   data.forEach((variable) => {
     for (const group of groups) {
       if (group.regexp.test(variable.name)) {
+        if (!variablesByGroups.get(group)) {
+          variablesByGroups.set(group, []);
+        }
         variablesByGroups.get(group)!.push(row(variable, group));
         break;
       }
@@ -41,11 +42,13 @@ export const getThemeVariablesOutput = (data: Map<string, VariableInfo>) => {
 
   let output = '';
   groups.forEach(group => {
-    const header = group.columns.map(c => `| ${c.name}`).join('') + `| \n` + group.columns.map(() => '|-').join('') + `|`;
-    output += dedent`
-      ## ${group.name}
-      ${header}
-      ${variablesByGroups.get(group)!.join('\n')}\n\n`;
+    if (variablesByGroups.get(group)) {
+      const header = group.columns.map(c => `| ${c.name}`).join('') + `| \n` + group.columns.map(() => '|-').join('') + `|`;
+      output += dedent`
+        ### ${group.name}
+        ${header}
+        ${variablesByGroups.get(group)!.join('\n')}\n\n`;
+    }
   });
 
   return format(output);

src/v2/styles/_global-layout-variables.scss

@@ -0,0 +1,65 @@
+// Since Angular uses dynamic components it's not enough the hide the message input for theme-v1/v2, we have to remove it from the DOM tree
+// Angular component lifecycle requires us to place this on the root level
+:root {
+  /* The theme version being used, 1 or 2. Used internally by SDKs */
+  --str-chat__theme-version: 2;
+}
+
+.str-chat {
+  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
+  --str-chat__spacing-px: 1px;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-0_5: 0.125rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-1: 0.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-1_5: 0.375rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-2: 0.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-2_5: 0.625rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-3: 0.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-3_5: 0.875rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-4: 1rem; // 16px by default
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-5: 1.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-6: 1.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-7: 1.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-8: 2rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-9: 2.25rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-10: 2.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-11: 2.75rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-12: 3rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-14: 3.5rem;
+
+  /* Used for margins and paddings */
+  --str-chat__spacing-16: 4rem;
+}

src/v2/styles/_theme-variables.scss → src/v2/styles/_global-theme-variables.scss

@@ -1,68 +1,4 @@
-// Since Angular uses dynamic components it's not enough the hide the message input for theme-v1/v2, we have to remove it from the DOM tree
-// Angular component lifecycle requires us to place this on the root level
-:root {
-  /* The theme version being used, 1 or 2. Used internally by SDKs */
-  --str-chat__theme-version: 2;
-}
-
 .str-chat {
-  /* Used for elements where sizing is necessary (such as icons, avatar), you can use this variable to scale those elements */
-  --str-chat__spacing-px: 1px;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-0_5: 0.125rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1: 0.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-1_5: 0.375rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2: 0.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-2_5: 0.625rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3: 0.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-3_5: 0.875rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-4: 1rem; // 16px by default
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-5: 1.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-6: 1.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-7: 1.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-8: 2rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-9: 2.25rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-10: 2.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-11: 2.75rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-12: 3rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-14: 3.5rem;
-
-  /* Used for margins and paddings */
-  --str-chat__spacing-16: 4rem;
-
   /* Border radius used for slightly rounded elements */
   --str-chat__border-radius-xs: 8px;
 

src/v2/styles/index.layout.scss

@@ -1,6 +1,5 @@
 @use 'base';
-@use 'palette-variables';
-@use 'theme-variables';
+@use 'global-layout-variables';
 
 @use 'Avatar/Avatar-layout';
 @use 'AttachmentList/AttachmentList-layout';

src/v2/styles/index.scss

@@ -1,4 +1,6 @@
 @use 'index.layout.scss';
+@use 'palette-variables';
+@use 'global-theme-variables';
 
 @use 'vendor/emoji-mart.scss';