@react-md/core 1.0.0-next.7 → 1.0.0-next.8

package/src/theme/_theme.scss

@@ -37,6 +37,25 @@ $disable-dark-elevation: $color-scheme == light !default;
 $disable-default-system-theme: false !default;
 $disable-default-root-theme: false !default;
 
+// this should only be used if your application does not use menu, dialog,
+// sheet, card, expansion-panel, select, app-bar (theme="surface")
+$disable-surface-color: false !default;
+$disable-primary-color: false !default;
+$disable-on-primary-color: $disable-primary-color !default;
+$disable-secondary-color: false !default;
+$disable-on-secondary-color: $disable-secondary-color !default;
+$disable-warning-color: false !default;
+$disable-on-warning-color: $disable-warning-color !default;
+$disable-error-color: false !default;
+$disable-on-error-color: $disable-error-color !default;
+$disable-success-color: false !default;
+$disable-on-success-color: $disable-success-color !default;
+$disable-outline-grey-color: false !default;
+$disable-text-primary-color: false !default;
+$disable-text-secondary-color: false !default;
+$disable-text-hint-color: false !default;
+$disable-text-disabled-color: false !default;
+
 $primary-color: colors.$blue-500 !default;
 $on-primary-color: a11y.contrast-color($primary-color) !default;
 $secondary-color: colors.$orange-a-400 !default;
@@ -152,7 +171,79 @@ $theme-variables: (
   outline-grey-color
 );
 
