@tokens-studio/tokenscript-schemas 0.0.11 → 0.0.13

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

@@ -0,0 +1,48 @@
+{
+  "name": "wcag_level",
+  "type": "function",
+  "description": "Returns the WCAG 2.1 compliance level for a foreground/background color pair. Returns 'AAA' (ratio >= 7:1), 'AA' (ratio >= 4.5:1), 'AA-large' (ratio >= 3:1), or 'fail' (ratio < 3:1). Based on W3C WCAG 2.1 Success Criteria 1.4.3 and 1.4.6.",
+  "keyword": "wcag_level",
+  "requirements": ["/api/v1/core/srgb-color/0/", "/api/v1/core/xyz-d65-color/0/"],
+  "schema": {
+    "type": "object",
+    "properties": {
+      "input": {
+        "type": "array",
+        "items": [
+          {
+            "description": "Foreground color (text)",
+            "type": "color"
+          },
+          {
+            "description": "Background color",
+            "type": "color"
+          }
+        ],
+        "minItems": 2,
+        "maxItems": 2
+      }
+    },
+    "required": ["input"]
+  },
+  "returns": {
+    "type": "string",
+    "description": "WCAG level: 'AAA', 'AA', 'AA-large', or 'fail'"
+  },
+  "script": {
+    "type": "https://schema.tokenscript.dev.gcp.tokens.studio/api/v1/core/tokenscript/0/",
+    "script": "./wcag-level.tokenscript"
+  },
+  "examples": [
+    {
+      "description": "Black on white passes AAA",
+      "input": ["#000000", "#ffffff"],
+      "output": "AAA"
+    },
+    {
+      "description": "Gray on white may only pass AA-large",
+      "input": ["#767676", "#ffffff"],
+      "output": "AA"
+    }
+  ]
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Unit tests for the wcag_level function
+ * Returns WCAG compliance level for a color pair
+ */
+
+import { executeWithSchema, getBundledSchema } from "@tests/helpers/schema-test-utils";
+import { describe, expect, it } from "vitest";
+import type { FunctionSpecification } from "@/bundler/types";
+
+describe("wcag_level function", () => {
+  describe("Schema Definition", () => {
+    it("should have correct schema structure", async () => {
+      const schema = (await getBundledSchema("wcag_level", "function")) as FunctionSpecification;
+
+      expect(schema.name).toBe("wcag_level");
+      expect(schema.type).toBe("function");
+    });
+  });
+
+  describe("Function Execution", () => {
+    it("should return AAA for black on white (ratio 21:1)", async () => {
+      const result = await executeWithSchema(
+        "wcag_level",
+        "function",
+        `
+        variable black: Color.SRGB;
+        black.r = 0; black.g = 0; black.b = 0;
+        variable white: Color.SRGB;
+        white.r = 1; white.g = 1; white.b = 1;
+        wcag_level(black, white)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const level = (result as any).value ?? result;
+      expect(level).toBe("AAA");
+    });
+
+    it("should return AAA for white on black", async () => {
+      const result = await executeWithSchema(
+        "wcag_level",
+        "function",
+        `
+        variable black: Color.SRGB;
+        black.r = 0; black.g = 0; black.b = 0;
+        variable white: Color.SRGB;
+        white.r = 1; white.g = 1; white.b = 1;
+        wcag_level(white, black)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const level = (result as any).value ?? result;
+      expect(level).toBe("AAA");
+    });
+
+    it("should return fail for low contrast colors", async () => {
+      const result = await executeWithSchema(
+        "wcag_level",
+        "function",
+        `
+        variable light_gray: Color.SRGB;
+        light_gray.r = 0.8; light_gray.g = 0.8; light_gray.b = 0.8;
+        variable white: Color.SRGB;
+        white.r = 1; white.g = 1; white.b = 1;
+        wcag_level(light_gray, white)
+        `,
+      );
+
+      expect(result).toBeDefined();
+      const level = (result as any).value ?? result;
+      expect(level).toBe("fail");
+    });
+  });
+});

package/src/schemas/functions/wcag_level/wcag-level.tokenscript

@@ -0,0 +1,50 @@
+// wcag_level: Determine WCAG 2.1 compliance level for a color pair
+// Reference: WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum)
+// Reference: WCAG 2.1 Success Criterion 1.4.6 (Contrast Enhanced)
+// Reference: https://www.w3.org/TR/WCAG21/#contrast-minimum
+//
+// Returns one of:
+//   "AAA"      - Ratio >= 7:1 (enhanced contrast for normal text)
+//   "AA"       - Ratio >= 4.5:1 (minimum for normal text)
+//   "AA-large" - Ratio >= 3:1 (minimum for large text: 18pt or 14pt bold)
+//   "fail"     - Ratio < 3:1 (does not meet any criterion)
+
+variable input: List = {input};
+variable fg_xyz: Color.XYZD65 = input.get(0).to.xyzd65();
+variable bg_xyz: Color.XYZD65 = input.get(1).to.xyzd65();
+
+variable l1: Number = fg_xyz.y;
+variable l2: Number = bg_xyz.y;
+
+// Ensure l1 is the lighter of the two
+if (l2 > l1) [
+    variable temp: Number = l1;
+    l1 = l2;
+    l2 = temp;
+];
+
+// Calculate contrast ratio per WCAG formula
+// Ratio = (L1 + 0.05) / (L2 + 0.05)
+variable ratio: Number = (l1 + 0.05) / (l2 + 0.05);
+
+// Determine WCAG level
+// AAA: ratio >= 7:1 (enhanced contrast)
+// AA: ratio >= 4.5:1 (minimum for normal text)
+// AA-large: ratio >= 3:1 (minimum for large text, 18pt+ or 14pt+ bold)
+// fail: ratio < 3:1
+
+variable result: String = "fail";
+
+if (ratio >= 7) [
+    result = "AAA";
+] else [
+    if (ratio >= 4.5) [
+        result = "AA";
+    ] else [
+        if (ratio >= 3) [
+            result = "AA-large";
+        ];
+    ];
+];
+
+return result;

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

@@ -0,0 +1,16 @@
+// HSL to CSS Conversion
+// Converts HSL to CSS hsl() syntax
+// CSS Color Level 4: hsl(h s l) where s and l are percentages
+//
+// Input: Color.HSL with h (0-360), s (0-1), l (0-1)
+// Output: Color.CSS with value like "hsl(120 50% 75%)"
+
+variable precision: Number = 100;
+variable h: Number = round({input}.h * precision) / precision;
+variable s: Number = round({input}.s * 100 * precision) / precision;
+variable l: Number = round({input}.l * 100 * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "hsl(".concat(h.to_string()).concat(" ").concat(s.to_string()).concat("% ").concat(l.to_string()).concat("%)");
+return output;
+

package/src/schemas/types/css-color/from-hwb-color.tokenscript

@@ -0,0 +1,16 @@
+// HWB to CSS Conversion
+// Converts HWB to CSS hwb() syntax
+// CSS Color Level 4: hwb(h w b) where w and b are percentages
+//
+// Input: Color.HWB with h (0-360), w (0-1), b (0-1)
+// Output: Color.CSS with value like "hwb(120 10% 20%)"
+
+variable precision: Number = 100;
+variable h: Number = round({input}.h * precision) / precision;
+variable w: Number = round({input}.w * 100 * precision) / precision;
+variable b_val: Number = round({input}.b * 100 * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "hwb(".concat(h.to_string()).concat(" ").concat(w.to_string()).concat("% ").concat(b_val.to_string()).concat("%)");
+return output;
+

package/src/schemas/types/css-color/from-lab-color.tokenscript

@@ -0,0 +1,16 @@
+// CIE Lab to CSS Conversion
+// Converts CIE Lab to CSS lab() syntax
+// CSS Color Level 4: lab(L a b) where L is a percentage
+//
+// Input: Color.Lab with l (0-100), a, b
+// Output: Color.CSS with value like "lab(75% 20 -30)"
+
+variable precision: Number = 10000;
+variable l: Number = round({input}.l * precision) / precision;
+variable a: Number = round({input}.a * precision) / precision;
+variable b_val: Number = round({input}.b * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "lab(".concat(l.to_string()).concat("% ").concat(a.to_string()).concat(" ").concat(b_val.to_string()).concat(")");
+return output;
+

package/src/schemas/types/css-color/from-lch-color.tokenscript

@@ -0,0 +1,16 @@
+// CIE LCH to CSS Conversion
+// Converts CIE LCH to CSS lch() syntax
+// CSS Color Level 4: lch(L C H) where L is a percentage
+//
+// Input: Color.LCH with l (0-100), c, h (0-360)
+// Output: Color.CSS with value like "lch(75% 50 180)"
+
+variable precision: Number = 10000;
+variable l: Number = round({input}.l * precision) / precision;
+variable c: Number = round({input}.c * precision) / precision;
+variable h: Number = round({input}.h * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "lch(".concat(l.to_string()).concat("% ").concat(c.to_string()).concat(" ").concat(h.to_string()).concat(")");
+return output;
+

package/src/schemas/types/css-color/from-oklab-color.tokenscript

@@ -0,0 +1,16 @@
+// OKLab to CSS Conversion
+// Converts OKLab to CSS oklab() syntax
+// CSS Color Level 4: oklab(L a b) where L is 0-1 decimal
+//
+// Input: Color.OKLab with l (0-1), a, b
+// Output: Color.CSS with value like "oklab(0.7 0.1 -0.05)"
+
+variable precision: Number = 100000;
+variable l: Number = round({input}.l * precision) / precision;
+variable a: Number = round({input}.a * precision) / precision;
+variable b_val: Number = round({input}.b * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "oklab(".concat(l.to_string()).concat(" ").concat(a.to_string()).concat(" ").concat(b_val.to_string()).concat(")");
+return output;
+

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

@@ -0,0 +1,16 @@
+// OKLCH to CSS Conversion
+// Converts OKLCH to CSS oklch() syntax
+// CSS Color Level 4: oklch(L C H) where L is 0-1 decimal
+//
+// Input: Color.OKLCH with l (0-1), c, h (0-360)
+// Output: Color.CSS with value like "oklch(0.7 0.15 180)"
+
+variable precision: Number = 100000;
+variable l: Number = round({input}.l * precision) / precision;
+variable c: Number = round({input}.c * precision) / precision;
+variable h: Number = round({input}.h * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "oklch(".concat(l.to_string()).concat(" ").concat(c.to_string()).concat(" ").concat(h.to_string()).concat(")");
+return output;
+

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

@@ -0,0 +1,16 @@
+// Display-P3 to CSS Conversion
+// Converts Display-P3 to CSS color(display-p3) syntax
+// CSS Color Level 4: color(display-p3 r g b)
+//
+// Input: Color.P3 with r, g, b in 0-1 range
+// Output: Color.CSS with value like "color(display-p3 1 0.5 0.25)"
+
+variable precision: Number = 100000;
+variable r: Number = round({input}.r * precision) / precision;
+variable g: Number = round({input}.g * precision) / precision;
+variable b: Number = round({input}.b * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "color(display-p3 ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+return output;
+

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

@@ -0,0 +1,15 @@
+// RGB to CSS Conversion
+// Converts RGB (0-255) to CSS rgb() syntax
+// CSS Color Level 4 modern syntax: rgb(r g b)
+//
+// Input: Color.Rgb with r, g, b in 0-255 range
+// Output: Color.CSS with value like "rgb(255 128 64)"
+
+variable r: Number = round({input}.r);
+variable g: Number = round({input}.g);
+variable b: Number = round({input}.b);
+
+variable output: Color.CSS;
+output.value = "rgb(".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+return output;
+

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

@@ -0,0 +1,16 @@
+// sRGB to CSS Conversion
+// Converts sRGB (0-1) to CSS color(srgb) syntax
+// CSS Color Level 4: color(srgb r g b)
+//
+// Input: Color.SRGB with r, g, b in 0-1 range
+// Output: Color.CSS with value like "color(srgb 1 0.5 0.25)"
+
+variable precision: Number = 100000;
+variable r: Number = round({input}.r * precision) / precision;
+variable g: Number = round({input}.g * precision) / precision;
+variable b: Number = round({input}.b * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "color(srgb ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+return output;
+

package/src/schemas/types/css-color/from-srgb-linear-color.tokenscript

@@ -0,0 +1,16 @@
+// Linear sRGB to CSS Conversion
+// Converts Linear sRGB to CSS color(srgb-linear) syntax
+// CSS Color Level 4: color(srgb-linear r g b)
+//
+// Input: Color.LinearSRGB with r, g, b in 0-1 range
+// Output: Color.CSS with value like "color(srgb-linear 1 0.25 0.0625)"
+
+variable precision: Number = 100000;
+variable r: Number = round({input}.r * precision) / precision;
+variable g: Number = round({input}.g * precision) / precision;
+variable b: Number = round({input}.b * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "color(srgb-linear ".concat(r.to_string()).concat(" ").concat(g.to_string()).concat(" ").concat(b.to_string()).concat(")");
+return output;
+

package/src/schemas/types/css-color/from-xyz-d50-color.tokenscript

@@ -0,0 +1,16 @@
+// XYZ-D50 to CSS Conversion
+// Converts XYZ-D50 to CSS color(xyz-d50) syntax
+// CSS Color Level 4: color(xyz-d50 x y z)
+//
+// Input: Color.XYZD50 with x, y, z tristimulus values
+// Output: Color.CSS with value like "color(xyz-d50 0.4360 0.2225 0.0139)"
+
+variable precision: Number = 100000;
+variable x: Number = round({input}.x * precision) / precision;
+variable y: Number = round({input}.y * precision) / precision;
+variable z: Number = round({input}.z * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "color(xyz-d50 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string()).concat(")");
+return output;
+

package/src/schemas/types/css-color/from-xyz-d65-color.tokenscript

@@ -0,0 +1,16 @@
+// XYZ-D65 to CSS Conversion
+// Converts XYZ-D65 to CSS color(xyz-d65) syntax
+// CSS Color Level 4: color(xyz-d65 x y z) or color(xyz x y z)
+//
+// Input: Color.XYZD65 with x, y, z tristimulus values
+// Output: Color.CSS with value like "color(xyz-d65 0.4124 0.2126 0.0193)"
+
+variable precision: Number = 100000;
+variable x: Number = round({input}.x * precision) / precision;
+variable y: Number = round({input}.y * precision) / precision;
+variable z: Number = round({input}.z * precision) / precision;
+
+variable output: Color.CSS;
+output.value = "color(xyz-d65 ".concat(x.to_string()).concat(" ").concat(y.to_string()).concat(" ").concat(z.to_string()).concat(")");
+return output;
+

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

@@ -0,0 +1,13 @@
+// CSS Color Initializer
+// Accepts a CSS color string and returns it
+// This is primarily used for type registration; 
+// the main usage is converting TO css from other color types
+//
+// Input: String (CSS color value)
+// Output: String (same value)
+
+variable input: List = {input};
+variable value: String = input.get(0);
+
+return value;
+

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

@@ -0,0 +1,148 @@
+{
+  "name": "CSS",
+  "type": "color",
+  "description": "CSS color string representation. Outputs the appropriate CSS syntax for any color space.",
+  "schema": {
+    "type": "object",
+    "properties": {
+      "value": {
+        "type": "string",
+        "description": "CSS color string (e.g., 'rgb(255 128 64)', 'oklch(0.7 0.15 180)')"
+      }
+    },
+    "required": ["value"]
+  },
+  "initializers": [
+    {
+      "title": "CSS Color Initializer",
+      "keyword": "css",
+      "description": "Creates a CSS color from a string value",
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./initializer.tokenscript"
+      }
+    }
+  ],
+  "conversions": [
+    {
+      "source": "/api/v1/core/rgb-color/0/",
+      "target": "$self",
+      "description": "Converts RGB (0-255) to CSS rgb() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-rgb-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/srgb-color/0/",
+      "target": "$self",
+      "description": "Converts sRGB (0-1) to CSS color(srgb) syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-srgb-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/hsl-color/0/",
+      "target": "$self",
+      "description": "Converts HSL to CSS hsl() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-hsl-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/hwb-color/0/",
+      "target": "$self",
+      "description": "Converts HWB to CSS hwb() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-hwb-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/lab-color/0/",
+      "target": "$self",
+      "description": "Converts CIE Lab to CSS lab() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-lab-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/lch-color/0/",
+      "target": "$self",
+      "description": "Converts CIE LCH to CSS lch() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-lch-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/oklab-color/0/",
+      "target": "$self",
+      "description": "Converts OKLab to CSS oklab() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-oklab-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/oklch-color/0/",
+      "target": "$self",
+      "description": "Converts OKLCH to CSS oklch() syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-oklch-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/srgb-linear-color/0/",
+      "target": "$self",
+      "description": "Converts Linear sRGB to CSS color(srgb-linear) syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-srgb-linear-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/xyz-d65-color/0/",
+      "target": "$self",
+      "description": "Converts XYZ-D65 to CSS color(xyz-d65) syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-xyz-d65-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/xyz-d50-color/0/",
+      "target": "$self",
+      "description": "Converts XYZ-D50 to CSS color(xyz-d50) syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-xyz-d50-color.tokenscript"
+      }
+    },
+    {
+      "source": "/api/v1/core/p3-color/0/",
+      "target": "$self",
+      "description": "Converts Display-P3 to CSS color(display-p3) syntax",
+      "lossless": true,
+      "script": {
+        "type": "/api/v1/core/tokenscript/0/",
+        "script": "./from-p3-color.tokenscript"
+      }
+    }
+  ]
+}