@codecademy/styleguide 78.5.6-alpha.ea1cbb.0 → 78.5.6-alpha.f55a90.0

package/.storybook/components/Elements/Markdown.tsx

@@ -43,6 +43,7 @@ export const Code = styled.code`
   color: ${themed('colors.navy-700')};
   background-color: ${themed('colors.gray-100')};
   display: inline-block;
+  overflow-x: scroll;
 
   ::-webkit-scrollbar {
     width: 4px;

package/.storybook/preview.ts

@@ -46,10 +46,14 @@ const preview: Preview = {
           [
             'About',
             'Best Practices',
-            'ESLint rules',
             'Contributing',
+            'ESLint rules',
             'FAQs',
             'Stories',
+            'Brand',
+            'Installation',
+            'Usage Guide',
+            'MCP',
           ],
           'Foundations',
           'Layouts',

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [78.5.6-alpha.ea1cbb.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.ea1cbb.0) (2026-01-14)
+### [78.5.6-alpha.f55a90.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.f55a90.0) (2026-01-22)
 
 **Note:** Version bump only for package @codecademy/styleguide
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "78.5.6-alpha.ea1cbb.0",
+  "version": "78.5.6-alpha.f55a90.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c2969b8bc6d5586862a0c05b228db55a08c1c94a"
+  "gitHead": "6e4ca9efcfd4956ccb717acb479989cffc7e7dd9"
 }

package/src/lib/Atoms/Badge/Badge.mdx

@@ -124,7 +124,7 @@ Use `sm` when the `Badge` is inline with other components such as <LinkTo id='Ty
 
 ## Leading icon
 
-Include the `icon` property when the icon reinforces the badge’s message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons. Below are examples of using icons with the different `Badge` sizes.
+Include the `icon` property when the icon reinforces the badge's message and improves scannability. Since badges are inherently small, it's recommended to use Gamut's mini icons. Below are examples of using icons with the different `Badge` sizes.
 
 ### Default size with icon
 

package/src/lib/Foundations/System/About.mdx

@@ -7,7 +7,7 @@ import {
 } from '~styleguide/blocks';
 
 import { parameters as composeParameters } from './Compose.mdx';
-import { parameters as propsParameters } from './Props/About.mdx';
+import { parameters as propsParameters } from './Props.mdx';
 import { parameters as responsivePropertiesParameters } from './ResponsiveProperties/ResponsiveProperties.mdx';
 import { parameters as variantsParameters } from './Variants.mdx';
 

package/src/lib/Foundations/System/Compose.mdx

@@ -21,7 +21,7 @@ When using custom properties or our standard <LinkTo id="Foundations/System/Prop
 
 Composing functions has several benefits:
 
-1. Predictable CSS - Guard against possible bugs and unexpected behavior.
+1. Predictable CSS - Guard against possible bugs and unexpected behvior.
 1. Type Simplification - Less typescript boiler plate and better type inference
 
 ## Usage

package/src/lib/Foundations/System/Props.mdx

@@ -0,0 +1,230 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
+
+import { defaultColumns, getPropRows } from '../shared/elements';
+
+export const parameters = {
+  title: 'Props',
+  subtitle:
+    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
+  source: {
+    repo: 'gamut-styles',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/af5be6e39cccca5d5d8a1f811c77a7a0b618c914/packages/gamut-styles/src/variance/config.ts#L11',
+  },
+};
+
+<Meta title="Foundations/System/Props" />
+
+<AboutHeader {...parameters} />
+
+We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
+
+System props have a few facets that are important to note:
+
+- They can some times represent multiple properties.
+- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
+- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
+
+We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
+
+You may import these groups directly from `gamut-styles`.
+
+```tsx
+import { variance } from '@codecademy/variance';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(variance.compose(system.layout, system.positioning));
+
+<Box position="absolute" width="50px" height="50px" />;
+```
+
+Each system prop has 3 important features:
+
+- `properties`: Any number of CSS Properties this prop is responsible for.
+- `scale`: A set of values that determines valid inputs for each prop (e.g. a scale of `colors` will restrict to only theme colors). These are generally aliases for more verbose or opaque css properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid CSSType values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
+- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
+
+<br />
+
+## Layout
+
+Props for handling dimensions and other layout specific properties.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.layout);
+
+<Box display="flex" width="50%" height="300px" verticalAlign="middle" />;
+```
+
+<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />
+
+## Space
+
+Props for maintaining specific vertical and horizontal rhythms
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Spacer = styled.div(system.space);
+
+<Spacer p={8} my={[16, 24, 32]} />;
+```
+
+<TokenTable rows={getPropRows('space')} columns={defaultColumns} />
+
+## Typography
+
+Props for text manipulation
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Text = styled.p(system.typography);
+
+<Text fontSize={16} fontFamily="accent" textTransform="uppercase" />;
+```
+
+<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />
+
+## Color
+
+Specific color properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Background = styled.div(system.color);
+
+<Background bg="navy" textColor="gray-100" borderColor="blue" />;
+```
+
+<TokenTable rows={getPropRows('color')} columns={defaultColumns} />
+
+## Border
+
+Border styles
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.border);
+
+<Box
+  border={1}
+  borderLeft="none"
+  borderRightStyle="dotted"
+  borderRadius="md"
+/>;
+```
+
+<TokenTable rows={getPropRows('border')} columns={defaultColumns} />
+
+## Flex
+
+Flex specific properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const FlexBox = styled.div(system.flex);
+
+<FlexBox flex={1} justifyContent="center" alignItems="flex-start" />;
+```
+
+<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />
+
+## Grid
+
+Grid specific properties
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const GridBox = styled.div(system.grid);
+
+<GridBox gridTemplateColumns="max-content 1fr max-content" columnGap={32} />;
+```
+
+<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />
+
+## Background
+
+Props for background manipulation (sizing / repitition / images), for background color see `colors`.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+import myBg from './myBg.png';
+
+const Box = styled.div(system.background);
+
+<Box background={`url(${myBg}`} backgroundSize="cover" />;
+```
+
+<TokenTable rows={getPropRows('background')} columns={defaultColumns} />
+
+## Positioning
+
+Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.positioning);
+
+<Box position="absolute" zIndex={2} top="0" left="0" />;
+```
+
+<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />
+
+## Shadow
+
+Props for box and text shadows.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.shadow);
+
+<Box
+  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
+  textShadow="0 0 4px rgba(0, 0, 0, .15)"
+/>;
+```
+
+<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />
+
+## List
+
+Props for adjusting list styles when rendering a component as a `ul` or `ol`
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const Box = styled.div(system.list);
+
+<Box
+  as="ul"
+  listStyleType="square"
+  listStylePosition="inside"
+  listStyleImage="none"
+>
+  <Box as="li">a list item</Box>
+</Box>;
+```
+
+<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.mdx

