chore(plugin-theme): Ported to v3

plugins/plugin-theme/src/css.mjs

@@ -35,8 +35,7 @@ svg.freesewing path.sample-focus {
   stroke-width: 1.5; fill: rgba(0,0,0,0.1)
 }`
 
-
+const round = (value) => Math.round(value * 1e2) / 1e2
-const round = value => Math.round(value * 1e2) / 1e2
 
 const colors = {
   fabric: '#212121',
@@ -46,7 +45,7 @@ const colors = {
   various: '#ef4444',
   note: '#8b5cf6',
   mark: '#3b82f6',
-  contrast: '#ec4899'
+  contrast: '#ec4899',
 }
 
 /**
@@ -68,73 +67,73 @@ export const buildStylesheet = (scale, stripped) => `
   ${!stripped ? 'svg.freesewing ' : ''}circle {
     stroke: #000;
     stroke-opacity: 1;
-    stroke-width: ${round(0.3*scale)};
+    stroke-width: ${round(0.3 * scale)};
     stroke-linecap: round;
     stroke-linejoin: round;
   }
 
   ${!stripped ? '/* Stroke classes */' : ''}
   ${!stripped ? 'svg.freesewing ' : ''}.fabric {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
     stroke: ${colors.fabric};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.lining {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
     stroke: ${colors.lining};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.interfacing {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
     stroke: ${colors.interfacing};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.canvas {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
     stroke: ${colors.canvas};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.various {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
     stroke: ${colors.various};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.note {
-    stroke-width: ${round(0.4*scale)};
+    stroke-width: ${round(0.4 * scale)};
     stroke: ${colors.note};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.mark {
-    stroke-width: ${round(0.4*scale)};
+    stroke-width: ${round(0.4 * scale)};
     stroke: ${colors.mark};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.contrast {
-    stroke-width: ${round(0.8*scale)};
+    stroke-width: ${round(0.8 * scale)};
     stroke: ${colors.contrast};
   }
 
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-xs {
-    stroke-width: ${round(0.1*scale)};
+    stroke-width: ${round(0.1 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-sm {
-    stroke-width: ${round(0.2*scale)};
+    stroke-width: ${round(0.2 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-lg {
-    stroke-width: ${round(0.6*scale)};
+    stroke-width: ${round(0.6 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-xl {
-    stroke-width: ${round(1*scale)};
+    stroke-width: ${round(1 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-xxl,
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-2xl {
-    stroke-width: ${round(2*scale)};
+    stroke-width: ${round(2 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-3xl {
-    stroke-width: ${round(3*scale)};
+    stroke-width: ${round(3 * scale)};
   }
   ${!stripped ? 'svg.freesewing ' : ''}.stroke-4xl {
-    stroke-width: ${round(4*scale)};
+    stroke-width: ${round(4 * scale)};
   }
 
   ${!stripped ? 'svg.freesewing ' : ''}.sa {
     stroke-dasharray: 0.4, 0.8;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.help {
-    stroke-width: ${round(0.2*scale)};
+    stroke-width: ${round(0.2 * scale)};
     stroke-dasharray: 15, 1.5, 1, 1.5;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.dotted {
@@ -185,7 +184,7 @@ export const buildStylesheet = (scale, stripped) => `
 
   ${!stripped ? '/* Text */' : ''}
   ${!stripped ? 'svg.freesewing ' : ''}text {
-    font-size: ${round(5*scale)}px;
+    font-size: ${round(5 * scale)}px;
     font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
       Arial, sans-serif;
     fill: #000;
@@ -194,22 +193,22 @@ export const buildStylesheet = (scale, stripped) => `
     dominant-baseline: ideographic;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-xs {
-    font-size: ${round(3*scale)}px;
+    font-size: ${round(3 * scale)}px;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-sm {
-    font-size: ${round(4*scale)}px;
+    font-size: ${round(4 * scale)}px;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-lg {
-    font-size: ${round(7*scale)}px;
+    font-size: ${round(7 * scale)}px;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-xl {
-    font-size: ${round(9*scale)}px;
+    font-size: ${round(9 * scale)}px;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-xxl {
-    font-size: ${round(12*scale)}px;
+    font-size: ${round(12 * scale)}px;
   }
   ${!stripped ? 'svg.freesewing ' : ''}.text-4xl {
-    font-size: ${round(36*scale)}px;
+    font-size: ${round(36 * scale)}px;
   }
 
   ${!stripped ? 'svg.freesewing ' : ''}.center {
@@ -226,8 +225,8 @@ export const buildStylesheet = (scale, stripped) => `
 
   ${!stripped ? '/* Bartack */' : ''}
   ${!stripped ? 'svg.freesewing ' : ''}path.bartack {
-    stroke-width: ${round(2*scale)};
+    stroke-width: ${round(2 * scale)};
     stroke: #fd7e14;
     stroke-linecap: butt;
   }
-`;
+`

plugins/plugin-theme/src/index.mjs

@@ -17,7 +17,7 @@ const grid = {
   <path class="gridline" d="M 12.7 0 L 12.7 25.4 M 0 12.7 L 25.4 12.7" />
   <path class="gridline-sm" d="M 3.175 0 L 3.175 25.4 M 6.32 0 L 6.35 25.4 M 9.525 0 L 9.525 25.4 M 15.875 0 L 15.875 25.4 M 19.05 0 L 19.05 25.4 M 22.225 0 L 22.225 25.4" />
   <path class="gridline-sm" d="M 0 3.175 L 25.4 3.175 M 0 6.32 L 25.4 6.35 M 0 9.525 L 25.4 9.525 M 0 15.875 L 25.4 15.875 M 0 19.05 L 25.4 19.05 M 0 22.225 L 25.4 22.225" />
-</pattern>`
+</pattern>`,
 }
 
 export const plugin = {
@@ -63,4 +63,3 @@ export const plugin = {
 // More specifically named exports
 export const themePlugin = plugin
 export const pluginTheme = plugin
-

plugins/plugin-theme/tests/plugin.test.mjs

@@ -6,27 +6,26 @@ const expect = chai.expect
 
 describe('Theme Plugin Tests', () => {
   const Pattern = new Design()
-  const pattern = new Pattern().use(plugin)
+  const pattern = new Pattern({ paperless: true }).use(plugin)
-  pattern.apply({ paperless: true })
   pattern.draft().render()
 
-  it("Should load base CSS", () => {
+  it('Should load base CSS', () => {
     expect(pattern.svg.style).to.contain('svg.freesewing')
   })
 
-  it("Should load the metric grid for paperless", () => {
+  it('Should load the metric grid for paperless', () => {
     expect(pattern.svg.defs).to.contain('gridline-xs')
     expect(pattern.svg.defs).to.contain('M 10 0 L 10 100 M 20 0 L 20')
-  });
+  })
 
-  it("Should load the imperial grid for paperless", () => {
+  it('Should load the imperial grid for paperless', () => {
-    pattern.apply({ units: 'imperial' })
+    const pattern = new Pattern({ paperless: true, units: 'imperial' }).use(plugin)
     pattern.draft().render()
     expect(pattern.svg.defs).to.contain('gridline-sm')
     expect(pattern.svg.defs).to.contain('M 12.7 0 L 12.7')
-  });
+  })
 
-  it("Should apply scale.", () => {
+  it('Should apply scale.', () => {
     expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n    font-size: 12px')
 
     pattern.settings.scale = 2
@@ -35,8 +34,8 @@ describe('Theme Plugin Tests', () => {
     expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n    font-size: 24px;')
   })
 
-  it("Should round after applying scale.", () => {
+  it('Should round after applying scale.', () => {
-    pattern.settings.scale = 1/3
+    pattern.settings.scale = 1 / 3
     pattern.draft().render()
 
     expect(pattern.svg.style).to.contain('svg.freesewing .text-xxl {\n    font-size: 4px')

plugins/plugin-theme/tests/shared.test.mjs

@@ -4,4 +4,3 @@ import { sharedPluginTests } from '../../../tests/plugins/shared.mjs'
 
 // Run shared tests
 sharedPluginTests(plugin)
-