Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: tokens 2.1.1 #2106

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore: tokens 2.1.1 #2106

wants to merge 4 commits into from

Conversation

bennypowers
Copy link
Member

What I did

  1. bump tokens version
  2. lint css files

Testing Instructions

  1. check i18n text in demos (e.g. cta rtl demos)

Copy link

changeset-bot bot commented Jan 5, 2025

🦋 Changeset detected

Latest commit: f537380

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@rhds/elements Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link

netlify bot commented Jan 5, 2025

Deploy Preview for red-hat-design-system ready!

Name Link
🔨 Latest commit f537380
🔍 Latest deploy log https://app.netlify.com/sites/red-hat-design-system/deploys/677e2d3fd749400008f8e02e
😎 Deploy Preview https://deploy-preview-2106--red-hat-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Contributor

github-actions bot commented Jan 5, 2025

Size Change: -1.33 kB (-0.64%)

Total Size: 206 kB

Filename Size Change
./elements.js 474 B +1 B (+0.21%)
./elements/rh-accordion/rh-accordion-header.js 2.69 kB -50 B (-1.82%)
./elements/rh-alert/rh-alert.js 4.26 kB -55 B (-1.28%)
./elements/rh-audio-player/rh-audio-player-about.js 1.8 kB -54 B (-2.91%)
./elements/rh-audio-player/rh-audio-player-subscribe.js 1.38 kB -50 B (-3.5%)
./elements/rh-audio-player/rh-audio-player.js 13.1 kB -59 B (-0.45%)
./elements/rh-audio-player/rh-cue.js 1.95 kB -50 B (-2.5%)
./elements/rh-audio-player/rh-transcript.js 2.7 kB -50 B (-1.82%)
./elements/rh-avatar/rh-avatar.js 2.85 kB -52 B (-1.79%)
./elements/rh-blockquote/rh-blockquote.js 1.36 kB -52 B (-3.69%)
./elements/rh-card/rh-card.js 3.58 kB -67 B (-1.84%)
./elements/rh-code-block/rh-code-block.js 7.2 kB -54 B (-0.74%)
./elements/rh-cta/rh-cta.js 3.93 kB -54 B (-1.36%)
./elements/rh-footer/rh-footer-block.js 714 B -52 B (-6.79%)
./elements/rh-footer/rh-footer-universal.js 3.99 kB -56 B (-1.38%)
./elements/rh-footer/rh-footer.js 4.96 kB -56 B (-1.12%)
./elements/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 1.3 kB -50 B (-3.71%)
./elements/rh-navigation-secondary/rh-navigation-secondary.js 5.26 kB -50 B (-0.94%)
./elements/rh-pagination/rh-pagination.js 5.4 kB -52 B (-0.95%)
./elements/rh-skip-link/rh-skip-link.js 1.19 kB -50 B (-4.03%)
./elements/rh-spinner/rh-spinner.js 1.38 kB -51 B (-3.56%)
./elements/rh-stat/rh-stat.js 2.13 kB -61 B (-2.78%)
./elements/rh-table/rh-table.js 3.48 kB -53 B (-1.5%)
./elements/rh-tag/rh-tag.js 2.79 kB -53 B (-1.87%)
./elements/rh-tile/rh-tile.js 5.09 kB -53 B (-1.03%)
./elements/rh-video-embed/rh-video-embed.js 4.59 kB -52 B (-1.12%)
ℹ️ View Unchanged
Filename Size
./elements/rh-accordion/context.js 162 B
./elements/rh-accordion/rh-accordion-panel.js 1.35 kB
./elements/rh-accordion/rh-accordion.js 3.21 kB
./elements/rh-audio-player/rh-audio-player-rate-stepper.js 1.85 kB
./elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 1.53 kB
./elements/rh-avatar/random-pattern-controller.js 2.72 kB
./elements/rh-back-to-top/rh-back-to-top.js 2.1 kB
./elements/rh-badge/rh-badge.js 1.55 kB
./elements/rh-breadcrumb/rh-breadcrumb.js 1.5 kB
./elements/rh-button/rh-button.js 4.24 kB
./elements/rh-code-block/prism.css.js 822 B
./elements/rh-code-block/prism.js 572 B
./elements/rh-dialog/rh-dialog.js 4.78 kB
./elements/rh-dialog/yt-api.js 617 B
./elements/rh-footer/rh-footer-copyright.js 362 B
./elements/rh-footer/rh-footer-links.js 1.17 kB
./elements/rh-footer/rh-footer-social-link.js 964 B
./elements/rh-health-index/rh-health-index.js 2.35 kB
./elements/rh-icon/rh-icon.js 2.35 kB
./elements/rh-icon/ssr.js 181 B
./elements/rh-menu/rh-menu.js 1.29 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 2.47 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-menu.js 1.75 kB
./elements/rh-navigation-secondary/rh-navigation-secondary-overlay.js 571 B
./elements/rh-navigation-secondary/test/fixtures.js 769 B
./elements/rh-site-status/rh-site-status.js 2.5 kB
./elements/rh-subnav/rh-subnav.js 2.73 kB
./elements/rh-surface/rh-surface.js 1.14 kB
./elements/rh-surface/test/elements.js 423 B
./elements/rh-switch/rh-switch.js 2.93 kB
./elements/rh-table/rh-sort-button.js 1.49 kB
./elements/rh-tabs/context.js 160 B
./elements/rh-tabs/rh-tab-panel.js 1.04 kB
./elements/rh-tabs/rh-tab.js 3.02 kB
./elements/rh-tabs/rh-tabs.js 3.77 kB
./elements/rh-tile/rh-tile-group.js 1.81 kB
./elements/rh-timestamp/rh-timestamp.js 983 B
./elements/rh-tooltip/rh-tooltip.js 2.73 kB
./lib/context/color/consumer.js 1.41 kB
./lib/context/color/controller.js 947 B
./lib/context/color/provider.js 2.18 kB
./lib/context/event.js 593 B
./lib/context/headings/consumer.js 722 B
./lib/context/headings/controller.js 1.12 kB
./lib/context/headings/provider.js 1.24 kB
./lib/DirController.js 565 B
./lib/elements/rh-context-demo/rh-context-demo.js 1.28 kB
./lib/elements/rh-context-picker/rh-context-picker.js 2.24 kB
./lib/environment.js 194 B
./lib/functions.js 175 B
./lib/I18nController.js 1.38 kB
./lib/ScreenSizeController.js 849 B
./lib/ssr-controller.js 251 B
./react/rh-accordion/rh-accordion-header.js 199 B
./react/rh-accordion/rh-accordion-panel.js 185 B
./react/rh-accordion/rh-accordion.js 215 B
./react/rh-alert/rh-alert.js 184 B
./react/rh-audio-player/rh-audio-player-about.js 191 B
./react/rh-audio-player/rh-audio-player-rate-stepper.js 213 B
./react/rh-audio-player/rh-audio-player-scrolling-text-overflow.js 214 B
./react/rh-audio-player/rh-audio-player-subscribe.js 196 B
./react/rh-audio-player/rh-audio-player.js 183 B
./react/rh-audio-player/rh-cue.js 195 B
./react/rh-audio-player/rh-transcript.js 207 B
./react/rh-avatar/rh-avatar.js 173 B
./react/rh-back-to-top/rh-back-to-top.js 183 B
./react/rh-badge/rh-badge.js 174 B
./react/rh-blockquote/rh-blockquote.js 179 B
./react/rh-breadcrumb/rh-breadcrumb.js 179 B
./react/rh-button/rh-button.js 174 B
./react/rh-card/rh-card.js 172 B
./react/rh-code-block/rh-code-block.js 181 B
./react/rh-cta/rh-cta.js 170 B
./react/rh-dialog/rh-dialog.js 203 B
./react/rh-footer/rh-footer-block.js 184 B
./react/rh-footer/rh-footer-copyright.js 187 B
./react/rh-footer/rh-footer-links.js 185 B
./react/rh-footer/rh-footer-social-link.js 193 B
./react/rh-footer/rh-footer-universal.js 188 B
./react/rh-footer/rh-footer.js 174 B
./react/rh-health-index/rh-health-index.js 184 B
./react/rh-icon/rh-icon.js 202 B
./react/rh-menu/rh-menu.js 173 B
./react/rh-navigation-secondary/rh-navigation-secondary-dropdown.js 217 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu-section.js 205 B
./react/rh-navigation-secondary/rh-navigation-secondary-menu.js 199 B
./react/rh-navigation-secondary/rh-navigation-secondary-overlay.js 201 B
./react/rh-navigation-secondary/rh-navigation-secondary.js 213 B
./react/rh-pagination/rh-pagination.js 178 B
./react/rh-site-status/rh-site-status.js 181 B
./react/rh-skip-link/rh-skip-link.js 181 B
./react/rh-spinner/rh-spinner.js 175 B
./react/rh-stat/rh-stat.js 171 B
./react/rh-subnav/rh-subnav.js 175 B
./react/rh-surface/rh-surface.js 175 B
./react/rh-switch/rh-switch.js 185 B
./react/rh-table/rh-sort-button.js 213 B
./react/rh-table/rh-table.js 174 B
./react/rh-tabs/rh-tab-panel.js 181 B
./react/rh-tabs/rh-tab.js 187 B
./react/rh-tabs/rh-tabs.js 174 B
./react/rh-tag/rh-tag.js 182 B
./react/rh-tile/rh-tile-group.js 183 B
./react/rh-tile/rh-tile.js 194 B
./react/rh-timestamp/rh-timestamp.js 176 B
./react/rh-tooltip/rh-tooltip.js 175 B
./react/rh-video-embed/rh-video-embed.js 227 B
./uxdot/uxdot-best-practice.js 742 B
./uxdot/uxdot-copy-button.js 1.2 kB
./uxdot/uxdot-copy-permalink.js 1.1 kB
./uxdot/uxdot-example.js 1.17 kB
./uxdot/uxdot-feedback.js 727 B
./uxdot/uxdot-header.js 1.07 kB
./uxdot/uxdot-hero.js 679 B
./uxdot/uxdot-installation-tabs.js 675 B
./uxdot/uxdot-masthead.js 809 B
./uxdot/uxdot-pattern-ssr-controller-client.js 604 B
./uxdot/uxdot-pattern-ssr-controller-server.js 1.68 kB
./uxdot/uxdot-pattern-ssr-controller.js 213 B
./uxdot/uxdot-pattern.js 2.12 kB
./uxdot/uxdot-repo-status-checklist.js 1.16 kB
./uxdot/uxdot-repo-status-list.js 1.07 kB
./uxdot/uxdot-repo-status-table.js 782 B
./uxdot/uxdot-repo.js 1.17 kB
./uxdot/uxdot-search.js 2.39 kB
./uxdot/uxdot-sidenav.js 2.67 kB
./uxdot/uxdot-spacer-tokens-table.js 2.45 kB
./uxdot/uxdot-toc.js 1.13 kB

