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) {
+  parse({ contents }) {
-    var contents = _a.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);
   },
 };

core/src/foundations/ionic.root.scss

@@ -5,78 +5,151 @@
 
 :root {
   --ionic-color-primary-10: #f7faff;
+  --ionic-color-primary-10-rgb: 247, 250, 255;
   --ionic-color-primary-50: #cbdffe;
+  --ionic-color-primary-50-rgb: 203, 223, 254;
   --ionic-color-primary-100: #9ec4fd;
+  --ionic-color-primary-100-rgb: 158, 196, 253;
   --ionic-color-primary-200: #74aafc;
+  --ionic-color-primary-200-rgb: 116, 170, 252;
   --ionic-color-primary-300: #4991fb;
+  --ionic-color-primary-300-rgb: 73, 145, 251;
   --ionic-color-primary-400: #1068eb;
+  --ionic-color-primary-400-rgb: 16, 104, 235;
   --ionic-color-primary-500: #0750be;
+  --ionic-color-primary-500-rgb: 7, 80, 190;
   --ionic-color-primary-600: #053d90;
+  --ionic-color-primary-600-rgb: 5, 61, 144;
   --ionic-color-primary-700: #062b63;
+  --ionic-color-primary-700-rgb: 6, 43, 99;
   --ionic-color-primary-800: #061935;
+  --ionic-color-primary-800-rgb: 6, 25, 53;
   --ionic-color-primary-900: #010408;
+  --ionic-color-primary-900-rgb: 1, 4, 8;
   --ionic-color-primary: #1068eb;
+  --ionic-color-primary-rgb: 16, 104, 235;
   --ionic-color-secondary: #303d60;
+  --ionic-color-secondary-rgb: 48, 61, 96;
   --ionic-color-neutral-0: #ffffff;
+  --ionic-color-neutral-0-rgb: 255, 255, 255;
   --ionic-color-neutral-10: #f5f5f5;
+  --ionic-color-neutral-10-rgb: 245, 245, 245;
   --ionic-color-neutral-50: #e7e7e7;
+  --ionic-color-neutral-50-rgb: 231, 231, 231;
   --ionic-color-neutral-100: #dadada;
+  --ionic-color-neutral-100-rgb: 218, 218, 218;
   --ionic-color-neutral-200: #c9c9c9;
+  --ionic-color-neutral-200-rgb: 201, 201, 201;
   --ionic-color-neutral-300: #b8b8b8;
+  --ionic-color-neutral-300-rgb: 184, 184, 184;
   --ionic-color-neutral-400: #9a9a9a;
+  --ionic-color-neutral-400-rgb: 154, 154, 154;
   --ionic-color-neutral-500: #767676;
+  --ionic-color-neutral-500-rgb: 118, 118, 118;
   --ionic-color-neutral-600: #535353;
+  --ionic-color-neutral-600-rgb: 83, 83, 83;
   --ionic-color-neutral-700: #373737;
+  --ionic-color-neutral-700-rgb: 55, 55, 55;
   --ionic-color-neutral-800: #212121;
+  --ionic-color-neutral-800-rgb: 33, 33, 33;
   --ionic-color-neutral-900: #05080f;
+  --ionic-color-neutral-900-rgb: 5, 8, 15;
   --ionic-color-error-10: #fffafa;
+  --ionic-color-error-10-rgb: 255, 250, 250;
   --ionic-color-error-50: #ffd5d5;
+  --ionic-color-error-50-rgb: 255, 213, 213;
   --ionic-color-error-100: #ffafaf;
+  --ionic-color-error-100-rgb: 255, 175, 175;
   --ionic-color-error-200: #ff8a8a;
+  --ionic-color-error-200-rgb: 255, 138, 138;
   --ionic-color-error-300: #ff6666;
+  --ionic-color-error-300-rgb: 255, 102, 102;
   --ionic-color-error-400: #f72c2c;
+  --ionic-color-error-400-rgb: 247, 44, 44;
   --ionic-color-error-500: #c71212;
+  --ionic-color-error-500-rgb: 199, 18, 18;
   --ionic-color-error-600: #970606;
+  --ionic-color-error-600-rgb: 151, 6, 6;
   --ionic-color-error-700: #670202;
+  --ionic-color-error-700-rgb: 103, 2, 2;
   --ionic-color-error-800: #380101;
+  --ionic-color-error-800-rgb: 56, 1, 1;
   --ionic-color-error-900: #080000;
+  --ionic-color-error-900-rgb: 8, 0, 0;
   --ionic-color-error: #f72c2c;
+  --ionic-color-error-rgb: 247, 44, 44;
   --ionic-color-warning-10: #fffdfa;
+  --ionic-color-warning-10-rgb: 255, 253, 250;
   --ionic-color-warning-50: #ffecce;
+  --ionic-color-warning-50-rgb: 255, 236, 206;
   --ionic-color-warning-100: #ffdba0;
+  --ionic-color-warning-100-rgb: 255, 219, 160;
   --ionic-color-warning-200: #ffca73;
+  --ionic-color-warning-200-rgb: 255, 202, 115;
   --ionic-color-warning-300: #ffb845;
+  --ionic-color-warning-300-rgb: 255, 184, 69;
   --ionic-color-warning-400: #ff9707;
+  --ionic-color-warning-400-rgb: 255, 151, 7;
   --ionic-color-warning-500: #ce7a06;
+  --ionic-color-warning-500-rgb: 206, 122, 6;
   --ionic-color-warning-600: #9c5f0a;
+  --ionic-color-warning-600-rgb: 156, 95, 10;
   --ionic-color-warning-700: #6b430c;
+  --ionic-color-warning-700-rgb: 107, 67, 12;
   --ionic-color-warning-800: #39260b;
+  --ionic-color-warning-800-rgb: 57, 38, 11;
   --ionic-color-warning-900: #080502;
+  --ionic-color-warning-900-rgb: 8, 5, 2;
   --ionic-color-warning: #ff9707;
+  --ionic-color-warning-rgb: 255, 151, 7;
   --ionic-color-success-10: #fbfffa;
+  --ionic-color-success-10-rgb: 251, 255, 250;
   --ionic-color-success-50: #def7d8;
+  --ionic-color-success-50-rgb: 222, 247, 216;
   --ionic-color-success-100: #c6f0b7;
+  --ionic-color-success-100-rgb: 198, 240, 183;
   --ionic-color-success-200: #a4e188;
+  --ionic-color-success-200-rgb: 164, 225, 136;
   --ionic-color-success-300: #73c346;
+  --ionic-color-success-300-rgb: 115, 195, 70;
   --ionic-color-success-400: #52a518;
+  --ionic-color-success-400-rgb: 82, 165, 24;
   --ionic-color-success-500: #36870c;
+  --ionic-color-success-500-rgb: 54, 135, 12;
   --ionic-color-success-600: #36870c;
+  --ionic-color-success-600-rgb: 54, 135, 12;
   --ionic-color-success-700: #226907;
+  --ionic-color-success-700-rgb: 34, 105, 7;
   --ionic-color-success-800: #144b05;
+  --ionic-color-success-800-rgb: 20, 75, 5;
   --ionic-color-success-900: #030f02;
+  --ionic-color-success-900-rgb: 3, 15, 2;
   --ionic-color-success: #52a518;
+  --ionic-color-success-rgb: 82, 165, 24;
   --ionic-color-info-10: #f5fbff;
+  --ionic-color-info-10-rgb: 245, 251, 255;
   --ionic-color-info-50: #c6e7ff;
+  --ionic-color-info-50-rgb: 198, 231, 255;
   --ionic-color-info-100: #97d3ff;
+  --ionic-color-info-100-rgb: 151, 211, 255;
   --ionic-color-info-200: #6ac0fe;
+  --ionic-color-info-200-rgb: 106, 192, 254;
   --ionic-color-info-300: #3dadfe;
+  --ionic-color-info-300-rgb: 61, 173, 254;
   --ionic-color-info-400: #008bef;
+  --ionic-color-info-400-rgb: 0, 139, 239;
   --ionic-color-info-500: #0071c2;
+  --ionic-color-info-500-rgb: 0, 113, 194;
   --ionic-color-info-600: #005796;
+  --ionic-color-info-600-rgb: 0, 87, 150;
   --ionic-color-info-700: #003d69;
+  --ionic-color-info-700-rgb: 0, 61, 105;
   --ionic-color-info-800: #02243c;
+  --ionic-color-info-800-rgb: 2, 36, 60;
   --ionic-color-info-900: #020a0f;
+  --ionic-color-info-900-rgb: 2, 10, 15;
   --ionic-color-info: #008bef;
+  --ionic-color-info-rgb: 0, 139, 239;
   --ionic-font-family: "Inter", sans-serif;
   --ionic-font-letter-spacing-none: 0em;
   --ionic-font-letter-spacing-s: 0.1em;

core/src/foundations/ionic.vars.scss

@@ -4,78 +4,151 @@
  */
 
 $ionic-color-primary-10: var(--ionic-color-primary-10, #f7faff);
+$ionic-color-primary-10-rgb: var(--ionic-color-primary-10-rgb, 247, 250, 255);
 $ionic-color-primary-50: var(--ionic-color-primary-50, #cbdffe);
+$ionic-color-primary-50-rgb: var(--ionic-color-primary-50-rgb, 203, 223, 254);
 $ionic-color-primary-100: var(--ionic-color-primary-100, #9ec4fd);
+$ionic-color-primary-100-rgb: var(--ionic-color-primary-100-rgb, 158, 196, 253);
 $ionic-color-primary-200: var(--ionic-color-primary-200, #74aafc);
+$ionic-color-primary-200-rgb: var(--ionic-color-primary-200-rgb, 116, 170, 252);
 $ionic-color-primary-300: var(--ionic-color-primary-300, #4991fb);
+$ionic-color-primary-300-rgb: var(--ionic-color-primary-300-rgb, 73, 145, 251);
 $ionic-color-primary-400: var(--ionic-color-primary-400, #1068eb);
+$ionic-color-primary-400-rgb: var(--ionic-color-primary-400-rgb, 16, 104, 235);
 $ionic-color-primary-500: var(--ionic-color-primary-500, #0750be);
+$ionic-color-primary-500-rgb: var(--ionic-color-primary-500-rgb, 7, 80, 190);
 $ionic-color-primary-600: var(--ionic-color-primary-600, #053d90);
+$ionic-color-primary-600-rgb: var(--ionic-color-primary-600-rgb, 5, 61, 144);
 $ionic-color-primary-700: var(--ionic-color-primary-700, #062b63);
+$ionic-color-primary-700-rgb: var(--ionic-color-primary-700-rgb, 6, 43, 99);
 $ionic-color-primary-800: var(--ionic-color-primary-800, #061935);
+$ionic-color-primary-800-rgb: var(--ionic-color-primary-800-rgb, 6, 25, 53);
 $ionic-color-primary-900: var(--ionic-color-primary-900, #010408);
+$ionic-color-primary-900-rgb: var(--ionic-color-primary-900-rgb, 1, 4, 8);
 $ionic-color-primary: var(--ionic-color-primary, #1068eb);
+$ionic-color-primary-rgb: var(--ionic-color-primary-rgb, 16, 104, 235);
 $ionic-color-secondary: var(--ionic-color-secondary, #303d60);
+$ionic-color-secondary-rgb: var(--ionic-color-secondary-rgb, 48, 61, 96);
 $ionic-color-neutral-0: var(--ionic-color-neutral-0, #ffffff);
+$ionic-color-neutral-0-rgb: var(--ionic-color-neutral-0-rgb, 255, 255, 255);
 $ionic-color-neutral-10: var(--ionic-color-neutral-10, #f5f5f5);
+$ionic-color-neutral-10-rgb: var(--ionic-color-neutral-10-rgb, 245, 245, 245);
 $ionic-color-neutral-50: var(--ionic-color-neutral-50, #e7e7e7);
+$ionic-color-neutral-50-rgb: var(--ionic-color-neutral-50-rgb, 231, 231, 231);
 $ionic-color-neutral-100: var(--ionic-color-neutral-100, #dadada);
+$ionic-color-neutral-100-rgb: var(--ionic-color-neutral-100-rgb, 218, 218, 218);
 $ionic-color-neutral-200: var(--ionic-color-neutral-200, #c9c9c9);
+$ionic-color-neutral-200-rgb: var(--ionic-color-neutral-200-rgb, 201, 201, 201);
 $ionic-color-neutral-300: var(--ionic-color-neutral-300, #b8b8b8);
+$ionic-color-neutral-300-rgb: var(--ionic-color-neutral-300-rgb, 184, 184, 184);
 $ionic-color-neutral-400: var(--ionic-color-neutral-400, #9a9a9a);
+$ionic-color-neutral-400-rgb: var(--ionic-color-neutral-400-rgb, 154, 154, 154);
 $ionic-color-neutral-500: var(--ionic-color-neutral-500, #767676);
+$ionic-color-neutral-500-rgb: var(--ionic-color-neutral-500-rgb, 118, 118, 118);
 $ionic-color-neutral-600: var(--ionic-color-neutral-600, #535353);
+$ionic-color-neutral-600-rgb: var(--ionic-color-neutral-600-rgb, 83, 83, 83);
 $ionic-color-neutral-700: var(--ionic-color-neutral-700, #373737);
+$ionic-color-neutral-700-rgb: var(--ionic-color-neutral-700-rgb, 55, 55, 55);
 $ionic-color-neutral-800: var(--ionic-color-neutral-800, #212121);
+$ionic-color-neutral-800-rgb: var(--ionic-color-neutral-800-rgb, 33, 33, 33);
 $ionic-color-neutral-900: var(--ionic-color-neutral-900, #05080f);
+$ionic-color-neutral-900-rgb: var(--ionic-color-neutral-900-rgb, 5, 8, 15);
 $ionic-color-error-10: var(--ionic-color-error-10, #fffafa);
+$ionic-color-error-10-rgb: var(--ionic-color-error-10-rgb, 255, 250, 250);
 $ionic-color-error-50: var(--ionic-color-error-50, #ffd5d5);
+$ionic-color-error-50-rgb: var(--ionic-color-error-50-rgb, 255, 213, 213);
 $ionic-color-error-100: var(--ionic-color-error-100, #ffafaf);
+$ionic-color-error-100-rgb: var(--ionic-color-error-100-rgb, 255, 175, 175);
 $ionic-color-error-200: var(--ionic-color-error-200, #ff8a8a);
+$ionic-color-error-200-rgb: var(--ionic-color-error-200-rgb, 255, 138, 138);
 $ionic-color-error-300: var(--ionic-color-error-300, #ff6666);
+$ionic-color-error-300-rgb: var(--ionic-color-error-300-rgb, 255, 102, 102);
 $ionic-color-error-400: var(--ionic-color-error-400, #f72c2c);
+$ionic-color-error-400-rgb: var(--ionic-color-error-400-rgb, 247, 44, 44);
 $ionic-color-error-500: var(--ionic-color-error-500, #c71212);
+$ionic-color-error-500-rgb: var(--ionic-color-error-500-rgb, 199, 18, 18);
 $ionic-color-error-600: var(--ionic-color-error-600, #970606);
+$ionic-color-error-600-rgb: var(--ionic-color-error-600-rgb, 151, 6, 6);
 $ionic-color-error-700: var(--ionic-color-error-700, #670202);
+$ionic-color-error-700-rgb: var(--ionic-color-error-700-rgb, 103, 2, 2);
 $ionic-color-error-800: var(--ionic-color-error-800, #380101);
+$ionic-color-error-800-rgb: var(--ionic-color-error-800-rgb, 56, 1, 1);
 $ionic-color-error-900: var(--ionic-color-error-900, #080000);
+$ionic-color-error-900-rgb: var(--ionic-color-error-900-rgb, 8, 0, 0);
 $ionic-color-error: var(--ionic-color-error, #f72c2c);
+$ionic-color-error-rgb: var(--ionic-color-error-rgb, 247, 44, 44);
 $ionic-color-warning-10: var(--ionic-color-warning-10, #fffdfa);
+$ionic-color-warning-10-rgb: var(--ionic-color-warning-10-rgb, 255, 253, 250);
 $ionic-color-warning-50: var(--ionic-color-warning-50, #ffecce);
+$ionic-color-warning-50-rgb: var(--ionic-color-warning-50-rgb, 255, 236, 206);
 $ionic-color-warning-100: var(--ionic-color-warning-100, #ffdba0);
+$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 219, 160);
 $ionic-color-warning-200: var(--ionic-color-warning-200, #ffca73);
+$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 202, 115);
 $ionic-color-warning-300: var(--ionic-color-warning-300, #ffb845);
+$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 184, 69);
 $ionic-color-warning-400: var(--ionic-color-warning-400, #ff9707);
+$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 151, 7);
 $ionic-color-warning-500: var(--ionic-color-warning-500, #ce7a06);
+$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 206, 122, 6);
 $ionic-color-warning-600: var(--ionic-color-warning-600, #9c5f0a);
+$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 156, 95, 10);
 $ionic-color-warning-700: var(--ionic-color-warning-700, #6b430c);
+$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 107, 67, 12);
 $ionic-color-warning-800: var(--ionic-color-warning-800, #39260b);
+$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 57, 38, 11);
 $ionic-color-warning-900: var(--ionic-color-warning-900, #080502);
+$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 8, 5, 2);
 $ionic-color-warning: var(--ionic-color-warning, #ff9707);
+$ionic-color-warning-rgb: var(--ionic-color-warning-rgb, 255, 151, 7);
 $ionic-color-success-10: var(--ionic-color-success-10, #fbfffa);
+$ionic-color-success-10-rgb: var(--ionic-color-success-10-rgb, 251, 255, 250);
 $ionic-color-success-50: var(--ionic-color-success-50, #def7d8);
+$ionic-color-success-50-rgb: var(--ionic-color-success-50-rgb, 222, 247, 216);
 $ionic-color-success-100: var(--ionic-color-success-100, #c6f0b7);
+$ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 198, 240, 183);
 $ionic-color-success-200: var(--ionic-color-success-200, #a4e188);
+$ionic-color-success-200-rgb: var(--ionic-color-success-200-rgb, 164, 225, 136);
 $ionic-color-success-300: var(--ionic-color-success-300, #73c346);
+$ionic-color-success-300-rgb: var(--ionic-color-success-300-rgb, 115, 195, 70);
 $ionic-color-success-400: var(--ionic-color-success-400, #52a518);
+$ionic-color-success-400-rgb: var(--ionic-color-success-400-rgb, 82, 165, 24);
 $ionic-color-success-500: var(--ionic-color-success-500, #36870c);
+$ionic-color-success-500-rgb: var(--ionic-color-success-500-rgb, 54, 135, 12);
 $ionic-color-success-600: var(--ionic-color-success-600, #36870c);
+$ionic-color-success-600-rgb: var(--ionic-color-success-600-rgb, 54, 135, 12);
 $ionic-color-success-700: var(--ionic-color-success-700, #226907);
+$ionic-color-success-700-rgb: var(--ionic-color-success-700-rgb, 34, 105, 7);
 $ionic-color-success-800: var(--ionic-color-success-800, #144b05);
+$ionic-color-success-800-rgb: var(--ionic-color-success-800-rgb, 20, 75, 5);
 $ionic-color-success-900: var(--ionic-color-success-900, #030f02);
+$ionic-color-success-900-rgb: var(--ionic-color-success-900-rgb, 3, 15, 2);
 $ionic-color-success: var(--ionic-color-success, #52a518);
+$ionic-color-success-rgb: var(--ionic-color-success-rgb, 82, 165, 24);
 $ionic-color-info-10: var(--ionic-color-info-10, #f5fbff);
+$ionic-color-info-10-rgb: var(--ionic-color-info-10-rgb, 245, 251, 255);
 $ionic-color-info-50: var(--ionic-color-info-50, #c6e7ff);
+$ionic-color-info-50-rgb: var(--ionic-color-info-50-rgb, 198, 231, 255);
 $ionic-color-info-100: var(--ionic-color-info-100, #97d3ff);
+$ionic-color-info-100-rgb: var(--ionic-color-info-100-rgb, 151, 211, 255);
 $ionic-color-info-200: var(--ionic-color-info-200, #6ac0fe);
+$ionic-color-info-200-rgb: var(--ionic-color-info-200-rgb, 106, 192, 254);
 $ionic-color-info-300: var(--ionic-color-info-300, #3dadfe);
+$ionic-color-info-300-rgb: var(--ionic-color-info-300-rgb, 61, 173, 254);
 $ionic-color-info-400: var(--ionic-color-info-400, #008bef);
+$ionic-color-info-400-rgb: var(--ionic-color-info-400-rgb, 0, 139, 239);
 $ionic-color-info-500: var(--ionic-color-info-500, #0071c2);
+$ionic-color-info-500-rgb: var(--ionic-color-info-500-rgb, 0, 113, 194);
 $ionic-color-info-600: var(--ionic-color-info-600, #005796);
+$ionic-color-info-600-rgb: var(--ionic-color-info-600-rgb, 0, 87, 150);
 $ionic-color-info-700: var(--ionic-color-info-700, #003d69);
+$ionic-color-info-700-rgb: var(--ionic-color-info-700-rgb, 0, 61, 105);
 $ionic-color-info-800: var(--ionic-color-info-800, #02243c);
+$ionic-color-info-800-rgb: var(--ionic-color-info-800-rgb, 2, 36, 60);
 $ionic-color-info-900: var(--ionic-color-info-900, #020a0f);
+$ionic-color-info-900-rgb: var(--ionic-color-info-900-rgb, 2, 10, 15);
 $ionic-color-info: var(--ionic-color-info, #008bef);
+$ionic-color-info-rgb: var(--ionic-color-info-rgb, 0, 139, 239);
 $ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
 $ionic-font-letter-spacing-none: var(--ionic-font-letter-spacing-none, 0em);
 $ionic-font-letter-spacing-s: var(--ionic-font-letter-spacing-s, 0.1em);