@madgex/design-system 5.11.3 → 6.0.1

package/src/components/card/card.scss

@@ -1,28 +1,33 @@
 .mds-card {
-  border: $mds-size-border-width-base solid $mds-color-border;
+  --card-background: none;
+  --card-border: var(--mds-size-border-width-base) solid var(--mds-color-border);
+  --card-shadow: none;
+
+  border: var(--card-border);
+  background: var(--card-background);
+  box-shadow: var(--card-shadow);
 
   > *:last-child {
     margin-bottom: 0;
   }
 }
 .mds-card__container {
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 4);
+  padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 4);
 }
 
 .mds-card--highlighted {
-  background: $mds-color-neutral-lightest;
+  --card-background: #{$scss-var-color-neutral-lightest};
 }
 
 .mds-badge-container {
   display: flex;
   flex-wrap: wrap;
-  column-gap: $mds-size-baseline;
-  
+  column-gap: $scss-var-size-baseline;
 
   &__column {
     display: flex;
     flex-wrap: wrap;
-    column-gap: $mds-size-baseline;
+    column-gap: $scss-var-size-baseline;
     align-items: flex-start;
     flex: 1 1 auto;
 
@@ -32,41 +37,26 @@
   }
 }
 
-// get tokens from custom.card
-$cards: map-get($tokens, 'custom', 'card');
-// set of css properties that we accept
-// any other properties found in the tokens won't be added to the css
-$validCardProperties: background, border, box-shadow;
-
-@each $name, $obj in $cards {
-  .mds-card--#{$name} {
-    @each $property in $validCardProperties {
-      $value: map-get($obj, $property);
-      #{$property}: $value;
-    }
-  }
-}
-
-// get tokens from custom.badge
-$badges: map-get($tokens, 'custom', 'badge');
-// set of css properties that we accept
-// any other properties found in the tokens won't be added to the css
-$validBadgeProperties: background, color, font-size, font-weight, text-transform, padding, border;
-
-
 .mds-badge {
+  --badge-background: #{$scss-var-color-neutral-black};
+  --badge-border: none;
+  --badge-color: #{$scss-var-color-neutral-white};
+  --badge-font-weight: inherit;
+  --badge-padding: #{$scss-var-size-baseline} #{$scss-var-size-baseline * 2};
+  --badge-text-transform: uppercase;
+
   display: block;
-  padding: $mds-size-baseline $mds-size-baseline * 2;
-  margin-bottom: $mds-size-baseline;
+  margin-bottom: $scss-var-size-baseline;
   @extend .mds-font-minion;
-  text-transform: uppercase;
+
+  background: var(--badge-background);
+  color: var(--badge-color);
+  font-weight: var(--badge-font-weight);
+  padding: var(--badge-padding);
+  text-transform: var(--badge-text-transform);
 }
 
-@each $name, $obj in $badges {
-  .mds-badge--#{$name} {
-    @each $property in $validBadgeProperties {
-      $value: map-get($obj, $property);
-      #{$property}: $value;
-    }
-  }
-}
+.mds-badge--new {
+  --badge-background: var(--mds-color-new-badge-background);
+  --badge-color: var(--mds-color-new-badge-text);
+}

package/src/components/icons/README.md

@@ -51,9 +51,9 @@ Add `mds-icon-container--circle` in `containerClasses`.
 
 To add a colour to the container, add one of the following classes:
 
-- `mds-icon-container--error` = `$mds-color-status-error-dark`
-- `mds-icon-container--success` = `$mds-color-status-success-dark`
-- `mds-icon-container--success` = `$mds-color-status-info-dark`
+- `mds-icon-container--error` = `$scss-var-color-status-error-dark`
+- `mds-icon-container--success` = `$scss-var-color-status-success-dark`
+- `mds-icon-container--success` = `$scss-var-color-status-info-dark`
 
 Reference: [Colours tokens](/docs/tokens/colour)
 

package/src/components/icons/icons.scss

@@ -1,8 +1,15 @@
+$icon-size-default: 1em;
+$icon-size-sm: 16px;
+$icon-size-md: 24px;
+$icon-size-lg: 32px;
+$icon-size-xl: 48px;
+$icon-size-xxl: 72px;
+
 .mds-icon {
   display: inline-block;
   fill: currentColor;
-  width: $mds-size-icon-default;
-  height: $mds-size-icon-default;
+  width: $icon-size-default;
+  height: $icon-size-default;
   position: relative;
   // Move icon to baseline of text - see readme
   top: 0.125em;
@@ -28,15 +35,15 @@
   }
 
   &--error {
-    background-color: $mds-color-status-error-dark;
+    background-color: $scss-var-color-status-error-dark;
   }
 
   &--success {
-    background-color: $mds-color-status-success-dark;
+    background-color: $scss-var-color-status-success-dark;
   }
 
   &--info {
-    background-color: $mds-color-status-info-dark;
+    background-color: $scss-var-color-status-info-dark;
   }
 }
 .mds-icon-container--before,
