fix: refactored css and twig, plus color update

Author: mikemai2awesome

src/_data/bolt-brand-colors.json

@@ -3,8 +3,8 @@
     "xdark": "rgb(6, 9, 35)",
     "dark": "rgb(22, 26, 60)",
     "base": "rgb(31, 38, 86)",
-    "light": "rgb(68, 76, 136)",
-    "xlight": "rgb(199, 205, 255)"
+    "light": "rgb(84, 93, 166)",
+    "xlight": "rgb(171, 179, 242)"
   },
   "blue": {
     "dark": "rgb(0, 83, 128)",

src/_data/bolt-colors.json

@@ -3,8 +3,8 @@
     "xdark": "rgb(6, 9, 35)",
     "dark": "rgb(22, 26, 60)",
     "base": "rgb(31, 38, 86)",
-    "light": "rgb(68, 76, 136)",
-    "xlight": "rgb(199, 205, 255)"
+    "light": "rgb(84, 93, 166)",
+    "xlight": "rgb(171, 179, 242)"
   },
   "blue": {
     "dark": "rgb(0, 83, 128)",

src/_patterns/01-core/01-settings/settings-colors/src/scss/_settings.colors.scss

@@ -12,8 +12,8 @@ $bolt-brand-colors: (
     xdark:  hsl(233, 71%, 8%),
     dark:   hsl(233, 47%, 16%),
     base:   hsl(233, 47%, 23%),
-    light:  hsl(233, 33%, 40%),
-    xlight: hsl(233, 100%, 89%)
+    light:  hsl(233, 33%, 49%),
+    xlight: hsl(233, 73%, 81%)
   ),
   blue: (
     dark: hsl(201, 100%, 25%),

src/_patterns/01-core/01-settings/settings-global/_settings.global.scss

@@ -3,23 +3,39 @@
 /// @author Mike Mai
 ////
 
+@import '@bolt/tools-color-palette';
 
 /* ------------------------------------ *\
    Global Settings
 \* ------------------------------------ */
 
-
 // Global Min / Max Base Font Size
 $bolt-base-font-size--min: 14px;
 $bolt-base-font-size--max: 18px;
 
-
-
-
 // Async font loading classes.
 $bolt-fonts--subset-loaded-class: 'js-fonts-subset-loaded' !default;
 $bolt-fonts--loaded-class: 'js-fonts-loaded' !default;
 
+// Shadows
+$bolt-shadow-color: bolt-color(black);
+$bolt-shadow--small: 0 1px 0.15rem rgba($bolt-shadow-color, 0.5);
+$bolt-shadow--medium: 0 0.15rem 0.3rem rgba($bolt-shadow-color, 0.35);
+$bolt-shadow--large: 0 0.35rem 0.6rem rgba($bolt-shadow-color, 0.18);
+
+// Border
+$bolt-border-width: 1px;
+$bolt-border-style: solid;
+$bolt-border-radius: 3px;
+
+// Transition
+$bolt-transition: ease-in-out 200ms;
+
+// Effects
+$bolt-translate-none: translate3d(0, 0, 0);
+$bolt-translate-raised--small: translate3d(0, -1px, 0);
+$bolt-translate-raised--medium: translate3d(0, -0.125rem, 0);
+$bolt-translate-raised--large: translate3d(0, -0.25rem, 0);
 
 /* ------------------------------------ *\
    All block elements

src/_patterns/01-core/01-settings/settings-global/package.json

@@ -36,5 +36,8 @@
   },
   "scripts": {
     "getName": "echo $npm_package_name"
+  },
+  "dependencies": {
+    "@bolt/tools-color-palette": "^0.4.0"
   }
 }

src/_patterns/01-core/06-themes/themes-all/_themes.all.scss

@@ -95,8 +95,8 @@
   @if $name == 'xlight' {
     @include _bolt-theme-settings(
       $background:  bolt-color(white),
-      $primary:     bolt-color(blue),
-      $secondary:   bolt-color(blue),
+      $primary:     bolt-color(indigo, light),
+      $secondary:   bolt-color(indigo, light),
       $text:        null,
       $heading:     bolt-color(indigo),
       $button-text: null,
@@ -105,8 +105,8 @@
   @elseif $name == 'light' {
     @include _bolt-theme-settings(
       $background:  bolt-color(gray, xlight),
-      $primary:     bolt-color(blue),
-      $secondary:   bolt-color(blue),
+      $primary:     bolt-color(indigo, light),
+      $secondary:   bolt-color(indigo, light),
       $text:        null,
       $heading:     bolt-color(indigo),
       $button-text: null,
@@ -125,7 +125,7 @@
   @elseif $name == 'xdark' {
     @include _bolt-theme-settings(
       $background:  bolt-color(indigo, dark),
-      $primary:     bolt-color(blue),
+      $primary:     bolt-color(indigo, light),
       $secondary:   bolt-color(white),
       $text:        null,
       $heading:     null,