@import "tailwindcss"; @source "../../views/**/*.erb"; @source "../../helpers/**/*.rb"; @source "../../javascript/**/*.js"; /* Cornerstone design tokens (ref -> sys -> cmp), scoped by data-brand/data-theme on */ @import "@cruglobal/cornerstone-design-system/css/ref"; @import "@cruglobal/cornerstone-design-system/css/cru-light"; @import "@cruglobal/cornerstone-design-system/css/cru-dark"; /* daisyUI + Cornerstone's daisyUI theme bridge (cru-light / cru-dark) */ @plugin "daisyui" { themes: false; } @import "../../../node_modules/@cruglobal/cornerstone-design-system/libraries/daisyui.css"; /* Map Tailwind utility colors onto Cornerstone sys tokens so bg-surface, text-on-surface, border-outline, etc. re-skin via the cascade. */ @theme inline { --color-surface: var(--sys-color-surface-default); --color-surface-low: var(--sys-color-surface-container-low); --color-surface-container: var(--sys-color-surface-container); --color-surface-high: var(--sys-color-surface-container-high); --color-surface-highest: var(--sys-color-surface-container-highest); --color-surface-bright: var(--sys-color-surface-bright); --color-on-surface: var(--sys-color-on-surface); --color-muted: var(--sys-color-on-surface-variant); --color-outline: var(--sys-color-outline-variant-default); --color-outline-strong: var(--sys-color-outline-default); --color-divider: var(--sys-color-divider); --color-brand: var(--sys-color-primary-default); --color-on-brand: var(--sys-color-on-primary); --color-danger: var(--sys-color-danger-default); --color-on-danger: var(--sys-color-on-danger); --color-success-tone: var(--sys-color-success-default); --color-warning-tone: var(--sys-color-warning-default); --color-info-tone: var(--sys-color-information-default); --color-link: var(--sys-color-link-default); --font-display: var(--sys-string-font-family-display); --font-headline: var(--sys-string-font-family-headline); --font-body: var(--sys-string-font-family-body); } @layer base { html { @apply h-full; } body { @apply h-full bg-surface text-on-surface font-body antialiased text-[13px]; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--sys-color-outline-variant-default); border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } } @layer components { /* App shell */ .fd-rail-btn { @apply flex flex-col items-center gap-1 px-2 py-1.5 rounded-md text-muted transition-colors hover:text-on-surface hover:bg-surface-high cursor-pointer text-[10px]; } .fd-rail-btn.active { @apply text-on-surface bg-surface-high; } .fd-side-link { @apply flex items-center gap-2 px-2 py-1.5 rounded-md text-[13px] text-muted transition-colors hover:bg-surface-high hover:text-on-surface; } .fd-side-link.active { @apply bg-surface-high text-on-surface; } /* Square icon button used in the top bar (hamburger, search, help, inbox) */ .fd-icon-btn { @apply inline-flex items-center justify-center size-9 rounded-md text-muted transition-colors hover:text-on-surface hover:bg-surface-high cursor-pointer shrink-0; } /* Property chips on work item rows/cards */ .fd-chip { @apply inline-flex items-center gap-1 rounded-sm border border-outline px-1.5 py-0.5 text-[11px] leading-4 text-muted transition-colors hover:bg-surface-high cursor-pointer whitespace-nowrap; } /* Plane-style ↑N ↓N vote counts in the work-item header (FD-188) */ .fd-vote { @apply inline-flex items-center gap-0.5 rounded-md border border-outline px-1.5 h-7 text-[12px] text-muted transition-colors hover:bg-surface-high hover:text-on-surface cursor-pointer; } .fd-vote-on { @apply border-brand text-on-surface; } .fd-input { @apply input input-sm bg-surface-low border-outline w-full rounded-md text-[13px] focus:outline-none focus:border-outline-strong; } /* Plane-style collapsible groups in the Properties rail (Details / Project structure) */ .fd-prop-group { @apply border-t border-divider/60 pt-2 mt-2 first:border-0 first:pt-0 first:mt-0; } .fd-prop-group-summary { @apply flex items-center gap-1 cursor-pointer list-none select-none py-0.5 text-[12px] font-medium text-on-surface; } .fd-prop-group-summary::-webkit-details-marker { display: none; } .fd-prop-group-chevron { @apply text-[10px] leading-none text-muted transition-transform; } /* Plane-style property picker: trigger pill + popover panel */ .fd-prop-pill { @apply inline-flex items-center gap-1.5 w-full rounded-md border border-transparent px-1.5 py-1 text-[12px] text-on-surface text-left transition-colors cursor-pointer hover:bg-surface-high hover:border-outline focus:outline-none focus:bg-surface-high focus:border-outline-strong; } .fd-date-pill { @apply bg-transparent border border-transparent rounded-md px-1.5 py-1 text-[12px] w-full transition-colors hover:bg-surface-high hover:border-outline focus:outline-none focus:border-outline-strong; } /* Inline variants for the under-title property strip (Plane shows State/Priority/ Assignees/dates as a row of discrete pills beneath the title). */ .fd-prop-pill-inline { @apply inline-flex items-center gap-1.5 rounded-md border border-outline px-2 py-1 text-[12px] text-on-surface transition-colors cursor-pointer whitespace-nowrap hover:bg-surface-high focus:outline-none focus:border-outline-strong; } .fd-date-pill-inline { @apply inline-flex items-center rounded-md border border-outline bg-transparent px-2 py-1 text-[12px] transition-colors hover:bg-surface-high focus:outline-none focus:border-outline-strong; } .fd-popover { @apply absolute left-0 top-full mt-1 z-50 w-64 max-w-[80vw] rounded-lg border border-outline bg-surface shadow-lg overflow-hidden; } .fd-popover-list { @apply max-h-64 overflow-y-auto p-1 flex flex-col; } .fd-popover-opt { @apply flex items-center gap-2 px-2 py-1.5 rounded-md text-[12px] cursor-pointer transition-colors hover:bg-surface-high; } .fd-popover-check { @apply ml-auto shrink-0 text-brand opacity-0; } .fd-popover-opt .peer:checked ~ .fd-popover-check { @apply opacity-100; } .fd-popover-opt:has(.peer:checked) { @apply bg-surface-high/60; } /* daisyUI 5's .btn carries no cursor, and Tailwind v4 dropped the old button→pointer default, so add it here for