docs(dropshadow): display both drop shadow and box shadow

Author: rise-erpelding

.storybook/foundations/drop-shadow/drop-shadow.mdx

@@ -7,63 +7,80 @@ import * as DropShadowStories from './drop-shadow.stories.js';
 <Title />
 <Description of={DropShadowStories} />
 
-Drop shadow tokens may be used for drop shadows or box shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used.
+Drop shadow tokens may be used for box shadows or drop shadows in CSS. Using `box-shadow` is often preferable to using `filter: drop-shadow()`, but in situations where the shadow must be applied to the alpha channel of the content rather than the border box, or if `box-shadow` is already being used for a different purpose, such as a focus outline, `filter: drop-shadow()` may be used. Note that in cases where `filter: drop-shadow()` is used, the shadow may be more blurred than the design spec due to a difference in how the blur parameter is calculated, and an adjustment by half may be needed.
+
+The opacity values in dark shadow colors are 3x the light values.
 
 These single-layer shadows are an interim solution for shadows until complex tokens (additional design data for the Spectrum Tokens system) are available to support multi-layer shadows.
 
 ## Emphasized Default
-This drop shadow is used to provide emphasis to containers within a page.
-<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
-The opacity values in dark shadow colors are 3x the light values.
+This shadow is used to provide emphasis to containers within a page.
 
+### Box shadow
+<Story of={DropShadowStories.BoxShadowEmphasizedDefault} />
 ```
-filter: drop-shadow(
-  var(--spectrum-drop-shadow-emphasized-default-x)
-  var(--spectrum-drop-shadow-emphasized-default-y)
-  var(--spectrum-drop-shadow-emphasized-default-blur)
-  var(--spectrum-drop-shadow-emphasized-default-color)
-);
-
 box-shadow:
   var(--spectrum-drop-shadow-emphasized-default-x)
   var(--spectrum-drop-shadow-emphasized-default-y)
   var(--spectrum-drop-shadow-emphasized-default-blur)
   var(--spectrum-drop-shadow-emphasized-default-color);
 ```
 
-## Emphasized Hover
-If the whole container is interactive, such as in a select box, the drop shadow becomes elevated on hover.
-<Story of={DropShadowStories.DropShadowEmphasizedHover} />
-
+### Drop shadow
+<Story of={DropShadowStories.DropShadowEmphasizedDefault} />
 ```
 filter: drop-shadow(
-  var(--spectrum-drop-shadow-emphasized-hover-x)
-  var(--spectrum-drop-shadow-emphasized-hover-y)
-  var(--spectrum-drop-shadow-emphasized-hover-blur)
-  var(--spectrum-drop-shadow-emphasized-hover-color)
+  var(--spectrum-drop-shadow-emphasized-default-x)
+  var(--spectrum-drop-shadow-emphasized-default-y)
+  calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2)
+  var(--spectrum-drop-shadow-emphasized-default-color)
 );
+```
+
+## Emphasized Hover
+If the whole container is interactive, such as in a select box, the shadow becomes elevated on hover.
 
+### Box shadow
+<Story of={DropShadowStories.BoxShadowEmphasizedHover} />
+```
 box-shadow:
   var(--spectrum-drop-shadow-emphasized-hover-x)
   var(--spectrum-drop-shadow-emphasized-hover-y)
   var(--spectrum-drop-shadow-emphasized-hover-blur)
   var(--spectrum-drop-shadow-emphasized-hover-color);
 ```
 
-## Elevated
-Elevated drop shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
-<Story of={DropShadowStories.DropShadowElevated} />
+### Drop shadow
+<Story of={DropShadowStories.DropShadowEmphasizedHover} />
 ```
 filter: drop-shadow(
-  var(--spectrum-drop-shadow-elevated-x)
-  var(--spectrum-drop-shadow-elevated-y)
-  var(--spectrum-drop-shadow-elevated-blur)
-  var(--spectrum-drop-shadow-elevated-color)
+  var(--spectrum-drop-shadow-emphasized-hover-x)
+  var(--spectrum-drop-shadow-emphasized-hover-y)
+  calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2)
+  var(--spectrum-drop-shadow-emphasized-hover-color)
 );
+```
 
+## Elevated
+Elevated shadows can be used on containers that appear on top of content, such as menus, coach marks, popovers, and floating bar panels.
+
+### Box shadow
+<Story of={DropShadowStories.BoxShadowElevated} />
+```
 box-shadow:
   var(--spectrum-drop-shadow-elevated-x)
   var(--spectrum-drop-shadow-elevated-y)
   var(--spectrum-drop-shadow-elevated-blur)
   var(--spectrum-drop-shadow-elevated-color);
 ```
+
+### Drop shadow
+<Story of={DropShadowStories.DropShadowElevated} />
+```
+filter: drop-shadow(
+  var(--spectrum-drop-shadow-elevated-x)
+  var(--spectrum-drop-shadow-elevated-y)
+  calc(var(--spectrum-drop-shadow-elevated-blur) / 2)
+  var(--spectrum-drop-shadow-elevated-color)
+);
+```

.storybook/foundations/drop-shadow/drop-shadow.stories.js

@@ -9,17 +9,17 @@ export default {
   tags: ['foundation'],
 }
 
