@tabler/core 1.0.0-beta10 → 1.0.0-beta12

package/src/scss/ui/_avatars.scss

@@ -1,11 +1,11 @@
 .avatar {
-  --#{$variable-prefix}avatar-size: #{$avatar-size};
-  --#{$variable-prefix}avatar-bg: var(--#{$variable-prefix}border-color-light);
+  --#{$prefix}avatar-size: #{$avatar-size};
+  --#{$prefix}avatar-bg: var(--#{$prefix}gray-100);
   position: relative;
-  width: var(--#{$variable-prefix}avatar-size);
-  height: var(--#{$variable-prefix}avatar-size);
-  font-size: calc(var(--#{$variable-prefix}avatar-size) / #{$line-height-base * 2});
-  font-weight: $font-weight-medium;
+  width: var(--#{$prefix}avatar-size);
+  height: var(--#{$prefix}avatar-size);
+  font-size: calc(var(--#{$prefix}avatar-size) / #{$line-height-base * 2});
+  font-weight: var(--#{$prefix}font-weight-medium);
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -14,12 +14,12 @@
   text-transform: uppercase;
   vertical-align: bottom;
   user-select: none;
-  background: var(--#{$variable-prefix}avatar-bg) no-repeat center/cover;
+  background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
   border-radius: $avatar-border-radius;
 
   svg {
-    width: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
-    height: calc(var(--#{$variable-prefix}avatar-size) / #{divide(40, 24)});
+    width: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
+    height: calc(var(--#{$prefix}avatar-size) / #{divide(40, 24)});
   }
 
   .badge {
@@ -41,7 +41,7 @@
 
 @each $avatar-size, $size in $avatar-sizes {
   .avatar-#{$avatar-size} {
-    --#{$variable-prefix}avatar-size: #{$size};
+    --#{$prefix}avatar-size: #{$size};
   }
 
   .avatar-#{$avatar-size} .badge:empty {
@@ -75,7 +75,7 @@
 .avatar-list-stacked {
   .avatar {
     margin-right: -.5rem !important;
-    box-shadow: 0 0 0 2px var(--#{$variable-prefix}card-bg);
+    box-shadow: 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
   }
 }
 
@@ -94,8 +94,8 @@
   }
 
   &:hover {
-    border-color: $primary;
-    color: $primary;
+    border-color: var(--#{$prefix}primary);
+    color: var(--#{$prefix}primary);
     text-decoration: none;
   }
 }
@@ -108,7 +108,7 @@
 
 .page-avatar {
   .page-cover ~ * & {
-    margin-top: calc(calc(-1 * calc(var(--#{$variable-prefix}avatar-size) * .5)) - #{$content-padding-y});
+    margin-top: calc(calc(-1 * calc(var(--#{$prefix}avatar-size) * .5)) - #{$content-padding-y});
     box-shadow: 0 0 0 .25rem $body-bg;
   }
 }

package/src/scss/ui/_badges.scss

@@ -4,7 +4,7 @@
   background: $gray-500;
   overflow: hidden;
   user-select: none;
-  border: 1px solid transparent;
+  border: var(--#{$prefix}border-width) solid transparent;
   min-width: ($badge-padding-y * 2 ) + (divide($badge-font-size, 100%) * 1em);
   font-weight: $headings-font-weight;
   letter-spacing: .04em;
@@ -49,7 +49,7 @@
 // bordered
 .badge-outline {
   background-color: transparent;
-  border: 1px solid currentColor;
+  border: var(--#{$prefix}border-width) solid currentColor;
 }
 
 .badge-pill {

package/src/scss/ui/_breadcrumbs.scss

@@ -23,6 +23,6 @@
 
 @each $name, $symbol in $breadcrumb-variants {
   .breadcrumb-#{$name} {
-    --#{$variable-prefix}breadcrumb-divider: "#{quote($symbol)}";
+    --#{$prefix}breadcrumb-divider: "#{quote($symbol)}";
   }
 }

package/src/scss/ui/_buttons.scss

@@ -1,47 +1,35 @@
+//
+// Button
+//
 .btn {
-  --#{$variable-prefix}btn-color-text-rgb: var(--#{$variable-prefix}body-color-rgb);
+  --#{$prefix}btn-icon-size: #{$icon-size};
+  --#{$prefix}btn-color: var(--#{$prefix}body-color);
+  --#{$prefix}btn-border-color: var(--#{$prefix}border-color);
+  --#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-button);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-color: var(--#{$variable-prefix}border-color);
   white-space: nowrap;
-
-  background-color: var(--#{$variable-prefix}btn-color, var(--#{$variable-prefix}card-bg));
-  color: var(--#{$variable-prefix}btn-color-text);
-
-  &:hover {
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: rgba(var(--#{$variable-prefix}btn-color-text-rgb), #{$border-active-opacity});
-  }
-
-  &:focus:not([disabled]):not(.disabled) {
-    border-color: var(--#{$variable-prefix}btn-color, #{$primary});
-  }
-
-  &:disabled,
-  &.disabled {
-    cursor: not-allowed;
-  }
+  box-shadow: var(--#{$prefix}btn-box-shadow);
 
   .icon {
-    width: $icon-size;
-    height: $icon-size;
-    min-width: $icon-size;
-    margin: 0 .5rem 0 -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    min-width: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
     vertical-align: bottom;
     color: inherit;
   }
 
   .avatar {
-    width: 1.25rem;
-    height: 1.25rem;
-    vertical-align: text-top;
-    margin: 0 .5rem 0 -.25rem;
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
   }
 
   .icon-right {
-    margin: 0 -.25rem 0 .5rem;
+    margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
   }
 
   .badge {
@@ -49,44 +37,11 @@
   }
 }
 
-%btn-color {
-  border-color: $border-color-dark-transparent;
-
-  &:hover {
-    color: var(--#{$variable-prefix}btn-color-text);
-    background: var(--#{$variable-prefix}btn-color-interactive);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
-%btn-outline {
-  background-color: transparent;
-  color: var(--#{$variable-prefix}btn-color);
-  border-color: var(--#{$variable-prefix}btn-color);
-
-  &:hover {
-    background-color: var(--#{$variable-prefix}btn-color);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
-%btn-ghost {
-  background: transparent;
-  color: var(--#{$variable-prefix}btn-color);
-  border-color: transparent;
-
-  &:hover {
-    background-color: var(--#{$variable-prefix}btn-color);
-    color: var(--#{$variable-prefix}btn-color-text);
-    border-color: var(--#{$variable-prefix}btn-color);
-  }
-}
-
 .btn-link {
   color: $link-color;
   background-color: transparent;
   border-color: transparent;
+  box-shadow: none;
 
   .icon {
     color: inherit;
@@ -98,12 +53,59 @@
   }
 }
 
-.btn-lg {
-  svg.icon {
-    stroke-width: 2;
+//
+// 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;
+    --#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-bg: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-hover-border-color: transparent;
+    --#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
+    --#{$prefix}btn-hover-bg: rgba(var(--#{$prefix}#{$color}-rgb), .8);
+    --#{$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-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-border-color: var(--#{$prefix}#{$color});
+    --#{$prefix}btn-active-color: var(--#{$prefix}#{$color});
   }
 }
 
+@each $color, $value in $theme-colors {
+  .btn-ghost-#{$color} {
+    @include button-ghost-variant($value);
+  }
+}
+
+//
+// Button sizes
+//
+.btn-sm, .btn-group-sm > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: .75rem;
+}
+
+.btn-lg, .btn-group-lg > .btn {
+  --#{$prefix}btn-line-height: 1.5;
+  --#{$prefix}btn-icon-size: 2rem;
+}
+
+//
+// Button shapes
+//
 .btn-pill {
   padding-right: 1.5em;
   padding-left: 1.5em;
@@ -114,22 +116,27 @@
   }
 }
 
-.btn-icon {
-  min-width: add($btn-line-height * $btn-font-size + $btn-padding-y * 2, $btn-border-width * 2);
+.btn-square {
+  border-radius: 0;
+}
 
-  &.btn-sm {
-    min-width: add($btn-line-height * $btn-font-size-sm + $btn-padding-y-sm * 2, $btn-border-width * 2);
-  }
+//
+// Icon button
+//
+.btn-icon {
+  min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
+  padding-left: 0;
+  padding-right: 0;
 
   .icon {
-    margin: 0 -1em;
+    margin: calc(-1 * var(--#{$prefix}btn-padding-x));
   }
 }
 
-.btn-square {
-  border-radius: 0;
-}
-
+//
+// Button list
+//
 .btn-list {
   display: flex;
   flex-wrap: wrap;
@@ -141,6 +148,9 @@
   }
 }
 
+//
+// Button floating
+//
 .btn-floating {
   position: fixed;
   z-index: $zindex-fixed;
@@ -149,54 +159,36 @@
   border-radius: $border-radius-pill;
 }
 
+//
+// Button loading
+//
 .btn-loading {
   position: relative;
   color: transparent !important;
   text-shadow: none !important;
   pointer-events: none;
 
+  > * {
+    opacity: 0;
+  }
+
   &:after {
     content: '';
     display: inline-block;
     vertical-align: text-bottom;
-    border: $spinner-border-width-sm solid currentColor;
+    border: $spinner-border-width solid currentColor;
     border-right-color: transparent;
     border-radius: $border-radius-pill;
-    color: $white;
+    color: var(--#{$prefix}btn-color);
     position: absolute;
-    width: 1rem;
-    height: 1rem;
-    left: calc(50% - .5rem);
-    top: calc(50% - .5rem);
+    width: var(--#{$prefix}btn-icon-size);
+    height: var(--#{$prefix}btn-icon-size);
+    left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
+    top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
     animation: spinner-border .75s linear infinite;
   }
 }
 
-//
-// Button color variations
-//
-@each $name, $color in theme-colors() {
-  .btn-#{$name},
-  .btn-outline-#{$name},
-  .btn-ghost-#{$name} {
-    --#{$variable-prefix}btn-color: #{$color};
-    --#{$variable-prefix}btn-color-interactive: #{theme-color-darker($color)};
-    --#{$variable-prefix}btn-color-text: #{color-contrast($color)};
-  }
-
-  .btn-#{$name} {
-    @extend %btn-color;
-  }
-
-  .btn-outline-#{$name} {
-    @extend %btn-outline;
-  }
-
-  .btn-ghost-#{$name} {
-    @extend %btn-ghost;
-  }
-}
-
 //
 // Action button
 //
@@ -209,7 +201,7 @@
   height: 2rem;
   align-items: center;
   justify-content: center;
-  border-radius: $border-radius;
+  border-radius: var(--#{$prefix}border-radius);
 
   &:after {
     content: none;
@@ -227,7 +219,7 @@
   }
 
   &.show {
-    color: $primary;
+    color: var(--#{$prefix}primary);
   }
 
   .icon {

package/src/scss/ui/_calendars.scss

@@ -1,8 +1,8 @@
 .calendar {
   display: block;
   font-size: $font-size-sm;
-  border: 1px solid $border-color;
-  border-radius: $border-radius;
+  border: var(--#{$prefix}border-width) solid $border-color;
+  border-radius: var(--#{$prefix}border-radius);
 }
 
 .calendar-nav {
@@ -52,13 +52,13 @@
     vertical-align: middle;
     cursor: pointer;
     background: 0 0;
-    border: 1px solid transparent;
+    border: var(--#{$prefix}border-width) solid transparent;
     border-radius: $border-radius-pill;
     outline: 0;
     @include transition(background $transition-time, border $transition-time, box-shadow .32s, color $transition-time);
 
     &:hover {
-      color: $primary;
+      color: var(--#{$prefix}primary);
       text-decoration: none;
       background: #fefeff;
       border-color: $border-color;
@@ -66,7 +66,7 @@
   }
 
   .date-today {
-    color: $primary;
+    color: var(--#{$prefix}primary);
     border-color: $border-color;
   }
 }
@@ -81,7 +81,7 @@
     left: 0;
     height: 1.4rem;
     content: "";
-    background: rgba($primary, .1);
+    background: rgba(var(--#{$prefix}primary-rgb), .1);
     transform: translateY(-50%);
   }
 
@@ -89,8 +89,8 @@
   &.range-end {
     .date-item {
       color: $white;
-      background: $primary;
-      border-color: $primary;
+      background: var(--#{$prefix}primary);
+      border-color: var(--#{$prefix}primary);
     }
   }