javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 09:34:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(css): add CSS utility classes to the ionic theme bundle to match other themes (#29974)

Browse Source 
The default (iOS/MD) bundle is removed from the tests for the `ionic` theme because it adds global component styles that the `ionic` theme does not need. The missing utility files are imported, and padding/margin classes are generated from the design tokens, as many tests rely on `ion-padding` and `ion-text-center` being available. This change ensures the `ionic` theme includes the same classes offered in our documentation: https://ionicframework.com/docs/layout/css-utilities.
This commit is contained in:
Brandy Carney
2024-10-30 09:48:32 -04:00
committed by GitHub
parent a5a7bee25c
commit 3306d717ef
67 changed files with 310 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
core/scripts/tokens/utils.js
View File

@ -125,6 +125,73 @@ function generateColorUtilityClasses(prop, className) {
.${variablesPrefix}-background-${className} {\n background-color: $${variablesPrefix}-${prop.name};\n}`;
}
// Generates margin and padding utility classes to match the token-agnostic
// utilities provided by the Ionic Framework
function generateDefaultSpaceUtilityClasses() {
const zeroMarginPaddingToken = 'space-0';
const defaultMarginPaddingToken = 'space-400';
const marginPaddingTemplate = (type) => `
.${variablesPrefix}-no-${type} {
--${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
--${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
--${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
--${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
@include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
};
.${variablesPrefix}-${type} {
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
};
.${variablesPrefix}-${type}-top {
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
};
.${variablesPrefix}-${type}-end {
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
};
.${variablesPrefix}-${type}-bottom {
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
};
.${variablesPrefix}-${type}-start {
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
};
.${variablesPrefix}-${type}-vertical {
--${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
--${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
};
.${variablesPrefix}-${type}-horizontal {
--${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
--${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
@include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
};
`;
return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
}
// Generates a margin or padding based css utility-class from a space Design Token structure
function generateSpaceUtilityClasses(prop, className) {
// This exact format is needed so that it compiles the tokens with the expected lint rules
@ -203,6 +270,7 @@ module.exports = {
setPrefixValue,
generateRadiusUtilityClasses,
generateColorUtilityClasses,
generateDefaultSpaceUtilityClasses,
generateSpaceUtilityClasses,
removeConsecutiveRepeatedWords,
generateBorderSizeUtilityClasses,