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

package/dist/_base.scss

@@ -0,0 +1,479 @@
+////
+/// @group core.base
+////
+
+@use "app-bar/app-bar";
+@use "autocomplete/autocomplete";
+@use "avatar/avatar";
+@use "box/box";
+@use "button/button";
+@use "segmented-button/segmented-button";
+@use "badge/badge";
+@use "card/card";
+@use "divider/divider";
+@use "draggable/draggable";
+@use "expansion-panel/expansion-panel";
+@use "icon/icon";
+@use "media-queries/media-queries";
+@use "snackbar/snackbar";
+@use "interaction/interaction";
+@use "link/link";
+@use "list/list";
+@use "tree/tree";
+@use "tooltip/tooltip";
+@use "overlay/overlay";
+@use "progress/progress";
+@use "responsive-item/responsive-item";
+@use "tabs/tabs";
+@use "chip/chip";
+@use "table/table";
+@use "theme/theme";
+@use "dialog/dialog";
+@use "sheet/sheet";
+@use "transition/transition";
+@use "typography/typography";
+@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";
+
+/// The css layer order so that styles can easily overridden ignoring css
+/// import order
+/// @access private
+/// @type Map
+$_layer-order: (
+  typography,
+  transition,
+  interaction,
+  box,
+  icon,
+  divider,
+  button,
+  badge,
+  tabs,
+  chip,
+  progress,
+  responsive,
+  overlay,
+  card,
+  avatar,
+  link,
+  list,
+  tree,
+  dialog,
+  sheet,
+  tooltip,
+  table,
+  app-bar,
+  expansion-panel,
+  draggable,
+  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 `styles` mixin since it is
+/// included by default.
+@mixin css-reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+
+    &:has(body.rmd-touch-mode) {
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    }
+  }
+
+  body {
+    @include theme.theme-use-var(background-color);
+    @include theme.theme-use-var(color, text-primary-color);
+    @include typography.typography-html-body-styles;
+
+    &:where(.rmd-touch-mode) {
+      // 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 `styles` mixin since it is
+/// included by default.
+///
+/// @param {Boolean} disable-layer [false] - 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;
+    }
+
+    .rmd-sr-only {
+      @include utils.sr-only(true);
+    }
+
+    .rmd-phone-sr-only {
+      @include media-queries.phone-media {
+        @include utils.sr-only;
+      }
+    }
+
+    .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-greyscale-outline {
+      @include theme.theme-set-var(outline-color, outline-grey-color);
+    }
+
+    .rmd-background-container {
+      @include theme.theme-use-var(background-color);
+      @include theme.theme-use-var(color, on-background-color, currentcolor);
+    }
+
+    @each $color in (primary, secondary, warning, success, error) {
+      $theme-name: $color + "-color";
+      $on-theme-name: "on-" + $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-#{$theme-name} {
+        @include theme.theme-use-var(color, $theme-name);
+      }
+
+      .rmd-#{$on-theme-name} {
+        @include theme.theme-use-var(color, $on-theme-name);
+      }
+
+      .rmd-#{$color}-outline {
+        @include theme.theme-set-var(outline-color, $theme-name);
+      }
+    }
+
+    @each $color in (primary, secondary, hint, disabled) {
+      .rmd-text-#{$color}-color {
+        @include theme.theme-use-var(color, text-#{$color}-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-top {
+      margin-top: 0;
+    }
+
+    .rmd-no-margin-bottom {
+      margin-bottom: 0;
+    }
+
+    .rmd-centered {
+      margin: 0 auto;
+    }
+
+    .rmd-nowrap {
+      white-space: nowrap;
+    }
+
+    .rmd-ellipsis {
+      @include typography.text-overflow(null);
+    }
+
+    @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 $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 $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
+///   .light-theme {
+///     @include use-light-theme;
+///   }
+///
+@mixin use-light-theme {
+  @include theme.use-light-theme-colors;
+  @include interaction.use-light-surface;
+  @include transition.transition-use-light-theme;
+  @include icon.use-light-theme;
+  @include chip.use-light-theme;
+  @include app-bar.use-light-theme;
+  @include divider.use-light-theme;
+  @include card.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
+///   .dark-theme {
+///     @include use-dark-theme;
+///   }
+///
+@mixin use-dark-theme {
+  @include theme.use-dark-theme-colors;
+  @include interaction.use-dark-surface;
+  @include transition.transition-use-dark-theme;
+  @include icon.use-dark-theme;
+  @include chip.use-dark-theme;
+  @include app-bar.use-dark-theme;
+  @include divider.use-dark-theme;
+  @include card.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 `$disable-default-root-theme` has been set to
+/// `true` since it is included in the `styles` mixin by default.
+///
+/// @example scss - Example Usage SCSS<!-- no-compile -->
+///   @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;
+  @include button.variables;
+  @include card.variables;
+  @include chip.variables;
+  @include dialog.variables;
+  @include divider.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;
+  @include sheet.variables;
+  @include snackbar.variables;
+  @include table.variables;
+  @include tabs.variables;
+  @include tooltip.variables;
+  @include transition.transition-variables;
+  @include tree.variables;
+  @include typography.typography-variables;
+}
+
+/// Generates all the styles for react-md respecting all feature flags.
+///
+/// @example scss - Example Usage SCSS<!-- no-compile -->
+///   @include styles;
+///
+/// @param {Boolean} disable-layer [false] - 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 [$disable-layer] - Set this to `true`
+/// to remove the layer ordering.
+/// @param {Boolean} disable-reset [false] - Set this to `true` to prevent the
+/// `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 [false] - Set this to `true` to prevent
+/// the `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 theme.$color-scheme == system {
+        @media (prefers-color-scheme: dark) {
+          @include use-dark-theme;
+        }
+      }
+    }
+  }
+}

