@czi-sds/mcp 0.16.0 → 0.18.0

package/data/resources/{zeroheight-rules.md → documentation-rules.md}

@@ -1,22 +1,27 @@
-# Zeroheight Documentation Adherence Rules
+# SDS Documentation Adherence Rules
 
-These rules guide Claude Code when using Zeroheight documentation to ensure accurate implementation of the CZI Science Design System (SDS).
+These rules guide AI assistants in using the SDS documentation to ensure accurate implementation of the CZI Science Design System (SDS).
 
 ## Documentation as Source of Truth
 
+The documentation served by `get_component_docs` is generated from the component
+documentation that ships with the SDS repository and renders in Storybook. It is
+the same content the design system team maintains, so it describes the library as
+it actually is rather than as it once was.
+
 ### Component Usage Guidelines
 
-- **Always reference Zeroheight documentation** for component usage guidelines
+- **Always call `get_component_docs`** before implementing a component
 - Follow documented usage patterns and restrictions
 - Respect component do's and don'ts specified in documentation
 - Use documented prop combinations and avoid deprecated patterns
 
 ### API Documentation Priority
 
-- **Zeroheight component documentation overrides assumptions**
-- Check documented prop options before implementing
+- **Component documentation overrides assumptions**
+- Check documented prop options with `get_component_props` before implementing
 - Follow documented accessibility requirements
-- Use documented examples as implementation templates
+- Use the code examples in the documentation as implementation templates
 
 ## Component Implementation Rules
 
@@ -25,7 +30,8 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 - **Use only documented prop values** and combinations
 - Follow documented prop hierarchies (e.g., `sdsStyle` + `sdsType` combinations)
 - Respect documented prop requirements (required vs optional)
-- Check Zeroheight for component-specific prop validation rules
+- Note where a component departs from the MUI component it wraps; each page has
+  an "SDS vs MUI" section covering exactly this
 
 ### Usage Patterns
 
@@ -45,7 +51,7 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Terminology
 
-- **Use SDS-approved terminology** from Zeroheight glossary
+- **Use SDS-approved terminology** from the documentation
 - Follow documented naming conventions for UI elements
 - Use consistent language patterns across components
 - Respect documented content guidelines (e.g., button text patterns)
@@ -62,11 +68,13 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Design Specifications
 
-- **Extract exact specifications** from Zeroheight:
+- **Use design tokens rather than literal values.** `get_tailwind_tokens`
+  returns the full set, covering:
   - Spacing measurements and relationships
   - Typography specifications
   - Color usage in different contexts
-  - Component states and variations
+  - Corners, borders, and drop shadows
+- Never hard-code a value that a token already expresses
 
 ### Responsive Behavior
 
@@ -96,15 +104,17 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Implementation Validation
 
-- **Cross-reference implementation with Zeroheight examples**
-- Verify component behavior matches documented examples
+- **Cross-reference implementation with the documented code examples.** Every
+  documented variation of a component ships with the source of a working
+  example; prefer adapting one over writing from scratch
+- Verify component behavior matches those examples
 - Test edge cases mentioned in documentation
 - Validate accessibility implementation against documented requirements
 
 ### Documentation Gaps
 
 - **When documentation is unclear or missing**:
-  - Use SDS Storybook as secondary reference
+  - Use the component's Storybook stories as a secondary reference
   - Follow established SDS patterns from similar components
   - Document any assumptions made for future clarification
   - Prefer conservative/minimal implementations
@@ -113,36 +123,39 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### Documentation Workflow
 
-1. **Always check Zeroheight first** before implementing any SDS component
+1. **Always call `get_component_docs` first** before implementing any SDS component
 2. **Read the full component documentation** including usage guidelines
-3. **Review examples and code snippets** provided in documentation
+3. **Review the code examples** provided in the documentation
 4. **Check for any usage restrictions** or warnings
-5. **Validate implementation** against documented examples
+5. **Validate implementation** against the documented examples
 
 ### Staying Current
 
-- **Documentation updates**: Assume Zeroheight content is most current
-- **Version compatibility**: Check documented version compatibility
-- **Deprecation notices**: Follow documented migration paths for deprecated patterns
-- **New features**: Use documented new features rather than workarounds
+- **Documentation updates**: the docs are generated from the installed version of
+  the library, so they describe the components you are actually building against
+- **Version compatibility**: check documented version compatibility
+- **Deprecation notices**: follow documented migration paths for deprecated patterns
+- **New features**: use documented new features rather than workarounds
 
 ### Implementation Priority Order
 
