Skip to content

CSS v3.0.0 & Design Tokens v2.3.0

Latest
Latest
Compare
Choose a tag to compare
@miguel-hub miguel-hub released this 05 Mar 16:56
· 5 commits to main since this release
v3.0.0
f9a4367
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

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 Indicator (Steps Horizontal)
  • Card (Generic)
  • Pill
  • Overflow Menu (Multi-line)
  • Select (Searchable)
  • Compiled CSS including CSS custom properties (made-css-variables.css/made-css-variables.min.css/)
  • New made-u-body--small class and made-u-helper-text for styling body text

Fixes 🎨🐛

  • Tooltip: Removed line-height from tooltip to support multiple lines and Max-width added.
  • Spacing: All responsive classes (md, lg) renamed to e.g. made-u-margin-top--md-13-x to add consistency across library. .made-u-margin-top-9-x--md naming convention deprecated.
  • Width: All responsive classes (md, lg) renamed to e.g. made-u-width--md-13-x to add consistency across library. .made-u-width-9-x--md naming convention deprecated.
  • File Upload: Finder is now opened on click of the entire drop zone
  • Ghost Button: removed padding left and right from ghost button

v1.0.1-beta

Fixes 🐛

  • fix: Add fallback font for custom fonts

v1.0.0-beta 🚀

  • feat: Add core components

Design Tokens

2.3.0

New tokens added:

  • --made-checkbox-color-background-branded-selected
  • --made-checkbox-color-background-neutral-selected
  • --made-checkbox-icon-color-neutral-readonly
  • --made-checkbox-icon-color-neutral-default
  • --made-checkbox-icon-color-branded-readonly
  • --made-checkbox-icon-color-branded-default
  • --made-table-color-border-resize
  • --made-color-text-placeholder
New tokens added:

2.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
  • 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

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

v1.2.2-beta

Features 🚀

  • New Tokens for opacity
  • New token for made-color-background-gray-lightest. Used on Breadcrumb and Pill components.
  • New token for made-color-text-helper.
  • Deprecating: made-forms-color-text-placeholder: replace with the made-color-text-default-on-light token
  • Deprecating: made-forms-color-text-hint: replace with the made-color-text-helper token

v1.2.1-beta

Features 🚀

  • New Tokens for time
  • New tokens-variables.css file with css variables that inherit global tokens
  • New token for Primary Text Color
  • New token for Narrow Body Font
  • New tokens values for made-font-size-07 and above, new tokens added for 18px and 32px.

Fixes 🐛

  • Display 02 is now using Mark Font Light value
  • H5 and H6 is now using Mark Font Medium value
  • Size tokens now use rems
  • Form placeholder color is now gray 4

v1.1.1-beta

Features 🚀

  • Support for B2B Theme Web Design Tokens (NPM Module in Artifactory in CSS, CSS preprocessor and JSON formats).

v1.0.1

Features 🚀

  • Examples Project for iOS and Android.

v1.0.0

Features 🚀

  • Support for Android Color, Typography and Spacing Design Tokens (AAR file in Artifactory that you can use as a dependency for an Android app module).

  • Support for iOS Color, Typography and Spacing Design Tokens (available in an asset catalog as a colorset and Swift Formats).

Assets 2
Loading