Style Dictionary

• Complete overhaul using amzn/style-dictionary
• Clarified variable structure
• Added JS exports for color variables
• Mixins have moved to jwplayer/design-library-extensions

@design Scoped Namespacing

• Added @design scoping to name on npm registry

Minor Update: NPM Registry Versioning

• Updated package.json to match semantic versioning tags in github
• Streamlines use of jw-design-library from the private npm registry

Design System Color Updates

Breaking Changes

• Legacy colors replaced with new Design System color variables. All variables will need to be updated.
• Adjusted icon sizings so ds-icon-xs is now 12px and added ds-icon-xxs for 8px

New Icon

• copy.svg and updated icons-dashboard.svg sprite

Optimizations

• Code color variables have been decoupled from brand colors to optimize specifically for syntax highlighting on dark backgrounds.

Mixins & Variables Update / New Code Font

Optimizations

• Mixin & variable file structure organization
• Separate folder for files that output CSS
• .ds-font-imports() mixin encapsulates all google font imports
• .flex() and .square() layout helpers
• data-colors mixins no longer invoked in-file
• New google font for .ds-font-code

Breaking Changes

• Updated name-spacing: all mixins are now prefixed with .ds-, ex: .ds-font-smoothing(on)
• Font imports must now be invoked where you plan to use the variables, ex:

body {
   .ds-font-imports();
   font-family: @ds-font-custom;
}

Patch for Publish Icon

Patch

Re-exported publish icon to preserve viewBox for normalized sizing

New Icons and Data Typeface

New Icons

• Publish
• More

New Font

• Lato - A typeface for usage on numerical data only
• Includes:
  • Regular, 400
  • Bold, 700
  • Black, 900

Font Smoothing Mixins and Deprecated Namespacing

Deprecated Namespacing

The prefix jw- is no longer used on any variables or classes. The prefix ds- will be used moving forward.

Impacted files:

• brand-colors.less
• data-colors.less
• fonts.less
• brand-colors.less
• mixins.less

Optimization

The mixins.less file now includes support for enabled or resetting font-smoothing.

• .font-smoothing(on)
• .font-smoothing(off)

New Assets and Icon Optimization

New design assets and an optimization for avoiding potential conflicts with the player.

New Icons

• Split
• Undo

JW Player Logos

A new directory icons/logos was added within to support variations of our logo. The same icon usage guidelines apply to the logo svgs.

Files:

• jw-logo-full.svg - full version
• jw-logo-mark.svg - swoosh only

Classes:

• .ds-logo-full - 104 x 38px
• .ds-logo-mark - 24 x 25px

Sprite:

• logos.svg

Optimization

The namespacing jw-icon was deprecated and replaced with ds-icon to avoid any conflicts with our video player namespacing.

v1.4 Patch – Google Font Import Fix

• fonts.less now imports Open Sans as CSS to avoid Webpack/Less path resolver issues