# Backgrounds Utilities for controlling the background color of an element. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-backgrounds--introduction ## Variants documented in Storybook - BackgroundShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-backgrounds--backgroundshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Backgrounds. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Background Showcase — Neutral Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample1Demo = () => ( <>

...

); export default BackgroundsExample1Demo; ``` Angular: ```html

...

``` ### 2. Background Showcase — Primary Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample2Demo = () => ( <>

...

); export default BackgroundsExample2Demo; ``` Angular: ```html

...

``` ### 3. Background Showcase — Secondary Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample3Demo = () => ( <>

...

); export default BackgroundsExample3Demo; ``` Angular: ```html

...

``` ### 4. Background Showcase — Tertiary Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample4Demo = () => ( <>

...

); export default BackgroundsExample4Demo; ``` Angular: ```html

...

``` ### 5. Background Showcase — Success Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample5Demo = () => ( <>

...

); export default BackgroundsExample5Demo; ``` Angular: ```html

...

``` ### 6. Background Showcase — Error Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample6Demo = () => ( <>

...

); export default BackgroundsExample6Demo; ``` Angular: ```html

...

``` ### 7. Background Showcase — Warning Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample7Demo = () => ( <>

...

); export default BackgroundsExample7Demo; ``` Angular: ```html

...

``` ### 8. Background Showcase — Info Backgrounds HTML: ```html

...

``` React: ```jsx import React from 'react'; const BackgroundsExample8Demo = () => ( <>

...

); export default BackgroundsExample8Demo; ``` Angular: ```html

...

``` ### 9. Introduction — Introduction HTML: ```html

Utilities

Background Utilities Reference

A comprehensive reference of semantic background tokens and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

Every background class from the utility library, categorized for easy access.

Neutral

Format: ux4g-bg-{color}

Background Neutral

ux4g-bg-neutral

Background Neutral Elevated

ux4g-bg-neutral-elevated

Background Neutral Soft

ux4g-bg-neutral-soft

Background Neutral Subtle

ux4g-bg-neutral-subtle

Background Neutral Emphasis

ux4g-bg-neutral-emphasis

Background Neutral Strong

ux4g-bg-neutral-strong

Background Neutral Stronger

ux4g-bg-neutral-stronger

Background Neutral Disabled

ux4g-bg-neutral-disabled

Primary

Format: ux4g-bg-{color}

Background Primary

ux4g-bg-primary

Background Primary Soft

ux4g-bg-primary-soft

Background Primary Subtle

ux4g-bg-primary-subtle

Background Primary Emphasis

ux4g-bg-primary-emphasis

Background Primary Strong

ux4g-bg-primary-strong

Background Primary Stronger

ux4g-bg-primary-stronger

Secondary

Format: ux4g-bg-{color}

Background Secondary

ux4g-bg-secondary

Background Secondary Soft

ux4g-bg-secondary-soft

Background Secondary Subtle

ux4g-bg-secondary-subtle

Background Secondary Emphasis

ux4g-bg-secondary-emphasis

Background Secondary Strong

ux4g-bg-secondary-strong

Tertiary

Format: ux4g-bg-{color}

Background Tertiary

ux4g-bg-tertiary

Background Tertiary Soft

ux4g-bg-tertiary-soft

Background Tertiary Subtle

ux4g-bg-tertiary-subtle

Background Tertiary Emphasis

ux4g-bg-tertiary-emphasis

Background Tertiary Strong

ux4g-bg-tertiary-strong

Success

Format: ux4g-bg-{color}

Background Success

ux4g-bg-success

Background Success Soft

ux4g-bg-success-soft

Background Success Subtle

ux4g-bg-success-subtle

Background Success Emphasis

ux4g-bg-success-emphasis

Background Success Strong

ux4g-bg-success-strong

Error

Format: ux4g-bg-{color}

Background Error

ux4g-bg-error

Background Error Soft

ux4g-bg-error-soft

Background Error Subtle

ux4g-bg-error-subtle

Background Error Emphasis

ux4g-bg-error-emphasis

Background Error Strong

ux4g-bg-error-strong

Background Error Stronger

ux4g-bg-error-stronger

Warning

Format: ux4g-bg-{color}

Background Warning

ux4g-bg-warning

Background Warning Soft

ux4g-bg-warning-soft

Background Warning Subtle

ux4g-bg-warning-subtle

Background Warning Emphasis

ux4g-bg-warning-emphasis

Background Warning Strong

