Merge pull request #105 from rosenpass/beta

Beta

assets/js/click-to-copy.js

@@ -0,0 +1,46 @@
+let codeListings = document.querySelectorAll('.highlight > pre');
+
+for (let index = 0; index < codeListings.length; index++) {
+  const codeSample = codeListings[index].querySelector('code');
+  const copyButton = document.createElement('button');
+  const buttonAttributes = {
+    type: 'button',
+    title: 'Copy to clipboard',
+    'data-bs-toggle': 'tooltip',
+    'data-bs-placement': 'top',
+    'data-bs-container': 'body',
+  };
+
+  Object.keys(buttonAttributes).forEach((key) => {
+    copyButton.setAttribute(key, buttonAttributes[key]);
+  });
+
+  copyButton.classList.add(
+    'fas',
+    'fa-copy',
+    'btn',
+    'btn-sm',
+    'td-click-to-copy'
+  );
+  const tooltip = new bootstrap.Tooltip(copyButton);
+
+  copyButton.onclick = () => {
+    copyCode(codeSample);
+    copyButton.setAttribute('data-bs-original-title', 'Copied!');
+    tooltip.show();
+  };
+
+  copyButton.onmouseout = () => {
+    copyButton.setAttribute('data-bs-original-title', 'Copy to clipboard');
+    tooltip.hide();
+  };
+
+  const buttonDiv = document.createElement('div');
+  buttonDiv.classList.add('click-to-copy');
+  buttonDiv.append(copyButton);
+  codeListings[index].insertBefore(buttonDiv, codeSample);
+}
+
+const copyCode = (codeSample) => {
+  navigator.clipboard.writeText(codeSample.textContent.trim());
+};

assets/scss/_boxes.scss

@@ -0,0 +1,151 @@
+// Boxes on the home page and similar: .td-box
+
+// box-variant creates the main style for a colored section
+@mixin box-variant($parent, $color-name, $color-value) {
+    $text-color: color-contrast($color-value);
+    $link-color: mix($blue, $text-color, lightness($color-value));
+    $link-hover-color: if(
+      color-contrast($link-color) == $color-contrast-light,
+      shade-color($link-color, $link-shade-percentage),
+      tint-color($link-color, $link-shade-percentage)
+    );
+
+    #{$parent} {
+      &--#{$color-name} {
+        color: var(--bs-#{$color-name}--contrast);
+        background-color: var(--bs-#{$color-name});
+
+        .td-arrow-down {
+          &::before {
+            left: 50%;
+            margin-left: -30px;
+            bottom: -25px;
+            border: {
+              style: solid;
+              width: 25px 30px 0 30px;
+              color: var(--bs-#{$color-name}) transparent transparent transparent;
+            }
+            z-index: 3;
+            position: absolute;
+            content: "";
+          }
+        }
+      }
+    }
+
+    // Improve contrast for the links in paragraphs.
+    @include link-variant(
+      "#{$parent}--#{$color-name} p > a, #{$parent}--#{$color-name} span > a",
+      $link-color,
+      $link-hover-color,
+      false
+    );
+  }
+
+  // Common min-height modifiers used for boxes.
+  @mixin td-box-height-modifiers($parent) {
+    #{$parent} {
+      &--height-min {
+        min-height: 300px;
+      }
+
+      &--height-med {
+        min-height: 400px;
+      }
+
+      &--height-max {
+        min-height: 500px;
+      }
+
+      &--height-full {
+        min-height: 100vh;
+      }
+
+      @include media-breakpoint-up(md) {
+        &--height-min {
+          min-height: 450px;
+        }
+
+        &--height-med {
+          min-height: 500px;
+        }
+
+        &--height-max {
+          min-height: 650px;
+        }
+      }
+    }
+  }
+
+  @include td-box-height-modifiers(".td-box");
+
+  // Styling for section boxes
+  .td-box {
+    .row {
+      padding-left: 5vw;
+      padding-right: 5vw;
+    }
+    table {
+      @extend .td-table;
+    }
+  }
+
+  // Styling for community page link boxes
+
+  .td-box.linkbox {
+    padding: 5vh 5vw;
+  }
+
+  // This allows "painting by numbers"
+  @for $i from 1 through length($td-box-colors) {
+    $c: nth($td-box-colors, $i);
+    $name: $i - 1;
+
+    @include box-variant(".td-box", $name, $c);
+  }
+
+  // Same as above with all the theme color names.
+  @each $color, $value in $colors {
+    @include box-variant(".td-box", $color, $value);
+  }
+
+  @each $color, $value in $theme-colors {
+    @include box-variant(".td-box", $color, $value);
+  }
+
+  @each $color, $value in $grays {
+    @include box-variant(".td-box", $color, $value);
+  }
+
+  // Single dark-mode compatibility override for white boxes:
+  @include color-mode(dark) {
+    .td-box--white {
+      color: var(--bs-body-color);
+      background-color: var(--bs-body-bg);
+      p > a, span > a {
+        color: var(--bs-link-color);
+        &:focus,
+        &:hover {
+          color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+        }
+      }
+      .td-arrow-down::before {
+        border-color: var(--bs-body-bg) transparent transparent transparent;
+      }
+    }
+    .td-box--light:not(.lead-block) {
+      color: var(--bs-body-color);
+      background-color: var(--bs-secondary-bg);
+      p > a, span > a {
+        color: var(--bs-link-color);
+        &:focus,
+        &:hover {
+          color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
+        }
+      }
+      .td-arrow-down::before {
+        border-color: var(--bs-secondary-bg) transparent transparent transparent;
+      }
+    }
+  }
+

