@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/border-collapse.mdx

@@ -0,0 +1,181 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign } from "@/components/content.tsx";
+
+export const title = "border-collapse";
+export const description = "Utilities for controlling whether table borders should collapse or be separated.";
+
+<ApiTable
+  rows={[
+    ["border-collapse", "border-collapse: collapse;"],
+    ["border-separate", "border-collapse: separate;"],
+  ]}
+/>
+
+## Examples
+
+### Collapsing table borders
+
+Use the `border-collapse` utility to combine adjacent cell borders into a single border when possible:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 py-8 sm:px-8">
+      <table className="w-full border-collapse border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
+        <thead className="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              State
+            </th>
+            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              City
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indiana
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indianapolis
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Columbus
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Michigan
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Detroit
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-collapse] -->
+<table class="border-collapse border border-gray-400 ...">
+  <thead>
+    <tr>
+      <th class="border border-gray-300 ...">State</th>
+      <th class="border border-gray-300 ...">City</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-300 ...">Indiana</td>
+      <td class="border border-gray-300 ...">Indianapolis</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 ...">Ohio</td>
+      <td class="border border-gray-300 ...">Columbus</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 ...">Michigan</td>
+      <td class="border border-gray-300 ...">Detroit</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+Note that this includes collapsing borders on the top-level `<table>` tag.
+
+### Separating table borders
+
+Use the `border-separate` utility to force each cell to display its own separate borders:
+
+<Figure>
+
+<Example padding={false}>
+  {
+    <div className="px-4 py-8 sm:px-8">
+      <table className="w-full border-separate border border-gray-400 bg-white text-sm dark:border-gray-500 dark:bg-gray-800">
+        <thead className="bg-gray-50 dark:bg-gray-700">
+          <tr>
+            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              State
+            </th>
+            <th className="w-1/2 border border-gray-300 p-4 text-left font-semibold text-gray-900 dark:border-gray-600 dark:text-gray-200">
+              City
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indiana
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Indianapolis
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">Ohio</td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Columbus
+            </td>
+          </tr>
+          <tr>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Michigan
+            </td>
+            <td className="border border-gray-300 p-4 text-gray-500 dark:border-gray-700 dark:text-gray-400">
+              Detroit
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-separate] -->
+<table class="border-separate border border-gray-400 ...">
+  <thead>
+    <tr>
+      <th class="border border-gray-300 ...">State</th>
+      <th class="border border-gray-300 ...">City</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td class="border border-gray-300 ...">Indiana</td>
+      <td class="border border-gray-300 ...">Indianapolis</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 ...">Ohio</td>
+      <td class="border border-gray-300 ...">Columbus</td>
+    </tr>
+    <tr>
+      <td class="border border-gray-300 ...">Michigan</td>
+      <td class="border border-gray-300 ...">Detroit</td>
+    </tr>
+  </tbody>
+</table>
+```
+
+</Figure>
+
+### Responsive design
+
+<ResponsiveDesign
+  element="table"
+  property="border-collapse"
+  defaultClass="border-collapse"
+  featuredClass="border-separate"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/border-color.mdx

@@ -0,0 +1,316 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import {
+  CustomizingYourThemeColors,
+  ResponsiveDesign,
+  TargetingSpecificStates,
+  UsingACustomValue,
+} from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import colors from "./utils/colors";
+import dedent from "dedent";
+
+export const title = "border-color";
+export const description = "Utilities for controlling the color of an element's borders.";
+
+<ApiTable
+  rows={[
+    ...[
+      ["border", (value) => `border-color: ${value}`],
+      ["border-x", (value) => `border-inline-color: ${value}`],
+      ["border-y", (value) => `border-block-color: ${value}`],
+      ["border-s", (value) => `border-inline-start-color: ${value}`],
+      ["border-e", (value) => `border-inline-end-color: ${value}`],
+      ["border-bs", (value) => `border-block-start-color: ${value}`],
+      ["border-be", (value) => `border-block-end-color: ${value}`],
+      ["border-t", (value) => `border-top-color: ${value}`],
+      ["border-r", (value) => `border-right-color: ${value}`],
+      ["border-b", (value) => `border-bottom-color: ${value}`],
+      ["border-l", (value) => `border-left-color: ${value}`],
+      ["divide", (value) => `& > :not(:last-child) {\n  border-color: ${value}\n}`],
+    ].flatMap(([utility, css]) => [
+      [`${utility}-inherit`, css("inherit;")],
+      [`${utility}-current`, css("currentColor;")],
+      [`${utility}-transparent`, css("transparent;")],
+      ...Object.entries(colors).map(([name, value]) => [
+        `${utility}-${name}`,
+        css(`var(--color-${name}); /* ${value} */`),
+      ]),
+      [`${utility}-(<custom-property>)`, css("var(<custom-property>);")],
+      [`${utility}-[<value>]`, css("<value>;")],
+    ]),
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `border-rose-500` and `border-lime-100` to control the border color of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-500 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-purple-500
+        </p>
+        <div className="size-16 border-4 border-purple-500 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-sky-500
+        </p>
+        <div className="size-16 border-4 border-sky-500 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-indigo-500,border-purple-500,border-sky-500] -->
+<div class="border-4 border-indigo-500 ..."></div>
+<div class="border-4 border-purple-500 ..."></div>
+<div class="border-4 border-sky-500 ..."></div>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the color opacity modifier to control the opacity of an element's border color:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid gap-4 text-center text-sm leading-6 font-bold text-white lg:grid-cols-3">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-indigo-500/100
+        </p>
+        <div className="size-16 border-4 border-indigo-500/100 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-indigo-500/75
+        </p>
+        <div className="size-16 border-4 border-indigo-500/75 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-indigo-500/50
+        </p>
+        <div className="size-16 border-4 border-indigo-500/50 bg-white p-4 dark:bg-gray-900"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:/100] -->
+<!-- [!code word:/75] -->
+<!-- [!code word:/50] -->
+<div class="border-4 border-indigo-500/100 ..."></div>
+<div class="border-4 border-indigo-500/75 ..."></div>
+<div class="border-4 border-indigo-500/50 ..."></div>
+```
+
+</Figure>
+
+### Individual sides
+
+Use utilities like `border-t-indigo-500` and `border-r-lime-100` to set the border color for one side of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1 gap-x-4 gap-y-8 text-center text-sm leading-6 font-bold text-white sm:grid-cols-2">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-t-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-t-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-t-indigo-500 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-r-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-r-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-r-indigo-500 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-b-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-b-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-b-indigo-500 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-l-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-l-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-l-indigo-500 dark:bg-gray-900"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-t-indigo-500,border-r-indigo-500,border-b-indigo-500,border-l-indigo-500] -->
+<div class="border-4 border-indigo-200 border-t-indigo-500 ..."></div>
+<div class="border-4 border-indigo-200 border-r-indigo-500 ..."></div>
+<div class="border-4 border-indigo-200 border-b-indigo-500 ..."></div>
+<div class="border-4 border-indigo-200 border-l-indigo-500 ..."></div>
+```
+
+</Figure>
+
+### Horizontal and vertical sides
+
+Use utilities like `border-x-indigo-500` and `border-y-lime-100` to set the border color on two sides of an element at the same time:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col items-center justify-around gap-4 text-center text-sm leading-6 font-bold text-white sm:flex-row">
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-x-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-x-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-x-indigo-500 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex shrink-0 flex-col items-center">
+        <p className="mb-3 text-center font-mono text-xs font-medium text-gray-500 dark:text-gray-400">
+          border-y-indigo-500
+        </p>
+        <div className="size-16 border-4 border-indigo-200 border-y-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-y-indigo-500 dark:bg-gray-900"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-x-indigo-500,border-y-indigo-500] -->
+<div class="border-4 border-indigo-200 border-x-indigo-500 ..."></div>
+<div class="border-4 border-indigo-200 border-y-indigo-500 ..."></div>
+```
+
+</Figure>
+
+### Using logical properties
+
+Use utilities like `border-s-indigo-500` and `border-e-lime-100` to set the `border-inline-start-color` and `border-inline-end-color` [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/Basic_concepts), which map to either the left or right border based on the text direction:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-2 place-items-center gap-x-4">
+      <div className="flex flex-col items-start gap-y-4" dir="ltr">
+        <p className="text-sm font-medium">Left-to-right</p>
+        <div className="size-16 border-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></div>
+      </div>
+      <div className="flex flex-col items-start gap-y-4" dir="rtl">
+        <p className="text-sm font-medium">Right-to-left</p>
+        <div className="size-16 border-4 border-indigo-200 border-s-indigo-500 bg-white p-4 ring-1 ring-gray-900/5 dark:border-indigo-600/20 dark:border-s-indigo-500 dark:bg-gray-900"></div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:border-s-indigo-500,border-s-indigo-500] -->
+<!-- [!code word:dir="ltr"] -->
+<!-- [!code word:dir="rtl"] -->
+<div dir="ltr">
+  <div class="border-s-indigo-500 ..."></div>
+</div>
+<div dir="rtl">
+  <div class="border-s-indigo-500 ..."></div>
+</div>
+```
+
+</Figure>
+
+Use the `border-bs-*` and `border-be-*` utilities to set the `border-block-start-color` and `border-block-end-color` logical properties, which map to either the top or bottom border based on the writing mode:
+
+```html
+<!-- [!code classes:border-bs-indigo-500] -->
+<div class="border-bs-indigo-500 ..."></div>
+```
+
+### Divider between children
+
+Use utilities like `divide-indigo-500` and `divide-lime-100` to control the border color between child elements:
+
+<Figure>
+
+<Example>
+  {
+    <div className="mx-auto grid max-w-lg grid-cols-3 divide-x-4 divide-indigo-500 rounded-lg text-center font-mono text-sm leading-6 font-bold text-gray-400">
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">01</div>
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">02</div>
+      <div className="p-4 outline-1 -outline-offset-1 outline-gray-900/20 outline-dashed dark:outline-white/20">03</div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:divide-indigo-500] -->
+<div class="grid grid-cols-3 divide-x-4 divide-indigo-500">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utility="border" name="border color" value="#243c5a" />
+
+### Applying on focus
+
+<TargetingSpecificStates property="border-color" variant="focus">
+
+<Figure>
+
+<Example>
+  {
+    <label className="mx-auto block max-w-xs">
+      <span className="text-sm font-medium text-gray-900 dark:text-gray-200">Email address</span>
+      <input
+        type="text"
+        placeholder="jane@example.com"
+        className="block w-full rounded-lg border-2 border-gray-700 px-3 py-2 font-sans text-sm leading-5 text-gray-500 focus:border-pink-600 focus:outline-none dark:bg-gray-900 dark:text-gray-400 dark:placeholder:text-gray-600"
+      />
+    </label>
+  }
+</Example>
+
+```html
+<!-- [!code classes:focus:border-pink-600] -->
+<input class="border-2 border-gray-700 focus:border-pink-600 ..." />
+```
+
+</Figure>
+
+</TargetingSpecificStates>
+
+### Responsive design
+
+<ResponsiveDesign property="border-color" defaultClass="border-blue-500" featuredClass="border-green-500" />
+
+## Customizing your theme
+
+<CustomizingYourThemeColors utility="border" />