Skip to content

Conversation

@KianNH
Copy link
Member

@KianNH KianNH commented Jan 23, 2025

Summary

Adopt Cloudflare styling for badge component. This overrides all variant and size combinations, so all badges will be blue in light mode and orange in dark mode.

There is an escape hatch for existing components that leveraged gray badges, where class="sl-badge gray" can be used.

We will adopt the rest of the hues from the official component and map these to Starlight's variants in the future.

Screenshots (optional)

Before:
image

After:
image

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Jan 23, 2025

Deploying cloudflare-docs with  Cloudflare Pages  Cloudflare Pages

Latest commit: fbe63e1
Status: ✅  Deploy successful!
Preview URL: https://943e549d.cloudflare-docs-7ou.pages.dev
Branch Preview URL: https://kian-pcx-15488.cloudflare-docs-7ou.pages.dev

View logs

@pedrosousa
Copy link
Contributor

Should we define an extra color besides gray for deprecated features such as firewall rules?

We could use the following colors from the dashboard pill for "Previous version" (couldn't find a "Deprecated" pill):

Light mode:
image

background-color: rgb(254, 204, 200);
color: rgb(90, 8, 1);

Dark mode:
image
(this one seems a bit too strong, maybe we could make it lighter)

background-color: rgb(252, 87, 74);
color: rgb(29, 29, 29);

@KianNH
Copy link
Member Author

KianNH commented Jan 24, 2025

Added the per-variant colours

image image image

@KianNH KianNH enabled auto-merge (squash) January 24, 2025 17:51
@KianNH KianNH merged commit e012d17 into production Jan 24, 2025
12 checks passed
@KianNH KianNH deleted the kian/PCX-15488 branch January 24, 2025 18:12
deadlypants1973 pushed a commit that referenced this pull request Jan 29, 2025
* [Docs Site] Adopt Cloudflare styling for badge component

* add variant styling

* remove variant note

* remove gray class in inline badge docs

* add caution variant to workers ai beta badge
kodster28 pushed a commit that referenced this pull request Jan 30, 2025
* [Docs Site] Adopt Cloudflare styling for badge component

* add variant styling

* remove variant note

* remove gray class in inline badge docs

* add caution variant to workers ai beta badge
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

10 participants