@react-md/core 1.0.0-next.1 → 1.0.0-next.3

package/src/app-bar/AppBar.tsx

@@ -5,7 +5,13 @@ import {
   type HTMLAttributes,
   type Ref,
 } from "react";
-import { cssUtils, type BackgroundColor } from "../cssUtils.js";
+import { box, type BoxOptions } from "../box/styles.js";
+import {
+  cssUtils,
+  type BackgroundColor,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  type CssUtilsOptions,
+} from "../cssUtils.js";
 import { type CssPosition } from "../types.js";
 import { bem } from "../utils/bem.js";
 
@@ -52,7 +58,7 @@ export type AppBarHeight =
   | "prominent-dense";
 
 /** @remarks \@since 6.0.0 */
-export interface AppBarClassNameOptions {
+export interface AppBarClassNameOptions extends Omit<BoxOptions, "fullWidth"> {
   className?: string;
 
   /**
@@ -87,21 +93,15 @@ export interface AppBarClassNameOptions {
    */
   theme?: AppBarTheme;
 
-  /**
-   * Set this to `true` to update the `AppBar` to have `flex-direction: column`.
-   * This is useful when nesting `AppBar`s.
-   *
-   * @remarks \@since 6.0.0
-   * @defaultValue `false`
-   */
-  stacked?: boolean;
-
   /**
    * @defaultValue `stacked ? "auto" : "normal"`
    * @see {@link AppBarHeight}
    */
   height?: AppBarHeight;
 
+  /** @see {@link CssUtilsOptions.surfaceColor} */
+  surfaceColor?: "light" | "dark";
+
   /**
    * Set this to `true` if the app bar's positioning and width should be
    * changed whenever the scrollbar is visible on the page. This defaults to
@@ -123,13 +123,22 @@ export interface AppBarClassNameOptions {
 export function appBar(options: AppBarClassNameOptions = {}): string {
   const {
     className,
-    height = "normal",
     theme = "primary",
-    stacked = false,
+    stacked,
+    height = stacked ? "auto" : "normal",
     position = "static",
     pagePosition = "top",
     scrollbarOffset = position === "fixed",
-    disableElevation = false,
+    align,
+    grid,
+    gridColumns,
+    gridName,
+    justify,
+    reversed,
+    surfaceColor,
+    disableWrap = true,
+    disablePadding,
+    disableElevation,
   } = options;
   const surface = theme === "surface";
   const clear = theme === "clear";
@@ -139,15 +148,28 @@ export function appBar(options: AppBarClassNameOptions = {}): string {
       surface,
       [height]: height !== "normal",
       fixed: position !== "static",
-      sticky: position === "sticky",
       stacked,
+      sticky: position === "sticky",
       [pagePosition]: position !== "static",
       elevated: position !== "static" && !disableElevation,
       "scrollbar-offset": scrollbarOffset,
       "static-scrollbar-offset": position === "static" && scrollbarOffset,
     }),
+    box({
+      align,
+      stacked,
+      fullWidth: true,
+      grid,
+      gridColumns,
+      gridName,
+      justify,
+      reversed,
+      disableWrap,
+      disablePadding,
+    }),
     cssUtils({
       backgroundColor: !surface && !clear ? theme : undefined,
+      surfaceColor,
     }),
     className
   );
@@ -212,9 +234,18 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       className,
       theme,
       stacked,
-      height = stacked ? "auto" : "normal",
+      height,
+      align,
+      grid,
+      gridName,
+      justify,
+      reversed,
+      gridColumns,
+      disableWrap,
+      disablePadding,
       position,
       pagePosition,
+      surfaceColor,
       scrollbarOffset,
       disableElevation,
       as: Component = position ? "header" : "div",
@@ -226,14 +257,23 @@ export const AppBar = forwardRef<HTMLDivElement, AppBarProps>(
       <Component
         {...remaining}
         className={appBar({
+          className,
           theme,
           position,
           pagePosition,
           disableElevation,
-          stacked,
-          height,
-          className,
           scrollbarOffset,
+          height,
+          grid,
+          gridName,
+          gridColumns,
+          align,
+          stacked,
+          justify,
+          reversed,
+          surfaceColor,
+          disableWrap,
+          disablePadding,
         })}
         ref={ref}
       >

package/src/app-bar/__tests__/__snapshots__/AppBar.tsx.snap

@@ -2,98 +2,98 @@
 
 exports[`AppBar should allow for different heights 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 3`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--prominent rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--prominent rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 4`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--prominent-dense rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--prominent-dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 5`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--dense rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--dense rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different heights 6`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--auto rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--auto rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-secondary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-secondary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 3`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--surface"
+  class="rmd-app-bar rmd-app-bar--surface rmd-box rmd-box--padded rmd-box--full-width"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow for different theme colors 4`] = `
 <div
-  class="rmd-app-bar"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 1`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 2`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should allow the app bar to be fixed to the top or bottom of the page 3`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--bottom rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--bottom rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 />
 `;
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 1`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -106,7 +106,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 2`] = `
 <div
-  class="rmd-app-bar rmd-background-container rmd-primary-container custom-class-name"
+  class="rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container custom-class-name"
   data-testid="app-bar"
   style="background-color: orange;"
 >
@@ -120,7 +120,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 3`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--elevated rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -133,7 +133,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 4`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--scrollbar-offset rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--top rmd-app-bar--scrollbar-offset rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -146,7 +146,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 5`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-app-bar--elevated rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -159,7 +159,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 6`] = `
 <header
-  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--fixed rmd-app-bar--sticky rmd-app-bar--top rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -172,7 +172,7 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 
 exports[`AppBar should apply the correct styling, HTML attributes, and allow a ref 7`] = `
 <div
-  class="rmd-app-bar rmd-app-bar--auto rmd-app-bar--stacked rmd-background-container rmd-primary-container"
+  class="rmd-app-bar rmd-app-bar--auto rmd-app-bar--stacked rmd-box rmd-box--padded rmd-box--column rmd-box--full-width rmd-background-container rmd-primary-container"
   data-testid="app-bar"
 >
   <h6
@@ -183,4 +183,4 @@ exports[`AppBar should apply the correct styling, HTML attributes, and allow a r
 </div>
 `;
 
-exports[`AppBar styling utils should be callback without any arguments 1`] = `"rmd-app-bar rmd-background-container rmd-primary-container"`;
+exports[`AppBar styling utils should be callback without any arguments 1`] = `"rmd-app-bar rmd-box rmd-box--padded rmd-box--full-width rmd-background-container rmd-primary-container"`;

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

@@ -1,6 +1,7 @@
 @use "sass:map";
 
 @use "../utils";
+@use "../box/box";
 @use "../box-shadows";
 @use "../interaction/interaction";
 @use "../theme/a11y";
@@ -59,38 +60,25 @@ $vertical-padding: 0 !default;
 
 $keyline: 1rem !default;
 $title-keyline: 4.5rem !default;
+// 3rem is the icon-button's default size. can't use the variables since it's
+// based on font-size now and `em`
+$nav-keyline: $title-keyline - $horizontal-padding - $gap - 3rem !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 +109,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 {
@@ -129,17 +125,14 @@ $var-lookup: (
 
     .rmd-app-bar {
       @include use-var(height);
+      @include box.set-var(gap, $gap);
+      @include box.set-var(padding, $vertical-padding $horizontal-padding);
 
-      align-items: center;
-      display: flex;
       // since app bars can appear a lot in full page dialogs, setting these flex
       // values allows it be be a direct replacement of the `DialogHeader`
       // component without all the offsets and additional styles needed for fixed
       // app bars.
       flex: 0 0 auto;
-      gap: $gap;
-      padding: $vertical-padding $horizontal-padding;
-      width: 100%;
 
       @if not $disable-fixed or not $disable-sticky {
         &--fixed {
@@ -245,10 +238,7 @@ $var-lookup: (
         }
 
         &--nav-keyline {
-          @include utils.auto-rtl(
-            margin-left,
-            $title-keyline - $horizontal-padding - $gap - button.$icon-size
-          );
+          @include utils.auto-rtl(margin-left, $nav-keyline);
         }
       }
     }

package/src/avatar/Avatar.tsx

@@ -16,7 +16,7 @@ declare module "react" {
 export type AvatarImgAttributes = ImgHTMLAttributes<HTMLImageElement>;
 
 export interface AvatarProps
-  extends HTMLAttributes<HTMLSpanElement>,
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">,
     AvatarClassNameOptions {
   /**
    * This should be an image `src` attribute to create an avatar from. When this

package/src/avatar/_avatar.scss

@@ -14,6 +14,7 @@ $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;
@@ -44,49 +45,28 @@ $default-colors: (
 
 $colors: $default-colors !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,
-  ),
+$variables: (
+  background-color,
+  color,
+  border-color,
+  border-radius,
+  size,
+  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));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $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) {
@@ -102,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/src/badge/_badge.scss

@@ -12,8 +12,9 @@ $disable-secondary-theme: false !default;
 
 $size: 1.5rem !default;
 $font-size: 0.625rem !default;
-$offset-top: 0 !default;
-$offset-right: 0 !default;
+$offset: 0 !default;
+$offset-top: $offset !default;
+$offset-right: $offset !default;
 $border-radius: 50% !default;
 $typography: map.merge(
   map.remove(typography.$body-1-styles, line-height, font-size),
@@ -22,58 +23,103 @@ $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, $offset);
+    @if $offset != $offset-top {
+      @include set-var(offset-top, $offset-top);
+    }
+    @if $offset != $offset-right {
+      @include set-var(offset-right, $offset-right);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     .rmd-badge {
       @include utils.map-to-styles($typography);
       @include use-var(height, size);
       @include use-var(width, size);
-      @include utils.auto-rtl(right, get-var(offset-right));
-      @include use-var(top, offset-top);
+      @include utils.auto-rtl(right, get-var(offset-right, get-var(offset)));
+      @include use-var(top, offset-top, get-var(offset));
 
       align-items: center;
       border-radius: $border-radius;
@@ -84,22 +130,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);
         }
       }
     }