From b7b7858de9fbf2d4d269c45253afd45bca3aa760 Mon Sep 17 00:00:00 2001
From: Masoud Amjadi <mamjadi@contractor.chanzuckerberg.com>
Date: Sun, 25 Feb 2024 08:26:15 -0500
Subject: [PATCH] feat(bases): add corner, borders, shadows, spacing

---
 .storybook/preview.js                         |   2 +-
 .../styles-dictionary/css/variables.css       |   1 +
 .../design-tokens/drop-shadows.json           |   5 +-
 .../styles-dictionary/json/tailwind.json      |   5 +-
 .../styles-dictionary/scss/_variables.scss    |   3 +-
 .../src/core/Bases/Borders/index.stories.tsx  | 137 ++++++++++++++++
 .../src/core/Bases/Borders/style.ts           |  52 ++++++
 .../Colors/components/Colors/color.tsx        |   2 +-
 .../Colors/components/Colors/index.tsx        |   0
 .../Colors/components/Colors/style.ts         |   1 +
 .../Colors/index.stories.tsx                  |   2 +-
 .../src/core/Bases/Corners/index.stories.tsx  | 110 +++++++++++++
 .../src/core/Bases/Corners/style.ts           | 139 ++++++++++++++++
 .../core/Bases/DropShadows/index.stories.tsx  | 116 ++++++++++++++
 .../src/core/Bases/DropShadows/style.ts       |  49 ++++++
 .../src/core/Bases/Spacing/index.stories.tsx  | 102 ++++++++++++
 .../src/core/Bases/Spacing/style.ts           |  91 +++++++++++
 .../src/core/{Foundations => Bases}/utils.ts  |   0
 .../Foundations/Corners/index.stories.tsx     | 148 ------------------
 .../src/core/Foundations/Corners/style.ts     | 139 ----------------
 .../src/core/styles/common/SDSAppTheme.ts     |   2 +-
 21 files changed, 811 insertions(+), 295 deletions(-)
 create mode 100644 packages/components/src/core/Bases/Borders/index.stories.tsx
 create mode 100644 packages/components/src/core/Bases/Borders/style.ts
 rename packages/components/src/core/{Foundations => Bases}/Colors/components/Colors/color.tsx (97%)
 rename packages/components/src/core/{Foundations => Bases}/Colors/components/Colors/index.tsx (100%)
 rename packages/components/src/core/{Foundations => Bases}/Colors/components/Colors/style.ts (99%)
 rename packages/components/src/core/{Foundations => Bases}/Colors/index.stories.tsx (98%)
 create mode 100644 packages/components/src/core/Bases/Corners/index.stories.tsx
 create mode 100644 packages/components/src/core/Bases/Corners/style.ts
 create mode 100644 packages/components/src/core/Bases/DropShadows/index.stories.tsx
 create mode 100644 packages/components/src/core/Bases/DropShadows/style.ts
 create mode 100644 packages/components/src/core/Bases/Spacing/index.stories.tsx
 create mode 100644 packages/components/src/core/Bases/Spacing/style.ts
 rename packages/components/src/core/{Foundations => Bases}/utils.ts (100%)
 delete mode 100644 packages/components/src/core/Foundations/Corners/index.stories.tsx
 delete mode 100644 packages/components/src/core/Foundations/Corners/style.ts

diff --git a/.storybook/preview.js b/.storybook/preview.js
index 0a00a4e51..461cf55c8 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -70,7 +70,7 @@ const preview = {
     options: {
       storySort: {
         method: "alphabetical",
-        order: ["Foundations", "Components", "Data Viz", "Deprecated"],
+        order: ["Bases", "Components", "Data Viz", "Deprecated"],
       },
     },
   },
diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css
index b40cfc080..07218fd41 100644
--- a/packages/components/src/common/styles-dictionary/css/variables.css
+++ b/packages/components/src/common/styles-dictionary/css/variables.css
@@ -149,6 +149,7 @@
   --sds-drop-shadows-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15),
     0px 2px 4px 0px rgba(0, 0, 0, 0.15);
   --sds-drop-shadows-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  --sds-drop-shadows-shadow-none: none;
   --sds-font-color: black;
   --sds-font-font-family-body: "Inter", sans-serif;
   --sds-font-font-family-caps: "Inter", sans-serif;
diff --git a/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json
index a62068a33..f217ba369 100644
--- a/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json
+++ b/packages/components/src/common/styles-dictionary/design-tokens/drop-shadows.json
@@ -5,10 +5,13 @@
         "value": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)"
       },
       "shadowM": {
-        "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
+        "value": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)"
       },
       "shadowS": {
         "value": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+      },
