@tokens-studio/tokenscript-schemas 0.0.13 → 0.1.0

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

@@ -399,4 +399,220 @@ describe("CSS Color Schema", () => {
       expect(typeof css).toBe("string");
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should output RGB with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["rgb-color"],
+        `
+        variable c: Color.Rgb = rgb(255, 128, 64, 0.5);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== RGB with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toBe("rgb(255 128 64 / 0.5)");
+    });
+
+    it("should omit alpha = 1.0 from RGB CSS output", async () => {
+      const result = await executeWithCssColor(
+        ["rgb-color"],
+        `
+        variable c: Color.Rgb = rgb(255, 128, 64, 1);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      expect(css).toBe("rgb(255 128 64)");
+    });
+
+    it("should omit null alpha from RGB CSS output", async () => {
+      const result = await executeWithCssColor(
+        ["rgb-color"],
+        `
+        variable c: Color.Rgb = rgb(255, 128, 64);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      expect(css).toBe("rgb(255 128 64)");
+    });
+
+    it("should output HSL with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["hsl-color", "srgb-color"],
+        `
+        variable c: Color.HSL = hsl(180, 0.5, 0.5, 0.8);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== HSL with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^hsl\(180 50% 50% \/ 0\.8\)$/);
+    });
+
+    it("should output HWB with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["hwb-color", "hsv-color", "hsl-color", "srgb-color"],
+        `
+        variable c: Color.HWB = hwb(240, 0.2, 0.3, 0.7);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== HWB with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^hwb\(240 20% 30% \/ 0\.7\)$/);
+    });
+
+    it("should output Lab with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["lab-color", "xyz-d50-color", "xyz-d65-color", "srgb-linear-color", "srgb-color"],
+        `
+        variable c: Color.Lab;
+        c.l = 75;
+        c.a = 20;
+        c.b = -30;
+        c.alpha = 0.6;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== Lab with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^lab\(75% 20 -30 \/ 0\.6\)$/);
+    });
+
+    it("should output LCH with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        [
+          "lch-color",
+          "lab-color",
+          "xyz-d50-color",
+          "xyz-d65-color",
+          "srgb-linear-color",
+          "srgb-color",
+        ],
+        `
+        variable c: Color.LCH;
+        c.l = 75;
+        c.c = 50;
+        c.h = 180;
+        c.alpha = 0.4;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== LCH with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^lch\(75% 50 180 \/ 0\.4\)$/);
+    });
+
+    it("should output OKLab with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["oklab-color", "xyz-d65-color", "srgb-linear-color", "srgb-color"],
+        `
+        variable c: Color.OKLab;
+        c.l = 0.7;
+        c.a = 0.1;
+        c.b = -0.05;
+        c.alpha = 0.3;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== OKLab with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^oklab\(0\.7 0\.1 -0\.05 \/ 0\.3\)$/);
+    });
+
+    it("should output OKLCH with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["oklch-color", "oklab-color", "xyz-d65-color", "srgb-linear-color", "srgb-color"],
+        `
+        variable c: Color.OKLCH;
+        c.l = 0.7;
+        c.c = 0.15;
+        c.h = 180;
+        c.alpha = 0.9;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== OKLCH with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^oklch\(0\.7 0\.15 180 \/ 0\.9\)$/);
+    });
+
+    it("should output Display-P3 with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["p3-color", "p3-linear-color", "xyz-d65-color", "srgb-linear-color", "srgb-color"],
+        `
+        variable c: Color.P3;
+        c.r = 1;
+        c.g = 0.5;
+        c.b = 0.25;
+        c.alpha = 0.85;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== Display-P3 with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^color\(display-p3 1 0\.5 0\.25 \/ 0\.85\)$/);
+    });
+
+    it("should output sRGB with alpha in CSS format", async () => {
+      const result = await executeWithCssColor(
+        ["srgb-color"],
+        `
+        variable c: Color.SRGB;
+        c.r = 1;
+        c.g = 0.5;
+        c.b = 0.25;
+        c.alpha = 0.2;
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      log.info(`\n=== sRGB with alpha → CSS ===`);
+      log.info(`Output: ${css}`);
+
+      expect(css).toMatch(/^color\(srgb 1 0\.5 0\.25 \/ 0\.2\)$/);
+    });
+
+    it("should handle alpha = 0 (fully transparent)", async () => {
+      const result = await executeWithCssColor(
+        ["rgb-color"],
+        `
+        variable c: Color.Rgb = rgb(255, 0, 0, 0);
+        c.to.css()
+      `,
+      );
+
+      const css = (result as any)?.value?.value?.value || (result as any)?.toString?.();
+      expect(css).toBe("rgb(255 0 0 / 0)");
+    });
+  });
 });

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

@@ -120,4 +120,22 @@ describe("Hex Color Schema", () => {
       expect((result as any).value).toBe("#ffffff");
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should allow setting alpha on hex color", async () => {
+      const result = await executeWithSchema(
+        "hex-color",
+        "type",
+        `
+        variable hex: Color.Hex = #ff0000;
+        hex.alpha = 0.7;
+        hex.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.7);
+    });
+
+    // Note: Conversion tests are in rgb-color/unit.test.ts since RGB owns the conversions
+  });
 });

