Change “mini-card”UI Color

In addtion to changing the UI color for “mini cards” from motion blue to extensions aqua, this commit also updates the color variable previously known as ‘$pen-primary’ to ‘$extensions-primary’.

src/components/action-menu/action-menu.css

@@ -28,7 +28,7 @@ button::-moz-focus-inner {
 }
 
 .button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
 }
 
 .button:active {
@@ -126,7 +126,7 @@ button::-moz-focus-inner {
     is not very easy to style.
 */
 .tooltip {
-    background-color: $pen-primary !important;
+    background-color: $extensions-primary !important;
     opacity: 1 !important;
     border: 1px solid hsla(0, 0%, 0%, .1) !important;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
@@ -134,7 +134,7 @@ button::-moz-focus-inner {
 }
 
 .tooltip:after {
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .coming-soon-tooltip {

src/components/camera-modal/camera-modal.css

@@ -93,7 +93,7 @@ $main-button-size: 2.75rem;
 }
 
 .main-button:hover {
-    background: $pen-primary;
+    background: $extensions-primary;
     box-shadow: 0 0 0 6px $motion-transparent;
 }
 

src/components/cards/card.css

@@ -41,7 +41,7 @@
     left: 0;
     height: 1.8rem;
     width: 100%;
-    background: $motion-primary;
+    background: $extensions-primary;
 }
 
 .left-button, .right-button {
@@ -51,14 +51,15 @@
     z-index: 20;
     user-select: none;
     cursor: pointer;
-    background: $motion-primary;
-    box-shadow: 0 0 0 4px $motion-transparent;
     height: 40px;
     width: 40px;
+    background: $extensions-primary;
+    box-shadow: 0 0 0 4px $extensions-transparent;
     border-radius: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
+    box-shadow: 0 0 0 6px $extensions-transparent;
 }
 
 .left-button {
@@ -88,9 +89,9 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    background: $motion-primary;
-    border-bottom: 1px solid $motion-tertiary;
     padding: 0.5rem;
+    background: $extensions-primary;
+    border-bottom: 1px solid $extensions-tertiary;
     font-size: 0.625rem;
 }
 

src/components/import-modal/import-modal.css

@@ -45,7 +45,7 @@ $sides: 20rem;
 
     box-sizing: border-box;
     width: 100%;
-    background-color: $pen-primary;
+    background-color: $extensions-primary;
 }
 
 .header-item {
@@ -129,12 +129,12 @@ $sides: 20rem;
     font-weight: bold;
     font-size: .875rem;
     cursor: pointer;
-    border: 0px solid $pen-primary;
+    border: 0px solid $extensions-primary;
     outline: none;
 }
 
 .input-row button.ok-button {
-    background: $pen-primary;
+    background: $extensions-primary;
     color: white;
 }
 

src/components/preview-modal/preview-modal.css

@@ -69,8 +69,8 @@
 }
 
 .button-row button.view-project-button {
-    background: $pen-primary;
-    border-color: $pen-primary;
+    background: $extensions-primary;
+    border-color: $extensions-primary;
     color: white;
 }
 

src/css/colors.css

@@ -26,4 +26,6 @@ $control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
 
 $data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
 
-$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
+$extensions-tertiary: hsla(163, 85%, 30%, 1); /* #0B8E69 */
+$extensions-transparent: hsla(163, 85%, 40%, 0.35); /* 35% transparent version of extensions-primary */