@innovaccer/design-system 4.19.2 → 4.20.0

package/dist/index.umd.css

@@ -138,6 +138,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;
@@ -3343,7 +3346,8 @@ body {
 }
 
 .Button:focus {
-  outline: 0;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--iconAlign-right {
@@ -3442,7 +3446,8 @@ body {
 }
 
 .Button--basic:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--basic:disabled {
@@ -3463,7 +3468,8 @@ body {
 }
 
 .Button--primary:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--primary:disabled {
@@ -3483,7 +3489,8 @@ body {
 }
 
 .Button--success:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--success:disabled {
@@ -3503,7 +3510,8 @@ body {
 }
 
 .Button--alert:focus {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--alert:disabled {
@@ -3520,7 +3528,8 @@ body {
 }
 
 .Button--transparent:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--transparent:active {
@@ -3543,12 +3552,13 @@ body {
 }
 
 .Button--selected {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-dark);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button--selected:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
 }
 
 .Button--selected:active {
@@ -3557,8 +3567,9 @@ body {
 }
 
 .Button--selected:focus {
-  background: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  background: var(--primary-ultra-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button--selected:focus:active {
@@ -3566,8 +3577,9 @@ body {
 }
 
 .Button--selected:disabled {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
   color: var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-text--hidden {
@@ -3583,119 +3595,122 @@ body {
 /* outlined button styles */
 
 .Button-outlined--basic {
-  border: var(--border);
   color: var(--inverse);
   background: transparent;
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--basic:hover {
   background: var(--secondary-lighter);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:active {
   background: var(--secondary);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
 .Button-outlined--basic:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--basic:disabled {
   color: var(--inverse-lightest);
   background: transparent;
-  border: var(--border-width-2-5) solid var(--secondary);
+  box-shadow: inset 0 0 0 1px var(--secondary);
 }
 
 .Button-outlined--selected {
   background: var(--primary-ultra-light);
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:hover {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:focus {
   color: var(--primary-dark);
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 2px var(--primary);
 }
 
 .Button-outlined--selected:disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lightest);
+  box-shadow: inset 0 0 0 2px var(--primary-lightest);
 }
 
 .Button-outlined--primary {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
   color: var(--primary);
   mix-blend-mode: multiply;
 }
 
 .Button-outlined--primary:hover {
   background: var(--primary-ultra-light);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:active {
   background: var(--primary-lightest);
-  border: var(--border-width-2-5) solid var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Button-outlined--primary:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  box-shadow: inset 0 0 0 1px var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--primary:disabled {
   background: transparent;
   color: var(--primary-lighter);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
 .Button-outlined--alert {
   background: transparent;
-  border: var(--border-width-2-5) solid var(--alert);
+  box-shadow: inset 0 0 0 1px var(--alert);
   color: var(--alert);
   mix-blend-mode: multiply;
 }
 
 .Button-outlined--alert:hover {
   background: var(--alert-ultra-light);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:active {
   background: var(--alert-lightest);
-  border: var(--border-width-2-5) solid var(--alert-dark);
+  box-shadow: inset 0 0 0 1px var(--alert-dark);
   color: var(--alert-dark);
 }
 
 .Button-outlined--alert:focus {
-  border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  box-shadow: inset 0 0 0 1px var(--alert);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Button-outlined--alert:disabled {
   background: transparent;
   color: var(--alert-lighter);
-  border: var(--border-width-2-5) solid var(--alert-lighter);
+  box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
 
 /* calendar */
@@ -4645,22 +4660,23 @@ body {
   outline: 0;
 }
 
-.Checkbox-input ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
-  background-color: var(--shadow-0);
+.Checkbox-input:focus ~ .Checkbox-wrapper {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--default {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+.Checkbox-input ~ .Checkbox-wrapper--default {
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
+  background-color: var(--shadow-0);
 }
 
 .Checkbox-input:hover ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
-  background-color: var(--shadow-0);
+  border: var(--border-width-2-5) solid var(--inverse-light);
+  background-color: var(--secondary-lighter);
 }
 
 .Checkbox-input:active ~ .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-light);
 }
 
@@ -4669,7 +4685,7 @@ body {
 }
 
 .Checkbox--disabled .Checkbox-wrapper--default {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -4683,7 +4699,6 @@ body {
 
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
   background-color: var(--primary);
   border: 0;
 }
@@ -4712,10 +4727,6 @@ body {
   border: var(--border-width-2-5) solid var(--alert);
 }
 
-.Checkbox-input:focus ~ .Checkbox-wrapper--error {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-}
-
 .Checkbox-input:hover ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert-dark);
 }
@@ -4740,7 +4751,6 @@ body {
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
   border: var(--border-width-2-5) solid var(--alert);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
@@ -7870,7 +7880,7 @@ body {
 }
 
 .Radio-defaultWrapper {
-  border: var(--border);
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Radio-errorWrapper {
@@ -7929,13 +7939,13 @@ body {
 }
 
 .Radio:hover .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--inverse-light);
   background-color: var(--secondary-lighter);
 }
 
 .Radio:active .Radio-wrapper {
   background-color: var(--secondary-light);
-  border: var(--border-width-2-5) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-light);
 }
 
 .Radio:hover .Radio-errorWrapper {
@@ -7951,29 +7961,27 @@ body {
 }
 
 .Radio:focus-within .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
-  border-radius: var(--border-radius-full);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-errorWrapper {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Radio--disabled .Radio-wrapper {
-  border: var(--border-width-2-5) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary);
   background-color: var(--secondary-lightest);
 }
 
@@ -8063,11 +8071,11 @@ body {
 }
 
 .Radio--disabled .Radio-input ~ .Radio-wrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Radio--disabled .Radio-input ~ .Radio-errorWrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .StatusHint {
@@ -8182,11 +8190,11 @@ body {
 }
 
 .Circle--primary {
-  stroke: var(--primary);
+  stroke: var(--primary-dark);
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--inverse-lighter);
 }
 
 .Circle--white {
@@ -8194,7 +8202,7 @@ body {
 }
 
 .Circle--alert {
-  stroke: var(--alert);
+  stroke: var(--alert-dark);
 }
 
 /* Subheading */
@@ -11051,9 +11059,7 @@ body {
 }
 
 .Select-trigger--filled:focus {
-  border: var(--border-width-2-5) solid var(--primary);
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 /* styleType Outlined */
@@ -11070,11 +11076,6 @@ body {
   border: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
-.Select-trigger--outlined:focus {
-  border: var(--border-width-2-5) solid var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-}
-
 .Select-trigger--outlined:active,
 .Select-trigger--outlinedOpen {
   color: var(--inverse) !important;
@@ -11206,7 +11207,6 @@ body {
 
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 
 .Menu {