React.js Blueprint Colors Usage

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications.

In this article, we’ll discuss React.js Blueprint Colors Usage. Colors are a very important component used in styling a web application. The React.js Blueprint provides variables for colors to use in Sass, Less, and JavaScript languages.

Blueprint Colors Usage:

• Blueprint in Sass: Blueprint colors are used in Sass scripting language which is a preprocessor style sheet language compiled into CSS.
• Blueprint in Less: Blueprint colors are used in Less which is a dynamic preprocessor style sheet language compiled into CSS.
• Blueprint in JavaScript: Blueprint colors are used in JavaScript as Blueprint is React based library which uses JavaScript.

Syntax:

// Color usage in Sass
@import "~@blueprintjs/core/lib/scss/variables";
 
.rule {
    background: $red;
}

// Color usage in Less
@import "~@blueprintjs/core/lib/less/variables";
.rule {
    background: @Red;
}

// Color usage in JavaScript
import { Colors } from "@blueprintjs/core";

<div style={{ background: Colors.RED }} />

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npm create-react-app appname

Step 2: After creating your project folder i.e. appname, move to it using the following command:

cd appname

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @blueprintjs/core

Project Structure:

Example 1: Below example demonstrates the usage of colors in Sass.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./App.scss";

function App() {
    return (
        <center>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>ReactJS BluePrint Colors Usage</h1>
            </div>
            <div>
                <div
                    className="button"
                    style={{
                        padding: 20,
                        textAlign: "center",
                        width: 100,
                        borderRadius: 50,
                    }}
                >
                    Sass
                </div>
            </div>
        </center>
    );
}

export default App;

CSS

/* Write SASS Here */
@import "~@blueprintjs/core/lib/scss/variables";

.button {
    color: $white;
    background: $blue1;
}

Output:

Example 2: Below example demonstrates the usage of colors in Less.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import "./App.less"

function App() {
    return (
        <center>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>ReactJS BluePrint Colors Usage</h1>
            </div>
            <div>
                <div
                    className="button"
                    style={{
                        padding: 20,
                        textAlign: "center",
                        width: 100,
                        borderRadius: 50,
                    }}
                >
                    Less
                </div>
            </div>
        </center>
    );
}

export default App;

CSS

/* Write Less Here */
@import "~@blueprintjs/core/lib/less/variables";

.button {
    color: @white;
    background: @black;
}

Output:

Example 3: Below example demonstrates the usage of colors in JavaScript.

Javascript

import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Colors } from "@blueprintjs/core";

function App() {
    return (
        <center>
            <div style={{ padding: 20, textAlign: "center",
                color: "green" }}>
                <h1>ReactJS BluePrint Colors Usage</h1>
            </div>
            <div>
                <div
                    style={{
                        padding: 20,
                        color: Colors.WHITE,
                        background: Colors.GREEN3,
                        width: 100,
                        height: 50,
                        borderRadius: 50,
                        textAlign: "center",
                    }}
                >
                    Click
                </div>
            </div>
        </center>
    );
}

export default App;

Output:

Reference: https://blueprintjs.com/docs/#core/colors.usage