@undrr/undrr-mangrove 1.2.1

package/dist/assets/scss/_variables-mcr.scss

@@ -0,0 +1,55 @@
+// @use "sass:color";
+/**
+ * @tokens MCR Colors
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// MCR Specific colors
+$mcr-color-purple: #591a61;
+$mcr-color-purple-800: #6e2677;
+$mcr-color-purple-200: #ded0d7;
+$mcr-color-green: rgb(10 105 105);
+$mcr-color-green-800: rgb(0 138 138);
+$mcr-color-green-200: #e2f1f3;
+$mcr-color-orange: $sendai-orange-900;
+$mcr-color-primary: $mcr-color-purple;
+
+// MCR-COLORS HOVER
+$mg-color-interactive: $mcr-color-primary;
+$mg-color-interactive-active: $mcr-color-primary;
+
+// COMPONENTS
+$mg-color-label: $mg-color-interactive;
+$mg-color-label--hover: $mg-color-interactive;
+$mg-radius-label: $mg-spacing-100;
+$mg-color-button-background: $mcr-color-primary;
+$mg-color-button-background--hover: $mcr-color-purple-800;
+$mg-radius-button: $mg-spacing-300;
+$mg-border-width-button: 2px;
+$mg-padding-button: $mg-spacing-150 $mg-spacing-300;
+$mg-font-size-button: $mg-font-size-400;
+
+// Hero
+$mg-color-hero: $mg-color-interactive;
+$mg-spacing-hero-overlay: 2rem 0;
+
+// Tabs
+$mg-color-tabbar-background: none;
+$mg-color-tab-background: $mcr-color-purple-800;
+$mg-color-tab-border: $mcr-color-purple-200;
+$mg-color-tab-border--hover: $mcr-color-purple-800;
+$mg-color-tab-border--active: $mcr-color-purple-200;
+$mg-color-tab-background--hover: rgba($mcr-color-purple-800, 0.6);
+$mg-radius-tab: $mg-spacing-150 $mg-spacing-150 0 0;
+$mg-padding-tab: $mg-spacing-200 $mg-spacing-300;
+$mg-color-text-tab: $mg-color-neutral-700;
+$mg-color-text-tab--hover: $mg-color-white;
+$mg-color-text-tab-active: $mg-color-white;
+$mg-padding-tab-section: $mg-spacing-500;
+$mg-radius-tab-section: $mg-spacing-200;
+$mg-box-shadow-tab-section: rgb(0 0 0 / 0.24) 0 6px 5px 0;
+$mg-tabs-border-bottom: true;
+
+/* variables end */

package/dist/assets/scss/_variables-preventionweb.scss

@@ -0,0 +1,39 @@
+/**
+ * @tokens PW Colors
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// PW Specific colors
+$pw-color-primary: #0a6969;
+
+// PW-COLORS HOVER
+$mg-color-interactive: $pw-color-primary;
+$mg-color-interactive-active: $pw-color-primary;
+
+// PW-COMPONENTS
+$mg-color-label: $mg-color-interactive;
+$mg-color-label--hover: $mg-color-interactive;
+$mg-color-button-background: $pw-color-primary;
+$mg-color-button-background--hover: $sendai-orange-900;
+$mg-radius-button: $mg-spacing-50;
+
+// Hero
+$mg-color-hero: $mg-color-interactive;
+$mg-spacing-hero-overlay: 2rem 0;
+
+// Tabs
+$mg-color-tabbar-background: rgba($pw-color-primary, 0.1);
+$mg-color-tab-background: rgba($mg-color-interactive, 0.1);
+$mg-color-tab-border: $mg-color-interactive;
+$mg-color-tab-border--hover: $mg-color-interactive;
+$mg-color-tab-border--active: $mg-color-tab-background;
+$mg-color-tab-background--hover: rgba($mg-color-interactive, 0.2);
+$mg-radius-tab: $mg-spacing-50 $mg-spacing-50 0 0;
+$mg-tabs-border-bottom: true;
+$mg-color-text-tab: $mg-color-neutral-700;
+$mg-color-text-tab--hover: $mg-color-neutral-700;
+$mg-color-text-tab-active: $mg-color-neutral-900;
+
+/* variables end */

package/dist/assets/scss/_variables.scss

