fix some css vars

scss/_buttons.scss

@@ -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));

scss/_theme.scss

@@ -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;

scss/_tooltip.scss

@@ -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};

scss/_variables.scss

@@ -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;

scss/forms/_form-control.scss

@@ -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;