@madgex/design-system 5.11.3 → 6.0.1

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

package/src/helpers/spacing/README.md

@@ -1,10 +1,10 @@
 ## Space scale
 
-We are using a spacing scale based on a single tolen: `$mds-size-baseline = 0.25 rem | 4px`.
+We are using a spacing scale based on a single tolen: `$scss-var-size-baseline = 0.25 rem | 4px`.
 
 We multiply this token to create any spacing on the design system.
 
-Ex: `margin-bottom: $mds-size-baseline * 5`
+Ex: `margin-bottom: $scss-var-size-baseline * 5`
 
 ## Helpers
 

package/src/layout/grid/README.md

@@ -11,10 +11,10 @@ The default will start at 0 and then we add breakpoints to target the wider view
 
 We are using the following breakpoints:
 
-- `$mds-size-breakpoint-sm` : `400px`
-- `$mds-size-breakpoint-md` : `600px`
-- `$mds-size-breakpoint-lg` : `1008px`
-- `$mds-size-breakpoint-xl` : `1280px`
+- `$scss-var-size-breakpoint-sm` : `400px`
+- `$scss-var-size-breakpoint-md` : `600px`
+- `$scss-var-size-breakpoint-lg` : `1008px`
+- `$scss-var-size-breakpoint-xl` : `1280px`
 
 They can be overridden as necessary.
 

package/src/scss/constants/__index.scss

@@ -0,0 +1,2 @@
+@import 'sd-tokens'; // file created by style dictionary
+@import 'vars';

package/src/scss/constants/_sd-tokens.scss

@@ -0,0 +1,81 @@
+
+/**
+ * Do not edit directly
+ * Generated on Fri, 26 Jan 2024 16:30:41 GMT
+ */
+
+$scss-var-color-neutral-white: #FFFFFF;
+$scss-var-color-neutral-black: #000000;
+$scss-var-color-neutral-base: #707070;
+$scss-var-color-neutral-light: #949494;
+$scss-var-color-neutral-lighter: #DDDDDD;
+$scss-var-color-neutral-lightest: #F8F8F8;
+$scss-var-color-neutral-darker: #333333;
+$scss-var-color-status-error-light: #fd0826;
+$scss-var-color-status-error-lightest: #ffe3e6;
+$scss-var-color-status-error-dark: #d0021b;
+$scss-var-color-status-error-darkest: #ae0216;
+$scss-var-color-status-error-base: #e1021d;
+$scss-var-color-status-success-light: #6ac52d;
+$scss-var-color-status-success-lightest: #f0faea;
+$scss-var-color-status-success-dark: #549b24;
+$scss-var-color-status-success-darkest: #40791B;
+$scss-var-color-status-success-base: #5ba927;
+$scss-var-color-status-info-light: #ffc442;
+$scss-var-color-status-info-lightest: #fff7e5;
+$scss-var-color-status-info-dark: #f4aa08;
+$scss-var-color-status-info-darkest: #946500;
+$scss-var-color-status-info-base: #ffb411;
+$scss-var-size-baseline: 4px;
+$scss-var-size-breakpoint-sm: 400px;
+$scss-var-size-breakpoint-md: 600px;
+$scss-var-size-breakpoint-lg: 1008px;
+$scss-var-size-breakpoint-xl: 1280px;
+$scss-var-size-gutter-width: 20px;
+
+$tokens: (
+  'color': (
+    'neutral': (
+      'white': $scss-var-color-neutral-white,
+      'black': $scss-var-color-neutral-black,
+      'base': $scss-var-color-neutral-base,
+      'light': $scss-var-color-neutral-light,
+      'lighter': $scss-var-color-neutral-lighter,
+      'lightest': $scss-var-color-neutral-lightest,
+      'darker': $scss-var-color-neutral-darker
+    ),
+    'status': (
+      'error': (
+        'light': $scss-var-color-status-error-light,
+        'lightest': $scss-var-color-status-error-lightest,
+        'dark': $scss-var-color-status-error-dark,
+        'darkest': $scss-var-color-status-error-darkest,
+        'base': $scss-var-color-status-error-base
+      ),
+      'success': (
+        'light': $scss-var-color-status-success-light,
+        'lightest': $scss-var-color-status-success-lightest,
+        'dark': $scss-var-color-status-success-dark,
+        'darkest': $scss-var-color-status-success-darkest,
+        'base': $scss-var-color-status-success-base
+      ),
+      'info': (
+        'light': $scss-var-color-status-info-light,
+        'lightest': $scss-var-color-status-info-lightest,
+        'dark': $scss-var-color-status-info-dark,
+        'darkest': $scss-var-color-status-info-darkest,
+        'base': $scss-var-color-status-info-base
+      )
+    )
+  ),
+  'size': (
+    'baseline': $scss-var-size-baseline,
+    'breakpoint': (
+      'sm': $scss-var-size-breakpoint-sm,
+      'md': $scss-var-size-breakpoint-md,
+      'lg': $scss-var-size-breakpoint-lg,
+      'xl': $scss-var-size-breakpoint-xl
+    ),
+    'gutter-width': $scss-var-size-gutter-width
+  )
+);

package/src/scss/constants/_vars.scss

@@ -0,0 +1,4 @@
+$breakpoints: map-get(map-get($tokens, 'size'), 'breakpoint');
+
+$scss-var-size-half-gutter-width: $scss-var-size-gutter-width * 0.5;
+$scss-var-size-quarter-gutter-width: $scss-var-size-gutter-width * 0.25;