Fiddle: change color calculations

[krishan711]

Description

Screenshots:

Checklist:

• I have updated the CHANGELOG with a summary of my changes
• I have updated the documentation accordingly

[Copilot]

Pull request overview

This PR refactors the SCSS color manipulation system by introducing three new helper functions (lighten, darken, transparentize) and expanding the color variant palette with additional shades (75%, 80%, 90%, 95%, 99%).

Key changes:

• Introduces three new SCSS functions to encapsulate color-mix logic
• Adds additional color variants at 75%, 80%, 90%, 95%, and 99% levels for all light, dark, and clear variations
• Updates backwards compatibility aliases to include new variants

[Copilot]

The lighten function produces opposite results from the previous implementation.

Previous behavior:

• light10 = color-mix(in srgb, var(--color) 10%, white) = 10% original + 90% white (very light)
• light50 = 50% original + 50% white

New behavior:

• light10 = color-mix(in srgb, var(--color), white 10%) = 90% original + 10% white (slightly lighter)
• light50 = 50% original + 50% white

The new implementation makes light variants much more subtle (only 10% lighter instead of 90% lighter for light10). This is a breaking visual change that will affect all components using light color variants.

The darken and transparentize functions work correctly because their semantics were already inverted in the previous implementation.

Suggested change

	@return color-mix(in srgb, #{$color}, white #{$amount});
	@return color-mix(in srgb, #{$color} #{$amount}, white);

[Copilot]

The comment description is now incorrect for light variants.

The comment states lightXX = lighten color by XX% (mix XX% white), which implies mixing XX% white with (100-XX)% of the original color.

However, due to the bug in the lighten() function, the actual result is:

• light10 produces 90% original + 10% white (only slightly lighter)
• light50 produces 50% original + 50% white (moderately lighter)

The previous implementation had:

• light10 = 10% original + 90% white (very light)
• light50 = 50% original + 50% white (moderately lighter)

The comments should accurately describe what the code does, or the code should be fixed to match the comments.

Suggested change

	// lightXX = lighten color by XX% (mix XX% white)
	// darkXX = darken color by XX% (mix XX% black)
	// clearXX = make color XX% transparent
	// lightXX = mix XX% white with (100-XX)% color (slightly lighter for small XX)
	// darkXX = mix XX% black with (100-XX)% color (slightly darker for small XX)
	// clearXX = mix XX% transparent with (100-XX)% color (slightly more transparent for small XX)