Skip to content

Fiddle: change color calculations #234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krishan711 merged 1 commit into from
Dec 5, 2025
Merged

Fiddle: change color calculations #234

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 69 additions & 30 deletions src/styles/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,41 +1,68 @@
// =============================================================================
// Color Functions
// =============================================================================
// These functions provide consistent color manipulation across the library.
// Using sRGB for linear color mixing that produces predictable results.

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

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
}

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

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

// =============================================================================
// Color Variant Generator
// =============================================================================
// This mixin generates light, dark, and transparency variants for any base color.
// Variants are computed dynamically using color-mix(), so they update automatically
// when the base color is overridden.
// lightXX = lighten color by XX% (mix XX% white)
// darkXX = darken color by XX% (mix XX% black)
// clearXX = make color XX% transparent
Comment on lines +23 to +25
Copy link

Copilot AI Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copilot uses AI. Check for mistakes.

@mixin generate-color-variants($name) {
// Light variants (mix with white) - percentage is how much of the ORIGINAL color to keep
// light10 = 10% original + 90% white (very light)
// light50 = 50% original + 50% white (medium light)
--kiba-color-#{$name}-light01: color-mix(in srgb, var(--kiba-color-#{$name}) 1%, white);
--kiba-color-#{$name}-light05: color-mix(in srgb, var(--kiba-color-#{$name}) 5%, white);
--kiba-color-#{$name}-light10: color-mix(in srgb, var(--kiba-color-#{$name}) 10%, white);
--kiba-color-#{$name}-light20: color-mix(in srgb, var(--kiba-color-#{$name}) 20%, white);
--kiba-color-#{$name}-light25: color-mix(in srgb, var(--kiba-color-#{$name}) 25%, white);
--kiba-color-#{$name}-light50: color-mix(in srgb, var(--kiba-color-#{$name}) 50%, white);
// Light variants - increase lightness by mixing with white
--kiba-color-#{$name}-light01: #{lighten(var(--kiba-color-#{$name}), 1%)};
--kiba-color-#{$name}-light05: #{lighten(var(--kiba-color-#{$name}), 5%)};
--kiba-color-#{$name}-light10: #{lighten(var(--kiba-color-#{$name}), 10%)};
--kiba-color-#{$name}-light20: #{lighten(var(--kiba-color-#{$name}), 20%)};
--kiba-color-#{$name}-light25: #{lighten(var(--kiba-color-#{$name}), 25%)};
--kiba-color-#{$name}-light50: #{lighten(var(--kiba-color-#{$name}), 50%)};
--kiba-color-#{$name}-light75: #{lighten(var(--kiba-color-#{$name}), 75%)};
--kiba-color-#{$name}-light80: #{lighten(var(--kiba-color-#{$name}), 80%)};
--kiba-color-#{$name}-light90: #{lighten(var(--kiba-color-#{$name}), 90%)};
--kiba-color-#{$name}-light95: #{lighten(var(--kiba-color-#{$name}), 95%)};
--kiba-color-#{$name}-light99: #{lighten(var(--kiba-color-#{$name}), 99%)};

// Dark variants (mix with black) - percentage is how much of the ORIGINAL color to keep
// dark10 = 90% original + 10% black (slightly darker)
// dark50 = 50% original + 50% black (much darker)
--kiba-color-#{$name}-dark01: color-mix(in srgb, var(--kiba-color-#{$name}) 99%, black);
--kiba-color-#{$name}-dark05: color-mix(in srgb, var(--kiba-color-#{$name}) 95%, black);
--kiba-color-#{$name}-dark10: color-mix(in srgb, var(--kiba-color-#{$name}) 90%, black);
--kiba-color-#{$name}-dark20: color-mix(in srgb, var(--kiba-color-#{$name}) 80%, black);
--kiba-color-#{$name}-dark25: color-mix(in srgb, var(--kiba-color-#{$name}) 75%, black);
--kiba-color-#{$name}-dark50: color-mix(in srgb, var(--kiba-color-#{$name}) 50%, black);
// Dark variants - decrease lightness by mixing with black
--kiba-color-#{$name}-dark01: #{darken(var(--kiba-color-#{$name}), 1%)};
--kiba-color-#{$name}-dark05: #{darken(var(--kiba-color-#{$name}), 5%)};
--kiba-color-#{$name}-dark10: #{darken(var(--kiba-color-#{$name}), 10%)};
--kiba-color-#{$name}-dark20: #{darken(var(--kiba-color-#{$name}), 20%)};
--kiba-color-#{$name}-dark25: #{darken(var(--kiba-color-#{$name}), 25%)};
--kiba-color-#{$name}-dark50: #{darken(var(--kiba-color-#{$name}), 50%)};
--kiba-color-#{$name}-dark75: #{darken(var(--kiba-color-#{$name}), 75%)};
--kiba-color-#{$name}-dark80: #{darken(var(--kiba-color-#{$name}), 80%)};
--kiba-color-#{$name}-dark90: #{darken(var(--kiba-color-#{$name}), 90%)};
--kiba-color-#{$name}-dark95: #{darken(var(--kiba-color-#{$name}), 95%)};
--kiba-color-#{$name}-dark99: #{darken(var(--kiba-color-#{$name}), 99%)};

// Clear/transparency variants (alpha channel)
--kiba-color-#{$name}-clear05: color-mix(in srgb, var(--kiba-color-#{$name}) 95%, transparent);
--kiba-color-#{$name}-clear10: color-mix(in srgb, var(--kiba-color-#{$name}) 90%, transparent);
--kiba-color-#{$name}-clear20: color-mix(in srgb, var(--kiba-color-#{$name}) 80%, transparent);
--kiba-color-#{$name}-clear25: color-mix(in srgb, var(--kiba-color-#{$name}) 75%, transparent);
--kiba-color-#{$name}-clear50: color-mix(in srgb, var(--kiba-color-#{$name}) 50%, transparent);
--kiba-color-#{$name}-clear75: color-mix(in srgb, var(--kiba-color-#{$name}) 25%, transparent);
--kiba-color-#{$name}-clear80: color-mix(in srgb, var(--kiba-color-#{$name}) 20%, transparent);
--kiba-color-#{$name}-clear90: color-mix(in srgb, var(--kiba-color-#{$name}) 10%, transparent);
--kiba-color-#{$name}-clear95: color-mix(in srgb, var(--kiba-color-#{$name}) 5%, transparent);
// Clear/transparency variants
--kiba-color-#{$name}-clear01: #{transparentize(var(--kiba-color-#{$name}), 1%)};
--kiba-color-#{$name}-clear05: #{transparentize(var(--kiba-color-#{$name}), 5%)};
--kiba-color-#{$name}-clear10: #{transparentize(var(--kiba-color-#{$name}), 10%)};
--kiba-color-#{$name}-clear20: #{transparentize(var(--kiba-color-#{$name}), 20%)};
--kiba-color-#{$name}-clear25: #{transparentize(var(--kiba-color-#{$name}), 25%)};
--kiba-color-#{$name}-clear50: #{transparentize(var(--kiba-color-#{$name}), 50%)};
--kiba-color-#{$name}-clear75: #{transparentize(var(--kiba-color-#{$name}), 75%)};
--kiba-color-#{$name}-clear80: #{transparentize(var(--kiba-color-#{$name}), 80%)};
--kiba-color-#{$name}-clear90: #{transparentize(var(--kiba-color-#{$name}), 90%)};
--kiba-color-#{$name}-clear95: #{transparentize(var(--kiba-color-#{$name}), 95%)};
--kiba-color-#{$name}-clear99: #{transparentize(var(--kiba-color-#{$name}), 99%)};

// Short aliases (without kiba- prefix) for backwards compatibility
--color-#{$name}: var(--kiba-color-#{$name});
Expand All @@ -45,12 +72,23 @@
--color-#{$name}-light20: var(--kiba-color-#{$name}-light20);
--color-#{$name}-light25: var(--kiba-color-#{$name}-light25);
--color-#{$name}-light50: var(--kiba-color-#{$name}-light50);
--color-#{$name}-light75: var(--kiba-color-#{$name}-light75);
--color-#{$name}-light80: var(--kiba-color-#{$name}-light80);
--color-#{$name}-light90: var(--kiba-color-#{$name}-light90);
--color-#{$name}-light95: var(--kiba-color-#{$name}-light95);
--color-#{$name}-light99: var(--kiba-color-#{$name}-light99);
--color-#{$name}-dark01: var(--kiba-color-#{$name}-dark01);
--color-#{$name}-dark05: var(--kiba-color-#{$name}-dark05);
--color-#{$name}-dark10: var(--kiba-color-#{$name}-dark10);
--color-#{$name}-dark20: var(--kiba-color-#{$name}-dark20);
--color-#{$name}-dark25: var(--kiba-color-#{$name}-dark25);
--color-#{$name}-dark50: var(--kiba-color-#{$name}-dark50);
--color-#{$name}-dark75: var(--kiba-color-#{$name}-dark75);
--color-#{$name}-dark80: var(--kiba-color-#{$name}-dark80);
--color-#{$name}-dark90: var(--kiba-color-#{$name}-dark90);
--color-#{$name}-dark95: var(--kiba-color-#{$name}-dark95);
--color-#{$name}-dark99: var(--kiba-color-#{$name}-dark99);
--color-#{$name}-clear01: var(--kiba-color-#{$name}-clear01);
--color-#{$name}-clear05: var(--kiba-color-#{$name}-clear05);
--color-#{$name}-clear10: var(--kiba-color-#{$name}-clear10);
--color-#{$name}-clear20: var(--kiba-color-#{$name}-clear20);
Expand All @@ -60,6 +98,7 @@
--color-#{$name}-clear80: var(--kiba-color-#{$name}-clear80);
--color-#{$name}-clear90: var(--kiba-color-#{$name}-clear90);
--color-#{$name}-clear95: var(--kiba-color-#{$name}-clear95);
--color-#{$name}-clear99: var(--kiba-color-#{$name}-clear99);
}

// =============================================================================
Expand Down
Loading