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

package/dist/_core.scss

@@ -1,5 +1,3 @@
-@use "sass:list" as sassList;
-
 @forward "utils";
 @forward "media-queries/media-queries";
 @forward "box/box" as box-*;
@@ -15,15 +13,15 @@
 @forward "icon/icon" as icon-*;
 @forward "divider/divider" as divider-*;
 @forward "progress/progress" as progress-*;
+@forward "overlay/overlay" as overlay-*;
 @forward "button/button" as button-*;
 @forward "badge/badge" as badge-*;
 @forward "tabs/tabs" as tabs-*;
+@forward "avatar/avatar" as avatar-*;
 @forward "chip/chip" as chip-*;
 @forward "table/table" as table-*;
 @forward "app-bar/app-bar" as app-bar-*;
 @forward "responsive-item/responsive-item" as responsive-item-*;
-@forward "overlay/overlay" as overlay-*;
-@forward "avatar/avatar" as avatar-*;
 @forward "card/card" as card-*;
 @forward "link/link" as link-*;
 @forward "list/list" as list-*;
@@ -34,12 +32,17 @@
 @forward "snackbar/snackbar" as snackbar-*;
 @forward "expansion-panel/expansion-panel" as expansion-panel-*;
 @forward "menu/menu" as menu-*;
-@forward "form/form" as form-*;
+@forward "form/form";
+@forward "files/files" as files-*;
+@forward "autocomplete/autocomplete" as autocomplete-*;
 @forward "layout/layout" as layout-*;
+@forward "navigation/navigation" as navigation-*;
 @forward "segmented-button/segmented-button" as segmented-button-*;
+@forward "object-fit" as object-fit-*;
 
-@use "avatar/avatar";
 @use "app-bar/app-bar";
+@use "autocomplete/autocomplete";
+@use "avatar/avatar";
 @use "box/box";
 @use "button/button";
 @use "segmented-button/segmented-button";
@@ -70,7 +73,10 @@
 @use "window-splitter/window-splitter";
 @use "menu/menu";
 @use "form/form";
+@use "files/files";
 @use "layout/layout";