@@ -0,0 +1,345 @@
+/**
+ * This is from the UNDRR Mangrove component library
+ * https://github.com/unisdr/undrr-mangrove?tab=readme-ov-file
+ *
+ *     _   _ _   _ ____  ____  ____    __  __                                     
+ *    | | | | \ | |  _ \|  _ \|  _ \  |  \/  | __ _ _ __   __ _ _ __ _____   _____ 
+ *    | | | |  \| | | | | |_) | |_) | | |\/| |/ _` | '_ \ / _` | '__/ _ \ \ / / _ \
+ *    | |_| | |\  | |_| |  _ <|  _ <  | |  | | (_| | | | | (_| | | | (_) \ V /  __/
+ *     \___/|_| \_|____/|_| \_\_| \_\ |_|  |_|\__,_|_| |_|\__, |_|  \___/ \_/ \___|
+ *                                                        |___/                    
+ */
+// font file variables
+$mgIconFontPath: "../../assets/fonts/mangrove-icon-set/font";
+
+// image variables
+$img-path: "~/stories/assets/images";
+$img-path-Icon: "~/stories/assets/icons";
+$img-path-Iconback: "~/stories/assets/icons";
+$img-path-Iconfourback: "~/stories/assets/icons";
+
+/**
+ * @tokens Colors - basic
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// MG-COLORS BLUE SHADES (#004f91)
+// $mg-color-blue-0: #fff;
+$mg-color-blue-50: #e6edf4;
+$mg-color-blue-100: #ccdce9;
+$mg-color-blue-200: #b3cade;
+$mg-color-blue-300: #99b9d3;
+$mg-color-blue-400: #80a7c8;
+$mg-color-blue-500: #6695bd;
+$mg-color-blue-600: #4d84b2;
+$mg-color-blue-700: #3372a7;
+$mg-color-blue-800: #1a619c;
+$mg-color-blue-900: #004f91;
+
+// MG-COLORS ORANGE SHADES (#eb752a)
+// $mg-color-orange-0: #fff;
+$mg-color-orange-50: #fdf1ea;
+$mg-color-orange-100: #fbe3d4;
+$mg-color-orange-200: #f9d6bf;
+$mg-color-orange-300: #f7c8aa;
+$mg-color-orange-400: #f5ba95;
+$mg-color-orange-500: #f3ac7f;
+$mg-color-orange-600: #f19e6a;
+$mg-color-orange-700: #ef9155;
+$mg-color-orange-800: #ed833f;
+$mg-color-orange-900: #eb752a;
+
+// MG-COLORS RED SHADES (#c10920)
+// $mg-color-red-0: #fff;
+$mg-color-red-50: #f9e6e9;
+$mg-color-red-100: #f3ced2;
+$mg-color-red-200: #ecb5bc;
+$mg-color-red-300: #e69da6;
+$mg-color-red-400: #e08490;
+$mg-color-red-500: #da6b79;
+$mg-color-red-600: #d45363;
+$mg-color-red-700: #cd3a4d;
+$mg-color-red-800: #c72236;
+$mg-color-red-900: #c10920;
+
+/**
+ * @tokens Colors - neutral
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+$mg-color-neutral-0: #fff;
+$mg-color-neutral-50: #e6e6e6;
+$mg-color-neutral-100: #ccc;
+$mg-color-neutral-200: #b3b3b3;
+$mg-color-neutral-300: #999;
+$mg-color-neutral-400: #808080;
+$mg-color-neutral-500: #666;
+$mg-color-neutral-600: #4d4d4d;
+$mg-color-neutral-700: #333;
+$mg-color-neutral-800: #1a1a1a;
+$mg-color-neutral-900: #000;
+$mg-color-black: $mg-color-neutral-800;
+$mg-color-white: $mg-color-neutral-0;
+
+/**
+ * @tokens Colors - accent
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// MG-COLORS ACCENT
+$mg-color-accent-100: #f4e496;
+$mg-color-accent-200: #d3cea9;
+$mg-color-accent-300: #fdf6d9;
+$mg-color-accent-400: #0a6969;
+
+/**
+ * @tokens Colors - interactive
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+$mg-color-interactive-active: $mg-color-blue-700;
+$mg-color-interactive: $mg-color-blue-900;
+
+/**
+ * @tokens UNDRR Colors
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// Unclear if these are needed
+$undrr-color-corporate-blue: $mg-color-blue-900;
+
+/**
+ * @tokens Sendai Framework Colors
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// SENDAI COLORS
+$sendai-red-400: #d45363;
+$sendai-red-600: #cd3a4d;
+$sendai-red-800: #c72236;
+$sendai-red-900: #c10920;
+$sendai-red: $sendai-red-900; // alias
+
+$sendai-orange-400: #f19e6a;
+$sendai-orange-600: #ef9155;
+$sendai-orange-800: #ed833f;
+$sendai-orange-900: #eb752a;
+$sendai-orange: $sendai-orange-900; // alias
+
+$sendai-purple-400: #b669ab;
+$sendai-purple-600: #ab549f;
+$sendai-purple-800: #a13e93;
+$sendai-purple-900: #962987;
+$sendai-purple: $sendai-purple-900; // alias
+
+$sendai-turquoise-400: #4dc7c6;
+$sendai-turquoise-600: #33bfbe;
+$sendai-turquoise-800: #1ab7b6;
+$sendai-turquoise-900: #00afae;
+$sendai-turquoise: $sendai-turquoise-900; // alias
+
+/**
+ * @tokens Spacing
+ * @presenter Spacing
+ */
+$mg-spacing-0: 0;
+$mg-spacing-25: 0.25rem;
+$mg-spacing-50: 0.5rem;
+$mg-spacing-75: 0.75rem;
+$mg-spacing-100: 1rem;
+$mg-spacing-150: 1.5rem;
+$mg-spacing-175: 1.8rem;
+$mg-spacing-200: 2rem;
+$mg-spacing-250: 2.4rem;
+$mg-spacing-300: 3rem;
+$mg-spacing-350: 3rem;
+$mg-spacing-400: 5rem;
+$mg-spacing-500: 6rem;
+$mg-spacing-600: 8rem;
+$mg-spacing-800: 10rem;
+$mg-spacing-1000: 40rem;
+
+/**
+ * @tokens Font sizes
+ * @presenter FontSize
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+$mg-font-size-100: 1rem;
+$mg-font-size-200: 1.25rem;
+$mg-font-size-250: 1.4rem;
+$mg-font-size-300: 1.6rem; // regular body text
+$mg-font-size-400: 1.8rem;
+$mg-font-size-500: 2.3rem;
+$mg-font-size-600: 3.2rem;
+$mg-font-size-800: 3.6rem;
+$mg-font-size-900: 4rem;
+$mg-font-size-1000: 4.8rem;
+$mg-font-size-1100: 6.4rem;
+$mg-font-body: $mg-font-size-300;
+$mg-font-label: $mg-font-size-200;
+$mg-font-line-height-500: 1.25em;
+
+// 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: $mg-font-size-300;
+  } @else if $size == "small" {
+    font-size: $mg-font-size-400;
+  } @else if $size == "medium" {
+    font-size: $mg-font-size-500;
+    padding-top: $mg-spacing-250;
+    padding-bottom: $mg-spacing-150;
+  } @else if $size == "large" {
+    font-size: $mg-font-size-600;
+    padding-top: $mg-spacing-250;
+    padding-bottom: $mg-spacing-150;
+  } @else if $size == "xlarge" {
+    font-size: $mg-font-size-900;
+    padding-top: $mg-spacing-300;
+    padding-bottom: $mg-spacing-175;
+  } @else if $size == "huge" {
+    font-size: $mg-font-size-1000;
+    padding-top: $mg-spacing-350;
+    padding-bottom: $mg-spacing-250;
+  } @else if $size == "xhuge" {
+    font-size: $mg-font-size-1100;
+    padding-top: $mg-spacing-400;
+    padding-bottom: $mg-spacing-350;
+  }
+}
+
+/**
+ * @tokens Font families
+ * @presenter FontFamily
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+$mg-font-family: "Roboto", sans-serif;
+$mg-font-family-condensed: "Roboto Condensed", sans-serif;
+
+// $mg-font-family-icons: "mangrove-icon-set";
+// Not yet activated as we are using the FontAwesome namespace
+
+/**
+ * @tokens Widths
+ * @presenter Spacing
+ */
+
+$mg-width-150: 15rem;
+$mg-width-300: 30rem;
+$mg-width-400: 40rem;
+$mg-width-600: 60rem;
+
+/**
+ * @tokens Breakpoints
+ * @presenter Spacing
+ */
+
+$mg-breakpoint-mobile: 480px;
+$mg-breakpoint-tablet: 1024px;
+$mg-breakpoint-desktop: 1164px; // see the docs: this is our main target but we also have a "wide" breakpoint as a secondary use case
+$mg-breakpoint-desktop-wide: 1440px;
+
+/**
+ * @tokens Colors - component
+ * @presenter Color
+ *
+ * https://github.com/UX-and-I/storybook-design-token
+ */
+
+// page container
+$mg-container-spacer: $mg-spacing-150;
+
+// text
+$mg-color-text: $mg-color-neutral-800;
+
+// label
+$mg-color-label: $mg-color-interactive;
+$mg-color-label--hover: $mg-color-interactive;
+$mg-radius-label: $mg-spacing-0;
+
+// button
+$mg-color-button: $mg-color-white;
+$mg-color-button--hover: $mg-color-white;
+$mg-color-button-background: $mg-color-interactive;
+$mg-color-button-background--hover: $mg-color-interactive-active;
+$mg-radius-button: $mg-spacing-0;
+$mg-border-width-button: 1px;
+$mg-color-text-button: $mg-color-white;
+$mg-border-color-button: $mg-color-text-button;
+$mg-padding-button: $mg-spacing-100 $mg-spacing-150;
+$mg-font-size-button: $mg-font-size-250;
+
+// hero
+$mg-color-hero: $mg-color-interactive;
+$mg-color-hero--secondary: $mg-color-orange-800;
+$mg-color-hero--tertiary: $mg-color-neutral-900;
+$mg-color-hero--quaternary: $mg-color-red-800;
+$mg-opacity-hero: 0.85;
+$mg-spacing-hero-overlay: 0;
+
+// tabs
+$mg-color-tabbar-background: $mg-color-blue-50;
+$mg-color-tab-background: $mg-color-blue-200;
+$mg-color-tab-border: $mg-color-neutral-700;
+$mg-color-tab-border--hover: $mg-color-neutral-900;
+$mg-color-tab-border--active: $mg-color-blue-800;
+$mg-color-tab-background--hover: $mg-color-blue-800;
+$mg-radius-tab: $mg-spacing-0;
+$mg-padding-tab: $mg-spacing-75 $mg-spacing-150;
+$mg-color-text-tab: $mg-color-neutral-700;
+$mg-color-text-tab--hover: $mg-color-white;
+$mg-color-text-tab-active: $mg-color-neutral-700;
+$mg-color-tab-section-background: $mg-color-neutral-0;
+$mg-padding-tab-section: $mg-spacing-100 $mg-spacing-0;
+$mg-radius-tab-section: $mg-spacing-0;
+$mg-box-shadow-tab-section: none;
+$mg-tabs-border-bottom: true;
+
+/**
+ * @tokens Component sizing
+ * @presenter Spacing
+ */
+
+$author-image-radius: 50%;
+
+/**
+  * @tokens-end
+  */
+
+// Legacy: Required by UNDP
+$mg-color-green: #008484;
+$mg-color-green-light: #90ee90;
+$mg-color-yellow: #ff0;
+$mg-color-yellow-light: lightyellow;
+$mg-color-yellow-dark: #d6d624;
+$mg-color-azure: #f0ffff;
+$mg-color-azure-dark: #d4e3e3;
+$mg-color-azure-light: #f0f8f8;
+$mg-color-ebony-clay: #3d4242;
+$mg-color-green-dark: #006400;
+
+// Header height
+$header-height-xlarge: 115px;
+$header-height-medium: 75px;
+
+// language selectors
+$cyrillic: ":lang(bg),:lang(be),:lang(kk),:lang(ky),:lang(mk),:lang(mn),:lang(ru),:lang(sr),:lang(uk)";
+
+/* variables end */

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

