@coinbase/cds-mcp-server 8.17.3 → 8.17.4

package/mcp-docs/web/getting-started/playground.txt

@@ -4,12 +4,14 @@ title: Playground
 hide_title: true
 ---
 
+import { VStack } from '@coinbase/cds-web/layout';
 import { MDXSection } from '@site/src/components/page/MDXSection';
 import { MDXArticle } from '@site/src/components/page/MDXArticle';
 import { ContentHeader } from '@site/src/components/page/ContentHeader';
 import { PlaygroundBanner } from '@site/src/components/page/ComponentBanner/PlaygroundBanner';
 import { ShareablePlayground } from '@site/src/components/page/ShareablePlayground';
 
+<VStack gap={5}>
 <ContentHeader
   title="Playground"
   description="Live code playground for testing and sharing CDS components and code examples. All CDS components and hooks and all React exports are available to use in the playground without importing them. You must call render() to render your code."
@@ -23,3 +25,4 @@ import { ShareablePlayground } from '@site/src/components/page/ShareablePlaygrou
 
 </MDXArticle>
 </MDXSection>
+</VStack>

package/mcp-docs/web/getting-started/styling.txt

@@ -0,0 +1,161 @@
+# styling
+
+CDS includes powerful and flexible APIs for styling components. Easily access values from the theme, or go rogue with full customization.
+
+import { media } from '@coinbase/cds-web/styles/media';
+### `StyleProps` API
+
+Most components support the StyleProps API. StyleProps automatically have access to the values in the theme, and some StyleProps are limited to only the theme values.
+
+[See the full list of StyleProps here →](/components/layout/Box/?platform=web&tab=props)
+
+```jsx
+// ✅ The `bgNegative` token will automatically update with the theme!
+<Box background="bgNegative" width={100} />
+
+// ❌ Error: Type '"#0000ff"' is not assignable to type 'Color | undefined'.
+<Box background="#0000ff" width={100} />
+```
+
+:::tip
+The docs page of every component has a props table listing all the available props!
+:::
+
+:::note
+The StyleProps API applies static atomic classnames under the hood. These classnames reference CSS Variables set by the ThemeProvider to enable dynamic theming.
+:::
+
+#### Responsive styles
+
+On web, all StyleProps support an optional responsive syntax for device-specific styles.
+
+```jsx
+<Box
+  width={{ base: 200, tablet: 200, desktop: 400 }}
+  background={{ base: 'bgPrimary', phone: 'bgSecondary' }}
+/>
+```
+
+- **base:** no media query
+- **phone:** <code>{media.phone}</code>
+- **tablet:** <code>{media.tablet}</code>
+- **desktop:** <code>{media.desktop}</code>
+
+It is not possible to customize the breakpoint values unless you compile CDS from the source code.
+
+Import the `media` object to use CDS breakpoints and media queries in your own custom styles.
+
+[See how breakpoints are defined in the `media` object &rarr;](https://github.com/coinbase/cds/blob/master/packages/web/src/styles/media.ts)
+
+```jsx
+import styled from 'styled-components';
+import { media } from '@coinbase/cds-web/styles/media';
+
+const MyCustomThing = styled.div`
+  ${media.phone} {
+    width: 100px;
+  }
+`;
+```
+
+### `style` and `styles` props
+
+Most components support the native `style` prop for inline styles.
+
+```jsx
+<Box style={{ backgroundColor: '#0000ff' }} />
+```
+
+Some complex components support passing inline styles to subcomponents with the `styles` prop.
+
+```jsx
+<ProgressCircle
+  styles={{
+    circle: {
+      stroke: 'transparent',
+    },
+    progress: {
+      strokeLinecap: 'square',
+    },
+  }}
+  color="fgPositive"
+  progress={0.75}
+  size={100}
+/>
+```
+
+Styles are merged together as objects in order of specificity.
+
+```jsx
+<PageHeader style={{ backgroundColor: 'red' }} styles={{ root: { backgroundColor: 'blue' } }} />
+```
+
+In the example above, `backgroundColor` will be blue.
+
+:::tip
+We will continue to add the `styles` prop to more components over time. Please feel free to request specific components that you think would benefit from this API.
+:::
+
+### `className` and `classNames` props
+
+Most components support the native `className` prop for inline styles.
+
+```jsx
+<Box className="my-custom-box" />
+```
+
+Some complex components support passing classnames to subcomponents with the `classNames` prop.
+
+```jsx
+<ProgressCircle
+  classNames={{
+    circle: 'my-custom-circle',
+    progress: 'my-custom-progress',
+  }}
+  color="fgPositive"
+  progress={0.75}
+  size={100}
+/>
+```
+
+:::tip
+We will continue to add the `classNames` prop to more components over time. Please feel free to request specific components that you think would benefit from this API.
+:::
+
+### Component specific props
+
+Many components have their own specific props that can affect styling.
+
+```jsx
+<Button compact variant="primary">
+  Click me
+</Button>
+```
+
+### Combining techniques
+
+Mix and match these styling techniques for complete customization!
+
+```jsx
+<Button variant="primary" borderColor="accentBoldPurple" style={{ fontFamily: 'Times' }}>
+  Click me
+</Button>
+```
+
+### Global CSS reset
+
+CDS web global styles include a CSS reset which override the browser default styles for some elements. This ensures that polymorphic components render correctly, regardless of their HTML element.
+
+[See the global CSS reset here &rarr;](https://github.com/coinbase/cds/blob/master/packages/web/src/styles/global.ts)
+
+### Polymorphic components
+
+Many CDS web components have the polymorphic `as` prop, which allows you to change what component or element is being rendered under the hood.
+
+Using the polymorphic `as` prop will change the component's type to allow the relevant native props.
+
+```jsx
+<Button as="a" href="google.com" />
+<Link as="button" type="submit" />
+```
+

package/mcp-docs/web/getting-started/templates.txt

@@ -0,0 +1,121 @@
+# templates
+
+Get started quickly with pre-built templates for common app architectures. Choose from Next.js, Vite, or Webpack templates, all configured with CDS components and best practices.
+
+import { TemplateCard } from '@site/src/components/page/TemplateCard';
+import { HStack } from '@coinbase/cds-web/layout';
+import ThemedImage from '@theme/ThemedImage';
+
+### Get started
+
+The easiest way to get started with CDS is with a template. All templates include the required CDS packages, dependencies, and pre-configured settings. Each template provides a working example application with common UI patterns to help you start building.
+
+<HStack gap={2} style={{ marginTop: '1.5rem', flexWrap: 'wrap', alignItems: 'stretch' }}>
+  <TemplateCard
+    description="Built for web applications with SSR and full-stack capabilities"
+    href="https://github.com/coinbase/cds/tree/master/templates/next-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/nextjs_light.png',
+          dark: '/img/logos/frameworks/nextjs_dark.png',
+        }}
+        alt="Next.js"
+        style={{ paddingTop: 'var(--space-1_5)', paddingBottom: 'var(--space-1_5)' }}
+        height="100%"
+      />
+    }
+  />
+  <TemplateCard
+    name="Vite"
+    description="Built for fast, modern single page applications"
+    href="https://github.com/coinbase/cds/tree/master/templates/vite-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/vite.png',
+          dark: '/img/logos/frameworks/vite.png',
+        }}
+        alt=""
+        style={{ paddingTop: 'var(--space-0_5)', paddingBottom: 'var(--space-0_5)' }}
+        height="100%"
+      />
+    }
+  />
+  <TemplateCard
+    description="Built for customizable build setups"
+    href="https://github.com/coinbase/cds/tree/master/templates/webpack-app"
+    icon={
+      <ThemedImage
+        sources={{
+          light: '/img/logos/frameworks/webpack_light.png',
+          dark: '/img/logos/frameworks/webpack_dark.png',
+        }}
+        alt="Webpack"
+        height="100%"
+      />
+    }
+  />
+</HStack>
+
+### Installation
+
+To create a new project from a template, use `gitpick` to bootstrap your application:
+
+#### Next.js
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/next-app cds-next
+cd cds-next
+```
+
+#### Vite
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/vite-app cds-vite
+cd cds-vite
+```
+
+#### Webpack
+
+```bash
+npx -y gitpick coinbase/cds/tree/master/templates/webpack-app cds-webpack
+cd cds-webpack
+```
+
+### Setup
+
+After creating your project, install dependencies and start developing:
+
+```bash
+## We suggest using nvm to manage Node.js versions
+nvm install
+nvm use
+
+## Enable corepack for package manager setup
+corepack enable
+
+## Install dependencies
+yarn
+
+## Start development server
+yarn dev
+```
+
+### What's included
+
+All templates come pre-configured with:
+
+- Latest CDS packages (`@coinbase/cds-web`, `@coinbase/cds-icons`, etc.)
+- TypeScript configuration
+- Example components demonstrating common UI patterns
+- Theme setup with CDS default theme
+- Responsive layouts using CDS layout components
+
+### Next steps
+
+After setting up your template, learn how to customize and extend CDS:
+
+- [Theming](/getting-started/theming) - Customize colors, spacing, and typography
+- [Installation](/getting-started/installation) - Manual installation and setup options
+