Can `IconBox` styles be generated with loops?

[prescience-data]

vulk/src/components/base/icon/IconBox.vue

Lines 164 to 383 in 3990cdd

	&.is-primary {
	background: var(--icon-primary-bg-color);
	&.is-bordered {
	border-color: var(--icon-primary-color);
	}
	&.is-inverted {
	background: var(--icon-primary-inverted-bg-color);
	}
	i {
	color: var(--icon-primary-color);
	}
	:deep(svg) {
	color: var(--icon-primary-color);
	}
	}
	&.is-success {
	background: var(--icon-success-bg-color);
	&.is-bordered {
	border-color: var(--icon-success-color);
	}
	&.is-inverted {
	background: var(--icon-success-inverted-bg-color);
	}
	i {
	color: var(--icon-success-color);
	}
	:deep(svg) {
	color: var(--icon-success-color);
	}
	}
	&.is-info {
	background: var(--icon-info-bg-color);
	&.is-bordered {
	border-color: var(--icon-info-color);
	}
	&.is-inverted {
	background: var(--icon-info-inverted-bg-color);
	}
	i {
	color: var(--icon-info-color);
	}
	:deep(svg) {
	color: var(--icon-info-color);
	}
	}
	&.is-warning {
	background: var(--icon-warning-bg-color);
	&.is-bordered {
	border-color: var(--icon-warning-color);
	}
	&.is-inverted {
	background: var(--icon-warning-inverted-bg-color);
	}
	i {
	color: var(--icon-warning-color);
	}
	:deep(svg) {
	color: var(--icon-warning-color);
	}
	}
	&.is-danger {
	background: var(--icon-danger-bg-color);
	&.is-bordered {
	border-color: var(--icon-danger-color);
	}
	&.is-inverted {
	background: var(--icon-danger-inverted-bg-color);
	}
	i {
	color: var(--icon-danger-color);
	}
	:deep(svg) {
	color: var(--icon-danger-color);
	}
	}
	&.is-purple {
	background: var(--icon-purple-bg-color);
	&.is-bordered {
	border-color: var(--icon-purple-color);
	}
	&.is-inverted {
	background: var(--icon-purple-inverted-bg-color);
	}
	i {
	color: var(--icon-purple-color);
	}
	:deep(svg) {
	color: var(--icon-purple-color);
	}
	}
	&.is-blue {
	background: var(--icon-blue-bg-color);
	&.is-bordered {
	border-color: var(--icon-blue-color);
	}
	&.is-inverted {
	background: var(--icon-blue-inverted-bg-color);
	}
	i {
	color: var(--icon-blue-color);
	}
	:deep(svg) {
	color: var(--icon-blue-color);
	}
	}
	&.is-yellow {
	background: var(--icon-yellow-bg-color);
	&.is-bordered {
	border-color: var(--icon-yellow-color);
	}
	&.is-inverted {
	background: var(--icon-yellow-inverted-bg-color);
	}
	i {
	color: var(--icon-yellow-color);
	}
	:deep(svg) {
	color: var(--icon-yellow-color);
	}
	}
	&.is-orange {
	background: var(--icon-orange-bg-color);
	&.is-bordered {
	border-color: var(--icon-orange-color);
	}
	&.is-inverted {
	background: var(--icon-orange-inverted-bg-color);
	}
	i,
	.iconify {
	color: var(--icon-orange-color);
	}
	:deep(svg) {
	color: var(--icon-orange-color);
	}
	}
	&.is-green {
	background: var(--icon-green-bg-color);
	&.is-bordered {
	border-color: var(--icon-green-color);
	}
	&.is-inverted {
	background: var(--icon-green-inverted-bg-color);
	}
	i {
	color: var(--icon-green-color);
	}
	:deep(svg) {
	color: var(--icon-green-color);
	}
	}
	&.is-red {
	background: var(--icon-red-bg-color);
	&.is-bordered {
	border-color: var(--icon-red-color);
	}
	&.is-inverted {
	background: var(--icon-red-inverted-bg-color);
	}
	i {
	color: var(--icon-red-color);
	}
	:deep(svg) {
	color: var(--icon-red-color);
	}
	}

Just noticed that this seems like it might be possible to generate with an scss loop?

Not sure how css var names work with loops though 🤔

[prescience-data]

maybe like

    $color-names: primary, secondary;

    @each $color-name in $color-names {
      &.is-#{$color-name} {
        background: var(--icon-#{$color-name}-bg-color);

        &.is-bordered {
          border-color: var(--icon-#{$color-name}-color);
        }

        &.is-inverted {
          background: var(--icon-#{$color-name}-inverted-bg-color);
        }

        i {
          color: var(--icon-#{$color-name}-color);
        }

        :deep(svg) {
          color: var(--icon-#{$color-name}-color);
        }
      }
    }