@codecademy/styleguide 79.0.1-alpha.df213b.0 → 79.0.1-alpha.dfd5fd.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

@@ -49,6 +49,7 @@ const preview: Preview = {
             'ESLint rules',
             'Contributing',
             'FAQs',
+            'Logical and physical CSS properties',
             'Stories',
           ],
           'Foundations',
@@ -163,6 +164,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.
 
-### [79.0.1-alpha.df213b.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.df213b.0) (2026-01-29)
+### [79.0.1-alpha.dfd5fd.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.dfd5fd.0) (2026-02-11)
 
 **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": "79.0.1-alpha.df213b.0",
+  "version": "79.0.1-alpha.dfd5fd.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "ae9a6d7c67b8d1e9b70754cddae185ce2dba44fe"
+  "gitHead": "10ba188d41d93ccb3a07a9ab7569ac5f7341bd4d"
 }

package/src/lib/Foundations/System/Props/Border.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 BorderStories from './Border.stories';
 
 export const parameters = {
   title: 'Border',
@@ -10,7 +11,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Border" />
+<Meta of={BorderStories} title="Foundations/System/Props/Border" />
 
 <AboutHeader {...parameters} />
 
@@ -30,4 +31,23 @@ const BorderExample = styled.div(system.border);
 />;
 ```
 
+These border props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
+
+<Callout
+  text={
+    <>
+      You can use the <strong>LogicalProps</strong> button in the toolbar to
+      switch between modes.
+    </>
+  }
+/>
+
+<Canvas of={BorderStories.DirectionalBorderExample} />
+
+<Canvas of={BorderStories.BorderWidthExample} />
+
+<Canvas of={BorderStories.BorderRadiusExample} />
+
+<Canvas of={BorderStories.BorderStyleExample} />
+
 <TokenTable rows={getPropRows('border')} columns={defaultColumns} />

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

@@ -0,0 +1,138 @@
+import { Box, FlexBox, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Border',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const DirectionalBorderExample: Story = {
+  render: () => (
+    <FlexBox gap={16} row>
+      <Box
+        bg="background-selected"
+        borderX={2}
+        borderY={1}
+        p={16}
+        textAlign="center"
+      >
+        This box has <Markdown text="`borderX={2}`, `borderY={1}`." /> Inspect
+        the example to see what CSS properties are rendered based on the logical
+        properties mode.
+      </Box>
+      <Box
+        bg="background-selected"
+        borderLeft={2}
+        borderRight={1}
+        p={16}
+        textAlign="center"
+      >
+        This box has <Markdown text="`borderLeft={2}`, `borderRight={1}`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+    </FlexBox>
+  ),
+};
+
+export const BorderWidthExample: Story = {
+  render: () => (
+    <FlexBox gap={16} row>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderWidthX="4px"
+        borderWidthY="10px"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderWidthX='4px'` and `borderWidthY='10px'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderWidthRight="10px"
+        borderWidthTop="4px"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderWidthTop='4px'` and `borderWidthRight='10px'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+    </FlexBox>
+  ),
+};
+
+export const BorderRadiusExample: Story = {
+  render: () => (
+    <FlexBox gap={16} row>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderRadiusLeft="lg"
+        borderRadiusRight="none"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderRadiusLeft='lg'` and `borderRadiusRight='none'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderRadiusBottomLeft="xl"
+        borderRadiusTopRight="xl"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderRadiusTopRight='xl'` and `borderRadiusBottomLeft='xl'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+    </FlexBox>
+  ),
+};
+
+export const BorderStyleExample: Story = {
+  render: () => (
+    <FlexBox gap={16} row>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderStyleX="dashed"
+        borderStyleY="dotted"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderStyleX='dashed'` and `borderStyleY='dotted'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderStyleBottom="dotted"
+        borderStyleLeft="dashed"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderStyleBottom='dotted'` and `borderStyleLeft='dashed'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+    </FlexBox>
+  ),
+};

package/src/lib/Foundations/System/Props/Color.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 ColorStories from './Color.stories';
 
 export const parameters = {
   title: 'Color',
@@ -10,7 +11,7 @@ export const parameters = {
   status: 'current',
 };
 
-<Meta title="Foundations/System/Props/Color" />
+<Meta of={ColorStories} title="Foundations/System/Props/Color" />
 
 <AboutHeader {...parameters} />
 
@@ -25,4 +26,17 @@ const ColorExample = styled.div(system.color);
 <ColorExample bg="navy" textColor="gray-100" borderColor="blue" />;
 ```
 
+These color props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
+
+<Callout
+  text={
+    <>
+      You can use the <strong>LogicalProps</strong> button in the toolbar to
+      switch between modes.
+    </>
+  }
+/>
+
+<Canvas of={ColorStories.BorderColorExample} />
+
 <TokenTable rows={getPropRows('color')} columns={defaultColumns} />

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

@@ -0,0 +1,47 @@
+import { Box, FlexBox, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Color',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const BorderColorExample: Story = {
+  render: () => (
+    <FlexBox gap={16} row>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderColorX="feedback-success"
+        borderColorY="feedback-error"
+        borderWidth="4px"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderColorX='feedback-success'` and `borderColorY='feedback-error'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+      <Box
+        bg="background-selected"
+        border={1}
+        borderColorBottom="feedback-warning"
+        borderColorLeft="feedback-success"
+        borderColorRight="feedback-error"
+        borderColorTop="interface"
+        borderWidth="4px"
+        p={16}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`borderColorBottom='feedback-warning'`, `borderColorLeft='feedback-success'`, `borderColorRight='feedback-error'`, and `borderColorTop='interface'`." />{' '}
+        Inspect the example to see what CSS properties are rendered based on the
+        logical properties mode.
+      </Box>
+    </FlexBox>
+  ),
+};

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,19 @@ const SpaceExample = styled.div(system.space);
 <SpaceExample p={8} my={[16, 24, 32]} />;
 ```
 
+These space props support both physical and logical CSS properties and will render the appropriate properties based on `useLogicalProperties`'s value passed into the `<GamutProvider>` at the root of your application.
+
+<Callout
+  text={
+    <>
+      You can use the <strong>LogicalProps</strong> button in the toolbar to
+      switch between modes.
+    </>
+  }
+/>
+
+<Canvas of={SpaceStories.MarginExample} />
+
+<Canvas of={SpaceStories.PaddingExample} />
+
 <TokenTable rows={getPropRows('space')} columns={defaultColumns} />

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

@@ -0,0 +1,48 @@
+import { Box, Markdown } 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="background-contrast"
+      mb={64}
+      ml={16}
+      mr={32}
+      mt={4}
+      textAlign="center"
+    >
+      This box has{' '}
+      <Markdown text="`mt={4}`, `mr={32}`, `mb={64}`, and `ml={16}`." /> Inspect
+      the example to see what CSS properties are rendered.
+    </Box>
+  ),
+};
+
+export const PaddingExample: Story = {
+  render: () => (
+    <Box bg="background-selected">
+      <Box
+        bg="primary"
+        color="background-contrast"
+        pb={64}
+        pl={16}
+        pr={32}
+        pt={4}
+        textAlign="center"
+      >
+        This box has{' '}
+        <Markdown text="`pt={4}`, `pr={32}`, `pb={64}`, and `pl={16}`." />{' '}
+        Inspect the example to see what CSS properties are rendered.
+      </Box>
+    </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/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 logicalPhysicalParameters } from './Logical and physical CSS properties.mdx';
 import { parameters as storiesParameters } from './Stories.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
@@ -34,9 +35,10 @@ export const parameters = {
     deepControlsParameters,
     eslintRulesParameters,
     faqsParameters,
+    installationParameters,
+    logicalPhysicalParameters,
     storiesParameters,
     brandParameters,
-    installationParameters,
     usageGuideParameters,
   ])}
 />

package/src/lib/Meta/Logical and physical CSS properties.mdx

@@ -0,0 +1,123 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  Callout,
+  Code,
+  ImageWrapper,
+  TokenTable,
+} from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Meta/Logical and physical CSS properties',
+  title: 'Logical and physical CSS properties',
+  subtitle:
+    'Understanding CSS logical and physical properties and how Gamut supports both modes.',
+  status: 'static',
+};
+
+<Meta title="Meta/Logical and physical CSS properties" />
+
+<AboutHeader {...parameters} />
+
+## What are CSS logical properties?
+
+CSS logical properties are a modern approach to styling that adapts to the writing mode and text direction of your content, rather than being tied to physical screen directions. More information can be found on[MDN: CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+
+### Physical Properties (Traditional)
+
+Physical properties reference the physical dimensions of the viewport. For example:
+
+- `margin-left`, `margin-right`, `margin-top`, `margin-bottom`
+- `padding-left`, `padding-right`, `padding-top`, `padding-bottom`
+
+These work well for left-to-right (LTR) languages but require manual overrides for right-to-left (RTL) languages like Arabic or Hebrew.
+
+### Logical Properties (Modern)
+
+Logical properties reference the flow of content:
+
+- **Inline axis** (text direction): `margin-inline-start`, `margin-inline-end`
+- **Block axis** (reading direction): `margin-block-start`, `margin-block-end`
+
+## Using `useLogicalProperties` in Gamut
+
+Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. This allows you to choose which mode your application uses. By default, `useLogicalProperties` is set to `true`, meaning Gamut will use logical CSS properties. If you want to use physical CSS properties, you have to set `useLogicalProperties` to `false`.
+
+### Affected Props
+
+Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop:
+
+<TokenTable
+  idKey="prop"
+  columns={[
+    {
+      key: 'prop',
+      name: 'Prop',
+      size: 'sm',
+      render: ({ prop }) => <Code>{prop}</Code>,
+    },
+    {
+      key: 'physical',
+      name: 'Physical',
+      size: 'xl',
+      render: ({ physical }) =>
+        physical.map((p) => (
+          <>
+            <Code key={p}>{p}</Code>{' '}
+          </>
+        )),
+    },
+    {
+      key: 'logical',
+      name: 'Logical',
+      size: 'xl',
+      render: ({ logical }) =>
+        logical.map((l) => (
+          <>
+            <Code key={l}>{l}</Code>{' '}
+          </>
+        )),
+    },
+  ]}
+  rows={[
+    {
+      prop: 'mx',
+      physical: ['margin-left', 'margin-right'],
+      logical: ['margin-inline-start', 'margin-inline-end'],
+    },
+    { prop: 'mt', physical: ['margin-top'], logical: ['margin-block-start'] },
+    {
+      prop: 'py',
+      physical: ['padding-top', 'padding-bottom'],
+      logical: ['padding-block-start', 'padding-block-end'],
+    },
+    {
+      prop: 'pb',
+      physical: ['padding-bottom'],
+      logical: ['padding-block-end'],
+    },
+  ]}
+/>
+
+<Callout
+  text={
+    <>
+      Props like <code>m</code> and <code>p</code> (which set all four sides at
+      once) are not affected by this setting, as the CSS <code>margin</code> and{' '}
+      <code>padding</code> shorthands work identically in both modes.
+    </>
+  }
+/>
+
+## Previewing in Storybook
+
+You can toggle between logical and physical properties in Storybook using the **LogicalProps** toolbar button:
+
+<ImageWrapper
+  src="./meta/toolbar.png"
+  alt="The Storybook toolbar with the LogicalProps toggle highlighted."
+  height="auto"
+/>
+
+This allows you to preview how components render with either property mode without changing any code.

package/src/lib/Meta/Usage Guide.mdx

@@ -39,7 +39,8 @@ On each page is a toolbar located on the top:
 1. Grid (the 2x2 collection of squares) - applies a grid to the preview
 2. Color mode selector (the circle icon) - toggles between light and dark mode for rendered code examples
 3. Theme switcher (the paintbrush icon) - switches between different design system themes (Core, Admin, LX Studio, Percipio)
-4. Outline (dotted square) - applies outlines to elements in the rendered code examples
+4. LogicalProps (the two arrows icon) - toggles between physical and logical CSS properties
+5. Outline (dotted square) - applies outlines to elements in the rendered code examples
 
 ### Theme Switcher
 
@@ -58,6 +59,10 @@ Available themes:
 
 The theme switcher works in combination with the color mode selector, so you can test both light and dark variants of each theme.
 
+### LogicalProps
+
+The LogicalProps button (two arrows icon) provides a menu to select between Logical and Physical CSS properties.
+
 ### Showing code
 
 On the bottom right of each canvas (a rendered code example) is a button to show its code: