Laravel Installation
Let's get started with creating a new Laravel project.
Start by creating a new Laravel project with Inertia and React using the laravel installer laravel new my-app:
laravel new my-app --typescript --breeze --stack=react --git --no-interaction
Navigate to the project directory
cd my-app
Install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Configure the template paths in tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.tsx",
],
theme: {
extend: {},
},
plugins: [],
};
Add Tailwind CSS directives to your app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Start the development server
npm run dev
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: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.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 app.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 run dev
That's it! You're all set to start building your Laravel project with UI ASTRA.