blue-web 1.21.0 → 1.21.2

package/dist/styles/_bootstrap-variables.scss

@@ -1,46 +1,46 @@
-// 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(221, 97%, 53%) !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
-//
-
-$font-size-base: 1rem !default;
-
-$h1-font-size: $font-size-base * 2 !default;
-$h2-font-size: $font-size-base * 1.5 !default;
-$h3-font-size: $font-size-base * 1.25 !default;
-$h4-font-size: $font-size-base * 1.125 !default;
-$h5-font-size: $font-size-base * 1.1 !default;
-$h6-font-size: $font-size-base !default;
-
-$border-radius: 0.7rem !default;
-$border-radius-lg: 1rem !default;
-$border-radius-sm: 0.5rem !default;
-
-$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
-
-$link-decoration: none !default;
-$link-hover-decoration: underline !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;
-$input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
-
-$enable-button-pointers: false !default;
-$focus-ring-width: 0.125rem !default;
+// 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(221, 97%, 53%) !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
+//
+
+$font-size-base: 1rem !default;
+
+$h1-font-size: $font-size-base * 2 !default;
+$h2-font-size: $font-size-base * 1.5 !default;
+$h3-font-size: $font-size-base * 1.25 !default;
+$h4-font-size: $font-size-base * 1.125 !default;
+$h5-font-size: $font-size-base * 1.1 !default;
+$h6-font-size: $font-size-base !default;
+
+$border-radius: 0.7rem !default;
+$border-radius-lg: 1rem !default;
+$border-radius-sm: 0.5rem !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius-sm !default;
+
+$link-decoration: none !default;
+$link-hover-decoration: underline !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;
+$input-focus-border-color: #{rgba(var(--bs-primary-rgb), 50%)} !default;
+
+$enable-button-pointers: false !default;
+$focus-ring-width: 0.125rem !default;

package/dist/styles/_bootstrap.scss

