create-starlight-cms 0.9.0

package/template/src/admin/components/tiptap-ui/search-and-replace/search-and-replace.scss

@@ -0,0 +1,300 @@
+.tiptap-search-replace {
+  --tiptap-search-replace-count-color: var(--tt-gray-light-a-400);
+  --tiptap-search-replace-option-text-color: var(--tt-gray-light-a-600);
+  --tiptap-search-replace-option-icon-color: var(--tt-gray-light-a-500);
+  --tiptap-search-replace-option-hover-bg-color: var(--tt-gray-light-a-200);
+  --tiptap-search-replace-kbd-bg: var(--white);
+  --tiptap-search-replace-kbd-border: var(--tt-gray-light-a-200);
+  --tiptap-search-replace-kbd-color: var(--tt-gray-light-a-500);
+  --tiptap-search-replace-help-bg: var(--tt-gray-light-100);
+  --tiptap-search-replace-help-label-color: var(--tt-gray-light-a-500);
+  --tiptap-search-replace-code-bg: var(--tt-gray-light-a-100);
+  --tiptap-search-replace-code-border: var(--tt-gray-light-a-200);
+  --tiptap-search-replace-code-color: var(--tt-gray-light-a-700);
+  --tiptap-search-replace-focus-border: var(--tt-brand-color-500);
+  --tiptap-search-replace-focus-ring: color-mix(
+    in srgb,
+    var(--tt-brand-color-500) 20%,
+    transparent
+  );
+
+  width: 19rem;
+  max-width: 100%;
+}
+
+.dark .tiptap-search-replace {
+  --tiptap-search-replace-count-color: var(--tt-gray-dark-a-400);
+  --tiptap-search-replace-option-text-color: var(--tt-gray-dark-a-600);
+  --tiptap-search-replace-option-icon-color: var(--tt-gray-dark-a-500);
+  --tiptap-search-replace-option-hover-bg-color: var(--tt-gray-dark-a-200);
+  --tiptap-search-replace-kbd-bg: var(--tt-gray-dark-a-50);
+  --tiptap-search-replace-kbd-border: var(--tt-gray-dark-a-200);
+  --tiptap-search-replace-kbd-color: var(--tt-gray-dark-a-500);
+  --tiptap-search-replace-help-bg: var(--tt-gray-dark-100);
+  --tiptap-search-replace-help-label-color: var(--tt-gray-dark-a-500);
+  --tiptap-search-replace-code-bg: var(--tt-gray-dark-a-100);
+  --tiptap-search-replace-code-border: var(--tt-gray-dark-a-200);
+  --tiptap-search-replace-code-color: var(--tt-gray-dark-a-700);
+  --tiptap-search-replace-focus-border: var(--tt-brand-color-400);
+  --tiptap-search-replace-focus-ring: color-mix(
+    in srgb,
+    var(--tt-brand-color-400) 25%,
+    transparent
+  );
+}
+
+.tiptap-card-body.tiptap-search-replace-body {
+  width: 100%;
+  padding: 0;
+}
+
+.tiptap-search-replace-query-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.tiptap-search-replace[data-open="true"] {
+  animation:
+    fadeIn 150ms cubic-bezier(0.16, 1, 0.3, 1),
+    zoomIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.tiptap-search-replace[data-open="false"] {
+  display: none;
+}
+
+/* On narrow screens the panel may stretch to the available width */
+@media (max-width: 480px) {
+  .tiptap-search-replace {
+    width: 100%;
+  }
+}
+
+/* ── Header ─────────────────────────────────────────────────── */
+.tiptap-card-header.tiptap-search-replace-header {
+  gap: 0.25rem;
+  border: 0;
+}
+
+.tiptap-search-replace-count {
+  font-size: 0.625rem;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  color: var(--tiptap-search-replace-count-color);
+  padding-left: 0.625rem;
+  white-space: nowrap;
+}
+
+.tiptap-search-replace-nav-group {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: auto;
+}
+
+/* ── Fields and options ─────────────────────────────────────── */
+.tiptap-search-replace-inputs,
+.tiptap-search-replace-options,
+.tiptap-search-replace-regex-toggle {
+  display: flex;
+  flex-direction: column;
+  padding-inline: 0.375rem;
+}
+
+.tiptap-search-replace-inputs,
+.tiptap-search-replace-regex-toggle {
+  gap: 0.25rem;
+}
+
+.tiptap-search-replace-input-group {
+  border-radius: var(--tt-radius-lg);
+}
+
+.tiptap-search-replace-input-group:has(
+  [data-slot="tiptap-input-group-control"]:focus-visible
+) {
+  border-color: var(--tiptap-search-replace-focus-border);
+}
+
+/* The ↵ badge is only shown while its input is focused */
+.tiptap-search-replace-keyboard-hint-addon {
+  display: none;
+}
+
+.tiptap-search-replace-input-group:focus-within
+  .tiptap-search-replace-keyboard-hint-addon {
+  display: flex;
+}
+
+.tiptap-search-replace-keyboard-hint {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1rem;
+  padding: 0.125rem 0.25rem 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--tiptap-search-replace-kbd-color);
+  background-color: var(--tiptap-search-replace-kbd-bg);
+  border: 1px solid var(--tiptap-search-replace-kbd-border);
+}
+
+.tiptap-input-group-addon > kbd.tiptap-search-replace-keyboard-hint {
+  border-radius: var(--tt-radius-xs);
+}
+
+.tiptap-search-replace-regex-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  width: 100%;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--tiptap-search-replace-option-text-color);
+  cursor: pointer;
+  transition: background-color 150ms ease;
+}
+
+/* ── Regex toggle & explanation box ─────────────────────────── */
+.tiptap-search-replace-regex-toggle-row {
+  padding: 0.5rem 0.625rem;
+}
+
+.tiptap-search-replace-regex-toggle-label {
+  flex: 1;
+}
+
+.tiptap-search-replace-regex-help,
+.tiptap-search-replace-regex-help-section {
+  display: flex;
+  flex-direction: column;
+}
+
+.tiptap-search-replace-regex-help {
+  padding: 1rem 0.375rem;
+  gap: 0.375rem;
+  border-radius: var(--tt-radius-lg, 0.75rem);
+  background-color: var(--tiptap-search-replace-help-bg);
+}
+
+.tiptap-search-replace-regex-help-section {
+  gap: 0.75rem;
+}
+
+/* Indented to line up with the example buttons' inner text */
+.tiptap-search-replace-regex-help-label {
+  padding-inline: 0.375rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--tiptap-search-replace-help-label-color);
+}
+
+/* Local to this box on purpose: a small ghost button whose label mixes
+   plain text with code chips is too specific for a shared primitive. */
+.tiptap-search-replace-regex-example-list.tiptap-button-group:has(
+    > [data-slot="tiptap-button-group"]
+  ) {
+  gap: 0.25rem;
+}
+
+.tiptap-search-replace-regex-example-list,
+.tiptap-search-replace-regex-example-row {
+  width: 100%;
+}
+
+.tiptap-search-replace-regex-example-button {
+  flex: 1;
+}
+
+.tiptap-search-replace-regex-example-button code {
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--tt-radius-xs, 0.25rem);
+  background-color: var(--tiptap-search-replace-code-bg);
+  border: 1px solid var(--tiptap-search-replace-code-border);
+  color: var(--tiptap-search-replace-code-color);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.688rem;
+}
+
+.tiptap-search-replace-regex-help-separator {
+  margin-block: 0.25rem;
+}
+
+.tiptap-search-replace-regex-docs-link {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.375rem;
+  border-radius: var(--tt-radius-md, 0.375rem);
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--tiptap-search-replace-option-text-color);
+  text-decoration: none;
+  transition: background-color 150ms ease;
+}
+
+.tiptap-search-replace-regex-toggle-row:hover,
+.tiptap-search-replace-regex-docs-link:hover {
+  background-color: var(--tiptap-search-replace-option-hover-bg-color);
+}
+
+.tiptap-search-replace-regex-docs-link:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--tiptap-search-replace-focus-ring);
+}
+
+.tiptap-search-replace-regex-toggle-row:has(
+  [data-slot="tiptap-switch"][data-disabled]
+) {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.tiptap-search-replace-regex-docs-link-icon {
+  width: 0.875rem;
+  height: 0.875rem;
+  color: var(--tiptap-search-replace-option-icon-color);
+}
+
+/* ── Actions ────────────────────────────────────────────────── */
+.tiptap-search-replace-actions {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 0.125rem 0.75rem 0.625rem;
+}
+
+/* ── Reduced motion ─────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .tiptap-search-replace,
+  .tiptap-search-replace * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/* ── Result highlights ──────────────────────────────────────── */
+
+/* The extension's injected CSS is disabled (`injectCSS: false`); results
+   are tinted from the brand color, the current one twice as strong. Layout
+   concerns (keeping the scrolled-to match clear of sticky chrome) are the
+   consumer's — e.g. pass `scrollIntoViewOptions={{ block: "center" }}`. */
+.find-and-replace-result {
+  background-color: color-mix(
+    in srgb,
+    var(--tt-brand-color-300) 20%,
+    transparent
+  );
+}
+
+.find-and-replace-result-current {
+  background-color: color-mix(
+    in srgb,
+    var(--tt-color-green-base) 40%,
+    transparent
+  );
+}