Skip to content

Commit 60a241f

Browse files
brandyscarneybrandyscarney
committed
fix(themes): add tertiary, remove TODOs
1 parent a84f282 commit 60a241f

File tree

4 files changed

+52
-48
lines changed

4 files changed

+52
-48
lines changed

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

Lines changed: 40 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
// - subtle: a map of the subtle color variations
1515
//
1616
// Each hue color map should provide
17-
// TODO: rename base to background?
1817
// - base: The main color used for backgrounds
1918
// - base-rgb: The base color in RGB format
2019
// - contrast: A color that ensures readable text on the base color
@@ -33,7 +32,6 @@ $ionic-colors: (
3332
contrast: globals.$ion-text-inverse,
3433
contrast-rgb: globals.$ion-text-inverse-rgb,
3534
shade: globals.$ion-bg-primary-base-press,
36-
// TODO this is not a verified value
3735
tint: globals.$ion-semantics-primary-600,
3836
foreground: globals.$ion-text-primary,
3937
),
@@ -43,12 +41,10 @@ $ionic-colors: (
4341
contrast: globals.$ion-text-primary,
4442
contrast-rgb: globals.$ion-text-primary-rgb,
4543
shade: globals.$ion-bg-primary-subtle-press,
46-
// TODO this is not a verified value
4744
tint: globals.$ion-semantics-primary-200,
4845
foreground: globals.$ion-text-primary,
4946
),
5047
),
51-
// info equivalent
5248
secondary:
5349
(
5450
bold: (
@@ -57,7 +53,6 @@ $ionic-colors: (
5753
contrast: globals.$ion-text-inverse,
5854
contrast-rgb: globals.$ion-text-inverse-rgb,
5955
shade: globals.$ion-bg-info-base-press,
60-
// TODO this is not a verified value
6156
tint: globals.$ion-semantics-info-700,
6257
foreground: globals.$ion-text-info,
6358
),
@@ -67,43 +62,57 @@ $ionic-colors: (
6762
contrast: globals.$ion-text-info,
6863
contrast-rgb: globals.$ion-text-info-rgb,
6964
shade: globals.$ion-bg-info-subtle-press,
70-
// TODO this is not a verified value
7165
tint: globals.$ion-semantics-info-200,
7266
foreground: globals.$ion-text-info,
7367
),
7468
),
75-
// TODO - no equivalent for tertiary, can we add purple as a color?
76-
success:
77-
(
78-
bold: (
79-
base: globals.$ion-bg-success-base-default,
80-
base-rgb: globals.$ion-bg-success-base-default-rgb,
81-
contrast: globals.$ion-text-inverse,
82-
contrast-rgb: globals.$ion-text-inverse-rgb,
83-
shade: globals.$ion-bg-success-base-press,
84-
// TODO this is not a verified value
85-
tint: globals.$ion-semantics-success-800,
86-
foreground: globals.$ion-text-success,
87-
),
88-
subtle: (
89-
base: globals.$ion-bg-success-subtle-default,
90-
base-rgb: globals.$ion-bg-success-subtle-default-rgb,
91-
contrast: globals.$ion-text-success,
92-
contrast-rgb: globals.$ion-text-success-rgb,
93-
shade: globals.$ion-bg-success-subtle-press,
94-
// TODO this is not a verified value
95-
tint: globals.$ion-semantics-success-200,
96-
foreground: globals.$ion-text-success,
97-
),
69+
tertiary: (
70+
bold: (
71+
base: globals.$ion-primitives-violet-700,
72+
base-rgb: globals.$ion-primitives-violet-700-rgb,
73+
contrast: globals.$ion-text-inverse,
74+
contrast-rgb: globals.$ion-text-inverse-rgb,
75+
shade: globals.$ion-primitives-violet-800,
76+
tint: globals.$ion-primitives-violet-600,
77+
foreground: globals.$ion-primitives-violet-700,
9878
),
79+
subtle: (
80+
base: globals.$ion-primitives-violet-100,
81+
base-rgb: globals.$ion-primitives-violet-100-rgb,
82+
contrast: globals.$ion-primitives-violet-700,
83+
contrast-rgb: globals.$ion-primitives-violet-700-rgb,
84+
shade: globals.$ion-primitives-violet-300,
85+
tint: globals.$ion-primitives-violet-200,
86+
foreground: globals.$ion-primitives-violet-700,
87+
),
88+
),
89+
success: (
90+
bold: (
91+
base: globals.$ion-bg-success-base-default,
92+
base-rgb: globals.$ion-bg-success-base-default-rgb,
93+
contrast: globals.$ion-text-inverse,
94+
contrast-rgb: globals.$ion-text-inverse-rgb,
95+
shade: globals.$ion-bg-success-base-press,
96+
tint: globals.$ion-semantics-success-800,
97+
foreground: globals.$ion-text-success,
98+
),
99+
subtle: (
100+
base: globals.$ion-bg-success-subtle-default,
101+
base-rgb: globals.$ion-bg-success-subtle-default-rgb,
102+
contrast: globals.$ion-text-success,
103+
contrast-rgb: globals.$ion-text-success-rgb,
104+
shade: globals.$ion-bg-success-subtle-press,
105+
tint: globals.$ion-semantics-success-200,
106+
foreground: globals.$ion-text-success,
107+
),
108+
),
99109
warning: (
100110
bold: (
101111
base: globals.$ion-bg-warning-base-default,
102112
base-rgb: globals.$ion-bg-warning-base-default-rgb,
103113
contrast: globals.$ion-text-default,
104114
contrast-rgb: globals.$ion-text-default-rgb,
105115
shade: globals.$ion-bg-warning-base-press,
106-
// TODO this is not a verified value
107116
tint: globals.$ion-primitives-yellow-300,
108117
foreground: globals.$ion-text-warning,
109118
),
@@ -113,7 +122,6 @@ $ionic-colors: (
113122
contrast: globals.$ion-text-warning,
114123
contrast-rgb: globals.$ion-text-warning-rgb,
115124
shade: globals.$ion-bg-warning-subtle-press,
116-
// TODO this is not a verified value
117125
tint: globals.$ion-primitives-yellow-100,
118126
foreground: globals.$ion-text-warning,
119127
),
@@ -125,7 +133,6 @@ $ionic-colors: (
125133
contrast: globals.$ion-text-inverse,
126134
contrast-rgb: globals.$ion-text-inverse-rgb,
127135
shade: globals.$ion-bg-danger-base-press,
128-
// TODO this is not a verified value
129136
tint: globals.$ion-semantics-danger-700,
130137
foreground: globals.$ion-text-danger,
131138
),
@@ -135,23 +142,18 @@ $ionic-colors: (
135142
contrast: globals.$ion-text-danger,
136143
contrast-rgb: globals.$ion-text-danger-rgb,
137144
shade: globals.$ion-bg-danger-subtle-press,
138-
// TODO this is not a verified value
139145
tint: globals.$ion-semantics-danger-200,
140146
foreground: globals.$ion-text-danger,
141147
),
142148
),
143-
// neutral/base equivalent
144149
light:
145150
(
146151
bold: (
147152
base: globals.$ion-bg-neutral-base-default,
148153
base-rgb: globals.$ion-bg-neutral-base-default-rgb,
149154
contrast: globals.$ion-text-default,
150155
contrast-rgb: globals.$ion-text-default-rgb,
151-
// TODO this fails AA testing
152-
// shade: globals.$ion-bg-neutral-base-press,
153156
shade: globals.$ion-primitives-neutral-600,
154-
// TODO this is not a verified value
155157
tint: globals.$ion-primitives-neutral-400,
156158
foreground: globals.$ion-text-default,
157159
),
@@ -161,12 +163,10 @@ $ionic-colors: (
161163
contrast: globals.$ion-text-default,
162164
contrast-rgb: globals.$ion-text-default-rgb,
163165
shade: globals.$ion-bg-neutral-subtlest-press,
164-
// TODO this is not a verified value
165166
tint: globals.$ion-primitives-neutral-100,
166167
foreground: globals.$ion-text-default,
167168
),
168169
),
169-
// neutral/bold equivalent
170170
medium:
171171
(
172172
bold: (
@@ -175,7 +175,6 @@ $ionic-colors: (
175175
contrast: globals.$ion-text-inverse,
176176
contrast-rgb: globals.$ion-text-inverse-rgb,
177177
shade: globals.$ion-bg-neutral-bold-press,
178-
// TODO this is not a verified value
179178
tint: globals.$ion-primitives-neutral-900,
180179
foreground: globals.$ion-text-default,
181180
),
@@ -185,22 +184,18 @@ $ionic-colors: (
185184
contrast: globals.$ion-text-subtlest,
186185
contrast-rgb: globals.$ion-text-subtlest-rgb,
187186
shade: globals.$ion-bg-neutral-subtle-press,
188-
// TODO this is not a verified value
189187
tint: globals.$ion-primitives-neutral-100,
190188
foreground: globals.$ion-text-default,
191189
),
192190
),
193-
// neutral/boldest equivalent
194191
dark:
195192
(
196193
bold: (
197194
base: globals.$ion-bg-neutral-boldest-default,
198195
base-rgb: globals.$ion-bg-neutral-boldest-default-rgb,
199196
contrast: globals.$ion-text-inverse,
200197
contrast-rgb: globals.$ion-text-inverse-rgb,
201-
// TODO $ion-bg-neutral-boldest-press does not exist
202-
shade: globals.$ion-bg-neutral-bold-press,
203-
// TODO this is not a verified value
198+
shade: globals.$ion-bg-neutral-boldest-press,
204199
tint: globals.$ion-primitives-neutral-1100,
205200
foreground: globals.$ion-text-default,
206201
),
@@ -210,7 +205,6 @@ $ionic-colors: (
210205
contrast: globals.$ion-text-subtle,
211206
contrast-rgb: globals.$ion-text-subtle-rgb,
212207
shade: globals.$ion-bg-neutral-subtle-press,
213-
// TODO this is not a verified value
214208
tint: globals.$ion-primitives-neutral-100,
215209
foreground: globals.$ion-text-default,
216210
),

‎core/src/themes/ionic/test/colors/index.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@
9898
<h3 class="header">Text</h3>
9999
<div class="color-block ion-color-primary"><div class="ion-color">Primary</div></div>
100100
<div class="color-block ion-color-secondary"><div class="ion-color">Secondary</div></div>
101+
<div class="color-block ion-color-tertiary"><div class="ion-color">Tertiary</div></div>
101102
<div class="color-block ion-color-success"><div class="ion-color">Success</div></div>
102103
<div class="color-block ion-color-warning"><div class="ion-color">Warning</div></div>
103104
<div class="color-block ion-color-danger"><div class="ion-color">Danger</div></div>
@@ -110,6 +111,7 @@ <h3 class="header">Text</h3>
110111
<h3 class="header">Background</h3>
111112
<div class="color-block ion-color-primary"><div class="ion-color-background">Primary</div></div>
112113
<div class="color-block ion-color-secondary"><div class="ion-color-background">Secondary</div></div>
114+
<div class="color-block ion-color-tertiary"><div class="ion-color-background">Tertiary</div></div>
113115
<div class="color-block ion-color-success"><div class="ion-color-background">Success</div></div>
114116
<div class="color-block ion-color-warning"><div class="ion-color-background">Warning</div></div>
115117
<div class="color-block ion-color-danger"><div class="ion-color-background">Danger</div></div>
@@ -122,6 +124,7 @@ <h3 class="header">Background</h3>
122124
<h3 class="header">Background Shade</h3>
123125
<div class="color-block ion-color-primary"><div class="ion-color-background-shade">Primary</div></div>
124126
<div class="color-block ion-color-secondary"><div class="ion-color-background-shade">Secondary</div></div>
127+
<div class="color-block ion-color-tertiary"><div class="ion-color-background-shade">Tertiary</div></div>
125128
<div class="color-block ion-color-success"><div class="ion-color-background-shade">Success</div></div>
126129
<div class="color-block ion-color-warning"><div class="ion-color-background-shade">Warning</div></div>
127130
<div class="color-block ion-color-danger"><div class="ion-color-background-shade">Danger</div></div>
@@ -134,6 +137,7 @@ <h3 class="header">Background Shade</h3>
134137
<h3 class="header">Background Tint</h3>
135138
<div class="color-block ion-color-primary"><div class="ion-color-background-tint">Primary</div></div>
136139
<div class="color-block ion-color-secondary"><div class="ion-color-background-tint">Secondary</div></div>
140+
<div class="color-block ion-color-tertiary"><div class="ion-color-background-tint">Tertiary</div></div>
137141
<div class="color-block ion-color-success"><div class="ion-color-background-tint">Success</div></div>
138142
<div class="color-block ion-color-warning"><div class="ion-color-background-tint">Warning</div></div>
139143
<div class="color-block ion-color-danger"><div class="ion-color-background-tint">Danger</div></div>
@@ -146,6 +150,7 @@ <h3 class="header">Background Tint</h3>
146150
<h3 class="header">Subtle Text</h3>
147151
<div class="color-block ion-color-primary"><div class="ion-color-subtle">Primary</div></div>
148152
<div class="color-block ion-color-secondary"><div class="ion-color-subtle">Secondary</div></div>
153+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle">Tertiary</div></div>
149154
<div class="color-block ion-color-success"><div class="ion-color-subtle">Success</div></div>
150155
<div class="color-block ion-color-warning"><div class="ion-color-subtle">Warning</div></div>
151156
<div class="color-block ion-color-danger"><div class="ion-color-subtle">Danger</div></div>
@@ -158,6 +163,7 @@ <h3 class="header">Subtle Text</h3>
158163
<h3 class="header">Subtle Background</h3>
159164
<div class="color-block ion-color-primary"><div class="ion-color-subtle-background">Primary</div></div>
160165
<div class="color-block ion-color-secondary"><div class="ion-color-subtle-background">Secondary</div></div>
166+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background">Tertiary</div></div>
161167
<div class="color-block ion-color-success"><div class="ion-color-subtle-background">Success</div></div>
162168
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background">Warning</div></div>
163169
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background">Danger</div></div>
@@ -172,6 +178,9 @@ <h3 class="header">Subtle Background Shade</h3>
172178
<div class="color-block ion-color-secondary">
173179
<div class="ion-color-subtle-background-shade">Secondary</div>
174180
</div>
181+
<div class="color-block ion-color-tertiary">
182+
<div class="ion-color-subtle-background-shade">Tertiary</div>
183+
</div>
175184
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-shade">Success</div></div>
176185
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-shade">Warning</div></div>
177186
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-shade">Danger</div></div>
@@ -186,6 +195,7 @@ <h3 class="header">Subtle Background Tint</h3>
186195
<div class="color-block ion-color-secondary">
187196
<div class="ion-color-subtle-background-tint">Secondary</div>
188197
</div>
198+
<div class="color-block ion-color-tertiary"><div class="ion-color-subtle-background-tint">Tertiary</div></div>
189199
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-tint">Success</div></div>
190200
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-tint">Warning</div></div>
191201
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-tint">Danger</div></div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const styleTestHelpers = `
6464
* 8) The subtle contrast color as the text color against the subtle tint color as the background color
6565
*/
6666
configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ config, title }) => {
67-
const colors = ['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
67+
const colors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
6868

6969
test.describe(title('palette colors: bold'), () => {
7070
test.beforeEach(({ skip }) => {
@@ -117,6 +117,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'], palettes: ['light', 'dark']
117117

118118
// 4) The contrast color as the text color against the tint color as the background color
119119
// TODO(ROU-10778): Re-enable this test once the colors have been finalized
120+
// Fails on primary, tertiary, success, danger
120121
test.skip(`contrast color on "${color}" background tint should pass AA guidelines`, async ({ page }) => {
121122
await page.setContent(
122123
`${styleTestHelpers}

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
// Default Ionic Colors
88
// -------------------------------------------------------------------------------------------
99
// Color map should provide
10-
// TODO: rename base to background?
1110
// - base: The main color used for backgrounds
1211
// - base-rgb: The base color in RGB format
1312
// - contrast: A color that ensures readable text on the base color

0 commit comments

Comments
 (0)