@react-md/core 1.0.0-next.1 → 1.0.0-next.11

package/dist/avatar/_avatar.scss

@@ -14,6 +14,7 @@ $disable-auto-image: false !default;
 $color: colors.$grey-100 !default;
 $background-color: colors.$grey-700 !default;
 $line-height: map.get(typography.$subtitle-1-styles, line-height) !default;
+$border-color: transparent !default;
 $border-radius: 50% !default;
 $size: 2.5rem !default;
 $font-size: 1.5rem !default;
@@ -44,49 +45,28 @@ $default-colors: (
 
 $colors: $default-colors !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-avatar-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-avatar-color,
-    value: $color,
-  ),
-  border-color: (
-    var: --rmd-avatar-border-color,
-    value: transparent,
-  ),
-  border-radius: (
-    var: --rmd-avatar-border-radius,
-    value: $border-radius,
-  ),
-  size: (
-    var: --rmd-avatar-size,
-    value: $size,
-  ),
-  font-size: (
-    var: --rmd-avatar-font-size,
-    value: $font-size,
-  ),
+$variables: (
+  background-color,
+  color,
+  border-color,
+  border-radius,
+  size,
+  font-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "avatar var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "avatar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "avatar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "avatar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -102,61 +82,74 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-avatar {
-      @if not $disable-icon {
-        @include icon.set-var(color, currentcolor);
-      }
-      @include utils.map-to-styles(typography.$base-font-styles);
-      @include use-var(background-color);
-      @include use-var(border-radius);
-      @include use-var(color);
-      @include use-var(font-size);
-      @include use-var(height, size);
-      @include use-var(width, size);
-
-      align-items: center;
-      border: 1px solid get-var(border-color);
-      display: inline-flex;
-      flex-shrink: 0;
-      justify-content: center;
-      line-height: $line-height;
-      overflow: hidden;
-
-      @if not $disable-icon-size {
-        &--icon {
-          @include set-var(size, $icon-sized-size);
-
-          font-size: $icon-sized-font-size;
-        }
-      }
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(border-color, $border-color);
+    @include set-var(border-radius, $border-radius);
+    @include set-var(size, $size);
+    @include set-var(font-size, $font-size);
+  }
+}
 
-      @if not $disable-image {
-        &__image {
-          height: 100%;
-          width: auto;
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(avatar, $disable-layer) {
+      .rmd-avatar {
+        @if not $disable-icon {
+          @include icon.set-var(color, currentcolor);
+        }
+        @include utils.map-to-styles(typography.$base-font-styles);
+        @include use-var(background-color);
+        @include use-var(border-radius);
+        @include use-var(color);
+        @include use-var(font-size);
+        @include use-var(height, size);
+        @include use-var(width, size);
+
+        align-items: center;
+        border: 1px solid get-var(border-color);
+        display: inline-flex;
+        flex-shrink: 0;
+        justify-content: center;
+        line-height: $line-height;
+        overflow: hidden;
+
+        @if not $disable-icon-size {
+          &--icon {
+            @include set-var(size, $icon-sized-size);
+
+            font-size: $icon-sized-font-size;
+          }
         }
-      }
 
-      @if not $disable-auto-image {
-        img {
-          height: 100%;
-          width: auto;
+        @if not $disable-image {
+          &__image {
+            height: 100%;
+            width: auto;
+          }
         }
-      }
 
-      @each $name, $values in $colors {
-        @if length($values) != 2 {
-          @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
+        @if not $disable-auto-image {
+          img {
+            height: 100%;
+            width: auto;
+          }
         }
 
-        @include custom-color(
-          "&--#{$name}",
-          nth($values, 2),
-          nth($values, 1),
-          true
-        );
+        @each $name, $values in $colors {
+          @if length($values) != 2 {
+            @error 'Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color. "#{$values}"';
+          }
+
+          @include custom-color(
+            "&--#{$name}",
+            nth($values, 2),
+            nth($values, 1),
+            true
+          );
+        }
       }
     }
   }

package/dist/badge/_badge.scss

@@ -12,8 +12,9 @@ $disable-secondary-theme: false !default;
 
 $size: 1.5rem !default;
 $font-size: 0.625rem !default;
-$offset-top: 0 !default;
-$offset-right: 0 !default;
+$offset: 0 !default;
+$offset-top: $offset !default;
+$offset-right: $offset !default;
 $border-radius: 50% !default;
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
@@ -22,84 +23,121 @@ $typography: map.merge(
   )
 ) !default;
 
-$greyscale-background-color: rgba(colors.$black, 0.2) !default;
-$greyscale-color: a11y.contrast-color($greyscale-background-color) !default;
+$light-theme-greyscale-background-color: #ccc !default;
+$light-theme-greyscale-color: a11y.contrast-color(
+  $light-theme-greyscale-background-color
+) !default;
+$dark-theme-greyscale-background-color: colors.$grey-700 !default;
+$dark-theme-greyscale-color: a11y.contrast-color(
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-background-color: theme.get-default-color(
+  $light-theme-greyscale-background-color,
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-color: theme.get-default-color(
+  $light-theme-greyscale-color,
+  $dark-theme-greyscale-color
+) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-badge-size,
-    value: $size,
-  ),
-  offset: (
-    var: --rmd-badge-offset,
-    value: 0,
-  ),
-  offset-top: (
-    var: --rmd-badge-offset-top,
-    value: var(--rmd-badge-offset, $offset-top),
-  ),
-  offset-right: (
-    var: --rmd-badge-offset-right,
-    value: var(--rmd-badge-offset, $offset-right),
-  ),
+$variables: (
+  greyscale-background-color,
+  greyscale-color,
+  size,
+  offset,
+  offset-top,
+  offset-right
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "badge var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "badge");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "badge var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "badge")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
+@mixin use-light-theme {
+  @if not $disable-everything {
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $light-theme-greyscale-background-color
+      );
+    }
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $light-theme-greyscale-color);
+    }
+  }
+}
+
+@mixin use-dark-theme {
   @if not $disable-everything {
-    .rmd-badge {
-      @include utils.map-to-styles($typography);
-      @include use-var(height, size);
-      @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right));
-      @include use-var(top, offset-top);
+    @if $light-theme-greyscale-background-color !=
+      $dark-theme-greyscale-background-color
+    {
+      @include set-var(
+        greyscale-background-color,
+        $dark-theme-greyscale-background-color
+      );
+    }
 
-      align-items: center;
-      border-radius: $border-radius;
-      display: inline-flex;
-      justify-content: center;
-      pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
-      position: absolute;
+    @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+      @include set-var(greyscale-color, $dark-theme-greyscale-color);
+    }
+  }
+}
 
