@open-press/core 1.2.0 → 1.2.1

package/src/styles/openpress/workbench.css

@@ -1,27 +1,46 @@
+:where(
+  .openpress-workbench,
+  .openpress-public-viewer,
+  .openpress-slide-presenter,
+  .openpress-slide-public,
+  .openpress-workbench-dialog-backdrop
+) {
+  --openpress-workbench-bg: #141414;
+  --openpress-workbench-panel-bg: #171717;
+  --openpress-workbench-dialog-bg: #151716;
+  --openpress-workbench-surface: rgb(18 18 18 / 96%);
+  --openpress-workbench-surface-muted: rgb(255 255 255 / 4%);
+  --openpress-workbench-border: rgb(255 255 255 / 12%);
+  --openpress-workbench-border-muted: rgb(255 255 255 / 8%);
+  --openpress-workbench-text: rgb(242 242 238 / 94%);
+  --openpress-workbench-text-soft: rgb(226 229 230 / 86%);
+  --openpress-workbench-muted: rgb(160 166 173 / 70%);
+  --openpress-workbench-accent: rgb(240 182 76 / 92%);
+  --openpress-workbench-success: rgb(110 231 160 / 90%);
+  --openpress-workbench-danger: rgb(248 113 113 / 90%);
+  --openpress-workbench-radius-sm: 4px;
+  --openpress-workbench-radius-md: 6px;
+  --openpress-workbench-radius-pill: 999px;
+  --openpress-workbench-glass-bg: rgb(18 18 18 / 74%);
+  --openpress-workbench-glass-border: rgb(255 255 255 / 10%);
+  --openpress-workbench-glass-shadow: 0 18px 44px rgb(0 0 0 / 28%);
+  --openpress-workbench-glass-blur: blur(18px);
+}
+
 .openpress-workbench {
   display: block;
   min-height: 100vh;
-  background: #141414;
+  background: var(--openpress-workbench-bg);
   color: var(--openpress-text);
 }
 
-.openpress-public-shell {
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100dvh;
-  min-height: 100dvh;
-  overflow: hidden;
-  overscroll-behavior: none;
-}
-
 .openpress-workbench__stage {
   grid-area: main;
   min-width: 0;
   container-type: inline-size;
   padding: 0;
   overflow: hidden;
-  background: #141414;
+  background: var(--openpress-workbench-bg);
   scrollbar-width: none;
 }
 
@@ -31,141 +50,6 @@
   display: none;
 }
 
-.openpress-slide-presenter {
-  position: fixed;
-  inset: 0;
-  display: grid;
-  width: 100%;
-  height: 100dvh;
-  min-height: 100dvh;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at 50% 0, rgb(255 255 255 / 8%), transparent 42%),
-    #070707;
-  color: rgb(245 245 242 / 92%);
-  overscroll-behavior: none;
-}
-
-.openpress-slide-presenter__stage {
-  position: relative;
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  cursor: pointer;
-}
-
-.openpress-reader-app.openpress-slide-presenter .reader-stage {
-  width: 100%;
-  height: 100%;
-  min-height: 0;
-  overflow: hidden;
-  background: transparent;
-  overscroll-behavior: contain;
-  scroll-snap-type: none;
-  scrollbar-width: none;
-}
-
-.openpress-reader-app.openpress-slide-presenter .reader-stage::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
-
-.openpress-reader-app.openpress-slide-presenter .reader-pages {
-  --openpress-page-gap: 0;
-  width: 100%;
-  height: 100%;
-  min-height: 100%;
-  align-content: center;
-  padding: 0;
-  align-items: center;
-  justify-items: center;
-}
-
-.openpress-reader-app.openpress-slide-presenter .openpress-html-page {
-  min-height: 0;
-  scroll-margin-top: 0;
-  scroll-snap-align: center;
-}
-
-.openpress-reader-app.openpress-slide-presenter .openpress-html-page__html {
-  box-shadow:
-    0 28px 80px rgb(0 0 0 / 34%),
-    0 0 0 1px rgb(255 255 255 / 10%);
-}
-
-.openpress-slide-presenter__hud {
-  position: fixed;
-  right: 18px;
-  bottom: 18px;
-  z-index: 40;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 999px;
-  padding: 6px;
-  background: rgb(18 18 18 / 74%);
-  box-shadow: 0 18px 44px rgb(0 0 0 / 28%);
-  backdrop-filter: blur(18px);
-  opacity: 1;
-  transform: translateY(0);
-  transition:
-    opacity 160ms ease,
-    transform 160ms ease;
-}
-
-.openpress-slide-presenter[data-openpress-present-ui="immersive"] {
-  cursor: none;
-}
-
-.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__stage {
-  cursor: none;
-}
-
-.openpress-slide-presenter[data-openpress-present-ui="immersive"] .openpress-slide-presenter__hud {
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(8px);
-}
-
-.openpress-slide-presenter__progress {
-  min-width: 64px;
-  padding: 0 10px;
-  color: rgb(245 245 242 / 72%);
-  font-family: var(--openpress-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
-  font-size: 12px;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  line-height: 30px;
-  text-align: center;
-}
-
-.openpress-slide-presenter__button {
-  display: inline-flex;
-  width: 30px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 999px;
-  padding: 0;
-  background: transparent;
-  color: rgb(245 245 242 / 68%);
-  cursor: pointer;
-}
-
-.openpress-slide-presenter__button:hover,
-.openpress-slide-presenter__button:focus-visible {
-  background: rgb(255 255 255 / 10%);
-  color: rgb(245 245 242 / 96%);
-}
-
-.openpress-slide-presenter__button svg {
-  width: 15px;
-  height: 15px;
-}
-
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app,
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-left,
 .openpress-public-viewer.openpress-workbench-shell.openpress-reader-app.is-closed-right,
@@ -197,1119 +81,6 @@
   grid-template-columns: 0 minmax(0, 1fr) 0;
 }
 
-.openpress-workbench-toolbar {
-  z-index: 30;
-  display: flex;
-  min-width: 0;
-  height: var(--openpress-workbench-toolbar-height, 44px);
-  min-height: 0;
-  grid-area: toolbar;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  border-bottom: 1px solid rgb(255 255 255 / 9%);
-  padding: 0 12px;
-  background: rgb(18 18 18 / 96%);
-  backdrop-filter: blur(18px);
-}
-
-.openpress-workbench-toolbar__content {
-  display: flex;
-  flex: 1 1 auto;
-  min-width: 0;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.openpress-workbench-toolbar__group {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  gap: 8px;
-}
-
-.openpress-workbench-toolbar__group--right {
-  justify-content: flex-end;
-}
-
-.openpress-workbench-toolbar__group--page {
-  flex: 1 1 auto;
-  justify-content: center;
-}
-
-.openpress-workbench-toolbar-panel-toggle {
-  display: inline-flex;
-  width: 30px;
-  height: 30px;
-  flex: 0 0 auto;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 0;
-  background: transparent;
-  color: #8e949b;
-  cursor: pointer;
-  transition:
-    color 160ms ease,
-    transform 160ms ease;
-}
-
-.openpress-workbench-toolbar-panel-toggle:hover {
-  color: #f2f2f0;
-}
-
-.openpress-workbench-toolbar-panel-toggle:active {
-  transform: translateY(1px);
-}
-
-.openpress-workbench-toolbar-panel-toggle svg {
-  width: 14px;
-  height: 14px;
-}
-
-.openpress-workbench-page-geometry,
-.openpress-workbench-zoom-control {
-  display: inline-flex;
-  overflow: hidden;
-  height: 30px;
-  max-width: min(34vw, 280px);
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 0 8px;
-  background: transparent;
-  color: #aeb3b8;
-  font: inherit;
-  line-height: 1;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease,
-    transform 160ms ease;
-}
-
-.openpress-workbench-page-geometry:hover,
-.openpress-workbench-zoom-control:hover {
-  color: #f2f2f0;
-}
-
-.openpress-workbench-page-geometry:active,
-.openpress-workbench-zoom-control:active {
-  transform: translateY(1px);
-}
-
-.openpress-workbench-page-geometry svg,
-.openpress-workbench-zoom-control svg {
-  width: 13px;
-  height: 13px;
-  flex: 0 0 auto;
-  color: currentColor;
-}
-
-.openpress-workbench-page-geometry__label,
-.openpress-workbench-page-geometry__dimensions {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-workbench-page-geometry__label {
-  color: #d8dadd;
-  font-size: 11px;
-  font-weight: 560;
-}
-
-.openpress-workbench-page-geometry__dimensions {
-  color: #7f858c;
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  font-weight: 500;
-}
-
-.openpress-workbench-zoom-control {
-  max-width: min(20vw, 92px);
-  color: #9fa5ab;
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  font-weight: 650;
-}
-
-.openpress-workbench-zoom-control-wrap {
-  position: relative;
-  display: inline-flex;
-}
-
-.openpress-workbench-zoom-control__chevron {
-  width: 12px !important;
-  height: 12px !important;
-  opacity: 0.7;
-}
-
-.openpress-workbench-zoom-control[aria-expanded="true"],
-.openpress-workbench-zoom-control[data-openpress-toolbar-active="true"] {
-  border-color: rgb(242 242 240 / 16%);
-  background: rgb(242 242 240 / 7%);
-  color: #f2f2f0;
-}
-
-.openpress-workbench-zoom-menu {
-  position: absolute;
-  top: calc(100% + 8px);
-  left: 50%;
-  z-index: 80;
-  display: grid;
-  width: 188px;
-  gap: 6px;
-  border: 1px solid rgb(255 255 255 / 16%);
-  border-radius: 10px;
-  padding: 8px;
-  background: rgb(46 47 46 / 96%);
-  box-shadow: 0 18px 42px rgb(0 0 0 / 34%);
-  color: rgb(245 245 242 / 88%);
-  transform: translateX(-50%);
-  backdrop-filter: blur(18px);
-}
-
-.openpress-workbench-zoom-menu__section {
-  display: grid;
-  gap: 2px;
-}
-
-.openpress-workbench-zoom-menu__divider {
-  height: 1px;
-  margin: 4px 6px;
-  background: rgb(255 255 255 / 14%);
-}
-
-.openpress-workbench-zoom-menu__item {
-  display: grid;
-  grid-template-columns: 18px 18px minmax(0, 1fr);
-  min-height: 30px;
-  align-items: center;
-  gap: 9px;
-  border: 0;
-  border-radius: 6px;
-  padding: 0 8px;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1;
-  text-align: left;
-  cursor: pointer;
-}
-
-.openpress-workbench-zoom-menu__item:hover,
-.openpress-workbench-zoom-menu__item:focus-visible {
-  background: rgb(255 255 255 / 9%);
-  outline: 0;
-}
-
-.openpress-workbench-zoom-menu__item[aria-checked="true"] {
-  color: #ffffff;
-}
-
-.openpress-workbench-zoom-menu__item svg {
-  width: 15px;
-  height: 15px;
-}
-
-.openpress-workbench-zoom-menu__check {
-  display: grid;
-  width: 18px;
-  height: 18px;
-  place-items: center;
-}
-
-.openpress-workbench-zoom-menu__spacer {
-  width: 18px;
-  height: 1px;
-}
-
-.openpress-workbench-toolbar-action {
-  position: relative;
-  display: inline-flex;
-  overflow: hidden;
-  height: 30px;
-  width: 30px;
-  min-width: 30px;
-  max-width: 30px;
-  align-items: center;
-  justify-content: center;
-  gap: 0;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 0;
-  background: transparent;
-  color: #aeb3b8;
-  font: inherit;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 1;
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition:
-    border-color 160ms ease,
-    background 160ms ease,
-    color 160ms ease,
-    transform 160ms ease;
-}
-
-.openpress-workbench-toolbar-action:hover:not(:disabled) {
-  color: #f2f2f0;
-}
-
-.openpress-workbench-toolbar-action:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.openpress-workbench-toolbar-action:disabled {
-  cursor: progress;
-  color: #a7adb2;
-  opacity: 0.62;
-}
-
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] {
-  width: auto;
-  min-width: 30px;
-  max-width: min(34vw, 300px);
-  gap: 7px;
-  padding: 0 10px;
-}
-
-.openpress-workbench-toolbar-action[data-openpress-toolbar-active="true"] {
-  border-color: rgb(240 182 76 / 34%);
-  background: rgb(240 182 76 / 8%);
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-workbench-toolbar-action[data-openpress-deploy-status="online"] {
-  color: rgb(110 231 160 / 88%);
-}
-
-.openpress-workbench-toolbar-action[data-openpress-deploy-status="dirty"],
-.openpress-workbench-toolbar-action[data-openpress-deploy-status="deploying"] {
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-workbench-toolbar-action[data-openpress-deploy-status="failed"] {
-  color: rgb(248 113 113 / 90%);
-}
-
-.openpress-workbench-toolbar-action[data-deploy-status="deploying"]::after {
-  position: absolute;
-  inset: 3px;
-  border: 1px solid rgb(240 182 76 / 36%);
-  border-top-color: rgb(240 182 76 / 96%);
-  border-radius: 999px;
-  animation: openpress-toolbar-deploy-spin 0.9s linear infinite;
-  content: "";
-}
-
-.openpress-workbench-toolbar-action[data-deploy-status="deploying"] svg {
-  animation: openpress-toolbar-deploy-pulse 0.9s ease-in-out infinite alternate;
-}
-
-.openpress-workbench-toolbar-action svg {
-  width: 13px;
-  height: 13px;
-  flex: 0 0 auto;
-  color: currentColor;
-}
-
-.openpress-workbench-toolbar-action__label,
-.openpress-workbench-toolbar-action .openpress-dev-pdf-status,
-.openpress-workbench-toolbar-action .openpress-dev-deploy-status,
-.openpress-workbench-toolbar-action .openpress-dev-edit-status,
-.openpress-workbench-toolbar-action .openpress-dev-inspector-status {
-  display: none;
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-workbench-toolbar-action__label,
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-pdf-status,
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-deploy-status,
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-edit-status,
-.openpress-workbench-toolbar-action[data-openpress-toolbar-expanded="true"] .openpress-dev-inspector-status {
-  display: inline-flex;
-}
-
-.openpress-workbench-toolbar-action .openpress-dev-pdf-status,
-.openpress-workbench-toolbar-action .openpress-dev-deploy-status,
-.openpress-workbench-toolbar-action .openpress-dev-edit-status,
-.openpress-workbench-toolbar-action .openpress-dev-inspector-status {
-  max-width: 150px;
-  font-size: 10px;
-}
-
-.openpress-dev-edit-status {
-  align-items: center;
-  gap: 5px;
-}
-
-.openpress-dev-edit-status--toolbar {
-  display: inline-flex;
-  max-width: 132px;
-  min-height: 24px;
-  align-items: center;
-  gap: 6px;
-  overflow: hidden;
-  border: 1px solid rgb(240 182 76 / 18%);
-  border-radius: 4px;
-  padding: 0 8px;
-  background: rgb(240 182 76 / 7%);
-  color: rgb(240 182 76 / 88%);
-  font-size: 10px;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-dev-edit-status[data-openpress-edit-status="failed"] {
-  color: rgb(248 113 113 / 92%);
-}
-
-.openpress-dev-edit-status__spinner {
-  width: 9px;
-  height: 9px;
-  flex: 0 0 auto;
-  border: 1px solid rgb(240 182 76 / 32%);
-  border-top-color: rgb(240 182 76 / 96%);
-  border-radius: 999px;
-  animation: openpress-toolbar-deploy-spin 0.8s linear infinite;
-}
-
-.openpress-workbench-toolbar > .openpress-dev-inspector-status {
-  max-width: 180px;
-  flex: 0 1 auto;
-  color: rgb(198 204 210 / 70%);
-  font-size: 10px;
-}
-
-.openpress-dev-deploy-status--toolbar {
-  max-width: 86px;
-  overflow: hidden;
-  color: rgb(240 182 76 / 86%);
-  text-overflow: ellipsis;
-}
-
-.openpress-inline-source-editor-layer {
-  position: fixed;
-  inset: 0;
-  z-index: 980;
-  pointer-events: none;
-}
-
-.openpress-inline-source-editor {
-  position: fixed;
-  display: grid;
-  gap: 10px;
-  max-width: calc(100vw - 28px);
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 6px;
-  padding: 12px;
-  background: #151716;
-  color: rgb(242 242 238 / 94%);
-  box-shadow: 0 18px 46px rgb(0 0 0 / 34%);
-  pointer-events: auto;
-}
-
-.openpress-inline-source-editor__header,
-.openpress-inline-source-editor__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  min-width: 0;
-}
-
-.openpress-inline-source-editor__header > div {
-  display: grid;
-  gap: 4px;
-  min-width: 0;
-}
-
-.openpress-inline-source-editor__header strong {
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-inline-source-editor__eyebrow {
-  color: rgb(174 179 184 / 58%);
-  font-family: var(--openpress-font-mono);
-  font-size: 9px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-}
-
-.openpress-inline-source-editor__header button,
-.openpress-inline-source-editor__footer button {
-  min-height: 28px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 4px;
-  background: transparent;
-  color: rgb(242 242 238 / 82%);
-  font: inherit;
-  font-size: 11px;
-  cursor: pointer;
-}
-
-.openpress-inline-source-editor__header button {
-  width: 28px;
-  padding: 0;
-  font-size: 15px;
-}
-
-.openpress-inline-source-editor__footer button {
-  padding: 0 10px;
-}
-
-.openpress-inline-source-editor__footer button:last-child {
-  border-color: rgb(240 182 76 / 28%);
-  background: rgb(240 182 76 / 9%);
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-inline-source-editor__footer button:disabled {
-  cursor: progress;
-  opacity: 0.54;
-}
-
-.openpress-inline-source-editor textarea {
-  width: 100%;
-  min-height: 126px;
-  resize: vertical;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 4px;
-  padding: 10px;
-  background: rgb(0 0 0 / 24%);
-  color: rgb(242 242 238 / 92%);
-  font-family: var(--openpress-font-mono);
-  font-size: 11px;
-  line-height: 1.55;
-  outline: none;
-}
-
-.openpress-inline-source-editor textarea:focus {
-  border-color: rgb(240 182 76 / 42%);
-  box-shadow: 0 0 0 1px rgb(240 182 76 / 16%);
-}
-
-.openpress-inline-source-editor__footer > span {
-  min-width: 0;
-  overflow: hidden;
-  color: rgb(174 179 184 / 70%);
-  font-size: 10px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-inline-source-editor__footer > span[data-openpress-source-editor-status="saving"] {
-  color: rgb(240 182 76 / 88%);
-}
-
-.openpress-inline-source-editor__footer > span[data-openpress-source-editor-status="failed"] {
-  color: rgb(248 113 113 / 90%);
-}
-
-.openpress-inline-source-editor__footer > div {
-  display: inline-flex;
-  gap: 6px;
-  flex: 0 0 auto;
-}
-
-.openpress-workbench-dialog-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  display: grid;
-  place-items: start center;
-  overflow: auto;
-  padding: calc(var(--openpress-workbench-toolbar-height, 44px) + 28px) 28px 28px;
-  background: rgb(0 0 0 / 54%);
-}
-
-.openpress-workbench-dialog {
-  position: relative;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  width: min(560px, calc(100vw - 56px));
-  max-height: calc(100vh - var(--openpress-workbench-toolbar-height, 44px) - 56px);
-  overflow: hidden;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 6px;
-  background: #151716;
-  color: rgb(242 242 238 / 94%);
-  box-shadow: 0 24px 68px rgb(0 0 0 / 42%);
-}
-
-/* The project preview surface needs more room for media thumbnails and
-   rendered component previews than the deploy/search default. */
-.openpress-workbench-dialog.openpress-project-preview-dialog {
-  width: min(860px, calc(100vw - 56px));
-}
-
-/* The project preview footer holds stacked action forms + a comment
-   composer instead of a row of buttons. Override the default
-   flex-row footer layout for this dialog only. */
-.openpress-workbench-dialog.openpress-project-preview-dialog .openpress-workbench-dialog__footer {
-  display: grid;
-  gap: 12px;
-  justify-content: stretch;
-  align-items: stretch;
-}
-
-.openpress-workbench-dialog::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 2px;
-  background: rgb(240 182 76 / 82%);
-  content: "";
-}
-
-.openpress-workbench-dialog__header,
-.openpress-workbench-dialog__footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.openpress-workbench-dialog__header {
-  align-items: flex-start;
-  padding: 18px 48px 14px 24px;
-}
-
-.openpress-workbench-dialog__footer {
-  padding: 14px 24px 18px;
-}
-
-.openpress-workbench-dialog__heading {
-  display: grid;
-  min-width: 0;
-  gap: 5px;
-}
-
-.openpress-workbench-dialog__eyebrow {
-  display: block;
-  color: rgb(160 166 173 / 62%);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.openpress-workbench-dialog__title-row {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  column-gap: 8px;
-  min-height: 20px;
-}
-
-.openpress-workbench-dialog h2 {
-  margin: 0;
-  color: rgb(242 242 240 / 94%);
-  font-size: 15px;
-  font-weight: 650;
-  line-height: 20px;
-}
-
-.openpress-workbench-dialog h2::before,
-.openpress-workbench-dialog h3::before {
-  display: none;
-  content: none;
-}
-
-.openpress-workbench-dialog__title-meta {
-  display: flex;
-  min-width: 0;
-  min-height: 20px;
-  align-items: center;
-}
-
-.openpress-workbench-dialog__close {
-  position: absolute;
-  top: 9px;
-  right: 9px;
-  display: inline-flex;
-  width: 30px;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 0;
-  background: transparent;
-  color: #aeb3b8;
-  cursor: pointer;
-}
-
-.openpress-workbench-dialog__close:hover {
-  color: #f2f2f0;
-}
-
-.openpress-workbench-dialog__close svg {
-  width: 14px;
-  height: 14px;
-}
-
-.openpress-deploy-dialog {
-  width: min(420px, calc(100vw - 56px));
-  gap: 12px;
-  padding: 16px;
-}
-
-.openpress-deploy-dialog__source {
-  display: inline-flex;
-  min-height: 19px;
-  align-items: center;
-  max-width: 100%;
-  overflow: hidden;
-  border: 1px solid rgb(110 231 160 / 18%);
-  border-radius: 999px;
-  padding: 0 7px;
-  background: rgb(110 231 160 / 7%);
-  color: rgb(144 238 177 / 88%);
-  font-size: 10px;
-  font-weight: 620;
-  line-height: 1;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-deploy-dialog dl {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  border-top: 1px solid rgb(255 255 255 / 8%);
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
-  padding: 12px 0;
-}
-
-.openpress-deploy-dialog dl div {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: 78px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-}
-
-.openpress-deploy-dialog dt,
-.openpress-deploy-dialog dd {
-  margin: 0;
-  min-width: 0;
-  font-size: 11px;
-  line-height: 1.35;
-}
-
-.openpress-deploy-dialog dt {
-  color: rgb(150 156 163 / 68%);
-}
-
-.openpress-deploy-dialog dd {
-  overflow: hidden;
-  color: rgb(226 229 230 / 86%);
-  text-align: left;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-deploy-dialog dd a {
-  color: rgb(214 218 222 / 92%);
-  text-decoration: none;
-}
-
-.openpress-deploy-dialog dd a:hover {
-  color: rgb(240 182 76 / 94%);
-  text-decoration: underline;
-  text-underline-offset: 3px;
-}
-
-.openpress-deploy-dialog__status {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 6px;
-  color: rgb(198 204 210 / 78%);
-}
-
-.openpress-deploy-dialog__status::before {
-  width: 6px;
-  height: 6px;
-  flex: 0 0 auto;
-  border-radius: 999px;
-  background: currentColor;
-  content: "";
-}
-
-.openpress-deploy-dialog__status[data-openpress-deploy-status="online"] {
-  color: rgb(110 231 160 / 90%);
-}
-
-.openpress-deploy-dialog__status[data-openpress-deploy-status="dirty"],
-.openpress-deploy-dialog__status[data-openpress-deploy-status="deploying"] {
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-deploy-dialog__status[data-openpress-deploy-status="failed"] {
-  color: rgb(248 113 113 / 90%);
-}
-
-.openpress-deploy-dialog__message {
-  margin: 0;
-  border-left: 2px solid rgb(248 113 113 / 76%);
-  padding: 6px 0 6px 10px;
-  color: rgb(248 113 113 / 88%);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.openpress-deploy-dialog .openpress-workbench-dialog__footer button {
-  display: inline-flex;
-  height: 30px;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 4px;
-  padding: 0 10px;
-  background: transparent;
-  color: rgb(226 229 230 / 86%);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 560;
-  cursor: pointer;
-}
-
-.openpress-deploy-dialog .openpress-workbench-dialog__footer button:hover:not(:disabled) {
-  border-color: rgb(240 182 76 / 34%);
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-deploy-dialog .openpress-workbench-dialog__footer button:disabled {
-  cursor: not-allowed;
-  opacity: 0.46;
-}
-
-.openpress-deploy-dialog .openpress-workbench-dialog__footer svg {
-  width: 13px;
-  height: 13px;
-}
-
-.openpress-search-dialog-backdrop {
-  z-index: 1001;
-  padding: calc(var(--openpress-workbench-toolbar-height, 44px) + 24px) 24px 24px;
-  background: rgb(0 0 0 / 46%);
-}
-
-.openpress-search-dialog {
-  width: min(640px, calc(100vw - 48px));
-  max-height: min(72vh, 760px);
-  grid-template-rows: auto auto minmax(0, 1fr);
-  box-shadow: 0 24px 72px rgb(0 0 0 / 44%);
-}
-
-.openpress-search-dialog__header {
-  gap: 16px;
-  padding: 16px 48px 10px 16px;
-}
-
-.openpress-search-dialog__form {
-  display: grid;
-  gap: 10px;
-  border-top: 1px solid rgb(255 255 255 / 8%);
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
-  padding: 12px 16px;
-}
-
-.openpress-search-dialog__input-row {
-  display: grid;
-  grid-template-columns: 16px minmax(0, 1fr) auto;
-  gap: 8px;
-  align-items: center;
-  min-height: 34px;
-  border: 1px solid rgb(255 255 255 / 12%);
-  border-radius: 5px;
-  padding: 0 7px 0 10px;
-  background: rgb(255 255 255 / 4%);
-}
-
-.openpress-search-dialog__input-row > svg {
-  width: 13px;
-  height: 13px;
-  color: rgb(160 166 173 / 70%);
-}
-
-.openpress-search-dialog__input-row input {
-  min-width: 0;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: rgb(242 242 238 / 94%);
-  font: inherit;
-  font-size: 12px;
-  outline: 0;
-}
-
-.openpress-search-dialog__input-row input::placeholder {
-  color: rgb(160 166 173 / 54%);
-}
-
-.openpress-search-dialog__input-row button,
-.openpress-search-dialog__scope button {
-  display: inline-flex;
-  height: 26px;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  padding: 0 9px;
-  background: transparent;
-  color: rgb(214 218 222 / 82%);
-  font: inherit;
-  font-size: 11px;
-  font-weight: 560;
-  cursor: pointer;
-}
-
-.openpress-search-dialog__input-row button:hover:not(:disabled),
-.openpress-search-dialog__scope button:hover {
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-search-dialog__input-row button:disabled {
-  cursor: progress;
-  opacity: 0.62;
-}
-
-.openpress-search-dialog__input-row button svg {
-  width: 12px;
-  height: 12px;
-}
-
-.openpress-search-dialog__input-row button:disabled svg,
-.openpress-search-dialog__empty svg {
-  animation: openpress-search-spin 0.9s linear infinite;
-}
-
-.openpress-search-dialog__scope {
-  display: inline-flex;
-  width: fit-content;
-  align-items: center;
-  gap: 2px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 5px;
-  padding: 2px;
-  background: rgb(255 255 255 / 3%);
-}
-
-.openpress-search-dialog__scope button[data-openpress-search-scope-active="true"] {
-  border-color: rgb(240 182 76 / 26%);
-  background: rgb(240 182 76 / 9%);
-  color: rgb(240 182 76 / 92%);
-}
-
-.openpress-search-dialog__empty,
-.openpress-search-dialog__error {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin: 0;
-  padding: 18px 16px;
-  color: rgb(160 166 173 / 72%);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.openpress-search-dialog__empty svg {
-  width: 13px;
-  height: 13px;
-}
-
-.openpress-search-dialog__error {
-  color: rgb(248 113 113 / 88%);
-}
-
-.openpress-search-dialog__results {
-  min-height: 0;
-  overflow: auto;
-  padding: 12px 16px 16px;
-}
-
-.openpress-search-dialog__summary {
-  margin: 0 0 10px;
-  color: rgb(160 166 173 / 70%);
-  font-size: 11px;
-  line-height: 1.35;
-}
-
-.openpress-search-dialog__file {
-  display: grid;
-  gap: 7px;
-  margin: 0 0 12px;
-  padding-bottom: 12px;
-  border-bottom: 1px solid rgb(255 255 255 / 8%);
-}
-
-.openpress-search-dialog__file:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-  border-bottom: 0;
-}
-
-.openpress-search-dialog__file h3 {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: 14px minmax(0, 1fr) auto;
-  gap: 7px;
-  align-items: center;
-  margin: 0;
-  color: rgb(226 229 230 / 90%);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.25;
-}
-
-.openpress-search-dialog__file h3 svg {
-  width: 12px;
-  height: 12px;
-  color: rgb(240 182 76 / 82%);
-}
-
-.openpress-search-dialog__file h3 span {
-  overflow: hidden;
-  min-width: 0;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-search-dialog__file h3 small {
-  display: inline-flex;
-  min-width: 20px;
-  height: 18px;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 999px;
-  color: rgb(160 166 173 / 78%);
-  font-size: 10px;
-  font-weight: 650;
-}
-
-.openpress-search-dialog__file ol {
-  display: grid;
-  gap: 5px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.openpress-search-dialog__file li {
-  display: block;
-  min-width: 0;
-}
-
-.openpress-search-dialog__result {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  grid-template-columns: 44px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: baseline;
-  border-radius: 4px;
-  border: 1px solid transparent;
-  padding: 6px 7px;
-  background: rgb(255 255 255 / 3%);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.openpress-search-dialog__result:hover:not(:disabled) {
-  border-color: rgb(240 182 76 / 18%);
-  background: rgb(240 182 76 / 7%);
-}
-
-.openpress-search-dialog__result:disabled {
-  cursor: default;
-  opacity: 0.68;
-}
-
-.openpress-search-dialog__line {
-  color: rgb(160 166 173 / 74%);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  line-height: 1.35;
-}
-
-.openpress-search-dialog__preview {
-  overflow: hidden;
-  min-width: 0;
-  color: rgb(226 229 230 / 84%);
-  font-family: var(--openpress-font-mono);
-  font-size: 11px;
-  line-height: 1.45;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-search-dialog__page {
-  color: rgb(240 182 76 / 82%);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1.35;
-}
-
-.openpress-search-dialog__result:disabled .openpress-search-dialog__page {
-  color: rgb(160 166 173 / 58%);
-}
-
-@keyframes openpress-toolbar-deploy-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes openpress-search-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes openpress-toolbar-deploy-pulse {
-  from {
-    opacity: 0.58;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 .openpress-workbench-left-panel,
 .openpress-workbench-right-panel {
   min-width: 0;
@@ -1318,7 +89,7 @@
   max-height: none;
   margin: 0;
   align-self: stretch;
-  background: #171717;
+  background: var(--openpress-workbench-panel-bg);
 }
 
 .openpress-public-viewer.openpress-workbench-shell .openpress-workbench-left-panel {
@@ -1328,7 +99,7 @@
   height: auto;
   max-height: none;
   align-self: stretch;
-  border-right: 1px solid rgb(255 255 255 / 8%);
+  border-right: 1px solid var(--openpress-workbench-border-muted);
 }
 
 .openpress-public-viewer.openpress-workbench-shell .openpress-workbench-right-panel {
@@ -1339,7 +110,7 @@
   height: auto;
   max-height: none;
   align-self: stretch;
-  border-left: 1px solid rgb(255 255 255 / 8%);
+  border-left: 1px solid var(--openpress-workbench-border-muted);
   overflow: hidden;
 }