Skip to content

Commit 984e156

Browse files
BenOsodracBenOsodrac
committed
replaced usages
1 parent 567e185 commit 984e156

File tree

58 files changed

+3899
-3935
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3899
-3935
lines changed

‎core/src/components/accordion-group/accordion-group.ionic.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,33 @@
55
// --------------------------------------------------
66

77
:host {
8-
min-width: calc(#{globals.$token-scale-6200} + #{globals.$token-space-600});
8+
min-width: calc(#{globals.$ion-scale-6200} + #{globals.$ion-space-600});
99

10-
background-color: globals.$token-bg-neutral-subtlest-default;
10+
background-color: globals.$ion-bg-neutral-subtlest-default;
1111
}
1212

1313
// Inset Accordion Group
1414
// --------------------------------------------------
1515
// Shape and padding only apply if the group is inset
1616

1717
:host(.accordion-group-expand-inset) {
18-
@include globals.padding(globals.$token-space-100);
18+
@include globals.padding(globals.$ion-space-100);
1919
}
2020

2121
:host(.accordion-group-expand-inset.accordion-group-shape-round) {
22-
--border-radius: #{globals.$token-round-xl};
22+
--border-radius: #{globals.$ion-round-xl};
2323

24-
@include globals.border-radius(globals.$token-round-xl);
24+
@include globals.border-radius(globals.$ion-round-xl);
2525
}
2626

2727
:host(.accordion-group-expand-inset.accordion-group-shape-soft) {
28-
--border-radius: #{globals.$token-soft-xl};
28+
--border-radius: #{globals.$ion-soft-xl};
2929

30-
@include globals.border-radius(globals.$token-soft-xl);
30+
@include globals.border-radius(globals.$ion-soft-xl);
3131
}
3232

3333
:host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
34-
--border-radius: #{globals.$token-rectangular-xl};
34+
--border-radius: #{globals.$ion-rectangular-xl};
3535

36-
@include globals.border-radius(globals.$token-rectangular-xl);
36+
@include globals.border-radius(globals.$ion-rectangular-xl);
3737
}

‎core/src/components/accordion/accordion.ionic.scss‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212
// to properly inset the border relative to the entire
1313
// accordion, rather than just the header.
1414
:host::after {
15-
@include globals.margin(null, globals.$token-space-400, null, globals.$token-space-400);
15+
@include globals.margin(null, globals.$ion-space-400, null, globals.$ion-space-400);
1616
@include globals.position(null, 0, 0, 0);
1717

1818
display: block;
1919

2020
position: absolute;
2121

22-
height: globals.$token-border-size-025;
22+
height: globals.$ion-border-size-025;
2323

24-
background-color: globals.$token-border-default;
24+
background-color: globals.$ion-border-default;
2525

2626
content: "";
2727

@@ -43,26 +43,26 @@
4343
// we are adding a border to the ::after element of the accordion.
4444
::slotted(ion-item[slot="header"]) {
4545
--border-radius: inherit;
46-
--color: #{globals.$token-text-default};
47-
--border-width: #{globals.$token-border-size-0};
48-
--inner-border-width: #{globals.$token-scale-0};
49-
--min-height: #{globals.$token-scale-700};
50-
--padding-top: #{globals.$token-space-300};
51-
--padding-end: #{globals.$token-space-400};
52-
--padding-bottom: #{globals.$token-space-300};
53-
--padding-start: #{globals.$token-space-400};
54-
55-
@include globals.typography(globals.$token-heading-h6-medium);
46+
--color: #{globals.$ion-text-default};
47+
--border-width: #{globals.$ion-border-size-0};
48+
--inner-border-width: #{globals.$ion-scale-0};
49+
--min-height: #{globals.$ion-scale-700};
50+
--padding-top: #{globals.$ion-space-300};
51+
--padding-end: #{globals.$ion-space-400};
52+
--padding-bottom: #{globals.$ion-space-300};
53+
--padding-start: #{globals.$ion-space-400};
54+
55+
@include globals.typography(globals.$ion-heading-h6-medium);
5656
}
5757

5858
// Accordion Content
5959
// --------------------------------------------------
6060

6161
#content-wrapper {
62-
@include globals.padding(globals.$token-space-300, globals.$token-space-400);
63-
@include globals.typography(globals.$token-body-md-regular);
62+
@include globals.padding(globals.$ion-space-300, globals.$ion-space-400);
63+
@include globals.typography(globals.$ion-body-md-regular);
6464

65-
color: globals.$token-text-default;
65+
color: globals.$ion-text-default;
6666
}
6767

6868
// Disabled Accordion

‎core/src/components/avatar/avatar.ionic.scss‎

Lines changed: 68 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,18 @@
55
// --------------------------------------------------
66

77
:host {
8-
--padding-top: #{globals.$token-space-0};
9-
--padding-bottom: #{globals.$token-space-0};
8+
--padding-top: #{globals.$ion-space-0};
9+
--padding-bottom: #{globals.$ion-space-0};
1010

11-
@include globals.typography(globals.$token-heading-h6-medium);
11+
@include globals.typography(globals.$ion-heading-h6-medium);
1212

1313
display: flex;
1414

1515
align-items: center;
1616
justify-content: center;
1717

18-
background: globals.$token-bg-neutral-subtle-default;
19-
color: globals.$token-text-subtlest;
18+
background: globals.$ion-bg-neutral-subtle-default;
19+
color: globals.$ion-text-subtlest;
2020
}
2121

2222
:host(:not(.avatar-image)) {
@@ -28,66 +28,66 @@
2828

2929
/* 2-Extra Small */
3030
:host(.avatar-xxsmall) {
31-
--padding-end: #{globals.$token-space-050};
32-
--padding-start: #{globals.$token-space-050};
31+
--padding-end: #{globals.$ion-space-050};
32+
--padding-start: #{globals.$ion-space-050};
3333

34-
@include globals.typography(globals.$token-body-sm-medium);
34+
@include globals.typography(globals.$ion-body-sm-medium);
3535

36-
width: globals.$token-scale-400;
37-
height: globals.$token-scale-400;
36+
width: globals.$ion-scale-400;
37+
height: globals.$ion-scale-400;
3838
}
3939

4040
/* Extra Small */
4141
:host(.avatar-xsmall) {
42-
--padding-end: #{globals.$token-space-050};
43-
--padding-start: #{globals.$token-space-050};
42+
--padding-end: #{globals.$ion-space-050};
43+
--padding-start: #{globals.$ion-space-050};
4444

45-
@include globals.typography(globals.$token-body-sm-medium);
45+
@include globals.typography(globals.$ion-body-sm-medium);
4646

47-
width: globals.$token-scale-600;
48-
height: globals.$token-scale-600;
47+
width: globals.$ion-scale-600;
48+
height: globals.$ion-scale-600;
4949
}
5050

5151
/* Small */
5252
:host(.avatar-small) {
53-
--padding-end: #{globals.$token-space-150};
54-
--padding-start: #{globals.$token-space-150};
53+
--padding-end: #{globals.$ion-space-150};
54+
--padding-start: #{globals.$ion-space-150};
5555

56-
@include globals.typography(globals.$token-body-lg-medium);
56+
@include globals.typography(globals.$ion-body-lg-medium);
5757

58-
width: globals.$token-scale-800;
59-
height: globals.$token-scale-800;
58+
width: globals.$ion-scale-800;
59+
height: globals.$ion-scale-800;
6060
}
6161

6262
/* Medium */
6363
:host(.avatar-medium) {
64-
--padding-end: #{globals.$token-space-200};
65-
--padding-start: #{globals.$token-space-200};
64+
--padding-end: #{globals.$ion-space-200};
65+
--padding-start: #{globals.$ion-space-200};
6666

67-
width: globals.$token-scale-1000;
68-
height: globals.$token-scale-1000;
67+
width: globals.$ion-scale-1000;
68+
height: globals.$ion-scale-1000;
6969
}
7070

7171
/* Large */
7272
:host(.avatar-large) {
73-
--padding-end: #{globals.$token-space-250};
74-
--padding-start: #{globals.$token-space-250};
73+
--padding-end: #{globals.$ion-space-250};
74+
--padding-start: #{globals.$ion-space-250};
7575

76-
@include globals.typography(globals.$token-heading-h5-medium);
76+
@include globals.typography(globals.$ion-heading-h5-medium);
7777

78-
width: globals.$token-scale-1200;
79-
height: globals.$token-scale-1200;
78+
width: globals.$ion-scale-1200;
79+
height: globals.$ion-scale-1200;
8080
}
8181

8282
/* Extra Large */
8383
:host(.avatar-xlarge) {
84-
--padding-end: #{globals.$token-space-300};
85-
--padding-start: #{globals.$token-space-300};
84+
--padding-end: #{globals.$ion-space-300};
85+
--padding-start: #{globals.$ion-space-300};
8686

87-
@include globals.typography(globals.$token-heading-h4-medium);
87+
@include globals.typography(globals.$ion-heading-h4-medium);
8888

89-
width: globals.$token-scale-1400;
90-
height: globals.$token-scale-1400;
89+
width: globals.$ion-scale-1400;
90+
height: globals.$ion-scale-1400;
9191
}
9292

9393
// Avatar Shapes
@@ -96,40 +96,40 @@
9696
:host(.avatar-xxsmall.avatar-soft),
9797
:host(.avatar-xsmall.avatar-soft),
9898
:host(.avatar-small.avatar-soft) {
99-
--border-radius: #{globals.$token-soft-2xs};
99+
--border-radius: #{globals.$ion-soft-2xs};
100100
}
101101
:host(.avatar-medium.avatar-soft) {
102-
--border-radius: #{globals.$token-soft-xs};
102+
--border-radius: #{globals.$ion-soft-xs};
103103
}
104104
:host(.avatar-large.avatar-soft),
105105
:host(.avatar-xlarge.avatar-soft) {
106-
--border-radius: #{globals.$token-soft-md};
106+
--border-radius: #{globals.$ion-soft-md};
107107
}
108108

109109
:host(.avatar-xxsmall.avatar-round),
110110
:host(.avatar-xsmall.avatar-round),
111111
:host(.avatar-small.avatar-round) {
112-
--border-radius: #{globals.$token-round-2xs};
112+
--border-radius: #{globals.$ion-round-2xs};
113113
}
114114
:host(.avatar-medium.avatar-round) {
115-
--border-radius: #{globals.$token-round-xs};
115+
--border-radius: #{globals.$ion-round-xs};
116116
}
117117
:host(.avatar-large.avatar-round),
118118
:host(.avatar-xlarge.avatar-round) {
119-
--border-radius: #{globals.$token-round-md};
119+
--border-radius: #{globals.$ion-round-md};
120120
}
121121

122122
:host(.avatar-xxsmall.avatar-rectangular),
123123
:host(.avatar-xsmall.avatar-rectangular),
124124
:host(.avatar-small.avatar-rectangular) {
125-
--border-radius: #{globals.$token-rectangular-2xs};
125+
--border-radius: #{globals.$ion-rectangular-2xs};
126126
}
127127
:host(.avatar-medium.avatar-rectangular) {
128-
--border-radius: #{globals.$token-rectangular-xs};
128+
--border-radius: #{globals.$ion-rectangular-xs};
129129
}
130130
:host(.avatar-large.avatar-rectangular),
131131
:host(.avatar-xlarge.avatar-rectangular) {
132-
--border-radius: #{globals.$token-rectangular-md};
132+
--border-radius: #{globals.$ion-rectangular-md};
133133
}
134134

135135
// Avatar Icon
@@ -140,52 +140,52 @@
140140
}
141141

142142
:host(.avatar-xxsmall) ::slotted(ion-icon) {
143-
width: globals.$token-scale-300;
144-
height: globals.$token-scale-300;
143+
width: globals.$ion-scale-300;
144+
height: globals.$ion-scale-300;
145145
}
146146

147147
:host(.avatar-xsmall) ::slotted(ion-icon) {
148-
width: globals.$token-scale-400;
149-
height: globals.$token-scale-400;
148+
width: globals.$ion-scale-400;
149+
height: globals.$ion-scale-400;
150150
}
151151

152152
:host(.avatar-small) ::slotted(ion-icon) {
153-
width: globals.$token-scale-500;
154-
height: globals.$token-scale-500;
153+
width: globals.$ion-scale-500;
154+
height: globals.$ion-scale-500;
155155
}
156156

157157
:host(.avatar-medium) ::slotted(ion-icon) {
158-
width: globals.$token-scale-600;
159-
height: globals.$token-scale-600;
158+
width: globals.$ion-scale-600;
159+
height: globals.$ion-scale-600;
160160
}
161161

162162
:host(.avatar-large) ::slotted(ion-icon) {
163-
width: globals.$token-scale-700;
164-
height: globals.$token-scale-700;
163+
width: globals.$ion-scale-700;
164+
height: globals.$ion-scale-700;
165165
}
166166

167167
:host(.avatar-xlarge) ::slotted(ion-icon) {
168-
width: globals.$token-scale-800;
169-
height: globals.$token-scale-800;
168+
width: globals.$ion-scale-800;
169+
height: globals.$ion-scale-800;
170170
}
171171

172172
// Avatar Badge Empty (hint)
173173
// --------------------------------------------------
174174

175175
:host ::slotted(ion-badge.badge-vertical-top:empty) {
176-
@include globals.transform(translate(globals.$token-scale-050, calc(globals.$token-scale-050 * -1)));
176+
@include globals.transform(translate(globals.$ion-scale-050, calc(globals.$ion-scale-050 * -1)));
177177
}
178178

179179
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:empty) {
180-
@include globals.transform(translate(globals.$token-scale-100, calc(globals.$token-scale-100 * -1)));
180+
@include globals.transform(translate(globals.$ion-scale-100, calc(globals.$ion-scale-100 * -1)));
181181
}
182182

