feat(lab): Bring up info on paths when clicked upon

sites/shared/components/modal.js

@@ -0,0 +1,22 @@
+import { useState } from 'react'
+
+const Modal = ({ cancel, children }) => {
+
+
+  return (
+    <div className={`
+      fixed top-0 left-0 right-0 w-screen h-screen
+      bg-neutral bg-opacity-70 z-30
+      hover:cursor-pointer flex flex-col justify-center
+      `} onClick={cancel}>
+        <div className="m-auto text-neutral-content lightbox" style={{
+          maxHeight: "calc(100vh - 6rem)",
+          maxWidth: "calc(100vw - 6rem)",
+        }}>
+          {children}
+        </div>
+    </div>
+  )
+}
+
+export default Modal

sites/shared/components/workbench/draft/index.js

@@ -3,7 +3,7 @@ import Error from './error.js'
 import Robot from 'shared/components/robot/index.js'
 
 const LabDraft = props => {
-  const { app, draft, design, gist, updateGist, unsetGist, feedback } = props
+  const { app, draft, design, gist, updateGist, unsetGist, showInfo, feedback } = props
 
   if (!draft) return null
 
@@ -32,7 +32,7 @@ const LabDraft = props => {
         ? <Error {...{ draft, patternProps, updateGist }} />
         : null
       }
-      <SvgWrapper {...{ draft, patternProps, gist, updateGist, unsetGist, app, feedback }} />
+      <SvgWrapper {...{ draft, patternProps, gist, updateGist, unsetGist, showInfo, app, feedback }} />
     </>
   )
 }

sites/shared/components/workbench/draft/path/index.js

@@ -1,20 +1,435 @@
-import React from 'react'
+import React, { useState } from 'react'
 import TextOnPath from '../text-on-path'
 import { getProps } from '../utils'
+import { round } from 'shared/utils'
 
