ca-components 2.0.14 → 2.0.16

package/assets/scss/background.scss

@@ -35,9 +35,15 @@
         &-2 {
             background-color: $grey-2;
         }
+        &-7 {
+            background-color: $grey-7;
+        }
         &-12 {
             background-color: $grey-12;
         }
+        &-20 {
+            background-color: $grey-20;
+        }
     }
 
     &-light-gray {
@@ -110,6 +116,9 @@
         &-2 {
             background-color: $dark-2;
         }
+        &-3 {
+            background-color: $dark-3;
+        }
     }
 
     &-red {

package/assets/scss/icons.scss

@@ -7,6 +7,14 @@
     }
 }
 
+@mixin svg-rect-fill($color) {
+    fill: $color !important;
+
+    svg rect {
+        fill: $color !important;
+    }
+}
+
 @mixin svg-hover($color) {
     svg path {
         transition: fill 0.3s ease-in-out;
@@ -19,6 +27,22 @@
     }
 }
 
+@mixin svg-rect-hover($color) {
+    transition: fill 0.3s ease-in-out;
+
+    svg rect {
+        transition: fill 0.3s ease-in-out;
+    }
+
+    &:hover {
+        fill: $color !important;
+
+        svg rect {
+            fill: $color !important;
+        }
+    }
+}
+
 @mixin svg-size($width, $height) {
     svg {
         width: $width;
@@ -245,4 +269,42 @@
             @include svg-size(90px, 90px);
         }
     }
+
+    &-rect {
+        &-fill {
+            &-blue-8 {
+                @include svg-rect-fill($blue-8);
+            }
+            &-yellow-1 {
+                @include svg-rect-fill($ta-yellow-1);
+            }
+            &-red-10 {
+                @include svg-rect-fill($ta-red-10);
+            }
+            &-muted {
+                @include svg-rect-fill($muted);
+            }
+            &-dark-2 {
+                @include svg-rect-fill($dark-2);
+            }
+        }
+
+        &-hover {
+            &-blue-14 {
+                @include svg-rect-hover($ta-blue-14);
+            }
+            &-yellow-5 {
+                @include svg-rect-hover($ta-yellow-5);
+            }
+            &-red-11 {
+                @include svg-rect-hover($ta-red-11);
+            }
+            &-bw6-2 {
+                @include svg-rect-hover($bw6-2);
+            }
+            &-dark-2 {
+                @include svg-rect-hover($dark-2);
+            }
+        }
+    }
 }

package/assets/scss/sizing.scss

@@ -2,6 +2,7 @@ $sizes-height: (
     7,
     8,
     10,
+    11,
     12,
     14,
     15,

package/assets/scss/text-selection.scss

@@ -43,6 +43,11 @@
             @include text-selection($ta-blue-13);
         }
 
+        &-blue-14 {
+            color: $ta-blue-14 !important;
+            @include text-selection($ta-blue-14);
+        }
+
         &-blue-16 {
             color: $ta-blue-16 !important;
             @include text-selection($ta-blue-16);
@@ -78,6 +83,16 @@
             @include text-selection($ta-yellow-1);
         }
 
+        &-yellow-4 {
+            color: $ta-yellow-4 !important;
+            @include text-selection($ta-yellow-4);
+        }
+
+        &-yellow-5 {
+            color: $ta-yellow-5 !important;
+            @include text-selection($ta-yellow-5);
+        }
+
         &-purple {
             color: $ta-purple-1 !important;
             @include text-selection($ta-purple-1);

package/assets/theme/variables.scss

@@ -328,6 +328,7 @@ $grey-16: #919191b3;
 $grey-17: #6c6c6c66;
 $grey-18: #9191911a;
 $grey-19: #e2e2e2;
+$grey-20: #c9c9c9;
 
 $green: #4db6a240;
 $green-2: #80cbba;