ui:theme - first batch of theme source cleanups.

ease maintenance in the future by cleanup up our stylesheets, most of our styes are already a decade old and might need some love for future improvements. This commit removes some of the unused styles and moves color defines in main.scss to its own file, also a dashboard scss file is added to use the same colorscheme.
opnsense · Nov 28, 2024 · e189443 · e189443
1 parent d314680
commit e189443
Show file tree

Hide file tree

Showing 13 changed files with 802 additions and 283 deletions.
diff --git a/plist b/plist
@@ -2089,10 +2089,7 @@
 /usr/local/opnsense/www/themes/opnsense/assets/fonts/bootstrap/glyphicons-halflings-regular.svg
 /usr/local/opnsense/www/themes/opnsense/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf
 /usr/local/opnsense/www/themes/opnsense/assets/fonts/bootstrap/glyphicons-halflings-regular.woff
-/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss
-/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss
-/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss
-/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.less
+/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-dialog.scss
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-select/less/bootstrap-select.less
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap-select/less/variables.less
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_alerts.scss
@@ -2164,8 +2161,11 @@
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_text-overflow.scss
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss
+/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss
+/usr/local/opnsense/www/themes/opnsense/assets/stylesheets/dashboard.scss
 /usr/local/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
 /usr/local/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css
+/usr/local/opnsense/www/themes/opnsense/build/css/dashboard.css
 /usr/local/opnsense/www/themes/opnsense/build/css/main.css
 /usr/local/opnsense/www/themes/opnsense/build/fonts/LICENSE.SourceSansPro.txt
 /usr/local/opnsense/www/themes/opnsense/build/fonts/SourceSansPro-Bold/SourceSansPro-Bold.eot

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-compass.scss
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-mincer.scss
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/_bootstrap-sprockets.scss
diff --git a/.../assets/stylesheets/bootstrap-dialog.less → .../assets/stylesheets/bootstrap-dialog.scss b/.../assets/stylesheets/bootstrap-dialog.less → .../assets/stylesheets/bootstrap-dialog.scss
@@ -1,3 +1,5 @@
+@import "config/colors";
+
 .modal-backdrop {
   z-index: -1;
 }
@@ -48,7 +50,7 @@
 
     &.type-primary {
         .modal-header {
-            background-color: #D94F00;
+            background-color: map-get($colors, brand-primary);
         }
     }
 

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_scaffolding.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_scaffolding.scss
@@ -27,6 +27,7 @@ html {
 body {
   font-family: $font-family-base;
   font-size: $font-size-base;
+  font-weight: $font-weight-base;
   line-height: $line-height-base;
   color: $text-color;
   background-color: $body-bg;

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss
@@ -18,7 +18,7 @@ $gray:                   lighten(#000, 33.5%) !default; // #555
 $gray-light:             lighten(#000, 46.7%) !default; // #777
 $gray-lighter:           lighten(#000, 93.5%) !default; // #eee
 
-$brand-primary:         map-get($colors, orange) !default;
+$brand-primary:         map-get($colors, brand-primary) !default;
 $brand-success:         #9BD275 !default;
 $brand-info:            #B0CDDB !default;
 $brand-warning:         #f0ad4e !default;
@@ -32,7 +32,7 @@ $brand-danger:          #F05050 !default;
 //** Background color for `<body>`.
 $body-bg:               #fff !default;
 //** Global text color on `<body>`.
-$text-color:            map-get($colors, darkgrey) !default;
+$text-color:            map-get($colors, text-color) !default;
 
 //** Global textual link color.
 $link-color:            $brand-primary !default;
@@ -44,13 +44,14 @@ $link-hover-color:      darken($link-color, 15%) !default;
 //
 //## Font, line-height, and color for body text, headings, and more.
 
-$font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-sans-serif:  "SourceSansProRegular", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
 $font-family-serif:       Georgia, "Times New Roman", Times, serif !default;
 //** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
 $font-family-base:        $font-family-sans-serif !default;
 
 $font-size-base:          14px !default;
+$font-weight-base:        100;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 
@@ -134,7 +135,7 @@ $table-condensed-cell-padding:  5px !default;
 //** Default background color used for all tables.
 $table-bg:                      transparent !default;
 //** Background color used for `.table-striped`.
-$table-bg-accent:               map-get($colors, lightergrey) !default;
+$table-bg-accent:               map-get($colors, table-bg-accent) !default;
 //** Background color used for `.table-hover`.
 $table-bg-hover:                #f5f5f5 !default;
 $table-bg-active:               $table-bg-hover !default;
@@ -350,13 +351,13 @@ $navbar-padding-horizontal:        floor((calc($grid-gutter-width / 2))) !defaul
 $navbar-padding-vertical:          15px;
 $navbar-collapse-max-height:       340px !default;
 
-$navbar-default-color:             map-get($colors, lightgrey) !default;
-$navbar-default-bg:                map-get($colors, darkgrey) !default;
+$navbar-default-color:             map-get($colors, navbar-default-color) !default;
+$navbar-default-bg:                map-get($colors, navbar-default-bg) !default;
 $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
 
 // Navbar links
-$navbar-default-link-color:                map-get($colors, lightgrey) !default;
-$navbar-default-link-hover-color:          map-get($colors, orange) !default;
+$navbar-default-link-color:                map-get($colors, navbar-default-color) !default;
+$navbar-default-link-hover-color:          map-get($colors, brand-primary) !default;
 $navbar-default-link-hover-bg:             transparent !default;
 $navbar-default-link-active-color:         #555 !default;
 $navbar-default-link-active-bg:            darken($navbar-default-bg, 6.5%) !default;
@@ -678,8 +679,8 @@ $list-group-disabled-bg:         $gray-lighter !default;
 //** Text color for content within disabled list items
 $list-group-disabled-text-color: $list-group-disabled-color !default;
 
-$list-group-link-color:         map-get($colors, darkgrey) !default;
-$list-group-link-hover-color:   map-get($colors, orange) !default;
+$list-group-link-color:         map-get($colors, list-group-link-color) !default;
+$list-group-link-hover-color:   map-get($colors, brand-primary) !default;
 $list-group-link-heading-color: #333 !default;
 
 

diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss
@@ -0,0 +1,15 @@
+$colors: (
+  brand-primary: #D94F00,
+  content-background: #F7F7F7,
+  body-background: #fff,
+  navbar-default-color: #F7F7F7,
+  page-content-head-background: #FBFBFB,
+  page-foot-background: #FBFBFB,
+  table-bg-accent: #FBFBFB,
+  login-modal-head-background: #3C3C3B,
+  navbar-default-bg: #3C3C3B,
+  list-group-link-color: #3C3C3B,
+  text-color: #3C3C3B,
+  border-default: #E5E5E5,
+  dashboard-widget-error: #721c24
+);