@erclx/canon 5.53.0 → 5.54.0

package/src/canvas/client/inspector/fields.css

@@ -1,763 +0,0 @@
-/*
- * The inspector's own rules. Every value reads a chrome token, the same set
- * shell.css reads. Each field's glyph sits inside its box, so two fields share
- * a row without a label column eating the width.
- *
- * These rules share one class namespace with shell.css, where the Theme tab
- * owns `.token`, so a new class here takes its own prefix, as `.token-option`
- * does.
- */
-
-.inspector-section {
-  margin-top: var(--space-sm);
-}
-
-.inspector-section-head {
-  display: flex;
-  align-items: center;
-  min-height: 24px;
-}
-
-.inspector-section-title {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: var(--type-label-size);
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.inspector-section-action {
-  flex: none;
-  display: flex;
-  justify-content: flex-end;
-  min-width: 24px;
-}
-
-.field-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: var(--space-xs);
-  margin-top: var(--space-xs);
-}
-
-.glyph-field {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  min-height: 24px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-}
-
-.glyph-field:hover {
-  border-color: var(--color-muted);
-}
-
-.glyph-field.is-readonly {
-  background: transparent;
-}
-
-.glyph-field.is-readonly:hover {
-  border-color: var(--color-border);
-}
-
-.is-wide {
-  grid-column: 1 / -1;
-}
-
-.glyph {
-  flex: none;
-  min-width: 1.75rem;
-  padding: 0 var(--space-xs);
-  color: var(--color-muted);
-  text-align: center;
-  user-select: none;
-}
-
-/* A number field's glyph scrubs its value, so a drag must not pan or scroll. */
-.glyph.is-scrub {
-  cursor: ew-resize;
-  touch-action: none;
-}
-
-.glyph-field-input {
-  flex: 1;
-  min-width: 0;
-  padding: 2px var(--space-xs) 2px 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-text);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.glyph-field-input:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.fill-row {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  min-width: 0;
-}
-
-.fill-row .glyph-field {
-  flex: 1;
-}
-
-.raw {
-  flex: none;
-  color: var(--color-text-secondary);
-  cursor: help;
-}
-
-.text-excerpt {
-  margin: var(--space-xs) 0 0;
-  color: var(--color-text-body);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.saved {
-  margin-left: var(--space-sm);
-  color: var(--color-success);
-  font-weight: 400;
-}
-
-/* An icon in a section's header lane or beside a field, square at row height. */
-.section-icon {
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-muted);
-  cursor: pointer;
-}
-
-.section-icon:hover,
-.section-icon[aria-pressed='true'] {
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.section-icon:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.section-icon svg {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-/* The alignment grid on the left, the direction and wrap stacked beside it. */
-.flex-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: var(--space-xs);
-  align-items: start;
-}
-
-.flex-layout-side {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  min-width: 0;
-}
-
-.flex-layout-side .glyph-field {
-  flex: 1;
-}
-
-.align-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(3, 24px);
-  padding: 2px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-}
-
-.align-cell {
-  display: grid;
-  place-items: center;
-  min-width: 0;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-muted);
-  cursor: pointer;
-}
-
-.align-cell:hover {
-  color: var(--color-text);
-}
-
-.align-cell:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.align-dot {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.align-cell[aria-checked='true'] {
-  color: var(--color-accent);
-}
-
-.align-cell[aria-checked='true'] .align-dot {
-  width: 10px;
-  height: 10px;
-  border-radius: 2px;
-}
-
-/*
- * A size's mode menu trails its number. The select is transparent over the
- * chevron, so the platform's own list opens and the field keeps one height.
- */
-.size-mode {
-  position: relative;
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 22px;
-  border-radius: var(--radius-action);
-  color: var(--color-muted);
-}
-
-.size-mode:hover,
-.size-mode:focus-within {
-  color: var(--color-text);
-  background: var(--color-chrome);
-}
-
-.size-mode-select {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  cursor: pointer;
-}
-
-.size-mode-select:disabled {
-  cursor: not-allowed;
-}
-
-.size-mode:has(.size-mode-select:disabled) {
-  opacity: 0.5;
-}
-
-/* The select is invisible, so the project ring draws on the lane holding it. */
-.size-mode:has(.size-mode-select:focus-visible) {
-  outline: 2px solid var(--color-accent);
-  outline-offset: 0;
-}
-
-.size-mode-chevron {
-  width: 12px;
-  height: 12px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-}
-
-/*
- * A color is one field: a swatch leading in the glyph's lane, the hex, and the
- * opacity right-aligned, with the tokens and the eyedropper trailing the row.
- */
-.color-field {
-  min-width: 0;
-}
-
-.swatch {
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: 1.75rem;
-  min-height: 22px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-}
-
-.swatch:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-/*
- * The paint is the top layer over a checker, so an opacity below full reads
- * as one. `--paint` carries the color, since a background color sits under
- * every image layer and the checker would cover it.
- */
-.swatch-paint {
-  --paint: transparent;
-  flex: none;
-  width: 12px;
-  height: 12px;
-  border: 1px solid var(--color-border);
-  border-radius: 2px;
-  background-image:
-    linear-gradient(var(--paint), var(--paint)),
-    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
-  background-size:
-    auto,
-    6px 6px,
-    6px 6px,
-    6px 6px,
-    6px 6px;
-  background-position:
-    0 0,
-    0 0,
-    0 3px,
-    3px -3px,
-    -3px 0;
-}
-
-.swatch:hover .swatch-paint {
-  border-color: var(--color-muted);
-}
-
-/* No fill draws a slash rather than a color. */
-.swatch.is-none .swatch-paint {
-  background-image: linear-gradient(
-    to top right,
-    transparent calc(50% - 1px),
-    var(--color-muted) calc(50% - 1px),
-    var(--color-muted) calc(50% + 1px),
-    transparent calc(50% + 1px)
-  );
-  background-size: auto;
-}
-
-.color-field .glyph-field-input {
-  text-transform: uppercase;
-}
-
-/* Only a hex reads in capitals. A value the picker cannot read stays as written. */
-.color-field .glyph-field-input::placeholder,
-.color-field .glyph-field-input.is-text {
-  text-transform: none;
-}
-
-/* A token name is a name, so it keeps its own case. */
-.color-field .glyph-field-input.is-token {
-  flex: 0 1 auto;
-  margin-right: auto;
-  padding: 0 var(--space-xs);
-  border-radius: var(--radius-action);
-  background: var(--color-background);
-  text-transform: none;
-}
-
-.color-opacity {
-  flex: none;
-  width: 2.25rem;
-  padding: 2px 0;
-  border: 0;
-  background: transparent;
-  color: var(--color-text);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}
-
-.color-opacity:disabled {
-  color: var(--color-muted);
-  cursor: not-allowed;
-}
-
-.color-percent {
-  flex: none;
-  padding-right: var(--space-xs);
-  color: var(--color-muted);
-  user-select: none;
-}
-
-/*
- * The picker and the token list float beside the panel, in the top layer
- * where the browser has one. The panel scrolls and clips, so neither sits in
- * its flow. The script places each at fixed coordinates inside the window, and
- * the caps below hold a window too small for the whole picker.
- */
-.color-popover {
-  position: fixed;
-  inset: auto;
-  z-index: 10;
-  max-width: calc(100vw - 16px);
-  max-height: calc(100vh - 16px);
-  margin: 0;
-  padding: var(--space-sm);
-  overflow: auto;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-panel);
-  background: var(--color-chrome);
-  color: var(--color-text);
-  box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
-}
-
-.color-popover.is-tokens {
-  width: 14rem;
-  padding: var(--space-xs);
-}
-
-.picker {
-  --picker-hue: red;
-  --picker-solid: transparent;
-  display: grid;
-  grid-template-columns: 14rem 14px 14px 13rem;
-  gap: var(--space-sm);
-  align-items: stretch;
-}
-
-/*
- * The area draws white to the hue left to right, then black over it bottom
- * to top, so a point reads as saturation across and brightness up.
- */
-.picker-area {
-  position: relative;
-  aspect-ratio: 1;
-  border-radius: var(--radius-action);
-  background:
-    linear-gradient(to top, #000, transparent),
-    linear-gradient(to right, #fff, var(--picker-hue));
-  cursor: crosshair;
-  touch-action: none;
-}
-
-.picker-thumb {
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  border: 2px solid #fff;
-  border-radius: 50%;
-  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
-  transform: translate(-50%, -50%);
-  pointer-events: none;
-}
-
-.picker-slider {
-  appearance: none;
-  width: 14px;
-  height: 100%;
-  margin: 0;
-  border-radius: var(--radius-action);
-  writing-mode: vertical-lr;
-  cursor: pointer;
-}
-
-/* Hue runs red at the top through the wheel and back to red at the foot. */
-.picker-hue {
-  background: linear-gradient(
-    to bottom,
-    #f00,
-    #ff0 17%,
-    #0f0 33%,
-    #0ff 50%,
-    #00f 67%,
-    #f0f 83%,
-    #f00
-  );
-}
-
-/* Alpha runs opaque at the top to clear at the foot, over a checker. */
-.picker-alpha {
-  direction: rtl;
-  background-image:
-    linear-gradient(to bottom, var(--picker-solid), transparent),
-    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
-  background-size:
-    auto,
-    8px 8px,
-    8px 8px,
-    8px 8px,
-    8px 8px;
-  background-position:
-    0 0,
-    0 0,
-    0 4px,
-    4px -4px,
-    -4px 0;
-}
-
-.picker-slider::-webkit-slider-thumb {
-  appearance: none;
-  width: 14px;
-  height: 6px;
-  border: 2px solid #fff;
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
-}
-
-.picker-slider::-moz-range-thumb {
-  width: 10px;
-  height: 2px;
-  border: 2px solid #fff;
-  border-radius: 2px;
-  background: transparent;
-  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
-}
-
-.picker-side {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  min-width: 0;
-}
-
-.picker-compare {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  height: 3.5rem;
-  overflow: hidden;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-}
-
-/* Each half paints over the checker, so an alpha below full reads as one. */
-.picker-previous,
-.picker-new {
-  --paint: transparent;
-  padding: 0;
-  border: 0;
-  background-image:
-    linear-gradient(var(--paint), var(--paint)),
-    linear-gradient(45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(-45deg, var(--color-border) 25%, transparent 25%),
-    linear-gradient(45deg, transparent 75%, var(--color-border) 75%),
-    linear-gradient(-45deg, transparent 75%, var(--color-border) 75%);
-  background-size:
-    auto,
-    8px 8px,
-    8px 8px,
-    8px 8px,
-    8px 8px;
-  background-position:
-    0 0,
-    0 0,
-    0 4px,
-    4px -4px,
-    -4px 0;
-}
-
-.picker-previous {
-  cursor: pointer;
-}
-
-.picker-compare-labels {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  color: var(--color-text-secondary);
-  text-align: center;
-}
-
-.picker-row {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1px;
-  overflow: hidden;
-  border-radius: var(--radius-action);
-}
-
-.picker-channel {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  min-width: 0;
-}
-
-.picker-number {
-  min-width: 0;
-  min-height: 24px;
-  padding: 2px var(--space-xs);
-  border: 0;
-  background: var(--color-surface);
-  color: var(--color-text);
-  font: inherit;
-  font-variant-numeric: tabular-nums;
-  text-align: center;
-}
-
-.picker-letter {
-  color: var(--color-muted);
-  font-size: 0.75em;
-  text-align: center;
-  user-select: none;
-}
-
-.token-list {
-  max-height: 12rem;
-  margin: 0;
-  padding: 0;
-  overflow-y: auto;
-  list-style: none;
-}
-
-.token-option {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  min-height: 24px;
-  padding: 0 var(--space-xs);
-  border-radius: var(--radius-action);
-  cursor: pointer;
-}
-
-.token-option:hover,
-.token-option.is-active {
-  background: var(--color-surface);
-}
-
-.token-option[aria-selected='true'] .token-name {
-  color: var(--color-accent);
-}
-
-.token-name {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-/* A trailing icon on the color row, square at the row's height. */
-.color-icon {
-  flex: none;
-  display: grid;
-  place-items: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-muted);
-  cursor: pointer;
-}
-
-.color-icon:hover,
-.color-icon[aria-expanded='true'] {
-  background: var(--color-surface);
-  color: var(--color-text);
-}
-
-.color-icon:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.color-icon svg {
-  width: 14px;
-  height: 14px;
-  fill: currentColor;
-}
-
-/*
- * A value picked from a fixed list. The native select draws its value as the
- * field's text and the chevron sits over its right edge, so the platform list
- * opens on press and the field keeps the height of every other one.
- */
-.glyph-field.is-select {
-  position: relative;
-}
-
-.glyph-select {
-  appearance: none;
-  padding-right: 22px;
-  cursor: pointer;
-}
-
-.select-chevron {
-  position: absolute;
-  right: 6px;
-  width: 12px;
-  height: 12px;
-  fill: none;
-  stroke: var(--color-muted);
-  stroke-width: 1.5;
-  pointer-events: none;
-}
-
-/* A raw marker inside a field sits before its menu, clear of the value. */
-.glyph-field .raw {
-  padding: 0 2px 0 var(--space-xs);
-}
-
-/* Mutually exclusive choices for one value, drawn as one field split evenly. */
-.segmented {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 2px;
-  min-height: 24px;
-  padding: 1px;
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-action);
-  background: var(--color-surface);
-}
-
-.segment {
-  display: grid;
-  place-items: center;
-  min-height: 22px;
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-action);
-  background: transparent;
-  color: var(--color-muted);
-  cursor: pointer;
-}
-
-.segment:hover {
-  color: var(--color-text);
-}
-
-.segment[aria-pressed='true'] {
-  background: var(--color-chrome);
-  color: var(--color-text);
-}
-
-.segment:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.segment svg {
-  width: 14px;
-  height: 14px;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.5;
-  stroke-linecap: round;
-}