Skip to content

Commit 08b6e7a

Browse files
BenOsodracBenOsodrac
committed
fix border classes
1 parent e0ded9a commit 08b6e7a

File tree

2 files changed

+69
-69
lines changed

2 files changed

+69
-69
lines changed

‎core/scripts/tokens/utils.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,7 @@ export function generateSpaceUtilityClasses(prop, className) {
275275
// Generates a valid box-shadow value from a shadow Design Token structure
276276
export function generateRadiusUtilityClasses(propName) {
277277
return `.${classAndScssPrefix}-${propName} {
278-
--border-radius: $${classAndScssPrefix}-${propName};
278+
--border-radius: #{$${classAndScssPrefix}-${propName}};
279279
border-radius: $${classAndScssPrefix}-${propName};
280280
}`;
281281
}
@@ -296,7 +296,7 @@ export function generateBorderUtilityClasses(prop, propName) {
296296
attribute = 'border-color';
297297
}
298298
return `.${classAndScssPrefix}-${propName} {
299-
--${attribute}: $${classAndScssPrefix}-${propName};
299+
--${attribute}: #{$${classAndScssPrefix}-${propName}};
300300
${attribute}: $${classAndScssPrefix}-${propName};
301301
}`;
302302
}
@@ -309,7 +309,7 @@ export function generateFontUtilityClasses(prop, propName) {
309309
// Generates a valid box-shadow value from a shadow Design Token structure
310310
export function generateShadowUtilityClasses(propName) {
311311
return `.${classAndScssPrefix}-${propName} {
312-
--box-shadow: $${classAndScssPrefix}-${propName};
312+
--box-shadow: #{$${classAndScssPrefix}-${propName}};
313313
box-shadow: $${classAndScssPrefix}-${propName};
314314
}`;
315315
}

‎core/src/foundations/ionic.utility.scss‎

Lines changed: 66 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1172,139 +1172,139 @@
11721172
color: $ion-text-extended-pink;
11731173
}
11741174
.ion-border-default {
1175-
--border-color: $ion-border-default;
1175+
--border-color: #{$ion-border-default};
11761176
border-color: $ion-border-default;
11771177
}
11781178
.ion-border-boldest {
1179-
--border-color: $ion-border-boldest;
1179+
--border-color: #{$ion-border-boldest};
11801180
border-color: $ion-border-boldest;
11811181
}
11821182
.ion-border-subtle {
1183-
--border-color: $ion-border-subtle;
1183+
--border-color: #{$ion-border-subtle};
11841184
border-color: $ion-border-subtle;
11851185
}
11861186
.ion-border-subtlest {
1187-
--border-color: $ion-border-subtlest;
1187+
--border-color: #{$ion-border-subtlest};
11881188
border-color: $ion-border-subtlest;
11891189
}
11901190
.ion-border-primary {
1191-
--border-color: $ion-border-primary;
1191+
--border-color: #{$ion-border-primary};
11921192
border-color: $ion-border-primary;
11931193
}
11941194
.ion-border-success {
1195-
--border-color: $ion-border-success;
1195+
--border-color: #{$ion-border-success};
11961196
border-color: $ion-border-success;
11971197
}
11981198
.ion-border-warning {
1199-
--border-color: $ion-border-warning;
1199+
--border-color: #{$ion-border-warning};
12001200
border-color: $ion-border-warning;
12011201
}
12021202
.ion-border-disabled {
1203-
--border-color: $ion-border-disabled;
1203+
--border-color: #{$ion-border-disabled};
12041204
border-color: $ion-border-disabled;
12051205
}
12061206
.ion-border-focus-0 {
1207-
--border-color: $ion-border-focus-0;
1207+
--border-color: #{$ion-border-focus-0};
12081208
border-color: $ion-border-focus-0;
12091209
}
12101210
.ion-border-focus-default {
1211-
--border-color: $ion-border-focus-default;
1211+
--border-color: #{$ion-border-focus-default};
12121212
border-color: $ion-border-focus-default;
12131213
}
12141214
.ion-border-focus-error {
1215-
--border-color: $ion-border-focus-error;
1215+
--border-color: #{$ion-border-focus-error};
12161216
border-color: $ion-border-focus-error;
12171217
}
12181218
.ion-border-danger-default {
1219-
--border-color: $ion-border-danger-default;
1219+
--border-color: #{$ion-border-danger-default};
12201220
border-color: $ion-border-danger-default;
12211221
}
12221222
.ion-border-danger-press {
1223-
--border-color: $ion-border-danger-press;
1223+
--border-color: #{$ion-border-danger-press};
12241224
border-color: $ion-border-danger-press;
12251225
}
12261226
.ion-border-input-default {
1227-
--border-color: $ion-border-input-default;
1227+
--border-color: #{$ion-border-input-default};
12281228
border-color: $ion-border-input-default;
12291229
}
12301230
.ion-border-input-press {
1231-
--border-color: $ion-border-input-press;
1231+
--border-color: #{$ion-border-input-press};
12321232
border-color: $ion-border-input-press;
12331233
}
12341234
.ion-border-input-read-only {
1235-
--border-color: $ion-border-input-read-only;
1235+
--border-color: #{$ion-border-input-read-only};
12361236
border-color: $ion-border-input-read-only;
12371237
}
12381238
.ion-border-style-none {
1239-
--border-style: $ion-border-style-none;
1239+
--border-style: #{$ion-border-style-none};
12401240
border-style: $ion-border-style-none;
12411241
}
12421242
.ion-border-style-solid {
1243-
--border-style: $ion-border-style-solid;
1243+
--border-style: #{$ion-border-style-solid};
12441244
border-style: $ion-border-style-solid;
12451245
}
12461246
.ion-border-style-dashed {
1247-
--border-style: $ion-border-style-dashed;
1247+
--border-style: #{$ion-border-style-dashed};
12481248
border-style: $ion-border-style-dashed;
12491249
}
12501250
.ion-border-style-dotted {
1251-
--border-style: $ion-border-style-dotted;
1251+
--border-style: #{$ion-border-style-dotted};
12521252
border-style: $ion-border-style-dotted;
12531253
}
12541254
.ion-border-size-0 {
1255-
--border-width: $ion-border-size-0;
1255+
--border-width: #{$ion-border-size-0};
12561256
border-width: $ion-border-size-0;
12571257
}
12581258
.ion-border-size-025 {
1259-
--border-width: $ion-border-size-025;
1259+
--border-width: #{$ion-border-size-025};
12601260
border-width: $ion-border-size-025;
12611261
}
12621262
.ion-border-size-050 {
1263-
--border-width: $ion-border-size-050;
1263+
--border-width: #{$ion-border-size-050};
12641264
border-width: $ion-border-size-050;
12651265
}
12661266
.ion-border-size-075 {
1267-
--border-width: $ion-border-size-075;
1267+
--border-width: #{$ion-border-size-075};
12681268
border-width: $ion-border-size-075;
12691269
}
12701270
.ion-border-radius-0 {
1271-
--border-radius: $ion-border-radius-0;
1271+
--border-radius: #{$ion-border-radius-0};
12721272
border-radius: $ion-border-radius-0;
12731273
}
12741274
.ion-border-radius-100 {
1275-
--border-radius: $ion-border-radius-100;
1275+
--border-radius: #{$ion-border-radius-100};
12761276
border-radius: $ion-border-radius-100;
12771277
}
12781278
.ion-border-radius-200 {
1279-
--border-radius: $ion-border-radius-200;
1279+
--border-radius: #{$ion-border-radius-200};
12801280
border-radius: $ion-border-radius-200;
12811281
}
12821282
.ion-border-radius-300 {
1283-
--border-radius: $ion-border-radius-300;
1283+
--border-radius: #{$ion-border-radius-300};
12841284
border-radius: $ion-border-radius-300;
12851285
}
12861286
.ion-border-radius-400 {
1287-
--border-radius: $ion-border-radius-400;
1287+
--border-radius: #{$ion-border-radius-400};
12881288
border-radius: $ion-border-radius-400;
12891289
}
12901290
.ion-border-radius-500 {
1291-
--border-radius: $ion-border-radius-500;
1291+
--border-radius: #{$ion-border-radius-500};
12921292
border-radius: $ion-border-radius-500;
12931293
}
12941294
.ion-border-radius-800 {
1295-
--border-radius: $ion-border-radius-800;
1295+
--border-radius: #{$ion-border-radius-800};
12961296
border-radius: $ion-border-radius-800;
12971297
}
12981298
.ion-border-radius-1000 {
1299-
--border-radius: $ion-border-radius-1000;
1299+
--border-radius: #{$ion-border-radius-1000};
13001300
border-radius: $ion-border-radius-1000;
13011301
}
13021302
.ion-border-radius-full {
1303-
--border-radius: $ion-border-radius-full;
1303+
--border-radius: #{$ion-border-radius-full};
13041304
border-radius: $ion-border-radius-full;
13051305
}
13061306
.ion-border-radius-025 {
1307-
--border-radius: $ion-border-radius-025;
1307+
--border-radius: #{$ion-border-radius-025};
13081308
border-radius: $ion-border-radius-025;
13091309
}
13101310
.ion-icon-default {
@@ -1412,19 +1412,19 @@
14121412
color: $ion-state-press;
14131413
}
14141414
.ion-elevation-1 {
1415-
--box-shadow: $ion-elevation-1;
1415+
--box-shadow: #{$ion-elevation-1};
14161416
box-shadow: $ion-elevation-1;
14171417
}
14181418
.ion-elevation-2 {
1419-
--box-shadow: $ion-elevation-2;
1419+
--box-shadow: #{$ion-elevation-2};
14201420
box-shadow: $ion-elevation-2;
14211421
}
14221422
.ion-elevation-3 {
1423-
--box-shadow: $ion-elevation-3;
1423+
--box-shadow: #{$ion-elevation-3};
14241424
box-shadow: $ion-elevation-3;
14251425
}
14261426
.ion-elevation-4 {
1427-
--box-shadow: $ion-elevation-4;
1427+
--box-shadow: #{$ion-elevation-4};
14281428
box-shadow: $ion-elevation-4;
14291429
}
14301430

