Corone Vault

Curva DS v2 — MANDATORY for all future Curva work (both corone workspaces)

3 min read

Curva DS v2 — MANDATORY rule

User directive 2026-05-04 (r_goto): all future Curva work (COCONRobotics-Corp/Curva) MUST use Curva DS v2 components + tokens. Applies to BOTH corone workspaces.

Workspaces it applies to

WorkspacePersonaGitHubCurva mirror
/var/www/corone.monster/Ryoeduson510/tmp/Curva
/var/www/kebahagiaan.corone.monster/Juliantime7676 → eduson510 (per Curva rule)/tmp/Curva

Both workspaces share the same /tmp/Curva git mirror. Same rule, same DS v2.

✅ MUST use (Curva DS v2)

Components — import { ... } from '@/Components/Curva'

NeedUseNEVER
Button (CTA / action)<CButton variant="primary|secondary|ghost|danger|link" size="sm|md|lg"><button class="bg-..."> raw / <PrimaryButton> / <SecondaryButton> / <DangerButton>
Form fields<CFormField> wrapping <CInput> / <CTextarea> / <CSelect>raw <input> / Jetstream form components
Card<CCard>raw <div class="bg-white border ...">
Modal<CModal> / <CDialog>DialogModal.vue (legacy)
Tabs<CTabs> + <CTab><a class="tab">
Table action menu<CTableActionMenu> + <CDropdownItem>daisyui dropdown / dropdown-content / dropdown-end
Dropdown<CDropdown> (Headless UI Menu wrapper)daisyui dropdown classes
Layout shell<CAppShell> + <CSidebar> + <CPageHeader> + <CBreadcrumbs>4 legacy sidebars (1418 LOC)
Status pill<CStatusPill> / <CBadge><JetBarBadge>
KPI card<CKpi><JetBarStatCard>
Avatar<CAvatar>raw <div class="avatar">
Empty state<CEmptyState>hand-rolled
Loading<CSkeleton>hand-rolled
Toast<CToast>notiwind raw
Theme<CThemeToggle>manual class swap

Tokens — Tailwind classes via CSS vars

PurposeClassValue
Brand (primary CTA)bg-curva-brand-500 / text-curva-brand-{50..900}oklch(67% 0.19 145) ≈ 06C755 (LINE green)
Texttext-curva-text / text-curva-text-mute / text-curva-text-faintlayered greys
Backgroundbg-curva-bg-page / bg-curva-bg-surface / bg-curva-bg-raised / bg-curva-bg-sunkendepth scale
Borderborder-curva-border / border-curva-border-strong2 levels
Semanticbg-curva-success (= brand-kin) / bg-curva-warning / bg-curva-dangergreen/orange/red
Info BANNER ONLYbg-curva-info / text-curva-infoblue oklch(64% 0.13 240) — NOT for CTA
Radiusrounded-curva-sm|md|lg|xl|2xl|pillscale
Shadowshadow-curva-sm|md|lg|xlscale
Transitionduration-curva-fast|base|slow ease-curva-out120/180/280ms

❌ FORBIDDEN

  • bg-blue-* / bg-gray-800 / hex color literals as CTA — use <CButton variant="primary"> or token
  • bg-curva-info as CTA — info banner color, not CTA. CRV-55 fixed 12 screens that misused this. Use bg-curva-brand-500 for primary CTA.
  • daisyui classes: dropdown / dropdown-content / dropdown-end / dropdown-top / menu / btn / card / collapse / drawer — daisyui plugin REMOVED in CRV-35, all classes orphan + break positioning
  • Legacy buttons: <PrimaryButton> / <SecondaryButton> / <DangerButton> / <Button> — all marked @deprecated
  • Legacy wrappers: <JetBarStatCard> / <JetBarBadge> / <JetBarIcon> / <JetBarSimplePagination> — replace with C* equivalents
  • Hardcoded colors in new components (color-mix, oklch(...) literals, hex) — go through tokens

Coverage state (post CRV-55 PR #1046, 2026-05-04)

MetricCount%
Total Vue pages233100%
Pages using DS v2 components208.6%
Pages using DS tokens19885%
Pages still on legacy bg-curva-info CTA5624%
Pages still on legacy buttons9240%
Pages still on JetBar wrappers15265%

CRV-35 plan: ~5 of 13 dev-days complete. P5 (top 20 page migration) + P6 (a11y + axe + Lighthouse + daisyui dep removal) remain.

Workflow when picking up a new Curva ticket

  1. First: check if the touched page uses DS v2. If not, migrate UI surface to DS v2 (see component table above).
  2. Then implement the feature/fix.
  3. Never add legacy components to a NEW page.
  4. Never add bg-curva-info as CTA color.
  5. Verify: npm run lint 0 errors, npm run build green.
  6. Sub-task → CRV-35 if migration is significant; standalone CRV-XX if feature is independent.

Reference

  • Components: /tmp/Curva/resources/js/Components/Curva/
  • Barrel export: /tmp/Curva/resources/js/Components/Curva/index.ts
  • Tokens: /tmp/Curva/resources/css/curva-tokens.css
  • Tailwind config: /tmp/Curva/tailwind.config.js
  • In-app preview: /design-system route
  • Parent ticket: CRV-35
  • This-pass cleanup: CRV-55 PR #1046
  • concepts/corone-design-system.md — Corone Quiet-Premium DS (sibling, applies to corone-monster repo, not Curva)
  • concepts/curva-github-practice.md — Curva branch + commit + PR rules
  • concepts/ci-cd-must-pass-before-merge.md — merge gate

Graph View

Backlinks