v1.0.0

Major Changes

• 098f83d: Moves editor files to their own dir: vscode to editor/vscode, etc

• b40b80a: Initial release 🎉

  npm i @rhds/tokens

• c6da2c5: Changed black crayon tokens to gray crayon tokens. This reflects the new
  color palette. This also required updates to the gray crayon token names and
  changes to semantic token values that use grays. Note that the new
  --rh-color-grey-* tokens do not line up with the old --rh-color-black-*
  tokens, so be sure to enact contrast testing on all your uses.

  Before	After
  --rh-color-black-150	--rh-color-gray-05
  --rh-color-black-200	--rh-color-gray-20
  --rh-color-black-300	--rh-color-gray-30
  --rh-color-black-400	--rh-color-gray-40
  --rh-color-black-500	--rh-color-gray-50
  --rh-color-black-600	--rh-color-gray-60
  --rh-color-black-700	--rh-color-gray-70
  --rh-color-black-800	--rh-color-gray-80
  --rh-color-black-900	--rh-color-gray-90

• 17f0fff: javascript: Made each category available as a separate module

  Before:

  import { Red300 } from "@rhds/tokens";
  
  element.style.color = Red300;

  After:

  import { Red300 } from "@rhds/tokens/color.js";
  
  element.style.color = Red300.hex;

  Some values exported from values.js and from the various category modules are
  now structured data. This includes breakpoints, colours, shadows, and media
  queries.

• afbb74b: Removed --rh-context tokens, pending redesign of that feature

• d617cd0: Removed danger border color tokens, pending redesign of that feature

Minor Changes

• cde3ef0: Improved exported typescript types, use string references in media tokens'
  javascript module representation

• 20b5fc0: Added -hsl and -rgb variants of crayon colours

  background: rgb(var(--rh-color-red-100-rgb) / var(--rh-opacity-80));

• 487b9b2: Update packaged files to include css, scss, and editor files.

• 6f11643: - Adds textmate snippets in editor/textmate

  • Adds a VSCode VSIX extension bundle to github releases
  • Fixes the hexokinase regexp

• 1596d5d: Allows for markdown files as collection description

• 842d205: Adds breakpoint tokens.

  Since CSS does not allow custom properties in media queries, these should be used via the
  ScreenSizeController from @rhds/elements

  import { LitElement, html } from "lit";
  import { classMap } from "lit/directives/class-map.js";
  import { ScreenSizeController } from "@rhds/elements/lib/controllers/ScreenSizeController.js";
  
  @customElement("responsive-element")
  class ResponsiveElement extends LitElement {
    #screenSize = new ScreenSizeController(this);
  
    render() {
      const isMobilePortrait = this.#screenSize.matches.has("2xs");
      return html`
        <div id="#container" class="${classMap({ isMobilePortrait })}">...</div>
      `;
    }
  }

• ae98335: Adds a new Stylelint plugin, which validates and fixes token values in css files.

  npx stylelint elements/**/*.css --fix
  

  Also adds a new tokens map from the main export. The previous main have moved to './values.js';

  import { tokens } from "@rhds/tokens";
  
  tokens.get("--rh-color-brand-red-on-light"); // '#ee0000';

Patch Changes

• 1de1327: Changed the gray color associated with secondary text
• 594e64d: Support a limited set of languages in font-family
• 06eaa2c: Removed light-alt surface token
• 07c1e2c: Updated dependencies
• 2feacb7: Fixed VSIX build script for VSCode
• c0abeff: Add VSCode bundle to GitHub release
• 2541aeb: Removing Overpass from font stacks
• a1659d8: Converted length tokens from rem to px
• 3bf26ab: Fixed missing rgb and hsl values for gray colours
• b358a5d: Automatically add description from files
• e354fdf: Remapped new gray surface tokens and added a description for canvas tokens