@erclx/canon 5.53.0 → 5.55.0

package/src/canvas/client/shell.css

@@ -1,762 +0,0 @@
-/*
- * The canvas chrome. Every value reads a custom property from this toolkit's
- * own token module, served at /api/chrome.css, which maps dark onto :root and
- * light onto [data-theme='light']. A frame reads the project's tokens inside
- * its own iframe, so the two sets of names never meet.
- */
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body {
-  height: 100%;
-  margin: 0;
-}
-
-body {
-  background: var(--color-background);
-  color: var(--color-text);
-  font-family: var(--type-body-family);
-  font-size: var(--type-label-size);
-  line-height: var(--type-label-lh);
-}
-
-#app {
-  height: 100%;
-}
-
-:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 2px;
-}
-
-code {
-  font-family: var(--type-code-family);
-  font-size: var(--type-code-size);
-}
-
-.shell {
-  position: relative;
-  display: grid;
-  grid-template-columns: var(--panel-left, 15rem) minmax(0, 1fr) var(
-      --panel-right,
-      16rem
-    );
-  height: 100%;
-}
-
-/*
- * Centered on the edge, so a 24 pixel circle around it stays inside the
- * panel's padding on one side and short of the tool strip on the other, with
- * a line drawn at the edge itself.
- */
-.panel-handle {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 2;
-  width: 12px;
-  cursor: col-resize;
-  touch-action: none;
-}
-
-.panel-handle-left {
-  left: calc(var(--panel-left, 15rem) - 6px);
-}
-
-.panel-handle-right {
-  right: calc(var(--panel-right, 16rem) - 6px);
-}
-
-.panel-handle::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 5px;
-  width: 2px;
-  background: transparent;
-}
-
-.panel-handle:hover::after,
-.panel-handle:active::after,
-.panel-handle:focus-visible::after {
-  background: var(--color-accent);
-}
-
-.shell.panels-hidden > .panel-handle {
-  display: none;
-}
-
-.panel {
-  overflow-y: auto;
-  padding: var(--space-md);
-  background: var(--color-chrome);
-  min-width: 0;
-}
-
-.panel-left {
-  border-right: 1px solid var(--color-border);
-}
-
-.panel-right {
-  border-left: 1px solid var(--color-border);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-lg);
-}
-
-.panel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--space-md);
-}
-
-.brand {
-  font-weight: 600;
-  color: var(--color-text);
-}
-
-.section-label {
-  margin: var(--space-md) 0 var(--space-xs);
-  font-size: var(--type-label-size);
-  font-weight: 500;
-  color: var(--color-text-secondary);
-}
-
-.panel-right .section-label {
-  margin-top: 0;
-}
-
-.list {
-  list-style: none;
-  margin: 0;
-  padding: 2px;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-sm);
-  width: 100%;
-  min-height: 28px;
-  padding: var(--space-xs) var(--space-sm);
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-text-body);
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.row:hover {
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.row:active {
-  background: var(--color-border);
-}
-
-.row[aria-current='page'],
-.row[aria-current='true'] {
-  background: var(--color-surface);
-  color: var(--color-text);
-  box-shadow: inset 2px 0 0 var(--color-accent);
-}
-
-.row-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.row-meta {
-  flex-shrink: 0;
-  color: var(--color-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-.empty,
-.notice {
-  margin: var(--space-xs) 0;
-  color: var(--color-text-secondary);
-}
-
-.notice {
-  border-left: 2px solid var(--color-accent);
-  padding-left: var(--space-sm);
-}
-
-.detail {
-  margin: 0;
-  color: var(--color-text);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-meta {
-  margin: 0;
-  color: var(--color-muted);
-}
-
-.files {
-  list-style: none;
-  margin: var(--space-xs) 0 0;
-  padding: 0;
-}
-
-.files li {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--color-text-body);
-}
-
-.icon-button,
-.text-button {
-  min-width: 28px;
-  min-height: 28px;
-  padding: 0 var(--space-sm);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-  color: var(--color-text);
-  font: inherit;
-  cursor: pointer;
-}
-
-.icon-button:hover,
-.text-button:hover {
-  border-color: var(--color-text-secondary);
-}
-
-.icon-button:active,
-.text-button:active {
-  background: var(--color-border);
-}
-
-.surface {
-  position: relative;
-  min-width: 0;
-  overflow: hidden;
-  background: var(--color-background);
-}
-
-.viewport {
-  position: absolute;
-  inset: 0;
-  overflow: hidden;
-  cursor: grab;
-  touch-action: none;
-}
-
-.viewport:active {
-  cursor: grabbing;
-}
-
-/* Inset, so the panels on either side never clip the ring. */
-.surface:focus-visible {
-  outline-offset: -2px;
-}
-
-/*
- * While panning, a frame takes no pointer, so a drag over one moves the view
- * rather than picking an element, and the cursor reads the viewport's grab.
- * The descendants are named too, since a selection handle sets its own
- * pointer events and would otherwise take the drag as a resize. Nothing in
- * the viewport starts a text selection while a pan drags across it.
- */
-.surface[data-tool='pan'] .viewport {
-  user-select: none;
-}
-
-.surface[data-tool='pan'] .frame,
-.surface[data-tool='pan'] .frame * {
-  pointer-events: none;
-}
-
-.plane {
-  position: absolute;
-  top: 0;
-  left: 0;
-  transform-origin: 0 0;
-}
-
-.frame {
-  position: absolute;
-  margin: 0;
-  cursor: default;
-}
-
-.frame-label {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  right: 0;
-  display: flex;
-  align-items: center;
-  /*
-   * Sized against the zoom, so the label reads at one screen size at any zoom.
-   * A row too short for every part wraps the theme switch, then the editing
-   * badge, then the size onto lines the clip hides, so the name keeps the row
-   * longest.
-   */
-  flex-wrap: wrap;
-  align-content: flex-start;
-  column-gap: calc(6px * var(--outline-scale, 1));
-  row-gap: calc(40px * var(--outline-scale, 1));
-  height: calc(25px * var(--outline-scale, 1));
-  overflow: clip;
-  overflow-clip-margin: calc(4px * var(--outline-scale, 1));
-  padding-bottom: calc(6px * var(--outline-scale, 1));
-  font-size: calc(11px * var(--outline-scale, 1));
-  line-height: 1.3;
-  color: var(--color-text-secondary);
-  white-space: nowrap;
-}
-
-/* A theme switch focused on a hidden line shows rather than staying hidden. */
-.frame-label:focus-within {
-  overflow: visible;
-}
-
-.frame-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-text);
-}
-
-.frame-size {
-  color: var(--color-muted);
-  font-variant-numeric: tabular-nums;
-}
-
-/*
- * Ahead of the theme switch, so a row too short for both wraps the switch
- * first. The editing outline still marks the frame when the badge wraps too.
- */
-.frame-editing {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(4px * var(--outline-scale, 1));
-  padding: calc(1px * var(--outline-scale, 1))
-    calc(6px * var(--outline-scale, 1));
-  border-radius: var(--radius-pill);
-  background: color-mix(in srgb, var(--color-success) 16%, transparent);
-  color: var(--color-success);
-  font-weight: 600;
-}
-
-.frame-editing:empty {
-  display: none;
-}
-
-.frame-editing::before {
-  content: '';
-  width: calc(6px * var(--outline-scale, 1));
-  height: calc(6px * var(--outline-scale, 1));
-  border-radius: 50%;
-  background: currentColor;
-}
-
-/* Dashed, so it reads apart from the solid accent of a selection. */
-.frame[data-editing='true'] iframe {
-  outline: calc(2px * var(--outline-scale, 1)) dashed var(--color-success);
-  outline-offset: calc(2px * var(--outline-scale, 1));
-}
-
-.frame-theme {
-  margin-left: auto;
-  padding: calc(1px * var(--outline-scale, 1))
-    calc(6px * var(--outline-scale, 1));
-  border: calc(1px * var(--outline-scale, 1)) solid var(--color-border);
-  border-radius: var(--radius-pill);
-  background: var(--color-surface);
-  color: var(--color-text-secondary);
-  font: inherit;
-  cursor: pointer;
-}
-
-.frame-theme:hover {
-  color: var(--color-text);
-}
-
-.frame iframe {
-  display: block;
-  border: 1px solid var(--color-border);
-  border-radius: 2px;
-}
-
-/* The frame's handle, since a press inside the frame picks an element. */
-.frame-label {
-  cursor: move;
-  touch-action: none;
-}
-
-.frame[data-dragging='true'] .frame-label {
-  cursor: grabbing;
-}
-
-.frame-body {
-  position: relative;
-}
-
-/* Inset by the iframe border, so a box lines up with the element it marks. */
-.element-outline {
-  position: absolute;
-  translate: 1px 1px;
-  pointer-events: none;
-}
-
-.element-outline[data-outline='hover'] {
-  outline: calc(1px * var(--outline-scale, 1)) dashed var(--color-accent);
-}
-
-/* Above its neighbors, so a frame dragged over another stays whole. */
-.frame[data-selected='true'] {
-  z-index: 1;
-}
-
-/* A selected frame names itself in the accent, and a picked element does not. */
-.frame[data-selected='true']:not([data-picked]) .frame-name {
-  color: var(--color-accent);
-  font-weight: 600;
-}
-
-/*
- * The selected frame's or element's outline, handles, and size chip. Every
- * length multiplies by the outline scale, so each holds one screen size.
- */
-.selection {
-  --handle: calc(8px * var(--outline-scale, 1));
-  --handle-hit: calc(24px * var(--outline-scale, 1));
-  position: absolute;
-  pointer-events: none;
-  outline: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
-}
-
-/* Inset by the iframe border, so the box lines up with the element it marks. */
-.selection[data-selection='element'] {
-  translate: 1px 1px;
-}
-
-/* A 24 pixel hit area around an 8 pixel square, per the target size minimum. */
-.selection-handle {
-  position: absolute;
-  width: var(--handle-hit);
-  height: var(--handle-hit);
-  margin: calc(var(--handle-hit) / -2);
-  pointer-events: auto;
-  touch-action: none;
-}
-
-.selection-handle::after {
-  content: '';
-  position: absolute;
-  inset: calc((var(--handle-hit) - var(--handle)) / 2);
-  border: calc(1px * var(--outline-scale, 1)) solid var(--color-accent);
-  background: var(--color-background);
-}
-
-.selection-handle[data-handle='nw'] {
-  top: 0;
-  left: 0;
-  cursor: nwse-resize;
-}
-
-.selection-handle[data-handle='ne'] {
-  top: 0;
-  left: 100%;
-  cursor: nesw-resize;
-}
-
-.selection-handle[data-handle='sw'] {
-  top: 100%;
-  left: 0;
-  cursor: nesw-resize;
-}
-
-.selection-handle[data-handle='se'] {
-  top: 100%;
-  left: 100%;
-  cursor: nwse-resize;
-}
-
-.selection-chip {
-  position: absolute;
-  top: calc(100% + 8px * var(--outline-scale, 1));
-  left: 50%;
-  translate: -50% 0;
-  padding: calc(2px * var(--outline-scale, 1))
-    calc(5px * var(--outline-scale, 1));
-  border-radius: calc(3px * var(--outline-scale, 1));
-  background: var(--color-accent);
-  color: var(--color-background);
-  font-family: var(--type-code-family);
-  font-size: calc(11px * var(--outline-scale, 1));
-  line-height: 1.3;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-
-.frame:focus-visible {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 6px;
-}
-
-.toolbar {
-  position: absolute;
-  right: var(--space-md);
-  bottom: var(--space-md);
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  padding: var(--space-xs);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-panel);
-  background: var(--color-chrome);
-}
-
-.tools {
-  position: absolute;
-  top: var(--space-md);
-  left: var(--space-md);
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: var(--space-xs);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-panel);
-  background: var(--color-chrome);
-}
-
-.tool-button {
-  display: grid;
-  place-items: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-text-secondary);
-  cursor: pointer;
-}
-
-.tool-button svg {
-  width: 16px;
-  height: 16px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.3;
-  stroke-linejoin: round;
-  stroke-linecap: round;
-}
-
-.tool-button[data-tool='move'] svg {
-  fill: currentColor;
-}
-
-.tool-button:hover {
-  color: var(--color-text);
-  background: var(--color-surface);
-}
-
-.tool-button[aria-pressed='true'] {
-  color: var(--color-text);
-  background: var(--color-border);
-}
-
-.tool-button:disabled {
-  opacity: 0.4;
-  background: transparent;
-  cursor: not-allowed;
-}
-
-.tools-divider {
-  height: 1px;
-  margin: 2px var(--space-xs);
-  background: var(--color-border);
-}
-
-.history-notice {
-  position: absolute;
-  top: var(--space-md);
-  left: 50%;
-  max-width: min(28rem, calc(100% - 8rem));
-  margin: 0;
-  padding: var(--space-xs) var(--space-sm);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-panel);
-  background: var(--color-chrome);
-  color: var(--color-text);
-  transform: translateX(-50%);
-}
-
-.zoom {
-  min-width: 3.5rem;
-  text-align: center;
-  font-variant-numeric: tabular-nums;
-  color: var(--color-text-secondary);
-}
-
-@media (max-width: 900px) {
-  .shell {
-    grid-template-columns: 12rem minmax(0, 1fr);
-  }
-
-  .panel-right,
-  .panel-handle {
-    display: none;
-  }
-}
-
-@media (max-width: 600px) {
-  .shell {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  .panel-left {
-    max-height: 40vh;
-    border-right: 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-}
-
-/* Two classes outrank every width's own columns, so hiding holds at each. */
-.shell.panels-hidden {
-  grid-template-columns: minmax(0, 1fr);
-  grid-template-rows: minmax(0, 1fr);
-}
-
-.shell.panels-hidden > .panel {
-  display: none;
-}
-
-.frame-row {
-  display: flex;
-  align-items: center;
-}
-
-.frame-row .row {
-  flex: 1;
-  min-width: 0;
-}
-
-.disclosure {
-  flex: none;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: none;
-  color: var(--color-muted);
-  font: inherit;
-  cursor: pointer;
-}
-
-.disclosure:hover {
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.layers {
-  margin: 0;
-  padding: 0 0 0 var(--space-sm);
-  list-style: none;
-}
-
-.layers-root {
-  padding-left: var(--space-lg);
-}
-
-.layer {
-  min-height: 24px;
-}
-
-.row-meta.layer-text {
-  flex-shrink: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.tabs {
-  display: flex;
-  gap: 2px;
-  margin-top: var(--space-sm);
-  padding: 2px;
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-}
-
-.tab {
-  flex: 1;
-  min-height: 24px;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-text-secondary);
-  font: inherit;
-  cursor: pointer;
-}
-
-.tab:hover {
-  color: var(--color-text);
-}
-
-.tab[aria-selected='true'] {
-  background: var(--color-chrome);
-  color: var(--color-text);
-}
-
-.tokens {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.token {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  min-height: 24px;
-  padding: 0 var(--space-sm);
-}
-
-.token .row-label {
-  flex: 1;
-  min-width: 0;
-}
-
-.token-value {
-  max-width: 45%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.swatch {
-  flex: none;
-  width: 14px;
-  height: 14px;
-  border: 1px solid var(--color-border);
-  border-radius: 4px;
-}