Skip to content

Commit 8fc775f

Browse files
brandyscarneybrandyscarney
committed
refactor(themes): add foreground color for colors when used as text
1 parent e13d85d commit 8fc775f

File tree

3 files changed

+194
-152
lines changed

3 files changed

+194
-152
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,6 +147,7 @@
147147
$contrast-rgb: map.get($color-variants, contrast-rgb);
148148
$shade: map.get($color-variants, shade);
149149
$tint: map.get($color-variants, tint);
150+
$foreground: map.get($color-variants, foreground);
150151

151152
// Generate CSS variables dynamically
152153
--ion-color#{$prefix}-base: var(--ion-color-#{$color-name}#{$prefix}, #{$base}) !important;
@@ -158,6 +159,7 @@
158159
) !important;
159160
--ion-color#{$prefix}-shade: var(--ion-color-#{$color-name}#{$prefix}-shade, #{$shade}) !important;
160161
--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;
161163
}
162164
}
163165

@@ -223,6 +225,7 @@
223225
--ion-color-#{$color-name}#{$prefix}-contrast-rgb: #{map.get($colors, contrast-rgb)};
224226
--ion-color-#{$color-name}#{$prefix}-shade: #{map.get($colors, shade)};
225227
--ion-color-#{$color-name}#{$prefix}-tint: #{map.get($colors, tint)};
228+
--ion-color-#{$color-name}#{$prefix}-foreground: #{map.get($colors, foreground)};
226229
}
227230
}
228231
}

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

Lines changed: 174 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -14,178 +14,206 @@
1414
// - subtle: a map of the subtle color variations
1515
//
1616
// Each hue color map should provide
17-
// - base: Color that will be primarily used
18-
// - base-rgb: The base color in rgb format
19-
// - contrast: Color that will provide readable text against the base color
20-
// - contrast-rgb: The contrast color in rgb format
21-
// - shade: Darker version of the base color
22-
// - tint: Lighter version of the base color
17+
// TODO: rename base to background?
18+
// - base: The main color used for backgrounds
19+
// - base-rgb: The base color in RGB format
20+
// - contrast: A color that ensures readable text on the base color
21+
// - contrast-rgb: The contrast color in RGB format
22+
// - shade: A darker variant of the base color, used for pressed/active states
23+
// - tint: A lighter variant of the base color, used for ?
24+
// - foreground: The main color used for text and foreground elements
2325

