npm - @itcase/ui - Versions diffs - 1.8.159 → 1.8.161 - Mend

@itcase/ui 1.8.159 → 1.8.161

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (99) hide show

package/dist/cjs/components/Modal.js +6 -6
package/dist/components/Modal.js +6 -6
package/dist/css/components/Accordion/Accordion.css +90 -10
package/dist/css/components/Avatar/Avatar.css +219 -12
package/dist/css/components/AvatarStack/AvatarStack.css +54 -8
package/dist/css/components/Badge/Badge.css +1131 -25
package/dist/css/components/Breadcrumbs/Breadcrumbs.css +27 -5
package/dist/css/components/Button/Button.css +467 -21
package/dist/css/components/Cell/Cell.css +31 -6
package/dist/css/components/Checkbox/Checkbox.css +10896 -164
package/dist/css/components/Checkmark/Checkmark.css +60 -9
package/dist/css/components/Chips/Chips.css +53 -7
package/dist/css/components/Choice/Choice.css +123 -13
package/dist/css/components/Choice/css/__item/choice__item_size.css +78 -8
package/dist/css/components/Code/Code.css +55 -11
package/dist/css/components/DatePeriod/DatePeriod.css +61 -11
package/dist/css/components/Divider/Divider.css +35 -15
package/dist/css/components/Dot/Dot.css +41 -7
package/dist/css/components/Dropdown/Dropdown.css +66 -10
package/dist/css/components/Flex/Flex.css +239 -40
package/dist/css/components/Flex/css/__item/flex__item_align.css +51 -8
package/dist/css/components/Flex/css/__item/flex__item_direction.css +11 -4
package/dist/css/components/Flex/css/__item/flex__item_grow.css +5 -4
package/dist/css/components/Flex/css/__item/flex__item_justify-content.css +17 -4
package/dist/css/components/Grid/Grid.css +2207 -106
package/dist/css/components/Grid/css/__item/grid__item_align-self.css +53 -4
package/dist/css/components/Grid/css/__item/grid__item_column.css +270 -9
package/dist/css/components/Grid/css/__item/grid__item_justify-self.css +66 -8
package/dist/css/components/Grid/css/__item/grid__item_row.css +270 -9
package/dist/css/components/Group/Group.css +5220 -117
package/dist/css/components/HeroTitle/HeroTitle.css +27 -4
package/dist/css/components/Icon/Icon.css +7601 -99
package/dist/css/components/Input/Input.css +42 -10
package/dist/css/components/InputPassword/InputPassword.css +42 -10
package/dist/css/components/Label/Label.css +34 -6
package/dist/css/components/Link/Link.css +14 -4
package/dist/css/components/List/List.css +425 -23
package/dist/css/components/Loader/Loader.css +79 -9
package/dist/css/components/Logo/Logo.css +84 -13
package/dist/css/components/MenuItem/MenuItem.css +105 -15
package/dist/css/components/Modal/Modal.css +103 -9
package/dist/css/components/Notification/Notification.css +39 -5
package/dist/css/components/Notification/css/__item/notification__item_size.css +39 -5
package/dist/css/components/Pagination/Pagination.css +82 -19
package/dist/css/components/Pagination/css/__item/pagination__item.css +11 -4
package/dist/css/components/Pagination/css/__item/pagination__item_size.css +15 -5
package/dist/css/components/Radio/Radio.css +11019 -155
package/dist/css/components/RangeSlider/RangeSlider.css +2584 -64
package/dist/css/components/ScrollToView/ScrollToView.css +1974 -10
package/dist/css/components/Search/Search.css +34 -6
package/dist/css/components/Search/css/search-input/search-input_size.css +34 -6
package/dist/css/components/Segmented/Segmented.css +60 -8
package/dist/css/components/Segmented/css/__item/segmaented__item.css +60 -8
package/dist/css/components/Select/Select.css +456 -25
package/dist/css/components/Select/css/__input-container/select__input-container.css +369 -12
package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +20 -4
package/dist/css/components/Switch/Switch.css +53 -7
package/dist/css/components/Tab/Tab.css +79 -10
package/dist/css/components/Text/Text.css +61 -12
package/dist/css/components/Textarea/Textarea.css +32 -4
package/dist/css/components/Tile/Tile.css +49 -6
package/dist/css/components/Title/Title.css +53 -5
package/dist/css/components/Tooltip/Tooltip.css +21 -5
package/dist/css/components/Warning/Warning.css +6 -8
package/dist/css/styles/align/align.css +20 -3
package/dist/css/styles/align/align_horizontal-reverse.css +188 -4
package/dist/css/styles/align/align_horizontal.css +188 -4
package/dist/css/styles/align/align_vertical-reverse.css +176 -4
package/dist/css/styles/align/align_vertical.css +176 -4
package/dist/css/styles/align-items/align-items.css +16 -3
package/dist/css/styles/align-self/align-self.css +17 -4
package/dist/css/styles/blur/blur.css +78 -5
package/dist/css/styles/border/border.css +224 -10
package/dist/css/styles/border-color/border-color.css +24322 -53
package/dist/css/styles/border-width/border-width.css +52 -4
package/dist/css/styles/bundle.css +96767 -7865
package/dist/css/styles/caret-color/caret-color.css +276 -8
package/dist/css/styles/cursor/cursor.css +21 -5
package/dist/css/styles/elevation/elevation.css +23 -4
package/dist/css/styles/elevation/elevation_hover.css +37 -4
package/dist/css/styles/fill/fill.css +7646 -70
package/dist/css/styles/fill/fill_gradient.css +519 -12
package/dist/css/styles/flex/flex-grow.css +5 -4
package/dist/css/styles/hover/hover-fill-color.css +836 -9
package/dist/css/styles/hover/hover-item-color.css +1074 -9
package/dist/css/styles/hover/hover-text-color.css +1074 -9
package/dist/css/styles/justify-content/justify-content.css +32 -4
package/dist/css/styles/opacity/opacity.css +70 -5
package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +354 -8
package/dist/css/styles/svg-color/svg_fill.css +1018 -9
package/dist/css/styles/svg-color/svg_fill_hover.css +471 -8
package/dist/css/styles/svg-color/svg_path_fill.css +354 -8
package/dist/css/styles/text-align/text-align.css +8 -4
package/dist/css/styles/text-color/text-color.css +3570 -45
package/dist/css/styles/text-decoration/text-decoration.css +5 -4
package/dist/css/styles/text-gradient/text-gradient.css +1182 -12
package/dist/css/styles/text-style/text-style.css +5 -4
package/dist/css/styles/text-weight/text-weight.css +147 -7
package/package.json +7 -7

