rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-28 10:24:19 +01:00
Code Issues Actions Packages Releases Activity

First try on color-mix
Some checks failed
BrowserStack / browserstack (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Louis-Maxime Piton 2024-02-28 18:42:20 +01:00
parent b61117df78
commit 2fee900824
5 changed files with 11 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_buttons.scss
View File

@ -134,6 +134,7 @@
@include button-variant(
$value,
$value,
color-contrast($value),
$hover-background: shade-color($value, $btn-hover-bg-shade-amount),
$hover-border: shade-color($value, $btn-hover-border-shade-amount),
$active-background: shade-color($value, $btn-active-bg-shade-amount),
@ -143,13 +144,14 @@
@include button-variant(
$value,
$value,
color-contrast($value),
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount)
);
} @else {
@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}));
@include button-variant(var(--#{$prefix}#{$color}), var(--#{$prefix}#{$color}), var(--#{$prefix}on-#{$color}));
}
}
}

18
scss/_maps.scss
View File

@ -17,14 +17,6 @@ $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;
$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,
@ -66,8 +58,6 @@ $theme-colors-border-subtle: (
$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;
@ -95,14 +85,6 @@ $theme-colors-border-subtle-dark: null !default;
$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,

16
scss/_root.scss
View File

@ -22,14 +22,6 @@
--#{$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};
}
@ -172,14 +164,6 @@
--#{$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};
}

2
scss/_variables-dark.scss
View File

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

14
scss/mixins/_buttons.scss
View File

@ -7,13 +7,13 @@
@mixin button-variant(
$background,
$border,
$color: color-contrast($background),
$hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
$hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
$hover-color: color-contrast($hover-background),
$active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
$active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
$active-color: color-contrast($active-background),
$color,
$hover-background: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
$hover-border: color-mix(in srgb, $background 85%, var(--#{$prefix}body-color)),
$hover-color: $color,
$active-background: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
$active-border: color-mix(in srgb, $background 70%, var(--#{$prefix}body-color)),
$active-color: $color,
$disabled-background: $background,
$disabled-border: $border,
$disabled-color: $color