@innovaccer/design-system 4.6.0 → 4.7.0

package/css/src/components/grid.module.css

@@ -38,7 +38,7 @@
   z-index: 5;
   overflow-x: hidden;
   -ms-overflow-style: none;
-  border-right: 3px solid var(--secondary);
+  border-right: var(--border-width-7-5) solid var(--secondary);
 }
 
 .Grid-pinned::-webkit-scrollbar {
@@ -54,8 +54,8 @@
 }
 
 .Grid--comfortable .Grid-cell--body {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-30);
+  padding-bottom: var(--spacing-30);
 }
 
 .Grid--standard .Grid-cell--head {
@@ -63,8 +63,8 @@
 }
 
 .Grid--standard .Grid-cell--body {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-30);
+  padding-bottom: var(--spacing-30);
 }
 
 .Grid--compressed .Grid-cell--head {
@@ -72,17 +72,17 @@
 }
 
 .Grid--compressed .Grid-cell--body {
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 }
 
 .Grid--tight .Grid-cell--head {
-  min-height: var(--spacing-3);
+  min-height: var(--spacing-80);
 }
 
 .Grid--tight .Grid-cell--body {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
 }
 
 .Grid-head {
@@ -181,7 +181,7 @@
 }
 
 .Grid-nestedRowTrigger {
-  margin-right: var(--spacing-l);
+  margin-right: var(--spacing-30);
   cursor: pointer;
 }
 
@@ -190,28 +190,28 @@
 }
 
 .Grid-nestedRow .Grid-cell:first-child {
-  padding-left: calc(var(--spacing-3) + var(--spacing));
+  padding-left: calc(var(--spacing-80) + var(--spacing-20));
 }
 
 .Grid-nestedRowPlaceholder {
-  width: var(--spacing-xl);
-  margin-right: var(--spacing-l);
+  width: var(--spacing-60);
+  margin-right: var(--spacing-30);
 }
 
 .Grid-cell {
   position: relative;
   box-sizing: border-box;
-  padding-left: var(--spacing-l);
-  padding-right: var(--spacing-l);
+  padding-left: var(--spacing-30);
+  padding-right: var(--spacing-30);
 }
 
 .Grid-cell--body {
-  padding-right: var(--spacing-l);
+  padding-right: var(--spacing-30);
 }
 
 .Grid-cell--head {
   overflow: hidden;
-  padding-right: var(--spacing-m);
+  padding-right: var(--spacing-10);
 }
 
 .Grid-cell--dragged {
@@ -231,7 +231,7 @@
 }
 
 .Grid-cell--nestedRow {
-  padding-left: var(--spacing);
+  padding-left: var(--spacing-20);
 }
 
 .Grid-cell--head.Grid-cell:first-of-type {
@@ -264,7 +264,7 @@
 .Grid-sortingIcons {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing-m);
+  padding-left: var(--spacing-10);
 }
 
 .Grid-cellReorder {
@@ -293,7 +293,7 @@
 .Grid-cellResize {
   position: absolute;
   right: 0;
-  width: var(--spacing-m);
+  width: var(--spacing-10);
   cursor: ew-resize;
   height: 100%;
 }
@@ -315,7 +315,7 @@
 .Grid-reorderHighlighter {
   position: absolute;
   height: 100%;
-  border: 3px solid var(--primary-light);
+  border: var(--border-width-7-5) solid var(--primary-light);
   z-index: 10;
 }
 
@@ -333,8 +333,8 @@
 .Grid-cellGroup--pinned-left {
   left: 0;
   border-style: inset;
-  border-right: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-right-width: 4px;
+  border-right: var(--spacing-2-5) solid rgba(213, 213, 213, var(--opacity-3));
+  border-right-width: var(--border-width-10);
   border-image: linear-gradient(
       to right,
       var(--secondary-light),
@@ -348,8 +348,8 @@
 .Grid-cellGroup--pinned-right {
   right: 0;
   border-style: inset;
-  border-left: var(--spacing-xs) solid rgba(213, 213, 213, var(--opacity-3));
-  border-left-width: 4px;
+  border-left: var(--border-width-2-5) solid rgba(213, 213, 213, var(--opacity-3));
+  border-left-width: var(--border-width-10);
   border-image: linear-gradient(
       to left,
       var(--secondary-light),
@@ -433,11 +433,11 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: var(--spacing-m);
-  height: var(--spacing-m);
-  border-radius: 50%;
+  width: var(--spacing-10);
+  height: var(--spacing-10);
+  border-radius: var(--border-radius-full);
   background: var(--secondary);
-  margin: 0 var(--spacing);
+  margin: 0 var(--spacing-20);
 }
 
 .GridCell-metaList .Text:first-child::before {
@@ -454,7 +454,7 @@
 
 .Header {
   background: var(--white);
-  padding: var(--spacing-l);
+  padding: var(--spacing-30);
   border-bottom: var(--border);
 }
 
@@ -468,8 +468,8 @@
 }
 
 .Header-search {
-  width: var(--spacing-9);
-  margin-bottom: var(--spacing-2);
+  width: var(--spacing-640);
+  margin-bottom: var(--spacing-40);
 }
 
 .Header-label {
@@ -479,17 +479,17 @@
 }
 
 .Header-label .Checkbox {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
 }
 
 .Header-dropdown {
   display: flex;
-  margin-left: var(--spacing-m);
-  margin-bottom: var(--spacing-2);
+  margin-left: var(--spacing-10);
+  margin-bottom: var(--spacing-40);
 }
 
 .Header-dropdown .Dropdown {
-  margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-10);
 }
 
 .Header-draggableDropdown .Dropdown-wrapper {
@@ -506,11 +506,11 @@
 }
 
 .Header-actions {
-  margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-40);
 }
 
 .Header-global-actions {
   justify-content: flex-end;
   margin-left: auto;
-  margin-bottom: var(--spacing-2);
+  margin-bottom: var(--spacing-40);
 }

package/css/src/components/horizontalNav.module.css

@@ -7,11 +7,11 @@
   display: flex;
   align-items: center;
   cursor: pointer;
-  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);
 }
 
 .HorizontalNav-menu--disabled {
@@ -77,7 +77,7 @@
 }
 
 .HorizontalNav-pills {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 
 .HorizontalNav-pills--disabled {

package/css/src/components/inlineMessage.module.css

@@ -2,21 +2,21 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   background-color: var(--white);
   align-items: flex-start;
 }
 
 .InlineMessage-icon--regular {
-  padding-top: var(--spacing-s);
-  padding-bottom: var(--spacing-s);
-  margin-right: var(--spacing);
+  padding-top: var(--spacing-05);
+  padding-bottom: var(--spacing-05);
+  margin-right: var(--spacing-20);
 }
 
 .InlineMessage-icon--small {
-  padding-top: var(--spacing-xs);
-  padding-bottom: var(--spacing-xs);
-  margin-right: var(--spacing-m);
+  padding-top: var(--spacing-2-5);
+  padding-bottom: var(--spacing-2-5);
+  margin-right: var(--spacing-10);
 }
 
 .InlineMessage-text--warning,

package/css/src/components/input.module.css

@@ -10,30 +10,30 @@
   flex-direction: row;
   align-items: center;
   box-sizing: border-box;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-l);
-  padding-left: var(--spacing-l);
+  padding-right: var(--spacing-30);
+  padding-left: var(--spacing-30);
   background: var(--white);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .Input--tiny {
   height: var(--font-height-m);
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
 }
 
 .Input--regular {
   height: var(--font-height-l);
-  padding-top: var(--spacing-0-75);
-  padding-bottom: var(--spacing-0-75);
+  padding-top: var(--spacing-15);
+  padding-bottom: var(--spacing-15);
 }
 
 .Input--large {
   height: 40px;
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 }
 
 .Input:hover {
@@ -124,7 +124,7 @@
 }
 
 .Input-icon--left {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
   color: var(--inverse);
 }
 
@@ -139,16 +139,16 @@
 .Input-icon--right {
   cursor: pointer;
   color: var(--inverse-lighter);
-  border-radius: 10px;
+  border-radius: var(--border-radius-full);
 }
 
 .Input-iconWrapper--right:focus-visible .Input-icon--right {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
+  outline: var(--spacing-05) solid var(--secondary-shadow);
 }
 
 .Input-icon--right:focus-visible {
-  outline: var(--spacing-s) solid var(--secondary-shadow);
-  border-radius: 10px;
+  outline: var(--spacing-05) solid var(--secondary-shadow);
+  border-radius: var(--border-radius-full);
 }
 
 .Input-iconWrapper--right:hover .Input-icon--right {
@@ -160,7 +160,7 @@
 }
 
 .Input-inlineLabel {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
 }
 
 .Input-iconWrapper--right:focus-visible {

package/css/src/components/label.module.css

@@ -4,7 +4,7 @@
 }
 
 .Label--withInput {
-  margin-bottom: var(--spacing-m);
+  margin-bottom: var(--spacing-10);
 }
 
 .Label--optional {
@@ -19,7 +19,7 @@
 
 .Label-optionalText {
   line-height: var(--font-height-s);
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-10);
 }
 
 .Label--disabled {
@@ -27,11 +27,11 @@
 }
 
 .Label-requiredIndicator {
-  height: var(--spacing-0-75);
-  width: var(--spacing-0-75);
-  border-radius: 50%;
+  height: var(--spacing-15);
+  width: var(--spacing-15);
+  border-radius: var(--border-radius-full);
   background: var(--alert);
-  margin-left: var(--spacing-m);
-  margin-bottom: var(--spacing-0-75);
+  margin-left: var(--spacing-10);
+  margin-bottom: var(--spacing-15);
   display: inline-flex;
 }

