@innovaccer/design-system 4.6.0 → 4.7.0

package/css/src/components/selectionCard.module.css

@@ -1,27 +1,27 @@
 .Selection-card {
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   position: relative;
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Selection-card--default {
   cursor: pointer;
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
 }
 
 .Selection-card--default:hover {
-  box-shadow: inset 0 0 0 var(--spacing-s) var(--inverse-lightest);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--inverse-lightest);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Selection-card--default:focus,
 .Selection-card--default:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-xs) var(--secondary-dark);
+  box-shadow: var(--shadow-spread) var(--secondary-shadow), inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
 }
 
 .Selection-card--default:active {
-  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -31,31 +31,31 @@
 }
 
 .Selection-card--default-disabled {
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--secondary-lighter);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-lighter);
 }
 
 /* selected states */
 
 .Selection-card--selected {
-  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
 }
 
 .Selection-card--selected:hover {
-  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-dark);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-dark);
 }
 
 .Selection-card--selected:focus,
 .Selection-card--selected:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) var(--primary-shadow), inset 0 0 0 var(--spacing-s) var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow), inset 0 0 0 var(--spacing-05) var(--primary);
 }
 
 .Selection-card--selected:active {
-  box-shadow: inset 0 0 0 var(--spacing-s) var(--primary-darker);
+  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-darker);
 }
 
 .Selection-card--selected-disabled {
-  box-shadow: inset 0 0 0 var(--spacing-xs) var(--primary-lighter);
+  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary-lighter);
 }
 
 /* overlay classes */
