additional foundational files in example project

Author: jakefentress

example-project/scss/_1_base/_fonts.scss

@@ -0,0 +1,27 @@
+@use 'lib/fonts';
+
+// examples of proper loading of 3rd party fonts:
+//
+// @include fonts.embed-font('Sans', 'SansWeb-Regular', normal, normal);
+// @include fonts.embed-font('Sans', 'SansWeb-RegularItalic', normal, italic);
+// @include fonts.embed-font('Sans', 'SansWeb-Bold', bold, normal);
+//
+// then define the font in config/_fonts.scss:
+//
+// $sans: 'Sans', $system;
+//
+// and calling those fonts properly:
+//
+// @mixin sans {
+//     font-family: $sans;
+// }
+
+// @mixin sans-italic {
+//     font-family: $sans;
+//     font-style: italic;
+// }
+
+// @mixin sans-bold {
+//     font-family: $sans;
+//     font-weight: bold;
+// }

example-project/scss/_1_base/properties/_colors.scss

@@ -0,0 +1,33 @@
+@use 'lib/colors' as *;
+
+// Color Roles
+:root {
+    --body-color: #{color('white')};
+    --text-color: #{color('black')};
+
+    --link-color: #{color('blue')};
+    --link-color-hover: #{color('aqua')};
+
+    --border-color: #{color('gray')};
+
+    --tap-highlight-color: rgba(0, 0, 0, 0.35);
+    --highlight-color: #{color('blue')}; // used for text selections, etc.
+
+    --placeholder-txt: #B2B2B2;
+
+    // --error-bg: #FFE6E6;
+    // --error-txt: #E04646;
+    // --error-border: #E04646;
+    //
+    // --warning-bg: #FCF7D8;
+    // --warning-txt: #B29804;
+    // --warning-border: #B29804;
+    //
+    // --info-bg: #E8F3FF;
+    // --info-txt: #537DF6;
+    // --info-border: #537DF6;
+    //
+    // --success-bg: #DAFCE1;
+    // --success-txt: #0CA129;
+    // --success-border: #0CA129;
+}

example-project/scss/_1_base/properties/_font-sizes.scss

@@ -0,0 +1,24 @@
+@use 'config/base-font' as *;
+@use 'lib/units' as *;
+@use 'lib/lock' as *;
+@use 'lib/media-queries' as *;
+
+:root {
+    --font-size-xl: #{rem(44)};
+    --font-size-l: #{rem(32)};
+    --font-size-m: #{rem(24)};
+    --font-size-s: #{rem($base-font-size)};
+    --font-size-xs: #{rem(14)};
+
+//     @media #{query('s')} {
+//         --font-size-l: #{lock(rem(12), rem(20), breakpoint('s'), breakpoint('l'))};
+//     }
+
+//     @media #{query('l')} {
+//         --font-size-l: #{rem(20)};
+//     }
+}
+
+html {
+    font-size: em($base-font-size, 16);
+}

example-project/scss/_1_base/properties/_spacing.scss

@@ -0,0 +1,28 @@
+@use 'config/dimensions' as *;
+@use 'lib/units' as *;
+@use 'lib/lock' as *;
+@use 'lib/media-queries' as *;
+
+:root {
+    --maxwidth: #{$maxwidth};
+
+    --gutter: #{rem(10)};
+
+    --h-spacing: #{rem(20)};
+
+    @media #{query('s')} {
+        --h-spacing: #{rem(32)};
+    }
+
+    @media #{query('m')} {
+        --h-spacing: #{rem(44)};
+    }
+
+    @media #{query('l')} {
+        --h-spacing: #{rem(56)};
+    }
+
+    @media #{query('xl')} {
+        --h-spacing: #{rem(70)};
+    }
+}

example-project/scss/config/_borders.scss

@@ -0,0 +1,12 @@
+// Borders
+//
+// Borders are available from variables. Usage in Sass looks like
+// `border: $border-width $border-style $border-color;` or `border: $border;`
+// or `border-radius: $border-radius;`
+
+// see _1_base/properties/_colors for border colors
+
+$border-style: solid;
+$border-width: 1px;
+$border-radius: 3px;
+$border: $border-width $border-style var(--border-color);