bootstrap/scss/_colors.scss

@use "config" as *;

// stylelint-disable hue-degree-notation, @stylistic/number-leading-zero

// Easily convert colors to oklch() with https://oklch.com/
$new-blue: oklch(60% 0.24 258) !default;
$new-indigo: oklch(56% 0.26 288) !default;
$new-violet: oklch(56% 0.24 300) !default;
$new-purple: oklch(56% 0.24 320) !default;
$new-pink: oklch(60% 0.22 4) !default;
$new-red: oklch(60% 0.22 20) !default;
$new-orange: oklch(70% 0.22 52) !default;
$new-amber: oklch(79% 0.2 78) !default;
$new-yellow: oklch(88% 0.24 88) !default;
$new-lime: oklch(65% 0.24 135) !default;
$new-green: oklch(64% 0.22 160) !default;
$new-teal: oklch(68% 0.22 190) !default;
$new-cyan: oklch(69% 0.22 220) !default;
$new-brown: oklch(60% 0.12 54) !default;
$new-gray: oklch(60% 0.02 245) !default;
$new-pewter: oklch(65% 0.01 290) !default;

$hues: (
  "blue": $new-blue,
  "indigo": $new-indigo,
  "violet": $new-violet,
  "purple": $new-purple,
  "pink": $new-pink,
  "red": $new-red,
  "orange": $new-orange,
  "amber": $new-amber,
  "yellow": $new-yellow,
  "lime": $new-lime,
  "green": $new-green,
  "teal": $new-teal,
  "cyan": $new-cyan,
  "brown": $new-brown,
  "gray": $new-gray,
  "pewter": $new-pewter
) !default;

:root {
  @each $color, $hue in $hues {
    --#{$prefix}#{$color}-025: color-mix(in srgb, #fff 94%, #{$hue});
    --#{$prefix}#{$color}-050: color-mix(in srgb, #fff 90%, #{$hue});
    --#{$prefix}#{$color}-100: color-mix(in srgb, #fff 80%, #{$hue});
    --#{$prefix}#{$color}-200: color-mix(in srgb, #fff 60%, #{$hue});
    --#{$prefix}#{$color}-300: color-mix(in srgb, #fff 40%, #{$hue});
    --#{$prefix}#{$color}-400: color-mix(in srgb, #fff 20%, #{$hue});
    --#{$prefix}#{$color}-500: #{$hue};
    --#{$prefix}#{$color}-600: color-mix(in srgb, #000 16%, #{$hue});
    --#{$prefix}#{$color}-700: color-mix(in srgb, #000 32%, #{$hue});
    --#{$prefix}#{$color}-800: color-mix(in srgb, #000 48%, #{$hue});
    --#{$prefix}#{$color}-900: color-mix(in srgb, #000 64%, #{$hue});
    --#{$prefix}#{$color}-950: color-mix(in srgb, #000 76%, #{$hue});
    --#{$prefix}#{$color}-975: color-mix(in srgb, #000 88%, #{$hue});
  }
}

$white: #fff !default;
$black: #000 !default;