v2.0.1

Patch Changes

• 3c18e2c: Stylelint: avoid some false-positives when linting component token names.

v2.0.0

Major Changes

• 41125df: # Crayon color updates

  Crayon color token names and values were changed to match the new Red Hat color palette.

  To help you make these changes, use the RHDS Stylelint Plugin.If you'd like more information about Stylelint, visit stylelint.io.

  Stylelint's migration rule can take a dictionary of names to migrate, and if it finds one of the specified names, it will automatically replace it with the new one. The rules below indicate how color tokens in 1.0 map to those in 2.0 and can be copied and pasted into your own repo.

  rules:
    rhds/token-values:
      - true
      - migrations:
          # reds
          --rh-color-red-50: --rh-color-red-10
          --rh-color-red-100: --rh-color-red-20
          --rh-color-red-200: --rh-color-red-30
          --rh-color-red-300: --rh-color-red-40
          --rh-color-red-400: --rh-color-red-50
          --rh-color-red-500: --rh-color-red-50
          --rh-color-red-600: --rh-color-red-60
          --rh-color-red-700: --rh-color-red 60
          --rh-color-red-800: --rh-color-red-70
          # oranges
          --rh-color-orange-50: --rh-color-orange-10
          --rh-color-orange-100: --rh-color-orange-30
          --rh-color-orange-300: --rh-color-orange-40
          --rh-color-orange-500: --rh-color-orange-60
          --rh-color-orange-700: --rh-color-orange-70
          # yellows (previously golds)
          --rh-color-gold-50: --rh-color-yellow-10
          --rh-color-gold-400: --rh-color-yellow-40
          --rh-color-gold-600: --rh-color-yellow-70
          # greens
          --rh-color-green-50: --rh-color-green-10
          --rh-color-green-100: --rh-color-green-20
          --rh-color-green-500: --rh-color-green-60
          --rh-color-green-600: --rh-color-green-70
          # teals (previously cyans)
          --rh-color-cyan-50: --rh-color-teal-10
          --rh-color-cyan-100: --rh-color-teal-30
          --rh-color-cyan-300: --rh-color-teal-50
          --rh-color-cyan-400: --rh-color-teal-60
          --rh-color-cyan-500: --rh-color-teal-70
          # blues
          --rh-color-blue-50: --rh-color-blue-10
          --rh-color-blue-100: --rh-color-blue-20
          --rh-color-blue-200: --rh-color-blue-30
          --rh-color-blue-250: --rh-color-blue-40
          --rh-color-blue-400: --rh-color-blue-50
          --rh-color-blue-500: --rh-color-blue-60
          --rh-color-blue-600: --rh-color-blue-70
          # purples
          --rh-color-purple-50: --rh-color-purple-10
          --rh-color-purple-100: --rh-color-purple-20
          --rh-color-purple-300: --rh-color-purple-40
          --rh-color-purple-500: --rh-color-purple-60
          --rh-color-purple-700: --rh-color-purple-70
          # grays
          --rh-color-gray-05: --rh-color-gray-10
          --rh-color-gray-10: --rh-color-gray-20
          --rh-color-gray-20: --rh-color-gray-30
          --rh-color-gray-30: --rh-color-gray-40
          --rh-color-gray-40: --rh-color-gray-50
          --rh-color-gray-50: --rh-color-gray-60
          --rh-color-gray-60: --rh-color-gray-70
          --rh-color-gray-70: --rh-color-gray-80
          --rh-color-gray-80: --rh-color-gray-90
          --rh-color-gray-90: --rh-color-gray-95
          --rh-color-black: --rh-color-gray-100

  There are several new crayon color tokens that have been added and do not directly map to a 1.0 token. These include:

  • --rh-color-red-orange-10

  • --rh-color-red-orange-20

  • --rh-color-red-orange-30

  • --rh-color-red-orange-40

  • --rh-color-red-orange-50

  • --rh-color-orange-20

  • --rh-color-orange-50

  • --rh-color-yellow-20

  • --rh-color-yellow-30

  • --rh-color-yellow-50

  • --rh-color-yellow-60

  • --rh-color-green-30

  • --rh-color-green-40

  • --rh-color-green-50

  • --rh-color-teal-20

  • --rh-color-teal-40

  • --rh-color-purple-30

  • --rh-color-purple-50

  Semantic token value changes

  The following semantic token values changed, but the token names did not. In many cases, you may automatically migrate these tokens using the rhds/token-values stylelint rule.

  rules:
    rhds/token-values: true

  Accent

  Semantic token	Old crayon token value	New crayon token value
  accent-base-on-light	blue-400	blue-50
  accent-base-on-dark	blue-200	blue-30
  accent-brand-on-light	red-500	brand-red-on-light
  accent-brand-on-dark	red-400	brand-red-on-dark

  Border

  Semantic token	Old crayon token value	New crayon token value
  border-strong-on-light	gray-90	gray-95
  border-strong-on-dark	white	white
  border-subtle-on-light	gray-20	gray-30
  border-subtle-on-dark	gray-40	gray-50
  border-interactive-on-light	blue-400	blue-50
  border-interactive-on-dark	blue-200	blue-30

  Brand

  Semantic token	Old crayon token value	New crayon token value
  brand-red-lightest	red-100	red-10
  brand-red-lighter	red-200	red-20
  brand-red-light	red-300	red-40
  brand-red-dark	red-600	red-60
  brand-red-darker	red-700	red-70
  brand-red-darkest	red-800	red-70
  brand-red-on-light	red-500	red-50
  brand-red-on-dark	red-400	red-50

  Canvas

  Semantic token	Old crayon token value	New crayon token value
  canvas-white	white	white
  canvas-black	gray-90	gray-95

  Icon

  Semantic token	Old crayon token value	New crayon token value
  icon-primary-on-light	brand-red-on-light	brand-red-on-light
  icon-primary-on-dark	brand-red-on-dark	brand-red-on-dark
  icon-secondary-on-light	gray-90	gray-95
  icon-secondary-on-dark	white	gray-50
  icon-subtle	gray-40	gray-50
  icon-subtle-hover	gray-30	gray-40

  Interactive

  Semantic token	Old crayon token value	New crayon token value
  interactive-blue-lightest	blue-100	blue-20
  interactive-blue-lighter	blue-200	blue-30
  interactive-blue-darker	blue-400	blue-50
  interactive-blue-darkest	blue-500	blue-70
  interactive-purple-lightest	purple-100	purple-10
  interactive-purple-lighter	purple-300	purple-30
  interactive-purple-darker	purple-500	purple-50
  interactive-purple-darkest	purple-700	purple-70

  Surface

  Semantic token	Old crayon token value	New crayon token value
  surface-lightest	white	white
  surface-lighter	gray-05	gray-10
  surface-light	gray-10	gray-20
  surface-dark	gray-60	gray-70
  surface-dark-alt	gray-70	gray-80
  surface-darker	gray-80	gray-90
  surface-darkest	gray-90	gray-95

  Text

  Semantic token	Old crayon token value	New crayon token value
  text-primary-on-light	gray-90	gray-95
  text-primary-on-dark	white	white
  text-secondary-on-light	gray-50	gray-60
  text-secondary-on-dark	gray-20	gray-30
  text-brand-on-light	red-500	brand-red-on-light
  text-brand-on-dark	red-400	brand-red-on-dark

Minor Changes

• c793fd8: Makes css property fallbacks a snippet p...

v1.1.2

Patch Changes

• f820df6: Added js/**/*.cjs to files entry points patterns array

v1.1.1

Patch Changes

• a777f24: Fixes missing file exports

v1.1.0

Minor Changes

• 0766863: Adds token meta data export.

  import { tokens } from "@rhds/tokens/meta.js";
  
  const family = tokens.get("--rh-font-family-body-text");
  console.log(family.$description);
  // 'The font family used for body text'

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

v1.0.0-beta.23

Patch Changes

• ceea9a3: include js files when releasing in CI/CD

v1.0.0-beta.22

Minor Changes

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

v1.0.0-beta.21

Patch Changes

• 06eaa2c: Removed light-alt surface token

v1.0.0-beta.20

Major Changes

• 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.

Patch Changes

• e354fdf: Remapped new gray surface tokens and added a description for canvas tokens