Simplify theme color palette

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

@@ -33,95 +33,6 @@ $darkest: #171b1d;
 
 @import '../node_modules/bootstrap/scss/variables';
 
-// Make color palette colors available as theme colors.
-// For example, you could use `.bg-red-100`, if needed.
-$theme-color-addons: (
-  'darker': $darker,
-  'darkest': $darkest,
-  'gray': $gray-400,
-  'gray-100': $gray-100,
-  'gray-200': $gray-200,
-  'gray-300': $gray-300,
-  'gray-400': $gray-400,
-  'gray-500': $gray-500,
-  'gray-600': $gray-600,
-  'gray-700': $gray-700,
-  'gray-800': $gray-800,
-  'gray-900': $gray-900,
-  'red-100': $red-100,
-  'red-200': $red-200,
-  'red-300': $red-300,
-  'red-400': $red-400,
-  'red-500': $red-500,
-  'red-600': $red-600,
-  'red-700': $red-700,
-  'red-800': $red-800,
-  'red-900': $red-900,
-  'yellow-100': $yellow-100,
-  'yellow-200': $yellow-200,
-  'yellow-300': $yellow-300,
-  'yellow-400': $yellow-400,
-  'yellow-500': $yellow-500,
-  'yellow-600': $yellow-600,
-  'yellow-700': $yellow-700,
-  'yellow-800': $yellow-800,
-  'yellow-900': $yellow-900,
-  'green-100': $green-100,
-  'green-200': $green-200,
-  'green-300': $green-300,
-  'green-400': $green-400,
-  'green-500': $green-500,
-  'green-600': $green-600,
-  'green-700': $green-700,
-  'green-800': $green-800,
-  'green-900': $green-900,
-  'blue-100': $blue-100,
-  'blue-200': $blue-200,
-  'blue-300': $blue-300,
-  'blue-400': $blue-400,
-  'blue-500': $blue-500,
-  'blue-600': $blue-600,
-  'blue-700': $blue-700,
-  'blue-800': $blue-800,
-  'blue-900': $blue-900,
-  'cyan-100': $cyan-100,
-  'cyan-200': $cyan-200,
-  'cyan-300': $cyan-300,
-  'cyan-400': $cyan-400,
-  'cyan-500': $cyan-500,
-  'cyan-600': $cyan-600,
-  'cyan-700': $cyan-700,
-  'cyan-800': $cyan-800,
-  'cyan-900': $cyan-900,
-  'indigo-100': $indigo-100,
-  'indigo-200': $indigo-200,
-  'indigo-300': $indigo-300,
-  'indigo-400': $indigo-400,
-  'indigo-500': $indigo-500,
-  'indigo-600': $indigo-600,
-  'indigo-700': $indigo-700,
-  'indigo-800': $indigo-800,
-  'indigo-900': $indigo-900,
-  'purple-100': $purple-100,
-  'purple-200': $purple-200,
-  'purple-300': $purple-300,
-  'purple-400': $purple-400,
-  'purple-500': $purple-500,
-  'purple-600': $purple-600,
-  'purple-700': $purple-700,
-  'purple-800': $purple-800,
-  'purple-900': $purple-900,
-  'pink-100': $pink-100,
-  'pink-200': $pink-200,
-  'pink-300': $pink-300,
-  'pink-400': $pink-400,
-  'pink-500': $pink-500,
-  'pink-600': $pink-600,
-  'pink-700': $pink-700,
-  'pink-800': $pink-800,
-  'pink-900': $pink-900,
-);
-
 // This is the same value as the default from Bootstrap, but it needs to be in scope prior to
 // importing _variables.scss from Bootstrap.
 $btn-close-width: 1em;

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

@@ -3,6 +3,7 @@
 @use 'sass:map';
 @import './theme-base';
 
+// Theme colors (BS5 classes)
 $primary: $blue-300;
 $secondary: $gray-500;
 $success: $green-300;
@@ -13,6 +14,7 @@ $light: $gray-300;
 $dark: $gray-500;
 
 $theme-colors: (
+  // BS5 theme colors
   'primary': $primary,
   'secondary': $secondary,
   'success': $success,
@@ -21,18 +23,23 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'dark': $dark,
-  'red': $red-300,
+
-  'yellow': $yellow-300,
+  // General-purpose palette
-  'green': $green-300,
   'blue': $blue-300,
-  'cyan': $cyan-300,
   'indigo': $indigo-300,
   'purple': $purple-300,
   'pink': $pink-300,
+  'red': $red-300,
+  'orange': $orange-300,
+  'yellow': $yellow-300,
+  'green': $green-300,
+  'teal': $teal-300,
+  'cyan': $cyan-300,
+  'gray': $gray-300,
+  'black': $black,
+  'white': $white,
 );
 
-$theme-colors: map-merge($theme-colors, $theme-color-addons);
-
 // Gradient
 $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));
 

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

@@ -2,23 +2,42 @@
 
 @import './theme-base.scss';
 
-$theme-colors: map-merge(
+// Theme colors (BS5 classes)
-  $theme-colors,
+$primary: #337ab7;
-  (
+$secondary: $gray-600;
-    'primary': #337ab7,
+$success: $green-500;
-    'info': #54d6f0,
+$info: #54d6f0;
-    'red': $red-500,
+$warning: $yellow-500;
-    'yellow': $yellow-500,
+$danger: $red-500;
-    'green': $green-500,
+$light: $gray-200;
-    'blue': $blue-500,
+$dark: $gray-800;
-    'cyan': $cyan-500,
-    'indigo': $indigo-500,
-    'purple': $purple-500,
-    'pink': $pink-500,
-  )
-);
 
-$theme-colors: map-merge($theme-colors, $theme-color-addons);
+$theme-colors: (
+  // BS5 theme colors
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+
+  // General-purpose palette
+  'blue': $blue-500,
+  'indigo': $indigo-500,
+  'purple': $purple-500,
+  'pink': $pink-500,
+  'red': $red-500,
+  'orange': $orange-500,
+  'yellow': $yellow-500,
+  'green': $green-500,
+  'teal': $teal-500,
+  'cyan': $cyan-500,
+  'gray': $gray-500,
+  'black': $black,
+  'white': $white,
+);
 
 $light: $gray-200;