repository·master·Indexed 19 days ago
https://github.com/coinbase/cdsA comprehensive collection of design assets, components, and documentation for maintaining visual and functional consistency across Coinbase products. Includes web components via Storybook, an Expo-based mobile demo app, and a Docusaurus documentation site featuring a Color Pairing Tool for mapping colors to CDS spectrum primitive tokens with WCAG accessibility validation.
eslint-plugin-internal is a custom ESLint plugin designed exclusively for use within the Coinbase Design System (CDS) repository. It is not published as an external package. The plugin provides a suite of specialized rules to enforce CDS-specific best practices, prevent common bugs in the web and mobile packages, and manage deprecations. Because the repository root depends on this library for its linting tasks, it does not have a separate build process to avoid blocking the main build pipeline.@coinbase/cds-common package provides shared types and hooks designed to be used across both web and mobile platforms within the Coinbase Design System ecosystem. This ensures consistency in logic and data structures between different runtime environments.Coinbase Design System (CDS) is a cross-platform component library designed for both React (Web) and React Native (Mobile). It is built to ensure a consistent user experience across all Coinbase products by providing highly reusable, accessible, and themeable components.
ThemeProvider to support custom themes and light/dark modes.StyleProps, classnames, and inline styles. Web components use Atomic static CSS compiled at build time for zero runtime overhead.The @coinbase/mobile-visreg package provides visual regression testing for CDS mobile components. It automates the process of running Maestro flows on real iOS and Android devices via BrowserStack App Automate and uploads the resulting screenshots to BrowserStack App Percy for visual comparison across different branches.
Workflow Summary:
browserstack-run.mjs uploads the app binary and Maestro flows to BrowserStack, triggers a build on a real device, and downloads screenshots to maestro-test-output/screenshots/.upload.mjs pushes screenshots to Percy to perform visual diffing against a baseline.@coinbase/cds-mobile-visualization package contains a specific domain set of components identified as mobile visualization components. These components were migrated from cds-web as part of an ongoing effort to decompose the core design system packages (cds-web and cds-mobile) into smaller, more reliable, and specialized packages.All CDS templates come pre-configured with the following:
@coinbase/cds-web, @coinbase/cds-icons, and others.@coinbase/cds-web-visualization package is a specialized domain set of components specifically designed for web visualization. These components were extracted from the core cds-web package as part of an ongoing effort to decompose the core design system packages into smaller, more reliable, and more maintainable modules. Use this package when you need visualization-specific components without importing the entire core web library.The Expo template is a complete starter kit for cross-platform mobile applications built with React Native. It includes:
@coinbase/cds-mobile, @coinbase/cds-icons, and other core libraries.The SparklineGradient component is used to render sparkline charts with a gradient effect.
Note: This component is currently marked as Deprecated.
It is available for both Web and Mobile platforms. For implementation details, refer to the specific Web or Mobile props tables and examples provided in the documentation.
The Switch component is an input control used to toggle between two states (e.g., on/off). It is available for both Web and Mobile platforms within the Coinbase Design System.
To use the Switch, you can import it from the respective platform package. Detailed usage examples, props, and styling options are available in the platform-specific documentation sections (Web or Mobile).