@aquera/nile/lib/styles/theme/nxt/_colors.css

Nile web components for web products and experiences

:root {
  --ng-colors-text-primary-900: var(--ng-color-graylightmode-900);
  --ng-colors-text-primary-on-brand: var(--ng-color-base-white);
  --ng-colors-text-secondary-700: var(--ng-color-graylightmode-700);
  --ng-colors-text-secondary-hover: var(--ng-color-graylightmode-800);
  --ng-colors-text-secondary-on-brand: var(--ng-color-bluedark-200);
  --ng-colors-text-tertiary-600: var(--ng-color-graylightmode-600);
  --ng-colors-text-tertiary-hover: var(--ng-color-graylightmode-700);
  --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-200);
  --ng-colors-text-quaternary-500: var(--ng-color-graylightmode-500);
  --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-300);
  --ng-colors-text-white: var(--ng-color-base-white);
  --ng-colors-text-disabled: var(--ng-color-graylightmode-500);
  --ng-colors-text-placeholder: var(--ng-color-graylightmode-500);
  --ng-colors-text-placeholder-subtle: var(--ng-color-graylightmode-300);
  --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-900);
  --ng-colors-text-brand-secondary-700: var(--ng-color-bluedark-700);
  --ng-colors-text-brand-secondary-hover: var(--ng-color-bluedark-800);
  --ng-colors-text-brand-tertiary-600: var(--ng-color-bluedark-600);
  --ng-colors-text-brand-tertiary-alt: var(--ng-color-bluedark-600);
  --ng-colors-text-error-primary-600: var(--ng-color-error-600);
  --ng-colors-text-error-primary-hover: var(--ng-color-error-700);
  --ng-colors-text-warning-primary-600: var(--ng-color-warning-600);
  --ng-colors-text-success-primary-600: var(--ng-color-success-600);
  --ng-colors-border-primary: var(--ng-color-graylightmode-300);
  --ng-colors-border-secondary: var(--ng-color-graylightmode-200);
  --ng-colors-border-secondary-alt: #00000014;
  --ng-colors-border-tertiary: var(--ng-color-graylightmode-100);
  --ng-colors-border-neutral: var(--ng-color-graylightmode-400);
  --ng-colors-border-disabled: var(--ng-color-graylightmode-300);
  --ng-colors-border-disabled-subtle: var(--ng-color-graylightmode-200);
  --ng-colors-border-brand: var(--ng-color-bluedark-500);
  --ng-colors-border-brand-alt: var(--ng-color-bluedark-600);
  --ng-colors-border-error: var(--ng-color-error-500);
  --ng-colors-border-error-subtle: var(--ng-color-error-300);
  --ng-colors-border-success: var(--ng-color-success-500);
  --ng-colors-border-success-subtle: var(--ng-color-success-300);
  --ng-colors-border-warning: var(--ng-color-warning-500);
  --ng-colors-border-warning-subtle: var(--ng-color-warning-300);
  --ng-colors-fg-primary-900: var(--ng-color-graylightmode-900);
  --ng-componentcolors-alpha-white-10: #FFFFFF1A;
  --ng-componentcolors-alpha-white-20: #FFFFFF33;
  --ng-componentcolors-alpha-white-30: #FFFFFF4D;
  --ng-componentcolors-alpha-white-40: #FFFFFF66;
  --ng-componentcolors-alpha-white-50: #FFFFFF80;
  --ng-componentcolors-alpha-white-60: #FFFFFF99;
  --ng-componentcolors-alpha-white-70: #FFFFFFB2;
  --ng-componentcolors-alpha-white-80: #FFFFFFCC;
  --ng-componentcolors-alpha-white-90: #FFFFFFE5;
  --ng-componentcolors-alpha-white-100: #FFFFFFFF;
  --ng-componentcolors-alpha-black-10: #0000001A;
  --ng-componentcolors-alpha-black-20: #00000033;
  --ng-componentcolors-alpha-black-30: #0000004D;
  --ng-componentcolors-alpha-black-40: #00000066;
  --ng-componentcolors-alpha-black-50: #00000080;
  --ng-componentcolors-alpha-black-60: #00000099;
  --ng-componentcolors-alpha-black-70: #000000B2;
  --ng-componentcolors-alpha-black-80: #000000CC;
  --ng-componentcolors-alpha-black-90: #000000E5;
  --ng-componentcolors-alpha-black-100: #000000FF;
  --ng-componentcolors-utility-gray-50: var(--ng-color-graylightmode-50);
  --ng-componentcolors-components-appstorebadges-app-store-badge-border: #A6A6A6FF;
  --ng-componentcolors-components-avatars-avatar-styles-bg-neutral: #E0E0E0FF;
  --ng-componentcolors-components-button-primary-icon: var(--ng-color-bluedark-300);
  --ng-componentcolors-components-button-primary-icon-hover: var(--ng-color-bluedark-200);
  --ng-componentcolors-components-button-destructive-primary-icon: var(--ng-color-error-300);
  --ng-componentcolors-components-button-destructive-primary-icon-hover: var(--ng-color-error-200);
  --ng-componentcolors-components-footer-button-fg: var(--ng-color-bluedark-200);
  --ng-componentcolors-components-footer-button-fg-hover: var(--ng-color-base-white);
  --ng-componentcolors-components-icons-icons-icon-fg-brand: var(--ng-color-bluedark-600);
  --ng-componentcolors-components-icons-icons-icon-fg-brand-on-brand: var(--ng-color-bluedark-200);
  --ng-componentcolors-components-icons--featured-iconlight-fg-brand: var(--ng-color-bluedark-600);
  --ng-componentcolors-components-icons--featured-iconlight-fg-gray: var(--ng-color-graylightmode-500);
  --ng-componentcolors-components-icons--featured-iconlight-fg-error: var(--ng-color-error-600);
  --ng-componentcolors-components-icons--featured-iconlight-fg-warning: var(--ng-color-warning-600);
  --ng-componentcolors-components-icons--featured-iconlight-fg-success: var(--ng-color-success-600);
  --ng-componentcolors-components-mockups-screen-mockup-border: var(--ng-color-graylightmode-900);
  --ng-componentcolors-components-sliders-slider-handle-bg: var(--ng-color-base-white);
  --ng-componentcolors-components-sliders-slider-handle-border: var(--ng-color-bluedark-600);
  --ng-componentcolors-components-toggle-button-fg-disabled: var(--ng-color-graylightmode-50);
  --ng-componentcolors-components-toggle-border: var(--ng-color-graylightmode-300);
  --ng-componentcolors-components-toggle-slim-border-pressed: var(--ng-colors-bg-brand-solid);
  --ng-componentcolors-components-toggle-slim-border-pressed-hover: var(--ng-colors-bg-brand-solid-hover);
  --ng-componentcolors-components-tooltips-tooltip-supporting-text: var(--ng-color-graylightmode-300);
  --ng-componentcolors-components-text-editor-icon-fg: var(--ng-color-graylightmode-400);
  --ng-componentcolors-components-text-editor-icon-fg-active: var(--ng-color-graylightmode-500);
  --ng-componentcolors-utility-gray-100: var(--ng-color-graylightmode-100);
  --ng-componentcolors-utility-gray-200: var(--ng-color-graylightmode-200);
  --ng-componentcolors-utility-gray-300: var(--ng-color-graylightmode-300);
  --ng-componentcolors-utility-gray-400: var(--ng-color-graylightmode-400);
  --ng-componentcolors-utility-gray-500: var(--ng-color-graylightmode-500);
  --ng-componentcolors-utility-gray-600: var(--ng-color-graylightmode-600);
  --ng-componentcolors-utility-gray-700: var(--ng-color-graylightmode-700);
  --ng-componentcolors-utility-gray-800: var(--ng-color-graylightmode-800);
  --ng-componentcolors-utility-gray-900: var(--ng-color-graylightmode-900);
  --ng-componentcolors-utility-brand-50: var(--ng-color-bluedark-50);
  --ng-componentcolors-utility-brand-50-alt: var(--ng-color-bluedark-50);
  --ng-componentcolors-utility-brand-100: var(--ng-color-bluedark-100);
  --ng-componentcolors-utility-brand-100-alt: var(--ng-color-bluedark-100);
  --ng-componentcolors-utility-brand-200: var(--ng-color-bluedark-200);
  --ng-componentcolors-utility-brand-200-alt: var(--ng-color-bluedark-200);
  --ng-componentcolors-utility-brand-300: var(--ng-color-bluedark-300);
  --ng-componentcolors-utility-brand-300-alt: var(--ng-color-bluedark-300);
  --ng-componentcolors-utility-brand-400: var(--ng-color-bluedark-400);
  --ng-componentcolors-utility-brand-400-alt: var(--ng-color-bluedark-400);
  --ng-componentcolors-utility-brand-500: var(--ng-color-bluedark-500);
  --ng-componentcolors-utility-brand-500-alt: var(--ng-color-bluedark-500);
  --ng-componentcolors-utility-brand-600: var(--ng-color-bluedark-600);
  --ng-componentcolors-utility-brand-600-alt: var(--ng-color-bluedark-600);
  --ng-componentcolors-utility-brand-700: var(--ng-color-bluedark-700);
  --ng-componentcolors-utility-brand-700-alt: var(--ng-color-bluedark-700);
  --ng-componentcolors-utility-brand-800: var(--ng-color-bluedark-800);
  --ng-componentcolors-utility-brand-800-alt: var(--ng-color-bluedark-800);
  --ng-componentcolors-utility-brand-900: var(--ng-color-bluedark-900);
  --ng-componentcolors-utility-brand-900-alt: var(--ng-color-bluedark-900);
  --ng-componentcolors-utility-error-50: var(--ng-color-error-50);
  --ng-componentcolors-utility-error-100: var(--ng-color-error-100);
  --ng-componentcolors-utility-error-200: var(--ng-color-error-200);
  --ng-componentcolors-utility-error-300: var(--ng-color-error-300);
  --ng-componentcolors-utility-error-400: var(--ng-color-error-400);
  --ng-componentcolors-utility-error-500: var(--ng-color-error-500);
  --ng-componentcolors-utility-error-600: var(--ng-color-error-600);
  --ng-componentcolors-utility-error-700: var(--ng-color-error-700);
  --ng-componentcolors-utility-warning-50: var(--ng-color-warning-50);
  --ng-componentcolors-utility-warning-100: var(--ng-color-warning-100);
  --ng-componentcolors-utility-warning-200: var(--ng-color-warning-200);
  --ng-componentcolors-utility-warning-300: var(--ng-color-warning-300);
  --ng-componentcolors-utility-warning-400: var(--ng-color-warning-400);
  --ng-componentcolors-utility-warning-500: var(--ng-color-warning-500);
  --ng-componentcolors-utility-warning-600: var(--ng-color-warning-600);
  --ng-componentcolors-utility-warning-700: var(--ng-color-warning-700);
  --ng-componentcolors-utility-success-50: var(--ng-color-success-50);
  --ng-componentcolors-utility-success-100: var(--ng-color-success-100);
  --ng-componentcolors-utility-success-200: var(--ng-color-success-200);
  --ng-componentcolors-utility-success-300: var(--ng-color-success-300);
  --ng-componentcolors-utility-success-400: var(--ng-color-success-400);
  --ng-componentcolors-utility-success-500: var(--ng-color-success-500);
  --ng-componentcolors-utility-success-600: var(--ng-color-success-600);
  --ng-componentcolors-utility-success-700: var(--ng-color-success-700);
  --ng-componentcolors-utility-gray-blue-50: var(--ng-color-grayblue-50);
  --ng-componentcolors-utility-gray-blue-100: var(--ng-color-grayblue-100);
  --ng-componentcolors-utility-gray-blue-200: var(--ng-color-grayblue-200);
  --ng-componentcolors-utility-gray-blue-300: var(--ng-color-grayblue-300);
  --ng-componentcolors-utility-gray-blue-400: var(--ng-color-grayblue-400);
  --ng-componentcolors-utility-gray-blue-500: var(--ng-color-grayblue-500);
  --ng-componentcolors-utility-gray-blue-600: var(--ng-color-grayblue-600);
  --ng-componentcolors-utility-gray-blue-700: var(--ng-color-grayblue-700);
  --ng-componentcolors-utility-green-50: var(--ng-color-green-50);
  --ng-componentcolors-utility-green-100: var(--ng-color-green-100);
  --ng-componentcolors-utility-green-200: var(--ng-color-green-200);
  --ng-componentcolors-utility-green-300: var(--ng-color-green-300);
  --ng-componentcolors-utility-green-400: var(--ng-color-green-400);
  --ng-componentcolors-utility-green-500: var(--ng-color-green-500);
  --ng-componentcolors-utility-green-600: var(--ng-color-green-600);
  --ng-componentcolors-utility-green-700: var(--ng-color-green-700);
  --ng-componentcolors-utility-blue-light-50: var(--ng-color-bluelight-50);
  --ng-componentcolors-utility-blue-light-100: var(--ng-color-bluelight-100);
  --ng-componentcolors-utility-blue-light-200: var(--ng-color-bluelight-200);
  --ng-componentcolors-utility-blue-light-300: var(--ng-color-bluelight-300);
  --ng-componentcolors-utility-blue-light-400: var(--ng-color-bluelight-400);
  --ng-componentcolors-utility-blue-light-500: var(--ng-color-bluelight-500);
  --ng-componentcolors-utility-blue-light-600: var(--ng-color-bluelight-600);
  --ng-componentcolors-utility-blue-light-700: var(--ng-color-bluelight-700);
  --ng-componentcolors-utility-blue-50: var(--ng-color-blue-50);
  --ng-componentcolors-utility-blue-100: var(--ng-color-blue-100);
  --ng-componentcolors-utility-blue-200: var(--ng-color-blue-200);
  --ng-componentcolors-utility-blue-300: var(--ng-color-blue-300);
  --ng-componentcolors-utility-blue-400: var(--ng-color-blue-400);
  --ng-componentcolors-utility-blue-500: var(--ng-color-blue-500);
  --ng-componentcolors-utility-blue-600: var(--ng-color-blue-600);
  --ng-componentcolors-utility-blue-700: var(--ng-color-blue-700);
  --ng-componentcolors-utility-blue-dark-50: var(--ng-color-bluedark-50);
  --ng-componentcolors-utility-blue-dark-100: var(--ng-color-bluedark-100);
  --ng-componentcolors-utility-blue-dark-200: var(--ng-color-bluedark-200);
  --ng-componentcolors-utility-blue-dark-300: var(--ng-color-bluedark-300);
  --ng-componentcolors-utility-blue-dark-400: var(--ng-color-bluedark-400);
  --ng-componentcolors-utility-blue-dark-500: var(--ng-color-bluedark-500);
  --ng-componentcolors-utility-blue-dark-600: var(--ng-color-bluedark-600);
  --ng-componentcolors-utility-blue-dark-700: var(--ng-color-bluedark-700);
  --ng-componentcolors-utility-indigo-50: var(--ng-color-indigo-50);
  --ng-componentcolors-utility-indigo-100: var(--ng-color-indigo-100);
  --ng-componentcolors-utility-indigo-200: var(--ng-color-indigo-200);
  --ng-componentcolors-utility-indigo-300: var(--ng-color-indigo-300);
  --ng-componentcolors-utility-indigo-400: var(--ng-color-indigo-400);
  --ng-componentcolors-utility-indigo-500: var(--ng-color-indigo-500);
  --ng-componentcolors-utility-indigo-600: var(--ng-color-indigo-600);
  --ng-componentcolors-utility-indigo-700: var(--ng-color-indigo-700);
  --ng-componentcolors-utility-purple-50: var(--ng-color-purple-50);
  --ng-componentcolors-utility-purple-100: var(--ng-color-purple-100);
  --ng-componentcolors-utility-purple-200: var(--ng-color-purple-200);
  --ng-componentcolors-utility-purple-300: var(--ng-color-purple-300);
  --ng-componentcolors-utility-purple-400: var(--ng-color-purple-400);
  --ng-componentcolors-utility-purple-500: var(--ng-color-purple-500);
  --ng-componentcolors-utility-purple-600: var(--ng-color-purple-600);
  --ng-componentcolors-utility-purple-700: var(--ng-color-purple-700);
  --ng-componentcolors-utility-fuchsia-50: var(--ng-color-fuchsia-50);
  --ng-componentcolors-utility-fuchsia-100: var(--ng-color-fuchsia-100);
  --ng-componentcolors-utility-fuchsia-200: var(--ng-color-fuchsia-200);
  --ng-componentcolors-utility-fuchsia-300: var(--ng-color-fuchsia-300);
  --ng-componentcolors-utility-fuchsia-400: var(--ng-color-fuchsia-400);
  --ng-componentcolors-utility-fuchsia-500: var(--ng-color-fuchsia-500);
  --ng-componentcolors-utility-fuchsia-600: var(--ng-color-fuchsia-600);
  --ng-componentcolors-utility-fuchsia-700: var(--ng-color-fuchsia-700);
  --ng-componentcolors-utility-pink-50: var(--ng-color-pink-50);
  --ng-componentcolors-utility-pink-100: var(--ng-color-pink-100);
  --ng-componentcolors-utility-pink-200: var(--ng-color-pink-200);
  --ng-componentcolors-utility-pink-300: var(--ng-color-pink-300);
  --ng-componentcolors-utility-pink-400: var(--ng-color-pink-400);
  --ng-componentcolors-utility-pink-500: var(--ng-color-pink-500);
  --ng-componentcolors-utility-pink-600: var(--ng-color-pink-600);
  --ng-componentcolors-utility-pink-700: var(--ng-color-pink-700);
  --ng-componentcolors-utility-orange-dark-50: var(--ng-color-orangedark-50);
  --ng-componentcolors-utility-orange-dark-100: var(--ng-color-orangedark-100);
  --ng-componentcolors-utility-orange-dark-200: var(--ng-color-orangedark-200);
  --ng-componentcolors-utility-orange-dark-300: var(--ng-color-orangedark-300);
  --ng-componentcolors-utility-orange-dark-400: var(--ng-color-orangedark-400);
  --ng-componentcolors-utility-orange-dark-500: var(--ng-color-orangedark-500);
  --ng-componentcolors-utility-orange-dark-600: var(--ng-color-orangedark-600);
  --ng-componentcolors-utility-orange-dark-700: var(--ng-color-orangedark-700);
  --ng-componentcolors-utility-orange-50: var(--ng-color-orange-50);
  --ng-componentcolors-utility-orange-100: var(--ng-color-orange-100);
  --ng-componentcolors-utility-orange-200: var(--ng-color-orange-200);
  --ng-componentcolors-utility-orange-300: var(--ng-color-orange-300);
  --ng-componentcolors-utility-orange-400: var(--ng-color-orange-400);
  --ng-componentcolors-utility-orange-500: var(--ng-color-orange-500);
  --ng-componentcolors-utility-orange-600: var(--ng-color-orange-600);
  --ng-componentcolors-utility-orange-700: var(--ng-color-orange-700);
  --ng-colors-fg-secondary-700: var(--ng-color-graylightmode-700);
  --ng-colors-fg-secondary-hover: var(--ng-color-graylightmode-800);
  --ng-colors-fg-tertiary-600: var(--ng-color-graylightmode-600);
  --ng-colors-fg-tertiary-hover: var(--ng-color-graylightmode-700);
  --ng-colors-fg-quaternary-400: var(--ng-color-graylightmode-400);
  --ng-colors-fg-quaternary-hover: var(--ng-color-graylightmode-500);
  --ng-colors-fg-white: var(--ng-color-base-white);
  --ng-colors-fg-disabled: var(--ng-color-graylightmode-400);
  --ng-colors-fg-disabled-subtle: var(--ng-color-graylightmode-300);
  --ng-colors-fg-brand-primary-600: var(--ng-color-bluedark-600);
  --ng-colors-fg-brand-primary-alt: var(--ng-colors-fg-brand-primary-600);
  --ng-colors-fg-brand-secondary-500: var(--ng-color-bluedark-500);
  --ng-colors-fg-brand-secondary-alt: var(--ng-colors-fg-brand-secondary-500);
  --ng-colors-fg-brand-secondary-hover: var(--ng-color-bluedark-600);
  --ng-colors-fg-error-primary: var(--ng-color-error-600);
  --ng-colors-fg-error-secondary: var(--ng-color-error-500);
  --ng-colors-fg-warning-primary: var(--ng-color-warning-600);
  --ng-colors-fg-warning-secondary: var(--ng-color-warning-500);
  --ng-colors-fg-success-primary: var(--ng-color-success-600);
  --ng-colors-fg-success-secondary: var(--ng-color-success-500);
  --ng-colors-bg-primary: var(--ng-color-base-white);
  --ng-colors-effects-focus-ring: var(--ng-color-bluedark-500);
  --ng-colors-effects-focus-ring-error: var(--ng-color-error-500);
  --ng-colors-effects-shadow-xs: #0A0D120D;
  --ng-colors-effects-portfoliomockups-shadow-main-centre-md: #0A0D1224;
  --ng-colors-effects-portfoliomockups-shadow-main-centre-lg: #0A0D122E;
  --ng-colors-effects-portfoliomockups-shadow-overlay-lg: #0A0D121F;
  --ng-colors-effects-portfoliomockups-shadow-grid-md: #0A0D1214;
  --ng-colors-effects-shadow-sm-01: #0A0D121A;
  --ng-colors-effects-shadow-sm-02: #0A0D121A;
  --ng-colors-effects-shadow-md-01: #0A0D121A;
  --ng-colors-effects-shadow-md-02: #0A0D120F;
  --ng-colors-effects-shadow-lg-01: #0A0D1214;
  --ng-colors-effects-shadow-lg-02: #0A0D1208;
  --ng-colors-effects-shadow-lg-03: #0A0D120A;
  --ng-colors-effects-shadow-xl-01: #0a0d1214;
  --ng-colors-effects-shadow-xl-02: #0A0D1208;
  --ng-colors-effects-shadow-xl-03: #0A0D120A;
  --ng-colors-effects-shadow-2xl-01: #0A0D122E;
  --ng-colors-effects-shadow-2xl-02: #0A0D120A;
  --ng-colors-effects-shadow-3xl-01: #0A0D1224;
  --ng-colors-effects-shadow-3xl-02: #0A0D120A;
  --ng-colors-effects-shadow-skeumorphic-inner: #0A0D120D;
  --ng-colors-effects-shadow-skeumorphic-inner-border: #0A0D122E;
  --ng-colors-bg-primary-alt: var(--ng-color-base-white);
  --ng-colors-bg-primary-hover: var(--ng-color-graylightmode-50);
  --ng-colors-bg-primary-solid: var(--ng-color-graylightmode-950);
  --ng-colors-bg-secondary: var(--ng-color-graylightmode-50);
  --ng-colors-bg-secondary-alt: var(--ng-color-graylightmode-50);
  --ng-colors-bg-secondary-hover: var(--ng-color-graylightmode-100);
  --ng-colors-bg-secondary-subtle: var(--ng-color-graylightmode-25);
  --ng-colors-bg-secondary-solid: var(--ng-color-graylightmode-600);
  --ng-colors-bg-tertiary: var(--ng-color-graylightmode-100);
  --ng-colors-bg-quaternary: var(--ng-color-graylightmode-200);
  --ng-colors-bg-quaternary-alt: var(--ng-color-graylightmode-300);
  --ng-colors-bg-active: var(--ng-color-graylightmode-50);
  --ng-colors-bg-disabled: var(--ng-color-graylightmode-100);
  --ng-colors-bg-disabled-subtle: var(--ng-color-graylightmode-50);
  --ng-colors-bg-overlay: var(--ng-color-graylightmode-950);
  --ng-colors-bg-brand-primary: var(--ng-color-bluedark-50);
  --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-50);
  --ng-colors-bg-brand-secondary: var(--ng-color-bluedark-100);
  --ng-colors-bg-brand-solid: var(--ng-color-bluedark-600);
  --ng-colors-bg-brand-solid-hover: var(--ng-color-bluedark-700);
  --ng-colors-bg-brand-section: var(--ng-color-bluedark-800);
  --ng-colors-bg-brand-section-subtle: var(--ng-color-bluedark-700);
  --ng-colors-bg-error-primary: var(--ng-color-error-50);
  --ng-colors-bg-error-secondary: var(--ng-color-error-100);
  --ng-colors-bg-error-solid: var(--ng-color-error-600);
  --ng-colors-bg-error-solid-hover: var(--ng-color-error-700);
  --ng-colors-bg-warning-primary: var(--ng-color-warning-50);
  --ng-colors-bg-warning-secondary: var(--ng-color-warning-100);
  --ng-colors-bg-warning-solid: var(--ng-color-warning-600);
  --ng-colors-bg-success-primary: var(--ng-color-success-50);
  --ng-colors-bg-success-secondary: var(--ng-color-success-100);
  --ng-colors-bg-success-solid: var(--ng-color-success-600);
  --ng-componentcolors-utility-yellow-50: var(--ng-color-yellow-50);
  --ng-componentcolors-utility-yellow-100: var(--ng-color-yellow-100);
  --ng-componentcolors-utility-yellow-200: var(--ng-color-yellow-200);
  --ng-componentcolors-utility-yellow-300: var(--ng-color-yellow-300);
  --ng-componentcolors-utility-yellow-400: var(--ng-color-yellow-400);
  --ng-componentcolors-utility-yellow-500: var(--ng-color-yellow-500);
  --ng-componentcolors-utility-yellow-600: var(--ng-color-yellow-600);
  --ng-componentcolors-utility-yellow-700: var(--ng-color-yellow-700);  
}