@innovaccer/design-system 4.19.2 → 4.21.0

package/css/src/components/chip.module.css

@@ -40,7 +40,16 @@
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius-full);
-  margin-left: var(--spacing-05);
+}
+
+.Chip-icon--rightSmall {
+  width: var(--spacing-60);
+  height: var(--spacing-60);
+  box-sizing: border-box;
+  padding: var(--spacing-15);
+  margin-left: calc(var(--spacing-05) * -1);
+  margin-right: calc((var(--spacing-05) + var(--spacing-2-5)) * -1);
+  flex-shrink: 0;
 }
 
 .Chip--action {
@@ -54,8 +63,8 @@
 }
 
 .Chip--action: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);
 }
 
 .Chip--action:active {
@@ -82,8 +91,8 @@
 }
 
 .Chip--selection: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);
 }
 
 .Chip--selection:active {
@@ -99,23 +108,26 @@
 }
 
 .Chip-selection--selected {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
-  border-color: var(--primary-lighter);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
 }
 
 .Chip-selection--selected:hover {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-12)));
-  border-color: var(--primary-light);
+  background: var(--primary-lightest);
+  border-color: var(--primary);
+  box-shadow: inset 0 0 0 1px var(--primary);
 }
 
 .Chip-selection--selected:focus-visible {
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Chip-selection--selected:active {
   background: var(--primary-lighter);
   border-color: var(--primary-dark);
+  box-shadow: inset 0 0 0 1px var(--primary-dark);
 }
 
 .Chip-selection--selected:active .Chip-icon,
@@ -132,8 +144,10 @@
 }
 
 .Chip-selection--selectedDisabled {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
-  border-color: var(--primary-lighter);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary-lightest);
+  box-shadow: inset 0 0 0 1px var(--primary-lightest);
+  opacity: 1;
 }
 
 .Chip--input {
@@ -148,8 +162,8 @@
 
 .Chip--input:focus-visible,
 .Chip--input: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);
 }
 
 .Chip--input:active {
@@ -164,7 +178,7 @@
 }
 
 .Chip-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Chip-icon--right:hover {
@@ -184,7 +198,7 @@
 }
 
 .Chip-icon--selected:focus-visible {
-  outline: var(--spacing-05) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Chip-icon--selected:hover {
@@ -203,5 +217,5 @@
 }
 
 .Chip-icon--clear {
-  padding-right: var(--spacing-05);
+  padding-right: 0;
 }

package/css/src/components/collapsible.module.css

@@ -46,8 +46,8 @@
 
 .Collapsible-footer:focus,
 .Collapsible-footer:focus-visible {
-  outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Collapsible-footer:active {

package/css/src/components/dropdown.module.css

@@ -24,6 +24,7 @@
 .Dropdown-input:focus-within {
   border: unset !important;
   box-shadow: none !important;
+  outline: none !important;
 }
 
 .Dropdown-section {

package/css/src/components/horizontalNav.module.css

@@ -7,6 +7,10 @@
   display: flex;
   align-items: center;
   cursor: pointer;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  text-decoration: none;
   height: var(--spacing-80);
   padding-right: var(--spacing-30);
   padding-left: var(--spacing-30);
@@ -25,8 +29,8 @@
 
 .HorizontalNav-menu--default:focus-visible,
 .HorizontalNav-menu--default: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);
 }
 
 .HorizontalNav-menu--default:hover {
@@ -38,29 +42,37 @@
 }
 
 .HorizontalNav-menu--active {
-  background-color: var(--primary-lightest);
+  background-color: var(--primary-ultra-light);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary);
 }
 
 .HorizontalNav-menu--active:focus-visible,
 .HorizontalNav-menu--active:focus {
-  background-color: var(--primary-lightest);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
-  outline: none;
+  background-color: var(--primary-ultra-light);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .HorizontalNav-menu--active:hover {
-  background-color: var(--primary-lighter);
+  background-color: var(--primary-lightest);
 }
 
 .HorizontalNav-menu--active:active {
   background-color: var(--primary-lighter);
   color: var(--primary-darker);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
 .HorizontalNav-menu--active:active .HorizontalNav-menuText {
   color: var(--primary-darker);
 }
 
+.HorizontalNav-menu--active:focus-visible:active,
+.HorizontalNav-menu--active:focus:active {
+  background-color: var(--primary-lighter);
+  box-shadow: 0 0 0 var(--border-width-05) var(--primary-dark);
+}
+
 .HorizontalNav-menuText {
   overflow: hidden;
   text-overflow: ellipsis;

package/css/src/components/input.module.css

@@ -12,8 +12,6 @@
   box-sizing: border-box;
   border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-30);
-  padding-left: var(--spacing-30);
   background: var(--white);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
@@ -23,19 +21,23 @@
   padding-top: var(--spacing-10);
   padding-bottom: var(--spacing-10);
   padding-left: var(--spacing-20);
-  padding-right: var(--spacing-20);
+  padding-right: var(--spacing-10);
 }
 
 .Input--regular {
   height: var(--font-height-l);
-  padding-top: var(--spacing-15);
-  padding-bottom: var(--spacing-15);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
+  padding-right: var(--spacing-15);
+  padding-left: var(--spacing-20);
 }
 
 .Input--large {
   height: 40px;
   padding-top: var(--spacing-20);
   padding-bottom: var(--spacing-20);
+  padding-right: var(--spacing-15);
+  padding-left: var(--spacing-20);
 }
 
 .Input:hover {
@@ -46,8 +48,8 @@
 
 .Input:focus-within {
   background: var(--white);
-  border-color: var(--primary);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .Input:focus-within .Input-icon--left {
@@ -151,11 +153,11 @@
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
 }
 
 .Input-icon--right:focus-visible {
-  outline: var(--spacing-05) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--primary-focus);
   border-radius: var(--border-radius-full);
 }
 

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;
@@ -98,9 +98,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,8 +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 {
@@ -46,8 +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

@@ -89,6 +89,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);
 }
@@ -98,8 +110,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 {
@@ -109,5 +126,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 {