fix(tokens): fixed border generated utilityclasses (#30067)

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

- Now the different border tokens will generate the utility-classes with
the expected CSS attribute for each one!

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

---------

Co-authored-by: Brandy Carney <[email protected]>

Author: BenOsodrac

core/scripts/tokens/index.js

@@ -17,7 +17,7 @@
     removeConsecutiveRepeatedWords,
     setPrefixValue,
     generateRadiusUtilityClasses,
-    generateBorderSizeUtilityClasses,
+    generateBorderUtilityClasses,
     generateFontUtilityClasses,
     generateShadowUtilityClasses,
     generateUtilityClasses
@@ -112,7 +112,6 @@
         }
 
         let utilityClass = '';
-
         switch (tokenCategory) {
           case 'color':
           case 'primitives':
@@ -123,8 +122,8 @@
           case 'state':
             utilityClass = generateColorUtilityClasses(prop, propName);
             break;
-          case 'border-size':
-            utilityClass = generateBorderSizeUtilityClasses(propName);
+          case 'border':
+            utilityClass = generateBorderUtilityClasses(prop, propName);
             break;
           case 'font':
             utilityClass = generateFontUtilityClasses(prop, propName);

core/scripts/tokens/utils.js

@@ -246,9 +246,22 @@ function generateRadiusUtilityClasses(propName) {
   return `.${variablesPrefix}-${propName} {\n  border-radius: $${variablesPrefix}-${propName};\n}`;
 }
 
-// Generates a font based css utility-class from a font Design Token structure
-function generateBorderSizeUtilityClasses(propName) {
-  return `.${variablesPrefix}-${propName} {\n  border-width: $${variablesPrefix}-${propName};\n}`;
+// Generates a border based css utility-class from a font Design Token structure
+function generateBorderUtilityClasses(prop, propName) {
+  let attribute;
+
+  switch (prop.attributes.type) {
+    case 'border-radius':
+    case 'border-style':
+      attribute = prop.attributes.type;
+      break;
+    case 'border-size':
+      attribute = 'border-width';
+      break;
+    default:
+      attribute = 'border-color';
+  }
+  return `.${variablesPrefix}-${propName} {\n  ${attribute}: $${variablesPrefix}-${propName};\n}`;
 }
 
 // Generates a font based css utility-class from a font Design Token structure
@@ -280,7 +293,7 @@ module.exports = {
     generateDefaultSpaceUtilityClasses,
     generateSpaceUtilityClasses,
     removeConsecutiveRepeatedWords,
-    generateBorderSizeUtilityClasses,
+    generateBorderUtilityClasses,
     generateFontUtilityClasses,
     generateShadowUtilityClasses,
     generateUtilityClasses

core/src/foundations/ionic.utility.scss

@@ -1139,94 +1139,94 @@ Do not edit directly, this file was auto-generated.
   background-color: $ion-text-select;
 }
 .ion-border-default {
-  border: $ion-border-default;
+  border-color: $ion-border-default;
 }
 .ion-border-focus-0 {
-  border: $ion-border-focus-0;
+  border-color: $ion-border-focus-0;
 }
 .ion-border-focus-default {
-  border: $ion-border-focus-default;
+  border-color: $ion-border-focus-default;
 }
 .ion-border-focus-error {
-  border: $ion-border-focus-error;
+  border-color: $ion-border-focus-error;
 }
 .ion-border-primary {
-  border: $ion-border-primary;
+  border-color: $ion-border-primary;
 }
 .ion-border-success {
-  border: $ion-border-success;
+  border-color: $ion-border-success;
 }
 .ion-border-warning {
-  border: $ion-border-warning;
+  border-color: $ion-border-warning;
 }
 .ion-border-danger {
-  border: $ion-border-danger;
+  border-color: $ion-border-danger;
 }
 .ion-border-subtle {
-  border: $ion-border-subtle;
+  border-color: $ion-border-subtle;
 }
 .ion-border-input-default {
-  border: $ion-border-input-default;
+  border-color: $ion-border-input-default;
 }
 .ion-border-input-press {
-  border: $ion-border-input-press;
+  border-color: $ion-border-input-press;
 }
 .ion-border-input-read-only {
-  border: $ion-border-input-read-only;
+  border-color: $ion-border-input-read-only;
 }
 .ion-border-style-none {
-  border: $ion-border-style-none;
+  border-style: $ion-border-style-none;
 }
 .ion-border-style-solid {
-  border: $ion-border-style-solid;
+  border-style: $ion-border-style-solid;
 }
 .ion-border-style-dashed {
-  border: $ion-border-style-dashed;
+  border-style: $ion-border-style-dashed;
 }
 .ion-border-style-dotted {
-  border: $ion-border-style-dotted;
+  border-style: $ion-border-style-dotted;
 }
 .ion-border-size-0 {
-  border: $ion-border-size-0;
+  border-width: $ion-border-size-0;
 }
 .ion-border-size-025 {
-  border: $ion-border-size-025;
+  border-width: $ion-border-size-025;
 }
 .ion-border-size-050 {
-  border: $ion-border-size-050;
+  border-width: $ion-border-size-050;
 }
 .ion-border-size-075 {
-  border: $ion-border-size-075;
+  border-width: $ion-border-size-075;
 }
 .ion-border-radius-0 {
-  border: $ion-border-radius-0;
+  border-radius: $ion-border-radius-0;
 }
 .ion-border-radius-100 {
-  border: $ion-border-radius-100;
+  border-radius: $ion-border-radius-100;
 }
 .ion-border-radius-200 {
-  border: $ion-border-radius-200;
+  border-radius: $ion-border-radius-200;
 }
 .ion-border-radius-300 {
-  border: $ion-border-radius-300;
+  border-radius: $ion-border-radius-300;
 }
 .ion-border-radius-400 {
-  border: $ion-border-radius-400;
+  border-radius: $ion-border-radius-400;
 }
 .ion-border-radius-500 {
-  border: $ion-border-radius-500;
+  border-radius: $ion-border-radius-500;
 }
 .ion-border-radius-800 {
-  border: $ion-border-radius-800;
+  border-radius: $ion-border-radius-800;
 }
 .ion-border-radius-1000 {
-  border: $ion-border-radius-1000;
+  border-radius: $ion-border-radius-1000;
 }
 .ion-border-radius-full {
-  border: $ion-border-radius-full;
+  border-radius: $ion-border-radius-full;
 }
 .ion-border-radius-025 {
-  border: $ion-border-radius-025;
+  border-radius: $ion-border-radius-025;
 }
 .ion-shadow-1 {
   box-shadow: $ion-shadow-1;