update colors

app.R

@@ -87,9 +87,8 @@ rtemisseq <- function(
       ),
       # Theme ----
       theme = bslib::bs_theme(
-        bg = "#fff",
-        fg = "#000",
-        success = success,
+        # bg = "#fff",
+        # fg = "#000",
         `tooltip-opacity` = 1,
         `tooltip-border-radius` = "10px",
         `tooltip-padding-x` = "1rem",
@@ -272,6 +271,7 @@ rtemisseq <- function(
         label = "Data source",
         choices = list(
           `Built-in datasets` = "builtin",
+          # `GitHub repository` = "github",
           `File upload` = "upload"
         ),
         selected = "builtin"
@@ -291,6 +291,8 @@ rtemisseq <- function(
           label = "Upload a3 JSON file",
           buttonLabel = "Browse local files...",
         )
+      } else if (input$a3_load_switch == "github") {
+
       } else {
         # Select built-in data stored in ./data/ directory
         if (verbosity > 0) {

www/rtemislive.scss

@@ -2,11 +2,15 @@
 
 // Define your custom colors
 // primary color
-$light-primary: #178CCB;
-$dark-primary: #B8E6FA;
+$light-primary: #1295D8;
+$dark-primary: #1295D8;
+$light-primary-rgb: #{red($light-primary)}, #{green($light-primary)}, #{blue($light-primary)};
+$dark-primary-rgb: #{red($dark-primary)}, #{green($dark-primary)}, #{blue($dark-primary)};
 // info color
-$light-info: #E44C9A; // Default Bootstrap info color
-$dark-info: #FEB2E0; // Darker shade for better contrast in dark mode
+$light-info: #E44C9A;
+$light-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
+$dark-info: #FEB2E0;
+$dark-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
 // tooltip-bg
 $light-tooltipbg: #cdcdcd;
 $dark-tooltipbg: #333333;
@@ -15,14 +19,17 @@ $dark-tooltipbg: #333333;
 @include color-mode(light) {
   // primary color
   --bs-primary: #{$light-primary};
-  --bs-primary-rgb: #{red($light-primary)}, #{green($light-primary)}, #{blue($light-primary)};
+  --bs-primary-rgb: #{$light-primary-rgb};
   // info color
   --bs-info: #{$light-info};
-  --bs-info-rgb: #{red($light-info)}, #{green($light-info)}, #{blue($light-info)};
+  --bs-info-rgb: #{$light-info-rgb};
   // button color
   --bs-button: #{$light-primary};
-  // radio button color
-  --bs-radio: #{$light-primary};
+  --bs-button-rgb: #{$light-primary-rgb};
+  // link color
+  --bs-link-color: #{$light-primary};
+  --bs-link-color-rgb: #{$light-primary-rgb};
+
 
   --rt-tooltipbg: #{$light-tooltipbg};
 }
@@ -30,14 +37,16 @@ $dark-tooltipbg: #333333;
 @include color-mode(dark) {
   // primary color
   --bs-primary: #{$dark-primary};
-  --bs-primary-rgb: #{red($dark-primary)}, #{green($dark-primary)}, #{blue($dark-primary)};
+  --bs-primary-rgb: #{$dark-primary-rgb};
   // info color
   --bs-info: #{$dark-info};
-  --bs-info-rgb: #{red($dark-info)}, #{green($dark-info)}, #{blue($dark-info)};
+  --bs-info-rgb: #{$dark-info-rgb};
   // button color
   --bs-button: #{$dark-primary};
-  // radio button color
-  --bs-radio: #{$dark-primary};
+  --bs-button-rgb: #{$dark-primary-rgb};
+  // link color
+  --bs-link-color: #{$dark-primary};
+  --bs-link-color-rgb: #{$dark-primary-rgb};
 
   --rt-tooltipbg: #{$dark-tooltipbg};
 }
@@ -135,45 +144,6 @@ a {
   text-decoration: none;
 }
 
-// Buttons
-// .btn-primary {
-//   background-color: var(--bs-primary);
-//   border-color: var(--bs-primary);
-// }
-
-// .btn-outline-primary {
-//   border-color: var(--bs-primary);
-//   color: var(--bs-primary);
-
-// }
-
-// .btn-link {
-//   color: var(--bs-primary);
-// }
-
-// .form-check-input:checked,
-// .form-check-input:focus {
-//   background-color: var(--bs-primary);
-//   border-color: var(--bs-primary);
-// }
-
-// Custom styles for buttons
-// .btn-primary {
-//   @include button-variant($primary, $primary);
-// }
-
-// // Custom styles for radio buttons
-// .btn-check {
-//   &:checked+.btn-primary {
-//     @include button-variant($primary, $primary);
-
-//     &:hover {
-//       background-color: darken($primary, 10%);
-//       border-color: darken($primary, 10%);
-//     }
-//   }
-// }
-
 // Define a SCSS variable that uses the CSS custom property
 $primary-color: var(--bs-primary);
 
@@ -182,24 +152,24 @@ $primary-color: var(--bs-primary);
   background-color: $primary-color;
   border-color: $primary-color;
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: rgba($primary-color, 0.8);
-    border-color: rgba($primary-color, 0.8);
-  }
+  // &:hover,
+  // &:focus,
+  // &:active {
+  //   background-color: rgba($primary-color, 0.8);
+  //   border-color: rgba($primary-color, 0.8);
+  // }
 }
 
 .btn-outline-primary {
   color: $primary-color;
   border-color: $primary-color;
 
-  &:hover,
-  &:focus,
-  &:active {
-    background-color: $primary-color;
-    border-color: $primary-color;
-  }
+  // &:hover,
+  // &:focus,
+  // &:active {
+  //   background-color: $primary-color;
+  //   border-color: $primary-color;
+  // }
 }
 
 // Customize radio buttons
@@ -209,16 +179,18 @@ $primary-color: var(--bs-primary);
     border-color: $primary-color;
   }
 
-  &:focus {
-    border-color: $primary-color;
-    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
-  }
+  // &:focus {
+  //   border-color: $primary-color;
+  //   box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.25);
+  // }
 }
 
-// Customize focus state for buttons
-.btn-primary,
-.btn-outline-primary {
-  &:focus {
-    box-shadow: 0 0 0 0.25rem rgba($primary-color, 0.5);
-  }
-}
+// Radio buttons
+.form-check-input:checked,
+.shiny-input-container .checkbox input:checked,
+.shiny-input-container .checkbox-inline input:checked,
+.shiny-input-container .radio input:checked,
+.shiny-input-container .radio-inline input:checked {
+  background-color: $primary-color;
+  border-color: $primary-color;
+}