From b1fd2fbf5a2e85bf6b08c92cfa56c3f9f1beb679 Mon Sep 17 00:00:00 2001 From: garrettsiegel Date: Mon, 2 Feb 2026 12:41:48 -0500 Subject: [PATCH 1/9] Add Tailwind CSS v4 + Vite installation instructions --- .vscode/settings.json | 10 +- docs/README.instructions.md | 1 + instructions/tailwind-v4-vite.instructions.md | 243 ++++++++++++++++++ 3 files changed, 253 insertions(+), 1 deletion(-) create mode 100644 instructions/tailwind-v4-vite.instructions.md diff --git a/.vscode/settings.json b/.vscode/settings.json index b28e8cdb..44215cc6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,5 +17,13 @@ "yaml.schemas": { "./.schemas/collection.schema.json": "*.collection.yml", "./.schemas/tools.schema.json": "website/data/tools.yml", - } + }, + "files.exclude": { + "**/.git": true, + "**/.svn": true, + "**/.hg": true, + "**/.DS_Store": true, + "**/Thumbs.db": true + }, + "hide-files.files": [] } diff --git a/docs/README.instructions.md b/docs/README.instructions.md index eb2d82d3..e9d48839 100644 --- a/docs/README.instructions.md +++ b/docs/README.instructions.md @@ -165,6 +165,7 @@ Team and project-specific instructions to enhance GitHub Copilot's behavior for | [Svelte 5 and SvelteKit Development Instructions](../instructions/svelte.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fsvelte.instructions.md) | Svelte 5 and SvelteKit development standards and best practices for component-based user interfaces and full-stack applications | | [Swift MCP Server Development Guidelines](../instructions/swift-mcp-server.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fswift-mcp-server.instructions.md) | Best practices and patterns for building Model Context Protocol (MCP) servers in Swift using the official MCP Swift SDK package. | | [Symfony Development Instructions](../instructions/php-symfony.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Fphp-symfony.instructions.md) | Symfony development standards aligned with official Symfony Best Practices | +| [Tailwind CSS v4+ Installation with Vite](../instructions/tailwind-v4-vite.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftailwind-v4-vite.instructions.md) | Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin | | [Taming Copilot](../instructions/taming-copilot.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftaming-copilot.instructions.md) | Prevent Copilot from wreaking havoc across your codebase, keeping it under control. | | [TanStack Start with Shadcn/ui Development Guide](../instructions/tanstack-start-shadcn-tailwind.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftanstack-start-shadcn-tailwind.instructions.md) | Guidelines for building TanStack Start applications | | [Task Plan Implementation Instructions](../instructions/task-implementation.instructions.md)
[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md)
[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/instructions?url=vscode-insiders%3Achat-instructions%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Finstructions%2Ftask-implementation.instructions.md) | Instructions for implementing task plans with progressive tracking and change record - Brought to you by microsoft/edge-ai | diff --git a/instructions/tailwind-v4-vite.instructions.md b/instructions/tailwind-v4-vite.instructions.md new file mode 100644 index 00000000..5f17f01c --- /dev/null +++ b/instructions/tailwind-v4-vite.instructions.md @@ -0,0 +1,243 @@ +--- +description: 'Tailwind CSS v4+ installation and configuration for Vite projects using the official @tailwindcss/vite plugin' +applyTo: 'vite.config.ts, vite.config.js, **/*.css, **/*.tsx, **/*.ts, **/*.jsx, **/*.js' +--- + +# Tailwind CSS v4+ Installation with Vite + +Instructions for installing and configuring Tailwind CSS version 4 and above using the official Vite plugin. Tailwind CSS v4 introduces a simplified setup that eliminates the need for PostCSS configuration and tailwind.config.js in most cases. + +## Key Changes in Tailwind CSS v4 + +- **No PostCSS configuration required** when using the Vite plugin +- **No tailwind.config.js required** - configuration is done via CSS +- **New @tailwindcss/vite plugin** replaces the PostCSS-based approach +- **CSS-first configuration** using `@theme` directive +- **Automatic content detection** - no need to specify content paths + +## Installation Steps + +### Step 1: Install Dependencies + +Install `tailwindcss` and the `@tailwindcss/vite` plugin: + +```bash +npm install tailwindcss @tailwindcss/vite +``` + +### Step 2: Configure Vite Plugin + +Add the `@tailwindcss/vite` plugin to your Vite configuration file: + +```typescript +// vite.config.ts +import { defineConfig } from 'vite' +import tailwindcss from '@tailwindcss/vite' + +export default defineConfig({ + plugins: [ + tailwindcss(), + ], +}) +``` + +For React projects with Vite: + +```typescript +// vite.config.ts +import { defineConfig } from 'vite' +import react from '@vitejs/plugin-react' +import tailwindcss from '@tailwindcss/vite' + +export default defineConfig({ + plugins: [ + react(), + tailwindcss(), + ], +}) +``` + +### Step 3: Import Tailwind CSS + +Add the Tailwind CSS import to your main CSS file (e.g., `src/index.css` or `src/App.css`): + +```css +@import "tailwindcss"; +``` + +### Step 4: Verify CSS Import in Entry Point + +Ensure your main CSS file is imported in your application entry point: + +```typescript +// src/main.tsx or src/main.ts +import './index.css' +``` + +### Step 5: Start Development Server + +Run the development server to verify installation: + +```bash +npm run dev +``` + +## What NOT to Do in Tailwind v4 + +### Do NOT Create tailwind.config.js + +Tailwind v4 uses CSS-first configuration. Do not create a `tailwind.config.js` file unless you have specific legacy requirements. + +```javascript +// ❌ NOT NEEDED in Tailwind v4 +module.exports = { + content: ['./src/**/*.{js,ts,jsx,tsx}'], + theme: { + extend: {}, + }, + plugins: [], +} +``` + +### Do NOT Create postcss.config.js for Tailwind + +When using the `@tailwindcss/vite` plugin, PostCSS configuration for Tailwind is not required. + +```javascript +// ❌ NOT NEEDED when using @tailwindcss/vite +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} +``` + +### Do NOT Use Old Directives + +The old `@tailwind` directives are replaced by a single import: + +```css +/* ❌ OLD - Do not use in Tailwind v4 */ +@tailwind base; +@tailwind components; +@tailwind utilities; + +/* ✅ NEW - Use this in Tailwind v4 */ +@import "tailwindcss"; +``` + +## CSS-First Configuration (Tailwind v4) + +### Custom Theme Configuration + +Use the `@theme` directive in your CSS to customize your design tokens: + +```css +@import "tailwindcss"; + +@theme { + --color-primary: #3b82f6; + --color-secondary: #64748b; + --font-sans: 'Inter', system-ui, sans-serif; + --radius-lg: 0.75rem; +} +``` + +### Adding Custom Utilities + +Define custom utilities directly in CSS: + +```css +@import "tailwindcss"; + +@utility content-auto { + content-visibility: auto; +} + +@utility scrollbar-hidden { + scrollbar-width: none; + &::-webkit-scrollbar { + display: none; + } +} +``` + +### Adding Custom Variants + +Define custom variants in CSS: + +```css +@import "tailwindcss"; + +@variant hocus (&:hover, &:focus); +@variant group-hocus (:merge(.group):hover &, :merge(.group):focus &); +``` + +## Verification Checklist + +After installation, verify: + +- [ ] `tailwindcss` and `@tailwindcss/vite` are in `package.json` dependencies +- [ ] `vite.config.ts` includes the `tailwindcss()` plugin +- [ ] Main CSS file contains `@import "tailwindcss";` +- [ ] CSS file is imported in the application entry point +- [ ] Development server runs without errors +- [ ] Tailwind utility classes (e.g., `text-blue-500`, `p-4`) render correctly + +## Example Usage + +Test the installation with a simple component: + +```tsx +export function TestComponent() { + return ( +
+

