most export to pdf functionality re-instated

plugins/plugin-theme/src/lib/draft.js

@@ -1,17 +1,30 @@
+// FIXME surely this can be extracted from the theme in some way so as to keep things consistent?
+
 const round = value => Math.round(value * 1e2) / 1e2
 
-export default (scale) => `
-  /* Reset */
-  svg.freesewing path,
-  svg.freesewing circle,
-  svg.freesewing rect {
+const colors = {
+  fabric: '#212121',
+  lining: '#10b981',
+  interfacing: '#a3a3a3',
+  canvas: '#d97706',
+  various: '#ef4444',
+  note: '#8b5cf6',
+  mark: '#3b82f6',
+  contrast: '#ec4899'
+}
+
+export default (scale, stripped) => `
+  ${!stripped ? '/* Reset */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}path,
+  ${!stripped ? 'svg.freesewing ' : ''}circle,
+  ${!stripped ? 'svg.freesewing ' : ''}rect {
     fill: none;
     stroke: none;
   }
 
-  /* Defaults */
-  svg.freesewing path,
-  svg.freesewing circle {
+  ${!stripped ? '/* Defaults */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}path,
+  ${!stripped ? 'svg.freesewing ' : ''}circle {
     stroke: #000;
     stroke-opacity: 1;
     stroke-width: ${round(0.3*scale)};
@@ -19,111 +32,118 @@ export default (scale) => `
     stroke-linejoin: round;
   }
 
-  /* Stroke classes */
-  svg.freesewing .fabric {
+  ${!stripped ? '/* Stroke classes */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}.fabric {
     stroke-width: ${round(0.6*scale)};
-    stroke: #212121;
+    stroke: ${colors.fabric};
   }
-  svg.freesewing .lining {
+  ${!stripped ? 'svg.freesewing ' : ''}.lining {
     stroke-width: ${round(0.6*scale)};
-    stroke: #ff5b77;
+    stroke: ${colors.lining};
   }
-  svg.freesewing .interfacing {
+  ${!stripped ? 'svg.freesewing ' : ''}.interfacing {
     stroke-width: ${round(0.6*scale)};
-    stroke: #64b5f6;
+    stroke: ${colors.interfacing};
   }
-  svg.freesewing .canvas {
+  ${!stripped ? 'svg.freesewing ' : ''}.canvas {
     stroke-width: ${round(0.6*scale)};
-    stroke: #ff9000;
+    stroke: ${colors.canvas};
   }
-  svg.freesewing .various {
+  ${!stripped ? 'svg.freesewing ' : ''}.various {
     stroke-width: ${round(0.6*scale)};
-    stroke: #4caf50;
+    stroke: ${colors.various};
   }
-  svg.freesewing .note {
+  ${!stripped ? 'svg.freesewing ' : ''}.note {
     stroke-width: ${round(0.4*scale)};
-    stroke: #dd60dd;
+    stroke: ${colors.note};
   }
-  svg.freesewing .mark {
+  ${!stripped ? 'svg.freesewing ' : ''}.mark {
     stroke-width: ${round(0.4*scale)};
-    stroke: blue;
+    stroke: ${colors.mark};
   }
-  svg.freesewing .contrast {
+  ${!stripped ? 'svg.freesewing ' : ''}.contrast {
     stroke-width: ${round(0.8*scale)};
-    stroke: red;
+    stroke: ${colors.contrast};
   }
-  svg.freesewing .stroke-xs {
+
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xs {
     stroke-width: ${round(0.1*scale)};
   }
-  svg.freesewing .stroke-sm {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-sm {
     stroke-width: ${round(0.2*scale)};
   }
-  svg.freesewing .stroke-lg {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-lg {
     stroke-width: ${round(0.6*scale)};
   }
-  svg.freesewing .stroke-xl {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xl {
     stroke-width: ${round(1*scale)};
   }
-  svg.freesewing .stroke-xxl,
-  svg.freesewing .stroke-2xl {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xxl,
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-2xl {
     stroke-width: ${round(2*scale)};
   }
-  svg.freesewing .stroke-3xl {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-3xl {
     stroke-width: ${round(3*scale)};
   }
-  svg.freesewing .stroke-4xl {
+  ${!stripped ? 'svg.freesewing ' : ''}.stroke-4xl {
     stroke-width: ${round(4*scale)};
   }
 
-  svg.freesewing .sa {
+  ${!stripped ? 'svg.freesewing ' : ''}.sa {
     stroke-dasharray: 0.4, 0.8;
   }
-  svg.freesewing .help {
+  ${!stripped ? 'svg.freesewing ' : ''}.help {
     stroke-width: ${round(0.2*scale)};
     stroke-dasharray: 15, 1.5, 1, 1.5;
   }
-  svg.freesewing .dotted {
+  ${!stripped ? 'svg.freesewing ' : ''}.dotted {
     stroke-dasharray: 0.4, 0.8;
   }
-  svg.freesewing .dashed {
+  ${!stripped ? 'svg.freesewing ' : ''}.dashed {
     stroke-dasharray: 1, 1.5;
   }
-  svg.freesewing .lashed {
+  ${!stripped ? 'svg.freesewing ' : ''}.lashed {
     stroke-dasharray: 6, 6;
   }
-  svg.freesewing .hidden {
+  ${!stripped ? 'svg.freesewing ' : ''}.hidden {
     stroke: none;
     fill: none;
   }
-
-  /* Fill classes */
-  svg.freesewing .fill-fabric {
-    fill: #212121;
-  }
-  svg.freesewing .fill-lining {
-    fill: #ff5b77;
-  }
-  svg.freesewing .fill-interfacing {
-    fill: #64b5f6;
-  }
-  svg.freesewing .fill-canvas {
-    fill: #ff9000;
-  }
-  svg.freesewing .fill-various {
-    fill: #4caf50;
-  }
-  svg.freesewing .fill-note {
-    fill: #dd69dd;
-  }
-  svg.freesewing .fill-mark {
-    fill: blue;
-  }
-  svg.freesewing .fill-contrast {
-    fill: red;
+  ${!stripped ? 'svg.freesewing ' : ''}.no-stroke { stroke: none !important; }
+  ${!stripped ? 'svg.freesewing ' : ''}.no-fill { fill: none !important; }
+  ${!stripped ? 'svg.freesewing ' : ''}.muted {
+    stroke-opacity: 0.15;
+    fill-opacity: 0.15;
   }
 
-  /* Text */
-  svg.freesewing text {
+  ${!stripped ? '/* Fill classes */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-fabric {
+    fill: ${colors.fabric};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-lining {
+    fill: ${colors.lining};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-interfacing {
+    fill: ${colors.interfacing};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-canvas {
+    fill: ${colors.canvas};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-various {
+    fill: ${colors.various};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-note {
+    fill: ${colors.note};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-mark {
+    fill: ${colors.mark};
+  }
+  ${!stripped ? 'svg.freesewing ' : ''}.fill-contrast {
+    fill: ${colors.contrast};
+  }
+
+  ${!stripped ? '/* Text */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}text {
     font-size: ${round(5*scale)}px;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
       Arial, sans-serif;
@@ -132,31 +152,39 @@ export default (scale) => `
     font-weight: 200;
     dominant-baseline: ideographic;
   }
-  svg.freesewing .text-xs {
+  ${!stripped ? 'svg.freesewing ' : ''}.text-xs {
     font-size: ${round(3*scale)}px;
   }
-  svg.freesewing .text-sm {
+  ${!stripped ? 'svg.freesewing ' : ''}.text-sm {
     font-size: ${round(4*scale)}px;
   }
-  svg.freesewing .text-lg {
+  ${!stripped ? 'svg.freesewing ' : ''}.text-lg {
     font-size: ${round(7*scale)}px;
   }
-  svg.freesewing .text-xl {
+  ${!stripped ? 'svg.freesewing ' : ''}.text-xl {
     font-size: ${round(9*scale)}px;
   }
-  svg.freesewing .text-xxl {
+  ${!stripped ? 'svg.freesewing ' : ''}.text-xxl {
     font-size: ${round(12*scale)}px;
   }
+  ${!stripped ? 'svg.freesewing ' : ''}.text-4xl {
+    font-size: ${round(36*scale)}px;
+  }
 
-  svg.freesewing .center {
+  ${!stripped ? 'svg.freesewing ' : ''}.center {
     text-anchor: middle;
   }
-  svg.freesewing .right {
+  ${!stripped ? 'svg.freesewing ' : ''}.baseline-center {
+    alignment-baseline: central;
+    dominant-baseline: central;
+  }
+
+  ${!stripped ? 'svg.freesewing ' : ''}.right {
     text-anchor: end;
   }
 
-  /* Bartack */
-  svg.freesewing path.bartack {
+  ${!stripped ? '/* Bartack */' : ''}
+  ${!stripped ? 'svg.freesewing ' : ''}path.bartack {
     stroke-width: ${round(2*scale)};
     stroke: #fd7e14;
     stroke-linecap: butt;