This page documents the global color CSS custom properties available in the FX-Style release package, helping pages and components use theme colors, functional colors, and neutral colors consistently.

Scope

• Pages and components that import the FX-Style Web or Mobile style entry
• Styling work that needs to reuse theme colors, functional colors, neutral colors, or semantic colors
• Scenarios that use rgba() to set colors with transparency

Recommendations

• Prefer existing variables to avoid repeatedly hardcoding colors in business styles.
• For component state colors, prefer the existing convention: 01 for light backgrounds, 03 for disabled states, 05 for hover, 06 for the base color, and 07 for active states.
• When the host environment may not inject a variable, use var(--token, fallback) to provide a fallback value.
• For transparency scenarios, use the corresponding -rgb variable, such as rgba(var(--color-primary06-rgb), 0.12).

Usage

.demo-card {
  color: var(--color-neutrals19, #181c25);
  background: var(--color-neutrals01, #ffffff);
  border: 1px solid var(--color-neutrals05, #dee1e8);
}

.demo-card--active {
  color: var(--color-primary06, #ff8000);
  background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.08);
}

Variable List

Shade Conventions

Shade	Current Usage Convention
00	Very light backgrounds and subtle hint areas
01	Light backgrounds and weak-emphasis areas
02 - 04	Auxiliary base colors, borders, or disabled states; 03 is commonly used for disabled states
05	Hover state
06	Base color and main states
07	Active/pressed state
08 - 10	Dark emphasis, high-contrast text or backgrounds

The shade descriptions reflect the current general conventions. For specific components, follow the actual state mapping in the component styles.

Theme and Functional Color Variables

Magenta

Scope: magenta emphasis, tags, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-magenta00	Magenta shade 00	Very light backgrounds and subtle hint areas	#fff1f0	--color-magenta00-rgb	255, 241, 240
--color-magenta01	Magenta shade 01	Light backgrounds and weak-emphasis areas	#fff0f0	--color-magenta01-rgb	255, 240, 240
--color-magenta02	Magenta shade 02	Auxiliary base colors, borders, or disabled states	#ffeded	--color-magenta02-rgb	255, 237, 237
--color-magenta03	Magenta shade 03	Auxiliary base colors, borders, or disabled states	#ffc4c7	--color-magenta03-rgb	255, 196, 199
--color-magenta04	Magenta shade 04	Auxiliary base colors, borders, or disabled states	#ff9ca4	--color-magenta04-rgb	255, 156, 164
--color-magenta05	Magenta shade 05	Hover state or secondary emphasis	#ff7383	--color-magenta05-rgb	255, 115, 131
--color-magenta06	Magenta shade 06	Base color and main states	#ff4a66	--color-magenta06-rgb	255, 74, 102
--color-magenta07	Magenta shade 07	Active/pressed state	#d93452	--color-magenta07-rgb	217, 52, 82
--color-magenta08	Magenta shade 08	Dark emphasis and high-contrast scenarios	#b32241	--color-magenta08-rgb	179, 34, 65
--color-magenta09	Magenta shade 09	Dark emphasis and high-contrast scenarios	#8c1432	--color-magenta09-rgb	140, 20, 50
--color-magenta10	Magenta shade 10	Dark emphasis and high-contrast scenarios	#660d26	--color-magenta10-rgb	102, 13, 38

Danger

Scope: errors, dangerous operations, and failure states.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-danger00	Danger shade 00	Very light backgrounds and subtle hint areas	#fff6f0	--color-danger00-rgb	255, 246, 240
--color-danger01	Danger shade 01	Light backgrounds and weak-emphasis areas	#fff5f0	--color-danger01-rgb	255, 245, 240
--color-danger02	Danger shade 02	Auxiliary base colors, borders, or disabled states	#ffdccc	--color-danger02-rgb	255, 220, 204
--color-danger03	Danger shade 03	Auxiliary base colors, borders, or disabled states	#ffbda3	--color-danger03-rgb	255, 189, 163
--color-danger04	Danger shade 04	Auxiliary base colors, borders, or disabled states	#ff9c7a	--color-danger04-rgb	255, 156, 122
--color-danger05	Danger shade 05	Hover state or secondary emphasis	#ff7752	--color-danger05-rgb	255, 119, 82
--color-danger06	Danger shade 06	Base color and main states	#ff522a	--color-danger06-rgb	255, 82, 42
--color-danger07	Danger shade 07	Active/pressed state	#d93518	--color-danger07-rgb	217, 53, 24
--color-danger08	Danger shade 08	Dark emphasis and high-contrast scenarios	#b31e0b	--color-danger08-rgb	179, 30, 11
--color-danger09	Danger shade 09	Dark emphasis and high-contrast scenarios	#8c0d01	--color-danger09-rgb	140, 13, 1
--color-danger10	Danger shade 10	Dark emphasis and high-contrast scenarios	#660500	--color-danger10-rgb	102, 5, 0

Warning

Scope: warnings, reminders, and states that require attention.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-warning00	Warning shade 00	Very light backgrounds and subtle hint areas	#fffaf0	--color-warning00-rgb	255, 250, 240
--color-warning01	Warning shade 01	Light backgrounds and weak-emphasis areas	#fff5e6	--color-warning01-rgb	255, 245, 230
--color-warning02	Warning shade 02	Auxiliary base colors, borders, or disabled states	#ffe2bd	--color-warning02-rgb	255, 226, 189
--color-warning03	Warning shade 03	Auxiliary base colors, borders, or disabled states	#ffcd94	--color-warning03-rgb	255, 205, 148
--color-warning04	Warning shade 04	Auxiliary base colors, borders, or disabled states	#ffb56b	--color-warning04-rgb	255, 181, 107
--color-warning05	Warning shade 05	Hover state or secondary emphasis	#ff9a42	--color-warning05-rgb	255, 154, 66
--color-warning06	Warning shade 06	Base color and main states	#ff7c19	--color-warning06-rgb	255, 124, 25
--color-warning07	Warning shade 07	Active/pressed state	#d95d0b	--color-warning07-rgb	217, 93, 11
--color-warning08	Warning shade 08	Dark emphasis and high-contrast scenarios	#b34100	--color-warning08-rgb	179, 65, 0
--color-warning09	Warning shade 09	Dark emphasis and high-contrast scenarios	#8c2f00	--color-warning09-rgb	140, 47, 0
--color-warning10	Warning shade 10	Dark emphasis and high-contrast scenarios	#661f00	--color-warning10-rgb	102, 31, 0

Primary

Scope: brand expression, primary actions, links, and key information.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-primary00	Primary shade 00	Very light backgrounds and subtle hint areas	#fffbf0	--color-primary00-rgb	255, 251, 240
--color-primary01	Primary shade 01	Light backgrounds and weak-emphasis areas	#fff7e6	--color-primary01-rgb	255, 247, 230
--color-primary02	Primary shade 02	Auxiliary base colors, borders, or disabled states	#ffdda3	--color-primary02-rgb	255, 221, 163
--color-primary03	Primary shade 03	Auxiliary base colors, borders, or disabled states	#ffca7a	--color-primary03-rgb	255, 202, 122
--color-primary04	Primary shade 04	Auxiliary base colors, borders, or disabled states	#ffb452	--color-primary04-rgb	255, 180, 82
--color-primary05	Primary shade 05	Hover state or secondary emphasis	#ff9b29	--color-primary05-rgb	255, 155, 41
--color-primary06	Primary shade 06	Base color and main states	#ff8000	--color-primary06-rgb	255, 128, 0
--color-primary07	Primary shade 07	Active/pressed state	#d96500	--color-primary07-rgb	217, 101, 0
--color-primary08	Primary shade 08	Dark emphasis and high-contrast scenarios	#b34d00	--color-primary08-rgb	179, 77, 0
--color-primary09	Primary shade 09	Dark emphasis and high-contrast scenarios	#8c3800	--color-primary09-rgb	140, 56, 0
--color-primary10	Primary shade 10	Dark emphasis and high-contrast scenarios	#662500	--color-primary10-rgb	102, 37, 0

Yellow

Scope: hints, tags, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-yellow00	Yellow shade 00	Very light backgrounds and subtle hint areas	#fffef0	--color-yellow00-rgb	255, 254, 240
--color-yellow01	Yellow shade 01	Light backgrounds and weak-emphasis areas	#fffce6	--color-yellow01-rgb	255, 252, 230
--color-yellow02	Yellow shade 02	Auxiliary base colors, borders, or disabled states	#fff2a6	--color-yellow02-rgb	255, 242, 166
--color-yellow03	Yellow shade 03	Auxiliary base colors, borders, or disabled states	#ffe77d	--color-yellow03-rgb	255, 231, 125
--color-yellow04	Yellow shade 04	Auxiliary base colors, borders, or disabled states	#ffda54	--color-yellow04-rgb	255, 218, 84
--color-yellow05	Yellow shade 05	Hover state or secondary emphasis	#ffca2b	--color-yellow05-rgb	255, 202, 43
--color-yellow06	Yellow shade 06	Base color and main states	#ffb602	--color-yellow06-rgb	255, 182, 2
--color-yellow07	Yellow shade 07	Active/pressed state	#d99400	--color-yellow07-rgb	217, 148, 0
--color-yellow08	Yellow shade 08	Dark emphasis and high-contrast scenarios	#b37400	--color-yellow08-rgb	179, 116, 0
--color-yellow09	Yellow shade 09	Dark emphasis and high-contrast scenarios	#8c5600	--color-yellow09-rgb	140, 86, 0
--color-yellow10	Yellow shade 10	Dark emphasis and high-contrast scenarios	#663c00	--color-yellow10-rgb	102, 60, 0

Yellow-Green

Scope: tags, states, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-yellow-green00	Yellow-Green shade 00	Very light backgrounds and subtle hint areas	#fbfff0	--color-yellow-green00-rgb	251, 255, 240
--color-yellow-green01	Yellow-Green shade 01	Light backgrounds and weak-emphasis areas	#fafff0	--color-yellow-green01-rgb	250, 255, 240
--color-yellow-green02	Yellow-Green shade 02	Auxiliary base colors, borders, or disabled states	#f9ffed	--color-yellow-green02-rgb	249, 255, 237
--color-yellow-green03	Yellow-Green shade 03	Auxiliary base colors, borders, or disabled states	#ddf2bb	--color-yellow-green03-rgb	221, 242, 187
--color-yellow-green04	Yellow-Green shade 04	Auxiliary base colors, borders, or disabled states	#c0e68c	--color-yellow-green04-rgb	192, 230, 140
--color-yellow-green05	Yellow-Green shade 05	Hover state or secondary emphasis	#a3d962	--color-yellow-green05-rgb	163, 217, 98
--color-yellow-green06	Yellow-Green shade 06	Base color and main states	#87cc3b	--color-yellow-green06-rgb	135, 204, 59
--color-yellow-green07	Yellow-Green shade 07	Active/pressed state	#65a628	--color-yellow-green07-rgb	101, 166, 40
--color-yellow-green08	Yellow-Green shade 08	Dark emphasis and high-contrast scenarios	#478018	--color-yellow-green08-rgb	71, 128, 24
--color-yellow-green09	Yellow-Green shade 09	Dark emphasis and high-contrast scenarios	#2c590c	--color-yellow-green09-rgb	44, 89, 12
--color-yellow-green10	Yellow-Green shade 10	Dark emphasis and high-contrast scenarios	#183307	--color-yellow-green10-rgb	24, 51, 7

Success

Scope: success, completion, and normal states.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-success00	Success shade 00	Very light backgrounds and subtle hint areas	#f0fff3	--color-success00-rgb	240, 255, 243
--color-success01	Success shade 01	Light backgrounds and weak-emphasis areas	#f0fff4	--color-success01-rgb	240, 255, 244
--color-success02	Success shade 02	Auxiliary base colors, borders, or disabled states	#dcfae6	--color-success02-rgb	220, 250, 230
--color-success03	Success shade 03	Auxiliary base colors, borders, or disabled states	#abedc3	--color-success03-rgb	171, 237, 195
--color-success04	Success shade 04	Auxiliary base colors, borders, or disabled states	#7ee0a5	--color-success04-rgb	126, 224, 165
--color-success05	Success shade 05	Hover state or secondary emphasis	#55d48c	--color-success05-rgb	85, 212, 140
--color-success06	Success shade 06	Base color and main states	#30c776	--color-success06-rgb	48, 199, 118
--color-success07	Success shade 07	Active/pressed state	#1fa160	--color-success07-rgb	31, 161, 96
--color-success08	Success shade 08	Dark emphasis and high-contrast scenarios	#117a49	--color-success08-rgb	17, 122, 73
--color-success09	Success shade 09	Dark emphasis and high-contrast scenarios	#085433	--color-success09-rgb	8, 84, 51
--color-success10	Success shade 10	Dark emphasis and high-contrast scenarios	#042e1d	--color-success10-rgb	4, 46, 29

Teal

Scope: auxiliary emphasis, tags, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-teal00	Teal shade 00	Very light backgrounds and subtle hint areas	#f0fffb	--color-teal00-rgb	240, 255, 251
--color-teal01	Teal shade 01	Light backgrounds and weak-emphasis areas	#e1f5f1	--color-teal01-rgb	225, 245, 241
--color-teal02	Teal shade 02	Auxiliary base colors, borders, or disabled states	#b0e8de	--color-teal02-rgb	176, 232, 222
--color-teal03	Teal shade 03	Auxiliary base colors, borders, or disabled states	#84dbce	--color-teal03-rgb	132, 219, 206
--color-teal04	Teal shade 04	Auxiliary base colors, borders, or disabled states	#5bcfc1	--color-teal04-rgb	91, 207, 193
--color-teal05	Teal shade 05	Hover state or secondary emphasis	#36c2b6	--color-teal05-rgb	54, 194, 182
--color-teal06	Teal shade 06	Base color and main states	#16b4ab	--color-teal06-rgb	22, 180, 171
--color-teal07	Teal shade 07	Active/pressed state	#0a8f8d	--color-teal07-rgb	10, 143, 141
--color-teal08	Teal shade 08	Dark emphasis and high-contrast scenarios	#026769	--color-teal08-rgb	2, 103, 105
--color-teal09	Teal shade 09	Dark emphasis and high-contrast scenarios	#003f42	--color-teal09-rgb	0, 63, 66
--color-teal10	Teal shade 10	Dark emphasis and high-contrast scenarios	#001a1c	--color-teal10-rgb	0, 26, 28

Blue

Scope: auxiliary emphasis, information, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-blue00	Blue shade 00	Very light backgrounds and subtle hint areas	#f0fcff	--color-blue00-rgb	240, 252, 255
--color-blue01	Blue shade 01	Light backgrounds and weak-emphasis areas	#e6f9ff	--color-blue01-rgb	230, 249, 255
--color-blue02	Blue shade 02	Auxiliary base colors, borders, or disabled states	#baebff	--color-blue02-rgb	186, 235, 255
--color-blue03	Blue shade 03	Auxiliary base colors, borders, or disabled states	#91dcff	--color-blue03-rgb	145, 220, 255
--color-blue04	Blue shade 04	Auxiliary base colors, borders, or disabled states	#69caff	--color-blue04-rgb	105, 202, 255
--color-blue05	Blue shade 05	Hover state or secondary emphasis	#40b6ff	--color-blue05-rgb	64, 182, 255
--color-blue06	Blue shade 06	Base color and main states	#189dff	--color-blue06-rgb	24, 157, 255
--color-blue07	Blue shade 07	Active/pressed state	#097bd9	--color-blue07-rgb	9, 123, 217
--color-blue08	Blue shade 08	Dark emphasis and high-contrast scenarios	#005cb3	--color-blue08-rgb	0, 92, 179
--color-blue09	Blue shade 09	Dark emphasis and high-contrast scenarios	#00448c	--color-blue09-rgb	0, 68, 140
--color-blue10	Blue shade 10	Dark emphasis and high-contrast scenarios	#002e66	--color-blue10-rgb	0, 46, 102

Info

Scope: information messages, links, and general states.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-info00	Info shade 00	Very light backgrounds and subtle hint areas	#f0f9ff	--color-info00-rgb	240, 249, 255
--color-info01	Info shade 01	Light backgrounds and weak-emphasis areas	#e6f4ff	--color-info01-rgb	230, 244, 255
--color-info02	Info shade 02	Auxiliary base colors, borders, or disabled states	#b0daff	--color-info02-rgb	176, 218, 255
--color-info03	Info shade 03	Auxiliary base colors, borders, or disabled states	#87c3ff	--color-info03-rgb	135, 195, 255
--color-info04	Info shade 04	Auxiliary base colors, borders, or disabled states	#5ea9ff	--color-info04-rgb	94, 169, 255
--color-info05	Info shade 05	Hover state or secondary emphasis	#368dff	--color-info05-rgb	54, 141, 255
--color-info06	Info shade 06	Base color and main states	#0c6cff	--color-info06-rgb	12, 108, 255
--color-info07	Info shade 07	Active/pressed state	#004fd9	--color-info07-rgb	0, 79, 217
--color-info08	Info shade 08	Dark emphasis and high-contrast scenarios	#003bb3	--color-info08-rgb	0, 59, 179
--color-info09	Info shade 09	Dark emphasis and high-contrast scenarios	#002a8c	--color-info09-rgb	0, 42, 140
--color-info10	Info shade 10	Dark emphasis and high-contrast scenarios	#001b66	--color-info10-rgb	0, 27, 102

Purple

Scope: auxiliary emphasis, tags, and data visualization.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-purple00	Purple shade 00	Very light backgrounds and subtle hint areas	#f8f0ff	--color-purple00-rgb	248, 240, 255
--color-purple01	Purple shade 01	Light backgrounds and weak-emphasis areas	#f7f0ff	--color-purple01-rgb	247, 240, 255
--color-purple02	Purple shade 02	Auxiliary base colors, borders, or disabled states	#f5edff	--color-purple02-rgb	245, 237, 255
--color-purple03	Purple shade 03	Auxiliary base colors, borders, or disabled states	#ddc4ff	--color-purple03-rgb	221, 196, 255
--color-purple04	Purple shade 04	Auxiliary base colors, borders, or disabled states	#bc97f7	--color-purple04-rgb	188, 151, 247
--color-purple05	Purple shade 05	Hover state or secondary emphasis	#976aeb	--color-purple05-rgb	151, 106, 235
--color-purple06	Purple shade 06	Base color and main states	#7341de	--color-purple06-rgb	115, 65, 222
--color-purple07	Purple shade 07	Active/pressed state	#542cb8	--color-purple07-rgb	84, 44, 184
--color-purple08	Purple shade 08	Dark emphasis and high-contrast scenarios	#391c91	--color-purple08-rgb	57, 28, 145
--color-purple09	Purple shade 09	Dark emphasis and high-contrast scenarios	#230f6b	--color-purple09-rgb	35, 15, 107
--color-purple10	Purple shade 10	Dark emphasis and high-contrast scenarios	#140945	--color-purple10-rgb	20, 9, 69

Neutral Color Variables

Neutral colors are used for backgrounds, containers, borders, icons, and text hierarchy. The larger the number, the darker the color.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-neutrals01	Neutral shade 01	Light page backgrounds and container base colors	#ffffff	--color-neutrals01-rgb	255, 255, 255
--color-neutrals02	Neutral shade 02	Light page backgrounds and container base colors	#fafafa	--color-neutrals02-rgb	250, 250, 250
--color-neutrals03	Neutral shade 03	Light page backgrounds and container base colors	#f2f3f5	--color-neutrals03-rgb	242, 243, 245
--color-neutrals04	Neutral shade 04	Light page backgrounds and container base colors	#eaebee	--color-neutrals04-rgb	234, 235, 238
--color-neutrals05	Neutral shade 05	Dividers, borders, disabled states, and icons	#dee1e8	--color-neutrals05-rgb	222, 225, 232
--color-neutrals06	Neutral shade 06	Dividers, borders, disabled states, and icons	#ced1d9	--color-neutrals06-rgb	206, 209, 217
--color-neutrals07	Neutral shade 07	Dividers, borders, disabled states, and icons	#c1c5ce	--color-neutrals07-rgb	193, 197, 206
--color-neutrals08	Neutral shade 08	Dividers, borders, disabled states, and icons	#adb1ba	--color-neutrals08-rgb	173, 177, 186
--color-neutrals09	Neutral shade 09	Dividers, borders, disabled states, and icons	#a3a7b0	--color-neutrals09-rgb	163, 167, 176
--color-neutrals10	Neutral shade 10	Secondary text, explanatory text, and icons	#999da6	--color-neutrals10-rgb	153, 157, 166
--color-neutrals11	Neutral shade 11	Secondary text, explanatory text, and icons	#91959e	--color-neutrals11-rgb	145, 149, 158
--color-neutrals12	Neutral shade 12	Secondary text, explanatory text, and icons	#80858f	--color-neutrals12-rgb	128, 133, 143
--color-neutrals13	Neutral shade 13	Secondary text, explanatory text, and icons	#737881	--color-neutrals13-rgb	115, 120, 129
--color-neutrals14	Neutral shade 14	Secondary text, explanatory text, and icons	#606570	--color-neutrals14-rgb	96, 101, 112
--color-neutrals15	Neutral shade 15	Secondary text, explanatory text, and icons	#545861	--color-neutrals15-rgb	84, 88, 97
--color-neutrals16	Neutral shade 16	Headings, body text, and dark backgrounds	#444852	--color-neutrals16-rgb	68, 72, 82
--color-neutrals17	Neutral shade 17	Headings, body text, and dark backgrounds	#343841	--color-neutrals17-rgb	52, 56, 65
--color-neutrals18	Neutral shade 18	Headings, body text, and dark backgrounds	#272b34	--color-neutrals18-rgb	39, 43, 52
--color-neutrals19	Neutral shade 19	Headings, body text, and dark backgrounds	#181c25	--color-neutrals19-rgb	24, 28, 37

Special Color Variables

Special colors supplement near-neutral scenarios that neutral colors do not cover.

Variable	Description	Typical Usage	Default	RGB Variable	RGB Default
--color-special01	Special color 01	Tags and weak-emphasis backgrounds	#f2f4fb	--color-special01-rgb	242, 244, 251
--color-special02	Special color 02	Dark icons and auxiliary text	#737c8c	--color-special02-rgb	115, 124, 140
--color-special03	Special color 03	Application main background and detail background	#EFF1F3	--color-special03-rgb	239, 241, 243
--color-special04	Special color 04	Light sections and secondary container backgrounds	#F7F8FA	--color-special04-rgb	247, 248, 250

Semantic Color Variables

Semantic variables reference base neutral colors, and their names describe specific purposes. When a theme overrides the base variables, semantic variables automatically inherit the new values.

Variable	Description	Typical Usage	Referenced Variable	Current Default
--fxst-color-background	Page background color	Page and container backgrounds	var(--color-neutrals02)	#fafafa
--fxst-color-input-disable	Disabled input background color	Disabled state of input components	var(--color-neutrals04)	#eaebee
--fxst-color-icon	Default icon color	Common icons	var(--color-neutrals05)	#dee1e8
--fxst-color-input-border	Default input border color	Default border of input components	var(--color-neutrals09)	#a3a7b0
--fxst-color-h4	Fourth-level text color	Weak headings and auxiliary text	var(--color-neutrals07)	#c1c5ce
--fxst-color-h3	Third-level text color	Secondary headings and explanatory text	var(--color-neutrals11)	#91959e
--fxst-color-h2	Second-level text color	Headings and emphasized text	var(--color-neutrals13)	#737881
--fxst-color-h1	First-level text color	Primary headings and high-emphasis text	var(--color-neutrals19)	#181c25

Examples

State Colors

.notice {
  color: var(--color-info06, #0c6cff);
  background: var(--color-info01, #e6f4ff);
  border-color: var(--color-info03, #87c3ff);
}

.notice:hover {
  color: var(--color-info05, #368dff);
}

.notice:active {
  color: var(--color-info07, #004fd9);
}

Transparent Colors

.primary-overlay {
  background: rgba(var(--color-primary06-rgb, 255, 128, 0), 0.12);
}

Semantic Variables

.form-control:disabled {
  background: var(--fxst-color-input-disable, #eaebee);
}