CSS v2.0.0 & Design Tokens v2.2.0

CSS v2.0.0

Features 🚀

• New Toast component added
• New Search Input component added
• New design for Notification components and also added 'light' variations
• New design for Pill component
• Width: added responsive percentage width classes
• Grid class .made-l-grid
  mastercard-made-css-2.0.0.tgz
  added margin-left: auto and margin-right: auto to centre align the grid by default
• Color property of class .made-u-link--on-dark changed from token --made-color-text-default-on-dark to new token --made-link-color-on-dark
• Outline colour for focused links on a dark background .made-u-link--on-dark changed token from --made-color-action-border-focus to --made-color-action-border-focus-on-dark
• Text color for a Disabled Primary Button on Dark Background changed token from --made-color-action-text-on-disabled to token --made-color-action-text-on-dark
• Color of text for Branding on Dark Background changed from token --made-color-text-default-on-dark to token --made-header-color-text
• Outline colour for Primary Button on Dark Background changed from token --made-color-action-border-focus to token --made-color-action-border-focus-on-dark
• Added new focus outline colour for Primary Button on Dark Background .made-c-button--primary-on-dark:focus
• Background colour for Disabled Button Primary on Dark Background token changed from --made-color-action-background-disabled to token --made-color-action-disabled-button
• Border colour and text colour of the Disabled Button Secondary changed to token --made-color-action-disabled-button
• Text colour of the Disabled Ghost button changed token from --made-color-action-text-disabled to --made-color-action-disabled-button
• Text colour of class .made-c-footer, .made-c-footer__link, .made-c-footer__link--navigation, .made-c-footer__title changed token from --made-color-text-default-on-dark to --made-footer-color-text
• Text colour of .made-c-form__label--error. .made-c-form__label--success, .made-c-form__label--error changed to token --made-color-text-default-on-light
• Removed button .made-c-modal__close and replaced it with a reusable close button .made-c-button-close. Removed deprecated margin classes on the buttons in the modal and replaced with new margin classes
• Refactored the HTML and CSS for the Multi Select component
• Text input disabled state removed opacity property, and background colour and border tokens changed to --made-color-action-disabled-text-input and colour property added with a value of --made-color-action-disabled
• Tour component close button class changed to resuable close button .made-c-button-close, close icon class changed to .made-c-button-close__icon and width classes in HTML refactored to remove deprecated width classes and applied the new width classes
• Font weight for the strong tag changed from --made-font-body-weight-bold to --made-font-body-weight-default

Fixes 🐛

• Spacing: Removed deprecated space classes eg. .made-u-margin-top-0-x--md, .made-u-margin-top-0-x--lg etc.
• Width: removed deprecated width classes
• Typography: Removed the color property from the p tag, now inherits from body
• Removed chaining from a.made-u-link--disabled class changed to .made-u-link--disabled
• Removed the classes .made-c-overflow-menu__link-title and .made-c-overflow-menu__link--multiline as not being used by any components
• Grid offset classes that use percentage widths are now rounded up to 4 numbers after the decimal point
• Removed chaining from th.made-c-table__header--sortable class changed to .made-c-table__header--sortable
• Toggle component class .made-c-toggle__slider background colour token changed to --made-color-action-background-off for default state and disabled state changed to --made-color-action-background-on
• Tooltip changed -webkit-transform to transform and removed browser prefixes
• Tooltip added width: max-content; to the class .made-c-tooltip so when a large amount of text is in the tooltip the width of it is not too narrow
• Removed class .made-c-tour__link from the Tour component
• Pagination removed the deprecated margin class on the component and changed to new margin class .made-u-margin-left--md-2-x
• Carousel component removed deprecated margin class from the HTML of the component and replaced it with the current margin class .made-u-width--md-50 on .made-c-carousel__img, .made-c-carousel__content. And on .made-c-carousel__actions updated it to .made-u-margin-top--md-8-x
• Carousel component replaced the .made-c-modal__icon with reusable .made-c-button-close__icon
• Added tabindex="0" to Action Bar, Breadcrumb, Footer, Overflow Menu, Overflow Menu, Tabs, components to fix focus outline not appearing in Safari
• Overflow Menu with Icons component long text string now no longer overflows the menu
• Responsive Button can now use an icon in it
• Action Bar with Overflow Menu the first dropdown menu now aligns to the left
• Tabs component on hover font weight does not change to bold

Design Tokens v2.2.0

Features 🚀

New tokens added:

• made-color-action-border-focus-on-dark
• made-color-action-disabled-button
• made-color-action-disabled-text-input
• made-color-action-disabled-toggle
• made-color-background-01
• made-color-background-02
• made-color-background-inverse
• made-color-feedback-background-error-light
• made-color-feedback-background-information-light
• made-color-feedback-background-success-light
• made-color-feedback-border-error-light
• made-color-feedback-border-information-light
• made-color-feedback-border-success-light
• made-color-feedback-error-light
• made-color-feedback-information-light
• made-color-feedback-success-light
• made-color-feedback-text-on-error-light
• made-color-feedback-text-on-information-light
• made-color-feedback-text-on-success-light
• made-color-gray-02-5
• made-color-green-success-01
• made-color-green-success-02
• made-color-green-success-03
• made-color-green-success-04
• made-color-green-success-05
• made-color-green-success-06
• made-color-green-success-07
• made-color-red-error-01
• made-color-red-error-02
• made-color-red-error-03
• made-color-red-error-04
• made-color-red-error-05
• made-color-red-error-06
• made-color-red-error-07
• made-color-text-inverse
• made-footer-color-text
• made-header-color-text
• made-link-color-on-dark
• made-pill-color-background-default
• made-pill-color-background-hover
• made-search-action-color-background-default
• made-search-action-color-background-hover
• made-search-color-background

Fixes 🐛

Changed tokens values:

• made-color-action-text-on-selected-hover value changed from made-color-action-primary-default to made-color-text-default-on-light

• made-color-action-text-on-selected value changed from made-color-action-primary-default to made-color-text-default-on-light

• made-color-feedback-text-on-information value changed from made-color-text-default-on-dark to made-color-yellow-07

• made-font-family-eyebrow value changed from MarkOffcForMC-Bold, MarkOffcForMC, Arial, Helvetica, sans-serif to made-font-family-bold
  mastercard-made-css-2.0.0.tgz

• made-font-family-heading value changed from MarkOffcForMC-Light, MarkOffcForMC, Arial, Helvetica, sans-serif to made-font-family-light

• made-font-heading-weight-eyebrow-01 value changed from made-font-weight-default to made-font-weight-bold

• made-font-heading-weight-eyebrow-02 value changed from made-font-weight-default to made-font-weight-bold