bootstrap/scss/_theme.scss

@use "config" as *;
@use "colors" as *;

@function theme-color-values($key) {
  $result: ();

  @each $color-name, $color-map in $new-theme-colors {
    @if map-has-key($color-map, $key) {
      $result: map-merge($result, ($color-name: map-get($color-map, $key)));
    }
  }

  @return $result;
}

// Recursive mixin to handle nested maps
@mixin create-css-vars($map, $parent-key: "") {
  @each $key, $value in $map {
    $current-key: if($parent-key == "", $key, "#{$parent-key}-#{$key}");

    @if type-of($value) == "map" {
      @include create-css-vars($value, $current-key);
    } @else {
      --#{$prefix}#{$current-key}: #{$value};
    }
  }
}

// scss-docs-start theme-colors
$new-theme-colors: (
  "primary": (
    "base": var(--#{$prefix}blue-500),
    "text": light-dark(var(--#{$prefix}blue-600), var(--#{$prefix}blue-300)),
    "bg": light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-500)),
    "bg-subtle": light-dark(var(--#{$prefix}blue-100), var(--#{$prefix}blue-900)),
    "bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
    "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  "accent": (
    "base": var(--#{$prefix}indigo-500),
    "text": light-dark(var(--#{$prefix}indigo-600), var(--#{$prefix}indigo-300)),
    "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
    "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
    "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
    "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  "danger": (
    "base": var(--#{$prefix}red-500),
    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-300)),
    "bg": light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-500)),
    "bg-subtle": light-dark(var(--#{$prefix}red-100), var(--#{$prefix}red-900)),
    "bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
    "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  "warning": (
    "base": var(--#{$prefix}yellow-500),
    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-300)),
    "bg": light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-500)),
    "bg-subtle": light-dark(var(--#{$prefix}yellow-100), var(--#{$prefix}yellow-900)),
    "bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
    "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "success": (
    "base": var(--#{$prefix}green-500),
    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-300)),
    "bg": light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-500)),
    "bg-subtle": light-dark(var(--#{$prefix}green-100), var(--#{$prefix}green-900)),
    "bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
    "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent),
    "contrast": var(--#{$prefix}white)
  ),
  "info": (
    "base": var(--#{$prefix}cyan-500),
    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-300)),
    "bg": light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-500)),
    "bg-subtle": light-dark(var(--#{$prefix}cyan-100), var(--#{$prefix}cyan-900)),
    "bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
    "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "secondary": (
    "base": var(--#{$prefix}gray-300),
    "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
    "bg": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
    // "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
    "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
    "focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, transparent),
    "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
  )
) !default;
// scss-docs-end theme-colors

// "indigo": (
//   "base": var(--#{$prefix}indigo-500),
//   "text": light-dark(var(--#{$prefix}indigo-700), var(--#{$prefix}indigo-300)),
//   "bg": light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-500)),
//   "bg-subtle": light-dark(var(--#{$prefix}indigo-100), var(--#{$prefix}indigo-900)),
//   "bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
//   "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
//   "contrast": var(--#{$prefix}white)
// ),
// "purple": (
//   "base": var(--#{$prefix}purple-500),
//   "text": light-dark(var(--#{$prefix}purple-700), var(--#{$prefix}purple-300)),
//   "bg": light-dark(var(--#{$prefix}purple-500), var(--#{$prefix}purple-500)),
//   "bg-subtle": light-dark(var(--#{$prefix}purple-100), var(--#{$prefix}purple-900)),
//   "bg-muted": light-dark(var(--#{$prefix}purple-200), var(--#{$prefix}purple-800)),
//   "border": light-dark(var(--#{$prefix}purple-300), var(--#{$prefix}purple-600)),
//   "contrast": var(--#{$prefix}white)
// ),
// "pink": (
//   "base": var(--#{$prefix}pink-500),
//   "text": light-dark(var(--#{$prefix}pink-700), var(--#{$prefix}pink-300)),
//   "bg": light-dark(var(--#{$prefix}pink-500), var(--#{$prefix}pink-500)),
//   "bg-subtle": light-dark(var(--#{$prefix}pink-100), var(--#{$prefix}pink-900)),
//   "bg-muted": light-dark(var(--#{$prefix}pink-200), var(--#{$prefix}pink-800)),
//   "border": light-dark(var(--#{$prefix}pink-300), var(--#{$prefix}pink-600)),
//   "contrast": var(--#{$prefix}white)
// ),
// "orange": (
//   "base": var(--#{$prefix}orange-500),
//   "text": light-dark(var(--#{$prefix}orange-700), var(--#{$prefix}orange-300)),
//   "bg": light-dark(var(--#{$prefix}orange-500), var(--#{$prefix}orange-500)),
//   "bg-subtle": light-dark(var(--#{$prefix}orange-100), var(--#{$prefix}orange-900)),
//   "bg-muted": light-dark(var(--#{$prefix}orange-200), var(--#{$prefix}orange-800)),
//   "border": light-dark(var(--#{$prefix}orange-300), var(--#{$prefix}orange-600)),
//   "contrast": var(--#{$prefix}gray-900)
// ),
// "teal": (
//   "base": var(--#{$prefix}teal-500),
//   "text": light-dark(var(--#{$prefix}teal-700), var(--#{$prefix}teal-300)),
//   "bg": light-dark(var(--#{$prefix}teal-500), var(--#{$prefix}teal-500)),
//   "bg-subtle": light-dark(var(--#{$prefix}teal-100), var(--#{$prefix}teal-900)),
//   "bg-muted": light-dark(var(--#{$prefix}teal-200), var(--#{$prefix}teal-800)),
//   "border": light-dark(var(--#{$prefix}teal-300), var(--#{$prefix}teal-600)),
//   "contrast": var(--#{$prefix}gray-900)
// ),

// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
  "0": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900)),
  "1": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-900), var(--#{$prefix}gray-800))),
  "2": light-dark(color-mix(in srgb, var(--#{$prefix}gray-100), var(--#{$prefix}gray-200)), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-700))),
  "3": light-dark(color-mix(in srgb, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in srgb, var(--#{$prefix}gray-700), var(--#{$prefix}gray-600))),
) !default;

$theme-fgs: (
  "0": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
) !default;

$theme-borders: (
  null: light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-700)),
  "muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-800)),
  "subtle": light-dark(var(--#{$prefix}gray-100), color-mix(in srgb, var(--#{$prefix}gray-800), var(--#{$prefix}gray-900))),
  "emphasized": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-600)),
) !default;

$util-opacity: (
  "10": .1,
  "20": .2,
  "30": .3,
  "40": .4,
  "50": .5,
  "60": .6,
  "70": .7,
  "80": .8,
  "90": .9,
  "100": 1
) !default;