@@ -1,65 +1,64 @@
-@import "node_modules/bootstrap/scss/mixins/banner";
-@include bsBanner("");
-
-// scss-docs-start import-stack
-// Configuration
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/variables-dark";
-@import "node_modules/bootstrap/scss/maps";
-@import "node_modules/bootstrap/scss/mixins";
-@import "node_modules/bootstrap/scss/utilities";
-
-// Layout & components
-@import "node_modules/bootstrap/scss/root";
-@import "node_modules/bootstrap/scss/reboot";
-@import "node_modules/bootstrap/scss/type";
-@import "node_modules/bootstrap/scss/images";
-@import "node_modules/bootstrap/scss/containers";
-@import "node_modules/bootstrap/scss/grid";
-@import "node_modules/bootstrap/scss/tables";
-@import "node_modules/bootstrap/scss/forms";
-@import "node_modules/bootstrap/scss/buttons";
-@import "node_modules/bootstrap/scss/transitions";
-@import "node_modules/bootstrap/scss/dropdown";
-@import "node_modules/bootstrap/scss/button-group";
-@import "node_modules/bootstrap/scss/nav";
-@import "node_modules/bootstrap/scss/navbar";
-@import "node_modules/bootstrap/scss/card";
-@import "node_modules/bootstrap/scss/accordion";
-@import "node_modules/bootstrap/scss/breadcrumb";
-@import "node_modules/bootstrap/scss/pagination";
-@import "node_modules/bootstrap/scss/badge";
-@import "node_modules/bootstrap/scss/alert";
-@import "node_modules/bootstrap/scss/progress";
-@import "node_modules/bootstrap/scss/list-group";
-@import "node_modules/bootstrap/scss/close";
-@import "node_modules/bootstrap/scss/toasts";
-@import "node_modules/bootstrap/scss/modal";
-@import "node_modules/bootstrap/scss/tooltip";
-@import "node_modules/bootstrap/scss/popover";
-@import "node_modules/bootstrap/scss/carousel";
-@import "node_modules/bootstrap/scss/spinners";
-@import "node_modules/bootstrap/scss/offcanvas";
-@import "node_modules/bootstrap/scss/placeholders";
-
-// Helpers
-@import "node_modules/bootstrap/scss/helpers";
-
-// Custom added utilities for Blue Web
-$utilities: map-merge(
-    $utilities,
-    (
-        "position":
-            map-merge(
-                map-get($utilities, "position"),
-                (
-                    responsive: true
-                )
-            )
-    )
-);
-
-// Utilities
-@import "node_modules/bootstrap/scss/utilities/api";
-// scss-docs-end import-stack
+@import "node_modules/bootstrap/scss/mixins/banner";
+@include bsBanner("");
+
+// scss-docs-start import-stack
+// Configuration
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/variables-dark";
+@import "node_modules/bootstrap/scss/maps";
+@import "node_modules/bootstrap/scss/mixins";
+@import "node_modules/bootstrap/scss/utilities";
+
+// Layout & components
+@import "node_modules/bootstrap/scss/root";
+@import "node_modules/bootstrap/scss/reboot";
+@import "node_modules/bootstrap/scss/type";
+@import "node_modules/bootstrap/scss/images";
+@import "node_modules/bootstrap/scss/containers";
+@import "node_modules/bootstrap/scss/grid";
+@import "node_modules/bootstrap/scss/tables";
+@import "node_modules/bootstrap/scss/forms";
+@import "node_modules/bootstrap/scss/buttons";
+@import "node_modules/bootstrap/scss/transitions";
+@import "node_modules/bootstrap/scss/dropdown";
+@import "node_modules/bootstrap/scss/button-group";
+@import "node_modules/bootstrap/scss/nav";
+@import "node_modules/bootstrap/scss/navbar";
+@import "node_modules/bootstrap/scss/card";
+@import "node_modules/bootstrap/scss/accordion";
+@import "node_modules/bootstrap/scss/breadcrumb";
+@import "node_modules/bootstrap/scss/pagination";
+@import "node_modules/bootstrap/scss/badge";
+@import "node_modules/bootstrap/scss/alert";
+@import "node_modules/bootstrap/scss/progress";
+@import "node_modules/bootstrap/scss/list-group";
+@import "node_modules/bootstrap/scss/close";
+@import "node_modules/bootstrap/scss/toasts";
+@import "node_modules/bootstrap/scss/modal";
+@import "node_modules/bootstrap/scss/tooltip";
+@import "node_modules/bootstrap/scss/popover";
+@import "node_modules/bootstrap/scss/carousel";
+@import "node_modules/bootstrap/scss/spinners";
+@import "node_modules/bootstrap/scss/offcanvas";
+@import "node_modules/bootstrap/scss/placeholders";
+
+// Helpers
+@import "node_modules/bootstrap/scss/helpers";
+
+// Enable responsive for position
+$utilities: map-merge(
+    $utilities,
+    (
+        "position": map-merge(
+                map-get($utilities, "position"),
+                (
+                    responsive: true
+                )
+            )
+    )
+);
+
+// Utilities
+@import "node_modules/bootstrap/scss/utilities/api";
+// scss-docs-end import-stack

package/dist/styles/_button-icon-wrapper.scss

