feat: color modifier format hex for non-sRGB spaces (#162)

tokens-studio · Jun 22, 2023 · c4bb776 · c4bb776
1 parent 9ab7b1c
commit c4bb776
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/wild-snakes-double.md b/.changeset/wild-snakes-double.md
@@ -0,0 +1,5 @@
+---
+'@tokens-studio/sd-transforms': patch
+---
+
+Allow color modifications to format to hex when the color space is not sRGB. It will do a conversion step to sRGB space before formatting to hex.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/color-modifiers/modifyColor.ts b/src/color-modifiers/modifyColor.ts
@@ -35,10 +35,15 @@ export function modifyColor(
     }
 
     returnedColor = returnedColor.to(modifier.space);
-    if (modifier.format && ['lch', 'srgb', 'p3', 'hsl'].includes(modifier.format)) {
-      returnedColor = returnedColor.to(modifier.format);
-    }
 
+    if (modifier.format && ['lch', 'srgb', 'p3', 'hsl', 'hex'].includes(modifier.format)) {
+      // Since hex is not a color space, convert to srgb, toString will then be able to format to hex
+      if (modifier.format === 'hex') {
+        returnedColor = returnedColor.to('srgb');
+      } else {
+        returnedColor = returnedColor.to(modifier.format);
+      }
+    }
     return returnedColor.toString({
       inGamut: true,
       precision: 3,

diff --git a/test/spec/color-modifiers/transformColorModifiers.spec.ts b/test/spec/color-modifiers/transformColorModifiers.spec.ts
@@ -183,4 +183,23 @@ describe('transform color modifiers', () => {
     // output to hex
     expect(transformColorModifiers(token('hex'))).to.equal('#9a3535');
   });
+
+  it('can convert from a non-srgb space to srgb space to then format it as a hex color (which is fundamentally rgb)', () => {
+    const token = {
+      value: '#C14242',
+      type: 'color',
+      $extensions: {
+        'studio.tokens': {
+          modify: {
+            type: 'darken',
+            value: '0.2',
+            space: 'lch',
+            format: 'hex',
+          },
+        },
+      },
+    };
+
+    expect(transformColorModifiers(token)).to.equal('#983735');
+  });
 });