basic map and bcgov theme

data-raw/app_bcgov_theme.R

@@ -0,0 +1,59 @@
+if (!identical(getwd(), rprojroot::find_package_root_file())) {
+  stop("This script must be run from the top directory of the climr package")
+}
+
+if (!any(grepl("^bslib$", rownames(installed.packages())))) {
+  stop("This script must be run from the after the installation of bslib package")
+}
+
+# Set working directory to repo root
+bsw5_repo <- "https://github.com/bcgov/bootstrap-v5-theme/archive/refs/heads/master.zip"
+z <- tempfile(fileext = ".zip")
+curl::curl_download(bsw5_repo, z)
+f <- unzip(z, list = TRUE)$Name
+
+# Copy fonts
+f1 <- grep("/dist/fonts/.+woff2?", f, value = TRUE)
+unlink("inst/fonts/", recursive = TRUE)
+dir.create("inst/fonts/", showWarnings = FALSE)
+unzip(z, f1, junkpaths = TRUE, exdir = "inst/fonts/", overwrite = TRUE)
+
+# Copy images
+f2 <- grep("/dist/images/.+(png|svg)", f, value = TRUE)
+unlink("inst/shiny/www/images", recursive = TRUE)
+dir.create("inst/shiny/www/images", showWarnings = FALSE)
+unzip(z, f2, junkpaths = TRUE, exdir = "inst/shiny/www/images", overwrite = TRUE)
+
+# SCSS files
+f3 <- grep("/dist/scss/.+scss", f, value = TRUE)
+unlink("inst/lib/bsw5/dist/bcgov/", recursive = TRUE)
+dir.create("inst/lib/bsw5/dist/bcgov/", showWarnings = FALSE)
+unzip(z, f3, junkpaths = TRUE, exdir = "inst/lib/bsw5/dist/bcgov/", overwrite = TRUE)
+
+#Font file
+f4 <- grep("_fonts.scss", dir("inst/lib/bsw5/dist/bcgov", recursive = TRUE, full.names = TRUE), value = TRUE)
+f5 <- readLines(f4, warn = FALSE) |> gsub("../fonts/bc-sans", "fonts", x = _)
+writeLines(f5, f4)
+
+# Appending
+f6 <- grep("_additions.scss|_overrides.scss", dir("inst/lib/bsw5/dist/bcgov", recursive = TRUE, full.names = TRUE), value = TRUE)
+bsw <- "inst/lib/bsw5/dist/bcgov/_bootswatch.scss"
+file.create(bsw)
+lapply(f6, file.append, file1 = bsw)
+unlink(f6)
+
+# Drop unneeded
+f7 <- grep("_common.scss|bootstrap-theme.scss", dir("inst/lib/bsw5/dist/bcgov", recursive = TRUE, full.names = TRUE), value = TRUE)
+unlink(f7)
+
+# Files renaming
+file.rename(f4, sub("_fonts.scss","font.css", f4))
+
+# Patching
+f8 <- readLines(bsw)
+f8 <- gsub("^header nav", "body nav", f8)
+writeLines(f8, bsw)
+
+v <- "inst/lib/bsw5/dist/bcgov/_variables.scss"
+cat(c("\n$nav-underline-border-width: 0rem !default;", '\n$theme: "bcgov" !default;', '\n$navbar-bg: theme-color(primary-nav);'), file = v, append = TRUE)
+

data-raw/app_file_dep.R

@@ -0,0 +1,9 @@
+# Leaflet vector grid plugin
+dir.create("inst/shiny/www/htmlwidgets", showWarnings = FALSE, recursive = TRUE)
+utils::download.file("https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.min.js",
+                     "inst/shiny/www/htmlwidgets/lfx-vgrid-prod.js")
+
+# Western North-America BEC Subzone coloring from CCISS
+dir.create("inst/shiny/data", showWarnings = FALSE, recursive = TRUE)
+utils::download.file("https://github.com/bcgov/ccissr/raw/refs/heads/main/data-raw/data_tables/WNAv12_3_SubzoneCols.csv",
+                     "inst/shiny/data/WNAv12_3_SubzoneCols.csv")

inst/lib/bsw5/dist/bcgov/_bootswatch.scss