@@ -0,0 +1,28 @@
+/**
+ * This is a "temporary" solution to ease the development
+ * of our prototype Gutenberg components.
+ * It should be removed once the Mangrove library is fully
+ * theme aware and in sync with UNDRR themes.
+ *
+ * See also:
+ * https://git.un.org/undrr/web-backlog/-/issues/611
+ * https://git.un.org/undrr/web-backlog/-/issues/545
+ */
+
+@import "./variables";
+@import "./fonts";
+@import "./breakpoints";
+@import "./mixins";
+@import "./utility";
+
+// @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/buttons";
+@import "../../Components/Cards/Card/card";
+@import "../../Components/Hero/hero";
+@import "../../Components/Tab/tab";
+@import "../../Utilities/FullWidth/FullWidth";

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

@@ -0,0 +1,8 @@
+@import "./variables";
+@import "./variables-irp";
+@import "./fonts";
+@import "./breakpoints";
+@import "./mixins";
+@import "./utility";
+@import "./foundational";
+@import "./components";

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

@@ -0,0 +1,8 @@
+@import "./variables";
+@import "./variables-mcr";
+@import "./fonts";
+@import "./breakpoints";
+@import "./mixins";
+@import "./utility";
+@import "./foundational";
+@import "./components";

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

@@ -0,0 +1,8 @@
+@import "./variables";
+@import "./variables-preventionweb";
+@import "./fonts";
+@import "./breakpoints";
+@import "./mixins";
+@import "./utility";
+@import "./foundational";
+@import "./components";

package/dist/assets/scss/style.scss

@@ -0,0 +1,7 @@
+@import "./variables";
+@import "./fonts";
+@import "./breakpoints";
+@import "./mixins";
+@import "./utility";
+@import "./foundational";
+@import "./components";

package/dist/components/64859daad6c1e719d2b3.png

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "assets/8f2c4d11474275fbc1614b9098334eae.png";

package/dist/components/871deead6fbe28d9b668.png

@@ -0,0 +1 @@
+export default __webpack_public_path__ + "assets/2b3e1faf89f94a4835397e7a43b4f77d.png";