# Opacity Utilities for controlling the opacity of an element. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-opacity--introduction ## Variants documented in Storybook - OpacityShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-opacity--opacityshowcase ## 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 Opacity. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Opacity Utilities Reference

A comprehensive reference of opacity levels and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

High Opacity (70% - 100%)

Format: ux4g-opacity-{value}

100% ux4g-opacity-100
95% ux4g-opacity-95
90% ux4g-opacity-90
80% ux4g-opacity-80
75% ux4g-opacity-75
70% ux4g-opacity-70

Medium Opacity (30% - 60%)

Format: ux4g-opacity-{value}

60% ux4g-opacity-60
50% ux4g-opacity-50
40% ux4g-opacity-40
30% ux4g-opacity-30

Low Opacity (0% - 25%)

Format: ux4g-opacity-{value}

25% ux4g-opacity-25
20% ux4g-opacity-20
10% ux4g-opacity-10
5% ux4g-opacity-5
0% ux4g-opacity-0
``` React: ```jsx import React from 'react'; const OpacityExample1Demo = () => ( <>
Utilities

Opacity Utilities Reference

A comprehensive reference of opacity levels and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

{/* Opacity High */}

High Opacity (70% - 100%)

Format: ux4g-opacity-{value}

100% ux4g-opacity-100
95% ux4g-opacity-95
90% ux4g-opacity-90
80% ux4g-opacity-80
75% ux4g-opacity-75
70% ux4g-opacity-70
{/* Opacity Medium */}

Medium Opacity (30% - 60%)

Format: ux4g-opacity-{value}

60% ux4g-opacity-60
50% ux4g-opacity-50
40% ux4g-opacity-40
30% ux4g-opacity-30
{/* Opacity Low */}

Low Opacity (0% - 25%)

Format: ux4g-opacity-{value}

25% ux4g-opacity-25
20% ux4g-opacity-20
10% ux4g-opacity-10
5% ux4g-opacity-5
0% ux4g-opacity-0
); export default OpacityExample1Demo; ``` Angular: ```html
Utilities

Opacity Utilities Reference

A comprehensive reference of opacity levels and utility classes for the UX4G Design System.

Comprehensive CSS Class Reference

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

High Opacity (70% - 100%)

Format: ux4g-opacity-{value}

100% ux4g-opacity-100
95% ux4g-opacity-95
90% ux4g-opacity-90
80% ux4g-opacity-80
75% ux4g-opacity-75
70% ux4g-opacity-70

Medium Opacity (30% - 60%)

Format: ux4g-opacity-{value}

60% ux4g-opacity-60
50% ux4g-opacity-50
40% ux4g-opacity-40
30% ux4g-opacity-30

Low Opacity (0% - 25%)

Format: ux4g-opacity-{value}

25% ux4g-opacity-25
20% ux4g-opacity-20
10% ux4g-opacity-10
5% ux4g-opacity-5
0% ux4g-opacity-0
``` ### 2. Opacity Showcase — Common Opacity Levels HTML: ```html
...
...
...
...
...
...
``` React: ```jsx import React from 'react'; const OpacityExample2Demo = () => ( <>
...
...
...
...
...
...
); export default OpacityExample2Demo; ``` Angular: ```html
...
...
...
...
...
...
``` ### 3. Opacity Showcase — High Density Scale HTML: ```html
...
...
...
``` React: ```jsx import React from 'react'; const OpacityExample3Demo = () => ( <>
...
...
...
); export default OpacityExample3Demo; ``` Angular: ```html
...
...
...
``` ## CSS class reference The following CSS partials define the Opacity utility classes used in the examples above: ### opacity.utilities.css ```css /* Base Engine */ [class^="ux4g-opacity-"], [class*=" ux4g-opacity-"] { opacity: var(--ux4g-opacity-current); } /* Opacity Scale */ .ux4g-opacity-0 { --ux4g-opacity-current: var(--ux4g-opacity-0); } .ux4g-opacity-5 { --ux4g-opacity-current: var(--ux4g-opacity-5); } .ux4g-opacity-10 { --ux4g-opacity-current: var(--ux4g-opacity-10); } .ux4g-opacity-20 { --ux4g-opacity-current: var(--ux4g-opacity-20); } .ux4g-opacity-25 { --ux4g-opacity-current: var(--ux4g-opacity-25); } .ux4g-opacity-30 { --ux4g-opacity-current: var(--ux4g-opacity-30); } .ux4g-opacity-40 { --ux4g-opacity-current: var(--ux4g-opacity-40); } .ux4g-opacity-50 { --ux4g-opacity-current: var(--ux4g-opacity-50); } .ux4g-opacity-60 { --ux4g-opacity-current: var(--ux4g-opacity-60); } .ux4g-opacity-70 { --ux4g-opacity-current: var(--ux4g-opacity-70); } .ux4g-opacity-75 { --ux4g-opacity-current: var(--ux4g-opacity-75); } .ux4g-opacity-80 { --ux4g-opacity-current: var(--ux4g-opacity-80); } .ux4g-opacity-90 { --ux4g-opacity-current: var(--ux4g-opacity-90); } .ux4g-opacity-95 { --ux4g-opacity-current: var(--ux4g-opacity-95); } .ux4g-opacity-100 { --ux4g-opacity-current: var(--ux4g-opacity-100); } ``` ## 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.