@RVMendoza RVMendoza released this Jan 4, 2019 · 105 commits to master since this release

January 4th, 2019

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

Summary

This release added new styles for Masthead, Footer, Links, Alerts, and Accordions. This release also added a namespace to all Spark variables.

https://january-4-2019.sparkdesignsystem.com/

Version Details

View the Corresponding npm Package Versions

  • spark-core: v9.0.0
  • spark-card: v4.0.1
  • spark-highlight-board: v4.0.1
  • spark-description-table: v3.1.8
  • spark-core-angular: v7.0.0
  • spark-extras-angular-award: v3.0.8
  • spark-extras-angular-card: v3.0.7
  • spark-extras-angular-dictionary: v3.0.7
  • spark-extras-angular-highlight-board: v3.0.7

Component Updates

Links

  • BREAKING: .sprk-b-Link--standalone was removed (Angular as well)
  • A new link style .sprk-b-Link--simple exists. It's for link that don't need underline (except for hover)
  • Muted link styles no longer exist
  • Any link that contains an icon now needs an icon modifier .sprk-b-Link--has-icon

Footer

  • BREAKING: Layout pattern changes, you will have to reimplement (Angular as well)
  • Adds misc spacing to stack objects
  • Adds two new Grid spacing sizes of 3/10 and 7/10

Old:
footer-old
New:
screen shot 2019-01-07 at 8 44 25 am

Masthead

  • BREAKING: Layout changes, you will have to reimplement (Angular as well)
  • Updates structure, presentation, and interaction
  • Added .sprk-c-Masthead--scroll modifier that sets styles for the masthead when the user scrolls past it.

Default Old:
masthead-old
Default New:
masthead-new
Extended Old:
masthead-big-nav-old
Extended New:
masthead-big-nav-new

Input

  • Labels no longer animate
  • Inputs have borders

BREAKING CHANGE: Input Upgrade Guide

  • Remove the whole div that hassprk-b-InputContainer__input-borderfrom each implementation
  • Move the label above the input

Text Input Old:
screen shot 2019-01-07 at 8 55 14 am

Text Input New:
input-new

Alerts

  • Update design of alerts
  • Added an option that can't be closed

Old:
alert-old
New:
alert-new

Dividers

  • Updates color and thickness

Accordion

  • Heading is no longer bold when open
  • Thicker borders
  • Change SVGs used (will be a blank placeholder until SVGs are updated)

Dropdown

  • Adds a border radius
  • Border color changes
  • Box shadow changes

Variable Updates

  • BREAKING: Added a namespace to ALL Spark variables.
    • All variables now begin with sprk-

Removed Sass Variables

Masthead Variables

$sprk-narrow-nav-left-border
$sprk-narrow-nav-link-font-weight
$sprk-dropdown-header-padding

Input Variables

$sprk-input-gray-medium
$sprk-input-placeholder-color
$sprk-input-readonly-text-color
$sprk-text-input-border-width
$sprk-input-container-margin-bottom
$sprk-input-disabled-background-color
$sprk-input-disabled-border-color
$sprk-input-disabled-text-color
$sprk-helper-text-hidden
$sprk-input-readonly-border-color
$sprk-input-error-box-shadow
$sprk-input-box-shadow
$sprk-input-disabled-box-shadow
$sprk-date-picker-day-interact-color
$sprk-date-picker-font-family
$sprk-text-input-interact-color
$sprk-text-input-error-color
$sprk-input-max-width
$sprk-input-animation-speed
$sprk-select-arrow-offset-y
$sprk-select-arrow-offset-x
$sprk-label-offset-y
$sprk-label-shrink-scale

Link Variables

$sprk-link-muted-color
$sprk-link-muted-underline-width
$sprk-link-muted-hover-underline-color
$sprk-link-muted-hover-border-bottom

New Sass Variables

Typography Variables

$sprk-page-title-mark-color
$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

Spacing Variables

$sprk-stack-spacing-misc-a
$sprk-stack-spacing-misc-b
$sprk-stack-spacing-misc-c
$sprk-stack-spacing-misc-d

Divider Variables

$sprk-divider-color

Link Variables

$sprk-link-font-weight
$sprk-link-text-decoration
$sprk-link-border-bottom-style
$sprk-link-border-bottom
$sprk-link-hover-border-bottom
$sprk-link-hover-color
$sprk-link-visited-border-bottom
$sprk-link-simple-color
$sprk-link-simple-underline-color
$sprk-link-simple-underline-width
$sprk-link-simple-font-weight
$sprk-link-simple-hover-color
$sprk-link-simple-hover-underline-width
$sprk-link-simple-hover-underline-color
$sprk-link-simple-border-bottom
$sprk-link-simple-visited-border-bottom
$sprk-link-simple-hover-border-bottom
$sprk-link-has-icon-color
$sprk-link-has-icon-font-weight
$sprk-link-has-icon-underline-width
$sprk-link-has-icon-underline-color
$sprk-link-has-icon-border-bottom
$sprk-link-has-icon-hover-border-bottom
$sprk-link-muted-underline-width
$sprk-link-muted-hover-underline-color
$sprk-link-muted-hover-border-bottom
$sprk-link-plain-border
$sprk-link-plain-visited-border
$sprk-link-disabled-underline-width
$sprk-link-disabled-border-bottom
$sprk-link-disabled-hover-border-bottom

Masthead Variables