@@ -6,17 +6,17 @@ import { breakpoint } from '../../shared/elements';
 import * as ResponsivePropertiesStories from './ResponsiveProperties.stories';
 
 export const parameters = {
-  title: 'Responsive properties',
+  title: 'Responsive Properties',
   subtitle:
     'All system props accept a syntax to generate responsive styles on a per prop basis',
   source: {
     repo: 'variance',
     githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variables/responsive.ts',
+      'https://github.com/Codecademy/gamut/blob/cass-gm-842/packages/variance/src/utils/responsive.ts',
   },
 };
 
-<Meta of={ResponsivePropertiesStories} />
+<Meta title="Foundations/System/Responsive Properties" />
 
 <AboutHeader {...parameters} />
 

package/src/lib/Foundations/System/ResponsiveProperties/ResponsiveProperties.stories.tsx

@@ -2,7 +2,6 @@ import { Box, FlexBox } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 
 const meta: Meta<typeof FlexBox> = {
-  title: 'Foundations/System/Responsive properties',
   component: FlexBox,
   args: {
     center: true,

package/src/lib/Foundations/shared/elements.tsx

@@ -2,31 +2,22 @@ import { Anchor, Box } from '@codecademy/gamut';
 import {
   Background,
   coreSwatches,
-  css,
   lxStudioColors,
   theme,
   trueColors,
 } from '@codecademy/gamut-styles';
 // eslint-disable-next-line gamut/import-paths
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
-import styled from '@emotion/styled';
 import kebabCase from 'lodash/kebabCase';
 
 import { Code, ColorScale, LinkTo, TokenTable } from '~styleguide/blocks';
 
 import { applyCorrectNotation } from './applyCorrectNotation';
 
-const AnchorCode = styled(Code)(
-  css({
-    textDecoration: 'underline',
-    mx: 4,
-  })
-);
-
 export const PROP_COLUMN = {
   key: 'key',
   name: 'Prop',
-  size: 'lg',
+  size: 'md',
   render: ({ id }: any) => <Code>{id}</Code>,
 };
 
@@ -425,14 +416,11 @@ const PROPERTIES_COLUMN = {
   }) =>
     properties.map((property) => (
       <Anchor
-        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
-          property
-        )}`}
-        key={property}
+        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${property}`}
         rel=""
         target="_blank"
       >