package/dist/_box-shadows.scss

@@ -1,3 +1,7 @@
+////
+/// @group core.box-shadows
+////
+
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";
@@ -7,16 +11,16 @@
 @use "transition/transition";
 @use "utils";
 
-// The default box-shadow color to use for all material design box shadows.
-// @type Color
+/// The default box-shadow color to use for all material design box shadows.
+/// @type Color
 $box-shadow-color: #000 !default;
 
-// The opacity to apply for the first box shadow
-// @type number
+/// The opacity to apply for the first box shadow
+/// @type Number
 $box-shadow-1-opacity: 0.2 !default;
 
-// The box shadow values to apply based on elevation for the first box shadow.
-// @type Map
+/// The box shadow values to apply based on elevation for the first box shadow.
+/// @type Map
 $box-shadow-1-layers: (
   0: "0px 0px 0px 0px",
   1: "0px 2px 1px -1px",
@@ -45,12 +49,12 @@ $box-shadow-1-layers: (
   24: "0px 11px 15px -7px",
 ) !default;
 
-// The opacity to apply for the second box shadow
-// @type number
+/// The opacity to apply for the second box shadow
+/// @type Number
 $box-shadow-2-opacity: 0.14 !default;
 
-// The box shadow values to apply based on elevation for the second box shadow.
-// @type Map
+/// The box shadow values to apply based on elevation for the second box shadow.
+/// @type Map
 $box-shadow-2-layers: (
   0: "0px 0px 0px 0px",
   1: "0px 1px 1px 0px",
@@ -79,12 +83,12 @@ $box-shadow-2-layers: (
   24: "0px 24px 38px 3px",
 ) !default;
 
-// The opacity to apply for the third box shadow
-// @type number
+/// The opacity to apply for the third box shadow
+/// @type Number
 $box-shadow-3-opacity: 0.12 !default;
 
-// The box shadow values to apply based on elevation for the third box shadow.
-// @type Map
+/// The box shadow values to apply based on elevation for the third box shadow.
+/// @type Map
 $box-shadow-3-layers: (
   0: "0px 0px 0px 0px",
   1: "0px 1px 3px 0px",
@@ -113,15 +117,16 @@ $box-shadow-3-layers: (
   24: "0px 9px 46px 8px",
 ) !default;
 
-// Creates a `box-shadow` string based on the material design guidelines and
-// elevation.
-//
-// @param {number} z-value - This should be a number from 0 to 24 representing
-// the box shadow elevation.
-// @param {Color} color - The color to use for the box shadow
-// @param {number} opacity-boost - This will be applied to each shadow value
-// opacity if needed.
-// @returns {string} The generated box shadow
+/// Creates a `box-shadow` string based on the material design guidelines and
+/// elevation.
+///
+/// @param {Number} z-value - This should be a number from 0 to 24 representing
+/// the box shadow elevation.
+/// @param {Color} color [$box-shadow-color] - The color to use for the box
+/// shadow
+/// @param {Number} opacity-boost [0] - This will be applied to each shadow
+/// value opacity if needed.
+/// @returns {String} The generated box shadow
 @function box-shadow($z-value, $color: $box-shadow-color, $opacity-boost: 0) {
   @if meta.type-of($z-value) != "number" or not math.is-unitless($z-value) {
     @error "$z-value must be a unitless number, but received '#{$z-value}'";
@@ -145,15 +150,16 @@ $box-shadow-3-layers: (
     #{"#{$shadow-3-value} #{$shadow-3-color}"};
 }
 
-// Generates styles for a new elevated surface with box shadow.
-//
-// @param {number} z-value - This should be a number from 0 to 24 representing
-// the box shadow elevation.
-// @param {Color} color - The color to use for the box shadow
-// @param {number} opacity-boost - This will be applied to each shadow value
-// opacity if needed.
-// @param {boolean} disable-colors - Set to `true` to prevent the background
-// color and text color from being updated as well.
+/// Generates styles for a new elevated surface with box shadow.
+///
+/// @param {Number} z-value - This should be a number from 0 to 24 representing
+/// the box shadow elevation.
+/// @param {Color} color [$box-shadow-color] - The color to use for the box shadow
+/// @param {Number} opacity-boost [0] - This will be applied to each shadow
+/// value opacity if needed.
+/// @param {Boolean} disable-colors [theme.$disable-dark-elevation] - Set to
+/// `true` to prevent the background color and text color from being updated as
+/// well.
 @mixin box-shadow(
   $z-value,
   $color: $box-shadow-color,
@@ -165,25 +171,26 @@ $box-shadow-3-layers: (
   box-shadow: box-shadow($z-value, $color, $opacity-boost);
 }
 
-// Used to create a performant box-shadow transition using a pseudo element.
-//
-// @param {string} start-shadow - The starting box shadow. This can be `null` if
-// there should be no box shadow by default.
-// @param {string} end-shadow - The ending box shadow. It is not possible to go
-// from shadow -> no shadow.
-// @param {string|List} active-selectors - The selectors that cause the shadow
-// to change to the `$end-shadow`.
-// @param {number} duration - The transition duration
-// @param {boolean} pseudo-before - Set this to `false` to use the `::after`
-// pseudo element instead of `::before`.
-// @param {number} pseudo-z-index - Optional z-index to set to the pseudo
-// element.
-// @param {boolean} pseudo-fixed - Set to `true` if the pseudo element should
-// use `position: fixed` instead of `position: absolute`.
-// @param {boolean} create-pseudo - Set to `false` if the pseudo element should
-// not be created.
-// @param {boolean} position-relative - Set this to `false` if the element
-// should not gain `position: relative` styles through this mixin
+/// Used to create a performant box-shadow transition using a pseudo element.
+///
+/// @param {String} start-shadow - The starting box shadow. This can be `null` if
+/// there should be no box shadow by default.
+/// @param {String} end-shadow - The ending box shadow. It is not possible to go
+/// from shadow -> no shadow.
+/// @param {List|String} active-selectors - The selectors that cause the shadow
+/// to change to the `$end-shadow`.
+/// @param {Number} duration [transition.$linear-duration] - The transition
+/// duration
+/// @param {Boolean} pseudo-before [true] - Set this to `false` to use the
+/// `::after` pseudo element instead of `::before`.
+/// @param {Number} pseudo-z-index [0] - Optional z-index to set to the pseudo
+/// element.
+/// @param {Boolean} pseudo-fixed [false] - Set to `true` if the pseudo element
+/// should use `position: fixed` instead of `position: absolute`.
+/// @param {Boolean} create-pseudo [true] - Set to `false` if the pseudo
+/// element should not be created.
+/// @param {Boolean} position-relative [true] - Set this to `false` if the
+/// element should not gain `position: relative` styles through this mixin
 @mixin box-shadow-transition(
   $start-shadow,
   $end-shadow,
@@ -241,26 +248,28 @@ $box-shadow-3-layers: (
   }
 }
 
-// Convenience helper to animate between two different material design box
-// shadow values.
-//
-// Note: This will need to be included at the end of a block with the new Sass
-// rules or prefix styles with `& {}`
-//
-// @param {number} start-z-value - The starting elevation (a number from 0 to 24)
-// @param {number} end-z-value - The ending elevation (a number from 0 to 24)
-// @param {string|List} active-selectors - The selectors that cause the shadow
-// to change to the `$end-shadow`.
-// @param {boolean} pseudo-before - Set this to `false` to use the `::after`
-// pseudo element instead of `::before`.
-// @param {number} pseudo-z-index - Optional z-index to set to the pseudo
-// element.
-// @param {number} duration - The transition duration
-// @param {Color} color - The color to use for the box shadow
-// @param {number} opacity-boost - This will be applied to each shadow value
-// opacity if needed.
-// @param {boolean} position-relative - Set this to `false` if the element
-// should not gain `position: relative` styles through this mixin
+/// Convenience helper to animate between two different material design box
+/// shadow values.
+///
+/// Note: This will need to be included at the end of a block with the new Sass
+/// rules or prefix styles with `& {}`
+///
+/// @param {Number} start-z-value - The starting elevation (a number from 0 to 24)
+/// @param {Number} end-z-value - The ending elevation (a number from 0 to 24)
+/// @param {List|String} active-selectors - The selectors that cause the shadow
+/// to change to the `$end-shadow`.
+/// @param {Boolean} pseudo-before [true] - Set this to `false` to use the
+/// `::after` pseudo element instead of `::before`.
+/// @param {Number} pseudo-z-index [0] - Optional z-index to set to the pseudo
+/// element.
+/// @param {Number} duration [transition.$linear-duration] - The transition
+/// duration
+/// @param {Color} color [$box-shadow-color] - The color to use for the box
+/// shadow
+/// @param {Number} opacity-boost [0] - This will be applied to each shadow
+/// value opacity if needed.
+/// @param {Boolean} position-relative [true] - Set this to `false` if the
+/// element should not gain `position: relative` styles through this mixin
 @mixin elevation-transition(
   $start-z-value,
   $end-z-value,