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

package/dist/card/_card.scss

@@ -4,12 +4,14 @@
 @use "../box-shadows";
 @use "../typography/typography";
 @use "../divider/divider";
+@use "../interaction/interaction";
 
 $disable-everything: false !default;
 $disable-bordered: false !default;
 $disable-shadowed: false !default;
 $disable-raisable: false !default;
 $disable-full-width: false !default;
+$disable-clickable: false !default;
 $disable-content-secondary-color: false !default;
 $disable-content-last-child-padding: false !default;
 
@@ -44,37 +46,21 @@ $content-padding-bottom: 1.5rem !default;
 
 $footer-padding: 0.5rem !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-card-background-color,
-    value: $background-color,
-  ),
-  color: (
-    var: --rmd-card-color,
-    value: $color,
-  ),
-  secondary-color: (
-    var: --rmd-card-secondary-color,
-    value: null,
-  ),
-);
+$variables: (background-color, color, secondary-color);
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "card 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, "card");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "card var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "card")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -93,22 +79,29 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include set-var(background-color, $background-color);
+    @include set-var(color, $color);
+  }
+}
 
-    .rmd-card {
-      @include use-var(background-color);
-      @include use-var(color);
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(card, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
+      }
 
-      border-radius: $border-radius;
-      display: inline-block;
-      max-width: 100%;
+      .rmd-card {
+        @include use-var(background-color);
+        @include use-var(color);
 
-      @if not $disable-raisable {
-        @include utils.mouse-only {
+        border-radius: $border-radius;
+        display: inline-block;
+        max-width: 100%;
+
+        @if not $disable-raisable {
           &--raisable {
             @include box-shadows.elevation-transition(
               $raisable-start-elevation,
@@ -117,72 +110,78 @@ $var-lookup: (
             );
           }
         }
-      }
 
-      @if not $disable-shadowed {
-        &--shadowed {
-          @include box-shadows.box-shadow($elevation);
+        @if not $disable-shadowed {
+          &--shadowed {
+            @include box-shadows.box-shadow($elevation);
+          }
         }
-      }
 
-      @if not $disable-bordered {
-        &--bordered {
-          border: $border-width inset $border-color;
+        @if not $disable-bordered {
+          &--bordered {
+            border: $border-width inset $border-color;
+          }
         }
-      }
 
-      @if not $disable-full-width {
-        &--full-width {
-          display: block;
-          width: 100%;
+        @if not $disable-full-width {
+          &--full-width {
+            display: block;
+            width: 100%;
+          }
         }
-      }
 
-      &__header {
-        align-items: center;
-        column-gap: $header-spacing;
-        display: flex;
-        padding: $header-padding-top $header-padding $header-padding;
-      }
+        @if not $disable-clickable {
+          &--clickable {
+            @include interaction.surface;
+          }
+        }
+
+        &__header {
+          align-items: center;
+          column-gap: $header-spacing;
+          display: flex;
+          padding: $header-padding-top $header-padding $header-padding;
+        }
 
-      &__header-content {
-        @include typography.text-overflow;
+        &__header-content {
+          @include typography.text-overflow;
 
-        flex: 1 1 auto;
-        min-width: 1;
-      }
+          flex: 1 1 auto;
+          min-width: 0;
+        }
 
-      // does not require custom styles
-      // &__title {
-      // }
+        // does not require custom styles
+        // &__title {
+        // }
 
-      // does not require custom styles
-      // &__subtitle {
-      // }
+        // does not require custom styles
+        // &__subtitle {
+        // }
 
-      &__content {
-        @if not $disable-content-secondary-color {
-          &--secondary {
-            @include theme.theme-use-var(color, text-secondary-color);
+        &__content {
+          @if not $disable-content-secondary-color {
+            &--secondary {
+              @include theme.theme-use-var(color, text-secondary-color);
+            }
           }
-        }
 
-        @if $content-padding {
-          &--padded {
-            padding: $content-padding;
+          @if $content-padding {
+            &--padded {
+              padding: $content-padding;
+            }
           }
-        }
 
-        @if not $disable-content-last-child-padding {
-          &--padded-bottom:last-child {
-            padding-bottom: $content-padding-bottom;
+          @if not $disable-content-last-child-padding {
+            &--padded-bottom:last-child {
+              padding-bottom: $content-padding-bottom;
+            }
           }
         }
-      }
 
-      @if $footer-padding {
-        &__footer {
-          padding: $footer-padding;
+        @if $footer-padding {
+          &__footer {
+            padding: $footer-padding;
+          }
         }
       }
     }

package/dist/card/styles.d.ts

@@ -22,6 +22,14 @@ export interface CardClassNameOptions {
      * @defaultValue `false`
      */
     fullWidth?: boolean;
+    /**
+     * Set this to `true` if the card should gain the pointer cursor while
+     * hovering and other interaction styles and not using the `ClickableCard`
+     * component.
+     *
+     * @defaultValue `false`
+     */
+    interactable?: boolean;
 }
 /**
  * @remarks \@since 6.0.0

package/dist/card/styles.js

@@ -5,11 +5,12 @@ const cardStyles = bem("rmd-card");
 /**
  * @remarks \@since 6.0.0
  */ export function card(options = {}) {
-    const { className, bordered = false, raisable = false, fullWidth = false } = options;
+    const { className, bordered, raisable, fullWidth, interactable } = options;
     return cnb(cardStyles({
         bordered,
         shadowed: !bordered,
         raisable: !bordered && raisable,
+        interactable,
         "full-width": fullWidth
     }), className);
 }
@@ -39,12 +40,14 @@ const cardStyles = bem("rmd-card");
  * @remarks \@since 6.0.0
  */ export function cardSubtitle(options = {}) {
     const { className } = options;
-    return cnb(cardStyles("subtitle"), className);
+    return cnb(cardStyles("subtitle"), cssUtils({
+        textColor: "text-secondary"
+    }), className);
 }
 /**
  * @remarks \@since 6.0.0
  */ export function cardContent(options = {}) {
-    const { className, disablePadding = false, disableSecondaryColor = false, disableLastChildPadding = false } = options;
+    const { className, disablePadding, disableSecondaryColor, disableLastChildPadding } = options;
     return cnb(cardStyles("content", {
         padded: !disablePadding,
         "padding-bottom": !disableLastChildPadding

package/dist/card/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const {\n    className,\n    bordered = false,\n    raisable = false,\n    fullWidth = false,\n  } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"subtitle\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding = false,\n    disableSecondaryColor = false,\n    disableLastChildPadding = false,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","textColor","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AA+BvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EACJC,SAAS,EACTC,WAAW,KAAK,EAChBC,WAAW,KAAK,EAChBC,YAAY,KAAK,EAClB,GAAGJ;IAEJ,OAAOL,IACLG,WAAW;QACTI;QACAG,UAAU,CAACH;QACXC,UAAU,CAACD,YAAYC;QACvB,cAAcC;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASK,WAAWN,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEM,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGR;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeS,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAP;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASS,kBACdV,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASU,UAAUX,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASW,aACdZ,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,aAAaG;AACrC;AA8BA;;CAEC,GACD,OAAO,SAASY,YAAYb,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTa,iBAAiB,KAAK,EACtBC,wBAAwB,KAAK,EAC7BC,0BAA0B,KAAK,EAChC,GAAGhB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBmB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACAnB,SAAS;QACPqB,WAAW,CAACH,wBAAwB,mBAAmBI;IACzD,IACAlB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASmB,WAAWpB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}
+{"version":3,"sources":["../../src/card/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { cssUtils } from \"../cssUtils.js\";\n\nconst cardStyles = bem(\"rmd-card\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the card should use apply an inset `border` instead\n   * of `box-shadow`.\n   *\n   * @defaultValue `false`\n   */\n  bordered?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain additional box shadow while\n   * hovered.\n   *\n   * @defaultValue `false`\n   */\n  raisable?: boolean;\n\n  /**\n   * Update the card to have `display: block` and `width: 100%` instead of\n   * `display: inline-block`.\n   *\n   * @defaultValue `false`\n   */\n  fullWidth?: boolean;\n\n  /**\n   * Set this to `true` if the card should gain the pointer cursor while\n   * hovering and other interaction styles and not using the `ClickableCard`\n   * component.\n   *\n   * @defaultValue `false`\n   */\n  interactable?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function card(options: CardClassNameOptions = {}): string {\n  const { className, bordered, raisable, fullWidth, interactable } = options;\n\n  return cnb(\n    cardStyles({\n      bordered,\n      shadowed: !bordered,\n      raisable: !bordered && raisable,\n      interactable,\n      \"full-width\": fullWidth,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  addonAfter?: boolean;\n\n  /** @defaultValue `false` */\n  addonBefore?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeader(options: CardHeaderClassNameOptions = {}): string {\n  const { className, addonAfter = false, addonBefore = false } = options;\n\n  return cnb(\n    cardStyles(\"header\", {\n      \"addon-after\": addonAfter && !addonBefore,\n      \"addon-before\": addonBefore && !addonAfter,\n      surrounded: addonAfter && addonBefore,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardHeaderContentClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardHeaderContent(\n  options: CardHeaderContentClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"header-content\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardTitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardTitle(options: CardTitleClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"title\"), className);\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardSubtitleClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardSubtitle(\n  options: CardSubtitleClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\n    cardStyles(\"subtitle\"),\n    cssUtils({ textColor: \"text-secondary\" }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardContentClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` to disable the card's padding.\n   *\n   * @defaultValue `false`\n   */\n  disablePadding?: boolean;\n\n  /**\n   * Set this to `true` to disable applying the `text-secondary-color`.\n   *\n   * @defaultValue `false`\n   */\n  disableSecondaryColor?: boolean;\n\n  /**\n   * Set this to `true` to disable applying extra `padding-bottom` if the\n   * `CardContent` component is the last child.\n   *\n   * @defaultValue `false`\n   * @remarks \\@since 6.0.0 Renamed from `disableExtraPadding`\n   */\n  disableLastChildPadding?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardContent(options: CardContentClassNameOptions = {}): string {\n  const {\n    className,\n    disablePadding,\n    disableSecondaryColor,\n    disableLastChildPadding,\n  } = options;\n\n  return cnb(\n    cardStyles(\"content\", {\n      padded: !disablePadding,\n      \"padding-bottom\": !disableLastChildPadding,\n    }),\n    cssUtils({\n      textColor: !disableSecondaryColor ? \"text-secondary\" : undefined,\n    }),\n    className\n  );\n}\n\n/** @remarks \\@since 6.0.0 */\nexport interface CardFooterClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function cardFooter(options: CardFooterClassNameOptions = {}): string {\n  const { className } = options;\n\n  return cnb(cardStyles(\"footer\"), className);\n}\n"],"names":["cnb","bem","cssUtils","cardStyles","card","options","className","bordered","raisable","fullWidth","interactable","shadowed","cardHeader","addonAfter","addonBefore","surrounded","cardHeaderContent","cardTitle","cardSubtitle","textColor","cardContent","disablePadding","disableSecondaryColor","disableLastChildPadding","padded","undefined","cardFooter"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,QAAQ,QAAQ,iBAAiB;AAE1C,MAAMC,aAAaF,IAAI;AAwCvB;;CAEC,GACD,OAAO,SAASG,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGL;IAEnE,OAAOL,IACLG,WAAW;QACTI;QACAI,UAAU,CAACJ;QACXC,UAAU,CAACD,YAAYC;QACvBE;QACA,cAAcD;IAChB,IACAH;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,WAAWP,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAEO,aAAa,KAAK,EAAEC,cAAc,KAAK,EAAE,GAAGT;IAE/D,OAAOL,IACLG,WAAW,UAAU;QACnB,eAAeU,cAAc,CAACC;QAC9B,gBAAgBA,eAAe,CAACD;QAChCE,YAAYF,cAAcC;IAC5B,IACAR;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASU,kBACdX,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,mBAAmBG;AAC3C;AAOA;;CAEC,GACD,OAAO,SAASW,UAAUZ,UAAqC,CAAC,CAAC;IAC/D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,UAAUG;AAClC;AAOA;;CAEC,GACD,OAAO,SAASY,aACdb,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IACLG,WAAW,aACXD,SAAS;QAAEiB,WAAW;IAAiB,IACvCb;AAEJ;AA8BA;;CAEC,GACD,OAAO,SAASc,YAAYf,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJC,SAAS,EACTe,cAAc,EACdC,qBAAqB,EACrBC,uBAAuB,EACxB,GAAGlB;IAEJ,OAAOL,IACLG,WAAW,WAAW;QACpBqB,QAAQ,CAACH;QACT,kBAAkB,CAACE;IACrB,IACArB,SAAS;QACPiB,WAAW,CAACG,wBAAwB,mBAAmBG;IACzD,IACAnB;AAEJ;AAOA;;CAEC,GACD,OAAO,SAASoB,WAAWrB,UAAsC,CAAC,CAAC;IACjE,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOL,IAAIG,WAAW,WAAWG;AACnC"}

package/dist/chip/_chip.scss

@@ -111,61 +111,31 @@ $outline-text-color: theme.get-default-color(
 $outline-raisable-box-shadow-z-value: 8 !default;
 $outline-raisable-transition-duration: transition.$linear-duration !default;
 
-$var-lookup: (
-  solid-background-color: (
-    var: --rmd-chip-solid-background-color,
-    value: $solid-background-color,
-  ),
-  solid-disabled-background-color: (
-    var: --rmd-chip-solid-disabled-background-color,
-    value: $solid-disabled-background-color,
-  ),
-  solid-color: (
-    var: --rmd-chip-solid-color,
-    value: $solid-color,
-  ),
-  theme-background-color: (
-    var: --rmd-chip-theme-background-color,
-    value: $theme-background-color,
-  ),
-  theme-color: (
-    var: --rmd-chip-theme-color,
-    value: $theme-color,
-  ),
-  outline-color: (
-    var: --rmd-chip-outline-color,
-    value: $outline-color,
-  ),
-  outline-width: (
-    var: --rmd-chip-outline-width,
-    value: $outline-width,
-  ),
-  outline-background-color: (
-    var: --rmd-chip-outline-background-color,
-    value: $outline-background-color,
-  ),
-  outline-text-color: (
-    var: --rmd-chip-outline-text-color,
-    value: $outline-text-color,
-  ),
+$variables: (
+  solid-background-color,
+  solid-disabled-background-color,
+  solid-color,
+  theme-background-color,
+  theme-color,
+  outline-color,
+  outline-width,
+  outline-background-color,
+  outline-text-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "chip 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, "chip");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "chip var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "chip")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -202,132 +172,151 @@ $var-lookup: (
   }
 }
 
-@mixin styles {
+@mixin variables {
   @if not $disable-everything {
-    @include theme.default-system-theme {
-      @include use-dark-theme;
-    }
+    @include set-var(solid-background-color, $solid-background-color);
+    @include set-var(
+      solid-disabled-background-color,
+      $solid-disabled-background-color
+    );
+    @include set-var(solid-color, $solid-color);
+    @include set-var(theme-background-color, $theme-background-color);
+    @include set-var(theme-color, $theme-color);
+    @include set-var(outline-color, $outline-color);
+    @include set-var(outline-width, $outline-width);
+    @include set-var(outline-background-color, $outline-background-color);
+    @include set-var(outline-text-color, $outline-text-color);
+  }
+}
 
-    .rmd-chip {
-      @if not $disable-icon {
-        @include icon.set-var(size, $icon-size);
+@mixin styles($disable-layer: false) {
+  @if not $disable-everything {
+    @include utils.optional-layer(chip, $disable-layer) {
+      @include theme.default-system-theme {
+        @include use-dark-theme;
       }
 
-      @if not $disable-avatar {
-        @include avatar.set-var(size, $avatar-size);
-      }
+      .rmd-chip {
+        @if not $disable-icon {
+          @include icon.set-var(size, $icon-size);
+        }
 
-      @if not $disable-progress {
-        @include progress.set-var(circular-size, $progress-size);
-        @include progress.set-var(circular-stroke-width, $progress-width);
-      }
+        @if not $disable-avatar {
+          @include avatar.set-var(size, $avatar-size);
+        }
 
-      @if not $disable-selected-icon-transition and $gap {
-        @include transition.transition-set-var(max-width, icon.get-var(size));
-        @include transition.transition-set-var(max-width-gap, $gap);
-      }
-      @include utils.map-to-styles($typography);
-
-      align-items: center;
-      border-radius: $border-radius;
-      border-width: 0;
-      display: inline-flex;
-      flex-shrink: 0;
-      gap: $gap;
-      height: $height;
-      justify-content: center;
-      max-width: 100%;
-      padding: $vertical-padding $horizontal-padding;
-
-      @if not $disable-solid-theme {
-        &--solid {
-          @if not $disable-solid-raisable {
-            @include box-shadows.elevation-transition(
-              $start-z-value: 0,
-              $end-z-value: $solid-raisable-box-shadow-z-value,
-              $duration: $solid-raisable-transition-duration,
-              $active-selectors: "&.rmd-chip--pressed",
-              $pseudo-before: false,
-              $position-relative: false
-            );
+        @if not $disable-progress {
+          @include progress.set-var(circular-size, $progress-size);
+          @include progress.set-var(circular-stroke-width, $progress-width);
+        }
+
+        @if not $disable-selected-icon-transition and $gap {
+          @include transition.transition-set-var(max-width, icon.get-var(size));
+          @include transition.transition-set-var(max-width-gap, $gap);
+        }
+        @include utils.map-to-styles($typography);
+
+        align-items: center;
+        border-radius: $border-radius;
+        border-width: 0;
+        display: inline-flex;
+        flex-shrink: 0;
+        gap: $gap;
+        height: $height;
+        justify-content: center;
+        max-width: 100%;
+        padding: $vertical-padding $horizontal-padding;
+
+        @if not $disable-solid-theme {
+          &--solid {
+            @if not $disable-solid-raisable {
+              @include box-shadows.elevation-transition(
+                $start-z-value: 0,
+                $end-z-value: $solid-raisable-box-shadow-z-value,
+                $duration: $solid-raisable-transition-duration,
+                $active-selectors: "&.rmd-chip--pressed",
+                $pseudo-before: false,
+                $position-relative: false
+              );
+            }
+            @include use-var(background-color, solid-background-color);
+            @include use-var(color, solid-color);
           }
-          @include use-var(background-color, solid-background-color);
-          @include use-var(color, solid-color);
         }
-      }
 
-      @if not $disable-outline-theme {
-        &--outline {
-          @if not $disable-outline-raisable {
-            $outline-box-shadow: inset
-              0
-              0
-              0
-              #{get-var(outline-width)}
-              #{get-var(outline-color)};
-
-            @include box-shadows.box-shadow-transition(
-              $start-shadow: $outline-box-shadow,
-              $end-shadow:
-                box-shadows.box-shadow($outline-raisable-box-shadow-z-value),
-              $duration: $outline-raisable-transition-duration,
-              $active-selectors: "&.rmd-chip--pressed",
-              $pseudo-before: false,
-              $position-relative: false
-            );
+        @if not $disable-outline-theme {
+          &--outline {
+            @if not $disable-outline-raisable {
+              $outline-box-shadow: inset
+                0
+                0
+                0
+                #{get-var(outline-width)}
+                #{get-var(outline-color)};
+
+              @include box-shadows.box-shadow-transition(
+                $start-shadow: $outline-box-shadow,
+                $end-shadow:
+                  box-shadows.box-shadow($outline-raisable-box-shadow-z-value),
+                $duration: $outline-raisable-transition-duration,
+                $active-selectors: "&.rmd-chip--pressed",
+                $pseudo-before: false,
+                $position-relative: false
+              );
+            }
+            @include use-var(background-color, outline-background-color);
+            @include use-var(color, outline-text-color);
           }
-          @include use-var(background-color, outline-background-color);
-          @include use-var(color, outline-text-color);
         }
-      }
 
-      @if not $disable-selected-theme {
-        &--themed {
-          @include use-var(background-color, theme-background-color);
-          @include use-var(color, theme-color);
-          @if not $disable-icon {
-            @include icon.set-var(color, currentcolor);
+        @if not $disable-selected-theme {
+          &--themed {
+            @include use-var(background-color, theme-background-color);
+            @include use-var(color, theme-color);
+            @if not $disable-icon {
+              @include icon.set-var(color, currentcolor);
+            }
           }
         }
-      }
 
-      &--disabled {
-        @if not $disable-icon {
-          @include icon.set-var(color, currentcolor);
+        &--disabled {
+          @if not $disable-icon {
+            @include icon.set-var(color, currentcolor);
+          }
         }
-      }
 
-      @if not $disable-solid-theme {
-        &--solid-disabled {
-          @include use-var(background-color, solid-disabled-background-color);
+        @if not $disable-solid-theme {
+          &--solid-disabled {
+            @include use-var(background-color, solid-disabled-background-color);
+          }
         }
-      }
 
-      @if not $disable-left-addon {
-        &--left-addon {
-          @include utils.auto-rtl(
-            padding-left,
-            $addon-left-padding,
-            $horizontal-padding
-          );
+        @if not $disable-left-addon {
+          &--left-addon {
+            @include utils.auto-rtl(
+              padding-left,
+              $addon-left-padding,
+              $horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-right-addon {
-        &--right-addon {
-          @include utils.auto-rtl(
-            padding-right,
-            $addon-right-padding,
-            $horizontal-padding
-          );
+        @if not $disable-right-addon {
+          &--right-addon {
+            @include utils.auto-rtl(
+              padding-right,
+              $addon-right-padding,
+              $horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-content {
-        &__content {
-          @include typography.text-overflow;
+        @if not $disable-content {
+          &__content {
+            @include typography.text-overflow;
 
-          flex: 1 1 auto;
+            flex: 1 1 auto;
+          }
         }
       }
     }