@salesforce/retail-react-app 1.0.0-preview.0

package/app/theme/components/project/links-list.js

@@ -0,0 +1,43 @@
+/*
+ * 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
+ */
+export default {
+    parts: ['container', 'list', 'listItem', 'listItemSx', 'heading'],
+    baseStyle: {
+        container: {
+            color: 'white'
+        },
+        list: {
+            fontSize: 'sm'
+        },
+        headingLink: {
+            display: 'inline-flex'
+        },
+        heading: {
+            fontSize: 'md',
+            paddingTop: 3,
+            paddingBottom: 3
+        }
+    },
+    variants: {
+        vertical: {},
+        horizontal: {
+            listItem: {
+                borderLeft: '1px solid',
+                paddingLeft: 2
+            },
+            listItemSx: {
+                '&:first-of-type': {
+                    borderLeft: 0,
+                    paddingLeft: 0
+                }
+            }
+        }
+    },
+    defaultProps: {
+        variant: 'vertical'
+    }
+}

package/app/theme/components/project/list-menu.js

@@ -0,0 +1,91 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {
+            minWidth: 'xs',
+            width: 'full',
+            flexDirection: 'row',
+            justifyContent: 'flex-start',
+            alignItems: 'flex-start',
+            paddingLeft: 4,
+            display: {base: 'none', lg: 'flex'}
+        },
+        stackContainer: {
+            whiteSpace: 'nowrap',
+            flexWrap: 'wrap'
+        },
+        popoverContent: {
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            border: 0,
+            boxShadow: 'xl',
+            paddingTop: 3,
+            paddingRight: 4,
+            paddingBottom: 4,
+            paddingLeft: 4,
+            minWidth: '100%',
+            borderRadius: 0,
+            position: 'absolute'
+        },
+        popoverContainer: {
+            paddingTop: 0,
+            paddingBottom: 8,
+            maxWidth: 'container.xxxl'
+        },
+        listMenuTriggerContainer: {
+            display: 'flex',
+            alignItems: 'center'
+        },
+        listMenuTriggerLink: {
+            display: 'block',
+            whiteSpace: 'nowrap',
+            position: 'relative',
+            paddingTop: 3,
+            paddingRight: 1,
+            paddingBottom: 2,
+            paddingLeft: 1,
+            marginLeft: 3,
+            fontSize: 'md',
+            fontWeight: 700,
+            color: 'gray.900',
+            _hover: {
+                textDecoration: 'none'
+            }
+        },
+        listMenuTriggerLinkActive: {
+            textDecoration: 'none',
+            _before: {
+                position: 'absolute',
+                backgroundColor: 'black',
+                content: 'attr(name)',
+                height: '2px',
+                color: 'transparent',
+                bottom: '0px'
+            }
+        },
+        listMenuTriggerLinkIcon: {
+            marginTop: 3,
+            marginRight: 3,
+            marginBottom: 2,
+            marginLeft: 0,
+            _hover: {
+                textDecoration: 'none'
+            }
+        }
+    },
+    parts: [
+        'container',
+        'stackContainer',
+        'popoverContent',
+        'popoverContainer',
+        'listMenuTriggerContainer',
+        'listMenuTriggerLink',
+        'listMenuTriggerLinkActive',
+        'listMenuTriggerIcon'
+    ]
+}

package/app/theme/components/project/locale-selector.js

@@ -0,0 +1,42 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        accordion: {},
+        container: {},
+        selectedButtonIcon: {
+            color: 'grey'
+        },
+        selectedButton: {
+            paddingLeft: 0
+        },
+        selectedText: {
+            flex: '1',
+            textAlign: 'left',
+            paddingLeft: 2
+        },
+        selectedIcon: {
+            color: 'blue.600'
+        },
+        optionButton: {
+            paddingLeft: 2
+        },
+        optionText: {
+            paddingLeft: 2,
+            paddingRight: 4,
+            textAlign: 'left'
+        }
+    },
+    parts: [
+        'accordion',
+        'container',
+        'selectedButton',
+        'selectedText',
+        'optionButton',
+        'optionText'
+    ]
+}

package/app/theme/components/project/nested-accordion.js

