@codecademy/styleguide 79.2.0-alpha.f66feb.0 → 79.2.0-alpha.f9ca97.0

package/.storybook/components/Scales/ColorScale.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { themed } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import { Box, GridBox } from '@codecademy/gamut';
+import { Box, GridBox } from '@codecademy/gamut/src';
 
 const HexCode = styled.span`
   font-family: ${themed('fontFamily.monospace')};

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.f66feb.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.0...@codecademy/styleguide@79.2.0-alpha.f66feb.0) (2026-02-11)
+## [79.2.0-alpha.f9ca97.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.2.0-alpha.f9ca97.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.f66feb.0",
+  "version": "79.2.0-alpha.f9ca97.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "48caddfa6555eb3c8ea5ae0cf5b1b2602be21163"
+  "gitHead": "d73668577cae898037fa05bed7b91cc4c7312a9d"
 }

package/src/lib/Foundations/Layout.mdx

@@ -1,4 +1,4 @@
-import { Box } from '@codecademy/gamut';
+import { Box } from '@codecademy/gamut/src';
 import { Meta } from '@storybook/blocks';
 
 import { ComponentHeader, LinkTo, TokenTable } from '~styleguide/blocks';

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/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/Typography/Text/Text.stories.tsx

@@ -1,12 +1,12 @@
 import { Box, Column, LayoutGrid, Text } from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment } from 'react';
-
+// eslint-disable-next-line gamut/import-paths
 import {
   typographyElementVariants,
   typographyStyleVariants,
   typographyUtilities,
-} from '../../../../../gamut/src/Typography/variants';
+} from '@codecademy/gamut/src/Typography/variants';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Fragment } from 'react';
 
 const meta: Meta<typeof Text> = {
   component: Text,

package/src/lib/Typography/Text/tables.tsx

@@ -1,8 +1,8 @@
 import { Column, LayoutGrid, Text } from '@codecademy/gamut';
+// eslint-disable-next-line gamut/import-paths
+import { typographyElementVariants } from '@codecademy/gamut/src/Typography/variants';
 import { Fragment } from 'react';
 
-import { typographyElementVariants } from '../../../../../gamut/src/Typography/variants';
-
 export const Elements: React.FC = () => (
   <LayoutGrid gap={32} my={48}>
     {Object.keys(typographyElementVariants).map((tag) => (

package/src/lib/UX Writing/Component guidelines/Alerts.mdx

@@ -1,4 +1,4 @@
-import { Alert, Text } from '@codecademy/gamut';
+import { Alert, Text } from '@codecademy/gamut/src';
 import { Meta } from '@storybook/blocks';
 
 import { AboutHeader, LinkTo } from '~styleguide/blocks';