-
-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
base: dev
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
--#{$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))}; |
There was a problem hiding this comment.
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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<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> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<code>bg-{{ color.class }}{% if light %}-lt{% endif %}</code> | |
<code>bg-{{ color.class }}{% if light %}-lightest{% endif %}</code> |
No description provided.