mod-base 1.0.0

package/src/styles/icons/_mixin-stroke-md.scss

@@ -0,0 +1,6 @@
+@mixin icon-stroke-md {
+	-moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
+	-webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+	font: normal normal normal 14px/1 modicons-stroke-md;
+	text-rendering: auto;
+}

package/src/styles/icons/_mixin-stroke.scss

@@ -0,0 +1,6 @@
+@mixin icon-stroke {
+	-moz-osx-font-smoothing: grayscale; // sass-lint:disable-line no-vendor-prefixes
+	-webkit-font-smoothing: antialiased; // sass-lint:disable-line no-vendor-prefixes
+	font: normal normal normal 14px/1 modicons-stroke;
+	text-rendering: auto;
+}

package/src/styles/icons/_stroke-md.scss

@@ -0,0 +1,6 @@
+// Stroke Icons
+$icons-folder: '../fonts/modstyle-icons' !default;
+
+@import './font-face-stroke-md';
+@import './icon-classes-stroke-md';
+@import './mixin-stroke-md';

package/src/styles/icons/_stroke.scss

@@ -0,0 +1,6 @@
+// Stroke Icons
+$icons-folder: '../fonts/modstyle-icons' !default;
+
+@import './font-face-stroke';
+@import './icon-classes-stroke';
+@import './mixin-stroke';

package/src/styles/icons/index.scss

@@ -0,0 +1,4 @@
+@import 'basics';
+@import 'fill';
+@import 'stroke';
+@import 'stroke-md';

package/src/styles/templates/_dark-mode.scss

