@hubpav/hwio-brand 0.7.10 → 0.8.0

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.
Files changed (9) hide show
  1. package/dist/design/er3o.md +45 -25
  2. package/dist/design/hwio-forestry.md +103 -77
  3. package/dist/design/hwio.md +104 -78
  4. package/dist/docusaurus.css +19 -19
  5. package/dist/tokens.json +530 -137
  6. package/dist/vars.css +163 -57
  7. package/package.json +1 -1
  8. package/src/brand.json +397 -108
  9. package/src/design/body.md +13 -12
package/dist/design/hwio.md CHANGED
@@ -1,52 +1,52 @@
1
1
  ---
2
2
  name: "HARDWARIO"
3
- description: "Navy and red on white with sky panels, Inter, hairline borders, 8 px rhythm, 48 px controls, sentence-case red kickers. Generated from @hubpav/hwio-brand; the source of truth is brand.json."
3
+ description: "Blue for buttons and links, Ink text on a white ground, Red kickers, the Red-to-Sky gradient as the signature; Inter in Regular, Semibold (H2, H3) and Bold; a 12-column 1 280 px grid; hairline structure. Generated from @hubpav/hwio-brand; the source of truth is brand.json."
4
4
  colors:
5
- primary: "#06367a"
5
+ primary: "#016ad4"
6
6
  primary-content: "#ffffff"
7
- secondary: "#016ad4"
7
+ secondary: "#06367a"
8
8
  secondary-content: "#ffffff"
9
9
  accent: "#e30427"
10
10
  accent-content: "#ffffff"
11
11
  neutral: "#252532"
12
- neutral-content: "#f3f4f6"
12
+ neutral-content: "#ffffff"
13
13
  base-100: "#ffffff"
14
- base-200: "#F1FAFF"
15
- base-300: "#e5e7eb"
14
+ base-200: "#f7f7f7"
15
+ base-300: "#dcdcdc"
16
16
  base-content: "#252532"
17
- info: "#009cfa"
18
- info-content: "#06367a"
19
- success: "#15803d"
17
+ info: "#016ad4"
18
+ info-content: "#ffffff"
19
+ success: "#2e7d4f"
20
20
  success-content: "#ffffff"
21
- warning: "#b45309"
22
- warning-content: "#ffffff"
23
- error: "#dc2626"
21
+ warning: "#c76a00"
22
+ warning-content: "#252532"
23
+ error: "#e30427"
24
24
  error-content: "#ffffff"
25
25
  typography:
26
26
  display:
27
27
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
28
- fontSize: "3.5rem"
28
+ fontSize: "4.5rem"
29
29
  fontWeight: 700
30
- lineHeight: 1.05
31
- letterSpacing: "-0.03em"
30
+ lineHeight: 1.2
31
+ letterSpacing: "-0.02em"
32
32
  heading:
33
33
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
34
- fontSize: "2.5rem"
35
- fontWeight: 700
36
- lineHeight: 1.1
37
- letterSpacing: "-0.025em"
34
+ fontSize: "3rem"
35
+ fontWeight: 600
36
+ lineHeight: 1.3
37
+ letterSpacing: "-0.015em"
38
38
  subheading:
39
39
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
40
- fontSize: "1.375rem"
41
- fontWeight: 700
42
- lineHeight: 1.2
40
+ fontSize: "2rem"
41
+ fontWeight: 600
42
+ lineHeight: 1.3
43
43
  letterSpacing: "-0.01em"
44
44
  title:
45
45
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
46
- fontSize: "1.125rem"
46
+ fontSize: "1.25rem"
47
47
  fontWeight: 700
48
48
  lineHeight: 1.3
49
- letterSpacing: "-0.005em"
49
+ letterSpacing: "0"
50
50
  lead:
51
51
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
52
52
  fontSize: "1.1875rem"
@@ -55,20 +55,38 @@ typography:
55
55
  letterSpacing: "0"
56
56
  body:
57
57
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
58
- fontSize: "1.0625rem"
58
+ fontSize: "1rem"
59
59
  fontWeight: 400
60
60
  lineHeight: 1.6
61
61
  letterSpacing: "0"
