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

Text Color Utilities Reference

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

Comprehensive CSS Class Reference

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

Neutral

Format: ux4g-text-{shade}

A
Neutral Primary
ux4g-text-neutral-primary
A
Neutral Secondary
ux4g-text-neutral-secondary
A
Neutral Tertiary
ux4g-text-neutral-tertiary
A
Neutral Inverse
ux4g-text-neutral-inverse
A
Neutral Emphasis
ux4g-text-neutral-emphasis

Brand

Format: ux4g-text-{color}

A
Primary
ux4g-text-primary
A
Secondary
ux4g-text-secondary
A
Tertiary
ux4g-text-tertiary

Status

Format: ux4g-text-{color}

A
Success
ux4g-text-success
A
Error
ux4g-text-error
A
Warning
ux4g-text-warning
A
Info
ux4g-text-info

Icon Status

Format: ux4g-icon-{color}

A
Icon Success
ux4g-icon-success
A
Icon Error
ux4g-icon-error
A
Icon Warning
ux4g-icon-warning
A
Icon Info
ux4g-icon-info

Links

Format: ux4g-text-link-{color}

A
Link
ux4g-text-link
A
Link Neutral
ux4g-text-link-neutral
A
Link Inverse
ux4g-text-link-inverse
A
Link Neutral Inverse
ux4g-text-link-neutral-inverse

Static

Format: ux4g-text-{color}

A
White
ux4g-text-white
A
Black
ux4g-text-black
A
Error Default
ux4g-text-error-default
``` React: ```jsx import React from 'react'; const TextColorsExample1Demo = () => ( <>
Utilities

Text Color Utilities Reference

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

Comprehensive CSS Class Reference

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

{/* Neutral Text */}

Neutral

Format: ux4g-text-{shade}

A
Neutral Primary
ux4g-text-neutral-primary
A
Neutral Secondary
ux4g-text-neutral-secondary
A
Neutral Tertiary
ux4g-text-neutral-tertiary
A
Neutral Inverse
ux4g-text-neutral-inverse
A
Neutral Emphasis
ux4g-text-neutral-emphasis
{/* Brand Text */}

Brand

Format: ux4g-text-{color}

A
Primary
ux4g-text-primary
A
Secondary
ux4g-text-secondary
A
Tertiary
ux4g-text-tertiary
{/* Status Text */}

Status

Format: ux4g-text-{color}

A
Success
ux4g-text-success
A
Error
ux4g-text-error
A
Warning
ux4g-text-warning
A
Info
ux4g-text-info
{/* Icon Colors */}

Icon Status

Format: ux4g-icon-{color}

A
Icon Success
ux4g-icon-success
A
Icon Error
ux4g-icon-error
A
Icon Warning
ux4g-icon-warning
A
Icon Info
ux4g-icon-info
{/* Link Colors */}

Links

Format: ux4g-text-link-{color}

A
Link
ux4g-text-link
A
Link Neutral
ux4g-text-link-neutral
A
Link Inverse
ux4g-text-link-inverse
A
Link Neutral Inverse
ux4g-text-link-neutral-inverse
{/* Static Colors */}

Static

Format: ux4g-text-{color}

A
White
ux4g-text-white
A
Black
ux4g-text-black
A
Error Default
ux4g-text-error-default
); export default TextColorsExample1Demo; ``` Angular: ```html
Utilities

Text Color Utilities Reference

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

Comprehensive CSS Class Reference

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

Neutral

Format: ux4g-text-{shade}

A
Neutral Primary
ux4g-text-neutral-primary
A
Neutral Secondary
ux4g-text-neutral-secondary
A
Neutral Tertiary
ux4g-text-neutral-tertiary
A
Neutral Inverse
ux4g-text-neutral-inverse
A
Neutral Emphasis
ux4g-text-neutral-emphasis

Brand

Format: ux4g-text-{color}

A
Primary
ux4g-text-primary
A
Secondary
ux4g-text-secondary
A
Tertiary
ux4g-text-tertiary

Status

Format: ux4g-text-{color}

A
Success
ux4g-text-success
A
Error
ux4g-text-error
A
Warning
ux4g-text-warning
A
Info
ux4g-text-info

Icon Status

Format: ux4g-icon-{color}

A
Icon Success
ux4g-icon-success
A
Icon Error
ux4g-icon-error
A
Icon Warning
ux4g-icon-warning
A
Icon Info
ux4g-icon-info

Links

Format: ux4g-text-link-{color}

A
Link
ux4g-text-link
A
Link Neutral
ux4g-text-link-neutral
A
Link Inverse
ux4g-text-link-inverse
A
Link Neutral Inverse
ux4g-text-link-neutral-inverse

Static

Format: ux4g-text-{color}

