Skip to content

v6.0.0

Compare
Choose a tag to compare
@bryanjos bryanjos released this 12 Feb 23:46
· 66 commits to master since this release
cf6f33b

[6.0.0] - 2020-02-12

  • Add Design Tokens. These will allow for the application of Harmonium's styles in more than just web applications.
  • Renamed many of the top-level sass variable names. Below is a chart cataloging the changes
Before After
$test $color-test
$brand $color-brand-primary
$brand-secondary $color-brand-secondary
$brand-tertiary $color-brand-tertiary
$white $color-white
$white-0 $color-white-0
$white-03 $color-white-03
$white-06 $color-white-06
$white-10 $color-white-10
$white-20 $color-white-20
$white-30 $color-white-30
$white-40 $color-white-40
$white-50 $color-white-50
$white-60 $color-white-60
$white-70 $color-white-70
$white-80 $color-white-80
$white-90 $color-white-90
$lightest-gray $color-lightest-gray
$lighter-gray $color-lighter-gray
$light-gray $color-light-gray
$gray $color-gray
$dark-gray $color-dark-gray
$darker-gray $color-darker-gray
$black $color-black
$black-0 $color-black-0
$black-03 $color-black-03
$black-06 $color-black-06
$black-10 $color-black-10
$black-20 $color-black-20
$black-30 $color-black-30
$black-40 $color-black-40
$black-50 $color-black-50
$black-60 $color-black-60
$black-70 $color-black-70
$black-80 $color-black-80
$black-90 $color-black-90
$primary $color-ui-primary
$success $color-ui-success
$alert $color-ui-alert
$warning $color-ui-warning
$error $color-ui-error
$divider-color $color-divider
$divider-color-dark $color-divider-dark
$divider-color-light $color-divider-light
$muted $color-muted
$very-muted $color-very-muted
$disabled $color-disabled
$small $screen-width-small
$medium $screen-width-medium
$large $screen-width-large
$xlarge $screen-width-xlarge
$xxlarge $screen-width-xxlarge
$nav $screen-width-nav
$global-width $screen-width-full
$global-monospace-font $font-family-monospace
$global-serif-font $font-family-serif
$global-sans-serif-font $font-family-sans-serif
$global-font-size $font-size-base
$global-font-size-smaller $font-size-smaller
$global-font-size-small $font-size-small
$global-font-size-medium $font-size-medium
$global-font-size-large $font-size-large
$global-font-size-larger $font-size-larger
$global-font-size-largest $font-size-largest
$global-weight-light $font-weight-light
$global-weight-normal $font-weight-normal
$global-weight-bold $font-weight-bold
$global-lineheight $line-height-global
$base-lineheight $line-height-base
$global-vertical-space $spacing-base
$global-horizontal-space $spacing-base
$base-size $spacing-base
$global-padding-tiny $padding-tiny
$global-padding-small $padding-small
$global-padding-large $padding-large
$global-padding-larger $padding-larger
$global-padding $padding-base
$global-margin-tiny $margin-tiny
$global-margin-small $margin-small
$global-margin-large $margin-large
$global-margin-larger $margin-larger
$global-margin $margin-base
$global-radius $border-radius-small
$global-rounded $border-radius-rounded
$color-disabled-opacity $opacity-disabled
$global-box-shadow $box-shadow-default
$global-box-hover $box-shadow-hover
$global-box-active $box-shadow-active
$image-blur $blur-enabled
$no-image-blur $blur-disabled
$size-tiny $icon-size-tiny
$size-small $icon-size-small
$size-default $icon-size-base
$size-large $icon-size-large
$size-larger $icon-size-larger
$size-largest $icon-size-largest
$above-everything $z-index-above-everything
$above-most $z-index-above-most
$above $z-index-above
$default $z-index-default
$below $z-index-below
$below-most $z-index-below-most
$below-everything $z-index-below-everything
  • Added new variables for spacing. These control the spacing for padding and margins
    • $spacing-base
    • $spacing-tiny
    • $spacing-small
    • $spacing-medium
    • $spacing-large
    • $spacing-larger