pwa-kit/packages/extension-chakra-storefront/src/theme/components/base/button.js at 92e196941e9a358e302c574135994f90f5ff28a1 · SalesforceCommerceCloud/pwa-kit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/*
 * Copyright (c) 2021, salesforce.com, inc.
 * All rights reserved.
 * SPDX-License-Identifier: BSD-3-Clause
 * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
 */
import {defineRecipe} from '@chakra-ui/react'

const baseLinkStyles = {
    fontWeight: 'normal',
    minWidth: '1em',
    height: 'auto',
    padding: '0',
    _hover: {
        // Copied from the original recipe of Chakra's Link
        textDecoration: 'underline',
        textUnderlineOffset: '3px',
        textDecorationColor: 'currentColor/20'
    }
}

const button = defineRecipe({
    base: {
        borderRadius: 'sm',
        colorPalette: 'blue',
        _focusVisible: {
            outline: '2px solid transparent'
        }
    },
    variants: {
        variant: {
            solid: {
                backgroundColor: 'colorPalette.600',
                color: 'white',
                _hover: {bg: 'colorPalette.700', _disabled: {bg: 'colorPalette.300'}},
                _active: {bg: 'colorPalette.800'},
                _disabled: {bg: 'colorPalette.300'}
            },
            'outline-black': {
                color: 'gray.900',
                _hover: {bg: 'gray.50'},
                borderColor: 'gray.200'
            },
            outline: {
                color: 'blue.600',
                _hover: {bg: 'gray.50'}
            },
            // (props) =>
            // console.log('props', props) || props.colorPalette === 'black'
            //     ? {color: 'gray.900', _hover: {bg: 'gray.50'}, borderColor: 'gray.200'}
            //     : {color: 'blue.600', _hover: {bg: 'gray.50'}},
            footer: {
                fontSize: 'sm',
                backgroundColor: 'gray.100',
                color: 'black',
                _hover: {bg: 'gray.200'},
                _active: {bg: 'gray.300'},
                paddingLeft: 3,
                paddingRight: 3
            },
            'link-red': {
                ...baseLinkStyles,
                color: 'red.500'
            },
            'link-blue': {
                ...baseLinkStyles,
                color: 'blue.600'
            },
            'menu-link': {
                color: 'black',
                justifyContent: 'flex-start',
                fontSize: 'sm',
                _hover: {
                    bg: 'gray.50',
                    textDecoration: 'underline',
                    textDecorationColor: 'gray.900'
                },
                _activeLink: {
                    bg: 'gray.50',
                    borderLeft: 'solid',
                    borderLeftColor: 'gray.600',
                    borderLeftWidth: '4px'
                }
            },
            'menu-link-mobile': {
                color: 'black',
                justifyContent: 'flex-start',
                fontSize: 'sm',
                _hover: {
                    bg: 'gray.50',
                    textDecoration: 'underline',
                    textDecorationColor: 'gray.900'
                },
                _activeLink: {
                    bg: 'gray.100',
                    border: 'solid',
                    borderColor: 'gray.600',
                    borderWidth: '1px'
                }
            },
            'search-link': {
                color: 'black',
                justifyContent: 'flex-start',
                fontSize: 'sm',
                _hover: {textDecoration: 'none'}
            }
        },
        size: {
            md: {
                height: 11,
                minWidth: 11,
                textStyle: 'md'
            }
        }
    }
})

export default button