-      @if not $disable-greyscale-theme {
-        &--greyscale {
-          background-color: $greyscale-background-color;
-          color: $greyscale-color;
-        }
-      }
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(greyscale-background-color, $greyscale-background-color);
+    @include set-var(greyscale-color, $greyscale-color);
+    @include set-var(size, $size);
+    @include set-var(offset, $offset);
+    @if $offset != $offset-top {
+      @include set-var(offset-top, $offset-top);
+    }
+    @if $offset != $offset-right {
+      @include set-var(offset-right, $offset-right);
+    }
+  }
+}
 
-      @if not $disable-primary-theme {
-        &--primary {
-          @include theme.theme-use-var(background-color, primary-color);
-          @include theme.theme-use-var(color, on-primary-color);
-        }
-      }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(badge, $disable-layer) {
+      .rmd-badge {
+        @include utils.map-to-styles($typography);
+        @include use-var(height, size);
+        @include use-var(width, size);
+        @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+        @include use-var(top, offset-top, get-var(offset));
+
+        align-items: center;
+        border-radius: $border-radius;
+        display: inline-flex;
+        justify-content: center;
+        pointer-events: none; // badges are _kind_ of presentational and shouldn't trigger mouse events
+        position: absolute;
 
-      @if not $disable-secondary-theme {
-        &--secondary {
-          @include theme.theme-use-var(background-color, secondary-color);
-          @include theme.theme-use-var(color, on-secondary-color);
+        @if not $disable-greyscale-theme {
+          &--greyscale {
+            @include use-var(background-color, greyscale-background-color);
+            @include use-var(color, greyscale-color);
+          }
         }
       }
     }

package/dist/box/_box.scss

@@ -33,41 +33,21 @@ $item-min-size: 8rem !default;
 /// ```
 $grids: () !default;
 
-$var-lookup: (
-  gap: (
-    var: --rmd-box-gap,
-    value: $gap,
-  ),
-  padding: (
-    var: --rmd-box-padding,
-    value: $padding,
-  ),
-  min-size: (
-    var: --rmd-box-item-min-size,
-    value: $item-min-size,
-  ),
-  columns: (
-    var: --rmd-box-columns,
-    value: auto-fit,
-  ),
-);
+$variables: (gap, padding, item-min-size, columns);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "box var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "box");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "box var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "box")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -94,82 +74,93 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    .rmd-box {
-      @include use-var(gap, gap);
-
-      align-items: $default-align-items;
-      display: flex;
+    @include set-var(gap, $gap);
+    @include set-var(padding, $padding);
+    @include set-var(item-min-size, $item-min-size);
+    @include set-var(columns, auto-fit);
+  }
+}
 
