@echothink-ui/workflow 0.1.0

package/src/styles.css

@@ -0,0 +1,312 @@
+@import "@echothink-ui/core/styles.css";
+
+/* Carbon-aligned styles for this package's custom components */
+
+.eth-workflow-pipeline-view,
+.eth-workflow-handoff-panel,
+.eth-workflow-process-designer,
+.eth-workflow-rule-builder,
+.eth-workflow-condition-builder,
+.eth-workflow-rule-simulation,
+.eth-workflow-approval-editor,
+.eth-workflow-process-timeline,
+.eth-pipeline-stage,
+.eth-process-designer,
+.eth-rule-builder,
+.eth-condition-builder,
+.eth-rule-simulation,
+.eth-workflow-handoff {
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-family);
+}
+
+.eth-workflow-pipeline-view,
+.eth-workflow-handoff,
+.eth-workflow-handoff-panel {
+  display: block;
+  overflow-x: auto;
+  padding-block-end: var(--eth-space-sm);
+}
+
+.eth-workflow-pipeline-view__stages {
+  align-items: stretch;
+  display: flex;
+  gap: var(--eth-space-md);
+  list-style: none;
+  margin: 0;
+  min-inline-size: max-content;
+  padding: 0;
+}
+
+.eth-workflow-pipeline-view__stages > li {
+  display: flex;
+}
+
+.eth-workflow-pipeline-stage,
+.eth-pipeline-stage {
+  align-items: flex-start;
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-inline-start: 4px solid transparent;
+  border-radius: 0;
+  color: var(--eth-color-text-primary);
+  display: grid;
+  gap: var(--eth-space-sm);
+  font: inherit;
+  inline-size: 14rem;
+  min-block-size: 8rem;
+  padding: var(--eth-space-lg);
+  text-align: start;
+  transition:
+    background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    border-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+button.eth-workflow-pipeline-stage,
+button.eth-pipeline-stage {
+  cursor: pointer;
+}
+
+button.eth-workflow-pipeline-stage:hover,
+button.eth-pipeline-stage:hover {
+  background: var(--eth-color-layer-hover);
+}
+
+.eth-workflow-pipeline-stage:focus-visible,
+.eth-pipeline-stage:focus-visible {
+  outline: 2px solid var(--eth-color-focus);
+  outline-offset: -2px;
+}
+
+.eth-workflow-pipeline-stage--active,
+.eth-pipeline-stage--active {
+  border-inline-start-color: var(--eth-color-interactive-primary);
+}
+
+.eth-workflow-pipeline-stage strong,
+.eth-pipeline-stage strong {
+  font-weight: 600;
+}
+
+.eth-workflow-pipeline-stage small,
+.eth-pipeline-stage small {
+  color: var(--eth-color-text-secondary);
+}
+
+.eth-workflow-process-designer,
+.eth-process-designer {
+  background: var(--eth-color-background);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  gap: var(--eth-space-lg);
+  padding: var(--eth-space-lg);
+}
+
+.eth-workflow-process-designer > header,
+.eth-process-designer > header,
+.eth-workflow-handoff-panel > header,
+.eth-workflow-rule-simulation > header {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-md);
+  justify-content: space-between;
+}
+
+.eth-workflow-process-designer h3,
+.eth-process-designer h3,
+.eth-workflow-handoff-panel h3,
+.eth-workflow-rule-simulation h3 {
+  margin: 0;
+}
+
+.eth-workflow-process-designer svg,
+.eth-process-designer svg {
+  background-color: var(--eth-color-layer-01);
+  background-image: radial-gradient(var(--eth-color-border-subtle) 1px, transparent 1px);
+  background-size: var(--eth-space-2xl) var(--eth-space-2xl);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: block;
+  inline-size: 100%;
+  min-block-size: 26rem;
+  touch-action: none;
+}
+
+.eth-workflow-process-designer line,
+.eth-process-designer line {
+  stroke: var(--eth-color-border-strong);
+}
+
+.eth-workflow-process-designer marker path,
+.eth-process-designer marker path {
+  fill: var(--eth-color-border-strong);
+}
+
+.eth-workflow-process-designer text,
+.eth-process-designer text {
+  fill: var(--eth-color-text-primary);
+  font-family: var(--eth-font-family);
+}
+
+.eth-workflow-process-designer__node {
+  cursor: grab;
+}
+
+.eth-workflow-process-designer__node:active {
+  cursor: grabbing;
+}
+
+.eth-workflow-process-designer__node rect,
+.eth-workflow-process-designer__node polygon {
+  fill: var(--eth-color-layer-01);
+  rx: 0;
+  stroke: var(--eth-color-border-strong);
+  transition:
+    fill 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    stroke 110ms cubic-bezier(0.2, 0, 0.38, 0.9),
+    stroke-width 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.eth-workflow-process-designer__node:hover rect,
+.eth-workflow-process-designer__node:hover polygon {
+  fill: var(--eth-color-layer-hover);
+}
+
+.eth-workflow-process-designer__node--selected rect,
+.eth-workflow-process-designer__node--selected polygon {
+  stroke: var(--eth-color-focus);
+  stroke-width: 3px;
+}
+
+.eth-workflow-process-designer__node--decision polygon {
+  stroke: var(--eth-color-warning);
+}
+
+.eth-workflow-process-designer__node--start rect {
+  stroke: var(--eth-color-success);
+}
+
+.eth-workflow-process-designer__node--end rect {
+  stroke: var(--eth-color-info);
+}
+
+.eth-workflow-rule-builder,
+.eth-workflow-condition-builder,
+.eth-rule-builder,
+.eth-condition-builder {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-workflow-rule-builder__conditions {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-workflow-rule-builder__condition {
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  padding: var(--eth-space-lg);
+}
+
+.eth-workflow-condition-builder,
+.eth-condition-builder {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.eth-workflow-rule-simulation,
+.eth-rule-simulation {
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  gap: var(--eth-space-lg);
+  padding: var(--eth-space-lg);
+}
+
+.eth-workflow-rule-simulation__rule {
+  background: var(--eth-color-layer-02);
+  border: 1px solid var(--eth-color-border-subtle);
+  color: var(--eth-color-text-primary);
+  font-family: var(--eth-font-mono);
+  margin: 0;
+  overflow: auto;
+  padding: var(--eth-space-md);
+}
+
+.eth-workflow-handoff-panel {
+  background: var(--eth-color-layer-01);
+  border: 1px solid var(--eth-color-border-subtle);
+  border-radius: 0;
+  display: grid;
+  gap: var(--eth-space-lg);
+  min-inline-size: min(36rem, 100%);
+  padding: var(--eth-space-lg);
+}
+
+.eth-workflow-handoff-panel p {
+  color: var(--eth-color-text-secondary);
+  margin: 0;
+}
+
+.eth-workflow-handoff-panel form {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-workflow-approval-editor {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-workflow-approval-editor__step {
+  align-items: center;
+  border: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
+  padding: var(--eth-space-md);
+}
+
+.eth-workflow-process-timeline {
+  display: grid;
+  gap: var(--eth-space-lg);
+}
+
+.eth-workflow-process-timeline ol {
+  border-inline-start: 1px solid var(--eth-color-border-subtle);
+  display: grid;
+  gap: var(--eth-space-md);
+  list-style: none;
+  margin: 0;
+  padding: 0 0 0 var(--eth-space-lg);
+}
+
+.eth-workflow-process-timeline li {
+  align-items: center;
+  display: flex;
+  gap: var(--eth-space-sm);
+}
+
+.eth-workflow-process-timeline time {
+  color: var(--eth-color-text-secondary);
+  font-size: calc(0.75rem * var(--eth-text-scale, 1));
+  margin-inline-start: auto;
+}
+
+@media (max-width: 42rem) {
+  .eth-workflow-condition-builder,
+  .eth-condition-builder,
+  .eth-workflow-approval-editor__step {
+    grid-template-columns: 1fr;
+  }
+
+  .eth-workflow-process-designer > header,
+  .eth-process-designer > header,
+  .eth-workflow-handoff-panel > header,
+  .eth-workflow-rule-simulation > header {
+    align-items: stretch;
+    flex-direction: column;
+  }
+}