diff --git a/netbox/project-static/dist/netbox-dark.css b/netbox/project-static/dist/netbox-dark.css index 4cb2f191d..a53e70f51 100644 Binary files a/netbox/project-static/dist/netbox-dark.css and b/netbox/project-static/dist/netbox-dark.css differ diff --git a/netbox/project-static/dist/netbox-light.css b/netbox/project-static/dist/netbox-light.css index 71549145b..29c3ad3c7 100644 Binary files a/netbox/project-static/dist/netbox-light.css and b/netbox/project-static/dist/netbox-light.css differ diff --git a/netbox/project-static/dist/netbox-print.css b/netbox/project-static/dist/netbox-print.css index f292f7bd8..23d0be306 100644 Binary files a/netbox/project-static/dist/netbox-print.css and b/netbox/project-static/dist/netbox-print.css differ diff --git a/netbox/project-static/styles/theme-base.scss b/netbox/project-static/styles/theme-base.scss index 26a1811bc..97f6dd020 100644 --- a/netbox/project-static/styles/theme-base.scss +++ b/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; diff --git a/netbox/project-static/styles/theme-dark.scss b/netbox/project-static/styles/theme-dark.scss index 43c954740..2db29ad38 100644 --- a/netbox/project-static/styles/theme-dark.scss +++ b/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, - 'green': $green-300, + + // General-purpose palette '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)); diff --git a/netbox/project-static/styles/theme-light.scss b/netbox/project-static/styles/theme-light.scss index 0ca85319b..d417e1bf6 100644 --- a/netbox/project-static/styles/theme-light.scss +++ b/netbox/project-static/styles/theme-light.scss @@ -2,23 +2,42 @@ @import './theme-base.scss'; -$theme-colors: map-merge( - $theme-colors, - ( - 'primary': #337ab7, - 'info': #54d6f0, - 'red': $red-500, - 'yellow': $yellow-500, - 'green': $green-500, - 'blue': $blue-500, - 'cyan': $cyan-500, - 'indigo': $indigo-500, - 'purple': $purple-500, - 'pink': $pink-500, - ) -); +// Theme colors (BS5 classes) +$primary: #337ab7; +$secondary: $gray-600; +$success: $green-500; +$info: #54d6f0; +$warning: $yellow-500; +$danger: $red-500; +$light: $gray-200; +$dark: $gray-800; -$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;