javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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 <brandyscarney@users.noreply.github.com>
This commit is contained in:
Bernardo Cardoso
2024-12-10 08:58:48 +00:00
committed by GitHub
parent 805b75a6eb
commit 85e12dd624
3 changed files with 50 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
core/scripts/tokens/index.js
View File

@@ -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);

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

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

60
core/src/foundations/ionic.utility.scss
View File

@@ -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;