chore: update UnoCSS

docs/tutorialkit.dev/package.json

@@ -31,6 +31,6 @@
     "sharp": "^0.32.6",
     "starlight-links-validator": "^0.9.0",
     "typescript": "^5.4.5",
-    "unocss": "^0.59.4"
+    "unocss": "66.5.2"
   }
 }

e2e/package.json

@@ -27,14 +27,14 @@
     "@types/node": "^22.2.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@unocss/reset": "^0.59.4",
-    "@unocss/transformer-directives": "^0.62.0",
+    "@unocss/reset": "66.5.2",
+    "@unocss/transformer-directives": "66.5.2",
     "astro": "^4.15.0",
     "fast-glob": "^3.3.2",
     "playwright": "^1.46.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "unocss": "^0.59.4",
+    "unocss": "66.5.2",
     "unzipper": "^0.12.3"
   }
 }

e2e/test/topbar.test.ts

@@ -1,9 +1,9 @@
 /// <reference types="node" />
 import { readdirSync, readFileSync, rmSync } from 'node:fs';
 import type { Readable } from 'node:stream';
 import { test, expect } from '@playwright/test';
 import * as unzipper from 'unzipper';
-import { theme } from '../../packages/theme/src/theme';
+import { theme } from '../../packages/theme/src/theme.js';
 
 test('user can change theme', async ({ page }) => {
   await page.goto('/');
@@ -13,16 +13,47 @@
 
   // default light theme
   await expect(html).toHaveAttribute('data-theme', 'light');
-  await expect(heading).toHaveCSS('color', hexToRGB(theme.colors.gray[800]));
+
+  /**
+   * Normalize both the expected token and the computed style to canonical rgba(...) to
+   * avoid mismatches caused by different color-space serializations (oklab vs rgb)
+   */
+  const normalizeColor = (cssColor: string) =>
+    page.evaluate((c: string) => {
+      const canvas = document.createElement('canvas');
+      canvas.width = 1;
+      canvas.height = 1;
+
+      const ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return c;
+      }
+
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = c;
+      ctx.fillRect(0, 0, 1, 1);
+
+      const d = ctx.getImageData(0, 0, 1, 1).data;
+
+      return 'rgba(' + d[0] + ', ' + d[1] + ', ' + d[2] + ', ' + d[3] / 255 + ')';
+    }, cssColor);
+
+  const expectedLight = await normalizeColor(hexToRGB(theme.colors.gray[800]));
+  const observedLightRgba = await normalizeColor(await heading.evaluate((el) => getComputedStyle(el).color));
+  expect(observedLightRgba).toBe(expectedLight);
 
   await page.getByRole('navigation').getByRole('button', { name: 'Toggle Theme' }).click();
 
   await expect(html).toHaveAttribute('data-theme', 'dark');
-  await expect(heading).toHaveCSS('color', hexToRGB(theme.colors.gray[200]));
+
+  const expectedDark = await normalizeColor(hexToRGB(theme.colors.gray[200]));
+  const observedDarkRgba = await normalizeColor(await heading.evaluate((el) => getComputedStyle(el).color));
+  expect(observedDarkRgba).toBe(expectedDark);
 });
 
 test('user can download project as zip', async ({ page }) => {
   await page.goto('/', { waitUntil: 'networkidle' });
 
   const downloadPromise = page.waitForEvent('download');
   await page.getByRole('navigation').getByRole('button', { name: 'Download lesson as zip-file' }).click();

packages/astro/package.json

@@ -44,7 +44,7 @@
     "@tutorialkit/theme": "workspace:*",
     "@tutorialkit/types": "workspace:*",
     "@types/react": "^18.3.3",
-    "@unocss/reset": "^0.62.2",
+    "@unocss/reset": "66.5.2",
     "@webcontainer/api": "1.5.1",
     "astro": "^4.15.0",
     "astro-expressive-code": "^0.35.3",
@@ -61,7 +61,7 @@
     "remark-directive": "^3.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "unocss": "^0.59.4",
+    "unocss": "66.5.2",
     "zod": "3.23.8"
   },
   "devDependencies": {

packages/astro/src/remark/callouts.ts

@@ -106,9 +106,9 @@ export function remarkCalloutsPlugin() {
           const hideIcon = attributes.hideIcon === 'true';
 
           const classes = [
-            `callout callout-${variant} my-4 flex flex-col p-3 bg-tk-elements-markdown-callouts-backgroundColor text-tk-elements-markdown-callouts-textColor`,
+            `callout callout-${variant} my-4 flex flex-col p-3 bg-[var(--tk-elements-markdown-callouts-backgroundColor)] text-[var(--tk-elements-markdown-callouts-textColor)]`,
             attributes.class ?? '',
-            ...(noBorder ? [] : ['border-l-3', 'border-tk-elements-markdown-callouts-borderColor']),
+            ...(noBorder ? [] : ['border-l-3', 'border-[var(--tk-elements-markdown-callouts-borderColor)]']),
           ];
 
           node.attributes = {
@@ -139,7 +139,7 @@ function generate(title: string, children: any[], callout: Callout, hideIcon: bo
             data: {
               hName: 'div',
               hProperties: {
-                className: 'w-full flex gap-2 items-center text-tk-elements-markdown-callouts-titleTextColor',
+                className: 'w-full flex gap-2 items-center text-[var(--tk-elements-markdown-callouts-titleTextColor)]',
                 ariaHidden: true,
               },
             },
@@ -149,7 +149,7 @@ function generate(title: string, children: any[], callout: Callout, hideIcon: bo
                 : ([
                     {
                       type: 'html',
-                      value: `<span class="text-6 inline-block text-tk-elements-markdown-callouts-iconColor ${callout.icon}"></span>`,
+                      value: `<span class="text-6 inline-block text-[var(--tk-elements-markdown-callouts-iconColor)] ${callout.icon}"></span>`,
                     },
                   ] satisfies Children)),
               {

packages/theme/package.json

@@ -35,7 +35,7 @@
     "@iconify-json/ph": "^1.1.13",
     "@iconify-json/svg-spinners": "^1.1.2",
     "fast-glob": "^3.3.2",
-    "unocss": "^0.59.4"
+    "unocss": "66.5.2"
   },
   "devDependencies": {
     "@types/node": "^22.4.1",

packages/theme/src/index.ts

@@ -2,7 +2,7 @@ import fs from 'node:fs/promises';
 import { createRequire } from 'node:module';
 import { basename, dirname, resolve } from 'node:path';
 import * as fastGlob from 'fast-glob';
-import { mergeConfigs, presetIcons, presetUno, transformerDirectives, type UserConfig } from 'unocss';
+import { mergeConfigs, presetIcons, presetWind4, transformerDirectives, type UserConfig } from 'unocss';
 
 import { theme } from './theme.js';
 import { transitionTheme } from './transition-theme.js';
@@ -26,7 +26,7 @@ export function defineConfig(config: UserConfig) {
         }),
       },
       presets: [
-        presetUno({
+        presetWind4({
           dark: {
             dark: '[data-theme="dark"]',
           },