DEV Community: Shubhdeep Chhabra

What is Design Tokens? How to create a Design Token in react?

Shubhdeep Chhabra — Sat, 05 Nov 2022 03:33:08 +0000

Have you ever heard of Design tokens?
Design tokens, to put it simply, are all the CSS-related values of your product that are kept in one location and utilized as needed.

Simple? Isn't it?😅

And it is more simple to use and implement also.

Let's deep dive and learn how to create one 🚀🚀.

We will be creating a React app with a CSS-in-JS library named Styled Components.

Styled Components Basics would be helpful if you are new to the Styled Components.

Just want to let you know, we will not learn how to write code instead we will be focusing on the practice to store and create design tokens in an app.

Let's begin the steps: -

Install Styled Components and create a new React app using the Guide to construct a new React App.

OR

You may make use of your ongoing project.
Create a basic component, for now, I am creating a profile card. Make a profile card as seen below without worrying about the design token.

If you are creating on your own, otherwise 👇

Here is the code for that component.
Codesandbox link

There are no design tokens in this.

Now there is a task for you -> change the color of the button and all social media links and decrease the size of the text by 2px.

Hope you completed the task, So I want to ask my last question here - don't you feel that you kept changing the same value at different locations?
If yes, I think you understand the need for design tokens.

Let's create some.

Here is the Codesandbox link of the project but with design tokens.

Understanding how we developed the design token is crucial.
For the sake of the example, we made an object with two keys that represented the theme: light and dark.

export default {
  light: {
    fontSize: {
      text: {
        small: 20,
        medium: 23,
        large: 30
      },
      button: {
        small: 15,
        medium: 17,
        large: 20
      }
    },
    color: {
      text: {
        primary: "#252525",
        secondary: "#26235C",
        white1: "#FFFFFF"
      },
      background: {
        primary: "#FFFFFF"
      },
      border: {
        primary: "#26235C"
      },
      button: {
        blue1: "#26235C"
      },
      icon: {
        blue1: "#26235C",
        yellow1: "#F7DF1E",
        black1: "#000000"
      }
    },
    fontWeight: {
      small: 200,
      medium: 400,
      large: 700
    }
  },
  dark: {
    fontSize: {
      text: {
        small: 20,
        medium: 23,
        large: 30
      },
      button: {
        small: 15,
        medium: 17,
        large: 20
      }
    },
    color: {
      text: {
        primary: "#FFFFFF",
        secondary: "#A79AE0",
        white1: "#FFFFFF"
      },
      background: {
        primary: "#26235C"
      },
      border: {
        primary: "#A79AE0"
      },
      button: {
        blue1: "rgba(144, 130, 236, 0.65)"
      },
      icon: {
        blue1: "#A79AE0",
        yellow1: "#F7DF1E",
        black1: "#000000"
      }
    },
    fontWeight: {
      small: 200,
      medium: 400,
      large: 700
    }
  }
};

You can see that we assigned values for text size, button color, background color, and all other CSS attributes used in our profile card here.

And these are used everywhere instead of hard coding the colors.

We now have a central location for changing the CSS properties like button color, etc wherever needed.

Isn't that easy?
And design tokens are exactly this.

Although not all aspects, such as having distinct styles for various screen sizes, are covered by this example.
But understanding is sufficient to begin making your own Design Tokens.

Depending on the product, a design token may have a variety of layers.

That's the end of this blog.

I hope you find this helpful. 🙌 Please tell me in the comments. 📪

Happy reading

For more of this type of stuff, follow me on Twitter — @ShubhInTech

Structuring SEO and Format of a page in Next.js Effectively

Shubhdeep Chhabra — Sat, 10 Sep 2022 18:33:28 +0000

Organizing your Next.js application and using components.

Imagine you want to use Next.js to build an application and that you want each page to have a distinct SEO strategy as well as the same header, footer, and navbar.

What you can manage to do?

The simple option is to build a shared component that is called repeatedly on each page.

But, You might try this 👇

I hope you have already developed a Next.js app before reading this.
If not, visit this page 👉 https://nextjs.org/docs/getting-started
Create two components with the names Format and SEOSetup in a new folder called components inside the src directory.
This component, “Format,” refers to the layout of the page.
Here, in this case, the layout of every page will be in this flow Navbar then Main content, and then a Footer.
And, We are therefore defining it below 👇

import { FC } from 'react';

import Footer from '../Footer';
import Navbar  from '../Navbar';

const Format: FC = (props) => {
  return (
    <>
      <Navbar />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};

export default Format;

In SEOSetup, we’re really constructing a common tag with data supplied as props for the meta and title tag fields. So that we may utilize this SEOSetup component each time we need to define SEO-related information on a page rather than creating a head tag repeatedly.

import Head from 'next/head';

export interface MetaData {
  title: string;
  description: string;
}

const SEOSetup: FC<MetaData> = (props) => {
  const {
    title,
    description,    
  } = props;

return (
    <Head>
      <title>{title}</title>
      <meta name={'title'} content={title} />
      <meta name={'description'} content={description} />
    </Head>
  );
};

export default SEOSetup;

Finally, utilize them on a page. Here we are just wrapping the page with the Format component and setting up SEO with our custom SEOSetup tag.

import type { NextPage } from 'next'

import Format from '../components/Format';
import SEOSetup from '../components/SEOSetup';

const Home: NextPage = () => {
  return (
    <Format>
      <SEOSetup
        title="This is title of the Home Page"
        description="This is description of Home Page"
      />
      <div>
        This is Home Page.
      </div>
    </Format>
  )
}

export default Home;

DEV Community: Shubhdeep Chhabra

What is Design Tokens? How to create a Design Token in react?

Structuring SEO and Format of a page in Next.js Effectively

Shortcut for theme toggle. Dark/Light theme