@@ -68,7 +68,7 @@
   z-index: 2;
   position: absolute;
   pointer-events: none;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
 }
 
 .Selection-card--default:active .Selection-card-overlay {

package/css/src/components/sidesheet.module.css

@@ -18,7 +18,7 @@
 
 @keyframes shift-right-spacing-3 {
   from {
-    transform: translateX(calc(-1 * var(--spacing-3)));
+    transform: translateX(calc(-1 * var(--spacing-80)));
   }
   to {
     transform: translateX(0);
@@ -27,7 +27,7 @@
 
 @keyframes shift-left-spacing-3 {
   from {
-    transform: translateX(var(--spacing-3));
+    transform: translateX(var(--spacing-80));
   }
   to {
     transform: translateX(0);
@@ -62,17 +62,17 @@
 .Sidesheet-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);
 }
 
 .Sidesheet-header--withSeperator {
-  border-bottom: var(--spacing-xs) solid var(--secondary-light);
+  border-bottom: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .Sidesheet-body {
-  padding: 0 var(--spacing-xl);
+  padding: 0 var(--spacing-60);
 }
 
 .Sidesheet-body--withMargin {
@@ -80,12 +80,12 @@
 }
 
 .Sidesheet-footer {
-  padding-top: var(--spacing-xl);
-  padding-bottom: var(--spacing-xl);
+  padding-top: var(--spacing-60);
+  padding-bottom: var(--spacing-60);
 }
 
 .Sidesheet-footer--withSeperator {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .Sidesheet-footer--stickToBottom {

package/css/src/components/slider.module.css

@@ -13,8 +13,8 @@
 }
 
 .Slider-track {
-  border-radius: var(--spacing-m);
-  height: var(--spacing-2);
+  border-radius: var(--border-radius-10);
+  height: var(--spacing-40);
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -22,9 +22,9 @@
 
 .Slider-progress {
   background: var(--secondary-lighter);
-  height: var(--spacing-s);
+  height: var(--spacing-05);
   box-sizing: border-box;
-  border-radius: var(--spacing-s);
+  border-radius: var(--border-radius-05);
 }
 
 .Slider-progress--inRange {
@@ -36,7 +36,7 @@
 }
 
 .Slider-label {
-  margin-top: var(--spacing-m);
+  margin-top: var(--spacing-10);
   -webkit-transform: translate(-50%, 0px);
   transform: translate(-50%, 0px);
   display: flex;
@@ -49,9 +49,9 @@
 }
 
 .Slider-ticks {
-  width: var(--spacing-s);
-  height: var(--spacing-m);
-  border-radius: var(--spacing-xs);
+  width: var(--spacing-05);
+  height: var(--spacing-10);
+  border-radius: var(--border-radius-2-5);
   background-color: var(--secondary-dark);
 }
 
@@ -72,14 +72,14 @@
 }
 
 .Slider-handle {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
+  height: var(--spacing-40);
+  width: var(--spacing-40);
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   background-color: var(--white);
-  border: var(--spacing-s) solid var(--primary);
+  border: var(--border-width-05) solid var(--primary);
   box-shadow: var(--shadow-s);
   cursor: pointer;
   box-sizing: border-box;

package/css/src/components/spinner.module.css

@@ -27,23 +27,23 @@
 }
 
 .Spinner--xsmall {
-  height: var(--spacing-l);
-  width: var(--spacing-l);
+  height: var(--spacing-30);
+  width: var(--spacing-30);
 }
 
 .Spinner--small {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
+  height: var(--spacing-40);
+  width: var(--spacing-40);
 }
 
 .Spinner--medium {
-  height: var(--spacing-3);
-  width: var(--spacing-3);
+  height: var(--spacing-80);
+  width: var(--spacing-80);
 }
 
 .Spinner--large {
-  height: var(--spacing-4);
-  width: var(--spacing-4);
+  height: var(--spacing-120);
+  width: var(--spacing-120);
 }
 
 .Circle {

package/css/src/components/statusHint.module.css

@@ -6,11 +6,11 @@
 
 .StatusHint-icon {
   flex-shrink: 0;
-  border-radius: 50%;
-  height: var(--spacing);
-  width: var(--spacing);
-  margin-right: var(--spacing);
-  margin-top: var(--spacing-0-75);
+  border-radius: var(--border-radius-full);
+  height: var(--spacing-20);
+  width: var(--spacing-20);
+  margin-right: var(--spacing-20);
+  margin-top: var(--spacing-15);
 }
 
 .StatusHint--alert {

package/css/src/components/stepper.module.css

@@ -5,11 +5,11 @@
 .Step {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
-  margin-left: var(--spacing-xs);
-  margin-right: var(--spacing-xs);
-  border-radius: var(--spacing-2);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
+  margin-left: var(--spacing-2-5);
+  margin-right: var(--spacing-2-5);
+  border-radius: var(--border-radius-40);
   cursor: pointer;
 }
 

package/css/src/components/subheading.module.css

@@ -2,7 +2,7 @@
 .Subheading {
   margin: 0;
   font-weight: var(--font-weight-bolder);
-  font-size: var(--spacing-l);
+  font-size: var(--spacing-30);
   line-height: var(--font-height-m);
   letter-spacing: var(--letter-spacing);
   text-transform: uppercase;

package/css/src/components/switch.module.css

@@ -4,18 +4,18 @@
 }
 
 .Switch--tiny {
-  height: var(--spacing-2);
-  width: var(--spacing-3);
+  height: var(--spacing-40);
+  width: var(--spacing-80);
 }
 
 .Switch--regular {
-  height: var(--spacing-xl);
-  width: var(--spacing-4);
+  height: var(--spacing-60);
+  width: var(--spacing-120);
 }
 
 .Switch--large {
-  height: var(--spacing-xl);
-  width: var(--spacing-4);
+  height: var(--spacing-60);
+  width: var(--spacing-120);
 }
 
 .Switch-input {
@@ -32,13 +32,13 @@
   display: flex;
   align-items: center;
   line-height: 100%;
-  padding: var(--spacing-s);
+  padding: var(--spacing-05);
   top: 0;
   left: 0;
   width: 100%;
   background-color: var(--secondary-light);
   transition: background 120ms ease;
-  padding-right: var(--spacing-0-75);
+  padding-right: var(--spacing-15);
 }
 
 .Switch-input:focus ~ .Switch-wrapper {
@@ -68,15 +68,15 @@
 }
 
 .Switch-wrapper--tiny {
-  border-radius: 10px;
+  border-radius: var(--border-radius-full);
 }
 
 .Switch-wrapper--regular {
-  border-radius: 34px;
+  border-radius: var(--border-radius-full);
 }
 
 .Switch-wrapper--large {
-  border-radius: 34px;
+  border-radius: var(--border-radius-full);
 }
 
 .Switch-wrapper:before {
@@ -85,7 +85,7 @@
   width: 50%;
   background-color: var(--shadow-0);
   box-shadow: var(--shadow-m);
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   box-sizing: border-box;
   transition-duration: 80ms;
 }
@@ -93,7 +93,7 @@
 .Switch-wrapper--checked {
   background-color: var(--primary);
   transition: background 120ms ease;
-  padding-left: var(--spacing-0-75);
+  padding-left: var(--spacing-15);
   padding-right: 2px !important;
 }
 

package/css/src/components/table.module.css

@@ -17,12 +17,12 @@
   display: flex;
   justify-content: center;
   background: var(--white);
-  padding: var(--spacing) 0;
+  padding: var(--spacing-20) 0;
   border-top: var(--border);
 }
 
 .Table-Header--Divider {
-  height: var(--spacing-xl);
+  height: var(--spacing-60);
 }
 
 .Table-Header-Label--hide {

package/css/src/components/tabs.module.css

@@ -23,16 +23,16 @@
   flex-direction: row;
   cursor: pointer;
   min-width: 40px;
-  margin-bottom: calc(-1 * var(--spacing-xs));
+  margin-bottom: calc(-1 * var(--spacing-2-5));
   text-align: center;
 }
 
 .Tab--small {
-  padding: var(--spacing) var(--spacing-l) var(--spacing-l);
+  padding: var(--spacing-20) var(--spacing-30) var(--spacing-30);
 }
 
 .Tab--regular {
-  padding: var(--spacing-l) var(--spacing-l) var(--spacing-2);
+  padding: var(--spacing-30) var(--spacing-30) var(--spacing-40);
 }
 
 .Tab:last-child {
@@ -44,12 +44,12 @@
   left: 0;
   bottom: 0;
   content: '';
-  width: calc(100% - 2 * var(--spacing-l));
-  height: var(--spacing-s);
+  width: calc(100% - 2 * var(--spacing-30));
+  height: var(--spacing-05);
   background-color: transparent;
-  margin-left: var(--spacing-l);
-  border-top-left-radius: var(--spacing-xs);
-  border-top-right-radius: var(--spacing-xs);
+  margin-left: var(--spacing-30);
+  border-top-left-radius: var(--border-radius-2-5);
+  border-top-right-radius: var(--border-radius-2-5);
 }
 
 .Tab:hover::after {
@@ -66,7 +66,7 @@
 
 .Tab:focus {
   outline: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius-10);
   /* Using box shadow instead of border as border shifts the div down which cuts the Icon & Text of label. */
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
@@ -113,7 +113,7 @@
 
 .Tab-pills {
   cursor: pointer;
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
   overflow: visible;
 }
 
@@ -123,14 +123,14 @@
 }
 
 .DismissibleTab-icon--right {
-  padding: var(--spacing-s);
-  margin-left: var(--spacing-s);
+  padding: var(--spacing-05);
+  margin-left: var(--spacing-05);
   outline: none;
-  border-radius: 10px;
+  border-radius: var(--border-radius-full);
 }
 
 .DismissibleTab-icon--default:focus-visible {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }
 
 .DismissibleTab-icon--default:hover {
@@ -142,7 +142,7 @@
 }
 
 .DismissibleTab-icon--selected:focus-visible {
-  outline: var(--spacing-s) solid var(--primary-shadow);
+  outline: var(--spacing-05) solid var(--primary-shadow);
 }
 
 .DismissibleTab-icon--selected:hover {

package/css/src/components/textarea.module.css

@@ -1,7 +1,7 @@
 /* Textarea */
 
 .Textarea {
-  min-height: var(--spacing-3);
+  min-height: var(--spacing-80);
   width: 100%;
   display: block;
   font-family: var(--font-family);
@@ -9,10 +9,10 @@
   line-height: var(--font-height);
   font-size: var(--font-size);
   box-sizing: border-box;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   border: var(--border);
   color: var(--inverse);
-  padding: var(--spacing) var(--spacing-l);
+  padding: var(--spacing-20) var(--spacing-30);
   resize: none;
   cursor: auto; /* this ensures text cursor over text, and pointer cursor over scroll*/
 }
@@ -27,7 +27,7 @@
 
 .Textarea:focus-within {
   outline: none;
-  border: var(--spacing-xs) solid var(--primary);
+  border: var(--border-width-2-5) solid var(--primary);
   box-shadow: var(--shadow-spread) var(--primary-shadow);
 }
 
@@ -44,11 +44,11 @@
 }
 
 .Textarea--error {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
 }
 
 .Textarea--error:focus-within {
-  border: var(--spacing-xs) solid var(--alert);
+  border: var(--border-width-2-5) solid var(--alert);
   box-shadow: var(--shadow-spread) var(--alert-shadow);
 }
 

package/css/src/components/toast.module.css

@@ -6,15 +6,15 @@
   box-sizing: border-box;
   word-break: break-word;
   width: 360px;
-  border-radius: var(--spacing-m);
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-l);
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
+  border-radius: var(--border-radius-10);
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-30);
+  padding-top: var(--spacing-30);
+  padding-bottom: var(--spacing-30);
 }
 
 .Toast--withMessage {
-  padding-bottom: var(--spacing-2);
+  padding-bottom: var(--spacing-40);
 }
 
 .Toast--info {
@@ -42,18 +42,18 @@
 }
 
 .Toast-icon--left {
-  margin-right: var(--spacing-2);
+  margin-right: var(--spacing-40);
 }
 
 .Toast-icon--right {
   cursor: pointer;
-  margin-left: var(--spacing-l);
-  border-radius: 50%;
+  margin-left: var(--spacing-30);
+  border-radius: var(--border-radius-full);
   display: flex;
   align-items: center;
-  padding-right: var(--spacing-m);
-  padding-left: var(--spacing-m);
-  height: var(--spacing-xl);
+  padding-right: var(--spacing-10);
+  padding-left: var(--spacing-10);
+  height: var(--spacing-60);
   box-sizing: initial;
 }
 
@@ -127,7 +127,7 @@
 }
 
 .Toast-text {
-  padding-top: var(--spacing);
+  padding-top: var(--spacing-20);
 }
 
 .Toast-text--warning,
@@ -137,13 +137,13 @@
 
 .Toast-actions {
   display: flex;
-  padding-top: var(--spacing-l);
+  padding-top: var(--spacing-30);
 }
 
 .Toast-actionButton {
   color: var(--text-white);
-  border-radius: var(--spacing-m);
-  margin-right: var(--spacing);
+  border-radius: var(--border-radius-10);
+  margin-right: var(--spacing-20);
 }
 
 .Toast-actionButton:last-child {

package/css/src/components/tooltip.module.css

@@ -1,7 +1,7 @@
 .Tooltip {
-  max-width: var(--spacing-9);
-  padding: var(--spacing-m) var(--spacing);
-  border-radius: var(--spacing-m);
+  max-width: var(--spacing-640);
+  padding: var(--spacing-10) var(--spacing-20);
+  border-radius: var(--border-radius-10);
   z-index: 500;
   background: var(--inverse);
   overflow: hidden;

package/css/src/components/verticalNav.module.css

@@ -9,14 +9,14 @@
 
 .VerticalNav-section {
   text-transform: uppercase;
-  padding-left: var(--spacing-2);
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-0-75);
-  margin-top: var(--spacing);
+  padding-left: var(--spacing-40);
+  padding-top: var(--spacing-30);
+  padding-bottom: var(--spacing-15);
+  margin-top: var(--spacing-20);
 }
 
 .VerticalNav-section--border {
-  border-top: var(--spacing-xs) solid var(--secondary-light);
+  border-top: var(--border-width-2-5) solid var(--secondary-light);
 }
 
 .MenuItem {
@@ -30,16 +30,16 @@
 }
 
 .MenuItem--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);
 }
 
 .MenuItem--vertical {
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-m);
+  margin-top: var(--spacing-10);
+  margin-bottom: var(--spacing-10);
 }
 
 .MenuItem--collapsed {
@@ -48,17 +48,17 @@
   margin-left: 10px;
   margin-right: 10px;
   justify-content: center;
-  border-radius: 50%;
+  border-radius: var(--border-radius-full);
   cursor: pointer;
 }
 
 .MenuItem--expanded {
-  padding-left: var(--spacing-2);
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
-  margin-right: var(--spacing);
+  padding-left: var(--spacing-40);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
+  margin-right: var(--spacing-20);
   justify-content: space-between;
-  border-radius: 0px var(--spacing-2) var(--spacing-2) 0px;
+  border-radius: 0px var(--border-radius-40) var(--border-radius-40) 0px;
 }
 
 .MenuItem--disabled {
@@ -106,7 +106,7 @@
 }
 
 .MenuItem--rounded {
-  border-radius: var(--spacing-2);
+  border-radius: var(--border-radius-40);
 }
 
 .MenuItem--subMenu {
@@ -126,7 +126,7 @@
 }
 
 .MenuItem-count {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 
 .MenuItem-count--disabled {