Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
En este artículo, veremos Primer CSS Colors . Primer CSS proporciona clases de utilidad de color para establecer el color del texto, el fondo y el borde .
Primer CSS Clases de colores de texto:
- color-fg-default: esta clase se utiliza para establecer el color del texto en el color predeterminado.
- color-fg-muted: esta clase se usa para establecer el color del texto en el color silenciado.
- color-fg-subtle: esta clase se usa para establecer el color del texto en un color sutil.
- color-fg-accent: esta clase se utiliza para establecer el color del texto en el color de acento.
- color-fg-success: esta clase se utiliza para establecer el color del texto en el color de éxito.
- color-fg-attention: esta clase se usa para establecer el color del texto en el color de atención.
- color-fg-severe: esta clase se usa para establecer el color del texto en el color severo.
- color-fg-danger: esta clase se utiliza para establecer el color del texto en el color de peligro.
- color-fg-open: esta clase se usa para establecer el color del texto en el color abierto.
- color-fg-closed: esta clase se usa para establecer el color del texto en el color cerrado.
- color-fg-done: esta clase se usa para establecer el color del texto en el color terminado.
- color-fg-sponsors: Esta clase se utiliza para establecer el color del texto al color del patrocinador.
- color-fg-on-emphasis: esta clase se utiliza para establecer el color del texto en el color de énfasis.
Sintaxis :
<div class="Text-Colors-Class">
...
</div>
Primer CSS Clases de colores de fondo:
- color-bg-default: esta clase se utiliza para establecer el color de fondo en el color predeterminado.
- color-bg-overlay: esta clase se utiliza para establecer el color de fondo en el color de superposición.
- color-bg-inset: esta clase se utiliza para establecer el color de fondo en el color del recuadro.
- color-bg-subtle: esta clase se usa para establecer el color de fondo en un color sutil.
- color-bg-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis.
- color-bg-accent: esta clase se utiliza para establecer el color de fondo en el color de énfasis.
- color-bg-accent-emphasis: esta clase se usa para establecer el color de fondo en el color de énfasis.
- color-bg-success: esta clase se utiliza para establecer el color de fondo en el color de éxito.
- color-bg-success-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis de éxito.
- color-bg-attention: esta clase se utiliza para establecer el color de fondo en el color de atención.
- color-bg-attention-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis de atención.
- color-bg-severe: esta clase se usa para establecer el color de fondo en el color severo.
- color-bg-severe-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis severo.
- color-bg-danger: esta clase se utiliza para establecer el color de fondo en el color de peligro.
- color-bg-danger-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis de peligro.
- color-bg-open: esta clase se usa para establecer el color de fondo en el color abierto.
- color-bg-open-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis abierto.
- color-bg-closed: esta clase se usa para establecer el color de fondo en el color cerrado.
- color-bg-closed-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis cerrado.
- color-bg-done: esta clase se usa para establecer el color de fondo en el color terminado.
- color-bg-done-emphasis: esta clase se usa para establecer el color de fondo en el color de énfasis terminado.
- color-bg-sponsors: esta clase se utiliza para establecer el color de fondo en el color del patrocinador.
- color-bg-sponsors-emphasis: esta clase se utiliza para establecer el color de fondo en el color de énfasis del patrocinador.
- color-bg-transparent: esta clase se utiliza para establecer el color de fondo en el color transparente.
Sintaxis:
<div class="Background-Colors-Class">
...
</div>
Primer CSS Clases de color de borde:
- color-border-default: esta clase se utiliza para establecer el color del borde en el color predeterminado.
- color-border-muted: esta clase se usa para establecer el color del borde en el color silenciado.
- color-border-sutil: esta clase se usa para establecer el color del borde en un color sutil.
- color-border-accent: esta clase se utiliza para establecer el color del borde en el color de acento.
- color-border-accent-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis.
- color-border-success: esta clase se utiliza para establecer el color del borde en el color de éxito.
- color-border-success-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis de éxito.
- color-border-atención: esta clase se utiliza para establecer el color del borde en el color de atención.
- color-border-attention-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis de atención.
- color-border-severe: esta clase se usa para establecer el color del borde en el color severo.
- color-border-severe-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis severo.
- color-border-danger: esta clase se utiliza para establecer el color del borde en el color de peligro.
- color-border-danger-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis de peligro.
- color-border-open: esta clase se utiliza para establecer el color del borde en el color abierto.
- color-border-open-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis abierto.
- color-border-closed: esta clase se utiliza para establecer el color del borde en el color cerrado.
- color-border-closed-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis cerrado.
- color-border-done: esta clase se usa para establecer el color del borde en el color terminado.
- color-border-done-emphasis: esta clase se usa para establecer el color del borde en el color de énfasis hecho.
- color-border-sponsors: esta clase se utiliza para establecer el color del borde en el color del patrocinador.
- color-border-sponsors-emphasis: esta clase se utiliza para establecer el color del borde en el color de énfasis del patrocinador.
Sintaxis:
<div class="Border-Color-Class">
...
</div>
Ejemplo 1: Este ejemplo muestra el uso de las clases Primer CSS Text Color para cambiar el color del texto.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title> Text Colors - Primer CSS </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.8.2/dist/primer.css" />
<style>
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4> Primer CSS - Text Colors </h4>
</div>
<div class="d-flex flex-items-center flex-column">
<p class="color-fg-accent mb-2 mt-5">
Accent Colored Text
</p>
<p class="color-fg-success mb-2">
Success Colored Text
</p>
<p class="color-fg-attention mb-2">
Attention Colored Text
</p>
<p class="color-fg-danger mb-2">
Danger Colored Text
</p>
<p class="color-fg-done mb-2">
Done Colored Text
</p>
<p class="color-fg-open mb-2">
Open Colored Text
</p>
<p class="color-fg-closed mb-2">
Closed Colored Text
</p>
</div>
</body>
</html>
Producción:
Primer color de texto CSS
Ejemplo 2: este ejemplo ilustra el uso de las clases de color de fondo de Primer CSS para cambiar el color de fondo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title> Background Colors - Primer CSS </title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.8.2/dist/primer.css" />
<style>
p{
font-size: 20px;
}
</style>
</head>
<body>
<div class="text-center">
<h2 style="color:green">
GeeksforGeeks
</h2>
<h4> Primer CSS - Background Colors </h4>
</div>
<div class="d-flex flex-items-center flex-column">
<p class="color-bg-accent mb-3 mt-5">
Accent Colored Background
</p>
<p class="color-bg-accent-emphasis mb-2">
Emphasised Accent Colored Background
</p>
<p class="color-bg-subtle mb-2">
Subtle Colored Background
</p>
<p class="color-bg-danger mb-2">
Danger Colored Background
</p>
<p class="color-bg-done mb-2">
Done Colored Background
</p>
<p class="color-bg-open-emphasis mb-2">
Emphasised Open Colored Background
</p>
<p class="color-bg-closed mb-2">
Closed Colored Background
</p>
</div>
</body>
</html>
Producción:
Primer CSS Color de fondo
Ejemplo 3: Este ejemplo muestra el uso de las clases Primer CSS Border Color para establecer el color del borde alrededor de un elemento.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title> Border Colors - Primer CSS </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^19.8.2/dist/primer.css" /> </head> <body> <div class="text-center"> <h2 style="color:green"> GeeksforGeeks </h2> <h4> Primer CSS - Border Colors </h4> </div> <div class="d-flex flex-items-center flex-column"> <p class="color-border-accent border mb-3 p-2 mt-5"> Accent Colored Border </p> <p class="color-border-accent-emphasis border p-2 mb-3"> Emphasised Accent Colored Border </p> <p class="color-border-severe border p-2 mb-3"> Severe Colored Border </p> <p class="color-border-attention border p-2 mb-3"> Attention Colored Border </p> <p class="color-border-default border p-2 mb-3"> Default Colored Border </p> <p class="color-border-muted border p-2 mb-3"> Muted Colored Border </p> <p class="color-border-closed border p-2 mb-3"> Closed Colored Border </p> </div> </body> </html>
Producción:
Primer color de borde CSS
Referencia: https://primer.style/css/utilities/colors
Publicación traducida automáticamente
Artículo escrito por prakhara306 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA