ionic-framework/core/scripts/theme-builder/src/theme-variables.js

export const THEME_VARIABLES = [
    {
        property: '--ion-alpha-lowest',
        type: 'percent'
    },
    {
        property: '--ion-alpha-low',
        type: 'percent'
    },
    {
        property: '--ion-alpha-medium',
        type: 'percent'
    },
    {
        property: '--ion-alpha-high',
        type: 'percent'
    },
    {
        property: '--ion-alpha-highest',
        type: 'percent'
    },
    {
        property: '--ion-color-primary'
    },
    {
        property: '--ion-color-primary-contrast'
    },
    {
        property: '--ion-color-primary-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-primary'
            ]
        }
    },
    {
        property: '--ion-color-primary-shade'
    },
    {
        property: '--ion-color-primary-tint'
    },
    {
        property: '--ion-color-secondary'
    },
    {
        property: '--ion-color-secondary-contrast'
    },
    {
        property: '--ion-color-secondary-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-secondary'
            ]
        }
    },
    {
        property: '--ion-color-secondary-shade'
    },
    {
        property: '--ion-color-secondary-tint'
    },
    {
        property: '--ion-color-tertiary'
    },
    {
        property: '--ion-color-tertiary-contrast'
    },
    {
        property: '--ion-color-tertiary-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-tertiary'
            ]
        }
    },
    {
        property: '--ion-color-tertiary-shade'
    },
    {
        property: '--ion-color-tertiary-tint'
    },
    {
        property: '--ion-color-success'
    },
    {
        property: '--ion-color-success-contrast'
    },
    {
        property: '--ion-color-success-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-success'
            ]
        }
    },
    {
        property: '--ion-color-success-shade'
    },
    {
        property: '--ion-color-success-tint'
    },
    {
        property: '--ion-color-warning'
    },
    {
        property: '--ion-color-warning-contrast'
    },
    {
        property: '--ion-color-warning-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-warning'
            ]
        }
    },
    {
        property: '--ion-color-warning-shade'
    },
    {
        property: '--ion-color-warning-tint'
    },
    {
        property: '--ion-color-danger'
    },
    {
        property: '--ion-color-danger-contrast'
    },
    {
        property: '--ion-color-danger-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-danger'
            ]
        }
    },
    {
        property: '--ion-color-danger-shade'
    },
    {
        property: '--ion-color-danger-tint'
    },
    {
        property: '--ion-color-light'
    },
    {
        property: '--ion-color-light-contrast'
    },
    {
        property: '--ion-color-light-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-light'
            ]
        }
    },
    {
        property: '--ion-color-light-shade'
    },
    {
        property: '--ion-color-light-tint'
    },
    {
        property: '--ion-color-medium'
    },
    {
        property: '--ion-color-medium-contrast'
    },
    {
        property: '--ion-color-medium-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-medium'
            ]
        }
    },
    {
        property: '--ion-color-medium-shade'
    },
    {
        property: '--ion-color-medium-tint'
    },
    {
        property: '--ion-color-dark'
    },
    {
        property: '--ion-color-dark-contrast'
    },
    {
        property: '--ion-color-dark-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-color-dark'
            ]
        }
    },
    {
        property: '--ion-color-dark-shade'
    },
    {
        property: '--ion-color-dark-tint'
    },
    {
        property: '--ion-backdrop-color'
    },
    {
        property: '--ion-background-color'
    },
    {
        property: '--ion-background-color-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-background-color'
            ]
        }
    },
    {
        property: '--ion-background-color-step-100'
    },
    {
        property: '--ion-background-color-step-200'
    },
    {
        property: '--ion-background-color-step-300'
    },
    {
        property: '--ion-background-color-step-400'
    },
    {
        property: '--ion-border-color'
    },
    {
        property: '--ion-box-shadow-color'
    },
    {
        property: '--ion-text-color'
    },
    {
        property: '--ion-text-color-rgb',
        computed: {
            fn: 'colorToRGBList',
            params: [
                '--ion-text-color'
            ]
        }
    },
    {
        property: '--ion-text-color-step-100'
    },
    {
        property: '--ion-text-color-step-200'
    },
    {
        property: '--ion-text-color-step-300'
    },
    {
        property: '--ion-text-color-step-400'
    },
    {
        property: '--ion-tabbar-background-color'
    },
    {
        property: '--ion-tabbar-border-color'
    },
    {
        property: '--ion-tabbar-text-color'
    },
    {
        property: '--ion-tabbar-text-color-active'
    },
    {
        property: '--ion-toolbar-background-color'
    },
    {
        property: '--ion-toolbar-border-color'
    },
    {
        property: '--ion-toolbar-color-active'
    },
    {
        property: '--ion-toolbar-color-inactive'
    },
    {
        property: '--ion-toolbar-text-color'
    },
    {
        property: '--ion-item-background-color'
    },
    {
        property: '--ion-item-background-color-active'
    },
    {
        property: '--ion-item-border-color'
    },
    {
        property: '--ion-item-text-color'
    },
    {
        property: '--ion-placeholder-text-color'
    }
];