@innovaccer/design-system 4.22.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

@@ -7,30 +7,16 @@
   cursor: pointer;
   width: fit-content;
   border: 0;
-  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%
-  );
+  position: relative;
+  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,
@@ -59,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 {
@@ -78,10 +59,11 @@
 
 .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 {
+  position: absolute;
+  top: calc(-1 * var(--spacing-05));
+  right: calc(-1 * var(--spacing-05));
 }

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,11 +24,11 @@
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Button:disabled {
+.Button--disabled {
   cursor: not-allowed;
 }
 
-.Button:focus {
+.Button:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
 }
@@ -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);
@@ -194,11 +199,11 @@
   background: var(--secondary-dark);
 }
 
-.Button--transparent:focus:active {
+.Button--transparent:focus-visible:active {
   background: var(--secondary-dark);
 }
 
-.Button--transparent:disabled {
+.Button--transparent-disabled {
   background: transparent;
   color: var(--inverse-lightest);
 }
@@ -225,21 +230,21 @@
   box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
-.Button--selected:focus {
+.Button--selected:focus-visible {
   background: var(--primary-ultra-light);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.Button--selected:focus:active {
+.Button--selected:focus-visible:active {
   background: var(--primary-lighter);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   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 {
@@ -273,13 +335,13 @@
   box-shadow: inset 0 0 0 1px var(--inverse-lightest);
 }
 
-.Button-outlined--basic:focus {
+.Button-outlined--basic:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   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);
@@ -302,14 +364,14 @@
   box-shadow: inset 0 0 0 2px var(--primary-dark);
 }
 
-.Button-outlined--selected:focus {
+.Button-outlined--selected:focus-visible {
   color: var(--primary-dark);
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   box-shadow: inset 0 0 0 var(--border-width-05) var(--primary);
 }
 
-.Button-outlined--selected:focus:active {
+.Button-outlined--selected:focus-visible:active {
   background: var(--primary-lighter);
   color: var(--primary-darker);
   outline: var(--border-width-05) solid var(--primary-focus);
@@ -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);
@@ -341,18 +403,22 @@
   color: var(--primary-dark);
 }
 
-.Button-outlined--primary:focus {
+.Button-outlined--primary:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   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);
@@ -371,14 +437,117 @@
   color: var(--alert-dark);
 }
 
-.Button-outlined--alert:focus {
+.Button-outlined--alert:focus-visible {
   outline: var(--border-width-05) solid var(--primary-focus);
   outline-offset: var(--spacing-05);
   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

@@ -140,6 +140,13 @@
   position: relative;
 }
 
+.Calendar-monthValueWrapper,
+.Calendar-yearValueWrapper {
+  display: inline-flex;
+  justify-content: center;
+  position: relative;
+}
+
 .Calendar-valueWrapper--inRange {
   background: var(--primary-ultra-light);
 }
@@ -196,13 +203,13 @@
   text-align: center;
   cursor: pointer;
   user-select: none;
+  box-sizing: border-box;
   border-radius: var(--spacing-10);
   border: var(--border-width-2-5) solid transparent;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 
   /* Button reset (used on <button> for a11y) */
   background: transparent;
-  border: none;
   padding: 0;
   margin: 0;
   font-family: inherit;
@@ -303,25 +310,6 @@
   width: var(--spacing-80);
 }
 
-
-.Calendar-valueWrapper--active-dummy .Calendar-value {
-  border: none;
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active {
-  background: var(--primary-lighter);
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active:hover {
-  background: var(--primary-light);
-  color: var(--inverse);
-}
-
-.Calendar-valueWrapper--active-dummy .Calendar-value--active:active {
-  background: var(--primary-dark);
-  color: var(--white);
-}
-
 .Calendar-valueWrapper--active-dummy .Calendar-value--startError,
 .Calendar-valueWrapper--active-dummy .Calendar-value--endError {
   background: var(--alert-lightest);
@@ -333,6 +321,10 @@
   border-color: transparent;
 }
 
+.Calendar-valueWrapper--disabled {
+  opacity: var(--opacity-10);
+}
+
 .Calendar-value--disabled {
   pointer-events: none;
 }
@@ -400,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;
+  }
+}