Remove usage of @pigment-css/theme package in docs

Author: Brijesh Bittu

docs/package.json

@@ -14,7 +14,6 @@
     "@base-ui-components/react": "^1.0.0-alpha.6",
     "@mdx-js/mdx": "^3.1.0",
     "@pigment-css/react-new": "workspace:*",
-    "@pigment-css/theme": "workspace:*",
     "@stefanprobst/rehype-extract-toc": "^2.2.1",
     "clipboard-copy": "4.0.1",
     "clsx": "^2.1.1",

docs/src/app/(public)/(content)/layout.pigment.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import type { Metadata, Viewport } from 'next/types';
-import { t } from '@pigment-css/theme';
-import { styled } from '@pigment-css/react-new';
+import { styled, t } from '@pigment-css/react-new';
 
 import { Header } from 'docs/components/Header';
 import * as SideNav from 'docs/components/SideNav';

docs/src/app/(public)/page.pigment.tsx

@@ -1,7 +1,6 @@
 import { Metadata, Viewport } from 'next';
 import Image from 'next/image';
-import { t } from '@pigment-css/theme';
-import { css, styled } from '@pigment-css/react-new';
+import { css, styled, t } from '@pigment-css/react-new';
 
 import { applyText, spacing } from 'docs/utils/theme';
 import { Link } from 'docs/components/Link';

docs/src/app/layout.pigment.tsx

@@ -6,8 +6,7 @@ import * as React from 'react';
 import { Metadata, Viewport } from 'next';
 import { Inter } from 'next/font/google';
 
-import { t } from '@pigment-css/theme';
-import { css } from '@pigment-css/react-new';
+import { css, t } from '@pigment-css/react-new';
 
 import favicon from '~assets/favicon.ico';
 import faviconDev from '~assets/favicon-dev.ico';

docs/src/augment.d.ts

@@ -1,6 +1,6 @@
 import type { Theme as UserTheme } from './theme';
 
-declare module '@pigment-css/theme' {
+declare module '@pigment-css/react-new' {
   export interface Theme extends UserTheme {}
 }
 

docs/src/components/CodeBlock.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { css, styled } from '@pigment-css/react-new';
+import { css, styled, t } from '@pigment-css/react-new';
 import { applyText } from 'docs/utils/theme';
 
 export const Root = styled.figure({

docs/src/components/Header.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { css, styled } from '@pigment-css/react-new';
+import { css, styled, t } from '@pigment-css/react-new';
 
 import { applyText, spacing } from 'docs/utils/theme';
 

docs/src/components/Link.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { css } from '@pigment-css/react-new';
+import { css, t } from '@pigment-css/react-new';
 
 export const linkStyle = css`
   color: ${t('$color.blue')};

docs/src/components/MobileNav.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { css } from '@pigment-css/react-new';
+import { css, t } from '@pigment-css/react-new';
 import { applyText } from '../utils/theme';
 
 export const backdrop = css`

docs/src/components/QuickNav.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { styled } from '@pigment-css/react-new';
+import { styled, t } from '@pigment-css/react-new';
 import { applyText } from '../utils/theme';
 
 export const Container = styled.div`

docs/src/components/SideNav.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { styled } from '@pigment-css/react-new';
+import { styled, t } from '@pigment-css/react-new';
 import { ScrollArea } from '@base-ui-components/react/scroll-area';
 
 import Link from 'next/link';

docs/src/mdx-components.pigment.ts

@@ -1,5 +1,4 @@
-import { t } from '@pigment-css/theme';
-import { styled } from '@pigment-css/react-new';
+import { styled, t } from '@pigment-css/react-new';
 
 import * as CodeBlockBase from './components/CodeBlock';
 import { Code as CodeBase } from './components/Code.pigment';
@@ -73,16 +72,23 @@ export const Li = styled.li(({ theme }) => ({
   marginBottom: spacing(theme, 0.5),
 }));
 
-export const Ul = styled.ul(({ theme }) => ({
+export const List = styled.ul(({ theme }) => ({
   marginBottom: spacing(theme, 4),
   marginInlineStart: spacing(theme, 4.5),
   listStyleType: 'disc',
-}));
-
-export const Ol = styled.ul(({ theme }) => ({
-  marginBottom: spacing(theme, 4),
-  marginInlineStart: spacing(theme, 7),
-  listStyleType: 'decimal',
+  variants: {
+    variant: {
+      ordered: {
+        listStyleType: 'decimal',
+      },
+      unordered: {
+        listStyleType: 'disc',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'unordered',
+  },
 }));
 
 export const Strong = styled.strong({

docs/src/mdx-components.tsx

@@ -34,8 +34,8 @@ export const mdxComponents: MDXComponents = {
   h6: (props) => <Styled.Heading as="h6" lvl="other" {...props} />,
   p: (props) => <Styled.Paragraph {...props} />,
   li: (props) => <Styled.Li {...props} />,
-  ul: (props) => <Styled.Ul {...props} />,
-  ol: (props) => <Styled.Ol {...props} />,
+  ul: (props) => <Styled.List {...props} />,
+  ol: (props) => <Styled.List as="ol" variant="ordered" {...props} />,
   strong: (props) => <Styled.Strong {...props} />,
   figure: (props) => {
     if ('data-rehype-pretty-code-figure' in props) {

docs/src/nav.ts

@@ -34,8 +34,8 @@ export const nav: NavItem[] = [
     dirname: 'features',
     links: [
       {
-        label: 'Styles',
-        href: '/features/styles',
+        label: 'Styling',
+        href: '/features/styling',
       },
       {
         label: 'Theming',

docs/src/utils/theme.ts

@@ -1,4 +1,4 @@
-import type { Theme } from '@pigment-css/theme';
+import type { Theme } from '@pigment-css/react-new';
 
 export function applyText(theme: Theme, value: keyof Theme['text']) {
   const val = theme.text[value];