From e52a7a5ce5f194a6574114f9be0b3b68bd07a8dc Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Wed, 8 Jan 2025 15:04:27 -0500
Subject: [PATCH] Pre-release theme touchup (#465)

* Fix themed card styles

* Improve lowered surface colors across themes
---
 src/styles/themes/awesome.css                | 9 ++++-----
 src/styles/themes/classic.css                | 2 +-
 src/styles/themes/default/color-semantic.css | 2 +-
 src/styles/themes/mellow.css                 | 6 +++---
 src/styles/themes/tailspin.css               | 2 +-
 5 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/styles/themes/awesome.css b/src/styles/themes/awesome.css
index 41017e349..6ab82957f 100644
--- a/src/styles/themes/awesome.css
+++ b/src/styles/themes/awesome.css
@@ -152,7 +152,7 @@
    */
   --wa-color-surface-raised: var(--wa-color-gray-10);
   --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
   --wa-color-surface-border: var(--wa-color-gray-20);
 
   --wa-color-text-normal: var(--wa-color-gray-95);
@@ -297,14 +297,13 @@ wa-callout {
 }
 
 wa-card {
-  --background-color: var(--wa-color-surface-raised);
-  --border-style: none;
+  background-color: var(--wa-color-surface-raised);
 }
 wa-card::part(header) {
-  border-bottom: var(--border-width) dotted var(--border-color);
+  border-bottom-style: dotted;
 }
 wa-card::part(footer) {
-  border-top: var(--border-width) dotted var(--border-color);
+  border-top-style: dotted;
 }
 
 input[type='checkbox'],
diff --git a/src/styles/themes/classic.css b/src/styles/themes/classic.css
index 93a93678a..c83185317 100644
--- a/src/styles/themes/classic.css
+++ b/src/styles/themes/classic.css
@@ -127,7 +127,7 @@
    */
   --wa-color-surface-raised: var(--wa-color-gray-10);
   --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
   --wa-color-surface-border: var(--wa-color-gray-20);
 
   --wa-color-text-normal: var(--wa-color-gray-80);
diff --git a/src/styles/themes/default/color-semantic.css b/src/styles/themes/default/color-semantic.css
index fc4558cd3..8ff3662dd 100644
--- a/src/styles/themes/default/color-semantic.css
+++ b/src/styles/themes/default/color-semantic.css
@@ -110,7 +110,7 @@
    */
   --wa-color-surface-raised: var(--wa-color-gray-10);
   --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
   --wa-color-surface-border: var(--wa-color-gray-20);
 
   --wa-color-text-normal: var(--wa-color-gray-95);
diff --git a/src/styles/themes/mellow.css b/src/styles/themes/mellow.css
index 668dd32ed..ab7ad7fb1 100644
--- a/src/styles/themes/mellow.css
+++ b/src/styles/themes/mellow.css
@@ -130,7 +130,7 @@
    */
   --wa-color-surface-raised: var(--wa-color-gray-10);
   --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: var(--wa-color-gray-05);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
   --wa-color-surface-border: color-mix(in oklab, var(--wa-color-gray-30), transparent);
 
   --wa-color-text-normal: var(--wa-color-blue-90);
@@ -217,10 +217,10 @@ wa-callout {
 }
 
 wa-card::part(header) {
-  border-bottom: var(--border-width) dotted var(--border-color);
+  border-bottom-style: dotted;
 }
 wa-card::part(footer) {
-  border-top: var(--border-width) dotted var(--border-color);
+  border-top-style: dotted;
 }
 
 input[type='radio'],
diff --git a/src/styles/themes/tailspin.css b/src/styles/themes/tailspin.css
index 86bbd588b..63a6997f5 100644
--- a/src/styles/themes/tailspin.css
+++ b/src/styles/themes/tailspin.css
@@ -135,7 +135,7 @@
    */
   --wa-color-surface-raised: var(--wa-color-gray-10);
   --wa-color-surface-default: var(--wa-color-gray-05);
-  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 10%);
+  --wa-color-surface-lowered: color-mix(in oklab, var(--wa-color-surface-default), black 20%);
   --wa-color-surface-border: rgb(255 255 255 / 0.1);
 
   --wa-color-text-normal: white;