From 23feb10a7d322d0ed810f4dc10f88e86a0e75c11 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Wed, 18 Sep 2024 23:53:25 +0100
Subject: [PATCH] Update menu and message

---
 sass/components/menu.scss    | 121 ++++++++++++++++-------------------
 sass/components/message.scss |  97 ++++++++++------------------
 2 files changed, 90 insertions(+), 128 deletions(-)

diff --git a/sass/components/menu.scss b/sass/components/menu.scss
index 2bee7d5ce..f194ae900 100644
--- a/sass/components/menu.scss
+++ b/sass/components/menu.scss
@@ -3,20 +3,33 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$menu-item-h: cv.getVar("scheme-h");
-$menu-item-s: cv.getVar("scheme-s");
-$menu-item-l: cv.getVar("scheme-main-l");
-$menu-item-background-l: cv.getVar("scheme-main-l");
-$menu-item-background-l-delta: 0%;
-$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
-$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
-$menu-item-color-l: cv.getVar("text-l");
+$menu-item-background-color: cv.getVar("scheme-main") !default;
+$menu-item-color: cv.getVar("text") !default;
+$menu-item-hover-background-color: hsl(
+  from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
+          "hover-background-l-delta"
+        )})
+) !default;
+$menu-item-hover-color: cv.getVar("text-strong") !default;
+$menu-item-active-background-color: hsl(
+  from #{cv.getVar("menu-item-background-color")} h s calc(l + #{cv.getVar(
+          "active-background-l-delta"
+        )})
+) !default;
+$menu-item-active-color: cv.getVar("text-strong") !default;
+$menu-item-selected-background-color: cv.getVar("link") !default;
+$menu-item-selected-color: cv.getVar("link-invert") !default;
+$menu-item-selected-hover-background-color: hsl(
+  from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
+          "hover-background-l-delta"
+        )})
+) !default;
+$menu-item-selected-active-background-color: hsl(
+  from #{cv.getVar("menu-item-selected-background-color")} h s calc(l + #{cv.getVar(
+          "active-background-l-delta"
+        )})
+) !default;
 $menu-item-radius: cv.getVar("radius-small") !default;
-$menu-item-selected-h: cv.getVar("link-h");
-$menu-item-selected-s: cv.getVar("link-s");
-$menu-item-selected-l: cv.getVar("link-l");
-$menu-item-selected-background-l: cv.getVar("link-l");
-$menu-item-selected-color-l: cv.getVar("link-invert-l");
 
 $menu-list-border-left: 1px solid cv.getVar("border") !default;
 $menu-list-line-height: 1.25 !default;
@@ -32,20 +45,17 @@ $menu-label-spacing: 1em !default;
 .#{iv.$class-prefix}menu {
   @include cv.register-vars(
     (
-      "menu-item-h": #{$menu-item-h},
-      "menu-item-s": #{$menu-item-s},
-      "menu-item-l": #{$menu-item-l},
-      "menu-item-background-l": #{$menu-item-background-l},
-      "menu-item-background-l-delta": #{$menu-item-background-l-delta},
-      "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
-      "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
-      "menu-item-color-l": #{$menu-item-color-l},
+      "menu-item-background-color": #{$menu-item-background-color},
+      "menu-item-color": #{$menu-item-color},
+      "menu-item-hover-background-color": #{$menu-item-hover-background-color},
+      "menu-item-hover-color": #{$menu-item-hover-color},
+      "menu-item-active-background-color": #{$menu-item-active-background-color},
+      "menu-item-active-color": #{$menu-item-active-color},
+      "menu-item-selected-background-color": #{$menu-item-selected-background-color},
+      "menu-item-selected-color": #{$menu-item-selected-color},
+      "menu-item-selected-hover-background-color": #{$menu-item-selected-hover-background-color},
+      "menu-item-selected-active-background-color": #{$menu-item-selected-active-background-color},
       "menu-item-radius": #{$menu-item-radius},
-      "menu-item-selected-h": #{$menu-item-selected-h},
-      "menu-item-selected-s": #{$menu-item-selected-s},
-      "menu-item-selected-l": #{$menu-item-selected-l},
-      "menu-item-selected-background-l": #{$menu-item-selected-background-l},
-      "menu-item-selected-color-l": #{$menu-item-selected-color-l},
       "menu-list-border-left": #{$menu-list-border-left},
       "menu-list-line-height": #{$menu-list-line-height},
       "menu-list-link-padding": #{$menu-list-link-padding},
@@ -83,60 +93,41 @@ $menu-label-spacing: 1em !default;
   button,
   .#{iv.$class-prefix}menu-item {
     @extend %reset;
-    background-color: hsl(
-      #{cv.getVar("menu-item-h")},
-      #{cv.getVar("menu-item-s")},
-      calc(
-        #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
-            "menu-item-background-l-delta"
-          )}
-      )
-    );
+    background-color: cv.getVar("menu-item-background-color");
     border-radius: cv.getVar("menu-item-radius");
