v0.1.3-beta

What's Changed

Repo Updates

• Version in Docs #123 by @Jeremy-Walton
  • The documentation now includes the current version of the design system on the welcome page.
• Documentation dependency updates by @dependabot
  • Bump json5 from 1.0.1 to 1.0.2 #122

Refining Changes

• Colors and Scales #117 by @Jeremy-Walton
  • There were example colors (blue, green, yellow, etc) that existed but were not needed. They have been removed.
  • The alert colors are no longer based on those example colors. Instead they each (danger, warning, notice, info) have their own HSL values that can be set in your theme.
  • As we have used the color scales and needed to customize them, it was clear we needed more luminosity options. Instead of limiting ourselves to a set luminosity scale, we have removed those scales and set the semantic scales directly to luminosity values. This allows for much more flexibility in overriding as well as simplifying the number of tokens in the system. It also removes the potential for someone using one of those variables directly (which wasn't really the intention of it). You can still use an HSL value directly as needed but should name it so it can be handled in themes and theme modes. e.g. --rm-my-custom-component-color: hsl(var(--rm-color-primary-h), hsl(--rm-color-primary-s), 42%);
• Forms Revisited #118 by @Jeremy-Walton
  • All of the form classes have been refactored to simplify their usage and implementation.
  • All input elements should get the .form-control class and they will each be styled correctly based on their type.
  • .form__group is now .form-group since it is not an element according to BEM practices.
  • .form__error is now .form-error since it is not an element according to BEM practices.
  • .form__label is now .form-label since it is not an element according to BEM practices.
  • .form__input--error is now .form-group--error since it is intended to be used at the group level.
  • .form__hint is now .form-hint since it is not an element according to BEM practices.
  • .form__error-summary is now .form-error-summary since it is not an element according to BEM practices.
  • Form elements now have a focus style!
• Tom Select Revisited #120 by @Jeremy-Walton
  • The Tom Select Add on has been rewritten to only override and apply our scale colors in the appropriate places. It should look and feel more integrated out of the box.
• Buttons Revisited #119 by @Jeremy-Walton
  • Buttons now have a focus state!
  • The .btn--no-border modifier was setting the font weight to bold which was too bold as a default. This has been removed as it didn't make sense as the correct behavior.

Breaking Changes

• Colors and Scales #117 by @Jeremy-Walton
  • With the removal of the luminosity scales, it is going to require any customization of your scales (primary, neutral, warning, danger, info, notice) to be refactored. Additionally, any usage of those luminosity values will need to be changed.
• Forms Revisited #118 by @Jeremy-Walton
  • All of the form classes have been refactored to simplify their usage and implementation. As a result, their classes are changed.
  • .form__input no longer exists.
  • All input elements should get the .form-control class and they will each be styled correctly based on their type.
  • .form__group is now .form-group
  • .form__error is now .form-error
  • .form__label is now .form-label
  • .form__input--error is now .form-group--error
  • .form__hint is now .form-hint
  • .form__error-summary is now .form-error-summary
  • If you have customized form controls, this change will require a refactor of those customizations.
• Tom Select Revisited #120 by @Jeremy-Walton
  • If you are customizing Tom Select in any way, you may need to refactor that to avoid conflict with this simplifying change.
  • It may actually reduce your need to override since it should be styling things better out of the box.
• Buttons Revisited #119 by @Jeremy-Walton
  • If you wanted the bold text on a button with no border, you will need to use the following css to add that behavior back.

    %btn-global {
      &.btn--no-border {
        font-weight: var(--rm-font-weight-bold);
      }
    }

Full Changelog: v0.1.2-beta...v0.1.3-beta