@innovaccer/design-system 4.23.0 → 4.24.0

package/css/src/ai-components/button.module.css

@@ -10,41 +10,21 @@
   display: flex;
   align-items: center;
   color: var(--inverse);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:hover {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 28%,
-    rgba(240, 125, 0, 0.2) 100%
-  );
+  background: linear-gradient(116deg, #fbe1c9 14.17%, #f8c5c6 50.06%, #f9cbdc 85.01%);
 }
 
 .AIButton:active {
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 28%,
-    rgba(240, 125, 0, 0.31) 100%
-  );
+  background: linear-gradient(106deg, #fad1ae 20.06%, #f5aea9 44.48%, #f4a0ad 67.83%, #f6b3ce 86.55%);
 }
 
 .AIButton:disabled {
   cursor: not-allowed;
   opacity: var(--opacity-10);
-  background: linear-gradient(
-    277deg,
-    rgba(227, 28, 121, 0.15) 0%,
-    rgba(231, 56, 79, 0.24) 28%,
-    rgba(240, 125, 0, 0.15) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIButton:focus {

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

@@ -8,30 +8,15 @@
   width: fit-content;
   border: 0;
   position: relative;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip:hover {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.32) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(108deg, #fad3b0 15.89%, #f9cdb7 33.52%, #f8c6bf 54.17%, #f7bfc7 70.92%);
 }
 
 .AIChip:active {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.48) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(106deg, #f7bd89 20.06%, #f6b196 44.48%, #f4a4a5 67.83%, #f39faa 86.55%);
 }
 
 .AIChip:focus,
@@ -60,12 +45,7 @@
 /* Disabled Chip */
 
 .AIChip--disabled {
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip-icon--disabled {
@@ -79,12 +59,7 @@
 
 .AIChip:disabled {
   cursor: not-allowed;
-  background: linear-gradient(
-    274deg,
-    rgba(231, 56, 79, 0.24) 0%,
-    rgba(231, 56, 79, 0.24) 19.79%,
-    rgba(240, 125, 0, 0.24) 100%
-  );
+  background: linear-gradient(109deg, #fdead8 10.28%, #fbdfd5 32.82%, #f9d1d5 63.38%, #fad9e7 96.05%);
 }
 
 .AIChip-AIIcon {

package/css/src/ai-components/iconButton.module.css

@@ -20,22 +20,12 @@
 }
 
 .AIIconButton:hover {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.2) 0%,
-    rgba(231, 56, 79, 0.32) 19.79%,
-    rgba(240, 125, 0, 0.32) 100%
-  );
+  background: linear-gradient(143deg, #fad1b2 10.84%, #f8c4c1 51.71%, #f8c8d7 91.5%);
   color: var(--secondary) !important;
 }
 
 .AIIconButton:active {
-  background: linear-gradient(
-    315deg,
-    rgba(227, 28, 121, 0.31) 0%,
-    rgba(231, 56, 79, 0.48) 19.79%,
-    rgba(240, 125, 0, 0.48) 100%
-  );
+  background: linear-gradient(144deg, #f7ba8c 14.82%, #f6af98 40.53%, #f5a8a0 55.69%, #f5adc5 79.29%);
   color: var(--secondary-dark) !important;
 }
 

package/css/src/components/avatarGroup.module.css

@@ -87,3 +87,10 @@
   cursor: not-allowed;
   pointer-events: auto !important;
 }
+
+@media (forced-colors: active) {
+  .AvatarGroup-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}

package/css/src/components/avatarSelection.module.css

@@ -193,3 +193,25 @@
 .SelectionAvatarCount--selected:focus-visible {
   box-shadow: 0 0 0 var(--spacing-2-5) white, 0 0 0 3px var(--primary-dark), 0 0 0 3px var(--primary-shadow) !important;
 }
+
+@media (forced-colors: active) {
+  .SelectionAvatarGroup-item--selected:focus,
+  .SelectionAvatarGroup-item--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  .SelectionAvatarCount--selected:focus,
+  .SelectionAvatarCount--selected:focus-visible {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-2-5);
+    box-shadow: none !important;
+  }
+
+  /* The inner search input uses outline:none !important — restore it in forced-colors mode */
+  .SelectionAvatar-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}

package/css/src/components/badge.module.css

@@ -47,7 +47,7 @@
 }
 
 .Badge--accent1 {
-  background: var(--accent1-dark);
+  background: var(--accent1);
   color: var(--white);
 }
 
@@ -63,7 +63,7 @@
 
 .Badge--accent4 {
   background: var(--accent4);
-  color: var(--accent4-darker);
+  color: var(--white);
 }
 
 .Badge--subtle-primary {
@@ -88,7 +88,7 @@
 
 .Badge--subtle-warning {
   color: var(--warning-darker);
-  background: var(--warning-lightest);
+  background: var(--warning-300);
 }
 
 .Badge--subtle-accent1 {

package/css/src/components/button.module.css

@@ -24,7 +24,7 @@
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Button:disabled {
+.Button--disabled {
   cursor: not-allowed;
 }
 
@@ -108,13 +108,6 @@
   margin-left: var(--spacing-15);
 }
 
-.Button--tiny .Button-icon--left {
-  margin-right: var(--spacing-10);
-}
-.Button--tiny .Button-icon--right {
-  margin-left: var(--spacing-10);
-}
-
 .Button--basic {
   background: var(--secondary-light);
   color: var(--inverse);
@@ -128,7 +121,7 @@
   background: var(--secondary-dark);
 }
 
-.Button--basic:disabled {
+.Button--basic-disabled {
   background: var(--secondary-lighter);
   color: var(--inverse-lightest);
 }
@@ -145,10 +138,14 @@
   background: var(--primary-darker);
 }
 
-.Button--primary:disabled {
+.Button--primary-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--primary {
+  color: var(--text-link);
+}
+
 .Button--success {
   background: var(--primary);
 }
@@ -161,10 +158,14 @@
   background: var(--primary-darker);
 }
 
-.Button--success:disabled {
+.Button--success-disabled {
   background: var(--primary-lighter);
 }
 
+.Button-infoIcon--success {
+  color: var(--text-link);
+}
+
 .Button--alert {
   background: var(--alert);
 }
@@ -177,10 +178,14 @@
   background: var(--alert-darker);
 }
 
-.Button--alert:disabled {
+.Button--alert-disabled {
   background: var(--alert-lighter);
 }
 
+.Button-infoIcon--alert {
+  color: var(--alert);
+}
+
 .Button--transparent {
   background: transparent;
   color: var(--inverse);
@@ -198,7 +203,7 @@
   background: var(--secondary-dark);
 }
 
-.Button--transparent:disabled {
+.Button--transparent-disabled {
   background: transparent;
   color: var(--inverse-lightest);
 }
@@ -239,7 +244,7 @@
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button--selected:disabled {
+.Button--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -255,6 +260,63 @@
   text-overflow: ellipsis;
 }
 
+.Button-infoIconWrapper {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  width: var(--spacing-30);
+  height: var(--spacing-30);
+  box-sizing: border-box;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: var(--border-width-2-5) solid var(--secondary-lightest);
+  pointer-events: none;
+}
+
+.Button-infoIconWrapper--transparent {
+  border: none;
+  background: transparent;
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper--iconOnly-transparent {
+  top: var(--spacing-2-5);
+  right: var(--spacing-2-5);
+}
+
+.Button-infoIconWrapper-outlined--basic {
+  background: var(--secondary-lightest);
+}
+
+.Button-infoIconWrapper-outlined--primary {
+  background: var(--primary-ultra-light);
+}
+
+.Button-infoIconWrapper-outlined--alert {
+  background: var(--alert-ultra-light);
+}
+
+.Button-infoIconWrapper--basic {
+  background: var(--secondary-lighter);
+}
+
+.Button-infoIconWrapper--primary,
+.Button-infoIconWrapper--success {
+  background: var(--primary-lightest);
+}
+
+.Button-infoIconWrapper--alert {
+  background: var(--alert-lightest);
+}
+
+.Button-infoIcon {
+  color: var(--text-subtle);
+}
+
 /* outlined button styles */
 
 .Button-outlined--basic {
@@ -279,7 +341,7 @@
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--secondary);
 }
 
-.Button-outlined--basic:disabled {
+.Button-outlined--basic-disabled {
   color: var(--inverse-lightest);
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--secondary);
@@ -317,7 +379,7 @@
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary-dark);
 }
 
-.Button-outlined--selected:disabled {
+.Button-outlined--selected-disabled {
   background: var(--primary-ultra-light);
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 2px var(--primary-lightest);
@@ -347,12 +409,16 @@
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--primary);
 }
 
-.Button-outlined--primary:disabled {
+.Button-outlined--primary-disabled {
   background: transparent;
   color: var(--primary-lighter);
   box-shadow: inset 0 0 0 1px var(--primary-lighter);
 }
 
+.Button-infoIcon-outlined--primary {
+  color: var(--text-link);
+}
+
 .Button-outlined--alert {
   background: transparent;
   box-shadow: inset 0 0 0 1px var(--alert);
@@ -377,8 +443,111 @@
   box-shadow: inset 0 0 0 var(--border-width-2-5) var(--alert);
 }
 
-.Button-outlined--alert:disabled {
+.Button-outlined--alert-disabled {
   background: transparent;
   color: var(--alert-lighter);
   box-shadow: inset 0 0 0 1px var(--alert-lighter);
 }
+
+.Button-infoIcon-outlined--alert {
+  color: var(--alert);
+}
+
+.Button-srOnly {
+  position: absolute;
+  width: var(--spacing-2-5);
+  height: var(--spacing-2-5);
+  padding: 0;
+  margin: calc(-1 * var(--spacing-2-5));
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (forced-colors: active) {
+  .Button--basic,
+  .Button--primary,
+  .Button--success,
+  .Button--alert,
+  .Button--transparent {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  .Button--basic-disabled,
+  .Button--primary-disabled,
+  .Button--success-disabled,
+  .Button--alert-disabled,
+  .Button--transparent-disabled {
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  /* Selected state: inset box-shadow acts as the visible border */
+  .Button--selected,
+  .Button--selected:hover,
+  .Button--selected:active,
+  .Button--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button--selected:focus-visible,
+  .Button--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  /* Outlined variants: inset box-shadow is the only visible border */
+  .Button-outlined--basic,
+  .Button-outlined--basic:hover,
+  .Button-outlined--basic:active,
+  .Button-outlined--basic-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--basic:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected,
+  .Button-outlined--selected:hover,
+  .Button-outlined--selected:active,
+  .Button-outlined--selected-disabled {
+    border: var(--border-width-05) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--selected:focus-visible,
+  .Button-outlined--selected:focus-visible:active {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary,
+  .Button-outlined--primary:hover,
+  .Button-outlined--primary:active,
+  .Button-outlined--primary-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--primary:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert,
+  .Button-outlined--alert:hover,
+  .Button-outlined--alert:active,
+  .Button-outlined--alert-disabled {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+
+  .Button-outlined--alert:focus-visible {
+    outline: var(--border-width-05) solid Highlight;
+    box-shadow: none;
+  }
+}

package/css/src/components/calendar.module.css

@@ -392,3 +392,52 @@
   background: var(--primary-lighter);
   border-color: transparent;
 }
+
+@media (forced-colors: active) {
+  .Calendar-valueWrapper--start,
+  .Calendar-valueWrapper--end,
+  .Calendar-valueWrapper--hoverDate,
+  .Calendar-valueWrapper--hoverEndDate,
+  .Calendar-valueWrapper--inStartRange,
+  .Calendar-valueWrapper--inEndRange,
+  .Calendar-valueWrapper--inRange,
+  .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
+    background: Highlight;
+  }
+
+  .Calendar-valueWrapper--startError,
+  .Calendar-valueWrapper--endError,
+  .Calendar-valueWrapper--inRangeError {
+    background: Mark;
+  }
+
+  /* Active/selected date cell */
+  .Calendar-value--active,
+  .Calendar-value--active:hover,
+  .Calendar-value--active:active {
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    border-color: transparent;
+  }
+
+  /* Today's date marker ring */
+  .Calendar-value--currDateMonthYear {
+    border-color: ButtonText;
+  }
+
+  /* Event dot: use system color so it stays visible */
+  .Calendar-eventsIndicator {
+    background-color: ButtonText;
+  }
+
+  .Calendar-eventsIndicator--active {
+    background-color: HighlightText;
+  }
+
+  /* Disabled dates use opacity — switch to GrayText */
+  .Calendar-valueWrapper--disabled {
+    opacity: 1;
+    color: GrayText;
+  }
+}

package/css/src/components/card.module.css

@@ -52,3 +52,17 @@
 .Card-footer--withSeperator {
   border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
+
+@media (forced-colors: active) {
+  /* box-shadow is stripped in forced-colors; add a real border so the card boundary is visible */
+  .Card--default,
+  .Card--light,
+  .Card--medium,
+  .Card--dark,
+  .Card--shadow10,
+  .Card--shadow20,
+  .Card--shadow30 {
+    border: var(--border-width-2-5) solid ButtonText;
+    box-shadow: none;
+  }
+}

package/css/src/components/chatBubble.module.css

@@ -9,7 +9,7 @@
   height: var(--spacing-10);
   border-radius: var(--border-radius-full);
   margin: 0 var(--spacing-20);
-  background: var(--inverse-lightest);
+  background: var(--inverse-lighter);
 }
 
 .ChatBubble-box--noSuccess {
@@ -51,3 +51,8 @@
 .ChatBubble-actionBarWrapper {
   flex: 0 0 auto;
 }
+
+.ChatBubble-actionBarWrapper--hidden {
+  width: 0;
+  overflow: hidden;
+}

package/css/src/components/chatInput.module.css

@@ -2,13 +2,15 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  border: var(--border-width-2-5) solid var(--secondary);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   padding: var(--spacing-20);
   border-radius: var(--border-radius-10);
   background: var(--white);
   max-width: 100%;
   min-width: var(--spacing-640);
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: background-color var(--duration--slow-01) var(--standard-productive-curve),
+    border-color var(--duration--slow-01) var(--standard-productive-curve),
+    outline var(--duration--slow-01) var(--standard-productive-curve);
   max-height: var(--spacing-440);
   position: relative;
   box-sizing: border-box;
@@ -70,7 +72,8 @@
 .ChatInput-actions {
   display: flex;
   flex-shrink: 0;
-  transition: all var(--duration--slow-01) var(--standard-productive-curve);
+  transition: margin var(--duration--slow-01) var(--standard-productive-curve),
+    width var(--duration--slow-01) var(--standard-productive-curve);
   margin-left: var(--spacing-20);
   align-items: center;
 }
@@ -81,3 +84,11 @@
   margin-top: var(--spacing-20);
   margin-left: 0;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .ChatInput,
+  .ChatInput-actions,
+  .ChatInput-textarea {
+    transition: none;
+  }
+}

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

@@ -220,3 +220,37 @@
 .Chip-icon--clear {
   padding-right: 0;
 }
+
+@media (forced-colors: active) {
+  /* Action chips: border:0 makes them invisible — add a real border */
+  .Chip--action {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Input chips: border:0 makes them invisible — add a real border */
+  .Chip--input {
+    border: var(--border-width-2-5) solid ButtonText;
+  }
+
+  /* Selected state uses inset box-shadow as a double border on top of the existing border-color */
+  .Chip-selection--selected,
+  .Chip-selection--selected:hover,
+  .Chip-selection--selected:active,
+  .Chip-selection--selectedDisabled {
+    border-color: Highlight;
+    box-shadow: none;
+  }
+
+  .Chip-action--disabled,
+  .Chip-input--disabled {
+    opacity: 1;
+    color: GrayText;
+    border: var(--border-width-2-5) solid GrayText;
+  }
+
+  .Chip-selection--disabled {
+    opacity: 1;
+    color: GrayText;
+    border-color: GrayText;
+  }
+}

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

@@ -201,3 +201,10 @@
   height: fit-content;
   line-height: var(--font-height);
 }
+
+@media (forced-colors: active) {
+  .Dropdown-input:focus-within {
+    outline: var(--border-width-05) solid Highlight !important;
+    outline-offset: var(--spacing-05);
+  }
+}