@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 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 hover:bg-surface-high hover:text-on-surface; } .fd-side-link.active { @apply bg-surface-high text-on-surface; } /* 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 hover:bg-surface-high cursor-pointer whitespace-nowrap; } .fd-input { @apply input input-sm bg-surface-low border-outline w-full rounded-md text-[13px] focus:outline-none focus:border-outline-strong; } .fd-btn-primary { @apply btn btn-sm btn-primary rounded-md font-medium; } .fd-btn-ghost { @apply btn btn-sm btn-ghost rounded-md font-normal border border-outline; } .fd-card { @apply bg-surface-low border border-outline rounded-lg; } /* Kanban */ .fd-kanban-col { @apply w-[320px] shrink-0 flex flex-col rounded-lg bg-surface-low/60; } .fd-kanban-card { @apply bg-surface-low border border-outline rounded-lg p-3 flex flex-col gap-2 cursor-pointer hover:bg-surface-container shadow-sm; } .fd-kanban-card.sortable-ghost { @apply opacity-40 border-dashed border-outline-strong; } /* Rich text (Action Text / Trix) */ .fd-prose { @apply max-w-none leading-relaxed text-[13px]; } .fd-prose h1 { @apply text-xl font-semibold mt-4 mb-2 font-headline; } .fd-prose h2 { @apply text-lg font-semibold mt-3 mb-1.5 font-headline; } .fd-prose h3 { @apply text-base font-semibold mt-2 mb-1; } .fd-prose ul { @apply list-disc pl-5 my-1.5; } .fd-prose ol { @apply list-decimal pl-5 my-1.5; } .fd-prose a { @apply text-link underline; } .fd-prose pre { @apply bg-surface-high rounded-md p-3 my-2 overflow-x-auto text-xs; } .fd-prose blockquote { @apply border-l-2 border-outline-strong pl-3 text-muted my-2; } .fd-prose img { @apply rounded-md my-2 max-w-full; } /* Help center long-form docs */ .help-doc h1 { @apply text-2xl font-headline font-semibold mb-3; } .help-doc h2 { @apply text-base font-headline font-semibold mt-6 mb-2; } .help-doc p { @apply my-2 leading-relaxed text-[13px]; } .help-doc ul, .help-doc ol { @apply my-2 leading-relaxed; } .help-doc li { @apply my-1; } .help-doc code { @apply bg-surface-high border border-outline rounded px-1 py-0.5 text-[11px]; } .help-doc kbd { @apply kbd kbd-sm; } .help-doc strong { @apply text-on-surface; } .help-doc .not-prose a, .help-doc .not-prose div { @apply no-underline text-on-surface; } .help-doc .not-prose .text-muted { @apply text-muted; } .help-doc table { @apply w-full my-3 text-[12px] border border-outline rounded-lg; } .help-doc th { @apply text-left text-muted font-medium px-3 py-1.5 border-b border-outline bg-surface-low; } .help-doc td { @apply px-3 py-1.5 border-b border-divider align-top; } trix-toolbar .trix-button-group { @apply border border-outline rounded-md; } trix-toolbar .trix-button { @apply border-outline; filter: invert(0.7); } trix-editor { @apply bg-surface-low border border-outline w-full rounded-md text-[13px] min-h-24 p-2 leading-relaxed focus:outline-none focus:border-outline-strong; } }