@madgex/design-system 5.11.2 → 6.0.0

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

@@ -4,7 +4,7 @@
 
   /* .mds-combobox--multiple has checkbox inputs too, so we need to target type="text" only */
   & input[type='text'] {
-    padding-right: $mds-size-baseline * 14;
+    padding-right: $scss-var-size-baseline * 14;
   }
 }
 .mds-combobox--multiple {
@@ -13,10 +13,10 @@
   & input[type='text'] {
     width: 100%;
     border: 0;
-    padding: $mds-size-baseline * 3; // match .mds-form-control
+    padding: $scss-var-size-baseline * 3; // match .mds-form-control
     font-size: inherit;
     line-height: inherit;
-    padding-right: $mds-size-baseline * 14;
+    padding-right: $scss-var-size-baseline * 14;
     background-color: transparent;
     appearance: none;
     &:focus {
@@ -28,7 +28,7 @@
   position: relative;
 }
 .mds-combobox__pills {
-  padding: $mds-size-baseline;
+  padding: $scss-var-size-baseline;
   padding-bottom: 0;
 }
 .mds-combobox__clear {
@@ -40,13 +40,13 @@
     @include inputFocusStyle();
   }
   & .mds-icon {
-    color: $mds-color-neutral-base;
+    color: $scss-var-color-neutral-base;
   }
 }
 .mds-combobox__listbox {
-  border: $mds-size-border-width-base solid $mds-color-input-border;
+  border: var(--mds-size-border-width-base) solid var(--mds-color-input-border);
   border-top: none;
-  border-radius: 0 0 $mds-size-border-radius-base $mds-size-border-radius-base;
+  border-radius: 0 0 var(--mds-size-border-radius-base) var(--mds-size-border-radius-base);
   position: absolute;
   left: 0;
   right: 0;
@@ -56,8 +56,8 @@
   @include z-index();
 
   & .mds-combobox-loading {
-    padding: $mds-size-baseline * 2 0;
-    background-color: $mds-color-background-body;
+    padding: $scss-var-size-baseline * 2 0;
+    background-color: var(--mds-color-background-body);
     & .mds-icon--spinner {
       display: block;
       margin: 0 auto;
@@ -69,14 +69,14 @@
       font-weight: 700;
     }
     @extend .mds-font-pica;
-    padding: $mds-size-baseline * 2 $mds-size-baseline * 3;
-    border-bottom: 1px solid $mds-color-neutral-lighter;
-    background-color: $mds-color-neutral-white;
+    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;
 
     &.mds-combobox__option--focused,
     &:hover {
       cursor: pointer;
-      background-color: $mds-color-neutral-lighter;
+      background-color: $scss-var-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: $mds-color-neutral-lightest;
-  padding: $mds-size-baseline;
+  background-color: $scss-var-color-neutral-lightest;
+  padding: $scss-var-size-baseline;
 
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     flex-direction: row;
   }
 }
 
 .js .mds-form-element--file-supported .mds-file-upload__input {
   position: relative;
-  border: $mds-size-border-width-base dashed $mds-color-border;
+  border: var(--mds-size-border-width-base) dashed var(--mds-color-border);
   width: 100%;
-  padding: ($mds-size-baseline * 4) ($mds-size-baseline * 2);
+  padding: ($scss-var-size-baseline * 4) ($scss-var-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: $mds-size-border-width-base solid $mds-color-input-focus;
-      outline-color: $mds-color-input-focus;
-      box-shadow: 0 0 4px 2px $mds-color-input-focus;
+      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);
     }
   }
 }
@@ -66,10 +66,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: $mds-size-baseline * 5;
+  margin-bottom: $scss-var-size-baseline * 5;
 
   & .mds-icon {
-    fill: $mds-color-button-bg-base;
+    fill: var(--mds-color-button-bg-base);
   }
 }
 
@@ -80,19 +80,19 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: $mds-size-baseline * 2 $mds-size-baseline * 3;
+  padding: $scss-var-size-baseline * 2 $scss-var-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: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     width: 50%;
   }
 
   & .mds-file-upload {
-    border: $mds-size-border-width-base solid $mds-color-border;
+    border: var(--mds-size-border-width-base) solid var(--mds-color-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: $mds-color-neutral-white;
+    background-color: $scss-var-color-neutral-white;
   }
 }
 

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

@@ -1,13 +1,13 @@
 .mds-input-number {
   position: relative;
   display: flex;
-  border: $mds-size-border-width-base solid $mds-color-neutral-lighter;
-  border-radius: $mds-size-border-radius-base;
-  background: $mds-color-neutral-white;
+  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;
   padding: 0;
-  color: $mds-color-text-base;
+  color: var(--mds-color-text-base);
   width: 100%;
-  min-width: $mds-size-container-min-width;
+  min-width: var(--mds-size-container-min-width);
 }
 
 .mds-form-element--error .mds-form-control.mds-input-number {
@@ -16,11 +16,11 @@
 
 .mds-input-number input {
   flex: 1;
-  padding: $mds-size-baseline * 3;
+  padding: $scss-var-size-baseline * 3;
   line-height: inherit;
   font-size: inherit;
   color: inherit;
-  border: $mds-size-border-width-base solid $mds-color-neutral-lighter;
+  border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
   border-top: none;
   border-bottom: none;
   background: none;
@@ -40,7 +40,7 @@
 }
 
 .mds-input-number button {
-  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
   border: none;
   cursor: pointer;
   background: none;
@@ -49,8 +49,8 @@
 
   &:hover,
   &:focus-within {
-    background: $mds-color-neutral-lightest;
-    color: $mds-color-link-hover;
+    background: $scss-var-color-neutral-lightest;
+    color: var(--mds-color-link-hover);
   }
 
   &[aria-disabled='true'] {

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

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

package/src/components/modal/modal.js

@@ -1,4 +1,4 @@
-const tokens = require('../../tokens/size.json');
+const tokens = require('../../tokens/_constants.json');
 
 const breakpoint = parseInt(tokens.size.breakpoint.md.value, 10);
 const modalTrigger = 'data-modal-id';

package/src/components/modal/modal.scss

@@ -25,10 +25,10 @@
 }
 
 .mds-modal__inner {
-  background-color: $mds-color-background-body;
-  margin: ($mds-size-baseline * 10) auto;
-  padding: ($mds-size-baseline * 8) ($mds-size-baseline * 12);
-  border-radius: $mds-size-border-radius-base;
+  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);
   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: $mds-shadow-base;
+  box-shadow: var(--mds-shadow-base);
 
   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: $mds-size-baseline * 3 $mds-size-baseline * 2;
+  padding: $scss-var-size-baseline * 3 $scss-var-size-baseline * 2;
   &--back {
-    border-right: $mds-size-border-width-base solid $mds-color-border;
+    border-right: var(--mds-size-border-width-base) solid var(--mds-color-border);
   }
 
   &--background {
     &:hover,
     &:focus {
-      background-color: $mds-color-neutral-lightest;
+      background-color: $scss-var-color-neutral-lightest;
       & > span,
       & > strong {
         text-decoration: underline;
@@ -25,14 +25,14 @@
 
   &--disabled {
     cursor: not-allowed;
-    background-color: $mds-color-neutral-lightest;
-    color: $mds-color-neutral-lighter;
+    background-color: $scss-var-color-neutral-lightest;
+    color: $scss-var-color-neutral-lighter;
   }
 }
 .mds-pagination--numbers .mds-pagination__extra-label {
   display: none;
 
-  @include mq($from: $mds-size-breakpoint-lg) {
+  @include mq($from: $scss-var-size-breakpoint-lg) {
     display: inline;
   }
 }
@@ -51,10 +51,10 @@
     flex-grow: 1;
   }
   .mds-pagination__link--active {
-    color: $mds-color-text-base;
+    color: var(--mds-color-text-base);
     &:hover,
     &:focus {
-      color: $mds-color-link-hover;
+      color: var(--mds-color-link-hover);
     }
   }
 }

package/src/components/popover/popover.js

@@ -1,7 +1,7 @@
 // import Tooltip from 'tooltip.js';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { createPopper } from '@popperjs/core';
-import { size } from '../../tokens/size.json';
+import { size } from '../../tokens/_constants.json';
 
 const baseSize = parseInt(size.baseline.value, 10);
 const triggerClassName = 'js-mds-popover-trigger';

package/src/components/popover/popover.scss

@@ -9,11 +9,11 @@ $arrow-size: 10px;
 }
 
 .js .mds-popover {
-  background: $mds-color-background-surface;
-  border: $mds-size-border-width-base solid $mds-color-border;
-  border-radius: $mds-size-border-radius-base;
-  padding: ($mds-size-baseline * 2);
-  box-shadow: $mds-shadow-base;
+  background: var(--mds-color-background-surface);
+  border: var(--mds-size-border-width-base) solid var(--mds-color-border);
+  border-radius: var(--mds-size-border-radius-base);
+  padding: ($scss-var-size-baseline * 2);
+  box-shadow: var(--mds-shadow-base);
   text-align: left;
   max-width: 250px;
   @include z-index(popup);
@@ -48,11 +48,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='top-start'] &,
   .mds-popover[data-popper-placement='top-end'] & {
     bottom: $arrow-size * -1;
-    border-top-color: $mds-color-border;
+    border-top-color: var(--mds-color-border);
     border-bottom-width: 0;
 
     &:after {
-      border-top-color: $mds-color-background-surface;
+      border-top-color: var(--mds-color-background-surface);
       border-bottom-width: 0;
       left: $arrow-size * -1;
       bottom: 1px;
@@ -62,11 +62,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='right-start'] &,
   .mds-popover[data-popper-placement='right-end'] & {
     left: $arrow-size * -1;
-    border-right-color: $mds-color-border;
+    border-right-color: var(--mds-color-border);
     border-left-width: 0;
 
     &:after {
-      border-right-color: $mds-color-background-surface;
+      border-right-color: var(--mds-color-background-surface);
       border-left-width: 0;
       top: $arrow-size * -1;
       left: 1px;
@@ -76,11 +76,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='bottom-start'] &,
   .mds-popover[data-popper-placement='bottom-end'] & {
     top: $arrow-size * -1;
-    border-bottom-color: $mds-color-border;
+    border-bottom-color: var(--mds-color-border);
     border-top-width: 0;
 
     &:after {
-      border-bottom-color: $mds-color-background-surface;
+      border-bottom-color: var(--mds-color-background-surface);
       border-top-width: 0;
       left: $arrow-size * -1;
       top: 1px;
@@ -90,11 +90,11 @@ $arrow-size: 10px;
   .mds-popover[data-popper-placement='left-start'] &,
   .mds-popover[data-popper-placement='left-end'] & {
     right: $arrow-size * -1;
-    border-left-color: $mds-color-border;
+    border-left-color: var(--mds-color-border);
     border-right-width: 0;
 
     &:after {
-      border-left-color: $mds-color-background-surface;
+      border-left-color: var(--mds-color-background-surface);
       border-right-width: 0;
       top: $arrow-size * -1;
       right: 1px;

package/src/components/section-title/section-title.scss

@@ -1,3 +1,3 @@
 .mds-section-title {
-  border-bottom: $mds-size-border-width-base solid $mds-color-border;
+  border-bottom: var(--mds-size-border-width-base) solid var(--mds-color-border);
 }

package/src/components/skip-link/skip-link.scss

@@ -1,13 +1,13 @@
 .mds-skip-to-content__link {
-  background-color: $mds-color-neutral-lightest;
-  border: 5px solid $mds-color-border;
+  background-color: $scss-var-color-neutral-lightest;
+  border: 5px solid var(--mds-color-border);
   @extend .mds-font-double-pica;
   font-weight: bold;
   left: -10000px;
-  padding: $mds-size-baseline * 6;
+  padding: $scss-var-size-baseline * 6;
   position: absolute;
   text-align: center;
-  border-radius: $mds-size-border-radius-base;
+  border-radius: var(--mds-size-border-radius-base);
 
   &:focus {
     left: 0;

package/src/components/tabs/tabs.js

@@ -1,4 +1,4 @@
-const tokens = require('../../tokens/size.json');
+const tokens = require('../../tokens/_constants.json');
 
 const tabsItemJsClass = 'js-tabs-item';
 const tabsClass = 'mds-tabs';

package/src/components/tabs/tabs.scss

@@ -1,7 +1,7 @@
 .mds-tabs__list {
   margin-bottom: 0;
-  padding-top: $mds-size-baseline * 3;
-  padding-bottom: $mds-size-baseline * 3;
+  padding-top: $scss-var-size-baseline * 3;
+  padding-bottom: $scss-var-size-baseline * 3;
   @extend .mds-border-bottom;
 }
 
@@ -18,10 +18,10 @@
   @extend .mds-font-great-primer;
   @extend .mds-surface__inner;
   @extend .mds-border-bottom;
-  padding-top: $mds-size-baseline * 3;
-  padding-bottom: $mds-size-baseline * 3;
+  padding-top: $scss-var-size-baseline * 3;
+  padding-bottom: $scss-var-size-baseline * 3;
   margin-bottom: 0;
-  background: $mds-color-neutral-lightest;
+  background: $scss-var-color-neutral-lightest;
 }
 
 .mds-tabs__list-item {
@@ -31,8 +31,8 @@
 .mds-tabs__tab {
   display: inline-block;
   @extend .mds-surface__inner;
-  padding-top: $mds-size-baseline * 2;
-  padding-bottom: $mds-size-baseline * 2;
+  padding-top: $scss-var-size-baseline * 2;
+  padding-bottom: $scss-var-size-baseline * 2;
 }
 
 // MIXIN to share between the 2 variations
@@ -53,7 +53,7 @@
   .mds-tabs__panel-header--visible {
     background: transparent;
     border-bottom: 0;
-    padding-top: $mds-size-baseline * 8;
+    padding-top: $scss-var-size-baseline * 8;
     padding-bottom: 0;
   }
 
@@ -65,20 +65,20 @@
     width: 100%;
     text-decoration: none;
     text-align: left;
-    margin-right: $mds-size-baseline;
-    padding-top: $mds-size-baseline * 6;
-    padding-bottom: $mds-size-baseline * 5;
+    margin-right: $scss-var-size-baseline;
+    padding-top: $scss-var-size-baseline * 6;
+    padding-bottom: $scss-var-size-baseline * 5;
   }
 
   .mds-tabs__tab.mds-tabs__tab--selected {
-    border-bottom: 6px solid $mds-color-link-base;
-    color: $mds-color-text-headers-base;
+    border-bottom: 6px solid var(--mds-color-link-base);
+    color: var(--mds-color-text-headers-base);
   }
 }
 
 .js {
   // DEFAULT (desktop-tabbed)
-  @include mq($from: $mds-size-breakpoint-lg) {
+  @include mq($from: $scss-var-size-breakpoint-lg) {
     @include tabbed-items;
   }
   // FULL-TABBED
@@ -86,13 +86,13 @@
     @include tabbed-items;
     .mds-tabs__list-item {
       width: 50%;
-      @include mq($from: $mds-size-breakpoint-md) {
+      @include mq($from: $scss-var-size-breakpoint-md) {
         width: auto;
       }
     }
     .mds-tabs__tab {
       text-align: center;
-      @include mq($from: $mds-size-breakpoint-md) {
+      @include mq($from: $scss-var-size-breakpoint-md) {
         text-align: left;
       }
     }

package/src/components/toggle-button-links/toggle-button-links.scss

@@ -5,18 +5,18 @@
   display: inline;
   margin-bottom: 0;
   /* @include mds-visually-hidden;
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     position: relative;
     clip: inherit;
     clip-path: none;
     width: auto;
     height: auto;
     white-space: inherit;
-    margin-right: $mds-size-baseline * 4;
+    margin-right: $scss-var-size-baseline * 4;
   } */
 
-  margin-right: $mds-size-baseline * 4;
-  @include mq($until: $mds-size-breakpoint-md - 1px) {
+  margin-right: $scss-var-size-baseline * 4;
+  @include mq($until: $scss-var-size-breakpoint-md - 1px) {
     @include mds-visually-hidden;
   }
 }
@@ -24,16 +24,16 @@
 .mds-toggle-button-links__list {
   display: flex;
   margin-bottom: 0;
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     display: inline;
   }
 }
 .mds-toggle-button-links__list-item {
   display: flex;
   flex: 1;
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     display: inline;
-    margin-right: $mds-size-baseline * 4;
+    margin-right: $scss-var-size-baseline * 4;
   }
 }
 
@@ -45,39 +45,39 @@
   text-align: center;
   justify-content: center;
 
-  border: 1px solid $mds-color-neutral-lighter;
+  border: 1px solid $scss-var-color-neutral-lighter;
   border-right-width: 0;
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 5);
+  padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 5);
   @extend .mds-font-body-copy;
   text-decoration: underline;
 
-  font-weight: $mds-font-weight-link-base;
-  color: $mds-color-link-base;
-  background: $mds-color-neutral-white;
+  font-weight: var(--mds-font-weight-link-base);
+  color: var(--mds-color-link-base);
+  background: $scss-var-color-neutral-white;
 
   .mds-toggle-button-links__list-item:first-child & {
-    border-top-left-radius: $mds-size-border-radius-button;
-    border-bottom-left-radius: $mds-size-border-radius-button;
+    border-top-left-radius: var(--mds-size-border-radius-button);
+    border-bottom-left-radius: var(--mds-size-border-radius-button);
   }
   .mds-toggle-button-links__list-item:last-child & {
-    border-top-right-radius: $mds-size-border-radius-button;
-    border-bottom-right-radius: $mds-size-border-radius-button;
+    border-top-right-radius: var(--mds-size-border-radius-button);
+    border-bottom-right-radius: var(--mds-size-border-radius-button);
     border-right-width: 1px;
   }
 
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     display: inline;
     padding: 0;
     border: 0;
   }
 }
 .mds-toggle-button-links__link--active {
-  color: $mds-color-text-base;
+  color: var(--mds-color-text-base);
   text-decoration: none;
   font-weight: bolder;
-  background: $mds-color-neutral-lightest;
+  background: $scss-var-color-neutral-lightest;
 
-  @include mq($from: $mds-size-breakpoint-md) {
+  @include mq($from: $scss-var-size-breakpoint-md) {
     background: none;
   }
 }