@@ -0,0 +1,26 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {},
+        nestedAccordion: {
+            paddingLeft: 4
+        },
+        internalButton: {},
+        internalButtonIcon: {
+            color: 'grey',
+            marginRight: 2
+        },
+        leafButton: {
+            color: 'black',
+            paddingLeft: 8,
+            paddingTop: 2,
+            paddingBottom: 2
+        }
+    },
+    parts: ['container', 'nestedAccordion', 'internalButton', 'leafButtonIcon', 'leafButton']
+}

package/app/theme/components/project/offline-banner.js

@@ -0,0 +1,25 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {
+            paddingTop: 4,
+            paddingBottom: 4,
+            paddingLeft: [4, 4, 6, 6, 8],
+            paddingRight: [4, 4, 6, 6, 8]
+        },
+        icon: {
+            height: 5,
+            width: 5
+        },
+        message: {
+            paddingLeft: 2,
+            fontWeight: 700
+        }
+    },
+    parts: ['container', 'icon', 'message']
+}

package/app/theme/components/project/pagination.js

@@ -0,0 +1,22 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        button: {
+            color: 'black'
+        },
+        container: {},
+        text: {
+            whiteSpace: 'nowrap',
+            paddingLeft: 4,
+            paddingRight: 4,
+            paddingTop: 2,
+            paddingBottom: 2
+        }
+    },
+    parts: ['button', 'container', 'text']
+}

package/app/theme/components/project/product-tile.js

@@ -0,0 +1,32 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: () => ({
+        container: {},
+        favIcon: {
+            position: 'absolute',
+            variant: 'unstyled',
+            top: 2,
+            right: 2
+        },
+        imageWrapper: {
+            position: 'relative',
+            marginBottom: 2
+        },
+        image: {
+            ratio: 1,
+            paddingBottom: 2
+        },
+        price: {},
+        title: {
+            fontWeight: 600
+        },
+        rating: {},
+        variations: {}
+    }),
+    parts: ['container', 'imageWrapper', 'image', 'price', 'title', 'rating', 'variations']
+}

package/app/theme/components/project/social-icons.js

@@ -0,0 +1,52 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: {
+        container: {
+            flex: 1
+        },
+        icon: {
+            width: 5,
+            height: 5
+        },
+        item: {
+            textAlign: 'center',
+            paddingLeft: 2,
+            paddingRight: 2
+        }
+    },
+    variants: {
+        'flex-start': {
+            container: {
+                justifyContent: 'flex-start'
+            },
+            item: {
+                flex: 0
+            }
+        },
+        'flex-end': {
+            container: {
+                justifyContent: 'flex-end'
+            },
+            item: {
+                flex: 0
+            }
+        },
+        flex: {
+            container: {
+                justifyContent: 'center'
+            },
+            item: {
+                flex: 1
+            }
+        }
+    },
+    parts: ['container', 'item', 'icon'],
+    defaultProps: {
+        variant: 'flex-start'
+    }
+}

package/app/theme/components/project/swatch-group.js

