@grantcodes/ui 2.4.0 → 2.5.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 (33) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/package.json +2 -2
  3. package/src/components/accordion/accordion.css +1 -1
  4. package/src/components/app-bar/app-bar.component.js +1 -1
  5. package/src/components/app-bar/app-bar.css +2 -1
  6. package/src/components/avatar/avatar.css +1 -1
  7. package/src/components/button/button.component.js +5 -8
  8. package/src/components/button/button.css +1 -1
  9. package/src/components/card/card.css +3 -3
  10. package/src/components/container/container.component.js +1 -2
  11. package/src/components/cta/cta.css +1 -1
  12. package/src/components/dialog/dialog.css +1 -1
  13. package/src/components/dropdown/dropdown.component.js +1 -2
  14. package/src/components/feature-list/feature-list.css +2 -2
  15. package/src/components/hero/hero.css +3 -4
  16. package/src/components/media-text/media-text.css +1 -1
  17. package/src/components/newsletter/newsletter.css +1 -1
  18. package/src/components/pricing/pricing.css +3 -3
  19. package/src/components/sidebar/sidebar.component.js +1 -2
  20. package/src/components/sidebar/sidebar.css +1 -1
  21. package/src/components/stats/stats.css +3 -3
  22. package/src/components/tabs/tabs.component.js +1 -2
  23. package/src/components/testimonials/testimonials.css +2 -2
  24. package/src/components/toast/toast.component.js +1 -2
  25. package/src/css/base.css +3 -19
  26. package/src/css/elements/forms/input.css +1 -1
  27. package/src/css/elements/forms/label.css +1 -1
  28. package/src/css/themes/grantcodes.css +1 -0
  29. package/src/css/themes/grantina.css +4 -0
  30. package/src/css/themes/todomap.css +5 -0
  31. package/src/css/themes/wireframe.css +1 -0
  32. package/src/css/typography.css +8 -13
  33. package/src/pages/blog-post.stories.js +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.5.0](https://github.com/grantcodes/ui/compare/ui-v2.4.1...ui-v2.5.0) (2026-04-05)
4
+
5
+
6
+ ### Features
7
+
8
+ * add dark mode support for all themes ([c32766a](https://github.com/grantcodes/ui/commit/c32766af3948e11172107a4643e9a5d3132afac7))
9
+ * add dark mode support for all themes ([101a2a3](https://github.com/grantcodes/ui/commit/101a2a371ad3cc12240b0c9c92c348c21c67934b))
10
+ * **tokens:** migrate typography naming from display/headline/title to h1-h6 ([4b607a7](https://github.com/grantcodes/ui/commit/4b607a7450ff2b3d3236ca4aa7a42d63f8f2ff37))
11
+ * **ui, style-dictionary:** add grantina theme and update typography tokens ([096b8e4](https://github.com/grantcodes/ui/commit/096b8e4fc1a17f7d1f8fc1154b7f5d540f475b8f))
12
+
13
+ ## [2.4.1](https://github.com/grantcodes/ui/compare/ui-v2.4.0...ui-v2.4.1) (2026-04-01)
14
+
15
+
16
+ ### Bug Fixes
17
+
18
+ * **card:** use data-has-content attribute to hide empty header/footer ([974890c](https://github.com/grantcodes/ui/commit/974890c86441a7e009a1d32bfef51533b22326df)), closes [#38](https://github.com/grantcodes/ui/issues/38)
19
+ * **ui:** use data-has-content to hide empty card header/footer ([09df205](https://github.com/grantcodes/ui/commit/09df2051d6e2b7758a2b074ea3a99c3d5fdff30b))
20
+
3
21
  ## [2.4.0](https://github.com/grantcodes/ui/compare/ui-v2.3.0...ui-v2.4.0) (2026-03-30)
4
22
 
5
23
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grantcodes/ui",
3
- "version": "2.4.0",
3
+ "version": "2.5.0",
4
4
  "description": "A personal component system built with Lit web components",
5
5
  "type": "module",
6
6
  "main": "src/main.js",
@@ -47,7 +47,7 @@
47
47
  "@lit/react": "^1.0.8",
48
48
  "lit": "^3.3.1",
49
49
  "shiki": "^3.17.1",
50
- "@grantcodes/style-dictionary": "^1.3.1"
50
+ "@grantcodes/style-dictionary": "^1.4.0"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
package/src/components/accordion/accordion.css CHANGED
@@ -45,7 +45,7 @@
45
45
 
46
46
  .accordion__summary::after {
47
47
  content: "+";
48
- font: var(--g-theme-typography-title-default);
48
+ font: var(--g-theme-typography-h5);
49
49
  line-height: 1;
50
50
  }
51
51
 
package/src/components/app-bar/app-bar.component.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
2
+ import { html } from "lit";
3
3
  import { classMap } from "lit/directives/class-map.js";
4
4
  import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
5
5
  import appBarStyles from "./app-bar.css" with { type: "css" };
package/src/components/app-bar/app-bar.css CHANGED
@@ -204,7 +204,8 @@
204
204
  padding-inline: var(--g-spacing-12);
205
205
  border-radius: var(--g-theme-border-radius-md);
206
206
  transition: all 0.2s ease;
207
- font-weight: var(--g-typography-font-weight-500);
207
+ font-family: var(--g-theme-typography-label-font-family);
208
+ font-weight: var(--g-theme-typography-label-font-weight);
208
209
  }
209
210
 
210
211
  ::slotted(a:hover) {
package/src/components/avatar/avatar.css CHANGED
@@ -21,7 +21,7 @@
21
21
  background-color: var(--g-color-brand-purple-200);
22
22
  color: var(--g-color-brand-purple-900);
23
23
  text-align: center;
24
- font-size: var(--g-theme-typography-title-sm-font-size);
24
+ font-size: var(--g-theme-typography-h6-font-size);
25
25
  font-weight: var(--g-theme-typography-label-default-font-weight);
26
26
  }
27
27
 
package/src/components/button/button.component.js CHANGED
@@ -1,6 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
3
- import { literal } from "lit/static-html.js";
1
+ import { html, LitElement } from "lit";
4
2
  import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
5
3
  import buttonStyles from "./button.css" with { type: "css" };
6
4
 
@@ -36,22 +34,21 @@ export class GrantCodesButton extends LitElement {
36
34
  /** @returns {import('lit').TemplateResult} */
37
35
  render() {
38
36
  const isLink = !!this.href;
39
- const tag = isLink ? literal`a` : literal`button`;
40
37
 
41
38
  if (isLink) {
42
39
  return html`
43
- <${tag}
40
+ <a
44
41
  class="button focus-ring"
45
42
  href=${this.href}
46
43
  ?disabled=${this.disabled}
47
44
  >
48
45
  <span><slot></slot></span>
49
- </${tag}>
46
+ </a>
50
47
  `;
51
48
  }
52
49
 
53
50
  return html`
54
- <${tag}
51
+ <button
55
52
  class="button focus-ring"
56
53
  type=${this.type}
57
54
  name=${this.name ?? ""}
@@ -59,7 +56,7 @@ export class GrantCodesButton extends LitElement {
59
56
  ?disabled=${this.disabled}
60
57
  >
61
58
  <span><slot></slot></span>
62
- </${tag}>
59
+ </button>
63
60
  `;
64
61
  }
65
62
  }
package/src/components/button/button.css CHANGED
@@ -28,7 +28,7 @@
28
28
  border-end-start-radius: var(--button-border-radius-start);
29
29
  border-end-end-radius: var(--button-border-radius-end);
30
30
  font: var(--g-theme-typography-label-default);
31
- font-family: inherit;
31
+ font-family: var(--g-theme-typography-label-font-family);
32
32
  text-decoration: none;
33
33
  transition-property: color, border-color, background-color, outline;
34
34
  }
package/src/components/card/card.css CHANGED
@@ -48,13 +48,13 @@
48
48
  border-block-end: 1px solid var(--g-theme-color-border-default);
49
49
  }
50
50
 
51
- .card__header:has(> slot:empty) {
51
+ .card__header:not([data-has-content]) {
52
52
  display: none;
53
53
  }
54
54
 
55
55
  .card__header ::slotted(*) {
56
56
  margin: 0;
57
- font: var(--g-theme-typography-title-default);
57
+ font: var(--g-theme-typography-h5);
58
58
  }
59
59
 
60
60
  .card__content {
@@ -87,7 +87,7 @@
87
87
  background: var(--g-theme-color-background-default);
88
88
  }
89
89
 
90
- .card__footer:has(> slot:empty) {
90
+ .card__footer:not([data-has-content]) {
91
91
  display: none;
92
92
  }
93
93
 
package/src/components/container/container.component.js CHANGED
@@ -1,5 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
1
+ import { LitElement, html } from "lit";
3
2
  import { classMap } from "lit/directives/class-map.js";
4
3
  import containerStyles from "./container.css" with { type: "css" };
5
4
 
package/src/components/cta/cta.css CHANGED
@@ -32,7 +32,7 @@
32
32
 
33
33
  .cta__title {
34
34
  margin: 0 0 var(--g-theme-spacing-md);
35
- font: var(--g-theme-typography-headline-lg);
35
+ font: var(--g-theme-typography-h2);
36
36
  color: var(--g-theme-color-content-default);
37
37
  }
38
38
 
package/src/components/dialog/dialog.css CHANGED
@@ -23,7 +23,7 @@
23
23
  position: absolute;
24
24
  border: none;
25
25
  line-height: 1;
26
- font-size: var(--g-theme-typography-title-lg-font-size);
26
+ font-size: var(--g-theme-typography-h4-font-size);
27
27
  cursor: pointer;
28
28
  background: transparent;
29
29
  inset-block-start: var(--g-theme-spacing-md);
package/src/components/dropdown/dropdown.component.js CHANGED
@@ -1,5 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
1
+ import { html, LitElement } from "lit";
3
2
  import { generateId } from "../../lib/generate-id.js";
4
3
  import dropdownStyles from "./dropdown.css" with { type: "css" };
5
4
 
package/src/components/feature-list/feature-list.css CHANGED
@@ -14,7 +14,7 @@
14
14
 
15
15
  .feature-list__title {
16
16
  margin: 0 0 var(--g-theme-spacing-sm);
17
- font: var(--g-theme-typography-headline-sm);
17
+ font: var(--g-theme-typography-h4);
18
18
  text-align: center;
19
19
  color: var(--g-theme-color-content-default);
20
20
  }
@@ -70,7 +70,7 @@
70
70
  }
71
71
 
72
72
  .feature-list__item-title {
73
- font: var(--g-theme-typography-title-default);
73
+ font: var(--g-theme-typography-h5);
74
74
  }
75
75
 
76
76
  .feature-list__item-desc {
package/src/components/hero/hero.css CHANGED
@@ -16,19 +16,18 @@
16
16
  .hero__container {
17
17
  width: 100%;
18
18
  max-width: 65ch;
19
+ gap: var(--g-theme-spacing-lg);
19
20
  }
20
21
 
21
22
  .hero__title {
22
- margin: 0 0 var(--g-theme-spacing-md);
23
- font-weight: var(--g-typography-font-weight-900);
23
+ font: var(--g-theme-typography-h1);
24
24
  font-size: clamp(2rem, 5vw, 4rem);
25
25
  color: var(--g-theme-color-content-brand-knockout, #ffffff);
26
26
  }
27
27
 
28
28
  .hero__text {
29
- font-size: var(--g-theme-typography-title-default-font-size);
29
+ font: var(--g-theme-typography-body-lg);
30
30
  color: var(--g-theme-color-content-brand-knockout, #ffffff);
31
- margin: 0 0 var(--g-theme-spacing-lg);
32
31
  }
33
32
 
34
33
  :host([size="sm"]) .hero {
package/src/components/media-text/media-text.css CHANGED
@@ -51,7 +51,7 @@
51
51
 
52
52
  .media-text__title {
53
53
  margin: 0;
54
- font: var(--g-theme-typography-headline-sm);
54
+ font: var(--g-theme-typography-h4);
55
55
  color: var(--g-theme-color-content-default);
56
56
  }
57
57
 
package/src/components/newsletter/newsletter.css CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
  .newsletter__title {
18
18
  margin: 0 0 var(--g-theme-spacing-sm);
19
- font: var(--g-theme-typography-headline-sm);
19
+ font: var(--g-theme-typography-h4);
20
20
  color: var(--g-theme-color-content-brand-knockout, #ffffff);
21
21
  }
22
22
 
package/src/components/pricing/pricing.css CHANGED
@@ -14,8 +14,8 @@
14
14
 
15
15
  .pricing__title {
16
16
  margin: 0 0 var(--g-theme-spacing-sm);
17
- font-size: var(--g-theme-typography-headline-sm-font-size);
18
- font-weight: var(--g-theme-typography-headline-sm-font-weight);
17
+ font-size: var(--g-theme-typography-h4-font-size);
18
+ font-weight: var(--g-theme-typography-h4-font-weight);
19
19
  text-align: center;
20
20
  color: var(--g-theme-color-content-default);
21
21
  }
@@ -74,7 +74,7 @@
74
74
  }
75
75
 
76
76
  .pricing__price {
77
- font: var(--g-theme-typography-headline-lg);
77
+ font: var(--g-theme-typography-h2);
78
78
  color: var(--g-theme-color-content-default);
79
79
  }
80
80
 
package/src/components/sidebar/sidebar.component.js CHANGED
@@ -1,5 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
1
+ import { html, LitElement } from "lit";
3
2
  import { classMap } from "lit/directives/class-map.js";
4
3
  import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
5
4
  import sidebarStyles from "./sidebar.css" with { type: "css" };
package/src/components/sidebar/sidebar.css CHANGED
@@ -59,7 +59,7 @@
59
59
  border: 1px solid var(--g-theme-color-border-default);
60
60
  border-radius: var(--g-theme-border-radius-md);
61
61
  cursor: pointer;
62
- font-size: var(--g-theme-typography-title-default-font-size);
62
+ font-size: var(--g-theme-typography-h5-font-size);
63
63
  transition: all 0.2s ease;
64
64
  }
65
65
 
package/src/components/stats/stats.css CHANGED
@@ -15,8 +15,8 @@
15
15
 
16
16
  .stats__title {
17
17
  margin: 0 0 var(--g-theme-spacing-xl);
18
- font-size: var(--g-theme-typography-headline-sm-font-size);
19
- font-weight: var(--g-theme-typography-headline-sm-font-weight);
18
+ font-size: var(--g-theme-typography-h4-font-size);
19
+ font-weight: var(--g-theme-typography-h4-font-weight);
20
20
  text-align: center;
21
21
  color: var(--g-theme-color-content-default);
22
22
  }
@@ -44,7 +44,7 @@
44
44
  }
45
45
 
46
46
  .stats__value {
47
- font: var(--g-theme-typography-display-default);
47
+ font: var(--g-theme-typography-h1);
48
48
  white-space: nowrap;
49
49
  line-height: 1;
50
50
  color: var(--g-theme-color-content-brand, #7c3aed);
package/src/components/tabs/tabs.component.js CHANGED
@@ -1,5 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
1
+ import { html, LitElement } from "lit";
3
2
  import { ifDefined } from "lit/directives/if-defined.js";
4
3
  import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
5
4
  import tabsStyles from "./tabs.css" with { type: "css" };
package/src/components/testimonials/testimonials.css CHANGED
@@ -14,8 +14,8 @@
14
14
 
15
15
  .testimonials__title {
16
16
  margin: 0 0 var(--g-theme-spacing-2xl);
17
- font-size: var(--g-theme-typography-headline-sm-font-size);
18
- font-weight: var(--g-theme-typography-headline-sm-font-weight);
17
+ font-size: var(--g-theme-typography-h4-font-size);
18
+ font-weight: var(--g-theme-typography-h4-font-weight);
19
19
  text-align: center;
20
20
  color: var(--g-theme-color-content-default);
21
21
  }
package/src/components/toast/toast.component.js CHANGED
@@ -1,5 +1,4 @@
1
- import { LitElement } from "lit";
2
- import { html } from "lit/static-html.js";
1
+ import { html, LitElement } from "lit";
3
2
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
4
3
  import { classMap } from "lit/directives/class-map.js";
5
4
  import focusRingStyles from "#styles/focus-ring.css" with { type: "css" };
package/src/css/base.css CHANGED
@@ -26,21 +26,8 @@
26
26
  -webkit-text-size-adjust: 100%;
27
27
  }
28
28
 
29
- /* Typography — system font stack */
30
29
  html {
31
- font-family:
32
- system-ui,
33
- -apple-system,
34
- "Segoe UI",
35
- "Roboto",
36
- "Ubuntu",
37
- "Cantarell",
38
- "Noto Sans",
39
- sans-serif,
40
- "Apple Color Emoji",
41
- "Segoe UI Emoji",
42
- "Segoe UI Symbol",
43
- "Noto Color Emoji";
30
+ font: var(--g-theme-typography-body);
44
31
  }
45
32
 
46
33
  code,
@@ -68,11 +55,6 @@ pre {
68
55
  margin: 0;
69
56
  }
70
57
 
71
- :where(h1) {
72
- font-size: 2em;
73
- margin: 0.67em 0;
74
- }
75
-
76
58
  /* Grouping */
77
59
  :where(dl, ol, ul) :where(dl, ol, ul) {
78
60
  margin: 0;
@@ -241,8 +223,10 @@ pre {
241
223
 
242
224
  /* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
243
225
  :root {
226
+ color-scheme: light dark;
244
227
  --grantcodes-ui-theme: "none";
245
228
  background-color: var(--g-theme-color-background-default);
229
+ color: var(--g-theme-color-content-default);
246
230
  fill: currentColor;
247
231
  }
248
232
 
package/src/css/elements/forms/input.css CHANGED
@@ -9,7 +9,7 @@
9
9
  color: var(--g-theme-form-color-content-default);
10
10
  padding: 0.5em 1em;
11
11
  transition-property: color, background-color, border-color, outline;
12
- font-size: 1rem;
12
+ font-size: var(--g-theme-typography-body-font-size);
13
13
  }
14
14
 
15
15
  :where(input, textarea, select):not(textarea) {
package/src/css/elements/forms/label.css CHANGED
@@ -1,5 +1,5 @@
1
1
  label {
2
2
  color: inherit;
3
- font-size: 0.8rem;
3
+ font-size: var(--g-theme-typography-label-font-size);
4
4
  cursor: pointer;
5
5
  }
package/src/css/themes/grantcodes.css CHANGED
@@ -1,3 +1,4 @@
1
1
  @import "@grantcodes/style-dictionary/grantcodes/css";
2
2
  @import "@grantcodes/style-dictionary/grantcodes/css/theme";
3
+ @import "@grantcodes/style-dictionary/grantcodes/css/dark";
3
4
  @import "@grantcodes/style-dictionary/assets/fonts/greycliff";
package/src/css/themes/grantina.css ADDED
@@ -0,0 +1,4 @@
1
+ @import "@grantcodes/style-dictionary/grantina/css";
2
+ @import "@grantcodes/style-dictionary/grantina/css/theme";
3
+ @import "@grantcodes/style-dictionary/grantina/css/dark";
4
+ @import "@grantcodes/style-dictionary/assets/fonts/grantina";
package/src/css/themes/todomap.css CHANGED
@@ -1,3 +1,8 @@
1
1
  @import "@grantcodes/style-dictionary/todomap/css";
2
2
  @import "@grantcodes/style-dictionary/todomap/css/theme";
3
+ @import "@grantcodes/style-dictionary/todomap/css/dark";
3
4
  @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
5
+
6
+ html.todomap {
7
+ font-family: var(--g-theme-typography-font-family-body);
8
+ }
package/src/css/themes/wireframe.css CHANGED
@@ -1,2 +1,3 @@
1
1
  @import "@grantcodes/style-dictionary/wireframe/css";
2
2
  @import "@grantcodes/style-dictionary/wireframe/css/theme";
3
+ @import "@grantcodes/style-dictionary/wireframe/css/dark";
package/src/css/typography.css CHANGED
@@ -1,8 +1,5 @@
1
1
  html {
2
- font-family: var(--g-theme-typography-body-default-font-family);
3
- line-height: var(--g-theme-typography-body-default-line-height);
4
- font-size: var(--g-typography-font-size-16);
5
- font-weight: var(--g-theme-typography-body-default-font-weight);
2
+ font: var(--g-theme-typography-body);
6
3
  }
7
4
 
8
5
  h1,
@@ -11,33 +8,31 @@ h3,
11
8
  h4,
12
9
  h5,
13
10
  h6 {
14
- line-height: var(--g-theme-typography-headline-default-line-height);
15
- font-weight: var(--g-theme-typography-headline-default-font-weight);
16
11
  text-wrap: balance;
17
12
  }
18
13
 
19
14
  h1 {
20
- font-size: var(--g-typography-font-size-48);
15
+ font: var(--g-theme-typography-h1);
21
16
  }
22
17
 
23
18
  h2 {
24
- font-size: var(--g-typography-font-size-24);
19
+ font: var(--g-theme-typography-h2);
25
20
  }
26
21
 
27
22
  h3 {
28
- font-size: var(--g-typography-font-size-20);
23
+ font: var(--g-theme-typography-h3);
29
24
  }
30
25
 
31
26
  h4 {
32
- font-size: var(--g-typography-font-size-16);
27
+ font: var(--g-theme-typography-h4);
33
28
  }
34
29
 
35
30
  h5 {
36
- font-size: var(--g-typography-font-size-14);
31
+ font: var(--g-theme-typography-h5);
37
32
  }
38
33
 
39
34
  h6 {
40
- font-size: var(--g-typography-font-size-12);
35
+ font: var(--g-theme-typography-h6);
41
36
  }
42
37
 
43
38
  p {
@@ -52,7 +47,7 @@ pre {
52
47
  border-radius: var(--g-theme-border-radius-md);
53
48
  /* PLACEHOLDER: u.shadow(0) - manual conversion needed */
54
49
  box-shadow: var(--g-theme-box-shadow-sm);
55
- font-size: var(--g-typography-font-size-16);
50
+ font-size: 1rem;
56
51
  font-weight: 400;
57
52
  padding: 1rem;
58
53
  }
package/src/pages/blog-post.stories.js CHANGED
@@ -125,13 +125,13 @@ export const Default = {
125
125
  <grantcodes-badge variant="primary">Engineering</grantcodes-badge>
126
126
 
127
127
  <h1
128
- style="margin: 0; font-size: var(--g-theme-typography-display-default-font-size); font-weight: var(--g-theme-typography-display-default-font-weight); line-height: 1.15; color: var(--g-theme-color-content-default);"
128
+ style="margin: 0; font-size: var(--g-theme-typography-h1-font-size); font-weight: var(--g-theme-typography-h1-font-weight); line-height: 1.15; color: var(--g-theme-color-content-default);"
129
129
  >
130
130
  Shipping faster with async-first teams
131
131
  </h1>
132
132
 
133
133
  <p
134
- style="margin: 0; font-size: var(--g-theme-typography-body-lg-font-size); color: var(--g-theme-color-content-secondary); line-height: 1.6;"
134
+ style="margin: 0; font-size: var(--g-theme-typography-body-font-size); color: var(--g-theme-color-content-secondary); line-height: 1.6;"
135
135
  >
136
136
  How we restructured communication to remove the hidden cost of
137
137
  synchronous coordination — and what we shipped as a result.
@@ -147,12 +147,12 @@ export const Default = {
147
147
  ></grantcodes-avatar>
148
148
  <div>
149
149
  <p
150
- style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default); font-size: var(--g-theme-typography-label-default-font-size);"
150
+ style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default); font-size: var(--g-theme-typography-label-font-size);"
151
151
  >
152
152
  Sam Torres
153
153
  </p>
154
154
  <p
155
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-label-sm-font-size);"
155
+ style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-meta-font-size);"
156
156
  >
157
157
  March 12, 2025 · 8 min read
158
158
  </p>
@@ -275,7 +275,7 @@ export const Default = {
275
275
  Sam Torres
276
276
  </p>
277
277
  <p
278
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-sm-font-size);"
278
+ style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size);"
279
279
  >
280
280
  CTO at Flowbase. Writes about engineering culture, distributed
281
281
  teams, and systems thinking.
@@ -291,7 +291,7 @@ export const Default = {
291
291
  >
292
292
  <grantcodes-container>
293
293
  <h2
294
- style="margin: 0 0 var(--g-theme-spacing-lg); font-size: var(--g-theme-typography-headline-default-font-size); font-weight: var(--g-theme-typography-headline-default-font-weight); color: var(--g-theme-color-content-default);"
294
+ style="margin: 0 0 var(--g-theme-spacing-lg); font-size: var(--g-theme-typography-h2-font-size); font-weight: var(--g-theme-typography-h2-font-weight); color: var(--g-theme-color-content-default);"
295
295
  >
296
296
  More from the blog
297
297
  </h2>
@@ -309,7 +309,7 @@ export const Default = {
309
309
  >${post.category}</grantcodes-badge
310
310
  >
311
311
  <span
312
- style="font-size: var(--g-theme-typography-label-sm-font-size); color: var(--g-theme-color-content-secondary);"
312
+ style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
313
313
  >${post.date}</span
314
314
  >
315
315
  </div>
@@ -317,7 +317,7 @@ export const Default = {
317
317
  style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm);"
318
318
  >
319
319
  <h3
320
- style="margin: 0; font-size: var(--g-theme-typography-title-default-font-size); font-weight: var(--g-theme-typography-title-default-font-weight); color: var(--g-theme-color-content-default); line-height: 1.3;"
320
+ style="margin: 0; font-size: var(--g-theme-typography-h5-font-size); font-weight: var(--g-theme-typography-h5-font-weight); color: var(--g-theme-color-content-default); line-height: 1.3;"
321
321
  >
322
322
  <a
323
323
  href="${post.href}"
@@ -326,7 +326,7 @@ export const Default = {
326
326
  >
327
327
  </h3>
328
328
  <p
329
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-sm-font-size); line-height: 1.6;"
329
+ style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size); line-height: 1.6;"
330
330
  >
331
331
  ${post.excerpt}
332
332
  </p>
@@ -341,7 +341,7 @@ export const Default = {
341
341
  size="small"
342
342
  ></grantcodes-avatar>
343
343
  <span
344
- style="font-size: var(--g-theme-typography-label-sm-font-size); color: var(--g-theme-color-content-secondary);"
344
+ style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
345
345
  >${post.author.name}</span
346
346
  >
347
347
  </div>