183183
:host ::slotted(ion-badge.badge-vertical-bottom:empty) {
184-
@include globals.transform(translate(0, globals.$token-scale-100));
184+
@include globals.transform(translate(0, globals.$ion-scale-100));
185185
}
186186

187187
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
188-
@include globals.transform(translate(globals.$token-scale-100, globals.$token-scale-100));
188+
@include globals.transform(translate(globals.$ion-scale-100, globals.$ion-scale-100));
189189
}
190190

191191
// Avatar Badge Bottom (hint)
@@ -196,22 +196,22 @@
196196
}
197197

198198
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
199-
@include globals.position(null, globals.$token-scale-100, globals.$token-scale-100, null);
199+
@include globals.position(null, globals.$ion-scale-100, globals.$ion-scale-100, null);
200200
@include globals.transform(translate(100%, 100%));
201201
}
202202

203203
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
204-
@include globals.position(null, calc(globals.$token-scale-050 * -1), calc(globals.$token-scale-050 * -1), null);
204+
@include globals.position(null, calc(globals.$ion-scale-050 * -1), calc(globals.$ion-scale-050 * -1), null);
205205
}
206206

207207
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
208208
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)),
209209
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
210-
@include globals.position(null, globals.$token-scale-050, globals.$token-scale-050, null);
210+
@include globals.position(null, globals.$ion-scale-050, globals.$ion-scale-050, null);
211211
}
212212

