1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-16 10:34:07 +02:00
This commit is contained in:
louismaxime.piton
2023-09-13 12:05:54 +02:00
parent 56d9856415
commit ff8d62c223
5 changed files with 62 additions and 4 deletions

View File

@@ -140,7 +140,7 @@
$active-border: tint-color($value, $btn-active-border-tint-amount)
);
} @else {
@include button-variant($value, $value);
@include button-variant(var(--#{$prefix}#{$color}), var(--#{$prefix}#{$color}), var(--#{$prefix}on-#{$color}), var(--#{$prefix}#{$color}-hover), var(--#{$prefix}#{$color}-hover), var(--#{$prefix}on-#{$color}), var(--#{$prefix}#{$color}-active), var(--#{$prefix}#{$color}-active), var(--#{$prefix}on-#{$color}));
}
}
}

View File

@@ -1,11 +1,30 @@
// Re-assigned maps
//
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
@function test-modify($value, $tint-value) {
@if color-contrast($value) == $color-contrast-light {
@return shade-color($value, $tint-value);
}
@return tint-color($value, $tint-value);
}
// scss-docs-start theme-colors-rgb
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-colors-rgb
$on-theme-colors: map-loop($theme-colors, color-contrast, "$value") !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-colors-rgb
$theme-colors-hover: map-loop($theme-colors, test-modify, "$value", 15%) !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-colors-rgb
$theme-colors-active: map-loop($theme-colors, test-modify, "$value", 20%) !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-map
$theme-colors-text: (
"primary": $primary-text-emphasis,
@@ -46,6 +65,9 @@ $theme-colors-border-subtle: (
// scss-docs-end theme-border-subtle-map
$theme-colors-dark: null !default;
$on-theme-colors-dark: null !default;
$theme-colors-hover-dark: null !default;
$theme-colors-active-dark: null !default;
$theme-colors-rgb-dark: null !default;
$theme-colors-text-dark: null !default;
$theme-colors-bg-subtle-dark: null !default;
@@ -69,6 +91,18 @@ $theme-colors-border-subtle-dark: null !default;
$theme-colors-rgb-dark: map-loop($theme-colors-dark, to-rgb, "$value") !default;
// scss-docs-end theme-colors-rgb-dark
// scss-docs-start theme-colors-rgb
$on-theme-colors-dark: map-loop($theme-colors-dark, color-contrast, "$value") !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-colors-rgb
$theme-colors-hover-dark: map-loop($theme-colors-dark, test-modify, "$value", 15%) !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-colors-rgb
$theme-colors-active-dark: map-loop($theme-colors-dark, test-modify, "$value", 20%) !default;
// scss-docs-end theme-colors-rgb
// scss-docs-start theme-text-dark-map
$theme-colors-text-dark: (
"primary": $primary-text-emphasis-dark,

View File

@@ -18,6 +18,18 @@
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $on-theme-colors {
--#{$prefix}on-#{$color}: #{$value};
}
@each $color, $value in $theme-colors-hover {
--#{$prefix}#{$color}-hover: #{$value};
}
@each $color, $value in $theme-colors-active {
--#{$prefix}#{$color}-active: #{$value};
}
@each $color, $value in $theme-colors-rgb {
--#{$prefix}#{$color}-rgb: #{$value};
}
@@ -155,6 +167,18 @@
--#{$prefix}#{$color}: #{$value};
}
@each $color, $value in $on-theme-colors-dark {
--#{$prefix}on-#{$color}: #{$value};
}
@each $color, $value in $theme-colors-hover-dark {
--#{$prefix}#{$color}-hover: #{$value};
}
@each $color, $value in $theme-colors-active-dark {
--#{$prefix}#{$color}-active: #{$value};
}
@each $color, $value in $theme-colors-rgb-dark {
--#{$prefix}#{$color}-rgb: #{$value};
}

View File

@@ -8,7 +8,7 @@
// scss-docs-start sass-dark-mode-vars
// scss-docs-start theme-color-dark-variables
$primary-dark: $primary !default;
$primary-dark: #c00 !default;
$secondary-dark: $secondary !default;
$success-dark: $success !default;
$info-dark: $info !default;

View File

@@ -16,7 +16,7 @@
$active-color: color-contrast($active-background),
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: color-contrast($disabled-background)
$disabled-color: $color
) {
--#{$prefix}btn-color: #{$color};
--#{$prefix}btn-bg: #{$background};
@@ -24,7 +24,7 @@
--#{$prefix}btn-hover-color: #{$hover-color};
--#{$prefix}btn-hover-bg: #{$hover-background};
--#{$prefix}btn-hover-border-color: #{$hover-border};
--#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
--#{$prefix}btn-focus-shadow-rgb: var(--#{$prefix}primary-border-subtle);
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-background};
--#{$prefix}btn-active-border-color: #{$active-border};