search

IBM-Design / idr

The IBM Design Research site.
Apache License 2.0
5 stars 4 forks source link

Home page: Reduce line weight of underline in intro text. #137

Closed mjabbink closed 2 years ago

mjabbink commented 5 years ago

@RyanCaruthers and Jeannie Servaas/Shixie can spec but I think already done.

@alisonjoseph Carbon component issue but needs to be resolved since this is lingering too long.

Screen Shot 2019-09-04 at 7 39 05 PM
alisonjoseph commented 5 years ago

I can get this updated in the theme for this large text. this is with a border-bottom of 1px. Is there a spec somewhere so I can get the distance/thickness correct for this font size? The above thick border is just the default browser text-decoration: underline for text that size.

Screen Shot 2019-09-04 at 9 09 27 PM
mjabbink commented 5 years ago

Jeannie can provide spec. It’s a bit far away in your sketch

shixiedesign commented 5 years ago

A bit of context: we changed spec from box-shadow to text-decoration in June because link no longer display as block correctly. See issue https://github.com/carbon-design-system/carbon/issues/3059 where this is discussed. So link styling is changed to text-decoration: underline so we don't break the users.

I'm not sure about border, but any overrides in Gatsby theme, it should be fine. If we want to change the link component Carbon's core, we'd have to do it incrementally, adding a new link component and label old as deprecated...so people who are already using Link have time to switch other.

vpicone commented 5 years ago

One advantage of using text decoration is that you get nice styling around the descenders.

Screen Shot 2019-09-24 at 2 59 29 PM

text-decoration-thickness is coming (but only supported by firefox and safari at the moment).

mjabbink commented 5 years ago

that is a must. It cannot go under the descender.

mjabbink commented 4 years ago

@vpicone still an issue here. Did we resolve in Gatsby theme? The line is too think here

mjabbink commented 4 years ago

We should include Jeannie to help sort out the spec.

mjabbink commented 4 years ago

@jeanservaas

vpicone commented 4 years ago

@mjabbink Controlling the thickness of link underlines isn't yet possible in every browser. We can add the property and browsers that recognize it will use it, however Chrome and Edge don't yet support it.

I'm going to move this issue to Carbon and open a PR to add the rule. It's a matter of when, not if Chrome and Edge add support, once they do it'll 'just work' so I feel comfortable adding it now.

mjabbink commented 4 years ago

@vpicone ok, this one is mega low priority compared to the other stuff we have cooking. I’m totally fine as is until the time comes.

vpicone commented 4 years ago

Opened https://github.com/IBM/plex/issues/293 to make sure the thickness is intentional before trying to solve this with css.

sstrubberg commented 4 years ago

Is this still an issue on does the conversation on the Plex repo resolve it?

alisonjoseph commented 2 years ago

this appears resolved.