Feature UI

netbox/netbox/tables/columns.py

@@ -173,6 +173,7 @@ def __init__(self, *args, **kwargs):
             kwargs['attrs'] = {
                 'th': {
                     'class': 'w-1',
+                    'aria-label': _('Select all'),
                 },
                 'td': {
                     'class': 'w-1',
@@ -284,7 +285,7 @@ def render(self, record, table, **kwargs):
                 if len(self.actions) == 1 or (self.split_actions and idx == 0):
                     dropdown_class = attrs.css_class
                     button = (
-                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button">'
+                        f'<a class="btn btn-sm btn-{attrs.css_class}" href="{url}{url_appendix}" type="button" aria-label="{attrs.title}">'
                         f'<i class="mdi mdi-{attrs.icon}"></i></a>'
                     )
 

netbox/project-static/package.json

@@ -22,6 +22,7 @@
     "validate:formatting:scripts": "prettier -c src/**/*.ts"
   },
   "dependencies": {
+    "@fontsource-variable/plus-jakarta-sans": "^5.0.21",
     "@mdi/font": "7.4.47",
     "@tabler/core": "1.0.0-beta20",
     "bootstrap": "5.3.3",
@@ -32,7 +33,6 @@
     "query-string": "9.1.0",
     "sass": "1.77.8",
     "tom-select": "2.3.1",
-    "typeface-inter": "3.18.1",
     "typeface-roboto-mono": "1.1.13"
   },
   "devDependencies": {

netbox/project-static/styles/_variables.scss

@@ -1,9 +1,10 @@
 // Global variables
 
 // Set base fonts
-$font-family-sans-serif: 'Inter';
+$font-family-sans-serif: 'Plus Jakarta Sans Variable', system-ui, sans-serif;
 // See https://github.com/tabler/tabler/issues/1812
 $font-family-monospace: 'Roboto Mono';
+$font-weight-base: 500;
 
 // Set the navigation sidebar width
 $sidebar-width: 18rem;
@@ -21,3 +22,16 @@ $hover-bg: rgba(var(--tblr-secondary-rgb), 0.08);
 
 // Ensure active nav-pill has a background color in dark mode
 $nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
+
+// Brand colors
+$rich-black: #001423;
+$rich-black-light: #081B2A;
+$rich-black-lighter: #0D202E;
+$rich-black-lightest: #1A2C39;
+$bright-teal: #00F2D4;
+$dark-teal: #00857D;
+
+$primary: $dark-teal;
+
+// Navbar active dropdown border color
+$navbar-active-border-color: $dark-teal;

netbox/project-static/styles/custom/_dashboard.scss

@@ -0,0 +1,12 @@
+// Alter default color for dashboard widget headings
+.grid-stack {
+  .card-header {
+    // Default color of card header changes depending on theme
+    &.bg-default {
+      background: var(--tblr-bg-surface-secondary) !important;
+    }
+    a {
+      color: inherit !important;
+    }
+  }
+}

netbox/project-static/styles/custom/_misc.scss

@@ -28,3 +28,8 @@ span.color-label {
   visibility: hidden;
   opacity: 0;
 }
+
+// NetBox edition text
+.netbox-edition {
+  letter-spacing: .15rem;
+}

netbox/project-static/styles/external.scss

@@ -4,5 +4,5 @@
 @import 'gridstack/dist/gridstack.min.css';
 
 // Fonts
-@import url("../node_modules/typeface-inter/inter.css");
 @import url("../node_modules/typeface-roboto-mono/index.css");
+@import url("../node_modules/@fontsource-variable/plus-jakarta-sans/index.css");

netbox/project-static/styles/netbox.scss

@@ -21,6 +21,7 @@
 
 // Custom styling
 @import 'custom/code';
+@import 'custom/dashboard';
 @import 'custom/interfaces';
 @import 'custom/markdown';
 @import 'custom/misc';

netbox/project-static/styles/overrides/_bootstrap.scss

@@ -20,3 +20,8 @@ hr.dropdown-divider {
   margin-bottom: 0.25rem;
   margin-top: 0.25rem;
 }
+
+// Bootstrap forces the font weight for dropdown items to $font-weight-normal
+.dropdown-item {
+  font-weight: $font-weight-base;
+}