-1. **Zeroheight documentation** (primary source of truth)
-2. **SDS Storybook** (implementation examples and edge cases)
-3. **TypeScript interfaces** (technical prop definitions)
+1. **Component documentation** via `get_component_docs` (primary source of truth)
+2. **Prop definitions** via `get_component_props` (authoritative types and defaults)
+3. **Design tokens** via `get_tailwind_tokens` (spacing, color, typography)
 4. **Existing codebase patterns** (established usage in project)
 
 ## Common Documentation Patterns
 
 ### Component Pages Structure
 
-- **Overview**: Component purpose and when to use
-- **Usage Guidelines**: Do's and don'ts with examples
-- **Props/API**: Detailed prop documentation
-- **Examples**: Code snippets and live examples
-- **Accessibility**: ARIA patterns and keyboard navigation
-- **Related Components**: Integration recommendations
+Sections appear in this order:
+
+- **Source Code**: a link to the component's implementation
+- **Import**: the import statement for the component and its sub-components
+- **Code examples**: one runnable example per supported variation
+- **SDS vs MUI**: how the SDS component differs from the MUI one it wraps
+- **MUI Documentation**: a link to the underlying component's own docs
+- **Props**: the SDS and MUI props required for implementation
 
 ### Information Hierarchy
 
@@ -155,7 +168,7 @@ These rules guide Claude Code when using Zeroheight documentation to ensure accu
 
 ### When Implementation Doesn't Match Design
 
-1. **Check Zeroheight for variant documentation**
+1. **Check the documentation for variant coverage**
 2. **Look for conditional usage patterns**
 3. **Verify responsive behavior specifications**
 4. **Check for theme-specific implementations**

package/data/resources/figma-rules.md

@@ -95,7 +95,7 @@ import { Button, Icon } from "@czi-sds/components";
 
 ## Design System Integration
 
-- Always check Zeroheight documentation for component usage guidelines
+- Always check the SDS component documentation for component usage guidelines
 - Verify SDS component APIs before implementing
-- Use SDS Storybook for component examples and prop references
+- Use the documented code examples and prop references before writing your own
 - When in doubt, prefer SDS patterns over custom solutions

package/data/tailwind.json

@@ -2734,7 +2734,7 @@
       "sds-color-primitive-blue-700": "#cde3ff",
       "sds-color-primitive-blue-800": "#e2eeff",
       "sds-color-primitive-gray-50": "#000000",
-      "sds-color-primitive-gray-75": "#101010",
+      "sds-color-primitive-gray-75": "#1b1b1b",
       "sds-color-primitive-gray-100": "#333333",
       "sds-color-primitive-gray-200": "#494949",
       "sds-color-primitive-gray-300": "#696969",
@@ -2815,9 +2815,9 @@
       "sds-color-semantic-accent-text-action": "#beb5ff",
       "sds-color-semantic-accent-text-action-hover": "#dcd9ff",
       "sds-color-semantic-accent-text-action-pressed": "#f1f0ff",
-      "sds-color-semantic-base-background-primary": "#101010",
-      "sds-color-semantic-base-background-primary-dark": "#101010",
-      "sds-color-semantic-base-background-primary-inverse": "#101010",
+      "sds-color-semantic-base-background-primary": "#000000",
+      "sds-color-semantic-base-background-primary-dark": "#000000",
+      "sds-color-semantic-base-background-primary-inverse": "#1b1b1b",
       "sds-color-semantic-base-background-secondary": "#33333399",
       "sds-color-semantic-base-background-secondary-dark": "#33333399",
       "sds-color-semantic-base-background-secondary-inverse": "#33333399",
@@ -2833,20 +2833,21 @@
       "sds-color-semantic-base-border-primary-on-dark": "#cdcdcd",
       "sds-color-semantic-base-border-primary-inverse": "#cdcdcd",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
-      "sds-color-semantic-base-border-secondary": "#696969",
+      "sds-color-semantic-base-border-secondary": "#696969b3",
+      "sds-color-semantic-base-border-highlight": "#ffffff1a",
       "sds-color-semantic-base-border-secondary-on-dark": "#696969",
       "sds-color-semantic-base-divider": "#494949",
       "sds-color-semantic-base-divider-on-dark": "#494949",
       "sds-color-semantic-base-divider-inverse": "#494949",
-      "sds-color-semantic-base-fill-disabled": "#333333",
+      "sds-color-semantic-base-fill-disabled": "#1b1b1b",
       "sds-color-semantic-base-fill-primary-interaction": "#69696952",
-      "sds-color-semantic-base-fill-primary-interaction-on-dark": "#69696952",
+      "sds-color-semantic-base-fill-primary-interaction-on-dark": "#6969693d",
       "sds-color-semantic-base-fill-hover-inverse": "#69696952",
       "sds-color-semantic-base-fill-open-inverse": "#69696952",
-      "sds-color-semantic-base-fill-primary-pressed": "#69696966",
+      "sds-color-semantic-base-fill-primary-pressed": "#69696957",
       "sds-color-semantic-base-fill-primary-pressed-on-dark": "#69696966",
       "sds-color-semantic-base-fill-pressed-inverse": "#69696952",
-      "sds-color-semantic-base-fill-primary": "#333333",
+      "sds-color-semantic-base-fill-primary": "#1b1b1b",
       "sds-color-semantic-base-fill-selected": "#ffffff",
       "sds-color-semantic-base-fill-secondary": "#494949",
       "sds-color-semantic-base-fill-secondary-interaction": "#94949442",
@@ -2854,7 +2855,7 @@
       "sds-color-semantic-base-fill-secondary-on-dark": "#494949",
       "sds-color-semantic-base-fill-secondary-interaction-on-dark": "#94949457",
       "sds-color-semantic-base-fill-secondary-pressed-on-dark": "#94949475",
-      "sds-color-semantic-base-fill-disabled-on-dark": "#333333",
+      "sds-color-semantic-base-fill-disabled-on-dark": "#1b1b1b",
       "sds-color-semantic-base-ornament-disabled": "#696969",
       "sds-color-semantic-base-ornament-disabled-on-dark": "#696969",
       "sds-color-semantic-base-ornament-disabled-inverse": "#696969",
@@ -2863,15 +2864,17 @@
       "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
       "sds-color-semantic-base-ornament-primary-inverse": "#000000",
       "sds-color-semantic-base-ornament-secondary": "#cdcdcd",
+      "sds-color-semantic-base-ornament-tertiary": "#696969",
       "sds-color-semantic-base-ornament-secondary-interaction": "#ffffff",
       "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
       "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
       "sds-color-semantic-base-ornament-secondary-on-dark": "#cdcdcd",
       "sds-color-semantic-base-ornament-secondary-inverse": "#cdcdcd",
       "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
-      "sds-color-semantic-base-surface-primary": "#333333",
-      "sds-color-semantic-base-surface-secondary": "#69696952",
-      "sds-color-semantic-base-surface-primary-dark": "#333333",
+      "sds-color-semantic-base-surface-primary": "#1b1b1b",
+      "sds-color-semantic-base-surface-secondary": "#333333a3",
+      "sds-color-semantic-base-surface-tertiary": "#333333",
+      "sds-color-semantic-base-surface-primary-dark": "#1b1b1b",
       "sds-color-semantic-base-surface-inverse": "#333333",
       "sds-color-semantic-base-text-disabled": "#696969",
       "sds-color-semantic-base-text-disabled-on-dark": "#696969",
@@ -3092,7 +3095,8 @@
       "sds-color-semantic-base-border-primary-on-dark": "#c3c3c3",
       "sds-color-semantic-base-border-primary-inverse": "#c3c3c3",
       "sds-color-semantic-base-border-primary-pressed-inverse": "#ffffff",
-      "sds-color-semantic-base-border-secondary": "#c3c3c3",
+      "sds-color-semantic-base-border-secondary": "#c3c3c3b3",
+      "sds-color-semantic-base-border-highlight": "#0000001a",
       "sds-color-semantic-base-border-secondary-on-dark": "#767676",
       "sds-color-semantic-base-divider": "#dfdfdf",
       "sds-color-semantic-base-divider-on-dark": "#3b3b3b",
@@ -3122,6 +3126,7 @@
       "sds-color-semantic-base-ornament-primary-on-dark": "#ffffff",
       "sds-color-semantic-base-ornament-primary-inverse": "#ffffff",
       "sds-color-semantic-base-ornament-secondary": "#767676",
+      "sds-color-semantic-base-ornament-tertiary": "#c3c3c3",
       "sds-color-semantic-base-ornament-secondary-interaction": "#000000",
       "sds-color-semantic-base-ornament-secondary-interaction-on-dark": "#ffffff",
       "sds-color-semantic-base-ornament-secondary-hover-inverse": "#ffffff",
@@ -3130,6 +3135,7 @@
       "sds-color-semantic-base-ornament-secondary-pressed-inverse": "#ffffff",
       "sds-color-semantic-base-surface-primary": "#ffffff",
       "sds-color-semantic-base-surface-secondary": "#c3c3c333",
+      "sds-color-semantic-base-surface-tertiary": "#dfdfdf",
       "sds-color-semantic-base-surface-primary-dark": "#000000",
       "sds-color-semantic-base-surface-inverse": "#000000",
       "sds-color-semantic-base-text-disabled": "#c3c3c3",