Template
52 lines
1.5 KiB
TypeScript
52 lines
1.5 KiB
TypeScript
// Swatch configuration for product option pickers.
|
|
//
|
|
// Shopify exposes a `swatch` on each option value, but plenty of products ship
|
|
// without one configured. These settings decide which options render as colour
|
|
// circles and what colour to use when the API doesn't supply one.
|
|
|
|
// Option names (case-insensitive) rendered as colour circles instead of pills.
|
|
export const SWATCH_OPTION_NAMES = ['color', 'colour'];
|
|
|
|
// Fallback colours, keyed by lowercased option value name. The first group
|
|
// mirrors hexes the store defines on other products, so a product missing its
|
|
// swatches still matches the ones that have them. Add your own names here.
|
|
export const SWATCH_COLORS: Record<string, string> = {
|
|
clay: '#5a4b3c',
|
|
green: '#81a69b',
|
|
ocean: '#768da0',
|
|
olive: '#7f8060',
|
|
purple: '#766589',
|
|
red: '#a88084',
|
|
|
|
beige: '#e8dcc8',
|
|
black: '#000000',
|
|
blue: '#2563eb',
|
|
brown: '#7c5c40',
|
|
burgundy: '#6d2532',
|
|
charcoal: '#36393d',
|
|
cream: '#f3ead8',
|
|
gold: '#c9a227',
|
|
gray: '#8a8d91',
|
|
grey: '#8a8d91',
|
|
ivory: '#f6f2e6',
|
|
khaki: '#a89d78',
|
|
lavender: '#b9a8d0',
|
|
mint: '#a8d5ba',
|
|
navy: '#1f2a44',
|
|
orange: '#e2733a',
|
|
pink: '#e3a7b5',
|
|
sand: '#d9c9a8',
|
|
silver: '#c4c6c8',
|
|
stone: '#a9a294',
|
|
tan: '#c8a882',
|
|
teal: '#3f8f8b',
|
|
white: '#ffffff',
|
|
yellow: '#e5c34a',
|
|
};
|
|
|
|
export const swatchColorForName = (name: string): string | undefined =>
|
|
SWATCH_COLORS[name.trim().toLowerCase()];
|
|
|
|
export const isSwatchOptionName = (name: string): boolean =>
|
|
SWATCH_OPTION_NAMES.includes(name.trim().toLowerCase());
|