@nxds/core 0.10.0 → 0.12.0

package/dist/runtime/catalogue.cjs

@@ -437,6 +437,13 @@ var CHART_PALETTE_REFERENCES = [
   { palette: "rose", light: "600", dark: "200" },
   { palette: "indigo", light: "600", dark: "200" }
 ];
+var SYNTAX_PALETTE_REFERENCES = {
+  keyword: CHART_PALETTE_REFERENCES[3],
+  string: CHART_PALETTE_REFERENCES[1],
+  function: CHART_PALETTE_REFERENCES[4],
+  type: CHART_PALETTE_REFERENCES[0],
+  constant: CHART_PALETTE_REFERENCES[2]
+};
 
 // src/lib/apca-pairs.ts
 var COLOR_FAMILIES = [
@@ -451,6 +458,8 @@ var CATEGORICAL_INDICES = CHART_PALETTE_REFERENCES.map(
   (_, index) => index + 1
 );
 var CHART_STAGGER_LC = 4.5;
+var DIFF_SURFACES = ["success-subtle", "error-subtle"];
+var CODE_SURFACES = ["container", "container-hover", ...DIFF_SURFACES];
 var FOCUS_SURFACES = [
   "background",
   "container",
@@ -510,11 +519,23 @@ var APCA_PAIRS = [
     ink(`${family}-subtle-foreground`, `${family}-subtle-active`, "ui")
   ]),
   ...CATEGORICAL_INDICES.flatMap(
-    (index) => ["container", "background"].map((bg) => ({
+    (index) => ["container", "container-hover", "background"].map((bg) => ({
       ...ink(`chart-categorical-${index}`, bg, "ui"),
       offset: (index - 1) * CHART_STAGGER_LC
     }))
   ),
+  ...CODE_SURFACES.flatMap(
+    (bg) => Object.keys(SYNTAX_PALETTE_REFERENCES).map(
+      (role) => ink(`syntax-${role}`, bg, "ui")
+    )
+  ),
+  // codeBlockTheme also colours code with the text tokens, which already read
+  // on container and container-hover.
+  ...DIFF_SURFACES.flatMap((bg) => [
+    text("foreground", bg, "ui"),
+    text("muted-foreground", bg, "ui"),
+    text("muted-foreground-subtle", bg, "incidental")
+  ]),
   // Focus is the primary accent (components.md § Focus States), so it shares
   // one solved color with primary-subtle-foreground.
   ...FOCUS_SURFACES.flatMap((surface) => [
@@ -945,8 +966,10 @@ function rampFromSeed(seedHex, options = {}) {
 }
 
 // src/lib/contrast.ts
+var CONTRAST_MIN = 0;
+var CONTRAST_MAX = 100;
 function normalizeContrast(value, fallback = 50) {
-  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(0, Math.min(100, value))) : fallback;
+  return typeof value === "number" && Number.isFinite(value) ? Math.round(Math.max(CONTRAST_MIN, Math.min(CONTRAST_MAX, value))) : fallback;
 }
 function contrastTarget(tier, contrast) {
   return TIER_THRESHOLDS[tier] + 15 * contrast / 100;
@@ -1119,6 +1142,7 @@ var DEFAULT_NXDS_APPEARANCE = {
   stroke: "normal",
   prefs: {
     uiFont: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    headingFont: null,
     codeFont: 'ui-monospace, "SF Mono", Menlo, monospace',
     uiFontSize: 14,
     codeFontSize: 12,
@@ -2811,6 +2835,14 @@ function deriveChart(mode) {
     ])
   );
 }
+function deriveSyntax(mode) {
+  return Object.fromEntries(
+    Object.entries(SYNTAX_PALETTE_REFERENCES).map(([role, reference]) => [
+      `--nx-color-syntax-${role}`,
+      getPaletteShade(reference.palette, reference[mode])
+    ])
+  );
+}
 function deriveAlpha(surfaceTone, mode, profile) {
   const tone = SURFACE_TONE[surfaceTone];
   const dark = mode === "dark";
@@ -2926,6 +2958,7 @@ function deriveThemeMode(input, mode) {
     ...deriveSecondary(mode),
     ...deriveStatus(mode),
     ...deriveChart(mode),
+    ...deriveSyntax(mode),
     ...deriveAlpha(surfaceTone, mode, profile),
     "--nx-color-focus-error": getPaletteShade(
       STATUS_PALETTE_FAMILIES.error,
@@ -3057,6 +3090,13 @@ var CHART_TOKEN_NAMES = [
   "chart-categorical-4",
   "chart-categorical-5"
 ];
+var SYNTAX_TOKEN_NAMES = [
+  "syntax-keyword",
+  "syntax-string",
+  "syntax-function",
+  "syntax-type",
+  "syntax-constant"
+];
 var FOCUS_TOKEN_NAMES = ["focus-default", "focus-error"];
 var ALPHA_TOKEN_NAMES = [
   "background-hover-alpha",
@@ -3075,6 +3115,7 @@ var SEMANTIC_TOKEN_REGISTRY = [
   ...metas("brand", BRAND_TOKEN_NAMES),
   ...metas("status", STATUS_TOKEN_NAMES),
   ...metas("chart", CHART_TOKEN_NAMES),
+  ...metas("syntax", SYNTAX_TOKEN_NAMES),
   ...metas("focus", FOCUS_TOKEN_NAMES),
   ...metas("alpha", ALPHA_TOKEN_NAMES)
 ];
@@ -3245,7 +3286,7 @@ function formatTypographyDeclarations(tokenPath, value, primitiveMap) {
     const css = fieldValue === "auto" ? "normal" : resolveValue(fieldValue, primitiveMap);
     declarations.push({ property, value: css });
   }
-  if (tokenPath[0] === "heading") {
+  if (tokenPath[0] === "display" || tokenPath[0] === "heading") {
     declarations.push({ property: "text-wrap", value: "balance" });
   }
   if (tokenPath[0] === "body") {
@@ -3445,6 +3486,11 @@ var NEUTRAL_DESCRIPTIONS = {
   "chart-categorical-3": "Third chart series, on container or background.",
   "chart-categorical-4": "Fourth chart series, on container or background.",
   "chart-categorical-5": "Fifth chart series, on container or background.",
+  "syntax-keyword": "Keywords in code, such as const and return, on CodeBlock surfaces.",
+  "syntax-string": "Strings in code, on CodeBlock surfaces.",
+  "syntax-function": "Function and attribute names in code, on CodeBlock surfaces.",
+  "syntax-type": "Type, class and tag names in code, on CodeBlock surfaces.",
+  "syntax-constant": "Numbers and constants in code, on CodeBlock surfaces.",
   "focus-default": "Focus ring of every interactive control, on any surface.",
   "focus-error": "Focus ring of an invalid control.",
   "background-hover-alpha": "Translucent hover fill for controls that sit on an image or an unknown surface.",
@@ -10819,6 +10865,41 @@ var shadows_default = {
 
 // tokens/styles/typography.json
 var typography_default = {
+  display: {
+    large: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.5xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.5xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Largest display title \u2014 hero and landing-page section titles"
+    },
+    medium: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.4xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.4xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Display title one step below display-large, for page sections"
+    },
+    small: {
+      $type: "typography",
+      $value: {
+        fontFamily: "{family.font-heading}",
+        fontSize: "{size.3xl}",
+        fontWeight: "{weight.semibold}",
+        lineHeight: "{line-height.3xl}",
+        letterSpacing: "{letterspacing.tighter}"
+      },
+      $description: "Smallest display title \u2014 page-section titles in narrow layouts"
+    }
+  },
   heading: {
     large: {
       $type: "typography",
@@ -11039,6 +11120,7 @@ function typographyControl(path) {
   }
   if (group !== "family") return null;
   if (key === "font-sans") return { kind: "pref", field: "uiFont" };
+  if (key === "font-heading") return { kind: "pref", field: "headingFont" };
   if (key === "font-mono") return { kind: "pref", field: "codeFont" };
   return null;
 }