@innovaccer/design-system 4.6.0 → 4.8.0

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

package/css/src/components/choiceList.module.css

@@ -5,11 +5,11 @@
 }
 
 .ChoiceList-checkbox--vertical {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
 }
 
 .ChoiceList-radio--vertical {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
 }
 
 .ChoiceList--alignHorizontal {
@@ -17,9 +17,9 @@
 }
 
 .ChoiceList-checkbox--horizontal {
-  margin-left: var(--spacing-xl);
+  margin-left: var(--spacing-60);
 }
 
 .ChoiceList-radio--horizontal {
-  margin-left: var(--spacing-xl);
+  margin-left: var(--spacing-60);
 }

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

@@ -11,7 +11,7 @@
   display: inline-flex;
   flex-direction: column;
   background-color: var(--secondary-lightest);
-  width: var(--spacing-4);
+  width: var(--spacing-120);
   height: 100%;
   transition: width 240ms;
   transition-timing-function: cubic-bezier(0.4, 0.14, 0.3, 1);
@@ -33,8 +33,8 @@
 }
 
 .Collapsible-footer {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
   box-sizing: border-box;
   cursor: pointer;
   display: flex;
@@ -55,5 +55,5 @@
 }
 
 .Collapsible-footer--seperator {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }

package/css/src/components/dateRangePicker.module.css

@@ -15,11 +15,11 @@
 }
 
 .DateRangePicker-input--startDate {
-  padding-right: var(--spacing-m);
+  padding-right: var(--spacing-10);
 }
 
 .DateRangePicker-input--endDate {
-  padding-left: var(--spacing-m);
+  padding-left: var(--spacing-10);
 }
 
 @media (max-width: 576px) {
@@ -28,6 +28,6 @@
   }
 
   .DateRangePicker-input--endDate {
-    padding-top: var(--spacing);
+    padding-top: var(--spacing-20);
   }
 }

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

@@ -4,16 +4,16 @@
 }
 
 .Dropdown-wrapper {
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
 }
 
 .Dropdown-inputWrapper {
-  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
 .Dropdown-inputWrapper:focus-within {
-  border-bottom: var(--spacing-xs) solid var(--primary);
+  border-bottom: var(--border-width-2-5) solid var(--primary);
 }
 
 .Dropdown-input {
@@ -30,29 +30,29 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-left: var(--spacing-l);
-  margin-top: var(--spacing-l);
-  margin-bottom: var(--spacing-0-75);
+  margin-left: var(--spacing-30);
+  margin-top: var(--spacing-30);
+  margin-bottom: var(--spacing-15);
 }
 
 .Dropdown-section--withClear {
-  margin-top: var(--spacing);
-  margin-bottom: var(--spacing-s);
+  margin-top: var(--spacing-20);
+  margin-bottom: var(--spacing-05);
 }
 
 .Dropdown-buttonWrapper {
   display: flex;
   justify-content: flex-end;
-  padding-top: var(--spacing);
-  padding-right: var(--spacing);
-  padding-bottom: var(--spacing);
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  padding-top: var(--spacing-20);
+  padding-right: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .Dropdown-footer {
-  padding-left: var(--spacing-l);
-  padding-bottom: var(--spacing-m);
-  padding-top: var(--spacing);
+  padding-left: var(--spacing-30);
+  padding-bottom: var(--spacing-10);
+  padding-top: var(--spacing-20);
   box-sizing: border-box;
 }
 
@@ -63,10 +63,10 @@
 
 .Option,
 .Option-loading {
-  padding-top: var(--spacing-0-75);
-  padding-bottom: var(--spacing-0-75);
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing);
+  padding-top: var(--spacing-15);
+  padding-bottom: var(--spacing-15);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-20);
 }
 
 .Option-checkbox .Checkbox-outerWrapper {
@@ -79,9 +79,9 @@
 
 .OptionCheckbox {
   width: 100%;
-  padding-left: var(--spacing-l);
-  padding-top: var(--spacing-0-75);
-  padding-bottom: var(--spacing-0-75);
+  padding-left: var(--spacing-30);
+  padding-top: var(--spacing-15);
+  padding-bottom: var(--spacing-15);
 }
 
 .Option--active,
@@ -140,7 +140,7 @@
 }
 
 .OptionCheckbox .Checkbox-label {
-  padding-right: var(--spacing-l);
+  padding-right: var(--spacing-30);
   width: 100%;
   display: flex;
   overflow: hidden;
@@ -160,7 +160,7 @@
 }
 
 .Option--icon {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }
 
 .Option-icon {

package/css/src/components/dropdownButton.module.css

@@ -24,25 +24,25 @@
 }
 
 .DropdownButton--tiny {
-  height: var(--spacing-xl);
-  padding-right: var(--spacing);
-  padding-left: var(--spacing);
+  height: var(--spacing-60);
+  padding-right: var(--spacing-20);
+  padding-left: var(--spacing-20);
 }
 
 .DropdownButton--regular {
-  height: var(--spacing-3);
-  padding-right: var(--spacing);
-  padding-left: var(--spacing-l);
+  height: var(--spacing-80);
+  padding-right: var(--spacing-20);
+  padding-left: var(--spacing-30);
 }
 
 .DropdownButton--tinySquare {
-  padding-left: var(--spacing-m);
-  padding-right: var(--spacing-m);
+  padding-left: var(--spacing-10);
+  padding-right: var(--spacing-10);
 }
 
 .DropdownButton--regularSquare {
-  padding-left: var(--spacing);
-  padding-right: var(--spacing);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .DropdownButton--placeholder {
@@ -74,9 +74,9 @@
 }
 
 .DropdownButton--icon {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }
 
 .DropdownButton--error {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
 }

package/css/src/components/dropzone.module.css

@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   background-color: var(--white);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   width: 100%;
   background-image: linear-gradient(to right, var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%),
@@ -11,7 +11,7 @@
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
+  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
   transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
   box-sizing: border-box;
 }
