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

package/.storybook/components/Elements/DocsContainer.tsx

@@ -52,6 +52,9 @@ export const DocsContainer: React.FC<{
 
   const globalTheme =
     (context as any).store.userGlobals?.globals?.theme || 'core';
+  const globalLogicalProps = (context as any).store.userGlobals?.globals
+    ?.logicalProps;
+  const useLogicalProperties = globalLogicalProps !== 'false';
 
   const { currentTheme } = useMemo(() => {
     const findThemeStory: keyof typeof themeSpecificStories | undefined =
@@ -77,6 +80,7 @@ export const DocsContainer: React.FC<{
         cache={createEmotionCache({ speedy: false })}
         // This is typed to the CoreTheme in theme.d.ts
         theme={currentTheme as unknown as CoreTheme}
+        useLogicalProperties={useLogicalProperties}
       >
         <ColorMode mode="light">
           <HelmetProvider>

package/.storybook/preview.ts

@@ -163,6 +163,19 @@ export const globalTypes = {
       showName: true,
     },
   },
+  logicalProps: {
+    name: 'LogicalProps',
+    description: 'Toggle between logical and physical CSS properties',
+    defaultValue: 'true',
+    toolbar: {
+      icon: 'transfer',
+      items: [
+        { value: 'true', title: 'Logical' },
+        { value: 'false', title: 'Physical' },
+      ],
+      showName: true,
+    },
+  },
 };
 
 export const decorators = [withEmotion];

package/.storybook/theming/GamutThemeProvider.tsx

@@ -34,12 +34,14 @@ type GlobalsContext = {
   globals: {
     colorMode: 'light' | 'dark';
     theme: keyof typeof themeMap;
+    logicalProps: 'true' | 'false';
   };
 };
 
 export const withEmotion = (Story: any, context: GlobalsContext) => {
   const colorMode = context.globals.colorMode ?? 'light';
   const selectedTheme = context.globals.theme;
+  const useLogicalProperties = context.globals.logicalProps !== 'false';
   const background = corePalette[themeBackground[colorMode]];
   const storyRef = useRef<HTMLDivElement>(null);
   const currentTheme = themeMap[selectedTheme];
@@ -57,6 +59,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
       <GamutProvider
         useCache={false}
         useGlobals={false}
+        useLogicalProperties={useLogicalProperties}
         theme={currentTheme as unknown as Theme}
       >
         <Background
@@ -72,7 +75,10 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
 
   // Wrap all stories in minimal provider
   return (
-    <GamutProvider theme={currentTheme as unknown as Theme}>
+    <GamutProvider
+      useLogicalProperties={useLogicalProperties}
+      theme={currentTheme as unknown as Theme}
+    >
       <Background
         alwaysSetVariables
         bg={themeBackground[colorMode]}

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.f24d55.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@78.5.6-alpha.f24d55.0) (2026-01-20)
 
 **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.f24d55.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c2969b8bc6d5586862a0c05b228db55a08c1c94a"
+  "gitHead": "1eb9fd1e7ca7666a9c3d55ce651b2048de3b4f58"
 }

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

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
+import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
+import * as SpaceStories from './Space.stories';
 
 export const parameters = {
   title: 'Space',
@@ -10,7 +11,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Space" />
+<Meta of={SpaceStories} title="Foundations/System/Props/Space" />
 
 <AboutHeader {...parameters} />
 
@@ -25,4 +26,16 @@ const SpaceExample = styled.div(system.space);
 <SpaceExample p={8} my={[16, 24, 32]} />;
 ```
 
+<Callout
+  text={
+    <>
+      Props like <code>mx</code> and <code>my</code> support both physical and
+      logical CSS properties. Use the <strong>LogicalProps</strong> toolbar to
+      switch between modes.
+    </>
+  }
+/>
+
+<Canvas of={SpaceStories.MarginExample} />
+
 <TokenTable rows={getPropRows('space')} columns={defaultColumns} />

package/src/lib/Foundations/System/Props/Space.stories.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Space',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const MarginExample: Story = {
+  render: () => (
+    <Box
+      bg="primary"
+      color="white"
+      mb={64}
+      ml={16}
+      mr={32}
+      mt={4}
+      textAlign="center"
+    >
+      This box has <code>mt={4}</code>, <code>mr={32}</code>,{' '}
+      <code>mb={64}</code>, and <code>ml={16}</code>. Inspect the example to see
+      what CSS properties are rendered.
+    </Box>
+  ),
+};

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

@@ -9,6 +9,7 @@ import {
 } from '@codecademy/gamut-styles';
 // eslint-disable-next-line gamut/import-paths
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
+import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import kebabCase from 'lodash/kebabCase';
 
@@ -412,29 +413,61 @@ export const DarkModeTable = () => (
 );
 /* eslint-disable gamut/import-paths */
 
+const PropertiesRenderer = ({
+  property,
+  properties,
+  resolveProperty,
+}: {
+  property: string | { physical: string; logical: string };
+  properties?: string[] | { physical: string[]; logical: string[] };
+  resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
+}) => {
+  const currentTheme = useTheme() as { useLogicalProperties?: boolean };
+  const useLogicalProperties = currentTheme?.useLogicalProperties ?? true;
+
+  const mode = resolveProperty
+    ? resolveProperty(useLogicalProperties)
+    : 'physical';
+
+  const resolvedProperty =
+    typeof property === 'string' ? property : property[mode];
+
+  let resolvedProperties: string[];
+  if (!properties) {
+    resolvedProperties = [resolvedProperty];
+  } else if (Array.isArray(properties)) {
+    resolvedProperties = properties;
+  } else {
+    resolvedProperties = properties[mode];
+  }
+
+  return (
+    <>
+      {resolvedProperties.map((prop) => (
+        <Anchor
+          href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
+            prop
+          )}`}
+          key={prop}
+          rel=""
+          target="_blank"
+        >
+          <AnchorCode>{kebabCase(prop)}</AnchorCode>
+        </Anchor>
+      ))}
+    </>
+  );
+};
+
 const PROPERTIES_COLUMN = {
   key: 'properties',
   name: 'Properties',
   size: 'xl',
-  render: ({
-    property,
-    properties = [property],
-  }: {
-    property: string;
-    properties: string[];
-  }) =>
-    properties.map((property) => (
-      <Anchor
-        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
-          property
-        )}`}
-        key={property}
-        rel=""
-        target="_blank"
-      >
-        <AnchorCode>{kebabCase(property)}</AnchorCode>
-      </Anchor>
-    )),
+  render: (props: {
+    property: string | { physical: string; logical: string };
+    properties?: string[] | { physical: string[]; logical: string[] };
+    resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
+  }) => <PropertiesRenderer {...props} />,
 };
 
 const SCALE_COLUMN = {
@@ -450,7 +483,12 @@ const TRANSFORM_COLUMN = {
   key: 'transform',
   name: 'Transform',
   size: 'fill',
-  render: ({ transform }: any) => transform && <Code>{transform?.name}</Code>,
+  render: ({ transform, resolveProperty }: any) => (
+    <>
+      {transform && <Code>{transform?.name}</Code>}
+      {resolveProperty && <Code>{resolveProperty?.name}</Code>}
+    </>
+  ),
 };
 
 export const defaultColumns = [

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,
   },
 };