fix some bugs and add missing comment

Author: bjohansebas

packages/ui-components/styles/index.css

@@ -12,3 +12,23 @@
 @import './effects.css';
 @import './base.css' layer(utilities);
 @import './markdown.css' layer(utilities);
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+@custom-variant aria-current (&[aria-current="page"]);

packages/ui-components/styles/theme.css

@@ -81,6 +81,10 @@
   --shadow-lg:
     0px 4px 6px -2px var(--color-shadow, rgba(0, 0, 0 / 3%)),
     0px 12px 16px -4px var(--color-shadow, rgba(0, 0, 0 / 8%));
+
+  /* TODO(@avivkeller): The --font-xyz-xyz variable is assigned by Next.js in apps/site.
+      Ideally, this package shouldn't depend on the consuming application's
+      variables, it should remain self-contained. */
   --font-open-sans: var(--font-open-sans);
   --font-ibm-plex-mono: var(--font-ibm-plex-mono);
   --font-weight-regular: 400;