Update tooling

.env.sample

@@ -7,6 +7,7 @@ ALGOLIA_API_KEY=
 ALGOLIA_SEARCH_KEY=
 ALGOLIA_PREFIX=devsite-dev-
 GOOGLE_ANALYTICS=
+GOOGLE_API=
 ROLLBAR_CLIENT_TOKEN=
 JEKYLL_ENV=development
 SKIP_DOCS=false

.ruby-version

@@ -1 +1 @@
-3.3.8
+3.3.8

source/_data/env.yaml

@@ -34,6 +34,8 @@
   env: DOCS_URL
 - config: google_analytics
   env: GOOGLE_ANALYTICS
+- config: google_maps
+  env: GOOGLE_MAPS
 - config: debug
   env: DEBUG
 - config: sdk_bucket

source/_sass/app.scss

@@ -15,20 +15,24 @@
  */
 
 @use "sass:color";
+@use "sass:meta";
+@use 'bourbon/bourbon';
 
-@import 'bourbon/bourbon';
+@use 'colors';
 
-@import 'colors';
+@forward 'base/base';
+@forward 'responsive/responsive';
+@forward 'font-awesome/font-awesome';
 
-@import 'base/base';
-@import 'responsive/responsive';
-@import 'font-awesome/font-awesome';
-
-@import 'header';
-@import 'footer';
+@use "base/variables";
+@use "bourbon/addons/font-family";
+@use "bourbon/css3/box-sizing";
+@use "responsive/utilities/variables" as utilities-variables;
+@use 'footer';
+@use 'header';
 
 * {
-  @include box-sizing(border-box);
+  @include box-sizing.box-sizing(border-box);
 }
 
 body,
@@ -39,17 +43,17 @@ html {
 }
 
 body {
-  padding-top: $header-height;
-  background-color: $gray-01;
+  padding-top: header.$header-height;
+  background-color: colors.$gray-01;
 }
 
 .anchor[id],
 .anchor[name] {
   &::before {
     content: ' ';
     display: block;
-    height: $header-height;
-    margin-top: -0.7 * $header-height;
+    height: header.$header-height;
+    margin-top: -0.7 * header.$header-height;
     visibility: hidden;
   }
 }
