Theme SCSS compile and CSS loading

MIGRATE-DEV-BS5.md

@@ -11,6 +11,7 @@ Module and Theme Migration Guide to Bootstrap 5
 
 - `humhub\widgets\ActiveForm` use `humhub\widgets\form\ActiveForm` instead
 - `js/humhub/legacy/jquery.loader.js`
+- CSS for User & Space picker
 
 
 ## New
@@ -52,12 +53,11 @@ Widget methods & properties:
 - `humhub\widgets\bootstrap\Button::htmlOptions` use `humhub\widgets\bootstrap\Button::options` instead
 - `humhub\widgets\bootstrap\Badge::htmlOptions` use `humhub\widgets\bootstrap\Badge::options` instead
 
+Name spaces starting with `yii\bootstrap`: use `yii\bootstrap5` instead (but see "HumHub widgets" bellow)
+
 Forms and Modal Dialog: see bellow.
 
-CSS variables: use the new ones prefixed with `--bs-` (for Bootstrap variables) or `--hh-` (for HumHub variables).
-See `static/scss/_variables.scss`.
-
-Name spaces starting with `yii\bootstrap`: use `yii\bootstrap5` instead (but see "HumHub widgets" bellow)
+SCSS and CSS variables: see bellow.
 
 
 ## HumHub widgets
@@ -415,8 +415,8 @@ Doc: https://getbootstrap.com/docs/5.3/customize/sass/
 ### Convert LESS to SCSS
 
 Rename `less` folder to `scss` and rename all `.less` files to `.scss`
-Prefix all SCSS files with `_` except the `build.scss` file.
-E.g.: `less/variables.less` -> `scss/_variables.scss`
+Prefix all SCSS files with `_` except the `build.scss` and `variables.scss` files.
+E.g.: `less/theme.less` -> `scss/_theme.scss`
 Linux command: `for file in *.less; do mv "$file" "_${file%.less}.scss"; done` and remove the `_` for the `build.scss` file
 
 You can use the following tool to convert LESS to SCSS: https://less2scss.awk5.com/
@@ -426,25 +426,37 @@ However, you need to check the output manually, mainly functions and syntaxes su
 
 An AI such as https://claude.ai/ might be more powerful to convert, but still requires manual checks.
 
-### Variables
+### SCSS and CSS variables
 
-Changes:
-- `$default` is deprecated. Use `$light` or `$secondary` instead.
-- New variables: `$secondary`, `$light` and `$dark`
+#### Changes
+
+Deprecated SCSS variables:
+- `$default`: use `$light` instead
+- `$link`: use `$link-color` instead
+
+New SCSS variables:
+- `$secondary`
+- `$light`
+- `$dark`
+
+#### CSS variable prefixes
 
 Use the new variables starting with `--bs-` for Bootstrap variables, and `--hh-` for HumHub variables.
 E.g.: `color: $primary` -> `color: var(--bs-primary)`
+Full deprecation list in `static/scss/variables.scss`.
 
-In modules, if you need new variables, prefix them with `--hh-xx-` where `xx` is the first letters of your module ID. E.g. `my-module` will use `hh-mm-`.
+In modules or custom themes, if you need new variables, prefix them with `--hh-xx-` where `xx` is the first letters of your module or theme ID. E.g. `my-module` will use `hh-mm-`.
 
-In all SCSS files (except in SASS functions), replace all SCSS variables with CSS variables, when available (see list in `_variables.scss`), except the one used in SCSS function (e.g. `lighten($primary, 5%)`). You can use regex:
+#### Use CSS variables instead of SCSS variables
+
+In all SCSS files (except in SASS functions), replace all SCSS variables with CSS variables, when available (see list in `variables.scss`), except the one used in SCSS function (e.g. `lighten($primary, 5%)`). You can use regex:
 - search: `\$([a-zA-Z0-9-_]+)`
 - replace: `var(--bs-$1)` (mainly for base colors such as `$primary`) or `var(--hh-$1)`
 
 #### Root vs component variables
 
 **Root variables** are global variables that can be used in any component.
