@afebbraro afebbraro released this Dec 21, 2018 · 300 commits to master since this release

December 21st, 2018

Spark Design System published releases to all packages on this date. Details can be read below.

Summary

This release updated Buttons, Typography, Cards and added new misc Spacing sizes.

https://december-21-2018.sparkdesignsystem.com/

Version Details

View the Corresponding npm Package Versions

  • spark-core: v8.0.0
  • spark-card: v4.0.0
  • spark-highlight-board: v4.0.0
  • spark-description-table: v3.1.7
  • spark-core-angular: v6.0.3
  • spark-extras-angular-award: v3.0.7
  • spark-extras-angular-card: v3.0.6
  • spark-extras-angular-dictionary: v3.0.6
  • spark-extras-angular-highlight-board: v3.0.6

General

  • Adds new misc Spacing sizes.
  • Updates Typography.
  • Updates Buttons.
  • Updates Docs.
  • Updates Cards.

Breaking Changes Vanilla

  • Spark Core has new markup in the components for new typography changes and component updates.
  • Card has variables removed/updated.
  • Highlight board has updated type classes in HTML.
  • Removed TypeDisplayEight.

Breaking Changes Angular

  • NONE, only a patch update to account for new spark-core v8 dependency.

Removed Sass Vars

$card-border
$btn-tertiary-border-color (now $btn-tertiary-border)
$pag-breakpoint (was unused)
$card-max-width (now $sprk-card-max-width)
$card-shadow (now $sprk-card-shadow)

New Sass Vars

$sprk-card-max-width
$sprk-card-breakpoint
$sprk-card-shadow
$sprk-card-shadow-wide-viewport
$sprk-card-shadow-standout
$sprk-card-shadow-standout-wide-viewport
$sprk-card-border-radius
$sprk-card-content-padding
$sprk-card-header-bg-color
$sprk-card-header-text-color
$sprk-space-misc-a
$sprk-space-misc-b
$sprk-space-misc-c
$sprk-space-misc-d
$sprk-alert-dismiss-padding
$sprk-alert-icon-margin
$sprk-alert-font-size
$sprk-alert-line-height
$sprk-alert-font-weight
$sprk-accordion-summary-padding
$sprk-accordion-content-padding
$sprk-date-picker-font-family
$sprk-masthead-link-font-weight
$sprk-masthead-link-visited-color
$sprk-masthead-link-hover-color
$sprk-measure
$sprk-narrow-measure
$sprk-using-webfonts
$sprk-font-display
$sprk-webfonts
$sprk-page-title-mark-width
$sprk-page-title-mark-height
$sprk-page-title-mark-height-wide-viewport
$sprk-page-title-mark-padding
$sprk-page-title-mark-padding-wide-viewport
...Lots of Type var changes....See documentation
$btn-secondary-letter-spacing
$btn-letter-spacing
$btn-disabled-shadow
$btn-secondary-disabled-background-color
$btn-secondary-disabled-text-color
$btn-secondary-disabled-border-color
$btn-secondary-disabled-shadow
$btn-tertiary-disabled-shadow
$btn-tertiary-disabled-border
$btn-tertiary-text-color
$btn-tertiary-underline-width
$btn-tertiary-underline-padding-top
$btn-tertiary-underline-color
$sprk-date-picker-font-family
$sprk-table-header-font-weight
$sprk-tab-navigation-btn-font-size
$sprk-tab-navigation-btn-font-weight
$sprk-dictionary-label-font-size
$sprk-dictionary-label-font-weight
$sprk-dictionary-label-line-height

Component Updates

Accordions

  • Update spacing in accordions.

Alerts

  • Add new type class to alert content (.sprk-c-Alert__text).
  • New spacing update.

Buttons

  • Updates tertiary button underline width to 2px.
  • Updating all styles for buttons. We are moving away from red as our primary color.
  • Add Disabled Secondary and Disabled Tertiary styles.

Card

  • Add new Highlighted Header variant.
  • Add new Standout variant.
  • Update Card styles.
  • Add sprk-c-Card__media class to media.

Typography

  • Add vars so the Page Title style line color can be changed.
  • Removes the concept of body / heading / alternate fonts and the associated vars.
  • Decouples from scalescss-base-typography.
  • Removes font-face observer and associated js / tests.
  • Updates type settings to reflect updated design.
  • Adds the ability to specify mobile values and breakpoints for TypeDisplayOne, TypeDisplayTwo and - - -TypeDisplayThree.
  • Renames font urls and family from 'FallSans' to 'RocketSans'.
  • Updates type settings in various components:
    • dictionary
    • dropdown
    • alert
    • accordion
    • highlight-board
    • modals
    • tables
    • tabbed nav

Color

  • Color values have been modified.

Utilities

  • Add new sprk-u-Measure, sprk-u-Measure--narrow (added because of the drop of Scales Type)
  • Add new Misc spacing utils, EX. sprk-u-PaddingTop--a (see documentation for all that are available)

Modals

  • Fixed modal tests bug.

Masthead

  • Fixes masthead color bugs.
  • Adds vars for masthead links.

Screenshots

Old vs. New Buttons

screen shot 2018-12-21 at 2 36 18 pm

Old vs. New Cards

screen shot 2018-12-21 at 2 50 21 pm

Old vs. New Display Headings

screen shot 2018-12-21 at 2 52 50 pm

Assets 2