@amsterdamdatalabs/enact-extensions 0.1.37 → 0.1.47

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

@@ -0,0 +1,125 @@
+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";
+
+export const title = "color";
+export const description = "Utilities for controlling the text color of an element.";
+
+<ApiTable
+  rows={[
+    ["text-inherit", "color: inherit;"],
+    ["text-current", "color: currentColor;"],
+    ["text-transparent", "color: transparent;"],
+    ...Object.entries(colors).map(([name, value]) => [`text-${name}`, `color: var(--color-${name}); /* ${value} */`]),
+    ["text-(<custom-property>)", "color: var(<custom-property>);"],
+    ["text-[<value>]", "color: <value>;"],
+  ]}
+/>
+
+## Examples
+
+### Basic example
+
+Use utilities like `text-blue-600` and `text-sky-400` to control the text color of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="relative text-center text-xl leading-6 font-medium">
+      <p className="text-blue-600 dark:text-sky-400">The quick brown fox jumps over the lazy dog.</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code classes:text-blue-600,dark:text-sky-400] -->
+<p class="text-blue-600 dark:text-sky-400">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Changing the opacity
+
+Use the color opacity modifier to control the text color opacity of an element:
+
+<Figure>
+
+<Example>
+  {
+    <div className="space-y-4 text-center text-xl leading-6 font-medium">
+      <p className="text-blue-600/100 dark:text-sky-400/100">The quick brown fox jumps over the lazy dog.</p>
+      <p className="text-blue-600/75 dark:text-sky-400/75">The quick brown fox jumps over the lazy dog.</p>
+      <p className="text-blue-600/50 dark:text-sky-400/50">The quick brown fox jumps over the lazy dog.</p>
+      <p className="text-blue-600/25 dark:text-sky-400/25">The quick brown fox jumps over the lazy dog.</p>
+    </div>
+  }
+</Example>
+
+```html
+<!-- [!code word:\/100] -->
+<!-- [!code word:\/75] -->
+<!-- [!code word:\/50] -->
+<!-- [!code word:\/25] -->
+<p class="text-blue-600/100 dark:text-sky-400/100">The quick brown fox...</p>
+<p class="text-blue-600/75 dark:text-sky-400/75">The quick brown fox...</p>
+<p class="text-blue-600/50 dark:text-sky-400/50">The quick brown fox...</p>
+<p class="text-blue-600/25 dark:text-sky-400/25">The quick brown fox...</p>
+```
+
+</Figure>
+
+### Using a custom value
+
+<UsingACustomValue element="p" utility="text" name="text color" variable="color" value="#50d71e" />
+
+### Applying on hover
+
+<TargetingSpecificStates property="color">
+
+<Figure hint="Hover over the text to see the expected behavior">
+
+<Example>
+  {
+    <p className="text-center text-xl font-medium text-gray-900 dark:text-gray-200">
+      Oh I gotta get on that{" "}
+      <a
+        href="https://en.wikipedia.org/wiki/Internet"
+        target="_blank"
+        className="underline hover:text-blue-600 dark:hover:text-blue-400"
+      >
+        internet
+      </a>
+      , I'm late on everything!
+    </p>
+  }
+</Example>
+
+```html
+<!-- [!code classes:hover:text-blue-600,dark:hover:text-blue-400] -->
+<!-- prettier-ignore -->
+<p class="...">
+  Oh I gotta get on that
+  <a class="underline hover:text-blue-600 dark:hover:text-blue-400" href="https://en.wikipedia.org/wiki/Internet">internet</a>,
+  I'm late on everything!
+</p>
+```
+
+</Figure>
+
+</TargetingSpecificStates>
+
+### Responsive design
+
+<ResponsiveDesign element="p" property="color" defaultClass="text-blue-600" featuredClass="text-green-600" />
+
+## Customizing your theme
+
+<CustomizingYourThemeColors element="p" utility="text" />