-        <AnchorCode>{kebabCase(property)}</AnchorCode>
+        <Code key={property}>{kebabCase(property)}</Code>
       </Anchor>
     )),
 };
@@ -442,7 +430,7 @@ const SCALE_COLUMN = {
   name: 'Scale',
   size: 'lg',
   render: ({ scale }: { scale: string }) => (
-    <LinkTo id="Foundations/Theme/Core Theme">{scale}</LinkTo>
+    <LinkTo id={`foundations-theme--${kebabCase(scale)}`}>{scale}</LinkTo>
   ),
 };
 

package/src/lib/Layouts/Boxes/Box/Box.stories.tsx

@@ -20,7 +20,6 @@ export const Bordered: Story = {
     border: 1,
     p: 8,
     children: 'I am a bordered box',
-    ml: 24,
   },
 };
 

package/src/lib/Meta/About.mdx

@@ -13,6 +13,7 @@ import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx
 import { parameters as eslintRulesParameters } from './ESLint rules.mdx';
 import { parameters as faqsParameters } from './FAQs.mdx';
 import { parameters as installationParameters } from './Installation.mdx';
+import { parameters as mcpAboutParameters } from './MCP/About.mdx';
 import { parameters as storiesParameters } from './Stories.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
@@ -38,5 +39,6 @@ export const parameters = {
     brandParameters,
     installationParameters,
     usageGuideParameters,
+    mcpAboutParameters,
   ])}
 />

