@texturehq/edges 1.2.1 → 1.3.1

package/dist/theme.css

@@ -13,6 +13,12 @@
 @import "./generated/tailwind-tokens-light.css";
 @import "./generated/tailwind-tokens-dark.css";
 
+/* Data visualization colors loaded separately due to Tailwind 4 @theme filtering
+   See: https://github.com/tailwindlabs/tailwindcss/issues/XXXXX
+   These variables are also in tailwind-tokens-light.css but Tailwind strips them
+   from the @theme block, so we load them separately in a plain :root block. */
+@import "./generated/viz-runtime.css";
+
 /* Layer 2: Animation Features
    Keyframes and animation utilities that aren't design tokens */
 @import "./styles/animations.css";

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.2.1",
-  "generatedAt": "2025-10-06T20:37:56.814Z",
+  "version": "1.3.1",
+  "generatedAt": "2025-10-09T16:15:03.889Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like debouncing, local storage, and time controls",
@@ -1776,6 +1776,26 @@
     "colors": {
       "description": "Color management utilities for theme-aware color resolution, contrast calculation, and palette generation",
       "utilities": [
+        {
+          "name": "calculateBounds",
+          "type": "constant",
+          "description": "Calculate min and max bounds from numeric values",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "calculateCenter",
+          "type": "constant",
+          "description": "Calculate center point for diverging palettes",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "clearColorCache",
           "type": "function",
@@ -1796,6 +1816,16 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "name": "createCategoricalMapping",
+          "type": "constant",
+          "description": "Creates a categorical color mapping for use with vector layers or explicit mappings This is a helper for cases where categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - Custom pin layers // Vector layer with categorical coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"buildings\", style: { color: createCategoricalMapping(\"type\", [\"residential\", \"commercial\", \"industrial\"]) } }) // With custom colors for specific values const mapping = createCategoricalMapping(\"status\", [\"active\", \"pending\", \"inactive\"]); // Then override specific colors if needed: mapping.mapping.inactive = { hex: \"#cccccc\" };",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with categorical coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"buildings\",\n  style: {\n    color: createCategoricalMapping(\"type\", [\"residential\", \"commercial\", \"industrial\"])\n  }\n})",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "createCategoryColorMap",
           "type": "constant",
@@ -1816,6 +1846,46 @@
           "category": "colors",
           "file": "utils/colors.ts"
         },
+        {
+          "name": "createDivergingMapping",
+          "type": "constant",
+          "description": "Creates a diverging color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps // Vector layer with diverging coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"temperature\", style: { color: createDivergingMapping(\"temp_anomaly\", { min: -10, max: 10 }, 0, \"orangeYellowSeafoam\") } })",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with diverging coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"temperature\",\n  style: {\n    color: createDivergingMapping(\"temp_anomaly\", { min: -10, max: 10 }, 0, \"orangeYellowSeafoam\")\n  }\n})",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "createSequentialMapping",
+          "type": "constant",
+          "description": "Creates a sequential color mapping for vector layers or manual bounds Use this helper when categorical auto-assignment doesn't work: - Vector tile layers (data not accessible at render time) - URL-based GeoJSON layers - When you want consistent colors across multiple maps // Vector layer with sequential coloring layer.vector({ tileset: \"mapbox://my-tileset\", sourceLayer: \"population\", style: { color: createSequentialMapping(\"density\", { min: 0, max: 100000 }, \"magma\") } })",
+          "params": [],
+          "returns": null,
+          "example": "// Vector layer with sequential coloring\nlayer.vector({\n  tileset: \"mapbox://my-tileset\",\n  sourceLayer: \"population\",\n  style: {\n    color: createSequentialMapping(\"density\", { min: 0, max: 100000 }, \"magma\")\n  }\n})",
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "extractNumericValues",
+          "type": "constant",
+          "description": "Extract numeric values from GeoJSON data for sequential/diverging palettes",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
+        {
+          "name": "extractUniqueValues",
+          "type": "constant",
+          "description": "Extracts unique values for a given property from GeoJSON FeatureCollection",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
+        },
         {
           "name": "getContrastingTextColor",
           "type": "function",
@@ -1848,10 +1918,19 @@
         },
         {
           "name": "getDivergingColors",
-          "type": "constant",
-          "description": "Gets diverging colors from a specific palette",
-          "params": [],
-          "returns": null,
+          "type": "function",
+          "description": "Get colors for a specific diverging palette",
+          "params": [
+            {
+              "name": "scheme",
+              "type": "unknown",
+              "description": "Diverging palette name (defaults to \"redYellowBlue\")"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "Array of 10 hex color strings (color 5 is the center)"
+          },
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
@@ -1859,7 +1938,7 @@
         {
           "name": "getResolvedColor",
           "type": "constant",
-          "description": "Resolves a CSS variable to its computed color value Supports both var(--name) format and plain --name format",
+          "description": "Resolves a CSS variable to its computed color value Supports multiple formats and automatically adds the color- prefix if needed - \"brand-primary\" → resolves to --color-brand-primary - \"color-brand-primary\" → resolves to --color-brand-primary - \"--color-brand-primary\" → used as-is - \"var(--color-brand-primary)\" → unwrapped and used",
           "params": [],
           "returns": null,
           "example": null,
@@ -1868,10 +1947,19 @@
         },
         {
           "name": "getSequentialColors",
-          "type": "constant",
-          "description": "Gets sequential colors from a specific palette",
-          "params": [],
-          "returns": null,
+          "type": "function",
+          "description": "Get colors for a specific sequential palette",
+          "params": [
+            {
+              "name": "scheme",
+              "type": "unknown",
+              "description": "Sequential palette name (defaults to \"viridis\")"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "Array of 10 hex color strings"
+          },
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
@@ -1895,6 +1983,16 @@
           "example": null,
           "category": "colors",
           "file": "utils/colors.ts"
+        },
+        {
+          "name": "mapValuesToCategoricalColors",
+          "type": "constant",
+          "description": "Maps unique values to categorical colors with looping",
+          "params": [],
+          "returns": null,
+          "example": null,
+          "category": "colors",
+          "file": "utils/colors.ts"
         }
       ]
     },
@@ -1935,7 +2033,7 @@
     }
   },
   "summary": {
-    "totalUtilities": 193,
+    "totalUtilities": 201,
     "totalCategories": 5,
     "categories": [
       {
@@ -1952,7 +2050,7 @@
       },
       {
         "name": "colors",
-        "count": 12
+        "count": 20
       },
       {
         "name": "general",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.2.1",
+  "version": "1.3.1",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",

package/scripts/copy-assets.js

@@ -33,6 +33,7 @@ try {
   const tokenFiles = [
     "src/generated/tailwind-tokens-light.css",
     "src/generated/tailwind-tokens-dark.css",
+    "src/generated/viz-runtime.css",
   ];
 
   // Create generated directory in dist

package/scripts/generate-viz-runtime.js

@@ -0,0 +1,95 @@
+/**
+ * Generate viz-runtime.css from Style Dictionary output
+ *
+ * WORKAROUND: Tailwind 4's @theme directive filters out viz color variables,
+ * so we extract them and create a separate runtime file with plain :root and
+ * .theme-dark blocks.
+ *
+ * This script should run after Style Dictionary generates the token files.
+ */
+
+import fs from "fs";
+import path from "path";
+
+const GENERATED_DIR = "src/generated";
+const LIGHT_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-light.css");
+const DARK_TOKENS = path.join(GENERATED_DIR, "tailwind-tokens-dark.css");
+const OUTPUT_FILE = path.join(GENERATED_DIR, "viz-runtime.css");
+
+/**
+ * Extract viz color variables from a CSS file
+ */
+function extractVizColors(cssContent) {
+  const vizColorRegex = /^\s*(--color-viz-[^:]+:\s*[^;]+;)\s*$/gm;
+  const matches = [];
+  let match;
+
+  while ((match = vizColorRegex.exec(cssContent)) !== null) {
+    matches.push(match[1]);
+  }
+
+  return matches;
+}
+
+/**
+ * Generate the viz-runtime.css file
+ */
+function generateVizRuntime() {
+  console.log("🎨 Generating viz-runtime.css...");
+
+  // Read token files
+  const lightContent = fs.readFileSync(LIGHT_TOKENS, "utf8");
+  const darkContent = fs.readFileSync(DARK_TOKENS, "utf8");
+
+  // Extract viz colors
+  const lightVizColors = extractVizColors(lightContent);
+  const darkVizColors = extractVizColors(darkContent);
+
+  if (lightVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in light theme tokens");
+  }
+
+  if (darkVizColors.length === 0) {
+    console.warn("⚠️  No viz colors found in dark theme tokens");
+  }
+
+  // Generate output
+  const output = `/**
+ * Data Visualization Color Palette - Runtime Override
+ *
+ * WORKAROUND: These variables are defined here instead of in tailwind-tokens-*.css
+ * because Tailwind 4's @theme directive filters them out (similar issue as data-* prefix).
+ *
+ * AUTO-GENERATED by scripts/generate-viz-runtime.js
+ * DO NOT EDIT MANUALLY - Edit tokens/base/data-visualization.json instead.
+ *
+ * To customize dark mode viz colors, edit the "viz" section in tokens/themes/dark.json
+ */
+
+/* Light theme (default) */
+:root {
+${lightVizColors.map((color) => `  ${color}`).join("\n")}
+}
+
+/* Dark theme */
+.theme-dark {
+${darkVizColors.map((color) => `  ${color}`).join("\n")}
+}
+`;
+
+  // Write output
+  fs.writeFileSync(OUTPUT_FILE, output, "utf8");
+
+  console.log(`✅ Generated ${OUTPUT_FILE}`);
+  console.log(`   - Light theme: ${lightVizColors.length} variables`);
+  console.log(`   - Dark theme: ${darkVizColors.length} variables`);
+}
+
+// Run the script
+try {
+  generateVizRuntime();
+} catch (error) {
+  console.error("❌ Error generating viz-runtime.css:", error);
+  process.exit(1);
+}
+