@undrr/undrr-mangrove 2.1.0 → 2.2.0

package/scss/assets/scss/_theme-irp.scss

@@ -3,7 +3,8 @@
 // ---------------------------------------------------------------------
 // Every token in this block is generated from tokens/irp.yaml, merged over
 // tokens/mangrove.yaml and tokens/undrr.yaml.
-@import "./generated/tokens-irp";
+@use "generated/tokens-irp" as *;
+@use "tokens-tabs" as *;
 
 .mg-theme-irp {
   @include mg-tokens-tabs;

package/scss/assets/scss/_theme-mcr.scss

@@ -3,7 +3,8 @@
 // ---------------------------------------------------------------------
 // Every token in this block is generated from tokens/mcr.yaml, merged over
 // tokens/mangrove.yaml and tokens/undrr.yaml.
-@import "./generated/tokens-mcr";
+@use "generated/tokens-mcr" as *;
+@use "tokens-tabs" as *;
 
 .mg-theme-mcr {
   @include mg-tokens-tabs;

package/scss/assets/scss/_theme-preventionweb.scss

@@ -3,7 +3,8 @@
 // ---------------------------------------------------------------------
 // Every token in this block is generated from tokens/preventionweb.yaml, merged over
 // tokens/mangrove.yaml and tokens/undrr.yaml.
-@import "./generated/tokens-preventionweb";
+@use "generated/tokens-preventionweb" as *;
+@use "tokens-tabs" as *;
 
 .mg-theme-preventionweb {
   @include mg-tokens-tabs;

package/scss/assets/scss/_utility.scss

@@ -1,3 +1,6 @@
+@use "breakpoints" as *;
+@use "config" as *;
+
 // CSS font size reset
 /* base start */
 .mg-u-responsive--show-large {

package/scss/assets/scss/_variables.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "variables";
+
+// Evaluate in the legacy caller scope, after all module forwards.
+@each $_name in legacy-warnings.$legacy-names {
+  @if meta.variable-exists($_name) {
+    @include legacy-warnings.warn-override($_name);
+  }
+}

package/scss/assets/scss/_variables.scss

@@ -4,7 +4,7 @@
  * Storybook:    https://mangrove.undrr.org/
  * LLMs context: https://mangrove.undrr.org/llms.txt
  * Repository:   https://github.com/PreventionWeb/undrr-mangrove
- * Version: 2.1.0
+ * Version: 2.2.0
  *
  *   ██╗   ██╗███╗   ██╗██████╗ ██████╗ ██████╗
  *   ██║   ██║████╗  ██║██╔══██╗██╔══██╗██╔══██╗
@@ -27,210 +27,16 @@
  *                                                                 ███████╗
  *                                                                 ╚══════╝
  */
-@use "sass:math";
-@use "sass:meta";
-@import "./tokens-tabs";
-
-// Data-visualisation palettes: categorical, sequential and Sendai target
-// ramps. A distinct concern from brand tokens, sourced from the DLDTS design
-// system. @import must precede rule blocks, hence its position here.
-@import "./tokens-data-viz";
-
-// Brand tokens. The palette, the spacing/type/width scales, the semantic
-// tier and every component token a brand can restyle are generated from
-// tokens/mangrove.yaml (the brand-neutral base) merged with tokens/undrr.yaml
-// (UNDRR identity). Editing a value here would be overwritten; edit the YAML
-// and run `yarn build:tokens`.
-@import "./generated/tokens-mangrove";
-
-// --- Mangrove 2.0 upgrade guard (build-time) ---
-// Color and spacing tokens are now CSS custom properties. Assigning the old
-// SCSS variables ($mg-color-* / $mg-spacing-*) before importing Mangrove no
-// longer changes anything — it is a silent no-op. If a consumer still defines
-// one of the commonly-overridden token variables, warn loudly at compile time
-// rather than let their brand colors quietly revert to the defaults.
-// See docs/RELEASE-2.0.md (breaking change #1). This fires only for consumer
-// overrides — Mangrove itself no longer defines these SCSS variables.
-@each $_legacy in "mg-color-interactive", "mg-color-interactive-active",
-  "mg-color-button-background", "mg-color-button-background--hover",
-  "mg-border-color-button", "mg-color-tag", "mg-color-form-check",
-  "mg-color-form-focus", "mg-color-hero", "mg-color-hero--secondary",
-  "mg-spacing-150", "mg-spacing-300"
-{
-  @if meta.variable-exists($_legacy) {
-    @warn "Mangrove 2.0: `$#{$_legacy}` no longer has any effect — color and spacing tokens are CSS custom properties now. Move the override into a `.mg-theme-* { --#{$_legacy}: ...; }` block (or `:root`). See docs/RELEASE-2.0.md.";
-  }
-}
-
-// The same guard for the font-family variables removed by the role model
-// (unisdr/undrr-mangrove#1098). Separate loop because each name maps to a
-// different replacement role and the message has to say which.
-// $mg-font-family is the one a consumer is most likely to have set: it carried
-// 22 declarations before the migration.
-@each $_legacy,
-  $_role
-    in (
-      "mg-font-family": "text",
-      "mg-font-family-headings": "ui",
-      "mg-font-family-condensed": "ui",
-      "mg-font-family-icons": "",
-      "mg-font-family-arabic-headings": "heading",
-      "mg-font-family-arabic-body": "text"
-    )
-{
-  @if meta.variable-exists($_legacy) {
-    @if $_role == "" {
-      @warn "Mangrove 2.0: `$#{$_legacy}` no longer exists and has no replacement — it had no stylesheet consumer, and icons.scss names the FontAwesome family directly. See docs/RELEASE-2.0.md.";
-    } @else {
-      @warn "Mangrove 2.0: `$#{$_legacy}` no longer has any effect — font families are role custom properties now. Move the override into a `.mg-theme-* { --mg-font-family-#{$_role}: ...; }` block (or `:root`). See docs/RELEASE-2.0.md.";
-    }
-  }
-}
-
-// Root font-size anchor: fixed at the browser-standard 16px root (1rem = 16px),
-// used by mg-rem() to convert intended pixel values to rem at build time. The
-// legacy 10px root — the `!default` override and the style-*-legacy.scss
-// variants — was removed in 2.0; consumers use a standard 16px document root.
-$mg-html-font-size: 16; // BUILD-TIME ONLY
-
-// Converts an intended pixel value to rem for the 16px root.
-// Example: mg-rem(16) → 1rem, mg-rem(24) → 1.5rem
-@function mg-rem($px) {
-  @return math.div($px, $mg-html-font-size) * 1rem;
-}
-
-// font file variables
-// Path adjusted for Storybook staticDirs (serves assets/ at root, not /assets/)
-$mgIconFontPath: "../fonts/mangrove-icon-set/font" !default; // BUILD-TIME ONLY
-
-// image variables
-$img-path: "~/stories/assets/images"; // BUILD-TIME ONLY
-$img-path-Icon: "~/stories/assets/icons"; // BUILD-TIME ONLY
-$img-path-Iconback: "~/stories/assets/icons"; // BUILD-TIME ONLY
-$img-path-Iconfourback: "~/stories/assets/icons"; // BUILD-TIME ONLY
+// Keep data-viz roots before the brand/tab and role roots.
+@use "tokens-data-viz";
+@forward "config";
+@use "config" as *;
 
 :root {
   @include mg-tokens-mangrove;
   @include mg-tokens-tabs;
 }
 
-$mg-font-body: $mg-font-size-300;
-$mg-font-tag: $mg-font-size-250 !default;
-
-// This is not really a "varaible" but kept here for now
-// until we more fully rationalise our design decisions
-@mixin mg-typography($size) {
-  @if $size == "extra-small" {
-    font-size: var(--mg-font-size-300);
-  } @else if $size == "small" {
-    font-size: var(--mg-font-size-400);
-  } @else if $size == "medium" {
-    font-size: var(--mg-font-size-500);
-    padding-top: var(--mg-spacing-250);
-    padding-bottom: var(--mg-spacing-150);
-  } @else if $size == "large" {
-    font-size: var(--mg-font-size-600);
-    padding-top: var(--mg-spacing-250);
-    padding-bottom: var(--mg-spacing-150);
-  } @else if $size == "xlarge" {
-    font-size: var(--mg-font-size-900);
-    padding-top: var(--mg-spacing-300);
-    padding-bottom: var(--mg-spacing-175);
-  } @else if $size == "huge" {
-    font-size: var(--mg-font-size-1000);
-    padding-top: var(--mg-spacing-300);
-    padding-bottom: var(--mg-spacing-250);
-  } @else if $size == "xhuge" {
-    font-size: var(--mg-font-size-1100);
-    padding-top: var(--mg-spacing-400);
-    padding-bottom: var(--mg-spacing-300);
-  }
-}
-
-// --- Font faces ---
-// A font stack, rendered for a custom property value with its quoting intact.
-
-// Plain interpolation of a Sass list strips the quotes from its quoted
-// members, and a custom property value is parsed as a token stream rather than
-// as a font-family. An override such as
-// `$mg-font-face-sans: "Frutiger 55 Roman", sans-serif` would emit
-// `Frutiger 55 Roman`; `55` is not a valid custom-ident, so the declaration is
-// invalid at computed-value time, the role is never defined, and every element
-// referencing it falls back to the browser's default serif. Frutiger, Univers
-// and Helvetica Neue LT Std all name weights numerically, so this is the
-// common case for the licensed brand faces the `!default` escape hatch exists
-// to admit. `meta.inspect()` renders the list the way Sass wrote it.
-
-// It lives here, and _fonts.scss calls it rather than importing `sass:meta`
-// itself: both files are pulled into one scope by the legacy `@import` chain,
-// and two `@use "sass:meta"` rules in that scope collide.
-// See unisdr/undrr-mangrove#1098.
-@function mg-font-stack($stack) {
-  @return meta.inspect($stack);
-}
-
-// Faces name what fonts exist. Roles (--mg-font-family-text / -heading /
-// -display / -ui / -code) name the reader's task and are mapped onto these
-// faces per script in _fonts.scss. No component stylesheet may name a
-// face: it references a role. See unisdr/undrr-mangrove#1098.
-
-// Faces keep `!default` so a consumer compiling Mangrove from source can swap
-// in a licensed brand face before the import. That is the only way to introduce
-// a face Mangrove does not ship: a runtime role override
-// (`.mg-theme-* { --mg-font-family-ui: ...; }`) can only re-point a role among
-// the faces _fonts.scss already loads @font-face rules for.
-// These variables live outside the brand mixin, so a Sass override applies to
-// every brand in the combined style-all.css. Per-brand faces need the runtime
-// override instead.
-// Quote any family name that is not a plain CSS identifier — anything with a
-// space, a digit-leading word or punctuation. The `:root` block below
-// round-trips these through `mg-font-stack()` so the quotes survive into the
-// emitted custom property; see the note on that function.
-$mg-font-face-sans: "Roboto", sans-serif !default;
-$mg-font-face-sans-condensed: "Roboto Condensed", sans-serif !default;
-$mg-font-face-mono:
-  ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo",
-  monospace !default;
-
-// Arabic fonts
-// Noto Kufi Arabic for headings, Noto Sans Arabic for body. Decided in
-// unisdr/undrr-mangrove#1089, which replaced Dubai across every brand.
-
-// Dubai was inherited from OCHA, but the inheritance was weaker than it looked
-// and had gone out of date on both halves. Dubai was OCHA's ALTERNATIVE
-// subtheme pairing (body only, never headings, Regular only), not their base
-// theme, which used Noto Kufi Arabic. And on 2026-05-28 OCHA's brand guidance
-// moved to Almarai for display and Noto Sans Arabic for body.
-
-// Both Noto families are SIL Open Font License 1.1.
-
-// This is two Arabic families where 2.0.0-alpha.3 had one. Kufi is a display
-// style -- angular, high contrast, architectural -- so it earns its place in
-// headings and is the wrong choice at body size; Noto Sans Arabic carries the
-// running text and shares Noto Sans' proportions. The second download is
-// subset by unicode-range, so a page pays for the scripts it actually renders.
-
-// Only Regular and Bold exist upstream for both families, so Arabic has a
-// 400/700 binary where Latin has a ladder. Nothing is faux bolded: the 600
-// used in _foundational.scss resolves UP to the real Bold. The cost is a lost
-// tier of emphasis, not a rendering defect.
-$mg-font-face-arabic-display: "Noto Kufi Arabic", sans-serif !default;
-$mg-font-face-arabic-sans: "Noto Sans Arabic", sans-serif !default;
-
-// BUILD-TIME ONLY — breakpoints cannot be CSS custom properties.
-// @media queries require static values resolved at compile time; var() is invalid there.
-// Do not add --mg-breakpoint-* custom properties.
-$mg-breakpoint-mobile: 480px;
-$mg-breakpoint-tablet: 900px;
-$mg-breakpoint-desktop: 1164px;
-$mg-breakpoint-desktop-wide: 1440px;
-
-// tabs
-// BUILD-TIME ONLY: $mg-tabs-border-bottom drives @if conditional in tab.scss.
-// Cannot become a CSS custom property — no runtime conditional equivalent exists.
-// All sub-brands use true. To disable, set to false before @use.
-$mg-tabs-border-bottom: true !default;
-
 // Tokens deliberately NOT in the token sources.
 // - The font roles are bound to faces here because every supported build path
 //   reaches _variables.scss, including the per-component Sass recipe in
@@ -365,34 +171,3 @@ $mg-tabs-border-bottom: true !default;
   --mg-empty-state-compact-media-size: #{mg-rem(34)};
   --mg-empty-state-compact-font-size: var(--mg-font-size-250);
 }
-
-// Header height
-$header-height-xlarge: 115px;
-$header-height-medium: 75px;
-
-/* variables end */
-
-// stylelint-disable comment-whitespace-inside -- Preserve the fixed-width source easter egg.
-/*============================================================================+
-| [z-level: -2] [Biome: Server Rack] [Activity: Constructing Frameworks]      |
-+=============================================================================+
-|X|     d       |             _   _ _  _ ___  ___ ___               c       X |
-|X|   [HTML]    |      w     | | | | \| |   \| _ \ _ \       [JS]   |       X |
-|X|    \--/     |    [===]   | |_| | |  | |) |   /   /       \--/   |       X |
-|X|     ||      |     ||      \___/|_|\_|___/|_|_\_|_\        ||    |     d X |
-|X|     ||      |     ||                                            |   [=O=]X|
-|X| c   ||      |     ||                                          c \   [DB_]X|
-|X|    _||_     |    _||_      __  __   _   _  _  ___ ___  _____   __  ___  X |
-|X|d  [CSS ]    |   [NODE]    |  \/  | /_\ | \| |/ __| _ \/ _ \ \ / / | __| X |
-|X|\   \--/     |    \--/     | |\/| |/ _ \| |  | (_ |   / (_) \ V /  | _|  X |
-|X||    ||      | d   ||      |_|  |_/_/ \_\_|\_|\___|_|_\\___/ \_/   |___| X |
-|X||    ||      |     ||                                                    X |
-|X||    || d    |     ||                           ___              w       X |
-|X||  [=O=]     |     ||             c            |_  )    d      [=O=]     X |
-|X||  [API]     |     ||           [DOM]           / /   [=O=]    [JSON]    X |
-|X|\============|==== || =========  \--/          /___|  [CMS]      ||      X |
-|X|                   ||             ||                             ||      X |
-+=============================================================================+
-| KEY: d=web-dwarf  c=coder-dwarf  w=wrangler  [=O=]=data forge  X=stairwell  |
-+============================================================================*/
-// stylelint-enable comment-whitespace-inside

package/scss/assets/scss/generated/_tokens-mangrove.scss

@@ -561,6 +561,93 @@ $mg-font-line-height-700: 1.5em;
   // card.icon-badge-radius
   --mg-card-icon-badge-radius: 20%;
 
+  // card.publication.background
+  // Background of book and horizontal book publication teasers.
+  --mg-card-publication-background: transparent;
+
+  // card.publication.padding
+  // Outer publication teaser inset; cover-to-caption gaps are separate.
+  --mg-card-publication-padding: 0px;
+
+  // card.publication.border-radius
+  // Outer publication surface radius; complete cover artwork remains square.
+  --mg-card-publication-border-radius: 0px;
+
+  // card.publication.shadow
+  // Publication surface elevation at rest.
+  --mg-card-publication-shadow: none;
+
+  // card.publication.shadow-hover
+  // Linked publication surface elevation on hover.
+  --mg-card-publication-shadow-hover: none;
+
+  // content-meta.font-size
+  // Dates, attribution and supporting metadata in content teasers and cards;
+  // summaries retain body size.
+  --mg-content-meta-font-size: var(--mg-font-size-250);
+
+  // content-teaser.background
+  // Content teaser surface, defaulting to the standard card background
+  // independently of publication surfaces.
+  --mg-content-teaser-background: var(--mg-card-background);
+
+  // content-teaser.padding
+  // Content inset and complete-cover/logo inset inside the enclosed
+  // horizontal teaser; photographs meet the outer edge.
+  --mg-content-teaser-padding: var(--mg-card-padding);
+
+  // content-teaser.border-radius
+  // Content teaser enclosure radius, defaulting to the standard card radius.
+  --mg-content-teaser-border-radius: var(--mg-card-border-radius);
+
+  // content-teaser.shadow
+  // Content teaser soft enclosure, defaulting to the standard card surface at
+  // rest.
+  --mg-content-teaser-shadow: var(--mg-card-shadow);
+
+  // content-teaser.shadow-hover
+  // Content teaser soft enclosure on hover, defaulting to the standard card
+  // hover surface.
+  --mg-content-teaser-shadow-hover: var(--mg-card-shadow-hover);
+
+  // content-card.title-font-size
+  // Title size in vertical content card layouts.
+  --mg-content-card-title-font-size: var(--mg-font-size-500);
+
+  // content-card.book-title-font-size
+  // Title size in book card layouts.
+  --mg-content-card-book-title-font-size: var(--mg-font-size-300);
+
+  // content-card.book.background
+  // Independent content-card surface; publication surfaces do not determine
+  // this value.
+  --mg-content-card-book-background: transparent;
+
+  // content-card.book.padding
+  // Independent content-card surface; publication surfaces do not determine
+  // this value.
+  --mg-content-card-book-padding: 0px;
+
+  // content-card.book.border-radius
+  // Independent content-card surface; publication surfaces do not determine
+  // this value.
+  --mg-content-card-book-border-radius: 0px;
+
+  // content-card.book.shadow
+  // Independent content-card surface; publication surfaces do not determine
+  // this value.
+  --mg-content-card-book-shadow: none;
+
+  // content-card.book.shadow-hover
+  // Independent content-card surface; publication surfaces do not determine
+  // this value.
+  --mg-content-card-book-shadow-hover: none;
+
+  // search.book-cover-height
+  // Desktop search book-grid media stage; missing media reserves this space
+  // only in multi-column layouts.
+  --mg-search-book-cover-height: 20rem;
+
   // notice.action-secondary
   --mg-notice-action-secondary: rgb(var(--mg-color-button-outline-secondary));
 

package/scss/assets/scss/style-all.scss

@@ -6,14 +6,17 @@
 // rebuild needed to switch brands. Prefer a per-brand entry
 // (style-preventionweb.scss, etc.) for single-brand sites; use this bundle for
 // multi-brand or runtime-switching pages. See docs/RELEASE-2.0.md.
-@import "./variables";
-@import "./theme-preventionweb";
-@import "./theme-irp";
-@import "./theme-mcr";
-@import "./theme-delta";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@use "theme-preventionweb" as *;
+@use "theme-irp" as *;
+@use "theme-mcr" as *;
+@use "theme-delta" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;

package/scss/assets/scss/style-delta.scss

@@ -1,8 +1,11 @@
-@import "./variables";
-@import "./theme-delta";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@use "theme-delta" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;

package/scss/assets/scss/style-gutenberg.scss

@@ -9,20 +9,23 @@
  * https://git.un.org/undrr/web-backlog/-/issues/545
  */
 
-@import "./variables";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
 
 // @import './base';
 
 // We only bring in a limited set of components needed for gutenberg
 // @import './components';
-@import "../../Atom/Layout/Container/container";
-@import "../../Atom/Layout/Grid/grid";
-@import "../../Components/Buttons/CtaButton/cta-button";
-@import "../../Components/Cards/Card/card";
-@import "../../Components/Hero/hero";
-@import "../../Components/Tab/tab";
-@import "../../Utilities/FullWidth/full-width";
+@use "../../Atom/Layout/Container/container" as *;
+@use "../../Atom/Layout/Grid/grid" as *;
+@use "../../Components/Buttons/CtaButton/cta-button" as *;
+@use "../../Components/Cards/Card/card" as *;
+@use "../../Components/Hero/hero" as *;
+@use "../../Components/Tab/tab" as *;
+@use "../../Utilities/FullWidth/full-width" as *;

package/scss/assets/scss/style-irp.scss

@@ -1,8 +1,11 @@
-@import "./variables";
-@import "./theme-irp";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@use "theme-irp" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;

package/scss/assets/scss/style-mcr.scss

@@ -1,8 +1,11 @@
-@import "./variables";
-@import "./theme-mcr";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@use "theme-mcr" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;

package/scss/assets/scss/style-preventionweb.scss

@@ -1,8 +1,11 @@
-@import "./variables";
-@import "./theme-preventionweb";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@use "theme-preventionweb" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;

package/scss/assets/scss/style.scss

@@ -1,7 +1,10 @@
-@import "./variables";
-@import "./fonts";
-@import "./breakpoints";
-@import "./mixins";
-@import "./utility";
-@import "./foundational";
-@import "./components";
+@forward "font-paths";
+@forward "variables";
+@use "variables" as *;
+@forward "fonts";
+@use "fonts" as *;
+@forward "breakpoints";
+@forward "mixins";
+@use "utility" as *;
+@use "foundational" as *;
+@use "components" as *;