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

package/src/app-bar/_app-bar.scss

@@ -60,37 +60,21 @@ $vertical-padding: 0 !default;
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-app-bar-height,
-    value: $height,
-  ),
-  surface-background-color: (
-    var: --rmd-app-bar-surface-background-color,
-    value: $surface-background-color,
-  ),
-  surface-color: (
-    var: --rmd-app-bar-surface-color,
-    value: $surface-color,
-  ),
-);
+$variables: (height, surface-background-color, surface-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "app-bar 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, "app-bar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "app-bar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -121,6 +105,14 @@ $var-lookup: (
   @include set-var(height, $dense-height);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(height, $height);
+    @include set-var(surface-background-color, $surface-background-color);
+    @include set-var(surface-color, $surface-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {

package/src/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,6 +82,17 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @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);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-avatar {

package/src/badge/_badge.scss

@@ -22,50 +22,91 @@ $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 use-light-theme {
+  @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 $light-theme-greyscale-background-color !=
+    $dark-theme-greyscale-background-color
+  {
+    @include set-var(
+      greyscale-background-color,
+      $dark-theme-greyscale-background-color
+    );
+  }
+
+  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+    @include set-var(greyscale-color, $dark-theme-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, 0);
+    @include set-var(offset-top, get-var(offset));
+    @include set-var(offset-right, get-var(offset));
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-badge {
@@ -84,22 +125,8 @@ $var-lookup: (
 
       @if not $disable-greyscale-theme {
         &--greyscale {
-          background-color: $greyscale-background-color;
-          color: $greyscale-color;
-        }
-      }
-
-      @if not $disable-primary-theme {
-        &--primary {
-          @include theme.theme-use-var(background-color, primary-color);
-          @include theme.theme-use-var(color, on-primary-color);
-        }
-      }
-
-      @if not $disable-secondary-theme {
-        &--secondary {
-          @include theme.theme-use-var(background-color, secondary-color);
-          @include theme.theme-use-var(color, on-secondary-color);
+          @include use-var(background-color, greyscale-background-color);
+          @include use-var(color, greyscale-color);
         }
       }
     }

package/src/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,6 +74,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @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);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-box {
@@ -149,7 +138,7 @@ $var-lookup: (
           display: grid;
           grid-template-columns: repeat(
             get-var(columns),
-            minmax(get-var(min-size), 1fr)
+            minmax(get-var(item-min-size), 1fr)
           );
         }
 
@@ -159,7 +148,7 @@ $var-lookup: (
 
         @if not $disable-grid-columns {
           &--grid-columns {
-            @include set-var(min-size, 0);
+            @include set-var(item-min-size, 0);
           }
         }
 

package/src/button/_button.scss

@@ -72,77 +72,35 @@ $floating-positions: (
   ),
 ) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-button-background-color,
-    value: transparent,
-  ),
-  color: (
-    var: --rmd-button-color,
-    value: null,
-  ),
-  border-radius: (
-    var: --rmd-button-border-radius,
-    value: null,
-  ),
-  contained-background-color: (
-    var: --rmd-button-contained-background-color,
-    value: $clear-contained-background-color,
-  ),
-  contained-color: (
-    var: --rmd-button-contained-color,
-    value: $clear-contained-color,
-  ),
-  text-horizontal-padding: (
-    var: --rmd-button-text-horizontal-padding,
-    value: $text-horizontal-padding,
-  ),
-  text-vertical-padding: (
-    var: --rmd-button-text-vertical-padding,
-    value: $text-vertical-padding,
-  ),
-  text-min-height: (
-    var: --rmd-button-text-min-height,
-    value: $text-min-height,
-  ),
-  text-min-width: (
-    var: --rmd-button-text-min-width,
-    value: $text-min-width,
-  ),
-  icon-size: (
-    var: --rmd-button-icon-size,
-    value: $icon-size,
-  ),
-  icon-font-size: (
-    var: --rmd-button-icon-font-size,
-    value: $icon-font-size,
-  ),
-  icon-border-radius: (
-    var: --rmd-button-icon-radius,
-    value: $icon-border-radius,
-  ),
-  fab-offset: (
-    var: --rmd-fab-offset,
-    value: utils.scrollbar-size(),
-  ),
+$variables: (
+  background-color,
+  color,
+  border-radius,
+  contained-background-color,
+  contained-color,
+  text-horizontal-padding,
+  text-vertical-padding,
+  text-min-height,
+  text-min-width,
+  icon-size,
+  icon-font-size,
+  icon-border-radius,
+  fab-offset
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "button 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, "button");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "button var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "button")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -176,6 +134,36 @@ $var-lookup: (
   padding: get-var(text-vertical-padding) get-var(text-horizontal-padding);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, transparent);
+    @if not $disable-contained {
+      @include set-var(
+        contained-background-color,
+        $clear-contained-background-color
+      );
+      @include set-var(contained-color, $clear-contained-color);
+    }
+
+    @if not $disable-text {
+      @include set-var(text-horizontal-padding, $text-horizontal-padding);
+      @include set-var(text-vertical-padding, $text-vertical-padding);
+      @include set-var(text-min-height, $text-min-height);
+      @include set-var(text-min-width, $text-min-width);
+    }
+
+    @if not $disable-icon {
+      @include set-var(icon-size, $icon-size);
+      @include set-var(icon-font-size, $icon-font-size);
+      @include set-var(icon-border-radius, $icon-border-radius);
+    }
+
+    @if not $disable-floating {
+      @include set-var(fab-offset, utils.scrollbar-size());
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-button {

package/src/card/_card.scss

@@ -44,37 +44,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 +77,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 {

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 {