@comfyorg/design-system 1.1.0 → 1.3.0-alpha.0

package/src/css/_legacy-ui.css

@@ -0,0 +1,418 @@
+.dom-widget .comfy-multiline-input {
+  background-color: var(--comfy-input-bg);
+  color: var(--input-text);
+}
+
+.comfy-modal {
+  display: none;
+  position: fixed;
+  z-index: 100;
+  padding: 30px 30px 10px;
+  background-color: var(--background);
+  color: var(--destructive);
+  box-shadow: var(--shadow-lg);
+  border-radius: 10px;
+  top: 50%;
+  left: 50%;
+  max-width: 80vw;
+  max-height: 80vh;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  justify-content: center;
+  font-family: monospace;
+  font-size: 15px;
+}
+
+.comfy-modal-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.comfy-modal p {
+  overflow: auto;
+  white-space: pre-line;
+  margin-bottom: 20px;
+}
+
+.comfy-modal select,
+.comfy-modal input[type='button'],
+.comfy-modal input[type='checkbox'] {
+  margin: 3px 3px 3px 4px;
+}
+
+.comfy-menu {
+  font-size: 15px;
+  position: absolute;
+  top: 50%;
+  right: 0;
+  text-align: center;
+  z-index: 999;
+  width: 190px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--muted-foreground);
+  background-color: var(--background);
+  padding: 10px;
+  border-radius: 0 8px 8px;
+  box-shadow: var(--shadow-md);
+}
+
+.comfy-menu-header {
+  display: flex;
+}
+
+.comfy-menu-actions {
+  display: flex;
+  gap: 3px;
+  align-items: center;
+  height: 20px;
+  position: relative;
+  top: -1px;
+  font-size: 22px;
+}
+
+.comfy-menu .comfy-menu-actions button {
+  background-color: rgb(0 0 0 / 0);
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  font-size: inherit;
+}
+
+.comfy-menu .comfy-menu-actions .comfy-settings-btn {
+  font-size: 0.6em;
+}
+
+button.comfy-close-menu-btn {
+  font-size: 1em;
+  line-height: 12px;
+  color: #ccc;
+  position: relative;
+  top: -1px;
+}
+
+.comfy-menu-queue-size {
+  flex: auto;
+}
+
+.comfy-menu button,
+.comfy-modal button {
+  font-size: 20px;
+}
+
+.comfy-menu-btns {
+  margin-bottom: 10px;
+  width: 100%;
+}
+
+.comfy-menu-btns button {
+  font-size: 10px;
+  width: 50%;
+  color: var(--muted-foreground) !important;
+}
+
+.comfy-menu > button {
+  width: 100%;
+}
+
+.comfy-menu > button,
+.comfy-menu-btns button,
+.comfy-menu .comfy-list button,
+.comfy-modal button {
+  color: var(--foreground);
+  background-color: var(--input);
+  border-width: initial;
+  border-radius: 8px;
+  border-color: var(--border);
+  border-style: solid;
+  margin-top: 2px;
+}
+
+.comfy-menu > button,
+.comfy-menu-btns button,
+.comfy-menu .comfy-list button {
+  color: var(--input-text);
+  background-color: var(--comfy-input-bg);
+  border-color: var(--border-color);
+}
+
+.comfy-menu > button:hover,
+.comfy-menu-btns button:hover,
+.comfy-menu .comfy-list button:hover,
+.comfy-modal button:hover,
+.comfy-menu-actions button:hover {
+  filter: brightness(1.2);
+  will-change: transform;
+  cursor: pointer;
+}
+
+span.drag-handle {
+  display: inline-block;
+  overflow: hidden;
+  line-height: 5px;
+  padding: 3px 4px;
+  vertical-align: middle;
+  margin-top: -0.4em;
+  margin-left: -0.2em;
+  font-size: 12px;
+  letter-spacing: 2px;
+  color: var(--muted-foreground);
+  text-shadow: 1px 0 1px black;
+  touch-action: none;
+}
+
+span.drag-handle::after {
+  content: '.. .. ..';
+}
+
+.comfy-queue-btn {
+  width: 100%;
+}
+
+.comfy-list {
+  color: var(--muted-foreground);
+  background-color: var(--background);
+  margin-bottom: 10px;
+  border-color: var(--border);
+  border-style: solid;
+}
+
+.comfy-list-items {
+  overflow-y: scroll;
+  max-height: 100px;
+  min-height: 25px;
+  background-color: var(--input);
+  padding: 5px;
+}
+
+.comfy-list h4 {
+  min-width: 160px;
+  margin: 0;
+  padding: 3px;
+  font-weight: 400;
+}
+
+.comfy-list-items button {
+  font-size: 10px;
+}
+
+.comfy-list-actions {
+  margin: 5px;
+  display: flex;
+  gap: 5px;
+  justify-content: center;
+}
+
+.comfy-list-actions button {
+  font-size: 12px;
+}
+
+button.comfy-queue-btn {
+  margin: 6px 0 !important;
+}
+
+.comfy-modal.comfy-manage-templates {
+  text-align: center;
+  color: var(--muted-foreground);
+  z-index: 99;
+}
+
+.comfy-modal input,
+.comfy-modal select {
+  color: var(--foreground);
+  background-color: var(--input);
+  border-radius: 8px;
+  border-color: var(--border);
+  border-style: solid;
+  font-size: inherit;
+}
+
+@media only screen and (max-height: 850px) {
+  .comfy-menu {
+    top: 0 !important;
+    bottom: 0 !important;
+    left: auto !important;
+    right: 0 !important;
+    border-radius: 0;
+  }
+
+  .comfy-menu span.drag-handle {
+    display: none;
+  }
+
+  .comfy-menu-queue-size {
+    flex: unset;
+  }
+
+  .comfy-menu-header {
+    justify-content: space-between;
+  }
+  .comfy-menu-actions {
+    gap: 10px;
+    font-size: 28px;
+  }
+}
+
+.graphdialog {
+  min-height: 1em;
+  background-color: var(--background);
+  z-index: 1500;
+}
+
+.graphdialog .name {
+  font-size: 14px;
+  color: var(--muted-foreground);
+}
+
+.graphdialog button {
+  margin-top: unset;
+  vertical-align: unset;
+  height: 1.6em;
+  padding-right: 8px;
+}
+
+.graphdialog input,
+.graphdialog textarea,
+.graphdialog select {
+  background-color: var(--input);
+  border: 2px solid;
+  border-color: var(--border);
+  color: var(--foreground);
+  border-radius: 12px 0 0 12px;
+}
+
+dialog {
+  box-shadow: var(--shadow-lg);
+}
+
+dialog:modal {
+  pointer-events: auto;
+}
+
+dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+
+.comfy-dialog.comfyui-dialog.comfy-modal {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  transform: none;
+}
+
+.comfy-dialog.comfy-modal {
+  border-color: var(--background);
+  box-shadow: none;
+  border: 2px solid var(--border);
+}
+
+.comfy-dialog .comfy-modal-content {
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 10px;
+  color: var(--foreground);
+}
+
+.comfy-dialog .comfy-modal-content h3 {
+  margin-top: 0;
+}
+
+.comfy-dialog .comfy-modal-content > p {
+  width: 100%;
+}
+
+.comfy-dialog .comfy-modal-content > .comfyui-button {
+  flex: 1;
+  justify-content: center;
+}
+
+.litegraph .dialog {
+  z-index: 1;
+}
+
+.litegraph .litemenu-entry.has_submenu {
+  position: relative;
+  padding-right: 20px;
+}
+
+.litemenu-entry.has_submenu::after {
+  content: '>';
+  position: absolute;
+  top: 0;
+  right: 2px;
+}
+
+.litegraph.litecontextmenu,
+.litegraph.litecontextmenu.dark {
+  z-index: var(--z-index-overlay) !important;
+  background-color: var(--background);
+}
+
+.litegraph.litecontextmenu .litemenu-entry.submenu,
+.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
+  background-color: var(--background);
+  color: var(--foreground);
+}
+
+.litegraph.litecontextmenu input {
+  background-color: var(--input);
+  color: var(--foreground);
+}
+
+.comfy-context-menu-filter {
+  box-sizing: border-box;
+  border: 1px solid #999;
+  margin: 0 0 5px 5px;
+  width: calc(100% - 10px);
+}
+
+.comfy-img-preview {
+  pointer-events: none;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  justify-content: center;
+}
+
+.comfy-img-preview img {
+  object-fit: contain;
+  width: var(--comfy-img-preview-width);
+  height: var(--comfy-img-preview-height);
+}
+
+.comfy-img-preview video {
+  pointer-events: auto;
+  object-fit: contain;
+  height: 100%;
+  width: 100%;
+}
+
+.litegraph.litesearchbox {
+  z-index: var(--z-index-overlay) !important;
+  background-color: var(--background);
+  overflow: hidden;
+  display: block;
+}
+
+.litegraph.litesearchbox input,
+.litegraph.litesearchbox select {
+  background-color: var(--input);
+  color: var(--foreground);
+}
+
+.litegraph.lite-search-item {
+  color: var(--foreground);
+  background-color: var(--input);
+  filter: brightness(80%);
+  will-change: transform;
+  padding-left: 0.2em;
+}
+
+.litegraph.lite-search-item.generic_type {
+  color: var(--foreground);
+  filter: brightness(50%);
+  will-change: transform;
+}

package/src/css/_markdown.css

@@ -0,0 +1,227 @@
+.comfy-markdown {
+  display: grid;
+  & > textarea,
+  .tiptap {
+    grid-area: 1 / 1 / 2 / 2;
+  }
+
+  & > textarea {
+    opacity: 0;
+    pointer-events: none;
+    font-family: var(--font-mono);
+  }
+
+  &.editing {
+    & > textarea {
+      opacity: 1;
+      pointer-events: all;
+    }
+
+    .tiptap {
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+
+  .tiptap {
+    overflow-y: auto;
+    font-size: var(--comfy-textarea-font-size);
+
+    :first-child {
+      margin-top: 0;
+    }
+
+    :last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.comfy-markdown .tiptap blockquote {
+  border-left: medium solid;
+  margin-left: 1em;
+  padding-left: 0.5em;
+}
+
+.comfy-markdown .tiptap pre {
+  border: thin dotted;
+  border-radius: 0.5em;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+.comfy-markdown .tiptap table {
+  border-collapse: collapse;
+}
+
+.comfy-markdown .tiptap th {
+  text-align: left;
+  background: var(--background);
+}
+
+.comfy-markdown .tiptap th,
+.comfy-markdown .tiptap td {
+  padding: 0.5em;
+  border: thin solid;
+}
+
+.comfy-markdown .tiptap h1,
+.comfy-markdown .tiptap h2,
+.comfy-markdown .tiptap h3,
+.comfy-markdown .tiptap h4,
+.comfy-markdown .tiptap h5,
+.comfy-markdown .tiptap h6,
+.comfy-markdown-content h1,
+.comfy-markdown-content h2,
+.comfy-markdown-content h3,
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  margin-block: 0.67em;
+}
+
+.comfy-markdown-content h1,
+.comfy-markdown-content h2,
+.comfy-markdown-content h3,
+.comfy-markdown-content h4,
+.comfy-markdown-content h5,
+.comfy-markdown-content h6 {
+  line-height: 1.2;
+}
+
+.comfy-markdown-content {
+  font-size: var(--comfy-markdown-font-size, var(--comfy-textarea-font-size));
+  line-height: 1.6;
+  word-wrap: break-word;
+}
+
+.comfy-markdown-content h1 {
+  font-size: calc(22em / 14);
+  font-weight: 700;
+}
+
+.comfy-markdown-content h2 {
+  font-size: calc(18em / 14);
+  font-weight: 700;
+}
+
+.comfy-markdown-content h3 {
+  font-size: calc(16em / 14);
+  font-weight: 700;
+}
+
+.comfy-markdown-content p {
+  margin: 0 0 0.5em;
+}
+
+.comfy-markdown-content p:last-child {
+  margin-bottom: 0;
+}
+
+.comfy-markdown-content *:first-child {
+  margin-top: 0;
+}
+
+.comfy-markdown-content ul,
+.comfy-markdown-content ol {
+  padding-left: 2rem;
+  margin: 0.5rem 0;
+}
+
+.comfy-markdown-content ul ul,
+.comfy-markdown-content ol ol,
+.comfy-markdown-content ul ol,
+.comfy-markdown-content ol ul {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+
+.comfy-markdown-content li {
+  margin: 0.5rem 0;
+}
+
+.comfy-markdown-content code {
+  color: var(--primary);
+  background-color: var(--secondary);
+  border-radius: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-family: monospace;
+}
+
+.comfy-markdown-content pre {
+  background-color: var(--secondary);
+  border-radius: 0.25rem;
+  padding: 1rem;
+  margin: 1rem 0;
+  overflow-x: auto;
+}
+
+.comfy-markdown-content pre code {
+  background-color: transparent;
+  padding: 0;
+  color: var(--foreground);
+}
+
+.comfy-markdown-content table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.comfy-markdown-content th,
+.comfy-markdown-content td {
+  padding: 0.5rem;
+}
+
+.comfy-markdown-content th {
+  color: var(--foreground);
+}
+
+.comfy-markdown-content td {
+  color: var(--muted-foreground);
+}
+
+.comfy-markdown-content tr {
+  border-bottom: 1px solid var(--secondary);
+}
+
+.comfy-markdown-content tr:last-child {
+  border-bottom: none;
+}
+
+.comfy-markdown-content thead {
+  border-bottom: 1px solid var(--foreground);
+}
+
+.comfy-markdown-content a {
+  color: var(--muted-foreground);
+  text-decoration: underline;
+}
+
+.comfy-markdown-content img,
+.comfy-markdown-content video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.comfy-markdown-content blockquote {
+  border-left: 3px solid var(--primary);
+  padding-left: 0.75em;
+  margin: 0.5em 0;
+  opacity: 0.8;
+}
+
+.comfy-markdown-content hr {
+  border: none;
+  border-top: 1px solid var(--border);
+  margin: 1em 0;
+}
+
+.comfy-markdown-content strong {
+  font-weight: 700;
+}
+
+.comfy-markdown-content em {
+  font-style: italic;
+}