mirror of
https://github.com/twbs/bootstrap.git
synced 2025-08-16 10:34:07 +02:00
wip
This commit is contained in:
@@ -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}));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@@ -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,
|
||||
|
@@ -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};
|
||||
}
|
||||
|
@@ -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;
|
||||
|
@@ -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};
|
||||
|
Reference in New Issue
Block a user