@codecademy/styleguide 79.0.1-alpha.470613.0 → 79.0.1-alpha.4746be.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,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.470613.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.470613.0) (2026-02-05)
+### [79.0.1-alpha.4746be.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.4746be.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.470613.0",
+  "version": "79.0.1-alpha.4746be.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "c1aeb7abf9203d179a9c09d4f290021cee11f01c"
+  "gitHead": "cb33dc6a45070d633af69f28a74cb3e059cd8fab"
 }

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