mirror of
https://github.com/openclaw/clawhub.git
synced 2026-08-14 00:47:57 +00:00
chore(deps): migrate to Carapace v0.2.0
This commit is contained in:
Patrick Erichsen
@@ -0,0 +1,44 @@
|
||||
---
|
||||
name: openclaw-carapace
|
||||
description: Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.
|
||||
---
|
||||
|
||||
# Carapace
|
||||
|
||||
Use the shared package for foundations and framework-neutral visual primitives.
|
||||
Keep consumer-specific behavior, data, routes, and layout composition local.
|
||||
|
||||
## Workflow
|
||||
|
||||
1. Read [tokens.md](references/tokens.md) before choosing colors, spacing, type, radii, or shadows.
|
||||
2. Read [consumer-adapters.md](references/consumer-adapters.md) for the current framework.
|
||||
3. Read [application-surfaces.md](references/application-surfaces.md) when working on shells, panes, settings, or operational screens.
|
||||
4. Inspect the consumer's existing shared primitives before creating a component.
|
||||
5. Use semantic tokens for UI intent; use palette primitives only for documented exceptions.
|
||||
6. Keep application behavior, routes, and information architecture unchanged unless the task says otherwise.
|
||||
7. Validate the affected routes with existing tests and real browser screenshots.
|
||||
|
||||
## Interface Rules
|
||||
|
||||
- Import the complete CSS contract or its focused exported entry points.
|
||||
- Compose shared classes from `components.css` before adding a one-off visual implementation.
|
||||
- Use local shared primitives before raw controls or one-off component implementations.
|
||||
- Keep one primary action per decision area.
|
||||
- Use familiar icons for icon-only commands and provide accessible names.
|
||||
- Use status colors for status, warning, success, error, and informational meaning.
|
||||
- Keep cards, controls, and repeated fixed-format elements dimensionally stable.
|
||||
- Avoid nested decorative cards and page sections styled as floating cards.
|
||||
- Keep surfaces, controls, and insets square through their semantic radius tokens.
|
||||
- Reserve round geometry for avatars, status dots, and other truly circular indicators.
|
||||
- Keep focus, hover, active, disabled, loading, and invalid states coherent.
|
||||
- Keep text within its container at supported viewport sizes.
|
||||
- Prefer dense, scan-friendly composition for operational product surfaces.
|
||||
- Share application anatomy across consumers without forcing web and native
|
||||
implementations into pixel-identical layouts.
|
||||
|
||||
## Ownership
|
||||
|
||||
Move visual implementation into this repository when its interface is
|
||||
framework-neutral and useful across consumers. Keep runtime behavior and
|
||||
framework adapters local until at least two consumers need the same interface
|
||||
and behavior.
|
||||
@@ -0,0 +1,152 @@
|
||||
# Application Surfaces
|
||||
|
||||
Carapace provides framework-neutral anatomy for compact application shells,
|
||||
panes, settings, model controls, and focused utility windows. Consumers keep
|
||||
routing, data, persistence, window management, and interaction behavior.
|
||||
|
||||
## Shared Contract
|
||||
|
||||
Import the candidate application layer after the stable component and candidate
|
||||
control entry points:
|
||||
|
||||
```css
|
||||
@import "@openclaw/carapace/components.css";
|
||||
@import "@openclaw/carapace/themes/product.css";
|
||||
@import "@openclaw/carapace/candidate/controls.css";
|
||||
@import "@openclaw/carapace/candidate/feedback.css";
|
||||
@import "@openclaw/carapace/candidate/application.css";
|
||||
```
|
||||
|
||||
Compose the contract from these roles:
|
||||
|
||||
- `.oc-app-frame` separates primary navigation from collection and operations
|
||||
screens that genuinely need global navigation.
|
||||
- `.oc-app-content` contains the route-owned surface below global chrome.
|
||||
- `.oc-page-header` names the current route and holds route-level actions when
|
||||
the route needs an introduction.
|
||||
- `.oc-pane` provides bounded header, body, and footer regions.
|
||||
- `.oc-master-detail`, `.oc-master-pane`, `.oc-detail-pane`,
|
||||
`.oc-app-resource-list`, and `.oc-activity-list` support repeated operational
|
||||
inspection without turning every datum into a card.
|
||||
- `.oc-settings-shell`, `.oc-settings-navigation`, `.oc-settings-detail`, and
|
||||
`.oc-detail-header` create a settings takeover with local navigation and a
|
||||
focused detail canvas.
|
||||
- `.oc-settings-section`, `.oc-settings-group`, and `.oc-settings-row` create
|
||||
dense, scan-friendly preference screens.
|
||||
- `.oc-chat-shell`, `.oc-workspace-grid`, `.oc-workspace-sessions`,
|
||||
`.oc-workspace-conversation`, and `.oc-workspace-inspector` create a
|
||||
session-oriented working surface without duplicating the global app shell.
|
||||
- `.oc-model-controls`, `.oc-model-picker`, `.oc-model-menu`, and
|
||||
`.oc-model-speed-toggle` keep model, provider, reasoning, and speed controls
|
||||
beside the composer.
|
||||
- `.oc-session-toolbar`, `.oc-session-table`, and `.oc-session-cell` support
|
||||
dense session management.
|
||||
- `.oc-quick-chat` composes captured context, response state, and the shared
|
||||
model controls into a focused utility surface.
|
||||
- `.oc-status` presents compact operational state with text and a semantic
|
||||
indicator.
|
||||
- `.oc-summary-strip` and `.oc-summary-metric` lead a collection with stable
|
||||
key metrics; `.oc-session-badges`, `.oc-owner-chip`, `.oc-unread-dot`, and
|
||||
`.oc-run-spinner` carry row-scale signals.
|
||||
- `.oc-split`, `.oc-split-pane`, `.oc-panel-tab-strip`, and
|
||||
`.oc-split-divider` compose docked two-pane work surfaces; resize behavior
|
||||
stays consumer-owned.
|
||||
- `.oc-log-stream` renders dense diagnostic rows with level, time,
|
||||
subsystem, and message columns.
|
||||
- `.oc-menu-panel` structures the tray or menu-bar dropdown: identity,
|
||||
usage meters, session shortcuts, and footer actions.
|
||||
- `.oc-option-card` renders setup choices as real radio labels;
|
||||
`.oc-connect` is the shared pairing and sign-in surface.
|
||||
- `.oc-command-palette` provides the shared command dialog anatomy.
|
||||
- `.oc-hovercard` and `.oc-lightbox` cover anchored reference context and
|
||||
single-attachment inspection.
|
||||
- `.oc-table-toolbar`, `.oc-table-bulk-bar`, `.oc-table-sort`, and
|
||||
`.oc-table-footer` (candidate data layer) extend collection tables with
|
||||
search, selection, sorting, and pagination chrome.
|
||||
|
||||
The agent entry point (`candidate/agent.css`) owns approval prompts
|
||||
(`.oc-approval-card`, `.oc-approval-queue`) and transcript anatomy:
|
||||
`.oc-tool-kv`, `.oc-json-collapse`, `.oc-work-group`, `.oc-turn-recap`,
|
||||
`.oc-compaction`, and `.oc-activity-indicator`. Approval policy, transport,
|
||||
and expansion behavior stay consumer-owned.
|
||||
|
||||
Use existing controls such as `.oc-switch`, `.oc-input`, `.oc-select`,
|
||||
`.oc-segmented`, `.oc-action`, and `.oc-badge` inside these compositions. Do not
|
||||
create application-specific replacements for controls already in Carapace.
|
||||
|
||||
## Composition Rules
|
||||
|
||||
- Use global navigation only for route collections. Settings and chat are
|
||||
takeover surfaces and should not carry a second redundant shell.
|
||||
- Local rails answer what is selected inside a route. Do not merge global and
|
||||
local navigation into one undifferentiated sidebar.
|
||||
- Put route-specific filters and actions beside the route title or collection
|
||||
they affect. Do not add a persistent toolbar without a repeated global job.
|
||||
- Prefer immediate list and detail anatomy over summary KPI slabs. Put health,
|
||||
history, and explanations in the selected detail surface.
|
||||
- Give master lists identity, status, and one useful comparison value. Keep
|
||||
editing controls in the selected detail pane.
|
||||
- Let the primary task own most of a workspace. Session history and inspectors
|
||||
should stay narrower, hide on constrained widths, and never squeeze the
|
||||
primary content below a usable measure.
|
||||
- Set `data-inspector="true|false"` on `.oc-chat-shell` for workspace layouts.
|
||||
Add `data-dock="right|bottom|hidden"` when inspector placement changes;
|
||||
bottom layout is reserved only while an inspector is present.
|
||||
- Keep model selection, reasoning, speed, attachment, and send controls in one
|
||||
compact composer toolbar. Provider grouping and recent models belong inside
|
||||
the picker rather than in a separate settings flow.
|
||||
- Use bounded groups for related settings, not a card around every row or
|
||||
section. Keep settings navigation visually quieter than the selected detail.
|
||||
- Keep common navigation and collection rows near 32px and settings rows near
|
||||
48px. Increase height only when content or platform accessibility requires
|
||||
it.
|
||||
- Limit motion to disclosure, utility-window entry, progress, and streaming
|
||||
state. Keep transitions between 140ms and 220ms and disable them under
|
||||
`prefers-reduced-motion`.
|
||||
- Use coral for primary action and selection, sea for connected identity and
|
||||
secondary context, and status roles for outcomes. Do not recolor neutral
|
||||
structure for decoration.
|
||||
|
||||
## Consumer Boundary
|
||||
|
||||
The macOS app should map this anatomy onto native SwiftUI and AppKit structures.
|
||||
It keeps native materials, title bars, window sizing, sheets, toolbar behavior,
|
||||
keyboard commands, and platform accessibility semantics.
|
||||
|
||||
The Control UI should compose the CSS classes inside its existing Lit views. It
|
||||
keeps route state, WebSocket lifecycle, data loading, local persistence,
|
||||
responsive navigation behavior, and docked-panel interaction.
|
||||
|
||||
Both consumers may adapt density and placement to their platform. They should
|
||||
preserve the same hierarchy, control roles, semantic status, and responsive
|
||||
intent rather than reproduce identical pixels.
|
||||
|
||||
## Promotion Evidence
|
||||
|
||||
The candidate contract is based on repeated structures in two consumers:
|
||||
|
||||
- macOS settings, Quick Chat, model selection, and dashboard panes
|
||||
- Control UI settings, sessions, sidebar navigation, chat model controls, route
|
||||
headers, and docked panels
|
||||
|
||||
Keep the entry point opt-in until both consumers have adopted and validated the
|
||||
same anatomy. Promote only after browser and native-app evidence shows that the
|
||||
selectors remain useful without consumer-specific exceptions.
|
||||
|
||||
## Validation
|
||||
|
||||
- Verify desktop, tablet, and narrow layouts.
|
||||
- Verify light and dark themes.
|
||||
- Verify expanded and compact global navigation on routes that use it.
|
||||
- Verify settings navigation, master-detail, inspector-right,
|
||||
inspector-bottom, and inspector-hidden layouts.
|
||||
- Verify model picker open and closed states, every supported model, reasoning
|
||||
levels, fast mode, and locked state.
|
||||
- Verify Sessions ready, loading, empty, running, idle, and failed states.
|
||||
- Verify Quick Chat idle and active states with captured context.
|
||||
- Check keyboard focus and accessible names for every interactive control.
|
||||
- Check reduced-motion behavior for picker, progress, streaming, and utility
|
||||
window entry.
|
||||
- Keep status understandable without color alone.
|
||||
- Confirm that long labels and descriptions wrap without resizing fixed UI.
|
||||
- Confirm that native platform behavior remains native after visual alignment.
|
||||
@@ -0,0 +1,75 @@
|
||||
# Consumer Adapters
|
||||
|
||||
## Plain CSS And Astro
|
||||
|
||||
Use the complete contract when the global reset is desired:
|
||||
|
||||
```css
|
||||
@import "@openclaw/carapace";
|
||||
```
|
||||
|
||||
For a controlled migration, import `tokens.css`, `themes.css`, and
|
||||
`typography.css`, then `components.css`. Retain consumer-specific layout CSS.
|
||||
Theme switching remains application-owned. The canonical public-site selector is
|
||||
`html[data-theme="light"|"dark"]`.
|
||||
|
||||
Product applications may additionally import the opt-in candidate layers:
|
||||
|
||||
```css
|
||||
@import "@openclaw/carapace/themes/product.css";
|
||||
@import "@openclaw/carapace/candidate/controls.css";
|
||||
@import "@openclaw/carapace/candidate/feedback.css";
|
||||
@import "@openclaw/carapace/candidate/application.css";
|
||||
```
|
||||
|
||||
Use the application layer for shell, pane, and settings anatomy. Keep routes,
|
||||
data, persistence, and framework behavior local.
|
||||
|
||||
## Tailwind 4
|
||||
|
||||
Import in this order:
|
||||
|
||||
```css
|
||||
@import "@openclaw/carapace/tokens.css";
|
||||
@import "@openclaw/carapace/themes.css";
|
||||
@import "@openclaw/carapace/typography.css";
|
||||
@import "@openclaw/carapace/components.css";
|
||||
@import "@openclaw/carapace/themes/product.css";
|
||||
@import "@openclaw/carapace/compat/clawhub.css";
|
||||
@import "@openclaw/carapace/tailwind.css";
|
||||
```
|
||||
|
||||
The Tailwind adapter exposes theme utilities. `components.css` provides
|
||||
framework-neutral classes; keep Radix, React, route, and product behavior in the
|
||||
consumer.
|
||||
|
||||
## Native macOS
|
||||
|
||||
Map the shared application anatomy to SwiftUI and AppKit instead of importing
|
||||
the CSS. Preserve native title bars, materials, window sizing, sheets, keyboard
|
||||
commands, focus behavior, and accessibility semantics. Align hierarchy,
|
||||
spacing roles, control intent, and status meaning rather than web-specific
|
||||
markup.
|
||||
|
||||
The ClawHub compatibility adapter understands:
|
||||
|
||||
- `data-theme-family="claw"`
|
||||
- `data-theme-resolved="light"|"dark"`
|
||||
- `data-theme-mode="system"`
|
||||
- the existing unprefixed token aliases
|
||||
|
||||
Remove aliases only after source search and browser validation prove that no
|
||||
consumer uses them.
|
||||
|
||||
## Static Documentation Builders
|
||||
|
||||
Copy or resolve the focused CSS exports as build inputs. Import tokens, themes,
|
||||
and typography before the docs shell CSS. Do not import `base.css` until the
|
||||
generated navigation, prose, search, code, and Mermaid views have been compared
|
||||
in a real browser.
|
||||
|
||||
## Versioning
|
||||
|
||||
Install an immutable Git tag. Runtime CSS and skill guidance use the same tag.
|
||||
Dependabot or a scheduled update workflow may propose a newer tag, but migration
|
||||
and visual validation remain consumer responsibilities.
|
||||
@@ -0,0 +1,54 @@
|
||||
# Token Contract
|
||||
|
||||
Import `@openclaw/carapace` for the complete foundation or use focused
|
||||
exports when the consumer must control reset and adapter order.
|
||||
|
||||
## Layers
|
||||
|
||||
| Layer | Prefix | Purpose |
|
||||
| --- | --- | --- |
|
||||
| Palette | `--oc-palette-*` | Fixed source colors; rare direct use |
|
||||
| Semantic | `--oc-bg-*`, `--oc-text-*`, `--oc-accent-*` | Theme-aware UI intent |
|
||||
| Scale | `--oc-space-*`, `--oc-font-size-*`, `--oc-radius-*` | Shared dimensions |
|
||||
| Motion | `--oc-duration-*`, `--oc-ease-*` | Shared interaction timing |
|
||||
| Product | `--oc-status-*`, `--oc-input-*`, `--oc-diff-*` | Opt-in operational UI |
|
||||
| Consumer alias | Unprefixed legacy names | Migration compatibility only |
|
||||
|
||||
## Semantic Choices
|
||||
|
||||
- Page background: `--oc-bg-page`
|
||||
- Ordinary surface: `--oc-bg-surface`
|
||||
- Elevated surface: `--oc-bg-elevated`
|
||||
- Inset and inverted surfaces: `--oc-bg-recessed`, `--oc-bg-contrast`
|
||||
- Primary, secondary, muted, inactive, inverse, and link text:
|
||||
`--oc-text-primary`, `--oc-text-secondary`, `--oc-text-muted`,
|
||||
`--oc-text-inactive`, `--oc-text-inverse`, `--oc-text-link`
|
||||
- Primary action: `--oc-accent-primary`; hover:
|
||||
`--oc-accent-primary-hover`
|
||||
- Secondary accent: `--oc-accent-secondary`
|
||||
- Neutral control backgrounds: `--oc-control-bg`, `--oc-control-bg-hover`
|
||||
- Subtle, strong, and accent borders: `--oc-border-subtle`,
|
||||
`--oc-border-strong`, `--oc-border-accent`
|
||||
- Focus: `--oc-focus-ring`
|
||||
|
||||
Use `color-mix()` from semantic variables for a local translucent state. Add a
|
||||
new shared semantic token only when the same intent recurs across consumers.
|
||||
|
||||
## Radius
|
||||
|
||||
Use semantic geometry roles in product UI:
|
||||
|
||||
- `--oc-radius-surface`: cards, panels, and framed sections
|
||||
- `--oc-radius-control`: buttons, fields, chips, and segmented controls
|
||||
- `--oc-radius-inset`: nested interactive or decorative surfaces
|
||||
- `--oc-radius-round`: avatars, status dots, and genuinely circular indicators
|
||||
|
||||
The first three roles are square in the canonical OpenClaw system. Raw
|
||||
`--oc-radius-*` scale values remain available for documented exceptions, but
|
||||
must not replace the semantic defaults.
|
||||
|
||||
## Ownership
|
||||
|
||||
Consumer repositories own page composition and application states. This package
|
||||
owns stable visual foundations, framework-neutral component primitives, and
|
||||
thin migration aliases.
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: openclaw-design-audit
|
||||
description: Audit OpenClaw frontend code and rendered interfaces for design-system drift, token misuse, primitive reimplementation, accessibility problems, responsive defects, and off-brand copy. Use for design reviews, compliance checks, or scheduled audit-and-fix workflows.
|
||||
description: Audit OpenClaw frontend code and rendered interfaces for Carapace drift, token misuse, primitive reimplementation, accessibility problems, responsive defects, and off-brand copy. Use for design reviews, compliance checks, or scheduled audit-and-fix workflows.
|
||||
---
|
||||
|
||||
# OpenClaw Design Audit
|
||||
@@ -11,10 +11,10 @@ unless a documented rule makes them violations.
|
||||
## Workflow
|
||||
|
||||
1. Read [rubric.md](references/rubric.md) and run every applicable category.
|
||||
2. Read the consumer's installed design-system version and current commit SHA.
|
||||
3. Read the version-matched
|
||||
[token contract](../openclaw-design-system/references/tokens.md) and
|
||||
[consumer adapters](../openclaw-design-system/references/consumer-adapters.md).
|
||||
2. Read the consumer's installed Carapace version and current commit SHA.
|
||||
3. Read the version-matched token contract and consumer adapters from the
|
||||
installed product guidance skill: `openclaw-carapace` for new installs or
|
||||
the `openclaw-design-system` compatibility alias for an upgraded lock.
|
||||
4. Read the brand or marketing references when those categories apply.
|
||||
5. Run deterministic source checks before judgment-based review.
|
||||
6. Inspect representative rendered routes at desktop and mobile sizes.
|
||||
@@ -31,7 +31,7 @@ Each finding must include:
|
||||
- category and severity
|
||||
- stable rule ID
|
||||
- concise remediation
|
||||
- design-system reference
|
||||
- Carapace reference
|
||||
- whether the finding is mechanical or judgment-based
|
||||
|
||||
## Curation
|
||||
|
||||
@@ -10,7 +10,7 @@ deterministic, and covered by an existing rule.
|
||||
- use an established local primitive instead of a duplicate raw control
|
||||
- add a missing accessible label when intent is unambiguous
|
||||
- repair clipping or overflow without changing information architecture
|
||||
- update the pinned design-system tag in a dedicated dependency change
|
||||
- update the pinned Carapace tag in a dedicated dependency change
|
||||
|
||||
## Requires Human Review
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@ The scheduled ClawHub audit opens a pull request directly against
|
||||
`openclaw/clawhub`. It does not create or update a tracker issue.
|
||||
|
||||
The schedule and credentials live in the consumer repository's GitHub Actions
|
||||
workflow. This design-system skill defines the audit and delivery contract; it
|
||||
workflow. This Carapace skill defines the audit and delivery contract; it
|
||||
does not schedule itself.
|
||||
|
||||
## Branch And Scope
|
||||
@@ -18,7 +18,7 @@ does not schedule itself.
|
||||
|
||||
1. Checkout `openclaw/clawhub` with full history and fetch remote `main`.
|
||||
2. Reset only the dedicated automation branch to `origin/main`.
|
||||
3. Install the design system at the workflow's pinned Git tag.
|
||||
3. Install Carapace at the workflow's pinned Git tag.
|
||||
4. Run source checks, browser checks, and report generation.
|
||||
5. Apply only fixes allowed by `fix-policy.md`.
|
||||
6. Write reports under the consumer's established audit-artifact path.
|
||||
@@ -32,7 +32,7 @@ does not schedule itself.
|
||||
|
||||
The title must identify the audit and date. The body includes:
|
||||
|
||||
- design-system version
|
||||
- Carapace version
|
||||
- audited ClawHub SHA
|
||||
- count by severity
|
||||
- commands and routes checked
|
||||
|
||||
@@ -6,7 +6,9 @@ Produce both `design-audit.json` and `design-audit.md`.
|
||||
|
||||
```json
|
||||
{
|
||||
"designSystemVersion": "v0.0.1",
|
||||
"schemaVersion": 2,
|
||||
"carapaceVersion": "v0.1.0",
|
||||
"designSystemVersion": "v0.1.0",
|
||||
"consumerSha": "<sha>",
|
||||
"summary": {
|
||||
"errors": 0,
|
||||
@@ -22,12 +24,16 @@ Produce both `design-audit.json` and `design-audit.md`.
|
||||
"line": 12,
|
||||
"message": "Use the semantic accent token.",
|
||||
"remediation": "Replace the raw coral value with var(--oc-accent-primary).",
|
||||
"reference": "openclaw-design-system/references/tokens.md"
|
||||
"reference": "openclaw-carapace/references/tokens.md"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
During the `v0.1.x` migration, emit both version fields with the same value.
|
||||
`designSystemVersion` is retained for existing parsers; new consumers should
|
||||
read `carapaceVersion`.
|
||||
|
||||
Sort findings by severity, rule ID, file, then line. Keep stable IDs so recurring
|
||||
automation can compare runs.
|
||||
|
||||
@@ -35,7 +41,7 @@ automation can compare runs.
|
||||
|
||||
Include:
|
||||
|
||||
1. audited design-system version and consumer SHA
|
||||
1. audited Carapace version and consumer SHA
|
||||
2. validation commands and rendered routes
|
||||
3. count by severity
|
||||
4. every error
|
||||
|
||||
@@ -1,12 +1,19 @@
|
||||
---
|
||||
name: openclaw-design-system
|
||||
description: Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.
|
||||
description: Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.
|
||||
---
|
||||
|
||||
# OpenClaw Design System
|
||||
# Carapace Compatibility Alias
|
||||
|
||||
This skill identifier remains available for existing `skills-lock.json`
|
||||
entries during the `v0.1.x` migration. New installations should use
|
||||
`openclaw-carapace`.
|
||||
|
||||
Use the shared package for foundations and framework-neutral visual primitives.
|
||||
Keep consumer-specific behavior, data, routes, and layout composition local.
|
||||
Before changing imports, inspect the consumer manifest: use
|
||||
`@openclaw/carapace` when it is installed, otherwise preserve the legacy
|
||||
`@openclaw/design-system` specifier until the dependency is migrated.
|
||||
|
||||
## Workflow
|
||||
|
||||
|
||||
@@ -1,5 +1,10 @@
|
||||
# Consumer Adapters
|
||||
|
||||
This compatibility reference uses the legacy `@openclaw/design-system`
|
||||
specifier so consumers pinned to `v0.0.1` keep building. If the consumer
|
||||
manifest already installs `@openclaw/carapace`, use that package name for the
|
||||
same exported paths.
|
||||
|
||||
## Plain CSS And Astro
|
||||
|
||||
Use the complete contract when the global reset is desired:
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
# Token Contract
|
||||
|
||||
Import `@openclaw/design-system` for the complete foundation or use focused
|
||||
exports when the consumer must control reset and adapter order.
|
||||
exports when the consumer must control reset and adapter order. This legacy
|
||||
specifier is intentional for consumers that have not migrated their dependency
|
||||
to `@openclaw/carapace`.
|
||||
|
||||
## Layers
|
||||
|
||||
@@ -19,13 +21,16 @@ exports when the consumer must control reset and adapter order.
|
||||
- Page background: `--oc-bg-page`
|
||||
- Ordinary surface: `--oc-bg-surface`
|
||||
- Elevated surface: `--oc-bg-elevated`
|
||||
- Primary, secondary, muted text: `--oc-text-primary`,
|
||||
`--oc-text-secondary`, `--oc-text-muted`
|
||||
- Inset and inverted surfaces: `--oc-bg-recessed`, `--oc-bg-contrast`
|
||||
- Primary, secondary, muted, inactive, inverse, and link text:
|
||||
`--oc-text-primary`, `--oc-text-secondary`, `--oc-text-muted`,
|
||||
`--oc-text-inactive`, `--oc-text-inverse`, `--oc-text-link`
|
||||
- Primary action: `--oc-accent-primary`; hover:
|
||||
`--oc-accent-primary-hover`
|
||||
- Secondary accent: `--oc-accent-secondary`
|
||||
- Subtle and accent borders: `--oc-border-subtle`,
|
||||
`--oc-border-accent`
|
||||
- Neutral control backgrounds: `--oc-control-bg`, `--oc-control-bg-hover`
|
||||
- Subtle, strong, and accent borders: `--oc-border-subtle`,
|
||||
`--oc-border-strong`, `--oc-border-accent`
|
||||
- Focus: `--oc-focus-ring`
|
||||
|
||||
Use `color-mix()` from semantic variables for a local translucent state. Add a
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: openclaw-design
|
||||
description: Route OpenClaw design work to the canonical brand, product design-system, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or design-system compliance.
|
||||
description: Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or Carapace compliance.
|
||||
---
|
||||
|
||||
# OpenClaw Design
|
||||
@@ -11,13 +11,16 @@ only when the task genuinely crosses them.
|
||||
| Skill | Use for |
|
||||
| --- | --- |
|
||||
| `openclaw-brand` | Identity decisions, typography, logos, imagery, voice, and non-product brand artifacts |
|
||||
| `openclaw-design-system` | Application UI, semantic tokens, themes, component reuse, and framework adapters |
|
||||
| `openclaw-carapace` | Application UI, semantic tokens, themes, component reuse, and framework adapters |
|
||||
| `openclaw-design-system` | Compatibility alias for projects upgrading an existing skill lock |
|
||||
| `openclaw-marketing-pages` | Public-page composition, landing/content pages, navigation, SEO, and responsive layout |
|
||||
| `openclaw-design-audit` | Design drift, token misuse, component substitution, accessibility, and recurring audits |
|
||||
|
||||
For a public website change, start with `openclaw-marketing-pages` and add
|
||||
`openclaw-brand` only when the task changes identity, logo, imagery, typography,
|
||||
or voice. For a product application, start with `openclaw-design-system`.
|
||||
or voice. For a product application, start with `openclaw-carapace` when it is
|
||||
installed. Projects upgrading an existing lock may use
|
||||
`openclaw-design-system` as the `v0.1.x` compatibility alias.
|
||||
|
||||
## Shared Contract
|
||||
|
||||
|
||||
@@ -50,15 +50,15 @@ jobs:
|
||||
GH_TOKEN: ${{ github.token }}
|
||||
run: |
|
||||
set -euo pipefail
|
||||
release="v$(node -p "require('./node_modules/@openclaw/design-system/package.json').version")"
|
||||
release="v$(node -p "require('./node_modules/@openclaw/carapace/package.json').version")"
|
||||
[[ "$release" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]
|
||||
gh api "repos/openclaw/design-system/releases/tags/${release}" >/dev/null
|
||||
gh api "repos/openclaw/carapace/releases/tags/${release}" >/dev/null
|
||||
echo "tag=$release" >> "$GITHUB_OUTPUT"
|
||||
mkdir -p "$ARTIFACT_DIRECTORY"
|
||||
git clone \
|
||||
--branch "$release" \
|
||||
--depth 1 \
|
||||
https://github.com/openclaw/design-system.git \
|
||||
https://github.com/openclaw/carapace.git \
|
||||
"$ARTIFACT_DIRECTORY/design-system"
|
||||
|
||||
- name: Record audit commits
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
"@fontsource/manrope": "5.3.0",
|
||||
"@fontsource/noto-sans-sc": "5.3.0",
|
||||
"@monaco-editor/react": "4.7.0",
|
||||
"@openclaw/design-system": "git+https://github.com/openclaw/design-system.git#7b097d79eef6e9a0a4632f72727ac7450f07a1f2",
|
||||
"@openclaw/carapace": "git+https://github.com/openclaw/carapace.git#v0.2.0",
|
||||
"@openclaw/plugin-inspector": "0.3.17",
|
||||
"@radix-ui/react-avatar": "1.2.3",
|
||||
"@radix-ui/react-dialog": "1.1.20",
|
||||
@@ -442,9 +442,9 @@
|
||||
|
||||
"@oozcitak/util": ["@oozcitak/util@10.0.0", "", {}, "sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA=="],
|
||||
|
||||
"@openclaw/clawhub-admin": ["@openclaw/clawhub-admin@workspace:packages/clawhub-admin"],
|
||||
"@openclaw/carapace": ["@openclaw/carapace@github:openclaw/carapace#a0b3c80", {}, "openclaw-carapace-a0b3c80", "sha512-d8EpkOKFJYfM+Ypw8RWV0tr1fUA44iYVkVx4v/D7C/q96CqE26k2FytvoiWYOmZEGwsrSP3Bz3adqeLzeae2eQ=="],
|
||||
|
||||
"@openclaw/design-system": ["@openclaw/design-system@github:openclaw/design-system#7b097d7", {}, "openclaw-carapace-7b097d7"],
|
||||
"@openclaw/clawhub-admin": ["@openclaw/clawhub-admin@workspace:packages/clawhub-admin"],
|
||||
|
||||
"@openclaw/plugin-inspector": ["@openclaw/plugin-inspector@0.3.17", "", { "bin": { "plugin-inspector": "src/cli.js" } }, "sha512-JPPHPhiXMsIvrV8UR8RQjhflMjRZX/uIhy9meE81dup7MMSnRJcsTGOXYACohv6e4z2P95z2QuE7nZkWT6Ysuw=="],
|
||||
|
||||
|
||||
+2
-2
@@ -74,7 +74,7 @@
|
||||
"skills-sh:prove-500": "bun scripts/skills-sh-catalog/prove-500.ts",
|
||||
"skills-sh:prove-canary": "CLAWHUB_TEST_CATALOG_MODE=controlled-canary bun scripts/skills-sh-catalog/run-test-gate.ts",
|
||||
"skills-sh:prove-mirror": "bun scripts/skills-sh-catalog/prove-mirror-test.ts",
|
||||
"skills:install": "npx --yes skills@1.5.16 add openclaw/design-system --skill openclaw-design openclaw-brand openclaw-design-system openclaw-marketing-pages openclaw-design-audit --agent codex --copy --yes",
|
||||
"skills:install": "npx --yes skills@1.5.16 add openclaw/carapace --skill openclaw-design openclaw-brand openclaw-carapace openclaw-design-system openclaw-marketing-pages openclaw-design-audit --agent codex --copy --yes",
|
||||
"test": "vitest run",
|
||||
"test:e2e": "vitest run -c vitest.e2e.config.ts",
|
||||
"test:e2e:local": "bash scripts/run-playwright-local.sh",
|
||||
@@ -97,7 +97,7 @@
|
||||
"@fontsource/manrope": "5.3.0",
|
||||
"@fontsource/noto-sans-sc": "5.3.0",
|
||||
"@monaco-editor/react": "4.7.0",
|
||||
"@openclaw/design-system": "git+https://github.com/openclaw/design-system.git#7b097d79eef6e9a0a4632f72727ac7450f07a1f2",
|
||||
"@openclaw/carapace": "git+https://github.com/openclaw/carapace.git#v0.2.0",
|
||||
"@openclaw/plugin-inspector": "0.3.17",
|
||||
"@radix-ui/react-avatar": "1.2.3",
|
||||
"@radix-ui/react-dialog": "1.1.20",
|
||||
|
||||
@@ -87,11 +87,9 @@ describe("weekly design-system audit workflow", () => {
|
||||
|
||||
it("pins the design release and audit inputs in every report", async () => {
|
||||
const source = await readFile(".github/workflows/design-system-audit.yml", "utf8");
|
||||
expect(source).toContain(
|
||||
"require('./node_modules/@openclaw/design-system/package.json').version",
|
||||
);
|
||||
expect(source).toContain("repos/openclaw/design-system/releases/tags/${release}");
|
||||
expect(source).toContain("https://github.com/openclaw/design-system.git");
|
||||
expect(source).toContain("require('./node_modules/@openclaw/carapace/package.json').version");
|
||||
expect(source).toContain("repos/openclaw/carapace/releases/tags/${release}");
|
||||
expect(source).toContain("https://github.com/openclaw/carapace.git");
|
||||
expect(source).toContain('clone \\\n --branch "$release"');
|
||||
expect(source).toContain("--consumer-sha");
|
||||
expect(source).toContain("--base-sha");
|
||||
|
||||
@@ -172,9 +172,7 @@ async function main() {
|
||||
const output = outputIndex >= 0 ? process.argv[outputIndex + 1] : undefined;
|
||||
const base = baseIndex >= 0 ? process.argv[baseIndex + 1] : undefined;
|
||||
const designSystemStyles =
|
||||
stylesIndex >= 0
|
||||
? process.argv[stylesIndex + 1]
|
||||
: "node_modules/@openclaw/design-system/styles";
|
||||
stylesIndex >= 0 ? process.argv[stylesIndex + 1] : "node_modules/@openclaw/carapace/styles";
|
||||
if (!output || (!base && !workingTree) || !designSystemStyles) {
|
||||
throw new Error(
|
||||
"usage: source-check.ts (--base <sha> | --working-tree) --output <path> [--design-system-styles <dir>] [--fail-on-findings]",
|
||||
|
||||
+14
-8
@@ -26,31 +26,37 @@
|
||||
"computedHash": "73ed9a6417283ee4029a9e61d11ee3cc9ae64268d131150c4c0f4a71f87cd549"
|
||||
},
|
||||
"openclaw-brand": {
|
||||
"source": "openclaw/design-system",
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-brand/SKILL.md",
|
||||
"computedHash": "d4bf50bb9d512dbfbcd4abde7a75d8399b0187ca9486dd7854844aab0cd02e6a"
|
||||
},
|
||||
"openclaw-carapace": {
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-carapace/SKILL.md",
|
||||
"computedHash": "d499fc33a555946855c7e817833b6c67b8b25b12f6dc1c5dfb27e862ed2c5ece"
|
||||
},
|
||||
"openclaw-design": {
|
||||
"source": "openclaw/design-system",
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-design/SKILL.md",
|
||||
"computedHash": "096be7d1e5e65e62b7de5b96e3897b6ac3a1f45686ee5599dfcbaeaeb607b4ec"
|
||||
"computedHash": "4a9004e762b08f6c9fc836de7b4db26fc27e7b9a90342884047bbffa51c21732"
|
||||
},
|
||||
"openclaw-design-audit": {
|
||||
"source": "openclaw/design-system",
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-design-audit/SKILL.md",
|
||||
"computedHash": "12fec90fd4aa1aa569de1beb5a3c85d06887a5e548704dbd094355edc0f52ad3"
|
||||
"computedHash": "aff7655c532d67205301590f76d8655a42f36d14fbd1960d4e4b9b8149291aa3"
|
||||
},
|
||||
"openclaw-design-system": {
|
||||
"source": "openclaw/design-system",
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-design-system/SKILL.md",
|
||||
"computedHash": "475604f08f37186237fa62605fbfe16ea04367af81f4c3a8c59bcb395ae70cca"
|
||||
"computedHash": "6d94e825c58fc5650a532e4ed8bc96208ede8a166089598d1924393cc46f3275"
|
||||
},
|
||||
"openclaw-marketing-pages": {
|
||||
"source": "openclaw/design-system",
|
||||
"source": "openclaw/carapace",
|
||||
"sourceType": "github",
|
||||
"skillPath": "openclaw-marketing-pages/SKILL.md",
|
||||
"computedHash": "7da44d258d5a1e87b26535effa13cf20931fd04a884fd95225a4ff603932ef84"
|
||||
|
||||
@@ -75,11 +75,11 @@ describe("restored UI design contract", () => {
|
||||
const rootSource = rootRoute();
|
||||
const sharedCss = designSystemStyles();
|
||||
|
||||
expect(sharedCss).toContain('@import "@openclaw/design-system/tokens.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/design-system/typography.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/design-system/themes/product.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/design-system/components.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/design-system/compat/clawhub.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/carapace/tokens.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/carapace/typography.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/carapace/themes/product.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/carapace/components.css";');
|
||||
expect(sharedCss).toContain('@import "@openclaw/carapace/compat/clawhub.css";');
|
||||
expect(sharedCss).toContain(".home-v2-main.oc-app-surface");
|
||||
expect(sharedCss).toContain("--hv2-bg: var(--oc-bg-page)");
|
||||
expect(sharedCss).toContain("--hv2-text: var(--oc-text-primary)");
|
||||
@@ -445,7 +445,7 @@ describe("restored UI design contract", () => {
|
||||
|
||||
it("keeps runtime requirement text high contrast in both themes", () => {
|
||||
const css = styles();
|
||||
const designTokens = read("node_modules/@openclaw/design-system/styles/tokens.css");
|
||||
const designTokens = read("node_modules/@openclaw/carapace/styles/tokens.css");
|
||||
const installCardSource = read("src/components/SkillInstallCard.tsx");
|
||||
|
||||
expect(installCardSource).toContain("requirements-env-row");
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
@import "@openclaw/design-system/tokens.css";
|
||||
@import "@openclaw/design-system/themes.css";
|
||||
@import "@openclaw/design-system/typography.css";
|
||||
@import "@openclaw/design-system/themes/product.css";
|
||||
@import "@openclaw/design-system/components.css";
|
||||
@import "@openclaw/design-system/compat/clawhub.css";
|
||||
@import "@openclaw/carapace/tokens.css";
|
||||
@import "@openclaw/carapace/themes.css";
|
||||
@import "@openclaw/carapace/typography.css";
|
||||
@import "@openclaw/carapace/themes/product.css";
|
||||
@import "@openclaw/carapace/components.css";
|
||||
@import "@openclaw/carapace/compat/clawhub.css";
|
||||
|
||||
/*
|
||||
* Temporary aliases for legacy ClawHub styles that have not yet moved to the
|
||||
|
||||
Reference in New Issue
Block a user