xref: /openbmc/webui-vue/src/assets/styles/bmc/helpers/_functions.scss (revision d36ac8a8be8636ddd0e64ce005d507b21bcdeb00)
1@use "sass:math";
2
3// This function is usually used to get a lighter
4// theme variant color to use as a background color
5@function theme-color-light($variant) {
6  @return shift-color(map-get($theme-colors, $variant), -90.4%);
7}
8
9@function theme-color-dark($variant) {
10  @return shift-color(map-get($theme-colors, $variant), 16%);
11}
12
13// Bootstrap 5 no longer provides theme-color(); define a compatible helper
14@function theme-color($variant) {
15  @return map-get($theme-colors, $variant);
16}
17
18// Bootstrap 4 compatibility: theme-color-level() function
19// Positive levels darken (mix with black), negative levels lighten (mix with white)
20// Each level is 8% change, matching Bootstrap 4 behavior
21@function theme-color-level($variant, $level: 0) {
22  $color: map-get($theme-colors, $variant);
23  $weight: $level * 8%;
24
25  @if $level > 0 {
26    @return shade-color($color, $weight);
27  } @else if $level < 0 {
28    @return tint-color($color, math.abs($weight));
29  } @else {
30    @return $color;
31  }
32}