+@use "navigation/navigation";
+@use "object-fit";
 @use "utils";
 
 $_layer-order: (
@@ -102,204 +108,241 @@ $_layer-order: (
   window-splitter,
   menu,
   form,
+  files,
+  autocomplete,
   layout,
+  navigation,
   snackbar,
   segmented-button,
+  object-fit,
   utils
 );
 
+// A simple CSS reset for react-md that:
+// - applies box-sizing: border-box to everything for easier positioning and
+//   calculations
+// - updates the `html` and `body` to be full height without any padding or
+//   margin to ensure your app can utilize the full viewport
+// - applies the root background, text color, and typography to the `html`
+//   element
+// - ensures touch events are bubbleable to the `body` element on iOS for
+//   "close on outside click" behavior
+// - remove the `-webkit-tap-highlight-color` for touch devices
+//
+// This should not be used when using the {@link styles} mixin since it is
+// included by default.
 @mixin css-reset {
-  // setting everything to border-box for easier positioning and calculations
   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }
 
-  // always force full height and remove any spacing the browser might add to
-  // ensure your app can use the full viewport
   html,
   body {
     height: 100%;
     margin: 0;
     padding: 0;
+
+    &:has(body.rmd-touch-mode) {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
   }
 
-  html {
+  body {
     @include theme.theme-use-var(background-color);
     @include theme.theme-use-var(color, text-primary-color);
+    @include typography.typography-html-body-styles;
 
-    font-family: typography.$font-family;
+    &:where(.rmd-touch-mode) {
+      // this allows for click events to be bubbleable on iOS to the root
+      // document
+      cursor: pointer;
+    }
   }
+}
 
-  body.touch-mode {
-    // stylelint-disable order/properties-alphabetical-order
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+// Provides all the css utility classes for react-md. Not including these styles
+// will cause most components to look incorrect.
+//
+// This should not be used when using the {@link styles} mixin since it is
+// included by default.
+//
+// @param {boolean} disable-layer - Set this to `true` to prevent the
+// css utils from being wrapped in `@layer utils { ...styles... }`
+@mixin css-utils($disable-layer: false) {
+  @include utils.optional-layer(utils, $disable-layer) {
+    .rmd-display-none {
+      display: none !important;
+    }
 
-    // this allows for click events to be bubble-able on iOS to the root
-    // document. Without this, all the `onOutsideClick` behavior won't work.
-    cursor: pointer;
-  }
-}
+    .rmd-sr-only {
+      @include utils.sr-only(true);
+    }
 
-@mixin css-utils {
-  .rmd-display-none {
-    display: none !important;
-  }
+    .rmd-phone-sr-only {
+      @include media-queries.phone-media {
+        @include utils.sr-only;
+      }
+    }
 
-  .rmd-sr-only {
-    @include utils.sr-only(true);
-  }
+    .rmd-outline {
+      // inset box-shadow is faded on the lower right half? use outline instead
+      outline: theme.theme-get-var(outline-width) solid
+        theme.theme-get-var(outline-color);
+      outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
+    }
 
-  .rmd-phone-sr-only {
-    @include media-queries.phone-media {
-      @include utils.sr-only;
+    .rmd-greyscale-outline {
+      @include theme.theme-set-var(outline-color, outline-grey-color);
     }
-  }
 
-  .rmd-outline {
-    // inset box-shadow is faded on the lower right half? use outline instead
-    outline: theme.theme-get-var(outline-width) solid
-      theme.theme-get-var(outline-color);
-    outline-offset: utils.negate-var(theme.theme-get-var(outline-width));
-  }
+    .rmd-background-container {
+      @include theme.theme-use-var(background-color);
+      @include theme.theme-use-var(color, on-background-color, currentcolor);
+    }
 
-  .rmd-greyscale-outline {
-    @include theme.theme-set-var(outline-color, outline-grey-color);
-  }
+    @each $color in (primary, secondary, warning, success, error) {
+      $theme-name: $color + "-color";
+      $on-theme-name: "on-" + $theme-name;
 
-  .rmd-background-container {
-    @include theme.theme-use-var(background-color);
-    @include theme.theme-use-var(color, on-background-color, currentcolor);
-  }
+      .rmd-#{$color}-container {
+        @include theme.theme-set-var(background-color, $theme-name);
+        @include theme.theme-set-var(on-background-color, $on-theme-name);
+      }
 
-  @each $color in (primary, secondary, warning, success, error) {
-    $theme-name: $color + "-color";
-    $on-theme-name: "on-" + $theme-name;
+      .rmd-#{$theme-name} {
+        @include theme.theme-use-var(color, $theme-name);
+      }
 
-    .rmd-#{$color}-container {
-      @include theme.theme-set-var(background-color, $theme-name);
-      @include theme.theme-set-var(on-background-color, $on-theme-name);
-    }
+      .rmd-#{$on-theme-name} {
+        @include theme.theme-use-var(color, $on-theme-name);
+      }
 
-    .rmd-#{$theme-name} {
-      @include theme.theme-use-var(color, $theme-name);
+      .rmd-#{$color}-outline {
+        @include theme.theme-set-var(outline-color, $theme-name);
+      }
     }
 
-    .rmd-#{$on-theme-name} {
-      @include theme.theme-use-var(color, $on-theme-name);
+    @each $color in (primary, secondary, hint, disabled) {
+      .rmd-text-#{$color}-color {
+        @include theme.theme-use-var(color, text-#{$color}-color);
+      }
     }
 
-    .rmd-#{$color}-outline {
-      @include theme.theme-set-var(outline-color, $theme-name);
+    .rmd-light-surface {
+      @include interaction.use-light-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$light-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$light-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$light-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
     }
-  }
 
