button color fixes

src/pages/_docs/buttons.md

@@ -214,7 +214,7 @@ Add the `.btn-icon` class to remove unnecessary padding from your button and use
 {% include ui/button.html icon="star" color="warning" icon-only=true %}
 {% include ui/button.html icon="trash" color="danger" icon-only=true %}
 {% include ui/button.html icon="chart-bar" color="purple" icon-only=true %}
-{% include ui/button.html icon="git-merge" color="white" icon-only=true %}
+{% include ui/button.html icon="git-merge"  icon-only=true %}
 {% endcapture %}
 {% include example.html code=code wrapper="btn-list" centered=true %}
 

src/pages/_docs/dropdowns.md

@@ -116,7 +116,7 @@ Make your dropdown suit the dark mode of your website or software.
 Use a dropdown with card content to make it easy for users to get more information on a given subject and avoid ovewhelming them with too much content at once.
 
 {% capture code %}
-{% include ui/button.html color="white" text="Button" %}
+{% include ui/button.html  text="Button" %}
 <div class="dropdown{% hide %} show{% endhide %}">
     <a href="#" class="btn btn-primary dropdown-toggle">Dropdown</a>
     <div class="dropdown-menu dropdown-menu-card{% hide %} show position-static{% endhide %}" style="max-width: 20rem;">

src/pages/_docs/spinners.md

@@ -69,7 +69,7 @@ Use buttons with spinners to notify users that an action they have taken by clic
 {% include ui/button.html spinner=true text="Button" color="danger" %}
 {% include ui/button.html spinner=true text="Button" color="warning" %}
 {% include ui/button.html spinner=true text="Button" color="success" %}
-{% include ui/button.html spinner=true text="Button" color="white" %}
+{% include ui/button.html spinner=true text="Button" %}
 {% endcapture %}
 {% include example.html code=code %}
 

src/pages/_includes/cards/profile-timeline.html

@@ -2,7 +2,7 @@
 	<div class="card-header">
 		<div class="input-group">
 			<input type="text" class="form-control" placeholder="Message">
-			{% include ui/button.html icon="camera" icon-only=true color="white" %}
+			{% include ui/button.html icon="camera" icon-only=true  %}
 		</div>
 	</div>
 	<ul class="list-group card-list-group">

src/pages/_includes/cards/sign-in.html

@@ -9,8 +9,8 @@
 
 	<div class="card-body">
 		<div class="row">
