feat(tokens): added gap utility-classes (#30063)

Issue number: internal

---------

<!-- 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 new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Added generation of gao utility-classes on the context of the padding
and margin ones.

## 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.
-->

core/scripts/tokens/utils.js

@@ -231,7 +231,14 @@ function generateSpaceUtilityClasses(prop, className) {
 };
 `;
 
-  return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+  // Add gap utility classes for gap tokens
+  const generateGapUtilityClasses = () =>`
+.${variablesPrefix}-gap-${prop.name} { 
+  gap: #{$${variablesPrefix}-${prop.name}}; 
+};
+`;
+
+  return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
 }
 
 // Generates a valid box-shadow value from a shadow Design Token structure

core/src/foundations/ionic.utility.scss

@@ -2432,6 +2432,10 @@ Do not edit directly, this file was auto-generated.
   box-shadow: $ion-elevation-4;
 }
 
+.ion-gap-space-0 {
+  gap: #{$ion-space-0};
+}
+
 .ion-margin-space-0 {
   --margin-top: #{$ion-space-0};
   --margin-end: #{$ion-space-0};
@@ -2498,6 +2502,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-0);
 }
 
+.ion-gap-space-100 {
+  gap: #{$ion-space-100};
+}
+
 .ion-margin-space-100 {
   --margin-top: #{$ion-space-100};
   --margin-end: #{$ion-space-100};
@@ -2564,6 +2572,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-100);
 }
 
+.ion-gap-space-150 {
+  gap: #{$ion-space-150};
+}
+
 .ion-margin-space-150 {
   --margin-top: #{$ion-space-150};
   --margin-end: #{$ion-space-150};
@@ -2630,6 +2642,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-150);
 }
 
+.ion-gap-space-200 {
+  gap: #{$ion-space-200};
+}
+
 .ion-margin-space-200 {
   --margin-top: #{$ion-space-200};
   --margin-end: #{$ion-space-200};
@@ -2696,6 +2712,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-200);
 }
 
+.ion-gap-space-250 {
+  gap: #{$ion-space-250};
+}
+
 .ion-margin-space-250 {
   --margin-top: #{$ion-space-250};
   --margin-end: #{$ion-space-250};
@@ -2762,6 +2782,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-250);
 }
 
+.ion-gap-space-300 {
+  gap: #{$ion-space-300};
+}
+
 .ion-margin-space-300 {
   --margin-top: #{$ion-space-300};
   --margin-end: #{$ion-space-300};
@@ -2828,6 +2852,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-300);
 }
 
+.ion-gap-space-400 {
+  gap: #{$ion-space-400};
+}
+
 .ion-margin-space-400 {
   --margin-top: #{$ion-space-400};
   --margin-end: #{$ion-space-400};
@@ -2894,6 +2922,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-400);
 }
 
+.ion-gap-space-500 {
+  gap: #{$ion-space-500};
+}
+
 .ion-margin-space-500 {
   --margin-top: #{$ion-space-500};
   --margin-end: #{$ion-space-500};
@@ -2960,6 +2992,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-500);
 }
 
+.ion-gap-space-600 {
+  gap: #{$ion-space-600};
+}
+
 .ion-margin-space-600 {
   --margin-top: #{$ion-space-600};
   --margin-end: #{$ion-space-600};
@@ -3026,6 +3062,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-600);
 }
 
+.ion-gap-space-700 {
+  gap: #{$ion-space-700};
+}
+
 .ion-margin-space-700 {
   --margin-top: #{$ion-space-700};
   --margin-end: #{$ion-space-700};
@@ -3092,6 +3132,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-700);
 }
 
+.ion-gap-space-800 {
+  gap: #{$ion-space-800};
+}
+
 .ion-margin-space-800 {
   --margin-top: #{$ion-space-800};
   --margin-end: #{$ion-space-800};
@@ -3158,6 +3202,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-800);
 }
 
+.ion-gap-space-900 {
+  gap: #{$ion-space-900};
+}
+
 .ion-margin-space-900 {
   --margin-top: #{$ion-space-900};
   --margin-end: #{$ion-space-900};
@@ -3224,6 +3272,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-900);
 }
 
+.ion-gap-space-1000 {
+  gap: #{$ion-space-1000};
+}
+
 .ion-margin-space-1000 {
   --margin-top: #{$ion-space-1000};
   --margin-end: #{$ion-space-1000};
@@ -3290,6 +3342,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-1000);
 }
 
+.ion-gap-space-1200 {
+  gap: #{$ion-space-1200};
+}
+
 .ion-margin-space-1200 {
   --margin-top: #{$ion-space-1200};
   --margin-end: #{$ion-space-1200};
@@ -3356,6 +3412,10 @@ Do not edit directly, this file was auto-generated.
   @include padding(null, null, null, $ion-space-1200);
 }
 
+.ion-gap-space-050 {
+  gap: #{$ion-space-050};
+}
+
 .ion-margin-space-050 {
   --margin-top: #{$ion-space-050};
   --margin-end: #{$ion-space-050};