Gatsby Installation
Let's get started with creating a new Gatsby project.
npm init gatsby
On installation, you'll have to choose the project options according to your needs.
✔ What would you like to call your site?
· my-app
✔ What would you like to name the folder where your site will be created?
· my-app
✔ Will you be using JavaScript or TypeScript?
· TypeScript
✔ Will you be using a CMS?
· Choose whatever you want
✔ Would you like to install a styling system?
· Tailwind CSS
✔ Would you like to install additional features with other plugins?
· Choose whatever you want
✔ Shall we do this? (Y/n) · Yes
Gatsby will then create a project folder.
Navigate to the project directory
cd my-app
Configure tsconfig.json
Add the following code to the tsconfig.json file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
// ...
}
}
Configure gatsby-node.ts
Create a gatsby-node.ts file at the root of your project if it doesn’t already exist, and add the code below to the gatsby-node file so your app can resolve paths:
# (so you can import "path" without error)
npm i -D @types/node
import * as path from "path";
export const onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
});
};
Configure the template paths in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Add Tailwind CSS directives to your globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Configuring Utilities for UI ASTRA
Let's start by installing the required dependencies for styling our components.
npm i clsx tailwind-merge tailwindcss-animate tailwind-scrollbar class-variance-authority
Add a utils.ts file
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
This is the basic setup for the tailwind.config.js file we will be using.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
fontSize: {
h1: "80px",
h2: "64px",
h3: "56px",
h4: "40px",
h5: "32px",
h6: "28px",
h7: "24px",
button: "16px",
"big-regular-text": "18px",
"regular-text-01": "16px",
"regular-text-02": "14px",
"small-regular-text": "12px",
footer: "9px",
},
lineHeight: {
h1: "84px",
h2: "72px",
h3: "60px",
h4: "44px",
h5: "36px",
h6: "32px",
h7: "32px",
button: "18px",
"big-regular-text": "20px",
"regular-text-01": "18px",
"regular-text-02": "20px",
"small-regular-text": "16px",
footer: "12px",
},
fontWeight: {
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900,
},
colors: {
//for UI Astra colors
uiastra: {
primary: "hsl(var(--uiastra-primary))",
secondary: "hsl(var(--uiastra-secondary))",
},
color: {
primary: {
100: "hsl(var(--color-primary-100))",
},
},
//for heading text and paragraph text
neutral: {
50: "hsl(var(--neutral-50))",
100: "hsl(var(--neutral-100))",
200: "hsl(var(--neutral-200))",
300: "hsl(var(--neutral-300))",
400: "hsl(var(--neutral-400))",
500: "hsl(var(--neutral-500))",
600: "hsl(var(--neutral-600))",
700: "hsl(var(--neutral-700))",
800: "hsl(var(--neutral-800))",
900: "hsl(var(--neutral-900))",
950: "hsl(var(--neutral-950))",
1000: "hsl(var(--neutral-1000))",
1050: "hsl(var(--neutral-1050))",
1100: "hsl(var(--neutral-1100))",
1150: "hsl(var(--neutral-1150))",
gray: {
100: "hsl(var(--neutral-gray-100))",
200: "hsl(var(--neutral-gray-200))",
300: "hsl(var(--neutral-gray-300))",
400: "hsl(var(--neutral-gray-400))",
500: "hsl(var(--neutral-gray-500))",
600: "hsl(var(--neutral-gray-600))",
700: "hsl(var(--neutral-gray-700))",
800: "hsl(var(--neutral-gray-800))",
900: "hsl(var(--neutral-gray-900))",
950: "hsl(var(--neutral-gray-950))",
},
},
grayscale: {
surface: {
DEFAULT: "hsl(var(--grayscale-surface))",
subtle: {
DEFAULT: "hsl(var(--grayscale-surface-subtle))",
},
hover: "hsl(var(--grayscale-surface-hover))",
bg1: "hsl(var(--grayscale-surface-bg1))",
bg2: "hsl(var(--grayscale-surface-bg2))",
},
border: {
DEFAULT: "hsl(var(--grayscale-border))",
hover: "hsl(var(--grayscale-border-hover))",
pressed: "hsl(var(--grayscale-border-pressed))",
},
textIcon: {
DEFAULT: "hsl(var(--grayscale-textIcon))",
title: "hsl(var(--grayscale-textIcon-title))",
body: "hsl(var(--grayscale-textIcon-body))",
subtitle: "hsl(var(--grayscale-textIcon-subtitle))",
caption: "hsl(var(--grayscale-textIcon-caption))",
negative: "hsl(var(--grayscale-textIcon-negative))",
disable: "hsl(var(--grayscale-textIcon-disable))",
textButton: "hsl(var(--grayscale-textIcon-text-button))",
},
},
"gray-50": "#f4f4f4",
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
siteBackground: "hsl(var(--site-background))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
50: "hsl(var(--primary-50))",
100: "hsl(var(--primary-100))",
200: "hsl(var(--primary-200))",
300: "hsl(var(--primary-300))",
400: "hsl(var(--primary-400))",
500: "hsl(var(--primary-500))",
600: "hsl(var(--primary-600))",
700: "hsl(var(--primary-700))",
800: "hsl(var(--primary-800))",
900: "hsl(var(--primary-900))",
950: "hsl(var(--primary-950))",
surface: {
DEFAULT: "hsl(var(--primary-surface))",
subtle: {
DEFAULT: "hsl(var(--primary-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--primary-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--primary-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--primary-border))",
hover: "hsl(var(--primary-border-hover))",
dark: {
DEFAULT: "hsl(var(--primary-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--primary-textIcon-link-label))",
},
},
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
50: "hsl(var(--secondary-50))",
100: "hsl(var(--secondary-100))",
200: "hsl(var(--secondary-200))",
300: "hsl(var(--secondary-300))",
400: "hsl(var(--secondary-400))",
500: "hsl(var(--secondary-500))",
600: "hsl(var(--secondary-600))",
700: "hsl(var(--secondary-700))",
800: "hsl(var(--secondary-800))",
900: "hsl(var(--secondary-900))",
950: "hsl(var(--secondary-950))",
surface: {
DEFAULT: "hsl(var(--secondary-surface))",
subtle: {
DEFAULT: "hsl(var(--secondary-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--secondary-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--secondary-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--secondary-border))",
hover: "hsl(var(--secondary-border-hover))",
dark: {
DEFAULT: "hsl(var(--secondary-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--secondary-textIcon-link-label))",
},
},
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
info: {
50: "hsl(var(--info-50))",
100: "hsl(var(--info-100))",
200: "hsl(var(--info-200))",
300: "hsl(var(--info-300))",
400: "hsl(var(--info-400))",
500: "hsl(var(--info-500))",
600: "hsl(var(--info-600))",
700: "hsl(var(--info-700))",
800: "hsl(var(--info-800))",
900: "hsl(var(--info-900))",
950: "hsl(var(--info-900))",
surface: {
DEFAULT: "hsl(var(--info-surface))",
subtle: {
DEFAULT: "hsl(var(--info-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--info-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--info-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--info-border))",
hover: "hsl(var(--info-border-hover))",
dark: {
DEFAULT: "hsl(var(--info-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--info-textIcon-link-label))",
},
},
},
error: {
50: "hsl(var(--error-50))",
100: "hsl(var(--error-100))",
200: "hsl(var(--error-200))",
300: "hsl(var(--error-300))",
400: "hsl(var(--error-400))",
500: "hsl(var(--error-500))",
600: "hsl(var(--error-600))",
700: "hsl(var(--error-700))",
800: "hsl(var(--error-800))",
900: "hsl(var(--error-900))",
950: "hsl(var(--error-900))",
surface: {
DEFAULT: "hsl(var(--error-surface))",
subtle: {
DEFAULT: "hsl(var(--error-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--error-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--error-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--error-border))",
hover: "hsl(var(--error-border-hover))",
dark: {
DEFAULT: "hsl(var(--error-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--error-textIcon-link-label))",
},
},
},
success: {
50: "hsl(var(--success-50))",
100: "hsl(var(--success-100))",
200: "hsl(var(--success-200))",
300: "hsl(var(--success-300))",
400: "hsl(var(--success-400))",
500: "hsl(var(--success-500))",
600: "hsl(var(--success-600))",
700: "hsl(var(--success-700))",
800: "hsl(var(--success-800))",
900: "hsl(var(--success-900))",
950: "hsl(var(--success-900))",
surface: {
DEFAULT: "hsl(var(--success-surface))",
subtle: {
DEFAULT: "hsl(var(--success-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--success-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--success-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--success-border))",
hover: "hsl(var(--success-border-hover))",
dark: {
DEFAULT: "hsl(var(--success-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--success-textIcon-link-label))",
},
},
},
warning: {
50: "hsl(var(--warning-50))",
100: "hsl(var(--warning-100))",
200: "hsl(var(--warning-200))",
300: "hsl(var(--warning-300))",
400: "hsl(var(--warning-400))",
500: "hsl(var(--warning-500))",
600: "hsl(var(--warning-600))",
700: "hsl(var(--warning-700))",
800: "hsl(var(--warning-800))",
900: "hsl(var(--warning-900))",
950: "hsl(var(--warning-900))",
surface: {
DEFAULT: "hsl(var(--warning-surface))",
subtle: {
DEFAULT: "hsl(var(--warning-surface-subtle))",
},
light: {
DEFAULT: "hsl(var(--warning-surface-light))",
},
dark: {
DEFAULT: "hsl(var(--warning-surface-dark))",
},
},
border: {
DEFAULT: "hsl(var(--warning-border))",
hover: "hsl(var(--warning-border-hover))",
dark: {
DEFAULT: "hsl(var(--warning-border-dark))",
},
},
textIcon: {
link: {
label: "hsl(var(--warning-textIcon-link-label))",
},
},
},
button: {
surface: {
DEFAULT: "hsl(var(--button-surface))",
hover: "hsl(var(--button-surface-hover))",
},
border: {
DEFAULT: "hsl(var(--button-border))",
hover: "hsl(var(--button-border-hover))",
},
},
dark: {
overlay: {
white: {
50: "hsl(var(--dark-overlay-white) / 0.05)",
100: "hsl(var(--dark-overlay-white) / 0.1)",
200: "hsl(var(--dark-overlay-white) / 0.2)",
300: "hsl(var(--dark-overlay-white) / 0.3)",
400: "hsl(var(--dark-overlay-white) / 0.4)",
500: "hsl(var(--dark-overlay-white) / 0.5)",
600: "hsl(var(--dark-overlay-white) / 0.6)",
700: "hsl(var(--dark-overlay-white) / 0.7)",
800: "hsl(var(--dark-overlay-white) / 0.8)",
900: "hsl(var(--dark-overlay-white) / 0.9)",
950: "hsl(var(--dark-overlay-white) / 1)",
},
black: {
50: "hsl(var(--dark-overlay-black) / 0.05)",
100: "hsl(var(--dark-overlay-black) / 0.1)",
200: "hsl(var(--dark-overlay-black) / 0.2)",
300: "hsl(var(--dark-overlay-black) / 0.3)",
400: "hsl(var(--dark-overlay-black) / 0.4)",
500: "hsl(var(--dark-overlay-black) / 0.5)",
600: "hsl(var(--dark-overlay-black) / 0.6)",
700: "hsl(var(--dark-overlay-black) / 0.7)",
800: "hsl(var(--dark-overlay-black) / 0.8)",
900: "hsl(var(--dark-overlay-black) / 0.9)",
950: "hsl(var(--dark-overlay-black) / 1)",
},
},
mode: {
10: "hsl(var(--dark-mode-10))",
20: "hsl(var(--dark-mode-20))",
30: "hsl(var(--dark-mode-30))",
40: "hsl(var(--dark-mode-40))",
50: "hsl(var(--dark-mode-50))",
100: "hsl(var(--dark-mode-100))",
200: "hsl(var(--dark-mode-200))",
300: "hsl(var(--dark-mode-300))",
400: "hsl(var(--dark-mode-400))",
500: "hsl(var(--dark-mode-500))",
600: "hsl(var(--dark-mode-600))",
700: "hsl(var(--dark-mode-700))",
800: "hsl(var(--dark-mode-800))",
900: "hsl(var(--dark-mode-900))",
950: "hsl(var(--dark-mode-950))",
},
},
shape: {
white: "hsl(var(--shape-white))",
dark: "hsl(var(--shape-dark))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
"2.25xl": "1.125rem",
"2.5xl": "1.25rem",
"4xl": "2rem",
"5xl": "2.5rem",
},
keyframes: {
"accordion-down": {
from: { height: 0 },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: 0 },
},
blob: {
"0%": {
transform: "translate(0px, 0px) scale(1)",
},
"33%": {
transform: "translate(30px, -50px) scale(1.1)",
},
"66%": {
transform: "translate(-20px, 20px) scale(0.9)",
},
"100%": {
transform: "translate(0px, 0px) scale(1)",
},
},
"blob-reverse": {
"100%": {
transform: "translate(0px, 0px) scale(1)",
},
"66%": {
transform: "translate(30px, -50px) scale(1.1)",
},
"33%": {
transform: "translate(-20px, 20px) scale(0.9)",
},
"0%": {
transform: "translate(0px, 0px) scale(1)",
},
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
blob: "blob 7s infinite",
"blob-reverse": "blob-reverse 7s infinite",
},
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
"radial-gradient2":
"radial-gradient(84.36% 117.29% at 124.77% 112.89%, rgba(55, 243, 255, 0.20) 0%, rgba(55, 243, 255, 0.00) 100%), radial-gradient(64.58% 75.2% at 1.93% 0.58%, rgba(15, 234, 182, 0.20) 0%, rgba(15, 234, 182, 0.00) 100%), linear-gradient(117deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.16) 100%)",
"default-gradient":
"linear-gradient(92.38deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%)",
"info-gradient":
"linear-gradient(274deg, rgba(0, 77, 229, 0.00) 0%, rgba(0, 77, 229, 0.10) 100%)",
"warning-gradient":
"linear-gradient(274deg, rgba(255, 191, 0, 0.00) 0%, rgba(255, 191, 0, 0.10) 100%)",
"success-gradient":
"linear-gradient(274deg, rgba(45, 198, 86, 0.00) 0%, rgba(45, 198, 86, 0.10) 100%)",
"error-gradient":
"linear-gradient(274deg, rgba(255, 60, 53, 0.00) 0%, rgba(255, 60, 53, 0.10) 100%)",
},
backgroundColor: {
"linear-gradient":
"linear-gradient(117deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.16) 100%)",
},
boxShadow: {
"default-box-shadow":
"0px 2px 4px 0px rgba(242, 244, 247, 0.04), 0px 56px 112px 0px rgba(242, 244, 247, 0.08)",
"info-box-shadow":
"0px 2px 4px 0px rgba(0, 77, 229, 0.04), 0px 56px 112px 0px rgba(0, 77, 229, 0.08)",
"warning-box-shadow":
"0px 2px 4px 0px rgba(255, 191, 0, 0.04), 0px 56px 112px 0px rgba(255, 191, 0, 0.08)",
"success-box-shadow":
"0px 2px 4px 0px rgba(45, 198, 86, 0.04), 0px 56px 112px 0px rgba(45, 198, 86, 0.08)",
"error-box-shadow":
"0px 2px 4px 0px rgba(255, 60, 53, 0.04), 0px 56px 112px 0px rgba(255, 60, 53, 0.08)",
"tooltip-box-shadow":
"0px 24px 48px -8px rgba(17, 18, 37, 0.06), 0px 2px 4px 0px rgba(17, 18, 37, 0.06)",
"elevation-xs": "0px 2px 4px 0px rgba(90, 94, 107, 0.10)",
"elevation-sm":
"0px 16px 32px -4px rgba(90, 94, 107, 0.04), 0px 2px 4px 0px rgba(90, 94, 107, 0.08)",
"elevation-md":
"0px 24px 48px -8px rgba(90, 94, 107, 0.06), 0px 2px 4px 0px rgba(90, 94, 107, 0.12)",
"elevation-lg":
"0px 34px 9px 0px rgba(90, 94, 107, 0.00), 0px 22px 9px 0px rgba(90, 94, 107, 0.01), 0px 12px 7px 0px rgba(90, 94, 107, 0.05), 0px 5px 5px 0px rgba(90, 94, 107, 0.09), 0px 1px 3px 0px rgba(90, 94, 107, 0.10)",
"elevation-xl":
"0px 54px 15px 0px rgba(90, 94, 107, 0.00), 0px 35px 14px 0px rgba(90, 94, 107, 0.01), 0px 20px 12px 0px rgba(90, 94, 107, 0.05), 0px 9px 9px 0px rgba(90, 94, 107, 0.09), 0px 2px 5px 0px rgba(90, 94, 107, 0.10)",
"elevation-xxl":
"0px 103px 29px 0px rgba(90, 94, 107, 0.00), 0px 66px 26px 0px rgba(90, 94, 107, 0.01), 0px 37px 22px 0px rgba(90, 94, 107, 0.05), 0px 17px 17px 0px rgba(90, 94, 107, 0.09), 0px 4px 9px 0px rgba(90, 94, 107, 0.10)",
},
},
borderWidth: {
DEFAULT: "1px",
1.5: "1.5px",
2: "2px",
},
},
plugins: [
require("tailwindcss-animate"),
// eslint-disable-next-line @typescript-eslint/no-var-requires
require("tailwind-scrollbar")({
nocompatible: true,
preferredStrategy: "pseudoelements",
}),
],
};
Expand
Here's the globals.css file we will be using.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
--site-background: 0 0% 100%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 166 100% 41%;
--primary-foreground: 210 40% 98%;
--secondary: 184 100% 61%;
--secondary-foreground: 166 100% 41%;
--muted: 184 100% 61%;
--muted-foreground: 215.4 16.3% 46.9%;
--accent: 184 100% 61%;
--accent-foreground: 166 100% 41%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--neutral-gray-950: 240, 37%, 7%;
--neutral-gray-900: 237 37% 11%;
--neutral-gray-800: 233 18% 19%;
--neutral-gray-700: 235 13% 29%;
--neutral-gray-600: 0 10% 40%;
--neutral-gray-500: 226 7% 50%;
--neutral-gray-400: 224 7% 60%;
--neutral-gray-300: 235 21% 87%;
--neutral-gray-200: 220 38% 96%;
--neutral-gray-100: 220 33% 98%;
--neutral-gray-50: 210 20% 98%;
--uiastra-primary: 166 100% 41%;
--uiastra-secondary: 184 100% 61%;
--color-primary-100: 166, 100%, 88%;
--primary-50: 166 100% 94%;
--primary-100: 166 100% 88%;
--primary-200: 166 100% 76%;
--primary-300: 166 100% 65%;
--primary-400: 166 100% 53%;
--primary-500: 166 100% 41%;
--primary-600: 166 100% 33%;
--primary-700: 166 100% 25%;
--primary-800: 166 100% 16%;
--primary-900: 166 100% 8%;
--primary-950: 166 100% 4%;
--secondary-50: 183 100% 96%;
--secondary-100: 184 100% 92%;
--secondary-200: 184 100% 84%;
--secondary-300: 184 100% 76%;
--secondary-400: 184 100% 69%;
--secondary-500: 184 100% 61%;
--secondary-600: 184 100% 49%;
--secondary-700: 184 100% 36%;
--secondary-800: 184 100% 24%;
--secondary-900: 184 100% 12%;
--secondary-950: 184 100% 6%;
--info-50: 219 100% 94%;
--info-100: 220 100% 89%;
--info-200: 220 100% 78%;
--info-300: 220 100% 67%;
--info-400: 220 100% 56%;
--info-500: 220 100% 45%;
--info-600: 222 100% 38%;
--info-700: 224 100% 32%;
--info-800: 220 100% 26%;
--info-900: 220 100% 9%;
--info-950: 220 100% 4%;
--error-50: 0 100% 96%;
--error-100: 3 100% 92%;
--error-200: 2 100% 84%;
--error-300: 2 100% 76%;
--error-400: 2 100% 68%;
--error-500: 2 100% 60%;
--error-600: 2 100% 48%;
--error-700: 2 100% 36%;
--error-800: 2 100% 24%;
--error-900: 2 100% 12%;
--error-950: 2 100% 6%;
--success-50: 139 62% 95%;
--success-100: 136 65% 90%;
--success-200: 136 63% 79%;
--success-300: 136 63% 69%;
--success-400: 136 63% 58%;
--success-500: 136 63% 48%;
--success-600: 136 63% 38%;
--success-700: 136 64% 29%;
--success-800: 136 63% 19%;
--success-900: 136 65% 10%;
--success-950: 135 62% 5%;
--warning-50: 46 100% 95%;
--warning-100: 45 100% 90%;
--warning-200: 45 100% 80%;
--warning-300: 45 100% 70%;
--warning-400: 45 100% 60%;
--warning-500: 45 100% 50%;
--warning-600: 45 100% 40%;
--warning-700: 45 100% 30%;
--warning-800: 45 100% 20%;
--warning-900: 45 100% 10%;
--warning-950: 45 100% 5%;
--neutral-50: 210 20% 98%;
--neutral-100: 210 13% 97%;
--neutral-200: 204 11% 96%;
--neutral-300: 210 12% 87%;
--neutral-400: 208 13% 81%;
--neutral-500: 210 13% 75%;
--neutral-600: 211 13% 68%;
--neutral-700: 210 13% 60%;
--neutral-800: 209 12% 50%;
--neutral-900: 210 12% 35%;
--neutral-950: 208 12% 30%;
--neutral-1000: 210 13% 25%;
--neutral-1050: 210 13% 15%;
--neutral-1100: 214 12% 11%;
--neutral-1150: 210 11% 7%;
--dark-overlay-black: 0 0% 0%;
--dark-overlay-white: 0 0% 100%;
--dark-mode-950: 0 0% 7%;
--dark-mode-900: 0 0% 8%;
--dark-mode-800: 0 0% 12%;
--dark-mode-700: 0 0% 13%;
--dark-mode-600: 0 0% 14%;
--dark-mode-500: 0 0% 15%;
--dark-mode-400: 0 0% 17%;
--dark-mode-300: 0 0% 18%;
--dark-mode-200: 0 0% 20%;
--dark-mode-100: 0 0% 22%;
--dark-mode-50: 0 0% 33%;
--dark-mode-40: 0 0% 47%;
--dark-mode-30: 0 0% 58%;
--dark-mode-20: 0 0% 72%;
--dark-mode-10: 0 0% 84%;
--shape-white: 0 0% 100%;
--shape-dark: 0 0% 0%;
--site-background: 0 0% 12%;
--grayscale-surface: 200 13% 95%; /* 204 11% 96%; */
--grayscale-surface-subtle: 210 20% 98%;
--grayscale-surface-bg1: 210 20% 98%;
--grayscale-surface-bg2: 210 13% 97%;
--grayscale-surface-hover: 204 11% 96%;
--grayscale-border: 210 12% 87%;
--grayscale-border-hover: 208 13% 81%;
--grayscale-border-pressed: 21 13% 68%;
--grayscale-textIcon-title: 214 12% 11%;
--grayscale-textIcon-subtitle: 210 12% 35%;
--grayscale-textIcon-body: 209 12% 50%;
--grayscale-textIcon-caption: 210 13% 60%;
--grayscale-textIcon-negative: 210 20% 98%;
--grayscale-textIcon-disable: 210 12% 87%;
--grayscale-textIcon-text-button: 210, 20%, 98%;
--primary-surface: 166 100% 41%;
--primary-surface-subtle: 166 100% 94%;
--primary-surface-light: 166 100% 53%;
--primary-surface-dark: 166 100% 33%;
--primary-border: 166 100% 41%;
--primary-border-hover: 166 100% 33%;
--primary-border-dark: 166 100% 25%;
--primary-textIcon-link-label: 166 100% 33%;
--secondary-surface: 184 100% 61%;
--secondary-surface-subtle: 183 100% 96%;
--secondary-surface-light: 184 100% 76%;
--secondary-surface-dark: 184 100% 36%;
--secondary-border: 184 100% 84%;
--secondary-border-hover: 184 100% 61%;
--secondary-border-dark: 184 100% 36%;
--secondary-textIcon-link-label: 184 100% 49%;
--info-surface: 220 100% 45%;
--info-surface-subtle: 219 100% 94%;
--info-surface-light: 220 100% 56%;
--info-surface-dark: 222 100% 38%;
--info-border: 220 100% 78%;
--info-border-hover: 220 100% 45%;
--info-border-dark: 224 100% 32%;
--info-textIcon-link-label: 220 100% 56%;
--error-surface: 2 100% 60%;
--error-surface-subtle: 0 100% 96%;
--error-surface-light: 2 100% 76%;
--error-surface-dark: 2 100% 36%;
--error-border: 2 100% 84%;
--error-border-hover: 2 100% 48%;
--error-border-dark: 2 100% 36%;
--error-textIcon-link-label: 2 100% 48%;
--success-surface: 136 63% 48%;
--success-surface-subtle: 139 62% 95%;
--success-surface-light: 136 63% 69%;
--success-surface-dark: 136 64% 29%;
--success-border: 136 63% 58%;
--success-border-hover: 136 63% 48%;
--success-border-dark: 136 64% 29%;
--success-textIcon-link-label: 136 63% 38%;
--warning-surface: 45 100% 50%;
--warning-surface-subtle: 46 100% 95%;
--warning-surface-light: 45 100% 70%;
--warning-surface-dark: 45 100% 30%;
--warning-border: 45 100% 60%;
--warning-border-hover: 45 100% 50%;
--warning-border-dark: 45 100% 30%;
--warning-textIcon-link-label: 45 100% 40%;
--button-surface: 210, 13%, 15%;
--button-surface-hover: 210, 11%, 7%;
--button-border: 214, 12%, 11%;
--button-border-hover: 214, 12%, 11%;
}
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 166 100% 41%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
--neutral-gray-950: 0 0% 100%;
--neutral-gray-900: 0 0% 90%;
--neutral-gray-800: 0 0% 80%;
--neutral-gray-700: 0 0% 70%;
--neutral-gray-600: 0 0% 60%;
--neutral-gray-500: 0 0% 50%;
--neutral-gray-400: 0 0% 40%;
--neutral-gray-300: 0 0% 30%;
--neutral-gray-200: 0 0% 25%;
--neutral-gray-100: 0 0% 21%;
--grayscale-surface: 210 13% 15%;
--grayscale-surface-subtle: 0 0% 12%;
--grayscale-surface-bg1: 210 11% 7%;
--grayscale-surface-bg2: 214 12% 11%;
--grayscale-surface-hover: 210 13% 15%;
--grayscale-border: 210 13% 25%;
--grayscale-border-hover: 208 12% 30%;
--grayscale-border-pressed: 210 12% 87%;
--grayscale-textIcon-title: 204 11% 96%;
--grayscale-textIcon-subtitle: 210 12% 87%;
--grayscale-textIcon-body: 210 20% 98%;
--grayscale-textIcon-caption: 210 13% 60%;
--grayscale-textIcon-negative: 209 12% 50%;
--grayscale-textIcon-disable: 210 12% 35%;
--grayscale-textIcon-text-button: 210, 11%, 7%;
--primary-border: 166 100% 53%;
--primary-border-hover: 166 100% 41%;
--secondary-surface-light: 184 100% 69%;
--secondary-surface-dark: 184 100% 49%;
--secondary-textIcon-link-label: 184 100% 69%;
--error-surface-light: 2 100% 68%;
--error-surface-dark: 2 100% 48%;
--error-textIcon-link-label: 2 100% 60%;
--success-surface-light: 136 63% 58%;
--success-surface-dark: 136 63% 38%;
--success-border: 136 63% 79%;
--success-textIcon-link-label: 136 63% 58%;
--warning-surface-light: 45 100% 60%;
--warning-surface-dark: 45 100% 40%;
--warning-border: 45 100% 80%;
--warning-textIcon-link-label: 45 100% 60%;
--button-surface: 210, 20%, 98%;
--button-surface-hover: 204, 11%, 96%;
--button-border: 210, 13%, 97%;
--button-border-hover: 210, 12%, 87%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-grayscale-surface-bg2 text-foreground;
}
/* Shiki Styles used for theme switching */
html.dark .shiki,
html.dark .shiki span {
color: var(--shiki-dark) !important;
background-color: var(--shiki-dark-bg) !important;
/* Optional, if you also want font styles */
font-style: var(--shiki-dark-font-style) !important;
font-weight: var(--shiki-dark-font-weight) !important;
text-decoration: var(--shiki-dark-text-decoration) !important;
}
/* autofill styles removal */
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition:
background-color 0s 600000s,
color 0s 600000s !important;
}
}
@layer utilities {
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
/* to avoid blue highlight on tap or click */
.no-highlights {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-webkit-tap-highlight-color: transparent;
}
/* Frame Bottom */
.frame-bottom {
position: fixed;
bottom: 0;
left: 4rem;
z-index: 40;
width: calc(100% - 8rem); /* Accounting for border 3px [1.5 + 1.5]*/
height: 2rem;
background-color: rgb(255 255 255 / 0.65);
border-top-width: 1.5px;
border-color: rgb(255 255 255);
backdrop-filter: blur(0.5rem);
@apply dark:bg-[#191c20d0] dark:border-dark-mode-800;
}
.frame-bottom::before {
content: "";
position: absolute;
left: calc(-2rem - 1.5px); /* Accounting for border */
background-color: transparent;
bottom: calc(2rem - 1.3px); /* Accounting for border */
height: calc(4rem + 1.5px); /* Accounting for border */
width: calc(4rem + 1.5px); /* Accounting for border */
border-bottom-left-radius: 2rem;
border-bottom-width: 1.5px;
border-left-width: 1.5px;
border-color: rgb(255 255 255);
box-shadow: -2rem 2rem 0 0 rgb(255 255 255 / 0.65);
@apply dark:shadow-[-2rem_2rem_0_0_#191c20d0] dark:border-dark-mode-800;
}
.frame-bottom::after {
content: "";
position: absolute;
right: calc(-2rem - 1.3px); /* Accounting for border */
background-color: transparent;
bottom: calc(2rem - 1.3px); /* Accounting for border */
height: calc(4rem + 1.5px); /* Accounting for border */
width: calc(4rem + 1.5px); /* Accounting for border */
border-bottom-right-radius: 2rem;
border-bottom-width: 1.5px;
border-right-width: 1.5px;
border-color: rgb(255 255 255);
box-shadow: 2rem 2rem 0 0 rgb(255 255 255 / 0.65);
@apply dark:shadow-[2rem_2rem_0_0_#191c20d0] dark:border-dark-mode-800;
}
/* Frame Left */
.frame-left {
position: fixed;
top: calc(5rem + 2rem); /* 5rem [header]*/
left: 0;
z-index: 40;
width: 2rem;
height: calc(100% - 11rem);
background-color: rgb(255 255 255 / 0.65);
border-right-width: 1.5px;
border-color: rgb(255 255 255);
backdrop-filter: blur(0.5rem);
@apply dark:bg-[#191c20d0] dark:border-dark-mode-800;
}
/* Curved shadow element */
.frame-left::before {
content: "";
position: absolute;
left: calc(2rem - 1.5px); /* Accounting for border */
top: calc(-2rem - 1.5px); /* Accounting for border */
background-color: transparent;
height: calc(4rem + 5rem + 1.5px); /* Accounting for border and header */
width: calc(4rem + 1.5px); /* Accounting for border */
border-top-left-radius: 2rem;
border-top-width: 1.5px;
border-left-width: 1.5px;
border-color: rgb(255 255 255);
box-shadow: -2rem -7rem 0rem 0 rgb(255 255 255 / 0.65);
@apply dark:shadow-[-2rem_-7rem_0_0_#191c20d0] dark:border-dark-mode-800;
}
/* For medium screens */
@media (max-width: 1024px) {
/* Curved shadow element */
.frame-left::before {
content: "";
position: absolute;
left: calc(2rem - 1.5px); /* Accounting for border */
top: calc(-2rem - 1.5px); /* Accounting for border */
background-color: transparent;
height: calc(4rem + 5rem + 1.5px); /* Accounting for border and header */
width: calc(4rem + 1.5px); /* Accounting for border */
border-top-left-radius: 2rem;
border-top-width: 1.5px;
border-left-width: 1.5px;
border-color: rgb(255 255 255);
box-shadow: -2rem -7rem 0.2rem 0 rgb(255 255 255 / 0.65);
@apply dark:shadow-[-2rem_-7rem_0.2rem_0_#191c20d0] dark:border-dark-mode-800;
}
}
/* Frame Right */
.frame-right {
position: fixed;
top: calc(5rem + 2rem); /* 5rem [header]*/
right: 0;
z-index: 40;
width: 2rem;
height: calc(100% - 11rem);
background-color: rgb(255 255 255 / 0.65);
border-left-width: 1.5px;
border-color: rgb(255 255 255);
backdrop-filter: blur(0.5rem);
@apply dark:bg-[#191c20d0] dark:border-dark-mode-800;
}
.frame-right::before {
content: "";
position: absolute;
right: calc(2rem - 1.3px); /* Accounting for border */
top: calc(-2rem - 1.5px); /* Accounting for border */
background-color: transparent;
height: calc(4rem + 5rem + 1.5px); /* Accounting for border + header */
width: calc(4rem + 1.5px); /* Accounting for border */
border-top-right-radius: 2rem;
border-top-width: 1.5px;
border-right-width: 1.5px;
border-color: rgb(255 255 255);
box-shadow: 2rem -7rem 0rem 0 rgb(255 255 255 / 0.65);
@apply dark:shadow-[2rem_-7rem_0_0_#191c20d0] dark:border-dark-mode-800;
}
/* Dock */
.frame-dock {
position: fixed;
right: 0;
z-index: 41;
width: 7rem;
height: 30rem;
background-color: rgb(255 255 255 / 0.65);
backdrop-filter: blur(1rem);
clip-path: path(
"M118 1V0H80V34.4786C80 46.5896 73.6456 57.8126 63.2605 64.0437L31.0723 83.3566C11.7951 94.9229 0 115.755 0 138.236V352.764C0 375.245 11.7951 396.077 31.0723 407.643L64.5005 427.7C74.1163 433.47 80 443.861 80 455.075V463.5 487L123 487Z"
);
@apply dark:bg-[#191c20d0];
}
.gradientBorder {
border: 2px solid transparent;
background: linear-gradient(
to right,
rgba(15, 255, 199, 0.25) 25%,
rgba(15, 255, 199, 0.1) 100%
);
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.nav-item {
@apply px-4 py-2 text-sm rounded-2xl leading-[1.375rem] font-medium bg-transparent
transition duration-300 ease-in-out;
}
.scrollbar-primary {
@apply scrollbar-thin scrollbar-thumb-uiastra-primary
scrollbar-thumb-rounded-full hover:scrollbar-thumb-uiastra-primary/80;
}
/* Color Picker styles */
.picker-gradient {
border: 3px solid #fff;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.47) 47%,
#000 100%
),
linear-gradient(269deg, rgba(255, 255, 255, 0) 0.22%, #fff 98.85%),
#0080ff;
box-shadow:
0px 103px 29px 0px rgba(5, 246, 227, 0),
0px 66px 26px 0px rgba(5, 246, 227, 0.01),
0px 37px 22px 0px rgba(5, 246, 227, 0.05),
0px 17px 17px 0px rgba(5, 246, 227, 0.09),
0px 4px 9px 0px rgba(5, 246, 227, 0.1);
}
.custom-picker .react-colorful {
@apply h-[314px] w-auto;
}
.custom-picker .react-colorful__saturation {
@apply mb-4 rounded-2.5xl outline-[2px] outline outline-white/20 -outline-offset-[2px] border-b-[3px] h-[250px] aspect-square;
}
.custom-picker .react-colorful__hue {
@apply mb-4 rounded-full h-4 outline-[1.5px] outline outline-white/40 -outline-offset-[1.5px] w-[96%] mx-auto;
}
.custom-picker .react-colorful__alpha {
@apply rounded-full h-4 outline-[1.5px] outline outline-white/40 -outline-offset-[1.5px] w-[96%] mx-auto;
}
.custom-picker .react-colorful__saturation-pointer {
@apply border-1.5 size-5 border-white/40;
}
.custom-picker .react-colorful__hue-pointer {
@apply border-1.5 size-5 border-white/40;
}
.custom-picker .react-colorful__alpha-pointer {
@apply border-1.5 size-5 border-white/40;
}
}
Expand
Start the development server
npm start
Thats it! You're all set to start building your Gatsby project with UI ASTRA.