feat(tokens): generate rgb variants of colors (#29331)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The generated design tokens only generate HEX output of colors. This
prevents us from using the color tokens when we need to manipulate the
alpha channel of the color.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Generate a rgb color token and sass variable for each existing color
token.
- These "rgb" formatted variables are an existing practice to Ionic
Framework. Developers are expected to pass the variable into an `rgb` or
`rgba` function.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

core/scripts/tokens.js

@@ -15,13 +15,27 @@ const customVariables = ``;
 // Prefix for all generated variables
 const variablesPrefix = 'ionic';
 
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
 // CSS vanilla :root format
 StyleDictionary.registerFormat({
   name: 'rootFormat',
   formatter({ dictionary, file }) {
     // Add a prefix to all variable names
     const prefixedVariables = dictionary.allProperties.map((prop) => {
-      return `  --${variablesPrefix}-${prop.name}: ${prop.value};`;
+      const rgb = hexToRgb(prop.value);
+      return `  --${variablesPrefix}-${prop.name}: ${prop.value};${
+        rgb ? `\n  --${variablesPrefix}-${prop.name}-rgb: ${rgb.r}, ${rgb.g}, ${rgb.b};` : ``
+      }`;
     });
 
     return (
@@ -40,7 +54,12 @@ StyleDictionary.registerFormat({
   formatter({ dictionary, file }) {
     // Add a prefix to all variable names
     const prefixedVariables = dictionary.allProperties.map((prop) => {
-      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});`;
+      const rgb = hexToRgb(prop.value);
+      return `$${variablesPrefix}-${prop.name}: var(--${variablesPrefix}-${prop.name}, ${prop.value});${
+        rgb
+          ? `\n$${variablesPrefix}-${prop.name}-rgb: var(--${variablesPrefix}-${prop.name}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`
+          : ``
+      }`;
     });
 
     return (
@@ -111,14 +130,14 @@ StyleDictionary.registerFormat({
 // Make Style Dictionary comply with the $ format on properties from W3C Guidelines
 const w3cTokenJsonParser = {
   pattern: /\.json|\.tokens\.json|\.tokens$/,
-  parse(_a) {
-    var contents = _a.contents;
+  parse({ contents }) {
     // replace $value with value so that style dictionary recognizes it
     var preparedContent = (contents || '{}')
       .replace(/"\$?value":/g, '"value":')
       // convert $description to comment
       .replace(/"\$?description":/g, '"comment":');
     //
+
     return JSON.parse(preparedContent);
   },
 };