@navecss/tokens 0.1.0

package/tokens.json

@@ -0,0 +1,938 @@
+{
+  "$extensions": {
+    "dev.navecss.format": {
+      "targets": "This file is written to the Design Tokens Format Module 2025.10, a Final Community Group Report published on 28 October 2025. It is a community specification rather than a standards-track one, and nothing here claims conformance, certification or endorsement by anybody.",
+      "deviation": "This file is 90 of 93 conformant: 90 of the 93 tokens below conform to that revision. The three exceptions are letterSpacing.tight, letterSpacing.normal and letterSpacing.wide, which carry the unit em. The format closes a dimension's unit set at px and rem; em is lawful CSS and is the right unit for tracking, because it resolves against the element's own font size and so scales with the text it is tracking. Converting the three would change what renders, so the deviation is STATED here rather than the value converted. The cost is real and is stated with it: a strict third-party reader will reject those three. The limitation being deviated from is the token format's, not the platform's.",
+      "unitSetNote": "The reader accepts em for a dimension, beside the format's own px and rem, for exactly the three tokens above. Anything else about a dimension is read as the format defines it."
+    },
+    "dev.navecss.theming": {
+      "comment": "colour is no longer hand-authored in this file. The format has no notion of a derived token, so the seed binding and the step table live here under this namespaced extension; the actual generation, the achromatic branch, the semantic-slot mapping and the RCS formulas are computed by packages/tokens/src/theming/ (pipeline.ts et al.), never re-derived from this block by a second implementation. The build additionally emits a resolved palette record as an artifact (dist/palette-record.json), which is a record of what was built and is not a token document in this format. This block is a DECLARATION, not executable: it records what the shipped defaults ARE, for a reader of the source, and the generator is the single source of truth for how they are computed.",
+      "seeds": {
+        "primary": {
+          "oklch": [0.7859, 0.1316, 186.17],
+          "note": "brand teal, fixed 2026-08-10"
+        },
+        "danger": {
+          "oklch": [0.6357, 0.2072, 15.02],
+          "note": "fixed 2026-08-12"
+        }
+      },
+      "stepTable": "see packages/tokens/src/theming/step-table.ts — 15 rows, 0 to 1000, the 850 row at L 0.225",
+      "achromaticBranch": "an exactly-zero-chroma primary seed is a legal input, not an error: it selects the achromatic branch, under which action.primary and its hover and active states, on-action.primary, content.link and border.focus all resolve against the neutral ramp rather than the chroma-zero primary ramp. The values are computed by packages/tokens/src/theming/, never read from this block.",
+      "adjacency": {
+        "comment": "Each subject's legal partners: the contract for which colour pairs this package documents and checks a contrast floor for. packages/tokens/src/theming/adjacency-source.ts materializes this block into its ADJACENCY export at build time, and the contrast harness and any published pair documentation read that export rather than this block, so a second implementation cannot drift from it. This list is a MINIMUM, not the full slot cross-product: a pair that is not here is documented nowhere and is promised nothing. Removing an entry is therefore not a local edit, it changes what this project documents; if an entry looks wrong, open an issue rather than deleting it here. No contrast conclusion is drawn from this data and none may be read out of it: a floor or an admissible window is not something this file records.",
+        "content.primary": [
+          {
+            "against": "surface.base",
+            "class": "text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "text"
+          },
+          {
+            "against": "surface.sunken",
+            "class": "text"
+          }
+        ],
+        "content.secondary": [
+          {
+            "against": "surface.base",
+            "class": "text"
+          }
+        ],
+        "content.tertiary": [
+          {
+            "against": "surface.base",
+            "class": "text"
+          },
+          {
+            "against": "surface.sunken",
+            "class": "text"
+          }
+        ],
+        "content.inverse": [
+          {
+            "against": "surface.inverse",
+            "class": "text"
+          }
+        ],
+        "action.secondary.foreground": [
+          {
+            "against": "action.secondary",
+            "class": "text"
+          }
+        ],
+        "content.link": [
+          {
+            "against": "surface.base",
+            "class": "text"
+          }
+        ],
+        "on-action.primary": [
+          {
+            "against": "action.primary",
+            "class": "text"
+          },
+          {
+            "against": "action.primary.hover",
+            "class": "text"
+          },
+          {
+            "against": "action.primary.active",
+            "class": "text"
+          }
+        ],
+        "on-feedback.danger": [
+          {
+            "against": "feedback.danger",
+            "class": "text"
+          }
+        ],
+        "on-feedback.warning": [
+          {
+            "against": "feedback.warning",
+            "class": "text"
+          }
+        ],
+        "on-feedback.success": [
+          {
+            "against": "feedback.success",
+            "class": "text"
+          }
+        ],
+        "on-feedback.info": [
+          {
+            "against": "feedback.info",
+            "class": "text"
+          }
+        ],
+        "border.control": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.sunken",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.inverse",
+            "class": "non-text"
+          }
+        ],
+        "border.focus": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.raised",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.overlay",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.sunken",
+            "class": "non-text"
+          },
+          {
+            "against": "surface.inverse",
+            "class": "non-text"
+          }
+        ],
+        "action.primary": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          }
+        ],
+        "feedback.danger": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          }
+        ],
+        "feedback.warning": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          }
+        ],
+        "feedback.danger.foreground": [
+          {
+            "against": "surface.base",
+            "class": "non-text"
+          }
+        ]
+      }
+    }
+  },
+  "_primitive": {
+    "space": {
+      "0": {
+        "$value": {
+          "value": 0,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "1": {
+        "$value": {
+          "value": 4,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "2": {
+        "$value": {
+          "value": 8,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "3": {
+        "$value": {
+          "value": 12,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "4": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "6": {
+        "$value": {
+          "value": 24,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "8": {
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "12": {
+        "$value": {
+          "value": 48,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "16": {
+        "$value": {
+          "value": 64,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "24": {
+        "$value": {
+          "value": 96,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      },
+      "32": {
+        "$value": {
+          "value": 128,
+          "unit": "px"
+        },
+        "$type": "dimension"
+      }
+    }
+  },
+  "font": {
+    "family": {
+      "base": {
+        "$value": ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        "$type": "fontFamily",
+        "$description": "Body / UI typeface"
+      },
+      "display": {
+        "$value": ["system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
+        "$type": "fontFamily",
+        "$description": "Heading typeface — swap for a display font when ready"
+      },
+      "mono": {
+        "$value": ["ui-monospace", "Cascadia Code", "Source Code Pro", "Menlo", "monospace"],
+        "$type": "fontFamily",
+        "$description": "Code / monospace typeface"
+      }
+    },
+    "size": {
+      "xs": {
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": {
+          "value": 0.875,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Base body size (16px default)"
+      },
+      "lg": {
+        "$value": {
+          "value": 1.125,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "xl": {
+        "$value": {
+          "value": 1.25,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "2xl": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "3xl": {
+        "$value": {
+          "value": 1.875,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "4xl": {
+        "$value": {
+          "value": 2.25,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      }
+    },
+    "weight": {
+      "regular": {
+        "$value": 400,
+        "$type": "fontWeight"
+      },
+      "medium": {
+        "$value": 500,
+        "$type": "fontWeight"
+      },
+      "semibold": {
+        "$value": 600,
+        "$type": "fontWeight"
+      },
+      "bold": {
+        "$value": 700,
+        "$type": "fontWeight"
+      }
+    }
+  },
+  "lineHeight": {
+    "none": {
+      "$value": 1,
+      "$type": "number",
+      "$description": "Single-line / icon buttons — no extra leading"
+    },
+    "tight": {
+      "$value": 1.2,
+      "$type": "number",
+      "$description": "Headings"
+    },
+    "snug": {
+      "$value": 1.375,
+      "$type": "number"
+    },
+    "base": {
+      "$value": 1.5,
+      "$type": "number",
+      "$description": "Default body line height"
+    },
+    "relaxed": {
+      "$value": 1.625,
+      "$type": "number"
+    },
+    "loose": {
+      "$value": 2,
+      "$type": "number"
+    }
+  },
+  "letterSpacing": {
+    "tight": {
+      "$value": {
+        "value": -0.025,
+        "unit": "em"
+      },
+      "$type": "dimension",
+      "$description": "Large headings and display text"
+    },
+    "normal": {
+      "$value": {
+        "value": 0,
+        "unit": "em"
+      },
+      "$type": "dimension",
+      "$description": "Default — no adjustment"
+    },
+    "wide": {
+      "$value": {
+        "value": 0.075,
+        "unit": "em"
+      },
+      "$type": "dimension",
+      "$description": "Uppercase labels, small caps"
+    }
+  },
+  "spacing": {
+    "content": {
+      "xs": {
+        "$value": "{_primitive.space.1}",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": "{_primitive.space.2}",
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": "{_primitive.space.4}",
+        "$type": "dimension",
+        "$description": "Default component gap and padding"
+      },
+      "lg": {
+        "$value": "{_primitive.space.6}",
+        "$type": "dimension"
+      },
+      "xl": {
+        "$value": "{_primitive.space.8}",
+        "$type": "dimension"
+      }
+    },
+    "layout": {
+      "xs": {
+        "$value": "{_primitive.space.12}",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": "{_primitive.space.16}",
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": "{_primitive.space.24}",
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": "{_primitive.space.32}",
+        "$type": "dimension"
+      }
+    },
+    "control": {
+      "$description": "Internal padding inside interactive controls: buttons, inputs, selects",
+      "xs": {
+        "$value": "{_primitive.space.1}",
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        },
+        "$type": "dimension",
+        "$description": "No matching _primitive.space rung; authored directly"
+      },
+      "md": {
+        "$value": "{_primitive.space.2}",
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": "{_primitive.space.3}",
+        "$type": "dimension"
+      }
+    }
+  },
+  "size": {
+    "control": {
+      "xs": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Compact/dense controls"
+      },
+      "sm": {
+        "$value": {
+          "value": 2,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Small controls"
+      },
+      "md": {
+        "$value": {
+          "value": 2.5,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Default control height"
+      },
+      "lg": {
+        "$value": {
+          "value": 3,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Large controls"
+      }
+    },
+    "icon": {
+      "xs": {
+        "$value": {
+          "value": 0.75,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "sm": {
+        "$value": {
+          "value": 1,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": {
+          "value": 1.25,
+          "unit": "rem"
+        },
+        "$type": "dimension",
+        "$description": "Default inline icon"
+      },
+      "lg": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "xl": {
+        "$value": {
+          "value": 2,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      }
+    },
+    "avatar": {
+      "sm": {
+        "$value": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "md": {
+        "$value": {
+          "value": 2,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      },
+      "lg": {
+        "$value": {
+          "value": 3,
+          "unit": "rem"
+        },
+        "$type": "dimension"
+      }
+    }
+  },
+  "borderWidth": {
+    "none": {
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      },
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Default border / divider"
+    },
+    "focus": {
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Focus ring indicator outline width"
+    },
+    "lg": {
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
+      "$type": "dimension"
+    }
+  },
+  "radius": {
+    "none": {
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      },
+      "$type": "dimension"
+    },
+    "sm": {
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      },
+      "$type": "dimension"
+    },
+    "control": {
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Inputs, buttons, tags"
+    },
+    "card": {
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Cards, panels, dialogs"
+    },
+    "overlay": {
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Modals, drawers, sheets"
+    },
+    "full": {
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      },
+      "$type": "dimension",
+      "$description": "Pill / badge shape"
+    }
+  },
+  "shadow": {
+    "none": {
+      "$value": [],
+      "$type": "shadow",
+      "$description": "No elevation"
+    },
+    "raised": {
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0.0625,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 0.1875,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.08
+          }
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0.0625,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 0.125,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.06
+          }
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Cards, slight elevation above base"
+    },
+    "overlay": {
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0.25,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 0.75,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.1
+          }
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0.125,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 0.375,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.08
+          }
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Popovers, dropdowns, floating elements"
+    },
+    "modal": {
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 2,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.15
+          }
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 0.5,
+            "unit": "rem"
+          },
+          "blur": {
+            "value": 1,
+            "unit": "rem"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": {
+            "colorSpace": "oklch",
+            "components": [0, 0, 0],
+            "alpha": 0.1
+          }
+        }
+      ],
+      "$type": "shadow",
+      "$description": "Dialogs and modals — highest elevation"
+    }
+  },
+  "opacity": {
+    "disabled": {
+      "$value": 0.4,
+      "$type": "number",
+      "$description": "Opacity multiplier for muting content that is inert and contains nothing focusable (e.g. a disabled icon or illustration). Nave's own interactive-disabled state is expressed through content.disabled and border.disabled instead, not this token: opacity composites everything an element paints, including a focus indicator inside it."
+    }
+  },
+  "layer": {
+    "base": {
+      "$value": 0,
+      "$type": "number",
+      "$description": "Default document flow"
+    },
+    "dropdown": {
+      "$value": 100,
+      "$type": "number",
+      "$description": "Dropdowns, context menus, select panels"
+    },
+    "sticky": {
+      "$value": 200,
+      "$type": "number",
+      "$description": "Sticky headers, floating toolbars"
+    },
+    "overlay": {
+      "$value": 300,
+      "$type": "number",
+      "$description": "Backdrop overlays behind modals"
+    },
+    "modal": {
+      "$value": 400,
+      "$type": "number",
+      "$description": "Modal dialogs and drawers"
+    },
+    "toast": {
+      "$value": 500,
+      "$type": "number",
+      "$description": "Toast notifications and snackbars"
+    },
+    "tooltip": {
+      "$value": 600,
+      "$type": "number",
+      "$description": "Tooltips — always on top of everything"
+    }
+  },
+  "motion": {
+    "duration": {
+      "instant": {
+        "$value": {
+          "value": 0,
+          "unit": "ms"
+        },
+        "$type": "duration",
+        "$description": "No animation — kept at 0ms even under prefers-reduced-motion"
+      },
+      "fast": {
+        "$value": {
+          "value": 100,
+          "unit": "ms"
+        },
+        "$type": "duration",
+        "$description": "Micro-interactions: tooltips, badges"
+      },
+      "base": {
+        "$value": {
+          "value": 200,
+          "unit": "ms"
+        },
+        "$type": "duration",
+        "$description": "Default state transitions: hover, focus"
+      },
+      "slow": {
+        "$value": {
+          "value": 400,
+          "unit": "ms"
+        },
+        "$type": "duration",
+        "$description": "Layout shifts: accordion, drawer"
+      }
+    },
+    "easing": {
+      "standard": {
+        "$value": [0.4, 0, 0.2, 1],
+        "$type": "cubicBezier",
+        "$description": "General-purpose — enters and exits"
+      },
+      "decelerate": {
+        "$value": [0, 0, 0.2, 1],
+        "$type": "cubicBezier",
+        "$description": "Elements entering the screen"
+      },
+      "accelerate": {
+        "$value": [0.4, 0, 1, 1],
+        "$type": "cubicBezier",
+        "$description": "Elements leaving the screen"
+      }
+    }
+  },
+  "breakpoint": {
+    "tablet-portrait": {
+      "$value": 600,
+      "$type": "number",
+      "$description": "The boundary between phone and tablet-portrait. Stored as px, output as em (37.5em). Used as min-width for tablet-portrait-up and as the exclusive upper bound for phone-only."
+    },
+    "tablet-landscape": {
+      "$value": 900,
+      "$type": "number",
+      "$description": "The boundary between tablet-portrait and tablet-landscape. Stored as px, output as em (56.25em)."
+    },
+    "desktop": {
+      "$value": 1200,
+      "$type": "number",
+      "$description": "The boundary between tablet-landscape and desktop. Stored as px, output as em (75em)."
+    },
+    "wide": {
+      "$value": 1800,
+      "$type": "number",
+      "$description": "The boundary for wide screens. Stored as px, output as em (112.5em)."
+    }
+  }
+}