Skip to content

Latest commit

 

History

History
233 lines (171 loc) · 8.67 KB

migrate-to-10.x.md

File metadata and controls

233 lines (171 loc) · 8.67 KB
Raw

src/globals/scss

IMPORTANT NOTE: Most of deprecated variables, mixins and functions will be removed soon after the initial v10 release.

Table of Contents

_colors.scss

$color__ variables are deprecated. Migration table available here.

_css--body.scss

No change

Internals

Toggle on feature flag for font-family mixin

_css--font-face.scss

File now relies on @carbon/elements for bringing in font files for IBM Plex. It is still recommended to use a CDN for serving IBM Plex.

Helvetica Neue

Usage of helvetica-font-face is deprecated. Please set $css--plex: true before importing carbon-components to make sure IBM Plex is loaded instead of Helvetica Neue.

No longer shipping font files for Helvetica Neue

_css--plex-core.scss

Notable changes:

  • IBM Plex fonts now come from Carbon Elements
  • The CDN for IBM Plex font files is now Google Fonts, we still recommend using your own for production
v9 v10
$font-path ☠️ Removed
$unicodes ☠️ Removed
$families ☠️ Removed, use $carbon--font-families instead
$fallbacks ☠️ Removed, use $carbon--font-families instead
$weights ☠️ Removed, use $carbon--font-weights instead
check-default-font-path ☠️ Removed
plex-font-face ☠️ Removed

_css--reset.scss

No change

_css--typography.scss

Classes have been replaced with Type styles. Below is a rough conversion table if you would still like to use the classes.

Type class v9 v10
Giga 76px display-03
Mega 54px display-01
Alpha 36px productive-heading-05
Beta 28px productive-heading-04
Gamma 20px heading-03
Delta 18px heading-02
Epsilon 16px heading-01
Zeta 14px N/A
Omega 12px N/A
Caption 12px caption-01
Legal 11px caption-01
Paragraph 16px body-long-02

For full details, please check our our v10 migration guide for type.

_feature-flags.scss

No change

Internals

  • Remove experimental grid options
  • Eventually remove feature flags

_functions.scss

No change

_helper-classes.scss

No change

_helper-mixins.scss

  • light-ui removed

Internals

  • Remove light-ui
  • Replace usage of brand-01

_import-once.scss

No change

_layer.scss

  • Removed, replaced with box-shadow mixin

Internal

  • Change box shadow color to read from token

_layout.scss

Replaced with @carbon/grid

v9 v10
$breakpoints ☠️ Deprecated, please use $carbon--grid-breakpoints
$padding ☠️ Deprecated
padding ☠️ Deprecated
breakpoint ☠️ Deprecated, please use carbon--breakpoint instead
max-breakpoint ☠️ Deprecated, please use carbon--breakpoint-down isntead
grid-container ☠️ Deprecated, please use carbon--grid or carbon--make-container instead
$z-indexes No change
z No change

_mixins.scss

No change

_motion.scss

New in v10. For full details, please check out our migration guide.

_spacing.scss

Spacing scale no longer uses t-shirt sizing, instead uses a scale approach (ref: https://github.com/IBM/carbon/blob/v0.0.1-beta.1/docs/migration/10.x-layout.md#migrating).

v9 v10 (spacing scale step)
spacing-4xs 0
spacing-3xs 1
spacing-2xs 2
spacing-xs 3
spacing-sm 4
spacing-md 5
spacing-lg 6
spacing-xl 7
spacing-2xl 8
spacing-3xl 9
layout-2xs 5
layout-xs 6
layout-sm 7
layout-md 8
layout-lg 9
layout-xl 11
layout-2xl N/A

_theme-tokens.scss

Migration table available here.

_theme.scss

No change

_typography.scss

v9 v10
$font-family-* ☠️ Deprecated, please use $carbon--font-families instead
$base-font-size ☠️ Deprecated, please use $carbon--base-font-size instead
$typescale-map ☠️ Deprecated, please use carbon--$type-scale instead
typescale mixin ☠️ Deprecated, please use carbon--type-scale instead
rem mixin No change
em mixin No change
helvetica mixin ☠️ Deprecated
font-family mixin ☠️ Deprecated, please use carbon--font-family instead
line-height mixin ☠️ Deprecated
font-smoothing mixin ☠️ Deprecated
letter-spacing mixin ☠️ Deprecated
$font-size-map ☠️ Deprecated
font-size mixin ☠️ Deprecated

For full details, please check our our v10 migration guide for type.

_vars.scss

v9 v10
$bx--ease-* (Deprecated) Removed (Or defined as null)
$bx--standard-easing (Deprecated) Removed (Or defined as null)