@@ -1,28 +1,28 @@
-// Extending `.icon-link > .bi` by Bootstrap to allow wrapped icons.
-
-.blue-btn-icon-wrapper {
-    display: contents;
-
-    & > * {
-        flex-shrink: 0;
-        @include transition($icon-link-icon-transition);
-    }
-    & > svg {
-        width: $icon-link-icon-size;
-        height: $icon-link-icon-size;
-        fill: currentcolor;
-    }
-}
-
-.icon-link-hover {
-    &:hover,
-    &:focus-visible {
-        .blue-btn-icon-wrapper > * {
-            transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
-        }
-    }
-}
-
-.blue-btn-square {
-    padding: calc(var(--bs-btn-padding-y) + #{$icon-link-underline-offset});
-}
+// Extending `.icon-link > .bi` by Bootstrap to allow wrapped icons.
+
+.blue-btn-icon-wrapper {
+    display: contents;
+
+    & > * {
+        flex-shrink: 0;
+        @include transition($icon-link-icon-transition);
+    }
+    & > svg {
+        width: $icon-link-icon-size;
+        height: $icon-link-icon-size;
+        fill: currentcolor;
+    }
+}
+
+.icon-link-hover {
+    &:hover,
+    &:focus-visible {
+        .blue-btn-icon-wrapper > * {
+            transform: var(--#{$prefix}icon-link-transform, $icon-link-icon-transform);
+        }
+    }
+}
+
+.blue-btn-square {
+    padding: calc(var(--bs-btn-padding-y) + #{$icon-link-underline-offset});
+}

package/dist/styles/_buttons.scss

@@ -1,110 +1,120 @@
-// Inspired by Bootstrap's button system but extended with more variants
-
-// Soft buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: shade-color($value, 60%);
-
-    .blue-btn-soft-#{$color} {
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        @include button-variant(
-            $bg,
-            $bg,
-            $text-color,
-            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-active-border-shade-amount)
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 60%);
-
-        .blue-btn-soft-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            @include button-variant(
-                $bg,
-                $bg,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
-
-// Plain buttons
-
-// scss-docs-start btn-variant-loops
-@each $color, $value in $theme-colors {
-    $bg: tint-color($value, 80%);
-    $text-color: $value;
-
-    $active-background: if(
-        $color == $color-contrast-light,
-        shade-color($value, $btn-active-bg-shade-amount),
-        tint-color($value, $btn-active-bg-tint-amount)
-    );
-
-    .blue-btn-plain-#{$color} {
-        &:not(:hover) {
-            box-shadow: none;
-            background-image: none;
-        }
-
-        @if $color == "light" {
-            $text-color: color-contrast($value);
-        }
-
-        @include button-variant(
-            transparent,
-            transparent,
-            $text-color,
-            $hover-background: tint-color($value, 80%),
-            $hover-border: tint-color($value, 80%),
-            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
-            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
-            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
-            $disabled-background: transparent,
-            $disabled-border: transparent,
-            $disabled-color: $text-color
-        );
-    }
-}
-
-@include color-mode(dark) {
-    @each $color, $value in $theme-colors {
-        $bg: shade-color($value, 80%);
-        $text-color: tint-color($value, 40%);
-
-        .blue-btn-plain-#{$color} {
-            @if $color == "dark" {
-                $text-color: color-contrast($value);
-            }
-
-            @include button-variant(
-                transparent,
-                transparent,
-                $text-color,
-                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
-                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
-                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
-                $active-border: tint-color($bg, $btn-active-border-tint-amount)
-            );
-        }
-    }
-}
+// Inspired by Bootstrap's button system but extended with more variants
+
+// Soft buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: shade-color($value, 60%);
+
+    .blue-btn-soft-#{$color} {
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        @include button-variant(
+            $bg,
+            $bg,
+            $text-color,
+            $hover-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $hover-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $active-background: shade-color($bg, $btn-active-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-active-border-shade-amount)
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 60%);
+
+        .blue-btn-soft-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            @include button-variant(
+                $bg,
+                $bg,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}
+
+// Plain buttons
+
+// scss-docs-start btn-variant-loops
+@each $color, $value in $theme-colors {
+    $bg: tint-color($value, 80%);
+    $text-color: $value;
+
+    $active-background: if(
+        $color == $color-contrast-light,
+        shade-color($value, $btn-active-bg-shade-amount),
+        tint-color($value, $btn-active-bg-tint-amount)
+    );
+
+    .blue-btn-plain-#{$color} {
+        &:not(:hover) {
+            box-shadow: none;
+            background-image: none;
+        }
+
+        @if $color == "light" {
+            $text-color: color-contrast($value);
+        }
+
+        // More contrast for secondary plain button
+        @if $color == "secondary" {
+            $text-color: shade-color($value, 60%);
+        }
+
+        @include button-variant(
+            transparent,
+            transparent,
+            $text-color,
+            $hover-background: tint-color($value, 80%),
+            $hover-border: tint-color($value, 80%),
+            $hover-color: if($color == "light", color-contrast($value), shade-color($value, 60%)),
+            $active-background: shade-color($bg, $btn-hover-bg-shade-amount),
+            $active-border: shade-color($bg, $btn-hover-border-shade-amount),
+            $disabled-background: transparent,
+            $disabled-border: transparent,
+            $disabled-color: $text-color
+        );
+    }
+}
+
+@include color-mode(dark) {
+    @each $color, $value in $theme-colors {
+        $bg: shade-color($value, 80%);
+        $text-color: tint-color($value, 40%);
+
+        .blue-btn-plain-#{$color} {
+            @if $color == "dark" {
+                $text-color: color-contrast($value);
+            }
+
+            // More contrast for secondary plain button
+            @if $color == "secondary" {
+                $text-color: tint-color($value, 60%);
+            }
+
+            @include button-variant(
+                transparent,
+                transparent,
+                $text-color,
+                $hover-background: tint-color($bg, $btn-hover-bg-tint-amount),
+                $hover-border: tint-color($bg, $btn-hover-border-tint-amount),
+                $active-background: tint-color($bg, $btn-active-bg-tint-amount),
+                $active-border: tint-color($bg, $btn-active-border-tint-amount)
+            );
+        }
+    }
+}

package/dist/styles/_collapse.scss

@@ -1,72 +1,72 @@
-// Collapse with details and animated
-.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-chevron {
-        --blue-collapse-chevron-rotate: 90deg;
-        transform: rotate(var(--blue-collapse-chevron-rotate));
-    }
-
-    &::details-content {
-        block-size: 0;
-        opacity: 0;
-        translate: 0 -4rem;
-        transition:
-            block-size 0.2s,
-            content-visibility 0.2s,
-            opacity 0.2s,
-            translate 0.2s;
-        transition-behavior: allow-discrete;
-    }
-
-    &[open]::details-content {
-        block-size: auto;
-        opacity: 1;
-        translate: 0;
-    }
-}
-
-@media (prefers-reduced-motion) {
-    .blue-collapse .blue-collapse-chevron,
-    .blue-collapse::details-content {
-        transition: none;
-    }
-}
-
-.blue-collapse-indent {
-    // 0.5em is half of icon width
-    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
-    margin-inline-start: var(--margin-inline-start);
-}
-
-// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
-.blue-collapse-group {
-    display: grid;
-    grid-template-rows: auto;
-    grid-template-columns: minmax(0, 1fr);
-    max-width: 100%;
-
-    & > details {
-        display: contents;
-
-        & > summary {
-            grid-column: 2;
-
-            & + * {
-                width: calc(100% + var(--margin-inline-start) - 3px);
-            }
-        }
-    }
-}
+// Collapse with details and animated
+.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-chevron {
+        --blue-collapse-chevron-rotate: 90deg;
+        transform: rotate(var(--blue-collapse-chevron-rotate));
+    }
+
+    &::details-content {
+        block-size: 0;
+        opacity: 0;
+        translate: 0 -4rem;
+        transition:
+            block-size 0.2s,
+            content-visibility 0.2s,
+            opacity 0.2s,
+            translate 0.2s;
+        transition-behavior: allow-discrete;
+    }
+
+    &[open]::details-content {
+        block-size: auto;
+        opacity: 1;
+        translate: 0;
+    }
+}
+
+@media (prefers-reduced-motion) {
+    .blue-collapse .blue-collapse-chevron,
+    .blue-collapse::details-content {
+        transition: none;
+    }
+}
+
+.blue-collapse-indent {
+    // 0.5em is half of icon width
+    --margin-inline-start: calc(#{$input-btn-padding-x} + 0.5em + #{$input-btn-border-width});
+    margin-inline-start: var(--margin-inline-start);
+}
+
+// Let's you group a collapse together with another UI element like a button that should come before the collapse summary.
+.blue-collapse-group {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: minmax(0, 1fr);
+    max-width: 100%;
+
+    & > details {
+        display: contents;
+
+        & > summary {
+            grid-column: 2;
+
+            & + * {
+                width: calc(100% + var(--margin-inline-start) - 3px);
+            }
+        }
+    }
+}