@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/font-weight.mdx

@@ -0,0 +1,105 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { CustomizingYourTheme, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { CodeExample } from "@/components/code-example.tsx";
+
+export const title = "font-weight";
+export const description = "Utilities for controlling the font weight of an element.";
+
+<ApiTable
+  rows={[
+    ["font-thin", "font-weight: 100;"],
+    ["font-extralight", "font-weight: 200;"],
+    ["font-light", "font-weight: 300;"],
+    ["font-normal", "font-weight: 400;"],
+    ["font-medium", "font-weight: 500;"],
+    ["font-semibold", "font-weight: 600;"],
+    ["font-bold", "font-weight: 700;"],
+    ["font-extrabold", "font-weight: 800;"],
+    ["font-black", "font-weight: 900;"],
+    ["font-(<custom-property>)", "font-weight: var(<custom-property>);"],
+    ["font-[<value>]", "font-weight: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `font-thin` and `font-bold` to set the font weight of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="flex flex-col gap-8">
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-light</span>
+        <p className="text-lg font-light text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-normal</span>
+        <p className="text-lg font-normal text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-medium</span>
+        <p className="text-lg font-medium text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-semibold</span>
+        <p className="text-lg font-semibold text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+      <div>
+        <span className="mb-3 font-mono text-xs font-medium text-gray-500 dark:text-gray-400">font-bold</span>
+        <p className="text-lg font-bold text-gray-900 dark:text-gray-200">
+          The quick brown fox jumps over the lazy dog.
+        </p>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:font-light,font-normal,font-medium,font-semibold,font-bold] -->
+<p class="font-light ...">The quick brown fox ...</p>
+<p class="font-normal ...">The quick brown fox ...</p>
+<p class="font-medium ...">The quick brown fox ...</p>
+<p class="font-semibold ...">The quick brown fox ...</p>
+<p class="font-bold ...">The quick brown fox ...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue
+  element="p"
+  utility="font"
+  value="1000"
+  name="font weight"
+  variable="font-weight"
+  dataType="weight"
+/>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="font-weight" defaultClass="font-normal" featuredClass="font-bold" />
+
+## Customizing your theme
+
+<CustomizingYourTheme
+  utility="font"
+  themeKey="font-weight"
+  name="font weight"
+  customValue="1000"
+  customName="extrablack"
+/>

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

@@ -0,0 +1,152 @@
+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";
+import Image from "next/image";
+import tshirtImage from "./img/t-shirt.jpg";
+
+export const title = "forced-color-adjust";
+export const description = "Utilities for opting in and out of forced colors.";
+
+<ApiTable
+  rows={[
+    ["forced-color-adjust-auto", "forced-color-adjust: auto;"],
+    ["forced-color-adjust-none", "forced-color-adjust: none;"],
+  ]}
+/>
+
+## Examples
+
+### Opting out of forced colors
+
+Use the `forced-color-adjust-none` utility to opt an element out of the colors enforced by forced colors mode. This is useful in situations where enforcing a limited color palette will degrade usability.
+
+<Figure hint="Try emulating `forced-colors: active` in your developer tools to see the changes">
+
+<Example>
+  {
+    <div className="mx-auto max-w-sm overflow-clip rounded-lg border border-transparent bg-white shadow dark:border-white/10 dark:bg-white/5">
+      <div className="aspect-h-3 aspect-w-3 overflow-hidden">
+        <Image
+          src={tshirtImage}
+          alt="Two each of gray, white, and black shirts laying flat."
+          className="h-full w-full object-cover object-center"
+        />
+      </div>
+      <div className="grid grid-cols-[1fr_auto] items-center gap-4 p-4">
+        <div>
+          <p className="font-medium text-gray-900 dark:text-white">Basic Tee</p>
+          <p className="text-sm font-medium text-gray-900 dark:text-white">$35</p>
+        </div>
+        <fieldset>
+          <legend className="sr-only">Choose a color</legend>
+          <div className="grid grid-flow-col items-center gap-3 forced-color-adjust-none">
+            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-400 has-checked:ring-offset-1">
+              <input
+                type="radio"
+                name="color-choice"
+                value="White"
+                className="sr-only"
+                aria-labelledby="color-choice-0-label"
+              />
+              <span id="color-choice-0-label" className="sr-only">
+                White
+              </span>
+              <span
+                aria-hidden="true"
+                className="size-6 rounded-full border border-black/10 bg-white dark:border-white/10"
+              ></span>
+            </label>
+            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-400 has-checked:ring-offset-1">
+              <input type="radio" defaultChecked name="color-choice" value="Gray" className="sr-only" />
+              <span id="color-choice-1-label" className="sr-only">
+                Gray
+              </span>
+              <span
+                aria-hidden="true"
+                className="size-6 rounded-full border border-black/10 bg-gray-200 dark:border-white/10"
+              ></span>
+            </label>
+            <label className="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 ring-0 focus:outline-none has-checked:ring-1 has-checked:ring-gray-900 has-checked:ring-offset-1">
+              <input
+                type="radio"
+                name="color-choice"
+                value="Black"
+                className="sr-only"
+                aria-labelledby="color-choice-2-label"
+              />
+              <span id="color-choice-2-label" className="sr-only">
+                Black
+              </span>
+              <span
+                aria-hidden="true"
+                className="size-6 rounded-full border border-black/10 bg-gray-900 dark:border-white/10"
+              ></span>
+            </label>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:forced-color-adjust-none] -->
+<form>
+  <img src="/img/shirt.jpg" />
+  <div>
+    <h3>Basic Tee</h3>
+    <h3>$35</h3>
+    <fieldset>
+      <legend class="sr-only">Choose a color</legend>
+      <div class="forced-color-adjust-none ...">
+        <label>
+          <input class="sr-only" type="radio" name="color-choice" value="White" />
+          <span class="sr-only">White</span>
+          <span class="size-6 rounded-full border border-black/10 bg-white"></span>
+        </label>
+        <!-- ... -->
+      </div>
+    </fieldset>
+  </div>
+</form>
+```
+
+</Figure>
+
+You can also use the [forced colors variant](/docs/hover-focus-and-other-states#forced-colors) to conditionally add styles when the user has enabled a forced color mode.
+
+### Restoring forced colors
+
+Use the `forced-color-adjust-auto` utility to make an element adhere to colors enforced by forced colors mode:
+
+```html
+<!-- [!code classes:lg:forced-color-adjust-auto] -->
+<form>
+  <fieldset class="forced-color-adjust-none lg:forced-color-adjust-auto ...">
+    <legend>Choose a color:</legend>
+    <select class="hidden lg:block">
+      <option value="White">White</option>
+      <option value="Gray">Gray</option>
+      <option value="Black">Black</option>
+    </select>
+    <div class="lg:hidden">
+      <label>
+        <input class="sr-only" type="radio" name="color-choice" value="White" />
+        <!-- ... -->
+      </label>
+      <!-- ... -->
+    </div>
+  </fieldset>
+</form>
+```
+
+This can be useful if you want to undo the `forced-color-adjust-none` utility, for example on a larger screen size.
+
+### Responsive design
+
+<ResponsiveDesign
+  property="forced-color-adjust"
+  defaultClass="forced-color-adjust-none"
+  featuredClass="forced-color-adjust-auto"
+/>

package/extensions/enact-repo/skills/tailwind-4-docs/references/docs/functions-and-directives.mdx

@@ -0,0 +1,322 @@
+import { CodeExampleStack } from "@/components/code-example";
+
+export const title = "Functions and directives";
+export const description = "A reference for the custom functions and directives Tailwind exposes to your CSS.";
+
+## Directives
+
+Directives are custom Tailwind-specific [at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) you can use in your CSS that offer special functionality for Tailwind CSS projects.
+
+<h3 id="import-directive">
+  <a href="#import-directive">@import</a>
+</h3>
+
+Use the `@import` directive to inline import CSS files, including Tailwind itself:
+
+```css
+/* [!code filename:CSS] */
+@import "tailwindcss";
+```
+
+<h3 id="theme-directive">
+  <a href="#theme-directive">@theme</a>
+</h3>
+
+Use the `@theme` directive to define your project's custom design tokens, like fonts, colors, and breakpoints:
+
+```css
+/* [!code filename:CSS] */
+@theme {
+  --font-display: "Satoshi", "sans-serif";
+
+  --breakpoint-3xl: 120rem;
+
+  --color-avocado-100: oklch(0.99 0 0);
+  --color-avocado-200: oklch(0.98 0.04 113.22);
+  --color-avocado-300: oklch(0.94 0.11 115.03);
+  --color-avocado-400: oklch(0.92 0.19 114.08);
+  --color-avocado-500: oklch(0.84 0.18 117.33);
+  --color-avocado-600: oklch(0.53 0.12 118.34);
+
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+  --ease-snappy: cubic-bezier(0.2, 0, 0, 1);
+
+  /* ... */
+}
+```
+
+Learn more about customizing your theme in the [theme variables documentation](/docs/theme).
+
+<h3 id="source-directive">
+  <a href="#source-directive">@source</a>
+</h3>
+
+Use the `@source` directive to explicitly specify source files that aren't picked up by Tailwind's automatic content detection:
+
+```css
+/* [!code filename:CSS] */
+@source "../node_modules/@my-company/ui-lib";
+```
+
+Learn more about automatic content detection in the [detecting classes in source files documentation](/docs/detecting-classes-in-source-files).
+
+<h3 id="utility-directive">
+  <a href="#utility-directive">@utility</a>
+</h3>
+
+Use the `@utility` directive to add custom utilities to your project that work with variants like `hover`, `focus` and `lg`:
+
+```css
+/* [!code filename:CSS] */
+@utility tab-4 {
+  tab-size: 4;
+}
+```
+
+Learn more about registering custom utilities in the [adding custom utilities documentation](/docs/adding-custom-styles#adding-custom-utilities).
+
+<h3 id="variant-directive">
+  <a href="#variant-directive">@variant</a>
+</h3>
+
+Use the `@variant` directive to apply a Tailwind variant to styles in your CSS:
+
+```css
+/* [!code filename:CSS] */
+.my-element {
+  background: white;
+
+  /* [!code highlight:4] */
+  @variant dark {
+    background: black;
+  }
+}
+```
+
+Learn more using variants in the [using variants documentation](/docs/adding-custom-styles#using-variants).
+
+<h3 id="custom-variant-directive">
+  <a href="#custom-variant-directive">@custom-variant</a>
+</h3>
+
+Use the `@custom-variant` directive to add a custom variant in your project:
+
+```css
+/* [!code filename:CSS] */
+@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
+```
+
+This lets you write utilities `theme-midnight:bg-black` and `theme-midnight:text-white`.
+
+Learn more about adding custom variants in the [adding custom variants documentation](/docs/adding-custom-styles#adding-custom-variants).
+
+<h3 id="apply-directive">
+  <a href="#apply-directive">@apply</a>
+</h3>
+
+Use the `@apply` directive to inline any existing utility classes into your own custom CSS:
+
+```css
+/* [!code filename:CSS] */
+.select2-dropdown {
+  /* [!code highlight:2] */
+  @apply rounded-b-lg shadow-md;
+}
+
+.select2-search {
+  /* [!code highlight:2] */
+  @apply rounded border border-gray-300;
+}
+
+.select2-results__group {
+  /* [!code highlight:2] */
+  @apply text-lg font-bold text-gray-900;
+}
+```
+
+This is useful when you need to write custom CSS (like to override the styles in a third-party library) but still want to work with your design tokens and use the same syntax you’re used to using in your HTML.
+
+<h3 id="reference-directive">
+  <a href="#reference-directive">@reference</a>
+</h3>
+
+If you want to use `@apply` or `@variant` in the `<style>` block of a Vue or Svelte component, or within CSS modules, you will need to import your theme variables, custom utilities, and custom variants to make those values available in that context.
+
+To do this without duplicating any CSS in your output, use the `@reference` directive to import your main stylesheet for reference without actually including the styles:
+
+```html
+<!-- [!code filename:Vue] -->
+<template>
+  <h1>Hello world!</h1>
+</template>
+
+<style>
+  /* [!code highlight:2] */
+  @reference "../../app.css";
+
+  h1 {
+    @apply text-2xl font-bold text-red-500;
+  }
+</style>
+```
+
+If you’re just using the default theme with no customizations (e.g. by using things like `@theme`, `@custom-variant`, `@plugin`, etc…), you can import `tailwindcss` directly:
+
+```html
+<!-- [!code filename:Vue] -->
+<template>
+  <h1>Hello world!</h1>
+</template>
+
+<style>
+  /* [!code highlight:2] */
+  @reference "tailwindcss";
+
+  h1 {
+    @apply text-2xl font-bold text-red-500;
+  }
+</style>
+```
+
+### Subpath Imports
+
+When using the CLI, Vite, or PostCSS the directives `@import`, `@reference`, `@plugin`, and `@config` all support [subpath imports](https://nodejs.org/api/packages.html#subpath-imports) which work similarly to bundler and TypeScript path aliases:
+
+```json
+// [!code filename:package.json]
+{
+  // ...
+  "imports": {
+    /* [!code highlight:2] */
+    "#app.css": "./src/css/app.css"
+  }
+}
+```
+
+```html
+<!-- [!code filename:Vue] -->
+<template>
+  <h1>Hello world!</h1>
+</template>
+
+<style>
+  /* [!code highlight:2] */
+  @reference "#app.css";
+
+  h1 {
+    @apply text-2xl font-bold text-red-500;
+  }
+</style>
+```
+
+## Functions
+
+Tailwind provides the following build-time functions to make working with colors and the spacing scale easier.
+
+<h3 id="alpha-function">
+  <a href="#alpha-function">--alpha()</a>
+</h3>
+
+Use the `--alpha()` function to adjust the opacity of a color:
+
+<CodeExampleStack>
+
+```css
+/* [!code filename:Input CSS] */
+.my-element {
+  /* [!code highlight:2] */
+  color: --alpha(var(--color-lime-300) / 50%);
+}
+```
+
+```css
+/* [!code filename:Compiled CSS] */
+.my-element {
+  color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
+}
+```
+
+</CodeExampleStack>
+
+<h3 id="spacing-function">
+  <a href="#spacing-function">--spacing()</a>
+</h3>
+
+Use the `--spacing()` function to generate a spacing value based on your theme:
+
+<CodeExampleStack>
+
+```css
+/* [!code filename:Input CSS] */
+.my-element {
+  /* [!code highlight:2] */
+  margin: --spacing(4);
+}
+```
+
+```css
+/* [!code filename:Compiled CSS] */
+.my-element {
+  margin: calc(var(--spacing) * 4);
+}
+```
+
+</CodeExampleStack>
+
+This can also be useful in arbitrary values, especially in combination with `calc()`:
+
+```html
+<!-- [!code filename:HTML] -->
+<!-- [!code classes:py-[calc(--spacing(4)-1px)]] -->
+<div class="py-[calc(--spacing(4)-1px)]">
+  <!-- ... -->
+</div>
+```
+
+## Compatibility
+
+The following directives and functions exist solely for compatibility with Tailwind CSS v3.x.
+
+The `@config` and `@plugin` directives may be used in conjunction with `@theme`, `@utility`, and other CSS-driven features. This can be used to incrementally move over your theme, custom configuration, utilities, variants, and presets to CSS. Things defined in CSS will be merged where possible and otherwise take precedence over those defined in configs, presets, and plugins.
+
+<h3 id="config-directive">
+  <a href="#config-directive">@config</a>
+</h3>
+
+Use the `@config` directive to load a legacy JavaScript-based configuration file:
+
+```css
+/* [!code filename:CSS] */
+@config "../../tailwind.config.js";
+```
+
+The `corePlugins`, `safelist`, and `separator` options from the JavaScript-based config are not supported in v4.0. To safelist utilities in v4 use [`@source inline()`](/docs/detecting-classes-in-source-files#safelisting-specific-utilities).
+
+<h3 id="plugin-directive">
+  <a href="#plugin-directive">@plugin</a>
+</h3>
+
+Use the `@plugin` directive to load a legacy JavaScript-based plugin:
+
+```css
+/* [!code filename:CSS] */
+@plugin "@tailwindcss/typography";
+```
+
+The `@plugin` directive accepts either a package name or a local path.
+
+<h3 id="theme-function">
+  <a href="#theme-function">theme()</a>
+</h3>
+
+Use the `theme()` function to access your Tailwind theme values using dot notation:
+
+```css
+/* [!code filename:CSS] */
+.my-element {
+  /* [!code highlight:2] */
+  margin: theme(spacing.12);
+}
+```
+
+This function is deprecated, and we recommend [using CSS theme variables](/docs/theme#using-your-theme-variables) instead.

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

@@ -0,0 +1,100 @@
+import { ApiTable } from "@/components/api-table.tsx";
+import { Example } from "@/components/example.tsx";
+import { Figure } from "@/components/figure.tsx";
+import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx";
+import { Stripes } from "@/components/stripes.tsx";
+
+export const title = "gap";
+export const description = "Utilities for controlling gutters between grid and flexbox items.";
+
+<ApiTable
+  rows={[
+    ["gap-<number>", "gap: calc(var(--spacing) * <value>);"],
+    ["gap-(<custom-property>)", "gap: var(<custom-property>);"],
+    ["gap-[<value>]", "gap: <value>;"],
+    ["gap-x-<number>", "column-gap: calc(var(--spacing) * <value>);"],
+    ["gap-x-(<custom-property>)", "column-gap: var(<custom-property>);"],
+    ["gap-x-[<value>]", "column-gap: <value>;"],
+    ["gap-y-<number>", "row-gap: calc(var(--spacing) * <value>);"],
+    ["gap-y-(<custom-property>)", "row-gap: var(<custom-property>);"],
+    ["gap-y-[<value>]", "row-gap: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use `gap-<number>` utilities like `gap-2` and `gap-4` to change the gap between both rows and columns in grid and flexbox layouts:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-2 gap-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-violet-500 p-4">01</div>
+        <div className="rounded-lg bg-violet-500 p-4">02</div>
+        <div className="rounded-lg bg-violet-500 p-4">03</div>
+        <div className="rounded-lg bg-violet-500 p-4">04</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:gap-4] -->
+<div class="grid grid-cols-2 gap-4">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+</div>
+```
+
+</Figure>
+
+### Changing row and column gaps independently
+
+Use `gap-x-<number>` or `gap-y-<number>` utilities like `gap-x-8` and `gap-y-4` to change the gap between columns and rows independently:
+
+<Figure>
+
+<Example>
+  {
+    <div className="grid grid-cols-1">
+      <Stripes border className="col-start-1 row-start-1 rounded-lg" />
+      <div className="col-start-1 row-start-1 grid grid-cols-3 gap-x-8 gap-y-4 rounded-lg text-center font-mono text-sm leading-6 font-bold text-white">
+        <div className="rounded-lg bg-sky-500 p-4">01</div>
+        <div className="rounded-lg bg-sky-500 p-4">02</div>
+        <div className="rounded-lg bg-sky-500 p-4">03</div>
+        <div className="rounded-lg bg-sky-500 p-4">04</div>
+        <div className="rounded-lg bg-sky-500 p-4">05</div>
+        <div className="rounded-lg bg-sky-500 p-4">06</div>
+      </div>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:gap-x-8,gap-y-4] -->
+<div class="grid grid-cols-3 gap-x-8 gap-y-4">
+  <div>01</div>
+  <div>02</div>
+  <div>03</div>
+  <div>04</div>
+  <div>05</div>
+  <div>06</div>
+</div>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue utilities={["gap", "gap-x", "gap-y"]} value="10vw" />
+
+### Responsive design
+
+<ResponsiveDesign properties={["gap", "column-gap", "row-gap"]} defaultClass="grid gap-4" featuredClass="gap-6" />