@beterdichtbij/component-library 0.32.0 → 0.33.0

package/dist/scss/_badge.scss

@@ -1,8 +1,15 @@
-.bd-badge {
-    padding: 5px 8px;
-    border-radius: $border-radius-default;
-    font-weight: 500;
-    font-style: normal;
-    font-size: 0.75rem;
-    line-height: 0.875rem;
-}
+
+@each $variant, $color in $theme-colors {
+    $bg-color: tint-color($color, 90%);  
+    .bd-badge-#{$variant} {
+      @include badge($color, $bg-color);
+    }
+  }
+  
+  .bd-badge-warning {
+    color: $color-darkblue;
+  }
+
+  .bd-badge-warning {
+    color: $color-darkblue;
+  }

package/dist/scss/_button.scss

@@ -11,7 +11,7 @@
 $btn-variants:
     "primary" $white $blue-text $white $blue-dark none,
     "secondary" $font-color-primary $white $font-color-primary $gray-7 $gray 1px solid $gray,
-    "danger" $white $danger $danger $white none,
+    "danger" $white $red-text $white $red-dark none,
     "colleague" $white $green-text $white $green-dark none,
     "outline-primary" $font-color-primary $white $white $font-color-primary $gray-primary 1px solid $gray-primary,
     "outline-primary-dark" $font-color-primary transparent $white $font-color-primary $gray-primary 1px solid $gray-primary,
@@ -49,12 +49,6 @@ $btn-variants:
     }
 }
 
-.btn-close {
-    .modal & {
-        background-image: initial;
-    }
-}
-
 button {
     &.btn-remove {
         position: absolute;

package/dist/scss/_card.scss

@@ -8,10 +8,14 @@
         align-items: center;
         justify-content: space-between;
         position: relative;
-    
+
+        &.danger {
+            background-color: $red-header;
+        }
+
         &.colleague {
             background-color: $color-colleague;
-        }     
+        }
 
         h2 {
             color: $white;
@@ -20,10 +24,6 @@
             font-size: 1.25rem;
             line-height: 23px;
         }
-
-        .btn-primary {
-            background: #2272C4;
-        }
     }
 
     .card-body {
@@ -82,9 +82,16 @@
     &.no-body  .card-header {
         background-color: $white;
         color: $font-color-primary;
-        border:none;
+        border: none;
         border-radius: $border-radius-default;
-        padding: 20px;
+
+        &.danger {
+            background-color: #dc3545;
+        }
+
+        &.colleague {
+            background-color: $color-colleague;
+        }
         
         h2 {
             font-weight: $font-normal;

package/dist/scss/_modal.scss

@@ -20,11 +20,26 @@
         display: flex;
         gap: 4px;
         background: transparent;
+        background-image: initial;
         color: $gray-primary;
 
         .icon-close {
           width: 24px;
           height: 24px;
+          background-color: $blue-text; 
+          display: inline-block;
+          padding: 4px; 
+          border-radius: 50%;  
+          path {
+              fill: $color-white; 
+          }
+      
+          &:hover {
+              background-color: $color-lightblue;  
+              path {
+                  fill: $blue-text; 
+              }
+          }
         }
       }
 

package/dist/scss/base/variables.scss

@@ -50,6 +50,11 @@ $gray-7: #F7F8FA;             // grijs 7: button secondary bg-color hover /borde
 $gray-secondary: #6B758A;     // grijs secondair: subtitles, date cardview
 $gray-primary: #394156;       // grijs primair: headings default tekst color
 
+// red colors direved from Evers + de Gier colorscheme 2024
+$red-header: #DE4141;         // red header
+$red-text: #C32222;           // button variant danger
+$red-dark: #AE1E1E;           // hover button danger
+
 // theme colors
 $danger:$red;
 $primary:$blue;
@@ -83,7 +88,8 @@ $theme-colors: (
   "danger":     $danger,
   "success":    $success,
   "light":      $light,
-  "dark" :      $dark
+  "dark" :      $dark,
+  "gray":       $secondary,
 );
 
 //variables font
@@ -191,4 +197,8 @@ $form-range-track-border-radius:  1rem;
 $form-range-thumb-border-radius:  1rem;
 $form-range-track-height: .5rem;
 $form-range-thumb-width: 1rem;
-$form-range-thumb-height: $form-range-thumb-width;
+$form-range-thumb-height: $form-range-thumb-width;
+
+//focus ring
+$focus-ring-width:      0px;
+$focus-ring-color:      $color-white;

package/dist/scss/mixins.scss

@@ -13,6 +13,25 @@
     }  
 }
 
+@mixin badge($color, $bg-color) {  
+    border-radius: 8px;
+    padding: 5px 8px;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 0.75rem;
+    line-height: 0.875rem;
+    background-color: $bg-color;
+    color: $color;
+    svg {
+        fill: $color;
+        height: 12px;
+        width: 12px;
+        &.icon{
+        margin-right:8px;
+        }
+    }  
+}
+
 @mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
     color: $color;
     background-color: $bg-color;  

package/dist/types/BootstrapVariants.d.ts

@@ -7,5 +7,6 @@ export declare const BOOTSTRAP_VARIANTS: {
     readonly INFO: "info";
     readonly SUCCESS: "success";
     readonly LIGHT: "light";
+    readonly GRAY: "gray";
 };
 export type bootstrapVariants = GenericEnum<typeof BOOTSTRAP_VARIANTS>;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@beterdichtbij/component-library",
     "private": false,
-    "version": "0.32.0",
+    "version": "0.33.0",
     "type": "module",
     "files": [
         "dist"