mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-13 17:14:04 +02:00
Code Issues Releases Wiki Activity

fix some css vars

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
scss/_buttons.scss
View File

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

14
scss/_theme.scss
View File

@@ -36,7 +36,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}blue-200), var(--#{$prefix}blue-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}white)
), ),
"accent": ( "accent": (
@@ -47,7 +47,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}indigo-200), var(--#{$prefix}indigo-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}white)
), ),
"danger": ( "danger": (
@@ -58,7 +58,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}red-200), var(--#{$prefix}red-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}white)
), ),
"warning": ( "warning": (
@@ -69,7 +69,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}yellow-200), var(--#{$prefix}yellow-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}gray-900)
), ),
"success": ( "success": (
@@ -80,7 +80,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}green-200), var(--#{$prefix}green-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}white)
), ),
"info": ( "info": (
@@ -91,7 +91,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}cyan-200), var(--#{$prefix}cyan-800)), "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)), // "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)), "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) "contrast": var(--#{$prefix}gray-900)
), ),
"secondary": ( "secondary": (
@@ -102,7 +102,7 @@ $new-theme-colors: (
"bg-muted": light-dark(var(--#{$prefix}gray-200), var(--#{$prefix}gray-700)), "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))), // "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)), "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)) "contrast": light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white))
) )
) !default; ) !default;

4
scss/_tooltip.scss
View File

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

2
scss/_variables.scss
View File

@@ -617,7 +617,7 @@ $input-font-size-lg: $input-btn-font-size-lg !default;
$input-bg: var(--#{$prefix}body-bg) !default; $input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !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-disabled-border-color: null !default;
$input-color: var(--#{$prefix}body-color) !default; $input-color: var(--#{$prefix}body-color) !default;

2
scss/forms/_form-control.scss
View File

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