-  @each $color in (primary, secondary, hint, disabled) {
-    .rmd-text-#{$color}-color {
-      @include theme.theme-use-var(color, text-#{$color}-color);
+    .rmd-dark-surface {
+      @include interaction.use-dark-surface;
+      @include theme.theme-set-var(
+        text-primary-color,
+        theme.$dark-theme-text-primary-color
+      );
+      @include theme.theme-set-var(
+        text-secondary-color,
+        theme.$dark-theme-text-secondary-color
+      );
+      @include theme.theme-set-var(
+        text-hint-color,
+        theme.$dark-theme-text-hint-color
+      );
+      @include theme.theme-set-var(
+        text-disabled-color,
+        theme.$dark-theme-text-disabled-color
+      );
     }
-  }
-
-  .rmd-light-surface {
-    @include interaction.use-light-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$light-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$light-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$light-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
 
-  .rmd-dark-surface {
-    @include interaction.use-dark-surface;
-    @include theme.theme-set-var(
-      text-primary-color,
-      theme.$dark-theme-text-primary-color
-    );
-    @include theme.theme-set-var(
-      text-secondary-color,
-      theme.$dark-theme-text-secondary-color
-    );
-    @include theme.theme-set-var(
-      text-hint-color,
-      theme.$dark-theme-text-hint-color
-    );
-    @include theme.theme-set-var(
-      text-disabled-color,
-      theme.$dark-theme-text-disabled-color
-    );
-  }
-
-  .rmd-no-margin {
-    margin: 0;
-  }
+    .rmd-no-margin {
+      margin: 0;
+    }
 
-  .rmd-no-margin-top {
-    margin-top: 0;
-  }
+    .rmd-no-margin-top {
+      margin-top: 0;
+    }
 
-  .rmd-no-margin-bottom {
-    margin-bottom: 0;
-  }
+    .rmd-no-margin-bottom {
+      margin-bottom: 0;
+    }
 
-  .rmd-centered {
-    margin: 0 auto;
-  }
+    .rmd-centered {
+      margin: 0 auto;
+    }
 
-  .rmd-nowrap {
-    white-space: nowrap;
-  }
+    .rmd-nowrap {
+      white-space: nowrap;
+    }
 
-  .rmd-ellipsis {
-    @include typography.text-overflow(null);
-  }
+    .rmd-ellipsis {
+      @include typography.text-overflow(null);
+    }
 
-  @each $alignment in typography.$text-alignments {
-    .rmd-align-#{$alignment} {
-      @if $alignment != center {
-        @include utils.auto-rtl(text-align, $alignment);
-      } @else {
+    @each $alignment in typography.$text-alignments {
+      .rmd-align-#{$alignment} {
         text-align: $alignment;
+
+        @if $alignment != center {
+          @include utils.rtl {
+            text-align: utils.swap-position($alignment);
+          }
+        }
       }
     }
-  }
 
-  @each $decoration in typography.$text-decorations {
-    .rmd-#{$decoration} {
-      text-decoration: $decoration;
+    @each $decoration in typography.$text-decorations {
+      .rmd-#{$decoration} {
+        text-decoration: $decoration;
+      }
     }
-  }
 
-  @each $transform in typography.$text-transforms {
-    .rmd-#{$transform} {
-      text-transform: $transform;
+    @each $transform in typography.$text-transforms {
+      .rmd-#{$transform} {
+        text-transform: $transform;
+      }
     }
-  }
 
-  @each $font-style in typography.$font-styles {
-    .rmd-#{$font-style} {
-      font-style: $font-style;
+    @each $font-style in typography.$font-styles {
+      .rmd-#{$font-style} {
+        font-style: $font-style;
+      }
     }
-  }
 
-  @each $name, $font-weight in typography.$font-weights {
-    .rmd-#{$name} {
-      font-weight: $font-weight;
+    @each $name, $font-weight in typography.$font-weights {
+      .rmd-#{$name} {
+        font-weight: $font-weight;
+      }
     }
   }
 }
 