-const XrayPath = props => (
+const pointInfo = point => point
+  ? `[ ${round(point.x, 2)}, ${round(point.y, 2)} ]`
+  : null
+
+const Tr = ({ children }) => <tr className="border border-base-300">{children}</tr>
+const KeyTd = ({ children }) => <td className="p-3 text-right">{children}:</td>
+const ValTd = ({ children }) => <td className="p-3">{children}</td>
+
+const TextAlongPath = ({id, size, fill="var(--pattern-note)", txt}) => (
+  <text>
+    <textPath xlinkHref={`#${id}`} startOffset="50%">
+      <tspan
+        style={{ textAnchor: 'middle', fontSize: size }}
+        className="fill-neutral-content fill-opacity-50"
+        dy={size * -0.4}
+      >
+        {txt}
+      </tspan>
+    </textPath>
+  </text>
+)
+const PointCircle = ({ point, size, className="stroke-neutral-content" }) => (
+  <circle
+    cx={point.x} cy={point.y} r={size/50}
+    className={className}
+    fill="none" strokeWidth={size/150} strokeOpacity="0.5"
+  />
+)
+
+const pathDimensions = (from, to, cp1=false, cp2=false, path=false) => {
+  const topLeft = {
+    x: (to.x < from.x) ? to.x : from.x,
+    y: (to.y < from.y) ? to.y : from.y,
+  }
+  const bottomRight = {
+    x: (to.x > from.x) ? to.x : from.x,
+    y: (to.y > from.y) ? to.y : from.y,
+  }
+  let bbox = false
+  // Deal with curves
+  if (cp1 && cp2) {
+    if (cp1.x < topLeft.x) topLeft.x = cp1.x
+    if (cp2.x < topLeft.x) topLeft.x = cp2.x
+    if (cp1.x > bottomRight.x) bottomRight.x = cp1.x
+    if (cp2.x > bottomRight.x) bottomRight.x = cp2.x
+    if (cp1.y < topLeft.y) topLeft.y = cp1.y
+    if (cp2.y < topLeft.y) topLeft.y = cp2.y
+    if (cp1.y > bottomRight.y) bottomRight.y = cp1.y
+    if (cp2.y > bottomRight.y) bottomRight.y = cp2.y
+    // This undocumented core methods returns the curve's bounding box
+    bbox = path.boundary()
+  }
+  const w = bottomRight.x - topLeft.x
+  const h = bottomRight.y - topLeft.y
+  const size = w > h ? w : h
+
+  return {
+    topLeft,
+    bottomRight,
+    w,
+    h,
+    size,
+    bbox
+  }
+}
+
+const Defs = () => (
+  <defs>
+    <marker orient="auto" refY="0.0" refX="0.0" id="arrowTo" style={{overflow: 'visible'}}>
+      <path className="fill-neutral-content" d="M 0,0 L -12,-4 C -10,-2 -10,2  -12, 4 z" fillOpacity="0.5"></path>
+    </marker>
+    <marker orient="auto" refY="0.0" refX="0.0" id="arrowFrom" style={{overflow: 'visible'}}>
+      <path className="fill-neutral-content" d="M 0,0 L 12,-4 C 10,-2 10,2  12, 4 z" fillOpacity="0.5"></path>
+    </marker>
+  </defs>
+)
+
+const svgProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsSvg: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  style: { maxHeight: 'inherit', strokeLinecap: 'round', strokeLinejoin: 'round' },
+}
+
+const Line = (props) => {
+  const ops = props.path.ops
+  const from = ops[0].to
+  const to = ops[1].to
+  const { topLeft, bottomRight, w, h, size } = pathDimensions(from, to)
+  const id = `${props.partName}_${props.pathName}_${props.i}`
+
+  const xyProps = {
+    className: "stroke-neutral-content",
+    strokeOpacity: "0.5",
+    fill: "none",
+    strokeWidth: (size/300),
+  }
+
+  return (
+    <svg {...svgProps}
+      viewBox={`${topLeft.x - (size/10)} ${topLeft.y - (size/10)} ${w + (size/5)} ${h + (size/5)}`}
+    >
+      <path id={`${id}_x`} {...xyProps}
+        d={`M ${topLeft.x},${bottomRight.y} L ${bottomRight.x},${bottomRight.y}`}
+      />
+      <TextAlongPath id={`${id}_x`} size={size/18} txt={round(bottomRight.x - topLeft.x, 2)+'mm'} />
+      <path id={`${id}_y`} {...xyProps}
+        d={`M ${topLeft.x},${bottomRight.y} L ${topLeft.x},${topLeft.y}`}
+      />
+      <TextAlongPath id={`${id}_y`} size={size/18} txt={round(bottomRight.y - topLeft.y, 2)+'mm'} />
+      <path
+        id={id}
+        d={`M ${from.x},${from.y} L ${to.x},${to.y}`}
+        className="stroke-neutral-content"
+        strokeLinecap="round"
+        strokeWidth={(size/100)}
+      />
+      <TextAlongPath id={id} size={size/18} txt={round(props.path.length(), 2)+'mm'} />
+      <PointCircle point={from} size={size} />
+      <PointCircle point={to} size={size} />
+    </svg>
+  )
+}
+
+const Curve = (props) => {
+  const ops = props.path.ops
+  const from = ops[0].to
+  const { to, cp1, cp2 } = ops[1]
+  const { topLeft, bottomRight, w, h, size, bbox } = pathDimensions(from, to, cp1, cp2, props.path)
+  const id = `${props.partName}_${props.pathName}_${props.i}`
+
+  const cpProps = {
+    className: "stroke-success",
+    strokeOpacity: "0.85",
+    fill: "none",
+    strokeWidth: (size/300),
+  }
+  const xyProps = {
+    ...cpProps,
+    strokeOpacity: "0.5",
+    className: "stroke-neutral-content",
+    markerEnd: "url(#arrowTo)",
+    markerStart: "url(#arrowFrom)",
+  }
+
+  return (
+    <svg {...svgProps}
+      viewBox={`${topLeft.x - (size/10)} ${topLeft.y - (size/10)} ${w + (size/5)} ${h + (size/5)}`}
+    >
+      <Defs />
+      <path id={`${id}_x`} {...xyProps}
+        d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.bottomRight.x},${bbox.bottomRight.y}`}
+      />
+      <TextAlongPath id={`${id}_x`} size={size/18} txt={round(bbox.bottomRight.x - bbox.topLeft.x, 2)+'mm'} />
+      <path id={`${id}_y`} {...xyProps}
+        d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.topLeft.x},${bbox.topLeft.y}`}
+      />
+      <TextAlongPath id={`${id}_y`} size={size/18} txt={round(bbox.bottomRight.y - bbox.topLeft.y, 2)+'mm'} />
+      <path id={`${id}_cp1`} {...cpProps} d={`M ${from.x},${from.y} L ${cp1.x},${cp1.y}`} />
+      <PointCircle point={cp1} size={size} className="stroke-success" />
+      <path id={`${id}_cp2`} {...cpProps} d={`M ${to.x},${to.y} L ${cp2.x},${cp2.y}`} />
+      <PointCircle point={cp2} size={size} className="stroke-success"/>
+      <path
+        id={id}
+        d={`M ${from.x},${from.y} C ${cp1.x},${cp1.y} ${cp2.x},${cp2.y} ${to.x},${to.y}`}
+        className="stroke-neutral-content"
+        fill="none"
+        strokeLinecap="round"
+        strokeWidth={(size/100)}
+      />
+      <TextAlongPath id={id} size={size/18} txt={round(props.path.length(), 2)+'mm'} />
+      <PointCircle point={from} size={size} />
+      <PointCircle point={to} size={size} />
+    </svg>
+  )
+}
+
+const MiniPath = props => {
+  const ops = props.path.ops
+  const bbox = props.path.boundary()
+  const id = `${props.partName}_${props.pathName}_mini}`
+  const w = bbox.bottomRight.x - bbox.topLeft.x
+  const h = bbox.bottomRight.y - bbox.topLeft.y
+  const size = w > h ? w : h
+
+  const xyProps = {
+    fill: "none",
+    strokeWidth: (size/300),
+    strokeOpacity: "0.5",
+    className: "stroke-neutral-content",
+    markerEnd: "url(#arrowTo)",
+    markerStart: "url(#arrowFrom)",
+  }
+
+  return (
+    <svg {...svgProps}
+      viewBox={`${bbox.topLeft.x - (size/10)} ${bbox.topLeft.y - (size/10)} ${w + (size/5)} ${h + (size/5)}`}
+      className="freesewing pattern z-50"
+    >
+      <Defs />
+      <path id={`${id}_x`} {...xyProps}
+        d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.bottomRight.x},${bbox.bottomRight.y}`}
+      />
+      <TextAlongPath id={`${id}_x`} size={size/18} txt={round(bbox.bottomRight.x - bbox.topLeft.x, 2)+'mm'} />
+      <path id={`${id}_y`} {...xyProps}
+        d={`M ${bbox.topLeft.x},${bbox.bottomRight.y} L ${bbox.topLeft.x},${bbox.topLeft.y}`}
+      />
+      <TextAlongPath id={`${id}_y`} size={size/18} txt={round(bbox.bottomRight.y - bbox.topLeft.y, 2)+'mm'} />
+      <path
+        id={id}
+        d={props.path.asPathstring()}
+        className="stroke-neutral-content"
+        fill="none"
+        strokeLinecap="round"
+        strokeWidth={(size/100)}
+      />
+      <TextAlongPath id={id} size={size/18} txt={round(props.path.length(), 2)+'mm'} />
+      <XrayPath {...props} />)
+    </svg>
+  )
+}
+
+const lineInfo = (props) => (
+  <div className="p-4 border bg-neutral bg-opacity-60 shadow rounded-lg">
+    <h5 className="text-neutral-content text-center pb-4">Line info</h5>
+    <div className="flex flex-row flex-wrap">
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>From</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[0].to)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>To</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[1].to)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Length</KeyTd>
+            <ValTd>{round(props.path.length(), 2)}mm</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Part</KeyTd>
+            <ValTd>{props.partName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Draw Op</KeyTd>
+            <ValTd>{props.i}/{props.ops.length}</ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      <div className="max-w-md" style={{ maxHeight: '80vh' }}>
+        <Line {...props} />
+      </div>
+    </div>
+  </div>
+)
+
+const XrayLine = props => (
+  <>
+    <path
+      d={props.path.asPathstring()}
+      {...getProps(props.path)}
+      className="opacity-0 stroke-4xl stroke-note hover:opacity-25 hover:cursor-pointer"
+      onClick={(evt) => { evt.stopPropagation(); props.showInfo(lineInfo(props)) }}
+    />
+  </>
+)
+
+const curveInfo = (props) => (
+  <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
+    <h5 className="text-neutral-content text-center pb-4">Curve info</h5>
+    <div className="flex flex-row flex-wrap">
+      <table className="border-collapse h-fit">
+        <tbody>
+          <Tr>
+            <KeyTd>From</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[0].to)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Cp1</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[1].cp1)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Cp2</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[1].cp2)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>To</KeyTd>
+            <ValTd>{pointInfo(props.path.ops[1].to)}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Length</KeyTd>
+            <ValTd>{round(props.path.length(), 2)}mm</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Part</KeyTd>
+            <ValTd>{props.partName}</ValTd>
+          </Tr>
+          <Tr>
+            <KeyTd>Draw Op</KeyTd>
+            <ValTd>{props.i}/{props.ops.length}</ValTd>
+          </Tr>
+        </tbody>
+      </table>
+      <div className="max-w-md" style={{ maxHeight: '80vh' }}>
+        <Curve {...props} />
+      </div>
+    </div>
+  </div>
+)
+
+const Attributes = ({ list }) => list
+  ? (
+    <ul>
+      {Object.keys(list).map(key => (
+        <li><strong>{key}</strong>: {list[key]}</li>
+      ))}
+    </ul>
+  ) : null
+
+const pathInfo = (props) => {
+  const bbox = props.path.boundary()
+
+  return (
+    <div className="p-4 border bg-neutral bg-opacity-40 shadow rounded-lg">
+      <h5 className="text-neutral-content text-center pb-4">Path info</h5>
+      <div className="flex flex-row flex-wrap overflow-scroll" style={{ maxHeight: '80vh' }}>
+        <table className="border-collapse h-fit">
+          <tbody>
+            <Tr>
+              <KeyTd>Name</KeyTd>
+              <ValTd>{bbox.name}</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Length</KeyTd>
+              <ValTd>{round(props.path.length(), 2)}mm</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Width</KeyTd>
+              <ValTd>{round(bbox.bottomRight.x - bbox.topLeft.x, 2)}mm</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Height</KeyTd>
+              <ValTd>{round(bbox.bottomRight.y - bbox.topLeft.y, 2)}mm</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Top Left</KeyTd>
+              <ValTd>{pointInfo(bbox.topLeft)}</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Bottom Right</KeyTd>
+              <ValTd>{pointInfo(bbox.bottomRight)}</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Part</KeyTd>
+              <ValTd>{props.partName}</ValTd>
+            </Tr>
+            <Tr>
+              <KeyTd>Attributes</KeyTd>
+              <ValTd><Attributes list={bbox.attributes.list} /></ValTd>
+            </Tr>
+          </tbody>
+        </table>
+        <table className="border-collapse h-fit">
+          <tbody>
+            {props.path.ops.map((op, i) => (
+              <Tr key={i}>
+                <KeyTd>{i}</KeyTd>
+                <ValTd><PathOp op={op}/></ValTd>
+              </Tr>
+            ))}
+          </tbody>
+        </table>
+        <div className="max-w-md">
+          <MiniPath {...props} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const PathOp = ({ op }) => {
+  if (op.type === 'move') return <span><strong>Move</strong> to {pointInfo(op.to)}</span>
+  else if (op.type === 'line') return <span><strong>Line</strong> to {pointInfo(op.to)}</span>
+  else if (op.type === 'curve') return (
+    <span>
+      <strong>Curve</strong> to {pointInfo(op.to)}
+      <br />
+      Cp1: {pointInfo(op.cp1)}
+      <br />
+      Cp2: {pointInfo(op.cp2)}
+    </span>
+  )
+  else if (op.type === 'noop') return <strong>NOOP</strong>
+  else if (op.type === 'close') return <strong>Close</strong>
+  else return <strong>FIXME: unknown path operation type: {op.type}</strong>
+}
+
+const XrayCurve = props => (
+  <path
+    d={props.path.asPathstring()}
+    {...getProps(props.path)}
+    className="opacity-0 stroke-4xl stroke-lining hover:opacity-25 hover:cursor-pointer"
+    onClick={(evt) => { evt.stopPropagation(); props.showInfo(curveInfo(props)) }}
+  />
+)
+
+const XrayPath = props => {
+  const ops = props.path.divide()
+
+  return (
     <g>
       <path
         d={props.path.asPathstring()}
         {...getProps(props.path)}
-      className="opacity-0 stroke-3xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
+        className="opacity-0 stroke-7xl stroke-contrast hover:opacity-25 hover:cursor-pointer"
-      onClick={() => props.updateGist(
+        onClick={(evt) => { evt.preventDefault(); props.showInfo(pathInfo(props)) }}
-        ['_state', 'xray', 'parts', props.partName, 'paths', props.pathName],
-        1
-      )}
       />
+      {ops.length > 1
+        ? ops.map((op,i) => (op.ops[1].type === 'curve')
+          ? <XrayCurve {...props} path={op} ops={ops} i={i} pathName={`${props.pathName}_test`} />
+          : <XrayLine  {...props} path={op} ops={ops} i={i} pathName={`${props.pathName}_test`} />
+        ) : null
+      }
     </g>
-)
+  )
+}
 
 
 const Path = props => {

sites/shared/components/workbench/draft/svg-wrapper.js

@@ -26,7 +26,7 @@ import Part from './part'
  */
 
 const SvgWrapper = props => {
-  const { patternProps, gist, app, updateGist, unsetGist } = props
+  const { patternProps, gist, app, updateGist, unsetGist, showInfo } = props
 
   return <SizeMe>{({ size }) => (
     <TransformWrapper
@@ -41,7 +41,7 @@ const SvgWrapper = props => {
             <style>{`:root { --pattern-scale: ${gist.scale || 1}}`}</style>
             <g>
               {Object.keys(patternProps.parts).map((name) => (
-                <Part {...{ app, gist, updateGist, unsetGist }}
+                <Part {...{ app, gist, updateGist, unsetGist, showInfo }}
                   key={name}
                   partName={name}
                   part={patternProps.parts[name]}

sites/shared/components/wrappers/workbench.js

@@ -8,6 +8,7 @@ import defaultSettings from 'shared/components/workbench/default-settings.js'
 import DraftError from 'shared/components/workbench/draft/error.js'
 import theme from '@freesewing/plugin-theme'
 import preloaders from 'shared/components/workbench/preload.js'
+import Modal from 'shared/components/modal'
 
 // Views
 import Measurements from 'shared/components/workbench/measurements/index.js'
@@ -63,6 +64,7 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
   // State for gist
   const [gist, setGist, ready] = useLocalStorage(`${design.config.name}_gist`, defaultGist(design, app.locale))
   const [messages, setMessages] = useState([])
+  const [popup, setPopup] = useState(false)
 
   // If we don't have the required measurements,
   // force view to measurements
@@ -124,14 +126,16 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
   }
 
   // Props to pass down
-  const componentProps = { app, design, gist, updateGist, unsetGist, setGist, draft, feedback }
+  const componentProps = { app, design, gist, updateGist, unsetGist, setGist, draft, feedback, showInfo: setPopup }
   // Required props for layout
   const layoutProps = {
     app: app,
     noSearch: true,
     workbench: true,
-    AltMenu: <Menu {...componentProps }/>
+    AltMenu: <Menu {...componentProps }/>,
+    showInfo: setPopup,
   }
+  console.log(popup)
 
   // Layout to use
   const LayoutComponent = layout
@@ -145,6 +149,7 @@ const WorkbenchWrapper = ({ app, design, preload=false, from=false, layout=false
   return  <LayoutComponent {...layoutProps}>
             {messages}
             <Component {...componentProps} />
+            {popup && <Modal cancel={() => setPopup(false)}>{popup}</Modal>}
           </LayoutComponent>
 }
 

sites/shared/styles/svg-freesewing-draft.css

@@ -2,6 +2,7 @@ svg.freesewing.pattern {
 
   /* Don't let the SVG surpass the parent container */
   max-width: 100%;
+  max-height: 100%;
 
   /* Reset */
   path, circle { fill: none; stroke: none; }
@@ -25,6 +26,9 @@ svg.freesewing.pattern {
   .stroke-3xl { stroke-width: calc(var(--pattern-stroke-3xl) * var(--pattern-scale)); }
   .stroke-4xl { stroke-width: calc(var(--pattern-stroke-4xl) * var(--pattern-scale)); }
   .stroke-5xl { stroke-width: calc(var(--pattern-stroke-5xl) * var(--pattern-scale)); }
+  .stroke-6xl { stroke-width: calc(var(--pattern-stroke-6xl) * var(--pattern-scale)); }
+  .stroke-7xl { stroke-width: calc(var(--pattern-stroke-7xl) * var(--pattern-scale)); }
+  .stroke-8xl { stroke-width: calc(var(--pattern-stroke-8xl) * var(--pattern-scale)); }
 
   /* Stroke dasharray utility classes */
   .sa { stroke-dasharray: 1, 3; }

sites/shared/themes/dark.js

@@ -1,7 +1,8 @@
 const colors = require('tailwindcss/colors')
+const light = require('./light')
 
 module.exports = {
-  'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',
+  ...light, // Startr from defaults, so we don't miss anything
   'primary': colors.violet['700'],
   'primary-focus': colors.violet['600'],
   'primary-content': colors.violet['50'],
@@ -82,23 +83,4 @@ module.exports = {
   '--pattern-dev-5': colors.violet['500'],
   '--pattern-dev-6': colors.teal['500'],
   '--pattern-dev-7': colors.neutral['500'],
-
-  '--pattern-text-xs': '0.2rem',
-  '--pattern-text-sm': '0.3rem',
-  '--pattern-text': '0.4rem',
-  '--pattern-text-lg': '0.6rem',
-  '--pattern-text-xl': '0.8rem',
-  '--pattern-text-2xl': '1.5rem',
-  '--pattern-text-3xl': '2rem',
-  '--pattern-text-4xl': '3rem',
-
-  '--pattern-scale': '1',
-  '--pattern-stroke-xs': "0.2px",
-  '--pattern-stroke-sm': "0.4px",
-  '--pattern-stroke': "0.7px",
-  '--pattern-stroke-lg': "1.3px",
-  '--pattern-stroke-xl': "2px",
-  '--pattern-stroke-2xl': "4px",
-  '--pattern-stroke-3xl': "6px",
-  '--pattern-stroke-4xl': "8px",
 }

sites/shared/themes/hax0r.js

@@ -1,7 +1,9 @@
 const colors = require('tailwindcss/colors')
+const light = require('./light')
 
 const bg = '#002808'
 module.exports = {
+  ...light, // Startr from defaults, so we don't miss anything
   'fontFamily': `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;`,
   'primary': colors.lime['700'],
   'primary-focus': colors.lime['600'],

sites/shared/themes/lgbtq.js

@@ -1,4 +1,5 @@
 const colors = require('tailwindcss/colors')
+const light = require('./light')
 
 module.exports = {
   'fontFamily': '-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif',

sites/shared/themes/light.js

@@ -251,4 +251,10 @@ module.exports = {
   '--pattern-stroke-3xl': "6px",
   // Pattern 4xl stroke width
   '--pattern-stroke-4xl': "8px",
+  // Pattern 5xl stroke width
+  '--pattern-stroke-5xl': "12px",
+  // Pattern 6xl stroke width
+  '--pattern-stroke-6xl': "16px",
+  // Pattern 7xl stroke width
+  '--pattern-stroke-7xl': "20px",
 }

sites/shared/themes/trans.js

@@ -1,4 +1,5 @@
 const colors = require('tailwindcss/colors')
+const light = require('./light')
 
 const blue = '#77cbf9'
 const pink = '#ecadb9'