badge spacing and hover legibility #5

rdela commented 2026年01月18日 20:25:51 +01:00 (Migrated from github.com)

github.com/lumeland/ds@6d78223fe4/src/components/badge.css (L1-L12)

I think .badge should have margin set out of the box, and also have color set for :hover so the text remains legible. My proposed changes:

1. add margin: 0.0625rem 0.03125rem; or similar, you may have different thoughts about units/ratios.
2. add color: var(--color-dim); to &:hover

 .badge { 
 border: 1px solid var(--color-line); 
 color: var(--color-dim); 
 margin: 0.0625rem 0.03125rem;
 padding: 0.2em 0.6em; 
 border-radius: 4px; 
 text-decoration: none; 
 display: inline-block; 
 
 &:hover { 
 color: var(--color-dim);
 background-color: var(--color-line); 
 } 
 }

See change in action in Tags section here, try toggling the new rules on and off to see why I added them:

https://rdela.com/archive/

Code:

github.com/rdela/rdela.com@2f29ca03af/_includes/css/ds.css (L598-L610)

Easy enough to add more specific rules in Xeo, .page-navigation-tags .badge + .post-tags .badge or override .badge, if you think this change is too specific to my case, but it seemed generally useful to me.

https://github.com/lumeland/ds/blob/6d78223fe4f4d8a70519dbea15da122debefe51d/src/components/badge.css#L1-L12 I think `.badge` should have `margin` set out of the box, and also have `color` set for `:hover` so the text remains legible. My proposed changes: 1. add `margin: 0.0625rem 0.03125rem;` or similar, you may have different thoughts about units/ratios. 2. add `color: var(--color-dim);` to `&:hover` ```css .badge { border: 1px solid var(--color-line); color: var(--color-dim); margin: 0.0625rem 0.03125rem; padding: 0.2em 0.6em; border-radius: 4px; text-decoration: none; display: inline-block; &:hover { color: var(--color-dim); background-color: var(--color-line); } } ``` See change in action in Tags section here, try toggling the new rules on and off to see why I added them: https://rdela.com/archive/ Code: https://github.com/rdela/rdela.com/blob/2f29ca03af1dd6f177a4805a2555398f4628103c/_includes/css/ds.css#L598-L610 Easy enough to add more specific rules in Xeo, `.page-navigation-tags .badge` + `.post-tags .badge` or override `.badge`, if you think this change is too specific to my case, but it seemed generally useful to me.

oscarotero commented 2026年01月19日 19:22:49 +01:00

I'm not a fan of a margin out of the box for components, because it's responsability of the layout. For example, you can use the badge in a flex container with a gap. The container should be the responsable to specify that separation. A component should adapt to the container (the same reason why I don't like to apply width or height values).

Regarding the color, I'm agree. But I'd like to change the way to apply these variables to components. My idea is something like this:

.badge {
 /** Settings */
 --color: var(--color-dim);
 --background: transparent;
 --line: var(--color-line);
 --color-hover: var(--color);
 --background-hover: var(--color-line);
 --line-hover: var(--line);
 /** Implementation */
 color: var(--color);
 background-color: var(--background);
 border-color: var(--line);
 &:hover {
 color: var(--color-hover);
 background-color: var(--background-hover);
 border-color: var(--line-hover);
 }
}

This allows to create new variations easily. For example:

.badge.is-danger {
 --color: red;
 --color-hover: darkred;
}

This strategy is what I'm using in my current work and works great, because I don't need to see the implementation details to create a variation or modify the default settings, just see the list of variables defined at the top.

I'm not a fan of a `margin` out of the box for components, because it's responsability of the layout. For example, you can use the `badge` in a flex container with a gap. The container should be the responsable to specify that separation. A component should adapt to the container (the same reason why I don't like to apply width or height values). Regarding the color, I'm agree. But I'd like to change the way to apply these variables to components. My idea is something like this: ```css .badge { /** Settings */ --color: var(--color-dim); --background: transparent; --line: var(--color-line); --color-hover: var(--color); --background-hover: var(--color-line); --line-hover: var(--line); /** Implementation */ color: var(--color); background-color: var(--background); border-color: var(--line); &:hover { color: var(--color-hover); background-color: var(--background-hover); border-color: var(--line-hover); } } ```` This allows to create new variations easily. For example: ```css .badge.is-danger { --color: red; --color-hover: darkred; } ``` This strategy is what I'm using in my current work and works great, because I don't need to see the implementation details to create a variation or modify the default settings, just see the list of variables defined at the top.

oscarotero commented 2026年01月19日 19:57:55 +01:00

FYI, this is my CSS style guide that I try to follow: https://github.com/oscarotero/css-style-guide/

FYI, this is my CSS style guide that I try to follow: https://github.com/oscarotero/css-style-guide/

rdela commented 2026年01月19日 21:22:24 +01:00 (Migrated from github.com)

Whee, deployed even https://oscarotero.github.io/css-style-guide/

Whee, deployed even https://oscarotero.github.io/css-style-guide/

oscarotero commented 2026年01月19日 21:27:14 +01:00

FYI I created this branch to work on the new 0.6.x version: https://github.com/lumeland/ds/tree/v0.6

It's W.I.P, I have to test it with Simple Blog/Wiki/etc and probably need changes.
Feel free to make changes if you want :)

FYI I created this branch to work on the new 0.6.x version: https://github.com/lumeland/ds/tree/v0.6 It's W.I.P, I have to test it with Simple Blog/Wiki/etc and probably need changes. Feel free to make changes if you want :)

rdela commented 2026年01月19日 21:28:01 +01:00 (Migrated from github.com)

This is brilliant, like the component settings idea a lot...

Regarding the color, [I] agree. But I'd like to change the way to apply these variables to components. My idea is something like this:

.badge {
 /** Settings */
 --color: var(--color-dim);
[...]
 /** Implementation */
 color: var(--color);
[...]
 &:hover {
 color: var(--color-hover);
[...]

This allows to create new variations easily. For example:

.badge.is-danger {
 --color: red;
 --color-hover: darkred;
}

This strategy is what I'm using in my current work and works great, because I don't need to see the implementation details to create a variation or modify the default settings, just see the list of variables defined at the top.

This is brilliant, like the component settings idea a lot... > Regarding the color, [I] agree. But I'd like to change the way to apply these variables to components. My idea is something like this: > ```css > .badge { > /** Settings */ > --color: var(--color-dim); > [...] > /** Implementation */ > color: var(--color); > [...] > &:hover { > color: var(--color-hover); > [...] > ``` > This allows to create new variations easily. For example: > ```css > .badge.is-danger { > --color: red; > --color-hover: darkred; > } > ``` > This strategy is what I'm using in my current work and works great, because I don't need to see the implementation details to create a variation or modify the default settings, just see the list of variables defined at the top.