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

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;
@@ -36,71 +40,61 @@ $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: (
+  background-color,
+  color,
+  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));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "dialog");
+  @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(background-color, $background-color);
+    @include set-var(color, $color);
+    @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 {
@@ -188,66 +182,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;
   }
 }

package/src/divider/_divider.scss

@@ -20,57 +20,29 @@ $dark-theme-color: rgba(colors.$white, 0.12) !default;
 
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-divider-size,
-    value: $size,
-  ),
-  vertical-size: (
-    var: --rmd-divider-vertical-size,
-    value: $vertical-size,
-  ),
-  color: (
-    var: --rmd-divider-color,
-    value: $color,
-  ),
-  spacing: (
-    var: --rmd-divider-spacing,
-    value: $spacing,
-  ),
-  vertical-spacing: (
-    var: --rmd-divider-vertical-spacing,
-    value: $vertical-spacing,
-  ),
-  inset: (
-    var: --rmd-divider-inset,
-    value: $inset,
-  ),
-  width: (
-    var: --rmd-divider-width,
-    value: $max-size,
-  ),
-  max-size: (
-    var: --rmd-divider-max-size,
-    value: $max-size,
-  ),
+$variables: (
+  size,
+  vertical-size,
+  color,
+  spacing,
+  vertical-spacing,
+  inset,
+  max-size
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "divider 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, "divider");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "divider var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "divider")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -95,6 +67,24 @@ $var-lookup: (
   #{$property}: get-var(size) solid get-var(color);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(size, $size);
+    @include set-var(color, $color);
+    @include set-var(spacing, $spacing);
+    @include set-var(max-size, $max-size);
+
+    @if not $disable-inset {
+      @include set-var(inset, $inset);
+    }
+
+    @if not $disable-vertical {
+      @include set-var(vertical-size, $vertical-size);
+      @include set-var(vertical-spacing, $vertical-spacing);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {
@@ -103,7 +93,7 @@ $var-lookup: (
 
     .rmd-divider {
       @include use-var(margin, spacing);
-      @include use-var(width);
+      @include use-var(width, max-size);
 
       border: get-var(size) solid get-var(color);
       display: block;

package/src/form/Label.tsx

@@ -6,11 +6,11 @@ import { type LabelClassNameOptions, type LabelProps } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-label-floating-top"?: string | number;
-    "--rmd-form-label-left-offset"?: string | number;
-    "--rmd-form-label-top-offset"?: string | number;
-    "--rmd-form-label-active-padding"?: string | number;
-    "--rmd-form-label-active-background-color"?: string;
+    "--rmd-label-floating-top"?: string | number;
+    "--rmd-label-left-offset"?: string | number;
+    "--rmd-label-top-offset"?: string | number;
+    "--rmd-label-active-padding"?: string | number;
+    "--rmd-label-active-background-color"?: string;
   }
 }
 

package/src/form/TextArea.tsx

@@ -244,7 +244,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
           ref={containerRef}
           style={{
             ...style,
-            "--rmd-form-textarea-height": height,
+            "--rmd-textarea-height": height,
           }}
           className={textAreaContainer({
             animate: !disableTransition && resize == "auto",

package/src/form/TextFieldContainerStyles.ts

@@ -5,13 +5,13 @@ import { type FormComponentStates, type FormThemeOptions } from "./types.js";
 
 declare module "react" {
   interface CSSProperties {
-    "--rmd-form-text-height"?: string | number;
-    "--rmd-form-text-padding-left"?: string | number;
-    "--rmd-form-text-padding-right"?: string | number;
-    "--rmd-form-text-padding-top"?: string | number;
-    "--rmd-form-text-border-color"?: string;
-    "--rmd-form-text-hover-border-color"?: string;
-    "--rmd-form-text-filled-color"?: string;
+    "--rmd-text-field-height"?: string | number;
+    "--rmd-text-field-padding-left"?: string | number;
+    "--rmd-text-field-padding-right"?: string | number;
+    "--rmd-text-field-padding-top"?: string | number;
+    "--rmd-text-field-border-color"?: string;
+    "--rmd-text-field-hover-border-color"?: string;
+    "--rmd-text-field-filled-color"?: string;
     "--rmd-form-addon-top"?: string | number;
     "--rmd-form-addon-margin-top"?: string | number;
   }