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

package/src/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -44,37 +46,21 @@ $content-padding-bottom: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-card-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-card-color,
-    value: $color,
-  ),
-  secondary-color: (
-    var: --rmd-card-secondary-color,
-    value: null,
-  ),
-);
+$variables: (background-color, color, secondary-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "card 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, "card");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "card var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "card")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -93,6 +79,13 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -108,14 +101,12 @@ $var-lookup: (
       max-width: 100%;
 
       @if not $disable-raisable {
-        @include utils.mouse-only {
-          &--raisable {
-            @include box-shadows.elevation-transition(
-              $raisable-start-elevation,
-              $raisable-end-elevation,
-              "&:hover"
-            );
-          }
+        &--raisable {
+          @include box-shadows.elevation-transition(
+            $raisable-start-elevation,
+            $raisable-end-elevation,
+            "&:hover"
+          );
         }
       }
 
@@ -138,6 +129,12 @@ $var-lookup: (
         }
       }
 
+      @if not $disable-clickable {
+        &--clickable {
+          @include interaction.surface;
+        }
+      }
+
       &__header {
         align-items: center;
         column-gap: $header-spacing;
@@ -149,7 +146,7 @@ $var-lookup: (
         @include typography.text-overflow;
 
         flex: 1 1 auto;
-        min-width: 1;
+        min-width: 0;
       }
 
       // does not require custom styles

package/src/card/styles.ts

@@ -31,24 +31,29 @@ export interface CardClassNameOptions {
    * @defaultValue `false`
    */
   fullWidth?: boolean;
+
+  /**
+   * Set this to `true` if the card should gain the pointer cursor while
+   * hovering and other interaction styles and not using the `ClickableCard`
+   * component.
+   *
+   * @defaultValue `false`
+   */
+  interactable?: boolean;
 }
 
 /**
  * @remarks \@since 6.0.0
  */
 export function card(options: CardClassNameOptions = {}): string {
-  const {
-    className,
-    bordered = false,
-    raisable = false,
-    fullWidth = false,
-  } = options;
+  const { className, bordered, raisable, fullWidth, interactable } = options;
 
   return cnb(
     cardStyles({
       bordered,
       shadowed: !bordered,
       raisable: !bordered && raisable,
+      interactable,
       "full-width": fullWidth,
     }),
     className
@@ -125,7 +130,11 @@ export function cardSubtitle(
 ): string {
   const { className } = options;
 
-  return cnb(cardStyles("subtitle"), className);
+  return cnb(
+    cardStyles("subtitle"),
+    cssUtils({ textColor: "text-secondary" }),
+    className
+  );
 }
 
 /** @remarks \@since 6.0.0 */
@@ -162,9 +171,9 @@ export interface CardContentClassNameOptions {
 export function cardContent(options: CardContentClassNameOptions = {}): string {
   const {
     className,
-    disablePadding = false,
-    disableSecondaryColor = false,
-    disableLastChildPadding = false,
+    disablePadding,
+    disableSecondaryColor,
+    disableLastChildPadding,
   } = options;
 
   return cnb(

package/src/chip/_chip.scss

@@ -111,61 +111,31 @@ $outline-text-color: theme.get-default-color(
 $outline-raisable-box-shadow-z-value: 8 !default;
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  solid-background-color: (
-    var: --rmd-chip-solid-background-color,
-    value: $solid-background-color,
-  ),
-  solid-disabled-background-color: (
-    var: --rmd-chip-solid-disabled-background-color,
-    value: $solid-disabled-background-color,
-  ),
-  solid-color: (
-    var: --rmd-chip-solid-color,
-    value: $solid-color,
-  ),
-  theme-background-color: (
-    var: --rmd-chip-theme-background-color,
-    value: $theme-background-color,
-  ),
-  theme-color: (
-    var: --rmd-chip-theme-color,
-    value: $theme-color,
-  ),
-  outline-color: (
-    var: --rmd-chip-outline-color,
-    value: $outline-color,
-  ),
-  outline-width: (
-    var: --rmd-chip-outline-width,
-    value: $outline-width,
-  ),
-  outline-background-color: (
-    var: --rmd-chip-outline-background-color,
-    value: $outline-background-color,
-  ),
-  outline-text-color: (
-    var: --rmd-chip-outline-text-color,
-    value: $outline-text-color,
-  ),
+$variables: (
+  solid-background-color,
+  solid-disabled-background-color,
+  solid-color,
+  theme-background-color,
+  theme-color,
+  outline-color,
+  outline-width,
+  outline-background-color,
+  outline-text-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "chip 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, "chip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "chip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "chip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -202,6 +172,23 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(solid-background-color, $solid-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-disabled-background-color
+    );
+    @include set-var(solid-color, $solid-color);
+    @include set-var(theme-background-color, $theme-background-color);
+    @include set-var(theme-color, $theme-color);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-background-color, $outline-background-color);
+    @include set-var(outline-text-color, $outline-text-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {

package/src/dialog/_dialog.scss

@@ -7,6 +7,10 @@
 
 $disable-everything: false !default;
 $disable-fixed: false !default;
+$disable-header: false !default;
+$disable-title: false !default;
+$disable-content: false !default;
+$disable-footer: false !default;
 $disable-focus-outline: false !default;
 $disable-footer-flex-vertical: false !default;
 $disable-footer-flex-start: false !default;
@@ -16,8 +20,16 @@ $disable-footer-flex-end: false !default;
 $elevation: 16 !default;
 $z-index: utils.$temporary-element-z-index !default;
 
-$background-color: theme.theme-get-var(surface-color) !default;
-$color: theme.theme-get-var(text-primary-color) !default;
+$background-color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(surface-color),
+  null
+) !default;
+$color: if(
+  theme.$disable-dark-elevation,
+  theme.theme-get-var(text-primary-color),
+  null
+) !default;
 
 $min-width: 17.5rem !default;
 $horizontal-margin: 2.5rem !default;
@@ -36,71 +48,58 @@ $content-padding: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-dialog-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-dialog-color,
-    value: $color,
-  ),
-  min-width: (
-    var: --rmd-dialog-min-width,
-    value: $min-width,
-  ),
-  horizontal-margin: (
-    var: --rmd-dialog-h-margin,
-    value: $horizontal-margin,
-  ),
-  vertical-margin: (
-    var: --rmd-dialog-v-margin,
-    value: $vertical-margin,
-  ),
-  z-index: (
-    var: --rmd-dialog-z-index,
-    value: $z-index,
-  ),
-  header-padding: (
-    var: --rmd-dialog-header-padding,
-    value: $header-padding,
-  ),
-  header-padding-bottom: (
-    var: --rmd-dialog-header-padding-bottom,
-    value: $header-padding-bottom,
-  ),
-  content-padding: (
-    var: --rmd-dialog-content-padding,
-    value: $content-padding,
-  ),
-  footer-padding: (
-    var: --rmd-dialog-footer-padding,
-    value: $footer-padding,
-  ),
+$variables: (
+  min-width,
+  horizontal-margin,
+  vertical-margin,
+  z-index,
+  header-padding,
+  header-padding-bottom,
+  content-padding,
+  footer-padding
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "dialog var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+  $var: utils.get-var-name($variables, $name, "dialog");
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "dialog var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "dialog")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(min-width, $min-width);
+    @include set-var(horizontal-margin, $horizontal-margin);
+    @include set-var(vertical-margin, $vertical-margin);
+    @include set-var(z-index, $z-index);
+
+    @if not $disable-header {
+      @include set-var(header-padding, $header-padding);
+      @include set-var(header-padding-bottom, $header-padding-bottom);
+    }
+
+    @if not $disable-content {
+      @include set-var(content-padding, $content-padding);
+    }
+    @if not $disable-footer {
+      @include set-var(footer-padding, $footer-padding);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-dialog-container {
@@ -120,9 +119,9 @@ $var-lookup: (
 
     .rmd-dialog {
       @include box-shadows.box-shadow($elevation);
-      @include use-var(background-color);
-      @include use-var(color);
 
+      background-color: $background-color;
+      color: $color;
       display: flex;
       flex-direction: column;
       max-height: 100%;
@@ -146,13 +145,21 @@ $var-lookup: (
       }
 
       @if not $disable-focus-outline {
-        @include utils.keyboard-only {
-          &--outline:focus {
-            // Note: Do not use the `interaction-outline` mixin +
-            // `interaction.set-var(interaction.$focus-color)` like normal focus
-            // elements since it'll make all focusable children update with the
-            // outline color as well
-            outline: interaction.get-var(focus-color) solid
+        // Note: Do not use the `interaction-outline` mixin +
+        // `interaction.set-var(interaction.$focus-color)` like normal focus
+        // elements since it'll make all focusable children update with the
+        // outline color as well
+        @if utils.$disable-focus-visible {
+          @include utils.keyboard-only {
+            &--outline:focus {
+              outline: interaction.get-var(focus-color) solid
+                interaction.get-var(focus-width);
+            }
+          }
+        } @else {
+          &--outline:focus-visible {
+            outline: interaction.get-var(focus-color)
+              solid
               interaction.get-var(focus-width);
           }
         }
@@ -188,66 +195,74 @@ $var-lookup: (
         }
       }
 
-      &__header {
-        @include use-var(padding, header-padding);
-        @include use-var(padding-bottom, header-padding-bottom);
+      @if not $disable-header {
+        &__header {
+          @include use-var(padding, header-padding);
+          @include use-var(padding-bottom, header-padding-bottom);
 
-        align-items: center;
-        display: flex;
-        flex: 0 0 auto;
+          align-items: center;
+          display: flex;
+          flex: 0 0 auto;
+        }
       }
 
-      &__title {
-        // this makes it so it's easy to add a close button after the title
-        flex: 1 1 auto;
+      @if not $disable-title {
+        &__title {
+          // this makes it so it's easy to add a close button after the title
+          flex: 1 1 auto;
+        }
       }
 
-      &__content {
-        flex: 1 1 auto;
-        overflow: auto;
+      @if not $disable-content {
+        &__content {
+          flex: 1 1 auto;
+          overflow: auto;
 
-        &--padded {
-          @include use-var(padding, content-padding);
+          &--padded {
+            @include use-var(padding, content-padding);
+          }
         }
       }
 
-      &__footer {
-        @include use-var(padding, footer-padding);
-
-        flex: 0 0 auto;
-
-        @if not
-          $disable-footer-flex-vertical or not
-          $disable-footer-flex-start or not
-          $disable-footer-space-between or not
-          $disable-footer-flex-end
-        {
-          &--flex {
-            display: flex;
+      @if not $disable-footer {
+        &__footer {
+          @include use-var(padding, footer-padding);
+
+          flex: 0 0 auto;
+
+          @if not
+            $disable-footer-flex-vertical or not
+            $disable-footer-flex-start or not
+            $disable-footer-space-between or not
+            $disable-footer-flex-end
+          {
+            &--flex {
+              display: flex;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-vertical {
-          &--flex-v {
-            flex-direction: column;
+          @if not $disable-footer-flex-vertical {
+            &--flex-v {
+              flex-direction: column;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-start {
-          &--start {
-            justify-content: flex-start;
+          @if not $disable-footer-flex-start {
+            &--start {
+              justify-content: flex-start;
+            }
           }
-        }
 
-        @if not $disable-footer-space-between {
-          &--between {
-            justify-content: space-between;
+          @if not $disable-footer-space-between {
+            &--between {
+              justify-content: space-between;
+            }
           }
-        }
 
-        @if not $disable-footer-flex-end {
-          &--end {
-            justify-content: flex-end;
+          @if not $disable-footer-flex-end {
+            &--end {
+              justify-content: flex-end;
+            }
           }
         }
       }

package/src/divider/Divider.tsx

@@ -9,7 +9,6 @@ declare module "react" {
     "--rmd-divider-spacing"?: string | number;
     "--rmd-divider-vertical-spacing"?: string | number;
     "--rmd-divider-inset"?: string | number;
-    "--rmd-divider-width"?: string | number;
     "--rmd-divider-max-size"?: string | number;
   }
 }