@aws-amplify/ui/dist/esm/theme/tokens/components/checkbox.mjs

`@aws-amplify/ui` contains low-level logic & styles for stand-alone usage or re-use in framework-specific implementations.

const checkbox = {
    cursor: { value: 'pointer' },
    alignItems: { value: 'center' },
    _disabled: {
        cursor: {
            value: 'not-allowed',
        },
    },
    button: {
        position: { value: 'relative' },
        alignItems: { value: 'center' },
        justifyContent: { value: 'center' },
        color: { value: '{colors.font.inverse.value}' },
        before: {
            width: { value: '100%' },
            height: { value: '100%' },
            borderWidth: { value: '{borderWidths.medium.value}' },
            borderRadius: { value: '20%' },
            borderStyle: { value: 'solid' },
            borderColor: { value: '{colors.border.primary.value}' },
        },
        _focus: {
            outlineColor: { value: '{colors.transparent.value}' },
            outlineStyle: { value: 'solid' },
            outlineWidth: { value: '{outlineWidths.medium.value}' },
            outlineOffset: { value: '{outlineOffsets.medium.value}' },
            borderColor: { value: '{colors.border.focus.value}' },
            boxShadow: { value: '{components.fieldcontrol._focus.boxShadow.value}' },
        },
        _disabled: {
            borderColor: { value: '{colors.border.disabled.value}' },
        },
        _error: {
            borderColor: { value: '{colors.border.error.value}' },
            _focus: {
                borderColor: { value: '{colors.border.error.value}' },
                boxShadow: {
                    value: '{components.fieldcontrol._error._focus.boxShadow.value}',
                },
            },
        },
    },
    icon: {
        backgroundColor: { value: '{colors.primary.80.value}' },
        borderRadius: { value: '20%' },
        opacity: { value: '{opacities.0.value}' },
        transform: { value: 'scale(0)' },
        transitionProperty: { value: 'all' },
        transitionDuration: { value: '{time.short.value}' },
        transitionTimingFunction: { value: 'ease-in-out' },
        _checked: {
            opacity: { value: '{opacities.100.value}' },
            transform: { value: 'scale(1)' },
            _disabled: {
                backgroundColor: { value: '{colors.background.disabled.value}' },
            },
        },
        _indeterminate: {
            opacity: { value: '{opacities.100.value}' },
            transform: { value: 'scale(1)' },
            _disabled: {
                backgroundColor: { value: '{colors.background.disabled.value}' },
            },
        },
    },
    label: {
        color: { value: '{components.text.color.value}' },
        _disabled: {
            color: {
                value: '{colors.font.disabled.value}',
            },
        },
    },
};

export { checkbox };