-      &--padded {
-        @include use-var(padding);
-      }
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(box, $disable-layer) {
+      .rmd-box {
+        @include use-var(gap, gap);
 
-      &--wrap {
-        flex-wrap: wrap;
-      }
+        align-items: $default-align-items;
+        display: flex;
 
-      &--full-width {
-        width: 100%;
-      }
+        &--padded {
+          @include use-var(padding);
+        }
 
-      @if not $disable-stacked {
-        &--column {
-          flex-direction: column;
+        &--wrap {
+          flex-wrap: wrap;
         }
-      }
 
-      @if not $disable-reversed {
-        &--reverse {
-          flex-direction: row-reverse;
+        &--full-width {
+          width: 100%;
         }
 
         @if not $disable-stacked {
-          &--column-reverse {
-            flex-direction: column-reverse;
+          &--column {
+            flex-direction: column;
           }
         }
-      }
 
-      @each $value in $align-items {
-        &--align-#{$value} {
-          align-items: $value;
-        }
-      }
+        @if not $disable-reversed {
+          &--reverse {
+            flex-direction: row-reverse;
+          }
 
-      @each $value in $justify-content {
-        &--justify-#{utils.str-replace($value, "space-", "")} {
-          justify-content: $value;
+          @if not $disable-stacked {
+            &--column-reverse {
+              flex-direction: column-reverse;
+            }
+          }
         }
-      }
 
-      @if not $disable-grid {
-        &--grid {
-          display: grid;
-          grid-template-columns: repeat(
-            get-var(columns),
-            minmax(get-var(min-size), 1fr)
-          );
+        @each $value in $align-items {
+          &--align-#{$value} {
+            align-items: $value;
+          }
         }
 
-        &--grid-fill {
-          @include set-var(columns, auto-fill);
+        @each $value in $justify-content {
+          &--justify-#{utils.str-replace($value, "space-", "")} {
+            justify-content: $value;
+          }
         }
 
-        @if not $disable-grid-columns {
-          &--grid-columns {
-            @include set-var(min-size, 0);
+        @if not $disable-grid {
+          &--grid {
+            display: grid;
+            grid-template-columns: repeat(
+              get-var(columns),
+              minmax(get-var(item-min-size), 1fr)
+            );
+          }
+
+          &--grid-fill {
+            @include set-var(columns, auto-fill);
           }
-        }
 
-        @each $name, $values in $grids {
-          @include custom-grid-class(
-            "&--#{$name}",
-            $min: map.get($values, min),
-            $gap: map.get($values, gap),
-            $padding: map.get($values, padding)
-          );
+          @if not $disable-grid-columns {
+            &--grid-columns {
+              @include set-var(item-min-size, 0);
+            }
+          }
+
+          @each $name, $values in $grids {
+            @include custom-grid-class(
+              "&--#{$name}",
+              $min: map.get($values, min),
+              $gap: map.get($values, gap),
+              $padding: map.get($values, padding)
+            );
+          }
         }
       }
     }

package/dist/button/TooltippedButton.d.ts

@@ -0,0 +1,62 @@
+import { type ReactNode } from "react";
+import { type TooltipProps } from "../tooltip/Tooltip.js";
+import { type ProvidedTooltipProps, type TooltipOptions, type TooltippedElementEventHandlers } from "../tooltip/useTooltip.js";
+import { type ButtonProps } from "./Button.js";
+import { type ButtonType } from "./buttonStyles.js";
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TooltippedButtonProps extends ButtonProps {
+    /** @defaultValue `"icon"` */
+    buttonType?: ButtonType;
+    /**
+     * The tooltip children to render. When this is falsey, the tooltip event
+     * listeners will not be enabled and the tooltip will never display.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Any additional props to pass to the `Tooltip` component (normally styling
+     * props).
+     */
+    tooltipProps?: Omit<TooltipProps, keyof ProvidedTooltipProps>;
+    /**
+     * Any additional tooltip options to pass to {@link useTooltip}. The most
+     * common options would be:
+     *
+     * ```ts
+     * tooltipOptions={{
+     *   overflowOnly: true,
+     *
+     *   // whatever values you want for these
+     *   hoverTimeout: 0,
+     *   leaveTimeout: 150,
+     *   defaultPosition: "left",
+     * }}
+     * ```
+     */
+    tooltipOptions?: Omit<TooltipOptions, keyof TooltippedElementEventHandlers>;
+}
+/**
+ * **Client Component**
+ *
+ * A simple wrapper around the `Button` and `Tooltip` components to dynamically
+ * add tooltips to buttons. The `buttonType` will default to `icon` instead of
+ * `text`.
+ *
+ * @example
+ * ```tsx
+ * import { TooltippedButton } from "@react-md/core";
+ * import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
+ *
+ * export default function Example(): ReactElement {
+ *   return (
+ *     <TooltippedButton tooltip="I am a tooltip!" aria-label="Favorite">
+ *       <FavoriteIcon />
+ *     </TooltippedButton>
+ *   );
+ * }
+ * ```
+ *
+ * @remarks \@since 6.0.0
+ */
+export declare const TooltippedButton: import("react").ForwardRefExoticComponent<TooltippedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;