+      "shadowNone": {
+        "value": "none"
       }
     }
   }
diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json
index c790a4126..11e39b782 100644
--- a/packages/components/src/common/styles-dictionary/json/tailwind.json
+++ b/packages/components/src/common/styles-dictionary/json/tailwind.json
@@ -143,8 +143,9 @@
   },
   "boxShadow": {
     "sds-l": "0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3)",
-    "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
-    "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)"
+    "sds-m": "0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15)",
+    "sds-s": "0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25)",
+    "sds-shadownone": "none"
   },
   "colors": {
     "sds-color-primitive-common-black": "#000000",
diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss
index ae3642b17..d99670f7b 100644
--- a/packages/components/src/common/styles-dictionary/scss/_variables.scss
+++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss
@@ -145,8 +145,9 @@ $sds-corners-corner-m: 4px;
 $sds-corners-corner-s: 2px;
 $sds-corners-corner-none: 0px;
 $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
-$sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
+$sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
 $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
+$sds-drop-shadows-shadow-none: none;
 $sds-font-color: black;
 $sds-font-font-family-body: "Inter", sans-serif;
 $sds-font-font-family-caps: "Inter", sans-serif;
diff --git a/packages/components/src/core/Bases/Borders/index.stories.tsx b/packages/components/src/core/Bases/Borders/index.stories.tsx
new file mode 100644
index 000000000..b2a8efcba
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/index.stories.tsx
@@ -0,0 +1,137 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "../../../common/SDSBadges";
+import { useTheme } from "@mui/material";
+import { getBorders } from "../../styles";
+import {
+  StyledBorderBox,
+  StyledBorderVariable,
+  StyledBordersWrapper,
+} from "./style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import CellBasic from "src/core/CellBasic";
+import { copyToClipboard } from "../utils";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Borders",
+} as Meta;
+
+// Corners
+
+const Usage: Record<string, string> = {
+  "$sds-borders-accent-300": "-",
+  "$sds-borders-accent-400":
+    "Secondary buttons, active states of input containers",
+  "$sds-borders-accent-500": "Hover rounded and square buttons",
+  "$sds-borders-accent-600": "Active rounded and square buttons",
+  "$sds-borders-accent-dashed":
+    "Hover states for containers with dashed borders",
+  "$sds-borders-base-100": "Modals and dropdown Menus",
+  "$sds-borders-base-200": "-",
+  "$sds-borders-base-300":
+    "Disabled or non-interactive containers (buttons/inputs/tooltips)",
+  "$sds-borders-base-400": "Input borders (default states)",
+  "$sds-borders-base-500": "-",
+  "$sds-borders-base-black": "Input and dropdown hover states",
+  "$sds-borders-base-dashed": "File upload/drag and drop containers",
+  "$sds-borders-beta-400": "-",
+  "$sds-borders-info-400": "-",
+  "$sds-borders-link-dashed":
+    "Default bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.",
+  "$sds-borders-link-solid":
+    "Hover and Pressed bottom-border for Text Links; border color is inherited from the color used in the paragraph it is part of.",
+  "$sds-borders-negative-400": "Error state on inputs.",
+  "$sds-borders-none": "No borders",
+  "$sds-borders-notice-400": "Warning state on inputs.",
+  "$sds-borders-positive-400": "Success state on inputs.",
+};
+
+const Template = () => {
+  const theme = useTheme();
+  const borders = getBorders({ theme });
+
+  const RenderTableRow = (
+    border: string,
+    group: string | null,
+    name: string
+  ) => {
+    const variable = group
+      ? "$sds-borders-" + group + "-" + name
+      : "$sds-borders-" + name;
+
+    return (
+      <TableRow key={name}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledBorderBox border={border} />
+        </CellComponent>
+
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(`border: ${border};`)}
+        >
+          <StyledBorderVariable>border: {border};</StyledBorderVariable>
+        </CellComponent>
+
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(variable)}
+        >
+          <StyledBorderVariable>{variable}</StyledBorderVariable>
+        </CellComponent>
+
+        <CellBasic
+          verticalAlign="center"
+          primaryText={Usage[variable]}
+          shouldShowTooltipOnHover={false}
+        />
+      </TableRow>
+    );
+  };
+
+  if (borders) {
+    const { none, link, base, ...rest } = borders;
+
+    // eslint-disable-next-line sort-keys
+    const TableBodyContent = Object.entries({ none, link, base, ...rest }).map(
+      ([key, value]) => {
+        if (typeof value === "object") {
+          return Object.entries(value).map(([k, v]) => {
+            return RenderTableRow(v as string, key, k);
+          });
+        } else {
+          return RenderTableRow(value, null, key);
+        }
+      }
+    );
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Example
+          </CellHeader>
+          <CellHeader hideSortIcon>Variable</CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledBordersWrapper>
+        <Template />
+      </StyledBordersWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Borders/style.ts b/packages/components/src/core/Bases/Borders/style.ts
new file mode 100644
index 000000000..0071bf95c
--- /dev/null
+++ b/packages/components/src/core/Bases/Borders/style.ts
@@ -0,0 +1,52 @@
+import { styled } from "@mui/material";
+import { CommonThemeProps, fontCodeXs, getCorners } from "src/core/styles";
+
+export const StyledBordersWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  border: string;
+}
+
+export const StyledBorderBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { border } = props;
+
+    const corners = getCorners(props);
+
+    const BorderWidth = 1;
+    const BoxSize = 60;
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      background-color: transparent;
+      border-radius: ${BorderWidth}px;
+      border: ${border};
+      border-radius: ${corners?.l}px;
+
+      &:hover {
+        animation: pulse 3s infinite;
+      }
+
+      @keyframes pulse {
+        50% {
+          border-radius: 0;
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledBorderVariable = styled("p")`
+  ${fontCodeXs}
+  margin: 0;
+  cursor: pointer;
+
+  &:active {
+    font-weight: bold;
+  }
+`;
diff --git a/packages/components/src/core/Foundations/Colors/components/Colors/color.tsx b/packages/components/src/core/Bases/Colors/components/Colors/color.tsx
similarity index 97%
rename from packages/components/src/core/Foundations/Colors/components/Colors/color.tsx
rename to packages/components/src/core/Bases/Colors/components/Colors/color.tsx
index 0fab7f812..b8afe66ea 100644
--- a/packages/components/src/core/Foundations/Colors/components/Colors/color.tsx
+++ b/packages/components/src/core/Bases/Colors/components/Colors/color.tsx
@@ -7,7 +7,7 @@ import {
 import {
   convertToKebabCase,
   pickTextColorBasedOnBgColor,
-} from "src/core/Foundations/utils";
+} from "src/core/Bases/utils";
 
 interface ColorComponentProps {
   group: string;
diff --git a/packages/components/src/core/Foundations/Colors/components/Colors/index.tsx b/packages/components/src/core/Bases/Colors/components/Colors/index.tsx
similarity index 100%
rename from packages/components/src/core/Foundations/Colors/components/Colors/index.tsx
rename to packages/components/src/core/Bases/Colors/components/Colors/index.tsx
diff --git a/packages/components/src/core/Foundations/Colors/components/Colors/style.ts b/packages/components/src/core/Bases/Colors/components/Colors/style.ts
similarity index 99%
rename from packages/components/src/core/Foundations/Colors/components/Colors/style.ts
rename to packages/components/src/core/Bases/Colors/components/Colors/style.ts
index e49dde431..6f2e617f7 100644
--- a/packages/components/src/core/Foundations/Colors/components/Colors/style.ts
+++ b/packages/components/src/core/Bases/Colors/components/Colors/style.ts
@@ -63,6 +63,7 @@ export const StyledColorCode = styled("span")`
 export const StyledColorVariable = styled("span")`
   ${fontCodeXs}
   font-size: 10px;
+  opacity: 0.5;
 `;
 
 interface IStyledColorsWrapperProps extends CommonThemeProps {
diff --git a/packages/components/src/core/Foundations/Colors/index.stories.tsx b/packages/components/src/core/Bases/Colors/index.stories.tsx
similarity index 98%
rename from packages/components/src/core/Foundations/Colors/index.stories.tsx
rename to packages/components/src/core/Bases/Colors/index.stories.tsx
index 1f7cd5f48..46ab83e24 100644
--- a/packages/components/src/core/Foundations/Colors/index.stories.tsx
+++ b/packages/components/src/core/Bases/Colors/index.stories.tsx
@@ -15,7 +15,7 @@ export default {
     },
     badges: [BADGE.WIP],
   },
-  title: "Foundations/Colors",
+  title: "Bases/Colors",
 } as Meta;
 
 // Primitive
diff --git a/packages/components/src/core/Bases/Corners/index.stories.tsx b/packages/components/src/core/Bases/Corners/index.stories.tsx
new file mode 100644
index 000000000..510a37497
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/index.stories.tsx
@@ -0,0 +1,110 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "../../../common/SDSBadges";
+import { useTheme } from "@mui/material";
+import { Corners, getCorners } from "../../styles";
+import {
+  StyledCornerBox,
+  StyledCornerVariable,
+  StyledCornersWrapper,
+} from "./style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import CellBasic from "src/core/CellBasic";
+import { copyToClipboard } from "../utils";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Corners",
+} as Meta;
+
+// Corners
+
+const Usage: Record<keyof Corners, string> = {
+  l: "Rounded elements (buttons and inputs)",
+  m: "Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.)",
+  none: "Corners on backgrounds for hovered dropdown menus and tables.",
+  s: "Corners on elements that are smaller than 20px × 20px.",
+};
+
+const Title: Record<keyof Corners, string> = {
+  l: "Large Corner",
+  m: "Medium Corner",
+  none: "No Set Corner",
+  s: "Small Corner",
+};
+
+const Template = () => {
+  const theme = useTheme();
+  const corners = getCorners({ theme });
+
+  const RenderTableRow = (size: number, name: keyof Corners) => {
+    const variable = "$sds-corners-corner-" + name;
+
+    return (
+      <TableRow key={name}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledCornerBox size={size} />
+        </CellComponent>
+
+        <CellBasic
+          primaryText={Title[name]}
+          verticalAlign="center"
+          shouldShowTooltipOnHover={false}
+        />
+
+        <CellComponent verticalAlign="center">
+          <StyledCornerVariable>{`${size}px`}</StyledCornerVariable>
+        </CellComponent>
+
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(variable)}
+        >
+          <StyledCornerVariable>{variable}</StyledCornerVariable>
+        </CellComponent>
+
+        <CellBasic
+          verticalAlign="center"
+          primaryText={Usage[name]}
+          shouldShowTooltipOnHover={false}
+        />
+      </TableRow>
+    );
+  };
+
+  if (corners) {
+    const TableBodyContent = Object.entries(corners)
+      .sort((a, b) => b[1] - a[1])
+      .map(([key, value]) => RenderTableRow(value, key as keyof Corners));
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon>Example</CellHeader>
+          <CellHeader hideSortIcon>Corner Type</CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Value
+          </CellHeader>
+          <CellHeader hideSortIcon>Variable</CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledCornersWrapper>
+        <Template />
+      </StyledCornersWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Corners/style.ts b/packages/components/src/core/Bases/Corners/style.ts
new file mode 100644
index 000000000..9bbea4a0c
--- /dev/null
+++ b/packages/components/src/core/Bases/Corners/style.ts
@@ -0,0 +1,139 @@
+import { styled } from "@mui/material";
+import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
+
+export const StyledCornersWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  size: number;
+}
+
+export const StyledCornerBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BorderWidth = 2;
+    const BoxSize = 60;
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      background-color: transparent;
+      border-radius: ${size + BorderWidth}px;
+
+      background-position:  0 0, 0 0, 100% 0, 0 100%;
+      background-size: 10px 100%, 100% 10px, 10px 100% , 100% 10px;
+      background-repeat: no-repeat;
+      background-image:
+        none, // left
+        linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+        linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+        none // bottom
+      ;
+
+      &::after {
+        content: "";
+        position: absolute;
+        background-color: ${colors?.gray[200]};
+        width: ${BoxSize - 2 * BorderWidth}px;
+        height: ${BoxSize - 2 * BorderWidth}px;
+        top: ${BorderWidth}px;
+        left: ${BorderWidth}px;
+        border-radius: ${size}px;
+      }
+
+      &:hover {
+        animation: boxBorderAnimation 2s infinite linear;
+      }
+
+      @keyframes boxBorderAnimation {
+        0% {
+          background-image:
+            none, // left
+            linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+            none // bottom
+          ;
+        }
+        12.5% {
+          background-image:
+            none, // left
+            none, // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%), // right
+            none // bottom
+          ;
+        }
+        25% {
+          background-image:
+            none, // left
+            none, // top
+            linear-gradient(180deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // right
+            linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%) // bottom
+          ;
+        }
+        37.5% {
+          background-image:
+            none, // left
+            none, // top
+            none, // right
+            linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%) // bottom
+          ;
+        }
+        50% {
+          background-image:
+            linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // left
+            none, // top
+            none, // right
+            linear-gradient(270deg, transparent, transparent 50%, ${colors?.blue[400]} 50%) // bottom
+          ;
+        }
+        62.5% {
+          background-image:
+            linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // left
+            none, // top
+            none, // right
+            none // bottom
+          ;
+        }
+        75% {
+          background-image:
+            linear-gradient(0deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // left
+            linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // top
+            none, // right
+            none // bottom
+          ;
+        }
+        87.5% {
+          background-image:
+          none, // left
+          linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // top
+          none, // right
+          none // bottom
+        ;
+        }
+        100% {
+          background-image:
+            none, // left
+            linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
+            linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
+            none // bottom
+          ;
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledCornerVariable = styled("p")`
+  ${fontCodeXs}
+  margin: 0;
+  cursor: pointer;
+
+  &:active {
+    font-weight: bold;
+  }
+`;
diff --git a/packages/components/src/core/Bases/DropShadows/index.stories.tsx b/packages/components/src/core/Bases/DropShadows/index.stories.tsx
new file mode 100644
index 000000000..8ab63a06e
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/index.stories.tsx
@@ -0,0 +1,116 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "../../../common/SDSBadges";
+import { useTheme } from "@mui/material";
+import { getShadows } from "../../styles";
+import {
+  StyledShadowBox,
+  StyledShadowVariable,
+  StyledShadowsWrapper,
+} from "./style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import CellBasic from "src/core/CellBasic";
+import { copyToClipboard } from "../utils";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Drop Shadows",
+} as Meta;
+
+// Drop Shadows
+
+const Usage: Record<string, string> = {
+  l: "Containers that layer on top of all other page content (bottom panels, side panels, modals, etc.)",
+  m: "Containers that are part of a page's content, but appear on user input, layering over primary content (dropdown menus, tooltips, etc.)",
+  none: "No shadows.",
+  s: "Containers that layer closely over content, including images of documents/screens placed in content, and sign up forms.",
+};
+
+const Title: Record<string, string> = {
+  l: "Large Shadow",
+  m: "Medium Shadow",
+  none: "No Shadow",
+  s: "Small Shadow",
+};
+
+const Template = () => {
+  const theme = useTheme();
+  const shadows = getShadows({ theme });
+
+  const RenderTableRow = (shadow: string, name: string) => {
+    const variable = "$sds-drop-shadows-shadow-" + name;
+
+    return (
+      <TableRow key={name}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledShadowBox shadow={shadow} />
+        </CellComponent>
+        <CellBasic
+          primaryText={Title[name]}
+          verticalAlign="center"
+          shouldShowTooltipOnHover={false}
+        />
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(variable)}
+        >
+          <StyledShadowVariable>{variable}</StyledShadowVariable>
+        </CellComponent>
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(`box-shadow: ${shadow};`)}
+        >
+          <StyledShadowVariable>box-shadow: {shadow};</StyledShadowVariable>
+        </CellComponent>
+        <CellBasic
+          verticalAlign="center"
+          primaryText={Usage[name]}
+          shouldShowTooltipOnHover={false}
+          primaryTextWrapLineCount={5}
+        />
+      </TableRow>
+    );
+  };
+
+  if (shadows) {
+    const { l, m, s, none } = shadows;
+
+    // eslint-disable-next-line sort-keys
+    const TableBodyContent = Object.entries({ l, m, s, none }).map(
+      ([key, value]) => RenderTableRow(value, key)
+    );
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Example
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Shadow Type
+          </CellHeader>
+          <CellHeader hideSortIcon>Variable</CellHeader>
+          <CellHeader hideSortIcon>Value</CellHeader>
+          <CellHeader hideSortIcon>Usage</CellHeader>
+        </TableHeader>
+
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledShadowsWrapper>
+        <Template />
+      </StyledShadowsWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/DropShadows/style.ts b/packages/components/src/core/Bases/DropShadows/style.ts
new file mode 100644
index 000000000..16382ae2c
--- /dev/null
+++ b/packages/components/src/core/Bases/DropShadows/style.ts
@@ -0,0 +1,49 @@
+import { styled } from "@mui/material";
+import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
+
+export const StyledShadowsWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IStyledCornerBoxProps extends CommonThemeProps {
+  shadow: string;
+}
+
+export const StyledShadowBox = styled("div")`
+  ${(props: IStyledCornerBoxProps) => {
+    const { shadow } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 60;
+
+    return `
+      position: relative;
+      margin-left: 10px;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      background-color: ${colors?.gray[100]};
+      border-radius: 6px;
+      box-shadow: ${shadow};
+
+      &:hover {
+        animation: boxShadowAnimation 3s infinite;
+      }
+
+      @keyframes boxShadowAnimation {
+        50% {
+          box-shadow: ${shadow};
+        }
+      }
+    `;
+  }}
+`;
+
+export const StyledShadowVariable = styled("p")`
+  ${fontCodeXs}
+  margin: 0;
+  cursor: pointer;
+
+  &:active {
+    font-weight: bold;
+  }
+`;
diff --git a/packages/components/src/core/Bases/Spacing/index.stories.tsx b/packages/components/src/core/Bases/Spacing/index.stories.tsx
new file mode 100644
index 000000000..759ed680b
--- /dev/null
+++ b/packages/components/src/core/Bases/Spacing/index.stories.tsx
@@ -0,0 +1,102 @@
+import { Meta } from "@storybook/react";
+import { BADGE } from "../../../common/SDSBadges";
+import { useTheme } from "@mui/material";
+import { getSpaces } from "../../styles";
+import {
+  StyledInlineSpacingBox,
+  StyledInsetSpacingBox,
+  StyledSpacingVariable,
+  StyledSpacingWrapper,
+  StyledStackedSpacingBox,
+} from "./style";
+import Table from "src/core/Table";
+import TableHeader from "src/core/TableHeader";
+import CellHeader from "src/core/CellHeader";
+import TableRow from "src/core/TableRow";
+import CellComponent from "src/core/CellComponent";
+import { copyToClipboard } from "../utils";
+
+export default {
+  parameters: {
+    badges: [BADGE.WIP],
+  },
+  title: "Bases/Spacing",
+} as Meta;
+
+// Spacing
+
+const Template = () => {
+  const theme = useTheme();
+  const spaces = getSpaces({ theme });
+
+  const RenderTableRow = (size: number, name: string) => {
+    const variable = "$sds-spaces-" + name;
+
+    return (
+      <TableRow key={name} hover={false}>
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledInsetSpacingBox size={size}>{name}</StyledInsetSpacingBox>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledInlineSpacingBox size={size}>{name}</StyledInlineSpacingBox>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center" horizontalAlign="center">
+          <StyledStackedSpacingBox size={size}>{name}</StyledStackedSpacingBox>
+        </CellComponent>
+
+        <CellComponent
+          verticalAlign="center"
+          onClick={() => copyToClipboard(variable)}
+        >
+          <StyledSpacingVariable>{variable}</StyledSpacingVariable>
+        </CellComponent>
+
+        <CellComponent verticalAlign="center">
+          <StyledSpacingVariable>{`${size}px`}</StyledSpacingVariable>
+        </CellComponent>
+      </TableRow>
+    );
+  };
+
+  if (spaces) {
+    const TableBodyContent = Object.entries(spaces)
+      .sort((a, b) => a[1] - b[1])
+      .map(([key, value]) => {
+        return RenderTableRow(value, key);
+      });
+
+    return (
+      <Table>
+        <TableHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Inset Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Inline Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Stacked Spacing
+          </CellHeader>
+          <CellHeader hideSortIcon>Variable</CellHeader>
+          <CellHeader hideSortIcon style={{ width: 40 }}>
+            Value
+          </CellHeader>
+        </TableHeader>
+
+        <tbody>{TableBodyContent}</tbody>
+      </Table>
+    );
+  }
+};
+
+export const Default = {
+  render: () => (
+    <>
+      <StyledSpacingWrapper>
+        <Template />
+      </StyledSpacingWrapper>
+    </>
+  ),
+};
diff --git a/packages/components/src/core/Bases/Spacing/style.ts b/packages/components/src/core/Bases/Spacing/style.ts
new file mode 100644
index 000000000..9bef72115
--- /dev/null
+++ b/packages/components/src/core/Bases/Spacing/style.ts
@@ -0,0 +1,91 @@
+import { styled } from "@mui/material";
+import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
+
+export const StyledSpacingWrapper = styled("div")`
+  max-width: 100%;
+`;
+
+interface IProps extends CommonThemeProps {
+  size: number;
+}
+
+export const StyledInsetSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 100;
+
+    return `
+      position: relative;
+      box-sizing: border-box;
+      width: ${BoxSize}px;
+      height: ${BoxSize}px;
+      border: solid ${size}px rgb(205, 225, 195);
+      color: ${colors?.green[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledInlineSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 100;
+
+    return `
+      position: relative;
+      margin-left: 30px;
+      width: ${size}px;
+      height: ${BoxSize}px;
+      background-color: rgb(250, 230, 210);
+      color: ${colors?.yellow[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledStackedSpacingBox = styled("div")`
+  ${fontCodeXs}
+
+  ${(props: IProps) => {
+    const { size } = props;
+
+    const colors = getColors(props);
+    const BoxSize = 120;
+
+    return `
+      position: relative;
+      height: ${size}px;
+      width: ${BoxSize}px;
+      background-color: rgb(250, 230, 210);
+      color: ${colors?.yellow[600]};
+      font-size: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `;
+  }}
+`;
+
+export const StyledSpacingVariable = styled("p")`
+  ${fontCodeXs}
+  margin: 0;
+  cursor: pointer;
+
+  &:active {
+    font-weight: bold;
+  }
+`;
diff --git a/packages/components/src/core/Foundations/utils.ts b/packages/components/src/core/Bases/utils.ts
similarity index 100%
rename from packages/components/src/core/Foundations/utils.ts
rename to packages/components/src/core/Bases/utils.ts
diff --git a/packages/components/src/core/Foundations/Corners/index.stories.tsx b/packages/components/src/core/Foundations/Corners/index.stories.tsx
deleted file mode 100644
index c8207b08f..000000000
--- a/packages/components/src/core/Foundations/Corners/index.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import { Meta } from "@storybook/react";
-import { BADGE } from "../../../common/SDSBadges";
-import { useTheme } from "@mui/material";
-import { getCorners } from "../../styles";
-import {
-  StyledCornerBox,
-  StyledCornerVariable,
-  StyledCornersWrapper,
-} from "./style";
-import Table from "src/core/Table";
-import TableHeader from "src/core/TableHeader";
-import CellHeader from "src/core/CellHeader";
-import TableRow from "src/core/TableRow";
-import CellComponent from "src/core/CellComponent";
-import CellBasic from "src/core/CellBasic";
-import { copyToClipboard } from "../utils";
-
-export default {
-  parameters: {
-    badges: [BADGE.WIP],
-  },
-  title: "Foundations/Corners",
-} as Meta;
-
-// Corners
-
-const Template = () => {
-  const theme = useTheme();
-  const corners = getCorners({ theme });
-
-  if (corners) {
-    return (
-      <Table>
-        <TableHeader>
-          <CellHeader hideSortIcon>Example</CellHeader>
-          <CellHeader hideSortIcon>Corner Type</CellHeader>
-          <CellHeader hideSortIcon>Variable</CellHeader>
-          <CellHeader hideSortIcon>Usage</CellHeader>
-        </TableHeader>
-        <tbody>
-          <TableRow>
-            <CellComponent verticalAlign="center" horizontalAlign="center">
-              <StyledCornerBox size={corners?.l} />
-            </CellComponent>
-            <CellBasic
-              primaryText="Large Corner"
-              secondaryText={`${corners?.l}px`}
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-            <CellComponent
-              verticalAlign="center"
-              onClick={() => copyToClipboard("$sds-corners-corner-l")}
-            >
-              <StyledCornerVariable>$sds-corners-corner-l</StyledCornerVariable>
-            </CellComponent>
-            <CellBasic
-              verticalAlign="center"
-              primaryText="Rounded elements (buttons and inputs)"
-              shouldShowTooltipOnHover={false}
-            />
-          </TableRow>
-
-          <TableRow>
-            <CellComponent verticalAlign="center" horizontalAlign="center">
-              <StyledCornerBox size={corners?.m} />
-            </CellComponent>
-            <CellBasic
-              primaryText="Medium Corner"
-              secondaryText={`${corners?.m}px`}
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-            <CellComponent
-              verticalAlign="center"
-              onClick={() => copyToClipboard("$sds-corners-corner-m")}
-            >
-              <StyledCornerVariable>$sds-corners-corner-m</StyledCornerVariable>
-            </CellComponent>
-            <CellBasic
-              primaryText="Standard, default radius for corners in UI elements (square buttons, form inputs, modals, tooltips, tags, etc.)"
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-          </TableRow>
-
-          <TableRow>
-            <CellComponent verticalAlign="center" horizontalAlign="center">
-              <StyledCornerBox size={corners?.s} />
-            </CellComponent>
-            <CellBasic
-              primaryText="Small Corner"
-              secondaryText={`${corners?.s}px`}
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-            <CellComponent
-              verticalAlign="center"
-              onClick={() => copyToClipboard("$sds-corners-corner-s")}
-            >
-              <StyledCornerVariable>$sds-corners-corner-s</StyledCornerVariable>
-            </CellComponent>
-            <CellBasic
-              primaryText="Corners on elements that are smaller than 20px × 20px."
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-          </TableRow>
-
-          <TableRow>
-            <CellComponent verticalAlign="center" horizontalAlign="center">
-              <StyledCornerBox size={corners?.none} />
-            </CellComponent>
-            <CellBasic
-              primaryText="No Set Corner"
-              secondaryText={`${corners?.none}px`}
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-            <CellComponent
-              verticalAlign="center"
-              onClick={() => copyToClipboard("$sds-corners-corner-none")}
-            >
-              <StyledCornerVariable>
-                $sds-corners-corner-none
-              </StyledCornerVariable>
-            </CellComponent>
-            <CellBasic
-              primaryText="Corners on backgrounds for hovered dropdown menus and tables."
-              verticalAlign="center"
-              shouldShowTooltipOnHover={false}
-            />
-          </TableRow>
-        </tbody>
-      </Table>
-    );
-  }
-};
-
-export const Default = {
-  render: () => (
-    <>
-      <StyledCornersWrapper>
-        <Template />
-      </StyledCornersWrapper>
-    </>
-  ),
-};
diff --git a/packages/components/src/core/Foundations/Corners/style.ts b/packages/components/src/core/Foundations/Corners/style.ts
deleted file mode 100644
index 891947d97..000000000
--- a/packages/components/src/core/Foundations/Corners/style.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import { styled } from "@mui/material";
-import { getColors, CommonThemeProps, fontCodeXs } from "src/core/styles";
-
-export const StyledCornersWrapper = styled("div")`
-  max-width: 1000px;
-`;
-
-interface IStyledCornerBoxProps extends CommonThemeProps {
-  size: number;
-}
-
-export const StyledCornerBox = styled("div")`
-  ${(props: IStyledCornerBoxProps) => {
-    const { size } = props;
-
-    const colors = getColors(props);
-    const BorderWidth = 2;
-    const BoxSize = 60;
-
-    return `
-      position: relative;
-      margin-left: 10px;
-      width: ${BoxSize}px;
-      height: ${BoxSize}px;
-      background-color: transparent;
-      border-radius: ${size + BorderWidth}px;
-
-      background-position:  0 0, 0 0, 100% 0, 0 100%;
-      background-size: 10px 100%, 100% 10px, 10px 100% , 100% 10px;
-      background-repeat: no-repeat;
-      background-image:
-        none, // left
-        linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
-        linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
-        none // bottom
-      ;
-
-      &::after {
-        content: "";
-        position: absolute;
-        background-color: ${colors?.gray[200]};
-        width: ${BoxSize - 2 * BorderWidth}px;
-        height: ${BoxSize - 2 * BorderWidth}px;
-        top: ${BorderWidth}px;
-        left: ${BorderWidth}px;
-        border-radius: ${size}px;
-      }
-
-      &:hover {
-        animation: boxBorderAnimation 2s infinite linear;
-      }
-
-      @keyframes boxBorderAnimation {
-          0% {
-            background-image:
-              none, // left
-              linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
-              linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
-              none // bottom
-            ;
-          }
-          12.5% {
-            background-image:
-              none, // left
-              none, // top
-              linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%), // right
-              none // bottom
-            ;
-          }
-          25% {
-            background-image:
-              none, // left
-              none, // top
-              linear-gradient(180deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // right
-              linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%) // bottom
-            ;
-          }
-          37.5% {
-            background-image:
-              none, // left
-              none, // top
-              none, // right
-              linear-gradient(270deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%, transparent 100%) // bottom
-            ;
-          }
-          50% {
-            background-image:
-              linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // left
-              none, // top
-              none, // right
-              linear-gradient(270deg, transparent, transparent 50%, ${colors?.blue[400]} 50%) // bottom
-            ;
-          }
-          62.5% {
-            background-image:
-              linear-gradient(0deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // left
-              none, // top
-              none, // right
-              none // bottom
-            ;
-          }
-          75% {
-            background-image:
-              linear-gradient(0deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // left
-              linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // top
-              none, // right
-              none // bottom
-            ;
-          }
-          87.5% {
-            background-image:
-            none, // left
-            linear-gradient(90deg, ${colors?.blue[400]}, ${colors?.blue[400]} 100%), // top
-            none, // right
-            none // bottom
-          ;
-          }
-          100% {
-            background-image:
-              none, // left
-              linear-gradient(90deg, transparent, transparent 50%, ${colors?.blue[400]} 50%), // top
-              linear-gradient(180deg, ${colors?.blue[400]}, ${colors?.blue[400]} 50%, transparent 50%), // right
-              none // bottom
-            ;
-          }
-      }
-    `;
-  }}
-`;
-
-export const StyledCornerVariable = styled("p")`
-  ${fontCodeXs}
-  margin: 0;
-  cursor: pointer;
-
-  &:active {
-    font-weight: bold;
-  }
-`;
diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts
index e56c45aab..6f7bef460 100644
--- a/packages/components/src/core/styles/common/SDSAppTheme.ts
+++ b/packages/components/src/core/styles/common/SDSAppTheme.ts
@@ -361,7 +361,7 @@ SDSAppTheme.borders = {
     "300": `1px solid ${SDSAppTheme.colors.blue[300]}`,
     "400": `1px solid ${SDSAppTheme.colors.blue[400]}`,
     "500": `1px solid ${SDSAppTheme.colors.blue[500]}`,
-    "600": `1px solid${SDSAppTheme.colors.blue[600]}`,
+    "600": `1px solid ${SDSAppTheme.colors.blue[600]}`,
     dashed: `2px dashed ${SDSAppTheme.colors.blue[400]}`,
   },
   base: {