+ Hello, Tailwind CSS v4! +

+
+ ) +} +``` + +## Troubleshooting + +### Styles Not Applying + +1. Verify CSS import statement is `@import "tailwindcss";` (not old directives) +2. Ensure CSS file is imported in your entry point +3. Check Vite config includes the `tailwindcss()` plugin +4. Clear Vite cache: `rm -rf node_modules/.vite && npm run dev` + +### Plugin Not Found Error + +If you see "Cannot find module '@tailwindcss/vite'": + +```bash +npm install @tailwindcss/vite +``` + +### TypeScript Errors + +If TypeScript cannot find types for the Vite plugin, ensure you have the correct import: + +```typescript +import tailwindcss from '@tailwindcss/vite' +``` + +## Migration from Tailwind v3 + +If migrating from Tailwind v3: + +1. Remove `tailwind.config.js` (move customizations to CSS `@theme`) +2. Remove `postcss.config.js` (if only used for Tailwind) +3. Uninstall old packages: `npm uninstall postcss autoprefixer` +4. Install new packages: `npm install tailwindcss @tailwindcss/vite` +5. Replace `@tailwind` directives with `@import "tailwindcss";` +6. Update Vite config to use `@tailwindcss/vite` plugin + +## Reference + +- Official Documentation: https://tailwindcss.com/docs/installation/using-vite +- Tailwind CSS v4 Upgrade Guide: https://tailwindcss.com/docs/upgrade-guide From 0227b8a2f6fab02ee4d2698553b6687a57660202 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 2 Feb 2026 23:10:45 +0000 Subject: [PATCH 3/9] Add codespell GitHub Actions workflow for automatic spelling checks Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com> --- .codespellrc | 16 ++++++++++++++++ .github/workflows/codespell.yml | 22 ++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 .codespellrc create mode 100644 .github/workflows/codespell.yml diff --git a/.codespellrc b/.codespellrc new file mode 100644 index 00000000..33a5431b --- /dev/null +++ b/.codespellrc @@ -0,0 +1,16 @@ +[codespell] +# Ignore intentional misspellings used as examples and technical terms +# numer - intentional example typo in add-educational-comments.prompt.md +# wit - proper technical term/name (sardonic wit, Gilfoyle character trait) +# aks - Azure Kubernetes Service (AKS) abbreviation +# edn - Extensible Data Notation (Clojure data format) +# ser - serialization abbreviation +# ois - ObjectInputStream abbreviation in Java +# gir - valid abbreviation/technical term +# rouge - Rouge is a syntax highlighter (not "rogue") +# categor - appears to be a partial word in code +# aline - proper name (Aline Ávila) +# ative - appears in context of "native" alternatives +ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques +# Skip certain files and directories +skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus diff --git a/.github/workflows/codespell.yml b/.github/workflows/codespell.yml new file mode 100644 index 00000000..fa44e258 --- /dev/null +++ b/.github/workflows/codespell.yml @@ -0,0 +1,22 @@ +name: Check Spelling + +on: + push: + branches: [main] + pull_request: + branches: [main] + +permissions: + contents: read + +jobs: + codespell: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Check spelling with codespell + uses: codespell-project/actions-codespell@v2 + with: + check_filenames: true + check_hidden: false From 1c38b8388a87db2e72bd014da57409a4072815df Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 2 Feb 2026 23:11:59 +0000 Subject: [PATCH 4/9] Improve codespell configuration comments for clarity Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com> --- .codespellrc | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.codespellrc b/.codespellrc index 33a5431b..7f9b3fa8 100644 --- a/.codespellrc +++ b/.codespellrc @@ -8,9 +8,9 @@ # ois - ObjectInputStream abbreviation in Java # gir - valid abbreviation/technical term # rouge - Rouge is a syntax highlighter (not "rogue") -# categor - appears to be a partial word in code -# aline - proper name (Aline Ávila) -# ative - appears in context of "native" alternatives +# categor - TypeScript template literal in website/src/scripts/pages/skills.ts:70 (categor${...length > 1 ? "ies" : "y"}) +# aline - proper name (Aline Ávila, contributor) +# ative - part of "Declarative Agents" in TypeSpec M365 Copilot documentation (collections/typespec-m365-copilot.collection.md) ignore-words-list = numer,wit,aks,edn,ser,ois,gir,rouge,categor,aline,ative,afterall,deques # Skip certain files and directories skip = .git,node_modules,package-lock.json,*.lock,website/build,website/.docusaurus From f4c2e0b0e0bbffcf490a4ad5493af1515e2ae06a Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Tue, 3 Feb 2026 10:38:16 +1100 Subject: [PATCH 5/9] Add commit SHA and build date to website footer - Display short commit SHA with link to GitHub commit - Show build date in YYYY-MM-DD format - Use GITHUB_SHA env var in CI, fallback to git command locally - Add subtle styling for build info text --- website/public/styles/global.css | 6 ++++++ website/src/layouts/BaseLayout.astro | 24 ++++++++++++++++++++++++ 2 files changed, 30 insertions(+) diff --git a/website/public/styles/global.css b/website/public/styles/global.css index 81f598c7..ddd77c9c 100644 --- a/website/public/styles/global.css +++ b/website/public/styles/global.css @@ -688,6 +688,12 @@ a:hover { color: var(--color-accent); } +.site-footer .build-info { + margin-top: 8px; + font-size: 12px; + opacity: 0.7; +} + /* Buttons */ .btn { display: inline-flex; diff --git a/website/src/layouts/BaseLayout.astro b/website/src/layouts/BaseLayout.astro index a8bc2b5c..74ebf201 100644 --- a/website/src/layouts/BaseLayout.astro +++ b/website/src/layouts/BaseLayout.astro @@ -1,4 +1,6 @@ --- +import { execSync } from "child_process"; + interface Props { title: string; description?: string; @@ -11,6 +13,21 @@ const { activeNav = "", } = Astro.props; const base = import.meta.env.BASE_URL; + +// Get git commit SHA and build date at build time +let commitSha = "unknown"; +let buildDate = new Date().toISOString().split("T")[0]; +try { + // Use GITHUB_SHA env var in GitHub Actions, fallback to git command locally + const githubSha = process.env.GITHUB_SHA; + if (githubSha) { + commitSha = githubSha.substring(0, 7); + } else { + commitSha = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim(); + } +} catch { + // Fallback if git is not available +} --- @@ -155,6 +172,13 @@ const base = import.meta.env.BASE_URL; rel="noopener">MIT License

+

+ Built from {commitSha} on {buildDate} +

From ba03707825161982f2c5678adb142ed2bb420112 Mon Sep 17 00:00:00 2001 From: garrettsiegel Date: Mon, 2 Feb 2026 18:56:26 -0500 Subject: [PATCH 6/9] Revert unrelated changes to .vscode/settings.json --- .vscode/settings.json | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 44215cc6..b28e8cdb 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -17,13 +17,5 @@ "yaml.schemas": { "./.schemas/collection.schema.json": "*.collection.yml", "./.schemas/tools.schema.json": "website/data/tools.yml", - }, - "files.exclude": { - "**/.git": true, - "**/.svn": true, - "**/.hg": true, - "**/.DS_Store": true, - "**/Thumbs.db": true - }, - "hide-files.files": [] + } } From 20818f230a39504e37b52821f78ed884008bb991 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 3 Feb 2026 00:22:31 +0000 Subject: [PATCH 7/9] =?UTF-8?q?Fix=20spelling=20error:=20formated=20?= =?UTF-8?q?=E2=86=92=20formatted=20in=20copilot-instructions.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: aaronpowell <434140+aaronpowell@users.noreply.github.com> --- .github/copilot-instructions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 4ebf9c97..e74c6fe8 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -25,7 +25,7 @@ The following instructions are only to be applied when performing a code review. - [ ] The instruction has a `description` field. - [ ] The `description` field is not empty. - [ ] The file name is lower case, with words separated by hyphens. -- [ ] The instruction has an `applyTo` field that specifies the file or files to which the instructions apply. If they wish to specify multiple file paths they should formated like `'**.js, **.ts'`. +- [ ] The instruction has an `applyTo` field that specifies the file or files to which the instructions apply. If they wish to specify multiple file paths they should formatted like `'**.js, **.ts'`. ## Agent file guide From 79b5c649b5d110d8e7508d23043997ceef77e17a Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Tue, 3 Feb 2026 11:27:45 +1100 Subject: [PATCH 8/9] fix: use skillFile path in search index for skills When searching for skills on the homepage, clicking a result would fail to load because the search index stored the folder path (e.g., skills/my-skill) instead of the SKILL.md file path. This caused fetchFileContent() to fail. Changed path property to use skill.skillFile which contains the correct path to the SKILL.md file that can be fetched and displayed in the modal. --- eng/generate-website-data.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/eng/generate-website-data.mjs b/eng/generate-website-data.mjs index fdd14fc0..05a23eec 100644 --- a/eng/generate-website-data.mjs +++ b/eng/generate-website-data.mjs @@ -579,7 +579,7 @@ function generateSearchIndex( id: skill.id, title: skill.title, description: skill.description, - path: skill.path, + path: skill.skillFile, searchText: `${skill.title} ${skill.description}`.toLowerCase(), }); } From fb4fb59625d3b2425819aca5083c68f682a2b896 Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Tue, 3 Feb 2026 11:32:53 +1100 Subject: [PATCH 9/9] fix: improve dropdown text visibility in dark/light modes and ensure dropdown background and text colors properly use CSS variables in both dark and light themes. --- website/public/styles/global.css | 23 ++++++++++++++--------- 1 file changed, 14 insertions(+), 9 deletions(-) diff --git a/website/public/styles/global.css b/website/public/styles/global.css index ddd77c9c..55d6244a 100644 --- a/website/public/styles/global.css +++ b/website/public/styles/global.css @@ -1211,22 +1211,25 @@ a:hover { color: var(--color-text-muted); } -.choices__list--dropdown { - background-color: var(--color-bg-secondary); - border-color: var(--color-border); +.choices__list--dropdown, +.choices__list[aria-expanded] { + background-color: var(--color-bg-secondary) !important; + border-color: var(--color-border) !important; border-radius: 0 0 var(--border-radius) var(--border-radius); z-index: 100; max-height: 300px; } -.choices__list--dropdown .choices__item { - color: var(--color-text); +.choices__list--dropdown .choices__item, +.choices__list[aria-expanded] .choices__item { + color: var(--color-text) !important; font-size: 14px; padding: 10px 14px; } -.choices__list--dropdown .choices__item--selectable.is-highlighted { - background-color: var(--color-bg-tertiary); +.choices__list--dropdown .choices__item--selectable.is-highlighted, +.choices__list[aria-expanded] .choices__item--selectable.is-highlighted { + background-color: var(--color-bg-tertiary) !important; } .choices__list--multiple .choices__item { @@ -1260,11 +1263,13 @@ a:hover { border-radius: var(--border-radius) var(--border-radius) 0 0; } -.is-open .choices__list--dropdown { +.is-open .choices__list--dropdown, +.is-open .choices__list[aria-expanded] { border-color: var(--color-link); } -.choices__list--dropdown .choices__item--selectable::after { +.choices__list--dropdown .choices__item--selectable::after, +.choices__list[aria-expanded] .choices__item--selectable::after { display: none; }