@ou-imdt/css/dist/datavis-palette.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

/*
export const lightPaletteList = [
  "#C9C9C9",
  "#FFB7A8",
  "#FFB8CB", // based on red #BC0031
  "#EFBEDA",
  "#E1BDF4",
  "#C5C4F8", 
  "#ADCDFF",
  "#8BD7EA",
  "#61D7FF", // based on aqua blue #007AA2     
  "#19DEE1", // based on teal green #3FA3A5
  "#61D7FF", // based on aqua blue #007AA2 
  "#5FDDCE",
  "#3EE55F", // based on gmd dark green #267836
  "#98DC18",  
  "#b7e85d",
  "#F4DF57",
  "#F7C164", 
  // "#FFD68F", // based on beige #DACE9C
  "#FFBC8F",
  "#F0C093",
  "#DBC6A9"
];


export const darkPaletteList = [
"#5e5e5e",
"#C4511C", // based on bright red #CA541F
"#BC0031", // red
"#C41A6F", // pink
"#970036", // dark red

"#830056", // burgandy
"#5F247B", // purple
"#6A71A4", // based on lilac #7D83B8
"#007DB3", // based on sky blue #0089C6
"#0065A3", // dark blue
"#007AA2", // aqua blue  
"#2C8081", // based on teal green 3FA3A5
"#267836", // gmd dark green
"#4E6F11",  
"#6C7B1E", // based on light green #8DA029  
"#807214", // based on beige #DACE9C
"#8E6F39", 
"#A76406", // based on orange #CB7F1C
"#A44919",  
"#71523d"
];


*/



.palette,
.palette.light {
  --foreground: #000000;
  --background: #ffffff;
  --pattern-bg: #000000;
  --borderColor: var(--foreground);
  --borderWidth: 1px;
  --borderStyle: solid;
  --c1: #c9c9c9;
  --c2: #ffb7a8;
  --c3: #ffb8cb;
  --c4: #efbeda;
  --c5: #e1bdf4;
  --c6: #c5c4f8;
  --c7: #adcdff;
  --c8: #8bd7ea;
  --c9: #61d7ff;
  --c10: #19dee1;
  --c11: #61d7ff;
  --c12: #5fddce;
  --c13: #3ee55f;
  --c14: #98dc18;
  --c15: #b7e85d;
  --c16: #f4df57;
  --c17: #f7c164;
  --c18: #ffbc8f;
  --c19: #f0c093;
  --c20: #dbc6a9;
}

.palette.dark {
  --foreground: #ffffff;
  --background: #000000;
  --pattern-bg: #ffffff;
  --c1: #5e5e5e;
  --c2: #c4511c;
  --c3: #bc0031;
  --c4: #c41a6f;
  --c5: #970036;
  --c6: #830056;
  --c7: #5f247b;
  --c8: #6a71a4;
  --c9: #007db3;
  --c10: #0065a3;
  --c11: #007aa2;
  --c12: #2c8081;
  --c13: #267836;
  --c14: #4e6f11;
  --c15: #6c7b1e;
  --c16: #807214;
  --c17: #8e6f39;
  --c18: #a76406;
  --c19: #a44919;
  --c20: #71523d;
}

.palette>* {
  color: var(--foreground);
  background-color: var(--background);
  fill: var(--background);
  box-sizing: border-box;
}

.palette .pattern-txt {
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.2rem;
}

.palette.bordered {
  border: var(--borderWidth) var(--borderStyle) var(--borderColor);
}

.palette.bordered>* {
  border: var(--borderWidth) var(--borderStyle) var(--borderColor);
}

/* Background */
.palette .bg1,
.palette.palette-auto>*:nth-child(20n + 1) {
  --background: var(--c1);
}

.palette .bg2,
.palette.palette-auto>*:nth-child(20n + 2) {
  --background: var(--c2);
}

.palette .bg3,
.palette.palette-auto>*:nth-child(20n + 3) {
  --background: var(--c3);
}

.palette .bg4,
.palette.palette-auto>*:nth-child(20n + 4) {
  --background: var(--c4);
}

.palette .bg5,
.palette.palette-auto>*:nth-child(20n + 5) {
  --background: var(--c5);
}

