/* * Restyles Hotwire Combobox to match the Deanin design system (Tailwind grays, * brand accent, rounded-lg inputs, soft dropdown shadow, dark mode). * * The gem renders most of its look through `--hw-*` custom properties, so we * mostly redefine those. This file MUST be linked AFTER `hw_combobox_style_tag` * in the layouts so these declarations win the cascade. * * Dark mode is keyed off the `.dark` class on (Jumpstart's convention). */ :root { --hw-component-bg-color: #ffffff; /* white */ --hw-option-bg-color: #ffffff; --hw-group-bg-color: #ffffff; --hw-border-color: #d1d5db; /* gray-300 */ --hw-active-bg-color: #f3f4f6; /* gray-100 */ --hw-group-color: #9ca3af; /* gray-400 */ --hw-focus-color: var(--color-brand-500, #2f86ea); --hw-invalid-color: #f43f5e; /* rose-500 */ --hw-border-radius: 0.5rem; /* rounded-lg */ --hw-font-size: 0.95rem; /* Fill the parent container instead of the default fixed 10rem. */ --hw-combobox-width: 100%; --hw-text-color: #111827; /* gray-900 */ --hw-placeholder-color: #9ca3af; /* gray-400 */ } /* Jumpstart's base.css sets a global `ul { list-style: disc }`, which puts bullets on the combobox option list. Strip list styling inside the combobox. */ .hw-combobox ul, .hw-combobox ol, .hw-combobox__listbox, .hw-combobox__dialog ul, .hw-combobox__option, .hw-combobox__group { list-style: none; margin: 0; } /* Make the field stretch to its container. Keep the gem's inline-flex column layout (label stacked above the input wrapper) — only widen it. */ .hw-combobox { width: 100%; gap: 0; } .hw-combobox__input { width: 100%; } /* Search widgets read as a search bar: magnifying glass instead of a chevron (the handle still becomes an "x" to clear once text is entered). Scoped to .hw-search so any future select-style comboboxes keep their chevron. */ .hw-search { --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E"); } .hw-combobox__main__wrapper { padding: 0.55rem calc(var(--hw-handle-width) + var(--hw-padding--slimmer)) 0.55rem 0.875rem; width: 100%; transition: box-shadow 0.15s ease, border-color 0.15s ease; } .hw-combobox__main__wrapper:focus-within { border-color: var(--hw-focus-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-focus-color) 25%, transparent); } .hw-combobox__input { color: var(--hw-text-color); background-color: transparent; } .hw-combobox__input::placeholder { color: var(--hw-placeholder-color); } /* Dropdown panel: soft elevated card like the account menu. */ .hw-combobox__listbox { background-color: var(--hw-component-bg-color); top: calc(100% + 0.375rem); padding: 0.25rem; box-shadow: 0 12px 28px -8px rgba(17, 24, 39, 0.18), 0 6px 12px -8px rgba(17, 24, 39, 0.12); } .hw-combobox__listbox:has([role="option"]:not([hidden])) { border-color: var(--hw-border-color); } .hw-combobox__option { color: var(--hw-text-color); border-radius: 0.375rem; padding: 0.5rem 0.625rem; } .hw-combobox__option:hover, .hw-combobox__option--navigated, .hw-combobox__option--selected { background-color: var(--hw-active-bg-color); } .hw-combobox__group__label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hw-group-color); padding: 0.5rem 0.625rem 0.25rem; } /* Mobile/small-viewport dialog. */ .hw-combobox__dialog { background-color: var(--hw-component-bg-color); border-radius: 0.75rem; } .hw-combobox__dialog__input { color: var(--hw-text-color); background-color: var(--hw-component-bg-color); } .hw-combobox__dialog__listbox [role="option"] { color: var(--hw-text-color); } /* ----------------------------------------------------------------------- * * Dark mode — Jumpstart sets the `dark` class on . * ----------------------------------------------------------------------- */ .dark { --hw-component-bg-color: #111827; /* gray-900 */ --hw-option-bg-color: #111827; --hw-group-bg-color: #111827; --hw-border-color: #374151; /* gray-700 */ --hw-active-bg-color: #1f2937; /* gray-800 */ --hw-group-color: #6b7280; /* gray-500 */ --hw-focus-color: var(--color-brand-400, #52a3f4); --hw-text-color: #f3f4f6; /* gray-100 */ --hw-placeholder-color: #6b7280; /* gray-500 */ /* Lighter chevron / clear icons so they read on dark backgrounds. */ --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E"); --hw-handle-image--queried: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E"); } .dark .hw-combobox__listbox { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.55), 0 6px 12px -8px rgba(0, 0, 0, 0.5); } .dark .hw-search { --hw-handle-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m21 21-4.35-4.35M11 19a8 8 0 1 1 0-16 8 8 0 0 1 0 16Z'/%3E%3C/svg%3E"); }