'line-height': ['max(1.8em - max(0rem, ', undefined, ' - 1.125rem) * 1.2', ', ', undefined ,')']

Add the primary color using `#000`, `oklch(0% 0 none)`, or `hsl(0 0% 0%)`.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/add-a-color/master.css.js?raw')}</Code>

Apply it using color-related syntax and even change the opacity.

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/add-a-color/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/add-a-color/generated.css?raw')}</Code>

</div>

</details>

(i) If a color is used only once in all markups, you can optionally not abstract it into a token.

<button class="bg:#ceb195">Milk Tea</button>

Variables only support `rgb` and `hsl`, in the future, they will be compatible with all native CSS functions, such as `rgba`, `hsla`, `lab`, and others. [#346](https://github.com/master-co/css/issues/346)

Add color variables with opacity using `#00000080`, `rgb(0 0 0/.5)`, or `hsl(0 0% 0%/.5)`.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/add-a-color-with-opacity/master.css.js?raw')}</Code>

Apply it using color-related syntax like [`fg:`](/reference/color).

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/add-a-color-with-opacity/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/add-a-color-with-opacity/generated.css?raw')}</Code>

</div>

</details>

(x) Color variables with opacity cannot use `/alpha` to change the opacity.

<div class="fg:primary/.5">…</div>

Create an alias for a color to link its value to an existing color.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/add-an-alias/master.css.js?raw')}</Code>

Apply it using color-related syntax.

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/add-an-alias/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/add-an-alias/generated.css?raw')}</Code>

</div>

</details>

For example, say you have multiple color variables referencing the same color token. If that color needs updating, you would only need to update the source instead of manually updating every instance of the color.

Create an alias for a color with opacity to link its value to an existing color.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/add-an-alias-with-opacity/master.css.js?raw')}</Code>

Apply it using color-related syntax like [`fg:`](/reference/color).

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/add-an-alias-with-opacity/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/add-an-alias-with-opacity/generated.css?raw')}</Code>

</div>

</details>

As shown above, creating an alias `secondary` linked to an existing alias `primary` with opacity `/.5` is possible, and the opacity will be multiplied `0.5 * 0.5 = 0.25`.

Sets multiple shades for a single color.

export default {

variables: {

primary: { /* [!code ++] */

'': '#1192e8', /* primary */ /* [!code ++] */

10: '#e5f6ff', /* primary-10 */ /* [!code ++] */

20: '#bae6ff', /* primary-20 */ /* [!code ++] */

} /* [!code ++] */

}

}

Apply it using color-related syntax like [`fill:`](/reference/fill).

<svg class="fill:primary-20 …">20</svg>

Add color variables in different theme modes.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/add-colors-by-theme/master.css.js?raw')}</Code>

Using modes for variables, you can access a single source of truth and simplify the markup.

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/add-colors-by-theme/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/add-colors-by-theme/generated.css?raw')}</Code>

</div>

</details>

(!) Access the same key as the preset to override default colors, like `blue-5` ~ `blue-95`.

export default {

variables: {

blue: '#4589ff' /* [!code ++] */

}

}

(o) Use `app-*` to avoid conflicts with defaults and keep `blue-*` colors consistent.

<Code lang="js" name="master.css.js">{require('../../../../../packages/server/tests/fixtures/override-default-colors/master.css.js?raw')}</Code>

Apply custom colors for the current application.

<Code lang="html">{require('../../../../../packages/server/tests/fixtures/override-default-colors/template.html?raw')}</Code>

<details>

<summary>Generated CSS</summary>

<div>

<Code lang="css" beautify>{require('../../../../../packages/server/tests/fixtures/override-default-colors/generated.css?raw')}</Code>

</div>

</details>

In addition to the [default color palette](#default-color-palette), you can also use the Master CSS default tokens and follow the namespace convention to customize your own design.

| Token | Keywords |

|---------------------------------------------------|---------------------------------------------------------------------------|

| <Bg className="bg:white" />`white` | |

| <Bg className="bg:black" />`black` | |

| <Bg className="bg:base" />`base` | background for page, modal |

| <Bg className="bg:invert" />`invert` | inverted color of the background |

Add a color to the text variables group.

export default {

variables: {

text: {

primary: '#000' /* [!code ++] */

}

}

}

Apply the custom color:

<p class="fg:primary"></p>

Apply the defined `text-*` variables using the inherited rules <TextHeirs />.

<html class="light">

<body class="fg:neutral"></body> <!-- [!code highlight] -->

<body class="fg:text-neutral">equals</body>

<body class="fg:$text-neutral">equals</body>

</html>

(x) We set the [foreground color](/reference/color) of elements using `fg:color` rather than the [text-specific](/reference/text-fill-color) `text:color`.

<p class="text:pink">text-fill-color properity</p>

Besides inheriting the above rules, you can use `text-*` to access global text color variables in other syntax.

<svg class="stroke:text-light"></svg>

To escape inherited text colors, use `$blue` to apply `variables.blue` instead of `variables.text.blue`.

<p class="fg:$blue">…</p>

Add a color to the frame variables group.

export default {

modes: {

light: {

frame: {

light: '$slate-60/.2' /* [!code highlight] */

}

},

dark: {

frame: {

light: '$gray-30/.2' /* [!code highlight] */

}

}

}

}

Apply the defined `frame-*` variables using the inherited rules <FrameHeirs />.

<div class="outline:neutral"></div> <!-- [!code highlight] -->

<div class="outline:frame-neutral">equals</div>

<div class="outline:$frame-neutral">equals</div>