ux4g-bg-warning-strong

Info

Format: ux4g-bg-{color}

Background Info

ux4g-bg-info

Background Info Soft

ux4g-bg-info-soft

Background Info Subtle

ux4g-bg-info-subtle

Background Info Emphasis

ux4g-bg-info-emphasis

Background Info Strong

ux4g-bg-info-strong

``` React: ```jsx import React from 'react'; const BackgroundsExample9Demo = () => ( <>

Utilities

Background Utilities Reference

A comprehensive reference of semantic background tokens and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

Every background class from the utility library, categorized for easy access.

{/* Neutral Backgrounds */}

Neutral

Format: ux4g-bg-{color}

Background Neutral

ux4g-bg-neutral

Background Neutral Elevated

ux4g-bg-neutral-elevated

Background Neutral Soft

ux4g-bg-neutral-soft

Background Neutral Subtle

ux4g-bg-neutral-subtle

Background Neutral Emphasis

ux4g-bg-neutral-emphasis

Background Neutral Strong

ux4g-bg-neutral-strong

Background Neutral Stronger

ux4g-bg-neutral-stronger

Background Neutral Disabled

ux4g-bg-neutral-disabled

{/* Primary Backgrounds */}

Primary

Format: ux4g-bg-{color}

Background Primary

ux4g-bg-primary

Background Primary Soft

ux4g-bg-primary-soft

Background Primary Subtle

ux4g-bg-primary-subtle

Background Primary Emphasis

ux4g-bg-primary-emphasis

Background Primary Strong

ux4g-bg-primary-strong

Background Primary Stronger

ux4g-bg-primary-stronger

{/* Secondary Backgrounds */}

Secondary

Format: ux4g-bg-{color}

Background Secondary

ux4g-bg-secondary

Background Secondary Soft

ux4g-bg-secondary-soft

Background Secondary Subtle

ux4g-bg-secondary-subtle

Background Secondary Emphasis

ux4g-bg-secondary-emphasis

Background Secondary Strong

ux4g-bg-secondary-strong

{/* Tertiary Backgrounds */}

Tertiary

Format: ux4g-bg-{color}

Background Tertiary

ux4g-bg-tertiary

Background Tertiary Soft

ux4g-bg-tertiary-soft

Background Tertiary Subtle

ux4g-bg-tertiary-subtle

Background Tertiary Emphasis

ux4g-bg-tertiary-emphasis

Background Tertiary Strong

ux4g-bg-tertiary-strong

{/* Success Backgrounds */}

Success

Format: ux4g-bg-{color}

Background Success

ux4g-bg-success

Background Success Soft

ux4g-bg-success-soft

Background Success Subtle

ux4g-bg-success-subtle

Background Success Emphasis

ux4g-bg-success-emphasis

Background Success Strong

ux4g-bg-success-strong

{/* Error Backgrounds */}

Error

Format: ux4g-bg-{color}

Background Error

ux4g-bg-error

Background Error Soft

ux4g-bg-error-soft

Background Error Subtle

ux4g-bg-error-subtle

Background Error Emphasis

ux4g-bg-error-emphasis

Background Error Strong

ux4g-bg-error-strong

Background Error Stronger

ux4g-bg-error-stronger

{/* Warning Backgrounds */}

Warning

Format: ux4g-bg-{color}

Background Warning

ux4g-bg-warning

Background Warning Soft

ux4g-bg-warning-soft

Background Warning Subtle

ux4g-bg-warning-subtle

Background Warning Emphasis

ux4g-bg-warning-emphasis

Background Warning Strong

ux4g-bg-warning-strong

{/* Info Backgrounds */}

Info

Format: ux4g-bg-{color}

Background Info

ux4g-bg-info

Background Info Soft

ux4g-bg-info-soft

Background Info Subtle

ux4g-bg-info-subtle

Background Info Emphasis

ux4g-bg-info-emphasis

Background Info Strong

ux4g-bg-info-strong

); export default BackgroundsExample9Demo; ``` Angular: ```html

Utilities

Background Utilities Reference

A comprehensive reference of semantic background tokens and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

Every background class from the utility library, categorized for easy access.

Neutral

Format: ux4g-bg-{color}

Background Neutral

ux4g-bg-neutral

Background Neutral Elevated

ux4g-bg-neutral-elevated

Background Neutral Soft

ux4g-bg-neutral-soft

Background Neutral Subtle

ux4g-bg-neutral-subtle

Background Neutral Emphasis

