@beehexa/design-rules 2611.3.2 → 2611.4.1

package/dist/docs/tokens/flow.json

@@ -0,0 +1,497 @@
+{
+  "flow": {
+    "$description": "Operational VueFlow categories and fixed geometry. Category colours identify node kinds, never execution status; selected, focus and error remain independent.",
+    "category": {
+      "task": {
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.blue.11}",
+          "$description": "task identity foreground; not a workflow status."
+        },
+        "background": {
+          "$type": "color",
+          "$value": "{color.blue.3}",
+          "$description": "task identity background; not a workflow status."
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.blue.9}",
+          "$description": "task identity border; not a workflow status."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.blue.4}",
+          "$description": "task identity hover; not a workflow status."
+        }
+      },
+      "dependency": {
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.red.11}",
+          "$description": "dependency identity foreground; not a workflow status."
+        },
+        "background": {
+          "$type": "color",
+          "$value": "{color.red.3}",
+          "$description": "dependency identity background; not a workflow status."
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.red.9}",
+          "$description": "dependency identity border; not a workflow status."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.red.4}",
+          "$description": "dependency identity hover; not a workflow status."
+        }
+      },
+      "transformation": {
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.green.11}",
+          "$description": "transformation identity foreground; not a workflow status."
+        },
+        "background": {
+          "$type": "color",
+          "$value": "{color.green.3}",
+          "$description": "transformation identity background; not a workflow status."
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.green.9}",
+          "$description": "transformation identity border; not a workflow status."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.green.4}",
+          "$description": "transformation identity hover; not a workflow status."
+        }
+      },
+      "validation": {
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.red.11}",
+          "$description": "validation identity foreground; not a workflow status."
+        },
+        "background": {
+          "$type": "color",
+          "$value": "{color.red.3}",
+          "$description": "validation identity background; not a workflow status."
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.red.11}",
+          "$description": "validation identity border; not a workflow status."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.red.4}",
+          "$description": "validation identity hover; not a workflow status."
+        }
+      },
+      "pushStep": {
+        "foreground": {
+          "$type": "color",
+          "$value": "{color.yellow.11}",
+          "$description": "pushStep identity foreground; not a workflow status."
+        },
+        "background": {
+          "$type": "color",
+          "$value": "{color.yellow.3}",
+          "$description": "pushStep identity background; not a workflow status."
+        },
+        "border": {
+          "$type": "color",
+          "$value": "{color.yellow.9}",
+          "$description": "pushStep identity border; not a workflow status."
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "{color.yellow.4}",
+          "$description": "pushStep identity hover; not a workflow status."
+        }
+      },
+      "decision": {
+        "foreground": {
+          "$type": "color",
+          "$value": "#087f8c",
+          "$description": "decision label on paired background.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#7bdce5"
+            }
+          }
+        },
+        "background": {
+          "$type": "color",
+          "$value": "#e8f8fa",
+          "$description": "decision node surface.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#123c43"
+            }
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "#087f8c",
+          "$description": "decision meaningful frame and directed edge.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#7bdce5"
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "#e8f8fa",
+          "$description": "decision hovered surface; focus is separate.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#123c43"
+            }
+          }
+        }
+      },
+      "loop": {
+        "foreground": {
+          "$type": "color",
+          "$value": "#ad2171",
+          "$description": "loop label on paired background.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#f3a0d1"
+            }
+          }
+        },
+        "background": {
+          "$type": "color",
+          "$value": "#fcecf5",
+          "$description": "loop node surface.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#411b34"
+            }
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "#ad2171",
+          "$description": "loop meaningful frame and directed edge.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#f3a0d1"
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "#fcecf5",
+          "$description": "loop hovered surface; focus is separate.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#411b34"
+            }
+          }
+        }
+      },
+      "grouped": {
+        "foreground": {
+          "$type": "color",
+          "$value": "#7040a0",
+          "$description": "grouped label on paired background.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#c9a2ee"
+            }
+          }
+        },
+        "background": {
+          "$type": "color",
+          "$value": "#f3ecfa",
+          "$description": "grouped node surface.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#30213f"
+            }
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": "#7040a0",
+          "$description": "grouped meaningful frame and directed edge.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#c9a2ee"
+            }
+          }
+        },
+        "hover": {
+          "$type": "color",
+          "$value": "#f3ecfa",
+          "$description": "grouped hovered surface; focus is separate.",
+          "$extensions": {
+            "design.beehexa": {
+              "dark": "#30213f"
+            }
+          }
+        }
+      }
+    },
+    "geometry": {
+      "task": {
+        "width": {
+          "$type": "dimension",
+          "$value": "450px",
+          "$description": "Fixed operational task width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational task height; rendering and layout share this value."
+        }
+      },
+      "task_dependency": {
+        "width": {
+          "$type": "dimension",
+          "$value": "450px",
+          "$description": "Fixed operational task_dependency width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational task_dependency height; rendering and layout share this value."
+        }
+      },
+      "task_transformation": {
+        "width": {
+          "$type": "dimension",
+          "$value": "450px",
+          "$description": "Fixed operational task_transformation width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational task_transformation height; rendering and layout share this value."
+        }
+      },
+      "task_data": {
+        "width": {
+          "$type": "dimension",
+          "$value": "450px",
+          "$description": "Fixed operational task_data width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational task_data height; rendering and layout share this value."
+        }
+      },
+      "validationGroup": {
+        "width": {
+          "$type": "dimension",
+          "$value": "350px",
+          "$description": "Fixed operational validationGroup width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational validationGroup height; rendering and layout share this value."
+        }
+      },
+      "transformationGroup": {
+        "width": {
+          "$type": "dimension",
+          "$value": "350px",
+          "$description": "Fixed operational transformationGroup width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational transformationGroup height; rendering and layout share this value."
+        }
+      },
+      "pushStepsGroup": {
+        "width": {
+          "$type": "dimension",
+          "$value": "350px",
+          "$description": "Fixed operational pushStepsGroup width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational pushStepsGroup height; rendering and layout share this value."
+        }
+      },
+      "validation": {
+        "width": {
+          "$type": "dimension",
+          "$value": "200px",
+          "$description": "Fixed operational validation width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational validation height; rendering and layout share this value."
+        }
+      },
+      "transformation": {
+        "width": {
+          "$type": "dimension",
+          "$value": "200px",
+          "$description": "Fixed operational transformation width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational transformation height; rendering and layout share this value."
+        }
+      },
+      "push_step": {
+        "width": {
+          "$type": "dimension",
+          "$value": "200px",
+          "$description": "Fixed operational push_step width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "130px",
+          "$description": "Fixed operational push_step height; rendering and layout share this value."
+        }
+      },
+      "decision": {
+        "width": {
+          "$type": "dimension",
+          "$value": "160px",
+          "$description": "Fixed operational decision width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "160px",
+          "$description": "Fixed operational decision height; rendering and layout share this value."
+        }
+      },
+      "loop": {
+        "width": {
+          "$type": "dimension",
+          "$value": "120px",
+          "$description": "Fixed operational loop width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "120px",
+          "$description": "Fixed operational loop height; rendering and layout share this value."
+        }
+      },
+      "profile": {
+        "width": {
+          "$type": "dimension",
+          "$value": "240px",
+          "$description": "Fixed operational profile width; rendering and layout share this value."
+        },
+        "height": {
+          "$type": "dimension",
+          "$value": "100px",
+          "$description": "Fixed operational profile height; rendering and layout share this value."
+        }
+      }
+    },
+    "grid": {
+      "HORIZONTAL": {
+        "$type": "dimension",
+        "$value": "80px",
+        "$description": "Operational graph grid HORIZONTAL; preserve graph coordinates."
+      },
+      "VERTICAL": {
+        "$type": "dimension",
+        "$value": "40px",
+        "$description": "Operational graph grid VERTICAL; preserve graph coordinates."
+      },
+      "TASK_DATA_X_GAP": {
+        "$type": "dimension",
+        "$value": "300px",
+        "$description": "Operational graph grid TASK_DATA_X_GAP; preserve graph coordinates."
+      },
+      "GROUP_Y_OFFSET": {
+        "$type": "dimension",
+        "$value": "200px",
+        "$description": "Operational graph grid GROUP_Y_OFFSET; preserve graph coordinates."
+      }
+    },
+    "layout": {
+      "VALIDATION_NODE_Y_GAP": {
+        "$type": "dimension",
+        "$value": "100px",
+        "$description": "Operational graph layout VALIDATION_NODE_Y_GAP; preserve graph coordinates."
+      },
+      "TRANSFORMATION_NODE_Y_GAP": {
+        "$type": "dimension",
+        "$value": "100px",
+        "$description": "Operational graph layout TRANSFORMATION_NODE_Y_GAP; preserve graph coordinates."
+      },
+      "PUSH_STEP_NODE_Y_GAP": {
+        "$type": "dimension",
+        "$value": "80px",
+        "$description": "Operational graph layout PUSH_STEP_NODE_Y_GAP; preserve graph coordinates."
+      },
+      "PUSH_STEP_NODE_X_GAP": {
+        "$type": "dimension",
+        "$value": "120px",
+        "$description": "Operational graph layout PUSH_STEP_NODE_X_GAP; preserve graph coordinates."
+      },
+      "PUSH_STEP_BRANCH_X_GAP": {
+        "$type": "dimension",
+        "$value": "200px",
+        "$description": "Operational graph layout PUSH_STEP_BRANCH_X_GAP; preserve graph coordinates."
+      },
+      "EXPANDED_GROUP_X": {
+        "$type": "dimension",
+        "$value": "50px",
+        "$description": "Operational graph layout EXPANDED_GROUP_X; preserve graph coordinates."
+      },
+      "EXPANDED_GROUP_Y_START": {
+        "$type": "dimension",
+        "$value": "50px",
+        "$description": "Operational graph layout EXPANDED_GROUP_Y_START; preserve graph coordinates."
+      },
+      "TREE_LEVEL_Y_GAP": {
+        "$type": "dimension",
+        "$value": "150px",
+        "$description": "Operational graph layout TREE_LEVEL_Y_GAP; preserve graph coordinates."
+      },
+      "TREE_SIBLING_X_GAP": {
+        "$type": "dimension",
+        "$value": "250px",
+        "$description": "Operational graph layout TREE_SIBLING_X_GAP; preserve graph coordinates."
+      },
+      "TREE_MIN_WIDTH": {
+        "$type": "dimension",
+        "$value": "200px",
+        "$description": "Operational graph layout TREE_MIN_WIDTH; preserve graph coordinates."
+      }
+    },
+    "edge": {
+      "width": {
+        "$type": "dimension",
+        "$value": "2px",
+        "$description": "Operational graph edge width; preserve graph coordinates."
+      },
+      "marker": {
+        "$type": "dimension",
+        "$value": "15px",
+        "$description": "Operational graph edge marker; preserve graph coordinates."
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "20px",
+        "$description": "Operational graph edge radius; preserve graph coordinates."
+      },
+      "handle": {
+        "$type": "dimension",
+        "$value": "12px",
+        "$description": "Operational graph edge handle; preserve graph coordinates."
+      }
+    }
+  }
+}

