@codecademy/styleguide 79.0.1-alpha.bd18ee.0 → 79.0.1-alpha.c6600b.0

package/.storybook/preview.ts

@@ -177,6 +177,18 @@ export const globalTypes = {
       showName: true,
     },
   },
+  direction: {
+    name: 'Direction',
+    description: 'Text direction for the page',
+    defaultValue: 'ltr',
+    toolbar: {
+      items: [
+        { value: 'ltr', icon: 'arrowright', title: 'Left-To-Right' },
+        { value: 'rtl', icon: 'arrowleft', title: 'Right-To-Left' },
+      ],
+      showName: true,
+    },
+  },
 };
 
 export const decorators = [withEmotion];

package/.storybook/theming/GamutThemeProvider.tsx

@@ -35,6 +35,7 @@ type GlobalsContext = {
     colorMode: 'light' | 'dark';
     theme: keyof typeof themeMap;
     logicalProps: 'true' | 'false';
+    direction: 'ltr' | 'rtl';
   };
 };
 
@@ -42,6 +43,7 @@ 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 direction = context.globals.direction ?? 'ltr';
   const background = corePalette[themeBackground[colorMode]];
   const storyRef = useRef<HTMLDivElement>(null);
   const currentTheme = themeMap[selectedTheme];
@@ -66,6 +68,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
           alwaysSetVariables
           bg={themeBackground[colorMode]}
           ref={storyRef}
+          dir={direction}
         >
           {Story()}
         </Background>
@@ -83,6 +86,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
         alwaysSetVariables
         bg={themeBackground[colorMode]}
         ref={storyRef}
+        dir={direction}
       >
         {Story()}
       </Background>

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.bd18ee.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.bd18ee.0) (2026-02-05)
+### [79.0.1-alpha.c6600b.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.c6600b.0) (2026-02-06)
 
 **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.bd18ee.0",
+  "version": "79.0.1-alpha.c6600b.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "2b6be3cc33f13466ff4fecdbb80202d8994e0ae4"
+  "gitHead": "d2ea451d8160591a4ab8bcc85d0b401bc009cd13"
 }

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

@@ -1,9 +1,8 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
-import * as LayoutStories from './Layout.stories';
 
 export const parameters = {
   title: 'Layout',
@@ -12,7 +11,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Layout" of={LayoutStories} />
+<Meta title="Foundations/System/Props/Layout" />
 
 <AboutHeader {...parameters} />
 
@@ -32,14 +31,4 @@ const LayoutExample = styled.div(system.layout);
 />;
 ```
 
-## Examples
-
-### Width
-
-<Canvas of={LayoutStories.WidthExample} />
-
-### Direction
-
-<Canvas of={LayoutStories.DirectionExample} />
-
 <TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

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

@@ -485,8 +485,8 @@ const TRANSFORM_COLUMN = {
   size: 'fill',
   render: ({ transform, resolveProperty }: any) => (
     <>
-      {transform && <Code>{transform.name}</Code>}{' '}
-      {resolveProperty && <Code>{resolveProperty.name}</Code>}
+      {transform && <Code>{transform?.name}</Code>}
+      {resolveProperty && <Code>{resolveProperty?.name}</Code>}
     </>
   ),
 };

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

@@ -22,7 +22,7 @@ export const 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)
+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)
 
@@ -46,7 +46,9 @@ Gamut supports both physical and logical CSS properties through the `useLogicalP
 
 ### Affected Props
 
-Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop:
+When `useLogicalProperties` is enabled, Gamut replaces physical CSS properties with their logical equivalents. This applies to both **base properties** (like `marginLeft`, `width`) and **shorthand props** (like `mx`, `py`).
+
+The table below shows a few examples — this is not a comprehensive list.
 
 <TokenTable
   idKey="prop"
@@ -59,7 +61,7 @@ Here are some examples of how physical and logical properties are affected by th
     },
     {
       key: 'physical',
-      name: 'Physical',
+      name: 'Physical CSS',
       size: 'xl',
       render: ({ physical }) =>
         physical.map((p) => (
@@ -70,7 +72,7 @@ Here are some examples of how physical and logical properties are affected by th
     },
     {
       key: 'logical',
-      name: 'Logical',
+      name: 'Logical CSS',
       size: 'xl',
       render: ({ logical }) =>
         logical.map((l) => (
@@ -81,21 +83,35 @@ Here are some examples of how physical and logical properties are affected by th
     },
   ]}
   rows={[
+    {
+      prop: 'marginLeft',
+      physical: ['margin-left'],
+      logical: ['margin-inline-start'],
+    },
     {
       prop: 'mx',
       physical: ['margin-left', 'margin-right'],
       logical: ['margin-inline-start', 'margin-inline-end'],
     },
-    { prop: 'mt', physical: ['margin-top'], logical: ['margin-block-start'] },
+    {
+      prop: 'paddingTop',
+      physical: ['padding-top'],
+      logical: ['padding-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'],
+      prop: 'width',
+      physical: ['width'],
+      logical: ['inline-size'],
+    },
+    {
+      prop: 'height',
+      physical: ['height'],
+      logical: ['block-size'],
     },
   ]}
 />

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

@@ -1,47 +0,0 @@
-import { Box, Markdown } from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Box> = {
-  title: 'Foundations/System/Props/Layout',
-  component: Box,
-};
-
-export default meta;
-type Story = StoryObj<typeof Box>;
-
-export const WidthExample: Story = {
-  render: () => (
-    <Box bg="background-selected" p={16}>
-      <Box
-        bg="primary"
-        color="background-contrast"
-        height="300px"
-        p={16}
-        width="50%"
-      >
-        This box has <Markdown text="`width='50%' and height='300px'`." /> It
-        takes up half the width of its container. Inspect the box to see the
-        rendered CSS property.
-      </Box>
-    </Box>
-  ),
-};
-
-export const DirectionExample: Story = {
-  render: () => (
-    <Box display="flex" flexDirection="row" gap={16}>
-      <Box bg="background-selected" p={16} width="50%">
-        <Box bg="primary" color="background-contrast" direction="ltr" p={16}>
-          <Markdown text="`direction='ltr'`." /> Left-to-right text direction
-          (default for English).
-        </Box>
-      </Box>
-      <Box bg="background-selected" p={16} width="50%">
-        <Box bg="primary" color="background-contrast" direction="rtl" p={16}>
-          <Markdown text="`direction='rtl'`." /> Right-to-left text direction
-          (used for Arabic, Hebrew, etc.).
-        </Box>
-      </Box>
-    </Box>
-  ),
-};