fix: faulty colors & negative margins.

Author: Sebastian Thulin

source/sass/component/_field.scss

@@ -17,7 +17,7 @@ $c-field-border-radius: var(--c-field-border-radius, 0.25) !default;
 
 $c-field-border-width: var(--c-field-border-width, var(--border-width-input, 1px)) !default;
 $c-field-padding: var(--c-field-padding, map-get($spacers, "2")) !default;
-$c-field-height: var(--c-field-height, calc((map-get($spacers, "6")))) !default;
+$c-field-height: var(--c-field-height, calc(#{map-get($spacers, "6")})) !default;
 $c-field-font-size-sm: var(--c-field-font-size-sm, $font-size-btn-sm) !default;
 $c-field-font-size-md: var(--c-field-font-size-md, $font-size-btn-md) !default;
 $c-field-font-size-lg: var(--c-field-font-size-lg, $font-size-btn-lg) !default;
@@ -286,7 +286,7 @@ $fields: 'input, input[type="color"], input[type="text"], input[type="search"],
 
         #{$fields} {
             padding: calc(#{map-get($spacers, "2")} + #{map-get($spacers, "05")}); 
-            height: calc((#{map-get($spacers, "8")}));
+            height: #{map-get($spacers, "8")}
         }
 
         &.c-field--borderless {
@@ -297,7 +297,7 @@ $fields: 'input, input[type="color"], input[type="text"], input[type="search"],
 
         textarea {
             padding: calc(#{map-get($spacers, "2")} + #{map-get($spacers, "05")}); 
-            min-height: calc((#{map-get($spacers, "8")}));
+            min-height: #{map-get($spacers, "8")};
         }
 
         .c-field__icon, .c-field__prefix {

source/sass/component/_image.scss

@@ -88,14 +88,14 @@ $c-image-border-radius: var(--c-image-border-radius, $border-radius-xs) !default
     .c-modal--gallery .c-image__caption {
         margin: 0 auto;
         position: absolute;
-        bottom: -#{map-get($spacers, '8')};
+        bottom: calc( #{map-get($spacers, '8')} * -1);
         color: $color-white;
         left: 50%;
         margin-right: -50%;
         transform: translate(-50%, -50%);
 
         @include mq(map_get($breakpoints-map, 'xs'), 'sm') {
-            bottom: -#{map-get($spacers, '8')};
+            bottom: calc(#{map-get($spacers, '8')} * -1);
             word-break: break-word;
         }
     }

source/sass/component/_modal.scss

@@ -179,7 +179,7 @@ $c-modal-backdrop-color: var(--c-modal-backdrop-color, $color-alpha) !default;
     }
 
     &__prev {
-        left: -#{map-get($spacers, "8")};
+        left: calc(#{map-get($spacers, "8")} * -1);
     }
 
     &__next {
@@ -218,7 +218,7 @@ $c-modal-backdrop-color: var(--c-modal-backdrop-color, $color-alpha) !default;
         }
 
         &__close {
-            top: -#{map-get($spacers, "6")};
+            top: calc(#{map-get($spacers, "6")} * -1);
             right: map-get($spacers, "1");
 
             i {

source/sass/setting/_var_colors.scss

@@ -88,7 +88,7 @@ $color-danger-text: var(--color-danger-text, $color-white) !default;
 $color-info-text: var(--color-info-text, $color-white) !default;
 $color-warning-text: var(--color-warning-text, $color-black) !default;
 
-$color-base: var(--color-base, rgba($color-black, 0.96)) rgba($color-black, 0.96) !default;
+$color-base: var(--color-base, rgba($color-black, 0.96)) !default;
 $color-base-secondary: var(--color-secondary, rgba($color-black, 0.54)) !default;
 $color-base-disabled: var(--color-disabled, $color-light) !default;
 
@@ -107,7 +107,7 @@ $color-link-active: var(--color-link-active, $color-primary) !default;
 $color-link-visited: var(--color-link-visited, $color-black) !default;
 $color-link-visited-hover: var(--color-link-visited-hover, $color-primary-dark) !default;
 
-$color-shadow: var(--color-shadow, rgba($color-black, 0.18)) rgba!default;
+$color-shadow: var(--color-shadow, rgba($color-black, 0.18)) !default;
 $color-shadow-sharp: #000000 !default; //TO DO: Fix workaround for applying css variables to rgba values
 $color-border: var(--color-border, $color-lighter);
 $color-code-background: var(--color-code-background, #fdfcfb);