@nxds/core 0.7.2 → 0.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.
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @nxds/core
2
2
 
3
- The framework-agnostic engine behind Nexus Appearance: appearance model, runtime theme derivation, and first-paint snapshots. Use it directly for non-React targets like Electron, React Native, or native shells, or via `@nxds/react/appearance` in React apps. It also contains the design tokens in DTCG format and CSS generation documented below.
3
+ The framework-agnostic engine behind nxds Appearance: appearance model, runtime theme derivation, and first-paint snapshots. Use it directly for non-React targets like Electron, React Native, or native shells, or via `@nxds/react/appearance` in React apps. It also contains the design tokens in DTCG format and CSS generation documented below.
4
4
 
5
5
  ## Install
6
6
 
@@ -10,17 +10,17 @@ pnpm add @nxds/core
10
10
 
11
11
  ## Primary Exports
12
12
 
13
- - `DEFAULT_NEXUS_APPEARANCE`, `sanitizeNexusAppearance`, `NexusAppearanceState`: the appearance model.
13
+ - `DEFAULT_NXDS_APPEARANCE`, `sanitizeNxdsAppearance`, `NxdsAppearanceState`: the appearance model.
14
14
  - `BRAND_COLOR_PRESETS`, `BrandColorPreset`, `findBrandColorPreset`, `DEFAULT_BRAND_COLOR`: brand color choices for appearance editors. Default is `DEFAULT_BRAND_COLOR`; Indigo, Blue, Violet, Rose, Orange, Amber, Green, and Teal use each family's authored 600 hex. Assign a preset's `color` to `brandColor`; `findBrandColorPreset(brandColor)` returns the preset an opaque saved color matches in any CSS notation the engine parses (`#4F46E5`, `4f46e5`, `rgb(79 70 229)`), ignoring surrounding whitespace, or `undefined` for a custom or unparseable color.
