@timmo001/groundwork-tokens 0.10.2 → 0.10.3

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/generate.ts +16 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@timmo001/groundwork-tokens",
3
- "version": "0.10.2",
3
+ "version": "0.10.3",
4
4
  "description": "Groundwork's design tokens: the theme schema, the OKLCH solver and every theme as CSS and JSON",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
package/src/generate.ts CHANGED
@@ -475,19 +475,27 @@ const blumeRoles = {
475
475
  "code-word-border": "border-info",
476
476
  };
477
477
 
478
- /** Blume's color tokens from a theme's roles in one mode. */
478
+ /**
479
+ * Blume's color tokens from a theme's roles in one mode, plus the link color
480
+ * docs-kit's `theme.css` gives prose links, as Blume has no token for it.
481
+ */
479
482
  const blumeColors = (roles: Roles) =>
480
483
  Object.fromEntries(
481
- Object.entries(blumeRoles).flatMap(([token, role]) => {
484
+ [
485
+ ...Object.entries(blumeRoles).map(
486
+ ([token, role]) => [`--blume-${token}`, role] as const,
487
+ ),
488
+ ["--gw-docs-link", "link"] as const,
489
+ ].flatMap(([property, role]) => {
482
490
  const color = roles[role];
483
491
 
484
- return color === undefined ? [] : [[token, toCss(color)]];
492
+ return color === undefined ? [] : [[property, toCss(color)]];
485
493
  }),
486
494
  );
487
495
 
488
496
  const blumeDeclarations = (properties: Record<string, string>) =>
489
497
  Object.entries(properties)
490
- .map(([name, value]) => ` --blume-${name}: ${value};`)
498
+ .map(([name, value]) => ` ${name}: ${value};`)
491
499
  .join("\n");
492
500
 
493
501
  /**
@@ -498,10 +506,10 @@ const blumeRules = (theme: ResolvedTheme, root: string) => {
498
506
  const { light, dark, darker } = theme.modes;
499
507
 
500
508
  const style = {
501
- radius: `${theme.style.radius.panel}px`,
502
- "font-body": fontStack(theme.style.font),
503
- "font-display": fontStack(theme.style.font),
504
- "font-mono": fontStack(theme.style.mono),
509
+ "--blume-radius": `${theme.style.radius.panel}px`,
510
+ "--blume-font-body": fontStack(theme.style.font),
511
+ "--blume-font-display": fontStack(theme.style.font),
512
+ "--blume-font-mono": fontStack(theme.style.mono),
505
513
  };
506
514
 
507
515
  const lightTokens: Record<string, string> =