Skip to content
This repository was archived by the owner on Apr 2, 2025. It is now read-only.

Commit 08a99e4

Browse files
joostdecockjoostdecock
committed
feat(nextjs): Added pattern styling
1 parent b3dc673 commit 08a99e4

File tree

8 files changed

+333
-2
lines changed

8 files changed

+333
-2
lines changed

‎packages/freesewing.dev/pages/_app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'tailwindcss/tailwind.css'
22
import 'shared/css/style.css'
33
import 'shared/css/prism.css'
4+
import 'shared/css/draft.scss'
45

56
function MyApp({ Component, pageProps }) {
67
return <Component {...pageProps} />

‎packages/shared/components/core/example/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import examples from '@freesewing/examples'
2-
//import rendertest from '@freesewing/rendertest'
2+
import rendertest from '@freesewing/rendertest'
33
//import tutorial from '@freesewing/tutorial'
44
import Draft from '@freesewing/components/Draft'
55

@@ -17,7 +17,7 @@ const Example = ({
1717

1818
const patterns = {
1919
examples,
20-
//rendertest,
20+
rendertest,
2121
//tutorial
2222
}
2323
settings = {

‎packages/shared/css/draft.scss

Lines changed: 272 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,272 @@
1+
svg.freesewing.draft {
2+
max-width: 100%;
3+
/* Reset */
4+
path,
5+
circle {
6+
fill: none;
7+
stroke: none;
8+
}
9+
10+
/* Defaults */
11+
path,
12+
circle {
13+
stroke-opacity: 1;
14+
stroke-width: 0.7;
15+
stroke-linecap: round;
16+
stroke-linejoin: round;
17+
}
18+
19+
/* Stroke classes */
20+
.stroke-xs {
21+
stroke-width: 0.1;
22+
}
23+
.stroke-sm {
24+
stroke-width: 0.4;
25+
}
26+
.stroke-lg {
27+
stroke-width: 1.3;
28+
}
29+
.stroke-xl {
30+
stroke-width: 2;
31+
}
32+
.stroke-xxl {
33+
stroke-width: 4;
34+
}
35+
36+
.sa {
37+
stroke-dasharray: 1, 3;
38+
}
39+
.help {
40+
stroke-width: 0.6;
41+
stroke-dasharray: 15, 5, 2, 5;
42+
}
43+
.dotted {
44+
stroke-dasharray: 0.5, 1;
45+
}
46+
.dashed {
47+
stroke-dasharray: 2, 2;
48+
}
49+
.lashed {
50+
stroke-dasharray: 8, 3;
51+
}
52+
.hidden {
53+
stroke: none !important;
54+
fill: none !important;
55+
}
56+
57+
/* Text */
58+
text {
59+
font-size: 6px;
60+
text-anchor: start;
61+
font-weight: 400;
62+
dominant-baseline: ideographic;
63+
}
64+
.text-xs {
65+
font-size: 4px;
66+
}
67+
.text-sm {
68+
font-size: 5px;
69+
}
70+
.text-l {
71+
font-size: 8px;
72+
}
73+
.text-xl {
74+
font-size: 10px;
75+
}
76+
.text-xxl {
77+
font-size: 13px;
78+
}
79+
80+
.center {
81+
text-anchor: middle;
82+
}
83+
.right {
84+
text-anchor: end;
85+
}
86+
87+
.scribble {
88+
/* FIXME: Is this still used ? */
89+
}
90+
91+
/* Plugins */
92+
text.title-nr {
93+
font-size: 32px;
94+
font-weight: 700;
95+
stroke: none;
96+
}
97+
/* New style for sampled sizes */
98+
path.size-3XS,
99+
path.size-2XS,
100+
path.size-XS,
101+
path.size-S,
102+
path.size-M {
103+
stroke-width: 0.5;
104+
stroke-dasharray: 0.25 0.75;
105+
}
106+
path.made-to-measure,
107+
path.size-L,
108+
path.size-XL,
109+
path.size-2XL,
110+
path.size-3XL,
111+
path.size-4XL {
112+
stroke-width: 0.5;
113+
}
114+
}
115+
116+
svg.freesewing.draft text {
117+
fill: currentColor;
118+
}
119+
svg.freesewing.draft {
120+
/* Stroke classes */
121+
path,
122+
circle,
123+
.fabric {
124+
stroke: var(--pattern-fabric);
125+
}
126+
.lining {
127+
stroke: var(--pattern-lining);
128+
}
129+
.interfacing {
130+
stroke: var(--pattern-interfacing);
131+
}
132+
.canvas {
133+
stroke: var(--pattern-canvas);
134+
}
135+
.various {
136+
stroke: var(--pattern-various);
137+
}
138+
.mark {
139+
stroke: var(--pattern-mark);
140+
}
141+
.contrast {
142+
stroke: var(--pattern-contrast);
143+
}
144+
.note {
145+
stroke: var(--pattern-note);
146+
}
147+
/* Fill classes */
148+
.fill-fabric {
149+
fill: var(--pattern-fabric);
150+
}
151+
.fill-lining {
152+
fill: var(--pattern-lining);
153+
}
154+
.fill-interfacing {
155+
fill: var(--pattern-interfacing);
156+
}
157+
.fill-canvas {
158+
fill: var(--pattern-canvas);
159+
}
160+
.fill-various {
161+
fill: var(--pattern-various);
162+
}
163+
.fill-mark {
164+
fill: var(--pattern-mark);
165+
}
166+
.fill-contrast {
167+
fill: var(--pattern-contrast);
168+
}
169+
.fill-note {
170+
fill: var(--pattern-note);
171+
}
172+
.fill-bg {
173+
fill: var(--pattern-bg);
174+
}
175+
path.sample-focus {
176+
/* FIXME: This is not themed */
177+
fill: #000;
178+
}
179+
/* scalebox plugin */
180+
path.scalebox.metric {
181+
stroke: none;
182+
stroke: var(--pattern-fabric);
183+
}
184+
path.scalebox.imperial {
185+
stroke: none;
186+
stroke: var(--pattern-fabric);
187+
}
188+
path.bartack {
189+
stroke: var(--pattern-fabric);
190+
}
191+
path.logo {
192+
fill: currentColor;
193+
stroke: none;
194+
}
195+
/* New style for sampled sizes */
196+
/* FIXME: These are not themed */
197+
path.made-to-measure {
198+
stroke: #212529;
199+
}
200+
path.size-3XS {
201+
}
202+
path.size-2XS {
203+
}
204+
path.size-XS {
205+
}
206+
path.size-S {
207+
}
208+
path.size-M {
209+
}
210+
path.size-L {
211+
}
212+
path.size-XL {
213+
}
214+
path.size-2XL {
215+
}
216+
path.size-3XL {
217+
}
218+
path.size-4XL {
219+
}
220+
}
221+
222+
/* SVG defs (snippets) are in the shadow DOM */
223+
g.snippet.notch > circle,
224+
g.snippet.button > circle,
225+
g.snippet.buttonhole > path {
226+
color: var(--pattern-mark);
227+
fill: var(--pattern-mark);
228+
}
229+
g.snippet.bnotch > circle,
230+
g.snippet.bnotch > path {
231+
color: var(--pattern-note);
232+
fill: none;
233+
fill: var(--pattern-mark);
234+
}
235+
/* Same for paperless grid, also in shadow DOM */
236+
rect.grid {
237+
stroke-width: 1;
238+
stroke: currentColor;
239+
}
240+
path.gridline {
241+
stroke-linecap: butt;
242+
stroke-width: 0.3 !important;
243+
stroke-dasharray: none;
244+
}
245+
path.gridline.sm {
246+
stroke-width: 0.15 !important;
247+
}
248+
path.gridline.xs {
249+
stroke-width: 0.1 !important;
250+
}
251+
path.gridline.metric.sm {
252+
stroke-dasharray: 3 1;
253+
}
254+
path.gridline.metric.xs {
255+
stroke-dasharray: 1 1;
256+
}
257+
path.gridline.imperial {
258+
stroke-dasharray: 5 5;
259+
}
260+
path.gridline.imperial.sm {
261+
stroke-dasharray: 2 2;
262+
}
263+
.light {
264+
rect.grid,
265+
path.gridline {
266+
}
267+
}
268+
.dark {
269+
rect.grid,
270+
path.gridline {
271+
}
272+
}

‎packages/shared/themes/bureaucrats.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ module.exports = {
3434
'--rounded-box': '2px',
3535
'--rounded-btn': '2px',
3636

37+
'--pattern-fabric': colors.trueGray['700'],
38+
'--pattern-lining': colors.emerald['500'],
39+
'--pattern-interfacing': colors.trueGray['400'],
40+
'--pattern-canvas': colors.amber['600'],
41+
'--pattern-various': colors.red['500'],
42+
'--pattern-mark': colors.blue['500'],
43+
'--pattern-contrast': colors.pink['500'],
44+
'--pattern-note': colors.violet['500'],
45+
3746
".mdx.prose a" : {
3847
color: colors.blue['600'],
3948
'text-decoration': 'underline',

‎packages/shared/themes/dark.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,14 @@ module.exports = {
3030
'success': colors.green['500'],
3131
'warning': colors.amber['500'],
3232
'error': colors.red['500'],
33+
34+
'--pattern-fabric': colors.trueGray['300'],
35+
'--pattern-lining': colors.emerald['700'],
36+
'--pattern-interfacing': colors.trueGray['500'],
37+
'--pattern-canvas': colors.amber['700'],
38+
'--pattern-various': colors.red['700'],
39+
'--pattern-mark': colors.blue['700'],
40+
'--pattern-contrast': colors.pink['600'],
41+
'--pattern-note': colors.violet['600'],
3342
}
3443
}

‎packages/shared/themes/hax0r.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ module.exports = {
3333

3434
'--rounded-btn': '0',
3535

36+
'--pattern-fabric': colors.trueGray['700'],
37+
'--pattern-lining': colors.emerald['500'],
38+
'--pattern-interfacing': colors.trueGray['400'],
39+
'--pattern-canvas': colors.amber['600'],
40+
'--pattern-various': colors.red['500'],
41+
'--pattern-mark': colors.blue['500'],
42+
'--pattern-contrast': colors.pink['500'],
43+
'--pattern-note': colors.violet['500'],
44+
3645
".mdx.prose a" : {
3746
color: colors.lime['600'],
3847
'text-decoration': 'underline',

‎packages/shared/themes/kindergarten.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,15 @@ module.exports = {
3333

3434
'--rounded-btn': '10rem',
3535

36+
'--pattern-fabric': colors.trueGray['700'],
37+
'--pattern-lining': colors.emerald['500'],
38+
'--pattern-interfacing': colors.trueGray['400'],
39+
'--pattern-canvas': colors.amber['600'],
40+
'--pattern-various': colors.red['500'],
41+
'--pattern-mark': colors.blue['500'],
42+
'--pattern-contrast': colors.pink['500'],
43+
'--pattern-note': colors.violet['500'],
44+
3645
".mdx.prose a" : {
3746
color: colors.fuchsia['600'],
3847
'text-decoration': 'none',

‎packages/shared/themes/light.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -120,6 +120,28 @@ module.exports = {
120120
// focus ring offset size for button and inputs
121121
'--focus-ring-offset': '2px',
122122

123+
/* FREESEWING PATTERN COLORS
124+
*
125+
* These are variables to style FreeSewing SVG output (drafts, examples, and so on)
126+
*/
127+
128+
// Color for the main fabric
129+
'--pattern-fabric': colors.trueGray['700'],
130+
// Color for lining fabric
131+
'--pattern-lining': colors.emerald['500'],
132+
// Color for interfacing
133+
'--pattern-interfacing': colors.trueGray['400'],
134+
// Color for canvas
135+
'--pattern-canvas': colors.amber['600'],
136+
// Color for various fabric types
137+
'--pattern-various': colors.red['500'],
138+
// Color for marking things on a pattern
139+
'--pattern-mark': colors.blue['500'],
140+
// Color to provide contrast on a pattern
141+
'--pattern-contrast': colors.pink['500'],
142+
// Color for noting things on a pattern
143+
'--pattern-note': colors.violet['500'],
144+
123145
/* ADVANCED
124146
*
125147
* You can override CSS this way, but ask yourself: why?

0 commit comments

Comments
 (0)