@beehexa/design-rules 2611.3.2 → 2611.4.1

package/dist/docs/tokens/visualization.json

@@ -0,0 +1,123 @@
+{
+  "visualization": {
+    "$description": "Operational charts and timelines. Categorical identities are not statuses. Labels, legends, shapes and values carry meaning independently of colour; see foundations/styles/data-visualization.",
+    "metric": {
+      "total-jobs": { "$type": "color", "$value": "{color.text.info}", "$description": "Total execution volume, not an execution status; pair with a named series and values." },
+      "success-rate": { "$type": "color", "$value": "{color.text.success}", "$description": "Successful execution proportion; thresholds remain explicit in text." },
+      "completed": { "$type": "color", "$value": "{color.text.success}", "$description": "Completed execution count, with a completed label." },
+      "failed": { "$type": "color", "$value": "{color.text.danger}", "$description": "Failed execution count, with a failed label." },
+      "active-jobs": { "$type": "color", "$value": "{color.text.info}", "$description": "Currently active executions, not a success assessment." },
+      "avg-execution-time": { "$type": "color", "$value": "{color.text.subtle}", "$description": "Average execution duration; duration alone does not imply warning." },
+      "queue-depth": { "$type": "color", "$value": "{color.text}", "$description": "Queued execution volume; backlog alone does not imply failure." }
+    },
+    "job-type": {
+      "queue-status": { "$type": "color", "$value": "{color.blue.11}", "$description": "Queue-status categorical identity. Never infer processing status from this colour." },
+      "sync-history": { "$type": "color", "$value": "{color.green.11}", "$description": "Sync-history categorical identity. Never infer success from this colour." },
+      "polling-jobs": { "$type": "color", "$value": "{color.orange.11}", "$description": "Polling categorical identity. Never infer warning from this colour." },
+      "generic-jobs": { "$type": "color", "$value": "{color.graphite.11}", "$description": "Generic-job categorical identity. Always include job-type text or a distinct glyph." }
+    },
+    "priority": {
+      "1": { "$type": "color", "$value": "{color.text.danger}", "$description": "Highest queue urgency, explicitly labelled P1; not a failed execution." },
+      "2": { "$type": "color", "$value": "{color.text.warning}", "$description": "High queue urgency, explicitly labelled P2; not a warning outcome." },
+      "3": { "$type": "color", "$value": "{color.text.info}", "$description": "Normal queue urgency, explicitly labelled P3." },
+      "4": { "$type": "color", "$value": "{color.text.subtle}", "$description": "Low queue urgency, explicitly labelled P4; not a success outcome." },
+      "5": { "$type": "color", "$value": "{color.text.subtlest}", "$description": "Lowest queue urgency, explicitly labelled P5." }
+    },
+    "traffic": {
+      "healthy": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.background.success.subtle}",
+          "$description": "Accepted traffic; show its label."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.success}",
+          "$description": "Accepted traffic; show its label."
+        }
+      },
+      "attention": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.background.warning.subtle}",
+          "$description": "Lower reject-ratio threshold; distinct label and pattern from degraded."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.warning}",
+          "$description": "Lower reject-ratio threshold; distinct label and pattern from degraded."
+        }
+      },
+      "degraded": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.background.warning.subtle}",
+          "$description": "Higher reject-ratio threshold; distinct label and pattern from attention."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.warning}",
+          "$description": "Higher reject-ratio threshold; distinct label and pattern from attention."
+        }
+      },
+      "critical": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.background.danger.subtle}",
+          "$description": "Critical rejected-request ratio, not a failed fetch."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.danger}",
+          "$description": "Critical rejected-request ratio, not a failed fetch."
+        }
+      },
+      "unavailable": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.surface.subtle}",
+          "$description": "No requests to assess; not a backend failure."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.bold}",
+          "$description": "No requests to assess; not a backend failure."
+        }
+      },
+      "fault": {
+        "fill": {
+          "$type": "color",
+          "$value": "{color.background.danger.subtle}",
+          "$description": "Backend/internal request-processing faults; show a separate count and explicit fault label/icon, not a rejected-ratio threshold."
+        },
+        "outline": {
+          "$type": "color",
+          "$value": "{color.border.danger}",
+          "$description": "Backend/internal request-processing faults; show a separate count and explicit fault label/icon, not a rejected-ratio threshold."
+        }
+      }
+    },
+    "line-width": { "$type": "dimension", "$value": "2px", "$description": "Primary chart series stroke in CSS pixels." },
+    "sparkline-width": { "$type": "dimension", "$value": "1.5px", "$description": "Compact sparkline stroke in CSS pixels." },
+    "grid-width": { "$type": "dimension", "$value": "1px", "$description": "Chart grid and crosshair stroke in CSS pixels." },
+    "sparkline-point-radius": {"$type": "dimension", "$value": "2px", "$description": "Compact sparkline endpoint radius."},
+    "timeline-node-size": {"$type": "dimension", "$value": "16px", "$description": "Desktop timeline outer job-type mark diameter."},
+    "timeline-node-inner-size": {"$type": "dimension", "$value": "8px", "$description": "Desktop timeline inner execution-status mark diameter."},
+    "timeline-node-touch-size": {"$type": "dimension", "$value": "18px", "$description": "Touch and tablet outer timeline mark diameter; hit target remains size.target.touch."},
+    "timeline-node-touch-inner-size": {"$type": "dimension", "$value": "10px", "$description": "Touch timeline inner status diameter."},
+    "timeline-node-tablet-inner-size": {"$type": "dimension", "$value": "9px", "$description": "Tablet timeline inner status diameter."},
+    "timeline-cluster-size": {"$type": "dimension", "$value": "24px", "$description": "Minimum aggregated timeline count marker diameter."},
+    "chart-height": {"$type": "dimension", "$value": "120px", "$description": "Operational trend chart plotting height."},
+    "chart-initial-width": {"$type": "dimension", "$value": "400px", "$description": "Initial plot width before measurement; replaced by actual container width."},
+    "sparkline-height": {"$type": "dimension", "$value": "40px", "$description": "Standard compact trend plotting height."},
+    "sparkline-compact-height": {"$type": "dimension", "$value": "32px", "$description": "Metric tile sparkline plotting height."},
+    "sparkline-initial-width": {"$type": "dimension", "$value": "100px", "$description": "Initial sparkline width before measurement."},
+    "point-radius": { "$type": "dimension", "$value": "3px", "$description": "Normal chart sample marker radius." },
+    "hover-point-radius": { "$type": "dimension", "$value": "5px", "$description": "Hovered chart sample marker radius; larger than normal independently of colour." },
+    "ring-width": { "$type": "number", "$value": 10, "$description": "Ant Design dashboard progress stroke width, in percent of its viewBox." },
+    "ring-size": { "$type": "dimension", "$value": "140px", "$description": "Operational health progress ring diameter." },
+    "ring-gap": { "$type": "number", "$value": 75, "$description": "Operational health dashboard ring opening in degrees." },
+    "timeline-track-height": { "$type": "dimension", "$value": "6px", "$description": "Compact summary and grouped execution track thickness." },
+    "activity-track-height": { "$type": "dimension", "$value": "10px", "$description": "Activity timeline track thickness with internal event segments." }
+  }
+}

package/dist/docs/tokens/z-index.json

@@ -0,0 +1,49 @@
+{
+  "z-index": {
+    "sticky": {
+      "$type": "number",
+      "$value": "100",
+      "$description": "Sticky table headers and toolbars inside the page."
+    },
+    "navigation": {
+      "$type": "number",
+      "$value": "200",
+      "$description": "App header and side navigation."
+    },
+    "overlay": {
+      "$type": "number",
+      "$value": "300",
+      "$description": "Dropdowns, menus, popovers and select lists."
+    },
+    "modal": {
+      "$type": "number",
+      "$value": "400",
+      "$description": "Dialogs, drawers and their scrim."
+    },
+    "fullscreen": {
+      "$type": "number",
+      "$value": "450",
+      "$description": "Editor, code and image fullscreen takeovers above dialogs, below spotlight and feedback."
+    },
+    "spotlight": {
+      "$type": "number",
+      "$value": "500",
+      "$description": "Product tour and onboarding spotlight, above a dialog."
+    },
+    "tooltip": {
+      "$type": "number",
+      "$value": "600",
+      "$description": "Tooltips, above everything you can interact with."
+    },
+    "toast": {
+      "$type": "number",
+      "$value": "700",
+      "$description": "Toasts and the skip link: always on top."
+    },
+    "loading": {
+      "$type": "number",
+      "$value": "650",
+      "$description": "Blocking application readiness above tooltips, below always-visible toast feedback."
+    }
+  }
+}