@hubpav/hwio-ui 0.7.11 → 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 (20) hide show
  1. package/package.json +4 -4
  2. package/src/components/HWioChoiceCards.astro +3 -3
  3. package/src/components/HWioContactSection.astro +1 -1
  4. package/src/components/HWioCookieConsent.astro +9 -9
  5. package/src/components/HWioFaq.astro +1 -1
  6. package/src/components/HWioFeatureCard.astro +1 -1
  7. package/src/components/HWioFooter.astro +2 -2
  8. package/src/components/HWioHeader.astro +2 -2
  9. package/src/components/HWioHeroSplit.astro +1 -1
  10. package/src/components/HWioLogoStrip.astro +1 -1
  11. package/src/components/HWioPricingTiers.astro +1 -1
  12. package/src/components/HWioProcessSteps.astro +1 -1
  13. package/src/components/HWioStatsBand.astro +2 -2
  14. package/src/styles/prose.css +3 -3
  15. package/src/styles/styles.css +94 -32
  16. package/src/styles/themes/er3o.css +92 -1
  17. package/src/styles/themes/hwio-dark.css +127 -19
  18. package/src/styles/themes/hwio-forestry-dark.css +127 -19
  19. package/src/styles/themes/hwio-forestry.css +121 -13
  20. package/src/styles/themes/hwio.css +122 -14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hubpav/hwio-ui",
3
- "version": "0.7.11",
3
+ "version": "0.8.0",
4
4
  "description": "HARDWARIO web design system for Astro: DaisyUI 5 themes generated from the brand tokens, the Tailwind entry stylesheet and the HWio* components.",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -32,9 +32,9 @@
32
32
  "test": "node --test \"test/**/*.test.mjs\""
33
33
  },
34
34
  "dependencies": {
35
- "@hubpav/hwio-brand": "0.7.11",
36
- "@hubpav/hwio-web-runtime": "0.7.11",
37
- "@hubpav/hwio-web-worker": "0.7.11",
35
+ "@hubpav/hwio-brand": "0.8.0",
36
+ "@hubpav/hwio-web-runtime": "0.8.0",
37
+ "@hubpav/hwio-web-worker": "0.8.0",
38
38
  "daisyui": "5.7.47"
39
39
  },
