Re: [community-group] Pre-defined composite type for refering color modifications (e.g. rgba) (#88)

I think this fits our usage of the tokens perfectly and will be especially powerful also when adding extensibility for other values, like dimensions. Thank you very much!

Just one question with regards to the usage of the `$operations` object: Can a whole operation optionally be defined and referenced as a token as well? This refers to the last example given by @jeromefarnum.

It would be great to be able to define not just the values of an operation in tokens, but also a whole operation itself. This would make it easy to modify or replace operations without the need to change the respective key(s) in all tokens that use these operations.

For example:

```json5
{
  // "Global" constants
  "constants": {
    "mute-transparency": 0.25,
    "mute-saturation": 0.15,
    "colorize-hue": 0.2
  },

  // "Global" operations
  "operations": {
    // Specific "mute" operations (e.g. by transparency or saturation)
    "mute-transparency": {
      "$type": "operation"
      "$value": [
        {
          "alpha": "{constants.mute-transparency}"
        }
      ]
    },
    "mute-saturation": {
      "$type": "operation"
      "$value": [
        {
          "saturation": "{constants.mute-saturation}"
        }
      ]
    },

    // "Default" mute
    "mute": {
      "$type": "operation"
      "$value": "{operations.mute-transparency}"
    },

    // Other operation with multiple definitions...
    "colorize": {
      "$type": "operation"
      "$value": [
        {
          "saturation": 1
        },
        {
          "hue": "{constants.colorize-hue}"
        }
      ]
    }
  },

  "colors": {
    "brand": {
      "primary": {
        "$value": "#ff0000",
        "$type": "color"
      }
    }
  },

  "some-token": {
    "$value": "{colors.brand.primary}",
    "$type": "color",
    "$operations": [
      "{operations.mute}", // Default mute = {alpha: 0.15}

      // Add specific operation
      {"invert": 1},

      "{operations.colorize}" // [{saturation: 1}, {hue: 0.2}]
    ]
  }
}
```

If we were to change the "default" mute in future to use the "saturation" mute, it could be as simple as changing the `$value` of `operations.mute` to use `operations.mute-saturation`:

```diff
 "mute": {
   "$type": "operation"
-  "$value": "{operations.mute-transparency}"
+  "$value": "{operations.mute-saturation}"
 },
```

-- 
GitHub Notification of comment by markuslangl
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/88#issuecomment-1073532122 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 21 March 2022 06:52:41 UTC