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-alert-gradient":
"linear-gradient(270deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(255, 255, 255, 0.5)",
"warning-alert-gradient":
"linear-gradient(270deg, rgba(255, 191, 0, 0.00) 0%, rgba(255, 191, 0, 0.10) 100%), rgba(255, 255, 255, 0.5)",
"success-alert-gradient":
"linear-gradient(270deg, rgba(45, 198, 86, 0.00) 0%, rgba(45, 198, 86, 0.10) 100%), rgba(255, 255, 255, 0.5)",
"error-alert-gradient":
"linear-gradient(270deg, rgba(255, 60, 53, 0) 0%, rgba(255, 60, 53, 0.1) 100%), rgba(255, 255, 255, 0.5)",
"default-alert-gradient-dark":
"linear-gradient(270deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.02) 100%), rgba(33, 38, 43, 0.50)",
"warning-alert-gradient-dark":
"linear-gradient(270deg, rgba(255, 191, 0, 0.00) 0%, rgba(255, 191, 0, 0.10) 100%), rgba(33, 38, 43, 0.50)",
"success-alert-gradient-dark":
"linear-gradient(270deg, rgba(45, 198, 86, 0.00) 0%, rgba(45, 198, 86, 0.10) 100%), rgba(33, 38, 43, 0.50)",
"error-alert-gradient-dark":
"linear-gradient(270deg, rgba(255, 60, 53, 0.00) 0%, rgba(255, 60, 53, 0.10) 100%), rgba(33, 38, 43, 0.50)",
},
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: [
// eslint-disable-next-line @typescript-eslint/no-require-imports
require("tailwindcss-animate"),
// eslint-disable-next-line @typescript-eslint/no-require-imports
require("tailwind-scrollbar")({
nocompatible: true,
preferredStrategy: "pseudoelements",
}),
],
};
Expand
Here's the globals.css file we will be using.
@import "tailwindcss";
@import "tw-animate-css";
@plugin 'tailwind-scrollbar';
@custom-variant dark (&:is(.dark *));
:root {
/* Neutral Gray Colors */
--neutral-gray-950: hsl(240 37% 7%);
--neutral-gray-900: hsl(237 37% 11%);
--neutral-gray-800: hsl(233 18% 19%);
--neutral-gray-700: hsl(235 13% 29%);
--neutral-gray-600: hsl(0 10% 40%);
--neutral-gray-500: hsl(226 7% 50%);
--neutral-gray-400: hsl(224 7% 60%);
--neutral-gray-300: hsl(235 21% 87%);
--neutral-gray-200: hsl(220 38% 96%);
--neutral-gray-100: hsl(220 33% 98%);
--neutral-gray-50: hsl(210 20% 98%);
/* Primary Colors (UI Astra) */
--uiastra-primary: hsl(166 100% 41%);
--uiastra-secondary: hsl(184 100% 61%);
/* Primary Scale */
--primary-50: hsl(166 100% 94%);
--primary-100: hsl(166 100% 88%);
--primary-200: hsl(166 100% 76%);
--primary-300: hsl(166 100% 65%);
--primary-400: hsl(166 100% 53%);
--primary-500: hsl(166 100% 41%);
--primary-600: hsl(166 100% 33%);
--primary-700: hsl(166 100% 25%);
--primary-800: hsl(166 100% 16%);
--primary-900: hsl(166 100% 8%);
--primary-950: hsl(166 100% 4%);
/* Secondary Scale */
--secondary-50: hsl(183 100% 96%);
--secondary-100: hsl(184 100% 92%);
--secondary-200: hsl(184 100% 84%);
--secondary-300: hsl(184 100% 76%);
--secondary-400: hsl(184 100% 69%);
--secondary-500: hsl(184 100% 61%);
--secondary-600: hsl(184 100% 49%);
--secondary-700: hsl(184 100% 36%);
--secondary-800: hsl(184 100% 24%);
--secondary-900: hsl(184 100% 12%);
--secondary-950: hsl(184 100% 6%);
/* Info Scale */
--info-50: hsl(219 100% 94%);
--info-100: hsl(220 100% 89%);
--info-200: hsl(220 100% 78%);
--info-300: hsl(220 100% 67%);
--info-400: hsl(220 100% 56%);
--info-500: hsl(220 100% 45%);
--info-600: hsl(222 100% 38%);
--info-700: hsl(224 100% 32%);
--info-800: hsl(220 100% 26%);
--info-900: hsl(220 100% 9%);
--info-950: hsl(220 100% 4%);
/* Error Scale */
--error-50: hsl(0 100% 96%);
--error-100: hsl(3 100% 92%);
--error-200: hsl(2 100% 84%);
--error-300: hsl(2 100% 76%);
--error-400: hsl(2 100% 68%);
--error-500: hsl(2 100% 60%);
--error-600: hsl(2 100% 48%);
--error-700: hsl(2 100% 36%);
--error-800: hsl(2 100% 24%);
--error-900: hsl(2 100% 12%);
--error-950: hsl(2 100% 6%);
/* Success Scale */
--success-50: hsl(139 62% 95%);
--success-100: hsl(136 65% 90%);
--success-200: hsl(136 63% 79%);
--success-300: hsl(136 63% 69%);
--success-400: hsl(136 63% 58%);
--success-500: hsl(136 63% 48%);
--success-600: hsl(136 63% 38%);
--success-700: hsl(136 64% 29%);
--success-800: hsl(136 63% 19%);
--success-900: hsl(136 65% 10%);
--success-950: hsl(135 62% 5%);
/* Warning Scale */
--warning-50: hsl(46 100% 95%);
--warning-100: hsl(45 100% 90%);
--warning-200: hsl(45 100% 80%);
--warning-300: hsl(45 100% 70%);
--warning-400: hsl(45 100% 60%);
--warning-500: hsl(45 100% 50%);
--warning-600: hsl(45 100% 40%);
--warning-700: hsl(45 100% 30%);
--warning-800: hsl(45 100% 20%);
--warning-900: hsl(45 100% 10%);
--warning-950: hsl(45 100% 5%);
/* Neutral Scale */
--neutral-50: hsl(210 20% 98%);
--neutral-100: hsl(210 13% 97%);
--neutral-200: hsl(204 11% 96%);
--neutral-300: hsl(210 12% 87%);
--neutral-400: hsl(208 13% 81%);
--neutral-500: hsl(210 13% 75%);
--neutral-600: hsl(211 13% 68%);
--neutral-700: hsl(210 13% 60%);
--neutral-800: hsl(209 12% 50%);
--neutral-900: hsl(210 12% 35%);
--neutral-950: hsl(208 12% 30%);
--neutral-1000: hsl(210 13% 25%);
--neutral-1050: hsl(210 13% 15%);
--neutral-1100: hsl(214 12% 11%);
--neutral-1150: hsl(210 11% 7%);
--light-overlay-50: hsla(0, 0%, 100%, 0.05);
--light-overlay-100: hsla(0, 0%, 100%, 0.1);
--light-overlay-200: hsla(0, 0%, 100%, 0.2);
--light-overlay-300: hsla(0, 0%, 100%, 0.3);
--light-overlay-400: hsla(0, 0%, 100%, 0.4);
--light-overlay-500: hsla(0, 0%, 100%, 0.5);
--light-overlay-600: hsla(0, 0%, 100%, 0.6);
--light-overlay-700: hsla(0, 0%, 100%, 0.7);
--light-overlay-800: hsla(0, 0%, 100%, 0.8);
--light-overlay-900: hsla(0, 0%, 100%, 0.9);
--light-overlay-950: hsla(0, 0%, 100%, 1);
--dark-overlay-50: hsla(210, 13%, 15%, 0.05);
--dark-overlay-100: hsla(210, 13%, 15%, 0.1);
--dark-overlay-200: hsla(210, 13%, 15%, 0.2);
--dark-overlay-300: hsla(210, 13%, 15%, 0.3);
--dark-overlay-400: hsla(210, 13%, 15%, 0.4);
--dark-overlay-500: hsla(210, 13%, 15%, 0.5);
--dark-overlay-600: hsla(210, 13%, 15%, 0.6);
--dark-overlay-700: hsla(210, 13%, 15%, 0.7);
--dark-overlay-800: hsla(210, 13%, 15%, 0.8);
--dark-overlay-900: hsla(210, 13%, 15%, 0.9);
--dark-overlay-950: hsla(210, 13%, 15%, 1);
/* Dark Mode Scale */
--dark-mode-950: hsl(0 0% 7%);
--dark-mode-900: hsl(0 0% 8%);
--dark-mode-800: hsl(0 0% 12%);
--dark-mode-700: hsl(0 0% 13%);
--dark-mode-600: hsl(0 0% 14%);
--dark-mode-500: hsl(0 0% 15%);
--dark-mode-400: hsl(0 0% 17%);
--dark-mode-300: hsl(0 0% 18%);
--dark-mode-200: hsl(0 0% 20%);
--dark-mode-100: hsl(0 0% 22%);
--dark-mode-50: hsl(0 0% 33%);
--dark-mode-40: hsl(0 0% 47%);
--dark-mode-30: hsl(0 0% 58%);
--dark-mode-20: hsl(0 0% 72%);
--dark-mode-10: hsl(0 0% 84%);
/* Shape Colors */
--shape-white: hsl(0 0% 100%);
--shape-dark: hsl(0 0% 0%);
--grayscale-surface: hsl(200 13% 95%); /* 204 11% 96%; */
--grayscale-surface-subtle: hsl(210 20% 98%);
--grayscale-surface-bg1: hsl(210 20% 98%);
--grayscale-surface-bg2: hsl(210 13% 97%);
--grayscale-surface-hover: hsl(204 11% 96%);
--grayscale-border: hsl(210 12% 87%);
--grayscale-border-hover: hsl(208 13% 81%);
--grayscale-border-pressed: hsl(21 13% 68%);
--grayscale-textIcon-title: hsl(214 12% 11%);
--grayscale-textIcon-subtitle: hsl(210 12% 35%);
--grayscale-textIcon-body: hsl(209 12% 50%);
--grayscale-textIcon-caption: hsl(210 13% 60%);
--grayscale-textIcon-negative: hsl(210 20% 98%);
--grayscale-textIcon-disable: hsl(210 12% 87%);
--grayscale-textIcon-text-button: hsl(210 20% 98%);
--primary-surface: hsl(166 100% 41%);
--primary-surface-subtle: hsl(166 100% 94%);
--primary-surface-light: hsl(166 100% 53%);
--primary-surface-dark: hsl(166 100% 33%);
--primary-border: hsl(166 100% 41%);
--primary-border-hover: hsl(166 100% 33%);
--primary-border-dark: hsl(166 100% 25%);
--primary-textIcon-link-label: hsl(166 100% 33%);
--secondary-surface: hsl(184 100% 61%);
--secondary-surface-subtle: hsl(183 100% 96%);
--secondary-surface-light: hsl(184 100% 76%);
--secondary-surface-dark: hsl(184 100% 36%);
--secondary-border: hsl(184 100% 84%);
--secondary-border-hover: hsl(184 100% 61%);
--secondary-border-dark: hsl(184 100% 36%);
--secondary-textIcon-link-label: hsl(184 100% 49%);
--info-surface: hsl(220 100% 45%);
--info-surface-subtle: hsl(219 100% 94%);
--info-surface-light: hsl(220 100% 56%);
--info-surface-dark: hsl(222 100% 38%);
--info-border: hsl(220 100% 78%);
--info-border-hover: hsl(220 100% 45%);
--info-border-dark: hsl(224 100% 32%);
--info-textIcon-link-label: hsl(220 100% 56%);
--error-surface: hsl(2 100% 60%);
--error-surface-subtle: hsl(0 100% 96%);
--error-surface-light: hsl(2 100% 76%);
--error-surface-dark: hsl(2 100% 36%);
--error-border: hsl(2 100% 84%);
--error-border-hover: hsl(2 100% 48%);
--error-border-dark: hsl(2 100% 36%);
--error-textIcon-link-label: hsl(2 100% 48%);
--success-surface: hsl(136 63% 48%);
--success-surface-subtle: hsl(139 62% 95%);
--success-surface-light: hsl(136 63% 69%);
--success-surface-dark: hsl(136 64% 29%);
--success-border: hsl(136 63% 58%);
--success-border-hover: hsl(136 63% 48%);
--success-border-dark: hsl(136 64% 29%);
--success-textIcon-link-label: hsl(136 63% 38%);
--warning-surface: hsl(45 100% 50%);
--warning-surface-subtle: hsl(46 100% 95%);
--warning-surface-light: hsl(45 100% 70%);
--warning-surface-dark: hsl(45 100% 30%);
--warning-border: hsl(45 100% 60%);
--warning-border-hover: hsl(45 100% 50%);
--warning-border-dark: hsl(45 100% 30%);
--warning-textIcon-link-label: hsl(45 100% 40%);
--button-surface: hsl(210 13% 15%);
--button-surface-hover: hsl(210 11% 7%);
--button-border: hsl(214 12% 11%);
--button-border-hover: hsl(214 12% 11%);
/* Base Colors */
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 3.9%);
--site-background: hsl(0 0% 100%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9%);
--primary: hsl(0 0% 9%);
--primary-foreground: hsl(0 0% 98%);
--secondary: hsl(0 0% 96.1%);
--secondary-foreground: hsl(0 0% 9%);
--muted: hsl(0 0% 96.1%);
--muted-foreground: hsl(0 0% 45.1%);
--accent: hsl(0 0% 96.1%);
--accent-foreground: hsl(0 0% 9%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 89.8%);
--input: hsl(0 0% 89.8%);
--ring: hsl(0 0% 3.9%);
/* Chart Colors */
--chart-1: hsl(12 76% 61%);
--chart-2: hsl(173 58% 39%);
--chart-3: hsl(197 37% 24%);
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
/* Radius */
--radius: 0.5rem;
}
.dark {
/* Neutral Gray Colors - Dark Mode */
--neutral-gray-950: hsl(0 0% 100%);
--neutral-gray-900: hsl(0 0% 90%);
--neutral-gray-800: hsl(0 0% 80%);
--neutral-gray-700: hsl(0 0% 70%);
--neutral-gray-600: hsl(0 0% 60%);
--neutral-gray-500: hsl(0 0% 50%);
--neutral-gray-400: hsl(0 0% 40%);
--neutral-gray-300: hsl(0 0% 30%);
--neutral-gray-200: hsl(0 0% 25%);
--neutral-gray-100: hsl(0 0% 21%);
--neutral-gray-50: hsl(0 0% 12%);
--dark-overlay-50: hsla(0, 0%, 0%, 0.05);
--dark-overlay-100: hsla(0, 0%, 0%, 0.1);
--dark-overlay-200: hsla(0, 0%, 0%, 0.2);
--dark-overlay-300: hsla(0, 0%, 0%, 0.3);
--dark-overlay-400: hsla(0, 0%, 0%, 0.4);
--dark-overlay-500: hsla(0, 0%, 0%, 0.5);
--dark-overlay-600: hsla(0, 0%, 0%, 0.6);
--dark-overlay-700: hsla(0, 0%, 0%, 0.7);
--dark-overlay-800: hsla(0, 0%, 0%, 0.8);
--dark-overlay-900: hsla(0, 0%, 0%, 0.9);
--dark-overlay-950: hsla(0, 0%, 0%, 1);
--light-overlay-50: hsla(210, 13%, 15%, 0.05);
--light-overlay-100: hsla(210, 13%, 15%, 0.1);
--light-overlay-200: hsla(210, 13%, 15%, 0.2);
--light-overlay-300: hsla(210, 13%, 15%, 0.3);
--light-overlay-400: hsla(210, 13%, 15%, 0.4);
--light-overlay-500: hsla(210, 13%, 15%, 0.5);
--light-overlay-600: hsla(210, 13%, 15%, 0.6);
--light-overlay-700: hsla(210, 13%, 15%, 0.7);
--light-overlay-800: hsla(210, 13%, 15%, 0.8);
--light-overlay-900: hsla(210, 13%, 15%, 0.9);
--light-overlay-950: hsla(210, 13%, 15%, 1);
--grayscale-surface: hsl(214 12% 11%);
--grayscale-surface-subtle: hsla(210, 11%, 7%, 1);
--grayscale-surface-bg1: hsl(210 11% 7%);
--grayscale-surface-bg2: hsl(214 12% 11%);
--grayscale-surface-hover: hsl(210 13% 15%);
--grayscale-border: hsl(210 13% 25%);
--grayscale-border-hover: hsl(208 12% 30%);
--grayscale-border-pressed: hsl(210 12% 87%);
--grayscale-textIcon-title: hsl(204 11% 96%);
--grayscale-textIcon-subtitle: hsl(210 12% 87%);
--grayscale-textIcon-body: hsl(209 12% 50%);
--grayscale-textIcon-caption: hsl(210 13% 60%);
--grayscale-textIcon-negative: hsl(209 12% 50%);
--grayscale-textIcon-disable: hsl(210 12% 35%);
--grayscale-textIcon-text-button: hsl(210 11% 7%);
--primary-surface: hsl(166 100% 41%);
--primary-surface-subtle: hsl(166 100% 94%);
--primary-surface-light: hsl(166 100% 41%);
--primary-surface-dark: hsl(166 100% 25%);
--primary-border: hsl(166 100% 41%);
--primary-border-hover: hsl(166 100% 33%);
--primary-border-dark: hsl(166 100% 25%);
--primary-textIcon-link-label: hsl(166 100% 33%);
--secondary-surface-light: hsl(184 100% 69%);
--secondary-surface-dark: hsl(184 100% 49%);
--secondary-textIcon-link-label: hsl(184 100% 69%);
--secondary-surface: hsl(184 100% 61%);
--secondary-surface-subtle: hsl(184 100% 36%);
--secondary-surface-light: hsl(184 100% 36%);
--secondary-surface-dark: hsl(184 100% 76%);
--secondary-border: hsl(184 100% 36%);
--secondary-border-hover: hsl(184 100% 61%);
--secondary-border-dark: hsl(184 100% 84%);
--secondary-textIcon-link-label: hsl(184 100% 69%);
--error-surface: hsl(2 100% 48%);
--error-surface-subtle: hsl(2 100% 36%);
--error-surface-light: hsl(2 100% 60%);
--error-surface-dark: hsl(2 100% 36%);
--error-border: hsl(2 100% 84%);
--error-border-hover: hsl(2 100% 60%);
--error-border-dark: hsl(2 100% 60%);
--error-textIcon-link-label: hsl(2 100% 68%);
--info-surface: hsl(220 100% 56%);
--info-surface-subtle: hsl(222 100% 38%);
--info-surface-light: hsl(220 100% 45%);
--info-surface-dark: hsl(219 100% 94%);
--info-border: hsl(224 100% 32%);
--info-border-hover: hsl(220 100% 45%);
--info-border-dark: hsl(220 100% 78%);
--info-textIcon-link-label: hsl(220 100% 67%);
--success-surface: hsl(136 63% 69%);
--success-surface-light: hsl(136 63% 48%);
--success-surface-dark: hsl(139 62% 95%);
--success-surface-subtle: hsl(136 64% 29%);
--success-border: hsl(136 64% 29%);
--success-border-dark: hsl(136 63% 58%);
--success-border-hover: hsl(136 63% 48%);
--success-textIcon-link-label: hsl(136 63% 58%);
--warning-surface: hsl(45 100% 70%);
--warning-surface-light: hsl(45 100% 50%);
--warning-surface-dark: hsl(45 100% 95%);
--warning-surface-subtle: hsl(45 100% 30%);
--warning-border: hsl(45 100% 30%);
--warning-border-hover: hsl(45 100% 50%);
--warning-border-dark: hsl(45 100% 60%);
--warning-textIcon-link-label: hsl(45 100% 60%);
--button-surface: hsl(210 20% 98%);
--button-surface-hover: hsl(204, 11%, 96%);
--button-border: hsl(210, 13%, 97%);
--button-border-hover: hsl(210, 12%, 87%);
/* Base Colors - Dark Mode */
--background: hsl(0 0% 3.9%);
--foreground: hsl(0 0% 98%);
--site-background: hsl(0 0% 12%);
--card: hsl(0 0% 3.9%);
--card-foreground: hsl(0 0% 98%);
--popover: hsl(0 0% 3.9%);
--popover-foreground: hsl(0 0% 98%);
--primary: hsl(0 0% 98%);
--primary-foreground: hsl(0 0% 9%);
--secondary: hsl(0 0% 14.9%);
--secondary-foreground: hsl(0 0% 98%);
--muted: hsl(0 0% 14.9%);
--muted-foreground: hsl(0 0% 63.9%);
--accent: hsl(0 0% 14.9%);
--accent-foreground: hsl(0 0% 98%);
--destructive: hsl(0 62.8% 30.6%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 14.9%);
--input: hsl(0 0% 14.9%);
--ring: hsl(0 0% 83.1%);
/* Chart Colors - Dark Mode */
--chart-1: hsl(220 70% 50%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
}
@theme inline {
/* Neutral Gray Colors */
--color-neutral-gray-950: var(--neutral-gray-950);
--color-neutral-gray-900: var(--neutral-gray-900);
--color-neutral-gray-800: var(--neutral-gray-800);
--color-neutral-gray-700: var(--neutral-gray-700);
--color-neutral-gray-600: var(--neutral-gray-600);
--color-neutral-gray-500: var(--neutral-gray-500);
--color-neutral-gray-400: var(--neutral-gray-400);
--color-neutral-gray-300: var(--neutral-gray-300);
--color-neutral-gray-200: var(--neutral-gray-200);
--color-neutral-gray-100: var(--neutral-gray-100);
--color-neutral-gray-50: var(--neutral-gray-50);
/* Primary Colors (UI Astra) */
--color-uiastra-primary: var(--uiastra-primary);
--color-uiastra-secondary: var(--uiastra-secondary);
/* Primary Scale */
--color-primary-50: var(--primary-50);
--color-primary-100: var(--primary-100);
--color-primary-200: var(--primary-200);
--color-primary-300: var(--primary-300);
--color-primary-400: var(--primary-400);
--color-primary-500: var(--primary-500);
--color-primary-600: var(--primary-600);
--color-primary-700: var(--primary-700);
--color-primary-800: var(--primary-800);
--color-primary-900: var(--primary-900);
--color-primary-950: var(--primary-950);
/* Secondary Scale */
--color-secondary-50: var(--secondary-50);
--color-secondary-100: var(--secondary-100);
--color-secondary-200: var(--secondary-200);
--color-secondary-300: var(--secondary-300);
--color-secondary-400: var(--secondary-400);
--color-secondary-500: var(--secondary-500);
--color-secondary-600: var(--secondary-600);
--color-secondary-700: var(--secondary-700);
--color-secondary-800: var(--secondary-800);
--color-secondary-900: var(--secondary-900);
--color-secondary-950: var(--secondary-950);
/* Info Scale */
--color-info-50: var(--info-50);
--color-info-100: var(--info-100);
--color-info-200: var(--info-200);
--color-info-300: var(--info-300);
--color-info-400: var(--info-400);
--color-info-500: var(--info-500);
--color-info-600: var(--info-600);
--color-info-700: var(--info-700);
--color-info-800: var(--info-800);
--color-info-900: var(--info-900);
--color-info-950: var(--info-950);
/* Error Scale */
--color-error-50: var(--error-50);
--color-error-100: var(--error-100);
--color-error-200: var(--error-200);
--color-error-300: var(--error-300);
--color-error-400: var(--error-400);
--color-error-500: var(--error-500);
--color-error-600: var(--error-600);
--color-error-700: var(--error-700);
--color-error-800: var(--error-800);
--color-error-900: var(--error-900);
--color-error-950: var(--error-950);
/* Success Scale */
--color-success-50: var(--success-50);
--color-success-100: var(--success-100);
--color-success-200: var(--success-200);
--color-success-300: var(--success-300);
--color-success-400: var(--success-400);
--color-success-500: var(--success-500);
--color-success-600: var(--success-600);
--color-success-700: var(--success-700);
--color-success-800: var(--success-800);
--color-success-900: var(--success-900);
--color-success-950: var(--success-950);
/* Warning Scale */
--color-warning-50: var(--warning-50);
--color-warning-100: var(--warning-100);
--color-warning-200: var(--warning-200);
--color-warning-300: var(--warning-300);
--color-warning-400: var(--warning-400);
--color-warning-500: var(--warning-500);
--color-warning-600: var(--warning-600);
--color-warning-700: var(--warning-700);
--color-warning-800: var(--warning-800);
--color-warning-900: var(--warning-900);
--color-warning-950: var(--warning-950);
/* Neutral Scale */
--color-neutral-50: var(--neutral-50);
--color-neutral-100: var(--neutral-100);
--color-neutral-200: var(--neutral-200);
--color-neutral-300: var(--neutral-300);
--color-neutral-400: var(--neutral-400);
--color-neutral-500: var(--neutral-500);
--color-neutral-600: var(--neutral-600);
--color-neutral-700: var(--neutral-700);
--color-neutral-800: var(--neutral-800);
--color-neutral-900: var(--neutral-900);
--color-neutral-950: var(--neutral-950);
--color-neutral-1000: var(--neutral-1000);
--color-neutral-1050: var(--neutral-1050);
--color-neutral-1100: var(--neutral-1100);
--color-neutral-1150: var(--neutral-1150);
/* Dark Mode Scale */
--color-dark-mode-950: var(--dark-mode-950);
--color-dark-mode-900: var(--dark-mode-900);
--color-dark-mode-800: var(--dark-mode-800);
--color-dark-mode-700: var(--dark-mode-700);
--color-dark-mode-600: var(--dark-mode-600);
--color-dark-mode-500: var(--dark-mode-500);
--color-dark-mode-400: var(--dark-mode-400);
--color-dark-mode-300: var(--dark-mode-300);
--color-dark-mode-200: var(--dark-mode-200);
--color-dark-mode-100: var(--dark-mode-100);
--color-dark-mode-50: var(--dark-mode-50);
--color-dark-mode-40: var(--dark-mode-40);
--color-dark-mode-30: var(--dark-mode-30);
--color-dark-mode-20: var(--dark-mode-20);
--color-dark-mode-10: var(--dark-mode-10);
/* Shape Colors */
--color-shape-white: var(--shape-white);
--color-shape-dark: var(--shape-dark);
/* Overlay Colors - Light Mode */
--color-light-overlay-50: var(--light-overlay-50);
--color-light-overlay-100: var(--light-overlay-100);
--color-light-overlay-200: var(--light-overlay-200);
--color-light-overlay-300: var(--light-overlay-300);
--color-light-overlay-400: var(--light-overlay-400);
--color-light-overlay-500: var(--light-overlay-500);
--color-light-overlay-600: var(--light-overlay-600);
--color-light-overlay-700: var(--light-overlay-700);
--color-light-overlay-800: var(--light-overlay-800);
--color-light-overlay-900: var(--light-overlay-900);
--color-light-overlay-950: var(--light-overlay-950);
/* Overlay Colors - Dark Mode */
--color-dark-overlay-50: var(--dark-overlay-50);
--color-dark-overlay-100: var(--dark-overlay-100);
--color-dark-overlay-200: var(--dark-overlay-200);
--color-dark-overlay-300: var(--dark-overlay-300);
--color-dark-overlay-400: var(--dark-overlay-400);
--color-dark-overlay-500: var(--dark-overlay-500);
--color-dark-overlay-600: var(--dark-overlay-600);
--color-dark-overlay-700: var(--dark-overlay-700);
--color-dark-overlay-800: var(--dark-overlay-800);
--color-dark-overlay-900: var(--dark-overlay-900);
--color-dark-overlay-950: var(--dark-overlay-950);
/* Grayscale System */
--color-grayscale-surface: var(--grayscale-surface);
--color-grayscale-surface-subtle: var(--grayscale-surface-subtle);
--color-grayscale-surface-bg1: var(--grayscale-surface-bg1);
--color-grayscale-surface-bg2: var(--grayscale-surface-bg2);
--color-grayscale-surface-hover: var(--grayscale-surface-hover);
--color-grayscale-border: var(--grayscale-border);
--color-grayscale-border-hover: var(--grayscale-border-hover);
--color-grayscale-border-pressed: var(--grayscale-border-pressed);
--color-grayscale-textIcon-title: var(--grayscale-textIcon-title);
--color-grayscale-textIcon-subtitle: var(--grayscale-textIcon-subtitle);
--color-grayscale-textIcon-body: var(--grayscale-textIcon-body);
--color-grayscale-textIcon-caption: var(--grayscale-textIcon-caption);
--color-grayscale-textIcon-negative: var(--grayscale-textIcon-negative);
--color-grayscale-textIcon-disable: var(--grayscale-textIcon-disable);
--color-grayscale-textIcon-text-button: var(--grayscale-textIcon-text-button);
/* Primary System */
--color-primary-surface: var(--primary-surface);
--color-primary-surface-subtle: var(--primary-surface-subtle);
--color-primary-surface-light: var(--primary-surface-light);
--color-primary-surface-dark: var(--primary-surface-dark);
--color-primary-border: var(--primary-border);
--color-primary-border-hover: var(--primary-border-hover);
--color-primary-border-dark: var(--primary-border-dark);
--color-primary-textIcon-link-label: var(--primary-textIcon-link-label);
/* Secondary System */
--color-secondary-surface: var(--secondary-surface);
--color-secondary-surface-subtle: var(--secondary-surface-subtle);
--color-secondary-surface-light: var(--secondary-surface-light);
--color-secondary-surface-dark: var(--secondary-surface-dark);
--color-secondary-border: var(--secondary-border);
--color-secondary-border-hover: var(--secondary-border-hover);
--color-secondary-border-dark: var(--secondary-border-dark);
--color-secondary-textIcon-link-label: var(--secondary-textIcon-link-label);
/* Info System */
--color-info-surface: var(--info-surface);
--color-info-surface-subtle: var(--info-surface-subtle);
--color-info-surface-light: var(--info-surface-light);
--color-info-surface-dark: var(--info-surface-dark);
--color-info-border: var(--info-border);
--color-info-border-hover: var(--info-border-hover);
--color-info-border-dark: var(--info-border-dark);
--color-info-textIcon-link-label: var(--info-textIcon-link-label);
/* Error System */
--color-error-surface: var(--error-surface);
--color-error-surface-subtle: var(--error-surface-subtle);
--color-error-surface-light: var(--error-surface-light);
--color-error-surface-dark: var(--error-surface-dark);
--color-error-border: var(--error-border);
--color-error-border-hover: var(--error-border-hover);
--color-error-border-dark: var(--error-border-dark);
--color-error-textIcon-link-label: var(--error-textIcon-link-label);
/* Success System */
--color-success-surface: var(--success-surface);
--color-success-surface-subtle: var(--success-surface-subtle);
--color-success-surface-light: var(--success-surface-light);
--color-success-surface-dark: var(--success-surface-dark);
--color-success-border: var(--success-border);
--color-success-border-hover: var(--success-border-hover);
--color-success-border-dark: var(--success-border-dark);
--color-success-textIcon-link-label: var(--success-textIcon-link-label);
/* Warning System */
--color-warning-surface: var(--warning-surface);
--color-warning-surface-subtle: var(--warning-surface-subtle);
--color-warning-surface-light: var(--warning-surface-light);
--color-warning-surface-dark: var(--warning-surface-dark);
--color-warning-border: var(--warning-border);
--color-warning-border-hover: var(--warning-border-hover);
--color-warning-border-dark: var(--warning-border-dark);
--color-warning-textIcon-link-label: var(--warning-textIcon-link-label);
/* Button System */
--color-button-surface: var(--button-surface);
--color-button-surface-hover: var(--button-surface-hover);
--color-button-border: var(--button-border);
--color-button-border-hover: var(--button-border-hover);
/* Base Colors */
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-site-background: var(--site-background);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-button-surface: var(--button-surface);
--color-button-surface-hover: var(--button-surface-hover);
--color-button-border: var(--button-border);
--color-button-border-hover: var(--button-border-hover);
/* Chart Colors */
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
/* Radius */
--radius: 0.5rem;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
/* Fonts */
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
/* Footer gradient animation */
@keyframes gentle-blink {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.footerGrad {
animation: gentle-blink 3s ease-in-out infinite;
}
/* Marquee animations - seamless infinite loop */
@keyframes marquee-left-to-right {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
@keyframes marquee-right-to-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee-vertical-left-to-right {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(-100%);
}
}
.animate-marquee {
animation: marquee-left-to-right var(--duration) linear infinite;
}
.animate-marquee-reverse {
animation: marquee-right-to-left var(--duration) linear infinite;
}
.animate-marquee-vertical {
animation: marquee-vertical-left-to-right var(--duration) linear infinite;
}
@layer utilities {
.shadow-primary-inner {
box-shadow:
inset 1px -3px 5px 3px var(--Colors-Grayscale-Text-icon-Title, #191c20),
inset 1px 5px 8px 3px var(--Colors-Grayscale-Text-icon-Subtitle, #4e5964),
0 0 0 0 rgba(25, 28, 32, 0);
}
.dark .shadow-primary-inner {
box-shadow:
inset 1px -3px 5px 3px var(--Colors-Grayscale-Text-icon-Title, #f2f4f5),
inset 1px 5px 8px 3px var(--Colors-Grayscale-Text-icon-Subtitle, #dadee2),
0 0 0 0 rgba(218, 222, 226, 0);
}
.shadow-primary-inner:hover {
box-shadow:
inset 1px -3px 5px 3px var(--Colors-Grayscale-Text-icon-Title, #191c20),
inset 1px 5px 8px 3px var(--Colors-Grayscale-Text-icon-Subtitle, #191c20),
0 8px 24px -4px rgba(25, 28, 32, 1.0);
}
.dark .shadow-primary-inner:hover {
box-shadow:
inset 1px -3px 5px 3px var(--Colors-Grayscale-Text-icon-Title, #f2f4f5),
inset 1px 5px 8px 3px var(--Colors-Grayscale-Text-icon-Subtitle, #dadee2),
0 8px 24px -4px rgba(218, 222, 226, 0.2);
}
}
Expand
Start the development server
npm start
Thats it! You're all set to start building your Gatsby project with UI ASTRA.