bootstrap-italia 2.16.2 → 2.17.2

package/dist/version.js

@@ -8,7 +8,7 @@
 
 // NOTE:bootstrap italia version variable, useful to check for the current version
 
-const BOOTSTRAP_ITALIA_VERSION = '2.16.2';
+const BOOTSTRAP_ITALIA_VERSION = '2.17.2';
 
 export { BOOTSTRAP_ITALIA_VERSION as default };
 //# sourceMappingURL=version.js.map

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/js/version.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n// NOTE:bootstrap italia version variable, useful to check for the current version\n\nconst BOOTSTRAP_ITALIA_VERSION = '2.16.2'\nexport default BOOTSTRAP_ITALIA_VERSION\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEK,MAAC,wBAAwB,GAAG;;;;"}
+{"version":3,"file":"version.js","sources":["../src/js/version.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)\n * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS\n * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\n// NOTE:bootstrap italia version variable, useful to check for the current version\n\nconst BOOTSTRAP_ITALIA_VERSION = '2.17.2'\nexport default BOOTSTRAP_ITALIA_VERSION\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEK,MAAC,wBAAwB,GAAG;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-italia",
-  "version": "2.16.2",
+  "version": "2.17.2",
   "keywords": [
     "css",
     "sass",
@@ -58,7 +58,7 @@
     "@babel/preset-react": "^7.16.7",
     "@eslint/eslintrc": "^3.2.0",
     "@eslint/js": "^9.15.0",
-    "@octokit/rest": "^18.12.0",
+    "@octokit/rest": "^22.0.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-legacy": "^3.0.2",
     "@rollup/plugin-node-resolve": "^15.3.0",
@@ -76,7 +76,7 @@
     "gh-pages": "^5.0.0",
     "globals": "^15.12.0",
     "pa11y": "^8.0.0",
-    "pa11y-ci": "^3.1.0",
+    "pa11y-ci": "^4.0.1",
     "prettier": "^3.3.3",
     "replace-in-file": "^6.3.2",
     "rollup": "^4.26.0",
@@ -98,7 +98,7 @@
     "@splidejs/splide": "^4.1.4",
     "@types/bootstrap": "^5.2.6",
     "animejs": "^3.2.1",
-    "design-tokens-italia": "^1.1.1",
+    "design-tokens-italia": "^1.3.2",
     "just-validate": "^4.3.0",
     "minimasonry": "^1.3.2",
     "progressbar.js": "^1.1.0",

package/src/js/version.js

@@ -8,5 +8,5 @@
 
 // NOTE:bootstrap italia version variable, useful to check for the current version
 
-const BOOTSTRAP_ITALIA_VERSION = '2.16.2'
+const BOOTSTRAP_ITALIA_VERSION = '2.17.2'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/base/_functions.scss

@@ -2,6 +2,10 @@
 //
 // Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
 
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:math';
+
 // Ascending
 // Used to evaluate Sass maps like our grid breakpoints.
 @mixin _assert-ascending($map, $map-name) {
@@ -34,7 +38,7 @@
 
 // Colors
 @function to-rgb($value) {
-  @return red($value), green($value), blue($value);
+  @return color.channel($value, 'red', $space: rgb), color.channel($value, 'green', $space: rgb), color.channel($value, 'blue', $space: rgb);
 }
 
 // stylelint-disable scss/dollar-variable-pattern
@@ -209,9 +213,9 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
   $rgb: (
-    'r': red($color),
-    'g': green($color),
-    'b': blue($color),
+    'r': math.round(color.channel($color, 'red', $space: rgb)),
+    'g': math.round(color.channel($color, 'green', $space: rgb)),
+    'b': math.round(color.channel($color, 'blue', $space: rgb)),
   );
 
   @each $name, $value in $rgb {
@@ -230,18 +234,18 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
 // Return opaque color
 // opaque(#fff, rgba(0, 0, 0, .5)) => #808080
 @function opaque($background, $foreground) {
-  @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
+  @return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
 }
 
 // scss-docs-start color-functions
 // Tint a color: mix a color with white
 @function tint-color($color, $weight) {
-  @return mix(white, $color, $weight);
+  @return color.mix(white, $color, $weight);
 }
 
 // Shade a color: mix a color with black
 @function shade-color($color, $weight) {
-  @return mix(black, $color, $weight);
+  @return color.mix(black, $color, $weight);
 }
 
 // Shade the color if the weight is positive, else tint it
@@ -260,7 +264,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 + $value2;
   }
 
@@ -280,11 +284,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1;
   }
 
-  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
+  @if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
     @return $value1 - $value2;
   }
 
-  @if type-of($value2) != number {
+  @if meta.type-of($value2) != number {
     $value2: unquote('(') + $value2 + unquote(')');
   }
 

package/src/scss/base/_utilities.scss

@@ -612,6 +612,7 @@ $utilities: map-merge(
           map-merge(
             $utilities-text-colors,
             (
+              'secondary': $color-text-secondary,
               'muted': $text-muted,
               'black-50': rgba($black, 0.5),
               // deprecated

package/src/scss/base/_variables.scss

@@ -1,6 +1,8 @@
 // Import Design Tokens Italia
 // @import '../../node_modules/design-tokens-italia/scss/variables';
 
+@use 'sass:map';
+
 // Color vars
 // HSB (https://it.wikipedia.org/wiki/Hue_Saturation_Brightness, coincidente con il modello HSV)
 // è lo spazio colore scelto per ottenere le varianti colore della tonalità primaria.
@@ -21,7 +23,7 @@ $gray-800: hsl(0, 0%, 15%) !default; // color-gray-15
 $gray-900: hsl(0, 0%, 10%) !default; // color-gray-10
 
 $grays: () !default;
-$grays: map-merge(
+$grays: map.merge(
   (
     '100': $gray-100,
     '200': $gray-200,
@@ -89,7 +91,7 @@ $gray-border-disabled: $gray-disabled !default; // color-border-disabled
 $secondary: $gray-secondary !default;
 
 $colors: () !default;
-$colors: map-merge(
+$colors: map.merge(
   (
     'indigo': $indigo,
     'purple': $purple,
@@ -121,7 +123,7 @@ $warning: $orange-accessible !default;
 $danger: $red-accessible !default;
 
 $theme-colors: () !default;
-$theme-colors: map-merge(
+$theme-colors: map.merge(
   (
     'primary': $primary,
     'secondary': $secondary,
@@ -151,36 +153,36 @@ $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), ('
 
 // ACCENT COLORS DEFINITIONS
 // analoghi
-$analogue-1-h: 243;
-$analogue-1-s: 85;
-$analogue-1-b: 100;
+$analogue-1-h: 243 !default;
+$analogue-1-s: 85 !default;
+$analogue-1-b: 100 !default;
 $analogue-1: hsb($analogue-1-h, $analogue-1-s, $analogue-1-b) !default;
-$analogue-2-h: 178;
-$analogue-2-s: 95;
-$analogue-2-b: 85;
+$analogue-2-h: 178 !default;
+$analogue-2-s: 95 !default;
+$analogue-2-b: 85 !default;
 $analogue-2: hsb($analogue-2-h, $analogue-2-s, $analogue-2-b) !default;
 // Complementari e triadici
-$complementary-1-h: 351;
-$complementary-1-s: 75;
-$complementary-1-b: 97;
+$complementary-1-h: 351 !default;
+$complementary-1-s: 75 !default;
+$complementary-1-b: 97 !default;
 $complementary-1: hsb($complementary-1-h, $complementary-1-s, $complementary-1-b) !default;
-$complementary-2-h: 36;
-$complementary-2-s: 100;
-$complementary-2-b: 100;
+$complementary-2-h: 36 !default;
+$complementary-2-s: 100 !default;
+$complementary-2-b: 100 !default;
 $complementary-2: hsb($complementary-2-h, $complementary-2-s, $complementary-2-b) !default;
-$complementary-3-h: 159;
-$complementary-3-s: 100;
-$complementary-3-b: 81;
+$complementary-3-h: 159 !default;
+$complementary-3-s: 100 !default;
+$complementary-3-b: 81 !default;
 $complementary-3: hsb($complementary-3-h, $complementary-3-s, $complementary-3-b) !default;
 
 // NEUTRAL COLORS DEFINITIONS
-$neutral-1-h: 210;
-$neutral-1-s: 70;
-$neutral-1-b: 30;
+$neutral-1-h: 210 !default;
+$neutral-1-s: 70 !default;
+$neutral-1-b: 30 !default;
 $neutral-1: hsb($neutral-1-h, $neutral-1-s, $neutral-1-b) !default;
-$neutral-2-h: 210;
-$neutral-2-s: 5;
-$neutral-2-b: 95;
+$neutral-2-h: 210 !default;
+$neutral-2-s: 5 !default;
+$neutral-2-b: 95 !default;
 $neutral-2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default;
 
 // Light Greys A
@@ -412,7 +414,7 @@ $neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default;
 // Backgrounds
 $color-background-emphasis: hsl(210, 54%, 20%); // color-slate-20
 $color-background-primary-lighter: hsl(210, 62%, 97%); // color-blue-97
-$color-background-primary-hover: hsl(210, 100, 30); // color-blue-30
+$color-background-primary-hover: hsl(210, 100%, 30%); // color-blue-30
 $color-background-secondary-hover: hsl(210, 33%, 28%); // color-slate-28
 $color-background-secondary-lighter: hsl(210, 3%, 85%); // color-slate-85
 $color-background-muted: $gray-100; // color-gray-96
@@ -1966,7 +1968,7 @@ $grid-list-text-gap: $v-gap;
 $grid-item-sm-col: 50%;
 $grid-item-lg-col: 33.333333%;
 $grid-item-icon-size: 24px;
-$grid-item-overlay: hsla(210%, 54%, 20, 0.85);
+$grid-item-overlay: hsla(210deg, 54%, 20%, 0.85);
 
 // list
 $list-font-size: 1rem;

package/src/scss/base/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.16.2';
+  --bootstrap-italia-version: '2.17.2';
 }

package/src/scss/base/vendor/_rfs.scss

@@ -1,5 +1,7 @@
 // stylelint-disable property-blacklist, scss/dollar-variable-default
 
+@use 'sass:meta';
+
 // SCSS RFS mixin
 //
 // Automated responsive values for font sizes, paddings, margins and much more
@@ -30,7 +32,7 @@ $rfs-two-dimensional: false !default;
 // Factor of decrease
 $rfs-factor: 10 !default;
 
-@if type-of($rfs-factor) != number or $rfs-factor <= 1 {
+@if meta.type-of($rfs-factor) != number or $rfs-factor <= 1 {
   @error "`#{$rfs-factor}` is not a valid  $rfs-factor, it must be greater than 1.";
 }
 

package/src/scss/bootstrap-italia.scss

@@ -35,7 +35,6 @@
 @import 'utilities/focus';
 @import 'utilities/icons';
 @import 'utilities/colors';
-@import 'utilities/text-colors';
 // ------------------------------
 
 // Nav & Header

package/src/scss/components/_buttons.scss

@@ -155,6 +155,12 @@
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
     @include button-outline-variant($value);
+    box-shadow: inset 0 0 0 2px $value;
+    &.disabled,
+    &:hover,
+    &:active {
+      box-shadow: inset 0 0 0 2px color-hover($value);
+    }
   }
 }
 // scss-docs-end btn-variant-loops
@@ -348,47 +354,6 @@
   }
 }
 
-.btn-outline {
-  &-primary {
-    box-shadow: inset 0 0 0 2px $primary;
-    &.disabled {
-      box-shadow: inset 0 0 0 2px color-hover($primary);
-    }
-  }
-  &-secondary {
-    box-shadow: inset 0 0 0 2px $secondary;
-    &.disabled,
-    &:hover,
-    &:active {
-      box-shadow: inset 0 0 0 2px color-hover($secondary);
-    }
-  }
-  &-success {
-    box-shadow: inset 0 0 0 2px $success;
-    &.disabled,
-    &:hover,
-    &:active {
-      box-shadow: inset 0 0 0 2px color-hover($success);
-    }
-  }
-  &-warning {
-    box-shadow: inset 0 0 0 2px $color-border-warning;
-    &.disabled,
-    &:hover,
-    &:active {
-      box-shadow: inset 0 0 0 2px color-hover($color-border-warning);
-    }
-  }
-  &-danger {
-    box-shadow: inset 0 0 0 2px $danger;
-    &.disabled,
-    &:hover,
-    &:active {
-      box-shadow: inset 0 0 0 2px color-hover($danger);
-    }
-  }
-}
-
 .bg-dark {
   .btn-link {
     color: $white;

package/src/scss/components/_callout.scss

@@ -3,31 +3,16 @@
   overflow: hidden;
 
   .callout-inner {
-    padding: 2rem;
+    padding: 1.5rem;
     border: 2px solid $color-border-secondary;
-    border-top: 0;
-    margin: 2.5rem 0;
+    margin: 2rem 0;
   }
 
   &.callout-highlight {
     border: none;
     border-left: 2px solid $color-border-secondary;
     border-radius: 0;
-    padding: 0 2.222rem;
-
-    p:last-child {
-      margin: 0;
-    }
-
-    .callout-title {
-      margin-bottom: 1.556rem;
-    }
-
-    @each $color-name, $color-value in (success: $success, warning: $color-border-warning, danger: $danger, important: $success, note: $primary) {
-      &.#{$color-name} {
-        border-color: $color-value;
-      }
-    }
+    padding: 0 1.5rem;
   }
 
   &.callout-more {
@@ -131,11 +116,13 @@
   }
 
   .callout-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 1rem;
     font-weight: 600;
     text-transform: uppercase;
     font-size: 1rem;
     color: $color-text-secondary;
-
     @include media-breakpoint-up(lg) {
       font-size: 1.125rem;
     }
@@ -146,53 +133,18 @@
     }
   }
 
-  &:not(.callout-highlight):not(.callout-more) {
-    .callout-title {
-      position: relative;
-      padding-left: 1.5rem;
-      top: -3rem;
-
-      .text {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
-        font-size: 0.875rem;
-        padding-right: 1.5rem;
-
-        @include media-breakpoint-up(md) {
-          font-size: 1.15rem;
-        }
-
-        &:after {
-          content: '';
-          top: 0.875em;
-          border-top: 2px solid;
-          position: absolute;
-          width: calc(100vw - 100% - 20px);
-          left: 100%;
-        }
-      }
-
-      &:before {
-        content: '';
-        top: 0.875em;
-        border-top: 2px solid;
-        position: absolute;
-        width: 3rem;
-        left: -2.5rem;
-      }
-    }
-  }
-
   p {
     font-family: $font-family-serif;
     font-size: 1rem;
     color: $color-text-secondary;
-
     @include media-breakpoint-up(lg) {
       font-size: 1.125rem;
     }
 
+    &:last-child {
+      margin-bottom: 0;
+    }
+
     &.callout-big-text {
       font-size: 1.125rem;
     }
@@ -304,13 +256,7 @@
 }
 
 @media (min-width: 768px) {
-  .callout {
-    &.callout-highlight {
-      padding: 0 0 0 2.222rem;
-    }
-
-    &.callout-more p {
-      font-size: 0.775rem;
-    }
+  .callout .callout-more p {
+    font-size: 0.775rem;
   }
 }

package/src/scss/components/_card.scss

@@ -243,14 +243,12 @@ article.it-card {
       }
 
       .it-card-title-icon-wrapper {
-        display: flex;
-        align-items: center;
+        margin-left: 0.5rem;
       }
 
       // linked titles with icons goes fullwidth
       > a {
         display: flex;
-        flex-direction: row;
         justify-content: space-between;
         width: 100%;
 

package/src/scss/components/_chips.scss

@@ -8,7 +8,7 @@
   border-radius: $v-gap * 1.5;
   height: $v-gap * 3;
   min-width: 100px;
-  padding: 0 $v-gap / 2 2px $v-gap;
+  padding: 0 calc($v-gap / 2) 2px $v-gap;
   transition: all 0.05s;
   margin-top: $v-gap * 0.5;
   margin-bottom: $v-gap;
@@ -67,7 +67,7 @@
     height: $v-gap * 4;
     min-width: 120px;
     border-radius: $v-gap * 2;
-    padding: 2px $v-gap / 2 0 $v-gap * 2;
+    padding: 2px calc($v-gap / 2) 0 $v-gap * 2;
     //label
     .chip-label {
       font-size: $chips-label-font-size-l;

package/src/scss/components/_toolbar.scss

@@ -285,9 +285,6 @@
       }
       &:after {
         color: $gray-disabled;
-        .icon {
-          fill: $gray-disabled;
-        }
       }
     }
     // hover

package/src/scss/forms/_forms.scss

@@ -30,7 +30,7 @@ fieldset {
   input,
   optgroup,
   textarea {
-    color: $color-text-muted;
+    color: $color-text-base;
   }
 
   label {
@@ -46,7 +46,7 @@ fieldset {
     max-width: 100%;
     width: auto;
     padding: 0 $input-spacing-x;
-    z-index: 5;
+    z-index: 2;
     &.active {
       transform: translateY(-85%);
       font-weight: 600;

package/src/scss/utilities/text-colors.scss

@@ -1,13 +0,0 @@
-// text-color
-// excluding `secondary` due to different colors used for background and text, using a direct class instead
-@each $color, $value in $theme-colors {
-  @if $color != 'white' and $color != 'secondary' {
-    .text-#{$color} {
-      color: $value;
-    }
-  }
-}
-
-.text-secondary {
-  color: $color-text-secondary;
-}