-
75e4dda: - Added language specific font-family tokens. Example:
--rh-font-family-lang-he: 'Noto Sans Hebrew';
- Removes language fonts from
--rh-font-family-body-text
and--rh-font-family-heading
Before:
body { font-family: var( --rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif ); } :is(h1, h2, h3, h4, h5, h6) { font-family: var( --rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif ); }
After:
body { font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text"); } :is(h1, h2, h3, h4, h5, h6) { font-family: var( --rh-font-family-heading, RedHatDisplay, "Red Hat Display" ); } [lang="he"] { font-family: var(--rh-font-family-lang-he: "Noto Sans Hebrew"); } [lang="zh-CN"] { font-family: var(--rh-font-family-lang-zh-cn: "Noto Sans SC"); }
- Removes language fonts from
-
f4f68be: Removed empty color theme tokens from
_variables.scss
-
aea6a9f: Change the value for regular font weight token (
var(--rh-font-weight-heading-regular, 300)
) for headings from300
to400
-
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> <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> </p></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
, andsuccess
.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 torhds/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
, andsuccess
- Add
info
status token, which should be used in place ofnote
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));
- 9d914cc: added stops to textmate snippets
-
a9edc95: Stylelint: added
allowed
option torhds/no-unknown-token-name
rules: rhds/no-unknown-token-name: - true - allowed: - --rh-icon-color
-
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
, andsuccess
.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); } }
- 9d914cc: added stops to textmate snippets
- 3c18e2c: Stylelint: avoid some false-positives when linting component token names.
-
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/no-unknown-token-names: - 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
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
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
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
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
Semantic token Old crayon token value New crayon token value canvas-white
white
white
canvas-black
gray-90
gray-95
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
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
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
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
-
- c793fd8: Makes css property fallbacks a snippet placeholder, letting users more easily
choose between the fallback and non-fallback forms
padding: var(--rh-space-xs, 4px); margin: var(--rh-space-xs);
- f820df6: Added
js/**/*.cjs
to files entry points patterns array
- a777f24: Fixes missing file exports
-
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'
-
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 togray
crayon tokens. This reflects the new color palette. This also required updates to thegray
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
-
cde3ef0: Improved exported typescript types, use string references in media tokens' javascript module representation
-
20b5fc0: Added
-hsl
and-rgb
variants of crayon coloursbackground: 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';
- 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
- ceea9a3: include js files when releasing in CI/CD
- cde3ef0: Improved exported typescript types, use string references in media tokens' javascript module representation
- 06eaa2c: Removed light-alt surface token
-
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.
- e354fdf: Remapped new gray surface tokens and added a description for canvas tokens
- 1de1327: Changed the gray color associated with secondary text
-
c6da2c5: Changed
black
crayon tokens togray
crayon tokens. This reflects the new color palette. This also required updates to thegray
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
-
afbb74b: Removed
--rh-context
tokens, pending redesign of that feature
-
90207a2: 11ty: added expanded table rows for color variants
-
bc80671: 11ty plugin: Fixed copy button
- Fixed copy button when token values contain double-quotes
- Used token colours for copy button
- Made the docs extension key configurable (defaults to
com.redhat.ux
)
-
90207a2: 11ty: added
getTokenDocs
filter
- 07c1e2c: Updated dependencies
- 0ba0357: Reverted removal of
--rh-border-width-sm
token
- b358a5d: Automatically add description from files
- 1596d5d: Allows for markdown files as collection description
- 7e3e976: Fixed a race condition in the 11ty plugin
- 2feacb7: Fixed VSIX build script for VSCode
- b74a17a: Added experimental 11ty plugin
- 3bf26ab: Fixed missing rgb and hsl values for gray colours
-
20b5fc0: Added
-hsl
and-rgb
variants of crayon coloursbackground: rgb(var(--rh-color-red-100-rgb) / var(--rh-opacity-80));
- 2541aeb: Removing Overpass from font stacks
- 1a18fab: More CI debugging
- 2f6494e: More CI debugging
- a33f75c: One more release ci fix for good measure
- c0abeff: Add VSCode bundle to GitHub release
-
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.has("mobile-portrait"); return html` <div id="#container" class="${classMap({ isMobilePortrait })}">...</div> `; } }
-
6f11643: - Adds textmate snippets in editor/textmate
- Adds a VSCode VSIX extension bundle to github releases
- Fixes the hexokinase regexp
BREAKING CHANGES:
- moves editor files to their own dir: vscode to editor/vscode, etc
- a2ae38a: Corrected package exports
-
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';
- 594e64d: Support a limited set of languages in font-family
- a1659d8: Converted length tokens from rem to px
- 487b9b2: Update packaged files to include css, scss, and editor files.
-
b40b80a: Initial release 🎉
npm i @rhds/tokens@beta