compressed-size-action

Copy link
Collaborator

@zeroedin zeroedin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should add the additional required CSS in the RTL demos as suggested in the tokens repo changeset

[lang=" he"] {
  font-family: var(--rh-font-family-lang-he: "Noto Sans Hebrew");
}

We might also mention this explicitly in the changelog for RHDS @zhawkins, I believe you have mentioned that when we make changes to the dependencies, sometimes those changes feel as if they get lost in RHDS's changelog, do you have any opinions on how that would get called out?

Copy link
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes look good.

It does look like there are still references to Noto * in a few other places like:

  • docs/get-started/index.md - <style> tag
  • elements/rh-card/demo/color-context.html - <style> tag
  • elements/rh-card/demo/sticky-pattern.html - <style> tag
  • elements/rh-card/demo/title-pattern.html - <style> tag
  • elements/rh-card/demo/variants.html - <style> tag
  • Should the Typography Foundations table list the other languages?

Thanks for your work on this.

@bennypowers
Copy link
Member Author

I think we should add the additional required CSS in the RTL demos as suggested in the tokens repo changeset

[lang=" he"] {
  font-family: var(--rh-font-family-lang-he: "Noto Sans Hebrew");
}

We might also mention this explicitly in the changelog for RHDS @zhawkins, I believe you have mentioned that when we make changes to the dependencies, sometimes those changes feel as if they get lost in RHDS's changelog, do you have any opinions on how that would get called out?

