feat: update accessibility guidelines and enhance component structure. Introduce new frontend accessibility conventions in AGENTS.md, including heading hierarchy and ARIA roles for dialogs and buttons. Refactor TourGuide and related components for lazy loading and improved user experience. Update ESLint configuration to enforce stricter TypeScript rules and add new dependencies for linting. Enhance various components with accessibility features and ensure consistent styling across the application.
9205030 | @import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap'); | |
| @import "tailwindcss"; | |
| @import "tw-animate-css"; | |
| @import "shadcn/tailwind.css"; | |
| @source "../../../apps/**/*.{ts,tsx}"; | |
| @source "../**/*.{ts,tsx}"; | |
| @custom-variant dark (&:is(.dark *)); | |
| /* ── Clay-Inspired Design Tokens ────────────────────────── */ | |
| :root { | |
| /* Primary */ | |
| --clay-black: #000000; | |
| --pure-white: #ffffff; | |
| --warm-cream: #faf9f7; | |
| /* Swatch Palette */ | |
| --matcha-50: #f2fcf6; | |
| --matcha-100: #e3f9ec; | |
| --matcha-300: #84e7a5; | |
| --matcha-400: #5ac889; | |
| --matcha-500: #31a96e; | |
| --matcha-600: #078a52; | |
| --matcha-700: #047a3f; | |
| --matcha-800: #02492a; | |
| --slushie-500: #3bd3fd; | |
| --slushie-800: #0089ad; | |
| --lemon-400: #f8cc65; | |
| --lemon-500: #fbbd41; | |
| --lemon-700: #d08a11; | |
| --lemon-800: #9d6a09; | |
| --ube-300: #c1b0ff; | |
| --ube-800: #43089f; | |
| --ube-900: #32037d; | |
| --pomegranate-400: #fc7981; | |
| --blueberry-800: #01418d; | |
| --dragonfruit-400: #e84393; | |
| /* Neutral Scale (Warm) */ | |
| --warm-silver: #9f9b93; | |
| --warm-charcoal: #55534e; | |
| --dark-charcoal: #333333; | |
| /* Surface & Border */ | |
| --oat-border: #dad4c8; | |
| --oat-light: #eee9df; | |
| --cool-border: #e6e8ec; | |
| --dark-border: #525a69; | |
| --light-frost: #eff1f3; | |
| /* Badges */ | |
| --badge-blue-bg: #f0f8ff; | |
| --badge-blue-text: #3859f9; | |
| --focus-ring: rgb(20, 110, 245); | |
| /* ── Semantic Mapping ─────────────────────────────────── */ | |
| --background: var(--warm-cream); | |
| --foreground: var(--clay-black); | |
| --card: var(--pure-white); | |
| --card-foreground: var(--clay-black); | |
| --popover: var(--pure-white); | |
| --popover-foreground: var(--clay-black); | |
| --primary: var(--matcha-600); | |
| --primary-foreground: var(--pure-white); | |
| --secondary: var(--clay-black); | |
| --secondary-foreground: var(--pure-white); | |
| --muted: var(--oat-light); | |
| --muted-foreground: var(--warm-silver); | |
| --accent: var(--slushie-500); | |
| --accent-foreground: var(--clay-black); | |
| --destructive: var(--pomegranate-400); | |
| --destructive-foreground: var(--pure-white); | |
| --success: var(--matcha-500); | |
| --success-foreground: var(--pure-white); | |
| --warning: var(--lemon-500); | |
| --warning-foreground: var(--clay-black); | |
| --info: var(--slushie-500); | |
| --info-foreground: var(--clay-black); | |
| --border: var(--oat-border); | |
| --input: var(--oat-border); | |
| --ring: var(--focus-ring); | |
| /* Surface tokens */ | |
| --surface: var(--warm-cream); | |
| --surface-bright: var(--pure-white); | |
| --surface-dim: var(--oat-light); | |
| --surface-variant: var(--oat-light); | |
| --surface-container: var(--pure-white); | |
| --surface-container-low: var(--oat-light); | |
| --surface-container-lowest: var(--pure-white); | |
| --surface-container-high: var(--oat-border); | |
| --surface-container-highest: var(--warm-silver); | |
| --on-surface: var(--clay-black); | |
| --on-surface-variant: var(--warm-charcoal); | |
| --on-background: var(--clay-black); | |
| /* Container tokens */ | |
| --primary-container: var(--blueberry-800); | |
| --secondary-container: var(--matcha-300); | |
| --tertiary-container: var(--ube-300); | |
| --error-container: var(--badge-blue-bg); | |
| --on-primary-container: var(--pure-white); | |
| --on-secondary-container: var(--matcha-800); | |
| --on-tertiary-container: var(--ube-900); | |
| --on-error-container: var(--badge-blue-text); | |
| /* Outline */ | |
| --outline: var(--warm-charcoal); | |
| --outline-variant: var(--oat-border); | |
| --inverse-surface: var(--clay-black); | |
| --inverse-primary: var(--pure-white); | |
| --inverse-on-surface: var(--warm-cream); | |
| /* Fixed colors */ | |
| --primary-fixed: var(--oat-light); | |
| --primary-fixed-dim: var(--oat-border); | |
| --secondary-fixed: var(--matcha-300); | |
| --secondary-fixed-dim: var(--matcha-600); | |
| --tertiary-fixed: var(--ube-300); | |
| --tertiary-fixed-dim: var(--ube-800); | |
| /* Chart */ | |
| --chart-1: var(--matcha-600); | |
| --chart-2: var(--slushie-500); | |
| --chart-3: var(--lemon-500); | |
| --chart-4: var(--ube-800); | |
| --chart-5: var(--pomegranate-400); | |
| /* Sidebar */ | |
| --sidebar: var(--oat-light); | |
| --sidebar-foreground: var(--clay-black); | |
| --sidebar-primary: var(--clay-black); | |
| --sidebar-primary-foreground: var(--pure-white); | |
| --sidebar-accent: var(--oat-border); | |
| --sidebar-accent-foreground: var(--clay-black); | |
| --sidebar-border: var(--oat-border); | |
| --sidebar-ring: var(--focus-ring); | |
| /* Radius: Clay scale */ | |
| --radius: 0.75rem; | |
| } | |
| .dark { | |
| --background: #1a1917; | |
| --foreground: var(--pure-white); | |
| --card: #2a2927; | |
| --card-foreground: var(--pure-white); | |
| --popover: #2a2927; | |
| --popover-foreground: var(--pure-white); | |
| --primary: var(--matcha-300); | |
| --primary-foreground: var(--clay-black); | |
| --secondary: var(--pure-white); | |
| --secondary-foreground: var(--clay-black); | |
| --muted: #3a3937; | |
| --muted-foreground: var(--warm-silver); | |
| --border: #4a4947; | |
| --input: #4a4947; | |
| --ring: var(--slushie-500); | |
| --success: var(--matcha-300); | |
| --success-foreground: var(--clay-black); | |
| --warning: var(--lemon-400); | |
| --warning-foreground: var(--clay-black); | |
| --info: var(--slushie-500); | |
| --info-foreground: var(--pure-white); | |
| --surface: #1a1917; | |
| --surface-container: #2a2927; | |
| --surface-container-low: #222120; | |
| --surface-container-high: #3a3937; | |
| --on-surface: var(--pure-white); | |
| --on-surface-variant: var(--warm-silver); | |
| --primary-container: var(--slushie-800); | |
| --secondary-container: var(--matcha-800); | |
| --tertiary-container: var(--ube-900); | |
| --on-primary-container: var(--clay-black); | |
| --on-secondary-container: var(--matcha-300); | |
| --on-tertiary-container: var(--ube-300); | |
| --sidebar: #1a1917; | |
| --sidebar-foreground: var(--pure-white); | |
| --sidebar-primary: var(--slushie-500); | |
| --sidebar-primary-foreground: var(--clay-black); | |
| --sidebar-accent: #3a3937; | |
| --sidebar-accent-foreground: var(--pure-white); | |
| --sidebar-border: #4a4947; | |
| } | |
| @theme inline { | |
| --font-sans: "Inter", system-ui, sans-serif; | |
| --font-headline: "Inter", system-ui, sans-serif; | |
| --font-mono: "Space Mono", ui-monospace, monospace; | |
| --color-background: var(--background); | |
| --color-foreground: var(--foreground); | |
| --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-success: var(--success); | |
| --color-success-foreground: var(--success-foreground); | |
| --color-warning: var(--warning); | |
| --color-warning-foreground: var(--warning-foreground); | |
| --color-info: var(--info); | |
| --color-info-foreground: var(--info-foreground); | |
| --color-border: var(--border); | |
| --color-input: var(--input); | |
| --color-ring: var(--ring); | |
| /* Surface semantic tokens */ | |
| --color-surface: var(--surface); | |
| --color-surface-bright: var(--surface-bright); | |
| --color-surface-dim: var(--surface-dim); | |
| --color-surface-variant: var(--surface-variant); | |
| --color-surface-container: var(--surface-container); | |
| --color-surface-container-low: var(--surface-container-low); | |
| --color-surface-container-lowest: var(--surface-container-lowest); | |
| --color-surface-container-high: var(--surface-container-high); | |
| --color-surface-container-highest: var(--surface-container-highest); | |
| --color-on-surface: var(--on-surface); | |
| --color-on-surface-variant: var(--on-surface-variant); | |
| --color-on-background: var(--on-background); | |
| /* On-brand text */ | |
| --color-on-primary: var(--primary-foreground); | |
| --color-on-secondary: var(--secondary-foreground); | |
| --color-on-tertiary: var(--tertiary-foreground); | |
| --color-on-error: var(--destructive-foreground); | |
| /* M3 container tokens */ | |
| --color-primary-container: var(--primary-container); | |
| --color-secondary-container: var(--secondary-container); | |
| --color-tertiary-container: var(--tertiary-container); | |
| --color-error-container: var(--error-container); | |
| --color-on-primary-container: var(--on-primary-container); | |
| --color-on-secondary-container: var(--on-secondary-container); | |
| --color-on-tertiary-container: var(--on-tertiary-container); | |
| --color-on-error-container: var(--on-error-container); | |
| --color-outline: var(--outline); | |
| --color-outline-variant: var(--outline-variant); | |
| --color-inverse-surface: var(--inverse-surface); | |
| --color-inverse-primary: var(--inverse-primary); | |
| --color-inverse-on-surface: var(--inverse-on-surface); | |
| /* Fixed colors */ | |
| --color-primary-fixed: var(--primary-fixed); | |
| --color-primary-fixed-dim: var(--primary-fixed-dim); | |
| --color-secondary-fixed: var(--secondary-fixed); | |
| --color-secondary-fixed-dim: var(--secondary-fixed-dim); | |
| --color-tertiary-fixed: var(--tertiary-fixed); | |
| --color-tertiary-fixed-dim: var(--tertiary-fixed-dim); | |
| /* Swatch colors */ | |
| --color-matcha-50: var(--matcha-50); | |
| --color-matcha-100: var(--matcha-100); | |
| --color-matcha-300: var(--matcha-300); | |
| --color-matcha-400: var(--matcha-400); | |
| --color-matcha-500: var(--matcha-500); | |
| --color-matcha-600: var(--matcha-600); | |
| --color-matcha-800: var(--matcha-800); | |
| --color-slushie-500: var(--slushie-500); | |
| --color-slushie-800: var(--slushie-800); | |
| --color-lemon-400: var(--lemon-400); | |
| --color-lemon-500: var(--lemon-500); | |
| --color-lemon-700: var(--lemon-700); | |
| --color-lemon-800: var(--lemon-800); | |
| --color-ube-300: var(--ube-300); | |
| --color-ube-800: var(--ube-800); | |
| --color-ube-900: var(--ube-900); | |
| --color-pomegranate-400: var(--pomegranate-400); | |
| --color-blueberry-800: var(--blueberry-800); | |
| --color-dragonfruit-400: var(--dragonfruit-400); | |
| --color-oat-border: var(--oat-border); | |
| --color-oat-light: var(--oat-light); | |
| --color-warm-silver: var(--warm-silver); | |
| --color-warm-charcoal: var(--warm-charcoal); | |
| --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); | |
| --color-sidebar: var(--sidebar); | |
| --color-sidebar-foreground: var(--sidebar-foreground); | |
| --color-sidebar-primary: var(--sidebar-primary); | |
| --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); | |
| --color-sidebar-accent: var(--sidebar-accent); | |
| --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); | |
| --color-sidebar-border: var(--sidebar-border); | |
| --color-sidebar-ring: var(--sidebar-ring); | |
| --radius-sm: calc(var(--radius) - 4px); | |
| --radius-md: var(--radius); | |
| --radius-lg: calc(var(--radius) + 4px); | |
| --radius-xl: calc(var(--radius) + 8px); | |
| --radius-2xl: calc(var(--radius) + 16px); | |
| --radius-3xl: calc(var(--radius) + 24px); | |
| --radius-4xl: calc(var(--radius) + 32px); | |
| --radius-pill: 1584px; | |
| } | |
| @layer base { | |
| * { | |
| @apply border-border outline-ring/50; | |
| } | |
| body { | |
| @apply bg-background text-foreground font-sans antialiased; | |
| } | |
| html { | |
| @apply font-sans; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-headline); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| } | |
| } | |
| /* ── Utility Classes ─────────────────────────────────────── */ | |
| @layer utilities { | |
| .font-headline { | |
| font-family: var(--font-headline); | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| } | |
| .font-body { | |
| font-family: var(--font-sans); | |
| } | |
| .font-mono { | |
| font-family: var(--font-mono); | |
| } | |
| .glass-panel { | |
| background: rgba(250, 249, 247, 0.8); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| } | |
| .ai-glow { | |
| background: radial-gradient(circle at 50% 50%, rgba(132, 231, 165, 0.15) 0%, transparent 70%); | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .clay-shadow { | |
| box-shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px; | |
| } | |
| .clay-hover { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .clay-hover:hover { | |
| transform: rotateZ(-2deg) translateY(-2px); | |
| box-shadow: rgb(0,0,0) -4px 4px; | |
| } | |
| .uppercase-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0675em; | |
| } | |
| [dir="rtl"] { | |
| text-align: right; | |
| } | |
| [dir="rtl"] .flex-row { | |
| flex-direction: row-reverse; | |
| } | |
| [dir="rtl"] .space-x-* { | |
| --space-x-reverse: 1; | |
| } | |
| } | |