40
40
  "peerDependencies": {
package/src/components/HWioChoiceCards.astro CHANGED
@@ -15,12 +15,12 @@ const cols = COLS[(Math.min(Math.max(items.length, 1), 3) as 1 | 2 | 3)];
15
15
  return (
16
16
  <article class:list={['card card-border flex h-full flex-col bg-base-100 border-t-[3px]', isLead ? 'border-t-accent' : 'border-t-base-300']}>
17
17
  <div class="card-body gap-0 p-10">
18
- <p class:list={['mb-4 text-sm font-semibold', isLead ? 'text-accent' : 'hwio-muted']}>{c.label}</p>
19
- <h3 class="mb-3.5 text-[1.75rem] leading-[1.15] tracking-[-0.02em]">{c.title}</h3>
18
+ <p class:list={['hwio-weight-label mb-4 text-sm', isLead ? 'text-accent' : 'hwio-muted']}>{c.label}</p>
19
+ <h3 class="hwio-choice-title mb-3.5">{c.title}</h3>
20
20
  <p class="hwio-muted mb-6">{c.text}</p>
21
21
  {c.points && c.points.length > 0 && (
22
22
  <ul class="hwio-muted mb-8 flex flex-col gap-3 text-[15px]">
23
- {c.points.map((pt) => <li class="flex items-start gap-3"><HWioIcon name="check" class="mt-0.5 shrink-0 text-accent" />{pt}</li>)}
23
+ {c.points.map((pt) => <li class="flex items-start gap-3"><HWioIcon name="check" class="hwio-icon mt-0.5 shrink-0" />{pt}</li>)}
24
24
  </ul>
25
25
  )}
26
26
  <div class="mt-auto"><HWioButton href={c.cta.href} external={c.cta.external} variant={isLead ? 'primary' : 'secondary'} arrow={isLead} track={c.cta.track}>{c.cta.label}</HWioButton></div>
package/src/components/HWioContactSection.astro CHANGED
@@ -23,7 +23,7 @@ const { id = 'contact', eyebrow, title, lead, person, tone = 'alt', class: class
23
23
  <div class="mt-8 flex items-center gap-4">
24
24
  {person.image && <img src={person.image.src} alt={person.image.alt} width={person.image.width} height={person.image.height} class="size-16 rounded-full object-cover" loading="lazy" />}
25
25
  <div class="text-sm">
26
- <p class="font-semibold">{person.name}</p>
26
+ <p class="hwio-weight-label">{person.name}</p>
27
27
  {person.role && <p class="opacity-80">{person.role}</p>}
28
28
  {person.email && <a href={`mailto:${person.email}`} class="link link-hover inline-flex items-center gap-1"><HWioIcon name="mail" size="sm" />{person.email}</a>}
29
29
  {person.phone && <a href={person.phoneHref ?? `tel:${person.phone.replace(/\s+/g, '')}`} class="link link-hover ml-3 inline-flex items-center gap-1 whitespace-nowrap"><HWioIcon name="phone" size="sm" />{person.phone}</a>}
package/src/components/HWioCookieConsent.astro CHANGED
@@ -24,10 +24,10 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
24
24
  <div class="card card-border mx-auto max-w-5xl bg-base-100 shadow-2xl">
25
25
  <div class="card-body gap-4 md:flex-row md:items-center">
26
26
  <div class="min-w-0 flex-1">
27
- <p class="text-base font-semibold">{labels.title}</p>
28
- <p class="mt-1 text-sm leading-6 opacity-80">
27
+ <p class="hwio-weight-label text-base">{labels.title}</p>
28
+ <p class="hwio-note mt-1 text-sm leading-6">
29
29
  {labels.short}
30
- <a href={policyHref} class="link link-accent font-semibold">{labels.policy}</a>
30
+ <a href={policyHref} class="link hwio-link hwio-weight-label">{labels.policy}</a>
31
31
  </p>
32
32
  </div>
33
33
  <div class="flex flex-col gap-2 sm:flex-row md:shrink-0">
@@ -45,8 +45,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
45
45
  <div class="card-body gap-6">
46
46
  <div class="flex items-start justify-between gap-6">
47
47
  <div>
48
- <h2 id="hwio-consent-settings-title" class="text-2xl font-bold">{labels.settingsTitle}</h2>
49
- <p class="mt-2 text-sm leading-6 opacity-80">{labels.settingsIntro}</p>
48
+ <h2 id="hwio-consent-settings-title" class="text-2xl">{labels.settingsTitle}</h2>
49
+ <p class="hwio-note mt-2 text-sm leading-6">{labels.settingsIntro}</p>
50
50
  </div>
51
51
  <button type="button" data-hwio-consent-close class="btn btn-ghost btn-square btn-sm" aria-label={labels.close}>
52
52
  <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
@@ -56,8 +56,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
56
56
  <div class="rounded-box border border-base-300 p-4">
57
57
  <div class="flex items-start justify-between gap-4">
58
58
  <div>
59
- <p class="font-semibold">{labels.categories.necessary.title}</p>
60
- <p class="mt-1 text-sm leading-6 opacity-80">{labels.categories.necessary.description}</p>
59
+ <p class="hwio-weight-label">{labels.categories.necessary.title}</p>
60
+ <p class="hwio-note mt-1 text-sm leading-6">{labels.categories.necessary.description}</p>
61
61
  </div>
62
62
  <span class="badge badge-ghost shrink-0">{labels.alwaysOn}</span>
63
63
  </div>
@@ -65,8 +65,8 @@ const optional = ['preferences', 'statistics', 'marketing'] as const;
65
65
  {optional.map((category) => (
66
66
  <label class="flex cursor-pointer items-start justify-between gap-4 rounded-box border border-base-300 p-4 transition-colors hover:border-secondary">
67
67
  <span>
68
- <span class="block font-semibold">{labels.categories![category].title}</span>
69
- <span class="mt-1 block text-sm leading-6 opacity-80">{labels.categories![category].description}</span>
68
+ <span class="hwio-weight-label block">{labels.categories![category].title}</span>
69
+ <span class="hwio-note mt-1 block text-sm leading-6">{labels.categories![category].description}</span>
70
70
  </span>
71
71
  <input type="checkbox" class="toggle toggle-primary mt-1 shrink-0" id={`hwio-consent-${category}`} name={`hwio-consent-${category}`} autocomplete="off" data-hwio-consent-toggle={category} />
72
72
  </label>
package/src/components/HWioFaq.astro CHANGED
@@ -9,7 +9,7 @@ const ld = { '@context': 'https://schema.org', '@type': 'FAQPage', mainEntity: i
9
9
  <div class:list={['space-y-3', className]}>
10
10
  {items.map((item) => (
11
11
  <details class="collapse collapse-arrow border border-base-300 bg-base-100" name={name}>
12
- <summary class="collapse-title font-semibold">{item.q}</summary>
12
+ <summary class="collapse-title hwio-weight-label">{item.q}</summary>
13
13
  <div class="collapse-content space-y-3 opacity-90">{html ? <div set:html={paragraphs(item.a).join('')} /> : paragraphs(item.a).map((p) => <p>{p}</p>)}</div>
14
14
  </details>
15
15
  ))}
package/src/components/HWioFeatureCard.astro CHANGED
@@ -6,7 +6,7 @@ const { title, text, icon, href, class: className = '' } = Astro.props;
6
6
  <article class:list={['card card-border h-full bg-base-100', href ? 'transition-shadow hover:shadow-lg' : '', className]}>
7
7
  <div class="card-body gap-0">
8
8
  <slot name="icon">
9
- {icon && <span class="mb-6 inline-flex size-12 items-center justify-center rounded-xl bg-accent/8 text-accent"><HWioIcon name={icon as 'check'} size="lg" /></span>}
9
+ {icon && <span class="hwio-icon-tile mb-6 inline-flex size-12 items-center justify-center rounded-xl"><HWioIcon name={icon as 'check'} size="lg" /></span>}
10
10
  </slot>
11
11
  <h3 class="mb-2.5">{href ? <a href={href} class="link link-hover">{title}</a> : title}</h3>
12
12
  <p class="hwio-muted text-base">{text}</p>
package/src/components/HWioFooter.astro CHANGED
@@ -44,7 +44,7 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
44
44
  </div>
45
45
  {branches && (
46
46
  <div>
47
- <p class="mb-4 font-medium">{branches.title}</p>
47
+ <p class="hwio-weight-footer-title mb-4">{branches.title}</p>
48
48
  <div class="space-y-2 text-base">
49
49
  {branches.items.map((b) => (
50
50
  <div>
@@ -57,7 +57,7 @@ const linkClass = 'inline-flex items-center gap-1 text-neutral-content/80 transi
57
57
  )}
58
58
  {columns.map((col) => (
59
59
  <div>
60
- <p class="mb-4 font-medium">{col.title}</p>
60
+ <p class="hwio-weight-footer-title mb-4">{col.title}</p>
61
61
  <ul class="space-y-1 text-base">
62
62
  {col.links.map((l) => (
63
63
  <li>
package/src/components/HWioHeader.astro CHANGED
@@ -60,12 +60,12 @@ const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', r
60
60
  {nav.map((item) => (
61
61
  <li class:list={[item.current && 'hwio-nav-current']}>
62
62
  {item.mega ? (
63
- <button type="button" class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent" data-hwio-mega-trigger={item.mega} aria-expanded="false" aria-haspopup="true" aria-controls={`${id}-mega-${item.mega}`}>
63
+ <button type="button" class="hwio-weight-nav px-3 text-[15px] text-base-content/80 hover:text-[var(--hwio-nav-hover,var(--color-accent))]" data-hwio-mega-trigger={item.mega} aria-expanded="false" aria-haspopup="true" aria-controls={`${id}-mega-${item.mega}`}>
64
64
  {item.label}
65
65
  <HWioIcon name="chevron-down" size="sm" class="opacity-50 transition-transform duration-200" />
66
66
  </button>
67
67
  ) : (
68
- <a href={item.href} class="px-3 text-[15px] font-medium text-base-content/80 hover:text-accent aria-[current=page]:text-[var(--hwio-nav-active,var(--color-primary))]" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
68
+ <a href={item.href} class="hwio-weight-nav px-3 text-[15px] text-base-content/80 hover:text-[var(--hwio-nav-hover,var(--color-accent))] aria-[current=page]:text-[var(--hwio-nav-active,var(--color-primary))]" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? 'header'}>{item.label}</a>
69
69
  )}
70
70
  </li>
71
71
  ))}
package/src/components/HWioHeroSplit.astro CHANGED
@@ -20,7 +20,7 @@ const VARIANT = { primary: 'primary', secondary: 'secondary', ghost: 'ghost' } a
20
20
  )}
21
21
  {checklist.length > 0 && (
22
22
  <ul class="hwio-muted mt-8 flex flex-wrap gap-x-8 gap-y-3 text-[15px]">
23
- {checklist.map((c) => <li class="inline-flex items-center gap-2"><HWioIcon name="check" size="sm" class="text-accent" />{c}</li>)}
23
+ {checklist.map((c) => <li class="inline-flex items-center gap-2"><HWioIcon name="check" size="sm" class="hwio-icon" />{c}</li>)}
24
24
  </ul>
25
25
  )}
26
26
  <slot name="extra" />
package/src/components/HWioLogoStrip.astro CHANGED
@@ -10,7 +10,7 @@ const groups = marquee ? [0, 1, 2, 3] : [0];
10
10
  const SIZE = { xs: 'h-6', sm: 'h-7', md: 'h-7', lg: 'h-10', xl: 'h-12' } as const;
11
11
  ---
12
12
  <section id={id} class:list={['overflow-hidden border-y border-base-300 py-10', TONE[tone], className]}>
13
- {label && <div class="container"><p class="mb-8 text-center text-sm font-semibold opacity-70">{label}</p></div>}
13
+ {label && <div class="container"><p class="hwio-weight-label mb-8 text-center text-sm opacity-70">{label}</p></div>}
14
14
  <div class="relative">
15
15
  {marquee && <div class:list={['pointer-events-none absolute inset-y-0 left-0 z-10 w-16 bg-gradient-to-r to-transparent md:w-32', FADE[tone]]}></div>}
16
16
  {marquee && <div class:list={['pointer-events-none absolute inset-y-0 right-0 z-10 w-16 bg-gradient-to-l to-transparent md:w-32', FADE[tone]]}></div>}
package/src/components/HWioPricingTiers.astro CHANGED
@@ -26,7 +26,7 @@ const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
26
26
  )}
27
27
  {tier.description && <p class="opacity-80">{tier.description}</p>}
28
28
  <ul class="my-4 space-y-2 text-sm">
29
- {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="mt-0.5 shrink-0 text-accent" /><span>{f}</span></li>)}
29
+ {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="hwio-icon mt-0.5 shrink-0" /><span>{f}</span></li>)}
30
30
  </ul>
31
31
  {tier.cta && <div class="card-actions mt-auto"><HWioButton href={tier.cta.href} external={tier.cta.external} variant={tier.featured ? 'primary' : 'secondary'} class="w-full" track={tier.cta.track}>{tier.cta.label}</HWioButton></div>}
32
32
  </div>
package/src/components/HWioProcessSteps.astro CHANGED
@@ -8,7 +8,7 @@ const LAYOUT = { horizontal: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols
8
8
  <ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
9
9
  {items.map((step, i) => (
10
10
  <li class="flex gap-4">
11
- <span class="badge badge-primary badge-lg shrink-0 font-semibold tabular-nums" aria-hidden="true">{step.number ?? i + 1}</span>
11
+ <span class="badge badge-primary badge-lg hwio-weight-label shrink-0 tabular-nums" aria-hidden="true">{step.number ?? i + 1}</span>
12
12
  <div>
13
13
  <h3 class="text-lg font-semibold"><span class="sr-only">{step.number ?? i + 1}. </span>{step.title}</h3>
14
14
  <p class="mt-1 opacity-80">{step.text}</p>
package/src/components/HWioStatsBand.astro CHANGED
@@ -11,10 +11,10 @@ const cols = COLS[(Math.min(Math.max(items.length, 2), 5) as 2 | 3 | 4 | 5)];
11
11
  const numeric = typeof s.value === 'number';
12
12
  return (
13
13
  <div class:list={['px-8 py-2', i > 0 ? 'sm:border-l sm:border-base-300' : '']}>
14
- <div class="mb-2.5 text-[2.25rem] font-bold leading-none tracking-[-0.03em] lg:text-[2.5rem]">
14
+ <div class="hwio-figure mb-2.5">
15
15
  <span class="hwio-stat-value" data-hwio-counter={animate && numeric ? 'true' : undefined} data-target={numeric ? String(s.value) : undefined} data-suffix={s.suffix ?? ''}>{s.value}{s.suffix ?? ''}</span>
16
16
  </div>
17
- <div class="text-[15px] font-semibold">{s.label}</div>
17
+ <div class="hwio-weight-label text-[15px]">{s.label}</div>
18
18
  {s.description && <div class="hwio-muted mt-0.5 text-sm">{s.description}</div>}
19
19
  </div>
20
20
  );
package/src/styles/prose.css CHANGED
@@ -9,8 +9,8 @@
9
9
  .hwio-prose ol { list-style: decimal; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
10
10
  .hwio-prose li { padding-left: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
11
11
  .hwio-prose a { color: var(--hwio-link, var(--color-secondary)); text-decoration: underline; text-underline-offset: 0.2em; }
12
- .hwio-prose a:hover { color: var(--color-primary); }
13
- .hwio-prose strong { font-weight: 600; }
12
+ .hwio-prose a:hover { color: var(--hwio-link-hover, var(--color-primary)); }
13
+ .hwio-prose strong { font-weight: var(--hwio-weight-strong, 600); }
14
14
  .hwio-prose blockquote { border-left: 4px solid var(--color-secondary); padding-left: calc(var(--spacing) * 4); font-style: italic; margin-block: calc(var(--spacing) * 6); }
15
15
  .hwio-prose code { background: var(--color-base-200); padding: 0.125em 0.375em; border-radius: var(--radius-field); font-size: 0.9em; }
16
16
  .hwio-prose pre { background: var(--color-neutral); color: var(--color-neutral-content); padding: calc(var(--spacing) * 4); border-radius: var(--radius-box); overflow-x: auto; margin-block: calc(var(--spacing) * 6); }
@@ -18,7 +18,7 @@
18
18
  .hwio-prose hr { border-color: var(--color-base-300); margin-block: calc(var(--spacing) * 8); }
19
19
  .hwio-prose img { border-radius: var(--radius-box); margin-block: calc(var(--spacing) * 6); margin-inline: auto; max-width: 100%; }
20
20
  .hwio-prose table { width: 100%; border-collapse: collapse; margin-block: calc(var(--spacing) * 6); }
21
- .hwio-prose th { background: var(--color-base-200); border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; font-weight: 600; }
21
+ .hwio-prose th { background: var(--color-base-200); border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; font-weight: var(--hwio-weight-label, 600); }
22
22
  .hwio-prose td { border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
23
23
  .hwio-prose-lg { font-size: var(--text-lg); }
24
24
  }
package/src/styles/styles.css CHANGED
@@ -57,30 +57,25 @@
57
57
  overflow-x: hidden;
58
58
  background-color: var(--color-base-100);
59
59
  color: var(--color-base-content);
60
- font-size: 1.0625rem; /* 17 px body (direction A) */
61
- line-height: 1.6;
60
+ font-size: var(--hwio-type-body-size, 1.0625rem);
61
+ line-height: var(--hwio-type-body-leading, 1.6);
62
62
  }
63
63
  button:not(:disabled),
64
64
  [role='button']:not(:disabled) {
65
65
  cursor: pointer;
66
66
  }
67
- /* Type ramp (direction A): 56 / 40 / 28 / 22 / 17 on large screens, tighter tracking as size grows. */
67
+ /* Type ramp from the theme's type preset (--hwio-type-<role>-*, generated from brand.json with
68
+ the responsive steps as media queries). HARDWARIO themes: the Brand Guidelines' web scale
69
+ (H1 60-72 px Bold, H2 40-48 px and H3 28-32 px Semibold, line heights 1.2 / 1.3 / 1.4 at
70
+ least). er3o keeps direction A. The fallbacks are direction A's phone values. */
68
71
  h1, h2, h3, h4, h5, h6 {
69
- font-weight: 700;
72
+ font-weight: var(--hwio-type-title-weight, 700);
70
73
  text-wrap: balance;
71
74
  }
72
- h1 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.03em; }
73
- h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.025em; }
74
- h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
75
- h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em; }
76
- @media (width >= 48rem) {
77
- h1 { font-size: 3rem; }
78
- h2 { font-size: 2.5rem; }
79
- h3 { font-size: 1.375rem; }
80
- }
81
- @media (width >= 64rem) {
82
- h1 { font-size: 3.5rem; }
83
- }
75
+ h1 { font-size: var(--hwio-type-display-size, 2.5rem); font-weight: var(--hwio-type-display-weight, 700); line-height: var(--hwio-type-display-leading, 1.05); letter-spacing: var(--hwio-type-display-tracking, -0.03em); }
76
+ h2 { font-size: var(--hwio-type-heading-size, 2rem); font-weight: var(--hwio-type-heading-weight, 700); line-height: var(--hwio-type-heading-leading, 1.1); letter-spacing: var(--hwio-type-heading-tracking, -0.025em); }
77
+ h3 { font-size: var(--hwio-type-subheading-size, 1.375rem); font-weight: var(--hwio-type-subheading-weight, 700); line-height: var(--hwio-type-subheading-leading, 1.2); letter-spacing: var(--hwio-type-subheading-tracking, -0.01em); }
78
+ h4 { font-size: var(--hwio-type-title-size, 1.125rem); line-height: var(--hwio-type-title-leading, 1.3); letter-spacing: var(--hwio-type-title-tracking, -0.005em); }
84
79
  /* Phones: a heading word wider than its column (a 40 px H1 gets 218-288 px) hyphenates instead
85
80
  of running past the screen, and a token longer than the line (a URL, an ID) breaks. */
86
81
  @media (width < 40rem) {
@@ -143,30 +138,89 @@
143
138
  background: var(--hwio-nav-active, var(--color-primary));
144
139
  }
145
140
 
141
+ /* Kicker: Red caps over a title on the HARDWARIO themes (Brand Guidelines chapter 04 and 05);
142
+ sentence case on er3o. On Ink (neutral panels, and the dark theme's surfaces) it takes the
143
+ light gray, as the guidelines' dark-mode example sets the caps label on an Ink card. */
146
144
  .hwio-kicker,
147
145
  .hwio-eyebrow {
148
146
  color: var(--color-accent);
149
- font-size: 0.875rem;
150
- font-weight: 600;
151
- line-height: 1.4;
147
+ font-size: var(--hwio-type-kicker-size, 0.875rem);
148
+ font-weight: var(--hwio-type-kicker-weight, 600);
149
+ line-height: var(--hwio-type-kicker-leading, 1.4);
150
+ letter-spacing: var(--hwio-type-kicker-tracking, 0);
151
+ text-transform: var(--hwio-type-kicker-case, none);
152
+ }
153
+ .hwio-tone-alt .hwio-kicker,
154
+ .hwio-tone-alt .hwio-eyebrow {
155
+ color: var(--hwio-kicker-on-alt, var(--color-accent));
152
156
  }
153
157
  .hwio-tone-neutral .hwio-kicker,
154
158
  .hwio-tone-neutral .hwio-eyebrow {
155
159
  color: var(--hwio-kicker-on-neutral, var(--color-accent));
156
160
  }
161
+ /* Secondary text: Gray on light grounds, the light gray on dark ones (chapter 03, D35). */
157
162
  .hwio-muted {
158
- color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
163
+ color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
159
164
  }
160
165
  .hwio-tone-neutral .hwio-muted {
161
- color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
166
+ color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
162
167
  }
163
168
  .hwio-lead {
164
- font-size: 1.1875rem;
165
- line-height: 1.55;
166
- color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
169
+ font-size: var(--hwio-type-lead-size, 1.1875rem);
170
+ line-height: var(--hwio-type-lead-leading, 1.55);
171
+ color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
167
172
  }
168
173
  .hwio-tone-neutral .hwio-lead {
169
- color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
174
+ color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
175
+ }
176
+ /* Caption: 12-14 px Regular in Gray (chapter 04). */
177
+ .hwio-caption {
178
+ font-size: var(--hwio-type-caption-size, 0.875rem);
179
+ line-height: var(--hwio-type-caption-leading, 1.4);
180
+ color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
181
+ }
182
+ .hwio-tone-neutral .hwio-caption {
183
+ color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
184
+ }
185
+ /* Figures (stats): display type, so 1.2 line height at least on the HARDWARIO themes. */
186
+ .hwio-figure {
187
+ font-size: var(--hwio-type-figure-size, 2.25rem);
188
+ font-weight: var(--hwio-type-figure-weight, 700);
189
+ line-height: var(--hwio-type-figure-leading, 1);
190
+ letter-spacing: var(--hwio-type-figure-tracking, -0.03em);
191
+ }
192
+ /* The choice-card title: the H3 role on the HARDWARIO themes, direction A's 28 px on er3o. */
193
+ .hwio-choice-title {
194
+ font-size: var(--hwio-choice-title-size, 1.75rem);
195
+ line-height: var(--hwio-choice-title-leading, 1.15);
196
+ letter-spacing: var(--hwio-choice-title-tracking, -0.02em);
197
+ }
198
+ /* Icons: one colour, Navy (White on dark grounds) on the HARDWARIO themes (chapter 05). */
199
+ .hwio-icon {
200
+ color: var(--hwio-icon, var(--color-accent));
201
+ }
202
+ .hwio-icon-tile {
203
+ background-color: var(--hwio-icon-bg, color-mix(in oklab, var(--color-accent) 8%, transparent));
204
+ color: var(--hwio-icon, var(--color-accent));
205
+ }
206
+ /* Weights the guidelines allow: Regular, Semibold (web H2 and H3) and Bold, no Medium (D22). */
207
+ .hwio-weight-nav { font-weight: var(--hwio-weight-nav, 500); }
208
+ .hwio-weight-label { font-weight: var(--hwio-weight-label, 600); }
209
+ .hwio-weight-footer-title { font-weight: var(--hwio-weight-footer-title, 500); }
210
+ /* Secondary notes (consent texts): Gray at full opacity on the HARDWARIO themes, so a link inside
211
+ keeps its contrast; er3o keeps the text colour at 80 % opacity. */
212
+ .hwio-note {
213
+ color: var(--hwio-text-secondary, currentColor);
214
+ opacity: var(--hwio-note-opacity, 0.8);
215
+ }
216
+ /* An inline text link outside prose: Blue on the HARDWARIO themes (chapter 03 reserves Blue for links). */
217
+ .hwio-link {
218
+ color: var(--hwio-link, var(--color-accent));
219
+ }
220
+ @media (hover: hover) {
221
+ .hwio-link:hover {
222
+ color: var(--hwio-link-hover, color-mix(in oklab, var(--hwio-link, var(--color-accent)) 80%, #000));
223
+ }
170
224
  }
171
225
  .hwio-hairline { border-color: var(--color-base-300); }
172
226
  /* Inverse button for ink/neutral panels (navy on ink has no contrast). */
@@ -186,8 +240,10 @@
186
240
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
187
241
  border-radius: 9999px;
188
242
  background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
189
- font-size: var(--text-sm);
190
- font-weight: 500;
243
+ font-size: var(--hwio-type-chip-size, var(--text-sm));
244
+ font-weight: var(--hwio-type-chip-weight, 500);
245
+ letter-spacing: var(--hwio-type-chip-tracking, 0);
246
+ text-transform: var(--hwio-type-chip-case, none);
191
247
  }
192
248
  /* Honeypot: off-screen, never display:none (bots check that), no inline style attribute. */
193
249
  .hwio-hp {
@@ -212,7 +268,7 @@
212
268
  transform: translateY(24px);
213
269
  }
214
270
  [data-hwio-reveal] {
215
- transition: opacity 0.6s ease-out, transform 0.6s ease-out;
271
+ transition: opacity var(--hwio-motion-reveal, 0.6s) ease-out, transform var(--hwio-motion-reveal, 0.6s) ease-out;
216
272
  }
217
273
  [data-hwio-reveal][data-hwio-revealed] {
218
274
  opacity: 1;
@@ -263,11 +319,11 @@
263
319
  }
264
320
 
265
321
  /* Brand overrides of DaisyUI defaults. Unlayered on purpose: DaisyUI lives in the utilities layer
266
- and would otherwise win. Direction A: 15 px/600 sentence-case buttons, 48 px tall, 8 px radius,
267
- 28 px padding on large buttons at the same height; card padding 32 px. */
322
+ and would otherwise win. 15 px sentence-case buttons (Bold on the HARDWARIO themes, 600 on er3o),
323
+ 48 px tall, 8 px radius, 28 px padding on large buttons at the same height; card padding 32 px. */
268
324
  .btn {
269
- --fontsize: 0.9375rem;
270
- font-weight: 600;
325
+ --fontsize: var(--hwio-type-button-size, 0.9375rem);
326
+ font-weight: var(--hwio-type-button-weight, 600);
271
327
  padding-inline: 1.5rem;
272
328
  }
273
329
  .btn-sm { --fontsize: 0.875rem; padding-inline: 1rem; }
@@ -277,6 +333,12 @@
277
333
  /* DaisyUI sets .label to 60 % of the text colour, which fails AA at 14 px (4.1:1 on white). R5:
278
334
  darken muted text only. 78 % keeps the label visibly secondary and clears 4.5:1 on every theme. */
279
335
  .label { color: color-mix(in oklab, currentColor 78%, transparent); }
336
+ /* Table heads: DaisyUI sets 60 % of the text colour (4.1:1 on white at 14 px) in Semibold; on the
337
+ HARDWARIO themes secondary text (Gray, 5.3:1) in Bold (D22), unchanged on er3o. */
338
+ .table :where(thead, tfoot) {
339
+ color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 60%, transparent));
340
+ font-weight: var(--hwio-weight-label, 600);
341
+ }
280
342
  /* Same for inactive tabs (DaisyUI: 50 %, 3.1:1 on white at 14 px). */
281
343
  .tab:not(.tab-active, :hover, :focus-visible) { color: color-mix(in oklab, currentColor 78%, transparent); }
282
344
  /* Text links: themes whose primary is too light for text on the page ground (er3o teal) set
package/src/styles/themes/er3o.css CHANGED
@@ -40,10 +40,101 @@
40
40
  --hwio-container-pad: 27px;
41
41
  --er3o-gradient-from: #01CC9B;
42
42
  --er3o-gradient-to: #14A0C0;
43
+ --hwio-chart-1: initial;
44
+ --hwio-chart-2: initial;
45
+ --hwio-chart-3: initial;
46
+ --hwio-chart-failure: initial;
47
+ --hwio-chart-forecast: initial;
48
+ --hwio-chart-highlight: initial;
49
+ --hwio-chart-label: initial;
50
+ --hwio-chart-outline: initial;
51
+ --hwio-chart-outline-width: initial;
43
52
  --hwio-footer-hover: #ffffff;
44
- --hwio-nav-active: #296ea7;
53
+ --hwio-gradient: initial;
54
+ --hwio-gradient-figure: initial;
55
+ --hwio-icon: initial;
56
+ --hwio-icon-bg: initial;
57
+ --hwio-kicker-on-alt: initial;
45
58
  --hwio-kicker-on-neutral: #01CC9B;
46
59
  --hwio-link: #0C6678;
60
+ --hwio-link-hover: initial;
61
+ --hwio-mist: initial;
62
+ --hwio-motion-base: initial;
63
+ --hwio-motion-easing: initial;
64
+ --hwio-motion-fast: initial;
65
+ --hwio-motion-reveal: initial;
66
+ --hwio-motion-slow: initial;
67
+ --hwio-nav-active: #296ea7;
68
+ --hwio-nav-hover: initial;
69
+ --hwio-note-opacity: initial;
70
+ --hwio-text-secondary: initial;
71
+ --hwio-text-secondary-on-neutral: initial;
72
+ /* Type preset "er3o" */
73
+ --hwio-type-display-size: 2.5rem;
74
+ --hwio-type-display-weight: 700;
75
+ --hwio-type-display-leading: 1.05;
76
+ --hwio-type-display-tracking: -0.03em;
77
+ --hwio-type-heading-size: 2rem;
78
+ --hwio-type-heading-weight: 700;
79
+ --hwio-type-heading-leading: 1.1;
80
+ --hwio-type-heading-tracking: -0.025em;
81
+ --hwio-type-subheading-size: 1.375rem;
82
+ --hwio-type-subheading-weight: 700;
83
+ --hwio-type-subheading-leading: 1.2;
84
+ --hwio-type-subheading-tracking: -0.01em;
85
+ --hwio-type-title-size: 1.125rem;
86
+ --hwio-type-title-weight: 700;
87
+ --hwio-type-title-leading: 1.3;
88
+ --hwio-type-title-tracking: -0.005em;
89
+ --hwio-type-lead-size: 1.1875rem;
90
+ --hwio-type-lead-weight: 400;
91
+ --hwio-type-lead-leading: 1.55;
92
+ --hwio-type-lead-tracking: 0;
93
+ --hwio-type-body-size: 1.0625rem;
94
+ --hwio-type-body-weight: 400;
95
+ --hwio-type-body-leading: 1.6;
96
+ --hwio-type-body-tracking: 0;
97
+ --hwio-type-caption-size: 0.875rem;
98
+ --hwio-type-caption-weight: 400;
99
+ --hwio-type-caption-leading: 1.4;
100
+ --hwio-type-caption-tracking: 0;
101
+ --hwio-type-kicker-size: 0.875rem;
102
+ --hwio-type-kicker-weight: 600;
103
+ --hwio-type-kicker-leading: 1.4;
104
+ --hwio-type-kicker-tracking: 0;
105
+ --hwio-type-kicker-case: none;
106
+ --hwio-type-chip-size: 0.875rem;
107
+ --hwio-type-chip-weight: 500;
108
+ --hwio-type-chip-tracking: 0;
109
+ --hwio-type-chip-case: none;
110
+ --hwio-type-figure-size: 2.25rem;
111
+ --hwio-type-figure-weight: 700;
112
+ --hwio-type-figure-leading: 1;
113
+ --hwio-type-figure-tracking: -0.03em;
114
+ --hwio-type-button-size: 0.9375rem;
115
+ --hwio-type-button-weight: 600;
116
+ --hwio-type-button-leading: 1;
117
+ --hwio-type-button-tracking: 0;
118
+ --hwio-weight-nav: 500;
119
+ --hwio-weight-label: 600;
120
+ --hwio-weight-strong: 600;
121
+ --hwio-weight-footer-title: 500;
122
+ --hwio-choice-title-size: 1.75rem;
123
+ --hwio-choice-title-leading: 1.15;
124
+ --hwio-choice-title-tracking: -0.02em;
125
+ }
126
+
127
+ @media (width >= 48rem) {
128
+ [data-theme="er3o"] {
129
+ --hwio-type-display-size: 3rem;
130
+ --hwio-type-heading-size: 2.5rem;
131
+ }
132
+ }
133
+ @media (width >= 64rem) {
134
+ [data-theme="er3o"] {
135
+ --hwio-type-display-size: 3.5rem;
136
+ --hwio-type-figure-size: 2.5rem;
137
+ }
47
138
  }
48
139
 
49
140
  /* ENEROOO carries its gradient as a theme rule: DaisyUI slots are single colours. Only the filled
package/src/styles/themes/hwio-dark.css CHANGED
@@ -4,26 +4,26 @@
4
4
  default: false;
5
5
  prefersdark: false;
6
6
  color-scheme: dark;
7
- --color-base-100: #0f0f14;
8
- --color-base-200: #1a1a22;
9
- --color-base-300: #23232f;
10
- --color-base-content: #e7e7ee;
7
+ --color-base-100: #16161d;
8
+ --color-base-200: #252532;
9
+ --color-base-300: #3b3b46;
10
+ --color-base-content: #ffffff;
11
11
  --color-primary: #009cfa;
12
- --color-primary-content: #0f0f14;
12
+ --color-primary-content: #16161d;
13
13
  --color-secondary: #009cfa;
14
- --color-secondary-content: #0f0f14;
14
+ --color-secondary-content: #16161d;
15
15
  --color-accent: #f43f5e;
16
- --color-accent-content: #0f0f14;
17
- --color-neutral: #23232f;
18
- --color-neutral-content: #e7e7ee;
16
+ --color-accent-content: #16161d;
17
+ --color-neutral: #252532;
18
+ --color-neutral-content: #ffffff;
19
19
  --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
22
- --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
26
- --color-error-content: #ffffff;
20
+ --color-info-content: #16161d;
21
+ --color-success: #34c47a;
22
+ --color-success-content: #16161d;
23
+ --color-warning: #f59e0b;
24
+ --color-warning-content: #16161d;
25
+ --color-error: #f43f5e;
26
+ --color-error-content: #16161d;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
29
29
  --radius-box: 1rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-dark"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #009cfa;
47
+ --hwio-chart-2: #016ad4;
48
+ --hwio-chart-3: #d1d5db;
49
+ --hwio-chart-failure: #f43f5e;
50
+ --hwio-chart-forecast: #2e2e3a;
51
+ --hwio-chart-highlight: #ffffff;
52
+ --hwio-chart-label: #ffffff;
53
+ --hwio-chart-outline: transparent;
54
+ --hwio-chart-outline-width: 0px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
58
+ --hwio-icon: #ffffff;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: #d1d5db;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #009cfa;
63
+ --hwio-link-hover: #ffffff;
64
+ --hwio-mist: #2e2e3a;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #009cfa;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #d1d5db;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-dark"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-dark"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-dark"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }
package/src/styles/themes/hwio-forestry-dark.css CHANGED
@@ -4,26 +4,26 @@
4
4
  default: false;
5
5
  prefersdark: false;
6
6
  color-scheme: dark;
7
- --color-base-100: #0f0f14;
8
- --color-base-200: #1a1a22;
9
- --color-base-300: #23232f;
10
- --color-base-content: #e7e7ee;
7
+ --color-base-100: #16161d;
8
+ --color-base-200: #252532;
9
+ --color-base-300: #3b3b46;
10
+ --color-base-content: #ffffff;
11
11
  --color-primary: #5aa864;
12
- --color-primary-content: #0f0f14;
12
+ --color-primary-content: #16161d;
13
13
  --color-secondary: #009cfa;
14
- --color-secondary-content: #0f0f14;
14
+ --color-secondary-content: #16161d;
15
15
  --color-accent: #5aa864;
16
- --color-accent-content: #0f0f14;
17
- --color-neutral: #23232f;
18
- --color-neutral-content: #e7e7ee;
16
+ --color-accent-content: #16161d;
17
+ --color-neutral: #252532;
18
+ --color-neutral-content: #ffffff;
19
19
  --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
22
- --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
26
- --color-error-content: #ffffff;
20
+ --color-info-content: #16161d;
21
+ --color-success: #34c47a;
22
+ --color-success-content: #16161d;
23
+ --color-warning: #f59e0b;
24
+ --color-warning-content: #16161d;
25
+ --color-error: #f43f5e;
26
+ --color-error-content: #16161d;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
29
29
  --radius-box: 1rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-forestry-dark"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #009cfa;
47
+ --hwio-chart-2: #016ad4;
48
+ --hwio-chart-3: #d1d5db;
49
+ --hwio-chart-failure: #f43f5e;
50
+ --hwio-chart-forecast: #2e2e3a;
51
+ --hwio-chart-highlight: #ffffff;
52
+ --hwio-chart-label: #ffffff;
53
+ --hwio-chart-outline: transparent;
54
+ --hwio-chart-outline-width: 0px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #f43f5e, #009cfa);
58
+ --hwio-icon: #ffffff;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: #d1d5db;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #009cfa;
63
+ --hwio-link-hover: #ffffff;
64
+ --hwio-mist: #2e2e3a;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #5aa864;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #d1d5db;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-forestry-dark"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-forestry-dark"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-forestry-dark"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }
package/src/styles/themes/hwio-forestry.css CHANGED
@@ -5,24 +5,24 @@
5
5
  prefersdark: false;
6
6
  color-scheme: light;
7
7
  --color-base-100: #ffffff;
8
- --color-base-200: #F1FAFF;
9
- --color-base-300: #e5e7eb;
8
+ --color-base-200: #f7f7f7;
9
+ --color-base-300: #dcdcdc;
10
10
  --color-base-content: #252532;
11
11
  --color-primary: #2B7036;
12
12
  --color-primary-content: #ffffff;
13
- --color-secondary: #016ad4;
13
+ --color-secondary: #06367a;
14
14
  --color-secondary-content: #ffffff;
15
15
  --color-accent: #2B7036;
16
16
  --color-accent-content: #ffffff;
17
17
  --color-neutral: #252532;
18
- --color-neutral-content: #f3f4f6;
19
- --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
18
+ --color-neutral-content: #ffffff;
19
+ --color-info: #016ad4;
20
+ --color-info-content: #ffffff;
21
+ --color-success: #2e7d4f;
22
22
  --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
23
+ --color-warning: #c76a00;
24
+ --color-warning-content: #252532;
25
+ --color-error: #e30427;
26
26
  --color-error-content: #ffffff;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  [data-theme="hwio-forestry"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #016ad4;
47
+ --hwio-chart-2: #009cfa;
48
+ --hwio-chart-3: #6b6a6a;
49
+ --hwio-chart-failure: #e30427;
50
+ --hwio-chart-forecast: #e8e8e8;
51
+ --hwio-chart-highlight: #06367a;
52
+ --hwio-chart-label: #252532;
53
+ --hwio-chart-outline: #016ad4;
54
+ --hwio-chart-outline-width: 1px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #e30427, #3976c5);
58
+ --hwio-icon: #06367a;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: initial;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #016ad4;
63
+ --hwio-link-hover: #06367a;
64
+ --hwio-mist: #e8e8e8;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #2B7036;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #6b6a6a;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ [data-theme="hwio-forestry"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ [data-theme="hwio-forestry"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ [data-theme="hwio-forestry"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }
package/src/styles/themes/hwio.css CHANGED
@@ -5,24 +5,24 @@
5
5
  prefersdark: false;
6
6
  color-scheme: light;
7
7
  --color-base-100: #ffffff;
8
- --color-base-200: #F1FAFF;
9
- --color-base-300: #e5e7eb;
8
+ --color-base-200: #f7f7f7;
9
+ --color-base-300: #dcdcdc;
10
10
  --color-base-content: #252532;
11
- --color-primary: #06367a;
11
+ --color-primary: #016ad4;
12
12
  --color-primary-content: #ffffff;
13
- --color-secondary: #016ad4;
13
+ --color-secondary: #06367a;
14
14
  --color-secondary-content: #ffffff;
15
15
  --color-accent: #e30427;
16
16
  --color-accent-content: #ffffff;
17
17
  --color-neutral: #252532;
18
- --color-neutral-content: #f3f4f6;
19
- --color-info: #009cfa;
20
- --color-info-content: #06367a;
21
- --color-success: #15803d;
18
+ --color-neutral-content: #ffffff;
19
+ --color-info: #016ad4;
20
+ --color-info-content: #ffffff;
21
+ --color-success: #2e7d4f;
22
22
  --color-success-content: #ffffff;
23
- --color-warning: #b45309;
24
- --color-warning-content: #ffffff;
25
- --color-error: #dc2626;
23
+ --color-warning: #c76a00;
24
+ --color-warning-content: #252532;
25
+ --color-error: #e30427;
26
26
  --color-error-content: #ffffff;
27
27
  --radius-selector: 2rem;
28
28
  --radius-field: 0.5rem;
@@ -36,7 +36,115 @@
36
36
 
37
37
  :root, [data-theme="hwio"] {
38
38
  --hwio-font-sans: 'Inter', 'Inter Fallback', ui-sans-serif, system-ui, sans-serif;
39
- --hwio-container: 1275px;
40
- --hwio-container-pad: 27px;
41
- --hwio-kicker-on-neutral: #fb7185;
39
+ --hwio-container: 1328px;
40
+ --hwio-container-pad: 24px;
41
+ --hwio-grid-columns: 12;
42
+ --hwio-grid-width: 1280px;
43
+ --hwio-grid-gutter: 24px;
44
+ --er3o-gradient-from: initial;
45
+ --er3o-gradient-to: initial;
46
+ --hwio-chart-1: #016ad4;
47
+ --hwio-chart-2: #009cfa;
48
+ --hwio-chart-3: #6b6a6a;
49
+ --hwio-chart-failure: #e30427;
50
+ --hwio-chart-forecast: #e8e8e8;
51
+ --hwio-chart-highlight: #06367a;
52
+ --hwio-chart-label: #252532;
53
+ --hwio-chart-outline: #016ad4;
54
+ --hwio-chart-outline-width: 1px;
55
+ --hwio-footer-hover: #009cfa;
56
+ --hwio-gradient: linear-gradient(90deg, #e30427, #009cfa);
57
+ --hwio-gradient-figure: linear-gradient(90deg, #e30427, #3976c5);
58
+ --hwio-icon: #06367a;
59
+ --hwio-icon-bg: var(--color-base-200);
60
+ --hwio-kicker-on-alt: initial;
61
+ --hwio-kicker-on-neutral: #d1d5db;
62
+ --hwio-link: #016ad4;
63
+ --hwio-link-hover: #06367a;
64
+ --hwio-mist: #e8e8e8;
65
+ --hwio-motion-base: 300ms;
66
+ --hwio-motion-easing: ease-out;
67
+ --hwio-motion-fast: 200ms;
68
+ --hwio-motion-reveal: 400ms;
69
+ --hwio-motion-slow: 400ms;
70
+ --hwio-nav-active: initial;
71
+ --hwio-nav-hover: #016ad4;
72
+ --hwio-note-opacity: 1;
73
+ --hwio-text-secondary: #6b6a6a;
74
+ --hwio-text-secondary-on-neutral: #d1d5db;
75
+ /* Type preset "hwio" */
76
+ --hwio-type-display-size: 2.5rem;
77
+ --hwio-type-display-weight: 700;
78
+ --hwio-type-display-leading: 1.2;
79
+ --hwio-type-display-tracking: -0.02em;
80
+ --hwio-type-heading-size: 2rem;
81
+ --hwio-type-heading-weight: 600;
82
+ --hwio-type-heading-leading: 1.3;
83
+ --hwio-type-heading-tracking: -0.015em;
84
+ --hwio-type-subheading-size: 1.5rem;
85
+ --hwio-type-subheading-weight: 600;
86
+ --hwio-type-subheading-leading: 1.3;
87
+ --hwio-type-subheading-tracking: -0.01em;
88
+ --hwio-type-title-size: 1.25rem;
89
+ --hwio-type-title-weight: 700;
90
+ --hwio-type-title-leading: 1.3;
91
+ --hwio-type-title-tracking: 0;
92
+ --hwio-type-lead-size: 1.1875rem;
93
+ --hwio-type-lead-weight: 400;
94
+ --hwio-type-lead-leading: 1.55;
95
+ --hwio-type-lead-tracking: 0;
96
+ --hwio-type-body-size: 1rem;
97
+ --hwio-type-body-weight: 400;
98
+ --hwio-type-body-leading: 1.6;
99
+ --hwio-type-body-tracking: 0;
100
+ --hwio-type-caption-size: 0.8125rem;
101
+ --hwio-type-caption-weight: 400;
102
+ --hwio-type-caption-leading: 1.4;
103
+ --hwio-type-caption-tracking: 0;
104
+ --hwio-type-kicker-size: 0.8125rem;
105
+ --hwio-type-kicker-weight: 700;
106
+ --hwio-type-kicker-leading: 1.4;
107
+ --hwio-type-kicker-tracking: 0.07em;
108
+ --hwio-type-kicker-case: uppercase;
109
+ --hwio-type-chip-size: 0.75rem;
110
+ --hwio-type-chip-weight: 700;
111
+ --hwio-type-chip-leading: 1.4;
112
+ --hwio-type-chip-tracking: 0.07em;
113
+ --hwio-type-chip-case: uppercase;
114
+ --hwio-type-figure-size: 2.5rem;
115
+ --hwio-type-figure-weight: 700;
116
+ --hwio-type-figure-leading: 1.2;
117
+ --hwio-type-figure-tracking: -0.02em;
118
+ --hwio-type-button-size: 0.9375rem;
119
+ --hwio-type-button-weight: 700;
120
+ --hwio-type-button-leading: 1;
121
+ --hwio-type-button-tracking: 0;
122
+ --hwio-weight-nav: 400;
123
+ --hwio-weight-label: 700;
124
+ --hwio-weight-strong: 700;
125
+ --hwio-weight-footer-title: 700;
126
+ --hwio-choice-title-size: var(--hwio-type-subheading-size);
127
+ --hwio-choice-title-leading: var(--hwio-type-subheading-leading);
128
+ --hwio-choice-title-tracking: var(--hwio-type-subheading-tracking);
129
+ }
130
+
131
+ @media (width >= 48rem) {
132
+ :root, [data-theme="hwio"] {
133
+ --hwio-type-display-size: 3rem;
134
+ }
135
+ }
136
+ @media (width >= 64rem) {
137
+ :root, [data-theme="hwio"] {
138
+ --hwio-type-display-size: 3.75rem;
139
+ --hwio-type-heading-size: 2.5rem;
140
+ --hwio-type-heading-leading: 1.2;
141
+ --hwio-type-subheading-size: 1.75rem;
142
+ }
143
+ }
144
+ @media (width >= 80rem) {
145
+ :root, [data-theme="hwio"] {
146
+ --hwio-type-display-size: 4.5rem;
147
+ --hwio-type-heading-size: 3rem;
148
+ --hwio-type-subheading-size: 2rem;
149
+ }
42
150
  }