Kollektiv | Your private LLM knowledgebase

/** * Common Utility Classes * * This file contains frequently used utility class combinations to reduce repetition * in your components and improve consistency across the application. */ /** * flex-center * * Creates a flex container with centered items both horizontally and vertically. * * @example * <div class="flex-center"> * <p>This content is centered</p> * </div> * * @what-it-does Applies display: flex, justify-content: center, and align-items: center */ @utility flex-center { @apply flex justify-center items-center; } /** * flex-center-col * * Creates a column flex container with centered items. * * @example * <div class="flex-center-col"> * <p>This content is stacked vertically</p> * <p>And centered</p> * </div> * * @what-it-does Applies display: flex, flex-direction: column, justify-content: center, and align-items: center */ @utility flex-center-col { @apply flex flex-col justify-center items-center; } /** * content-container * * Standard container with consistent horizontal padding. * ! - uses built-in max-width defined by Tailwind. * Can be used on any layout element that needs standard spacing */ @utility content-container { @apply container mx-auto px-4; } /** * content-container-full-width * * Full-width container with consistent horizontal padding. * ! - overrides the built-in max-width defined by Tailwind. * Can be used on any layout element that needs standard spacing */ @utility content-container-full-width { @apply mx-auto px-4 w-full; } /** * content-fixed * * Simple fixed-width container with consistent padding. * - Always uses max-w-6xl regardless of screen size * - Provides consistent horizontal padding * - Centers content with mx-auto * - No responsive breakpoints or container behavior */ @utility content-container-fixed-width { @apply w-full max-w-6xl mx-auto px-4; } /* ========================================================================== Component Width Utilities ========================================================================== */ /** * component-width-card * * Standard width for small cards (dashboards, overviews). * * @what-it-does Applies max-width: 28rem (~448px) */ @utility component-width-card { @apply max-w-md; /* Corresponds to 28rem */ } /** * component-width-card-lg * * Width for larger cards (bigger dashboard sections). * * @what-it-does Applies max-width: 32rem (~512px) */ @utility component-width-card-lg { @apply max-w-lg; /* Corresponds to 32rem */ } /** * component-width-dialog * * Standard width for modals and dialog popups. * * @what-it-does Applies max-width: 32rem (~512px) */ @utility component-width-dialog { @apply max-w-lg; /* Corresponds to 32rem */ } /** * component-width-dialog-lg * * Width for large dialogs (complex forms, heavy content). * * @what-it-does Applies max-width: 42rem (~672px) */ @utility component-width-dialog-lg { @apply max-w-2xl; /* Corresponds to 42rem */ } /** * component-layout-modal-fullscreen * * Layout utility for rare full-screen modals (onboarding, editors). * Note: This affects height as well. * * @what-it-does Applies width: 100% and height: 100% */ @utility component-layout-modal-fullscreen { @apply w-full h-full; } /* Top spacing after header */ @utility page-header { @apply pt-4 pb-4; } /* Bottom spacing before footer */ @utility page-footer { @apply pb-4 md:pb-8; } /** * flex-between * * Creates a flex container with items spaced between and vertically centered. * Commonly used for navigation bars and card headers. * * @example * <div class="flex-between"> * <h3>Card Title</h3> * <button>Action</button> * </div> * * @what-it-does Applies display: flex, justify-content: space-between, and align-items: center */ @utility flex-between { @apply flex justify-between items-center; } /** * flex-start * * Creates a flex container with items aligned to the start and vertically centered. * * @example * <div class="flex-start"> * <span>Label:</span> * <p>Content that follows the label</p> * </div> * * @what-it-does Applies display: flex, justify-content: flex-start, and align-items: center */ @utility flex-start { @apply flex justify-start items-center; } /** * flex-end * * Creates a flex container with items aligned to the end and vertically centered. * * @example * <div class="flex-end"> * <button>Cancel</button> * <button>Submit</button> * </div> * * @what-it-does Applies display: flex, justify-content: flex-end, and align-items: center */ @utility flex-end { @apply flex justify-end items-center; } /** * grid-center * * Creates a grid container with items perfectly centered. * Useful for centering a single item or creating a grid of centered items. * * @example * <div class="grid-center"> * <div>This is centered</div> * </div> * * @what-it-does Applies display: grid and place-items: center */ @utility grid-center { @apply grid place-items-center; } /** * absolute-center * * Positions an element absolutely in the center of its relative parent. * * @example * <div style="position: relative; height: 200px;"> * <div class="absolute-center">Centered overlay</div> * </div> * * @what-it-does Applies position: absolute, top: 50%, left: 50%, and transform: translate(-50%, -50%) * @note Parent element must have position: relative, absolute, or fixed */ @utility absolute-center { @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2; } /** * absolute-fill * * Makes an element fill its relative parent completely. * * @example * <div style="position: relative; height: 200px;"> * <div class="absolute-fill">Full overlay</div> * </div> * * @what-it-does Applies position: absolute and sets top, right, bottom, left to 0 * @note Parent element must have position: relative, absolute, or fixed */ @utility absolute-fill { @apply absolute inset-0; } /** * truncate-text * * Truncates text with an ellipsis when it overflows its container. * * @example * <div style="width: 100px;"> * <p class="truncate-text">This text will be truncated if it's too long</p> * </div> * * @what-it-does Applies overflow: hidden, text-overflow: ellipsis, and white-space: nowrap */ @utility truncate-text { @apply truncate; } /** * icon-color * * Makes an icon inherit the current text color. * * @example * <div class="text-primary"> * <svg class="icon-color">...</svg> * </div> * * @what-it-does Sets both color and fill to currentColor */ @utility icon-color { color: currentColor; fill: currentColor; } /** * icon-primary * * Colors an icon with the primary theme color. * * @example * <svg class="icon-primary">...</svg> * * @what-it-does Sets both color and fill to the primary color variable */ @utility icon-primary { @apply text-primary; fill: var(--color-primary); } /** * icon-secondary * * Colors an icon with the secondary theme color. * * @example * <svg class="icon-secondary">...</svg> * * @what-it-does Sets both color and fill to the secondary color variable */ @utility icon-secondary { @apply text-secondary; fill: var(--color-secondary); } /** * icon-muted * * Colors an icon with the muted theme color. * * @example * <svg class="icon-muted">...</svg> * * @what-it-does Sets both color and fill to the muted color variable */ @utility icon-muted { @apply text-muted; fill: var(--color-muted); } /** * icon-error * * Colors an icon with the error theme color. * * @example * <svg class="icon-error">...</svg> * * @what-it-does Sets both color and fill to the error color variable */ @utility icon-error { @apply text-destructive; fill: var(--color-destructive); } /** * icon-success * * Colors an icon with the success theme color. * * @example * <svg class="icon-success">...</svg> * * @what-it-does Sets both color and fill to the success color variable */ @utility icon-success { @apply text-success; fill: var(--color-success); } /** * icon-warning * * Colors an icon with the warning theme color. * * @example * <svg class="icon-warning">...</svg> * * @what-it-does Sets both color and fill to the warning color variable */ @utility icon-warning { @apply text-warning; fill: var(--color-warning); } /** * icon-info * * Colors an icon with the info theme color. * * @example * <svg class="icon-info">...</svg> * * @what-it-does Sets both color and fill to the info color variable */ @utility icon-info { @apply text-info; fill: var(--color-info); } /** * shadow-glow * * Creates a glowing shadow effect for primary buttons and important UI elements. * * @example * <button class="shadow-glow"> * Get Started * </button> * * @what-it-does Applies a box-shadow with the primary color glow effect */ @utility shadow-glow { @apply shadow-[0_0_15px_rgba(0,255,157,0.5)]; } /* For layout containers that change properties at breakpoints */ @utility transition-dimensions { transition-property: margin, padding, width, height, max-width, max-height; transition-duration: 300ms; transition-timing-function: ease-out; } /* For elements that change position/alignment */ @utility transition-position { transition-property: justify-content, align-items, align-self, flex-direction, gap; transition-duration: 300ms; transition-timing-function: ease-out; } /* Create simple utility classes */ @utility animate-fade-in { animation: fade-in 1s ease-out forwards; opacity: 0; /* Start invisible */ } /* Create fade-in animation without translation for mobile elements */ @utility animate-fade-in-only { animation: fade-in-only 1s ease-out forwards; opacity: 0; /* Start invisible */ } @utility animate-delay-100 { animation-delay: 100ms; } @utility animate-delay-200 { animation-delay: 200ms; } @utility animate-delay-300 { animation-delay: 300ms; } @utility animate-icon-wiggle { animation: icon-subtle-wiggle 0.5s ease-in-out; } /* Accordion animation*/ @utility animate-accordion-down { animation: accordion-down 0.3s ease-out; } @utility animate-accordion-up { animation: accordion-up 0.175s ease-in; } @utility animate-pulse-in { animation: pulse-in 0.4s ease-in-out forwards; } /* Custom utilities */ @utility focus-ring { outline: none; box-shadow: 0 0 0 var(--border-fine) hsl(var(--color-primary)); } @utility focus-ring-within { outline: none; box-shadow: 0 0 0 var(--border-fine) hsl(var(--color-primary)); } @utility shadow { box-shadow: var(--shadow); } @utility z-negative { z-index: var(--z-negative); } @utility z-base { z-index: var(--z-base); } @utility z-content { z-index: var(--z-content); } @utility z-dropdown { z-index: var(--z-dropdown); } @utility z-sticky { z-index: var(--z-sticky); } @utility z-fixed { z-index: var(--z-fixed); } @utility z-overlay { z-index: var(--z-overlay); } @utility z-modal { z-index: var(--z-modal); } @utility z-popover { z-index: var(--z-popover); } @utility z-toast { z-index: var(--z-toast); } @utility z-spotlight { z-index: var(--z-spotlight); } @utility z-max { z-index: var(--z-max); }