mirror of
https://github.com/twbs/bootstrap.git
synced 2025-03-14 14:29:30 +01:00
0d74ed9d56
- button ideas - rewrite utility mixin - cleanup some code - remove hyphen from infix by default
191 lines
9.2 KiB
SCSS
191 lines
9.2 KiB
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};
|
|
}
|
|
}
|
|
}
|
|
$new-theme-colors: (
|
|
"primary": (
|
|
"base": var(--#{$prefix}blue-500),
|
|
"text": light-dark(var(--#{$prefix}blue-700), 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, var(--#{$prefix}blue-500) 50%, transparent),
|
|
"contrast": var(--#{$prefix}white)
|
|
),
|
|
// "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)
|
|
// ),
|
|
"danger": (
|
|
"base": var(--#{$prefix}red-500),
|
|
"text": light-dark(var(--#{$prefix}red-700), 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, var(--#{$prefix}red-500) 50%, transparent),
|
|
"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)
|
|
// ),
|
|
"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, var(--#{$prefix}yellow-500) 50%, transparent),
|
|
"contrast": var(--#{$prefix}gray-900)
|
|
),
|
|
"success": (
|
|
"base": var(--#{$prefix}green-500),
|
|
"text": light-dark(var(--#{$prefix}green-700), 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, var(--#{$prefix}green-500) 50%, transparent),
|
|
"contrast": var(--#{$prefix}white)
|
|
),
|
|
// "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)
|
|
// ),
|
|
"info": (
|
|
"base": var(--#{$prefix}cyan-500),
|
|
"text": light-dark(var(--#{$prefix}cyan-700), 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, var(--#{$prefix}cyan-500) 50%, transparent),
|
|
"contrast": var(--#{$prefix}gray-900)
|
|
),
|
|
"secondary": (
|
|
"base": var(--#{$prefix}gray-500),
|
|
"text": light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-300)),
|
|
"bg": light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-500)),
|
|
"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, var(--#{$prefix}gray-500) 50%, transparent),
|
|
"contrast": var(--#{$prefix}gray-900)
|
|
)
|
|
) !default;
|
|
|
|
|
|
// [class^=".bg-"]: background-color: var(--bs-bg-color);
|
|
// .bg-primary: --bs-bg-color: var(--#{$prefix}primary-bg);
|
|
// .bg-10: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 10%, transparent);
|
|
// .bg-20: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 20%, transparent);
|
|
// .bg-30: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 30%, transparent);
|
|
// .bg-40: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 40%, transparent);
|
|
// .bg-50: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 50%, transparent);
|
|
// .bg-60: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 60%, transparent);
|
|
// .bg-70: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 70%, transparent);
|
|
// .bg-80: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 80%, transparent);
|
|
// .bg-90: background-color: color-mix(in oklch, var(--#{$prefix}bg-color) 90%, transparent);
|
|
// .bg-100: background-color: var(--#{$prefix}bg-color);
|
|
|
|
// [class^=".text-"]: color: var(--bs-text-color);
|
|
// .text-primary: --bs-text-color: var(--#{$prefix}primary-text);
|
|
// .text-10: color: color-mix(in oklch, var(--#{$prefix}text-color) 10%, transparent);
|
|
// .text-20: color: color-mix(in oklch, var(--#{$prefix}text-color) 20%, transparent);
|
|
// .text-30: color: color-mix(in oklch, var(--#{$prefix}text-color) 30%, transparent);
|
|
// .text-40: color: color-mix(in oklch, var(--#{$prefix}text-color) 40%, transparent);
|
|
// .text-50: color: color-mix(in oklch, var(--#{$prefix}text-color) 50%, transparent);
|
|
// .text-60: color: color-mix(in oklch, var(--#{$prefix}text-color) 60%, transparent);
|
|
// .text-70: color: color-mix(in oklch, var(--#{$prefix}text-color) 70%, transparent);
|
|
// .text-80: color: color-mix(in oklch, var(--#{$prefix}text-color) 80%, transparent);
|
|
// .text-90: color: color-mix(in oklch, var(--#{$prefix}text-color) 90%, transparent);
|
|
// .text-100: color: var(--#{$prefix}text-color);
|
|
|
|
$color-bg: (
|
|
"body": var(--#{$prefix}body-bg),
|
|
"secondary": var(--#{$prefix}body-secondary-bg),
|
|
"tertiary": var(--#{$prefix}body-tertiary-bg),
|
|
) !default;
|
|
|
|
$color-text: (
|
|
"body": var(--#{$prefix}body-color),
|
|
"secondary": var(--#{$prefix}body-secondary-color),
|
|
"tertiary": var(--#{$prefix}body-tertiary-color),
|
|
) !default;
|
|
|
|
$color-border: (
|
|
//...
|
|
) !default;
|
|
|
|
$util-opacity: (
|
|
"10": 0.1,
|
|
"20": 0.2,
|
|
"30": 0.3,
|
|
"40": 0.4,
|
|
"50": 0.5,
|
|
"60": 0.6,
|
|
"70": 0.7,
|
|
"80": 0.8,
|
|
"90": 0.9,
|
|
"100": 1
|
|
) !default;
|