-const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant}) => {
+const DropShadowSwatch = ({rootClass = "spectrum-Foundations-Example-DropShadow-swatch", variant, ...args}) => {
+  const { isDropShadow } = args;
   return html`
   <div class=${classMap({
     [rootClass]: true,
-    [`${rootClass}--${variant}`]: typeof variant !== undefined,
+    [`${rootClass}--${variant}-drop-shadow`]: typeof variant !== undefined && !!isDropShadow,
+    [`${rootClass}--${variant}-box-shadow`]: typeof variant !== undefined && !isDropShadow,
   })}></div>
 `;}
 
-const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => {
-
-  return html`
+const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-container", color, ...args}) => html`
     <div class=${classMap({
       [rootClass]: true,
       "spectrum--light": color === "light",
@@ -28,28 +28,47 @@ const DropShadowBackground = ({rootClass = "spectrum-Foundations-Example-swatch-
       ${DropShadowSwatch(args)}
     </div>
   `;
-}
 
-const DropShadowVariant = ({...args}) => {
-  return html`
+const DropShadowVariant = ({...args}) => html`
   <div class="spectrum-Foundations-Example-variant-container">
     ${DropShadowBackground({...args, color: "light"})}
     ${DropShadowBackground({...args, color: "dark"})}
   </div>
-`;}
+`;
 
 
 export const DropShadowEmphasizedDefault = DropShadowVariant.bind({});
 DropShadowEmphasizedDefault.args = {
   variant: "emphasized-default",
+  isDropShadow: true,
 };
 
 export const DropShadowEmphasizedHover = DropShadowVariant.bind({});
 DropShadowEmphasizedHover.args = {
   variant: "emphasized-hover",
+  isDropShadow: true,
 };
 
 export const DropShadowElevated = DropShadowVariant.bind({});
 DropShadowElevated.args = {
   variant: "elevated",
+  isDropShadow: true,
+};
+
+export const BoxShadowEmphasizedDefault = DropShadowVariant.bind({});
+BoxShadowEmphasizedDefault.args = {
+  variant: "emphasized-default",
+  isDropShadow: false,
+};
+
+export const BoxShadowEmphasizedHover = DropShadowVariant.bind({});
+BoxShadowEmphasizedHover.args = {
+  variant: "emphasized-hover",
+  isDropShadow: false,
+};
+
+export const BoxShadowElevated = DropShadowVariant.bind({});
+BoxShadowElevated.args = {
+  variant: "elevated",
+  isDropShadow: false,
 };

.storybook/foundations/drop-shadow/index.css

@@ -24,44 +24,77 @@ governing permissions and limitations under the License.
   background-color: var(--spectrum-gray-75); /* matches dark mode design spec rgb(34, 34, 34) */
 }
 
-.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow {
   box-shadow:
     var(--spectrum-drop-shadow-emphasized-default-x)
     var(--spectrum-drop-shadow-emphasized-default-y)
     var(--spectrum-drop-shadow-emphasized-default-blur)
     var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color));
 }
 
-.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default,
-.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default {
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
+  filter: drop-shadow(
+    var(--spectrum-drop-shadow-emphasized-default-x)
+    var(--spectrum-drop-shadow-emphasized-default-y)
+    calc(var(--spectrum-drop-shadow-emphasized-default-blur) / 2) /* adjust blur by half of box-shadow */
+    var(--mod-drop-shadow-emphasized-default-color, var(--spectrum-drop-shadow-emphasized-default-color))
+  );
+}
+
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-box-shadow,
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-default-drop-shadow {
 /* adjustment because color tokens do not work properly on foundations pages */
   --mod-drop-shadow-emphasized-default-color: var(--spectrum-drop-shadow-color-100);
 }
 
-.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
   box-shadow:
     var(--spectrum-drop-shadow-emphasized-hover-x)
     var(--spectrum-drop-shadow-emphasized-hover-y)
     var(--spectrum-drop-shadow-emphasized-hover-blur)
     var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color));
 }
 
-.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover,
-.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover {
+.spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow {
+  filter: drop-shadow(
+    var(--spectrum-drop-shadow-emphasized-hover-x)
+    var(--spectrum-drop-shadow-emphasized-hover-y)
+    calc(var(--spectrum-drop-shadow-emphasized-hover-blur) / 2) /* adjust blur by half of box-shadow */
+    var(--mod-drop-shadow-emphasized-hover-color, var(--spectrum-drop-shadow-emphasized-hover-color))
+  );
+}
+
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-drop-shadow,
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--emphasized-hover-box-shadow {
 /* adjustment because color tokens do not work properly on foundations pages */
   --mod-drop-shadow-emphasized-hover-color: var(--spectrum-drop-shadow-color-200);
 }
 
-.spectrum-Foundations-Example-DropShadow-swatch--elevated {
+.spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
   box-shadow:
     var(--spectrum-drop-shadow-elevated-x)
     var(--spectrum-drop-shadow-elevated-y)
     var(--spectrum-drop-shadow-elevated-blur)
     var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color));
 }
 
-.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated,
-.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated {
+.spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow {
+  filter: drop-shadow(
+    var(--spectrum-drop-shadow-elevated-x)
+    var(--spectrum-drop-shadow-elevated-y)
+    calc(var(--spectrum-drop-shadow-elevated-blur) / 2) /* adjust blur by half of box-shadow */
+    var(--mod-drop-shadow-elevated-color, var(--spectrum-drop-shadow-elevated-color))
+  );
+}
+
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-drop-shadow,
+.spectrum--light .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow,
+.spectrum--dark .spectrum-Foundations-Example-DropShadow-swatch--elevated-box-shadow {
 /* adjustment because color tokens do not work properly on foundations pages */
   --mod-drop-shadow-elevated-color: var(--spectrum-drop-shadow-color-200);
 }