mirror of
https://github.com/mintlify/docs.git
synced 2026-09-14 13:35:46 +08:00
Ethan Palm
6c53a28e3a
* Document className and Tailwind arbitrary value support All built-in components now accept a className prop (mint#10540), and dynamic Tailwind utilities work in className on MDX components (mint#6737). Two pages stated the opposite. - Correct the claims that Tailwind arbitrary values are unsupported in customize/custom-scripts and guides/custom-layouts - Add className and arbitrary value guidance to the Tailwind section of custom-scripts, including the runtime-class limitation and the Tab content-panel caveat - Add a Style components section to the components overview - Add className property rows to every component reference page that supports it, and note the three components that do not - Document inline Markdown support in component title props - Correct the callouts page, which said typed callouts accept only children - Replace inline style resizing with Tailwind classes in image embeds - Add a help center article for Tailwind classes not applying in the editor's live preview, and note the limitation in custom-layouts - Point skill.md at className before custom.css - Accept className, keyframes, and unstyled in the Vale vocabulary Resolves DOC-316, DOC-317 Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> * Apply batched suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> * Apply batched suggestions from code review Co-authored-by: Ethan Palm <56270045+ethanpalm@users.noreply.github.com> --------- Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
135 lines
4.3 KiB
Plaintext
135 lines
4.3 KiB
Plaintext
---
|
|
title: "Color"
|
|
description: "Display color swatches with hex values and click-to-copy capability using the color component for design system and branding documentation."
|
|
keywords: ["color", "palette", "colors", "design system", "hex", "rgb", "rgba", "hsl", "oklch"]
|
|
boost: 3
|
|
---
|
|
|
|
Use the Color component to showcase color palettes in your documentation. Display colors in a compact grid or organize them in a table with labeled rows.
|
|
|
|
## Compact variant
|
|
|
|
Display colors in a simple grid layout with color names and values.
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="blue-500" value="#3B82F6" />
|
|
<Color.Item name="blue-600" value="#2563EB" />
|
|
<Color.Item name="blue-700" value="#1D4ED8" />
|
|
<Color.Item name="blue-800" value="#1E40AF" />
|
|
</Color>
|
|
|
|
```mdx Compact example
|
|
<Color variant="compact">
|
|
<Color.Item name="blue-500" value="#3B82F6" />
|
|
<Color.Item name="blue-600" value="#2563EB" />
|
|
<Color.Item name="blue-700" value="#1D4ED8" />
|
|
<Color.Item name="blue-800" value="#1E40AF" />
|
|
</Color>
|
|
```
|
|
|
|
## Table variant
|
|
|
|
Organize colors into labeled rows for design system documentation.
|
|
|
|
<Color variant="table">
|
|
<Color.Row title="Primary">
|
|
<Color.Item name="primary-500" value="#3B82F6" />
|
|
<Color.Item name="primary-600" value="#2563EB" />
|
|
<Color.Item name="primary-700" value="#1D4ED8" />
|
|
</Color.Row>
|
|
<Color.Row title="Secondary">
|
|
<Color.Item name="secondary-500" value="#8B5CF6" />
|
|
<Color.Item name="secondary-600" value="#7C3AED" />
|
|
</Color.Row>
|
|
</Color>
|
|
|
|
```mdx Table example
|
|
<Color variant="table">
|
|
<Color.Row title="Primary">
|
|
<Color.Item name="primary-500" value="#3B82F6" />
|
|
<Color.Item name="primary-600" value="#2563EB" />
|
|
<Color.Item name="primary-700" value="#1D4ED8" />
|
|
</Color.Row>
|
|
<Color.Row title="Secondary">
|
|
<Color.Item name="secondary-500" value="#8B5CF6" />
|
|
<Color.Item name="secondary-600" value="#7C3AED" />
|
|
</Color.Row>
|
|
</Color>
|
|
```
|
|
|
|
## Color formats
|
|
|
|
The component supports all CSS color formats including hex, rgb, rgba, hsl, and oklch.
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="hex" value="#FF5733" />
|
|
<Color.Item name="rgb" value="rgb(51, 255, 87)" />
|
|
<Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
|
|
<Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
|
|
<Color.Item name="oklch" value="oklch(70% 0.2 145)" />
|
|
</Color>
|
|
|
|
```mdx Color formats example
|
|
<Color variant="compact">
|
|
<Color.Item name="hex" value="#FF5733" />
|
|
<Color.Item name="rgb" value="rgb(51, 255, 87)" />
|
|
<Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
|
|
<Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
|
|
<Color.Item name="oklch" value="oklch(70% 0.2 145)" />
|
|
</Color>
|
|
```
|
|
|
|
## Theme-aware colors
|
|
|
|
Define different colors for light and dark modes using an object with `light` and `dark` properties.
|
|
|
|
<Color variant="compact">
|
|
<Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
|
|
<Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
|
|
<Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
|
|
</Color>
|
|
|
|
```mdx Theme-aware example
|
|
<Color variant="compact">
|
|
<Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
|
|
<Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
|
|
<Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
|
|
</Color>
|
|
```
|
|
|
|
## Properties
|
|
|
|
### Color
|
|
|
|
<ResponseField name="variant" type="string" required>
|
|
Display style for the color palette. Options: `compact` or `table`.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="Color.Item | Color.Row" required>
|
|
Color items or rows to display.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="className" type="string">
|
|
Additional CSS classes to apply to the color palette.
|
|
</ResponseField>
|
|
|
|
### Color.Row
|
|
|
|
<ResponseField name="title" type="string">
|
|
Label for the row of colors. Supports inline Markdown formatting, such as `**bold**`, `_italic_`, and `` `code` ``.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="children" type="Color.Item" required>
|
|
Color items to display in the row.
|
|
</ResponseField>
|
|
|
|
### Color.Item
|
|
|
|
<ResponseField name="name" type="string">
|
|
Name or label for the color.
|
|
</ResponseField>
|
|
|
|
<ResponseField name="value" type="string | { light: string, dark: string }" required>
|
|
Color value in any CSS format, or an object with light and dark mode values.
|
|
</ResponseField>
|