package/src/schemas/types/hsl-color/hsla-initializer.tokenscript

@@ -0,0 +1,17 @@
+// HSLA Color Initializer
+// Creates an HSL color with alpha from H, S, L, A values
+//
+// Usage: hsla(180, 0.5, 0.5, 0.8) → Color.HSL { h: 180, s: 0.5, l: 0.5, alpha: 0.8 }
+//
+// Input: List of 4 numbers [h, s, l, alpha]
+// Output: Color.HSL with alpha
+
+variable hsl_values: List = {input};
+variable output: Color.HSL;
+
+output.h = hsl_values.get(0);
+output.s = hsl_values.get(1);
+output.l = hsl_values.get(2);
+output.alpha = hsl_values.get(3);
+
+return output;

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

@@ -1,6 +1,6 @@
 // HSL Color Initializer
 // Creates an HSL color from H, S, L values
-// Input: List of [h, s, l] values
+// Input: List of [h, s, l] or [h, s, l, alpha] values
 
 variable hsl_values: List = {input};
 variable output: Color.HSL;
@@ -9,6 +9,11 @@ output.h = hsl_values.get(0);
 output.s = hsl_values.get(1);
 output.l = hsl_values.get(2);
 
+// Set alpha if provided as 4th parameter
+if (hsl_values.length() > 3) [
+  output.alpha = hsl_values.get(3);
+];
+
 return output;
 
 

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

@@ -31,6 +31,15 @@
         "type": "/api/v1/core/tokenscript/0/",
         "script": "./initializer.tokenscript"
       }
