Color schemes in Frontastic components

In a Frontastic component schema, you're able to put in basically any field your team agrees on (as mentioned in the Frontastic schemas article).

One of these is adding colors. However, you wouldn't want to add a color picker as this means a Frontastic studio user could add any color they wanted. We'd assume that you'd want to stick with your brand colors. So, in this article, we'll show you how to add your brand colors to your project and then make them available as setting in a Frontastic component.

1. Add your brand colors
In your project.yml, you can add your brand colors under the theme heading, for example:

data:
  layout:
    theme:
      colors:
        primary:
          100: "#EBF4FF"
          200: "#C3DAFE"
          300: "#A3BFFA"
          400: "#7F9CF5"
          500: "#667EEA"
          600: "#5A67D8"
          700: "#4C51BF"
          800: "#434190"
          900: "#3C366b"
        secondary:
          100: "#E6FFFA"
          200: "#B2F5EA"
          300: "#81E6D9"
          400: "#4FD1C5"
          500: "#38B2AC"
          600: "#319795"
          700: "#2C7A7B"
          800: "#285E61"
          900: "#234E52"
        neutral:
          100: "#F7FAFC"
          200: "#EDF2F7"
          300: "#E2E8F0"
          400: "#CBD5E0"
          500: "#A0AEC0"
          600: "#718096"
          700: "#4A5568"
          800: "#2D3748"
          900: "#1A202C"
        system:
          error: "#C53030"
          warning: "#ECC94B"
          green: "#38A169"
        background:
          primary: "#FFFFFF"

📘
We're basing this on how the Tailwind CSS color palette works, which saves us from explaining what classes like text-black-200 or bg-primary-600 are.

You can set as many or as few as you like.

2. Add the color option to a Frontastic component
You'll then need to add this into your Frontastic component schema in the studio as well as the jsx version in your GitHub repository.

Say you want to add a Call to Action (CTA) button with the option to change the color and text. You can create a schema like the below:

{
    "tasticType": "frontastic/examples/button",
    "name": "Button",
    "category": "Buttons",
    "icon": "info",
    "schema": [
        {
            "name": "Button Configuration",
            "fields": [
                 {
                    "label": "Label",
                    "field": "label",
                    "translatable": false,
                    "type": "string",
                    "default": "Click me"
                },
                {
                    "label": "Color Scheme",
                    "field": "colorScheme",
                    "type": "enum",
                    "default": "primary",
                    "values": [
                        {
                            "name": "Primary",
                            "value": "primary"
                        },
                        {
                            "name": "Secondary",
                            "value": "secondary"
                        },
                        {
                            "name": "Neutral",
                            "value": "neutral"
                        }
                    ]
                }
            ]
        }
    ]
}

Once you've created the schema to the Frontastic studio and added it to a page, you'll see the settings panel like this:

3. Create the jsx file for the Frontastic component
Then you'll need to add the jsx version of the Frontastic component and add it to your GitHub customer repository.

import React from 'react';

const buttonTastic = ({ data }) => {
  return <button className={`bg-${data.colorScheme}-500 px-4 py-2 text-white`}>{data.label}</button>;
};

export default buttonTastic;

You'll also need to register the Frontastic component in your tastics.js file as you usually would.