Skip to content

Commit 9bfe374

Browse files
brandyscarneybrandyscarney
committed
test(theme): use proper color variants
1 parent 8fc775f commit 9bfe374

File tree

1 file changed

+90
-145
lines changed

1 file changed

+90
-145
lines changed

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

Lines changed: 90 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -24,27 +24,20 @@
2424
<style>
2525
.container {
2626
display: flex;
27-
2827
justify-content: center;
29-
3028
flex-wrap: wrap;
31-
3229
border-bottom: 1px solid #ddd;
3330
padding: 20px 0;
3431
}
3532

3633
.header {
3734
width: 100%;
38-
3935
margin-top: 0;
4036
}
4137

4238
.color-block {
4339
display: flex;
4440
align-items: center;
45-
46-
background: var(--ion-color-contrast);
47-
4841
margin: 4px;
4942
}
5043

@@ -53,7 +46,7 @@
5346
}
5447

5548
.ion-color {
56-
color: var(--ion-color-base);
49+
color: var(--ion-color-foreground);
5750
}
5851

5952
.ion-color-background {
@@ -71,19 +64,28 @@
7164
color: var(--ion-color-contrast);
7265
}
7366

74-
.ion-color-background-08 {
75-
background: rgb(var(--ion-color-base-rgb), 0.08);
67+
.ion-color-background-16 {
68+
background: rgb(var(--ion-color-base-rgb), 0.16);
7669
color: var(--ion-color-base);
7770
}
7871

79-
.ion-color-background-12 {
80-
background: rgb(var(--ion-color-base-rgb), 0.12);
81-
color: var(--ion-color-base);
72+
.ion-color-subtle {
73+
color: var(--ion-color-subtle-foreground);
8274
}
8375

84-
.ion-color-background-16 {
85-
background: rgb(var(--ion-color-base-rgb), 0.16);
86-
color: var(--ion-color-base);
76+
.ion-color-subtle-background {
77+
background: var(--ion-color-subtle-base);
78+
color: var(--ion-color-subtle-contrast);
79+
}
80+
81+
.ion-color-subtle-background-shade {
82+
background: var(--ion-color-subtle-shade);
83+
color: var(--ion-color-subtle-contrast);
84+
}
85+
86+
.ion-color-subtle-background-tint {
87+
background: var(--ion-color-subtle-tint);
88+
color: var(--ion-color-subtle-contrast);
8789
}
8890
</style>
8991
</head>
@@ -99,157 +101,100 @@
99101
<ion-content id="content" class="ion-text-center" no-bounce>
100102
<div class="container">
101103
<h3 class="header">Text</h3>
102-
<div class="color-block ion-color-primary">
103-
<div class="ion-color">Primary</div>
104-
</div>
105-
<div class="color-block ion-color-success">
106-
<div class="ion-color">Success</div>
107-
</div>
108-
<div class="color-block ion-color-warning">
109-
<div class="ion-color">Warning</div>
110-
</div>
111-
<div class="color-block ion-color-danger">
112-
<div class="ion-color">Danger</div>
113-
</div>
114-
<div class="color-block ion-color-light">
115-
<div class="ion-color">Light</div>
116-
</div>
117-
<div class="color-block ion-color-neutral">
118-
<div class="ion-color">Neutral</div>
119-
</div>
104+
<div class="color-block ion-color-primary"><div class="ion-color">Primary</div></div>
105+
<div class="color-block ion-color-secondary"><div class="ion-color">Secondary</div></div>
106+
<div class="color-block ion-color-success"><div class="ion-color">Success</div></div>
107+
<div class="color-block ion-color-warning"><div class="ion-color">Warning</div></div>
108+
<div class="color-block ion-color-danger"><div class="ion-color">Danger</div></div>
109+
<div class="color-block ion-color-light"><div class="ion-color">Light</div></div>
110+
<div class="color-block ion-color-medium"><div class="ion-color">Medium</div></div>
111+
<div class="color-block ion-color-dark"><div class="ion-color">Dark</div></div>
120112
</div>
121113

122114
<div class="container">
123115
<h3 class="header">Background</h3>
124-
<div class="color-block ion-color-primary">
125-
<div class="ion-color-background">Primary</div>
126-
</div>
127-
<div class="color-block ion-color-success">
128-
<div class="ion-color-background">Success</div>
129-
</div>
130-
<div class="color-block ion-color-warning">
131-
<div class="ion-color-background">Warning</div>
132-
</div>
133-
<div class="color-block ion-color-danger">
134-
<div class="ion-color-background">Danger</div>
135-
</div>
136-
<div class="color-block ion-color-light">
137-
<div class="ion-color-background">Light</div>
138-
</div>
139-
<div class="color-block ion-color-neutral">
140-
<div class="ion-color-background">Neutral</div>
141-
</div>
116+
<div class="color-block ion-color-primary"><div class="ion-color-background">Primary</div></div>
117+
<div class="color-block ion-color-secondary"><div class="ion-color-background">Secondary</div></div>
118+
<div class="color-block ion-color-success"><div class="ion-color-background">Success</div></div>
119+
<div class="color-block ion-color-warning"><div class="ion-color-background">Warning</div></div>
120+
<div class="color-block ion-color-danger"><div class="ion-color-background">Danger</div></div>
121+
<div class="color-block ion-color-light"><div class="ion-color-background">Light</div></div>
122+
<div class="color-block ion-color-medium"><div class="ion-color-background">Medium</div></div>
123+
<div class="color-block ion-color-dark"><div class="ion-color-background">Dark</div></div>
142124
</div>
143125

144126
<div class="container">
145127
<h3 class="header">Background Shade</h3>
146-
<div class="color-block ion-color-primary">
147-
<div class="ion-color-background-shade">Primary</div>
148-
</div>
149-
<div class="color-block ion-color-success">
150-
<div class="ion-color-background-shade">Success</div>
151-
</div>
152-
<div class="color-block ion-color-warning">
153-
<div class="ion-color-background-shade">Warning</div>
154-
</div>
155-
<div class="color-block ion-color-danger">
156-
<div class="ion-color-background-shade">Danger</div>
157-
</div>
158-
<div class="color-block ion-color-light">
159-
<div class="ion-color-background-shade">Light</div>
160-
</div>
161-
<div class="color-block ion-color-neutral">
162-
<div class="ion-color-background-shade">Neutral</div>
163-
</div>
128+
<div class="color-block ion-color-primary"><div class="ion-color-background-shade">Primary</div></div>
129+
<div class="color-block ion-color-secondary"><div class="ion-color-background-shade">Secondary</div></div>
130+
<div class="color-block ion-color-success"><div class="ion-color-background-shade">Success</div></div>
131+
<div class="color-block ion-color-warning"><div class="ion-color-background-shade">Warning</div></div>
132+
<div class="color-block ion-color-danger"><div class="ion-color-background-shade">Danger</div></div>
133+
<div class="color-block ion-color-light"><div class="ion-color-background-shade">Light</div></div>
134+
<div class="color-block ion-color-medium"><div class="ion-color-background-shade">Medium</div></div>
135+
<div class="color-block ion-color-dark"><div class="ion-color-background-shade">Dark</div></div>
164136
</div>
165137

166138
<div class="container">
167139
<h3 class="header">Background Tint</h3>
168-
<div class="color-block ion-color-primary">
169-
<div class="ion-color-background-tint">Primary</div>
170-
</div>
171-
<div class="color-block ion-color-success">
172-
<div class="ion-color-background-tint">Success</div>
173-
</div>
174-
<div class="color-block ion-color-warning">
175-
<div class="ion-color-background-tint">Warning</div>
176-
</div>
177-
<div class="color-block ion-color-danger">
178-
<div class="ion-color-background-tint">Danger</div>
179-
</div>
180-
<div class="color-block ion-color-light">
181-
<div class="ion-color-background-tint">Light</div>
182-
</div>
183-
<div class="color-block ion-color-neutral">
184-
<div class="ion-color-background-tint">Neutral</div>
185-
</div>
140+
<div class="color-block ion-color-primary"><div class="ion-color-background-tint">Primary</div></div>
141+
<div class="color-block ion-color-secondary"><div class="ion-color-background-tint">Secondary</div></div>
142+
<div class="color-block ion-color-success"><div class="ion-color-background-tint">Success</div></div>
143+
<div class="color-block ion-color-warning"><div class="ion-color-background-tint">Warning</div></div>
144+
<div class="color-block ion-color-danger"><div class="ion-color-background-tint">Danger</div></div>
145+
<div class="color-block ion-color-light"><div class="ion-color-background-tint">Light</div></div>
146+
<div class="color-block ion-color-medium"><div class="ion-color-background-tint">Medium</div></div>
147+
<div class="color-block ion-color-dark"><div class="ion-color-background-tint">Dark</div></div>
186148
</div>
187149

188150
<div class="container">
189-
<h3 class="header">Background 8%</h3>
190-
<div class="color-block ion-color-primary">
191-
<div class="ion-color-background-08">Primary</div>
192-
</div>
193-
<div class="color-block ion-color-success">
194-
<div class="ion-color-background-08">Success</div>
195-
</div>
196-
<div class="color-block ion-color-warning">
197-
<div class="ion-color-background-08">Warning</div>
198-
</div>
199-
<div class="color-block ion-color-danger">
200-
<div class="ion-color-background-08">Danger</div>
201-
</div>
202-
<div class="color-block ion-color-light">
203-
<div class="ion-color-background-08">Light</div>
204-
</div>
205-
<div class="color-block ion-color-neutral">
206-
<div class="ion-color-background-08">Neutral</div>
207-
</div>
151+
<h3 class="header">Subtle Text</h3>
152+
<div class="color-block ion-color-primary"><div class="ion-color-subtle">Primary</div></div>
153+
<div class="color-block ion-color-secondary"><div class="ion-color-subtle">Secondary</div></div>
154+
<div class="color-block ion-color-success"><div class="ion-color-subtle">Success</div></div>
155+
<div class="color-block ion-color-warning"><div class="ion-color-subtle">Warning</div></div>
156+
<div class="color-block ion-color-danger"><div class="ion-color-subtle">Danger</div></div>
157+
<div class="color-block ion-color-light"><div class="ion-color-subtle">Light</div></div>
158+
<div class="color-block ion-color-medium"><div class="ion-color-subtle">Medium</div></div>
159+
<div class="color-block ion-color-dark"><div class="ion-color-subtle">Dark</div></div>
208160
</div>
209161

210162
<div class="container">
211-
<h3 class="header">Background 12%</h3>
212-
<div class="color-block ion-color-primary">
213-
<div class="ion-color-background-12">Primary</div>
214-
</div>
215-
<div class="color-block ion-color-success">
216-
<div class="ion-color-background-12">Success</div>
217-
</div>
218-
<div class="color-block ion-color-warning">
219-
<div class="ion-color-background-12">Warning</div>
220-
</div>
221-
<div class="color-block ion-color-danger">
222-
<div class="ion-color-background-12">Danger</div>
223-
</div>
224-
<div class="color-block ion-color-light">
225-
<div class="ion-color-background-12">Light</div>
226-
</div>
227-
<div class="color-block ion-color-neutral">
228-
<div class="ion-color-background-12">Neutral</div>
229-
</div>
163+
<h3 class="header">Subtle Background</h3>
164+
<div class="color-block ion-color-primary"><div class="ion-color-subtle-background">Primary</div></div>
165+
<div class="color-block ion-color-secondary"><div class="ion-color-subtle-background">Secondary</div></div>
166+
<div class="color-block ion-color-success"><div class="ion-color-subtle-background">Success</div></div>
167+
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background">Warning</div></div>
168+
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background">Danger</div></div>
169+
<div class="color-block ion-color-light"><div class="ion-color-subtle-background">Light</div></div>
170+
<div class="color-block ion-color-medium"><div class="ion-color-subtle-background">Medium</div></div>
171+
<div class="color-block ion-color-dark"><div class="ion-color-subtle-background">Dark</div></div>
230172
</div>
231173

232174
<div class="container">
233-
<h3 class="header">Background 16%</h3>
234-
<div class="color-block ion-color-primary">
235-
<div class="ion-color-background-16">Primary</div>
236-
</div>
237-
<div class="color-block ion-color-success">
238-
<div class="ion-color-background-16">Success</div>
239-
</div>
240-
<div class="color-block ion-color-warning">
241-
<div class="ion-color-background-16">Warning</div>
242-
</div>
243-
<div class="color-block ion-color-danger">
244-
<div class="ion-color-background-16">Danger</div>
245-
</div>
246-
<div class="color-block ion-color-light">
247-
<div class="ion-color-background-16">Light</div>
248-
</div>
249-
<div class="color-block ion-color-neutral">
250-
<div class="ion-color-background-16">Neutral</div>
251-
</div>
175+
<h3 class="header">Subtle Background Shade</h3>
176+
<div class="color-block ion-color-primary"><div class="ion-color-subtle-background-shade">Primary</div></div>
177+
<div class="color-block ion-color-secondary"><div class="ion-color-subtle-background-shade">Secondary</div></div>
178+
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-shade">Success</div></div>
179+
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-shade">Warning</div></div>
180+
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-shade">Danger</div></div>
181+
<div class="color-block ion-color-light"><div class="ion-color-subtle-background-shade">Light</div></div>
182+
<div class="color-block ion-color-medium"><div class="ion-color-subtle-background-shade">Medium</div></div>
183+
<div class="color-block ion-color-dark"><div class="ion-color-subtle-background-shade">Dark</div></div>
252184
</div>
185+
186+
<div class="container">
187+
<h3 class="header">Subtle Background Tint</h3>
188+
<div class="color-block ion-color-primary"><div class="ion-color-subtle-background-tint">Primary</div></div>
189+
<div class="color-block ion-color-secondary"><div class="ion-color-subtle-background-tint">Secondary</div></div>
190+
<div class="color-block ion-color-success"><div class="ion-color-subtle-background-tint">Success</div></div>
191+
<div class="color-block ion-color-warning"><div class="ion-color-subtle-background-tint">Warning</div></div>
192+
<div class="color-block ion-color-danger"><div class="ion-color-subtle-background-tint">Danger</div></div>
193+
<div class="color-block ion-color-light"><div class="ion-color-subtle-background-tint">Light</div></div>
194+
<div class="color-block ion-color-medium"><div class="ion-color-subtle-background-tint">Medium</div></div>
195+
<div class="color-block ion-color-dark"><div class="ion-color-subtle-background-tint">Dark</div></div>
196+
</div>
197+
253198
</ion-content>
254199
</ion-app>
255200
</body>

0 commit comments

Comments
 (0)