15
- - `createNexusThemeContract`, `deriveTheme`, `themeToCss`: derive a full token set from appearance state and render it to CSS.
15
+ - `createNxdsThemeContract`, `deriveTheme`, `themeToCss`: derive a full token set from appearance state and render it to CSS.
16
16
  - `measureThemeContrast`, `ThemeContrastCheck`, `Mode`, `Tier`: measure a derived theme against every registered APCA pair. See [Contrast report](#contrast-report).
17
- - `createNexusAppearanceSnapshotFromState`, `createNexusAppearanceBootstrapScript`, `resolveFirstPaint`, `DEFAULT_STORAGE_KEY`: first-paint, no-flash bootstrap.
17
+ - `createNxdsAppearanceSnapshotFromState`, `createNxdsAppearanceBootstrapScript`, `resolveFirstPaint`, `DEFAULT_STORAGE_KEY`: first-paint, no-flash bootstrap.
18
18
 
19
19
  ## Advanced / Engine Exports
20
20
 
21
21
  `adjustContrast`, `PALETTE_KEYS`, `TIER_THRESHOLDS`, `isColor`: low-level palette and contrast utilities. Stability is not guaranteed pre-1.0.
22
22
 
23
- See the Nexus docs, Theming -> Appearance, for setup recipes.
23
+ See the nxds docs, Theming -> Appearance, for setup recipes.
24
24
 
25
25
  ## Contrast report
26
26
 
@@ -28,14 +28,14 @@ See the Nexus docs, Theming -> Appearance, for setup recipes.
28
28
 
29
29
  ```ts
30
30
  import {
31
- createNexusThemeContract,
32
- DEFAULT_NEXUS_APPEARANCE,
31
+ createNxdsThemeContract,
32
+ DEFAULT_NXDS_APPEARANCE,
33
33
  deriveTheme,
34
34
  measureThemeContrast,
35
35
  } from '@nxds/core';
36
36
 
37
37
  const checks = measureThemeContrast(
38
- deriveTheme(createNexusThemeContract(DEFAULT_NEXUS_APPEARANCE))
38
+ deriveTheme(createNxdsThemeContract(DEFAULT_NXDS_APPEARANCE))
39
39
  );
40
40
  const failing = checks.filter((check) => !check.pass);
41
41
  ```
@@ -77,20 +77,20 @@ Use the engine directly when a host shell owns DOM or native styling.
77
77
 
78
78
  ```ts
79
79
  import {
80
- createNexusAppearanceSnapshotFromState,
81
- createNexusThemeContract,
82
- DEFAULT_NEXUS_APPEARANCE,
80
+ createNxdsAppearanceSnapshotFromState,
81
+ createNxdsThemeContract,
82
+ DEFAULT_NXDS_APPEARANCE,
83
83
  deriveTheme,
84
84
  resolveFirstPaint,
85
85
  themeToCss,
86
86
  } from '@nxds/core';
87
87
 
88
88
  const state = {
89
- ...DEFAULT_NEXUS_APPEARANCE,
89
+ ...DEFAULT_NXDS_APPEARANCE,
90
90
  brandColor: '#2563eb',
91
91
  surfaceTone: 'slate',
92
92
  };
93
- const snapshot = createNexusAppearanceSnapshotFromState(state);
93
+ const snapshot = createNxdsAppearanceSnapshotFromState(state);
94
94
  const firstPaint = resolveFirstPaint(snapshot, false);
95
95
  const themeStyle =
96
96
  document.querySelector<HTMLStyleElement>('style[data-theme]') ??
@@ -102,7 +102,7 @@ document.documentElement.classList.toggle(
102
102
  firstPaint.className === 'dark'
103
103
  );
104
104
  themeStyle.textContent = themeToCss(
105
- deriveTheme(createNexusThemeContract(snapshot.state))
105
+ deriveTheme(createNxdsThemeContract(snapshot.state))
106
106
  );
107
107
  ```
108
108
 
@@ -155,7 +155,7 @@ Generated global CSS sets the native browser UI policy alongside the tokens: `:r
155
155
  ## Reference Resolution
156
156
 
157
157
  Semantic **color** is produced by the engine (`deriveTheme`), not authored as
158
- JSON. The build bakes each derived value into `nexus.css` as a `@theme inline`
158
+ JSON. The build bakes each derived value into `nxds.css` as a `@theme inline`
159
159
  fallback that still accepts a runtime override:
160
160
 
161
161
  ```css
@@ -178,7 +178,7 @@ pnpm tokens:tailwind # From the repo root: build core and generate @nxds/ta
178
178
 
179
179
  ### Output Files
180
180
 
181
- - `../tailwind/nexus.css` - Main Tailwind theme with `nx:` prefix
181
+ - `../tailwind/nxds.css` - Main Tailwind theme with `nx:` prefix
182
182
  - `../tailwind/variables.css` - Primitive CSS variables with `--nx-*` prefix
183
183
 
184
184
  ## Future Platform Support
@@ -1107,7 +1107,7 @@ var STROKE_OPTIONS = [
1107
1107
  { value: "normal", label: "Normal" },
1108
1108
  { value: "strong", label: "Strong" }
1109
1109
  ];
1110
- var DEFAULT_NEXUS_APPEARANCE = {
1110
+ var DEFAULT_NXDS_APPEARANCE = {
1111
1111
  mode: "light",
1112
1112
  brandColor: DEFAULT_BRAND_COLOR,
1113
1113
  surfaceTone: "zinc",
@@ -1142,7 +1142,7 @@ var ELEVATIONS = new Set(
1142
1142
  var STROKES = new Set(
1143
1143
  STROKE_OPTIONS.map((option) => option.value)
1144
1144
  );
1145
- function createNexusThemeContract(state) {
1145
+ function createNxdsThemeContract(state) {
1146
1146
  const tone = BASE_TONE_SEEDS[state.surfaceTone];
1147
1147
  return {
1148
1148
  surfaceTone: state.surfaceTone,
@@ -8820,7 +8820,7 @@ var shadow_strong_light_default = {
8820
8820
 
8821
8821
  // tokens/semantic/breakpoints.json
8822
8822
  var breakpoints_default = {
8823
- $description: "Responsive breakpoints (rem). Values match Tailwind v4's own defaults exactly \u2014 Nexus declares them explicitly so they fall under the same reset-and-own discipline as every other namespace (color/spacing/radius/shadow) instead of being inherited implicitly. Tailwind v4 auto-discovers --breakpoint-* from @theme and uses them to generate the nx:sm:\u2026nx:2xl: responsive variants. Override at BUILD TIME by re-declaring a value in a consumer @theme block \u2014 NOT at runtime: @media cannot read var(), so Tailwind bakes the resolved value into the generated media queries at build time.",
8823
+ $description: "Responsive breakpoints (rem). Values match Tailwind v4's own defaults exactly \u2014 nxds declares them explicitly so they fall under the same reset-and-own discipline as every other namespace (color/spacing/radius/shadow) instead of being inherited implicitly. Tailwind v4 auto-discovers --breakpoint-* from @theme and uses them to generate the nx:sm:\u2026nx:2xl: responsive variants. Override at BUILD TIME by re-declaring a value in a consumer @theme block \u2014 NOT at runtime: @media cannot read var(), so Tailwind bakes the resolved value into the generated media queries at build time.",
8824
8824
  "breakpoint-sm": {
8825
8825
  $value: {
8826
8826
  value: 40,
@@ -11167,8 +11167,8 @@ function styleLeaves(family, file) {
11167
11167
  }
11168
11168
  function runtimeAppearance(mode) {
11169
11169
  return {
11170
- ...DEFAULT_NEXUS_APPEARANCE,
11171
- prefs: { ...DEFAULT_NEXUS_APPEARANCE.prefs },
11170
+ ...DEFAULT_NXDS_APPEARANCE,
11171
+ prefs: { ...DEFAULT_NXDS_APPEARANCE.prefs },
11172
11172
  mode
11173
11173
  };
11174
11174
  }
@@ -11186,7 +11186,7 @@ function runtimeColorTokens() {
11186
11186
  return {
11187
11187
  mode,
11188
11188
  appearance,
11189
- values: deriveThemeMode(createNexusThemeContract(appearance), mode)
11189
+ values: deriveThemeMode(createNxdsThemeContract(appearance), mode)
11190
11190
  };
11191
11191
  });
11192
11192
  return SEMANTIC_TOKEN_REGISTRY.map(({ name, category }) => {