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

package/dist/_core.scss

@@ -267,7 +267,11 @@ $_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;
+      }
     }
   }
 
@@ -308,6 +312,7 @@ $_layer-order: (
   @include form.use-light-theme;
   @include table.use-light-theme;
   @include segmented-button.use-light-theme;
+  @include badge.use-light-theme;
 }
 
 @mixin use-dark-theme {
@@ -322,6 +327,38 @@ $_layer-order: (
   @include form.use-dark-theme;
   @include table.use-dark-theme;
   @include segmented-button.use-dark-theme;
+  @include badge.use-dark-theme;
+}
+
+@mixin variables {
+  @include theme.theme-variables;
+  @include app-bar.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.variables;
+  @include icon.variables;
+  @include interaction.variables;
+  @include layout.variables;
+  @include link.variables;
+  @include list.variables;
+  @include menu.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;
 }
 
 @mixin styles {
@@ -449,7 +486,7 @@ $_layer-order: (
 
   @if not theme.$disable-default-root-theme {
     :root {
-      @include theme.colors;
+      @include variables;
 
       @if not
         theme.$disable-default-system-theme and

package/dist/_utils.scss

@@ -64,6 +64,63 @@ $_swappable-properties: text-align;
   @return if($is-list, $key-or-value, map.get($list-or-map, $key-or-value));
 }
 
+@function get-var-name($variables, $name, $group) {
+  @if $group == icon {
+    @if $name == symbol-grade {
+      @return --rmd-symbol-grad;
+    }
+    @if $name == symbol-weight {
+      @return --rmd-symbol-wght;
+    }
+    @if $name == optical-size {
+      @return --rmd-symbol-opsz;
+    }
+  }
+  @if $group == name and $name == fab-offset {
+    @return --rmd-fab-offset;
+  }
+
+  @if $group == form {
+    @if $name ==
+      addon-top or
+      $name ==
+      addon-margin-top or
+      $name ==
+      active-color or
+      $name ==
+      focus-color
+    {
+      @return --rmd-form-#{$name};
+    }
+  }
+  @if $group == interaction and $name == background-color {
+    @return --rmd-interaction-#{$name};
+  }
+
+  @if $group == list {
+    $updated: str-replace(
+      str-replace($name, "horizontal-padding", "padding-h"),
+      "vertical-padding",
+      "padding-v"
+    );
+    @if $updated != $name {
+      @return --rmd-list-#{$name};
+    }
+  }
+
+  @if $group == snackbar and $name != offset {
+    @return --rmd-toast-#{$name};
+  }
+
+  $prefix: "";
+  @if not list.index((theme, form, interaction, transition, typography), $group)
+  {
+    $prefix: $group + "-";
+  }
+
+  @return "--rmd-" + $prefix + validate($variables, $name, $group + " var");
+}
+
 @mixin map-to-styles($map) {
   @each $property, $value in $map {
     @if meta.type-of($value) == map {

package/dist/app-bar/_app-bar.scss

@@ -60,37 +60,21 @@ $vertical-padding: 0 !default;
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
 
-$var-lookup: (
-  height: (
-    var: --rmd-app-bar-height,
-    value: $height,
-  ),
-  surface-background-color: (
-    var: --rmd-app-bar-surface-background-color,
-    value: $surface-background-color,
-  ),
-  surface-color: (
-    var: --rmd-app-bar-surface-color,
-    value: $surface-color,
-  ),
-);
+$variables: (height, surface-background-color, surface-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "app-bar 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, "app-bar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "app-bar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "app-bar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -121,6 +105,14 @@ $var-lookup: (
   @include set-var(height, $dense-height);
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(height, $height);
+    @include set-var(surface-background-color, $surface-background-color);
+    @include set-var(surface-color, $surface-color);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include theme.default-system-theme {

package/dist/avatar/Avatar.d.ts

@@ -1,5 +1,6 @@
 import { type HTMLAttributes, type ImgHTMLAttributes } from "react";
 import { type PropsWithRef } from "../types.js";
+import { type AvatarClassNameOptions } from "./styles.js";
 declare module "react" {
     interface CSSProperties {
         "--rmd-avatar-background-color"?: string;
@@ -11,7 +12,7 @@ declare module "react" {
     }
 }
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
-export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
+export interface AvatarProps extends HTMLAttributes<HTMLSpanElement>, AvatarClassNameOptions {
     /**
      * This should be an image `src` attribute to create an avatar from. When this
      * prop is defined, you should not add any children to the avatar as the
@@ -51,20 +52,6 @@ export interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
      * @remarks \@since 2.2.0
      */
     imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;
-    /**
-     * An optional color to apply to the avatar. This will apply a className of
-     * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map
-     * are supported by default. It is recommended to create custom colors using
-     * the `rmd-avatar-theme-update-var` mixin with custom class names if the
-     * default colors aren't extensive enough.
-     *
-     * @defaultValue `""`
-     */
-    color?: string;
-    /**
-     * @defaultValue `"avatar"`
-     */
-    size?: "avatar" | "icon";
 }
 /**
  * **Server Component**

package/dist/avatar/Avatar.js

@@ -20,7 +20,7 @@ import { avatar, avatarImage } from "./styles.js";
  * }
  * ```
  */ export const Avatar = /*#__PURE__*/ forwardRef(function Avatar(props, ref) {
-    const { className, children, src, size = "avatar", alt = "", color = "", imgProps, referrerPolicy, ...remaining } = props;
+    const { className, children, src, alt = "", size = "avatar", color = "", theme, imgProps, referrerPolicy, ...remaining } = props;
     let img;
     if (src || imgProps) {
         img = /*#__PURE__*/ _jsx("img", {
@@ -38,8 +38,9 @@ import { avatar, avatarImage } from "./styles.js";
         ref: ref,
         role: "presentation",
         className: avatar({
-            color,
             size,
+            color,
+            theme,
             className
         }),
         children: [

package/dist/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @remarks \\@since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @remarks \\@since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      className,\n      children,\n      src,\n      size = \"avatar\",\n      alt = \"\",\n      color = \"\",\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        role=\"presentation\"\n        className={avatar({ color, size, className })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","size","alt","color","imgProps","referrerPolicy","remaining","img","span","role"],"mappings":";AAAA,SAASA,UAAU,QAAqD,QAAQ;AAEhF,SAASC,MAAM,EAAEC,WAAW,QAAQ,cAAc;AA4ElD;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,OAAO,QAAQ,EACfC,MAAM,EAAE,EACRC,QAAQ,EAAE,EACVC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGV;IAEJ,IAAIW;IACJ,IAAIP,OAAOI,UAAU;QACnBG,oBACE,KAACA;YACCP,KAAKA;YACLE,KAAKA;YACLG,gBAAgBA;YACf,GAAGD,QAAQ;YACZN,WAAWJ,YAAY;gBAAEI,WAAWM,UAAUN;YAAU;;IAG9D;IAEA,qBACE,MAACU;QACE,GAAGF,SAAS;QACbT,KAAKA;QACLY,MAAK;QACLX,WAAWL,OAAO;YAAEU;YAAOF;YAAMH;QAAU;;YAE1CS;YACAR;;;AAGP,GACA"}
+{"version":3,"sources":["../../src/avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type ImgHTMLAttributes } from \"react\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { avatar, avatarImage, type AvatarClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-avatar-background-color\"?: string;\n    \"--rmd-avatar-color\"?: string;\n    \"--rmd-avatar-border-color\"?: string;\n    \"--rmd-avatar-border-radius\"?: string | number;\n    \"--rmd-avatar-size\"?: string | number;\n    \"--rmd-avatar-font-size\"?: string | number;\n  }\n}\n\nexport type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;\n\nexport interface AvatarProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    AvatarClassNameOptions {\n  /**\n   * This should be an image `src` attribute to create an avatar from. When this\n   * prop is defined, you should not add any children to the avatar as the\n   * positioning will break.\n   */\n  src?: string;\n\n  /**\n   * An optional alt tag to display on the `<img>` when the `src` prop is also\n   * applied.\n   *\n   * For accessibility and screen readers, you normally do not want to actually\n   * provide this prop. This should only be used if the `Avatar` is not\n   * accompanied by some other component or main content as it will be extra\n   * noise for screen readers.\n   *\n   * @defaultValue `\"\"`\n   */\n  alt?: string;\n\n  /**\n   * An optional `referrerPolicy` to provide to the `<img>` element if the `src`\n   * or `imgProps` props are provided.\n   *\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-referrerpolicy|Referrer Policy}\n   *\n   * @remarks \\@since 2.2.0\n   */\n  referrerPolicy?: AvatarImgAttributes[\"referrerPolicy\"];\n\n  /**\n   * An optional object of image props and ref that can be used to create an\n   * image within the `Avatar`. This can be useful to add a custom `style`\n   * or`className` to the `<img>` element if that additional customization is\n   * needed.\n   *\n   * Note: The values in this object will override the `src`, `alt`, and\n   * `referrerPolicy` root level avatar props if they exist on this object.\n   *\n   * @remarks \\@since 2.2.0\n   */\n  imgProps?: PropsWithRef<AvatarImgAttributes, HTMLImageElement>;\n}\n\n/**\n * **Server Component**\n *\n * An `Avatar` is generally used to represent objects or people within your app.\n * The avatar can consist of an image, an icon, or some text to display. When\n * the avatar is not an image, different themes can be applied to make the\n * avatar more unique.\n *\n * @example\n * Simple Example\n * ```tsx\n * import { Avatar } from \"@react-md/core\";\n * import { type ReactElement } from \"react\";\n *\n * export function Example(): ReactElement {\n *   return <Avatar src=\"/path-to-img.png\" />;\n * }\n * ```\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar(props, ref) {\n    const {\n      className,\n      children,\n      src,\n      alt = \"\",\n      size = \"avatar\",\n      color = \"\",\n      theme,\n      imgProps,\n      referrerPolicy,\n      ...remaining\n    } = props;\n\n    let img;\n    if (src || imgProps) {\n      img = (\n        <img\n          src={src}\n          alt={alt}\n          referrerPolicy={referrerPolicy}\n          {...imgProps}\n          className={avatarImage({ className: imgProps?.className })}\n        />\n      );\n    }\n\n    return (\n      <span\n        {...remaining}\n        ref={ref}\n        role=\"presentation\"\n        className={avatar({\n          size,\n          color,\n          theme,\n          className,\n        })}\n      >\n        {img}\n        {children}\n      </span>\n    );\n  }\n);\n"],"names":["forwardRef","avatar","avatarImage","Avatar","props","ref","className","children","src","alt","size","color","theme","imgProps","referrerPolicy","remaining","img","span","role"],"mappings":";AAAA,SAASA,UAAU,QAAqD,QAAQ;AAEhF,SAASC,MAAM,EAAEC,WAAW,QAAqC,cAAc;AA8D/E;;;;;;;;;;;;;;;;;;CAkBC,GACD,OAAO,MAAMC,uBAASH,WACpB,SAASG,OAAOC,KAAK,EAAEC,GAAG;IACxB,MAAM,EACJC,SAAS,EACTC,QAAQ,EACRC,GAAG,EACHC,MAAM,EAAE,EACRC,OAAO,QAAQ,EACfC,QAAQ,EAAE,EACVC,KAAK,EACLC,QAAQ,EACRC,cAAc,EACd,GAAGC,WACJ,GAAGX;IAEJ,IAAIY;IACJ,IAAIR,OAAOK,UAAU;QACnBG,oBACE,KAACA;YACCR,KAAKA;YACLC,KAAKA;YACLK,gBAAgBA;YACf,GAAGD,QAAQ;YACZP,WAAWJ,YAAY;gBAAEI,WAAWO,UAAUP;YAAU;;IAG9D;IAEA,qBACE,MAACW;QACE,GAAGF,SAAS;QACbV,KAAKA;QACLa,MAAK;QACLZ,WAAWL,OAAO;YAChBS;YACAC;YACAC;YACAN;QACF;;YAECU;YACAT;;;AAGP,GACA"}

package/dist/avatar/_avatar.scss

@@ -14,13 +14,14 @@ $disable-auto-image: false !default;
 $color: colors.$grey-100 !default;
 $background-color: colors.$grey-700 !default;
 $line-height: map.get(typography.$subtitle-1-styles, line-height) !default;
+$border-color: transparent !default;
 $border-radius: 50% !default;
 $size: 2.5rem !default;
 $font-size: 1.5rem !default;
 $icon-sized-size: icon.get-var(size) !default;
 $icon-sized-font-size: 0.75rem !default;
 
-$colors: (
+$default-colors: (
   red: colors.$red-a-700 colors.$red-50,
   pink: colors.$pink-600 colors.$white,
   purple: colors.$purple-700 colors.$purple-100,
@@ -40,51 +41,32 @@ $colors: (
   brown: colors.$brown-500 colors.$brown-50,
   grey: colors.$grey-700 colors.$grey-100,
   blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
-) !default;
-
-$var-lookup: (
-  background-color: (
-    var: --rmd-avatar-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-avatar-color,
-    value: $color,
-  ),
-  border-color: (
-    var: --rmd-avatar-border-color,
-    value: transparent,
-  ),
-  border-radius: (
-    var: --rmd-avatar-border-radius,
-    value: $border-radius,
-  ),
-  size: (
-    var: --rmd-avatar-size,
-    value: $size,
-  ),
-  font-size: (
-    var: --rmd-avatar-font-size,
-    value: $font-size,
-  ),
 );
 
-@function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "avatar var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
+$colors: $default-colors !default;
 
-  @if $value {
-    @return var(#{$var}, #{$value});
+$variables: (
+  background-color,
+  color,
+  border-color,
+  border-radius,
+  size,
+  font-size
+);
+
+@function get-var($name, $fallback: null) {
+  $var: utils.get-var-name($variables, $name, "avatar");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "avatar var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "avatar")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -100,6 +82,17 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+    @include set-var(border-color, $border-color);
+    @include set-var(border-radius, $border-radius);
+    @include set-var(size, $size);
+    @include set-var(font-size, $font-size);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-avatar {

package/dist/avatar/styles.d.ts

@@ -1,10 +1,28 @@
+import { type ThemeColor } from "../cssUtils.js";
 /** @remarks \@since 6.0.0 */
 export interface AvatarClassNameOptions {
     className?: string;
-    /** @defaultValue `""` */
+    /**
+     * An optional color to apply to the avatar. This will apply a className of
+     * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map
+     * are supported by default. It is recommended to create custom colors using
+     * the `rmd-avatar-theme-update-var` mixin with custom class names if the
+     * default colors aren't extensive enough.
+     *
+     * @see {@link theme}
+     * @defaultValue `""`
+     */
     color?: string;
-    /** @defaultValue `"avatar"` */
+    /**
+     * @defaultValue `"avatar"`
+     */
     size?: "avatar" | "icon";
+    /**
+     * This can be used instead of {@link color} to set the background color to one of
+     * the theme colors. This will also set the text color to either be `#000` or
+     * `#fff` automatically to enforce the correct aspect ratio.
+     */
+    theme?: ThemeColor;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/avatar/styles.js

@@ -1,13 +1,16 @@
 import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-avatar");
 /**
  * @remarks \@since 6.0.0
  */ export function avatar(options) {
-    const { className, color = "", size } = options;
+    const { className, color = "", size, theme } = options;
     return cnb(styles({
         [color]: color,
         icon: size === "icon"
+    }), cssUtils({
+        backgroundColor: theme
     }), className);
 }
 /**

package/dist/avatar/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `\"\"` */\n  color?: string;\n\n  /** @defaultValue `\"avatar\"` */\n  size?: \"avatar\" | \"icon\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size } = options;\n\n  return cnb(styles({ [color]: color, icon: size === \"icon\" }), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","bem","styles","avatar","options","className","color","size","icon","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAE,GAAGH;IAExC,OAAOJ,IAAIE,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOE,MAAMD,SAAS;IAAO,IAAIF;AAChE;AAOA;;CAEC,GACD,OAAO,SAASI,YAAYL,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOJ,IAAIE,OAAO,UAAUG;AAC9B"}
+{"version":3,"sources":["../../src/avatar/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils, type ThemeColor } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-avatar\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarClassNameOptions {\n  className?: string;\n\n  /**\n   * An optional color to apply to the avatar. This will apply a className of\n   * `rmd-avatar--${color}`, so only the keys from the `$rmd-avatar-colors` Map\n   * are supported by default. It is recommended to create custom colors using\n   * the `rmd-avatar-theme-update-var` mixin with custom class names if the\n   * default colors aren't extensive enough.\n   *\n   * @see {@link theme}\n   * @defaultValue `\"\"`\n   */\n  color?: string;\n\n  /**\n   * @defaultValue `\"avatar\"`\n   */\n  size?: \"avatar\" | \"icon\";\n\n  /**\n   * This can be used instead of {@link color} to set the background color to one of\n   * the theme colors. This will also set the text color to either be `#000` or\n   * `#fff` automatically to enforce the correct aspect ratio.\n   */\n  theme?: ThemeColor;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatar(options: AvatarClassNameOptions): string {\n  const { className, color = \"\", size, theme } = options;\n\n  return cnb(\n    styles({ [color]: color, icon: size === \"icon\" }),\n    cssUtils({ backgroundColor: theme }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface AvatarImageClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function avatarImage(options: AvatarImageClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(styles(\"image\"), className);\n}\n"],"names":["cnb","cssUtils","bem","styles","avatar","options","className","color","size","theme","icon","backgroundColor","avatarImage"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAyB,iBAAiB;AAC3D,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA+BnB;;CAEC,GACD,OAAO,SAASE,OAAOC,OAA+B;IACpD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGJ;IAE/C,OAAOL,IACLG,OAAO;QAAE,CAACI,MAAM,EAAEA;QAAOG,MAAMF,SAAS;IAAO,IAC/CP,SAAS;QAAEU,iBAAiBF;IAAM,IAClCH;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASM,YAAYP,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,OAAO,UAAUG;AAC9B"}

package/dist/badge/_badge.scss

@@ -22,50 +22,91 @@ $typography: map.merge(
   )
 ) !default;
 
-$greyscale-background-color: rgba(colors.$black, 0.2) !default;
-$greyscale-color: a11y.contrast-color($greyscale-background-color) !default;
+$light-theme-greyscale-background-color: #ccc !default;
+$light-theme-greyscale-color: a11y.contrast-color(
+  $light-theme-greyscale-background-color
+) !default;
+$dark-theme-greyscale-background-color: colors.$grey-700 !default;
+$dark-theme-greyscale-color: a11y.contrast-color(
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-background-color: theme.get-default-color(
+  $light-theme-greyscale-background-color,
+  $dark-theme-greyscale-background-color
+) !default;
+$greyscale-color: theme.get-default-color(
+  $light-theme-greyscale-color,
+  $dark-theme-greyscale-color
+) !default;
 
-$var-lookup: (
-  size: (
-    var: --rmd-badge-size,
-    value: $size,
-  ),
-  offset: (
-    var: --rmd-badge-offset,
-    value: 0,
-  ),
-  offset-top: (
-    var: --rmd-badge-offset-top,
-    value: var(--rmd-badge-offset, $offset-top),
-  ),
-  offset-right: (
-    var: --rmd-badge-offset-right,
-    value: var(--rmd-badge-offset, $offset-right),
-  ),
+$variables: (
+  greyscale-background-color,
+  greyscale-color,
+  size,
+  offset,
+  offset-top,
+  offset-right
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "badge 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, "badge");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "badge var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "badge")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+@mixin use-light-theme {
+  @if $light-theme-greyscale-background-color !=
+    $dark-theme-greyscale-background-color
+  {
+    @include set-var(
+      greyscale-background-color,
+      $light-theme-greyscale-background-color
+    );
+  }
+  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+    @include set-var(greyscale-color, $light-theme-greyscale-color);
+  }
+}
+
+@mixin use-dark-theme {
+  @if $light-theme-greyscale-background-color !=
+    $dark-theme-greyscale-background-color
+  {
+    @include set-var(
+      greyscale-background-color,
+      $dark-theme-greyscale-background-color
+    );
+  }
+
+  @if $light-theme-greyscale-color != $dark-theme-greyscale-color {
+    @include set-var(greyscale-color, $dark-theme-greyscale-color);
+  }
+}
+
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(greyscale-background-color, $greyscale-background-color);
+    @include set-var(greyscale-color, $greyscale-color);
+    @include set-var(size, $size);
+    @include set-var(offset, 0);
+    @include set-var(offset-top, get-var(offset));
+    @include set-var(offset-right, get-var(offset));
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-badge {
@@ -84,22 +125,8 @@ $var-lookup: (
 
       @if not $disable-greyscale-theme {
         &--greyscale {
-          background-color: $greyscale-background-color;
-          color: $greyscale-color;
-        }
-      }
-
-      @if not $disable-primary-theme {
-        &--primary {
-          @include theme.theme-use-var(background-color, primary-color);
-          @include theme.theme-use-var(color, on-primary-color);
-        }
-      }
-
-      @if not $disable-secondary-theme {
-        &--secondary {
-          @include theme.theme-use-var(background-color, secondary-color);
-          @include theme.theme-use-var(color, on-secondary-color);
+          @include use-var(background-color, greyscale-background-color);
+          @include use-var(color, greyscale-color);
         }
       }
     }

package/dist/box/_box.scss

@@ -33,41 +33,21 @@ $item-min-size: 8rem !default;
 /// ```
 $grids: () !default;
 
-$var-lookup: (
-  gap: (
-    var: --rmd-box-gap,
-    value: $gap,
-  ),
-  padding: (
-    var: --rmd-box-padding,
-    value: $padding,
-  ),
-  min-size: (
-    var: --rmd-box-item-min-size,
-    value: $item-min-size,
-  ),
-  columns: (
-    var: --rmd-box-columns,
-    value: auto-fit,
-  ),
-);
+$variables: (gap, padding, item-min-size, columns);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "box 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, "box");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "box var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "box")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -94,6 +74,15 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(gap, $gap);
+    @include set-var(padding, $padding);
+    @include set-var(item-min-size, $item-min-size);
+    @include set-var(columns, auto-fit);
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-box {
@@ -149,7 +138,7 @@ $var-lookup: (
           display: grid;
           grid-template-columns: repeat(
             get-var(columns),
-            minmax(get-var(min-size), 1fr)
+            minmax(get-var(item-min-size), 1fr)
           );
         }
 
@@ -159,7 +148,7 @@ $var-lookup: (
 
         @if not $disable-grid-columns {
           &--grid-columns {
-            @include set-var(min-size, 0);
+            @include set-var(item-min-size, 0);
           }
         }