@foblex/flow 18.2.1 → 18.4.0

package/styles/domains/_node-group.scss

@@ -0,0 +1,230 @@
+@mixin _node-group-scope($scoped: true) {
+  @if $scoped {
+    f-flow,
+    .f-flow {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin _node-frame() {
+  width: var(--ff-node-width);
+  min-height: var(--ff-node-min-height);
+  padding: var(--ff-node-padding);
+  box-sizing: border-box;
+  color: var(--ff-node-color);
+  text-align: center;
+  background: var(--ff-node-background-color);
+  border: 1px solid var(--ff-node-border-color);
+  border-radius: var(--ff-node-border-radius);
+  box-shadow: var(--ff-node-shadow);
+
+  .node-content {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  &.f-selected {
+    border-color: var(--ff-node-border-color-selected);
+    box-shadow: var(--ff-node-shadow-selected);
+  }
+
+  &.f-dragging {
+    box-shadow: var(--ff-node-shadow-selected);
+  }
+}
+
+@mixin _group-frame() {
+  min-width: var(--ff-group-min-width);
+  min-height: var(--ff-group-min-height);
+  padding: var(--ff-group-padding);
+  box-sizing: border-box;
+  color: var(--ff-group-color);
+  background: var(--ff-group-background-color);
+  border: 1px solid var(--ff-group-border-color);
+  border-radius: var(--ff-group-border-radius);
+
+  &.f-selected {
+    border-color: var(--ff-group-border-color-selected);
+  }
+}
+
+@mixin node($scoped: true, $selectorless: false) {
+  @if $selectorless {
+    @include _node-frame();
+  } @else {
+    @include _node-group-scope($scoped) {
+      .f-node {
+        @include _node-frame();
+      }
+    }
+  }
+}
+
+@mixin group($scoped: true, $selectorless: false) {
+  @if $selectorless {
+    @include _group-frame();
+  } @else {
+    @include _node-group-scope($scoped) {
+      .f-group {
+        @include _group-frame();
+      }
+    }
+  }
+}
+
+@mixin _grouping-drop-active($padding-var) {
+  &.f-grouping-drop-active {
+    border-color: var(--ff-grouping-drop-target-border-color);
+    border-style: var(--ff-grouping-drop-target-border-style);
+    border-width: var(--ff-grouping-drop-target-border-width);
+  }
+
+  &.f-grouping-over-boundary {
+    border-color: var(--ff-grouping-drop-target-border-color-active);
+    border-style: var(--ff-grouping-drop-target-border-style-active);
+    border-width: var(--ff-grouping-drop-target-border-width-active);
+  }
+}
+
+@mixin grouping($scoped: true) {
+  @if $scoped {
+    @include _node-group-scope($scoped) {
+      &.f-dragging {
+        .f-node {
+          @include _grouping-drop-active(var(--ff-node-padding));
+        }
+
+        .f-group {
+          @include _grouping-drop-active(var(--ff-group-padding));
+        }
+      }
+    }
+  } @else {
+    f-flow,
+    .f-flow {
+      &.f-dragging {
+        .f-node {
+          @include _grouping-drop-active(var(--ff-node-padding));
+        }
+
+        .f-group {
+          @include _grouping-drop-active(var(--ff-group-padding));
+        }
+      }
+    }
+  }
+}
+
+@mixin drag-handle($scoped: true) {
+  @include _node-group-scope($scoped) {
+    .f-drag-handle {
+      cursor: move;
+      img {
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+@mixin resize-handle($scoped: true) {
+  @include _node-group-scope($scoped) {
+    .f-resize-handle {
+      position: absolute;
+      width: var(--ff-handle-size);
+      height: var(--ff-handle-size);
+      box-sizing: border-box;
+      border: 1px solid var(--ff-handle-border-color);
+      border-radius: var(--ff-handle-radius);
+      background: var(--ff-handle-background-color);
+
+      &.f-resize-handle-left {
+        left: 0;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        cursor: col-resize;
+      }
+
+      &.f-resize-handle-left-top {
+        left: 0;
+        top: 0;
+        transform: translate(-50%, -50%);
+        cursor: nwse-resize;
+      }
+
+      &.f-resize-handle-top {
+        left: 50%;
+        top: 0;
+        transform: translate(-50%, -50%);
+        cursor: row-resize;
+      }
+
+      &.f-resize-handle-right-top {
+        right: 0;
+        top: 0;
+        transform: translate(50%, -50%);
+        cursor: nesw-resize;
+      }
+
+      &.f-resize-handle-right {
+        right: 0;
+        top: 50%;
+        transform: translate(50%, -50%);
+        cursor: col-resize;
+      }
+
+      &.f-resize-handle-right-bottom {
+        right: 0;
+        bottom: 0;
+        transform: translate(50%, 50%);
+        cursor: nwse-resize;
+      }
+
+      &.f-resize-handle-bottom {
+        left: 50%;
+        bottom: 0;
+        transform: translate(-50%, 50%);
+        cursor: row-resize;
+      }
+
+      &.f-resize-handle-left-bottom {
+        left: 0;
+        bottom: 0;
+        transform: translate(-50%, 50%);
+        cursor: nesw-resize;
+      }
+    }
+  }
+}
+
+@mixin rotate-handle($scoped: true) {
+  @include _node-group-scope($scoped) {
+    .f-rotate-handle {
+      position: absolute;
+      left: 50%;
+      top: -40px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ff-rotate-handle-size);
+      height: var(--ff-rotate-handle-size);
+      box-sizing: border-box;
+      border: 1px solid var(--ff-handle-border-color);
+      border-radius: 50%;
+      background: var(--ff-handle-background-color);
+      transform: translateX(-50%);
+      cursor: grab;
+    }
+  }
+}
+
+@mixin node-group($scoped: true) {
+  @include node($scoped);
+  @include group($scoped);
+  @include drag-handle($scoped);
+  @include resize-handle($scoped);
+  @include rotate-handle($scoped);
+}

package/styles/domains/_plugins.scss

@@ -0,0 +1,100 @@
+@mixin _plugins-scope($scoped: true) {
+  @if $scoped {
+    f-flow,
+    .f-flow {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin background($scoped: true) {
+  @include _plugins-scope($scoped) {
+    .f-background {
+      line,
+      path {
+        stroke: var(--ff-background-line-color);
+      }
+
+      circle {
+        fill: var(--ff-background-dot-color);
+      }
+    }
+  }
+}
+
+@mixin selection-area($scoped: true) {
+  @include _plugins-scope($scoped) {
+    .f-selection-area {
+      box-sizing: border-box;
+      background: var(--ff-selection-area-color);
+      border: 1px solid var(--ff-selection-area-border-color);
+    }
+  }
+}
+
+@mixin minimap($scoped: true) {
+  @include _plugins-scope($scoped) {
+    .f-minimap {
+      overflow: hidden;
+      background: var(--ff-minimap-background-color);
+      border: 1px solid var(--ff-minimap-border-color);
+      border-radius: var(--ff-minimap-border-radius);
+      box-shadow: var(--ff-minimap-shadow);
+      bottom: 16px;
+      right: 16px;
+      width: 140px;
+      height: 120px;
+
+      .f-minimap-node,
+      .f-minimap-group {
+        fill: var(--ff-minimap-node-color);
+      }
+
+      .f-minimap-node,
+      .f-minimap-group {
+        &.f-selected {
+          fill: var(--ff-minimap-node-selected-color);
+        }
+      }
+
+      .f-minimap-view {
+        fill: var(--ff-minimap-view-color);
+        stroke: var(--ff-minimap-view-border-color);
+        stroke-width: 1;
+      }
+    }
+  }
+}
+
+@mixin magnetic-lines($scoped: true) {
+  @include _plugins-scope($scoped) {
+    .f-magnetic-lines,
+    .f-line-alignment {
+      .f-line {
+        background: var(--ff-magnetic-line-color);
+      }
+    }
+  }
+}
+
+@mixin magnetic-rects($scoped: true) {
+  @include _plugins-scope($scoped) {
+    .f-magnetic-rects {
+      .f-rect {
+        box-sizing: border-box;
+        background: var(--ff-magnetic-rect-fill);
+        border: 1px solid var(--ff-magnetic-rect-border-color);
+      }
+    }
+  }
+}
+
+@mixin plugins($scoped: true) {
+  @include background($scoped);
+  @include selection-area($scoped);
+  @include minimap($scoped);
+  @include magnetic-lines($scoped);
+  @include magnetic-rects($scoped);
+}

package/styles/tokens/_ff-aliases.scss

@@ -0,0 +1,117 @@
+@mixin ff-aliases() {
+  :root {
+    --ff-flow-background-color: var(--ff-color-surface-page);
+    --ff-flow-text-color: var(--ff-color-text-primary);
+    --ff-flow-font-family: var(--ff-font-sans);
+    --ff-flow-font-size: var(--ff-font-size-body);
+
+    --ff-canvas-background-color: var(--ff-color-surface-canvas);
+
+    --ff-node-background-color: var(--ff-color-surface-card);
+    --ff-node-background-color-inverse: var(--ff-color-text-primary);
+    --ff-node-border-color: var(--ff-color-border-default);
+    --ff-node-border-color-selected: var(--ff-color-border-accent);
+    --ff-node-color: var(--ff-color-text-primary);
+    --ff-node-border-radius: var(--ff-radius-node);
+    --ff-node-shadow: var(--ff-shadow-surface);
+    --ff-node-shadow-selected: var(--ff-shadow-floating);
+    --ff-node-width: 120px;
+    --ff-node-min-height: 56px;
+    --ff-node-padding: 24px;
+
+    --ff-group-background-color: var(--ff-color-surface-group);
+    --ff-group-background-color-active: var(--ff-color-surface-group-active);
+    --ff-group-border-color: var(--ff-color-border-subtle);
+    --ff-group-border-color-selected: var(--ff-color-border-accent);
+    --ff-group-border-color-active: var(--ff-color-border-accent);
+    --ff-group-color: var(--ff-color-text-secondary);
+    --ff-group-border-radius: var(--ff-radius-group);
+    --ff-group-min-width: 180px;
+    --ff-group-min-height: 120px;
+    --ff-group-padding: 24px;
+    --ff-grouping-drop-target-border-color: var(--ff-color-grouping-drop-target-border);
+    --ff-grouping-drop-target-border-style: dashed;
+    --ff-grouping-drop-target-border-width: 1px;
+    --ff-grouping-drop-target-border-color-active: var(--ff-color-grouping-drop-target-border-active);
+    --ff-grouping-drop-target-border-style-active: dashed;
+    --ff-grouping-drop-target-border-width-active: 2px;
+
+    --ff-handle-background-color: var(--ff-color-surface-card);
+    --ff-handle-border-color: var(--ff-color-border-strong);
+    --ff-handle-color: var(--ff-color-text-secondary);
+    --ff-handle-size: 12px;
+    --ff-handle-radius: var(--ff-radius-control);
+    --ff-rotate-handle-size: 16px;
+
+    --ff-connector-background-color: var(--ff-color-surface-card);
+    --ff-connector-border-color: var(--ff-color-border-default);
+    --ff-connector-connected-color: var(--ff-color-connector-connected);
+    --ff-connector-accent-color: var(--ff-color-accent);
+    --ff-connector-disabled-color: var(--ff-color-disabled-surface);
+    --ff-connector-disabled-border-color: var(--ff-color-disabled-border);
+    --ff-connector-size: 16px;
+    --ff-connector-node-ring-color: var(--ff-canvas-background-color);
+
+    --ff-outlet-background-color: var(--ff-color-surface-muted);
+    --ff-outlet-border-color: var(--ff-color-border-default);
+    --ff-outlet-color: var(--ff-color-accent);
+    --ff-outlet-disabled-background-color: var(--ff-color-disabled-surface);
+    --ff-outlet-disabled-border-color: var(--ff-color-disabled-border);
+    --ff-outlet-disabled-color: var(--ff-color-disabled-text);
+    --ff-outlet-border-radius: var(--ff-radius-pill);
+    --ff-outlet-padding-y: 6px;
+    --ff-outlet-padding-x: 12px;
+
+    --ff-connection-color: var(--ff-color-connection);
+    --ff-snap-connection-color: var(--ff-color-connection-muted);
+    --ff-connection-hover-color: var(--ff-color-connection-hover);
+    --ff-connection-selected-color: var(--ff-color-accent);
+    --ff-connection-label-color: var(--ff-color-text-secondary);
+    --ff-connection-content-color: var(--ff-node-color);
+    --ff-connection-content-background-color: var(--ff-node-background-color);
+    --ff-connection-content-border-color: var(--ff-node-border-color);
+    --ff-connection-content-border-color-selected: var(--ff-connection-selected-color);
+    --ff-connection-content-border-radius: var(--ff-node-border-radius);
+    --ff-connection-content-font-size: 13px;
+    --ff-connection-content-padding-y: 2px;
+    --ff-connection-content-padding-x: 8px;
+    --ff-connection-width: 2px;
+    --ff-connection-hit-width: 14px;
+    --ff-connection-drag-handle-fill: var(--ff-color-surface-card);
+    --ff-connection-drag-handle-stroke: var(--ff-color-accent);
+    --ff-marker-color: var(--ff-connection-color);
+    --ff-waypoint-fill: var(--ff-color-waypoint-fill);
+    --ff-waypoint-stroke: var(--ff-color-waypoint-stroke);
+    --ff-waypoint-candidate-fill: var(--ff-color-waypoint-candidate-fill);
+    --ff-waypoint-candidate-stroke: var(--ff-color-waypoint-candidate-stroke);
+
+    --ff-background-line-color: var(--ff-color-grid);
+    --ff-background-dot-color: var(--ff-color-grid-strong);
+    --ff-selection-area-color: var(--ff-color-selection-fill);
+    --ff-selection-area-border-color: var(--ff-color-selection-stroke);
+
+    --ff-minimap-background-color: var(--ff-color-minimap-surface);
+    --ff-minimap-border-color: var(--ff-color-border-default);
+    --ff-minimap-node-color: var(--ff-color-minimap-node);
+    --ff-minimap-node-selected-color: var(--ff-color-accent);
+    --ff-minimap-view-color: var(--ff-color-minimap-view);
+    --ff-minimap-view-border-color: var(--ff-color-selection-stroke);
+    --ff-minimap-border-radius: var(--ff-radius-node);
+    --ff-minimap-shadow: var(--ff-shadow-floating);
+
+    --ff-magnetic-line-color: var(--ff-color-magnetic-line);
+    --ff-magnetic-rect-fill: var(--ff-color-magnetic-rect-fill);
+    --ff-magnetic-rect-border-color: var(--ff-color-magnetic-rect-border);
+
+    --ff-external-item-background-color: var(--ff-color-surface-card);
+    --ff-external-item-border-color: var(--ff-color-border-default);
+    --ff-external-item-color: var(--ff-color-text-primary);
+    --ff-external-item-disabled-color: var(--ff-color-disabled-text);
+    --ff-external-item-disabled-background-color: var(--ff-color-disabled-surface);
+    --ff-external-item-border-radius: var(--ff-radius-node);
+    --ff-external-item-shadow: var(--ff-shadow-surface);
+    --ff-external-item-preview-shadow: var(--ff-shadow-floating);
+    --ff-external-item-placeholder-background-color: var(--ff-color-surface-soft);
+    --ff-external-item-placeholder-border-color: var(--ff-color-border-subtle);
+  }
+}

package/styles/tokens/_primitive.scss

@@ -0,0 +1,86 @@
+@mixin primitive-tokens() {
+  :root {
+    --ff-white: #ffffff;
+    --ff-black: #000000;
+
+    --ff-gray-0: #ffffff;
+    --ff-gray-25: #fcfcfc;
+    --ff-gray-50: #f8f8f7;
+    --ff-gray-75: #f2f2f0;
+    --ff-gray-100: #e9e9e6;
+    --ff-gray-150: #dcdcd7;
+    --ff-gray-200: #c9c9c1;
+    --ff-gray-300: #afafa5;
+    --ff-gray-400: #8d8d81;
+    --ff-gray-500: #69695f;
+    --ff-gray-600: #505048;
+    --ff-gray-700: #3c3c36;
+    --ff-gray-800: #272722;
+    --ff-gray-900: #1b1b18;
+    --ff-gray-950: #141412;
+    --ff-gray-1000: #0f0f0d;
+
+    --ff-alpha-black-04: rgba(15, 15, 13, 0.04);
+    --ff-alpha-black-06: rgba(15, 15, 13, 0.06);
+    --ff-alpha-black-08: rgba(15, 15, 13, 0.08);
+    --ff-alpha-black-10: rgba(15, 15, 13, 0.1);
+    --ff-alpha-black-12: rgba(15, 15, 13, 0.12);
+    --ff-alpha-black-15: rgba(15, 15, 13, 0.15);
+    --ff-alpha-black-20: rgba(15, 15, 13, 0.2);
+    --ff-alpha-black-30: rgba(15, 15, 13, 0.3);
+    --ff-alpha-black-40: rgba(15, 15, 13, 0.4);
+    --ff-alpha-black-60: rgba(15, 15, 13, 0.6);
+
+    --ff-alpha-white-04: rgba(255, 255, 255, 0.04);
+    --ff-alpha-white-06: rgba(255, 255, 255, 0.06);
+    --ff-alpha-white-08: rgba(255, 255, 255, 0.08);
+    --ff-alpha-white-10: rgba(255, 255, 255, 0.1);
+    --ff-alpha-white-12: rgba(255, 255, 255, 0.12);
+    --ff-alpha-white-15: rgba(255, 255, 255, 0.15);
+    --ff-alpha-white-20: rgba(255, 255, 255, 0.2);
+    --ff-alpha-white-30: rgba(255, 255, 255, 0.3);
+    --ff-alpha-white-40: rgba(255, 255, 255, 0.4);
+    --ff-alpha-white-60: rgba(255, 255, 255, 0.6);
+
+    --ff-blue-100: #e8f2ff;
+    --ff-blue-200: #bad8ff;
+    --ff-blue-300: #7db7ff;
+    --ff-blue-400: #4176ff;
+    --ff-blue-500: #2759db;
+    --ff-blue-600: #1b3f9e;
+
+    --ff-green-100: #e7f7ef;
+    --ff-green-300: #71c795;
+    --ff-green-400: #2b9b5f;
+    --ff-green-500: #1e7748;
+
+    --ff-yellow-100: #fff5de;
+    --ff-yellow-300: #e1b354;
+    --ff-yellow-400: #bb8121;
+    --ff-yellow-500: #916112;
+
+    --ff-red-100: #feeceb;
+    --ff-red-300: #e48d85;
+    --ff-red-400: #c55245;
+    --ff-red-500: #9e3a2f;
+
+    --ff-radius-4: 4px;
+    --ff-radius-6: 6px;
+    --ff-radius-pill: 999px;
+
+    --ff-font-family-sans:
+      'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+    --ff-font-family-mono:
+      ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
+      'Courier New', monospace;
+    --ff-font-size-xs: 12px;
+    --ff-font-size-sm: 14px;
+    --ff-font-size-md: 16px;
+    --ff-font-size-lg: 18px;
+
+    --ff-shadow-1: 0 1px 2px rgba(15, 15, 13, 0.05), 0 8px 20px rgba(15, 15, 13, 0.04);
+    --ff-shadow-2: 0 10px 28px rgba(15, 15, 13, 0.08), 0 3px 10px rgba(15, 15, 13, 0.05);
+    --ff-shadow-3: 0 18px 48px rgba(15, 15, 13, 0.12), 0 6px 16px rgba(15, 15, 13, 0.08);
+  }
+}

package/styles/tokens/_semantic.scss

@@ -0,0 +1,131 @@
+@mixin semantic-tokens() {
+  :root {
+    --ff-color-surface-page: var(--ff-gray-25);
+    --ff-color-surface-canvas: var(--ff-gray-25);
+    --ff-color-surface-card: var(--ff-white);
+    --ff-color-surface-group: rgba(65, 118, 255, 0.14);
+    --ff-color-surface-group-active: rgba(65, 118, 255, 0.2);
+    --ff-color-surface-muted: var(--ff-gray-50);
+    --ff-color-surface-soft: var(--ff-gray-75);
+    --ff-color-surface-accent-soft: rgba(65, 118, 255, 0.1);
+
+    --ff-color-border-default: var(--ff-alpha-black-12);
+    --ff-color-border-subtle: var(--ff-alpha-black-08);
+    --ff-color-border-strong: var(--ff-alpha-black-20);
+    --ff-color-border-accent: var(--ff-blue-500);
+
+    --ff-color-text-primary: var(--ff-gray-800);
+    --ff-color-text-secondary: var(--ff-gray-500);
+    --ff-color-text-tertiary: var(--ff-gray-400);
+    --ff-color-text-inverse: var(--ff-white);
+
+    --ff-color-accent: var(--ff-blue-500);
+    --ff-color-accent-strong: var(--ff-blue-600);
+    --ff-color-success: var(--ff-green-400);
+    --ff-color-warning: var(--ff-yellow-400);
+    --ff-color-danger: var(--ff-red-400);
+
+    --ff-color-disabled-surface: var(--ff-gray-100);
+    --ff-color-disabled-border: var(--ff-alpha-black-10);
+    --ff-color-disabled-text: var(--ff-gray-300);
+
+    --ff-color-selection-fill: rgba(65, 118, 255, 0.12);
+    --ff-color-selection-stroke: rgba(65, 118, 255, 0.28);
+
+    --ff-color-grid: var(--ff-alpha-black-08);
+    --ff-color-grid-strong: var(--ff-alpha-black-15);
+
+    --ff-color-connector-connected: var(--ff-blue-500);
+    --ff-color-connection: var(--ff-gray-600);
+    --ff-color-connection-muted: var(--ff-gray-300);
+    --ff-color-connection-hover: var(--ff-alpha-black-12);
+    --ff-color-grouping-drop-target-border: var(--ff-gray-800);
+    --ff-color-grouping-drop-target-border-active: var(--ff-gray-800);
+    --ff-color-waypoint-fill: var(--ff-white);
+    --ff-color-waypoint-stroke: var(--ff-blue-500);
+    --ff-color-waypoint-candidate-fill: var(--ff-white);
+    --ff-color-waypoint-candidate-stroke: var(--ff-green-400);
+
+    --ff-color-minimap-surface: var(--ff-white);
+    --ff-color-minimap-node: var(--ff-gray-700);
+    --ff-color-minimap-view: rgba(65, 118, 255, 0.14);
+
+    --ff-color-magnetic-line: var(--ff-blue-500);
+    --ff-color-magnetic-rect-fill: rgba(65, 118, 255, 0.08);
+    --ff-color-magnetic-rect-border: rgba(65, 118, 255, 0.24);
+
+    --ff-radius-node: var(--ff-radius-4);
+    --ff-radius-group: var(--ff-radius-4);
+    --ff-radius-control: var(--ff-radius-4);
+    --ff-radius-socket-square: var(--ff-radius-6);
+    --ff-radius-pill: var(--ff-radius-pill);
+
+    --ff-font-sans: var(--ff-font-family-sans);
+    --ff-font-mono: var(--ff-font-family-mono);
+    --ff-font-size-body: var(--ff-font-size-sm);
+    --ff-font-size-label: var(--ff-font-size-xs);
+
+    --ff-shadow-surface: var(--ff-shadow-1);
+    --ff-shadow-floating: var(--ff-shadow-2);
+  }
+
+  .dark,
+  [data-theme='dark'] {
+    --ff-color-surface-page: var(--ff-gray-1000);
+    --ff-color-surface-canvas: var(--ff-gray-1000);
+    --ff-color-surface-card: var(--ff-gray-950);
+    --ff-color-surface-group: rgba(125, 183, 255, 0.18);
+    --ff-color-surface-group-active: rgba(125, 183, 255, 0.24);
+    --ff-color-surface-muted: var(--ff-gray-900);
+    --ff-color-surface-soft: var(--ff-gray-900);
+    --ff-color-surface-accent-soft: rgba(125, 183, 255, 0.14);
+
+    --ff-color-border-default: var(--ff-alpha-white-12);
+    --ff-color-border-subtle: var(--ff-alpha-white-08);
+    --ff-color-border-strong: var(--ff-alpha-white-20);
+    --ff-color-border-accent: var(--ff-blue-300);
+
+    --ff-color-text-primary: var(--ff-gray-100);
+    --ff-color-text-secondary: var(--ff-gray-300);
+    --ff-color-text-tertiary: var(--ff-gray-400);
+    --ff-color-text-inverse: var(--ff-gray-1000);
+
+    --ff-color-accent: var(--ff-blue-300);
+    --ff-color-accent-strong: var(--ff-blue-200);
+    --ff-color-success: var(--ff-green-300);
+    --ff-color-warning: var(--ff-yellow-300);
+    --ff-color-danger: var(--ff-red-300);
+
+    --ff-color-disabled-surface: var(--ff-gray-800);
+    --ff-color-disabled-border: var(--ff-alpha-white-10);
+    --ff-color-disabled-text: var(--ff-gray-500);
+
+    --ff-color-selection-fill: rgba(125, 183, 255, 0.16);
+    --ff-color-selection-stroke: rgba(125, 183, 255, 0.34);
+
+    --ff-color-grid: var(--ff-alpha-white-08);
+    --ff-color-grid-strong: var(--ff-alpha-white-15);
+
+    --ff-color-connector-connected: var(--ff-blue-300);
+    --ff-color-connection: var(--ff-gray-200);
+    --ff-color-connection-muted: var(--ff-gray-500);
+    --ff-color-connection-hover: var(--ff-alpha-white-12);
+    --ff-color-grouping-drop-target-border: var(--ff-gray-100);
+    --ff-color-grouping-drop-target-border-active: var(--ff-gray-100);
+    --ff-color-waypoint-fill: var(--ff-gray-950);
+    --ff-color-waypoint-stroke: var(--ff-blue-300);
+    --ff-color-waypoint-candidate-fill: var(--ff-white);
+    --ff-color-waypoint-candidate-stroke: var(--ff-green-300);
+
+    --ff-color-minimap-surface: var(--ff-gray-950);
+    --ff-color-minimap-node: var(--ff-gray-200);
+    --ff-color-minimap-view: rgba(125, 183, 255, 0.18);
+
+    --ff-color-magnetic-line: var(--ff-blue-300);
+    --ff-color-magnetic-rect-fill: rgba(125, 183, 255, 0.1);
+    --ff-color-magnetic-rect-border: rgba(125, 183, 255, 0.24);
+
+    --ff-shadow-surface: 0 1px 2px rgba(0, 0, 0, 0.28), 0 8px 20px rgba(0, 0, 0, 0.14);
+    --ff-shadow-floating: 0 14px 36px rgba(0, 0, 0, 0.26), 0 4px 12px rgba(0, 0, 0, 0.16);
+  }
+}