ux4g-bg-neutral-emphasis

Background Neutral Strong

ux4g-bg-neutral-strong

Background Neutral Stronger

ux4g-bg-neutral-stronger

Background Neutral Disabled

ux4g-bg-neutral-disabled

Primary

Format: ux4g-bg-{color}

Background Primary

ux4g-bg-primary

Background Primary Soft

ux4g-bg-primary-soft

Background Primary Subtle

ux4g-bg-primary-subtle

Background Primary Emphasis

ux4g-bg-primary-emphasis

Background Primary Strong

ux4g-bg-primary-strong

Background Primary Stronger

ux4g-bg-primary-stronger

Secondary

Format: ux4g-bg-{color}

Background Secondary

ux4g-bg-secondary

Background Secondary Soft

ux4g-bg-secondary-soft

Background Secondary Subtle

ux4g-bg-secondary-subtle

Background Secondary Emphasis

ux4g-bg-secondary-emphasis

Background Secondary Strong

ux4g-bg-secondary-strong

Tertiary

Format: ux4g-bg-{color}

Background Tertiary

ux4g-bg-tertiary

Background Tertiary Soft

ux4g-bg-tertiary-soft

Background Tertiary Subtle

ux4g-bg-tertiary-subtle

Background Tertiary Emphasis

ux4g-bg-tertiary-emphasis

Background Tertiary Strong

ux4g-bg-tertiary-strong

Success

Format: ux4g-bg-{color}

Background Success

ux4g-bg-success

Background Success Soft

ux4g-bg-success-soft

Background Success Subtle

ux4g-bg-success-subtle

Background Success Emphasis

ux4g-bg-success-emphasis

Background Success Strong

ux4g-bg-success-strong

Error

Format: ux4g-bg-{color}

Background Error

ux4g-bg-error

Background Error Soft

ux4g-bg-error-soft

Background Error Subtle

ux4g-bg-error-subtle

Background Error Emphasis

ux4g-bg-error-emphasis

Background Error Strong

ux4g-bg-error-strong

Background Error Stronger

ux4g-bg-error-stronger

Warning

Format: ux4g-bg-{color}

Background Warning

ux4g-bg-warning

Background Warning Soft

ux4g-bg-warning-soft

Background Warning Subtle

ux4g-bg-warning-subtle

Background Warning Emphasis

ux4g-bg-warning-emphasis

Background Warning Strong

ux4g-bg-warning-strong

Info

Format: ux4g-bg-{color}

Background Info

ux4g-bg-info

Background Info Soft

ux4g-bg-info-soft

Background Info Subtle

ux4g-bg-info-subtle

Background Info Emphasis

ux4g-bg-info-emphasis

Background Info Strong

ux4g-bg-info-strong

