Support w3c working group design tokens spec

docs/ui/src/js/createOutputParameters.js

@@ -65,7 +65,7 @@ let ${themeName.replace(/[^a-zA-Z0-9_$]/g, '_')} = new Leo.Theme({
   lightness: ${_theme.lightness},
   contrast: ${_theme.contrast},
   saturation: ${_theme.saturation},
-  output: "${_theme.output},"
+  output: "${_theme.output}",
   formula: "${_theme.formula}"
 });`;
 
@@ -115,26 +115,30 @@ function createTokensOutput() {
   let backgroundColor = _theme.contrastColors[0].background;
 
   let backgroundColorObj = {
-    value: backgroundColor,
-    type: 'color',
-    description: `UI background color. All color contrasts evaluated and generated against this color.`
+    $value: backgroundColor,
+    $type: 'color',
+    $description: `UI background color. All color contrasts evaluated and generated against this color.`
   };
   themeObj['Background'] = backgroundColorObj;
 
   let formulaString = _theme.formula === 'wcag2' ? 'WCAG 2.x (relative luminance)' : 'WCAG 3 (APCA)';
   let largeText = _theme.formula === 'wcag3' ? 60 : 3;
   let smallText = _theme.formula === 'wcag3' ? 75 : 4.5;
 
+  let formulaString = _theme.formula === 'wcag2' ? 'WCAG 2.x (relative luminance)' : 'WCAG 3 (APCA)';
+  let largeText = _theme.formula === 'wcag3' ? 60 : 3;
+  let smallText = _theme.formula === 'wcag3' ? 75 : 4.5;
+
   for (let i = 1; i < contrastColors.length; i++) {
     let thisColor = contrastColors[i];
     for (let j = 0; j < thisColor.values.length; j++) {
       let color = thisColor.values[j];
       let descriptionText = color.contrast < largeText ? textLowContrast : color.contrast >= largeText && color.contrast < smallText ? textLarge : textSmall;
 
       let colorObj = {
-        value: color.value,
-        type: 'color',
-        description: `${descriptionText} ${formulaString} contrast is ${color.contrast}:1 against background ${backgroundColor}`
+        $value: color.value,
+        $type: 'color',
+        $description: `${descriptionText} ${formulaString} contrast is ${color.contrast}:1 against background ${backgroundColor}`
       };
       themeObj[color.name] = colorObj;
     }

packages/contrast-colors/lib/utils.js

@@ -352,9 +352,6 @@ function convertColorValue(color, format, object = false) {
         if (letter === 'l' || letter === 'j') {
           rnd += '%';
         }
-        if (letter === 'h') {
-          rnd += 'deg';
-        }
       }
     } else if (space !== 'hsluv') {
       if (letter === 's' || letter === 'l' || letter === 'v') {
@@ -363,8 +360,6 @@ function convertColorValue(color, format, object = false) {
           rnd = round(ch * 100);
           rnd += '%';
         }
-      } else if (letter === 'h' && !object) {
-        rnd += 'deg';
       }
     }
     return rnd;