export const GEL = {
'font': {
'light': {
'family': '"AzoSans"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '400',
},
'regular': {
'family': '"AzoSansRegular"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '500',
},
'medium': {
'family': '"AzoSansMedium"',
'filename': 'AzoSans-Regular-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '500',
},
'italic': {
'family': '"AzoSansItalic"',
'filename': 'AzoSans-Italic-webfont',
'formats': '["woff", "woff2", "eot"]',
'weight': '400',
},
'default': '"Helvetica Neue", Arial, sans-serif',
},
'form': {
'buttonPrimary': {
'border': '0',
'background': '#30a74b',
'color': '#ffffff',
'radius': '0.25rem',
},
'buttonSecondary': {
'border': '.0625rem solid #000000',
'background': '#ffffff',
'color': '#000000',
'radius': '0.25rem',
},
'buttonTertiary': {
'border': '0',
'background': '#000000',
'color': '#ffffff',
'radius': '0.25rem',
},
'buttonMegaNav': {
'border': '.0625rem solid #000000',
'background': '#ffffff',
'color': '#000000',
'borderRadius': '1.125rem',
},
'default': {
'border': '0.0625rem solid #515151',
'background': '#ffffff',
'radius': '0.25rem',
},
'disabled': {
'border': '0.0625rem solid #dedede',
'background': '#ffffff',
'radius': '0.25rem',
},
'focusActive': {
'border': '0.0625rem solid #000000',
'background': '#ffffff',
'radius': '0.25rem',
},
'invalid': {
'border': '0.0625rem solid #d91440',
'background': '#ffffff',
'radius': '0.25rem',
},
'selectedAccent': {
'border': '0.125rem solid #257F39',
'background': '#ffffff',
'radius': '0.25rem',
},
'selectedBlock': {
'border': '0.125rem solid #257F39',
'background': 'rgba(48, 167, 75, 0.05)',
'radius': '0.25rem',
},
'success': {
'border': '0.0625rem solid #109449',
'background': '#ffffff',
'radius': '0.25rem',
},
},
'input': {
'checkbox': {
'border': '0.0625rem solid #b7b7b7',
'radius': '0.25rem',
'borderSelected': '0.125rem solid #257F39',
'backgroundSelected': 'rgba(48, 167, 75, 0.05)',
'checkSelected': '#000',
},
'radio': {
'border': '0.0625rem solid #b7b7b7',
'radius': '50%',
'borderSelected': '0.125rem solid #257F39',
'backgroundSelected': 'rgba(48, 167, 75, 0.05)',
'innerSelected': '#000',
}
},
'text': {
'default': '#000000',
'disabled': '#c5c5c5',
'reversed': '#ffffff',
'error': '#d91440',
'hyperlink': '#257f39',
'muted': '#515151',
'strong': '#000000',
'success': '#257f39',
'warning': '#A26100',
'navigation': {
'link': '#ffffff',
'linkActive': '#000000',
'linkClearance': '#f28500',
'font': {
'fontWeight': '500',
'fontFamily': 'AzoSansRegular,"Helvetica Neue",Arial,sans-serif',
}
}
},
'footer': {
'socialMedia': {
'background': 'initial',
},
'quickLinks': {
'background': '#f7f7f7',
},
'mainLinks': {
'background': '#f7f7f7',
},
'copyright': {
'background': '#f7f7f7',
},
},
'header': {
'navUpperBackground': {
'default': '#000000',
'color': '#ffffff',
},
'navLowerBackground': {
'default': '#1e1e1e',
'desktop': '#000000',
'active': '#ffffff',
'border': '0',
},
'searchBar': {
'radius': '0.25rem',
'color': '#000',
'background': '#fff',
'border': '0.0625rem solid #eaeaea',
},
'shoppingBag': {
'color': '#ffffff',
}
},
'popover': {
'border': '0.0625rem solid #9e9e9e',
'radius': '0.25rem',
},
'utilities': {
'divider': '0.0625rem solid #eaeaea',
'dividerDark': '.0625rem solid #9e9e9e',
'backgroundAccent': '#f7f7f7',
'activeBorder': '0.125rem solid #257f39',
'chipBorderRadius': '0.25rem',
'summaryAlignment': 'flex-start',
},
'reviewStar': {
'filled': '#000000',
'unfilled': '#d1d1d1',
},
'drawer': {
'headerBackground': '#f7f7f7',
'headerBorder': '.0625rem solid #9e9e9e',
},
'plp': {
'facetDivider': '0.0625rem solid #d1d1d1',
'facetTextTransform': 'capitalize',
'facetLetterSpacing': '0.0075rem',
},
'pdp': {
'ribbonTextTransform': 'capitalize',
'ribbonLetterSpacing': '0.0075rem',
},
'countrySelect': {
'logoPosition': 'flex-start',
'headerBackground': '#fff',
'headerBorderBottom': '',
'accordionHeaderTransform': 'capitalize',
'accordionHeaderLetterSpacing': '0.0075rem',
},
'status': {
'informationStatus': {
'border': '0.125rem solid #1d89dd',
'background': '#f4f9fd',
},
'warningStatus': {
'border': '0.125rem solid #d88f31',
'background': '#fdf9f5',
},
'successStatus': {
'border': '0.125rem solid #257f39',
'background': '#f4f9f6',
},
'errorStatus': {
'border': '0.125rem solid #d91440',
'background': '#fdf3f5',
},
}
}

Buttons

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

Choose what colour you want your text to be.

This is to determine how rounded you want your button to be.

This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

Choose what colour you want your text to be.

This is to determine how rounded you want your button to be.

This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

Choose what colour you want your text to be.

This is to determine how rounded you want your button to be.

This is for demo purposes only, this is inherited by from the weighting given to Font Weight Medium within the text section. Choose from 300, 400 or 500.


Form Fields

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.

This includes the weight, style and colour.

Add the full colour including the # symbol or rgb prefix.

This is to determine how rounded you want your form field to be.


Inputs

The default input border colour.

The border radius of popovers across the site.

The border colour when selected.

The background colour of the input when selected.

The colour of the check inside the checkbox.

The default input border colour.

The border radius of popovers across the site.

The border colour when selected.

The background colour of the input when selected.

The colour of the indicator inside the checkbox.