blue-react 8.5.1 → 8.6.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v8.5.1-beta1 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.6.0-beta1 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -24,5 +24,4 @@
 @import "./styles/_tooltips";
 @import "./styles/_hover";
 
-@import "./styles/document-view";
 @import "./styles/_bootstrap-optimizations.scss";

package/dist/styles/_general.scss

@@ -1,10 +1,3 @@
-:root {
-    --app-bg: #{$app-bg};
-    --sidebar-bg: #{$sidebar-bg};
-    --header-bg: #{$header-bg};
-    --action-link-bg-color: var(--theme);
-}
-
 @include custom-scrollbar($scrollbar-thumb-color, transparent, false);
 
 * {
@@ -52,7 +45,7 @@ body {
 }
 
 body {
-    background: var(--app-bg, #{$app-bg});
+    background: var(--blue-app-bg, #{$app-bg});
 
     .blue-wrapper {
         position: fixed;
@@ -170,6 +163,6 @@ body {
     padding-left: calc(#{$normal-size} + #{$spacer});
     transform: translateX(-100%);
     transition: transform 0.4s;
-    background: var(--sidebar-bg);
+    background: var(--blue-sidebar-bg);
     color: $sidebar-color;
 }

package/dist/styles/_layout.scss

@@ -124,6 +124,10 @@
 .blue-page {
     margin-left: $normal-size;
     animation: enabledBlueAppPage 0.5s;
+    border-top-left-radius: var(--bs-border-radius, 0.5rem);
+    border-top-right-radius: var(--bs-border-radius, 0.5rem);
+    --bs-bg-opacity: 1;
+    background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), var(--bs-bg-opacity));
 
     &::before,
     &::after {
@@ -197,19 +201,19 @@
     &:hover,
     &:focus {
         color: $sidebar-color;
-        background-color: $sidebar-bg;
+        background-color: var(--blue-sidebar-bg);
         border-color: transparent;
     }
 }
 
 .blue-sidebar {
-    @include custom-scrollbar($sidebar-color, $sidebar-bg, 0.3rem);
+    @include custom-scrollbar($sidebar-color, var(--blue-sidebar-bg), 0.3rem);
     overflow-y: auto;
 }
 
 .blue-sidebar-bottom {
     width: auto;
-    background-color: var(--sidebar-bg);
+    background-color: var(--blue-sidebar-bg);
     transition: box-shadow 0.2s;
 
     &.has-shadow {
@@ -234,7 +238,7 @@
     margin: 0;
     cursor: default;
     display: inline-block;
-    font-weight: 300;
+    font-weight: 400;
     font-size: $bla-header-logo-font-size;
     position: absolute;
     z-index: 1;
@@ -315,26 +319,26 @@
 }
 
 .blue-sidebar .blue-menu-item-dropdown {
-    --sidebar-bg: #{$sidebar-deep-bg};
+    --blue-sidebar-bg: #{$sidebar-deep-bg};
 
     &::before {
-        background-color: var(--sidebar-bg);
+        background-color: var(--blue-sidebar-bg);
     }
 
     .blue-menu-item-dropdown {
-        --sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
+        --blue-sidebar-bg: #{darken($sidebar-deep-bg, 4%)};
 
         .blue-menu-item-dropdown {
-            --sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
+            --blue-sidebar-bg: #{darken($sidebar-deep-bg, 8%)};
 
             .blue-menu-item-dropdown {
-                --sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
+                --blue-sidebar-bg: #{darken($sidebar-deep-bg, 12%)};
 
                 .blue-menu-item-dropdown {
-                    --sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
+                    --blue-sidebar-bg: #{darken($sidebar-deep-bg, 16%)};
 
                     .blue-menu-item-dropdown {
-                        --sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
+                        --blue-sidebar-bg: #{darken($sidebar-deep-bg, 20%)};
                     }
                 }
             }
@@ -343,26 +347,26 @@
 }
 
 .blue-header .blue-menu-item-dropdown {
-    --sidebar-bg: #{$header-deep-bg};
+    --blue-sidebar-bg: #{$header-deep-bg};
 
     &::before {
-        background-color: var(--header-bg);
+        background-color: var(--blue-header-bg);
     }
 
     .blue-menu-item-dropdown {
-        --sidebar-bg: #{darken($header-deep-bg, 4%)};
+        --blue-sidebar-bg: #{darken($header-deep-bg, 4%)};
 
         .blue-menu-item-dropdown {
-            --sidebar-bg: #{darken($header-deep-bg, 8%)};
+            --blue-sidebar-bg: #{darken($header-deep-bg, 8%)};
 
             .blue-menu-item-dropdown {
-                --sidebar-bg: #{darken($header-deep-bg, 12%)};
+                --blue-sidebar-bg: #{darken($header-deep-bg, 12%)};
 
                 .blue-menu-item-dropdown {
-                    --sidebar-bg: #{darken($header-deep-bg, 16%)};
+                    --blue-sidebar-bg: #{darken($header-deep-bg, 16%)};
 
                     .blue-menu-item-dropdown {
-                        --sidebar-bg: #{darken($header-deep-bg, 20%)};
+                        --blue-sidebar-bg: #{darken($header-deep-bg, 20%)};
                     }
                 }
             }

package/dist/styles/_variables.scss

@@ -29,7 +29,7 @@ $theme-colors: map-merge(
 // $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.7 !default;
+$shimmering: 0.8 !default;
 
 // Thumb color of scrollbar
 $scrollbar-thumb-color: white !default;
@@ -107,4 +107,10 @@ $scrollbar-size: 10px;
     --blue-sidebar-color-l: #{$blue-sidebar-color-l};
     --blue-sidebar-color: #{$blue-sidebar-color};
     --blue-theme: #{$theme};
+    --blue-shimmering: 0.8;
+
+    --blue-app-bg: #{$app-bg};
+    --blue-sidebar-bg: #{$sidebar-bg};
+    --blue-header-bg: #{$header-bg};
+    --action-link-bg-color: var(--theme);
 }

package/dist/styles/mixins/_action-menu.scss

@@ -44,7 +44,7 @@
 
             .blue-actions-menu {
                 .blue-menu-item-dropdown {
-                    --sidebar-bg: #{darken($theme, 34%)};
+                    --blue-sidebar-bg: #{darken($theme, 34%)};
                 }
             }
         }

package/dist/styles/mixins/_misc.scss

@@ -22,7 +22,6 @@
 }
 
 @mixin header-bg() {
-    background-color: rgba($header-bg, $shimmering);
-    background-image: linear-gradient(0deg, rgba($header-bg, 0.8), rgba($header-bg, 0.7));
+    background-color: rgba(var(--bs-theme-rgb, $header-bg), var(--blue-shimmering, $shimmering));
     backdrop-filter: blur(3px) saturate(125%);
 }

package/dist/styles/mixins/_sidebar.scss

@@ -124,7 +124,7 @@
     .blue-sidebar {
         width: $width;
         color: $sidebar-color;
-        background: var(--sidebar-bg);
+        background: var(--blue-sidebar-bg);
         position: fixed;
         left: 0;
         top: $normal-size;
@@ -137,12 +137,12 @@
         .blue-menu {
             overflow-y: auto;
             flex: 1;
-            @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
+            @include scroll-shadow(var(--blue-sidebar-bg), $sidebar-bg);
         }
 
         &:hover {
             .blue-menu-item {
-                background-color: var(--sidebar-bg);
+                background-color: var(--blue-sidebar-bg);
             }
         }
 

package/dist/types/components/DocumentView.d.ts

@@ -18,6 +18,7 @@ export interface DocumentViewProps {
     showDocumentLabel: string;
 }
 /**
+ * @deprecated Only used by one project (Florence). Component will be moved to that project instead.
  * Tries to display content in an iframe. When the content can't displayed in an iframe, it will show a download button instead.
  */
 export default function DocumentView({ content, mimeType, src, showDocumentLabel }: DocumentViewProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "8.5.1",
+    "version": "8.6.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
@@ -20,14 +20,15 @@
         "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
         "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
         "build-release": "npm run build-types && npm run build && npm run build-css && npm run docgen",
-        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --extension tsx && node followUpDocs",
+        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --extension tsx && node followUpDocs && npm run license-report",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "predeploy": "npm run build-docs",
         "deploy": "gh-pages --dist build --dest v8",
         "prepublishOnly": "npm i && npm run build-release",
         "release": "npm publish && npm run deploy",
-        "prettier": "npx prettier --write ."
+        "prettier": "npx prettier --write .",
+        "license-report": "npx license-report --prod --output=json > ./src/docs/data/license-report.json"
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
@@ -55,6 +56,7 @@
         "autoprefixer": "^10.3.6",
         "blue-web-components": "github:bruegmann/blue-web-components",
         "gh-pages": "^3.1.0",
+        "license-report": "^6.2.0",
         "lint-staged": "^11.1.2",
         "node-sass": "^6.0.1",
         "postcss-cli": "^9.0.1",

package/dist/styles/_document-view.scss

@@ -1,6 +0,0 @@
-.document-view-iframe {
-    border: none;
-    width: 100%;
-    height: calc(100vh - 6.875rem);
-    display: block;
-}