package/css/src/components/legend.module.css

@@ -6,6 +6,6 @@
 }
 
 .Legend-icon {
-  border-radius: var(--spacing-s);
-  margin-right: var(--spacing);
+  border-radius: var(--border-radius-05);
+  margin-right: var(--spacing-20);
 }

package/css/src/components/link.module.css

@@ -29,12 +29,12 @@
 }
 
 .Link--default:hover {
-  border-bottom: var(--spacing-xs) solid var(--primary-dark);
+  border-bottom: var(--border-width-2-5) solid var(--primary-dark);
   color: var(--primary-dark);
 }
 
 .Link--subtle:hover {
-  border-bottom: var(--spacing-xs) solid var(--inverse-light);
+  border-bottom: var(--border-width-2-5) solid var(--inverse-light);
   color: var(--inverse-light);
 }
 
@@ -50,12 +50,12 @@
 
 .Link--default:focus {
   box-shadow: var(--shadow-spread) var(--primary-shadow);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
 }
 
 .Link--subtle:focus {
   box-shadow: var(--shadow-spread) var(--secondary-shadow);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
 }
 
 .Link--default-disabled {

package/css/src/components/linkButton.module.css

@@ -14,7 +14,7 @@
   background: transparent;
   font-weight: var(--font-weight-medium);
   font-family: var(--font-family);
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
@@ -29,11 +29,11 @@
 }
 
 .LinkButton-icon--left {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 
 .LinkButton-icon--right {
-  margin-left: var(--spacing-m);
+  margin-left: var(--spacing-10);
 }
 
 .LinkButton--regular {

package/css/src/components/listbox.module.css

@@ -9,8 +9,8 @@
 .Listbox-item {
   display: flex;
   align-items: center;
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-2);
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-40);
 }
 
 .Listbox-item-wrapper {
@@ -25,18 +25,18 @@
 /* Sizes */
 
 .Listbox-item--tight {
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
 }
 
 .Listbox-item--compressed {
-  padding-top: var(--spacing);
-  padding-bottom: var(--spacing);
+  padding-top: var(--spacing-20);
+  padding-bottom: var(--spacing-20);
 }
 
 .Listbox-item--standard {
-  padding-top: var(--spacing-l);
-  padding-bottom: var(--spacing-l);
+  padding-top: var(--spacing-30);
+  padding-bottom: var(--spacing-30);
 }
 
 /* Listbox type - option  */
@@ -120,7 +120,7 @@
 
 .Listbox-item--drag-icon {
   cursor: grab;
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
 }
 
 .Listbox-item--drag-icon:hover {

package/css/src/components/menu.module.css

@@ -1,7 +1,7 @@
 .Menu {
   overflow-y: auto !important;
-  padding-top: var(--spacing-m);
-  padding-bottom: var(--spacing-m);
+  padding-top: var(--spacing-10);
+  padding-bottom: var(--spacing-10);
 }
 
 .Menu-Trigger--active {
@@ -16,12 +16,12 @@
 .Menu-Group-Label {
   display: flex;
   align-items: center;
-  padding-bottom: var(--spacing-0-75);
-  padding-top: var(--spacing-l);
-  padding-left: var(--spacing-2);
-  padding-right: var(--spacing-l);
+  padding-bottom: var(--spacing-15);
+  padding-top: var(--spacing-30);
+  padding-left: var(--spacing-40);
+  padding-right: var(--spacing-30);
 }
 
 .Menu-Group:first-child .Menu-Group-Label {
-  padding-top: var(--spacing);
+  padding-top: var(--spacing-20);
 }

package/css/src/components/message.module.css

@@ -2,10 +2,10 @@
   display: flex;
   flex-direction: row;
   overflow: hidden;
-  padding: var(--spacing-l) var(--spacing-xl) var(--spacing-l) var(--spacing-2);
-  border: var(--spacing-xs) solid;
+  padding: var(--spacing-30) var(--spacing-60) var(--spacing-30) var(--spacing-40);
+  border: var(--border-width-2-5) solid;
   width: 100%;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   box-sizing: border-box;
 }
 
@@ -30,12 +30,12 @@
 }
 
 .Message-icon {
-  margin-right: var(--spacing-2);
-  padding-top: var(--spacing-s);
+  margin-right: var(--spacing-40);
+  padding-top: var(--spacing-05);
 }
 
 .Message-icon--withTitle {
-  padding-top: var(--spacing-m);
+  padding-top: var(--spacing-10);
 }
 
 .Message-icon--warning {
@@ -43,7 +43,7 @@
 }
 
 .Message-heading {
-  margin-bottom: var(--spacing-m);
+  margin-bottom: var(--spacing-10);
 }
 
 .Message-heading--alert,
@@ -69,5 +69,5 @@
 .Message-actions {
   display: flex;
   align-items: center;
-  margin-top: var(--spacing-l);
+  margin-top: var(--spacing-30);
 }

package/css/src/components/metaList.module.css

@@ -7,13 +7,13 @@
 }
 
 .MetaList-seperator {
-  margin-left: var(--spacing);
+  margin-left: var(--spacing-20);
 }
 .MetaList-seperator--left {
-  margin-right: var(--spacing-m);
+  margin-right: var(--spacing-10);
 }
 .Meta-icon {
-  padding-right: var(--spacing-m);
+  padding-right: var(--spacing-10);
   display: flex;
   align-items: center;
 }
