blue-web 1.11.1 → 1.13.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.11.1 (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";
@@ -37,3 +38,6 @@
 @import "./styles/tabs";
 @import "./styles/modal";
 @import "./styles/layout";
+@import "./styles/collapse";
+
+@import "./styles/inter";

package/dist/styles/_bootstrap-variables.scss

@@ -1,3 +1,19 @@
+// 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;
+$gray-200: hsl(217deg 16% 93%) !default;
+$gray-300: hsl(217deg 14% 89%) !default;
+$gray-400: hsl(217deg 14% 83%) !default;
+$gray-500: hsl(217deg 11% 71%) !default;
+$gray-600: hsl(217deg 7% 46%) !default;
+$gray-700: hsl(217deg 9% 31%) !default;
+$gray-800: hsl(217deg 10% 23%) !default;
+$gray-900: hsl(217deg 11% 15%) !default;
+$black: #000 !default;
+
 $light: #ecedf0 !default;
 
 // Components
@@ -21,9 +37,6 @@ $custom-checkbox-indicator-border-radius: $border-radius-sm !default;
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen-Sans,
-    Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
-
 // Tint focus border and shadow in primary color.
 // In a future Bootstrap release, this might not be necessary anymore.
 $focus-ring-color: #{rgba(var(--bs-primary-rgb), 25%)} !default;

package/dist/styles/_collapse.scss

@@ -0,0 +1,53 @@
+// Collapse with details and animated
+// Right now not part of Blue Web, but could become one
+
+.blue-collapse {
+    interpolate-size: allow-keywords;
+
+    summary {
+        list-style: none;
+    }
+
+    summary::-webkit-details-marker {
+        display: none;
+    }
+
+    .blue-collapse-chevron {
+        transition: transform 0.2s;
+    }
+
+    &[open] > summary > .blue-collapse-header > .blue-collapse-chevron,
+    &[open] > summary > .blue-collapse-chevron {
+        --blue-collapse-chevron-rotate: 90deg;
+
+        // If chevron is on the end, rotate has to be -90deg
+        &:is(:last-child) {
+            --blue-collapse-chevron-rotate: -90deg;
+        }
+
+        &:is(:first-child) {
+            --blue-collapse-chevron-rotate: 90deg;
+        }
+
+        transform: rotate(var(--blue-collapse-chevron-rotate));
+    }
+
+    &::details-content {
+        block-size: 0;
+        transition:
+            block-size 0.2s,
+            content-visibility 0.2s;
+        transition-behavior: allow-discrete;
+    }
+
+    &[open]::details-content {
+        block-size: auto;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .blue-collapse .blue-collapse-chevron,
+    .blue-collapse::details-content {
+        transition: 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/_inter.scss

@@ -0,0 +1,23 @@
+:root {
+    --bs-font-sans-serif: Inter, #{$font-family-sans-serif};
+    font-feature-settings:
+        "liga" 1,
+        "calt" 1,
+        "cv05" 1,
+        "cv07" 1,
+        "tnum" 1,
+        "zero" 1;
+}
+@supports (font-variation-settings: normal) {
+    :root {
+        --bs-font-sans-serif: InterVariable, #{$font-family-sans-serif};
+    }
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+    font-feature-settings: inherit;
+}

package/dist/styles/_layout.scss

@@ -5,8 +5,9 @@
 
 .blue-layout {
     --spacing: 0.25rem;
-    --drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
+    --drawer-side-shadow:
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+        rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
     --toggler-size: calc(
         var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
             (var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
@@ -19,7 +20,7 @@
     --side-width: var(--blue-sidebar-width);
     --toggler-size: var(--blue-menu-item-height);
 
-    min-height: 100dvh;
+    height: 100dvh;
     position: relative;
     display: grid;
     grid-template-columns: 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) auto;

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/_modal.scss

@@ -31,13 +31,20 @@
 }
 
 dialog.blue-modal {
+    --ani-scale-from: 95%;
+    --ani-scale-to: 100%;
+    --ani-translate-from: 0 0;
+    --ani-translate-to: 0 0;
+
     border: none;
     background: none;
     padding: 0;
     margin: 0;
     max-width: none;
     max-height: none;
-    transition: display 0.2s allow-discrete, overlay 0.2s allow-discrete;
+    transition:
+        display 0.2s allow-discrete,
+        overlay 0.2s allow-discrete;
     animation: blue-modal-close 0.2s forwards;
 
     .offcanvas-backdrop {

package/dist/styles/_variables.scss

@@ -1,25 +1,12 @@
-// Main color theme. E.g. used for background for body and sidebar.
-$theme: $primary !default;
-
 $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;
 
@@ -27,7 +14,8 @@ $shimmering: 0.8 !default;
 $scrollbar-thumb-color: white !default;
 
 // Thumb color of scrollbar as RGB (like `255, 255, 255`).
-$scrollbar-thumb-color-rgb: red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
+$scrollbar-thumb-color-rgb:
+    red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
 
 // Default size for many components, like sidebar menu items.
 $normal-size: calc(
@@ -56,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;
@@ -64,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;
@@ -103,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};
 
@@ -111,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.11.1",
+    "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",