feat!: adjust responsive and spacing tokens/config

- sync token names and values with design
- adjust usage in relevant components
- add in spacing tokens for EDS spacing units
- update snapshots

.storybook/components/Docs/Guidelines/Layout.stories.mdx

@@ -1,29 +1,33 @@
 import { Canvas, Meta } from '@storybook/blocks';
-import {InlineNotificationV2 as InlineNotification} from "../../../../src";
 
 <Meta title="Documentation/Defining Layout" />
 
 # Layout
 
-Please refer to our documentation [on ZeroHeight](https://eds.czi.design/styleguide/s/36770/p/17f0a9-layout/b/66febf)
-for suggested alternatives and patterns.
+Layout for pages is a combination of spacing units between components, and responsive changes based on the available viewport. EDS provides
+configururation to use with tailwind, if desired. At the core, EDS also provides tokens to use, which align with spacing units defined in design.
 
-For more information on what TailwindCSS supplies, check out the following links:
+For more information on what Tailwind supplies, check out the following links:
 
-* https://tailwindcss.com/docs/columns
-* https://tailwindcss.com/docs/container
-* https://tailwindcss.com/docs/display
+* [Tailwind Columns](https://tailwindcss.com/docs/columns)
+* [Tailwind Container](https://tailwindcss.com/docs/container)
+* [Tailwind Display](https://tailwindcss.com/docs/display)
 
 ## Spacing and alignment
 
-EDS components do not include margin properties as spacing between components should be handled primarily with
+EDS components do not include external margin properties as spacing between components should be handled primarily with
 utility classes or similar custom classes.
 
-<InlineNotification title="TODO-AH: define and document internal/external spacing tokens"/>
-
 However, it's important to be able to control spacing between components, so EDS works well with tailwind utility 
 classes like [margin](https://tailwindcss.com/docs/margin).
 
+* [EDS Size Token Documentation](?path=/story/design-tokens-tier-1-definitions--sizes)
+
+Below, we use one of the size units to demonstrate how to use EDS sizing utility classes (with tokens).
+
 ```jsx
-<InlineNotification title="lorem ipsum dolor sit amet" className="mb-5" />
+<InlineNotification title="lorem ipsum dolor sit amet" className="mx-size-5" />
 ```
+
+Just like with [standard tailwind spacing values](https://tailwindcss.com/docs/customizing-spacing), the `size-X` will correspond to those used in design, AND
+be available across all the documented spacing utilities. For now, we provide these along side the built-in utilities, for compatibility.

src/components/Modal/Modal.module.css

@@ -241,10 +241,10 @@
 
   min-height: 10.75rem;
 
-  @media all and (min-height: $eds-bp-sm-2) {
+  @media all and (min-height: $eds-bp-sm) {
     min-height: 19.75rem;
   }
-  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm) {
     flex-direction: row;
   }
 
@@ -259,7 +259,7 @@
     flex: 1;
     font: var(--eds-theme-typography-headline-secondary-lg);
 
-    @media all and (min-width: $eds-bp-sm-2) {
+    @media all and (min-width: $eds-bp-sm) {
       margin-bottom: calc(var(--eds-size-3) / 16 * 1rem);
     }
     @media all and (min-width: $eds-bp-xl) {
@@ -282,11 +282,11 @@
   height: 8.5rem;
 
   /* For mobile landscape orientation. */
-  @media all and (min-width: $eds-bp-sm-2) {
+  @media all and (min-width: $eds-bp-sm) {
     display: none;
   }
 
-  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm-2) {
+  @media all and (min-width: $eds-bp-md) and (min-height: $eds-bp-sm) {
     display: block;
     width: 14rem;
     height: 14rem;

src/components/Table/StackedCardsToTable.tsx

@@ -12,7 +12,7 @@ export const StackedCardsToTable = () => {
   /**
    * Display data as cards if mobile, table if not.
    */
-  const tableBreakpoint = parseInt(breakpoint['eds-bp-md'], 10) * 16;
+  const tableBreakpoint = parseInt(breakpoint['eds-bp-md'], 10);
   const updateScreenSize = debounce(
     () => {
       if (window.innerWidth >= tableBreakpoint && !isTable) {

src/design-tokens/tier-1-definitions/breakpoints.js

@@ -6,12 +6,12 @@
 //    variables since presently CSS custom
 //    properties can't be used within media
 //    query declarations
+// sync with tailwind.config.ts
 
 module.exports = {
-  'eds-bp-sm': '23.4375rem', // 375px
-  'eds-bp-sm-2': '35rem', // 560px
-  'eds-bp-md': '48rem', // 768px
-  'eds-bp-lg': '60rem', // 960px
-  'eds-bp-xl': '75rem', // 1200px
-  'eds-bp-xxl': '87.5rem', // 1400px
+  'eds-bp-xs': '0px',
+  'eds-bp-sm': '600px',
+  'eds-bp-md': '768px',
+  'eds-bp-lg': '1040px',
+  'eds-bp-xl': '1440px',
 };

tailwind.config.ts

@@ -33,6 +33,18 @@ export default {
       textColor: {
         ...textColorTokens,
       },
+      spacing: {
+        // We pull the spacing tokens and format them such that names are like 'size-${name} = ${value}px'
+        ...Object.keys(edsTokens.size)
+          .map((sizeKey) => {
+            return { [`size-${sizeKey}`]: `${edsTokens.size[sizeKey]}px` };
+          })
+          .reduce((accumulate, current) => {
+            const entry = Object.entries(current)[0];
+            accumulate[entry[0]] = entry[1];
+            return accumulate;
+          }, {}),
+      },
     },
     fontWeight: {
       normal: edsTokens['font-weight'].light,
@@ -47,13 +59,13 @@ export default {
       secondary: edsTokens['font-family'].secondary,
     },
     // sync with src/design-tokens/tier-1-definitions/breakpoints.js
+    // Docs: https://tailwindcss.com/docs/responsive-design#customizing-your-theme
     screens: {
-      xs: '375px',
-      sm: '560px',
+      xs: '0px', // TODO-AH: reconcile the difference in the grid to be mobile first
+      sm: '600px',
       md: '768px',
-      lg: '960px',
-      xl: '1200px',
-      xxl: '1400px',
+      lg: '1040px',
+      xl: '1440px',
     },
   },
 } satisfies Config;