/* ============================================================ EveryChat — utilities.css ------------------------------------------------------------ A small, intentional set of single-purpose helpers. This is NOT a Tailwind clone. The set is bounded by the prompt; if you find yourself reaching for a utility that isn't here, the answer is almost always "use a component class" or "extend the component", not "add a utility". All values reference tokens from tokens.css. Hardcoded values are limited to display/positioning keywords (e.g. `display: none`) where a token would be meaningless. Section index: 1. Spacing helpers 2. Display helpers 3. Flex helpers 4. Text helpers 5. Visibility / accessibility 6. Overflow ============================================================ */ /* ============================================================ 1. SPACING HELPERS ============================================================ Margin top/bottom, horizontal-auto centering, and gap. Each number maps to a --space-* token. Indices match the token scale (mt-1 → --space-1 = 2px, etc.) so the relationship between class name and value is the same everywhere. */ .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); } .mt-7 { margin-top: var(--space-7); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-5 { margin-bottom: var(--space-5); } .mb-6 { margin-bottom: var(--space-6); } .mb-7 { margin-bottom: var(--space-7); } .mb-8 { margin-bottom: var(--space-8); } .mx-auto { margin-left: auto; margin-right: auto; } .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } /* ============================================================ 2. DISPLAY HELPERS ============================================================ */ .hidden { display: none; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } /* ============================================================ 3. FLEX HELPERS ============================================================ Cross-axis (items-*), main-axis (justify-*), child sizing (flex-1), and direction (flex-col). Intentionally minimal — no flex-wrap, no items-stretch, no justify-around. Components handle anything more specific. */ .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .flex-1 { flex: 1; } .flex-col { flex-direction: column; } /* ============================================================ 4. TEXT HELPERS ============================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } /* Single-line ellipsis. Requires the element (or its parent) to have a constrained width, otherwise ellipsis never triggers — that's a usage detail, not a CSS bug. */ .text-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .text-small { font-size: var(--font-size-small); } .text-dim { color: var(--color-text-dim); } .text-muted { color: var(--color-text-secondary); } /* ============================================================ 5. VISIBILITY / ACCESSIBILITY ============================================================ .sr-only is the canonical "visually hidden but accessible to assistive tech" pattern. Used for icon-only buttons that need a label, skip links, etc. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ 6. OVERFLOW ============================================================ */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } .overflow-x-auto { overflow-x: auto; } /* ============================================================ SUMMARY ------------------------------------------------------------ What's in this file: §1 Spacing — mt-0..8, mb-0..8 (mapped to --space-0..8), mx-auto, gap-1..4. §2 Display — hidden, block, inline-block, flex, inline-flex, grid. §3 Flex — items-{center,start,end}, justify-{between,center,end}, flex-1, flex-col. §4 Text — text-{center,right,left}, text-truncate, text-small, text-dim, text-muted. §5 Accessibility — sr-only. §6 Overflow — overflow-{hidden,auto}, overflow-x-auto. Decisions almost made differently: - Considered adding `!important` on every utility so they reliably win over component-defined properties. Skipped — these utilities should have ordinary cascade behavior. If a component defines `margin-top` and a utility wants to override, the page author is expected to load utilities.css after components.css and rely on cascade order. Importance escalates a war that hasn't started yet. - Considered horizontal margin utilities (.ml-*, .mr-*). Skipped — the prompt only specifies mt/mb. Horizontal rhythm in components is handled by gap and component padding, which is the right answer. - Considered .gap-0 and .gap-{5,6,7,8}. Skipped — the prompt caps gap at 1..4. Components needing a 16px or larger gap (like .form-grid or card grids) define it inline. - Considered .items-stretch (the flex default). Skipped — it's the default, no utility needed. - Considered .justify-start (also the default). Skipped — same reason. - Considered a .visually-hidden alias for .sr-only. Skipped — one canonical name avoids drift. - Considered .text-uppercase / .text-bold helpers. Skipped — uppercase + tracked labels are component- level (chips, eyebrows, section headers), and weight is best handled inline or via component classes. - Considered .w-full / .h-full shortcuts. Skipped — these creep toward Tailwind. Layout primitives in layout.css already provide `flex: 1` regions for full-fill behavior; arbitrary width:100% on a leaf element should be a one-off inline style or a component-specific rule. - Considered .flex-row (the default) and .flex-wrap. Skipped — the prompt only specifies .flex-col, and flex-wrap is rare enough that components own it. - .text-truncate vs separate .truncate / .nowrap / .text-ellipsis. Single combined helper is what the prompt asks for and what 95% of usage actually wants. Conflicts / overlaps flagged: - None with components.css or layout.css. Utility class names use a flat, prefix-free namespace (.mt-4, .flex, .text-truncate) that doesn't collide with BEM block names in components.css (.btn, .chip, .modal, etc.) or layout class names (.app, .page, .grid--cards). The .grid utility (display: grid) and .grid--cards layout class use different selectors — .grid alone vs .grid--cards — so they coexist cleanly. ============================================================ */