diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js index 5dbeecab0ed..c1fc8378c2c 100644 --- a/core/scripts/tokens/index.js +++ b/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); diff --git a/core/scripts/tokens/utils.js b/core/scripts/tokens/utils.js index cd7b0c152aa..20a723af743 100644 --- a/core/scripts/tokens/utils.js +++ b/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 diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss index d1dac49b00f..e780dabfe0b 100644 --- a/core/src/foundations/ionic.utility.scss +++ b/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;