Playing around with more things

joomla · Sep 3, 2023 · 87856fa · 87856fa
1 parent f99bbfd
commit 87856fa
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 26 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
@@ -0,0 +1,18 @@
+$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%)
+);
diff --git a/build/media_source/templates/administrator/atum/scss/_variables.scss b/build/media_source/templates/administrator/atum/scss/_variables.scss
@@ -180,7 +180,7 @@ $state-success-bg:                 lighten($success, 58%);
 $state-success-border:             hsl(var(--hue),50%,93%);
 
 $state-info-text:                  var(--template-bg-dark-70);
-$state-info-bg:                    var(--white);
+$state-info-bg:                    var(--body-bg);
 $state-info-border:                var(--template-bg-dark-70);
 
 $state-warning-text:               darken($warning, 24%);

diff --git a/build/media_source/templates/administrator/atum/scss/blocks/_global.scss b/build/media_source/templates/administrator/atum/scss/blocks/_global.scss
@@ -20,14 +20,6 @@ body {
     background-color: var(--template-bg-dark-5);
   }
 
-  @if $enable-dark-mode {
-    @include color-mode(dark) {
-      &.admin {
-        background-color: var(--secondary-bg);
-      }
-    }
-  }
-
   &.monochrome {
     filter: grayscale(1);
     &::after {
@@ -205,6 +197,14 @@ a[target="_blank"]::before {
   opacity: .7;
 }
 
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .text-muted {
+      color: var(--template-text-light) !important;
+    }
+  }
+}
+
 .card-columns {
   display: grid;
   grid-gap: 0 15px;

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
@@ -88,17 +88,8 @@
   }
 
   .card-header {
-    display: flex;
-    align-items: center;
-    padding: 1rem 1rem .75rem;
-    font-weight: $font-weight-bold;
     --card-bg: hsla(0, 0%, 100%, .7);
 
-    > [class^="icon-"],
-    > img {
-      margin-inline-end: .5rem;
-    }
-
     .btn {
       margin-top: .25em;
       margin-bottom: .25em;
@@ -165,10 +156,6 @@
   }
 
   .list-group-item {
-    &:hover {
-      background: var(--toolbar-bg);
-    }
-
     a {
       font-weight: 500;
       text-decoration: underline;

diff --git a/build/media_source/templates/administrator/atum/scss/template.scss b/build/media_source/templates/administrator/atum/scss/template.scss
@@ -3,6 +3,7 @@
 
 // Atum Variables
 @import "variables";
+@import "variables-dark";
 
 @import "../../../../../../media/vendor/bootstrap/scss/variables";
 @import "../../../../../../media/vendor/bootstrap/scss/variables-dark";
@@ -79,6 +80,13 @@
   }
 }
 
+@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) {

diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_card.scss
@@ -30,6 +30,7 @@
     font-weight: $font-weight-bold;
     color: var(--template-bg-dark);
     background: var(--card-bg);
+    align-items: center;
 
     > [class^="icon-"],
     > img {

diff --git a/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss b/build/media_source/templates/administrator/atum/scss/vendor/bootstrap/_lists.scss
@@ -1,9 +1,5 @@
 // Lists
 
-.list-group-item {
-  background-color: $list-group-bg;
-}
-
 .list-unstyled .list-unstyled {
   padding-left: 20px;
 }
diff --git a/..._source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss b/..._source/templates/administrator/atum/scss/vendor/joomla-custom-elements/joomla-alert.scss
@@ -1,5 +1,6 @@
 @import "../../variables";
 @import "../../../../../../../../media/vendor/joomla-custom-elements/css/joomla-alert";
+@import "../../../../../../../../media/vendor/bootstrap/scss/mixins/color-mode";
 
 // The following is a restyle for the system alerts
 
@@ -84,6 +85,12 @@
   &[type="notice"] {
     --alert-accent-color: #{$state-info-text};
     --alert-bg-color: #{$state-info-bg};
+
+    @include color-mode(dark) {
+      p {
+        color: var(--body-color);
+      }
+    }
   }
 
   &[type="warning"] {