package/dist/docs/tokens/opacity.json

@@ -0,0 +1,9 @@
+{
+  "opacity": {
+    "disabled": {
+      "$type": "number",
+      "$value": "0.4",
+      "$description": "Images, logos, avatars and illustrations inside something that is turned off. Never for buttons, inputs, text or icons: they use the disabled colour tokens."
+    }
+  }
+}

package/dist/docs/tokens/resize.json

@@ -0,0 +1,67 @@
+{
+  "resize": {
+    "divider": {
+      "$type": "dimension",
+      "$value": "{border.width.accent}",
+      "$description": "Visible divider thickness; do not use as the sole pointer hit area."
+    },
+    "target": {
+      "$type": "dimension",
+      "$value": "{size.target.minimum}",
+      "$description": "Minimum pointer/keyboard target around a resize divider."
+    },
+    "touchTarget": {
+      "$type": "dimension",
+      "$value": "{size.target.touch}",
+      "$description": "Touch target around a resize divider."
+    },
+    "handle": {
+      "width": {
+        "$type": "dimension",
+        "$value": "{space.200}",
+        "$description": "Visible handle width."
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "{space.400}",
+        "$description": "Visible handle height."
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.050}",
+        "$description": "Visible handle corner radius."
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{color.surface}",
+        "$description": "Handle surface paired with resize.grip."
+      },
+      "activeBackground": {
+        "$type": "color",
+        "$value": "{color.background.neutral.bold}",
+        "$description": "Hovered or dragged handle surface paired with resize.activeGrip."
+      }
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{color.border.bold}",
+      "$description": "Resize divider and grip at rest."
+    },
+    "active": {
+      "$type": "color",
+      "$value": "{color.border.focus}",
+      "$description": "Hovered, keyboard-focused or dragged resize divider."
+    },
+    "grip": {
+      "$type": "color",
+      "$value": "{color.icon}",
+      "$description": "Grip mark on surface."
+    },
+    "activeGrip": {
+      "$type": "color",
+      "$value": "{color.text.inverse}",
+      "$description": "Grip marks on the active neutral bold handle surface."
+    }
+  }
+}
+

package/dist/docs/tokens/size.json

@@ -1,5 +1,11 @@
 {
   "size": {
+    "icon": {
+      "default": { "$type": "dimension", "$value": "1rem", "$description": "16 px. Default icon beside 14px text, in buttons, menus, tables and form fields." },
+      "medium": { "$type": "dimension", "$value": "1.25rem", "$description": "20 px. Icon beside 16px text, in toolbars and page headers." },
+      "large": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Standalone status icon in a card or small empty state." },
+      "empty": { "$type": "dimension", "$value": "2rem", "$description": "32 px. Empty-state icons only; never scale a standard icon to an arbitrary illustration size." }
+    },
     "control": {
       "small": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Height of small controls: dense tables and their toolbars, filters, tags. Side padding space.100." },
       "default": { "$type": "dimension", "$value": "2rem", "$description": "32 px. Height of buttons, text fields, selects, segmented controls and tabs everywhere else: forms, the header, toolbars. Side padding space.150." },

package/dist/docs/tokens/spacing.json

@@ -2,13 +2,13 @@
   "space": {
     "0": { "$type": "dimension", "$value": "0", "$description": "0. Joined items, such as the buttons of a segmented group." },
     "025": { "$type": "dimension", "$value": "0.125rem", "$description": "2 px. A badge on an icon, a status dot beside text. Never between controls or as padding." },
-    "050": { "$type": "dimension", "$value": "0.25rem", "$description": "4 px. Between an icon and 14 px text; between a title and its description." },
+    "050": { "$type": "dimension", "$value": "0.25rem", "$description": "4 px. Between an icon and 14 px text; between a title and its description; above and below the text of a tooltip and of a compact table cell." },
     "075": { "$type": "dimension", "$value": "0.375rem", "$description": "6 px. Inside components only: above and below the label of a 32 px control, and the sides of a tooltip. Never for layout, sections or card padding." },
-    "100": { "$type": "dimension", "$value": "0.5rem", "$description": "8 px. Between an icon and 16 px text; between buttons; between a label and its field; side padding of 24 px controls." },
-    "150": { "$type": "dimension", "$value": "0.75rem", "$description": "12 px. Side padding of 32 px controls, such as text fields and buttons." },
+    "100": { "$type": "dimension", "$value": "0.5rem", "$description": "8 px. Between an icon and 16 px text; between buttons; between a label and its field; side padding of 24 px controls; above and below the text of a table cell." },
+    "150": { "$type": "dimension", "$value": "0.75rem", "$description": "12 px. Side padding of 32 px controls, such as text fields and buttons, and of table cells." },
     "200": { "$type": "dimension", "$value": "1rem", "$description": "16 px. Between related items: fields, list items, cards. Page margin and grid gutter below 768 px." },
     "250": { "$type": "dimension", "$value": "1.25rem", "$description": "20 px. Between a section heading and its content. The edge of the logo and the side navigation icons." },
-    "300": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Inside cards, panels and dialogs. Page margin and grid gutter from 768 px." },
+    "300": { "$type": "dimension", "$value": "1.5rem", "$description": "24 px. Inside cards, panels and dialogs. Between tabs. Page margin and grid gutter from 768 px." },
     "400": { "$type": "dimension", "$value": "2rem", "$description": "32 px. Between groups, such as form sections. Page margin from 1440 px." },
     "500": { "$type": "dimension", "$value": "2.5rem", "$description": "40 px. Around empty states." },
     "600": { "$type": "dimension", "$value": "3rem", "$description": "48 px. Between page sections." },

package/dist/docs/tokens/typography.json

@@ -1,5 +1,10 @@
 {
   "font": {
+    "features": {
+      "$type": "string",
+      "$value": "\"cv05\", \"cv08\"",
+      "$description": "Global Inter character variants distinguish l, I and 1. Applied per element by token CSS because font shorthands reset font-feature-settings; code fonts ignore unsupported variants."
+    },
     "family": {
       "sans": {
         "$type": "fontFamily",