@@ -49,28 +56,28 @@
 }
 
 .mds-icon--sm {
-  width: $mds-size-icon-sm;
-  height: $mds-size-icon-sm;
+  width: $icon-size-sm;
+  height: $icon-size-sm;
 }
 
 .mds-icon--md {
-  width: $mds-size-icon-md;
-  height: $mds-size-icon-md;
+  width: $icon-size-md;
+  height: $icon-size-md;
 }
 
 .mds-icon--lg {
-  width: $mds-size-icon-lg;
-  height: $mds-size-icon-lg;
+  width: $icon-size-lg;
+  height: $icon-size-lg;
 }
 
 .mds-icon--xl {
-  width: $mds-size-icon-xl;
-  height: $mds-size-icon-xl;
+  width: $icon-size-xl;
+  height: $icon-size-xl;
 }
 
 .mds-icon--xxl {
-  width: $mds-size-icon-xxl;
-  height: $mds-size-icon-xxl;
+  width: $icon-size-xxl;
+  height: $icon-size-xxl;
 }
 
 .mds-icon--spinner {
@@ -78,19 +85,19 @@
 }
 
 .mds-icon--error {
-  fill: $mds-color-status-error-darkest;
+  fill: $scss-var-color-status-error-darkest;
 }
 
 .mds-icon--success {
-  fill: $mds-color-status-success-darkest;
+  fill: $scss-var-color-status-success-darkest;
 }
 
 .mds-icon--info {
-  fill: $mds-color-status-info-darkest;
+  fill: $scss-var-color-status-info-darkest;
 }
 
 .mds-icon--neutral {
-  fill: $mds-color-neutral-light;
+  fill: $scss-var-color-neutral-light;
 }
 
 @keyframes spin {

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

@@ -1,15 +1,15 @@
-@mixin inputFocusStyle($focusColour: $mds-color-input-focus) {
+@mixin inputFocusStyle($focusColour: var(--mds-color-input-focus)) {
   border-color: $focusColour;
   outline-color: $focusColour;
   box-shadow: 0 0 3px 2px $focusColour;
 }
 
 .mds-form-field {
-  margin-bottom: $mds-size-baseline * 7;
+  margin-bottom: $scss-var-size-baseline * 7;
 }
 .mds-form-label {
   display: flex;
-  margin-bottom: $mds-size-baseline * 3;
+  margin-bottom: $scss-var-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: $mds-color-status-error-dark;
+  color: $scss-var-color-status-error-dark;
   top: 0;
-  width: math.div($mds-font-size-base, 2);
-  margin-left: $mds-size-baseline;
+  width: calc(var(--mds-font-size-base) / 2);
+  margin-left: $scss-var-size-baseline;
 }
 .mds-form-label__tooltip {
   padding: 0;
-  margin-left: $mds-size-baseline * 2;
+  margin-left: $scss-var-size-baseline * 2;
 }
 
 .mds-form-field__child {
-  margin-bottom: $mds-size-baseline * 2;
+  margin-bottom: $scss-var-size-baseline * 2;
   &:last-child {
     margin-bottom: 0;
   }
@@ -43,19 +43,19 @@
 
 .mds-form-message {
   @extend .mds-font-long-primer;
-  color: $mds-color-neutral-base;
-  margin-bottom: $mds-size-baseline * 4;
+  color: $scss-var-color-neutral-base;
+  margin-bottom: $scss-var-size-baseline * 4;
   display: flex;
   align-items: center;
 
   &--error {
-    color: $mds-color-status-error-dark;
+    color: $scss-var-color-status-error-dark;
   }
 }
 
 .mds-form-message--character-count {
   display: none;
-  margin-top: $mds-size-baseline;
+  margin-top: $scss-var-size-baseline;
 
   .js & {
     display: flex;
@@ -73,9 +73,9 @@
 
 .mds-form-control {
   width: 100%;
-  padding: $mds-size-baseline * 3;
-  border-radius: $mds-size-border-radius-base;
-  border: $mds-size-border-width-base solid $mds-color-input-border;
+  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);
   @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: $mds-color-status-error-dark;
-    background-color: $mds-color-status-error-lightest;
-    border-left-width: $mds-size-baseline;
-    padding-left: $mds-size-baseline * 2;
+    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;
     &:focus-within,
     &:focus {
-      @include inputFocusStyle($mds-color-status-error-dark);
-      border-left-width: $mds-size-baseline;
+      @include inputFocusStyle($scss-var-color-status-error-dark);
+      border-left-width: $scss-var-size-baseline;
     }
   }
 }
@@ -99,7 +99,7 @@
 .mds-form-element--inline {
   & .mds-form-check {
     display: inline-block;
-    margin-right: $mds-size-baseline * 7;
+    margin-right: $scss-var-size-baseline * 7;
     margin-bottom: 0;
 
     & .mds-form-check__label {
@@ -113,22 +113,22 @@
 }
 
 .mds-form-check-container--border {
-  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);
   max-height: 200px;
   min-height: 200px;
   overflow-y: auto;
-  padding: $mds-size-baseline * 2;
+  padding: $scss-var-size-baseline * 2;
 
   .mds-form-element--error & {
-    border-color: $mds-color-status-error-dark;
-    background-color: $mds-color-status-error-lightest;
-    border-left-width: $mds-size-baseline;
+    border-color: $scss-var-color-status-error-dark;
+    background-color: $scss-var-color-status-error-lightest;
+    border-left-width: $scss-var-size-baseline;
   }
 }
 
 .mds-form-check {
-  margin-bottom: $mds-size-baseline * 2;
+  margin-bottom: $scss-var-size-baseline * 2;
 
   &:last-child {
     margin-bottom: 0;
@@ -153,7 +153,7 @@
 .mds-form-check__label {
   vertical-align: middle;
   & * {
-    margin-left: $mds-size-baseline;
+    margin-left: $scss-var-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: $mds-size-baseline * 4;
-  width: $mds-size-baseline * 4;
-  padding: $mds-size-baseline;
-  border: $mds-size-border-width-base solid $mds-color-input-border;
-  background-color: $mds-color-neutral-white;
+  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;
   outline: 0;
-  margin-right: $mds-size-baseline * 2;
+  margin-right: $scss-var-size-baseline * 2;
   vertical-align: middle;
   cursor: pointer;
 
@@ -180,18 +180,18 @@
   }
 
   &:disabled {
-    border-color: $mds-color-input-disabled-field;
-    background: $mds-color-input-disabled-field;
+    border-color: var(--mds-color-input-disabled-field);
+    background: var(--mds-color-input-disabled-field);
     box-shadow: none;
     cursor: auto;
 
     & + .mds-form-check__label {
-      color: $mds-color-input-disabled-label;
+      color: var(--mds-color-input-disabled-label);
     }
   }
 
   .mds-form-element--checkbox & {
-    border-radius: $mds-size-border-radius-base;
+    border-radius: var(--mds-size-border-radius-base);
 
     &:checked:before {
       content: '\2713';
@@ -200,7 +200,7 @@
       align-items: center;
       width: 100%;
       height: 100%;
-      color: $mds-color-input-checked;
+      color: var(--mds-color-input-checked);
     }
   }
   .mds-form-element--radio & {
@@ -212,14 +212,14 @@
       width: 100%;
       height: 100%;
       border-radius: 50%;
-      background-color: $mds-color-input-checked;
+      background-color: var(--mds-color-input-checked);
     }
   }
 }
 
 .mds-form-check__nested-container {
-  margin-top: $mds-size-baseline * 2;
-  padding-left: $mds-size-baseline * 5;
+  margin-top: $scss-var-size-baseline * 2;
+  padding-left: $scss-var-size-baseline * 5;
 }
 
 .js .mds-form-element__fallback {

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

@@ -5,40 +5,40 @@
   width: auto;
 
   box-sizing: border-box;
-  border: $mds-size-border-width-base solid $mds-color-neutral-lighter;
-  border-radius: $mds-size-border-radius-base;
+  border: var(--mds-size-border-width-base) solid $scss-var-color-neutral-lighter;
+  border-radius: var(--mds-size-border-radius-base);
 
   display: inline-flex;
   align-items: center;
   text-align: left;
-  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
 
   @extend .mds-font-body-copy;
-  font-family: $mds-font-family-base;
-  font-weight: $mds-font-weight-base;
+  font-family: var(--mds-font-family-base);
+  font-weight: var(--mds-font-weight-base);
   text-transform: none;
 
-  background: $mds-color-neutral-white;
-  color: $mds-color-text-base;
+  background: $scss-var-color-neutral-white;
+  color: var(--mds-color-text-base);
 
   &: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);
   }
 
   &:focus-within {
-    outline: 2px solid $mds-color-text-base;
+    outline: 2px solid var(--mds-color-text-base);
   }
 }
 
 .mds-checkbox-pill--active {
-  background: $mds-color-pill-bg-base;
-  color: $mds-color-pill-text-base;
+  background: var(--mds-color-pill-bg-base);
+  color: var(--mds-color-pill-text-base);
 
   &:hover,
   &:focus-within {
-    background: $mds-color-pill-bg-hover;
-    color: $mds-color-pill-text-hover;
+    background: var(--mds-color-pill-bg-hover);
+    color: var(--mds-color-pill-text-hover);
   }
 }

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;
   }
 }