2426
// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
2527
// ios and md. This will allow us to have a single color map.
2628
$ionic-colors: (
2729
primary: (
2830
bold: (
29-
base: globals.$ion-semantics-primary-base,
30-
base-rgb: globals.$ion-semantics-primary-base-rgb,
31-
contrast: globals.$ion-primitives-base-white,
32-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
33-
shade: globals.$ion-semantics-primary-800,
31+
base: globals.$ion-bg-primary-base-default,
32+
base-rgb: globals.$ion-bg-primary-base-default-rgb,
33+
contrast: globals.$ion-text-inverse,
34+
contrast-rgb: globals.$ion-text-inverse-rgb,
35+
shade: globals.$ion-bg-primary-base-press,
3436
tint: globals.$ion-semantics-primary-500,
37+
// TODO this is not a verified value
38+
foreground: globals.$ion-text-primary,
3539
),
3640
subtle: (
37-
base: globals.$ion-semantics-primary-100,
38-
base-rgb: globals.$ion-semantics-primary-100-rgb,
39-
contrast: globals.$ion-semantics-primary-base,
40-
contrast-rgb: globals.$ion-semantics-primary-base-rgb,
41-
shade: globals.$ion-semantics-primary-300,
41+
base: globals.$ion-bg-primary-subtle-default,
42+
base-rgb: globals.$ion-bg-primary-subtle-default-rgb,
43+
contrast: globals.$ion-text-primary,
44+
contrast-rgb: globals.$ion-text-primary-rgb,
45+
shade: globals.$ion-bg-primary-subtle-press,
4246
tint: globals.$ion-semantics-primary-200,
47+
// TODO this is not a verified value
48+
foreground: globals.$ion-text-primary,
4349
),
4450
),
45-
secondary: (
46-
bold: (
47-
base: globals.$ion-semantics-info-base,
48-
base-rgb: globals.$ion-semantics-info-base-rgb,
49-
contrast: globals.$ion-primitives-base-white,
50-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
51-
shade: globals.$ion-semantics-info-800,
52-
tint: globals.$ion-semantics-info-500,
53-
),
54-
subtle: (
55-
base: globals.$ion-semantics-info-100,
56-
base-rgb: globals.$ion-semantics-info-100-rgb,
57-
contrast: globals.$ion-semantics-info-base,
58-
contrast-rgb: globals.$ion-semantics-info-base-rgb,
59-
shade: globals.$ion-semantics-info-300,
60-
tint: globals.$ion-semantics-info-200,
61-
),
62-
),
63-
tertiary: (
64-
bold: (
65-
base: globals.$ion-primitives-violet-700,
66-
base-rgb: globals.$ion-primitives-violet-700-rgb,
67-
contrast: globals.$ion-primitives-base-white,
68-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
69-
shade: globals.$ion-primitives-violet-800,
70-
tint: globals.$ion-primitives-violet-500,
71-
),
72-
subtle: (
73-
base: globals.$ion-primitives-violet-100,
74-
base-rgb: globals.$ion-primitives-violet-100-rgb,
75-
contrast: globals.$ion-primitives-violet-700,
76-
contrast-rgb: globals.$ion-primitives-violet-700-rgb,
77-
shade: globals.$ion-primitives-violet-300,
78-
tint: globals.$ion-primitives-violet-200,
79-
),
80-
),
81-
success: (
82-
bold: (
83-
base: globals.$ion-semantics-success-base,
84-
base-rgb: globals.$ion-semantics-success-base-rgb,
85-
contrast: globals.$ion-primitives-base-white,
86-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
87-
shade: globals.$ion-semantics-success-800,
88-
tint: globals.$ion-semantics-success-500,
51+
// info equivalent
52+
secondary:
53+
(
54+
bold: (
55+
base: globals.$ion-bg-info-base-default,
56+
base-rgb: globals.$ion-bg-info-base-default-rgb,
57+
contrast: globals.$ion-text-inverse,
58+
contrast-rgb: globals.$ion-text-inverse-rgb,
59+
shade: globals.$ion-bg-info-base-press,
60+
tint: globals.$ion-semantics-info-700,
61+
// TODO this is not a verified value
62+
text: globals.$ion-text-info,
63+
foreground: globals.$ion-text-info,
64+
),
65+
subtle: (
66+
base: globals.$ion-bg-info-subtle-default,
67+
base-rgb: globals.$ion-bg-info-subtle-default-rgb,
68+
contrast: globals.$ion-text-info,
69+
contrast-rgb: globals.$ion-text-info-rgb,
70+
shade: globals.$ion-bg-info-subtle-press,
71+
tint: globals.$ion-semantics-info-200,
72+
// TODO this is not a verified value
73+
foreground: globals.$ion-text-info,
74+
),
75+
),
76+
// TODO - no equivalent for tertiary, can we add purple as a color?
77+
success:
78+
(
79+
bold: (
80+
base: globals.$ion-bg-success-base-default,
81+
base-rgb: globals.$ion-bg-success-base-default-rgb,
82+
contrast: globals.$ion-text-inverse,
83+
contrast-rgb: globals.$ion-text-inverse-rgb,
84+
shade: globals.$ion-bg-success-base-press,
85+
tint: globals.$ion-semantics-success-700,
86+
// TODO this is not a verified value
87+
foreground: globals.$ion-text-success,
88+
),
89+
subtle: (
90+
base: globals.$ion-bg-success-subtle-default,
91+
base-rgb: globals.$ion-bg-success-subtle-default-rgb,
92+
contrast: globals.$ion-text-success,
93+
contrast-rgb: globals.$ion-text-success-rgb,
94+
shade: globals.$ion-bg-success-subtle-press,
95+
tint: globals.$ion-semantics-success-200,
96+
// TODO this is not a verified value
97+
foreground: globals.$ion-text-success,
98+
),
8999
),
90-
subtle: (
91-
base: globals.$ion-semantics-success-100,
92-
base-rgb: globals.$ion-semantics-success-100-rgb,
93-
contrast: globals.$ion-semantics-success-base,
94-
contrast-rgb: globals.$ion-semantics-success-base-rgb,
95-
shade: globals.$ion-semantics-success-300,
96-
tint: globals.$ion-semantics-success-200,
97-
),
98-
),
99100
warning: (
100101
bold: (
101-
base: globals.$ion-semantics-warning-base,
102-
base-rgb: globals.$ion-semantics-warning-base-rgb,
103-
contrast: globals.$ion-primitives-base-white,
104-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
105-
shade: globals.$ion-semantics-warning-800,
106-
tint: globals.$ion-semantics-warning-500,
102+
base: globals.$ion-bg-warning-base-default,
103+
base-rgb: globals.$ion-bg-warning-base-default-rgb,
104+
contrast: globals.$ion-text-default,
105+
contrast-rgb: globals.$ion-text-default-rgb,
106+
shade: globals.$ion-bg-warning-base-press,
107+
tint: globals.$ion-primitives-yellow-300,
108+
// TODO this is not a verified value
109+
foreground: globals.$ion-text-warning,
107110
),
108111
subtle: (
109-
base: globals.$ion-semantics-warning-100,
110-
base-rgb: globals.$ion-semantics-warning-100-rgb,
111-
contrast: globals.$ion-semantics-warning-base,
112-
contrast-rgb: globals.$ion-semantics-warning-base-rgb,
113-
shade: globals.$ion-semantics-warning-300,
114-
tint: globals.$ion-semantics-warning-200,
112+
base: globals.$ion-bg-warning-subtle-default,
113+
base-rgb: globals.$ion-bg-warning-subtle-default-rgb,
114+
contrast: globals.$ion-text-warning,
115+
contrast-rgb: globals.$ion-text-warning-rgb,
116+
shade: globals.$ion-bg-warning-subtle-press,
117+
tint: globals.$ion-primitives-yellow-100,
118+
// TODO this is not a verified value
119+
foreground: globals.$ion-text-warning,
115120
),
116121
),
117122
danger: (
118123
bold: (
119-
base: globals.$ion-semantics-danger-base,
120-
base-rgb: globals.$ion-semantics-danger-base-rgb,
121-
contrast: globals.$ion-primitives-base-white,
122-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
123-
shade: globals.$ion-semantics-danger-800,
124-
tint: globals.$ion-semantics-danger-500,
124+
base: globals.$ion-bg-danger-base-default,
125+
base-rgb: globals.$ion-bg-danger-base-default-rgb,
126+
contrast: globals.$ion-text-inverse,
127+
contrast-rgb: globals.$ion-text-inverse-rgb,
128+
shade: globals.$ion-bg-danger-base-press,
129+
tint: globals.$ion-semantics-danger-600,
130+
// TODO this is not a verified value
131+
foreground: globals.$ion-text-danger,
125132
),
126133
subtle: (
127-
base: globals.$ion-semantics-danger-100,
128-
base-rgb: globals.$ion-semantics-danger-100-rgb,
129-
contrast: globals.$ion-semantics-danger-base,
130-
contrast-rgb: globals.$ion-semantics-danger-base-rgb,
131-
shade: globals.$ion-semantics-danger-300,
134+
base: globals.$ion-bg-danger-subtle-default,
135+
base-rgb: globals.$ion-bg-danger-subtle-default-rgb,
136+
contrast: globals.$ion-text-danger,
137+
contrast-rgb: globals.$ion-text-danger-rgb,
138+
shade: globals.$ion-bg-danger-subtle-press,
132139
tint: globals.$ion-semantics-danger-200,
140+
// TODO this is not a verified value
141+
foreground: globals.$ion-text-danger,
133142
),
134143
),
135-
light: (
136-
bold: (
137-
base: globals.$ion-primitives-neutral-200,
138-
base-rgb: globals.$ion-primitives-neutral-200-rgb,
139-
contrast: globals.$ion-primitives-base-black,
140-
contrast-rgb: globals.$ion-primitives-base-black-rgb,
141-
shade: globals.$ion-primitives-neutral-300,
142-
tint: globals.$ion-primitives-neutral-100,
143-
),
144-
subtle: (
145-
base: globals.$ion-primitives-neutral-100,
146-
base-rgb: globals.$ion-primitives-neutral-100-rgb,
147-
contrast: globals.$ion-primitives-neutral-700,
148-
contrast-rgb: globals.$ion-primitives-neutral-700-rgb,
149-
shade: globals.$ion-primitives-neutral-300,
150-
tint: globals.$ion-primitives-neutral-200,
151-
),
152-
),
153-
medium: (
154-
bold: (
155-
base: globals.$ion-primitives-neutral-700,
156-
base-rgb: globals.$ion-primitives-neutral-700-rgb,
157-
contrast: globals.$ion-primitives-base-white,
158-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
159-
shade: globals.$ion-primitives-neutral-800,
160-
tint: globals.$ion-primitives-neutral-500,
161-
),
162-
subtle: (
163-
base: globals.$ion-primitives-neutral-100,
164-
base-rgb: globals.$ion-primitives-neutral-100-rgb,
165-
contrast: globals.$ion-primitives-neutral-700,
166-
contrast-rgb: globals.$ion-primitives-neutral-700-rgb,
167-
shade: globals.$ion-primitives-neutral-300,
168-
tint: globals.$ion-primitives-neutral-200,
169-
),
170-
),
171-
dark: (
172-
bold: (
173-
base: globals.$ion-primitives-neutral-1100,
174-
base-rgb: globals.$ion-primitives-neutral-1100-rgb,
175-
contrast: globals.$ion-primitives-base-white,
176-
contrast-rgb: globals.$ion-primitives-base-white-rgb,
177-
shade: globals.$ion-primitives-neutral-1200,
178-
tint: globals.$ion-primitives-neutral-900,
144+
// neutral/base equivalent
145+
light:
146+
(
147+
bold: (
148+
base: globals.$ion-bg-neutral-base-default,
149+
base-rgb: globals.$ion-bg-neutral-base-default-rgb,
150+
contrast: globals.$ion-text-inverse,
151+
contrast-rgb: globals.$ion-text-inverse-rgb,
152+
shade: globals.$ion-bg-neutral-base-press,
153+
tint: globals.$ion-primitives-neutral-800,
154+
// TODO this is not a verified value
155+
foreground: globals.$ion-text-default,
156+
),
157+
subtle: (
158+
base: globals.$ion-bg-neutral-subtlest-default,
159+
base-rgb: globals.$ion-bg-neutral-subtlest-default-rgb,
160+
contrast: globals.$ion-text-default,
161+
contrast-rgb: globals.$ion-text-default-rgb,
162+
shade: globals.$ion-bg-neutral-subtlest-press,
163+
tint: globals.$ion-primitives-neutral-100,
164+
// TODO this is not a verified value
165+
foreground: globals.$ion-text-default,
166+
),
167+
),
168+
// neutral/bold equivalent
169+
medium:
170+
(
171+
bold: (
172+
base: globals.$ion-bg-neutral-bold-default,
173+
base-rgb: globals.$ion-bg-neutral-bold-default-rgb,
174+
contrast: globals.$ion-text-inverse,
175+
contrast-rgb: globals.$ion-text-inverse-rgb,
176+
shade: globals.$ion-bg-neutral-bold-press,
177+
tint: globals.$ion-primitives-neutral-800,
178+
// TODO this is not a verified value
179+
foreground: globals.$ion-text-default,
180+
),
181+
subtle: (
182+
base: globals.$ion-bg-neutral-subtle-default,
183+
base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
184+
contrast: globals.$ion-text-subtlest,
185+
contrast-rgb: globals.$ion-text-subtlest-rgb,
186+
shade: globals.$ion-bg-neutral-subtle-press,
187+
tint: globals.$ion-primitives-neutral-100,
188+
// TODO this is not a verified value
189+
foreground: globals.$ion-text-default,
190+
),
191+
),
192+
// neutral/boldest equivalent
193+
dark:
194+
(
195+
bold: (
196+
base: globals.$ion-bg-neutral-boldest-default,
197+
base-rgb: globals.$ion-bg-neutral-boldest-default-rgb,
198+
contrast: globals.$ion-text-inverse,
199+
contrast-rgb: globals.$ion-text-inverse-rgb,
200+
// TODO $ion-bg-neutral-boldest-press does not exist
201+
shade: globals.$ion-bg-neutral-bold-press,
202+
tint: globals.$ion-primitives-neutral-800,
203+
// TODO this is not a verified value
204+
foreground: globals.$ion-text-default,
205+
),
206+
subtle: (
207+
base: globals.$ion-bg-neutral-subtle-default,
208+
base-rgb: globals.$ion-bg-neutral-subtle-default-rgb,
209+
contrast: globals.$ion-text-subtle,
210+
contrast-rgb: globals.$ion-text-subtle-rgb,
211+
shade: globals.$ion-bg-neutral-subtle-press,
212+
tint: globals.$ion-primitives-neutral-100,
213+
// TODO this is not a verified value
214+
foreground: globals.$ion-text-default,
215+
),
179216
),
180-
subtle: (
181-
base: globals.$ion-primitives-neutral-100,
182-
base-rgb: globals.$ion-primitives-neutral-100-rgb,
183-
contrast: globals.$ion-primitives-neutral-1100,
184-
contrast-rgb: globals.$ion-primitives-neutral-1100-rgb,
185-
shade: globals.$ion-primitives-neutral-300,
186-
tint: globals.$ion-primitives-neutral-200,
187-
),
188-
),
189217
);
190218

191219
// Ionic Tabs & Tab Bar
@@ -195,5 +223,5 @@ $tabbar-ionic-background: var(--ion-tab-bar-background, globals.$ion-primitives-
195223
$tabbar-ionic-background-activated: var(--ion-tab-bar-background-activated, globals.$ion-primitives-neutral-100);
196224
$tabbar-ionic-background-focused: var(--ion-tab-bar-background-focused, transparent);
197225
$tabbar-ionic-color: var(--ion-tab-bar-color, globals.$ion-primitives-neutral-800);
198-
$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-semantics-primary-base);
226+
$tabbar-ionic-color-selected: var(--ion-tab-bar-color-selected, globals.$ion-text-primary);
199227
$tabbar-ionic-border-color: var(--ion-tab-bar-border-color, transparent);

0 commit comments

Comments
 (0)