@codecademy/styleguide 79.1.0-alpha.8bbf79.0 → 79.1.0-alpha.e84769.0

package/.storybook/preview.ts

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

package/CHANGELOG.md

@@ -3,10 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [79.1.0-alpha.8bbf79.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.1.0-alpha.8bbf79.0) (2026-02-06)
+## [79.1.0-alpha.e84769.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.1.0-alpha.e84769.0) (2026-02-06)
 
 ### 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)) ([567a6ae](https://github.com/Codecademy/gamut/commit/567a6aeffb3e8628db4b5c9a37dab965b716d969))
 
 ## [79.0.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@78.5.5...@codecademy/styleguide@79.0.0) (2026-01-29)

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.0-alpha.8bbf79.0",
+  "version": "79.1.0-alpha.e84769.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "303b3ce4044ecf18c344313f75e73fc0e2b59b1a"
+  "gitHead": "744d95e322f1e323af94678988aecf562dfacfe8"
 }

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/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,9 +46,7 @@ Gamut supports both physical and logical CSS properties through the `useLogicalP
 
 ### Affected Props
 
-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.
+Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop:
 
 <TokenTable
   idKey="prop"
@@ -61,7 +59,7 @@ The table below shows a few examples — this is not a comprehensive list.
     },
     {
       key: 'physical',
-      name: 'Physical CSS',
+      name: 'Physical',
       size: 'xl',
       render: ({ physical }) =>
         physical.map((p) => (
@@ -72,7 +70,7 @@ The table below shows a few examples — this is not a comprehensive list.
     },
     {
       key: 'logical',
-      name: 'Logical CSS',
+      name: 'Logical',
       size: 'xl',
       render: ({ logical }) =>
         logical.map((l) => (
@@ -83,35 +81,21 @@ The table below shows a few examples — this is not a comprehensive list.
     },
   ]}
   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: 'paddingTop',
-      physical: ['padding-top'],
-      logical: ['padding-block-start'],
-    },
+    { prop: 'mt', physical: ['margin-top'], logical: ['margin-block-start'] },
     {
       prop: 'py',
       physical: ['padding-top', 'padding-bottom'],
       logical: ['padding-block-start', 'padding-block-end'],
     },
     {
-      prop: 'width',
-      physical: ['width'],
-      logical: ['inline-size'],
-    },
-    {
-      prop: 'height',
-      physical: ['height'],
-      logical: ['block-size'],
+      prop: 'pb',
+      physical: ['padding-bottom'],
+      logical: ['padding-block-end'],
     },
   ]}
 />