/** * Den Haag Design System theme for Draad Maps * * Maps --draad-map-components-* custom properties to Gemeente Den Haag design * tokens. CSS custom properties inherit through Shadow DOM, so setting them * here applies across all components. * * Requires: @gemeente-denhaag/design-tokens-components (enqueued separately) * Typography: TheSans (body), TheMix (headings) * Colors: Den Haag green palette * Border radius: --denhaag-border-radius * Focus: 2px dashed */ /* ─── Font face declarations ─────────────────────────────────────────────── */ @font-face { font-family: "TheSans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/TheSans_Plain.otf") format("opentype"); } @font-face { font-family: "TheSans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/TheSans_SemiBold.otf") format("opentype"); } @font-face { font-family: "TheSans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/TheSans_Bold.otf") format("opentype"); } @font-face { font-family: "TheMix"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/TheMix_Plain.otf") format("opentype"); } @font-face { font-family: "TheMix"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/TheMix_Bold.otf") format("opentype"); } /* ─── Token overrides ────────────────────────────────────────────────────── */ .wp-block-draad-map-advanced { /* ─── Global tokens ──────────────────────────────────────────────────── */ --draad-map-components-color-primary: var(--denhaag-color-green-3); --draad-map-components-color-primary-hover: var(--denhaag-color-green-4); --draad-map-components-color-primary-active: var(--denhaag-color-green-5); --draad-map-components-color-text: var(--denhaag-color-grey-5); --draad-map-components-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-font-size-sm: var(--denhaag-typography-scale-s-font-size); --draad-map-components-font-weight-normal: var(--denhaag-typography-weight-regular); --draad-map-components-font-weight-medium: var(--denhaag-typography-weight-medium); --draad-map-components-font-weight-semibold: var(--denhaag-typography-weight-semibold); --draad-map-components-font-weight-bold: var(--denhaag-typography-weight-bold); --draad-map-components-focus-color: var(--denhaag-color-ocher-5); /* ─── Buttons ────────────────────────────────────────────────────────── */ --draad-map-components-button-primary-color-bg: var(--denhaag-color-green-3); --draad-map-components-button-primary-color-text: var(--denhaag-color-white); --draad-map-components-button-primary-color-bg-hover: var(--denhaag-color-green-4); --draad-map-components-button-primary-color-bg-active: var(--denhaag-color-green-5); --draad-map-components-button-primary-color-bg-disabled: var(--denhaag-color-grey-2); --draad-map-components-button-primary-color-text-disabled: var(--denhaag-color-grey-4); --draad-map-components-button-primary-color-focus-ring: var(--denhaag-color-ocher-5); --draad-map-components-button-primary-radius: var(--denhaag-border-radius); --draad-map-components-button-primary-focus-ring-width: 2px; --draad-map-components-button-primary-focus-ring-style: dashed; --draad-map-components-button-primary-lg-block-size: 48px; --draad-map-components-button-primary-lg-padding: 11px 20px; --draad-map-components-button-primary-lg-font-size: 20px; --draad-map-components-button-primary-lg-line-height: 1.3; --draad-map-components-button-primary-lg-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-button-primary-gap: 8px; --draad-map-components-button-primary-md-size: 43px; --draad-map-components-button-primary-md-icon-size: 20px; --draad-map-components-button-primary-md-padding: 12px; --draad-map-components-button-secondary-color-bg: var(--denhaag-color-white); --draad-map-components-button-secondary-color-border: var(--denhaag-color-green-3); --draad-map-components-button-secondary-color-text: var(--denhaag-color-green-3); --draad-map-components-button-secondary-color-border-hover: var(--denhaag-color-green-4); --draad-map-components-button-secondary-color-text-hover: var(--denhaag-color-green-4); --draad-map-components-button-secondary-color-border-active: var(--denhaag-color-green-5); --draad-map-components-button-secondary-color-text-active: var(--denhaag-color-green-5); --draad-map-components-button-secondary-color-bg-disabled: var(--denhaag-color-grey-2); --draad-map-components-button-secondary-color-text-disabled: var(--denhaag-color-grey-4); --draad-map-components-button-secondary-color-focus-ring: var(--denhaag-color-ocher-5); --draad-map-components-button-secondary-radius: var(--denhaag-border-radius); --draad-map-components-button-secondary-border-width: 1px; --draad-map-components-button-secondary-focus-ring-width: 2px; --draad-map-components-button-secondary-focus-ring-style: dashed; --draad-map-components-button-secondary-lg-block-size: 48px; --draad-map-components-button-secondary-lg-padding: 11px 20px; --draad-map-components-button-secondary-lg-font-size: 20px; --draad-map-components-button-secondary-lg-line-height: 1.3; --draad-map-components-button-secondary-lg-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-button-secondary-gap: 8px; --draad-map-components-button-secondary-md-size: 43px; --draad-map-components-button-secondary-md-icon-size: 20px; --draad-map-components-button-secondary-md-padding: 12px; /* ─── Map ────────────────────────────────────────────────────────────── */ --draad-map-components-map-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-map-aspect-ratio: 1082 / 756; --draad-map-components-map-position-offset: 0; --draad-map-components-map-toolbar-color-bg: var(--denhaag-color-white); --draad-map-components-map-toolbar-color-border: var(--denhaag-color-grey-2); --draad-map-components-map-toolbar-padding: 20px 0; --draad-map-components-map-toolbar-gap: 8px; --draad-map-components-toolbar-width: var(--wp--style--global--content-size); --draad-map-components-map-zoom-color-bg: var(--denhaag-color-white); --draad-map-components-map-zoom-color-bg-hover: var(--denhaag-color-grey-1); --draad-map-components-map-zoom-color-border: var(--denhaag-color-green-3); --draad-map-components-map-zoom-color-divider: var(--denhaag-color-grey-2); --draad-map-components-map-zoom-color-text: var(--denhaag-color-green-3); --draad-map-components-map-zoom-color-text-hover: var(--denhaag-color-green-4); --draad-map-components-map-zoom-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-map-zoom-radius: var(--denhaag-border-radius); --draad-map-components-map-zoom-font-weight: var(--denhaag-typography-weight-regular); /* ─── Search ─────────────────────────────────────────────────────────── */ --draad-map-components-search-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-search-font-size: var(--denhaag-typography-scale-base-font-size); --draad-map-components-search-label-font-size: var(--denhaag-typography-scale-base-font-size); --draad-map-components-search-label-font-weight: var(--denhaag-typography-weight-bold); --draad-map-components-search-label-color: var(--denhaag-color-grey-5); --draad-map-components-search-input-bg: var(--denhaag-color-white); --draad-map-components-search-input-border: var(--denhaag-color-grey-3); --draad-map-components-search-input-border-focus: var(--denhaag-color-grey-4); --draad-map-components-search-input-radius: var(--denhaag-border-radius); --draad-map-components-search-input-color: var(--denhaag-color-grey-4); --draad-map-components-search-input-padding: 12px; --draad-map-components-search-placeholder-color: var(--denhaag-color-grey-3); --draad-map-components-search-focus-color: var(--denhaag-color-ocher-5); --draad-map-components-search-focus-ring: var(--denhaag-color-ocher-5); --draad-map-components-search-link-color: var(--denhaag-color-blue-3); --draad-map-components-search-gap: 0; --draad-map-components-search-button-background: var(--denhaag-color-green-3); --draad-map-components-search-button-background-hover: var(--denhaag-color-green-4); --draad-map-components-search-button-background-active: var(--denhaag-color-green-5); --draad-map-components-search-button-color: var(--denhaag-color-white); --draad-map-components-search-button-radius: 0 var(--denhaag-border-radius) var(--denhaag-border-radius) 0; --draad-map-components-search-button-padding: 0.5rem 1rem; --draad-map-components-search-listbox-bg: var(--denhaag-color-white); --draad-map-components-search-listbox-border: 1px solid var(--denhaag-color-grey-2); --draad-map-components-search-listbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); --draad-map-components-search-result-background-hover: var(--denhaag-color-warmgrey-1); --draad-map-components-search-result-background-selected: var(--denhaag-color-green-1); --draad-map-components-search-result-label-color: var(--denhaag-color-grey-5); --draad-map-components-search-result-type-color: var(--denhaag-color-grey-3); --draad-map-components-search-result-icon-color: var(--denhaag-color-grey-3); --draad-map-components-search-no-results-color: var(--denhaag-color-grey-4); --draad-map-components-search-highlight-color: var(--denhaag-color-green-3); --draad-map-components-search-type-address-color: var(--denhaag-color-blue-3); --draad-map-components-search-type-feature-color: var(--denhaag-color-green-3); --draad-map-components-search-type-marker-color: var(--denhaag-color-orange-3); --draad-map-components-search-scrollbar-thumb: var(--denhaag-color-grey-2); --draad-map-components-search-scrollbar-track: var(--denhaag-color-grey-1); /* ─── Filter ─────────────────────────────────────────────────────────── */ --draad-map-components-filter-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-filter-toggle-color-bg: var(--denhaag-color-white); --draad-map-components-filter-toggle-color-bg-hover: var(--denhaag-color-green-1); --draad-map-components-filter-toggle-color-border: var(--denhaag-color-green-3); --draad-map-components-filter-toggle-color-border-hover: var(--denhaag-color-green-4); --draad-map-components-filter-toggle-color-text: var(--denhaag-color-green-3); --draad-map-components-filter-toggle-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-toggle-radius: var(--denhaag-border-radius); --draad-map-components-filter-toggle-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-filter-header-color-bg: var(--denhaag-color-white); --draad-map-components-filter-header-color-title: var(--denhaag-color-grey-5); --draad-map-components-filter-header-color-subtitle: var(--denhaag-color-grey-4); --draad-map-components-filter-header-title-weight: var(--denhaag-typography-weight-bold); --draad-map-components-filter-close-color-text: var(--denhaag-color-grey-3); --draad-map-components-filter-close-color-text-hover: var(--denhaag-color-grey-5); --draad-map-components-filter-close-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-section-color-title: var(--denhaag-color-grey-5); --draad-map-components-filter-section-color-title-hover: var(--denhaag-color-green-3); --draad-map-components-filter-section-title-weight: var(--denhaag-typography-weight-bold); --draad-map-components-filter-section-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-section-color-chevron: var(--denhaag-color-green-3); --draad-map-components-filter-checkbox-color-border: var(--denhaag-color-grey-2); --draad-map-components-filter-checkbox-color-checked: var(--denhaag-color-green-3); --draad-map-components-filter-checkbox-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-checkbox-color-text: var(--denhaag-color-grey-5); --draad-map-components-filter-checkbox-color-bg: transparent; --draad-map-components-filter-checkbox-radius: var(--denhaag-border-radius); --draad-map-components-filter-checkbox-label-color-bg: var(--denhaag-color-white); --draad-map-components-filter-checkbox-label-color-bg-hover: var(--denhaag-color-warmgrey-1); --draad-map-components-filter-checkbox-label-color-bg-checked: var(--denhaag-color-warmgrey-1); --draad-map-components-filter-checkbox-font-size: var(--denhaag-typography-scale-base-font-size); --draad-map-components-filter-checkbox-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-filter-chip-bg: var(--denhaag-color-grey-1); --draad-map-components-filter-chip-color: var(--denhaag-color-grey-5); --draad-map-components-filter-chip-radius: var(--denhaag-border-radius); --draad-map-components-filter-chip-remove-bg: rgba(0, 0, 0, 0.1); --draad-map-components-filter-chip-remove-bg-hover: rgba(0, 0, 0, 0.2); --draad-map-components-filter-chip-remove-color: var(--denhaag-color-green-5); --draad-map-components-filter-chip-remove-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-apply-color-bg: var(--denhaag-color-green-3); --draad-map-components-filter-apply-color-bg-hover: var(--denhaag-color-green-4); --draad-map-components-filter-apply-color-text: var(--denhaag-color-white); --draad-map-components-filter-apply-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-apply-radius: var(--denhaag-border-radius); --draad-map-components-filter-apply-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-filter-reset-color-text: var(--denhaag-color-grey-3); --draad-map-components-filter-reset-color-text-hover: var(--denhaag-color-grey-5); --draad-map-components-filter-reset-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-filter-panel-color-bg: var(--denhaag-color-white); --draad-map-components-filter-panel-radius: 4px; --draad-map-components-filter-panel-shadow: -1px -4px 15px rgba(0, 0, 0, 0.1); --draad-map-components-filter-sidebar-color-bg: var(--denhaag-color-white); --draad-map-components-filter-empty-color-text: var(--denhaag-color-grey-3); --draad-map-components-filter-actions-color-border: var(--denhaag-color-grey-2); --draad-map-components-filter-trigger-color-bg-open: var(--denhaag-color-green-1); --draad-map-components-filter-dropdown-width: 100%; --draad-map-components-filter-fieldset-columns: repeat(5, 1fr); --draad-map-components-filter-scrollbar-bg: var(--denhaag-color-grey-1); --draad-map-components-filter-scrollbar-thumb: var(--denhaag-color-grey-2); --draad-map-components-filter-scrollbar-thumb-hover: var(--denhaag-color-grey-3); /* ─── Infowindow (popup) ─────────────────────────────────────────────── */ --draad-map-components-infowindow-bg: var(--denhaag-color-white); --draad-map-components-infowindow-text: var(--denhaag-color-grey-4); --draad-map-components-infowindow-text-dark: var(--denhaag-color-grey-5); --draad-map-components-infowindow-heading: var(--denhaag-color-green-3); --draad-map-components-infowindow-accent: var(--denhaag-color-green-3); --draad-map-components-infowindow-accent-hover: var(--denhaag-color-green-4); --draad-map-components-infowindow-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); --draad-map-components-infowindow-media-bg: var(--denhaag-color-grey-1); --draad-map-components-infowindow-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-infowindow-chip-color: var(--denhaag-color-grey-4); --draad-map-components-infowindow-chip-border: var(--denhaag-color-grey-2); --draad-map-components-infowindow-inline-size: 340px; --draad-map-components-infowindow-media-max-height: 180px; /* ─── List ───────────────────────────────────────────────────────────── */ --draad-map-components-list-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-list-font-size: var(--denhaag-typography-scale-base-font-size); --draad-map-components-list-color-primary: var(--denhaag-color-green-3); --draad-map-components-list-color-text-muted: var(--denhaag-color-grey-3); --draad-map-components-list-card-bg: var(--denhaag-color-white); --draad-map-components-list-card-border: 1px solid var(--denhaag-color-grey-2); --draad-map-components-list-card-radius: var(--denhaag-border-radius); --draad-map-components-list-card-heading-color: var(--denhaag-color-green-3); --draad-map-components-list-card-text-color: var(--denhaag-color-grey-4); --draad-map-components-list-chip-bg: transparent; --draad-map-components-list-chip-border: var(--denhaag-color-grey-2); --draad-map-components-list-chip-color: var(--denhaag-color-grey-4); --draad-map-components-list-toggle-color-bg: var(--denhaag-color-white); --draad-map-components-list-toggle-color-bg-hover: var(--denhaag-color-green-1); --draad-map-components-list-toggle-color-border: var(--denhaag-color-green-3); --draad-map-components-list-toggle-color-border-hover: var(--denhaag-color-green-4); --draad-map-components-list-toggle-color-text: var(--denhaag-color-green-3); --draad-map-components-list-toggle-color-focus: var(--denhaag-color-ocher-5); --draad-map-components-list-toggle-radius: var(--denhaag-border-radius); --draad-map-components-list-toggle-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-list-toggle-font-weight: var(--denhaag-typography-weight-regular); --draad-map-components-list-width: var(--wp--style--global--content-size); --draad-map-components-list-pagination-color-active: var(--denhaag-color-green-3); --draad-map-components-list-pagination-focus: var(--denhaag-color-ocher-5); /* ─── Cluster ────────────────────────────────────────────────────────── */ --draad-map-components-cluster-color-bg: var(--denhaag-color-blue-3); --draad-map-components-cluster-color-bg-outer: var(--denhaag-color-white); --draad-map-components-cluster-color-text: var(--denhaag-color-white); --draad-map-components-cluster-font-weight: var(--denhaag-typography-weight-bold); /* ─── Legend ──────────────────────────────────────────────────────────── */ --draad-map-components-legend-bg: var(--denhaag-color-white); --draad-map-components-legend-color-text: var(--denhaag-color-grey-5); --draad-map-components-legend-color-text-muted: var(--denhaag-color-grey-3); --draad-map-components-legend-font-family: var(--denhaag-typography-sans-serif-font-family); --draad-map-components-legend-hover-bg: var(--denhaag-color-warmgrey-1); --draad-map-components-legend-focus-color: var(--denhaag-color-ocher-5); --draad-map-components-legend-checkbox-border: var(--denhaag-color-grey-2); --draad-map-components-legend-checkbox-checked-bg: var(--denhaag-color-green-3); --draad-map-components-legend-checkbox-checked-border: var(--denhaag-color-green-3); --draad-map-components-legend-icon-color: var(--denhaag-color-green-3); /* ─── GeoJSON polygons ───────────────────────────────────────────────── */ --draad-map-components-geojson-color: var(--denhaag-color-green-3); --draad-map-components-geojson-fill-color: var(--denhaag-color-green-3); --draad-map-components-geojson-fill-opacity: 0.1; } /* ─── Block display ──────────────────────────────────────────────────────── */ /* dm-map is a custom element; without an explicit display it renders inline. The demo sets this so the map takes full width and aspect-ratio works. */ .wp-block-draad-map-advanced dm-map { display: block; } /* ─── Block-scoped font-family vars ─────────────────────────────────────── */ /* Define the den Haag font-family vars so they're available as cascade sources. Host WP themes can override --body-font-family to substitute their own font; if they don't, TheSans is used as the fallback. */ .wp-block-draad-map-advanced { --heading-font-family: var(--denhaag-typography-sans-serif-alternate-font-family, "TheMix", sans-serif); --body-font-family: var(--denhaag-typography-sans-serif-font-family, "TheSans", sans-serif); --draad-map-components-filter-font-family: var(--body-font-family); --draad-map-components-search-font-family: var(--body-font-family); --draad-map-components-infowindow-font-family: var(--body-font-family); --draad-map-components-zoom-font-family: var(--body-font-family); } /* ─── Shadow DOM structural overrides via ::part() ───────────────────────── */ .wp-block-draad-map-advanced dm-infowindow::part(panel) { inline-size: 340px; border-radius: var(--denhaag-border-radius, 3px); } .wp-block-draad-map-advanced dm-infowindow::part(close) { inline-size: 36px; block-size: 36px; border-radius: var(--denhaag-border-radius, 3px); } .wp-block-draad-map-advanced dm-infowindow::part(media) { max-block-size: 200px; } .wp-block-draad-map-advanced dm-infowindow::part(body) { padding: 1.25rem; } .wp-block-draad-map-advanced dm-infowindow::part(content) { font-family: var(--denhaag-typography-sans-serif-font-family, "TheSans", sans-serif); } .wp-block-draad-map-advanced dm-infowindow::part(link) { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.75rem; padding: 0.5rem 1rem; background: var(--denhaag-color-green-3, hsl(138 58% 33%)); color: var(--denhaag-color-white, hsl(0 0% 100%)); border: 1px solid transparent; border-radius: var(--denhaag-border-radius, 3px); font-family: var(--denhaag-typography-sans-serif-font-family, "TheSans", sans-serif); font-size: var(--denhaag-typography-scale-base-font-size, 1.125rem); font-weight: var(--denhaag-typography-weight-regular, 400); text-decoration: none; cursor: pointer; } .wp-block-draad-map-advanced dm-infowindow::part(link):hover { background: var(--denhaag-color-green-4, hsl(138 57% 27%)); } .wp-block-draad-map-advanced dm-infowindow::part(link):focus-visible { outline: 2px dashed var(--denhaag-color-ocher-5, hsl(47 100% 25%)); outline-offset: 2px; } /* Baseline for slotted / light-DOM content so it matches the component's intended typography, regardless of the active WP theme. Scoped to the block so nothing leaks into the surrounding page. */ .wp-block-draad-map-advanced { font-family: var(--denhaag-typography-sans-serif-font-family, "TheSans", sans-serif); line-height: 1.3; color: var(--denhaag-color-grey-5, hsl(0 0% 18%)); box-sizing: border-box; } .wp-block-draad-map-advanced *, .wp-block-draad-map-advanced *::before, .wp-block-draad-map-advanced *::after { box-sizing: inherit; } .wp-block-draad-map-advanced a { color: inherit; } .wp-block-draad-map-advanced h1, .wp-block-draad-map-advanced h2, .wp-block-draad-map-advanced h3, .wp-block-draad-map-advanced h4, .wp-block-draad-map-advanced h5, .wp-block-draad-map-advanced h6, .wp-block-draad-map-advanced p, .wp-block-draad-map-advanced address { margin: 0; } .wp-block-draad-map-advanced img, .wp-block-draad-map-advanced picture, .wp-block-draad-map-advanced svg, .wp-block-draad-map-advanced video { max-inline-size: 100%; display: block; }