@madgex/design-system 5.11.3 → 6.0.0

package/src/components/button/button.scss

@@ -1,76 +1,89 @@
 .mds-button {
+  --button-background: var(--mds-color-button-bg-base);
+  --button-border-color-top: var(--mds-color-button-border-top);
+  --button-border-color-right: var(--mds-color-button-border-right);
+  --button-border-color-bottom: var(--mds-color-button-border-bottom);
+  --button-border-color-left: var(--mds-color-button-border-left);
+  --button-border-color: var(--button-border-color-top) var(--button-border-color-right)
+    var(--button-border-color-bottom) var(--button-border-color-left);
+  --button-border-width: var(--mds-size-border-width-button);
+  --button-text-color: var(--mds-color-button-text-base);
+  --button-font-family: var(--mds-font-family-button-base);
+  --button-font-weight: var(--mds-font-weight-button-base);
+  --button-text-transform: var(--mds-text-transform-button);
+
   cursor: pointer;
   user-select: none;
   -webkit-appearance: none;
   width: auto;
-  border: $mds-size-border-width-button solid;
-  border-top-color: $mds-color-button-border-top;
-  border-right-color: $mds-color-button-border-right;
-  border-bottom-color: $mds-color-button-border-bottom;
-  border-left-color: $mds-color-button-border-left;
-  border-radius: $mds-size-border-radius-button;
 
-  background: $mds-color-button-bg-base;
-  padding: ($mds-size-baseline * 3) ($mds-size-baseline * 5);
+  background: var(--button-background);
+  border: var(--button-border-width) solid;
+  border-color: var(--button-border-color);
+  border-radius: var(--mds-size-border-radius-button);
+
+  padding: ($scss-var-size-baseline * 3) ($scss-var-size-baseline * 5);
   display: inline-block;
   text-align: center;
-  color: $mds-color-button-text-base;
+  color: var(--button-text-color);
   @extend .mds-font-body-copy;
-  font-family: $mds-font-family-button-base;
-  font-weight: $mds-font-weight-button-base;
-  text-transform: $mds-text-transform-button;
+  font-family: var(--button-font-family);
+  font-weight: var(--button-font-weight);
+  text-transform: var(--mds-text-transform-button);
 
   &:hover,
   &:focus {
-    background: $mds-color-button-bg-hover;
+    --button-background: var(--mds-color-button-bg-hover);
+    --button-border-color-top: var(--mds-color-button-border-hover-top);
+    --button-border-color-right: var(--mds-color-button-border-hover-right);
+    --button-border-color-bottom: var(--mds-color-button-border-hover-bottom);
+    --button-border-color-left: var(--mds-color-button-border-hover-left);
+    --button-text-color: var(--mds-color-button-text-hover);
+
     text-decoration: none;
-    color: $mds-color-button-text-hover;
-    border-top-color: $mds-color-button-border-hover-top;
-    border-right-color: $mds-color-button-border-hover-right;
-    border-bottom-color: $mds-color-button-border-hover-bottom;
-    border-left-color: $mds-color-button-border-hover-left;
   }
 }
 
 .mds-button--small {
-  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
 }
 
 .mds-button--large {
-  padding: ($mds-size-baseline * 4) ($mds-size-baseline * 6);
+  padding: ($scss-var-size-baseline * 4) ($scss-var-size-baseline * 6);
 }
 
 .mds-button--icon {
-  padding: ($mds-size-baseline * 2) ($mds-size-baseline * 3);
+  padding: ($scss-var-size-baseline * 2) ($scss-var-size-baseline * 3);
 }
 
 .mds-button--plain {
-  background: transparent;
-  color: $mds-color-link-base;
-  font-weight: $mds-font-weight-link-base;
-  font-family: inherit;
-  border-color: transparent;
-  text-transform: none;
+  --button-background: transparent;
+  --button-border-color: transparent;
+  --button-text-color: var(--mds-color-link-base);
+  --button-font-family: inherit;
+  --button-font-weight: var(--mds-font-weight-link-base);
+  --button-text-transform: none;
 
   &:hover,
   &:focus {
-    background: transparent;
-    color: $mds-color-link-hover;
+    --button-background: transparent;
+    --button-text-color: var(--mds-color-link-hover);
+    --button-border-color: transparent;
+
     text-decoration: underline;
-    border-color: transparent;
   }
 }
 
 .mds-button--neutral {
-  background: $mds-color-neutral-white;
-  color: $mds-color-text-base;
-  border-color: $mds-color-neutral-lighter;
-  border-width: 1px;
+  --button-background: #{$scss-var-color-neutral-white};
+  --button-text-color: var(--mds-color-text-base);
+  --button-border-color: #{$scss-var-color-neutral-lighter};
+  --button-border-width: 1px;
 
   &:hover,
   &:focus {
-    background: $mds-color-neutral-lighter;
-    color: $mds-color-text-base;
-    border-color: $mds-color-neutral-lighter;
+    --button-background: #{$scss-var-color-neutral-lighter};
+    --button-text-color: var(--mds-color-text-base);
+    --button-border-color: #{$scss-var-color-neutral-lighter};
   }
 }

package/src/components/card/README.md

@@ -10,7 +10,7 @@ The card component adds a border and padding around the content.
 
 ### `classes` parameter
 
-Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $mds-color-neutral-lightest)
+Use the class `mds-card--highlighted` in the `classes` parameter to apply a grey background to the card (colour: $scss-var-color-neutral-lightest)
 
 You can customise the `background`, `border` and add a `box-shadow` using the custom brand tokens and passing the class newly created as a parameter. `mds-card--[id of the custom style]`. In the example below, it would be `mds-card--1`. 
 

package/src/components/card/_template.njk

@@ -4,7 +4,7 @@
       {%- for name, value in params.badges -%}
       <div class="mds-badge-container__column mds-badge-container__column--{{ name }}">
         {%- for badge in value -%}
-          <p class="mds-badge mds-badge--{{ badge.styleId }}">{{ badge.label }}</p>
+          <p class="mds-badge{% if badge.styleId %} mds-badge--{{ badge.styleId }}{% endif %}" data-card-badge="{{ badge.styleId }}">{{ badge.label }}</p>
         {%- endfor -%}
       </div>
       {%- endfor -%}

package/src/components/card/card.config.js

@@ -51,7 +51,6 @@ module.exports = {
           left: [
             {
               label: 'Top Job',
-              styleId: '1',
             },
           ],
           right: [
@@ -61,7 +60,7 @@ module.exports = {
             },
             {
               label: 'New',
-              styleId: '2',
+              styleId: 'new',
             },
           ],
         },

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