shkim4andClaude Opus 5.5
e27385e0f0
- Ship an AI guide in the package (ai/: usage rules, component catalog, design rules, composition patterns) via package.json files. - Add examples A-D that import only public exports: default header, viewer header, feature header, and a consumer-side search extension that reuses SWHeaderInput and the public SW tokens. - Add SW-only checks: docs/API consistency, tarball consumer project (React 19 + TS + Vite typecheck/build) and a browser check (27/27). - No runtime source or public API change; README gains a pointer section. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
49 lines
1.9 KiB
CSS
49 lines
1.9 KiB
CSS
/* Consumer extension styles. Every value is a public SW token (see ../DESIGN_RULES.md); the
|
|
38px field height, 12px label / 14px bold value and 1px gradient hover ring follow the SW field rules. */
|
|
.app-sw-search {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 0 0 auto;
|
|
height: var(--hm-sw-header-field-height);
|
|
padding: 0 6px 0 11px;
|
|
border: 1px solid var(--hm-sw-header-property-border-color);
|
|
border-radius: var(--hm-sw-header-property-radius);
|
|
background: var(--hm-sw-header-property-background);
|
|
box-shadow: var(--hm-sw-header-property-shadow);
|
|
}
|
|
/* Hover: the bordered-control rule — the 1px border becomes the yellow gradient; nothing moves. */
|
|
.app-sw-search::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: calc(-1 * var(--hm-sw-header-hover-border-width));
|
|
padding: var(--hm-sw-header-hover-border-width);
|
|
border-radius: inherit;
|
|
background: var(--hm-sw-header-hover-border-gradient);
|
|
/* Ring only: the content box is cut out (prefixed first, the standard declaration last wins). */
|
|
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.app-sw-search:hover:not([data-disabled])::after { opacity: 1; }
|
|
.app-sw-search__text { display: flex; flex-direction: column; min-width: 0; }
|
|
.app-sw-search__label {
|
|
height: 14px;
|
|
font-size: var(--hm-sw-header-label-size);
|
|
line-height: 14px;
|
|
letter-spacing: 0.02em;
|
|
text-shadow: var(--hm-sw-header-label-outline);
|
|
}
|
|
.app-sw-search__button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: var(--hm-sw-header-property-radius);
|
|
}
|
|
/* Text-only hover / selected color, like the SW toggles. */
|
|
.app-sw-search__button:hover:not(:disabled) { color: var(--hm-sw-header-selected-color); }
|