The Coline design system: accessible React components for Coline Apps, themed live by the host workspace, and for Coline Sites in light and dark. Tailwind v4 stylesheet included. MIT.
| .coline-tabs[data-orientation="horizontal"] { flex-direction: column; } |
| 5 | .coline-tabs-list { |
| 6 | position: relative; display: inline-flex; align-items: center; justify-content: center; |
| 7 | align-self: flex-start; width: fit-content; max-width: 100%; gap: 2px; |
| 8 | padding: 3px; border-radius: calc(var(--radius) + 16px); color: var(--muted-foreground); |
| 9 | } |
| 10 | .coline-tabs-raised { |
| 11 | background: color-mix(in oklch, var(--muted) 70%, transparent); |
| 12 | border: 1px solid rgb(0 0 0 / 4%); box-shadow: inset 0 1px 2px rgb(0 0 0 / 6%); |
| 13 | } |
| 14 | .dark .coline-tabs-raised { background: rgb(255 255 255 / 4%); border-color: rgb(255 255 255 / 4%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 30%); } |
| 15 | .coline-tabs-trigger { |
| 16 | position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; |
| 17 | flex: 1; gap: 6px; min-height: 30px; padding: 4px 8px; border: 1px solid transparent; |
| 18 | border-radius: 12px; font-size: 14px; font-weight: 500; white-space: nowrap; |
| 19 | color: var(--muted-foreground); background: transparent; cursor: pointer; |
| 20 | transition: color 150ms cubic-bezier(.23,1,.32,1); |
| 21 | } |
| 22 | .coline-tabs-trigger[data-state="active"] { color: var(--foreground); } |
| 23 | .coline-tabs-trigger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } |
| 24 | .coline-tabs-trigger:disabled { opacity: .45; cursor: default; } |
| 25 | .coline-tabs-trigger svg { width: 16px; height: 16px; flex-shrink: 0; pointer-events: none; } |
| 26 | .coline-tabs-indicator { |
| 27 | pointer-events: none; position: absolute; inset: 0; z-index: -1; border-radius: inherit; |
| 28 | background: var(--background); border: 1px solid rgb(0 0 0 / 6%); |
| 29 | box-shadow: 0 1px 3px rgb(0 0 0 / 8%); |
| 30 | } |
| 31 | .dark .coline-tabs-indicator { background: rgb(255 255 255 / 7%); border-color: rgb(255 255 255 / 6%); box-shadow: 0 1px 3px rgb(0 0 0 / 30%), inset 0 1px 0 rgb(255 255 255 / 4%); } |
| 32 | .coline-tabs-list[data-orientation="vertical"] { flex-direction: column; border-radius: 16px; } |
| 33 | .coline-tabs-list[data-orientation="vertical"] .coline-tabs-trigger { width: 100%; justify-content: flex-start; border-radius: 12px; } |
| 34 | .coline-tabs-line { border-radius: 0; background: transparent; } |
| 35 | .coline-tabs-line .coline-tabs-trigger { border-radius: 0; } |
| 36 | .coline-tabs-line .coline-tabs-trigger[data-state="active"]::after { content: ""; position: absolute; inset: auto 8px -3px; height: 2px; background: currentColor; } |
| 37 | .coline-tabs-content { min-width: 0; flex: 1; outline: none; } |
| 38 | .coline-tabs-content[data-state="active"] { animation: coline-content-in 160ms cubic-bezier(.23,1,.32,1); } |
| 39 | .coline-tabs-content[data-state="inactive"] { display: none; } |
| 40 | @keyframes coline-content-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } |
| 41 | .coline-button { transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out, transform 120ms cubic-bezier(.23,1,.32,1), box-shadow 150ms ease-out; } |
| 42 | .coline-button:active:not(:disabled):not([data-variant="link"]) { transform: scale(.97); } |
| 43 | .coline-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } |
| 44 | .coline-button:disabled { cursor: not-allowed; } |
| 45 | .coline-dialog-overlay[data-state="open"] { animation: coline-overlay-in 180ms ease-out; } |
| 46 | .coline-dialog-overlay[data-state="closed"] { animation: coline-overlay-in 120ms ease-out reverse; } |
| 47 | .coline-dialog-content { color: var(--popover-foreground); transform-origin: bottom center; } |
| 48 | .coline-dialog-content[data-state="open"] { animation: coline-dialog-in 220ms cubic-bezier(.23,1,.32,1); } |
| 49 | .coline-dialog-content[data-state="closed"] { animation: coline-dialog-in 140ms ease-out reverse; overflow: hidden; } |
| 50 | @keyframes coline-overlay-in { from { opacity: 0; } to { opacity: 1; } } |
| 51 | @keyframes coline-dialog-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| 52 | @media (min-width: 640px) { |
| 53 | .coline-dialog-content { transform-origin: center; } |
| 54 | @keyframes coline-dialog-in { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } |
| 55 | } |
| 56 | @media (hover: hover) and (pointer: fine) { .coline-tabs-trigger:hover { color: var(--foreground); } } |
| 57 | @media (prefers-reduced-motion: reduce) { |
| 58 | .coline-tabs-content, .coline-button, .coline-dialog-content, .coline-dialog-overlay, |
| 59 | [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-sub-content"], |
| 60 | [data-slot="popover-content"], [data-slot="select-content"], [data-slot="tooltip-content"] { |
| 61 | animation-duration: 1ms !important; transition-duration: 0s !important; |
| 62 | } |
| 63 | .coline-button:active:not(:disabled) { transform: none; } |
| 64 | } |
| 65 |
| 66 | } |
| 67 | @layer components { |
| 68 | .coline-filter-menu { justify-content: space-between; gap: 10px; border-radius: 12px; font-size: 13px; } |
| 69 | .coline-filter-menu > svg { width: 14px; height: 14px; opacity: .6; } |
| 70 | } |
| 71 |