mod-base 1.0.0

package/src/fonts/modstyle-icons/modicons-stroke-md/style.css

@@ -0,0 +1,51 @@
+@font-face {
+  font-family: 'modicons-stroke-md';
+  src:  url('fonts/modicons-stroke-md.eot?kgna1i');
+  src:  url('fonts/modicons-stroke-md.eot?kgna1i#iefix') format('embedded-opentype'),
+    url('fonts/modicons-stroke-md.ttf?kgna1i') format('truetype'),
+    url('fonts/modicons-stroke-md.woff?kgna1i') format('woff'),
+    url('fonts/modicons-stroke-md.svg?kgna1i#modicons-stroke-md') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-stroke-md-"], [class*=" icon-stroke-md-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'modicons-stroke-md' !important;
+  speak: never;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-stroke-md-door:before {
+  content: "\e900";
+  color: #545253;
+}
+.icon-stroke-md-hvac:before {
+  content: "\e901";
+  color: #545253;
+}
+.icon-stroke-md-roofing:before {
+  content: "\e902";
+  color: #545253;
+}
+.icon-stroke-md-siding:before {
+  content: "\e903";
+  color: #545253;
+}
+.icon-stroke-md-solar:before {
+  content: "\e904";
+  color: #545253;
+}
+.icon-stroke-md-window:before {
+  content: "\e905";
+  color: #545253;
+}

package/src/styles/base/_breakpoint-mixins.scss

@@ -0,0 +1,30 @@
+// Mobile first breakpoint mixins
+@mixin breakpoint-sm {
+	@include media-min-width(500px) {
+		@content;
+	}
+}
+
+@mixin breakpoint-md {
+	@include media-min-width(768px) {
+		@content;
+	}
+}
+
+@mixin breakpoint-lg {
+	@include media-min-width(992px) {
+		@content;
+	}
+}
+
+@mixin breakpoint-xl {
+	@include media-min-width(12000px) {
+		@content;
+	}
+}
+
+@mixin breakpoint-xxl {
+	@include media-min-width(1440px) {
+		@content;
+	}
+}

package/src/styles/base/_colors.scss

@@ -0,0 +1,115 @@
+/**
+ * Base colors
+ */
+
+// Black & White
+$color-white: #FFF; // @body-bg
+$color-black: #000;
+
+// Red
+$color-red1: #FAE2DD;
+$color-red2: #F6C6BC;
+$color-red3: #F1A99A;
+$color-red4: #ED8D79;
+$color-red5: #E97158; // @brand-warning
+$color-red6: #BA5A46;
+$color-red7: #8B4334;
+$color-red8: #5D2D23;
+$color-red9: #2E1611;
+
+// Orange
+$color-orange1: #FDE9D1;
+$color-orange2: #FBD3A4;
+$color-orange3: #F9BE77;
+$color-orange4: #F7A84A;
+$color-orange5: #F6931D; // @btn-primary-color
+$color-orange6: #C47517;
+$color-orange7: #935811;
+$color-orange8: #623A0B;
+$color-orange9: #311D05;
+
+// Yellow
+$color-yellow1: #FEF2DB;
+$color-yellow2: #FEE6B7;
+$color-yellow3: #FED993;
+$color-yellow4: #FECD6F;
+$color-yellow5: #FEC14B;
+$color-yellow6: #CB9A3C;
+$color-yellow7: #98732D;
+$color-yellow8: #654D1E;
+$color-yellow9: #32260F;
+
+// Green
+$color-green1: #ECF1DD;
+$color-green2: #D9E4BB;
+$color-green3: #C6D69A;
+$color-green4: #B3C978;
+$color-green5: #A0BC57; // @brand-success
+$color-green6: #809645;
+$color-green7: #607034;
+$color-green8: #404B22;
+$color-green9: #202511;
+
+// Blue
+$color-blue0: #F3F9FA;
+$color-blue1: #E2F0F2;
+$color-blue2: #C5E2E6;
+$color-blue3: #A8D3DA;
+$color-blue4: #8BC5CE;
+$color-blue5: #6EB7C2; // @brand-primary && @btn-deafult-bg
+$color-blue6: #58929B;
+$color-blue7: #426D74;
+$color-blue8: #2C494D;
+$color-blue9: #162426;
+
+// Purple
+$color-purple1: #EEEDF7;
+$color-purple2: #DDDBEF;
+$color-purple3: #CCCAE7;
+$color-purple4: #BBB8DF;
+$color-purple5: #A7A5C6;
+$color-purple6: #8885AC;
+$color-purple7: #666481;
+$color-purple8: #444256;
+$color-purple9: #22212B;
+
+// Charcoal
+$color-charcoal1: #DCDCDC; // @gray-lighter
+$color-charcoal2: #BAB9BA; // @gray-light
+$color-charcoal3: #989797;
+$color-charcoal4: #767475;
+$color-charcoal5: #545253; // @gray && @brand-info
+$color-charcoal6: #434142;
+$color-charcoal7: #323131; // @gray-dark
+$color-charcoal8: #212021; // @gray-darker
+$color-charcoal9: #101010; // @gray-base
+
+// Ivory
+$color-ivory1: #FDFDFC;
+$color-ivory2: #FBFBF9;
+$color-ivory3: #F9F9F6;
+$color-ivory4: #F7F7F3;
+$color-ivory5: #F6F5F1;
+$color-ivory6: #C4C4C0;
+$color-ivory7: #939390;
+$color-ivory8: #626260;
+$color-ivory9: #313130;
+
+// Base colors
+$color-body-bg: $color-ivory1;
+$text-color: $color-charcoal5;
+
+// Accessible Colors
+$color-accessible-blue: #3678BA;
+$color-accessible-blue-hover: #2B6094;
+$color-accessible-dark-blue: #1F3970;
+$color-accessible-light-blue: #EFF4F9;
+
+$color-accessible-red: #D0391B;
+$color-accessible-light-red: #FCF6F3;
+
+$color-accessible-default-button: #CF3E00;
+$color-accessible-default-button-hover: #7b2500;
+
+// @text-color -> @gray
+// @link-color -> @brand-primary

package/src/styles/base/_flex.scss

@@ -0,0 +1,7 @@
+@mixin flex($values...) {
+	display: flex;
+	@each $value in $values {
+	  $property: nth($value, 1);
+	  $property-value: nth($value, 2);
+	}
+}

package/src/styles/base/_fonts.scss

@@ -0,0 +1,49 @@
+@mixin font($font-family, $font-weight, $font-style: normal) {
+	font-family: $font-family;
+	font-style: $font-style;
+	font-weight: $font-weight;
+}
+
+@mixin font-size($mobile-size, $base-size: $mobile-size) {
+	font-size: $mobile-size;
+
+	@media (min-width: 768px) {
+	  font-size: $base-size;
+	}
+}
+
+@mixin h1($font-family, $font-weight: 400) {
+	@include font($font-family, $font-weight);
+	@include font-size(1.5rem, 2.625rem);
+	line-height: 1.25;
+}
+
+@mixin h2($font-family, $font-weight: 400) {
+	@include font($font-family, $font-weight);
+	@include font-size(1.375rem, 1.5rem);
+	line-height: 1.25;
+}
+
+@mixin body($font-family, $font-weight: 400) {
+	@include font($font-family, $font-weight);
+	@include font-size(1rem);
+	line-height: 1.5;
+}
+
+@mixin disclaimer($font-family, $font-weight: 400) {
+	@include font($font-family, $font-weight);
+	@include font-size(.75rem);
+	line-height: 1.15;
+}
+
+@mixin button($font-family, $font-weight: 700) {
+	@include font($font-family, $font-weight);
+	@include font-size(1.25rem);
+	line-height: 1.2;
+}
+
+@mixin form-element($font-family, $font-weight: 400) {
+	@include font($font-family, $font-weight);
+	@include font-size(1rem);
+	line-height: 1.25;
+}

package/src/styles/base/_reset.scss

@@ -0,0 +1,152 @@
+@import 'fonts';
+
+html {
+	font-size: 16px;
+}
+
+body {
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	line-height: 1;
+}
+
+a,
+abbr,
+acronym,
+address,
+applet,
+article,
+aside,
+audio,
+b,
+big,
+blockquote,
+body,
+canvas,
+caption,
+center,
+cite,
+code,
+dd,
+del,
+details,
+dfn,
+div,
+dl,
+dt,
+em,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+html,
+i,
+iframe,
+img,
+ins,
+kbd,
+label,
+legend,
+li,
+mark,
+menu,
+nav,
+object,
+ol,
+output,
+p,
+pre,
+q,
+ruby,
+s,
+samp,
+section,
+small,
+span,
+strike,
+strong,
+sub,
+summary,
+sup,
+table,
+tbody,
+td,
+tfoot,
+th,
+thead,
+time,
+tr,
+tt,
+u,
+ul,
+var,
+video {
+	border: 0;
+	font: inherit;
+	font-size: 100%;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
+
+a,
+button,
+input,
+select,
+textarea {
+	appearance: none;
+}
+
+a {
+	text-decoration: none;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+	display: block;
+}
+
+button,
+select {
+	cursor: pointer;
+}
+
+ol,
+ul {
+	list-style: none;
+}
+
+blockquote,
+q {
+	quotes: none;
+
+	&:after,
+	&:before {
+		content: '';
+		content: none;
+	}
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

package/src/styles/base/index.scss

@@ -0,0 +1,6 @@
+@import 'reset';
+
+@import 'breakpoint-mixins';
+@import 'colors';
+@import 'flex';
+@import 'fonts';

package/src/styles/icons/_basics.scss

@@ -0,0 +1,6 @@
+// Basic directional icons (close, hamburder, arrows, carets etc.)
+$icons-folder: '../fonts/modstyle-icons' !default;
+
+@import './font-face-basic';
+@import './icon-classes-basic';
+@import './mixin-basic'

package/src/styles/icons/_fill.scss

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

package/src/styles/icons/_font-face-basic.scss

@@ -0,0 +1,10 @@
+@font-face {
+	font-display: block;
+	font-family: 'modicons-basic';
+	font-style: normal;
+	font-weight: normal;
+	src: url('#{$icons-folder}/modicons-basic/fonts/modicons-basic.eot?qwk6pl#iefix') format('embedded-opentype'),
+	url('#{$icons-folder}/modicons-basic/fonts/modicons-basic.ttf?qwk6pl') format('truetype'),
+	url('#{$icons-folder}/modicons-basic/fonts/modicons-basic.woff?qwk6pl') format('woff'),
+	url('#{$icons-folder}/modicons-basic/fonts/modicons-basic.svg?qwk6pl#modicons-basic') format('svg');
+}

package/src/styles/icons/_font-face-fill.scss

@@ -0,0 +1,10 @@
+@font-face {
+	font-display: block;
+	font-family: 'modicons-fill';
+	font-style: normal;
+	font-weight: normal;
+	src: url('#{$icons-folder}/modicons-fill/fonts/modicons-fill.eot?w44a84#iefix') format('embedded-opentype'),
+	url('#{$icons-folder}/modicons-fill/fonts/modicons-fill.ttf?w44a84') format('truetype'),
+	url('#{$icons-folder}/modicons-fill/fonts/modicons-fill.woff?w44a84') format('woff'),
+	url('#{$icons-folder}/modicons-fill/fonts/modicons-fill.svg?w44a84#modicons-fill') format('svg');
+}

package/src/styles/icons/_font-face-stroke-md.scss

@@ -0,0 +1,10 @@
+@font-face {
+	font-display: block;
+	font-family: 'modicons-stroke-md';
+	font-style: normal;
+	font-weight: normal;
+  src: url('#{$icons-folder}/modicons-stroke-md/fonts/modicons-stroke-md.eot?lvxr3i#iefix') format('embedded-opentype'),
+  url('#{$icons-folder}/modicons-stroke-md/fonts/modicons-stroke-md.ttf?lvxr3i') format('truetype'),
+	url('#{$icons-folder}/modicons-stroke-md/fonts/modicons-stroke-md.woff?lvxr3i') format('woff'),
+  url('#{$icons-folder}/modicons-stroke-md/fonts/modicons-stroke-md.svg?lvxr3i#modicons-stroke-md') format('svg');
+}

package/src/styles/icons/_font-face-stroke.scss

@@ -0,0 +1,10 @@
+@font-face {
+	font-display: block;
+	font-family: 'modicons-stroke';
+	font-style: normal;
+	font-weight: normal;
+	src: url('#{$icons-folder}/modicons-stroke/fonts/modicons-stroke.eot?wkzvee#iefix') format('embedded-opentype'),
+	url('#{$icons-folder}/modicons-stroke/fonts/modicons-stroke.ttf?wkzvee') format('truetype'),
+	url('#{$icons-folder}/modicons-stroke/fonts/modicons-stroke.woff?wkzvee') format('woff'),
+	url('#{$icons-folder}/modicons-stroke/fonts/modicons-stroke.svg?wkzvee#modicons-stroke') format('svg');
+}

package/src/styles/icons/_icon-classes-basic.scss

@@ -0,0 +1,163 @@
+// Specific classes prevent .icon-... rule from messing with .icon-stroke-... and .icon-fill-... when imported after
+.icon-add,
+.icon-subtract,
+.icon-close,
+.icon-arrow-down,
+.icon-arrow-left,
+.icon-arrow-right,
+.icon-arrow-up,
+.icon-hamburger,
+.icon-caret-down,
+.icon-caret-left,
+.icon-caret-right,
+.icon-caret-up,
+.icon-ellipsis,
+.icon-website,
+.icon-linkedin,
+.icon-facebook,
+.icon-link,
+.icon-pinterest,
+.icon-twitter,
+.icon-instagram,
+.icon-tiktok,
+.icon-youtube {
+	font-family: 'modicons-basic' !important;
+	font-style: normal;
+	font-variant: normal;
+	font-weight: normal;
+	line-height: 1;
+	speak-as: none;
+	text-transform: none;
+}
+
+.icon-facebook {
+	&::before {
+		content: '\e90d';
+	}
+}
+
+.icon-link {
+	&::before {
+		content: '\e90e';
+	}
+}
+
+.icon-pinterest {
+	&::before {
+		content: '\e90f';
+	}
+}
+
+.icon-twitter {
+	&::before {
+		content: '\e910';
+	}
+}
+
+.icon-add {
+	&::before {
+		content: '\e90a';
+	}
+}
+
+.icon-subtract {
+	&::before {
+		content: '\e90b';
+	}
+}
+
+.icon-close {
+	&::before {
+		content: '\e909';
+	}
+}
+
+.icon-arrow-down {
+	&::before {
+		content: '\e900';
+	}
+}
+
+.icon-arrow-left {
+	&::before {
+		content: '\e901';
+	}
+}
+
+.icon-arrow-right {
+	&::before {
+		content: '\e902';
+	}
+}
+
+.icon-arrow-up {
+	&::before {
+		content: '\e903';
+	}
+}
+
+.icon-hamburger {
+	&::before {
+		content: '\e904';
+	}
+}
+
+.icon-caret-down {
+	&::before {
+		content: '\e905';
+	}
+}
+
+.icon-caret-left {
+	&::before {
+		content: '\e906';
+	}
+}
+
+.icon-caret-right {
+	&::before {
+		content: '\e907';
+	}
+}
+
+.icon-caret-up {
+	&::before {
+		content: '\e908';
+	}
+}
+
+.icon-ellipsis {
+	&::before {
+		content: '\e90c';
+	}
+}
+
+.icon-website {
+	&::before {
+		content: '\e911';
+	}
+}
+
+.icon-linkedin {
+	&::before {
+		content: '\e912';
+	}
+}
+
+.icon-instagram {
+	&::before {
+		content: '\e913';
+	}
+}
+
+.icon-tiktok {
+	&::before {
+		content: '\e914';
+	}
+}
+
+.icon-youtube {
+	&::before {
+		content: '\e915';
+	}
+}