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

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

@@ -91,6 +91,34 @@
   user-select: none;
 }
 
+.Calendar-headerButton {
+  /* Reset button aesthetics */
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  color: inherit;
+  cursor: pointer;
+
+  /* Maintain the existing Flexbox layout structure */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  /* Rounded corners for better focus outline appearance */
+  border-radius: var(--border-radius-10);
+}
+
+.Calendar-headerButton:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 1px;
+}
+
+.Calendar-headerButton:focus:not(:focus-visible) {
+  outline: none;
+}
+
 .Calendar-body {
   display: flex;
   flex-direction: column;
@@ -113,15 +141,17 @@
 }
 
 .Calendar-valueWrapper--inRange {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-valueWrapper--inRange .Calendar-inRangeValue:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inRange .Calendar-inRangeValue:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inRangeError {
@@ -129,7 +159,7 @@
 }
 
 .Calendar-valueWrapper--start {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);
   border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
 }
 
@@ -138,17 +168,17 @@
 }
 
 .Calendar-valueWrapper--end {
-  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);
   border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .Calendar-valueWrapper--hoverDate {
-  background: linear-gradient(90deg, var(--primary-lightest) 10%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 10%, white 50%);
   border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .Calendar-valueWrapper--hoverEndDate {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 10%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 10%);
 }
 
 .Calendar-valueWrapper--endError {
@@ -167,34 +197,52 @@
   cursor: pointer;
   user-select: none;
   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;
+  color: inherit;
+}
+
+.Calendar-value:focus-visible {
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: 1px;
+}
+
+.Calendar-value:focus:not(:focus-visible) {
+  outline: none;
 }
 
 .Calendar-value:hover {
   background: var(--secondary-light);
+  border-color: var(--secondary-dark);
 }
 
 .Calendar-value:active {
   background: var(--secondary);
-}
-
-.Calendar-value:active .Calendar-value--currDate {
-  color: var(--primary-dark);
+  border-color: var(--secondary-dark);
 }
 
 .Calendar-value--start:hover,
 .Calendar-value--end:hover {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  border-color: transparent;
 }
 
 .Calendar-value--startError:hover,
 .Calendar-value--endError:hover {
   background: var(--alert-lightest);
+  border-color: transparent;
 }
 
 .Calendar-value--start,
 .Calendar-value--end {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-value--startError,
@@ -203,32 +251,34 @@
 }
 
 .Calendar-value--currDateMonthYear {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
+  border-color: var(--primary);
 }
 
 .Calendar-value--currDateMonthYear:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: var(--primary);
 }
 
 .Calendar-value--currDateMonthYear:active {
   background: var(--primary-lighter);
-}
-
-.Calendar-value--currDate:active {
-  color: var(--primary-dark);
+  border-color: var(--primary-darker);
 }
 
 .Calendar-value--active {
   background: var(--primary);
   font-weight: var(--font-weight-bold);
+  border-color: transparent;
 }
 
 .Calendar-value--active:hover {
   background: var(--primary-dark);
+  border-color: transparent;
 }
 
 .Calendar-value--active:active {
   background: var(--primary-darker);
+  border-color: transparent;
 }
 
 .Calendar-yearValue--small,
@@ -253,16 +303,33 @@
   width: var(--spacing-80);
 }
 
-.Calendar-valueWrapper--dummy {
-  opacity: var(--opacity-20);
+.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--disabled {
-  opacity: var(--opacity-10);
+.Calendar-valueWrapper--active-dummy .Calendar-value--startError,
+.Calendar-valueWrapper--active-dummy .Calendar-value--endError {
+  background: var(--alert-lightest);
 }
 
-.Calendar-valueWrapper--active-dummy {
-  opacity: var(--opacity-16);
+.Calendar-valueWrapper--active-dummy .Calendar-value--startError:hover,
+.Calendar-valueWrapper--active-dummy .Calendar-value--endError:hover {
+  background: var(--alert-lightest);
+  border-color: transparent;
 }
 
 .Calendar-value--disabled {
@@ -285,6 +352,14 @@
 
 .Calendar-dayValues .Calendar-value {
   padding: 0;
+  cursor: default;
+  border-color: transparent;
+}
+
+.Calendar-dayValues .Calendar-value:hover,
+.Calendar-dayValues .Calendar-value:active {
+  background: transparent;
+  border-color: transparent;
 }
 
 .Calendar-eventsIndicator {
@@ -295,30 +370,34 @@
   background-color: var(--alert);
   border-radius: var(--border-radius-full);
 }
+
 .Calendar-eventsIndicator--small {
   width: 3px;
   height: 3px;
 }
+
 .Calendar-eventsIndicator--active {
   background-color: var(--white);
 }
 
 .Calendar-valueWrapper--inStartRange {
-  background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
+  background: linear-gradient(90deg, white 50%, var(--primary-ultra-light) 50%);
 }
 
 .Calendar-valueWrapper--inEndRange {
-  background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
+  background: linear-gradient(90deg, var(--primary-ultra-light) 50%, white 50%);
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue {
-  background: var(--primary-lightest);
+  background: var(--primary-ultra-light);
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:hover {
-  background: var(--primary-lighter);
+  background: var(--primary-lightest);
+  border-color: transparent;
 }
 
 .Calendar-valueWrapper--inEdgeRange .Calendar-inRangeValue:active {
-  background: var(--primary-light);
+  background: var(--primary-lighter);
+  border-color: transparent;
 }

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

@@ -33,6 +33,7 @@
 .ChatInput:focus,
 .ChatInput:focus-visible {
   outline: none;
+  background: var(--white);
   border: var(--border-width-2-5) solid var(--primary);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }

package/css/src/components/checkbox.module.css

@@ -29,6 +29,8 @@
 .Checkbox-label {
   display: flex;
   cursor: pointer;
+  margin-left: calc(-1 * var(--spacing-20));
+  padding-left: var(--spacing-20);
 }
 
 .Checkbox-label--tiny {
@@ -70,22 +72,23 @@
   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);
 }
 
@@ -94,7 +97,7 @@
 }
 
 .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);
 }
 
@@ -108,7 +111,6 @@
 
 .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;
 }
@@ -137,10 +139,6 @@
   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);
 }
@@ -165,7 +163,6 @@
 .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,

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

@@ -19,7 +19,8 @@
 
 .ChipInput:focus,
 .ChipInput:focus-visible {
-  outline: var(--spacing-2-5) var(--primary);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput:hover {
@@ -28,7 +29,6 @@
 }
 
 .ChipInput:focus-within {
-  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary);
   background: var(--white);
 }
 
@@ -42,8 +42,7 @@
   padding-right: var(--spacing-20);
 }
 
-.ChipInput--error,
-.ChipInput--error:focus-within {
+.ChipInput--error {
   box-shadow: inset 0 0 0 var(--spacing-2-5) var(--alert);
 }
 
@@ -56,11 +55,13 @@
 
 .ChipInput-border:focus-within {
   border-radius: var(--border-radius-10);
-  box-shadow: var(--shadow-spread) var(--primary-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput-border--error:focus-within {
-  box-shadow: var(--shadow-spread) var(--alert-shadow);
+  outline: var(--border-width-05) solid var(--primary-focus);
+  outline-offset: var(--spacing-05);
 }
 
 .ChipInput-input {

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

@@ -21,7 +21,7 @@
 
 .InlineMessage-text--warning,
 .InlineMessage-icon--warning {
-  color: var(--accent1);
+  color: var(--accent1-dark);
 }
 
 .InlineMessage-text--alert {

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);
 }