freesewing/plugins/plugin-theme/src/css.mjs

export const paperless = `
/* Paperless grid */
svg.freesewing path.grid {
  fill: none;
  stroke: #555;
  stroke-width: 0.3;
}
svg.freesewing path.gridline {
  stroke: #555;
  stroke-width: 0.2;
}
svg.freesewing path.gridline-lg {
  stroke: #777;
  stroke-width: 0.2;
  stroke-dasharray: 1.5,1.5;
}
svg.freesewing path.gridline-sm {
  stroke: #999;
  stroke-width: 0.1;
}
svg.freesewing path.gridline-xs {
  stroke: #999;
  stroke-width: 0.1;
  stroke-dasharray: 0.5,0.5;
}
svg.freesewing path.gridbox {
  fill: url(#grid);
}`
export const sample = `
/* Sample classes */
svg.freesewing path.sample {
  stroke-width: 0.75
}
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 colors = {
  fabric: '#212121',
  lining: '#10b981',
  interfacing: '#a3a3a3',
  canvas: '#d97706',
  various: '#ef4444',
  note: '#8b5cf6',
  mark: '#3b82f6',
  contrast: '#ec4899',
}

/**
 * generate a stylesheet
 * scale: the scale of the markings
 * stripped: should nested declarations be stripped out? Necessary for svgToPdfkit
 * */
export const buildStylesheet = (scale, stripped) => `
  ${!stripped ? '/* Reset */' : ''}
  ${!stripped ? 'svg.freesewing ' : ''}path,
  ${!stripped ? 'svg.freesewing ' : ''}circle,
  ${!stripped ? 'svg.freesewing ' : ''}rect {
    fill: none;
    stroke: none;
  }

  ${!stripped ? '/* Defaults */' : ''}
  ${!stripped ? 'svg.freesewing ' : ''}path,
  ${!stripped ? 'svg.freesewing ' : ''}circle {
    stroke: #000;
    stroke-opacity: 1;
    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: ${colors.fabric};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.lining {
    stroke-width: ${round(0.6 * scale)};
    stroke: ${colors.lining};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.interfacing {
    stroke-width: ${round(0.6 * scale)};
    stroke: ${colors.interfacing};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.canvas {
    stroke-width: ${round(0.6 * scale)};
    stroke: ${colors.canvas};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.various {
    stroke-width: ${round(0.6 * scale)};
    stroke: ${colors.various};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.note {
    stroke-width: ${round(0.4 * scale)};
    stroke: ${colors.note};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.mark {
    stroke-width: ${round(0.4 * scale)};
    stroke: ${colors.mark};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.contrast {
    stroke-width: ${round(0.8 * scale)};
    stroke: ${colors.contrast};
  }

  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xs {
    stroke-width: ${round(0.1 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-sm {
    stroke-width: ${round(0.2 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-lg {
    stroke-width: ${round(0.6 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xl {
    stroke-width: ${round(1 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-xxl,
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-2xl {
    stroke-width: ${round(2 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-3xl {
    stroke-width: ${round(3 * scale)};
  }
  ${!stripped ? 'svg.freesewing ' : ''}.stroke-4xl {
    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-dasharray: 15, 1.5, 1, 1.5;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.dotted {
    stroke-dasharray: 0.4, 0.8;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.dashed {
    stroke-dasharray: 1, 1.5;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.lashed {
    stroke-dasharray: 6, 6;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.hidden {
    stroke: none;
    fill: none;
  }
  ${!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;
  }

  ${!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;
    fill: #000;
    text-anchor: start;
    font-weight: 200;
    dominant-baseline: ideographic;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-xs {
    font-size: ${round(3 * scale)}px;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-sm {
    font-size: ${round(4 * scale)}px;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-lg {
    font-size: ${round(7 * scale)}px;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-xl {
    font-size: ${round(9 * scale)}px;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-xxl {
    font-size: ${round(12 * scale)}px;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.text-4xl {
    font-size: ${round(36 * scale)}px;
  }

  ${!stripped ? 'svg.freesewing ' : ''}.center {
    text-anchor: middle;
  }
  ${!stripped ? 'svg.freesewing ' : ''}.baseline-center {
    alignment-baseline: central;
    dominant-baseline: central;
  }

  ${!stripped ? 'svg.freesewing ' : ''}.right {
    text-anchor: end;
  }

  ${!stripped ? '/* Bartack */' : ''}
  ${!stripped ? 'svg.freesewing ' : ''}path.bartack {
    stroke-width: ${round(2 * scale)};
    stroke: #fd7e14;
    stroke-linecap: butt;
  }
`