62
- kicker:
62
+ caption:
63
63
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
64
- fontSize: "0.875rem"
65
- fontWeight: 600
64
+ fontSize: "0.8125rem"
65
+ fontWeight: 400
66
66
  lineHeight: 1.4
67
67
  letterSpacing: "0"
68
+ kicker:
69
+ fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
70
+ fontSize: "0.8125rem"
71
+ fontWeight: 700
72
+ lineHeight: 1.4
73
+ letterSpacing: "0.07em"
74
+ chip:
75
+ fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
76
+ fontSize: "0.75rem"
77
+ fontWeight: 700
78
+ lineHeight: 1.4
79
+ letterSpacing: "0.07em"
80
+ figure:
81
+ fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
82
+ fontSize: "2.5rem"
83
+ fontWeight: 700
84
+ lineHeight: 1.2
85
+ letterSpacing: "-0.02em"
68
86
  button:
69
87
  fontFamily: "'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif"
70
88
  fontSize: "0.9375rem"
71
- fontWeight: 600
89
+ fontWeight: 700
72
90
  lineHeight: 1
73
91
  letterSpacing: "0"
74
92
  rounded:
@@ -81,9 +99,11 @@ spacing:
81
99
  section-lg: "112px"
82
100
  section-compact: "40px"
83
101
  section-compact-lg: "48px"
84
- container-hub: "1275px"
85
- container-landing: "1640px"
86
- container-pad: "27px"
102
+ container: "1328px"
103
+ container-pad: "24px"
104
+ grid-columns: "12"
105
+ grid-width: "1280px"
106
+ grid-gutter: "24px"
87
107
  control: "48px"
88
108
  card-padding: "32px"
89
109
  components:
@@ -131,18 +151,18 @@ components:
131
151
 
132
152
  ## Overview
133
153
 
134
- **Creative North Star: "The instrument panel"**
154
+ **Creative North Star: "Devices that bring industrial assets online"**
135
155
 
136
- HARDWARIO sells industrial IoT hardware to system integrators, engineers, schools and plant operators. The web family reads like a well-made instrument: calm white ground, navy for what acts, one red mark for what matters, generous measure and no decoration that does not carry information. This file documents the system as built (direction A, "www systematised", owner ruling R9) and is regenerated from brand.json, so it matches the shipped tokens.
156
+ HARDWARIO designs and manufactures the devices that bring industrial assets online. The web family follows the Brand Guidelines HBG.261028.01 revision 4 (issued 2026-10-30), the master for every HARDWARIO surface: a page is mostly white with Ink type, Blue gives structure (buttons and links), Red marks (kickers) and highlights the one thing per page, and the gradient frames. Web-only rules on top of the guidelines (responsive sizes, breakpoints, states, motion, dark-mode behaviour) are the web layer in website-admin `DESIGN-SYSTEM.md`. This file is regenerated from brand.json, so it matches the shipped tokens.
137
157
 
138
158
  Key characteristics:
139
159
 
140
160
  - One type family (Inter), one accent, hairline structure, flat surfaces.
