@ponti-studios/ui 1.0.1 → 1.2.0

package/src/styles/tokens/source/native.tokens.json

@@ -0,0 +1,204 @@
+{
+  "$extensions": {
+    "org.ponti.description": "Semantic and component tokens for React Native consumers. Values reference the shared foundations so mobile stays in lockstep with web. Consumed via @ponti-studios/ui/native."
+  },
+  "space": {
+    "$type": "dimension",
+    "sm": { "$value": "{spacing-scale.2}" },
+    "md": { "$value": "{spacing-scale.3}" },
+    "lg": { "$value": "{spacing-scale.4}" },
+    "xl": { "$value": "{spacing-scale.6}" }
+  },
+  "screen-margin": {
+    "$type": "dimension",
+    "$value": "{spacing-scale.4}"
+  },
+  "component-size": {
+    "$type": "dimension",
+    "sm": { "$value": "{spacing-scale.4}" },
+    "md": { "$value": "{spacing-scale.6}" },
+    "lg": { "$value": "{spacing-scale.8}" },
+    "xl": { "$value": "{spacing-scale.11}" },
+    "icon": { "$value": "{spacing-scale.5}" }
+  },
+  "border-radius": {
+    "$type": "dimension",
+    "sm": { "$value": "{radius.sm}" },
+    "md": { "$value": "{radius.md}" },
+    "lg": { "$value": "{radius.lg}" },
+    "icon": { "$value": "{radius.md}" }
+  },
+  "stream-item": {
+    "$description": "Shared flat list-row look (Inbox, Time, Tasks) — Vercel-style dense list: full-bleed bottom divider, no radius.",
+    "$type": "dimension",
+    "border-radius": { "$value": { "value": 0, "unit": "rem" } },
+    "border-width": { "$value": { "value": 1, "unit": "px" } },
+    "gap": { "$value": "{spacing-scale.3}" },
+    "icon-size": { "$value": "{component-size.icon}" },
+    "min-height": { "$value": "{spacing-scale.14}" },
+    "padding-horizontal": { "$value": "{spacing-scale.4}" },
+    "padding-vertical": { "$value": "{spacing-scale.2}" }
+  },
+  "font-family": {
+    "$type": "string",
+    "primary": { "$value": "System" },
+    "mono": { "$value": "Menlo" }
+  },
+  "text": {
+    "$description": "Apple-HIG-aligned type ramp for native editorial text.",
+    "large-title": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 34, "unit": "px" },
+        "lineHeight": { "value": 41, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -0.6, "unit": "px" }
+      }
+    },
+    "title1": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 28, "unit": "px" },
+        "lineHeight": { "value": 34, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -0.4, "unit": "px" }
+      }
+    },
+    "title2": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 22, "unit": "px" },
+        "lineHeight": { "value": 28, "unit": "px" },
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": { "value": -0.2, "unit": "px" }
+      }
+    },
+    "headline": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 17, "unit": "px" },
+        "lineHeight": { "value": 22, "unit": "px" },
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": { "value": -0.1, "unit": "px" }
+      }
+    },
+    "body": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 17, "unit": "px" },
+        "lineHeight": { "value": 24, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "callout": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 16, "unit": "px" },
+        "lineHeight": { "value": 22, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": -0.1, "unit": "px" }
+      }
+    },
+    "subhead": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 15, "unit": "px" },
+        "lineHeight": { "value": 20, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "footnote": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 13, "unit": "px" },
+        "lineHeight": { "value": 18, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "caption1": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 12, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    },
+    "caption2": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 11, "unit": "px" },
+        "lineHeight": { "value": 14, "unit": "px" },
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": { "value": 0.2, "unit": "px" }
+      }
+    },
+    "display": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 40, "unit": "px" },
+        "lineHeight": { "value": 44, "unit": "px" },
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": { "value": -1.2, "unit": "px" }
+      }
+    },
+    "overline": {
+      "$type": "typography",
+      "$value": {
+        "fontSize": { "value": 11, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.medium}",
+        "letterSpacing": { "value": 0.8, "unit": "px" },
+        "textTransform": "uppercase"
+      }
+    },
+    "mono": {
+      "$type": "typography",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": { "value": 12, "unit": "px" },
+        "lineHeight": { "value": 16, "unit": "px" },
+        "fontWeight": "{font-weight.normal}",
+        "letterSpacing": { "value": 0, "unit": "px" }
+      }
+    }
+  },
+  "motion": {
+    "$description": "Portable motion semantics. Platform adapters own runtime animation objects and reduced-motion behavior.",
+    "duration": {
+      "$type": "duration",
+      "instant": { "$value": "0ms" },
+      "quick": { "$value": "{duration.150}" },
+      "standard": { "$value": "{duration.300}" },
+      "deliberate": { "$value": "{duration.500}" }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "enter": { "$value": "{ease.out}" },
+      "exit": { "$value": "{ease.in}" },
+      "inOut": { "$value": "{ease.in-out}" }
+    },
+    "distance": {
+      "$type": "dimension",
+      "rowEnter": { "$value": "{spacing-scale.2}" },
+      "sceneReveal": { "$value": "{spacing-scale.8}" }
+    },
+    "opacity": {
+      "$type": "number",
+      "hidden": { "$value": 0 },
+      "visible": { "$value": 1 },
+      "disabled": { "$value": 0.5 }
+    },
+    "interruption": {
+      "$type": "string",
+      "policy": { "$value": "cancel-and-settle" }
+    },
+    "reducedMotion": {
+      "$type": "string",
+      "policy": { "$value": "replace-transform-with-opacity" }
+    }
+  }
+}

package/src/styles/tokens/style-dictionary.native.mjs

@@ -0,0 +1,26 @@
+/**
+ * Emits ONLY the native semantic/component tokens (native.tokens.json) as a
+ * typed module. Foundations are kept in the dictionary so references resolve,
+ * but are filtered out of the output — they already ship via
+ * foundations.generated.ts.
+ */
+export default {
+  source: [
+    "src/styles/tokens/source/foundations.tokens.json",
+    "src/styles/tokens/source/native.tokens.json",
+  ],
+  platforms: {
+    typescript: {
+      transformGroup: "js",
+      buildPath: "src/styles/tokens/generated/",
+      files: [
+        {
+          destination: "native.generated.ts",
+          format: "javascript/esm",
+          options: { minify: true },
+          filter: (token) => token.filePath.includes("native.tokens.json"),
+        },
+      ],
+    },
+  },
+};