-			<div class="col">{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
+			<div class="col">{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}</div>
-			<div class="col">{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
+			<div class="col">{% include ui/button.html  block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}</div>
 		</div>
 	</div>
 </div>

src/pages/_includes/forms/form-elements-4.html

@@ -43,7 +43,7 @@
 	<div class="btn-group w-100">
 		{% assign icons = "bold,italic,underline,copy,scissors,file-plus,file-minus" | split: ',' %}
 		{% for icon in icons %}
-		{% include ui/button.html color="white" icon=icon icon-only=true %}
+		{% include ui/button.html  icon=icon icon-only=true %}
 		{% endfor %}
 	</div>
 </div>

src/pages/_includes/forms/form-elements-6.html

@@ -23,10 +23,10 @@
 	<label class="form-label">Form buttons</label>
 	<div class="row">
 		<div class="col">
-			{% include ui/button.html color="white" block=true icon="brand-github" icon-color="github" text="Login with Github" %}
+			{% include ui/button.html  block=true icon="brand-github" icon-color="github" text="Login with Github" %}
 		</div>
 		<div class="col">
-			{% include ui/button.html color="white" block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
+			{% include ui/button.html  block=true icon="brand-twitter" icon-color="twitter" text="Login with Twitter" %}
 		</div>
 	</div>
 </div>

src/pages/_includes/layout/header-actions/buttons.html

@@ -3,7 +3,7 @@
 		{% if page.layout-navbar-overlap and page.layout-navbar-dark %}
 		{% include ui/button.html text="New view" color="dark" %}
 		{% else %}
-		{% include ui/button.html text="New view" color="white" %}
+		{% include ui/button.html text="New view"  %}
 		{% endif %}
 	</span>
 	{% include ui/button.html icon="plus" text="Create new report" color="primary" class="d-none d-sm-inline-block" modal-id="report" %}

src/pages/_includes/parts/form/input-icon-separated.html

@@ -5,7 +5,7 @@
 			<input type="text" class="form-control" placeholder="Search for…">
 		</div>
 		<div class="col-auto">
-			{% include ui/button.html icon="search" icon-only=true color="white" %}
+			{% include ui/button.html icon="search" icon-only=true  %}
 		</div>
 	</div>
 </div>

src/scss/_variables.scss

@@ -270,6 +270,7 @@ $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
 $dark-mode-border-color: lighten($dark, 4%) !default;
 $dark-mode-border-color-light: lighten($dark, 4%) !default;
+$dark-mode-border-color-active: lighten($dark, 12%) !default;
 $dark-mode-text: $light;
 
 // Borders
@@ -461,6 +462,7 @@ $input-color: inherit !default;
 $input-focus-color: inherit !default;
 
 // Buttons
+$btn-disabled-opacity: .4 !default;
 $btn-padding-x: 1rem !default;
 $btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $btn-border-radius: var(--#{$prefix}border-radius) !default;
@@ -557,8 +559,9 @@ $modal-backdrop-blur: 4px !default;
 $modal-fade-transform: translate(0, -1rem) !default;
 
 $modal-content-border-color: transparent !default;
-$modal-content-bg: $gray-50 !default;
+$modal-content-bg: var(--#{$prefix}bg-surface) !default;
-$modal-content-border-radius: var(--#{$prefix}border-radius) !default;
+$modal-content-border-radius: var(--#{$prefix}border-radius-lg) !default;
+$modal-content-inner-border-radius: subtract(var(--#{$prefix}modal-border-radius), 1px) !default;
 
 $modal-header-padding: 1.5rem !default;
 $modal-header-height: 3.5rem !default;
@@ -789,7 +792,7 @@ $payment-sizes: $avatar-sizes !default;
 
 // Offcanvas
 $offcanvas-bg-color: var(--#{$prefix}bg-surface) !default;
-$offcanvas-border-color: var(--#{$prefix}border-color-translucent) !default;
+$offcanvas-border-color: var(--#{$prefix}border-color) !default;
 
 // Placeholder
 $placeholder-opacity-min: .1 !default;

src/scss/layout/_dark.scss

@@ -33,6 +33,7 @@ body:not(.theme-dark) .hide-theme-light {
 
     --#{$prefix}border-color: #{$dark-mode-border-color};
     --#{$prefix}border-color-light: #{$dark-mode-border-color-light};
+    --#{$prefix}border-color-active: #{$dark-mode-border-color-active};
 
     --#{$prefix}btn-color: #{$dark-mode-darken};
 
@@ -87,12 +88,6 @@ body:not(.theme-dark) .hide-theme-light {
     color: inherit;
   }
 
-  .btn-white,
-  .form-file-button {
-    //@include button-variant($dark-mode-lighten, $border-color, $dark-mode-text, rgba($dark, 0), $border-color, $dark-mode-text);
-    background-image: none;
-  }
-
   .form-check-input:not(:checked),
   .form-select,
   .form-file-text,

src/scss/layout/_root.scss

@@ -17,6 +17,7 @@
 
   --#{$prefix}border-color: #{$border-color};
   --#{$prefix}border-color-light: #{$border-color-light};
+  --#{$prefix}border-color-active: #{$border-color-active};
 
   --#{$prefix}icon-color: #{$icon-color};
 

src/scss/mixins/_mixins.scss

@@ -86,6 +86,7 @@
   $active-color: color-contrast($active-background)
 ) {
   --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: transparent;
   --#{$prefix}btn-border-color: transparent;
   --#{$prefix}btn-hover-color: #{$color-hover};
   --#{$prefix}btn-hover-bg: #{$active-background};

src/scss/ui/_buttons.scss

@@ -3,8 +3,11 @@
 //
 .btn {
   --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
   --#{$prefix}btn-color: var(--#{$prefix}body-color);
   --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface);
+  --#{$prefix}btn-hover-border-color: var(--#{$prefix}border-color-active);
   --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
 
   display: inline-flex;
@@ -56,11 +59,6 @@
 //
 // Button color variations
 //
-.btn-white {
-  --#{$prefix}btn-bg: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
-  --#{$prefix}btn-hover-bg: var(--#{$prefix}card-bg-hover, var(--#{$prefix}bg-surface));
-}
-
 @each $color, $value in $theme-colors {
   .btn-#{$color} {
     --#{$prefix}btn-border-color: transparent;
@@ -72,15 +70,22 @@
     --#{$prefix}btn-active-border-color: transparent;
     --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-active-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
-    --#{$prefix}btn-disabled-bg: rgba(var(--#{$prefix}#{$color}-rgb), .5);
+    --#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
     --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
     --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button), var(--#{$prefix}shadow-button-inset);
   }
 
   .btn-outline-#{$color} {
     --#{$prefix}btn-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-bg: transparent;
     --#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
-    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
   }
 }