ClayLink styles

[carloslancha]

As Lexicon defines there are two link styles, primary and secondary

https://lexicondesign.io/docs/patterns/link.html

Do we have classes for that?

[pat270]

@carloslancha There is no link-primary or link-secondary. I don't want to add that. It's too easy to implement and too hard to update in the future. We will have a lot of link-primary and link-secondary scattered all over the place. I've been implementing link colors by component e.g. breadcrumb-link, .card-link, .card-title a.

[carloslancha]

@pat270 since lexicon defines those two link styles ClayLink component should be able to provide it (Imagine for example that Collaboration team wants to use the component in blogs, out of the rest of components we're implementing)

[pat270]

This is exactly the use case I'm trying to prevent. From a CSS framework perspective having generic color classes scattered throughout an application lose meaning once you start deviating from whatever the base themes styles are.

[carloslancha]

But it's not the same like, for example, btn-primary? There we're defining that the button is blue with color in white. In the same way Lexicon defines primary and secondary links.

[pat270]

Links are way more common than buttons. The colors for links in Lexicon have changed several times throughout the design process. Something recent for example are the panel link colors (went from secondary to #272833):


If link-secondary was used we would have to change the markup to link-title or have link-secondary be the same color as link-title in panels. Not that big a deal right now, but if there were changes like this after a code freeze or release we would have issues. This also makes theming really difficult because there will be no consistent pattern with link colors anywhere in our product.

[jbalsas]

Hey @pat270, I think the question is... how do we implement the different types of links right now?

How do we produce:

Primary Text Alone Link
Color: primary blue
Font weight: semibold
Hover: primary blue darken 5% color + underline

Secondary Text Alone Link
Color: secondary gray
Font weight: semibold
Hover: primary gray color + underline

[pat270]

@jbalsas, Right now, there is no generic class to style the links that way. I would be ok with adding generic link styles if they were named something like:

Inline Link Blue => just a regular anchor tag (blue, underline on hover)

The ones below shouldn't be used in components that already have link styles (pretty much every Clay component, I missed some that need to be fixed)

Inline Link Gray => .component-link (gray, underline on hover)
Single Link Blue => .stand-alone-link-primary (blue, bold, darker and underline on hover), assuming this is equivalent to `.btn-primary`
Single Link Gray => .stand-alone-link-secondary (gray, bold, darker and underline on hover), assuming this is equivalent to `.btn-secondary`
Title Link       => .component-title a (#272834, 1.5rem, semi-bold, margin-bottom: 0, line-height:1.2, underline on hover)
Subtitle Link    => .component-subtitle a (secondary, 1rem, semi-bold, margin-bottom: 0, line-height: 1.2, underline on hover)
External Link    => .external-link

If component teams want different font-size, margin, or styles in general for their title/subtitle, set it using a css selector (.blog .component-title {font-size: 1rem;}) instead of a h1-6 tag. Markup should look like:

<h# class="component-title">
	<a href="/somewhere"></a>
</h#>

Text Truncate:
<h# class="component-title">
	<span class="text-truncate-inline">
		<a class="text-truncate" href="/somewhere"></a>
	</span>
</h#>

In the screenshot, Juan Anton Torres user name should use markup:

<p class="component-subtitle">
	<a href="/somehwere">Juan Anton Torres</a>
	4/9/17
</p>

Read more should use:

<a class="stand-alone-link-secondary" href="/readmore">Read More</a>