Skip to content

Commit da75baf

Browse files
feat(colors): add new colors for ionic theme (#31086)
Issue number: resolves internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? The ionic theme only has ten colors to be used ## What is the new behavior? New colors were added, and ionic theme will have twenty colors available ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
1 parent 8181725 commit da75baf

1 file changed

Lines changed: 200 additions & 0 deletions

File tree

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

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,206 @@ $ionic-colors: (
145145
foreground: globals.$ion-text-danger,
146146
),
147147
),
148+
pumpkin: (
149+
bold: (
150+
base: globals.$ion-bg-extended-pumpkin-base-default,
151+
base-rgb: globals.$ion-bg-extended-pumpkin-base-default-rgb,
152+
contrast: globals.$ion-text-inverse,
153+
contrast-rgb: globals.$ion-text-inverse-rgb,
154+
shade: globals.$ion-bg-extended-pumpkin-base-press,
155+
tint: globals.$ion-primitives-pumpkin-600,
156+
foreground: globals.$ion-text-extended-pumpkin,
157+
),
158+
subtle: (
159+
base: globals.$ion-bg-extended-pumpkin-subtle-default,
160+
base-rgb: globals.$ion-bg-extended-pumpkin-subtle-default-rgb,
161+
contrast: globals.$ion-text-extended-pumpkin,
162+
contrast-rgb: globals.$ion-text-extended-pumpkin-rgb,
163+
shade: globals.$ion-bg-extended-pumpkin-subtle-press,
164+
tint: globals.$ion-primitives-pumpkin-200,
165+
foreground: globals.$ion-text-extended-pumpkin,
166+
),
167+
),
168+
orange: (
169+
bold: (
170+
base: globals.$ion-bg-extended-orange-base-default,
171+
base-rgb: globals.$ion-bg-extended-orange-base-default-rgb,
172+
contrast: globals.$ion-text-inverse,
173+
contrast-rgb: globals.$ion-text-inverse-rgb,
174+
shade: globals.$ion-bg-extended-orange-base-press,
175+
tint: globals.$ion-primitives-orange-600,
176+
foreground: globals.$ion-text-extended-orange,
177+
),
178+
subtle: (
179+
base: globals.$ion-bg-extended-orange-subtle-default,
180+
base-rgb: globals.$ion-bg-extended-orange-subtle-default-rgb,
181+
contrast: globals.$ion-text-extended-orange,
182+
contrast-rgb: globals.$ion-text-extended-orange-rgb,
183+
shade: globals.$ion-bg-extended-orange-subtle-press,
184+
tint: globals.$ion-primitives-orange-200,
185+
foreground: globals.$ion-text-extended-orange,
186+
),
187+
),
188+
lime: (
189+
bold: (
190+
base: globals.$ion-bg-extended-lime-base-default,
191+
base-rgb: globals.$ion-bg-extended-lime-base-default-rgb,
192+
contrast: globals.$ion-text-inverse,
193+
contrast-rgb: globals.$ion-text-inverse-rgb,
194+
shade: globals.$ion-bg-extended-lime-base-press,
195+
tint: globals.$ion-primitives-lime-600,
196+
foreground: globals.$ion-text-extended-lime,
197+
),
198+
subtle: (
199+
base: globals.$ion-bg-extended-lime-subtle-default,
200+
base-rgb: globals.$ion-bg-extended-lime-subtle-default-rgb,
201+
contrast: globals.$ion-text-extended-lime,
202+
contrast-rgb: globals.$ion-text-extended-lime-rgb,
203+
shade: globals.$ion-bg-extended-lime-subtle-press,
204+
tint: globals.$ion-primitives-lime-200,
205+
foreground: globals.$ion-text-extended-lime,
206+
),
207+
),
208+
teal: (
209+
bold: (
210+
base: globals.$ion-bg-extended-teal-base-default,
211+
base-rgb: globals.$ion-bg-extended-teal-base-default-rgb,
212+
contrast: globals.$ion-text-inverse,
213+
contrast-rgb: globals.$ion-text-inverse-rgb,
214+
shade: globals.$ion-bg-extended-teal-base-press,
215+
tint: globals.$ion-primitives-teal-600,
216+
foreground: globals.$ion-text-extended-teal,
217+
),
218+
subtle: (
219+
base: globals.$ion-bg-extended-teal-subtle-default,
220+
base-rgb: globals.$ion-bg-extended-teal-subtle-default-rgb,
221+
contrast: globals.$ion-text-extended-teal,
222+
contrast-rgb: globals.$ion-text-extended-teal-rgb,
223+
shade: globals.$ion-bg-extended-teal-subtle-press,
224+
tint: globals.$ion-primitives-teal-200,
225+
foreground: globals.$ion-text-extended-teal,
226+
),
227+
),
228+
aqua: (
229+
bold: (
230+
base: globals.$ion-bg-extended-aqua-base-default,
231+
base-rgb: globals.$ion-bg-extended-aqua-base-default-rgb,
232+
contrast: globals.$ion-text-inverse,
233+
contrast-rgb: globals.$ion-text-inverse-rgb,
234+
shade: globals.$ion-bg-extended-aqua-base-press,
235+
tint: globals.$ion-primitives-aqua-600,
236+
foreground: globals.$ion-text-extended-aqua,
237+
),
238+
subtle: (
239+
base: globals.$ion-bg-extended-aqua-subtle-default,
240+
base-rgb: globals.$ion-bg-extended-aqua-subtle-default-rgb,
241+
contrast: globals.$ion-text-extended-aqua,
242+
contrast-rgb: globals.$ion-text-extended-aqua-rgb,
243+
shade: globals.$ion-bg-extended-aqua-subtle-press,
244+
tint: globals.$ion-primitives-aqua-200,
245+
foreground: globals.$ion-text-extended-aqua,
246+
),
247+
),
248+
indigo: (
249+
bold: (
250+
base: globals.$ion-bg-extended-indigo-base-default,
251+
base-rgb: globals.$ion-bg-extended-indigo-base-default-rgb,
252+
contrast: globals.$ion-text-inverse,
253+
contrast-rgb: globals.$ion-text-inverse-rgb,
254+
shade: globals.$ion-bg-extended-indigo-base-press,
255+
tint: globals.$ion-primitives-indigo-600,
256+
foreground: globals.$ion-text-extended-indigo,
257+
),
258+
subtle: (
259+
base: globals.$ion-bg-extended-indigo-subtle-default,
260+
base-rgb: globals.$ion-bg-extended-indigo-subtle-default-rgb,
261+
contrast: globals.$ion-text-extended-indigo,
262+
contrast-rgb: globals.$ion-text-extended-indigo-rgb,
263+
shade: globals.$ion-bg-extended-indigo-subtle-press,
264+
tint: globals.$ion-primitives-indigo-200,
265+
foreground: globals.$ion-text-extended-indigo,
266+
),
267+
),
268+
violet: (
269+
bold: (
270+
base: globals.$ion-bg-extended-violet-base-default,
271+
base-rgb: globals.$ion-bg-extended-violet-base-default-rgb,
272+
contrast: globals.$ion-text-inverse,
273+
contrast-rgb: globals.$ion-text-inverse-rgb,
274+
shade: globals.$ion-bg-extended-violet-base-press,
275+
tint: globals.$ion-primitives-violet-600,
276+
foreground: globals.$ion-text-extended-violet,
277+
),
278+
subtle: (
279+
base: globals.$ion-bg-extended-violet-subtle-default,
280+
base-rgb: globals.$ion-bg-extended-violet-subtle-default-rgb,
281+
contrast: globals.$ion-text-extended-violet,
282+
contrast-rgb: globals.$ion-text-extended-violet-rgb,
283+
shade: globals.$ion-bg-extended-violet-subtle-press,
284+
tint: globals.$ion-primitives-violet-200,
285+
foreground: globals.$ion-text-extended-violet,
286+
),
287+
),
288+
purple: (
289+
bold: (
290+
base: globals.$ion-bg-extended-purple-base-default,
291+
base-rgb: globals.$ion-bg-extended-purple-base-default-rgb,
292+
contrast: globals.$ion-text-inverse,
293+
contrast-rgb: globals.$ion-text-inverse-rgb,
294+
shade: globals.$ion-bg-extended-purple-base-press,
295+
tint: globals.$ion-primitives-purple-600,
296+
foreground: globals.$ion-text-extended-purple,
297+
),
298+
subtle: (
299+
base: globals.$ion-bg-extended-purple-subtle-default,
300+
base-rgb: globals.$ion-bg-extended-purple-subtle-default-rgb,
301+
contrast: globals.$ion-text-extended-purple,
302+
contrast-rgb: globals.$ion-text-extended-purple-rgb,
303+
shade: globals.$ion-bg-extended-purple-subtle-press,
304+
tint: globals.$ion-primitives-purple-200,
305+
foreground: globals.$ion-text-extended-purple,
306+
),
307+
),
308+
magenta: (
309+
bold: (
310+
base: globals.$ion-bg-extended-magenta-base-default,
311+
base-rgb: globals.$ion-bg-extended-magenta-base-default-rgb,
312+
contrast: globals.$ion-text-inverse,
313+
contrast-rgb: globals.$ion-text-inverse-rgb,
314+
shade: globals.$ion-bg-extended-magenta-base-press,
315+
tint: globals.$ion-primitives-magenta-600,
316+
foreground: globals.$ion-text-extended-magenta,
317+
),
318+
subtle: (
319+
base: globals.$ion-bg-extended-magenta-subtle-default,
320+
base-rgb: globals.$ion-bg-extended-magenta-subtle-default-rgb,
321+
contrast: globals.$ion-text-extended-magenta,
322+
contrast-rgb: globals.$ion-text-extended-magenta-rgb,
323+
shade: globals.$ion-bg-extended-magenta-subtle-press,
324+
tint: globals.$ion-primitives-magenta-200,
325+
foreground: globals.$ion-text-extended-magenta,
326+
),
327+
),
328+
pink: (
329+
bold: (
330+
base: globals.$ion-bg-extended-pink-base-default,
331+
base-rgb: globals.$ion-bg-extended-pink-base-default-rgb,
332+
contrast: globals.$ion-text-inverse,
333+
contrast-rgb: globals.$ion-text-inverse-rgb,
334+
shade: globals.$ion-bg-extended-pink-base-press,
335+
tint: globals.$ion-primitives-pink-600,
336+
foreground: globals.$ion-text-extended-pink,
337+
),
338+
subtle: (
339+
base: globals.$ion-bg-extended-pink-subtle-default,
340+
base-rgb: globals.$ion-bg-extended-pink-subtle-default-rgb,
341+
contrast: globals.$ion-text-extended-pink,
342+
contrast-rgb: globals.$ion-text-extended-pink-rgb,
343+
shade: globals.$ion-bg-extended-pink-subtle-press,
344+
tint: globals.$ion-primitives-pink-200,
345+
foreground: globals.$ion-text-extended-pink,
346+
),
347+
),
148348
light: (
149349
bold: (
150350
base: globals.$ion-primitives-base-white,

0 commit comments

Comments
 (0)