Toolbar and quickicon improvements

joomla · Sep 3, 2023 · 4434651 · 4434651
1 parent 53c01a8
commit 4434651
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 30 deletions.
diff --git a/build/media_source/templates/administrator/atum/scss/_variables-dark.scss b/build/media_source/templates/administrator/atum/scss/_variables-dark.scss
@@ -1,18 +1,5 @@
 $atum-colors-dark: (
-  template-bg-dark:                hsl(var(--hue), 40%, 80%),
-  template-bg-dark-3:              hsl(var(--hue), 40%, 3%),
-  template-bg-dark-5:              hsl(var(--hue), 40%, 5%),
-  template-bg-dark-7:              hsl(var(--hue), 40%, 7%),
-  template-bg-dark-10:             hsl(var(--hue), 40%, 10%),
-  template-bg-dark-15:             hsl(var(--hue), 40%, 15%),
-  template-bg-dark-20:             hsl(var(--hue), 40%, 20%),
-  template-bg-dark-30:             hsl(var(--hue), 40%, 30%),
-  template-bg-dark-40:             hsl(var(--hue), 40%, 40%),
-  template-bg-dark-50:             hsl(var(--hue), 40%, 50%),
-  template-bg-dark-60:             hsl(var(--hue), 40%, 60%),
-  template-bg-dark-65:             hsl(var(--hue), 40%, 65%),
-  template-bg-dark-70:             hsl(var(--hue), 40%, 70%),
-  template-bg-dark-75:             hsl(var(--hue), 40%, 75%),
-  template-bg-dark-80:             hsl(var(--hue), 40%, 80%),
-  template-bg-dark-90:             hsl(var(--hue), 40%, 90%)
-);
+  template-quickicon-color:        var(--template-bg-dark-5),
+) !default;
+
+$link-hover-color-dark: lighten($light-blue, 20%);
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -67,6 +67,7 @@ $atum-colors: (
   template-text-dark:              $atum-text-dark,
   template-special-color:          $dark-blue,
   template-contrast:               $light-blue,
+  template-quickicon-color:        hsl(var(--hue), 30%, 40%),
   template-bg-dark:                hsl(var(--hue), 40%, 20%),
   template-bg-dark-3:              hsl(var(--hue), 40%, 97%),
   template-bg-dark-5:              hsl(var(--hue), 40%, 95%),

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss b/build/media_source/templates/administrator/atum/scss/blocks/_quickicons.scss
@@ -18,9 +18,9 @@
   }
 
   .quickicon {
-    --text-color: hsl(var(--hue), 30%, 40%);
+    --text-color: var(--template-quickicon-color);
     --bg-color: hsl(var(--hue), 60%, 97%);
-    --icon-color: hsl(var(--hue), 30%, 40%);
+    --icon-color: var(--template-quickicon-color);
     --bg-color-hvr: var(--template-bg-dark);
 
     display: flex;
@@ -97,6 +97,16 @@
     }
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .quickicon{
+        --bg-color: var(--template-bg-dark-80);
+        --bg-color-hvr: var(--template-bg-dark-65);
+      }
+    }
+  }
+
+
   .quickicon-info {
     display: flex;
     align-items: flex-end;
@@ -115,7 +125,7 @@
 
       > * {
         margin-bottom: 10px;
-        color: hsl(var(--hue), 30%, 40%);
+        color: var(--template-quickicon-color);
       }
 
       &:hover,

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss b/build/media_source/templates/administrator/atum/scss/blocks/_toolbar.scss
@@ -46,7 +46,7 @@
     font-size: 1rem;
     line-height: $atum-toolbar-line-height;
     color: var(--template-text-dark);
-    background: $white;
+    background: var(--bg-color);
     border-color: hsl(var(--hue),20%,80%);
 
     > span {
@@ -114,6 +114,16 @@
     }
   }
 
+  @if $enable-dark-mode {
+    @include color-mode(dark) {
+      .btn {
+        --subhead-btn-accent: var(--template-text-light);
+        color: var(--template-text-light);
+      }
+    }
+  }
+
+
   .dropdown-toggle {
     &.btn {
       padding-inline-end: 0;

diff --git a/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss b/build/media_source/templates/administrator/atum/scss/pages/_com_cpanel.scss
@@ -132,7 +132,7 @@
     font-size: .875rem;
     font-weight: 700;
     line-height: 1;
-    color: hsl(var(--hue),30%,40%);
+    color: var(--template-quickicon-color);
     background-color: var(--body-bg);
     border: 1px solid var(--body-bg);
     border-radius: $border-radius;
@@ -152,7 +152,7 @@
 
     .cpanel-add-module-icon {
       font-size: 2rem;
-      color: hsl(var(--hue),30%,40%);
+      color: var(--template-quickicon-color);
       margin-inline-end: .5rem;
     }
   }

diff --git a/build/media_source/templates/administrator/atum/scss/template.scss b/build/media_source/templates/administrator/atum/scss/template.scss
@@ -80,13 +80,13 @@
   }
 }
 
-//@if $enable-dark-mode {
-//  @include color-mode(dark, true) {
-//    @each $color, $value in $atum-colors-dark {
-//      --#{$prefix}#{$color}: #{$value};
-//    }
-//  }
-//}
+@if $enable-dark-mode {
+  @include color-mode(dark, true) {
+    @each $color, $value in $atum-colors-dark {
+      --#{$prefix}#{$color}: #{$value};
+    }
+  }
+}
 
 // Forcing reduced motion when set in the user OS
 @media (prefers-reduced-motion: reduce) {