Skip to content

Commit dc2ac02

Browse files
brandyscarneybrandyscarney
committed
Merge branch 'FW-6252' into FW-6252-button
2 parents 887743a + 67f8334 commit dc2ac02

File tree

9 files changed

+127
-19
lines changed

9 files changed

+127
-19
lines changed

‎core/src/components/input/input.common.scss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -134,8 +134,6 @@
134134
// otherwise the .input-cover will not be rendered at all
135135
// The input cover is not clickable when the input is disabled
136136
.cloned-input {
137-
@include position(0, null, 0, 0);
138-
139137
position: absolute;
140138

141139
pointer-events: none;

‎core/src/components/input/input.native.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
--highlight-color-focused: #{current-color(base)};
3030
}
3131

32+
// Input Cover: Unfocused
33+
// --------------------------------------------------
34+
.cloned-input {
35+
@include position(0, null, 0, 0);
36+
}
37+
3238
// Input Wrapper
3339
// ----------------------------------------------------------------
3440

‎core/src/css/palettes/dark.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,6 @@ $colors: (
8686
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
8787
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
8888
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
89-
--ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
9089
}
9190
}
9291
}

‎core/src/css/palettes/high-contrast-dark.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,6 @@ $lightest-text-color: $text-color;
113113
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
114114
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
115115
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
116-
--ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
117116
}
118117
}
119118
}

‎core/src/css/palettes/high-contrast.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,6 @@ $lightest-text-color: #888888;
136136
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
137137
--ion-color-#{$color-name}-shade: #{map.get($value, shade)};
138138
--ion-color-#{$color-name}-tint: #{map.get($value, tint)};
139-
--ion-color-#{$color-name}-foreground: #{map.get($value, foreground)};
140139
}
141140
}
142141
}

‎core/src/themes/functions.color.scss‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,13 @@
159159
) !important;
160160
--ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
161161
--ion-color#{$prefix}-tint: var(--ion-color-#{$color-name}#{$prefix}-tint, #{$tint}) !important;
162-
--ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
162+
// TODO(): remove the fallback variable when the foreground variable is
163+
// required by all palettes for all themes:
164+
// --ion-color#{$prefix}-foreground: var(--ion-color-#{$color-name}#{$prefix}-foreground, #{$foreground}) !important;
165+
--ion-color#{$prefix}-foreground: var(
166+
--ion-color-#{$color-name}#{$prefix}-foreground,
167+
var(--ion-color-#{$color-name}#{$prefix}, #{$foreground})
168+
) !important;
163169
}
164170
}
165171

@@ -229,7 +235,13 @@
229235
--ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
230236
--ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
231237
--ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
232-
--ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
238+
// TODO(): this "if" can be removed when foreground is defined for ios/md
239+
// themes. It should not be added until we want foreground to be required for
240+
// ios and md because this will be a breaking change, requiring users to add
241+
// `--ion-color-{color}-foreground` in order to override the default colors
242+
@if (map.get($colors, foreground)) {
243+
--ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
244+
}
233245
}
234246
}
235247
}

‎core/src/themes/ionic/test/colors/theme.e2e.ts‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,7 +130,16 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
130130
const results = await new AxeBuilder({ page }).analyze();
131131
expect(results.violations).toEqual([]);
132132
});
133+
}
134+
});
135+
136+
test.describe(title('palette colors: subtle'), () => {
137+
test.beforeEach(({ skip }) => {
138+
skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
139+
skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
140+
});
133141

142+
for (const color of colors) {
134143
// 5) The subtle foreground color as the text color against the default background color
135144
test(`subtle foreground color "${color}" should pass AA guidelines`, async ({ page }) => {
136145
await page.setContent(
@@ -192,3 +201,36 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
192201
}
193202
});
194203
});
204+
205+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, title }) => {
206+
test.describe(title('palette colors: custom'), () => {
207+
test(`overriding secondary color with foreground variant should style text properly`, async ({ page }) => {
208+
await page.setContent(
209+
`${styleTestHelpers}
210+
211+
<style>
212+
:root {
213+
--ion-color-secondary: #ff6c52;
214+
--ion-color-secondary-rgb: 255,108,82;
215+
--ion-color-secondary-contrast: #000000;
216+
--ion-color-secondary-contrast-rgb: 0,0,0;
217+
--ion-color-secondary-shade: #e05f48;
218+
--ion-color-secondary-tint: #ff7b63;
219+
--ion-color-secondary-foreground: #e05f48;
220+
}
221+
</style>
222+
223+
<main class="ion-color-secondary">
224+
<p class="ion-color">Hello World</p>
225+
</main>`,
226+
config
227+
);
228+
229+
const paragraph = await page.locator('p');
230+
const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
231+
232+
// Ensure the color matches --ion-color-secondary-foreground
233+
expect(color).toBe('rgb(224, 95, 72)');
234+
});
235+
});
236+
});

‎core/src/themes/native/native.theme.default.scss‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
// - contrast-rgb: The contrast color in RGB format
1414
// - shade: 12% darker version of the base color (mix with black), used for pressed/active states
1515
// - tint: 10% lighter version of the base color (mix with white), used for focused/hover states
16-
// - foreground: The main color used for text and foreground elements
1716

