Skip to content

Commit e62292f

Browse files
brandyscarneybrandyscarney
committed
Merge branch 'FW-6252' into FW-6252-chip
2 parents feb8cf6 + 67f8334 commit e62292f

File tree

9 files changed

+154
-16
lines changed

9 files changed

+154
-16
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: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,54 +17,63 @@ $colors: (
1717
contrast: #000,
1818
shade: get-color-shade($primary),
1919
tint: get-color-tint($primary),
20+
foreground: $primary,
2021
),
2122
secondary: (
2223
base: $secondary,
2324
contrast: #000,
2425
shade: get-color-shade($secondary),
2526
tint: get-color-tint($secondary),
27+
foreground: $secondary,
2628
),
2729
tertiary: (
2830
base: $tertiary,
2931
contrast: #000,
3032
shade: get-color-shade($tertiary),
3133
tint: get-color-tint($tertiary),
34+
foreground: $tertiary,
3235
),
3336
success: (
3437
base: $success,
3538
contrast: #000,
3639
shade: get-color-shade($success),
3740
tint: get-color-tint($success),
41+
foreground: $success,
3842
),
3943
warning: (
4044
base: $warning,
4145
contrast: #000,
4246
shade: get-color-shade($warning),
4347
tint: get-color-tint($warning),
48+
foreground: $warning,
4449
),
4550
danger: (
4651
base: $danger,
4752
contrast: #000,
4853
shade: get-color-shade($danger),
4954
tint: get-color-tint($danger),
55+
foreground: $danger,
5056
),
5157
light: (
5258
base: $light,
5359
contrast: #fff,
5460
shade: get-color-shade($light),
5561
tint: get-color-tint($light),
62+
foreground: $light,
5663
),
5764
medium: (
5865
base: $medium,
5966
contrast: #000,
6067
shade: get-color-shade($medium),
6168
tint: get-color-tint($medium),
69+
foreground: $medium,
6270
),
6371
dark: (
6472
base: $dark,
6573
contrast: #000,
6674
shade: get-color-shade($dark),
6775
tint: get-color-tint($dark),
76+
foreground: $dark,
6877
),
6978
);
7079

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,54 +17,63 @@ $colors: (
1717
contrast: #000,
1818
shade: get-color-shade($primary),
1919
tint: get-color-tint($primary),
20+
foreground: $primary,
2021
),
2122
secondary: (
2223
base: $secondary,
2324
contrast: #000,
2425
shade: get-color-shade($secondary),
2526
tint: get-color-tint($secondary),
27+
foreground: $secondary,
2628
),
2729
tertiary: (
2830
base: $tertiary,
2931
contrast: #000,
3032
shade: get-color-shade($tertiary),
3133
tint: get-color-tint($tertiary),
34+
foreground: $tertiary,
3235
),
3336
success: (
3437
base: $success,
3538
contrast: #000,
3639
shade: get-color-shade($success),
3740
tint: get-color-tint($success),
41+
foreground: $success,
3842
),
3943
warning: (
4044
base: $warning,
4145
contrast: #000,
4246
shade: get-color-shade($warning),
4347
tint: get-color-tint($warning),
48+
foreground: $warning,
4449
),
4550
danger: (
4651
base: $danger,
4752
contrast: #000,
4853
shade: get-color-shade($danger),
4954
tint: get-color-tint($danger),
55+
foreground: $danger,
5056
),
5157
light: (
5258
base: $light,
5359
contrast: #fff,
5460
shade: get-color-shade($light),
5561
tint: get-color-tint($light),
62+
foreground: $light,
5663
),
5764
medium: (
5865
base: $medium,
5966
contrast: #000,
6067
shade: get-color-shade($medium),
6168
tint: get-color-tint($medium),
69+
foreground: $medium,
6270
),
6371
dark: (
6472
base: $dark,
6573
contrast: #000,
6674
shade: get-color-shade($dark),
6775
tint: get-color-tint($dark),
76+
foreground: $dark,
6877
),
6978
);
7079

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,54 +17,63 @@ $colors: (
1717
contrast: #fff,
1818
shade: get-color-shade($primary),
1919
tint: get-color-tint($primary),
20+
foreground: $primary,
2021
),
2122
secondary: (
2223
base: $secondary,
2324
contrast: #fff,
2425
shade: get-color-shade($secondary),
2526
tint: get-color-tint($secondary),
27+
foreground: $secondary,
2628
),
2729
tertiary: (
2830
base: $tertiary,
2931
contrast: #fff,
3032
shade: get-color-shade($tertiary),
3133
tint: get-color-tint($tertiary),
34+
foreground: $tertiary,
3235
),
3336
success: (
3437
base: $success,
3538
contrast: #fff,
3639
shade: get-color-shade($success),
3740
tint: get-color-tint($success),
41+
foreground: $success,
3842
),
3943
warning: (
4044
base: $warning,
4145
contrast: #fff,
4246
shade: get-color-shade($warning),
4347
tint: get-color-tint($warning),
48+
foreground: $warning,
4449
),
4550
danger: (
4651
base: $danger,
4752
contrast: #fff,
4853
shade: get-color-shade($danger),
4954
tint: get-color-tint($danger),
55+
foreground: $danger,
5056
),
5157
light: (
5258
base: $light,
5359
contrast: #000,
5460
shade: get-color-shade($light),
5561
tint: get-color-tint($light),
62+
foreground: $light,
5663
),
5764
medium: (
5865
base: $medium,
5966
contrast: #fff,
6067
shade: get-color-shade($medium),
6168
tint: get-color-tint($medium),
69+
foreground: $medium,
6270
),
6371
dark: (
6472
base: $dark,
6573
contrast: #fff,
6674
shade: get-color-shade($dark),
6775
tint: get-color-tint($dark),
76+
foreground: $dark,
6877
),
6978
);
7079

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

0 commit comments

Comments
 (0)