@codecademy/styleguide 79.0.1-alpha.4aeb6d.0 → 79.0.1-alpha.5950e5.0

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

@@ -1,42 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,34 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Layout',
-  subtitle:
-    'Props for handling dimensions and other layout specific properties.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Layout" />
-
-<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"
-/>;
-```
-
-<TokenTable rows={getPropRows('layout')} columns={defaultColumns} />

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

@@ -1,38 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, LinkTo, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'List',
-  subtitle:
-    'Props for adjusting list styles when rendering a component as a `ul` or `ol`',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/List" />
-
-<AboutHeader {...parameters} />
-
-List props control the appearance of ordered and unordered lists when components are rendered as `ul` or `ol` elements. These properties let you customize bullet styles, list positioning, and even use custom images as list markers, giving you full control over list presentation.
-
-For more advanced list features, refer to the <LinkTo id="Organisms/Lists & Tables/List">List component</LinkTo>.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ListExample = styled.div(system.list);
-
-<ListExample
-  as="ul"
-  listStyleType="square"
-  listStylePosition="inside"
-  listStyleImage="none"
->
-  <ListExample as="li">a list item</ListExample>
-</ListExample>;
-```
-
-<TokenTable rows={getPropRows('list')} columns={defaultColumns} />

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

@@ -1,29 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Positioning',
-  subtitle:
-    'Props that affect stacking and position contexts. Like `top`, `position` and `opacity`.',
-  status: 'updating',
-};
-
-<Meta title="Foundations/System/Props/Positioning" />
-
-<AboutHeader {...parameters} />
-
-Positioning props control how elements are positioned within their parent containers and manage their stacking order. Use these properties to create fixed headers, absolute overlays, sticky navigation, and control layering with z-index. The `inset` shorthand provides a convenient way to set all four position values at once.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const PositioningExample = styled.div(system.positioning);
-
-<PositioningExample position="absolute" zIndex={2} top="0" left="0" />;
-```
-
-<TokenTable rows={getPropRows('positioning')} columns={defaultColumns} />

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

@@ -1,31 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Shadow',
-  subtitle: 'Props for box and text shadows.',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Shadow" />
-
-<AboutHeader {...parameters} />
-
-Shadow props add depth and visual interest to your components through box and text shadows. These properties accept standard CSS shadow syntax, allowing you to create subtle elevation effects or dramatic visual depth. Use shadows consistently to establish visual hierarchy in your interface.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const ShadowExample = styled.div(system.shadow);
-
-<ShadowExample
-  boxShadow="0 0 4px rgba(0, 0, 0, .15)"
-  textShadow="0 0 4px rgba(0, 0, 0, .15)"
-/>;
-```
-
-<TokenTable rows={getPropRows('shadows')} columns={defaultColumns} />

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

@@ -1,44 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-
-import { AboutHeader, Callout, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-import * as SpaceStories from './Space.stories';
-
-export const parameters = {
-  title: 'Space',
-  subtitle: 'Props for maintaining specific vertical and horizontal rhythms',
-  status: 'updating',
-};
-
-<Meta of={SpaceStories} title="Foundations/System/Props/Space" />
-
-<AboutHeader {...parameters} />
-
-Space props provide a consistent way to apply margin and padding throughout your application. All spacing values reference the theme's spacing scale, ensuring visual consistency and making it easy to create responsive spacing patterns using array syntax.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-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/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/Foundations/System/Props/Typography.mdx

@@ -1,28 +0,0 @@
-import { Meta } from '@storybook/blocks';
-
-import { AboutHeader, TokenTable } from '~styleguide/blocks';
-
-import { defaultColumns, getPropRows } from '../../shared/elements';
-
-export const parameters = {
-  title: 'Typography',
-  subtitle: 'Props for text manipulation',
-  status: 'current',
-};
-
-<Meta title="Foundations/System/Props/Typography" />
-
-<AboutHeader {...parameters} />
-
-Typography props give you fine-grained control over text styling and appearance. These properties connect to the theme's typography scales for font families, sizes, weights, and line heights, making it simple to maintain typographic consistency across your application while allowing for custom text transformations and decorations.
-
-```tsx
-import styled from '@emotion/styled';
-import { system } from '@codecademy/gamut-styles';
-
-const TextExample = styled.p(system.typography);
-
-<TextExample fontSize={16} fontFamily="accent" textTransform="uppercase" />;
-```
-
-<TokenTable rows={getPropRows('typography')} columns={defaultColumns} />

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.