CSS v3.0.0 & Design Tokens v2.3.0

Changelog

CSS

v3.0.0

Breaking Changes ⚠️

• Grid - removed max width, grid is now 100% width.
• Overflow menu: Removed .made-c-overflow-menu__multiselect-item.made-c-checkbox__label::after class the positions checkbox in overflow menu

Visual Breaking Changes ⚠️

• Accordion - removed width and height for accordion icon to align with new system icons
• Range slider label now aligns with other form labels using made-c-form__label class.
• Search: add color for placeholder, added disabled color for icon, updated.made-c-search-input__search-icon class to align with new system icons
• Select: add color for placeholder, added disabled color for icon, updated.made-c-select__button class to align with new system icons

Features 🚀

• Accordion - added padding to the left of title and description, new disabled styling
• Button - New styles for new button icon only .made-c-button--icon-only. Updated padding for buttons with icons to align with other variants. Added new button class to reset styles.
• Checkbox - New styles for checkbox and new variant for unbranded checkboxes
• Form - add new styles to support icons with validation text and colour for placeholder text
• Loading Indicator: Updated icon width and added new styles to support loading state in button
• Pill: add min height to pill
• Table: updated icon for border resize, this is not a button and not a background image
• Text Input: add color for placeholder, added disabled color for icon, add class for text input with icon
• Text area: add color for placeholder,
• Toggle: added styles for small toggle, updated width of toggle

---

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

---

v1.2.1

Fixes 🐛

• Set aria-disabled to true
• Add styles for tour to override tooltip styles

---

v1.2.0

Features 🚀

• Grid Offfset: Move columns to the right along the grid using offset column classes
• Aria Disabled: Aria disabled attribute now styled the same as the disabled attribute
• Accessibility Utility Classes to hide an element visually without hiding it from screen readers
• Display Utility Classes to control the display box type of an element ranging from block, flex, table, inline etc.
• Flex Classes to apply responsive flex utility classes to create various flex styles for controlling layout of elements
• Opacity utilities for controlling the opacity of an element ranging from 0, 15, 25, 50, 75, 100
• Text Styling Utility Classes for common text styling to control styles, alignment, whitespace and wrapping
• Vertical Align utilities to control the vertical alignment of an inline or table-cell box
• Tooltip: A new trigger element has been added to the tooltip component to enable the tooltip to be made visible or hidden on interaction
• Selected State: New selected state design tokens have been added and are used for the selected state colour in the data table and multi select components

Fixes 🐛

• Progress Stepper: Current step now themeable
• File Upload: Text no longer overflows on small screen and spacing increased between file name and link
• Text Input: Form label on success state now uses success colour instead of default colour
• Text Input: Line-height removed from validation label on error state
• Typography: Margin-bottom of paragraph changed from 20px to 16px
• Action Bar: Padding-left removed from first item
• Checkbox: Replaced check mark SVG icons with CSS now used to create them and enable theming
• Breadcrumb: Replaced arrow SVG icons with CSS now used to create them and enable theming
• Date Picker: Replaced arrow SVG icons with CSS now used to create them and enable theming
• Branding: Dark background class added

---

v1.1.0

Features 🚀

• Action bar
• Branding
• Date Picker
• General Close Button
• Overflow Menu (Multi-line with Icons)
• Password Strength Indicator
• Select (Multiple Select)

Fixes 🎨🐛

• Checkbox: removed margin-bottom from checkbox
• Pagination: focus state on buttons reduced

---

v1.0.0

Features 🚀

• Footer
• Carousel
• Scrollbar
• Breadcrumb
• Pagination
• Tour
• Progress...

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

CSS v1.2.1 & Design Tokens v2.1.1

CSS v1.2.1

All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

Features 🚀

• New styles for selected state on data table
• New offset grid column classes
• New styles for aria disabled attribute
• New utility classes for accessibility
• New utility classes for controlling the display of elements
• New utility classes for applying flexbox behaviors to elements
• New utility classes for controlling the opacity of elements
• New utility classes for common text styling to control styles, alignment, whitespace and wrapping
• New utility classes for controlling the vertical alignment of an inline or table-cell box
• New trigger element added for tooltip
• New selected colours for checked items in multi select

Fixes 🎨🐛

• Progress Stepper: Current step now themeable
• File Upload: Text no longer overflows on small screen and spacing increased between file name and link
• Text Input: Form label on success state now uses success colour instead of default colour
• Text Input: Line-height removed from validation label on error state
• Typography: Margin-bottom of paragraph changed from 20px to 16px
• Action Bar: Padding-left removed from first item
• Checkbox: Replaced check mark SVG icons with CSS now used to create them and enable theming
• Breadcrumb: Replaced arrow SVG icons with CSS now used to create them and enable theming
• Date Picker: Replaced arrow SVG icons with CSS now used to create them and enable theming
• Branding: Dark background class added

Design Tokens v2.1.1

Features

• New Tokens for global disabled colours
• New Tokens for interactive states hover and selected
• New Tokens for action colours
• New Tokens for brand secondary colours
• New Tokens for global colours
• New Tokens for Opacity 15 and 25 values
• New tokens - font family heading and eyebrow
• New tokens - font weight
• New token for made-letter-spacing-eyebrow
• New tokens for Line height single, default, heading
• New border radius tokens
• Token values are not cascaded in json format.
• Deprecated tokens are flagged and are now in dedicated depreacted file. If you need to continue using these tokens you will need to import seperately.
• Themeable tokens are flagged and are now in dedicated tokens file.

Fixes

• Global feedback colour changed name from color-brand- to color-feedback-
• Form token made-forms-color-border-default value change from gray 03.5 to gray 05
• Fallback fonts added to Font family token values
• made-color-feedback-error value changed to #EE0000
• made-color-feedback-success value changed to #038A00

Tokens to be deprecated

• Review Storybook documentation under Colors -> Deprecated tokens.
  Contact Made. Team is using any of these tokens and we can review timelines for removing deprecated tokens.