@tokens-studio/tokenscript-schemas 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokens-studio/tokenscript-schemas",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Schema registry for TokenScript with bundled schemas and validation",
   "type": "module",
   "main": "./dist/index.js",

package/src/bundler/selective-bundler.test.ts

@@ -5,15 +5,20 @@ import { bundleSelectiveSchemas } from "./selective-bundler.js";
 const SCHEMAS_DIR = join(process.cwd(), "src/schemas");
 
 describe("Selective Bundler", () => {
-  it("should bundle a single type schema", async () => {
+  it("should bundle a single type schema with its dependencies", async () => {
     const result = await bundleSelectiveSchemas({
       schemas: ["hex-color"],
       schemasDir: SCHEMAS_DIR,
     });
 
-    expect(result.schemas).toHaveLength(1);
-    expect(result.schemas[0].uri).toContain("hex-color");
-    expect(result.schemas[0].schema.type).toBe("color");
+    // hex-color has srgb-color dependency (for .to.hex() conversion)
+    expect(result.schemas.length).toBeGreaterThanOrEqual(1);
+
+    const uris = result.schemas.map((s) => s.uri);
+    expect(uris.some((uri) => uri.includes("hex-color"))).toBe(true);
+
+    const hexSchema = result.schemas.find((s) => s.uri.includes("hex-color"));
+    expect(hexSchema?.schema.type).toBe("color");
     expect(result.metadata.requestedSchemas).toEqual(["hex-color"]);
   });
 
@@ -57,7 +62,10 @@ describe("Selective Bundler", () => {
       schemasDir: SCHEMAS_DIR,
     });
 
-    const hexSchema = result.schemas[0].schema;
+    const hexSchemaEntry = result.schemas.find((s) => s.uri.includes("hex-color"));
+    expect(hexSchemaEntry).toBeDefined();
+
+    const hexSchema = hexSchemaEntry!.schema;
 
     if (hexSchema.type === "color") {
       // Check that initializer script is inlined (not a file reference)
@@ -76,7 +84,9 @@ describe("Selective Bundler", () => {
       baseUrl: customBaseUrl,
     });
 
-    expect(result.schemas[0].uri).toContain(customBaseUrl);
+    const hexSchemaEntry = result.schemas.find((s) => s.uri.includes("hex-color"));
+    expect(hexSchemaEntry).toBeDefined();
+    expect(hexSchemaEntry!.uri).toContain(customBaseUrl);
   });
 
   it("should include metadata", async () => {

package/src/schemas/types/hex-color/from-hsl.tokenscript

@@ -0,0 +1,124 @@
+// HSL to Hex Conversion
+// Converts HSL to hexadecimal string format
+// Reference: Standard HSL to RGB algorithm
+//
+// Input: Color.HSL with h (0-360), s (0-1), l (0-1)
+// Output: Hex string #rrggbb
+
+// Get input HSL values
+variable h: Number = {input}.h;
+variable s: Number = {input}.s;
+variable l: Number = {input}.l;
+
+// Normalize hue to 0-1 range
+variable hue: Number = h / 360;
+
+// RGB values (default to achromatic)
+variable r: Number = l;
+variable g: Number = l;
+variable b: Number = l;
+
+// Only calculate if there's saturation
+if (s > 0) [
+    variable q: Number = 0;
+    if (l < 0.5) [
+        q = l * (1 + s);
+    ] else [
+        q = l + s - l * s;
+    ];
+
+    variable p: Number = 2 * l - q;
+
+    // Red (hue + 1/3)
+    variable tr: Number = hue + 0.333333333333333;
+    if (tr < 0) [ tr = tr + 1; ];
+    if (tr > 1) [ tr = tr - 1; ];
+
+    if (tr < 0.166666666666667) [
+        r = p + (q - p) * 6 * tr;
+    ] else [
+        if (tr < 0.5) [
+            r = q;
+        ] else [
+            if (tr < 0.666666666666667) [
+                r = p + (q - p) * (0.666666666666667 - tr) * 6;
+            ] else [
+                r = p;
+            ];
+        ];
+    ];
+
+    // Green (hue)
+    variable tg: Number = hue;
+    if (tg < 0) [ tg = tg + 1; ];
+    if (tg > 1) [ tg = tg - 1; ];
+
+    if (tg < 0.166666666666667) [
+        g = p + (q - p) * 6 * tg;
+    ] else [
+        if (tg < 0.5) [
+            g = q;
+        ] else [
+            if (tg < 0.666666666666667) [
+                g = p + (q - p) * (0.666666666666667 - tg) * 6;
+            ] else [
+                g = p;
+            ];
+        ];
+    ];
+
+    // Blue (hue - 1/3)
+    variable tb: Number = hue - 0.333333333333333;
+    if (tb < 0) [ tb = tb + 1; ];
+    if (tb > 1) [ tb = tb - 1; ];
+
+    if (tb < 0.166666666666667) [
+        b = p + (q - p) * 6 * tb;
+    ] else [
+        if (tb < 0.5) [
+            b = q;
+        ] else [
+            if (tb < 0.666666666666667) [
+                b = p + (q - p) * (0.666666666666667 - tb) * 6;
+            ] else [
+                b = p;
+            ];
+        ];
+    ];
+];
+
+// Convert RGB to hex
+variable hex: String = "#";
+variable value: Number = 0;
+
+// Red
+value = round(r * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Green
+value = round(g * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Blue
+value = round(b * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+return hex;

package/src/schemas/types/hex-color/from-oklch.tokenscript

@@ -0,0 +1,119 @@
+// OKLCH to Hex Conversion
+// Converts OKLCH perceptual color to hexadecimal string format
+// Path: OKLCH → OKLab → XYZ-D65 → Linear sRGB → sRGB → Hex
+//
+// Input: Color.OKLCH with l (0-1), c, h (0-360)
+// Output: Hex string #rrggbb
+
+// Get input OKLCH values
+variable ok_l: Number = {input}.l;
+variable ok_c: Number = {input}.c;
+variable ok_h: Number = {input}.h;
+
+// === Step 1: OKLCH to OKLab (polar to cartesian) ===
+variable pi: Number = pi();
+variable deg_to_rad: Number = pi / 180;
+variable h_rad: Number = ok_h * deg_to_rad;
+
+variable lab_a: Number = ok_c * cos(h_rad);
+variable lab_b: Number = ok_c * sin(h_rad);
+
+// === Step 2: OKLab to XYZ-D65 ===
+// Inverse Lab-to-LMS matrix
+variable lms_l: Number = 1.0 * ok_l + 0.3963377773761749 * lab_a + 0.2158037573099136 * lab_b;
+variable lms_m: Number = 1.0 * ok_l + -0.1055613458156586 * lab_a + -0.0638541728258133 * lab_b;
+variable lms_s: Number = 1.0 * ok_l + -0.0894841775298119 * lab_a + -1.2914855480194092 * lab_b;
+
+// Cube the values (inverse of cube root)
+variable lms_l_cubed: Number = lms_l * lms_l * lms_l;
+variable lms_m_cubed: Number = lms_m * lms_m * lms_m;
+variable lms_s_cubed: Number = lms_s * lms_s * lms_s;
+
+// Inverse LMS-to-XYZ matrix
+variable xyz_x: Number = 1.2268798758459243 * lms_l_cubed + -0.5578149944602171 * lms_m_cubed + 0.2813910456659647 * lms_s_cubed;
+variable xyz_y: Number = -0.0405757452148008 * lms_l_cubed + 1.1122868032803170 * lms_m_cubed + -0.0717110580655164 * lms_s_cubed;
+variable xyz_z: Number = -0.0763729366746601 * lms_l_cubed + -0.4214933324022432 * lms_m_cubed + 1.5869240198367816 * lms_s_cubed;
+
+// === Step 3: XYZ-D65 to Linear sRGB ===
+variable linear_r: Number = 3.2409699419045226 * xyz_x + -1.537383177570094 * xyz_y + -0.4986107602930034 * xyz_z;
+variable linear_g: Number = -0.9692436362808796 * xyz_x + 1.8759675015077202 * xyz_y + 0.04155505740717559 * xyz_z;
+variable linear_b: Number = 0.05563007969699366 * xyz_x + -0.20397695888897652 * xyz_y + 1.0569715142428786 * xyz_z;
+
+// === Step 4: Linear sRGB to sRGB (gamma correction) ===
+variable threshold: Number = 0.0031308;
+variable linear_scale: Number = 12.92;
+variable gamma_offset: Number = 0.055;
+variable gamma_scale: Number = 1.055;
+variable gamma_exp: Number = 0.416666666666667;
+
+variable srgb_r: Number = 0;
+if (linear_r <= threshold) [
+    srgb_r = linear_r * linear_scale;
+] else [
+    if (linear_r > 0) [
+        srgb_r = gamma_scale * pow(linear_r, gamma_exp) - gamma_offset;
+    ] else [
+        srgb_r = 0;
+    ];
+];
+
+variable srgb_g: Number = 0;
+if (linear_g <= threshold) [
+    srgb_g = linear_g * linear_scale;
+] else [
+    if (linear_g > 0) [
+        srgb_g = gamma_scale * pow(linear_g, gamma_exp) - gamma_offset;
+    ] else [
+        srgb_g = 0;
+    ];
+];
+
+variable srgb_b: Number = 0;
+if (linear_b <= threshold) [
+    srgb_b = linear_b * linear_scale;
+] else [
+    if (linear_b > 0) [
+        srgb_b = gamma_scale * pow(linear_b, gamma_exp) - gamma_offset;
+    ] else [
+        srgb_b = 0;
+    ];
+];
+
+// === Step 5: sRGB to Hex ===
+variable hex: String = "#";
+variable value: Number = 0;
+
+// Red (clamp to 0-1)
+value = srgb_r;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Green
+value = srgb_g;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Blue
+value = srgb_b;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+return hex;

package/src/schemas/types/hex-color/from-p3.tokenscript

@@ -0,0 +1,45 @@
+// Display P3 to Hex Conversion
+// Converts P3 (0-1) to hexadecimal string format
+// Note: P3 colors may be out of sRGB gamut, values are clamped to 0-1
+//
+// Examples:
+//   P3(1, 0, 0)     → #ff0000
+//   P3(0, 1, 0.5)   → #00ff80
+
+variable hex: String = "#";
+variable value: Number = 0;
+
+// Red channel (clamp P3 to sRGB range)
+value = {input}.r;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Green channel
+value = {input}.g;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Blue channel
+value = {input}.b;
+if (value < 0) [ value = 0; ];
+if (value > 1) [ value = 1; ];
+value = round(value * 255);
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+return hex;

package/src/schemas/types/hex-color/from-srgb.tokenscript

@@ -0,0 +1,41 @@
+// sRGB to Hex Conversion
+// Converts sRGB (0-1) to hexadecimal string format
+//
+// Examples:
+//   sRGB(1, 0, 0)     → #ff0000
+//   sRGB(0, 1, 0.5)   → #00ff80
+
+variable hex: String = "#";
+variable value: Number = 0;
+
+// Red channel
+value = round({input}.r * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Green channel
+value = round({input}.g * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+// Blue channel
+value = round({input}.b * 255);
+if (value < 0) [ value = 0; ];
+if (value > 255) [ value = 255; ];
+if (value < 16) [
+  hex = hex.concat("0").concat(value.to_string(16));
+] else [
+  hex = hex.concat(value.to_string(16));
+];
+
+return hex;

package/src/schemas/types/hex-color/schema.json

@@ -20,5 +20,46 @@
       }
     }
   ],
-  "conversions": []
+  "conversions": [
+    {
+      "source": "/api/v1/core/srgb-color/0/",
+      "target": "$self",
+      "description": "Converts sRGB (0-1) to Hex format",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-srgb.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/p3-color/0/",
+      "target": "$self",
+      "description": "Converts Display P3 to Hex format (clamps to sRGB gamut)",
+      "lossless": false,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-p3.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/hsl-color/0/",
+      "target": "$self",
+      "description": "Converts HSL to Hex format",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-hsl.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/oklch-color/0/",
+      "target": "$self",
+      "description": "Converts OKLCH to Hex format (clamps to sRGB gamut)",
+      "lossless": false,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-oklch.tokenscript"
+      }
+    }
+  ]
 }

package/src/schemas/types/hex-color/unit.test.ts

@@ -138,4 +138,249 @@ describe("Hex Color Schema", () => {
 
     // Note: Conversion tests are in rgb-color/unit.test.ts since RGB owns the conversions
   });
+
+  describe("Conversions", () => {
+    it("should convert sRGB to hex (red)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 1; color.g = 0; color.b = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#ff0000");
+    });
+
+    it("should convert sRGB to hex (green)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 0; color.g = 1; color.b = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#00ff00");
+    });
+
+    it("should convert sRGB to hex (blue)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 0; color.g = 0; color.b = 1;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#0000ff");
+    });
+
+    it("should convert sRGB to hex (mid values)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 0.5; color.g = 0.5; color.b = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      // 0.5 * 255 = 127.5, rounds to 128 = 0x80
+      expect((result as any).value).toBe("#808080");
+    });
+
+    it("should convert sRGB to hex (black)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 0; color.g = 0; color.b = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#000000");
+    });
+
+    it("should convert sRGB to hex (white)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.SRGB;
+        color.r = 1; color.g = 1; color.b = 1;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#ffffff");
+    });
+
+    // P3 to Hex conversions
+    it("should convert P3 to hex (red)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.P3;
+        color.r = 1; color.g = 0; color.b = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#ff0000");
+    });
+
+    it("should convert P3 to hex (clamps out-of-gamut)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.P3;
+        color.r = 1.2; color.g = -0.1; color.b = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      // 1.2 clamps to 1 (ff), -0.1 clamps to 0 (00), 0.5 = 80
+      expect((result as any).value).toBe("#ff0080");
+    });
+
+    // HSL to Hex conversions
+    it("should convert HSL to hex (red)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.HSL;
+        color.h = 0; color.s = 1; color.l = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#ff0000");
+    });
+
+    it("should convert HSL to hex (green)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.HSL;
+        color.h = 120; color.s = 1; color.l = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#00ff00");
+    });
+
+    it("should convert HSL to hex (blue)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.HSL;
+        color.h = 240; color.s = 1; color.l = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#0000ff");
+    });
+
+    it("should convert HSL to hex (gray - no saturation)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.HSL;
+        color.h = 0; color.s = 0; color.l = 0.5;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#808080");
+    });
+
+    // OKLCH to Hex conversions
+    it("should convert OKLCH to hex (red-ish)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.OKLCH;
+        color.l = 0.628; color.c = 0.258; color.h = 29;
+        color.to.hex()
+        `,
+      );
+
+      // OKLCH red is approximately l=0.628, c=0.258, h=29
+      // Should produce something close to #ff0000
+      const hex = (result as any).value as string;
+      expect(hex).toMatch(/^#[0-9a-f]{6}$/);
+      // Red channel should be high
+      const r = parseInt(hex.slice(1, 3), 16);
+      expect(r).toBeGreaterThan(200);
+    });
+
+    it("should convert OKLCH to hex (white)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.OKLCH;
+        color.l = 1; color.c = 0; color.h = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#ffffff");
+    });
+
+    it("should convert OKLCH to hex (black)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.OKLCH;
+        color.l = 0; color.c = 0; color.h = 0;
+        color.to.hex()
+        `,
+      );
+
+      expect((result as any).value).toBe("#000000");
+    });
+
+    it("should convert OKLCH to hex (gray)", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable color: Color.OKLCH;
+        color.l = 0.6; color.c = 0; color.h = 0;
+        color.to.hex()
+        `,
+      );
+
+      // Gray with lightness 0.6 should be mid-gray
+      const hex = (result as any).value as string;
+      expect(hex).toMatch(/^#[0-9a-f]{6}$/);
+      const r = parseInt(hex.slice(1, 3), 16);
+      const g = parseInt(hex.slice(3, 5), 16);
+      const b = parseInt(hex.slice(5, 7), 16);
+      // Should be achromatic (r ≈ g ≈ b)
+      expect(Math.abs(r - g)).toBeLessThan(2);
+      expect(Math.abs(g - b)).toBeLessThan(2);
+    });
+  });
 });