Remix Installation
Let's get started with creating a new Remix project.
Start by creating a new Remix project using create-remix:
npx create-remix@latest my-app
On installation, you'll have to choose the project options according to your needs.
Initialize a new git repository?
Choose whatever you want
Install dependencies with npm?
Yes
Navigate to the project directory
cd my-app
Configure the tsconfig.json
Add the following code to the tsconfig.json file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["./app/*"]
}
// ...
}
}
Configure the vite.config.ts
Add the following code to the vite.config.ts so your app can resolve paths without error
# (so you can import "path" without error)
npm i -D @types/node
import { vitePlugin as remix } from "@remix-run/dev";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
export default defineConfig({
plugins: [
remix({
future: {
v3_fetcherPersist: true,
v3_relativeSplatPath: true,
v3_throwAbortReason: true,
},
}),
tsconfigPaths(),
],
});
Configure the template paths in tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
};
Add Tailwind CSS directives to your tailwind.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.ts file we will be using.
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ["class"],
content: ["./app/**/*.{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 tailwind.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
Yay! You're all set up with Remix and UI ASTRA.