@@ -2644,87 +2644,87 @@
26442644
z-index: $ion-z-index-top;
26452645
}
26462646
.ion-rectangular-2xs {
2647-
--border-radius: $ion-rectangular-2xs;
2647+
--border-radius: #{$ion-rectangular-2xs};
26482648
border-radius: $ion-rectangular-2xs;
26492649
}
26502650
.ion-rectangular-xs {
2651-
--border-radius: $ion-rectangular-xs;
2651+
--border-radius: #{$ion-rectangular-xs};
26522652
border-radius: $ion-rectangular-xs;
26532653
}
26542654
.ion-rectangular-sm {
2655-
--border-radius: $ion-rectangular-sm;
2655+
--border-radius: #{$ion-rectangular-sm};
26562656
border-radius: $ion-rectangular-sm;
26572657
}
26582658
.ion-rectangular-md {
2659-
--border-radius: $ion-rectangular-md;
2659+
--border-radius: #{$ion-rectangular-md};
26602660
border-radius: $ion-rectangular-md;
26612661
}
26622662
.ion-rectangular-lg {
2663-
--border-radius: $ion-rectangular-lg;
2663+
--border-radius: #{$ion-rectangular-lg};
26642664
border-radius: $ion-rectangular-lg;
26652665
}
26662666
.ion-rectangular-xl {
2667-
--border-radius: $ion-rectangular-xl;
2667+
--border-radius: #{$ion-rectangular-xl};
26682668
border-radius: $ion-rectangular-xl;
26692669
}
26702670
.ion-rectangular-2xl {
2671-
--border-radius: $ion-rectangular-2xl;
2671+
--border-radius: #{$ion-rectangular-2xl};
26722672
border-radius: $ion-rectangular-2xl;
26732673
}
26742674
.ion-round-2xs {
2675-
--border-radius: $ion-round-2xs;
2675+
--border-radius: #{$ion-round-2xs};
26762676
border-radius: $ion-round-2xs;
26772677
}
26782678
.ion-round-xs {
2679-
--border-radius: $ion-round-xs;
2679+
--border-radius: #{$ion-round-xs};
26802680
border-radius: $ion-round-xs;
26812681
}
26822682
.ion-round-sm {
2683-
--border-radius: $ion-round-sm;
2683+
--border-radius: #{$ion-round-sm};
26842684
border-radius: $ion-round-sm;
26852685
}
26862686
.ion-round-md {
2687-
--border-radius: $ion-round-md;
2687+
--border-radius: #{$ion-round-md};
26882688
border-radius: $ion-round-md;
26892689
}
26902690
.ion-round-lg {
2691-
--border-radius: $ion-round-lg;
2691+
--border-radius: #{$ion-round-lg};
26922692
border-radius: $ion-round-lg;
26932693
}
26942694
.ion-round-xl {
2695-
--border-radius: $ion-round-xl;
2695+
--border-radius: #{$ion-round-xl};
26962696
border-radius: $ion-round-xl;
26972697
}
26982698
.ion-round-2xl {
2699-
--border-radius: $ion-round-2xl;
2699+
--border-radius: #{$ion-round-2xl};
27002700
border-radius: $ion-round-2xl;
27012701
}
27022702
.ion-soft-2xs {
2703-
--border-radius: $ion-soft-2xs;
2703+
--border-radius: #{$ion-soft-2xs};
27042704
border-radius: $ion-soft-2xs;
27052705
}
27062706
.ion-soft-xs {
2707-
--border-radius: $ion-soft-xs;
2707+
--border-radius: #{$ion-soft-xs};
27082708
border-radius: $ion-soft-xs;
27092709
}
27102710
.ion-soft-sm {
2711-
--border-radius: $ion-soft-sm;
2711+
--border-radius: #{$ion-soft-sm};
27122712
border-radius: $ion-soft-sm;
27132713
}
27142714
.ion-soft-md {
2715-
--border-radius: $ion-soft-md;
2715+
--border-radius: #{$ion-soft-md};
27162716
border-radius: $ion-soft-md;
27172717
}
27182718
.ion-soft-lg {
2719-
--border-radius: $ion-soft-lg;
2719+
--border-radius: #{$ion-soft-lg};
27202720
border-radius: $ion-soft-lg;
27212721
}
27222722
.ion-soft-xl {
2723-
--border-radius: $ion-soft-xl;
2723+
--border-radius: #{$ion-soft-xl};
27242724
border-radius: $ion-soft-xl;
27252725
}
27262726
.ion-soft-2xl {
2727-
--border-radius: $ion-soft-2xl;
2727+
--border-radius: #{$ion-soft-2xl};
27282728
border-radius: $ion-soft-2xl;
27292729
}
27302730
.ion-primitives-neutral-100 {
@@ -3456,31 +3456,31 @@
34563456
color: $ion-primitives-pink-1200;
34573457
}
34583458
.ion-shadow-1 {
3459-
--box-shadow: $ion-shadow-1;
3459+
--box-shadow: #{$ion-shadow-1};
34603460
box-shadow: $ion-shadow-1;
34613461
}
34623462
.ion-shadow-2 {
3463-
--box-shadow: $ion-shadow-2;
3463+
--box-shadow: #{$ion-shadow-2};
34643464
box-shadow: $ion-shadow-2;
34653465
}
34663466
.ion-shadow-3 {
3467-
--box-shadow: $ion-shadow-3;
3467+
--box-shadow: #{$ion-shadow-3};
34683468
box-shadow: $ion-shadow-3;
34693469
}
34703470
.ion-shadow-4 {
3471-
--box-shadow: $ion-shadow-4;
3471+
--box-shadow: #{$ion-shadow-4};
34723472
box-shadow: $ion-shadow-4;
34733473
}
34743474
.ion-shadow-5 {
3475-
--box-shadow: $ion-shadow-5;
3475+
--box-shadow: #{$ion-shadow-5};
34763476
box-shadow: $ion-shadow-5;
34773477
}
34783478
.ion-shadow-6 {
3479-
--box-shadow: $ion-shadow-6;
3479+
--box-shadow: #{$ion-shadow-6};
34803480
box-shadow: $ion-shadow-6;
34813481
}
34823482
.ion-shadow-7 {
3483-
--box-shadow: $ion-shadow-7;
3483+
--box-shadow: #{$ion-shadow-7};
34843484
box-shadow: $ion-shadow-7;
34853485
}
34863486

0 commit comments

Comments
 (0)