If this is required, it's RHDS v3

@zhawkins
Copy link
Collaborator

zhawkins commented Jan 6, 2025

Thanks for the work on this y'all!

We might also mention this explicitly in the changelog for RHDS @zhawkins, I believe you have mentioned that when we make changes to the dependencies, sometimes those changes feel as if they get lost in RHDS's changelog, do you have any opinions on how that would get called out?

🤔 I'm not really sure, you could use a star emoji? 😁

@zeroedin
Copy link
Collaborator

zeroedin commented Jan 6, 2025

If this is required, it's RHDS v3

Maybe required was too strongly worded. If the failover to Helvetica, Arial, sans-serif is enough to cover the correct character rendering for other languages then it wouldn't be required per say. I think what I'm after is should "we" be required to show a complete example of what "should" be done in our demos. Noto Hebrew will not load otherwise in the RTL demos that use Hebrew text.

@bennypowers
Copy link
Member Author

If this is required, it's RHDS v3

Maybe required was too strongly worded. If the failover to Helvetica, Arial, sans-serif is enough to cover the correct character rendering for other languages then it wouldn't be required per say. I think what I'm after is should "we" be required to show a complete example of what "should" be done in our demos. Noto Hebrew will not load otherwise in the RTL demos that use Hebrew text.

This should be a separate PR. I think it should be part of a base style sheet, and that stylesheet should be shared (i.e. adopted) into each element's shadow root as well. This is a separate issue and will require discussion. The first iteration should be quite minimal - lang, h1-6, p, a, etc. - no classes.

Global styles are loaded in those documents
@zeroedin
Copy link
Collaborator

zeroedin commented Jan 8, 2025

This should be a separate PR. I think it should be part of a base style sheet, and that stylesheet should be shared (i.e. adopted) into each element's shadow root as well. This is a separate issue and will require discussion. The first iteration should be quite minimal - lang, h1-6, p, a, etc. - no classes.

Sounds good to me

@@ -71,7 +71,7 @@ accommodate mixed-language content. For more technical details, go to the
<rh-table>

| Language | Font family |
|----------|------------------------------|
| -------- | ---------------------------- |
| Chinese | Noto Sans Simplified Chinese |
| Japanese | Noto Sans Japanese |
| Korean | Noto Sans Korean |
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we list the other languages here? Or nuke the table and have people refer to the font tokens page?

Copy link
Collaborator

@adamjohnson adamjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Languages get total makeover

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Review 🔍
Development

Successfully merging this pull request may close these issues.

4 participants