@@ -0,0 +1,115 @@
+/*
+ * 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
+ */
+export default {
+    baseStyle: () => ({
+        swatchGroup: {
+            flexDirection: 'column '
+        },
+        swatchLabel: {
+            marginBottom: 3
+        },
+        swatch: {
+            position: 'relative',
+            backgroundColor: 'white',
+            _focus: {
+                outline: 'none',
+                boxShadow: 'outline'
+            }
+        },
+        swatchesWrapper: {
+            flexWrap: 'wrap'
+        },
+        swatchButton: {
+            borderColor: 'gray.200',
+            _disabled: {
+                opacity: 1
+            }
+        }
+    }),
+    variants: {
+        circle: (props) => ({
+            swatch: {
+                height: 11,
+                width: 11,
+                borderRadius: 'full',
+                padding: 1,
+                cursor: 'pointer',
+                marginRight: 2,
+                marginLeft: 0,
+                marginBottom: 2,
+                color: `${props.selected ? 'black' : 'gray.200'}`,
+                border: `${props.selected ? '1px' : '0'}`,
+                _hover: {
+                    borderColor: `${props.selected ? 'black' : 'gray.200'}`,
+                    borderWidth: 1,
+                    borderStyle: 'solid'
+                },
+                _active: {
+                    background: 'transparent'
+                },
+                _before: {
+                    content: '""',
+                    display: `${props.disabled ? 'block' : 'none'}`,
+                    position: 'absolute',
+                    height: 11,
+                    width: '1px',
+                    transform: 'rotate(45deg)',
+                    backgroundColor: 'black',
+                    zIndex: 1
+                }
+            },
+            swatchButton: {
+                height: 8,
+                borderColor: 'gray.200',
+                width: 8,
+                overflow: 'hidden',
+                borderRadius: 'full',
+                minWidth: 'auto',
+                opacity: 1,
+                _focus: {
+                    outline: 'none'
+                }
+            }
+        }),
+        square: (props) => ({
+            swatch: {
+                marginRight: 2,
+                // diagonal line for disabled options
+                // theme variable like gray.200 won't work inside linear-gradient
+                backgroundImage: `${
+                    props.disabled
+                        ? `${
+                              props.selected
+                                  ? 'linear-gradient(to top left, transparent calc(50% - 1px), black, transparent calc(50% + 1px) )'
+                                  : 'linear-gradient(to top left, white calc(50% - 1px), #c9c9c9, white calc(50% + 1px) )'
+                          } `
+                        : ''
+                }`,
+                borderColor: `${props.selected ? 'black' : 'gray.200'}`,
+                borderStyle: 'solid',
+                borderWidth: 1,
+                paddingLeft: 3,
+                paddingRight: 3,
+                marginBottom: 2,
+                _focus: {outline: 'none'},
+                _hover: {
+                    textDecoration: 'none',
+                    borderColor: 'gray.900'
+                },
+                _active: {
+                    borderColor: 'gray.900'
+                },
+                backgroundColor: `${
+                    props.selected ? (props.disabled ? 'gray.100' : 'black') : 'white'
+                }`,
+                color: `${props.selected && !props.disabled ? 'white' : 'gray.900'}`
+            },
+            swatchButton: {}
+        })
+    },
+    parts: ['swatch', 'swatchButton']
+}

package/app/theme/foundations/colors.js

