feat: add Shadcn/ui design tokens and accessibility improvements

- Add src/styles/tokens.css with comprehensive design tokens
- Define color tokens (primary, secondary, accent, destructive, etc.)
- Add spacing, typography, shadow, and transition tokens
- Include dark mode token overrides
- Add utility classes (btn, badge, input variants)
- Add skip-link for keyboard navigation
- Update index.html to include tokens.css

This enables consistent theming and easier future UI updates.

Amit Haridas
This commit is contained in:
2026-03-24 09:55:18 +05:30
parent 3bc703d8dc
commit fe4d634163
6 changed files with 1217 additions and 0 deletions
+4
View File
@@ -7,6 +7,8 @@
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; font-src 'self' data:; connect-src 'self' https://www.plantuml.com;">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MarkdownConverter</title>
<!-- Design tokens - loaded first for CSS variable availability -->
<link rel="stylesheet" href="styles/tokens.css">
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="styles-modern.css">
@@ -16,6 +18,8 @@
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css">
</head>
<body>
<!-- Skip link for keyboard navigation -->
<a href="#editor-container" class="skip-link">Skip to editor</a>
<div class="container">
<!-- App Header with ConcreteInfo Logo -->
<div class="app-header" id="app-header">