From 2414b78bef14319deb816fd26fbc037f0bb909a8 Mon Sep 17 00:00:00 2001 From: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Date: Fri, 12 Apr 2024 09:45:02 -0400 Subject: [PATCH] feat(tokens): generate rgb variants of colors (#29331) Issue number: N/A --------- ## What is the current behavior? 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? - 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 ## Other information --- core/scripts/tokens.js | 27 ++++++++-- core/src/foundations/ionic.root.scss | 73 ++++++++++++++++++++++++++++ core/src/foundations/ionic.vars.scss | 73 ++++++++++++++++++++++++++++ 3 files changed, 169 insertions(+), 4 deletions(-) diff --git a/core/scripts/tokens.js b/core/scripts/tokens.js index 1b5a4d0352..c0d5451ba4 100644 --- a/core/scripts/tokens.js +++ b/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); }, }; diff --git a/core/src/foundations/ionic.root.scss b/core/src/foundations/ionic.root.scss index 1da0d929ca..6efd908ac2 100644 --- a/core/src/foundations/ionic.root.scss +++ b/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; diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss index fe2e920b8b..0b07beab54 100644 --- a/core/src/foundations/ionic.vars.scss +++ b/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);