@codecademy/styleguide 79.1.2 → 79.2.0-alpha.097b76.0

package/.storybook/components/Elements/DocsContainer.tsx

@@ -52,6 +52,9 @@ export const DocsContainer: React.FC<{
 
   const globalTheme =
     (context as any).store.userGlobals?.globals?.theme || 'core';
+  const globalLogicalProps = (context as any).store.userGlobals?.globals
+    ?.logicalProps;
+  const useLogicalProperties = globalLogicalProps !== 'false';
 
   const { currentTheme } = useMemo(() => {
     const findThemeStory: keyof typeof themeSpecificStories | undefined =
@@ -77,6 +80,7 @@ export const DocsContainer: React.FC<{
         cache={createEmotionCache({ speedy: false })}
         // This is typed to the CoreTheme in theme.d.ts
         theme={currentTheme as unknown as CoreTheme}
+        useLogicalProperties={useLogicalProperties}
       >
         <ColorMode mode="light">
           <HelmetProvider>

package/.storybook/components/Elements/Markdown.tsx

@@ -43,7 +43,6 @@ export const Code = styled.code`
   color: ${themed('colors.navy-700')};
   background-color: ${themed('colors.gray-100')};
   display: inline-block;
-  overflow-x: scroll;
 
   ::-webkit-scrollbar {
     width: 4px;

package/.storybook/preview.ts

@@ -49,6 +49,7 @@ const preview: Preview = {
             'Contributing',
             'ESLint rules',
             'FAQs',
+            'Logical and physical CSS properties',
             'Stories',
             'Brand',
             'Installation',
@@ -167,6 +168,32 @@ export const globalTypes = {
       showName: true,
     },
   },
+  logicalProps: {
+    name: 'LogicalProps',
+    description: 'Toggle between logical and physical CSS properties',
+    defaultValue: 'true',
+    toolbar: {
+      icon: 'transfer',
+      items: [
+        { value: 'true', title: 'Logical' },
+        { value: 'false', title: 'Physical' },
+      ],
+      showName: true,
+    },
+  },
+  direction: {
+    name: 'Direction',
+    description: 'Text direction (LTR or RTL)',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'arrowright',
+      items: [
+        { value: 'ltr', title: 'Left-to-Right (LTR)', icon: 'arrowright' },
+        { value: 'rtl', title: 'Right-to-Left (RTL)', icon: 'arrowleft' },
+      ],
+      showName: true,
+    },
+  },
 };
 
 export const decorators = [withEmotion];

package/.storybook/theming/GamutThemeProvider.tsx

@@ -34,12 +34,16 @@ type GlobalsContext = {
   globals: {
     colorMode: 'light' | 'dark';
     theme: keyof typeof themeMap;
+    logicalProps: 'true' | 'false';
+    direction: 'ltr' | 'rtl';
   };
 };
 
 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];
@@ -57,6 +61,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
       <GamutProvider
         useCache={false}
         useGlobals={false}
+        useLogicalProperties={useLogicalProperties}
         theme={currentTheme as unknown as Theme}
       >
         <Background
@@ -64,7 +69,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
           bg={themeBackground[colorMode]}
           ref={storyRef}
         >
-          {Story()}
+          <div dir={direction}>{Story()}</div>
         </Background>
       </GamutProvider>
     );
@@ -72,13 +77,16 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
 
   // Wrap all stories in minimal provider
   return (
-    <GamutProvider theme={currentTheme as unknown as Theme}>
+    <GamutProvider
+      useLogicalProperties={useLogicalProperties}
+      theme={currentTheme as unknown as Theme}
+    >
       <Background
         alwaysSetVariables
         bg={themeBackground[colorMode]}
         ref={storyRef}
       >
-        {Story()}
+        <div dir={direction}>{Story()}</div>
       </Background>
     </GamutProvider>
   );

package/CHANGELOG.md

@@ -3,9 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-### [79.1.2](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.1.2) (2026-02-12)
+## [79.2.0-alpha.097b76.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.1.1...@codecademy/styleguide@79.2.0-alpha.097b76.0) (2026-02-12)
 
-**Note:** Version bump only for package @codecademy/styleguide
+### 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)
 

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@codecademy/styleguide",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "79.1.2",
+  "version": "79.2.0-alpha.097b76.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "bbc4cf8da76ebc754ed05b11acd9d2e81bb8683e"
+  "gitHead": "8857953b7b0b50867a212797e6864be0a0caa20a"
 }

package/src/lib/Foundations/System/About.mdx

@@ -7,7 +7,7 @@ import {
 } from '~styleguide/blocks';
 
 import { parameters as composeParameters } from './Compose.mdx';
-import { parameters as propsParameters } from './Props.mdx';
+import { parameters as propsParameters } from './Props/About.mdx';
 import { parameters as responsivePropertiesParameters } from './ResponsiveProperties/ResponsiveProperties.mdx';
 import { parameters as variantsParameters } from './Variants.mdx';
 

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

@@ -0,0 +1,81 @@
+import { Meta } from '@storybook/blocks';
+
+import {
+  AboutHeader,
+  addParentPath,
+  TableOfContents,
+} from '~styleguide/blocks';
+
+import { parameters as backgroundParameters } from './Background.mdx';
+import { parameters as borderParameters } from './Border.mdx';
+import { parameters as colorParameters } from './Color.mdx';
+import { parameters as flexParameters } from './Flex.mdx';
+import { parameters as gridParameters } from './Grid.mdx';
+import { parameters as layoutParameters } from './Layout.mdx';
+import { parameters as listParameters } from './List.mdx';
+import { parameters as positioningParameters } from './Positioning.mdx';
+import { parameters as shadowParameters } from './Shadow.mdx';
+import { parameters as spaceParameters } from './Space.mdx';
+import { parameters as typographyParameters } from './Typography.mdx';
+
+export const parameters = {
+  id: 'Foundations/System/Props',
+  title: 'Props',
+  subtitle:
+    'Reusable CSS-in-JS props with predictable behaviors and a consistent API for responsive CSS.',
+  status: 'current',
+  source: {
+    repo: 'gamut-styles',
+    githubLink:
+      'https://github.com/Codecademy/gamut/blob/main/packages/gamut-styles/src/variance/config.ts',
+  },
+};
+
+<Meta title="Foundations/System/Props/About" />
+
+<AboutHeader {...parameters} />
+
+We provide a set of out of style functions out of the box through `@codecademy/gamut-styles` that are standardized throughout all of our components. These props are strongly typed and can be included as necessary on any styled component.
+
+System props have a few facets that are important to note:
+
+- They can some times represent multiple properties.
+- They may be restricted to specific token scales but will always have access to global css values like `initial` and `none`.
+- They may have a function that transforms the given value into a standardized value (e.g. `width={.5}` => `width: 50%`)
+
+We've grouped these into a few main groups that affect simliar behaviors: `layout`, `space`, `color`, `border`, `background`, `typography`, `positioning`, `grid`, `flex`, `shadow`.
+
+You may import these groups directly from `gamut-styles`.
+
+```tsx
+import { variance } from '@codecademy/variance';
+import { system } from '@codecademy/gamut-styles';
+
+const ExampleContainer = styled.div(
+  variance.compose(system.layout, system.positioning)
+);
+
+<ExampleContainer position="absolute" width="50px" height="50px" />;
+```
+
+Each system prop has 3 important features:
+
+- `properties`: Any number of CSS Properties this prop is responsible for.
+- `scale`: A set of values that determines valid inputs for each prop based on the selected theme and that theme's typing (e.g. if the `lxStudio` theme is being used, a scale of `colors` will restrict to the `lxStudio` theme's colors). These are generally aliases for more verbose or opaque CSS properties allowing you to specify a human readable name in your props. If a prop doesn't have a scale that means it accepts all valid `CSSType` values as props, however if it does have a scale it will only accept global values and keys of the provided scale.
+- `transform`: A function that changes the prop / scale value prior to adding it to the stylehseet. This allows us to add / change units for properties like `width` and `height`. Or ensure extra defaults or fallbacks are added dynamically.
+
+<TableOfContents
+  links={addParentPath(parameters.id, [
+    layoutParameters,
+    spaceParameters,
+    typographyParameters,
+    colorParameters,
+    borderParameters,
+    flexParameters,
+    gridParameters,
+    backgroundParameters,
+    positioningParameters,
+    shadowParameters,
+    listParameters,
+  ])}
+/>

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

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
+
+import { defaultColumns, getPropRows } from '../../shared/elements';
+
+export const parameters = {
+  title: 'Background',
+  subtitle:
+    'Props for background manipulation (sizing / repitition / images), for background color see `colors`.',
+  status: 'current',
+};
+
+<Meta title="Foundations/System/Props/Background" />
+
+<AboutHeader {...parameters} />
+
+Background props control how background images and patterns are displayed on elements. These properties give you control over image sizing, positioning, and repetition behavior. For solid background colors, use the color props which connect to the theme's color palette.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+import myBg from './myBg.png';
+
+const BackgroundExample = styled.div(system.background);
+
+<BackgroundExample background={`url(${myBg}`} backgroundSize="cover" />;
+```
+
+<TokenTable rows={getPropRows('background')} columns={defaultColumns} />

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

@@ -0,0 +1,53 @@
+import { Canvas, Meta } from '@storybook/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',
+  subtitle: 'Border styles',
+  status: 'updating',
+};
+
+<Meta of={BorderStories} title="Foundations/System/Props/Border" />
+
+<AboutHeader {...parameters} />
+
+Border props enable you to add and style borders on any side of an element. These properties support directional borders (top, right, bottom, left) as well as convenient shorthands for horizontal and vertical borders. Border radius values connect to the theme's `borderRadii` scale for consistent corner rounding.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const BorderExample = styled.div(system.border);
+
+<BorderExample
+  border={1}
+  borderLeft="none"
+  borderRightStyle="dotted"
+  borderRadius="md"
+/>;
+```
+
+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

@@ -0,0 +1,42 @@
+import { Canvas, Meta } from '@storybook/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',
+  subtitle: 'Specific color properties',
+  status: 'current',
+};
+
+<Meta of={ColorStories} title="Foundations/System/Props/Color" />
+
+<AboutHeader {...parameters} />
+
+Color props control the foreground, background, and border colors of elements. All color values are restricted to your theme's color palette, ensuring consistent color usage throughout your application. The `bg` shorthand provides a convenient way to set background colors quickly.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+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/Foundations/System/Props/Flex.mdx

@@ -0,0 +1,28 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
+
+import { defaultColumns, getPropRows } from '../../shared/elements';
+
+export const parameters = {
+  title: 'Flex',
+  subtitle: 'Flex specific properties',
+  status: 'current',
+};
+
+<Meta title="Foundations/System/Props/Flex" />
+
+<AboutHeader {...parameters} />
+
+Flex props provide complete control over flexbox layouts, from container behavior to individual flex item properties. These properties make it easy to create flexible, responsive layouts with proper alignment and distribution of child elements. Use these on flex containers to control their children or on flex items to control their own behavior.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const FlexExample = styled.div(system.flex);
+
+<FlexExample flex={1} justifyContent="center" alignItems="flex-start" />;
+```
+
+<TokenTable rows={getPropRows('flex')} columns={defaultColumns} />

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

@@ -0,0 +1,31 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
+
+import { defaultColumns, getPropRows } from '../../shared/elements';
+
+export const parameters = {
+  title: 'Grid',
+  subtitle: 'Grid specific properties',
+  status: 'current',
+};
+
+<Meta title="Foundations/System/Props/Grid" />
+
+<AboutHeader {...parameters} />
+
+Grid props give you powerful control over CSS Grid layouts. Define grid templates, control auto-placement behavior, and set gaps between grid items. These properties make it straightforward to create complex, responsive grid layouts with precise control over both container and item positioning.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const GridExample = styled.div(system.grid);
+
+<GridExample
+  gridTemplateColumns="max-content 1fr max-content"
+  columnGap={32}
+/>;
+```
+
+<TokenTable rows={getPropRows('grid')} columns={defaultColumns} />

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

@@ -0,0 +1,45 @@
+import { Canvas, 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',
+  subtitle:
+    'Props for handling dimensions and other layout specific properties.',
+  status: 'updating',
+};
+
+<Meta title="Foundations/System/Props/Layout" of={LayoutStories} />
+
+<AboutHeader {...parameters} />
+
+Layout props control the visual structure and dimensions of elements. These properties determine how components take up space, their display behavior, and how they align within their containers. Use these props to set widths, heights, overflow behavior, and container types for responsive layouts.
+
+```tsx
+import styled from '@emotion/styled';
+import { system } from '@codecademy/gamut-styles';
+
+const LayoutExample = styled.div(system.layout);
+
+<LayoutExample
+  display="flex"
+  width="50%"
+  height="300px"
+  verticalAlign="middle"
+/>;
+```
+
+## Examples
+
+### Width
+
+<Canvas of={LayoutStories.WidthExample} />
+
+### Direction
+
+<Canvas of={LayoutStories.DirectionExample} />
+
+<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />