@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
* {
@apply border-hairline;
}
body {
@apply bg-canvas-soft text-ink font-sans antialiased;
font-feature-settings: 'ss01', 'ss02';
}
::selection {
background-color: #171717;
color: #f2f2f2;
}
}
@layer components {
.nav-bar {
@apply bg-canvas h-16 px-lg flex items-center border-b border-hairline sticky top-0 z-50;
}
.form-input {
@apply bg-canvas text-ink border border-hairline rounded-sm h-10 px-sm text-body-sm
focus:outline-none focus:border-ink focus:ring-1 focus:ring-ink
placeholder:text-mute transition-colors;
}
.form-input-sm {
@apply form-input h-8;
}
.form-input-lg {
@apply form-input h-12 text-body-md;
}
.btn-primary {
@apply bg-primary text-primary-foreground rounded-pill px-sm h-12
text-button-lg inline-flex items-center justify-center gap-2
hover:opacity-90 transition-opacity disabled:opacity-50;
}
.btn-secondary {
@apply bg-canvas text-ink rounded-pill px-sm h-12
text-button-lg inline-flex items-center justify-center gap-2
border border-hairline hover:bg-canvas-soft transition-colors;
}
.btn-primary-sm {
@apply bg-primary text-primary-foreground rounded-sm h-7 px-xs
text-body-sm-strong inline-flex items-center justify-center gap-1
hover:opacity-90 transition-opacity;
}
.btn-secondary-sm {
@apply bg-canvas text-ink rounded-sm h-7 px-xs
text-body-sm-strong inline-flex items-center justify-center gap-1
border border-hairline hover:bg-canvas-soft transition-colors;
}
.btn-ghost {
@apply bg-transparent text-body rounded-full px-sm h-8
text-body-sm inline-flex items-center justify-center
hover:bg-canvas-soft transition-colors;
}
.card {
@apply bg-canvas rounded-md p-lg shadow-level-2;
}
.card-soft {
@apply bg-canvas-soft rounded-md p-lg;
}
.card-lg {
@apply bg-canvas rounded-lg p-xl shadow-level-4;
}
.data-table {
@apply w-full;
}
.data-table th {
@apply bg-canvas-soft text-mute text-caption-mono uppercase px-sm py-xs text-left font-normal;
}
.data-table td {
@apply px-sm py-sm text-body-sm border-b border-hairline;
}
.data-table tr:last-child td {
@apply border-b-0;
}
.data-table tr:hover td {
@apply bg-canvas-soft;
}
.code-block {
@apply bg-primary text-primary-foreground rounded-md p-lg text-code font-mono
overflow-x-auto whitespace-pre;
}
.badge {
@apply bg-canvas-soft text-body rounded-full px-xs h-5
text-caption inline-flex items-center;
}
.tab-ghost {
@apply bg-canvas text-ink rounded-pill-sm px-md h-8
text-body-sm inline-flex items-center
hover:bg-canvas-soft transition-colors cursor-pointer;
}
.tab-active {
@apply bg-primary text-primary-foreground rounded-pill-sm px-md h-8
text-body-sm inline-flex items-center;
}
.toast {
@apply bg-canvas rounded-md px-md py-sm shadow-level-4 text-body-sm;
}
}