bootstrap/scss/_theme.scss

@use "sass:meta";
@use "sass:map";
@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 meta.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)),
    "border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}blue-500), var(--#{$prefix}blue-300)) 50%, var(--#{$prefix}bg)),
    "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)),
    "border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}indigo-500), var(--#{$prefix}indigo-300)) 50%, var(--#{$prefix}bg)),
    "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)),
    "border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}red-500), var(--#{$prefix}red-300)) 50%, var(--#{$prefix}bg)),
    "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)),
    "border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}yellow-500), var(--#{$prefix}yellow-300)) 50%, var(--#{$prefix}bg)),
    "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)),
    "border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}green-500), var(--#{$prefix}green-300)) 50%, var(--#{$prefix}bg)),
    "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)),
    "border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}cyan-500), var(--#{$prefix}cyan-300)) 50%, var(--#{$prefix}bg)),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "emphasis": (
    "base": var(--#{$prefix}gray-900),
    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-950)),
    "bg-muted": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
    "border": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg)),
    "contrast": light-dark(var(--#{$prefix}white), 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)),
    "border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-300)) 50%, var(--#{$prefix}bg)),
    "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
  )
) !default;
// scss-docs-end theme-colors

// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
  null: light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-975)),
  "1": light-dark(var(--#{$prefix}gray-025), var(--#{$prefix}gray-950)),
  "2": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-900)),
  "3": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800)),
  "white": var(--#{$prefix}white),
  "black": var(--#{$prefix}black),
  "transparent": transparent,
  "inherit": inherit,
) !default;

$theme-fgs: (
  null: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
  "1": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-100)),
  "2": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200)),
  "3": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-300)),
  "white": var(--#{$prefix}white),
  "black": var(--#{$prefix}black),
  "inherit": inherit,
) !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), 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;