fix shadows (#721)

primer · Aug 29, 2023 · 01aae86 · 01aae86
1 parent d3d9c88
commit 01aae86
Show file tree

Hide file tree

Showing 6 changed files with 176 additions and 86 deletions.
diff --git a/.changeset/wild-mangos-deny.md b/.changeset/wild-mangos-deny.md
@@ -0,0 +1,5 @@
+---
+'@primer/primitives': patch
+---
+
+Fixing shadows
diff --git a/docs/storybook/stories/Color/Functional/Shadows.stories.tsx b/docs/storybook/stories/Color/Functional/Shadows.stories.tsx
@@ -17,8 +17,7 @@ const shadows = [
   'shadow-floating-small',
   'shadow-floating-medium',
   'shadow-floating-large',
-  'shadow-highlight',
-  'shadow-inset',
+  'shadow-floating-xlarge',
 ]
 
 export const Shadows = () => {
@@ -27,6 +26,23 @@ export const Shadows = () => {
       {shadows.map(shadow => (
         <ColorPreview color={shadow} shadow key={shadow} canvasColor="bgColor-default" shadowBg="bgColor-default" />
       ))}
+
+      <ColorPreview
+        color="shadow-inset"
+        shadow
+        key="shadow-inset"
+        canvasColor="bgColor-muted"
+        shadowBg="bgColor-default"
+        style={{border: `1px solid var(--borderColor-default)`}}
+      />
+      <ColorPreview
+        color="shadow-highlight"
+        shadow
+        key="shadow-highlight"
+        canvasColor="bgColor-default"
+        shadowBg="bgColor-accent-emphasis"
+        style={{border: `1px solid var(--borderColor-muted)`}}
+      />
     </>
   )
 }
diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.css
@@ -7,6 +7,10 @@
   border-radius: var(--borderRadius-medium);
 }
 
+.ColorPreview[data-type='shadow'] {
+  height: 200px;
+}
+
 .ColorPreview-wrap {
   display: grid;
   gap: var(--stack-gap-condensed);
@@ -55,6 +59,12 @@
   border-radius: var(--borderRadius-medium);
 }
 