213213
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-bottom:not(:empty)) {
214-
@include globals.position(null, globals.$token-scale-150, globals.$token-scale-150, null);
214+
@include globals.position(null, globals.$ion-scale-150, globals.$ion-scale-150, null);
215215
}
216216

217217
// Avatar Badge Top (hint)
@@ -222,24 +222,24 @@
222222
}
223223

224224
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
225-
@include globals.position(globals.$token-scale-050, 0, null, null);
225+
@include globals.position(globals.$ion-scale-050, 0, null, null);
226226
}
227227

228228
:host(.avatar-xsmall) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
229-
@include globals.position(globals.$token-scale-100, calc(globals.$token-scale-050 * -1), null, null);
229+
@include globals.position(globals.$ion-scale-100, calc(globals.$ion-scale-050 * -1), null, null);
230230
}
231231

232232
:host(.avatar-small) ::slotted(ion-badge.badge-vertical-top:not(:empty)),
233233
:host(.avatar-medium) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
234-
@include globals.position(globals.$token-scale-150, 0, null, null);
234+
@include globals.position(globals.$ion-scale-150, 0, null, null);
235235
}
236236

237237
:host(.avatar-large) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
238-
@include globals.position(globals.$token-scale-150, globals.$token-scale-050, null, null);
238+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-050, null, null);
239239
}
240240

241241
:host(.avatar-xlarge) ::slotted(ion-badge.badge-vertical-top:not(:empty)) {
242-
@include globals.position(globals.$token-scale-150, globals.$token-scale-150, null, null);
242+
@include globals.position(globals.$ion-scale-150, globals.$ion-scale-150, null, null);
243243
}
244244

245245
// Avatar Disabled

0 commit comments

Comments
 (0)