A
White
ux4g-text-white
A
Black
ux4g-text-black
A
Error Default
ux4g-text-error-default
``` ### 2. Text Colors Showcase — Neutral Text HTML: ```html ... ... ... ... ... ``` React: ```jsx import React from 'react'; const TextColorsExample2Demo = () => ( <> ... ... ... {/* Inverse: Use on dark backgrounds */} ... ... ); export default TextColorsExample2Demo; ``` Angular: ```html ... ... ... ... ... ``` ### 3. Text Colors Showcase — Brand Text HTML: ```html ... ... ... ``` React: ```jsx import React from 'react'; const TextColorsExample3Demo = () => ( <> ... ... ... ); export default TextColorsExample3Demo; ``` Angular: ```html ... ... ... ``` ### 4. Text Colors Showcase — Status Text HTML: ```html ... ... ... ... ``` React: ```jsx import React from 'react'; const TextColorsExample4Demo = () => ( <> ... ... ... ... ); export default TextColorsExample4Demo; ``` Angular: ```html ... ... ... ... ``` ### 5. Text Colors Showcase — Link Text HTML: ```html Default Link Neutral Link Inverse Link ``` React: ```jsx import React from 'react'; const TextColorsExample5Demo = () => ( <> Default Link Neutral Link {/* Inverse link for dark backgrounds */} Inverse Link ); export default TextColorsExample5Demo; ``` Angular: ```html Default Link Neutral Link Inverse Link ``` ### 6. Text Colors Showcase — Icon Status Colors HTML: ```html check_circle cancel warning info ``` React: ```jsx import React from 'react'; const TextColorsExample6Demo = () => ( <> check_circle cancel warning info ); export default TextColorsExample6Demo; ``` Angular: ```html check_circle cancel warning info ``` ### 7. Text Colors Showcase — Default Colors HTML: ```html ... ... ... ``` React: ```jsx import React from 'react'; const TextColorsExample7Demo = () => ( <> ... ... ... ); export default TextColorsExample7Demo; ``` Angular: ```html ... ... ... ``` ## CSS class reference The following CSS partials define the Text Colors utility classes used in the examples above: ### colors.utilities.css ```css /* BASE */ [class^="ux4g-text-"], [class*=" ux4g-text-"] { color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary)) !important; } [class*="ux4g-icon-"] { color: var(--ux4g-text-current, var(--ux4g-text-neutral-primary)); } /* ================= NEUTRAL ================= */ .ux4g-text-neutral-primary { --ux4g-text-current: var(--ux4g-text-neutral-primary); } .ux4g-text-neutral-secondary { --ux4g-text-current: var(--ux4g-text-neutral-secondary); } .ux4g-text-neutral-tertiary { --ux4g-text-current: var(--ux4g-text-neutral-tertiary); } .ux4g-text-neutral-inverse { --ux4g-text-current: var(--ux4g-text-neutral-inverse); } .ux4g-text-neutral-emphasis { --ux4g-text-current: var(--ux4g-text-neutral-emphasis); } /* ================= BRAND ================= */ .ux4g-text-primary { --ux4g-text-current: var(--ux4g-text-brand-primary-default); } .ux4g-text-secondary { --ux4g-text-current: var(--ux4g-text-brand-secondary-default); } .ux4g-text-tertiary { --ux4g-text-current: var(--ux4g-text-brand-tertiary-default); } /* ================= STATUS ================= */ .ux4g-text-success { --ux4g-text-current: var(--ux4g-text-status-success); } .ux4g-text-error { --ux4g-text-current: var(--ux4g-text-status-error); } .ux4g-text-warning { --ux4g-text-current: var(--ux4g-text-status-warning); } .ux4g-text-info { --ux4g-text-current: var(--ux4g-text-status-info); } /* ================= ICON STATUS ================= */ .ux4g-icon-success { --ux4g-text-current: var(--ux4g-icon-status-success); } .ux4g-icon-error { --ux4g-text-current: var(--ux4g-icon-status-error); } .ux4g-icon-warning { --ux4g-text-current: var(--ux4g-icon-status-warning); } .ux4g-icon-info { --ux4g-text-current: var(--ux4g-icon-status-info); } /* ================= LINKS - NEUTRAL ================= */ .ux4g-text-link-neutral { --ux4g-text-current: var(--ux4g-text-link-neutral-default); } .ux4g-text-link-neutral:hover { --ux4g-text-current: var(--ux4g-text-link-neutral-hover); } .ux4g-text-link-neutral:active { --ux4g-text-current: var(--ux4g-text-link-neutral-active); } .ux4g-text-link-neutral:visited { --ux4g-text-current: var(--ux4g-text-link-neutral-visited); } .ux4g-text-link-neutral-inverse { --ux4g-text-current: var(--ux4g-text-link-neutral-inverse); } /* ================= LINKS - BRAND ================= */ .ux4g-text-link { --ux4g-text-current: var(--ux4g-text-link-default-default); } .ux4g-text-link:hover { --ux4g-text-current: var(--ux4g-text-link-default-hover); } .ux4g-text-link:active { --ux4g-text-current: var(--ux4g-text-link-default-active); } .ux4g-text-link:visited { --ux4g-text-current: var(--ux4g-text-link-default-visited); } .ux4g-text-link-inverse { --ux4g-text-current: var(--ux4g-text-link-default-inverse); } /* ================= STATIC COLORS ================= */ .ux4g-text-white { --ux4g-text-current: var(--ux4g-text-white); } .ux4g-text-black { --ux4g-text-current: var(--ux4g-text-black); } .ux4g-text-error-default { --ux4g-text-current: var(--ux4g-text-error-default); } /* ================= LINK DISABLED ================= */ .ux4g-text-link:is(:disabled, [aria-disabled="true"]), .ux4g-text-link-neutral:is(:disabled, [aria-disabled="true"]) { --ux4g-text-current: var(--ux4g-text-link-disabled); color: var(--ux4g-text-current); cursor: not-allowed; text-decoration: none; pointer-events: none; } ``` ## 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.