Классы Subtle и Emphasis в новой цветовой теме Bootstrap 5.3 SASSCSS

Разбираемся в CSS
Ответить
Anonymous
 Классы Subtle и Emphasis в новой цветовой теме Bootstrap 5.3 SASS

Сообщение Anonymous »

Я добавляю новую цветовую тему в свой Bootstrap SASS.
У меня есть собственный файл с моими модами и новым цветом (GOLD).
После прочтения и МНОГО поисков мне удалось создать новую тему и почти все элементы, включая фон и границы.
Т.е.: text-gold, border-gold, btn-gold, bg-gold и т. д.Но даже следуя примерам и документации BS, я не могу создавать классы «тонкий» и «акцент».
Нет «border-gold-subtle, text-gold-emphasis, bg- gold-subtle и т. д.»
Есть ли способ добиться этого?
Мой код (я удалил другие блоки кода, не связанные с цветовой темой )
@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";


Подробнее здесь: https://stackoverflow.com/questions/790 ... theme-sass
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»