@codecademy/styleguide 79.0.1-alpha.d8b528.0 → 79.0.1-alpha.df213b.0

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

@@ -52,9 +52,6 @@ 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 =
@@ -80,7 +77,6 @@ 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/preview.ts

@@ -49,7 +49,6 @@ const preview: Preview = {
             'ESLint rules',
             'Contributing',
             'FAQs',
-            'Logical and physical CSS properties',
             'Stories',
           ],
           'Foundations',
@@ -164,19 +163,6 @@ 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,
-    },
-  },
 };
 
 export const decorators = [withEmotion];

package/.storybook/theming/GamutThemeProvider.tsx

@@ -34,14 +34,12 @@ type GlobalsContext = {
   globals: {
     colorMode: 'light' | 'dark';
     theme: keyof typeof themeMap;
-    logicalProps: 'true' | 'false';
   };
 };
 
 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 background = corePalette[themeBackground[colorMode]];
   const storyRef = useRef<HTMLDivElement>(null);
   const currentTheme = themeMap[selectedTheme];
@@ -59,7 +57,6 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
       <GamutProvider
         useCache={false}
         useGlobals={false}
-        useLogicalProperties={useLogicalProperties}
         theme={currentTheme as unknown as Theme}
       >
         <Background
@@ -75,10 +72,7 @@ export const withEmotion = (Story: any, context: GlobalsContext) => {
 
   // Wrap all stories in minimal provider
   return (
-    <GamutProvider
-      useLogicalProperties={useLogicalProperties}
-      theme={currentTheme as unknown as Theme}
-    >
+    <GamutProvider theme={currentTheme as unknown as Theme}>
       <Background
         alwaysSetVariables
         bg={themeBackground[colorMode]}

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.d8b528.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.d8b528.0) (2026-01-29)
+### [79.0.1-alpha.df213b.0](https://github.com/Codecademy/gamut/compare/@codecademy/styleguide@79.0.0...@codecademy/styleguide@79.0.1-alpha.df213b.0) (2026-01-29)
 
 **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.d8b528.0",
+  "version": "79.0.1-alpha.df213b.0",
   "author": "Codecademy Engineering",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "repository": "git@github.com:Codecademy/gamut.git",
-  "gitHead": "fe5dff414ecab26d29ead6252dccd7e4c5c00f64"
+  "gitHead": "ae9a6d7c67b8d1e9b70754cddae185ce2dba44fe"
 }

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

@@ -1,9 +1,8 @@
-import { Canvas, Meta } from '@storybook/blocks';
+import { Meta } from '@storybook/blocks';
 
-import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks';
+import { AboutHeader, TokenTable } from '~styleguide/blocks';
 
 import { defaultColumns, getPropRows } from '../../shared/elements';
