@ionic/core 8.8.7-dev.11779467048.1641d05e → 8.8.7-dev.11779921691.1777274a

package/dist/collection/components/toast/toast.md.css

@@ -313,11 +313,11 @@
  * }
  */
 :host {
-  --background: var(--ion-color-step-800, var(--ion-background-color-step-800, #333333));
+  --background: var(--ion-background-color-step-800, #333333);
   --border-radius: 4px;
   --box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
-  --button-color: var(--ion-color-primary, #0054e9);
-  --color: var(--ion-color-step-50, var(--ion-text-color-step-950, #f2f2f2));
+  --button-color: var(--ion-color-primary, var(--ion-color-primary-bold));
+  --color: var(--ion-text-color-step-950, #f2f2f2);
   --max-width: 700px;
   --start: 8px;
   --end: 8px;
@@ -396,7 +396,7 @@
 }
 
 .toast-button-cancel {
-  color: var(--ion-color-step-100, var(--ion-text-color-step-900, #e6e6e6));
+  color: var(--ion-text-color-step-900, #e6e6e6);
 }
 
 .toast-button-icon-only {
@@ -413,7 +413,7 @@
 
 @media (any-hover: hover) {
   .toast-button:hover {
-    background-color: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.08);
+    background-color: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.08);
   }
   .toast-button-cancel:hover {
     background-color: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08);

package/dist/collection/components/toggle/toggle.ionic.css

@@ -367,7 +367,7 @@ input {
 
 :host {
   --track-background: var(--token-primitives-neutral-500, #a2a2a2);
-  --track-background-checked: var(--ion-color-primary, var(--token-bg-primary-base-default, var(--token-semantics-primary-base, var(--token-semantics-primary-700, var(--token-primitives-blue-700, #105cef)))));
+  --track-background-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
   --border-radius: var(--token-border-radius-full, 999px);
   --focus-ring-color: var(--token-border-focus-default, var(--token-primitives-blue-400, #b5c0f7));
   --focus-ring-width: var(--token-border-size-050, var(--token-scale-050, 2px));

package/dist/collection/components/toggle/toggle.ios.css

@@ -397,11 +397,11 @@ input {
 }
 
 .toggle-bottom .error-text {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }
 
 .toggle-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .label-text-wrapper {
@@ -632,7 +632,7 @@ input {
  */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.088);
-  --track-background-checked: var(--ion-color-primary, #0054e9);
+  --track-background-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
   --border-radius: 15.5px;
   --handle-background: #ffffff;
   --handle-background-checked: #ffffff;
@@ -683,7 +683,7 @@ input {
 
 .toggle-switch-icon {
   position: absolute;
-  color: var(--ion-color-dark, #222428);
+  color: var(--ion-color-dark, var(--ion-color-dark-bold));
 }
 
 :host(.toggle-ltr) .toggle-switch-icon {

package/dist/collection/components/toggle/toggle.js

@@ -338,7 +338,7 @@ export class Toggle {
         const rtl = isRTL(el) ? 'rtl' : 'ltr';
         const isIonicTheme = theme === 'ionic';
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '48744f35038be7be61fea432996440628d4f2ce9', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
+        return (h(Host, { key: 'b12951146a79d3839e6263e91e747398a0fa901d', role: "switch", "aria-checked": `${checked}`, "aria-describedby": this.hintTextId, "aria-invalid": this.isInvalid ? 'true' : undefined, onClick: this.onClick, "aria-labelledby": hasLabel ? inputLabelId : null, "aria-label": inheritedAttributes['aria-label'] || null, "aria-disabled": disabled ? 'true' : null, "aria-required": required ? 'true' : undefined, tabindex: disabled ? undefined : 0, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur, class: createColorClasses(color, {
                 [theme]: true,
                 'in-item': hostContext('ion-item', el),
                 'toggle-activated': activated,
@@ -350,10 +350,10 @@ export class Toggle {
                 [`toggle-${rtl}`]: true,
                 'ion-activatable': isIonicTheme,
                 'ion-focusable': isIonicTheme,
-            }) }, h("label", { key: '43d05b9140a9ccabc3981a28b01bf2cb844050f6', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: '716f13f4202712d4ce22fe738879a8259102c329', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '0466a7f662ec5804ecc2e22971248a86f20141c7', class: {
+            }) }, h("label", { key: 'cf1d27243bf9bdd5bafaf6d86b76beb311b5e01c', class: "toggle-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'b3eb0f146836f5994c15bf1fd67a79f72b9414f7', type: "checkbox", role: "switch", "aria-checked": `${checked}`, checked: checked, disabled: disabled, id: inputId, required: required }, inheritedAttributes)), h("div", { key: '56ddcfd6452f30fd6b38d0fd85be3ec966aa120b', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '86b8fbbd03ee3179e84cf906ea4e6881137d798a' }), this.renderHintText()), h("div", { key: '6ccf0131e4ff14c3b1f59d218081b8da5f6b1864', class: "native-wrapper" }, this.renderToggleControl()))));
+            }, part: "label", id: inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '706e5b667ee242fb1afb3e4afa613f9798fbe25b' }), this.renderHintText()), h("div", { key: '255ccd7d60f7d78b4eba8d380b303a72093e9d16', class: "native-wrapper" }, this.renderToggleControl()))));
     }
     static get is() { return "ion-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toggle/toggle.md.css

@@ -397,11 +397,11 @@ input {
 }
 
 .toggle-bottom .error-text {
-  color: var(--ion-color-danger, #c5000f);
+  color: var(--ion-color-danger, var(--ion-color-danger-bold));
 }
 
 .toggle-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  color: var(--ion-text-color-step-300, #4d4d4d);
 }
 
 .label-text-wrapper {
@@ -632,10 +632,10 @@ input {
  */
 :host {
   --track-background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.39);
-  --track-background-checked: rgba(var(--ion-color-primary-rgb, 0, 84, 233), 0.5);
+  --track-background-checked: rgba(var(--ion-color-primary-rgb, var(--ion-color-primary-bold-rgb)), 0.5);
   --border-radius: 14px;
   --handle-background: #ffffff;
-  --handle-background-checked: var(--ion-color-primary, #0054e9);
+  --handle-background-checked: var(--ion-color-primary, var(--ion-color-primary-bold));
   --handle-border-radius: 50%;
   --handle-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
   --handle-width: 20px;

package/dist/collection/components/toolbar/toolbar.ios.css

@@ -241,9 +241,9 @@
  * }
  */
 :host {
-  --background: var(--ion-toolbar-background, var(--ion-color-step-50, var(--ion-background-color-step-50, #f7f7f7)));
+  --background: var(--ion-toolbar-background, var(--ion-background-color-step-50, #f7f7f7));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #000));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2)))));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, rgba(0, 0, 0, 0.2))));
   --padding-top: 3px;
   --padding-bottom: 3px;
   --padding-start: 4px;

package/dist/collection/components/toolbar/toolbar.js

@@ -242,11 +242,11 @@ export class Toolbar {
             Object.assign(childStyles, style);
         });
         const titlePlacement = this.getTitlePlacement();
-        return (h(Host, { key: '069913e9241b8e9a2dee8e7d088d181b6faeab5e', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
+        return (h(Host, { key: 'a2103857ffb26f517b4190bb01a8fa170a042e45', class: Object.assign(Object.assign({}, createColorClasses(this.color, {
                 [theme]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 [`toolbar-title-placement-${titlePlacement}`]: true,
-            })), childStyles) }, h("div", { key: '3255531be492b9afa7b47476a805f923beea09db', class: "toolbar-background", part: "background" }), h("div", { key: '8758189374c0a12f293c30ca7f8f049b732d2cab', class: "toolbar-container", part: "container" }, h("slot", { key: '74c3705f717968893bf94ea95c99cae313ce68f3', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '298c78f93291442f140f8c52983871215f20ea87', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'f7376320b704b8ce375fe2223ae30d51bfc05acb', class: "toolbar-content", part: "content" }, h("slot", { key: 'ddaec08b1fbd13384d834ba4c3b4441c4d749faf' })), h("slot", { key: '6d5bce85159859bb548e4d3fb6b22208dcb48987', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'd1d21752ed3bcc7bf15c20de1c0a6fd956373450', name: "end", onSlotchange: () => this.updateSlotClasses }))));
+            })), childStyles) }, h("div", { key: '288b74048d260c9279d6e60c8733e26105ee0098', class: "toolbar-background", part: "background" }), h("div", { key: 'fa4b8cfb32f3bfb84f451cf3a2420b37fc75533c', class: "toolbar-container", part: "container" }, h("slot", { key: 'fe9414ab3fa2ca84d424a400ba91ec8239d700ff', name: "start", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: 'c633cd1b6eef87adbfccfa61857518dcf62ac550', name: "secondary", onSlotchange: () => this.updateSlotClasses }), h("div", { key: 'aff3a3d8acbc480e9daec864aeb85d168ab2c447', class: "toolbar-content", part: "content" }, h("slot", { key: '52b45c5abbfe695e862c857163e7aa00c1c2af9a' })), h("slot", { key: '3157c16fcfe428230998f218c6233d114b550a6f', name: "primary", onSlotchange: () => this.updateSlotClasses }), h("slot", { key: '4b74dff5b832ea0f3030efa319c63c876c3e90e2', name: "end", onSlotchange: () => this.updateSlotClasses }))));
     }
     static get is() { return "ion-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/toolbar/toolbar.md.css

@@ -243,7 +243,7 @@
 :host {
   --background: var(--ion-toolbar-background, var(--ion-background-color, #fff));
   --color: var(--ion-toolbar-color, var(--ion-text-color, #424242));
-  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-color-step-150, var(--ion-background-color-step-150, #c1c4cd))));
+  --border-color: var(--ion-toolbar-border-color, var(--ion-border-color, var(--ion-background-color-step-150, #c1c4cd)));
   --padding-top: 0;
   --padding-bottom: 0;
   --padding-start: 0;

package/dist/collection/global/config.js

@@ -13,6 +13,33 @@ export class Config {
         const value = this.m.get(key);
         return value !== undefined ? value : fallback;
     }
+    /**
+     * Get a nested object value from the config
+     *
+     * @param key Nested key string (e.g., 'IonChip.size')
+     * @param fallback Default value if the key is not found
+     * @returns The value found at the nested key or the fallback
+     */
+    getObjectValue(key, fallback) {
+        var _a;
+        const [firstKey, ...remainingKeys] = key.split('.');
+        let root;
+        // First key is a component config since it starts with 'Ion',
+        // it must be accessed from the 'customTheme' config object
+        if (firstKey.startsWith('Ion')) {
+            const customTheme = this.m.get('customTheme');
+            root = customTheme ? (_a = customTheme.config) === null || _a === void 0 ? void 0 : _a.components[firstKey] : undefined;
+        }
+        else {
+            // Otherwise, get the value directly from the global config
+            root = this.m.get(firstKey);
+        }
+        if (root === undefined) {
+            return fallback;
+        }
+        const result = remainingKeys.reduce((acc, k) => acc === null || acc === void 0 ? void 0 : acc[k], root);
+        return result !== null && result !== void 0 ? result : fallback;
+    }
     getBoolean(key, fallback = false) {
         const val = this.m.get(key);
         if (val === undefined) {

package/dist/collection/global/ionic-global.js

@@ -1,93 +1,41 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { Build, getMode, setMode, getElement } from "@stencil/core";
 import { printIonWarning } from "../utils/logging/index";
+import { applyComponentsTheme, applyGlobalTheme, getCustomTheme } from "../utils/theme";
+import { defaultTheme as baseTheme } from "../themes/base/default.tokens";
 import { shouldUseCloseWatcher } from "../utils/hardware-back-button";
 import { isPlatform, setupPlatforms } from "../utils/platform";
 import { config, configFromSession, configFromURL, saveConfig } from "./config";
 let defaultMode;
 let defaultTheme = 'md';
 let rICHandle;
-/**
- * Prints a warning message to the developer to inform them of
- * an invalid configuration of mode and theme.
- * @param mode The invalid mode configuration.
- * @param theme The invalid theme configuration.
- */
-const printInvalidModeWarning = (mode, theme, ref) => {
-    printIonWarning(`Invalid mode and theme combination provided: mode: ${mode}, theme: ${theme}. Fallback mode ${getDefaultModeForTheme(theme)} will be used.`, ref);
-};
-/**
- * Validates if a mode is accepted for a theme configuration.
- * @param mode The mode to validate.
- * @param theme The theme the mode is being used with.
- * @returns `true` if the mode is valid for the theme, `false` if invalid.
- */
-export const isModeValidForTheme = (mode, theme) => {
-    if (mode === 'md') {
-        return theme === 'md' || theme === 'ionic';
-    }
-    else if (mode === 'ios') {
-        return theme === 'ios' || theme === 'ionic';
-    }
-    return false;
-};
-/**
- * Returns the default mode for a specified theme.
- * @param theme The theme to return a default mode for.
- * @returns The default mode, either `ios` or `md`.
- */
-const getDefaultModeForTheme = (theme) => {
-    if (theme === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
-/**
- * Returns the default theme for a specified mode.
- * @param mode The mode to return a default theme for.
- * @returns The default theme.
- */
-const getDefaultThemeForMode = (mode) => {
-    if (mode === 'ios') {
-        return 'ios';
-    }
-    return 'md';
-};
 const isModeSupported = (elmMode) => ['ios', 'md'].includes(elmMode);
 const isThemeSupported = (theme) => ['ios', 'md', 'ionic'].includes(theme);
 const isIonicElement = (elm) => { var _a; return (_a = elm.tagName) === null || _a === void 0 ? void 0 : _a.startsWith('ION-'); };
 /**
  * Returns the mode value of the element reference or the closest
- * parent with a valid mode.
+ * parent with a valid mode. If no mode is set, then fallback
+ * to the default mode.
  * @param ref The element reference to look up the mode for.
- * @param theme Optionally can provide the theme to avoid an additional look-up.
  * @returns The mode value for the element reference.
  */
-export const getIonMode = (ref, theme = getIonTheme(ref)) => {
+export const getIonMode = (ref) => {
     var _a;
-    if ((ref === null || ref === void 0 ? void 0 : ref.mode) && isModeValidForTheme(ref === null || ref === void 0 ? void 0 : ref.mode, theme)) {
-        /**
-         * If the reference already has a mode configuration,
-         * use it instead of performing a look-up.
-         */
-        return ref.mode;
-    }
-    else {
-        const el = getElement(ref);
-        const mode = ((_a = el.closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
-        if (isModeValidForTheme(mode, theme)) {
-            /**
-             * The mode configuration is supported for the configured theme.
-             */
-            return mode;
-        }
-        else {
-            printInvalidModeWarning(mode, theme, ref);
-        }
-    }
-    return getDefaultModeForTheme(theme);
+    return (ref === null || ref === void 0 ? void 0 : ref.mode) || ((_a = getElement(ref).closest('[mode]')) === null || _a === void 0 ? void 0 : _a.getAttribute('mode')) || defaultMode;
 };
 /**
  * Returns the theme value of the element reference or the closest
@@ -110,7 +58,7 @@ export const getIonTheme = (ref) => {
     const el = getElement(ref);
     const mode = (_a = ref === null || ref === void 0 ? void 0 : ref.mode) !== null && _a !== void 0 ? _a : (_b = el.closest('[mode]')) === null || _b === void 0 ? void 0 : _b.getAttribute('mode');
     if (mode) {
-        return getDefaultThemeForMode(mode);
+        return mode;
     }
     /**
      * If a mode is not detected, then fallback to using the
@@ -179,17 +127,52 @@ export const initialize = (userConfig = {}) => {
      * which could have been set by the user, or by pre-rendering
      * otherwise get the theme via config settings, and fallback to md.
      */
-    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || getDefaultThemeForMode(defaultMode));
-    if (!isModeValidForTheme(defaultMode, defaultTheme)) {
-        printInvalidModeWarning(defaultMode, defaultTheme, configObj);
-        defaultMode = getDefaultModeForTheme(defaultTheme);
-    }
+    Ionic.theme = defaultTheme = config.get('theme', doc.documentElement.getAttribute('theme') || defaultMode);
     config.set('mode', defaultMode);
     doc.documentElement.setAttribute('mode', defaultMode);
     doc.documentElement.classList.add(defaultMode);
     config.set('theme', defaultTheme);
     doc.documentElement.setAttribute('theme', defaultTheme);
     doc.documentElement.classList.add(defaultTheme);
+    const customTheme = getCustomTheme(configObj.customTheme, defaultMode);
+    // Apply base theme, or combine with custom theme if provided
+    if (customTheme) {
+        const combinedTheme = applyGlobalTheme(baseTheme, customTheme);
+        // Component styles must be applied after global styles in order
+        // to ensure CSS variables are available for components
+        // like the semantic colors (e.g., --ion-color-shade)
+        applyComponentsTheme(combinedTheme);
+        config.set('customTheme', combinedTheme);
+    }
+    else {
+        applyGlobalTheme(baseTheme);
+        // Component styles must be applied after global styles in order
+        // to ensure CSS variables are available for components
+        // like the semantic colors (e.g., --ion-color-shade)
+        applyComponentsTheme(baseTheme);
+        config.set('customTheme', baseTheme);
+    }
+    /**
+     * Apply any global config values from the custom theme
+     * excluding component-specific overrides.
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const _a = (customTheme === null || customTheme === void 0 ? void 0 : customTheme.config) || {}, { components } = _a, customGlobalConfig = __rest(_a, ["components"]);
+    Object.entries(customGlobalConfig).forEach(([key, value]) => {
+        const configKey = key;
+        // For object-based config values, we merge with existing settings.
+        if (value !== null && typeof value === 'object') {
+            const existingConfig = config.get(configKey, {});
+            config.set(configKey, Object.assign(Object.assign({}, existingConfig), value));
+            return;
+        }
+        /**
+         * For primitive values (boolean, string, number), we set the
+         * value directly.
+         * This covers global flags like 'rippleEffect' or 'animated'.
+         */
+        config.set(configKey, value);
+    });
     if (config.getBoolean('_testing')) {
         config.set('animated', false);
     }

package/dist/collection/index.js

@@ -9,12 +9,11 @@ export { mdTransitionAnimation } from './utils/transition/md.transition';
 export { getTimeGivenProgression } from './utils/animation/cubic-bezier';
 export { createGesture } from './utils/gesture';
 export { initialize } from './global/ionic-global';
-export { componentOnReady } from './utils/helpers';
+export { componentOnReady, openURL } from './utils/helpers';
 export { LogLevel } from './utils/logging';
 export { isPlatform, getPlatforms } from './utils/platform';
 export { IonicSafeString } from './utils/sanitization';
 export { getMode, setupConfig } from './utils/config';
-export { openURL } from './utils/theme';
 export { LIFECYCLE_WILL_ENTER, LIFECYCLE_DID_ENTER, LIFECYCLE_WILL_LEAVE, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_UNLOAD, } from './components/nav/constants';
 export { menuController } from './utils/menu-controller';
 export { alertController, actionSheetController, modalController, loadingController, pickerController, popoverController, toastController, } from './utils/overlays';

package/dist/collection/themes/base/dark.tokens.js

@@ -0,0 +1,218 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { mix } from "../../utils/theme";
+const colors = {
+    primary: '#4d8dff',
+    secondary: '#46b1ff',
+    tertiary: '#8482fb',
+    success: '#2dd55b',
+    warning: '#ffce31',
+    danger: '#f24c58',
+    light: '#222428',
+    medium: '#989aa2',
+    dark: '#f4f5f8',
+};
+export const darkTheme = {
+    enabled: 'never',
+    color: {
+        primary: {
+            bold: {
+                base: colors.primary,
+                contrast: '#000',
+                foreground: mix(colors.primary, '#000', '4%'),
+                shade: mix(colors.primary, '#000', '4%'),
+                tint: mix(colors.primary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.primary, '8%'),
+                contrast: colors.primary,
+                foreground: mix(colors.primary, '#000', '4%'),
+                shade: mix('#000', colors.primary, '4%'),
+                tint: mix('#000', colors.primary, '12%'),
+            },
+        },
+        secondary: {
+            bold: {
+                base: colors.secondary,
+                contrast: '#000',
+                foreground: mix(colors.secondary, '#000', '4%'),
+                shade: mix(colors.secondary, '#000', '4%'),
+                tint: mix(colors.secondary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.secondary, '8%'),
+                contrast: colors.secondary,
+                foreground: mix(colors.secondary, '#000', '4%'),
+                shade: mix('#000', colors.secondary, '4%'),
+                tint: mix('#000', colors.secondary, '12%'),
+            },
+        },
+        tertiary: {
+            bold: {
+                base: colors.tertiary,
+                contrast: '#000',
+                foreground: mix(colors.tertiary, '#000', '4%'),
+                shade: mix(colors.tertiary, '#000', '4%'),
+                tint: mix(colors.tertiary, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.tertiary, '8%'),
+                contrast: colors.tertiary,
+                foreground: mix(colors.tertiary, '#000', '4%'),
+                shade: mix('#000', colors.tertiary, '4%'),
+                tint: mix('#000', colors.tertiary, '12%'),
+            },
+        },
+        success: {
+            bold: {
+                base: colors.success,
+                contrast: '#000',
+                foreground: mix(colors.success, '#000', '4%'),
+                shade: mix(colors.success, '#000', '4%'),
+                tint: mix(colors.success, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.success, '8%'),
+                contrast: colors.success,
+                foreground: mix(colors.success, '#000', '4%'),
+                shade: mix('#000', colors.success, '4%'),
+                tint: mix('#000', colors.success, '12%'),
+            },
+        },
+        warning: {
+            bold: {
+                base: colors.warning,
+                contrast: '#000',
+                foreground: mix(colors.warning, '#000', '4%'),
+                shade: mix(colors.warning, '#000', '4%'),
+                tint: mix(colors.warning, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.warning, '8%'),
+                contrast: colors.warning,
+                foreground: mix(colors.warning, '#000', '4%'),
+                shade: mix('#000', colors.warning, '4%'),
+                tint: mix('#000', colors.warning, '12%'),
+            },
+        },
+        danger: {
+            bold: {
+                base: colors.danger,
+                contrast: '#000',
+                foreground: mix(colors.danger, '#000', '4%'),
+                shade: mix(colors.danger, '#000', '4%'),
+                tint: mix(colors.danger, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.danger, '8%'),
+                contrast: colors.danger,
+                foreground: mix(colors.danger, '#000', '4%'),
+                shade: mix('#000', colors.danger, '4%'),
+                tint: mix('#000', colors.danger, '12%'),
+            },
+        },
+        light: {
+            bold: {
+                base: colors.light,
+                contrast: '#fff',
+                foreground: mix(colors.light, '#000', '4%'),
+                shade: mix(colors.light, '#000', '4%'),
+                tint: mix(colors.light, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.light, '8%'),
+                contrast: colors.light,
+                foreground: mix(colors.light, '#000', '4%'),
+                shade: mix('#000', colors.light, '4%'),
+                tint: mix('#000', colors.light, '12%'),
+            },
+        },
+        medium: {
+            bold: {
+                base: colors.medium,
+                contrast: '#000',
+                foreground: mix(colors.medium, '#000', '4%'),
+                shade: mix(colors.medium, '#000', '4%'),
+                tint: mix(colors.medium, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.medium, '8%'),
+                contrast: colors.medium,
+                foreground: mix(colors.medium, '#000', '4%'),
+                shade: mix('#000', colors.medium, '4%'),
+                tint: mix('#000', colors.medium, '12%'),
+            },
+        },
+        dark: {
+            bold: {
+                base: colors.dark,
+                contrast: '#000',
+                foreground: mix(colors.dark, '#000', '4%'),
+                shade: mix(colors.dark, '#000', '4%'),
+                tint: mix(colors.dark, '#fff', '12%'),
+            },
+            subtle: {
+                base: mix('#000', colors.dark, '8%'),
+                contrast: colors.dark,
+                foreground: mix(colors.dark, '#000', '4%'),
+                shade: mix('#000', colors.dark, '4%'),
+                tint: mix('#000', colors.dark, '12%'),
+            },
+        },
+    },
+    backgroundColor: '#000000',
+    backgroundColorRgb: '0, 0, 0',
+    textColor: '#ffffff',
+    textColorRgb: '255, 255, 255',
+    backgroundColorStep: {
+        50: '#0d0d0d',
+        100: '#1a1a1a',
+        150: '#262626',
+        200: '#333333',
+        250: '#404040',
+        300: '#4d4d4d',
+        350: '#595959',
+        400: '#666666',
+        450: '#737373',
+        500: '#898989',
+        550: '#8c8c8c',
+        600: '#999999',
+        650: '#a6a6a6',
+        700: '#b3b3b3',
+        750: '#bfbfbf',
+        800: '#cccccc',
+        850: '#d9d9d9',
+        900: '#e6e6e6',
+        950: '#f2f2f2',
+    },
+    textColorStep: {
+        50: '#f2f2f2',
+        100: '#e6e6e6',
+        150: '#d9d9d9',
+        200: '#cccccc',
+        250: '#bfbfbf',
+        300: '#b3b3b3',
+        350: '#a6a6a6',
+        400: '#999999',
+        450: '#8c8c8c',
+        500: '#808080',
+        550: '#737373',
+        600: '#666666',
+        650: '#595959',
+        700: '#4d4d4d',
+        750: '#404040',
+        800: '#333333',
+        850: '#262626',
+        900: '#1a1a1a',
+        950: '#0d0d0d',
+    },
+    components: {
+        IonCard: {
+            background: '#1c1c1d',
+        },
+        IonItem: {
+            background: '#000000',
+        },
+    },
+};