Skip to content

Commit ac4a96f

Browse files
authored
Docs: Proposal interfaces for agnostic theming (#399)
* Docs: Proposal interfaces for agnostic theming * Docs: Move docs folder under .github Prevents conflict with build CI paths * Docs: Minor updates to proposal * Docs: Minor adjustments * Docs: Initial work on a styling override interface * Docs: Correct icon partial example
1 parent e5c56e3 commit ac4a96f

File tree

1 file changed

+160
-0
lines changed

1 file changed

+160
-0
lines changed
Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
# Agnostic Theming - Proposal Interfaces (9/16/25)
2+
3+
This document contains proposal interfaces fulfilling the requirements and criteria
4+
laid out in docs-platform/629.
5+
6+
Nothing in this document should be considered final and is subject to change.
7+
8+
## Site Config
9+
10+
```yaml
11+
params:
12+
# Collection of product groups or false to disable the product-selector
13+
productSelector: <false | ProductGroup[]>
14+
- groupLabel: <string>
15+
items: <Product[]>
16+
# Product Group Label
17+
- title: <string>
18+
# The common top-level path for all internal documents within a domain; i.e. 'nginx' for NGINX+.
19+
# Supply if the link is external to the site.
20+
url: <string | undefined>
21+
header:
22+
# Header Nav items
23+
navItems: <NavItem[]>
24+
- title: <string>
25+
url: <string>
26+
extUrl: <bool>
27+
# Items in the "F5 Sites" dropdown
28+
f5Sites: <F5Site[]>
29+
- title: <string>
30+
description: <string>
31+
url: <string>
32+
brand:
33+
# String ID for the icon set (defaults to 'lucide' if not provided)
34+
iconSet: <string | undefined>
35+
# Favicon path (default './favicon.ico')
36+
favicon: <string | undefined>
37+
# Path for standard logo (located in mounted asset folder)
38+
logo: <string | undefined>
39+
# Path for icon logo (Used in small width contexts), fallback to "logo" if not defined
40+
iconLogo: <string | undefined>
41+
# Used for dark mode variant assets
42+
dark:
43+
logo: <string>
44+
iconLogo: <string>
45+
footer:
46+
# Default to &copy;{currentYear} F5, Inc. All rights reserved
47+
copyrightText: <string | undefined>
48+
items: <NavItem[]>
49+
- title: <string>
50+
# Item URL
51+
href: <string>
52+
extUrl: <bool>
53+
54+
```
55+
56+
## F5 Sites
57+
58+
Collection of F5Site types. Used to define items for the "F5 Sites" dropdown.
59+
60+
Config location: `.Site.Params.header.f5Sites`
61+
62+
```yaml
63+
params:
64+
header:
65+
f5Sites: <F5Site[]>
66+
- title: <string>
67+
description: <string>
68+
url: <string>
69+
70+
```
71+
72+
## Product Selector
73+
74+
The product selector is one of the theme's two main mechanism's for content navigation (both internal and external).
75+
In the context of the NGINX Docs, it's used to group products according to their broader product domains.
76+
77+
```yaml
78+
params:
79+
productSelector: <ProductGroup[]>
80+
# Product group label (i.e NGINX One)
81+
- groupLabel: <string>
82+
# Individual product landing pages within that domain
83+
items: <Product[]>
84+
# Product Label
85+
- title: <string>
86+
# The URL prefix used for the section (Ex. 'nginx' for NGINX+).
87+
url: <string | undefined>
88+
# Whether the URL is external to the site (opens a new tab if true)
89+
extUrl: <bool>
90+
91+
```
92+
93+
## Styling Overrides
94+
95+
> Implementation detail: We ideally don't want to force theme users into raw oklch values; it would be a much nicer
96+
surface if theme consumers could use a color keyword of their choice (rgb, hwb, hsl). However, that surface change
97+
would require we rewrite all our current CSS variable calls
98+
99+
**Consumer: `assets/style.css`**
100+
```css
101+
:root {
102+
--color-brand: 56.6% 0.194 147.7;
103+
--color-brand-300: 0.84 0.0699 157.51;
104+
--color-brand-200: 0.91 0.0406 157.72;
105+
--color-brand-100: 0.98 0.0107 158.85;
106+
107+
--color-background: 1 0 0;
108+
--color-foreground: 0 0 0;
109+
--color-shadow: 0.86 0 0;
110+
111+
/* Dark Mode Variables */
112+
--dark_color-brand: 56.6% 0.194 147.7;
113+
--dark_color-brand-300: 0.84 0.0699 157.51;
114+
--dark_color-brand-200: 0.91 0.0406 157.72;
115+
--dark_color-brand-100: 0.98 0.0107 158.85;
116+
117+
--dark_color-background: 1 0 0;
118+
--dark_color-foreground: 0 0 0;
119+
--dark_color-shadow: 0.86 0 0;
120+
}
121+
```
122+
123+
* Variables defined in any consumer CSS files should override reasonable defaults.
124+
* Pre-defined theming support could be offered by creating CSS files defining these variables that are then
125+
loaded based on an ID (or similar mechanism).
126+
* Ex. F5 Theme or NGINX Theme
127+
128+
## Icon Partial
129+
130+
| Param | Type | Note |
131+
|---------------|------------------------|--------------------------------------------------------------------------------------------------------------|
132+
| `size` | `"sm" \| "md" \| "lg"` | Size of rendered icon (defaults to "md"). Maps to "rem" enum |
133+
| `set` | `string \| undefined` | A valid string ID for an icon set (defaults to `.Site.Params.brand.iconSet`) |
134+
| `icon` | `string \| undefined` | A string ID for the icon |
135+
| `_iconDirect` | `string \| undefined` | A direct path for the icon resource to render. If supplied, `set` and `icon` params are ignored in handling. |
136+
137+
```go-template
138+
{{ $iconPartialParams = (dict
139+
"size" "md"
140+
"set" "lucide"
141+
"icon" "lock-open"
142+
"_iconDirect" ""
143+
)}}
144+
145+
{{ partial "icon.html" $iconPartialParams }}
146+
```
147+
148+
## Additional Notes
149+
150+
* Some of these new schemas are breaking but given the low-level of current consumers, this is the best time to make schema adjustments before wider rollout.
151+
152+
### Optional Collection Definition Pattern
153+
154+
Several of the schemas above utilize an optional collection pattern that can be broken down into the following:
155+
156+
```yaml
157+
f5Sites: <false | Collection[]>
158+
```
159+
160+
When a collection is provided, the feature is toggled on. If a collection is not provided or the value is falsy, the feature is disabled.

0 commit comments

Comments
 (0)