package/src/lib/Meta/MCP/About.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  addParentPath,
+  TableOfContents,
+} from '~styleguide/blocks';
+
+import { parameters as codeConnectParameters } from './Code Connect.mdx';
+import { parameters as figmaMcpParameters } from './Figma MCP.mdx';
+
+export const parameters = {
+  id: 'Meta/MCP',
+  title: 'MCP',
+  subtitle: 'Documentation related to the Figma Model Context Protocol.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/About" />
+
+<AboutHeader {...parameters} />
+
+<TableOfContents
+  links={addParentPath(parameters.id, [
+    codeConnectParameters,
+    figmaMcpParameters,
+  ])}
+/>

package/src/lib/Meta/MCP/Code Connect.mdx

@@ -0,0 +1,38 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, Callout, ImageWrapper } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Code Connect',
+  title: 'Code Connect',
+  subtitle: 'Exploring Code Connect features in Figma.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/Code Connect" />
+
+<AboutHeader {...parameters} />
+
+Code Connect provides Figma with the actual code for Figma components. In providing accurate code, this helps the Figma MCP generate accurate code snippets for designs that use these components.
+
+More information can be found at [Figma Code Connect documentation](https://www.figma.com/code-connect-docs/)
+
+<Callout text="Any changes to Code Connect files should be requested through the Gamut team and NOT done on an individual or a separate team." />
+
+## Code Connected components
+
+When visiting the Figma file, you'll know if a component is set up with Code Connect if you select the component and see the sidebar includes a "Code Connect" section.
+
+<ImageWrapper
+  src="./mcp/component_with_code_connect.png"
+  alt="A Figma component, Badge, with the Code Connect sidebar open."
+/>
+
+### Exploring behavior
+
+For components with Code Connect, you can also click on the "Explore behavior" button to open a modal that allows you to edit the component's props. Editing these props will automatically update the code in the modal's Code Connect section to give you a sense of how to adapt your component accordingly.
+
+<ImageWrapper
+  src="./mcp/component_playground.png"
+  alt="The 'Component playground' modal, with the Badge component's props editable."
+/>

package/src/lib/Meta/MCP/Figma MCP.mdx

@@ -0,0 +1,89 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, Callout } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Figma MCP',
+  title: 'Figma MCP',
+  subtitle:
+    'Set up the Figma MCP locally to enable design to code generation, exclusive to Codecademy + Skillsoft employees.',
+  status: 'static',
+};
+
+<Meta title="Meta/MCP/Figma MCP" />
+
+<AboutHeader {...parameters} />
+
+<Callout text="Any MCP generated code is EXPERIMENTAL! You should always validate the code generated and adapt it to your own needs — do NOT simply use the MCP to generate code and push it to production! Additionally, you must have a Dev or Full account to be able to be able to use the Figma MCP." />
+
+The offical guidance and documentation comes from Figma. Please reference [Figma Dev Mode MCP documentation](https://help.figma.com/hc/en-us/articles/32132100833559-Guide-to-the-Dev-Mode-MCP-Server) for the most up to date information. This documentation below has been adapted to fit the context of the Gamut repository.
+
+## Figma (desktop client app)
+
+Go to [Figma's download page](https://www.figma.com/downloads/) to download the appropriate version of the Figma desktop client for your OS.
+
+### Start up local Figma MCP server
+
+1. In the Figma desktop client, check that you have dev mode enabled.
+2. The right-hand sidebar should have a "MCP server" section
+3. Click on the "Open settings modal" button
+4. In the modal, toggle the status to "On", the the color of the toggle should be green.
+   OR
+5. Click on the Figma icon in the top left-hand corner and select "Actions"
+6. Type "Enable desktop MCP server"
+7. Click on the checkbox, if it's not already checked, to enable the MCP server.
+
+## Set up MCP Client for your text editor/IDE
+
+We currently support Figma MCP for Cursor. Please let the Gamut team know if you'd like support for other editors.
+
+### Cursor
+
+1. Open **Cursor** → **Settings** → **Cursor Settings**.
+2. Go to the **MCP** tab (might be called **MCP & Integrations**) from the left-hand sidebar.
+3. Under **MCP Tools**, click **+ Add MCP server**.
+4. Enter the following configuration and save:
+
+```
+{
+  "mcpServers": {
+    "Figma": {
+      "url": "http://127.0.0.1:3845/mcp"
+    }
+  }
+}
+```
+
+### Verify your MCP server is running
+
+To check if your MCP server is running, you can visit the endpoint: `http://127.0.0.1:3845/mcp`. You should see a response, e.g.: `{"jsonrpc":"2.0","error":{"code":-32001,"message":"Invalid sessionId"},"id":null}`.
+Yes, it's an odd response, but it indicates that the MCP server is running — otherwise if it's not running you'll see an error "This site can’t be reached" on the page.
+
+Similarly you can test the end point using:
+
+```bash
+curl http://127.0.0.1:3845/mcp
+```
+
+## Prompt your MCP client
+
+You can prompt the MCP in two main ways:
+
+1. Provide a link to the node of the design you'd like to generate code for, e.g.:
+
+   > Generate the code for this node: https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=79202-13690&m=dev
+
+2. Selecting the node in the Figma interface, e.g.:
+   > Generate the code for the current selection
+
+In the chat, you may be prompted to allow the Figma commands like `get_code()` to run. You can also add these commands to an allow list in your code editor's settings.
+
+## Feedback for the Gamut team
+
+Please let the Gamut team of any feedback you have, things like:
+
+- If you find that a new rule that you'd like implemented in this repo, please let the Gamut team know.
+- Support for another text editor/IDE.
+- Incorrect code generation
+
+If you have any other feedback or suggestions, feel free to share those as well!

package/src/lib/Molecules/Alert/Alert.mdx

@@ -62,7 +62,7 @@ Use an alert to display an important, succinct message with actions for users to
 4. Dismiss button (optional)
 
 - Use to allow users to remove the alert after they've acknowledged it or when it's no longer needed
-- Only exclude when the information must remain visible until specific conditions are met to ensure users don’t miss critical information
+- Only exclude when the information must remain visible until specific conditions are met to ensure users don't miss critical information
 
 ## Variants
 

package/src/lib/Foundations/System/Props/About.mdx

@@ -1,81 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import {
-  AboutHeader,
-  addParentPath,
-  TableOfContents,
-} from '~styleguide/blocks';
-
-import { parameters as backgroundParameters } from './Background.mdx';
-import { parameters as borderParameters } from './Border.mdx';
-import { parameters as colorParameters } from './Color.mdx';
-import { parameters as flexParameters } from './Flex.mdx';
-import { parameters as gridParameters } from './Grid.mdx';
-import { parameters as layoutParameters } from './Layout.mdx';
-import { parameters as listParameters } from './List.mdx';
-import { parameters as positioningParameters } from './Positioning.mdx';
-import { parameters as shadowParameters } from './Shadow.mdx';
-import { parameters as spaceParameters } from './Space.mdx';
-import { parameters as typographyParameters } from './Typography.mdx';
-
-export const parameters = {
-  id: 'Foundations/System/Props',
-  title: 'Props',
-  subtitle:
-    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
-  status: 'current',
-  source: {
-    repo: 'gamut-styles',
-    githubLink:
-      'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variance/config.ts',
-  },
-};
-
-<Meta title="Foundations/System/Props/About" />
-
-<AboutHeader {...parameters} />
-
-We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
-
-System props have a few facets that are important to note:
-
-- They can some times represent multiple properties.
-- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
-- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
-
-We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
-
-You may import these groups directly from `gamut-styles`.
-
-```tsx
-import { variance } from '@codecademy/variance';
-import { system } from '@codecademy/gamut-styles';
-
-const ExampleContainer = styled.div(
-  variance.compose(system.layout, system.positioning)
-);
-
-<ExampleContainer position="absolute" width="50px" height="50px" />;
-```
-
-Each system prop has 3 important features:
-
-- `properties`: Any number of CSS Properties this prop is responsible for.
-- `scale`: A set of values that determines valid inputs for each prop based on the selected theme and that theme's typing (e.g. if the `lxStudio` theme is being used, a scale of `colors` will restrict to the `lxStudio` theme's colors). These are generally aliases for more verbose or opaque CSS properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid `CSSType` values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
-- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
-
-<TableOfContents
-  links={addParentPath(parameters.id, [
-    layoutParameters,
-    spaceParameters,
-    typographyParameters,
-    colorParameters,
-    borderParameters,
-    flexParameters,
-    gridParameters,
-    backgroundParameters,
-    positioningParameters,
-    shadowParameters,
-    listParameters,
-  ])}
-/>

package/src/lib/Foundations/System/Props/Background.mdx

@@ -1,30 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Background',
-  subtitle:
-    'Props for background manipulation (sizing / repitition / images), for background color see `colors`.',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Background" />
-
-<AboutHeader {...parameters} />
-
-Background props control how background images and patterns are displayed on elements. These properties give you control over image sizing, positioning, and repetition behavior. For solid background colors, use the color props which connect to the theme's color palette.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-import myBg from './myBg.png';
-
-const BackgroundExample = styled.div(system.background);
-
-<BackgroundExample background={`url(${myBg}`} backgroundSize="cover" />;
-```
-
-<TokenTable rows={getPropRows('background')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Border.mdx

@@ -1,33 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Border',
-  subtitle: 'Border styles',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Border" />
-
-<AboutHeader {...parameters} />
-
-Border props enable you to add and style borders on any side of an element. These properties support directional borders (top, right, bottom, left) as well as convenient shorthands for horizontal and vertical borders. Border radius values connect to the theme's `borderRadii` scale for consistent corner rounding.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const BorderExample = styled.div(system.border);
-
-<BorderExample
-  border={1}
-  borderLeft="none"
-  borderRightStyle="dotted"
-  borderRadius="md"
-/>;
-```
-
-<TokenTable rows={getPropRows('border')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Color.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Color',
-  subtitle: 'Specific color properties',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Color" />
-
-<AboutHeader {...parameters} />
-
-Color props control the foreground, background, and border colors of elements. All color values are restricted to your theme's color palette, ensuring consistent color usage throughout your application. The `bg` shorthand provides a convenient way to set background colors quickly.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ColorExample = styled.div(system.color);
-
-<ColorExample bg="navy" textColor="gray-100" borderColor="blue" />;
-```
-
-<TokenTable rows={getPropRows('color')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Flex.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Flex',
-  subtitle: 'Flex specific properties',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Flex" />
-
-<AboutHeader {...parameters} />
-
-Flex props provide complete control over flexbox layouts, from container behavior to individual flex item properties. These properties make it easy to create flexible, responsive layouts with proper alignment and distribution of child elements. Use these on flex containers to control their children or on flex items to control their own behavior.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const FlexExample = styled.div(system.flex);
-
-<FlexExample flex={1} justifyContent="center" alignItems="flex-start" />;
-```
-
-<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Grid.mdx

@@ -1,31 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Grid',
-  subtitle: 'Grid specific properties',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Grid" />
-
-<AboutHeader {...parameters} />
-
-Grid props give you powerful control over CSS Grid layouts. Define grid templates, control auto-placement behavior, and set gaps between grid items. These properties make it straightforward to create complex, responsive grid layouts with precise control over both container and item positioning.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const GridExample = styled.div(system.grid);
-
-<GridExample
-  gridTemplateColumns="max-content 1fr max-content"
-  columnGap={32}
-/>;
-```
-
-<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Layout.mdx

@@ -1,34 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Layout',
-  subtitle:
-    'Props for handling dimensions and other layout specific properties.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Layout" />
-
-<AboutHeader {...parameters} />
-
-Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const LayoutExample = styled.div(system.layout);
-
-<LayoutExample
-  display="flex"
-  width="50%"
-  height="300px"
-  verticalAlign="middle"
-/>;
-```
-
-<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/List.mdx

@@ -1,38 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, LinkTo, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'List',
-  subtitle:
-    'Props for adjusting list styles when rendering a component as a `ul` or `ol`',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/List" />
-
-<AboutHeader {...parameters} />
-
-List props control the appearance of ordered and unordered lists when components are rendered as `ul` or `ol` elements. These properties let you customize bullet styles, list positioning, and even use custom images as list markers, giving you full control over list presentation.
-
-For more advanced list features, refer to the <LinkTo id="Organisms/Lists & Tables/List">List component</LinkTo>.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ListExample = styled.div(system.list);
-
-<ListExample
-  as="ul"
-  listStyleType="square"
-  listStylePosition="inside"
-  listStyleImage="none"
->
-  <ListExample as="li">a list item</ListExample>
-</ListExample>;
-```
-
-<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Positioning.mdx

@@ -1,29 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Positioning',
-  subtitle:
-    'Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Positioning" />
-
-<AboutHeader {...parameters} />
-
-Positioning props control how elements are positioned within their parent containers and manage their stacking order. Use these properties to create fixed headers, absolute overlays, sticky navigation, and control layering with z-index. The `inset` shorthand provides a convenient way to set all four position values at once.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const PositioningExample = styled.div(system.positioning);
-
-<PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
-```
-
-<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Shadow.mdx

@@ -1,31 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Shadow',
-  subtitle: 'Props for box and text shadows.',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Shadow" />
-
-<AboutHeader {...parameters} />
-
-Shadow props add depth and visual interest to your components through box and text shadows. These properties accept standard CSS shadow syntax, allowing you to create subtle elevation effects or dramatic visual depth. Use shadows consistently to establish visual hierarchy in your interface.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ShadowExample = styled.div(system.shadow);
-
-<ShadowExample
-  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
-  textShadow="0 0 4px rgba(0, 0, 0, .15)"
-/>;
-```
-
-<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Space.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Space',
-  subtitle: 'Props for maintaining specific vertical and horizontal rhythms',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Space" />
-
-<AboutHeader {...parameters} />
-
-Space props provide a consistent way to apply margin and padding throughout your application. All spacing values reference the theme's spacing scale, ensuring visual consistency and making it easy to create responsive spacing patterns using array syntax.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const SpaceExample = styled.div(system.space);
-
-<SpaceExample p={8} my={[16, 24, 32]} />;
-```
-
-<TokenTable rows={getPropRows('space')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Typography.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Typography',
-  subtitle: 'Props for text manipulation',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Typography" />
-
-<AboutHeader {...parameters} />
-
-Typography props give you fine-grained control over text styling and appearance. These properties connect to the theme's typography scales for font families, sizes, weights, and line heights, making it simple to maintain typographic consistency across your application while allowing for custom text transformations and decorations.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const TextExample = styled.p(system.typography);
-
-<TextExample fontSize={16} fontFamily="accent" textTransform="uppercase" />;
-```
-
-<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />