@innovaccer/design-system 4.6.0 → 4.7.0

package/css/src/components/modal.module.css

@@ -24,7 +24,7 @@
   max-height: calc(100vh - 128px);
   box-shadow: var(--shadow-m);
   background-color: var(--white);
-  border-radius: var(--spacing);
+  border-radius: var(--border-radius-20);
   overflow: auto;
   flex-direction: column;
   display: none;
@@ -51,9 +51,9 @@
 .Modal-header {
   display: flex;
   justify-content: flex-start;
-  padding-top: var(--spacing-2);
-  padding-bottom: var(--spacing-l);
-  padding-right: var(--spacing-2);
+  padding-top: var(--spacing-40);
+  padding-bottom: var(--spacing-30);
+  padding-right: var(--spacing-40);
 }
 
 .Modal-header--withSeperator {
@@ -61,12 +61,12 @@
 }
 
 .Modal-description {
-  padding: var(--spacing) 0;
+  padding: var(--spacing-20) 0;
 }
 
 .Modal-footer {
-  padding-top: var(--spacing-xl);
-  padding-bottom: var(--spacing-xl);
+  padding-top: var(--spacing-60);
+  padding-bottom: var(--spacing-60);
   justify-content: flex-end;
   position: absolute;
   bottom: 0;
@@ -77,7 +77,7 @@
 }
 
 .Modal-body {
-  padding: 0 var(--spacing-xl);
+  padding: 0 var(--spacing-60);
 }
 
 .Modal-body--withMargin {
@@ -85,5 +85,5 @@
 }
 
 .Modal-body--withPadding {
-  padding-bottom: var(--spacing-2);
+  padding-bottom: var(--spacing-40);
 }

package/css/src/components/navigation.module.css

@@ -12,7 +12,7 @@
 .Navigation--vertical {
   flex-direction: column;
   height: 100%;
-  width: var(--spacing-9);
+  width: var(--spacing-640);
 }
 
 .Navigation--collapsed {
@@ -23,7 +23,7 @@
   height: 100%;
   overflow-y: auto;
   overflow-x: hidden;
-  padding-right: var(--spacing);
+  padding-right: var(--spacing-20);
 }
 
 .Navigation-menu {
@@ -34,11 +34,11 @@
 }
 
 .Navigation-menu--horizontal {
-  height: var(--spacing-3);
-  padding-right: var(--spacing-l);
-  padding-left: var(--spacing-l);
-  border-radius: var(--spacing-2);
-  margin: 0 var(--spacing-xs);
+  height: var(--spacing-80);
+  padding-right: var(--spacing-30);
+  padding-left: var(--spacing-30);
+  border-radius: var(--border-radius-40);
+  margin: 0 var(--spacing-2-5);
 }
 
 .Navigation-menu--disabled {
@@ -55,22 +55,22 @@
 }
 
 .Navigation-menu--vertical {
-  /* padding-top: var(--spacing-m); */
-  /* padding-bottom: var(--spacing-m); */
-  padding-left: var(--spacing);
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
-  /* margin-right: var(--spacing); */
-  border-radius: 0px var(--spacing-2) var(--spacing-2) 0px;
+  /* padding-top: var(--spacing-10); */
+  /* padding-bottom: var(--spacing-10); */
+  padding-left: var(--spacing-20);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
+  /* margin-right: var(--spacing-20); */
+  border-radius: 0px var(--border-radius-40) var(--border-radius-40) 0px;
 }
 
 .Navigation-menu--rounded {
-  border-radius: var(--spacing-2);
+  border-radius: var(--border-radius-40);
 }
 
 .Navigation-menu--subMenu {
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
   padding-left: 40px;
   margin-top: 0;
 }
@@ -98,7 +98,7 @@
 }
 
 .Navigation-horizontalPills {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 
 .Navigation-horizontalPills--disabled {
@@ -108,7 +108,7 @@
 .Navigation-footer {
   display: flex;
   align-items: center;
-  padding: var(--spacing-m) var(--spacing);
+  padding: var(--spacing-10) var(--spacing-20);
 }
 
 .Navigation-footer--border {

package/css/src/components/overlay.module.css

@@ -1,10 +1,10 @@
 .OverlayHeader {
   box-sizing: border-box;
-  margin-left: var(--spacing-xl);
+  margin-left: var(--spacing-60);
 }
 
 .OverlayHeader--withBackButton {
-  margin-left: var(--spacing-2);
+  margin-left: var(--spacing-40);
 }
 
 .OverlayHeader-headerWrapper {
@@ -13,11 +13,11 @@
 }
 
 .OverlayHeader-subheading {
-  margin-top: var(--spacing-s);
+  margin-top: var(--spacing-05);
 }
 
 .OverlayHeader-subheading--withBackButton {
-  margin-left: var(--spacing);
+  margin-left: var(--spacing-20);
 }
 
 .OverlayBody {
@@ -33,6 +33,6 @@
   align-items: center;
   width: 100%;
   box-sizing: border-box;
-  padding-left: var(--spacing-xl);
-  padding-right: var(--spacing-xl);
+  padding-left: var(--spacing-60);
+  padding-right: var(--spacing-60);
 }

package/css/src/components/pageHeader.module.css

@@ -3,7 +3,7 @@
 }
 
 .PageHeader-wrapper {
-  padding: var(--spacing) var(--spacing-2) var(--spacing) 0;
+  padding: var(--spacing-20) var(--spacing-40) var(--spacing-20) 0;
 }
 
 .PageHeader-wrapper--withTabs {
@@ -22,11 +22,11 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding-right: var(--spacing);
+  padding-right: var(--spacing-20);
 }
 
 .PageHeader-titleWrapper .Badge {
-  margin-left: var(--spacing-l);
+  margin-left: var(--spacing-30);
   flex-shrink: 0;
 }
 
@@ -37,19 +37,19 @@
 }
 
 .PageHeader-statusWrapper .StatusHint {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
 }
 
 .PageHeader-navigationWrapper {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
 }
 
 .PageHeader .PageHeader-navigationWrapper {
   justify-content: center;
   align-items: center;
   margin-top: 0 !important;
-  padding-right: var(--spacing);
-  padding-left: var(--spacing);
+  padding-right: var(--spacing-20);
+  padding-left: var(--spacing-20);
   display: flex;
 }
 
@@ -62,5 +62,5 @@
 .PageHeader-actionsWrapper {
   display: flex;
   justify-content: flex-end;
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }

package/css/src/components/pagination.module.css

@@ -8,8 +8,8 @@
 }
 
 .Pagination-button {
-  padding-left: var(--spacing);
-  padding-right: var(--spacing);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .Pagination-buttonWrapper {
@@ -21,15 +21,15 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
 }
 
 .Pagination-MetricInput {
-  width: var(--spacing-4);
-  margin-right: var(--spacing);
-  padding-left: var(--spacing);
-  padding-right: var(--spacing);
+  width: var(--spacing-120);
+  margin-right: var(--spacing-20);
+  padding-left: var(--spacing-20);
+  padding-right: var(--spacing-20);
 }
 
 .Pagination-MetricInput .MetricInput-input {
@@ -45,7 +45,7 @@
     flex-basis: 100%;
   }
   .Pagination-buttonWrapper {
-    margin-top: var(--spacing);
+    margin-top: var(--spacing-20);
     width: 50%;
   }
   .Pagination-buttonWrapper--next {

package/css/src/components/pills.module.css

@@ -1,6 +1,6 @@
 .Pills {
   /* 160px */
-  max-width: calc(var(--spacing-2) * 10);
+  max-width: calc(var(--spacing-40) * 10);
   /* truncate */
   white-space: nowrap;
   overflow: hidden;
@@ -8,11 +8,11 @@
   font-size: var(--font-size-s);
   line-height: var(--font-height-s);
   text-transform: uppercase;
-  padding-right: var(--spacing-0-75);
-  padding-left: var(--spacing-0-75);
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
-  border-radius: 20px;
+  padding-right: var(--spacing-15);
+  padding-left: var(--spacing-15);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+  border-radius: var(--border-radius-full);
   display: inline-block;
   box-sizing: border-box;
   font-weight: var(--font-weight-bold);

package/css/src/components/placeholder.module.css

@@ -8,7 +8,7 @@
 }
 
 .Placeholder--animation {
-  border-radius: var(--spacing-s);
+  border-radius: var(--border-radius-05);
   animation-duration: 1.5s;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
@@ -43,7 +43,7 @@
 }
 
 .Placeholder-paragraph--withImage {
-  margin-left: var(--spacing);
+  margin-left: var(--spacing-20);
 }
 
 .PlaceholderParagraph {
@@ -157,5 +157,5 @@
 }
 
 .PlaceholderImage--round {
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
 }

package/css/src/components/popover.module.css

@@ -1,5 +1,5 @@
 .Popover {
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   position: absolute;
   z-index: 500;
   background: var(--white);

package/css/src/components/progressBar.module.css

@@ -1,27 +1,27 @@
 .ProgressBar {
   width: 100%;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   background: var(--secondary-lighter);
 }
 
 .ProgressBar-indicator {
   background-color: var(--primary);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   transition: var(--duration--slow-01) var(--standard-expressive-curve);
   height: 100%;
 }
 
 .ProgressBar-indicator--small {
-  height: var(--spacing-m);
+  height: var(--spacing-10);
 }
 
 .ProgressBar-indicator--regular {
-  height: var(--spacing);
+  height: var(--spacing-20);
 }
 
 .ProgressBar-indicator--indeterminate {
   background-color: var(--primary);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   position: absolute;
   bottom: 0;
   top: 0;

package/css/src/components/progressRing.module.css

@@ -3,18 +3,18 @@
 }
 
 .Ring--small {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
+  height: var(--spacing-40);
+  width: var(--spacing-40);
 }
 
 .Ring--regular {
-  height: var(--spacing-3);
-  width: var(--spacing-3);
+  height: var(--spacing-80);
+  width: var(--spacing-80);
 }
 
 .Ring--large {
-  height: var(--spacing-4);
-  width: var(--spacing-4);
+  height: var(--spacing-120);
+  width: var(--spacing-120);
 }
 
 .Ring Circle {

package/css/src/components/radio.module.css

@@ -6,15 +6,15 @@
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
   width: fit-content;
 }
 
 .Radio-outerWrapper {
   position: relative;
   flex-shrink: 0;
-  margin-top: var(--spacing-s);
+  margin-top: var(--spacing-05);
 }
 
 .Radio-defaultWrapper {
@@ -27,13 +27,13 @@
 }
 
 .Radio-outerWrapper--regular {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
+  height: var(--spacing-40);
+  width: var(--spacing-40);
 }
 
 .Radio-outerWrapper--tiny {
-  height: var(--spacing-l);
-  width: var(--spacing-l);
+  height: var(--spacing-30);
+  width: var(--spacing-30);
 }
 
 .Radio-input {
@@ -47,7 +47,7 @@
 }
 
 .Radio-labelWrapper {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
   display: flex;
   flex-direction: column;
 }
@@ -63,7 +63,7 @@
   height: 100%;
   width: 100%;
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -77,13 +77,13 @@
 }
 
 .Radio:hover .Radio-wrapper {
-  border: var(--spacing-xs) solid var(--secondary-dark);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
   background-color: var(--secondary-lighter);
 }
 
 .Radio:active .Radio-wrapper {
   background-color: var(--secondary-light);
-  border: var(--spacing-xs) solid var(--inverse-lightest);
+  border: var(--border-width-2-5) solid var(--inverse-lightest);
 }
 
 .Radio:hover .Radio-errorWrapper {
@@ -101,13 +101,13 @@
 .Radio:focus-within .Radio-wrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
 }
 
 .Radio:focus-within .Radio-errorWrapper {
   outline: 0;
   box-shadow: var(--shadow-spread) var(--alert-shadow);
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
 }
 
 .Radio:focus-within .Radio-input:checked ~ .Radio-wrapper {
@@ -121,21 +121,21 @@
 }
 
 .Radio--disabled .Radio-wrapper {
-  border: var(--spacing-xs) solid var(--secondary-light);
+  border: var(--border-width-2-5) solid var(--secondary-light);
   background-color: var(--secondary-lightest);
 }
 
 .Radio--disabled .Radio-errorWrapper {
-  border: var(--spacing-xs) solid var(--alert-lighter);
+  border: var(--border-width-2-5) solid var(--alert-lighter);
   background-color: var(--secondary-lightest);
 }
 
 .Radio-input:checked ~ .Radio-wrapper {
-  border: var(--spacing-xs) solid var(--primary);
+  border: var(--border-width-2-5) solid var(--primary);
 }
 
 .Radio-input:checked ~ .Radio-errorWrapper {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
 }
 
 .Radio-input:checked ~ .Radio-wrapper:after {
@@ -146,23 +146,23 @@
 .Radio-wrapper:after {
   content: '';
   display: none;
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   background: var(--primary);
 }
 
 .Radio-wrapper--regular:after {
-  width: var(--spacing);
-  height: var(--spacing);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
 }
 
 .Radio-wrapper--tiny:after {
-  width: var(--spacing-m);
-  height: var(--spacing-m);
-  border: var(--spacing-xs) solid var(--primary);
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  border: var(--border-width-2-5) solid var(--primary);
 }
 
 .Radio:hover .Radio-input:checked ~ .Radio-wrapper {
-  border: var(--spacing-xs) solid var(--primary-dark);
+  border: var(--border-width-2-5) solid var(--primary-dark);
 }
 
 .Radio:hover .Radio-input:checked ~ .Radio-wrapper:after {
@@ -170,22 +170,22 @@
 }
 
 .Radio:hover .Radio-input:checked ~ .Radio-wrapper--tiny:after {
-  border: var(--spacing-xs) solid var(--primary-dark);
+  border: var(--border-width-2-5) solid var(--primary-dark);
 }
 
 .Radio:active .Radio-input:checked ~ .Radio-wrapper {
   background-color: var(--secondary-light);
-  border: var(--spacing-xs) solid var(--primary-darker);
+  border: var(--border-width-2-5) solid var(--primary-darker);
 }
 
 .Radio:hover .Radio-input:checked ~ .Radio-errorWrapper {
   background-color: var(--secondary-lighter);
-  border: var(--spacing-xs) solid var(--alert-dark);
+  border: var(--border-width-2-5) solid var(--alert-dark);
 }
 
 .Radio:active .Radio-input:checked ~ .Radio-errorWrapper {
   background-color: var(--secondary-light);
-  border: var(--spacing-xs) solid var(--alert-darker);
+  border: var(--border-width-2-5) solid var(--alert-darker);
 }
 
 .Radio:active .Radio-input:checked ~ .Radio-wrapper:after {
@@ -193,16 +193,16 @@
 }
 
 .Radio:active .Radio-input:checked ~ .Radio-wrapper--tiny:after {
-  border: var(--spacing-xs) solid var(--primary-darker);
+  border: var(--border-width-2-5) solid var(--primary-darker);
 }
 
 .Radio--disabled .Radio-input:checked ~ .Radio-wrapper {
-  border: var(--spacing-xs) solid var(--primary-lighter);
+  border: var(--border-width-2-5) solid var(--primary-lighter);
   background-color: var(--secondary-lightest);
 }
 
 .Radio--disabled .Radio-input:checked ~ .Radio-errorWrapper {
-  border: var(--spacing-xs) solid var(--alert-lighter);
+  border: var(--border-width-2-5) solid var(--alert-lighter);
   background-color: var(--secondary-lightest);
 }
 

package/css/src/components/select.module.css

@@ -1,7 +1,7 @@
 .Select-input {
   min-width: unset !important;
   background: transparent;
-  border-bottom-left-radius: 0px;
+  border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   height: 36px;
 }
@@ -51,11 +51,11 @@
 }
 
 .Select-inputWrapper {
-  border-bottom: var(--spacing-xs) solid var(--secondary-dark);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-dark);
 }
 
 .Select-inputWrapper:focus-within {
-  border-bottom: var(--spacing-xs) solid var(--primary);
+  border-bottom: var(--border-width-2-5) solid var(--primary);
 }
 
 .Select-trigger-wrapper {
@@ -67,9 +67,9 @@
 }
 
 .Select-trigger--small {
-  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);
 }
 
 .Select-trigger--text,
@@ -86,9 +86,9 @@
 }
 
 .Select-trigger--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);
 }
 
 .Select-trigger--placeholder {
@@ -96,16 +96,16 @@
 }
 
 .Select-trigger--icon {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }
 
 .Select-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);
 }
 
 .Select-crossButton {
@@ -115,13 +115,13 @@
   user-select: none;
   cursor: pointer;
   color: var(--inverse);
-  border-radius: 50%;
-  padding: var(--spacing-s);
+  border-radius: var(--border-radius-full);
+  padding: var(--spacing-05);
 }
 
 .Select-crossButton:focus-visible,
 .Select-crossButton:focus {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }
 
 .Select-crossButton:hover {