Skip to content

Commit 3773ee1

Browse files
simuraisimurai
committed
Update links
1 parent 8c9b356 commit 3773ee1

File tree

17 files changed

+146
-95
lines changed

17 files changed

+146
-95
lines changed

‎docs/content/components/links.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Links
3+
path: components/links
4+
status: New
5+
source: 'https://github.com/primer/css/tree/master/src/links'
6+
bundle: links
7+
---
8+
9+
By default `<a>` elements already use the right link color and apply an underline on hover.
10+
11+
```html live
12+
Some text with a default <a href="#url">link</a>
13+
```
14+
15+
If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.Link` class.
16+
17+
```html live
18+
Some text with a <span class="Link">span that behaves like a link</span>
19+
```
20+
21+
If you like to override the default link styles you can do so with the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
22+
23+
Use `.Link--primary` to turn the link color to blue only on hover.
24+
25+
```html live
26+
<p class="color-text-secondary">Some text with a <a class="Link--primary" href="#url">Link--primary</a></p>
27+
```
28+
29+
Use `.Link--secondary` for a more subtle link color that turns blue on hover.
30+
31+
```html live
32+
Some text with a <a class="Link--secondary" href="#url">Link--secondary</a>
33+
```
34+
35+
Use `.Link--muted` also removes the underline on hover. Tip: You can also use the `.no-underline` utility to do the same for `.Link--primary`.
36+
37+
```html live
38+
<p>Some text with a <a class="Link--secondary no-underline" href="#url">Link--muted</a></p>
39+
<p>Some text with a <a class="Link--primary no-underline" href="#url">Link--primary no-underline</a></p>
40+
```
41+
42+
Use `.Link--onHover` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
43+
44+
```html live
45+
<a class="color-text-secondary no-underline" href="#url">
46+
A link with a partial <span class="Link--onHover">Link--onHover</span>
47+
</a>
48+
```

‎docs/content/utilities/colors.mdx‎

Lines changed: 3 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Colors
33
description: 'Immutable, atomic CSS classes to rapidly build product'
4-
status: Stable
4+
status: New
55
status_issue: 'https://github.com/github/design-systems/issues/97'
66
---
77

@@ -21,6 +21,7 @@ Use text color utilities to set text to a specific color. Color contrast must pa
2121
<div class="color-text-primary mb-2">.color-text-primary</div>
2222
<div class="color-text-secondary mb-2">.color-text-secondary</div>
2323
<div class="color-text-tertiary mb-2">.color-text-tertiary</div>
24+
<div class="color-text-link mb-2">.color-text-link</div>
2425
<div class="color-text-success mb-2">.color-text-success</div>
2526
<div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
2627
<div class="color-text-danger mb-2">.color-text-danger</div>
@@ -156,39 +157,7 @@ On dark backgrounds use `border-white-fade` instead. It adds an rgba white borde
156157

157158
## Link colors
158159

159-
By default `<a>` elements already use a text color that is blue and apply an underline on hover. If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.link-primary` class.
160-
161-
```html live
162-
<span class="link-primary">link-primary</span>
163-
```
164-
165-
If you like to override the default link styles you can do so with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
166-
167-
Use `.link-secondary` to turn the link color to blue only on hover.
168-
169-
```html live
170-
<a class="link-secondary" href="#url">link-secondary</a>
171-
```
172-
173-
Use `.link-tertiary` for a more subtle link color that turns blue on hover.
174-
175-
```html live
176-
<a class="link-tertiary" href="#url">link-tertiary</a>
177-
```
178-
179-
Use `.muted-link` for a more subtle color, that turns blue on hover but with **no underline**.
180-
181-
```html live
182-
<a class="muted-link" href="#url">muted-link</a>
183-
```
184-
185-
Use `.link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
186-
187-
```html live
188-
<a class="color-text-primary no-underline" href="#url">
189-
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
190-
</a>
191-
```
160+
You can use the [Link](../components/links) component to change the link colors.
192161

193162

194163
<!-- TODO: Remove? -->

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@
9191
url: /components/header
9292
- title: Labels
9393
url: /components/labels
94+
- title: Links
95+
url: /components/links
9496
- title: Loaders
9597
url: /components/loaders
9698
- title: Markdown

‎src/base/base.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ body {
2121
}
2222

2323
a {
24-
color: var(--color-text-link-primary);
24+
color: var(--color-text-link);
2525
text-decoration: none;
2626

2727
&:hover {

‎src/box/box.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@
132132
&.navigation-focus {
133133
// Focus styles for when drag icon
134134
.Box-row--drag-button {
135-
color: var(--color-text-link-primary);
135+
color: var(--color-text-link);
136136
cursor: grab;
137137
opacity: 100;
138138
}
@@ -192,7 +192,7 @@
192192
text-decoration: none;
193193

194194
&:hover {
195-
color: var(--color-text-link-primary);
195+
color: var(--color-text-link);
196196
text-decoration: none;
197197
}
198198
}

‎src/branch-name/branch-name.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
// When a branch name is a link
2323

2424
a.branch-name {
25-
color: var(--color-text-link-primary);
25+
color: var(--color-text-link);
2626
background-color: var(--color-branch-name-link-bg);
2727

2828
.octicon {

‎src/buttons/misc.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
display: inline-block;
88
padding: 0;
99
font-size: inherit;
10-
color: var(--color-text-link-primary);
10+
color: var(--color-text-link);
1111
text-decoration: none;
1212
white-space: nowrap;
1313
cursor: pointer;
@@ -34,7 +34,7 @@
3434
//
3535
// Typically used as a "cancel" button next to a .btn
3636
.btn-invisible {
37-
color: var(--color-text-link-primary);
37+
color: var(--color-text-link);
3838
background-color: transparent; // Reset default gradient backgrounds and colors
3939
border: 0;
4040
border-radius: 0;
@@ -47,7 +47,7 @@
4747
&[aria-selected=true],
4848
&.zeroclipboard-is-hover,
4949
&.zeroclipboard-is-active {
50-
color: var(--color-text-link-primary);
50+
color: var(--color-text-link);
5151
background: none;
5252
outline: none;
5353
box-shadow: none;
@@ -71,7 +71,7 @@
7171
background: transparent;
7272
border: 0;
7373

74-
&:hover { color: var(--color-text-link-primary); }
74+
&:hover { color: var(--color-text-link); }
7575

7676
&.disabled,
7777
&[aria-disabled=true] {
@@ -183,7 +183,7 @@
183183
}
184184

185185
&:hover {
186-
color: var(--color-text-link-primary);
186+
color: var(--color-text-link);
187187
cursor: pointer;
188188
}
189189

‎src/core/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
@import "../table-object/index.scss";
2222
@import "../forms/index.scss";
2323
@import "../layout/index.scss";
24+
@import "../links/index.scss";
2425
@import "../navigation/index.scss";
2526
@import "../pagination/index.scss";
2627
@import "../tooltips/index.scss";

‎src/forms/form-validation.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ dl.form-group > dd, // TODO: Deprecate
191191
color: var(--color-text-secondary);
192192

193193
a {
194-
color: var(--color-text-link-primary);
194+
color: var(--color-text-link);
195195
}
196196
}
197197

‎src/links/README.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
bundle: "links"
3+
generated: true
4+
---
5+
6+
# Primer CSS: `links` bundle
7+
8+
## Usage
9+
10+
Primer CSS source files are written in [SCSS]. To include this Primer CSS module in your own build, ensure that your `node_modules` directory is listed in your Sass include paths, then import it with:
11+
12+
```scss
13+
@import "@primer/css/links/index.scss";
14+
```
15+
16+
## Build
17+
18+
The `@primer/css` npm package includes a standalone CSS build of this module in `dist/links.css`.
19+
20+
## License
21+
22+
[MIT](https://github.com/primer/css/blob/master/LICENSE) &copy; [GitHub](https://github.com/)
23+
24+
25+
[scss]: https://sass-lang.com/documentation/syntax#scss

0 commit comments

Comments
 (0)