-    color: hsl(
-      #{cv.getVar("menu-item-h")},
-      #{cv.getVar("menu-item-s")},
-      #{cv.getVar("menu-item-color-l")}
-    );
+    color: cv.getVar("menu-item-color");
     display: block;
     padding: cv.getVar("menu-list-link-padding");
     text-align: left;
     width: 100%;
 
     &:hover {
-      @include cv.register-vars(
-        (
-          "menu-item-background-l-delta": #{cv.getVar(
-              "menu-item-hover-background-l-delta"
-            )},
-        )
-      );
+      background-color: cv.getVar("menu-item-hover-background-color");
+      color: cv.getVar("menu-item-hover-color");
     }
 
     &:active {
-      @include cv.register-vars(
-        (
-          "menu-item-background-l-delta": #{cv.getVar(
-              "menu-item-active-background-l-delta"
-            )},
-        )
-      );
+      background-color: cv.getVar("menu-item-active-background-color");
+      color: cv.getVar("menu-item-active-color");
     }
 
     // Modifiers
     &.#{iv.$class-prefix}is-active,
     &.#{iv.$class-prefix}is-selected {
-      @include cv.register-vars(
-        (
-          "menu-item-h": #{cv.getVar("menu-item-selected-h")},
-          "menu-item-s": #{cv.getVar("menu-item-selected-s")},
-          "menu-item-l": #{cv.getVar("menu-item-selected-l")},
-          "menu-item-background-l": #{cv.getVar(
-              "menu-item-selected-background-l"
-            )},
-          "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
-        )
-      );
+      background-color: cv.getVar("menu-item-selected-background-color");
+      color: cv.getVar("menu-item-selected-color");
+
+      &:hover {
+        background-color: cv.getVar(
+          "menu-item-selected-hover-background-color"
+        );
+      }
+
+      &:active {
+        background-color: cv.getVar(
+          "menu-item-selected-active-background-color"
+        );
+      }
     }
   }
 
diff --git a/sass/components/message.scss b/sass/components/message.scss
index 03196fef8..33eaab11a 100644
--- a/sass/components/message.scss
+++ b/sass/components/message.scss
@@ -4,26 +4,24 @@
 @use "../utilities/extends";
 @use "../utilities/mixins" as mx;
 
-$message-h: cv.getVar("scheme-h");
-$message-s: cv.getVar("scheme-s");
+$message-background-color: cv.getVar("background");
 $message-background-l: cv.getVar("background-l");
-$message-border-l: cv.getVar("border-l");
-$message-border-l-delta: -20% !default;
+$message-color: cv.getVar("text") !default;
+$message-border-color: cv.getVar("border");
 $message-border-style: solid;
 $message-border-width: 0.25em;
-$message-color-l: cv.getVar("text-l");
-$message-header-background-l: cv.getVar("dark-l");
-$message-header-color-l: cv.getVar("text-dark-invert-l");
-$message-radius: cv.getVar("radius") !default;
+$message-header-background-color: cv.getVar("text");
+$message-header-color: cv.getVar("text-invert");
+$message-radius: cv.getVar("radius-large") !default;
 
 $message-header-weight: cv.getVar("weight-semibold") !default;
 $message-header-padding: 1em 1.25em !default;
-$message-header-radius: cv.getVar("radius") !default;
+$message-header-radius: cv.getVar("radius-large") !default;
 
 $message-body-border-width: 0 0 0 4px !default;
 $message-body-color: cv.getVar("text") !default;
 $message-body-padding: 1.25em 1.5em !default;
-$message-body-radius: cv.getVar("radius-small") !default;
+$message-body-radius: cv.getVar("radius-medium") !default;
 
 $message-body-pre-code-background-color: transparent !default;
 
