@innovaccer/design-system 4.6.0 → 4.7.0

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

@@ -12,8 +12,8 @@
 }
 
 .Calendar--small {
-  padding: var(--spacing-l);
-  padding-bottom: var(--spacing);
+  padding: var(--spacing-30);
+  padding-bottom: var(--spacing-20);
   width: 212px;
 }
 
@@ -30,10 +30,10 @@
 }
 
 .Calendar--large {
-  padding-top: var(--spacing-2);
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
-  padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-40);
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-40);
+  padding-bottom: var(--spacing-30);
   width: 316px;
 }
 
@@ -54,7 +54,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--spacing-l);
+  padding-bottom: var(--spacing-30);
 }
 
 .Calendar-header--small {
@@ -62,7 +62,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  padding-bottom: var(--spacing);
+  padding-bottom: var(--spacing-20);
 }
 
 .Calendar-headerIcon {
@@ -86,8 +86,8 @@
   display: flex;
   white-space: nowrap;
   cursor: pointer;
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
   user-select: none;
 }
 
@@ -101,8 +101,8 @@
 .Calendar-valueRow {
   display: flex;
   justify-content: space-between;
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
 }
 
 .Calendar-valueWrapper {
@@ -130,7 +130,7 @@
 
 .Calendar-valueWrapper--start {
   background: linear-gradient(90deg, white 50%, var(--primary-lightest) 50%);
-  border-radius: var(--spacing-m) 0 0 var(--spacing-m);
+  border-radius: var(--border-radius-10) 0 0 var(--border-radius-10);
 }
 
 .Calendar-valueWrapper--startError {
@@ -139,12 +139,12 @@
 
 .Calendar-valueWrapper--end {
   background: linear-gradient(90deg, var(--primary-lightest) 50%, white 50%);
-  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+  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%);
-  border-radius: 0 var(--spacing-m) var(--spacing-m) 0;
+  border-radius: 0 var(--border-radius-10) var(--border-radius-10) 0;
 }
 
 .Calendar-valueWrapper--hoverEndDate {
@@ -166,7 +166,7 @@
   text-align: center;
   cursor: pointer;
   user-select: none;
-  border-radius: var(--spacing-m);
+  border-radius: var(--spacing-10);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -233,24 +233,24 @@
 
 .Calendar-yearValue--small,
 .Calendar-monthValue--small {
-  height: var(--spacing-xl);
-  width: var(--spacing-4);
+  height: var(--spacing-60);
+  width: var(--spacing-120);
 }
 
 .Calendar-yearValue--large,
 .Calendar-monthValue--large {
-  height: var(--spacing-3);
-  width: var(--spacing-5);
+  height: var(--spacing-80);
+  width: var(--spacing-160);
 }
 
 .Calendar-dateValue--small {
-  height: var(--spacing-xl);
-  width: var(--spacing-xl);
+  height: var(--spacing-60);
+  width: var(--spacing-60);
 }
 
 .Calendar-dateValue--large {
-  height: var(--spacing-3);
-  width: var(--spacing-3);
+  height: var(--spacing-80);
+  width: var(--spacing-80);
 }
 
 .Calendar-valueWrapper--dummy {
@@ -272,8 +272,8 @@
 .Calendar-dayValues {
   display: flex;
   justify-content: center;
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 }
 
 .Calendar-dateValues {
@@ -289,11 +289,11 @@
 
 .Calendar-eventsIndicator {
   position: absolute;
-  bottom: var(--spacing-s);
-  width: var(--spacing-m);
-  height: var(--spacing-m);
+  bottom: var(--spacing-05);
+  width: var(--spacing-10);
+  height: var(--spacing-10);
   background-color: var(--alert);
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
 }
 .Calendar-eventsIndicator--small {
   width: 3px;

package/css/src/components/caption.module.css

@@ -6,13 +6,13 @@
 }
 
 .Caption--withInput {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
 }
 
 .Caption-icon {
   display: flex;
   align-content: center;
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 
 .Caption--hidden {

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

@@ -1,8 +1,8 @@
 /* badge */
 
 .Card {
-  border-radius: var(--spacing-m);
-  border: var(--spacing-xs) solid var(--secondary-light);
+  border-radius: var(--border-radius-10);
+  border: var(--border-width-2-5) solid var(--secondary-light);
   position: relative;
   background-color: var(--white);
 }
@@ -31,12 +31,12 @@
 }
 
 .Card-header {
-  padding: var(--spacing-2) var(--spacing-2) var(--spacing-l) var(--spacing-2);
+  padding: var(--spacing-40) var(--spacing-40) var(--spacing-30) var(--spacing-40);
 }
 
 .Card-body {
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-40);
 }
 
 .Card-footer {
@@ -46,9 +46,9 @@
   position: absolute;
   bottom: 0;
   width: 100%;
-  padding: var(--spacing-2);
+  padding: var(--spacing-40);
 }
 
 .Card-footer--withSeperator {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }

package/css/src/components/cardSubdued.module.css

@@ -1,20 +1,20 @@
 .CardSubdued {
   background: var(--card-subdued-bg);
-  padding: var(--spacing-2);
+  padding: var(--spacing-40);
 }
 
 .CardSubdued--top {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .CardSubdued--left {
-  border-left: var(--spacing-xs) solid var(--secondary-light);
+  border-left: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .CardSubdued--right {
-  border-right: var(--spacing-xs) solid var(--secondary-light);
+  border-right: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .CardSubdued--bottom {
-  border-bottom: var(--spacing-xs) solid var(--secondary-light);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-light);
 }

package/css/src/components/chat.module.css

@@ -1,16 +1,16 @@
 .Box {
   width: 100%;
-  border-radius: var(--spacing);
-  padding: var(--spacing-l);
+  border-radius: var(--border-radius-20);
+  padding: var(--spacing-30);
 }
 
 .Box--typing {
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 }
 
 .Box--incoming {
-  border: var(--spacing-xs) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary-light);
   background-color: var(--white);
 }
 
@@ -19,11 +19,11 @@
 }
 
 .Box-incoming--withStatus {
-  border-bottom-left-radius: 0px;
+  border-bottom-left-radius: 0;
 }
 
 .Box-outgoing--withStatus {
-  border-bottom-right-radius: 0px;
+  border-bottom-right-radius: 0;
 }
 
 .Box--urgent {
@@ -31,6 +31,6 @@
 }
 
 .ChatMessage-status {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   display: block;
 }

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

@@ -1,19 +1,19 @@
 .ChatBubble-box--outgoing {
   background-color: var(--primary-lightest);
-  border-radius: var(--spacing);
-  padding: var(--spacing) var(--spacing-l);
+  border-radius: var(--border-radius-20);
+  padding: var(--spacing-20) var(--spacing-30);
 }
 
 .ChatBubble-separator {
-  width: var(--spacing-m);
-  height: var(--spacing-m);
-  border-radius: 50%;
-  margin: 0 var(--spacing);
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  border-radius: var(--border-radius-full);
+  margin: 0 var(--spacing-20);
   background: var(--inverse-lightest);
 }
 
 .ChatBubble-box--noSuccess {
-  margin-right: calc(var(--spacing-2) + var(--spacing-m));
+  margin-right: calc(var(--spacing-40) + var(--spacing-10));
 }
 
 .ChatBubble-box {
@@ -22,24 +22,24 @@
 
 .ChatBubble-actionBar--outgoing {
   width: max-content;
-  margin-right: var(--spacing-m);
-  margin-top: var(--spacing-0-75);
+  margin-right: var(--spacing-10);
+  margin-top: var(--spacing-15);
 }
 
 .ChatBubble-actionBar--incoming {
   width: max-content;
-  margin-left: var(--spacing-m);
-  margin-top: var(--spacing-0-75);
+  margin-left: var(--spacing-10);
+  margin-top: var(--spacing-15);
 }
 
 .ChatBubble-box--incoming {
   background-color: var(--secondary-lightest);
-  border-radius: var(--spacing);
-  padding: var(--spacing) var(--spacing-l);
+  border-radius: var(--border-radius-20);
+  padding: var(--spacing-20) var(--spacing-30);
 }
 
 .ChatBubble-metaData--incoming {
-  margin-left: calc(var(--spacing-3) + var(--spacing));
+  margin-left: calc(var(--spacing-80) + var(--spacing-20));
 }
 
 .ChatBubble-boxWrapper {

package/css/src/components/chatSeparator.module.css

@@ -1,6 +1,6 @@
 .Chat-UnreadMessage {
-  border-radius: var(--spacing-2);
-  padding: var(--spacing-s) var(--spacing-l) var(--spacing-s) var(--spacing);
+  border-radius: var(--border-radius-40);
+  padding: var(--spacing-05) var(--spacing-30) var(--spacing-05) var(--spacing-20);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -10,14 +10,14 @@
 
 .NewMessage-Divider--left {
   flex: 1;
-  height: var(--spacing-xs);
+  height: var(--spacing-2-5);
   background-color: var(--primary);
-  margin-right: var(--spacing-2);
+  margin-right: var(--spacing-40);
 }
 
 .NewMessage-Divider--right {
   flex: 1;
-  height: var(--spacing-xs);
+  height: var(--spacing-2-5);
   background-color: var(--primary);
-  margin-left: var(--spacing-2);
+  margin-left: var(--spacing-40);
 }

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

@@ -6,8 +6,8 @@
   user-select: none;
   line-height: initial;
   box-sizing: border-box;
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
 }
 
 .Checkbox-input {
@@ -21,7 +21,7 @@
 }
 
 .Checkbox-labelWrapper {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
   display: flex;
   flex-direction: column;
   min-width: 0;
@@ -38,17 +38,17 @@
 
 .Checkbox-outerWrapper {
   position: relative;
-  margin-top: var(--spacing-s);
+  margin-top: var(--spacing-05);
 }
 
 .Checkbox-outerWrapper--regular {
-  height: var(--spacing-2);
-  min-width: var(--spacing-2);
+  height: var(--spacing-40);
+  min-width: var(--spacing-40);
 }
 
 .Checkbox-outerWrapper--tiny {
-  height: var(--spacing-l);
-  min-width: var(--spacing-l);
+  height: var(--spacing-30);
+  min-width: var(--spacing-30);
 }
 
 /* Type: Unchecked  */
@@ -56,7 +56,7 @@
 .Checkbox-wrapper {
   top: 0;
   left: 0;
-  border-radius: var(--spacing-s);
+  border-radius: var(--border-radius-05);
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -71,7 +71,7 @@
 }
 
 .Checkbox-input ~ .Checkbox-wrapper--default {
-  border: var(--spacing-xs) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   background-color: var(--shadow-0);
 }
 
@@ -80,12 +80,12 @@
 }
 
 .Checkbox-input:hover ~ .Checkbox-wrapper--default {
-  border: var(--spacing-xs) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-lightest);
   background-color: var(--shadow-0);
 }
 
 .Checkbox-input:active ~ .Checkbox-wrapper--default {
-  border: var(--spacing-xs) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-lightest);
   background-color: var(--secondary-light);
 }
 
@@ -94,7 +94,7 @@
 }
 
 .Checkbox--disabled .Checkbox-wrapper--default {
-  border: var(--spacing-xs) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary-light);
   background-color: var(--secondary-lightest);
 }
 
@@ -134,7 +134,7 @@
 /* Error State -> Default */
 
 .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
 }
 
 .Checkbox-input:focus ~ .Checkbox-wrapper--error {
@@ -142,16 +142,16 @@
 }
 
 .Checkbox-input:hover ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert-dark);
+  border: var(--border-width-2-5) solid var(--alert-dark);
 }
 
 .Checkbox-input:active ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert-darker);
+  border: var(--border-width-2-5) solid var(--alert-darker);
   background-color: var(--secondary-light);
 }
 
 .Checkbox--disabled .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert-lighter);
+  border: var(--border-width-2-5) solid var(--alert-lighter);
   background-color: var(--secondary-lightest);
 }
 
@@ -159,27 +159,27 @@
 
 .Checkbox-input--checked ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
 }
 
 .Checkbox-input--checked:focus ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:focus ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
 .Checkbox-input--checked:hover ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:hover ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert-dark);
+  border: var(--border-width-2-5) solid var(--alert-dark);
 }
 
 .Checkbox-input--checked:active ~ .Checkbox-wrapper--error,
 .Checkbox-input--indeterminate:active ~ .Checkbox-wrapper--error {
   background-color: var(--primary-darker);
-  border: var(--spacing-xs) solid var(--alert-darker);
+  border: var(--border-width-2-5) solid var(--alert-darker);
 }
 
 .Checkbox--disabled .Checkbox-input--checked ~ .Checkbox-wrapper--error,
 .Checkbox--disabled .Checkbox-input--indeterminate ~ .Checkbox-wrapper--error {
-  border: var(--spacing-xs) solid var(--alert-lighter);
+  border: var(--border-width-2-5) solid var(--alert-lighter);
 }

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

