306 | Congratulations! You did it!
307 | 
308 | This page is intentionally ugly!
309 | Create some styles and start having fun!
310 |
311 | - Modify headings by creating a headings file:
312 | clarion add element headings
313 |
314 | - Modify lists by creating a lists file:
315 | clarion add element lists
316 |
317 |
318 | Here is some sweet, sweet dummy text to play with
319 | Bacon ipsum dolor amet ball tip hamburger adipisicing chicken prosciutto non. Shoulder venison quis, flank leberkas turducken dolor tenderloin nostrud. Ham strip steak swine boudin tempor. Shoulder doner mollit brisket. Cillum strip steak picanha kevin et culpa commodo lorem pastrami.
320 | Bacon ipsum
321 | Elit est ut prosciutto sausage spare ribs tenderloin pork loin cupidatat brisket dolore pancetta occaecat. Elit meatball leberkas burgdoggen ham hock beef ribs ut bresaola voluptate pork belly eu culpa t-bone esse pork loin. Quis corned beef minim eu velit excepteur. Quis consequat bacon corned beef boudin chicken anim sint labore kielbasa do ipsum sed. Frankfurter laborum turkey do brisket elit exercitation adipisicing doner irure jowl leberkas. Culpa flank kevin drumstick sunt porchetta kielbasa pancetta picanha ea dolor ad. Irure tongue in pork belly alcatra sirloin mollit reprehenderit tri-tip dolore.
322 | Tri-tip Meatball Pork Belly
323 | Id tri-tip meatball pork belly, mollit burgdoggen leberkas cupim. Do nostrud sirloin jerky capicola ham hock deserunt, spare ribs pork belly boudin culpa salami in duis. Biltong ut aute chuck nostrud drumstick short ribs et ham hock in lorem. Prosciutto exercitation salami in enim. Laborum shoulder ribeye kielbasa exercitation bacon officia ut alcatra rump pork turkey. Excepteur ut voluptate, qui labore est pork chop pastrami hamburger cupim laborum doner shank.
324 |
325 |
326 |
327 |
328 | `
329 | };
330 |
--------------------------------------------------------------------------------
/lib/data/styleContentData.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | exports.styleContent = [
4 | {
5 | format: "scss",
6 | styles: [
7 | {
8 | file: "00_Abstracts/_variables.scss",
9 | content: `// CONTAINERS
10 | $content-width: 600px !default;
11 |
12 | // FONTS
13 | $font-size-base: 16px !default;
14 |
15 | $fonts: (
16 | accent: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
17 | base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
18 | monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
19 | ) !default;
20 |
21 | $font-sizes: (
22 | xxs: 0.75rem, // 12px
23 | xs: 0.875rem, // 14px
24 | sm: 1rem, // 16px
25 | md: 1.25rem, // 30px
26 | lg: 1.5rem, // 24px
27 | xl: 2rem, // 32px
28 | xxl: 3rem // 48px
29 | ) !default;
30 |
31 | $line-height-base: 1.5 !default;
32 |
33 | // SPACING
34 |
35 | $spacing-sizes: (
36 | auto: auto,
37 | none: 0,
38 | 3xs: 0.0625rem, // 1px
39 | xxs: 0.125rem, // 2px
40 | xs: 0.25rem, // 4px
41 | sm: 0.5rem, // 8px
42 | md: 0.75rem, // 12px
43 | lg: 1rem, // 16px
44 | xl: 1.25rem, // 20px
45 | xxl: 2rem // 32px
46 | ) !default;
47 |
48 |
49 | // COLORS
50 |
51 | $theme-colors: (
52 | primary: #24598d,
53 | secondary: #117d47,
54 | success: #669c1f,
55 | info: #509BCE,
56 | warning: #B88A00,
57 | danger: #c70000,
58 | light: #ababab,
59 | dark: #545454
60 | ) !default;
61 |
62 | $color-variation: 8% !default;
63 |
64 |
65 | // MEDIA QUERIES
66 |
67 | $media-queries: (
68 | xl: 90rem, // 1440px
69 | lg: 75rem, // 1200px
70 | md: 62rem, // 992px
71 | sm: 48rem, // 768px
72 | xs: 30rem, // 480px
73 | xxs: 20rem, // 320px
74 | light-mode: light,
75 | dark-mode: dark,
76 | print: print
77 | ) !default;
78 |
79 |
80 | // Z-INDEX
81 |
82 | $z-indexes: (
83 | sub: -1,
84 | none: 0,
85 | xxs: 1,
86 | xs: 10,
87 | sm: 50,
88 | md: 100,
89 | lg: 200,
90 | xl: 500,
91 | trump: 99999
92 | ) !default;
93 |
94 |
95 | // BORDERS
96 |
97 | $border: (
98 | style: solid,
99 | size: 3xs, // from $spacing-sizes
100 | color: light lighter
101 | ) !default;
102 |
103 | $border-radiuses: (
104 | none: 0,
105 | sm: 0.25rem, // 4px
106 | md: 0.5rem, // 8px
107 | lg: 0.75rem, // 12px
108 | pill: 10rem,
109 | circle: 50%
110 | ) !default;
111 |
112 |
113 | // SHADOWS
114 |
115 | $shadows: (
116 | none: none,
117 | inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
118 | outline: "0 0 0 3px rgba(0, 0, 0, 0.5)",
119 | xs: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
120 | sm: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
121 | md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
122 | lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
123 | xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
124 | ) !default;
125 |
126 | // TRANSITIONS
127 |
128 | $transitions: (
129 | slow: .5s,
130 | med: .3s,
131 | fast: .1s
132 | ) !default;
133 | `
134 | },
135 | {
136 | file: '00_Abstracts/functions/_borders.scss',
137 | content: `@import '../variables';
138 | @import 'colors';
139 |
140 | @function default-border($setting) {
141 | @if map-has-key($border, $setting) {
142 | @return map-get($border, $setting);
143 | }
144 | @else {
145 | @error "Invalid default border value: '#{$setting}'.";
146 | }
147 | }
148 |
149 | @function border($style, $size, $color, $variant: base, $opacity: 1, $important: false) {
150 | @if ($important == true) {
151 | @return $style spacing($size) split-color-list($color, $variant, $opacity) !important;
152 | } @else {
153 | @return $style spacing($size) split-color-list($color, $variant, $opacity);
154 | }
155 | }
156 | `
157 | },
158 | {
159 | file: "00_Abstracts/functions/_colors.scss",
160 | content: `@import '../variables';
161 | @import 'color-contrast';
162 |
163 | @function build-pallet() {
164 | $result: ();
165 |
166 | @each $key, $value in $theme-colors {
167 | $group: ($key: ('base': $value,
168 | 'light': lighten($value, $color-variation),
169 | 'lighter': lighten($value, $color-variation * 2),
170 | 'lightest': lighten($value, $color-variation * 3),
171 | 'dark': darken($value, $color-variation),
172 | 'darker': darken($value, $color-variation * 2),
173 | 'darkest': darken($value, $color-variation * 3)));
174 |
175 | $result: map-merge($result, $group);
176 | }
177 |
178 | @return $result;
179 | }
180 |
181 | $color-pallette: build-pallet();
182 |
183 | /*
184 | GET COLOR
185 |
186 | usage:
187 | // for the base color
188 | color(primary);
189 |
190 | // for variations of a color
191 | color(primary, lighter);
192 | color(primary, light);
193 | color(primary, dark);
194 | color(primary, darker);
195 | */
196 | @function color($name: 'primary', $variant: 'base', $opacity: 1) {
197 | $color: null;
198 |
199 | $name: $name + unquote("");
200 |
201 | @if (type-of($variant) == 'number') {
202 | $opacity: $variant;
203 | $variant: 'base';
204 | }
205 |
206 | // Get the color name
207 | $color-name: map-get($color-pallette, $name);
208 |
209 | // Get the color variant
210 | @if $color-name or $name == 'black' or $name == 'white' {
211 | @if $name == 'black' {
212 | $color: black;
213 | } @else if $name == 'white' {
214 | $color: white;
215 | } @else {
216 | $color: map-get($color-name, $variant);
217 | }
218 |
219 | @if $color {
220 | @return rgba($color, $opacity);
221 | } @else {
222 | @error "Invalid color variation: '#{$name}', '#{$variant}'."
223 | }
224 | } @else {
225 | @error "Invalid color name: '#{$name}'."
226 | }
227 |
228 | @return $color;
229 | }
230 |
231 | /*
232 | GET CONTRASTING COLOR FOR TEXT ACCESSIBILITY (WCAG 2.0 AA+)
233 |
234 | usage:
235 | // text for the base color
236 | text-color(primary);
237 |
238 | // for variations of a color
239 | text-color(primary, lighter);
240 | text-color(primary, light);
241 | text-color(primary, dark);
242 | text-color(primary, darker);
243 | */
244 | @function text-color($name: 'primary', $variant: 'base', $opacity: 1) {
245 | $color: color($name, $variant, $opacity);
246 |
247 | @return get-contrast-color($color);
248 | }
249 |
250 | // Used for splitting up color blocks - ex: "primary dark 0.75"
251 | @function split-color-list($color, $variant: base, $opacity: 1) {
252 | @if (length($color) > 1) {
253 | $g-color: nth($color, 1);
254 | $g-variant: nth($color, 2);
255 | $g-opacity: 1;
256 |
257 | @if (length($color) > 2) {
258 | $g-opacity: nth($color, 3);
259 | }
260 |
261 | @return color($g-color, $g-variant, $g-opacity);
262 | } @else {
263 | @return color($color, $variant, $opacity);
264 | }
265 | }
266 | `
267 | },
268 | {
269 | file: "00_Abstracts/functions/_spacing.scss",
270 | content: `@import '../variables';
271 | @import 'strings';
272 |
273 | @function spacing($name, $important: false) {
274 | $prefix: "";
275 |
276 | // This enables negative values to be used.
277 | @if (str-contains($name, "-")) {
278 | $prefix: "-";
279 | $name: str-replace($name, "-", "");
280 | }
281 |
282 | @if map-has-key($spacing-sizes, $name) {
283 | @if ($important == true) {
284 | @return unquote($prefix + map-get($spacing-sizes, $name)) !important;
285 | } @else {
286 | @return unquote($prefix + map-get($spacing-sizes, $name));
287 | }
288 | }
289 | @else {
290 | @error "Invalid spacing size: '#{$name}'.";
291 | }
292 | }
293 | `
294 | },
295 | {
296 | file: "00_Abstracts/functions/_color-contrast.scss",
297 | content: `@import 'math';
298 |
299 | /*
300 | Adopted with gratitude from w3.org:
301 | https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
302 | */
303 |
304 | @function get-relative-luminance($color) {
305 | $color: $color / 255;
306 |
307 | @if ($color < 0.03928) {
308 | @return $color / 12.92
309 | }
310 |
311 | @return pow(($color + 0.055) / 1.055, 2.4);
312 | }
313 |
314 | @function get-luminance($color) {
315 | $red: get-relative-luminance(red($color));
316 | $green: get-relative-luminance(green($color));
317 | $blue: get-relative-luminance(blue($color));
318 |
319 | @return (.2126 * $red) + (.7152 * $green) + (.0722 * $blue);
320 | }
321 |
322 | @function get-contrast-ratio($backgroundColor, $foregroundColor) {
323 | $backgroundLuminance: get-luminance($backgroundColor) + .05;
324 | $foregroundLuminance: get-luminance($foregroundColor) + .05;
325 |
326 | @return max($backgroundLuminance, $foregroundLuminance) / min($backgroundLuminance, $foregroundLuminance);
327 | }
328 |
329 | @function get-contrast-color($color) {
330 | $lightContrast: get-contrast-ratio($color, white);
331 | $darkContrast: get-contrast-ratio($color, black);
332 |
333 | @if ($lightContrast > 4.5 or $darkContrast < 4.5) {
334 | @return white;
335 | }
336 |
337 | @return black;
338 | }
339 | `
340 | },
341 | {
342 | file: "00_Abstracts/functions/_math.scss",
343 | content: `@function pow($base, $exponent, $precision: 12) {
344 | @if (floor($exponent) !=$exponent) {
345 | $precision2: pow(10, $precision);
346 | $exponent: round($exponent * $precision2);
347 | $denominator: greatest-common-divisor($exponent, $precision2);
348 | @return nthRoot(pow($base, $exponent / $denominator), $precision2 / $denominator, $precision);
349 | }
350 |
351 | $value: $base;
352 |
353 | @if $exponent>1 {
354 | @for $i from 2 through $exponent {
355 | $value: $value * $base;
356 | }
357 | }
358 |
359 | @else if $exponent < 1 {
360 | @for $i from 0 through -$exponent {
361 | $value: $value / $base;
362 | }
363 | }
364 |
365 | @return $value;
366 | }
367 |
368 | @function greatest-common-divisor($a, $b) {
369 | @if ($b !=0) {
370 | @return greatest-common-divisor($b, $a % $b);
371 | }
372 |
373 | @else {
374 | @return abs($a);
375 | }
376 | }
377 |
378 | @function nthRoot($num, $n: 2, $precision: 12) {
379 | $x: 1;
380 |
381 | @for $i from 0 through $precision {
382 | $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)));
383 | }
384 |
385 | @return $x;
386 | }
387 | `
388 | },
389 | {
390 | file: "00_Abstracts/functions/_strings.scss",
391 | content: `@function str-replace($string, $search, $replace: '') {
392 | $index: str-index($string, $search);
393 |
394 | @if $index {
395 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
396 | }
397 |
398 | @return $string;
399 | }
400 |
401 | @function str-ends-with($string, $search) {
402 | @return str-slice(quote($string), (str-length($string) - str-length($search) + 1)) == $search;
403 | }
404 |
405 | @function str-contains($string, $search) {
406 | @return str-index(quote($string), $search) != null;
407 | }
408 | `
409 | },
410 | {
411 | file: "00_Abstracts/functions/_z-index.scss",
412 | content: `@import '../variables';
413 |
414 | @function z($name) {
415 | @if map-has-key($z-indexes, $name) {
416 | @return map-get($z-indexes, $name);
417 | }
418 | @else {
419 | @error "Invalid 'z' value: '#{$name}'.";
420 | }
421 | }
422 | `
423 | },
424 | {
425 | file: '00_Abstracts/mixins/_borders.scss',
426 | content: `@import '../functions/borders';
427 |
428 | @mixin border($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
429 | border: border($style, $size, $color, $variant, $opacity, $important);
430 | }
431 |
432 | @mixin border-t($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
433 | border-top: border($style, $size, $color, $variant, $opacity, $important);
434 | }
435 |
436 | @mixin border-b($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
437 | border-bottom: border($style, $size, $color, $variant, $opacity, $important);
438 | }
439 |
440 | @mixin border-l($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
441 | border-left: border($style, $size, $color, $variant, $opacity, $important);
442 | }
443 |
444 | @mixin border-r($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
445 | border-right: border($style, $size, $color, $variant, $opacity, $important);
446 | }
447 |
448 | @mixin border-x($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
449 | @include border-l($style, $size, $color, $variant, $opacity, $important);
450 | @include border-r($style, $size, $color, $variant, $opacity, $important);
451 | }
452 |
453 | @mixin border-y($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false) {
454 | @include border-t($style, $size, $color, $variant, $opacity, $important);
455 | @include border-b($style, $size, $color, $variant, $opacity, $important);
456 | }
457 | `
458 | },
459 | {
460 | file: "00_Abstracts/mixins/_border-radius.scss",
461 | content: `@import '../variables';
462 |
463 | @mixin radius($size, $important: false) {
464 | @include radius-t($size, $important);
465 | @include radius-b($size, $important);
466 | }
467 |
468 | @mixin radius-t($size, $important: false) {
469 | @include radius-tl($size, $important);
470 | @include radius-tr($size, $important);
471 | }
472 |
473 | @mixin radius-b($size, $important: false) {
474 | @include radius-bl($size, $important);
475 | @include radius-br($size, $important);
476 | }
477 |
478 | @mixin radius-l($size, $important: false) {
479 | @include radius-tl($size, $important);
480 | @include radius-bl($size, $important);
481 | }
482 |
483 | @mixin radius-r($size, $important: false) {
484 | @include radius-tr($size, $important);
485 | @include radius-br($size, $important);
486 | }
487 |
488 | @mixin radius-tl($size, $important: false) {
489 | @if map-has-key($border-radiuses, $size) {
490 | @if ($important == true) {
491 | border-top-left-radius: map-get($border-radiuses, $size) !important;
492 | } @else {
493 | border-top-left-radius: map-get($border-radiuses, $size);
494 | }
495 | }
496 | @else {
497 | @error "Invalid border-radius size: '#{$size}'.";
498 | }
499 | }
500 |
501 | @mixin radius-tr($size, $important: false) {
502 | @if map-has-key($border-radiuses, $size) {
503 | @if ($important == true) {
504 | border-top-right-radius: map-get($border-radiuses, $size) !important;
505 | } @else {
506 | border-top-right-radius: map-get($border-radiuses, $size);
507 | }
508 | }
509 | @else {
510 | @error "Invalid border-radius size: '#{$size}'.";
511 | }
512 | }
513 |
514 | @mixin radius-bl($size, $important: false) {
515 | @if map-has-key($border-radiuses, $size) {
516 | @if ($important == true) {
517 | border-bottom-left-radius: map-get($border-radiuses, $size) !important;
518 | } @else {
519 | border-bottom-left-radius: map-get($border-radiuses, $size);
520 | }
521 | }
522 | @else {
523 | @error "Invalid border-radius size: '#{$size}'.";
524 | }
525 | }
526 |
527 | @mixin radius-br($size, $important: false) {
528 | @if map-has-key($border-radiuses, $size) {
529 | @if ($important == true) {
530 | border-bottom-right-radius: map-get($border-radiuses, $size) !important;
531 | } @else {
532 | border-bottom-right-radius: map-get($border-radiuses, $size);
533 | }
534 | }
535 | @else {
536 | @error "Invalid border-radius size: '#{$size}'.";
537 | }
538 | }
539 | `
540 | },
541 | {
542 | file: "00_Abstracts/mixins/_media-queries.scss",
543 | content: `@import '../variables';
544 |
545 | /*
546 | MEDIA QUERY
547 |
548 | Usage: @include mq(sm) {}
549 | */
550 | @mixin mq($mq) {
551 | @if map-has-key($media-queries, $mq) {
552 | $mq-value: map-get($media-queries, $mq);
553 |
554 | @if ($mq-value == light or $mq-value == dark) {
555 | @media screen and (prefers-color-scheme: $mq-value) {
556 | @content;
557 | }
558 | } @else if ($mq-value == print) {
559 | @media print {
560 | @content;
561 | }
562 | } @else {
563 | @media screen and (max-width: ($mq-value - 1)) {
564 | @content;
565 | }
566 | }
567 | } @else {
568 | @error "Invalid media query: '#{$mq}'.";
569 | }
570 | }
571 | `
572 | },
573 | {
574 | file: "00_Abstracts/mixins/_display.scss",
575 | content: `@mixin full-width($important: false) {
576 | @if ($important == true) {
577 | position: relative !important;
578 | left: 50% !important;
579 | right: 50% !important;
580 | width: 100vw !important;
581 | margin-left: -50vw !important;
582 | margin-right: -50vw !important;
583 | max-width: 100vw !important;
584 | } @else {
585 | position: relative;
586 | left: 50%;
587 | right: 50%;
588 | width: 100vw;
589 | margin-left: -50vw;
590 | margin-right: -50vw;
591 | max-width: 100vw;
592 | }
593 | }
594 |
595 | @mixin full-height($important: false) {
596 | @if ($important == true) {
597 | position: fixed !important;
598 | top: 50% !important;
599 | bottom: 50% !important;
600 | height: 100vh !important;
601 | margin-top: -50vh !important;
602 | margin-bottom: -50vh !important;
603 | max-height: 100vh !important;
604 | } @else {
605 | position: fixed;
606 | top: 50%;
607 | bottom: 50%;
608 | height: 100vh;
609 | margin-top: -50vh;
610 | margin-bottom: -50vh;
611 | max-height: 100vh;
612 | }
613 | }
614 |
615 | @mixin full-screen($important: false) {
616 | @include full-width($important);
617 | @include full-height($important);
618 | }
619 |
620 | @mixin screen-reader-only {
621 | position: absolute !important;
622 | width: 1px !important;
623 | height: 1px !important;
624 | padding: 0 !important;
625 | margin: -1px !important;
626 | overflow: hidden !important;
627 | clip: rect(0, 0, 0, 0) !important;
628 | white-space: nowrap !important;
629 | border: 0 !important;
630 | }
631 | `
632 | },
633 | {
634 | file: "00_Abstracts/mixins/_font-sizes.scss",
635 | content: `@import '../variables';
636 |
637 | @mixin font-size($size, $important: false) {
638 | @if map-has-key($font-sizes, $size) {
639 | @if ($important == true) {
640 | font-size: map-get($font-sizes, $size) !important;
641 | } @else {
642 | font-size: map-get($font-sizes, $size);
643 | }
644 | }
645 | @else {
646 | @error "Invalid font size: '#{$size}'.";
647 | }
648 | }
649 | `
650 | },
651 | {
652 | file: "00_Abstracts/mixins/_font.scss",
653 | content: `@import '../variables';
654 |
655 | @mixin font($font: base, $important: false) {
656 | @if map-has-key($fonts, $font) {
657 | @if ($important == true) {
658 | font-family: unquote(map-get($fonts, $font)) !important;
659 | } @else {
660 | font-family: unquote(map-get($fonts, $font));
661 | }
662 | }
663 | @else {
664 | @error "Invalid shadow size: '#{$font}'.";
665 | }
666 | }
667 | `
668 | },
669 | {
670 | file: "00_Abstracts/mixins/_colors.scss",
671 | content: `@import '../functions/colors';
672 |
673 | @mixin bg-color($name: 'primary', $variant: 'base', $opacity: 1, $important: false) {
674 | @if ($important) {
675 | color: text-color($name, $variant, $opacity) !important;
676 | background-color: color($name, $variant, $opacity) !important;
677 | }
678 |
679 | @else {
680 | color: text-color($name, $variant, $opacity);
681 | background-color: color($name, $variant, $opacity);
682 | }
683 | }
684 | `
685 | },
686 | {
687 | file: "00_Abstracts/mixins/_hover.scss",
688 | content: `@mixin hover {
689 | &:hover {
690 | @content;
691 | }
692 | }
693 |
694 | @mixin hover-focus {
695 | &:hover,
696 | &:focus {
697 | @content;
698 | }
699 | }
700 |
701 | @mixin hover-focus-active {
702 | &:hover,
703 | &:focus,
704 | &:active {
705 | @content;
706 | }
707 | }
708 | `
709 | },
710 | {
711 | file: "00_Abstracts/mixins/_spacing.scss",
712 | content: `@import '../variables';
713 | @import '../functions/spacing';
714 |
715 | @mixin m($top, $right: $top, $bottom: $top, $left: $right, $important: false) {
716 | @include mt($top, $important);
717 | @include mb($bottom, $important);
718 | @include ml($left, $important);
719 | @include mr($right, $important);
720 | }
721 |
722 | @mixin mx($left, $right: $left, $important: false) {
723 | @include ml($left, $important);
724 | @include mr($right, $important);
725 | }
726 |
727 | @mixin my($top, $bottom: $top, $important: false) {
728 | @include mt($top, $important);
729 | @include mb($bottom, $important);
730 | }
731 |
732 | @mixin ml($size, $important: false) {
733 | margin-left: spacing($size);
734 | }
735 |
736 | @mixin mt($size, $important: false) {
737 | margin-top: spacing($size);
738 | }
739 |
740 | @mixin mr($size, $important: false) {
741 | margin-right: spacing($size);
742 | }
743 |
744 | @mixin mb($size, $important: false) {
745 | margin-bottom: spacing($size);
746 | }
747 |
748 | @mixin p($top, $right: $top, $bottom: $top, $left: $right, $important: false) {
749 | @include pt($top, $important);
750 | @include pb($bottom, $important);
751 | @include pl($left, $important);
752 | @include pr($right, $important);
753 | }
754 |
755 | @mixin px($left, $right: $left, $important: false) {
756 | @include pl($left, $important);
757 | @include pr($right, $important);
758 | }
759 |
760 | @mixin py($top, $bottom: $top, $important: false) {
761 | @include pt($top, $important);
762 | @include pb($bottom, $important);
763 | }
764 |
765 | @mixin pl($size, $important: false) {
766 | padding-left: spacing($size, $important);
767 | }
768 |
769 | @mixin pt($size, $important: false) {
770 | padding-top: spacing($size, $important);
771 | }
772 |
773 | @mixin pr($size, $important: false) {
774 | padding-right: spacing($size, $important);
775 | }
776 |
777 | @mixin pb($size, $important: false) {
778 | padding-bottom: spacing($size, $important);
779 | }
780 | `
781 | },
782 | {
783 | file: "00_Abstracts/mixins/_shadows.scss",
784 | content: `@import '../variables';
785 |
786 | @mixin shadow($size: sm, $important: false) {
787 | @if map-has-key($shadows, $size) {
788 | @if ($important == true) {
789 | box-shadow: unquote(map-get($shadows, $size)) !important;
790 | } @else {
791 | box-shadow: unquote(map-get($shadows, $size));
792 | }
793 | }
794 | @else {
795 | @error "Invalid shadow size: '#{$size}'.";
796 | }
797 | }
798 | `
799 | },
800 | {
801 | file: "00_Abstracts/mixins/_transitions.scss",
802 | content: `@import '../variables';
803 |
804 | @mixin transition-ease-in-out($speed: fast, $important: false) {
805 | @if map-has-key($transitions, $speed) {
806 | @if ($important == true) {
807 | transition: all map-get($transitions, $speed) ease-in-out !important;
808 | } @else {
809 | transition: all map-get($transitions, $speed) ease-in-out;
810 | }
811 | }
812 | @else {
813 | @error "Invalid transition speed: '#{$speed}'.";
814 | }
815 | }
816 | `
817 | },
818 | {
819 | file: "00_Abstracts/mixins/_z-index.scss",
820 | content: `@import '../variables';
821 |
822 | @mixin z-index($size, $important: false) {
823 | @if map-has-key($z-indexes, $size) {
824 | @if ($important == true) {
825 | z-index: map-get($z-indexes, $size) !important;
826 | }
827 | @else {
828 | z-index: map-get($z-indexes, $size);
829 | }
830 | }
831 | @else {
832 | @error "Invalid z-index: '#{$size}'.";
833 | }
834 | }
835 | `
836 | },
837 | {
838 | file: "00_Abstracts/index.scss",
839 | content: `@import 'variables';
840 | @import 'functions/colors';
841 | @import 'functions/math';
842 | @import 'functions/strings';
843 | @import 'functions/z-index';
844 | @import 'mixins/borders';
845 | @import 'mixins/border-radius';
846 | @import 'mixins/media-queries';
847 | @import 'mixins/colors';
848 | @import 'mixins/display';
849 | @import 'mixins/font';
850 | @import 'mixins/font-sizes';
851 | @import 'mixins/hover';
852 | @import 'mixins/shadows';
853 | @import 'mixins/spacing';
854 | @import 'mixins/transitions';
855 | @import 'mixins/z-index';
856 | `
857 | },
858 | {
859 | file: "01_Base/_base.scss",
860 | content: `@import '../00_Abstracts/index';
861 |
862 | html,
863 | body {
864 | font-size: $font-size-base;
865 | line-height: $line-height-base;
866 | @include font(base);
867 |
868 | main {
869 | max-width: $content-width;
870 | @include mx(auto);
871 | }
872 |
873 | code,
874 | pre {
875 | @include font(monospace);
876 | }
877 | }
878 | `
879 | },
880 | {
881 | file: "01_Base/index.scss",
882 | content: `@import 'base';`
883 | }
884 | ]
885 | },
886 | {
887 | format: "sass",
888 | styles: [
889 | {
890 | file: "00_Abstracts/_variables.sass",
891 | content: `// CONTAINERS
892 |
893 | $content-width: 600px !default
894 |
895 | // FONTS
896 |
897 | $font-size-base: 16px !default
898 |
899 | $fonts: (accent: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', base: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"', monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace') !default
900 |
901 | $font-sizes: ( xxs: 0.75rem, xs: 0.875rem, sm: 1rem, md: 1.25rem, lg: 1.5rem, xl: 2rem, xxl: 3rem) !default
902 |
903 | $line-height-base: 1.5 !default
904 |
905 | // SPACING
906 |
907 | $spacing-sizes: ( auto: auto, none: 0, 3xs: 0.0625rem, xxs: 0.125rem, xs: 0.25rem, sm: 0.5rem, md: 0.75rem, lg: 1rem, xl: 1.25rem, xxl: 2rem) !default
908 |
909 | // COLORS
910 |
911 | $theme-colors: (primary: #24598d, secondary: #117d47, success: #669c1f, info: #509BCE, warning: #B88A00, danger: #c70000, light: #ababab, dark: #545454) !default
912 |
913 | $color-variation: 8% !default
914 |
915 |
916 | // MEDIA-QUERIES
917 |
918 | $media-queries: (xl: 90rem, lg: 75rem, md: 62rem, sm: 48rem, xs: 30rem, xxs: 20rem, light-mode: light, dark-mode: dark, print: print) !default
919 |
920 | // Z-INDEX
921 |
922 | $z-indexes: (sub: -1, none: 0, xxs: 1, xs: 10, sm: 50, md: 100, lg: 200, xl: 500, trump: 99999) !default;
923 |
924 | // BORDERS
925 |
926 | $border: (style: solid, size: 3xs, color: light lighter) !default
927 |
928 | $border-radiuses: (none: 0, sm: 0.25rem, md: 0.5rem, lg: 0.75rem, pill: 10rem, circle: 50%) !default
929 |
930 | // SHADOWS
931 |
932 | $shadows: (none: none, inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)", outline: "0 0 0 3px rgba(0, 0, 0, 0.5)", xs: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", sm: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)") !default
933 |
934 | // TRANSITIONS
935 |
936 | $transitions: (slow: .5s, med: .3s, fast: .1s) !default
937 | `
938 | },
939 | {
940 | file: '00_Abstracts/functions/_borders.sass',
941 | content: `@import '../variables'
942 | @import 'colors'
943 |
944 | @function default-border($setting)
945 | @if map-has-key($border, $setting)
946 | @return map-get($border, $setting)
947 | @else
948 | @error "Invalid default border value: '#{$setting}'."
949 |
950 | @function border($style, $size, $color, $variant: base, $opacity: 1, $important: false)
951 | @if ($important == true)
952 | @return $style spacing($size) split-color-list($color, $variant, $opacity) !important
953 | @else
954 | @return $style spacing($size) split-color-list($color, $variant, $opacity)
955 | `
956 | },
957 | {
958 | file: "00_Abstracts/functions/_colors.sass",
959 | content: `@import '../variables'
960 |
961 | @function build-pallet()
962 | $result: ()
963 |
964 | @each $key, $value in $theme-colors
965 | $group: ($key: ('base': $value, 'light': lighten($value, $color-variation), 'lighter': lighten($value, $color-variation * 2), 'dark': darken($value, $color-variation), 'darker': darken($value, $color-variation * 2)))
966 | $result: map-merge($result, $group)
967 |
968 | @return $result
969 |
970 |
971 | $color-pallette: build-pallet()
972 |
973 | // GET COLOR
974 | //
975 | // usage:
976 | // // for the base color
977 | // color(primary)
978 | //
979 | // // for variations of a color
980 | // color(primary, lighter)
981 | // color(primary, light)
982 | // color(primary, dark)
983 | // color(primary, darker)
984 | //
985 | // // opacity can also be adjusted using a third (optional) parameter
986 | // color(primary, lighter, .25)
987 | @function color($name: 'primary', $variant: 'base', $opacity: 1)
988 | $color: null
989 |
990 | $name: $name + unquote("")
991 |
992 | @if (type-of($variant) == 'number')
993 | $opacity: $variant
994 | $variant: 'base'
995 |
996 | // Get the color name
997 | $color-name: map-get($color-pallette, $name)
998 |
999 | // Get the color variant
1000 | @if $color-name or $name == 'black' or $name == 'white'
1001 | @if $name == 'black'
1002 | $color: black
1003 | @else if $name == 'white'
1004 | $color: white
1005 | @else
1006 | $color: map-get($color-name, $variant)
1007 |
1008 | @if $color
1009 | @return rgba($color, $opacity)
1010 | @else
1011 | @error "Invalid color variation: '#{$name}', '#{$variant}'."
1012 | @else
1013 | @error "Invalid color name: '#{$name}'."
1014 |
1015 | @return $color
1016 |
1017 |
1018 | // GET CONTRASTING COLOR FOR TEXT ACCESSIBILITY (WCAG 2.0 AA+)
1019 | //
1020 | // usage:
1021 | // // text for the base color
1022 | // text-color(primary)
1023 | //
1024 | // // for variations of a color
1025 | // text-color(primary, lighter)
1026 | // text-color(primary, light)
1027 | // text-color(primary, dark)
1028 | // text-color(primary, darker)
1029 | @function text-color($name: 'primary', $variant: 'base', $opacity: 1)
1030 | $color: color($name, $variant, $opacity)
1031 |
1032 | @return get-contrast-color($color)
1033 | `
1034 | },
1035 | {
1036 | file: "00_Abstracts/functions/_color-contrast.sass",
1037 | content: `@import 'math'
1038 |
1039 | /*
1040 | Adopted with gratitude from w3.org:
1041 | https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
1042 | */
1043 |
1044 | @function get-relative-luminance($color)
1045 | $color: $color / 255
1046 |
1047 | @if ($color < 0.03928)
1048 | @return $color / 12.92
1049 |
1050 | @return pow(($color + 0.055) / 1.055, 2.4)
1051 |
1052 | @function get-luminance($color)
1053 | $red: get-relative-luminance(red($color))
1054 | $green: get-relative-luminance(green($color))
1055 | $blue: get-relative-luminance(blue($color))
1056 |
1057 | @return (.2126 * $red) + (.7152 * $green) + (.0722 * $blue)
1058 |
1059 | @function get-contrast-ratio($backgroundColor, $foregroundColor)
1060 | $backgroundLuminance: get-luminance($backgroundColor) + .05
1061 | $foregroundLuminance: get-luminance($foregroundColor) + .05
1062 |
1063 | @return max($backgroundLuminance, $foregroundLuminance) / min($backgroundLuminance, $foregroundLuminance)
1064 |
1065 | @function get-contrast-color($color)
1066 | $lightContrast: get-contrast-ratio($color, white)
1067 | $darkContrast: get-contrast-ratio($color, black)
1068 |
1069 | @if ($lightContrast > 4.5 or $darkContrast < 4.5)
1070 | @return white
1071 |
1072 | @return black
1073 |
1074 | // Used for splitting up color blocks - ex: "primary dark 0.75"
1075 | @function split-color-list($color, $variant: base, $opacity: 1)
1076 | @if (length($color) > 1)
1077 | $g-color: nth($color, 1)
1078 | $g-variant: nth($color, 2)
1079 | $g-opacity: 1
1080 |
1081 | @if (length($color) > 2)
1082 | $g-opacity: nth($color, 3)
1083 |
1084 | @return color($g-color, $g-variant, $g-opacity)
1085 | @else
1086 | @return color($color, $variant, $opacity);
1087 | `
1088 | },
1089 | {
1090 | file: "00_Abstracts/functions/_math.sass",
1091 | content: `@function pow($base, $exponent, $precision: 12)
1092 | @if (floor($exponent) !=$exponent)
1093 | $precision2: pow(10, $precision)
1094 | $exponent: round($exponent * $precision2)
1095 | $denominator: greatest-common-divisor($exponent, $precision2)
1096 | @return nthRoot(pow($base, $exponent / $denominator), $precision2 / $denominator, $precision)
1097 |
1098 | $value: $base
1099 |
1100 | @if $exponent>1
1101 | @for $i from 2 through $exponent
1102 | $value: $value * $base;
1103 | @else if $exponent < 1
1104 | @for $i from 0 through -$exponent
1105 | $value: $value / $base;
1106 |
1107 | @return $value
1108 |
1109 | @function greatest-common-divisor($a, $b)
1110 | @if ($b !=0)
1111 | @return greatest-common-divisor($b, $a % $b)
1112 | @else
1113 | @return abs($a)
1114 |
1115 | @function nthRoot($num, $n: 2, $precision: 12)
1116 | $x: 1
1117 |
1118 | @for $i from 0 through $precision
1119 | $x: 1 / $n * (($n - 1) * $x + ($num / pow($x, $n - 1)))
1120 |
1121 | @return $x
1122 | `
1123 | },
1124 | {
1125 | file: "00_Abstracts/functions/_strings.sass",
1126 | content: `@function str-replace($string, $search, $replace: '')
1127 | $index: str-index($string, $search)
1128 |
1129 | @if $index
1130 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
1131 |
1132 | @return $string;
1133 |
1134 | @function str-ends-with($string, $search)
1135 | @return str-slice(quote($string), (str-length($string) - str-length($search) + 1)) == $search
1136 |
1137 | @function str-contains($string, $search)
1138 | @return str-index(quote($string), $search) != null
1139 | `
1140 | },
1141 | {
1142 | file: "00_Abstracts/functions/_spacing.sass",
1143 | content: `@import '../variables'
1144 | @import 'strings'
1145 |
1146 | @function spacing($name, $important: flase)
1147 | $prefix: ""
1148 |
1149 | // This enables negative values to be used.
1150 | @if (str-contains($name, "-"))
1151 | $prefix: "-";
1152 | $name: str-replace($name, "-", "")
1153 |
1154 | @if map-has-key($spacing-sizes, $name)
1155 | @if ($important == true)
1156 | @return unquote($prefix + map-get($spacing-sizes, $name)) !important
1157 | @else
1158 | @return unquote($prefix + map-get($spacing-sizes, $name))
1159 | @else
1160 | @error "Invalid spacing size: '#{$name}'."
1161 | `
1162 | },
1163 | {
1164 | file: "00_Abstracts/functions/_z-index.sass",
1165 | content: `@import '../variables'
1166 |
1167 | @function z($name)
1168 | @if map-has-key($z-indexes, $name)
1169 | @return map-get($z-indexes, $name)
1170 | @else
1171 | @error "Invalid 'z' value: '#{$name}'."
1172 | `
1173 | },
1174 | {
1175 | file: "00_Abstracts/mixins/_border-radius.sass",
1176 | content: `@import '../variables';
1177 |
1178 | @mixin radius($size, $important: false)
1179 | @include radius-t($size, $important)
1180 | @include radius-b($size, $important)
1181 |
1182 | @mixin radius-t($size, $important: false)
1183 | @include radius-tl($size, $important)
1184 | @include radius-tr($size, $important)
1185 |
1186 | @mixin radius-b($size, $important: false)
1187 | @include radius-bl($size, $important)
1188 | @include radius-br($size, $important)
1189 |
1190 | @mixin radius-l($size, $important: false)
1191 | @include radius-tl($size, $important)
1192 | @include radius-bl($size, $important)
1193 |
1194 | @mixin radius-r($size, $important: false)
1195 | @include radius-tr($size, $important)
1196 | @include radius-br($size, $important)
1197 |
1198 | @mixin radius-tl($size, $important: false)
1199 | @if map-has-key($border-radiuses, $size)
1200 | @if ($important == true)
1201 | border-top-left-radius: map-get($border-radiuses, $size) !important
1202 | @else
1203 | border-top-left-radius: map-get($border-radiuses, $size)
1204 | @else
1205 | @error "Invalid border-radius size: '#{$size}'."
1206 |
1207 | @mixin radius-tr($size, $important: false)
1208 | @if map-has-key($border-radiuses, $size)
1209 | @if ($important == true)
1210 | border-top-right-radius: map-get($border-radiuses, $size) !important
1211 | @else
1212 | border-top-right-radius: map-get($border-radiuses, $size)
1213 | @else
1214 | @error "Invalid border-radius size: '#{$size}'."
1215 |
1216 | @mixin radius-bl($size, $important: false)
1217 | @if map-has-key($border-radiuses, $size)
1218 | @if ($important == true)
1219 | border-bottom-left-radius: map-get($border-radiuses, $size) !important
1220 | @else
1221 | border-bottom-left-radius: map-get($border-radiuses, $size)
1222 | @else
1223 | @error "Invalid border-radius size: '#{$size}'."
1224 |
1225 | @mixin radius-br($size, $important: false)
1226 | @if map-has-key($border-radiuses, $size)
1227 | @if ($important == true)
1228 | border-bottom-right-radius: map-get($border-radiuses, $size) !important
1229 | @else
1230 | border-bottom-right-radius: map-get($border-radiuses, $size)
1231 | @else
1232 | @error "Invalid border-radius size: '#{$size}'."
1233 | `
1234 | },
1235 | {
1236 | file: "00_Abstracts/mixins/_borders.sass",
1237 | content: `@import '../functions/borders';
1238 |
1239 | @mixin border($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1240 | border: border($style, $size, $color, $variant, $opacity, $important)
1241 |
1242 | @mixin border-t($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1243 | border-top: border($style, $size, $color, $variant, $opacity, $important);
1244 |
1245 | @mixin border-b($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1246 | border-bottom: border($style, $size, $color, $variant, $opacity, $important)
1247 |
1248 | @mixin border-l($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1249 | border-left: border($style, $size, $color, $variant, $opacity, $important)
1250 |
1251 | @mixin border-r($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1252 | border-right: border($style, $size, $color, $variant, $opacity, $important)
1253 |
1254 | @mixin border-x($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1255 | @include border-l($style, $size, $color, $variant, $opacity, $important)
1256 | @include border-r($style, $size, $color, $variant, $opacity, $important)
1257 |
1258 | @mixin border-y($style: default-border(style), $size: default-border(size), $color: default-border(color), $variant: base, $opacity: 1, $important: false)
1259 | @include border-t($style, $size, $color, $variant, $opacity, $important)
1260 | @include border-b($style, $size, $color, $variant, $opacity, $important)
1261 | `
1262 | },
1263 | {
1264 | file: "00_Abstracts/mixins/_media-queries.sass",
1265 | content: `@import '../variables'
1266 |
1267 | /*
1268 | MEDIA QUERY
1269 |
1270 | Usage: @include mq(sm) {}
1271 | */
1272 | @mixin mq($mq) {
1273 | @if map-has-key($media-queries, $mq)
1274 | $mq-value: map-get($media-queries, $mq)
1275 |
1276 | @if ($mq-value == light or $mq-value == dark)
1277 | @media screen and (prefers-color-scheme: $mq-value)
1278 | @content;
1279 | @else if ($mq-value == print)
1280 | @media print
1281 | @content
1282 | @else
1283 | @media screen and (max-width: ($mq-value - 1))
1284 | @content
1285 | @else
1286 | @error "Invalid media query: '#{$mq}'."
1287 | `
1288 | },
1289 | {
1290 | file: "00_Abstracts/mixins/_display.sass",
1291 | content: `@mixin full-width($important: false)
1292 | @if ($important == true)
1293 | position: relative !important
1294 | left: 50% !important
1295 | right: 50% !important
1296 | width: 100vw !important
1297 | margin-left: -50vw !important
1298 | margin-right: -50vw !important
1299 | max-width: 100vw !important
1300 | @else
1301 | position: relative
1302 | left: 50%
1303 | right: 50%
1304 | width: 100vw
1305 | margin-left: -50vw
1306 | margin-right: -50vw
1307 | max-width: 100vw
1308 |
1309 | @mixin full-height($important: false)
1310 | @if ($important == true)
1311 | position: fixed !important
1312 | top: 50% !important
1313 | bottom: 50% !important
1314 | height: 100vh !important
1315 | margin-top: -50vh !important
1316 | margin-bottom: -50vh !important
1317 | max-height: 100vh !important
1318 | @else
1319 | position: fixed
1320 | top: 50%
1321 | bottom: 50%
1322 | height: 100vh
1323 | margin-top: -50vh
1324 | margin-bottom: -50vh
1325 | max-height: 100vh
1326 |
1327 | @mixin full-screen($important: false)
1328 | @include full-width(true)
1329 | @include full-height(true)
1330 |
1331 | @mixin screen-reader-only
1332 | position: absolute !important
1333 | width: 1px !important
1334 | height: 1px !important
1335 | padding: 0 !important
1336 | margin: -1px !important
1337 | overflow: hidden !important
1338 | clip: rect(0, 0, 0, 0) !important
1339 | white-space: nowrap !important
1340 | border: 0 !important
1341 | `
1342 | },
1343 | {
1344 | file: "00_Abstracts/mixins/_font-sizes.sass",
1345 | content: `@import '../variables'
1346 |
1347 | @mixin font-size($size)
1348 | @if map-has-key($font-sizes, $size)
1349 | @if ($important == true)
1350 | font-size: map-get($font-sizes, $size) !important
1351 | @else
1352 | font-size: map-get($font-sizes, $size)
1353 | @else
1354 | @error "Invalid font size: '#{$size}'."
1355 | `
1356 | },
1357 | {
1358 | file: "00_Abstracts/mixins/_font.sass",
1359 | content: `@import '../variables';
1360 |
1361 | @mixin font($font: base, $important: false)
1362 | @if map-has-key($fonts, $font)
1363 | @if ($important == true)
1364 | font-family: unquote(map-get($fonts, $font)) !important;
1365 | @else
1366 | font-family: unquote(map-get($fonts, $font));
1367 | @else
1368 | @error "Invalid shadow size: '#{$font}'.";
1369 | `
1370 | },
1371 | {
1372 | file: "00_Abstracts/mixins/_colors.sass",
1373 | content: `@import '../functions/colors';
1374 |
1375 | @mixin bg-color($name: 'primary', $variant: 'base', $opacity: 1, $important: false)
1376 | @if ($important)
1377 | color: text-color($name, $variant, $opacity) !important
1378 | background-color: color($name, $variant, $opacity) !important
1379 |
1380 | @else
1381 | color: text-color($name, $variant, $opacity);
1382 | background-color: color($name, $variant, $opacity);
1383 | `
1384 | },
1385 | {
1386 | file: "00_Abstracts/mixins/_hover.sass",
1387 | content: `@mixin hover
1388 | &:hover
1389 | @content
1390 |
1391 | @mixin hover-focus
1392 | &:hover,
1393 | &:focus
1394 | @content
1395 |
1396 | @mixin hover-focus-active
1397 | &:hover,
1398 | &:focus,
1399 | &:active
1400 | @content
1401 | `
1402 | },
1403 | {
1404 | file: "00_Abstracts/mixins/_spacing.sass",
1405 | content: `@import '../variables';
1406 | @import '../functions/spacing';
1407 |
1408 | @mixin m($top, $right: $top, $bottom: $top, $left: $right, $important: false)
1409 | @include mt($top, $important)
1410 | @include mb($bottom, $important)
1411 | @include ml($left, $important)
1412 | @include mr($right, $important)
1413 |
1414 | @mixin mx($left, $right: $left, $important: false)
1415 | @include ml($left, $important)
1416 | @include mr($right, $important)
1417 |
1418 | @mixin my($top, $bottom: $top, $important: false)
1419 | @include mt($top, $important)
1420 | @include mb($bottom, $important)
1421 |
1422 | @mixin ml($size, $important: false)
1423 | margin-left: spacing($size)
1424 |
1425 | @mixin mt($size, $important: false)
1426 | margin-top: spacing($size)
1427 |
1428 | @mixin mr($size, $important: false)
1429 | margin-right: spacing($size)
1430 |
1431 | @mixin mb($size, $important: false)
1432 | margin-bottom: spacing($size)
1433 |
1434 | @mixin p($top, $right: $top, $bottom: $top, $left: $right, $important: false)
1435 | @include pt($top, $important)
1436 | @include pb($bottom, $important)
1437 | @include pl($left, $important)
1438 | @include pr($right, $important)
1439 |
1440 | @mixin px($left, $right: $left, $important: false)
1441 | @include pl($left, $important)
1442 | @include pr($right, $important)
1443 |
1444 | @mixin py($top, $bottom: $top, $important: false)
1445 | @include pt($top, $important)
1446 | @include pb($bottom, $important)
1447 |
1448 | @mixin pl($size, $important: false)
1449 | padding-left: spacing($size, $important)
1450 |
1451 | @mixin pt($size, $important: false)
1452 | padding-top: spacing($size, $important)
1453 |
1454 | @mixin pr($size, $important: false)
1455 | padding-right: spacing($size, $important)
1456 |
1457 | @mixin pb($size, $important: false)
1458 | padding-bottom: spacing($size, $important)
1459 | `
1460 | },
1461 | {
1462 | file: "00_Abstracts/mixins/_shadows.sass",
1463 | content: `@import '../variables'
1464 |
1465 | @mixin shadow($size: sm)
1466 | @if map-has-key($shadows, $size)
1467 | @if ($important == true)
1468 | box-shadow: unquote(map-get($shadows, $size)) !important
1469 | @else
1470 | box-shadow: unquote(map-get($shadows, $size))
1471 | @else
1472 | @error "Invalid shadow size: '#{$size}'."
1473 | `
1474 | },
1475 | {
1476 | file: "00_Abstracts/mixins/_transitions.sass",
1477 | content: `@import '../variables'
1478 |
1479 | @mixin transition-ease-in-out($speed: fast)
1480 | @if map-has-key($transitions, $speed)
1481 | @if ($important == true)
1482 | transition: all map-get($transitions, $speed) ease-in-out !important
1483 | @else
1484 | transition: all map-get($transitions, $speed) ease-in-out
1485 | @else
1486 | @error "Invalid transition speed: '#{$speed}'."
1487 | `
1488 | },
1489 | {
1490 | file: "00_Abstracts/mixins/_z-index.sass",
1491 | content: `@import '../variables';
1492 |
1493 | @mixin z-index($size, $important: false)
1494 | @if map-has-key($z-indexes, $size)
1495 | @if ($important == true)
1496 | z-index: map-get($z-indexes, $size) !important
1497 | @else
1498 | z-index: map-get($z-indexes, $size)
1499 | @else
1500 | @error "Invalid z-index: '#{$size}'."
1501 | `
1502 | },
1503 | {
1504 | file: "00_Abstracts/index.sass",
1505 | content: `@import 'variables'
1506 | @import 'functions/colors'
1507 | @import 'functions/math'
1508 | @import 'functions/strings'
1509 | @import 'functions/z-index'
1510 | @import 'mixins/border-radius'
1511 | @import 'mixins/borders'
1512 | @import 'mixins/media-queries'
1513 | @import 'mixins/colors'
1514 | @import 'mixins/display'
1515 | @import 'mixins/font'
1516 | @import 'mixins/font-sizes'
1517 | @import 'mixins/hover'
1518 | @import 'mixins/shadows'
1519 | @import 'mixins/spacing'
1520 | @import 'mixins/transitions'
1521 | @import 'mixins/z-index'
1522 | `
1523 | },
1524 | {
1525 | file: "01_Base/_base.sass",
1526 | content: `@import '../00_Abstracts/index';
1527 |
1528 | html,
1529 | body
1530 | font-size: $font-size-base
1531 | line-height: $line-height-base
1532 | @include font(base)
1533 |
1534 | main
1535 | max-width: $content-width
1536 | @include mx(auto)
1537 |
1538 | code,
1539 | pre
1540 | @include font(monospace)
1541 | `
1542 | },
1543 | {
1544 | file: "01_Base/_index.sass",
1545 | content: `@import 'base'`
1546 | }
1547 | ]
1548 | },
1549 | {
1550 | format: "less",
1551 | styles: []
1552 | }
1553 | ];
1554 |
--------------------------------------------------------------------------------
/lib/services/configService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3 | return new (P || (P = Promise))(function (resolve, reject) {
4 | function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5 | function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6 | function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
7 | step((generator = generator.apply(thisArg, _arguments || [])).next());
8 | });
9 | };
10 | Object.defineProperty(exports, "__esModule", { value: true });
11 | const inquirer_1 = require("inquirer");
12 | const projectData_1 = require("../data/projectData");
13 | const fileService_1 = require("../services/fileService");
14 | const logService_1 = require("./logService");
15 | class ConfigService {
16 | constructor() {
17 | this._fileService = new fileService_1.FileService();
18 | this._logger = new logService_1.LogService();
19 | this._configFileName = 'clarion-config.json';
20 | }
21 | getConfigData() {
22 | if (this._fileService.fileExists('./' + this._configFileName)) {
23 | let config = this._fileService.readFile('./' + this._configFileName);
24 | return JSON.parse(config);
25 | }
26 | return projectData_1.projectData.clarionConfig;
27 | }
28 | updateConfigInfo() {
29 | return __awaiter(this, void 0, void 0, function* () {
30 | let responses = yield this.promptUserInput();
31 | let config = this.updateConfigData(responses);
32 | this._fileService.saveFile(this._configFileName, JSON.stringify(config, null, '\t'));
33 | });
34 | }
35 | updateConfigData(responses) {
36 | return {
37 | paths: {
38 | styles: responses.stylePath || './src',
39 | },
40 | format: {
41 | styles: responses.styleFormat || 'scss',
42 | },
43 | addToManifest: responses.addToManifest === true,
44 | importAbstracts: responses.importAbstracts === true
45 | };
46 | }
47 | promptUserInput() {
48 | return __awaiter(this, void 0, void 0, function* () {
49 | let questions = [
50 | {
51 | type: "input",
52 | name: "stylePath",
53 | message: "What is the path to your styles directory?",
54 | default: "./src",
55 | validate: value => value.length > 0 || "This questions is required."
56 | },
57 | {
58 | type: "input",
59 | name: "styleFormat",
60 | message: "What format are your styles in?",
61 | default: "scss",
62 | validate: value => value.length > 0 || "Project Name is required."
63 | },
64 | {
65 | type: "confirm",
66 | name: "addToManifest",
67 | message: "Would you like a reference to your new style sheets to automatically be added to the directory manifest (it's very convenient)?",
68 | default: "y"
69 | },
70 | {
71 | type: "confirm",
72 | name: "importAbstracts",
73 | message: "Would you like a reference to your abstracts to automatically be added to your new style sheets (again, it's very convenient)?",
74 | default: "y"
75 | }
76 | ];
77 | return yield inquirer_1.prompt(questions);
78 | ;
79 | });
80 | }
81 | }
82 | exports.ConfigService = ConfigService;
83 |
--------------------------------------------------------------------------------
/lib/services/directoryService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const inquirer_1 = require("inquirer");
4 | const path = require("path");
5 | const fs = require("fs");
6 | const projectData_1 = require("../data/projectData");
7 | const logService_1 = require("./logService");
8 | const configService_1 = require("./configService");
9 | class DirectoryService {
10 | constructor() {
11 | this._logger = new logService_1.LogService();
12 | this._configService = new configService_1.ConfigService();
13 | this._config = this._configService.getConfigData();
14 | }
15 | createDirectory(pathName) {
16 | try {
17 | pathName = pathName.replace('//', '/');
18 | fs.mkdirSync(pathName);
19 | this._logger.success(`Created directory: ${pathName}`);
20 | }
21 | catch (error) {
22 | this._logger.error(`There was an error creating this directory: ${pathName} \n${error}`);
23 | }
24 | }
25 | directoryExists(directoryName) {
26 | try {
27 | return fs.statSync(directoryName).isDirectory();
28 | }
29 | catch (err) {
30 | return false;
31 | }
32 | }
33 | promptForMissingDirectory() {
34 | let directories = this.getAllStyleDirectories();
35 | let question = {
36 | type: "list",
37 | name: "directory",
38 | message: "We could not find the directory you entered. Are you looking for one of these?",
39 | choices: directories
40 | };
41 | if (directories.length === 0) {
42 | this._logger.warning("Please specify a directory.");
43 | }
44 | else {
45 | return inquirer_1.prompt(question).then(answers => answers.directory);
46 | }
47 | }
48 | findDirectoryByName(directoryName) {
49 | let directory;
50 | let directories = this.getAllStyleDirectories();
51 | if (directoryName) {
52 | directory = directories.find(x => {
53 | return x.toLowerCase().includes(directoryName.toLowerCase());
54 | });
55 | }
56 | return directory;
57 | }
58 | findDirectory(directory) {
59 | let pathToDirectory = '';
60 | if (this.directoryExists(`./${directory}`)) {
61 | pathToDirectory = `./${directory}`;
62 | }
63 | else {
64 | projectData_1.projectData.styleTypes.forEach(x => {
65 | let proposedPath = path.resolve(this.findStyleRootDirectory(), directory);
66 | if (this.directoryExists(proposedPath)) {
67 | pathToDirectory = proposedPath;
68 | }
69 | });
70 | }
71 | return pathToDirectory;
72 | }
73 | getAllStyleDirectories() {
74 | let config = this._configService.getConfigData();
75 | let stylePath = this.findStyleRootDirectory();
76 | let directories = this.getDirectoriesInDirectory(stylePath);
77 | return directories;
78 | }
79 | findStyleRootDirectory() {
80 | let stylesDirectory = '';
81 | projectData_1.projectData.styleTypes.forEach(type => {
82 | let proposedPath = path.resolve('./', this._config.paths.styles, type);
83 | if (this.directoryExists(proposedPath)) {
84 | stylesDirectory = proposedPath;
85 | }
86 | });
87 | return stylesDirectory;
88 | }
89 | getDirectoriesInDirectory(path) {
90 | return fs.readdirSync(path).filter(function (file) {
91 | return fs.statSync(path + '/' + file).isDirectory();
92 | });
93 | }
94 | }
95 | exports.DirectoryService = DirectoryService;
96 |
--------------------------------------------------------------------------------
/lib/services/fileService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const path = require("path");
4 | const fs = require("fs");
5 | const program = require("commander");
6 | const logService_1 = require("./logService");
7 | class FileService {
8 | constructor() {
9 | this._logger = new logService_1.LogService();
10 | }
11 | saveFile(destination, content) {
12 | try {
13 | destination = destination.replace('//', '/');
14 | fs.writeFileSync(destination, content);
15 | this._logger.success(`Saved file: ${destination}`);
16 | }
17 | catch (error) {
18 | this._logger.error(`There was an error saving this file: ${destination} \n${error}`);
19 | }
20 | }
21 | fileExists(fileName) {
22 | try {
23 | return fs.statSync(fileName).isFile();
24 | }
25 | catch (err) {
26 | return false;
27 | }
28 | }
29 | getManifestFile(filePath) {
30 | if (!filePath)
31 | return undefined;
32 | let manifestFile;
33 | fs.readdirSync(filePath).forEach(file => {
34 | if (file.startsWith('index') || file.startsWith('style'))
35 | manifestFile = file;
36 | });
37 | return manifestFile;
38 | }
39 | getFileExtension(directory) {
40 | switch (true) {
41 | case program.sass:
42 | return '.sass';
43 | case program.scss:
44 | return '.scss';
45 | case program.less:
46 | return '.less';
47 | default:
48 | return this.getManifestExtension(directory);
49 | }
50 | }
51 | getManifestExtension(directory) {
52 | let manifest = this.getManifestFile(directory);
53 | return manifest ? path.extname(manifest).replace('.', '') : 'scss';
54 | }
55 | addFileToManifest(fileName, manifestFile, sort) {
56 | if (sort) {
57 | var data = fs.readFileSync(manifestFile, 'utf8');
58 | let importStatements = data.split('\n').filter(String);
59 | importStatements.push(fileName);
60 | importStatements.sort();
61 | this.saveFile(manifestFile, importStatements.join('\n'));
62 | }
63 | else {
64 | fs.appendFileSync(manifestFile, `@import '${fileName}';\n`);
65 | }
66 | this._logger.success(`Saved file: ${fileName} was added to the manifest.`);
67 | }
68 | removeFileFromManifest(fileName, manifestFile) {
69 | let importStatements = this.readFile(manifestFile).split('\n');
70 | let fileIndex = importStatements.indexOf(`@import '${fileName}';`);
71 | if (fileIndex < 0) {
72 | this._logger.warning('File to be removed was not found in your manifest.');
73 | }
74 | else {
75 | importStatements.splice(fileIndex, 1);
76 | let formattedImportStatements = importStatements.join('\n');
77 | this.saveFile(manifestFile, formattedImportStatements);
78 | }
79 | }
80 | removeFile(filePath) {
81 | try {
82 | if (this.fileExists(filePath)) {
83 | fs.unlinkSync(filePath);
84 | this._logger.success(`File removed: ${filePath}`);
85 | }
86 | else {
87 | this._logger.warning(filePath + ' was not found');
88 | }
89 | }
90 | catch (error) {
91 | this._logger.error(`There was an error removing this file: ${filePath} \n${error}`);
92 | }
93 | }
94 | readFile(filePath) {
95 | return this.fileExists(filePath) ? fs.readFileSync(filePath).toString() : '';
96 | }
97 | getStyleFormat(extension) {
98 | return extension.replace('.', '') === 'less' ? 'less' : 'sass';
99 | }
100 | getImportExtension(extension) {
101 | return `${extension !== 'sass' && extension !== 'scss' ? '.' + extension : ''}${extension === 'sass' ? '\'' : '\';'}`;
102 | }
103 | }
104 | exports.FileService = FileService;
105 |
--------------------------------------------------------------------------------
/lib/services/logService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const chalk_1 = require("chalk");
4 | class LogService {
5 | log(message) {
6 | console.log(message);
7 | }
8 | error(message) {
9 | console.log(chalk_1.default.red(message));
10 | }
11 | warning(message) {
12 | console.log(chalk_1.default.yellow(message));
13 | }
14 | success(message) {
15 | console.log(chalk_1.default.green(message));
16 | }
17 | info(message) {
18 | console.log(chalk_1.default.blue(message));
19 | }
20 | }
21 | exports.LogService = LogService;
22 |
--------------------------------------------------------------------------------
/lib/services/projectService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const fileService_1 = require("../services/fileService");
4 | const projectData_1 = require("../data/projectData");
5 | const newProject_1 = require("../data/newProject");
6 | class ProjectDataService {
7 | constructor(_pipeline, _styleFormat) {
8 | this._pipeline = _pipeline;
9 | this._styleFormat = _styleFormat;
10 | this._fileService = new fileService_1.FileService();
11 | this._projectTypeData = this.getProjectTypeData();
12 | }
13 | getProjectData(projectName) {
14 | if (this._pipeline !== newProject_1.newProject.options.pipeline.parcel)
15 | this.createBundleConfigurationFile(projectName);
16 | if (this._pipeline !== newProject_1.newProject.options.pipeline.grunt)
17 | this.createPostCssConfig(projectName);
18 | return {
19 | devDependencies: this.getProjectDependencies(),
20 | projectCommands: this._projectTypeData.npmCommands
21 | };
22 | }
23 | getHtmlTemplate(cssPath, jsPath) {
24 | return projectData_1.projectData.indexHtml
25 | .replace(/%%cssDir%%/g, cssPath)
26 | .replace(/%%jsDir%%/g, jsPath);
27 | }
28 | createBundleConfigurationFile(projectName) {
29 | let rootPath = './' + projectName;
30 | this._fileService.saveFile(rootPath + '/' + this._projectTypeData.configFile, this.getConfigFileContents());
31 | }
32 | createPostCssConfig(projectName) {
33 | let content = 'module.exports = ' + JSON.stringify(projectData_1.projectData.postCssConfig, null, '\t');
34 | this._fileService.saveFile(`./${projectName}/postcss.config.js`, content);
35 | }
36 | getConfigFileContents() {
37 | let extension = this._fileService.getFileExtension(null).replace('.', '');
38 | let styleFormat = extension === 'less' ? 'less' : 'sass';
39 | return this.updateConfigTemplateWithProjectData(extension, styleFormat);
40 | }
41 | updateConfigTemplateWithProjectData(extension, styleFormat) {
42 | let contents = this._projectTypeData.configContents
43 | .replace(/%%styleFormat%%/g, styleFormat)
44 | .replace(/%%extension%%/g, extension);
45 | if (this._pipeline === 'Grunt') {
46 | if (styleFormat === 'less') {
47 | contents = contents.replace(/grunt-less/g, 'grunt-contrib-less');
48 | }
49 | if (styleFormat === 'sass') {
50 | contents = 'const sass = require("node-sass");\n\n' + contents;
51 | contents = contents.replace(/sass: {\n/g, 'sass: {\n\t\t\toptions: {\n\t\t\t\timplementation: sass,\n\t\t\t\tsourceMap: true\n\t\t\t},\n');
52 | }
53 | }
54 | if (this._pipeline === 'Webpack') {
55 | if (styleFormat === 'less') {
56 | contents = contents.replace('(scss|sass)', 'less');
57 | }
58 | }
59 | return contents;
60 | }
61 | getProjectDependencies() {
62 | let dependencies = this._projectTypeData.devDependencies;
63 | return dependencies.concat(this._styleFormat === newProject_1.newProject.options.styleFormat.less ? this._projectTypeData.lessDependencies : this._projectTypeData.sassDependencies);
64 | }
65 | getProjectTypeData() {
66 | switch (true) {
67 | case this._pipeline === newProject_1.newProject.options.pipeline.grunt:
68 | return projectData_1.projectData.grunt;
69 | case this._pipeline === newProject_1.newProject.options.pipeline.gulp:
70 | return projectData_1.projectData.gulp;
71 | case this._pipeline === newProject_1.newProject.options.pipeline.parcel:
72 | return projectData_1.projectData.parcel;
73 | default:
74 | return projectData_1.projectData.webpack;
75 | }
76 | }
77 | }
78 | exports.ProjectDataService = ProjectDataService;
79 |
--------------------------------------------------------------------------------
/lib/services/shellService.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const child_process_1 = require("child_process");
4 | const logService_1 = require("./logService");
5 | class ShellService {
6 | constructor() {
7 | this._logger = new logService_1.LogService();
8 | }
9 | executeCommand(command) {
10 | try {
11 | this._logger.info('Installing your dependencies... (This may take a minute.)');
12 | child_process_1.execSync(command);
13 | }
14 | catch (error) {
15 | this._logger.error('There was a problem installing your dependencies.');
16 | this._logger.error(error);
17 | return;
18 | }
19 | this._logger.warning(`Your command '${command}' was successfully executed.`);
20 | }
21 | installNPMDependencies(projectName, packages, devDependency = false) {
22 | let dependencyType = devDependency ? "-D" : "-S";
23 | let command = `cd ./${projectName} && npm install ${dependencyType} ${packages.join(' ')}`;
24 | this.executeCommand(command);
25 | }
26 | }
27 | exports.ShellService = ShellService;
28 |
--------------------------------------------------------------------------------
/lib/taskManager.js:
--------------------------------------------------------------------------------
1 | // import { INewProject, NewProject } from "./commands/new";
2 | // import { IAdd, Add } from "./commands/add";
3 | // import { IRemove, Remove } from "./commands/remove";
4 | // import { IConfig, Config } from "./commands/config";
5 | // import { ILogService, LogService } from "./services/logService";
6 | // export interface ITaskService {
7 | // processUserAction(commands: string[]);
8 | // }
9 | // export class TaskService implements ITaskService {
10 | // _logService: ILogService = new LogService();
11 | // async processUserAction(commands: string[]) {
12 | // let action = commands[0];
13 | // if (action) {
14 | // switch (action.toLowerCase()) {
15 | // case 'new':
16 | // let newProject: INewProject = new NewProject();
17 | // // newProject.init();
18 | // break;
19 | // case 'add':
20 | // let add: IAdd = new Add();
21 | // // add.addNewFile();
22 | // break;
23 | // case 'remove':
24 | // let remove: IRemove = new Remove();
25 | // // remove.removeFile();
26 | // break;
27 | // case 'config':
28 | // let config: IConfig = new Config();
29 | // config.updateConfig();
30 | // break;
31 | // default:
32 | // this._logService.warning(`${commands[0]} is not a recognized command.`);
33 | // break;
34 | // }
35 | // } else {
36 | // this._logService.warning('Please enter a valid command. Try "clarion --help" for more information.');
37 | // }
38 | // }
39 | // }
40 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "clarion",
3 | "version": "3.9.0",
4 | "description": "A CSS and Design System Framework for rapidly building applications.",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "mocha -r ts-node/register tests/**/*.ts",
8 | "update": "tsc && npm i -g",
9 | "deploy": "tsc && npm publish"
10 | },
11 | "author": "Burton Smith 