@@ -0,0 +1,346 @@
+$background-color: null;
+$text-color: null;
+$theme: null;
+$value-background: null;
+$box-shadow-color: null;
+$background-img-brightness: null;
+$img-filter: null;
+$bbb-img-filter: null;
+$color-button: null;
+
+$contact-us-blue-light: #8498E7;
+
+@mixin dark-mode($background: $color-charcoal7, $foreground: $color-ivory1, $accent-color: $color-blue6, $color-btn: $color-orange6) {
+	// Theme global variables if required to use after including the mixin
+	$background-color: $background !global;
+	$text-color: $foreground !global;
+	$theme: $accent-color !global;
+	$value-background: rgba($accent-color, .7) !global;
+	$box-shadow-color: rgba($foreground,  20%) !global;
+	$background-img-brightness: brightness(75%) !global;
+	$button-saturation: saturate(70%) !global;
+	$img-filter: invert(1) hue-rotate(180deg) !global;
+	$bbb-img-filter: grayscale(1) invert(1) !global;
+	$color-button: $color-btn !global;
+
+	// Most common selectors list
+	$selectors: '.header,.step__title,.form,.form-radio label,.form-input,.form-input:focus,.progress-bar__content,.progress-bar__text,.progress-bar__percentage,.partners,.guarantee,.guarantee__text,.information,.information__header::before,.modal-content,.modal-content .icon-close,.matched-steps,.form--inverted .loader,.form-groups,.step__windowtype label,.form-control,.form-group__label,.step__overview,.progress-bar__title,.checkbox,#tcpa-copy,body .modal-body ul,body .modal-body p,.modal-body ul,.modal-body p,.modal-body .contact-us .step__list a,.form-group__tooltip-message,.form__qualify--step span,.form-group__city-state,.hero__background, .modal-body table tr';
+
+	@media (prefers-color-scheme: dark){
+		body[data-color-scheme="system"] {
+			color-scheme: dark;
+			color: $text-color;
+			background-color: $background-color;
+
+			// Default styling for most common selectors/sections start
+			#{$selectors} {
+				color: $foreground;
+			}
+
+			// Change background color of listed selectors
+			#{$selectors} {
+				background-color: $background;
+			}
+
+			.toggle-wrapper {
+				color: $foreground;
+			}
+
+			.secure-text {
+				color: $color-charcoal2;
+			}
+
+			.step__supertitle {
+				background-color: $accent-color;
+			}
+
+			.value {
+				background-color: $value-background;
+			}
+
+			.progress-bar {
+				&__background {
+					background-color: lighten($background-color, 15%);
+				}
+			}
+
+			.form {
+				border: 0;
+
+				&--inverted {
+					box-shadow:  0 2px 4px $box-shadow-color;
+				}
+
+				&-group {
+
+					&:not(.has-error) {
+						.form-input,
+						.form-radio label {
+							border-color: $color-charcoal3;
+						}
+
+						.form-input {
+							&:focus {
+								border-color: $color-charcoal1;
+							}
+						}
+					}
+
+					&__tooltip-message {
+						color: $color-ivory6;
+						border-color: $color-charcoal5;
+						box-shadow: 0 4px 8px rgba($color-ivory6,  10%);
+
+						&::after {
+							border-bottom-color: $background;
+						}
+
+						&::before {
+							border-bottom-color: $color-charcoal5;
+						}
+
+					}
+				}
+
+				&__bbb-logo {
+					filter: $bbb-img-filter;
+				}
+			}
+
+			.hero__background-image {
+				filter: $background-img-brightness;
+			}
+
+			.btn {
+				&-primary,
+				&-next {
+					background-color: $color-btn;
+
+					&:hover {
+						background-color: darken($color-btn, 5%);
+					}
+				}
+			}
+
+			.matched {
+				background-color: $color-charcoal8;
+
+				&__title {
+					color: $foreground;
+				}
+
+				&__subtitle,
+				.item__text {
+					color: $color-ivory3;
+				}
+
+				&-steps {
+					background-color: $background;
+				}
+			}
+
+			.modal {
+				&-backdrop {
+					opacity: .8;
+				}
+
+				&-body {
+					a {
+						color: lighten(#3678ba, 15%);
+						&:hover {
+							color: lighten(#3678ba, 25%);
+							background-color: transparent;
+						}
+					}
+
+					caption {
+						background: $color-black !important;
+					}
+
+					table, tr, th, td {
+						border-color: $color-ivory6;
+					}
+
+					th {
+						color: $text-color;
+						background-color: darken($background, 8%);
+					}
+
+					table.data-subject-requests tr:hover{
+						background-color: darken($color-yellow7, 5%);
+					}
+				}
+			}
+
+			.reviews {
+				&-card {
+					background-color: $background;
+					border-color: $color-charcoal4;
+					box-shadow: 0px 8px 16px 0px rgba($color-charcoal2, 10%);
+					color: $foreground;
+
+					&__avatar img {
+						filter: unset;
+					}
+				}
+			}
+
+			.matched,
+			.unmatched {
+				border-color: $color-charcoal4;
+			}
+
+			.footer {
+				background-color: $color-charcoal8;
+
+				&__bbb {
+					filter: $bbb-img-filter;
+				}
+
+				&__links,
+				&__head-link,
+				&__copyright,
+				&__captcha-disclosure {
+					color: $foreground;
+				}
+
+				&__links li a,
+				&__head-link a {
+					color: $foreground !important;
+
+					&:visited {
+						color: $foreground !important;
+					}
+
+					&:active,
+					&:hover,
+					&:focus {
+						color: $color-charcoal3 !important;
+					}
+				}
+
+				&__captcha-disclosure {
+					a {
+						color: $color-blue3 !important;
+
+						&:visited {
+							color: $color-blue3 !important;
+						}
+
+						&:active,
+						&:hover,
+						&:focus {
+							color: $color-blue5 !important;
+						}
+					}
+				}
+			}
+
+			/* Contact Us Modal Form Overwrite */
+			.contact-us {
+				.step {
+					&__header-number {
+						background-color: darken($background, 8%);
+					}
+
+					&__header-text {
+						background-color: lighten($background, 8%);
+					}
+				}
+
+				.form-group {
+					label {
+						color: $foreground;
+					}
+				}
+
+				legend {
+					border-bottom: 0;
+					color: $foreground;
+				}
+
+				.field {
+					border-color: $color-charcoal3;
+
+					input:checked {
+						+ label {
+							&::before {
+								background-color: $contact-us-blue-light;
+								color: $background;
+							}
+						}
+					}
+
+					&:hover {
+						background-color: rgba($color-white, .2);
+						border-color: $foreground;
+					}
+
+					&:focus-within {
+						outline-color: $color-white;
+					}
+				}
+
+				.form-control {
+					border-color: $color-charcoal3;
+
+					&:hover,
+					&:focus {
+						border-color: $foreground;
+					}
+
+					&:focus {
+						background-color: rgba($color-white, .2);
+					}
+				}
+
+				.btn-back {
+					border-color: $foreground;
+					color: $foreground;
+
+					&:hover,
+					&:focus {
+						background-color: transparent;
+						border-color: $contact-us-blue-light;
+						color: $contact-us-blue-light;
+					}
+				}
+
+				.btn-submit {
+					border-color: $contact-us-blue-light;
+					color: $contact-us-blue-light;
+
+					&:hover,
+					&:focus {
+						background-color: $contact-us-blue-light;
+						color: $background;
+					}
+				}
+			}
+
+			/* Need to overwrite inline styles of double submission block */
+			.duplicate-submission {
+				background-color: $background-color !important;
+				color: $text-color !important;
+
+				& * {
+					color: $text-color !important;
+				}
+			}
+
+			@include breakpoint-phone {
+				.hero--full {
+					background-color: $background;
+				}
+
+				.form {
+					&--inverted {
+						box-shadow: none;
+					}
+				}
+			}
+			// To load additional site-level style blocks
+			@content;
+		}
+	}
+}