@@ -33,7 +31,10 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
   @include cv.register-vars(
     (
-      "message-border-l-delta": #{$message-border-l-delta},
+      "message-background-color": #{$message-background-color},
+      "message-background-l": #{$message-background-l},
+      "message-color": #{$message-color},
+      "message-border-color": #{$message-border-color},
       "message-radius": #{$message-radius},
       "message-header-weight": #{$message-header-weight},
       "message-header-padding": #{$message-header-padding},
@@ -44,15 +45,10 @@ $message-colors: dv.$colors !default;
       "message-body-radius": #{$message-body-radius},
       "message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
       "message-header-body-border-width": #{$message-header-body-border-width},
-      "message-h": #{$message-h},
-      "message-s": #{$message-s},
-      "message-background-l": #{$message-background-l},
-      "message-border-l": #{$message-border-l},
       "message-border-style": #{$message-border-style},
       "message-border-width": #{$message-border-width},
-      "message-color-l": #{$message-color-l},
-      "message-header-background-l": #{$message-header-background-l},
-      "message-header-color-l": #{$message-header-color-l},
+      "message-header-background-color": #{$message-header-background-color},
+      "message-header-color": #{$message-header-color},
     )
   );
 }
@@ -60,11 +56,7 @@ $message-colors: dv.$colors !default;
 .#{iv.$class-prefix}message {
   @extend %block;
   border-radius: cv.getVar("message-radius");
-  color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-color-l")}
-  );
+  color: cv.getVar("message-color");
   font-size: cv.getVar("size-normal");
 
   strong {
@@ -96,17 +88,11 @@ $message-colors: dv.$colors !default;
     &.#{iv.$class-prefix}is-#{$name} {
       @include cv.register-vars(
         (
-          "message-h": #{cv.getVar($name, "", "-h")},
-          "message-s": #{cv.getVar($name, "", "-s")},
-          "message-border-l":
-            calc(
-              #{cv.getVar($name, "", "-l")} + #{cv.getVar(
-                  "message-border-l-delta"
-                )}
-            ),
-          "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
-          "message-header-background-l": #{cv.getVar($name, "", "-l")},
-          "message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
+          "message-background-color": #{cv.getVar($name, "", "-light")},
+          "message-border-color": #{cv.getVar($name)},
+          "message-color": #{cv.getVar($name, "", "-on-scheme")},
+          "message-header-background-color": #{cv.getVar($name)},
+          "message-header-color": #{cv.getVar($name, "", "-invert")},
         )
       );
     }
@@ -115,18 +101,10 @@ $message-colors: dv.$colors !default;
 
 .#{iv.$class-prefix}message-header {
   align-items: center;
-  background-color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-header-background-l")}
-  );
+  background-color: cv.getVar("message-header-background-color");
   border-start-start-radius: cv.getVar("message-header-radius");
   border-start-end-radius: cv.getVar("message-header-radius");
-  color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-header-color-l")}
-  );
+  color: cv.getVar("message-header-color");
   display: flex;
   font-weight: cv.getVar("message-header-weight");
   justify-content: space-between;
@@ -144,37 +122,30 @@ $message-colors: dv.$colors !default;
     border-width: cv.getVar("message-header-body-border-width");
     border-start-start-radius: 0;
     border-start-end-radius: 0;
+    border-end-end-radius: cv.getVar("message-radius");
+    border-end-start-radius: cv.getVar("message-radius");
   }
 }
 
 .#{iv.$class-prefix}message-body {
   background-color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-background-l")}
-  );
-  border-inline-start-color: hsl(
-    #{cv.getVar("message-h")},
-    #{cv.getVar("message-s")},
-    #{cv.getVar("message-border-l")}
+    from #{cv.getVar("message-background-color")} h s #{cv.getVar(
+        "message-background-l"
+      )}
   );
+  border-inline-start-color: cv.getVar("message-border-color");
   border-inline-start-style: #{cv.getVar("message-border-style")};
   border-inline-start-width: #{cv.getVar("message-border-width")};
-  border-radius: cv.getVar("message-body-radius");
+  border-start-start-radius: 0;
+  border-start-end-radius: cv.getVar("message-radius");
+  border-end-end-radius: cv.getVar("message-radius");
+  border-end-start-radius: 0;
   padding: cv.getVar("message-body-padding");
 
   code,
   pre {
-    background-color: hsl(
-      #{cv.getVar("message-h")},
-      #{cv.getVar("message-s")},
-      #{cv.getVar("message-header-color-l")}
-    );
-    color: hsl(
-      #{cv.getVar("message-h")},
-      #{cv.getVar("message-s")},
-      #{cv.getVar("message-header-background-l")}
-    );
+    background-color: cv.getVar("message-header-color");
+    color: cv.getVar("message-header-background-color");
   }
 
   pre code {