@terrazzo/parser 0.0.5 → 0.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@terrazzo/parser",
   "description": "Parser/validator for the Design Tokens Community Group (DTCG) standard.",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "author": {
     "name": "Drew Powers",
     "email": "drew@pow.rs"
@@ -26,8 +26,8 @@
   "type": "module",
   "main": "./index.js",
   "dependencies": {
-    "@babel/code-frame": "^7.24.2",
-    "@humanwhocodes/momoa": "^3.0.1",
+    "@babel/code-frame": "^7.24.6",
+    "@humanwhocodes/momoa": "^3.0.2",
     "@types/babel__code-frame": "^7.0.6",
     "@types/culori": "^2.1.0",
     "@types/deep-equal": "^1.0.4",
@@ -35,10 +35,10 @@
     "deep-equal": "^2.2.3",
     "is-what": "^4.1.16",
     "merge-anything": "^5.1.7",
-    "picocolors": "^1.0.0",
+    "picocolors": "^1.0.1",
     "wildcard-match": "^5.1.3",
-    "yaml": "^2.4.1",
-    "@terrazzo/token-tools": "^0.0.1"
+    "yaml": "^2.4.3",
+    "@terrazzo/token-tools": "^0.0.2"
   },
   "devDependencies": {
     "strip-ansi": "^7.1.0"

package/parse/normalize.js

@@ -37,7 +37,10 @@ export default function normalizeValue(token) {
       };
     }
     case 'color': {
-      return typeof token.$value === 'string' ? parseColor(token.$value) : token.$value;
+      if (typeof token.$value === 'string') {
+        return parseColor(token.$value);
+      }
+      return 'alpha' in token.$value ? token.$value : { ...token.$value, alpha: 1 };
     }
     case 'cubicBezier': {
       return token.$value.map((value) =>

package/parse/validate.js

@@ -11,6 +11,24 @@ const listFormat = new Intl.ListFormat('en-us', { type: 'disjunction' });
  * @typedef {import("@babel/code-frame").SourceLocation} SourceLocation
  */
 
+export const VALID_COLORSPACES = new Set([
+  'adobe-rgb',
+  'display-p3',
+  'hsl',
+  'hwb',
+  'lab',
+  'lch',
+  'oklab',
+  'oklch',
+  'prophoto',
+  'rec2020',
+  'srgb',
+  'srgb-linear',
+  'xyz',
+  'xyz-d50',
+  'xyz-d65',
+]);
+
 export const FONT_WEIGHT_VALUES = new Set([
   'thin',
   'hairline',
@@ -128,10 +146,70 @@ export function validateBorder($value, node, { source, logger }) {
  * @return {void}
  */
 export function validateColor($value, node, { source, logger }) {
-  if ($value.type !== 'String') {
-    logger.error({ message: `Expected string, received ${$value.type}`, node: $value, source });
-  } else if ($value.value === '') {
-    logger.error({ message: 'Expected color, received empty string', node: $value, source });
+  if ($value.type === 'String') {
+    // TODO: enable when object notation is finalized
+    // logger.warn({
+    //   message: 'String colors are no longer recommended; please use the object notation instead.',
+    //   node: $value,
+    //   source,
+    // });
+    if ($value.value === '') {
+      logger.error({ message: 'Expected color, received empty string', node: $value, source });
+    }
+  } else if ($value.type === 'Object') {
+    validateMembersAs(
+      $value,
+      {
+        colorSpace: {
+          validator: (v) => {
+            if (v.type !== 'String') {
+              logger.error({ message: `Expected string, received ${print(v)}`, node: v, source });
+            }
+            if (!VALID_COLORSPACES.has(v.value)) {
+              logger.error({ message: `Unsupported colorspace ${print(v)}`, node: v, source });
+            }
+          },
+          required: true,
+        },
+        channels: {
+          validator: (v, node) => {
+            if (v.type !== 'Array') {
+              logger.error({ message: `Expected array, received ${print(v)}`, node: v, source });
+            }
+            if (v.elements?.length !== 3) {
+              logger.error({ message: `Expected 3 channels, received ${v.elements?.length ?? 0}`, node: v, source });
+            }
+            for (const element of v.elements) {
+              if (element.value.type !== 'Number') {
+                logger.error({ message: `Expected number, received ${print(element.value)}`, node: element, source });
+              }
+            }
+          },
+          required: true,
+        },
+        hex: {
+          validator: (v) => {
+            if (
+              v.type !== 'String' ||
+              // this is a weird one—with the RegEx we test, it will work for
+              // lengths of 3, 4, 6, and 8 (but not 5 or 7). So we check length
+              // here, to keep the RegEx simple and readable. The "+ 1" is just
+              // accounting for the '#' prefix character.
+              v.value.length === 5 + 1 ||
+              v.value.length === 7 + 1 ||
+              !/^#[a-f0-9]{3,8}$/i.test(v.value)
+            ) {
+              logger.error({ message: `Invalid hex color ${print(v)}`, node: v, source });
+            }
+          },
+        },
+        alpha: { validator: validateNumber },
+      },
+      node,
+      { source, logger },
+    );
+  } else {
+    logger.error({ message: `Expected object, received ${$value.type}`, node: $value, source });
   }
 }
 

package/types.d.ts

@@ -58,7 +58,9 @@ export interface ColorToken extends TokenCore {
   $value: ColorValue | AliasValue;
 }
 
-export type ColorValue = AliasValue | string;
+export type ColorValue =
+  | string
+  | { colorSpace: ColorSpace; channels: [number, number, number]; alpha?: number; hex?: string };
 
 export interface CubicBézierToken extends TokenCore {
   $type: 'cubicBezier';
@@ -336,6 +338,8 @@ export interface ColorValueNormalized {
   channels: [number, number, number];
   /** Alpha channel, normalized from 0 – 1 */
   alpha: number;
+  /** Hex fallback (for sRGB) */
+  hex?: string;
 }
 
 export type ColorSpace =