@tokens-studio/tokenscript-schemas 0.0.11 → 0.0.13

package/src/schemas/types/p3-linear-color/unit.test.ts

@@ -0,0 +1,82 @@
+/**
+ * Linear P3 Color Schema Tests
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import Color from "colorjs.io";
+import { describe, expect, it } from "vitest";
+import type { ColorSpecification } from "@/bundler/types";
+
+describe("Linear P3 Color Schema", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("p3-linear-color")) as ColorSpecification;
+
+      expect(schema.name).toBe("LinearP3");
+      expect(schema.type).toBe("color");
+      expect(schema.schema?.properties).toHaveProperty("r");
+      expect(schema.schema?.properties).toHaveProperty("g");
+      expect(schema.schema?.properties).toHaveProperty("b");
+    });
+  });
+
+  describe("Conversion from XYZ-D65", () => {
+    const testCases = [
+      { name: "red", xyz: [0.4124564, 0.2126729, 0.0193339] },
+      { name: "green", xyz: [0.3575761, 0.7151522, 0.119192] },
+      { name: "blue", xyz: [0.1804375, 0.072175, 0.9505041] },
+      { name: "white", xyz: [0.95047, 1.0, 1.08883] },
+      { name: "P3 green primary", xyz: [0.2657, 0.6918, 0.0451] },
+    ];
+
+    for (const { name, xyz } of testCases) {
+      it(`should convert XYZ-D65 to Linear P3 for ${name}`, async () => {
+        const result = await executeWithSchema(
+          "p3-linear-color",
+          "type",
+          `
+          variable xyz: Color.XYZD65;
+          xyz.x = ${xyz[0]}; xyz.y = ${xyz[1]}; xyz.z = ${xyz[2]};
+          xyz.to.linearp3()
+        `,
+        );
+
+        // ColorJS reference
+        const colorJS = new Color("xyz-d65", xyz as [number, number, number]).to("p3-linear");
+
+        const tsR = (result as any).value.r.value;
+        const tsG = (result as any).value.g.value;
+        const tsB = (result as any).value.b.value;
+
+        expect(tsR).toBeCloseTo(colorJS.coords[0], 8);
+        expect(tsG).toBeCloseTo(colorJS.coords[1], 8);
+        expect(tsB).toBeCloseTo(colorJS.coords[2], 8);
+      });
+    }
+  });
+
+  describe("Wide Gamut Colors", () => {
+    it("should handle P3 colors outside sRGB gamut", async () => {
+      // P3's green primary has negative sRGB values
+      const result = await executeWithSchema(
+        "p3-linear-color",
+        "type",
+        `
+        variable xyz: Color.XYZD65;
+        xyz.x = 0.2657; xyz.y = 0.6918; xyz.z = 0.0451;
+        xyz.to.linearp3()
+      `,
+      );
+
+      // This should give us approximately (0, 1, 0) in Linear P3
+      const tsR = (result as any).value.r.value;
+      const tsG = (result as any).value.g.value;
+      const tsB = (result as any).value.b.value;
+
+      // P3 green primary should be close to (0, 1, 0)
+      expect(tsG).toBeCloseTo(1, 1);
+      expect(Math.abs(tsR)).toBeLessThan(0.1);
+      expect(Math.abs(tsB)).toBeLessThan(0.1);
+    });
+  });
+});

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

@@ -0,0 +1,43 @@
+// Hex to RGB Conversion
+// Converts hexadecimal color string to RGB (0-255 range)
+//
+// Supports both shorthand (#RGB) and standard (#RRGGBB) formats:
+//   #f00     → RGB(255, 0, 0)
+//   #ff0000  → RGB(255, 0, 0)
+//
+// Algorithm:
+// 1. Remove '#' prefix and split into characters
+// 2. For shorthand: duplicate each digit (f → ff)
+// 3. Parse hex pairs to decimal values
+//
+// Input: Color.Hex (e.g., #ff5733)
+// Output: Color.Rgb with r, g, b in 0-255 range
+
+// Split hex string on '#' and get the color value
+variable color_parts: List = {input}.to_string().split('#'); 
+variable color: List = color_parts.get(1).split(); 
+variable length: Number = color.length(); 
+
+// Initialize RGB values
+variable rgb: List = 0, 0, 0; 
+
+// Handle shorthand (#RGB) vs standard (#RRGGBB) format
+if(length == 3) [ 
+  // Shorthand: duplicate each digit
+  rgb.update(0, parse_int(color.get(0).concat(color.get(0)), 16)); 
+  rgb.update(1, parse_int(color.get(1).concat(color.get(1)), 16)); 
+  rgb.update(2, parse_int(color.get(2).concat(color.get(2)), 16)); 
+] else [ 
+  // Standard: pair adjacent digits
+  rgb.update(0, parse_int(color.get(0).concat(color.get(1)), 16)); 
+  rgb.update(1, parse_int(color.get(2).concat(color.get(3)), 16)); 
+  rgb.update(2, parse_int(color.get(4).concat(color.get(5)), 16)); 
+]; 
+
+// Create output color
+variable output: Color.Rgb; 
+output.r = rgb.get(0); 
+output.g = rgb.get(1); 
+output.b = rgb.get(2); 
+
+return output;

package/src/schemas/types/rgb-color/initializer.tokenscript

@@ -0,0 +1,16 @@
+// RGB Color Initializer
+// Creates an RGB color from r, g, b values (0-255 range)
+//
+// Usage: rgb(255, 128, 64) → Color.Rgb { r: 255, g: 128, b: 64 }
+//
+// Input: List of 3 numbers [r, g, b]
+// Output: Color.Rgb
+
+variable color_parts: List = {input}; 
+
+variable output: Color.Rgb;
+output.r = color_parts.get(0);
+output.g = color_parts.get(1);
+output.b = color_parts.get(2);
+
+return output;

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

@@ -0,0 +1,55 @@
+{
+  "name": "Rgb",
+  "type": "color",
+  "description": "RGB color",
+  "schema": {
+    "type": "object",
+    "properties": {
+      "r": {
+        "type": "number"
+      },
+      "g": {
+        "type": "number"
+      },
+      "b": {
+        "type": "number"
+      }
+    },
+    "required": ["r", "g", "b"],
+    "order": ["r", "g", "b"],
+    "additionalProperties": false
+  },
+  "initializers": [
+    {
+      "title": "function",
+      "keyword": "rgb",
+      "description": "Creates an RGB color",
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./initializer.tokenscript"
+      }
+    }
+  ],
+  "conversions": [
+    {
+      "source": "/api/v1/core/hex-color/0/",
+      "target": "$self",
+      "description": "Converts HEX to RGB",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-hex.tokenscript"
+      }
+    },
+    {
+      "source": "$self",
+      "target": "/api/v1/core/hex-color/0/",
+      "description": "Converts RGB to HEX",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./to-hex.tokenscript"
+      }
+    }
+  ]
+}

package/src/schemas/types/rgb-color/to-hex.tokenscript

@@ -0,0 +1,42 @@
+// RGB to Hex Conversion
+// Converts RGB (0-255) color to hexadecimal string format
+//
+// Examples:
+//   RGB(255, 0, 0)   → #ff0000
+//   RGB(0, 255, 128) → #00ff80
+//
+// Algorithm:
+// 1. Round each channel to nearest integer
+// 2. Convert to base-16 string
+// 3. Pad single digits with leading zero
+// 4. Concatenate with '#' prefix
+//
+// Input: Color.Rgb with r, g, b in 0-255 range
+// Output: String (hex format #rrggbb)
+
+variable rgba: List = {input}.r, {input}.g, {input}.b;
+variable hex: String = "#";
+variable i: Number = 0;
+variable value: Number = 0;
+
+// Convert each RGB channel to hex
+while( i < min(rgba.length(), 3)) [
+  value = round(rgba.get(i));
+  if(value < 16) [
+    hex = hex.concat("0").concat(value.to_string(16));
+  ] else [
+    hex = hex.concat(value.to_string(16));
+  ];
+  i = i + 1;
+];
+
+if (rgba.length() == 4) [
+  value = rgba.get(3) * 255; // Convert alpha to 0-255 range
+  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/rgb-color/unit.test.ts

@@ -0,0 +1,302 @@
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { ColorSpecification } from "@/bundler/types";
+
+describe("RGB Color Schema", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("rgb-color")) as ColorSpecification;
+
+      expect(schema.name).toBe("Rgb");
+      expect(schema.type).toBe("color");
+      expect(schema.description).toBe("RGB color");
+      expect(schema.schema).toBeDefined();
+      expect(schema.schema?.properties).toHaveProperty("r");
+      expect(schema.schema?.properties).toHaveProperty("g");
+      expect(schema.schema?.properties).toHaveProperty("b");
+      expect(schema.schema?.required).toEqual(["r", "g", "b"]);
+    });
+
+    it("should have initializers defined", async () => {
+      const schema = (await getBundledSchema("rgb-color")) as ColorSpecification;
+
+      expect(schema.initializers).toHaveLength(1);
+      expect(schema.initializers[0].keyword).toBe("rgb");
+      expect(schema.initializers[0].script.script).toBeTruthy();
+      expect(schema.initializers[0].script.script).not.toContain("./");
+    });
+
+    it("should have conversions defined", async () => {
+      const schema = (await getBundledSchema("rgb-color")) as ColorSpecification;
+
+      expect(schema.conversions).toHaveLength(2);
+
+      // Check HEX to RGB conversion
+      const hexToRgb = schema.conversions.find(
+        (c: { target: string; source: string }) =>
+          c.target === "$self" && c.source.includes("hex-color"),
+      );
+      expect(hexToRgb).toBeDefined();
+      expect(hexToRgb?.lossless).toBe(true);
+      expect(hexToRgb?.script.script).toBeTruthy();
+      expect(hexToRgb?.script.script).not.toContain("./");
+
+      // Check RGB to HEX conversion
+      const rgbToHex = schema.conversions.find(
+        (c: { target: string; source: string }) =>
+          c.source === "$self" && c.target.includes("hex-color"),
+      );
+      expect(rgbToHex).toBeDefined();
+      expect(rgbToHex?.lossless).toBe(true);
+      expect(rgbToHex?.script.script).toBeTruthy();
+      expect(rgbToHex?.script.script).not.toContain("./");
+    });
+  });
+
+  describe("Initialization", () => {
+    it("should initialize RGB color from object", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 255;
+        c.g = 128;
+        c.b = 64;
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(255);
+      expect((result as any).value.g.value).toBe(128);
+      expect((result as any).value.b.value).toBe(64);
+    });
+
+    it("should access individual color channels", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 200;
+        c.g = 150;
+        c.b = 100;
+        c.r
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("NumberSymbol");
+      expect(result?.toString()).toBe("200");
+    });
+  });
+
+  describe("Conversion from HEX to RGB", () => {
+    it("should convert 6-digit HEX to RGB", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Hex = #ff5733;
+        c.to.rgb()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(255);
+      expect((result as any).value.g.value).toBe(87);
+      expect((result as any).value.b.value).toBe(51);
+    });
+
+    it("should convert 3-digit HEX to RGB", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Hex = #f53;
+        c.to.rgb()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(255);
+      expect((result as any).value.g.value).toBe(85);
+      expect((result as any).value.b.value).toBe(51);
+    });
+
+    it("should convert black HEX to RGB", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Hex = #000;
+        c.to.rgb()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(0);
+      expect((result as any).value.g.value).toBe(0);
+      expect((result as any).value.b.value).toBe(0);
+    });
+
+    it("should convert white HEX to RGB", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Hex = #ffffff;
+        c.to.rgb()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(255);
+      expect((result as any).value.g.value).toBe(255);
+      expect((result as any).value.b.value).toBe(255);
+    });
+  });
+
+  describe("Conversion from RGB to HEX", () => {
+    it("should convert RGB to HEX", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 255;
+        c.g = 87;
+        c.b = 51;
+        c.to.hex()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Hex");
+      expect(result?.toString()).toBe("#ff5733");
+    });
+
+    it("should convert RGB with low values to HEX", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 10;
+        c.g = 5;
+        c.b = 0;
+        c.to.hex()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Hex");
+      expect(result?.toString()).toBe("#0a0500");
+    });
+
+    it("should convert black RGB to HEX", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 0;
+        c.g = 0;
+        c.b = 0;
+        c.to.hex()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Hex");
+      expect(result?.toString()).toBe("#000000");
+    });
+
+    it("should convert white RGB to HEX", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 255;
+        c.g = 255;
+        c.b = 255;
+        c.to.hex()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Hex");
+      expect(result?.toString()).toBe("#ffffff");
+    });
+  });
+
+  describe("Round-trip Conversions", () => {
+    it("should maintain color values through HEX -> RGB -> HEX", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable original: Color.Hex = #3498db;
+        variable rgb: Color.Rgb = original.to.rgb();
+        variable back: Color.Hex = rgb.to.hex();
+        back
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Hex");
+      expect(result?.toString()).toBe("#3498db");
+    });
+
+    it("should maintain color values through RGB -> HEX -> RGB", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable original: Color.Rgb;
+        original.r = 52;
+        original.g = 152;
+        original.b = 219;
+        
+        variable hex: Color.Hex = original.to.hex();
+        variable back: Color.Rgb = hex.to.rgb();
+        back
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(52);
+      expect((result as any).value.g.value).toBe(152);
+      expect((result as any).value.b.value).toBe(219);
+    });
+  });
+
+  describe("Identity Conversions", () => {
+    it("should handle RGB to RGB identity conversion", async () => {
+      const result = await executeWithSchema(
+        "rgb-color",
+        "type",
+        `
+        variable c: Color.Rgb;
+        c.r = 100;
+        c.g = 150;
+        c.b = 200;
+        c.to.rgb()
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Rgb");
+      expect((result as any).value.r.value).toBe(100);
+      expect((result as any).value.g.value).toBe(150);
+      expect((result as any).value.b.value).toBe(200);
+    });
+  });
+});

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

@@ -0,0 +1,106 @@
+// HSL to sRGB Conversion
+// Reference: https://github.com/color-js/color.js/blob/main/src/spaces/hsl.js
+//
+// Algorithm:
+// 1. If saturation is 0, it's achromatic: R=G=B=L
+// 2. Otherwise use the HSL to RGB formula:
+//    - Calculate intermediate values based on L
+//    - Use hue to determine RGB components
+//
+// Input: Color.HSL with h (0-360), s (0-1), l (0-1)
+// Output: Color.SRGB with r, g, b in 0-1 range
+
+// 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;
+
+// Output values
+variable r: Number = l;
+variable g: Number = l;
+variable b: Number = l;
+
+// Only calculate if there's saturation (not achromatic)
+if (s > 0) [
+    // Calculate intermediate value
+    variable q: Number = 0;
+    if (l < 0.5) [
+        q = l * (1 + s);
+    ] else [
+        q = l + s - l * s;
+    ];
+    
+    variable p: Number = 2 * l - q;
+    
+    // Helper function logic inlined for R (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;
+            ];
+        ];
+    ];
+    
+    // Helper function logic inlined for G (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;
+            ];
+        ];
+    ];
+    
+    // Helper function logic inlined for B (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;
+            ];
+        ];
+    ];
+];
+
+// Create output
+variable output: Color.SRGB;
+output.r = r;
+output.g = g;
+output.b = b;
+
+return output;
+
+
+
+