compolicious
Version:
React component demo utility
84 lines (83 loc) • 3.42 kB
JavaScript
export default {
title: 'Colour Palette',
description: `Our new colour palette is fresh and inviting, reflecting our optimism as we help
customers shop in exciting new ways. Matched to work together, we selected colors to work
harmoniously and still demonstrate some adventure in their newness.`,
sections: [
{
title: "Blue",
blocks: [
{
components: [{
name: 'Compolicious/ColorBlockSet',
props: {
colors: ["#041E42", "#006697", "#3EC5E6", "#A0B5E8", "#E2F3F7"],
circular: true,
size: 120,
stack: 60
}
}]
},
{
components: [
{name: 'Compolicious/ColorTile', props: {color: '#041E42', circular: true, size: 60, label: 'Dark Blue'}},
{name: 'Compolicious/ColorTile', props: {color: '#006697', circular: true, size: 60, label: 'Walmart Blue'}},
{name: 'Compolicious/ColorTile', props: {color: '#3EC5E6', circular: true, size: 60, label: 'Turquoise Blue'}},
{name: 'Compolicious/ColorTile', props: {color: '#A0B5E8', circular: true, size: 60, label: 'Periwinkle Blue'}},
{name: 'Compolicious/ColorTile', props: {color: '#E2F3F7', circular: true, size: 60, label: 'Powder Blue'}}
]
}
]
},
{
title: "Red / Orange / Yellow",
blocks: [
{
components: [{
name: 'Compolicious/ColorBlockSet',
props: {
colors: ["#DE1C24", "#F0655D", "#EC8031", "#FFC220", "#FCED70"],
circular: true,
size: 120,
stack: 60
}
}]
},
{
components: [
{name: 'Compolicious/ColorTile', props: {color: '#DE1C24', circular: true, size: 60, label: 'Rollback Red'}},
{name: 'Compolicious/ColorTile', props: {color: '#F0655D', circular: true, size: 60, label: 'Electric Red'}},
{name: 'Compolicious/ColorTile', props: {color: '#EC8031', circular: true, size: 60, label: 'Pumpkin Orange'}},
{name: 'Compolicious/ColorTile', props: {color: '#FFC220', circular: true, size: 60, label: 'Spark Yellow'}},
{name: 'Compolicious/ColorTile', props: {color: '#FCED70', circular: true, size: 60, label: 'Lemon Yellow'}}
]
}
]
},
{
title: "Purple",
blocks: [
{
components: [{
name: 'Compolicious/ColorBlockSet',
props: {
colors: ["#63327E", "#683963", "#CB2C90", "#DF7BB1", "#EFD3E2"],
circular: true,
size: 120,
stack: 60
}
}]
},
{
components: [
{name: 'Compolicious/ColorTile', props: {color: '#63327E', circular: true, size: 60, label: 'Violet Purple'}},
{name: 'Compolicious/ColorTile', props: {color: '#683963', circular: true, size: 60, label: 'Plum Purple'}},
{name: 'Compolicious/ColorTile', props: {color: '#CB2C90', circular: true, size: 60, label: 'Fashion Pink'}},
{name: 'Compolicious/ColorTile', props: {color: '#DF7BB1', circular: true, size: 60, label: 'True Pink'}},
{name: 'Compolicious/ColorTile', props: {color: '#EFD3E2', circular: true, size: 60, label: 'Carnation Pink'}}
]
}
]
}
]
};