@@ -0,0 +1,201 @@
+//---------------------------------------------------------------------------------------
+// Additions are for extra classes not found in the normal Bootstrap
+// WARNING: Do not create alot of new things here, remember always try to tweak and variable
+// or override bootstrap css before trying to create something new.
+//---------------------------------------------------------------------------------------
+// sass-lint:disable force-element-nesting, force-pseudo-nesting
+
+// The label element is no longer bolded by default, neither is this class defined
+.form-label {
+  font-weight: 700;
+}
+
+// Option to keep footer at the bottom of the page
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  @include media-breakpoint-up($breakpoint) {
+    // Set on html element to keep footer at bottom of window short pages
+
+      body, .fill-body {
+        display: flex;
+        flex-direction: column;
+        min-height: 100vh;
+      }
+      // Apply to extra container element(s) around the main
+      .fill-body {
+        flex: 1;
+      }
+      header, .header, footer, .footer {
+        flex: none;
+      }
+      main, .main {
+        flex: 1;
+        overflow: auto;
+      }
+
+  }
+}
+
+$info-alert-border-level: -4;
+
+//Theme-color function is initizled as it was dropped with version 5 migration
+@function theme-color($color-name){
+    @return map-get($map: $theme-colors, $key: $color-name);
+}
+
+// Add panel-success, panel-info etc. equivalents (like bootstrap v3)
+@each $color, $value in (primary, secondary, success, info, warning, danger) {
+    .card-#{$color} {
+      border-color: theme-color($color);
+      > .card-header{
+        background-color: tint-color(theme-color($color),85%);
+        color: tint-color(theme-color($color),0.5%);
+      }
+      > .card-footer{
+        border-color: theme-color($color);
+      }
+    }
+}
+
+// Light text on dark header, with dark border. When you really want to look like the
+// old default panel class
+.card-default {
+  border-color: theme-color(primary);
+  > .card-header {
+    background: theme-color(primary);
+    border-color: theme-color(primary);
+    color: theme-color(light);
+  }
+  > .card-footer {
+    border-color: theme-color(primary);
+  }
+}//---------------------------------------------------------------------------------------
+// Overrides Bootstrap classes are change here, consider changing a variable before
+// overriding classes.
+//---------------------------------------------------------------------------------------
+// Reference: http://www2.gov.bc.ca/gov/content/governments/services-for-government/policies-procedures/web-content-development-guides/developers-guide/css-elements
+// sass-lint:disable force-element-nesting, force-pseudo-nesting
+
+.nav-link,
+.navbar-brand,
+.page-link,
+a.btn {
+  text-decoration: none;
+}
+
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+// For backward compatibility
+@mixin hover() {
+  &:hover { @content; }
+}
+
+@mixin hover-focus() {
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin plain-hover-focus() {
+  &,
+  &:hover,
+  &:focus {
+    @content;
+  }
+}
+
+@mixin hover-focus-active() {
+  &:hover,
+  &:focus,
+  &:active {
+    @content;
+  }
+}
+
+
+.nav-tabs .nav-link:not(.active) {
+    @include hover-focus {
+      background-color: $control-link-bg;
+      border-color: $control-link-border-color;
+      color: $control-link-color;
+    }
+}
+
+// Add focus ring to btn-link, highlight as regular link
+.btn.btn-link {
+  text-decoration: underline;
+  &:focus,
+  &.focus {
+    box-shadow: 0 0 0 $btn-focus-width $btn-link-outline-color;
+    color: $link-hover-color;
+  }
+}
+
+.btn{
+  &.focus{
+    border: 5px solid;  
+  }
+
+}
+
+
+
+// Underline navbar links when active
+.navbar-nav .nav-link {
+  @include hover-focus {
+    text-decoration: underline;
+  }
+}
+
+
+.list-group .list-group-item-action {
+  @include hover-focus {
+    text-decoration: underline;
+  }
+}
+
+// Add spacing around content (use p-* to override)
+main {
+    padding-bottom: 40px;
+    padding-top: 20px;
+}
+
+
+//Theme-color function is initizled as it was dropped with version 5 migration
+@function theme-color($color-name){
+    @return map-get($map: $theme-colors, $key: $color-name);
+}
+
+// Header, adds the gold bottom border and shadow
+body nav {
+    background-color: theme-color(primary-nav);
+    border-bottom: 2px solid theme-color(bcgold);
+    &.shadow {
+      box-shadow: 0 3px 3px 1px $header-box-shadow-color;
+    }
+}
+
+// Set footer background, add gold border above
+footer nav {
+    background-color: theme-color(primary-nav);
+    border-top: 2px solid theme-color(bcgold);
+}
+
+// Only sibling list items in footer get left border
+@each $breakpoint in map-keys($grid-breakpoints) {
+  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+  footer .navbar-expand#{$infix} .nav-item + .nav-item {
+    @include media-breakpoint-up($breakpoint) {
+      border-left: 1px solid $footer-separator-color;
+    }
+  }
+}
+
+// Stronger border colour
+.alert.alert-info {
+  border-color: color-level(info, -4);
+}
+.alert.alert-warning {
+  border-color: color-level(warning, -4);
+}
+

