@clinia/tailwindcss 2.0.0-rc.5 → 2.0.0-rc.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -0
- package/fumadocs.css +68 -0
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -32,6 +32,7 @@ pnpm add @clinia/tailwindcss
|
|
|
32
32
|
| `@clinia/tailwindcss/tokens` | The raw brand palette and font stacks only |
|
|
33
33
|
| `@clinia/tailwindcss/fonts` | The `@font-face` declarations for the seven licensed faces |
|
|
34
34
|
| `@clinia/tailwindcss/marketing` | The illustration roles for marketing scenes. Marketing sites only |
|
|
35
|
+
| `@clinia/tailwindcss/fumadocs` | Fumadocs' colour tokens and states from Clinia's theme, for documentation sites on fumadocs-ui |
|
|
35
36
|
|
|
36
37
|
Dark mode follows a `dark` class on `<html>` or any ancestor; `light` pins a subtree back to light.
|
|
37
38
|
|
package/fumadocs.css
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
/* @clinia/tailwindcss/fumadocs, for documentation sites built on fumadocs-ui.
|
|
2
|
+
*
|
|
3
|
+
* Defines every Fumadocs colour token from Clinia's semantic tokens, so the
|
|
4
|
+
* Fumadocs layout, search, table of contents and API reference follow the
|
|
5
|
+
* Clinia theme in light and dark. Use it in place of a Fumadocs colour preset
|
|
6
|
+
* (fumadocs-ui/css/neutral.css and its siblings): a preset also sets its own
|
|
7
|
+
* dark sidebar colours, which override this mapping. Keep Fumadocs' structural
|
|
8
|
+
* preset, which sets no colours. Import order:
|
|
9
|
+
* @import "tailwindcss";
|
|
10
|
+
* @import "fumadocs-ui/css/preset.css";
|
|
11
|
+
* @import "@clinia/tailwindcss/fonts";
|
|
12
|
+
* @import "@clinia/tailwindcss";
|
|
13
|
+
* @import "@clinia/tailwindcss/fumadocs";
|
|
14
|
+
*
|
|
15
|
+
* States follow Clinia's: hover and the highlighted search result take the ink
|
|
16
|
+
* tint, and the current page and active tab are marked in Trust under
|
|
17
|
+
* full-contrast text. The state rules match Fumadocs' markup: recheck them
|
|
18
|
+
* when you upgrade Fumadocs.
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
@theme inline {
|
|
22
|
+
--color-fd-background: var(--background);
|
|
23
|
+
--color-fd-foreground: var(--foreground);
|
|
24
|
+
--color-fd-muted: var(--muted);
|
|
25
|
+
--color-fd-muted-foreground: var(--muted-foreground);
|
|
26
|
+
--color-fd-popover: var(--popover);
|
|
27
|
+
--color-fd-popover-foreground: var(--popover-foreground);
|
|
28
|
+
--color-fd-card: var(--card);
|
|
29
|
+
--color-fd-card-foreground: var(--card-foreground);
|
|
30
|
+
--color-fd-border: var(--border);
|
|
31
|
+
--color-fd-primary: var(--primary);
|
|
32
|
+
--color-fd-primary-foreground: var(--primary-foreground);
|
|
33
|
+
--color-fd-secondary: var(--secondary);
|
|
34
|
+
--color-fd-secondary-foreground: var(--secondary-foreground);
|
|
35
|
+
/* Fumadocs fills hovered items and the highlighted search result with accent. */
|
|
36
|
+
--color-fd-accent: color-mix(in oklab, var(--foreground) 4%, transparent);
|
|
37
|
+
--color-fd-accent-foreground: var(--foreground);
|
|
38
|
+
--color-fd-ring: var(--ring);
|
|
39
|
+
--color-fd-overlay: rgb(0 0 0 / 0.3);
|
|
40
|
+
|
|
41
|
+
/* Callout and diff colours. */
|
|
42
|
+
--color-fd-info: var(--muted-foreground);
|
|
43
|
+
--color-fd-idea: var(--muted-foreground);
|
|
44
|
+
--color-fd-warning: var(--warning);
|
|
45
|
+
--color-fd-error: var(--destructive);
|
|
46
|
+
--color-fd-success: var(--success);
|
|
47
|
+
--color-fd-diff-remove: color-mix(in oklab, var(--destructive) 12%, transparent);
|
|
48
|
+
--color-fd-diff-remove-symbol: var(--destructive);
|
|
49
|
+
--color-fd-diff-add: color-mix(in oklab, var(--success) 12%, transparent);
|
|
50
|
+
--color-fd-diff-add-symbol: var(--success);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Fumadocs marks the current page and the active tab with primary. Clinia marks
|
|
54
|
+
them in Trust: an accent/15 fill under full-contrast text, and Trust
|
|
55
|
+
indicators. Unlayered, so these win over Fumadocs' utilities. */
|
|
56
|
+
#nd-sidebar a[data-active="true"] {
|
|
57
|
+
background-color: color-mix(in oklab, var(--accent) 15%, transparent);
|
|
58
|
+
color: var(--foreground);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
#nd-sidebar a[data-active="true"]::before,
|
|
62
|
+
#nd-toc [data-active="true"]::before {
|
|
63
|
+
background-color: var(--accent);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[data-header-tabs] > a.border-fd-primary {
|
|
67
|
+
border-color: var(--accent);
|
|
68
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@clinia/tailwindcss",
|
|
3
|
-
"version": "2.0.0-rc.
|
|
3
|
+
"version": "2.0.0-rc.7",
|
|
4
4
|
"description": "Clinia design-system: Tailwind v4 tokens, theme, and fonts.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"homepage": "https://ui.clinia.dev",
|
|
@@ -18,7 +18,8 @@
|
|
|
18
18
|
"./tokens": "./tokens.css",
|
|
19
19
|
"./theme": "./theme.css",
|
|
20
20
|
"./fonts": "./fonts.css",
|
|
21
|
-
"./marketing": "./marketing.css"
|
|
21
|
+
"./marketing": "./marketing.css",
|
|
22
|
+
"./fumadocs": "./fumadocs.css"
|
|
22
23
|
},
|
|
23
24
|
"files": [
|
|
24
25
|
"*.css",
|