sui-theme v9 custom-properties available

[andresin87]

Css native custom properties

🔍 Show

TASK:

Description, Motivation and Context

This PR is using @s-ui/theme@9.0.0-beta-2 which is a proposal to get ready to use css native custom tokens in brand web-apps and brand themes.

Those theme changes can be inspected in SUI-Components/sui#1804

The main handicap is the usage of SASS color functions and css rgba color standard.

### Replacing errors

When experiencing any problem related to this, the solution is color-mix CSS native color manipulation syntax. EX:

Important

color-mix Browser Compatibility

whatever {
 background-color: rgba(0,0,0,.3)
}

can be replaced to

whatever {
 background-color: color-mix(in srgb, black 70%, transparent)
}

also, for scss native color manipulation functions

whatever {
 background-color: mix($white, $color-primary, $mix-factor);
}

can be replaced to

whatever {
 background-color: color-mix(in srgb, $white #{'#{$mix-factor)}%'}, $color-primary);
}

Other utils

color-mix allows to nest its inner values

whatever {
  background-color: color-mix(in srgb, color-mix(in srgb, red 50%, yellow) 30%, blue)
}

Types of changes

• 🪲 Bug fix (non-breaking change which fixes an issue)
• ✨ New feature (non-breaking change which adds functionality)
• 💥 Breaking change (fix or feature that would cause existing functionality to not work as expected)
• 🧾 Documentation
• 📷 Demo
• 🧪 Test
• 🧠 Refactor
• 💄 Styles
• 🛠️ Tool

Screenshots - Animations

[turolopezsanabria]

🤩

[github-actions]

	STATEMENTS	BRANCHES	FUNCTIONS	LINES
≍	≍ 0＝	≍ 0＝	≍ 0＝	≍ 0＝
%	75.9	64.19	65.99	77.7
ABS	3343 / 4404	2051 / 3195	654 / 991	3164 / 4072