@@ -0,0 +1,170 @@
+/*
+ * 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
+ */
+const colors = {
+    transparent: 'transparent',
+    current: 'currentColor',
+    black: '#000000',
+    white: '#FFFFFF',
+
+    whiteAlpha: {
+        50: 'rgba(255, 255, 255, 0.04)',
+        100: 'rgba(255, 255, 255, 0.06)',
+        200: 'rgba(255, 255, 255, 0.08)',
+        300: 'rgba(255, 255, 255, 0.16)',
+        400: 'rgba(255, 255, 255, 0.24)',
+        500: 'rgba(255, 255, 255, 0.36)',
+        600: 'rgba(255, 255, 255, 0.48)',
+        700: 'rgba(255, 255, 255, 0.64)',
+        800: 'rgba(255, 255, 255, 0.80)',
+        900: 'rgba(255, 255, 255, 0.92)'
+    },
+
+    blackAlpha: {
+        50: 'rgba(0, 0, 0, 0.04)',
+        100: 'rgba(0, 0, 0, 0.06)',
+        200: 'rgba(0, 0, 0, 0.08)',
+        300: 'rgba(0, 0, 0, 0.16)',
+        400: 'rgba(0, 0, 0, 0.24)',
+        500: 'rgba(0, 0, 0, 0.36)',
+        600: 'rgba(0, 0, 0, 0.48)',
+        700: 'rgba(0, 0, 0, 0.64)',
+        800: 'rgba(0, 0, 0, 0.80)',
+        900: 'rgba(0, 0, 0, 0.92)'
+    },
+
+    gray: {
+        50: '#F3F3F3',
+        100: '#E5E5E5',
+        200: '#C9C9C9',
+        300: '#AEAEAE',
+        400: '#A0A0A0',
+        500: '#939393',
+        600: '#747474',
+        700: '#5C5C5C',
+        800: '#444444',
+        900: '#181818'
+    },
+
+    red: {
+        50: '#FEF1EE',
+        100: '#FEDED8',
+        200: '#FEB8AB',
+        300: '#FE8F7D',
+        400: '#FE7765',
+        500: '#FE5C4C',
+        600: '#EA001E',
+        700: '#BA0517',
+        800: '#8E030F',
+        900: '#640103'
+    },
+
+    orange: {
+        50: '#FEF1ED',
+        100: '#FFDED5',
+        200: '#FEB9A5',
+        300: '#FF906E',
+        400: '#FF784F',
+        500: '#FF5D2D',
+        600: '#D83A00',
+        700: '#AA3001',
+        800: '#7E2600',
+        900: '#541D01'
+    },
+
+    yellow: {
+        50: '#FBF3E0',
+        100: '#F9E3B6',
+        200: '#FCC003',
+        300: '#E4A201',
+        400: '#D79304',
+        500: '#CA8501',
+        600: '#A86403',
+        700: '#8C4B02',
+        800: '#6F3400',
+        900: '#4F2100'
+    },
+
+    green: {
+        50: '#EBF7E6',
+        100: '#CDEFC4',
+        200: '#91DB8B',
+        300: '#45C65A',
+        400: '#41B658',
+        500: '#3BA755',
+        600: '#2E844A',
+        700: '#22683E',
+        800: '#194E31',
+        900: '#0E3522'
+    },
+
+    teal: {
+        50: '#DEF9F3',
+        100: '#ACF3E4',
+        200: '#04E1CB',
+        300: '#01C3B3',
+        400: '#03B4A7',
+        500: '#06A59A',
+        600: '#0B827C',
+        700: '#056764',
+        800: '#024D4C',
+        900: '#023434'
+    },
+
+    blue: {
+        50: '#EEF4FF',
+        100: '#D8E6FE',
+        200: '#AACBFF',
+        300: '#78B0FD',
+        400: '#57A3FD',
+        500: '#1B96FF',
+        600: '#0176D3',
+        700: '#0B5CAB',
+        800: '#014486',
+        900: '#032D60'
+    },
+
+    cyan: {
+        50: '#EAF5FE%',
+        100: '#CFE9FE',
+        200: '#90D0FE',
+        300: '#1AB9FF',
+        400: '#08ABED',
+        500: '#0D9DDA',
+        600: '#107CAD',
+        700: '#05628A',
+        800: '#084968',
+        900: '#023248'
+    },
+
+    purple: {
+        50: '#F6F2FB',
+        100: '#ECE1F9',
+        200: '#D78FF5',
+        300: '#C29EF1',
+        400: '#B78DEF',
+        500: '#AD7BEE',
+        600: '#9050E9',
+        700: '#7526E3',
+        800: '#5A1BA9',
+        900: '#401075'
+    },
+
+    pink: {
+        50: '#F9F0FF',
+        100: '#F2DEFE',
+        200: '#E5B9FE',
+        300: '#D892FE',
+        400: '#D17DFE',
+        500: '#CB65FF',
+        600: '#BA01FF',
+        700: '#9602C7',
+        800: '#730394',
+        900: '#520066'
+    }
+}
+
+export default colors

package/app/theme/foundations/gradients.js

@@ -0,0 +1,9 @@
+/*
+ * 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
+ */
+export default {
+    imageBackground: 'linear(270deg, #E6E5EA, #EEEEEE)'
+}

package/app/theme/foundations/layerStyles.js

@@ -0,0 +1,41 @@
+/*
+ * 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
+ */
+const card = {
+    py: 6,
+    px: 4,
+    backgroundColor: 'white',
+    rounded: 'base',
+    boxShadow: 'base'
+}
+
+const cardBordered = {
+    ...card,
+    px: [4, 4, 5, 6],
+    border: '1px solid',
+    borderColor: 'gray.50'
+}
+
+export default {
+    card,
+
+    cardBordered,
+
+    ccIcon: {
+        width: '34px',
+        height: '22px'
+    },
+
+    page: {
+        px: [4, 4, 6, 6, 8],
+        paddingTop: [4, 4, 6, 6, 8],
+        paddingBottom: 32,
+        width: '100%',
+        maxWidth: 'container.xxxl',
+        marginLeft: 'auto',
+        marginRight: 'auto'
+    }
+}

package/app/theme/foundations/shadows.js

@@ -0,0 +1,9 @@
+/*
+ * 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
+ */
+export default {
+    top: '0px -1px 3px rgba(0, 0, 0, 0.1), 0px -1px 2px rgba(0, 0, 0, 0.06)'
+}