@tokens-studio/tokenscript-schemas 0.0.11 → 0.0.13

package/src/schemas/functions/scale_lightness/unit.test.ts

@@ -0,0 +1,73 @@
+/**
+ * Unit tests for the scale_lightness function
+ * Scales a color's lightness by a factor
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("scale_lightness function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema(
+        "scale_lightness",
+        "function",
+      )) as FunctionSpecification;
+
+      expect(schema.name).toBe("scale_lightness");
+      expect(schema.type).toBe("function");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should increase lightness with factor > 1", async () => {
+      const result = await executeWithSchema(
+        "scale_lightness",
+        "function",
+        `
+        variable gray: Color.SRGB;
+        gray.r = 0.5; gray.g = 0.5; gray.b = 0.5;
+        scale_lightness(gray, 1.2).to.srgb()
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const r = (result as any).value?.r?.value ?? (result as any).value?.r;
+      expect(r).toBeGreaterThan(0.5);
+    });
+
+    it("should decrease lightness with factor < 1", async () => {
+      const result = await executeWithSchema(
+        "scale_lightness",
+        "function",
+        `
+        variable white: Color.SRGB;
+        white.r = 1; white.g = 1; white.b = 1;
+        scale_lightness(white, 0.5).to.srgb()
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const r = (result as any).value?.r?.value ?? (result as any).value?.r;
+      expect(r).toBeLessThan(0.9);
+      expect(r).toBeGreaterThan(0.3);
+    });
+
+    it("should clamp to 0 with factor 0", async () => {
+      const result = await executeWithSchema(
+        "scale_lightness",
+        "function",
+        `
+        variable gray: Color.SRGB;
+        gray.r = 0.5; gray.g = 0.5; gray.b = 0.5;
+        scale_lightness(gray, 0).to.srgb()
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const r = (result as any).value?.r?.value ?? (result as any).value?.r;
+      expect(r).toBeCloseTo(0, 1);
+    });
+  });
+});

package/src/schemas/functions/sepia/schema.json

@@ -0,0 +1,48 @@
+{
+  "name": "sepia",
+  "type": "function",
+  "description": "Applies a sepia tone to a color, simulating the warm brownish tint of aged photographs. Uses the standard sepia matrix transformation. Amount parameter controls intensity from 0 (no effect) to 1 (full sepia).",
+  "keyword": "sepia",
+  "requirements": ["/api/v1/core/srgb-color/0/"],
+  "schema": {
+    "type": "object",
+    "properties": {
+      "input": {
+        "type": "array",
+        "items": [
+          {
+            "description": "Color to transform",
+            "type": "color"
+          },
+          {
+            "description": "Sepia intensity (0-1), default 1",
+            "type": "number"
+          }
+        ],
+        "minItems": 1,
+        "maxItems": 2
+      }
+    },
+    "required": ["input"]
+  },
+  "returns": {
+    "type": "color",
+    "description": "Color with sepia tone applied"
+  },
+  "script": {
+    "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+    "script": "./sepia.tokenscript"
+  },
+  "examples": [
+    {
+      "description": "Full sepia",
+      "input": ["#808080", 1],
+      "output": "Warm brownish gray"
+    },
+    {
+      "description": "Partial sepia",
+      "input": ["#808080", 0.5],
+      "output": "Subtly warm gray"
+    }
+  ]
+}

package/src/schemas/functions/sepia/sepia.tokenscript

@@ -0,0 +1,54 @@
+// sepia: Apply sepia tone transformation
+// Reference: CSS Filter Effects Module Level 1
+// Reference: https://www.w3.org/TR/filter-effects-1/#sepiaEquivalent
+//
+// Uses the standard sepia matrix transformation as defined in CSS.
+// The amount parameter controls intensity (0 = no effect, 1 = full sepia).
+//
+// Matrix coefficients:
+//   R' = 0.393R + 0.769G + 0.189B
+//   G' = 0.349R + 0.686G + 0.168B
+//   B' = 0.272R + 0.534G + 0.131B
+
+variable input: List = {input};
+variable color: Color.SRGB = input.get(0).to.srgb();
+variable amount: Number = 1;
+
+if (input.length() > 1) [
+    amount = input.get(1);
+];
+
+// Clamp amount
+if (amount < 0) [ amount = 0; ];
+if (amount > 1) [ amount = 1; ];
+
+variable r: Number = color.r;
+variable g: Number = color.g;
+variable b: Number = color.b;
+
+// Standard sepia matrix transformation (CSS filter spec)
+// R' = 0.393R + 0.769G + 0.189B
+// G' = 0.349R + 0.686G + 0.168B
+// B' = 0.272R + 0.534G + 0.131B
+variable sepia_r: Number = (r * 0.393) + (g * 0.769) + (b * 0.189);
+variable sepia_g: Number = (r * 0.349) + (g * 0.686) + (b * 0.168);
+variable sepia_b: Number = (r * 0.272) + (g * 0.534) + (b * 0.131);
+
+// Clamp sepia values to valid range
+if (sepia_r > 1) [ sepia_r = 1; ];
+if (sepia_g > 1) [ sepia_g = 1; ];
+if (sepia_b > 1) [ sepia_b = 1; ];
+
+// Interpolate between original and sepia based on amount
+variable new_r: Number = r + (sepia_r - r) * amount;
+variable new_g: Number = g + (sepia_g - g) * amount;
+variable new_b: Number = b + (sepia_b - b) * amount;
+
+// Create result
+variable result: Color.SRGB;
+result.r = new_r;
+result.g = new_g;
+result.b = new_b;
+
+return result;
+

package/src/schemas/functions/sepia/unit.test.ts

@@ -0,0 +1,88 @@
+/**
+ * Unit tests for the sepia function
+ * Applies sepia tone transformation
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("sepia function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("sepia", "function")) as FunctionSpecification;
+
+      expect(schema.name).toBe("sepia");
+      expect(schema.type).toBe("function");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should apply full sepia tone to gray", async () => {
+      const result = await executeWithSchema(
+        "sepia",
+        "function",
+        `
+        variable gray: Color.SRGB;
+        gray.r = 0.5; gray.g = 0.5; gray.b = 0.5;
+        sepia(gray, 1)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      // Sepia should have more red than blue
+      const r = (result as any).value?.r?.value ?? (result as any).value?.r;
+      const b = (result as any).value?.b?.value ?? (result as any).value?.b;
+      expect(r).toBeGreaterThan(b);
+    });
+
+    it("should apply partial sepia with amount 0.5", async () => {
+      const result = await executeWithSchema(
+        "sepia",
+        "function",
+        `
+        variable gray: Color.SRGB;
+        gray.r = 0.5; gray.g = 0.5; gray.b = 0.5;
+        sepia(gray, 0.5)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      // Partial sepia still has warm tint
+      const r = (result as any).value?.r?.value ?? (result as any).value?.r;
+      const b = (result as any).value?.b?.value ?? (result as any).value?.b;
+      expect(r).toBeGreaterThan(b);
+    });
+
+    it("should return original color with amount 0", async () => {
+      const result = await executeWithSchema(
+        "sepia",
+        "function",
+        `
+        variable blue: Color.SRGB;
+        blue.r = 0; blue.g = 0; blue.b = 1;
+        sepia(blue, 0)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      // Should be unchanged
+      const b = (result as any).value?.b?.value ?? (result as any).value?.b;
+      expect(b).toBeCloseTo(1, 1);
+    });
+
+    it("should use default amount if not provided", async () => {
+      const result = await executeWithSchema(
+        "sepia",
+        "function",
+        `
+        variable gray: Color.SRGB;
+        gray.r = 0.5; gray.g = 0.5; gray.b = 0.5;
+        sepia(gray)
+        `,
+      );
+
+      expect(result).toBeDefined();
+    });
+  });
+});

package/src/schemas/functions/set_chroma/schema.json

@@ -0,0 +1,24 @@
+{
+  "name": "Set Chroma",
+  "type": "function",
+  "description": "Sets a color's chroma (saturation) to a specific value in OKLCH space. Preserves hue and lightness.",
+  "keyword": "set_chroma",
+  "input": {
+    "type": "object",
+    "properties": {
+      "color": {
+        "type": "color",
+        "description": "The color to modify"
+      },
+      "chroma": {
+        "type": "number",
+        "description": "Target chroma (0-0.4 typical for sRGB)"
+      }
+    }
+  },
+  "script": {
+    "type": "/api/v1/core/tokenscript/0/",
+    "script": "./set-chroma.tokenscript"
+  },
+  "requirements": ["/api/v1/core/oklch-color/0/", "/api/v1/core/srgb-color/0/"]
+}

package/src/schemas/functions/set_chroma/set-chroma.tokenscript

@@ -0,0 +1,18 @@
+// Set a color's chroma to a specific value
+// Preserves hue and lightness
+
+variable input: List = {input};
+variable color: Color.OKLCH = input.get(0).to.oklch();
+variable target_c: Number = input.get(1);
+
+// Clamp to valid range (0 to ~0.4 for sRGB gamut)
+if (target_c < 0) [ target_c = 0; ];
+if (target_c > 0.4) [ target_c = 0.4; ];
+
+variable result: Color.OKLCH;
+result.l = color.l;
+result.c = target_c;
+result.h = color.h;
+
+return result;
+

package/src/schemas/functions/set_chroma/unit.test.ts

@@ -0,0 +1,79 @@
+/**
+ * Unit tests for the Set Chroma function
+ * Sets a color's chroma (saturation) to a specific value in OKLCH
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("Set Chroma Function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("set_chroma", "function")) as FunctionSpecification;
+
+      expect(schema.name).toBe("Set Chroma");
+      expect(schema.type).toBe("function");
+      expect(schema.keyword).toBe("set_chroma");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should set chroma to 0 (grayscale)", async () => {
+      const result = await executeWithSchema(
+        "set_chroma",
+        "function",
+        `
+        variable red: Color.SRGB;
+        red.r = 0.9; red.g = 0.2; red.b = 0.2;
+        set_chroma(red, 0).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      // Should be gray (all channels similar)
+      expect(Math.abs(r - g)).toBeLessThan(0.1);
+      expect(Math.abs(g - b)).toBeLessThan(0.1);
+    });
+
+    it("should increase chroma for muted color", async () => {
+      const result = await executeWithSchema(
+        "set_chroma",
+        "function",
+        `
+        variable muted: Color.SRGB;
+        muted.r = 0.5; muted.g = 0.45; muted.b = 0.48;
+        set_chroma(muted, 0.15).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      // Should be more saturated (more spread between channels)
+      expect(Math.abs(r - g)).toBeGreaterThan(0);
+    });
+
+    it("should preserve lightness", async () => {
+      const result = await executeWithSchema(
+        "set_chroma",
+        "function",
+        `
+        variable bright: Color.SRGB;
+        bright.r = 0.9; bright.g = 0.85; bright.b = 0.5;
+        set_chroma(bright, 0.1).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      // Should still be relatively bright
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      expect((r + g + b) / 3).toBeGreaterThan(0.5);
+    });
+  });
+});

package/src/schemas/functions/set_hue/schema.json

@@ -0,0 +1,24 @@
+{
+  "name": "Set Hue",
+  "type": "function",
+  "description": "Sets a color's hue to a specific angle in OKLCH space. Preserves lightness and chroma.",
+  "keyword": "set_hue",
+  "input": {
+    "type": "object",
+    "properties": {
+      "color": {
+        "type": "color",
+        "description": "The color to modify"
+      },
+      "hue": {
+        "type": "number",
+        "description": "Target hue angle (0-360)"
+      }
+    }
+  },
+  "script": {
+    "type": "/api/v1/core/tokenscript/0/",
+    "script": "./set-hue.tokenscript"
+  },
+  "requirements": ["/api/v1/core/oklch-color/0/", "/api/v1/core/srgb-color/0/"]
+}

package/src/schemas/functions/set_hue/set-hue.tokenscript

@@ -0,0 +1,18 @@
+// Set a color's hue to a specific angle
+// Preserves lightness and chroma
+
+variable input: List = {input};
+variable color: Color.OKLCH = input.get(0).to.oklch();
+variable target_h: Number = input.get(1);
+
+// Normalize to 0-360
+while (target_h >= 360) [ target_h = target_h - 360; ];
+while (target_h < 0) [ target_h = target_h + 360; ];
+
+variable result: Color.OKLCH;
+result.l = color.l;
+result.c = color.c;
+result.h = target_h;
+
+return result;
+

package/src/schemas/functions/set_hue/unit.test.ts

@@ -0,0 +1,90 @@
+/**
+ * Unit tests for the Set Hue function
+ * Sets a color's hue to a specific angle in OKLCH
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("Set Hue Function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("set_hue", "function")) as FunctionSpecification;
+
+      expect(schema.name).toBe("Set Hue");
+      expect(schema.type).toBe("function");
+      expect(schema.keyword).toBe("set_hue");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should set hue to 0 (red)", async () => {
+      const result = await executeWithSchema(
+        "set_hue",
+        "function",
+        `
+        variable blue: Color.SRGB;
+        blue.r = 0.2; blue.g = 0.3; blue.b = 0.9;
+        set_hue(blue, 30).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      // At hue ~30° should be more orange/red-ish
+      const r = (result as any).value.r.value;
+      const b = (result as any).value.b.value;
+      expect(r).toBeGreaterThan(b);
+    });
+
+    it("should set hue to 120 (green)", async () => {
+      const result = await executeWithSchema(
+        "set_hue",
+        "function",
+        `
+        variable red: Color.SRGB;
+        red.r = 0.9; red.g = 0.2; red.b = 0.2;
+        set_hue(red, 140).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      // At hue ~140° should be green-ish
+      expect(g).toBeGreaterThan(r);
+    });
+
+    it("should set hue to 240 (blue)", async () => {
+      const result = await executeWithSchema(
+        "set_hue",
+        "function",
+        `
+        variable green: Color.SRGB;
+        green.r = 0.2; green.g = 0.8; green.b = 0.3;
+        set_hue(green, 260).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      // At hue ~260° should be blue-ish
+      expect(b).toBeGreaterThan(g);
+    });
+
+    it("should preserve lightness and chroma", async () => {
+      const result = await executeWithSchema(
+        "set_hue",
+        "function",
+        `
+        variable color: Color.SRGB;
+        color.r = 0.7; color.g = 0.3; color.b = 0.5;
+        set_hue(color, 180).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+    });
+  });
+});

package/src/schemas/functions/set_lightness/schema.json

@@ -0,0 +1,24 @@
+{
+  "name": "Set Lightness",
+  "type": "function",
+  "description": "Sets a color's lightness to a specific value in OKLCH space. Preserves hue and chroma.",
+  "keyword": "set_lightness",
+  "input": {
+    "type": "object",
+    "properties": {
+      "color": {
+        "type": "color",
+        "description": "The color to modify"
+      },
+      "lightness": {
+        "type": "number",
+        "description": "Target lightness (0-1)"
+      }
+    }
+  },
+  "script": {
+    "type": "/api/v1/core/tokenscript/0/",
+    "script": "./set-lightness.tokenscript"
+  },
+  "requirements": ["/api/v1/core/oklch-color/0/", "/api/v1/core/srgb-color/0/"]
+}

package/src/schemas/functions/set_lightness/set-lightness.tokenscript

@@ -0,0 +1,18 @@
+// Set a color's lightness to a specific value
+// Preserves hue and chroma
+
+variable input: List = {input};
+variable color: Color.OKLCH = input.get(0).to.oklch();
+variable target_l: Number = input.get(1);
+
+// Clamp to valid range
+if (target_l < 0) [ target_l = 0; ];
+if (target_l > 1) [ target_l = 1; ];
+
+variable result: Color.OKLCH;
+result.l = target_l;
+result.c = color.c;
+result.h = color.h;
+
+return result;
+

package/src/schemas/functions/set_lightness/unit.test.ts

@@ -0,0 +1,80 @@
+/**
+ * Unit tests for the Set Lightness function
+ * Sets a color's lightness to a specific value in OKLCH
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("Set Lightness Function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("set_lightness", "function")) as FunctionSpecification;
+
+      expect(schema.name).toBe("Set Lightness");
+      expect(schema.type).toBe("function");
+      expect(schema.keyword).toBe("set_lightness");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should set lightness to 0 (black)", async () => {
+      const result = await executeWithSchema(
+        "set_lightness",
+        "function",
+        `
+        variable color: Color.SRGB;
+        color.r = 0.8; color.g = 0.3; color.b = 0.5;
+        set_lightness(color, 0).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      // Should be very dark
+      expect(r + g + b).toBeLessThan(0.1);
+    });
+
+    it("should set lightness to 1 (white)", async () => {
+      const result = await executeWithSchema(
+        "set_lightness",
+        "function",
+        `
+        variable color: Color.SRGB;
+        color.r = 0.2; color.g = 0.5; color.b = 0.3;
+        set_lightness(color, 1).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      // Should be very bright
+      expect(r + g + b).toBeGreaterThan(2.5);
+    });
+
+    it("should preserve hue", async () => {
+      const result = await executeWithSchema(
+        "set_lightness",
+        "function",
+        `
+        variable red: Color.SRGB;
+        red.r = 0.9; red.g = 0.1; red.b = 0.1;
+        set_lightness(red, 0.7).to.srgb()
+        `,
+      );
+
+      expect(result?.constructor.name).toBe("ColorSymbol");
+      const r = (result as any).value.r.value;
+      const g = (result as any).value.g.value;
+      const b = (result as any).value.b.value;
+      // Should still be red-ish
+      expect(r).toBeGreaterThan(g);
+      expect(r).toBeGreaterThan(b);
+    });
+  });
+});

package/src/schemas/functions/shade_scale/schema.json

@@ -0,0 +1,24 @@
+{
+  "name": "Shade Scale",
+  "type": "function",
+  "description": "Generates a Tailwind/Material-style shade scale from 50 (lightest) to 900 (darkest). The input color becomes the 500 (middle) value. Perfect for design system color tokens.",
+  "keyword": "shade_scale",
+  "input": {
+    "type": "object",
+    "properties": {
+      "color": {
+        "type": "color",
+        "description": "Base color (becomes the 500 shade)"
+      },
+      "count": {
+        "type": "number",
+        "description": "Number of shades. Default is 10 (50-900)"
+      }
+    }
+  },
+  "script": {
+    "type": "/api/v1/core/tokenscript/0/",
+    "script": "./shade-scale.tokenscript"
+  },
+  "requirements": ["/api/v1/core/oklch-color/0/", "/api/v1/core/srgb-color/0/"]
+}