@talelk/newui-tokens 0.1.1 → 0.2.0

package/LICENSE

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talelk/newui-tokens",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "Framework-neutral design tokens (colors, radius, typography, spacing, elevation, focus).",
   "exports": {
@@ -16,9 +16,6 @@
   "files": [
     "src"
   ],
-  "scripts": {
-    "typecheck": "tsc --noEmit -p tsconfig.json"
-  },
   "sideEffects": false,
   "license": "Apache-2.0",
   "publishConfig": {
@@ -28,5 +25,8 @@
     "type": "git",
     "url": "git+https://github.com/talelk/newui.git",
     "directory": "packages/tokens"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit -p tsconfig.json"
   }
-}
+}

package/src/index.js

@@ -27,11 +27,28 @@
  * none may be renamed or removed.
  */
 
-import colorsData from './tokens/colors.js'
+import exportedColors from './tokens/colors.js'
 import effectsData from './tokens/effects.js'
+import * as instrument from './tokens/instrument.js'
 import radiusTokens from './tokens/radius.js'
 import typographyTokens from './tokens/typography.js'
 
+// The Figma export stays untouched; the instrument-panel layer replaces ramp
+// steps on a copy, before anything resolves against them (ADR-0016).
+const colorsData = {
+  ...exportedColors,
+  lightMode: withRamps(exportedColors.lightMode, instrument.ramps.lightMode),
+  darkMode: withRamps(exportedColors.darkMode, instrument.ramps.darkMode),
+}
+
+function withRamps(palette, overrides) {
+  const out = { ...palette }
+  for (const [family, steps] of Object.entries(overrides)) {
+    out[family] = { ...palette[family], ...steps }
+  }
+  return out
+}
+
 // ---------- COLORS ----------
 
 /**
@@ -95,6 +112,16 @@ export const semanticColors = {
 semanticColors.light.surface.scrim = colorsData.overlay.black[200]
 semanticColors.dark.surface.scrim = colorsData.overlay.black[700]
 
+// Instrument-panel semantic entries: the Mist frame (`surface-canvas`) behind
+// sheets, shared by the sidebar.
+for (const theme of ['light', 'dark']) {
+  for (const [category, entries] of Object.entries(
+    instrument.semantic[theme],
+  )) {
+    Object.assign(semanticColors[theme][category], entries)
+  }
+}
+
 // ---------- RADIUS ----------
 
 /**
@@ -108,9 +135,9 @@ semanticColors.dark.surface.scrim = colorsData.overlay.black[700]
  * recipe independently.
  */
 export const radiusRoles = {
-  control: radiusTokens[3],
-  card: radiusTokens[4],
-  overlay: radiusTokens[6],
+  control: instrument.radiusRoles.control,
+  card: instrument.radiusRoles.card,
+  overlay: instrument.radiusRoles.overlay,
   pill: radiusTokens.full,
 }
 
@@ -191,8 +218,8 @@ function toOutlines(layer) {
  * dark ones 3px, which is why this one does mode-swap and `shadows` does not.
  */
 export const focusRing = {
-  light: toOutlines(effectsData.focus.light),
-  dark: toOutlines(effectsData.focus.dark),
+  light: toOutlines({ ...effectsData.focus.light, ...instrument.focus.light }),
+  dark: toOutlines({ ...effectsData.focus.dark, ...instrument.focus.dark }),
 }
 
 // ---------- TYPOGRAPHY ----------
@@ -214,7 +241,7 @@ export const fontSize = buildFontSize()
 function buildFontSize() {
   const out = {}
   for (const [key, [size, meta]] of Object.entries(typographyTokens.fontSize)) {
-    out[key] = { fontSize: size, ...meta }
+    out[key] = { fontSize: size, ...meta, ...instrument.fontSize[key] }
   }
   // Only these two. The paragraph family is the text family at a looser
   // line-height with its own tracking, and nothing else. Spreading the whole
@@ -226,6 +253,7 @@ function buildFontSize() {
       ...out[key],
       lineHeight: p.lineHeight,
       letterSpacing: p.letterSpacing,
+      ...instrument.fontSize[`p-${key}`],
     }
   }
   return out
@@ -238,13 +266,34 @@ function buildFontSize() {
  */
 export const fontWeight = typographyTokens.fontWeight
 
-export const fontFamily = typographyTokens.fontFamily
+export const fontFamily = {
+  ...typographyTokens.fontFamily,
+  ...instrument.fontFamily,
+}
 
 /**
  * Letter-spacing per (size, weight), for the `text` and `paragraph` families
  * separately. The only token property that varies by weight.
  */
-export const tracking = typographyTokens.tracking
+export const tracking = retrack(typographyTokens.tracking)
+
+// Plex wants the size's own tracking at every weight: the export's per-weight
+// spread was tuned for Inter.
+function retrack(table) {
+  const out = {}
+  for (const [group, sizes] of Object.entries(table)) {
+    out[group] = {}
+    for (const [size, weights] of Object.entries(sizes)) {
+      const key = group === 'paragraph' ? `p-${size}` : size
+      const value = instrument.trackingFor(key)
+      out[group][size] =
+        value === undefined
+          ? weights
+          : Object.fromEntries(Object.keys(weights).map((w) => [w, value]))
+    }
+  }
+  return out
+}
 
 // ---------- SIZING ----------
 
@@ -289,8 +338,8 @@ export const layoutSpacing = {
   // tables already repeat numerically, so density retunes in one place.
   'menu-pad': '0.25rem',
   'dialog-pad': '1rem',
-  'table-cell-x': '1rem',
-  'table-cell-y': '0.5rem',
+  'table-cell-x': '0.625rem',
+  'table-cell-y': '0.25rem',
   'toolbar-pad': '0.5rem',
   stack: '1rem',
   inline: '0.5rem',

package/src/tokens/instrument.js

@@ -0,0 +1,155 @@
+/**
+ * The instrument-panel layer: the hand-authored retune that sits on top of the
+ * Figma export (`colors.js`, `radius.js`, `typography.js` stay generated and
+ * untouched — see ADR-0016).
+ *
+ * The kit is for people who spend the day inside records: dense tables,
+ * filters, forms. This layer encodes that brief as data:
+ *
+ * - a cool gray family (Mist frame, white Sheet for data, Graphite ink, Pewter
+ *   secondary ink, Rule hairlines) instead of the export's near-neutral gray;
+ * - the `blue` theme retuned to Petrol — the kit's one accent: primary
+ *   actions, focus, the active row;
+ * - IBM Plex Sans (one variable family; its condensed width serves narrow
+ *   columns, its default figures are tabular, so numbers align in columns);
+ * - a type scale one step tighter (13px interface text) with no positive
+ *   tracking, which suited Inter and only loosens Plex;
+ * - radius by role: 4px controls, 6px sheets, 8px overlays.
+ *
+ * Every value is a replacement for a name that already exists, except
+ * `surface.canvas` (the frame behind sheets) — the token surface stays
+ * additive-only (ADR-0010).
+ */
+
+/** Ramp steps replaced in the exported palettes, per theme. */
+export const ramps = {
+  lightMode: {
+    gray: {
+      50: 'oklch(0.976 0.003 264.5)', // #F6F7F9
+      100: 'oklch(0.954 0.005 247.9)', // #EDF0F3 Mist
+      200: 'oklch(0.923 0.008 253.9)', // #E2E6EB
+      300: 'oklch(0.883 0.012 252.1)', // #D3D9E0 Rule
+      400: 'oklch(0.791 0.017 250.9)', // #B3BCC6
+      500: 'oklch(0.665 0.023 252.6)', // #8A95A2
+      600: 'oklch(0.612 0.025 254.5)', // #7A8593 muted tier, kept under AA
+      700: 'oklch(0.489 0.028 256.2)', // #566170 Pewter
+      800: 'oklch(0.364 0.024 255.7)', // #363F4B
+      900: 'oklch(0.241 0.024 256.4)', // #18202B Graphite
+      950: 'oklch(0.189 0.019 255.8)', // #0E141C
+    },
+    blue: {
+      50: 'oklch(0.968 0.009 214.3)', // #EEF6F8
+      100: 'oklch(0.933 0.018 218.4)', // #DCECF1
+      200: 'oklch(0.869 0.034 217.8)', // #BCDAE3
+      300: 'oklch(0.778 0.056 218.7)', // #8FC0CF
+      400: 'oklch(0.668 0.076 219.7)', // #5BA0B5
+      500: 'oklch(0.558 0.087 221.8)', // #2C7F98
+      600: 'oklch(0.492 0.085 223.3)', // #176B84
+      700: 'oklch(0.443 0.079 224.9)', // #0E5C74 Petrol
+      800: 'oklch(0.389 0.069 224.6)', // #0B4C60
+      900: 'oklch(0.333 0.057 224.7)', // #0A3C4C
+      950: 'oklch(0.267 0.044 225.3)', // #072A36
+    },
+  },
+  darkMode: {
+    gray: {
+      50: 'oklch(0.966 0.005 247.9)', // #F1F4F7
+      100: 'oklch(0.926 0.009 247.9)', // #E2E7EC
+      200: 'oklch(0.848 0.015 251.2)', // #C6CED7
+      300: 'oklch(0.744 0.021 252.9)', // #A3ADB9
+      400: 'oklch(0.589 0.026 256.2)', // #737E8D muted tier, kept under AA
+      450: 'oklch(0.562 0.025 254.5)', // #6B7684
+      500: 'oklch(0.459 0.025 252.7)', // #4E5966
+      600: 'oklch(0.375 0.025 253.1)', // #38424E
+      700: 'oklch(0.317 0.023 253.6)', // #2A333E
+      800: 'oklch(0.266 0.021 257.3)', // #1F2630
+      900: 'oklch(0.233 0.020 258.4)', // #181E27
+      950: 'oklch(0.203 0.016 256.8)', // #12171E sheet
+    },
+    blue: {
+      50: 'oklch(0.953 0.018 214.4)', // #E3F3F7
+      100: 'oklch(0.897 0.038 215.5)', // #C2E4ED
+      200: 'oklch(0.819 0.065 216.2)', // #93CFDF
+      300: 'oklch(0.732 0.087 216.9)', // #62B6CC Petrol, lit
+      400: 'oklch(0.642 0.093 219.1)', // #3F9AB3
+      500: 'oklch(0.557 0.087 220.5)', // #2A7F97
+      600: 'oklch(0.476 0.077 221.3)', // #1D667B
+      700: 'oklch(0.410 0.066 222.2)', // #165264
+      800: 'oklch(0.344 0.054 222.1)', // #113F4D
+      900: 'oklch(0.290 0.044 222.4)', // #0D303B
+      950: 'oklch(0.241 0.034 222.0)', // #0A232B
+    },
+  },
+}
+
+/**
+ * Semantic entries set after the ramps resolve. `canvas` is the Mist frame the
+ * app shell paints behind its sheets; the sidebar shares it so the frame reads
+ * as one continuous surface.
+ */
+export const semantic = {
+  light: {
+    surface: {
+      canvas: 'oklch(0.954 0.005 247.9)', // Mist
+      sidebar: 'oklch(0.954 0.005 247.9)',
+    },
+  },
+  dark: {
+    surface: {
+      canvas: 'oklch(0.171 0.012 254.2)', // #0C1015, below the sheet
+      sidebar: 'oklch(0.171 0.012 254.2)',
+    },
+  },
+}
+
+/** The interface family. Declared by `@talelk/newui-tailwind`'s font CSS. */
+export const fontFamily = { text: 'IBM Plex Sans' }
+
+/**
+ * Type sizes replaced in the exported scale: 13px interface text, quieter
+ * headings that lean on weight rather than size.
+ */
+export const fontSize = {
+  interface: { fontSize: '13px', lineHeight: '18px', letterSpacing: '0em' },
+  caption: { fontSize: '12px', lineHeight: '16px', letterSpacing: '0em' },
+  section: { fontSize: '15px', lineHeight: '20px', letterSpacing: '-0.005em' },
+  heading: { fontSize: '20px', lineHeight: '26px', letterSpacing: '-0.015em' },
+  metric: { fontSize: '22px', lineHeight: '28px', letterSpacing: '-0.02em' },
+  hero: { fontSize: '32px', lineHeight: '38px', letterSpacing: '-0.025em' },
+  base: { fontSize: '13px', lineHeight: '18px', letterSpacing: '0em' },
+  sm: { fontSize: '12px', lineHeight: '16px', letterSpacing: '0em' },
+  xs: { fontSize: '11px', lineHeight: '14px', letterSpacing: '0.005em' },
+  '2xs': { fontSize: '10.5px', lineHeight: '13px', letterSpacing: '0.01em' },
+  md: { fontSize: '14px', lineHeight: '20px', letterSpacing: '0em' },
+  lg: { fontSize: '15px', lineHeight: '20px', letterSpacing: '0em' },
+  'p-base': { fontSize: '13px', lineHeight: '20px', letterSpacing: '0em' },
+  'p-sm': { fontSize: '12px', lineHeight: '18px', letterSpacing: '0em' },
+}
+
+/** Plex needs no positive tracking at text sizes; weights share the size's. */
+export function trackingFor(size) {
+  return fontSize[size]?.letterSpacing
+}
+
+/** Radius by role: 4px controls, 6px sheets and cards, 8px overlays. */
+export const radiusRoles = {
+  control: '4px',
+  card: '6px',
+  overlay: '8px',
+}
+
+/**
+ * Focus rings, as the export's `0 0 0 <spread> <color>` shapes. The export's
+ * default ring is light gray (about 1.6:1 on white); here focus is the accent,
+ * solid, 3:1 or better against both the sheet and the frame.
+ */
+export const focus = {
+  light: {
+    default: '0px 0px 0px 2px #0E5C74',
+    blue: '0px 0px 0px 2px #0E5C74',
+  },
+  dark: {
+    default: '0px 0px 0px 2px #62B6CC',
+    blue: '0px 0px 0px 2px #62B6CC',
+  },
+}