bootstrap-italia 2.2.0 → 2.3.1

package/src/scss/custom/_alert.scss

@@ -3,11 +3,11 @@
   position: relative;
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
-  border: 1px solid $gray-300;
+  border: 1px solid $color-border-secondary;
   padding-left: 4em;
   background-color: transparent;
   border-radius: 0;
-  color: $body-color;
+  color: $color-text-base; // UI kit
   .alert-link {
     color: $link-color;
   }
@@ -16,7 +16,7 @@
 // Headings for larger alerts
 .alert-heading {
   // Specified to prevent conflicts of changing $headings-color
-  color: $body-color;
+  color: $color-text-base; // UI kit
   line-height: 1;
 }
 

package/src/scss/custom/_autocomplete.scss

@@ -5,7 +5,7 @@
   padding: 0.375rem $v-gap * 6 0.375rem $v-gap * 3;
 
   &::placeholder {
-    color: $neutral-1-a4;
+    color: $color-text-muted; // UI kit
   }
 
   &:disabled {
@@ -108,7 +108,7 @@
         font-style: normal;
         text-transform: uppercase;
         font-size: 0.75rem;
-        color: $neutral-1-a8;
+        color: $color-text-secondary; // UI kit
         font-weight: 600;
         letter-spacing: 0.1em;
         display: block;

package/src/scss/custom/_avatar.scss

@@ -8,8 +8,8 @@
   height: $avatar-base-size * 4; // default size equals to md
   justify-content: center;
   align-items: center;
-  background: $neutral-1-a1; // default background
-  color: $neutral-1-a7;
+  background: $color-background-secondary-lighter; // UI kit
+  color: $color-text-secondary; // UI kit
   box-sizing: content-box;
   transition: background-color 0.2s;
   // image
@@ -236,7 +236,7 @@ a.avatar {
     img {
       filter: brightness(90%);
     }
-    background: shade-color($neutral-1-a1, 5%);
+    background: shade-color($color-background-secondary-lighter, 5%);
     &.avatar-primary {
       background: shade-color($primary, 5%);
     }
@@ -257,7 +257,7 @@ a.avatar {
 .avatar-dropdown {
   &:hover,
   &:focus-within {
-    background: shade-color($neutral-1-a1, 5%);
+    background: shade-color($color-background-secondary-lighter, 5%);
   }
   .btn-dropdown:focus {
     box-shadow: none;
@@ -276,7 +276,7 @@ a.avatar {
     width: 10px;
     height: 10px;
     border: 2px solid $white;
-    background: $neutral-1-a3;
+    background: $color-background-secondary-lighter;
     color: $white;
     border-radius: 50%;
     display: flex;

package/src/scss/custom/_back-to-top.scss

@@ -50,13 +50,13 @@
   &.dark {
     background: #fff;
     &:hover {
-      background: $neutral-1-a1;
+      background: $neutral-1-a1; // TODO Missing in the UI kit
     }
 
     //caret
     .icon {
       &:before {
-        color: $neutral-1-a8;
+        color: $neutral-1-a8; // TODO Missing in the UI kit
       }
     }
   }

package/src/scss/custom/_bottomnav.scss

@@ -42,10 +42,10 @@
   }
   a {
     display: block;
-    color: $neutral-1-a7;
+    color: $color-text-secondary; // UI kit
     text-decoration: none;
     .icon {
-      fill: $neutral-1-a7;
+      fill: $secondary; // UI kit
     }
     &.active {
       color: $primary;

package/src/scss/custom/_breadcrumb.scss

@@ -15,12 +15,14 @@
         font-weight: $breadcrumb-link-font-weight;
       }
       &.active {
+        color: $color-text-base;
         a {
           font-weight: normal;
           pointer-events: none;
         }
       }
       span.separator {
+        color: $secondary;
         display: inline-block;
         font-weight: $breadcrumb-link-font-weight;
         padding: 0 $breadcrumb-link-x-padding;

package/src/scss/custom/_buttons.scss

@@ -4,6 +4,7 @@
   white-space: initial;
   text-decoration: none;
 }
+
 .btn-me {
   margin-right: $v-gap * 1.5 !important;
 }
@@ -133,16 +134,21 @@
   }
 }
 
+.btn:disabled:hover,
+.btn.disabled:hover {
+  cursor: not-allowed;
+}
+
 .btn-primary {
   &:disabled,
   &.disabled {
-    color: $gray-label-disabled;
-    background-color: $gray-disabled;
-    border-color: $gray-border-disabled;
+    // color: $gray-label-disabled;
+    // background-color: $gray-disabled;
+    // border-color: $gray-border-disabled;
     //progress bar button
     &.btn-progress {
-      background-color: $primary-a3;
-      border-color: $primary-a3;
+      background-color: hsl(210, 76%, 67%); // UI kit - missing token
+      border-color: hsl(210, 76%, 67%); // UI kit - missing token
       color: $white;
       opacity: 1;
     }
@@ -154,8 +160,8 @@
   &.disabled {
     //progress bar button
     &.btn-progress {
-      background-color: tint-color($gray-secondary, 10);
-      border-color: tint-color($gray-secondary, 10);
+      background-color: hsl(210, 12%, 52%); // UI kit - missing tokens
+      border-color: hsl(210, 12%, 52%); // UI kit - missing tokens
       opacity: 1;
     }
   }
@@ -203,7 +209,6 @@
   }
   .btn-outline-secondary {
     @include button-outline-variant($white, color-hover($white), transparent, color-hover($white));
-    box-shadow: none;
     &:hover {
       box-shadow: none;
     }

package/src/scss/custom/_calendar.scss

@@ -13,7 +13,7 @@
   .card {
     .card-title,
     .card-text {
-      border-bottom: 1px solid $border-color;
+      border-bottom: 1px solid $color-border-subtle;
       padding-bottom: 16px;
     }
 
@@ -37,7 +37,7 @@
     .card-text {
       a {
         text-decoration: none;
-        color: $text-color;
+        color: $color-text-base;
         font-family: $font-family-sans-serif;
         font-size: $link-list-font-size-l;
 

package/src/scss/custom/_callout.scss

@@ -1,6 +1,6 @@
 .callout {
   padding: 2.5rem 2.222rem;
-  border: 1px solid $neutral-1-a7;
+  border: 2px solid $color-border-secondary;
   position: relative;
   max-width: 60ch;
   margin: 1.75rem 0 1rem;
@@ -9,7 +9,7 @@
   // Highlights version
   &.callout-highlight {
     border: none;
-    border-left: 2px solid rgba($gray-border-disabled, 1);
+    border-left: 2px solid $color-border-secondary;
     border-radius: 0;
     padding: 0 2.222rem;
     .callout-title {
@@ -20,22 +20,22 @@
       border-color: rgba($success, 1);
     }
     &.warning {
-      border-color: rgba($warning, 1);
+      border-color: $color-border-warning;
     }
     &.danger {
       border-color: rgba($danger, 1);
     }
     &.important {
-      border-color: rgba($complementary-3-a9, 1);
+      border-color: $success;
     }
     &.note {
-      border-color: rgba($primary-a9, 1);
+      border-color: $primary;
     }
   }
 
   // More version
   &.callout-more {
-    background: #fafaf7;
+    background: #f9f9f5;
     border: none;
     border-radius: 0;
     padding: 2.222rem 2.222rem;
@@ -67,7 +67,7 @@
     p {
       font-size: 0.778rem;
       line-height: 1.333rem;
-      color: $neutral-1-a10;
+      color: $color-text-secondary; // UI kit
     }
     // title
     .callout-title {
@@ -102,7 +102,7 @@
   &.warning {
     border-color: $warning;
     .callout-title {
-      color: $warning;
+      color: $color-text-warning;
       .icon {
         fill: $warning;
       }
@@ -124,47 +124,47 @@
     }
   }
   &.important {
-    border-color: $complementary-3-a9;
+    border-color: $success;
     .callout-title {
-      color: $complementary-3-a9;
+      color: $success;
       .icon {
-        fill: $complementary-3-a9;
+        fill: $success;
       }
       span {
-        border-color: $complementary-3-a9;
+        border-color: $success;
       }
     }
   }
   &.note {
-    border-color: $primary-a9;
+    border-color: $primary;
     .callout-title {
-      color: $primary-a9;
+      color: $primary;
       .icon {
-        fill: $primary-a9;
+        fill: $primary;
       }
       span {
-        border-color: $primary-a9;
+        border-color: $primary;
       }
     }
     .collapse-div .collapse-header .callout-more-toggle {
-      color: $primary-a9;
+      color: $primary;
       &:active,
       &:hover {
-        color: $primary-a9;
+        color: $primary;
       }
       span {
-        border-color: $primary-a9;
+        border-color: $primary;
         &:before,
         &:after {
-          background: $primary-a9;
+          background: $primary;
         }
       }
     }
     a {
-      color: $primary-a9;
+      color: $primary;
     }
     .icon {
-      fill: $primary-a9;
+      fill: $primary;
     }
   }
 
@@ -175,9 +175,9 @@
     font-size: 1rem;
     margin-right: 2.222rem;
     letter-spacing: 0.06rem;
-    color: $neutral-1-a7;
+    color: $color-text-secondary; // UI kit
     .icon {
-      fill: $neutral-1-a7;
+      fill: $color-text-secondary; // UI kit
       margin-right: 0.444rem;
     }
   }
@@ -197,7 +197,7 @@
   p {
     font-family: $font-family-serif;
     font-size: 0.889rem;
-    color: $neutral-1-a7;
+    color: $color-text-secondary; // UI kit
     &:last-child {
       margin: 0;
     }

package/src/scss/custom/_card.scss

@@ -245,7 +245,7 @@
       color: $card-p-color;
       margin-bottom: $card-category-m-bottom;
       a.category {
-        color: $card-p-color;
+        color: $primary;
         &:hover {
           text-decoration: underline;
         }

package/src/scss/custom/_carousel.scss

@@ -14,7 +14,6 @@
       height: $crs-dots-simension;
       background: $crs-dots-color;
       display: inline-block;
-      opacity: 0.3;
       transition: all 0.3s;
       border-radius: 50px;
       margin: 0 $v-gap;
@@ -22,7 +21,7 @@
       box-shadow: none;
       border: none;
       &.is-active {
-        opacity: 1;
+        background: $primary;
       }
     }
   }
@@ -110,7 +109,7 @@
           transform: rotate(180deg);
         }
         &[disabled] {
-          background: $neutral-2;
+          background: $gray-disabled;
         }
       }
     }
@@ -224,7 +223,7 @@
           right: -$v-gap * 1.5;
           top: 0;
           bottom: 0;
-          background-color: $neutral-2;
+          background-color: $neutral-2; // Missing in the UI kit
         }
       }
     }

package/src/scss/custom/_chips.scss

@@ -4,7 +4,7 @@
   justify-content: space-evenly;
   align-items: center;
   background: $chips-background;
-  border: 1px solid $gray-border-disabled;
+  border: 1px solid $chips-border;
   border-radius: $v-gap * 1.5;
   height: $v-gap * 3;
   min-width: 100px;
@@ -137,7 +137,7 @@
   //disabled state--------------------------------
   &.chip-disabled {
     background: $white;
-    color: $neutral-1-a7;
+    color: $chips-label-color-disabled;
     &:hover {
       cursor: not-allowed;
     }
@@ -148,12 +148,12 @@
     //close button
     button {
       .icon {
-        fill: $neutral-1-a1;
+        fill: $gray-disabled;
       }
     }
     //left icon
     & > .icon {
-      fill: $neutral-1-a1;
+      fill: $gray-disabled;
     }
     .avatar {
       img {

package/src/scss/custom/_cookiebar.scss

@@ -54,7 +54,7 @@
       margin-left: $v-gap * 4;
     }
     &:not(.cookiebar-confirm) {
-      color: $neutral-2-a1;
+      color: $neutral-2-a1; // Missing in the UI kit
     }
   }
 }

package/src/scss/custom/_dimmer.scss

@@ -6,7 +6,7 @@
 
 .dimmer {
   display: flex;
-  background-color: #1f2933;
+  background-color: $color-background-emphasis;
   opacity: 0.92;
   position: absolute;
   top: 0;
@@ -15,6 +15,9 @@
   right: 0;
   z-index: 1;
   padding: $v-gap * 4;
+  justify-content: center;
+  flex-wrap: wrap;
+  align-items: flex-start;
 
   &[aria-hidden='true'] {
     display: none;
@@ -23,12 +26,9 @@
   &.dimmer-primary {
     background-color: $primary;
     &.show {
-      opacity: 0.95;
+      opacity: 0.9;
     }
   }
-  justify-content: center;
-  flex-wrap: wrap;
-  align-items: flex-start;
 
   h1,
   h2,

package/src/scss/custom/_dropdown.scss

@@ -173,13 +173,13 @@
 
   //dark version
   &.dark {
-    background-color: $neutral-1-a8;
+    background-color: $neutral-1-a8; // Missing in the UI kit
     .link-list-wrapper .link-list-heading {
       color: #fff;
     }
     .link-list-wrapper ul {
       span.divider {
-        background: #2e465e;
+        background: #2e465e; // Missing in the UI kit
       }
 
       li {
@@ -191,19 +191,19 @@
           color: #fff;
         }
         a:not(.active):not(.disabled):hover i {
-          color: $analogue-2-a4;
+          color: $analogue-2-a4; // Missing in the UI kit
         }
         a.disabled span {
-          color: $neutral-1-a4;
+          color: $neutral-1-a4; // Missing in the UI kit
         }
         a.active span {
-          color: $cyan;
+          color: $cyan; // Missing in the UI kit
         }
       }
     }
     //notch
     &:before {
-      background-color: $neutral-1-a8;
+      background-color: $neutral-1-a8; // Missing in the UI kit
     }
   }
   &.show {

package/src/scss/custom/_footer.scss

@@ -1,6 +1,6 @@
 //mobile
 .it-footer-main {
-  background-color: $primary-a10;
+  background-color: $footer-top-background;
   color: $white;
   font-size: 16px;
 
@@ -75,7 +75,7 @@
 }
 
 .it-footer-small-prints {
-  background-color: $primary-a12;
+  background-color: $footer-bottom-background;
 
   ul.it-footer-small-prints-list {
     padding: 1.5rem 1rem;

package/src/scss/custom/_form-datepicker.scss

@@ -1,3 +1,5 @@
+// TODO: Check if this classes are obsolete due to default browser styles
+
 a.datepicker-button {
   cursor: pointer;
 
@@ -303,12 +305,6 @@ a.datepicker-button {
   z-index: 40;
 }
 
-abbr[data-original-title],
-abbr[title] {
-  text-decoration: none;
-  cursor: default;
-}
-
 .it-datepicker-wrapper {
   position: relative;
   .valid-feedback,

package/src/scss/custom/_form-input-file.scss

@@ -11,10 +11,10 @@ input[type='file'] + label {
     opacity: 0;
   }
   .form-file-name {
-    background-color: #fff;
+    background-color: $white;
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
     border-radius: 0;
-    color: #464a4c;
+    color: $color-text-secondary;
     left: 0;
     line-height: 1.7;
     overflow: hidden;

package/src/scss/custom/_form-input-number.scss

@@ -22,14 +22,14 @@
       display: none;
     }
 
-    color: $neutral-1-a7;
+    // color: $color-text-muted;
     padding-right: 32px;
     padding-left: 12px;
     min-width: 86px !important;
     width: 100%;
 
     &:focus {
-      color: $dark;
+      color: $color-text-base;
     }
   }
 
@@ -40,7 +40,7 @@
       position: absolute;
       left: 14px;
       top: 0;
-      color: $neutral-1-a7;
+      // color: $color-text-muted;
       font-weight: bold;
       font-size: 1rem;
     }
@@ -63,11 +63,11 @@
   &.disabled {
     input[type='number'] {
       background-color: transparent;
-      color: $neutral-1-a4;
-      border-bottom-color: $neutral-1-a4;
+      color: $gray-label-disabled;
+      border-bottom-color: $gray-border-disabled;
       &:hover {
         cursor: not-allowed;
-        color: $neutral-1-a4;
+        color: $gray-label-disabled;
       }
     }
     button {
@@ -77,12 +77,12 @@
       }
       &.input-number-add {
         &:after {
-          border-color: transparent transparent $neutral-1-a4 transparent;
+          border-color: transparent transparent $gray-border-disabled transparent;
         }
       }
       &.input-number-sub {
         &:after {
-          border-color: $neutral-1-a4 transparent transparent transparent;
+          border-color: $gray-border-disabled transparent transparent transparent;
         }
       }
     }
@@ -112,12 +112,12 @@
     &:hover {
       &.input-number-add {
         &:after {
-          border-color: transparent transparent $dark transparent;
+          border-color: transparent transparent $dark transparent; // TODO Check if still necessary
         }
       }
       &.input-number-sub {
         &:after {
-          border-color: $dark transparent transparent transparent;
+          border-color: $dark transparent transparent transparent; // TODO Check if still necessary
         }
       }
     }
@@ -129,14 +129,14 @@
       top: -6px;
       &:after {
         border-width: 0 5px 6px 5px;
-        border-color: transparent transparent $neutral-1-a7 transparent;
+        border-color: transparent transparent $neutral-1-a7 transparent; // TODO Check if still necessary
       }
     }
     &.input-number-sub {
       bottom: -6px;
       &:after {
         border-width: 6px 5px 0 5px;
-        border-color: $neutral-1-a7 transparent transparent transparent;
+        border-color: $neutral-1-a7 transparent transparent transparent; // TODO Check if still necessary
       }
     }
     &:hover {
@@ -149,7 +149,7 @@
 label {
   &.input-number-label {
     display: block;
-    color: $neutral-1-a7;
+    color: $color-text-base;
     font-weight: 600;
     font-size: $small-font-size;
     cursor: text;

package/src/scss/custom/_form-password.scss

@@ -7,7 +7,7 @@
   padding: 0 $spacer * 0.5;
   background-color: $white;
   .icon {
-    fill: $neutral-1-a7;
+    fill: $icon-secondary;
   }
 }
 .password-meter {

package/src/scss/custom/_form-select.scss

@@ -46,7 +46,7 @@
     box-shadow: none;
     transition: 0.2s ease-out;
     font-weight: 700;
-    color: $dark;
+    color: $color-text-base;
     background-color: $white;
     option {
       font-weight: normal;
@@ -103,7 +103,7 @@
     .bootstrap-select {
       background-color: $input-disabled-bg;
       & > .dropdown-toggle.bs-placeholder {
-        color: $dark;
+        color: $color-text-base;
         opacity: 1;
       }
     }
@@ -493,7 +493,7 @@ fieldset:disabled .bootstrap-select-wrapper {
   }
 
   .bootstrap-select > .dropdown-toggle.bs-placeholder {
-    color: $dark;
+    color: $color-text-base;
   }
 
   button {