@codecademy/styleguide 79.2.0-alpha.2d3aae.0 → 79.2.0-alpha.2f9b47.0

package/CHANGELOG.md

@@ -3,13 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.2.0-alpha.2d3aae.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.0...@codecademy/styleguide@79.2.0-alpha.2d3aae.0) (2026-02-09)
+## [79.2.0-alpha.2f9b47.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.2.0-alpha.2f9b47.0) (2026-02-13)
 
 ### Features
 
-- Add border related logical props ([#3257](https://github.com/Codecademy/gamut/issues/3257)) ([e852afa](https://github.com/Codecademy/gamut/commit/e852afa6b0f70eb0e3a696c2b0fde7be0047bd5b))
+- Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([7efbb9a](https://github.com/Codecademy/gamut/commit/7efbb9aabcd07dc6429432d007eaa5603ac1d70c))
 - Updates to ThemeProvider, tokens, and transform to allow Logical vs Physical prop resolution ([#3234](https://github.com/Codecademy/gamut/issues/3234)) ([567a6ae](https://github.com/Codecademy/gamut/commit/567a6aeffb3e8628db4b5c9a37dab965b716d969))
 
+### [79.1.1](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.0...@codecademy/styleguide@79.1.1) (2026-02-11)
+
+**Note:** Version bump only for package @codecademy/styleguide
+
 ## [79.1.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.1.0) (2026-02-09)
 
 ### Features

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.2.0-alpha.2d3aae.0",
+  "version": "79.2.0-alpha.2f9b47.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "bf1034f5df41d892ef8fd8c5ea2da396a9d2b5ae"
+  "gitHead": "4577f2565a67fc116b56c55ecca9c3e849a90be1"
 }

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/System/Props/Positioning.mdx

@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/blocks';
+import { Canvas, Meta } from '@storybook/blocks';
 
 import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
+import * as PositioningStories from './Positioning.stories';
 
 export const parameters = {
   title: 'Positioning',
@@ -11,7 +12,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta title="Foundations/System/Props/Positioning" />
+<Meta title="Foundations/System/Props/Positioning" of={PositioningStories} />
 
 <AboutHeader {...parameters} />
 
@@ -26,4 +27,8 @@ const PositioningExample = styled.div(system.positioning);
 <PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
 ```
 
+These positioning 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.
+
+<Canvas of={PositioningStories.PositionExample} />
+
 <TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />

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

@@ -0,0 +1,32 @@
+import { Box, Markdown } from '@codecademy/gamut';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Box> = {
+  title: 'Foundations/System/Props/Positioning',
+  component: Box,
+};
+
+export default meta;
+type Story = StoryObj<typeof Box>;
+
+export const PositionExample: Story = {
+  render: () => (
+    <Box bg="background-selected" height="150px" position="relative">
+      <Box
+        bg="primary"
+        color="background-contrast"
+        left={16}
+        p={16}
+        position="absolute"
+        top={16}
+      >
+        This box has{' '}
+        <Markdown text="`position='absolute'`, `top={16}`, and `left={16}`." />{' '}
+        Inspect the example to see what CSS properties are rendered. You can
+        also change the value of{' '}
+        <Markdown text="`useLogicalProperties` and `direction`" /> in the
+        toolbar to see how the box renders differently.
+      </Box>
+    </Box>
+  ),
+};

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/Molecules/Tips/InfoTip/InfoTip.stories.tsx

@@ -296,14 +296,14 @@ export const ZIndex: Story = {
   },
   render: (args) => (
     <FlexBox center flexDirection="column" m={24} py={64}>
-      <Box bg="paleBlue" zIndex={3}>
+      <Box bg="background-primary" zIndex={3}>
         I will not be behind the infotip, sad + unreadable
       </Box>
       <InfoTip
         ariaLabel="z-index example without override"
         info="I am inline, cool"
       />
-      <Box bg="paleBlue" zIndex={3}>
+      <Box bg="background-primary" zIndex={3}>
         I will be behind the infotip, nice + great
       </Box>
       <InfoTip {...args} ariaLabel="z-index example with override" />

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