@undrr/undrr-mangrove 2.1.1 → 2.2.0

package/scss/assets/scss/_components.scss

@@ -1,102 +1,104 @@
 // A rollup of all Mangrove components
 
 // Normalize
-@import "../../Utilities/Normalize/normalize";
+@use "../../Utilities/Normalize/normalize" as *;
 
 // Atom
-@import "../../Atom/BaseTypography/Abbr/abbr";
-@import "../../Atom/BaseTypography/Blockquote/blockquote";
-@import "../../Atom/BaseTypography/Cite/cite";
-@import "../../Atom/BaseTypography/Code/code";
-@import "../../Atom/BaseTypography/Mark/mark";
-@import "../../Atom/BaseTypography/Quotation/quotation";
-@import "../../Atom/BaseTypography/Small/small";
-@import "../../Atom/Colors/color";
+@use "../../Atom/BaseTypography/Abbr/abbr" as *;
+@use "../../Atom/BaseTypography/Blockquote/blockquote" as *;
+@use "../../Atom/BaseTypography/Cite/cite" as *;
+@use "../../Atom/BaseTypography/Code/code" as *;
+@use "../../Atom/BaseTypography/Mark/mark" as *;
+@use "../../Atom/BaseTypography/Quotation/quotation" as *;
+@use "../../Atom/BaseTypography/Small/small" as *;
+@use "../../Atom/Colors/color" as *;
 
 // Icon definitions — included here so every theme CSS file contains icons.
 // See: https://github.com/unisdr/undrr-mangrove/issues/906
-@import "../../Atom/Icons/icons";
-@import "../../Atom/Images/AuthorImage/author-image";
-@import "../../Atom/Images/Image/image";
-@import "../../Atom/Images/ImageCaptionCredit/image-caption-credit";
-@import "../../Atom/Images/ImageCredit/image-credit";
-@import "../../Atom/Layout/Container/container";
-@import "../../Atom/Layout/Grid/grid";
-@import "../../Atom/Logo/logo";
+@use "../../Atom/Icons/icons" as *;
+@use "../../Atom/Images/AuthorImage/author-image" as *;
+@use "../../Atom/Images/Image/image" as *;
+@use "../../Atom/Images/ImageCaptionCredit/image-caption-credit" as *;
+@use "../../Atom/Images/ImageCredit/image-credit" as *;
+@use "../../Atom/Layout/Container/container" as *;
+@use "../../Atom/Layout/Grid/grid" as *;
+@use "../../Atom/Logo/logo" as *;
 
 // @import "../../Atom/Layout/Spacing/spacing"; // Retried
 // @import "../../Atom/Navigation/Breadcrumb/breadcrumb"; // Retried
-@import "../../Atom/Navigation/MenuItems/menu-items";
-@import "../../Atom/ReachElement/Details/details";
-@import "../../Atom/ReachElement/Figcaption/figcaption";
-@import "../../Atom/EmptyState/empty-state";
-@import "../../Atom/StatusLabel/status-label";
-@import "../../Atom/Table/table";
-@import "../../Atom/Tag/tag";
-@import "../../Atom/Video/video";
+@use "../../Atom/Navigation/MenuItems/menu-items" as *;
+@use "../../Atom/ReachElement/Details/details" as *;
+@use "../../Atom/ReachElement/Figcaption/figcaption" as *;
+@use "../../Atom/EmptyState/empty-state" as *;
+@use "../../Atom/StatusLabel/status-label" as *;
+@use "../../Atom/Table/table" as *;
+@use "../../Atom/Tag/tag" as *;
+@use "../../Atom/Video/video" as *;
 
 // Components
