dioxus-docs-kit 0.6.1

Reusable documentation site shell for Dioxus applications
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139

/*
 * dioxus-docs-kit — public theming surface
 *
 * Ship this file alongside your Tailwind CSS input. Consumers theme the docs
 * kit by overriding any of the `--dk-*` custom properties below.
 *
 * With Tailwind/DaisyUI set up:
 *   @source "./safelist.html";      <- (or your own scan config)
 *   @import "./theme.css";          <- this file
 *
 * All tokens have DaisyUI fallbacks, so sites that DO use DaisyUI inherit
 * the current theme automatically. Sites that DON'T use DaisyUI still get
 * sensible neutral defaults.
 *
 * The selector list below scopes the tokens to the kit's stable wrappers.
 * This keeps the tokens off :root (avoiding conflicts with other libraries
 * on the same page) but still lets consumers scope their own overrides
 * anywhere inside `.dk-root`.
 */

.dk-root,
.dk-docs-root,
.dk-blog-root {
    /* -- surface colors -- */
    --dk-bg:       var(--color-base-100, var(--b1, #ffffff));
    --dk-bg-sub:   var(--color-base-200, var(--b2, #f5f5f5));
    --dk-bg-alt:   var(--color-base-300, var(--b3, #e5e5e5));
    --dk-border:   var(--color-base-300, var(--b3, #e5e5e5));

    /* -- foreground colors -- */
    --dk-fg:       var(--color-base-content, var(--bc, #111111));
    --dk-muted:    color-mix(in srgb, var(--dk-fg) 65%, transparent);
    --dk-dim:      color-mix(in srgb, var(--dk-fg) 40%, transparent);

    /* -- accent -- */
    --dk-accent:      var(--color-primary, var(--p, #2563eb));
    --dk-accent-fg:   var(--color-primary-content, var(--pc, #ffffff));
    --dk-accent-soft: color-mix(in srgb, var(--dk-accent) 10%, transparent);

    /* -- radii -- */
    --dk-radius-sm: 6px;
    --dk-radius:    10px;
    --dk-radius-lg: 16px;

    /* -- typography -- */
    --dk-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --dk-font-heading: var(--dk-font-body);
    --dk-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* -- layout -- */
    --dk-article-width: 72ch;
    --dk-sidebar-width: 16rem;  /* = w-64 */
    --dk-toc-width:     14rem;  /* = w-56 */
}

/* -------------------------------------------------------------------------- */
/* Heading font — Proposal 4                                                  */
/* Applies --dk-font-heading to article headings. Consumers who leave the     */
/* token equal to --dk-font-body see no difference.                           */
/* -------------------------------------------------------------------------- */

.dk-article h1,
.dk-article h2,
.dk-article h3,
.dk-article h4,
.dk-article-title {
    font-family: var(--dk-font-heading);
}

/* -------------------------------------------------------------------------- */
/* Article width — wired from --dk-article-width                              */
/* Specificity (0.2.0) beats the Tailwind max-w-3xl utility (0.1.0), so this  */
/* token takes precedence even though the component still ships max-w-3xl as  */
/* a fallback for consumers who don't import theme.css.                       */
/* -------------------------------------------------------------------------- */

.dk-root .dk-article {
    max-width: var(--dk-article-width);
    margin-inline: auto;
}

/* -------------------------------------------------------------------------- */
/* Density variants — DocsVariant::Prose (default) and DocsVariant::Reference */
/* -------------------------------------------------------------------------- */

.dk-variant-reference {
    --dk-article-width: 64ch;
}

.dk-variant-reference .dk-article-body {
    font-size: 0.95rem;
    line-height: 1.55;
}

.dk-variant-reference .dk-article-title {
    font-size: 2rem;     /* tighter than the Prose default (text-4xl ≈ 2.25rem) */
    line-height: 1.15;
}

/* -------------------------------------------------------------------------- */
/* Minimal dk-* affordances                                                   */
/* Additive hooks — these do NOT override the default DaisyUI look, they      */
/* only expose points where consumers can attach their own rules.             */
/* -------------------------------------------------------------------------- */

.dk-nav-item-active {
    /* Consumers target this to restyle the active sidebar link. */
}

.dk-announcement-slot,
.dk-sidebar-header-slot,
.dk-sidebar-footer-slot,
.dk-article-footer-slot,
.dk-footer-slot {
    /* Wrapper hooks around optional <DocsLayout> slots. */
}

/* -------------------------------------------------------------------------- */
/* Code blocks — dioxus-code container fit                                    */
/* dioxus-code renders into a `.dxc` element with its own padding and radii. */
/* Tame it so it inherits the kit's container chrome and wraps long lines.   */
/* -------------------------------------------------------------------------- */

.dk-code-block .dxc {
    border-radius: 0;
    font-size: 0.875rem;
    line-height: 1.625;
    margin: 0;
    max-width: 100%;
    overflow-x: hidden;
    overflow-wrap: anywhere;
    padding: 1rem;
    white-space: pre-wrap;
}

.dk-code-block-body--bare .dxc,
.dk-code-group-block .dxc {
    padding-right: 3.5rem;
}