@@ -24,7 +24,7 @@
     linear-gradient(var(--primary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
+  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
   transition: background-color var(--duration--moderate-01) var(--standard-productive-curve);
   box-sizing: border-box;
 }
@@ -50,7 +50,7 @@
 
   to {
     opacity: 1;
-    padding-top: var(--spacing-l);
+    padding-top: var(--spacing-30);
   }
 }
 
@@ -62,7 +62,7 @@
 
   to {
     opacity: 1;
-    padding-top: var(--spacing-l);
+    padding-top: var(--spacing-30);
   }
 }
 
@@ -77,24 +77,24 @@
 @keyframes dropzoneStandardDefault {
   from {
     opacity: 0;
-    padding-top: var(--spacing-2);
+    padding-top: var(--spacing-40);
   }
 
   to {
     opacity: 1;
-    padding-top: var(--spacing);
+    padding-top: var(--spacing-20);
   }
 }
 
 @keyframes dropzoneStandardActive {
   from {
     opacity: 0;
-    padding-top: var(--spacing-2);
+    padding-top: var(--spacing-40);
   }
 
   to {
     opacity: 1;
-    padding-top: var(--spacing);
+    padding-top: var(--spacing-20);
   }
 }
 
@@ -106,7 +106,7 @@
     linear-gradient(var(--alert) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
+  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
 }
 
 .Dropzone--disabled {
@@ -116,27 +116,27 @@
     linear-gradient(var(--secondary) 50%, rgba(255, 255, 255, 0) 0%);
   background-position: top, right, bottom, left;
   background-repeat: repeat-x, repeat-y;
-  background-size: var(--spacing-2) var(--spacing-xs), var(--spacing-xs) var(--spacing-2);
+  background-size: var(--spacing-40) var(--spacing-2-5), var(--spacing-2-5) var(--spacing-40);
 }
 
 .Dropzone--standard {
   flex-direction: column;
   height: 196px;
   min-width: 480px;
-  padding: var(--spacing) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
+  padding: var(--spacing-20) var(--spacing-60) var(--spacing-40) var(--spacing-60);
 }
 
 .Dropzone--compressed {
   flex-direction: row;
   height: 124px;
   min-width: 400px;
-  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
+  padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);
 }
 
 .Dropzone--tight {
   height: 124px;
   min-width: 320px;
-  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-2) var(--spacing-xl);
+  padding: var(--spacing-30) var(--spacing-60) var(--spacing-40) var(--spacing-60);
 }
 
 .DropzoneWrapper {
@@ -155,11 +155,11 @@
 }
 
 .Dropzone-icon--standard {
-  margin-bottom: var(--spacing-l);
+  margin-bottom: var(--spacing-30);
 }
 
 .Dropzone-icon--compressed {
-  margin-right: var(--spacing-xl);
+  margin-right: var(--spacing-60);
 }
 
 .Dropzone-icon--disabled {

package/css/src/components/editableChipInput.module.css

@@ -5,19 +5,19 @@
 .EditableChipInput-default {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing-l);
-  border-left: var(--spacing-xs) solid transparent;
-  min-height: var(--spacing-3);
+  padding-left: var(--spacing-30);
+  border-left: var(--border-width-2-5) solid transparent;
+  min-height: var(--spacing-80);
   flex-wrap: wrap;
 }
 
 .EditableChipInput-defaultWithChips {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing);
-  border: var(--spacing-xs) solid transparent;
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
+  padding-left: var(--spacing-20);
+  border: var(--border-width-2-5) solid transparent;
+  padding-top: var(--spacing-2-5);
+  padding-bottom: var(--spacing-2-5);
   max-width: calc(100% - 28px);
   flex-wrap: wrap;
 }
@@ -28,13 +28,13 @@
 }
 
 .EditableChipInput-chipInput {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }
 
 .EditableChipInput-actions {
   position: absolute;
   display: flex;
   justify-content: flex-end;
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   width: 100%;
 }

package/css/src/components/editableDropdown.module.css

@@ -6,6 +6,6 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
-  height: var(--spacing-3);
-  padding-left: var(--spacing-l);
+  height: var(--spacing-80);
+  padding-left: var(--spacing-30);
 }

package/css/src/components/editableInput.module.css

@@ -9,39 +9,39 @@
   position: absolute;
   display: flex;
   justify-content: flex-end;
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   width: 100%;
 }
 
 .EditableInput-actions--regular {
-  top: var(--spacing-3);
+  top: var(--spacing-80);
 }
 
 .EditableInput-actions--tiny {
-  top: var(--spacing-xl);
+  top: var(--spacing-60);
 }
 
 .EditableInput-default {
-  border: var(--spacing-xs) solid transparent;
+  border: var(--border-width-2-5) solid transparent;
   box-sizing: border-box;
   white-space: nowrap;
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
   display: flex;
   align-items: center;
 }
 
 .EditableInput-default--regular {
-  min-width: var(--spacing-9);
-  height: var(--spacing-3);
+  min-width: var(--spacing-640);
+  height: var(--spacing-80);
 }
 
 .EditableInput-default--tiny {
-  min-width: var(--spacing-6);
-  height: var(--spacing-xl);
+  min-width: var(--spacing-240);
+  height: var(--spacing-60);
 }
 
 .EditableInput-Input--tiny {
-  min-width: var(--spacing-6) !important;
+  min-width: var(--spacing-240) !important;
   width: 100%;
 }

package/css/src/components/emptyState.module.css

@@ -30,24 +30,24 @@
 
 .EmptyState-description {
   text-align: center;
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   max-width: 360px;
 }
 
 .EmptyState-title--large {
-  margin-top: var(--spacing-4);
+  margin-top: var(--spacing-120);
 }
 
 .EmptyState-title--small {
-  margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-60);
 }
 
 .EmptyState-description--large {
-  margin-bottom: var(--spacing-xl);
+  margin-bottom: var(--spacing-60);
 }
 
 .EmptyState-description--small {
-  margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-40);
 }
 
 .EmptyState-text {
@@ -62,23 +62,23 @@
 }
 
 .EmptyState-title--compressed {
-  margin-top: var(--spacing-2);
+  margin-top: var(--spacing-40);
 }
 .EmptyState-title--standard {
-  margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-60);
 }
 .EmptyState-title--tight {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-30);
 }
 
 .EmptyState-actions--compressed {
-  margin-top: var(--spacing-2);
+  margin-top: var(--spacing-40);
 }
 
 .EmptyState-actions--standard {
-  margin-top: var(--spacing-xl);
+  margin-top: var(--spacing-60);
 }
 
 .EmptyState-actions--tight {
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-30);
 }

package/css/src/components/fileList.module.css

@@ -1,6 +1,6 @@
 .FileIcon {
-  padding: var(--spacing);
-  border-radius: 50%;
+  padding: var(--spacing-20);
+  border-radius: var(--border-radius-full);
 }
 .FileItem:not(:last-child) {
   border-bottom: var(--border);
@@ -8,10 +8,10 @@
   box-sizing: border-box;
 }
 .FileItem {
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-20);
 }
 .FileItem-fileContent {
   display: flex;
@@ -31,16 +31,16 @@
   justify-content: space-between;
 }
 .FileItem-size {
-  margin-right: var(--spacing);
-  margin-left: var(--spacing);
+  margin-right: var(--spacing-20);
+  margin-left: var(--spacing-20);
   flex-shrink: 0;
 }
 .FileItem-text {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-right: var(--spacing);
-  margin-left: var(--spacing-l);
+  margin-right: var(--spacing-20);
+  margin-left: var(--spacing-30);
 }
 .FileItem-error {
   margin-left: 40px;

package/css/src/components/fileUploader.module.css

@@ -20,11 +20,11 @@
 }
 
 .FileUploaderItem {
-  width: var(--spacing-9);
+  width: var(--spacing-640);
 }
 
 .FileUploaderItem-text {
-  width: var(--spacing-8);
+  width: var(--spacing-440);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -34,6 +34,6 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
 }