-import * as SpaceStories from './Space.stories';
 
 export const parameters = {
   title: 'Space',
@@ -11,7 +10,7 @@ export const parameters = {
   status: 'updating',
 };
 
-<Meta of={SpaceStories} title="Foundations/System/Props/Space" />
+<Meta title="Foundations/System/Props/Space" />
 
 <AboutHeader {...parameters} />
 
@@ -26,19 +25,4 @@ const SpaceExample = styled.div(system.space);
 <SpaceExample p={8} my={[16, 24, 32]} />;
 ```
 
-These space 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={SpaceStories.MarginExample} />
-
-<Canvas of={SpaceStories.PaddingExample} />
-
 <TokenTable rows={getPropRows('space')} columns={defaultColumns} />

package/src/lib/Foundations/shared/elements.tsx

@@ -9,7 +9,6 @@ import {
 } from '@codecademy/gamut-styles';
 // eslint-disable-next-line gamut/import-paths
 import * as ALL_PROPS from '@codecademy/gamut-styles/src/variance/config';
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import kebabCase from 'lodash/kebabCase';
 
@@ -413,61 +412,29 @@ export const DarkModeTable = () => (
 );
 /* eslint-disable gamut/import-paths */
 
-const PropertiesRenderer = ({
-  property,
-  properties,
-  resolveProperty,
-}: {
-  property: string | { physical: string; logical: string };
-  properties?: string[] | { physical: string[]; logical: string[] };
-  resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
-}) => {
-  const currentTheme = useTheme() as { useLogicalProperties?: boolean };
-  const useLogicalProperties = currentTheme?.useLogicalProperties ?? true;
-
-  const mode = resolveProperty
-    ? resolveProperty(useLogicalProperties)
-    : 'physical';
-
-  const resolvedProperty =
-    typeof property === 'string' ? property : property[mode];
-
-  let resolvedProperties: string[];
-  if (!properties) {
-    resolvedProperties = [resolvedProperty];
-  } else if (Array.isArray(properties)) {
-    resolvedProperties = properties;
-  } else {
-    resolvedProperties = properties[mode];
-  }
-
-  return (
-    <>
-      {resolvedProperties.map((prop) => (
-        <Anchor
-          href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
-            prop
-          )}`}
-          key={prop}
-          rel=""
-          target="_blank"
-        >
-          <AnchorCode>{kebabCase(prop)}</AnchorCode>
-        </Anchor>
-      ))}
-    </>
-  );
-};
-
 const PROPERTIES_COLUMN = {
   key: 'properties',
   name: 'Properties',
   size: 'xl',
-  render: (props: {
-    property: string | { physical: string; logical: string };
-    properties?: string[] | { physical: string[]; logical: string[] };
-    resolveProperty?: (useLogicalProperties: boolean) => 'logical' | 'physical';
-  }) => <PropertiesRenderer {...props} />,
+  render: ({
+    property,
+    properties = [property],
+  }: {
+    property: string;
+    properties: string[];
+  }) =>
+    properties.map((property) => (
+      <Anchor
+        href={`https://developer.mozilla.org/en-US/docs/Web/CSS/${kebabCase(
+          property
+        )}`}
+        key={property}
+        rel=""
+        target="_blank"
+      >
+        <AnchorCode>{kebabCase(property)}</AnchorCode>
+      </Anchor>
+    )),
 };
 
 const SCALE_COLUMN = {
@@ -483,12 +450,7 @@ const TRANSFORM_COLUMN = {
   key: 'transform',
   name: 'Transform',
   size: 'fill',
-  render: ({ transform, resolveProperty }: any) => (
-    <>
-      {transform && <Code>{transform?.name}</Code>}
-      {resolveProperty && <Code>{resolveProperty?.name}</Code>}
-    </>
-  ),
+  render: ({ transform }: any) => transform && <Code>{transform?.name}</Code>,
 };
 
 export const defaultColumns = [

package/src/lib/Meta/About.mdx

@@ -13,7 +13,6 @@ import { parameters as deepControlsParameters } from './Deep Controls Add-On.mdx
 import { parameters as eslintRulesParameters } from './ESLint rules.mdx';
 import { parameters as faqsParameters } from './FAQs.mdx';
 import { parameters as installationParameters } from './Installation.mdx';
-import { parameters as logicalPhysicalParameters } from './Logical and physical CSS properties.mdx';
 import { parameters as storiesParameters } from './Stories.mdx';
 import { parameters as usageGuideParameters } from './Usage Guide.mdx';
 
@@ -35,10 +34,9 @@ export const parameters = {
     deepControlsParameters,
     eslintRulesParameters,
     faqsParameters,
-    installationParameters,
-    logicalPhysicalParameters,
     storiesParameters,
     brandParameters,
+    installationParameters,
     usageGuideParameters,
   ])}
 />

package/src/lib/Meta/Usage Guide.mdx

@@ -39,8 +39,7 @@ On each page is a toolbar located on the top:
 1. Grid (the 2x2 collection of squares) - applies a grid to the preview
 2. Color mode selector (the circle icon) - toggles between light and dark mode for rendered code examples
 3. Theme switcher (the paintbrush icon) - switches between different design system themes (Core, Admin, LX Studio, Percipio)
-4. LogicalProps (the two arrows icon) - toggles between physical and logical CSS properties
-5. Outline (dotted square) - applies outlines to elements in the rendered code examples
+4. Outline (dotted square) - applies outlines to elements in the rendered code examples
 
 ### Theme Switcher
 
@@ -59,10 +58,6 @@ Available themes:
 
 The theme switcher works in combination with the color mode selector, so you can test both light and dark variants of each theme.
 
-### LogicalProps
-
-The LogicalProps button (two arrows icon) provides a menu to select between Logical and Physical CSS properties.
-
 ### Showing code
 
 On the bottom right of each canvas (a rendered code example) is a button to show its code:

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

