From 641e92a3404a14dc06cb922e62925596493ba74c Mon Sep 17 00:00:00 2001
From: lindsaym-fa <dev@lindsaym.design>
Date: Wed, 22 Nov 2023 14:35:17 -0500
Subject: [PATCH] improve shadow calculations

---
 src/themes/classic.css          | 2 +-
 src/themes/default.css          | 2 +-
 src/themes/depth_0_flat.css     | 6 +++---
 src/themes/depth_1_semiflat.css | 6 +++---
 src/themes/depth_2_chunky.css   | 6 +++---
 src/themes/depth_3_punchy.css   | 6 +++---
 src/themes/depth_4_glossy.css   | 6 +++---
 src/themes/glassy.css           | 2 +-
 src/themes/mellow.css           | 2 +-
 src/themes/playful.css          | 2 +-
 10 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/themes/classic.css b/src/themes/classic.css
index adb36aea9..970cb3422 100644
--- a/src/themes/classic.css
+++ b/src/themes/classic.css
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
     transparent
   );
 
diff --git a/src/themes/default.css b/src/themes/default.css
index 34fbded49..bf4e85e72 100644
--- a/src/themes/default.css
+++ b/src/themes/default.css
@@ -107,7 +107,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
     transparent
   );
 
diff --git a/src/themes/depth_0_flat.css b/src/themes/depth_0_flat.css
index 7307caaf7..bca6e7c98 100644
--- a/src/themes/depth_0_flat.css
+++ b/src/themes/depth_0_flat.css
@@ -12,7 +12,7 @@
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
   --wa-shadow-blur-base: 0;
-  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.5rem);
+  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
   --wa-shadow-blur-level-3: calc(var(--wa-shadow-blur-base) * 2rem);
@@ -20,13 +20,13 @@
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
   --wa-shadow-offset-y-base: 0;
-  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.5rem);
+  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
   --wa-shadow-offset-x-base: 0;
-  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.5rem);
+  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
   --wa-shadow-offset-x-level-3: calc(var(--wa-shadow-offset-x-base) * 2rem);
diff --git a/src/themes/depth_1_semiflat.css b/src/themes/depth_1_semiflat.css
index e71053fb5..003505528 100644
--- a/src/themes/depth_1_semiflat.css
+++ b/src/themes/depth_1_semiflat.css
@@ -12,7 +12,7 @@
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
   --wa-shadow-blur-base: 0.125;
-  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.5rem);
+  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
   --wa-shadow-blur-level-3: calc(var(--wa-shadow-blur-base) * 2rem);
@@ -20,13 +20,13 @@
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
   --wa-shadow-offset-y-base: 0.1;
-  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.5rem);
+  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
   --wa-shadow-offset-x-base: 0;
-  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.5rem);
+  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
   --wa-shadow-offset-x-level-3: calc(var(--wa-shadow-offset-x-base) * 2rem);
diff --git a/src/themes/depth_2_chunky.css b/src/themes/depth_2_chunky.css
index c7acccf9c..3f2d0d622 100644
--- a/src/themes/depth_2_chunky.css
+++ b/src/themes/depth_2_chunky.css
@@ -12,7 +12,7 @@
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
   --wa-shadow-blur-base: 0;
-  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.5rem);
+  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
   --wa-shadow-blur-level-3: calc(var(--wa-shadow-blur-base) * 2rem);
@@ -20,13 +20,13 @@
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
   --wa-shadow-offset-y-base: 0.25;
-  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.5rem);
+  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
   --wa-shadow-offset-x-base: 0;
-  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.5rem);
+  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
   --wa-shadow-offset-x-level-3: calc(var(--wa-shadow-offset-x-base) * 2rem);
diff --git a/src/themes/depth_3_punchy.css b/src/themes/depth_3_punchy.css
index a2086e6d8..aef243d3d 100644
--- a/src/themes/depth_3_punchy.css
+++ b/src/themes/depth_3_punchy.css
@@ -12,7 +12,7 @@
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
   --wa-shadow-blur-base: 0;
-  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.5rem);
+  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
   --wa-shadow-blur-level-3: calc(var(--wa-shadow-blur-base) * 2rem);
@@ -20,13 +20,13 @@
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
   --wa-shadow-offset-y-base: 0.25;
-  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.5rem);
+  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
   --wa-shadow-offset-x-base: 0.25;
-  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.5rem);
+  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
   --wa-shadow-offset-x-level-3: calc(var(--wa-shadow-offset-x-base) * 2rem);
diff --git a/src/themes/depth_4_glossy.css b/src/themes/depth_4_glossy.css
index 10f462c0d..7b1faa388 100644
--- a/src/themes/depth_4_glossy.css
+++ b/src/themes/depth_4_glossy.css
@@ -12,7 +12,7 @@
   /* Shadow blur is designed to scale according to a single base value to ensure consistent and realistic effects.
    * The base value is intended for calculations and is not used by components directly. */
   --wa-shadow-blur-base: 0.375;
-  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.5rem);
+  --wa-shadow-blur-inset: calc(var(--wa-shadow-blur-base) * 0.75rem);
   --wa-shadow-blur-level-1: calc(var(--wa-shadow-blur-base) * 1rem);
   --wa-shadow-blur-level-2: calc(var(--wa-shadow-blur-base) * 1.5rem);
   --wa-shadow-blur-level-3: calc(var(--wa-shadow-blur-base) * 2rem);
@@ -20,13 +20,13 @@
   /* Offset values are used in pre-constructed shadows and may be used when creating custom shadows
    * or transforming elements with shadows. */
   --wa-shadow-offset-y-base: 0.25;
-  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.5rem);
+  --wa-shadow-offset-y-inset: calc(var(--wa-shadow-offset-y-base) * 0.75rem);
   --wa-shadow-offset-y-level-1: calc(var(--wa-shadow-offset-y-base) * 1rem);
   --wa-shadow-offset-y-level-2: calc(var(--wa-shadow-offset-y-base) * 1.5rem);
   --wa-shadow-offset-y-level-3: calc(var(--wa-shadow-offset-y-base) * 2rem);
 
   --wa-shadow-offset-x-base: 0;
-  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.5rem);
+  --wa-shadow-offset-x-inset: calc(var(--wa-shadow-offset-x-base) * 0.75rem);
   --wa-shadow-offset-x-level-1: calc(var(--wa-shadow-offset-x-base) * 1rem);
   --wa-shadow-offset-x-level-2: calc(var(--wa-shadow-offset-x-base) * 1.5rem);
   --wa-shadow-offset-x-level-3: calc(var(--wa-shadow-offset-x-base) * 2rem);
diff --git a/src/themes/glassy.css b/src/themes/glassy.css
index f2dc93782..3ab5a4a05 100644
--- a/src/themes/glassy.css
+++ b/src/themes/glassy.css
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
     transparent
   );
 
diff --git a/src/themes/mellow.css b/src/themes/mellow.css
index 42dc64160..27b5d1a9d 100644
--- a/src/themes/mellow.css
+++ b/src/themes/mellow.css
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
     transparent
   );
 
diff --git a/src/themes/playful.css b/src/themes/playful.css
index dcc22a977..6239a1e90 100644
--- a/src/themes/playful.css
+++ b/src/themes/playful.css
@@ -108,7 +108,7 @@
   /* Shadow specifies the default color for box shadows that indicate elevation. */
   --wa-color-shadow: color-mix(
     in oklab,
-    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 16% + 3%),
+    var(--wa-color-base-05) calc(var(--wa-shadow-blur-base) * 8% + 4%),
     transparent
   );