@innovaccer/design-system 2.6.0 → 2.7.0-0

package/css/dist/index.css

@@ -243,13 +243,16 @@
 
   /* 
   Grid columns
- Set the number of columns and specify the width of the gutters. 
- */
+  Set the number of columns and specify the width of the gutters. 
+  */
 
   --grid-columns: 12;
 
   /* Undefined colors */
   --card-subdued-bg: #fcfafa;
+
+  /* Transparancy (Opacity) */
+  --transparent-58: 0.58;
 }
 
 /* fallback */
@@ -1091,23 +1094,23 @@ body {
 }
 
 .Button--success {
-  background: var(--success);
+  background: var(--primary);
 }
 
 .Button--success:hover {
-  background: var(--success-dark);
+  background: var(--primary-dark);
 }
 
 .Button--success:active {
-  background: var(--success-darker);
+  background: var(--primary-darker);
 }
 
 .Button--success:focus {
-  box-shadow: var(--shadow-spread) var(--success-shadow);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Button--success:disabled {
-  background: var(--success-lighter);
+  background: var(--primary-lighter);
 }
 
 .Button--alert {
@@ -1410,7 +1413,7 @@ body {
 }
 
 .Calendar-valueWrapper--dummy {
-  opacity: 0.58;
+  opacity: var(--transparent-58);
 }
 
 .Calendar-value--disabled {
@@ -1765,10 +1768,6 @@ body {
   border-color: var(--jal-lighter);
 }
 
-.Chip-selection--selected .Text {
-  color: var(--primary);
-}
-
 .Chip-selection--disabled {
   background: var(--shadow-0);
   border-color: var(--stone-light);
@@ -1789,6 +1788,12 @@ body {
   border: 0px;
 }
 
+.Chip-selection--selectedDisabled {
+  background: var(--jal-lightest);
+  border-color: var(--jal-lighter);
+  opacity: var(--transparent-58);
+}
+
 .ChipGroup {
   display: inline-flex;
 }
@@ -2581,42 +2586,44 @@ body {
 @-webkit-keyframes fullscreenModal-open {
   from {
     opacity: 0;
-    background: transparent;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
   to {
     opacity: 100;
+    transform: translateY(0px);
   }
 }
 
 @keyframes fullscreenModal-open {
   from {
     opacity: 0;
-    background: transparent;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
   to {
     opacity: 100;
+    transform: translateY(0px);
   }
 }
 
 @-webkit-keyframes fullscreenModal-close {
   from {
     opacity: 100;
+    transform: translateY(0px);
   }
   to {
     opacity: 0;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
 }
 
 @keyframes fullscreenModal-close {
   from {
     opacity: 100;
+    transform: translateY(0px);
   }
   to {
     opacity: 0;
-    transform: scaleX(120%) scaleY(120%) translateX(-10%) translateY(-10%);
+    transform: translateY(20px);
   }
 }
 
@@ -3647,11 +3654,6 @@ body {
   background-color: rgba(255, 245, 199, 0.4);
 }
 
-.Message--default {
-  border-color: var(--secondary-dark);
-  background-color: var(--white);
-}
-
 .Message-icon {
   margin-right: var(--spacing-2);
   padding-top: var(--spacing-s);
@@ -5072,18 +5074,39 @@ body {
   display: flex;
   align-items: center;
   line-height: 100%;
-  padding: var(--spacing-xs);
+  padding: var(--spacing-s);
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
   background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
+  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+}
+
+.Switch-input:focus ~ .Switch-wrapper--checked {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
+.Switch-input:hover ~ .Switch-wrapper {
+  background-color: var(--secondary-light);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:hover ~ .Switch-wrapper--checked {
+  background-color: var(--primary-dark);
+  box-shadow: var(--shadow-s);
+}
+
+.Switch-input:active ~ .Switch-wrapper {
+  background-color: var(--secondary-dark);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked {
+  background-color: var(--primary-darker);
+}
+
 .Switch-wrapper--tiny {
   border-radius: 10px;
 }
@@ -5352,11 +5375,6 @@ body {
   padding-bottom: var(--spacing-2);
 }
 
-.Toast--default {
-  padding-left: var(--spacing-xl);
-  background-color: var(--inverse);
-}
-
 .Toast--info {
   background-color: var(--primary);
 }