141
- - Sentence-case labels and buttons everywhere ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); kickers instead of uppercase eyebrows.
161
+ - Sentence case for headings, labels and buttons ([R4](https://github.com/hardwario/website-admin/blob/main/DESIGN-SYSTEM.md)); capitals only for short labels and kickers.
142
162
  - Light is the default theme on every site; dark is a visitor's choice remembered without a consent gate (R11).
143
163
  - Copy is the product: components carry the site's own words, never placeholder text.
144
164
 
145
- **The Brand Rule.** The HARDWARIO logo, navy `#06367a` as primary with red `#e30427` as accent (owner ruling R1) and Inter are the identity. www.hardwario.com's live design is the reference; a token or component look changes only with an owner ruling recorded in website-admin `DESIGN-SYSTEM.md`.
165
+ **The Brand Rule.** The Brand Guidelines HBG.261028.01 are the master: nothing on the web contradicts them. Blue `#016ad4` fills buttons and colours links, Ink `#252532` sets text (never pure black), Red `#e30427` marks kickers and the one highlight, and the gradient `linear-gradient(90deg, #e30427, #009cfa)` frames. A web need the guidelines do not cover is a web-layer rule in website-admin `DESIGN-SYSTEM.md`; one that would contradict them goes back to the guidelines as a change request.
146
166
 
147
167
  ## Colors
148
168
 
@@ -150,64 +170,69 @@ Roles follow the DaisyUI 5 vocabulary so every `@hubpav/hwio-ui` component and e
150
170
 
151
171
  | Role | Value | Use |
152
172
  |---|---|---|
153
- | `primary` / `primary-content` | `#06367a` on `#ffffff` | buttons, active states, links in navigation |
154
- | `secondary` / `secondary-content` | `#016ad4` on `#ffffff` | focus ring, secondary emphasis |
155
- | `accent` / `accent-content` | `#e30427` on `#ffffff` | kicker, current-page marker, inline links; never large fills |
156
- | `neutral` / `neutral-content` | `#252532` on `#f3f4f6` | ink panels and the footer |
157
- | `base-100` / `base-100-content` | `#ffffff` on `undefined` | page ground |
158
- | `base-200` / `base-200-content` | `#F1FAFF` on `undefined` | alternate section surface |
159
- | `base-300` / `base-300-content` | `#e5e7eb` on `undefined` | hairline borders |
160
- | `info` / `info-content` | `#009cfa` on `#06367a` | informational badges |
161
- | `success` / `success-content` | `#15803d` on `#ffffff` | form success |
162
- | `warning` / `warning-content` | `#b45309` on `#ffffff` | warnings |
163
- | `error` / `error-content` | `#dc2626` on `#ffffff` | form errors |
164
-
165
- **The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`), not hex values.
166
-
167
- **The One Accent Rule.** The accent carries the kicker, the current-page marker and inline links; it never fills large surfaces and never sets small body text (R5).
173
+ | `primary` / `primary-content` | `#ffffff` on `#016ad4` | buttons, the current-page marker, active states (Blue; Sky in dark) |
174
+ | `secondary` / `secondary-content` | `#ffffff` on `#06367a` | focus ring, dark grounds (Navy; Sky in dark) |
175
+ | `accent` / `accent-content` | `#ffffff` on `#e30427` | kickers and the one highlight per page; never large fills, never small body text |
176
+ | `neutral` / `neutral-content` | `#ffffff` on `#252532` | Ink panels and the footer |
177
+ | `base-100` / `base-content` | `#252532` on `#ffffff` | page ground |
178
+ | `base-200` / `base-content` | `#252532` on `#f7f7f7` | Panel: cards, zones, alternate sections |
179
+ | `base-300` / `base-content` | `#252532` on `#dcdcdc` | Hairline: rules and thin frames |
180
+ | `info` / `info-content` | `#ffffff` on `#016ad4` | info: a note, nothing to do (Blue, a proposal in the guidelines, D34) |
181
+ | `success` / `success-content` | `#ffffff` on `#2e7d4f` | done, passed, in limits |
182
+ | `warning` / `warning-content` | `#252532` on `#c76a00` | attention, at risk; never a ground for text (White 3.8:1, Ink 3.9:1) |
183
+ | `error` / `error-content` | `#ffffff` on `#e30427` | failed, critical, stop; in charts the only use of Red |
184
+
185
+ **The Token Rule.** A colour, radius or type change is a `brand.json` edit and a `website-ui` pull request, never site-local CSS. Sites consume roles (`bg-primary`, `text-base-content`) and the `--hwio-*` variables, not hex values.
186
+
187
+ **The One Accent Rule.** The accent carries the kicker and the one highlight of a page; it never fills large surfaces and never sets small body text (R5). In charts and dashboards Red means a failure and nothing else (the light red in dark mode). On white the series are Blue, Sky and Gray with a bold Navy highlight; Sky marks are labelled directly in Ink, and an unlabelled Sky mark gets a 1 px Blue outline. On dark grounds the series are Sky, Blue and the light gray with a bold White highlight (`--hwio-chart-*`, D44).
188
+
189
+ **The Gradient Rule.** `--hwio-gradient` (Red to Sky, 90°) frames: a band along an edge, a short rule under a title, the strip on top of a card. `--hwio-gradient-figure` fills the one key figure of a page, 28 pt and up: the left three quarters of the gradient on white, the light red to Sky over the full length on the dark ground (D44). Never behind body text, tables or photographs, never on icons, never reversed or vertical.
168
190
 
169
191
  ### Dark theme (`hwio-dark`)
170
192
 
171
- The dark pair keeps the same roles; visitors choose it with the theme toggle and the choice is remembered (R11). The primary lifts to the light brand blue with dark content so filled and outline buttons stay legible (R10).
193
+ The dark mode of the Brand Guidelines (D35, ratified for the web on 2026-10-29): a near-black ground, Ink surfaces, White text, the light gray for secondary text, Sky for buttons and links, the light red for accents and lighter status colours. The dark pair keeps the same roles; light is the default, visitors choose dark with the theme toggle and the choice is remembered (R11).
172
194
 
173
195
  | Role | Value |
174
196
  |---|---|
175
- | `primary` / `primary-content` | `#009cfa` on `#0f0f14` |
176
- | `secondary` / `secondary-content` | `#009cfa` on `#0f0f14` |
177
- | `accent` / `accent-content` | `#f43f5e` on `#0f0f14` |
178
- | `neutral` / `neutral-content` | `#23232f` on `#e7e7ee` |
179
- | `base-100` / `base-100-content` | `#0f0f14` on `undefined` |
180
- | `base-200` / `base-200-content` | `#1a1a22` on `undefined` |
181
- | `base-300` / `base-300-content` | `#23232f` on `undefined` |
182
- | `info` / `info-content` | `#009cfa` on `#06367a` |
183
- | `success` / `success-content` | `#15803d` on `#ffffff` |
184
- | `warning` / `warning-content` | `#b45309` on `#ffffff` |
185
- | `error` / `error-content` | `#dc2626` on `#ffffff` |
197
+ | `primary` / `primary-content` | `#16161d` on `#009cfa` |
198
+ | `secondary` / `secondary-content` | `#16161d` on `#009cfa` |
199
+ | `accent` / `accent-content` | `#16161d` on `#f43f5e` |
200
+ | `neutral` / `neutral-content` | `#ffffff` on `#252532` |
201
+ | `base-100` / `base-content` | `#ffffff` on `#16161d` |
202
+ | `base-200` / `base-content` | `#ffffff` on `#252532` |
203
+ | `base-300` / `base-content` | `#ffffff` on `#3b3b46` |
204
+ | `info` / `info-content` | `#16161d` on `#009cfa` |
205
+ | `success` / `success-content` | `#16161d` on `#34c47a` |
206
+ | `warning` / `warning-content` | `#16161d` on `#f59e0b` |
207
+ | `error` / `error-content` | `#16161d` on `#f43f5e` |
186
208
 
187
209
  ## Typography
188
210
 
189
- Inter for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. The ramp tightens tracking as size grows.
211
+ Inter for everything: display, body, labels and numerals (tabular numerals in stats). The fallback face is metric-matched to Arial so the pre-paint gate (`font-display: block`, R3) never repaints a layout. Each theme file carries its ramp as `--hwio-type-<role>-*` variables.
190
212
 
191
213
  | Role | Element | Size (large screens) | Weight | Line height | Tracking |
192
214
  |---|---|---|---|---|---|
193
- | display | `h1` | 3.5rem | 700 | 1.05 | -0.03em |
194
- | heading | `h2` | 2.5rem | 700 | 1.1 | -0.025em |
195
- | subheading | `h3` | 1.375rem | 700 | 1.2 | -0.01em |
196
- | title | `h4` | 1.125rem | 700 | 1.3 | -0.005em |
215
+ | display | `h1` | 4.5rem | 700 | 1.2 | -0.02em |
216
+ | heading | `h2` | 3rem | 600 | 1.3 | -0.015em |
217
+ | subheading | `h3` | 2rem | 600 | 1.3 | -0.01em |
218
+ | title | `h4` | 1.25rem | 700 | 1.3 | 0 |
197
219
  | lead | `.hwio-lead` | 1.1875rem | 400 | 1.55 | 0 |
198
- | body | `body` | 1.0625rem | 400 | 1.6 | 0 |
199
- | kicker | `.hwio-kicker` | 0.875rem | 600 | 1.4 | 0 |
200
- | button | `.btn` | 0.9375rem | 600 | 1 | 0 |
220
+ | body | `body` | 1rem | 400 | 1.6 | 0 |
221
+ | caption | `.hwio-caption` | 0.8125rem | 400 | 1.4 | 0 |
222
+ | kicker | `.hwio-kicker` | 0.8125rem | 700 | 1.4 | 0.07em, uppercase |
223
+ | chip | `.hwio-chip` | 0.75rem | 700 | 1.4 | 0.07em, uppercase |
224
+ | figure | `.hwio-figure` | 2.5rem | 700 | 1.2 | -0.02em |
225
+ | button | `.btn` | 0.9375rem | 700 | 1 | 0 |
201
226
 
202
- Smaller screens step the display and heading roles down (display: 2.5rem at base, 3rem at md, 3.5rem from 64rem; heading: 2rem at base, 2.5rem from 64rem). Headings use `text-wrap: balance`.
227
+ Smaller screens step the larger roles down (display: 2.5rem below 48rem, 3rem from 48rem, 3.75rem from 64rem, 4.5rem from 80rem; heading: 2rem below 48rem, 2.5rem from 64rem, 3rem from 80rem, line height 1.2 from 64rem; subheading: 1.5rem below 48rem, 1.75rem from 64rem, 2rem from 80rem). Headings use `text-wrap: balance`.
203
228
 
204
229
  ## Layout
205
230
 
206
- Two container presets from the theme: the hub width (1275px) for content-rich sites and the landing width (1640px) for the single-page marketing sites, both with 27px side padding. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
231
+ Twelve columns, 1280px wide, with 24px gutters (Brand Guidelines chapter 05): the container is 1328px including its 24px margin on each side, so the content box is the guidelines' 1280px grid. Content sits flush to the margins; nothing floats in from them. Sections stack on an 8 px rhythm: 80px (112px from 64rem) of vertical padding, compact bands 40px (48px from 64rem). Section content opens with a `HWioSectionHeader` in `stack` (centred) or `split` (5/7 grid, aligned to the baseline) layout; stats bands and choice cards divide with hairlines, not boxes.
207
232
 
208
233
  ## Elevation & Depth
209
234
 
210
- The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
235
+ The system is flat. DaisyUI `depth` and `noise` are `0`; there are no shadow tokens. Structure comes from hairline borders (`base-300`) and surface shifts (`base-100` on `base-200`, Ink panels on `neutral`). A dark-surface panel uses the `neutral` pair and the inverse button; nothing floats.
211
236
 
212
237
  ## Shapes
213
238
 
@@ -215,9 +240,10 @@ Corner radii from the theme: fields 0.5rem, boxes 1rem, selectors 2rem. Borders
215
240
 
216
241
  ## Components
217
242
 
218
- - **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 600, sentence case, 0.5rem radius; large buttons widen padding at the same height.
243
+ - **Buttons.** `button-primary` (primary fill, primary-content text), `button-secondary` (primary outline on base-100), `button-inverse` for Ink panels (neutral-content fill), `ghost` and `link`. All 48px tall, 0.9375rem at weight 700, sentence case, 0.5rem radius; large buttons widen padding at the same height.
219
244
  - **Cards.** `card card-border` on base-100 with a hairline, 32px padding; the lead choice card carries a 3 px accent top border. Cards never nest.
220
- - **Kicker and lead.** The kicker is the accent-coloured 0.875rem label above a heading; the lead is 1.1875rem muted text below it.
245
+ - **Kicker and lead.** The kicker is the accent-coloured 0.8125rem label above a heading, Bold caps (0.07em tracking); the lead is 1.1875rem secondary text below it.
246
+ - **Icons.** One colour from `--hwio-icon`; they label, never decorate.
221
247
  - **Inputs.** Field radius, hairline border, 48px tall; focus ring 2 px `secondary`.
222
248
  - **Navigation.** `HWioHeader` with mega panels on wide screens (`desktopFrom="xl"` on sites with five or more items); the current page is marked by a 2 px bar on the header's bottom edge.
223
249
  - **Bands.** `HWioStatsBand` (hairline top and bottom, vertical dividers, count-up with tabular numerals), `HWioCtaBand`, `HWioLogoStrip`.
@@ -225,9 +251,9 @@ Corner radii from the theme: fields 0.5rem, boxes 1rem, selectors 2rem. Borders
225
251
  ## Do's and Don'ts
226
252
 
227
253
  - Do keep Inter as the only text face.
228
- - Do use the theme roles for every colour; don't hard-code hex values in a site.
254
+ - Do use the theme roles and `--hwio-*` variables for every colour; don't hard-code hex values in a site.
229
255
  - Do keep buttons sentence case and 48px tall; don't uppercase labels or shrink touch targets below 44 px.
230
256
  - Do keep dark mode a visitor's choice with the `hwio_theme` memory; don't follow the OS scheme by default (R11).
231
257
  - Don't add inline styles, `style=` attributes or template-literal class names; `policy-lint` fails them.
232
- - Don't nest cards, add glass or gradient effects, or animate anything above the fold.
258
+ - Don't nest cards, add glass, shadows or gradient effects beyond the Gradient Rule, or animate anything above the fold.
233
259
  - Don't set small body text in the accent colour (R5).
package/dist/docusaurus.css CHANGED
@@ -1,29 +1,29 @@
1
1
  /* Generated from brand.json by @hubpav/hwio-brand: Infima variables for the Docusaurus sites. */
2
2
  :root {
3
- --ifm-color-primary: #e30427;
4
- --ifm-color-primary-dark: #cc0423;
5
- --ifm-color-primary-darker: #c10321;
6
- --ifm-color-primary-darkest: #aa031d;
7
- --ifm-color-primary-light: #e61d3d;
8
- --ifm-color-primary-lighter: #e72a47;
9
- --ifm-color-primary-lightest: #eb4f68;
10
- --ifm-color-secondary: #016ad4;
3
+ --ifm-color-primary: #016ad4;
4
+ --ifm-color-primary-dark: #015fbf;
5
+ --ifm-color-primary-darker: #015ab4;
6
+ --ifm-color-primary-darkest: #01509f;
7
+ --ifm-color-primary-light: #1a79d8;
8
+ --ifm-color-primary-lighter: #2780da;
9
+ --ifm-color-primary-lightest: #4d97e1;
10
+ --ifm-color-secondary: #06367a;
11
11
  --ifm-font-family-base: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
12
12
  --ifm-font-color-base: #252532;
13
13
  --ifm-background-color: #ffffff;
14
14
  --ifm-code-font-size: 95%;
15
15
  --hwio-color-ink: #252532;
16
- --hwio-color-muted: #5c5f70;
16
+ --hwio-color-muted: #6b6a6a;
17
17
  }
18
18
  [data-theme='dark'] {
19
- --ifm-color-primary: #f43f5e;
20
- --ifm-color-primary-dark: #dc3955;
21
- --ifm-color-primary-darker: #cf3650;
22
- --ifm-color-primary-darkest: #b72f47;
23
- --ifm-color-primary-light: #f5526e;
24
- --ifm-color-primary-lighter: #f65c76;
25
- --ifm-color-primary-lightest: #f7798e;
26
- --ifm-background-color: #0f0f14;
27
- --ifm-background-surface-color: #1a1a22;
28
- --ifm-font-color-base: #e7e7ee;
19
+ --ifm-color-primary: #009cfa;
20
+ --ifm-color-primary-dark: #008ce1;
21
+ --ifm-color-primary-darker: #0085d5;
22
+ --ifm-color-primary-darkest: #0075bc;
23
+ --ifm-color-primary-light: #1aa6fb;
24
+ --ifm-color-primary-lighter: #26abfb;
25
+ --ifm-color-primary-lightest: #4dbafc;
26
+ --ifm-background-color: #16161d;
27
+ --ifm-background-surface-color: #252532;
28
+ --ifm-font-color-base: #ffffff;
29
29
  }