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

package/src/theme/_theme.scss

@@ -129,96 +129,34 @@ $_validated_color_scheme: utils.validate(
   "$color-scheme"
 );
 
-$theme-var-lookup: (
-  background-color: (
-    var: --rmd-background-color,
-    value: $background-color,
-  ),
-  on-background-color: (
-    var: --rmd-on-background-color,
-    value: null,
-  ),
-  surface-color: (
-    var: --rmd-surface-color,
-    value: $surface-color,
-  ),
-  primary-color: (
-    var: --rmd-primary-color,
-    value: $primary-color,
-  ),
-  on-primary-color: (
-    var: --rmd-on-primary-color,
-    value: $on-primary-color,
-  ),
-  secondary-color: (
-    var: --rmd-secondary-color,
-    value: $secondary-color,
-  ),
-  on-secondary-color: (
-    var: --rmd-on-secondary-color,
-    value: $on-secondary-color,
-  ),
-  warning-color: (
-    var: --rmd-warning-color,
-    value: $warning-color,
-  ),
-  on-warning-color: (
-    var: --rmd-on-warning-color,
-    value: $on-warning-color,
-  ),
-  error-color: (
-    var: --rmd-error-color,
-    value: $error-color,
-  ),
-  on-error-color: (
-    var: --rmd-on-error-color,
-    value: $on-error-color,
-  ),
-  success-color: (
-    var: --rmd-success-color,
-    value: $success-color,
-  ),
-  on-success-color: (
-    var: --rmd-on-success-color,
-    value: $on-success-color,
-  ),
-  text-primary-color: (
-    var: --rmd-text-primary-color,
-    value: $text-primary-color,
-  ),
-  text-secondary-color: (
-    var: --rmd-text-secondary-color,
-    value: $text-secondary-color,
-  ),
-  text-hint-color: (
-    var: --rmd-text-hint-color,
-    value: $text-hint-color,
-  ),
-  text-disabled-color: (
-    var: --rmd-text-disabled-color,
-    value: $text-disabled-color,
-  ),
-  outline-width: (
-    var: --rmd-outline-width,
-    value: $outline-width,
-  ),
-  outline-color: (
-    var: --rmd-outline-color,
-    value: $outline-color,
-  ),
-  outline-grey-color: (
-    var: --rmd-outline-grey-color,
-    value: $outline-grey-color,
-  ),
+$theme-variables: (
+  background-color,
+  on-background-color,
+  surface-color,
+  primary-color,
+  on-primary-color,
+  secondary-color,
+  on-secondary-color,
+  warning-color,
+  on-warning-color,
+  success-color,
+  on-success-color,
+  error-color,
+  on-error-color,
+  text-primary-color,
+  text-secondary-color,
+  text-hint-color,
+  text-disabled-color,
+  outline-width,
+  outline-color,
+  outline-grey-color
 );
 
 @function theme-get-var($name, $fallback: null) {
-  $found: utils.validate($theme-var-lookup, $name, "theme var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+  $var: utils.get-var-name($theme-variables, $name, "theme");
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
@@ -237,9 +175,9 @@ $theme-var-lookup: (
 }
 
 @mixin theme-set-var($name, $value-or-theme-name) {
-  $var: map.get(utils.validate($theme-var-lookup, $name, "theme var"), var);
+  $var: utils.get-var-name($theme-variables, $name, "theme");
   $value: $value-or-theme-name;
-  @if map.has-key($theme-var-lookup, $value-or-theme-name) {
+  @if list.index($theme-variables, $value-or-theme-name) {
     $name: $value-or-theme-name;
     $value: theme-get-var($name);
   }
@@ -291,7 +229,7 @@ $theme-var-lookup: (
   }
 }
 
-@mixin colors {
+@mixin theme-variables {
   @include theme-set-var(background-color, $background-color);
   @if $disable-dark-elevation {
     @include theme-set-var(surface-color, $surface-color);
@@ -317,6 +255,10 @@ $theme-var-lookup: (
       @include set-dark-elevation-color($z-value, $background-color);
     }
   }
+
+  @include theme-set-var(outline-width, $outline-width);
+  @include theme-set-var(outline-color, $outline-color);
+  @include theme-set-var(outline-grey-color, $outline-grey-color);
 }
 
 @mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {

package/src/tooltip/_tooltip.scss

@@ -45,45 +45,36 @@ $leave-duration: transition.$linear-duration !default;
 $leave-timing-function: transition.$acceleration-timing-function !default;
 $transition-distance: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-tooltip-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-tooltip-color,
-    value: $color,
-  ),
-  spacing: (
-    // this is only added so you can safely do:
-    // @include react-md.tooltip-set-var(spacing, $custom-spacing);
-    var: --rmd-tooltip-spacing,
-    value: $spacing,
-  ),
-);
+$variables: (background-color, color, spacing);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tooltip 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, "tooltip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tooltip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tooltip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+
+    // do not include spacing
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-tooltip {

package/src/transition/_transition.scss

@@ -64,52 +64,28 @@ $max-width-transition-duration: $linear-duration !default;
 $max-width-transition-timing-function: $linear-timing-function !default;
 $max-width-transition-default: 100% !default;
 
-$transition-var-lookup: (
-  skeleton-placeholder-background-color: (
-    var: --rmd-skeleton-placeholder-background-color,
-    value: $skeleton-placeholder-background-color,
-  ),
-  skeleton-placeholder-height: (
-    var: --rmd-skeleton-placeholder-height,
-    value: $skeleton-placeholder-height,
-  ),
-  skeleton-placeholder-width: (
-    var: --rmd-skeleton-placeholder-width,
-    value: null,
-  ),
-  slide-duration: (
-    var: --rmd-slide-duration,
-    value: $slide-duration,
-  ),
-  max-width: (
-    var: --rmd-max-width,
-    value: $max-width-transition-default,
-  ),
-  max-width-gap: (
-    var: --rmd-max-width-gap,
-    value: 0,
-  ),
+$transition-variables: (
+  skeleton-placeholder-background-color,
+  skeleton-placeholder-height,
+  skeleton-placeholder-width,
+  slide-duration,
+  max-width,
+  max-width-gap
 );
 
 @function transition-get-var($name, $fallback: null) {
-  $found: utils.validate($transition-var-lookup, $name, "transition 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($transition-variables, $name, "transition");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin transition-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($transition-var-lookup, $name, "transition var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($transition-variables, $name, "transition")}: #{$value};
+  }
 }
 
 @mixin transition-use-var($property, $name: $property, $fallback: null) {
@@ -301,6 +277,31 @@ $transition-var-lookup: (
   }
 }
 
+@mixin transition-variables {
+  @if not $disable-skeleton-placeholder {
+    @include transition-set-var(
+      skeleton-placeholder-background-color,
+      $skeleton-placeholder-background-color
+    );
+    @include transition-set-var(
+      skeleton-placeholder-height,
+      $skeleton-placeholder-height
+    );
+  }
+
+  @if not $disable-slide-transition {
+    @include transition-set-var(slide-duration, $slide-duration);
+  }
+
+  @if not $disable-max-width-transition {
+    @include transition-set-var(max-width, $max-width-transition-default);
+
+    @if not $disable-max-width-transition-gap {
+      @include transition-set-var(max-width-gap, 0);
+    }
+  }
+}
+
 @mixin transition-styles {
   @if not $disable-collapse-transition {
     @include collapse-transition;

package/src/tree/_tree.scss

@@ -6,6 +6,7 @@
 @use "../typography/typography";
 @use "../interaction/interaction";
 
+$disable-everything: false !default;
 $disable-expander-left: false !default;
 $disable-expander-left-as-media: false !default;
 $disable-expander-left-as-media-offset: false !default;
@@ -22,153 +23,145 @@ $selected-styles: (
   font-weight: typography.$font-weight-bold,
 ) !default;
 
-$var-lookup: (
-  depth: (
-    var: --rmd-tree-depth,
-    value: -1,
-  ),
-  item-padding: (
-    var: --rmd-tree-item-padding,
-    value: 0,
-  ),
-  padding-base: (
-    var: --rmd-tree-item-padding-base,
-    value: $padding-base,
-  ),
-  padding-incrementor: (
-    var: --rmd-tree-item-padding-incrementor,
-    value: $padding-incrementor,
-  ),
-);
+$variables: (depth, item-padding, item-padding-base, item-padding-incrementor);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tree 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, "tree");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tree var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tree")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
-@mixin styles {
-  .rmd-tree {
-    display: block;
-    height: 100%;
-    outline-style: none;
-    overflow: auto;
-    // this is mostly for firefox. moving the mouse even 1px while clicking will
-    // select the current item and all items to the tree root
-    user-select: none;
-    width: 100%;
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(depth, -1);
+    @include set-var(item-padding, 0);
+    @include set-var(item-padding-base, $padding-base);
+    @include set-var(item-padding-incrementor, $padding-incrementor);
   }
+}
 
-  .rmd-tree-item {
-    @include icon.set-var(rotate-from, $expander-right-from);
-    @include icon.set-var(rotate-to, $expander-right-to);
-    @include set-var(
-      item-padding,
-      calc(
-        get-var(depth) * get-var(padding-incrementor) + get-var(padding-base)
-      )
-    );
-
-    list-style: none;
-
-    @if not $disable-expander-left {
-      &--expander-left {
-        @include icon.set-var(rotate-from, $expander-left-from);
-        @include icon.set-var(rotate-to, $expander-left-to);
-      }
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-tree {
+      display: block;
+      height: 100%;
+      outline-style: none;
+      overflow: auto;
+      // this is mostly for firefox. moving the mouse even 1px while clicking will
+      // select the current item and all items to the tree root
+      user-select: none;
+      width: 100%;
     }
 
-    &__content {
-      &--disabled {
-        cursor: auto;
-
-        &:hover::before {
-          @include interaction.set-var(background-color, transparent);
+    .rmd-tree-item {
+      @include icon.set-var(rotate-from, $expander-right-from);
+      @include icon.set-var(rotate-to, $expander-right-to);
+      @include set-var(
+        item-padding,
+        calc(
+          get-var(depth) * get-var(item-padding-incrementor) +
+            get-var(item-padding-base)
+        )
+      );
+
+      list-style: none;
+
+      @if not $disable-expander-left {
+        &--expander-left {
+          @include icon.set-var(rotate-from, $expander-left-from);
+          @include icon.set-var(rotate-to, $expander-left-to);
         }
       }
 
-      &--link {
-        color: inherit;
-        text-decoration: none;
-      }
+      &__content {
+        &--disabled {
+          cursor: auto;
 
-      &--padded {
-        @include utils.auto-rtl(
-          padding-left,
-          get-var(item-padding),
-          list.get-var(item-horizontal-padding)
-        );
-      }
+          &:hover::before {
+            @include interaction.set-var(background-color, transparent);
+          }
+        }
+
+        &--link {
+          color: inherit;
+          text-decoration: none;
+        }
+
+        &--padded {
+          @include utils.auto-rtl(
+            padding-left,
+            get-var(item-padding),
+            list.get-var(item-horizontal-padding)
+          );
+        }
 
-      &--focused::before {
-        .rmd-tree:focus-within & {
-          @include utils.keyboard-only {
-            @include interaction.focus-styles;
+        &--focused::before {
+          .rmd-tree:focus-within & {
+            @include utils.keyboard-only {
+              @include interaction.focus-styles;
+            }
           }
         }
-      }
 
-      @if $selected-styles {
-        &--selected {
-          @if not $disable-selected-background-color {
-            @include interaction.set-var(
-              background-color,
-              interaction.get-var(selected-background-color)
-            );
-
-            @include utils.touch-only {
-              &:hover::before {
-                @include interaction.set-var(
-                  background-color,
-                  interaction.get-var(selected-background-color)
-                );
+        @if $selected-styles {
+          &--selected {
+            @if not $disable-selected-background-color {
+              @include interaction.set-var(
+                background-color,
+                interaction.get-var(selected-background-color)
+              );
+
+              @include utils.touch-only {
+                &:hover::before {
+                  @include interaction.set-var(
+                    background-color,
+                    interaction.get-var(selected-background-color)
+                  );
+                }
               }
             }
+            @include utils.map-to-styles($selected-styles);
           }
-          @include utils.map-to-styles($selected-styles);
         }
       }
-    }
 
-    @if not $disable-expander-left-as-media {
-      &__media {
-        align-items: center;
-        display: flex;
-        justify-content: space-between;
+      @if not $disable-expander-left-as-media {
+        &__media {
+          align-items: center;
+          display: flex;
+          justify-content: space-between;
 
-        @if not $disable-expander-left-as-media-offset {
-          &--single {
-            justify-content: flex-end;
+          @if not $disable-expander-left-as-media-offset {
+            &--single {
+              justify-content: flex-end;
+            }
           }
         }
       }
     }
-  }
 
-  .rmd-tree-group {
-    background-color: inherit;
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
+    .rmd-tree-group {
+      background-color: inherit;
+      color: inherit;
+      font-size: inherit;
+      line-height: inherit;
 
-    // remove the list padding to make it more condensed
-    padding-bottom: 0;
-    padding-top: 0;
+      // remove the list padding to make it more condensed
+      padding-bottom: 0;
+      padding-top: 0;
+    }
   }
 }

package/src/typography/_typography.scss

@@ -222,36 +222,21 @@ $button-styles: map.merge(
 $text-container-padding: 1rem !default;
 $text-line-length: 65ch !default;
 
-$typography-var-lookup: (
-  line-length: (
-    var: --rmd-line-length,
-    value: $text-line-length,
-  ),
-  text-container-padding: (
-    var: --rmd-text-container-padding,
-    value: $text-container-padding,
-  ),
-);
+$typography-variables: (line-length, text-container-padding);
 
 @function typography-get-var($name, $fallback: null) {
-  $found: utils.validate($typography-var-lookup, $name, "typography 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($typography-variables, $name, "typography");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin typography-set-var($name, $value) {
-  $var: map.get(
-    utils.validate($typography-var-lookup, $name, "typography var"),
-    var
-  );
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($typography-variables, $name, "typography")}: #{$value};
+  }
 }
 
 @mixin typography-use-var($property, $name: $property, $fallback: null) {
@@ -339,6 +324,16 @@ $typography-var-lookup: (
   display: -webkit-box;
 }
 
+@mixin typography-variables {
+  @if not $disable-text-container {
+    @include typography-set-var(line-length, $text-line-length);
+    @include typography-set-var(
+      text-container-padding,
+      $text-container-padding
+    );
+  }
+}
+
 @mixin typography-styles {
   @include typography-text-container-styles;
   @include typography-base-styles;