-@import "../../Components/Boilerplate/boilerplate";
-@import "../../Components/Forms/form-base";
-@import "../../Components/Forms/FormAction/form-action";
-@import "../../Components/Forms/FormGroup/form-group";
-@import "../../Components/Forms/TextInput/text-input";
-@import "../../Components/Forms/Textarea/textarea";
-@import "../../Components/Forms/Checkbox/checkbox";
-@import "../../Components/Forms/Radio/radio";
-@import "../../Components/Forms/SegmentedControl/segmented-control";
-@import "../../Components/Forms/Select/select";
-@import "../../Components/Forms/Range/range";
-@import "../../Components/Breadcrumbs/breadcrumbs";
+@use "../../Components/Boilerplate/boilerplate" as *;
+@use "../../Components/Forms/form-base" as *;
+@use "../../Components/Forms/FormAction/form-action" as *;
+@use "../../Components/Forms/FormGroup/form-group" as *;
+@use "../../Components/Forms/TextInput/text-input" as *;
+@use "../../Components/Forms/Textarea/textarea" as *;
+@use "../../Components/Forms/Checkbox/checkbox" as *;
+@use "../../Components/Forms/Radio/radio" as *;
+@use "../../Components/Forms/SegmentedControl/segmented-control" as *;
+@use "../../Components/Forms/Select/select" as *;
+@use "../../Components/Forms/Range/range" as *;
+@use "../../Components/Breadcrumbs/breadcrumbs" as *;
 
 // Deprecated (February 2026) — removal planned by end of 2026. Use Pager instead.
-@import "../../Components/Pager/pager";
-@import "../../Components/Gallery/gallery";
-@import "../../Components/HighlightBox/highlight-box";
-@import "../../Components/QuoteHighlight/quote-highlight";
-@import "../../Components/Buttons/Chips/chips";
-@import "../../Components/Buttons/CtaButton/cta-button";
-@import "../../Components/Buttons/ShareButtons/share-buttons";
-@import "../../Components/Buttons/CopyButton/copy-button";
-@import "../../Components/MegaMenu/mega-menu";
-@import "../../Patterns/HubHeader/hub-header";
-@import "../../Components/CiteThis/cite-this";
-@import "../../Utilities/PagePatterns/page-patterns";
-@import "../../Components/PageHeader/page-header";
-@import "../../Components/Cards/Card/card";
-@import "../../Components/Cards/StatsCard/stats-card";
-@import "../../Components/Snackbar/snackbar";
-@import "../../Components/CookieConsentBanner/cookie-consent-banner";
-@import "../../Components/Hero/hero";
-@import "../../Components/TextCta/text-cta";
-@import "../../Components/Notice/notice";
-@import "../../Components/ProgressBar/progress-bar";
-@import "../../Components/ScrollContainer/scroll-container";
-@import "../../Components/Tab/tab";
-@import "../../Components/UserFeedback/user-feedback";
+@use "../../Components/Pager/pager" as *;
+@use "../../Components/Gallery/gallery" as *;
+@use "../../Components/HighlightBox/highlight-box" as *;
+@use "../../Components/QuoteHighlight/quote-highlight" as *;
+@use "../../Components/Buttons/Chips/chips" as *;
+@use "../../Components/Buttons/CtaButton/cta-button" as *;
+@use "../../Components/Buttons/ShareButtons/share-buttons" as *;
+@use "../../Components/Buttons/CopyButton/copy-button" as *;
+@use "../../Components/MegaMenu/mega-menu" as *;
+@use "../../Patterns/HubHeader/hub-header" as *;
+@use "../../Components/CiteThis/cite-this" as *;
+@use "../../Utilities/PagePatterns/page-patterns" as *;
+@use "../../Components/PageHeader/page-header" as *;
+@use "../../Components/Cards/Card/card" as *;
+@use "../../Components/Cards/StatsCard/stats-card" as *;
+@use "../../Components/Snackbar/snackbar" as *;
+@use "../../Components/CookieConsentBanner/cookie-consent-banner" as *;
+@use "../../Components/Hero/hero" as *;
+@use "../../Components/TextCta/text-cta" as *;
+@use "../../Components/Notice/notice" as *;
+@use "../../Components/ProgressBar/progress-bar" as *;
+@use "../../Components/ScrollContainer/scroll-container" as *;
+@use "../../Components/Tab/tab" as *;
+@use "../../Components/UserFeedback/user-feedback" as *;
 
 // CSS+vanilla-JS component — Drupal integration via Gutenberg block, not a React export.
-@import "../../Components/TableOfContents/table-of-contents";
-@import "../../Components/OnThisPageNav/on-this-page-nav";
-@import "../../Components/PreviewAccess/preview-access";
-@import "../../Components/SyndicationSearchWidget/syndication-search-widget";
+@use "../../Components/TableOfContents/table-of-contents" as *;
+@use "../../Components/OnThisPageNav/on-this-page-nav" as *;
+@use "../../Components/PreviewAccess/preview-access" as *;
+@use "../../Components/SyndicationSearchWidget/syndication-search-widget" as *;
 
 // CSS+static-HTML component — not a React export. Static pages in dist/assets/error-pages/.
-@import "../../Components/ErrorPages/error-pages";
-@import "../../Components/Footer/footer";
+@use "../../Components/ErrorPages/error-pages" as *;
+@use "../../Components/Footer/footer" as *;
 
 // Molecules
-@import "../../Molecules/ImageCaption/image-caption";
+@use "../../Molecules/ImageCaption/image-caption" as *;
 
 // Utilities
-@import "../../Utilities/EmbedContainer/embed-container";
-@import "../../Utilities/Loader/loader";
-@import "../../Utilities/FullWidth/full-width";
-@import "../../Utilities/ShowMore/show-more";
-@import "../../Utilities/SkipLink/skip-link";
-@import "../../Components/DataViz/Legend/legend";
-@import "../../Components/Navigation/Drawer/drawer";
-@import "../../Components/Navigation/Tree/tree";
+@use "../../Utilities/EmbedContainer/embed-container" as *;
+@use "../../Utilities/Loader/loader" as *;
+@use "../../Utilities/FullWidth/full-width" as *;
+@use "../../Utilities/ShowMore/show-more" as *;
+@use "../../Utilities/SkipLink/skip-link" as *;
+@use "../../Components/DataViz/Legend/legend" as *;
+@use "../../Components/Navigation/Drawer/drawer" as *;
+@use "../../Components/Navigation/Tree/tree" as *;
 
 // Opt-in editorial defaults follow component styles; classed islands opt out.
-@import "../../Patterns/RichContent/rich-content";
+@use "../../Patterns/RichContent/rich-content" as *;
+@use "../../Patterns/ContentTeaser/content-teaser";
+@use "../../Patterns/ContentCard/content-card";

package/scss/assets/scss/_config.scss

@@ -0,0 +1,183 @@
+// Internal CSS-free build-time configuration and public Sass helpers.
+// Public consumers load variables for the foundational root declarations.
+@use "sass:math";
+@use "sass:meta";
+@forward "tokens-tabs";
+@use "tokens-tabs" as *;
+
+// 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`.
+@forward "generated/tokens-mangrove";
+@use "generated/tokens-mangrove" as *;
+
+// 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
+
+$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 so both role definitions and the fonts module preserve
+// quoted family names in exactly the same way.
+// 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 public variables `:root` block
+// 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;
+
+// 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/_font-paths.scss

@@ -0,0 +1,10 @@
+// Build-time font asset URLs. Shared by the font entry point and face modules.
+$font-path-roboto: "https://assets.undrr.org/fonts/roboto/v1.0.0" !default;
+$font-path-roboto-condensed: "https://assets.undrr.org/fonts/roboto-condensed/v1.0.0" !default;
+$font-path-noto-kufi-arabic: "https://assets.undrr.org/fonts/noto-kufi-arabic/v1.1.0" !default;
+$font-path-noto-sans-arabic: "https://assets.undrr.org/fonts/noto-sans-arabic/v1.0.0" !default;
+
+// Legacy Roboto file-name/version hooks were shared by the import chain.
+// Keep one source for both Roboto families, including configured overrides.
+$FontName: "Roboto" !default;
+$font-version: "2.137" !default;

