@madgex/design-system 6.3.2 → 6.3.4

package/src/components/inputs/_form-elements.scss

@@ -1,15 +1,15 @@
-@mixin inputFocusStyle($focusColour: var(--mds-color-input-focus)) {
+@mixin inputFocusStyle($focusColour: $focus-color) {
   border-color: $focusColour;
   outline-color: $focusColour;
   box-shadow: 0 0 3px 2px $focusColour;
 }
 
 .mds-form-field {
-  margin-bottom: $scss-var-size-baseline * 7;
+  margin-bottom: $constant-size-baseline * 7;
 }
 .mds-form-label {
   display: flex;
-  margin-bottom: $scss-var-size-baseline * 3;
+  margin-bottom: $constant-size-baseline * 3;
 
   &--legend-with-tooltip {
     // display: inline/inline-block doesn't work on <legend>
@@ -21,18 +21,18 @@
   flex: 0 1 auto;
 }
 .mds-form-label__required {
-  color: $scss-var-color-status-error-dark;
+  color: $constant-color-status-error-dark;
   top: 0;
-  width: calc(var(--mds-font-size-base) / 2);
-  margin-left: $scss-var-size-baseline;
+  width: 0.5rem;
+  margin-left: $constant-size-baseline;
 }
 .mds-form-label__tooltip {
   padding: 0;
-  margin-left: $scss-var-size-baseline * 2;
+  margin-left: $constant-size-baseline * 2;
 }
 
 .mds-form-field__child {
-  margin-bottom: $scss-var-size-baseline * 2;
+  margin-bottom: $constant-size-baseline * 2;
   &:last-child {
     margin-bottom: 0;
   }
@@ -43,19 +43,19 @@
 
 .mds-form-message {
   @extend .mds-font-long-primer;
-  color: $scss-var-color-neutral-base;
-  margin-bottom: $scss-var-size-baseline * 4;
+  color: $constant-color-neutral-base;
+  margin-bottom: $constant-size-baseline * 4;
   display: flex;
   align-items: center;
 
   &--error {
-    color: $scss-var-color-status-error-dark;
+    color: $constant-color-status-error-dark;
   }
 }
 
 .mds-form-message--character-count {
   display: none;
-  margin-top: $scss-var-size-baseline;
+  margin-top: $constant-size-baseline;
 
   .js & {
     display: flex;
@@ -73,9 +73,9 @@
 
 .mds-form-control {
   width: 100%;
-  padding: $scss-var-size-baseline * 3;
-  border-radius: var(--mds-size-border-radius-base);
-  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
+  padding: $constant-size-baseline * 3;
+  border: $input-border;
+  border-radius: $border-radius;
   @extend .mds-font-body-copy;
 
   &:focus-within, /* focus-within for mds-combobox--multiple wrapper element with focused input */
@@ -84,14 +84,14 @@
   }
 
   .mds-form-element--error & {
-    border-color: $scss-var-color-status-error-dark;
-    background-color: $scss-var-color-status-error-lightest;
-    border-left-width: $scss-var-size-baseline;
-    padding-left: $scss-var-size-baseline * 2;
+    border-color: $constant-color-status-error-dark;
+    background-color: $constant-color-status-error-lightest;
+    border-left-width: $constant-size-baseline;
+    padding-left: $constant-size-baseline * 2;
     &:focus-within,
     &:focus {
-      @include inputFocusStyle($scss-var-color-status-error-dark);
-      border-left-width: $scss-var-size-baseline;
+      @include inputFocusStyle($constant-color-status-error-dark);
+      border-left-width: $constant-size-baseline;
     }
   }
 }
@@ -99,7 +99,7 @@
 .mds-form-element--inline {
   & .mds-form-check {
     display: inline-block;
-    margin-right: $scss-var-size-baseline * 7;
+    margin-right: $constant-size-baseline * 7;
     margin-bottom: 0;
 
     & .mds-form-check__label {
@@ -113,22 +113,22 @@
 }
 
 .mds-form-check-container--border {
-  border-radius: var(--mds-size-border-radius-base);
-  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
+  border: $input-border;
+  border-radius: $border-radius;
   max-height: 200px;
   min-height: 200px;
   overflow-y: auto;
-  padding: $scss-var-size-baseline * 2;
+  padding: $constant-size-baseline * 2;
 
   .mds-form-element--error & {
-    border-color: $scss-var-color-status-error-dark;
-    background-color: $scss-var-color-status-error-lightest;
-    border-left-width: $scss-var-size-baseline;
+    border-color: $constant-color-status-error-dark;
+    background-color: $constant-color-status-error-lightest;
+    border-left-width: $constant-size-baseline;
   }
 }
 
 .mds-form-check {
-  margin-bottom: $scss-var-size-baseline * 2;
+  margin-bottom: $constant-size-baseline * 2;
 
   &:last-child {
     margin-bottom: 0;
@@ -153,7 +153,7 @@
 .mds-form-check__label {
   vertical-align: middle;
   & * {
-    margin-left: $scss-var-size-baseline;
+    margin-left: $constant-size-baseline;
   }
   // in case if label has a image (topCV)
   img {
@@ -164,13 +164,13 @@
 .mds-form-check__input {
   display: inline-block;
   appearance: none;
-  height: $scss-var-size-baseline * 4;
-  width: $scss-var-size-baseline * 4;
-  padding: $scss-var-size-baseline;
-  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
-  background-color: $scss-var-color-neutral-white;
+  height: $constant-size-baseline * 4;
+  width: $constant-size-baseline * 4;
+  padding: $constant-size-baseline;
+  border: $input-border;
+  background-color: #fff;
   outline: 0;
-  margin-right: $scss-var-size-baseline * 2;
+  margin-right: $constant-size-baseline * 2;
   vertical-align: middle;
   cursor: pointer;
 
@@ -180,18 +180,18 @@
   }
 
   &:disabled {
-    border-color: var(--mds-color-input-disabled-field);
-    background: var(--mds-color-input-disabled-field);
+    border-color: $disabled-input-color;
+    background: $disabled-input-color;
     box-shadow: none;
     cursor: auto;
 
     & + .mds-form-check__label {
-      color: var(--mds-color-input-disabled-label);
+      color: var(--mds-color-input-disabled-label, #{$constant-color-neutral-light});
     }
   }
 
   .mds-form-element--checkbox & {
-    border-radius: var(--mds-size-border-radius-base);
+    border-radius: $border-radius;
 
     &:checked:before {
       content: '\2713';
@@ -200,7 +200,7 @@
       align-items: center;
       width: 100%;
       height: 100%;
-      color: var(--mds-color-input-checked);
+      color: var(--mds-color-input-checked, #000);
     }
   }
   .mds-form-element--radio & {
@@ -212,14 +212,14 @@
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background-color: var(--mds-color-input-checked);
+      background-color: var(--mds-color-input-checked, #000);
     }
   }
 }
 
 .mds-form-check__nested-container {
-  margin-top: $scss-var-size-baseline * 2;
-  padding-left: $scss-var-size-baseline * 5;
+  margin-top: $constant-size-baseline * 2;
+  padding-left: $constant-size-baseline * 5;
 }
 
 .js .mds-form-element__fallback {

package/src/components/inputs/checkbox-pill/checkbox-pill.scss

@@ -1,30 +1,33 @@
 .mds-checkbox-pill {
+  --background: #fff;
+  --text-color: var(--mds-color-text-base);
+
   cursor: pointer;
   user-select: none;
   -webkit-appearance: none;
   width: auto;
 
   box-sizing: border-box;
-  border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
-  border-radius: var(--mds-size-border-radius-base);
+  border: $regular-border;
+  border-radius: $border-radius;
 
   display: inline-flex;
   align-items: center;
   text-align: left;
-  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
+  padding: ($constant-size-baseline * 2) ($constant-size-baseline * 3);
 
   @extend .mds-font-body-copy;
   font-family: var(--mds-font-family-base);
   font-weight: var(--mds-font-weight-base);
   text-transform: none;
 
-  background: $scss-var-color-neutral-white;
-  color: var(--mds-color-text-base);
+  background: var(--background);
+  color: var(--text-color);
 
   &:hover,
   &:focus-within {
-    background: $scss-var-color-neutral-lightest;
-    color: var(--mds-color-link-hover);
+    --background: #{$constant-color-neutral-lightest};
+    --text-color: #{$link-hover-color};
   }
 
   &:focus-within {
@@ -33,12 +36,12 @@
 }
 
 .mds-checkbox-pill--active {
-  background: var(--mds-color-pill-bg-base);
-  color: var(--mds-color-pill-text-base);
+  --background: var(--mds-color-pill-bg-base, #000);
+  --text-color: var(--mds-color-pill-text-base, #fff);
 
   &:hover,
   &:focus-within {
-    background: var(--mds-color-pill-bg-hover);
-    color: var(--mds-color-pill-text-hover);
+    --background: var(--mds-color-pill-bg-hover, #{$constant-color-neutral-darker});
+    --text-color: var(--mds-color-pill-text-hover, #fff);
   }
 }

package/src/components/inputs/combobox/combobox.scss

@@ -4,20 +4,20 @@
 
   /* .mds-combobox--multiple has checkbox inputs too, so we need to target type="text" only */
   & input[type='text'] {
-    padding-right: $scss-var-size-baseline * 14;
+    padding-right: $constant-size-baseline * 14;
   }
 }
 .mds-combobox--multiple {
-  background-color: $scss-var-color-neutral-white;
+  background-color: #fff;
   @extend .mds-form-control;
   padding: 0;
   & input[type='text'] {
     width: 100%;
     border: 0;
-    padding: $scss-var-size-baseline * 3; // match .mds-form-control
+    padding: $constant-size-baseline * 3; // match .mds-form-control
     font-size: inherit;
     line-height: inherit;
-    padding-right: $scss-var-size-baseline * 14;
+    padding-right: $constant-size-baseline * 14;
     appearance: none;
     &:focus {
       outline: 0;
@@ -28,7 +28,7 @@
   position: relative;
 }
 .mds-combobox__pills {
-  padding: $scss-var-size-baseline;
+  padding: $constant-size-baseline;
   padding-bottom: 0;
 }
 .mds-combobox__clear {
@@ -40,13 +40,13 @@
     @include inputFocusStyle();
   }
   & .mds-icon {
-    color: $scss-var-color-neutral-base;
+    color: $constant-color-neutral-base;
   }
 }
 .mds-combobox__listbox {
-  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
+  border: $input-border;
   border-top: none;
-  border-radius: 0 0 var(--mds-size-border-radius-base) var(--mds-size-border-radius-base);
+  border-radius: 0 0 $border-radius $border-radius;
   position: absolute;
   left: 0;
   right: 0;
@@ -56,8 +56,8 @@
   @include z-index();
 
   & .mds-combobox-loading {
-    padding: $scss-var-size-baseline * 2 0;
-    background-color: var(--mds-color-background-body);
+    padding: $constant-size-baseline * 2 0;
+    background-color: #fff;
     & .mds-icon--spinner {
       display: block;
       margin: 0 auto;
@@ -69,14 +69,14 @@
       font-weight: 700;
     }
     @extend .mds-font-pica;
-    padding: $scss-var-size-baseline * 2 $scss-var-size-baseline * 3;
-    border-bottom: 1px solid $scss-var-color-neutral-lighter;
-    background-color: $scss-var-color-neutral-white;
+    padding: $constant-size-baseline * 2 $constant-size-baseline * 3;
+    border-bottom: 1px solid $constant-color-neutral-lighter;
+    background-color: #fff;
 
     &.mds-combobox__option--focused,
     &:hover {
       cursor: pointer;
-      background-color: $scss-var-color-neutral-lighter;
+      background-color: $constant-color-neutral-lighter;
     }
     &:last {
       border-bottom: none;

package/src/components/inputs/file-upload/file-upload.scss

@@ -5,19 +5,19 @@
 .js .mds-form-element--file-supported .mds-file-upload {
   display: flex;
   flex-direction: column;
-  background-color: $scss-var-color-neutral-lightest;
-  padding: $scss-var-size-baseline;
+  background-color: $constant-color-neutral-lightest;
+  padding: $constant-size-baseline;
 
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     flex-direction: row;
   }
 }
 
 .js .mds-form-element--file-supported .mds-file-upload__input {
   position: relative;
-  border: var(--mds-size-border-width-base) dashed var(--mds-color-border);
+  border: 1px dashed $constant-color-neutral-lighter;
   width: 100%;
-  padding: ($scss-var-size-baseline * 4) ($scss-var-size-baseline * 2);
+  padding: ($constant-size-baseline * 4) ($constant-size-baseline * 2);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -55,9 +55,9 @@
   & .mds-form-control:focus ~ .mds-file-upload__input-controls {
     // Apply some focus styling to the 'button' when the input has focus and can be keyboard-activated
     label {
-      border: var(--mds-size-border-width-base) solid var(--mds-color-input-focus);
-      outline-color: var(--mds-color-input-focus);
-      box-shadow: 0 0 4px 2px var(--mds-color-input-focus);
+      border: 1px solid $focus-color;
+      outline-color: $focus-color;
+      box-shadow: 0 0 4px 2px $focus-color;
     }
   }
 }
@@ -66,10 +66,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: $scss-var-size-baseline * 5;
+  margin-bottom: $constant-size-baseline * 5;
 
   & .mds-icon {
-    fill: var(--mds-color-button-bg-base);
+    fill: var(--mds-color-button-bg-base, #000);
   }
 }
 
@@ -80,19 +80,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: $scss-var-size-baseline * 2 $scss-var-size-baseline * 3;
+  padding: $constant-size-baseline * 2 $constant-size-baseline * 3;
 }
 .mds-file-upload__remove-button {
   @include z-index;
 }
 
 .js .mds-form-element--file-supported.mds-form-element--selected-file {
-  @include mq($from: $scss-var-size-breakpoint-md) {
+  @include mq($from: $constant-size-breakpoint-md) {
     width: 50%;
   }
 
   & .mds-file-upload {
-    border: var(--mds-size-border-width-base) solid var(--mds-color-border);
+    border: $regular-border;
   }
   & .mds-file-upload__input {
     border: 0;
@@ -123,7 +123,7 @@
 
 .js .mds-form-element--file-supported.mds-form-element--dragover {
   & .mds-file-upload__input {
-    background-color: $scss-var-color-neutral-white;
+    background-color: #fff;
   }
 }
 

package/src/components/inputs/input-number/input-number.scss

@@ -1,9 +1,9 @@
 .mds-input-number {
   position: relative;
   display: flex;
-  border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
-  border-radius: var(--mds-size-border-radius-base);
-  background: $scss-var-color-neutral-white;
+  border: $regular-border;
+  border-radius: $border-radius;
+  background: #fff;
   padding: 0;
   color: var(--mds-color-text-base);
   width: 100%;
@@ -16,11 +16,11 @@
 
 .mds-input-number input {
   flex: 1;
-  padding: $scss-var-size-baseline * 3;
+  padding: $constant-size-baseline * 3;
   line-height: inherit;
   font-size: inherit;
   color: inherit;
-  border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
+  border: $regular-border;
   border-top: none;
   border-bottom: none;
   background: none;
@@ -40,7 +40,7 @@
 }
 
 .mds-input-number button {
-  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
+  padding: ($constant-size-baseline * 2) ($constant-size-baseline * 3);
   border: none;
   cursor: pointer;
   background: none;
@@ -49,8 +49,8 @@
 
   &:hover,
   &:focus-within {
-    background: $scss-var-color-neutral-lightest;
-    color: var(--mds-color-link-hover);
+    background: $constant-color-neutral-lightest;
+    color: $link-hover-color;
   }
 
   &[aria-disabled='true'] {

package/src/components/inputs/text-editor/text-editor.scss

@@ -1,19 +1,19 @@
 .mds-text-editor {
   width: 100%;
-  border-radius: var(--mds-size-border-radius-base);
-  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
+  border: $input-border;
+  border-radius: $border-radius;
   @extend .mds-font-body-copy;
 
   .mds-form-element--error & {
-    border-color: $scss-var-color-status-error-dark;
-    border-left-width: $scss-var-size-baseline;
+    border-color: $constant-color-status-error-dark;
+    border-left-width: $constant-size-baseline;
   }
 }
 
 .mds-text-editor__menu {
-  background-color: $scss-var-color-neutral-white;
-  border-bottom: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
-  padding: $scss-var-size-baseline;
+  background-color: #fff;
+  border-bottom: $input-border;
+  padding: $constant-size-baseline;
 }
 
 .mds-text-editor__button {
@@ -21,40 +21,40 @@
   user-select: none;
   -webkit-appearance: none;
   width: auto;
-  border: var(--mds-size-border-width-base) solid transparent;
-  @extend .mds-border-radius;
-  background: $scss-var-color-neutral-white;
-  padding: $scss-var-size-baseline ($scss-var-size-baseline * 2);
-  margin-right: $scss-var-size-baseline;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: #fff;
+  padding: $constant-size-baseline ($constant-size-baseline * 2);
+  margin-right: $constant-size-baseline;
   display: inline-block;
   text-align: center;
-  color: $scss-var-color-neutral-black;
+  color: #000;
 
   &:hover,
   &:focus,
   &--active {
-    background: $scss-var-color-neutral-lighter;
+    background: $constant-color-neutral-lighter;
   }
 
   &--active {
-    border-color: $scss-var-color-neutral-black;
+    border-color: #000;
   }
 
   &[aria-disabled='true'],
   &[aria-disabled='true']:hover {
-    color: var(--mds-color-input-disabled-label);
+    color: var(--mds-color-input-disabled-label, #{$constant-color-neutral-light});
     background: none;
     cursor: not-allowed;
   }
 }
 
 .mds-text-editor__content {
-  background-color: $scss-var-color-neutral-white;
-  padding: $scss-var-size-baseline * 3;
+  background-color: #fff;
+  padding: $constant-size-baseline * 3;
   min-height: 150px;
 
   .mds-form-element--error & {
-    background-color: $scss-var-color-status-error-lightest;
+    background-color: $constant-color-status-error-lightest;
   }
 
   & a {

package/src/components/modal/modal.scss

@@ -25,10 +25,10 @@
 }
 
 .mds-modal__inner {
-  background-color: var(--mds-color-background-body);
-  margin: ($scss-var-size-baseline * 10) auto;
-  padding: ($scss-var-size-baseline * 8) ($scss-var-size-baseline * 12);
-  border-radius: var(--mds-size-border-radius-base);
+  background-color: #fff;
+  margin: ($constant-size-baseline * 10) auto;
+  padding: ($constant-size-baseline * 8) ($constant-size-baseline * 12);
+  border-radius: $border-radius;
   max-width: 800px;
   position: relative;
 }

package/src/components/notification/notification.scss

@@ -5,7 +5,7 @@
   left: 50%;
   @include z-index(modal);
   transform: translateX(-50%) translateY(-50%);
-  box-shadow: var(--mds-shadow-base);
+  box-shadow: 0 2px 5px 0 $constant-color-neutral-lighter;
 
   animation: notification-fadeIn 0.25s;
   animation-fill-mode: forwards;

package/src/components/pagination/pagination.scss

@@ -7,15 +7,15 @@
 
 .mds-pagination__link {
   display: inline-block;
-  padding: $scss-var-size-baseline * 3 $scss-var-size-baseline * 2;
+  padding: $constant-size-baseline * 3 $constant-size-baseline * 2;
   &--back {
-    border-right: var(--mds-size-border-width-base) solid var(--mds-color-border);
+    border-right: $regular-border;
   }
 
   &--background {
     &:hover,
     &:focus {
-      background-color: $scss-var-color-neutral-lightest;
+      background-color: $constant-color-neutral-lightest;
       & > span,
       & > strong {
         text-decoration: underline;
@@ -25,14 +25,14 @@
 
   &--disabled {
     cursor: not-allowed;
-    background-color: $scss-var-color-neutral-lightest;
-    color: $scss-var-color-neutral-lighter;
+    background-color: $constant-color-neutral-lightest;
+    color: $constant-color-neutral-lighter;
   }
 }
 .mds-pagination--numbers .mds-pagination__extra-label {
   display: none;
 
-  @include mq($from: $scss-var-size-breakpoint-lg) {
+  @include mq($from: $constant-size-breakpoint-lg) {
     display: inline;
   }
 }
@@ -52,10 +52,10 @@
   }
   .mds-pagination__link--active {
     color: var(--mds-color-text-base);
-    background-color: var(--mds-color-brand-1-lightest);
+    background-color: var(--mds-color-brand-1-lightest, #{$constant-color-neutral-lightest});
     &:hover,
     &:focus {
-      color: var(--mds-color-link-hover);
+      color: $link-hover-color;
     }
   }
 }