@@ -1,19 +1,19 @@
 .Chip {
   display: flex;
   box-sizing: border-box;
-  border-radius: var(--spacing-l);
-  padding-right: var(--spacing);
-  padding-left: var(--spacing);
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  border-radius: var(--border-radius-30);
+  padding-right: var(--spacing-20);
+  padding-left: var(--spacing-20);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
   width: fit-content;
   justify-content: space-between;
   border-style: solid;
-  border-width: var(--spacing-xs);
+  border-width: var(--border-width-2-5);
   align-items: center;
   flex-direction: row;
   cursor: default;
-  height: var(--spacing-xl);
+  height: var(--spacing-60);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -23,7 +23,7 @@
 }
 
 .Chip-icon--left {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
   display: flex;
   align-items: center;
 }
@@ -31,8 +31,8 @@
 .Chip-icon--right {
   display: flex;
   align-items: center;
-  border-radius: 10px;
-  margin-left: var(--spacing-s);
+  border-radius: var(--border-radius-full);
+  margin-left: var(--spacing-05);
 }
 
 .Chip--action {
@@ -156,7 +156,7 @@
 }
 
 .Chip-icon--right:focus-visible {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }
 
 .Chip-icon--right:hover {
@@ -172,11 +172,11 @@
 }
 
 .Chip-icon--selected {
-  border-radius: 10px;
+  border-radius: var(--border-radius-full);
 }
 
 .Chip-icon--selected:focus-visible {
-  outline: var(--spacing-s) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-shadow);
 }
 
 .Chip-icon--selected:hover {
@@ -195,5 +195,5 @@
 }
 
 .Chip-icon--clear {
-  padding-right: var(--spacing-s);
+  padding-right: var(--spacing-05);
 }

package/css/src/components/chipGroup.module.css

@@ -3,7 +3,7 @@
 }
 
 .ChipGroup-item {
-  margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-10);
 }
 
 .ChipGroup-item:first-child {

package/css/src/components/chipInput.module.css

@@ -1,7 +1,7 @@
 .ChipInput {
   display: flex;
-  border-radius: var(--spacing-m);
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary);
+  border-radius: var(--border-radius-10);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary);
   padding-left: 10px;
   padding-right: 10px;
   background: var(--white);
@@ -11,7 +11,7 @@
 
 .ChipInput:focus,
 .ChipInput:focus-visible {
-  outline: var(--spacing-xs) var(--primary);
+  outline: var(--spacing-2-5) var(--primary);
 }
 
 .ChipInput:hover {
@@ -20,7 +20,7 @@
 }
 
 .ChipInput:focus-within {
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary);
   background: var(--white);
 }
 
@@ -31,12 +31,12 @@
 }
 
 .ChipInput--withChips {
-  padding-right: var(--spacing);
+  padding-right: var(--spacing-20);
 }
 
 .ChipInput--error,
 .ChipInput--error:focus-within {
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--alert);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--alert);
 }
 
 .ChipInput-wrapper {
@@ -47,7 +47,7 @@
 }
 
 .ChipInput-border:focus-within {
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
@@ -63,9 +63,9 @@
   min-width: 15%;
   flex: 0px;
   box-sizing: border-box;
-  height: var(--spacing-xl);
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
+  height: var(--spacing-60);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
   font-family: var(--font-family);
   font-size: var(--font-size);
 }
@@ -79,12 +79,12 @@
 }
 
 .ChipInput-icon {
-  height: var(--spacing-2);
-  padding: var(--spacing-s);
-  margin-left: var(--spacing);
-  margin-top: var(--spacing-0-75);
+  height: var(--spacing-40);
+  padding: var(--spacing-05);
+  margin-left: var(--spacing-20);
+  margin-top: var(--spacing-15);
   cursor: pointer;
-  border-radius: 10px;
+  border-radius: var(--border-radius-full);
 }
 
 .ChipInput-icon:hover {
@@ -97,5 +97,5 @@
 
 .ChipInput-icon:focus,
 .ChipInput-icon:focus-visible {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }