floorplan svg selector hooks

floorplan-selector-hooks.css

@custom-selector :--floorplan-level g[data-name*="level"];
@custom-selector :--floorplan-tile g[data-name*="level"] > g;
@custom-selector :--floorplan-bg g[data-name*="level"] > g > g[data-name="bg"];
@custom-selector :--floorplan-lines g[data-name*="level"] > g > g[data-name="lines"];
@custom-selector :--floorplan-labels g[data-name*="level"] > g > g[data-name="labels"];
@custom-selector :--floorplan-labels-text g[data-name*="level"] > g > g[data-name="labels"] text;
@custom-selector :--floorplan-base-bg g[data-name*="level"] > g[data-name*="base"] > g[data-name="bg"];

:root {
  --purpleColor: #2B037A;
  --redColor: #DD0303;
  --mainColor: #fff;
  --bgFill: var(--purpleColor);
  --bgFusionFill: var(--redColor);
  --bgLabelFill: var(--purple-color);
}

.floorplan {
  visibility: hidden;
  color: var(--mainColor);
}

.floorplan :--floorplan-level,
.floorplan :--floorplan-tile,
.floorplan :--floorplan-labels {
  visibility: hidden;
}
.floorplan.visible,
.floorplan :--floorplan-level.visible,
.floorplan :--floorplan-tile.visible,
.floorplan :--floorplan-labels.visible {
  visibility: hidden;
}

.floorplan :--floorplan-bg {
  fill: var(--bgFill);
}
.floorplan :--floorplan-base-bg {
  fill: none; /* is that valid value? */
}
.floorplan :--floorplan-labels {
  fill: var(--bgLabelFill);
}
.floorplan :--floorplan-labels-text {
  fill: var(--mainColor);
}