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;
}

// Generate opacity values using color-mix()
@function theme-opacity-values($color-var, $opacities: $util-opacity) {
  $result: ();

  @each $key, $value in $opacities {
    @if $key == 100 {
      // For 100%, use direct variable reference (more efficient)
      $result: map.merge($result, ($key: var($color-var)));
    } @else {
      // For other values, use color-mix()
      $percentage: $key * 1%;
      $result: map.merge($result, ($key: color-mix(in oklch, var($color-var) $percentage, transparent)));
    }
  }

  @return $result;
}

// Generate theme classes dynamically based on the keys in each theme color map
@mixin generate-theme-classes() {
  @each $color-name, $color-map in $new-theme-colors {
    .theme-#{$color-name} {
      @each $key, $value in $color-map {
        --#{$prefix}theme-#{$key}: var(--#{$prefix}#{$color-name}-#{$key});
      }
    }
  }
}

// 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-400)),
    "text-emphasis": light-dark(var(--#{$prefix}blue-800), var(--#{$prefix}blue-200)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}white)
  ),
  "accent": (
    "base": var(--#{$prefix}indigo-500),
    "text": light-dark(var(--#{$prefix}indigo-600), color-mix(in oklch, var(--#{$prefix}indigo-400), var(--#{$prefix}indigo-300))),
    "text-emphasis": light-dark(var(--#{$prefix}indigo-800), var(--#{$prefix}indigo-300)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}white)
  ),
  "success": (
    "base": var(--#{$prefix}green-500),
    "text": light-dark(var(--#{$prefix}green-600), var(--#{$prefix}green-400)),
    "text-emphasis": light-dark(var(--#{$prefix}green-800), var(--#{$prefix}green-300)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}white)
  ),
  "danger": (
    "base": var(--#{$prefix}red-500),
    "text": light-dark(var(--#{$prefix}red-600), var(--#{$prefix}red-400)),
    "text-emphasis": light-dark(var(--#{$prefix}red-800), var(--#{$prefix}red-300)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}white)
  ),
  "warning": (
    "base": var(--#{$prefix}yellow-500),
    "text": light-dark(var(--#{$prefix}yellow-700), var(--#{$prefix}yellow-400)),
    "text-emphasis": light-dark(var(--#{$prefix}yellow-800), var(--#{$prefix}yellow-300)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "info": (
    "base": var(--#{$prefix}cyan-500),
    "text": light-dark(var(--#{$prefix}cyan-600), var(--#{$prefix}cyan-400)),
    "text-emphasis": light-dark(var(--#{$prefix}cyan-800), var(--#{$prefix}cyan-300)),
    "bg": 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-400)) 50%, var(--#{$prefix}bg-body)),
    "contrast": var(--#{$prefix}gray-900)
  ),
  "inverse": (
    "base": var(--#{$prefix}gray-900),
    "text": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-200)),
    "text-emphasis": light-dark(var(--#{$prefix}gray-975), var(--#{$prefix}white)),
    "bg": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-025)),
    "bg-subtle": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)),
    "bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)),
    "border": light-dark(var(--#{$prefix}gray-400), var(--#{$prefix}gray-100)),
    "focus-ring": color-mix(in oklch, light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100)) 50%, var(--#{$prefix}bg-body)),
    "contrast": light-dark(var(--#{$prefix}white), var(--#{$prefix}gray-900))
  ),
  "secondary": (
    "base": var(--#{$prefix}gray-200),
    "text": light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)),
    "text-emphasis": light-dark(var(--#{$prefix}gray-800), var(--#{$prefix}gray-200)),
    "bg": light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-600)),
    "bg-subtle": light-dark(var(--#{$prefix}gray-050), var(--#{$prefix}gray-800)),
    "bg-muted": light-dark(var(--#{$prefix}gray-100), 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-body)),
    "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
  )
) !default;
// scss-docs-end theme-colors

// Generate theme modifier classes (e.g., .theme-primary, .theme-accent, etc.)
@include generate-theme-classes();

// mdo-do: consider using muted, subtle, ghost or something instead of linear scale?
$theme-bgs: (
  "body": 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: (
  "body": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-050)),
  "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-500)),
  "white": var(--#{$prefix}white),
  "black": var(--#{$prefix}black),
  "inherit": inherit,
) !default;

$theme-borders: (
  "bg": var(--#{$prefix}bg-body),
  "body": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-800)),
  "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)),
  "white": var(--#{$prefix}white),
  "black": var(--#{$prefix}black),
) !default;

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