diff --git a/src/lib/components/callout/_index.scss b/src/lib/components/callout/_index.scss
index 0fe6370..43ebc90 100644
--- a/src/lib/components/callout/_index.scss
+++ b/src/lib/components/callout/_index.scss
@@ -39,7 +39,7 @@ $color: (
     "background-color": $colorWarningLighterShade
   ),
   danger: (
-    "border-color": transparentize($colorDanger, 0.5),
+    "border-color": $colorDangerLightShade,
     "background-color": $colorDangerLighterShade
   ),
   neutral: (
diff --git a/src/lib/sassUtils/_colors.scss b/src/lib/sassUtils/_colors.scss
index cec4cf4..4ae3aeb 100644
--- a/src/lib/sassUtils/_colors.scss
+++ b/src/lib/sassUtils/_colors.scss
@@ -1,6 +1,6 @@
 // Semantic colors
 $colorAccent: #5f30c3 !default;
-$colorAccentLightShade: transparentize($colorAccent, 0.5);
+$colorAccentLightShade: transparentize($colorAccent, 0.5) !default;
 $colorAccentLighterShade: #eee7ff !default;
 
 $colorPrimary: #045dda !default;
@@ -12,13 +12,16 @@ $colorSuccessLightShade: transparentize($colorSuccess, 0.5) !default;
 $colorSuccessLighterShade: #e2f2e0 !default;
 
 $colorWarning: #a86f1b !default;
-$colorWarningLightShade: transparentize($colorWarning, 0.5);
+$colorWarningLightShade: transparentize($colorWarning, 0.5) !default;
 $colorWarningLighterShade: #ffeed4 !default;
 
 $colorDanger: #d22d2d !default;
-$colorDangerLightShade: transparentize($colorDanger, 0.5);
+$colorDangerLightShade: transparentize($colorDanger, 0.5) !default;
 $colorDangerLighterShade: #fff1f1 !default;
 
+// Special colors
+$colorPrimaryHighlight: #d9e2ff !default;
+
 // Neutral colors
 $colorEmptyShade: #ffffff !default;
 $colorLightShade: #eeeff1 !default;