``` ## CSS class reference The following CSS partials define the Backgrounds utility classes used in the examples above: ### background.utilities.css ```css [class^="ux4g-bg-"], [class*=" ux4g-bg-"] { background-color: var(--ux4g-bg-current, var(--ux4g-bg-neutral-elevated)); color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary)); } /* NEUTRAL */ .ux4g-bg-neutral-elevated { --ux4g-bg-current: var(--ux4g-bg-neutral-elevated); } .ux4g-bg-neutral { --ux4g-bg-current: var(--ux4g-bg-neutral); } .ux4g-bg-neutral-soft { --ux4g-bg-current: var(--ux4g-bg-neutral-soft); } .ux4g-bg-neutral-subtle { --ux4g-bg-current: var(--ux4g-bg-neutral-subtle); } .ux4g-bg-neutral-emphasis { --ux4g-bg-current: var(--ux4g-bg-neutral-emphasis); } .ux4g-bg-neutral-strong { --ux4g-bg-current: var(--ux4g-bg-neutral-strong); --ux4g-text-current: var(--ux4g-text-neutral-primary); } .ux4g-bg-neutral-stronger { --ux4g-bg-current: var(--ux4g-bg-neutral-stronger); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-neutral-disabled { --ux4g-bg-current: var(--ux4g-bg-neutral-disabled); } /* PRIMARY */ .ux4g-bg-primary { --ux4g-bg-current: var(--ux4g-bg-primary); } .ux4g-bg-primary-soft { --ux4g-bg-current: var(--ux4g-bg-primary-soft); } .ux4g-bg-primary-subtle { --ux4g-bg-current: var(--ux4g-bg-primary-subtle); } .ux4g-bg-primary-emphasis { --ux4g-bg-current: var(--ux4g-bg-primary-emphasis); } .ux4g-bg-primary-strong { --ux4g-bg-current: var(--ux4g-bg-primary-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-primary-strong-hover { --ux4g-bg-current: var(--ux4g-bg-primary-strong-hover); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-primary-stronger { --ux4g-bg-current: var(--ux4g-bg-primary-stronger); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-primary-stronger-hover { --ux4g-bg-current: var(--ux4g-bg-primary-stronger-hover); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* SECONDARY */ .ux4g-bg-secondary { --ux4g-bg-current: var(--ux4g-bg-secondary); } .ux4g-bg-secondary-soft { --ux4g-bg-current: var(--ux4g-bg-secondary-soft); } .ux4g-bg-secondary-subtle { --ux4g-bg-current: var(--ux4g-bg-secondary-subtle); } .ux4g-bg-secondary-emphasis { --ux4g-bg-current: var(--ux4g-bg-secondary-emphasis); } .ux4g-bg-secondary-strong { --ux4g-bg-current: var(--ux4g-bg-secondary-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* TERTIARY */ .ux4g-bg-tertiary { --ux4g-bg-current: var(--ux4g-bg-tertiary); } .ux4g-bg-tertiary-soft { --ux4g-bg-current: var(--ux4g-bg-tertiary-soft); } .ux4g-bg-tertiary-subtle { --ux4g-bg-current: var(--ux4g-bg-tertiary-subtle); } .ux4g-bg-tertiary-emphasis { --ux4g-bg-current: var(--ux4g-bg-tertiary-emphasis); } .ux4g-bg-tertiary-strong { --ux4g-bg-current: var(--ux4g-bg-tertiary-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* SUCCESS */ .ux4g-bg-success { --ux4g-bg-current: var(--ux4g-bg-success); } .ux4g-bg-success-soft { --ux4g-bg-current: var(--ux4g-bg-success-soft); } .ux4g-bg-success-subtle { --ux4g-bg-current: var(--ux4g-bg-success-subtle); } .ux4g-bg-success-emphasis { --ux4g-bg-current: var(--ux4g-bg-success-emphasis); } .ux4g-bg-success-strong { --ux4g-bg-current: var(--ux4g-bg-success-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* ERROR */ .ux4g-bg-error { --ux4g-bg-current: var(--ux4g-bg-error); } .ux4g-bg-error-soft { --ux4g-bg-current: var(--ux4g-bg-error-soft); } .ux4g-bg-error-subtle { --ux4g-bg-current: var(--ux4g-bg-error-subtle); } .ux4g-bg-error-emphasis { --ux4g-bg-current: var(--ux4g-bg-error-emphasis); } .ux4g-bg-error-strong { --ux4g-bg-current: var(--ux4g-bg-error-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-error-strong-hover { --ux4g-bg-current: var(--ux4g-bg-error-strong-hover); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-bg-error-stronger { --ux4g-bg-current: var(--ux4g-bg-error-stronger); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* WARNING */ .ux4g-bg-warning { --ux4g-bg-current: var(--ux4g-bg-warning); } .ux4g-bg-warning-soft { --ux4g-bg-current: var(--ux4g-bg-warning-soft); } .ux4g-bg-warning-subtle { --ux4g-bg-current: var(--ux4g-bg-warning-subtle); } .ux4g-bg-warning-emphasis { --ux4g-bg-current: var(--ux4g-bg-warning-emphasis); } .ux4g-bg-warning-strong { --ux4g-bg-current: var(--ux4g-bg-warning-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* INFO */ .ux4g-bg-info { --ux4g-bg-current: var(--ux4g-bg-info); } .ux4g-bg-info-soft { --ux4g-bg-current: var(--ux4g-bg-info-soft); } .ux4g-bg-info-subtle { --ux4g-bg-current: var(--ux4g-bg-info-subtle); } .ux4g-bg-info-emphasis { --ux4g-bg-current: var(--ux4g-bg-info-emphasis); } .ux4g-bg-info-strong { --ux4g-bg-current: var(--ux4g-bg-info-strong); --ux4g-text-current: var(--ux4g-text-neutral-inverse); } /* OTHER */ .ux4g-control-bg-default { --ux4g-bg-current: var(--ux4g-control-bg-default); } .ux4g-bg-overlay { --ux4g-bg-current: var(--ux4g-bg-overlay); } /* UTILITY */ .ux4g-bg-none { background-color: transparent !important; } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.