#6372: Migrate back to BS5 native colors, clean up rack/cable bundle process

netbox/project-static/bundle.js

@@ -30,7 +30,7 @@ const styles = [
   ['styles/_external.scss', 'netbox-external.css'],
   ['styles/_light.scss', 'netbox-light.css'],
   ['styles/_dark.scss', 'netbox-dark.css'],
-  ['styles/_elevations.scss', 'rack_elevation.css'],
+  ['styles/_rack_elevations.scss', 'rack_elevation.css'],
   ['styles/_cable_trace.scss', 'cable_trace.css'],
 ];
 

netbox/project-static/styles/_cable_trace.scss

@@ -1,39 +1,2 @@
-* {
+@import './theme-light.scss';
-    font-family: sans-serif;
+@import './cable-trace.scss';
-    font-size: 14px;
-}
-text {
-    text-anchor: middle;
-    dominant-baseline: middle;
-}
-text.bold {
-  font-weight: bold;
-}
-
-svg {
-  /* Boxes */
-  rect {
-    fill: #e0e0e0;
-    stroke: #606060;
-    stroke-width: 1;
-    .termination {
-      fill: #f0f0f0;
-    }
-  }
-
-  /* Connectors */
-  .connector text {
-    text-anchor: start;
-  }
-  line {
-    stroke-width: 5px;
-  }
-  line.cable-shadow {
-    stroke: #303030;
-    stroke-width: 7px;
-  }
-  line.attachment {
-    stroke: #c0c0c0;
-    stroke-dasharray: 5px,5px;
-  }
-}

netbox/project-static/styles/_elevations.scss

