Skip to content

v2.1.0
Compare
Choose a tag to compare
@github-actions github-actions released this 30 Sep 13:52
· 7 commits to main since this release
v2.1.0
63c39ea
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Learn about vigilant mode.

Minor Changes

  • 9d914cc: ✨ Added interactive tokens, and DEPRECATES the older interactive tokens

    - color: var(--rh-color-interactive-blue-darker);
+ color: var(--rh-color-interactive-primary-default-on-light);
- color: var(--rh-color-interactive-purple-darker);
+ color: var(--rh-color-interactive-primary-visited-default-on-light);

  • 9d914cc: Added theme tokens for responsive colours. Read these in a themable container
    such as <rh-card> to style themable content that responds to the color palette

    <rh-surface color-palette="lighter">
  <p>Use <a href="#">theme tokens</a> for best results.</p>
  <rh-card color-palette="darkest">
    <p>That way, colours respond to their parents'
       <code>color-palette</code> Without requiring
       <a href="#">custom CSS</a></p>
  </rh-card>
</rh-surface>
    rh-surface {
  & a {
    color: var(--rh-color-interactive-primary-default);
    &:hover { color: var(--rh-color-interactive-primary-hover); }
    &:focus-within { color: var(--rh-color-interactive-primary-focus); }
    &:active { color: var(--rh-color-interactive-primary-active); }
    &:visited { color: var(--rh-color-interactive-primary-visited);
      &:hover { color: var(--rh-color-interactive-primary-visited-hover); }
      &:focus-within { color: var(--rh-color-interactive-primary-visited-focus); }
      &:active { color: var(--rh-color-interactive-primary-visited-active); }
    }
  }
}

    For more information, please see our theming docs.

  • b64dd32: ✨ Added status tokens:

    RHDS describes six statuses: danger, warning, caution, neutral, note, and success.

    button {
  &.danger { background: var(--rh-color-status-danger); }
  &.warning { background: var(--rh-color-status-warning); }
  &.caution { background: var(--rh-color-status-caution); }
  &.neutral { background: var(--rh-color-status-neutral); }
  &.note { background: var(--rh-color-status-note); }
  &.success { background: var(--rh-color-status-success); }
}

  • a9edc95: Stylelint: added allowed option to rhds/no-unknown-token-name

    rules:
  rhds/no-unknown-token-name:
    - true
    - allowed:
        - --rh-icon-color

  • 6e2e3da: Align status tokens across color categories by:

    • Update surface color status token names and values
    • Update status token values for danger, warning, caution, neutral, and success
    • Add info status token, which should be used in place of note status token going forward
    • Ensure consistent status color names by aliasing inconsistent names with new names: 
      - color: var(--rh-color-status-note-on-light,
+ color: var(--rh-color-status-info-on-light,
    var(--rh-color-purple-50, #5e40be))
    • Alias icon and border status token values to status tokens 
      - color: var(--rh-color-icon-status-success-on-light,
-   var(--rh-color-green-60, #3d7317));
+ color: var(--rh-color-icon-status-success-on-light,
+   var(--rh-color-status-success-on-light,
+     var(--rh-color-green-60, #3d7317));

Patch Changes

  • 9d914cc: added stops to textmate snippets
Assets 2
Loading