blue-web 1.12.0 → 1.13.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.12.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.13.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -7,6 +7,7 @@
 
 @import "node_modules/bootstrap/scss/functions";
 @import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
 @import "./styles/variables";
 
 @import "./styles/mixins";

package/dist/styles/_bootstrap-variables.scss

@@ -1,5 +1,6 @@
 // Main color theme. E.g. used for background for body and sidebar.
 $theme: hsl(217deg 10% 94%) !default;
+$theme-dark: hsl(217deg 10% 8%) !default;
 $primary: hsl(217deg 91% 50%) !default;
 $white: #fff !default;
 $gray-100: hsl(217deg 17% 98%) !default;
@@ -12,8 +13,6 @@ $gray-700: hsl(217deg 9% 31%) !default;
 $gray-800: hsl(217deg 10% 23%) !default;
 $gray-900: hsl(217deg 11% 15%) !default;
 $black: #000 !default;
-$header-color: $gray-900 !default;
-$sidebar-color: $gray-900 !default;
 
 $light: #ecedf0 !default;
 

package/dist/styles/_collapse.scss

@@ -4,10 +4,6 @@
 .blue-collapse {
     interpolate-size: allow-keywords;
 
-    &:has(summary:focus) {
-        overflow: hidden;
-    }
-
     summary {
         list-style: none;
     }

package/dist/styles/_hover.scss

@@ -1,10 +1,3 @@
-.blue-btn-silent {
-    &:not(:hover):not(:focus):not(:active) {
-        border-color: transparent;
-        color: inherit;
-    }
-}
-
 @media (hover: hover) {
     .blue-d-hover {
         &:not(:hover):not(:focus):not(:active):not(.active):not(:focus-within) {

package/dist/styles/_menu-item.scss

@@ -17,7 +17,12 @@
 }
 
 .blue-menu-item {
-    transition: width 0.5s, background-color 0.3s, color 0.15s, box-shadow 0.3s, opacity 0.3s !important;
+    transition:
+        width 0.5s,
+        background-color 0.3s,
+        color 0.15s,
+        box-shadow 0.3s,
+        opacity 0.3s !important;
 
     @media (prefers-reduced-motion) {
         transition: none !important;
@@ -83,65 +88,6 @@
     }
 }
 
-.blue-sidebar .blue-menu-item-dropdown {
-    --blue-sidebar-bg: var(--blue-sidebar-depth-1-bg, #{$sidebar-deep-bg});
-
-    &::before {
-        background-color: var(--blue-sidebar-bg);
-        box-shadow: 0 0.5rem 1rem $black;
-        opacity: 0.15;
-        border-color: currentColor;
-    }
-
-    .blue-menu-item-dropdown {
-        --blue-sidebar-bg: var(--blue-sidebar-depth-2-bg, #{darken($sidebar-deep-bg, 4%)});
-
-        .blue-menu-item-dropdown {
-            --blue-sidebar-bg: var(--blue-sidebar-depth-3-bg, #{darken($sidebar-deep-bg, 8%)});
-
-            .blue-menu-item-dropdown {
-                --blue-sidebar-bg: var(--blue-sidebar-depth-4-bg, #{darken($sidebar-deep-bg, 12%)});
-
-                .blue-menu-item-dropdown {
-                    --blue-sidebar-bg: var(--blue-sidebar-depth-5-bg, #{darken($sidebar-deep-bg, 16%)});
-
-                    .blue-menu-item-dropdown {
-                        --blue-sidebar-bg: var(--blue-sidebar-depth-6-bg, #{darken($sidebar-deep-bg, 20%)});
-                    }
-                }
-            }
-        }
-    }
-}
-
-.blue-header .blue-menu-item-dropdown {
-    --blue-sidebar-bg: #{$header-deep-bg};
-
-    &::before {
-        background-color: var(--blue-header-bg);
-    }
-
-    .blue-menu-item-dropdown {
-        --blue-sidebar-bg: #{darken($header-deep-bg, 4%)};
-
-        .blue-menu-item-dropdown {
-            --blue-sidebar-bg: #{darken($header-deep-bg, 8%)};
-
-            .blue-menu-item-dropdown {
-                --blue-sidebar-bg: #{darken($header-deep-bg, 12%)};
-
-                .blue-menu-item-dropdown {
-                    --blue-sidebar-bg: #{darken($header-deep-bg, 16%)};
-
-                    .blue-menu-item-dropdown {
-                        --blue-sidebar-bg: #{darken($header-deep-bg, 20%)};
-                    }
-                }
-            }
-        }
-    }
-}
-
 .blue-menu-item-dropdown-caret.blue-caret {
     display: none;
     position: absolute;

package/dist/styles/_variables.scss

@@ -2,21 +2,11 @@ $theme-colors: () !default;
 // stylelint-disable-next-line scss/dollar-variable-default
 $theme-colors: map-merge(
     (
-        "theme": $theme,
-        "white": white,
-        "black": #212529
+        "theme": $theme
     ),
     $theme-colors
 );
 
-// For Bootstrap 5.1 this needs to be set. Otherwise we couldn't use .bg-* and .text-* utils with our custom $theme
-// Since Bootstrap 5.2 it's no longer required, so it's commented out. If everything works fine, this can be removed for
-// future releases.
-// $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
-// $utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
-// $utilities-text-colors: map-merge($utilities-text-colors, map-loop($utilities-colors, rgba-css-var, "$key", "text"));
-// $utilities-bg-colors: map-merge($utilities-bg-colors, map-loop($utilities-colors, rgba-css-var, "$key", "bg"));
-
 // Alpha value (RGBA) e.g. for header background.
 $shimmering: 0.8 !default;
 
@@ -54,6 +44,7 @@ $bla-sidebar-width: 16.563rem !default;
 
 // Background of sidebar.
 $sidebar-bg: $theme !default;
+$sidebar-bg-dark: $theme-dark !default;
 
 // Background of sidebar when it's opened (on mobile devices).
 $sidebar-open-bg: darken($sidebar-bg, 30%) !default;
@@ -62,25 +53,27 @@ $sidebar-open-bg: darken($sidebar-bg, 30%) !default;
 $sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
 
 // Text color of sidebar.
-$sidebar-color: #fff !default;
+$sidebar-color: color-contrast($sidebar-bg, $gray-900) !default;
+$sidebar-color-dark: color-contrast($sidebar-bg-dark, $gray-900) !default;
 
 // Color of indicator for active sidebar item.
 $sidebar-indicator-color: $sidebar-color !default;
+$sidebar-indicator-color-dark: $sidebar-color-dark !default;
 
 // Background of search control in sidebar.
 $sidebar-search-bg: $input-bg !default;
 
 // Background of the body element
-$app-bg: $sidebar-bg !default;
-
-// Text color of header elements
-$header-color: #fff !default;
+$app-bg: $theme !default;
+$app-bg-dark: $theme-dark !default;
 
 // Background color of Header
 $header-bg: $theme !default;
+$header-bg-dark: $theme-dark !default;
 
-// Background color of Header as RGB (like `255, 255, 255`).
-$header-bg-rgb: red($header-bg), green($header-bg), blue($header-bg) !default;
+// Text color of header elements
+$header-color: color-contrast($header-bg, $gray-900) !default;
+$header-color-dark: color-contrast($header-bg-dark, $gray-900) !default;
 
 // Background of header action menu dropdown menus
 $header-deep-bg: darken($header-bg, 4%) !default;
@@ -101,6 +94,8 @@ $sidebar-shrink-breakpoint: 600px !default;
 $sidebar-expanded-breakpoint: 1400px !default;
 
 :root {
+    --blue-app-bg: #{$app-bg};
+
     --blue-scrollbar-thumb-color-rgb: #{$scrollbar-thumb-color-rgb};
     --blue-scrollbar-size: #{$scrollbar-size};
 
@@ -109,27 +104,24 @@ $sidebar-expanded-breakpoint: 1400px !default;
     --blue-theme: var(--theme, #{$theme});
     --blue-shimmering: 0.9;
 
-    --blue-app-bg: #{$app-bg};
-
     --blue-sidebar-bg: #{$sidebar-bg};
-    --blue-sidebar-depth-1-bg: #{darken($sidebar-bg, 4%)};
-    --blue-sidebar-depth-2-bg: #{darken(darken($sidebar-bg, 4%), 4%)};
-    --blue-sidebar-depth-3-bg: #{darken(darken($sidebar-bg, 4%), 8%)};
-    --blue-sidebar-depth-4-bg: #{darken(darken($sidebar-bg, 4%), 12%)};
-    --blue-sidebar-depth-5-bg: #{darken(darken($sidebar-bg, 4%), 16%)};
-    --blue-sidebar-depth-6-bg: #{darken(darken($sidebar-bg, 4%), 20%)};
-
     --blue-header-bg: #{$header-bg};
-    --blue-header-bg-rgb: #{$header-bg-rgb};
-    --blue-header-depth-1-bg: #{darken($header-bg, 4%)};
-    --blue-header-depth-2-bg: #{darken(darken($header-bg, 4%), 4%)};
-    --blue-header-depth-3-bg: #{darken(darken($header-bg, 4%), 8%)};
-    --blue-header-depth-4-bg: #{darken(darken($header-bg, 4%), 12%)};
-    --blue-header-depth-5-bg: #{darken(darken($header-bg, 4%), 16%)};
-    --blue-header-depth-6-bg: #{darken(darken($header-bg, 4%), 20%)};
 
     --blue-header-color: #{$header-color};
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
     --blue-menu-item-height: #{$normal-size};
 }
+
+@include color-mode(dark, true) {
+    --blue-app-bg: #{$app-bg-dark};
+
+    --blue-sidebar-color: #{$sidebar-color-dark};
+
+    --blue-sidebar-bg: #{$sidebar-bg-dark};
+    --blue-header-bg: #{$header-bg-dark};
+
+    --blue-header-color: #{$header-color-dark};
+
+    --blue-menu-item-indicator-bg: #{$sidebar-indicator-color-dark};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.12.0",
+    "version": "1.13.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",
@@ -49,6 +49,7 @@
         "autoprefixer": "^10.3.6",
         "babel-loader": "^8.4.1",
         "blue-react": "^10.0.1",
+        "colorjs.io": "^0.5.2",
         "gh-pages": "^3.1.0",
         "license-report": "^6.2.0",
         "lint-staged": "^11.1.2",