@nxds/core 0.10.0 → 0.11.0

package/dist/runtime/index.d.cts

@@ -172,7 +172,7 @@ interface ThemeContrastCheck {
 /** Measure every registered APCA pair of a derived theme in both modes. */
 declare function measureThemeContrast(theme: DerivedTheme): ThemeContrastCheck[];
 
-type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'focus' | 'alpha';
+type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'syntax' | 'focus' | 'alpha';
 interface SemanticTokenMeta {
     /** Bare token name, without the --nx-color- prefix. */
     name: SemanticColorName;
@@ -184,10 +184,11 @@ declare const BORDER_TOKEN_NAMES: readonly ["border-default", "border-disabled",
 declare const BRAND_TOKEN_NAMES: readonly ["primary-background", "primary-background-hover", "primary-background-active", "primary-foreground", "primary-disabled", "primary-subtle", "primary-subtle-foreground", "primary-subtle-hover", "primary-subtle-active", "primary-border", "primary-border-active", "secondary-background", "secondary-background-hover", "secondary-background-active", "secondary-foreground", "secondary-disabled", "secondary-subtle", "secondary-subtle-foreground", "secondary-subtle-hover", "secondary-subtle-active"];
 declare const STATUS_TOKEN_NAMES: readonly ["success-background", "success-background-hover", "success-background-active", "success-foreground", "success-disabled", "success-subtle", "success-subtle-foreground", "success-subtle-hover", "success-subtle-active", "success-border", "border-success-active", "warning-background", "warning-background-hover", "warning-background-active", "warning-foreground", "warning-disabled", "warning-subtle", "warning-subtle-foreground", "warning-subtle-hover", "warning-subtle-active", "warning-border", "border-warning-active", "error-background", "error-background-hover", "error-background-active", "error-foreground", "error-disabled", "error-subtle", "error-subtle-foreground", "error-subtle-hover", "error-subtle-active", "error-border", "border-error-active", "information-background", "information-background-hover", "information-background-active", "information-foreground", "information-disabled", "information-subtle", "information-subtle-foreground", "information-subtle-hover", "information-subtle-active", "information-border", "border-information-active"];
 declare const CHART_TOKEN_NAMES: readonly ["chart-categorical-1", "chart-categorical-2", "chart-categorical-3", "chart-categorical-4", "chart-categorical-5"];
+declare const SYNTAX_TOKEN_NAMES: readonly ["syntax-keyword", "syntax-string", "syntax-function", "syntax-type", "syntax-constant"];
 declare const FOCUS_TOKEN_NAMES: readonly ["focus-default", "focus-error"];
 declare const ALPHA_TOKEN_NAMES: readonly ["background-hover-alpha", "border-default-alpha", "overlay", "popover-alpha", "popover-backdrop"];
 /** Bare name of every semantic colour token, without the --nx-color- prefix. */
-type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
+type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof SYNTAX_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
 declare const SEMANTIC_TOKEN_REGISTRY: readonly SemanticTokenMeta[];
 
 export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_STORAGE_KEY, DerivedTheme, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsResolvedAppearanceMode, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, watchColorScheme };

package/dist/runtime/index.d.ts

@@ -172,7 +172,7 @@ interface ThemeContrastCheck {
 /** Measure every registered APCA pair of a derived theme in both modes. */
 declare function measureThemeContrast(theme: DerivedTheme): ThemeContrastCheck[];
 
-type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'focus' | 'alpha';
+type TokenCategory = 'surface' | 'text' | 'border' | 'brand' | 'status' | 'chart' | 'syntax' | 'focus' | 'alpha';
 interface SemanticTokenMeta {
     /** Bare token name, without the --nx-color- prefix. */
     name: SemanticColorName;
@@ -184,10 +184,11 @@ declare const BORDER_TOKEN_NAMES: readonly ["border-default", "border-disabled",
 declare const BRAND_TOKEN_NAMES: readonly ["primary-background", "primary-background-hover", "primary-background-active", "primary-foreground", "primary-disabled", "primary-subtle", "primary-subtle-foreground", "primary-subtle-hover", "primary-subtle-active", "primary-border", "primary-border-active", "secondary-background", "secondary-background-hover", "secondary-background-active", "secondary-foreground", "secondary-disabled", "secondary-subtle", "secondary-subtle-foreground", "secondary-subtle-hover", "secondary-subtle-active"];
 declare const STATUS_TOKEN_NAMES: readonly ["success-background", "success-background-hover", "success-background-active", "success-foreground", "success-disabled", "success-subtle", "success-subtle-foreground", "success-subtle-hover", "success-subtle-active", "success-border", "border-success-active", "warning-background", "warning-background-hover", "warning-background-active", "warning-foreground", "warning-disabled", "warning-subtle", "warning-subtle-foreground", "warning-subtle-hover", "warning-subtle-active", "warning-border", "border-warning-active", "error-background", "error-background-hover", "error-background-active", "error-foreground", "error-disabled", "error-subtle", "error-subtle-foreground", "error-subtle-hover", "error-subtle-active", "error-border", "border-error-active", "information-background", "information-background-hover", "information-background-active", "information-foreground", "information-disabled", "information-subtle", "information-subtle-foreground", "information-subtle-hover", "information-subtle-active", "information-border", "border-information-active"];
 declare const CHART_TOKEN_NAMES: readonly ["chart-categorical-1", "chart-categorical-2", "chart-categorical-3", "chart-categorical-4", "chart-categorical-5"];
+declare const SYNTAX_TOKEN_NAMES: readonly ["syntax-keyword", "syntax-string", "syntax-function", "syntax-type", "syntax-constant"];
 declare const FOCUS_TOKEN_NAMES: readonly ["focus-default", "focus-error"];
 declare const ALPHA_TOKEN_NAMES: readonly ["background-hover-alpha", "border-default-alpha", "overlay", "popover-alpha", "popover-backdrop"];
 /** Bare name of every semantic colour token, without the --nx-color- prefix. */
-type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
+type SemanticColorName = (typeof SURFACE_TOKEN_NAMES)[number] | (typeof TEXT_TOKEN_NAMES)[number] | (typeof BORDER_TOKEN_NAMES)[number] | (typeof BRAND_TOKEN_NAMES)[number] | (typeof STATUS_TOKEN_NAMES)[number] | (typeof CHART_TOKEN_NAMES)[number] | (typeof SYNTAX_TOKEN_NAMES)[number] | (typeof FOCUS_TOKEN_NAMES)[number] | (typeof ALPHA_TOKEN_NAMES)[number];
 declare const SEMANTIC_TOKEN_REGISTRY: readonly SemanticTokenMeta[];
 
 export { type AdjustContrastOptions, type AdjustContrastPalette, type AdjustContrastTier, BRAND_COLOR_PRESETS, type BrandColorPreset, DEFAULT_COOKIE_KEY, DEFAULT_STORAGE_KEY, DerivedTheme, Mode, NXDS_APPEARANCE_COOKIE_MAX_AGE_SECONDS, NXDS_APPEARANCE_DATA_ATTRS, type NxdsAppearanceBootstrapScriptOptions, type NxdsAppearanceCookieOptions, type NxdsAppearanceCookieSameSite, type NxdsAppearanceDataAttr, type NxdsAppearancePersistOptions, type NxdsAppearanceSnapshot, NxdsAppearanceState, type NxdsAppearanceStateCookie, type NxdsFirstPaintResolution, type NxdsResolvedAppearanceMode, RUNTIME_LAYER_ORDER, SEMANTIC_TOKEN_REGISTRY, SNAPSHOT_VERSION, type SemanticColorName, type SemanticTokenMeta, type ThemeContrastCheck, Tier, type TokenCategory, adjustContrast, apcaLc, applyNxdsAppearance, createDefaultNxdsAppearanceSnapshot, createNxdsAppearanceBootstrapScript, createNxdsAppearanceSnapshot, createNxdsAppearanceSnapshotFromCookie, createNxdsAppearanceSnapshotFromState, createNxdsAppearanceStateCookie, findBrandColorPreset, isColor, measureThemeContrast, parseNxdsAppearanceStateCookie, persistNxdsAppearance, prefersDarkColorScheme, readStoredNxdsAppearance, removeNxdsAppearance, resolveFirstPaint, resolveNxdsAppearanceMode, sanitizeNxdsAppearanceSnapshot, serializeNxdsAppearanceStateCookie, watchColorScheme };

package/dist/runtime/index.js

@@ -2231,6 +2231,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 = [
@@ -2245,6 +2252,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",
@@ -2304,11 +2313,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) => [
@@ -4389,6 +4410,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";
@@ -4504,6 +4533,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,
@@ -4936,6 +4966,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",
@@ -4954,6 +4991,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)
 ];