@react-md/core 1.0.0-next.16 → 1.0.0-next.17

package/dist/_core.scss

@@ -33,10 +33,12 @@
 @forward "expansion-panel/expansion-panel" as expansion-panel-*;
 @forward "menu/menu" as menu-*;
 @forward "form/form" as 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 "app-bar/app-bar";
 @use "autocomplete/autocomplete";
@@ -71,8 +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: (
@@ -104,24 +108,36 @@ $_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%;
@@ -129,23 +145,30 @@ $_layer-order: (
     padding: 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;
-  }
-
-  body.touch-mode {
-    // stylelint-disable order/properties-alphabetical-order
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    &:has(.rmd-touch-mode) {
+      // stylelint-disable order/properties-alphabetical-order
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
-    // 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;
+      // this allows for click events to be bubbleable on iOS to the root
+      // document
+      cursor: pointer;
+    }
   }
 }
 
+// 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 {
@@ -272,10 +295,12 @@ $_layer-order: (
 
     @each $alignment in typography.$text-alignments {
       .rmd-align-#{$alignment} {
+        text-align: $alignment;
+
         @if $alignment != center {
-          @include utils.auto-rtl(text-align, $alignment);
-        } @else {
-          text-align: $alignment;
+          @include utils.rtl {
+            text-align: utils.swap-position($alignment);
+          }
         }
       }
     }
@@ -306,6 +331,17 @@ $_layer-order: (
   }
 }
 
+// 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;
@@ -321,6 +357,17 @@ $_layer-order: (
   @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;
@@ -336,9 +383,29 @@ $_layer-order: (
   @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;
@@ -368,6 +435,28 @@ $_layer-order: (
   @include typography.typography-variables;
 }
 
+// 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,
@@ -397,6 +486,7 @@ $_layer-order: (
   @include draggable.styles($disable-layer);
   @include expansion-panel.styles($disable-layer);
   @include form.styles($disable-layer);
+  @include files.styles($disable-layer);
   @include icon.styles($disable-layer);
   @include interaction.styles($disable-layer);
   @include layout.styles($disable-layer);
@@ -404,6 +494,7 @@ $_layer-order: (
   @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);

package/dist/_object-fit.scss

@@ -0,0 +1,86 @@
+@use "sass:list";
+@use "./utils";
+
+// Set to `true` to disable generating any styles
+// @type boolean
+$disable-everything: false !default;
+
+// Set to `true` to only disable the `object-fit: cover` styles
+// @type boolean
+$disable-cover: false !default;
+
+// Set to `true` to only disable the `object-fit: fill` styles
+// @type boolean
+$disable-fill: false !default;
+
+// Set to `true` to only disable the `object-fit: none` styles
+// @type boolean
+$disable-none: false !default;
+
+// Set to `true` to only disable the `object-fit: scale-down` styles
+// @type boolean
+$disable-scale-down: false !default;
+
+// The default display property value. This could be `flex`, `grid`, etc if it
+// should be applied globally.
+//
+// @type string
+$display: block !default;
+
+// The default set of aspect ratios to support. The map key should be the class
+// name suffix and the value a space separate list.
+//
+// @type Map
+$aspect-ratios: (
+  "16-9": 16 9,
+  "4-3": 4 3,
+  "1-1": 1 1,
+) !default;
+
+// Generates all the styles for the `objectFit` class name utility and should
+// not be used if calling `@include core.styles`.
+//
+// @param {boolean} disable-layer - Set this to `true` to disable the
+// layer behavior
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(object-fit, $disable-layer) {
+      .rmd-object-fit {
+        display: $display;
+        height: 100%;
+        object-fit: contain;
+        width: 100%;
+
+        @if not $disable-cover {
+          &--cover {
+            object-fit: cover;
+          }
+        }
+
+        @if not $disable-fill {
+          &--fill {
+            object-fit: fill;
+          }
+        }
+
+        @if not $disable-none {
+          &--none {
+            object-fit: none;
+          }
+        }
+
+        @if not $disable-scale-down {
+          &--scale-down {
+            object-fit: scale-down;
+          }
+        }
+
+        @each $suffix, $ratio-list in $aspect-ratios {
+          &--#{$suffix} {
+            aspect-ratio: list.slash($ratio-list...);
+          }
+        }
+      }
+    }
+  }
+}