@@ -1,48 +0,0 @@
-import { Box, Markdown } from '@codecademy/gamut';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta: Meta<typeof Box> = {
-  title: 'Foundations/System/Props/Space',
-  component: Box,
-};
-
-export default meta;
-type Story = StoryObj<typeof Box>;
-
-export const MarginExample: Story = {
-  render: () => (
-    <Box
-      bg="primary"
-      color="background-contrast"
-      mb={64}
-      ml={16}
-      mr={32}
-      mt={4}
-      textAlign="center"
-    >
-      This box has{' '}
-      <Markdown text="`mt={4}`, `mr={32}`, `mb={64}`, and `ml={16}`." /> Inspect
-      the example to see what CSS properties are rendered.
-    </Box>
-  ),
-};
-
-export const PaddingExample: Story = {
-  render: () => (
-    <Box bg="background-selected">
-      <Box
-        bg="primary"
-        color="background-contrast"
-        pb={64}
-        pl={16}
-        pr={32}
-        pt={4}
-        textAlign="center"
-      >
-        This box has{' '}
-        <Markdown text="`pt={4}`, `pr={32}`, `pb={64}`, and `pl={16}`." />{' '}
-        Inspect the example to see what CSS properties are rendered.
-      </Box>
-    </Box>
-  ),
-};

package/src/lib/Meta/Logical and physical CSS properties.mdx

@@ -1,123 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import {
-  AboutHeader,
-  Callout,
-  Code,
-  ImageWrapper,
-  TokenTable,
-} from '~styleguide/blocks';
-
-export const parameters = {
-  id: 'Meta/Logical and physical CSS properties',
-  title: 'Logical and physical CSS properties',
-  subtitle:
-    'Understanding CSS logical and physical properties and how Gamut supports both modes.',
-  status: 'static',
-};
-
-<Meta title="Meta/Logical and physical CSS properties" />
-
-<AboutHeader {...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)
-
-### Physical Properties (Traditional)
-
-Physical properties reference the physical dimensions of the viewport. For example:
-
-- `margin-left`, `margin-right`, `margin-top`, `margin-bottom`
-- `padding-left`, `padding-right`, `padding-top`, `padding-bottom`
-
-These work well for left-to-right (LTR) languages but require manual overrides for right-to-left (RTL) languages like Arabic or Hebrew.
-
-### Logical Properties (Modern)
-
-Logical properties reference the flow of content:
-
-- **Inline axis** (text direction): `margin-inline-start`, `margin-inline-end`
-- **Block axis** (reading direction): `margin-block-start`, `margin-block-end`
-
-## Using `useLogicalProperties` in Gamut
-
-Gamut supports both physical and logical CSS properties through the `useLogicalProperties` prop on `GamutProvider`. This allows you to choose which mode your application uses. By default, `useLogicalProperties` is set to `true`, meaning Gamut will use logical CSS properties. If you want to use physical CSS properties, you have to set `useLogicalProperties` to `false`.
-
-### Affected Props
-
-Here are some examples of how physical and logical properties are affected by the `useLogicalProperties` prop:
-
-<TokenTable
-  idKey="prop"
-  columns={[
-    {
-      key: 'prop',
-      name: 'Prop',
-      size: 'sm',
-      render: ({ prop }) => <Code>{prop}</Code>,
-    },
-    {
-      key: 'physical',
-      name: 'Physical',
-      size: 'xl',
-      render: ({ physical }) =>
-        physical.map((p) => (
-          <>
-            <Code key={p}>{p}</Code>{' '}
-          </>
-        )),
-    },
-    {
-      key: 'logical',
-      name: 'Logical',
-      size: 'xl',
-      render: ({ logical }) =>
-        logical.map((l) => (
-          <>
-            <Code key={l}>{l}</Code>{' '}
-          </>
-        )),
-    },
-  ]}
-  rows={[
-    {
-      prop: 'mx',
-      physical: ['margin-left', 'margin-right'],
-      logical: ['margin-inline-start', 'margin-inline-end'],
-    },
-    { prop: 'mt', physical: ['margin-top'], logical: ['margin-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'],
-    },
-  ]}
-/>
-
-<Callout
-  text={
-    <>
-      Props like <code>m</code> and <code>p</code> (which set all four sides at
-      once) are not affected by this setting, as the CSS <code>margin</code> and{' '}
-      <code>padding</code> shorthands work identically in both modes.
-    </>
-  }
-/>
-
-## Previewing in Storybook
-
-You can toggle between logical and physical properties in Storybook using the **LogicalProps** toolbar button:
-
-<ImageWrapper
-  src="./meta/toolbar.png"
-  alt="The Storybook toolbar with the LogicalProps toggle highlighted."
-  height="auto"
-/>
-
-This allows you to preview how components render with either property mode without changing any code.