+    },
+    {
+      "title": "HSLA Color Initializer",
+      "keyword": "hsla",
+      "description": "Creates an HSL color with alpha from H, S, L, A values",
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./hsla-initializer.tokenscript"
+      }
     }
   ],
   "conversions": [

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

@@ -32,8 +32,9 @@ describe("HSL Color Schema", () => {
     it("should have hsl initializer", async () => {
       const schema = (await getBundledSchema("hsl-color")) as ColorSpecification;
 
-      expect(schema.initializers).toHaveLength(1);
+      expect(schema.initializers).toHaveLength(2);
       expect(schema.initializers[0].keyword).toBe("hsl");
+      expect(schema.initializers[1].keyword).toBe("hsla");
     });
 
     it("should have conversion from sRGB", async () => {
@@ -198,4 +199,97 @@ describe("HSL Color Schema", () => {
       expect((result as any).value.l.value).toBeCloseTo(0.5, 9);
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should accept optional 4th parameter for alpha using hsl()", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable c: Color.HSL = hsl(180, 0.5, 0.5, 0.7);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("HSL");
+      expect((result as any).value.h.value).toBe(180);
+      expect((result as any).value.s.value).toBe(0.5);
+      expect((result as any).value.l.value).toBe(0.5);
+      expect((result as any).alpha).toBe(0.7);
+    });
+
+    it("should create color with hsla() initializer", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable c: Color.HSL = hsla(240, 0.8, 0.6, 0.9);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("HSL");
+      expect((result as any).value.h.value).toBe(240);
+      expect((result as any).value.s.value).toBe(0.8);
+      expect((result as any).value.l.value).toBe(0.6);
+      expect((result as any).alpha).toBe(0.9);
+    });
+
+    it("should get alpha property", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable c: Color.HSL = hsl(0, 1, 0.5, 0.5);
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.5);
+    });
+
+    it("should set alpha property", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable c: Color.HSL = hsl(0, 1, 0.5);
+        c.alpha = 0.8;
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.8);
+    });
+
+    it("should preserve alpha through conversion to sRGB", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable c: Color.HSL = hsl(120, 1, 0.5, 0.6);
+        variable srgb: Color.SRGB = c.to.srgb();
+        srgb.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.6);
+    });
+
+    it("should preserve alpha through conversion from sRGB", async () => {
+      const result = await executeWithSchema(
+        "hsl-color",
+        "type",
+        `
+        variable srgb: Color.SRGB = srgb(1, 0, 0, 0.4);
+        variable c: Color.HSL = srgb.to.hsl();
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.4);
+    });
+  });
 });

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

@@ -1,6 +1,6 @@
 // HSV Color Initializer
 // Creates an HSV color from H, S, V values
-// Input: List of [h, s, v] values
+// Input: List of [h, s, v] or [h, s, v, alpha] values
 
 variable hsv_values: List = {input};
 variable output: Color.HSV;
@@ -9,6 +9,11 @@ output.h = hsv_values.get(0);
 output.s = hsv_values.get(1);
 output.v = hsv_values.get(2);
 
+// Set alpha if provided as 4th parameter
+if (hsv_values.length() > 3) [
+  output.alpha = hsv_values.get(3);
+];
+
 return output;
 
 

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

@@ -159,4 +159,48 @@ describe("HSV Color Schema", () => {
       expect((result as any).value.v.value).toBeCloseTo(0.5, 9);
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should accept optional 4th parameter for alpha", async () => {
+      const result = await executeWithSchema(
+        "hsv-color",
+        "type",
+        `
+        variable c: Color.HSV = hsv(180, 0.5, 0.5, 0.7);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("HSV");
+      expect((result as any).alpha).toBe(0.7);
+    });
+
+    it("should get alpha property", async () => {
+      const result = await executeWithSchema(
+        "hsv-color",
+        "type",
+        `
+        variable c: Color.HSV = hsv(0, 1, 1, 0.5);
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.5);
+    });
+
+    it("should set alpha property", async () => {
+      const result = await executeWithSchema(
+        "hsv-color",
+        "type",
+        `
+        variable c: Color.HSV = hsv(0, 1, 1);
+        c.alpha = 0.8;
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.8);
+    });
+  });
 });

package/src/schemas/types/hwb-color/hwba-initializer.tokenscript

@@ -0,0 +1,17 @@
+// HWBA Color Initializer
+// Creates an HWB color with alpha from H, W, B, A values
+//
+// Usage: hwba(180, 0.2, 0.3, 0.9) → Color.HWB { h: 180, w: 0.2, b: 0.3, alpha: 0.9 }
+//
+// Input: List of 4 numbers [h, w, b, alpha]
+// Output: Color.HWB with alpha
+
+variable hwb_values: List = {input};
+variable output: Color.HWB;
+
+output.h = hwb_values.get(0);
+output.w = hwb_values.get(1);
+output.b = hwb_values.get(2);
+output.alpha = hwb_values.get(3);
+
+return output;

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

@@ -1,6 +1,6 @@
 // HWB Color Initializer
 // Creates an HWB color from H, W, B values
-// Input: List of [h, w, b] values
+// Input: List of [h, w, b] or [h, w, b, alpha] values
 
 variable hwb_values: List = {input};
 variable output: Color.HWB;
@@ -9,6 +9,11 @@ output.h = hwb_values.get(0);
 output.w = hwb_values.get(1);
 output.b = hwb_values.get(2);
 
+// Set alpha if provided as 4th parameter
+if (hwb_values.length() > 3) [
+  output.alpha = hwb_values.get(3);
+];
+
 return output;
 
 

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

@@ -31,6 +31,15 @@
         "type": "/api/v1/core/tokenscript/0/",
         "script": "./initializer.tokenscript"
       }
+    },
+    {
+      "title": "HWBA Color Initializer",
+      "keyword": "hwba",
+      "description": "Creates an HWB color with alpha from H, W, B, A values",
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./hwba-initializer.tokenscript"
+      }
     }
   ],
   "conversions": [

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

@@ -27,6 +27,14 @@ describe("HWB Color Schema", () => {
       expect(schema.schema?.properties).toHaveProperty("w");
       expect(schema.schema?.properties).toHaveProperty("b");
     });
+
+    it("should have hwb initializer", async () => {
+      const schema = (await getBundledSchema("hwb-color")) as ColorSpecification;
+
+      expect(schema.initializers).toHaveLength(2);
+      expect(schema.initializers[0].keyword).toBe("hwb");
+      expect(schema.initializers[1].keyword).toBe("hwba");
+    });
   });
 
   describe("ColorJS Parity", () => {
@@ -147,4 +155,66 @@ describe("HWB Color Schema", () => {
       expect((result as any).value.b.value).toBeCloseTo(0.5, 9);
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should accept optional 4th parameter for alpha using hwb()", async () => {
+      const result = await executeWithSchema(
+        "hwb-color",
+        "type",
+        `
+        variable c: Color.HWB = hwb(180, 0.2, 0.3, 0.7);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("HWB");
+      expect((result as any).alpha).toBe(0.7);
+    });
+
+    it("should create color with hwba() initializer", async () => {
+      const result = await executeWithSchema(
+        "hwb-color",
+        "type",
+        `
+        variable c: Color.HWB = hwba(240, 0.1, 0.2, 0.85);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("HWB");
+      expect((result as any).value.h.value).toBe(240);
+      expect((result as any).value.w.value).toBe(0.1);
+      expect((result as any).value.b.value).toBe(0.2);
+      expect((result as any).alpha).toBe(0.85);
+    });
+
+    it("should get alpha property", async () => {
+      const result = await executeWithSchema(
+        "hwb-color",
+        "type",
+        `
+        variable c: Color.HWB = hwb(0, 0, 0, 0.3);
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.3);
+    });
+
+    it("should set alpha property", async () => {
+      const result = await executeWithSchema(
+        "hwb-color",
+        "type",
+        `
+        variable c: Color.HWB = hwb(0, 0, 0);
+        c.alpha = 0.9;
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.9);
+    });
+  });
 });

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

@@ -1,6 +1,6 @@
 // CIE Lab Color Initializer
 // Creates a Lab color from L, a, b values
-// Input: List of [l, a, b] values
+// Input: List of [l, a, b] or [l, a, b, alpha] values
 
 variable lab_values: List = {input};
 variable output: Color.Lab;
@@ -9,6 +9,11 @@ output.l = lab_values.get(0);
 output.a = lab_values.get(1);
 output.b = lab_values.get(2);
 
+// Set alpha if provided as 4th parameter
+if (lab_values.length() > 3) [
+  output.alpha = lab_values.get(3);
+];
+
 return output;
 
 

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

@@ -260,4 +260,48 @@ describe("CIE Lab Color Schema", () => {
       expect(Math.abs((result as any).value.b.value)).toBeLessThan(0.01);
     });
   });
+
+  describe("Alpha Channel Support", () => {
+    it("should accept optional 4th parameter for alpha", async () => {
+      const result = await executeWithSchema(
+        "lab-color",
+        "type",
+        `
+        variable c: Color.Lab = lab(50, 20, 30, 0.7);
+        c
+      `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      expect((result as any).subType).toBe("Lab");
+      expect((result as any).alpha).toBe(0.7);
+    });
+
+    it("should get alpha property", async () => {
+      const result = await executeWithSchema(
+        "lab-color",
+        "type",
+        `
+        variable c: Color.Lab = lab(50, 20, 30, 0.5);
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.5);
+    });
+
+    it("should set alpha property", async () => {
+      const result = await executeWithSchema(
+        "lab-color",
+        "type",
+        `
+        variable c: Color.Lab = lab(50, 20, 30);
+        c.alpha = 0.8;
+        c.alpha
+      `,
+      );
+
+      expect((result as any).value).toBe(0.8);
+    });
+  });
 });