.palette .bg6,
.palette.palette-auto>*:nth-child(20n + 6) {
  --background: var(--c6);
}

.palette .bg7,
.palette.palette-auto>*:nth-child(20n + 7) {
  --background: var(--c7);
}

.palette .bg8,
.palette.palette-auto>*:nth-child(20n + 8) {
  --background: var(--c8);
}

.palette .bg9,
.palette.palette-auto>*:nth-child(20n + 9) {
  --background: var(--c9);
}

.palette .bg10,
.palette.palette-auto>*:nth-child(20n + 10) {
  --background: var(--c10);
}

.palette .bg11,
.palette.palette-auto>*:nth-child(20n + 11) {
  --background: var(--c11);
}

.palette .bg12,
.palette.palette-auto>*:nth-child(20n + 12) {
  --background: var(--c12);
}

.palette .bg13,
.palette.palette-auto>*:nth-child(20n + 13) {
  --background: var(--c13);
}

.palette .bg14,
.palette.palette-auto>*:nth-child(20n + 14) {
  --background: var(--c14);
}

.palette .bg15,
.palette.palette-auto>*:nth-child(20n + 15) {
  --background: var(--c15);
}

.palette .bg16,
.palette.palette-auto>*:nth-child(20n + 16) {
  --background: var(--c16);
}

.palette .bg17,
.palette.palette-auto>*:nth-child(20n + 17) {
  --background: var(--c17);
}

.palette .bg18,
.palette.palette-auto>*:nth-child(20n + 18) {
  --background: var(--c18);
}

.palette .bg19,
.palette.palette-auto>*:nth-child(20n + 19) {
  --background: var(--c19);
}

.palette .bg20,
.palette.palette-auto>*:nth-child(20n + 20) {
  --background: var(--c20);
}


/* Patterns General */
.palette .pattern,
.palette.pattern-auto>* {
  --svg-pattern: "";
  background-color: var(--background);
  background-image: var(--svg-pattern);
}

/* Light Palette Patterns */

.palette.light .pattern.pat1,
.palette.light.pattern-auto>*:nth-child(20n + 1) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat2,
.palette.light.pattern-auto>*:nth-child(20n + 2) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat3,
.palette.light.pattern-auto>*:nth-child(20n + 3) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'   stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat4,
.palette.light.pattern-auto>*:nth-child(20n + 4) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='24.5' height='20' patternTransform='scale(1) rotate(130)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'  transform='translate(2.25,0)' stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat5,
.palette.light.pattern-auto>*:nth-child(20n + 5) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='24.5' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'  transform='translate(2.25,0)' stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat6,
.palette.light.pattern-auto>*:nth-child(20n + 6) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(135)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'   stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat7,
.palette.light.pattern-auto>*:nth-child(20n + 7) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='60' height='60' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M15 30v30m-7.5 0V30h15v30m7.5 0H0V30h30M45 0v30m7.5-30v30m-15 0V0M30 0h30v30M30 45h30m-30-7.5h30m0 15H30M30 30h30v30H30zM0 15h30M0 7.5h30m0 15H0M0 0h30v30H0z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat8,
.palette.light.pattern-auto>*:nth-child(20n + 8) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-7,-6)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat9,
.palette.light.pattern-auto>*:nth-child(20n + 9) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='30' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 22.5h30v15H0zm15-15h30v15H15m-30-15h30v15h-30zm15-15h30v15H0z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat10,
.palette.light.pattern-auto>*:nth-child(20n + 10) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M -5,-3 5,2 15,-3 25,2 M -5,17 5,22 15,17 25,22 M -5,7 5,12 15,7 25,12 m -27.5,12.5 5,-10 -5,-10 5,-10 m 15,30 5,-10 -5,-10 5,-10 m -15,30 5,-10 -5,-10 5,-10'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat11,
.palette.light.pattern-auto>*:nth-child(20n + 11) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M10-10L20 0v10L10 0zM20 0L10-10V0l10 10zm0 10L10 0v10l10 10zm0 10L10 10v10l10 10zM0 20l10-10v10L0 30zm0-10L10 0v10L0 20zM0 0l10-10V0L0 10z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat12,
.palette.light.pattern-auto>*:nth-child(20n + 12) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M20-5V5m0 30v10m20-30v10M0 15v10'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/><path d='M-5 40H5M-5 0H5m30 0h10M35 40h10M15 20h10'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat13,
.palette.light.pattern-auto>*:nth-child(20n + 13) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M18.822 18.717s.077-1.396-.737-2.21c-.813-.813-2.21-.736-2.21-.736s-.076 1.396.737 2.21c.814.813 2.21.736 2.21.736zm0-17.643s-1.396-.077-2.21.736c-.813.814-.736 2.21-.736 2.21s1.396.077 2.21-.736c.813-.814.736-2.21.736-2.21zM3.389 17.98c.813-.813.736-2.21.736-2.21s-1.396-.076-2.21.737c-.813.814-.736 2.21-.736 2.21s1.396.077 2.21-.737zm.736-13.96s.077-1.396-.736-2.21c-.814-.813-2.21-.736-2.21-.736s-.077 1.396.736 2.21c.814.813 2.21.736 2.21.736z'  stroke-width='1' stroke='none' fill='black'/><path d='M15.833 9.896s-.932-1.042-2.083-1.042c-1.15 0-2.083 1.042-2.083 1.042s.932 1.041 2.083 1.041c1.15 0 2.083-1.041 2.083-1.041zm-7.5 0S7.401 8.854 6.25 8.854c-1.15 0-2.083 1.042-2.083 1.042s.932 1.041 2.083 1.041c1.15 0 2.083-1.041 2.083-1.041zm2.709-3.75c0-1.15-1.042-2.083-1.042-2.083s-1.042.932-1.042 2.083C8.958 7.296 10 8.229 10 8.229s1.042-.933 1.042-2.083zm-2.084 7.5c0 1.15 1.042 2.083 1.042 2.083s1.042-.933 1.042-2.083c0-1.15-1.042-2.083-1.042-2.083s-1.042.932-1.042 2.083z'  stroke-width='1' stroke='none' fill='black'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat14,
.palette.light.pattern-auto>*:nth-child(20n + 14) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M40 16h-6m-4 0h-6m8 8v-6m0-4V8M8 16H2m-4 0h-6m8 8v-6m0-4V8'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat15,
.palette.light.pattern-auto>*:nth-child(20n + 15) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M15 5h10v30H15zM35-5V5H5V-5zM35 35v10H5V35zM35-15h10v30H35zM55 15v10H25V15zM15 15v10h-30V15zM35 25h10v30H35zM-5 25H5v30H-5zM-5-15H5v30H-5z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat16,
.palette.light.pattern-auto>*:nth-child(20n + 16) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M40 45a5 5 0 110-10 5 5 0 010 10zM0 45a5 5 0 110-10 5 5 0 010 10zM0 5A5 5 0 110-5 5 5 0 010 5zm40 0a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='black' fill='none'/><path d='M20 25a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat17,
.palette.light.pattern-auto>*:nth-child(20n + 17) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='48' height='48' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M5.323 7.811a10.233 10.233 0 01-11.77 0m60.894 0a10.234 10.234 0 01-11.77 0M-6.447 40.19a10.234 10.234 0 0111.77 0m37.354 0a10.235 10.235 0 0111.77 0m-24.562-7.817a10.234 10.234 0 01-11.77 0m0-16.746A10.234 10.234 0 0124 13.767c2.107 0 4.162.649 5.886 1.86'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/><path d='M15.627 5.323a10.234 10.234 0 010-11.77m16.746 0a10.234 10.234 0 010 11.77M15.627 54.447a10.233 10.233 0 010-11.77m16.746 0a10.234 10.234 0 010 11.77m7.817-24.562a10.234 10.234 0 010-11.77m-32.379 0a10.234 10.234 0 010 11.771'  stroke-linecap='square' stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat18,
.palette.light.pattern-auto>*:nth-child(20n + 18) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M50 25L37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat19,
.palette.light.pattern-auto>*:nth-child(20n + 19) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.light .pattern.pat20,
.palette.light.pattern-auto>*:nth-child(20n + 20) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='16.5' height='32.877' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-5 2l5 10L5 2zm16.5 0l5 10 5-10zM8.25 4.438l-5 10h10zm-5 14l5 10.001 5-10zM0 20.878l-5 10H5zm16.5 0l-5 10h10z'  stroke-width='1' stroke='black' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

/* Dark Palette Patterns */

.palette.dark .pattern.pat1,
.palette.dark.pattern-auto>*:nth-child(20n + 1) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat2,
.palette.dark.pattern-auto>*:nth-child(20n + 2) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='70' height='8' patternTransform='scale(1) rotate(90)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-.02 22c8.373 0 11.938-4.695 16.32-9.662C20.785 7.258 25.728 2 35 2c9.272 0 14.215 5.258 18.7 10.338C58.082 17.305 61.647 22 70.02 22M-.02 14.002C8.353 14 11.918 9.306 16.3 4.339 20.785-.742 25.728-6 35-6 44.272-6 49.215-.742 53.7 4.339c4.382 4.967 7.947 9.661 16.32 9.664M70 6.004c-8.373-.001-11.918-4.698-16.3-9.665C49.215-8.742 44.272-14 35-14c-9.272 0-14.215 5.258-18.7 10.339C11.918 1.306 8.353 6-.02 6.002'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat3,
.palette.dark.pattern-auto>*:nth-child(20n + 3) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'   stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat4,
.palette.dark.pattern-auto>*:nth-child(20n + 4) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='24.5' height='20' patternTransform='scale(1) rotate(130)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'  transform='translate(2.25,0)' stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat5,
.palette.dark.pattern-auto>*:nth-child(20n + 5) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='24.5' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'  transform='translate(2.25,0)' stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat6,
.palette.dark.pattern-auto>*:nth-child(20n + 6) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(135)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 10h20z'   stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-15,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat7,
.palette.dark.pattern-auto>*:nth-child(20n + 7) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='60' height='60' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M15 30v30m-7.5 0V30h15v30m7.5 0H0V30h30M45 0v30m7.5-30v30m-15 0V0M30 0h30v30M30 45h30m-30-7.5h30m0 15H30M30 30h30v30H30zM0 15h30M0 7.5h30m0 15H0M0 0h30v30H0z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat8,
.palette.dark.pattern-auto>*:nth-child(20n + 8) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M 10,-2.55e-7 V 20 Z M -1.1677362e-8,10 H 20 Z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(-7,-6)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat9,
.palette.dark.pattern-auto>*:nth-child(20n + 9) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='30' height='30' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 22.5h30v15H0zm15-15h30v15H15m-30-15h30v15h-30zm15-15h30v15H0z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat10,
.palette.dark.pattern-auto>*:nth-child(20n + 10) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M -5,-3 5,2 15,-3 25,2 M -5,17 5,22 15,17 25,22 M -5,7 5,12 15,7 25,12 m -27.5,12.5 5,-10 -5,-10 5,-10 m 15,30 5,-10 -5,-10 5,-10 m -15,30 5,-10 -5,-10 5,-10'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat11,
.palette.dark.pattern-auto>*:nth-child(20n + 11) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M10-10L20 0v10L10 0zM20 0L10-10V0l10 10zm0 10L10 0v10l10 10zm0 10L10 10v10l10 10zM0 20l10-10v10L0 30zm0-10L10 0v10L0 20zM0 0l10-10V0L0 10z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat12,
.palette.dark.pattern-auto>*:nth-child(20n + 12) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(45)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M20-5V5m0 30v10m20-30v10M0 15v10'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/><path d='M-5 40H5M-5 0H5m30 0h10M35 40h10M15 20h10'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat13,
.palette.dark.pattern-auto>*:nth-child(20n + 13) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='20' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M18.822 18.717s.077-1.396-.737-2.21c-.813-.813-2.21-.736-2.21-.736s-.076 1.396.737 2.21c.814.813 2.21.736 2.21.736zm0-17.643s-1.396-.077-2.21.736c-.813.814-.736 2.21-.736 2.21s1.396.077 2.21-.736c.813-.814.736-2.21.736-2.21zM3.389 17.98c.813-.813.736-2.21.736-2.21s-1.396-.076-2.21.737c-.813.814-.736 2.21-.736 2.21s1.396.077 2.21-.737zm.736-13.96s.077-1.396-.736-2.21c-.814-.813-2.21-.736-2.21-.736s-.077 1.396.736 2.21c.814.813 2.21.736 2.21.736z'  stroke-width='1' stroke='none' fill='white'/><path d='M15.833 9.896s-.932-1.042-2.083-1.042c-1.15 0-2.083 1.042-2.083 1.042s.932 1.041 2.083 1.041c1.15 0 2.083-1.041 2.083-1.041zm-7.5 0S7.401 8.854 6.25 8.854c-1.15 0-2.083 1.042-2.083 1.042s.932 1.041 2.083 1.041c1.15 0 2.083-1.041 2.083-1.041zm2.709-3.75c0-1.15-1.042-2.083-1.042-2.083s-1.042.932-1.042 2.083C8.958 7.296 10 8.229 10 8.229s1.042-.933 1.042-2.083zm-2.084 7.5c0 1.15 1.042 2.083 1.042 2.083s1.042-.933 1.042-2.083c0-1.15-1.042-2.083-1.042-2.083s-1.042.932-1.042 2.083z'  stroke-width='1' stroke='none' fill='white'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat14,
.palette.dark.pattern-auto>*:nth-child(20n + 14) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='32' height='32' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M40 16h-6m-4 0h-6m8 8v-6m0-4V8M8 16H2m-4 0h-6m8 8v-6m0-4V8'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/><path d='M16-8v6m0 4v6m8-8h-6m-4 0H8m8 24v6m0 4v6m8-8h-6m-4 0H8'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat15,
.palette.dark.pattern-auto>*:nth-child(20n + 15) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M15 5h10v30H15zM35-5V5H5V-5zM35 35v10H5V35zM35-15h10v30H35zM55 15v10H25V15zM15 15v10h-30V15zM35 25h10v30H35zM-5 25H5v30H-5zM-5-15H5v30H-5z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat16,
.palette.dark.pattern-auto>*:nth-child(20n + 16) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M40 45a5 5 0 110-10 5 5 0 010 10zM0 45a5 5 0 110-10 5 5 0 010 10zM0 5A5 5 0 110-5 5 5 0 010 5zm40 0a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='white' fill='none'/><path d='M20 25a5 5 0 110-10 5 5 0 010 10z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat17,
.palette.dark.pattern-auto>*:nth-child(20n + 17) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='48' height='48' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M5.323 7.811a10.233 10.233 0 01-11.77 0m60.894 0a10.234 10.234 0 01-11.77 0M-6.447 40.19a10.234 10.234 0 0111.77 0m37.354 0a10.235 10.235 0 0111.77 0m-24.562-7.817a10.234 10.234 0 01-11.77 0m0-16.746A10.234 10.234 0 0124 13.767c2.107 0 4.162.649 5.886 1.86'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/><path d='M15.627 5.323a10.234 10.234 0 010-11.77m16.746 0a10.234 10.234 0 010 11.77M15.627 54.447a10.233 10.233 0 010-11.77m16.746 0a10.234 10.234 0 010 11.77m7.817-24.562a10.234 10.234 0 010-11.77m-32.379 0a10.234 10.234 0 010 11.771'  stroke-linecap='square' stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat18,
.palette.dark.pattern-auto>*:nth-child(20n + 18) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='50' height='50' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M50 25L37.5 50 25 25 37.5 0zm-25 0L12.5 50 0 25 12.5 0z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat19,
.palette.dark.pattern-auto>*:nth-child(20n + 19) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='20' height='40' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M0 30h20L10 50zm-10-20h20L0 30zm20 0h20L20 30zM0-10h20L10 10z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}

.palette.dark .pattern.pat20,
.palette.dark.pattern-auto>*:nth-child(20n + 20) {
  --svg-pattern: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='16.5' height='32.877' patternTransform='scale(1) rotate(0)'><rect x='0' y='0' width='100%' height='100%' fill='transparent'/><path d='M-5 2l5 10L5 2zm16.5 0l5 10 5-10zM8.25 4.438l-5 10h10zm-5 14l5 10.001 5-10zM0 20.878l-5 10H5zm16.5 0l-5 10h10z'  stroke-width='1' stroke='white' fill='none'/></pattern></defs><rect width='800%' height='800%' transform='translate(0,0)' fill='url(%23a)'/></svg>");
}