+[data-shadow] {
+  width: var(--base-size-128);
+  height: var(--base-size-80);
+  border-radius: var(--borderRadius-medium);
+}
+
 [data-border] {
   width: var(--base-size-48);
   height: var(--base-size-48);

diff --git a/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx b/docs/storybook/stories/StorybookComponents/ColorPreview/ColorPreview.tsx
@@ -11,6 +11,7 @@ export type ColorPreviewProps = {
   bgColorBorder?: string
   shadow?: boolean
   shadowBg?: string
+  style?: React.CSSProperties
 }
 
 export function ColorPreview({
@@ -22,20 +23,33 @@ export function ColorPreview({
   bgColorBorder,
   shadow,
   shadowBg,
+  style,
 }: ColorPreviewProps) {
   return (
     <div className="ColorPreview-wrap">
-      <div className="ColorPreview" style={{backgroundColor: `var(--${canvasColor})`}}>
+      <div className="ColorPreview" style={{backgroundColor: `var(--${canvasColor})`}} data-type={shadow && `shadow`}>
         {textColor && (
-          <p style={{color: `var(--${color})`}} data-text>
+          <p style={{color: `var(--${color})`, ...style}} data-text>
             Aa
           </p>
         )}
-        {borderColor && <div style={{borderColor: `var(--${color})`}} data-border></div>}
+        {borderColor && <div style={{borderColor: `var(--${color})`, ...style}} data-border></div>}
         {bgColor && (
-          <div style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`}} data-bg></div>
+          <div
+            style={{backgroundColor: `var(--${color})`, border: `solid 1px var(--${bgColorBorder})`, ...style}}
+            data-bg
+          ></div>
+        )}
+        {shadow && (
+          <div
+            style={{
+              boxShadow: `var(--${color})`,
+              backgroundColor: `var(--${shadowBg})`,
+              ...style,
+            }}
+            data-shadow
+          ></div>
         )}
-        {shadow && <div style={{boxShadow: `var(--${color})`, backgroundColor: `var(--${shadowBg})`}} data-bg></div>}
       </div>
       <InlineCode value={color} copyClipboard />
     </div>

diff --git a/src/tokens/functional/shadow/dark.json5 b/src/tokens/functional/shadow/dark.json5
@@ -102,54 +102,59 @@
   },
   shadow: {
     inset: {
-      $value: [
-        {
-          color: '{base.color.transparent}',
-          alpha: 0,
-          offsetX: '0px',
-          offsetY: '0px',
-          blur: '0px',
-          spread: '0px',
-          inset: false,
-        },
-      ],
+      $value: {
+        color: '{base.color.black}',
+        alpha: 0.24,
+        offsetX: '0px',
+        offsetY: '1px',
+        blur: '0px',
+        spread: '0px',
+        inset: true,
+      },
       $type: 'shadow',
     },
     highlight: {
       $value: {
-        color: '{base.color.transparent}',
-        alpha: 0,
+        color: '{base.color.white}',
+        alpha: 0.12,
         offsetX: '0px',
-        offsetY: '0px',
+        offsetY: '1px',
         blur: '0px',
         spread: '0px',
-        inset: false,
+        inset: true,
       },
       $type: 'shadow',
     },
     resting: {
       xsmall: {
+        $value: {
+          color: '{base.color.black}',
+          alpha: 0.8,
+          offsetX: '0px',
+          offsetY: '1px',
+          blur: '0px',
+          spread: '0px',
+          inset: false,
+        },
+        $type: 'shadow',
+      },
+      small: {
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 0.64,
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '1px',
             blur: '0px',
             spread: '0px',
             inset: false,
           },
-        ],
-        $type: 'shadow',
-      },
-      small: {
-        $value: [
           {
-            color: '{base.color.transparent}',
-            alpha: 0,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
-            offsetY: '0px',
-            blur: '0px',
+            offsetY: '1px',
+            blur: '3px',
             spread: '0px',
             inset: false,
           },
@@ -160,12 +165,11 @@
         $value: [
           {
             color: '{base.color.black}',
-            alpha: 1,
+            alpha: 0.8,
             offsetX: '0px',
             offsetY: '3px',
             blur: '6px',
             spread: '0px',
-            inset: false,
           },
         ],
         $type: 'shadow',
@@ -175,7 +179,7 @@
       small: {
         $value: [
           {
-            color: '{base.color.gray.6}',
+            color: '{base.color.gray.8}',
             alpha: 1,
             offsetX: '0px',
             offsetY: '0px',
@@ -184,10 +188,18 @@
           },
           {
             color: '{base.color.black}',
-            alpha: 0.85,
+            alpha: 0.4,
             offsetX: '0px',
-            offsetY: '16px',
-            blur: '32px',
+            offsetY: '6px',
+            blur: '12px',
+            spread: '-3px',
+          },
+          {
+            color: '{base.color.black}',
+            alpha: 0.4,
+            offsetX: '0px',
+            offsetY: '6px',
+            blur: '18px',
             spread: '0px',
           },
         ],
@@ -196,32 +208,40 @@
       medium: {
         $value: [
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.gray.8}',
+            alpha: 1,
             offsetX: '0px',
-            offsetY: '4px',
-            blur: '32px',
-            spread: '-4px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.09,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '8px',
             blur: '16px',
             spread: '-4px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.16,
+            color: '{base.color.black}',
+            alpha: 0.4,
+            offsetX: '0px',
+            offsetY: '4px',
+            blur: '32px',
+            spread: '-4px',
+          },
+          {
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '24px',
             blur: '48px',
             spread: '-12px',
           },
           {
-            color: '{base.color.gray.4}',
-            alpha: 0.24,
+            color: '{base.color.black}',
+            alpha: 0.4,
             offsetX: '0px',
             offsetY: '48px',
             blur: '96px',
@@ -232,25 +252,41 @@
       },
       large: {
         $value: [
+          {
+            color: '{base.color.gray.8}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.black}',
             alpha: 1,
             offsetX: '0px',
-            offsetY: '8px',
-            blur: '24px',
+            offsetY: '24px',
+            blur: '48px',
             spread: '0px',
           },
         ],
         $type: 'shadow',
       },
       xlarge: {
         $value: [
+          {
+            color: '{base.color.gray.8}',
+            alpha: 1,
+            offsetX: '0px',
+            offsetY: '0px',
+            blur: '0px',
+            spread: '1px',
+          },
           {
             color: '{base.color.black}',
             alpha: 1,
             offsetX: '0px',
-            offsetY: '12px',
-            blur: '48px',
+            offsetY: '32px',
+            blur: '64px',
             spread: '0px',
           },
         ],