@open-press/core 1.1.4 → 1.2.1

package/src/styles/openpress/project-preview-panel.css

@@ -1,12 +1,3 @@
-.openpress-project-preview-panel {
-  width: 100%;
-  min-width: 0;
-  min-height: 100%;
-  overflow: hidden;
-  background: #111312;
-  color: #e8e8e4;
-}
-
 .openpress-project-panel {
   display: grid;
   gap: 18px;
@@ -30,23 +21,6 @@
   padding: 0;
 }
 
-.openpress-project-tool-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-width: 0;
-}
-
-.openpress-project-tool-header span {
-  color: rgb(190 196 202 / 58%);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
 .openpress-project-asset-list,
 .openpress-project-component-mention-list {
   display: grid;
@@ -125,11 +99,6 @@
   stroke-width: 1.7;
 }
 
-/* Backdrop / panel / header / close styles now come from the shared
-   .openpress-workbench-dialog* class family. Only project-preview-specific
-   pieces (rename/delete pill actions, body preview surface, footer forms +
-   comment composer) live in this file. */
-
 .openpress-project-preview-dialog__body {
   min-width: 0;
   min-height: 0;
@@ -165,760 +134,13 @@
   min-width: min-content;
 }
 
-
-.openpress-project-markdown-header dt {
-  color: rgb(175 181 188 / 64%);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.openpress-project-entry-list {
-  position: relative;
-  min-height: 0;
-  padding: 4px 18px 18px 30px;
-}
-
-.openpress-project-bookmarks {
-  height: 100%;
-  overflow: auto;
-  scrollbar-width: none;
-}
-
-.openpress-project-bookmarks::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-  display: none;
-}
-
-.openpress-project-entry {
-  width: 100%;
-  min-width: 0;
-}
-
-.openpress-project-entry.bookmark-h2 {
-  grid-template-columns: 34px minmax(0, 1fr);
-  align-items: center;
-  padding: 8px 0;
-  color: rgb(150 156 163 / 72%);
-  font-family: var(--openpress-font-serif);
-  font-size: 14px;
-  line-height: 1.42;
-}
-
-.openpress-project-entry:hover,
-.openpress-project-entry.is-active {
-  color: rgb(242 242 240 / 94%);
-}
-
-.openpress-project-entry .bookmark-index {
-  display: inline-flex;
-  align-items: center;
-  justify-content: flex-start;
-  color: rgb(160 166 173 / 58%);
-}
-
-.openpress-project-entry.is-active .bookmark-index,
-.openpress-project-entry--gallery.is-active .bookmark-index,
-.openpress-project-entry--components.is-active .bookmark-index {
-  color: #d7a034;
+.openpress-workbench-dialog.openpress-project-preview-dialog {
+  width: min(860px, calc(100vw - 56px));
 }
 
-.openpress-project-entry-icon svg {
-  width: 14px;
-  height: 14px;
-  stroke-width: 1.8;
-}
-
-.openpress-project-entry .bookmark-title {
-  min-width: 0;
-  overflow: visible;
-  color: inherit;
-  letter-spacing: 0;
-  white-space: normal;
-  overflow-wrap: anywhere;
-  -webkit-line-clamp: unset;
-}
-
-.openpress-project-visual-system,
-.openpress-project-markdown-viewer,
-.openpress-project-gallery-viewer,
-.openpress-project-data-viewer,
-.openpress-project-component-viewer {
-  min-width: 0;
-  height: 100%;
-  min-height: 100%;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  gap: 18px;
-  overflow: hidden;
-  padding: 24px;
-}
-
-.openpress-project-section-header,
-.openpress-project-markdown-header {
-  min-width: 0;
-  display: grid;
-  gap: 8px;
-  padding-bottom: 18px;
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-}
-
-.openpress-project-section-header {
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 18px;
-  align-items: end;
-}
-
-.openpress-project-section-header--minimal {
-  grid-template-columns: minmax(0, 1fr);
-  gap: 0;
-  padding-bottom: 4px;
-  border-bottom: 0;
-}
-
-.openpress-project-section-header > div {
-  min-width: 0;
-}
-
-.openpress-project-section-header p {
-  margin: 0 0 6px;
-  color: #d7a034;
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.openpress-project-section-header span {
-  display: block;
-  margin-top: 7px;
-  color: rgb(184 190 196 / 72%);
-  font-size: 12px;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-section-header dl {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 10px;
-  margin: 0;
-}
-
-.openpress-project-section-header dl div {
-  display: inline-grid;
-  min-width: 74px;
-  gap: 5px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 8px 10px;
-  background: rgb(255 255 255 / 3%);
-}
-
-.openpress-project-section-header dt {
-  color: rgb(175 181 188 / 64%);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0;
-  text-transform: uppercase;
-}
-
-.openpress-project-section-header dd {
-  margin: 0;
-  color: rgb(245 245 241 / 88%);
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-
-.openpress-project-section-header h2,
-.openpress-project-markdown-header h2 {
-  margin: 0;
-  color: rgb(248 248 244 / 96%);
-  font-size: clamp(22px, 2.4vw, 34px);
-  font-weight: 560;
-  line-height: 1.05;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-section-header--minimal h2 {
-  font-family: var(--openpress-font-serif);
-  font-size: clamp(24px, 2vw, 30px);
-  font-weight: 420;
-  letter-spacing: 0;
-}
-
-.openpress-project-entry .bookmark-title {
-  display: grid;
-  gap: 2px;
-  line-height: 1.28;
-}
-
-.openpress-project-entry .bookmark-title > span,
-.openpress-project-entry .bookmark-title > small {
-  display: block;
-}
-
-.openpress-project-entry .bookmark-title small {
-  color: rgb(150 156 163 / 58%);
-  font-family: var(--openpress-font-body);
-  font-size: 10px;
-  font-weight: 500;
-  line-height: 1.2;
-}
-
-.openpress-project-entry.is-active .bookmark-title small {
-  color: rgb(215 160 52 / 78%);
-}
-
-.openpress-project-visual-grid {
-  display: grid;
-  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.25fr);
-  align-content: start;
-  gap: 28px;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.openpress-project-visual-card {
-  min-width: 0;
-  border-top: 1px solid rgb(255 255 255 / 10%);
-  padding-top: 18px;
-  background: transparent;
-}
-
-.openpress-project-visual-card header {
-  display: grid;
-  gap: 5px;
-  margin-bottom: 14px;
-}
-
-.openpress-project-visual-card header span {
-  color: rgb(170 176 183 / 58%);
-  font-size: 10px;
-  font-weight: 650;
-  line-height: 1;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.openpress-project-visual-card header strong {
-  color: rgb(242 242 240 / 92%);
-  font-family: var(--openpress-font-serif);
-  font-size: 18px;
-  font-weight: 520;
-  line-height: 1.2;
-}
-
-.openpress-project-visual-card--typography {
-  grid-row: span 2;
-}
-
-.openpress-project-type-specimen {
-  display: grid;
-  gap: 10px;
-  border: 1px solid rgb(29 40 50 / 10%);
-  padding: 22px 24px;
-  background: var(--openpress-color-document);
-  color: var(--openpress-color-body);
-}
-
-.openpress-project-type-specimen .openpress-project-type-kicker {
-  margin: 0;
-  color: var(--openpress-color-muted);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  line-height: 1.2;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.openpress-project-type-specimen h2,
-.openpress-project-type-specimen h3,
-.openpress-project-type-specimen h4,
-.openpress-project-type-specimen p {
-  margin: 0;
-}
-
-.openpress-project-type-specimen h2 {
-  color: var(--openpress-color-ink);
-  font-family: var(--openpress-font-serif);
-  font-size: 38px;
-  font-weight: 420;
-  line-height: 0.98;
-  letter-spacing: 0;
-}
-
-.openpress-project-type-specimen h3 {
-  color: var(--openpress-color-ink);
-  font-family: var(--openpress-font-serif);
-  font-size: 20px;
-  font-weight: 420;
-  line-height: 1.25;
-}
-
-.openpress-project-type-specimen h4 {
-  color: var(--openpress-color-muted);
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.35;
-}
-
-.openpress-project-type-specimen p:not(.openpress-project-type-kicker) {
-  color: var(--openpress-color-body);
-  font-size: 13px;
-  line-height: 1.8;
-}
-
-.openpress-project-type-specimen code {
-  width: fit-content;
-  border: 1px solid var(--openpress-color-line);
-  padding: 5px 7px;
-  background: var(--openpress-color-block);
-  color: var(--openpress-color-ink);
-  font-family: var(--openpress-font-mono);
-  font-size: 12px;
-}
-
-.openpress-project-swatch-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 14px 16px;
-}
-
-.openpress-project-swatch {
-  display: grid;
-  grid-template-columns: 42px minmax(0, 1fr);
-  grid-template-areas:
-    "chip label"
-    "chip token";
-  gap: 4px 10px;
-  align-items: center;
-  min-width: 0;
-}
-
-.openpress-project-swatch-chip {
-  grid-area: chip;
-  width: 38px;
-  height: 38px;
-  border: 1px solid rgb(255 255 255 / 18%);
-  background: var(--openpress-project-swatch);
-}
-
-.openpress-project-swatch strong {
-  grid-area: label;
-  color: rgb(242 242 240 / 92%);
-  font-size: 12px;
-  font-weight: 560;
-  line-height: 1.2;
-}
-
-.openpress-project-swatch code {
-  grid-area: token;
-  min-width: 0;
-  border: 0;
-  padding: 0;
-  background: transparent;
-  color: rgb(170 176 183 / 62%);
-  font-family: var(--openpress-font-mono);
-  font-size: 10px;
-  line-height: 1.25;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-surface-preview {
+.openpress-workbench-dialog.openpress-project-preview-dialog .openpress-workbench-dialog__footer {
   display: grid;
   gap: 12px;
-}
-
-.openpress-project-surface-paper,
-.openpress-project-surface-block {
-  display: grid;
-  gap: 5px;
-  min-height: 82px;
-  align-content: center;
-  border: 1px solid rgb(29 40 50 / 10%);
-  padding: 18px;
-  color: var(--openpress-color-body);
-}
-
-.openpress-project-surface-paper {
-  background-color: var(--openpress-color-document);
-  background-image: var(--openpress-paper-texture);
-  background-position: var(--openpress-paper-texture-position);
-  background-size: var(--openpress-paper-texture-size);
-}
-
-.openpress-project-surface-block {
-  background: var(--openpress-color-block);
-}
-
-.openpress-project-surface-paper span,
-.openpress-project-surface-block span {
-  color: var(--openpress-color-ink);
-  font-size: 13px;
-  font-weight: 650;
-  line-height: 1.2;
-}
-
-.openpress-project-surface-paper p,
-.openpress-project-surface-block p {
-  margin: 0;
-  color: var(--openpress-color-muted);
-  font-size: 12px;
-  line-height: 1.55;
-}
-
-.openpress-project-markdown-header p {
-  margin: 0;
-  color: rgb(184 190 196 / 72%);
-  font-size: 12px;
-  line-height: 1.45;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-markdown-header dl {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  margin: 8px 0 0;
-}
-
-.openpress-project-markdown-header dl div {
-  display: inline-grid;
-  grid-template-columns: auto auto;
-  gap: 8px;
-  align-items: baseline;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 6px 9px;
-}
-
-.openpress-project-markdown-header dd {
-  margin: 0;
-  color: rgb(245 245 241 / 88%);
-  font-size: 12px;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-}
-
-.openpress-project-markdown-source {
-  min-width: 0;
-  min-height: 0;
-  margin: 0;
-  overflow: auto;
-  border: 1px solid rgb(255 255 255 / 12%);
-  padding: 22px;
-  background: #f4f0e7;
-  color: #1f2326;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 12.5px;
-  line-height: 1.68;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-markdown-source code {
-  font: inherit;
-}
-
-.openpress-project-data-list {
-  display: grid;
-  align-content: start;
-  gap: 16px;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.openpress-project-component-list-header {
-  padding-bottom: 0;
-  border-bottom: 0;
-}
-
-.openpress-project-component-list {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  align-content: start;
-  gap: 22px;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.openpress-project-component-preview-row {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-  margin: 0;
-}
-
-.openpress-project-component-preview-row figcaption {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-  color: rgb(242 242 240 / 90%);
-  font-family: var(--openpress-font-mono);
-  font-size: 11px;
-  line-height: 1.2;
-}
-
-.openpress-project-component-preview-row figcaption span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.openpress-project-component-preview-row figcaption small {
-  flex-shrink: 0;
-  color: rgb(170 176 183 / 62%);
-  font: inherit;
-}
-
-.openpress-project-component-preview {
-  display: block;
-  min-width: 0;
-  min-height: 260px;
-  max-height: 520px;
-  overflow: auto;
-  border: 1px solid rgb(255 255 255 / 12%);
-  padding: 18px;
-  background: #f7f9fb;
-  color: var(--openpress-color-ink, #1f2d3d);
-}
-
-.openpress-project-component-preview [data-openpress-component] {
-  max-width: 100%;
-}
-
-.openpress-project-data-card {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 14px;
-  background: rgb(255 255 255 / 3%);
-}
-
-.openpress-project-data-card header {
-  display: grid;
-  grid-template-columns: 26px minmax(0, 1fr);
-  gap: 10px;
-  align-items: start;
-  min-width: 0;
-}
-
-.openpress-project-data-card header svg {
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  color: #d7a034;
-  stroke-width: 1.8;
-}
-
-.openpress-project-data-card h3 {
-  margin: 0;
-  color: rgb(242 242 240 / 92%);
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.3;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-data-card p {
-  margin: 4px 0 0;
-  color: rgb(184 190 196 / 72%);
-  font-size: 12px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-data-preview {
-  min-width: 0;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 14px;
-  background: rgb(255 255 255 / 3%);
-}
-
-.openpress-project-data-preview--empty {
-  color: rgb(170 176 183 / 62%);
-  font-size: 12px;
-}
-
-.openpress-project-data-chart-preview {
-  border: 0;
-  padding: 0;
-  background: transparent;
-}
-
-.openpress-project-data-chart-preview .chart-frame {
-  margin: 0;
-  color: var(--openpress-color-ink);
-}
-
-.openpress-project-data-chart-preview .cost-donut__layout {
-  width: min(86%, 154mm);
-}
-
-.openpress-project-data-chart-preview .revenue-line-chart__svg {
-  max-height: none;
-}
-
-.openpress-project-data-raw {
-  min-width: 0;
-}
-
-.openpress-project-data-raw summary {
-  cursor: pointer;
-  color: rgb(184 190 196 / 72%);
-  font-size: 11px;
-  line-height: 1.2;
-}
-
-.openpress-project-data-raw pre {
-  min-width: 0;
-  max-height: 320px;
-  margin: 10px 0 0;
-  overflow: auto;
-  border: 1px solid rgb(255 255 255 / 10%);
-  padding: 12px;
-  background: #f4f0e7;
-  color: #1f2326;
-  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
-  font-size: 11.5px;
-  line-height: 1.55;
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-data-card code {
-  font: inherit;
-}
-
-.openpress-project-media-sections {
-  display: grid;
-  align-content: start;
-  gap: 28px;
-  min-height: 0;
-  overflow: auto;
-  padding-right: 2px;
-}
-
-.openpress-project-media-section {
-  display: grid;
-  gap: 12px;
-  min-width: 0;
-}
-
-.openpress-project-media-section-header {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  min-width: 0;
-  border-bottom: 1px solid rgb(255 255 255 / 10%);
-  padding-bottom: 8px;
-}
-
-.openpress-project-media-section-header h3 {
-  margin: 0;
-  color: rgb(238 238 234 / 90%);
-  font-size: 13px;
-  font-weight: 560;
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-
-.openpress-project-media-gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
-  gap: 16px;
-  min-width: 0;
-}
-
-.openpress-project-media-card {
-  display: grid;
-  gap: 10px;
-  align-content: start;
-  min-width: 0;
-  margin: 0;
-}
-
-.openpress-project-media-card img {
-  width: 100%;
-  aspect-ratio: 16 / 10;
-  object-fit: cover;
-  border: 1px solid rgb(255 255 255 / 10%);
-  background: rgb(255 255 255 / 4%);
-}
-
-.openpress-project-media-card[data-unused="true"] img {
-  opacity: 0.42;
-  filter: grayscale(0.7);
-}
-
-.openpress-project-media-card figcaption {
-  display: grid;
-  min-width: 0;
-}
-
-.openpress-project-media-card strong {
-  min-width: 0;
-  color: rgb(242 242 240 / 92%);
-  font-size: 12px;
-  font-weight: 520;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-.openpress-project-media-section-empty {
-  margin: 0;
-  color: rgb(170 176 183 / 62%);
-  font-size: 12px;
-  line-height: 1.45;
-}
-
-.openpress-project-empty {
-  width: min(980px, 100%);
-  margin: 0 auto;
-  padding: 28px 24px;
-  color: rgb(170 176 183 / 70%);
-  font-size: 13px;
-}
-
-@media (max-width: 900px) {
-  .openpress-project-section-header {
-    grid-template-columns: 1fr;
-    align-items: start;
-  }
-
-  .openpress-project-section-header dl {
-    justify-content: flex-start;
-  }
-
-  .openpress-project-visual-system,
-  .openpress-project-markdown-viewer,
-  .openpress-project-gallery-viewer,
-  .openpress-project-component-viewer {
-    padding: 18px 14px calc(80px + env(safe-area-inset-bottom));
-  }
-
-  .openpress-project-visual-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .openpress-project-visual-card--typography {
-    grid-row: auto;
-  }
-
-  .openpress-project-component-list {
-    grid-template-columns: 1fr;
-  }
+  justify-content: stretch;
+  align-items: stretch;
 }