1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-09 07:06:36 +02:00

fix some css vars

This commit is contained in:
Mark Otto
2025-05-30 21:03:02 -07:00
parent 1391f89052
commit d809eef178
5 changed files with 13 additions and 13 deletions

View File

@@ -285,12 +285,11 @@ $button-variants: (
// scss-docs-end btn-css-vars
display: inline-flex;
gap: var(--#{$prefix}btn-gap);
align-items: center;
justify-content: center;
gap: var(--#{$prefix}btn-gap);
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
font-family: var(--#{$prefix}btn-font-family);
@include font-size(var(--#{$prefix}btn-font-size));
font-weight: var(--#{$prefix}btn-font-weight);
line-height: var(--#{$prefix}btn-line-height);
color: var(--#{$prefix}btn-color);
@@ -301,6 +300,7 @@ $button-variants: (
cursor: if($enable-button-pointers, pointer, null);
user-select: none;
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
@include font-size(var(--#{$prefix}btn-font-size));
@include border-radius(var(--#{$prefix}btn-border-radius));
@include gradient-bg(var(--#{$prefix}btn-bg));
@include box-shadow(var(--#{$prefix}btn-box-shadow));

View File

@@ -36,7 +36,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}blue-200), var(--#{$prefix}blue-300)), var(--#{$prefix}blue-700)),
"border": light-dark(var(--#{$prefix}blue-300), var(--#{$prefix}blue-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg-0)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}blue-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"accent": (
@@ -47,7 +47,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-300)), var(--#{$prefix}indigo-700)),
"border": light-dark(var(--#{$prefix}indigo-300), var(--#{$prefix}indigo-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}indigo-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"danger": (
@@ -58,7 +58,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}red-200), var(--#{$prefix}red-300)), var(--#{$prefix}red-700)),
"border": light-dark(var(--#{$prefix}red-300), var(--#{$prefix}red-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}red-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"warning": (
@@ -69,7 +69,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-300)), var(--#{$prefix}yellow-700)),
"border": light-dark(var(--#{$prefix}yellow-300), var(--#{$prefix}yellow-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}yellow-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"success": (
@@ -80,7 +80,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}green-200), var(--#{$prefix}green-300)), var(--#{$prefix}green-700)),
"border": light-dark(var(--#{$prefix}green-300), var(--#{$prefix}green-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}green-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}white)
),
"info": (
@@ -91,7 +91,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-300)), var(--#{$prefix}cyan-700)),
"border": light-dark(var(--#{$prefix}cyan-300), var(--#{$prefix}cyan-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}cyan-500) 50%, var(--#{$prefix}bg)),
"contrast": var(--#{$prefix}gray-900)
),
"secondary": (
@@ -102,7 +102,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)),
// "bg-emphasized": light-dark(color-mix(in oklch, var(--#{$prefix}gray-200), var(--#{$prefix}gray-300)), color-mix(in oklch, var(--#{$prefix}gray-600), var(--#{$prefix}gray-700))),
"border": light-dark(var(--#{$prefix}gray-300), var(--#{$prefix}gray-600)),
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, transparent),
"focus-ring": color-mix(in oklch, var(--#{$prefix}gray-500) 50%, var(--#{$prefix}bg)),
"contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
)
) !default;

View File

@@ -15,8 +15,8 @@
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: var(--#{$prefix}bg-0);
--#{$prefix}tooltip-bg: var(--#{$prefix}fg-0);
--#{$prefix}tooltip-color: var(--#{$prefix}bg);
--#{$prefix}tooltip-bg: var(--#{$prefix}fg);
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: .95;
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};

View File

@@ -617,7 +617,7 @@ $input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !default;
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-bg: var(--#{$prefix}bg-2) !default;
$input-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default;

View File

@@ -42,7 +42,7 @@
}
// Customize the `:focus` state to imitate native WebKit styles.
&:focus {
&:focus-visible {
color: $input-focus-color;
background-color: $input-focus-bg;
// border-color: $input-focus-border-color;