@@ -25,7 +25,7 @@
   font-size: var(--font-size);
 }
 .MetaList-item {
-  margin: 0 var(--spacing-m);
+  margin: 0 var(--spacing-10);
   display: flex;
   flex-direction: row;
   align-items: center;

package/css/src/components/meter.module.css

@@ -8,18 +8,18 @@
 }
 
 .Meter-Step--small {
-  width: var(--spacing-m);
-  height: var(--spacing);
+  width: var(--spacing-10);
+  height: var(--spacing-20);
 }
 
 .Meter-Step--regular {
-  width: var(--spacing);
-  height: var(--spacing);
+  width: var(--spacing-20);
+  height: var(--spacing-20);
 }
 
 .Meter-Step--large {
-  width: var(--spacing-l);
-  height: var(--spacing-l);
+  width: var(--spacing-30);
+  height: var(--spacing-30);
 }
 
 .Meter-Step--info {

package/css/src/components/metricInput.module.css

@@ -8,21 +8,21 @@
   flex-direction: row;
   align-items: center;
   box-sizing: border-box;
-  border-radius: var(--spacing-m);
+  border-radius: var(--border-radius-10);
   border: var(--border);
-  padding-right: var(--spacing-m);
+  padding-right: var(--spacing-10);
   background: var(--white);
   transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
 .MetricInput--regular {
-  height: var(--spacing-3);
-  padding-left: var(--spacing-l);
+  height: var(--spacing-80);
+  padding-left: var(--spacing-30);
 }
 
 .MetricInput--large {
   height: 40px;
-  padding-left: var(--spacing-2);
+  padding-left: var(--spacing-40);
 }
 
 .MetricInput:hover {
@@ -102,12 +102,12 @@
 }
 
 .MetricInput-icon--regular {
-  margin-right: var(--spacing);
+  margin-right: var(--spacing-20);
   line-height: var(--font-height-s);
 }
 
 .MetricInput-icon--large {
-  margin-right: var(--spacing-l);
+  margin-right: var(--spacing-30);
   line-height: var(--font-height-m);
 }
 
@@ -120,13 +120,13 @@
 }
 
 .MetricInput-arrowIcon--large {
-  height: var(--spacing-2);
-  width: var(--spacing-2);
-  border-radius: var(--spacing-s);
+  height: var(--spacing-40);
+  width: var(--spacing-40);
+  border-radius: var(--border-radius-05);
 }
 
 .MetricInput-arrowIcon--regular {
-  height: var(--spacing-l);
-  width: var(--spacing-l);
-  border-radius: var(--spacing-s);
+  height: var(--spacing-30);
+  width: var(--spacing-30);
+  border-radius: var(--border-radius-05);
 }