blue-web 1.11.0 → 1.12.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue Web v1.11.0 (https://bruegmann.github.io/blue-web)
+ * Blue Web v1.12.0 (https://bruegmann.github.io/blue-web)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
 */
 
@@ -37,3 +37,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,20 @@
+// Main color theme. E.g. used for background for body and sidebar.
+$theme: hsl(217deg 10% 94%) !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;
+$header-color: $gray-900 !default;
+$sidebar-color: $gray-900 !default;
+
 $light: #ecedf0 !default;
 
 // Components
@@ -21,9 +38,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,57 @@
+// Collapse with details and animated
+// Right now not part of Blue Web, but could become one
+
+.blue-collapse {
+    interpolate-size: allow-keywords;
+
+    &:has(summary:focus) {
+        overflow: hidden;
+    }
+
+    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/_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/_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,6 +1,3 @@
-// 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(
@@ -27,7 +24,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(

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-web",
-    "version": "1.11.0",
+    "version": "1.12.0",
     "description": "UI components built on top of Bootstrap 5",
     "license": "LGPL-3.0-or-later",
     "homepage": "https://bruegmann.github.io/blue-web/v1",
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "bootstrap": "~5.3.3"
+        "bootstrap": "~5.3.5"
     },
     "devDependencies": {
         "@astrojs/mdx": "^4.2.3",