@@ -59,17 +63,17 @@ body {
 }
 
 code {
-  background-color: $white;
+  background-color: colors.$white;
   border-radius: 2px;
-  color: color.adjust($base-font-color, $lightness: -20%, $space: hsl);
-  font-family: $monospace;
-  font-size: $base-font-size;
+  color: color.adjust(variables.$base-font-color, $lightness: -20%, $space: hsl);
+  font-family: font-family.$monospace;
+  font-size: variables.$base-font-size;
   padding: 2px 4px;
   box-shadow: inset 0 0 2px #bbb;
 }
 
 a code {
-  color: color.adjust($base-link-color, $lightness: -10%, $space: hsl);
+  color: color.adjust(variables.$base-link-color, $lightness: -10%, $space: hsl);
 }
 
 .container {
@@ -79,8 +83,8 @@ a code {
 }
 
 .vcenter {
-   display: table-cell;
-   vertical-align: middle;
+  display: table-cell;
+  vertical-align: middle;
 }
 
 .vcenter--wrapper {
@@ -107,7 +111,7 @@ a code {
   line-height: 1.1;
 
   a {
-    color: $base-text-color;
+    color: utilities-variables.$base-text-color;
 
     &:hover {
       text-decoration: underline;
@@ -127,8 +131,7 @@ a code {
   margin-bottom: 1em;
 }
 
-.noscript--hide {
-}
+.noscript--hide {}
 
 .noscript--show {
   display: none;
@@ -157,54 +160,54 @@ a code {
   overflow: hidden;
 }
 
-@import 'elements/alert';
-@import 'elements/buttons';
-@import 'elements/form';
-@import 'elements/mobile-nav';
-@import 'elements/highlight';
-@import 'elements/inline-list';
-@import 'elements/markdown';
-@import 'elements/screenshot';
-@import 'elements/sidebar';
-@import 'elements/spinner';
-@import 'elements/table';
+@include meta.load-css('elements/alert');
+@include meta.load-css('elements/buttons');
+@include meta.load-css('elements/form');
+@include meta.load-css('elements/mobile-nav');
+@include meta.load-css('elements/highlight');
+@include meta.load-css('elements/inline-list');
+@include meta.load-css('elements/markdown');
+@include meta.load-css('elements/screenshot');
+@include meta.load-css('elements/sidebar');
+@include meta.load-css('elements/spinner');
+@include meta.load-css('elements/table');
 // @import 'elements/terminal';
-@import 'elements/toc';
+@include meta.load-css('elements/toc');
 // @import 'elements/typeahead';
 // @import 'elements/video';
-@import 'elements/bigbox';
-@import 'elements/full-height';
-@import 'elements/sectionmenu';
-@import 'elements/search';
-@import 'elements/gray-box';
-@import 'elements/ribbon';
-@import 'elements/pagination';
-@import 'elements/landing-slider';
-@import 'elements/platform-choice';
-@import 'elements/dual-image';
-
-@import 'sections/getting-started';
-
-@import 'libs/slick';
-@import 'mmenu/jquery.mmenu.all.scss';
-
-@import 'sections/events';
-@import 'sections/blog';
-@import 'sections/documentation';
-@import 'sections/examples';
-@import 'sections/guides';
-@import 'sections/retreat';
-@import 'sections/inspiration';
-@import 'sections/round';
-@import 'sections/sdk';
-
-@import 'debug';
+@include meta.load-css('elements/bigbox');
+@include meta.load-css('elements/full-height');
+@include meta.load-css('elements/sectionmenu');
+@include meta.load-css('elements/search');
+@include meta.load-css('elements/gray-box');
+@include meta.load-css('elements/ribbon');
+@include meta.load-css('elements/pagination');
+@include meta.load-css('elements/landing-slider');
+@include meta.load-css('elements/platform-choice');
+@include meta.load-css('elements/dual-image');
+
+@include meta.load-css('sections/getting-started');
+
+@include meta.load-css('libs/slick');
+@include meta.load-css('mmenu/jquery.mmenu.all.scss');
+
+@include meta.load-css('sections/events');
+@include meta.load-css('sections/blog');
+@include meta.load-css('sections/documentation');
+@include meta.load-css('sections/examples');
+@include meta.load-css('sections/guides');
+@include meta.load-css('sections/retreat');
+@include meta.load-css('sections/inspiration');
+@include meta.load-css('sections/round');
+@include meta.load-css('sections/sdk');
+
+@include meta.load-css('debug');
 
 .mm-page {
   height: 100%;
   position: inherit;
 
-  > div {
+  >div {
     height: 100%;
   }
 }
@@ -216,11 +219,11 @@ a code {
 .mm-opened,
 .mm-opening {
   .mm-page {
-    margin-top: -1 * $header-height;
+    margin-top: -1 * header.$header-height;
   }
 
   .content {
-    padding-top: $header-height;
+    padding-top: header.$header-height;
   }
 }
 
@@ -238,7 +241,7 @@ a code {
 }
 
 .modal-content {
-  background-color: $gray-01;
+  background-color: colors.$gray-01;
 }
 
 .header--skinny {

source/_sass/base/_base.scss

@@ -18,23 +18,23 @@
 // http://bitters.bourbon.io
 
 // Variables
-@import 'variables';
+@use 'variables';
 
 // Neat Settings -- uncomment if using Neat -- must be imported before Neat
 // @import 'grid-settings';
 
 // Mixins
-@import 'mixins/flash';
+@use 'mixins/flash';
 
 // Extends
-@import 'extends/button';
-@import 'extends/clearfix';
-@import 'extends/hide-text';
+@use 'extends/button';
+@use 'extends/clearfix';
+@use 'extends/hide-text';
 
 // Typography and Elements
-@import 'typography';
+@use 'typography';
 // @import 'forms';
-@import 'tables';
-@import 'lists';
-@import 'flashes';
+@use 'tables';
+@use 'lists';
+@use 'flashes';
 // @import 'buttons';

source/_sass/base/_flashes.scss

@@ -14,18 +14,21 @@
  * limitations under the License.
  */
 
+@use "mixins/flash";
+@use "variables";
+
 %flash-alert {
-  @include flash($alert-color);
+  @include flash.flash(variables.$alert-color);
 }
 
 %flash-error {
-  @include flash($error-color);
+  @include flash.flash(variables.$error-color);
 }
 
 %flash-notice {
-  @include flash($notice-color);
+  @include flash.flash(variables.$notice-color);
 }
 
 %flash-success {
-  @include flash($success-color);
+  @include flash.flash(variables.$success-color);
 }

source/_sass/base/_forms.scss

@@ -79,7 +79,8 @@ input[type="search"] {
   @include appearance(none);
 }
 
-input[type="checkbox"], input[type="radio"] {
+input[type="checkbox"],
+input[type="radio"] {
   display: inline;
   margin-right: $base-line-height * 0.25;
 }

source/_sass/base/_lists.scss

@@ -14,30 +14,33 @@
  * limitations under the License.
  */
 
-ul, ol {
+@use "variables";
+
+ul,
+ol {
   margin: 0;
   padding: 0;
   list-style-type: none;
 
   &%default-ul {
     list-style-type: disc;
-    margin-bottom: $base-line-height * 0.5;
-    padding-left: $base-line-height;
+    margin-bottom: variables.$base-line-height * 0.5;
+    padding-left: variables.$base-line-height;
   }
 
   &%default-ol {
     list-style-type: decimal;
-    margin-bottom: $base-line-height * 0.5;
-    padding-left: $base-line-height;
+    margin-bottom: variables.$base-line-height * 0.5;
+    padding-left: variables.$base-line-height;
   }
 }
 
 dl {
-  margin-bottom: $base-line-height * 0.5;
+  margin-bottom: variables.$base-line-height * 0.5;
 
   dt {
     font-weight: bold;
-    margin-top: $base-line-height * 0.5;
+    margin-top: variables.$base-line-height * 0.5;
   }
 
   dd {

source/_sass/base/_tables.scss

@@ -14,20 +14,24 @@
  * limitations under the License.
  */
 
+@use "variables";
+
 table {
   width: 100%;
 }
 
 th {
   font-weight: bold;
-  padding: ($base-line-height * 0.5) 0;
+  padding: (variables.$base-line-height * 0.5) 0;
   text-align: left;
 }
 
 td {
-  padding: ($base-line-height * 0.5) 0;
+  padding: (variables.$base-line-height * 0.5) 0;
 }
 
-tr, td, th {
+tr,
+td,
+th {
   vertical-align: middle;
 }