@progressiveui/themes-core 0.4.0

package/dist/scss/tokens.scss

@@ -0,0 +1,430 @@
+$brand-wfp-blue-wfp-blue10: var(--brand-wfp-blue-wfp-blue10, "#001d31") !default;
+$brand-wfp-blue-wfp-blue20: var(--brand-wfp-blue-wfp-blue20, "#003351") !default;
+$brand-wfp-blue-wfp-blue30: var(--brand-wfp-blue-wfp-blue30, "#004b73") !default;
+$brand-wfp-blue-wfp-blue40: var(--brand-wfp-blue-wfp-blue40, "#006497") !default;
+$brand-wfp-blue-wfp-blue50: var(--brand-wfp-blue-wfp-blue50, "#007dbc") !default;
+$brand-wfp-blue-wfp-blue60: var(--brand-wfp-blue-wfp-blue60, "#3998d8") !default;
+$brand-wfp-blue-wfp-blue70: var(--brand-wfp-blue-wfp-blue70, "#5ab2f5") !default;
+$brand-wfp-blue-wfp-blue80: var(--brand-wfp-blue-wfp-blue80, "#92ccff") !default;
+$brand-wfp-blue-wfp-blue90: var(--brand-wfp-blue-wfp-blue90, "#cce5ff") !default;
+$brand-wfp-blue-wfp-blue95: var(--brand-wfp-blue-wfp-blue95, "#e7f2ff") !default;
+$brand-dark-blue-dark-blue10: var(--brand-dark-blue-dark-blue10, "#04193b") !default;
+$brand-dark-blue-dark-blue20: var(--brand-dark-blue-dark-blue20, "#0d295c") !default;
+$brand-dark-blue-dark-blue30: var(--brand-dark-blue-dark-blue30, "#1a3d80") !default;
+$brand-dark-blue-dark-blue40: var(--brand-dark-blue-dark-blue40, "#32549a") !default;
+$brand-dark-blue-dark-blue50: var(--brand-dark-blue-dark-blue50, "#4a6cb7") !default;
+$brand-dark-blue-dark-blue60: var(--brand-dark-blue-dark-blue60, "#6287d5") !default;
+$brand-dark-blue-dark-blue70: var(--brand-dark-blue-dark-blue70, "#7da2f6") !default;
+$brand-dark-blue-dark-blue80: var(--brand-dark-blue-dark-blue80, "#a7c0fb") !default;
+$brand-dark-blue-dark-blue90: var(--brand-dark-blue-dark-blue90, "#d4dffd") !default;
+$brand-dark-blue-dark-blue95: var(--brand-dark-blue-dark-blue95, "#e8edf2") !default;
+$brand-main: var(--brand-main, "brand-wfp-blue-wfp-blue50") !default;
+$brand-inverse: var(--brand-inverse, "neutral-neutral100-white") !default;
+$semantic-alert-alert10: var(--semantic-alert-alert10, "#2f2400") !default;
+$semantic-alert-alert20: var(--semantic-alert-alert20, "#4a3900") !default;
+$semantic-alert-alert30: var(--semantic-alert-alert30, "#665000") !default;
+$semantic-alert-alert40: var(--semantic-alert-alert40, "#a28100") !default;
+$semantic-alert-alert50: var(--semantic-alert-alert50, "#e3b500") !default;
+$semantic-alert-alert60: var(--semantic-alert-alert60, "#ffd100") !default;
+$semantic-alert-alert70: var(--semantic-alert-alert70, "#ffdc44") !default;
+$semantic-alert-alert80: var(--semantic-alert-alert80, "#ffe582") !default;
+$semantic-alert-alert90: var(--semantic-alert-alert90, "#ffefb0") !default;
+$semantic-alert-alert95: var(--semantic-alert-alert95, "#feebc8") !default;
+$semantic-error-error10: var(--semantic-error-error10, "#38000c") !default;
+$semantic-error-error20: var(--semantic-error-error20, "#5c0014") !default;
+$semantic-error-error30: var(--semantic-error-error30, "#86001d") !default;
+$semantic-error-error40: var(--semantic-error-error40, "#b40027") !default;
+$semantic-error-error50: var(--semantic-error-error50, "#e4002b") !default;
+$semantic-error-error60: var(--semantic-error-error60, "#fc3b53") !default;
+$semantic-error-error70: var(--semantic-error-error70, "#fc777e") !default;
+$semantic-error-error80: var(--semantic-error-error80, "#fda6a8") !default;
+$semantic-error-error90: var(--semantic-error-error90, "#fed3d3") !default;
+$semantic-error-error95: var(--semantic-error-error95, "#fee9e9") !default;
+$semantic-success-success10: var(--semantic-success-success10, "#051e0e") !default;
+$semantic-success-success20: var(--semantic-success-success20, "#083216") !default;
+$semantic-success-success30: var(--semantic-success-success30, "#0b4a20") !default;
+$semantic-success-success40: var(--semantic-success-success40, "#0f642c") !default;
+$semantic-success-success50: var(--semantic-success-success50, "#148038") !default;
+$semantic-success-success60: var(--semantic-success-success60, "#00ab4a") !default;
+$semantic-success-success70: var(--semantic-success-success70, "#36bd5b") !default;
+$semantic-success-success80: var(--semantic-success-success80, "#53dd73") !default;
+$semantic-success-success90: var(--semantic-success-success90, "#83f79b") !default;
+$semantic-success-success95: var(--semantic-success-success95, "#e2ffe4") !default;
+
+
+$neutral-neutral0-black: var(--neutral-neutral0-black, "#13162B") !default;
+$neutral-neutral10: var(--neutral-neutral10, "#171c22") !default;
+$neutral-neutral20: var(--neutral-neutral20, "#2b3137") !default;
+$neutral-neutral30: var(--neutral-neutral30, "#42474e") !default;
+$neutral-neutral40: var(--neutral-neutral40, "#595f65") !default;
+$neutral-neutral50: var(--neutral-neutral50, "#72787e") !default;
+$neutral-neutral60: var(--neutral-neutral60, "#8c9198") !default;
+$neutral-neutral70: var(--neutral-neutral70, "#a6acb3") !default;
+$neutral-neutral80: var(--neutral-neutral80, "#c2c7ce") !default;
+$neutral-neutral90: var(--neutral-neutral90, "#dee3eb") !default;
+$neutral-neutral95: var(--neutral-neutral95, "#f6f7f9") !default;
+$neutral-neutral100-white: var(--neutral-neutral100-white, "#ffffff") !default;
+$font-family-primary: var(--font-family-primary, "Open Sans") !default;
+$font-family-monospace: var(--font-family-monospace, "\"Source Code Pro\", monospace") !default;
+$font-family-noto-sans: var(--font-family-noto-sans, "Noto Sans") !default;
+$line-height-75: var(--line-height-75, "120%") !default;
+$line-height-100: var(--line-height-100, "AUTO") !default;
+$line-height-125: var(--line-height-125, "150%") !default;
+$font-weight-regular: var(--font-weight-regular, "Regular") !default;
+$font-weight-bold: var(--font-weight-bold, "Bold") !default;
+$font-weight-semi-bold: var(--font-weight-semi-bold, "SemiBold") !default;
+$font-size-desktop-25: var(--font-size-desktop-25, "10") !default;
+$font-size-desktop-50: var(--font-size-desktop-50, "12") !default;
+$font-size-desktop-75: var(--font-size-desktop-75, "14") !default;
+$font-size-desktop-100: var(--font-size-desktop-100, "16") !default;
+$font-size-desktop-150: var(--font-size-desktop-150, "18") !default;
+$font-size-desktop-200: var(--font-size-desktop-200, "24") !default;
+$font-size-desktop-300: var(--font-size-desktop-300, "30") !default;
+$font-size-desktop-400: var(--font-size-desktop-400, "32") !default;
+$font-size-desktop-500: var(--font-size-desktop-500, "34") !default;
+$font-size-desktop-600: var(--font-size-desktop-600, "44") !default;
+$font-size-desktop-700: var(--font-size-desktop-700, "56") !default;
+$font-size-mobile-25: var(--font-size-mobile-25, "10") !default;
+$font-size-mobile-50: var(--font-size-mobile-50, "12") !default;
+$font-size-mobile-75: var(--font-size-mobile-75, "14") !default;
+$font-size-mobile-100: var(--font-size-mobile-100, "16") !default;
+$font-size-mobile-150: var(--font-size-mobile-150, "18") !default;
+$font-size-mobile-200: var(--font-size-mobile-200, "18") !default;
+$font-size-mobile-300: var(--font-size-mobile-300, "20") !default;
+$font-size-mobile-400: var(--font-size-mobile-400, "22") !default;
+$font-size-mobile-500: var(--font-size-mobile-500, "25") !default;
+$font-size-mobile-600: var(--font-size-mobile-600, "28") !default;
+$font-size-mobile-700: var(--font-size-mobile-700, "32") !default;
+$letter-spacing-75: var(--letter-spacing-75, "-2%") !default;
+$letter-spacing-100: var(--letter-spacing-100, "0") !default;
+$letter-spacing-125: var(--letter-spacing-125, "2%") !default;
+$spacing-50: var(--spacing-50, "2px") !default;
+$spacing-75: var(--spacing-75, "4px") !default;
+$spacing-100: var(--spacing-100, "8px") !default;
+$spacing-200: var(--spacing-200, "12px") !default;
+$spacing-300: var(--spacing-300, "16px") !default;
+$spacing-400: var(--spacing-400, "24px") !default;
+$spacing-500: var(--spacing-500, "32px") !default;
+$spacing-600: var(--spacing-600, "40px") !default;
+$spacing-700: var(--spacing-700, "48px") !default;
+$spacing-800: var(--spacing-800, "64px") !default;
+$spacing-900: var(--spacing-900, "80px") !default;
+$spacing-1000: var(--spacing-1000, "96px") !default;
+$border-radius-100: var(--border-radius-100, "2px") !default;
+$border-radius-200: var(--border-radius-200, "4px") !default;
+$border-radius-300: var(--border-radius-300, "6px") !default;
+$border-width-100: var(--border-width-100, "1px") !default;
+$border-width-200: var(--border-width-200, "2px") !default;
+$border-width-300: var(--border-width-300, "4px") !default;
+$content-content1-aquamarine-content1-10: var(--content-content1-aquamarine-content1-10, "#051d21") !default;
+$content-content1-aquamarine-content1-20: var(--content-content1-aquamarine-content1-20, "#083036") !default;
+$content-content1-aquamarine-content1-30: var(--content-content1-aquamarine-content1-30, "#0b464f") !default;
+$content-content1-aquamarine-content1-40: var(--content-content1-aquamarine-content1-40, "#0f5f6b") !default;
+$content-content1-aquamarine-content1-50: var(--content-content1-aquamarine-content1-50, "#137a89") !default;
+$content-content1-aquamarine-content1-60: var(--content-content1-aquamarine-content1-60, "#1897aa") !default;
+$content-content1-aquamarine-content1-70: var(--content-content1-aquamarine-content1-70, "#00aec7") !default;
+$content-content1-aquamarine-content1-80: var(--content-content1-aquamarine-content1-80, "#50d5eb") !default;
+$content-content1-aquamarine-content1-90: var(--content-content1-aquamarine-content1-90, "#9feefd") !default;
+$content-content1-aquamarine-content1-95: var(--content-content1-aquamarine-content1-95, "#d1f6fe") !default;
+$content-content2-burgundy-content2-10: var(--content-content2-burgundy-content2-10, "#350020") !default;
+$content-content2-burgundy-content2-20: var(--content-content2-burgundy-content2-20, "#570036") !default;
+$content-content2-burgundy-content2-30: var(--content-content2-burgundy-content2-30, "#890c58") !default;
+$content-content2-burgundy-content2-40: var(--content-content2-burgundy-content2-40, "#9c1d64") !default;
+$content-content2-burgundy-content2-50: var(--content-content2-burgundy-content2-50, "#be367e") !default;
+$content-content2-burgundy-content2-60: var(--content-content2-burgundy-content2-60, "#e24e9a") !default;
+$content-content2-burgundy-content2-70: var(--content-content2-burgundy-content2-70, "#fc70b5") !default;
+$content-content2-burgundy-content2-80: var(--content-content2-burgundy-content2-80, "#fda2ca") !default;
+$content-content2-burgundy-content2-90: var(--content-content2-burgundy-content2-90, "#fed1e2") !default;
+$content-content2-burgundy-content2-95: var(--content-content2-burgundy-content2-95, "#fee8ef") !default;
+$content-content3-dark-green-content3-10: var(--content-content3-dark-green-content3-10, "#051f17") !default;
+$content-content3-dark-green-content3-20: var(--content-content3-dark-green-content3-20, "#083226") !default;
+$content-content3-dark-green-content3-30: var(--content-content3-dark-green-content3-30, "#0b4837") !default;
+$content-content3-dark-green-content3-40: var(--content-content3-dark-green-content3-40, "#00664f") !default;
+$content-content3-dark-green-content3-50: var(--content-content3-dark-green-content3-50, "#147d60") !default;
+$content-content3-dark-green-content3-60: var(--content-content3-dark-green-content3-60, "#229b76") !default;
+$content-content3-dark-green-content3-70: var(--content-content3-dark-green-content3-70, "#41b991") !default;
+$content-content3-dark-green-content3-80: var(--content-content3-dark-green-content3-80, "#5ed8ae") !default;
+$content-content3-dark-green-content3-90: var(--content-content3-dark-green-content3-90, "#7bf9cc") !default;
+$content-content3-dark-green-content3-95: var(--content-content3-dark-green-content3-95, "#b4ffe1") !default;
+$content-content4-earthy-brown-content4-10: var(--content-content4-earthy-brown-content4-10, "#2c1107") !default;
+$content-content4-earthy-brown-content4-20: var(--content-content4-earthy-brown-content4-20, "#481c0c") !default;
+$content-content4-earthy-brown-cream30: var(--content-content4-earthy-brown-cream30, "#692911") !default;
+$content-content4-earthy-brown-content4-40: var(--content-content4-earthy-brown-content4-40, "#8d391a") !default;
+$content-content4-earthy-brown-content4-50: var(--content-content4-earthy-brown-content4-50, "#ad4f2b") !default;
+$content-content4-earthy-brown-content4-60: var(--content-content4-earthy-brown-content4-60, "#bf6428") !default;
+$content-content4-earthy-brown-content4-70: var(--content-content4-earthy-brown-content4-70, "#e87e55") !default;
+$content-content4-earthy-brown-content4-80: var(--content-content4-earthy-brown-content4-80, "#fda987") !default;
+$content-content4-earthy-brown-content4-90: var(--content-content4-earthy-brown-content4-90, "#fed4c4") !default;
+$content-content4-earthy-brown-content4-95: var(--content-content4-earthy-brown-content4-95, "#fee9e2") !default;
+$content-content5-ivory-content5-10: var(--content-content5-ivory-content5-10, "#1d1a07") !default;
+$content-content5-ivory-content5-20: var(--content-content5-ivory-content5-20, "#312b0b") !default;
+$content-content5-ivory-content5-30: var(--content-content5-ivory-content5-30, "#473d10") !default;
+$content-content5-ivory-content5-40: var(--content-content5-ivory-content5-40, "#605316") !default;
+$content-content5-ivory-content5-50: var(--content-content5-ivory-content5-50, "#7b6a1c") !default;
+$content-content5-ivory-content5-60: var(--content-content5-ivory-content5-60, "#978429") !default;
+$content-content5-ivory-content5-70: var(--content-content5-ivory-content5-70, "#b5a13e") !default;
+$content-content5-ivory-content5-80: var(--content-content5-ivory-content5-80, "#d5bf53") !default;
+$content-content5-ivory-content5-90: var(--content-content5-ivory-content5-90, "#f1e6b2") !default;
+$content-content5-ivory-content5-95: var(--content-content5-ivory-content5-95, "#fcf1c7") !default;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+$action-default-text-primary-default: var(--action-default-text-primary-default, "neutral-neutral100-white") !default;
+$action-default-text-primary-hover: var(--action-default-text-primary-hover, "neutral-neutral100-white") !default;
+$action-default-text-primary-active: var(--action-default-text-primary-active, "neutral-neutral100-white") !default;
+$action-default-text-primary-focus: var(--action-default-text-primary-focus, "neutral-neutral100-white") !default;
+$action-default-text-primary-disable: var(--action-default-text-primary-disable, "neutral-neutral100-white") !default;
+$action-default-text-secondary-default: var(--action-default-text-secondary-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-text-secondary-hover: var(--action-default-text-secondary-hover, "brand-wfp-blue-wfp-blue20") !default;
+$action-default-text-secondary-active: var(--action-default-text-secondary-active, "brand-wfp-blue-wfp-blue20") !default;
+$action-default-text-secondary-focus: var(--action-default-text-secondary-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-text-secondary-disable: var(--action-default-text-secondary-disable, "neutral-neutral70") !default;
+$action-default-text-danger-default: var(--action-default-text-danger-default, "neutral-neutral100-white") !default;
+$action-default-text-danger-hover: var(--action-default-text-danger-hover, "neutral-neutral100-white") !default;
+$action-default-text-danger-active: var(--action-default-text-danger-active, "neutral-neutral100-white") !default;
+$action-default-text-danger-focus: var(--action-default-text-danger-focus, "neutral-neutral100-white") !default;
+$action-default-text-danger-disable: var(--action-default-text-danger-disable, "neutral-neutral100-white") !default;
+$action-default-text-ghost-default: var(--action-default-text-ghost-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-text-ghost-hover: var(--action-default-text-ghost-hover, "brand-wfp-blue-wfp-blue20") !default;
+$action-default-text-ghost-active: var(--action-default-text-ghost-active, "brand-wfp-blue-wfp-blue20") !default;
+$action-default-text-ghost-focus: var(--action-default-text-ghost-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-text-ghost-disable: var(--action-default-text-ghost-disable, "neutral-neutral70") !default;
+$action-default-fill-primary-default: var(--action-default-fill-primary-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-fill-primary-hover: var(--action-default-fill-primary-hover, "brand-wfp-blue-wfp-blue40") !default;
+$action-default-fill-primary-active: var(--action-default-fill-primary-active, "brand-wfp-blue-wfp-blue20") !default;
+$action-default-fill-primary-focus: var(--action-default-fill-primary-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-fill-primary-disable: var(--action-default-fill-primary-disable, "neutral-neutral70") !default;
+$action-default-fill-secondary-default: var(--action-default-fill-secondary-default, "neutral-neutral100-white") !default;
+$action-default-fill-secondary-hover: var(--action-default-fill-secondary-hover, "brand-wfp-blue-wfp-blue95") !default;
+$action-default-fill-secondary-active: var(--action-default-fill-secondary-active, "brand-wfp-blue-wfp-blue90") !default;
+$action-default-fill-secondary-focus: var(--action-default-fill-secondary-focus, "neutral-neutral100-white") !default;
+$action-default-fill-secondary-disable: var(--action-default-fill-secondary-disable, "neutral-neutral100-white") !default;
+$action-default-fill-danger-default: var(--action-default-fill-danger-default, "semantic-error-error50") !default;
+$action-default-fill-danger-hover: var(--action-default-fill-danger-hover, "semantic-error-error30") !default;
+$action-default-fill-danger-active: var(--action-default-fill-danger-active, "semantic-error-error20") !default;
+$action-default-fill-danger-focus: var(--action-default-fill-danger-focus, "semantic-error-error50") !default;
+$action-default-fill-danger-disable: var(--action-default-fill-danger-disable, "neutral-neutral70") !default;
+$action-default-fill-ghost-default: var(--action-default-fill-ghost-default, "neutral-neutral100-white") !default;
+$action-default-fill-ghost-hover: var(--action-default-fill-ghost-hover, "neutral-neutral95") !default;
+$action-default-fill-ghost-active: var(--action-default-fill-ghost-active, "neutral-neutral90") !default;
+$action-default-fill-ghost-focus: var(--action-default-fill-ghost-focus, "neutral-neutral100-white") !default;
+$action-default-fill-ghost-disable: var(--action-default-fill-ghost-disable, "neutral-neutral100-white") !default;
+$action-default-link-default: var(--action-default-link-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-link-hover: var(--action-default-link-hover, "brand-wfp-blue-wfp-blue30") !default;
+$action-default-link-active: var(--action-default-link-active, "brand-wfp-blue-wfp-blue10") !default;
+$action-default-link-focus: var(--action-default-link-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-default-link-disable: var(--action-default-link-disable, "neutral-neutral70") !default;
+$action-solid-text-primary-default: var(--action-solid-text-primary-default, "neutral-neutral100-white") !default;
+$action-solid-text-primary-hover: var(--action-solid-text-primary-hover, "brand-wfp-blue-wfp-blue70") !default;
+$action-solid-text-primary-active: var(--action-solid-text-primary-active, "brand-wfp-blue-wfp-blue90") !default;
+$action-solid-text-primary-focus: var(--action-solid-text-primary-focus, "neutral-neutral100-white") !default;
+$action-solid-text-primary-disable: var(--action-solid-text-primary-disable, "neutral-neutral50") !default;
+$action-solid-text-secondary-default: var(--action-solid-text-secondary-default, "neutral-neutral100-white") !default;
+$action-solid-text-secondary-hover: var(--action-solid-text-secondary-hover, "brand-wfp-blue-wfp-blue30") !default;
+$action-solid-text-secondary-active: var(--action-solid-text-secondary-active, "brand-wfp-blue-wfp-blue30") !default;
+$action-solid-text-secondary-focus: var(--action-solid-text-secondary-focus, "neutral-neutral100-white") !default;
+$action-solid-text-secondary-disable: var(--action-solid-text-secondary-disable, "neutral-neutral80") !default;
+$action-solid-text-ghost-default: var(--action-solid-text-ghost-default, "neutral-neutral100-white") !default;
+$action-solid-text-ghost-hover: var(--action-solid-text-ghost-hover, "brand-wfp-blue-wfp-blue20") !default;
+$action-solid-text-ghost-active: var(--action-solid-text-ghost-active, "brand-wfp-blue-wfp-blue20") !default;
+$action-solid-text-ghost-focus: var(--action-solid-text-ghost-focus, "neutral-neutral100-white") !default;
+$action-solid-text-ghost-disable: var(--action-solid-text-ghost-disable, "neutral-neutral80") !default;
+$action-solid-fill-primary-default: var(--action-solid-fill-primary-default, "brand-dark-blue-dark-blue20") !default;
+$action-solid-fill-primary-hover: var(--action-solid-fill-primary-hover, "brand-dark-blue-dark-blue10") !default;
+$action-solid-fill-primary-active: var(--action-solid-fill-primary-active, "brand-dark-blue-dark-blue10") !default;
+$action-solid-fill-primary-focus: var(--action-solid-fill-primary-focus, "brand-dark-blue-dark-blue20") !default;
+$action-solid-fill-primary-disable: var(--action-solid-fill-primary-disable, "neutral-neutral95") !default;
+$action-solid-fill-secondary-default: var(--action-solid-fill-secondary-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-fill-secondary-hover: var(--action-solid-fill-secondary-hover, "brand-wfp-blue-wfp-blue95") !default;
+$action-solid-fill-secondary-active: var(--action-solid-fill-secondary-active, "brand-wfp-blue-wfp-blue90") !default;
+$action-solid-fill-secondary-focus: var(--action-solid-fill-secondary-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-fill-secondary-disable: var(--action-solid-fill-secondary-disable, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-fill-ghost-default: var(--action-solid-fill-ghost-default, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-fill-ghost-hover: var(--action-solid-fill-ghost-hover, "brand-wfp-blue-wfp-blue70") !default;
+$action-solid-fill-ghost-active: var(--action-solid-fill-ghost-active, "brand-wfp-blue-wfp-blue40") !default;
+$action-solid-fill-ghost-focus: var(--action-solid-fill-ghost-focus, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-fill-ghost-disable: var(--action-solid-fill-ghost-disable, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-link-default: var(--action-solid-link-default, "neutral-neutral100-white") !default;
+$action-solid-link-hover: var(--action-solid-link-hover, "brand-wfp-blue-wfp-blue70") !default;
+$action-solid-link-active: var(--action-solid-link-active, "brand-wfp-blue-wfp-blue50") !default;
+$action-solid-link-focus: var(--action-solid-link-focus, "neutral-neutral100-white") !default;
+$action-solid-link-disable: var(--action-solid-link-disable, "neutral-neutral90") !default;
+$background-primary: var(--background-primary, "brand-wfp-blue-wfp-blue50") !default;
+$background-secondary: var(--background-secondary, "brand-dark-blue-dark-blue20") !default;
+$background-neutral: var(--background-neutral, "neutral-neutral95") !default;
+$background-main: var(--background-main, "neutral-neutral100-white") !default;
+
+
+
+
+
+
+$text-body-default: var(--text-body-default, "brand-wfp-blue-wfp-blue10") !default;
+$text-body-error: var(--text-body-error, "semantic-error-error50") !default;
+$text-body-success: var(--text-body-success, "semantic-success-success60") !default;
+$text-body-secondary: var(--text-body-secondary, "neutral-neutral40") !default;
+$text-inverse-default: var(--text-inverse-default, "neutral-neutral100-white") !default;
+$text-heading-default: var(--text-heading-default, "brand-wfp-blue-wfp-blue10") !default;
+$text-heading-on-dark: var(--text-heading-on-dark, "brand-wfp-blue-wfp-blue70") !default;
+$text-field-placeholder: var(--text-field-placeholder, "neutral-neutral60") !default;
+$text-field-default: var(--text-field-default, "text-body-default") !default;
+$text-field-helper: var(--text-field-helper, "text-body-secondary") !default;
+$fill-neutral: var(--fill-neutral, "brand-wfp-blue-wfp-blue95") !default;
+$fill-success: var(--fill-success, "semantic-success-success95") !default;
+$fill-error: var(--fill-error, "semantic-error-error95") !default;
+$fill-alert: var(--fill-alert, "semantic-alert-alert95") !default;
+$fill-dark: var(--fill-dark, "brand-dark-blue-dark-blue20") !default;
+$fill-field: var(--fill-field, "neutral-neutral100-white") !default;
+
+
+
+
+
+
+$field-border-radius: var(--field-border-radius, "border-radius-100") !default;
+$field-border-color: var(--field-border-color, "neutral-neutral60") !default;
+$field-background-disabled: var(--field-background-disabled, "neutral-neutral70") !default;
+$field-background-enabled: var(--field-background-enabled, "brand-wfp-blue-wfp-blue50") !default;
+$field-focus: var(--field-focus, "brand-wfp-blue-wfp-blue80") !default;
+$border-subtle: var(--border-subtle, "neutral-neutral90") !default;
+$border-strong: var(--border-strong, "neutral-neutral80") !default;
+$layer-primary: var(--layer-primary, "neutral-neutral95") !default;
+$interactive: var(--interactive, "#00FFFF") !default;
+$support-error-main: var(--support-error-main, "semantic-error-error40") !default;
+$support-error-background: var(--support-error-background, "semantic-error-error80") !default;
+$support-warning-main: var(--support-warning-main, "semantic-alert-alert50") !default;
+$support-warning-background: var(--support-warning-background, "semantic-alert-alert90") !default;
+$support-success-main: var(--support-success-main, "semantic-success-success50") !default;
+$support-success-background: var(--support-success-background, "semantic-success-success95") !default;
+$code-background: var(--code-background, "neutral-neutral90") !default;
+$font-size-xs: var(--font-size-xs, "12px") !default;
+$font-size-sm: var(--font-size-sm, "14px") !default;
+$font-size-base: var(--font-size-base, "16px") !default;
+$font-size-lg: var(--font-size-lg, "18px") !default;
+$font-size-xl: var(--font-size-xl, "24px") !default;
+$font-size-2xl: var(--font-size-2xl, "30px") !default;
+$font-size-3xl: var(--font-size-3xl, "36px") !default;
+$font-size-4xl: var(--font-size-4xl, "48px") !default;
+$font-size-5xl: var(--font-size-5xl, "60px") !default;
+$font-size-6xl: var(--font-size-6xl, "72px") !default;
+$icon-inverse: var(--icon-inverse, "#ffff00") !default;
+$icon-on-color: var(--icon-on-color, "#ffff00") !default;
+$text-on-color: var(--text-on-color, "#ffff00") !default;
+$button-danger-hover: var(--button-danger-hover, "#ffff00") !default;
+$support-warning: var(--support-warning, "#ffff00") !default;
+$button-tertiary: var(--button-tertiary, "#ffff00") !default;
+$button-tertiary-hover: var(--button-tertiary-hover, "#ffff00") !default;
+$field: var(--field, "#ffff00") !default;
+$button-primary: var(--button-primary, "#ffff00") !default;
+$button-primary-hover: var(--button-primary-hover, "#ffff00") !default;
+$field-hover: var(--field-hover, "#ffff00") !default;
+$support-info: var(--support-info, "#ffff00") !default;
+$support-success: var(--support-success, "#ffff00") !default;
+$background-brand: var(--background-brand, "#ffff00") !default;
+$highlight: var(--highlight, "#ffff00") !default;
+$border-interactive: var(--border-interactive, "#ffff00") !default;
+$focus: var(--focus, "#ffff00") !default;
+$field-border: var(--field-border, "#ffff00") !default;
+$layer-accent-active: var(--layer-accent-active, "#ffff00") !default;
+$text-disabled: var(--text-disabled, "#ffff00") !default;
+$button-disabled: var(--button-disabled, "#ffff00") !default;
+$text-error: var(--text-error, "#ffff00") !default;
+$icon-primary: var(--icon-primary, "#ffff00") !default;
+$action-default-link-default-hover: var(--action-default-link-default-hover, "#ffff00") !default;
+$overlay: var(--overlay, "#ffff00") !default;
+$link-visited: var(--link-visited, "#ffff00") !default;
+$border-inverse: var(--border-inverse, "#ffff00") !default;
+$border-disabled: var(--border-disabled, "#ffff00") !default;
+$icon-secondary: var(--icon-secondary, "#ffff00") !default;
+$background-selected: var(--background-selected, "#ffff00") !default;
+$icon-on-color-disabled: var(--icon-on-color-disabled, "#ffff00") !default;
+$background-hover: var(--background-hover, "#ffff00") !default;
+$layer-active: var(--layer-active, "#ffff00") !default;
+$text-placeholder: var(--text-placeholder, "#ffff00") !default;
+$typography-caption-font-size: var(--typography-caption-font-size, "font-size-base") !default;
+$typography-caption-font-weight: var(--typography-caption-font-weight, "regular") !default;
+$typography-helper-font-size: var(--typography-helper-font-size, "0.875em") !default;
+$typography-helper-font-weight: var(--typography-helper-font-weight, "regular") !default;
+$typography-input-font-size: var(--typography-input-font-size, "1em") !default;
+$typography-input-font-weight: var(--typography-input-font-weight, "regular") !default;
+$typography-story-title-font-size: var(--typography-story-title-font-size, "3.125em") !default;
+$typography-story-title-font-weight: var(--typography-story-title-font-weight, "300") !default;
+$typography-story-title-md-font-size: var(--typography-story-title-md-font-size, "1.875em") !default;
+$typography-story-title-lg-font-size: var(--typography-story-title-lg-font-size, "2.5em") !default;
+$typography-story-h1-font-size: var(--typography-story-h1-font-size, "1.8125em") !default;
+$typography-story-h1-font-weight: var(--typography-story-h1-font-weight, "600") !default;
+$typography-story-h2-font-size: var(--typography-story-h2-font-size, "1.5625em") !default;
+$typography-story-h2-font-weight: var(--typography-story-h2-font-weight, "600") !default;
+$typography-story-h3-font-size: var(--typography-story-h3-font-size, "1.375em") !default;
+$typography-story-h3-font-weight: var(--typography-story-h3-font-weight, "600") !default;
+$typography-story-h4-font-size: var(--typography-story-h4-font-size, "1.25em") !default;
+$typography-story-h4-font-weight: var(--typography-story-h4-font-weight, "600") !default;
+$typography-story-h5-font-size: var(--typography-story-h5-font-size, "1.125em") !default;
+$typography-story-h5-font-weight: var(--typography-story-h5-font-weight, "600") !default;
+$typography-story-h6-font-size: var(--typography-story-h6-font-size, "1em") !default;
+$typography-story-h6-font-weight: var(--typography-story-h6-font-weight, "600") !default;
+$typography-story-sub-title-font-size: var(--typography-story-sub-title-font-size, "0.75em") !default;
+$typography-story-sub-title-font-weight: var(--typography-story-sub-title-font-weight, "500") !default;
+$typography-story-sub-title-letter-spacing: var(--typography-story-sub-title-letter-spacing, "0.05em") !default;
+$typography-story-sub-title-text-transform: var(--typography-story-sub-title-text-transform, "uppercase") !default;
+$typography-body-regular-font-size: var(--typography-body-regular-font-size, "0.75em") !default;
+$typography-body-regular-font-weight: var(--typography-body-regular-font-weight, "regular") !default;