inst/lib/bsw5/dist/bcgov/_variables.scss

@@ -0,0 +1,102 @@
+// Change theme-colors
+$theme-colors: (
+  primary: #38598a,
+  secondary:#6c757d, // new entry
+  success: #43893e,
+  info: #96c0e6,
+  warning: #f9ca54,
+  danger: #d93e45,
+  // new entries
+    primary-nav: #036,
+  secondary-nav: #5475a7,
+  bcgold: #fcba19,
+  light:#f8f9fa, // new entries
+  dark: #212529, // new entries
+);
+
+//Theme-color function is initizled as it was dropped with version 5 migration
+@function theme-color($color-name){
+  @return map-get($map: $theme-colors, $key: $color-name);
+}
+
+// Add our font as default
+$bcgov-font-path: "../fonts" !default;
+$font-family-sans-serif: BCSans, "Noto Sans", Verdana, Arial, sans serif !default;
+$font-family-base: $font-family-sans-serif !default;
+$line-height-base: 1.6 !default;
+$body-color: #494949 !default;
+
+// Headings
+$headings-font-weight: 700 !default;
+$headings-line-height: 1.1 !default;
+$headings-margin-bottom: 1.25rem !default;
+$h1-font-size: 2.074rem !default;
+$h2-font-size: 1.54912rem !default;
+$h3-font-size: 1.33882rem !default;
+$h4-font-size: 1rem !default;
+$h5-font-size: 0.86425rem !default;
+$h6-font-size: 0.80345rem !default;
+
+// Links
+$link-text-decoration: underline !default;
+$link-color: #1a5a96 !default;
+$link-hover-color: #0631f3 !default;
+$btn-link-outline-color: rgba(theme-color(primary), 0.5) !default;
+
+// Navbar - header and footer
+$header-box-shadow-color: rgba(51, 51, 51, 0.5) !default;
+$nav-link-padding-x: 0.8rem !default;
+$nav-link-padding-y: 0.4rem !default;
+$navbar-nav-link-padding-x: 0.8rem !default;
+$navbar-nav-link-padding-y: 0.4rem !default;
+$navbar-dark-color: #fff !default;
+$navbar-dark-toggler-border-color: rgba(255, 255, 255, 0.6) !default;
+$footer-separator-color: #4b5e73 !default;
+
+// Table header
+$table-dark-bg: theme-color(primary) !default;
+$table-dark-border-color: theme-color(primary) !default;
+
+// Darker borders
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-450: #bdc5cc !default;
+$gray-500: #adb5bd !default;
+$alpha-border-color: rgba(black, 0.3) !default;
+$alert-border-level: -7 !default;
+$card-border-color: $alpha-border-color !default;
+$hr-border-color: $alpha-border-color !default;
+$border-color: $gray-400 !default;
+$input-border-color: $gray-500 !default;
+$list-group-border-color: $alpha-border-color !default;
+$nav-tabs-border-color: $gray-500 !default;
+$nav-tabs-link-active-border-color: $gray-500 $gray-500 white !default;
+$pagination-border-color: $gray-500 !default;
+$pagination-disabled-border-color: $gray-400 !default;
+// $pagination-active-border-color: $pagination-active-bg !default;
+$table-border-color: $gray-450 !default;
+$table-border-level: -5 !default;
+
+// Clearer hover states
+$control-link-color: white !default;
+$control-link-bg: tint-color( theme-color(secondary-nav),10%) !default; // custom var
+$control-link-border-color: tint-color( theme-color(secondary-nav),10%) !default; // custom var
+
+$pagination-active-bg:  theme-color(primary); //new entries
+$pagination-active-border-color: theme-color(primary); //new entries
+$pagination-hover-color: $control-link-color;
+$pagination-hover-bg: $control-link-bg !default;
+$pagination-hover-border-color: $control-link-border-color !default;
+$list-group-active-bg: $control-link-bg !default;
+$list-group-active-border-color: $control-link-border-color !default;
+$list-group-action-hover-color: $link-hover-color;
+$nav-tabs-link-hover-border-color: $control-link-color $control-link-color
+$nav-tabs-border-color !default;
+
+$list-group-item-padding-y: 12px; //for navbar spacing
+
+$nav-pills-link-active-bg: theme-color(primary); //new entry for active color on pills w/t dropdowns
+$progress-bar-bg:theme-color(primary); //new entry for progress bars
+$nav-underline-border-width: 0rem !default; 
+$theme: "bcgov" !default; 
+$navbar-bg: theme-color(primary-nav);