@innovaccer/design-system 5.0.0-21 → 5.0.0-23

package/css/src/components/link.module.css

@@ -3,11 +3,13 @@
   font-weight: var(--font-weight-medium);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
   box-sizing: border-box;
-  border-bottom: var(--border-width-2-5) solid transparent;
+  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
-.Link:focus-visible {
-  outline: none;
+.Link:focus {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  border-radius: var(--border-radius-10);
 }
 
 .Link--regular {
@@ -27,6 +29,7 @@
 
 .Link--subtle {
   color: var(--inverse-lighter);
+  border-bottom-color: transparent;
 }
 
 .Link--default:hover {
@@ -41,22 +44,12 @@
 
 .Link--default:active {
   color: var(--primary-darker);
-  border: none;
+  border-bottom: var(--border-width-2-5) solid currentColor;
 }
 
 .Link--subtle:active {
   color: var(--inverse);
-  border: none;
-}
-
-.Link--default:focus {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  border-radius: var(--border-radius-10);
-}
-
-.Link--subtle:focus {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--border-radius-10);
+  border-bottom: var(--border-width-2-5) solid transparent;
 }
 
 .Link--default-disabled {

package/css/src/components/linkButton.module.css

@@ -60,8 +60,8 @@
 
 .LinkButton--default:focus,
 .LinkButton--default:focus-visible {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .LinkButton--default:disabled {
@@ -86,8 +86,8 @@
 
 .LinkButton--subtle:focus,
 .LinkButton--subtle:focus-visible {
-  outline: 0;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .LinkButton--subtle:disabled {

package/css/src/components/listbox.module.css

@@ -51,7 +51,8 @@
 
 .Listbox-item--option:focus,
 .Listbox-item--option:focus-visible {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--option:active {
@@ -68,7 +69,8 @@
 
 .Listbox-item--selected:focus,
 .Listbox-item--selected:focus-visible {
-  outline: 3px auto color-mod(var(--primary-shadow));
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--selected:active {
@@ -87,7 +89,8 @@
 
 .Listbox-item--resource:focus,
 .Listbox-item--resource:focus-visible {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--resource:active {
@@ -115,7 +118,8 @@
 /* Listbox type - draggable  */
 
 .Listbox-item--draggable:focus {
-  outline: 3px auto var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: calc(-1 * var(--border-width-05));
 }
 
 .Listbox-item--drag-icon {

package/css/src/components/metricInput.module.css

@@ -37,8 +37,9 @@
 
 .MetricInput:focus-within {
   background: var(--white);
-  border-color: 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);
 }
 
 .MetricInput:focus-within .MetricInput-icon {
@@ -68,8 +69,9 @@
 }
 
 .MetricInput--error:focus-within {
-  border-color: var(--alert);
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  border-color: var(--secondary);
+  outline: var(--border-width-05) solid var(--alert);
+  outline-offset: var(--spacing-2-5);
 }
 
 .MetricInput--error:focus-within .MetricInput-icon {

package/css/src/components/radio.module.css

@@ -18,7 +18,7 @@
 }
 
 .Radio-defaultWrapper {
-  border: var(--border);
+  border: var(--border-width-2-5) solid var(--inverse-lighter);
 }
 
 .Radio-errorWrapper {
@@ -55,6 +55,8 @@
 .Radio-Label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Radio-wrapper {
@@ -77,13 +79,13 @@
 }
 
 .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 {
@@ -99,29 +101,27 @@
 }
 
 .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);
 }
 
@@ -211,9 +211,9 @@
 }
 
 .Radio--disabled .Radio-input ~ .Radio-wrapper:focus {
-  box-shadow: none;
+  outline: none;
 }
 
 .Radio--disabled .Radio-input ~ .Radio-errorWrapper:focus {
-  box-shadow: none;
+  outline: none;
 }

package/css/src/components/segmentedControl.module.css

@@ -46,7 +46,7 @@
   left: 0;
   box-sizing: border-box;
   background-color: var(--primary-ultra-light);
-  border: var(--border-width-2-5) solid var(--primary-lighter);
+  border: var(--border-width-05) solid var(--primary);
   border-radius: var(--border-radius-10);
   pointer-events: none;
   z-index: 2;
@@ -100,9 +100,9 @@
 }
 
 .SegmentedControl-segment:focus-visible:not(.SegmentedControl-segment--selected) {
-  border-color: var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
   border-radius: var(--border-radius-10);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
   z-index: 100;
   position: relative;
 }

package/css/src/components/select.module.css

@@ -10,10 +10,11 @@
 .Select-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .Select-input:hover {
-  background-color: #f4f4f4;
+  background-color: var(--secondary-lightest);
 }
 
 .Select-trigger {
@@ -49,9 +50,7 @@
 }
 
 .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 */
@@ -68,11 +67,6 @@
   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;
@@ -162,7 +156,7 @@
 
 .Select-crossButton:focus-visible,
 .Select-crossButton:focus {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Select-crossButton:hover {
@@ -202,5 +196,4 @@
 
 .Select-trigger--error {
   border: var(--border-width-2-5) solid var(--alert) !important;
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
 }

package/css/src/components/selectionCard.module.css

@@ -16,10 +16,9 @@
 
 .Selection-card--default:focus,
 .Selection-card--default:focus-visible {
-  outline: none;
-  box-shadow:
-    var(--shadow-spread) var(--secondary-shadow),
-    inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
 }
 
 .Selection-card--default:active {
@@ -48,10 +47,9 @@
 
 .Selection-card--selected:focus,
 .Selection-card--selected:focus-visible {
-  outline: none;
-  box-shadow:
-    var(--shadow-spread) var(--primary-shadow),
-    inset 0 0 0 var(--spacing-05) var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
 }
 
 .Selection-card--selected:active {

package/css/src/components/slider.module.css

@@ -18,6 +18,7 @@
   display: flex;
   align-items: center;
   overflow: hidden;
+  padding-bottom: var(--spacing-20);
 }
 
 .Slider-progress {
@@ -35,6 +36,10 @@
   border: var(--border);
 }
 
+.Slider-axis {
+  margin-top: calc(-1 * var(--spacing-20));
+}
+
 .Slider-label {
   margin-top: var(--spacing-10);
   -webkit-transform: translate(-50%, 0px);
@@ -90,6 +95,18 @@
     background-color var(--duration--fast-01) var(--standard-productive-curve);
 }
 
+.Slider-handle::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--spacing-60);
+  height: var(--spacing-60);
+  background-color: transparent;
+  border-radius: var(--border-radius-full);
+}
+
 .Slider-handle:hover {
   background-color: var(--primary-lightest);
 }
@@ -99,8 +116,13 @@
 }
 
 .Slider-handle: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);
+}
+
+.Slider-handle:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Slider-handle--disabled {
@@ -110,5 +132,6 @@
 }
 
 .Slider-handle--disabled:focus {
+  outline: none;
   box-shadow: none;
 }

package/css/src/components/spinner.module.css

@@ -54,11 +54,11 @@
 }
 
 .Circle--primary {
-  stroke: var(--primary);
+  stroke: var(--primary-dark);
 }
 
 .Circle--secondary {
-  stroke: var(--secondary-dark);
+  stroke: var(--inverse-lighter);
 }
 
 .Circle--white {
@@ -66,5 +66,5 @@
 }
 
 .Circle--alert {
-  stroke: var(--alert);
+  stroke: var(--alert-dark);
 }

package/css/src/components/stepper.module.css

@@ -23,8 +23,8 @@
 
 .Step:focus,
 .Step:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 /* Completed State */
@@ -43,8 +43,8 @@
 
 .Step--completed:focus,
 .Step--completed:focus-visible {
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 /* Active State */
@@ -53,6 +53,7 @@
   background-color: var(--primary-lightest);
   color: var(--primary-dark);
   transition-delay: var(--duration--fast-02);
+  box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
 .Step--active:hover {
@@ -62,8 +63,8 @@
 .Step--active:focus,
 .Step--active:focus-visible {
   background-color: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Step--active:active {

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/text.module.css

@@ -7,6 +7,7 @@
 .Text--small {
   font-size: var(--font-size-s);
   line-height: var(--font-height-normal);
+  font-weight: var(--font-weight-medium);
 }
 
 .Text--regular {

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 {