Primer CSS is a CSS framework that is built upon GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture.
In this article, we will learn about one such style utility Primer CSS Text Color. This utility is used to color the text inside any element of the website.
Primer CSS Text Color Classes:
- color-fg-default: This class applies the default black text color to the element. It is applied by default.
- color-fg-overlay: This class when applied gives a slightly dark shade of white to the element’s text color.
- color-fg-emphasis: This class when applied gives a dark black color to the element’s font color.
- color-fg-accent: This class when applied gives a light blue color to the element’s font color.
- color-fg-accent-emphasis: This class when applied gives a deep blue color to the element’s font color.
- color-fg-success: This class when applied gives a light green color to the element’s font color.
- color-fg-success-emphasis: This class when applied gives a dark green color to the element’s font color.
- color-fg-attention: This class when applied gives a light yellowish color to the element’s font color.
- color-fg-attention-emphasis: This class when applied gives a darkish yellowish color to the element’s font color.
- color-fg-severe: This class when applied gives a light brown color to the element’s font color.
- color-fg-severe-emphasis: This class when applied gives a dark brown color to the element’s font color.
- color-fg-danger: This class when applied gives a light red color to the element’s font color.
- color-fg-danger-emphasis: This class when applied gives a dark red color to the element’s font color.
- color-fg-done: This class when applied gives a light violet color to the element’s font color.
- color-fg-done-emphasis: This class when applied gives a dark violet color to the element’s font color.
- color-fg-sponsors: This class when applied gives a light pink color to the element’s font color.
- color-fg-sponsors-emphasis: This class when applied gives a dark pink color to the element’s font color.
Syntax:
<div class="text-color-class"></div>
Note: By default, the black color is provided to the text of the element by Primer CSS. Adding text classes to the elements helps to override the default value.
The below examples will demonstrate the Primer CSS Colors Text Color.
Example 1: In this example, we have used different text colors for the different paragraphs.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
<h3>Primer CSS Background Color</h3>
<p class="color-fg-success">
This is the sample paragraph for displaying the
different font colors present in the Prime CSS.
It is for an article published in GeeksforGeeks website.
</p>
<p class="color-fg-danger">
This is the sample paragraph for displaying the
different font colors present in the Prime CSS.
It is for an article published in GeeksforGeeks website.
</p>
<p class="color-fg-accent">
This is the sample paragraph for displaying the
different font colors present in the Prime CSS. It is for
an article published in GeeksforGeeks website.</p>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we have created headings of different colors.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
<body>
<div>
<h2>GeeksforGeeks</h2>
<h3>Primer CSS Background Color</h3>
<h3 class="color-fg-danger">Heading First</h3>
<h3 class="color-fg-success">Heading Second</h3>
<h3 class="color-fg-alert">Heading Third</h3>
<h3 class="color-fg-accent">Heading Fourth</h3>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/colors#text