Skip to content

Releases: RedHat-UX/red-hat-design-tokens

v3.0.0

20 Mar 15:06
@github-actions github-actions
v3.0.0
081d03d
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v3.0.0 Latest
Latest

This release mostly contains developer-experience improvements when using the JavaScript APIs as well as improved IDE support.
The only major end-user facing changes are the deprecation of --rh-color-surface-dark-alt and --rh-color-*-(rgb|hsl).

Major Changes

  • 4d01e44: TypeScript: Improves the TypeScript developer experience. Introduces well
    typed tokens maps. Get auto-complete in your IDE when calling
    tokens.get('--rh-'), for example. TypeScript will also correctly return the
    type of get and has calls, so no more type assertions

      const value = tokens.get('--rh-line-height-code');
- expect(lightHeight).to.equal(value as number);
+ expect(lightHeight).to.equal(value);

    Theming tokens also no longer return null, but rather their computed
    light-dark() values, with fallback.

    This release also makes the tokens and metadata maps read only. If you were
    relying on instanceof Map checks in your code, they will no longer work

    import { tokens } from "@rhds/tokens";
// no longer works
tokens.set("--rh-color-surface-dark", "blue");
// no longer works
if (tokens instanceof Map) {
  // ...
}

  • 4d01e44: Theming and color schemes: enables device dark mode preferences.

    • Remove the .on.light and .on.dark selectors from color-context stylesheets. Uses light-dark() instead.
    • Rename the file color-context-consumer.css to default-theme.css as well as its associated JavaScript modules
    • Rename the file color-context-provider.css to color-palette.css as well as its associated JavaScript modules

    The default theme is now a global stylesheet. For best performance, we recommend
    loading it early on in the page. However, if you forget to load it, themable
    elements will load it themselves.

    <head>
  <!-- load default RHDS theme, which was copied from the NPM package to /assets -->
  <link
    rel="stylesheets"
    href="/assets/packages/@rhds/tokens/css/default-theme.css"
  />
</head>

  • 4d01e44: Colors: deprecated --rh-color-surface-dark-alt.

    In order to simplify the surface tokens, we've deprecated the
    --rh-color-surface-dark-alt token. While it still exists, it now refers to a color
    transformation in the OKLAB color space. If you wrote a custom
    theme     that sets a value for
    --rh-color-surface-dark-alt, you may not need to make any changes, as the value for --rh-color-surface-dark
    will be used to computed the new value.

      .my-theme {
    --rh-color-surface-dark: #224242;
-   --rh-color-surface-dark-alt: #113132;
  }

    When authoring components that use --rh-color-surface-dark-alt,
    replace that token with the color transform function.

      :host {
-    background: var(--rh-color-surface-dark-alt);
+    background: oklch(from var(--rh-color-surface-dark) calc(l * 0.82) c h);
  }

  • 4d01e44: Colors: Deprecates the *-rgb and *-hsl tokens. Use CSS color transforms instead

    - color: rgb(var(--rh-color-orange-90-rgb) / var(--rh-opacity-10));
+ color: rgb(from var(--rh-color-orange-90) r g b / var(--rh-opacity-10));

Minor Changes

  • 4d01e44: Stylelint: adds light-dark() fallbacks to the token-values rule for themable tokens e.g. --rh-color-accent-base.

  • 4d01e44: Editors: Added support for the neovim plugin nvim-colorizer, which displays colors next to their values or names.

    With this configuration (for lazy.nvim), you'll see a color swatch in your editor next to rhds variable names

    return {"catgoose/nvim-colorizer.lua",
    event = "BufReadPre",
    opts = { -- set to setup table
    user_default_options = {
      mode = 'virtualtext',
      names_custom = function()
        -- set this to your local machine's path
        local json_path = '~/Developer/redhat-ux/red-hat-design-tokens/editor/neovim/nvim-colorizer.json'
        local handle = assert(io.open(vim.fn.expand(json_path), 'r'))
        local content = handle:read('*a')
              handle:close()
        local colors = vim.json.decode(content)
        return colors
      end,
    }
  },
}
Assets 2
Loading

v2.2.4

21 Feb 10:24
@github-actions github-actions
v2.2.4
91dcbc2
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.4

Patch Changes

  • 7daff50: Fix typescript type exports
Loading

v2.2.3

21 Feb 09:38
@github-actions github-actions
v2.2.3
75b1d25
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.3

Patch Changes

  • d2fcded: Correct build process so that all necessary files are included in the package
Loading

v2.2.2

21 Feb 09:20
@github-actions github-actions
v2.2.2
94f1034
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.2

Patch Changes

  • a73e9c9: Reclassify dependencies as dev dependencies, add lit as a peer dependency
Loading

v2.2.1

21 Feb 07:29
@github-actions github-actions
v2.2.1
75a836a
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.1

Patch Changes

  • 2fd6b6b: Added missing typescript type declarations
Loading

v2.2.0

13 Feb 17:23
@github-actions github-actions
v2.2.0
96b3133
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.2.0

Minor Changes

  • 5e275cd: Added the following -80 primitive color tokens:

    • red-80
    • orange-80
    • yellow-80
    • teal-80
    • purple-80

    Changed the value of --rh-color-brand-red-darkest from --rh-color-red-70 to --rh-color-red-80

Loading

v2.1.1

15 Nov 08:08
@github-actions github-actions
v2.1.1
e0457ab
This commit was created on github.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.1.1

Patch Changes

  • 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");
}

  • 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 from 300 to 400

Loading

v2.1.0

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

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
Loading

v2.0.1

13 Dec 08:59
@github-actions github-actions
v2.0.1
9539e1d
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v2.0.1

Patch Changes

Loading

v2.0.0

04 Dec 17:59
@github-actions github-actions
v2.0.0
4c64dfc
This commit was created on github.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
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...
Read more
Loading