package/scss/assets/scss/_fonts.import.scss

@@ -0,0 +1,2 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@forward "fonts";

package/scss/assets/scss/_fonts.scss

@@ -1,3 +1,10 @@
+@forward "font-paths";
+@use "../fonts/roboto/roboto" as *;
+@use "../fonts/roboto-condensed/roboto-condensed" as *;
+@use "../fonts/noto-kufi-arabic/noto-kufi-arabic" as *;
+@use "../fonts/noto-sans-arabic/noto-sans-arabic" as *;
+@use "config" as *;
+
 // The font entry point. This file owns everything about type FACES: the asset
 // paths, the `@font-face` declarations, and the script routing that re-points
 // the font roles for Arabic. There is one font import, not two —
@@ -30,61 +37,12 @@
 //            read as prose and take `text`.
 //   code     code / pre
 
-// IMPORT _variables.scss BEFORE THIS FILE. The script routing at the bottom
-// builds its values with `mg-font-stack()` and the `$mg-font-face-*` variables,
-// all of which _variables.scss owns, so this file does not compile on its own.
-// The failure is a hard `Undefined variable` error rather than a silent
-// fallback, but not every build path names both files in the same place — see
-// the Drupal list below.
-
-// IMPORT THIS FILE EXACTLY ONCE PER BUILD. Sass's legacy `@import` re-emits,
-// and `@import` is not allowed inside `@if`, so the `@font-face` partials below
-// cannot be guarded — a second visit would duplicate all 32 blocks. Every
-// supported build path reaches it once and only once:
-
-//   - the seven style*.scss entry points import _variables.scss and then this
-//     file, both directly;
-//   - the shared import list every UNDRR Drupal theme compiles
-//     (undrr_common/scss/_mangrove-components.scss) names `fonts` in its own
-//     right — first in the list, ahead of breakpoints, mixins, foundational and
-//     utility. It does NOT name `variables` anywhere: the theme entry point one
-//     level up supplies that, either as `@use "variables" as *` or as a plain
-//     `@import`, before it reaches the list. So the ordering rule above is a
-//     contract across two files, and copying or reordering that list without
-//     carrying its entry point's `variables` import is a compile error;
-//   - the per-component recipe in SassIntegration.mdx names both, in order.
-
-// _foundational.scss therefore does NOT import it. It used to import
-// _font-roles.scss, because that file was reachable from the entry points only
-// and every production site was compiling the roles with no Arabic map behind
-// them: Arabic text asked for Roboto, which has no Arabic coverage, and every
-// glyph fell back to the OS default. Silently. Folding the map into the file
-// consumers already import closes that hole at the source instead of routing
-// around it. A test in __tests__/font-roles.test.js counts the `@font-face`
-// blocks in every compiled bundle and in the consumer import list, so adding a
-// second import of this file fails the suite rather than shipping quietly.
-
-/* Roboto */
-$font-path-roboto: "https://assets.undrr.org/fonts/roboto/v1.0.0" !default;
-
-@import "../fonts/roboto/roboto";
-
-/* Roboto Condensed */
-$font-path-roboto-condensed: "https://assets.undrr.org/fonts/roboto-condensed/v1.0.0" !default;
-
-@import "../fonts/roboto-condensed/roboto-condensed";
-
-/* Arabic Fonts */
-
-/* Noto Kufi Arabic - for headings in Arabic */
-$font-path-noto-kufi-arabic: "https://assets.undrr.org/fonts/noto-kufi-arabic/v1.1.0" !default;
-
-@import "../fonts/noto-kufi-arabic/noto-kufi-arabic";
-
-/* Noto Sans Arabic - for body text in Arabic */
-$font-path-noto-sans-arabic: "https://assets.undrr.org/fonts/noto-sans-arabic/v1.0.0" !default;
-
-@import "../fonts/noto-sans-arabic/noto-sans-arabic";
+// Module dependencies are explicit: variables owns role definitions and
+// font-paths owns configurable asset URLs without loading any face modules.
+// @use emits these faces once even when several consumers depend on fonts.
+// Legacy @import consumers are routed through _fonts.import.scss to preserve
+// pre-import URL assignments. The shared Drupal import list and the published
+// per-component recipe are covered by __tests__/font-roles.test.js.
 
 @mixin mg-font-roles-arabic {
   --mg-font-family-text: #{mg-font-stack($mg-font-face-arabic-sans)};

package/scss/assets/scss/_foundational.scss

@@ -1,3 +1,7 @@
+@use "breakpoints" as *;
+@use "mixins" as *;
+@use "config" as *;
+
 /* typography start */
 *,
 *::before,
@@ -71,9 +75,8 @@ caption {
 // Latin face and _fonts.scss re-points to Noto Kufi Arabic. Compile
 // _foundational.scss without _fonts.scss and the rule still matches but
 // resolves to Roboto, which has no Arabic coverage. Every documented import
-// list names both; _fonts.scss does not import itself into this file, because
-// the entry points already import it and Sass's legacy `@import` would emit its
-// 32 `@font-face` blocks a second time.
+// list names both. Keep face loading in the fonts module, which emits its
+// 32 text `@font-face` blocks once for every supported entry point.
 h1:lang(ar),
 h2:lang(ar),
 h3:lang(ar) {

package/scss/assets/scss/_legacy-warnings.scss

@@ -0,0 +1,37 @@
+// Import-only bridges inspect the caller's scope; this module owns the
+// shared diagnostics so entry-point bridges cannot drift from variables.
+@use "sass:map";
+
+$legacy-roles: (
+  "mg-color-interactive": null,
+  "mg-color-interactive-active": null,
+  "mg-color-button-background": null,
+  "mg-color-button-background--hover": null,
+  "mg-border-color-button": null,
+  "mg-color-tag": null,
+  "mg-color-form-check": null,
+  "mg-color-form-focus": null,
+  "mg-color-hero": null,
+  "mg-color-hero--secondary": null,
+  "mg-spacing-150": null,
+  "mg-spacing-300": null,
+  "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",
+);
+$legacy-names: map.keys($legacy-roles);
+
+@mixin warn-override($name) {
+  $role: map.get($legacy-roles, $name);
+
+  @if not $role {
+    @warn "Mangrove 2.0: `$#{$name}` no longer has any effect — color and spacing tokens are CSS custom properties now. Move the override into a `.mg-theme-* { --#{$name}: ...; }` block (or `:root`). See docs/RELEASE-2.0.md.";
+  } @else if $role == "" {
+    @warn "Mangrove 2.0: `$#{$name}` 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: `$#{$name}` 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.";
+  }
+}

package/scss/assets/scss/_mixins.scss

@@ -1,3 +1,5 @@
+@use "breakpoints" as *;
+
 // background image gradient
 @mixin background-image($deg, $colorname, $opacity) {
   background: linear-gradient($deg, $colorname, $opacity);

package/scss/assets/scss/_style-all.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-all";
+
+// 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/_style-delta.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-delta";
+
+// 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/_style-gutenberg.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-gutenberg";
+
+// 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/_style-irp.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-irp";
+
+// 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/_style-mcr.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-mcr";
+
+// 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/_style-preventionweb.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style-preventionweb";
+
+// 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/_style.import.scss

@@ -0,0 +1,11 @@
+// Legacy globals configure forwarded modules on first load (Sass semantics).
+@use "sass:meta";
+@use "legacy-warnings";
+@forward "style";
+
+// 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/_theme-delta.scss

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