+@function _is-var-disabled($name) {
+  @if $name == surface-color {
+    @return $disable-surface-color;
+  }
+
+  @if $name == primary-color {
+    @return $disable-primary-color;
+  }
+
+  @if $name == on-primary-color {
+    @return $disable-on-primary-color;
+  }
+
+  @if $name == secondary-color {
+    @return $disable-secondary-color;
+  }
+
+  @if $name == on-secondary-color {
+    @return $disable-on-secondary-color;
+  }
+
+  @if $name == warning-color {
+    @return $disable-warning-color;
+  }
+
+  @if $name == on-warning-color {
+    @return $disable-on-warning-color;
+  }
+
+  @if $name == error-color {
+    @return $disable-error-color;
+  }
+
+  @if $name == on-error-color {
+    @return $disable-on-error-color;
+  }
+
+  @if $name == success-color {
+    @return $disable-success-color;
+  }
+
+  @if $name == on-success-color {
+    @return $disable-on-success-color;
+  }
+
+  @if $name == text-primary-color {
+    @return $disable-text-primary-color;
+  }
+
+  @if $name == text-secondary-color {
+    @return $disable-text-secondary-color;
+  }
+
+  @if $name == text-hint-color {
+    @return $disable-text-hint-color;
+  }
+
+  @if $name == text-disabled-color {
+    @return $disable-text-disabled-color;
+  }
+
+  @if $name == outline-grey-color {
+    @return $disable-outline-grey-color;
+  }
+
+  @return false;
+}
+
 @function theme-get-var($name, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @return $fallback;
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
 
   @if $fallback {
@@ -175,6 +266,10 @@ $theme-variables: (
 }
 
 @mixin theme-set-var($name, $value-or-theme-name) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   $var: utils.get-var-name($theme-variables, $name, "theme");
   $value: $value-or-theme-name;
   @if list.index($theme-variables, $value-or-theme-name) {
@@ -186,6 +281,10 @@ $theme-variables: (
 }
 
 @mixin theme-use-var($property, $name: $property, $fallback: null) {
+  @if _is-var-disabled($name) {
+    @error '"#{$name}" is currently disabled and cannot be changed. Set "$disable-#{$name}-var" to `true` or remove it from the Sass module overrides.';
+  }
+
   #{$property}: theme-get-var($name, $fallback);
 }
 
@@ -203,16 +302,27 @@ $theme-variables: (
 
 @mixin use-light-theme-colors {
   @include theme-set-var(background-color, $light-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $light-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $light-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $light-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $light-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $light-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $light-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $light-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation and $color-scheme != light {
     @include use-light-theme-elevation-colors;
@@ -221,16 +331,27 @@ $theme-variables: (
 
 @mixin use-dark-theme-colors {
   @include theme-set-var(background-color, $dark-theme-background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $dark-theme-surface-color);
   }
-  @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
-  @include theme-set-var(
-    text-secondary-color,
-    $dark-theme-text-secondary-color
-  );
-  @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
-  @include theme-set-var(text-disabled-color, $dark-theme-text-disabled-color);
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $dark-theme-text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(
+      text-secondary-color,
+      $dark-theme-text-secondary-color
+    );
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $dark-theme-text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(
+      text-disabled-color,
+      $dark-theme-text-disabled-color
+    );
+  }
 
   @if not $disable-dark-elevation {
     @include use-dark-theme-elevation-colors;
@@ -239,24 +360,52 @@ $theme-variables: (
 
 @mixin theme-variables {
   @include theme-set-var(background-color, $background-color);
-  @if $disable-dark-elevation {
+  @if $disable-dark-elevation and not $disable-surface-color {
     @include theme-set-var(surface-color, $surface-color);
   }
 
-  @include theme-set-var(primary-color, $primary-color);
-  @include theme-set-var(on-primary-color, $on-primary-color);
-  @include theme-set-var(secondary-color, $secondary-color);
-  @include theme-set-var(on-secondary-color, $on-secondary-color);
-  @include theme-set-var(warning-color, $warning-color);
-  @include theme-set-var(on-warning-color, $on-warning-color);
-  @include theme-set-var(error-color, $error-color);
-  @include theme-set-var(on-error-color, $on-error-color);
-  @include theme-set-var(success-color, $success-color);
-  @include theme-set-var(on-success-color, $on-success-color);
-  @include theme-set-var(text-primary-color, $text-primary-color);
-  @include theme-set-var(text-secondary-color, $text-secondary-color);
-  @include theme-set-var(text-hint-color, $text-hint-color);
-  @include theme-set-var(text-disabled-color, $text-disabled-color);
+  @if not $disable-primary-color {
+    @include theme-set-var(primary-color, $primary-color);
+  }
+  @if not $disable-on-primary-color {
+    @include theme-set-var(on-primary-color, $on-primary-color);
+  }
+  @if not $disable-secondary-color {
+    @include theme-set-var(secondary-color, $secondary-color);
+  }
+  @if not $disable-on-secondary-color {
+    @include theme-set-var(on-secondary-color, $on-secondary-color);
+  }
+  @if not $disable-warning-color {
+    @include theme-set-var(warning-color, $warning-color);
+  }
+  @if not $disable-on-warning-color {
+    @include theme-set-var(on-warning-color, $on-warning-color);
+  }
+  @if not $disable-error-color {
+    @include theme-set-var(error-color, $error-color);
+  }
+  @if not $disable-on-error-color {
+    @include theme-set-var(on-error-color, $on-error-color);
+  }
+  @if not $disable-success-color {
+    @include theme-set-var(success-color, $success-color);
+  }
+  @if not $disable-on-success-color {
+    @include theme-set-var(on-success-color, $on-success-color);
+  }
+  @if not $disable-text-primary-color {
+    @include theme-set-var(text-primary-color, $text-primary-color);
+  }
+  @if not $disable-text-secondary-color {
+    @include theme-set-var(text-secondary-color, $text-secondary-color);
+  }
+  @if not $disable-text-hint-color {
+    @include theme-set-var(text-hint-color, $text-hint-color);
+  }
+  @if not $disable-text-disabled-color {
+    @include theme-set-var(text-disabled-color, $text-disabled-color);
+  }
 
   @if not $disable-dark-elevation {
     @if $color-scheme == dark {
@@ -268,7 +417,9 @@ $theme-variables: (
 
   @include theme-set-var(outline-width, $outline-width);
   @include theme-set-var(outline-color, $outline-color);
-  @include theme-set-var(outline-grey-color, $outline-grey-color);
+  @if not $disable-outline-grey-color {
+    @include theme-set-var(outline-grey-color, $outline-grey-color);
+  }
 }
 
 @mixin create-surface($z-value, $disable-colors: $disable-dark-elevation) {
@@ -278,7 +429,9 @@ $theme-variables: (
   @if not $disable-colors {
     @include theme-set-var(background-color, theme-get-var(surface-color));
     @include theme-use-var(background-color);
-    @include theme-use-var(color, text-primary-color);
+    @if not $disable-text-primary-color {
+      @include theme-use-var(color, text-primary-color);
+    }
   }
 }
 
@@ -351,7 +504,12 @@ $theme-variables: (
 }
 
 @mixin default-system-theme {
-  @if not $disable-default-system-theme and $color-scheme == system {
+  @if not
+    $disable-default-system-theme and
+    $disable-default-root-theme and
+    $color-scheme ==
+    system
+  {
     @media (prefers-color-scheme: dark) {
       :root {
         @content;

package/src/typography/SrOnly.tsx

@@ -1,13 +1,11 @@
-import { forwardRef } from "react";
+import { forwardRef, type ElementType, type HTMLAttributes } from "react";
+import { cssUtils } from "../cssUtils.js";
 import {
-  Typography,
   type CustomTypographyComponent,
   type TypographyHTMLElement,
-  type TypographyProps,
 } from "./Typography.js";
-import { cssUtils } from "../cssUtils.js";
 
-export interface SrOnlyProps extends TypographyProps {
+export interface SrOnlyProps extends HTMLAttributes<TypographyHTMLElement> {
   /** @defaultValue `"span"` */
   as?: CustomTypographyComponent;
 
@@ -54,7 +52,7 @@ export interface SrOnlyProps extends TypographyProps {
 export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
   function SrOnly(props, ref) {
     const {
-      as = "span",
+      as: AsComponent = "span",
       className,
       phoneOnly,
       focusable,
@@ -63,10 +61,12 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
       ...remaining
     } = props;
 
+    // do some type-casting so ref works
+    const Component = AsComponent as ElementType;
+
     return (
-      <Typography
+      <Component
         {...remaining}
-        as={as}
         ref={ref}
         tabIndex={tabIndex ?? (focusable ? 0 : undefined)}
         className={cssUtils({
@@ -75,7 +75,7 @@ export const SrOnly = forwardRef<TypographyHTMLElement, SrOnlyProps>(
         })}
       >
         {children}
-      </Typography>
+      </Component>
     );
   }
 );

package/src/typography/Typography.tsx

@@ -62,24 +62,24 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Simple Example
  * ```ts
- * import { getTypographyClassName } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
- *       <h1 className={getTypographyClassName({ type: "headline-1" })} />
- *       <h2 className={getTypographyClassName({ type: "headline-2" })} />
- *       <h3 className={getTypographyClassName({ type: "headline-3" })} />
- *       <h4 className={getTypographyClassName({ type: "headline-4" })} />
- *       <h5 className={getTypographyClassName({ type: "headline-5" })} />
- *       <h6 className={getTypographyClassName({ type: "headline-6" })} />
- *       <h5 className={getTypographyClassName({ type: "subtitle-1" })} />
- *       <h6 className={getTypographyClassName({ type: "subtitle-2" })} />
- *       <p className={getTypographyClassName()} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <p className={getTypographyClassName({ type "body-1" })} />
- *       <caption className={getTypographyClassName({ type: "caption" })} />
- *       <span className={getTypographyClassName({ type: "overline" })} />
+ *       <h1 className={typography({ type: "headline-1" })} />
+ *       <h2 className={typography({ type: "headline-2" })} />
+ *       <h3 className={typography({ type: "headline-3" })} />
+ *       <h4 className={typography({ type: "headline-4" })} />
+ *       <h5 className={typography({ type: "headline-5" })} />
+ *       <h6 className={typography({ type: "headline-6" })} />
+ *       <h5 className={typography({ type: "subtitle-1" })} />
+ *       <h6 className={typography({ type: "subtitle-2" })} />
+ *       <p className={typography()} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <p className={typography({ type "body-1" })} />
+ *       <caption className={typography({ type: "caption" })} />
+ *       <span className={typography({ type: "overline" })} />
  *     </>
  *   );
  * }
@@ -88,14 +88,14 @@ export type NullableTypographyClassNameOptions = Omit<
  * @example
  * Applying Additional Styles
  * ```ts
- * import { getTypography } from "@react-md/core";
+ * import { typography } from "@react-md/core";
  *
  * function Example() {
  *   return (
  *     <>
  *       <h1
  *         // only maintain the default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-1",
  *           margin: "bottom",
  *         })}
@@ -103,7 +103,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h2
  *         // remove all default margin
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-2",
  *           margin: "none",
  *         })}
@@ -111,7 +111,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <h3
  *         // only maintain the default margin-top
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type: "headline-3",
  *           margin: "top",
  *         })}
@@ -119,7 +119,7 @@ export type NullableTypographyClassNameOptions = Omit<
  *
  *       <p
  *         // center the text, set to bold, and only maintain default margin-bottom
- *         className={getTypographyClassName({
+ *         className={typography({
  *           type "subtitle-1",
  *           align: "center",
  *           margin: "bottom",

package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap

@@ -3,7 +3,7 @@
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </span>
@@ -13,7 +13,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only custom-class-name"
+    class="rmd-sr-only custom-class-name"
     style="opacity: 0.3;"
   >
     Some content
@@ -24,7 +24,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="0"
   >
@@ -36,7 +36,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <div>
   <span
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only rmd-sr-only--focusable"
+    class="rmd-sr-only rmd-sr-only--focusable"
     style=""
     tabindex="-1"
   >
@@ -48,7 +48,7 @@ exports[`SrOnly should apply the correct styling, HTML attributes, and allow a r
 exports[`SrOnly should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <div>
   <h4
-    class="rmd-typography rmd-typography--body-1 rmd-sr-only"
+    class="rmd-sr-only"
   >
     Some content
   </h4>

package/src/typography/_typography.scss

@@ -4,6 +4,18 @@
 @use "../utils";
 
 $disable-text-container: false !default;
+$disable-headline-1: false !default;
+$disable-headline-2: false !default;
+$disable-headline-3: false !default;
+$disable-headline-4: false !default;
+$disable-headline-5: false !default;
+$disable-headline-6: false !default;
+$disable-subtitle-1: false !default;
+$disable-subtitle-2: false !default;
+$disable-body-1: false !default;
+$disable-body-2: false !default;
+$disable-caption: false !default;
+$disable-overline: false !default;
 
 /// A small utility function to get the letter spacing based on tracking and
 /// font-size
@@ -216,9 +228,13 @@ $button-recommended-styles: map.merge(
   $base-font-styles,
   (
     font-size: 0.875rem,
-    line-height: 2.25rem,
     font-weight: map.get($font-weights, medium),
     letter-spacing: get-letter-spacing(1.25, 0.875),
+    line-height: 2.25rem,
+    // buttons with multiple lines of text look terrible because of the large
+    // line-height. You normally want to use a different component if the
+    // clickable area has so much content to line-wrap
+    line-wrap: nowrap,
   )
 );
 $button-custom-styles: () !default;
@@ -276,52 +292,76 @@ $typography-variables: (line-length, text-container-padding);
     .rmd-typography {
       @include utils.map-to-styles($base-font-styles);
 
-      &--headline-1 {
-        @include utils.map-to-styles($headline-1-styles);
+      @if not $disable-headline-1 {
+        &--headline-1 {
+          @include utils.map-to-styles($headline-1-styles);
+        }
       }
 
-      &--headline-2 {
-        @include utils.map-to-styles($headline-2-styles);
+      @if not $disable-headline-2 {
+        &--headline-2 {
+          @include utils.map-to-styles($headline-2-styles);
+        }
       }
 
-      &--headline-3 {
-        @include utils.map-to-styles($headline-3-styles);
+      @if not $disable-headline-3 {
+        &--headline-3 {
+          @include utils.map-to-styles($headline-3-styles);
+        }
       }
 
-      &--headline-4 {
-        @include utils.map-to-styles($headline-4-styles);
+      @if not $disable-headline-4 {
+        &--headline-4 {
+          @include utils.map-to-styles($headline-4-styles);
+        }
       }
 
-      &--headline-5 {
-        @include utils.map-to-styles($headline-5-styles);
+      @if not $disable-headline-5 {
+        &--headline-5 {
+          @include utils.map-to-styles($headline-5-styles);
+        }
       }
 
-      &--headline-6 {
-        @include utils.map-to-styles($headline-6-styles);
+      @if not $disable-headline-6 {
+        &--headline-6 {
+          @include utils.map-to-styles($headline-6-styles);
+        }
       }
 
-      &--subtitle-1 {
-        @include utils.map-to-styles($subtitle-1-styles);
+      @if not $disable-subtitle-1 {
+        &--subtitle-1 {
+          @include utils.map-to-styles($subtitle-1-styles);
+        }
       }
 
-      &--subtitle-2 {
-        @include utils.map-to-styles($subtitle-2-styles);
+      @if not $disable-subtitle-2 {
+        &--subtitle-2 {
+          @include utils.map-to-styles($subtitle-2-styles);
+        }
       }
 
-      &--body-1 {
-        @include utils.map-to-styles($body-1-styles);
+      @if not $disable-body-1 {
+        &--body-1 {
+          @include utils.map-to-styles($body-1-styles);
+        }
       }
 
-      &--body-2 {
-        @include utils.map-to-styles($body-2-styles);
+      @if not $disable-body-2 {
+        &--body-2 {
+          @include utils.map-to-styles($body-2-styles);
+        }
       }
 
-      &--caption {
-        @include utils.map-to-styles($caption-styles);
+      @if not $disable-caption {
+        &--caption {
+          @include utils.map-to-styles($caption-styles);
+        }
       }
 
-      &--overline {
-        @include utils.map-to-styles($overline-styles);
+      @if not $disable-overline {
+        &--overline {
+          @include utils.map-to-styles($overline-styles);
+        }
       }
     }
   }

package/.turbo/turbo-lint.log

@@ -1,12 +0,0 @@
-
-> @react-md/core@1.0.0-next.6 lint /home/mlaursen/code/react-md/packages/core
-> npm-run-all lint-scripts lint-styles
-
-
-> @react-md/core@1.0.0-next.6 lint-scripts /home/mlaursen/code/react-md/packages/core
-> eslint "src/**/*.{ts,tsx,js,jsx,cjs,mjs}"
-
-
-> @react-md/core@1.0.0-next.6 lint-styles /home/mlaursen/code/react-md/packages/core
-> stylelint "src/**/*.{css,scss}"
-