-They are stored in this file: `_variables.scss`
+They are stored in this file: `_root.scss`
 See https://getbootstrap.com/docs/5.3/customize/css-variables/#root-variables
 
 **Component variables** only apply to the HTML elements having the related class (e.g. `.badge` for [Badge CSS variables](https://getbootstrap.com/docs/5.3/components/badge/#variables)), and HTML elements inside of it.
@@ -513,7 +525,7 @@ Many styles have been refactored. Please review all your overwritten CSS selecto
 
 #### Build file
 
-The `build.scss` file mustn't import parent theme files anymore, as it is automatically done by the new compiler.
+The `build.scss` file mustn't import the parent theme files anymore, as it is automatically done by the new compiler.
 
 Take example with the `HumHub` community theme.
 

protected/humhub/assets/AppAsset.php

@@ -12,7 +12,6 @@ use humhub\components\assets\WebStaticAssetBundle;
 use humhub\modules\content\assets\ContentAsset;
 use humhub\modules\content\assets\ContentHighlightAsset;
 use humhub\modules\file\assets\FileAsset;
-use yii\bootstrap5\BootstrapAsset;
 use yii\bootstrap5\BootstrapPluginAsset;
 use yii\jui\JuiAsset;
 use yii\validators\ValidationAsset;
@@ -54,7 +53,6 @@ class AppAsset extends WebStaticAssetBundle
         YiiAsset::class,
         ActiveFormAsset::class,
         ValidationAsset::class,
-        BootstrapAsset::class,
         BootstrapPluginAsset::class,
         BluebirdAsset::class,
         FontAwesomeAsset::class,

protected/humhub/config/assets-dev.php

@@ -10,7 +10,6 @@ return [
     'yii\bootstrap5\BootstrapPluginAsset' => [
         'depends' => [
             'yii\web\JqueryAsset',
-            'yii\bootstrap5\BootstrapAsset',
             'humhub\assets\JuiBootstrapBridgeAsset',
         ],
     ],

protected/humhub/config/assets-prod.php

@@ -2,7 +2,7 @@
 /**
  * This file is generated by the "yii asset" command.
  * DO NOT MODIFY THIS FILE DIRECTLY.
- * @version 2024-12-29 22:55:00
+ * @version 2025-01-02 09:41:07
  */
 return [
     'app' => [
@@ -96,21 +96,12 @@ return [
             'app',
         ],
     ],
-    'yii\\bootstrap5\\BootstrapAsset' => [
-        'sourcePath' => null,
-        'js' => [],
-        'css' => [],
-        'depends' => [
-            'app',
-        ],
-    ],
     'yii\\bootstrap5\\BootstrapPluginAsset' => [
         'sourcePath' => null,
         'js' => [],
         'css' => [],
         'depends' => [
             'yii\\web\\JqueryAsset',
-            'yii\\bootstrap5\\BootstrapAsset',
             'humhub\\assets\\JuiBootstrapBridgeAsset',
             'app',
         ],
@@ -246,7 +237,6 @@ return [
             'yii\\web\\YiiAsset',
             'yii\\widgets\\ActiveFormAsset',
             'yii\\validators\\ValidationAsset',
-            'yii\\bootstrap5\\BootstrapAsset',
             'yii\\bootstrap5\\BootstrapPluginAsset',
             'humhub\\assets\\BluebirdAsset',
             'humhub\\assets\\FontAwesomeAsset',

protected/humhub/config/assets.php

@@ -11,7 +11,6 @@ use humhub\assets\CoreBundleAsset;
 use humhub\assets\JuiBootstrapBridgeAsset;
 use humhub\components\assets\WebStaticAssetBundle;
 use humhub\modules\ui\view\components\View;
-use yii\bootstrap5\BootstrapAsset;
 use yii\bootstrap5\BootstrapPluginAsset;
 use yii\helpers\ArrayHelper;
 use yii\jui\JuiAsset;
@@ -85,7 +84,6 @@ return [
                 'js' => ['dist/js/bootstrap.bundle.min.js'],
                 'depends' => [
                     JqueryAsset::class,
-                    BootstrapAsset::class,
                     JuiBootstrapBridgeAsset::class,
                 ],
             ],

protected/humhub/modules/ui/view/components/Theme.php

@@ -102,7 +102,7 @@ class Theme extends BaseTheme
      *
      * @param bool $includeParents also register parent themes
      */
-    public function register($includeParents = true)
+    public function register($includeParents = false)
     {
         if (Yii::$app->request->isAjax) {
             return;

protected/humhub/modules/ui/view/helpers/ScssHelper.php

@@ -23,7 +23,7 @@ class ScssHelper
      */
     public static function getVariableFile(Theme $theme)
     {
-        return $theme->getBasePath() . '/scss/_variables.scss';
+        return $theme->getBasePath() . '/scss/variables.scss';
     }
 
 
@@ -53,7 +53,7 @@ class ScssHelper
             foreach ($matches as $match) {
                 $variableName = $match[1];
                 $variableValue = trim($match[2]);
-                $variables[$variableName] = $variableValue;
+                $variables[$variableName] = trim($variableValue, '"');
             }
 
             // Second pass: Resolve variables to their final values
@@ -69,7 +69,7 @@ class ScssHelper
                 while (isset($variables[$value]) && !isset($visited[$value])) {
                     $visited[$value] = true;
                     $value = $variables[$value];
-                    $value = ltrim($value, '$');
+                    $value = trim(ltrim($value, '$'), '"');
                 }
 
                 $resolvedVariables[$name] = $value;

protected/humhub/modules/ui/view/helpers/ThemeHelper.php

@@ -144,13 +144,8 @@ class ThemeHelper
      */
     public static function getAllVariables(Theme $theme): array
     {
-        $variables = ScssHelper::getVariables(Yii::getAlias('@webroot-static/scss/_variables.scss'));
+        $variables = ScssHelper::getVariables(Yii::getAlias('@webroot-static/scss/variables.scss'));
         foreach (array_reverse(static::getThemeTree($theme)) as $treeTheme) {
-            $eeVariablesFile = $treeTheme->getBasePath() . '/scss/_enterprise_variables.scss';
-            if (file_exists($eeVariablesFile)) {
-                $variables = ArrayHelper::merge($variables, ScssHelper::getVariables($eeVariablesFile));
-            }
-
             $variables = ArrayHelper::merge($variables, ScssHelper::getVariables(ScssHelper::getVariableFile($treeTheme)));
         }
 
@@ -197,12 +192,13 @@ class ThemeHelper
     {
         $themes = static::getThemes();
 
-        $variables = ScssHelper::getVariables(
+        $baseTheme = ScssHelper::getVariable(
             ScssHelper::getVariableFile($theme),
+            'baseTheme',
         );
 
-        if (isset($variables['baseTheme'], $themes[$variables['baseTheme']]) && $variables['baseTheme'] !== $theme->name) {
-            return $themes[$variables['baseTheme']];
+        if ($baseTheme && isset($themes[$baseTheme]) && $baseTheme !== $theme->name) {
+            return $themes[$baseTheme];
         }
 
         return null;
@@ -226,18 +222,27 @@ class ThemeHelper
     public static function buildCss(?Theme $theme = null): bool|string
     {
         $theme = $theme ?? Yii::$app->view->theme;
-
+        $treeThemes = array_reverse(static::getThemeTree($theme));
         $compiler = new Compiler();
         $imports = [];
 
+        // Set import paths
         $compiler->setImportPaths(Yii::getAlias('@bower/bootstrap/scss'));
-        $imports[] = Yii::getAlias('@bower/bootstrap/scss/bootstrap');
-
         $compiler->addImportPath(Yii::getAlias('@webroot-static/scss'));
-        $imports[] = Yii::getAlias('@webroot-static/scss/humhub');
-
-        foreach (array_reverse(static::getThemeTree($theme)) as $treeTheme) {
+        foreach ($treeThemes as $treeTheme) {
             $compiler->addImportPath($treeTheme->getBasePath() . '/scss');
+        }
+
+        // Import variables (bootstrap variables have a !default suffix to allow overwriting)
+        $imports[] = Yii::getAlias('@webroot-static/scss/variables');
+        foreach ($treeThemes as $treeTheme) {
+            $imports[] = $treeTheme->getBasePath() . '/scss/variables';
+        }
+
+        // Import all other files
+        $imports[] = Yii::getAlias('@bower/bootstrap/scss/bootstrap'); // includes the variables.scss file
+        $imports[] = Yii::getAlias('@webroot-static/scss/humhub');
+        foreach ($treeThemes as $treeTheme) {
             $imports[] = $treeTheme->getBasePath() . '/scss/build';
         }
 

static/scss/_button.scss

@@ -321,28 +321,28 @@
 
     &:hover,
     &:focus {
-        color: darken($link, 2%);
+        color: darken($link-color, 2%);
         text-decoration: none;
     }
 
     &:active,
     &.active {
         outline: 0;
-        color: darken($link, 2%) !important;
+        color: darken($link-color, 2%) !important;
     }
 }
 
 .btn-link[disabled],
 .btn-link.disabled {
-    color: lighten($link, 5%);
+    color: lighten($link-color, 5%);
 
     &:hover,
     &:focus {
-        color: lighten($link, 5%);
+        color: lighten($link-color, 5%);
     }
 
     &:active,
     &.active {
-        color: lighten($link, 5%) !important;
+        color: lighten($link-color, 5%) !important;
     }
 }

static/scss/_gridview.scss

@@ -7,7 +7,6 @@
     }
 }
 
-@import "form";
 .grid-view .filters input,
 .grid-view .filters select {
     @extend .form-control;

static/scss/_root.scss

@@ -0,0 +1,82 @@
+//
+// CSS Variables
+// $since 1.14.0
+// --------------------------------------------------
+
+
+:root {
+    // Text colors
+    --hh-text-color-main: #{$text-color-main};
+    --hh-text-color-default: #{$text-color-default};
+    --hh-text-color-secondary: #{$text-color-secondary};
+    --hh-text-color-highlight: #{$text-color-highlight};
+    --hh-text-color-soft: #{$text-color-soft};
+    --hh-text-color-soft2: #{$text-color-soft2};
+    --hh-text-color-soft3: #{$text-color-soft3};
+    --hh-text-color-contrast: #{$text-color-contrast};
+
+    // Background colors
+    --hh-background-color-main: #{$background-color-main};
+    --hh-background-color-secondary: #{$background-color-secondary};
+    --hh-background-color-page: #{$background-color-page};
+    --hh-background-color-highlight: #{$background-color-highlight};
+    --hh-background-color-highlight-soft: #{$background-color-highlight-soft};
+    --hh-background3: #{$background3};
+    --hh-background4: #{$background4};
+
+    // Bootstrap Alert boxes
+    // Success
+    --hh-background-color-success: #{$background-color-success};
+    --hh-text-color-success: #{$text-color-success};
+    --hh-border-color-success: #{$border-color-success};
+    // Warning
+    --hh-background-color-warning: #{$background-color-warning};
+    --hh-text-color-warning: #{$text-color-warning};
+    --hh-border-color-warning: #{$border-color-warning};
+    // Danger
+    --hh-background-color-danger: #{$background-color-danger};
+    --hh-text-color-danger: #{$text-color-danger};
+    --hh-border-color-danger: #{$border-color-danger};
+
+    // Fonts
+    --hh-mail-font-family: #{$mail-font-family};
+
+    // Dimensions
+    --hh-fixed-header-height: 130px;
+    --hh-fixed-footer-height: 0px; // Force keeping `px` after CSS compilation (required for `calc()` function)
+
+
+    // @deprecated since 1.18, use the above variable instead
+    --default: #{$default};
+    --primary: var(--bs-primary);
+    --info: var(--bs-info);
+    --success: var(--bs-success);
+    --warning: var(--bs-warning);
+    --danger: var(--bs-danger);
+    --link: var(--bs-link-color);
+    --text-color-main: #{$text-color-main};
+    --text-color-default: #{$text-color-default};
+    --text-color-secondary: #{$text-color-secondary};
+    --text-color-highlight: #{$text-color-highlight};
+    --text-color-soft: #{$text-color-soft};
+    --text-color-soft2: #{$text-color-soft2};
+    --text-color-soft3: #{$text-color-soft3};
+    --text-color-contrast: #{$text-color-contrast};
+    --background-color-main: #{$background-color-main};
+    --background-color-secondary: #{$background-color-secondary};
+    --background-color-page: #{$background-color-page};
+    --background-color-highlight: #{$background-color-highlight};
+    --background-color-highlight-soft: #{$background-color-highlight-soft};
+    --background3: #{$background3};
+    --background4: #{$background4};
+    --background-color-success: #{$background-color-success};
+    --text-color-success: #{$text-color-success};
+    --border-color-success: #{$border-color-success};
+    --background-color-warning: #{$background-color-warning};
+    --text-color-warning: #{$text-color-warning};
+    --border-color-warning: #{$border-color-warning};
+    --background-color-danger: #{$background-color-danger};
+    --text-color-danger: #{$text-color-danger};
+    --border-color-danger: #{$border-color-danger};
+    --mail-font-family: #{$mail-font-family};
+}

static/scss/_variables.scss

@@ -1,235 +0,0 @@
-// Import Bootstrap SCSS variables
-@import "../../protected/vendor/bower-asset/bootstrap/scss/_functions.scss";
-@import "../../protected/vendor/bower-asset/bootstrap/scss/_variables.scss";
-
-//
-// Colors for buttons status etc.
-// --------------------------------------------------
-
-$primary: #435f6f;
-$secondary: #7a7a7a;
-$info: #21A1B3;
-$success: #97d271;
-$warning: #FFC107;
-$danger: #FC4A64;
-$light: #e7e7e7;
-$dark: #333;
-$link: $info;
-$isFluid: false;
-
-$default: #e7e7e7; // @deprecated since 1.18
-
-
-//
-// Text colors
-// --------------------------------------------------
-
-// Default body text color.
-$text-color-main: #555;
-
-// used for default icons and buttons etc.
-$text-color-default: #4b4b4b;
-
-// used for some icons and buttons etc. - former $font2
-$text-color-secondary: #7a7a7a;
-
-// highlighted text like some active links hovered links etc. - former $font3
-$text-color-highlight: #000;
-
-// side information like dates, placeholder, some dropdown headers - former $font4
-$text-color-soft: #555555;
-
-// also side information wall entry links (like/comment), help blocks in forms etc.  - former $font5
-$text-color-soft2: #aeaeae;
-
-// used in gridview summary and installer - former $font1
-$text-color-soft3: #bac2c7;
-
-// used as contrast color for $primary, $info, $success, $warning, $danger backgrounds for buttons etc.
-// Note that $default does not use a contrast color $default is normally combined with $text-color-secondary
-$text-color-contrast: #fff;
-
-
-//
-// Background colors
-// --------------------------------------------------
-
-// main content background color should be in contrast with $text-color-main, $text-color-secondary and other text colors
-$background-color-main: #fff;
-
-// used beside others for tabs - former $background1
-$background-color-secondary: #f9f9f9;
-
-// page background which is also used for other ui components as comment box etc. - former $background2
-$background-color-page: #ededed;
-
-// Informative highlighting color
-// (e.g. Comment Permalink, Shared Item, Calendar CurDay, Wiki Active Page Nav, Mail Module Speech Bubble)
-$background-color-highlight: rgba($info, 0.2);
-
-// Informative highlighting soft color
-// (e.g. Wiki Active Category)
-$background-color-highlight-soft: lighten(desaturate(adjust-hue($info, 6), 16), 55);
-
-// Additional background colors
-$background3: #d7d7d7;
-$background4: #b2b2b2;
-
-
-//
-// Bootstrap Alert boxes
-// --------------------------------------------------
-
-// Alert box success (used in forms)
-$background-color-success: #f7fbf4;
-$text-color-success: #84be5e;
-$border-color-success: #97d271;
-
-// Alert box warning (used in forms)
-$background-color-warning: #fffbf7;
-$text-color-warning: #e9b168;
-$border-color-warning: #fdd198;
-
-// Alert box danger (used in forms)
-$background-color-danger: #fff6f6;
-$text-color-danger: #ff8989;
-$border-color-danger: #ff8989;
-
-
-//
-// Bootstrap Form Input
-// --------------------------------------------------
-
-$input-border-color: $gray-200;
-
-
-//
-// Fonts
-// --------------------------------------------------
-
-// Body fonts
-// $since 1.18
-$body-font-size: 14px;
-$body-font-weight: 400;
-$body-line-height: 1.5;
-
-// Mail Fonts
-$mail-font-family: 'Open Sans', Arial, Tahoma, Helvetica, sans-serif;
-
-
-//
-// CSS Variables
-// $since 1.14.0
-// --------------------------------------------------
-
-@function hex-to-rgb($hex) {
-    @return red($hex), green($hex), blue($hex);
-}
-
-:root {
-    // Bootstrap overwrite
-    // See all available Bootstrap CSS variables: @humhub/protected/vendor/bower-asset/bootstrap/dist/css/bootstrap.css
-    --bs-primary: #{$primary};
-    --bs-secondary: #{$secondary};
-    --bs-success: #{$success};
-    --bs-info: #{$info};
-    --bs-warning: #{$warning};
-    --bs-danger: #{$danger};
-    --bs-light: #{$light};
-    --bs-dark: #{$dark};
-    --bs-primary-rgb: #{hex-to-rgb($primary)};
-    --bs-secondary-rgb: #{hex-to-rgb($secondary)};
-    --bs-success-rgb: #{hex-to-rgb($success)};
-    --bs-info-rgb: #{hex-to-rgb($info)};
-    --bs-warning-rgb: #{hex-to-rgb($warning)};
-    --bs-danger-rgb: #{hex-to-rgb($danger)};
-    --bs-light-rgb: #{hex-to-rgb($light)};
-    --bs-dark-rgb: #{hex-to-rgb($dark)};
-    --bs-body-color-rgb: #{hex-to-rgb($text-color-main)};
-    --bs-body-bg-rgb: #{hex-to-rgb($background-color-page)};
-    --bs-font-sans-serif: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-    --bs-body-font-family: var(--bs-font-sans-serif);
-    --bs-body-font-size: #{$body-font-size};
-    --bs-body-font-weight: #{$body-font-weight};
-    --bs-body-line-height: #{$body-line-height};
-    --bs-body-color: #{$text-color-main};
-    --bs-body-bg: #{$background-color-page};
-    --bs-link-color: #{$link};
-    --bs-link-hover-color: #{darken($link, 10%)};
-    --bs-code-color: #{darken($info, 10%)};
-
-    // Text colors
-    --hh-text-color-main: #{$text-color-main};
-    --hh-text-color-default: #{$text-color-default};
-    --hh-text-color-secondary: #{$text-color-secondary};
-    --hh-text-color-highlight: #{$text-color-highlight};
-    --hh-text-color-soft: #{$text-color-soft};
-    --hh-text-color-soft2: #{$text-color-soft2};
-    --hh-text-color-soft3: #{$text-color-soft3};
-    --hh-text-color-contrast: #{$text-color-contrast};
-
-    // Background colors
-    --hh-background-color-main: #{$background-color-main};
-    --hh-background-color-secondary: #{$background-color-secondary};
-    --hh-background-color-page: #{$background-color-page};
-    --hh-background-color-highlight: #{$background-color-highlight};
-    --hh-background-color-highlight-soft: #{$background-color-highlight-soft};
-    --hh-background3: #{$background3};
-    --hh-background4: #{$background4};
-
-    // Bootstrap Alert boxes
-    // Success
-    --hh-background-color-success: #{$background-color-success};
-    --hh-text-color-success: #{$text-color-success};
-    --hh-border-color-success: #{$border-color-success};
-    // Warning
-    --hh-background-color-warning: #{$background-color-warning};
-    --hh-text-color-warning: #{$text-color-warning};
-    --hh-border-color-warning: #{$border-color-warning};
-    // Danger
-    --hh-background-color-danger: #{$background-color-danger};
-    --hh-text-color-danger: #{$text-color-danger};
-    --hh-border-color-danger: #{$border-color-danger};
-
-    // Fonts
-    --hh-mail-font-family: #{$mail-font-family};
-
-    // Dimensions
-    --hh-fixed-header-height: 130px;
-    --hh-fixed-footer-height: 0px; // Force keeping `px` after CSS compilation (required for `calc()` function)
-
-
-    // @deprecated since 1.18, use the above variable instead
-    --default: #{$default};
-    --primary: var(--bs-primary);
-    --info: var(--bs-info);
-    --success: var(--bs-success);
-    --warning: var(--bs-warning);
-    --danger: var(--bs-danger);
-    --link: var(--bs-link-color);
-    --text-color-main: #{$text-color-main};
-    --text-color-default: #{$text-color-default};
-    --text-color-secondary: #{$text-color-secondary};
-    --text-color-highlight: #{$text-color-highlight};
-    --text-color-soft: #{$text-color-soft};
-    --text-color-soft2: #{$text-color-soft2};
-    --text-color-soft3: #{$text-color-soft3};
-    --text-color-contrast: #{$text-color-contrast};
-    --background-color-main: #{$background-color-main};
-    --background-color-secondary: #{$background-color-secondary};
-    --background-color-page: #{$background-color-page};
-    --background-color-highlight: #{$background-color-highlight};
-    --background-color-highlight-soft: #{$background-color-highlight-soft};
-    --background3: #{$background3};
-    --background4: #{$background4};
-    --background-color-success: #{$background-color-success};
-    --text-color-success: #{$text-color-success};
-    --border-color-success: #{$border-color-success};
-    --background-color-warning: #{$background-color-warning};
-    --text-color-warning: #{$text-color-warning};
-    --border-color-warning: #{$border-color-warning};
-    --background-color-danger: #{$background-color-danger};
-    --text-color-danger: #{$text-color-danger};
-    --border-color-danger: #{$border-color-danger};
-    --mail-font-family: #{$mail-font-family};
-}

static/scss/humhub.scss

@@ -1,265 +1,221 @@
-@import "variables";
+// Variables are imported separately by the ThemeHelper class
 @import "mixins";
+@import "root";
 
 // Import base components. Components can be deactivated by $prev-* variables.
-$prev-base: false;
+$prev-base: false !default;
 @if not $prev-base {
     @import "base";
 }
 
-$prev-topbar: false;
+$prev-topbar: false !default;
 @if not $prev-topbar {
     @import "topbar";
 }
 
-$prev-login: false;
+$prev-login: false !default;
 @if not $prev-login {
     @import "login";
 }
 
-$prev-dropdown: false;
+$prev-dropdown: false !default;
 @if not $prev-dropdown {
     @import "dropdown";
 }
 
-$prev-media: false;
+$prev-media: false !default;
 @if not $prev-media {
     @import "media";
 }
 
-$prev-installer: false;
+$prev-installer: false !default;
 @if not $prev-installer {
     @import "installer";
 }
 
-$prev-pagination: false;
+$prev-pagination: false !default;
 @if not $prev-pagination {
     @import "pagination";
 }
 
-$prev-nav: false;
+$prev-nav: false !default;
 @if not $prev-nav {
     @import "nav";
 }
 
-$prev-button: false;
+$prev-button: false !default;
 @if not $prev-button {
     @import "button";
 }
 
-$prev-form: false;
+$prev-form: false !default;
 @if not $prev-form {
     @import "form";
 }
 
-$prev-notification: false;
+$prev-notification: false !default;
 @if not $prev-notification {
     @import "notification";
 }
 
-$prev-badge: false;
+$prev-badge: false !default;
 @if not $prev-badge {
     @import "badge";
 }
 
-$prev-popover: false;
+$prev-popover: false !default;
 @if not $prev-popover {
     @import "popover";
 }
 
-$prev-profile: false;
+$prev-profile: false !default;
 @if not $prev-profile {
     @import "profile";
 }
 
-$prev-list: false;
+$prev-list: false !default;
 @if not $prev-list {
     @import "list";
 }
 
-$prev-list-group: false;
+$prev-list-group: false !default;
 @if not $prev-list-group {
     @import "list-group";
 }
 
-$prev-modal: false;
+$prev-modal: false !default;
 @if not $prev-modal {
     @import "modal";
 }
 
-$prev-tooltip: false;
+$prev-tooltip: false !default;
 @if not $prev-tooltip {
     @import "tooltip";
 }
 
-$prev-progress: false;
+$prev-progress: false !default;
 @if not $prev-progress {
     @import "progress";
 }
 
-$prev-table: false;
+$prev-table: false !default;
 @if not $prev-table {
     @import "table";
 }
 
-$prev-comment: false;
+$prev-comment: false !default;
 @if not $prev-comment {
     @import "comment";
 }
 
-$prev-gridview: false;
+$prev-gridview: false !default;
 @if not $prev-gridview {
     @import "gridview";
 }
 
-$prev-oembed: false;
+$prev-oembed: false !default;
 @if not $prev-oembed {
     @import "oembed";
 }
 
-$prev-activities: false;
+$prev-activities: false !default;
 @if not $prev-activities {
     @import "activities";
 }
 
-$prev-stream: false;
+$prev-stream: false !default;
 @if not $prev-stream {
     @import "stream";
 }
 
-$prev-space: false;
+$prev-space: false !default;
 @if not $prev-space {
     @import "space";
 }
 
-$prev-file: false;
+$prev-file: false !default;
 @if not $prev-file {
     @import "file";
 }
 
-$prev-tour: false;
+$prev-tour: false !default;
 @if not $prev-tour {
     @import "tour";
 }
 
-$prev-mentioning: false;
+$prev-mentioning: false !default;
 @if not $prev-mentioning {
     @import "mentioning";
 }
 
-$prev-markdown: false;
+$prev-markdown: false !default;
 @if not $prev-markdown {
     @import "markdown";
 }
 
-$prev-sidebar: false;
+$prev-sidebar: false !default;
 @if not $prev-sidebar {
     @import "sidebar";
 }
 
-$prev-datepicker: false;
+$prev-datepicker: false !default;
 @if not $prev-datepicker {
     @import "datepicker";
 }
 
-$prev-user-feedback: false;
+$prev-user-feedback: false !default;
 @if not $prev-user-feedback {
     @import "user-feedback";
 }
 
-$prev-tags: false;
+$prev-tags: false !default;
 @if not $prev-tags {
     @import "tags";
 }
 
-$prev-richtext: false;
+$prev-richtext: false !default;
 @if not $prev-richtext {
     @import "richtext";
 }
 
-$prev-mobile: false;
+$prev-mobile: false !default;
 @if not $prev-mobile {
     @import "mobile";
 }
 
-$prev-icon: false;
+$prev-icon: false !default;
 @if not $prev-icon {
     @import "icon";
 }
 
-$prev-print: false;
+$prev-print: false !default;
 @if not $prev-print {
     @import "print";
 }
 
-$prev-cards: false;
+$prev-cards: false !default;
 @if not $prev-cards {
     @import "cards";
 }
 
-$prev-modules: false;
+$prev-modules: false !default;
 @if not $prev-modules {
     @import "modules";
 }
 
-$prev-search: false;
+$prev-search: false !default;
 @if not $prev-search {
     @import "search";
 }
 
-$prev-select2: false;
+$prev-select2: false !default;
 @if not $prev-select2 {
     @import "select2";
 }
 
 // TODO: Remove this when Bootstrap 3 is no longer supported
 // TODO: When converted to SCSS, move it to `mixins/deprecate` and wrap it in `$include deprecate("The `old-mixin()` mixin") { ... }`
-$prev-bootstrap3: false;
+$prev-bootstrap3: false !default;
 @if not $prev-bootstrap3 {
     @import "bootstrap3";
 }
-
-// LEGACY/DEPRECATED User- & Space picker
-ul.tag_input {
-    list-style: none;
-    background-color: $background-color-main;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-    padding: 0 0 9px 4px;
-
-    li img {
-        margin: 0 5px 0 0;
-    }
-}
-
-.tag_input_field {
-    outline: none;
-    border: none !important;
-    padding: 5px 4px 0 !important;
-    width: 170px;
-    margin: 2px 0 0 !important;
-}
-
-.userInput,
-.spaceInput {
-    background-color: var(--bs-info);
-    font-weight: 600;
-    color: $text-color-contrast;
-    border-radius: 3px;
-    font-size: 12px !important;
-    padding: 2px;
-    float: left;
-    margin: 3px 4px 0 0;
-}
-
-.userInput i,
-.spaceInput i {
-    padding: 0 6px;
-    font-size: 14px;
-    cursor: pointer;
-    line-height: 8px;
-}

static/scss/variables.scss

@@ -0,0 +1,117 @@
+$isFluid: false;
+
+//
+// Colors for buttons status etc.
+// --------------------------------------------------
+
+$primary: #435f6f;
+$secondary: #7a7a7a;
+$info: #21A1B3;
+$success: #97d271;
+$warning: #FFC107;
+$danger: #FC4A64;
+$light: #e7e7e7;
+$dark: #333;
+
+$link-color: $info;
+$link-hover-color: darken($link-color, 10%);
+$code-color: darken($info, 10%);
+$body-color: #555;
+$body-bg: #ededed;
+
+$default: #e7e7e7; // @deprecated since 1.18
+$link: $link-color; // @deprecated since 1.18
+
+//
+// Text colors
+// --------------------------------------------------
+
+// Default body text color.
+$text-color-main: $body-color;
+
+// used for default icons and buttons etc.
+$text-color-default: #4b4b4b;
+
+// used for some icons and buttons etc. - former $font2
+$text-color-secondary: #7a7a7a;
+
+// highlighted text like some active links hovered links etc. - former $font3
+$text-color-highlight: #000;
+
+// side information like dates, placeholder, some dropdown headers - former $font4
+$text-color-soft: #555555;
+
+// also side information wall entry links (like/comment), help blocks in forms etc.  - former $font5
+$text-color-soft2: #aeaeae;
+
+// used in gridview summary and installer - former $font1
+$text-color-soft3: #bac2c7;
+
+// used as contrast color for $primary, $info, $success, $warning, $danger backgrounds for buttons etc.
+// Note that $default does not use a contrast color $default is normally combined with $text-color-secondary
+$text-color-contrast: #fff;
+
+
+//
+// Background colors
+// --------------------------------------------------
+
+// main content background color should be in contrast with $text-color-main, $text-color-secondary and other text colors
+$background-color-main: #fff;
+
+// used beside others for tabs - former $background1
+$background-color-secondary: #f9f9f9;
+
+// page background which is also used for other ui components as comment box etc. - former $background2
+$background-color-page: $body-bg;
+
+// Informative highlighting color
+// (e.g. Comment Permalink, Shared Item, Calendar CurDay, Wiki Active Page Nav, Mail Module Speech Bubble)
+$background-color-highlight: rgba($info, 0.2);
+
+// Informative highlighting soft color
+// (e.g. Wiki Active Category)
+$background-color-highlight-soft: lighten(desaturate(adjust-hue($info, 6), 16), 55);
+
+// Additional background colors
+$background3: #d7d7d7;
+$background4: #b2b2b2;
+
+
+//
+// Bootstrap Alert boxes
+// --------------------------------------------------
+
+// Alert box success (used in forms)
+$background-color-success: #f7fbf4;
+$text-color-success: #84be5e;
+$border-color-success: #97d271;
+
+// Alert box warning (used in forms)
+$background-color-warning: #fffbf7;
+$text-color-warning: #e9b168;
+$border-color-warning: #fdd198;
+
+// Alert box danger (used in forms)
+$background-color-danger: #fff6f6;
+$text-color-danger: #ff8989;
+$border-color-danger: #ff8989;
+
+
+//
+// Fonts
+// --------------------------------------------------
+
+$font-family-base: 'Open Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: $font-family-base;
+$font-size-base: 1rem;
+$font-weight-base: 400;
+$mail-font-family: 'Open Sans', Arial, Tahoma, Helvetica, sans-serif;
+
+
+//
+// Other Bootstrap overwritten variables
+// --------------------------------------------------
+
+$line-height-base: 1.5;
+$input-border-color: #e9ecef;

themes/HumHub/scss/_root.scss

@@ -0,0 +1,8 @@
+/**
+ * Define or overwrite your CSS root variables here.
+ * Prefix your variables with --hh and the theme name to avoid conflicts
+ * E.g., if the theme is "My Theme": --hh-mt-my-variable: #fff;
+**/
+
+:root {
+}

themes/HumHub/scss/build.scss

@@ -1,5 +1,7 @@
-// Overwrite default variables and mixins here
-@import "variables";
+// Variables are imported separately by the ThemeHelper class
+
+// define root CSS variables
+@import "root";
 
 // Define mixins
 @import "mixins";

themes/HumHub/scss/variables.scss

@@ -1,11 +1,10 @@
 /**
  * Define or overwrite your theme variables here.
- * If a SCSS variable is overwritten, the equivalent CSS variables must be overwritten too
  *
  * Use the `baseTheme` variable to define the parent theme. E.g.:
  * $baseTheme: "HumHub";
  *
- * Check for @humhub/static/scss/_variables.scss file for all available variables.
+ * Check for @humhub/static/scss/variables.scss file for all available variables.
  *
  * You can also access your variables within your view files by calling Yii::$app->view->theme->variable('myVariable');
  *