+// Used to apply all the light theme variables at once and will only include
+// features/components that have not been disabled.
+//
+// @example
+// ```scss
+// @use "@react-md/core";
+//
+// .light-theme {
+//   @include core.use-light-theme;
+// }
+// ```
 @mixin use-light-theme {
   @include theme.use-light-theme-colors;
   @include interaction.use-light-surface;
@@ -309,12 +352,23 @@ $_layer-order: (
   @include app-bar.use-light-theme;
   @include divider.use-light-theme;
   @include card.use-light-theme;
-  @include form.use-light-theme;
+  @include form.form-use-light-theme;
   @include table.use-light-theme;
   @include segmented-button.use-light-theme;
   @include badge.use-light-theme;
 }
 
+// Used to apply all the dark theme variables at once and will only include
+// features/components that have not been disabled.
+//
+// @example
+// ```scss
+// @use "@react-md/core";
+//
+// .dark-theme {
+//   @include core.use-dark-theme;
+// }
+// ```
 @mixin use-dark-theme {
   @include theme.use-dark-theme-colors;
   @include interaction.use-dark-surface;
@@ -324,15 +378,35 @@ $_layer-order: (
   @include app-bar.use-dark-theme;
   @include divider.use-dark-theme;
   @include card.use-dark-theme;
-  @include form.use-dark-theme;
+  @include form.form-use-dark-theme;
   @include table.use-dark-theme;
   @include segmented-button.use-dark-theme;
   @include badge.use-dark-theme;
 }
 
+// Used to apply all the variables at once and will only include
+// features/components that have not been disabled.
+//
+// This should only be used when {@link theme.$disable-default-root-theme} has
+// been set to `true` since it is included in the {@link styles} mixin by
+// default.
+//
+// @example
+// ```scss
+// @use "@react-md/core" with (
+//   $disable-default-root-theme: true
+// );
+//
+// @include core.styles;
+//
+// :root {
+//   @include core.variables;
+// }
+// ```
 @mixin variables {
   @include theme.theme-variables;
   @include app-bar.variables;
+  @include autocomplete.variables;
   @include avatar.variables;
   @include badge.variables;
   @include box.variables;
@@ -341,13 +415,14 @@ $_layer-order: (
   @include chip.variables;
   @include dialog.variables;
   @include divider.variables;
-  @include form.variables;
+  @include form.form-variables;
   @include icon.variables;
   @include interaction.variables;
   @include layout.variables;
   @include link.variables;
   @include list.variables;
   @include menu.variables;
+  @include navigation.variables;
   @include overlay.variables;
   @include progress.variables;
   @include segmented-button.variables;
@@ -361,138 +436,85 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
-@mixin styles {
-  @include css-reset;
-
-  @layer #{$_layer-order};
-  @layer utils {
-    @include css-utils;
-  }
-
-  @layer app-bar {
-    @include app-bar.styles;
-  }
-  @layer avatar {
-    @include avatar.styles;
-  }
-  @layer badge {
-    @include badge.styles;
-  }
-  @layer box {
-    @include box.styles;
-  }
-  @layer button {
-    @include button.styles;
-  }
-  @layer card {
-    @include card.styles;
-  }
-  @layer chip {
-    @include chip.styles;
-  }
-
-  @layer dialog {
-    @include dialog.styles;
-  }
-  @layer divider {
-    @include divider.styles;
-  }
-  @layer draggable {
-    @include draggable.styles;
-  }
-  @layer expansion-panel {
-    @include expansion-panel.styles;
-  }
-
-  @layer form {
-    @include form.styles;
-  }
-
-  @layer icon {
-    @include icon.styles;
-  }
-
-  @layer interaction {
-    @include interaction.styles;
-  }
-
-  @layer layout {
-    @include layout.styles;
-  }
-
-  @layer link {
-    @include link.styles;
-  }
-
-  @layer list {
-    @include list.styles;
-  }
-
-  @layer menu {
-    @include menu.styles;
-  }
-
-  @layer overlay {
-    @include overlay.styles;
-  }
-
-  @layer progress {
-    @include progress.styles;
-  }
-
-  @layer responsive-item {
-    @include responsive-item.styles;
-  }
-
-  @layer segmented-button {
-    @include segmented-button.styles;
-  }
-
-  @layer sheet {
-    @include sheet.styles;
-  }
-
-  @layer snackbar {
-    @include snackbar.styles;
-  }
-
-  @layer table {
-    @include table.styles;
-  }
-
-  @layer tabs {
-    @include tabs.styles;
-  }
-
-  @layer tooltip {
-    @include tooltip.styles;
-  }
-
-  @layer transition {
-    @include transition.transition-styles;
-  }
-
-  @layer tree {
-    @include tree.styles;
-  }
-
-  @layer typography {
-    @include typography.typography-styles;
-  }
-
-  @layer window-splitter {
-    @include window-splitter.styles;
-  }
+// Generates all the styles for react-md respecting all feature flags.
+//
+// @example
+// ```scss
+// @use "@react-md/core";
+//
+// @include core.styles;
+// ```
+//
+// @param {boolean} disable-layer - Set this to `true` if all the react-md styles
+// should not be wrapped in a [css layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer).
+// You normally want this so it is easier to override react-md styles.
+// @param {boolean} disable-layer-order - Set this to `true` to remove
+// the layer ordering.
+// @param {boolean} disable-reset - Set this to `true` to prevent the
+// {@link css-reset} from being applied. This is only useful if you want to call
+// the `css-reset` yourself since most components will not work correctly
+// without this reset.
+// @param {boolean} disable-css-utils - Set this to `true` to prevent the
+// {@link css-utils} from being applied. This is only useful if you want to call
+// the `css-utils` yourself since most components will not work correctly
+// without this reset.
+@mixin styles(
+  $disable-layer: false,
+  $disable-layer-order: $disable-layer,
+  $disable-reset: false,
+  $disable-css-utils: false
+) {
+  @if not $disable-layer-order {
+    @layer #{$_layer-order};
+  }
+  @if not $disable-reset {
+    @include css-reset;
+  }
+  @if not $disable-css-utils {
+    @include css-utils($disable-layer);
+  }
+
+  @include app-bar.styles($disable-layer);
+  @include autocomplete.styles($disable-layer);
+  @include avatar.styles($disable-layer);
+  @include badge.styles($disable-layer);
+  @include box.styles($disable-layer);
+  @include button.styles($disable-layer);
+  @include card.styles($disable-layer);
+  @include chip.styles($disable-layer);
+  @include dialog.styles($disable-layer);
+  @include divider.styles($disable-layer);
+  @include draggable.styles($disable-layer);
+  @include expansion-panel.styles($disable-layer);
+  @include form.form-styles($disable-layer);
+  @include files.styles($disable-layer);
+  @include icon.styles($disable-layer);
+  @include interaction.styles($disable-layer);
+  @include layout.styles($disable-layer);
+  @include link.styles($disable-layer);
+  @include list.styles($disable-layer);
+  @include menu.styles($disable-layer);
+  @include navigation.styles($disable-layer);
+  @include object-fit.styles($disable-layer);
+  @include overlay.styles($disable-layer);
+  @include progress.styles($disable-layer);
+  @include responsive-item.styles($disable-layer);
+  @include segmented-button.styles($disable-layer);
+  @include sheet.styles($disable-layer);
+  @include snackbar.styles($disable-layer);
+  @include table.styles($disable-layer);
+  @include tabs.styles($disable-layer);
+  @include tooltip.styles($disable-layer);
+  @include transition.transition-styles($disable-layer);
+  @include tree.styles($disable-layer);
+  @include typography.typography-styles($disable-layer);
+  @include window-splitter.styles($disable-layer);
 
   @if not theme.$disable-default-root-theme {
     :root {
       @include variables;
 
-      @if not
-        theme.$disable-default-system-theme and
-        theme.$color-scheme ==
-        system
-      {
+      @if theme.$color-scheme == system {
         @media (prefers-color-scheme: dark) {
           @include use-dark-theme;
         }