fix: use tier 1 border radius box shadows

.storybook/components/DesignTokens/Tier2/Borders.js

@@ -33,7 +33,7 @@ export class Tier2Borders extends Component {
 
         <Section title="Border Radius">
           <Grid>
-            {filterTokens(`eds-theme-border-radius`).map(function (
+            {filterTokens(`eds-border-radius-md`).map(function (
               listItem,
               index,
             ) {

.storybook/components/DesignTokens/Tier2/Shadows.js

@@ -9,10 +9,7 @@ export class Tier2Shadows extends Component {
       <div>
         <Section title="Box Shadow">
           <Grid>
-            {filterTokens(`eds-theme-box-shadow`).map(function (
-              listItem,
-              index,
-            ) {
+            {filterTokens(`eds-box-shadow-md`).map(function (listItem, index) {
               return (
                 <GridItem key={'box-shadow-' + index}>
                   <TokenSpecimen

.storybook/components/TokenSpecimen/TokenSpecimen.css

@@ -2,7 +2,7 @@
 
 .token-specimen {
   border: 1px solid var(--eds-theme-color-border-neutral-subtle);
-  box-shadow: 1px solid var(--eds-theme-box-shadow);
+  box-shadow: 1px solid var(--eds-box-shadow-md);
   background: white;
   padding: 1rem;
   display: grid;

.storybook/data/tokens.json

@@ -125,7 +125,6 @@
   "eds-z-index-500": "500",
   "eds-z-index-top": "99999",
   "eds-z-index-bottom": "-100",
-  "eds-theme-border-radius": "4px",
   "eds-theme-border-width": "1px",
   "eds-theme-color-background-neutral-default": "#FFFFFF",
   "eds-theme-color-background-neutral-default-hover": "#F4F6F8",
@@ -377,7 +376,6 @@
   "eds-theme-color-form-label": "#383C43",
   "eds-theme-color-text-highlight-foreground": "#21272D",
   "eds-theme-color-text-highlight-background": "#F5FF8F",
-  "eds-theme-box-shadow": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)",
   "eds-theme-form-border-width": "1px",
   "eds-theme-form-border-radius": "4px",
   "legacy-color-gray-50": "#F8F9FC",

.storybook/recipes/CardWithNotification/CardWithNotification.module.css

@@ -11,7 +11,7 @@
  */
 .card-with-notification {
   /* 1 */
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
   border: var(--eds-theme-color-border-neutral-subtle) solid
     var(--eds-theme-border-width);
 }

src/components/Banner/Banner.module.css

@@ -18,11 +18,11 @@
   position: relative;
 
   background-color: var(--eds-theme-color-neutral-subtle-background);
-  box-shadow: var(--eds-theme-box-shadow); /* 2 */
+  box-shadow: var(--eds-box-shadow-md); /* 2 */
   margin-bottom: var(--eds-size-2); /* 2 */
 
   border-style: solid;
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
   border-width: var(--eds-theme-border-width);
   border-color: var(--messaging-border-color);
 

src/components/Card/Card.module.css

@@ -31,7 +31,7 @@ a.card {
   transition: box-shadow var(--eds-anim-fade-quick) var(--eds-anim-ease);
 
   &:hover {
-    box-shadow: var(--eds-theme-box-shadow);
+    box-shadow: var(--eds-box-shadow-md);
   }
 }
 

src/components/ClickableStyle/ClickableStyle.module.css

@@ -18,7 +18,7 @@
   gap: 0.75rem; /* 3 */
   border-width: var(--eds-theme-border-width);
   border-style: solid;
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
   cursor: pointer;
   text-decoration: none; /* 4 */
   transition: all var(--eds-anim-fade-quick) var(--eds-anim-ease);

src/components/Dropdown/Dropdown.module.css

@@ -54,8 +54,8 @@
 
   background-color: var(--eds-theme-color-background-neutral-default);
 
-  border-radius: var(--eds-theme-border-radius);
-  box-shadow: var(--eds-theme-box-shadow);
+  border-radius: var(--eds-border-radius-md);
+  box-shadow: var(--eds-box-shadow-md);
 
   z-index: var(--eds-z-index-100); /* 1 */
 }

src/components/DropdownButton/DropdownButton.module.css

@@ -18,7 +18,7 @@
 
   border: var(--eds-theme-border-width) solid
     var(--eds-theme-color-border-neutral-strong);
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
 
   display: flex;
   justify-content: space-between; /* 1 */

src/components/DropdownMenu/DropdownMenu.module.css

@@ -16,8 +16,8 @@
   width: 16rem; /* 2 */
   background: var(--eds-theme-color-background-neutral-default);
   border: 1px solid var(--eds-theme-color-border-neutral-subtle);
-  border-radius: var(--eds-theme-border-radius);
-  box-shadow: var(--eds-theme-box-shadow);
+  border-radius: var(--eds-border-radius-md);
+  box-shadow: var(--eds-box-shadow-md);
 
   /**
   * Dropdown menu within active dropdown menu item

src/components/InlineNotification/InlineNotification.module.css

@@ -10,7 +10,7 @@
 .inline-notification {
   display: inline-flex;
   padding: var(--eds-size-quarter) var(--eds-size-half);
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
 }
 
 /**

src/components/ListDetail/ListDetail.module.css

@@ -12,7 +12,7 @@
   border-width: var(--eds-theme-border-width);
   border-style: solid;
   border-color: var(--eds-theme-color-border-neutral-subtle);
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
 
   @media all and (min-width: $eds-bp-lg) {
     display: flex;
@@ -92,7 +92,7 @@
     height: 45%; /* 3 */
     width: 0.0625rem;
     background: var(--eds-theme-color-border-neutral-subtle); /* 4 */
-    border-radius: var(--eds-theme-border-radius);
+    border-radius: var(--eds-border-radius-md);
   }
 
   /**
@@ -144,7 +144,7 @@
    * Before pseudoelement bullet (for non-number variant items)
    * 1) Set to 9px to center the border
    * 2) This is the same color used for the vertical line when list style is "ordered"
-   * 3) Using a percentage here instead of --eds-theme-border-radius because this is a cosmetic element (a cicular bullet), not a typical bordered object
+   * 3) Using a percentage here instead of --eds-border-radius-md because this is a cosmetic element (a cicular bullet), not a typical bordered object
    * 4) Make the pseudoelement bullet dark when li is active
    */
   &:before {
@@ -181,7 +181,7 @@
 * 1) Used on list items using number variant; provides a cosmetic cicular border
 * 2) Using flex to keep the number centered
 * 3) Since this will display as a cirlce, keep height and width equal; should be wide enough to fit a two-digit number
-* 4) Using a percentage here instead of --eds-theme-border-radius because this must always render as a circle
+* 4) Using a percentage here instead of --eds-border-radius-md because this must always render as a circle
 * 5) Make the border dark when li is active
 */
 .list-detail__number {

src/components/NotificationList/NotificationList.module.css

@@ -75,7 +75,7 @@
   outline: none;
   padding: 0;
   flex-shrink: 0;
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
   height: 0.5rem;
   width: 0.5rem;
   background-color: var(--eds-theme-color-text-link-strong);

src/components/Panel/Panel.module.css

@@ -18,7 +18,7 @@
   padding-right: 0;
   border-radius: 0;
   border: none;
-  box-shadow: var(--eds-theme-box-shadow);
+  box-shadow: var(--eds-box-shadow-md);
 }
 
 .panel--flush {

src/components/Popover/Popover.module.css

@@ -22,8 +22,8 @@
   opacity: 0;
   color: var(--eds-theme-color-text-neutral-default);
   background: var(--eds-theme-color-background-neutral-default);
-  border-radius: var(--eds-theme-border-radius);
-  box-shadow: var(--eds-theme-box-shadow);
+  border-radius: var(--eds-border-radius-md);
+  box-shadow: var(--eds-box-shadow-md);
   transition: opacity var(--eds-anim-fade-quick) var(--eds-anim-ease);
   overscroll-behavior-y: contain;
   z-index: var(--eds-z-index-bottom);

src/components/PrimaryNavItem/PrimaryNavItem.module.css

@@ -14,7 +14,7 @@
   text-decoration: none;
   white-space: nowrap;
   padding: var(--eds-size-1);
-  border-radius: var(--eds-theme-border-radius);
+  border-radius: var(--eds-border-radius-md);
   transition: background var(--eds-anim-fade-quick) var(--eds-anim-ease);
 
   &:hover,

src/components/Tooltip/Tooltip.module.css

@@ -11,8 +11,8 @@
   border-style: solid;
   border-width: var(--eds-border-width-sm);
   border-radius: var(--eds-border-radius-lg);
-  box-shadow: var(--eds-theme-box-shadow);
-  
+  box-shadow: var(--eds-box-shadow-md);
+
   @media (prefers-reduced-motion) {
     transition: none;
   }
@@ -21,7 +21,7 @@
 /**
  * 1) Enables opacity fade animation 
  */
-.tooltip[data-state="hidden"] {
+.tooltip[data-state='hidden'] {
   opacity: 0;
 }
 
@@ -66,58 +66,58 @@
   border-color: transparent;
   border-width: var(--eds-size-1);
 
-  content: "";
+  content: '';
 }
 
-.tooltip[data-placement^="top"] :global(.tippy-arrow) {
+.tooltip[data-placement^='top'] :global(.tippy-arrow) {
   left: 0;
 
   transform: translate3d(73px, 0, 0);
 }
 
-.tooltip[data-placement^="bottom"] :global(.tippy-arrow) {
+.tooltip[data-placement^='bottom'] :global(.tippy-arrow) {
   top: 0;
   left: 0;
 
   transform: translate3d(73px, 0, 0);
 }
 
-.tooltip[data-placement^="left"] :global(.tippy-arrow) {
+.tooltip[data-placement^='left'] :global(.tippy-arrow) {
   top: 0;
   right: 0;
 
   transform: translate3d(0, 19px, 0);
 }
 
-.tooltip[data-placement^="right"] :global(.tippy-arrow) {
+.tooltip[data-placement^='right'] :global(.tippy-arrow) {
   top: 0;
   left: 0;
 
   transform: translate3d(0, 25px, 0);
 }
 
-.tooltip[data-placement^="top"] :global(.tippy-arrow::before) {
+.tooltip[data-placement^='top'] :global(.tippy-arrow::before) {
   left: 0;
 
   border-top-color: var(--arrow-color);
   border-bottom-width: 0;
 }
 
-.tooltip[data-placement^="bottom"] :global(.tippy-arrow::before) {
+.tooltip[data-placement^='bottom'] :global(.tippy-arrow::before) {
   left: 0;
 
   border-bottom-color: var(--arrow-color);
   border-top-width: 0;
   top: -7px;
 }
 
-.tooltip[data-placement^="left"] :global(.tippy-arrow::before) {
+.tooltip[data-placement^='left'] :global(.tippy-arrow::before) {
   border-left-color: var(--arrow-color);
   border-right-width: 0;
   right: -7px;
 }
 
-.tooltip[data-placement^="right"] :global(.tippy-arrow::before) {
+.tooltip[data-placement^='right'] :global(.tippy-arrow::before) {
   border-right-color: var(--arrow-color);
   border-left-width: 0;
   left: -7px;

src/design-tokens/tier-2-usage/borders.json

@@ -2,9 +2,6 @@
   "eds": {
     "theme": {
       "border": {
-        "radius": {
-          "value": "{eds.border.radius.md}"
-        },
         "width": {
           "value": "{eds.border.width.sm}"
         }

src/design-tokens/tier-3-component/forms.json

@@ -30,7 +30,7 @@
             "value": "{eds.border.width.sm}"
           },
           "radius": {
-            "value": "{eds.theme.border.radius}"
+            "value": "{eds.border.radius.md}"
           }
         }
       }

src/tokens-dist/css/variables.css

@@ -125,7 +125,6 @@
   --eds-z-index-500: 500;
   --eds-z-index-top: 99999;
   --eds-z-index-bottom: -100;
-  --eds-theme-border-radius: 4px;
   --eds-theme-border-width: 1px;
   --eds-theme-color-background-neutral-default: #FFFFFF;
   --eds-theme-color-background-neutral-default-hover: #F4F6F8;
@@ -377,7 +376,6 @@
   --eds-theme-color-form-label: #383C43;
   --eds-theme-color-text-highlight-foreground: #21272D;
   --eds-theme-color-text-highlight-background: #F5FF8F;
-  --eds-theme-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08);
   --eds-theme-form-border-width: 1px;
   --eds-theme-form-border-radius: 4px;
   --legacy-color-gray-50: #F8F9FC;

src/tokens-dist/json/css-variables-nested.json

@@ -178,7 +178,6 @@
     },
     "theme": {
       "border": {
-        "radius": "var(--eds-theme-border-radius)",
         "width": "var(--eds-theme-border-width)"
       },
       "color": {
@@ -683,7 +682,6 @@
           "background": "var(--eds-theme-color-text-highlight-background)"
         }
       },
-      "box-shadow": "var(--eds-theme-box-shadow)",
       "form": {
         "border": {
           "width": "var(--eds-theme-form-border-width)",

src/tokens-dist/json/variables-nested.json

@@ -178,7 +178,6 @@
     },
     "theme": {
       "border": {
-        "radius": "4px",
         "width": "1px"
       },
       "color": {
@@ -683,7 +682,6 @@
           "background": "#F5FF8F"
         }
       },
-      "box-shadow": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)",
       "form": {
         "border": {
           "width": "1px",

src/tokens-dist/scss/_variables.scss

@@ -125,7 +125,6 @@ $eds-z-index-400: 400 !default;
 $eds-z-index-500: 500 !default;
 $eds-z-index-top: 99999 !default;
 $eds-z-index-bottom: -100 !default;
-$eds-theme-border-radius: 4px !default;
 $eds-theme-border-width: 1px !default;
 $eds-theme-color-background-neutral-default: #FFFFFF !default;
 $eds-theme-color-background-neutral-default-hover: #F4F6F8 !default;
@@ -377,7 +376,6 @@ $eds-theme-color-form-background-hover: #F4F6F8 !default;
 $eds-theme-color-form-label: #383C43 !default;
 $eds-theme-color-text-highlight-foreground: #21272D !default;
 $eds-theme-color-text-highlight-background: #F5FF8F !default;
-$eds-theme-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08) !default;
 $eds-theme-form-border-width: 1px !default;
 $eds-theme-form-border-radius: 4px !default;
 $legacy-color-gray-50: #F8F9FC !default;
@@ -589,7 +587,6 @@ $tokens: (
     ),
     'theme': (
       'border': (
-        'radius': $eds-theme-border-radius,
         'width': $eds-theme-border-width
       ),
       'color': (
@@ -1094,7 +1091,6 @@ $tokens: (
           'background': $eds-theme-color-text-highlight-background
         )
       ),
-      'box-shadow': $eds-theme-box-shadow,
       'form': (
         'border': (
           'width': $eds-theme-form-border-width,