assets/scss/_styles_project.scss

@@ -0,0 +1 @@
+@import 'td/code-dark'

assets/scss/_variables_project.scss

@@ -36,6 +36,106 @@ $black: #000 !default;
 
 $code-color: darken($primary, 20%) !default;
 
+// Dark Mode
+    // Theme colours
+// $primary-dark:                      #ff95b8;
+// $secondary-dark:                    #ffcd90;
+// $success-dark:                      #a4aeff;
+// $info-dark:                         #dceeed;
+// $warning-dark:                      #fcaea0;
+// $danger-dark:                       #fcaea0;
+// $light-dark:                        #e7f8f6;
+// $dark-dark:                         #8f8f97;
+
+$primary-dark:                      $primary;
+$secondary-dark:                    $secondary;
+$success-dark:                      $success;
+$info-dark:                         $info;
+$warning-dark:                      $warning;
+$danger-dark:                       $danger;
+$light-dark:                        $light;
+$dark-dark:                         $dark;
+    // Text Emphasis
+$primary-text-emphasis-dark:        tint-color($primary-dark, 40%) !default;
+$secondary-text-emphasis-dark:      tint-color($secondary-dark, 40%) !default;
+$success-text-emphasis-dark:        tint-color($success-dark, 40%) !default;
+$info-text-emphasis-dark:           tint-color($info-dark, 40%) !default;
+$warning-text-emphasis-dark:        tint-color($warning-dark, 40%) !default;
+$danger-text-emphasis-dark:         tint-color($danger-dark, 40%) !default;
+$light-text-emphasis-dark:          $gray-100 !default;
+$dark-text-emphasis-dark:           $gray-300 !default;
+
+    // Background subtle
+$primary-bg-subtle-dark:            shade-color($primary-dark, 80%) !default;
+$secondary-bg-subtle-dark:          shade-color($secondary-dark, 80%) !default;
+$success-bg-subtle-dark:            shade-color($success-dark, 80%) !default;
+$info-bg-subtle-dark:               shade-color($info-dark, 80%) !default;
+$warning-bg-subtle-dark:            shade-color($warning-dark, 80%) !default;
+$danger-bg-subtle-dark:             shade-color($danger-dark, 80%) !default;
+$light-bg-subtle-dark:              $gray-800 !default;
+$dark-bg-subtle-dark:               mix($gray-800, $black) !default;
+
+    // Border subtle
+$primary-border-subtle-dark:        shade-color($primary-dark, 40%) !default;
+$secondary-border-subtle-dark:      shade-color($secondary-dark, 40%) !default;
+$success-border-subtle-dark:        shade-color($success-dark, 40%) !default;
+$info-border-subtle-dark:           shade-color($info-dark, 40%) !default;
+$warning-border-subtle-dark:        shade-color($warning-dark, 40%) !default;
+$danger-border-subtle-dark:         shade-color($danger-dark, 40%) !default;
+$light-border-subtle-dark:          $gray-700 !default;
+$dark-border-subtle-dark:           $gray-800 !default;
+
+$theme-colors-dark: (
+    "primary":            $primary-dark,
+    "secondary":          $secondary-dark,
+    "success":            $success-dark,
+    "info":               $info-dark,
+    "warning":            $warning-dark,
+    "danger":             $danger-dark,
+    "light":              $light-dark,
+    "dark":               $dark-dark,
+);
+
+$theme-colors-text-dark: (
+    "primary":        $primary-text-emphasis-dark,
+    "secondary":      $secondary-text-emphasis-dark,
+);
+
+$theme-colors-bg-subtle-dark: (
+    "primary":        $primary-bg-subtle-dark,
+    "secondary":      $secondary-bg-subtle-dark,
+);
+
+$theme-colors-border-subtle-dark: (
+    "primary":        $primary-bg-subtle-dark,
+    "secondary":      $secondary-bg-subtle-dark,
+);
+
+
+$body-color-dark:                   $gray-300 !default;
+$body-bg-dark:                      $gray-900 !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800 !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800, $gray-900, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-700 !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               inherit !default;
+// $link-color-dark:                   tint-color($primary, 40%) !default;
+$link-color-dark:                   adjust-color($blue, $lightness: -5%) !default;
+$link-shade-percentage:             20% !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$primary-highlight:                 #ff95b8;
+$secondary-highlight:               #ffcd90;
+// $code-color-dark:                   tint-color($code-color, 40%) !default;
+// $mark-color-dark:                   $body-color-dark !default;
+// $mark-bg-dark:                      $yellow-800 !default;
+$component-active-bg-dark:          $primary-dark !default;
+$component-active-color-dark:       $black !default;
+
+    // End Dark Mode //
+
 // UI element colors
 
 $border-color: $gray-300 !default;
@@ -119,8 +219,10 @@ $pagination-disabled-color: $gray-300 !default;
 
 $navbar-dark-color: rgba($white, 0.75) !default;
 $navbar-dark-hover-color: rgba($white, 0.5) !default;
-$navbar-dark-active-color: $white !default;
+$navbar-dark-active-color: $primary-dark !default;
 $navbar-dark-disabled-color: rgba($white, 0.25) !default;
+$navbar-dark-brand-color: $white !default;
+$navbar-dark-brand-hover-color: $primary-dark !default;
 
 
 $navbar-light-color: $black !default;