$sprk-masthead-content-item-padding-top
$sprk-masthead-content-item-padding-bottom
$sprk-masthead-content-item-padding-right
$sprk-masthead-content-item-padding-left
$sprk-masthead-content-padding-wide
$sprk-masthead-content-item-padding-top-wide
$sprk-masthead-content-item-padding-bottom-wide
$sprk-masthead-content-item-padding-right-wide
$sprk-masthead-content-item-padding-left-wide
$sprk-masthead-border-bottom-wide
$sprk-masthead-site-links-border-right
$sprk-big-nav-link-color
$sprk-big-nav-link-font-weight
$sprk-big-nav-link-padding
$sprk-big-nav-item-line-height
$sprk-masthead-shadow
$sprk-masthead-shadow-wide
$sprk-masthead-selector-border
$sprk-masthead-selector-font-weight
$sprk-masthead-selector-border-radius
$sprk-masthead-selector-font-color
$sprk-masthead-selector-padding
$sprk-masthead-selector-min-width
$sprk-masthead-accordion-active-left-border
$sprk-masthead-accordion-active-heading-font-weight
$sprk-masthead-accordion-active-heading-color
$sprk-masthead-accordion-heading-font-weight
$sprk-masthead-accordion-details-font-weight
$sprk-masthead-accordion-details-font-color
$sprk-masthead-accordion-active-background-color
$sprk-masthead-accordion-active-font-color
$sprk-masthead-accordion-font-color
$sprk-masthead-accordion-item-open-line-background-color
$sprk-masthead-accordion-item-open-line-height
$sprk-masthead-accordion-item-padding

Dropdown Variables

$sprk-dropdown-font-weight
$sprk-dropdown-title-font-weight
$sprk-dropdown-header-color

Input Variables

$sprk-input-container-margin
$sprk-input-max-width
$sprk-text-input-font-family
$sprk-text-input-font-size
$sprk-text-input-font-weight
$sprk-text-input-height
$sprk-text-input-line-height
$sprk-text-input-outline
$sprk-text-input-color
$sprk-text-input-border-color
$sprk-text-input-border
$sprk-text-input-box-shadow
$sprk-text-input-focus-border-color
$sprk-text-input-error-border-color
$sprk-text-input-disabled-border-color
$sprk-text-input-disabled-background-color
$sprk-text-input-disabled-box-shadow
$sprk-text-input-disabled-color
$sprk-text-input-readonly-border-color
$sprk-text-input-readonly-color
$sprk-text-input-transition
$sprk-select-appearance
$sprk-select-background
$sprk-select-border
$sprk-select-focus-border-color
$sprk-select-error-border-color
$sprk-select-border-radius
$sprk-select-box-shadow
$sprk-select-color
$sprk-select-font-size
$sprk-select-font-family
$sprk-select-font-weight
$sprk-select-line-height
$sprk-select-outline
$sprk-select-padding
$sprk-select-arrow-offset-y
$sprk-select-arrow-offset-x
$sprk-select-arrow-stroke-width
$sprk-select-disabled-border-color
$sprk-select-disabled-background-color
$sprk-select-disabled-color
$sprk-textarea-min-height
$sprk-textarea-margin
$sprk-textarea-padding
$sprk-text-input-error-color
$sprk-input-error-text-color
$sprk-input-error-text-font-family
$sprk-input-error-text-font-weight
$sprk-input-error-text-font-size
$sprk-input-error-text-line-height
$sprk-input-error-text-margin
$sprk-error-container-margin
$sprk-error-icon-size
$sprk-helper-color
$sprk-helper-font-size
$sprk-helper-font-family
$sprk-helper-font-weight
$sprk-helper-line-height
$sprk-helper-margin
$sprk-placeholder-color
$sprk-placeholder-font-size
$sprk-placeholder-font-family
$sprk-placeholder-font-weight
$sprk-selection-container-margin
$sprk-selection-container-label-font-weight
$sprk-selection-container-input-height
$sprk-selection-container-input-width
$sprk-selection-container-input-margin
$sprk-date-picker-border-radius
$sprk-date-picker-font-size
$sprk-date-picker-font-weight
$sprk-date-picker-selected-day-font-weight
$sprk-date-picker-day-interact-color
$sprk-date-picker-background
$sprk-date-picker-padding
$sprk-date-picker-padding-wide
$sprk-date-picker-header-border
$sprk-date-picker-header-font-size
$sprk-date-picker-header-font-weight
$sprk-date-picker-header-padding
$sprk-date-picker-col-header-paddin
$sprk-date-picker-day-padding
$sprk-date-picker-day-margin
$sprk-date-picker-day-color
$sprk-date-picker-day-hover-color
$sprk-date-picker-day-edge-day-color
$sprk-date-picker-month-year-font-size
$sprk-date-picker-arrow-color
$sprk-date-picker-modal-margin
$sprk-date-picker-modal-margin-wide
$sprk-date-picker-modal-z-index
$sprk-date-picker-years-modal-max-height
$sprk-text-input-has-icon-padding
$sprk-input-icon-z-index
$sprk-input-text-icon-offset-x
$sprk-input-text-icon-font-size
$sprk-input-text-icon-font-weight
$sprk-text-input-has-text-icon-padding
$sprk-input-text-icon-z-index
$sprk-label-padding
$sprk-label-font-family
$sprk-label-font-size
$sprk-label-font-weight
$sprk-label-line-height
$sprk-label-margin
$sprk-visibility-control-margin
$sprk-visibility-control-label-font-size
$sprk-label-disabled-color

Assets 2