package/dist/css/styles/svg-color/svg_fill.css CHANGED Viewed

@@ -1,14 +1,1025 @@
 .svg {
   &_fill {
-    @each $type in accent, primary, secondary, surface, error, warning, success,
-      danger, info, disabled {
-      @each $color in primary, secondary, tertiary, quaternary {
-        &_$(type) {
+        &_accent {
           &-item {
-            &-$(color) {
+            &-primary {
               & svg {
                 stroke: none;
+                fill: var(--color-accent-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-accent-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_accent {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-accent-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-accent-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_accent {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-accent-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-accent-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_accent {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-accent-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-accent-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_primary {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-primary-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-primary-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_primary {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-primary-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-primary-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_primary {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-primary-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-primary-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_primary {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-primary-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-primary-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_secondary {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-secondary-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-secondary-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_secondary {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-secondary-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-secondary-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_secondary {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-secondary-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-secondary-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_secondary {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-secondary-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-secondary-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_surface {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-surface-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-surface-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_surface {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-surface-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-surface-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_surface {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-surface-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-surface-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_surface {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-surface-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-surface-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_error {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-error-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-error-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_error {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-error-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-error-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_error {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-error-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-error-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_error {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-error-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-error-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_warning {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-warning-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-warning-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_warning {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-warning-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-warning-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_warning {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-warning-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-warning-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_warning {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-warning-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-warning-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_success {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-success-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-success-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_success {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-success-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-success-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_success {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-success-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-success-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_success {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-success-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-success-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_danger {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-danger-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-danger-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_danger {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-danger-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-danger-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_danger {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-danger-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-danger-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_danger {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-danger-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-danger-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_info {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-info-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-info-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_info {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-info-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-info-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_info {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-info-item-tertiary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-info-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_info {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-info-item-quaternary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-quaternary {
+            & svg {
+              stroke: none;
+              fill: var(--color-info-fill-quaternary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_disabled {
+          &-item {
+            &-primary {
+              & svg {
+                stroke: none;
+                fill: var(--color-disabled-item-primary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-primary {
+            & svg {
+              stroke: none;
+              fill: var(--color-disabled-fill-primary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_disabled {
+          &-item {
+            &-secondary {
+              & svg {
+                stroke: none;
+                fill: var(--color-disabled-item-secondary);
+              }
+              /* & path,
+              & circle {
+                fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-secondary {
+            & svg {
+              stroke: none;
+              fill: var(--color-disabled-fill-secondary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_disabled {
+          &-item {
+            &-tertiary {
+              & svg {
+                stroke: none;
+                fill: var(--color-disabled-item-tertiary);
+              }
+              /* & path,
+              & circle {
                 fill: var(--color-$(type)-item-$(color));
+              } */
+            }
+          }
+          &-tertiary {
+            & svg {
+              stroke: none;
+              fill: var(--color-disabled-fill-tertiary);
+            }
+            /* & path,
+            & circle {
+              fill: var(--color-$(type)-item-$(color));
+            } */
+          }
+        }
+        &_disabled {
+          &-item {
+            &-quaternary {
+              & svg {
+                stroke: none;
+                fill: var(--color-disabled-item-quaternary);
               }
               /* & path,
@@ -17,10 +1028,10 @@
               } */
             }
           }
-          &-$(color) {
+          &-quaternary {
             & svg {
               stroke: none;
-              fill: var(--color-$(type)-fill-$(color));
+              fill: var(--color-disabled-fill-quaternary);
             }
             /* & path,
@@ -29,7 +1040,5 @@
             } */
           }
         }
-      }
-    }
   }
 }