app/assets/stylesheets/material_design/chips.css in material_design-0.9.0 vs app/assets/stylesheets/material_design/chips.css in material_design-0.9.1

@@ -30,12 +30,33 @@
     );
   }
 }
 
 .chip {
+  display: inline-flex;
   align-items: center;
+  height: 32px;
+  padding: 8px 12px;
   border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: light) {
+    background: rgb(var(--md-sys-light-secondary-fixed));
+    color: rgb(var(--md-sys-dark-on-secondary-fixed));
+  }
+
+  @media (prefers-color-scheme: dark) {
+    background: rgb(var(--md-sys-dark-secondary-fixed));
+    color: rgb(var(--md-sys-dark-on-secondary-fixed));
+  }
+}
+
+.filter-chip {
+  align-items: center;
+  border-radius: 8px;
   cursor: pointer;
   display: inline-flex;
   height: 32px;
   padding: 0px 8px;
   white-space: nowrap;
@@ -48,17 +69,17 @@
     border: 1px solid rgb(var(--md-sys-dark-outline-variant));
     color: rgb(var(--md-sys-dark-on-surface-variant));
   }
 }
 
-.chip:hover {
+.filter-chip:hover {
   background: var(--md-sys-hover-layer-state)
     radial-gradient(circle, transparent 1%, var(--md-sys-hover-layer-state) 1%)
     center/15000%;
 }
 
-.chip.selected {
+.filter-chip.selected {
   border-color: transparent;
   @media (prefers-color-scheme: light) {
     background: rgb(var(--md-sys-light-secondary-container));
     color: rgb(var(--md-sys-light-on-secondary-container));
   }
@@ -67,44 +88,44 @@
     background: rgb(var(--md-sys-dark-secondary-container));
     color: rgb(var(--md-sys-dark-on-secondary-container));
   }
 }
 
-.chip.selected:hover {
+.filter-chip.selected:hover {
   background: var(--md-sys-hover-selected-state)
     radial-gradient(
       circle,
       transparent 1%,
       var(--md-sys-hover-selected-state) 1%
     )
     center/15000%;
 }
 
-.chip__container {
+.filter-chip__container {
   box-sizing: border-box;
   display: inline-block;
   margin: 0;
   position: relative;
   vertical-align: middle;
 }
 
-.chip__dropdown {
+.filter-chip__dropdown {
   box-sizing: border-box;
   display: block;
   max-width: calc(100vw - 60px);
   min-width: 100%;
   position: absolute;
   width: fit-content;
   z-index: 1051;
 }
 
 @media (min-width: 768px) {
-  .chip__dropdown {
+  .filter-chip__dropdown {
     max-width: calc(100vw - 140px);
   }
 }
 
-.chip__label {
+.filter-chip__label {
   font-size: 14px;
   font-weight: 500;
   padding: 0px 8px;
 }