@@ -1,104 +0,0 @@
-// Entry for rack_elevation.css stylesheet.
-
-@import './theme-light.scss';
-
-* {
-  font-family: $font-family-sans-serif;
-  font-size: $font-size-sm;
-}
-rect {
-  box-sizing: border-box;
-}
-text {
-  text-anchor: middle;
-  dominant-baseline: middle;
-}
-
-svg {
-  .rack {
-    background-color: $gray-100;
-    fill: none;
-    stroke: $body-color;
-    stroke-width: 2px;
-  }
-  .slot {
-    fill: $gray-100;
-    stroke: $gray-500;
-    &:hover {
-      fill: $gray-50;
-    }
-    & + .add-device {
-      fill: none;
-    }
-    &:hover + .add-device {
-      fill: $blue;
-    }
-    & .add-device {
-      &:hover {
-        fill: $blue;
-      }
-      &:hover + .slot {
-        fill: $white;
-      }
-    }
-    &.reserved[class] {
-      fill: url(#reserved);
-    }
-    &.reserved:hover[class] {
-      fill: url(#reserved);
-    }
-    &.occupied[class] {
-      fill: url(#occupied);
-    }
-    &.occupied:hover[class] {
-      fill: url(#occupied);
-    }
-    &.blocked[class] {
-      fill: url(#blocked);
-    }
-    &.blocked:hover[class] {
-      fill: url(#blocked);
-    }
-    &.blocked:hover + .add-device {
-      fill: none;
-    }
-  }
-
-  .unit {
-    margin: 0;
-    padding: 5px 0px;
-    fill: $gray-400;
-    font-size: $font-size-sm;
-    font-family: $font-family-sans-serif;
-  }
-  .hidden {
-    visibility: hidden;
-  }
-
-  &[data-netbox-color-mode='dark'] {
-    .rack {
-      background-color: $gray-800;
-    }
-    .slot {
-      fill: $gray-700;
-      stroke: $gray-400;
-      &:hover {
-        fill: $gray-600;
-      }
-      & + .add-device {
-        fill: none;
-      }
-      &:hover + .add-device {
-        fill: $blue-300;
-      }
-    }
-    .add-device {
-      &:hover {
-        fill: $blue-300;
-      }
-      &:hover + .slot {
-        fill: $black;
-      }
-    }
-  }
-}

netbox/project-static/styles/_rack_elevations.scss

@@ -0,0 +1,2 @@
+@import './theme-light.scss';
+@import './rack-elevations.scss';

netbox/project-static/styles/cable-trace.scss

@@ -0,0 +1,57 @@
+// Cable Trace Styles.
+
+:root {
+  // Light Mode Variables.
+  --nbx-trace-node-bg: #{$gray-200};
+  --nbx-trace-termination-bg: #{$gray-100};
+  --nbx-trace-cable-shadow: #{$gray-800};
+  --nbx-trace-attachment: #{$gray-400};
+  &[data-netbox-color-mode='dark'] {
+    // Dark Mode Variables.
+    // Note: only the `theme-light.scss` file is in-scope for simplicity.
+    --nbx-trace-node-bg: #{$gray-900};
+    --nbx-trace-termination-bg: #{$gray-800};
+    --nbx-trace-cable-shadow: #{$gray-200};
+    --nbx-trace-attachment: #{$gray-600};
+  }
+}
+
+* {
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+}
+text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+text.bold {
+  font-weight: bold;
+}
+
+svg {
+  /* Boxes */
+  rect {
+    fill: var(--nbx-trace-node-bg);
+    stroke: var(--nbx-trace-node-bg);
+    stroke-width: 1;
+    .termination {
+      fill: var(--nbx-trace-termination-bg);
+    }
+  }
+
+  /* Connectors */
+  .connector text {
+    text-anchor: start;
+  }
+  line {
+    stroke-width: 5px;
+  }
+  line.cable-shadow {
+    stroke: var(--nbx-trace-cable-shadow);
+    stroke-width: 7px;
+  }
+  line.attachment {
+    stroke: var(--nbx-trace-attachment);
+    stroke-dasharray: 5px, 5px;
+  }
+}

netbox/project-static/styles/netbox.scss

@@ -3,12 +3,11 @@
 @use 'sass:map';
 
 :root {
-  --nbx-logo-color-1: #9cc8f8;
-  --nbx-logo-color-2: #1685fc;
   --nbx-sidebar-bg: #{$gray-100};
   --nbx-sidebar-link-color: #{$gray-800};
   --nbx-sidebar-link-hover-bg: #{$blue-100};
   --nbx-sidebar-title-color: #{$text-muted};
+  --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(#{$black}, 0.25);
   --nbx-breadcrumb-bg: #{$light};
   --nbx-body-bg: #{$white};
   --nbx-body-color: #{$gray-800};
@@ -22,18 +21,16 @@
   --nbx-cable-termination-border-color: #{$gray-300};
   --nbx-search-filter-border-left-color: #{$gray-300};
   --nbx-color-mode-toggle-color: #{$primary};
-  --nbx-stat-badge-bg: #{$gray-600};
 
   body[data-netbox-color-mode='dark'] {
-    --nbx-logo-color-1: #{$white};
+    --nbx-sidebar-bg: #{$gray-900};
-    --nbx-logo-color-2: #{$gray-200};
-    --nbx-sidebar-bg: #{$gray-800};
     --nbx-sidebar-link-color: #{$gray-200};
     --nbx-sidebar-link-hover-bg: #{rgba($blue-300, 0.15)};
-    --nbx-sidebar-title-color: #{$gray-300};
+    --nbx-sidebar-title-color: #{$gray-600};
+    --nbx-sidebar-shadow: inset 0px -25px 20px -25px rgba(#{$white}, 0.05);
     --nbx-breadcrumb-bg: #{$gray-800};
-    --nbx-body-bg: #{$gray-900};
+    --nbx-body-bg: #1b1f22;
-    --nbx-body-color: #{$gray-50};
+    --nbx-body-color: #{$gray-100};
     --nbx-pre-bg: #{$gray-700};
     --nbx-pre-border-color: #{$gray-600};
     --nbx-change-added: #{rgba($green-300, 0.4)};
@@ -44,7 +41,6 @@
     --nbx-cable-termination-border-color: #{$gray-700};
     --nbx-search-filter-border-left-color: #{$gray-600};
     --nbx-color-mode-toggle-color: #{$yellow-300};
-    --nbx-stat-badge-bg: #{$gray-600};
   }
 }
 
@@ -217,10 +213,6 @@ body {
     fill: #1685fc;
     stroke: #1685fc;
   }
-  span.badge.stat-badge {
-    margin-left: map.get($spacers, 2);
-    background-color: var(--nbx-stat-badge-bg);
-  }
 
   &[data-netbox-color-mode='light'] {
     .btn.btn-primary,
@@ -229,7 +221,7 @@ body {
     .nav.nav-pills .nav-item.nav-link.active,
     .nav.nav-pills .nav-item .nav-link.active,
     .nav.nav-pills .nav-item .show > .nav-link {
-      color: $gray-50;
+      color: $gray-100;
     }
   }
   &[data-netbox-color-mode='dark'] {
@@ -246,15 +238,13 @@ body {
     .card table caption {
       color: $gray-300;
     }
-    a:not(.btn) {
-      color: $blue-300;
-    }
     .breadcrumb .breadcrumb-item > a {
-      color: $blue-300;
+      color: $blue-200;
+      &:hover {
+        color: $blue-100;
       }
-    .badge {
-      color: $black;
     }
+
     .card,
     .sidebar {
       .text-muted {
@@ -515,7 +505,7 @@ div.content-container {
 
     // When an sidenav section is open, apply a shadow to provide a visual border.
     &.is-open {
-      box-shadow: inset 0px -25px 20px -25px rgba($black, 0.25);
+      box-shadow: var(--nbx-sidebar-shadow);
     }
 
     & > a.accordion-button {

netbox/project-static/styles/rack-elevations.scss

@@ -0,0 +1,111 @@
+// Rack Elevation Styles.
+
+svg {
+  // Light Mode Variables.
+  --nbx-rack-bg: #{$gray-200};
+  --nbx-rack-border: #{$black};
+  --nbx-rack-slot-bg: #{$gray-200};
+  --nbx-rack-slot-border: #{$gray-500};
+  --nbx-rack-slot-hover-bg: #{$gray-400};
+  --nbx-rack-link-color: #{$blue};
+  --nbx-rack-unit-color: #{$text-muted};
+
+  &[data-netbox-color-mode='dark'] {
+    // Dark Mode Variables.
+    // Note: only the `theme-light.scss` file is in-scope for simplicity.
+    --nbx-rack-bg: #{$gray-800};
+    --nbx-rack-border: #{$gray-600};
+    --nbx-rack-slot-bg: #{$gray-800};
+    --nbx-rack-slot-border: #{$gray-700};
+    --nbx-rack-slot-hover-bg: #{$gray-900};
+    --nbx-rack-link-color: #{$blue-200};
+    --nbx-rack-unit-color: #{$text-muted};
+  }
+}
+
+* {
+  font-family: $font-family-sans-serif;
+  font-size: $font-size-sm;
+}
+rect {
+  box-sizing: border-box;
+}
+text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+svg {
+  // Rack unit numbers along left side of rack elevation.
+  .unit {
+    margin: 0;
+    padding: 5px 0px;
+    // Rack unit text color.
+    fill: var(--nbx-rack-unit-color);
+  }
+
+  .hidden {
+    visibility: hidden;
+  }
+
+  // Rack elevation container.
+  .rack {
+    fill: none;
+    stroke-width: 2px;
+    stroke: var(--nbx-rack-border);
+    background-color: var(--nbx-rack-bg);
+  }
+
+  // Rack unit slot.
+  .slot {
+    fill: var(--nbx-rack-slot-bg);
+    stroke: var(--nbx-rack-slot-border);
+
+    // Change the background color to indicate hover status.
+    &:hover {
+      fill: var(--nbx-rack-slot-hover-bg);
+    }
+
+    // 'Add Device' text.
+    & + .add-device {
+      fill: var(--nbx-rack-link-color);
+      // Hide the text by default.
+      opacity: 0;
+      // The text should not have pointer-events so that the hover state of the slot is not
+      // overridden by the hover state of the text.
+      pointer-events: none;
+    }
+
+    &:hover + .add-device {
+      // When the slot is hovered, show the 'Add Device' text.
+      opacity: 1;
+    }
+
+    // When a reserved slot is hovered, use a more readable color for the 'Add Device' text.
+    &.reserved:hover[class] + .add-device {
+      fill: $black;
+    }
+
+    // Reserved rack unit background color.
+    &.reserved[class],
+    &.reserved:hover[class] {
+      fill: url(#reserved);
+    }
+
+    // Occupied rack unit background color.
+    &.occupied[class],
+    &.occupied:hover[class] {
+      fill: url(#occupied);
+    }
+
+    // Blocked rack unit background color.
+    &.blocked[class],
+    &.blocked:hover[class] {
+      fill: url(#blocked);
+    }
+    // Hide 'Add Device' text when a slot is blocked.
+    &.blocked:hover + .add-device {
+      opacity: 0;
+    }
+  }
+}

netbox/project-static/styles/theme-base.scss

@@ -2,117 +2,6 @@
 
 @import 'bootstrap/scss/functions';
 
-$alt: #13293d;
-$darker: #010101;
-
-$gray: #6b7280;
-$red: #ef4444;
-$yellow: #f59e0b;
-$green: #10b981;
-$blue: #3b82f6;
-$purple: #8b5cf6;
-$pink: #ec4899;
-$cyan: #06b6d4;
-
-$gray-50: #f9fafb;
-$gray-100: #f3f4f6;
-$gray-200: #e5e7eb;
-$gray-300: #d1d5db;
-$gray-400: #9ca3af;
-$gray-500: #6b7280;
-$gray-600: #4b5563;
-$gray-700: #374151;
-$gray-800: #1f2937;
-$gray-900: #111827;
-
-$red-50: #fef2f2;
-$red-100: #fee2e2;
-$red-200: #fecaca;
-$red-300: #fca5a5;
-$red-400: #f87171;
-$red-500: #ef4444;
-$red-600: #dc2626;
-$red-700: #b91c1c;
-$red-800: #991b1b;
-$red-900: #7f1d1d;
-
-$yellow-50: #fffbeb;
-$yellow-100: #fef3c7;
-$yellow-200: #fde68a;
-$yellow-300: #fcd34d;
-$yellow-400: #fbbf24;
-$yellow-500: #f59e0b;
-$yellow-600: #d97706;
-$yellow-700: #b45309;
-$yellow-800: #92400e;
-$yellow-900: #78350f;
-
-$green-50: #ecfdf5;
-$green-100: #d1fae5;
-$green-200: #a7f3d0;
-$green-300: #6ee7b7;
-$green-400: #34d399;
-$green-500: #10b981;
-$green-600: #059669;
-$green-700: #047857;
-$green-800: #065f46;
-$green-900: #064e3b;
-
-$blue-50: #eff6ff;
-$blue-100: #dbeafe;
-$blue-200: #bfdbfe;
-$blue-300: #93c5fd;
-$blue-400: #60a5fa;
-$blue-500: #3b82f6;
-$blue-600: #2563eb;
-$blue-700: #1d4ed8;
-$blue-800: #1e40af;
-$blue-900: #1e3a8a;
-
-$cyan-50: #ecfeff;
-$cyan-100: #cffafe;
-$cyan-200: #a5f3fc;
-$cyan-300: #67e8f9;
-$cyan-400: #22d3ee;
-$cyan-500: #06b6d4;
-$cyan-600: #0891b2;
-$cyan-700: #0e7490;
-$cyan-800: #155e75;
-$cyan-900: #164e63;
-
-$indigo-50: #eef2ff;
-$indigo-100: #e0e7ff;
-$indigo-200: #c7d2fe;
-$indigo-300: #a5b4fc;
-$indigo-400: #818cf8;
-$indigo-500: #6366f1;
-$indigo-600: #4f46e5;
-$indigo-700: #4338ca;
-$indigo-800: #3730a3;
-$indigo-900: #312e81;
-
-$purple-50: #f5f3ff;
-$purple-100: #ede9fe;
-$purple-200: #ddd6fe;
-$purple-300: #c4b5fd;
-$purple-400: #a78bfa;
-$purple-500: #8b5cf6;
-$purple-600: #7c3aed;
-$purple-700: #6d28d9;
-$purple-800: #5b21b6;
-$purple-900: #4c1d95;
-
-$pink-50: #fdf2f8;
-$pink-100: #fce7f3;
-$pink-200: #fbcfe8;
-$pink-300: #f9a8d4;
-$pink-400: #f472b6;
-$pink-500: #ec4899;
-$pink-600: #db2777;
-$pink-700: #be185d;
-$pink-800: #9d174d;
-$pink-900: #831843;
-
 $card-cap-bg: 'unset';
 
 $border-radius-md: 0.375rem;
@@ -139,11 +28,12 @@ $line-height-xs: 1;
 $line-height-sm: 1.25;
 $line-height-lg: 1.75;
 
+@import 'bootstrap/scss/variables';
+
+// Make color palette colors available as theme colors.
+// For example, you could use `.bg-red-100`, if needed.
 $theme-color-addons: (
-  'alt': $alt,
   'gray': $gray-400,
-  'darker': $darker,
-  'gray-50': $gray-50,
   'gray-100': $gray-100,
   'gray-200': $gray-200,
   'gray-300': $gray-300,
@@ -153,7 +43,6 @@ $theme-color-addons: (
   'gray-700': $gray-700,
   'gray-800': $gray-800,
   'gray-900': $gray-900,
-  'red-50': $red-50,
   'red-100': $red-100,
   'red-200': $red-200,
   'red-300': $red-300,
@@ -163,7 +52,6 @@ $theme-color-addons: (
   'red-700': $red-700,
   'red-800': $red-800,
   'red-900': $red-900,
-  'yellow-50': $yellow-50,
   'yellow-100': $yellow-100,
   'yellow-200': $yellow-200,
   'yellow-300': $yellow-300,
@@ -173,7 +61,6 @@ $theme-color-addons: (
   'yellow-700': $yellow-700,
   'yellow-800': $yellow-800,
   'yellow-900': $yellow-900,
-  'green-50': $green-50,
   'green-100': $green-100,
   'green-200': $green-200,
   'green-300': $green-300,
@@ -183,7 +70,6 @@ $theme-color-addons: (
   'green-700': $green-700,
   'green-800': $green-800,
   'green-900': $green-900,
-  'blue-50': $blue-50,
   'blue-100': $blue-100,
   'blue-200': $blue-200,
   'blue-300': $blue-300,
@@ -193,7 +79,6 @@ $theme-color-addons: (
   'blue-700': $blue-700,
   'blue-800': $blue-800,
   'blue-900': $blue-900,
-  'cyan-50': $cyan-50,
   'cyan-100': $cyan-100,
   'cyan-200': $cyan-200,
   'cyan-300': $cyan-300,
@@ -203,7 +88,6 @@ $theme-color-addons: (
   'cyan-700': $cyan-700,
   'cyan-800': $cyan-800,
   'cyan-900': $cyan-900,
-  'indigo-50': $indigo-50,
   'indigo-100': $indigo-100,
   'indigo-200': $indigo-200,
   'indigo-300': $indigo-300,
@@ -213,7 +97,6 @@ $theme-color-addons: (
   'indigo-700': $indigo-700,
   'indigo-800': $indigo-800,
   'indigo-900': $indigo-900,
-  'purple-50': $purple-50,
   'purple-100': $purple-100,
   'purple-200': $purple-200,
   'purple-300': $purple-300,
@@ -223,7 +106,6 @@ $theme-color-addons: (
   'purple-700': $purple-700,
   'purple-800': $purple-800,
   'purple-900': $purple-900,
-  'pink-50': $pink-50,
   'pink-100': $pink-100,
   'pink-200': $pink-200,
   'pink-300': $pink-300,

netbox/project-static/styles/theme-dark.scss

@@ -4,13 +4,13 @@
 @import './theme-base.scss';
 
 $primary: $blue-300;
-$secondary: $gray-400;
+$secondary: $gray-500;
 $success: $green-300;
 $info: $cyan-300;
 $warning: $yellow-300;
 $danger: $red-300;
 $light: $gray-300;
-$dark: $gray-400;
+$dark: $gray-500;
 
 $theme-colors: (
   'primary': $primary,
@@ -23,24 +23,13 @@ $theme-colors: (
   'dark': $dark,
 );
 
-$theme-color-addons-dark: (
-  'alt': #13293d,
-  'darker': #010101,
-);
-
 $theme-colors: map-merge($theme-colors, $theme-color-addons);
-$theme-color-addons: map-merge($theme-color-addons, $theme-color-addons-dark);
-
-// On import, any variables marked `!default` will be overridden by the above.
-@import 'bootstrap/scss/variables';
-
-// Customize the light and dark text colors for use in our color contrast function.
 
 // Gradient
 $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
 
 // Body
-$body-bg: $gray-900;
+$body-bg: #1b1f22;
 $body-color: $white;
 $body-text-align: null;
 $border-color: $gray-700;
@@ -51,8 +40,8 @@ $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
 $text-muted: $gray-400;
 $blockquote-footer-color: $gray-600;
 $mark-bg: #fcf8e3;
-$link-color: $primary;
+$link-color: $blue-200;
-$link-hover-color: $blue-200;
+$link-hover-color: $blue-100;
 
 // Tables
 $table-color: $gray-100;
@@ -126,7 +115,7 @@ $nav-link-hover-color: null;
 $nav-link-disabled-color: $gray-800;
 $nav-tabs-border-color: $border-color;
 $nav-tabs-link-hover-border-color: rgba($gray-800, 0.5) rgba($gray-800, 0.5) $nav-tabs-border-color;
-$nav-tabs-link-active-color: $gray-50;
+$nav-tabs-link-active-color: $gray-100;
 $nav-tabs-link-active-bg: $body-bg;
 $nav-tabs-link-active-border-color: $gray-800 $gray-800 $nav-tabs-link-active-bg;
 $nav-pills-link-active-color: $component-active-color;
@@ -141,8 +130,8 @@ $dropdown-color: $body-color;
 $dropdown-bg: $gray-900;
 $dropdown-border-color: rgba($white, 0.15);
 $dropdown-link-color: $gray-100;
-$dropdown-link-hover-color: shade-color($gray-50, 10%);
+$dropdown-link-hover-color: $white;
-$dropdown-link-hover-bg: $gray-500;
+$dropdown-link-hover-bg: $gray-600;
 $dropdown-link-disabled-color: $gray-800;
 $dropdown-header-color: $gray-300;
 
@@ -169,7 +158,7 @@ $card-inner-border-radius: subtract($card-border-radius, $card-border-width);
 $card-cap-color: null;
 $card-height: null;
 $card-color: null;
-$card-bg: $gray-800;
+$card-bg: $gray-900;
 
 // Accordion
 $accordion-color: $body-color;
@@ -177,8 +166,8 @@ $accordion-bg: transparent;
 $accordion-border-color: $border-color;
 $accordion-button-color: $accordion-color;
 $accordion-button-bg: $accordion-bg;
-$accordion-body-active-bg: rgba($blue-300, 0.1);
+$accordion-body-active-bg: rgba($blue-300, 0.2);
-$accordion-button-active-bg: rgba($blue-300, 0.15);
+$accordion-button-active-bg: rgba($blue-300, 0.25);
 $accordion-button-active-color: $gray-300;
 $accordion-button-focus-border-color: $input-focus-border-color;
 $accordion-icon-color: $accordion-color;
@@ -227,10 +216,10 @@ $progress-bar-color: $white;
 $progress-bar-bg: $primary;
 
 // List group
-$list-group-color: null;
+$list-group-color: $body-color;
 $list-group-bg: $card-bg;
 $list-group-border-color: rgba($white, 0.125);
-$list-group-hover-bg: rgba($gray-50, 0.15);
+$list-group-hover-bg: rgba($gray-100, 0.15);
 $list-group-active-color: $component-active-color;
 $list-group-active-bg: $component-active-bg;
 $list-group-active-border-color: $list-group-active-bg;

netbox/project-static/styles/theme-light.scss

@@ -4,11 +4,6 @@
 
 $input-border-color: $gray-200;
 
-// On import, any variables marked `!default` will be overridden by the above.
-@import 'bootstrap/scss/variables';
-
-// Merge/modify bootstrap variables.
-
 $theme-colors: map-merge($theme-colors, $theme-color-addons);
 
 $light: $gray-100;
@@ -17,7 +12,7 @@ $card-cap-color: $gray-800;
 
 $accordion-bg: transparent;
 $accordion-button-bg: $accordion-bg;
-$accordion-body-active-bg: $gray-50;
+$accordion-body-active-bg: $gray-100;
 $accordion-border-color: $border-color;
 $accordion-button-active-bg: $blue-100;
 $accordion-button-active-color: $gray-800;