1817
$primary: #0054e9;
1918
$secondary: #0163aa;
@@ -34,7 +33,6 @@ $colors: (
3433
contrast-rgb: color-to-rgb-list(#fff),
3534
shade: get-color-shade($primary),
3635
tint: get-color-tint($primary),
37-
foreground: $primary,
3836
),
3937
),
4038
secondary: (
@@ -45,7 +43,6 @@ $colors: (
4543
contrast-rgb: color-to-rgb-list(#fff),
4644
shade: get-color-shade($secondary),
4745
tint: get-color-tint($secondary),
48-
foreground: $secondary,
4946
),
5047
),
5148
tertiary: (
@@ -56,7 +53,6 @@ $colors: (
5653
contrast-rgb: color-to-rgb-list(#fff),
5754
shade: get-color-shade($tertiary),
5855
tint: get-color-tint($tertiary),
59-
foreground: $tertiary,
6056
),
6157
),
6258
success: (
@@ -67,7 +63,6 @@ $colors: (
6763
contrast-rgb: color-to-rgb-list(#000),
6864
shade: get-color-shade($success),
6965
tint: get-color-tint($success),
70-
foreground: $success,
7166
),
7267
),
7368
warning: (
@@ -78,7 +73,6 @@ $colors: (
7873
contrast-rgb: color-to-rgb-list(#000),
7974
shade: get-color-shade($warning),
8075
tint: get-color-tint($warning),
81-
foreground: $warning,
8276
),
8377
),
8478
danger: (
@@ -89,7 +83,6 @@ $colors: (
8983
contrast-rgb: color-to-rgb-list(#fff),
9084
shade: get-color-shade($danger),
9185
tint: get-color-tint($danger),
92-
foreground: $danger,
9386
),
9487
),
9588
light: (
@@ -100,7 +93,6 @@ $colors: (
10093
contrast-rgb: color-to-rgb-list(#000),
10194
shade: get-color-shade($light),
10295
tint: get-color-tint($light),
103-
foreground: $light,
10496
),
10597
),
10698
medium: (
@@ -111,7 +103,6 @@ $colors: (
111103
contrast-rgb: color-to-rgb-list(#fff),
112104
shade: get-color-shade($medium),
113105
tint: get-color-tint($medium),
114-
foreground: $medium,
115106
),
116107
),
117108
dark: (
@@ -122,7 +113,6 @@ $colors: (
122113
contrast-rgb: color-to-rgb-list(#fff),
123114
shade: get-color-shade($dark),
124115
tint: get-color-tint($dark),
125-
foreground: $dark,
126116
),
127117
),
128118
);

‎core/src/themes/native/test/colors/theme.e2e.ts‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const styleTestHelpers = `
3131
background: rgba(var(--ion-color-base-rgb), 0.16);
3232
}
3333
.ion-color {
34-
color: var(--ion-color-base);
34+
color: var(--ion-color-foreground);
3535
}
3636
.ion-color-contrast {
3737
color: var(--ion-color-contrast);
@@ -52,7 +52,7 @@ const styleTestHelpers = `
5252
configs({ modes: ['md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
5353
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
5454

55-
test.describe(title('theme'), () => {
55+
test.describe(title('palette colors: bold'), () => {
5656
test.beforeEach(({ skip }) => {
5757
skip.browser('firefox', 'Color contrast ratio is consistent across browsers');
5858
skip.browser('webkit', 'Color contrast ratio is consistent across browsers');
@@ -227,3 +227,66 @@ configs({ modes: ['md'], directions: ['ltr'], palettes: ['high-contrast', 'high-
227227
});
228228
}
229229
);
230+
231+
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
232+
test.describe(title('colors: custom'), () => {
233+
// TODO(): this test can be removed when foreground is a required variant
234+
// for ios and md themes
235+
test(`overriding secondary color without foreground variant should style text properly`, async ({ page }) => {
236+
await page.setContent(
237+
`${styleTestHelpers}
238+
239+
<style>
240+
:root {
241+
--ion-color-secondary: #ff6c52;
242+
--ion-color-secondary-rgb: 255,108,82;
243+
--ion-color-secondary-contrast: #000000;
244+
--ion-color-secondary-contrast-rgb: 0,0,0;
245+
--ion-color-secondary-shade: #e05f48;
246+
--ion-color-secondary-tint: #ff7b63;
247+
}
248+
</style>
249+
250+
<main class="ion-color-secondary">
251+
<p class="ion-color">Hello World</p>
252+
</main>`,
253+
config
254+
);
255+
256+
const paragraph = await page.locator('p');
257+
const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
258+
259+
// Ensure the color matches --ion-color-secondary
260+
expect(color).toBe('rgb(255, 108, 82)');
261+
});
262+
263+
test(`overriding secondary color with foreground variant should style text properly`, async ({ page }) => {
264+
await page.setContent(
265+
`${styleTestHelpers}
266+
267+
<style>
268+
:root {
269+
--ion-color-secondary: #ff6c52;
270+
--ion-color-secondary-rgb: 255,108,82;
271+
--ion-color-secondary-contrast: #000000;
272+
--ion-color-secondary-contrast-rgb: 0,0,0;
273+
--ion-color-secondary-shade: #e05f48;
274+
--ion-color-secondary-tint: #ff7b63;
275+
--ion-color-secondary-foreground: #e05f48;
276+
}
277+
</style>
278+
279+
<main class="ion-color-secondary">
280+
<p class="ion-color">Hello World</p>
281+
</main>`,
282+
config
283+
);
284+
285+
const paragraph = await page.locator('p');
286+
const color = await paragraph.evaluate((el) => getComputedStyle(el).color);
287+
288+
// Ensure the color matches --ion-color-secondary-foreground
289+
expect(color).toBe('rgb(224, 95, 72)');
290+
});
291+
});
292+
});

0 commit comments

Comments
 (0)