8000 Update color references and enhance badge styles for consistency by codecalm · Pull Request #2252 · tabler/tabler · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Update color references and enhance badge styles for consistency #2252

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

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from

Conversation

codecalm
Copy link
Member

No description provided.

Copy link
vercel bot commented Mar 29, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
tabler ✅ Ready (Inspect) Visit Preview Mar 29, 2025 6:25pm
tabler-docs ✅ Ready (Inspect) Visit Preview Mar 29, 2025 6:25pm

Copy link
changeset-bot bot commented Mar 29, 2025

⚠️ No Changeset found

Latest commit: 763e482

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

Comment on lines -35 to -42
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
--#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
--#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
Copy link
Collaborator

Choose a reason for hiding this comment

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

Removing the -lt classes is a BC break. I guess they were used quite often, as they were referenced in the docs for a long time. Not sure about the other ones, but in a strict semantic world you should add the new classes and only in the next major release remove the old classes, so all users have the time to update their code bases.

Real world example: the -lt classes are used in multiple plugins for Kimai, which are made by different developers and the releases cannot be synced. So if I update Tabler, frontend stuff will 100% surely break in several places.

Please re-add/keep the -lt classes as an alias for the new-lightest classes.

@@ -6,11 +6,11 @@
{% for color in colors %}
<div class="row g-2 mb-3 align-items-center">
<div class="col-auto">
<div class="avatar bg-{{ color[0] }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color[0] | capitalize | first_letter }}</div>
<div class="avatar bg-{{ color.class }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color.class | capitalize | first_letter }}</div>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<div class="avatar bg-{{ color.class }}{% if light %}-lt{% else %} text-white{% endif %}">{{ color.class | capitalize | first_letter }}</div>
<div class="avatar bg-{{ color.class }}{% if light %}-lightest{% else %} text-white{% endif %}">{{ color.class | capitalize | first_letter }}</div>

<span class="font-weight-semibold">{{ color[1].title }}</span><br/>
<code>bg-{{ color[0] }}{% if light %}-lt{% endif %}</code>
<span class="font-weight-semibold">{{ color.title }}</span><br/>
<code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code>
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
<code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code>
<code>bg-{{ color.class }}{% if light %}-lightest{% endif %}</code>

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

Successfully merging this pull request may close these issues.

2 participants
0