@innovaccer/design-system 4.19.2 → 4.21.0

package/css/src/components/switch.module.css

@@ -42,12 +42,14 @@
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--secondary-light);
 }
 
 .Switch-input:focus ~ .Switch-wrapper--checked {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   background-color: var(--primary);
 }
 
@@ -67,6 +69,14 @@
   background-color: var(--primary-darker);
 }
 
+.Switch-input:active ~ .Switch-wrapper:before {
+  border-color: var(--inverse-light);
+}
+
+.Switch-input:active ~ .Switch-wrapper--checked:before {
+  border-color: transparent;
+}
+
 .Switch-wrapper--tiny {
   border-radius: var(--border-radius-full);
 }
@@ -88,6 +98,7 @@
   border-radius: var(--border-radius-full);
   box-sizing: border-box;
   transition-duration: 80ms;
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Switch-wrapper--checked {
@@ -102,6 +113,7 @@
   -ms-transform: translateX(100%);
   transform: translateX(100%);
   transition-duration: 80ms;
+  border-color: transparent;
 }
 
 .Switch--disabled {
@@ -112,6 +124,14 @@
   background-color: var(--secondary-lighter);
 }
 
+.Switch-wrapper--disabled:before {
+  border-color: var(--secondary-dark);
+}
+
 .Switch-wrapper--checkedDisabled {
   background-color: var(--primary-lighter);
 }
+
+.Switch-wrapper--checkedDisabled:before {
+  border-color: transparent;
+}

package/css/src/components/tabs.module.css

@@ -35,6 +35,22 @@
   padding: var(--spacing-30) var(--spacing-30) var(--spacing-40);
 }
 
+.Tab--withIconRegular {
+  padding-top: calc(var(--spacing-20) + var(--spacing-05));
+  padding-bottom: calc(var(--spacing-20) + var(--spacing-15));
+  padding-right: var(--spacing-15);
+  padding-left: calc(var(--spacing-40) + var(--spacing-05));
+  align-items: center;
+}
+
+.Tab--withIconSmall {
+  padding-top: var(--spacing-15);
+  padding-bottom: calc(var(--spacing-20) + var(--spacing-05));
+  padding-right: var(--spacing-15);
+  padding-left: calc(var(--spacing-40) + var(--spacing-05));
+  align-items: center;
+}
+
 .Tab:last-child {
   margin-right: 0;
 }
@@ -52,6 +68,10 @@
   border-top-right-radius: var(--border-radius-2-5);
 }
 
+.Tab--withDismissIcon::after {
+  margin-left: calc(var(--spacing-40) + var(--spacing-05));
+}
+
 .Tab:hover::after {
   background-color: var(--inverse-lighter);
 }
@@ -65,10 +85,9 @@
 }
 
 .Tab:focus {
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 0;
   border-radius: var(--border-radius-10);
-  /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Tab--active:hover .Tab-selected {
@@ -80,7 +99,8 @@
 }
 
 .Tab:active:focus {
-  box-shadow: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 0;
 }
 
 .Tab--disabled {
@@ -88,7 +108,7 @@
 }
 
 .Tab--disabled:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Tab--disabled:hover::after {
@@ -122,15 +142,20 @@
   cursor: not-allowed;
 }
 
-.DismissibleTab-icon--right {
-  padding: var(--spacing-05);
-  margin-left: var(--spacing-05);
+.DismissibleRegularTab-icon--right {
+  padding: var(--spacing-10);
+  outline: none;
+  border-radius: var(--border-radius-full);
+}
+
+.DismissibleSmallTab-icon--right {
+  padding: var(--spacing-15);
   outline: none;
   border-radius: var(--border-radius-full);
 }
 
 .DismissibleTab-icon--default:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .DismissibleTab-icon--default:hover {
@@ -142,7 +167,7 @@
 }
 
 .DismissibleTab-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .DismissibleTab-icon--selected:hover {

package/css/src/components/textarea.module.css

@@ -26,9 +26,9 @@
 }
 
 .Textarea:focus-within {
-  outline: none;
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  border-color: var(--secondary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-2-5);
 }
 
 .Textarea:disabled {
@@ -48,8 +48,9 @@
 }
 
 .Textarea--error:focus-within {
-  border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--alert);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-2-5);
 }
 
 .Textarea--resize {

package/css/src/components/verticalNav.module.css

@@ -75,25 +75,55 @@
 }
 
 .MenuItem:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+}
+
+.MenuItem--expanded:focus {
+  clip-path: inset(-6px -6px -6px 0);
+}
+
+.MenuItem--expandedRounded:focus {
+  clip-path: inset(-6px);
 }
 
 .MenuItem--disabled:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .MenuItem--active {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
+}
+
+.MenuItem--activeExpanded {
+  box-shadow: inset 0 var(--border-width-2-5) 0 0 var(--primary),
+    inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary),
+    inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary);
+}
+
+.MenuItem--activeExpandedRounded {
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
 .MenuItem--active:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
 }
 
 .MenuItem--active:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);
+}
+
+.MenuItem--activeExpanded:active {
+  box-shadow: inset 0 var(--border-width-2-5) 0 0 var(--primary-dark),
+    inset calc(-1 * var(--border-width-2-5)) 0 0 0 var(--primary-dark),
+    inset 0 calc(-1 * var(--border-width-2-5)) 0 0 var(--primary-dark);
+}
+
+.MenuItem--activeExpandedRounded:active {
+  box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary-dark);
 }
 
 .MenuItem--active:active .MenuItem-Text {
@@ -101,8 +131,8 @@
 }
 
 .MenuItem--active:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .MenuItem--rounded {

package/css/src/variables/index.css

@@ -70,6 +70,9 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Focus */
+  --primary-focus: var(--jal-dark);
+
   /* Ultra Light */
   --primary-ultra-light: #eef6fc;
   --success-ultra-light: #ecf7f0;