Bootstrap 5.3 新颜色主题 SASS 上的 Subtle 和 Emphasis 类

Question

我正在 Bootstrap SASS 上添加新的颜色主题。 我有一个包含我的模组和新颜色（金色）的自定义文件。

经过大量阅读和搜索后，我能够创建新主题和几乎所有元素，包括背景和边框。 即：text-gold、border-gold、btn-gold、bg-gold 等

但即使遵循示例和 BS 文档，我也无法创建“微妙”和“强调”类。 没有“边框金色微妙、文本金色强调、背景金色微妙等”

有办法实现吗？

我的代码（我删除了与颜色主题无关的其他代码块）

@import "functions";


$primary:   #2B4261 !default;
$secondary: #9FA6B2 !default;
$success:   #14A44D !default;
$info:      #54B4D3 !default;
$warning:   #E4A11B !default;
$danger:    #DC4C64 !default;
$light:     #FBFBFB !default;
$dark:      #332D2D !default;
$gold:      #AC863C !default;


$gold-bg-subtle:          tint-color($gold, 80%) !default;
$gold-border-subtle:      tint-color($gold, 60%) !default;


$gold-bg-subtle-dark:     shade-color($danger, 80%) !default;
$gold-border-subtle-dark: shade-color($primary, 40%) !default;


@import "variables";
@import "variables-dark";


$custom-colors: (
  "primary":   $primary,
  "secondary": $secondary,
  "success":   $success,
  "info":      $info,
  "warning":   $warning,
  "danger":    $danger,
  "light":     $light,
  "dark":      $dark,
  "gold":      $gold
);


$theme-colors: map-merge($theme-colors, $custom-colors);


@import "maps";
@import "mixins";
@import "utilities";


$custom-colors-text: ("gold": $gold);
$custom-colors-bg-subtle: ("gold": $gold-bg-subtle);
$custom-colors-border-subtle: ("gold": $gold-border-subtle);


$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);


$custom-colors-text-dark: ("gold": $gold);
$custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark);
$custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark);


$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);


@import "bootstrap";

Answer 1

好吧，经过一些更多的测试，我找到了解决方案。 我会在这里发帖，也许对其他人有用。

进口订单非常重要！

// --------------------------------------------------
@import "functions";
// --------------------------------------------------

$primary:   #2B4261 !default;
$secondary: #9FA6B2 !default;
$success:   #14A44D !default;
$info:      #54B4D3 !default;
$warning:   #E4A11B !default;
$danger:    #DC4C64 !default;
$light:     #FBFBFB !default;
$dark:      #332D2D !default;
$gold:      #AC863C !default;


$gold-text-emphasis:      shade-color($gold, 60%) !default;
$gold-text-emphasis-dark: tint-color($gold, 40%) !default;


$gold-bg-subtle:          tint-color($gold, 80%) !default;
$gold-bg-subtle-dark:     shade-color($gold, 80%) !default;


$gold-border-subtle:      tint-color($gold, 60%) !default;
$gold-border-subtle-dark: shade-color($gold, 40%) !default;


// --------------------------------------------------
@import "variables";
@import "variables-dark";
// --------------------------------------------------


$custom-colors: (
  "primary":   $primary,
  "secondary": $secondary,
  "success":   $success,
  "info":      $info,
  "warning":   $warning,
  "danger":    $danger,
  "light":     $light,
  "dark":      $dark,
  "gold":      $gold
);


$theme-colors: map-merge($theme-colors, $custom-colors);


// --------------------------------------------------
@import "maps";
@import "mixins";
// --------------------------------------------------


$custom-colors-text: ("gold": $gold);
$custom-colors-bg-subtle: ("gold": $gold-bg-subtle);
$custom-colors-border-subtle: ("gold": $gold-border-subtle);


$theme-colors-text: map-merge($theme-colors-text, $custom-colors-text);
$theme-colors-bg-subtle: map-merge($theme-colors-bg-subtle, $custom-colors-bg-subtle);
$theme-colors-border-subtle: map-merge($theme-colors-border-subtle, $custom-colors-border-subtle);


$custom-colors-text-dark: ("gold": $gold);
$custom-colors-bg-subtle-dark: ("gold": $gold-bg-subtle-dark);
$custom-colors-border-subtle-dark: ("gold": $gold-border-subtle-dark);


$theme-colors-text-dark: map-merge($theme-colors-text-dark, $custom-colors-text-dark);
$theme-colors-bg-subtle-dark: map-merge($theme-colors-bg-subtle-dark, $custom-colors-bg-subtle-dark);
$theme-colors-border-subtle-dark: map-merge($theme-colors-border-subtle-dark, $custom-colors-border-subtle-dark);


$utilities-text-emphasis-colors: map-merge($utilities-text-emphasis-colors, ("gold-emphasis": var(--#{$prefix}gold-text-emphasis)));
$utilities-bg-subtle:            map-merge($utilities-bg-subtle, ("gold-subtle": var(--#{$prefix}gold-bg-subtle)));
$utilities-border-subtle:        map-merge($utilities-border-subtle, ("gold-subtle": var(--#{$prefix}gold-border-subtle)));


// --------------------------------------------------
@import "utilities";
// --------------------------------------------------


// Something more


// --------------------------------------------------
@import "bootstrap";
// --------------------------------------------------

=）