@grantcodes/ui 2.8.1 → 2.9.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 (32) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +2 -2
  3. package/src/components/accordion/accordion.css +1 -1
  4. package/src/components/avatar/avatar.css +2 -2
  5. package/src/components/badge/badge.css +6 -10
  6. package/src/components/breadcrumb/breadcrumb.css +5 -5
  7. package/src/components/card/card.css +2 -2
  8. package/src/components/countdown/countdown.css +1 -1
  9. package/src/components/cta/cta.css +4 -4
  10. package/src/components/feature-list/feature-list.css +7 -7
  11. package/src/components/footer/footer-column.css +2 -2
  12. package/src/components/footer/footer.css +2 -5
  13. package/src/components/hero/hero.css +5 -5
  14. package/src/components/loading/loading.css +1 -1
  15. package/src/components/logo-cloud/logo-cloud.css +1 -1
  16. package/src/components/map/map.css +1 -1
  17. package/src/components/media-text/media-text.css +2 -2
  18. package/src/components/newsletter/newsletter.css +5 -5
  19. package/src/components/pricing/pricing.css +8 -8
  20. package/src/components/stats/stats.css +3 -3
  21. package/src/components/tabs/tabs.css +8 -8
  22. package/src/components/testimonials/testimonials.css +1 -1
  23. package/src/components/toast/toast.css +2 -2
  24. package/src/components/tooltip/tooltip.css +2 -2
  25. package/src/css/elements/forms/input.css +5 -5
  26. package/src/css/reset.css +12 -2
  27. package/src/css/themes/grantcodes.css +0 -2
  28. package/src/css/themes/grantina.css +0 -2
  29. package/src/css/themes/todomap.css +0 -2
  30. package/src/css/themes/wireframe.css +0 -2
  31. package/src/css/typography.css +32 -8
  32. package/src/pages/blog-post.stories.js +22 -52
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.9.0](https://github.com/grantcodes/ui/compare/ui-v2.8.1...ui-v2.9.0) (2026-04-17)
4
+
5
+
6
+ ### Features
7
+
8
+ * **10-03:** rename CSS brand token references to primary and fix dark tier-3 overrides ([6d85136](https://github.com/grantcodes/ui/commit/6d85136e632509517d503805a4cf813cc6659b97))
9
+ * **12-02:** add .dark/.light class overrides to UI reset.css + verify all themes build ([c4211b5](https://github.com/grantcodes/ui/commit/c4211b5b2e688cafefcf698e523fc6d4f84e4429))
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * **10-03:** correct CSS variable prefix from --g-color-primary to --g-theme-color-primary ([30a6bcd](https://github.com/grantcodes/ui/commit/30a6bcd4272dc5217b9425a0c10354347f7224d4))
15
+ * **10-03:** replace content-secondary with content-subtle for body text ([4227296](https://github.com/grantcodes/ui/commit/422729665b979fc8fa955378392a8565df8f0acb))
16
+ * **12-02:** remove stale dark/light [@import](https://github.com/import) lines from all 4 UI theme CSS files ([6033010](https://github.com/grantcodes/ui/commit/60330101bc61d0746c5f18a0d768c3590f70057b))
17
+ * **token-refactor:** fix theme colors for badges, buttons, borders, and content contrast across grantcodes and grantina themes ([e3c093d](https://github.com/grantcodes/ui/commit/e3c093d1db89664ca532d9d9ef146db695a69cd4))
18
+
3
19
  ## [2.8.1](https://github.com/grantcodes/ui/compare/ui-v2.8.0...ui-v2.8.1) (2026-04-07)
4
20
 
5
21
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@grantcodes/ui",
3
- "version": "2.8.1",
3
+ "version": "2.9.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.4.2"
50
+ "@grantcodes/style-dictionary": "^1.5.0"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@arcmantle/vite-plugin-import-css-sheet": "^1.0.12",
package/src/components/accordion/accordion.css CHANGED
@@ -47,7 +47,7 @@
47
47
  block-size: 1em;
48
48
  flex-shrink: 0;
49
49
  transition: transform 0.25s ease;
50
- color: var(--g-theme-color-content-secondary, currentColor);
50
+ color: var(--g-theme-color-content-subtle, currentColor);
51
51
  }
52
52
 
53
53
  .accordion__item[open] .accordion__chevron {
package/src/components/avatar/avatar.css CHANGED
@@ -18,8 +18,8 @@
18
18
  block-size: var(--g-theme-spacing-2xl);
19
19
  border-radius: 50%;
20
20
  overflow: hidden;
21
- background-color: var(--g-color-brand-purple-200);
22
- color: var(--g-color-brand-purple-900);
21
+ background-color: var(--g-theme-color-primary-200);
22
+ color: var(--g-theme-color-primary-900);
23
23
  text-align: center;
24
24
  font-size: var(--g-theme-typography-h6-font-size);
25
25
  font-weight: var(--g-theme-typography-label-default-font-weight);
package/src/components/badge/badge.css CHANGED
@@ -5,7 +5,7 @@
5
5
  }
6
6
 
7
7
  :host {
8
- display: inline-block;
8
+ display: inline-flex;
9
9
  }
10
10
 
11
11
  .badge {
@@ -15,7 +15,7 @@
15
15
  padding-inline: 0.625em;
16
16
  padding-block: 0.375em;
17
17
  border-radius: var(--g-theme-border-radius-md, 0.375rem);
18
- font: var(--g-typography-font-label-sm);
18
+ font: var(--g-theme-typography-meta);
19
19
  line-height: 1;
20
20
  white-space: nowrap;
21
21
  border-width: 1px;
@@ -25,12 +25,8 @@
25
25
 
26
26
  /* Soft style variants */
27
27
  .badge--primary {
28
- background-color: color-mix(
29
- in srgb,
30
- var(--g-color-brand-purple-500) 15%,
31
- transparent
32
- );
33
- color: var(--g-color-brand-purple-700);
28
+ background-color: var(--g-theme-color-primary-200);
29
+ color: var(--g-theme-color-primary-600);
34
30
  border-color: transparent;
35
31
  }
36
32
 
@@ -75,8 +71,8 @@
75
71
  }
76
72
 
77
73
  .badge--neutral {
78
- background-color: var(--g-color-brand-purple-100);
79
- color: var(--g-color-brand-purple-800);
74
+ background-color: var(--g-theme-color-background-subtle);
75
+ color: var(--g-theme-color-content-default);
80
76
  border-color: transparent;
81
77
  }
82
78
 
package/src/components/breadcrumb/breadcrumb.css CHANGED
@@ -27,14 +27,14 @@
27
27
  align-items: center;
28
28
  gap: var(--g-theme-spacing-sm);
29
29
  font-size: var(--g-typography-font-size-14);
30
- color: var(--g-color-brand-purple-700);
30
+ color: var(--g-theme-color-primary-700);
31
31
  }
32
32
 
33
33
  /* Separator using ::after pseudo-element; driven by parent via data-has-separator */
34
34
  :host([data-has-separator]) .breadcrumb__item::after {
35
35
  content: var(--component-breadcrumb-separator, "/");
36
36
  display: inline-block;
37
- color: var(--g-color-brand-purple-400);
37
+ color: var(--g-theme-color-primary-400);
38
38
  font-weight: var(--g-typography-font-weight-400);
39
39
  user-select: none;
40
40
  pointer-events: none;
@@ -51,7 +51,7 @@
51
51
  }
52
52
 
53
53
  .breadcrumb__link {
54
- color: var(--g-color-brand-purple-600);
54
+ color: var(--g-theme-color-primary-600);
55
55
  text-decoration: none;
56
56
  transition: color 0.2s ease;
57
57
  border-radius: var(--g-theme-border-radius-md, 0.25rem);
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .breadcrumb__link:hover {
65
- color: var(--g-color-brand-purple-700);
65
+ color: var(--g-theme-color-primary-700);
66
66
  text-decoration: underline;
67
67
  }
68
68
 
@@ -80,6 +80,6 @@
80
80
  content: "...";
81
81
  display: inline-block;
82
82
  margin-inline-end: 0.5rem;
83
- color: var(--g-color-brand-purple-400);
83
+ color: var(--g-theme-color-primary-400);
84
84
  }
85
85
  }
package/src/components/card/card.css CHANGED
@@ -54,7 +54,7 @@
54
54
 
55
55
  .card__header ::slotted(*) {
56
56
  margin: 0;
57
- font: var(--g-theme-typography-h5);
57
+ font: var(--g-typography-h5-font);
58
58
  }
59
59
 
60
60
  .card__content {
@@ -110,7 +110,7 @@
110
110
  background-color: color-mix(
111
111
  in srgb,
112
112
  var(--g-theme-color-background-default) 90%,
113
- var(--g-color-brand-purple-500) 10%
113
+ var(--g-theme-color-primary-500) 10%
114
114
  );
115
115
  color: var(--g-theme-color-content-default);
116
116
  }
package/src/components/countdown/countdown.css CHANGED
@@ -37,7 +37,7 @@
37
37
 
38
38
  .countdown__label {
39
39
  font-size: var(--g-theme-typography-body-sm-font-size, 0.875rem);
40
- color: var(--g-theme-color-content-secondary);
40
+ color: var(--g-theme-color-content-subtle);
41
41
  text-transform: uppercase;
42
42
  letter-spacing: 0.05em;
43
43
  }
package/src/components/cta/cta.css CHANGED
@@ -33,19 +33,19 @@
33
33
  font-weight: var(--g-theme-typography-meta-default-font-weight);
34
34
  letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
35
35
  text-transform: uppercase;
36
- color: var(--g-theme-color-content-brand, #7c3aed);
36
+ color: var(--g-theme-color-content-primary, #7c3aed);
37
37
  }
38
38
 
39
39
  .cta__title {
40
40
  margin: 0 0 var(--g-theme-spacing-md);
41
- font: var(--g-theme-typography-h2);
41
+ font: var(--g-typography-h2-font);
42
42
  color: var(--g-theme-color-content-default);
43
43
  }
44
44
 
45
45
  .cta__text {
46
46
  margin: 0 0 var(--g-theme-spacing-xl);
47
47
  font: var(--g-theme-typography-body-lg);
48
- color: var(--g-theme-color-content-secondary);
48
+ color: var(--g-theme-color-content-subtle);
49
49
  }
50
50
 
51
51
  .cta__actions {
@@ -62,5 +62,5 @@
62
62
  }
63
63
 
64
64
  .cta__secondary-link:hover {
65
- color: var(--g-theme-color-content-brand, #7c3aed);
65
+ color: var(--g-theme-color-content-primary, #7c3aed);
66
66
  }
package/src/components/feature-list/feature-list.css CHANGED
@@ -20,7 +20,7 @@
20
20
 
21
21
  .feature-list__title {
22
22
  margin: 0 0 var(--g-theme-spacing-sm);
23
- font: var(--g-theme-typography-h4);
23
+ font: var(--g-typography-h4-font);
24
24
  text-align: center;
25
25
  color: var(--g-theme-color-content-default);
26
26
  }
@@ -29,7 +29,7 @@
29
29
  margin: 0 auto var(--g-theme-spacing-2xl);
30
30
  font-size: var(--g-theme-typography-body-lg-font-size);
31
31
  text-align: center;
32
- color: var(--g-theme-color-content-secondary);
32
+ color: var(--g-theme-color-content-subtle);
33
33
  max-width: 55ch;
34
34
  }
35
35
 
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .feature-list__link:hover .feature-list__item-title {
65
- color: var(--g-theme-color-content-brand, #7c3aed);
65
+ color: var(--g-theme-color-content-primary, #7c3aed);
66
66
  }
67
67
 
68
68
  .feature-list__icon {
@@ -71,14 +71,14 @@
71
71
  border-radius: 50%;
72
72
  inline-size: fit-content;
73
73
  margin-block-end: var(--g-theme-spacing-md);
74
- color: var(--g-theme-color-content-brand, currentColor);
75
- background-color: var(--g-theme-color-background-brand);
74
+ color: var(--g-theme-color-content-primary, currentColor);
75
+ background-color: var(--g-theme-color-background-primary);
76
76
  }
77
77
 
78
78
  .feature-list__item-title {
79
- font: var(--g-theme-typography-h5);
79
+ font: var(--g-typography-h5-font);
80
80
  }
81
81
 
82
82
  .feature-list__item-desc {
83
- color: var(--g-theme-color-content-secondary);
83
+ color: var(--g-theme-color-content-subtle);
84
84
  }
package/src/components/footer/footer-column.css CHANGED
@@ -29,7 +29,7 @@
29
29
  }
30
30
 
31
31
  ::slotted(a) {
32
- color: var(--g-theme-color-content-secondary);
32
+ color: var(--g-theme-color-content-subtle);
33
33
  text-decoration: none;
34
34
  transition: color 0.2s ease;
35
35
  }
@@ -41,6 +41,6 @@
41
41
 
42
42
  ::slotted(p) {
43
43
  margin: 0;
44
- color: var(--g-theme-color-content-secondary);
44
+ color: var(--g-theme-color-content-subtle);
45
45
  font: var(--g-typography-body-sm);
46
46
  }
package/src/components/footer/footer.css CHANGED
@@ -54,9 +54,6 @@
54
54
  gap: var(--g-theme-spacing-md);
55
55
  }
56
56
 
57
- .footer__bottom:has(slot[name="bottom"]:empty) {
58
- display: none;
59
- }
60
57
 
61
58
  @container footer (max-width: 640px) {
62
59
  .footer__bottom {
@@ -68,7 +65,7 @@
68
65
  /* Slotted content styling */
69
66
  ::slotted(*) {
70
67
  font: var(--g-typography-font-body-sm);
71
- color: var(--g-theme-color-content-secondary);
68
+ color: var(--g-theme-color-content-subtle);
72
69
  }
73
70
 
74
71
  ::slotted(p) {
@@ -77,7 +74,7 @@
77
74
  }
78
75
 
79
76
  ::slotted(a) {
80
- color: var(--g-theme-color-content-secondary);
77
+ color: var(--g-theme-color-content-subtle);
81
78
  text-decoration: none;
82
79
  transition: color 0.2s ease;
83
80
  }
package/src/components/hero/hero.css CHANGED
@@ -15,7 +15,7 @@
15
15
  align-items: center;
16
16
  min-height: 50vh;
17
17
  padding: var(--g-theme-spacing-2xl) var(--g-theme-spacing-md);
18
- background: var(--g-theme-color-background-brand-knockout, #7c3aed);
18
+ background: var(--g-theme-color-background-primary-knockout, #7c3aed);
19
19
  }
20
20
 
21
21
  .hero__container {
@@ -33,14 +33,14 @@
33
33
  }
34
34
 
35
35
  .hero__title {
36
- font: var(--g-theme-typography-h1);
36
+ font: var(--g-typography-h1-font);
37
37
  font-size: clamp(2rem, 5vw, 4rem);
38
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
38
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
39
39
  }
40
40
 
41
41
  .hero__text {
42
42
  font: var(--g-theme-typography-body-lg);
43
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
43
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
44
44
  }
45
45
 
46
46
  :host([size="sm"]) .hero {
@@ -54,5 +54,5 @@
54
54
  }
55
55
 
56
56
  ::slotted(*) {
57
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
57
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
58
58
  }
package/src/components/loading/loading.css CHANGED
@@ -18,7 +18,7 @@
18
18
  overflow: hidden;
19
19
  padding-top: var(--height);
20
20
  background-repeat: no-repeat;
21
- background-color: var(--g-color-brand-purple-500);
21
+ background-color: var(--g-theme-color-primary-500);
22
22
  background-image: linear-gradient(
23
23
  to right,
24
24
  transparent 0%,
package/src/components/logo-cloud/logo-cloud.css CHANGED
@@ -27,7 +27,7 @@
27
27
  letter-spacing: var(--g-theme-typography-meta-default-letter-spacing);
28
28
  text-transform: uppercase;
29
29
  text-align: center;
30
- color: var(--g-theme-color-content-secondary);
30
+ color: var(--g-theme-color-content-subtle);
31
31
  }
32
32
 
33
33
  .logo-cloud__grid {
package/src/components/map/map.css CHANGED
@@ -28,7 +28,7 @@
28
28
  display: block;
29
29
  padding: var(--g-theme-spacing-sm) var(--g-theme-spacing-md);
30
30
  font-size: var(--g-theme-typography-body-sm-font-size);
31
- color: var(--g-theme-color-content-brand, #7c3aed);
31
+ color: var(--g-theme-color-content-primary, #7c3aed);
32
32
  text-decoration: none;
33
33
  border-block-start: 1px solid var(--g-theme-color-border-default);
34
34
  background: var(--g-theme-color-background-subtle);
package/src/components/media-text/media-text.css CHANGED
@@ -57,12 +57,12 @@
57
57
 
58
58
  .media-text__title {
59
59
  margin: 0;
60
- font: var(--g-theme-typography-h4);
60
+ font: var(--g-typography-h4-font);
61
61
  color: var(--g-theme-color-content-default);
62
62
  }
63
63
 
64
64
  .media-text__text {
65
65
  margin: 0;
66
66
  font: var(--g-theme-typography-body-lg);
67
- color: var(--g-theme-color-content-secondary);
67
+ color: var(--g-theme-color-content-subtle);
68
68
  }
package/src/components/newsletter/newsletter.css CHANGED
@@ -11,7 +11,7 @@
11
11
  .newsletter {
12
12
  padding-block: var(--g-theme-spacing-3xl);
13
13
  padding-inline: var(--g-theme-spacing-md);
14
- background: var(--g-theme-color-background-brand-knockout, #7c3aed);
14
+ background: var(--g-theme-color-background-primary-knockout, #7c3aed);
15
15
  text-align: center;
16
16
  }
17
17
 
@@ -22,14 +22,14 @@
22
22
 
23
23
  .newsletter__title {
24
24
  margin: 0 0 var(--g-theme-spacing-sm);
25
- font: var(--g-theme-typography-h4);
26
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
25
+ font: var(--g-typography-h4-font);
26
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
27
27
  }
28
28
 
29
29
  .newsletter__text {
30
30
  margin: 0 0 var(--g-theme-spacing-xl);
31
31
  font: var(--g-theme-typography-body-lg);
32
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
32
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
33
33
  opacity: 0.9;
34
34
  }
35
35
 
@@ -80,7 +80,7 @@
80
80
  .newsletter__disclaimer {
81
81
  margin: var(--g-theme-spacing-md) 0 0;
82
82
  font: var(--g-theme-typography-body-sm);
83
- color: var(--g-theme-color-content-brand-knockout, #ffffff);
83
+ color: var(--g-theme-color-content-primary-knockout, #ffffff);
84
84
  opacity: 0.75;
85
85
  }
86
86
 
package/src/components/pricing/pricing.css CHANGED
@@ -30,7 +30,7 @@
30
30
  margin: 0 auto var(--g-theme-spacing-2xl);
31
31
  font-size: var(--g-theme-typography-body-lg-font-size);
32
32
  text-align: center;
33
- color: var(--g-theme-color-content-secondary);
33
+ color: var(--g-theme-color-content-subtle);
34
34
  max-width: 55ch;
35
35
  }
36
36
 
@@ -55,7 +55,7 @@
55
55
  }
56
56
 
57
57
  .pricing__tier--highlighted {
58
- border-color: var(--g-theme-color-border-brand, #7c3aed);
58
+ border-color: var(--g-theme-color-border-primary, #7c3aed);
59
59
  background: var(--g-theme-color-background-subtle);
60
60
  box-shadow: var(--g-theme-shadow-lg);
61
61
  }
@@ -80,19 +80,19 @@
80
80
  }
81
81
 
82
82
  .pricing__price {
83
- font: var(--g-theme-typography-h2);
83
+ font: var(--g-typography-h2-font);
84
84
  color: var(--g-theme-color-content-default);
85
85
  }
86
86
 
87
87
  .pricing__period {
88
88
  font-size: var(--g-theme-typography-body-default-font-size);
89
- color: var(--g-theme-color-content-secondary);
89
+ color: var(--g-theme-color-content-subtle);
90
90
  }
91
91
 
92
92
  .pricing__tier-desc {
93
93
  margin: 0;
94
94
  font: var(--g-theme-typography-body-sm);
95
- color: var(--g-theme-color-content-secondary);
95
+ color: var(--g-theme-color-content-subtle);
96
96
  }
97
97
 
98
98
  .pricing__features {
@@ -114,18 +114,18 @@
114
114
  }
115
115
 
116
116
  .pricing__feature--excluded {
117
- color: var(--g-theme-color-content-secondary);
117
+ color: var(--g-theme-color-content-subtle);
118
118
  text-decoration: line-through;
119
119
  }
120
120
 
121
121
  .pricing__feature-icon {
122
122
  font: var(--g-theme-typography-body-sm);
123
- color: var(--g-theme-color-content-brand, #7c3aed);
123
+ color: var(--g-theme-color-content-primary, #7c3aed);
124
124
  flex-shrink: 0;
125
125
  }
126
126
 
127
127
  .pricing__feature--excluded .pricing__feature-icon {
128
- color: var(--g-theme-color-content-secondary);
128
+ color: var(--g-theme-color-content-subtle);
129
129
  }
130
130
 
131
131
  .pricing__cta {
package/src/components/stats/stats.css CHANGED
@@ -50,10 +50,10 @@
50
50
  }
51
51
 
52
52
  .stats__value {
53
- font: var(--g-theme-typography-h1);
53
+ font: var(--g-typography-h1-font);
54
54
  white-space: nowrap;
55
55
  line-height: 1;
56
- color: var(--g-theme-color-content-brand, #7c3aed);
56
+ color: var(--g-theme-color-content-primary, #7c3aed);
57
57
  }
58
58
 
59
59
  .stats__label {
@@ -64,5 +64,5 @@
64
64
 
65
65
  .stats__context {
66
66
  font-size: var(--g-theme-typography-body-sm-font-size);
67
- color: var(--g-theme-color-content-secondary);
67
+ color: var(--g-theme-color-content-subtle);
68
68
  }
package/src/components/tabs/tabs.css CHANGED
@@ -22,8 +22,8 @@
22
22
  width: fit-content;
23
23
  min-width: 100%;
24
24
  background-image: linear-gradient(
25
- var(--g-theme-color-border-default, var(--g-color-brand-purple-100)),
26
- var(--g-theme-color-border-default, var(--g-color-brand-purple-100))
25
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100)),
26
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100))
27
27
  );
28
28
  background-size: auto var(--border-width);
29
29
  background-position: bottom;
@@ -37,7 +37,7 @@
37
37
  border: none;
38
38
  border-block-start: var(--border-width) solid transparent;
39
39
  border-block-end: var(--border-width) solid
40
- var(--g-theme-color-border-default, var(--g-color-brand-purple-100));
40
+ var(--g-theme-color-border-default, var(--g-theme-color-primary-100));
41
41
  background-color: transparent;
42
42
  color: var(--g-theme-color-content-default);
43
43
  opacity: 0.7;
@@ -60,14 +60,14 @@
60
60
  opacity: 1;
61
61
  border-block-end-color: var(
62
62
  --g-theme-color-border-default,
63
- var(--g-color-brand-purple-200)
63
+ var(--g-theme-color-primary-200)
64
64
  );
65
65
  }
66
66
 
67
67
  .tabs__tab.is-active {
68
68
  border-block-end-color: var(
69
- --g-theme-color-border-brand,
70
- var(--g-color-brand-purple-500)
69
+ --g-theme-color-border-primary,
70
+ var(--g-theme-color-primary-500)
71
71
  );
72
72
  background-color: var(--g-theme-color-background-subtle);
73
73
  color: var(--g-theme-color-content-default);
@@ -79,8 +79,8 @@
79
79
  .tabs__panel {
80
80
  margin-block-start: var(--g-theme-spacing-md);
81
81
  outline-color: var(
82
- --g-theme-color-border-brand,
83
- var(--g-color-brand-purple-500)
82
+ --g-theme-color-border-primary,
83
+ var(--g-theme-color-primary-500)
84
84
  );
85
85
  outline-offset: 1rem;
86
86
  display: none;
package/src/components/testimonials/testimonials.css CHANGED
@@ -80,5 +80,5 @@
80
80
 
81
81
  .testimonials__role {
82
82
  font-size: var(--g-theme-typography-body-sm-font-size);
83
- color: var(--g-theme-color-content-secondary);
83
+ color: var(--g-theme-color-content-subtle);
84
84
  }
package/src/components/toast/toast.css CHANGED
@@ -137,7 +137,7 @@
137
137
 
138
138
  .toast__message {
139
139
  font-size: var(--g-typography-font-size-14);
140
- color: var(--g-theme-color-content-secondary);
140
+ color: var(--g-theme-color-content-subtle);
141
141
  line-height: 1.5;
142
142
  }
143
143
 
@@ -151,7 +151,7 @@
151
151
  align-items: center;
152
152
  justify-content: center;
153
153
  border-radius: var(--g-theme-border-radius-md);
154
- color: var(--g-theme-color-content-secondary);
154
+ color: var(--g-theme-color-content-subtle);
155
155
  cursor: pointer;
156
156
  transition: all 0.2s ease;
157
157
  margin-inline-start: 0.5rem;
package/src/components/tooltip/tooltip.css CHANGED
@@ -31,8 +31,8 @@
31
31
  padding: 0.6em 1em;
32
32
  font-size: var(--g-typography-font-size-14);
33
33
  line-height: 1;
34
- color: var(--g-color-brand-purple-900);
35
- background-color: var(--g-color-brand-purple-100);
34
+ color: var(--g-theme-color-primary-900);
35
+ background-color: var(--g-theme-color-primary-100);
36
36
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
37
37
  user-select: none;
38
38
  text-align: center;
package/src/css/elements/forms/input.css CHANGED
@@ -85,8 +85,8 @@
85
85
  }
86
86
 
87
87
  :where(input, textarea, select):where(option):checked {
88
- background: var(--g-theme-color-background-brand);
89
- color: var(--g-theme-color-content-brand-knockout);
88
+ background: var(--g-theme-color-background-primary);
89
+ color: var(--g-theme-color-content-primary-knockout);
90
90
  }
91
91
 
92
92
  :where(input, textarea, select):where([type="checkbox"]),
@@ -121,8 +121,8 @@
121
121
  }
122
122
 
123
123
  :where(input, textarea, select):where([type="checkbox"]):checked {
124
- border-color: var(--g-theme-color-border-brand);
125
- background-color: var(--g-theme-color-border-brand);
124
+ border-color: var(--g-theme-color-border-primary);
125
+ background-color: var(--g-theme-color-border-primary);
126
126
  }
127
127
 
128
128
  :where(input, textarea, select):where([type="checkbox"]):checked::after {
@@ -147,5 +147,5 @@
147
147
  }
148
148
 
149
149
  :where(input, textarea, select):where([type="radio"]):checked::after {
150
- background-color: var(--g-theme-color-border-brand);
150
+ background-color: var(--g-theme-color-border-primary);
151
151
  }
package/src/css/reset.css CHANGED
@@ -17,7 +17,7 @@
17
17
 
18
18
  /* Root defaults */
19
19
  :where(:root) {
20
- font: var(--g-theme-typography-body);
20
+ font: var(--g-typography-body-font);
21
21
  cursor: default;
22
22
  line-height: 1.5;
23
23
  overflow-wrap: break-word;
@@ -228,6 +228,16 @@ pre {
228
228
  fill: currentColor;
229
229
  }
230
230
 
231
+ /* Force dark mode on any element or subtree */
232
+ .dark {
233
+ color-scheme: dark;
234
+ }
235
+
236
+ /* Force light mode on any element or subtree */
237
+ .light {
238
+ color-scheme: light;
239
+ }
240
+
231
241
  /* Allow transitioning auto */
232
242
  :root {
233
243
  @supports (interpolate-size: allow-keywords) {
@@ -236,7 +246,7 @@ pre {
236
246
  }
237
247
 
238
248
  ::selection {
239
- background-color: var(--g-theme-color-background-brand);
249
+ background-color: var(--g-theme-color-background-primary);
240
250
  }
241
251
 
242
252
  /* Default backdrop styles */
package/src/css/themes/grantcodes.css CHANGED
@@ -1,5 +1,3 @@
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";
4
- @import "@grantcodes/style-dictionary/grantcodes/css/light";
5
3
  @import "@grantcodes/style-dictionary/assets/fonts/greycliff";
package/src/css/themes/grantina.css CHANGED
@@ -1,5 +1,3 @@
1
1
  @import "@grantcodes/style-dictionary/grantina/css";
2
2
  @import "@grantcodes/style-dictionary/grantina/css/theme";
3
- @import "@grantcodes/style-dictionary/grantina/css/dark";
4
- @import "@grantcodes/style-dictionary/grantina/css/light";
5
3
  @import "@grantcodes/style-dictionary/assets/fonts/grantina";
package/src/css/themes/todomap.css CHANGED
@@ -1,7 +1,5 @@
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";
4
- @import "@grantcodes/style-dictionary/todomap/css/light";
5
3
  @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
6
4
 
7
5
  html.todomap {
package/src/css/themes/wireframe.css CHANGED
@@ -1,4 +1,2 @@
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";
4
- @import "@grantcodes/style-dictionary/wireframe/css/light";
package/src/css/typography.css CHANGED
@@ -1,5 +1,24 @@
1
- html {
2
- font: var(--g-theme-typography-body);
1
+ :root {
2
+ font: var(--g-typography-body-font);
3
+ font-size: var(--g-typography-font-size-root);
4
+ }
5
+ @media (min-width: 40em) {
6
+ :root {
7
+ /* TODO: Would like to get rid of important */
8
+ --g-typography-font-scale-default: var(--g-typography-font-scale-lg) !important;
9
+ }
10
+ }
11
+
12
+ :where(h1,h1,h3,h4,h5,h6,p) {
13
+ margin-block-end: 1rem;
14
+ }
15
+
16
+ :where(h1,h1,h3,h4,h5,h6,p):first-child {
17
+ margin-block-start: 0;
18
+ }
19
+
20
+ :where(h1,h1,h3,h4,h5,h6,p):last-child {
21
+ margin-block-end: 0;
3
22
  }
4
23
 
5
24
  h1,
@@ -12,31 +31,36 @@ h6 {
12
31
  }
13
32
 
14
33
  h1 {
15
- font: var(--g-theme-typography-h1);
34
+ font: var(--g-typography-h1-font);
16
35
  }
17
36
 
18
37
  h2 {
19
- font: var(--g-theme-typography-h2);
38
+ font: var(--g-typography-h2-font);
20
39
  }
21
40
 
22
41
  h3 {
23
- font: var(--g-theme-typography-h3);
42
+ font: var(--g-typography-h3-font);
24
43
  }
25
44
 
26
45
  h4 {
27
- font: var(--g-theme-typography-h4);
46
+ font: var(--g-typography-h4-font);
28
47
  }
29
48
 
30
49
  h5 {
31
- font: var(--g-theme-typography-h5);
50
+ font: var(--g-typography-h5-font);
32
51
  }
33
52
 
34
53
  h6 {
35
- font: var(--g-theme-typography-h6);
54
+ font: var(--g-typography-h6-font);
36
55
  }
37
56
 
38
57
  p {
39
58
  text-wrap: pretty;
59
+ margin: 0
60
+ }
61
+
62
+ p + p {
63
+ margin-block-start: 1rem;
40
64
  }
41
65
 
42
66
  pre {
package/src/pages/blog-post.stories.js CHANGED
@@ -54,12 +54,12 @@ const relatedPosts = [
54
54
 
55
55
  const footerContent = html`
56
56
  <grantcodes-footer-column>
57
- <h3>Flowbase</h3>
57
+ <h3 style="font: var(--g-typography-h6-font);">Flowbase</h3>
58
58
  <p>The modern platform for teams that move fast and ship great software.</p>
59
59
  </grantcodes-footer-column>
60
60
 
61
61
  <grantcodes-footer-column>
62
- <h3>Product</h3>
62
+ <h3 style="font: var(--g-typography-h6-font);">Product</h3>
63
63
  <ul>
64
64
  <li><a href="/features">Features</a></li>
65
65
  <li><a href="/pricing">Pricing</a></li>
@@ -68,7 +68,7 @@ const footerContent = html`
68
68
  </grantcodes-footer-column>
69
69
 
70
70
  <grantcodes-footer-column>
71
- <h3>Company</h3>
71
+ <h3 style="font: var(--g-typography-h6-font);">Company</h3>
72
72
  <ul>
73
73
  <li><a href="/blog">Blog</a></li>
74
74
  <li><a href="/about">About</a></li>
@@ -106,34 +106,24 @@ export const Default = {
106
106
  </grantcodes-app-bar>
107
107
 
108
108
  <!-- Article header -->
109
- <grantcodes-container
110
- style="padding-block-start: var(--g-theme-spacing-xl);"
111
- >
109
+ <grantcodes-container>
112
110
  <div style="max-inline-size: 48rem; margin-inline: auto;">
113
- <grantcodes-breadcrumb>
111
+ <grantcodes-breadcrumb style="margin-block: var(--g-theme-spacing-lg);">
114
112
  <grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
115
- <grantcodes-breadcrumb-item href="/blog"
116
- >Blog</grantcodes-breadcrumb-item
117
- >
118
- <grantcodes-breadcrumb-item current
119
- >Shipping faster with async-first teams</grantcodes-breadcrumb-item
120
- >
113
+ <grantcodes-breadcrumb-item href="/blog">Blog</grantcodes-breadcrumb-item>
114
+ <grantcodes-breadcrumb-item current>Shipping faster with async-first teams</grantcodes-breadcrumb-item>
121
115
  </grantcodes-breadcrumb>
122
116
 
123
117
  <div
124
- style="margin-block-start: var(--g-theme-spacing-lg); display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
118
+ style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
125
119
  >
126
120
  <grantcodes-badge variant="primary">Engineering</grantcodes-badge>
127
121
 
128
- <h1
129
- 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);"
130
- >
122
+ <h1>
131
123
  Shipping faster with async-first teams
132
124
  </h1>
133
125
 
134
- <p
135
- style="margin: 0; font-size: var(--g-theme-typography-body-font-size); color: var(--g-theme-color-content-secondary); line-height: 1.6;"
136
- >
126
+ <p style="var(--g-theme-typography-body-lg);">
137
127
  How we restructured communication to remove the hidden cost of
138
128
  synchronous coordination — and what we shipped as a result.
139
129
  </p>
@@ -153,7 +143,7 @@ export const Default = {
153
143
  Sam Torres
154
144
  </p>
155
145
  <p
156
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-meta-font-size);"
146
+ style="margin: 0; color: var(--g-theme-color-content-subtle); font-size: var(--g-theme-typography-meta-font-size);"
157
147
  >
158
148
  March 12, 2025 · 8 min read
159
149
  </p>
@@ -164,10 +154,7 @@ export const Default = {
164
154
  </grantcodes-container>
165
155
 
166
156
  <!-- Featured image -->
167
- <grantcodes-container
168
- nopad
169
- style="margin-block: var(--g-theme-spacing-lg);"
170
- >
157
+ <grantcodes-container align="wide" nopad>
171
158
  <img
172
159
  src="https://placehold.co/1200x500?text=Featured+Image"
173
160
  alt="An abstract illustration of async communication flows"
@@ -275,9 +262,7 @@ export const Default = {
275
262
  >
276
263
  Sam Torres
277
264
  </p>
278
- <p
279
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size);"
280
- >
265
+ <p style="font: var(--g-theme-typography-meta);">
281
266
  CTO at Flowbase. Writes about engineering culture, distributed
282
267
  teams, and systems thinking.
283
268
  </p>
@@ -287,18 +272,10 @@ export const Default = {
287
272
  </grantcodes-container>
288
273
 
289
274
  <!-- Related posts -->
290
- <div
291
- style="padding-block: var(--g-theme-spacing-2xl);"
292
- >
275
+ <div style="padding-block: var(--g-theme-spacing-2xl);">
293
276
  <grantcodes-container>
294
- <h2
295
- 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);"
296
- >
297
- More from the blog
298
- </h2>
299
- <div
300
- style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);"
301
- >
277
+ <h2>More from the blog</h2>
278
+ <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);">
302
279
  ${relatedPosts.map(
303
280
  (post) => html`
304
281
  <grantcodes-card>
@@ -306,19 +283,14 @@ export const Default = {
306
283
  slot="header"
307
284
  style="display: flex; align-items: center; justify-content: space-between;"
308
285
  >
309
- <grantcodes-badge variant="neutral"
310
- >${post.category}</grantcodes-badge
311
- >
312
- <span
313
- style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
314
- >${post.date}</span
315
- >
286
+ <grantcodes-badge variant="neutral">${post.category}</grantcodes-badge>
287
+ <span style="font: var(--g-theme-typography-meta);">${post.date}</span>
316
288
  </div>
317
289
  <div
318
- style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm);"
290
+ style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm); flex: 1;"
319
291
  >
320
292
  <h3
321
- 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;"
293
+ style="font: var(--g-typography-h6-font);"
322
294
  >
323
295
  <a
324
296
  href="${post.href}"
@@ -326,9 +298,7 @@ export const Default = {
326
298
  >${post.title}</a
327
299
  >
328
300
  </h3>
329
- <p
330
- style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-font-size); line-height: 1.6;"
331
- >
301
+ <p>
332
302
  ${post.excerpt}
333
303
  </p>
334
304
  </div>
@@ -342,7 +312,7 @@ export const Default = {
342
312
  size="small"
343
313
  ></grantcodes-avatar>
344
314
  <span
345
- style="font-size: var(--g-theme-typography-meta-font-size); color: var(--g-theme-color-content-secondary);"
315
+ style="font: var(--g-theme-typography-meta);"
346
316
  >${post.author.name}</span
347
317
  >
348
318
  </div>