Manual Installation
Install Tailwind CSS
Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Add dependencies
npm install tailwindcss-animate class-variance-authority clsx tailwind-merge
Configure the path aliases
We use the @ alias. This is how we configure it in tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./*"]
}
}
}
The @ alias is a preference. You can use other aliases if you want.
Configure the template paths in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"], //adjust this according to your project structure
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}"], //adjust this according to your project structure
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
Great! now, we have our global styles set up. Let's start the server and move on to creating our first component.
Start the development server
npm run dev
Manual component installation
Here's an example of how you can install the Button component manually.
button.tsx
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { Slot } from "@radix-ui/react-slot";
import { cn } from "@/app/lib/utils";
const buttonVariants = cva(
"inline-flex cursor-pointer items-center justify-center gap-2 box-border font-medium transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-blue-300 focus-visible:ring-2 focus-visible:outline-none",
{
variants: {
variant: {
primary:
"bg-button-surface hover:bg-button-surface-hover text-grayscale-textIcon-text-button border-2 border-button-border hover:border-button-border-hover shadow-primary-inner",
secondary:
"bg-grayscale-surface hover:bg-grayscale-surface-hover text-grayscale-textIcon-title border-2 border-grayscale-border hover:border-grayscale-border-hover",
outline:
"bg-transparent text-grayscale-textIcon-body border-2 border-grayscale-border hover:border-grayscale-border-hover",
ghost:
"bg-transparent text-grayscale-textIcon-body hover:bg-grayscale-surface",
link: "underline underline-offset-4 text-grayscale-textIcon-body hover:text-grayscale-textIcon-title",
radial:
"hover:bg-[radial-gradient(50%_50%_at_50%_50%,rgba(15,234,182,50.00)_0%,rgba(15,234,182,0.00)_100%)] transition duration-300 md:text-xl rounded-full",
danger:
"bg-error-surface hover:bg-error-surface-hover text-shape-white border-2 border-error-border hover:border-error-border-hover",
},
size: {
xs: "px-5 py-2 text-xs leading-[1.5] rounded-2xl",
sm: "p-5 py-3 text-xs leading-[1.5] rounded-2xl",
md: "p-5 py-4 text-sm leading-[1.5] rounded-2xl",
lg: "p-6 py-5 text-base leading-[1.5] rounded-2.5xl",
xl: "p-6 py-6 text-base leading-[1.5] rounded-3xl",
},
pill: {
true: "rounded-full",
},
sharp: {
true: "rounded-none",
},
icon: {
true: "gap-0 h-fit w-fit",
},
},
compoundVariants: [
{
icon: true,
size: "xs",
className: "px-2 py-2",
},
{
icon: true,
size: "sm",
className: "px-3 py-3",
},
{
icon: true,
size: "md",
className: "px-4 py-4",
},
{
icon: true,
size: "lg",
className: "px-5 py-5",
},
{
icon: true,
size: "xl",
className: "px-6 py-6",
},
],
defaultVariants: {
variant: "primary",
size: "md",
},
}
);
export interface ButtonProps
extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "variant">,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(
{ variant, size, pill, sharp, icon, className, asChild = false, ...props },
ref
) => {
const Comp = asChild ? Slot : "button";
return (
<Comp
className={cn(
buttonVariants({ variant, size, pill, sharp, icon }),
className
)}
ref={ref}
{...props}
type="submit"
/>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
Expand
The above code uses the radix-ui/react-slot package. You can go ahead and install it using the following command.
npm install @radix-ui/react-slot
Now that you have the Button component installed, you can use it in your project by importing it.